diff --git a/src/views/scada/picture/screen.vue b/src/views/scada/picture/screen.vue
index 9183950..f63a7ee 100644
--- a/src/views/scada/picture/screen.vue
+++ b/src/views/scada/picture/screen.vue
@@ -1,141 +1,141 @@
 <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.id">
+              <td>{{ device.name }}</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)"
+              </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="{
+                </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 === '故障'
@@ -143,870 +143,1121 @@
                                         >
                                             {{ 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>
-                        </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>
-                <!-- 流动线 -->
+                </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 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>
+    </div>
+  </div>
 </template>
 
 <script>
 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,
-            
-            // 表格数据
-            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);
+  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,
+
+      // 表格数据
+      activeTable: '维修完成情况',
+      maintenanceCurrentPage: 1,
+      maintenanceItemsPerPage: 5,
+      maintenanceData: [
+        // 维修完成情况数据（20条）
+        {
+          workOrderId: 'GZ20241106001',
+          workOrderName: '片剂生产',
+          deviceName: '压片机',
+          priority: '高',
+          status: 'running'
         },
-        filteredDevices() {
-            const start = (this.deviceCurrentPage - 1) * this.deviceItemsPerPage;
-            return this.devices.slice(start, start + this.deviceItemsPerPage);
+        {
+          workOrderId: 'GZ20241106002',
+          workOrderName: '胶囊填充',
+          deviceName: '胶囊充填机',
+          priority: '中',
+          status: 'warning'
         },
-        maintenanceTotalPages() {
-            const data = this.activeTable === '维修完成情况' ? this.maintenanceData : this.maintenanceStats;
-            return Math.ceil(data.length / this.maintenanceItemsPerPage);
+        {
+          workOrderId: 'GZ20241106003',
+          workOrderName: '药品包装',
+          deviceName: '包装机',
+          priority: '高',
+          status: 'running'
         },
-        filteredMaintenanceData() {
-            const data = this.activeTable === '维修完成情况' ? this.maintenanceData : this.maintenanceStats;
-            const start = (this.maintenanceCurrentPage - 1) * this.maintenanceItemsPerPage;
-            return data.slice(start, start + this.maintenanceItemsPerPage);
+        {
+          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'
         }
-    },
-    methods: {
-        // 获取URL参数
-        getUrlParams() {
-            this.id = this.$route.query.id || '';
-            this.guid = this.$route.query.guid || '';
-            console.log('URL参数:', { id: this.id, guid: this.guid });
+      ],
+      maintenanceStats: [
+        // 保养统计数据（20条）
+        {
+          maintenanceId: 'BY20241106001',
+          maintenanceName: '季度保养',
+          deviceName: '压片机',
+          maintenanceCycle: '3个月',
+          status: '已完成'
         },
-        selectDevice(deviceId) {
-            this.selectedDevice = deviceId;
+        {
+          maintenanceId: 'BY20241106002',
+          maintenanceName: '月度保养',
+          deviceName: '胶囊充填机',
+          maintenanceCycle: '1个月',
+          status: '待开始'
         },
-        getStatusClass(status) {
-            switch(status) {
-                case 'running': return 'status-running';
-                case 'warning': return 'status-warning';
-                case 'error': return 'status-error';
-                default: return '';
-            }
+        {
+          maintenanceId: 'BY20241106003',
+          maintenanceName: '年度保养',
+          deviceName: '包装机',
+          maintenanceCycle: '12个月',
+          status: '已完成'
         },
-        getStatusText(status) {
-            switch(status) {
-                case 'running': return '运行中';
-                case 'warning': return '预警';
-                case 'error': return '故障';
-                default: return '未知';
-            }
+        {
+          maintenanceId: 'BY20241106004',
+          maintenanceName: '季度保养',
+          deviceName: '灭菌器',
+          maintenanceCycle: '3个月',
+          status: '已完成'
         },
-        goToPreviousPage() {
-            if (this.maintenanceCurrentPage > 1) {
-                this.maintenanceCurrentPage--;
-            }
+        {
+          maintenanceId: 'BY20241106005',
+          maintenanceName: '月度保养',
+          deviceName: '冻干机',
+          maintenanceCycle: '1个月',
+          status: '已完成'
         },
-        goToNextPage() {
-            if (this.maintenanceCurrentPage < this.maintenanceTotalPages) {
-                this.maintenanceCurrentPage++;
-            }
+        {
+          maintenanceId: 'BY20241106006',
+          maintenanceName: '季度保养',
+          deviceName: '配料系统',
+          maintenanceCycle: '3个月',
+          status: '已完成'
         },
-        goToPreviousDevicePage() {
-            if (this.deviceCurrentPage > 1) {
-                this.deviceCurrentPage--;
-            }
+        {
+          maintenanceId: 'BY20241106007',
+          maintenanceName: '月度保养',
+          deviceName: '贴标机',
+          maintenanceCycle: '1个月',
+          status: '已完成'
         },
-        goToNextDevicePage() {
-            if (this.deviceCurrentPage < this.deviceTotalPages) {
-                this.deviceCurrentPage++;
-            }
+        {
+          maintenanceId: 'BY20241106008',
+          maintenanceName: '年度保养',
+          deviceName: '灭菌烘箱',
+          maintenanceCycle: '12个月',
+          status: '故障'
         },
-        // 标记点点击事件处理函数（预留）
-        handleMarkerClick(markerId) {
-            console.log('Marker clicked:', markerId);
-            // 后续可以根据markerId执行不同的操作
-            // 例如：显示设备详情、跳转到设备监控页面等
+        {
+          maintenanceId: 'BY20241106009',
+          maintenanceName: '季度保养',
+          deviceName: '颗粒包装机',
+          maintenanceCycle: '3个月',
+          status: '已完成'
         },
-        initChart() {
-            const chartDom = document.getElementById('maintenanceChart');
-            const myChart = this.$echarts.init(chartDom);
-            
-            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' } }
-                        ]
-                    }
-                ]
-            };
-            
-            myChart.setOption(option);
-            
-            window.addEventListener('resize', () => {
-                myChart.resize();
-            });
+        {
+          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);
     },
-    mounted() {
-        this.getUrlParams();
-        this.initChart();
+    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);
     }
+  },
+  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);
+
+      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'}}
+            ]
+          }
+        ]
+      };
+
+      myChart.setOption(option);
+
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
+    }
+  },
+  mounted() {
+    this.getUrlParams();
+    this.initChart();
+  }
 };
 </script>
 
 <style scoped>
-    * {
-        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;
-    }
-    
-    .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;
-    }
-    
-    .top-section {
-        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;
-    }
-    
-    .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;
-    }
-    
-    .table-container {
-        padding: 15px;
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        overflow: hidden;
-    }
-    
-    .table-section {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        overflow: hidden;
-    }
-    
-    .table-content {
-        flex: 1;
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-    }
-    
-    .table-controls {
-        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;
-    }
-    
-    .control-btn:first-child {
-        border-radius: 4px 0 0 4px;
-    }
-    
-    .control-btn:last-child {
-        border-radius: 0 4px 4px 0;
-    }
-    
-    .control-btn:hover {
-        background: #0088ff;
-    }
-    
-    .control-btn.active {
-        background: #0088ff;
-    }
-    
-    .device-table {
-        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);
-    }
-    
-    .device-table th {
-        background: rgba(0, 255, 255, 0.1);
-        color: #ffffff;
-        font-weight: bold;
-    }
-    
-    .device-table tbody tr:hover {
-        background: rgba(0, 255, 255, 0.1);
-    }
-    
-    .pagination {
-        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;
-    }
-    
-    .page-btn.arrow-btn {
-        background: rgba(0, 255, 255, 0.1);
-        border-radius: 4px;
-    }
-    
-    .page-btn:hover {
-        background: rgba(0, 255, 255, 0.2);
-    }
-    
-    .page-btn.active {
-        background: #00ffff;
-        color: #000000;
-        border-radius: 4px;
-        font-weight: bold;
-    }
-    
-    .status-badge {
-        padding: 4px 8px;
-        border-radius: 12px;
-        font-size: 10px;
-        font-weight: bold;
-    }
-    
-    .status-running {
-        background: rgba(0, 255, 0, 0.2);
-        color: #00ff00;
-    }
-    
-    .status-warning {
-        background: rgba(255, 255, 0, 0.2);
-        color: #ffff00;
-    }
-    
-    .status-error {
-        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;
-    }
-    
-    .layout-image {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-    }
-    
-    .layout-container {
-        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;
-    }
-    
-    .marker:hover {
-        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;  /* 确保使用绝对定位，父元素需设置相对定位 */
-    
-    /* 可选：防止标记点变形 */
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-    
-    /* 可选：使用视口单位作为备选 */
-    /* top: 10vh;
-    left: 64vw; */
-    }
-    
-    .marker-2 {
-                 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;
-    
-    /* 可选：使用视口单位作为备选 */
-    /* top: 10vh;
-    left: 64vw; */
-    }
-    
-    .marker-3 {
-      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;
-    
-    /* 可选：使用视口单位作为备选 */
-    /* top: 10vh;
-    left: 64vw; */
-    }
-    
-    .marker-4 {
-        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;
-    
-    /* 可选：使用视口单位作为备选 */
-    /* top: 10vh;
-    left: 64vw; */
-    }
-    
-    .marker-5 {
-          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;
-    
-    /* 可选：使用视口单位作为备选 */
-    /* top: 10vh;
-    left: 64vw; */
-    }
-    
-    .marker-6 {
-        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;
-    
-    /* 可选：使用视口单位作为备选 */
-    /* top: 10vh;
-    left: 64vw; */
-    }
-       .marker-15 {
-              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;
-    
-    /* 可选：使用视口单位作为备选 */
-    /* top: 10vh;
-    left: 64vw; */
-    }
-    
-    .marker-16 {
-           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;
-    
-    /* 可选：使用视口单位作为备选 */
-    /* top: 10vh;
-    left: 64vw; */
-    }
-    
-  .marker-7 {
-    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;
-    
-    /* 可选：使用视口单位作为备选 */
-    /* top: 10vh;
-    left: 64vw; */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
-    
-    .marker-8 {
-               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;
-    
-    /* 可选：使用视口单位作为备选 */
-    /* top: 10vh;
-    left: 64vw; */
-    }
 
-     .marker-9 {
-             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;
-    
-    /* 可选：使用视口单位作为备选 */
-    /* top: 10vh;
-    left: 64vw; */
-    }
-      .marker-17 {
- 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;
-    
-    /* 可选：使用视口单位作为备选 */
-    /* top: 10vh;
-    left: 64vw; */
+.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;
+}
 
-    }
-    .chart-container {
-        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;
-    }
-    
-    .chart {
-        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;
-       
-    }
-    
-    /* 流动线样式 */
-    .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);
-    }
-    
-    @keyframes flow {
-        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;
-    }
-    
-    .flow-line-2 {
-        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;
-    }
-    
-    .flow-line-4 {
-        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;
-    }
-    
-    .flow-line-6 {
-        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;
-    }
-    
-    .flow-line-8 {
-        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;
-    }
-    
-    .flow-line-10 {
-        top: 50%;
-        left: 75%;
-        width: 10%;
-        animation-delay: 1.5s;
-        --flow-rotation: 0deg;
-    }
-    
-</style>
\ No newline at end of file
+.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;
+}
+
+.top-section {
+  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;
+}
+
+.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;
+}
+
+.table-container {
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.table-section {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.table-content {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.table-controls {
+  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;
+}
+
+.control-btn:first-child {
+  border-radius: 4px 0 0 4px;
+}
+
+.control-btn:last-child {
+  border-radius: 0 4px 4px 0;
+}
+
+.control-btn:hover {
+  background: #0088ff;
+}
+
+.control-btn.active {
+  background: #0088ff;
+}
+
+.device-table {
+  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);
+}
+
+.device-table th {
+  background: rgba(0, 255, 255, 0.1);
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.device-table tbody tr:hover {
+  background: rgba(0, 255, 255, 0.1);
+}
+
+.pagination {
+  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;
+}
+
+.page-btn.arrow-btn {
+  background: rgba(0, 255, 255, 0.1);
+  border-radius: 4px;
+}
+
+.page-btn:hover {
+  background: rgba(0, 255, 255, 0.2);
+}
+
+.page-btn.active {
+  background: #00ffff;
+  color: #000000;
+  border-radius: 4px;
+  font-weight: bold;
+}
+
+.status-badge {
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: bold;
+}
+
+.status-running {
+  background: rgba(0, 255, 0, 0.2);
+  color: #00ff00;
+}
+
+.status-warning {
+  background: rgba(255, 255, 0, 0.2);
+  color: #ffff00;
+}
+
+.status-error {
+  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;
+}
+
+.layout-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.layout-container {
+  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;
+}
+
+.marker:hover {
+  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; /* 确保使用绝对定位，父元素需设置相对定位 */
+
+  /* 可选：防止标记点变形 */
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  /* 可选：使用视口单位作为备选 */
+  /* top: 10vh;
+  left: 64vw; */
+}
+
+.marker-2 {
+  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;
+
+  /* 可选：使用视口单位作为备选 */
+  /* top: 10vh;
+  left: 64vw; */
+}
+
+.marker-3 {
+  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;
+
+  /* 可选：使用视口单位作为备选 */
+  /* top: 10vh;
+  left: 64vw; */
+}
+
+.marker-4 {
+  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;
+
+  /* 可选：使用视口单位作为备选 */
+  /* top: 10vh;
+  left: 64vw; */
+}
+
+.marker-5 {
+  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;
+
+  /* 可选：使用视口单位作为备选 */
+  /* top: 10vh;
+  left: 64vw; */
+}
+
+.marker-6 {
+  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;
+
+  /* 可选：使用视口单位作为备选 */
+  /* top: 10vh;
+  left: 64vw; */
+}
+
+.marker-15 {
+  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;
+
+  /* 可选：使用视口单位作为备选 */
+  /* top: 10vh;
+  left: 64vw; */
+}
+
+.marker-16 {
+  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;
+
+  /* 可选：使用视口单位作为备选 */
+  /* top: 10vh;
+  left: 64vw; */
+}
+
+.marker-7 {
+  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;
+
+  /* 可选：使用视口单位作为备选 */
+  /* top: 10vh;
+  left: 64vw; */
+}
+
+.marker-8 {
+  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;
+
+  /* 可选：使用视口单位作为备选 */
+  /* top: 10vh;
+  left: 64vw; */
+}
+
+.marker-9 {
+  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;
+
+  /* 可选：使用视口单位作为备选 */
+  /* top: 10vh;
+  left: 64vw; */
+}
+
+.marker-17 {
+  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;
+
+  /* 可选：使用视口单位作为备选 */
+  /* top: 10vh;
+  left: 64vw; */
+
+}
+
+.chart-container {
+  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;
+}
+
+.chart {
+  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;
+
+}
+
+/* 流动线样式 */
+.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);
+}
+
+@keyframes flow {
+  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;
+}
+
+.flow-line-2 {
+  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;
+}
+
+.flow-line-4 {
+  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;
+}
+
+.flow-line-6 {
+  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;
+}
+
+.flow-line-8 {
+  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;
+}
+
+.flow-line-10 {
+  top: 50%;
+  left: 75%;
+  width: 10%;
+  animation-delay: 1.5s;
+  --flow-rotation: 0deg;
+}
+
+</style>