没完成的抽屉功能

gassafety-web/src/views/enterprise/mapView/index.vue

@@ -182,7 +182,16 @@
                 {{ item.label }}
               </div>
               <!-- 有多少设备 -->
-              <div class="diviceNum">({{ allList[index].length }})个设备</div>
+              <!-- 管道 -->
+              <!-- rightBototmData[0].number -->
+              <template v-if="item.type == '0'">
+                <div class="diviceNum">({{ pipeLength }}米)</div>
+              </template>
+              <!-- 设备 -->
+              <template v-else>
+                <div class="diviceNum">({{ allList[index].length }}个)</div>
+              </template>
+
               <!-- 对钩 -->
               <i class="el-icon-check bingo"></i>
               <!-- <i class="ju"></i> -->
@@ -383,6 +392,8 @@ export default {
       // 左边的bar的active判定 被选中显示的设备
       leftBarNum: [1, 2, 3, 4, 7, 8, 9, 10],
       // leftBarNum: [],
+      // 管道的长度
+      pipeLength: 0,
       // 右转箭头的样式active判定
       arrowRightNum: [],
       // 新建里的值
@@ -517,6 +528,7 @@ export default {
     //   // immediate: true,
     // },
   },
+
   methods: {
     onResize() {
       this.boxHeight = document.body.clientHeight - 80;
@@ -566,11 +578,11 @@ export default {
     getCompList() {
       listInfo().then((res) => {
         console.log("公司列表", res.rows);
-       this.comp=res.rows.map((item) => {
+        this.comp = res.rows.map((item) => {
           const { infoId, unitName } = item;
           return {
             infoId,
-            unitName
+            unitName,
           };
         });
       });
@@ -650,6 +662,7 @@ export default {
         if (res.code == 200) {
           this.gaoMap.addPolyline(res.data);
           this.pipeClassify(res.data);
+          // 获取管道长度
         }
         return res.code;
       });
@@ -889,6 +902,7 @@ export default {
             obj = { number: 0, type: "99" };
           }
           this.rightBototmData.push(obj);
+          console.log("rightBototmData", this.rightBototmData);
         }
       });
       await countDeviceByType().then((res) => {
@@ -932,6 +946,62 @@ export default {
         this.compChangeArr.splice(index, 1);
       }
       console.log(this.compChangeArr);
+
+      this.filterCompDevice(this.compChangeArr);
+
+      // 管道长度获取
+      this.pipeLength = this.pipeLengthMath(this.allList[0]);
+    },
+
+    // 过滤公司的设备并更新左侧抽屉数据
+    filterCompDevice(arr) {
+      // 管道跟4设备先重置
+      this.compDeviceDrawReset();
+      // 管道
+      const pipeArr = this.gaoMap.polyLines
+        .filter((item) => {
+          const { enterpriseId } = item.getExtData().lineData;
+          return arr.indexOf(enterpriseId) >= 0;
+        })
+        .map((item) => {
+          return { ...item.getExtData().lineData };
+        });
+      // 管道存储
+      this.pipeClassify(pipeArr);
+      // 4设备
+      const deviceArr = this.gaoMap.markers
+        .filter((item) => {
+          const { enterpriseId } = item.getExtData();
+          console.log(item.getExtData());
+          return arr.indexOf(enterpriseId) >= 0;
+        })
+        .map((item) => {
+          return { ...item.getExtData() };
+        });
+      // 4设备存储
+      this.deviceClassify(deviceArr);
+
+      // 存储之后执行程序初始化抽屉里的设备
+      this.pipeList();
+      console.log("pipeArr", pipeArr, deviceArr);
+    },
+    // 切换公司的时候管道跟前4个设备重置
+    compDeviceDrawReset() {
+      this.changeBtnData.forEach((item, index) => {
+        if (index < 5) {
+          // 清空list
+          this.allList[index] = [];
+          item.list = [];
+          item.maxPage = 99;
+          item.nowPage = 1;
+        }
+      });
+    },
+    // 管道长度
+    pipeLengthMath(arr) {
+      return arr.reduce((a, b) => {
+        return a + b.selfData.pipeLength;
+      }, 0);
     },
     // 左边的Bar修改值 左边抽屉
     leftBarChange(item) {