接口对接

src/components.d.ts

@@ -7,45 +7,17 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    ElAside: typeof import('element-plus/es')['ElAside']
-    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
-    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElMain: typeof import('element-plus/es')['ElMain']
-    ElMenu: typeof import('element-plus/es')['ElMenu']
-    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    IEpHelpFilled: typeof import('~icons/ep/help-filled')['default']
-    IEpHomeFilled: typeof import('~icons/ep/home-filled')['default']
-    IEpMenu: typeof import('~icons/ep/menu')['default']
-    IEpMessageBox: typeof import('~icons/ep/message-box')['default']
-    IEpPlus: typeof import('~icons/ep/plus')['default']
-    IEpScaleToOriginal: typeof import('~icons/ep/scale-to-original')['default']
     Pagination: typeof import('./components/Pagination/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
-  }
 }

src/views/HandleControl/index.vue

@@ -5,13 +5,13 @@
             <!-- 顶部状态栏 -->
             <div class="header-status">
                 <div class="time-info">
-                    <span>{{ currentTime }} 星期五</span>
+                    <span>{{ currentTime }} {{ week }}</span>
                 </div>
                 <div class="page-title">
                     <h1>手动控制</h1>
                 </div>
                 <div class="system-status">
-                    <span>系统已运行：{{ systemRuntime }}</span>
+                    <!-- <span>系统已运行：{{ systemRuntime }}</span> -->
                 </div>
             </div>
 
@@ -71,11 +71,11 @@
                     <div class="circuit-section">
                         <!-- 上排回路 -->
                         <div class="circuit-row">
-                            <div v-for="circuit in circuits.slice(0, 5)" :key="circuit.id" class="circuit-item">
+                            <div v-for="(circuit, index) in info.loops.slice(0, 5)" :key="circuit.name" class="circuit-item">
-                                <div class="circuit-status" :class="{ active: circuit.status === '打开' }">
+                                <div class="circuit-status" :class="{ active: circuit.is_open }">
-                                    {{ circuit.name }}：{{ circuit.status }}
+                                    回路{{ index + 1 }}：{{ circuit.is_open ? '打开' : '关闭' }}
                                 </div>
-                                <div class="circuit-icon" :class="{ active: circuit.status === '打开' }" @click="toggleCircuit(circuit.id)">
+                                <div class="circuit-icon" :class="{ active: circuit.is_open }" @click="toggleCircuit(circuit.name)">
                                     <el-icon>
                                         <Sunny />
                                     </el-icon>
@@ -85,11 +85,11 @@
 
                         <!-- 下排回路 -->
                         <div class="circuit-row">
-                            <div v-for="circuit in circuits.slice(5, 10)" :key="circuit.id" class="circuit-item">
+                            <div v-for="(circuit, index) in info.loops.slice(5, 10)" :key="circuit.name" class="circuit-item">
-                                <div class="circuit-status" :class="{ active: circuit.status === '打开' }">
+                                <div class="circuit-status" :class="{ active: circuit.is_open }">
-                                    {{ circuit.name }}：{{ circuit.status }}
+                                    回路{{ index + 6 }}：{{ circuit.is_open ? '打开' : '关闭' }}
                                 </div>
-                                <div class="circuit-icon" :class="{ active: circuit.status === '打开' }" @click="toggleCircuit(circuit.id)">
+                                <div class="circuit-icon" :class="{ active: circuit.is_open }" @click="toggleCircuit(circuit.name)">
                                     <el-icon>
                                         <Sunny />
                                     </el-icon>
@@ -102,20 +102,20 @@
                     <div class="dimming-section">
                         <!-- 上排调光通道 -->
                         <div class="dimming-row">
-                            <div v-for="channel in dimmingChannels.slice(0, 5)" :key="channel.id" class="dimming-item">
+                            <div v-for="(channel, index) in info.loops.slice(0, 5)" :key="channel.name" class="dimming-item">
-                                <div class="channel-label">{{ channel.name }}</div>
+                                <div class="channel-label">调光通道{{ index + 1 }}</div>
-                                <div class="brightness-display" :class="{ active: channel.brightness > 0 }" @click="openBrightnessDialog(channel.id)">
+                                <div class="brightness-display" :class="{ active: channel.pwm > 0 }" @click="openBrightnessDialog(channel.name)">
-                                    {{ channel.brightness }}%
+                                    {{ channel.pwm }}%
                                 </div>
                             </div>
                         </div>
 
                         <!-- 下排调光通道 -->
                         <div class="dimming-row">
-                            <div v-for="channel in dimmingChannels.slice(5, 10)" :key="channel.id" class="dimming-item">
+                            <div v-for="(channel, index) in info.loops.slice(5, 10)" :key="channel.name" class="dimming-item">
-                                <div class="channel-label">{{ channel.name }}</div>
+                                <div class="channel-label">调光通道{{ index + 6 }}</div>
-                                <div class="brightness-display" :class="{ active: channel.brightness > 0 }" @click="openBrightnessDialog(channel.id)">
+                                <div class="brightness-display" :class="{ active: channel.pwm > 0 }" @click="openBrightnessDialog(channel.name)">
-                                    {{ channel.brightness }}%
+                                    {{ channel.pwm }}%
                                 </div>
                             </div>
                         </div>
@@ -171,6 +171,9 @@
                     <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>
@@ -206,46 +209,73 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+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 selectedChannelId = ref(null)
+const selectedChannelName = ref(null)
+
+const week = ref('')
+const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+
+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
+})
 
 // 电力参数数据
 const powerPhases = ref([
     {
         name: 'A',
-        voltage: '220.5V',
+        voltage: '0V',
-        current: '10.00A',
+        current: '0A',
         power: '20.88kw',
-        factor: '0.99'
+        factor: '0'
     },
     {
         name: 'B',
-        voltage: '220.5V',
+        voltage: '0V',
-        current: '10.00A',
+        current: '0A',
-        power: '20.88kw',
+        power: '0kw',
-        factor: '0.99'
+        factor: '0'
     },
     {
         name: 'C',
-        voltage: '220.5V',
+        voltage: '0V',
-        current: '10.00A',
+        current: '0A',
-        power: '20.88kw',
+        power: '0kw',
-        factor: '0.99'
+        factor: '0'
     }
 ])
 
 const energyParams = ref({
     dcVoltage: '0.0V',
-    activeEnergy: '88.88kwh',
+    activeEnergy: '0kwh',
-    activePower: '20.88kw',
+    activePower: '0kw',
-    powerFactor: '0.99'
+    powerFactor: '0'
 })
 
 // 回路控制数据
@@ -276,8 +306,105 @@ const dimmingChannels = ref([
     { id: 10, name: '调光通道10', brightness: 0 }
 ])
 
-const sunriseTime = ref('05时38分00秒')
+const info = ref({
-const sunsetTime = ref('19时08分00秒')
+    "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 isSync = ref(true)
+const getInfo = () => {
+    isSync.value = true
+    RPC.post('/m9z/getDeviceManualInfo', { comm_uid: commit_uid }).then(res => {
+        info.value = res
+        setTimeout(() => {
+            isSync.value = false
+        }, 1000);
+    })
+}
+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('')
+
+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 = () => {
@@ -289,37 +416,38 @@ const updateTime = () => {
     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 = (circuitId) => {
+const toggleCircuit = (circuitName) => {
-    const circuit = circuits.value.find(c => c.id === circuitId)
+    const circuit = info.value.loops.find(c => c.name === circuitName)
     if (circuit) {
-        circuit.status = circuit.status === '关闭' ? '打开' : '关闭'
+        circuit.is_open = !circuit.is_open
-        ElMessage.success(`${circuit.name}已${circuit.status}`)
     }
 }
 
 // 打开亮度调节弹窗
-const openBrightnessDialog = (channelId) => {
+const openBrightnessDialog = (channelName) => {
-    selectedChannelId.value = channelId
+    selectedChannelName.value = channelName
-    const channel = dimmingChannels.value.find(c => c.id === channelId)
+    const channel = info.value.loops.find(c => c.name === channelName)
     if (channel) {
-        currentBrightness.value = channel.brightness
+        currentBrightness.value = channel.pwm
         brightnessDialogVisible.value = true
     }
 }
 
 // 确认亮度设置
 const confirmBrightness = () => {
-    const channel = dimmingChannels.value.find(c => c.id === selectedChannelId.value)
+    const channel = info.value.loops.find(c => c.name === selectedChannelName.value)
     if (channel) {
-        channel.brightness = currentBrightness.value
+        channel.pwm = currentBrightness.value
-        ElMessage.success(`${channel.name}亮度已设置为${currentBrightness.value}%`)
+        // ElMessage.success(`${channel.name}亮度已设置为${currentBrightness.value}%`)
     } else {
-        dimmingChannels.value.forEach(channel => {
+        info.value.loops.forEach(channel => {
-            channel.brightness = currentBrightness.value
+            channel.pwm = currentBrightness.value
         })
     }
     brightnessDialogVisible.value = false
@@ -327,31 +455,30 @@ const confirmBrightness = () => {
 
 // 打开全局亮度调节
 const openGlobalBrightnessDialog = () => {
-    selectedChannelId.value = null
+    selectedChannelName.value = null
     currentBrightness.value = 50
     brightnessDialogVisible.value = true
 }
 
 // 全开灯光
 const openLightSettings = () => {
-    circuits.value.forEach(circuit => {
+    info.value.loops.forEach(circuit => {
-        circuit.status = '打开'
+        circuit.is_open = true
     })
     // dimmingChannels.value.forEach(channel => {
     //     channel.brightness = 100
     // })
-    ElMessage.success('所有回路已打开')
 }
 
 // 全关灯光
 const turnOffAll = () => {
-    circuits.value.forEach(circuit => {
+    info.value.loops.forEach(circuit => {
-        circuit.status = '关闭'
+        circuit.is_open = false
-    })
-    dimmingChannels.value.forEach(channel => {
-        channel.brightness = 0
     })
-    ElMessage.success('所有灯光已关闭')
+    // dimmingChannels.value.forEach(channel => {
+    //     channel.brightness = 0
+    // })
+    // ElMessage.success('所有灯光已关闭')
 }
 
 // 返回主界面
@@ -361,7 +488,10 @@ const goBack = () => {
 
 // 重启系统
 const restartSystem = () => {
-    ElMessage.warning('远程重启功能开发中...')
+    RPC.post('/m9z/setRestart', { comm_uid: commit_uid }).then(res => {
+        ElMessage.success('远程重启成功')
+        getInfo()
+    })
 }
 
 let timeInterval = null
@@ -419,6 +549,7 @@ onUnmounted(() => {
 }
 
 .system-status {
+    min-width: 200px;
     font-size: 18px;
     font-weight: 300;
 }

src/views/Menu/index.vue

@@ -29,7 +29,7 @@
             <!-- 底部状态栏 -->
             <div class="status-bar">
                 <div class="status-item">
-                    设备号：RX88888
+                    设备号：{{ commit_uid }}
                 </div>
                 <div class="status-item">
                     版本号：1.0.0
@@ -56,9 +56,11 @@ const router = useRouter()
 const route = useRoute()
 console.log(route.query.comm_uid)
 if (route.query.comm_uid) {
-    localStorage.setItem('central_control-comm_uid', route.query.comm_uid)
+    localStorage.setItem('central_control_comm_uid', route.query.comm_uid)
 }
 
+const commit_uid = localStorage.getItem('central_control_comm_uid')
+
 const functionCards = [
     { key: 'monitor', title: '实时监控', icon: Camera, route: '' },
     { key: 'control', title: '手动控制', icon: Operation, route: '/handle-control' },
@@ -111,7 +113,7 @@ onUnmounted(() => {
     height: 100vh;
     position: relative;
     overflow: hidden;
-    background: center / cover url('@/assets/images/menu/backgroundImg.png') no-repeat;
+    background: center / cover url('@/assets/images/backgroundImg.png') no-repeat;
 }
 
 .main-content {

src/views/ParamsConfig/index.vue

@@ -5,13 +5,13 @@
             <!-- 顶部状态栏 -->
             <div class="header-status">
                 <div class="time-info">
-                    <span>{{ currentTime }} 星期五</span>
+                    <span>{{ currentTime }} {{ week }}</span>
                 </div>
                 <div class="page-title">
                     <h1>参数设置</h1>
                 </div>
                 <div class="system-status">
-                    <span>系统已运行：{{ systemRuntime }}</span>
+                    <!-- <span>系统已运行：{{ systemRuntime }}</span> -->
                 </div>
             </div>
 
@@ -25,21 +25,21 @@
                         <div class="line">
                             <div class="item">
                                 <div class="key">经度</div>
-                                <el-input v-model="formField.a" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}˚`" :parser="(value) => value.replace(/˚/g, '')" />
+                                <el-input v-model="formField.lat" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}˚`" :parser="(value) => value.replace(/˚/g, '')" />
                             </div>
                             <div class="item">
                                 <div class="key">纬度</div>
-                                <el-input v-model="formField.b" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}˚`" :parser="(value) => value.replace(/˚/g, '')" />
+                                <el-input v-model="formField.lgn" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}˚`" :parser="(value) => value.replace(/˚/g, '')" />
                             </div>
                         </div>
                         <div class="line">
                             <div class="item">
                                 <div class="key">经纬开灯偏差</div>
-                                <el-input v-model="formField.c" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}分`" :parser="(value) => value.replace(/分/g, '')" />
+                                <el-input v-model="formField.rise" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}分`" :parser="(value) => value.replace(/分/g, '')" />
                             </div>
                             <div class="item">
                                 <div class="key">经纬关灯偏差</div>
-                                <el-input v-model="formField.d" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}分`" :parser="(value) => value.replace(/分/g, '')" />
+                                <el-input v-model="formField.set" style="width: 100px" placeholder="请输入" :formatter="(value) => `${value}分`" :parser="(value) => value.replace(/分/g, '')" />
                             </div>
                         </div>
                         <div class="line">
@@ -53,8 +53,8 @@
                             </div>
                         </div>
                         <div class="buttonBox">
-                            <div class="button save">掉电保存</div>
+                            <div class="button save" @click="save">掉电保存</div>
-                            <div class="button restart">重启</div>
+                            <div class="button restart" @click="restartSystem">重启</div>
                         </div>
                     </div>
                 </div>
@@ -62,23 +62,26 @@
                     <div class="main_title">
                         电能表设置
                     </div>
-                    <div class="main_content" style="width:300px">
+                    <div class="main_content energy_meter" style="width:300px">
                         <div class="line">
                             <div class="item">
                                 <div class="key">主控器地址</div>
-                                <el-input v-model="formField.e" style="width: 100px" placeholder="请输入" />
+                                <div class="value"> </div>
+                                <!-- <el-input v-model="formField.e" style="width: 100px" placeholder="请输入" /> -->
                             </div>
                         </div>
                         <div class="line">
                             <div class="item">
                                 <div class="key">电能表地址</div>
-                                <el-input v-model="formField.f" style="width: 100px" placeholder="请输入" />
+                                <div class="value">{{ address }}</div>
+                                <!-- <el-input v-model="formField.f" style="width: 100px" placeholder="请输入" /> -->
                             </div>
                         </div>
                         <div class="line">
                             <div class="item">
                                 <div class="key">电能表型号</div>
-                                <el-input v-model="formField.g" style="width: 100px" placeholder="请输入" />
+                                <div class="value"> </div>
+                                <!-- <el-input v-model="formField.g" style="width: 100px" placeholder="请输入" /> -->
                             </div>
                         </div>
                     </div>
@@ -87,6 +90,9 @@
         </div>
         <!-- 底部信息 -->
         <div class="bottom-info">
+            <div style="color:#fff">
+                设备号：{{ commit_uid }}
+            </div>
             <div class="bottom_item">
                 <!-- <div class="time-item">
                     <span>日出时间：{{ sunriseTime }}</span>
@@ -116,13 +122,31 @@
 <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 formField = ref({})
+const commit_uid = localStorage.getItem('central_control_comm_uid')
 
+RPC.post('/m9z/getLgnLatData', { comm_uid: commit_uid }).then(res => {
+    formField.value.lat = res.lat
+    formField.value.lgn = res.lgn
+    formField.value.loc = res.loc
+})
+RPC.post('/m9z/getSunRiseSet', { comm_uid: commit_uid }).then(res => {
+    formField.value.rise = res.rise
+    formField.value.set = res.set
+})
 
+const address = ref('')
+RPC.post('/adl400/getMsgAddress', { comm_uid: commit_uid }).then(res => {
+    address.value = res
+})
+
+const week = ref('')
+const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
 // 更新时间
 const updateTime = () => {
     const now = new Date()
@@ -133,9 +157,31 @@ const updateTime = () => {
     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 save = () => {
+    const params = {
+        "comm_uid": commit_uid,
+        "lat": Number(formField.value.lat),
+        "lgn": Number(formField.value.lgn),
+        "loc_str": formField.value.loc_str,
+        "rise": Number(formField.value.rise),
+        "set": Number(formField.value.set)
+    }
+    RPC.post('/m9z/setDeviceLgnLatAndSunRsTime', params).then(res => {
+        ElMessage.success('操作成功')
+    })
+}
+
+
 
 // 返回主界面
 const goBack = () => {
@@ -197,6 +243,7 @@ onUnmounted(() => {
 }
 
 .system-status {
+    min-width: 200px;
     font-size: 18px;
     font-weight: 300;
 }
@@ -229,15 +276,24 @@ onUnmounted(() => {
             background-color: #282d36;
             flex: 1;
 
+            &.energy_meter {
+                .value {
+                    width: 100px;
+                }
+            }
+
             .key {
                 color: #fff;
                 margin-right: 10px;
             }
 
             .value {
+                text-align: center;
                 background-color: #21232A;
                 color: #8088AA;
                 padding: 5px 10px;
+                min-height: 32px;
+                box-sizing: border-box;
                 border-radius: 5px;
                 border: 1px solid #ccc;
             }

vite.config.js

@@ -16,7 +16,7 @@ export default defineConfig({
   base: 'central-control',
   plugins: [
     vue(),
-    vueDevTools(),
+    // vueDevTools(),
     AutoImport({
       // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
       imports: ['vue', 'vue-router'],