diff --git a/package-lock.json b/package-lock.json
index a017240..c780bae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,12 @@
       "version": "1.0.0",
       "dependencies": {
         "axios": "^1.7.9",
+        "echarts": "^5.6.0",
         "element-plus": "^2.9.4",
         "nprogress": "^0.2.0",
         "pinia": "^2.3.1",
         "vue": "^3.5.13",
+        "vue-echarts": "^7.0.3",
         "vue-router": "^4.5.0"
       },
       "devDependencies": {
@@ -2591,6 +2593,22 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.97",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.97.tgz",
@@ -5565,6 +5583,51 @@
         }
       }
     },
+    "node_modules/vue-echarts": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-7.0.3.tgz",
+      "integrity": "sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "^0.13.11"
+      },
+      "peerDependencies": {
+        "@vue/runtime-core": "^3.0.0",
+        "echarts": "^5.5.1",
+        "vue": "^2.7.0 || ^3.1.1"
+      },
+      "peerDependenciesMeta": {
+        "@vue/runtime-core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-echarts/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.4.3",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
@@ -5728,6 +5791,21 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
     }
   }
 }
diff --git a/package.json b/package.json
index f816493..8b336ac 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,12 @@
   },
   "dependencies": {
     "axios": "^1.7.9",
+    "echarts": "^5.6.0",
     "element-plus": "^2.9.4",
     "nprogress": "^0.2.0",
     "pinia": "^2.3.1",
     "vue": "^3.5.13",
+    "vue-echarts": "^7.0.3",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
diff --git a/src/components.d.ts b/src/components.d.ts
index 09a22b1..2bf71f2 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -21,6 +21,8 @@ declare module 'vue' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     Pagination: typeof import('./components/Pagination/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/router/index.js b/src/router/index.js
index 9d2e0d6..bf324bd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -53,6 +53,12 @@ export const routes = [
     component: () => import('@/views/AutomaticMode/index.vue'),
     meta: { title: '自动模式' },
   },
+  {
+    path: '/alarm-information',
+    name: 'AlarmInformation',
+    component: () => import('@/views/AlarmInformation/index.vue'),
+    meta: { title: '报警预览' },
+  },
 ]
 
 const router = createRouter({
diff --git a/src/views/AlarmInformation/index.vue b/src/views/AlarmInformation/index.vue
new file mode 100644
index 0000000..a9bab2b
--- /dev/null
+++ b/src/views/AlarmInformation/index.vue
@@ -0,0 +1,267 @@
+<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">
+                <el-table :data="tableData" style="width: 100%" height="400" stripe>
+                    <el-table-column align="center" prop="date" label="Date" width="180" />
+                    <el-table-column align="center" prop="name" label="Name" width="180" />
+                    <el-table-column align="center" prop="address" label="Address" />
+                </el-table>
+                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 30, 50, 100]" :total="total" :pager-count="5" v-model:page-size="pageSize" v-model:current-page="currentPage" background layout="sizes,prev, pager, next,jumper" />
+            </div>
+        </div>
+        <!-- 底部信息 -->
+        <div class="bottom-info">
+            <div style="color:#fff">
+                设备号：{{ commit_uid }}
+            </div>
+            <div class="bottom_item">
+                <!-- <div class="time-item">
+                    <span>日出时间：{{ sunriseTime }}</span>
+                </div>
+                <div class="time-item">
+                    <span>日落时间：{{ sunsetTime }}</span>
+                </div> -->
+            </div>
+            <div class="bottom_item">
+                <el-button class="restart-button">
+                    <el-icon>
+                        <RefreshRight />
+                    </el-icon>
+                    刷新
+                </el-button>
+                <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';
+
+const router = useRouter()
+const currentTime = ref('')
+const systemRuntime = ref('38分钟')
+const commit_uid = localStorage.getItem('central_control_comm_uid')
+
+const total = ref(100)
+const pageSize = ref(10)
+const currentPage = ref(1)
+const handleSizeChange = () => {
+    console.log('handleSizeChange')
+    currentPage.value = 1
+}
+const handleCurrentChange = () => {
+    console.log('handleCurrentChange')
+}
+
+
+const week = ref('')
+const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+// 更新时间
+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 restartSystem = () => {
+    RPC.post('/m9z/setRestart', { comm_uid: commit_uid }).then(res => {
+        ElMessage.success('重启成功')
+    })
+}
+
+const tableData = [
+    {
+        date: '2016-05-03',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles',
+    },
+    {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles',
+    },
+    {
+        date: '2016-05-04',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles',
+    },
+    {
+        date: '2016-05-01',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles',
+    },
+]
+
+
+
+// 返回主界面
+const goBack = () => {
+    router.push('/')
+}
+
+let timeInterval = null
+
+onMounted(() => {
+    updateTime()
+    timeInterval = setInterval(updateTime, 1000)
+})
+
+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/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 {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+
+    :deep(.el-table__header) {
+        .el-table__cell {
+            background-color: #0881FE;
+            color: #fff;
+        }
+    }
+}
+
+
+.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;
+    }
+}
+
+.el-input {
+    background-color: #21232A;
+
+    :deep(.el-input__wrapper) {
+        background-color: #212329;
+        box-shadow: none;
+        border: 1px soild #3B3D45;
+
+        input {
+            color: #8088AA;
+        }
+    }
+}
+</style>
diff --git a/src/views/Menu/index.vue b/src/views/Menu/index.vue
index d9da7a9..ce998a1 100644
--- a/src/views/Menu/index.vue
+++ b/src/views/Menu/index.vue
@@ -54,7 +54,7 @@ import {
 const currentTime = ref('')
 const router = useRouter()
 const route = useRoute()
-console.log(route.query.comm_uid)
+// console.log(route.query.comm_uid)
 if (route.query.comm_uid) {
     localStorage.setItem('central_control_comm_uid', route.query.comm_uid)
 }
@@ -62,11 +62,11 @@ if (route.query.comm_uid) {
 const commit_uid = localStorage.getItem('central_control_comm_uid')
 
 const functionCards = [
-    { key: 'monitor', title: '实时监控', icon: Camera, route: '' },
+    { key: 'monitor', title: '实时监控', icon: Camera, route: '/monitoring' },
     { key: 'control', title: '手动控制', icon: Operation, route: '/handle-control' },
     { key: 'setting', title: '参数设置', icon: Setting, route: '/params-config' },
     { key: 'auto', title: '自动模式', icon: VideoPlay, route: '/automatic-mode' },
-    { key: 'alarm', title: '报警浏览', icon: Bell, route: '' }
+    { key: 'alarm', title: '报警浏览', icon: Bell, route: '/alarm-information' }
 ]
 
 const updateTime = () => {
diff --git a/src/views/Monitoring/index.vue b/src/views/Monitoring/index.vue
index 0cee226..ea0ff00 100644
--- a/src/views/Monitoring/index.vue
+++ b/src/views/Monitoring/index.vue
@@ -1,11 +1,870 @@
 <template>
-    <div class="Monitoring">
-        111
+    <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">
+                    <!-- ABC三相电力参数 -->
+                    <div class="power-params">
+                        <div v-for="phase in powerPhases" :key="phase.name" class="phase-card">
+                            <div class="phase-name"><span>{{ phase.name }}</span>相</div>
+                            <div class="param-list">
+                                <div class="param-item">
+                                    <span class="param-label">电压:</span>
+                                    <span class="param-value">{{ phase.voltage }}</span>
+                                </div>
+                                <div class="param-item">
+                                    <span class="param-label">电流:</span>
+                                    <span class="param-value">{{ phase.current }}</span>
+                                </div>
+                                <div class="param-item">
+                                    <span class="param-label">有功功率:</span>
+                                    <span class="param-value">{{ phase.power }}</span>
+                                </div>
+                                <div class="param-item">
+                                    <span class="param-label">功率因数:</span>
+                                    <span class="param-value">{{ phase.factor }}</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 电能参数 -->
+                        <div class="energy-card">
+                            <div class="energy-name"><span>电</span><span>能</span><span>参</span><span>数</span></div>
+                            <div class="param-list">
+                                <div class="param-item">
+                                    <span class="param-label">DC电压:</span>
+                                    <span class="param-value">{{ energyParams.dcVoltage }}</span>
+                                </div>
+                                <div class="param-item">
+                                    <span class="param-label">有功电能:</span>
+                                    <span class="param-value">{{ energyParams.activeEnergy }}</span>
+                                </div>
+                                <div class="param-item">
+                                    <span class="param-label">有功功率:</span>
+                                    <span class="param-value">{{ energyParams.activePower }}</span>
+                                </div>
+                                <div class="param-item">
+                                    <span class="param-label">功率因数:</span>
+                                    <span class="param-value">{{ energyParams.powerFactor }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="control-group">
+                            <div class="control-title">
+
+                                <el-icon>
+                                    <Setting />
+                                </el-icon>
+                                当前模式
+                            </div>
+                            <el-button class="mode-button active" @click="info.disable = !info.disable">{{ info.disable ? '手动' : '自动' }}</el-button>
+                        </div>
+                    </div>
+                    <div class="circuit-section">
+                        <!-- 上排回路 -->
+                        <div class="circuit-row">
+                            <div v-for="(circuit, index) in info.loops.slice(0, 5)" :key="circuit.name" class="circuit-item">
+                                <div class="circuit-status" :class="{ active: circuit.is_open }">
+                                    回路{{ index + 1 }}：{{ circuit.is_open ? '打开' : '关闭' }}
+                                </div>
+                                <div class="circuit-icon" :class="{ active: circuit.is_open }">
+                                    <el-icon>
+                                        <Sunny />
+                                    </el-icon>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 下排回路 -->
+                        <div class="circuit-row">
+                            <div v-for="(circuit, index) in info.loops.slice(5, 10)" :key="circuit.name" class="circuit-item">
+                                <div class="circuit-status" :class="{ active: circuit.is_open }">
+                                    回路{{ index + 6 }}：{{ circuit.is_open ? '打开' : '关闭' }}
+                                </div>
+                                <div class="circuit-icon" :class="{ active: circuit.is_open }">
+                                    <el-icon>
+                                        <Sunny />
+                                    </el-icon>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 调光通道区域 -->
+                    <div class="dimming-section">
+                        <!-- 上排调光通道 -->
+                        <div class="dimming-row">
+                            <div v-for="(channel, index) in info.loops.slice(0, 5)" :key="channel.name" class="dimming-item">
+                                <div class="channel-label">调光通道{{ index + 1 }}</div>
+                                <div class="brightness-display" :class="{ active: channel.pwm > 0 }">
+                                    {{ channel.pwm }}%
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 下排调光通道 -->
+                        <div class="dimming-row">
+                            <div v-for="(channel, index) in info.loops.slice(5, 10)" :key="channel.name" class="dimming-item">
+                                <div class="channel-label">调光通道{{ index + 6 }}</div>
+                                <div class="brightness-display" :class="{ active: channel.pwm > 0 }">
+                                    {{ channel.pwm }}%
+                                </div>
+                            </div>
+                        </div>
+                    </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>
     </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 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 week = ref('')
+const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+
+// 电力参数数据
+const powerPhases = ref([
+    {
+        name: 'A',
+        voltage: '0V',
+        current: '0A',
+        power: '20.88kw',
+        factor: '0'
+    },
+    {
+        name: 'B',
+        voltage: '0V',
+        current: '0A',
+        power: '0kw',
+        factor: '0'
+    },
+    {
+        name: 'C',
+        voltage: '0V',
+        current: '0A',
+        power: '0kw',
+        factor: '0'
+    }
+])
+
+const energyParams = ref({
+    dcVoltage: '0.0V',
+    activeEnergy: '0kwh',
+    activePower: '0kw',
+    powerFactor: '0'
+})
+
+
+const info = ref({
+    "disable": false,
+    "backup_byte1": 0,
+    "loops": [
+        {
+            "index": 0,
+            "name": "#1",
+            "is_open": false,
+            "pwm": 0
+        },
+        {
+            "index": 1,
+            "name": "#2",
+            "is_open": false,
+            "pwm": 0
+        },
+        {
+            "index": 2,
+            "name": "#3",
+            "is_open": false,
+            "pwm": 0
+        },
+        {
+            "index": 3,
+            "name": "#4",
+            "is_open": false,
+            "pwm": 0
+        },
+        {
+            "index": 4,
+            "name": "#5",
+            "is_open": false,
+            "pwm": 0
+        },
+        {
+            "index": 5,
+            "name": "#6",
+            "is_open": false,
+            "pwm": 0
+        },
+        {
+            "index": 6,
+            "name": "#7",
+            "is_open": false,
+            "pwm": 0
+        },
+        {
+            "index": 7,
+            "name": "#8",
+            "is_open": false,
+            "pwm": 0
+        },
+        {
+            "index": 8,
+            "name": "#9",
+            "is_open": false,
+            "pwm": 0
+        },
+        {
+            "index": 9,
+            "name": "#10",
+            "is_open": false,
+            "pwm": 0
+        }
+    ],
+    "backup_byte4": 0
+})
+
+const getInfo = () => {
+    RPC.post('/m9z/getDeviceManualInfo', { comm_uid: commit_uid }).then(res => {
+        info.value = res
+    })
+    RPC.post('/adl400/readPhaseData', { comm_uid: commit_uid }).then(res => {
+        powerPhases.value[0].voltage = res.aVoltage + 'V'
+        powerPhases.value[0].current = res.aElectricCurrent + 'A'
+        powerPhases.value[0].power = res.aPower + 'Kw'
+        powerPhases.value[0].factor = res.aPowerFactor
+
+        powerPhases.value[1].voltage = res.bVoltage + 'V'
+        powerPhases.value[1].current = res.bElectricCurrent + 'A'
+        powerPhases.value[1].power = res.bPower + 'Kw'
+        powerPhases.value[1].factor = res.bPowerFactor
+
+        powerPhases.value[2].voltage = res.cVoltage + 'V'
+        powerPhases.value[2].current = res.cElectricCurrent + 'A'
+        powerPhases.value[2].power = res.cPower + 'Kw'
+        powerPhases.value[2].factor = res.cPowerFactor
+
+        energyParams.value.activeEnergy = res.activeEnergy + 'A'
+        energyParams.value.powerFactor = res.powerFactor
+    })
+
+    // 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') : ''
+    // })
+}
+getInfo()
+
+const oldInfo = ref('')
+// watch(info, () => {
+//     if (oldInfo.value === JSON.stringify(info.value)) return
+//     RPC.post('/m9z/setDeviceManualInfo', { comm_uid: commit_uid, ...info.value }).finally(() => {
+//         if (!isSync.value) {
+//             isSync.value = true
+//             getInfo()
+//         }
+//     })
+//     oldInfo.value = JSON.stringify(info.value)
+// }, { deep: true })
+
+const sunriseTime = ref('')
+const sunsetTime = ref('')
+
+// 更新时间
+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 openLightSettings = () => {
+    if (!info.value.disable) return ElMessage.warning('请切换至手动模式')
+    info.value.loops.forEach(circuit => {
+        circuit.is_open = true
+    })
+    // dimmingChannels.value.forEach(channel => {
+    //     channel.brightness = 100
+    // })
+}
+
+// 全关灯光
+const turnOffAll = () => {
+    if (!info.value.disable) return ElMessage.warning('请切换至手动模式')
+    info.value.loops.forEach(circuit => {
+        circuit.is_open = false
+    })
+    // dimmingChannels.value.forEach(channel => {
+    //     channel.brightness = 0
+    // })
+    // ElMessage.success('所有灯光已关闭')
+}
+
+// 返回主界面
+const goBack = () => {
+    router.push('/')
+}
+
+// 重启系统
+const restartSystem = () => {
+    RPC.post('/m9z/setRestart', { comm_uid: commit_uid }).then(res => {
+        ElMessage.success('远程重启成功')
+        getInfo()
+    })
+}
+
+let timeInterval = null
+
+onMounted(() => {
+    updateTime()
+    timeInterval = setInterval(updateTime, 1000)
+})
+
+onUnmounted(() => {
+    if (timeInterval) {
+        clearInterval(timeInterval)
+    }
+})
 </script>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style scoped lang="scss">
+.control-view {
+    width: 100vw;
+    height: 100vh;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    background: center / cover url('@/assets/images/handle_control_bg.png') no-repeat;
+}
+
+.main-content {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding: 10px 20px;
+    box-sizing: border-box;
+}
+
+.header-status {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    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% - 110px);
+}
+
+.power-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    // justify-content: space-between;
+    /* width: 500px; */
+    gap: 20px;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.power-params {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.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;
+    width: 23%;
+    overflow: hidden;
+    /* padding: 15px; */
+    backdrop-filter: blur(10px);
+}
+
+
+.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-direction: column;
+    padding: 10px;
+    flex: 1;
+    gap: 8px;
+}
+
+.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;
+}
+
+.control-group {
+    width: 150px;
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 12px;
+    padding: 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;
+}
+
+.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;
+    padding-top: 20px;
+}
+</style>