jsyhsec/energy_storage
7
0
Fork 0
mirror of https://gitee.com/js-yhsec/energy_storage.git synced 2026-05-28 03:09:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

系统总览图表加载销毁优化

Browse Source
This commit is contained in:
ym1026
2025-09-04 11:12:20 +08:00
parent 369f7165cb
commit 61ed4f355f
21 changed files with 683 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

552
web/src/views/sub/Home.vue
View File

@@ -1,17 +1,24 @@
<template>
<div class="Home">
<div class="content-left">
<div v-for="(item, i) in leftList" :key="i" :class="`grid-item ${item.class}`">
<div
v-for="item in leftList"
:key="item.componentId"
:class="`grid-item ${item.class}`"
>
<div class="tool">
<div class="title">
<i class="iconfont icon-hebing linear-text"></i>
<span class="linear-text">{{ item.title }}</span>
</div>
</div>
<component
:is="item.componentId"
:info-key="item.infoKey"
:device-info="deviceInfo[item.infoKey]"
:total="deviceInfo.allTotal"
:total="item.infoKey === 'onLineTotal' ? deviceInfo.onLine : deviceInfo.allTotal"
></component>
</div>
</div>
@@ -19,7 +26,12 @@
<Map @changeStation="getCurrentStation"></Map>
</div>
<div class="content-right">
<div v-for="(item, i) in rightList" :key="i" :class="`grid-item ${item.class}`">
<div
v-for="item in rightList"
:key="item.componentId"
:class="`grid-item ${item.class}`"
>
<div class="tool">
<div class="title">
<i class="iconfont icon-hebing linear-text"></i>
@@ -29,7 +41,7 @@
<component
:is="item.componentId"
:device-info="deviceInfo[item.infoKey]"
:total="deviceInfo.allTotal"
:total="item.infoKey === 'onLineTotal' ? deviceInfo.onLine : deviceInfo.allTotal"
></component>
</div>
</div>
@@ -50,6 +62,8 @@ export default {
components: { Map },
data() {
return {
showFlag: false,
stationId: null,
deviceInfo: {},
list: [
@@ -57,13 +71,13 @@ export default {
title: '运行状况',
class: 'online-status',
componentId: onLine,
infoKey: 'onLine'
infoKey: 'onLineTotal'
},
{
title: '运行分析',
class: 'stats-cards',
componentId: Operational,
infoKey: 'stats'
infoKey: ''
},
{
title: '储能设备',
@@ -106,226 +120,227 @@ export default {
},
async mounted() {
await Promise.all([
(this.deviceInfo = {
alarm: [
{
date: '2025-08-30',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
date: '2025-08-29',
key1: 8,
key2: 5,
key3: 5,
key4: 7
},
{
date: '2025-08-28',
key1: 0,
key2: 10,
key3: 20,
key4: 4
},
{
date: '2025-08-27',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
date: '2025-08-26',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
date: '2025-08-25',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
date: '2025-08-24',
key1: 10,
key2: 0,
key3: 15,
key4: 5
},
{
date: '2025-08-23',
key1: 10,
key2: 0,
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
}
],
energy: [
{
date: '2025-08-30',
key1: '2',
key2: '2'
},
{
date: '2025-08-29',
key1: '2',
key2: '2'
},
{
date: '2025-08-28',
key1: '2',
key2: '2'
},
{
date: '2025-08-27',
key1: '2',
key2: '2'
},
{
date: '2025-08-26',
key1: '2',
key2: '2'
},
{
date: '2025-08-25',
key1: '2',
key2: '2'
},
{
date: '2025-08-24',
key1: '2',
key2: '2'
}
],
charge: [
{
date: '2025-08-30',
key1: '2',
key2: '2'
},
{
date: '2025-08-29',
key1: '2',
key2: '2'
},
{
date: '2025-08-28',
key1: '2',
key2: '2'
},
{
date: '2025-08-27',
key1: '2',
key2: '2'
},
{
date: '2025-08-26',
key1: '2',
key2: '2'
},
{
date: '2025-08-25',
key1: '2',
key2: '2'
},
{
date: '2025-08-24',
key1: '2',
key2: '2'
}
],
pv: [
{
date: '2025-08-30',
key1: '2',
key2: '2'
},
{
date: '2025-08-29',
key1: '2',
key2: '2'
},
{
date: '2025-08-28',
key1: '2',
key2: '2'
},
{
date: '2025-08-27',
key1: '2',
key2: '2'
},
{
date: '2025-08-26',
key1: '2',
key2: '2'
},
{
date: '2025-08-25',
key1: '2',
key2: '2'
},
{
date: '2025-08-24',
key1: '2',
key2: '2'
}
],
allTotal: {}
}),
// (this.deviceInfo = {
// alarm: [
// {
// date: '2025-08-30',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-29',
// key1: 8,
// key2: 5,
// key3: 5,
// key4: 7
// },
// {
// date: '2025-08-28',
// key1: 0,
// key2: 10,
// key3: 20,
// key4: 4
// },
// {
// date: '2025-08-27',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-26',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-25',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-24',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-23',
// key1: 10,
// key2: 0,
// 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
// }
// ],
// energy: [
// {
// date: '2025-08-30',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-29',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-28',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-27',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-26',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-25',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-24',
// key1: '2',
// key2: '2'
// }
// ],
// charge: [
// {
// date: '2025-08-30',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-29',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-28',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-27',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-26',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-25',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-24',
// key1: '2',
// key2: '2'
// }
// ],
// pv: [
// {
// date: '2025-08-30',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-29',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-28',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-27',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-26',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-25',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-24',
// key1: '2',
// key2: '2'
// }
// ],
// allTotal: {}
// }),
this.getOnLineList(),
this.getStatTotalList(),
this.getStatDayList(1),
this.getStatDayList(2),
this.getStatDayList(3)
])
// this.showFlag=true
},
methods: {
@@ -337,21 +352,29 @@ export default {
async getOnLineList() {
try {
// token: 用户TOKEN
const res = await getReq({}, '/queryStatSystem')
if (res.code === 200) {
this.deviceInfo.onLine = res.data
const res = await getReq('/api/queryStatSystem')
if (res.errcode === 0) {
this.deviceInfo.onLine = JSON.parse(JSON.stringify(res.data))
this.deviceInfo.onLine.runDays = this.getRunDays(res.data.launch_date)
console.log(JSON.parse(JSON.stringify(res.data)), this.deviceInfo.onLine, '111111111111')
} else {
throw res
}
} catch (error) {
this.deviceInfo.onLine = {
launchDate:11,
incomeTotal:12,
solarDeviceNum:10,
stationNum:15
}
this.deviceInfo.onLine = {}
}
},
getRunDays(date) {
const launchDate = new Date(date)
const today = new Date() // 替换为当前日期
const timeDiff = today - launchDate // 毫秒差
const daysRun = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) // 转换为天数
console.log(`从 2023-01-01 到今天已经运行了 ${daysRun} 天`)
return daysRun
},
// 查询系统累计统计信息
async getStatTotalList() {
try {
@@ -360,22 +383,27 @@ export default {
// station_id:场站ID，为0或不传查询所有场站总计
// category:类别，1:储能设备,2:充电设备,3:光伏设备,为0或不传查询所有类别总计
const query = {
// date:
// station_id:this.stationId
// category:0
date: new Date(),
stationId: this.stationId,
category: 0
}
const res = await postReq(query, '/queryStatTotal')
if (res.code === 200) {
const res = await getReq('/api/queryStatTotal', query)
if (res.errcode === 0) {
this.deviceInfo.allTotal = res.data
this.deviceInfo.allTotal.incomeTotal=
this.deviceInfo.allTotal.incomeCharge+ this.deviceInfo.allTotal.incomeElect
const { income_charge: incomeCharge, income_elect: incomeElect } =
this.deviceInfo.allTotal
this.deviceInfo.allTotal.incomeTotal = +incomeCharge + +incomeElect
console.log(
this.deviceInfo.allTotal.incomeTotal,
incomeCharge,
incomeElect,
' this.deviceInfo.allTotal.incomeTotal'
)
} else {
throw res
}
} catch (error) {
this.deviceInfo.allTotal = {
storageElectIn: 2,
storageElectOut: 5,
chargeElect: 4,
@@ -385,11 +413,22 @@ export default {
solarElectGen: 7,
solarElectGrid: 7
}
this.deviceInfo.allTotal.incomeTotal=
this.deviceInfo.allTotal.incomeCharge+ this.deviceInfo.allTotal.incomeElect
this.deviceInfo.allTotal.incomeTotal =
this.deviceInfo.allTotal.incomeCharge + this.deviceInfo.allTotal.incomeElect
}
},
getDateDaysAgo(daysAgo) {
const date = new Date()
date.setDate(date.getDate() - daysAgo)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
},
// 示例：获取7天前的日期
// 查询场站日统计信息
async getStatDayList(category) {
try {
@@ -398,31 +437,16 @@ export default {
// start_date：开始日期，格式：yyyy-mm-dd
// end_date：结束日期，格式：yyyy-mm-dd
const query = {
stationId:this.stationId,
stationId: this.stationId,
category,
// start_date:
// end_date:
start_date: this.getDateDaysAgo(7 - 1),
end_date: this.getDateDaysAgo(0)
}
const arr=[{
type:1,
label:'储能设备',
infoKey:'energy'
},
{
type:2,
label:'充电设备',
infoKey:'charge'
},
{
type:3,
label:'光伏设备',
infoKey:'pv'
},
]
const res = await postReq(query, '/queryStatDayList')
if (res.code === 200) {
arr.forEach((item)=>{
this.deviceInfo[item.infoKey]=res.data
const arr = { 1: 'energy', 2: 'charge', 3: 'pv' }
const res = await getReq('/api/queryStatDayList', query)
if (res.errcode === 0) {
this.list.forEach((item) => {
this.deviceInfo[arr[category]] = res.data
})
} else {
throw res