微调

frontend/src/views/machine/sntp/index.vue

@@ -28,24 +28,32 @@
             <div class="history-section">
                 <div class="history-header">
                     <span class="history-title">历史记录</span>
-                    <el-button link :disabled="historyList.length === 0" @click="clearHistory">清空</el-button>
+                    <el-button
+                        plain
+                        type="danger"
+                        :disabled="historyList.length === 0"
+                        @click="clearHistory"
+                    >
+                        清空
+                    </el-button>
                 </div>
 
-                <div v-if="historyList.length === 0" class="history-empty">
+                <div class="history-table">
-                    <span>暂无数据</span>
-                </div>
-
-                <div v-else class="history-table">
                     <div class="history-table__head history-row">
                         <div class="col-order">序号</div>
                         <div>当前电脑时间</div>
                         <div>装置返回时间</div>
+                        <div>误差（ms）</div>
                     </div>
-                    <div class="history-table__body">
+                    <div v-if="historyList.length === 0" class="history-empty">
+                        <span>暂无数据</span>
+                    </div>
+                    <div v-else class="history-table__body">
                         <div v-for="(item, index) in historyList" :key="item.id" class="history-row">
                             <div class="col-order">{{ index + 1 }}</div>
                             <div>{{ item.computerTime }}</div>
                             <div>{{ item.deviceTime }}</div>
+                            <div>{{ formatErrorMs(item.errorMs) }}</div>
                         </div>
                     </div>
                 </div>
@@ -56,6 +64,7 @@
 
 <script setup lang="ts" name="sntp">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { Delete } from '@element-plus/icons-vue'
 import socketClient from '@/utils/webSocketClient'
 import { startSntpService, stopSntpService } from '@/api/system/sntp'
 
@@ -63,12 +72,18 @@ interface SntpTimeMessage {
     type: string
     computerTime?: string
     deviceTime?: string
+    computerTimestampMs?: number
+    deviceTimestampMs?: number
+    errorMs?: number
 }
 
 interface SntpHistoryItem {
     id: string
     computerTime: string
     deviceTime: string
+    computerTimestampMs: number | null
+    deviceTimestampMs: number | null
+    errorMs: number | null
 }
 
 defineOptions({
@@ -89,11 +104,30 @@ const historyList = ref<SntpHistoryItem[]>([])
 const computerTime = computed(() => computerTimeValue.value)
 const deviceTime = computed(() => deviceTimeValue.value)
 
-const appendHistory = (computerTimeText: string, deviceTimeText: string) => {
+const formatErrorMs = (errorMs: number | null) => {
+    if (errorMs === null || Number.isNaN(errorMs))
+        return '--'
+
+    if (errorMs > 0)
+        return `+${errorMs}`
+
+    return `${errorMs}`
+}
+
+const appendHistory = (
+    computerTimeText: string,
+    deviceTimeText: string,
+    computerTimestampMs: number | null,
+    deviceTimestampMs: number | null,
+    errorMs: number | null
+) => {
     const nextItem: SntpHistoryItem = {
         id: `${Date.now()}_${Math.random().toString(16).slice(2, 8)}`,
         computerTime: computerTimeText,
-        deviceTime: deviceTimeText
+        deviceTime: deviceTimeText,
+        computerTimestampMs,
+        deviceTimestampMs,
+        errorMs
     }
     historyList.value = [nextItem, ...historyList.value].slice(0, maxHistoryCount)
 }
@@ -101,9 +135,18 @@ const appendHistory = (computerTimeText: string, deviceTimeText: string) => {
 const handleTimeUpdate = (message: SntpTimeMessage) => {
     const nextComputerTime = message.computerTime || '--'
     const nextDeviceTime = message.deviceTime || '--'
+    const nextComputerTimestampMs = typeof message.computerTimestampMs === 'number' ? message.computerTimestampMs : null
+    const nextDeviceTimestampMs = typeof message.deviceTimestampMs === 'number' ? message.deviceTimestampMs : null
+    const nextErrorMs = typeof message.errorMs === 'number' ? message.errorMs : null
     computerTimeValue.value = nextComputerTime
     deviceTimeValue.value = nextDeviceTime
-    appendHistory(nextComputerTime, nextDeviceTime)
+    appendHistory(
+        nextComputerTime,
+        nextDeviceTime,
+        nextComputerTimestampMs,
+        nextDeviceTimestampMs,
+        nextErrorMs
+    )
 }
 
 const ensureSocketConnection = () => {
@@ -257,7 +300,7 @@ onBeforeUnmount(() => {
 
 .history-row {
     display: grid;
-    grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr) 200px;
 }
 
 .history-row > div {