fix(water-supply): adopt abnormal dashboard layout

src/views/subSystem/waterSupply/components/WaterDevicePage.vue

@@ -8,6 +8,16 @@
       <el-button :icon="Refresh" :loading="loading" @click="loadData">刷新</el-button>
     </div>
 
+    <div v-if="view === 'abnormal'" class="metric-grid">
+      <div v-for="item in abnormalStats" :key="item.label" class="metric">
+        <div class="metric-icon"><el-icon><component :is="item.icon" /></el-icon></div>
+        <div class="metric-body">
+          <span>{{ item.label }}</span>
+          <div class="metric-value"><strong>{{ item.value }}</strong><small>{{ item.unit }}</small></div>
+        </div>
+      </div>
+    </div>
+
     <el-card shadow="never" class="filter-card">
       <el-form :inline="true" :model="query">
         <el-form-item v-if="view !== 'gis'" label="设备名称"><el-input v-model="query.equipmentName" clearable /></el-form-item>
@@ -86,7 +96,7 @@
 <script setup>
 import { computed, onMounted, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
-import { Monitor, Refresh } from '@element-plus/icons-vue'
+import { Monitor, Refresh, Warning, Bell, Tools, DataLine } from '@element-plus/icons-vue'
 import { listUser } from '@/api/system/user'
 import { listDept } from '@/api/system/dept'
 import { handleTree } from '@/utils/ruoyi'
@@ -105,6 +115,18 @@ function canDispatch(row) {
   return canDispatchDevice(row)
 }
 function workOrderStatusType(code) { return ({ 1: 'info', 2: 'warning', 3: 'primary', 4: 'warning', 5: 'danger', 6: 'success', 7: 'info', 8: 'warning', 9: 'warning' })[Number(code)] || 'info' }
+const abnormalStats = computed(() => {
+  const rows = page.value.records
+  const alarmCount = rows.filter(row => Number(row.alarmStatus) === 1).length
+  const repairCount = rows.filter(row => Number(row.currentStatus) === 3).length
+  const pendingCount = rows.filter(row => row.workOrderStatusCode && !row.workOrderTerminal).length
+  return [
+    { label: '异常设备', value: page.value.total, unit: '台', icon: Warning },
+    { label: '报警中', value: alarmCount, unit: '台', icon: Bell },
+    { label: '维修中', value: repairCount, unit: '台', icon: Tools },
+    { label: '待闭环', value: pendingCount, unit: '条', icon: DataLine }
+  ]
+})
 const detailFields = computed(() => [['设备编码', detail.value.equipmentCode], ['设备类型', detail.value.equipmentTypeName || detail.value.typeName], ['安装位置', detail.value.equipmentLocation], ['设备状态', detail.value.currentStatusText], ['在线状态', detail.value.onlineStatusText], ['报警状态', detail.value.alarmStatusText], ['报警等级', detail.value.alarmLevelText], ['异常原因', detail.value.abnormalReasonText], ['关联工单', detail.value.relatedOrderNo || detail.value.orderNo], ['工单状态', detail.value.workOrderStatusText || detail.value.status], ['接单责任人', detail.value.relatedWorkOrderPerson || detail.value.maintainPerson], ['状态更新时间', detail.value.statusUpdateTime]].map(([label, value]) => ({ label, value: value ?? '-' })))
 
 async function loadData() { loading.value = true; loadError.value = ''; try { if (view === 'gis') { const response = await listDeviceGisPoints({ ...query.value }); const records = normalizeDeviceGisPoints(response).map(normalizeDeviceRow); page.value = { records, total: records.length, current: 1, size: records.length || 10 }; return } let response; if (view === 'maintain') response = await listMaintainRecords({ ...query.value }); else if (view === 'dispatch' || view === 'abnormal') response = await listAbnormalDevices({ ...query.value, ...(view === 'dispatch' ? { dispatchableOnly: true } : {}) }); else response = await listDeviceLedger({ ...query.value }); const normalized = normalizePage(response); page.value = { ...normalized, records: normalized.records.map(normalizeDeviceRow) } } catch (error) { const retained = preserveDevicePageOnError(page.value); page.value = retained.page; loadError.value = retained.error; console.warn(`[${title}] 数据加载失败`, error) } finally { loading.value = false } }

src/views/subSystem/waterSupply/device/abnormal.vue

@@ -1 +1,11 @@
-<script setup>import Page from '../components/WaterDevicePage.vue'</script><template><Page title="设备异常管理" view="abnormal" subtitle="异常态势、处置跟踪与关联工单管理" /></template>
+<script setup>
+import Page from '../components/WaterDevicePage.vue'
+</script>
+
+<template>
+  <Page
+    title="设备异常管理"
+    view="abnormal"
+    subtitle="异常态势、处置跟踪与关联工单管理"
+  />
+</template>