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

2. 当日功率曲线高度调整

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>

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>
+      <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 = []) {
+    buildDatasetSource(labels = [], chargeData = [], dischargeData = []) {
-      const source = [['日期', '充电量', '放电量', '效率']]
+      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(dischargeData[index]?.value || 0)
-          Number(efficiencyData[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 = []) {
+    renderEmptyState(message = TEXT.empty) {
-      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 = '暂无数据') {
       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)
-      const source = this.buildDatasetSource(labels, chargeData, dischargeData, efficiencyData)
 
       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)}kWh`)
-              lines.push(`${item.marker}${item.seriesName}: ${this.formatNumber(value)}${unit}`)
             })
             return lines.join('<br/>')
           },
@@ -337,33 +315,19 @@ export default {
           right: 20,
           bottom: 60
         },
-        yAxis: [
+        yAxis: [{
-          {
           type: 'value',
-            name: '充电量/放电量kWh',
+          name: TEXT.yAxis,
-            axisLine: {
-              lineStyle: {
-                color: '#333333'
-              }
-              ,
-              onZero: false
-            }
-          },
-          {
-            type: 'value',
-            name: '效率%',
-            max: efficiencyAxisMax,
           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: '充电量',
+            name: TEXT.charge,
-            yAxisIndex: 0,
             type: 'bar',
             color: '#4472c4',
             barMaxWidth: 22
           },
           {
-            name: '放电量',
+            name: TEXT.discharge,
-            yAxisIndex: 0,
             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;
 }