diff --git a/src/views/scada/picture/screen.vue b/src/views/scada/picture/screen.vue
index e6f0fde..af2ee3b 100644
--- a/src/views/scada/picture/screen.vue
+++ b/src/views/scada/picture/screen.vue
@@ -16,7 +16,7 @@
                         </thead>
                         <tbody>
                             <tr v-for="device in filteredDevices" :key="device.deviceId" @click="openDeviceModal(device)">
-                                <td>{{ device.deviceName }}</td>
+                                <td :title="device.deviceName" class="tooltip-cell">{{ device.deviceName }}</td>
                                 <td>
                                     <span class="status-badge" :class="getStatusClass(device.status)">
                                         {{ getStatusText(device.status) }}
@@ -57,7 +57,6 @@
                         <table class="device-table" v-if="activeTable === '维修完成情况'">
                             <thead>
                                 <tr>
-                                    <th>工单编号</th>
                                     <th>设备名称</th>
                                     <th>设备编号</th>
                                     <th>故障类型</th>
@@ -69,14 +68,13 @@
                             </thead>
                             <tbody>
                                 <tr v-for="(item, index) in filteredMaintenanceData" :key="index">
-                                    <td>{{ item.number || '-' }}</td>
-                                    <td>{{ item.name || '-' }}</td>
+                                    <td :title="item.name || '-'" class="tooltip-cell">{{ 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>
+                                    <td :title="item.maintenancePerson || '-'" class="tooltip-cell">{{ item.maintenancePerson || '-' }}</td>
                                 </tr>
                             </tbody>
                         </table>
@@ -85,7 +83,7 @@
                         <table class="device-table" v-if="activeTable === '保养统计'">
                             <thead>
                                 <tr>
-                                    <th>工单编号</th>
+                                    <!-- <th>工单编号</th> -->
                                     <th>设备名称</th>
                                     <th>设备编号</th>
                                     <th>保养级别</th>
@@ -95,11 +93,11 @@
                             </thead>
                             <tbody>
                                 <tr v-for="(item, index) in filteredMaintenanceData" :key="index">
-                                    <td>{{ item.orderId || '-' }}</td>
-                                    <td>{{ item.orderName || '-' }}</td>
+                                    <!-- <td>{{ item.orderId || '-' }}</td> -->
+                                    <td :title="item.orderName || '-'" class="tooltip-cell">{{ item.orderName || '-' }}</td>
                                     <td>{{ item.equipmentCode || '-' }}</td>
                                     <td>{{ getUpkeepLevelLabel(item.upkeepLevel) || '-' }}</td>
-                                    <td>{{ item.maintainer || '-' }}</td>
+                                    <td :title="item.maintainer || '-'" class="tooltip-cell">{{ item.maintainer || '-' }}</td>
                                     <td>{{ item.upkeepTime || '-' }}</td>
                                 </tr>
                             </tbody>
@@ -383,35 +381,38 @@ export default {
                     backgroundColor: 'rgba(0, 0, 0, 0.8)',
                     borderColor: '#00ffff',
                     borderWidth: 1,
-                    padding: [10, 15],
+                    padding: [8, 12],
                     textStyle: {
                         color: '#ffffff',
-                        fontSize: 12,
+                        fontSize: 11,
                     },
                 },
                 legend: {
-                    orient: 'vertical',
-                    left: '5%',
-                    top: '5%',
+                    orient: 'horizontal',
+                    left: 'center',
+                    top: '12%',
                     textStyle: {
                         color: '#ffffff',
-                        fontSize: 12,
+                        fontSize: 14,
                     },
+                    itemWidth: 14,
+                    itemHeight: 14,
+                    itemGap: 20,
                 },
                 series: [
                     {
                         name: '故障类型',
                         type: 'pie',
-                        radius: ['35%', '60%'],
-                        center: ['60%', '50%'],
+                        radius: ['28%', '52%'],
+                        center: ['50%', '62%'],
                         avoidLabelOverlap: true,
                         label: {
                             show: true,
                             position: 'outside',
-                            formatter: '{b}\n{d}%',
+                            formatter: '{d}%',
                             color: '#ffffff',
-                            fontSize: 10,
-                            distance: 20,
+                            fontSize: 13,
+                            distance: 12,
                         },
                         itemStyle: {
                             borderRadius: 0,
@@ -420,6 +421,8 @@ export default {
                         },
                         labelLine: {
                             show: true,
+                            length: 10,
+                            length2: 8,
                             lineStyle: {
                                 color: '#ffffff',
                             },
@@ -692,10 +695,10 @@ export default {
 .top-section {
     display: grid;
     grid-template-columns: 30% 68%;
-    gap: 30px;
+    gap: 2%;
     flex: 1;
-    padding: 40px;
-    padding-bottom: 20px;
+    padding: 30px;
+    padding-bottom: 15px;
     overflow: hidden;
 }
 
@@ -725,6 +728,12 @@ export default {
     flex-direction: column;
     flex: 1;
     overflow: hidden;
+    min-height: 0;
+}
+
+.table-container .device-table {
+    flex: 1;
+    width: 100%;
 }
 
 .table-section {
@@ -741,6 +750,11 @@ export default {
     flex-direction: column;
 }
 
+.table-content table {
+    flex: 1;
+    width: 100%;
+}
+
 .table-controls {
     display: flex;
     gap: 0;
@@ -753,7 +767,7 @@ export default {
     border: 1px solid #0066cc;
     color: #ffffff;
     cursor: pointer;
-    font-size: 11px;
+    font-size: 15px;
     transition: all 0.3s ease;
 }
 
@@ -775,29 +789,85 @@ export default {
 
 .device-table {
     width: 100%;
+    min-width: unset;
     border-collapse: collapse;
-    font-size: 11px;
-    flex: 1;
-    overflow: auto;
+    font-size: 14px;
+    table-layout: fixed;
+}
+
+.device-table tbody {
+    display: table-row-group;
+}
+
+.device-table tr {
+    height: auto;
 }
 
 .device-table th,
 .device-table td {
-    padding: 8px 10px;
+    padding: 10px 8px;
     text-align: center;
-    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
+    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: auto;
 }
 
 .device-table th {
-    background: rgba(0, 255, 255, 0.1);
+    background: rgba(0, 255, 255, 0.15);
     color: #ffffff;
     font-weight: bold;
+    font-size: 13px;
 }
 
 .device-table tbody tr:hover {
     background: rgba(0, 255, 255, 0.1);
 }
 
+.table-content .device-table {
+    min-width: 500px;
+}
+
+.table-content .device-table th,
+.table-content .device-table td {
+    max-width: 120px;
+}
+
+.tooltip-cell {
+    cursor: help;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+}
+
+.tooltip-cell::after {
+    content: attr(title);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: linear-gradient(135deg, rgba(0, 60, 100, 0.98) 0%, rgba(0, 30, 60, 0.98) 100%);
+    border: 1px solid #00ffff;
+    border-radius: 6px;
+    padding: 8px 14px;
+    font-size: 12px;
+    color: #00ffff;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    z-index: 100;
+    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4), inset 0 0 20px rgba(0, 255, 255, 0.1);
+    transition: all 0.2s ease;
+}
+
+.tooltip-cell:hover::after {
+    opacity: 1;
+    visibility: visible;
+}
+
 .pagination {
     display: flex;
     justify-content: flex-end;
@@ -975,13 +1045,13 @@ export default {
 }
 
 .chart-title {
-    font-size: 14px;
+    font-size: 16px;
     font-weight: bold;
     color: #ffffff;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
     flex-shrink: 0;
     margin-top: -10px;
-    padding-left: 10px;
+    padding-left: 15px;
 }
 
 .chart {
diff --git a/src/views/scada/picture/screen2.vue b/src/views/scada/picture/screen2.vue
index 739e6d8..7a34e14 100644
--- a/src/views/scada/picture/screen2.vue
+++ b/src/views/scada/picture/screen2.vue
@@ -15,8 +15,8 @@
                             </tr>
                         </thead>
                         <tbody>
-                            <tr v-for="device in filteredDevices" :key="device.deviceId" @click="openDeviceModal(device)">
-                                <td>{{ device.deviceName }}</td>
+                            <tr v-for="(device, index) in filteredDevices" :key="device.deviceId" @click="openDeviceModal(device)">
+                                <td :title="device.deviceName" class="tooltip-cell" :class="{ 'has-tooltip': isTruncated(index, 'device') }">{{ device.deviceName }}</td>
                                 <td>
                                     <span class="status-badge" :class="getStatusClass(device.status)">
                                         {{ getStatusText(device.status) }}
@@ -57,7 +57,6 @@
                         <table class="device-table" v-if="activeTable === '维修完成情况'">
                             <thead>
                                 <tr>
-                                    <th>工单编号</th>
                                     <th>设备名称</th>
                                     <th>设备编号</th>
                                     <th>故障类型</th>
@@ -68,13 +67,12 @@
                             </thead>
                             <tbody>
                                 <tr v-for="(item, index) in filteredMaintenanceData" :key="index">
-                                    <td>{{ item.number || '-' }}</td>
-                                    <td>{{ item.name || '-' }}</td>
+                                    <td :title="item.name || '-'" class="tooltip-cell">{{ item.name || '-' }}</td>
                                     <td>{{ item.devNo || '-' }}</td>
                                     <td>{{ getFaultTypeLabel(item.faultType) || '-' }}</td>
                                     <td>{{ getPriorityLabel(item.priority) || '-' }}</td>
                                     <td>{{ formatDate(item.repairDate) }}</td>
-                                    <td>{{ item.maintenancePerson || '-' }}</td>
+                                    <td :title="item.maintenancePerson || '-'" class="tooltip-cell">{{ item.maintenancePerson || '-' }}</td>
                                 </tr>
                             </tbody>
                         </table>
@@ -83,7 +81,7 @@
                         <table class="device-table" v-if="activeTable === '保养统计'">
                             <thead>
                                 <tr>
-                                    <th>工单编号</th>
+                                    <!-- <th>工单编号</th> -->
                                     <th>设备名称</th>
                                     <th>设备编号</th>
                                     <th>保养级别</th>
@@ -93,11 +91,11 @@
                             </thead>
                             <tbody>
                                 <tr v-for="(item, index) in filteredMaintenanceData" :key="index">
-                                    <td>{{ item.orderId || '-' }}</td>
-                                    <td>{{ item.orderName || '-' }}</td>
+                                    <!-- <td>{{ item.orderId || '-' }}</td> -->
+                                    <td :title="item.orderName || '-'" class="tooltip-cell">{{ item.orderName || '-' }}</td>
                                     <td>{{ item.equipmentCode || '-' }}</td>
                                     <td>{{ getUpkeepLevelLabel(item.upkeepLevel) || '-' }}</td>
-                                    <td>{{ item.maintainer || '-' }}</td>
+                                    <td :title="item.maintenancePerson || '-'" class="tooltip-cell">{{ item.maintenancePerson || '-' }}</td>
                                     <td>{{ item.upkeepTime || '-' }}</td>
                                 </tr>
                             </tbody>
@@ -267,6 +265,9 @@ export default {
                 this.maintenanceCurrentPage++;
             }
         },
+        isTruncated(index, type) {
+            return true;
+        },
         goToPreviousDevicePage() {
             if (this.deviceCurrentPage > 1) {
                 this.deviceCurrentPage--;
@@ -378,35 +379,38 @@ export default {
                     backgroundColor: 'rgba(0, 0, 0, 0.8)',
                     borderColor: '#00ffff',
                     borderWidth: 1,
-                    padding: [10, 15],
+                    padding: [8, 12],
                     textStyle: {
                         color: '#ffffff',
-                        fontSize: 12,
+                        fontSize: 11,
                     },
                 },
                 legend: {
-                    orient: 'vertical',
-                    left: '5%',
-                    top: '5%',
+                    orient: 'horizontal',
+                    left: 'center',
+                    top: '12%',
                     textStyle: {
                         color: '#ffffff',
-                        fontSize: 12,
+                        fontSize: 14,
                     },
+                    itemWidth: 14,
+                    itemHeight: 14,
+                    itemGap: 20,
                 },
                 series: [
                     {
                         name: '故障类型',
                         type: 'pie',
-                        radius: ['35%', '60%'],
-                        center: ['60%', '50%'],
+                        radius: ['28%', '52%'],
+                        center: ['50%', '62%'],
                         avoidLabelOverlap: true,
                         label: {
                             show: true,
                             position: 'outside',
-                            formatter: '{b}\n{d}%',
+                            formatter: '{d}%',
                             color: '#ffffff',
-                            fontSize: 10,
-                            distance: 20,
+                            fontSize: 13,
+                            distance: 12,
                         },
                         itemStyle: {
                             borderRadius: 0,
@@ -415,6 +419,8 @@ export default {
                         },
                         labelLine: {
                             show: true,
+                            length: 10,
+                            length2: 8,
                             lineStyle: {
                                 color: '#ffffff',
                             },
@@ -684,10 +690,10 @@ export default {
 .top-section {
     display: grid;
     grid-template-columns: 30% 68%;
-    gap: 30px;
+    gap: 2%;
     flex: 1;
-    padding: 40px;
-    padding-bottom: 20px;
+    padding: 30px;
+    padding-bottom: 15px;
     overflow: hidden;
 }
 
@@ -717,6 +723,12 @@ export default {
     flex-direction: column;
     flex: 1;
     overflow: hidden;
+    min-height: 0;
+}
+
+.table-container .device-table {
+    flex: 1;
+    width: 100%;
 }
 
 .table-section {
@@ -733,6 +745,11 @@ export default {
     flex-direction: column;
 }
 
+.table-content table {
+    flex: 1;
+    width: 100%;
+}
+
 .table-controls {
     display: flex;
     gap: 0;
@@ -745,7 +762,7 @@ export default {
     border: 1px solid #0066cc;
     color: #ffffff;
     cursor: pointer;
-    font-size: 11px;
+    font-size: 15px;
     transition: all 0.3s ease;
 }
 
@@ -767,29 +784,85 @@ export default {
 
 .device-table {
     width: 100%;
+    min-width: unset;
     border-collapse: collapse;
-    font-size: 11px;
-    flex: 1;
-    overflow: auto;
+    font-size: 14px;
+    table-layout: fixed;
+}
+
+.device-table tbody {
+    display: table-row-group;
+}
+
+.device-table tr {
+    height: auto;
 }
 
 .device-table th,
 .device-table td {
-    padding: 8px 10px;
+    padding: 10px 8px;
     text-align: center;
-    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
+    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    height: auto;
 }
 
 .device-table th {
-    background: rgba(0, 255, 255, 0.1);
+    background: rgba(0, 255, 255, 0.15);
     color: #ffffff;
     font-weight: bold;
+    font-size: 13px;
 }
 
 .device-table tbody tr:hover {
     background: rgba(0, 255, 255, 0.1);
 }
 
+.table-content .device-table {
+    min-width: 500px;
+}
+
+.table-content .device-table th,
+.table-content .device-table td {
+    max-width: 120px;
+}
+
+.tooltip-cell {
+    cursor: help;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+}
+
+.tooltip-cell::after {
+    content: attr(title);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: linear-gradient(135deg, rgba(0, 60, 100, 0.98) 0%, rgba(0, 30, 60, 0.98) 100%);
+    border: 1px solid #00ffff;
+    border-radius: 6px;
+    padding: 8px 14px;
+    font-size: 12px;
+    color: #00ffff;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    z-index: 100;
+    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4), inset 0 0 20px rgba(0, 255, 255, 0.1);
+    transition: all 0.2s ease;
+}
+
+.tooltip-cell:hover::after {
+    opacity: 1;
+    visibility: visible;
+}
+
 .pagination {
     display: flex;
     justify-content: flex-end;
@@ -967,13 +1040,13 @@ export default {
 }
 
 .chart-title {
-    font-size: 14px;
+    font-size: 16px;
     font-weight: bold;
     color: #ffffff;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
     flex-shrink: 0;
     margin-top: -10px;
-    padding-left: 10px;
+    padding-left: 15px;
 }
 
 .chart {