xzzn/emsfront
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

单站监控菜单栏

Browse Source
This commit is contained in:
白菜
2025-06-18 01:01:17 +08:00
parent 9174e8b6aa
commit 4218776b77
16 changed files with 926 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/views/ems/dzjk/home/NllzChart.vue Normal file
View File

@ -0,0 +1,152 @@
<template>
<el-row style="background:#fff;margin-top:30px;">
<el-col :xs="24" :sm="24" :lg="24">
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<div slot="header">
<span class="card-title">能量流转</span>
</div>
<div style="height: 310px" id="nllzChart"></div>
</el-card>
</el-col>
</el-row>
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/mixins/ems/resize'
export default {
mixins: [resize],
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(document.querySelector('#nllzChart'), 'macarons')
this.setOptions()
},
setOptions() {
this.chart.setOption({
title: [
// 右上角
{
text: '电网 实时功率：15kW',
top: 10,
right: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
},
// 右下角
{
text: '负载 实时功率：15kW',
bottom: 10,
right: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
},
// 左下角第一行
{
text: '储能',
bottom: 56,
left: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
},
// 左下角第二行
{
text: '实时功率：12kW',
bottom: 40,
left: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
},
// 左下角第三行
{
text: 'SOC:75%',
bottom: 26,
left: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
},
// 左下角第四行
{
text: '可用电量：12kWh',
bottom: 10,
left: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
}
],
grid:{
left:200
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
textStyle:{
color:"#333333",
},
xAxis: {
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisLine: {
lineStyle:{
color: '#333333',
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle:{
color: '#333333',
}
}
},
series: [
{
name:'充电量',
data: [80,92,1,34,90,130,320,80,9,91,34,90],
type: 'line',
},{
name:'放电量',
data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
type: 'line',
}]
})
}
}
}
</script>

118
src/views/ems/dzjk/home/index.vue Normal file
View File

@ -0,0 +1,118 @@
<template>
<div>
<el-row :gutter="32" style="background:#fff;">
<el-col :xs="24" :sm="24" :lg="10">
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<div slot="header">
<span class="card-title">数据概览</span>
</div>
<div style="height: 310px" >
<el-row :gutter="20">
<el-col :span="12" v-for="(item,index) in sjglData" :key="index+'sjglData'" class="sjgl-data">
<div class="sjgl-title">{{item.title}}</div>
<div class="sjgl-value">{{item.value}}</div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :lg="14">
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<div slot="header">
<span class="card-title">实时告警</span>
<el-button style="float: right; padding: 3px 0" type="text" size="small">通讯状态：<span style="color:red">超时</span></el-button>
</div>
<div class="ssgj-container">
<el-table
:data="tableData"
height="100%"
stripe
style="width: 100%">
<el-table-column
prop="name"
label="名称">
</el-table-column>
<el-table-column
prop="status"
label="状态"
class-name="warning-status"
label-class-name="table-head">
</el-table-column>
<el-table-column
prop="value"
label="告警内容">
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
</el-row>
<nllz-chart/>
</div>
</template>
<script>
import NllzChart from "./NllzChart.vue";
export default {
components: {NllzChart},
data() {
return {
// todo 没有数据时 显示-？
sjglData:[{
title:'今日充电量（MWh）',
value:'1234'
},{
title:'今日放电量（MWh）',
value:'1234'
},{
title:'总充电量（MWh）',
value:'1234'
},{
title:'总放电量（MWh）',
value:'1234'
}],
// todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
tableData:[{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'}]
}
}
}
</script>
<style scoped lang="scss">
//数据概览
.sjgl-data{
text-align: center;
margin-top:20px;
.sjgl-title{
color: #666666;
line-height: 14px;
padding-top: 18px;
}
.sjgl-value{
color: rgba(51,51,51,1);
font-size: 26px;
line-height: 26px;
font-weight: 500;
margin-top: 14px;
}
}
//实时告警
.ssgj-container{
padding:20px;
height: 310px;
box-sizing: border-box;
::v-deep{
.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
background:#FFF2CB ;
border-bottom: none;
}
.warning-status{
color:red;
}
.table-head{
color:#515a6e;
}
}
}
</style>