修改BIM设置页面的客户端渲染

yanzhu-ui-vue3/src/views/bim/bimSetting/ModelFloorTree.vue

@@ -21,6 +21,7 @@
 
 <script>
 import { getModelTree, getTreeAllLeafChild } from "@/api/bim/bimModel";
+import bimTools from '../bimTools'
 export default {
   props: {
     me: {
@@ -88,9 +89,6 @@ export default {
     this.$nextTick(() => { });
   },
   methods: {
-    isClient(){
-      return this.me.bimCfg.clientApi;
-    },
     loadNode(node, resolve) {
       let that = this;
       if (node.level == 0) {
@@ -187,90 +185,14 @@ export default {
       return o;
     },
      addModel(modelId, cb) {
-      let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
+      bimTools.addModelList(window.api,this.me.bimCfg, this.me.models.filter(m=>m.modelId==modelId), hideParts=>{
-      let modelInfo = this.projectMessage.find(m => m.modelId == modelId);
+        setTimeout(() => {
-      let direction = null;
+              bimTools.setDefaultViewPoint(window.api, this.me.bimCfg, this.me.viewPoint)
-      if (this.me.bimCfg.clientApi) {
+              bimTools.hideParts(window.api, hideParts);
-        url = `/bimdata/Tools/output/model/${modelId}/root.glt`;
-        if (modelInfo) {
-          direction = modelInfo.bimCfg.direction;
-        }
-      }
-      console.log("加载模型：" + url);
-
-
-      api.Model.add(
-        url,
-        modelId,
-        () => {
-          console.log("加载模型成功2");
-        },
-        () => {
-          console.log("加载模型成功");
-
-          if (modelInfo) {
-            let cfg = modelInfo.bimCfg;
-           
-            let x = cfg?.x || 0;
-            let y = cfg?.y || 0;
-            let z = cfg?.z || 0;
-            let rotateZ=cfg?.rotateZ||0;
-            let rotateX=cfg?.rotateX||0;
-            let rotateY=cfg?.rotateY||0;
-            if (x * 1 + y * 1 + z * 1 != 0) {
-              console.log(x, y, z)
-              api.Model.moveToPosition([x, y, z], 0, modelId)
-            }
-            if (rotateZ * 1 != 0) {
-              if (this.me.bimCfg.clientApi) {
-
-              } else {
-                api.Model.rotate(rotateX,rotateY, rotateZ, modelId)
-              }
-            }
-            if (cfg && cfg.hideParts) {
-              cfg.hideParts.forEach(it => {
-                this.me.hideParts.push(it);
-              })
-            }
-          }
               cb && cb();
                this.$emit("change");
-          setTimeout(() => {
-            api.Model.location(modelId);
-            if (this.$parent.viewPoint) {
-              if (this.me.bimCfg.clientApi) {
-                let pt=this.$parent.viewPoint;
-                 api.Camera.SetCamera(pt.position, pt.heading, pt.pitch)
-              } else {
-                if (this.$parent.viewPoint["world"]) {
-                  api.Camera.setViewPort(this.$parent.viewPoint);
-                }
-              }
-
-            } else {
-              api.Camera.getViewPort((p) => {
-                this.$emit("modelAdd", p);
-              });
-            }
-            let hideCnt = 0;
-            let hideFn = () => {
-              hideCnt++;
-              if (hideCnt > 30) {
-                return;
-              }
-              setTimeout(() => {
-                let featureIds = (this.me.hideParts || []).map(it => it.featureId);
-                if (featureIds.length > 0) {
-                  console.log("隐藏", featureIds.join("#"));
-                  api.Feature.setVisible(featureIds.join("#"), false);
-                }
-                hideFn();
-              }, 100)
-            };
-            hideFn();
             }, 1000);
-        }, direction);
+      }); 
      },
     onCheckTree(checkNode, event) {
       let checked = event.checkedNodes.includes(checkNode);

yanzhu-ui-vue3/src/views/bim/bimSetting/MoveModel.vue

@@ -172,9 +172,9 @@ export default {
             } else {
                 this.$message.error("模型信息不存在");
             }
-            this.saveData.x = this.form.x;
+            this.saveData.x = this.form.x*1;
-            this.saveData.y = this.form.y;
+            this.saveData.y = this.form.y*1;
-            this.saveData.z = this.form.z;
+            this.saveData.z = this.form.z*1;
             this.saveData.rotateZ = this.form.rotateZ;
 
         },
@@ -197,9 +197,9 @@ export default {
         },
         updatePosition() {
             api.Model.moveToPosition([this.form.x, this.form.y, this.form.z*1], 0, this.modelId)
-            this.saveData.x = this.form.x;
+            this.saveData.x = this.form.x*1;
-            this.saveData.y = this.form.y;
+            this.saveData.y = this.form.y*1;
-            this.saveData.z = this.form.z;
+            this.saveData.z = this.form.z*1;
             if (this.saveData.rotateZ != 0 && !this.isClient) {
                 api.Model.rotate(0, 0, this.saveData.rotateZ, this.modelId)
             }

yanzhu-ui-vue3/src/views/bim/bimSetting/apiTools.js

@@ -1,36 +1,4 @@
 import { ElMessage, ElTooltip } from 'element-plus';
-//初始化
-function initEngine(that) {
-    let opt = {
-        container: "bimSettingContainer", //[必须]容器id
-        showfps: false, //[可选]显示fps
-        openearth: true, //[可选]开启gis场景
-        // imageryprovider: "tianditu_image", //[可选]gis底图
-        openterrain: false, //[可选]开启gis地形
-        maxspaceerror: 5000, //[可选]模型可视距离; 建议设置：常规BIM时3000或更大、BIM启用LOD时100~1000、倾斜摄影,点云数据时0.1~0.5
-        loading: false, //[可选]gis模式加载动画
-        bgcolor: "#87CEFA", //[可选]bim模式场景背景色
-        selectedcolor: "#FFFF00", //[可选]选中构件颜色
-        throughwall: true, //[可选]相机是否穿墙
-        sitepath: "../Cesium/",//[可选]设置天空盒路径，指向Cesium文件夹
-        editmode: true, //[可选]是否开启编辑模式
-        searchbox: true, //[可选]gis模型是否显示搜索框
-        mapbox: true, //[可选]gis模型是否显示地图选择
-        isRequestWebgl2: true, //[可选]是否使用webgl2进行渲染
-        colorBlendMode: 1, //0:HIGHLIGHT 1:REPLACE 2:MIX ，构件选中后的着色模式
-        secretkey: window.config.secretKey,
-        language: "zh-CN", // 语言国际化 中文简体(zh-CN)、中文繁体(zh-TW)、英文(en), 默认中文简体
-        targetFrameRate: 20, //目标渲染帧率 默认20
-    };
-    window.api = new API(opt);
-    console.log("初始化成功");
-    if (that.bimCfg.showGis) {
-        that.showGis = true;
-        that.doChangeGis();
-    } else if (that.bimCfg.background) {
-        api.Public.setGisState(false, that.bimCfg.background);
-    }
-}
 
 //模型偏移管理
 function doModelMove(that) {
@@ -62,12 +30,10 @@ function moveToPosition(that) {
             that.saveData.x = that.form.x;
             that.saveData.y = that.form.y;
             that.saveData.z = that.form.z;
-            // });
         });
     });
 }
 export default {
-    initEngine,
     doModelMove,
     moveToPosition
 }

yanzhu-ui-vue3/src/views/bim/bimSetting/index.vue

@@ -83,6 +83,7 @@ import { ElMessage, ElTooltip } from 'element-plus';
 import { getProjectBimConfig } from "@/api/manage/proProjectInfo.js";
 import SAPITools from './sapiTools.js'
 import APITools from './apiTools.js'
+import bimTools from '../bimTools.js'
 export default {
   components: {
     ModelFloorTree,
@@ -136,10 +137,9 @@ export default {
         showGis: config.showGis || false,
         clientApi: config.clientApi || false
       }
-      if (this.bimCfg.clientApi) {
+      bimTools.initEngine("api", "bimSettingContainer", this.bimCfg);
-        APITools.initEngine(this);
+      if (this.bimCfg.showGis) {
-      } else {
+        this.showGis = true;
-        SAPITools.initEngine(this);
       }
     });
   },
@@ -181,7 +181,6 @@ export default {
     },
     doChange() {
       this.showModels = api.m_model.keys().toArray();
-      console.log("--change--");
     },
     resetScene() {
       if (this.$refs.personRoaming) {
@@ -332,6 +331,7 @@ export default {
     position: absolute;
     left: 340px;
     top: 20px;
+    color:#fff;
   }
 
   #bimSettingContainer {

yanzhu-ui-vue3/src/views/bim/bimSetting/sapiTools.js

@@ -1,60 +1,4 @@
 import { ElMessage, ElTooltip } from 'element-plus';
-//初始化
-function initEngine(that) {
-    window.api = new SAPI(
-        {
-            serverIP: window.config.serverIP, //服务ip地址
-            port: window.config.port, //HTTP端口
-            useHttps: window.config.useHttps, //使用Https
-            container: "bimSettingContainer", //[必须]容器id
-            secretKey: window.config.secretKey,
-            openEarth: window.config.openEarth, //[可选]开启Gis场景
-            bgColor: window.config.bgColor, //[可选]bim场景背景色, 传值即为纯色天空盒
-            tintColor: window.config.tintColor, //[可选]osgb单体化颜色
-            sceneTime: window.config.sceneTime, //[可选]分别为当前时间、日出时间、日落时间
-            cadMode: window.config.cadMode, // 是否是Cad图纸预览模式
-        },
-        () => {
-            that.initSuccess = true;
-            console.log("初始化成功");
-            let mapOptions = {
-                imgs: {
-                    // 六面图片
-                    top: "/cdn/bim/sapi/img/top.png",
-                    bottom: "/cdn/bim/sapi/img/under.png",
-                    east: "/cdn/bim/sapi/img/east.png",
-                    south: "/cdn/bim/sapi/img/south.png",
-                    west: "/cdn/bim/sapi/img/west.png",
-                    north: "/cdn/bim/sapi/img/north.png",
-                },
-                offset: {
-                    // 屏幕坐标偏移
-                    corner: GLENavigationCube.RightTop,
-                    x: 25,
-                    y: 20,
-                },
-                cube: {
-                    hoverColor: "#7193dc", // 立方导航快鼠标移过显示颜色
-                    size: 32, // 导航立方尺寸
-                    hotPointSize: 7, // 导航立方棱角热点区域尺寸
-                    cubeTextColor: "#4c4c4ccc", // cube 各个面文字颜色
-                    cubeStrokeColor: "#374769cc", // cube 各个面边框颜色
-                    cubeFillColor: "#374769cc", // cube 各个面填充颜色
-                },
-                zoomRatios: 1, // 缩放倍率
-                show: true, // 是否显示
-                showAxes: true, // 是否显示XYZ轴线
-            };
-            api.Plugin.initNavCube(mapOptions);
-            if (that.bimCfg.showGis) {
-                that.showGis = true;
-                that.doChangeGis();
-            } else if (that.bimCfg.background) {
-                api.Public.setGisState(false, that.bimCfg.background);
-            }
-        }
-    );
-}
 
 //模型偏移管理
 function doModelMove(that) {
@@ -105,7 +49,6 @@ function moveToPosition(that) {
 }
 
 export default {
-    initEngine,
     doModelMove,
     moveToPosition
 }

yanzhu-ui-vue3/src/views/bim/bimTools.js

@@ -114,6 +114,22 @@ function initSAPIEngine(apiID, elId, bimCfg, cb) {
     );
 }
 
+function addModelList(api, bimCfg, modelList, cb) {
+    let allHideParts = [];
+    let cnt = 0;
+    if (modelList && modelList.length > 0) {
+        modelList.forEach(it => {
+            addModel(api, bimCfg, it.modelId, (hideParts) => {
+                allHideParts.push(...hideParts);
+                cnt++;
+                if (cnt == modelList.length) {
+                    cb && cb(allHideParts);
+                }
+            }, modelList);
+        })
+    }
+}
+
 function addModel(api, bimCfg, modelId, cb, models) {
     let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
     let direction = null;
@@ -136,7 +152,7 @@ function addModel(api, bimCfg, modelId, cb, models) {
         },
         () => {
             console.log("加载模型成功");
-
+            let hideParts = [];
             if (modelInfo) {
                 let cfg = modelInfo.bimCfg;
 
@@ -147,8 +163,7 @@ function addModel(api, bimCfg, modelId, cb, models) {
                 let rotateX = cfg?.rotateX || 0;
                 let rotateY = cfg?.rotateY || 0;
                 if (x * 1 + y * 1 + z * 1 != 0) {
-                    console.log(x, y, z)
+                    api.Model.moveToPosition([x*1, y*1, z*1], 0, modelId)
-                    api.Model.moveToPosition([x, y, z], 0, modelId)
                 }
                 if (rotateZ * 1 != 0) {
                     if (this.me.bimCfg.clientApi) {
@@ -159,16 +174,57 @@ function addModel(api, bimCfg, modelId, cb, models) {
                 }
                 if (cfg && cfg.hideParts) {
                     cfg.hideParts.forEach(it => {
-                        this.me.hideParts.push(it);
+                        hideParts.push(it);
                     })
                 }
             }
-            cb && cb();
+            cb && cb(hideParts);
 
         }, direction);
 }
 
+function setDefaultViewPoint(api, bimCfg, pt) {
+    if (pt) {
+        if (bimCfg.clientApi) {
+            if (bimCfg.clientApi) {
+                if (pt["position"] && pt["heading"] && pt["pitch"]) {
+                    api.Camera.SetCamera(pt.position, pt.heading, pt.pitch)
+                }
+            } else {
+                if (pt["world"]) {
+                    api.Camera.setViewPort(pt);
+                }
+            }
+        }
+    } else {
+        api.Model.location(api.m_model.keys().toArray()[0])
+    }
+}
+
+function hideParts(api, hideParts) {
+    if (hideParts && hideParts.length > 0) {
+        let hideCnt = 0;
+        let hideFn = () => {
+            hideCnt++;
+            if (hideCnt > 30) {
+                return;
+            }
+            setTimeout(() => {
+                let featureIds = (hideParts || []).map(it => it.featureId);
+                if (featureIds.length > 0) {
+                    api.Feature.setVisible(featureIds.join("#"), false);
+                }
+                hideFn();
+            }, 100)
+        };
+        hideFn();
+    }
+}
+
 export default {
     initEngine,
-    addModel
+    addModel,
+    setDefaultViewPoint,
+    hideParts,
+    addModelList
 }

yanzhu-ui-vue3/src/views/bim/sandTableSetting/index.vue

@@ -63,8 +63,7 @@
         <img :src="'images/2.png'" alt="" />
         <span class="tag-txt" style="color: #ffffff; font-size: 14px">
           <img :src="'images/videoMonitor.svg'" style="width: 20px; height: 20px" />
-          aaa</span
+          aaa</span>
-        >
       </div>
     </div>
   </div>
@@ -75,9 +74,10 @@ import useUserStore from "@/store/modules/user";
 import { listBimModel } from "@/api/bim/bimModel";
 import { ElMessage, ElMessageBox, ElTooltip } from "element-plus";
 import { emitter } from "@/router/index.js";
-import { devicePositionGet, devicePositionAddItems, devicePositionUpdateItems,getDefaultViewPoint } from "@/api/bim/bim.js";
+import { devicePositionGet, devicePositionAddItems, devicePositionUpdateItems, getDefaultViewPoint } from "@/api/bim/bim.js";
-
+import { getProjectBimConfig } from "@/api/manage/proProjectInfo.js";
 import { debounce } from "lodash-es";
+import BimTools from '../bimTools'
 export default {
   name: "SandTableSetting",
   components: {
@@ -96,8 +96,10 @@ export default {
       positionByModalId: "",
       selItem: null,
       addLabels: [],
-      viewPoint:null,
+      viewPoint: null,
-      loading:false,
+      loading: false,
+      bimCfg: {},
+      isClient: false,
     };
   },
   created() {
@@ -117,7 +119,17 @@ export default {
     this.currentPrjId = this.userStore.currentPrjId;
     this.currentComId = this.userStore.currentComId;
     document.body.classList.add("is-sapi");
+
+    getProjectBimConfig(this.currentPrjId).then(d => {
+      let config = this.$tryToJson(d.msg, {});
+      this.bimCfg = {
+        background: config.background || "",
+        showGis: config.showGis || false,
+        clientApi: config.clientApi || false
+      }
+      this.isClient = this.bimCfg.clientApi;
       this.initEngine();
+    });
   },
   methods: {
     doSave: debounce(function () {
@@ -129,7 +141,7 @@ export default {
         confirmButtonText: "确 认",
         cancelButtonText: "取 消",
       }).then(() => {
-        this.loading=true
+        this.loading = true
         let adds = this.devices
           .filter((item) => {
             return item.id == null;
@@ -165,7 +177,7 @@ export default {
           ajaxs.push(devicePositionUpdateItems({ items: updates }));
         }
         Promise.all(ajaxs).then((res) => {
-          this.loading=false
+          this.loading = false
           ElMessage.success("保存成功");
         });
       });
@@ -183,6 +195,44 @@ export default {
         }
       });
     },
+    AddClientLable(item) {
+      let img = "videoMonitor";
+      if (this.activeMenu == 1) {
+        img = "videoMonitor";
+      } else if (this.activeMenu == 2) {
+        img = "pitMonitor";
+      } else if (this.activeMenu == 3) {
+        img = "towerMonitor";
+      } else if (this.activeMenu == 4) {
+        img = "power";
+      }
+      let html = `
+        <div class='tag-box-client' style='width:230px;height:228px'>
+           <img  class='tag-img' src='/cdn/bim/sapi/images/2.png' alt=''>
+           <img src="/cdn/bim/sapi/images/red.svg" class='tag-svg'>
+          <div class='tag-box'>
+         
+          <span class='tag-txt' style=''>
+           <img src='/cdn/bim/sapi/images/${img}.png' style="width:20px;height:20px;">
+            ${item.name}
+          </span>
+          </div>
+        </div>`;
+      console.log(html)
+      window.sandSettingApi.Label.addCustomHtml({
+        axisType: 0,
+        attachmentPoint: 2,
+
+        displayRange: [0, 1000],
+
+        maxDistance: 1000,
+        html: html,
+        id: item.elId,
+        position: item.position
+      });
+
+      this.addLabels.push(item.elId);
+    },
     AddLable: function (item) {
       let img = "videoMonitor";
       if (this.activeMenu == 1) {
@@ -218,11 +268,16 @@ export default {
     },
     getPosition(item, index) {
       this.selItem = item;
-      window.sandSettingApi && window.sandSettingApi.Public.clearHandler();
+      let api = window.sandSettingApi;
+      api.Public.clearHandler();
       ElMessage.info("请在场景中拾取坐标位置");
-      window.sandSettingApi.Public.pickupCoordinate(false);
+      if (this.isClient) {
-      window.sandSettingApi.Public.event("LEFT_CLICK", (e) => {
+        this.getCLientPosition(item, index);
-        window.sandSettingApi.Feature.getByPosition([e.x, e.y], (n) => {
+        return;
+      }
+      api.Public.pickupCoordinate(false);
+      api.Public.event("LEFT_CLICK", (e) => {
+        api.Feature.getByPosition([e.x, e.y], (n) => {
           if (n && n["id"]) {
             this.positionByModalId = n.id.split("^")[0];
           } else {
@@ -230,16 +285,36 @@ export default {
           }
         });
       });
-
+      api.Public.pickupCoordinate(true, (e) => {
-      window.sandSettingApi.Public.pickupCoordinate(true, (e) => {
         if (!this.positionByModalId) {
           return;
         }
         this.selItem.position = e;
-        window.sandSettingApi.Label.removeBalloon(item.elId);
+        api.Label.removeBalloon(item.elId);
         this.AddLable(this.selItem);
-        window.sandSettingApi.Public.pickupCoordinate(false);
+        api.Public.pickupCoordinate(false);
-        window.sandSettingApi.Public.clearHandler();
+        api.Public.clearHandler();
+      });
+    },
+    getCLientPosition(item, index) {
+      let api = window.sandSettingApi;
+      api.Public.event("LEFT_CLICK", (e) => {
+        if (this.isClient) {
+          api.Feature.getByEvent(e.position, (json) => {
+            if (json != undefined) {
+              if (json && json["id"]) {
+                this.positionByModalId = json.id.split("^")[0];
+                this.selItem.position = [e.position.x, e.position.y];
+                api.Label.removeBalloon(item.elId);
+                this.AddClientLable(this.selItem);
+                api.Public.clearHandler();
+              } else {
+                ElMessage.warning("请在模型上选点！");
+              }
+            }
+          });
+        }
+
       });
     },
     doToolsClose() {
@@ -251,7 +326,7 @@ export default {
       sandSettingApi.Camera.stopImmersiveRoam();
       sandSettingApi.Model.location(sandSettingApi.m_model.keys().toArray()[0]);
       sandSettingApi.Plugin.deleteMiniMap();
-      if(this.viewPoint){
+      if (this.viewPoint) {
         sandSettingApi.Camera.setViewPort(this.viewPoint);
       }
     },
@@ -293,70 +368,20 @@ export default {
       this.elId++;
       this.activeMenu = 0;
       setTimeout(() => {
-        this.loadEngine();
+        BimTools.initEngine("sandSettingApi", "bimSandTableSettingContainer", this.bimCfg, () => {
-      }, 10);
-    },
-    loadEngine() {
-      window.sandSettingApi = new SAPI(
-        {
-          serverIP: window.config.serverIP, //服务ip地址
-          port: window.config.port, //HTTP端口
-          useHttps: window.config.useHttps, //使用Https
-          container: "bimSandTableSettingContainer", //[必须]容器id
-          secretKey: window.config.secretKey,
-          openEarth: window.config.openEarth, //[可选]开启Gis场景
-          bgColor: window.config.bgColor, //[可选]bim场景背景色, 传值即为纯色天空盒
-          tintColor: window.config.tintColor, //[可选]osgb单体化颜色
-          sceneTime: window.config.sceneTime, //[可选]分别为当前时间、日出时间、日落时间
-          cadMode: window.config.cadMode, // 是否是Cad图纸预览模式
-        },
-        () => {
-          this.initSuccess = true;
-          console.log("初始化成功");
-          setTimeout(() => {
           this.initLoadModel();
+        })
       }, 10);
-          let mapOptions = {
-            imgs: {
-              // 六面图片
-              top: "/cdn/bim/sapi/img/top.png",
-              bottom: "/cdn/bim/sapi/img/under.png",
-              east: "/cdn/bim/sapi/img/east.png",
-              south: "/cdn/bim/sapi/img/south.png",
-              west: "/cdn/bim/sapi/img/west.png",
-              north: "/cdn/bim/sapi/img/north.png",
-            },
-            offset: {
-              // 屏幕坐标偏移
-              corner: GLENavigationCube.RightTop,
-              x: 25,
-              y: 20,
-            },
-            cube: {
-              hoverColor: "#7193dc", // 立方导航快鼠标移过显示颜色
-              size: 32, // 导航立方尺寸
-              hotPointSize: 7, // 导航立方棱角热点区域尺寸
-              cubeTextColor: "#4c4c4ccc", // cube 各个面文字颜色
-              cubeStrokeColor: "#374769cc", // cube 各个面边框颜色
-              cubeFillColor: "#374769cc", // cube 各个面填充颜色
-            },
-            zoomRatios: 1, // 缩放倍率
-            show: true, // 是否显示
-            showAxes: true, // 是否显示XYZ轴线
-          };
-          sandSettingApi.Plugin.initNavCube(mapOptions);
-        }
-      );
     },
     initLoadModel() {
-     getDefaultViewPoint(this.currentPrjId,1).then(d=>{
+      getDefaultViewPoint(this.currentPrjId, 1).then(d => {
-        let pt="";
+        let pt = "";
-        if(d.data && d.data.length>0){
+        if (d.data && d.data.length > 0) {
-          pt=d.data[0].viewPosition;
+          pt = d.data[0].viewPosition;
-          pt=this.$tryToJson(pt,null);
+          pt = this.$tryToJson(pt, null);
         }
-        if(pt){
+        if (pt) {
-          this.viewPoint=pt;
+          this.viewPoint = pt;
         }
       });
       listBimModel({
@@ -365,39 +390,27 @@ export default {
         comId: this.currentComId,
         projectId: this.currentPrjId,
       }).then((d) => {
-        this.models = d.rows || [];
+        this.models = (d.rows || []).map((it) => {
+          it.modelId = it.lightweightName;
+          it.bimCfg = this.$tryToJson(it.bimConfig || "{}", {});
+          it.visible = false;
+          it.checked = true;
+          it.gis = this.$tryToJson(it.gisJson || "{}", {});
+          return it;
+        });
         if (this.models.length == 0) {
           ElMessage.error("暂无模型，请先关联模型");
         } else {
-          this.models.forEach((item) => {
+          BimTools.addModelList(window.sandSettingApi, this.bimCfg, this.models, (hideParts) => {
-            this.addModel(item.lightweightName);
+            setTimeout(() => {
+              BimTools.setDefaultViewPoint(window.sandSettingApi, this.bimCfg, this.viewPoint)
+              BimTools.hideParts(window.sandSettingApi, hideParts);
+            }, 1000);
           });
+
         }
       });
     },
-    addModel(modelId, cb) {
-      let api=sandSettingApi;
-      let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
-      console.log("开始加载模型:",modelId, url);
-      api.Model.add(
-        url,
-        modelId,
-        () => {},
-        () => {
-          cb && cb();
-          console.log("加载模型成功");
-          setTimeout(()=>{
-             if (this.viewPoint) {
-              api.Camera.setViewPort(this.viewPoint);
-            } else {
-              api.Camera.getViewPort((p) => {
-                  this.viewPoint=p;
-              });
-            }
-          },1000);
-        }
-      );
-    },
   },
 };
 </script>
@@ -413,6 +426,38 @@ export default {
 
     #bimSandTableSettingContainer {
       height: 100%;
+
+      .tag-box-client {
+        width: 100%;
+
+        .tag-box {
+          height: 120px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          position: relative;
+        }
+
+        .tag-svg {
+          width: 38px;
+          height: 38px;
+          position: absolute;
+          bottom: -17px;
+          left: 50%;
+          margin-left: -19px;
+
+        }
+
+        .tag-img {
+          position: absolute;
+        }
+
+        .tag-txt {
+          font-size: 16px;
+          color: #fff;
+        }
+      }
     }
   }
 
@@ -459,6 +504,8 @@ export default {
     min-width: 300px;
     min-height: 400px;
     padding-bottom: 50px;
+
+
     .tools-title {
       padding: 10px;
       color: #114c5f;
@@ -471,20 +518,25 @@ export default {
       right: 10px;
       cursor: pointer;
     }
+
     .device-list {
       padding: 0px 10px;
       max-height: 60vh;
       overflow-y: auto;
+
       .device-item {
         display: flex;
         align-items: center;
+
         .device-name {
           flex-grow: 1;
           font-size: 12px;
+
           .svg-icon {
             fill: #19849f;
           }
         }
+
         .guide {
           cursor: pointer;
           color: #409eff;
@@ -492,6 +544,7 @@ export default {
         }
       }
     }
+
     .tools-bottom {
       position: absolute;
       bottom: 10px;
@@ -499,14 +552,17 @@ export default {
       text-align: center;
     }
   }
+
   .test-box {
     position: absolute;
     display: none;
     top: 10px;
     left: 10px;
+
     .tag-box {
       position: relative;
     }
+
     .tag-txt {
       position: absolute;
       top: 30%;