mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
系统总览字段修改
This commit is contained in:
ym1026
@@ -8,11 +8,15 @@
|
||||
<span class="linear-text">{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="item.componentId" :device-info="deviceInfo[item.infoKey]"></component>
|
||||
<component
|
||||
:is="item.componentId"
|
||||
:device-info="deviceInfo[item.infoKey]"
|
||||
:total="deviceInfo.allTotal"
|
||||
></component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tianditu">
|
||||
<Map></Map>
|
||||
<Map @changeStation="getCurrentStation"></Map>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div v-for="(item, i) in rightList" :key="i" :class="`grid-item ${item.class}`">
|
||||
@@ -22,7 +26,11 @@
|
||||
<span class="linear-text">{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="item.componentId" :device-info="deviceInfo[item.infoKey]"></component>
|
||||
<component
|
||||
:is="item.componentId"
|
||||
:device-info="deviceInfo[item.infoKey]"
|
||||
:total="deviceInfo.allTotal"
|
||||
></component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,12 +44,13 @@ import Charge from '@/components/Home/Charge.vue'
|
||||
import Pv from '@/components/Home/Pv.vue'
|
||||
import Alarm from '@/components/Home/Alarm.vue'
|
||||
import Map from '@/components/Home/Map.vue'
|
||||
|
||||
import { getReq, postReq } from '@/request/api'
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {Map},
|
||||
components: { Map },
|
||||
data() {
|
||||
return {
|
||||
stationId: null,
|
||||
deviceInfo: {},
|
||||
list: [
|
||||
{
|
||||
@@ -96,222 +105,350 @@ export default {
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
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.getOnLineList(),
|
||||
this.getStatTotalList(),
|
||||
this.getStatDayList(1),
|
||||
this.getStatDayList(2),
|
||||
this.getStatDayList(3)
|
||||
])
|
||||
},
|
||||
|
||||
methods: {}
|
||||
methods: {
|
||||
getCurrentStation(e) {
|
||||
console.log(e, 'getCurrentStation')
|
||||
this.stationId = e
|
||||
},
|
||||
// 查询系统统计信息
|
||||
async getOnLineList() {
|
||||
try {
|
||||
// token: 用户TOKEN
|
||||
const res = await getReq({}, '/queryStatSystem')
|
||||
if (res.code === 200) {
|
||||
this.deviceInfo.onLine = res.data
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
this.deviceInfo.onLine = {}
|
||||
}
|
||||
},
|
||||
// 查询系统累计统计信息
|
||||
async getStatTotalList() {
|
||||
try {
|
||||
// token: 用户TOKEN
|
||||
// date:日期
|
||||
// station_id:场站ID，为0或不传查询所有场站总计
|
||||
// category:类别，1:储能设备,2:充电设备,3:光伏设备,为0或不传查询所有类别总计
|
||||
const query = {
|
||||
// date:
|
||||
// station_id:this.stationId
|
||||
// category:0
|
||||
}
|
||||
const res = await postReq(query, '/queryStatTotal')
|
||||
if (res.code === 200) {
|
||||
this.deviceInfo.allTotal = res.data
|
||||
this.deviceInfo.allTotal.incomeTotal=
|
||||
this.deviceInfo.allTotal.incomeCharge+ this.deviceInfo.allTotal.incomeElect
|
||||
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
this.deviceInfo.allTotal = {
|
||||
|
||||
storageElectIn: 2,
|
||||
storageElectOut: 5,
|
||||
chargeElect: 4,
|
||||
chargeNum: 5,
|
||||
incomeCharge: 7,
|
||||
incomeElect: 7,
|
||||
solarElectGen: 7,
|
||||
solarElectGrid: 7
|
||||
}
|
||||
this.deviceInfo.allTotal.incomeTotal=
|
||||
this.deviceInfo.allTotal.incomeCharge+ this.deviceInfo.allTotal.incomeElect
|
||||
|
||||
}
|
||||
},
|
||||
// 查询场站日统计信息
|
||||
async getStatDayList(category) {
|
||||
try {
|
||||
// station_id: 场站ID
|
||||
// category: 类别： 1：储能设备,2:充电设备,3:光伏设备
|
||||
// start_date：开始日期，格式：yyyy-mm-dd
|
||||
// end_date：结束日期，格式：yyyy-mm-dd
|
||||
const query = {
|
||||
stationId:this.stationId,
|
||||
category,
|
||||
// start_date:
|
||||
// end_date:
|
||||
}
|
||||
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
|
||||
})
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
// this.deviceInfo.allStatDayList = []
|
||||
// this.deviceInfo.allStatDayList = [
|
||||
// {
|
||||
// date: '2025-08-30',
|
||||
// storageElectIn: 2,
|
||||
// storageElectOut: 5,
|
||||
// chargeElect: 4,
|
||||
// chargeNum: 5,
|
||||
// incomeCharge: 7,
|
||||
// solarElectGen: 7,
|
||||
// solarElectGrid: 7
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-31',
|
||||
// storageElectIn: 3,
|
||||
// storageElectOut: 7,
|
||||
// chargeElect: 5,
|
||||
// chargeNum: 5,
|
||||
// incomeCharge: 4,
|
||||
// solarElectGen: 6,
|
||||
// solarElectGrid: 8
|
||||
// }
|
||||
// ]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -325,10 +462,9 @@ export default {
|
||||
}
|
||||
|
||||
.tianditu {
|
||||
width: calc(100% - 520px * 2) ;
|
||||
width: calc(100% - 520px * 2);
|
||||
height: 100%;
|
||||
margin: 0px 15px;
|
||||
|
||||
}
|
||||
|
||||
.content-left,
|
||||
|
||||
Reference in New Issue
Block a user