系统设置
This commit is contained in:
parent
29199412e0
commit
166c3e5d8c
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue