From 4bca8652d67dc56121d90c2415f3cf2c7bd37d15 Mon Sep 17 00:00:00 2001
From: chenlin <linchenm@isoftstone.com>
Date: Wed, 3 Dec 2025 15:25:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E7=8E=AF=E7=9B=91=E6=8E=A7=E5=A4=A7?=
 =?UTF-8?q?=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/screen/powerMonitoring.vue | 81 +++++++++++++++++-----------
 vite.config.ts                       |  2 +-
 2 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/src/views/screen/powerMonitoring.vue b/src/views/screen/powerMonitoring.vue
index 141418b..6d92c6c 100644
--- a/src/views/screen/powerMonitoring.vue
+++ b/src/views/screen/powerMonitoring.vue
@@ -15,7 +15,9 @@
           <div class="card-title">总设备数</div>
           <div class="card-value">{{ totalDevices.toLocaleString() }}</div>
           <div class="card-trend growth">
-            <img src="@/assets/images/screen/up_arrow.png" />
+            <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" />
+            </svg>
             <span>较上月增长 {{ totalDevicesGrowth }}%</span>
           </div>
         </div>
@@ -51,62 +53,58 @@
           <div class="table-title">园区信息列表</div>
           <el-table
             :data="parkList"
-            stripe
-            style="width: 100%"
+            :style="{ width: '100%' }"
             class="park-table"
             height="calc(100% - 50px)"
             :header-cell-style="{
-              background: 'rgba(78, 155, 248, 0.08)',
+              background: '#1a3a52',
               color: '#ffffff',
               borderBottom: '1px solid rgba(78, 155, 248, 0.15)',
               fontWeight: '500',
               padding: '12px 8px'
             }"
-            :row-style="{
-              background: 'transparent',
-              color: '#ffffff'
-            }"
+            :row-style="getRowStyle"
             :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">
+            <el-table-column prop="parkName" label="园区名称" min-width="200" align="left" />
+            <el-table-column prop="totalDevices" label="设备总数" min-width="120" 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">
+            <el-table-column prop="upsStatus" label="UPS" min-width="140" 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">
+            <el-table-column prop="airConditionStatus" label="精密空调" min-width="140" 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">
+            <el-table-column prop="temperatureStatus" label="温湿度" min-width="140" align="center">
               <template #default="{ row }">
-                <span :class="['status-text', row.temperatureStatus === '正常' || typeof row.temperatureStatus === 'number' ? 'status-normal' : 'status-alarm']">
+                <span :class="['status-text', row.temperatureStatus === '正常' ? 'status-normal' : 'status-alarm']">
                   {{ row.temperatureStatus }}
                 </span>
               </template>
             </el-table-column>
-            <el-table-column prop="otherStatus" label="其他" width="120" align="center">
+            <el-table-column prop="otherStatus" label="其他" min-width="140" 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">
+            <el-table-column label="详情" min-width="180" align="center">
               <template #default="{ row }">
                 <a
                   :class="['detail-link', row.hasAlarm ? 'detail-alarm' : 'detail-normal']"
@@ -201,7 +199,7 @@ const parkList = ref<ParkInfo[]>([
     totalDevices: 124,
     upsStatus: '正常',
     airConditionStatus: '正常',
-    temperatureStatus: 2,
+    temperatureStatus: '正常',
     otherStatus: '正常',
     hasAlarm: false
   },
@@ -227,7 +225,7 @@ const parkList = ref<ParkInfo[]>([
   },
   {
     key: '6',
-    parkName: '雄安地面站',
+    parkName: '崇左地面站',
     totalDevices: 64,
     upsStatus: '正常',
     airConditionStatus: '正常',
@@ -261,7 +259,7 @@ const parkList = ref<ParkInfo[]>([
     totalDevices: 68,
     upsStatus: '正常',
     airConditionStatus: '正常',
-    temperatureStatus: 1,
+    temperatureStatus: '正常',
     otherStatus: '正常',
     hasAlarm: false
   },
@@ -466,6 +464,20 @@ const initDeviceTypePieChart = () => {
   deviceTypePieChart.setOption(option);
 };
 
+// 获取行样式（条纹效果）
+const getRowStyle = ({ rowIndex }: { rowIndex: number }) => {
+  if (rowIndex % 2 === 0) {
+    return {
+      background: 'rgba(78, 155, 248, 0.03)',
+      color: '#ffffff'
+    };
+  }
+  return {
+    background: 'transparent',
+    color: '#ffffff'
+  };
+};
+
 // 查看详情
 const handleViewDetail = (record: ParkInfo) => {
   console.log('查看园区详情:', record);
@@ -690,8 +702,8 @@ const handleResize = () => {
 
     // 表格行悬浮效果
     .el-table__row {
-      &:hover {
-        background: rgba(78, 155, 248, 0.05) !important;
+      &:hover > td {
+        background: rgba(78, 155, 248, 0.1) !important;
       }
     }
 
@@ -728,21 +740,26 @@ const handleResize = () => {
       font-size: 13px;
       display: inline-flex;
       align-items: center;
-      gap: 4px;
+      gap: 8px;
       text-decoration: none;
+      color: #4e9bf8;
 
-      &.detail-normal {
-        color: #52c41a;
-
-        .normal-badge {
-          color: #52c41a;
-        }
+      .alarm-badge,
+      .normal-badge {
+        display: inline-block;
+        padding: 4px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+        color: #ffffff;
+        font-weight: 500;
       }
 
-      &.detail-alarm {
-        .alarm-badge {
-          color: #ff4d4f;
-        }
+      .alarm-badge {
+        background: #ff4d4f;
+      }
+
+      .normal-badge {
+        background: #52c41a;
       }
 
       &:hover {
diff --git a/vite.config.ts b/vite.config.ts
index 77bfc4c..393b406 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -32,7 +32,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       // 本地跨域代理. 目前注释的原因：暂时没有用途，server 端已经支持跨域
       proxy: {
         ['/admin-api']: {
-          target: 'http://10.28.117.100:48080',
+          target: 'http://10.28.117.48:48080',
           ws: false,
           changeOrigin: true,
           rewrite: (path) => path.replace(new RegExp(`^/admin-api`), ''),