From f3fec263bf0dfbd47d414e71ae915fa9bc981147 Mon Sep 17 00:00:00 2001
From: kongduo <2214111382@qq.com>
Date: Wed, 10 Jun 2026 11:12:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/style/main.scss                      |   1 +
 src/view/equipment/alarmRecord/index.vue |  69 +-
 src/view/equipment/gateway/index.vue     |  69 +-
 src/view/equipment/list/index.vue        | 109 +--
 src/view/equipment/particulars/index.vue | 114 +--
 src/view/largeScreen2/index.vue          | 912 ++++++++++++++++++++++-
 6 files changed, 1113 insertions(+), 161 deletions(-)

diff --git a/src/style/main.scss b/src/style/main.scss
index 21a3d12..cb0e795 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -1,5 +1,6 @@
 @use '@/style/iconfont.css';
 @use "./transition.scss";
+@use "./equipment-tech.scss";
 
 .html-grey {
   filter: grayscale(100%);
diff --git a/src/view/equipment/alarmRecord/index.vue b/src/view/equipment/alarmRecord/index.vue
index 89f1a49..1f0d85c 100644
--- a/src/view/equipment/alarmRecord/index.vue
+++ b/src/view/equipment/alarmRecord/index.vue
@@ -1,13 +1,38 @@
 <template>
-  <div>
-    <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
+  <div class="equipment-tech-page equipment-alarm-page">
+    <section class="equipment-tech-header">
+      <div>
+        <div class="equipment-tech-kicker">
+          <span class="tech-status-dot tech-status-dot--warning" /> ALARM RECORD
+        </div>
+        <h2 class="equipment-tech-title">报警记录</h2>
+        <p class="equipment-tech-subtitle">告警事件 / 网关定位 / 通信状态</p>
+      </div>
+      <div class="equipment-tech-header-line" />
+    </section>
+
+    <section class="equipment-tech-stat-grid">
+      <div class="equipment-tech-stat-card equipment-tech-stat-card--danger">
+        <div class="equipment-tech-stat-label">报警总数</div>
+        <div class="equipment-tech-stat-value">{{ total }}<span class="equipment-tech-stat-unit">条</span></div>
+      </div>
+      <div class="equipment-tech-stat-card equipment-tech-stat-card--warning">
+        <div class="equipment-tech-stat-label">当前页记录</div>
+        <div class="equipment-tech-stat-value">{{ currentPageCount }}<span class="equipment-tech-stat-unit">条</span></div>
+      </div>
+      <div class="equipment-tech-stat-card">
+        <div class="equipment-tech-stat-label">定位记录</div>
+        <div class="equipment-tech-stat-value">{{ coordinateCount }}<span class="equipment-tech-stat-unit">条</span></div>
+      </div>
+    </section>
+
     <div class="gva-search-box">
       <el-form ref="searchForm" :inline="true" :model="searchInfo">
-        <el-form-item label="用户名">
-          <el-input v-model="searchInfo.username" placeholder="设备ID" />
+        <el-form-item label="设备ID">
+          <el-input v-model="searchInfo.username" placeholder="请输入设备ID" />
         </el-form-item>
-        <el-form-item label="昵称">
-          <el-input v-model="searchInfo.nickname" placeholder="设备状态" />
+        <el-form-item label="关键词">
+          <el-input v-model="searchInfo.nickname" placeholder="请输入设备状态/关键词" />
         </el-form-item>
 
         <el-form-item>
@@ -18,18 +43,24 @@
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
+        <span class="tech-value-chip">
+          <span class="tech-status-dot tech-status-dot--warning" /> 告警追踪档案
+        </span>
       </div>
       <el-table :data="tableData">
-        <el-table-column align="left" label="网关ID" prop="gatewayId" width="200" />
+        <el-table-column align="left" label="网关ID" prop="gatewayId" width="200">
+          <template #default="{ row }">
+            <span class="tech-value-chip">{{ row.gatewayId || '未设置' }}</span>
+          </template>
+        </el-table-column>
         <el-table-column align="left" label="设备号" prop="imei" width="200" />
         <el-table-column align="left" label="网关mac" prop="gatewayMac" width="200" />
         <el-table-column align="left" label="网关地址" prop="gatewayAddress" />
-        <el-table-column align="left" label="经纬度" width="250">
+        <el-table-column align="left" label="经纬度" width="280">
           <template #default="scope">
-            <span>{{ scope.row.gatewayLong }}</span>
+            <span class="tech-coordinate">经 {{ scope.row.gatewayLong || '未知' }}</span>
             <el-divider direction="vertical" />
-            <span>{{ scope.row.gatewayLat }}</span>
+            <span class="tech-coordinate">纬 {{ scope.row.gatewayLat || '未知' }}</span>
           </template>
         </el-table-column>
       </el-table>
@@ -51,12 +82,7 @@
 <script setup>
   import * as serve from '@/api/equipment/alarmRecord'
 
-  import { nextTick, ref, watch, onMounted } from 'vue'
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  // import { id } from 'element-plus/es/locale'
-  import { useAppStore } from '@/pinia'
-
-  const appStore = useAppStore()
+  import { computed, ref, onMounted } from 'vue'
 
   const searchInfo = ref({
     username: '',
@@ -70,6 +96,9 @@
   const pageSize = ref(10)
   const tableData = ref([])
 
+  const currentPageCount = computed(() => tableData.value.length)
+  const coordinateCount = computed(() => tableData.value.filter(item => item.gatewayLong && item.gatewayLat).length)
+
   onMounted(() => {
     getTableData()
   })
@@ -113,9 +142,3 @@
     getTableData()
   }
 </script>
-
-<style lang="scss">
-  .header-img-box {
-    @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
-  }
-</style>
diff --git a/src/view/equipment/gateway/index.vue b/src/view/equipment/gateway/index.vue
index 8f6677d..f91e3c8 100644
--- a/src/view/equipment/gateway/index.vue
+++ b/src/view/equipment/gateway/index.vue
@@ -1,13 +1,38 @@
 <template>
-  <div>
-    <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
+  <div class="equipment-tech-page equipment-gateway-page">
+    <section class="equipment-tech-header">
+      <div>
+        <div class="equipment-tech-kicker">
+          <span class="tech-status-dot tech-status-dot--online" /> GATEWAY MATRIX
+        </div>
+        <h2 class="equipment-tech-title">网关通信矩阵</h2>
+        <p class="equipment-tech-subtitle">网关标识 / 设备号 / MAC / 地理位置</p>
+      </div>
+      <div class="equipment-tech-header-line" />
+    </section>
+
+    <section class="equipment-tech-stat-grid">
+      <div class="equipment-tech-stat-card">
+        <div class="equipment-tech-stat-label">网关总数</div>
+        <div class="equipment-tech-stat-value">{{ total }}<span class="equipment-tech-stat-unit">个</span></div>
+      </div>
+      <div class="equipment-tech-stat-card equipment-tech-stat-card--success">
+        <div class="equipment-tech-stat-label">当前页网关</div>
+        <div class="equipment-tech-stat-value">{{ currentPageCount }}<span class="equipment-tech-stat-unit">个</span></div>
+      </div>
+      <div class="equipment-tech-stat-card equipment-tech-stat-card--warning">
+        <div class="equipment-tech-stat-label">坐标已接入</div>
+        <div class="equipment-tech-stat-value">{{ coordinateCount }}<span class="equipment-tech-stat-unit">个</span></div>
+      </div>
+    </section>
+
     <div class="gva-search-box">
       <el-form ref="searchForm" :inline="true" :model="searchInfo">
-        <el-form-item label="用户名">
-          <el-input v-model="searchInfo.username" placeholder="设备ID" />
+        <el-form-item label="设备ID">
+          <el-input v-model="searchInfo.username" placeholder="请输入设备ID" />
         </el-form-item>
-        <el-form-item label="昵称">
-          <el-input v-model="searchInfo.nickname" placeholder="设备状态" />
+        <el-form-item label="关键词">
+          <el-input v-model="searchInfo.nickname" placeholder="请输入设备状态/关键词" />
         </el-form-item>
 
         <el-form-item>
@@ -18,18 +43,24 @@
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
+        <span class="tech-value-chip">
+          <span class="tech-status-dot tech-status-dot--online" /> 网关通信档案
+        </span>
       </div>
       <el-table :data="tableData">
-        <el-table-column align="left" label="网关ID" prop="gatewayId" width="200" />
+        <el-table-column align="left" label="网关ID" prop="gatewayId" width="200">
+          <template #default="{ row }">
+            <span class="tech-value-chip">{{ row.gatewayId || '未设置' }}</span>
+          </template>
+        </el-table-column>
         <el-table-column align="left" label="设备号" prop="imei" width="200" />
         <el-table-column align="left" label="网关mac" prop="gatewayMac" width="200" />
         <el-table-column align="left" label="网关地址" prop="gatewayAddress" />
-        <el-table-column align="left" label="经纬度" width="250">
+        <el-table-column align="left" label="经纬度" width="280">
           <template #default="scope">
-            <span>{{ scope.row.gatewayLong }}</span>
+            <span class="tech-coordinate">经 {{ scope.row.gatewayLong || '未知' }}</span>
             <el-divider direction="vertical" />
-            <span>{{ scope.row.gatewayLat }}</span>
+            <span class="tech-coordinate">纬 {{ scope.row.gatewayLat || '未知' }}</span>
           </template>
         </el-table-column>
       </el-table>
@@ -51,12 +82,7 @@
 <script setup>
   import * as serve from '@/api/equipment/gateway'
 
-  import { nextTick, ref, watch, onMounted } from 'vue'
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  // import { id } from 'element-plus/es/locale'
-  import { useAppStore } from '@/pinia'
-
-  const appStore = useAppStore()
+  import { computed, ref, onMounted } from 'vue'
 
   const searchInfo = ref({
     username: '',
@@ -70,6 +96,9 @@
   const pageSize = ref(10)
   const tableData = ref([])
 
+  const currentPageCount = computed(() => tableData.value.length)
+  const coordinateCount = computed(() => tableData.value.filter(item => item.gatewayLong && item.gatewayLat).length)
+
   onMounted(() => {
     getTableData()
   })
@@ -113,9 +142,3 @@
     getTableData()
   }
 </script>
-
-<style lang="scss">
-  .header-img-box {
-    @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
-  }
-</style>
diff --git a/src/view/equipment/list/index.vue b/src/view/equipment/list/index.vue
index 769e9c8..4126faa 100644
--- a/src/view/equipment/list/index.vue
+++ b/src/view/equipment/list/index.vue
@@ -1,6 +1,35 @@
 <template>
-  <div>
-    <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
+  <div class="equipment-tech-page equipment-list-page">
+    <section class="equipment-tech-header">
+      <div>
+        <div class="equipment-tech-kicker">
+          <span class="tech-status-dot tech-status-dot--online" /> DEVICE CONTROL
+        </div>
+        <h2 class="equipment-tech-title">设备监控中心</h2>
+        <p class="equipment-tech-subtitle">设备状态 / 网关通信 / 远程操作 / 实时数据联动</p>
+      </div>
+      <div class="equipment-tech-header-line" />
+    </section>
+
+    <section class="equipment-tech-stat-grid">
+      <div class="equipment-tech-stat-card">
+        <div class="equipment-tech-stat-label">设备总数</div>
+        <div class="equipment-tech-stat-value">{{ total }}<span class="equipment-tech-stat-unit">台</span></div>
+      </div>
+      <div class="equipment-tech-stat-card equipment-tech-stat-card--success">
+        <div class="equipment-tech-stat-label">当前页在线</div>
+        <div class="equipment-tech-stat-value">{{ onlineCount }}<span class="equipment-tech-stat-unit">台</span></div>
+      </div>
+      <div class="equipment-tech-stat-card equipment-tech-stat-card--warning">
+        <div class="equipment-tech-stat-label">合闸运行</div>
+        <div class="equipment-tech-stat-value">{{ openedCount }}<span class="equipment-tech-stat-unit">台</span></div>
+      </div>
+      <div class="equipment-tech-stat-card equipment-tech-stat-card--danger">
+        <div class="equipment-tech-stat-label">锁定设备</div>
+        <div class="equipment-tech-stat-value">{{ lockedCount }}<span class="equipment-tech-stat-unit">台</span></div>
+      </div>
+    </section>
+
     <div class="gva-search-box">
       <el-form ref="searchForm" :inline="true" :model="searchInfo">
         <el-form-item label="设备状态">
@@ -18,24 +47,16 @@
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
+        <span class="tech-value-chip">
+          <span class="tech-status-dot tech-status-dot--online" /> 设备运行档案
+        </span>
       </div>
       <el-table :data="tableData" row-key="ID">
-        <!-- <el-table-column align="left" label="设备图片" min-width="75">
-          <template #default="scope">
-            <CustomPic style="margin-top: 8px" :pic-src="scope.row.headerImg" />
-          </template>
-        </el-table-column> -->
         <el-table-column align="left" label="设备ID" prop="cbId">
           <template #default="{ row }">
-            {{ row.cbId || '未设置' }}
+            <span class="tech-value-chip">{{ row.cbId || '未设置' }}</span>
           </template>
         </el-table-column>
-        <!-- <el-table-column align="left" label="项目ID" prop="projectId">
-          <template #default="{ row }">
-            {{ row.projectId || '未设置' }}
-          </template>
-        </el-table-column> -->
         <el-table-column align="left" label="网关ID" prop="gatewayId">
           <template #default="{ row }">
             {{ row.gatewayId || '未设置' }}
@@ -43,26 +64,34 @@
         </el-table-column>
         <el-table-column align="left" label="设备状态">
           <template #default="{ row }">
-            <el-tag v-if="row.cbTypeName !== 'T30'" :type="row.deviceStatus == 1 ? 'success' : 'danger'">{{
-              row.deviceStatus == 1 ? '合闸' : '分闸'
-            }}</el-tag>
+            <el-tag
+              v-if="row.cbTypeName !== 'T30'"
+              class="tech-status-tag"
+              :type="row.deviceStatus == 1 ? 'success' : 'danger'"
+            >
+              <span :class="['tech-status-dot', row.deviceStatus == 1 ? 'tech-status-dot--success' : 'tech-status-dot--danger']" />
+              {{ row.deviceStatus == 1 ? '合闸' : '分闸' }}
+            </el-tag>
           </template>
         </el-table-column>
         <el-table-column align="left" label="锁定状态">
           <template #default="{ row }">
-            <el-tag :type="['success', 'info', 'danger'][row.lockStatus]">{{
-              ['正常', '远程合闸禁止', '锁定'][row.lockStatus]
-            }}</el-tag>
+            <el-tag class="tech-status-tag" :type="lockStatusType(row.lockStatus)">
+              <span :class="['tech-status-dot', lockStatusDotClass(row.lockStatus)]" />
+              {{ lockStatusText(row.lockStatus) }}
+            </el-tag>
           </template>
         </el-table-column>
         <el-table-column align="left" label="网络">
           <template #default="{ row }">
-            <el-tag :type="row.netStatus == 1 ? 'primary' : 'info'">{{ row.netStatus == 1 ? '在线' : '离线' }}</el-tag>
+            <el-tag class="tech-status-tag" :type="row.netStatus == 1 ? 'success' : 'info'">
+              <span :class="['tech-status-dot', row.netStatus == 1 ? 'tech-status-dot--online' : 'tech-status-dot--offline']" />
+              {{ row.netStatus == 1 ? '在线' : '离线' }}
+            </el-tag>
           </template>
         </el-table-column>
         <el-table-column align="left" label="设备类型名称" prop="cbTypeName" />
         <el-table-column align="left" label="网关mac" prop="gatewayMac" />
-
         <el-table-column align="left" label="协议" prop="protocol" />
         <el-table-column align="left" label="品牌" prop="brand" />
 
@@ -74,7 +103,7 @@
 
         <el-table-column label="操作" fixed="right" width="240">
           <template #default="{ row }">
-            <span class="action-buttons">
+            <span class="tech-action-buttons">
               <el-button v-if="row.deviceStatus == 1" type="primary" link icon="SortUp" @click="changeStatus(row)">
                 分闸
               </el-button>
@@ -82,7 +111,7 @@
               <el-button v-if="[1].includes(row.lockStatus)" type="primary" link icon="Unlock" @click="unlock(row)">
                 解锁
               </el-button>
-              <el-dropdown>
+              <el-dropdown popper-class="equipment-tech-dropdown">
                 <span class="el-dropdown-link">
                   更多
                   <el-icon class="el-icon--right">
@@ -121,12 +150,8 @@
 <script setup>
   import * as serve from '@/api/equipment/list'
 
-  import { nextTick, ref, watch, onMounted } from 'vue'
+  import { computed, ref, onMounted } from 'vue'
   import { ElMessage, ElMessageBox } from 'element-plus'
-  // import { id } from 'element-plus/es/locale'
-  import { useAppStore } from '@/pinia'
-
-  const appStore = useAppStore()
 
   const searchInfo = ref({
     deviceStatus: ''
@@ -137,6 +162,14 @@
   const pageSize = ref(10)
   const tableData = ref([])
 
+  const onlineCount = computed(() => tableData.value.filter(item => item.netStatus == 1).length)
+  const openedCount = computed(() => tableData.value.filter(item => item.deviceStatus == 1).length)
+  const lockedCount = computed(() => tableData.value.filter(item => item.lockStatus == 2).length)
+
+  const lockStatusText = (status) => ['正常', '远程合闸禁止', '锁定'][status] || '未知'
+  const lockStatusType = (status) => ['success', 'warning', 'danger'][status] || 'info'
+  const lockStatusDotClass = (status) => ['tech-status-dot--success', 'tech-status-dot--warning', 'tech-status-dot--danger'][status] || 'tech-status-dot--offline'
+
   onMounted(() => {
     getTableData()
   })
@@ -224,21 +257,3 @@
     getTableData()
   }
 </script>
-
-<style lang="scss" scoped>
-  .header-img-box {
-    @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
-  }
-  .action-buttons {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-  .el-dropdown-link {
-    cursor: pointer;
-    color: var(--el-color-primary);
-    // display: flex;
-    // align-items: center;
-  }
-</style>
diff --git a/src/view/equipment/particulars/index.vue b/src/view/equipment/particulars/index.vue
index 1a84ed0..b5cbbf6 100644
--- a/src/view/equipment/particulars/index.vue
+++ b/src/view/equipment/particulars/index.vue
@@ -1,13 +1,39 @@
 <template>
-  <div>
-    <!-- <warning-bar title="注：右上角头像下拉可切换角色" /> -->
+  <div class="equipment-tech-page equipment-particulars-page">
+    <section class="equipment-tech-header">
+      <div>
+        <div class="equipment-tech-kicker">
+          <span class="tech-status-dot tech-status-dot--online" /> REALTIME DATA
+        </div>
+        <h2 class="equipment-tech-title">实时数据监测</h2>
+        <p class="equipment-tech-subtitle">电压 / 电流 / 漏电流 / 温度 / 功率因数</p>
+      </div>
+      <div class="equipment-tech-header-line" />
+    </section>
+
+    <section class="equipment-tech-stat-grid">
+      <div class="equipment-tech-stat-card">
+        <div class="equipment-tech-stat-label">记录总数</div>
+        <div class="equipment-tech-stat-value">{{ total }}<span class="equipment-tech-stat-unit">条</span></div>
+      </div>
+      <div class="equipment-tech-stat-card equipment-tech-stat-card--success">
+        <div class="equipment-tech-stat-label">当前页数据</div>
+        <div class="equipment-tech-stat-value">{{ currentPageCount }}<span class="equipment-tech-stat-unit">条</span></div>
+      </div>
+      <div class="equipment-tech-stat-card equipment-tech-stat-card--warning">
+        <div class="equipment-tech-stat-label">最大电流</div>
+        <div class="equipment-tech-stat-value">{{ maxCurrent }}<span class="equipment-tech-stat-unit">A</span></div>
+      </div>
+      <div class="equipment-tech-stat-card equipment-tech-stat-card--danger">
+        <div class="equipment-tech-stat-label">最高温度</div>
+        <div class="equipment-tech-stat-value">{{ maxTemperature }}<span class="equipment-tech-stat-unit">℃</span></div>
+      </div>
+    </section>
+
     <div class="gva-search-box">
       <el-form ref="searchForm" :inline="true" :model="searchInfo">
         <el-form-item label="设备状态">
-          <!-- <el-select v-model="searchInfo.deviceStatus" placeholder="请选择">
-            <el-option label="合闸" :value="1" />
-            <el-option label="分闸" :value="0" />
-          </el-select> -->
+          <span class="tech-value-chip">监测数据自动刷新于查询结果</span>
         </el-form-item>
 
         <el-form-item>
@@ -18,60 +44,62 @@
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <!-- <el-button type="primary" icon="plus" @click="addUser">新增用户</el-button> -->
+        <span class="tech-value-chip">
+          <span class="tech-status-dot tech-status-dot--online" /> 运行参数采集
+        </span>
+        <span class="tech-value-chip">
+          最大漏电流 {{ maxLeakageCurrent }} mA
+        </span>
       </div>
       <el-table :data="tableData" row-key="ID">
-        <el-table-column align="left" label="设备ID" prop="deviceId"> </el-table-column>
-        <el-table-column align="left" label="运行时长" prop="runtime">
+        <el-table-column align="left" label="设备ID" prop="deviceId" min-width="150">
           <template #default="{ row }">
-            <span>{{ row.runtime || '' }}</span>
+            <span class="tech-value-chip">{{ row.deviceId || '未设置' }}</span>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="信号质量" prop="signalQuality">
+        <el-table-column align="left" label="运行时长" prop="runtime" min-width="130">
           <template #default="{ row }">
-            {{ row.signalQuality || '' }}
+            <span class="tech-value-chip">{{ row.runtime || '暂无' }}</span>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="电压（V）" prop="leakageCurrent">
+        <el-table-column align="left" label="信号质量" prop="signalQuality" min-width="120">
           <template #default="{ row }">
-            {{ row.leakageCurrent || '' }}
+            <span class="tech-value-chip">{{ row.signalQuality || '暂无' }}</span>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="漏电流值（mA）" prop="leakageCurrent">
+        <el-table-column align="left" label="电压（V）" prop="leakageCurrent" min-width="120">
           <template #default="{ row }">
-            {{ row.leakageCurrent || '' }}
+            <span class="tech-value-chip">{{ row.leakageCurrent || '暂无' }}</span>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="累计用电量" prop="cumulativeElectricity">
+        <el-table-column align="left" label="漏电流值（mA）" prop="leakageCurrent" min-width="150">
           <template #default="{ row }">
-            {{ row.cumulativeElectricity || '' }}
+            <span class="tech-value-chip">{{ row.leakageCurrent || '暂无' }}</span>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="电流值（A）" prop="current">
+        <el-table-column align="left" label="累计用电量" prop="cumulativeElectricity" min-width="140">
           <template #default="{ row }">
-            {{ row.current || '' }}
+            <span class="tech-value-chip">{{ row.cumulativeElectricity || '暂无' }}</span>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="内部温度（℃）" prop="internalTemperature">
+        <el-table-column align="left" label="电流值（A）" prop="current" min-width="130">
           <template #default="{ row }">
-            {{ row.internalTemperature || '' }}
+            <span class="tech-value-chip">{{ row.current || '暂无' }}</span>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="N相下端温度（℃）" prop="nLowerTemperature">
+        <el-table-column align="left" label="内部温度（℃）" prop="internalTemperature" min-width="150">
           <template #default="{ row }">
-            {{ row.nLowerTemperature || '' }}
+            <span class="tech-value-chip">{{ row.internalTemperature || '暂无' }}</span>
           </template>
         </el-table-column>
-        <el-table-column align="left" label="功率因数（%）" prop="powerFactor">
+        <el-table-column align="left" label="N相下端温度（℃）" prop="nLowerTemperature" min-width="170">
           <template #default="{ row }">
-            {{ row.powerFactor || '' }}
+            <span class="tech-value-chip">{{ row.nLowerTemperature || '暂无' }}</span>
           </template>
         </el-table-column>
-
-        <el-table-column label="操作" fixed="right">
+        <el-table-column align="left" label="功率因数（%）" prop="powerFactor" min-width="140">
           <template #default="{ row }">
-            <!-- <el-button type="primary" link icon="delete" @click="deleteUserFunc(scope.row)">删除</el-button> -->
-            <!-- <el-button type="primary" link icon="Tickets" @click="openDetails(row)">查看</el-button> -->
+            <span class="tech-value-chip">{{ row.powerFactor || '暂无' }}</span>
           </template>
         </el-table-column>
       </el-table>
@@ -92,12 +120,7 @@
 <script setup>
   import * as serve from '@/api/equipment/particulars'
 
-  import { nextTick, ref, watch, onMounted } from 'vue'
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  // import { id } from 'element-plus/es/locale'
-  import { useAppStore } from '@/pinia'
-
-  const appStore = useAppStore()
+  import { computed, ref, onMounted } from 'vue'
 
   const searchInfo = ref({
     deviceStatus: ''
@@ -108,6 +131,19 @@
   const pageSize = ref(10)
   const tableData = ref([])
 
+  const currentPageCount = computed(() => tableData.value.length)
+  const maxCurrent = computed(() => getMaxMetric('current'))
+  const maxTemperature = computed(() => getMaxMetric('internalTemperature'))
+  const maxLeakageCurrent = computed(() => getMaxMetric('leakageCurrent'))
+
+  const getMaxMetric = (key) => {
+    const values = tableData.value
+      .map(item => Number(item[key]))
+      .filter(value => !Number.isNaN(value))
+    if (!values.length) return '--'
+    return Math.max(...values)
+  }
+
   onMounted(() => {
     getTableData()
   })
@@ -148,9 +184,3 @@
     getTableData()
   }
 </script>
-
-<style lang="scss">
-  .header-img-box {
-    @apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
-  }
-</style>
diff --git a/src/view/largeScreen2/index.vue b/src/view/largeScreen2/index.vue
index 9348db5..c24e277 100644
--- a/src/view/largeScreen2/index.vue
+++ b/src/view/largeScreen2/index.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="background-box">
+    <div class="industrial-grid"></div>
+    <div class="scan-light"></div>
     <div class="container">
       <div class="left">
         <div class="module-card left-first-module">
@@ -95,6 +97,15 @@
           <div class="card map-card">
             <div class="card-title" style="display: none">设备分布</div>
             <div class="map-container-full" id="chinaMap" ref="chinaMap">
+              <div class="map-corner top-left"></div>
+              <div class="map-corner top-right"></div>
+              <div class="map-corner bottom-left"></div>
+              <div class="map-corner bottom-right"></div>
+              <div class="map-radar-glow"></div>
+              <div class="map-title-bar">
+                <span class="map-title-main">全国设备态势</span>
+                <span class="map-title-sub">REAL-TIME DISTRIBUTION</span>
+              </div>
               <div class="map-control">
                 <div class="control-top">
                   <div class="control-title">设备总数量</div>
@@ -106,14 +117,17 @@
                     <div class="status-item">
                       <div class="status-dot online"></div>
                       <span>在线</span>
+                      <strong>{{ onlineDevices }}</strong>
                     </div>
                     <div class="status-item">
                       <div class="status-dot alarm"></div>
                       <span>告警</span>
+                      <strong>{{ alarmDevices }}</strong>
                     </div>
                     <div class="status-item">
                       <div class="status-dot offline"></div>
                       <span>离线</span>
+                      <strong>{{ offlineDevices }}</strong>
                     </div>
                   </div>
                 </div>
@@ -377,11 +391,15 @@
     console.log('开始初始化地图')
 
     mapInstance.value = new AMap.Map('chinaMap', {
-      zoom: 5,
-      center: [116.4074, 39.9042],
+      zoom: 4.8,
+      center: [105.6, 36.4],
       mapStyle: 'amap://styles/darkblue',
-      viewMode: '2D',
-      features: ['bg', 'road', 'building', 'point']
+      viewMode: '3D',
+      pitch: 34,
+      rotation: -8,
+      features: ['bg', 'road', 'building', 'point'],
+      showLabel: false,
+      skyColor: '#020713'
     })
 
     mapInstance.value.on('complete', () => {
@@ -420,12 +438,14 @@
       const marker = new AMap.Marker({
         position: [device.gatewayLong, device.gatewayLat],
         content: createMarkerContent(device.status),
-        zIndex: 5
+        anchor: 'bottom-center',
+        zIndex: 120
       })
 
       const infoWindow = new AMap.InfoWindow({
         content: createInfoWindowContent(device),
-        offset: new AMap.Pixel(0, -30)
+        offset: new AMap.Pixel(0, -44),
+        isCustom: true
       })
 
       marker.on('click', () => {
@@ -440,34 +460,31 @@
   }
 
   const createMarkerContent = (status) => {
-    const color = status === 'online' ? '#10b981' : status === 'alarm' ? '#ef4444' : '#64748b'
+    const color = status === 'online' ? '#20f6a0' : status === 'alarm' ? '#ff4d6d' : '#8aa1bd'
+    const statusClass = status === 'online' ? 'online' : status === 'alarm' ? 'alarm' : 'offline'
     return `
-      <div style="
-        width: 12px;
-        height: 12px;
-        background-color: ${color};
-        border-radius: 50%;
-        border: 2px solid #fff;
-        box-shadow: 0 0 10px ${color};
-      "></div>
+      <div class="power-map-marker ${statusClass}" style="--marker-color: ${color};">
+        <span class="marker-ripple"></span>
+        <span class="marker-core"></span>
+        <span class="marker-pin"></span>
+      </div>
     `
   }
 
   const createInfoWindowContent = (device) => {
     const statusText = device.status === 'online' ? '在线' : device.status === 'alarm' ? '告警' : '离线'
-    const statusColor = device.status === 'online' ? '#10b981' : device.status === 'alarm' ? '#ef4444' : '#64748b'
+    const statusColor = device.status === 'online' ? '#20f6a0' : device.status === 'alarm' ? '#ff4d6d' : '#8aa1bd'
 
     return `
-      <div style="
-        padding: 10px;
-        background-color: rgba(15, 23, 42, 0.9);
-        border: 1px solid #1e3a8a;
-        border-radius: 4px;
-        color: #e2e8f0;
-        min-width: 150px;
-      ">
-        <div style="font-size: 12px; margin-bottom: 3px;">状态: <span style="color: ${statusColor};">${statusText}</span></div>
-        <div style="font-size: 12px;">地址: ${device.gatewayAddress || ''}</div>
+      <div class="power-map-info" style="--status-color: ${statusColor};">
+        <div class="power-map-info__header">
+          <span class="power-map-info__dot"></span>
+          <span>${statusText}</span>
+        </div>
+        <div class="power-map-info__body">
+          <div class="power-map-info__label">设备位置</div>
+          <div class="power-map-info__address">${device.gatewayAddress || '暂无地址'}</div>
+        </div>
       </div>
     `
   }
@@ -1043,11 +1060,16 @@
   }
 
   .map-container-full {
+    position: relative;
     flex: 1;
     display: flex;
     flex-direction: column;
     padding: 0;
     margin: 0;
+    overflow: hidden;
+    background:
+      radial-gradient(circle at 50% 48%, rgba(0, 212, 255, 0.18), transparent 38%),
+      linear-gradient(180deg, rgba(2, 8, 23, 0.18), rgba(2, 8, 23, 0.55));
   }
 
   .map-control {
@@ -1114,9 +1136,847 @@
     background-color: #64748b;
   }
 
+  .map-title-bar {
+    position: absolute;
+    top: 0.2rem;
+    left: 50%;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    gap: 0.04rem;
+    min-width: 2.8rem;
+    padding: 0.1rem 0.32rem 0.12rem;
+    color: #e9fbff;
+    background:
+      linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.2) 16%, rgba(15, 23, 42, 0.72) 50%, rgba(6, 182, 212, 0.2) 84%, transparent),
+      linear-gradient(180deg, rgba(15, 23, 42, 0.24), rgba(2, 6, 23, 0.12));
+    border-top: 1px solid rgba(0, 212, 255, 0.52);
+    border-bottom: 1px solid rgba(245, 158, 11, 0.28);
+    transform: translateX(-50%);
+    pointer-events: none;
+    text-shadow: 0 0 0.14rem rgba(0, 212, 255, 0.65);
+  }
+
+  .map-title-main {
+    font-size: 0.2rem;
+    font-weight: 700;
+    letter-spacing: 0.06rem;
+  }
+
+  .map-title-sub {
+    font-size: 0.1rem;
+    color: rgba(137, 221, 255, 0.78);
+    letter-spacing: 0.04rem;
+  }
+
+  .map-radar-glow {
+    position: absolute;
+    left: 50%;
+    top: 52%;
+    z-index: 1000;
+    width: 5.2rem;
+    height: 5.2rem;
+    border: 1px solid rgba(0, 212, 255, 0.22);
+    border-radius: 50%;
+    background:
+      repeating-radial-gradient(circle, transparent 0 0.62rem, rgba(0, 212, 255, 0.08) 0.63rem 0.64rem),
+      conic-gradient(from 0deg, transparent 0deg, rgba(0, 212, 255, 0.2) 46deg, transparent 88deg, transparent 360deg);
+    box-shadow: inset 0 0 0.42rem rgba(0, 212, 255, 0.08), 0 0 0.36rem rgba(0, 212, 255, 0.08);
+    transform: translate(-50%, -50%);
+    animation: radarRotate 12s linear infinite;
+    mix-blend-mode: screen;
+    pointer-events: none;
+  }
+
+  .map-corner {
+    position: absolute;
+    z-index: 1000;
+    width: 0.42rem;
+    height: 0.42rem;
+    pointer-events: none;
+  }
+
+  .map-corner::before,
+  .map-corner::after {
+    content: '';
+    position: absolute;
+    background: rgba(0, 212, 255, 0.9);
+    box-shadow: 0 0 0.12rem rgba(0, 212, 255, 0.85);
+  }
+
+  .map-corner::before {
+    width: 100%;
+    height: 1px;
+  }
+
+  .map-corner::after {
+    width: 1px;
+    height: 100%;
+  }
+
+  .map-corner.top-left {
+    top: 0.14rem;
+    left: 0.14rem;
+  }
+
+  .map-corner.top-left::before,
+  .map-corner.top-left::after {
+    top: 0;
+    left: 0;
+  }
+
+  .map-corner.top-right {
+    top: 0.14rem;
+    right: 0.14rem;
+  }
+
+  .map-corner.top-right::before,
+  .map-corner.top-right::after {
+    top: 0;
+    right: 0;
+  }
+
+  .map-corner.bottom-left {
+    bottom: 0.14rem;
+    left: 0.14rem;
+  }
+
+  .map-corner.bottom-left::before,
+  .map-corner.bottom-left::after {
+    bottom: 0;
+    left: 0;
+  }
+
+  .map-corner.bottom-right {
+    right: 0.14rem;
+    bottom: 0.14rem;
+  }
+
+  .map-corner.bottom-right::before,
+  .map-corner.bottom-right::after {
+    right: 0;
+    bottom: 0;
+  }
+
   .top2 {
     flex: 1;
     display: flex;
     flex-direction: column;
   }
+  .background-box {
+    position: relative;
+    overflow: hidden;
+    isolation: isolate;
+    background:
+      radial-gradient(circle at 50% 22%, rgba(0, 212, 255, 0.2), transparent 28%),
+      radial-gradient(circle at 12% 18%, rgba(245, 158, 11, 0.12), transparent 22%),
+      radial-gradient(circle at 88% 78%, rgba(59, 130, 246, 0.16), transparent 24%),
+      url('@/assets/img/largeScreen2/background.png') #020713 no-repeat center center / 100% 100%;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      background:
+        linear-gradient(115deg, transparent 0%, rgba(0, 212, 255, 0.08) 18%, transparent 34%),
+        linear-gradient(245deg, transparent 0%, rgba(245, 158, 11, 0.06) 24%, transparent 42%);
+      animation: energySweep 8s ease-in-out infinite;
+      pointer-events: none;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      background-image:
+        linear-gradient(rgba(0, 212, 255, 0.05) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(0, 212, 255, 0.05) 1px, transparent 1px);
+      background-size: 0.42rem 0.42rem;
+      mask-image: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0.85), transparent 68%);
+      animation: gridDrift 16s linear infinite;
+      pointer-events: none;
+    }
+  }
+
+  .industrial-grid,
+  .scan-light {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .industrial-grid {
+    z-index: 2;
+    background:
+      linear-gradient(90deg, transparent 0 9%, rgba(0, 212, 255, 0.08) 10%, transparent 11% 100%),
+      linear-gradient(0deg, transparent 0 9%, rgba(0, 212, 255, 0.06) 10%, transparent 11% 100%);
+    background-size: 1.2rem 1.2rem;
+    opacity: 0.45;
+    animation: gridPulse 5s ease-in-out infinite;
+  }
+
+  .scan-light {
+    z-index: 3;
+    background: linear-gradient(180deg, transparent 0%, rgba(0, 212, 255, 0.12) 48%, transparent 56%);
+    transform: translateY(-100%);
+    animation: scanLine 7s linear infinite;
+    mix-blend-mode: screen;
+  }
+
+  .container {
+    z-index: 10;
+    background:
+      linear-gradient(90deg, rgba(2, 8, 23, 0.92) 0%, rgba(2, 8, 23, 0.32) 22%, transparent 42%, transparent 58%, rgba(2, 8, 23, 0.32) 78%, rgba(2, 8, 23, 0.92) 100%);
+  }
+
+  .container .left,
+  .container .right {
+    position: relative;
+    filter: drop-shadow(0 0 0.28rem rgba(0, 212, 255, 0.16));
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0.72rem;
+      bottom: 0.2rem;
+      width: 1px;
+      background: linear-gradient(180deg, transparent, rgba(0, 212, 255, 0.65), rgba(245, 158, 11, 0.35), transparent);
+      box-shadow: 0 0 0.18rem rgba(0, 212, 255, 0.8);
+      animation: sideEnergy 3.8s ease-in-out infinite;
+    }
+  }
+
+  .container .left::before {
+    right: 0.18rem;
+  }
+
+  .container .right::before {
+    left: 0.18rem;
+  }
+
+  .container .left .module-card,
+  .container .right .module-card {
+    position: relative;
+    overflow: hidden;
+    border: 1px solid rgba(0, 212, 255, 0.16);
+    border-radius: 0.08rem;
+    background:
+      linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(15, 23, 42, 0.28) 44%, rgba(245, 158, 11, 0.07)),
+      linear-gradient(180deg, rgba(15, 23, 42, 0.5), rgba(2, 6, 23, 0.18));
+    box-shadow:
+      inset 0 0 0.22rem rgba(0, 212, 255, 0.08),
+      0 0.08rem 0.28rem rgba(0, 0, 0, 0.28);
+    backdrop-filter: blur(4px);
+    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: 1px;
+      background: linear-gradient(135deg, rgba(0, 212, 255, 0.78), transparent 32%, transparent 62%, rgba(245, 158, 11, 0.55));
+      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+      mask-composite: exclude;
+      pointer-events: none;
+      opacity: 0.75;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -65%;
+      width: 45%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.16), transparent);
+      transform: skewX(-18deg);
+      animation: cardGlint 7s ease-in-out infinite;
+      pointer-events: none;
+    }
+
+    &:hover {
+      transform: translateY(-0.02rem);
+      border-color: rgba(0, 212, 255, 0.42);
+      box-shadow:
+        inset 0 0 0.28rem rgba(0, 212, 255, 0.13),
+        0 0.12rem 0.32rem rgba(0, 0, 0, 0.34),
+        0 0 0.22rem rgba(0, 212, 255, 0.18);
+    }
+  }
+
+  .container .module-header {
+    position: relative;
+    min-height: 0.32rem;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: -0.06rem;
+      height: 1px;
+      background: linear-gradient(90deg, rgba(0, 212, 255, 0.8), rgba(59, 130, 246, 0.2), transparent);
+      box-shadow: 0 0 0.12rem rgba(0, 212, 255, 0.55);
+    }
+  }
+
+  .container .module-title {
+    color: #eefaff;
+    letter-spacing: 0.02rem;
+    text-shadow: 0 0 0.12rem rgba(0, 212, 255, 0.55);
+  }
+
+  .container .title-icon {
+    position: relative;
+    width: 0.08rem;
+    height: 0.26rem;
+    background: linear-gradient(180deg, #f59e0b 0%, #00e5ff 45%, #2563eb 100%);
+    box-shadow: 0 0 0.12rem rgba(0, 212, 255, 0.9);
+    animation: iconPulse 1.8s ease-in-out infinite;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0.13rem;
+      top: 50%;
+      width: 0.42rem;
+      height: 1px;
+      background: linear-gradient(90deg, rgba(0, 212, 255, 0.9), transparent);
+      transform: translateY(-50%);
+    }
+  }
+
+  .container .center .title {
+    position: relative;
+    color: #f7fdff;
+    letter-spacing: 0.08rem;
+    text-shadow:
+      0 0 0.1rem rgba(0, 212, 255, 0.8),
+      0 0 0.28rem rgba(37, 99, 235, 0.65),
+      0 0 0.44rem rgba(245, 158, 11, 0.2);
+    animation: titleGlow 3s ease-in-out infinite;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      width: 1.72rem;
+      height: 0.14rem;
+      border-top: 1px solid rgba(0, 212, 255, 0.75);
+      border-bottom: 1px solid rgba(245, 158, 11, 0.35);
+      transform: translateY(-50%);
+      box-shadow: 0 0 0.12rem rgba(0, 212, 255, 0.45);
+    }
+
+    &::before {
+      left: 0.34rem;
+      clip-path: polygon(0 50%, 12% 0, 100% 0, 88% 100%, 12% 100%);
+    }
+
+    &::after {
+      right: 0.34rem;
+      clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 12% 50%);
+    }
+  }
+
+  .container .center .top2 {
+    position: relative;
+    margin: 0 0.16rem;
+    border: 1px solid rgba(0, 212, 255, 0.18);
+    border-radius: 0.16rem;
+    overflow: hidden;
+    background:
+      linear-gradient(135deg, rgba(0, 212, 255, 0.1), transparent 25% 75%, rgba(245, 158, 11, 0.08)),
+      rgba(2, 8, 23, 0.24);
+    box-shadow:
+      inset 0 0 0.4rem rgba(0, 212, 255, 0.08),
+      0 0 0.36rem rgba(0, 0, 0, 0.26),
+      0 0 0.26rem rgba(0, 212, 255, 0.08);
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      pointer-events: none;
+    }
+
+    &::before {
+      background:
+        radial-gradient(circle at 50% 52%, transparent 0 34%, rgba(0, 212, 255, 0.11) 35%, transparent 37%),
+        radial-gradient(circle at 50% 52%, transparent 0 48%, rgba(245, 158, 11, 0.08) 49%, transparent 51%),
+        linear-gradient(90deg, rgba(0, 212, 255, 0.1), transparent 18% 82%, rgba(0, 212, 255, 0.1));
+      animation: radarBreath 4.5s ease-in-out infinite;
+    }
+
+    &::after {
+      background:
+        linear-gradient(90deg, transparent 0 49.7%, rgba(0, 212, 255, 0.1) 50%, transparent 50.3%),
+        linear-gradient(0deg, transparent 0 49.7%, rgba(0, 212, 255, 0.08) 50%, transparent 50.3%);
+      opacity: 0.46;
+      mix-blend-mode: screen;
+    }
+  }
+
+  .container .center .bottom {
+    position: relative;
+    margin: 0.14rem 0.16rem 0;
+    border: 1px solid rgba(0, 212, 255, 0.18);
+    border-radius: 0.12rem;
+    background:
+      linear-gradient(180deg, rgba(15, 23, 42, 0.44), rgba(2, 6, 23, 0.18)),
+      url('@/assets/img/largeScreen2/center-10.png') no-repeat center / 100% 100%;
+    box-shadow: inset 0 0 0.3rem rgba(0, 212, 255, 0.08);
+    overflow: hidden;
+
+    &::before {
+      content: 'ALARM MONITOR';
+      position: absolute;
+      top: 0.13rem;
+      left: 0.32rem;
+      color: rgba(0, 212, 255, 0.58);
+      font-size: 0.12rem;
+      letter-spacing: 0.06rem;
+      text-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.7);
+    }
+  }
+
+  .container .card {
+    background:
+      radial-gradient(circle at 50% 46%, rgba(0, 212, 255, 0.08), transparent 40%),
+      rgba(2, 8, 23, 0.18);
+  }
+
+  .container .map-control {
+    top: 0.24rem;
+    left: 0.22rem;
+    min-width: 1.74rem;
+    padding: 0.16rem;
+    overflow: hidden;
+    border: 1px solid rgba(0, 212, 255, 0.38);
+    border-radius: 0.14rem;
+    background:
+      linear-gradient(135deg, rgba(8, 47, 73, 0.9), rgba(15, 23, 42, 0.76)),
+      repeating-linear-gradient(90deg, transparent 0 0.16rem, rgba(0, 212, 255, 0.05) 0.17rem 0.18rem);
+    box-shadow:
+      inset 0 0 0.2rem rgba(0, 212, 255, 0.14),
+      0 0 0.28rem rgba(0, 212, 255, 0.2),
+      0 0.1rem 0.24rem rgba(0, 0, 0, 0.28);
+    backdrop-filter: blur(8px);
+  }
+
+  .container .map-control::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -70%;
+    width: 58%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
+    transform: skewX(-20deg);
+    animation: controlGlint 5.8s ease-in-out infinite;
+    pointer-events: none;
+  }
+
+  .container .control-title {
+    color: #89ddff;
+    font-size: 0.13rem;
+    letter-spacing: 0.02rem;
+  }
+
+  .container .control-value {
+    color: #f7fbff;
+    font-family: DIN Alternate, Bahnschrift, Arial, sans-serif;
+    font-size: 0.34rem;
+    text-shadow: 0 0 0.16rem rgba(0, 212, 255, 0.9);
+    animation: numberPulse 2.4s ease-in-out infinite;
+  }
+
+  .container .control-top {
+    margin-bottom: 0.14rem;
+    padding-bottom: 0.14rem;
+    border-bottom-color: rgba(0, 212, 255, 0.28);
+  }
+
+  .container .status-list {
+    gap: 0.08rem;
+  }
+
+  .container .status-item {
+    justify-content: space-between;
+    gap: 0.08rem;
+    padding: 0.04rem 0.06rem;
+    border-radius: 0.06rem;
+    background: rgba(2, 8, 23, 0.28);
+  }
+
+  .container .status-item span {
+    flex: 1;
+  }
+
+  .container .status-item strong {
+    color: #f7fbff;
+    font-family: DIN Alternate, Bahnschrift, Arial, sans-serif;
+    font-size: 0.16rem;
+    text-shadow: 0 0 0.1rem rgba(0, 212, 255, 0.55);
+  }
+
+  .container .device-item,
+  .container .alert-item {
+    position: relative;
+    padding: 0.05rem 0.08rem;
+    border-radius: 0.04rem;
+    background: linear-gradient(90deg, rgba(0, 212, 255, 0.08), transparent);
+    border-left: 1px solid rgba(0, 212, 255, 0.22);
+    transition: transform 0.25s ease, background 0.25s ease;
+
+    &:hover {
+      transform: translateX(0.04rem);
+      background: linear-gradient(90deg, rgba(0, 212, 255, 0.16), rgba(245, 158, 11, 0.06), transparent);
+    }
+  }
+
+  .container .device-dot,
+  .container .alert-dot,
+  .container .status-dot {
+    box-shadow: 0 0 0.1rem currentColor;
+    animation: dotBreath 2s ease-in-out infinite;
+  }
+
+  .container .device-name,
+  .container .alert-name,
+  .container .status-item,
+  .container .cell {
+    text-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.18);
+  }
+
+  .container .device-count,
+  .container .alert-count,
+  .container .device-percent,
+  .container .alert-percent {
+    font-family: DIN Alternate, Bahnschrift, Arial, sans-serif;
+    text-shadow: 0 0 0.1rem rgba(0, 212, 255, 0.45);
+  }
+
+  .container .el-table {
+    --el-table-row-hover-bg-color: rgba(0, 212, 255, 0.1) !important;
+    --el-table-header-bg-color: rgba(0, 212, 255, 0.08) !important;
+    --el-table-header-text-color: #9beafe !important;
+    --el-table-text-color: #e6f8ff !important;
+
+    .el-table__header-wrapper th,
+    .el-table__header-wrapper .el-table__cell {
+      background: linear-gradient(180deg, rgba(0, 212, 255, 0.14), rgba(15, 23, 42, 0.08)) !important;
+      color: #9beafe !important;
+      font-weight: bold;
+      letter-spacing: 0.02rem;
+      text-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.5);
+    }
+
+    .el-table__row {
+      transition: background 0.25s ease, transform 0.25s ease;
+    }
+
+    .el-table__row:hover {
+      transform: translateX(0.02rem);
+    }
+
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+
+    .el-table__body-wrapper::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background: linear-gradient(180deg, #00d4ff, #2563eb);
+      box-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.8);
+    }
+  }
+
+  .power-map-marker {
+    position: relative;
+    width: 34px;
+    height: 42px;
+    color: var(--marker-color);
+    animation: markerFloat 2.4s ease-in-out infinite;
+    filter: drop-shadow(0 0 10px var(--marker-color));
+  }
+
+  .marker-core {
+    position: absolute;
+    left: 50%;
+    top: 8px;
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(255, 255, 255, 0.88);
+    border-radius: 50%;
+    background: radial-gradient(circle, #ffffff 0 16%, var(--marker-color) 28% 100%);
+    box-shadow:
+      0 0 10px var(--marker-color),
+      0 0 22px var(--marker-color);
+    transform: translateX(-50%);
+  }
+
+  .marker-core::after {
+    content: '';
+    position: absolute;
+    inset: 3px;
+    border-radius: inherit;
+    border: 1px solid rgba(2, 8, 23, 0.6);
+  }
+
+  .marker-ripple {
+    position: absolute;
+    left: 50%;
+    bottom: 5px;
+    width: 28px;
+    height: 10px;
+    border: 1px solid currentColor;
+    border-radius: 50%;
+    transform: translateX(-50%);
+    animation: markerRipple 1.8s ease-out infinite;
+  }
+
+  .marker-pin {
+    position: absolute;
+    left: 50%;
+    bottom: 5px;
+    width: 2px;
+    height: 22px;
+    background: linear-gradient(180deg, var(--marker-color), transparent);
+    box-shadow: 0 0 10px var(--marker-color);
+    transform: translateX(-50%);
+  }
+
+  .power-map-marker.alarm {
+    animation: markerFloat 2.4s ease-in-out infinite, alarmBlink 1s ease-in-out infinite;
+  }
+
+  .power-map-info {
+    min-width: 190px;
+    overflow: hidden;
+    color: #e9fbff;
+    border: 1px solid var(--status-color);
+    border-radius: 10px;
+    background:
+      linear-gradient(135deg, rgba(8, 47, 73, 0.94), rgba(2, 8, 23, 0.92)),
+      repeating-linear-gradient(90deg, transparent 0 16px, rgba(0, 212, 255, 0.05) 17px 18px);
+    box-shadow:
+      inset 0 0 22px rgba(0, 212, 255, 0.12),
+      0 0 18px var(--status-color),
+      0 12px 26px rgba(0, 0, 0, 0.36);
+    backdrop-filter: blur(8px);
+  }
+
+  .power-map-info__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 9px 12px;
+    color: var(--status-color);
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 2px;
+    background: rgba(0, 212, 255, 0.08);
+    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+  }
+
+  .power-map-info__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--status-color);
+    box-shadow: 0 0 10px var(--status-color);
+  }
+
+  .power-map-info__body {
+    padding: 10px 12px 12px;
+  }
+
+  .power-map-info__label {
+    margin-bottom: 4px;
+    color: rgba(137, 221, 255, 0.74);
+    font-size: 12px;
+  }
+
+  .power-map-info__address {
+    max-width: 260px;
+    color: #ffffff;
+    font-size: 13px;
+    line-height: 1.5;
+    text-shadow: 0 0 8px rgba(0, 212, 255, 0.28);
+  }
+
+  @keyframes energySweep {
+    0%, 100% {
+      opacity: 0.45;
+      transform: translateX(-3%);
+    }
+    50% {
+      opacity: 1;
+      transform: translateX(3%);
+    }
+  }
+
+  @keyframes gridDrift {
+    from {
+      background-position: 0 0, 0 0;
+    }
+    to {
+      background-position: 0.42rem 0.42rem, 0.42rem 0.42rem;
+    }
+  }
+
+  @keyframes gridPulse {
+    0%, 100% {
+      opacity: 0.24;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes scanLine {
+    0% {
+      transform: translateY(-110%);
+      opacity: 0;
+    }
+    12%, 72% {
+      opacity: 1;
+    }
+    100% {
+      transform: translateY(110%);
+      opacity: 0;
+    }
+  }
+
+  @keyframes sideEnergy {
+    0%, 100% {
+      opacity: 0.45;
+      filter: hue-rotate(0deg);
+    }
+    50% {
+      opacity: 1;
+      filter: hue-rotate(45deg);
+    }
+  }
+
+  @keyframes cardGlint {
+    0%, 62% {
+      left: -65%;
+      opacity: 0;
+    }
+    72% {
+      opacity: 1;
+    }
+    100% {
+      left: 120%;
+      opacity: 0;
+    }
+  }
+
+  @keyframes iconPulse {
+    0%, 100% {
+      box-shadow: 0 0 0.08rem rgba(0, 212, 255, 0.65);
+    }
+    50% {
+      box-shadow: 0 0 0.2rem rgba(0, 212, 255, 1);
+    }
+  }
+
+  @keyframes titleGlow {
+    0%, 100% {
+      filter: brightness(1);
+    }
+    50% {
+      filter: brightness(1.25);
+    }
+  }
+
+  @keyframes radarBreath {
+    0%, 100% {
+      opacity: 0.38;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.82;
+      transform: scale(1.015);
+    }
+  }
+
+  @keyframes numberPulse {
+    0%, 100% {
+      transform: translateZ(0) scale(1);
+    }
+    50% {
+      transform: translateZ(0) scale(1.04);
+    }
+  }
+
+  @keyframes dotBreath {
+    0%, 100% {
+      filter: brightness(1);
+    }
+    50% {
+      filter: brightness(1.55);
+    }
+  }
+
+  @keyframes markerFloat {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-3px);
+    }
+  }
+
+  @keyframes markerRipple {
+    0% {
+      opacity: 0.8;
+      transform: translateX(-50%) scale(0.75);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(-50%) scale(2.2);
+    }
+  }
+
+  @keyframes radarRotate {
+    0% {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+      transform: translate(-50%, -50%) rotate(360deg);
+    }
+  }
+
+  @keyframes controlGlint {
+    0%, 58% {
+      left: -70%;
+      opacity: 0;
+    }
+    68% {
+      opacity: 1;
+    }
+    100% {
+      left: 125%;
+      opacity: 0;
+    }
+  }
+
+  @keyframes alarmBlink {
+    0%, 100% {
+      filter: drop-shadow(0 0 8px #ff4d6d);
+    }
+    50% {
+      filter: drop-shadow(0 0 18px #ff4d6d);
+    }
+  }
 </style>