增加客户端渲染

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);
-      }
+  });
-    )
+  // if (that.isClient) {
-  } else {
+  //   apiTools.loadEngine(that, "bim4DContainer", 'bim4DApi',
-    sapiTools.loadEngine(that, "bim4DContainer", 'bim4DApi', () => {
+  //     () => {
-      initLoadModel(that);
+  //       initLoadModel(that);
-    })
+  //     }
-  }
+  //   )
+  // } else {
+  //   sapiTools.loadEngine(that, "bim4DContainer", 'bim4DApi', () => {
+  //     initLoadModel(that);
+  //   })
+  // }
 }
 
 
@@ -194,46 +197,14 @@ 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) => {
-      }
-    });
-}
-
-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) {
+            bimTools.setDefaultViewPoint(window.bim4DApi, that.bimCfg, that.viewPoint)
-          if (that.viewPoint.world) {
+            that.hideParts = hideParts;
-            if (!that.clientShow()) {
+            bimTools.hideParts(window.bim4DApi, hideParts);
-              api.Camera.setViewPort(that.viewPoint);
+            that.modelLoadSuccess = true;
-            }
+            that.resetScene();
-          }
-        } else {
-          api.Camera.getViewPort((p) => {
-            that.viewPoint = p;
-          });
-        }
-        that.modelLoaded = true;
             let fnInit = () => {
               if (that.planLoaded) {
                 that.initPlay();
@@ -242,11 +213,13 @@ function addModel(that, modelId, cb) {
               }
             };
             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)) {
+          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) => {
+        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]);
+  if (!that.isClient) {
     api.Plugin.deleteMiniMap();
     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,7 +3,7 @@
     <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="tool-item" @click="resetScene">
@@ -18,8 +18,6 @@
     </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>
@@ -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;
@@ -229,7 +224,7 @@ export default {
       }
     },
     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)) {
@@ -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;
@@ -426,23 +452,28 @@ export default {
     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;