mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
系统总览图表加载销毁优化
This commit is contained in:
@@ -29,32 +29,32 @@ export default {
|
||||
curList: [
|
||||
{
|
||||
name: '日光伏设备告警',
|
||||
key: 'key1',
|
||||
key: 'solar_num_err',
|
||||
lineColor: '#22E4FF',
|
||||
value: 1111,
|
||||
d: ''
|
||||
},
|
||||
{
|
||||
name: '日储能设备告警',
|
||||
key: 'key2',
|
||||
key: 'storage_num_err',
|
||||
lineColor: '#0E68E4',
|
||||
value: 0,
|
||||
d: ''
|
||||
},
|
||||
{
|
||||
name: '日充电设备告警',
|
||||
key: 'key3',
|
||||
key: 'charge_num_err',
|
||||
lineColor: '#00BAAD',
|
||||
value: 0,
|
||||
d: ''
|
||||
},
|
||||
{
|
||||
name: '日负荷设备告警',
|
||||
key: 'key4',
|
||||
lineColor: '#FF8D1A',
|
||||
value: 0,
|
||||
d: ''
|
||||
}
|
||||
// {
|
||||
// name: '日负荷设备告警',
|
||||
// key: 'key4',
|
||||
// lineColor: '#FF8D1A',
|
||||
// value: 0,
|
||||
// d: ''
|
||||
// }
|
||||
],
|
||||
faultChart: null,
|
||||
lineChartData: {
|
||||
@@ -91,7 +91,7 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
onBeforeUnmount() {
|
||||
beforeUnmount() {
|
||||
this.faultChart = null
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
@@ -102,9 +102,9 @@ export default {
|
||||
},
|
||||
processData(data, keys) {
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
return new Date(a.dt) - new Date(b.dt)
|
||||
})
|
||||
const dates = data.map((item) => item.date)
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
@@ -181,6 +181,7 @@ export default {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 4,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
|
||||
@@ -29,7 +29,7 @@ export default {
|
||||
curList: [
|
||||
{
|
||||
name: '日充电电量',
|
||||
key: 'chargeElect',
|
||||
key: 'charge_elect',
|
||||
lineColor: '#00BBA3',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)',
|
||||
@@ -38,7 +38,7 @@ export default {
|
||||
},
|
||||
{
|
||||
name: '日充电次数',
|
||||
key: 'chargeNum',
|
||||
key: 'charge_num',
|
||||
lineColor: '#3F80F2',
|
||||
colorStart: ' rgba(99, 151, 235, 0.3)',
|
||||
colorEnd: ' rgba(24, 109, 245, 0.3)',
|
||||
@@ -49,7 +49,7 @@ export default {
|
||||
curListEcharts: [
|
||||
{
|
||||
name: '日充电电量',
|
||||
key: 'chargeElect',
|
||||
key: 'charge_elect',
|
||||
lineColor: '#00BBA3',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)',
|
||||
@@ -58,7 +58,7 @@ export default {
|
||||
},
|
||||
{
|
||||
name: '日充电收益',
|
||||
key: 'incomeCharge',
|
||||
key: 'income_charge',
|
||||
lineColor: '#3F80F2',
|
||||
colorStart: ' rgba(99, 151, 235, 0.3)',
|
||||
colorEnd: ' rgba(24, 109, 245, 0.3)',
|
||||
@@ -67,7 +67,7 @@ export default {
|
||||
}
|
||||
],
|
||||
chargeChart: null,
|
||||
lineChartData: {
|
||||
chargeChartData: {
|
||||
ydata: [],
|
||||
xdata: []
|
||||
}
|
||||
@@ -75,41 +75,46 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
total: {
|
||||
handler(n) {
|
||||
if (n) {
|
||||
let that = this
|
||||
that.curList.forEach((item) => {
|
||||
item.value = that.total[item.key]
|
||||
handler(newVal,oldVal) {
|
||||
if (newVal!==oldVal) {
|
||||
this.curList.forEach((item) => {
|
||||
item.value = this.total[item.key]
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true, // 深度监听
|
||||
immediate: true
|
||||
|
||||
},
|
||||
deviceInfo: {
|
||||
handler(n) {
|
||||
this.$nextTick(() => {
|
||||
this.drawLineChart()
|
||||
})
|
||||
}
|
||||
// immediate: true
|
||||
handler(newVal,oldVal) {
|
||||
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
|
||||
this.$nextTick(() => {
|
||||
this.drawLineChart()
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true // 确保深度比较
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
onBeforeUnmount() {
|
||||
this.chargeChart = null
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
if(this.chargeChart){
|
||||
this.chargeChart.dispose()
|
||||
this.chargeChart = null
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.chargeChart.resize()
|
||||
if(this.chargeChart){
|
||||
this.chargeChart.resize()
|
||||
}
|
||||
},
|
||||
processData(data, keys) {
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
return new Date(a.dt) - new Date(b.dt)
|
||||
})
|
||||
const dates = data.map((item) => item.date)
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
@@ -125,9 +130,9 @@ export default {
|
||||
const keyList = this.curListEcharts.map((item) => item.key)
|
||||
const result = this.processData(this.deviceInfo, keyList)
|
||||
|
||||
this.lineChartData.xdata = result.dates
|
||||
this.chargeChartData.xdata = result.dates
|
||||
arr.forEach((item, index) => {
|
||||
this.lineChartData.ydata[index] = {
|
||||
this.chargeChartData.ydata[index] = {
|
||||
name: item.name,
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
@@ -162,7 +167,11 @@ export default {
|
||||
|
||||
drawLineChart(activeKey) {
|
||||
this.getChargeData(activeKey)
|
||||
if(this.chargeChart){
|
||||
this.chargeChart.dispose()
|
||||
}
|
||||
const chartDom = document.getElementById('charge-chart')
|
||||
if (!chartDom) return;
|
||||
let chargeChart = this.$echarts.init(chartDom)
|
||||
this.chargeChart = chargeChart
|
||||
const option = {
|
||||
@@ -186,7 +195,7 @@ export default {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.lineChartData.xdata,
|
||||
data: this.chargeChartData.xdata,
|
||||
axisLine: {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
@@ -200,12 +209,18 @@ export default {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 4,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: this.lineChartData.ydata
|
||||
series: this.chargeChartData.ydata
|
||||
}
|
||||
option && chargeChart.setOption(option)
|
||||
this.setupResizeListener()
|
||||
|
||||
},
|
||||
setupResizeListener(){
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,9 +17,9 @@
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
total:{
|
||||
type:Object,
|
||||
default:()=>{}
|
||||
total: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
deviceInfo: {
|
||||
type: Array,
|
||||
@@ -28,68 +28,75 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uid:'1',
|
||||
curList: [
|
||||
{
|
||||
name: '日充电电量',
|
||||
key: 'storageElectIn',
|
||||
key: 'storage_elect_in',
|
||||
lineColor: '#22E4FF',
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
},
|
||||
{
|
||||
name: '日放电电量',
|
||||
key: 'storageElectOut',
|
||||
key: 'storage_elect_out',
|
||||
lineColor: '#0E68E4',
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
}
|
||||
],
|
||||
faultChart: null,
|
||||
lineChartData: {
|
||||
energyChart: null,
|
||||
energyChartData: {
|
||||
ydata: [],
|
||||
xdata: []
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
total:{
|
||||
handler(n){
|
||||
if(n){
|
||||
let that=this
|
||||
that.curList.forEach((item)=>{
|
||||
item.value=that.total[item.key]
|
||||
total: {
|
||||
handler(newVal,oldVal) {
|
||||
if (newVal!==oldVal) {
|
||||
let that = this
|
||||
that.curList.forEach((item) => {
|
||||
item.value = that.total[item.key]
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
deep: true, // 深度监听
|
||||
immediate: true,
|
||||
|
||||
|
||||
},
|
||||
deviceInfo: {
|
||||
handler(n) {
|
||||
this.$nextTick(() => {
|
||||
this.drawLineChart()
|
||||
})
|
||||
}
|
||||
// immediate: true
|
||||
handler(newVal,oldVal) {
|
||||
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
|
||||
this.$nextTick(() => {
|
||||
this.drawLineChart()
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
deep: true // 确保深度比较
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
onBeforeUnmount() {
|
||||
this.faultChart = null
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
if(this.energyChart){
|
||||
this.energyChart.dispose()
|
||||
this.energyChart = null
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.faultChart.resize()
|
||||
if(this.energyChart){
|
||||
this.energyChart.resize()
|
||||
}
|
||||
},
|
||||
processData(data, keys) {
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
return new Date(a.dt) - new Date(b.dt)
|
||||
})
|
||||
const dates = data.map((item) => item.date)
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
@@ -105,9 +112,9 @@ export default {
|
||||
const keyList = this.curList.map((item) => item.key)
|
||||
const result = this.processData(this.deviceInfo, keyList)
|
||||
|
||||
this.lineChartData.xdata = result.dates
|
||||
this.energyChartData.xdata = result.dates
|
||||
arr.forEach((item, index) => {
|
||||
this.lineChartData.ydata[index] = {
|
||||
this.energyChartData.ydata[index] = {
|
||||
name: item.name,
|
||||
smooth: true,
|
||||
type: 'bar',
|
||||
@@ -128,9 +135,13 @@ export default {
|
||||
|
||||
drawLineChart(activeKey) {
|
||||
this.getChargeData(activeKey)
|
||||
if(this.energyChart){
|
||||
this.energyChart.dispose()
|
||||
}
|
||||
const chartDom = document.getElementById('energy-chart')
|
||||
let faultChart = this.$echarts.init(chartDom)
|
||||
this.faultChart = faultChart
|
||||
if (!chartDom) return;
|
||||
let energyChart = this.$echarts.init(chartDom)
|
||||
this.energyChart = energyChart
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@@ -147,12 +158,12 @@ export default {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.lineChartData.xdata,
|
||||
data: this.energyChartData.xdata,
|
||||
axisLine: {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
@@ -166,12 +177,17 @@ export default {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 4,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: this.lineChartData.ydata
|
||||
series: this.energyChartData.ydata
|
||||
}
|
||||
option && faultChart.setOption(option)
|
||||
option && energyChart.setOption(option)
|
||||
this.setupResizeListener()
|
||||
},
|
||||
setupResizeListener(){
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<component :is="item.componentId" :props-total="deviceInfo.allTotal" :props-info="deviceInfo[item.infoKey]" ></component>
|
||||
<!-- -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -34,17 +34,13 @@ import StatisticalInfo from '@/components/Home/Modal/StatisticalInfo.vue'
|
||||
import Revenue from '@/components/Home/Modal/Revenue.vue'
|
||||
import Utilization from '@/components/Home/Modal/Utilization.vue'
|
||||
import DisCharge from '@/components/Home/Modal/DisCharge.vue'
|
||||
import Operational from '@/components/Home/Operational.vue'
|
||||
import { getReq, postReq } from '@/request/api'
|
||||
|
||||
import Charge from '@/components/Home/Charge.vue'
|
||||
import Alarm from '@/components/Home/Alarm.vue'
|
||||
import Map from '@/components/Home/Map_tianditu.vue'
|
||||
import EnvInfo from './Modal/EnvInfo.vue'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {Map},
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
deviceInfo: {},
|
||||
@@ -113,215 +109,105 @@ export default {
|
||||
( this.deviceInfo = {
|
||||
alarm: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
dt: '2025-08-30',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
dt: '2025-08-29',
|
||||
key1: 8,
|
||||
key2: 5,
|
||||
key3: 5,
|
||||
key4: 7
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
dt: '2025-08-28',
|
||||
key1: 0,
|
||||
key2: 10,
|
||||
key3: 20,
|
||||
key4: 4
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
dt: '2025-08-27',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
dt: '2025-08-26',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
dt: '2025-08-25',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
dt: '2025-08-24',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-23',
|
||||
dt: '2025-08-23',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-22',
|
||||
dt: '2025-08-22',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-21',
|
||||
dt: '2025-08-21',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-20',
|
||||
dt: '2025-08-20',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-19',
|
||||
dt: '2025-08-19',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-18',
|
||||
dt: '2025-08-18',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-17',
|
||||
dt: '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'
|
||||
}
|
||||
]
|
||||
|
||||
}),
|
||||
|
||||
|
||||
|
||||
@@ -20,70 +20,75 @@ export default {
|
||||
name: '日充电电量',
|
||||
key: 'key1',
|
||||
lineColor: '#9BD801',
|
||||
value:0,
|
||||
d:'kW·h'
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
},
|
||||
{
|
||||
name: '日放电电量',
|
||||
key: 'key2',
|
||||
lineColor: '#3DFEFA',
|
||||
value:0,
|
||||
d:'kW·h'
|
||||
},
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
disChargeChart: null,
|
||||
lineChartData: {
|
||||
disChargeChartData: {
|
||||
ydata: [],
|
||||
xdata: []
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
propsInfo: {
|
||||
handler(n) {
|
||||
this.$nextTick(() => {
|
||||
this.drawLineChart()
|
||||
})
|
||||
}
|
||||
// immediate: true
|
||||
handler(newVal, oldVal) {
|
||||
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
|
||||
this.$nextTick(() => {
|
||||
this.drawLineChart()
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true // 确保深度比较
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
onBeforeUnmount() {
|
||||
this.disChargeChart = null
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
if (this.disChargeChart) {
|
||||
this.disChargeChart.dispose()
|
||||
this.disChargeChart = null
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.disChargeChart.resize()
|
||||
if (this.disChargeChart) {
|
||||
this.disChargeChart.resize()
|
||||
}
|
||||
},
|
||||
processData(data, keys) {
|
||||
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 dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
})
|
||||
|
||||
|
||||
return {
|
||||
dates,
|
||||
values,
|
||||
values
|
||||
}
|
||||
},
|
||||
getDisChargeData() {
|
||||
const arr=this.curList
|
||||
const keyList=this.curList.map((item)=>item.key)
|
||||
const arr = this.curList
|
||||
const keyList = this.curList.map((item) => item.key)
|
||||
const result = this.processData(this.propsInfo, keyList)
|
||||
|
||||
this.lineChartData.xdata = result.dates
|
||||
this.disChargeChartData.xdata = result.dates
|
||||
arr.forEach((item, index) => {
|
||||
this.lineChartData.ydata[index] = {
|
||||
this.disChargeChartData.ydata[index] = {
|
||||
name: item.name,
|
||||
smooth: false,
|
||||
type: 'line',
|
||||
@@ -95,18 +100,21 @@ export default {
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
|
||||
|
||||
global: false,
|
||||
showSymbol: false,
|
||||
data:result.values[index]
|
||||
|
||||
data: result.values[index]
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
drawLineChart(activeKey) {
|
||||
this.getDisChargeData(activeKey)
|
||||
if (this.disChargeChart) {
|
||||
this.disChargeChart.dispose()
|
||||
}
|
||||
const chartDom = document.getElementById('disCharge-chart')
|
||||
if (!chartDom) return
|
||||
let disChargeChart = this.$echarts.init(chartDom)
|
||||
this.disChargeChart = disChargeChart
|
||||
const option = {
|
||||
@@ -130,7 +138,7 @@ export default {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.lineChartData.xdata,
|
||||
data: this.disChargeChartData.xdata,
|
||||
axisLine: {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
@@ -147,9 +155,13 @@ export default {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: this.lineChartData.ydata
|
||||
series: this.disChargeChartData.ydata
|
||||
}
|
||||
option && disChargeChart.setOption(option)
|
||||
this.setupResizeListener()
|
||||
},
|
||||
setupResizeListener() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
}
|
||||
}
|
||||
@@ -158,8 +170,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.disCharge {
|
||||
height:calc(100% - 45px);
|
||||
|
||||
height: calc(100% - 45px);
|
||||
|
||||
#disCharge-chart {
|
||||
height: 100%;
|
||||
@@ -177,12 +188,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;
|
||||
@@ -194,7 +205,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;
|
||||
}
|
||||
|
||||
@@ -80,15 +80,13 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
propsTotal: {
|
||||
handler(n) {
|
||||
if (n) {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal !== oldVal) {
|
||||
this.list.forEach((item) => {
|
||||
item.value = this.propsTotal[item.key]
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
@@ -90,15 +90,14 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
propsTotal: {
|
||||
handler(n) {
|
||||
if (n) {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal !== oldVal) {
|
||||
this.list.forEach((item) => {
|
||||
item.value = this.propsTotal[item.key]
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
<div class="content-left">
|
||||
<div v-for="item in leftList" :key="item.key" :class="`item ${item.class}`">
|
||||
<div>
|
||||
<span>{{ item.value ? item.value :0}}</span
|
||||
<span>{{ item.value ? item.value : 0 }}</span
|
||||
><span class="d">{{ item.d }}</span>
|
||||
</div>
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center;font-weight: 500;">
|
||||
<div style="text-align: center; font-weight: 500">
|
||||
<div class="online-icon"></div>
|
||||
<span>{{ curStatus }}</span>
|
||||
</div>
|
||||
@@ -17,7 +17,7 @@
|
||||
<div class="content-right">
|
||||
<div v-for="item in rightList" :key="item.key" :class="`item ${item.class}`">
|
||||
<div>
|
||||
<span>{{ item.value ? item.value :0 }}</span
|
||||
<span>{{ item.value ? item.value : 0 }}</span
|
||||
><span class="d">{{ item.d }}</span>
|
||||
</div>
|
||||
<span>{{ item.label }}</span>
|
||||
@@ -27,7 +27,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
@@ -42,7 +41,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curStatus:'充电',
|
||||
curStatus: '充电',
|
||||
list: [
|
||||
{
|
||||
key: 'tianshu',
|
||||
@@ -99,15 +98,13 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
propsTotal: {
|
||||
handler(n) {
|
||||
if (n) {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal !== oldVal) {
|
||||
this.list.forEach((item) => {
|
||||
item.value = this.propsTotal[item.key]
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
@@ -29,7 +29,7 @@ export default {
|
||||
|
||||
],
|
||||
revenueChart: null,
|
||||
lineChartData: {
|
||||
RevenueChartData: {
|
||||
ydata: [],
|
||||
xdata: []
|
||||
},
|
||||
@@ -38,29 +38,37 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
propsInfo: {
|
||||
handler(n) {
|
||||
this.$nextTick(() => {
|
||||
this.drawLineChart()
|
||||
})
|
||||
}
|
||||
// immediate: true
|
||||
handler(newVal, oldVal) {
|
||||
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
|
||||
this.$nextTick(() => {
|
||||
this.drawLineChart()
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true // 确保深度比较
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
onBeforeUnmount() {
|
||||
this.revenueChart = null
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
if (this.revenueChart) {
|
||||
this.revenueChart.dispose()
|
||||
this.revenueChart = null
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.revenueChart.resize()
|
||||
if (this.revenueChart) {
|
||||
|
||||
this.revenueChart.resize()
|
||||
}
|
||||
},
|
||||
processData(data, keys) {
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
})
|
||||
const dates = data.map((item) => item.date)
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values=[]
|
||||
keys.forEach((item,index)=>{
|
||||
|
||||
@@ -77,9 +85,9 @@ export default {
|
||||
const keyList=this.curList.map((item)=>item.key)
|
||||
const result = this.processData(this.propsInfo, keyList)
|
||||
|
||||
this.lineChartData.xdata = result.dates
|
||||
this.RevenueChartData.xdata = result.dates
|
||||
arr.forEach((item, index) => {
|
||||
this.lineChartData.ydata[index] = {
|
||||
this.RevenueChartData.ydata[index] = {
|
||||
name: item.name,
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
@@ -115,7 +123,11 @@ export default {
|
||||
|
||||
drawLineChart(activeKey) {
|
||||
this.getRevenueData(activeKey)
|
||||
if (this.revenueChart) {
|
||||
this.revenueChart.dispose()
|
||||
}
|
||||
const chartDom = document.getElementById('revenue-chart')
|
||||
if (!chartDom) return
|
||||
let revenueChart = this.$echarts.init(chartDom)
|
||||
this.revenueChart = revenueChart
|
||||
const option = {
|
||||
@@ -139,7 +151,7 @@ export default {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.lineChartData.xdata,
|
||||
data: this.RevenueChartData.xdata,
|
||||
axisLine: {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
@@ -156,9 +168,14 @@ export default {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: this.lineChartData.ydata
|
||||
series: this.RevenueChartData.ydata
|
||||
}
|
||||
option && revenueChart.setOption(option)
|
||||
this.setupResizeListener()
|
||||
|
||||
},
|
||||
setupResizeListener() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -81,15 +81,13 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
propsTotal: {
|
||||
handler(n) {
|
||||
if (n) {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal !== oldVal) {
|
||||
this.list.forEach((item) => {
|
||||
item.value = this.propsTotal[item.key]
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
@@ -20,64 +20,69 @@ export default {
|
||||
name: '日设备利用率',
|
||||
key: 'key1',
|
||||
lineColor: '#F69B52',
|
||||
|
||||
value:0,
|
||||
d:'kW·h'
|
||||
},
|
||||
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
utilizationChart: null,
|
||||
lineChartData: {
|
||||
utilizationChartData: {
|
||||
ydata: [],
|
||||
xdata: []
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
propsInfo: {
|
||||
handler(n) {
|
||||
this.$nextTick(() => {
|
||||
this.drawLineChart()
|
||||
})
|
||||
}
|
||||
// immediate: true
|
||||
handler(newVal, oldVal) {
|
||||
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
|
||||
this.$nextTick(() => {
|
||||
this.drawLineChart()
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true // 确保深度比较
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
onBeforeUnmount() {
|
||||
this.utilizationChart = null
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
if (this.utilizationChart) {
|
||||
this.utilizationChart.dispose()
|
||||
this.utilizationChart = null
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.utilizationChart.resize()
|
||||
if (this.utilizationChart) {
|
||||
this.utilizationChart.resize()
|
||||
}
|
||||
},
|
||||
processData(data, keys) {
|
||||
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 dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
})
|
||||
|
||||
|
||||
return {
|
||||
dates,
|
||||
values,
|
||||
values
|
||||
}
|
||||
},
|
||||
getUtilizationData() {
|
||||
const arr=this.curList
|
||||
const keyList=this.curList.map((item)=>item.key)
|
||||
const arr = this.curList
|
||||
const keyList = this.curList.map((item) => item.key)
|
||||
const result = this.processData(this.propsInfo, keyList)
|
||||
|
||||
this.lineChartData.xdata = result.dates
|
||||
this.utilizationChartData.xdata = result.dates
|
||||
arr.forEach((item, index) => {
|
||||
this.lineChartData.ydata[index] = {
|
||||
this.utilizationChartData.ydata[index] = {
|
||||
name: item.name,
|
||||
smooth: false,
|
||||
type: 'line',
|
||||
@@ -89,18 +94,21 @@ export default {
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
|
||||
|
||||
global: false,
|
||||
showSymbol: false,
|
||||
data:result.values[index]
|
||||
|
||||
data: result.values[index]
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
drawLineChart(activeKey) {
|
||||
this.getUtilizationData(activeKey)
|
||||
if (this.utilizationChart) {
|
||||
this.utilizationChart.dispose()
|
||||
}
|
||||
const chartDom = document.getElementById('utilization-chart')
|
||||
if (!chartDom) return
|
||||
let utilizationChart = this.$echarts.init(chartDom)
|
||||
this.utilizationChart = utilizationChart
|
||||
const option = {
|
||||
@@ -124,7 +132,7 @@ export default {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.lineChartData.xdata,
|
||||
data: this.utilizationChartData.xdata,
|
||||
axisLine: {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
@@ -141,9 +149,13 @@ export default {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: this.lineChartData.ydata
|
||||
series: this.utilizationChartData.ydata
|
||||
}
|
||||
option && utilizationChart.setOption(option)
|
||||
this.setupResizeListener()
|
||||
},
|
||||
setupResizeListener() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
}
|
||||
}
|
||||
@@ -152,10 +164,10 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.utilization {
|
||||
height:calc(100% - 45px);
|
||||
height: calc(100% - 45px);
|
||||
|
||||
#utilization-chart {
|
||||
height:100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -170,12 +182,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;
|
||||
@@ -187,7 +199,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;
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@ export default {
|
||||
},
|
||||
{
|
||||
name: '利用率',
|
||||
key: 'key2',
|
||||
key: 'usage_rate',
|
||||
percentKey: 'connector_off_percent',
|
||||
lineColor:
|
||||
'linear-gradient(90deg, rgba(53, 120, 124, 1) 0%, rgba(102, 225, 223, 1) 100%);',
|
||||
@@ -50,17 +50,16 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
total:{
|
||||
handler(n){
|
||||
if(n){
|
||||
handler(newVal,oldVal) {
|
||||
if (newVal!==oldVal) {
|
||||
let that=this
|
||||
that.curList.forEach((item)=>{
|
||||
item.value=that.total[item.key]
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
deep: true, // 深度监听
|
||||
immediate: true,
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
@@ -31,21 +31,21 @@ export default {
|
||||
curList: [
|
||||
{
|
||||
name: '日发电量',
|
||||
key: 'solarElectGen',
|
||||
key: 'solar_elect_gen',
|
||||
lineColor: '#22E4FF',
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
},
|
||||
{
|
||||
name: '日入网电量',
|
||||
key: 'solarElectGrid',
|
||||
key: 'solar_elect_grid',
|
||||
lineColor: '#0E68E4',
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
}
|
||||
],
|
||||
faultChart: null,
|
||||
lineChartData: {
|
||||
pvChart: null,
|
||||
pvChartData: {
|
||||
ydata: [],
|
||||
xdata: []
|
||||
},
|
||||
@@ -58,41 +58,46 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
total: {
|
||||
handler(n) {
|
||||
if (n) {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal !== oldVal) {
|
||||
let that = this
|
||||
that.curList.forEach((item) => {
|
||||
item.value = that.total[item.key]
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true, // 深度监听
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
deviceInfo: {
|
||||
handler(n) {
|
||||
this.$nextTick(() => {
|
||||
this.drawLineChart()
|
||||
})
|
||||
}
|
||||
// immediate: true
|
||||
handler(newVal, oldVal) {
|
||||
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
|
||||
this.$nextTick(() => {
|
||||
this.drawLineChart()
|
||||
})
|
||||
}
|
||||
},
|
||||
deep: true // 确保深度比较
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
onBeforeUnmount() {
|
||||
this.faultChart = null
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
if (this.pvChart) {
|
||||
this.pvChart.dispose()
|
||||
this.pvChart = null
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.faultChart.resize()
|
||||
if (this.pvChart) {
|
||||
this.pvChart.resize()
|
||||
}
|
||||
},
|
||||
processData(data, keys) {
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
return new Date(a.dt) - new Date(b.dt)
|
||||
})
|
||||
const dates = data.map((item) => item.date)
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
@@ -108,9 +113,9 @@ export default {
|
||||
const keyList = this.curList.map((item) => item.key)
|
||||
const result = this.processData(this.deviceInfo, keyList)
|
||||
|
||||
this.lineChartData.xdata = result.dates
|
||||
this.pvChartData.xdata = result.dates
|
||||
arr.forEach((item, index) => {
|
||||
this.lineChartData.ydata[index] = {
|
||||
this.pvChartData.ydata[index] = {
|
||||
name: item.name,
|
||||
smooth: true,
|
||||
type: 'bar',
|
||||
@@ -131,9 +136,13 @@ export default {
|
||||
|
||||
drawLineChart(activeKey) {
|
||||
this.getChargeData(activeKey)
|
||||
if (this.pvChart) {
|
||||
this.pvChart.dispose()
|
||||
}
|
||||
const chartDom = document.getElementById('pv-chart')
|
||||
let faultChart = this.$echarts.init(chartDom)
|
||||
this.faultChart = faultChart
|
||||
if (!chartDom) return
|
||||
let pvChart = this.$echarts.init(chartDom)
|
||||
this.pvChart = pvChart
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@@ -155,7 +164,7 @@ export default {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.lineChartData.xdata,
|
||||
data: this.pvChartData.xdata,
|
||||
axisLine: {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
@@ -169,12 +178,17 @@ export default {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 4,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: this.lineChartData.ydata
|
||||
series: this.pvChartData.ydata
|
||||
}
|
||||
option && faultChart.setOption(option)
|
||||
option && pvChart.setOption(option)
|
||||
this.setupResizeListener()
|
||||
},
|
||||
setupResizeListener() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,6 +26,10 @@
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
infoKey: {
|
||||
type: String,
|
||||
default:''
|
||||
},
|
||||
total: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
@@ -39,42 +43,42 @@ export default {
|
||||
return {
|
||||
curList: [
|
||||
{
|
||||
key: 'launchDate',
|
||||
key: 'runDays', //根据launch_date字段计算得出
|
||||
value: 20,
|
||||
d: '天',
|
||||
label: '系统运行天数',
|
||||
class: 'item-1'
|
||||
},
|
||||
{
|
||||
key: 'incomeTotal',
|
||||
key: 'income_total',
|
||||
value: 10,
|
||||
d: '万元',
|
||||
d: '元',
|
||||
label: '累计收益',
|
||||
class: 'item-2'
|
||||
},
|
||||
{
|
||||
key: 'solarDeviceNum',
|
||||
key: 'solar_device_num',
|
||||
value: 20,
|
||||
d: '',
|
||||
label: '光伏设备数量',
|
||||
class: 'item-3'
|
||||
},
|
||||
{
|
||||
key: '"stationNum',
|
||||
key: 'storage_device_num',
|
||||
value: 20,
|
||||
d: '',
|
||||
label: '储能预制舱数量',
|
||||
class: 'item-4'
|
||||
},
|
||||
{
|
||||
key: 'solarElectGen',
|
||||
key: 'solar_elect_gen',
|
||||
value: 20,
|
||||
d: '',
|
||||
label: '光伏设备累计发电量',
|
||||
class: 'item-5'
|
||||
},
|
||||
{
|
||||
key: 'capacityTotal',
|
||||
key: 'capacity_total',
|
||||
value: 20,
|
||||
d: '',
|
||||
label: '储能总容量',
|
||||
@@ -91,21 +95,23 @@ export default {
|
||||
return this.curList.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
total: {
|
||||
handler(n) {
|
||||
if (n) {
|
||||
let that = this
|
||||
that.curList.forEach((item) => {
|
||||
item.value = that.total[item.key]
|
||||
})
|
||||
handler(newVal,oldVal) {
|
||||
if (newVal&&newVal!==oldVal) {
|
||||
this.curList.forEach((item) => {
|
||||
item.value = newVal[item.key] || 0;
|
||||
});
|
||||
}
|
||||
},
|
||||
deep: true, // 深度监听
|
||||
immediate: true
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
mounted() {
|
||||
console.log(this.total,'total')
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -341,9 +341,9 @@ export default {
|
||||
processData(keysList, dataKey, data) {
|
||||
const keys = keysList.map((item) => item.key)
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
return new Date(a.dt) - new Date(b.dt)
|
||||
})
|
||||
const dates = data.map((item) => item.date)
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
|
||||
keys.forEach((item, index) => {
|
||||
|
||||
@@ -1,16 +1,26 @@
|
||||
import request from "@/request/index.js";
|
||||
export function postReq(data, url) {
|
||||
import request from '@/request/index.js'
|
||||
import qs from 'qs'
|
||||
export function postReq(url, data) {
|
||||
return request({
|
||||
method: "post",
|
||||
method: 'post',
|
||||
url,
|
||||
data,
|
||||
});
|
||||
data: {
|
||||
...data,
|
||||
token: localStorage.getItem('token')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function getReq(data, url) {
|
||||
// const query = qs.stringify(data, { indices: false })
|
||||
export function getReq(url, data) {
|
||||
const query = qs.stringify(
|
||||
{
|
||||
...data,
|
||||
token: localStorage.getItem('token')
|
||||
},
|
||||
{ indices: false }
|
||||
)
|
||||
return request({
|
||||
method: "get",
|
||||
url: url + "?" + data,
|
||||
});
|
||||
method: 'get',
|
||||
url: url + '?' + query
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import axios from "axios";
|
||||
import axios from 'axios'
|
||||
// import openNotification from "../utils/notification";
|
||||
// let { config } = window;
|
||||
// let { baseUrl } = config;
|
||||
|
||||
const service = axios.create({
|
||||
// baseURL: baseUrl,
|
||||
baseURL: "",
|
||||
timeout: 120000,
|
||||
});
|
||||
baseURL: '',
|
||||
timeout: 120000
|
||||
})
|
||||
|
||||
service.interceptors.request.use((config) => {
|
||||
const webConfig = config;
|
||||
const webConfig = config
|
||||
// if (!["/user/login", "/config/getConfig"].includes(config.url)) {
|
||||
// if (localStorage.getItem("token")) {
|
||||
// webConfig.headers = {
|
||||
@@ -19,24 +19,24 @@ service.interceptors.request.use((config) => {
|
||||
// }
|
||||
// }
|
||||
|
||||
return webConfig;
|
||||
});
|
||||
return webConfig
|
||||
})
|
||||
service.interceptors.response.use(
|
||||
(response) => {
|
||||
// 排除以下接口的错误提示
|
||||
const { url } = response.config;
|
||||
const urls = ["/light/", "/serve/delete", "/user/checkRandom"];
|
||||
const { url } = response.config
|
||||
const urls = ['/light/', '/serve/delete', '/user/checkRandom']
|
||||
const urlFlag = urls.map((item) => {
|
||||
return url.includes(item);
|
||||
});
|
||||
return url.includes(item)
|
||||
})
|
||||
|
||||
const res = response.data;
|
||||
const res = response.data
|
||||
|
||||
if (res.code !== 200) {
|
||||
if (res.code == 401 || res.tip == "校验token过期") {
|
||||
if (res.code == 401 || res.tip == '校验token过期') {
|
||||
setTimeout(() => {
|
||||
window.$wujie?.props.jump({ path: "/login" });
|
||||
}, 1000);
|
||||
window.$wujie?.props.jump({ path: '/login' })
|
||||
}, 1000)
|
||||
} else if (urlFlag.every((item) => item === false)) {
|
||||
// openNotification({
|
||||
// status: "error",
|
||||
@@ -44,18 +44,18 @@ service.interceptors.response.use(
|
||||
// });
|
||||
}
|
||||
}
|
||||
return res;
|
||||
return res
|
||||
},
|
||||
(error) => {
|
||||
// console.log(error, 'error 此处添加监控超时处理')
|
||||
if (
|
||||
error.name === "AxiosError" &&
|
||||
error.message === "timeout of 120000ms exceeded" &&
|
||||
error.code === "ECONNABORTED"
|
||||
error.name === 'AxiosError' &&
|
||||
error.message === 'timeout of 120000ms exceeded' &&
|
||||
error.code === 'ECONNABORTED'
|
||||
) {
|
||||
return error;
|
||||
return error
|
||||
}
|
||||
}
|
||||
);
|
||||
)
|
||||
|
||||
export default service;
|
||||
export default service
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user