新增标记列表与溯源功能和模型联动

src/views/yhlywsytst/yhlywsytst/index.vue

@@ -274,6 +274,32 @@
         </div>
       </div>
     </div>
+    <!-- 溯源标记列表-->
+    <div v-show="sylbshow" class="sylb">
+      <div class="full  data-box1" style="position: relative;">
+        <i @click="sylbshow=false"
+          style="position: absolute;right: 1px;top: 2px;color: #68D8FE;cursor: pointer;z-index: 999;"
+          class="el-icon-error"></i>
+        <i class="topL"></i>
+        <i class="topR"></i>
+        <i class="bottomL"></i>
+        <i class="bottomR"></i>
+        <div class="data-title1">
+          <b class="data-title-left">[</b>
+          <span>溯源列表</span>
+          <b class="data-title-right">]</b>
+        </div>
+        <div class="full" style="padding: 10px;;padding-top: 15px;height: calc(100% - 14px);">
+          <div class="full tagContainer">
+            <el-tag :key="index" @click="clickTag(item.model.name)" :class="{
+              'tagActive':item.model.name==selectedModel.name,
+              'tagNoActive':item.model.name!=selectedModel.name
+            }" style="cursor: pointer;overflow: hidden;text-align: center;"
+              v-for="(item,index) in jzReMaterialQue">{{item.model.name}}</el-tag>
+          </div>
+        </div>
+      </div>
+    </div>
 
     <!-- 右侧操作边框-->
     <!--  <div  class="rightOpt" ref="rightOpt">
@@ -447,8 +473,11 @@
         modelLoader: null,
         /* */
         reMaterialQue: [],
-        jzReMaterialQue: [],
-        allFlowObject: []
+        jzReMaterialQue: [
+
+        ],
+        allFlowObject: [],
+        sylbshow: false
 
       }
     },
@@ -488,8 +517,7 @@
       apiGetYwxx() {
         this.$post('ywxxgl/uywxx/query', {
           sbxxCode: this.selectedModel.name,
-          }
-        ).then(res => {
+        }).then(res => {
           this.ywlistData = res.data.records || []
         })
       },
@@ -500,6 +528,65 @@
           this.jxlistData = res.data.records || []
         })
       },
+      clickTag(code) {
+        if (!code) {
+          return
+        } else {
+          this.sbxxQueryParams.code = code.replace(/\s+/g, '');
+          /* 查询*/
+          let iscx = false
+          this.viewer.scene.traverse((model) => {
+            if (model.isMesh) {
+              if (model.name == this.sbxxQueryParams.code) {
+
+                this.selectedModel = model
+                iscx = true
+                /* 执行并情况材料队列 */
+                this.reMaterialQue.forEach(item => {
+                  item.revert()
+                })
+                this.reMaterialQue.splice(0, this.reMaterialQue.length)
+
+
+                /* 添加材质模型队列*/
+                let reMaterialQueItem = {
+                  model,
+                  material: model.material.clone(),
+                  revert: function() {
+                    this.model.material = this.material
+                  }
+                }
+                this.reMaterialQue.push(reMaterialQueItem)
+
+
+                model.material = new THREE.MeshPhongMaterial({
+                  color: new THREE.Color('rgba(255, 255, 0, 0.8)'),
+                  transparent: true,
+                  opacity: 0.8,
+                  wireframe: false,
+                })
+                /* */
+                if (this.xzjj) {
+
+                  const object = model;
+                  if (object) {
+                    this.viewer.cameraControl.fitTo(object);
+                  }
+
+                }
+              }
+            }
+          });
+          if (iscx == false) {
+            this.sbcxwcxdxx = true
+            this.sbcxwcxdxxText = '未查询到设备!'
+            setTimeout(() => {
+              this.sbcxwcxdxx = false
+            }, 2000)
+
+          }
+        }
+      },
       sbcx() {
         if (!this.sbxxQueryParams.code) {
           this.sbcxwcxdxx = true
@@ -569,6 +656,7 @@
         this.jzReMaterialQue.forEach(item => {
           item.revert()
         })
+        this.jzReMaterialQue.splice(0, this.jzReMaterialQue.length)
         this.$post('ksh/query',
           this.queryParams
         ).then(res => {
@@ -579,6 +667,7 @@
             this.viewer.scene.traverse((model) => {
               if (model.isMesh) {
                 if (sbxxCodeList.includes(model.name)) {
+
                   let jzReMaterialQueItem = {
                     model,
                     material: model.material.clone(),
@@ -597,6 +686,13 @@
                 }
               }
             });
+            if (this.jzReMaterialQue.length != 0) {
+              this.viewer.cameraControl.fitTo(this.jzReMaterialQue[0].model);
+              this.sylbshow = true
+              this.clickTag(this.jzReMaterialQue[0].model.name)
+            } else {
+              this.sylbshow = false
+            }
 
 
 
@@ -1180,6 +1276,18 @@
     background-color: rgba(0, 0, 0, 0.6);
   }
 
+  .sylb {
+    top: 215px;
+    right: 15px;
+    /* 使元素居中 */
+    position: absolute;
+    height: 250px;
+    width: 28%;
+    z-index: 12;
+    background-color: rgba(0, 0, 0, 0.6);
+
+  }
+
 
   .topL {
     width: 20px;
@@ -1315,4 +1423,31 @@
     height: calc(100% - 4vh);
     overflow: hidden;
   }
+
+  .tagContainer {
+
+    overflow: auto;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    /* 每行展示5个 */
+    grid-auto-rows: 40px;
+    /* 每个项目的高度为40px */
+    gap: 10px;
+    /* 可选：设置项目之间的间距 */
+  }
+
+  .tagContainer::-webkit-scrollbar {
+    display: none;
+    /* 对于WebKit浏览器 */
+  }
+
+  .tagActive {
+    background-color: #83c7e3;
+    color: #fff;
+  }
+
+  .tagNoActive {
+    background-color: rgba(0, 0, 0, 0.6);
+    color: #68D8FE;
+  }
 </style>