jsyhsec/energy_storage
7
0
Fork 0
mirror of https://gitee.com/js-yhsec/energy_storage.git synced 2026-05-28 03:09:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

系统总览图表加载销毁优化

Browse Source
This commit is contained in:
ym1026
2025-09-04 11:12:20 +08:00
parent 369f7165cb
commit 61ed4f355f
21 changed files with 683 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/components/Home/Alarm.vue
View File

@@ -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'
}
},

69
web/src/components/Home/Charge.vue
View File

@@ -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)
}
}

88
web/src/components/Home/Energy.vue
View File

@@ -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)
}
}

148
web/src/components/Home/Modal.vue
View File

@@ -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'
}
]
}),

89
web/src/components/Home/Modal/DisCharge.vue
View File

@@ -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;
}

8
web/src/components/Home/Modal/EnvInfo.vue
View File

@@ -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() {},

7
web/src/components/Home/Modal/OperationalInfo.vue
View File

@@ -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() {},

17
web/src/components/Home/Modal/PrefabCabin.vue
View File

@@ -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() {},

47
web/src/components/Home/Modal/Revenue.vue
View File

@@ -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)
}
}

8
web/src/components/Home/Modal/StatisticalInfo.vue
View File

@@ -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() {},

88
web/src/components/Home/Modal/Utilization.vue
View File

@@ -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;
}

11
web/src/components/Home/Operational.vue
View File

@@ -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,
}
}
},

68
web/src/components/Home/Pv.vue
View File

@@ -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)
}
}

38
web/src/components/Home/onLine.vue
View File

@@ -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>