1. 一周充放柱状图样式优化

2. 当日功率曲线高度调整
2026-04-14 18:28:41 +08:00
parent 20df411925
commit b73999bd23
2 changed files with 50 additions and 106 deletions
--- a/src/views/ems/dzjk/home/ActiveChart.vue
+++ b/src/views/ems/dzjk/home/ActiveChart.vue
@ -4,7 +4,9 @@
      <span class="card-title">当日功率曲线</span>
      <date-range-select ref="dateRangeSelect" :showIcon="true" :mini-time-picker="true" @updateDate="updateDate"/>
    </div>
-    <div style="height: 310px" id="activeChart"></div>
+    <div class="card-main">
+      <div id="activeChart" class="active-chart-canvas"></div>
+    </div>
  </el-card>
 </template>

@ -153,3 +155,13 @@ export default {
 }

 </script>
+
+<style scoped lang="scss">
+.card-main {
+  padding: 0 16px 12px;
+}
+
+.active-chart-canvas {
+  height: 310px;
+}
+</style>
--- a/src/views/ems/dzjk/home/WeekChart.vue
+++ b/src/views/ems/dzjk/home/WeekChart.vue
@ -1,15 +1,10 @@
 <template>
  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
    <div slot="header" class="time-range-header">
-      <span class="card-title">一周充放柱状图</span>
-      <date-range-select ref="dateRangeSelect" :showIcon="true" :mini-time-picker="true" @updateDate="updateDate"/>
+      <span class="card-title">{{ cardTitle }}</span>
+      <date-range-select ref="dateRangeSelect" :showIcon="true" :mini-time-picker="true" @updateDate="updateDate" />
    </div>
    <div class="card-main">
-      <div class="total-data">
-        <div>总充电量:<span class="point">{{ formatMetricValue(summary.totalChargedCap) }}kWh</span></div>
-        <div>总放电量:<span class="point">{{ formatMetricValue(summary.totalDisChargedCap) }}kWh</span></div>
-        <div>综合效率:<span class="point">{{ formatPercentValue(summary.efficiency) }}%</span></div>
-      </div>
      <div ref="weekChartRef" class="week-chart-canvas"></div>
    </div>
  </el-card>
@ -22,6 +17,16 @@ import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
 import { getPointConfigCurve } from '@/api/ems/site'

 const DAY = 24 * 60 * 60 * 1000
+const TEXT = {
+  cardTitle: '\u4e00\u5468\u5145\u653e\u67f1\u72b6\u56fe',
+  sectionName: '\u4e00\u5468\u5145\u653e\u66f2\u7ebf',
+  empty: '\u6682\u65e0\u6570\u636e',
+  date: '\u65e5\u671f',
+  charge: '\u5145\u7535\u91cf',
+  discharge: '\u653e\u7535\u91cf',
+  yAxis: '\u5145\u7535\u91cf/\u653e\u7535\u91cf\uff08kWh\uff09',
+  xAxis: '\u5355\u4f4d\uff1a\u65e5'
+}

 function createEmptySummary() {
  return {
@ -45,7 +50,8 @@ export default {
      chart: null,
      timeRange: [],
      siteId: '',
-      summary: createEmptySummary()
+      summary: createEmptySummary(),
+      cardTitle: TEXT.cardTitle
    }
  },
  watch: {
@ -76,7 +82,7 @@ export default {
      const { siteId, timeRange } = this
      const displayData = this.displayData || []
      const sectionRows = displayData.filter(item =>
-        item && item.sectionName === '一周充放曲线' && item.useFixedDisplay !== 1 && item.dataPoint
+        item && item.sectionName === TEXT.sectionName && item.useFixedDisplay !== 1 && item.dataPoint
      )
      const tasks = sectionRows.map(row => {
        const pointId = String(row.dataPoint || '').trim()
@ -128,16 +134,6 @@ export default {
      date.setHours(0, 0, 0, 0)
      return date.getTime()
    },
-    formatMetricValue(value) {
-      const num = Number(value)
-      if (value === '' || value == null || Number.isNaN(num)) return '--'
-      return this.formatNumber(num)
-    },
-    formatPercentValue(value) {
-      const num = Number(value)
-      if (value === '' || value == null || Number.isNaN(num)) return '--'
-      return this.formatNumber(num)
-    },
    formatNumber(value) {
      const num = Number(value)
      if (Number.isNaN(num)) return '--'
@ -159,24 +155,23 @@ export default {
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
-    buildDatasetSource(labels = [], chargeData = [], dischargeData = [], efficiencyData = []) {
-      const source = [['日期', '充电量', '放电量', '效率']]
+    buildDatasetSource(labels = [], chargeData = [], dischargeData = []) {
+      const source = [[TEXT.date, TEXT.charge, TEXT.discharge]]
      labels.forEach((label, index) => {
        source.push([
          label,
          Number(chargeData[index]?.value || 0),
-          Number(dischargeData[index]?.value || 0),
-          Number(efficiencyData[index]?.value || 0)
+          Number(dischargeData[index]?.value || 0)
        ])
      })
      return source
    },
    resolveSeriesType(item = {}) {
      const text = `${item?.name || ''} ${item?.fieldCode || ''}`.toLowerCase()
-      if (text.includes('放') || text.includes('discharge') || text.includes('discharged')) {
+      if (text.includes('\u653e') || text.includes('discharge') || text.includes('discharged')) {
        return 'discharge'
      }
-      if (text.includes('充') || text.includes('charge') || text.includes('charged')) {
+      if (text.includes('\u5145') || text.includes('charge') || text.includes('charged')) {
        return 'charge'
      }
      return ''
@ -190,7 +185,6 @@ export default {
          labels: [],
          chargeData: [],
          dischargeData: [],
-          efficiencyData: [],
          summary: createEmptySummary()
        }
      }
@ -224,14 +218,10 @@ export default {
      const labels = []
      const chargeData = []
      const dischargeData = []
-      const efficiencyData = []

      bucketStarts.forEach(bucketStart => {
        const chargedCap = Number(chargeMap[bucketStart] || 0)
        const disChargedCap = Number(dischargeMap[bucketStart] || 0)
-        const dailyEfficiency = chargedCap > 0
-          ? Number(((disChargedCap / chargedCap) * 100).toFixed(2))
-          : 0

        labels.push(this.formatDateLabel(bucketStart))
        chargeData.push({
@ -242,10 +232,6 @@ export default {
          value: disChargedCap,
          bucketStart
        })
-        efficiencyData.push({
-          value: dailyEfficiency,
-          bucketStart
-        })
      })

      const totalChargedCap = chargeData.reduce((sum, item) => sum + Number(item.value || 0), 0)
@ -258,7 +244,6 @@ export default {
        labels,
        chargeData,
        dischargeData,
-        efficiencyData,
        summary: {
          totalChargedCap,
          totalDisChargedCap,
@ -266,12 +251,7 @@ export default {
        }
      }
    },
-    resolveEfficiencyAxisMax(efficiencyData = []) {
-      const maxValue = efficiencyData.reduce((max, item) => Math.max(max, Number(item?.value || 0)), 0)
-      if (maxValue <= 100) return 100
-      return Math.ceil(maxValue / 20) * 20
-    },
-    renderEmptyState(message = '暂无数据') {
+    renderEmptyState(message = TEXT.empty) {
      if (!this.chart) return
      this.chart.clear()
      this.chart.setOption({
@ -290,7 +270,7 @@ export default {
    setOption(seriesData = []) {
      if (!this.chart) return

-      const { labels, chargeData, dischargeData, efficiencyData, summary } = this.buildDailyChartData(seriesData)
+      const { labels, chargeData, dischargeData, summary } = this.buildDailyChartData(seriesData)
      const hasValue = chargeData.some(item => Number(item?.value || 0) > 0) || dischargeData.some(item => Number(item?.value || 0) > 0)

      if (!labels.length || !hasValue) {
@ -300,12 +280,11 @@ export default {
      }

      this.summary = summary
-      const efficiencyAxisMax = this.resolveEfficiencyAxisMax(efficiencyData)
-      const source = this.buildDatasetSource(labels, chargeData, dischargeData, efficiencyData)
+      const source = this.buildDatasetSource(labels, chargeData, dischargeData)

      this.chart.clear()
      this.chart.setOption({
-        color: ['#4472c4', '#70ad47', '#ffbd00'],
+        color: ['#4472c4', '#70ad47'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
@ -319,8 +298,7 @@ export default {
            params.forEach(item => {
              const rawValue = Array.isArray(item?.value) ? item.value[item.seriesIndex + 1] : item?.value
              const value = Number(rawValue || 0)
-              const unit = item.seriesType === 'line' ? '%' : 'kWh'
-              lines.push(`${item.marker}${item.seriesName}: ${this.formatNumber(value)}${unit}`)
+              lines.push(`${item.marker}${item.seriesName}: ${this.formatNumber(value)}kWh`)
            })
            return lines.join('<br/>')
          },
@ -337,33 +315,19 @@ export default {
          right: 20,
          bottom: 60
        },
-        yAxis: [
-          {
-            type: 'value',
-            name: '充电量/放电量kWh',
-            axisLine: {
-              lineStyle: {
-                color: '#333333'
-              }
-              ,
-              onZero: false
-            }
-          },
-          {
-            type: 'value',
-            name: '效率%',
-            max: efficiencyAxisMax,
-            axisLine: {
-              lineStyle: {
-                color: '#333333'
-              },
-              onZero: false
-            }
+        yAxis: [{
+          type: 'value',
+          name: TEXT.yAxis,
+          axisLine: {
+            lineStyle: {
+              color: '#333333'
+            },
+            onZero: false
          }
-        ],
+        }],
        xAxis: [{
          type: 'category',
-          name: '单位：日',
+          name: TEXT.xAxis,
          nameLocation: 'center',
          nameGap: 30,
          axisTick: {
@ -378,30 +342,16 @@ export default {
        },
        series: [
          {
-            name: '充电量',
-            yAxisIndex: 0,
+            name: TEXT.charge,
            type: 'bar',
            color: '#4472c4',
            barMaxWidth: 22
          },
          {
-            name: '放电量',
-            yAxisIndex: 0,
+            name: TEXT.discharge,
            type: 'bar',
            color: '#70ad47',
            barMaxWidth: 22
-          },
-          {
-            name: '效率',
-            yAxisIndex: 1,
-            type: 'line',
-            color: '#ffbd00',
-            smooth: true,
-            symbol: 'circle',
-            symbolSize: 7,
-            lineStyle: {
-              width: 2
-            }
          }
        ]
      })
@ -415,24 +365,6 @@ export default {
  padding: 0 16px 12px;
 }

-.total-data {
-  line-height: 18px;
-  color: #333333;
-  font-size: 16px;
-  padding: 20px 0;
-
-  > div {
-    display: inline-block;
-    margin-right: 20px;
-  }
-
-  .point {
-    color: #05AEA3;
-    font-weight: 500;
-    font-size: 18px;
-  }
-}
-
 .week-chart-canvas {
  height: 310px;
 }