集成问题

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

@@ -19,7 +19,7 @@
 
 .common-footer {
   text-align: center;
-  background: transparent;//$core-color;
+  background: transparent; //$core-color;
   // border: 1px solid $core-border-color;
   // border-radius: $core-border-radius;
 
@@ -45,7 +45,6 @@
     }
 
     .footer-item-text {
-
     }
   }
 }
@@ -88,7 +87,7 @@
       position: relative;
       // width: $dialog-min-width;
       // height: $dialog-height;
-      height:497px;
+      height: 497px;
       width: 866px !important;
       min-width: $dialog-min-width;
       //color: black;
@@ -104,7 +103,7 @@
         position: relative;
         height: 2.5rem;
         margin-left: 1rem;
-        .dialog-min-title{
+        .dialog-min-title {
           position: absolute;
           line-height: 2.5rem;
           padding-top: 1rem;
@@ -136,7 +135,6 @@
         margin-right: 1rem;
         margin-left: 1rem;
 
-
         .ant-table-title {
           display: none;
         }
@@ -147,7 +145,7 @@
               // color: $biz-table-font-color;
               // background: $biz-table-title-color;//rgba(40, 40, 40, 1);
               // border-color: $core-border-color;
-              color:#fff;
+              color: #fff;
               background-color: transparent;
             }
           }
@@ -159,13 +157,12 @@
               // color: $biz-table-font-color;//#ffffff;
               // background: $content-color;//rgba(51, 51, 51, 1);
               // border-color: $core-border-color;//#252525;
-              color:#fff;
+              color: #fff;
               background-color: transparent;
             }
           }
           max-height: 273px !important;
           overflow-y: scroll;
-
         }
 
         .ant-table-placeholder {
@@ -208,7 +205,6 @@
   }
 }
 
-
 @media only screen and (min-width: 1500px) {
   .dialog-body-portal-wrapper {
     .dialog-body {

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

@@ -39,12 +39,16 @@
   height: 100%;
   overflow: hidden;
 
-  >div{
-    height: 100%;
-  }
+  // >div{
+  //   height: 100%;
+  // }
 }
 .sys-view-3d {
   height: 100%;
+  // scrollbar-width: none; /* firefox */
+  // -ms-overflow-style: none; /* IE 10+ */
+  // overflow-x: hidden;
+  // overflow-y: hidden;
 }
 
 .side-control-pane,

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

@@ -10,6 +10,9 @@
 .side-control-pane {
   color: black;
   text-align: center;
+  position: absolute;
+  top: 64px;
+  left: 10px;
 
   .control-pane-biz {
     padding: 1rem 0;

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

@@ -79,7 +79,6 @@
       border-radius: 0 4px 4px 0;
     }
 
-
     .carousel-center-bar {
       position: relative;
       height: 100%;
@@ -111,7 +110,7 @@
   font-size: 7px;
   line-height: 40px;
   //color: $biz-table-font-color;//white;
-  color:#fff;
+  color: #fff;
 
   .colTitle {
     padding-left: 8px;
@@ -125,18 +124,16 @@
     display: flex;
     border: 1px solid $core-border-color;
     border-bottom: 0;
-
   }
 
   .point-detail-table-row2 {
     display: flex;
     border: 1px solid $core-border-color;
-
   }
 
   .colTitle {
     float: left;
-    width: 131px;//9.84%;
+    width: 131px; //9.84%;
     height: 40px;
     background: rgba(25, 86, 147, 1);
     box-sizing: border-box;
@@ -145,7 +142,7 @@
 
   .colValue {
     float: left;
-    width: 131px;//9.83%;
+    width: 131px; //9.83%;
     height: 40px;
     //background: $content-color;//rgb(97, 96, 96);
     background: transparent;
@@ -153,7 +150,7 @@
     //border-left: 1px solid $core-border-color;
   }
 }
-.point-dialog-modal{
+.point-dialog-modal {
   ::-webkit-scrollbar {
     /* 血槽宽度 */
     width: 5px;
@@ -172,37 +169,37 @@
   }
   width: 100%;
   height: 100%;
-  .amos-modal-container{
+  .amos-modal-container {
     background-image: url('../assets/convertor/3dview/toolmodalbg.png');
     background-repeat: no-repeat;
-    height:262px;
+    height: 262px;
     width: 452px !important;
-    background-color: rgba(255,255,255,0);
-    .amos-modal-close{
+    background-color: rgba(255, 255, 255, 0);
+    .amos-modal-close {
       color: white;
       background: linear-gradient(180deg, rgba(255, 0, 102, 1) 0%, rgba(255, 0, 102, 1) 0%, rgba(255, 51, 0, 1) 100%, rgba(255, 51, 0, 1) 100%);
-      .amos-modal-close-x{
+      .amos-modal-close-x {
         width: 30px;
         height: 30px;
         line-height: 30px;
       }
     }
-    .amos-modal-header{
-      background: rgba(255,255,255,0);
+    .amos-modal-header {
+      background: rgba(255, 255, 255, 0);
       height: 50px;
       padding: 0;
       border-width: 0em;
-      .amos-modal-title{
+      .amos-modal-title {
         line-height: 50px;
         padding-left: 9px;
         color: #fff;
         font-size: 18px;
       }
     }
-    .amos-modal-content{
+    .amos-modal-content {
       padding: 0;
-      .point-dialog-body{
-        margin:10px;
+      .point-dialog-body {
+        margin: 10px;
         max-height: 180px;
         color: #fff;
         .point-dialog-modal-row {
@@ -229,67 +226,69 @@
         }
       }
     }
-
   }
 }
 
-.risk-warn-modal{
-  ::-webkit-scrollbar {             /* 血槽宽度 */
+.risk-warn-modal {
+  ::-webkit-scrollbar {
+    /* 血槽宽度 */
     width: 14px;
     height: 8px;
   }
-  ::-webkit-scrollbar-thumb {           /* 拖动条 */
-    background-image: url('../assets/convertor/3dview/scrollslider.png') ;
+  ::-webkit-scrollbar-thumb {
+    /* 拖动条 */
+    background-image: url('../assets/convertor/3dview/scrollslider.png');
     background-repeat: no-repeat;
     height: 10px;
   }
-  ::-webkit-scrollbar-track {          /* 背景槽 */
-    background-color:rgba(17, 44, 88, 0.2);
+  ::-webkit-scrollbar-track {
+    /* 背景槽 */
+    background-color: rgba(17, 44, 88, 0.2);
   }
-  ::-webkit-scrollbar-button{
-    background-image: url('../assets/convertor/3dview/scrollbutton.png') ;
+  ::-webkit-scrollbar-button {
+    background-image: url('../assets/convertor/3dview/scrollbutton.png');
     background-repeat: no-repeat;
   }
 
-   height:100%;
-  .amos-modal-container{
+  height: 100%;
+  .amos-modal-container {
     background-image: url('../assets/convertor/3dview/modalbg.png');
-     height:497px;
+    height: 497px;
     width: 866px !important;
-     background-color: rgba(255,255,255,0);
-    .amos-modal-close{
+    background-color: rgba(255, 255, 255, 0);
+    .amos-modal-close {
       color: white;
       background: linear-gradient(180deg, rgba(255, 0, 102, 1) 0%, rgba(255, 0, 102, 1) 0%, rgba(255, 51, 0, 1) 100%, rgba(255, 51, 0, 1) 100%);
-      .amos-modal-close-x{
+      .amos-modal-close-x {
         width: 30px;
         height: 30px;
         line-height: 30px;
       }
     }
-    .amos-modal-header{
-      background: rgba(255,255,255,0);
+    .amos-modal-header {
+      background: rgba(255, 255, 255, 0);
       height: 50px;
       padding: 0;
       border-width: 0em;
-      .amos-modal-title{
+      .amos-modal-title {
         line-height: 50px;
         padding-left: 9px;
         color: #fff;
         font-size: 18px;
       }
     }
-    .amos-modal-content{
-      .risk-warn{
-        .risk-warn-header{
+    .amos-modal-content {
+      .risk-warn {
+        .risk-warn-header {
           margin-bottom: 1rem;
-          color:#fff;
+          color: #fff;
         }
-        .risk-warn-table{
+        .risk-warn-table {
           background-color: transparent;
-          .ant-table-title{
+          .ant-table-title {
             display: none;
           }
-          span{
+          span {
             font-size: 14px;
           }
 
@@ -302,7 +301,7 @@
           .ant-table-thead {
             tr {
               th {
-                color:#fff;
+                color: #fff;
                 background-color: rgba(25, 86, 147, 1);
               }
             }
@@ -310,24 +309,22 @@
           .ant-table-body {
             tr {
               td {
-                color:#fff;
+                color: #fff;
                 background-color: transparent;
               }
             }
-
-
           }
-          .ant-table-body{
+          .ant-table-body {
             max-height: 35rem !important;
-            background-color:transparent;
+            background-color: transparent;
           }
         }
-        .risk-warn-content{
+        .risk-warn-content {
           padding: 15px;
-          border: 1px solid rgba(255, 255, 255, 0.3);;
+          border: 1px solid rgba(255, 255, 255, 0.3);
           margin-top: 1rem;
           margin-bottom: 2em;
-          span{
+          span {
             color: #fff;
           }
         }
@@ -336,34 +333,34 @@
   }
 }
 
-.risk-warn-toast{
+.risk-warn-toast {
   width: 740px;
-  .amos-toast-inner-content{
-    .amos-toast-inner-title{
+  .amos-toast-inner-content {
+    .amos-toast-inner-title {
       width: 100%;
       height: 31px;
       background: $model-header-color-3d;
       line-height: 31px;
       padding-left: 9px;
     }
-    .amos-toast-inner-content{
-      .risk-warn{
-        .risk-warn-header{
+    .amos-toast-inner-content {
+      .risk-warn {
+        .risk-warn-header {
           padding-bottom: 1rem;
           padding-top: 0.5rem;
           padding-left: 0.5rem;
           border: 1px solid $core-border-color;
           margin-bottom: 1rem;
         }
-        .risk-warn-table{
-          .ant-table-title{
+        .risk-warn-table {
+          .ant-table-title {
             display: none;
           }
-          .ant-table-body{
+          .ant-table-body {
             max-height: 35rem !important;
           }
         }
-        .risk-warn-content{
+        .risk-warn-content {
           padding-bottom: 2rem;
           border: 1px solid $core-border-color;
           margin-top: 1rem;
@@ -371,24 +368,23 @@
       }
     }
   }
-  .amos-toast-inner-close{
+  .amos-toast-inner-close {
     color: white;
     top: 22px;
-      i{
+    i {
       padding: 9px;
       background: red;
     }
   }
 }
 
-.amos-toast{
-  .amos-toast-inner{
+.amos-toast {
+  .amos-toast-inner {
     background: #5a94f5;
     opacity: 0.78;
     color: white;
-   .amos-toast-inner-title{
+    .amos-toast-inner-title {
       color: white;
     }
   }
 }
-

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

-.search-pane-bg{
+.search-pane-bg {
   position: absolute;
   right: 20px;
   bottom: 20px;
   width: 460px;
   height: 600px;
   background: url('../assets/convertor/3dview/searchpane-background.png');
-    filter:blur(3px);
+  filter: blur(3px);
   background-repeat: no-repeat;
   background-size: 100% 100%;
   z-index: 99;
 }
-#amos-ad-triger-6--root{
-  .ant-calendar{
-    background-color: #13428f !important;
-    border:none !important;
-    .ant-calendar-input{
-      background-color: #13428f !important;
-    }
-
-  }
-}
 
-.amos-popover-content{
-  ::-webkit-scrollbar {             /* 血槽宽度 */
-    width:5px;
+.amos-popover-content {
+  ::-webkit-scrollbar {
+    /* 血槽宽度 */
+    width: 5px;
     height: 5px;
     background-color: rgba(10, 53, 62, 1);
     border-radius: 5px;
   }
-  ::-webkit-scrollbar-thumb {           /* 拖动条 */
+  ::-webkit-scrollbar-thumb {
+    /* 拖动条 */
     border-radius: 5px;
     background-color: rgba(255, 255, 255, 0.4);
   }
-  ::-webkit-scrollbar-track {          /* 背景槽 */
-    background-color:rgba(17, 44, 88, 0.2);
+  ::-webkit-scrollbar-track {
+    /* 背景槽 */
+    background-color: rgba(17, 44, 88, 0.2);
   }
-  .amos-select-options{
-    .modalSelectOption{
-      color:#fff;
+  .amos-select-options {
+    .modalSelectOption {
+      color: #fff;
       background-color: #13428f;
     }
-    .modalSelectOption:hover{
-      color:#F0DF2D;
-      background-color: #13428f
+    .modalSelectOption:hover {
+      color: #f0df2d;
+      background-color: #13428f;
     }
   }
 }
-.search-pane{
+.search-pane {
   position: absolute !important;
   right: 20px !important;
   bottom: 20px !important;
@@ -56,73 +49,67 @@
   height: 600px;
   color: white;
   z-index: 999 !important;
-    border:1px solid rgba(39,85,162,0.3);
+  border: 1px solid rgba(39, 85, 162, 0.3);
   border-radius: 10px;
 
-
-    .search-pane-close{
+  .search-pane-close {
     position: absolute;
     width: 30px;
     height: 30px;
     right: 0;
-        background-image: linear-gradient(0deg,
-            #eb0404 0%,
-            #ff0057 100%);
+    background-image: linear-gradient(0deg, #eb0404 0%, #ff0057 100%);
     opacity: 0.6;
     text-align: center;
     padding: 4px;
 
-        .amosicon-close{
+    .amosicon-close {
       font-style: normal;
     }
   }
 
-
-    .amos-tabs-list{
+  .amos-tabs-list {
     border: none !important;
     height: 30px;
     background: #13428f !important;
     border-radius: 5px;
 
-        .amos-tabs-tabitem{
+    .amos-tabs-tabitem {
       background-color: #2755a2;
       margin-right: 8px;
       border-radius: 5px;
 
-            .amos-tabs-tabitem-inner{
+      .amos-tabs-tabitem-inner {
         padding: 3px 15px;
 
-                .amos-tabs-tabitem-content{
+        .amos-tabs-tabitem-content {
           color: white;
         }
       }
     }
 
-        .amos-tabs-tabitem-active{
+    .amos-tabs-tabitem-active {
       background-color: #036fa7 !important;
       color: white;
       border-radius: 2px 2px 0 0;
     }
-
   }
 
-
-    .params-header{
+  .params-header {
     padding: 5px 14px;
     height: 40px;
     width: 100%;
 
-        .amos-group-item{
+    .amos-group-item {
       float: left;
     }
 
-        .amos-select-dropdown{
+    .amos-select-dropdown {
       border: none !important;
       background-color: #13428f;
       border-radius: 5px;
     }
 
-        .amos-input{
+    .amos-input {
       width: 100%;
       border: none !important;
       background-color: #13428f;
@@ -131,16 +118,14 @@
       padding: 0 2em 0 0.6em !important;
     }
 
-        .params-input-img{
-
+    .params-input-img {
       position: absolute;
       width: 28px;
       height: 28px;
       right: 14px;
       cursor: pointer;
-
     }
-        .params-input-img1{
+    .params-input-img1 {
       position: absolute;
       width: 28px;
       height: 28px;
@@ -148,14 +133,14 @@
       cursor: pointer;
     }
     // .params-datePicker{
-            .ant-input{
+    .ant-input {
       background-color: #13428f;
       border: none !important;
       border-radius: 5px;
       color: white;
     }
     // }
-        .ant-calendar-picker-icon:after{
+    .ant-calendar-picker-icon:after {
       color: white;
     }
 
@@ -168,27 +153,23 @@
     padding-top: 0px !important;
   }
 
-
   // .search-pane-table{
-        .ant-table-title{
+  .ant-table-title {
     display: none;
   }
 
-        .ant-table-body{
+  .ant-table-body {
     max-height: 35rem !important;
   }
 
   .ant-table-thead {
-
   }
 
-
   .ant-table-content {
     height: 100%;
 
     .ant-table-header {
       overflow: hidden !important;
-
     }
 
     .ant-table-placeholder {
@@ -200,19 +181,19 @@
 
     .ant-table-body {
       color: white;
-                max-height: 500px !important ;
-                min-height: 500px !important ;
+      max-height: 460px !important ;
+      min-height: 460px !important ;
       overflow-y: auto !important;
       overflow-x: hidden;
-                background:transparent!important;
-                border:1px solid rgba(234,234,234,0.3);
+      margin-top: 20px;
+      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;
-
+          border: 1px solid rgba(234, 234, 234, 0.3) !important;
         }
 
         th {
@@ -222,12 +203,12 @@
       }
     }
 
-            .ant-table-placeholder{
-                background:transparent!important;
+    .ant-table-placeholder {
+      background: transparent !important;
       color: white;
     }
 
-            .ant-table-thead > tr >th{
+    .ant-table-thead > tr > th {
       color: white;
       background: #2755a2 !important;
       //background: #222b51 !important;
@@ -235,105 +216,105 @@
       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-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{
+    .ant-table-body {
       &::-webkit-scrollbar {
         width: 10px;
         height: 10px;
       }
       &::-webkit-scrollbar-thumb {
-                    background: rgba(39,85,162,0.8);
+        background: rgba(39, 85, 162, 0.8);
         border-radius: 10px;
       }
       &::-webkit-scrollbar-track {
         border-radius: 10px;
-                    background: rgba(2,11,45,0.5);
+        background: rgba(2, 11, 45, 0.5);
         border: none;
       }
       &::-webkit-scrollbar-corner {
         background: transparent;
       }
       &::-webkit-scrollbar-thumb:hover {
-                    background: rgba(39,85,162,1);
+        background: rgba(39, 85, 162, 1);
       }
     }
-
-
-
   }
 
   .ant-table-pagination {
     margin: 0 10px;
     float: right;
 
-            .ant-select-selection{
+    .ant-select-selection {
       display: none;
     }
 
-            .ant-pagination-prev{
-                background-color: rgba(255,255,255,0.5);
+    .ant-pagination-prev {
+      background-color: rgba(255, 255, 255, 0.5);
     }
-            .ant-pagination-next{
-                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 {
+      background-color: rgba(255, 255, 255, 0.5);
     }
     .ant-pagination-jump-prev {
-                background-color: rgba(255,255,255,0.5);
+      background-color: rgba(255, 255, 255, 0.5);
     }
     .ant-pagination-jump-next {
-                background-color: rgba(255,255,255,0.5);
+      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 {
+    .ant-pagination-item-active a,
+    .ant-pagination-item-active:focus a,
+    .ant-pagination-item-active:hover a {
       color: #fff;
     }
   }
   // }
 }
 
-.ant-calendar-picker-container{
-    .ant-calendar{
+.ant-calendar-picker-container {
+  .ant-calendar {
     border: 1px solid #2b8dd4;
     background-color: #2b8dd4;
-        .ant-calendar-date-input-wrap{
+    .ant-calendar-date-input-wrap {
       color: white;
-            .ant-calendar-input{
+      .ant-calendar-input {
         background-color: #2b8dd4;
       }
       .ant-calendar-input::-webkit-input-placeholder {
         color: white;
       }
     }
-        .ant-calendar-header{
+    .ant-calendar-header {
       color: white;
-            div a{
+      div a {
         color: white;
       }
-            div span a{
+      div span a {
         color: white;
       }
     }
-        .ant-calendar-body{
+    .ant-calendar-body {
       color: white;
-            .ant-calendar-cell>.ant-calendar-date{
+      .ant-calendar-cell > .ant-calendar-date {
         color: white;
       }
-           .ant-calendar-today>.ant-calendar-date{
+      .ant-calendar-today > .ant-calendar-date {
         color: black;
       }
     }
-        .ant-calendar-footer{
+    .ant-calendar-footer {
       color: white;
       .ant-calendar-today-btn {
         color: white;
       }
     }
-
   }
 }

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

@@ -92,12 +92,17 @@ class ConvertorView3DRoot extends Basic {
 
   render() {
     const { isEdit } = this.state;
+    const { visualParams = '',dataConfig = { view3dFile: false } } = this.props;
+    console.log('1111111');
+    console.log(dataConfig);
     return (
       <div style={{ height: '100%' }}>
         { isEdit ? '' : <Statistical /> }
         <div className="sys-view-3d">
           <View3D
             ref={node => this.view3d = node}
+            visualParams={visualParams}
+            dataConfig={dataConfig}
             onLoadCompleted={this.onLoadCompleted}
             hiddenScreenSaver={this.hiddenScreenSaver}
             editModelChange={this.editModelChange}

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

@@ -113,7 +113,7 @@ class MaskContent extends Component {
     return (
       <div className="mask-content">
         <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
-        { !alarmStarted && sideControlShow && <SideControl multiple={multiple} errorAreaId={errorAreaId} onItemClick={onItemClick} layerConfig={layerConfig} animationProps={controlAnimation} activeAction={activeAction}/>}
+        { !alarmStarted && sideControlShow && <SideControl multiple={multiple} errorAreaId={errorAreaId} onItemClick={onItemClick} layerConfig={layerConfig} animationProps={controlAnimation} activeAction={activeAction} />}
         { !alarmStarted && isShowActionBar && <SearchPane visible={searchPaneVisible} focusPosition={focusPosition} changeSearchPaneVisible={this.changeSearchPaneVisible} />}
         <TopMsg alarmStart={alarmStart} />
         { !alarmStarted && !isShowActionBar && <ModelHeader animationProps={controlAnimation} headerName={headerName} handleExceptModel={this.handleExceptModel} />}

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

@@ -146,13 +146,16 @@ class View3D extends Component {
       },
       isOutterView: true //控制进入层级后是否显示marker
     };
-
+    if (props.dataConfig.view3dFile){
+      return;
+    } else {
       getObjFromNet(view3dFile, (objs, asyncModels) => {
         this.setState({
           objs,
           asyncModels
         });
       });
+    }
     this.lensLevel = LENS_LEVEL.ROOT;
     // this.markerList = {};
     this.drowItem = '';
@@ -1724,9 +1727,17 @@ class View3D extends Component {
       pointType,
       isOutterView
     } = this.state;
-    const { dimension, hiddenScreenSaver, editModelChange } = this.props;
+    const { dimension, hiddenScreenSaver, editModelChange , visualParams } = this.props;
+    var mension = {};
+    if (visualParams && visualParams.width && visualParams.height){
+      mension = { width: visualParams.width,height: visualParams.height };
+      console.log(mension);
+    } else {
+      mension = dimension;
+      console.log(`-------${mension}`);
+    }
     const graphicProps = {
-      ...dimension,
+      ...mension,
       ...desigerConf,
       enableAnimator: true,
       enableOutline: true,

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

@@ -27,7 +27,7 @@ class ActionBar extends Component {
   render() {
     const { animationProps, activeAction = 'panoramic' } = this.props;
     return (
-      <SidePane className="action-pane-data" left={false} top={false} {...animationProps}>
+      <div className="action-pane-data"  {...animationProps}>
         <div className="action-list">
           {
             actionBars.map( a => {
@@ -48,7 +48,7 @@ class ActionBar extends Component {
             })
           }
         </div>
-      </SidePane>
+      </div>
     );
   }
 }

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

@@ -273,7 +273,7 @@ class SearchPane extends Component {
     return (
       <div>
         { this.props.visible && <div className="search-pane-bg" /> }
-        { this.props.visible && <SidePane className="search-pane">
+        { this.props.visible && <div className="search-pane">
           <div className="search-pane-close" onClick={()=>this.closeModal()}>
             <Icon icon="close" />
           </div>
@@ -342,7 +342,7 @@ class SearchPane extends Component {
               />
             </TabPanel>
           </Tabs>
-        </SidePane>}
+        </div>}
       </div>
     );
   }

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

@@ -66,10 +66,10 @@ class SideControl extends Component {
       });
     }
     return (
-      <SidePane className="side-control-pane" {...animationProps}>
+      <div className="side-control-pane" {...animationProps}>
         <BizControlPane controls={_bizControls} isActive={this.isActive} onItemClick={this.onBizItemClick} />
         {/* <InnateControlPane controls={viewController} layerConfig={layerConfig} /> */}
-      </SidePane>
+      </div>
     );
   }
 }