From d9a0470ecfff32326e2c19e6e6cce9d493c50511 Mon Sep 17 00:00:00 2001
From: zxr <271055687@qq.com>
Date: Sun, 19 Apr 2026 14:24:03 +0800
Subject: [PATCH] fix

---
 src/api/ops/room-device.ts                    |   29 +-
 .../dc/device-collect/components/Detail.vue   |    6 +-
 .../ops/pages/monitor/environment/index.vue   | 1234 +++++++----------
 3 files changed, 551 insertions(+), 718 deletions(-)

diff --git a/src/api/ops/room-device.ts b/src/api/ops/room-device.ts
index cad8a1c..c14329b 100644
--- a/src/api/ops/room-device.ts
+++ b/src/api/ops/room-device.ts
@@ -10,7 +10,10 @@ export interface RoomDeviceItem {
   name: string
   description: string
   room_id: string
+  device_code?: string
   device_category: string
+  type?: string
+  status_url?: string
   agent_config: string
   collect_method: 'api' | 'snmp'
   snmp_target: string
@@ -23,6 +26,15 @@ export interface RoomDeviceItem {
   collect_on: boolean
   collect_interval: number
   collect_last_result: string
+  status?: string
+  status_code?: number
+  status_message?: string
+  response_time?: number
+  last_check_time?: string
+  last_online_time?: string | null
+  last_offline_time?: string | null
+  continuous_errors?: number
+  uptime?: number
   policy_ids?: number[]
 }
 
@@ -111,6 +123,21 @@ export interface MetricItem {
   metric_unit?: string
 }
 
+/** GET /room-devices/metrics/latest 的 details 载荷 */
+export interface RoomDeviceMetricsLatestDetails {
+  service_identity: string
+  latest_timestamp?: string | null
+  count: number
+  metrics: MetricItem[]
+}
+
+/** 统一 API 封装（与 storage 等页一致） */
+export interface RoomDeviceMetricsLatestResponse {
+  code: number
+  message?: string
+  details?: RoomDeviceMetricsLatestDetails
+}
+
 /** 指标上报数据 */
 export interface MetricsUploadData {
   metrics: MetricItem[]
@@ -148,7 +175,7 @@ export const patchRoomDeviceCollect = (id: number, data: RoomDeviceCollectData)
 
 /** 查询最新指标 */
 export const fetchLatestMetrics = (serviceIdentity: string) => {
-  return request.get<MetricItem[]>('/DC-Control/v1/room-devices/metrics/latest', {
+  return request.get<RoomDeviceMetricsLatestResponse>('/DC-Control/v1/room-devices/metrics/latest', {
     params: { service_identity: serviceIdentity },
   })
 }
diff --git a/src/views/ops/pages/dc/device-collect/components/Detail.vue b/src/views/ops/pages/dc/device-collect/components/Detail.vue
index ae5b460..235e883 100644
--- a/src/views/ops/pages/dc/device-collect/components/Detail.vue
+++ b/src/views/ops/pages/dc/device-collect/components/Detail.vue
@@ -108,7 +108,11 @@ const handleViewMetrics = async () => {
   metricsLoading.value = true
   try {
     const response = await fetchLatestMetrics(props.record.service_identity)
-    metricsData.value = (response as any)?.details?.data || []
+    const metrics =
+      response?.code === 0 && response.details?.metrics && Array.isArray(response.details.metrics)
+        ? response.details.metrics
+        : []
+    metricsData.value = metrics
   } catch (error) {
     console.error('获取最新指标失败:', error)
     Message.error('获取最新指标失败')
diff --git a/src/views/ops/pages/monitor/environment/index.vue b/src/views/ops/pages/monitor/environment/index.vue
index 3d6ce36..892fff9 100644
--- a/src/views/ops/pages/monitor/environment/index.vue
+++ b/src/views/ops/pages/monitor/environment/index.vue
@@ -1,545 +1,460 @@
 <template>
   <div class="container">
-    <!-- 统计卡片 -->
-    <a-row :gutter="16" class="stats-row">
-      <a-col :xs="24" :sm="12" :lg="6">
-        <a-card class="stats-card" :bordered="false">
-          <div class="stats-content">
-            <div class="stats-icon stats-icon-primary">
-              <IconThermometer :size="24" stroke="1.5" />
-            </div>
-            <div class="stats-info">
-              <div class="stats-title">平均温度</div>
-              <div class="stats-value">24.2°C</div>
-              <div class="stats-desc text-success">正常范围</div>
-            </div>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :xs="24" :sm="12" :lg="6">
-        <a-card class="stats-card" :bordered="false">
-          <div class="stats-content">
-            <div class="stats-icon stats-icon-cyan">
-              <IconDroplet :size="24" stroke="1.5" />
-            </div>
-            <div class="stats-info">
-              <div class="stats-title">平均湿度</div>
-              <div class="stats-value">46%</div>
-              <div class="stats-desc text-success">正常范围</div>
-            </div>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :xs="24" :sm="12" :lg="6">
-        <a-card class="stats-card" :bordered="false">
-          <div class="stats-content">
-            <div class="stats-icon stats-icon-green">
-              <IconPlug :size="24" stroke="1.5" />
-            </div>
-            <div class="stats-info">
-              <div class="stats-title">总功耗</div>
-              <div class="stats-value">156 kW</div>
-              <div class="stats-desc">PUE 1.45</div>
-            </div>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :xs="24" :sm="12" :lg="6">
-        <a-card class="stats-card" :bordered="false">
-          <div class="stats-content">
-            <div class="stats-icon stats-icon-purple">
-              <IconAirConditioning :size="24" stroke="1.5" />
-            </div>
-            <div class="stats-info">
-              <div class="stats-title">空调状态</div>
-              <div class="stats-value">3/4</div>
-              <div class="stats-desc">1台维护中</div>
-            </div>
-          </div>
-        </a-card>
-      </a-col>
-    </a-row>
+    <div class="page-toolbar">
+      <div class="toolbar-left">
+        <span class="toolbar-label">机房</span>
+        <a-select
+          v-model="selectedRoomId"
+          class="room-select"
+          placeholder="请选择机房"
+          allow-clear
+          :loading="roomOptionsLoading"
+          @change="onRoomChange"
+        >
+          <a-option v-for="r in roomOptions" :key="r.id" :value="r.id" :label="r.name">
+            {{ r.name }}
+            <span v-if="r.code" class="text-muted room-option-code">{{ r.code }}</span>
+          </a-option>
+        </a-select>
+        <a-button type="outline" :disabled="!selectedRoomId" :loading="loading" @click="reloadRoomData">
+          刷新
+        </a-button>
+      </div>
+      <div v-if="statsPartialHint" class="toolbar-meta text-muted">{{ statsPartialHint }}</div>
+    </div>
 
-    <!-- 环境概览 -->
-    <a-row :gutter="16" class="chart-row">
-      <a-col :xs="24" :lg="8">
-        <a-card title="温湿度趋势" :bordered="false">
-          <template #extra>
+    <div v-if="!selectedRoomId" class="global-hint text-muted">请选择机房以查看该机房下的动环设备与指标。</div>
+
+    <a-spin :loading="loading" style="width: 100%">
+      <!-- 首行：4 张汇总 -->
+      <a-row v-if="selectedRoomId" :gutter="16" class="stats-row">
+        <a-col :xs="24" :sm="12" :lg="6">
+          <a-card class="stats-card" :bordered="false">
+            <div class="stats-content">
+              <div class="stats-icon stats-icon-primary">
+                <IconBuildingCommunity :size="24" stroke="1.5" />
+              </div>
+              <div class="stats-info">
+                <div class="stats-title">设备数量</div>
+                <div class="stats-value">{{ deviceTotal }}</div>
+                <div class="stats-desc">已注册采集服务</div>
+              </div>
+            </div>
+          </a-card>
+        </a-col>
+        <a-col :xs="24" :sm="12" :lg="6">
+          <a-card class="stats-card" :bordered="false">
+            <div class="stats-content">
+              <div class="stats-icon stats-icon-green">
+                <IconCircleCheck :size="24" stroke="1.5" />
+              </div>
+              <div class="stats-info">
+                <div class="stats-title">在线设备</div>
+                <div class="stats-value">{{ summaryOnline }}</div>
+                <div class="stats-desc">status = online</div>
+              </div>
+            </div>
+          </a-card>
+        </a-col>
+        <a-col :xs="24" :sm="12" :lg="6">
+          <a-card class="stats-card" :bordered="false">
+            <div class="stats-content">
+              <div class="stats-icon stats-icon-cyan">
+                <IconActivity :size="24" stroke="1.5" />
+              </div>
+              <div class="stats-info">
+                <div class="stats-title">采集已开启</div>
+                <div class="stats-value">{{ summaryCollectOn }}</div>
+                <div class="stats-desc">已启用且周期采集开启</div>
+              </div>
+            </div>
+          </a-card>
+        </a-col>
+        <a-col :xs="24" :sm="12" :lg="6">
+          <a-card class="stats-card" :bordered="false">
+            <div class="stats-content">
+              <div class="stats-icon stats-icon-purple">
+                <IconAlertCircle :size="24" stroke="1.5" />
+              </div>
+              <div class="stats-info">
+                <div class="stats-title">离线/未知</div>
+                <div class="stats-value">{{ summaryOfflineUnknown }}</div>
+                <div class="stats-desc">status 非 online</div>
+              </div>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+
+      <!-- 第二行：设备卡片 -->
+      <div v-if="selectedRoomId && deviceCardsHint" class="device-cards-hint text-muted">{{ deviceCardsHint }}</div>
+      <a-row v-if="selectedRoomId" :gutter="16" class="device-cards-row">
+        <a-col v-for="d in devicesForCards" :key="d.id" :xs="24" :sm="12" :md="8" :lg="6">
+          <a-card class="device-card" :bordered="false">
+            <div class="device-card-head">
+              <div class="device-card-title">{{ d.name }}</div>
+              <a-tag :color="getStatusColor(d.status)" size="small">{{ formatStatusText(d.status) }}</a-tag>
+            </div>
+            <div class="device-card-meta">
+              <span>{{ DEVICE_CATEGORY_MAP[d.device_category] || d.device_category }}</span>
+              <span class="text-muted"> · {{ d.type || '-' }}</span>
+            </div>
+            <div class="device-card-meta text-muted">
+              <a-tag :color="d.collect_method === 'snmp' ? 'purple' : 'arcoblue'" size="small">
+                {{ d.collect_method === 'snmp' ? 'SNMP' : 'API' }}
+              </a-tag>
+              <span class="ml-8">{{ formatDateTime(d.last_check_time) }}</span>
+            </div>
+            <div v-if="d.collect_last_result" class="device-card-result text-muted" :title="d.collect_last_result">
+              {{ truncate(d.collect_last_result, 80) }}
+            </div>
+            <a-divider :margin="12" />
+            <div class="device-metrics">
+              <a-spin :loading="metricsLoading && isMetricsTarget(d)" :size="16">
+                <template v-if="metricsForDevice(d).length">
+                  <div
+                    v-for="(m, idx) in metricsForDevice(d).slice(0, 6)"
+                    :key="`${m.metric_name}-${idx}`"
+                    class="metric-line"
+                  >
+                    <span class="metric-name">{{ m.metric_name }}</span>
+                    <span class="metric-val"
+                      >{{ m.metric_value }}{{ m.metric_unit ? ` ${m.metric_unit}` : '' }}</span
+                    >
+                  </div>
+                </template>
+                <span v-else-if="!isMetricsTarget(d)" class="text-muted">指标见前 {{ METRICS_CARD_LIMIT }} 台</span>
+                <span v-else class="text-muted">暂无指标</span>
+              </a-spin>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+      <a-empty v-if="selectedRoomId && !devicesAll.length && !loading" description="该机房下暂无设备" />
+
+      <!-- 设备列表 -->
+      <a-card v-if="selectedRoomId" class="table-card" title="设备列表" :bordered="false">
+        <template #extra>
+          <a-select
+            v-model="selectedCategory"
+            placeholder="全部分类"
+            allow-clear
+            style="width: 160px"
+            :options="DEVICE_CATEGORY_OPTIONS"
+          />
+        </template>
+        <a-table
+          :data="tableRowsPaged"
+          :columns="columns"
+          :loading="loading"
+          :pagination="tablePagination"
+          row-key="id"
+          @page-change="onTablePageChange"
+          @page-size-change="onTablePageSizeChange"
+        >
+          <template #device_category="{ record }">
+            {{ DEVICE_CATEGORY_MAP[record.device_category] || record.device_category || '-' }}
+          </template>
+          <template #collect_method="{ record }">
+            <a-tag :color="record.collect_method === 'snmp' ? 'purple' : 'arcoblue'" size="small">
+              {{ record.collect_method === 'snmp' ? 'SNMP' : 'API' }}
+            </a-tag>
+          </template>
+          <template #enabled_collect="{ record }">
             <a-space>
-              <span class="legend-item">
-                <span class="legend-dot legend-dot-1"></span>
-                <span>温度°C</span>
-              </span>
-              <span class="legend-item">
-                <span class="legend-dot legend-dot-2"></span>
-                <span>湿度%</span>
-              </span>
+              <a-tag :color="record.enabled ? 'green' : 'gray'" size="small">
+                {{ record.enabled ? '启用' : '禁用' }}
+              </a-tag>
+              <a-tag :color="record.collect_on ? 'green' : 'gray'" size="small">
+                {{ record.collect_on ? '周期采' : '未周期' }}
+              </a-tag>
             </a-space>
           </template>
-          <div class="chart-container">
-            <Chart :options="tempChartOptions" height="280px" />
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :xs="24" :lg="8">
-        <a-card title="UPS状态" :bordered="false">
-          <template #extra>
-            <span class="text-muted">不间断电源系统</span>
+          <template #status="{ record }">
+            <a-tag :color="getStatusColor(record.status)" bordered>
+              {{ formatStatusText(record.status) }}
+            </a-tag>
           </template>
-          <div class="ups-list">
-            <div v-for="ups in upsList" :key="ups.name" class="ups-item">
-              <div class="ups-icon">
-                <IconCircleCheck :size="24" stroke="1.5" class="battery-icon" />
-              </div>
-              <div class="ups-info">
-                <div class="ups-header">
-                  <span class="ups-name">{{ ups.name }}</span>
-                  <a-tag color="green">在线</a-tag>
-                </div>
-                <div class="ups-details">
-                  <span>负载: {{ ups.load }}</span>
-                  <span>电池: {{ ups.battery }}</span>
-                  <span>后备: {{ ups.backup }}</span>
-                </div>
-                <div class="ups-progress">
-                  <a-progress
-                    :percent="ups.loadPercent"
-                    :stroke-width="8"
-                    :show-text="false"
-                    color="#165DFF"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :xs="24" :lg="8">
-        <a-card title="精密空调" :bordered="false">
-          <template #extra>
-            <span class="text-muted">制冷系统状态</span>
+          <template #collect_last_result="{ record }">
+            <a-typography-text :ellipsis="{ rows: 2, showTooltip: true }" style="max-width: 240px">
+              {{ record.collect_last_result || '-' }}
+            </a-typography-text>
           </template>
-          <div class="ac-list">
-            <div v-for="ac in acList" :key="ac.name" class="ac-item">
-              <div class="ac-left">
-                <IconAirConditioning :size="16" stroke="1.5" :class="['ac-icon', { 'ac-icon-offline': ac.status === 'offline' }]" />
-                <span class="ac-name">{{ ac.name }}</span>
-              </div>
-              <div class="ac-right">
-                <span class="ac-temp">{{ ac.temp }}</span>
-                <span class="ac-humidity">{{ ac.humidity }}</span>
-                <a-tag :color="ac.status === 'online' ? 'green' : 'gray'">{{ ac.mode }}</a-tag>
-              </div>
-            </div>
-          </div>
-        </a-card>
-      </a-col>
-    </a-row>
-
-    <!-- 电力分布 -->
-    <a-row :gutter="16" class="power-row">
-      <a-col :xs="24" :sm="12" :lg="6">
-        <a-card class="power-card" :bordered="false">
-          <div class="power-header">
-            <div class="power-icon power-icon-primary">
-              <IconPlug :size="20" stroke="1.5" />
-            </div>
-            <div class="power-info">
-              <div class="power-title">A路市电</div>
-              <div class="power-desc">主供电</div>
-            </div>
-          </div>
-          <div class="power-stats">
-            <div class="power-stat-item">
-              <span class="power-stat-label">电压</span>
-              <span class="power-stat-value text-success">380V</span>
-            </div>
-            <div class="power-stat-item">
-              <span class="power-stat-label">电流</span>
-              <span class="power-stat-value">245A</span>
-            </div>
-            <div class="power-stat-item">
-              <span class="power-stat-label">功率</span>
-              <span class="power-stat-value">82 kW</span>
-            </div>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :xs="24" :sm="12" :lg="6">
-        <a-card class="power-card" :bordered="false">
-          <div class="power-header">
-            <div class="power-icon power-icon-primary">
-              <IconPlug :size="20" stroke="1.5" />
-            </div>
-            <div class="power-info">
-              <div class="power-title">B路市电</div>
-              <div class="power-desc">备用供电</div>
-            </div>
-          </div>
-          <div class="power-stats">
-            <div class="power-stat-item">
-              <span class="power-stat-label">电压</span>
-              <span class="power-stat-value text-success">380V</span>
-            </div>
-            <div class="power-stat-item">
-              <span class="power-stat-label">电流</span>
-              <span class="power-stat-value">218A</span>
-            </div>
-            <div class="power-stat-item">
-              <span class="power-stat-label">功率</span>
-              <span class="power-stat-value">74 kW</span>
-            </div>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :xs="24" :sm="12" :lg="6">
-        <a-card class="power-card" :bordered="false">
-          <div class="power-header">
-            <div class="power-icon power-icon-success">
-              <IconBolt :size="20" stroke="1.5" />
-            </div>
-            <div class="power-info">
-              <div class="power-title">发电机</div>
-              <div class="power-desc">备用电源</div>
-            </div>
-          </div>
-          <div class="power-stats">
-            <div class="power-stat-item">
-              <span class="power-stat-label">状态</span>
-              <a-tag color="green">待机</a-tag>
-            </div>
-            <div class="power-stat-item">
-              <span class="power-stat-label">燃油</span>
-              <span class="power-stat-value">95%</span>
-            </div>
-            <div class="power-stat-item">
-              <span class="power-stat-label">上次测试</span>
-              <span class="power-stat-value">3天前</span>
-            </div>
-          </div>
-        </a-card>
-      </a-col>
-      <a-col :xs="24" :sm="12" :lg="6">
-        <a-card class="power-card" :bordered="false">
-          <div class="power-header">
-            <div class="power-icon power-icon-primary">
-              <IconChartBar :size="20" stroke="1.5" />
-            </div>
-            <div class="power-info">
-              <div class="power-title">能效统计</div>
-              <div class="power-desc">本月数据</div>
-            </div>
-          </div>
-          <div class="power-stats">
-            <div class="power-stat-item">
-              <span class="power-stat-label">PUE</span>
-              <span class="power-stat-value text-success">1.45</span>
-            </div>
-            <div class="power-stat-item">
-              <span class="power-stat-label">月耗电</span>
-              <span class="power-stat-value">112,000 kWh</span>
-            </div>
-            <div class="power-stat-item">
-              <span class="power-stat-label">碳排放</span>
-              <span class="power-stat-value">78.4 吨</span>
-            </div>
-          </div>
-        </a-card>
-      </a-col>
-    </a-row>
-
-    <!-- 设备列表 -->
-    <a-card title="设备列表" :bordered="false">
-      <template #extra>
-        <a-select v-model="selectedType" placeholder="全部类型" style="width: 150px">
-          <a-option value="">全部类型</a-option>
-          <a-option value="温度">温度传感器</a-option>
-          <a-option value="湿度">湿度传感器</a-option>
-          <a-option value="UPS">UPS</a-option>
-          <a-option value="空调">空调</a-option>
-          <a-option value="配电">配电</a-option>
-        </a-select>
-      </template>
-      <a-table
-        :data="filteredDevices"
-        :columns="columns"
-        :loading="loading"
-        :pagination="false"
-        row-key="name"
-      >
-        <!-- 状态列 -->
-        <template #status="{ record }">
-          <a-tag :color="getStatusColor(record.statusValue)" bordered>
-            {{ record.statusText }}
-          </a-tag>
-        </template>
-      </a-table>
-    </a-card>
+          <template #response_time="{ record }">
+            {{
+              record.response_time != null && record.response_time !== undefined
+                ? Number(record.response_time).toFixed(1)
+                : '-'
+            }}
+          </template>
+          <template #continuous_errors="{ record }">
+            {{ record.continuous_errors != null ? record.continuous_errors : '-' }}
+          </template>
+        </a-table>
+      </a-card>
+    </a-spin>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { Message } from '@arco-design/web-vue'
 import {
-  IconThermometer,
-  IconDroplet,
-  IconPlug,
-  IconAirConditioning,
+  IconBuildingCommunity,
   IconCircleCheck,
-  IconBolt,
-  IconChartBar,
+  IconActivity,
+  IconAlertCircle,
 } from '@tabler/icons-vue'
-import Chart from '@/components/chart/index.vue'
 import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
+import { fetchRoomOptions, type RoomOptionItem } from '@/api/ops/room'
+import {
+  fetchRoomDeviceList,
+  fetchLatestMetrics,
+  DEVICE_CATEGORY_MAP,
+  DEVICE_CATEGORY_OPTIONS,
+  type RoomDeviceItem,
+  type MetricItem,
+} from '@/api/ops/room-device'
+
+const METRICS_CARD_LIMIT = 8
+const LIST_PAGE_SIZE = 100
+const METRICS_CONCURRENCY = 6
+
+const roomOptionsLoading = ref(false)
+const roomOptions = ref<RoomOptionItem[]>([])
+const selectedRoomId = ref<number | undefined>(undefined)
 
-// 加载状态
 const loading = ref(false)
-const selectedType = ref('')
+const devicesAll = ref<RoomDeviceItem[]>([])
+const deviceTotal = ref(0)
+const selectedCategory = ref<string | undefined>(undefined)
 
-// UPS数据
-const upsList = ref([
-  {
-    name: 'UPS-01',
-    load: '62%',
-    loadPercent: 62,
-    battery: '100%',
-    backup: '45分钟',
-  },
-  {
-    name: 'UPS-02',
-    load: '58%',
-    loadPercent: 58,
-    battery: '100%',
-    backup: '52分钟',
-  },
-])
+const metricsByIdentity = ref<Record<string, MetricItem[]>>({})
+const metricsLoading = ref(false)
 
-// 空调数据
-const acList = ref([
-  { name: '空调-01', status: 'online', temp: '22°C', humidity: '45%', mode: '制冷' },
-  { name: '空调-02', status: 'offline', temp: '-', humidity: '-', mode: '维护' },
-  { name: '空调-03', status: 'online', temp: '21°C', humidity: '46%', mode: '制冷' },
-  { name: '空调-04', status: 'online', temp: '22°C', humidity: '44%', mode: '待机' },
-])
+const tablePagination = ref({
+  current: 1,
+  pageSize: 20,
+  total: 0,
+  showTotal: true,
+  showPageSize: true,
+})
 
-// 表格列配置
 const columns: TableColumnData[] = [
-  {
-    title: '设备名称',
-    dataIndex: 'name',
-    width: 200,
-  },
-  {
-    title: '类型',
-    dataIndex: 'type',
-    width: 100,
-  },
-  {
-    title: '位置',
-    dataIndex: 'location',
-    width: 150,
-  },
-  {
-    title: '状态',
-    dataIndex: 'status',
-    slotName: 'status',
-    width: 100,
-    align: 'center',
-  },
-  {
-    title: '当前值',
-    dataIndex: 'value',
-    width: 120,
-  },
-  {
-    title: '阈值',
-    dataIndex: 'threshold',
-    width: 120,
-  },
-  {
-    title: '趋势/备注',
-    dataIndex: 'trend',
-    width: 150,
-  },
+  { title: '名称', dataIndex: 'name', width: 180, ellipsis: true, tooltip: true },
+  { title: '设备分类', dataIndex: 'device_category', slotName: 'device_category', width: 100 },
+  { title: '类型/型号', dataIndex: 'type', width: 120, ellipsis: true, tooltip: true },
+  { title: '采集方式', dataIndex: 'collect_method', slotName: 'collect_method', width: 96 },
+  { title: '启用 / 周期采集', dataIndex: 'enabled', slotName: 'enabled_collect', width: 160 },
+  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100, align: 'center' },
+  { title: '最近检查', dataIndex: 'last_check_time', width: 168, ellipsis: true, tooltip: true },
+  { title: '响应(ms)', dataIndex: 'response_time', slotName: 'response_time', width: 88 },
+  { title: '连续错误', dataIndex: 'continuous_errors', slotName: 'continuous_errors', width: 88 },
+  { title: '采集摘要', dataIndex: 'collect_last_result', slotName: 'collect_last_result', minWidth: 200 },
 ]
 
-// 设备数据
-const environmentDevices = ref([
-  {
-    name: '机房A-温度传感器-01',
-    type: '温度',
-    location: '机柜A1-顶部',
-    statusValue: 'success',
-    statusText: '正常',
-    value: '23.5°C',
-    threshold: '18-28°C',
-    trend: '+0.2°C/h',
-  },
-  {
-    name: '机房A-温度传感器-02',
-    type: '温度',
-    location: '机柜A2-顶部',
-    statusValue: 'warning',
-    statusText: '偏高',
-    value: '27.8°C',
-    threshold: '18-28°C',
-    trend: '+0.5°C/h',
-  },
-  {
-    name: '机房A-湿度传感器-01',
-    type: '湿度',
-    location: '机柜A1-中部',
-    statusValue: 'success',
-    statusText: '正常',
-    value: '45%',
-    threshold: '40-60%',
-    trend: '稳定',
-  },
-  {
-    name: 'UPS-01',
-    type: 'UPS',
-    location: '机房A-配电间',
-    statusValue: 'online',
-    statusText: '在线',
-    value: '负载 62%',
-    threshold: '< 80%',
-    trend: '电池 100%',
-  },
-  {
-    name: 'UPS-02',
-    type: 'UPS',
-    location: '机房B-配电间',
-    statusValue: 'online',
-    statusText: '在线',
-    value: '负载 58%',
-    threshold: '< 80%',
-    trend: '电池 100%',
-  },
-  {
-    name: '精密空调-01',
-    type: '空调',
-    location: '机房A-西侧',
-    statusValue: 'online',
-    statusText: '在线',
-    value: '制冷中',
-    threshold: '-',
-    trend: '送风 22°C',
-  },
-  {
-    name: '精密空调-02',
-    type: '空调',
-    location: '机房A-东侧',
-    statusValue: 'offline',
-    statusText: '维护',
-    value: '-',
-    threshold: '-',
-    trend: '-',
-  },
-  {
-    name: 'PDU-01',
-    type: '配电',
-    location: '机柜A1',
-    statusValue: 'success',
-    statusText: '正常',
-    value: '12.5 kW',
-    threshold: '< 20 kW',
-    trend: '电流 18.2A',
-  },
-])
-
-// 过滤后的设备列表
-const filteredDevices = computed(() => {
-  if (!selectedType.value) {
-    return environmentDevices.value
+const statsPartialHint = computed(() => {
+  if (!selectedRoomId.value || !deviceTotal.value) return ''
+  if (deviceTotal.value > devicesAll.value.length) {
+    return `离线等汇总基于已加载的 ${devicesAll.value.length} 条，设备总数为 ${deviceTotal.value}。`
   }
-  return environmentDevices.value.filter((device) => device.type === selectedType.value)
+  return ''
 })
 
-// 温湿度趋势图表配置
-const tempChartOptions = ref({
-  tooltip: {
-    trigger: 'axis',
-  },
-  grid: {
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true,
-  },
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
-  },
-  yAxis: [
-    {
-      type: 'value',
-      name: '温度°C',
-      position: 'left',
-    },
-    {
-      type: 'value',
-      name: '湿度%',
-      position: 'right',
-    },
-  ],
-  series: [
-    {
-      name: '温度',
-      type: 'line',
-      smooth: true,
-      data: [22.5, 22.0, 23.5, 25.0, 26.5, 24.5, 23.0],
-      areaStyle: {
-        opacity: 0.1,
-      },
-      lineStyle: {
-        width: 2,
-        color: '#165DFF',
-      },
-      itemStyle: {
-        color: '#165DFF',
-      },
-    },
-    {
-      name: '湿度',
-      type: 'line',
-      smooth: true,
-      yAxisIndex: 1,
-      data: [45, 44, 46, 48, 50, 47, 45],
-      areaStyle: {
-        opacity: 0.1,
-      },
-      lineStyle: {
-        width: 2,
-        color: '#14C9C9',
-      },
-      itemStyle: {
-        color: '#14C9C9',
-      },
-    },
-  ],
+const summaryOnline = computed(() => devicesAll.value.filter((d) => d.status === 'online').length)
+const summaryCollectOn = computed(() => devicesAll.value.filter((d) => d.enabled && d.collect_on).length)
+const summaryOfflineUnknown = computed(
+  () => devicesAll.value.filter((d) => d.status !== 'online').length
+)
+
+const devicesForCards = computed(() => devicesAll.value)
+
+const deviceCardsHint = computed(() => {
+  if (!devicesAll.value.length) return ''
+  const n = devicesAll.value.length
+  if (n > METRICS_CARD_LIMIT) {
+    return `以下为 ${n} 台设备卡片；最新指标仅拉取前 ${METRICS_CARD_LIMIT} 台，其余请见列表或详情。`
+  }
+  return ''
 })
 
-// 获取状态颜色
-const getStatusColor = (status: string) => {
+const filteredTableDevices = computed(() => {
+  const cat = selectedCategory.value
+  if (!cat) return devicesAll.value
+  return devicesAll.value.filter((d) => d.device_category === cat)
+})
+
+const tableRowsPaged = computed(() => {
+  const list = filteredTableDevices.value
+  const { current, pageSize } = tablePagination.value
+  const start = (current - 1) * pageSize
+  return list.slice(start, start + pageSize)
+})
+
+watch(filteredTableDevices, (list) => {
+  tablePagination.value.total = list.length
+  const maxPage = Math.max(1, Math.ceil(list.length / tablePagination.value.pageSize) || 1)
+  if (tablePagination.value.current > maxPage) {
+    tablePagination.value.current = 1
+  }
+})
+
+watch(selectedCategory, () => {
+  tablePagination.value.current = 1
+})
+
+function onTablePageChange(current: number) {
+  tablePagination.value.current = current
+}
+
+function onTablePageSizeChange(size: number) {
+  tablePagination.value.pageSize = size
+  tablePagination.value.current = 1
+}
+
+function truncate(s: string, max: number) {
+  if (!s || s.length <= max) return s
+  return `${s.slice(0, max)}…`
+}
+
+function formatDateTime(v?: string) {
+  if (!v) return '-'
+  const d = new Date(v)
+  if (Number.isNaN(d.getTime())) return v
+  const p = (n: number) => String(n).padStart(2, '0')
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
+}
+
+function formatStatusText(status: string) {
+  const m: Record<string, string> = {
+    online: '在线',
+    offline: '离线',
+    unknown: '未知',
+  }
+  return m[status] || status || '-'
+}
+
+function getStatusColor(status: string) {
   const colorMap: Record<string, string> = {
     online: 'green',
-    offline: 'gray',
+    offline: 'red',
+    unknown: 'gray',
     warning: 'orange',
     success: 'green',
   }
   return colorMap[status] || 'gray'
 }
 
-// 获取数据
-const fetchData = async () => {
-  // TODO: 从API获取数据
-  loading.value = false
+function isMetricsTarget(d: RoomDeviceItem) {
+  const targets = devicesAll.value.slice(0, METRICS_CARD_LIMIT).map((x) => x.service_identity)
+  return targets.includes(d.service_identity)
 }
 
-// 初始化
-onMounted(() => {
-  fetchData()
+function metricsForDevice(d: RoomDeviceItem): MetricItem[] {
+  return metricsByIdentity.value[d.service_identity] || []
+}
+
+async function loadRoomOptions() {
+  roomOptionsLoading.value = true
+  try {
+    const res: any = await fetchRoomOptions()
+    let list: RoomOptionItem[] = []
+    if (Array.isArray(res)) {
+      list = res
+    } else if (res?.details) {
+      list = Array.isArray(res.details) ? res.details : res.details.data || []
+    } else {
+      list = res?.data ?? []
+    }
+    roomOptions.value = Array.isArray(list) ? list : []
+    if (selectedRoomId.value === undefined && roomOptions.value.length > 0) {
+      selectedRoomId.value = roomOptions.value[0].id
+    }
+  } catch (e) {
+    console.error(e)
+    Message.error('加载机房列表失败')
+    roomOptions.value = []
+  } finally {
+    roomOptionsLoading.value = false
+  }
+}
+
+async function loadRoomDevices() {
+  if (!selectedRoomId.value) {
+    devicesAll.value = []
+    deviceTotal.value = 0
+    metricsByIdentity.value = {}
+    return
+  }
+  loading.value = true
+  metricsByIdentity.value = {}
+  try {
+    const res: any = await fetchRoomDeviceList({
+      room_id: String(selectedRoomId.value),
+      page: 1,
+      size: LIST_PAGE_SIZE,
+    })
+    const page = res?.details ?? res
+    const list: RoomDeviceItem[] = page?.data ?? []
+    devicesAll.value = list
+    deviceTotal.value = page?.total ?? list.length
+    if (res?.code !== undefined && res.code !== 0) {
+      Message.error(res.message || '加载机房设备失败')
+    }
+  } catch (e) {
+    console.error(e)
+    Message.error('加载机房设备失败')
+    devicesAll.value = []
+    deviceTotal.value = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadMetricsForFirstDevices() {
+  const slice = devicesAll.value.slice(0, METRICS_CARD_LIMIT)
+  if (!slice.length) return
+  metricsLoading.value = true
+  try {
+    for (let i = 0; i < slice.length; i += METRICS_CONCURRENCY) {
+      const batch = slice.slice(i, i + METRICS_CONCURRENCY)
+      await Promise.all(
+        batch.map(async (d) => {
+          try {
+            const res = await fetchLatestMetrics(d.service_identity)
+            const metrics =
+              res?.code === 0 && res.details?.metrics && Array.isArray(res.details.metrics)
+                ? res.details.metrics
+                : []
+            metricsByIdentity.value = { ...metricsByIdentity.value, [d.service_identity]: metrics }
+          } catch {
+            metricsByIdentity.value = { ...metricsByIdentity.value, [d.service_identity]: [] }
+          }
+        })
+      )
+    }
+  } finally {
+    metricsLoading.value = false
+  }
+}
+
+async function reloadRoomData() {
+  await loadRoomDevices()
+  await loadMetricsForFirstDevices()
+}
+
+function onRoomChange() {
+  selectedCategory.value = undefined
+  tablePagination.value.current = 1
+  metricsByIdentity.value = {}
+  void reloadRoomData()
+}
+
+onMounted(async () => {
+  await loadRoomOptions()
+  if (selectedRoomId.value) {
+    await reloadRoomData()
+  }
 })
 </script>
 
@@ -554,10 +469,59 @@ export default {
   padding: 16px;
 }
 
+.page-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.toolbar-label {
+  font-size: 14px;
+  color: var(--color-text-2);
+  white-space: nowrap;
+}
+
+.room-select {
+  min-width: 220px;
+  max-width: 360px;
+}
+
+.room-option-code {
+  margin-left: 8px;
+  font-size: 12px;
+}
+
+.toolbar-meta {
+  font-size: 12px;
+}
+
+.global-hint {
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+
+.device-cards-hint {
+  margin-bottom: 8px;
+  font-size: 12px;
+}
+
 .stats-row {
   margin-bottom: 16px;
 }
 
+.device-cards-row {
+  margin-bottom: 16px;
+}
+
 .stats-card {
   height: 100%;
 
@@ -578,7 +542,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 24px;
+    flex-shrink: 0;
 
     &-primary {
       background-color: rgba(22, 93, 255, 0.1);
@@ -603,6 +567,7 @@ export default {
 
   .stats-info {
     flex: 1;
+    min-width: 0;
   }
 
   .stats-title {
@@ -625,246 +590,83 @@ export default {
   }
 }
 
-.chart-row {
-  margin-bottom: 16px;
-
-  :deep(.arco-card) {
-    height: 100%;
-  }
+.device-card {
+  height: 100%;
+  margin-bottom: 0;
 
   :deep(.arco-card-body) {
-    height: calc(100% - 57px);
-    display: flex;
-    flex-direction: column;
+    padding: 14px;
   }
 }
 
-.chart-container {
-  height: 280px;
-  flex: 1;
-}
-
-.legend-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  color: var(--color-text-3);
-}
-
-.legend-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-
-  &-1 {
-    background-color: #165dff;
-  }
-
-  &-2 {
-    background-color: #14c9c9;
-  }
-}
-
-.ups-list {
-  padding: 8px 0;
-  height: 280px;
-  display: flex;
-  flex-direction: column;
-}
-
-.ups-item {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 20px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.ups-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 8px;
-  background-color: rgba(0, 180, 42, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .battery-icon {
-    font-size: 24px;
-    color: rgb(var(--success-6));
-  }
-}
-
-.ups-info {
-  flex: 1;
-}
-
-.ups-header {
+.device-card-head {
   display: flex;
+  align-items: flex-start;
   justify-content: space-between;
-  align-items: center;
-  margin-bottom: 4px;
-}
-
-.ups-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text-1);
-}
-
-.ups-details {
-  display: flex;
-  gap: 16px;
-  font-size: 12px;
-  color: var(--color-text-3);
+  gap: 8px;
   margin-bottom: 8px;
 }
 
-.ups-progress {
-  width: 100%;
+.device-card-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-1);
+  line-height: 1.4;
+  flex: 1;
+  min-width: 0;
 }
 
-.ac-list {
-  padding: 8px 0;
-  height: 280px;
-  display: flex;
-  flex-direction: column;
+.device-card-meta {
+  font-size: 12px;
+  margin-bottom: 6px;
 }
 
-.ac-item {
+.ml-8 {
+  margin-left: 8px;
+}
+
+.device-card-result {
+  font-size: 12px;
+  line-height: 1.4;
+  word-break: break-all;
+}
+
+.device-metrics {
+  min-height: 48px;
+}
+
+.metric-line {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  padding: 12px 0;
-  border-bottom: 1px solid var(--color-border-1);
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.ac-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.ac-icon {
-  font-size: 16px;
-  color: rgb(var(--success-6));
-
-  &.ac-icon-offline {
-    color: var(--color-text-3);
-  }
-}
-
-.ac-name {
-  font-size: 14px;
-  color: var(--color-text-1);
-}
-
-.ac-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.ac-temp,
-.ac-humidity {
+  gap: 8px;
   font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.metric-name {
   color: var(--color-text-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 55%;
 }
 
-.power-row {
-  margin-bottom: 16px;
+.metric-val {
+  color: var(--color-text-1);
+  font-weight: 500;
+  flex-shrink: 0;
 }
 
-.power-card {
-  height: 100%;
+.table-card {
+  margin-top: 8px;
 
-  :deep(.arco-card-body) {
-    padding: 16px;
-  }
-
-  .power-header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 16px;
-  }
-
-  .power-icon {
-    width: 40px;
-    height: 40px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-
-    &-primary {
-      background-color: rgba(22, 93, 255, 0.1);
-      color: rgb(var(--primary-6));
-    }
-
-    &-success {
-      background-color: rgba(0, 180, 42, 0.1);
-      color: rgb(var(--success-6));
-    }
-  }
-
-  .power-info {
-    flex: 1;
-  }
-
-  .power-title {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-text-1);
-  }
-
-  .power-desc {
-    font-size: 12px;
-    color: var(--color-text-3);
-  }
-
-  .power-stats {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .power-stat-item {
-    display: flex;
-    justify-content: space-between;
+  :deep(.arco-card-header) {
     align-items: center;
   }
-
-  .power-stat-label {
-    font-size: 13px;
-    color: var(--color-text-3);
-  }
-
-  .power-stat-value {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--color-text-1);
-  }
-}
-
-.text-danger {
-  color: rgb(var(--danger-6));
-}
-
-.text-success {
-  color: rgb(var(--success-6));
 }
 
 .text-muted {
   font-size: 12px;
   color: var(--color-text-3);
 }
-</style>
\ No newline at end of file
+</style>