diff --git a/web/src/components/Home/Charge.vue b/web/src/components/Home/Charge.vue index a40f1e1..8975c67 100644 --- a/web/src/components/Home/Charge.vue +++ b/web/src/components/Home/Charge.vue @@ -40,7 +40,7 @@ export default { colorStart: ' rgba(10, 250, 106, 0.15)', colorEnd: ' rgba(171, 255, 249, 0.3)', value: 0, - d: 'kW·h' + d: 'kWh' }, { name: '充电次数', @@ -60,7 +60,7 @@ export default { colorStart: ' rgba(10, 250, 106, 0.15)', colorEnd: ' rgba(171, 255, 249, 0.3)', value: 0, - d: 'kW·h' + d: 'kWh' }, { name: '充电收益', diff --git a/web/src/components/Home/Energy.vue b/web/src/components/Home/Energy.vue index f650b15..cc9fa4b 100644 --- a/web/src/components/Home/Energy.vue +++ b/web/src/components/Home/Energy.vue @@ -37,14 +37,14 @@ export default { key: 'storage_elect_in', lineColor: '#22E4FF', value: 0, - d: 'kW·h' + d: 'kWh' }, { name: '放电电量', key: 'storage_elect_out', lineColor: '#0E68E4', value: 0, - d: 'kW·h' + d: 'kWh' } ], energyChart: null, @@ -164,7 +164,7 @@ export default { } }, yAxis: { - name: '电量(kW·h)', + name: '电量(kWh)', nameTextStyle: { color: '#fff' }, type: 'value', splitNumber: 2, diff --git a/web/src/components/Home/Modal/DisCharge.vue b/web/src/components/Home/Modal/DisCharge.vue index 0ea11bf..c7fc429 100644 --- a/web/src/components/Home/Modal/DisCharge.vue +++ b/web/src/components/Home/Modal/DisCharge.vue @@ -23,14 +23,14 @@ export default { key: 'storage_elect_in', lineColor: '#9BD801', value: 0, - d: 'kW·h' + d: 'kWh' }, { name: '放电电量', key: 'storage_elect_out', lineColor: '#3DFEFA', value: 0, - d: 'kW·h' + d: 'kWh' } ], diff --git a/web/src/components/Home/Modal/Revenue.vue b/web/src/components/Home/Modal/Revenue.vue index 3b66b91..f69f5f8 100644 --- a/web/src/components/Home/Modal/Revenue.vue +++ b/web/src/components/Home/Modal/Revenue.vue @@ -26,7 +26,7 @@ export default { colorStart: ' rgba(10, 250, 106, 0.15)', colorEnd: ' rgba(171, 255, 249, 0.3)', value:0, - d:'kW·h' + d:'kWh' }, ], diff --git a/web/src/components/Home/Modal/StationCurrent.vue b/web/src/components/Home/Modal/StationCurrent.vue index 61a5492..e29c569 100644 --- a/web/src/components/Home/Modal/StationCurrent.vue +++ b/web/src/components/Home/Modal/StationCurrent.vue @@ -23,14 +23,14 @@ export default { key: 'storage_elect_in', lineColor: '#9BD801', value: 0, - d: 'kW·h' + d: 'kWh' }, { name: '充电设备', key: 'storage_elect_out', lineColor: '#3DFEFA', value: 0, - d: 'kW·h' + d: 'kWh' } ], diff --git a/web/src/components/Home/Modal/StationPower.vue b/web/src/components/Home/Modal/StationPower.vue index 6ca2d8a..fa16a68 100644 --- a/web/src/components/Home/Modal/StationPower.vue +++ b/web/src/components/Home/Modal/StationPower.vue @@ -23,29 +23,29 @@ export default { key: 'storage_elect_in', lineColor: '#9BD801', value: 0, - d: 'kW·h' + d: 'kWh' }, { name: '充电设备', key: 'storage_elect_out', lineColor: '#3DFEFA', value: 0, - d: 'kW·h' + d: 'kWh' }, - { - name: '光伏设备', - key: 'storage_elect_out', - lineColor: '#3DFEFA', - value: 0, - d: 'kW·h' - }, - { - name: '电网侧', - key: 'storage_elect_out', - lineColor: '#3DFEFA', - value: 0, - d: 'kW·h' - } + // { + // name: '光伏设备', + // key: 'storage_elect_out', + // lineColor: '#3DFEFA', + // value: 0, + // d: 'kWh' + // }, + // { + // name: '电网侧', + // key: 'storage_elect_out', + // lineColor: '#3DFEFA', + // value: 0, + // d: 'kWh' + // } ], myChart: null, diff --git a/web/src/components/Home/Modal/StationVoltage.vue b/web/src/components/Home/Modal/StationVoltage.vue index 953fc3a..ce4ed09 100644 --- a/web/src/components/Home/Modal/StationVoltage.vue +++ b/web/src/components/Home/Modal/StationVoltage.vue @@ -23,14 +23,14 @@ export default { key: 'storage_elect_in', lineColor: '#9BD801', value: 0, - d: 'kW·h' + d: 'kWh' }, { name: '充电设备', key: 'storage_elect_out', lineColor: '#3DFEFA', value: 0, - d: 'kW·h' + d: 'kWh' } ], diff --git a/web/src/components/Home/Modal/Utilization.vue b/web/src/components/Home/Modal/Utilization.vue index 22e30ca..251cd0d 100644 --- a/web/src/components/Home/Modal/Utilization.vue +++ b/web/src/components/Home/Modal/Utilization.vue @@ -23,7 +23,7 @@ export default { key: 'usage_rate', lineColor: '#F69B52', value: 0, - d: 'kW·h' + d: 'kWh' } ], diff --git a/web/src/components/Home/Pv.vue b/web/src/components/Home/Pv.vue index 8be8fc2..c13a657 100644 --- a/web/src/components/Home/Pv.vue +++ b/web/src/components/Home/Pv.vue @@ -35,14 +35,14 @@ export default { key: 'solar_elect_gen', lineColor: '#22E4FF', value: 0, - d: 'kW·h' + d: 'kWh' }, // { // name: '入网电量', // key: 'solar_elect_grid', // lineColor: '#0E68E4', // value: 0, - // d: 'kW·h' + // d: 'kWh' // } ], pvChart: null, @@ -161,7 +161,7 @@ export default { } }, yAxis: { - name: '电量(kW·h)', + name: '电量(kWh)', nameTextStyle: { color: '#fff' }, type: 'value', splitNumber: 2, diff --git a/web/src/views/statisticalAnalysis.vue b/web/src/views/statisticalAnalysis.vue index 66014c6..4a621a6 100644 --- a/web/src/views/statisticalAnalysis.vue +++ b/web/src/views/statisticalAnalysis.vue @@ -41,7 +41,7 @@ -
+
- + +
+ + + + + +
@@ -108,16 +119,15 @@ export default { { key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' }, { key: 'storage_elect_out', label: '日放电电量', lineColor: '#5AABF2' } ], - yAxisOption:[ + yAxisOption: [ { - name: '电量(kW·h)', + name: '电量(kWh)', type: 'value', nameTextStyle: { color: '#fff' }, splitLine: { lineStyle: { type: 'dashed', color: '#435463' } }, - axisLabel: { interval: 4, color: '#fff', fontSize:12 }, + axisLabel: { interval: 4, color: '#fff', fontSize: 12 }, } ] - }, { title: '运行状态分析', @@ -125,20 +135,11 @@ export default { dataKey: 'users', yAxisOption:[ { - name: '日故障次数(V)', + name: '日故障次数', type: 'value', - nameTextStyle: { - color: '#fff' - }, - splitLine: { - lineStyle: { type: 'dashed', color: '#435463' } - }, - axisLabel: { - interval: 4, - color: '#fff', - fontSize:12 - - }, + nameTextStyle: { color: '#fff' }, + splitLine: { lineStyle: { type: 'dashed', color: '#435463' } }, + axisLabel: { interval: 4, color: '#fff', fontSize:12 }, }, // { // name: '工作时长(h)', @@ -220,6 +221,24 @@ export default { title: '今日功率分析', type: 'line', dataKey: 'yearly', + yAxisOption:[ + { + name: '功率(kW)', + type: 'value', + nameTextStyle: { + color: '#fff' + }, + splitLine: { + lineStyle: { type: 'dashed', color: '#435463' } + }, + axisLabel: { + interval: 4, + color: '#fff', + fontSize:12 + + }, + }, + ], infoKeys: [ { key: 'P', @@ -240,16 +259,34 @@ export default { title: '充电分析', type: 'bar', dataKey: 'sales', - infoKeys: [{ key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' }] + infoKeys: [{ key: 'charge_elect', label: '日充电电量', lineColor: '#2A82E4' }], + yAxisOption:[ + { + name: '电量(kWh)', + type: 'value', + nameTextStyle: { color: '#fff' }, + splitLine: { lineStyle: { type: 'dashed', color: '#435463' } }, + axisLabel: { interval: 4, color: '#fff', fontSize:12 }, + } + ] }, { title: '运行状态分析', type: 'bar', dataKey: 'users', infoKeys: [ - { key: 'storage_num_err', label: '日充电次数', lineColor: '#0CDAF5' }, - { key: 'key3', label: '日故障次数', lineColor: '#5AABF2' }, + { key: 'charge_num', label: '日充电次数', lineColor: '#0CDAF5' }, + { key: 'charge_num_err', label: '日故障次数', lineColor: '#5AABF2' }, // { key: 'key3', label: '日充电时长', lineColor: '#5AABF2' } + ], + yAxisOption:[ + { + name: '次数', + type: 'value', + nameTextStyle: { color: '#fff' }, + splitLine: { lineStyle: { type: 'dashed', color: '#435463' } }, + axisLabel: { interval: 4, color: '#fff', fontSize:12 }, + } ] }, { @@ -311,12 +348,15 @@ export default { type: 'line', dataKey: 'yearly', infoKeys: [ + { key: 'P', label: '功率', lineColor: '#00FFFB', colorStart: ' rgba(10, 250, 106, 0.15)', colorEnd: ' rgba(171, 255, 249, 0.3)' } + ], + yAxisOption:[ { - key: 'P', - label: '功率', - lineColor: '#00FFFB', - colorStart: ' rgba(10, 250, 106, 0.15)', - colorEnd: ' rgba(171, 255, 249, 0.3)' + name: '功率(kW)', + type: 'value', + nameTextStyle: { color: '#fff' }, + splitLine: { lineStyle: { type: 'dashed', color: '#435463' } }, + axisLabel: { interval: 4, color: '#fff', fontSize:12 }, } ] } @@ -329,14 +369,23 @@ export default { title: '发电电量分析', type: 'bar', dataKey: 'sales', - infoKeys: [{ key: 'storage_elect_in', label: '日发电电量', lineColor: '#2A82E4' }] + infoKeys: [{ key: 'solar_elect_gen', label: '日发电电量', lineColor: '#2A82E4' }], + yAxisOption:[ + { + name: '电量(kWh)', + type: 'value', + nameTextStyle: { color: '#fff' }, + splitLine: { lineStyle: { type: 'dashed', color: '#435463' } }, + axisLabel: { interval: 4, color: '#fff', fontSize:12 }, + } + ] }, { title: '运行状态分析', type: 'bar', dataKey: 'users', infoKeys: [ - { key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' }, + { key: 'solar_num_err', label: '日故障次数', lineColor: '#0CDAF5' }, // { key: 'key3', label: '日发电时长', lineColor: '#5AABF2' } ] }, @@ -348,33 +397,16 @@ export default { { name: '电压(V)', type: 'value', - nameTextStyle: { - color: '#fff' - }, - splitLine: { - lineStyle: { type: 'dashed', color: '#435463' } - }, - axisLabel: { - interval: 4, - color: '#fff', - fontSize:12 - - }, + nameTextStyle: { color: '#fff' }, + splitLine: { lineStyle: { type: 'dashed', color: '#435463' } }, + axisLabel: { interval: 4, color: '#fff', fontSize:12 }, }, { name: '电流(A)', type: 'value', - splitLine: { - lineStyle: { type: 'dashed', color: '#435463' } - }, - nameTextStyle: { - color: '#fff' - }, - axisLabel: { - interval: 4, - color: '#fff', - fontSize:12 - }, + splitLine: {lineStyle: { type: 'dashed', color: '#435463' } }, + nameTextStyle: { color: '#fff' }, + axisLabel: { interval: 4, color: '#fff', fontSize:12 }, }, ], infoKeys: [ @@ -406,6 +438,15 @@ export default { colorStart: ' rgba(10, 250, 106, 0.15)', colorEnd: ' rgba(171, 255, 249, 0.3)' } + ], + yAxisOption:[ + { + name: '功率(kW)', + type: 'value', + nameTextStyle: { color: '#fff' }, + splitLine: { lineStyle: { type: 'dashed', color: '#435463' } }, + axisLabel: { interval: 4, color: '#fff', fontSize:12 }, + } ] } ], @@ -427,6 +468,10 @@ export default { { key: 3, name: '光伏设备' + }, + { + key: 4, + name: '策略运行效益' } ], tableList: { @@ -612,32 +657,58 @@ export default { count: 1 } } - } + }, + columns: [ + { title: '日期', dataIndex: 'dt', key: 'dt' }, + { title: '时段', dataIndex: 'period', key: 'period', ellipsis: true}, // fixed: 'left', // filterable: true + { title: '储能充电电量(kWh)', dataIndex: 'E_in', key: 'E_in' }, + { title: '储能放电电量(kWh)', dataIndex: 'E_out', key: 'E_out' }, + { title: '电网价格(元/kWh)', dataIndex: 'grid_price', key: 'gridPrice' }, + { title: '充电价格(元/kWh)', dataIndex: 'charge_price', key: 'chargePrice' }, + { title: '收益(元)', dataIndex: 'income', key: 'income' }, + { title: '操作', dataIndex: 'operate', key: 'operate', scopedSlots: { customRender: 'action' } } + ], + + tableData: [ + // {period: "谷", E_in: 30, E_out: 25, gridPrice: "0.32", chargePrice: "0.32", income: 0.00}, + // {period: "平", gridPrice: "0.8", chargePrice: "0.6", income: "0.2", elect: "35", incomeTotal: "100"}, + // {period: "峰", gridPrice: "0.8", chargePrice: "0.6", income: "0.2", elect: "35", incomeTotal: "100"}, + // {period: "尖", gridPrice: "0.8", chargePrice: "0.6", income: "0.2", elect: "35", incomeTotal: "100"}, + // {period: "总计", gridPrice: "0.8", chargePrice: "0.6", income: "0.2", elect: "35", incomeTotal: "100"} + + ] } }, watch: { activeKey: { handler(newVal) { if (!newVal) return - // 清除之前的数据 this.resetDataForInactiveKey() - // 并行加载新数据 - Promise.all([ - this.getStationList(), - this.getEchartsListForActiveKey(), - this.getTableListForActiveKey() - ]).then(() => { - this.$nextTick(() => { - this.getStatCharts() + if (newVal !== 4) { + // 并行加载新数据 + Promise.all([ + this.getStationList(), + this.getEchartsListForActiveKey(), + this.getTableListForActiveKey() + ]).then(() => { + this.$nextTick(() => { + this.getStatCharts() + }) }) - }) + } + else { + this.$nextTick(() => { + this.getEGridPeriod() + }) + } }, // immediate: true // 添加立即执行 } }, mounted() { + //this.operateList = this.$getBtns(['修改']) console.log('mounted') // 优先加载第一个页面(activeKey=1)所需的数据 // this.btnOptionList = this.$getBtns(['导出']) @@ -689,6 +760,8 @@ export default { this.renderKey += 1 }, resetDataForInactiveKey() { + if (this.activeKey == 4) return + // 重置非当前激活页面的数据 Object.keys(this.echartsInfo).forEach((key) => { if (key != this.activeKey) { @@ -721,11 +794,14 @@ export default { try { const res = await getReq('/queryStatDayList', query) - if (res.errcode === 0) { - this.echartsInfo[this.activeKey].chartData = res.data - this.loading.chart = false - } else { - throw res + let chartInfo = this.echartsInfo[this.activeKey] + if (chartInfo) { + if (res.errcode === 0) { + chartInfo.chartData = res.data + this.loading.chart = false + } else { + throw res + } } } catch (error) { this.loading.chart = false @@ -749,15 +825,19 @@ export default { try { const res = await getReq('/queryStatDetailList', query) - if (res.errcode === 0) { - this.tableList[this.activeKey].tableData = res.data.list || res.data - this.tableList[this.activeKey].pageOption.count = res.count || 0 - this.tableList[this.activeKey].pageOption.page = res.page || 0 - this.tableList[this.activeKey].pageOption.pageSize = res.page_size || 0 - this.loading.table = false - } else { - throw res + let tableInfo = this.tableList[this.activeKey] + if (tableInfo) { + if (res.errcode === 0) { + tableInfo.tableData = res.data.list || res.data + tableInfo.pageOption.count = res.count || 0 + tableInfo.pageOption.page = res.page || 0 + tableInfo.pageOption.pageSize = res.page_size || 0 + this.loading.table = false + } else { + throw res + } } + } catch (error) { this.tableList[this.activeKey].tableData = [] this.tableList[this.activeKey].pageOption.count = 0 @@ -811,16 +891,28 @@ export default { onSearch(data) { this.paramsDate.start_date = data.time ? data.time[0] : '' this.paramsDate.end_date = data.time ? data.time[1] : '' - this.tableList[this.activeKey].pageOption.page = 1 - this.getStationList(), this.getStatCharts(),this.getEchartsListForActiveKey(), this.getTableListForActiveKey() + + if (this.activeKey !== 4) { + this.tableList[this.activeKey].pageOption.page = 1 + this.getStationList(), this.getStatCharts(),this.getEchartsListForActiveKey(), this.getTableListForActiveKey() + } else { + this.getEGridPeriod() + } }, changeStation() { - this.getStatCharts() - this.getEchartsListForActiveKey() - this.getTableListForActiveKey() + if (this.activeKey != 4) { + this.getStatCharts() + this.getEchartsListForActiveKey() + this.getTableListForActiveKey() + } else { + this.getEGridPeriod() + } + }, async getStatCharts() { + if (this.activeKey == 4) return + const query = { dt: this.paramsDate.end_date, station_id: this.stationId, @@ -828,20 +920,49 @@ export default { } try { const res = await getReq('/queryStatCharts', query) + let chartInfo = this.echartsInfo[this.activeKey] + if (chartInfo) { + if (res.errcode === 0) { + chartInfo.chartDatav = res.data + } else { + throw res + } + } + } catch (error) { + this.echartsInfo[this.activeKey].chartDatav = {} + } + }, + + async getEGridPeriod() { + const query = { + dt: this.paramsDate.end_date, + station_id: this.stationId, + } + + if (!query.dt) { + const today = new Date(); + const year = today.getFullYear(); + const month = String(today.getMonth() + 1).padStart(2, '0'); // 处理月份：先+1（因为getMonth返回0-11），再补零到2位 + const day = String(today.getDate()).padStart(2, '0'); // 处理日期：直接补零到2位 + query.dt = `${year}-${month}-${day}`; // 拼接成指定格式 + } + + try { + const res = await getReq('/queryEGridPeriod', query) if (res.errcode === 0) { - this.echartsInfo[this.activeKey].chartDatav = res.data + this.tableData = res.data } else { throw res } } catch (error) { - this.echartsInfo[this.activeKey].chartDatav = {} + this.tableData = [] } } } } -