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

修改菜单+权限+图表渲染

Browse Source
This commit is contained in:
ym1026
2025-09-11 19:01:01 +08:00
parent 45ff73c295
commit 506c2e98f2
26 changed files with 1069 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

472
web/src/views/statisticalAnalysis.vue
View File

@@ -18,19 +18,39 @@
:title-option="{ title: '', info: '' }"
@onSearch="onSearch"
>
<template #stationSelect="item">
<a-select
style="width: 120px;"
:dropdown-match-select-width="false"
v-model:value="stationId"
allow-clear
@change="changeStation"
>
<a-select-option
:value="option.value"
v-for="option in stationList"
:key="option.value"
>
{{ option.label }}
</a-select-option>
</a-select>
</template>
</searchBox>
</div>
<div class="main_content">
<a-spin :spinning="loading.chart || loading.table">
<energyEchart
:key="activeKey"
:key="`${activeKey}_${renderKey}`"
:chart-options="echartsInfo[activeKey].chartOptions"
:chart-data="echartsInfo[activeKey].chartData"
:chart-datav="echartsInfo[activeKey].chartDatav"
:columns="tableList[activeKey].columns"
:page-option="tableList[activeKey].pageOption"
:table-info="tableList[activeKey].tableInfo"
:table-data="tableList[activeKey].tableData"
@pagesizeChange="pagesizeChange()"
></energyEchart>
</a-spin>
</div>
</div>
</template>
@@ -47,6 +67,12 @@ export default {
data() {
return {
loading: {
chart: false,
table: false
},
stationId: undefined,
renderKey: 0,
categoryArr: [
{
type: 1,
@@ -71,10 +97,18 @@ export default {
type: 'datePick1',
value: [],
key: 'time'
},
{
label: '场站切换',
type: 'slot',
value: [],
key: 'station',
slotName: 'stationSelect'
}
],
stationList: [],
echartsInfo: {
0: {
1: {
chartOptions: [
{
title: '充放电分析',
@@ -96,19 +130,19 @@ export default {
]
},
{
title: '电压与电流分析',
title: '今日电压与电流分析',
type: 'line',
dataKey: 'stock',
infoKeys: [
{
key: 'key1',
key: 'V',
label: '电压',
lineColor: '#3F80F2',
colorStart: ' rgba(10, 250, 106, 0.15)',
colorEnd: ' rgba(171, 255, 249, 0.3)'
},
{
key: 'key2',
key: 'I',
label: '电流',
lineColor: '#A9A6FF',
colorStart: ' rgba(10, 250, 106, 0.15)',
@@ -117,12 +151,12 @@ export default {
]
},
{
title: '功率分析',
title: '今日功率分析',
type: 'line',
dataKey: 'yearly',
infoKeys: [
{
key: 'key1',
key: 'P',
label: '功率',
lineColor: '#00FFFB',
colorStart: ' rgba(10, 250, 106, 0.15)',
@@ -131,17 +165,16 @@ export default {
]
}
],
chartData: {}
chartData: {},
chartDatav: {},
},
1: {
2: {
chartOptions: [
{
title: '发电电量分析',
type: 'bar',
dataKey: 'sales',
infoKeys: [
{ key: 'storage_elect_in', label: '日发电电量', lineColor: '#2A82E4' },
]
infoKeys: [{ key: 'storage_elect_in', label: '日发电电量', lineColor: '#2A82E4' }]
},
{
title: '运行状态分析',
@@ -153,19 +186,19 @@ export default {
]
},
{
title: '电压与电流分析',
title: '今日电压与电流分析',
type: 'line',
dataKey: 'stock',
infoKeys: [
{
key: 'key1',
key: 'V',
label: '电压',
lineColor: '#3F80F2',
colorStart: ' rgba(10, 250, 106, 0.15)',
colorEnd: ' rgba(171, 255, 249, 0.3)'
},
{
key: 'key2',
key: 'I',
label: '电流',
lineColor: '#A9A6FF',
colorStart: ' rgba(10, 250, 106, 0.15)',
@@ -174,12 +207,12 @@ export default {
]
},
{
title: '功率分析',
title: '今日功率分析',
type: 'line',
dataKey: 'yearly',
infoKeys: [
{
key: 'key1',
key: 'P',
label: '功率',
lineColor: '#00FFFB',
colorStart: ' rgba(10, 250, 106, 0.15)',
@@ -190,15 +223,13 @@ export default {
],
chartData: {}
},
2: {
3: {
chartOptions: [
{
title: '充电分析',
type: 'bar',
dataKey: 'sales',
infoKeys: [
{ key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' },
]
infoKeys: [{ key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' }]
},
{
title: '运行状态分析',
@@ -211,19 +242,19 @@ export default {
]
},
{
title: '电压与电流分析',
title: '今日电压与电流分析',
type: 'line',
dataKey: 'stock',
infoKeys: [
{
key: 'key1',
key: 'V',
label: '电压',
lineColor: '#3F80F2',
colorStart: ' rgba(10, 250, 106, 0.15)',
colorEnd: ' rgba(171, 255, 249, 0.3)'
},
{
key: 'key2',
key: 'I',
label: '电流',
lineColor: '#A9A6FF',
colorStart: ' rgba(10, 250, 106, 0.15)',
@@ -232,12 +263,12 @@ export default {
]
},
{
title: '功率分析',
title: '今日功率分析',
type: 'line',
dataKey: 'yearly',
infoKeys: [
{
key: 'key1',
key: 'P',
label: '功率',
lineColor: '#00FFFB',
colorStart: ' rgba(10, 250, 106, 0.15)',
@@ -249,23 +280,24 @@ export default {
chartData: {}
}
},
activeKey: 0,
activeKey: 1,
interval:null,
tabList: [
{
key: 0,
key: 1,
name: '储能设备'
},
{
key: 1,
key: 2,
name: '光伏设备'
},
{
key: 2,
key: 3,
name: '充电设备'
}
],
tableList: {
0: {
1: {
columns: [
{
title: '设备ID',
@@ -339,7 +371,7 @@ export default {
count: 1
}
},
1: {
2: {
columns: [
{
title: '设备ID',
@@ -383,7 +415,7 @@ export default {
width: 120,
ellipsis: true
},
{
title: '日期',
dataIndex: 'dt',
@@ -400,7 +432,7 @@ export default {
count: 1
}
},
2: {
3: {
columns: [
{
title: '设备ID',
@@ -470,135 +502,299 @@ export default {
}
}
},
watch:{
activeKey(newVal, oldVal) {
console.log(newVal, oldVal,"activeKey")
// 清空旧数据（可选）
if( this.echartsInfo[oldVal]){
this.echartsInfo[oldVal].chartData = {};
this.tableList[oldVal].tableData = [];
// // 重新加载数据
this.getTableList()
this.getEchartsList()
}
watch: {
activeKey: {
handler(newVal) {
if (!newVal) return;
// 清除之前的数据
this.resetDataForInactiveKey();
// 并行加载新数据
Promise.all([
this.getEchartsListForActiveKey(),
this.getTableListForActiveKey()
]).then(() => {
this.$nextTick(() => {
this.getStatCharts();
});
});
},
immediate: true // 添加立即执行
}
},
async mounted() {
await Promise.all([this.getTableList(), this.getEchartsList()])
// 优先加载第一个页面(activeKey=1)所需的数据
await Promise.all([
this.getStationList(),
this.getEchartsListForActiveKey(),
this.getTableListForActiveKey()
]);
// 初始化实时刷新
this.startRealtimeRefresh();
},
beforeUnmount() {
console.log('beforeUnmount')
clearInterval(this.interval); // 组件销毁时清除定时器
},
beforeUnmount() {},
methods: {
forceRerender() {
this.renderKey += 1;
},
resetDataForInactiveKey() {
// 重置非当前激活页面的数据，减少内存占用
Object.keys(this.echartsInfo).forEach((key) => {
if (key != this.activeKey) {
this.echartsInfo[key].chartData={}
this.echartsInfo[key].chartDatav={}
}
});
Object.keys(this.tableList).forEach((key) => {
if (key != this.activeKey) {
this.echartsInfo[key].tableData={}
}
});
},
async getEchartsListForActiveKey() {
if (!this.activeKey) return;
this.loading.chart = true;
const currentInfo = this.echartsInfo[this.activeKey];
const query = {
...this.paramsDate,
category: this.activeKey
};
try {
const res = await getReq('/queryStatDayList', query);
if (res.errcode === 0) {
this.echartsInfo[this.activeKey].chartData=res.data
this.loading.chart = false;
} else {
throw res;
}
} catch (error) {
this.loading.chart = false;
this.echartsInfo[this.activeKey].chartData={}
}
},
// 专门获取当前激活页面的表格数据
async getTableListForActiveKey() {
this.loading.table = true;
if (!this.activeKey) return;
const currentInfo = this.tableList[this.activeKey];
const query = {
...this.paramsDate,
category: this.activeKey,
page_size: currentInfo.pageOption.pageSize,
pageNumber: currentInfo.pageOption.page
};
try {
const res = await getReq('/queryStatDayList', query);
if (res.errcode === 0) {
this.tableList[this.activeKey].tableData=res.data.list || res.data
this.tableList[this.activeKey].pageOption.count=res.data.count || 0
this.loading.table = false;
} else {
throw res;
}
} catch (error) {
this.tableList[this.activeKey].tableData=[]
this.tableList[this.activeKey].pageOption.count= 0
this.loading.table = false;
}
},
startRealtimeRefresh() {
this.interval = setInterval(() => {
if (this.activeKey) {
this.getStatCharts(); // 定时获取最新实时数据
}
}, 10000); // 30秒刷新一次
},
async getStationList() {
const params = {
page_size: 1000,
page: 1
}
try {
const res = await getReq('/queryStationList', params)
if (res.errcode === 0) {
this.stationList = res.data.map((item) => {
return {
value: item.station_id,
label: item.name
}
})
if (this.stationList.length) {
if (!this.stationId) {
this.stationId = this.stationList[0].value
}
//V I P
}
} else {
const err = { tip: res.errmsg }
throw err
}
} catch (error) {
//统一处理报错提示
}
},
pagesizeChange(e) {
this.tableList[this.activeKey].pageOption.pageSize = e.pageSize
this.tableList[this.activeKey].pageOption.page = e.page
this.getTableList()
this.getTableListForActiveKey()
},
onSearch(data) {
this.paramsDate.start_date = data.time ? data.time[0] : ''
this.paramsDate.end_date = data.time ? data.time[1] : ''
this.tableList[this.activeKey].pageOption.page = 1
this.getTableList()
this.getEchartsList()
this.getStationList(),
this.getEchartsListForActiveKey(),
this.getTableListForActiveKey()
},
async getEchartsList() {
changeStation() {
this.getStatCharts();
},
// async getEchartsList() {
// const key = activeKey || this.activeKey;
// if (!key) return;
// const currentInfo = this.echartsInfo[this.activeKey]
// const query = {
// ...this.paramsDate,
// category: this.activeKey
// }
// try {
// const res = await getReq('/queryStatDayList', query)
// if (res.errcode === 0) {
// this.echartsInfo[this.activeKey].chartData = res.data
// console.log(
// this.echartsInfo[this.activeKey].chartData,
// ' this.echartsInfo[this.activeKey].chartData'
// )
// } else {
// throw res
// }
// } catch (error) {
// this.echartsInfo[this.activeKey].chartData = {}
// }
// },
async getStatCharts() {
const currentInfo = this.echartsInfo[this.activeKey]
const query = {
...this.paramsDate,
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
// start_date: getDateDaysAgo(7 - 1),
// end_date: getDateDaysAgo(0)
dt: this.paramsDate.end_date,
station_id: this.stationId,
category: this.activeKey
}
try {
const res = await getReq('/queryStatDayList', query)
const res = await getReq('/queryStatCharts', query)
if (res.errcode === 0) {
this.echartsInfo[this.activeKey].chartData = res.data
console.log(
this.echartsInfo[this.activeKey].chartData,
' this.echartsInfo[this.activeKey].chartData'
)
this.echartsInfo[this.activeKey].chartDatav = {
"V":[100.0,100.0,100.0], // 电压曲线
"I":[10.0,10.0,10.0], // 电流曲线
"P":[1000.0,1000.0,1000.0], // 功率曲线
}
// x轴0点到24点
} else {
throw res
}
} catch (error) {
this.echartsInfo[this.activeKey].chartData = {}
this.echartsInfo[this.activeKey].chartDatav = {
"V":[100.0,100.0,100.0], // 电压曲线
"I":[10.0,10.0,10.0], // 电流曲线
"P":[1000.0,1000.0,1000.0], // 功率曲线
}
}
},
async getTableList() {
const currentInfo = this.tableList[this.activeKey]
const query = {
...this.paramsDate,
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
page_size: currentInfo.pageOption.pageSize,
pageNumber: currentInfo.pageOption.page
}
try {
const res = await getReq('/queryStatDayList', query)
if (res.errcode === 0) {
currentInfo.tableData = res.data
currentInfo.pageOption = {
page: res.data.page,
pageSize: res.data.page_size,
count: res.data.count
}
} else {
throw res
}
} catch (error) {
currentInfo.tableData = [
{
key1: '1515151515',
key2: '设备1111',
key3: '类型',
key4: '电量',
key5: '时长',
key6: '时长',
key7: 'dianl',
key8: '时长',
key9: '时长11'
},
{
key1: '1515151515',
key2: '设备1111',
key3: '类型',
key4: '电量',
key5: '时长',
key6: '时长',
key7: 'dianl',
key8: '时长',
key9: '时长11'
},
{
key1: '1515151515',
key2: '设备1111',
key3: '类型',
key4: '电量',
key5: '时长',
key6: '时长',
key7: 'dianl',
key8: '时长',
key9: '时长11'
},
{
key1: '1515151515',
key2: '设备1111',
key3: '类型',
key4: '电量',
key5: '时长',
key6: '时长',
key7: 'dianl',
key8: '时长',
key9: '时长11'
}
]
}
}
// async getTableList() {
// const currentInfo = this.tableList[this.activeKey]
// const query = {
// ...this.paramsDate,
// category: this.activeKey,
// page_size: currentInfo.pageOption.pageSize,
// pageNumber: currentInfo.pageOption.page
// }
// try {
// const res = await getReq('/queryStatDayList', query)
// if (res.errcode === 0) {
// this.tableList[this.activeKey].pageOption.tableData = res.data
// this.tableList[this.activeKey].pageOption.pageOption = {
// page: res.data.page,
// pageSize: res.data.page_size,
// count: res.data.count
// }
// } else {
// throw res
// }
// } catch (error) {
// this.tableList[this.activeKey].pageOption.tableData = [
// {
// key1: '1515151515',
// key2: '设备1111',
// key3: '类型',
// key4: '电量',
// key5: '时长',
// key6: '时长',
// key7: 'dianl',
// key8: '时长',
// key9: '时长11'
// },
// {
// key1: '1515151515',
// key2: '设备1111',
// key3: '类型',
// key4: '电量',
// key5: '时长',
// key6: '时长',
// key7: 'dianl',
// key8: '时长',
// key9: '时长11'
// },
// {
// key1: '1515151515',
// key2: '设备1111',
// key3: '类型',
// key4: '电量',
// key5: '时长',
// key6: '时长',
// key7: 'dianl',
// key8: '时长',
// key9: '时长11'
// },
// {
// key1: '1515151515',
// key2: '设备1111',
// key3: '类型',
// key4: '电量',
// key5: '时长',
// key6: '时长',
// key7: 'dianl',
// key8: '时长',
// key9: '时长11'
// }
// ]
// }
// }
}
}
</script>
@@ -639,7 +835,7 @@ export default {
}
.main_content {
overflow: scroll;
height: calc(100% - 15px);
height: calc(100% - 30px);
// margin-top: 10px;
}
</style>