增加页面控制展示项

src/views/appmana/deploy/components/ControlModal.vue

@@ -53,15 +53,15 @@
           v-for="item in formState.runList"
           :key="item.id"
           class="status-card"
-          :class="[getStatusClass(item.value), { 'data-updated': item.highlight }]"
+          :class="[getCardClass(item), { 'data-updated': item.highlight }]"
         >
           <div class="status-icon">
-            <component :is="getStatusIcon(item.value)" />
+            <component :is="getCardIcon(item)" />
           </div>
           <div class="status-content">
             <div class="status-label">{{ item.runName }}</div>
             <div class="status-value">
-              <span class="status-text">{{ getStatusText(item.value) }}</span>
+              <span class="status-text" :class="getTextClass(item)">{{ getCardText(item) }}</span>
             </div>
           </div>
         </div>
@@ -138,6 +138,8 @@
     ExclamationCircleOutlined,
     MinusCircleOutlined,
     PoweroffOutlined,
+    DashboardOutlined,
+    WarningOutlined,
   } from '@ant-design/icons-vue';
   import { getValveStatus, sendDeviceCmd, getRelayList, sendRelayQuery } from '../SurvDeviceDeploy.api';
   import { message } from 'ant-design-vue';
@@ -196,18 +198,18 @@
     }
   };
 
-  // 统计状态数量
+  // 统计状态数量（仅统计 runType=='1' 的状态项，runType=='2' 为数值项、runType=='3' 为报警项均不参与统计）
   const runningCount = computed(() => {
-    return formState.runList.filter((item) => item.value === '1').length;
+    return formState.runList.filter((item) => item.runType === 1 && item.value === '1').length;
   });
   const stoppedCount = computed(() => {
-    return formState.runList.filter((item) => item.value === '0').length;
+    return formState.runList.filter((item) => item.runType === 1 && item.value === '0').length;
   });
   const errorCount = computed(() => {
-    return formState.runList.filter((item) => item.value === '2').length;
+    return formState.runList.filter((item) => item.runType === 1 && item.value === '2').length;
   });
   const pendingCount = computed(() => {
-    return formState.runList.filter((item) => item.value === '3').length;
+    return formState.runList.filter((item) => item.runType === 1 && item.value === '3').length;
   });
 
   const timerMap = new Map();
@@ -287,6 +289,41 @@
     return map[value] || PoweroffOutlined;
   }
 
+  // runType === 3 报警类型：value='1' 是(有报警) / '0' 否(无报警)
+  function getAlarmText(value: string) {
+    return value === '1' ? '是' : '否';
+  }
+
+  function getAlarmClass(value: string) {
+    return value === '1' ? 'status-alarm-yes' : 'status-alarm-no';
+  }
+
+  function getAlarmIcon(value: string) {
+    return value === '1' ? WarningOutlined : CheckCircleOutlined;
+  }
+
+  // ===== runType 三分支统一入口 =====
+  // runType: 1=常规状态  2=数值指标  3=报警(是/否)
+  function getCardClass(item: any) {
+    if (item.runType === 2) return 'status-metric';
+    if (item.runType === 3) return getAlarmClass(item.value);
+    return getStatusClass(item.value);
+  }
+  function getCardIcon(item: any) {
+    if (item.runType === 2) return DashboardOutlined;
+    if (item.runType === 3) return getAlarmIcon(item.value);
+    return getStatusIcon(item.value);
+  }
+  function getCardText(item: any) {
+    if (item.runType === 2) return item.value;
+    if (item.runType === 3) return getAlarmText(item.value);
+    return getStatusText(item.value);
+  }
+  function getTextClass(item: any) {
+    if (item.runType === 2) return 'status-metric-text';
+    return '';
+  }
+
   const handleMessage = (payload: string, topic: string) => {
     try {
       const data = JSON.parse(payload);
@@ -790,6 +827,18 @@
     color: #faad14;
   }
 
+  .status-card.status-metric .status-icon {
+    color: #1890ff;
+  }
+
+  /* runType === 3 报警类型样式 */
+  .status-card.status-alarm-yes .status-icon {
+    color: #ff4d4f;
+  }
+  .status-card.status-alarm-no .status-icon {
+    color: #52c41a;
+  }
+
   .status-content {
     flex: 1;
     min-width: 0;
@@ -823,6 +872,19 @@
     color: #faad14;
   }
 
+  .status-card.status-alarm-yes .status-text {
+    color: #ff4d4f;
+  }
+  .status-card.status-alarm-no .status-text {
+    color: #52c41a;
+  }
+
+  .status-card .status-text.status-metric-text {
+    color: #1890ff;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 16px;
+  }
+
   /* ========== 控制项区 ========== */
   .control-panel .panel-header {
     border-bottom: 1px solid #e8ecf1;