实时监控页面

src/components.d.ts

@@ -24,6 +24,7 @@ declare module 'vue' {
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
+    Linechart: typeof import('./components/Linechart.vue')['default']
     Pagination: typeof import('./components/Pagination/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/Linechart.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="chart">
+        <v-chart class="chart" :option="option" />
+    </div>
+</template>
+
+<script setup>
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { LineChart } from 'echarts/charts'
+import {
+    GridComponent,
+    TitleComponent,
+    LegendComponent,
+    TooltipComponent
+} from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+
+use([
+    GridComponent,
+    TitleComponent,
+    LegendComponent,
+    TooltipComponent,
+    LineChart,
+    CanvasRenderer
+])
+
+
+
+const option = ref({
+    xAxis: {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        axisLabel: {
+            color: '#fff'
+        }
+    },
+    yAxis: {
+        type: 'value',
+        axisLabel: {
+            color: '#fff'
+        }
+    },
+    grid: {
+        left: '5%',
+        top: 60,
+        right: '5%',
+        bottom: '10%',
+    },
+    title: {
+        text: '有功功率kW',
+        textStyle: {
+            color: '#fff'
+        }
+    },
+    legend: {
+        data: ['有功功率'],
+        right: '5%',
+        textStyle: {
+            color: '#fff'
+        },
+    },
+    tooltip: {
+        trigger: 'axis', // 触发类型，默认数据项触发，可选为：'item' | 'axis' | 'none'
+        axisPointer: {
+            type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
+        }
+    },
+    series: [
+        {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: 'line',
+            name: '有功功率',
+            color: '#00E0F4',
+            smooth: true,
+            symbolSize: 10
+        }
+    ]
+})
+</script>
+
+<style lang="scss" scoped>
+.chart {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/layout/components/aside.vue

@@ -1,79 +0,0 @@
-<template>
-    <div class="aside">
-        <div class="title">
-            <div class="img"></div>
-            <div class="text">AI调色</div>
-        </div>
-        <div class="scrollbar">
-            <el-scrollbar>
-                <el-menu :default-openeds="['/SystemManage']" :default-active="route.path" class="el-menu-vertical-demo" active-text-color="#fff" background-color="#001628" text-color="#415058" router>
-                    <template v-for="(item, index) in routes[0].children" :key="index">
-                        <el-sub-menu :index="'/' + item.path" v-if="item.children && item.children.length > 0">
-                            <template #title>
-                                <el-icon v-if="item.meta.title === '底色管理'"><i-ep-HomeFilled /></el-icon>
-                                <el-icon v-if="item.meta.title === '色膏管理'"><i-ep-HelpFilled /></el-icon>
-                                <el-icon v-if="item.meta.title === '配方管理'"><i-ep-MessageBox /></el-icon>
-                                <el-icon v-if="item.meta.title === '配方计算'"><i-ep-ScaleToOriginal /></el-icon>
-                                <el-icon v-if="item.meta.title === '系统管理'"><i-ep-Menu /></el-icon>
-                                <span>{{ item.meta.title }}</span>
-                            </template>
-                            <el-menu-item v-for="(ele, idx ) in item.children" :index="'/' + item.path + '/' + ele.path" :key="idx">{{ ele.meta.title }}</el-menu-item>
-                        </el-sub-menu>
-                        <el-menu-item :index="'/' + item.path" v-else>
-                            <el-icon v-if="item.meta.title === '底色管理'"><i-ep-HomeFilled /></el-icon>
-                            <el-icon v-if="item.meta.title === '色膏管理'"><i-ep-HelpFilled /></el-icon>
-                            <el-icon v-if="item.meta.title === '配方管理'"><i-ep-MessageBox /></el-icon>
-                            <el-icon v-if="item.meta.title === '配方计算'"><i-ep-ScaleToOriginal /></el-icon>
-                            <el-icon v-if="item.meta.title === '系统管理'"><i-ep-Menu /></el-icon>
-                            <span>{{ item.meta.title }}</span>
-                        </el-menu-item>
-                    </template>
-                </el-menu>
-            </el-scrollbar>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { routes } from '@/router/index';
-
-const route = useRoute();
-</script>
-
-<style lang="scss" scoped>
-.aside {
-    height: 98vh;
-    background-color: #001628;
-
-    .title {
-        display: flex;
-        align-items: center;
-        height: 60px;
-
-        .img {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            margin-left: 24px;
-            margin-right: 10px;
-            background-color: skyblue;
-        }
-
-        .text {
-            color: rgba(24, 144, 255, 100);
-        }
-    }
-
-    .scrollbar {
-        height: calc(98vh - 60px);
-    }
-
-    .el-scrollbar {
-        background-color: #001628;
-
-        .el-menu-item.is-active {
-            background-color: #006eff;
-        }
-    }
-}
-</style>

src/views/AlarmInformation/index.vue

@@ -17,12 +17,18 @@
 
             <!-- 主体区域 -->
             <div class="control-content">
-                <el-table :data="tableData" style="width: 100%" height="400" stripe>
+                <el-table :data="tableData" style="width: 100%" height="400" stripe v-loading="loading">
-                    <el-table-column align="center" prop="date" label="Date" width="180" />
+                    <el-table-column align="center" prop="id" label="序号" />
-                    <el-table-column align="center" prop="name" label="Name" width="180" />
+                    <el-table-column align="center" prop="loop_idx" label="回路地址" />
-                    <el-table-column align="center" prop="address" label="Address" />
+                    <el-table-column align="center" prop="fault_msg" label="故障信息" />
+                    <el-table-column align="center" prop="fault_code" label="故障码" />
+                    <el-table-column align="center" prop="fault_time" label="故障时间" min-width="150">
+                        <template #default="{ row }">
+                            {{ row.fault_time ? dayjs(row.fault_time).format('YYYY-MM-DD HH:mm:ss') : '' }}
+                        </template>
+                    </el-table-column>
                 </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" />
+                <el-pagination v-if="total > 0" @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="prev, pager, next,jumper" />
             </div>
         </div>
         <!-- 底部信息 -->
@@ -39,7 +45,7 @@
                 </div> -->
             </div>
             <div class="bottom_item">
-                <el-button class="restart-button">
+                <el-button class="restart-button" @click="reflesh">
                     <el-icon>
                         <RefreshRight />
                     </el-icon>
@@ -60,21 +66,58 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import RPC from '@/utils/rpc';
+import dayjs from 'dayjs';
 
 const router = useRouter()
 const currentTime = ref('')
 const systemRuntime = ref('38分钟')
 const commit_uid = localStorage.getItem('central_control_comm_uid')
 
-const total = ref(100)
+const loading = ref(false)
-const pageSize = ref(10)
+const total = ref(0)
+const pageSize = ref(9)
 const currentPage = ref(1)
 const handleSizeChange = () => {
-    console.log('handleSizeChange')
     currentPage.value = 1
+    getData()
 }
 const handleCurrentChange = () => {
-    console.log('handleCurrentChange')
+    getData()
+}
+
+const tableData = ref([])
+
+const getData = () => {
+    const params = {
+        "limit": pageSize.value,
+        "page": currentPage.value,
+        "and": {
+            "comm_uid": [
+                commit_uid
+            ]
+        },
+        "like": {},
+        "orderby": [
+            {
+                "id": "desc",
+                "fault_time": "desc"
+            }
+        ]
+    }
+    loading.value = true
+    tableData.value = []
+    RPC.post('/m9z/fault/list', params).then(res => {
+        total.value = res.count || 0
+        tableData.value = res.rows || []
+    }).finally(() => {
+        loading.value = false
+    })
+}
+getData()
+
+const reflesh = () => {
+    currentPage.value = 1
+    getData()
 }
 
 
@@ -100,28 +143,6 @@ const restartSystem = () => {
     })
 }
 
-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',
-    },
-]
 
 
 

src/views/HandleControl/index.vue

@@ -278,6 +278,8 @@ const energyParams = ref({
     powerFactor: '0'
 })
 
+const isInitData = ref(true)
+
 // 回路控制数据
 const circuits = ref([
     { id: 1, name: '回路1', status: '关闭' },
@@ -382,12 +384,15 @@ const getInfo = () => {
         setTimeout(() => {
             isSync.value = false
         }, 1000);
+    }).finally(() => {
+        isInitData.value = false
     })
 }
 getInfo()
 
 const oldInfo = ref('')
 watch(info, () => {
+    if (isInitData.value) return
     if (oldInfo.value === JSON.stringify(info.value)) return
     RPC.post('/m9z/setDeviceManualInfo', { comm_uid: commit_uid, ...info.value }).finally(() => {
         if (!isSync.value) {

src/views/Monitoring/index.vue

@@ -73,44 +73,56 @@
                                 </el-icon>
                                 当前模式
                             </div>
-                            <el-button class="mode-button active" @click="info.disable = !info.disable">{{ info.disable ? '手动' : '自动' }}</el-button>
+                            <el-button class="mode-button active">{{ info.Mode ? '手动' : '自动' }}</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 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 }">
+                                <!-- <div class="circuit-icon" :class="{ active: circuit.is_open }">
                                     <el-icon>
                                         <Sunny />
                                     </el-icon>
+                                </div> -->
+                                <div class="circuitStatus">
+                                    <div class="line">直流电流: <span>{{ circuit.A }}A</span></div>
+                                    <div class="line">
+                                        <div class="line_item">电源: <span>{{ circuit.V }}V</span></div>
+                                        <div class="line_item">功率: <span>{{ circuit.Kw }}kw</span></div>
+                                    </div>
                                 </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 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 }">
+                                <!-- <div class="circuit-icon" :class="{ active: circuit.is_open }">
                                     <el-icon>
                                         <Sunny />
                                     </el-icon>
+                                </div> -->
+                                <div class="circuitStatus">
+                                    <div class="line">直流电流: <span>{{ circuit.A }}A</span></div>
+                                    <div class="line">
+                                        <div class="line_item">电源: <span>{{ circuit.V }}V</span></div>
+                                        <div class="line_item">功率: <span>{{ circuit.Kw }}kw</span></div>
+                                    </div>
                                 </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 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 }}%
@@ -120,7 +132,7 @@
 
                         <!-- 下排调光通道 -->
                         <div class="dimming-row">
-                            <div v-for="(channel, index) in info.loops.slice(5, 10)" :key="channel.name" class="dimming-item">
+                            <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 }}%
@@ -128,7 +140,9 @@
                             </div>
                         </div>
                     </div>
-                    <!-- 回路控制区域 -->
+                    <!-- <div class="chart">
+                        <Linechart></Linechart>
+                    </div> -->
                 </div>
             </div>
         </div>
@@ -184,6 +198,7 @@ import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import RPC from '@/utils/rpc'
 import dayjs from 'dayjs'
+// import Linechart from '@/components/Linechart.vue';
 
 const commit_uid = localStorage.getItem('central_control_comm_uid')
 
@@ -231,77 +246,107 @@ const energyParams = ref({
 
 
 const info = ref({
-    "disable": false,
+    "Mode": 0,
     "backup_byte1": 0,
-    "loops": [
+    "Loops": [
         {
             "index": 0,
             "name": "#1",
             "is_open": false,
-            "pwm": 0
+            "pwm": 0,
+            A: 0,
+            V: 0,
+            Kw: 0,
         },
         {
             "index": 1,
             "name": "#2",
             "is_open": false,
-            "pwm": 0
+            "pwm": 0,
+            A: 0,
+            V: 0,
+            Kw: 0,
         },
         {
             "index": 2,
             "name": "#3",
             "is_open": false,
-            "pwm": 0
+            "pwm": 0,
+            A: 0,
+            V: 0,
+            Kw: 0,
         },
         {
             "index": 3,
             "name": "#4",
             "is_open": false,
-            "pwm": 0
+            "pwm": 0,
+            A: 0,
+            V: 0,
+            Kw: 0,
         },
         {
             "index": 4,
             "name": "#5",
             "is_open": false,
-            "pwm": 0
+            "pwm": 0,
+            A: 0,
+            V: 0,
+            Kw: 0,
         },
         {
             "index": 5,
             "name": "#6",
             "is_open": false,
-            "pwm": 0
+            "pwm": 0,
+            A: 0,
+            V: 0,
+            Kw: 0,
         },
         {
             "index": 6,
             "name": "#7",
             "is_open": false,
-            "pwm": 0
+            "pwm": 0,
+            A: 0,
+            V: 0,
+            Kw: 0,
         },
         {
             "index": 7,
             "name": "#8",
             "is_open": false,
-            "pwm": 0
+            "pwm": 0,
+            A: 0,
+            V: 0,
+            Kw: 0,
         },
         {
             "index": 8,
             "name": "#9",
             "is_open": false,
-            "pwm": 0
+            "pwm": 0,
+            A: 0,
+            V: 0,
+            Kw: 0,
         },
         {
             "index": 9,
             "name": "#10",
             "is_open": false,
-            "pwm": 0
+            "pwm": 0,
+            A: 0,
+            V: 0,
+            Kw: 0,
         }
     ],
     "backup_byte4": 0
 })
 
 const getInfo = () => {
-    RPC.post('/m9z/getDeviceManualInfo', { comm_uid: commit_uid }).then(res => {
+    // RPC.post('/m9z/getDeviceManualInfo', { comm_uid: commit_uid }).then(res => {
-        info.value = 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'
@@ -321,6 +366,10 @@ const getInfo = () => {
         energyParams.value.activeEnergy = res.activeEnergy + 'A'
         energyParams.value.powerFactor = res.powerFactor
     })
+    RPC.post('/m9z/getDeviceStatus2', { comm_uid: commit_uid }).then((res) => {
+        // 直流电流、电源、功率
+        info.value = res
+    })
 
     // RPC.post('/m9z/getDeviceSunRiseTime', { comm_uid: commit_uid }).then(res => {
     //     sunriseTime.value = res.Sunrise ? dayjs(res.Sunrise).format('HH:mm:ss') : ''
@@ -329,6 +378,15 @@ const getInfo = () => {
 }
 getInfo()
 
+const timer = setInterval(() => {
+    console.log('setInterval')
+    getInfo()
+}, 30000)
+
+onUnmounted(() => {
+    clearInterval(timer)
+})
+
 const oldInfo = ref('')
 // watch(info, () => {
 //     if (oldInfo.value === JSON.stringify(info.value)) return
@@ -578,20 +636,41 @@ onUnmounted(() => {
 .circuit-section {
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 10px;
 }
 
 .circuit-row {
     display: flex;
     justify-content: space-between;
     font-size: 12px;
+
+    .circuitStatus {
+        color: #fff;
+        width: 100%;
+
+        .line {
+            width: 100%;
+            display: flex;
+            margin-top: 10px;
+            display: flex;
+            justify-content: space-between;
+
+            .line_item {
+                width: 45%;
+                // flex: 1;
+                flex-shrink: 0;
+                display: flex;
+                justify-content: space-between;
+            }
+        }
+    }
 }
 
 .circuit-item {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 10px;
+    // gap: 10px;
     width: 18%;
 }
 
@@ -867,4 +946,9 @@ onUnmounted(() => {
     gap: 20px;
     padding-top: 20px;
 }
+
+.chart {
+    width: 100%;
+    height: 400px;
+}
 </style>