From 760eccdecc28930a0906f7fb42f4adc09bd60554 Mon Sep 17 00:00:00 2001
From: shih <510524130@qq.com>
Date: Thu, 23 Apr 2026 13:46:19 +0800
Subject: [PATCH] =?UTF-8?q?=E7=89=A9=E8=81=94=E7=BB=84=E6=80=81=20?=
 =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/scada/picture.js           |   73 +-
 src/views/scada/picture/screen.vue | 1956 +++++++++++++---------------
 2 files changed, 989 insertions(+), 1040 deletions(-)

diff --git a/src/api/scada/picture.js b/src/api/scada/picture.js
index 958d21d..c28ff9f 100644
--- a/src/api/scada/picture.js
+++ b/src/api/scada/picture.js
@@ -2,43 +2,70 @@ import request from '@/utils/request';
 
 // 查询组态列表
 export function listCenter(query) {
-  return request({
-    url: '/scada/picture/list',
-    method: 'get',
-    params: query
-  });
+    return request({
+        url: '/scada/picture/list',
+        method: 'get',
+        params: query,
+    });
 }
 
 // 查询组态详情
 export function getCenter(id) {
-  return request({
-    url: '/scada/picture/' + id,
-    method: 'get'
-  });
+    return request({
+        url: '/scada/picture/' + id,
+        method: 'get',
+    });
 }
 
 // 新增组态
 export function addCenter(data) {
-  return request({
-    url: '/scada/picture',
-    method: 'post',
-    data: data
-  });
+    return request({
+        url: '/scada/picture',
+        method: 'post',
+        data: data,
+    });
 }
 
 // 修改组态
 export function updateCenter(data) {
-  return request({
-    url: '/scada/picture',
-    method: 'put',
-    data: data
-  });
+    return request({
+        url: '/scada/picture',
+        method: 'put',
+        data: data,
+    });
 }
 
 // 删除组态
 export function delCenter(id) {
-  return request({
-    url: '/scada/picture/' + id,
-    method: 'delete'
-  });
+    return request({
+        url: '/scada/picture/' + id,
+        method: 'delete',
+    });
+}
+
+// 查询维修完成情况数据
+export function getMaintenanceData(query) {
+    return request({
+        url: '/iot/configuration/repairList',
+        method: 'get',
+        params: query,
+    });
+}
+
+// 查询保养统计数据
+export function getMaintenanceStats(query) {
+    return request({
+        url: '/iot/configuration/maintenanceList',
+        method: 'get',
+        params: query,
+    });
+}
+
+// 查询设备列表
+export function getDeviceList(query) {
+    return request({
+        url: '/iot/configuration/deviceList',
+        method: 'get',
+        params: query,
+    });
 }
diff --git a/src/views/scada/picture/screen.vue b/src/views/scada/picture/screen.vue
index f63a7ee..c6a763a 100644
--- a/src/views/scada/picture/screen.vue
+++ b/src/views/scada/picture/screen.vue
@@ -1,1263 +1,1185 @@
 <template>
-  <div class="container">
-    <div class="header">国瑞药业冻干三物联组态</div>
-    <!-- 上部分 -->
-    <div class="top-section">
-      <!-- 左侧设备列表 -->
-      <div class="device-sidebar">
-        <div class="sidebar-title">设备列表</div>
-        <div class="table-container">
-          <table class="device-table">
-            <thead>
-            <tr>
-              <th>设备名称</th>
-              <th>设备状态</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr v-for="device in filteredDevices" :key="device.id">
-              <td>{{ device.name }}</td>
-              <td>
-                                    <span
-                                      class="status-badge"
-                                      :class="getStatusClass(device.status)"
-                                    >
+    <div class="container">
+        <div class="header">国瑞药业冻干三物联组态</div>
+        <!-- 上部分 -->
+        <div class="top-section">
+            <!-- 左侧设备列表 -->
+            <div class="device-sidebar">
+                <div class="sidebar-title">设备列表</div>
+                <div class="table-container">
+                    <table class="device-table">
+                        <thead>
+                            <tr>
+                                <th>设备名称</th>
+                                <th>设备状态</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="device in filteredDevices" :key="device.deviceId" @click="openDeviceModal(device)">
+                                <td>{{ device.deviceName }}</td>
+                                <td>
+                                    <span class="status-badge" :class="getStatusClass(device.status)">
                                         {{ getStatusText(device.status) }}
                                     </span>
-              </td>
-            </tr>
-            </tbody>
-          </table>
-        </div>
-        <div class="pagination">
-          <button
-            class="page-btn arrow-btn"
-            @click="goToPreviousDevicePage"
-            :disabled="deviceCurrentPage === 1"
-          >
-            &lt;
-          </button>
-          <button
-            v-for="page in deviceTotalPages"
-            :key="page"
-            class="page-btn"
-            :class="{ active: deviceCurrentPage === page }"
-            @click="deviceCurrentPage = page"
-          >
-            {{ page }}
-          </button>
-          <button
-            class="page-btn arrow-btn"
-            @click="goToNextDevicePage"
-            :disabled="deviceCurrentPage === deviceTotalPages"
-          >
-            &gt;
-          </button>
-        </div>
-      </div>
-
-      <!-- 右侧维修保养模块 -->
-      <div class="maintenance-panel">
-        <!-- 左侧维修统计故障类型 -->
-        <div class="chart-container">
-          <div class="chart-title">维修统计故障类型</div>
-          <div id="maintenanceChart" class="chart"></div>
-        </div>
-
-        <!-- 右侧表格区域 -->
-        <div class="table-section">
-          <!-- 上部分：切换按钮 -->
-          <div class="table-controls">
-            <button
-              class="control-btn"
-              :class="{ active: activeTable === '维修完成情况' }"
-              @click="activeTable = '维修完成情况'"
-            >
-              维修完成情况
-            </button>
-            <button
-              class="control-btn"
-              :class="{ active: activeTable === '保养统计' }"
-              @click="activeTable = '保养统计'"
-            >
-              保养统计
-            </button>
-          </div>
-
-          <!-- 下部分：表格 -->
-          <div class="table-content">
-            <!-- 维修完成情况表 -->
-            <table class="device-table" v-if="activeTable === '维修完成情况'">
-              <thead>
-              <tr>
-                <th>工单编号</th>
-                <th>工单名称</th>
-                <th>设备名称</th>
-                <th>优先级</th>
-                <th>状态</th>
-              </tr>
-              </thead>
-              <tbody>
-              <tr v-for="(item, index) in filteredMaintenanceData" :key="index">
-                <td>{{ item.workOrderId }}</td>
-                <td>{{ item.workOrderName }}</td>
-                <td>{{ item.deviceName }}</td>
-                <td>{{ item.priority }}</td>
-                <td>
-                                        <span
-                                          class="status-badge"
-                                          :class="getStatusClass(item.status)"
-                                        >
-                                            {{ getStatusText(item.status) }}
-                                        </span>
-                </td>
-              </tr>
-              </tbody>
-            </table>
-
-            <!-- 保养统计表 -->
-            <table class="device-table" v-if="activeTable === '保养统计'">
-              <thead>
-              <tr>
-                <th>保养编号</th>
-                <th>保养名称</th>
-                <th>设备名称</th>
-                <th>保养周期</th>
-                <th>状态</th>
-              </tr>
-              </thead>
-              <tbody>
-              <tr v-for="(item, index) in filteredMaintenanceData" :key="index">
-                <td>{{ item.maintenanceId }}</td>
-                <td>{{ item.maintenanceName }}</td>
-                <td>{{ item.deviceName }}</td>
-                <td>{{ item.maintenanceCycle }}</td>
-                <td>
-                                        <span
-                                          class="status-badge"
-                                          :class="{
-                                                'status-running': item.status === '已完成',
-                                                'status-warning': item.status === '待开始',
-                                                'status-error': item.status === '故障'
-                                            }"
-                                        >
-                                            {{ item.status }}
-                                        </span>
-                </td>
-              </tr>
-              </tbody>
-            </table>
-
-            <!-- 分页 -->
-            <div class="pagination">
-              <button
-                class="page-btn arrow-btn"
-                @click="goToPreviousPage"
-                :disabled="maintenanceCurrentPage === 1"
-              >
-                &lt;
-              </button>
-              <button
-                v-for="page in maintenanceTotalPages"
-                :key="page"
-                class="page-btn"
-                :class="{ active: maintenanceCurrentPage === page }"
-                @click="maintenanceCurrentPage = page"
-              >
-                {{ page }}
-              </button>
-              <button
-                class="page-btn arrow-btn"
-                @click="goToNextPage"
-                :disabled="maintenanceCurrentPage === maintenanceTotalPages"
-              >
-                &gt;
-              </button>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="pagination">
+                    <button class="page-btn arrow-btn" @click="goToPreviousDevicePage" :disabled="deviceCurrentPage === 1">&lt;</button>
+                    <button v-for="page in deviceTotalPages" :key="page" class="page-btn" :class="{ active: deviceCurrentPage === page }" @click="deviceCurrentPage = page">
+                        {{ page }}
+                    </button>
+                    <button class="page-btn arrow-btn" @click="goToNextDevicePage" :disabled="deviceCurrentPage === deviceTotalPages">&gt;</button>
+                </div>
+            </div>
+
+            <!-- 右侧维修保养模块 -->
+            <div class="maintenance-panel">
+                <!-- 左侧维修统计故障类型 -->
+                <div class="chart-container">
+                    <div class="chart-title">维修统计故障类型</div>
+                    <div id="maintenanceChart" class="chart"></div>
+                </div>
+
+                <!-- 右侧表格区域 -->
+                <div class="table-section">
+                    <!-- 上部分：切换按钮 -->
+                    <div class="table-controls">
+                        <button class="control-btn" :class="{ active: activeTable === '维修完成情况' }" @click="switchTable('维修完成情况')">维修完成情况</button>
+                        <button class="control-btn" :class="{ active: activeTable === '保养统计' }" @click="switchTable('保养统计')">保养统计</button>
+                    </div>
+
+                    <!-- 下部分：表格 -->
+                    <div class="table-content">
+                        <!-- 维修完成情况表 -->
+                        <table class="device-table" v-if="activeTable === '维修完成情况'">
+                            <thead>
+                                <tr>
+                                    <th>工单编号</th>
+                                    <th>设备名称</th>
+                                    <th>设备编号</th>
+                                    <th>故障类型</th>
+                                    <th>优先级</th>
+                                    <th>维修日期</th>
+                                    <!-- <th>维修时间</th> -->
+                                    <th>维修人</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="(item, index) in filteredMaintenanceData" :key="index">
+                                    <td>{{ item.number || '-' }}</td>
+                                    <td>{{ item.name || '-' }}</td>
+                                    <td>{{ item.devNo || '-' }}</td>
+                                    <td>{{ getFaultTypeLabel(item.faultType) || '-' }}</td>
+                                    <td>{{ getPriorityLabel(item.priority) || '-' }}</td>
+                                    <td>{{ formatDate(item.repairDate) }}</td>
+                                    <!-- <td>{{ item.repairTime || '-' }}</td> -->
+                                    <td>{{ item.maintenancePerson || '-' }}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+
+                        <!-- 保养统计表 -->
+                        <table class="device-table" v-if="activeTable === '保养统计'">
+                            <thead>
+                                <tr>
+                                    <th>工单编号</th>
+                                    <th>设备名称</th>
+                                    <th>设备编号</th>
+                                    <th>保养级别</th>
+                                    <th>保养人</th>
+                                    <th>完成时间</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="(item, index) in filteredMaintenanceData" :key="index">
+                                    <td>{{ item.orderId || '-' }}</td>
+                                    <td>{{ item.orderName || '-' }}</td>
+                                    <td>{{ item.equipmentCode || '-' }}</td>
+                                    <td>{{ getUpkeepLevelLabel(item.upkeepLevel) || '-' }}</td>
+                                    <td>{{ item.maintainer || '-' }}</td>
+                                    <td>{{ item.upkeepTime || '-' }}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+
+                        <!-- 分页 -->
+                        <div class="pagination">
+                            <button class="page-btn arrow-btn" @click="goToPreviousPage" :disabled="maintenanceCurrentPage === 1">&lt;</button>
+                            <button v-for="page in maintenanceTotalPages" :key="page" class="page-btn" :class="{ active: maintenanceCurrentPage === page }" @click="maintenanceCurrentPage = page">
+                                {{ page }}
+                            </button>
+                            <button class="page-btn arrow-btn" @click="goToNextPage" :disabled="maintenanceCurrentPage === maintenanceTotalPages">&gt;</button>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
 
-    <!-- 下半部分设备图 -->
-    <div class="bottom-section">
-      <div class="layout-container">
-        <img
-          src="../../../assets/picture/c354ee887a2f66c387ef3cd49be905b3.png"
-          alt="设备布局"
-          class="layout-image"
-        >
-        <!-- 标记点 -->
-        <div class="marker marker-1" @click="handleMarkerClick(1)"></div>
-        <div class="marker marker-2" @click="handleMarkerClick(2)"></div>
-        <div class="marker marker-3" @click="handleMarkerClick(3)"></div>
-        <div class="marker marker-4" @click="handleMarkerClick(4)"></div>
-        <div class="marker marker-5" @click="handleMarkerClick(5)"></div>
-        <div class="marker marker-6" @click="handleMarkerClick(6)"></div>
-        <div class="marker marker-7" @click="handleMarkerClick(7)"></div>
-        <div class="marker marker-8" @click="handleMarkerClick(8)"></div>
-        <div class="marker marker-9" @click="handleMarkerClick(98)"></div>
-        <div class="marker marker-16" @click="handleMarkerClick(16)"></div>
-        <div class="marker marker-15" @click="handleMarkerClick(15)"></div>
-        <div class="marker marker-17" @click="handleMarkerClick(17)"></div>
-        <!-- 流动线 -->
+        <!-- 下半部分设备图 -->
+        <div class="bottom-section">
+            <div class="layout-container">
+                <img src="../../../assets/picture/c354ee887a2f66c387ef3cd49be905b3.png" alt="设备布局" class="layout-image" />
+                <!-- 标记点 -->
+                <div class="marker marker-1" @mouseenter="(e) => handleMarkerMouseEnter(1, e)" @mouseleave="handleMarkerMouseLeave" @click.stop="(e) => handleMarkerClick(1, e)"></div>
+                <div class="marker marker-2" @mouseenter="(e) => handleMarkerMouseEnter(2, e)" @mouseleave="handleMarkerMouseLeave" @click.stop="(e) => handleMarkerClick(2, e)"></div>
+                <div class="marker marker-3" @mouseenter="(e) => handleMarkerMouseEnter(3, e)" @mouseleave="handleMarkerMouseLeave" @click.stop="(e) => handleMarkerClick(3, e)"></div>
+                <div class="marker marker-4" @mouseenter="(e) => handleMarkerMouseEnter(4, e)" @mouseleave="handleMarkerMouseLeave" @click.stop="(e) => handleMarkerClick(4, e)"></div>
+                <div class="marker marker-5" @mouseenter="(e) => handleMarkerMouseEnter(5, e)" @mouseleave="handleMarkerMouseLeave" @click.stop="(e) => handleMarkerClick(5, e)"></div>
+                <div class="marker marker-6" @mouseenter="(e) => handleMarkerMouseEnter(6, e)" @mouseleave="handleMarkerMouseLeave" @click.stop="(e) => handleMarkerClick(6, e)"></div>
+                <div class="marker marker-7" @mouseenter="(e) => handleMarkerMouseEnter(7, e)" @mouseleave="handleMarkerMouseLeave" @click.stop="(e) => handleMarkerClick(7, e)"></div>
+                <div class="marker marker-8" @mouseenter="(e) => handleMarkerMouseEnter(8, e)" @mouseleave="handleMarkerMouseLeave" @click.stop="(e) => handleMarkerClick(8, e)"></div>
+                <div class="marker marker-9" @mouseenter="(e) => handleMarkerMouseEnter(98, e)" @mouseleave="handleMarkerMouseLeave" @click.stop="(e) => handleMarkerClick(9, e)"></div>
+                <div class="marker marker-16" @mouseenter="(e) => handleMarkerMouseEnter(16, e)" @mouseleave="handleMarkerMouseLeave" @click.stop="(e) => handleMarkerClick(10, e)"></div>
+                <div class="marker marker-15" @mouseenter="(e) => handleMarkerMouseEnter(15, e)" @mouseleave="handleMarkerMouseLeave" @click.stop="(e) => handleMarkerClick(11, e)"></div>
+                <div class="marker marker-17" @mouseenter="(e) => handleMarkerMouseEnter(17, e)" @mouseleave="handleMarkerMouseLeave" @click.stop="(e) => handleMarkerClick(12, e)"></div>
+                <!-- 流动线 -->
+            </div>
+        </div>
 
-      </div>
+        <!-- 标记点冒泡 -->
+        <div class="marker-popup" v-if="showMarkerPopup" :style="{ left: markerPopupPosition.x + 'px', top: markerPopupPosition.y + 'px' }" @click.stop>
+            <div class="popup-arrow"></div>
+            <div class="popup-content">
+                <div class="popup-title">{{ markerPopupData.name }}</div>
+                <div class="popup-info">
+                    <span class="popup-label">设备编号：</span>
+                    <span class="popup-value">{{ markerPopupData.id }}</span>
+                </div>
+                <div class="popup-info">
+                    <span class="popup-label">设备状态：</span>
+                    <span class="status-badge" :class="getStatusClass(markerPopupData.status)">
+                        {{ markerPopupData.statusText }}
+                    </span>
+                </div>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
+import { getMaintenanceData, getMaintenanceStats, getDeviceList } from '@/api/scada/picture';
 export default {
-  data() {
-    return {
-      // URL参数
-      id: '',
-      guid: '',
-      // 设备列表数据（模拟2页，每页10个）
-      devices: [
-        {id: 1, name: '全自动贴标机', status: 'running'},
-        {id: 2, name: '蒸汽喷射式灭菌器', status: 'running'},
-        {id: 3, name: '压片机', status: 'warning'},
-        {id: 4, name: '冻干机自动进出料系统', status: 'running'},
-        {id: 5, name: '热风循环灭菌烘箱', status: 'error'},
-        {id: 6, name: '包装机', status: 'running'},
-        {id: 7, name: '配料系统', status: 'running'},
-        {id: 8, name: '全自动胶囊充填机', status: 'warning'},
-        {id: 9, name: '颗粒包装机', status: 'running'},
-        {id: 10, name: '粉末包装机', status: 'running'},
-        {id: 11, name: '液体灌装机', status: 'running'},
-        {id: 12, name: '西林瓶灌装机', status: 'warning'},
-        {id: 13, name: '安瓿瓶灌装机', status: 'running'},
-        {id: 14, name: '口服液灌装机', status: 'running'},
-        {id: 15, name: '软膏灌装机', status: 'error'},
-        {id: 16, name: '栓剂成型机', status: 'running'},
-        {id: 17, name: '软胶囊机', status: 'running'},
-        {id: 18, name: '硬胶囊机', status: 'warning'},
-        {id: 19, name: '丸剂成型机', status: 'running'},
-        {id: 20, name: '片剂包衣机', status: 'running'}
-      ],
-      selectedDevice: 1,
-      deviceCurrentPage: 1,
-      deviceItemsPerPage: 5,
+    data() {
+        return {
+            // URL参数
+            id: '',
+            guid: '',
+            // 设备列表数据
+            devices: [],
+            selectedDevice: 1,
+            deviceCurrentPage: 1,
+            deviceItemsPerPage: 5,
+            // 标记点冒泡
+            showMarkerPopup: false,
+            markerPopupPosition: { x: 0, y: 0 },
+            markerPopupData: {},
+            markerPopupLocked: false,
 
-      // 表格数据
-      activeTable: '维修完成情况',
-      maintenanceCurrentPage: 1,
-      maintenanceItemsPerPage: 5,
-      maintenanceData: [
-        // 维修完成情况数据（20条）
-        {
-          workOrderId: 'GZ20241106001',
-          workOrderName: '片剂生产',
-          deviceName: '压片机',
-          priority: '高',
-          status: 'running'
-        },
-        {
-          workOrderId: 'GZ20241106002',
-          workOrderName: '胶囊填充',
-          deviceName: '胶囊充填机',
-          priority: '中',
-          status: 'warning'
-        },
-        {
-          workOrderId: 'GZ20241106003',
-          workOrderName: '药品包装',
-          deviceName: '包装机',
-          priority: '高',
-          status: 'running'
-        },
-        {
-          workOrderId: 'GZ20241106004',
-          workOrderName: '原料灭菌',
-          deviceName: '灭菌器',
-          priority: '高',
-          status: 'running'
-        },
-        {
-          workOrderId: 'GZ20241106005',
-          workOrderName: '冻干处理',
-          deviceName: '冻干机',
-          priority: '高',
-          status: 'running'
-        },
-        {
-          workOrderId: 'GZ20241106006',
-          workOrderName: '配料准备',
-          deviceName: '配料系统',
-          priority: '中',
-          status: 'running'
-        },
-        {
-          workOrderId: 'GZ20241106007',
-          workOrderName: '贴标处理',
-          deviceName: '贴标机',
-          priority: '低',
-          status: 'running'
-        },
-        {
-          workOrderId: 'GZ20241106008',
-          workOrderName: '烘干处理',
-          deviceName: '灭菌烘箱',
-          priority: '高',
-          status: 'error'
-        },
-        {
-          workOrderId: 'GZ20241106009',
-          workOrderName: '颗粒包装',
-          deviceName: '颗粒包装机',
-          priority: '高',
-          status: 'running'
-        },
-        {
-          workOrderId: 'GZ20241106010',
-          workOrderName: '粉末包装',
-          deviceName: '粉末包装机',
-          priority: '中',
-          status: 'running'
-        },
-        {
-          workOrderId: 'GZ20241106011',
-          workOrderName: '液体灌装',
-          deviceName: '液体灌装机',
-          priority: '高',
-          status: 'running'
-        },
-        {
-          workOrderId: 'GZ20241106012',
-          workOrderName: '西林瓶灌装',
-          deviceName: '西林瓶灌装机',
-          priority: '中',
-          status: 'warning'
-        },
-        {
-          workOrderId: 'GZ20241106013',
-          workOrderName: '安瓿瓶灌装',
-          deviceName: '安瓿瓶灌装机',
-          priority: '高',
-          status: 'running'
-        },
-        {
-          workOrderId: 'GZ20241106014',
-          workOrderName: '口服液灌装',
-          deviceName: '口服液灌装机',
-          priority: '高',
-          status: 'running'
-        },
-        {
-          workOrderId: 'GZ20241106015',
-          workOrderName: '软膏灌装',
-          deviceName: '软膏灌装机',
-          priority: '高',
-          status: 'error'
-        },
-        {
-          workOrderId: 'GZ20241106016',
-          workOrderName: '栓剂成型',
-          deviceName: '栓剂成型机',
-          priority: '中',
-          status: 'running'
-        },
-        {
-          workOrderId: 'GZ20241106017',
-          workOrderName: '软胶囊生产',
-          deviceName: '软胶囊机',
-          priority: '高',
-          status: 'running'
-        },
-        {
-          workOrderId: 'GZ20241106018',
-          workOrderName: '硬胶囊生产',
-          deviceName: '硬胶囊机',
-          priority: '中',
-          status: 'warning'
-        },
-        {
-          workOrderId: 'GZ20241106019',
-          workOrderName: '丸剂成型',
-          deviceName: '丸剂成型机',
-          priority: '高',
-          status: 'running'
-        },
-        {
-          workOrderId: 'GZ20241106020',
-          workOrderName: '片剂包衣',
-          deviceName: '片剂包衣机',
-          priority: '高',
-          status: 'running'
-        }
-      ],
-      maintenanceStats: [
-        // 保养统计数据（20条）
-        {
-          maintenanceId: 'BY20241106001',
-          maintenanceName: '季度保养',
-          deviceName: '压片机',
-          maintenanceCycle: '3个月',
-          status: '已完成'
-        },
-        {
-          maintenanceId: 'BY20241106002',
-          maintenanceName: '月度保养',
-          deviceName: '胶囊充填机',
-          maintenanceCycle: '1个月',
-          status: '待开始'
-        },
-        {
-          maintenanceId: 'BY20241106003',
-          maintenanceName: '年度保养',
-          deviceName: '包装机',
-          maintenanceCycle: '12个月',
-          status: '已完成'
-        },
-        {
-          maintenanceId: 'BY20241106004',
-          maintenanceName: '季度保养',
-          deviceName: '灭菌器',
-          maintenanceCycle: '3个月',
-          status: '已完成'
-        },
-        {
-          maintenanceId: 'BY20241106005',
-          maintenanceName: '月度保养',
-          deviceName: '冻干机',
-          maintenanceCycle: '1个月',
-          status: '已完成'
-        },
-        {
-          maintenanceId: 'BY20241106006',
-          maintenanceName: '季度保养',
-          deviceName: '配料系统',
-          maintenanceCycle: '3个月',
-          status: '已完成'
-        },
-        {
-          maintenanceId: 'BY20241106007',
-          maintenanceName: '月度保养',
-          deviceName: '贴标机',
-          maintenanceCycle: '1个月',
-          status: '已完成'
-        },
-        {
-          maintenanceId: 'BY20241106008',
-          maintenanceName: '年度保养',
-          deviceName: '灭菌烘箱',
-          maintenanceCycle: '12个月',
-          status: '故障'
-        },
-        {
-          maintenanceId: 'BY20241106009',
-          maintenanceName: '季度保养',
-          deviceName: '颗粒包装机',
-          maintenanceCycle: '3个月',
-          status: '已完成'
-        },
-        {
-          maintenanceId: 'BY20241106010',
-          maintenanceName: '月度保养',
-          deviceName: '粉末包装机',
-          maintenanceCycle: '1个月',
-          status: '待开始'
-        },
-        {
-          maintenanceId: 'BY20241106011',
-          maintenanceName: '年度保养',
-          deviceName: '液体灌装机',
-          maintenanceCycle: '12个月',
-          status: '已完成'
-        },
-        {
-          maintenanceId: 'BY20241106012',
-          maintenanceName: '季度保养',
-          deviceName: '西林瓶灌装机',
-          maintenanceCycle: '3个月',
-          status: '待开始'
-        },
-        {
-          maintenanceId: 'BY20241106013',
-          maintenanceName: '月度保养',
-          deviceName: '安瓿瓶灌装机',
-          maintenanceCycle: '1个月',
-          status: '已完成'
-        },
-        {
-          maintenanceId: 'BY20241106014',
-          maintenanceName: '年度保养',
-          deviceName: '口服液灌装机',
-          maintenanceCycle: '12个月',
-          status: '已完成'
-        },
-        {
-          maintenanceId: 'BY20241106015',
-          maintenanceName: '季度保养',
-          deviceName: '软膏灌装机',
-          maintenanceCycle: '3个月',
-          status: '故障'
-        },
-        {
-          maintenanceId: 'BY20241106016',
-          maintenanceName: '月度保养',
-          deviceName: '栓剂成型机',
-          maintenanceCycle: '1个月',
-          status: '已完成'
-        },
-        {
-          maintenanceId: 'BY20241106017',
-          maintenanceName: '年度保养',
-          deviceName: '软胶囊机',
-          maintenanceCycle: '12个月',
-          status: '已完成'
-        },
-        {
-          maintenanceId: 'BY20241106018',
-          maintenanceName: '季度保养',
-          deviceName: '硬胶囊机',
-          maintenanceCycle: '3个月',
-          status: '待开始'
-        },
-        {
-          maintenanceId: 'BY20241106019',
-          maintenanceName: '月度保养',
-          deviceName: '丸剂成型机',
-          maintenanceCycle: '1个月',
-          status: '已完成'
-        },
-        {
-          maintenanceId: 'BY20241106020',
-          maintenanceName: '年度保养',
-          deviceName: '片剂包衣机',
-          maintenanceCycle: '12个月',
-          status: '已完成'
-        }
-      ]
-    };
-  },
-  computed: {
-    deviceTotalPages() {
-      return Math.ceil(this.devices.length / this.deviceItemsPerPage);
+            // 表格数据
+            activeTable: '维修完成情况',
+            maintenanceCurrentPage: 1,
+            maintenanceItemsPerPage: 5,
+            maintenanceData: [],
+            maintenanceStats: [],
+        };
     },
-    filteredDevices() {
-      const start = (this.deviceCurrentPage - 1) * this.deviceItemsPerPage;
-      return this.devices.slice(start, start + this.deviceItemsPerPage);
+    computed: {
+        deviceTotalPages() {
+            return Math.ceil(this.devices.length / this.deviceItemsPerPage);
+        },
+        filteredDevices() {
+            const start = (this.deviceCurrentPage - 1) * this.deviceItemsPerPage;
+            return this.devices.slice(start, start + this.deviceItemsPerPage);
+        },
+        maintenanceTotalPages() {
+            const data = this.activeTable === '维修完成情况' ? this.maintenanceData : this.maintenanceStats;
+            return Math.ceil(data.length / this.maintenanceItemsPerPage);
+        },
+        filteredMaintenanceData() {
+            const data = this.activeTable === '维修完成情况' ? this.maintenanceData : this.maintenanceStats;
+            const start = (this.maintenanceCurrentPage - 1) * this.maintenanceItemsPerPage;
+            return data.slice(start, start + this.maintenanceItemsPerPage);
+        },
     },
-    maintenanceTotalPages() {
-      const data = this.activeTable === '维修完成情况' ? this.maintenanceData : this.maintenanceStats;
-      return Math.ceil(data.length / this.maintenanceItemsPerPage);
-    },
-    filteredMaintenanceData() {
-      const data = this.activeTable === '维修完成情况' ? this.maintenanceData : this.maintenanceStats;
-      const start = (this.maintenanceCurrentPage - 1) * this.maintenanceItemsPerPage;
-      return data.slice(start, start + this.maintenanceItemsPerPage);
-    }
-  },
-  methods: {
-    // 获取URL参数
-    getUrlParams() {
-      this.id = this.$route.query.id || '';
-      this.guid = this.$route.query.guid || '';
-      console.log('URL参数:', {id: this.id, guid: this.guid});
-    },
-    selectDevice(deviceId) {
-      this.selectedDevice = deviceId;
-    },
-    getStatusClass(status) {
-      switch (status) {
-        case 'running':
-          return 'status-running';
-        case 'warning':
-          return 'status-warning';
-        case 'error':
-          return 'status-error';
-        default:
-          return '';
-      }
-    },
-    getStatusText(status) {
-      switch (status) {
-        case 'running':
-          return '运行中';
-        case 'warning':
-          return '预警';
-        case 'error':
-          return '故障';
-        default:
-          return '未知';
-      }
-    },
-    goToPreviousPage() {
-      if (this.maintenanceCurrentPage > 1) {
-        this.maintenanceCurrentPage--;
-      }
-    },
-    goToNextPage() {
-      if (this.maintenanceCurrentPage < this.maintenanceTotalPages) {
-        this.maintenanceCurrentPage++;
-      }
-    },
-    goToPreviousDevicePage() {
-      if (this.deviceCurrentPage > 1) {
-        this.deviceCurrentPage--;
-      }
-    },
-    goToNextDevicePage() {
-      if (this.deviceCurrentPage < this.deviceTotalPages) {
-        this.deviceCurrentPage++;
-      }
-    },
-    // 标记点点击事件处理函数（预留）
-    handleMarkerClick(markerId) {
-      console.log('Marker clicked:', markerId);
-      // 后续可以根据markerId执行不同的操作
-      // 例如：显示设备详情、跳转到设备监控页面等
-    },
-    initChart() {
-      const chartDom = document.getElementById('maintenanceChart');
-      const myChart = this.$echarts.init(chartDom);
+    methods: {
+        // 获取URL参数
+        getUrlParams() {
+            this.id = this.$route.query.id || '';
+            this.guid = this.$route.query.guid || '';
+            console.log('URL参数:', { id: this.id, guid: this.guid });
+        },
+        selectDevice(deviceId) {
+            this.selectedDevice = deviceId;
+        },
+        getStatusClass(status) {
+            switch (status) {
+                case 'running':
+                    return 'status-running';
+                case 'warning':
+                    return 'status-warning';
+                case 'error':
+                    return 'status-error';
+                default:
+                    return 'status-running';
+            }
+        },
+        getStatusText(status) {
+            switch (status) {
+                case 'running':
+                    return '运行中';
+                case 'warning':
+                    return '预警';
+                case 'error':
+                    return '故障';
+                default:
+                    return '在线';
+            }
+        },
+        goToPreviousPage() {
+            if (this.maintenanceCurrentPage > 1) {
+                this.maintenanceCurrentPage--;
+            }
+        },
+        goToNextPage() {
+            if (this.maintenanceCurrentPage < this.maintenanceTotalPages) {
+                this.maintenanceCurrentPage++;
+            }
+        },
+        goToPreviousDevicePage() {
+            if (this.deviceCurrentPage > 1) {
+                this.deviceCurrentPage--;
+            }
+        },
+        goToNextDevicePage() {
+            if (this.deviceCurrentPage < this.deviceTotalPages) {
+                this.deviceCurrentPage++;
+            }
+        },
+        switchTable(tableName) {
+            this.activeTable = tableName;
+            this.maintenanceCurrentPage = 1;
+        },
+        async fetchDeviceList() {
+            try {
+                const response = await getDeviceList({ devtype: 14 });
+                this.devices = response.data || [];
+            } catch (error) {
+                console.error('获取设备列表失败:', error);
+            }
+        },
+        openDeviceModal(device) {
+            this.selectedDeviceInfo = device;
+            this.showDeviceModal = true;
+        },
+        closeDeviceModal() {
+            this.showDeviceModal = false;
+            this.selectedDeviceInfo = {};
+        },
+        async fetchMaintenanceData() {
+            try {
+                const response = await getMaintenanceData({ devtype: 14 });
+                this.maintenanceData = response.data || [];
+                this.updateChart();
+            } catch (error) {
+                console.error('获取维修完成情况数据失败:', error);
+            }
+        },
+        getFaultTypeLabel(type) {
+            const faultTypeMap = {
+                1: '系统故障',
+                2: '电气故障',
+                3: '机械故障',
+                4: '其他',
+            };
+            return faultTypeMap[type] || '其他';
+        },
+        getPriorityLabel(priority) {
+            const priorityMap = {
+                3: '高',
+                2: '中',
+                1: '低',
+            };
+            return priorityMap[priority] || priority;
+        },
+        getUpkeepLevelLabel(level) {
+            const levelMap = {
+                0: '小修',
+                1: '中修',
+                2: '大修',
+            };
+            return levelMap[level] || level;
+        },
+        formatDate(date) {
+            if (!date) return '-';
+            const d = new Date(date);
+            if (isNaN(d.getTime())) return date;
+            const year = d.getFullYear();
+            const month = String(d.getMonth() + 1).padStart(2, '0');
+            const day = String(d.getDate()).padStart(2, '0');
+            return `${year}-${month}-${day}`;
+        },
+        getFaultTypeData() {
+            const colorMap = {
+                机械故障: '#ff8c00',
+                电气故障: '#9370db',
+                系统故障: '#4682b4',
+                其他: '#ffd700',
+            };
+            const grouped = {
+                系统故障: 0,
+                电气故障: 0,
+                机械故障: 0,
+                其他: 0,
+            };
+            this.maintenanceData.forEach((item) => {
+                const type = this.getFaultTypeLabel(item.faultType);
+                if (grouped[type] !== undefined) {
+                    grouped[type]++;
+                }
+            });
+            return Object.keys(grouped)
+                .filter((key) => grouped[key] > 0)
+                .map((key) => ({
+                    value: grouped[key],
+                    name: key,
+                    itemStyle: { color: colorMap[key] || '#999999' },
+                }));
+        },
+        updateChart() {
+            const chartDom = document.getElementById('maintenanceChart');
+            if (!chartDom) return;
+            const myChart = this.$echarts.init(chartDom);
+            const option = {
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{b}: {c} ({d}%)',
+                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                    borderColor: '#00ffff',
+                    borderWidth: 1,
+                    padding: [10, 15],
+                    textStyle: {
+                        color: '#ffffff',
+                        fontSize: 12,
+                    },
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: '5%',
+                    top: '5%',
+                    textStyle: {
+                        color: '#ffffff',
+                        fontSize: 12,
+                    },
+                },
+                series: [
+                    {
+                        name: '故障类型',
+                        type: 'pie',
+                        radius: ['35%', '60%'],
+                        center: ['60%', '50%'],
+                        avoidLabelOverlap: true,
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            formatter: '{b}\n{d}%',
+                            color: '#ffffff',
+                            fontSize: 10,
+                            distance: 20,
+                        },
+                        itemStyle: {
+                            borderRadius: 0,
+                            borderColor: '#001a33',
+                            borderWidth: 2,
+                        },
+                        labelLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#ffffff',
+                            },
+                        },
+                        data: this.getFaultTypeData(),
+                    },
+                ],
+            };
+            myChart.setOption(option);
+        },
+        async fetchMaintenanceStats() {
+            try {
+                const response = await getMaintenanceStats({ devtype: 14 });
+                this.maintenanceStats = response.data || [];
+            } catch (error) {
+                console.error('获取保养统计数据失败:', error);
+            }
+        },
+        // 鼠标进入标记点
+        handleMarkerMouseEnter(markerId, event) {
+            const device = this.devices.find((d) => d.id === markerId);
 
-      const option = {
-        tooltip: {
-          trigger: 'item',
-          formatter: '{b}: {c} ({d}%)',
-          textStyle: {
-            color: '#ffffff'
-          }
-        },
-        legend: {
-          orient: 'vertical',
-          left: 'left',
-          textStyle: {
-            color: '#ffffff',
-            fontSize: 12
-          }
-        },
-        series: [
-          {
-            name: '故障类型',
-            type: 'pie',
-            radius: ['40%', '70%'],
-            avoidLabelOverlap: false,
-            itemStyle: {
-              borderRadius: 0,
-              borderColor: '#001a33',
-              borderWidth: 2
-            },
-            label: {
-              show: true,
-              position: 'outside',
-              formatter: '{b}\n{d}%',
-              color: '#ffffff',
-              fontSize: 12
-            },
-            labelLine: {
-              show: true,
-              lineStyle: {
-                color: '#ffffff'
-              }
-            },
-            data: [
-              {value: 14, name: '机械故障', itemStyle: {color: '#ff8c00'}},
-              {value: 5, name: '电气故障', itemStyle: {color: '#9370db'}},
-              {value: 4, name: '系统故障', itemStyle: {color: '#4682b4'}},
-              {value: 4, name: '其他', itemStyle: {color: '#ffd700'}}
-            ]
-          }
-        ]
-      };
+            this.markerPopupData = {
+                id: markerId,
+                name: device ? device.deviceName : `设备 ${markerId}`,
+                status: device ? device.status : 'unknown',
+                statusText: device ? this.getStatusText(device.status) : '未知',
+            };
 
-      myChart.setOption(option);
+            const markerElement = event.currentTarget;
+            if (markerElement) {
+                const rect = markerElement.getBoundingClientRect();
+                this.markerPopupPosition = {
+                    x: rect.left + rect.width / 2,
+                    y: rect.top - 100,
+                };
+            }
 
-      window.addEventListener('resize', () => {
-        myChart.resize();
-      });
-    }
-  },
-  mounted() {
-    this.getUrlParams();
-    this.initChart();
-  }
+            this.showMarkerPopup = true;
+        },
+        // 鼠标离开标记点
+        handleMarkerMouseLeave() {
+            if (!this.markerPopupLocked) {
+                this.showMarkerPopup = false;
+                this.markerPopupData = {};
+            }
+        },
+        // 点击标记点
+        handleMarkerClick(markerId, event) {
+            if (!this.markerPopupLocked) {
+                this.markerPopupLocked = true;
+                document.addEventListener('click', this.handleDocumentClick);
+            }
+        },
+        handleDocumentClick(event) {
+            const popup = document.querySelector('.marker-popup');
+            const markers = document.querySelectorAll('.marker');
+            const isClickOnMarker = Array.from(markers).some((marker) => marker.contains(event.target));
+
+            if (popup && !popup.contains(event.target) && !isClickOnMarker) {
+                this.closeMarkerPopup();
+            }
+        },
+        closeMarkerPopup() {
+            this.showMarkerPopup = false;
+            this.markerPopupData = {};
+            this.markerPopupLocked = false;
+            document.removeEventListener('click', this.handleDocumentClick);
+        },
+        initChart() {
+            const chartDom = document.getElementById('maintenanceChart');
+            const myChart = this.$echarts.init(chartDom);
+
+            const option = {
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{b}: {c} ({d}%)',
+                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                    borderColor: '#00ffff',
+                    borderWidth: 1,
+                    padding: [10, 15],
+                    textStyle: {
+                        color: '#ffffff',
+                        fontSize: 12,
+                    },
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: '5%',
+                    top: '5%',
+                    textStyle: {
+                        color: '#ffffff',
+                        fontSize: 12,
+                    },
+                },
+                series: [
+                    {
+                        name: '故障类型',
+                        type: 'pie',
+                        radius: ['35%', '60%'],
+                        center: ['60%', '50%'],
+                        avoidLabelOverlap: true,
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            formatter: '{b}\n{d}%',
+                            color: '#ffffff',
+                            fontSize: 10,
+                            distance: 20,
+                        },
+                        itemStyle: {
+                            borderRadius: 0,
+                            borderColor: '#001a33',
+                            borderWidth: 2,
+                        },
+                        labelLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#ffffff',
+                            },
+                        },
+                        data: [
+                            { value: 14, name: '机械故障', itemStyle: { color: '#ff8c00' } },
+                            { value: 5, name: '电气故障', itemStyle: { color: '#9370db' } },
+                            { value: 4, name: '系统故障', itemStyle: { color: '#4682b4' } },
+                            { value: 4, name: '其他', itemStyle: { color: '#ffd700' } },
+                        ],
+                    },
+                ],
+            };
+
+            myChart.setOption(option);
+
+            window.addEventListener('resize', () => {
+                myChart.resize();
+            });
+        },
+    },
+    mounted() {
+        this.getUrlParams();
+        this.initChart();
+        this.fetchDeviceList();
+        this.fetchMaintenanceData();
+        this.fetchMaintenanceStats();
+    },
 };
 </script>
 
 <style scoped>
 * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
 .container {
-  width: 100%;
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  font-family: Arial, sans-serif;
-  background: url('../../../assets/picture/b4875ec42c53f353804aad374e932828.png') no-repeat center center;
-  background-size: 100% 100%;
-  color: #ffffff;
-  overflow: hidden;
+    width: 100%;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    font-family: Arial, sans-serif;
+    background: url('../../../assets/picture/b4875ec42c53f353804aad374e932828.png') no-repeat center center;
+    background-size: 100% 100%;
+    color: #ffffff;
+    overflow: hidden;
 }
 
 .header {
-  text-align: center;
-  padding: 10px 0;
-  font-size: 28px;
-  font-weight: bold;
-  color: #ffffff;
-  text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
-  flex-shrink: 0;
+    text-align: center;
+    padding: 10px 0;
+    font-size: 28px;
+    font-weight: bold;
+    color: #ffffff;
+    text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
+    flex-shrink: 0;
 }
 
 .top-section {
-  display: grid;
-  grid-template-columns: 30% 68%;
-  gap: 30px;
-  flex: 1;
-  padding: 40px;
-  padding-bottom: 20px;
-  overflow: hidden;
+    display: grid;
+    grid-template-columns: 30% 68%;
+    gap: 30px;
+    flex: 1;
+    padding: 40px;
+    padding-bottom: 20px;
+    overflow: hidden;
 }
 
 .device-sidebar {
-  background: url('../../../assets/picture/c73de8bc60f90ef1a6e63178f6d8f862.png') no-repeat center;
-  background-size: 100% 100%;
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+    background: url('../../../assets/picture/c73de8bc60f90ef1a6e63178f6d8f862.png') no-repeat center;
+    background-size: 100% 100%;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 .sidebar-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #ffffff;
-  margin-bottom: 10px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #00ffff;
-  flex-shrink: 0;
-  padding-left: 20px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+    margin-bottom: 10px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #00ffff;
+    flex-shrink: 0;
+    padding-left: 20px;
 }
 
 .table-container {
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
 }
 
 .table-section {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
 }
 
 .table-content {
-  flex: 1;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
 }
 
 .table-controls {
-  display: flex;
-  gap: 0;
-  margin-bottom: 10px;
+    display: flex;
+    gap: 0;
+    margin-bottom: 10px;
 }
 
 .control-btn {
-  padding: 6px 12px;
-  background: #0066cc;
-  border: 1px solid #0066cc;
-  color: #ffffff;
-  cursor: pointer;
-  font-size: 11px;
-  transition: all 0.3s ease;
+    padding: 6px 12px;
+    background: #0066cc;
+    border: 1px solid #0066cc;
+    color: #ffffff;
+    cursor: pointer;
+    font-size: 11px;
+    transition: all 0.3s ease;
 }
 
 .control-btn:first-child {
-  border-radius: 4px 0 0 4px;
+    border-radius: 4px 0 0 4px;
 }
 
 .control-btn:last-child {
-  border-radius: 0 4px 4px 0;
+    border-radius: 0 4px 4px 0;
 }
 
 .control-btn:hover {
-  background: #0088ff;
+    background: #0088ff;
 }
 
 .control-btn.active {
-  background: #0088ff;
+    background: #0088ff;
 }
 
 .device-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 11px;
-  flex: 1;
-  overflow: auto;
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 11px;
+    flex: 1;
+    overflow: auto;
 }
 
 .device-table th,
 .device-table td {
-  padding: 8px 10px;
-  text-align: left;
-  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
+    padding: 8px 10px;
+    text-align: center;
+    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
 }
 
 .device-table th {
-  background: rgba(0, 255, 255, 0.1);
-  color: #ffffff;
-  font-weight: bold;
+    background: rgba(0, 255, 255, 0.1);
+    color: #ffffff;
+    font-weight: bold;
 }
 
 .device-table tbody tr:hover {
-  background: rgba(0, 255, 255, 0.1);
+    background: rgba(0, 255, 255, 0.1);
 }
 
 .pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 15px;
-  gap: 5px;
-  align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 15px;
+    gap: 5px;
+    align-items: center;
 }
 
 .page-btn {
-  width: 30px;
-  height: 30px;
-  background: transparent;
-  border: none;
-  color: #ffffff;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  transition: all 0.3s ease;
+    width: 30px;
+    height: 30px;
+    background: transparent;
+    border: none;
+    color: #ffffff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    transition: all 0.3s ease;
 }
 
 .page-btn.arrow-btn {
-  background: rgba(0, 255, 255, 0.1);
-  border-radius: 4px;
+    background: rgba(0, 255, 255, 0.1);
+    border-radius: 4px;
 }
 
 .page-btn:hover {
-  background: rgba(0, 255, 255, 0.2);
+    background: rgba(0, 255, 255, 0.2);
 }
 
 .page-btn.active {
-  background: #00ffff;
-  color: #000000;
-  border-radius: 4px;
-  font-weight: bold;
+    background: #00ffff;
+    color: #000000;
+    border-radius: 4px;
+    font-weight: bold;
 }
 
 .status-badge {
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-size: 10px;
-  font-weight: bold;
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 10px;
+    font-weight: bold;
 }
 
 .status-running {
-  background: rgba(0, 255, 0, 0.2);
-  color: #00ff00;
+    background: rgba(0, 255, 0, 0.2);
+    color: #00ff00;
 }
 
 .status-warning {
-  background: rgba(255, 255, 0, 0.2);
-  color: #ffff00;
+    background: rgba(255, 255, 0, 0.2);
+    color: #ffff00;
 }
 
 .status-error {
-  background: rgba(255, 0, 0, 0.2);
-  color: #ff0000;
+    background: rgba(255, 0, 0, 0.2);
+    color: #ff0000;
 }
 
 .bottom-section {
-  flex: 1;
-  padding: 20px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    flex: 1;
+    padding: 20px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .layout-image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
 }
 
 .layout-container {
-  position: relative;
-  width: 90%;
-  height: 90%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    position: relative;
+    width: 90%;
+    height: 90%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .marker {
-  position: absolute;
-  width: 30px;
-  height: 30px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  transform: translate(-50%, -50%);
-  cursor: pointer;
-  transition: transform 0.3s ease;
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    transition: transform 0.3s ease;
 }
 
 .marker:hover {
-  transform: translate(-50%, -50%) scale(1.2);
+    transform: translate(-50%, -50%) scale(1.2);
 }
 
 .marker-1 {
-  transform: scale(1.5);
-  top: 45%; /* 相对于父元素高度的百分比 */
-  left: 16%; /* 相对于父元素宽度的百分比 */
-  background-image: url('../../../assets/picture/371b06b22391dea6aa6adf7fb36c7d2b.png');
-  position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
+    transform: scale(1.5);
+    top: 45%; /* 相对于父元素高度的百分比 */
+    left: 16%; /* 相对于父元素宽度的百分比 */
+    background-image: url('../../../assets/picture/371b06b22391dea6aa6adf7fb36c7d2b.png');
+    position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
 
-  /* 可选：防止标记点变形 */
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+    /* 可选：防止标记点变形 */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
 
-  /* 可选：使用视口单位作为备选 */
-  /* top: 10vh;
+    /* 可选：使用视口单位作为备选 */
+    /* top: 10vh;
   left: 64vw; */
 }
 
 .marker-2 {
-  transform: scale(1.5);
-  top: 45%; /* 相对于父元素高度的百分比 */
-  left: 24.6%; /* 相对于父元素宽度的百分比 */
-  background-image: url('../../../assets/picture/371b06b22391dea6aa6adf7fb36c7d2b.png');
-  position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
+    transform: scale(1.5);
+    top: 45%; /* 相对于父元素高度的百分比 */
+    left: 24.6%; /* 相对于父元素宽度的百分比 */
+    background-image: url('../../../assets/picture/371b06b22391dea6aa6adf7fb36c7d2b.png');
+    position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
 
-  /* 可选：防止标记点变形 */
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+    /* 可选：防止标记点变形 */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
 
-  /* 可选：使用视口单位作为备选 */
-  /* top: 10vh;
+    /* 可选：使用视口单位作为备选 */
+    /* top: 10vh;
   left: 64vw; */
 }
 
 .marker-3 {
-  transform: scale(1.5);
-  top: 45%; /* 相对于父元素高度的百分比 */
-  left: 33.5%; /* 相对于父元素宽度的百分比 */
-  background-image: url('../../../assets/picture/371b06b22391dea6aa6adf7fb36c7d2b.png');
-  position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
+    transform: scale(1.5);
+    top: 45%; /* 相对于父元素高度的百分比 */
+    left: 33.5%; /* 相对于父元素宽度的百分比 */
+    background-image: url('../../../assets/picture/371b06b22391dea6aa6adf7fb36c7d2b.png');
+    position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
 
-  /* 可选：防止标记点变形 */
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+    /* 可选：防止标记点变形 */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
 
-  /* 可选：使用视口单位作为备选 */
-  /* top: 10vh;
+    /* 可选：使用视口单位作为备选 */
+    /* top: 10vh;
   left: 64vw; */
 }
 
 .marker-4 {
-  transform: scale(1.5);
-  top: 42%; /* 相对于父元素高度的百分比 */
-  left: 42.6%; /* 相对于父元素宽度的百分比 */
-  background-image: url('../../../assets/picture/371b06b22391dea6aa6adf7fb36c7d2b.png');
-  position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
+    transform: scale(1.5);
+    top: 42%; /* 相对于父元素高度的百分比 */
+    left: 42.6%; /* 相对于父元素宽度的百分比 */
+    background-image: url('../../../assets/picture/371b06b22391dea6aa6adf7fb36c7d2b.png');
+    position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
 
-  /* 可选：防止标记点变形 */
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+    /* 可选：防止标记点变形 */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
 
-  /* 可选：使用视口单位作为备选 */
-  /* top: 10vh;
+    /* 可选：使用视口单位作为备选 */
+    /* top: 10vh;
   left: 64vw; */
 }
 
 .marker-5 {
-  transform: scale(1.5);
-  top: 55%; /* 相对于父元素高度的百分比 */
-  left: 26.6%; /* 相对于父元素宽度的百分比 */
-  background-image: url('../../../assets/picture/633bec62b4c6d35098f06c189591135d.png');
-  position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
+    transform: scale(1.5);
+    top: 55%; /* 相对于父元素高度的百分比 */
+    left: 26.6%; /* 相对于父元素宽度的百分比 */
+    background-image: url('../../../assets/picture/633bec62b4c6d35098f06c189591135d.png');
+    position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
 
-  /* 可选：防止标记点变形 */
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+    /* 可选：防止标记点变形 */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
 
-  /* 可选：使用视口单位作为备选 */
-  /* top: 10vh;
+    /* 可选：使用视口单位作为备选 */
+    /* top: 10vh;
   left: 64vw; */
 }
 
 .marker-6 {
-  transform: scale(1.5);
-  top: 55%; /* 相对于父元素高度的百分比 */
-  left: 35.6%; /* 相对于父元素宽度的百分比 */
-  background-image: url('../../../assets/picture/633bec62b4c6d35098f06c189591135d.png');
-  position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
+    transform: scale(1.5);
+    top: 55%; /* 相对于父元素高度的百分比 */
+    left: 35.6%; /* 相对于父元素宽度的百分比 */
+    background-image: url('../../../assets/picture/633bec62b4c6d35098f06c189591135d.png');
+    position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
 
-  /* 可选：防止标记点变形 */
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+    /* 可选：防止标记点变形 */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
 
-  /* 可选：使用视口单位作为备选 */
-  /* top: 10vh;
+    /* 可选：使用视口单位作为备选 */
+    /* top: 10vh;
   left: 64vw; */
 }
 
 .marker-15 {
-  transform: scale(1.5);
-  top: 55%; /* 相对于父元素高度的百分比 */
-  left: 44.6%; /* 相对于父元素宽度的百分比 */
-  background-image: url('../../../assets/picture/633bec62b4c6d35098f06c189591135d.png');
-  position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
+    transform: scale(1.5);
+    top: 55%; /* 相对于父元素高度的百分比 */
+    left: 44.6%; /* 相对于父元素宽度的百分比 */
+    background-image: url('../../../assets/picture/633bec62b4c6d35098f06c189591135d.png');
+    position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
 
-  /* 可选：防止标记点变形 */
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+    /* 可选：防止标记点变形 */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
 
-  /* 可选：使用视口单位作为备选 */
-  /* top: 10vh;
+    /* 可选：使用视口单位作为备选 */
+    /* top: 10vh;
   left: 64vw; */
 }
 
 .marker-16 {
-  transform: scale(1.5);
-  top: 55%; /* 相对于父元素高度的百分比 */
-  left: 17.6%; /* 相对于父元素宽度的百分比 */
-  background-image: url('../../../assets/picture/633bec62b4c6d35098f06c189591135d.png');
-  position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
+    transform: scale(1.5);
+    top: 55%; /* 相对于父元素高度的百分比 */
+    left: 17.6%; /* 相对于父元素宽度的百分比 */
+    background-image: url('../../../assets/picture/633bec62b4c6d35098f06c189591135d.png');
+    position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
 
-  /* 可选：防止标记点变形 */
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+    /* 可选：防止标记点变形 */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
 
-  /* 可选：使用视口单位作为备选 */
-  /* top: 10vh;
+    /* 可选：使用视口单位作为备选 */
+    /* top: 10vh;
   left: 64vw; */
 }
 
 .marker-7 {
-  transform: scale(1.5);
-  top: 10%; /* 相对于父元素高度的百分比 */
-  left: 64%; /* 相对于父元素宽度的百分比 */
-  background-image: url('../../../assets/picture/b257f08f180fba833e8302c54f815ba8.png');
-  position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
+    transform: scale(1.5);
+    top: 10%; /* 相对于父元素高度的百分比 */
+    left: 64%; /* 相对于父元素宽度的百分比 */
+    background-image: url('../../../assets/picture/b257f08f180fba833e8302c54f815ba8.png');
+    position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
 
-  /* 可选：防止标记点变形 */
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+    /* 可选：防止标记点变形 */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
 
-  /* 可选：使用视口单位作为备选 */
-  /* top: 10vh;
+    /* 可选：使用视口单位作为备选 */
+    /* top: 10vh;
   left: 64vw; */
 }
 
 .marker-8 {
-  transform: scale(1.5);
-  top: 24%; /* 相对于父元素高度的百分比 */
-  left: 64.7%; /* 相对于父元素宽度的百分比 */
-  background-image: url('../../../assets/picture/b257f08f180fba833e8302c54f815ba8.png');
-  position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
+    transform: scale(1.5);
+    top: 24%; /* 相对于父元素高度的百分比 */
+    left: 64.7%; /* 相对于父元素宽度的百分比 */
+    background-image: url('../../../assets/picture/b257f08f180fba833e8302c54f815ba8.png');
+    position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
 
-  /* 可选：防止标记点变形 */
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+    /* 可选：防止标记点变形 */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
 
-  /* 可选：使用视口单位作为备选 */
-  /* top: 10vh;
+    /* 可选：使用视口单位作为备选 */
+    /* top: 10vh;
   left: 64vw; */
 }
 
 .marker-9 {
-  transform: scale(1.5);
-  top: 39%; /* 相对于父元素高度的百分比 */
-  left: 65.3%; /* 相对于父元素宽度的百分比 */
-  background-image: url('../../../assets/picture/b257f08f180fba833e8302c54f815ba8.png');
-  position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
+    transform: scale(1.5);
+    top: 39%; /* 相对于父元素高度的百分比 */
+    left: 65.3%; /* 相对于父元素宽度的百分比 */
+    background-image: url('../../../assets/picture/b257f08f180fba833e8302c54f815ba8.png');
+    position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
 
-  /* 可选：防止标记点变形 */
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+    /* 可选：防止标记点变形 */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
 
-  /* 可选：使用视口单位作为备选 */
-  /* top: 10vh;
+    /* 可选：使用视口单位作为备选 */
+    /* top: 10vh;
   left: 64vw; */
 }
 
 .marker-17 {
-  transform: scale(1.5);
-  top: 68%; /* 相对于父元素高度的百分比 */
-  left: 15%; /* 相对于父元素宽度的百分比 */
-  background-image: url('../../../assets/picture/2729bbc4b984dec97dbb2d97ceb39ae6.png');
-  position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
+    transform: scale(1.5);
+    top: 68%; /* 相对于父元素高度的百分比 */
+    left: 15%; /* 相对于父元素宽度的百分比 */
+    background-image: url('../../../assets/picture/2729bbc4b984dec97dbb2d97ceb39ae6.png');
+    position: absolute; /* 确保使用绝对定位，父元素需设置相对定位 */
 
-  /* 可选：防止标记点变形 */
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+    /* 可选：防止标记点变形 */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
 
-  /* 可选：使用视口单位作为备选 */
-  /* top: 10vh;
+    /* 可选：使用视口单位作为备选 */
+    /* top: 10vh;
   left: 64vw; */
-
 }
 
 .chart-container {
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 .chart-title {
-  font-size: 14px;
-  font-weight: bold;
-  color: #ffffff;
-  margin-bottom: 10px;
-  flex-shrink: 0;
-  margin-top: -10px;
-  padding-left: 10px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #ffffff;
+    margin-bottom: 10px;
+    flex-shrink: 0;
+    margin-top: -10px;
+    padding-left: 10px;
 }
 
 .chart {
-  flex: 1;
-  min-height: 0;
+    flex: 1;
+    min-height: 0;
 }
 
 .maintenance-panel {
-  background: url('../../../assets/picture/f0f06ffbc9509f233fe5b4e670416c31.png') no-repeat center;
-  background-size: 100% 100%;
-  padding: 15px;
-  display: grid;
-  grid-template-columns: 2fr 3fr;
-  gap: 10px;
-  overflow: hidden;
-
+    background: url('../../../assets/picture/f0f06ffbc9509f233fe5b4e670416c31.png') no-repeat center;
+    background-size: 100% 100%;
+    padding: 15px;
+    display: grid;
+    grid-template-columns: 2fr 3fr;
+    gap: 10px;
+    overflow: hidden;
 }
 
 /* 流动线样式 */
 .flow-line {
-  position: absolute;
-  background: linear-gradient(90deg, transparent, rgba(0, 153, 255, 1), transparent);
-  border-radius: 3px;
-  animation: flow 2s linear infinite;
-  z-index: 5;
-  height: 4px;
-  box-shadow: 0 0 10px rgba(0, 153, 255, 0.8);
-  transform: rotate(0deg);
+    position: absolute;
+    background: linear-gradient(90deg, transparent, rgba(0, 153, 255, 1), transparent);
+    border-radius: 3px;
+    animation: flow 2s linear infinite;
+    z-index: 5;
+    height: 4px;
+    box-shadow: 0 0 10px rgba(0, 153, 255, 0.8);
+    transform: rotate(0deg);
 }
 
 @keyframes flow {
-  0% {
-    transform: rotate(var(--flow-rotation, 0deg)) translateX(-100%);
-  }
-  100% {
-    transform: rotate(var(--flow-rotation, 0deg)) translateX(100%);
-  }
+    0% {
+        transform: rotate(var(--flow-rotation, 0deg)) translateX(-100%);
+    }
+    100% {
+        transform: rotate(var(--flow-rotation, 0deg)) translateX(100%);
+    }
 }
 
 /* 左侧流水线 */
 .flow-line-1 {
-  top: 45%;
-  left: 10%;
-  width: 15%;
-  animation-delay: 0s;
-  --flow-rotation: 5deg;
+    top: 45%;
+    left: 10%;
+    width: 15%;
+    animation-delay: 0s;
+    --flow-rotation: 5deg;
 }
 
 .flow-line-2 {
-  top: 45%;
-  left: 20%;
-  width: 15%;
-  animation-delay: 0.3s;
-  --flow-rotation: 10deg;
+    top: 45%;
+    left: 20%;
+    width: 15%;
+    animation-delay: 0.3s;
+    --flow-rotation: 10deg;
 }
 
 .flow-line-3 {
-  top: 55%;
-  left: 10%;
-  width: 15%;
-  animation-delay: 0.9s;
-  --flow-rotation: -5deg;
+    top: 55%;
+    left: 10%;
+    width: 15%;
+    animation-delay: 0.9s;
+    --flow-rotation: -5deg;
 }
 
 .flow-line-4 {
-  top: 55%;
-  left: 20%;
-  width: 15%;
-  animation-delay: 1.2s;
-  --flow-rotation: -10deg;
+    top: 55%;
+    left: 20%;
+    width: 15%;
+    animation-delay: 1.2s;
+    --flow-rotation: -10deg;
 }
 
 .flow-line-5 {
-  top: 55%;
-  left: 20%;
-  width: 15%;
-  animation-delay: 1.2s;
-  --flow-rotation: -15deg;
+    top: 55%;
+    left: 20%;
+    width: 15%;
+    animation-delay: 1.2s;
+    --flow-rotation: -15deg;
 }
 
 .flow-line-6 {
-  top: 55%;
-  left: 30%;
-  width: 15%;
-  animation-delay: 1.5s;
-  --flow-rotation: -20deg;
+    top: 55%;
+    left: 30%;
+    width: 15%;
+    animation-delay: 1.5s;
+    --flow-rotation: -20deg;
 }
 
 /* 右侧流水线 */
 .flow-line-7 {
-  top: 20%;
-  left: 60%;
-  width: 25%;
-  animation-delay: 0s;
-  --flow-rotation: 15deg;
+    top: 20%;
+    left: 60%;
+    width: 25%;
+    animation-delay: 0s;
+    --flow-rotation: 15deg;
 }
 
 .flow-line-8 {
-  top: 30%;
-  left: 65%;
-  width: 20%;
-  animation-delay: 0.5s;
-  --flow-rotation: 10deg;
+    top: 30%;
+    left: 65%;
+    width: 20%;
+    animation-delay: 0.5s;
+    --flow-rotation: 10deg;
 }
 
 .flow-line-9 {
-  top: 40%;
-  left: 70%;
-  width: 15%;
-  animation-delay: 1s;
-  --flow-rotation: 5deg;
+    top: 40%;
+    left: 70%;
+    width: 15%;
+    animation-delay: 1s;
+    --flow-rotation: 5deg;
 }
 
 .flow-line-10 {
-  top: 50%;
-  left: 75%;
-  width: 10%;
-  animation-delay: 1.5s;
-  --flow-rotation: 0deg;
+    top: 50%;
+    left: 75%;
+    width: 10%;
+    animation-delay: 1.5s;
+    --flow-rotation: 0deg;
 }
 
+/* 标记点冒泡样式 */
+.marker-popup {
+    position: fixed;
+    z-index: 1000;
+    transform: translateX(-50%);
+    pointer-events: none;
+}
+
+.popup-content {
+    background: linear-gradient(135deg, rgba(10, 22, 40, 0.85) 0%, rgba(26, 42, 74, 0.85) 100%);
+    border: 1px solid rgba(0, 255, 255, 0.5);
+    border-radius: 8px;
+    padding: 15px 20px;
+    min-width: 200px;
+    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
+    pointer-events: auto;
+    backdrop-filter: blur(10px);
+}
+
+.popup-arrow {
+    position: absolute;
+    bottom: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid #00ffff;
+}
+
+.popup-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #00ffff;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.popup-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.popup-info:last-child {
+    margin-bottom: 0;
+}
+
+.popup-label {
+    color: #888888;
+    font-size: 12px;
+    margin-right: 8px;
+}
+
+.popup-value {
+    color: #ffffff;
+    font-size: 12px;
+}
 </style>