jsyhsec/energy_storage
7
0
Fork 0
mirror of https://gitee.com/js-yhsec/energy_storage.git synced 2026-05-27 18:59:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): 新增预测管理和策略表单功能

Browse Source 
- 添加预测管理页面和相关组件
- 实现策略表单组件，支持创建和编辑策略
- 优化表格组件，增加分页和数据加载功能
- 调整视频监控组件布局
- 修复部分组件样式问题
This commit is contained in:
zhoumengru
2025-09-04 13:42:48 +08:00
parent 6d6d05e18f
commit 5f5eeb1cbf
22 changed files with 1548 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

293
web/src/views/predict.vue Normal file
View File

@@ -0,0 +1,293 @@
<template>
<div class="predict">
<div class="top">
<predictEcharts :chart-options="chartOptions[0]" :chart-data="chartData"/>
</div>
<div class="bottom">
<div class="item">
<predictEcharts :chart-options="chartOptions[1]" :chart-data="chartData"/>
</div>
<div class="item">
<predictEcharts :chart-options="chartOptions[2]" :chart-data="chartData"/>
</div>
</div>
</div>
</template>
<script>
import predictEcharts from '@/components/predict/predictEcharts.vue';
export default {
name: '',
components: {predictEcharts},
props: {},
data() {
return {
chartOptions:[ {
title: '储能充放电预测',
type: 'line',
smooth:false,
dataKey: 'chargeDischarge',
infoKeys: [
{
key: 'key1',
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: [
{
key: 'key1',
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: [
{
key: 'key1',
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' // 充电电量线条颜色
}
}
}
]
},
],
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
}
],
}
},
mounted() {},
methods: {}
}
</script>
<style lang="scss" scoped>
.predict {
width: 100%;
height: 100%;
background: $bg1-color;
border-radius: 15px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
.top,
.bottom {
flex: 1;
width: 100%;
height: calc(50% - 10px);
}
.bottom {
display: flex;
}
.top{
background-color: rgba(33, 105, 195, 0.12);
padding: 20px 5px;
border-radius: 15px;
}
.item{
background-color: rgba(33, 105, 195, 0.12);
padding: 20px 5px;
flex: 1;
border-radius: 15px;
&:nth-child(2){
margin-left: 20px;
}
}
}
</style>