feat

src/views/ops/pages/monitor/host-hardware/index.vue

@@ -25,9 +25,7 @@
           </a-option>
         </a-select>
       </div>
-      <div v-if="activeServer" class="toolbar-meta text-muted">
+      <div v-if="activeServer" class="toolbar-meta text-muted">{{ activeServer.os }} · {{ activeServer.location }}</div>
-        {{ activeServer.os }} · {{ activeServer.location }}
-      </div>
     </div>
 
     <a-spin :loading="loading" style="width: 100%">
@@ -44,12 +42,7 @@
       </div>
 
       <template v-else>
-        <a-alert
+        <a-alert v-if="statusSnapshot?.error_message" type="warning" :title="statusSnapshot.error_message" style="margin-bottom: 16px" />
-          v-if="statusSnapshot?.error_message"
-          type="warning"
-          :title="statusSnapshot.error_message"
-          style="margin-bottom: 16px"
-        />
 
         <a-card title="带外设备与采集摘要" :bordered="false" class="hw-card">
           <a-descriptions :column="{ xs: 1, sm: 2, md: 3 }" size="small" layout="horizontal">
@@ -126,21 +119,8 @@
         </a-card>
 
         <template v-if="groupedMetrics.length">
-          <a-card
+          <a-card v-for="g in groupedMetrics" :key="g.type" :title="g.title" :bordered="false" class="hw-card">
-            v-for="g in groupedMetrics"
+            <a-table :columns="metricColumns" :data="g.rows" :pagination="false" row-key="__key" size="small" :bordered="{ cell: true }">
-            :key="g.type"
-            :title="g.title"
-            :bordered="false"
-            class="hw-card"
-          >
-            <a-table
-              :columns="metricColumns"
-              :data="g.rows"
-              :pagination="false"
-              row-key="__key"
-              size="small"
-              :bordered="{ cell: true }"
-            >
               <template #status="{ record }">
                 <a-tag size="small" :color="healthColor(record.status)">
                   {{ record.status || '—' }}
@@ -164,7 +144,7 @@
             />
             <span class="text-muted">默认最近 24 小时</span>
           </div>
-          <a-spin :loading="historyLoading">
+          <a-spin :loading="historyLoading" style="width: 100%;">
             <div class="hw-chart-wrap">
               <Chart v-if="historyChartOptions" :options="historyChartOptions" height="280px"/>
               <a-empty v-else description="暂无曲线数据" />
@@ -231,9 +211,7 @@ const historyChartOptions = ref<Record<string, unknown> | null>(null)
 const serverOptions = ref<ServerOption[]>([])
 const selectedServerIdentity = ref<string | undefined>(undefined)
 
-const activeServer = computed(() =>
+const activeServer = computed(() => serverOptions.value.find((s) => s.server_identity === selectedServerIdentity.value))
-  serverOptions.value.find((s) => s.server_identity === selectedServerIdentity.value),
-)
 
 /** 与 hardware_devices.type 一致：server/switch/storage 等 */
 function deviceTypeLabel(t?: string) {
@@ -253,7 +231,7 @@ const deviceId = computed(() => collection.value?.device_id ?? '')
 const timescaledb = computed(() => collection.value?.timescaledb === true)
 
 const normalizedMetrics = computed<NormalizedHostHardwareMetric[]>(() =>
-  normalizeHostHardwareMetrics(statusSnapshot.value, collection.value?.metrics),
+  normalizeHostHardwareMetrics(statusSnapshot.value, collection.value?.metrics)
 )
 
 const metricNameOptions = computed(() => {
@@ -297,17 +275,7 @@ const subStatusItems = computed(() => {
   }))
 })
 
-const GROUP_ORDER = [
+const GROUP_ORDER = ['temperature', 'fan_speed', 'voltage', 'current', 'power', 'power_status', 'network', 'system', 'uptime']
-  'temperature',
-  'fan_speed',
-  'voltage',
-  'current',
-  'power',
-  'power_status',
-  'network',
-  'system',
-  'uptime',
-]
 
 function groupTitle(t: string): string {
   const map: Record<string, string> = {
@@ -523,7 +491,9 @@ async function loadHostHardware() {
     }
     const names = [
       ...new Set(
-        normalizeHostHardwareMetrics(data.status, data.metrics).map((m) => m.name).filter(Boolean),
+        normalizeHostHardwareMetrics(data.status, data.metrics)
+          .map((m) => m.name)
+          .filter(Boolean)
       ),
     ]
     selectedMetricName.value = names.sort()[0] || ''
@@ -564,10 +534,7 @@ async function loadServerOptions() {
       os: [r.os, r.os_version].filter(Boolean).join(' ') || '-',
       location: r.location || '-',
     }))
-    if (
+    if (selectedServerIdentity.value && !serverOptions.value.some((s) => s.server_identity === selectedServerIdentity.value)) {
-      selectedServerIdentity.value &&
-      !serverOptions.value.some((s) => s.server_identity === selectedServerIdentity.value)
-    ) {
       selectedServerIdentity.value = undefined
     }
     if (!selectedServerIdentity.value && serverOptions.value.length > 0) {
@@ -586,7 +553,7 @@ watch(
   () => {
     loadHostHardware()
   },
-  { immediate: true },
+  { immediate: true }
 )
 
 watch([selectedMetricName, timescaledb, deviceId], () => {
@@ -714,6 +681,7 @@ export default {
 }
 
 .hw-chart-wrap {
+  width: 100%;
   min-height: 280px;
 }