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

yuan

3 天以前 976dddb150fc3c73520e234a6407f759287d2edd

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

 src/views/energyManagement/energyDataCollection/index.vue

@@ -1,26 +1,20 @@
<template>
  <div class="app-container">
    <el-card class="sync-card">
    <el-card class="sync-card" shadow="never">
      <el-row :gutter="16">
        <el-col :span="6">
        <el-col :span="8">
          <div class="sync-item">
            <div class="sync-label">电表数量</div>
            <div class="sync-value">{{ syncStatus.meterCount ?? 0 }}</div>
          </div>
        </el-col>
        <el-col :span="6">
        <el-col :span="8">
          <div class="sync-item">
            <div class="sync-label">采集器在线</div>
            <div class="sync-value online">{{ syncStatus.onlineCollectorCount ?? 0 }} / {{ syncStatus.collectorCount ?? 0 }}</div>
            <div class="sync-label">最近同步时间</div>
            <div class="sync-value sync-time">{{ lastHourSync }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="sync-item">
            <div class="sync-label">小时数据同步</div>
            <div class="sync-value small">{{ lastHourSync }}</div>
          </div>
        </el-col>
        <el-col :span="6">
        <el-col :span="8">
          <div class="sync-item">
            <div class="sync-label">电量记录数</div>
            <div class="sync-value">{{ syncStatus.recordCountByDimension?.hour ?? 0 }}</div>
@@ -35,7 +29,7 @@
          <template #header>
            <div class="card-header">
              <span>能耗数据采集</span>
              <span class="desc">同步小时电量 + 手动抄表（ignore_radio=1）</span>
              <span class="desc">展示同步小时电量，支持手动抄表补录</span>
            </div>
          </template>

@@ -369,11 +363,16 @@

<style scoped>
.sync-card { margin-bottom: 16px; }
.sync-item { text-align: center; padding: 8px 0; }
.sync-label { font-size: 12px; color: #909399; margin-bottom: 6px; }
.sync-value { font-size: 20px; font-weight: 600; }
.sync-value.online { color: #67c23a; }
.sync-value.small { font-size: 13px; font-weight: 500; }
.sync-item {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  height: 100%;
}
.sync-label { font-size: 13px; color: #909399; margin-bottom: 8px; }
.sync-value { font-size: 24px; font-weight: 600; color: #303133; }
.sync-value.sync-time { font-size: 14px; font-weight: 500; color: #606266; line-height: 1.4; word-break: break-all; }
.card-header { display: flex; align-items: center; gap: 12px; }
.card-header .desc { font-size: 13px; color: #909399; }
.search-form { margin-bottom: 16px; }