fix: 解决冲突

2023-12-05 13:41:43 +08:00 · 2023-12-05 13:41:43 +08:00 · 45810bde91
commit 45810bde91
parent 5020d6954c 3b0ce2a27b
6 changed files with 9852 additions and 9653 deletions
--- a/public/bim.html
+++ b/public/bim.html
@ -6,42 +6,93 @@
  </head>
  <body>
    <div id="domId" style="width: 100%; height: 95vh"></div>
-    <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
+    <script
+      src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"
+      charset="utf-8"
+    ></script>
    <script>
-      const bimCallback = viewToken => {
-        let viewer3D
-        let app
+      let model3D;
+      let viewer3D;
+      let app;
+      let modelState;
+      let configValue = {
+        hideArr: [],
+        colorArr: [],
+      };
+      const bimCallback = (viewToken) => {
        // let viewToken = '11b0d307c09f43bfa5fa3922bcce0342'
-        let loaderConfig = new BimfaceSDKLoaderConfig()
-        loaderConfig.viewToken = viewToken
-        BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback)
+        let loaderConfig = new BimfaceSDKLoaderConfig();
+        loaderConfig.viewToken = viewToken;
+        BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
        function successCallback(viewMetaData) {
-          let domShow = document.getElementById('domId')
-          let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig()
-          webAppConfig.domElement = domShow
-          app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig)
-          app.addView(viewToken)
-          viewer3D = app.getViewer()
+          let domShow = document.getElementById("domId");
+          let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
+          webAppConfig.domElement = domShow;
+          app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
+          app.addView(viewToken);
+          viewer3D = app.getViewer();
+          // 监听添加view完成的事件
+          viewer3D.addEventListener(
+            Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded,
+            function() {
+              // 调用viewer3D对象的Method，可以继续扩展功能
+              // 从viewer3D对象中获取模型对象model3D
+              model3D = viewer3D.getModel();
+              // 获取模型状态
+              modelState = viewer3D.getCurrentState();
+              // 渲染3D模型
+              viewer3D.render();
+              // 操作模型
+              renderConfigModel();
+            }
+          );
+          // 添加构件单击事件
+          viewer3D.addEventListener(
+            Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked,
+            (data) => {
+              console.log(data);
+              setTimeout(() => {
+                // 往父级传递
+                window.parent.postMessage({ msg: data.elementId });
+              }, 200);
+            }
+          );
        }

        function failureCallback(error) {
-          console.log(error)
+          console.log(error);
        }
+      };
+      function renderConfigModel() {
+        // 恢复模型状态
+        viewer3D.setState(modelState);
+        model3D.hideComponentsById(configValue.hideArr);
+        configValue.colorArr.map((item) => {
+          model3D.overrideComponentsColorById(
+            [item.name],
+            new Glodon.Web.Graphics.Color(item.color, 1)
+          );
+        });
+        viewer3D.render();
      }
-
-      window.addEventListener('message', function(e) {
+      // 监听父组件的信息传递
+      window.addEventListener("message", async function(e) {
        // const modelId = e.data.modelId
-        const data = e.data || {}
-        console.log('eeeeeeeeeee',e)
+        const data = e.data || {};
        if (data.token) {
          // removeModel(modelId)
-          bimCallback(data.token)
+          document.getElementById("domId").innerHTML = "";
+          await bimCallback(data.token);
+          if (data.hideArr && data.colorArr) {
+            configValue.hideArr = data.hideArr;
+            configValue.colorArr = data.colorArr;
+          }
        }
        // console.log(e.data, '父级页面传来的数据')
        // setTimeout(() => {
        //   window.parent.postMessage({ msg: 'hello' })
        // }, 2000)
-      })
+      });
    </script>
  </body>
 </html>
--- a/public/js/config.js
+++ b/public/js/config.js
@ -20,7 +20,7 @@ var COMPANY = '' //通用
 // COMPANY = 'shjg'//上海优益（上海建工）
 // COMPANY = 'syhy'//沈阳和盈
 // COMPANY = 'jxwjj'//嘉兴王江泾公用码头项目
-// COMPANY = 'gxbs'//广西百色
+COMPANY = 'gxbs'//广西百色

 var PROJECT = {
  local_test: 'common', // 普通版
--- a/src/assets/js/api/project.js
+++ b/src/assets/js/api/project.js
@ -51,6 +51,8 @@ export const deleteJlwUploadApi = data => get('/xmgl/bimface/deleteProjectBim',
 export const startJlwApi = data => get('/xmgl/bimface/updateEnabled', data); // 启用所对应的bim
 export const getJlwConfigApi = data => get('/xmgl/bimface/getConfigStatus', data); // 获取项目中bimface配置信息
 export const getJlwTokenApi = data => get('/xmgl/bimface/getViewTokenByFileId', data); // 通过文件标识获取ViewToken
+export const getJlwDetailsApi = data => get('/xmgl/bimface/getDetailsByFileIdAndProjectSn', data); // 通过文件标识获取详情(包括ViewToken)
+export const saveBimfaceConfig = data => post('/xmgl/bimface/edit', data);  // 保存BIMFACE相关配置



--- a/src/views/projectFront/BIMCenter/BIMManageV3.vue
+++ b/src/views/projectFront/BIMCenter/BIMManageV3.vue
@ -22,7 +22,7 @@
            :class="{ active: activeBuildIndex == index }"
            @click="changeBuildFn(item, index)"
          >
-            <div>{{ item.modelName }}</div>
+            <div :title="item.modelName">{{ item.modelName }}</div>
            <div class="flex2">
              <el-switch
                v-model="item.isEnable"
@ -422,7 +422,7 @@ export default {

    //获取模型列表
    loadData() {
-      projectJlwBimListApi({ projectSn: this.$store.state.projectSn }).then(
+      projectJlwBimListApi({ projectSn: this.$store.state.projectSn, pageSize: 9999 }).then(
        res => {
          console.log("------模型列表---", res);
          this.buildList = res.result.page.records;
@ -563,7 +563,12 @@ export default {
  line-height: 43px;
  cursor: pointer;
  position: relative;
-
+  >div:nth-child(1){
+    width: 100px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
  &.active {
    background-color: rgba(81, 129, 246, 0.1);

--- a/src/views/projectFront/BIMCenter/overviewTwo.vue
+++ b/src/views/projectFront/BIMCenter/overviewTwo.vue
@ -1,11 +1,51 @@
 <template>
  <div class="fullHeight">
-    <iframe :src="url" frameborder="0" width="100%" height="100%" id="iframe" @load="load"></iframe>
+    <div class="bimModel-operate">
+      <div class="select-operate">
+        <span>模型构件操作：</span>
+        <el-select v-model="formData.type" placeholder="请选择" size="small">
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="data-show">
+        <span>选中的数据值：</span>
+        <div class="selected-box" v-if="formData.type == 1">
+          <template v-show="selectedHideList.length > 0">
+            <div v-for="(item,index) in selectedHideList" :key="index">
+            <span>{{item}}</span>
+            <i class="el-icon-close" @click="deleteSelected(1,index)"></i>
+          </div>
+          </template>
+          
+        </div>
+        <div class="selected-box" v-if="formData.type == 2">
+          <template v-show="selectedColorList.length > 0">
+          <div v-for="(item,index) in selectedColorList" :key="index">
+            <span>{{item.name}}：{{ item.color }}</span>
+            <i class="el-icon-close" @click="deleteSelected(2,index)"></i>
+          </div>
+          </template>
+        </div>
+        <el-color-picker v-model="formData.color" v-if="formData.type == 2" style="margin-right: 15px;"></el-color-picker>
+        <el-button
+          type="primary"
+          size="small"
+          @click="saveSelected"
+          >保存</el-button
+        >
+      </div>
+    </div>
+    <iframe :src="url" frameborder="0" width="100%" id="iframe" style="flex: 1"></iframe>
  </div>
 </template>

 <script>
-import { getJlwTokenApi,projectJlwBimListApi } from "@/assets/js/api/project";
+import { getJlwDetailsApi,projectJlwBimListApi, saveBimfaceConfig } from "@/assets/js/api/project";
 export default {
  data() {
    return {
@ -13,6 +53,17 @@ export default {
      model:1,
      url:'',
      iframe:null,
+      formData: {
+        type: 1,
+        color: ""
+      },
+      typeOptions: [
+        {label: "隐藏", value: 1},
+        {label: "着色", value: 2},
+      ],
+      selectedHideList: [],
+      selectedColorList: [],
+      resData: {}
    };
  },
  props: {
@ -27,7 +78,7 @@ export default {
    this.url = window.location.origin + '/bim.html',
    this.iframe = document.getElementById('iframe')
    window.addEventListener('message', this.getIframeMessage)
-    this.getModelList()
+    // this.getModelList()
  },
  watch: {
    fileId: {
@ -49,28 +100,71 @@ export default {
    }
  },
  methods: {
-    load() {
-      // console.log(this.iframe,'iframe')
-      this.iframe.contentWindow.postMessage('Message from parent：load complate！')
-    },
-    getIframeMessage(e) {
-      // console.log('Message from iframe：', e.data)
-    },
-    getModelList() {
-      projectJlwBimListApi({ projectSn: this.$store.state.projectSn }).then(res => {
-        this.buildList = res.result.page.records
-        res.result.page.records.forEach(item => {
-          if (item.isEnable) {
-            this.getToken(item.fileId)
-            // this.getToken()
+    // 保存选中数据
+    saveSelected(){
+      let that = this
+      saveBimfaceConfig({ id: this.resData.id,hiddenComponentId:this.selectedHideList.join(','),componentColorJson: JSON.stringify(this.selectedColorList)  }).then(res => {
+          if(res.code == 200){
+            this.$message.success("操作成功")
+            that.iframe.contentWindow.postMessage({ token: this.resData.viewToken,hideArr: this.selectedHideList,colorArr: this.selectedColorList })
          }
        })
+    },
+    // 删除选中数据
+    deleteSelected(type,index) {
+      if(type == 1){
+        this.selectedHideList.splice(index,1)
+      } else if(type == 2){
+        this.selectedColorList.splice(index,1)
+      }
+      this.$forceUpdate();
+    },
+    load() {
+      // console.log(this.iframe,'iframe')
+      // this.iframe.contentWindow.postMessage("我进来啦")
+    this.getModelList()
+    },
+    getIframeMessage(e) {
+      console.log('Message from iframe：', e.data.msg)
+      if(this.formData.type == 1) {
+        let dataIndex = null;
+      dataIndex = this.selectedHideList.find(item => {
+          return item == e.data.msg
      })
+      if(!dataIndex){
+        this.selectedHideList.push(e.data.msg)
+      }
+      } else {
+        let dataIndex = null;
+      dataIndex = this.selectedHideList.find(item => {
+          return item.name == e.data.msg
+      })
+      if(!dataIndex){
+        this.selectedColorList.push({name: e.data.msg, color: this.formData.color})
+      }
+      }
+      
+    },
+    getModelList() {
+      this.getToken(this.fileId)
+      // projectJlwBimListApi({ projectSn: this.$store.state.projectSn }).then(res => {
+      //   this.buildList = res.result.page.records
+      //   res.result.page.records.forEach(item => {
+      //     if (item.isEnable) {
+      //       // this.getToken()
+      //     }
+      //   })
+      // })
    },
    getToken(fileId) {
-      getJlwTokenApi({ fileId, projectSn: this.$store.state.projectSn }).then(res => {
-        const token = res.result
-        this.iframe.contentWindow.postMessage({ token })
+      console.log("我切换了-------------------",fileId)
+      getJlwDetailsApi({ fileId, projectSn: this.$store.state.projectSn }).then(res => {
+        console.log(res)
+        this.resData = res.result;
+        const token = res.result.viewToken;
+        this.selectedHideList = this.resData.hiddenComponentId?this.resData.hiddenComponentId.split(','):[];
+        this.selectedColorList = this.resData.componentColorJson?JSON.parse(this.resData.componentColorJson):[];
+        this.iframe.contentWindow.postMessage({ token, hideArr: this.selectedHideList,colorArr: this.selectedColorList })
      })
    }
    // getToken() {
@ -92,5 +186,52 @@ export default {
 };
 </script>

-<style>
+<style scoped lang="scss">
+@mixin flex {
+  display: flex;
+  align-items: center;
+}
+.fullHeight {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.bimModel-operate{
+  display: flex;
+  flex-direction: column;
+  margin-left: 5px;
+  .select-operate{
+    @include flex;
+  }
+  .data-show{
+    width: max-content;
+    max-width: 100%;
+    @include flex;
+    margin-top: 10px;
+    .selected-box{
+      flex: 1%;
+      min-width: 208px;
+      min-height: 32px;
+      border: 1px solid #c0c4cc;
+      border-radius: 4px;
+      @include flex;
+      flex-wrap: wrap;
+      padding-left: 6px;
+      margin-right: 15px;
+      >div{
+        @include flex;
+        background-color: #f4f4f5;
+        padding: 3px 5px;
+        margin: 3px 6px 3px 0;
+        span{
+          color: #909399;
+          margin-right: 3px;
+        }
+        .el-icon-close{
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
 </style>
--- a/yarn.lock
+++ b/yarn.lock