1.配置路由

mods/components/3dviewConvertor/services/3dService.js

@@ -26,14 +26,11 @@ export const getObjFromNet = (url, callback) => {
  * @param {string} type
  */
 export const initView3DAction = (type,riskSourceId) => {
-  let param = {};
-  if (riskSourceId) {
-    param = { type, riskSourceId };
+  if (!riskSourceId) {
+    riskSourceId="";
   }
-  else {
-    param = { type };
-  }
-  const url = formatUrl(FscSerUrl.view3dInitUrl, param);
+
+  const url = formatUrl(FscSerUrl.view3dInitUrl, {type,riskSourceId});
   return commonGet(url);
 };
 

mods/components/3dviewConvertor/styles/common.scss

@@ -97,7 +97,7 @@
       // border-radius: $core-border-radius;
       // box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
       // box-sizing: border-box;
-      background-image: url('./../assets/convertor/3dview/dialogbg.png');
+      background-image: url('/mods/components/3dviewConvertor/assets/convertor/3dview/dialogbg.png');
       background-color: rgba(25, 86, 147, 0.5);
 
       .body-min-header {

mods/components/3dviewConvertor/styles/index.scss

@@ -12,6 +12,7 @@
 @import './planDetail.scss';
 @import './actionbar.scss';
 @import './moduleEdit.scss';
+@import './searchpane.scss';
 
 @import './../assets/bizFont/iconfont.css';
 @import './../assets/amosFont/iconfont.css';

mods/components/3dviewConvertor/styles/planDetail.scss

@@ -3,7 +3,7 @@
     width: 216px !important;
     height: 100% !important;
     padding: 0px;
-    background: url('./../assets/convertor/3dview/prePlan/detail-info.png') no-repeat;
+    background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/detail-info.png') no-repeat;
     background-size: 100%;
     background-repeat: round;
     position: relative;
@@ -108,7 +108,7 @@
 
   .carImg {
     width: 35px;
-    background: url('./../assets/convertor/3dview/plan/car.png') no-repeat top;
+    background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/plan/car.png') no-repeat top;
   }
 
   .carHead {
@@ -131,7 +131,7 @@
     width: 81px !important;
     margin-left: 5px !important;
     font-size: 5px !important;
-    background-image: url('./../assets/convertor/3dview/plan/post.png');
+    background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/plan/post.png');
     text-align: center !important;
     line-height: 27px !important;
   }
@@ -147,7 +147,7 @@
     margin-left: 0px;
     height: 25px;
     color: white;
-    background-image: url('./../assets/convertor/3dview/plan/detail-title.png');
+    background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/plan/detail-title.png');
     background-size: 100%;
     background-repeat: round;
   }
@@ -156,7 +156,7 @@
     margin-left: 3px;
     height: 25px;
     color: white;
-    background-image: url('./../assets/convertor/3dview/prePlan/zhuyibar.png');
+    background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/zhuyibar.png');
     background-size: 100%;
     background-repeat: round;
   }
@@ -165,7 +165,7 @@
     margin-left: 3px;
     height: 25px;
     color: white;
-    background-image: url('./../assets/convertor/3dview/prePlan/jianyibar.png');
+    background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/jianyibar.png');
     background-size: 100%;
     background-repeat: round;
   }
@@ -174,7 +174,7 @@
     margin-left: 3px;
     height: 25px;
     color: white;
-    background-image: url('./../assets/convertor/3dview/prePlan/jinggaobar.png');
+    background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/jinggaobar.png');
     background-size: 100%;
     background-repeat: round;
   }
@@ -436,7 +436,7 @@
     width: 316px !important;
     height: 100% !important;
     padding: 0px;
-    background: url('./../assets/convertor/3dview/prePlan/detail-info.png') no-repeat;
+    background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/detail-info.png') no-repeat;
     background-size: 100%;
     background-repeat: round;
     position: relative;
@@ -534,7 +534,7 @@
 
   .carImg {
     width: 59px;
-    background: url('./../assets/convertor/3dview/plan/car.png') no-repeat top;
+    background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/plan/car.png') no-repeat top;
   }
 
   .carHead {
@@ -557,7 +557,7 @@
     width: 81px !important;
     margin-left: 45px !important;
     font-size: 13px !important;
-    background-image: url('./../assets/convertor/3dview/plan/post.png');
+    background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/plan/post.png');
     text-align: center !important;
     line-height: 27px !important;
   }
@@ -571,7 +571,7 @@
     margin-left: 5px;
     height: 35px;
     color: white;
-    background-image: url('./../assets/convertor/3dview/plan/detail-title.png');
+    background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/plan/detail-title.png');
     background-size: 100%;
     background-repeat: round;
   }
@@ -580,7 +580,7 @@
     margin-left: 5px;
     height: 35px;
     color: white;
-    background-image: url('./../assets/convertor/3dview/prePlan/zhuyibar.png');
+    background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/zhuyibar.png');
     background-size: 100%;
     background-repeat: round;
   }
@@ -589,7 +589,7 @@
     margin-left: 5px;
     height: 35px;
     color: white;
-    background-image: url('./../assets/convertor/3dview/prePlan/jianyibar.png');
+    background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/jianyibar.png');
     background-size: 100%;
     background-repeat: round;
   }
@@ -598,7 +598,7 @@
     margin-left: 5px;
     height: 35px;
     color: white;
-    background-image: url('./../assets/convertor/3dview/prePlan/jinggaobar.png');
+    background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/jinggaobar.png');
     background-size: 100%;
     background-repeat: round;
   }

mods/components/3dviewConvertor/styles/pointsDetails.scss

@@ -159,7 +159,7 @@
   width: 100%;
   height: 100%;
   .amos-modal-container{
-    background-image: url('./../assets/convertor/3dview/toolmodalbg.png');
+    background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/toolmodalbg.png');
     background-repeat: no-repeat;
     height:262px;
     width: 452px !important;
@@ -225,7 +225,7 @@
     height: 8px;
   }
   ::-webkit-scrollbar-thumb {           /* 拖动条 */
-    background-image: url('./../assets/convertor/3dview/scrollslider.png') ;
+    background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/scrollslider.png') ;
     background-repeat: no-repeat;
     height: 10px;
   }
@@ -233,13 +233,13 @@
     background-color:rgba(17, 44, 88, 0.2);
   }
   ::-webkit-scrollbar-button{
-    background-image: url('./../assets/convertor/3dview/scrollbutton.png') ;
+    background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/scrollbutton.png') ;
     background-repeat: no-repeat;
   }
 
    height:100%;
   .amos-modal-container{
-     background-image: url('./../assets/convertor/3dview/modalbg.png');
+     background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/modalbg.png');
      height:497px;
      width: 866px !important;
      background-color: rgba(255,255,255,0);

mods/components/3dviewConvertor/styles/preControl.scss

@@ -59,22 +59,22 @@
       width: 260px;
       height: 206px;
       padding: 20px;
-      background: url('./../assets/convertor/3dview/prePlan/buzhouqu.png') no-repeat;
+      background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/buzhouqu.png') no-repeat;
 
       .step-trace {
         height: 144px;
-        background: url('./../assets/convertor/3dview/prePlan/step-trace.png') no-repeat;
+        background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/step-trace.png') no-repeat;
 
         .next-step {
           width: 24px;
           height: 24px;
-          background: url('./../assets/convertor/3dview/prePlan/buzhouqu-xiayibu.png') no-repeat;
+          background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/buzhouqu-xiayibu.png') no-repeat;
         }
 
         .previous-step {
           width: 24px;
           height: 24px;
-          background: url('./../assets/convertor/3dview/prePlan/buzhouqu-dangqianbu.png') no-repeat;
+          background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/buzhouqu-dangqianbu.png') no-repeat;
         }
       }
 
@@ -130,7 +130,7 @@
         width: 840px;
         height: 60px;
         margin: 0 auto;
-        background-image: url('./../assets/convertor/3dview/prePlan/dingbu.png');
+        background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/dingbu.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
 
@@ -155,7 +155,7 @@
         height: 30px;
         margin: 0 auto;
         margin-top: 10px;
-        background-image: url('./../assets/convertor/3dview/prePlan/baojing.png');
+        background-image: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/baojing.png');
         background-repeat: no-repeat;
         background-size: 100% 100%;
 
@@ -179,7 +179,7 @@
         height: 60px;
         margin-bottom: 7px;
         text-align: center;
-        background: url('./../assets/convertor/3dview/prePlan/shujuqu.png');
+        background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/shujuqu.png');
 
         .text-icon {
           width: 36px;
@@ -200,7 +200,7 @@
 
           .text-icon {
             // flex: 1 0 16%;
-            background: url('./../assets/convertor/3dview/prePlan/shujuqu-shijian.png');
+            background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/shujuqu-shijian.png');
             background-repeat: no-repeat;
           }
 
@@ -214,7 +214,7 @@
 
           .text-icon {
             // flex: 1 0 16%;
-            background: url('./../assets/convertor/3dview/prePlan/shujuqu-shuichi.png');
+            background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/shujuqu-shuichi.png');
             background-repeat: no-repeat;
           }
 
@@ -228,7 +228,7 @@
 
           .text-icon {
             // flex: 1 0 8%;
-            background: url('./../assets/convertor/3dview/prePlan/shujuqu-shuiwei.png');
+            background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/shujuqu-shuiwei.png');
             background-repeat: no-repeat;
           }
 
@@ -243,7 +243,7 @@
 
           .text-icon {
             // flex: 1 0 7%;
-            background: url('./../assets/convertor/3dview/prePlan/shujuqu-gongshu.png');
+            background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/shujuqu-gongshu.png');
             background-repeat: no-repeat;
           }
 
@@ -257,7 +257,7 @@
 
           .text-icon {
             // flex: 1 0 7%;
-            background: url('./../assets/convertor/3dview/prePlan/shujuqu-paomo.png');
+            background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/shujuqu-paomo.png');
             background-repeat: no-repeat;
           }
 
@@ -279,7 +279,7 @@
 .amos-modal-confirm-confirm {
   .amos-modal-container {
     text-align: center;
-    background: url('./../assets/convertor/3dview/prePlan/tishitanchuang.png') no-repeat;
+    background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/tishitanchuang.png') no-repeat;
     background-size: 100% 100%;
     box-shadow: unset;
 
@@ -305,7 +305,7 @@
       .amos-btn {
         width: 95px;
         height: 44px;
-        background: url('./../assets/convertor/3dview/prePlan/jiaohuqu-2anniu-cheng-chang.png') no-repeat;
+        background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/jiaohuqu-2anniu-cheng-chang.png') no-repeat;
         background-size: 100% 100%;
         border: 0;
       }
@@ -315,7 +315,7 @@
         height: 40px;
         margin-top: -5px;
         color: white;
-        background: url('./../assets/convertor/3dview/prePlan/jiaohuqu-2anniu-lan-chang.png') no-repeat;
+        background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/jiaohuqu-2anniu-lan-chang.png') no-repeat;
         border: 0;
       }
     }
@@ -454,7 +454,7 @@
 .precontrol-water-view {
   width: 260px;
   text-align: center;
-  background: url('./../assets/convertor/3dview/prePlan/buzhouqu.png') no-repeat;
+  background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/buzhouqu.png') no-repeat;
   background-size: 100% 100%;
   padding-bottom: 10px;
   padding-top: 10px;
@@ -493,7 +493,7 @@
     height: 20px;
     width: 20px;
     float: left;
-    background: url('./../assets/convertor/3dview/prePlan/shujuqu-shuiwei.png');
+    background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/shujuqu-shuiwei.png');
     background-size: cover;
     // background-repeat: no-repeat;
   }
@@ -502,7 +502,7 @@
     height: 17px;
     width: 20px;
     float: left;
-    background: url('./../assets/convertor/3dview/prePlan/shujuqu-shuichi.png');
+    background: url('/mods/components/3dviewconvertor/assets/convertor/3dview/prePlan/shujuqu-shuichi.png');
     background-size: cover;
   }
 }

mods/components/3dviewConvertor/styles/searchpane.scss

+.search-pane-bg{
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+    width: 460px;
+    height: 600px;
+    background: url('/mods/components/3dviewConvertor/assets//convertor//3dview//searchpane-background.png');
+    filter:blur(3px);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    z-index: 99;
+}
+
+.search-pane{
+    position: absolute !important;
+    right: 20px !important;
+    bottom: 20px !important;
+    left: unset !important;
+    top: unset !important;
+    width: 460px;
+    height: 600px;
+    color: white;
+    z-index: 999 !important;
+    border:1px solid rgba(39,85,162,0.3);
+    border-radius: 10px;
+
+
+    .search-pane-close{
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        right: 0;
+        background-image: linear-gradient(0deg, 
+            #eb0404 0%, 
+            #ff0057 100%);
+        opacity: 0.6;
+        text-align: center;
+
+        .amosicon-close{
+            font-style: normal;
+        }
+    }
+
+
+    .amos-tabs-list{
+        border: none !important;
+        height: 30px;
+        background: #13428f !important;
+        border-radius: 5px;
+
+        .amos-tabs-tabitem{
+            background-color: #2755a2;
+            margin-right: 8px;
+            border-radius: 5px;
+
+            .amos-tabs-tabitem-inner{
+                padding: 3px 15px;
+
+                .amos-tabs-tabitem-content{
+                    color: white;
+                }
+            }
+        }
+
+        .amos-tabs-tabitem-active{
+            background-color: #036fa7 !important;
+            color: white;
+            border-radius: 2px 2px 0 0;
+        }
+
+    }
+
+
+    .params-header{
+        padding: 5px 14px;
+        height: 40px;
+        width: 100%;
+
+        .amos-group-item{
+            float: left;
+        }
+
+        .amos-select-dropdown{
+            border: none !important;
+            background-color: #13428f;
+            border-radius: 5px;
+        }
+
+        .amos-input{
+            width: 100%;
+            border: none !important;
+            background-color: #13428f;
+            border-radius: 5px;
+            float: left;
+        }
+
+        .params-input{
+            float: left;
+
+            .params-input-img{
+    
+            }
+        }
+    }
+
+    .amos-tabs .amos-tabs-panel {
+        padding-top: 0px !important;
+    }
+
+
+    .search-pane-table{
+        .ant-table-title{
+            display: none;
+        }
+
+        .ant-table-body{
+            max-height: 35rem !important;
+        }
+
+        .ant-table-thead {
+
+        } 
+
+
+        .ant-table-content {
+            height: 100%;
+
+            .ant-table-header {
+                overflow: hidden !important;
+
+            }
+        
+            .ant-table-body {
+                color: white;
+                max-height: 500px !important ;
+                min-height: 500px !important ;
+                overflow-y: auto !important; 
+                overflow-x: hidden;
+                background:transparent!important;
+                border:1px solid rgba(234,234,234,0.3);
+        
+                table {
+                    border-color: transparent !important;
+        
+                    td {
+                        border:1px solid rgba(234,234,234,0.3) !important;
+                        
+                    }
+
+                    th {
+                        color: white;
+                        background: #2755a2;
+                    }
+                }
+            }
+            .ant-table-placeholder{
+                background:transparent!important;
+                color: white;
+            }
+
+            .ant-table-thead > tr >th{
+                color: white;
+                background: #2755a2 !important;
+                //background: #222b51 !important;
+                border-color: transparent !important;
+                text-align: center;
+             }
+
+         
+            .ant-table-thead > tr.ant-table-row-hover > td, .ant-table-tbody > tr.ant-table-row-hover > td, .ant-table-thead > tr:hover > td, .ant-table-tbody > tr:hover > td {
+                background: rgba(255,255,255,0.3);
+            }
+
+             //滚动条样式
+            .ant-table-body{
+                &::-webkit-scrollbar {
+                    width: 10px;
+                    height: 10px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    background: rgba(39,85,162,0.8);
+                    border-radius: 10px;
+                }
+                &::-webkit-scrollbar-track {
+                    border-radius: 10px;
+                    background: rgba(2,11,45,0.5);
+                    border: none;
+                }
+                &::-webkit-scrollbar-corner {
+                    background: transparent;
+                }
+                &::-webkit-scrollbar-thumb:hover {
+                    background: rgba(39,85,162,1);
+                }
+            }
+  
+        }
+
+        .ant-table-pagination {
+            margin: 0 10px;
+            float: right;
+
+            .ant-select-selection{
+                display: none;
+            }
+
+            .ant-pagination-prev{
+                background-color: rgba(255,255,255,0.5);
+            }
+            .ant-pagination-next{
+                background-color: rgba(255,255,255,0.5);
+            }
+            .ant-pagination-item{
+                background-color: rgba(255,255,255,0.5);
+            }
+            .ant-pagination-item-active a, .ant-pagination-item-active:focus a, .ant-pagination-item-active:hover a {
+                color: #fff;
+            }
+        }
+    }
+}
\ No newline at end of file

mods/components/3dviewConvertor/view/ConvertorView3DRoot.js

@@ -96,7 +96,7 @@ class ConvertorView3DRoot extends Basic {
   render() {
     const { isEdit } = this.state;
     return (
-      <div>
+      <div style={{ height: '100%' }}>
         { isEdit ? '' : <Statistical refshExceptAreaData={this.refshExceptAreaData} /> }
         <div className="sys-view-3d">
           <View3D

mods/components/3dviewConvertor/view/MaskContent.js

@@ -11,6 +11,7 @@ import LayerPool from './LayerPool';
 import TopMsg from './sideControl/TopMsg';
 import ActionBar from './actionbar';
 import ModelHeader from './common/ModelHeader';
+import SearchPane from './searchPane';
 
 const eventConnect = Connect.eventConnect;
 
@@ -21,7 +22,8 @@ class MaskContent extends Component {
     super(props);
     this.state = {
       planStarted: false,
-      activeAction: 'panoramic'
+      activeAction: 'panoramic',
+      searchPaneVisible: false
     };
   }
 
@@ -49,10 +51,20 @@ class MaskContent extends Component {
   };
 
   actionBarClick = ({ singleClick, type, label, showLabel }) => {
+    
     if (!singleClick){//设置选中状态
       this.setState({ activeAction: type });
     }
     this.props.onActionItemClick && this.props.onActionItemClick(type, label, showLabel);
+    if(type === "search"){
+      this.changeSearchPaneVisible();
+    }
+  }
+
+  changeSearchPaneVisible = () => {
+      debugger;
+    const { searchPaneVisible } = this.state;
+    this.setState({ searchPaneVisible: !searchPaneVisible });
   }
 
   handleExceptModel =(type)=>{
@@ -65,7 +77,7 @@ class MaskContent extends Component {
   }
 
   render() {
-    const { planStarted, activeAction } = this.state;
+    const { planStarted, activeAction, searchPaneVisible } = this.state;
     const {
       multiple,
       onItemClick,
@@ -111,10 +123,11 @@ class MaskContent extends Component {
         <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
         { sideControlShow && <SideControl multiple={multiple} errorAreaId={errorAreaId} onItemClick={onItemClick} layerConfig={layerConfig} animationProps={controlAnimation} />}
         { sideControlShow && <DataPane animationProps={datapaneAnim} />}
+        <SearchPane visible={searchPaneVisible} changeSearchPaneVisible={() => this.changeSearchPaneVisible}/>
         <TopMsg alarmStart={alarmStart} />
         {!isShowActionBar && <ModelHeader headerName={headerName} handleExceptModel={this.handleExceptModel} />}
         {isShowActionBar && <ActionBar activeAction={activeAction} onActionItemClick={(e) => this.actionBarClick(e)} animationProps={controlAnimation}/> }
-        {/*{alarmStarted && <LayerPool animationProps={layerPoolAnimation} planStart={planStart} planQuit={planQuit} planStarted={planStarted} />}*/}
+        {alarmStarted && <LayerPool animationProps={layerPoolAnimation} planStart={planStart} planQuit={planQuit} planStarted={planStarted} />}
       </div>
     );
   }

mods/components/3dviewConvertor/view/View3D.js

@@ -787,7 +787,6 @@ class View3D extends Component {
   renderAreas = () => {
     this.areas = [];
     this.getAreas(this.state.treeData);
-    console.log(this.areas)
     return this.areas;
   }
   onRegionCreated = (polygonRegion,item) => {

mods/components/3dviewConvertor/view/conf.js

@@ -83,7 +83,8 @@ export const actionBars = [
   { key: 'panoramic-action', icon: 'panoramic', type: 'panoramic', singleClick: false, label: '全景', showLabel: true },
   { key: 'burst-action', icon: 'burst', type: 'burst', singleClick: true, label: '分解' , showLabel: false },
   { key: 'fitview-action', icon: 'fitview', type: 'fitview', singleClick: true, label: '初始视图' , showLabel: false },
-  { key: 'edit-action', icon: 'editMode', type: 'editMode', singleClick: false, label: '编辑' , showLabel: true }
+  { key: 'edit-action', icon: 'editMode', type: 'editMode', singleClick: false, label: '编辑' , showLabel: true },
+  { key: 'search-action', icon: 'editMode', type: 'search', singleClick: true, label: '检索' , showLabel: true }
 ];
 
 /**

mods/components/3dviewConvertor/view/preControl/topNews/TopView.js

@@ -26,7 +26,7 @@ class TopView extends Component {
   componentDidMount() {
     this.props.subscribe(eventTopics.top_ae_msg, (topic, data) => {
       const { content, batchNo, contingencyPlanId}  = data;
-      this.props.planStart(data.content);
+      this.props.planStart(data);
       this.setState( { content, showContent: 'block', batchNo, contingencyPlanId} );
       let { planStart } = this.props;
       this.prepareChangeTimeText(planStart);

mods/components/3dviewConvertor/view/searchPane/index.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { SidePane, Tabs } from 'amos-framework';
+import Icon from 'amos-icon';
+import ParamsHeader from './paramsHeader';
+import AmosGridTable from './../common/tableComponent/table/AmosGridTable';
+import {
+  searchAction
+} from './../../services/3dService';
+
+const { TabList, Tab, TabPanel } = Tabs;
+
+const getColumns = (self,retrieveType) => {
+  switch (retrieveType) {
+    case 'riskSource':
+      return [
+        {title: '编号',dataIndex: 'code',key: 'code',width: '25%'},
+        {title: '名称',dataIndex: 'label',key: 'label',width: '25%'},
+        {title: '等级',dataIndex: 'level',key: 'level',width: '25%'},
+        {title: '类别',dataIndex: 'typeName',key: 'typeName',width: '25%'}
+      ];
+    case 'patrol':
+      return [
+        {title: '编号',dataIndex: 'code',key: 'code',width: '16.5%'},
+        {title: '名称',dataIndex: 'label',key: 'label',width: '16.5%'},
+        {title: '路线',dataIndex: 'routeName',key: 'level',width: '16.5%'},
+        {title: '状态',dataIndex: 'title',key: 'level',width: '16.5%'},
+        {title: '责任人',dataIndex: 'person',key: 'level',width: '16.5%'},
+        {title: '类别',dataIndex: 'typeName',key: 'typeName',width: '16.5%'}
+      ];
+    case 'monitorEquipment':
+      return [
+        {title: '编号',dataIndex: 'code',key: 'code',width: '25%'},
+        {title: '名称',dataIndex: 'label',key: 'label',width: '25%'},
+        {title: '监控对象',dataIndex: 'level',key: 'protectObjName',width: '25%'},
+        {title: '类别',dataIndex: 'typeName',key: 'typeName',width: '25%'}
+      ]
+    case 'video':
+      return [
+        {title: '编号',dataIndex: 'code',key: 'code',width: '25%'},
+        {title: '名称',dataIndex: 'label',key: 'label',width: '25%'},
+        {title: '监控对象',dataIndex: 'level',key: 'protectObjName',width: '25%'},
+        {title: '类别',dataIndex: 'typeName',key: 'typeName',width: '25%'}
+      ]
+    default:
+      return [
+        {title: '编号',dataIndex: 'code',key: 'code',width: '33%'},
+        {title: '名称',dataIndex: 'label',key: 'label',width: '33%'},
+        {title: '类别',dataIndex: 'typeName',key: 'typeName',width: '33%'}
+      ];
+  }
+};
+
+const tabs = [
+  { id: '1', key: 'search', closable: false, title: '检索' },
+  { id: '2', key: 'message', closable: false, title: '消息' },
+  { id: '3', key: 'contingency', closable: false, title: '预案' },
+];
+
+class SearchPane extends Component {
+
+  constructor(props){
+    super(props);
+    this.pageConfig = {
+      current: 0,
+      pageSize: 10
+    },
+    this.state = {
+      activeKey: 'search',
+      filter: [],
+      dataList: [],
+      retrieveType: undefined,
+      totalCount: 0,
+      filter: []
+    };
+  }
+
+  componentDidMount() {
+    const { type } = this.props;
+    const { activeKey } = this.state;
+    this.fetchRetrieveData();
+  }
+
+  // onSearch = (page) => {
+    
+  //   searchAction(inputText, dataLevel, orgCode, nodeState, protectObjName, routeName, type, page || 0, pageSize).then(d => {
+  //     // 填充列表数据
+  //     this.listRef.setData(d, this);
+  //   });
+  // }
+
+  retrieveOnChange = (filter) => {
+    // const { pageSize } = this.state;
+    this.setState({filter},this.fetchRetrieveData);
+    
+  }
+
+  
+    /**
+   * 获取表格刷新方法
+   */
+  reload = r => {
+    this.setState(
+      {
+        reload: () => {
+          r();
+          this.setState({ selectedRows: [], selectedRowKeys: [] });
+        }
+      },
+      r()
+    );
+  };
+
+  onTabClick = (value) =>{
+    console.log(value)
+    if(value === 'search'){
+      this.fetchRetrieveData();
+    }else if(value === 'search'){
+
+    }else{
+
+    }
+    this.setState({ activeKey:value });
+  }
+
+  getPanelHeight = () => {
+    return 700;
+  };
+
+  fetchRetrieveData = ()=> {
+    const { filter } = this.state;
+    let inputText = '';
+    let dataLevel = '';
+    let orgCode = '';
+    let nodeState = '';
+    let type = '';
+    let routeName = '';
+    let protectObjName = '';
+    ( filter || [] ).forEach((item, i) => {
+      if (item.name === 'type') {
+        type = item.value;
+        this.setState({ retrieveType: type })
+      } else if (item.name === 'dataLevel') {
+        dataLevel = item.value;
+      } else if (item.name === 'nodeState') {
+        nodeState = item.value;
+      } else if (item.name === 'inputText'){
+        inputText = item.value;
+      } else if (item.name === 'route'){
+        routeName = item.value;
+      }  else if (item.name === 'impEquipment'){
+        protectObjName = item.value;
+      }
+    });
+
+    searchAction(inputText, dataLevel, orgCode, nodeState, protectObjName, routeName, type,  this.pageConfig.current, this.pageConfig.pageSize).then(d => {
+      this.setState({ 
+        dataList: d.content ,
+        totalCount: d.totalElements,
+       })
+    });
+  }
+
+  setPageConfig = ({ pageSize, current }) => {
+    if (pageSize !== undefined) {
+      this.pageConfig.pageSize = pageSize;
+    }
+    if (current !== undefined) {
+      this.pageConfig.current = current - 1;
+    }
+  };
+
+  render() {
+    const { dataList,activeKey,retrieveType,totalCount } = this.state;
+    return (
+      <div>
+        { this.props.visible && <div className="search-pane-bg"/> }
+        <SidePane className="search-pane" animateName="zoom-right"  visible={ this.props.visible }>
+          <div className="search-pane-close" onClick={this.props.changeSearchPaneVisible()}>
+            <Icon icon="close" />
+          </div>
+          <Tabs 
+            activeKey={activeKey}
+            onChange={(index, key) => this.onTabClick(key)}
+          >
+            <TabList>
+              {tabs.map((item, i) => (
+                <Tab key={item.key} activeKey={item.key} closable={item.closable}>{item.title}</Tab>)
+              )}
+            </TabList>
+            <ParamsHeader retrieveOnChange={this.retrieveOnChange} retrieveType='search'/>
+            <TabPanel activeKey="search">
+              <div className="search-pane-table">
+                <AmosGridTable
+                  columns={getColumns(this,retrieveType)}
+                  getTableDataAction={()=>{}} 
+                  callBack={this.reload}
+                  isPageable = {true}
+                  setPageConfig={this.setPageConfig}
+                  isChecked = {false}
+                  // getPanelHeight={this.getPanelHeight}
+                  dataList={dataList}
+                  totals={totalCount}
+                  getTableDataAction={this.fetchRetrieveData}
+                /> 
+              </div>
+            </TabPanel>
+            <TabPanel activeKey="message">消息</TabPanel>
+            <TabPanel activeKey="contingency">预案</TabPanel>
+          </Tabs>
+        </SidePane>
+      </div>
+    );
+  }
+}
+
+SearchPane.propTypes = {
+};
+
+export default SearchPane;

mods/components/3dviewConvertor/view/searchPane/paramsHeader.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, Select, Group } from 'amos-framework';
+import { trim } from 'amos-tool';
+import imgStatic from './../../consts/imgStatic';
+import {
+  getImpEquipmentAction
+} from './../../services/3dService';
+
+import { bizControlsTypes, riskSourceLevel } from './../conf';
+
+const Option = Select.Option;
+
+const enterkey = 13;
+/**
+ *
+ * @class paramsHeader
+ * @extends {Component}
+ */
+class paramsHeader extends Component {
+
+  static defaultProps = {
+    retrieveType: 'input'
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: '',
+      textValue: undefined,
+      showRiskLevel: false,
+      showImpEquiList: false,
+      impEquiList: [],
+      filter: []
+    };
+  }
+
+  componentDidMount() {
+    getImpEquipmentAction().then(d => this.setState({ impEquiList: d }));
+  }
+
+  onChange = (e) => {
+    this.setState({ value: e.target.value });
+  }
+
+  onSearchTypeChange = (value) => {
+    let showRiskLevel = false;
+    let showImpEquiList = false;
+
+    if(value === 'riskSource'){
+      showRiskLevel = true;
+    }else if(value === 'monitorEquipment'){
+      showImpEquiList = true;
+    }
+    this.setState({ showRiskLevel, showImpEquiList });
+    this.onPamarmsChange('type',value);
+  }
+
+  onPamarmsChange = (name,value) => {
+    let { filter } = this.state;
+    if(name === 'inputText'){
+      value = value.target.value;
+      this.setState({ textValue: value })
+    }
+    if (value) {
+      const flag = filter.some(e => {
+        if (e.name === name) {
+          e.value = value;
+          return true;
+        }
+      });
+      !flag && filter.push({ name, value });
+    } else {
+      filter = filter.filter(e => e.name !== name);
+    }
+    this.setState({ filter }, this.props.retrieveOnChange(filter));
+  }
+
+  getSearchContent = () => {
+    const { retrieveType } = this.props;
+    const { showRiskLevel, showImpEquiList, impEquiList  } = this.state;
+    if (retrieveType === 'input') {
+      return (<Input
+        value={this.state.value}
+        onChange={this.onChange}
+        // onKeyPress={this.keypress}
+      />);
+    } else if (retrieveType === 'select') {
+      return (
+        <Select
+          data={bizControlsTypes}
+          renderOption={item => <Option value={item.key}>{item.label}</Option>}
+          defaultOption={<Option>请选择</Option>}
+          onChange={this.onSelectChange}
+        />);
+    } else if (retrieveType === 'search') {
+      let groupStyle = { display: 'unset', width: '70%' };
+      let selectStyle = { width: '25%', minWidth: '20%', marginRight:'14px' };
+      let inputStyle = { width: '30%', minWidth: '20%', height: '28px', marginRight:'14px' };
+      let levelStyle = { width: '20%', minWidth: '15%', height: '28px', marginRight:'14px' };
+      let implStyle = { width: '35%', minWidth: '20%', height: '28px', marginRight:'14px' };
+      return (<Group style={groupStyle}>
+        <Select
+          style={selectStyle}
+          data={bizControlsTypes}
+          renderOption={item => <Option value={item.key}>{item.label}</Option>}
+          defaultOption={<Option>全部</Option>}
+          onChange={this.onSearchTypeChange}
+        />
+        <div className="params-input" style={inputStyle}>
+          <Input
+            value={this.state.textValue}
+            onChange={(v) => this.onPamarmsChange('inputText',v)}
+            // onKeyPress={this.keypress}
+            placeholder="输入关键字"
+          />
+          <img className="params-input-img" src={imgStatic.datapane.search} alt="" />
+        </div>
+        {
+          showRiskLevel && 
+          <Select
+            style={levelStyle}
+            data={riskSourceLevel}
+            renderOption={item => <Option value={item.key}>{item.label}</Option>}
+            defaultOption={<Option>全部</Option>}
+            onChange={(v) => this.onPamarmsChange('dataLevel',v)}
+        />
+        }
+        {
+          showImpEquiList && 
+          <Select
+            style={implStyle}
+            data={impEquiList}
+            renderOption={item => <Option value={item.name}>{item.name}</Option>}
+            defaultOption={<Option>全部</Option>}
+            onChange={(v) => this.onPamarmsChange('impEquipment',v)}
+        />
+        }
+      </Group>);
+    }
+  }
+
+  // keypress = (e) => {
+  //   if (e.which === enterkey ){
+  //     this.props.onSearch(trim(this.state.value || ''));
+  //   }
+  //   return;
+  // }
+
+  render() {
+    return (
+      <div className="params-header">
+        {
+          this.getSearchContent()
+        }
+        
+      </div>
+    );
+  }
+}
+
+paramsHeader.propTypes = {
+  width: PropTypes.any,
+  onSearch: PropTypes.func,
+  retrieveOnChange: PropTypes.func,
+  dataList: PropTypes.array,
+  searchType: PropTypes.string
+};
+
+export default paramsHeader;

src/routes/asyncView.js

@@ -24,7 +24,7 @@ const AsyncConsoleView = props => <AsyncLoader load={import('./../view/console')
 const AsyncConfig = props => <AsyncLoader load={import('./../view/config')} componentProps={props} />;
 const AsyncAutoLogin = props => <AsyncLoader load={import('./../view/autoLogin/AutoLogin')} componentProps={props} />;
 
-const AsyncThree3dView = props => <AsyncLoader load={import('./../view/3dview')} componentProps={props} />;
+const AsyncPanoramicMonitor = props => <AsyncLoader load={import('./../view/panoramicMonitor')} componentProps={props} />;
 const AsyncRegionList = props => <AsyncLoader load={import('./../view/region')} componentProps={props} />;
 
 const AsyncBusinessView = props => <AsyncLoader load={import('./../view/bizview/point/PointView')} componentProps={props} />;
@@ -76,7 +76,7 @@ const Routes = {
   console: AsyncConsoleView,
   // config: AsyncConfig,
   config: AsyncSubConsoleView,
-  '3dview': AsyncThree3dView,
+  '3dview': AsyncPanoramicMonitor,
   bizview: AsyncBusinessView,
   riskPoint: AsyncRiskPoint,
   dutyModel: AsyncDutyinfo,