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

单站监控首页更新

Browse Source
This commit is contained in:
白菜
2025-08-06 23:06:12 +08:00
parent 7b88d754ee
commit 7a13a73758
3 changed files with 73 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/views/ems/dzjk/home/ActiveChart.vue
View File

@ -15,7 +15,6 @@
<script>
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import {formatNumber} from "@/filters/ems";
export default {
mixins: [resize],
@ -40,67 +39,19 @@ export default {
initChart() {
this.chart = echarts.init(document.querySelector('#activeChart'))
},
showLoading(){
this.chart && this.chart.showLoading()
},
setOption(data) {
const {siteMonitorDataVo=[],gridNrtPower,loadNrtPower,energyStorageNrtPower,energyStorageAvailElec} = data
const source = [['日期','充电量','放电量']]
siteMonitorDataVo.forEach(item=>{
source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
const source = [['日期','电网功率']]
data.forEach((item)=>{
source.push([item.statisDate,item.gridPower])
})
this.chart.setOption({
title: [
// 右上角
{
text: `电网 实时功率：${formatNumber(gridNrtPower)} kW`,
top: 10,
right: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
},
// 右下角
{
text: `负载 实时功率：${formatNumber(loadNrtPower)} kW`,
bottom: 10,
right: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
},
// 左下角第一行
{
text: '储能',
bottom: 40,
left: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
},
// 左下角第二行
{
text: `实时功率：${formatNumber(energyStorageNrtPower)} kW`,
bottom: 26,
left: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
},
// 左下角第三行
{
text: `可用电量：${formatNumber(energyStorageAvailElec)} kWh`,
bottom: 10,
left: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
}
],
grid:{
left:200
color:['#FFBD00','#3C81FF'],
legend: {
left: 'center',
bottom: '10',
},
tooltip: {
trigger: 'axis',
@ -113,34 +64,21 @@ export default {
},
xAxis: {
type: 'category',
axisLine: {
lineStyle:{
color: '#333333',
}
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle:{
color: '#333333',
}
}
},
dataset:{
source
// source: [['日期','充电量','放电量']]
},
dataset:{source},
series: [
{
name:'充电量',
name:'电网功率',
type: 'line',
},{
name:'放电量',
type: 'line',
}]
})
}
]
})
this.chart.hideLoading()
},
}
}

97
src/views/ems/dzjk/home/WeekChart.vue
View File

@ -15,7 +15,6 @@
<script>
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import {formatNumber} from "@/filters/ems";
export default {
mixins: [resize],
@ -40,106 +39,56 @@ export default {
initChart() {
this.chart = echarts.init(document.querySelector('#weekChart'))
},
setOption(data) {
const {siteMonitorDataVo=[],gridNrtPower,loadNrtPower,energyStorageNrtPower,energyStorageAvailElec} = data
showLoading(){
this.chart && this.chart.showLoading()
},
setOption(data,unit) {
const source = [['日期','充电量','放电量']]
siteMonitorDataVo.forEach(item=>{
data.forEach(item=>{
source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
})
this.chart.setOption({
title: [
// 右上角
{
text: `电网 实时功率：${formatNumber(gridNrtPower)} kW`,
top: 10,
right: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
},
// 右下角
{
text: `负载 实时功率：${formatNumber(loadNrtPower)} kW`,
bottom: 10,
right: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
},
// 左下角第一行
{
text: '储能',
bottom: 40,
left: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
},
// 左下角第二行
{
text: `实时功率：${formatNumber(energyStorageNrtPower)} kW`,
bottom: 26,
left: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
},
// 左下角第三行
{
text: `可用电量：${formatNumber(energyStorageAvailElec)} kWh`,
bottom: 10,
left: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
}
],
grid:{
left:200
},
color:['#FFBD00','#3C81FF','#05AEA3'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
textStyle:{
color:"#333333",
legend: {
left: 'center',
bottom: '10',
},
xAxis: {
type: 'category',
axisLine: {
lineStyle:{
color: '#333333',
}
}
name:unit,
nameLocation:'center'
},
yAxis: {
yAxis: [{
type: 'value',
name:'充电量/放电量kWh',
axisLine: {
lineStyle:{
color: '#333333',
}
}
},
onZero:false
}
}],
dataset:{
source
// source: [['日期','充电量','放电量']]
},
series: [
{
name:'充电量',
yAxisIndex:0,
type: 'line',
},{
name:'放电量',
},
{
yAxisIndex:0,
type: 'line',
}]
},
]
})
this.chart.hideLoading()
}
}
}

48
src/views/ems/dzjk/home/index.vue
View File

@ -87,18 +87,13 @@
<script>
import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
import {getDzjkHomeView} from '@/api/ems/dzjk'
// import NllzChart from "./NllzChart.vue";
import {getDzjkHomeView, getPcsNameList, getPowerData} from '@/api/ems/dzjk'
import WeekChart from "./WeekChart.vue";
import ActiveChart from "./ActiveChart.vue";
import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
import {formatDate} from "@/filters/ems";
export default {
name:'DzjkSbjkHome',
computed: {
loader() {
return loader
}
},
components: {WeekChart,ActiveChart},
mixins: [getQuerySiteId],
data() {
@ -134,7 +129,6 @@ export default {
value:'',
attr:'totalDischargedCap'
}],
// todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
tableData:[],
info:{}
}
@ -143,22 +137,44 @@ export default {
toTicket(){
this.$router.push({path:'/ticket'})
},
init(){
this.loading = true
getSingleSiteBaseInfo(this.siteId).then(response => {
console.log('单个站点详情数据',response)
this.info = response?.data || {}
getGVQXData(){
this.$refs.activeChart.showLoading()
const {siteId}=this,now=new Date()
getPcsNameList(this.siteId).then(response=>{
const data=response?.data || [];
if(data.length>0){
//接口调用完成之后 设置图表、结束loading
getPowerData({siteId,deviceId:data[0].id,startDate:formatDate(now),endDate:formatDate(now),dataType:'1'}).then(response => {
this.$refs.activeChart.setOption(response?.data || [])
})
}
})
},
getBaseInfo(){
this.$refs.weekChart.showLoading()
getSingleSiteBaseInfo(this.siteId).then(response => {
this.info = response?.data || {}
const {sevenDayDisChargeStats=[],unit=''} = this.info
this.$refs.weekChart.setOption(sevenDayDisChargeStats,unit)
})
},
getTableData(){
getDzjkHomeView(this.siteId).then(response => {
const data = response?.data || {}
this.sjglData.forEach(item=>{
item.value =data[item.attr]
})
this.tableData = data?.siteMonitorHomeAlarmVo || []
// this.$refs.nllzChart.setOption(data)
this.$refs.weekChart.setOption(data)
this.$refs.activeChart.setOption(data)
}).finally(() => {this.loading = false})
},
init(){
this.loading = true
// 功率曲线
this.getGVQXData()
// 基本信息+冲放曲线
this.getBaseInfo()
//其他数据
this.getTableData()
}
},