From 6937c5bfdd2101008e6646bd9f69b107b5a8f4c0 Mon Sep 17 00:00:00 2001
From: jingna <1264204245@qq.com>
Date: Fri, 26 Jun 2026 17:48:00 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E8=AE=AF=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/platform.ts                  |  15 +-
 frontend/src/layout/components/header.vue     |  80 +++-
 frontend/src/types/platform.ts                |   8 +-
 .../src/views/communicationSetting/index.vue  | 384 +++++++++++-------
 frontend/src/views/timeSetting/index.vue      |  20 +-
 5 files changed, 334 insertions(+), 173 deletions(-)

diff --git a/frontend/src/api/platform.ts b/frontend/src/api/platform.ts
index 306d682..0ac11de 100644
--- a/frontend/src/api/platform.ts
+++ b/frontend/src/api/platform.ts
@@ -9,6 +9,7 @@ import type {
   LineAlarmSettingPayload,
   RealtimeData,
   SystemConfigPayload,
+  FullDeviceConfig,
 } from '../types/platform'
 
 export async function fetchRealtimeData(): Promise<RealtimeData> {
@@ -77,10 +78,20 @@ export async function saveDeviceNetConfig(payload: { nic: string; ip: string; ma
   const response = await http.post<ApiResponse<{ send_status: string }>>('/config/device/net', payload)
   return response.data
 }
-export async function saveDevicePortConfig(payload: { port: string; ip: string; mask: string; gateway: string; protocol: string }): Promise<ApiResponse<{ send_status: string }>> {
-  const response = await http.post<ApiResponse<{ send_status: string }>>('/config/device/uart', payload)
+export async function saveDevicePortConfig(
+  payload: FullDeviceConfig
+): Promise<ApiResponse<{ send_status: string }>> {
+  const response = await http.post<ApiResponse<{ send_status: string }>>(
+    '/config/device',
+    payload
+  )
   return response.data
 }
+export async function getDeviceNetConfig(): Promise<DeviceConfigPayload[]> {
+  const response = await http.get<ApiResponse<DeviceConfigPayload[]>>(`/config/device`)
+  return response.data.data
+}
+
 export async function saveChannelConfig(
   payload: ChannelConfigPayload,
 ): Promise<ApiResponse<{ save_path: string; send_status: string }>> {
diff --git a/frontend/src/layout/components/header.vue b/frontend/src/layout/components/header.vue
index ff0046e..e717f5d 100644
--- a/frontend/src/layout/components/header.vue
+++ b/frontend/src/layout/components/header.vue
@@ -1,25 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
 import { fetchDeviceStatus } from '@/api/platform'
+import { connectTimeSync } from '@/websocket/client'
 const time = ref('')
 const date = ref('')
 const day = ref('')
 const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
-const updateTime = () => {
-    const now = new Date()
-    const hours = now.getHours().toString().padStart(2, '0')
-    const minutes = now.getMinutes().toString().padStart(2, '0')
-    const seconds = now.getSeconds().toString().padStart(2, '0')
-    const year = now.getFullYear()
-    const month = (now.getMonth() + 1).toString().padStart(2, '0')
-    const dayOfMonth = now.getDate().toString().padStart(2, '0')
-
-    time.value = `${hours}:${minutes}:${seconds}`
-    date.value = `${year}-${month}-${dayOfMonth}`
-    day.value = weekDays[now.getDay()]
-}
-
-let timer: ReturnType<typeof setInterval>
 const centerItems = ref([
     {
         label: '装置自检状态',
@@ -47,6 +33,8 @@ const centerItems = ref([
         code: 'serial2'
     }
 ])
+// WebSocket 连接
+let ws: WebSocket | null = null
 async function refreshStatus() {
     try {
         const status:any = await fetchDeviceStatus()
@@ -56,15 +44,69 @@ async function refreshStatus() {
     } catch (error) {
     }
 }
+// 从服务器时间同步更新显示
+const updateTimeFromServer = (serverTime: string) => {
+    const [dateStr, timeStr] = serverTime.split(' ')
+    const [year, month, dayOfMonth] = dateStr.split('-').map(Number)
+    const [hours, minutes, seconds] = timeStr.split(':').map(Number)
+    time.value = timeStr
+    date.value = dateStr
+    day.value = weekDays[new Date(year, month - 1, dayOfMonth).getDay()]
+}
+
+// 本地计时器（作为备用/平滑过渡）
+let localTimer: ReturnType<typeof setInterval> | null = null
+let lastServerTime: Date | null = null
+
+const startLocalTimer = () => {
+    if (localTimer) clearInterval(localTimer)
+    localTimer = setInterval(() => {
+        if (lastServerTime) {
+            lastServerTime.setSeconds(lastServerTime.getSeconds() + 1)
+            const now = lastServerTime
+            const hours = now.getHours().toString().padStart(2, '0')
+            const minutes = now.getMinutes().toString().padStart(2, '0')
+            const seconds = now.getSeconds().toString().padStart(2, '0')
+            const year = now.getFullYear()
+            const month = (now.getMonth() + 1).toString().padStart(2, '0')
+            const dayOfMonth = now.getDate().toString().padStart(2, '0')
+
+            time.value = `${hours}:${minutes}:${seconds}`
+            date.value = `${year}-${month}-${dayOfMonth}`
+            day.value = weekDays[now.getDay()]
+        }
+    }, 1000)
+}
 
 onMounted(() => {
-    updateTime()
-    timer = setInterval(updateTime, 1000)
+     const now = new Date()
+    const hours = now.getHours().toString().padStart(2, '0')
+    const minutes = now.getMinutes().toString().padStart(2, '0')
+    const seconds = now.getSeconds().toString().padStart(2, '0')
+    const year = now.getFullYear()
+    const month = (now.getMonth() + 1).toString().padStart(2, '0')
+    const dayOfMonth = now.getDate().toString().padStart(2, '0')
+    
+    time.value = `${hours}:${minutes}:${seconds}`
+    date.value = `${year}-${month}-${dayOfMonth}`
+    day.value = weekDays[now.getDay()]
+
+    // 连接时间同步 WebSocket
+    ws = connectTimeSync((event) => {
+        const serverTimeStr = event.data.time_sync
+        lastServerTime = new Date(serverTimeStr.replace(' ', 'T'))
+        updateTimeFromServer(serverTimeStr)
+        // 收到服务器时间后，启动本地平滑计时
+        startLocalTimer()
+    })
     refreshStatus()
 })
-
 onUnmounted(() => {
-    clearInterval(timer)
+    if (localTimer) clearInterval(localTimer)
+    if (ws) {
+        ws.close()
+        ws = null
+    }
 })
 </script>
 
diff --git a/frontend/src/types/platform.ts b/frontend/src/types/platform.ts
index 57fd1fe..a912540 100644
--- a/frontend/src/types/platform.ts
+++ b/frontend/src/types/platform.ts
@@ -113,7 +113,13 @@ export interface ChannelConfigPayload {
   ai_channel: ChannelItem[]
   ao_channel: ChannelItem[]
 }
-
+export type FullDeviceConfig = {
+  password: string
+  hardware_version: HardwareVersion
+  software_version: SoftwareVersion
+  net: [NetConfigItem, NetConfigItem]
+  uart: [UartConfigItem, UartConfigItem]
+}
 export interface AlarmRule {
   category: string
   limit: number
diff --git a/frontend/src/views/communicationSetting/index.vue b/frontend/src/views/communicationSetting/index.vue
index 9fb5f6e..def9593 100644
--- a/frontend/src/views/communicationSetting/index.vue
+++ b/frontend/src/views/communicationSetting/index.vue
@@ -1,26 +1,46 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
-import { fetchDeviceNet, fetchDevicePort, saveDeviceNetConfig, saveDevicePortConfig, verifyAccessPassword, fetchChannelConfig } from '@/api/platform'
+import { fetchDeviceNet, fetchDevicePort, getDeviceNetConfig, saveDevicePortConfig, fetchChannelConfig } from '@/api/platform'
 import NumericKeyboard from '@/components/NumericKeyboard.vue'
 import PasswordDialog from '@/components/passwordValie.vue'
 
-// 表单数据
+// 左侧网卡一 表单
 const formData: any = ref({
-    nic: '',
+    nic: '网卡一',
     ip: '',
     mask: '',
     gateway: '',
     protocol: '',
 })
+// 右侧网卡二 表单
+const formDataRight: any = ref({
+    nic: '网卡二',
+    ip: '',
+    mask: '',
+    gateway: '',
+    protocol: '',
+})
+
+// 左侧COM1串口
 const formData2: any = ref({
-    port: '',
+    port: 'COM1',
     baud: null,
     parity: '',
     data_bits: null,
     stop_bits: null,
     protocol: ''
 })
+// 右侧COM2串口
+const formData2Right: any = ref({
+    port: 'COM2',
+    baud: null,
+    parity: '',
+    data_bits: null,
+    stop_bits: null,
+    protocol: ''
+})
+const netConfig: any = ref({})
 const networkCardOptions: any = ref([
     { label: '网卡一', value: '网卡一' },
     { label: '网卡二', value: '网卡二' },
@@ -72,198 +92,254 @@ const keyboardVisible = ref(false)
 const passwordDialogVisible = ref(false)
 const currentInputValue = ref('')
 const currentInputKey = ref('')
-const currentInputIndex = ref(0)
-const currentInputType = ref('')
-const infoList = ref<any>({})
-const openKeyboard = (value: number, key: string, type: string) => {
-    currentInputType.value = type
-    currentInputValue.value = value.toString()
+// 标记当前操作左/右表单：left / right
+const currentInputSide = ref('left')
+
+const openKeyboard = (value: string, key: string, side: 'left' | 'right') => {
+    currentInputSide.value = side
+    currentInputValue.value = value
     currentInputKey.value = key
     keyboardVisible.value = true
 }
-
 const handleKeyboardConfirm = (value: string) => {
-    formData.value[currentInputKey.value] = value
+    if (currentInputSide.value === 'left') {
+        formData.value[currentInputKey.value] = value
+    } else {
+        formDataRight.value[currentInputKey.value] = value
+    }
     keyboardVisible.value = false
 }
-// 保存
+
+// 保存按钮打开密码弹窗
 const handleSave = () => {
     passwordDialogVisible.value = true
 }
 
-// 密码弹框确认回调（密码已在校验组件内验证通过）
-const handlePasswordConfirm = () => {
-    saveDeviceNetConfig(formData.value).then((res: any) => {
-        if (isswitch.value) {
-            return
+const handlePasswordConfirm = async () => {
+    passwordDialogVisible.value = false
+    if (isswitch.value) return
+    isswitch.value = true
+    try {
+        const submitData: any = {
+            hardware_version: netConfig.value.hardware_version,
+            software_version: netConfig.value.software_version,
+            password: netConfig.value.password,
+            net: [formData.value, formDataRight.value],
+            uart: [formData2.value, formData2Right.value]
         }
-        isswitch.value = true
-        if (res.code == 200) {
-            saveDevicePortConfig(formData2.value).then((res: any) => {
-                if (res.code == 200) {
-                    ElMessage({
-                        type: 'success',
-                        message: `保存成功`,
-                    })
-                    isswitch.value = false
-                } else {
-                    ElMessage({
-                        type: 'error',
-                        message: '串口设置保存失败',
-                    })
-                    isswitch.value = false
-                }
+          const res = await saveDevicePortConfig(submitData)
+          if (res.code === 200) {
+            ElMessage({
+                type: 'success',
+                message: '全部配置保存成功',
             })
-        } else {
+          }else{
             ElMessage({
                 type: 'error',
-                message: '常规配置保存失败',
+                message: '全部配置保存失败',
             })
-            isswitch.value = false
-        }
-    })
+          }
+    } catch (err: any) {
+        ElMessage({
+            type: 'error',
+            message: err.message || '保存失败',
+        })
+    } finally {
+        isswitch.value = false
+    }
 }
 
-// 密码弹框取消回调
 const handlePasswordCancel = () => {
-    // 取消操作，不做处理
-}
-const config: any = ref({})
-const handleChange = (val: any) => {
-    fetchDeviceNet(val).then((res: any) => {
-        formData.value = res
-    })
-}
-const handleChangePort = (val: any) => {
-    fetchDevicePort(val).then((res: any) => {
-        formData2.value = res
-    })
+    // 取消不处理
 }
+
+// 初始化加载左右两套数据
 function init() {
     fetchDeviceNet('网卡一').then((res: any) => {
         formData.value = res
     })
+    fetchDeviceNet('网卡二').then((res: any) => {
+        formDataRight.value = res
+    })
+
     fetchDevicePort('COM1').then((res: any) => {
         formData2.value = res
     })
-    fetchChannelConfig().then((res: any) => {
-        config.value = res
+    fetchDevicePort('COM2').then((res: any) => {
+        formData2Right.value = res
+    })
+    getDeviceNetConfig().then((res: any) => {
+        netConfig.value = res
     })
 }
+
 onMounted(() => {
     init()
 })
-
 </script>
 
 <template>
     <div class="communication-container">
-        <el-form :model="formData" label-width="100px" class="form-wrapper">
+        <el-form label-width="100px" class="form-wrapper">
+            <!-- 常规配置：左右两栏 网卡一 / 网卡二 -->
             <div class="section">
                 <div class="section-title">
                     <div class="icon"></div>
                     <div>常规配置</div>
                 </div>
-                <div class="form-row">
-                    <el-form-item label="网卡号">
-                        <el-select v-model="formData.nic" placeholder="请选择" @change="handleChange">
-                            <el-option v-for="item in networkCardOptions" :key="item.value" :label="item.label"
-                                :value="item.label" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="IP地址">
-                        <el-input v-model="formData.ip" @focus="openKeyboard(formData.ip, 'ip', 'value')"
-                            style="width: 100%;" />
-                    </el-form-item>
-                </div>
-                <div class="form-row">
-                    <el-form-item label="子网掩码">
-                        <el-input v-model="formData.mask" @focus="openKeyboard(formData.mask, 'mask', 'value')" />
-                    </el-form-item>
-                    <el-form-item label="默认网关">
-                        <el-input v-model="formData.gateway"
-                            @focus="openKeyboard(formData.gateway, 'gateway', 'value')" />
-                    </el-form-item>
-                </div>
-                <div class="form-row">
-                    <el-form-item label="通讯协议">
-                        <el-select v-model="formData.protocol" placeholder="请选择">
-                            <el-option v-for="item in tcpProtocolOptions" :key="item.value" :label="item.label"
-                                :value="item.label" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item />
-                </div>
+                <el-row :gutter="40">
+                    <el-col :span="12">
+                        <el-form-item label="网卡号">
+                            <el-input v-model="formData.nic" disabled placeholder="请输入" />
+                        </el-form-item>
+                        <el-form-item label="IP地址">
+                            <el-input v-model="formData.ip" @focus="openKeyboard(formData.ip, 'ip', 'left')" />
+                        </el-form-item>
+
+                        <el-form-item label="子网掩码">
+                            <el-input v-model="formData.mask" @focus="openKeyboard(formData.mask, 'mask', 'left')" />
+                        </el-form-item>
+                        <el-form-item label="默认网关">
+                            <el-input v-model="formData.gateway"
+                                @focus="openKeyboard(formData.gateway, 'gateway', 'left')" />
+                        </el-form-item>
+
+                        <el-form-item label="通讯协议">
+                            <el-select v-model="formData.protocol" placeholder="请选择">
+                                <el-option v-for="item in tcpProtocolOptions" :key="item.value" :label="item.label"
+                                    :value="item.label" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item />
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="网卡号">
+                            <el-input v-model="formDataRight.nic" disabled placeholder="请输入" />
+                        </el-form-item>
+                        <el-form-item label="IP地址">
+                            <el-input v-model="formDataRight.ip"
+                                @focus="openKeyboard(formDataRight.ip, 'ip', 'right')" />
+                        </el-form-item>
+
+                        <el-form-item label="子网掩码">
+                            <el-input v-model="formDataRight.mask"
+                                @focus="openKeyboard(formDataRight.mask, 'mask', 'right')" />
+                        </el-form-item>
+                        <el-form-item label="默认网关">
+                            <el-input v-model="formDataRight.gateway"
+                                @focus="openKeyboard(formDataRight.gateway, 'gateway', 'right')" />
+                        </el-form-item>
+
+                        <el-form-item label="通讯协议">
+                            <el-select v-model="formDataRight.protocol" placeholder="请选择">
+                                <el-option v-for="item in tcpProtocolOptions" :key="item.value" :label="item.label"
+                                    :value="item.label" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item />
+                    </el-col>
+                </el-row>
             </div>
             <div class="section">
                 <div class="section-title">
                     <div class="icon"></div>
                     <div>串口设置</div>
                 </div>
-                <div class="form-row">
-                    <el-form-item label="串口号">
-                        <el-select v-model="formData2.port" placeholder="请选择" @change="handleChangePort">
-                            <el-option v-for="item in comPortOptions" :key="item.label" :label="item.label"
-                                :value="item.label" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="波特率">
-                        <el-select v-model="formData2.baud" placeholder="请选择">
-                            <el-option v-for="item in baudRateOptions" :key="item.value" :label="item.label"
-                                :value="item.value" />
-                        </el-select>
-                    </el-form-item>
-                </div>
-                <div class="form-row">
-                    <el-form-item label="校验位">
-                        <el-select v-model="formData2.parity" placeholder="请选择">
-                            <el-option v-for="item in parityOptions" :key="item.value" :label="item.label"
-                                :value="item.value" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="数据位">
-                        <el-select v-model="formData2.data_bits" placeholder="请选择">
-                            <el-option v-for="item in dataBitsOptions" :key="item.value" :label="item.label"
-                                :value="item.value" />
-                        </el-select>
-                    </el-form-item>
-                </div>
-                <div class="form-row">
-                    <el-form-item label="停止位">
-                        <el-select v-model="formData2.stop_bits" placeholder="请选择">
-                            <el-option v-for="item in stopBitsOptions" :key="item.value" :label="item.label"
-                                :value="item.value" />
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="通讯协议">
-                        <el-select v-model="formData2.protocol" placeholder="请选择">
-                            <el-option v-for="item in rtuProtocolOptions" :key="item.value" :label="item.label"
-                                :value="item.value" />
-                        </el-select>
-                    </el-form-item>
-                </div>
-            </div>
+                <el-row :gutter="40">
+                    <el-col :span="12">
+                        <el-form-item label="串口号">
+                            <el-input v-model="formData2.port" disabled placeholder="请输入" />
+                        </el-form-item>
+                        <el-form-item label="波特率">
+                            <el-select v-model="formData2.baud" placeholder="请选择">
+                                <el-option v-for="item in baudRateOptions" :key="item.value" :label="item.label"
+                                    :value="item.value" />
+                            </el-select>
+                        </el-form-item>
 
+                        <el-form-item label="校验位">
+                            <el-select v-model="formData2.parity" placeholder="请选择">
+                                <el-option v-for="item in parityOptions" :key="item.value" :label="item.label"
+                                    :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="数据位">
+                            <el-select v-model="formData2.data_bits" placeholder="请选择">
+                                <el-option v-for="item in dataBitsOptions" :key="item.value" :label="item.label"
+                                    :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="停止位">
+                            <el-select v-model="formData2.stop_bits" placeholder="请选择">
+                                <el-option v-for="item in stopBitsOptions" :key="item.value" :label="item.label"
+                                    :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="通讯协议">
+                            <el-select v-model="formData2.protocol" placeholder="请选择">
+                                <el-option v-for="item in rtuProtocolOptions" :key="item.value" :label="item.label"
+                                    :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="串口号">
+                            <el-input v-model="formData2Right.port" disabled placeholder="请输入" />
+                        </el-form-item>
+                        <el-form-item label="波特率">
+                            <el-select v-model="formData2Right.baud" placeholder="请选择">
+                                <el-option v-for="item in baudRateOptions" :key="item.value" :label="item.label"
+                                    :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+
+                        <el-form-item label="校验位">
+                            <el-select v-model="formData2Right.parity" placeholder="请选择">
+                                <el-option v-for="item in parityOptions" :key="item.value" :label="item.label"
+                                    :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="数据位">
+                            <el-select v-model="formData2Right.data_bits" placeholder="请选择">
+                                <el-option v-for="item in dataBitsOptions" :key="item.value" :label="item.label"
+                                    :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+
+                        <el-form-item label="停止位">
+                            <el-select v-model="formData2Right.stop_bits" placeholder="请选择">
+                                <el-option v-for="item in stopBitsOptions" :key="item.value" :label="item.label"
+                                    :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="通讯协议">
+                            <el-select v-model="formData2Right.protocol" placeholder="请选择">
+                                <el-option v-for="item in rtuProtocolOptions" :key="item.value" :label="item.label"
+                                    :value="item.value" />
+                            </el-select>
+                        </el-form-item>
+
+                    </el-col>
+                </el-row>
+            </div>
         </el-form>
+
         <div class="btn-wrapper">
             <el-button type="primary" style="background-color: #0099ff;width: 150px;height: 40px;"
                 @click="handleSave">保存</el-button>
         </div>
+
         <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :show-close="false" title="错误提示" width="300">
             <div style="color: #FF4D4F;font-size: 16px;text-align: center;">原密码验证错误！</div>
             <template #footer>
                 <el-button type="primary" @click="dialogVisible = false">确定</el-button>
             </template>
         </el-dialog>
-        <PasswordDialog
-            v-model:visible="passwordDialogVisible"
-            title="密码验证"
-            @confirm="handlePasswordConfirm"
-            @cancel="handlePasswordCancel"
-        />
+
+        <PasswordDialog v-model:visible="passwordDialogVisible" title="密码验证" @confirm="handlePasswordConfirm"
+            @cancel="handlePasswordCancel" />
         <NumericKeyboard v-model:visible="keyboardVisible" :model-value="currentInputValue"
-            @confirm="handleKeyboardConfirm">
-        </NumericKeyboard>
+            @confirm="handleKeyboardConfirm" />
     </div>
 </template>
 
@@ -275,14 +351,13 @@ onMounted(() => {
 
     .form-wrapper {
         background: #fff;
-        padding: 15px 50px;
+        padding: 15px 20px;
         border-radius: 4px;
         box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
     }
 
     .section {
         margin-bottom: 10px;
-        padding-bottom: 10px;
         border-bottom: 1px solid #ebeef5;
 
         &:last-child {
@@ -294,7 +369,7 @@ onMounted(() => {
         .section-title {
             font-size: 16px;
             font-weight: 500;
-            margin: 0 0 10px 0;
+            margin: 0 0 12px 0;
             display: flex;
             align-items: center;
             font-weight: 700;
@@ -311,9 +386,20 @@ onMounted(() => {
         }
     }
 
-    .form-row {
+    // 分栏小标题（网卡一/网卡二 COM1/COM2）
+    .sub-title {
+        font-size: 15px;
+        font-weight: 600;
+        color: #0099ff;
+        margin-bottom: 10px;
+        padding-left: 4px;
+        border-left: 3px solid #0099ff;
+    }
+
+    // 每栏内部一行两个表单项
+    .form-col-row {
         display: flex;
-        gap: 40px;
+        gap: 20px;
         margin-bottom: 10px;
 
         .el-form-item {
@@ -325,14 +411,12 @@ onMounted(() => {
     .btn-wrapper {
         margin-top: 15px;
     }
-
 }
 
 :deep(.el-form-item--label-right .el-form-item__label) {
     text-align: left;
     justify-content: flex-start;
     color: #787878;
-
 }
 
 :deep(.el-select__placeholder) {
@@ -341,15 +425,19 @@ onMounted(() => {
 
 :deep(.el-input__inner) {
     color: #363636;
-    min-height: 40px;
+    min-height: 28px;
 }
 
 :deep(.el-select__wrapper) {
-    min-height: 40px;
+    min-height: 28px;
 }
 
 :deep(.el-form-item__label) {
-    height: 40px;
-    line-height: 40px;
+    height: 28px;
+    line-height: 28px;
+}
+
+:deep(.el-form-item) {
+    margin-bottom: 3px;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/timeSetting/index.vue b/frontend/src/views/timeSetting/index.vue
index 8a77a1c..e86b28b 100644
--- a/frontend/src/views/timeSetting/index.vue
+++ b/frontend/src/views/timeSetting/index.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import { fetchSystemConfig, saveSystemConfig } from '@/api/platform'
 import { ElMessage } from 'element-plus'
+import { connectTimeSync } from '@/websocket/client'
 
 const formRef = ref<FormInstance>()
-
+const isUserEdited = ref(false)
 const form = ref({
     time_sync: '',
     brightness: 0,
@@ -38,6 +39,7 @@ const handleSubmit = async () => {
         isswitch.value = false
     })
 }
+let ws: WebSocket | null = null
 function init() {
     fetchSystemConfig().then((res: any) => {
         form.value = res
@@ -45,6 +47,17 @@ function init() {
 }
 onMounted(() => {
     init()
+    ws = connectTimeSync((event) => {
+        if (!isUserEdited.value) {
+            form.value.time_sync = event.data.time_sync
+        }
+    })
+})
+onUnmounted(() => {
+    if (ws) {
+        ws.close()
+        ws = null
+    }
 })
 </script>
 
@@ -60,7 +73,8 @@ onMounted(() => {
             <el-form ref="formRef" :model="form" :rules="rules" label-width="90px" class="time-form">
                 <el-form-item label="选择时间" prop="time_sync">
                     <el-date-picker v-model="form.time_sync" type="datetime" placeholder="请选择时间"
-                        format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;" />
+                        @focus="isUserEdited = true" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
+                        style="width: 100%;" />
                 </el-form-item>
             </el-form>
         </div>