lufaneng
/
central-control
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实时监控页面

Browse Source
main
Lufaneng 1 year ago
parent 66b55e5999
commit 42d1397e4d
6 changed files with 257 additions and 138 deletions
Show Stats Download Patch File Download Diff File

1
src/components.d.ts vendored
Unescape View File

@ -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']

87
src/components/Linechart.vue
Unescape View File

@ -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>

79
src/layout/components/aside.vue
Unescape View File

@ -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>

85
src/views/AlarmInformation/index.vue
Unescape View File

@ -17,12 +17,18 @@
<!-- 主体区域 -->
<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 :data="tableData" style="width: 100%" height="400" stripe v-loading="loading">
<el-table-column align="center" prop="id" label="序号" />
<el-table-column align="center" prop="loop_idx" label="回路地址" />
<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 pageSize = ref(10)
const loading = ref(false)
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',
},
]

5
src/views/HandleControl/index.vue
Unescape View File

@ -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) {

138
src/views/Monitoring/index.vue
Unescape View File

@ -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 => {
info.value = res
})
// 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'
@ -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>

Write Preview
Loading…
Cancel
Save