|
|
<template>
|
|
|
<div class="control-view">
|
|
|
<div class="main-content">
|
|
|
<!-- 顶部状态栏 -->
|
|
|
<div class="header-status">
|
|
|
<div class="time-info">
|
|
|
<span>{{ currentTime }} {{ week }}</span>
|
|
|
</div>
|
|
|
<div class="page-title">
|
|
|
<h1>系统设置</h1>
|
|
|
</div>
|
|
|
<div class="system-status"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 主体区域 -->
|
|
|
<div class="control-content">
|
|
|
<!-- 系统时间卡片 -->
|
|
|
<div class="main_item">
|
|
|
<div class="main_title">系统时间</div>
|
|
|
<div class="main_content">
|
|
|
<!-- 当前设备时间 -->
|
|
|
<div class="line">
|
|
|
<div class="item">
|
|
|
<div class="key">当前设备时间</div>
|
|
|
<div class="value">{{ deviceDatetime || '—' }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 设置新时间 -->
|
|
|
<div class="line">
|
|
|
<div class="item">
|
|
|
<div class="key">设置时间</div>
|
|
|
<el-date-picker v-model="targetDatetime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择目标时间" style="flex: 1;" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="buttonBox">
|
|
|
<div class="button refresh" @click="getSystemTime">
|
|
|
<el-icon>
|
|
|
<Refresh />
|
|
|
</el-icon>
|
|
|
刷新时间
|
|
|
</div>
|
|
|
<div class="button save" @click="setSystemTime">
|
|
|
<el-icon>
|
|
|
<Check />
|
|
|
</el-icon>
|
|
|
设置时间
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 上次设置结果 -->
|
|
|
<div v-if="lastSetResult" class="result-box">
|
|
|
<div class="result-item">
|
|
|
<span class="result-key">修改前：</span>
|
|
|
<span class="result-val">{{ lastSetResult.old_time }}</span>
|
|
|
</div>
|
|
|
<div class="result-item">
|
|
|
<span class="result-key">修改后：</span>
|
|
|
<span class="result-val">{{ lastSetResult.new_time }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 修改密码卡片 -->
|
|
|
<div class="main_item">
|
|
|
<div class="main_title">修改操作密码</div>
|
|
|
<div class="main_content">
|
|
|
<div class="line">
|
|
|
<div class="item full-width">
|
|
|
<div class="key">启用密码保护</div>
|
|
|
<el-switch v-model="passwordEnabled" @change="handlePasswordEnableChange" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line">
|
|
|
<div class="item full-width">
|
|
|
<div class="key">原密码</div>
|
|
|
<!-- <el-input v-model="pwdForm.oldPassword" type="password" placeholder="请输入原密码" show-password style="flex:1" /> -->
|
|
|
<BasePasswordInput v-model="pwdForm.oldPassword" layout-name="number" placeholder="请输入原密码" clearable />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line">
|
|
|
<div class="item full-width">
|
|
|
<div class="key">新密码</div>
|
|
|
<!-- <el-input v-model="pwdForm.newPassword" type="password" placeholder="至少 6 位" show-password style="flex:1" /> -->
|
|
|
<BasePasswordInput v-model="pwdForm.newPassword" layout-name="number" placeholder="请输入新密码" clearable />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line">
|
|
|
<div class="item full-width">
|
|
|
<div class="key">确认新密码</div>
|
|
|
<!-- <el-input v-model="pwdForm.confirmPassword" type="password" placeholder="再次输入新密码" show-password style="flex:1" /> -->
|
|
|
<BasePasswordInput v-model="pwdForm.confirmPassword" layout-name="number" placeholder="再次输入新密码" clearable />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="buttonBox">
|
|
|
<div class="button save" @click="changePassword">
|
|
|
<el-icon>
|
|
|
<Check />
|
|
|
</el-icon>
|
|
|
确认修改
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 底部信息 -->
|
|
|
<div class="bottom-info">
|
|
|
<div style="color:#fff">
|
|
|
设备号：{{ commit_uid }}
|
|
|
</div>
|
|
|
<div class="bottom_item"></div>
|
|
|
<div class="bottom_item">
|
|
|
<el-button class="back-button" @click="goBack">
|
|
|
<el-icon>
|
|
|
<HomeFilled />
|
|
|
</el-icon>
|
|
|
返回主界面
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
import RPC from '@/utils/rpc'
|
|
|
import BasePasswordInput from '@/components/BasePasswordInput.vue'
|
|
|
|
|
|
const router = useRouter()
|
|
|
const commit_uid = sessionStorage.getItem('central_control_comm_uid')
|
|
|
|
|
|
// ─── 时间相关 ─────────────────────────────────────
|
|
|
const currentTime = ref('')
|
|
|
const week = ref('')
|
|
|
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
|
|
|
|
|
const deviceDatetime = ref('') // 设备当前时间（来自后端）
|
|
|
const targetDatetime = ref('') // 用户选择的目标时间
|
|
|
const lastSetResult = ref(null) // 上次设置结果
|
|
|
|
|
|
const updateTime = () => {
|
|
|
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')
|
|
|
week.value = weekDays[now.getDay()]
|
|
|
currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
|
|
}
|
|
|
|
|
|
// 获取设备系统时间
|
|
|
const getSystemTime = async () => {
|
|
|
try {
|
|
|
const res = await RPC.post('/m9z/system/getTime', {})
|
|
|
deviceDatetime.value = res?.datetime || ''
|
|
|
} catch (e) {
|
|
|
// 仅在 401 时 rpc.js 会触发密码弹框，其他错误已有通用提示
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 设置系统时间
|
|
|
const setSystemTime = async () => {
|
|
|
if (!targetDatetime.value) {
|
|
|
ElMessage.warning('请先选择目标时间')
|
|
|
return
|
|
|
}
|
|
|
try {
|
|
|
const res = await RPC.post('/m9z/system/setTime', { datetime: targetDatetime.value })
|
|
|
if (res?.success) {
|
|
|
lastSetResult.value = res
|
|
|
deviceDatetime.value = res.new_time
|
|
|
targetDatetime.value = ''
|
|
|
ElMessage.success('系统时间设置成功')
|
|
|
}
|
|
|
} catch (e) {
|
|
|
// 401 由 rpc.js 统一处理
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ─── 修改密码 ─────────────────────────────────────
|
|
|
const pwdForm = ref({ oldPassword: '', newPassword: '', confirmPassword: '' })
|
|
|
|
|
|
const changePassword = async () => {
|
|
|
if (!pwdForm.value.oldPassword || !pwdForm.value.newPassword) {
|
|
|
ElMessage.warning('请输入原密码和新密码')
|
|
|
return
|
|
|
}
|
|
|
if (pwdForm.value.newPassword.length < 6) {
|
|
|
ElMessage.warning('新密码至少 6 位')
|
|
|
return
|
|
|
}
|
|
|
if (pwdForm.value.newPassword !== pwdForm.value.confirmPassword) {
|
|
|
ElMessage.warning('两次输入的新密码不一致')
|
|
|
return
|
|
|
}
|
|
|
try {
|
|
|
await RPC.post('/m9z/password/change', {
|
|
|
old_password: pwdForm.value.oldPassword,
|
|
|
new_password: pwdForm.value.newPassword,
|
|
|
})
|
|
|
ElMessage.success('密码修改成功，请重新登录')
|
|
|
// 清除 session，下次操作时重新验证
|
|
|
localStorage.removeItem('m9z_session_id')
|
|
|
pwdForm.value = { oldPassword: '', newPassword: '', confirmPassword: '' }
|
|
|
} catch (e) {
|
|
|
// 401 或其他错误由 rpc.js 统一处理
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// ─── 密码保护开关 ─────────────────────────────────
|
|
|
const passwordEnabled = ref(false)
|
|
|
|
|
|
const getPasswordStatus = async () => {
|
|
|
try {
|
|
|
const res = await RPC.post('/m9z/password/status', {})
|
|
|
passwordEnabled.value = res?.enabled || false
|
|
|
} catch (e) {
|
|
|
// 错误由 rpc.js 处理
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const handlePasswordEnableChange = async (val) => {
|
|
|
const actionText = val ? '开启' : '关闭'
|
|
|
try {
|
|
|
await ElMessageBox.confirm(
|
|
|
`确认要${actionText}密码保护功能吗？`,
|
|
|
'提示',
|
|
|
{
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning',
|
|
|
}
|
|
|
)
|
|
|
|
|
|
const method = val ? '/m9z/password/enable' : '/m9z/password/disable'
|
|
|
try {
|
|
|
await RPC.post(method, {})
|
|
|
ElMessage.success(`${actionText}密码保护成功`)
|
|
|
} catch (e) {
|
|
|
// 如果接口失败，回滚状态
|
|
|
passwordEnabled.value = !val
|
|
|
}
|
|
|
} catch (e) {
|
|
|
// 用户取消，回滚状态
|
|
|
passwordEnabled.value = !val
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const goBack = () => {
|
|
|
router.push('/')
|
|
|
}
|
|
|
|
|
|
let timeInterval = null
|
|
|
onMounted(() => {
|
|
|
updateTime()
|
|
|
timeInterval = setInterval(updateTime, 1000)
|
|
|
getSystemTime()
|
|
|
getPasswordStatus()
|
|
|
})
|
|
|
onUnmounted(() => {
|
|
|
if (timeInterval) clearInterval(timeInterval)
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.control-view {
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
box-sizing: border-box;
|
|
|
position: relative;
|
|
|
overflow: auto;
|
|
|
background: center / cover url('@/assets/images/背景小@2x.png') no-repeat;
|
|
|
background-color: #0A3933;
|
|
|
}
|
|
|
|
|
|
.main-content {
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
padding: 10px 20px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.header-status {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 20px;
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
}
|
|
|
|
|
|
.time-info {
|
|
|
font-size: 18px;
|
|
|
font-weight: 300;
|
|
|
width: 270px;
|
|
|
}
|
|
|
|
|
|
.page-title h1 {
|
|
|
font-size: 30px;
|
|
|
font-weight: bold;
|
|
|
margin: 0;
|
|
|
color: #ffffff;
|
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
|
|
|
}
|
|
|
|
|
|
.system-status {
|
|
|
min-width: 200px;
|
|
|
font-size: 18px;
|
|
|
font-weight: 300;
|
|
|
width: 270px;
|
|
|
}
|
|
|
|
|
|
.control-content {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
gap: 20px;
|
|
|
overflow: hidden;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.main_item {
|
|
|
border: .5px solid #0e9228;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
min-height: 400px;
|
|
|
width: 420px;
|
|
|
|
|
|
.main_title {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
height: 50px;
|
|
|
font-size: 16px;
|
|
|
background-color: rgba(#188549, .3);
|
|
|
color: #fff;
|
|
|
border-bottom: .5px solid #0e9228;
|
|
|
}
|
|
|
|
|
|
.main_content {
|
|
|
padding: 24px 20px;
|
|
|
font-size: 14px;
|
|
|
background-color: rgba(#000000, .3);
|
|
|
flex: 1;
|
|
|
|
|
|
.line {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
.item {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 12px;
|
|
|
|
|
|
&.full-width {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.key {
|
|
|
color: #fff;
|
|
|
flex-shrink: 0;
|
|
|
width: 90px;
|
|
|
}
|
|
|
|
|
|
.value {
|
|
|
flex: 1;
|
|
|
text-align: center;
|
|
|
background-color: rgba(#188549, .3);
|
|
|
color: #fff;
|
|
|
padding: 5px 10px;
|
|
|
min-height: 32px;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
.buttonBox {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
gap: 16px;
|
|
|
margin-top: 24px;
|
|
|
}
|
|
|
|
|
|
.button {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 6px;
|
|
|
padding: 8px 20px;
|
|
|
border-radius: 8px;
|
|
|
cursor: pointer;
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
user-select: none;
|
|
|
|
|
|
&.save {
|
|
|
background-color: #188549;
|
|
|
|
|
|
&:hover {
|
|
|
background-color: #1fa85d;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&.refresh {
|
|
|
background-color: #1565a8;
|
|
|
|
|
|
&:hover {
|
|
|
background-color: #1a7fd4;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.result-box {
|
|
|
margin-top: 20px;
|
|
|
padding: 12px 16px;
|
|
|
background-color: rgba(#188549, .15);
|
|
|
border: 1px solid rgba(#0e9228, .5);
|
|
|
border-radius: 8px;
|
|
|
|
|
|
.result-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
margin-bottom: 6px;
|
|
|
color: rgba(255, 255, 255, 0.85);
|
|
|
font-size: 13px;
|
|
|
|
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.result-key {
|
|
|
color: rgba(255, 255, 255, 0.5);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.bottom-info {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-top: auto;
|
|
|
padding: 10px 30px;
|
|
|
box-sizing: border-box;
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
font-size: 16px;
|
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
width: 100vw;
|
|
|
z-index: 999
|
|
|
}
|
|
|
|
|
|
.back-button {
|
|
|
background: transparent;
|
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
color: rgba(255, 255, 255, 0.8);
|
|
|
|
|
|
&:hover {
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
border-color: rgba(255, 255, 255, 0.6);
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
