mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-28 03:09:24 +08:00
feat(web): 新增设备管理功能
- 新增设备管理页面和相关功能
This commit is contained in:
zhoumengru
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="predict">
|
||||
<div class="top">
|
||||
<predictEcharts :chart-options="chartOptions[0]" :chart-data="chartData"/>
|
||||
<predictEcharts :chart-options="chartOptions[0]" :chart-data="chartData" ref="chartRef1"/>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="item">
|
||||
<predictEcharts :chart-options="chartOptions[1]" :chart-data="chartData"/>
|
||||
<predictEcharts :chart-options="chartOptions[1]" :chart-data="chartData" ref="chartRef2"/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<predictEcharts :chart-options="chartOptions[2]" :chart-data="chartData"/>
|
||||
<predictEcharts :chart-options="chartOptions[2]" :chart-data="chartData" ref="chartRef3"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -24,241 +24,159 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
chartOptions:[ {
|
||||
title: '储能充放电预测',
|
||||
type: 'line',
|
||||
smooth:false,
|
||||
dataKey: 'chargeDischarge',
|
||||
infoKeys: [
|
||||
chartOptions:[
|
||||
{
|
||||
title: '储能充放电预测',
|
||||
type: 'line',
|
||||
smooth:false,
|
||||
dataKey: 'chargeDischarge',
|
||||
infoKeys: [
|
||||
|
||||
{
|
||||
key: 'key1',
|
||||
label: '电压',
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
{
|
||||
key: 'W_store_in',
|
||||
label: '充电电量',
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
key: 'key2',
|
||||
label: '电流',
|
||||
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
},
|
||||
{
|
||||
key: 'W_store_ou',
|
||||
label: '储能放电电量',
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
title: '充电负荷预测',
|
||||
type: 'line',
|
||||
smooth:false,
|
||||
dataKey: 'chargeDischarge',
|
||||
infoKeys: [
|
||||
title: '充电负荷预测',
|
||||
type: 'line',
|
||||
smooth:false,
|
||||
dataKey: 'chargeDischarge',
|
||||
infoKeys: [
|
||||
|
||||
{
|
||||
key: 'key1',
|
||||
label: '电压',
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
{
|
||||
key: 'W_charge',
|
||||
label: '运行负荷',
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
key: 'key2',
|
||||
label: '电流',
|
||||
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
title: '光伏发电预测',
|
||||
type: 'line',
|
||||
smooth:false,
|
||||
dataKey: 'chargeDischarge',
|
||||
infoKeys: [
|
||||
title: '光伏发电预测',
|
||||
type: 'line',
|
||||
smooth:false,
|
||||
dataKey: 'chargeDischarge',
|
||||
infoKeys: [
|
||||
|
||||
{
|
||||
key: 'key1',
|
||||
label: '电压',
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
{
|
||||
key: 'P_solar',
|
||||
label: '发电功率',
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#3F80F2' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#3F80F2' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
key: 'key2',
|
||||
label: '电流',
|
||||
},
|
||||
{
|
||||
key: 'W_solar',
|
||||
label: '发电量',
|
||||
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#7747E8' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#7747E8' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
|
||||
chartData: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
key1: 10,
|
||||
key2: 10,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
key1: 8,
|
||||
key2: 5,
|
||||
key3: 5,
|
||||
key4: 7
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
key1: 10,
|
||||
key2: 10,
|
||||
key3: 20,
|
||||
key4: 4
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
key1: 10,
|
||||
key2: 10,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
key1: 10,
|
||||
key2: 5,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
key1: 10,
|
||||
key2: 5,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
key1: 10,
|
||||
key2: 6,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-23',
|
||||
key1: 10,
|
||||
key2: 7,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-22',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-21',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-20',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-19',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-18',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-17',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
}
|
||||
],
|
||||
chartData: {
|
||||
xdata:[],
|
||||
ydata:{}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
generateTimePoints() {
|
||||
const timePoints = []
|
||||
|
||||
for (let hour = 0; hour <= 24; hour++) {
|
||||
for (let minute = 0; minute < 60; minute += 10) {
|
||||
// 处理24:00的特殊情况
|
||||
if (hour === 24 && minute === 0) {
|
||||
timePoints.push('24:00')
|
||||
break
|
||||
}
|
||||
|
||||
// 格式化小时和分钟，确保两位数
|
||||
const formattedHour = hour.toString().padStart(2, '0')
|
||||
const formattedMinute = minute.toString().padStart(2, '0')
|
||||
|
||||
timePoints.push(`${formattedHour}:${formattedMinute}`)
|
||||
}
|
||||
}
|
||||
|
||||
return timePoints
|
||||
},
|
||||
async getData(){
|
||||
const date={}
|
||||
try {
|
||||
const res=await getReq('/queryPredictionDay',{date:'2025-09-04'})
|
||||
console.log(res);
|
||||
const res=await getReq('/queryPredictionDetail')
|
||||
this.chartData.ydata=res.data
|
||||
this.chartData.xdata = this.generateTimePoints()
|
||||
|
||||
this.$refs.chartRef1.initCharts()
|
||||
this.$refs.chartRef2.initCharts()
|
||||
this.$refs.chartRef3.initCharts()
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user