369 lines
8.8 KiB
Vue
369 lines
8.8 KiB
Vue
<template>
|
||
<div class="sntp-page">
|
||
<section class="sntp-panel">
|
||
<el-row :gutter="16" class="time-list">
|
||
<el-col :xs="24" :md="12">
|
||
<div class="time-item">
|
||
<div class="time-label">当前电脑时间</div>
|
||
<div class="time-content">{{ computerTime }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :md="12">
|
||
<div class="time-item">
|
||
<div class="time-label">装置返回时间</div>
|
||
<div class="time-content">{{ deviceTime }}</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<div class="action-row">
|
||
<el-button type="primary" :loading="starting" :disabled="running || stopping" @click="handleStart">
|
||
启动SNTP对时服务
|
||
</el-button>
|
||
<el-button type="danger" plain :loading="stopping" :disabled="!running || starting" @click="handleStop">
|
||
停止SNTP对时服务
|
||
</el-button>
|
||
</div>
|
||
|
||
<div class="history-section">
|
||
<div class="history-header">
|
||
<span class="history-title">历史记录</span>
|
||
<el-button
|
||
plain
|
||
type="danger"
|
||
:disabled="historyList.length === 0"
|
||
@click="clearHistory"
|
||
>
|
||
清空
|
||
</el-button>
|
||
</div>
|
||
|
||
<div class="history-table">
|
||
<div class="history-table__head history-row">
|
||
<div class="col-order">序号</div>
|
||
<div>当前电脑时间</div>
|
||
<div>装置返回时间</div>
|
||
<div>误差（ms）</div>
|
||
</div>
|
||
<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>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<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'
|
||
|
||
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({
|
||
name: 'sntp'
|
||
})
|
||
|
||
const messageType = 'sntp_time_update'
|
||
const maxHistoryCount = 50
|
||
|
||
const running = ref(false)
|
||
const starting = ref(false)
|
||
const stopping = ref(false)
|
||
|
||
const computerTimeValue = ref('--')
|
||
const deviceTimeValue = ref('--')
|
||
const historyList = ref<SntpHistoryItem[]>([])
|
||
|
||
const computerTime = computed(() => computerTimeValue.value)
|
||
const deviceTime = computed(() => deviceTimeValue.value)
|
||
|
||
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,
|
||
computerTimestampMs,
|
||
deviceTimestampMs,
|
||
errorMs
|
||
}
|
||
historyList.value = [nextItem, ...historyList.value].slice(0, maxHistoryCount)
|
||
}
|
||
|
||
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,
|
||
nextComputerTimestampMs,
|
||
nextDeviceTimestampMs,
|
||
nextErrorMs
|
||
)
|
||
}
|
||
|
||
const ensureSocketConnection = () => {
|
||
socketClient.Instance.connect()
|
||
socketClient.Instance.registerCallBack(messageType, (message: SntpTimeMessage) => {
|
||
handleTimeUpdate(message)
|
||
})
|
||
}
|
||
|
||
const clearHistory = () => {
|
||
historyList.value = []
|
||
}
|
||
|
||
const handleStart = async () => {
|
||
starting.value = true
|
||
try {
|
||
await startSntpService()
|
||
running.value = true
|
||
} finally {
|
||
starting.value = false
|
||
}
|
||
}
|
||
|
||
const handleStop = async () => {
|
||
stopping.value = true
|
||
try {
|
||
await stopSntpService()
|
||
running.value = false
|
||
} finally {
|
||
stopping.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
ensureSocketConnection()
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
socketClient.Instance.unRegisterCallBack(messageType)
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.sntp-page {
|
||
height: 100%;
|
||
min-height: 100%;
|
||
padding: 16px;
|
||
background: #f5f7fa;
|
||
display: flex;
|
||
}
|
||
|
||
.sntp-panel {
|
||
flex: 1;
|
||
min-height: 0;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.time-list {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.time-item {
|
||
min-height: 168px;
|
||
padding: 18px 20px;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 8px;
|
||
background: #ffffff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.time-label {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
}
|
||
|
||
.time-content {
|
||
font-size: 26px;
|
||
line-height: 1.35;
|
||
color: #303133;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.action-row {
|
||
display: flex;
|
||
gap: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.history-section {
|
||
flex: 1;
|
||
min-height: 0;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.history-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 14px 16px;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
background: #fafafa;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.history-title {
|
||
font-size: 14px;
|
||
color: #303133;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.history-empty {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #909399;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.history-table {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.history-table__head {
|
||
background: #fafafa;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.history-table__body {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: auto;
|
||
}
|
||
|
||
.history-row {
|
||
display: grid;
|
||
grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr) 200px;
|
||
}
|
||
|
||
.history-row > div {
|
||
padding: 14px 16px;
|
||
border-bottom: 1px solid #f0f2f5;
|
||
color: #303133;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.history-row > div + div {
|
||
border-left: 1px solid #f0f2f5;
|
||
}
|
||
|
||
.history-table__head > div {
|
||
font-size: 13px;
|
||
color: #606266;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.history-table__body .history-row:last-child > div {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.col-order {
|
||
text-align: center;
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.sntp-page {
|
||
padding: 12px;
|
||
}
|
||
|
||
.sntp-panel {
|
||
padding: 16px;
|
||
gap: 16px;
|
||
}
|
||
|
||
.time-item {
|
||
min-height: 132px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.time-content {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.action-row {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.history-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.history-row > div + div {
|
||
border-left: none;
|
||
border-top: 1px solid #f0f2f5;
|
||
}
|
||
|
||
.col-order {
|
||
text-align: left;
|
||
}
|
||
}
|
||
</style>
|