add:排水系统自动化控制开关显示问题

src/views/Screen/items/psxt.vue

@@ -4,32 +4,23 @@
       <div id="cesiumContainer">
         <div class="center-title-box">
           <div class="control-state">
-            <p v-if="intelligentControl == 0">
+            <!-- 简化class绑定语法 -->
+            <p :class="{ active: intelligentControl.value == 1 }">
               <span class="icon-img"></span>
-              <span>已开启智能控制</span>
+              <span>{{ intelligentControl.name }}</span>
             </p>
-            <p v-else>
-              <span class="icon-img"></span>
-              <span>未开启智能控制</span>
-            </p>
-          </div>
-          <div class="title-box top">
-            <p class="title">
-              液体高度:{{ sumpData | sumpFilter(0, "heghtThreshold") }}m
-            </p>
-            <p class="name">{{ sumpData | sumpFilter(0, "sumpName") }}</p>
-          </div>
-          <div class="title-box center">
-            <p class="title">
-              液体高度:{{ sumpData | sumpFilter(1, "heghtThreshold") }}m
-            </p>
-            <p class="name">{{ sumpData | sumpFilter(1, "sumpName") }}</p>
           </div>
-          <div class="title-box bottom">
+          <!-- 优化为数据驱动循环 -->
+          <div
+            class="title-box"
+            v-for="(item, index) in sumpData"
+            :key="index"
+            :class="['top', 'center', 'bottom'][index]"
+          >
             <p class="title">
-              液体高度:{{ sumpData | sumpFilter(2, "heghtThreshold") }}m
+              液体高度:{{ item | sumpFilter("heghtThreshold") }}m
             </p>
-            <p class="name">{{ sumpData | sumpFilter(2, "sumpName") }}</p>
+            <p class="name">{{ item | sumpFilter("sumpName") }}</p>
           </div>
         </div>
         <div
@@ -119,7 +110,7 @@ export default {
       password: "",
       upWindowShow: false,
       pumpId: "",
-      intelligentControl: 0,
+      intelligentControl: {},
       pumpList: [
         {
           pumpId: 1,
@@ -127,23 +118,7 @@ export default {
           pumpStatus: 1,
         },
       ],
-      sumpData: [
-        {
-          sumpId: 1,
-          sumpName: "5#水池",
-          heghtThreshold: 10,
-        },
-        {
-          sumpId: 2,
-          sumpName: "5#水池",
-          heghtThreshold: 10,
-        },
-        {
-          sumpId: 3,
-          sumpName: "5#水池",
-          heghtThreshold: 10,
-        },
-      ],
+      sumpData: [],
       pumpList: [],
     };
   },
@@ -157,7 +132,7 @@ export default {
         if (res.code == 200) {
           this.sumpData = res.data[0].value;
           this.pumpList = res.data[1].value;
-          this.intelligentControl = res.data[2].value;
+          this.intelligentControl = res.data[2];
         } else {
           this.$modal.msgError(res.message);
         }
@@ -196,12 +171,9 @@ export default {
   },
   filters: {
     // 水池显示数据过滤
-    sumpFilter(dateTmp, index, key) {
-      if (dateTmp?.[index]?.[key]) {
-        // 添加空值检测
-        return dateTmp[index][key];
-      }
-      return "--"; // 添加默认值
+    sumpFilter(item, key) {
+      // 优化过滤逻辑
+      return item?.[key] || "--";
     },
   },
 };
@@ -250,6 +222,13 @@ export default {
             margin-bottom: -4px;
             margin-right: 10px;
           }
+          &.active {
+            color: #e1e1e1;
+            .icon-img {
+              background: url("~@/assets/images/screen/psxt/icon3.png")
+                no-repeat center;
+            }
+          }
         }
       }
       .title-box {