From 9db011cca62d04d0e1bbe7faa0ea4ba22becab9b Mon Sep 17 00:00:00 2001
From: "han\\hanst" <songtao.han@xujiesoft.com>
Date: Wed, 19 Nov 2025 09:29:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=82=E5=B8=B8=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/dashboard/exception-board.vue     | 1366 ++++++++++-------
 1 file changed, 846 insertions(+), 520 deletions(-)

diff --git a/src/views/modules/dashboard/exception-board.vue b/src/views/modules/dashboard/exception-board.vue
index 75c63d4..38d03a6 100644
--- a/src/views/modules/dashboard/exception-board.vue
+++ b/src/views/modules/dashboard/exception-board.vue
@@ -18,14 +18,25 @@
 
       <div class="header-decoration left"></div>
       <div class="header-center">
-        <div class="title-glow"></div>
-        <h1 class="screen-title">异常处理区实时看板</h1>
-        <div class="title-subtitle">Exception Handling Area Real-time Dashboard</div>
+        <div class="title-glow" :class="{ 'has-exception': exceptionList.length > 0 }"></div>
+        <h1 class="screen-title" :class="{ 'has-exception': exceptionList.length > 0 }">异常处理区看板</h1>
+        <div class="title-subtitle">Exception Handling Area Dashboard</div>
       </div>
       <div class="header-decoration right"></div>
-      <div class="header-time">
-        <div class="time-icon"></div>
-        <div class="time-text">{{ currentTime }}</div>
+
+      <!-- 3D旋转警示灯 - 有异常时红色旋转，无异常时绿色稳定 -->
+      <div class="alert-warning-light" :class="{ 'status-error': exceptionList.length > 0, 'status-normal': exceptionList.length === 0 }">
+        <div class="warning-lamp">
+          <!-- 灯罩 -->
+          <div class="lamp-dome">
+            <div class="dome-highlight"></div>
+            <div class="dome-reflection"></div>
+          </div>
+          <!-- 旋转光束 -->
+          <div class="lamp-beam"></div>
+          <!-- 灯体中心光源 -->
+          <div class="lamp-core"></div>
+        </div>
       </div>
     </div>
 
@@ -42,6 +53,9 @@
               <span class="title-count">当前异常：<strong>{{ exceptionList.length }}</strong> 条</span>
             </div>
           </div>
+          <div class="title-right">
+            <span class="update-time">更新时间：{{ updateTime }}</span>
+          </div>
         </div>
 
         <!-- 数据表格 -->
@@ -52,12 +66,9 @@
                 <th style="width: 60px;">No.</th>
                 <th style="width: 150px;">异常类型</th>
                 <th style="width: 120px;">托盘码</th>
-                <th style="width: 120px;">位置</th>
-                <th style="width: 180px;">物料名称</th>
-                <th style="width: 100px;">数量</th>
-                <th style="width: 250px;">异常描述</th>
-                <th style="width: 150px;">发生时间</th>
-                <th style="width: 150px;">处理状态</th>
+                <th style="width: 320px;">异常描述</th>
+                <th style="width: 280px;">多盘标签</th>
+                <th style="width: 280px;">少盘标签</th>
               </tr>
             </thead>
             <tbody>
@@ -69,15 +80,32 @@
                   </span>
                 </td>
                 <td class="text-center">{{ item.palletCode }}</td>
-                <td class="text-center">{{ item.location }}</td>
-                <td class="text-left">{{ item.materialName || '-' }}</td>
-                <td class="text-right">{{ item.quantity || '-' }}</td>
                 <td class="text-left exception-desc">{{ item.description }}</td>
-                <td class="text-center">{{ item.occurTime }}</td>
-                <td class="text-center">
-                  <span :class="['status-badge', getStatusClass(item.status)]">
-                    {{ item.status }}
-                  </span>
+                <td class="text-left tags-cell">
+                  <div v-if="parseTagsArray(item.moreTags).length > 0" class="tags-container">
+                    <div v-for="(tag, tagIdx) in parseTagsArray(item.moreTags)" :key="tagIdx" class="tag-item">
+                      {{ tag }}
+                    </div>
+                  </div>
+                  <span v-else>-</span>
+                </td>
+                <td class="text-left tags-cell">
+                  <div v-if="parseTagsArray(item.lessTags).length > 0" class="tags-container">
+                    <div v-for="(tag, tagIdx) in parseTagsArray(item.lessTags)" :key="tagIdx" class="tag-item">
+                      {{ tag }}
+                    </div>
+                  </div>
+                  <span v-else>-</span>
+                </td>
+              </tr>
+
+              <!-- 空数据提示 -->
+              <tr v-if="exceptionList.length === 0" class="empty-row">
+                <td colspan="9" class="text-center">
+                  <div class="empty-state">
+                    <i class="el-icon-success"></i>
+                    <p>暂无异常数据</p>
+                  </div>
                 </td>
               </tr>
             </tbody>
@@ -94,537 +122,828 @@
 </template>
 
 <script>
-import {exceptionBoard} from '@/api/dashboard/dashboard.js'
+import WebSocketClient from '@/utils/websocket'
 
 export default {
   name: 'ExceptionBoard',
 
   data() {
     return {
-      currentTime: '',
-      timeInterval: null,
-      dataInterval: null,
+      serverTimeOffset: 0,  // 服务器时间偏移量（毫秒）
+
+      // WebSocket相关
+      useWebSocket: true,    // 是否使用WebSocket
+      wsConnected: false,    // WebSocket连接状态
+      wsSubscription: null,  // WebSocket订阅ID
 
       // 异常处理区数据
-      exceptionList: [
-        {
-          exceptionType: 'RFID复合NG',
-          palletCode: 'P00001',
-          location: '2-1',
-          materialName: '80501238',
-          quantity: '5000',
-          description: 'RFID复合数量不符：实际500，应为5000',
-          occurTime: '2025-01-21 14:25:30',
-          status: '待处理'
-        },
-        {
-          exceptionType: '外形检测NG',
-          palletCode: 'P00002',
-          location: '3-2',
-          materialName: '80501240',
-          quantity: '1000',
-          description: '外形尺寸超出允许范围',
-          occurTime: '2025-01-21 14:20:15',
-          status: '处理中'
-        },
-        {
-          exceptionType: '偏载报警',
-          palletCode: 'W00015',
-          location: 'SC001',
-          materialName: '80451239',
-          quantity: '2000',
-          description: '托盘重心偏移超过安全阈值',
-          occurTime: '2025-01-21 14:15:42',
-          status: '待处理'
-        },
-        {
-          exceptionType: 'AGV异常',
-          palletCode: 'G00013',
-          location: 'HC09',
-          materialName: '70000235',
-          quantity: '500',
-          description: 'AGV电量不足，无法完成任务',
-          occurTime: '2025-01-21 14:10:28',
-          status: '已处理'
-        },
-        {
-          exceptionType: '库存差异',
-          palletCode: 'P00011',
-          location: 'HC01',
-          materialName: '80542546',
-          quantity: '3000',
-          description: '系统库存与实际库存不一致',
-          occurTime: '2025-01-21 13:55:10',
-          status: '处理中'
-        },
-        {
-          exceptionType: '质量异常',
-          palletCode: 'W00018',
-          location: 'FQ02',
-          materialName: '80451242',
-          quantity: '1500',
-          description: '质检发现产品质量不合格',
-          occurTime: '2025-01-21 13:45:20',
-          status: '待处理'
-        },
-        {
-          exceptionType: '超时报警',
-          palletCode: 'G00014',
-          location: 'YC02',
-          materialName: '70004562',
-          quantity: '1000',
-          description: '入库等待时间超过2小时',
-          occurTime: '2025-01-21 13:30:05',
-          status: '已处理'
-        },
-        {
-          exceptionType: '托盘损坏',
-          palletCode: 'P00013',
-          location: 'CP03',
-          materialName: '',
-          quantity: '',
-          description: '托盘表面破损，需要更换',
-          occurTime: '2025-01-21 13:20:18',
-          status: '处理中'
-        },
-        {
-          exceptionType: '超时报警',
-          palletCode: 'G00014',
-          location: 'YC02',
-          materialName: '70004562',
-          quantity: '1000',
-          description: '入库等待时间超过2小时',
-          occurTime: '2025-01-21 13:30:05',
-          status: '已处理'
-        },
-        {
-          exceptionType: '托盘损坏',
-          palletCode: 'P00013',
-          location: 'CP03',
-          materialName: '',
-          quantity: '',
-          description: '托盘表面破损，需要更换',
-          occurTime: '2025-01-21 13:20:18',
-          status: '处理中'
-        },
-        {
-          exceptionType: '超时报警',
-          palletCode: 'G00014',
-          location: 'YC02',
-          materialName: '70004562',
-          quantity: '1000',
-          description: '入库等待时间超过2小时',
-          occurTime: '2025-01-21 13:30:05',
-          status: '已处理'
-        },
-        {
-          exceptionType: '托盘损坏',
-          palletCode: 'P00013',
-          location: 'CP03',
-          materialName: '',
-          quantity: '',
-          description: '托盘表面破损，需要更换',
-          occurTime: '2025-01-21 13:20:18',
-          status: '处理中'
-        },
-        {
-          exceptionType: '超时报警',
-          palletCode: 'G00014',
-          location: 'YC02',
-          materialName: '70004562',
-          quantity: '1000',
-          description: '入库等待时间超过2小时',
-          occurTime: '2025-01-21 13:30:05',
-          status: '已处理'
-        },
-        {
-          exceptionType: '托盘损坏',
-          palletCode: 'P00013',
-          location: 'CP03',
-          materialName: '',
-          quantity: '',
-          description: '托盘表面破损，需要更换',
-          occurTime: '2025-01-21 13:20:18',
-          status: '处理中'
-        },
-        {
-          exceptionType: '超时报警',
-          palletCode: 'G00014',
-          location: 'YC02',
-          materialName: '70004562',
-          quantity: '1000',
-          description: '入库等待时间超过2小时',
-          occurTime: '2025-01-21 13:30:05',
-          status: '已处理'
-        },
-        {
-          exceptionType: '托盘损坏',
-          palletCode: 'P00013',
-          location: 'CP03',
-          materialName: '',
-          quantity: '',
-          description: '托盘表面破损，需要更换',
-          occurTime: '2025-01-21 13:20:18',
-          status: '处理中'
-        },
-        {
-          exceptionType: '超时报警',
-          palletCode: 'G00014',
-          location: 'YC02',
-          materialName: '70004562',
-          quantity: '1000',
-          description: '入库等待时间超过2小时',
-          occurTime: '2025-01-21 13:30:05',
-          status: '已处理'
-        },
-        {
-          exceptionType: '托盘损坏',
-          palletCode: 'P00013',
-          location: 'CP03',
-          materialName: '',
-          quantity: '',
-          description: '托盘表面破损，需要更换',
-          occurTime: '2025-01-21 13:20:18',
-          status: '处理中'
-        }
-      ]
+      exceptionList: [],
+      updateTime: '--'
     }
   },
 
   mounted() {
-    // 时间由HTTP API响应自动更新，不再使用定时器
-    this.currentTime = '等待服务器时间同步...'
-
-    // 首次加载数据
-    this.getDataList()
-
-    // 每10秒刷新一次数据
-    this.dataInterval = setInterval(() => {
-      this.getDataList()
-    }, 10000)
+    // 根据配置选择使用WebSocket或本地数据
+    if (this.useWebSocket) {
+      this.initWebSocket()
+    }
   },
 
   beforeDestroy() {
-    if (this.dataInterval) {
-      clearInterval(this.dataInterval)
-    }
+    // 断开WebSocket连接
+    this.disconnectWebSocket()
   },
 
   methods: {
     /**
-     * 获取数据列表
+     * 更新服务器时间偏移量
      */
-    getDataList() {
-      exceptionBoard({}).then(({data}) => {
-        if (data && data.code === 200) {
-          console.log('获取异常处理区数据成功:', data.data)
-          
-          // 更新服务器时间
-          if (data.serverTime) {
-            this.currentTime = data.serverTime
-          }
-          
-          // TODO: 处理返回的数据，覆盖而非追加，避免内存累积
-          // if (data.data) {
-          //   this.exceptionList = data.data.exceptionList || []
-          // }
+    updateServerTimeOffset(serverTimeString) {
+      try {
+        const timeStr = serverTimeString.split(' ')[0] + ' ' + serverTimeString.split(' ')[1]
+        const serverTime = new Date(timeStr).getTime()
+        const localTime = new Date().getTime()
+
+        if (!isNaN(serverTime)) {
+          this.serverTimeOffset = serverTime - localTime
         }
-      }).catch(error => {
-        console.error('获取异常处理区数据失败:', error)
-      })
+      } catch (error) {
+        console.warn('[异常看板] 解析服务器时间失败:', error)
+      }
     },
 
+
     /**
-     * 更新当前时间
+     * 初始化WebSocket连接
      */
-    updateTime() {
-      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')
-      const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
-      const weekDay = weekDays[now.getDay()]
-
-      this.currentTime = `${year}-${month}-${day} ${weekDay} ${hours}:${minutes}:${seconds}`
+    initWebSocket() {
+      var apiServer = (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl);
+      // 连接WebSocket服务器
+      const wsUrl = apiServer + '/ws/dashboard'
+
+      WebSocketClient.connect(
+        wsUrl,
+        () => {
+          this.wsConnected = true
+          console.log('[异常看板] WebSocket连接成功')
+
+          // 订阅异常看板主题
+          this.wsSubscription = WebSocketClient.subscribe(
+            '/topic/dashboard/exception-board',
+            this.handleWebSocketMessage
+          )
+          console.log('[异常看板] 已订阅主题: /topic/dashboard/exception-board')
+        },
+        (error) => {
+          // 连接失败回调
+          console.error('[异常看板] WebSocket连接失败', error)
+          this.wsConnected = false
+        }
+      )
     },
 
     /**
-     * 根据异常类型获取样式类名
+     * 处理WebSocket推送的消息
+     *
+     * @param {object} message WebSocket推送的消息
      */
-    getExceptionTypeClass(type) {
-      const typeMap = {
-        'RFID复合NG': 'type-error',
-        '外形检测NG': 'type-error',
-        '偏载报警': 'type-warning',
-        'AGV异常': 'type-warning',
-        '库存差异': 'type-info',
-        '质量异常': 'type-error',
-        '超时报警': 'type-warning',
-        '托盘损坏': 'type-danger'
-      }
-      return typeMap[type] || 'type-info'
+    handleWebSocketMessage(message) {
+      if (message && message.code === 0) {
+        console.log('[异常看板] 收到WebSocket推送数据:', message.data)
+
+        // 更新服务器时间偏移量
+        if (message.serverTime) {
+          this.updateServerTimeOffset(message.serverTime)
+        }
+
+        // 更新异常列表数据
+        if (message.data.exceptionList !== undefined) {
+          this.exceptionList = message.data.exceptionList || []
+          this.updateTime = message.data.updateTime || '--'
+          console.log('[异常看板] 数据已更新，异常数:', this.exceptionList.length)
+        }
+      }
     },
 
     /**
-     * 根据状态获取样式类名
+     * 断开WebSocket连接
      */
-    getStatusClass(status) {
-      const statusMap = {
-        '待处理': 'status-danger',
-        '处理中': 'status-warning',
-        '已处理': 'status-success'
+    disconnectWebSocket() {
+      if (this.wsSubscription) {
+        WebSocketClient.unsubscribe(this.wsSubscription)
+        this.wsSubscription = null
+        console.log('[异常看板] 已取消订阅')
+      }
+
+      if (this.wsConnected) {
+        WebSocketClient.disconnect()
+        this.wsConnected = false
+        console.log('[异常看板] WebSocket已断开')
+      }
+    },
+
+    /**
+     * 解析标签数组
+     * 将JSON字符串格式的标签数组解析为数组
+     * 例如：'["A552025110400001132","A552025110400001298"]' => ["A552025110400001132", "A552025110400001298"]
+     *
+     * @param {string} tagsStr 标签字符串
+     * @returns {array} 标签数组
+     */
+    parseTagsArray(tagsStr) {
+      if (!tagsStr || tagsStr === '-' || tagsStr === '[]') {
+        return []
+      }
+
+      try {
+        // 如果是JSON字符串，解析它
+        if (typeof tagsStr === 'string' && tagsStr.startsWith('[')) {
+          const tags = JSON.parse(tagsStr)
+          return Array.isArray(tags) ? tags : []
+        }
+        // 如果已经是数组，直接返回
+        if (Array.isArray(tagsStr)) {
+          return tagsStr
+        }
+        return []
+      } catch (error) {
+        console.error('[异常看板] 解析标签失败:', error)
+        return []
       }
-      return statusMap[status] || 'status-pending'
     },
 
     /**
-     * 根据异常类型获取行样式
+     * 根据异常类型获取行样式类
      */
-    getRowClass(type) {
-      if (type.includes('NG') || type === '质量异常') {
-        return 'row-critical'
-      } else if (type.includes('报警')) {
+    getRowClass(exceptionType) {
+      if (!exceptionType) return ''
+
+      const type = exceptionType.toLowerCase()
+      if (type.includes('数据对比') || type.includes('多盘') || type.includes('少盘')) {
+        return 'row-error'
+      } else if (type.includes('超时') || type.includes('偏载')) {
         return 'row-warning'
+      } else if (type.includes('质量') || type.includes('检测')) {
+        return 'row-info'
       }
       return ''
+    },
+
+    /**
+     * 根据异常类型获取标签样式类
+     */
+    getExceptionTypeClass(exceptionType) {
+      if (!exceptionType) return 'badge-default'
+
+      const type = exceptionType.toLowerCase()
+      if (type.includes('数据对比') || type.includes('多盘') || type.includes('少盘')) {
+        return 'badge-error'
+      } else if (type.includes('超时') || type.includes('偏载')) {
+        return 'badge-warning'
+      } else if (type.includes('质量') || type.includes('检测')) {
+        return 'badge-info'
+      }
+      return 'badge-default'
+    },
+
+    /**
+     * 根据处理状态获取样式类
+     */
+    getStatusClass(status) {
+      if (!status) return 'status-default'
+
+      if (status === '待处理') {
+        return 'status-pending'
+      } else if (status === '处理中') {
+        return 'status-processing'
+      } else if (status === '已处理') {
+        return 'status-completed'
+      }
+      return 'status-default'
     }
   }
 }
 </script>
 
-<style scoped lang="scss">
-/* ===== 整体容器 ===== */
+<style lang="scss" scoped>
+/* ========== 全屏容器样式 ========== */
 .picking-board-screen {
   width: 100vw;
   height: 100vh;
-  background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
+  background: linear-gradient(135deg, #1a2f4a 0%, #2a4060 50%, #1f3a56 100%);
   position: relative;
   overflow: hidden;
-  font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
+  font-family: 'Microsoft YaHei', 'Arial', sans-serif;
+  transition: background 0.5s ease;
+
+  /* 有异常时的红色告警背景 */
+  &.has-exception {
+    background: linear-gradient(135deg, #4a1a1a 0%, #602a2a 50%, #561f1f 100%);
+    animation: alertPulse 2s ease-in-out infinite;
+  }
 }
 
-/* ===== 装饰背景 ===== */
+/* 告警脉动动画 */
+@keyframes alertPulse {
+  0%, 100% {
+    background: linear-gradient(135deg, #4a1a1a 0%, #602a2a 50%, #561f1f 100%);
+  }
+  50% {
+    background: linear-gradient(135deg, #5a2020 0%, #703030 50%, #662525 100%);
+  }
+}
+
+/* ========== 装饰背景 ========== */
 .bg-decoration {
-  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  opacity: 0.15;
+  z-index: 0;
+
+  .decoration-line {
+    position: absolute;
+    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
+    height: 2px;
+
+    &.line-1 {
+      top: 20%;
+      left: 0;
+      right: 0;
+      animation: moveLine 15s linear infinite;
+    }
+
+    &.line-2 {
+      top: 50%;
+      left: 0;
+      right: 0;
+      animation: moveLine 20s linear infinite reverse;
+    }
+
+    &.line-3 {
+      top: 80%;
+      left: 0;
+      right: 0;
+      animation: moveLine 18s linear infinite;
+    }
+  }
+
+  .decoration-circle {
+    position: absolute;
+    border: 2px solid rgba(0, 212, 255, 0.3);
+    border-radius: 50%;
+
+    &.circle-1 {
+      top: 10%;
+      left: 10%;
+      width: 200px;
+      height: 200px;
+      animation: pulse 3s ease-in-out infinite;
+    }
+
+    &.circle-2 {
+      bottom: 10%;
+      right: 10%;
+      width: 150px;
+      height: 150px;
+      animation: pulse 4s ease-in-out infinite;
+    }
+  }
+}
+
+@keyframes moveLine {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
 }
 
-/* ===== 顶部标题区 ===== */
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.6;
+  }
+}
+
+/* ========== 顶部标题栏 ========== */
 .screen-header {
   position: relative;
-  height: 60px;
+  height: 80px;
+  background: linear-gradient(180deg, rgba(20, 50, 80, 0.9) 0%, rgba(15, 40, 65, 0.8) 100%);
+  border-bottom: 2px solid rgba(0, 212, 255, 0.5);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   padding: 0 40px;
   z-index: 10;
-  border-bottom: 2px solid rgba(23, 179, 163, 0.4);
-  background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
-}
 
-/* CCL Logo */
-.header-logo {
-  position: absolute;
-  left: 20px;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 20;
-}
+  .header-logo {
+    position: absolute;
+    left: 40px;
+    top: 50%;
+    transform: translateY(-50%);
 
-.logo-img {
-  height: 40px;
-  width: auto;
-  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
-  transition: all 0.3s ease;
+    .logo-img {
+      height: 50px;
+      width: auto;
+      object-fit: contain;
+    }
+  }
 
-  &:hover {
-    filter: drop-shadow(0 4px 12px rgba(23, 179, 163, 0.5));
-    transform: scale(1.05);
+  .header-decoration {
+    width: 80px;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
+
+    &.left {
+      margin-left: 180px;
+    }
+
+    &.right {
+      margin-right: 20px;
+    }
   }
-}
 
-.header-decoration {
-  display: none;
-}
+  .header-center {
+    flex: 1;
+    text-align: center;
+    position: relative;
+
+    .title-glow {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 500px;
+      height: 60px;
+      background: radial-gradient(ellipse, rgba(0, 212, 255, 0.2), transparent);
+      filter: blur(20px);
+      transition: background 0.5s ease;
+
+      /* 有异常时的红色发光 */
+      &.has-exception {
+        background: radial-gradient(ellipse, rgba(239, 68, 68, 0.4), transparent);
+        animation: glowPulse 2s ease-in-out infinite;
+      }
+    }
 
-.header-center {
-  position: relative;
-  text-align: center;
-}
+    .screen-title {
+      font-size: 26px;
+      font-weight: bold;
+      color: #ffffff;
+      text-shadow: 0 0 20px rgba(0, 212, 255, 0.8),
+                   0 0 40px rgba(0, 212, 255, 0.4);
+      margin: 0 0 4px 0;
+      letter-spacing: 4px;
+      position: relative;
+      z-index: 1;
+      transition: color 0.5s ease, text-shadow 0.5s ease;
+
+      /* 有异常时的红色告警标题 */
+      &.has-exception {
+        color: #ff4444;
+        text-shadow: 0 0 20px rgba(239, 68, 68, 0.8),
+                     0 0 40px rgba(239, 68, 68, 0.6),
+                     0 0 60px rgba(239, 68, 68, 0.4);
+        animation: titleBlink 1.5s ease-in-out infinite;
+      }
+    }
+  }
 
-.title-glow {
-  display: none;
+  /* 有异常时的头部背景色 */
+  &.has-exception {
+    background: linear-gradient(180deg, rgba(80, 20, 20, 0.95) 0%, rgba(65, 15, 15, 0.9) 100%);
+    border-bottom: 2px solid rgba(239, 68, 68, 0.8);
+  }
 }
 
-.screen-title {
-  position: relative;
-  font-size: 28px;
-  font-weight: bold;
-  color: #ffffff;
-  margin: 0;
-  letter-spacing: 3px;
-  text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
+/* 发光脉动动画 */
+@keyframes glowPulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
 }
 
-.title-subtitle {
-  font-size: 10px;
-  color: rgba(255, 255, 255, 0.8);
-  letter-spacing: 2px;
-  margin-top: 3px;
-  font-family: Arial, sans-serif;
-  text-transform: uppercase;
+/* 标题闪烁动画 */
+@keyframes titleBlink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
 }
 
-.header-time {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  background: rgba(23, 179, 163, 0.15);
-  padding: 12px 20px;
-  border-radius: 8px;
-  border: 1px solid rgba(23, 179, 163, 0.4);
-  backdrop-filter: blur(10px);
+  /* 3D旋转警示灯 - 基础样式 */
+  .alert-warning-light {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
+    padding: 0;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    margin-top: 8px;
+
+    .warning-lamp {
+      width: 70px;
+      height: 65px;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      perspective: 800px;
+
+      /* 灯罩 - 透明圆柱体 */
+      .lamp-dome {
+        width: 60px;
+        height: 60px;
+        position: absolute;
+        top: 0;
+        border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%;
+        background: linear-gradient(135deg,
+          rgba(255, 255, 255, 0.2) 0%,
+          rgba(255, 255, 255, 0.05) 50%,
+          rgba(0, 0, 0, 0.1) 100%
+        );
+        backdrop-filter: blur(2px);
+        box-shadow:
+          inset -5px -5px 15px rgba(0, 0, 0, 0.2),
+          inset 5px 5px 15px rgba(255, 255, 255, 0.1),
+          0 5px 20px rgba(0, 0, 0, 0.3);
+        z-index: 5;
+
+        /* 高光 */
+        .dome-highlight {
+          position: absolute;
+          top: 5px;
+          left: 10px;
+          width: 20px;
+          height: 25px;
+          background: linear-gradient(135deg,
+            rgba(255, 255, 255, 0.6),
+            rgba(255, 255, 255, 0.1)
+          );
+          border-radius: 50%;
+          filter: blur(3px);
+        }
+
+        /* 反射光 */
+        .dome-reflection {
+          position: absolute;
+          bottom: 8px;
+          right: 8px;
+          width: 15px;
+          height: 15px;
+          background: rgba(255, 255, 255, 0.15);
+          border-radius: 50%;
+          filter: blur(2px);
+        }
+      }
+
+      /* 旋转光束 */
+      .lamp-beam {
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        top: 5px;
+        z-index: 2;
+
+        &::before,
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 60%;
+          height: 120%;
+          transform-origin: center center;
+          border-radius: 50%;
+        }
+
+        &::before {
+          transform: translate(-50%, -50%) rotate(45deg);
+          clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
+        }
+
+        &::after {
+          transform: translate(-50%, -50%) rotate(225deg);
+          clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
+        }
+      }
+
+      /* 中心光源 */
+      .lamp-core {
+        width: 30px;
+        height: 30px;
+        position: absolute;
+        top: 15px;
+        border-radius: 50%;
+        z-index: 3;
+      }
+    }
+
+    /* ========== 异常状态 - 红色快速旋转 ========== */
+    &.status-error {
+      .lamp-dome {
+        background: linear-gradient(135deg,
+          rgba(255, 100, 100, 0.4) 0%,
+          rgba(255, 0, 0, 0.3) 50%,
+          rgba(200, 0, 0, 0.2) 100%
+        );
+        box-shadow:
+          inset -5px -5px 15px rgba(200, 0, 0, 0.3),
+          inset 5px 5px 15px rgba(255, 100, 100, 0.2),
+          0 5px 25px rgba(255, 0, 0, 0.6);
+      }
+
+      .lamp-beam {
+        animation: beamRotateFast 1s linear infinite;
+
+        &::before,
+        &::after {
+          background: radial-gradient(ellipse,
+            rgba(255, 200, 0, 0.9) 0%,
+            rgba(255, 100, 0, 0.7) 30%,
+            rgba(255, 0, 0, 0.4) 60%,
+            transparent 100%
+          );
+          filter: blur(8px);
+        }
+      }
+
+      .lamp-core {
+        background: radial-gradient(circle,
+          #ffffff 0%,
+          #ffff00 20%,
+          #ff6600 40%,
+          #ff0000 70%,
+          #cc0000 100%
+        );
+        box-shadow:
+          0 0 20px 8px rgba(255, 255, 0, 0.8),
+          0 0 40px 12px rgba(255, 100, 0, 0.6),
+          0 0 60px 15px rgba(255, 0, 0, 0.4),
+          inset 0 0 15px rgba(255, 255, 255, 0.8);
+        animation: corePulse 0.5s ease-in-out infinite;
+      }
+    }
+
+    /* ========== 正常状态 - 绿色稳定 ========== */
+    &.status-normal {
+      .lamp-dome {
+        background: linear-gradient(135deg,
+          rgba(100, 255, 100, 0.3) 0%,
+          rgba(0, 255, 100, 0.25) 50%,
+          rgba(0, 200, 50, 0.15) 100%
+        );
+        box-shadow:
+          inset -5px -5px 15px rgba(0, 150, 50, 0.2),
+          inset 5px 5px 15px rgba(100, 255, 100, 0.15),
+          0 5px 20px rgba(0, 255, 100, 0.4);
+      }
+
+      .lamp-beam {
+        animation: beamRotateSlow 6s linear infinite;
+
+        &::before,
+        &::after {
+          background: radial-gradient(ellipse,
+            rgba(200, 255, 200, 0.6) 0%,
+            rgba(100, 255, 150, 0.4) 30%,
+            rgba(0, 255, 100, 0.2) 60%,
+            transparent 100%
+          );
+          filter: blur(6px);
+        }
+      }
+
+      .lamp-core {
+        background: radial-gradient(circle,
+          #ffffff 0%,
+          #ccffcc 20%,
+          #66ff66 40%,
+          #00ff44 70%,
+          #00cc33 100%
+        );
+        box-shadow:
+          0 0 15px 5px rgba(100, 255, 100, 0.6),
+          0 0 30px 10px rgba(0, 255, 100, 0.4),
+          0 0 45px 12px rgba(0, 200, 50, 0.2),
+          inset 0 0 12px rgba(255, 255, 255, 0.5);
+      }
+    }
+  }
+
+
+/* 光束快速旋转动画 - 异常状态 */
+@keyframes beamRotateFast {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
-.time-icon {
-  font-size: 14px;
-  color: #17B3A3;
+/* 光束慢速旋转动画 - 正常状态 */
+@keyframes beamRotateSlow {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
-.time-text {
-  font-size: 16px;
-  color: #ffffff;
-  font-family: 'Consolas', 'Courier New', monospace;
-  font-weight: 500;
-  letter-spacing: 1px;
+/* 中心光源脉冲动画 */
+@keyframes corePulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.15);
+    opacity: 0.85;
+  }
 }
 
-/* ===== 主内容区（单面板） ===== */
+/* ========== 主内容区 ========== */
 .screen-content-single {
   position: relative;
-  z-index: 1;
-  padding: 20px;
+  padding: 8px 15px;
   height: calc(100vh - 60px);
   overflow-y: auto;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
+  z-index: 1;
 
   &::-webkit-scrollbar {
     width: 6px;
   }
 
   &::-webkit-scrollbar-track {
-    background: rgba(23, 179, 163, 0.1);
+    background: rgba(0, 212, 255, 0.1);
   }
 
   &::-webkit-scrollbar-thumb {
-    background: rgba(23, 179, 163, 0.5);
+    background: rgba(0, 212, 255, 0.5);
     border-radius: 3px;
 
     &:hover {
-      background: rgba(23, 179, 163, 0.7);
+      background: rgba(0, 212, 255, 0.7);
     }
   }
 }
 
-/* ===== 单面板样式 ===== */
+/* ========== 面板样式 ========== */
 .picking-panel-single {
   width: 100%;
-  max-width: 1800px;
+  height: calc(100vh - 80px);
   background: rgba(70, 90, 120, 0.9);
   backdrop-filter: blur(10px);
-  border: 1px solid rgba(23, 179, 163, 0.5);
+  border: 1px solid rgba(0, 212, 255, 0.5);
   border-radius: 12px;
   box-shadow:
     0 8px 32px rgba(0, 0, 0, 0.4),
     inset 0 1px 0 rgba(255, 255, 255, 0.1);
   overflow: hidden;
-  transition: all 0.3s ease;
+  transition: all 0.5s ease;
   display: flex;
   flex-direction: column;
 
   &:hover {
-    border-color: rgba(23, 179, 163, 0.5);
+    border-color: rgba(0, 212, 255, 0.5);
     box-shadow:
       0 12px 48px rgba(0, 0, 0, 0.5),
-      0 0 30px rgba(23, 179, 163, 0.2);
+      0 0 30px rgba(0, 212, 255, 0.2);
     transform: translateY(-2px);
   }
-}
 
-/* ===== 面板标题栏 ===== */
-.panel-title-bar {
-  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(239, 68, 68, 0.15) 100%);
-  border-bottom: 1px solid rgba(239, 68, 68, 0.4);
-  padding: 15px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
+  /* 有异常时的红色告警面板 */
+  &.has-exception {
+    background: rgba(120, 50, 50, 0.9);
+    border: 1px solid rgba(239, 68, 68, 0.8);
+    box-shadow:
+      0 8px 32px rgba(239, 68, 68, 0.4),
+      inset 0 1px 0 rgba(255, 100, 100, 0.1),
+      0 0 40px rgba(239, 68, 68, 0.3);
+    animation: panelPulse 3s ease-in-out infinite;
 
-.title-left {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  flex: 1;
+    &:hover {
+      border-color: rgba(239, 68, 68, 0.9);
+      box-shadow:
+        0 12px 48px rgba(239, 68, 68, 0.6),
+        0 0 50px rgba(239, 68, 68, 0.4);
+    }
+  }
 }
 
-.title-icon {
-  font-size: 20px;
-  color: #fca5a5;
+/* 面板脉动动画 */
+@keyframes panelPulse {
+  0%, 100% {
+    box-shadow:
+      0 8px 32px rgba(239, 68, 68, 0.4),
+      inset 0 1px 0 rgba(255, 100, 100, 0.1),
+      0 0 40px rgba(239, 68, 68, 0.3);
+  }
+  50% {
+    box-shadow:
+      0 8px 32px rgba(239, 68, 68, 0.6),
+      inset 0 1px 0 rgba(255, 100, 100, 0.2),
+      0 0 60px rgba(239, 68, 68, 0.5);
+  }
 }
 
-.title-text {
+/* ========== 面板标题栏 ========== */
+.panel-title-bar {
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.3) 0%, rgba(0, 212, 255, 0.15) 100%);
+  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
+  padding: 12px 20px;
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 20px;
-  flex-wrap: wrap;
-}
 
-.title-main {
-  font-size: 22px;
-  font-weight: bold;
-  color: #ffffff;
-  text-shadow: 0 0 10px rgba(252, 165, 165, 0.5);
-}
+  .title-left {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    flex: 1;
+
+    .title-icon {
+      width: 4px;
+      height: 24px;
+      background: linear-gradient(180deg, #00d4ff, #0084ff);
+      border-radius: 2px;
+      box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+    }
+
+    .title-text {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+
+      .title-main {
+        font-size: 22px;
+        font-weight: bold;
+        color: #ffffff;
+        text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+      }
 
-.title-count {
-  font-size: 16px;
-  color: rgba(255, 255, 255, 0.9);
+      .title-count {
+        font-size: 16px;
+        color: rgba(255, 255, 255, 0.7);
 
-  strong {
-    color: #fca5a5;
-    font-size: 20px;
-    margin: 0 4px;
+        strong {
+          color: #00d4ff;
+          font-size: 18px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+
+  .title-right {
+    .update-time {
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.6);
+    }
   }
 }
 
-/* ===== 数据表格 ===== */
+/* ========== 数据表格 ========== */
 .panel-table {
   padding: 10px;
   flex: 1;
   overflow-y: auto;
+
   &::-webkit-scrollbar {
     width: 6px;
   }
 
   &::-webkit-scrollbar-track {
-    background: rgba(23, 179, 163, 0.05);
+    background: rgba(0, 212, 255, 0.05);
   }
 
   &::-webkit-scrollbar-thumb {
-    background: rgba(23, 179, 163, 0.3);
+    background: rgba(0, 212, 255, 0.3);
     border-radius: 3px;
 
     &:hover {
-      background: rgba(23, 179, 163, 0.5);
+      background: rgba(0, 212, 255, 0.5);
     }
   }
 }
@@ -633,21 +952,20 @@ export default {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-  height: 700px;
 
   thead {
     tr {
-      background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.15) 100%);
+      background: linear-gradient(135deg, rgba(0, 212, 255, 0.25) 0%, rgba(0, 212, 255, 0.15) 100%);
     }
 
     th {
-      padding: 12px 8px;
+      padding: 8px 10px;
       color: #fcfdfd;
-      font-size: 14px;
+      font-size: 15px;
       font-weight: bold;
       text-align: center;
-      border-bottom: 2px solid rgba(239, 68, 68, 0.4);
-      text-shadow: 0 0 10px rgba(252, 165, 165, 0.5);
+      border-bottom: 2px solid rgba(0, 212, 255, 0.4);
+      text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
       white-space: nowrap;
 
       &:first-child {
@@ -669,25 +987,24 @@ export default {
         background: rgba(70, 90, 115, 0.7);
       }
 
-      &.row-critical {
-        background: rgba(239, 68, 68, 0.15);
+      &:hover {
+        background: rgba(0, 212, 255, 0.15);
+        box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
+      }
 
-        &:hover {
-          background: rgba(239, 68, 68, 0.25);
-        }
+      &.row-error {
+        background: rgba(239, 68, 68, 0.1) !important;
+        border-left: 3px solid #ef4444;
       }
 
       &.row-warning {
-        background: rgba(245, 158, 11, 0.12);
-
-        &:hover {
-          background: rgba(245, 158, 11, 0.22);
-        }
+        background: rgba(251, 191, 36, 0.1) !important;
+        border-left: 3px solid #fbbf24;
       }
 
-      &:hover {
-        background: rgba(23, 179, 163, 0.15);
-        box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
+      &.row-info {
+        background: rgba(0, 212, 255, 0.1) !important;
+        border-left: 3px solid #00d4ff;
       }
 
       &:last-child {
@@ -699,13 +1016,36 @@ export default {
           border-bottom-right-radius: 8px;
         }
       }
+
+      &.empty-row {
+        height: calc(100vh - 300px);
+
+        .empty-state {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 12px;
+          color: rgba(255, 255, 255, 0.4);
+
+          i {
+            font-size: 48px;
+            color: #10b981;
+          }
+
+          p {
+            font-size: 18px;
+            margin: 0;
+          }
+        }
+      }
     }
 
     td {
-      padding: 12px 8px;
+      padding: 8px 10px;
       color: rgba(255, 255, 255, 0.9);
-      font-size: 13px;
-      border-bottom: 1px solid rgba(23, 179, 163, 0.15);
+      font-size: 14px;
+      border-bottom: 1px solid rgba(0, 212, 255, 0.15);
 
       &.text-center {
         text-align: center;
@@ -719,149 +1059,135 @@ export default {
         text-align: right;
       }
 
-      &.exception-desc {
-        font-size: 12px;
+      &.exception-desc,
+      &.tags-cell {
+        font-size: 13px;
         line-height: 1.4;
+        word-break: break-all;
       }
     }
   }
 }
 
-/* ===== 异常类型徽章 ===== */
+/* ========== 标签容器样式 ========== */
+.tags-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  .tag-item {
+    padding: 2px 8px;
+    background: rgba(0, 212, 255, 0.1);
+    border: 1px solid rgba(0, 212, 255, 0.3);
+    border-radius: 4px;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.9);
+    word-break: break-all;
+    line-height: 1.4;
+
+    &:hover {
+      background: rgba(0, 212, 255, 0.2);
+      border-color: rgba(0, 212, 255, 0.5);
+    }
+  }
+}
+
+/* ========== 异常类型标签 ========== */
 .exception-type-badge {
   display: inline-block;
-  padding: 4px 12px;
-  border-radius: 10px;
-  font-size: 12px;
+  padding: 5px 12px;
+  border-radius: 12px;
+  font-size: 13px;
   font-weight: bold;
   text-align: center;
-  min-width: 90px;
+  min-width: 80px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  white-space: nowrap;
 
-  &.type-error {
-    background: linear-gradient(135deg, #dc2626, #ef4444);
+  &.badge-error {
+    background: linear-gradient(135deg, #ef4444, #f87171);
     color: #ffffff;
-    box-shadow: 0 0 15px rgba(220, 38, 38, 0.5);
+    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
+    border: none;
   }
 
-  &.type-warning {
+  &.badge-warning {
     background: linear-gradient(135deg, #f59e0b, #fbbf24);
     color: #ffffff;
-    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
+    box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
+    border: none;
   }
 
-  &.type-danger {
-    background: linear-gradient(135deg, #be123c, #e11d48);
+  &.badge-info {
+    background: linear-gradient(135deg, #00d4ff, #0084ff);
     color: #ffffff;
-    box-shadow: 0 0 15px rgba(190, 18, 60, 0.5);
+    box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
+    border: none;
   }
 
-  &.type-info {
-    background: linear-gradient(135deg, #3b82f6, #60a5fa);
+  &.badge-default {
+    background: linear-gradient(135deg, #6b7280, #9ca3af);
     color: #ffffff;
-    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
+    box-shadow: 0 0 15px rgba(156, 163, 175, 0.5);
+    border: none;
   }
 }
 
-/* ===== 状态徽章 ===== */
+/* ========== 处理状态标签 ========== */
 .status-badge {
   display: inline-block;
-  padding: 4px 12px;
-  border-radius: 10px;
-  font-size: 12px;
+  padding: 5px 12px;
+  border-radius: 12px;
+  font-size: 13px;
   font-weight: bold;
   text-align: center;
-  min-width: 70px;
+  min-width: 80px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  white-space: nowrap;
 
-  &.status-success {
-    background: linear-gradient(135deg, #10b981, #34d399);
+  &.status-pending {
+    background: linear-gradient(135deg, #ef4444, #f87171);
     color: #ffffff;
-    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
+    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
   }
 
-  &.status-warning {
+  &.status-processing {
     background: linear-gradient(135deg, #f59e0b, #fbbf24);
     color: #ffffff;
-    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
+    box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
   }
 
-  &.status-danger {
-    background: linear-gradient(135deg, #ef4444, #f87171);
+  &.status-completed {
+    background: linear-gradient(135deg, #10b981, #34d399);
     color: #ffffff;
-    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
-    animation: pulse 2s ease-in-out infinite;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
   }
 
-  &.status-pending {
+  &.status-default {
     background: linear-gradient(135deg, #6b7280, #9ca3af);
     color: #ffffff;
-    box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 25px rgba(239, 68, 68, 0.8);
+    box-shadow: 0 0 15px rgba(156, 163, 175, 0.5);
   }
 }
 
-/* ===== 底部装饰 ===== */
+/* ========== 底部装饰 ========== */
 .screen-footer {
-  display: none;
-}
-
-/* ===== 响应式适配 ===== */
-@media screen and (max-width: 1600px) {
-  .screen-title {
-    font-size: 26px;
-    letter-spacing: 3px;
-  }
-
-  .title-main {
-    font-size: 20px;
-  }
-
-  .data-table {
-    thead th {
-      font-size: 12px;
-      padding: 10px 6px;
-    }
-
-    tbody td {
-      font-size: 12px;
-      padding: 10px 6px;
-    }
-  }
-}
-
-@media screen and (min-width: 2560px) {
-  .screen-title {
-    font-size: 32px;
-  }
-
-  .panel-title-bar {
-    padding: 18px 24px;
-  }
-
-  .title-main {
-    font-size: 24px;
-  }
-
-  .data-table {
-    thead th {
-      font-size: 16px;
-      padding: 14px 10px;
-    }
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 20px;
+  background: linear-gradient(180deg, transparent, rgba(20, 40, 70, 0.8));
+  z-index: 1;
 
-    tbody td {
-      font-size: 15px;
-      padding: 14px 10px;
-    }
+  .footer-line {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80%;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.5), transparent);
   }
 }
 </style>
-