对时设置

frontend/src/api/platform.ts

@@ -143,3 +143,11 @@ export async function saveDeviceUart(payload: any[]): Promise<any> {
   const response = await http.post<ApiResponse<any>>('/config/device/uart', payload)
   return response.data.data
 }
+export async function saveTimeSync(payload: { time_sync: string }): Promise<ApiResponse<{ send_status: string }>> {
+  const response = await http.post<ApiResponse<{ send_status: string }>>('/config/time-sync', payload)
+  return response.data
+}
+export async function getTimeSync(): Promise<ApiResponse<{ send_status: string }>> {
+  const response = await http.get<ApiResponse<{ send_status: string }>>('/config/time-sync')
+  return response.data
+}

frontend/src/views/timeSetting/index.vue

@@ -1,58 +1,71 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
-import { fetchSystemConfig, saveSystemConfig } from '@/api/platform'
+import { getTimeSync, saveTimeSync } from '@/api/platform'
 import { ElMessage } from 'element-plus'
 import { connectTimeSync } from '@/websocket/client'
 
 const formRef = ref<FormInstance>()
+// 标记用户是否手动编辑（true=屏蔽ws推送覆盖）
 const isUserEdited = ref(false)
 const form = ref({
     time_sync: '',
     brightness: 0,
     screen_saver: 0,
 })
-
-
-const rules: FormRules = {
-
-}
+const queryData = ref({
+    time_sync: '',
+    brightness: 0,
+    screen_saver: 0,
+})
+const rules: FormRules = {}
+// 保存防抖锁
 const isswitch = ref(false)
-const handleSubmit = async () => {
-    if (isswitch.value) {
+
+// 按钮点击事件：切换编辑状态 / 提交保存
+const handleBtnClick = async () => {
+    // 未进入编辑模式：切换为编辑，屏蔽ws
+    if (!isUserEdited.value) {
+        isUserEdited.value = true
         return
     }
+    // 已在编辑模式：执行保存
+    if (isswitch.value) return
     isswitch.value = true
-    saveSystemConfig(form.value).then((res: any) => {
-        if (res.code == 200) {
-            ElMessage({
-                type: 'success',
-                message: `保存成功`,
-            })
-            isswitch.value = false
+
+    try {
+        const res = await saveTimeSync({ time_sync: form.value.time_sync })
+        if (res.code === 200) {
+            ElMessage.success('保存成功')
+            isUserEdited.value = false
         } else {
-            ElMessage({
-                type: 'info',
-                message: '保存失败',
-            })
+            ElMessage.info('保存失败')
         }
+    } catch (err) {
+        ElMessage.error('接口请求异常')
+        isUserEdited.value = false
+    } finally {
         isswitch.value = false
-    })
+        isUserEdited.value = false
+    }
 }
+
 let ws: WebSocket | null = null
 function init() {
-    fetchSystemConfig().then((res: any) => {
-        form.value = res
+    getTimeSync().then((res: any) => {
+        queryData.value = res.data.time_sync
     })
 }
 onMounted(() => {
     init()
     ws = connectTimeSync((event) => {
+        // 用户未手动编辑时，才接收ws更新时间
         if (!isUserEdited.value) {
             form.value.time_sync = event.data.time_sync
         }
     })
 })
+
 onUnmounted(() => {
     if (ws) {
         ws.close()
@@ -69,19 +82,21 @@ onUnmounted(() => {
                 <span class="title-line"></span>
                 对时设置
             </div>
-            <!-- 表单 -->
-            <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="请选择时间"
-                        @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 style="display: flex;align-items: flex-start;">
+                <div style="width: 90px;color: #787878;font-size: 14px;">
+                    选择时间:
+                </div>
+                <el-date-picker-panel v-model="form.time_sync"  value-format="YYYY-MM-DD HH:mm:ss"
+                    format="YYYY-MM-DD HH:mm:ss" :disabled="!isUserEdited"  type="datetime" />
+                <el-button
+                    type="primary"
+                    style="background-color: #0099ff;width: 60px;height: 35px;margin-left: 10px;"
+                    @click="handleBtnClick"
+                >
+                    {{ isUserEdited ? '确定' : '更改' }}
+                </el-button>
+            </div>
         </div>
-        <el-button type="primary" style="background-color: #0099ff;width: 150px;height: 40px;" class="save-btn"
-            @click="handleSubmit">
-            更改
-        </el-button>
     </div>
 </template>
 
@@ -93,9 +108,9 @@ onUnmounted(() => {
 
     .time-container-content {
         width: 100%;
-        height: calc(100vh - 230px);
+        height: 475px;
         background-color: #ffffff;
-        padding: 20px 50px;
+        padding: 15px 30px;
         border-radius: 4px;
         box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
     }
@@ -104,7 +119,7 @@ onUnmounted(() => {
         font-size: 18px;
         font-weight: 700;
         color: #303133;
-        margin-bottom: 24px;
+        margin-bottom: 15px;
         display: flex;
         align-items: center;