diff --git a/src/views/appmana/deploy/components/ControlModal.vue b/src/views/appmana/deploy/components/ControlModal.vue index f8ed92e..d2a7970 100644 --- a/src/views/appmana/deploy/components/ControlModal.vue +++ b/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 }]" >
- +
{{ item.runName }}
- {{ getStatusText(item.value) }} + {{ getCardText(item) }}
@@ -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;