From bde469485f0c663c7a8c90a07ba0b2b9066a017e Mon Sep 17 00:00:00 2001
From: haoliang <821644@qq.com>
Date: Wed, 13 May 2026 12:44:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E9=80=A0(=E8=AE=BE=E5=A4=87=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85):=20=E5=AE=9E=E6=97=B6=E7=8A=B6=E6=80=81=E5=8C=BA?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BAel-table=E5=B1=95=E7=A4=BA6=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E5=90=84=E8=87=AA=E9=87=87=E9=9B=86=E6=97=B6=E9=97=B4(Relative?=
 =?UTF-8?q?Time=E7=BB=84=E4=BB=B6)=EF=BC=8C=E9=87=87=E9=9B=86=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E6=94=AF=E6=8C=81=E6=97=A5=E6=9C=9F=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=EF=BC=8C=E6=96=B0=E5=A2=9E30=E7=A7=92latest-tags=E8=BD=AE?=
 =?UTF-8?q?=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/machine/MachineDetailPage.vue   | 63 +++++++++++++++----
 1 file changed, 51 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/machine/MachineDetailPage.vue b/frontend/src/views/machine/MachineDetailPage.vue
index 11cafa2..85e2cc7 100644
--- a/frontend/src/views/machine/MachineDetailPage.vue
+++ b/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>