From 166c3e5d8c37df86a094f345cb06eb890c741ff7 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Wed, 24 Dec 2025 13:42:51 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/devops/setting.js          |  20 +++
 src/views/devops/setting/index.vue | 274 +++++++++++++++++++++++++++++
 2 files changed, 294 insertions(+)
 create mode 100644 src/api/devops/setting.js
 create mode 100644 src/views/devops/setting/index.vue

diff --git a/src/api/devops/setting.js b/src/api/devops/setting.js
new file mode 100644
index 0000000..5774cc7
--- /dev/null
+++ b/src/api/devops/setting.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+// 系统运维->时间设置->查询时间设置
+export function getTimeSettingAPI(params) {
+    return request({
+        url: '/smartCar/data/device/getTimeSetting',
+        method: 'GET',
+        params
+    })
+}
+
+// 系统运维->时间设置->更新时间设置
+export function updateTimeSettingAPI(data) {
+    return request({
+        url: '/smartCar/data/device/updateTimeSetting',
+        method: 'POST',
+        data
+    })
+}
+
diff --git a/src/views/devops/setting/index.vue b/src/views/devops/setting/index.vue
new file mode 100644
index 0000000..e0e2475
--- /dev/null
+++ b/src/views/devops/setting/index.vue
@@ -0,0 +1,274 @@
+<template>
+    <!-- 设备运维-时间设置 -->
+    <el-card class="time-setting-container" v-loading="loading">
+        <div class="current-time">
+            <span class="time-label">设备当前时间：</span>
+            <span class="time-value">{{ currentTime }}</span>
+        </div>
+
+        <el-card class="setting-card">
+            <div slot="header" class="card-header">
+                <span class="card-title">时间设置</span>
+            </div>
+
+            <el-form :model="form" :rules="rules" ref="timeSettingForm" label-width="120px">
+                <el-form-item label="校时模式" prop="calibrationMode">
+                    <el-radio-group v-model="form.calibrationMode" @change="handleModeChange">
+                        <el-radio label="ntp">NTP校时</el-radio>
+                        <el-radio label="manual">手动校时</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+                <!-- NTP校时模式 -->
+                <template v-if="form.calibrationMode === 'ntp'">
+                    <el-form-item label="服务器地址" prop="serverAddress" required>
+                        <el-input v-model="form.serverAddress" placeholder="请输入服务器地址" style="width: 400px" maxlength="32" show-word-limit></el-input>
+                    </el-form-item>
+                    <el-form-item label="NTP端口" prop="ntpPort" required>
+                        <el-input v-model="form.ntpPort" placeholder="请输入NTP端口" style="width: 400px" maxlength="5" show-word-limit></el-input>
+                    </el-form-item>
+                    <el-form-item label="校时时间间隔" prop="calibrationInterval" required>
+                        <el-input-number v-model="form.calibrationInterval" :min="1" :max="9999" style="width: 200px" maxlength="5"></el-input-number>
+                        <span style="margin-left: 10px; color: #606266;">分钟</span>
+                    </el-form-item>
+                </template>
+
+                <!-- 手动校时模式 -->
+                <template v-if="form.calibrationMode === 'manual'">
+                    <el-form-item label="设置时间" prop="setTime" required>
+                        <el-date-picker
+                            v-model="form.setTime"
+                            type="datetime"
+                            placeholder="请选择时间"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            format="yyyy-MM-dd HH:mm:ss"
+                            style="width: 400px">
+                        </el-date-picker>
+                    </el-form-item>
+                </template>
+
+                <el-form-item>
+                    <el-button class="save-btn" @click="handleSave">保存</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+    </el-card>
+</template>
+
+<script>
+import { getTimeSettingAPI, updateTimeSettingAPI } from '@/api/devops/setting'
+
+export default {
+    name: 'TimeSetting',
+    data() {
+        return {
+            loading: false,
+            currentTime: '',
+            timeTimer: null,
+            form: {
+                calibrationMode: 'ntp', // ntp: NTP校时, manual: 手动校时
+                serverAddress: '',
+                ntpPort: '',
+                calibrationInterval: null,
+                setTime: ''
+            },
+            rules: {}
+        }
+    },
+    created() {
+        this.updateCurrentTime()
+        this.timeTimer = setInterval(() => {
+            this.updateCurrentTime()
+        }, 1000)
+        this.getTimeSetting()
+    },
+    beforeDestroy() {
+        if (this.timeTimer) {
+            clearInterval(this.timeTimer)
+        }
+    },
+    methods: {
+        /** 更新当前时间 */
+        updateCurrentTime() {
+            const now = new Date()
+            const year = now.getFullYear()
+            const month = String(now.getMonth() + 1).padStart(2, '0')
+            const day = String(now.getDate()).padStart(2, '0')
+            const hours = String(now.getHours()).padStart(2, '0')
+            const minutes = String(now.getMinutes()).padStart(2, '0')
+            const seconds = String(now.getSeconds()).padStart(2, '0')
+            this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+        },
+        /** 获取时间设置 */
+        async getTimeSetting() {
+            try {
+                this.loading = true
+                const res = await getTimeSettingAPI()
+                if (res.code === 200 && res.data) {
+                    const data = res.data
+                    this.form = {
+                        calibrationMode: data.calibrationMode || 'ntp',
+                        serverAddress: data.serverAddress || '',
+                        ntpPort: data.ntpPort || '',
+                        calibrationInterval: data.calibrationInterval || null,
+                        setTime: data.setTime || ''
+                    }
+                }
+            } catch (error) {
+                console.error('获取时间设置失败:', error)
+            } finally {
+                this.loading = false
+            }
+        },
+        /** 校时模式切换 */
+        handleModeChange() {
+            // 切换模式时清空表单验证状态
+            this.$nextTick(() => {
+                if (this.$refs.timeSettingForm) {
+                    this.$refs.timeSettingForm.clearValidate()
+                }
+            })
+        },
+        /** 保存设置 */
+        async handleSave() {
+            try {
+                // 根据模式验证必填字段
+                if (this.form.calibrationMode === 'ntp') {
+                    if (!this.form.serverAddress) {
+                        this.$message.error('服务器地址不能为空')
+                        return
+                    }
+                    if (!this.form.calibrationInterval) {
+                        this.$message.error('校时时间间隔不能为空')
+                        return
+                    }
+                } else if (this.form.calibrationMode === 'manual') {
+                    if (!this.form.setTime) {
+                        this.$message.error('设置时间不能为空')
+                        return
+                    }
+                }
+
+                this.loading = true
+                const params = {
+                    calibrationMode: this.form.calibrationMode,
+                    serverAddress: this.form.serverAddress,
+                    ntpPort: this.form.ntpPort,
+                    calibrationInterval: this.form.calibrationInterval,
+                    setTime: this.form.setTime
+                }
+                const res = await updateTimeSettingAPI(params)
+                if (res.code === 200) {
+                    this.$message.success('保存成功')
+                } else {
+                    this.$message.error(res.msg || '保存失败')
+                }
+            } catch (error) {
+                console.error('保存时间设置失败:', error)
+                this.$message.error('保存失败，请稍后重试')
+            } finally {
+                this.loading = false
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.time-setting-container {
+    height: calc(100vh - 84px);
+    overflow-y: auto;
+    background: linear-gradient(180deg, #f1f6ff 20%, #e5efff 100%);
+
+    .current-time {
+        margin-bottom: 10px;
+        padding: 8px 14px;
+        background: #fff;
+        border-radius: 4px;
+        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+
+        .time-label {
+            font-size: 14px;
+            color: #606266;
+            font-weight: 500;
+        }
+
+        .time-value {
+            font-size: 14px;
+            color: #303133;
+            font-weight: 600;
+            margin-left: 8px;
+        }
+    }
+
+    .setting-card {
+        margin-bottom: 0;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        height: calc(100vh - 180px);
+        display: flex;
+        flex-direction: column;
+
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: #fff;
+            padding: 0px;
+            border-radius: 8px 8px 0 0;
+
+            .card-title {
+                font-size: 16px;
+                font-weight: 600;
+                color: #333;
+            }
+        }
+
+        ::v-deep .el-card__body {
+            padding: 14px 18px;
+            flex: 1;
+            overflow-y: auto;
+        }
+
+        ::v-deep .el-form-item {
+            margin-bottom: 14px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .el-form-item__label {
+                font-weight: 500;
+                color: #606266;
+            }
+
+            .el-form-item__content {
+                .el-radio-group {
+                    .el-radio {
+                        margin-right: 30px;
+                    }
+                }
+            }
+        }
+
+        .save-btn {
+            width: 98px;
+            height: 36px;
+            background: #1f72ea;
+            box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
+            border-radius: 4px;
+            color: #fff;
+            border: none;
+            font-size: 14px;
+            transition: all 0.3s;
+
+            &:hover {
+                background: #4a8bff;
+                box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
+            }
+        }
+    }
+}
+</style>
+