客户端剖切

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

@@ -112,6 +112,67 @@ function initSAPIEngine(apiID, elId, bimCfg, cb) {
   );
 }
 
+function loadClipModel(api, bimCfg, modelList, cb) {
+  let allHideParts = [];
+  let cnt = 0;
+  if (modelList && modelList.length > 0) {
+    modelList.forEach((it) => {
+      addClipModel(
+        api,
+        bimCfg,
+        it.modelId,
+        (hideParts) => {
+          allHideParts.push(...hideParts);
+          cnt++;
+          if (cnt == modelList.length) {
+            cb && cb(allHideParts);
+          }
+        },
+        modelList
+      );
+    });
+  }
+}
+function addClipModel(api, bimCfg, modelId, cb, models) {
+  let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
+  let direction = null;
+  let modelInfo = null;
+  if (models) {
+    modelInfo = models.find((m) => m.modelId == modelId);
+  }
+  if (bimCfg.clientApi) {
+    url = `/bimdata/Tools/output/model/${modelId}/root.glt`;
+    if (modelInfo) {
+      //direction = modelInfo.bimCfg.direction;
+    }
+  }
+  console.log("加载模型：" + url);
+  api.Model.add(
+    url,
+    "clip"+modelId,
+    () => {
+      console.log("加载模型成功2");
+    },
+    () => {
+      console.log("加载模型成功");
+      let hideParts = [];
+      if (modelInfo) {
+        let cfg = modelInfo.bimCfg;
+        if (cfg && cfg.hideParts) {
+          cfg.hideParts.forEach((it) => {
+            hideParts.push({
+              featureId:"clip"+it.featureId
+            });
+          });
+        }
+      }
+      api.Model.setVisible("clip"+modelId, false);
+      cb && cb(hideParts);
+    },
+    direction
+  );
+}
+
 function addModelList(api, bimCfg, modelList, cb) {
   let allHideParts = [];
   let cnt = 0;
@@ -325,7 +386,7 @@ function resetScene(that, api) {
       api.Camera.stopViewPortRoam();
       api.Camera.stopImmersiveRoam();
     }
-  } catch (e) {}
+  } catch (e) { }
   api.Model.location(api.m_model.keys().toArray()[0]);
   if (!that.bimCfg.clientApi) {
     api.Plugin.deleteMiniMap();
@@ -344,10 +405,10 @@ function resetScene(that, api) {
   }
 }
 // 添加无操作检测相关方法
-function initIdleDetection(that, apiName,timeOut) {
+function initIdleDetection(that, apiName, timeOut) {
   that.idleTimer = null;
   that.idleTime = 0;
-  that.maxIdleTime = timeOut||60*5;
+  that.maxIdleTime = timeOut || 60 * 5;
   that.isAutoRotate = false;
 
   // 清除已有的定时器
@@ -360,10 +421,10 @@ function initIdleDetection(that, apiName,timeOut) {
 
   // 设置定时器，每秒检查一次
   that.idleTimer = setInterval(() => {
-    if(!that.isAutoRotate){
+    if (!that.isAutoRotate) {
       that.idleTime++;
     }
-    console.log("--->",that.idleTime,that.maxIdleTime)
+    console.log("--->", that.idleTime, that.maxIdleTime)
     // 如果达到最大空闲时间，执行自动旋转
     if (that.idleTime >= that.maxIdleTime && !that.isAutoRotate) {
       autoRotate(that, apiName);
@@ -371,7 +432,7 @@ function initIdleDetection(that, apiName,timeOut) {
   }, 1000);
 
   // 监听用户操作事件，重置空闲时间
-  resetIdleEvents(that,apiName);
+  resetIdleEvents(that, apiName);
 }
 
 function destroyRouter(that) {
@@ -451,5 +512,6 @@ export default {
   hideParts,
   addModelList,
   initIdleDetection,
-  destroyRouter
+  destroyRouter,
+  loadClipModel
 };

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

@@ -223,7 +223,7 @@ function measurementArea(that) {
 }
 
 //构件体积
-function measuringVolume(that) {}
+function measuringVolume(that) { }
 //构件距离--客户端渲染
 function distanceClient(that) {
   let api = bimBriefingApi;
@@ -301,15 +301,35 @@ function getModels(that) {
 function closeClientClipping(that) {
   let api = bimBriefingApi;
   if (that.clipState && that.clip) {
+    that.models.forEach(it => {
+      api.Model.setVisible(it.modelId, true);
+      api.Model.setVisible("clip" + it.modelId, false);
+    });
+    if (that.bimCfg.showGis) {
+      api.Public.setGisState(true);
+      api.viewer.terrainProvider = Cesium.createWorldTerrain({
+        requestVertexNormals: true, //开启地形光照
+        requestWaterMask: true, // 开启水面波纹
+      });
+    }
     that.clipState = false;
     that.clip.remove(123456);
-    that.clip=null;
+    that.clip = null;
+    that.resetScene();
   }
 }
 //剖切 -- 客户端渲染
 function initClientClipping(that) {
   let api = bimBriefingApi;
-  let models = that.models.map((it) => it.modelId);
+  that.models.forEach(it => {
+    api.Model.setVisible(it.modelId, false);
+    api.Model.setVisible("clip" + it.modelId, true);
+  });
+  if (that.bimCfg.showGis) {
+    api.Public.setGisState(false)
+  }
+  let models = that.models.map((it) => "clip" + it.modelId);
+  api.Model.location(models[0]);
   closeClientClipping(that);
   that.$message.info("鼠标左键点击轴线进行操作!");
   that.clipState = true;
@@ -333,11 +353,13 @@ function initClientClipping(that) {
 }
 //剖切 -- 服务端渲染
 function initClipping(that) {
+  console.log("---->initClipping")
   let api = bimBriefingApi;
   api.Public.clearHandler();
   api.Measurement.clearAllTrace();
   if (that.isClient) {
     initClientClipping(that);
+    //that.clipShow();
     return;
   }
   api.Model.clipByBox(getModels(that));

yanzhu-bigscreen/src/views/bimBriefing.vue

@@ -12,30 +12,15 @@
               模型结构树
             </div>
             <div class="model-tree scroll">
-              <el-tree
-                :key="treeKey"
-                ref="tree"
-                :default-expanded-keys="treeExpendedKeys"
-                :props="{
+              <el-tree :key="treeKey" ref="tree" :default-expanded-keys="treeExpendedKeys" :props="{
                 children: 'children',
                 label: 'title',
-                }"
-                node-key="key"
-                @check="onCheckTree"
-                :load="loadNode"
-                lazy
-                show-checkbox
-              ></el-tree>
+              }" node-key="key" @check="onCheckTree" :load="loadNode" lazy show-checkbox></el-tree>
             </div>
           </div>
         </div>
       </transition>
-      <img
-        :src="leftSrc"
-        class="toSafety-fixed-left-img"
-        @click="arrowRetract"
-        id="arrowLeft"
-      />
+      <img :src="leftSrc" class="toSafety-fixed-left-img" @click="arrowRetract" id="arrowLeft" />
     </div>
 
     <div class="div-right" :class="{ isShow: leftShow, isHide: !leftShow }">
@@ -52,22 +37,15 @@
                   {{ attributeInformation }}
                 </div>
                 <div class="model-property-nav" v-if="propertyLoad == 'end'">
-                  <el-radio-group
-                    v-model="selPropertyType"
-                    size="small"
-                    fill="#6cf"
-                  >
+                  <el-radio-group v-model="selPropertyType" size="small" fill="#6cf">
                     <el-radio-button label="att">属性</el-radio-button>
                     <el-radio-button label="type">类型</el-radio-button>
                   </el-radio-group>
                 </div>
                 <div class="model-property-list" v-if="propertyLoad == 'end'">
-                  <div
-                    v-for="(item, index) in selPropertyType == 'att'
+                  <div v-for="(item, index) in selPropertyType == 'att'
                     ? propertyAttr
-                      : propertyType"
-                    :key="index"
-                  >
+                    : propertyType" :key="index">
                     <div class="group-info">
                       <svg-icon icon-class="info" />
                       <span>{{ item.name }}</span>
@@ -89,20 +67,11 @@
                       <span>{{ item.name }}</span>
                     </div>
                     <table class="model-property-table my-table">
-                      <tr
-                        v-for="(item2, index2) in item.data"
-                        :key="index2 + '-' + index"
-                      >
-                        <th
-                          width="50%"
-                          :class="'txt' + selectMenu + item2.name"
-                        >
+                      <tr v-for="(item2, index2) in item.data" :key="index2 + '-' + index">
+                        <th width="50%" :class="'txt' + selectMenu + item2.name">
                           {{ item2.name }}
                         </th>
-                        <td
-                          width="50%"
-                          :class="'txt' + selectMenu + item2.name"
-                        >
+                        <td width="50%" :class="'txt' + selectMenu + item2.name">
                           {{ item2.value }}
                           <span v-if="index == 0">米</span>
                           <span v-if="index == 1">米<sup>2</sup></span>
@@ -139,31 +108,16 @@
                 </div>
               </div>
               <template v-if="selectMenu == 6">
-                <el-button
-                  type="primary"
-                  @click="clearAllHide"
-                  class="clear-all-btn"
-                  >清除所有</el-button
-                >
+                <el-button type="primary" @click="clearAllHide" class="clear-all-btn">清除所有</el-button>
                 <div class="hide-list scroll">
-                  <div
-                    v-for="(item, index) in hideFeatureIds"
-                    :key="index"
-                    class="hide-item"
-                  >
+                  <div v-for="(item, index) in hideFeatureIds" :key="index" class="hide-item">
                     <div class="hide-item-state">
                       {{ item.show ? "隐藏" : "显示" }}
                     </div>
-                    <el-switch
-                      v-model="item.show"
-                      @change="changeSwitch(item)"
-                    ></el-switch>
+                    <el-switch v-model="item.show" @change="changeSwitch(item)"></el-switch>
                     <div class="hide-item-id">{{ item.id }}</div>
                     <div class="hide-item-delete">
-                      <i
-                        class="el-icon-delete command"
-                        @click="deleteFeature(item)"
-                      />
+                      <i class="el-icon-delete command" @click="deleteFeature(item)" />
                     </div>
                   </div>
                 </div>
@@ -191,30 +145,16 @@
                 <svg-icon icon-class="info" />
                 <span>当前进度</span>
               </div>
-              <el-progress
-                :text-inside="true"
-                :stroke-width="26"
-                color="#37A685"
-                :percentage="70"
-              />
+              <el-progress :text-inside="true" :stroke-width="26" color="#37A685" :percentage="70" />
             </div>
           </div>
         </div>
       </transition>
-      <img
-        :src="rightSrc"
-        class="toSafety-fixed-right-img"
-        @click="arrowRetract"
-        id="arrowRight"
-      />
+      <img :src="rightSrc" class="toSafety-fixed-right-img" @click="arrowRetract" id="arrowRight" />
     </div>
 
     <div class="div-tools">
-      <div
-        class="tool-item"
-        :class="{ 'is-selected': selectMenu == 0 }"
-        @click="doSelectMenu(0)"
-      >
+      <div class="tool-item" :class="{ 'is-selected': selectMenu == 0 }" @click="doSelectMenu(0)">
         <el-tooltip content="默认视点" placement="top">
           <div class="icon">
             <svg-icon icon-class="home" />
@@ -222,11 +162,7 @@
         </el-tooltip>
       </div>
 
-      <div
-        class="tool-item"
-        :class="{ 'is-selected': selectMenu == 1 }"
-        @click="doSelectMenu(1)"
-      >
+      <div class="tool-item" :class="{ 'is-selected': selectMenu == 1 }" @click="doSelectMenu(1)">
         <el-tooltip content="构建测量" placement="top">
           <div class="icon">
             <svg-icon icon-class="size2" />
@@ -234,12 +170,7 @@
         </el-tooltip>
       </div>
 
-      <div
-        class="tool-item"
-        :class="{ 'is-selected': selectMenu == 2 }"
-        @click="doSelectMenu(2)"
-        v-if="1 == 2"
-      >
+      <div class="tool-item" :class="{ 'is-selected': selectMenu == 2 }" @click="doSelectMenu(2)" v-if="1 == 2">
         <el-tooltip content="构建面积" placement="top">
           <div class="icon">
             <svg-icon icon-class="area2" />
@@ -247,12 +178,7 @@
         </el-tooltip>
       </div>
 
-      <div
-        class="tool-item"
-        :class="{ 'is-selected': selectMenu == 3 }"
-        @click="doSelectMenu(3)"
-        v-if="1 == 2"
-      >
+      <div class="tool-item" :class="{ 'is-selected': selectMenu == 3 }" @click="doSelectMenu(3)" v-if="1 == 2">
         <el-tooltip content="构建体积" placement="top">
           <div class="icon">
             <svg-icon icon-class="volume" />
@@ -260,11 +186,7 @@
         </el-tooltip>
       </div>
 
-      <div
-        class="tool-item"
-        :class="{ 'is-selected': selectMenu == 4 }"
-        @click="doSelectMenu(4)"
-      >
+      <div class="tool-item" :class="{ 'is-selected': selectMenu == 4 }" @click="doSelectMenu(4)">
         <el-tooltip content="距离测量" placement="top">
           <div class="icon">
             <svg-icon icon-class="distance" />
@@ -272,11 +194,7 @@
         </el-tooltip>
       </div>
 
-      <div
-        class="tool-item"
-        :class="{ 'is-selected': selectMenu == 5 }"
-        @click="doSelectMenu(5)"
-      >
+      <div class="tool-item" :class="{ 'is-selected': selectMenu == 5 }" @click="doSelectMenu(5)">
         <el-tooltip content="剖切" placement="top">
           <div class="icon">
             <svg-icon icon-class="sectioning" />
@@ -284,11 +202,7 @@
         </el-tooltip>
       </div>
 
-      <div
-        class="tool-item"
-        :class="{ 'is-selected': selectMenu == 6 }"
-        @click="doSelectMenu(6)"
-      >
+      <div class="tool-item" :class="{ 'is-selected': selectMenu == 6 }" @click="doSelectMenu(6)">
         <el-tooltip content="构建隐藏" placement="top">
           <div class="icon">
             <svg-icon icon-class="hide" />
@@ -296,11 +210,7 @@
         </el-tooltip>
       </div>
 
-      <div
-        class="tool-item"
-        :class="{ 'is-selected': selectMenu == 7 }"
-        @click="doSelectMenu(7)"
-      >
+      <div class="tool-item" :class="{ 'is-selected': selectMenu == 7 }" @click="doSelectMenu(7)">
         <el-tooltip content="构建属性" placement="top">
           <div class="icon">
             <svg-icon icon-class="attribute" />
@@ -370,6 +280,9 @@ export default {
     this.initEngine();
   },
   methods: {
+    clipShow() {
+      this.$refs.clipDlialog.showDialog(this);
+    },
     clientShow() {
       return this.bimCfg?.clientApi || false;
     },
@@ -386,7 +299,7 @@ export default {
           });
           this.hideFeatureIds = [];
         })
-        .catch(() => {});
+        .catch(() => { });
     },
     changeSwitch(item) {
       let api = bimBriefingApi;
@@ -676,6 +589,16 @@ export default {
           if (this.models.length == 0) {
             this.$message.error("暂无模型，请先关联模型");
           } else {
+            if (this.bimCfg.clientApi) {
+              bimTools.loadClipModel(window.bimBriefingApi,
+                this.bimCfg,
+                this.models,
+                (hideParts) => {
+                  this.clipHideParts = hideParts;
+                  bimTools.hideParts(window.bimBriefingApi, hideParts);
+                });
+            }
+
             bimTools.addModelList(
               window.bimBriefingApi,
               this.bimCfg,
@@ -695,6 +618,7 @@ export default {
                   setTimeout(() => {
                     this.doSelectMenu(7);
                   }, 4000);
+
                 }, 1000);
               }
             );
@@ -710,6 +634,7 @@ export default {
           }
         });
     },
+
     loadModelTree() {
       this.modelTrees = [
         {
@@ -774,48 +699,6 @@ export default {
       bimTools.resetScene(this, bimBriefingApi);
       bimTools.hideParts(window.bimBriefingApi, this.hideParts);
     },
-    myClip(z) {
-      let api = bimBriefingApi;
-      let zClip = z||0.5; // 尝试正值
-      //TODO 模型按Z轴剖切
-      
-      try {
-        
-        
-        // 等待一小段时间确保剖切系统初始化完成
-        setTimeout(() => {
-          // 遍历所有加载的模型并应用剖切
-          this.models.forEach(model => {
-            const modelId = model.modelId;
-            console.log("尝试对模型应用剖切:", modelId);
-            
-            if (api.m_model && api.m_model.get(modelId)) {
-              // 创建沿Z轴的剖切平面
-              const clippingPlanes = new Cesium.ClippingPlaneCollection({
-                planes: [
-                  new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, 1.0), zClip), // 1.0表示沿Z轴正方向剖切
-                ],
-                edgeWidth: 1.0,
-                edgeColor: Cesium.Color.RED,
-                enabled: true
-              });
-              
-              // 将剖切平面应用到模型
-              api.m_model.get(modelId).clippingPlanes = clippingPlanes;
-              console.log("剖切平面已应用到模型:", modelId);
-            } else {
-              console.log("模型未找到或未加载:", modelId);
-            }
-          });
-          
-          console.log("Z轴剖切已应用，剖切位置:", zClip);
-          this.$message.success("剖切操作已完成，剖切位置: " + zClip);
-        }, 100);
-      } catch (error) {
-        console.error("剖切操作失败:", error);
-        this.$message.error("剖切操作失败: " + error.message);
-      }
-    },
   },
 };
 </script>
@@ -899,13 +782,16 @@ export default {
       .txt4X {
         color: #f92e2e;
       }
+
       .txt4Y {
         color: #8fed12;
       }
+
       .txt4Z {
         color: orange;
       }
     }
+
     .hide-list {
       height: calc(100% - 60px);
       overflow-y: auto;
@@ -1021,7 +907,7 @@ export default {
 
       .el-tree-node {
         &:focus {
-          & > .el-tree-node__content {
+          &>.el-tree-node__content {
             background: #3489d966;
 
             &:hover {
@@ -1207,6 +1093,7 @@ export default {
     }
 
     .my-table {
+
       td,
       th {
         font-size: 20px;