进度管理-bim选择功能开发

yanzhu-bigscreen/public/index.html

@@ -28,7 +28,7 @@
     <script src="/cdn/echarts/echarts-liquidfill.min.js"></script>
 
     <link rel="stylesheet" href="/cesium/Widgets/widgets.css" />
-    <script src="/cesium/jquery-3.0.0.min.js"></script>
+    <!-- <script src="/cesium/jquery-3.0.0.min.js"></script> -->
     <script src="/cesium/Cesium.js?v=20230913"></script>
     <script src="/cesium/BIMGISEngine.js?v=20230920"></script>
     <script src="/cesium/initApi.js?v=20230920"></script>

yanzhu-bigscreen/src/components/header.vue

@@ -12,7 +12,7 @@
             <div class="header-btn-list">
               <div class="header-btn-list-arrow"></div>
               <div class="header-btn-list-item" style>
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
+                <div class="header-btn-list-padding menu-row1" style="text-align: left" :class="getMenuClass(100)">
                   <button v-if="showMenusNavIds.includes('101')" type="button" :class="nav == 101 ? 'active' : ''" class="sub-btn" @click="doNav(101)">项目详情</button>
                   <button v-if="showMenusNavIds.includes('102')" type="button" :class="nav == 102 ? 'active' : ''" class="sub-btn" @click="doNav(102)">劳务管理</button>
                 </div>
@@ -25,19 +25,17 @@
             <div class="header-btn-list">
               <div class="header-btn-list-arrow"></div>
               <div class="header-btn-list-item" style>
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
+                <div class="header-btn-list-padding menu-row1" style="text-align: left" :class="getMenuClass(300)">
                   <button v-if="showMenusNavIds.includes('301')" type="button" :class="nav == 301 ? 'active' : ''" class="sub-btn" @click="doNav(301)">安全隐患排查</button>
                   <button v-if="showMenusNavIds.includes('302')" type="button" :class="nav == 302 ? 'active' : ''" class="sub-btn" @click="doNav(302)">教育培训</button>
                   <button v-if="showMenusNavIds.includes('303')" type="button" :class="nav == 303 ? 'active' : ''" class="sub-btn" @click="doNav(303)">基坑监测</button>
                   <button v-if="showMenusNavIds.includes('304')" type="button" :class="nav == 304 ? 'active' : ''" class="sub-btn" @click="doNav(304)">塔机监测</button>
-                </div>
+
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
                   <button v-if="showMenusNavIds.includes('305')" type="button" :class="nav == 305 ? 'active' : ''" class="sub-btn" @click="doNav(305)">高支模监测</button>
                   <button v-if="showMenusNavIds.includes('306')" type="button" :class="nav == 306 ? 'active' : ''" class="sub-btn" @click="doNav(306)">配电箱监测</button>
                   <button v-if="showMenusNavIds.includes('307')" type="button" :class="nav == 307 ? 'active' : ''" class="sub-btn" @click="doNav(307)">爬架监测</button>
                   <button v-if="showMenusNavIds.includes('308')" type="button" :class="nav == 308 ? 'active' : ''" class="sub-btn" @click="doNav(308)">升降机监测</button>
-                </div>
+
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
                   <button v-if="showMenusNavIds.includes('309')" type="button" :class="nav == 309 ? 'active' : ''" class="sub-btn" @click="doNav(309)">视频监控</button>
                   <button v-if="showMenusNavIds.includes('310')" type="button" :class="nav == 310 ? 'active' : ''" class="sub-btn" @click="doNav(310)">AI预警</button>
                   <button v-if="showMenusNavIds.includes('311')" type="button" :class="nav == 311 ? 'active' : ''" class="sub-btn" @click="doNav(311)">标准化管理</button>
@@ -50,14 +48,12 @@
             <div class="header-btn-list">
               <div class="header-btn-list-arrow"></div>
               <div class="header-btn-list-item" style>
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
+                <div class="header-btn-list-padding menu-row1" style="text-align: left" :class="getMenuClass(400)">
                   <button v-if="showMenusNavIds.includes('401')" type="button" :class="nav == 401 ? 'active' : ''" class="sub-btn" @click="doNav(401)">质量隐患排查</button>
                   <button v-if="showMenusNavIds.includes('402')" type="button" :class="nav == 402 ? 'active' : ''" class="sub-btn" @click="doNav(402)">材料取样复试</button>
                   <button v-if="showMenusNavIds.includes('403')" type="button" :class="nav == 403 ? 'active' : ''" class="sub-btn" @click="doNav(403)">举牌验收</button>
                   <button v-if="showMenusNavIds.includes('404')" type="button" :class="nav == 404 ? 'active' : ''" class="sub-btn" @click="doNav(404)">标养室监测</button>
-                </div>
 
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
                   <button v-if="showMenusNavIds.includes('405')" type="button" :class="nav == 405 ? 'active' : ''" class="sub-btn" @click="doNav(405)">标准化管理</button>
                   <button v-if="showMenusNavIds.includes('406')" type="button" :class="nav == 406 ? 'active' : ''" class="sub-btn" @click="doNav(406)">混泥土监测</button>
                 </div>
@@ -69,7 +65,7 @@
             <div class="header-btn-list">
               <div class="header-btn-list-arrow"></div>
               <div class="header-btn-list-item" style>
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
+                <div class="header-btn-list-padding menu-row1" style="text-align: left" :class="getMenuClass(500)">
                   <button v-if="showMenusNavIds.includes('502')" type="button" :class="nav == 502 ? 'active' : ''" class="sub-btn" @click="doNav(502)">进度管理</button>
                   <button v-if="showMenusNavIds.includes('501')" type="button" :class="nav == 501 ? 'active' : ''" class="sub-btn" @click="doNav(501)">延时摄影</button>
                 </div>
@@ -90,14 +86,12 @@
             <div class="header-btn-list">
               <div class="header-btn-list-arrow"></div>
               <div class="header-btn-list-item" style>
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
+                <div class="header-btn-list-padding menu-row1" style="text-align: left" :class="getMenuClass(700)">
                   <button v-if="showMenusNavIds.includes('701')" type="button" :class="nav == 701 ? 'active' : ''" class="sub-btn" @click="doNav(701)">项目沙盘</button>
 
                   <button v-if="showMenusNavIds.includes('702')" type="button" :class="nav == 702 ? 'active' : ''" class="sub-btn" @click="doNav(702)">项目漫游</button>
                   <button v-if="showMenusNavIds.includes('703')" type="button" :class="nav == 703 ? 'active' : ''" class="sub-btn" @click="doNav(703)">BIM应用</button>
-                </div>
 
-                <div class="header-btn-list-padding menu-row1" style="text-align: left">
                   <button v-if="showMenusNavIds.includes('704')" type="button" :class="nav == 704 ? 'active' : ''" class="sub-btn" @click="doNav(704)">BIM交底</button>
                   <button v-if="showMenusNavIds.includes('705')" type="button" :class="nav == 705 ? 'active' : ''" class="sub-btn" @click="doNav(705)">4D模拟</button>
                 </div>
@@ -194,6 +188,16 @@ export default {
     });
   },
   methods: {
+    getMenuClass(n){
+      let cnt=this.showMenusNavIds.filter(d=>+d>=n && +d<=n+99).length;
+      if(cnt>3){
+        return "grid3";
+      }
+      if(n==2){
+        return "grid2";
+      }
+      return "";
+    },
     toggleFullScreen() {
       let el = document.body;
       this.$toggleFullScreen(el);
@@ -207,10 +211,10 @@ export default {
       if (tmps.length > 0) {
         this.$store.dispatch("SetSelProject", tmps[0]);
         this.selProject = tmps[0];
-        if(this.selProject.vendorsCode == "jgw" ){
+        if (this.selProject.vendorsCode == "jgw") {
           this.selProject.vendorsCode = "uni";
         }
-        
+
         document.title = this.selProject.projectName + " - 大屏";
       } else {
         this.$store.dispatch("SetSelProject", null);
@@ -384,7 +388,14 @@ export default {
         .header-btn-list-item {
           .header-btn-list-padding {
             padding: 0px;
-
+            &.grid3{
+              display:grid;
+              grid-template-columns: 33% 33% 33%;
+            }
+            &.grid2{
+              display:grid;
+              grid-template-columns: 50% 50%;
+            }
             button {
               width: 120px;
             }

yanzhu-ui-vue3/src/App.vue

@@ -110,4 +110,7 @@ a {
 .icon-blue{
     fill:rgb(30, 144, 255) !important;
 }
+.svg-icon{
+    outline: none;
+}
 </style>

yanzhu-ui-vue3/src/assets/icons/svg/boundselect.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="6833"><path d="M385.47911111 902.59911111h83.74044444v41.41511111h-83.74044444zM217.99822222 902.59911111h83.74044445v41.41511111h-83.74044445zM113.55022222 881.89155555h-41.41511111v62.12266667H134.25777778v-41.41511111h-20.70755556zM72.13511111 546.816h41.41511111v83.74044445h-41.41511111zM72.13511111 211.85422222h41.41511111v83.74044445h-41.41511111zM72.13511111 714.41066667h41.41511111v83.74044444h-41.41511111zM72.13511111 379.33511111h41.41511111V463.07555555h-41.41511111zM72.13511111 128.11377778h41.41511111v-20.70755556H134.25777778V65.99111111h-62.12266667zM553.07377778 65.99111111h83.74044444v41.41511111h-83.74044444zM720.55466667 65.99111111h83.74044444v41.41511111h-83.74044444zM385.47911111 65.99111111h83.74044444v41.41511111h-83.74044444zM217.99822222 65.99111111h83.74044445v41.41511111h-83.74044445zM888.03555555 65.99111111v41.41511111h20.70755556v20.70755556h41.41511111V65.99111111zM908.74311111 379.33511111h41.41511111V463.07555555h-41.41511111zM908.74311111 211.85422222h41.41511111v83.74044445h-41.41511111zM738.75911111 637.26933333l70.08711111-54.272c5.23377778-4.096 8.07822222-10.46755555 7.50933333-17.06666666-0.56888889-6.59911111-4.43733333-12.51555555-10.24-15.58755556L451.47022222 359.424c-6.82666667-3.64088889-15.13244445-2.95822222-21.27644444 1.70666667-6.144 4.77866667-8.87466667 12.62933333-7.05422223 20.13866666l95.91466667 391.168c1.59288889 6.48533333 6.25777778 11.60533333 12.51555556 13.76711112 6.25777778 2.16177778 13.19822222 1.024 18.432-2.95822223l70.08711111-54.272 151.552 195.69777778c3.86844445 5.00622222 9.67111111 7.62311111 15.47377778 7.62311111 4.20977778 0 8.41955555-1.36533333 11.94666666-4.096l87.60888889-67.81155556c4.096-3.18577778 6.82666667-7.85066667 7.39555556-12.97066666 0.68266667-5.12-0.79644445-10.35377778-3.98222223-14.44977778l-151.32444444-195.69777778z" p-id="6834"></path></svg>

yanzhu-ui-vue3/src/assets/icons/svg/cancel.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="4833"><path d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0z m119.68 170.688a93.376 93.376 0 0 0-131.968-0.064L161.088 509.312a93.44 93.44 0 0 0 0 132.032l140.224 140.288c17.28 17.28 40.832 27.136 65.28 27.328l372.672 2.816a31.168 31.168 0 0 0 0.448-62.272l-188.096-1.344 262.784-262.848c36.416-36.48 36.352-95.488-0.064-131.968L631.68 170.688z m-131.2 540.544l-36.224 36.224-97.152-0.704a31.36 31.36 0 0 1-21.76-9.152L205.056 597.312a31.168 31.168 0 0 1 0-43.968l68.736-68.736 226.624 226.624z m43.2-496.64c12.16-12.16 31.936-12.16 44.096 0l182.592 182.72c12.16 12.16 12.16 31.872 0 44.032l-225.92 225.92-226.624-226.688 225.92-225.92z"  p-id="4834"></path></svg>

yanzhu-ui-vue3/src/assets/icons/svg/pointselect.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="6742"><path d="M530.56 64v251.04c68.288 11.648 122.144 66.432 133.6 135.872h246.72v55.264h-246.72a166.464 166.464 0 0 1-37.12 80.448L928 737.984l-108.8 54.592s108.256 136.8 108.768 136.64c0.032 0.416-36.832 30.976-37.376 30.784-0.544-0.192-108.8-136.64-108.8-136.64l-77.024 98.624-82.432-330.016a161.856 161.856 0 0 1-91.744 50.112v251.04h-54.336v-251.04c-68.224-11.648-122.112-66.464-133.536-135.904H96v-55.264h246.72c11.424-69.44 65.28-124.224 133.536-135.872V64h54.336z m-54.304 442.176h-78.08a109.792 109.792 0 0 0 78.08 79.456v-79.456z m132.384 0h-78.08l0.032 79.456a109.792 109.792 0 0 0 78.08-79.424z m-132.384-134.688a109.792 109.792 0 0 0-78.08 79.424h78.08v-79.424z m54.336 0l-0.032 79.424h78.08a109.792 109.792 0 0 0-78.048-79.424z"  p-id="6743"></path></svg>

yanzhu-ui-vue3/src/views/manage/plan/bimSelectionDialog.vue

@@ -1,12 +1,65 @@
 <template>
-  <el-dialog v-model="show" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" :title="title" width="960px" modal-class="bim-selection-dialog">
+  <el-dialog v-model="show" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" :title="title" modal-class="bim-selection-dialog">
-    <div id="bimSelectionDlg" :key="elId">
+    <div id="bimSelectionDlg">
       <div id="bimSelectionDlgContainer" class="bimSelectionDlgContainer"></div>
     </div>
+    <div class="div-left" :class="{'is-hide':!leftExpend}">
+      <div class="div-left-title">
+        <el-tabs v-model="activeTab">
+          <el-tab-pane label="结构树" name="a1">
+
+          </el-tab-pane>
+          <el-tab-pane label="已关联" name="a2"></el-tab-pane>
+          <el-tab-pane label="已隐藏" name="a3"></el-tab-pane>
+        </el-tabs>
+        <div class="div-icon">
+          <el-icon v-show="leftExpend" @click="leftExpend = false"><ArrowUpBold /></el-icon>
+          <el-icon v-show="!leftExpend" @click="leftExpend = true"><ArrowDownBold /></el-icon>
+        </div>
+      </div>
+    </div>
+     <div class="footer-box" v-if="models.length > 0" >
+       <el-tooltip placement="top" content="主视图">
+        <div class="footer-btn" @click="doMenu(0)" :class="activeMenu == 0 ? 'is-active' : ''">
+          <svg-icon icon-class="home" />
+        </div>
+      </el-tooltip>
+      <el-tooltip placement="top" content="取消所有关联">
+        <div class="footer-btn" @click="doMenu(1)" :class="activeMenu == 1 ? 'is-active' : ''">
+          <svg-icon icon-class="cancel" />
+        </div>
+      </el-tooltip>
+      <el-tooltip placement="top" content="点选">
+        <div class="footer-btn" @click="doMenu(2)" :class="activeMenu == 2 ? 'is-active' : ''">
+          <svg-icon icon-class="pointselect" />
+        </div>
+      </el-tooltip>
+      <el-tooltip placement="top" content="框选">
+        <div class="footer-btn" @click="doMenu(3)" :class="activeMenu == 3 ? 'is-active' : ''">
+          <svg-icon icon-class="boundselect" />
+        </div>
+      </el-tooltip>
+      <el-tooltip placement="top" content="隐藏构件">
+        <div class="footer-btn" @click="doMenu(4)" :class="activeMenu == 4 ? 'is-active' : ''">
+          <svg-icon icon-class="hide" />
+        </div>
+      </el-tooltip>
+
+    </div>
+
+     <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="show = false">取消</el-button>
+        <el-button type="primary" @click="doSave">
+          保存构件
+        </el-button>
+      </div>
+    </template>
   </el-dialog>
 </template>
 <script>
 import useUserStore from "@/store/modules/user";
+import { listBimModel } from "@/api/bim/bimModel";
 export default {
   data() {
     return {
@@ -17,26 +70,59 @@ export default {
       currentComId: null,
       models: [],
       viewPoint: null,
+      activeTab: "a1",
+      initSuccess: false,
+      leftExpend: true,
+      activeMenu: 0,
+      elId: 0,
     };
   },
+  beforeDestroy() {
+    let api=bimSelectionDlgApi
+    if(api){
+      api.Public.clearScene();
+      api.Public.destroy();
+      window.bimSelectionDlgApi = null;
+    }
+ 
+  },
   methods: {
+    doSave(){
+
+    },
+    doMenu(index) {
+      this.activeMenu = index;
+      switch(index){
+        case 0:
+          this.resetScene();
+          break;
+        case 1:
+          break;
+        case 2:
+          break;
+        case 3:
+          break;
+        case 4:
+          break;
+      }
+    },
     showDialog(plan) {
       this.plan = plan;
       this.show = true;
+      this.activeTab = "a1";
       this.userStore = useUserStore();
       this.currentPrjId = this.userStore.currentPrjId;
       this.currentComId = this.userStore.currentComId;
       this.initEngine();
     },
-     initEngine() {
+    initEngine() {
       this.elId++;
-      this.activeMenu = 0;
       setTimeout(() => {
         this.loadEngine();
       }, 10);
     },
-        loadEngine() {
+    loadEngine() {
-      window.sandSettingApi = new SAPI(
+      window.bimSelectionDlgApi = new SAPI(
         {
           serverIP: window.config.serverIP, //服务ip地址
           port: window.config.port, //HTTP端口
@@ -83,7 +169,7 @@ export default {
             show: true, // 是否显示
             showAxes: true, // 是否显示XYZ轴线
           };
-          sandSettingApi.Plugin.initNavCube(mapOptions);
+          bimSelectionDlgApi.Plugin.initNavCube(mapOptions);
         }
       );
     },
@@ -105,27 +191,136 @@ export default {
         }
       });
     },
-     addModel(modelId, cb) {
+    addModel(modelId, cb) {
       let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
       console.log(modelId, url);
-      sandSettingApi.Model.add(
+      bimSelectionDlgApi.Model.add(
         url,
         modelId,
         () => {},
         () => {
           cb && cb();
           console.log("加载模型成功");
-          setTimeout(()=>{
+          setTimeout(() => {
-            sandSettingApi.Camera.getViewPort(p=>{
+            bimSelectionDlgApi.Camera.getViewPort((p) => {
-                this.viewPoint=p;
+              this.viewPoint = p;
-                this.$message.info("模型加载完成")
+              this.$message.info("模型加载完成");
             });
-          },1000);
+          }, 1000);
         }
       );
     },
-
+     resetScene() {
+      let api=bimSelectionDlgApi
+      api.Camera.stopImmersiveRoam();
+      api.Model.location(bimSelectionDlgApi.m_model.keys().toArray()[0]);
+      api.Plugin.deleteMiniMap();
+      if(this.viewPoint){
+        api.Camera.setViewPort(this.viewPoint);
+      }
+    },
   },
 };
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+.bim-selection-dialog {
+  
+  .el-dialog {
+    min-width: 960px;
+  width: 80%;
+    height: 80vh;
+    .el-dialog__body {
+      max-height: calc(100% - 80px) !important;
+      overflow: hidden !important;
+      height: calc(100% - 80px);
+      #bimSelectionDlg {
+        height: 100%;
+        .bimSelectionDlgContainer {
+          height: 100%;
+        }
+      }
+      .div-left {
+        position: absolute;
+        left: 40px;
+        top: 80px;
+        width: 300px;
+        background: rgba(0, 57, 64, 0.6);
+        height: calc(100% - 180px);
+        border-radius: 5px;
+        &.is-hide {
+          height: 45px;
+        }
+        .div-left-title {
+          .el-tabs__nav-wrap {
+            .el-tabs__nav-prev,
+            .el-tabs__nav-next {
+              display: none;
+            }
+          }
+          .el-tabs__nav {
+            &::after {
+              content: " ";
+              display: block;
+              width: 100px;
+            }
+            .el-tabs__active-bar {
+              background-color: rgb(0, 255, 174);
+            }
+            .el-tabs__item {
+              padding: 0px 15px;
+              color: #fff;
+              &.is-active {
+                color: rgb(0, 255, 174);
+              }
+            }
+          }
+          .div-icon {
+            position: absolute;
+            right: 10px;
+            top: 8px;
+            z-index: 9;
+            .el-icon {
+              font-size: 24px;
+              color: #fff;
+            }
+          }
+        }
+      }
+    }
+
+     .footer-box {
+    position: absolute;
+    bottom: 6vh;
+    left: 50%;
+    margin-left: -75px;
+    background: #274754;
+    border-radius: 4px;
+
+    .footer-btn {
+      display: inline-flex;
+      width: 40px;
+      height: 40px;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+
+      svg {
+        width: 20px;
+        height: 20px;
+        fill: #fff;
+      }
+
+      &:hover {
+        background: #408edb97;
+      }
+
+      &.is-active {
+        svg {
+          fill: rgb(0, 255, 174);
+        }
+      }
+    }
+  }
+  }
+}
+</style>

yanzhu-ui-vue3/src/views/manage/plan/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="项目" prop="projectId">
-        <el-select :disabled="data.projectId" v-model="queryParams.projectId" placeholder="请选择项目" style="width: 192px" clearable @change="handleQuery">
+        <el-select :disabled="data.projectId?true:false" v-model="queryParams.projectId" placeholder="请选择项目" style="width: 192px" clearable @change="handleQuery">
           <el-option v-for="prj in data.projects" :key="prj.id" :label="prj.projectName" :value="prj.id"> </el-option>
         </el-select>
       </el-form-item>