集成问题

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,11 +145,11 @@
               // 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;
             }
+          }
         }
-      }
 
         .ant-table-body {
           tr {
@@ -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 {
@@ -179,36 +176,35 @@
           background: #ecf6fd;
         }
       }
-  }
+    }
 
-      .common-footer {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        height: 50px;
-        color: red;
-        border-bottom: none;
-        border-top-right-radius: 0;
-        border-top-left-radius: 0;
-
-        .common-footer-item {
-          border-top: 0;
-        }
+    .common-footer {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 50px;
+      color: red;
+      border-bottom: none;
+      border-top-right-radius: 0;
+      border-top-left-radius: 0;
+
+      .common-footer-item {
+        border-top: 0;
       }
     }
+  }
 
-    .dialog-body-max {
-      width: $dialog-max-width;
-      height: $dialog-height;
-      // min-width: $dialog-max-width;
-      margin-left: 0.5rem;
-      background: $content-color;
-      border: 1px solid $core-border-color;
-      border-radius: 6px;
-    }
+  .dialog-body-max {
+    width: $dialog-max-width;
+    height: $dialog-height;
+    // min-width: $dialog-max-width;
+    margin-left: 0.5rem;
+    background: $content-color;
+    border: 1px solid $core-border-color;
+    border-radius: 6px;
+  }
 }
 
-
 @media only screen and (min-width: 1500px) {
   .dialog-body-portal-wrapper {
     .dialog-body {

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

@@ -38,13 +38,17 @@
 #app>div{
   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{
-     background-image: url('../assets/convertor/3dview/modalbg.png');
-     height:497px;
-     width: 866px !important;
-     background-color: rgba(255,255,255,0);
-    .amos-modal-close{
+  height: 100%;
+  .amos-modal-container {
+    background-image: url('../assets/convertor/3dview/modalbg.png');
+    height: 497px;
+    width: 866px !important;
+    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,32 +301,30 @@
           .ant-table-thead {
             tr {
               th {
-                color:#fff;
+                color: #fff;
                 background-color: rgba(25, 86, 147, 1);
               }
+            }
           }
-        }
           .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{
-   width: 740px;
-  .amos-toast-inner-content{
-    .amos-toast-inner-title{
+.risk-warn-toast {
+  width: 740px;
+  .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{
-      color: white;
-      top: 22px;
-      i{
-        padding: 9px;
-        background: red;
-      }
+  .amos-toast-inner-close {
+    color: white;
+    top: 22px;
+    i {
+      padding: 9px;
+      background: red;
+    }
   }
 }
 
-.amos-toast{
-  .amos-toast-inner{
-   background: #5a94f5;
-   opacity: 0.78;
-   color: white;
-   .amos-toast-inner-title{
-     color: white;
-   }
+.amos-toast {
+  .amos-toast-inner {
+    background: #5a94f5;
+    opacity: 0.78;
+    color: white;
+    .amos-toast-inner-title {
+      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
     };
-
-    getObjFromNet(view3dFile, (objs, asyncModels) => {
-      this.setState({
-        objs,
-        asyncModels
+    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>
     );
   }
 }