From 61ed4f355fd67a2664f7063dad1cbfdce7221275 Mon Sep 17 00:00:00 2001 From: ym1026 <1539963735@qq.com> Date: Thu, 4 Sep 2025 11:12:20 +0800 Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E6=80=BB=E8=A7=88=E5=9B=BE?= =?UTF-8?q?=E8=A1=A8=E5=8A=A0=E8=BD=BD=E9=94=80=E6=AF=81=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/package-lock.json | 8 +- web/package.json | 3 +- web/src/components/Home/Alarm.vue | 27 +- web/src/components/Home/Charge.vue | 69 ++- web/src/components/Home/Energy.vue | 88 +-- web/src/components/Home/Modal.vue | 148 +---- web/src/components/Home/Modal/DisCharge.vue | 89 +-- web/src/components/Home/Modal/EnvInfo.vue | 8 +- .../components/Home/Modal/OperationalInfo.vue | 7 +- web/src/components/Home/Modal/PrefabCabin.vue | 17 +- web/src/components/Home/Modal/Revenue.vue | 47 +- .../components/Home/Modal/StatisticalInfo.vue | 8 +- web/src/components/Home/Modal/Utilization.vue | 88 +-- web/src/components/Home/Operational.vue | 11 +- web/src/components/Home/Pv.vue | 68 ++- web/src/components/Home/onLine.vue | 38 +- .../statisticalAnalysis/energyEchart.vue | 4 +- web/src/request/api.js | 30 +- web/src/request/index.js | 44 +- web/src/views/sub/Home.vue | 552 +++++++++--------- web/vue.config.js | 28 +- 21 files changed, 683 insertions(+), 699 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index c3b985f..4d0c138 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -13,6 +13,7 @@ "core-js": "^3.8.3", "echarts": "^6.0.0", "moment": "^2.30.1", + "qs": "^6.12.3", "vue": "^3.2.13", "vue-router": "^4.0.3", "vuex": "^4.0.0" @@ -5236,7 +5237,6 @@ "version": "1.0.4", "resolved": "https://registry.npmmirror.com/call-bound/-/call-bound-1.0.4.tgz", "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==", - "dev": true, "license": "MIT", "dependencies": { "call-bind-apply-helpers": "^1.0.2", @@ -10779,7 +10779,6 @@ "version": "1.13.4", "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.4.tgz", "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.4" @@ -12124,7 +12123,6 @@ "version": "6.13.0", "resolved": "https://registry.npmmirror.com/qs/-/qs-6.13.0.tgz", "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", - "dev": true, "license": "BSD-3-Clause", "dependencies": { "side-channel": "^1.0.6" @@ -13125,7 +13123,6 @@ "version": "1.1.0", "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.1.0.tgz", "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==", - "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0", @@ -13145,7 +13142,6 @@ "version": "1.0.0", "resolved": "https://registry.npmmirror.com/side-channel-list/-/side-channel-list-1.0.0.tgz", "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", - "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0", @@ -13162,7 +13158,6 @@ "version": "1.0.1", "resolved": "https://registry.npmmirror.com/side-channel-map/-/side-channel-map-1.0.1.tgz", "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==", - "dev": true, "license": "MIT", "dependencies": { "call-bound": "^1.0.2", @@ -13181,7 +13176,6 @@ "version": "1.0.2", "resolved": "https://registry.npmmirror.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz", "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==", - "dev": true, "license": "MIT", "dependencies": { "call-bound": "^1.0.2", diff --git a/web/package.json b/web/package.json index 227bf61..f1a276e 100644 --- a/web/package.json +++ b/web/package.json @@ -16,7 +16,8 @@ "moment": "^2.30.1", "vue": "^3.2.13", "vue-router": "^4.0.3", - "vuex": "^4.0.0" + "vuex": "^4.0.0", + "qs": "^6.12.3" }, "devDependencies": { "@babel/core": "^7.12.16", diff --git a/web/src/components/Home/Alarm.vue b/web/src/components/Home/Alarm.vue index 110db43..95128e5 100644 --- a/web/src/components/Home/Alarm.vue +++ b/web/src/components/Home/Alarm.vue @@ -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' } }, diff --git a/web/src/components/Home/Charge.vue b/web/src/components/Home/Charge.vue index de75abe..f26eea2 100644 --- a/web/src/components/Home/Charge.vue +++ b/web/src/components/Home/Charge.vue @@ -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) } } diff --git a/web/src/components/Home/Energy.vue b/web/src/components/Home/Energy.vue index 1b082c0..75ec49c 100644 --- a/web/src/components/Home/Energy.vue +++ b/web/src/components/Home/Energy.vue @@ -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) } } diff --git a/web/src/components/Home/Modal.vue b/web/src/components/Home/Modal.vue index d041fed..2a0bcc7 100644 --- a/web/src/components/Home/Modal.vue +++ b/web/src/components/Home/Modal.vue @@ -9,7 +9,7 @@ - + @@ -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' - } - ] + }), diff --git a/web/src/components/Home/Modal/DisCharge.vue b/web/src/components/Home/Modal/DisCharge.vue index 6208832..2af9149 100644 --- a/web/src/components/Home/Modal/DisCharge.vue +++ b/web/src/components/Home/Modal/DisCharge.vue @@ -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 {