增加客户端渲染

yanzhu-bigscreen/src/views/bim/bim4DTools.js

@@ -1,6 +1,6 @@
 import bimTools from "./bimTools";
-import apiTools from './apiTools.js'
+// import apiTools from './apiTools.js'
-import sapiTools from './sapiTools.js'
+// import sapiTools from './sapiTools.js'
 
 const options = {
   taskMapping: {
@@ -146,17 +146,20 @@ const ganttStyle = {
   },
 };
 function initEngine(that) {
-  if (that.clientShow()) {
+  bimTools.initEngine("bim4DApi", "bim4DContainer", that.bimCfg, () => {
-    apiTools.loadEngine(that, "bim4DContainer", 'bim4DApi',
+    initLoadModel(that);
-      () => {
+  });
-        initLoadModel(that);
+  // if (that.isClient) {
-      }
+  //   apiTools.loadEngine(that, "bim4DContainer", 'bim4DApi',
-    )
+  //     () => {
-  } else {
+  //       initLoadModel(that);
-    sapiTools.loadEngine(that, "bim4DContainer", 'bim4DApi', () => {
+  //     }
-      initLoadModel(that);
+  //   )
-    })
+  // } else {
-  }
+  //   sapiTools.loadEngine(that, "bim4DContainer", 'bim4DApi', () => {
+  //     initLoadModel(that);
+  //   })
+  // }
 }
 
 
@@ -194,59 +197,29 @@ function initLoadModel(that) {
         that.models.forEach((item) => {
           item.modelId = item.lightweightName;
           item.gis = JSON.parse(item.gisJson);
-          addModel(that, item.lightweightName);
         });
-        bimTools.initLoadModel(that, bim4DApi)
+        bimTools.addModelList(window.bim4DApi, that.bimCfg, that.models, (hideParts) => {
+          setTimeout(() => {
+            bimTools.setDefaultViewPoint(window.bim4DApi, that.bimCfg, that.viewPoint)
+            that.hideParts = hideParts;
+            bimTools.hideParts(window.bim4DApi, hideParts);
+            that.modelLoadSuccess = true;
+            that.resetScene();
+            let fnInit = () => {
+              if (that.planLoaded) {
+                that.initPlay();
+              } else {
+                setTimeout(fnInit, 100);
+              }
+            };
+            fnInit();
+
+          }, 1000);
+        });
       }
     });
 }
 
-function addModel(that, modelId, cb) {
-  let api = window.bim4DApi;
-  let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
-  let direction = null;
-  let modelInfo = that.models.find(m => m.modelId == modelId);
-  if (that.clientShow()) {
-    url = `/bimdata/Tools/output/model/${modelId}/root.glt`;
-    if (modelInfo) {
-      direction = modelInfo.bimCfg.direction;
-    }
-  }
-
-  console.log(modelId, url);
-  api.Model.add(
-    url,
-    modelId,
-    () => { },
-    () => {
-      cb && cb();
-      console.log("加载模型成功");
-      setTimeout(() => {
-        if (that.viewPoint) {
-          if (that.viewPoint.world) {
-            if (!that.clientShow()) {
-              api.Camera.setViewPort(that.viewPoint);
-            }
-          }
-        } else {
-          api.Camera.getViewPort((p) => {
-            that.viewPoint = p;
-          });
-        }
-        that.modelLoaded = true;
-        let fnInit = () => {
-          if (that.planLoaded) {
-            that.initPlay();
-          } else {
-            setTimeout(fnInit, 100);
-          }
-        };
-        fnInit();
-      }, 1000);
-    },
-    direction
-  );
-}
 
 const maxLen = 500;
 function showBim(that, index) {
@@ -261,23 +234,39 @@ function showBim(that, index) {
       that.taskList[i].gis.forEach((item) => {
         let featureId = item.featureId;
         if (!showFeatureIds.includes(featureId)) {
-          showFeatureIds.push(featureId);
+          if (!that.hideParts.find(d => d.featureId == featureId)) {
+            showFeatureIds.push(featureId);
+          }
+
         }
       });
     }
   }
-  console.log(index, showFeatureIds, currFeatureIds)
   if (showFeatureIds.length > 0) {
+    let tmp = showFeatureIds.splice(0, maxLen);
+    if (tmp.length > 0) {
+      api.Feature.showFeatures(tmp.join("#"));
+    }
     setFeatueVisible(showFeatureIds, true);
   }
   setTimeout(() => {
     that.lastFeatureIds.forEach((it) => {
-      api.Feature.setColor(it, "rgba(255,255,255,1)");
+      if (that.isClient) {
+        api.Feature.setColor(it, 255, 255, 255, 1);
+      } else {
+        api.Feature.setColor(it, "rgba(255,255,255,0)");
+      }
+
     });
     currFeatureIds = that.taskList[index].gis.map((item) => item.featureId);
     if (currFeatureIds.length > 0) {
       currFeatureIds.forEach((it) => {
-        api.Feature.setColor(it, "rgba(255,0,255,1)");
+        if (that.isClient) {
+          api.Feature.setColor(it, 255, 0, 255, 1);
+        } else {
+          api.Feature.setColor(it, "rgba(255,0,255,1)");
+        }
+
       });
     }
     that.lastFeatureIds = currFeatureIds;
@@ -291,6 +280,7 @@ function setFeatueVisible(featureIds, show) {
   if (cnt == 0) {
     return;
   }
+
   for (let i = 0; i < cnt; i += len) {
     api.Feature.setVisible(featureIds.slice(i, i + len).join("#"), show);
   }
@@ -313,17 +303,22 @@ function resetScene(that) {
   let api = bim4DApi;
   api.Camera.stopImmersiveRoam();
   api.Model.location(api.m_model.keys().toArray()[0]);
-  api.Plugin.deleteMiniMap();
+  if (!that.isClient) {
-  if (that.viewPoint) {
+    api.Plugin.deleteMiniMap();
-    api.Camera.setViewPort(that.viewPoint);
+    if (that.viewPoint) {
+      api.Camera.setViewPort(that.viewPoint);
+    }
   }
+
 }
 
-function original() {
+function original(that) {
   let api = bim4DApi;
   for (let modelId in api.m_model) {
     api.Model.original(modelId);
   }
+  console.log("---hideParts---", that.hideParts)
+  bimTools.hideParts(window.bim4DApi, that.hideParts);
 }
 
 function getFirstFeatureId(that) {

yanzhu-bigscreen/src/views/bim4DSimulation.vue

@@ -3,23 +3,21 @@
     <div class="icon-switch-plan" @click="doSwitchPlan">
       <svg-icon icon-class="swagger" />
     </div>
-    <div id="bim4D" :key="elId">
+    <div id="bim4D" :key="elId" :class="taskList.length>0?'show-plan':'no-plan'">
       <div id="bim4DContainer" class="bim4DContainer"></div>
-       <div class="div-tools">
+      <div class="div-tools" >
-      <div class="tool-item" @click="resetScene">
+        <div class="tool-item" @click="resetScene">
-        <div class="icon">
+          <div class="icon">
-          <svg-icon icon-class="home" />
+            <svg-icon icon-class="home" />
+          </div>
+          <span class="sp-text">默认视点</span>
         </div>
-        <span class="sp-text">默认视点</span>
+
       </div>
-    
-    </div>
 
     </div>
 
 
-   
-
     <div class="slider-info" v-if="hasLoad">
       <template v-if="isPlay == 0">
         <div class="icon" @click="doPlay">
@@ -61,7 +59,7 @@
 
       <el-slider v-model="playValue" :max="taskList.length" class="slider" @change="doSliderChange" />
     </div>
-    <div v-if="hasLoad" class="div-plan" v-show="showPlan">
+    <div v-if="hasLoad && taskList.length>0 " class="div-plan" v-show="showPlan">
       <gantt-elastic :options="options" :tasks="taskList" :dynamicStyle="planStyle" ref="gantt">
         <gantt-header slot="header" :options="optionList" v-if="1 == 2"></gantt-header>
       </gantt-elastic>
@@ -101,7 +99,7 @@ export default {
       playTime: 500,
       showPlan: true,
       lastFeatureIds: [],
-      planLoaded:false,
+      planLoaded: false,
     };
   },
   beforeDestroy() {
@@ -113,22 +111,22 @@ export default {
       clearTimeout(timer);
       bim4DTools.modelClearRotate();
       timer = setTimeout(() => {
-         bim4DTools.modelRotate(this)
+        bim4DTools.modelRotate(this)
-         clearTimeout(timer);
+        clearTimeout(timer);
       }, 1000 * 60 * 5);
     };
-    
+
     document.addEventListener('mousemove', resetTimer);
     document.addEventListener('keydown', resetTimer);
-    
+
     resetTimer();
-    
+
     this.$once('hook:beforeDestroy', () => {
       document.removeEventListener('mousemove', resetTimer);
       document.removeEventListener('keydown', resetTimer);
       clearTimeout(timer);
     });
-    
+
     this.$store.dispatch("ChangeNav", 705);
     this.dpi = this.$dpi();
     window.addEventListener("resize", () => {
@@ -152,9 +150,6 @@ export default {
     window.D4App = this;
   },
   methods: {
-    clientShow() {
-      return this.bimCfg?.clientApi || false;
-    },
     doSaveSetting() {
       if (isNaN(parseInt(this.playTime))) {
         this.playTime = 500;
@@ -172,7 +167,7 @@ export default {
       this.oldPlayTime = this.playTime;
     },
     initEngine() {
-       if (!this.selProject) {
+      if (!this.selProject) {
         return;
       }
       this.elId++;
@@ -185,13 +180,13 @@ export default {
       this.showPlan = !this.showPlan;
     },
     initPlay() {
-     
+
       if (!bim4DTools.getFirstFeatureId(this)) {
         this.$message.error("未配置计划进度，无法播放!");
         return;
       }
       let playIndex = bim4DTools.getCurrentTaskIndex(this);
-       console.log("--初始化播放---",playIndex)
+      console.log("--初始化播放---", playIndex)
       if (playIndex > 0) {
         bim4DTools.preparePlay(this);
         this.doPlayPan(playIndex);
@@ -224,12 +219,12 @@ export default {
             return o;
           });
           this.hasLoad = true;
-          this.planLoaded=true;
+          this.planLoaded = true;
         });
       }
     },
     playPlay() {
-      bim4DTools.original();
+      bim4DTools.original(this);
       bim4DTools.resetScene(this);
       this.lastFeatureIds = [];
       if (!bim4DTools.getFirstFeatureId(this)) {
@@ -260,7 +255,7 @@ export default {
     doSliderChange() {
       this.isPlay = 0;
       clearInterval(this.playTimer);
-      bim4DTools.original();
+      bim4DTools.original(this);
       bim4DTools.resetScene(this);
       this.lastFeatureIds = [];
       if (!bim4DTools.getFirstFeatureId(this)) {
@@ -288,9 +283,9 @@ export default {
       this.isPlay = 1;
       bim4DTools.doPLay(this);
     },
-    resetScene(){
+    resetScene() {
       //bim4DTools.resetScene(this);
-       bimTools.resetScene(this,bim4DApi)
+      bimTools.resetScene(this, bim4DApi)
     },
   },
 };
@@ -299,46 +294,61 @@ export default {
 <style lang="less">
 .bim-4d-simulation {
   position: relative;
+
   &.show-plan {
     #bim4D {
       height: calc(100% - 460px);
+      &.no-plan {
+         height: calc(100% - 36px);
+      }
     }
   }
+
   .div-plan {
     .gantt-elastic__main-view {
       .gantt-elastic__task-list-header-column {
         background: transparent !important;
       }
+
       .gantt-elastic__task-list-item-value {
         color: deepskyblue !important;
         background: transparent !important;
       }
+
       .gantt-elastic__main-view-container {
         border-bottom: solid 1px var(--plan-color);
+
         .gantt-elastic__calendar {
           background: transparent !important;
+
           .gantt-elastic__calendar-row-text {
             color: deepskyblue !important;
           }
         }
       }
+
       .gantt-elastic__chart-graph {
         border-top: solid 1px var(--plan-color);
       }
+
       .gantt-elastic__chart-calendar-container {
         border-bottom: solid 1px var(--plan-color);
       }
+
       .gantt-elastic__task-list-items {
         border-top: solid 1px var(--plan-color);
       }
+
       .gantt-elastic__task-list-wrapper {
         border-bottom: solid 1px var(--plan-color);
       }
+
       .gantt-elastic__calendar-row {
         &.gantt-elastic__calendar-row--month {
           border-bottom: solid 1px var(--plan-color);
         }
       }
+
       .gantt-elastic__chart-days-highlight-rect {
         display: none !important;
       }
@@ -346,28 +356,35 @@ export default {
       .gantt-elastic__chart-scroll-container {
         scrollbar-color: deepskyblue transparent;
         scrollbar-track-color: transparent;
-        -ms-overflow-style: -ms-autohiding-scrollbar; /* IE and Edge */
+        -ms-overflow-style: -ms-autohiding-scrollbar;
-        scrollbar-width: thin; /* Firefox */
+        /* IE and Edge */
+        scrollbar-width: thin;
+
+        /* Firefox */
         &::-webkit-scrollbar {
           width: 8px;
           height: 8px;
         }
+
         &::-webkit-scrollbar-thumb {
           background-color: deepskyblue;
           border-radius: 4px;
         }
+
         &::-webkit-scrollbar-track {
           background-color: transparent;
         }
       }
     }
   }
+
   .slider-info {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 8px;
+
     .icon {
       cursor: pointer;
       width: 30px;
@@ -375,19 +392,24 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
+
       .svg-icon {
         width: 24px;
         height: 24px;
         fill: deepskyblue;
       }
     }
+
     .el-slider {
       margin-left: 10px;
       flex-grow: 1;
+
       .el-slider__runway {
         height: 3px;
+
         .el-slider__bar {
           height: 3px;
+
           .el-slider__button-wrapper {
             .el-slider__button {
               width: 12px;
@@ -398,19 +420,23 @@ export default {
       }
     }
   }
+
   #bim4D {
     height: calc(100% - 40px);
     position: relative;
+
     #bim4DContainer {
       height: 100%;
     }
   }
+
   .icon-switch-plan {
     position: absolute;
     top: 100px;
     right: 40px;
     cursor: pointer;
     z-index: 9999;
+
     .svg-icon {
       width: 30px;
       height: 30px;
@@ -420,29 +446,34 @@ export default {
 
   .div-tools {
     position: absolute;
-    bottom:  10%;
+    bottom: 10%;
     left: 50%;
     margin-left: -34px;
     display: flex;
     background: #00000080;
     border-radius: 10px;
+
     .tool-item {
       display: flex;
       flex-flow: column;
       padding: 10px;
       align-items: center;
       cursor: pointer;
+
       &.is-active {
         .icon {
           background: #097fca94;
+
           .svg-icon {
             fill: #75fbfd;
           }
         }
+
         .sp-text {
           color: #75fbfd;
         }
       }
+
       .icon {
         width: 30px;
         height: 30px;
@@ -451,11 +482,13 @@ export default {
         justify-content: center;
         align-items: center;
         border-radius: 15px;
+
         .svg-icon {
           width: 20px;
           height: 20px;
         }
       }
+
       .sp-text {
         margin-top: 4px;
         font-size: 12px;