改造(设备详情): 实时状态区改为el-table展示6指标各自采集时间(RelativeTime组件)，采集记录支持日期筛选，新增30秒latest-tags轮询

frontend/src/views/machine/MachineDetailPage.vue

@@ -24,13 +24,15 @@
         </el-descriptions>
       </el-card></el-col>
       <el-col :span="12"><el-card shadow="hover"><template #header><span>实时状态</span></template>
-        <el-descriptions :column="2" border size="small">
-          <el-descriptions-item label="NC程序名">{{status.programName||'-'}}</el-descriptions-item>
-          <el-descriptions-item label="零件数">{{status.partCount??'-'}}</el-descriptions-item>
-          <el-descriptions-item label="累计总数">{{status.totalPartCount??'-'}}</el-descriptions-item>
-          <el-descriptions-item label="运行状态">{{status.runStatus||'-'}}</el-descriptions-item>
-          <el-descriptions-item label="操作模式">{{status.operationMode||'-'}}</el-descriptions-item>
-        </el-descriptions>
+        <el-table :data="latestTags" border stripe size="small">
+          <el-table-column prop="desc" label="指标" />
+          <el-table-column prop="value" label="数值" />
+          <el-table-column label="采集时间">
+            <template #default="{ row }">
+              <RelativeTime :time="row.collectTime" />
+            </template>
+          </el-table-column>
+        </el-table>
       </el-card></el-col>
     </el-row>
     <el-row :gutter="20" class="mt-20">
@@ -43,15 +45,26 @@
         <div ref="chartRef" style="height:250px"></div>
       </el-card></el-col>
     </el-row>
-    <el-card shadow="hover" class="mt-20"><template #header><span>最近采集记录</span></template>
+    <el-card shadow="hover" class="mt-20"><template #header>
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <span>最近采集记录</span>
+          <el-date-picker v-model="recordDate" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" size="small" @change="loadRecords" />
+        </div>
+      </template>
       <el-table :data="records" border stripe size="small">
-        <el-table-column prop="collectTime" label="采集时间"/><el-table-column prop="programName" label="程序名"/><el-table-column prop="partCount" label="零件数" align="center"/><el-table-column prop="runStatus" label="运行状态"/>
+        <el-table-column label="采集时间">
+          <template #default="{ row }">
+            <RelativeTime :time="row.collectTime" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="programName" label="程序名"/><el-table-column prop="partCount" label="零件数" align="center"/><el-table-column prop="runStatus" label="运行状态"/>
       </el-table>
     </el-card>
   </div>
 </template>
 <script setup lang="ts">
 import PageHeader from '@/components/PageHeader.vue'
+import RelativeTime from '@/components/RelativeTime.vue'
 import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
 import { useRoute } from 'vue-router'
 import request from '@/utils/request'
@@ -65,6 +78,8 @@ interface TodayProdRow { programName: string; quantity: number; runTime: number;
 interface CollectRecordRow { collectTime: string; programName: string; partCount: number; runStatus: string }
 /** 趋势数据项 */
 interface TrendItem { date: string; quantity: number }
+/** 最新标签项 */
+interface LatestTagItem { id: string; desc: string; value: string; collectTime: string }
 
 const route = useRoute()
 // Mock 模式路径前缀处理
@@ -76,21 +91,26 @@ const status = ref<MachineStatus>({} as MachineStatus)
 let statusInterval: number | undefined
 const todayProd = ref<TodayProdRow[]>([])
 const records = ref<CollectRecordRow[]>([])
+const latestTags = ref<LatestTagItem[]>([])
+const recordDate = ref(new Date().toISOString().slice(0, 10))
 const chartRef = ref<HTMLElement>()
 let chart: ECharts | null = null
+let latestTagsInterval: number | undefined
 
 async function loadData() {
   const id = route.params.id
-  const [d, s, t, r] = await Promise.all([
+  const [d, s, t, r, tags] = await Promise.all([
     request.get<Machine>(`/admin/machine/${id}`),
     request.get<MachineStatus>(`/admin/machine/${id}/status`),
     request.get<{ items: TodayProdRow[] }>(`/admin/machine/${id}/production/today`),
-    request.get<{ items: CollectRecordRow[] }>(`/admin/machine/${id}/collect-records`),
+    request.get<{ items: CollectRecordRow[] }>(`/admin/machine/${id}/collect-records?date=${recordDate.value}`),
+    request.get<{ items: LatestTagItem[] }>(`/admin/machine/${id}/latest-tags`),
   ])
   detail.value = d.data || {} as Machine
   status.value = s.data || {} as MachineStatus
   todayProd.value = t.data?.items || []
   records.value = r.data?.items || []
+  latestTags.value = tags.data?.items || []
   const trend = await request.get<{ items: TrendItem[] }>(`/admin/machine/${id}/production/trend`)
   await nextTick()
   if (chartRef.value) {
@@ -106,12 +126,31 @@ async function fetchStatus() {
   status.value = r.data || {} as MachineStatus
 }
 
+async function fetchLatestTags() {
+  const id = route.params.id
+  const r = await request.get<{ items: LatestTagItem[] }>(`/admin/machine/${id}/latest-tags`)
+  latestTags.value = r.data?.items || []
+}
+
+async function loadRecords() {
+  const id = route.params.id
+  const r = await request.get<{ items: CollectRecordRow[] }>(`/admin/machine/${id}/collect-records?date=${recordDate.value}`)
+  records.value = r.data?.items || []
+}
+
 onMounted(() => {
   loadData()
   // 启动实时状态轮询，每10秒刷新一次
   statusInterval = window.setInterval(fetchStatus, 10000)
+  // 每30秒刷新最新标签
+  latestTagsInterval = window.setInterval(fetchLatestTags, 30000)
   // 初次进入时也刷新一次状态，保证信息及时
   fetchStatus()
 })
-onBeforeUnmount(() => { chart?.dispose(); if (typeof statusInterval !== 'undefined') clearInterval(statusInterval) })
+
+onBeforeUnmount(() => {
+  chart?.dispose()
+  if (statusInterval !== undefined) clearInterval(statusInterval)
+  if (latestTagsInterval !== undefined) clearInterval(latestTagsInterval)
+})
 </script>