feat: 优化能耗数据展示界面，调整布局和样式

yuan

3 天以前 a1ec81c3b932a6758617c585a8397ced799936ff

feat: 优化能耗数据展示界面，调整布局和样式

 src/views/energyManagement/energyStatistics/index.vue

@@ -13,25 +13,25 @@
        <el-col :span="6">
          <div class="metric-box highlight">
            <div class="metric-label">总用电量</div>
            <div class="metric-value">{{ yesterdaySummary.totalConsumption ?? 0 }} <span>kWh</span></div>
            <div class="metric-value">{{ formatKwh(yesterdaySummary.totalConsumption) }} <span>kWh</span></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="metric-box">
            <div class="metric-label">平均用电量</div>
            <div class="metric-value">{{ yesterdaySummary.avgConsumption ?? 0 }} <span>kWh</span></div>
            <div class="metric-value">{{ formatKwh(yesterdaySummary.avgConsumption) }} <span>kWh</span></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="metric-box">
            <div class="metric-label">最大用电量</div>
            <div class="metric-value">{{ yesterdaySummary.maxConsumption ?? 0 }} <span>kWh</span></div>
            <div class="metric-value">{{ formatKwh(yesterdaySummary.maxConsumption) }} <span>kWh</span></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="metric-box">
            <div class="metric-label">最小用电量</div>
            <div class="metric-value">{{ yesterdaySummary.minConsumption ?? 0 }} <span>kWh</span></div>
            <div class="metric-value">{{ formatKwh(yesterdaySummary.minConsumption) }} <span>kWh</span></div>
          </div>
        </el-col>
      </el-row>
@@ -96,25 +96,25 @@
        <el-col :span="6">
          <div class="summary-card total">
            <div class="label">总用电量</div>
            <div class="value">{{ summary.totalConsumption ?? 0 }} <span>kWh</span></div>
            <div class="value">{{ formatKwh(summary.totalConsumption) }} <span>kWh</span></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="summary-card">
            <div class="label">平均用电量</div>
            <div class="value">{{ summary.avgConsumption ?? 0 }} <span>kWh</span></div>
            <div class="value">{{ formatKwh(summary.avgConsumption) }} <span>kWh</span></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="summary-card">
            <div class="label">最大用电量</div>
            <div class="value">{{ summary.maxConsumption ?? 0 }} <span>kWh</span></div>
            <div class="value">{{ formatKwh(summary.maxConsumption) }} <span>kWh</span></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="summary-card">
            <div class="label">最小用电量</div>
            <div class="value">{{ summary.minConsumption ?? 0 }} <span>kWh</span></div>
            <div class="value">{{ formatKwh(summary.minConsumption) }} <span>kWh</span></div>
          </div>
        </el-col>
      </el-row>
@@ -138,10 +138,21 @@
        <el-table-column prop="meterId" label="电表ID" width="100" />
        <el-table-column prop="address" label="表地址" min-width="120" show-overflow-tooltip />
        <el-table-column prop="collectorNo" label="采集器号" min-width="120" show-overflow-tooltip />
        <el-table-column prop="totalConsumption" label="总电量(kWh)" width="120" />
        <el-table-column prop="peakConsumption" label="峰(kWh)" width="100" />
        <el-table-column prop="flatConsumption" label="平(kWh)" width="100" />
        <el-table-column prop="valleyConsumption" label="谷(kWh)" width="100" />
        <el-table-column prop="totalConsumption" label="总电量(kWh)" width="120">
          <template #default="{ row }">{{ formatKwh(row.totalConsumption) }}</template>
        </el-table-column>
        <el-table-column prop="sharpConsumption" label="尖(kWh)" width="100">
          <template #default="{ row }">{{ formatKwh(row.sharpConsumption) }}</template>
        </el-table-column>
        <el-table-column prop="peakConsumption" label="峰(kWh)" width="100">
          <template #default="{ row }">{{ formatKwh(row.peakConsumption) }}</template>
        </el-table-column>
        <el-table-column prop="flatConsumption" label="平(kWh)" width="100">
          <template #default="{ row }">{{ formatKwh(row.flatConsumption) }}</template>
        </el-table-column>
        <el-table-column prop="valleyConsumption" label="谷(kWh)" width="100">
          <template #default="{ row }">{{ formatKwh(row.valleyConsumption) }}</template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" min-width="150" />
        <el-table-column prop="endTime" label="结束时间" min-width="150" />
      </el-table>
@@ -183,6 +194,14 @@
const yearRange = ref([]);

const yesterdayLabel = computed(() => getYesterdayDayPicker());

function formatKwh(value, digits = 2) {
  const n = Number(value);
  if (!Number.isFinite(n)) {
    return (0).toFixed(digits);
  }
  return n.toFixed(digits);
}

function initDefaultRange() {
  const yesterday = getYesterdayDayPicker();
@@ -255,7 +274,9 @@
  const labels = chartRecords.value.map((item) =>
    parseTimeKey(item.timeKey, queryForm.dimension)
  );
  const values = chartRecords.value.map((item) => item.totalConsumption || 0);
  const values = chartRecords.value.map((item) =>
    Number(formatKwh(item.totalConsumption))
  );
  chartInstance.setOption({
    tooltip: { trigger: "axis" },
    grid: { left: 50, right: 20, top: 30, bottom: 50 },