From 685a02ac0172e976a4c11ab1dcea7a1138a8c55e Mon Sep 17 00:00:00 2001
From: chenlin <linchenm@isoftstone.com>
Date: Wed, 3 Dec 2025 15:12:18 +0800
Subject: [PATCH] =?UTF-8?q?<template>=20=20=20<div=20class=3D"big-screen-c?=
 =?UTF-8?q?ontainer">=20=20=20=20=20<!--=20=E6=A0=87=E9=A2=98=E6=A0=8F=20-?=
 =?UTF-8?q?->=20=20=20=20=20<div=20class=3D"screen-header">=20=20=20=20=20?=
 =?UTF-8?q?=20=20<h1=20class=3D"screen-title">=E5=8A=A8=E7=8E=AF=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E5=A4=A7=E5=B1=8F</h1>=20=20=20=20=20=20=20<div=20cla?=
 =?UTF-8?q?ss=3D"screen-datetime">{{=20currentDateTime=20}}</div>=20=20=20?=
 =?UTF-8?q?=20=20</div>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

    <!-- 主要内容区域 -->
    <div class="screen-content">
      <!-- 第一行：统计卡片 -->
      <div class="stats-row">
        <!-- 总设备数卡片 -->
        <div class="stat-card">
          <div class="card-title">总设备数</div>
          <div class="card-value">{{ totalDevices.toLocaleString() }}</div>
          <div class="card-trend growth">
            <svg class="trend-icon" viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor">
              <path d="M868 545.5L536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"></path>
            </svg>
            <span>较上月增长 {{ totalDevicesGrowth }}%</span>
          </div>
        </div>

        <!-- 在线设备数卡片 -->
        <div class="stat-card">
          <div class="card-title">在线设备数</div>
          <div class="card-value">{{ onlineDevices.toLocaleString() }}</div>
          <div class="card-trend online-rate">
            <span>在线率 {{ onlineRate }}%</span>
          </div>
        </div>
      </div>

      <!-- 第二行：图表 -->
      <div class="charts-row">
        <!-- 告警趋势折线图 -->
        <div class="chart-card">
          <div class="chart-title">当月告警趋势</div>
          <div ref="alarmTrendChartRef" class="chart-container"></div>
        </div>

        <!-- 设备类型分布饼图 -->
        <div class="chart-card">
          <div class="chart-title">告警设备类型分布</div>
          <div ref="deviceTypePieChartRef" class="chart-container"></div>
        </div>
      </div>

      <!-- 第三行：园区信息列表 -->
      <div class="table-row">
        <div class="table-card">
          <div class="table-title">园区信息列表</div>
          <el-table
            :data="parkList"
            stripe
            style="width: 100%"
            class="park-table"
            height="calc(100% - 50px)"
            :header-cell-style="{
              background: 'rgba(78, 155, 248, 0.08)',
              color: '#ffffff',
              borderBottom: '1px solid rgba(78, 155, 248, 0.15)',
              fontWeight: '500',
              padding: '12px 8px'
            }"
            :row-style="{
              background: 'transparent',
              color: '#ffffff'
            }"
            :cell-style="{
              borderBottom: '1px solid rgba(78, 155, 248, 0.08)',
              color: '#ffffff',
              padding: '12px 8px'
            }"
          >
            <el-table-column prop="parkName" label="园区名称" width="180" align="left" />
            <el-table-column prop="totalDevices" label="设备总数" width="100" align="center">
              <template #default="{ row }">
                <span class="device-count">{{ row.totalDevices }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="upsStatus" label="UPS" width="120" align="center">
              <template #default="{ row }">
                <span :class="['status-text', row.upsStatus === '正常' ? 'status-normal' : 'status-alarm']">
                  {{ row.upsStatus }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="airConditionStatus" label="精密空调" width="120" align="center">
              <template #default="{ row }">
                <span :class="['status-text', row.airConditionStatus === '正常' ? 'status-normal' : 'status-alarm']">
                  {{ row.airConditionStatus }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="temperatureStatus" label="温湿度" width="120" align="center">
              <template #default="{ row }">
                <span :class="['status-text', row.temperatureStatus === '正常' || typeof row.temperatureStatus === 'number' ? 'status-normal' : 'status-alarm']">
                  {{ row.temperatureStatus }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="otherStatus" label="其他" width="120" align="center">
              <template #default="{ row }">
                <span :class="['status-text', row.otherStatus === '正常' ? 'status-normal' : 'status-alarm']">
                  {{ row.otherStatus }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="详情" width="150" align="center">
              <template #default="{ row }">
                <a
                  :class="['detail-link', row.hasAlarm ? 'detail-alarm' : 'detail-normal']"
                  @click="handleViewDetail(row)"
                >
                  <span v-if="row.hasAlarm" class="alarm-badge">异常</span>
                  <span v-else class="normal-badge">正常</span>
                  查看详情
                </a>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts';

// 定义园区信息类型
interface ParkInfo {
  key: string;
  parkName: string;
  totalDevices: number;
  upsStatus: string;
  airConditionStatus: string;
  temperatureStatus: string | number;
  otherStatus: string;
  hasAlarm: boolean;
}

// 当前日期时间
const currentDateTime = ref('');

// 统计数据
const totalDevices = ref(1286);
const totalDevicesGrowth = ref(5.2);
const onlineDevices = ref(1254);
const onlineRate = ref(97.5);

// 图表引用
const alarmTrendChartRef = ref<HTMLDivElement>();
const deviceTypePieChartRef = ref<HTMLDivElement>();

// 图表实例
let alarmTrendChart: echarts.ECharts | null = null;
let deviceTypePieChart: echarts.ECharts | null = null;

// 告警趋势数据
const alarmTrendData = ref({
  dates: ['5日', '10日', '15日', '20日', '25日', '30日'],
  values: [8, 4, 20, 16, 21, 9]
});

// 设备类型分布数据
const deviceTypeData = ref([
  { name: 'UPS', value: 35 },
  { name: '精密空调', value: 25 },
  { name: '温湿度检测', value: 20 },
  { name: '其他', value: 20 }
]);

// 园区信息列表数据
const parkList = ref<ParkInfo[]>([
  {
    key: '1',
    parkName: '雄安总部',
    totalDevices: 156,
    upsStatus: '3个告警',
    airConditionStatus: '正常',
    temperatureStatus: '正常',
    otherStatus: '正常',
    hasAlarm: true
  },
  {
    key: '2',
    parkName: '恒毅大厦',
    totalDevices: 98,
    upsStatus: '正常',
    airConditionStatus: '正常',
    temperatureStatus: '正常',
    otherStatus: '正常',
    hasAlarm: false
  },
  {
    key: '3',
    parkName: '丰台创新中心',
    totalDevices: 124,
    upsStatus: '正常',
    airConditionStatus: '正常',
    temperatureStatus: 2,
    otherStatus: '正常',
    hasAlarm: false
  },
  {
    key: '4',
    parkName: '重庆产业大厦',
    totalDevices: 92,
    upsStatus: '正常',
    airConditionStatus: '2个告警',
    temperatureStatus: '正常',
    otherStatus: '正常',
    hasAlarm: true
  },
  {
    key: '5',
    parkName: '海南园区',
    totalDevices: 78,
    upsStatus: '正常',
    airConditionStatus: '正常',
    temperatureStatus: '正常',
    otherStatus: '正常',
    hasAlarm: false
  },
  {
    key: '6',
    parkName: '雄安地面站',
    totalDevices: 64,
    upsStatus: '正常',
    airConditionStatus: '正常',
    temperatureStatus: '正常',
    otherStatus: '正常',
    hasAlarm: false
  },
  {
    key: '7',
    parkName: '铜川地面站',
    totalDevices: 58,
    upsStatus: '正常',
    airConditionStatus: '正常',
    temperatureStatus: '正常',
    otherStatus: '正常',
    hasAlarm: false
  },
  {
    key: '8',
    parkName: '佳木斯地面站',
    totalDevices: 72,
    upsStatus: '正常',
    airConditionStatus: '正常',
    temperatureStatus: '正常',
    otherStatus: '正常',
    hasAlarm: false
  },
  {
    key: '9',
    parkName: '库尔勒地面站',
    totalDevices: 68,
    upsStatus: '正常',
    airConditionStatus: '正常',
    temperatureStatus: 1,
    otherStatus: '正常',
    hasAlarm: false
  },
  {
    key: '10',
    parkName: '澄迈地面站',
    totalDevices: 56,
    upsStatus: '正常',
    airConditionStatus: '正常',
    temperatureStatus: '正常',
    otherStatus: '正常',
    hasAlarm: false
  },
  {
    key: '11',
    parkName: '文昌地面站',
    totalDevices: 60,
    upsStatus: '正常',
    airConditionStatus: '正常',
    temperatureStatus: '正常',
    otherStatus: '正常',
    hasAlarm: false
  }
]);

// 更新日期时间
const updateDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  currentDateTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 初始化告警趋势图表
const initAlarmTrendChart = () => {
  if (!alarmTrendChartRef.value) return;

  alarmTrendChart = echarts.init(alarmTrendChartRef.value);

  const option: EChartsOption = {
    grid: {
      top: '15%',
      left: '8%',
      right: '5%',
      bottom: '12%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: alarmTrendData.value.dates,
      axisLine: {
        lineStyle: {
          color: '#3a5165'
        }
      },
      axisLabel: {
        color: '#8b9bb3',
        fontSize: 12
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#1e3a52',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 25,
      interval: 5,
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#8b9bb3',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: '#1e3a52',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        data: alarmTrendData.value.values,
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#4e9bf8',
          width: 2
        },
        itemStyle: {
          color: '#4e9bf8',
          borderWidth: 2
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(78, 155, 248, 0.3)' },
              { offset: 1, color: 'rgba(78, 155, 248, 0.05)' }
            ]
          }
        },
        markPoint: {
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#ff5555',
            borderWidth: 2,
            borderColor: '#ff5555'
          },
          data: [
            { name: '峰值1', coord: [2, 20] }, // 15日的告警峰值
            { name: '峰值2', coord: [4, 21] }  // 25日的告警峰值
          ]
        }
      }
    ]
  };

  alarmTrendChart.setOption(option);
};

// 初始化设备类型分布饼图
const initDeviceTypePieChart = () => {
  if (!deviceTypePieChartRef.value) return;

  deviceTypePieChart = echarts.init(deviceTypePieChartRef.value);

  const total = deviceTypeData.value.reduce((sum, item) => sum + item.value, 0);

  const option: EChartsOption = {
    legend: {
      orient: 'vertical',
      right: '10%',
      top: 'center',
      textStyle: {
        color: '#ffffff',
        fontSize: 13
      },
      formatter: (name: string) => {
        const item = deviceTypeData.value.find(d => d.name === name);
        return `${name} (${item?.value || 0})`;
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['45%', '70%'],
        center: ['35%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'center',
          formatter: () => {
            return `{value|${total}}\n{label|告警}`;
          },
          rich: {
            value: {
              color: '#ffffff',
              fontSize: 28,
              fontWeight: 'bold',
              lineHeight: 40
            },
            label: {
              color: '#8b9bb3',
              fontSize: 14,
              lineHeight: 20
            }
          }
        },
        labelLine: {
          show: false
        },
        data: deviceTypeData.value.map((item, index) => {
          const colors = ['#4e9bf8', '#52c41a', '#fa8c16', '#8c8c8c'];
          return {
            name: item.name,
            value: item.value,
            itemStyle: {
              color: colors[index]
            }
          };
        })
      }
    ]
  };

  deviceTypePieChart.setOption(option);
};

// 查看详情
const handleViewDetail = (record: ParkInfo) => {
  console.log('查看园区详情:', record);
  // TODO: 实现详情页面跳转或弹窗
};

// 定时器
let dateTimeTimer: number | null = null;

// 组件挂载
onMounted(() => {
  // 更新日期时间
  updateDateTime();
  dateTimeTimer = window.setInterval(updateDateTime, 1000);

  // 初始化图表
  setTimeout(() => {
    initAlarmTrendChart();
    initDeviceTypePieChart();
  }, 100);

  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
});

// 组件卸载
onBeforeUnmount(() => {
  if (dateTimeTimer) {
    clearInterval(dateTimeTimer);
  }
  if (alarmTrendChart) {
    alarmTrendChart.dispose();
  }
  if (deviceTypePieChart) {
    deviceTypePieChart.dispose();
  }
  window.removeEventListener('resize', handleResize);
});

// 处理窗口大小变化
const handleResize = () => {
  alarmTrendChart?.resize();
  deviceTypePieChart?.resize();
};
</script>

<style scoped lang="scss">
.big-screen-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, #0a1929 0%, #0d1e2f 100%);
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
}

// 标题栏
.screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 10px;

  .screen-title {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    letter-spacing: 2px;
  }

  .screen-datetime {
    font-size: 18px;
    color: #8b9bb3;
    font-family: 'Courier New', monospace;
  }
}

// 主要内容区域
.screen-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

// 统计卡片行
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.stat-card {
  background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(78, 155, 248, 0.1);

  .card-title {
    font-size: 16px;
    color: #8b9bb3;
    margin-bottom: 15px;
  }

  .card-value {
    font-size: 48px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 12px;
    font-family: 'Arial', sans-serif;
  }

  .card-trend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;

    &.growth {
      color: #52c41a;

      .trend-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
      }
    }

    &.online-rate {
      color: #13c2c2;
    }
  }
}

// 图表行
.charts-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.chart-card {
  background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(78, 155, 248, 0.1);
  height: 350px;

  .chart-title {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 15px;
    font-weight: 500;
  }

  .chart-container {
    width: 100%;
    height: calc(100% - 40px);
  }
}

// 表格行
.table-row {
  width: 100%;
}

.table-card {
  background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(78, 155, 248, 0.1);
  height: 450px;

  .table-title {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 15px;
    font-weight: 500;
  }

  :deep(.park-table) {
    background: transparent !important;

    // 表格主体背景
    .el-table__inner-wrapper {
      background: transparent !important;

      &::before {
        display: none;
      }
    }

    .el-table__body-wrapper {
      background: transparent !important;

      // 滚动条样式
      scrollbar-width: thin;
      scrollbar-color: rgba(78, 155, 248, 0.3) transparent;

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(78, 155, 248, 0.3);
        border-radius: 3px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }
    }

    .el-table__header-wrapper,
    .el-table__footer-wrapper {
      background: transparent !important;
    }

    // 表格行悬浮效果
    .el-table__row {
      &:hover {
        background: rgba(78, 155, 248, 0.05) !important;
      }
    }

    // 空数据样式
    .el-table__empty-block {
      background: transparent !important;

      .el-table__empty-text {
        color: #8b9bb3;
      }
    }

    .device-count {
      color: #ffffff;
      font-weight: 500;
    }

    .status-text {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 13px;

      &.status-normal {
        color: #52c41a;
      }

      &.status-alarm {
        color: #ff4d4f;
      }
    }

    .detail-link {
      cursor: pointer;
      font-size: 13px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      text-decoration: none;

      &.detail-normal {
        color: #52c41a;

        .normal-badge {
          color: #52c41a;
        }
      }

      &.detail-alarm {
        .alarm-badge {
          color: #ff4d4f;
        }
      }

      &:hover {
        opacity: 0.8;
      }
    }
  }
}

// 响应式布局
@media screen and (max-width: 1600px) {
  .screen-header {
    .screen-title {
      font-size: 28px;
    }

    .screen-datetime {
      font-size: 16px;
    }
  }

  .stat-card {
    padding: 25px;

    .card-value {
      font-size: 42px;
    }
  }

  .chart-card {
    height: 320px;
  }

  .table-card {
    height: 400px;
  }
}

@media screen and (max-width: 1280px) {
  .screen-header {
    .screen-title {
      font-size: 26px;
    }

    .screen-datetime {
      font-size: 15px;
    }
  }

  .stat-card {
    padding: 20px;

    .card-title {
      font-size: 14px;
    }

    .card-value {
      font-size: 38px;
    }

    .card-trend {
      font-size: 13px;
    }
  }

  .chart-card {
    height: 300px;
    padding: 15px;

    .chart-title {
      font-size: 14px;
    }
  }

  .table-card {
    height: 380px;
    padding: 15px;

    .table-title {
      font-size: 14px;
    }
  }
}

// 仅在非常小的屏幕（小于1024px）才改为单列
@media screen and (max-width: 1024px) {
  .stats-row,
  .charts-row {
    grid-template-columns: 1fr;
  }

  .chart-card {
    height: 280px;
  }

  .table-card {
    height: 360px;
  }
}
</style>
---
 src/views/screen/powerMonitoring.vue | 226 +++++++++++++++++----------
 1 file changed, 140 insertions(+), 86 deletions(-)

diff --git a/src/views/screen/powerMonitoring.vue b/src/views/screen/powerMonitoring.vue
index 538c460..141418b 100644
--- a/src/views/screen/powerMonitoring.vue
+++ b/src/views/screen/powerMonitoring.vue
@@ -15,7 +15,7 @@
           <div class="card-title">总设备数</div>
           <div class="card-value">{{ totalDevices.toLocaleString() }}</div>
           <div class="card-trend growth">
-            <img src="../../assets/svgs/trend.svg" />
+            <img src="@/assets/images/screen/up_arrow.png" />
             <span>较上月增长 {{ totalDevicesGrowth }}%</span>
           </div>
         </div>
@@ -49,61 +49,76 @@
       <div class="table-row">
         <div class="table-card">
           <div class="table-title">园区信息列表</div>
-          <a-table
-            :columns="parkColumns"
-            :data-source="parkList"
-            :pagination="false"
-            :scroll="{ y: 'calc(100% - 50px)' }"
-            size="middle"
+          <el-table
+            :data="parkList"
+            stripe
+            style="width: 100%"
             class="park-table"
+            height="calc(100% - 50px)"
+            :header-cell-style="{
+              background: 'rgba(78, 155, 248, 0.08)',
+              color: '#ffffff',
+              borderBottom: '1px solid rgba(78, 155, 248, 0.15)',
+              fontWeight: '500',
+              padding: '12px 8px'
+            }"
+            :row-style="{
+              background: 'transparent',
+              color: '#ffffff'
+            }"
+            :cell-style="{
+              borderBottom: '1px solid rgba(78, 155, 248, 0.08)',
+              color: '#ffffff',
+              padding: '12px 8px'
+            }"
           >
-            <!-- 设备总数列 -->
-            <template #bodyCell="{ column, record }">
-              <template v-if="column.key === 'totalDevices'">
-                <span class="device-count">{{ record.totalDevices }}</span>
+            <el-table-column prop="parkName" label="园区名称" width="180" align="left" />
+            <el-table-column prop="totalDevices" label="设备总数" width="100" align="center">
+              <template #default="{ row }">
+                <span class="device-count">{{ row.totalDevices }}</span>
               </template>
-
-              <!-- UPS状态 -->
-              <template v-else-if="column.key === 'ups'">
-                <span :class="['status-text', record.upsStatus === '正常' ? 'status-normal' : 'status-alarm']">
-                  {{ record.upsStatus }}
+            </el-table-column>
+            <el-table-column prop="upsStatus" label="UPS" width="120" align="center">
+              <template #default="{ row }">
+                <span :class="['status-text', row.upsStatus === '正常' ? 'status-normal' : 'status-alarm']">
+                  {{ row.upsStatus }}
                 </span>
               </template>
-
-              <!-- 精密空调状态 -->
-              <template v-else-if="column.key === 'airCondition'">
-                <span :class="['status-text', record.airConditionStatus === '正常' ? 'status-normal' : 'status-alarm']">
-                  {{ record.airConditionStatus }}
+            </el-table-column>
+            <el-table-column prop="airConditionStatus" label="精密空调" width="120" align="center">
+              <template #default="{ row }">
+                <span :class="['status-text', row.airConditionStatus === '正常' ? 'status-normal' : 'status-alarm']">
+                  {{ row.airConditionStatus }}
                 </span>
               </template>
-
-              <!-- 温湿度状态 -->
-              <template v-else-if="column.key === 'temperature'">
-                <span :class="['status-text', record.temperatureStatus === '正常' || typeof record.temperatureStatus === 'number' ? 'status-normal' : 'status-alarm']">
-                  {{ record.temperatureStatus }}
+            </el-table-column>
+            <el-table-column prop="temperatureStatus" label="温湿度" width="120" align="center">
+              <template #default="{ row }">
+                <span :class="['status-text', row.temperatureStatus === '正常' || typeof row.temperatureStatus === 'number' ? 'status-normal' : 'status-alarm']">
+                  {{ row.temperatureStatus }}
                 </span>
               </template>
-
-              <!-- 其他设备状态 -->
-              <template v-else-if="column.key === 'other'">
-                <span :class="['status-text', record.otherStatus === '正常' ? 'status-normal' : 'status-alarm']">
-                  {{ record.otherStatus }}
+            </el-table-column>
+            <el-table-column prop="otherStatus" label="其他" width="120" align="center">
+              <template #default="{ row }">
+                <span :class="['status-text', row.otherStatus === '正常' ? 'status-normal' : 'status-alarm']">
+                  {{ row.otherStatus }}
                 </span>
               </template>
-
-              <!-- 详情操作 -->
-              <template v-else-if="column.key === 'action'">
+            </el-table-column>
+            <el-table-column label="详情" width="150" align="center">
+              <template #default="{ row }">
                 <a
-                  :class="['detail-link', record.hasAlarm ? 'detail-alarm' : 'detail-normal']"
-                  @click="handleViewDetail(record)"
+                  :class="['detail-link', row.hasAlarm ? 'detail-alarm' : 'detail-normal']"
+                  @click="handleViewDetail(row)"
                 >
-                  <span v-if="record.hasAlarm" class="alarm-badge">异常</span>
+                  <span v-if="row.hasAlarm" class="alarm-badge">异常</span>
                   <span v-else class="normal-badge">正常</span>
                   查看详情
                 </a>
               </template>
-            </template>
-          </a-table>
+            </el-table-column>
+          </el-table>
         </div>
       </div>
     </div>
@@ -158,17 +173,6 @@ const deviceTypeData = ref([
   { name: '其他', value: 20 }
 ]);
 
-// 园区信息列表表头
-const parkColumns = [
-  { title: '园区名称', dataIndex: 'parkName', key: 'parkName', width: 180, align: 'left' },
-  { title: '设备总数', dataIndex: 'totalDevices', key: 'totalDevices', width: 100, align: 'center' },
-  { title: 'UPS', dataIndex: 'ups', key: 'ups', width: 120, align: 'center' },
-  { title: '精密空调', dataIndex: 'airCondition', key: 'airCondition', width: 120, align: 'center' },
-  { title: '温湿度', dataIndex: 'temperature', key: 'temperature', width: 120, align: 'center' },
-  { title: '其他', dataIndex: 'other', key: 'other', width: 120, align: 'center' },
-  { title: '详情', key: 'action', width: 150, align: 'center' }
-];
-
 // 园区信息列表数据
 const parkList = ref<ParkInfo[]>([
   {
@@ -647,43 +651,21 @@ const handleResize = () => {
   }
 
   :deep(.park-table) {
-    .ant-table {
-      background: transparent;
-      color: #ffffff;
-
-      .ant-table-thead > tr > th {
-        background: rgba(78, 155, 248, 0.08);
-        color: #ffffff;
-        border-bottom: 1px solid rgba(78, 155, 248, 0.15);
-        font-weight: 500;
-        padding: 12px 8px;
-      }
-
-      .ant-table-tbody > tr {
-        background: transparent;
-        
-        &:hover > td {
-          background: rgba(78, 155, 248, 0.05);
-        }
-
-        > td {
-          border-bottom: 1px solid rgba(78, 155, 248, 0.08);
-          color: #ffffff;
-          padding: 12px 8px;
-        }
-      }
-
-      .ant-table-placeholder {
-        background: transparent;
-        color: #8b9bb3;
-
-        .ant-empty-description {
-          color: #8b9bb3;
-        }
+    background: transparent !important;
+    
+    // 表格主体背景
+    .el-table__inner-wrapper {
+      background: transparent !important;
+      
+      &::before {
+        display: none;
       }
     }
 
-    .ant-table-body {
+    .el-table__body-wrapper {
+      background: transparent !important;
+      
+      // 滚动条样式
       scrollbar-width: thin;
       scrollbar-color: rgba(78, 155, 248, 0.3) transparent;
 
@@ -701,6 +683,27 @@ const handleResize = () => {
       }
     }
 
+    .el-table__header-wrapper,
+    .el-table__footer-wrapper {
+      background: transparent !important;
+    }
+
+    // 表格行悬浮效果
+    .el-table__row {
+      &:hover {
+        background: rgba(78, 155, 248, 0.05) !important;
+      }
+    }
+
+    // 空数据样式
+    .el-table__empty-block {
+      background: transparent !important;
+      
+      .el-table__empty-text {
+        color: #8b9bb3;
+      }
+    }
+
     .device-count {
       color: #ffffff;
       font-weight: 500;
@@ -778,14 +781,65 @@ const handleResize = () => {
   }
 }
 
-@media screen and (max-width: 1366px) {
+@media screen and (max-width: 1280px) {
+  .screen-header {
+    .screen-title {
+      font-size: 26px;
+    }
+
+    .screen-datetime {
+      font-size: 15px;
+    }
+  }
+
+  .stat-card {
+    padding: 20px;
+
+    .card-title {
+      font-size: 14px;
+    }
+
+    .card-value {
+      font-size: 38px;
+    }
+
+    .card-trend {
+      font-size: 13px;
+    }
+  }
+
+  .chart-card {
+    height: 300px;
+    padding: 15px;
+
+    .chart-title {
+      font-size: 14px;
+    }
+  }
+
+  .table-card {
+    height: 380px;
+    padding: 15px;
+
+    .table-title {
+      font-size: 14px;
+    }
+  }
+}
+
+// 仅在非常小的屏幕（小于1024px）才改为单列
+@media screen and (max-width: 1024px) {
   .stats-row,
   .charts-row {
     grid-template-columns: 1fr;
   }
 
   .chart-card {
-    height: 300px;
+    height: 280px;
+  }
+
+  .table-card {
+    height: 360px;
   }
 }
 </style>