mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
系统总览字段修改
This commit is contained in:
@@ -15,6 +15,10 @@
|
|||||||
export default {
|
export default {
|
||||||
name: '',
|
name: '',
|
||||||
props: {
|
props: {
|
||||||
|
total:{
|
||||||
|
type:Object,
|
||||||
|
default:()=>{}
|
||||||
|
},
|
||||||
deviceInfo: {
|
deviceInfo: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
@@ -27,7 +31,7 @@ export default {
|
|||||||
name: '日光伏设备告警',
|
name: '日光伏设备告警',
|
||||||
key: 'key1',
|
key: 'key1',
|
||||||
lineColor: '#22E4FF',
|
lineColor: '#22E4FF',
|
||||||
value: 0,
|
value: 1111,
|
||||||
d: ''
|
d: ''
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -62,11 +66,28 @@ export default {
|
|||||||
watch: {
|
watch: {
|
||||||
deviceInfo: {
|
deviceInfo: {
|
||||||
handler(n) {
|
handler(n) {
|
||||||
|
let that=this
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|
||||||
this.drawLineChart()
|
this.drawLineChart()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// immediate: true
|
// 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() {},
|
mounted() {},
|
||||||
@@ -166,7 +187,6 @@ export default {
|
|||||||
series: this.lineChartData.ydata
|
series: this.lineChartData.ydata
|
||||||
}
|
}
|
||||||
option && faultChart.setOption(option)
|
option && faultChart.setOption(option)
|
||||||
console.log(this.lineChartData, 'this.lineChartData')
|
|
||||||
window.addEventListener('resize', this.handleResize)
|
window.addEventListener('resize', this.handleResize)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,10 +3,7 @@
|
|||||||
<div class="text_Cur">
|
<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>
|
<div>{{ item.name }}</div>
|
||||||
<span class="mark">{{
|
<span class="mark">{{ item.value ? item.value : 0 }}</span>
|
||||||
item.value?item.value: 0
|
|
||||||
}}</span
|
|
||||||
>
|
|
||||||
<span class="d">{{ item.d }}</span>
|
<span class="d">{{ item.d }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -18,6 +15,10 @@
|
|||||||
export default {
|
export default {
|
||||||
name: '',
|
name: '',
|
||||||
props: {
|
props: {
|
||||||
|
total: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
},
|
||||||
deviceInfo: {
|
deviceInfo: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
@@ -28,7 +29,7 @@ export default {
|
|||||||
curList: [
|
curList: [
|
||||||
{
|
{
|
||||||
name: '日充电电量',
|
name: '日充电电量',
|
||||||
key: 'key1',
|
key: 'chargeElect',
|
||||||
lineColor: '#00BBA3',
|
lineColor: '#00BBA3',
|
||||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||||
colorEnd: ' rgba(171, 255, 249, 0.3)',
|
colorEnd: ' rgba(171, 255, 249, 0.3)',
|
||||||
@@ -37,7 +38,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '日充电次数',
|
name: '日充电次数',
|
||||||
key: 'key2',
|
key: 'chargeNum',
|
||||||
lineColor: '#3F80F2',
|
lineColor: '#3F80F2',
|
||||||
colorStart: ' rgba(99, 151, 235, 0.3)',
|
colorStart: ' rgba(99, 151, 235, 0.3)',
|
||||||
colorEnd: ' rgba(24, 109, 245, 0.3)',
|
colorEnd: ' rgba(24, 109, 245, 0.3)',
|
||||||
@@ -48,7 +49,7 @@ export default {
|
|||||||
curListEcharts: [
|
curListEcharts: [
|
||||||
{
|
{
|
||||||
name: '日充电电量',
|
name: '日充电电量',
|
||||||
key: 'key1',
|
key: 'chargeElect',
|
||||||
lineColor: '#00BBA3',
|
lineColor: '#00BBA3',
|
||||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||||
colorEnd: ' rgba(171, 255, 249, 0.3)',
|
colorEnd: ' rgba(171, 255, 249, 0.3)',
|
||||||
@@ -57,7 +58,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '日充电收益',
|
name: '日充电收益',
|
||||||
key: 'key2',
|
key: 'incomeCharge',
|
||||||
lineColor: '#3F80F2',
|
lineColor: '#3F80F2',
|
||||||
colorStart: ' rgba(99, 151, 235, 0.3)',
|
colorStart: ' rgba(99, 151, 235, 0.3)',
|
||||||
colorEnd: ' rgba(24, 109, 245, 0.3)',
|
colorEnd: ' rgba(24, 109, 245, 0.3)',
|
||||||
@@ -69,11 +70,22 @@ export default {
|
|||||||
lineChartData: {
|
lineChartData: {
|
||||||
ydata: [],
|
ydata: [],
|
||||||
xdata: []
|
xdata: []
|
||||||
},
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
total: {
|
||||||
|
handler(n) {
|
||||||
|
if (n) {
|
||||||
|
let that = this
|
||||||
|
that.curList.forEach((item) => {
|
||||||
|
item.value = that.total[item.key]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true, // 深度监听
|
||||||
|
immediate: true
|
||||||
|
},
|
||||||
deviceInfo: {
|
deviceInfo: {
|
||||||
handler(n) {
|
handler(n) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
@@ -94,20 +106,18 @@ export default {
|
|||||||
this.chargeChart.resize()
|
this.chargeChart.resize()
|
||||||
},
|
},
|
||||||
processData(data, keys) {
|
processData(data, keys) {
|
||||||
console.log(data, 'dddddddddddddddddddddddddddd')
|
|
||||||
data.sort((a, b) => {
|
data.sort((a, b) => {
|
||||||
return new Date(a.date) - new Date(b.date)
|
return new Date(a.date) - new Date(b.date)
|
||||||
})
|
})
|
||||||
const dates = data.map((item) => item.date)
|
const dates = data.map((item) => item.date)
|
||||||
const values = []
|
const values = []
|
||||||
keys.forEach((item, index) => {
|
keys.forEach((item, index) => {
|
||||||
|
|
||||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||||
})
|
})
|
||||||
|
|
||||||
return {
|
return {
|
||||||
dates,
|
dates,
|
||||||
values,
|
values
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getChargeData() {
|
getChargeData() {
|
||||||
@@ -139,14 +149,13 @@ export default {
|
|||||||
y2: 1,
|
y2: 1,
|
||||||
colorStops: [
|
colorStops: [
|
||||||
{ offset: 0, color: JSON.parse(JSON.stringify(item)).colorStart }, // 顶部颜色
|
{ 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,
|
global: false,
|
||||||
showSymbol: false,
|
showSymbol: false,
|
||||||
data: result.values[index]
|
data: result.values[index]
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@@ -197,7 +206,6 @@ export default {
|
|||||||
series: this.lineChartData.ydata
|
series: this.lineChartData.ydata
|
||||||
}
|
}
|
||||||
option && chargeChart.setOption(option)
|
option && chargeChart.setOption(option)
|
||||||
console.log(this.lineChartData, 'this.lineChartData')
|
|
||||||
window.addEventListener('resize', this.handleResize)
|
window.addEventListener('resize', this.handleResize)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,6 +17,10 @@
|
|||||||
export default {
|
export default {
|
||||||
name: '',
|
name: '',
|
||||||
props: {
|
props: {
|
||||||
|
total:{
|
||||||
|
type:Object,
|
||||||
|
default:()=>{}
|
||||||
|
},
|
||||||
deviceInfo: {
|
deviceInfo: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
@@ -27,14 +31,14 @@ export default {
|
|||||||
curList: [
|
curList: [
|
||||||
{
|
{
|
||||||
name: '日充电电量',
|
name: '日充电电量',
|
||||||
key: 'key1',
|
key: 'storageElectIn',
|
||||||
lineColor: '#22E4FF',
|
lineColor: '#22E4FF',
|
||||||
value: 0,
|
value: 0,
|
||||||
d: 'kW·h'
|
d: 'kW·h'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '日放电电量',
|
name: '日放电电量',
|
||||||
key: 'key2',
|
key: 'storageElectOut',
|
||||||
lineColor: '#0E68E4',
|
lineColor: '#0E68E4',
|
||||||
value: 0,
|
value: 0,
|
||||||
d: 'kW·h'
|
d: 'kW·h'
|
||||||
@@ -48,6 +52,20 @@ 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,
|
||||||
|
|
||||||
|
},
|
||||||
deviceInfo: {
|
deviceInfo: {
|
||||||
handler(n) {
|
handler(n) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
@@ -68,7 +86,6 @@ export default {
|
|||||||
this.faultChart.resize()
|
this.faultChart.resize()
|
||||||
},
|
},
|
||||||
processData(data, keys) {
|
processData(data, keys) {
|
||||||
console.log(data, 'dddddddddddddddddddddddddddd')
|
|
||||||
data.sort((a, b) => {
|
data.sort((a, b) => {
|
||||||
return new Date(a.date) - new Date(b.date)
|
return new Date(a.date) - new Date(b.date)
|
||||||
})
|
})
|
||||||
@@ -155,7 +172,6 @@ export default {
|
|||||||
series: this.lineChartData.ydata
|
series: this.lineChartData.ydata
|
||||||
}
|
}
|
||||||
option && faultChart.setOption(option)
|
option && faultChart.setOption(option)
|
||||||
console.log(this.lineChartData, 'this.lineChartData')
|
|
||||||
window.addEventListener('resize', this.handleResize)
|
window.addEventListener('resize', this.handleResize)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="map">
|
<div class="map">
|
||||||
<div>
|
<div>
|
||||||
<div class="icon1" @click="showModal()"></div>
|
<div class="icon1" @click="showModal(testVal)"></div>
|
||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
</div>
|
</div>
|
||||||
<div ref="mapContent"></div>
|
<div ref="mapContent"></div>
|
||||||
@@ -42,16 +42,21 @@ export default {
|
|||||||
testVal: {
|
testVal: {
|
||||||
name: '场站211',
|
name: '场站211',
|
||||||
id: '124563'
|
id: '124563'
|
||||||
}
|
},
|
||||||
|
changeStationId:''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
methods: {
|
methods: {
|
||||||
async showModal(currentVal) {
|
async showModal(currentVal) {
|
||||||
|
this.changeStationId=currentVal.id
|
||||||
|
this.$emit('changeStation',this.changeStationId)
|
||||||
console.log(currentVal, 'cccccccccccccccccccccc')
|
console.log(currentVal, 'cccccccccccccccccccccc')
|
||||||
this.showCtrModal = true
|
this.showCtrModal = true
|
||||||
try {
|
try {
|
||||||
const query = {}
|
const query = {
|
||||||
|
// station_id:this.changeStationId
|
||||||
|
}
|
||||||
const res = await postReq(query, '')
|
const res = await postReq(query, '')
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
this.modalInfo = res.data.records
|
this.modalInfo = res.data.records
|
||||||
|
|||||||
@@ -61,7 +61,6 @@ export default {
|
|||||||
this.disChargeChart.resize()
|
this.disChargeChart.resize()
|
||||||
},
|
},
|
||||||
processData(data, keys) {
|
processData(data, keys) {
|
||||||
console.log(data, 'dddddddddddddddddddddddddddd')
|
|
||||||
data.sort((a, b) => {
|
data.sort((a, b) => {
|
||||||
return new Date(a.date) - new Date(b.date)
|
return new Date(a.date) - new Date(b.date)
|
||||||
})
|
})
|
||||||
@@ -151,7 +150,6 @@ export default {
|
|||||||
series: this.lineChartData.ydata
|
series: this.lineChartData.ydata
|
||||||
}
|
}
|
||||||
option && disChargeChart.setOption(option)
|
option && disChargeChart.setOption(option)
|
||||||
console.log(this.lineChartData, 'this.lineChartData')
|
|
||||||
window.addEventListener('resize', this.handleResize)
|
window.addEventListener('resize', this.handleResize)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -57,7 +57,6 @@ export default {
|
|||||||
this.revenueChart.resize()
|
this.revenueChart.resize()
|
||||||
},
|
},
|
||||||
processData(data, keys) {
|
processData(data, keys) {
|
||||||
console.log(data, 'dddddddddddddddddddddddddddd')
|
|
||||||
data.sort((a, b) => {
|
data.sort((a, b) => {
|
||||||
return new Date(a.date) - new Date(b.date)
|
return new Date(a.date) - new Date(b.date)
|
||||||
})
|
})
|
||||||
@@ -160,7 +159,6 @@ export default {
|
|||||||
series: this.lineChartData.ydata
|
series: this.lineChartData.ydata
|
||||||
}
|
}
|
||||||
option && revenueChart.setOption(option)
|
option && revenueChart.setOption(option)
|
||||||
console.log(this.lineChartData, 'this.lineChartData')
|
|
||||||
window.addEventListener('resize', this.handleResize)
|
window.addEventListener('resize', this.handleResize)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -55,7 +55,6 @@ export default {
|
|||||||
this.utilizationChart.resize()
|
this.utilizationChart.resize()
|
||||||
},
|
},
|
||||||
processData(data, keys) {
|
processData(data, keys) {
|
||||||
console.log(data, 'dddddddddddddddddddddddddddd')
|
|
||||||
data.sort((a, b) => {
|
data.sort((a, b) => {
|
||||||
return new Date(a.date) - new Date(b.date)
|
return new Date(a.date) - new Date(b.date)
|
||||||
})
|
})
|
||||||
@@ -145,7 +144,6 @@ export default {
|
|||||||
series: this.lineChartData.ydata
|
series: this.lineChartData.ydata
|
||||||
}
|
}
|
||||||
option && utilizationChart.setOption(option)
|
option && utilizationChart.setOption(option)
|
||||||
console.log(this.lineChartData, 'this.lineChartData')
|
|
||||||
window.addEventListener('resize', this.handleResize)
|
window.addEventListener('resize', this.handleResize)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,12 +2,12 @@
|
|||||||
<div class="Operational">
|
<div class="Operational">
|
||||||
<div class="oper-bg">{{ currentHoverNumber }}%</div>
|
<div class="oper-bg">{{ currentHoverNumber }}%</div>
|
||||||
<div class="oper-right">
|
<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="display: flex">
|
||||||
<div :style="`background:${item.lineColor}`" class="item-icon"></div>
|
<div :style="`background:${item.lineColor}`" class="item-icon"></div>
|
||||||
<span class="item-name">{{ item.name }}</span>
|
<span class="item-name">{{ item.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
<span class="item-value">{{ item.value }}</span>
|
<span class="item-value">{{ item.value?item.value:0 }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -17,6 +17,10 @@
|
|||||||
export default {
|
export default {
|
||||||
name: '',
|
name: '',
|
||||||
props: {
|
props: {
|
||||||
|
total:{
|
||||||
|
type:Object,
|
||||||
|
default:()=>{}
|
||||||
|
},
|
||||||
deviceInfo: {
|
deviceInfo: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
@@ -25,10 +29,10 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
currentHoverNumber: 58,
|
currentHoverNumber: 58,
|
||||||
list: [
|
curList: [
|
||||||
{
|
{
|
||||||
name: '收益',
|
name: '收益',
|
||||||
key: 'connector_online',
|
key: 'incomeTotal',
|
||||||
percentKey: 'connector_online_percent',
|
percentKey: 'connector_online_percent',
|
||||||
lineColor: 'linear-gradient(90deg, rgba(13, 87, 144, 1) 0%, rgba(21, 153, 253, 1) 100%);',
|
lineColor: 'linear-gradient(90deg, rgba(13, 87, 144, 1) 0%, rgba(21, 153, 253, 1) 100%);',
|
||||||
value: 0
|
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() {},
|
mounted() {},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
@@ -17,6 +17,10 @@
|
|||||||
export default {
|
export default {
|
||||||
name: '',
|
name: '',
|
||||||
props: {
|
props: {
|
||||||
|
total: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
},
|
||||||
deviceInfo: {
|
deviceInfo: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
@@ -27,14 +31,14 @@ export default {
|
|||||||
curList: [
|
curList: [
|
||||||
{
|
{
|
||||||
name: '日发电量',
|
name: '日发电量',
|
||||||
key: 'key1',
|
key: 'solarElectGen',
|
||||||
lineColor: '#22E4FF',
|
lineColor: '#22E4FF',
|
||||||
value: 0,
|
value: 0,
|
||||||
d: 'kW·h'
|
d: 'kW·h'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '日入网电量',
|
name: '日入网电量',
|
||||||
key: 'key2',
|
key: 'solarElectGrid',
|
||||||
lineColor: '#0E68E4',
|
lineColor: '#0E68E4',
|
||||||
value: 0,
|
value: 0,
|
||||||
d: 'kW·h'
|
d: 'kW·h'
|
||||||
@@ -53,6 +57,18 @@ 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
|
||||||
|
},
|
||||||
deviceInfo: {
|
deviceInfo: {
|
||||||
handler(n) {
|
handler(n) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
@@ -73,7 +89,6 @@ export default {
|
|||||||
this.faultChart.resize()
|
this.faultChart.resize()
|
||||||
},
|
},
|
||||||
processData(data, keys) {
|
processData(data, keys) {
|
||||||
console.log(data, 'dddddddddddddddddddddddddddd')
|
|
||||||
data.sort((a, b) => {
|
data.sort((a, b) => {
|
||||||
return new Date(a.date) - new Date(b.date)
|
return new Date(a.date) - new Date(b.date)
|
||||||
})
|
})
|
||||||
@@ -160,7 +175,6 @@ export default {
|
|||||||
series: this.lineChartData.ydata
|
series: this.lineChartData.ydata
|
||||||
}
|
}
|
||||||
option && faultChart.setOption(option)
|
option && faultChart.setOption(option)
|
||||||
console.log(this.lineChartData, 'this.lineChartData')
|
|
||||||
window.addEventListener('resize', this.handleResize)
|
window.addEventListener('resize', this.handleResize)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -29,42 +29,42 @@ export default {
|
|||||||
return {
|
return {
|
||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
key: 'tianshu',
|
key: 'launchDate',
|
||||||
value: 20,
|
value: 20,
|
||||||
d: '天',
|
d: '天',
|
||||||
label: '系统运行天数',
|
label: '系统运行天数',
|
||||||
class: 'item-1'
|
class: 'item-1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'shouyi',
|
key: 'incomeTotal',
|
||||||
value: 10,
|
value: 10,
|
||||||
d: '万元',
|
d: '万元',
|
||||||
label: '累计收益',
|
label: '累计收益',
|
||||||
class: 'item-2'
|
class: 'item-2'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'shuliang',
|
key: 'solarDeviceNum',
|
||||||
value: 20,
|
value: 20,
|
||||||
d: '',
|
d: '',
|
||||||
label: '光伏设备数量',
|
label: '光伏设备数量',
|
||||||
class: 'item-3'
|
class: 'item-3'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'shuliang',
|
key: '"stationNum',
|
||||||
value: 20,
|
value: 20,
|
||||||
d: '',
|
d: '',
|
||||||
label: '储能预制舱数量',
|
label: '储能预制舱数量',
|
||||||
class: 'item-4'
|
class: 'item-4'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'fadianliang',
|
key: 'solarElectGen',
|
||||||
value: 20,
|
value: 20,
|
||||||
d: '',
|
d: '',
|
||||||
label: '光伏设备累计发电量',
|
label: '光伏设备累计发电量',
|
||||||
class: 'item-5'
|
class: 'item-5'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'rongliang',
|
key: 'capacityTotal',
|
||||||
value: 20,
|
value: 20,
|
||||||
d: '',
|
d: '',
|
||||||
label: '储能总容量',
|
label: '储能总容量',
|
||||||
|
|||||||
@@ -274,9 +274,7 @@ export default {
|
|||||||
},
|
},
|
||||||
initCharts() {
|
initCharts() {
|
||||||
this.chartOptions.forEach((option, index) => {
|
this.chartOptions.forEach((option, index) => {
|
||||||
// Vue 2 的 $refs 在 v-for 中是数组,需要取 [0]
|
|
||||||
const dom = this.$refs[`chartContainer${index}`][0]
|
const dom = this.$refs[`chartContainer${index}`][0]
|
||||||
console.log(dom, 'ddddddddddddddd')
|
|
||||||
if (!dom) return
|
if (!dom) return
|
||||||
|
|
||||||
const chart = this.$echarts.init(dom)
|
const chart = this.$echarts.init(dom)
|
||||||
@@ -363,7 +361,6 @@ export default {
|
|||||||
},
|
},
|
||||||
processData(keysList, dataKey, data) {
|
processData(keysList, dataKey, data) {
|
||||||
const keys = keysList.map((item) => item.key)
|
const keys = keysList.map((item) => item.key)
|
||||||
console.log(keys, dataKey, data, 'dddddddddddddddddddddddddddd')
|
|
||||||
data.sort((a, b) => {
|
data.sort((a, b) => {
|
||||||
return new Date(a.date) - new Date(b.date)
|
return new Date(a.date) - new Date(b.date)
|
||||||
})
|
})
|
||||||
@@ -373,7 +370,6 @@ export default {
|
|||||||
keys.forEach((item, index) => {
|
keys.forEach((item, index) => {
|
||||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||||
})
|
})
|
||||||
console.log(dates, values, 'dates')
|
|
||||||
return {
|
return {
|
||||||
dates,
|
dates,
|
||||||
values
|
values
|
||||||
|
|||||||
@@ -8,11 +8,15 @@
|
|||||||
<span class="linear-text">{{ item.title }}</span>
|
<span class="linear-text">{{ item.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
<div class="tianditu">
|
<div class="tianditu">
|
||||||
<Map></Map>
|
<Map @changeStation="getCurrentStation"></Map>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-right">
|
<div class="content-right">
|
||||||
<div v-for="(item, i) in rightList" :key="i" :class="`grid-item ${item.class}`">
|
<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>
|
<span class="linear-text">{{ item.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -36,12 +44,13 @@ import Charge from '@/components/Home/Charge.vue'
|
|||||||
import Pv from '@/components/Home/Pv.vue'
|
import Pv from '@/components/Home/Pv.vue'
|
||||||
import Alarm from '@/components/Home/Alarm.vue'
|
import Alarm from '@/components/Home/Alarm.vue'
|
||||||
import Map from '@/components/Home/Map.vue'
|
import Map from '@/components/Home/Map.vue'
|
||||||
|
import { getReq, postReq } from '@/request/api'
|
||||||
export default {
|
export default {
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
components: { Map },
|
components: { Map },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
stationId: null,
|
||||||
deviceInfo: {},
|
deviceInfo: {},
|
||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
@@ -96,7 +105,8 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
async mounted() {
|
async mounted() {
|
||||||
this.deviceInfo = {
|
await Promise.all([
|
||||||
|
(this.deviceInfo = {
|
||||||
alarm: [
|
alarm: [
|
||||||
{
|
{
|
||||||
date: '2025-08-30',
|
date: '2025-08-30',
|
||||||
@@ -307,11 +317,138 @@ export default {
|
|||||||
key1: '2',
|
key1: '2',
|
||||||
key2: '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>
|
</script>
|
||||||
|
|
||||||
@@ -328,7 +465,6 @@ export default {
|
|||||||
width: calc(100% - 520px * 2);
|
width: calc(100% - 520px * 2);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0px 15px;
|
margin: 0px 15px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-left,
|
.content-left,
|
||||||
|
|||||||
Reference in New Issue
Block a user