1.修改中央空调-系统监测-压缩机参数内容tab分开展示

src/views/centerairC/sysMonitor/hostDetails.vue

@@ -173,30 +173,34 @@
         <div class="detail-data compressor">
           <div class="detail-data-top">
             <title-img></title-img>
-            <div class="details-title">压缩机参数</div>
+            <div class="choice">
+              <div
+                class="mr20"
+                v-for="(item, index) in compressorData"
+                :key="index"
+                @click="handleEnter(index, item.name)"
+                :class="{ timeStyle: sharedIndex == index }"
+              >
+                {{ item.mtTypeName }}
+              </div>
+            </div>
             <title-img></title-img>
           </div>
           <div class="detail-data-bottom">
             <div
               class="detail-data-li"
-              v-for="(item, index) in compressorData"
-              :key="index + 1"
+              v-for="(subItem, subIndex) in currentDisplayData"
+              :key="subIndex"
             >
               <div class="rightDot">
                 <div class="leftDot">
-                  <span>{{ item.otherName }}:</span>
-                  <span class="dotData">{{ item.curValue }}</span>
-                  <span>{{ item.unit }}</span>
+                  <span>{{ subItem.otherName }}:</span>
+                  <span class="dotData">{{ subItem.curValue }}</span>
+                  <span>{{ subItem.unit }}</span>
                 </div>
               </div>
             </div>
           </div>
-          <!-- <line-square
-            class="line1"
-            :horizontalLength="720"
-            :verticalLength="440"
-            :overlap="15"
-          ></line-square> -->
         </div>
       </div>
     </div>
@@ -240,6 +244,8 @@ export default {
       isMagnetic: false,
       isShowWarning: false, //是否有报警
       dayData: "", //监测天数
+      sharedIndex: 0,
+      currentDisplayData: [],
     };
   },
   computed: {
@@ -407,26 +413,32 @@ export default {
                 }
               });
             }
-            if (item.mtType === "9") {
-              // 压缩机参数
-              this.compressorData = item.list;
+          });
+          // 使用 filter 方法过滤掉 item 为 '0' 的对象
+          this.compressorData = data.filter((obj) => obj.mtType !== "0");
+          console.log("压缩机数组", this.compressorData);
+          // 在组件挂载后触发 handleEnter 方法，这里默认点击第一个元素
+          if (this.compressorData.length > 0) {
+            this.handleEnter(0, this.compressorData[0].name);
+          }
+        }
+      });
+    },
+    handleEnter(index, event) {
+      console.log("index", index);
+      this.sharedIndex = index;
+      // 更新当前显示的数据为点击项的子列表
+      this.currentDisplayData = this.compressorData[index].list;
       // 遍历数组
-              for (let i = 0; i < this.compressorData.length; i++) {
-                const item = this.compressorData[i];
+      for (let i = 0; i < this.currentDisplayData.length; i++) {
+        const item = this.currentDisplayData[i];
         if (item.paramType === "1" && Number(item.curValue) === 0) {
           item.curValue = "停止";
           console.log("压缩机停止了啊是0···················");
-                } else if (
-                  item.paramType === "1" &&
-                  Number(item.curValue) === 1
-                ) {
+        } else if (item.paramType === "1" && Number(item.curValue) === 1) {
           item.curValue = "运行";
         }
       }
-            }
-          });
-        }
-      });
     },
     // 采集参数列表
     getCollect(id) {
@@ -856,7 +868,7 @@ export default {
           }
         }
         .detail-data-bottom {
-          // width: 100%;
+          width: 100%;
           // padding: 0.1rem 0.3rem;
           z-index: 0;
           display: flex;
@@ -1065,4 +1077,19 @@ export default {
     }
   }
 }
+.choice {
+  margin-left: 0 !important;
+}
+.choice .mr20 {
+  width: 1rem !important;
+  color: #c0dffc;
+  font-weight: bold !important;
+  font-size: 0.18rem !important;
+  text-align: center !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+.timeStyle {
+  color: #ffffff !important;
+}
 </style>