修改大屏BIM管理客户端渲染

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

@@ -1,3 +1,227 @@
+
+function initEngine(apiID, elId, bimCfg, cb) {
+    if (bimCfg.clientApi) {
+        initAPIEngine(apiID, elId, bimCfg, cb)
+    } else {
+        initSAPIEngine(apiID, elId, bimCfg, cb)
+    }
+}
+
+function initAPIEngine(apiID, elId, bimCfg, cb) {
+    let opt = {
+        container: elId, //[必须]容器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
+    };
+    let api = new API(opt);
+
+    window[apiID] = api
+    console.log("初始化成功");
+    doChangeGis(bimCfg, api)
+
+    cb && cb();
+
+}
+
+function doChangeGis(bimCfg, api) {
+    if (bimCfg.showGis) {
+        if (bimCfg.clientApi) {
+            api.Public.setGisState(true);
+            api.viewer.terrainProvider = Cesium.createWorldTerrain({
+                requestVertexNormals: true, //开启地形光照
+                requestWaterMask: true, // 开启水面波纹
+            })
+            api.viewer.camera.flyTo({
+                destination: Cesium.Cartesian3.fromDegrees(108.93934, 34.25777, 4000)
+            });
+        } else {
+            api.Public.setGisState(true);
+            api.Public.setTerrainState(true, window.config.terrainStateUrl, true)
+            api.Public.setGisState(true);
+        }
+    } else {
+        let color = bimCfg.background || "rgba(135 ,206 ,250,1)"
+        api.Public.setGisState(false, color);
+        api.Public.setSkyBoxState(0)
+    }
+}
+
+
+function initSAPIEngine(apiID, elId, bimCfg, cb) {
+    let api = new SAPI(
+        {
+            serverIP: window.config.serverIP, //服务ip地址
+            port: window.config.port, //HTTP端口
+            useHttps: window.config.useHttps, //使用Https
+            container: elId, //[必须]容器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图纸预览模式
+        },
+        () => {
+            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轴线
+            };
+            window[apiID] = api
+            api.Plugin.initNavCube(mapOptions);
+            doChangeGis(bimCfg, api)
+            cb && 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;
+    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,
+        modelId,
+        () => {
+            console.log("加载模型成功2");
+        },
+        () => {
+            console.log("加载模型成功");
+            let hideParts = [];
+            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) {
+                    api.Model.moveToPosition([x*1, y*1, z*1], 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 => {
+                        hideParts.push(it);
+                    })
+                }
+            }
+            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();
+    }
+}
+
 function initBimCfg(that) {
     if (!that.bimCfg) {
         that.bimCfg = {}
@@ -9,6 +233,7 @@ function initBimCfg(that) {
     that.bimCfg.background = config.background || ''
     that.bimCfg.showGis = config.showGis || false
     that.bimCfg.clientApi = config.clientApi || false
+    that.isClient=that.bimCfg.clientApi;
 }
 
 function initLoadModel(that, api) {
@@ -84,12 +309,12 @@ function resetScene(that, api) {
     that.selectedRoam = null;
     api.Camera.stopImmersiveRoam();
     api.Model.location(api.m_model.keys().toArray()[0]);
-    if (!that.isClient()) {
+    if (!that.bimCfg.clientApi) {
         api.Plugin.deleteMiniMap();
     }
     if (that.viewPoint) {
         if (that.viewPoint.world) {
-            if (!that.isClient()) {
+            if (!that.bimCfg.clientApi) {
                 api.Camera.setViewPort(that.viewPoint);
             }
         }
@@ -101,5 +326,11 @@ export default {
     initLoadModel,
     initModelPosition,
     initHideParts,
-    resetScene
+    resetScene,
+    initEngine,
+    addModel,
+    setDefaultViewPoint,
+    hideParts,
+    addModelList
+    
 }

yanzhu-bigscreen/src/views/bimManage.vue

@@ -390,6 +390,7 @@ export default {
       menuShowCount: 0,
       modelLoadSuccess: false, //模型加载成功
       mode: "model", //显示模式 model-整体模型 plan-形象进度
+      isClient: false,
     };
   },
   beforeDestroy() {
@@ -426,9 +427,6 @@ export default {
     this.updateButtonShow();
   },
   methods: {
-    isClient() {
-      return this.bimCfg.clientApi;
-    },
     updateButtonShow() {
       let objs = this.$root.showMenus || [];
       this.menuShow.video = objs.find((it) => it.component == "video") ? true : false;
@@ -738,6 +736,41 @@ export default {
       });
       this.addLabels.push(item.elId);
     },
+    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>`;
+      window.bimMgrApi.Label.addCustomHtml({
+        axisType: 1,
+        attachmentPoint: 2,
+        displayRange: [0, 1000],
+        maxDistance: 1000,
+        html: html,
+        id: item.elId,
+        position: item.position
+      });
+
+      this.addLabels.push(item.elId);
+    },
     deviceClick(item, opt) {
       if (item.deviceType == 1) {
         let obj = this.videoData.find((d) => d.id == item.deviceId);
@@ -749,8 +782,13 @@ export default {
     addDeviceLabel() {
       this.showDevices.forEach((d) => {
         if (d.position && d.position.length > 0) {
+          if (this.isClient) {
+            this.AddClientLable(d)
+          } else {
             this.AddLable(d);
           }
+
+        }
       });
     },
     removeLabel(lbl) {
@@ -774,11 +812,7 @@ export default {
       this.elId++;
       this.activeMenu = 0;
       setTimeout(() => {
-        if (this.isClient()) {
+        bimTools.initEngine("bimMgrApi", "bimManageContainer", this.bimCfg, this.initLoadModel);
-          apiTools.loadEngine(this, "bimManageContainer", 'bimMgrApi', this.initLoadModel)
-        } else {
-          sapiTools.loadEngine(this, "bimManageContainer", 'bimMgrApi', this.initLoadModel)
-        }
       }, 10);
     },
     initLoadModel() {
@@ -814,53 +848,65 @@ export default {
           if (this.models.length == 0) {
             this.$message.error("暂无模型，请先关联模型");
           } else {
-            this.models.forEach((item) => {
+            bimTools.addModelList(window.bimMgrApi, this.bimCfg, this.models, (hideParts) => {
-              this.addModel(item.lightweightName);
+              console.log(":--->", hideParts); debugger
-            });
-            bimTools.initLoadModel(this, bimMgrApi)
-          }
-        });
-    },
-    addModel(modelId, cb) {
-      let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
-      let direction = null;
-      let modelInfo = this.models.find(m => m.modelId == modelId);
-      if (this.isClient()) {
-        url = `/bimdata/Tools/output/model/${modelId}/root.glt`;
-        if (modelInfo) {
-          direction = modelInfo.bimCfg.direction;
-        }
-      }
-      let api = bimMgrApi;
-      console.log(modelId, url);
-      api.Model.add(
-        url,
-        modelId,
-        () => { },
-        () => {
-          cb && cb();
-          console.log("加载模型成功");
               this.loadDevicePosition();
-
               setTimeout(() => {
-
+                bimTools.setDefaultViewPoint(window.bimMgrApi, this.bimCfg, this.viewPoint)
-            if (this.isClient) {
+                bimTools.hideParts(window.bimMgrApi, hideParts);
-            } else {
-              if (this.viewPoint) {
-                api.Camera.setViewPort(this.viewPoint);
-              } else {
-                api.Camera.getViewPort((p) => {
-                  this.viewPoint = p;
-                });
-              }
-            }
-           
                 this.modelLoadSuccess = true;
-            api.Model.location(modelId)
+                this.resetScene();
               }, 1000);
-        }, direction
+            });
-      );
+
+            // this.models.forEach((item) => {
+            //   this.addModel(item.lightweightName);
+            // });
+            //bimTools.initLoadModel(this, bimMgrApi)
+          }
+        });
     },
+    
+    // addModel(modelId, cb) {
+    //   let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
+    //   let direction = null;
+    //   let modelInfo = this.models.find(m => m.modelId == modelId);
+    //   if (this.isClient) {
+    //     url = `/bimdata/Tools/output/model/${modelId}/root.glt`;
+    //     if (modelInfo) {
+    //       direction = modelInfo.bimCfg.direction;
+    //     }
+    //   }
+    //   let api = bimMgrApi;
+    //   console.log(modelId, url);
+    //   api.Model.add(
+    //     url,
+    //     modelId,
+    //     () => { },
+    //     () => {
+    //       cb && cb();
+    //       console.log("加载模型成功");
+    //       this.loadDevicePosition();
+
+    //       setTimeout(() => {
+
+    //         if (this.isClient) {
+    //         } else {
+    //           if (this.viewPoint) {
+    //             api.Camera.setViewPort(this.viewPoint);
+    //           } else {
+    //             api.Camera.getViewPort((p) => {
+    //               this.viewPoint = p;
+    //             });
+    //           }
+    //         }
+
+    //         this.modelLoadSuccess = true;
+    //         api.Model.location(modelId)
+    //       }, 1000);
+    //     }, direction
+    //   );
+    // },
     changeMode(mode) {
       if (!this.modelLoadSuccess) {
         this.$message.error("模型加载中，请稍后");
@@ -1102,6 +1148,33 @@ export default {
 
     #bimManageContainer {
       height: 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;
+        }
     }
   }