mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
538 lines
13 KiB
Vue
538 lines
13 KiB
Vue
<template>
|
||
<div class="Home">
|
||
<div class="content-left">
|
||
<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="item.infoKey === 'onLineTotal' ? deviceInfo.onLine : deviceInfo.allTotal"
|
||
></component>
|
||
</div>
|
||
</div>
|
||
<div class="tianditu">
|
||
<Map @changeStation="getCurrentStation"></Map>
|
||
</div>
|
||
<div class="content-right">
|
||
<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>
|
||
<span class="linear-text">{{ item.title }}</span>
|
||
</div>
|
||
</div>
|
||
<component
|
||
:is="item.componentId"
|
||
:device-info="deviceInfo[item.infoKey]"
|
||
:total="item.infoKey === 'onLineTotal' ? deviceInfo.onLine : deviceInfo.allTotal"
|
||
></component>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import onLine from '@/components/Home/onLine.vue'
|
||
import Operational from '@/components/Home/Operational.vue'
|
||
import Energy from '@/components/Home/Energy.vue'
|
||
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'
|
||
import {getRunDays,getDateDaysAgo} from '@/utils/dealWithData'
|
||
|
||
export default {
|
||
name: 'Home',
|
||
components: { Map },
|
||
data() {
|
||
return {
|
||
showFlag: false,
|
||
|
||
stationId: null,
|
||
deviceInfo: {},
|
||
list: [
|
||
{
|
||
title: '运行状况',
|
||
class: 'online-status',
|
||
componentId: onLine,
|
||
infoKey: 'onLineTotal'
|
||
},
|
||
{
|
||
title: '运行分析',
|
||
class: 'stats-cards',
|
||
componentId: Operational,
|
||
infoKey: ''
|
||
},
|
||
{
|
||
title: '储能设备',
|
||
class: 'energy-status',
|
||
componentId: Energy,
|
||
infoKey: 'energy'
|
||
},
|
||
{
|
||
title: '充电设备',
|
||
class: 'charge-analysis',
|
||
componentId: Charge,
|
||
infoKey: 'charge'
|
||
},
|
||
|
||
{
|
||
title: '光伏设备',
|
||
class: 'work-order',
|
||
componentId: Pv,
|
||
infoKey: 'pv'
|
||
},
|
||
{
|
||
title: '告警信息',
|
||
class: 'alarm-stats',
|
||
componentId: Alarm,
|
||
infoKey: 'alarm'
|
||
}
|
||
],
|
||
|
||
sysName: '',
|
||
user: JSON.parse(localStorage.getItem('user')) || {}
|
||
}
|
||
},
|
||
computed: {
|
||
leftList() {
|
||
return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
|
||
},
|
||
rightList() {
|
||
return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
|
||
}
|
||
},
|
||
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.getOnLineList(),
|
||
this.getStatTotalList(),
|
||
this.getStatDayList(1),
|
||
this.getStatDayList(2),
|
||
this.getStatDayList(3)
|
||
])
|
||
// this.showFlag=true
|
||
},
|
||
|
||
methods: {
|
||
getCurrentStation(e) {
|
||
console.log(e, 'getCurrentStation')
|
||
this.stationId = e
|
||
},
|
||
// 查询系统统计信息
|
||
async getOnLineList() {
|
||
try {
|
||
// token: 用户TOKEN
|
||
const res = await getReq('/api/queryStatSystem')
|
||
if (res.errcode === 0) {
|
||
this.deviceInfo.onLine = JSON.parse(JSON.stringify(res.data))
|
||
this.deviceInfo.onLine.runDays = 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 = {}
|
||
}
|
||
},
|
||
|
||
// 查询系统累计统计信息
|
||
async getStatTotalList() {
|
||
try {
|
||
// token: 用户TOKEN
|
||
// date:日期
|
||
// station_id:场站ID，为0或不传查询所有场站总计
|
||
// category:类别，1:储能设备,2:充电设备,3:光伏设备,为0或不传查询所有类别总计
|
||
const query = {
|
||
date: new Date(),
|
||
stationId: this.stationId,
|
||
category: 0
|
||
}
|
||
const res = await getReq('/api/queryStatTotal', query)
|
||
if (res.errcode === 0) {
|
||
this.deviceInfo.allTotal = res.data
|
||
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,
|
||
chargeNum: 5,
|
||
incomeCharge: 7,
|
||
incomeElect: 7,
|
||
solarElectGen: 7,
|
||
solarElectGrid: 7
|
||
}
|
||
this.deviceInfo.allTotal.incomeTotal =
|
||
this.deviceInfo.allTotal.incomeCharge + this.deviceInfo.allTotal.incomeElect
|
||
}
|
||
},
|
||
|
||
|
||
// 示例：获取7天前的日期
|
||
// 查询场站日统计信息
|
||
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: getDateDaysAgo(7 - 1),
|
||
end_date: getDateDaysAgo(0)
|
||
}
|
||
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
|
||
}
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.Home {
|
||
color: #fff;
|
||
height: 100%;
|
||
padding: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.tianditu {
|
||
width: calc(100% - 520px * 2);
|
||
height: 100%;
|
||
margin: 0px 15px;
|
||
}
|
||
|
||
.content-left,
|
||
.content-right {
|
||
height: 100%;
|
||
width: 520px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.grid-item {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: calc(33% - 10px);
|
||
z-index: 20;
|
||
|
||
.tool {
|
||
background: linear-gradient(180deg, rgba(0, 10, 6, 0) 0%, rgba(0, 76, 112, 1) 100%);
|
||
border-bottom: 2px solid transparent;
|
||
border-image: linear-gradient(90deg, rgba(3, 220, 255, 1) 0%, rgba(0, 19, 13, 0) 100%) 0 0 2 0;
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 45px;
|
||
|
||
.linear-text {
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(40, 235, 231, 1) 100%);
|
||
color: transparent;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
margin-left: 6px;
|
||
}
|
||
|
||
.text_right {
|
||
display: flex;
|
||
font-size: 11px;
|
||
|
||
div {
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.mark {
|
||
margin: 0px 2px;
|
||
font-weight: bold;
|
||
color: #43cf7c;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
display: flex;
|
||
|
||
i {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.text {
|
||
margin-left: 20px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(0, 186, 173, 0.15) 0%,
|
||
rgba(61, 254, 250, 0.15) 49.2%,
|
||
rgba(61, 254, 250, 0) 100%
|
||
);
|
||
-webkit-background-clip: text;
|
||
display: inline-block;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
}
|
||
}
|
||
</style>
|