修改电量显示单位，新增策略运行效益页面

2026-05-27 18:59:26 +08:00 · 2026-03-03 15:55:24 +08:00
parent 6e0a00f271
commit 29f86de821
10 changed files with 279 additions and 117 deletions
--- 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: '充电收益',
--- 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,
--- 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'
        }
      ],

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

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

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

--- 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,
--- a/web/src/views/statisticalAnalysis.vue
+++ b/web/src/views/statisticalAnalysis.vue
@@ -41,7 +41,7 @@
          </template>
        </searchBox>
      </div>
-      <div class="main_content">
+      <div v-if="activeKey !== 4" class="main_content" >
        <a-spin :spinning="loading.chart || loading.table">
          <energyEchart
            :key="`${activeKey}_${renderKey}`"
@@ -53,12 +53,23 @@
            :table-info="tableList[activeKey].tableInfo"
            :table-data="tableList[activeKey].tableData"
            @pagesizeChange="pagesizeChange"
-
          >
        </energyEchart>
        </a-spin>
      </div>

+      <div v-if="activeKey == 4" style="height:800px">
+
+      <ComTable   
+        :columns="columns"
+        :table-data="tableData"
+        :table-option="{ page: false, select: false }">
+        <template #action="record">
+          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
+        </template>
+      </ComTable>
+          
+      </div>
  </div>
 </template>

@@ -110,14 +121,13 @@ export default {
              ],
              yAxisOption: [
                {
-                  name: '电量(kW·h)',
+                  name: '电量(kWh)',
                  type: 'value',
                  nameTextStyle: { color: '#fff' },
                  splitLine: { lineStyle: { type: 'dashed', color: '#435463' } },
                  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,17 +657,36 @@ 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()

+        if (newVal !== 4) {
          // 并行加载新数据
          Promise.all([
            this.getStationList(),
@@ -633,11 +697,18 @@ export default {
              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,12 +794,15 @@ export default {

      try {
        const res = await getReq('/queryStatDayList', query)
+        let chartInfo = this.echartsInfo[this.activeKey]
+        if (chartInfo) {
          if (res.errcode === 0) {
-          this.echartsInfo[this.activeKey].chartData = res.data
+            chartInfo.chartData = res.data
            this.loading.chart = false
          } else {
            throw res
          }
+        }
      } catch (error) {
        this.loading.chart = false
        this.echartsInfo[this.activeKey].chartData = {}
@@ -749,15 +825,19 @@ export default {

      try {
        const res = await getReq('/queryStatDetailList', query)
+        let tableInfo = this.tableList[this.activeKey]
+        if (tableInfo) {
          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
+            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] : ''
+
+      if (this.activeKey !== 4) {
        this.tableList[this.activeKey].pageOption.page = 1
        this.getStationList(), this.getStatCharts(),this.getEchartsListForActiveKey(), this.getTableListForActiveKey()
+      } else {
+        this.getEGridPeriod()
+      }
    },
    changeStation() {
+      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) {
-          this.echartsInfo[this.activeKey].chartDatav = res.data
+            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.tableData = res.data
        } else {
          throw res
        }
      } catch (error) {
-        this.echartsInfo[this.activeKey].chartDatav = {}
+        this.tableData = []
      }
    }
  }
 }
 </script>

-<style scoped lang="scss">
+<style lang="scss" scoped>
@import url(@/style/color.scss);
 .statisicalAn {
  width: 100%;
@@ -880,4 +1001,45 @@ export default {
  height: calc(100% - 40px);
  // margin-top: 10px;
 }
+
+.content-table {
+    height: 700px;
+    margin-top: 40px;
+
+    :deep(.ant-table-header tr th) {
+      background: $table-border !important;
+      color: #fff;
+    }
+    :deep(.ant-table-body tr td, .ant-table-cell) {
+      background: $table-bg !important;
+      color: #fff;
+    }
+  }
+
+:deep(.ant-modal-body) {
+  :deep(.ant-table-wrapper .ant-table-row-expand-icon) {
+    color: $green !important;
+  }
+  //表格行悬浮样式
+  .no-hover-row:hover > td {
+    // background-color: transparent !important;
+    background-color: #f0f8ff !important;
+  }
+}
+:deep(.ant-table-cell) {
+  &::before {
+    width: 0 !important;
+  }
+}
+:deep(.ant-table-thead > tr > td) {
+  border-bottom: none !important;
+  border-top: none !important;
+}
+:deep(.ant-table-wrapper .ant-table-tbody > tr > td) {
+  border-top: none !important;
+}
+:deep(.ant-table-wrapper .ant-table-thead > tr > th) {
+  border-bottom: none !important;
+}
+
 </style>