From 474a8e2836f08be0cf765b71e3d1cebf1a429ac5 Mon Sep 17 00:00:00 2001
From: Lufaneng <Lufaneng@foxmail.com>
Date: Sat, 7 Jun 2025 11:24:36 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=A8=A1=E5=BC=8F=E9=9D=99?=
 =?UTF-8?q?=E6=80=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts               |   5 +
 src/router/index.js               |   6 +
 src/views/AutomaticMode/index.vue | 971 ++++++++++++++++++++++++++++++
 src/views/HandleControl/index.vue |   2 +
 src/views/Menu/index.vue          |   2 +-
 src/views/ParamsConfig/index.vue  |   2 +
 6 files changed, 987 insertions(+), 1 deletion(-)
 create mode 100644 src/views/AutomaticMode/index.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index bb69ae9..49c6c64 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -9,13 +9,18 @@ declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     Pagination: typeof import('./components/Pagination/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/router/index.js b/src/router/index.js
index 11b1052..9d2e0d6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -47,6 +47,12 @@ export const routes = [
     component: () => import('@/views/ParamsConfig/index.vue'),
     meta: { title: '参数设置' },
   },
+  {
+    path: '/automatic-mode',
+    name: 'AutomaticMode',
+    component: () => import('@/views/AutomaticMode/index.vue'),
+    meta: { title: '自动模式' },
+  },
 ]
 
 const router = createRouter({
diff --git a/src/views/AutomaticMode/index.vue b/src/views/AutomaticMode/index.vue
new file mode 100644
index 0000000..e3f522b
--- /dev/null
+++ b/src/views/AutomaticMode/index.vue
@@ -0,0 +1,971 @@
+<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">
+                    <!-- <span>系统已运行：{{ systemRuntime }}</span> -->
+                </div>
+            </div>
+
+            <!-- 主体区域 -->
+            <div class="control-content">
+                <div class="power-section">
+                    <div class="tabBox">
+                        <div class="tabItem selected">
+                            模式1
+                        </div>
+                        <div class="tabItem">
+                            模式2
+                        </div>
+                        <div class="tabItem">
+                            模式3
+                        </div>
+                    </div>
+                    <div class="power-params">
+                        <div class="energy-card" v-for="item in 3">
+                            <div class="energy-name"><span>开</span><span>始</span><span>任</span><span>务</span></div>
+                            <div class="param-list">
+                                <div class="item">
+                                    <div>通道</div>
+                                    <div>回路</div>
+                                    <div>亮度</div>
+                                </div>
+                                <div class="item" v-for="ele in 10">
+                                    <div>{{ ele }}</div>
+                                    <div>通</div>
+                                    <div>0</div>
+                                </div>
+                            </div>
+                            <div class="time">
+                                <div>定时时间</div>
+                                <div>18:00:00</div>
+                            </div>
+                            <div class="iconBox">
+                                <el-icon @click="settingDialogVisible = true">
+                                    <Setting />
+                                </el-icon>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 右侧控制面板 -->
+                <div class="control-panel">
+                    <!-- 切换模式 -->
+                    <div class="control-group">
+                        <div class="control-title">
+
+                            <el-icon>
+                                <Setting />
+                            </el-icon>
+                            控制模式
+                        </div>
+                        <el-button class="mode-button active" @click="modeDialogVisible = true">自动模式1</el-button>
+                    </div>
+
+                    <div class="buttonBox">
+                        <el-button icon="RefreshRight" style="margin-left: 0;" class="mode-button" @click="restartSystem">远程重启</el-button>
+                        <el-button icon="Refresh" style="margin-left: 0;" class="brightness-button">刷新</el-button>
+                        <el-button icon="Plus" style="margin-left: 0;" class="brightness-button add" @click="addDialogVisible = true">新增</el-button>
+                        <el-button icon="Delete" style="margin-left: 0;" class="brightness-button del" @click="delMode">删除</el-button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 底部信息 -->
+        <div class="bottom-info">
+            <div class="bottom_item">
+                <div class="time-item">
+                    <span>日出时间：{{ sunriseTime }}</span>
+                </div>
+                <div class="time-item">
+                    <span>日落时间：{{ sunsetTime }}</span>
+                </div>
+            </div>
+            <div style="color:#fff">
+                设备号：{{ commit_uid }}
+            </div>
+            <div class="bottom_item">
+                <!-- <el-button class="restart-button" @click="restartSystem">
+                    <el-icon>
+                        <RefreshRight />
+                    </el-icon>
+                    远程重启
+                </el-button> -->
+                <el-button class="back-button" @click="goBack">
+                    <el-icon>
+                        <HomeFilled />
+                    </el-icon>
+                    返回主界面
+                </el-button>
+            </div>
+        </div>
+
+        <!-- 亮度调节弹窗 -->
+        <!-- <el-dialog v-model="brightnessDialogVisible" title="亮度调节" width="400px" :modal="true" class="brightness-dialog">
+            <div class="brightness-content">
+                <div class="brightness-label">亮度值：{{ currentBrightness }}%</div>
+                <div class="brightness-slider-container">
+                    <el-slider v-model="currentBrightness" :min="0" :max="100" :show-stops="true" class="brightness-slider" />
+                </div>
+            </div>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="brightnessDialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="confirmBrightness">确认</el-button>
+                </div>
+            </template>
+</el-dialog> -->
+        <el-dialog v-model="brightnessDialogVisible" title="亮度调节" width="400px" :modal="true" class="brightness-dialog">
+            <div class="setting-content">
+                <div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;">
+                    <span style="margin-right: 20px;">亮度调节</span> <el-input-number style="width: 200px" v-model="lightFrom.a" :min="0" :max="100">
+                        <template #suffix>
+                            <span>%</span>
+                        </template>
+                    </el-input-number>
+                </div>
+            </div>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="brightnessDialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="brightnessDialogVisible = false">确认</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <el-dialog v-model="modeDialogVisible" title="选择模式" width="600px" :modal="true" class="brightness-dialog">
+            <div class="setting-content">
+                <div class="modeBox">
+                    <el-button v-for="item in 3" :class="item === modeActive ? 'mode-button active' : 'brightness-button'" @click="modeActive = item">模式{{ item }}</el-button>
+                </div>
+            </div>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="modeDialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="modeDialogVisible = false">确认</el-button>
+                </div>
+            </template>
+        </el-dialog>
+        <el-dialog v-model="addDialogVisible" title="新增模式" width="600px" :modal="true" class="brightness-dialog">
+            <div class="setting-content">
+                <div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;">
+                    <span style="margin-right: 20px;">模式名称</span> <el-input style="width: 200px" v-model="modeName">
+
+                    </el-input>
+                </div>
+            </div>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="addDialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="addDialogVisible = false">确认</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <el-dialog v-model="settingDialogVisible" title="设置" width="800px" :modal="true" class="brightness-dialog">
+            <div class="setting-content">
+                <div class="loopBox">
+                    <div class="title">
+                        <div class="left">通道回路 <span class="selectAll" @click="selectAll">全选</span></div>
+                        <div class="right">通道回路 <el-switch v-model="switchValue" inline-prompt active-text="通" inactive-text="不通" /></div>
+                    </div>
+                    <div class="selectBox">
+                        <el-checkbox-group v-model="selectBoxValue">
+                            <el-checkbox v-for="item in 10" :label="'通道回路' + item" :value="'通道回路' + item" border />
+                        </el-checkbox-group>
+                    </div>
+                </div>
+                <div style="margin:10px 0 "><el-button type="primary" @click="brightnessDialogVisible = true">一键调光</el-button></div>
+                <div class="lightBox">
+                    <div class="item" v-for="item in 10">
+                        <div class="title">调光通道{{ item }}</div>
+                        <el-input-number style="width: 95%;" v-model="lightFrom[item]" :min="0" :max="100">
+                            <template #suffix>
+                                <span>%</span>
+                            </template>
+                        </el-input-number>
+                    </div>
+                </div>
+                <div class="timeBox">
+                    <span>时间</span>
+                    <el-time-picker v-model="timeValue" placeholder="请选择" />
+                </div>
+            </div>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="settingDialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="settingDialogVisible = false">确认</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import RPC from '@/utils/rpc'
+import dayjs from 'dayjs'
+
+const switchValue = ref(true)
+const selectBoxValue = ref([])
+const lightFrom = ref({})
+const timeValue = ref('')
+const modeName = ref('')
+
+const selectAll = () => {
+    if (selectBoxValue.value.length !== 10) {
+        selectBoxValue.value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(item => '通道回路' + item)
+    } else {
+        selectBoxValue.value = []
+    }
+}
+
+const commit_uid = localStorage.getItem('central_control_comm_uid')
+
+const router = useRouter()
+const currentTime = ref('')
+const systemRuntime = ref('38分钟')
+const brightnessDialogVisible = ref(false)
+const currentBrightness = ref(50)
+const selectedChannelName = ref(null)
+
+const settingDialogVisible = ref(false)
+const modeDialogVisible = ref(false)
+const addDialogVisible = ref(false)
+const modeActive = ref(1)
+
+const week = ref('')
+const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+
+
+const sunriseTime = ref('')
+const sunsetTime = ref('')
+
+RPC.post('/m9z/getDeviceSunRiseTime', { comm_uid: commit_uid }).then(res => {
+    sunriseTime.value = res.Sunrise ? dayjs(res.Sunrise).format('HH:mm:ss') : ''
+    sunsetTime.value = res.Sunset ? dayjs(res.Sunset).format('HH:mm:ss') : ''
+})
+
+// 更新时间
+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 toggleCircuit = (circuitName) => {
+    if (!info.value.disable) return ElMessage.warning('请切换至手动模式')
+    const circuit = info.value.loops.find(c => c.name === circuitName)
+    if (circuit) {
+        circuit.is_open = !circuit.is_open
+    }
+}
+
+// 打开亮度调节弹窗
+const openBrightnessDialog = (channelName) => {
+    if (!info.value.disable) return ElMessage.warning('请切换至手动模式')
+    selectedChannelName.value = channelName
+    const channel = info.value.loops.find(c => c.name === channelName)
+    if (channel) {
+        currentBrightness.value = channel.pwm
+        brightnessDialogVisible.value = true
+    }
+}
+
+// 确认亮度设置
+const confirmBrightness = () => {
+    const channel = info.value.loops.find(c => c.name === selectedChannelName.value)
+    if (channel) {
+        channel.pwm = currentBrightness.value
+        // ElMessage.success(`${channel.name}亮度已设置为${currentBrightness.value}%`)
+    } else {
+        info.value.loops.forEach(channel => {
+            channel.pwm = currentBrightness.value
+        })
+    }
+    brightnessDialogVisible.value = false
+}
+
+// 打开全局亮度调节
+const openGlobalBrightnessDialog = () => {
+    if (!info.value.disable) return ElMessage.warning('请切换至手动模式')
+    selectedChannelName.value = null
+    currentBrightness.value = 50
+    brightnessDialogVisible.value = true
+}
+
+
+// 返回主界面
+const goBack = () => {
+    router.push('/')
+}
+
+// 重启系统
+const restartSystem = () => {
+    RPC.post('/m9z/setRestart', { comm_uid: commit_uid }).then(res => {
+        ElMessage.success('远程重启成功')
+    })
+}
+
+let timeInterval = null
+
+onMounted(() => {
+    updateTime()
+    timeInterval = setInterval(updateTime, 1000)
+})
+
+onUnmounted(() => {
+    if (timeInterval) {
+        clearInterval(timeInterval)
+    }
+})
+
+const delMode = () => {
+    ElMessageBox.confirm(
+        '确认删除?',
+        '',
+        {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+            customClass: 'del_Message_box'
+        }
+    )
+        .then(() => {
+            ElMessage({
+                type: 'success',
+                message: '删除成功',
+            })
+        })
+}
+</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/handle_control_bg.png') no-repeat;
+}
+
+.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: 30px;
+    box-sizing: border-box;
+    height: calc(100% - 120px);
+}
+
+.power-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    /* width: 500px; */
+    gap: 20px;
+    font-size: 14px;
+
+    .tabBox {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .tabItem {
+            width: 100px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #373C47;
+            color: #fff;
+
+            &:first-child {
+                border-radius: 8px 0 0 8px;
+            }
+
+            &:last-child {
+                border-radius: 0 8px 8px 0;
+            }
+
+            &.selected {
+                background-color: #0881FE;
+            }
+        }
+    }
+}
+
+.power-params {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 10px;
+    height: 100%;
+
+    .time {
+        width: 100px;
+        border-left: 1px solid #ccc;
+
+        div {
+            margin: 10px 0;
+            text-align: center;
+        }
+    }
+
+    .iconBox {
+        height: 100%;
+        width: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #3e4458;
+
+        .el-icon {
+            font-size: 30px;
+            background-color: #fff;
+            background: linear-gradient(180deg, rgba(248, 251, 255, 1) 0%, rgba(248, 251, 255, 1) 0%, rgb(124, 144, 181) 96%, rgba(165, 197, 255, 1) 94.08%);
+            width: 40px;
+            height: 40px;
+            border-radius: 5px;
+            box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.31);
+        }
+    }
+}
+
+.phase-card,
+.energy-card {
+    display: flex;
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 12px;
+    align-items: center;
+    width: 100%;
+    height: 32%;
+    overflow: hidden;
+    /* padding: 15px; */
+    backdrop-filter: blur(10px);
+    color: #fff;
+}
+
+
+.phase-name,
+.energy-name {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.7);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 15px;
+    background-color: #212329;
+    width: 30px;
+    height: 100%;
+}
+
+.param-list {
+    display: flex;
+    flex: 1;
+    height: 100%;
+
+    .item {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        flex: 1;
+
+        div {
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}
+
+.param-item {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+}
+
+.param-label {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.param-value {
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 500;
+}
+
+.circuit-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.circuit-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+}
+
+.circuit-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    width: 18%;
+}
+
+.circuit-status {
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    padding: 8px 12px;
+    color: rgba(255, 255, 255, 0.7);
+    text-align: center;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.circuit-status.active {
+    background: rgba(33, 150, 243, 0.2);
+    border-color: rgba(33, 150, 243, 0.5);
+    color: #64b5f6;
+}
+
+.circuit-icon {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.circuit-icon.active {
+    background: rgba(255, 193, 7, 0.2);
+    border-color: rgba(255, 193, 7, 0.6);
+    color: #ffc107;
+    box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
+}
+
+.circuit-icon:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
+}
+
+.dimming-section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    font-size: 12px;
+}
+
+.dimming-row {
+    display: flex;
+    justify-content: space-between;
+}
+
+.dimming-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    width: 18%;
+}
+
+.channel-label {
+    color: rgba(255, 255, 255, 0.8);
+    text-align: center;
+}
+
+.brightness-display {
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    padding: 6px;
+    color: rgba(255, 255, 255, 0.7);
+    font-weight: bold;
+    text-align: center;
+    width: 100%;
+    box-sizing: border-box;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.brightness-display.active {
+    background: rgba(33, 150, 243, 0.3);
+    border-color: rgba(33, 150, 243, 0.6);
+    color: #64b5f6;
+    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
+}
+
+.brightness-display:hover {
+    background: rgba(255, 255, 255, 0.12);
+    transform: translateY(-2px);
+}
+
+.bottom-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid #eee;
+    width: 100vw;
+    padding: 0 30px;
+    height: 50px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    box-sizing: border-box;
+
+    .bottom_item {
+        display: flex;
+        align-items: center;
+    }
+
+    .time-item {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 16px;
+        margin: 0 20px;
+    }
+
+    .back-button,
+    .restart-button {
+        width: 100%;
+        height: 38px;
+        border-radius: 19px;
+        font-size: 16px;
+        font-weight: 500;
+        transition: all 0.3s ease;
+    }
+
+    .back-button {
+        background-color: #000;
+        color: #fff;
+        border: #000;
+    }
+}
+
+.control-panel {
+    width: 150px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 20px;
+
+    .buttonBox {
+        .el-button {
+            margin: 15px 0;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+.control-group {
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 12px;
+    padding: 20px 10px;
+    backdrop-filter: blur(10px);
+}
+
+.control-title {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 16px;
+    font-weight: 500;
+    text-align: center;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+
+    .el-icon {
+        font-size: 20px;
+        margin-right: 10px;
+    }
+}
+
+.mode-button,
+.setting-button,
+.brightness-button {
+    width: 100%;
+    height: 45px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    margin-bottom: 10px;
+
+    &.add {
+        background-color: #397ff6;
+    }
+
+    &.del {
+        background-color: #d42d1f;
+    }
+}
+
+.mode-button {
+    background: rgba(255, 255, 255, 0.9);
+    border: none;
+    color: #333;
+}
+
+.mode-button.active {
+    background: #ffffff;
+    color: #1976d2;
+}
+
+.setting-button {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.setting-button.active {
+    background: #1976d2;
+    border-color: #1976d2;
+    color: #ffffff;
+}
+
+.brightness-button {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: rgba(255, 255, 255, 0.9);
+}
+
+
+// .setting-button:hover,
+// .brightness-button:hover {
+//     background: rgba(255, 255, 255, 0.15);
+//     transform: translateY(-2px);
+// }
+
+/* 弹窗样式 */
+:deep(.brightness-dialog) {
+    background: rgba(30, 30, 30, 0.95);
+    backdrop-filter: blur(20px);
+}
+
+:deep(.brightness-dialog .el-dialog__header) {
+    // background: rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+:deep(.brightness-dialog .el-dialog__title) {
+    color: #ffffff;
+    font-size: 18px;
+    font-weight: 500;
+}
+
+:deep(.brightness-dialog .el-dialog__body) {
+    // background: rgba(255, 255, 255, 0.05);
+    color: #ffffff;
+}
+
+.brightness-content {
+    padding: 20px 0;
+}
+
+.brightness-label {
+    text-align: center;
+    font-size: 18px;
+    font-weight: 500;
+    margin-bottom: 30px;
+    color: #ffffff;
+}
+
+.brightness-slider-container {
+    padding: 0 20px;
+}
+
+:deep(.brightness-slider .el-slider__bar) {
+    background: #1976d2;
+}
+
+:deep(.brightness-slider .el-slider__button) {
+    border-color: #1976d2;
+}
+
+:deep(.brightness-slider .el-slider__stop) {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.dialog-footer {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+}
+
+.setting-content {
+    .loopBox {
+        .title {
+            width: 100%;
+            height: 50px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .selectAll {
+                color: #2d5cf6;
+                margin-left: 20px;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .selectBox {
+        .el-checkbox-group {
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+
+            .el-checkbox {
+                width: 18%;
+                margin-right: 0;
+                height: 40px;
+                margin-bottom: 20px;
+            }
+        }
+    }
+
+    .lightBox {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        .item {
+            .title {
+                margin-bottom: 5px;
+            }
+
+            margin-bottom: 10px;
+            text-align: center;
+            width: 19%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            :deep(.el-input-number__increase) {
+                background-color: transparent;
+                color: #fff;
+            }
+
+            :deep(.el-input-number__decrease) {
+                background-color: transparent;
+                color: #fff;
+            }
+
+        }
+    }
+
+    :deep(.el-input__wrapper) {
+        background-color: transparent;
+        color: #fff;
+
+        input {
+            color: #fff;
+        }
+    }
+
+    .timeBox {
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+
+        >span {
+            margin-right: 20px;
+        }
+    }
+
+    .modeBox {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-top: 20px;
+
+        .el-button {
+            min-width: 100px;
+            width: auto;
+        }
+    }
+}
+</style>
+
+<style lang="scss">
+.del_Message_box {
+    background: rgba(30, 30, 30, 0.95);
+    backdrop-filter: blur(20px);
+
+    .el-message-box__message {
+        color: #fff;
+    }
+}
+</style>
diff --git a/src/views/HandleControl/index.vue b/src/views/HandleControl/index.vue
index 9c482a6..50091e3 100644
--- a/src/views/HandleControl/index.vue
+++ b/src/views/HandleControl/index.vue
@@ -543,6 +543,7 @@ onUnmounted(() => {
 .time-info {
     font-size: 18px;
     font-weight: 300;
+    width: 270px;
 }
 
 .page-title h1 {
@@ -557,6 +558,7 @@ onUnmounted(() => {
     min-width: 200px;
     font-size: 18px;
     font-weight: 300;
+    width: 270px;
 }
 
 .control-content {
diff --git a/src/views/Menu/index.vue b/src/views/Menu/index.vue
index c360b2e..d9da7a9 100644
--- a/src/views/Menu/index.vue
+++ b/src/views/Menu/index.vue
@@ -65,7 +65,7 @@ const functionCards = [
     { key: 'monitor', title: '实时监控', icon: Camera, route: '' },
     { key: 'control', title: '手动控制', icon: Operation, route: '/handle-control' },
     { key: 'setting', title: '参数设置', icon: Setting, route: '/params-config' },
-    { key: 'auto', title: '自动模式', icon: VideoPlay, route: '' },
+    { key: 'auto', title: '自动模式', icon: VideoPlay, route: '/automatic-mode' },
     { key: 'alarm', title: '报警浏览', icon: Bell, route: '' }
 ]
 
diff --git a/src/views/ParamsConfig/index.vue b/src/views/ParamsConfig/index.vue
index d3bf4e0..6b84302 100644
--- a/src/views/ParamsConfig/index.vue
+++ b/src/views/ParamsConfig/index.vue
@@ -232,6 +232,7 @@ onUnmounted(() => {
 .time-info {
     font-size: 18px;
     font-weight: 300;
+    width: 270px;
 }
 
 .page-title h1 {
@@ -246,6 +247,7 @@ onUnmounted(() => {
     min-width: 200px;
     font-size: 18px;
     font-weight: 300;
+    width: 270px;
 }
 
 .control-content {