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
@@ -15,6 +15,10 @@
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
total:{
|
||||
type:Object,
|
||||
default:()=>{}
|
||||
},
|
||||
deviceInfo: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
@@ -27,7 +31,7 @@ export default {
|
||||
name: '日光伏设备告警',
|
||||
key: 'key1',
|
||||
lineColor: '#22E4FF',
|
||||
value: 0,
|
||||
value: 1111,
|
||||
d: ''
|
||||
},
|
||||
{
|
||||
@@ -62,11 +66,28 @@ export default {
|
||||
watch: {
|
||||
deviceInfo: {
|
||||
handler(n) {
|
||||
let that=this
|
||||
this.$nextTick(() => {
|
||||
|
||||
this.drawLineChart()
|
||||
})
|
||||
}
|
||||
// immediate: true
|
||||
},
|
||||
total:{
|
||||
handler(n){
|
||||
if(n){
|
||||
|
||||
let that=this
|
||||
that.curList.forEach((item)=>{
|
||||
item.value=that.total[item.key]
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
deep: true, // 深度监听
|
||||
immediate: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
@@ -166,7 +187,6 @@ export default {
|
||||
series: this.lineChartData.ydata
|
||||
}
|
||||
option && faultChart.setOption(option)
|
||||
console.log(this.lineChartData, 'this.lineChartData')
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
<template>
|
||||
<div class="charge">
|
||||
<div class="text_Cur">
|
||||
<div v-for="item in curList" :key="item.key">
|
||||
<div v-for="item in curList" :key="item.key">
|
||||
<div>{{ item.name }}</div>
|
||||
<span class="mark">{{
|
||||
item.value?item.value: 0
|
||||
}}</span
|
||||
>
|
||||
<span class="d">{{ item.d }}</span>
|
||||
<span class="mark">{{ item.value ? item.value : 0 }}</span>
|
||||
<span class="d">{{ item.d }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="charge-chart"></div>
|
||||
@@ -18,6 +15,10 @@
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
total: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
deviceInfo: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
@@ -28,52 +29,63 @@ export default {
|
||||
curList: [
|
||||
{
|
||||
name: '日充电电量',
|
||||
key: 'key1',
|
||||
key: 'chargeElect',
|
||||
lineColor: '#00BBA3',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)',
|
||||
value:0,
|
||||
d:'kW·h'
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
},
|
||||
{
|
||||
name: '日充电次数',
|
||||
key: 'key2',
|
||||
key: 'chargeNum',
|
||||
lineColor: '#3F80F2',
|
||||
colorStart: ' rgba(99, 151, 235, 0.3)',
|
||||
colorEnd: ' rgba(24, 109, 245, 0.3)',
|
||||
value:0,
|
||||
d:''
|
||||
value: 0,
|
||||
d: ''
|
||||
}
|
||||
],
|
||||
curListEcharts: [
|
||||
{
|
||||
name: '日充电电量',
|
||||
key: 'key1',
|
||||
key: 'chargeElect',
|
||||
lineColor: '#00BBA3',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)',
|
||||
value:0,
|
||||
d:'kW·h'
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
},
|
||||
{
|
||||
name: '日充电收益',
|
||||
key: 'key2',
|
||||
key: 'incomeCharge',
|
||||
lineColor: '#3F80F2',
|
||||
colorStart: ' rgba(99, 151, 235, 0.3)',
|
||||
colorEnd: ' rgba(24, 109, 245, 0.3)',
|
||||
value:0,
|
||||
d:''
|
||||
value: 0,
|
||||
d: ''
|
||||
}
|
||||
],
|
||||
chargeChart: null,
|
||||
lineChartData: {
|
||||
ydata: [],
|
||||
xdata: []
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
total: {
|
||||
handler(n) {
|
||||
if (n) {
|
||||
let that = this
|
||||
that.curList.forEach((item) => {
|
||||
item.value = that.total[item.key]
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true, // 深度监听
|
||||
immediate: true
|
||||
},
|
||||
deviceInfo: {
|
||||
handler(n) {
|
||||
this.$nextTick(() => {
|
||||
@@ -94,25 +106,23 @@ export default {
|
||||
this.chargeChart.resize()
|
||||
},
|
||||
processData(data, keys) {
|
||||
console.log(data, 'dddddddddddddddddddddddddddd')
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
})
|
||||
const dates = data.map((item) => item.date)
|
||||
const values=[]
|
||||
keys.forEach((item,index)=>{
|
||||
|
||||
values[index]= data.map((dataValue)=>dataValue[keys[index]])
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
})
|
||||
|
||||
return {
|
||||
dates,
|
||||
values,
|
||||
values
|
||||
}
|
||||
},
|
||||
getChargeData() {
|
||||
const arr=this.curListEcharts
|
||||
const keyList=this.curListEcharts.map((item)=>item.key)
|
||||
const arr = this.curListEcharts
|
||||
const keyList = this.curListEcharts.map((item) => item.key)
|
||||
const result = this.processData(this.deviceInfo, keyList)
|
||||
|
||||
this.lineChartData.xdata = result.dates
|
||||
@@ -139,14 +149,13 @@ export default {
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: JSON.parse(JSON.stringify(item)).colorStart }, // 顶部颜色
|
||||
{ offset: 1, color: JSON.parse(JSON.stringify(item)).colorEnd }, // 底部颜色
|
||||
{ offset: 1, color: JSON.parse(JSON.stringify(item)).colorEnd } // 底部颜色
|
||||
]
|
||||
}
|
||||
},
|
||||
global: false,
|
||||
showSymbol: false,
|
||||
data:result.values[index]
|
||||
|
||||
data: result.values[index]
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -197,7 +206,6 @@ export default {
|
||||
series: this.lineChartData.ydata
|
||||
}
|
||||
option && chargeChart.setOption(option)
|
||||
console.log(this.lineChartData, 'this.lineChartData')
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
}
|
||||
}
|
||||
@@ -224,12 +232,12 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > div:last-child{
|
||||
& > div:last-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
.mark {
|
||||
font-size: 16px;
|
||||
margin-right: 2px;
|
||||
@@ -241,7 +249,7 @@ export default {
|
||||
rgba(61, 254, 250, 0.15) 49.2%,
|
||||
rgba(61, 254, 250, 0) 100%
|
||||
);
|
||||
.d{
|
||||
.d {
|
||||
margin-left: 1px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -17,6 +17,10 @@
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
total:{
|
||||
type:Object,
|
||||
default:()=>{}
|
||||
},
|
||||
deviceInfo: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
@@ -27,14 +31,14 @@ export default {
|
||||
curList: [
|
||||
{
|
||||
name: '日充电电量',
|
||||
key: 'key1',
|
||||
key: 'storageElectIn',
|
||||
lineColor: '#22E4FF',
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
},
|
||||
{
|
||||
name: '日放电电量',
|
||||
key: 'key2',
|
||||
key: 'storageElectOut',
|
||||
lineColor: '#0E68E4',
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
@@ -48,6 +52,20 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
total:{
|
||||
handler(n){
|
||||
if(n){
|
||||
let that=this
|
||||
that.curList.forEach((item)=>{
|
||||
item.value=that.total[item.key]
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
deep: true, // 深度监听
|
||||
immediate: true,
|
||||
|
||||
},
|
||||
deviceInfo: {
|
||||
handler(n) {
|
||||
this.$nextTick(() => {
|
||||
@@ -68,7 +86,6 @@ export default {
|
||||
this.faultChart.resize()
|
||||
},
|
||||
processData(data, keys) {
|
||||
console.log(data, 'dddddddddddddddddddddddddddd')
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
})
|
||||
@@ -155,7 +172,6 @@ export default {
|
||||
series: this.lineChartData.ydata
|
||||
}
|
||||
option && faultChart.setOption(option)
|
||||
console.log(this.lineChartData, 'this.lineChartData')
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="map">
|
||||
<div>
|
||||
<div class="icon1" @click="showModal()"></div>
|
||||
<div class="icon1" @click="showModal(testVal)"></div>
|
||||
<div class="icon"></div>
|
||||
</div>
|
||||
<div ref="mapContent"></div>
|
||||
@@ -42,16 +42,21 @@ export default {
|
||||
testVal: {
|
||||
name: '场站211',
|
||||
id: '124563'
|
||||
}
|
||||
},
|
||||
changeStationId:''
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
async showModal(currentVal) {
|
||||
this.changeStationId=currentVal.id
|
||||
this.$emit('changeStation',this.changeStationId)
|
||||
console.log(currentVal, 'cccccccccccccccccccccc')
|
||||
this.showCtrModal = true
|
||||
try {
|
||||
const query = {}
|
||||
const query = {
|
||||
// station_id:this.changeStationId
|
||||
}
|
||||
const res = await postReq(query, '')
|
||||
if (res.code == 200) {
|
||||
this.modalInfo = res.data.records
|
||||
|
||||
@@ -61,7 +61,6 @@ export default {
|
||||
this.disChargeChart.resize()
|
||||
},
|
||||
processData(data, keys) {
|
||||
console.log(data, 'dddddddddddddddddddddddddddd')
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
})
|
||||
@@ -151,7 +150,6 @@ export default {
|
||||
series: this.lineChartData.ydata
|
||||
}
|
||||
option && disChargeChart.setOption(option)
|
||||
console.log(this.lineChartData, 'this.lineChartData')
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,7 +57,6 @@ export default {
|
||||
this.revenueChart.resize()
|
||||
},
|
||||
processData(data, keys) {
|
||||
console.log(data, 'dddddddddddddddddddddddddddd')
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
})
|
||||
@@ -160,7 +159,6 @@ export default {
|
||||
series: this.lineChartData.ydata
|
||||
}
|
||||
option && revenueChart.setOption(option)
|
||||
console.log(this.lineChartData, 'this.lineChartData')
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,7 +55,6 @@ export default {
|
||||
this.utilizationChart.resize()
|
||||
},
|
||||
processData(data, keys) {
|
||||
console.log(data, 'dddddddddddddddddddddddddddd')
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
})
|
||||
@@ -145,7 +144,6 @@ export default {
|
||||
series: this.lineChartData.ydata
|
||||
}
|
||||
option && utilizationChart.setOption(option)
|
||||
console.log(this.lineChartData, 'this.lineChartData')
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
<div class="Operational">
|
||||
<div class="oper-bg">{{ currentHoverNumber }}%</div>
|
||||
<div class="oper-right">
|
||||
<div v-for="item in list" :key="item.key" class="oper-item" @mouseover="changeNumber(item)">
|
||||
<div v-for="item in curList" :key="item.key" class="oper-item" @mouseover="changeNumber(item)">
|
||||
<div style="display: flex">
|
||||
<div :style="`background:${item.lineColor}`" class="item-icon"></div>
|
||||
<span class="item-name">{{ item.name }}</span>
|
||||
</div>
|
||||
<span class="item-value">{{ item.value }}</span>
|
||||
<span class="item-value">{{ item.value?item.value:0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -17,6 +17,10 @@
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
total:{
|
||||
type:Object,
|
||||
default:()=>{}
|
||||
},
|
||||
deviceInfo: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
@@ -25,10 +29,10 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
currentHoverNumber: 58,
|
||||
list: [
|
||||
curList: [
|
||||
{
|
||||
name: '收益',
|
||||
key: 'connector_online',
|
||||
key: 'incomeTotal',
|
||||
percentKey: 'connector_online_percent',
|
||||
lineColor: 'linear-gradient(90deg, rgba(13, 87, 144, 1) 0%, rgba(21, 153, 253, 1) 100%);',
|
||||
value: 0
|
||||
@@ -44,7 +48,22 @@ export default {
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
watch: {
|
||||
total:{
|
||||
handler(n){
|
||||
if(n){
|
||||
let that=this
|
||||
that.curList.forEach((item)=>{
|
||||
item.value=that.total[item.key]
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
deep: true, // 深度监听
|
||||
immediate: true,
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
|
||||
@@ -17,6 +17,10 @@
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
total: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
deviceInfo: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
@@ -27,14 +31,14 @@ export default {
|
||||
curList: [
|
||||
{
|
||||
name: '日发电量',
|
||||
key: 'key1',
|
||||
key: 'solarElectGen',
|
||||
lineColor: '#22E4FF',
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
},
|
||||
{
|
||||
name: '日入网电量',
|
||||
key: 'key2',
|
||||
key: 'solarElectGrid',
|
||||
lineColor: '#0E68E4',
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
@@ -53,6 +57,18 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
total: {
|
||||
handler(n) {
|
||||
if (n) {
|
||||
let that = this
|
||||
that.curList.forEach((item) => {
|
||||
item.value = that.total[item.key]
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true, // 深度监听
|
||||
immediate: true
|
||||
},
|
||||
deviceInfo: {
|
||||
handler(n) {
|
||||
this.$nextTick(() => {
|
||||
@@ -73,7 +89,6 @@ export default {
|
||||
this.faultChart.resize()
|
||||
},
|
||||
processData(data, keys) {
|
||||
console.log(data, 'dddddddddddddddddddddddddddd')
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
})
|
||||
@@ -160,7 +175,6 @@ export default {
|
||||
series: this.lineChartData.ydata
|
||||
}
|
||||
option && faultChart.setOption(option)
|
||||
console.log(this.lineChartData, 'this.lineChartData')
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,42 +29,42 @@ export default {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
key: 'tianshu',
|
||||
key: 'launchDate',
|
||||
value: 20,
|
||||
d: '天',
|
||||
label: '系统运行天数',
|
||||
class: 'item-1'
|
||||
},
|
||||
{
|
||||
key: 'shouyi',
|
||||
key: 'incomeTotal',
|
||||
value: 10,
|
||||
d: '万元',
|
||||
label: '累计收益',
|
||||
class: 'item-2'
|
||||
},
|
||||
{
|
||||
key: 'shuliang',
|
||||
key: 'solarDeviceNum',
|
||||
value: 20,
|
||||
d: '',
|
||||
label: '光伏设备数量',
|
||||
class: 'item-3'
|
||||
},
|
||||
{
|
||||
key: 'shuliang',
|
||||
key: '"stationNum',
|
||||
value: 20,
|
||||
d: '',
|
||||
label: '储能预制舱数量',
|
||||
class: 'item-4'
|
||||
},
|
||||
{
|
||||
key: 'fadianliang',
|
||||
key: 'solarElectGen',
|
||||
value: 20,
|
||||
d: '',
|
||||
label: '光伏设备累计发电量',
|
||||
class: 'item-5'
|
||||
},
|
||||
{
|
||||
key: 'rongliang',
|
||||
key: 'capacityTotal',
|
||||
value: 20,
|
||||
d: '',
|
||||
label: '储能总容量',
|
||||
|
||||
@@ -274,9 +274,7 @@ export default {
|
||||
},
|
||||
initCharts() {
|
||||
this.chartOptions.forEach((option, index) => {
|
||||
// Vue 2 的 $refs 在 v-for 中是数组，需要取 [0]
|
||||
const dom = this.$refs[`chartContainer${index}`][0]
|
||||
console.log(dom, 'ddddddddddddddd')
|
||||
if (!dom) return
|
||||
|
||||
const chart = this.$echarts.init(dom)
|
||||
@@ -363,7 +361,6 @@ export default {
|
||||
},
|
||||
processData(keysList, dataKey, data) {
|
||||
const keys = keysList.map((item) => item.key)
|
||||
console.log(keys, dataKey, data, 'dddddddddddddddddddddddddddd')
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
})
|
||||
@@ -373,7 +370,6 @@ export default {
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
})
|
||||
console.log(dates, values, 'dates')
|
||||
return {
|
||||
dates,
|
||||
values
|
||||
|
||||
@@ -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