大屏bim漫游功能开发

yanzhu-bigscreen/src/api/bim.js

@@ -1,62 +1,116 @@
 import request from "@/utils/request";
 //获取项目的模型列表
-const listBimModel=query=>{
+const listBimModel = (query) => {
-    return request({
+  return request({
-        url: "/manage/bim/bimModel/list",
+    url: "/manage/bim/bimModel/list",
-        method: "get",
+    method: "get",
-        params: query,
+    params: query,
-    })
+  });
-}
+};
 //获取BIM设备位置
-const devicePositionGet=data=>{
+const devicePositionGet = (data) => {
-    return request({
+  return request({
-        url: "/manage/api/bim/devicePosition/get",
+    url: "/manage/api/bim/devicePosition/get",
-        method: "get",
+    method: "get",
-        params: data,
+    params: data,
-      });
+  });
-}
+};
 
 //BIM沙盘查询监控数据
-const videoMonitorBimData=query=>{
+const videoMonitorBimData = (query) => {
-    return request({
+  return request({
-        url: "/manage/api/videoMonitor/bimGetData",
+    url: "/manage/api/videoMonitor/bimGetData",
-        method: "get",
+    method: "get",
-        params: query,
+    params: query,
-    })
+  });
-
+};
-}
 
 //BIM沙盘查询塔机数据
-const devTowerBimData=query=>{
+const devTowerBimData = (query) => {
-    return request({
+  return request({
-        url: "/manage/api/devTower/bimGetData",
+    url: "/manage/api/devTower/bimGetData",
-        method: "get",
+    method: "get",
-        params: query,
+    params: query,
-    })
+  });
-
+};
-}
 //BIM沙盘查询配电箱数据
-const devIotBimData=query=>{
+const devIotBimData = (query) => {
-    return request({
+  return request({
-        url: "/manage/api/devIot/bimGetData",
+    url: "/manage/api/devIot/bimGetData",
-        method: "get",
+    method: "get",
-        params: query,
+    params: query,
-    })
+  });
-
+};
-}
 //根据项目ID获取计划完成率
-const getRootScheduleNode=query=>{
+const getRootScheduleNode = (query) => {
-    return request({
+  return request({
-        url: "/manage/api/plan/getRootScheduleNode",
+    url: "/manage/api/plan/getRootScheduleNode",
-        method: "get",
+    method: "get",
-        params: query,
+    params: query,
-    })
+  });
-}
+};
-export default{
+
-    listBimModel,
+const getModelTree = (name, pid) => {
-    devicePositionGet,
+  return request({
-    devTowerBimData,
+    url: "/manage//bim/modelInfo/modelTree/" + name + "?pid=" + pid,
-    videoMonitorBimData,
+    method: "get",
-    devIotBimData,
+  });
-    getRootScheduleNode
+};
+
+const modelTreeAllLeafChild = (name, pid) => {
+  return request({
+    url: "/manage//bim/modelInfo/modelTreeAllLeafChild/" + name + "?pid=" + pid,
+    method: "get",
+  });
+};
+
+const modelTreeAllChild = (name, pid) => {
+  return request({
+    url: "/manage//bim/modelInfo/modelTreeAllChild/" + name + "?pid=" + pid,
+    method: "get",
+  });
+};
+
+const getTreeAllLeafChild = (name, pid) => {
+  return request({
+    url: "/manage/bim/modelInfo/modelTreeAllLeafChild/" + name + "?pid=" + pid,
+    method: "get",
+  });
+};
+
+/**
+ * 获取视点信息
+ *
+ * @param {Object} data 请求参数对象
+ * @returns {Promise} 返回Promise对象，包含请求结果
+ */
+const viewpointGet = (data) => {
+  return request({
+    url: "/manage/api/bim/viewpoint/get",
+    method: "get",
+    params: data,
+  });
+};
+
+const roamingGet=data=>{
+  return request({
+    url: "/manage/api/bim/roaming/get",
+    method: "get",
+    params: data,
+  });
 }
+
+export default {
+  listBimModel,
+  devicePositionGet,
+  devTowerBimData,
+  videoMonitorBimData,
+  devIotBimData,
+  getRootScheduleNode,
+  getModelTree,
+  modelTreeAllLeafChild,
+  modelTreeAllChild,
+  getTreeAllLeafChild,
+  viewpointGet,
+  roamingGet
+};

yanzhu-bigscreen/src/assets/icons/svg/pause.svg

@@ -0,0 +1 @@
+<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3396"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM320 320v384h128V320H320z m256 0v384h128V320H576z" p-id="3397"></path></svg>

yanzhu-bigscreen/src/assets/icons/svg/play.svg

@@ -0,0 +1 @@
+<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1907"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM383.232 287.616v448l384-223.104-384-224.896z" p-id="1908"></path></svg>

yanzhu-bigscreen/src/assets/icons/svg/stop.svg

@@ -0,0 +1 @@
+<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2688"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024zM320 320v384h384V320H320z" p-id="2689"></path></svg>

yanzhu-bigscreen/src/views/bimRoaming copy.vue

@@ -0,0 +1,398 @@
+<template>
+  <div class="bim-roaming main-page">
+    <div id="bimRoaming" :key="elId">
+      <div id="bimRoamingContainer" class="bimRoamingContainer"></div>
+
+      <div class="div-left" :class="{ isShow: leftShow, isHide: !leftShow }">
+        <transition name="left">
+          <div class="data-content" v-show="leftShow">
+            <div class="div-row">
+              <div class="row-title">
+                <svg-icon icon-class="signal"></svg-icon>
+                模型结构树
+              </div>
+              <div class="model-tree">
+                <el-tree
+                v-if="showTree"
+                  ref="tree"
+                  :default-expanded-keys="[0, 1]"
+                  :props="{
+                    children: 'children',
+                    label: 'title',
+                  }"
+                  node-key="key"
+                  @check="onCheckTree"
+                  :load="loadTreeNode" lazy
+                  show-checkbox></el-tree>
+              </div>
+            </div>
+          </div>
+        </transition>
+        <img :src="leftSrc" class="toSafety-fixed-left-img" @click="arrowRetract" id="arrowLeft" />
+      </div>
+
+      <div class="div-right" :class="{ isShow: leftShow, isHide: !leftShow }">
+        <transition name="right">
+          <div class="data-content" v-show="leftShow">
+            <div class="div-row r33">
+              <div class="row-title">
+                <svg-icon icon-class="signal"></svg-icon>
+                漫游方案
+              </div>
+            </div>
+
+            <div class="div-row r66">
+              <div class="row-title">
+                <svg-icon icon-class="signal"></svg-icon>
+                视点列表
+              </div>
+            </div>
+          </div>
+        </transition>
+        <img :src="rightSrc" class="toSafety-fixed-right-img" @click="arrowRetract" id="arrowRight" />
+      </div>
+    </div>
+
+    <div class="div-tools">
+      <div class="tool-item" @click="resetScene">
+        <div class="icon">
+          <svg-icon icon-class="home" />
+        </div>
+        <span class="sp-text">默认视点</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import debounce from "lodash.debounce";
+export default {
+  name: "BIMRoaming",
+  data() {
+    return {
+      dpi: "",
+      selProject: null,
+      leftSrc: "./bimImages/arrow_left_retract.png",
+      rightSrc: "./bimImages/arrow_right_retract.png",
+      leftShow: true,
+      models: [],
+      showTree:false,
+      modelTrees: [],
+    };
+  },
+  mounted() {
+    this.$store.dispatch("ChangeNav", 702);
+    this.dpi = this.$dpi();
+    window.addEventListener("resize", () => {
+      if (this.dpi != this.$dpi()) {
+        this.dpi = this.$dpi();
+      }
+    });
+    this.$bus.$on(
+      "projectChange",
+      debounce((prj) => {
+        this.selProject = prj;
+        this.elId++;
+        this.initEngine();
+      })
+    );
+    this.selProject = this.$store.getters.selProject;
+    this.initEngine();
+  },
+  methods: {
+    onCheckTree() {},
+    arrowRetract() {
+      if (this.leftShow == true) {
+        this.rightSrc = "./images/arrow_right_open.png";
+        this.leftSrc = "./images/arrow_left_open.png";
+        $("#arrowLeft").animate({ left: 10 + "px" }, 300);
+        $("#arrowRight").animate({ right: 10 + "px" }, 300);
+      } else {
+        this.rightSrc = "./images/arrow_right_retract.png";
+        this.leftSrc = "./images/arrow_left_retract.png";
+
+        $("#arrowLeft").animate({ left: 490 + "px" }, 300);
+        $("#arrowRight").animate({ right: 490 + "px" }, 300);
+      }
+      this.leftShow = !this.leftShow;
+    },
+    initEngine() {
+      this.elId++;
+      this.activeMenu = 0;
+      setTimeout(() => {
+        this.loadEngine();
+      }, 10);
+    },
+    loadEngine() {
+      window.bimMgrApi = new SAPI(
+        {
+          serverIP: window.config.serverIP, //服务ip地址
+          port: window.config.port, //HTTP端口
+          useHttps: window.config.useHttps, //使用Https
+          container: "bimRoamingContainer", //[必须]容器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轴线
+          };
+          bimMgrApi.Plugin.initNavCube(mapOptions);
+        }
+      );
+    },
+    initLoadModel() {
+      this.$api.bim
+        .listBimModel({
+          pageNum: 1,
+          pageSize: 100,
+          comId: this.currentComId,
+          projectId: this.currentPrjId,
+        })
+        .then((d) => {
+          this.models = d.rows || [];
+          if (this.models.length == 0) {
+            this.$modal.msgError("暂无模型，请先关联模型");
+          } else {
+            this.models.forEach((item) => {
+              this.addModel(item.lightweightName);
+            });
+            this.loadModelTree();
+          }
+        });
+    },
+    loadModelTree() {
+      this.modelTrees = [
+        {
+          title: "项目模型",
+          level: 0,
+          type: "root",
+          key: "root",
+          children: [],
+          hadLoad: true,
+        },
+      ];
+      this.models
+        .map((d) => {
+          d.gis = JSON.parse(d.gisJson);
+          return d;
+        })
+        .forEach((d) => {
+          this.modelTrees[0].children.push({
+            title: d.modelName,
+            level: 1,
+            type: "model",
+            hasLoad: false,
+            modelId: d.lightweightName,
+            key: d.lightweightName,
+            externalId: "0",
+            glid: "",
+            children: [],
+            data: d,
+          });
+        });
+        this.showTree=true;
+    },
+    loadTreeNode(node, resolve, reject){
+        if(node.level==0){
+            resolve([this.modelTrees[0]])
+            return;
+        }
+        if(node.level==1){
+            let objs=this.modelTrees[0].children;
+            resolve(objs)
+            return;
+        }
+       
+            resolve([{title:'aaa'}])
+            return;
+    
+        console.log(nd)
+        // this.$api.bim.getModelTree(nd.modelId,nd.glid).then(res=>{
+        //     console.log(res)
+        // })
+    },
+    addModel(modelId, cb) {
+      let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
+      console.log(modelId, url);
+      bimMgrApi.Model.add(
+        url,
+        modelId,
+        () => {},
+        () => {
+          cb && cb();
+          console.log("加载模型成功");
+          setTimeout(() => {
+            bimMgrApi.Camera.getViewPort((p) => {
+              this.viewPoint = p;
+            });
+          }, 1000);
+        }
+      );
+    },
+    resetScene() {
+      bimMgrApi.Camera.stopImmersiveRoam();
+      bimMgrApi.Model.location(bimMgrApi.m_model.keys().toArray()[0]);
+      bimMgrApi.Plugin.deleteMiniMap();
+      if (this.viewPoint) {
+        bimMgrApi.Camera.setViewPort(this.viewPoint);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.bim-roaming {
+  height: 100%;
+  position: relative;
+  #bimRoaming {
+    height: 100%;
+    #bimRoamingContainer {
+      height: 100%;
+    }
+  }
+
+  .div-left {
+    top: 10vh;
+    left: 5%;
+    position: absolute;
+    height: 70vh;
+    width: 14%;
+    &.isHide {
+      left: 0%;
+      wdith: 0%;
+      #arrowLeft {
+        left: 0px !important;
+      }
+    }
+    #arrowLeft {
+      top: calc(50% - 50px);
+      right: -21px;
+      left: unset !important;
+    }
+    .div-row {
+      height: 100%;
+    }
+  }
+  .div-right {
+    top: 10vh;
+    right: 5%;
+    position: absolute;
+    height: 70vh;
+    width: 14%;
+    &.isHide {
+      right: 0%;
+      width: 0%;
+    }
+    #arrowRight {
+      top: calc(50% - 50px);
+      left: -21px;
+    }
+    .div-row {
+      &.r33 {
+        height: 33.33%;
+      }
+      &.r66 {
+        height: 66.66%;
+      }
+    }
+  }
+
+  .data-content {
+    height: 100%;
+    .div-row {
+      border: solid 1px #75fbfdaa;
+      background-color: #06445b81;
+      .row-title {
+        background: linear-gradient(0deg, #105696, #c0dafb00, #1765ae);
+        padding-left: 10px;
+        height: 36px;
+        line-height: 36px;
+        .svg-icon {
+          fill: #75fbfd;
+        }
+      }
+    }
+  }
+
+  .div-tools {
+    position: absolute;
+    bottom: 25vh;
+    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;
+        background: #c0c4cca1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 15px;
+        .svg-icon {
+          width: 20px;
+          height: 20px;
+        }
+      }
+      .sp-text {
+        margin-top: 4px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>

yanzhu-bigscreen/src/views/bimRoaming.vue

@@ -1,21 +1,132 @@
 <template>
   <div class="bim-roaming main-page">
+    <div id="bimRoaming">
+      <div id="bimRoamingContainer" class="bimRoamingContainer"></div>
+
+      <div class="div-left" :class="{ isShow: leftShow, isHide: !leftShow }">
+        <transition name="left">
+          <div class="data-content" v-show="leftShow">
+            <div class="div-row">
+              <div class="row-title">
+                <svg-icon icon-class="signal"></svg-icon>
+                模型结构树
+              </div>
+              <div class="model-tree scroll">
+                <el-tree
+                  :key="treeKey"
+                  ref="tree"
+                  :default-expanded-keys="treeExpendedKeys"
+                  :props="{
+                    children: 'children',
+                    label: 'title',
+                  }"
+                  node-key="key"
+                  @check="onCheckTree"
+                  :data="modelTrees"
+                  show-checkbox></el-tree>
+              </div>
+            </div>
+          </div>
+        </transition>
+        <img :src="leftSrc" class="toSafety-fixed-left-img" @click="arrowRetract" id="arrowLeft" />
+      </div>
+
+      <div class="div-right" :class="{ isShow: leftShow, isHide: !leftShow }">
+        <transition name="right">
+          <div class="data-content" v-show="leftShow">
+            <div class="div-row r33">
+              <div class="row-title">
+                <svg-icon icon-class="signal"></svg-icon>
+                漫游方案
+              </div>
+              <div class="roaming-list scroll">
+                <div v-if="roamingLoading" class="loading">暂无数据</div>
+                <div v-for="(item, index) in roamingList" :key="index" :class="{ 'is-selected': item.play != 0 }" class="roaming-item">
+                  <el-tooltip :content="item.name">
+                    <span class="roam-text">{{ item.name }}</span>
+                  </el-tooltip>
+                  <div class="roam-tool">
+                    <el-tooltip content="播放" v-show="item.play == 0">
+                      <svg-icon icon-class="play" @click="startRoaming(item)"></svg-icon>
+                    </el-tooltip>
+                    <el-tooltip content="暂停" v-show="item.play != 2 && item.play != 0">
+                      <svg-icon icon-class="pause" @click="playIRPause(item)"></svg-icon>
+                    </el-tooltip>
+                    <el-tooltip content="继续播放" v-show="item.play == 2">
+                      <svg-icon icon-class="play" @click="playContinue(item)"></svg-icon>
+                    </el-tooltip>
+                    <el-tooltip v-show="item.play != 0" content="停止">
+                      <svg-icon icon-class="stop" @click="playCancle(item)"></svg-icon>
+                    </el-tooltip>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="div-row r66">
+              <div class="row-title">
+                <svg-icon icon-class="signal"></svg-icon>
+                视点列表
+              </div>
+              <div class="view-point-list scroll">
+                <div v-if="viewPointLoading" class="loading">暂无数据</div>
+                <div v-for="(item, index) in viewpointList" :key="index" :class="{ 'is-selected': selectedViewpoint == item }" class="viewpoint-item" @click="ZoomViewpoint(item)">
+                  <div class="viewpoint-content">
+                    <el-image :src="item.imgPath" alt class="viewpoint-image" fit="scale-down" />
+                    <el-tooltip :content="item.remark" v-if="item.remark">
+                      <span class="viewpoint-title">{{ item.name }}</span>
+                    </el-tooltip>
+                    <span class="viewpoint-title" v-else>{{ item.name }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </transition>
+        <img :src="rightSrc" class="toSafety-fixed-right-img" @click="arrowRetract" id="arrowRight" />
+      </div>
+    </div>
+
+    <div class="div-tools">
+      <div class="tool-item" @click="resetScene">
+        <div class="icon">
+          <svg-icon icon-class="home" />
+        </div>
+        <span class="sp-text">默认视点</span>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import debounce from "lodash.debounce";
 export default {
-  name: 'BIMRoaming',
+  name: "BIMRoaming",
-  data(){
+  data() {
     return {
-         dpi: "",
+      dpi: "",
-         selProject:null,
+      selProject: null,
-    }
+      leftSrc: "./bimImages/arrow_left_retract.png",
+      rightSrc: "./bimImages/arrow_right_retract.png",
+      leftShow: true,
+      models: [],
+      treeKey: 0,
+      modelTrees: [],
+      treeExpendedKeys: [],
+      visibleList: [],
+      viewpointList: [],
+      selectedViewpoint: null,
+      viewPointLoading: true,
+      roamingList: [],
+      roamingLoading: true,
+      selectedRoam: null,
+      modelLoaded: false,
+    };
   },
-  mounted(){
+  mounted() {
-   this.$store.dispatch("ChangeNav", 702);
+    this.$store.dispatch("ChangeNav", 702);
     this.dpi = this.$dpi();
-     window.addEventListener("resize", () => {
+    window.addEventListener("resize", () => {
       if (this.dpi != this.$dpi()) {
         this.dpi = this.$dpi();
       }
@@ -25,18 +136,615 @@ export default {
       debounce((prj) => {
         this.selProject = prj;
         this.elId++;
+        this.initEngine();
       })
     );
     this.selProject = this.$store.getters.selProject;
+    this.initEngine();
   },
-  methods:{
+  methods: {
+    playIRPause(data) {
+      data.play = 2;
+      bimRoadmApi.Camera.pauseImmersiveRoam(false);
+    },
+    playContinue(data) {
+      data.play = 1;
+      bimRoadmApi.Camera.pauseImmersiveRoam(true);
+    },
+    playCancle(data) {
+      if (data) {
+        data.play = 0;
+        this.selectedRoam = null;
+      } else {
+        if (this.roamingList.findIndex((x) => x.play === 1) > -1) {
+          this.roamingList.find((x) => x.play === 1).play = 0;
+        }
+      }
+      bimRoadmApi.Camera.cancelPlayImmersiveRoam();
+      this.resetScene();
+    },
+    startRoaming(data) {
+      if (!this.modelLoaded) {
+        this.$message.error("模型未加载完成，请稍后重试");
+        return;
+      }
+      let api = bimRoadmApi;
+      this.playCancle();
 
-  }
+      if (this.roamingList.findIndex((x) => x.play === 1) > -1) {
-}
+        this.roamingList.find((x) => x.play === 1).play = 0;
+      }
+      data.play = 1;
+      let record = typeof data.points === "string" ? JSON.parse(data.points) : data.points;
+
+      api.Camera.setImmersiveRoamConfig({
+        roamingMode: data.roamingMode,
+        moveRate: 0.5,
+        turnRate: 1,
+        bRecordLocus: false,
+      });
+      setTimeout(() => {
+        api.Camera.startImmersiveRoam([65.702301, 670.785328, 851.817162]);
+        setTimeout(() => {
+          this.selectedRoam = data;
+          api.Camera.playImmersiveRoam({
+            records: record,
+            isLoopPlay: this.autoPlay,
+            complete: function () {
+              this.selectedRoam = null;
+              data.play = 0;
+            },
+          });
+        }, 400);
+      }, 100);
+    },
+    onCheckTree(node, event) {
+      if (!this.modelLoaded) {
+        this.$message.error("模型未加载完成，请稍后重试");
+        return;
+      }
+      this.playCancle();
+      let checked = event.checkedNodes.includes(node);
+      console.log(node, event, checked);
+      if (node.type == "root") {
+        //bimRoadmApi
+        node.children.forEach((m) => {
+          if (bimRoadmApi.m_model.has(m.modelId)) {
+            bimRoadmApi.Model.remove(m.modelId);
+          }
+          if (checked) {
+            this.addModel(m.modelId);
+          }
+        });
+      } else if (node.type == "model") {
+        if (bimRoadmApi.m_model.has(node.modelId)) {
+          bimRoadmApi.Model.remove(node.modelId);
+        }
+        if (checked) {
+          this.addModel(node.modelId);
+        }
+      } else {
+        if (bimRoadmApi.m_model.size == 0) {
+          let modelId = checkNode.modelId;
+          this.addModel(modelId, () => {
+            this.showItem(node, event, checked);
+          });
+        } else {
+          this.showItem(node, event, checked);
+        }
+      }
+    },
+    async showItem(checkNode, event, checked) {
+      let api = bimRoadmApi;
+      api.Model.setVisible(checkNode.modelId, true);
+      let externalId = checkNode.externalId;
+      if (externalId != 0) {
+        if (checked) {
+          this.visibleList.push(externalId);
+          api.Feature.setVisible(this.visibleList.join("#"), true, checkNode.modelId, false);
+        } else {
+          this.visibleList = this.visibleList.filter((item) => item !== externalId);
+          api.Feature.setVisible(externalId, false, checkNode.modelId);
+        }
+      } else {
+        const res = await this.$api.bim.getTreeAllLeafChild(checkNode.modelId, checkNode.glid);
+        let nodes = res.data || [];
+        if (nodes.length > 0) {
+          if (checked) {
+            this.visibleList = this.MergeArray(nodes, this.visibleList);
+            api.Model.setVisible(checkNode.modelId, true);
+            api.Feature.setVisible(this.visibleList.join("#"), true, checkNode.modelId, false);
+          } else {
+            this.visibleList = this.DelArray(this.visibleList, nodes);
+            api.Feature.setVisible(nodes.join("#"), false, checkNode.modelId);
+          }
+        }
+      }
+    },
+    MergeArray(arr1, arr2) {
+      var _arr = new Array();
+      for (var i = 0; i < arr1.length; i++) {
+        _arr.push(arr1[i]);
+      }
+      for (var i = 0; i < arr2.length; i++) {
+        var flag = true;
+        for (var j = 0; j < arr1.length; j++) {
+          if (arr2[i] == arr1[j]) {
+            flag = false;
+            break;
+          }
+        }
+        if (flag) {
+          _arr.push(arr2[i]);
+        }
+      }
+      return _arr;
+    },
+    DelArray(array1, array2) {
+      var result = [];
+      for (var i = 0; i < array1.length; i++) {
+        var k = 0;
+        for (var j = 0; j < array2.length; j++) {
+          if (array1[i] != array2[j]) {
+            k++;
+            if (k == array2.length) {
+              result.push(array1[i]);
+            }
+          }
+        }
+      }
+      return result;
+    },
+    arrowRetract() {
+      if (this.leftShow == true) {
+        this.rightSrc = "./images/arrow_right_open.png";
+        this.leftSrc = "./images/arrow_left_open.png";
+        $("#arrowLeft").animate({ left: 10 + "px" }, 300);
+        $("#arrowRight").animate({ right: 10 + "px" }, 300);
+      } else {
+        this.rightSrc = "./images/arrow_right_retract.png";
+        this.leftSrc = "./images/arrow_left_retract.png";
+
+        $("#arrowLeft").animate({ left: 490 + "px" }, 300);
+        $("#arrowRight").animate({ right: 490 + "px" }, 300);
+      }
+      this.leftShow = !this.leftShow;
+    },
+
+    initEngine() {
+      this.elId++;
+      this.activeMenu = 0;
+      setTimeout(() => {
+        this.loadEngine();
+      }, 10);
+    },
+    loadEngine() {
+      window.bimRoadmApi = new SAPI(
+        {
+          serverIP: window.config.serverIP, //服务ip地址
+          port: window.config.port, //HTTP端口
+          useHttps: window.config.useHttps, //使用Https
+          container: "bimRoamingContainer", //[必须]容器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轴线
+          };
+          bimRoadmApi.Plugin.initNavCube(mapOptions);
+        }
+      );
+    },
+    initLoadModel() {
+      this.$api.bim
+        .listBimModel({
+          pageNum: 1,
+          pageSize: 100,
+          comId: this.selProject.comId,
+          projectId: this.selProject.id,
+        })
+        .then((d) => {
+          this.models = d.rows || [];
+          if (this.models.length == 0) {
+            this.$modal.msgError("暂无模型，请先关联模型");
+          } else {
+            this.models.forEach((item) => {
+              this.addModel(item.lightweightName);
+              this.loadModelTree();
+            });
+          }
+        });
+      this.init();
+    },
+    init() {
+      this.loadViewPoint();
+      this.loadRoaming();
+    },
+    loadViewPoint() {
+      this.$api.bim
+        .viewpointGet({
+          projectId: this.selProject.id,
+          viewType: 1,
+          pageSize: 100,
+          pageNum: 1,
+        })
+        .then((d) => {
+          this.viewpointList = d.data.rows || [];
+          this.viewPointLoading = false;
+        });
+    },
+    loadRoaming() {
+      this.$api.bim
+        .roamingGet({
+          roamingType: 1,
+          projectId: this.selProject.id,
+          pageSize: 100,
+          pageNum: 1,
+        })
+        .then((d) => {
+          let list = d.data.rows || [];
+          list.forEach((item) => {
+            item.play = 0;
+          });
+          this.roamingList = list;
+          this.roamingLoading = false;
+        });
+    },
+    ZoomViewpoint(item) {
+      if (!this.modelLoaded) {
+        this.$message.error("模型未加载完成，请稍后重试");
+        return;
+      }
+      this.playCancle();
+      this.selectedViewpoint = item;
+      if (item.viewPosition != null) {
+        bimRoadmApi.Camera.setViewPort(JSON.parse(item.viewPosition));
+      }
+    },
+    loadModelTree() {
+      this.modelTrees = [
+        {
+          title: "项目模型",
+          level: 0,
+          type: "root",
+          key: "root",
+          children: [],
+          hadLoad: true,
+        },
+      ];
+      this.treeExpendedKeys.push("root");
+      this.models
+        .map((d) => {
+          d.gis = JSON.parse(d.gisJson);
+          return d;
+        })
+        .forEach((d) => {
+          let node = {
+            title: d.modelName,
+            level: 1,
+            type: "model",
+            hasLoad: false,
+            modelId: d.lightweightName,
+            key: d.lightweightName,
+            externalId: "0",
+            glid: "",
+            children: [],
+            data: d,
+          };
+          this.treeExpendedKeys.push(node.key);
+          this.modelTrees[0].children.push(node);
+          this.getTreeData(node);
+        });
+      this.showTree = true;
+    },
+    getTreeData(node) {
+      this.$api.bim.modelTreeAllChild(node.modelId, "").then((d) => {
+        let objs = d.data || [];
+        let makeTree = (tmps) => {
+          tmps.forEach((item) => {
+            item.children = objs.filter((it) => it.pglid == item.glid);
+            if (item.children.length > 0) {
+              makeTree(item.children);
+            }
+            item.hasLoad = true;
+            item.title = item.name;
+            item.key = item.glid;
+            item.modelId = node.modelId;
+          });
+          return tmps;
+        };
+        node.children = makeTree(objs.filter((item) => item.level == 0));
+        node.children.forEach((item) => {
+          //this.treeExpendedKeys.push(item.key)
+        });
+        this.treeKey++;
+      });
+    },
+    addModel(modelId, cb) {
+      let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
+      console.log(modelId, url);
+      bimRoadmApi.Model.add(
+        url,
+        modelId,
+        () => {},
+        () => {
+          cb && cb();
+          console.log("加载模型成功");
+          setTimeout(() => {
+            bimRoadmApi.Camera.getViewPort((p) => {
+              this.viewPoint = p;
+              this.modelLoaded = true;
+            });
+          }, 1000);
+        }
+      );
+    },
+    resetScene() {
+      this.selectedViewpoint = null;
+      this.selectedRoam = null;
+      bimRoadmApi.Camera.stopImmersiveRoam();
+      bimRoadmApi.Model.location(bimRoadmApi.m_model.keys().toArray()[0]);
+      bimRoadmApi.Plugin.deleteMiniMap();
+      if (this.viewPoint) {
+        bimRoadmApi.Camera.setViewPort(this.viewPoint);
+      }
+    },
+  },
+};
 </script>
 
 <style lang="less">
-.bim-roaming{
+.bim-roaming {
+  height: 100%;
+  position: relative;
+  #bimRoaming {
+    height: 100%;
+    #bimRoamingContainer {
+      height: 100%;
+    }
+  }
 
+  .div-left {
+    top: 10vh;
+    left: 5%;
+    position: absolute;
+    height: 70vh;
+    width: 14%;
+    &.isHide {
+      left: 0%;
+      wdith: 0%;
+      #arrowLeft {
+        left: 0px !important;
+      }
+    }
+    #arrowLeft {
+      top: calc(50% - 50px);
+      right: -21px;
+      left: unset !important;
+    }
+    .div-row {
+      height: 100%;
+    }
+  }
+  .div-right {
+    top: 10vh;
+    right: 5%;
+    position: absolute;
+    height: 70vh;
+    width: 14%;
+    &.isHide {
+      right: 0%;
+      width: 0%;
+    }
+    #arrowRight {
+      top: calc(50% - 50px);
+      left: -21px;
+    }
+    .div-row {
+      &.r33 {
+        height: 33.33%;
+      }
+      &.r66 {
+        height: 66.66%;
+      }
+    }
+  }
+
+  .data-content {
+    height: 100%;
+    .div-row {
+      border: solid 1px #75fbfdaa;
+      background-color: #06445b81;
+      .row-title {
+        background: linear-gradient(0deg, #105696, #c0dafb00, #1765ae);
+        padding-left: 10px;
+        height: 36px;
+        line-height: 36px;
+        .svg-icon {
+          fill: #75fbfd;
+        }
+      }
+    }
+  }
+
+  .div-tools {
+    position: absolute;
+    bottom: 25vh;
+    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;
+        background: #c0c4cca1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 15px;
+        .svg-icon {
+          width: 20px;
+          height: 20px;
+        }
+      }
+      .sp-text {
+        margin-top: 4px;
+        font-size: 12px;
+      }
+    }
+  }
+  .model-tree {
+    height: calc(100% - 36px);
+    overflow-y: auto;
+    .el-tree {
+      background: transparent;
+      color: #eee;
+      .el-checkbox {
+        color: #75fbfd;
+      }
+      .el-tree-node {
+        &:focus {
+          & > .el-tree-node__content {
+            background: #3489d966;
+            &:hover {
+              background: #3489d966;
+            }
+          }
+        }
+        .el-tree-node__content:hover {
+          background: #3489d966;
+        }
+      }
+    }
+  }
+  .view-point-list {
+    height: calc(100% - 36px);
+    overflow-y: auto;
+
+    .viewpoint-item {
+      margin: 10px 10px 0px;
+      &.is-selected {
+        .viewpoint-content {
+          background: #3489d966;
+          border: solid 1px #75fbfd;
+        }
+      }
+      .viewpoint-content {
+        position: relative;
+        border-radius: 4px;
+        background: #ffffff2e;
+        .el-image {
+          height: 120px;
+          width: 100%;
+        }
+        .viewpoint-title {
+          position: absolute;
+          bottom: 0px;
+          background: #00000080;
+          width: calc(100% - 10px);
+          left: 0;
+          z-index: 9;
+          line-height: 30px;
+          font-size: 14px;
+          height: 30px;
+          padding: 0px 10px;
+          text-align: center;
+          border-radius: 0px 0px 4px 4px;
+        }
+      }
+    }
+  }
+  .roaming-list {
+    height: calc(100% - 36px);
+    overflow-y: auto;
+    .roaming-item {
+      display: flex;
+      flex-flow: row;
+      margin: 10px;
+      background: #04436b40;
+      line-height: 36px;
+      border-radius: 10px;
+      padding: 0px 10px;
+      font-size: 14px;
+      position: relative;
+      &.is-selected {
+        background: #00aaff;
+      }
+      .roam-text {
+        color: #fff;
+        flex-grow: 1;
+        max-width: calc(100% - 40px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .roam-tool {
+        margin-left: 10px;
+        .svg-icon {
+          margin-right: 5px;
+          fill: #75fbfd;
+        }
+      }
+    }
+  }
+  .loading {
+    height: 50px;
+    margin: 10px;
+    line-height: 50px;
+    text-align: center;
+    color: #00000030;
+  }
 }
 </style>

yanzhu-ui-vue3/src/api/bim/bimModel.js

@@ -53,14 +53,14 @@ export function checkLightweightName(data) {
 
 export function getModelTree(name, pid) {
   return request({
-    url: "/manage//bim/modelInfo/modelTree/" + name + "?pid=" + pid,
+    url: "/manage/bim/modelInfo/modelTree/" + name + "?pid=" + pid,
     method: "get",
   });
 }
 
 export function getTreeAllLeafChild(name, pid) {
   return request({
-    url: "/manage//bim/modelInfo/modelTreeAllLeafChild/" + name + "?pid=" + pid,
+    url: "/manage/bim/modelInfo/modelTreeAllLeafChild/" + name + "?pid=" + pid,
     method: "get",
   });
 }