From 15e97df699d483d659a242585e38bccb187d4bae Mon Sep 17 00:00:00 2001 From: shih <510524130@qq.com> Date: Mon, 11 May 2026 10:44:34 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E6=80=81=E6=A0=B7=E5=BC=8F=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/scada/picture/screen.vue | 136 ++++++++++++++++++++------- src/views/scada/picture/screen2.vue | 141 +++++++++++++++++++++------- 2 files changed, 210 insertions(+), 67 deletions(-) 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 @@ - {{ device.deviceName }} + {{ device.deviceName }} {{ getStatusText(device.status) }} @@ -57,7 +57,6 @@ - @@ -69,14 +68,13 @@ - - + - +
工单编号 设备名称 设备编号 故障类型
{{ item.number || '-' }}{{ item.name || '-' }}{{ item.name || '-' }} {{ item.devNo || '-' }} {{ getFaultTypeLabel(item.faultType) || '-' }} {{ getPriorityLabel(item.priority) || '-' }} {{ formatDate(item.repairDate) }} {{ item.maintenancePerson || '-' }}{{ item.maintenancePerson || '-' }}
@@ -85,7 +83,7 @@ - + @@ -95,11 +93,11 @@ - - + + - + @@ -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 @@ - - + +
工单编号 设备名称 设备编号 保养级别
{{ item.orderId || '-' }}{{ item.orderName || '-' }}{{ item.orderName || '-' }} {{ item.equipmentCode || '-' }} {{ getUpkeepLevelLabel(item.upkeepLevel) || '-' }}{{ item.maintainer || '-' }}{{ item.maintainer || '-' }} {{ item.upkeepTime || '-' }}
{{ device.deviceName }}
{{ device.deviceName }} {{ getStatusText(device.status) }} @@ -57,7 +57,6 @@ - @@ -68,13 +67,12 @@ - - + - +
工单编号 设备名称 设备编号 故障类型
{{ item.number || '-' }}{{ item.name || '-' }}{{ item.name || '-' }} {{ item.devNo || '-' }} {{ getFaultTypeLabel(item.faultType) || '-' }} {{ getPriorityLabel(item.priority) || '-' }} {{ formatDate(item.repairDate) }}{{ item.maintenancePerson || '-' }}{{ item.maintenancePerson || '-' }}
@@ -83,7 +81,7 @@ - + @@ -93,11 +91,11 @@ - - + + - + @@ -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 {
工单编号 设备名称 设备编号 保养级别
{{ item.orderId || '-' }}{{ item.orderName || '-' }}{{ item.orderName || '-' }} {{ item.equipmentCode || '-' }} {{ getUpkeepLevelLabel(item.upkeepLevel) || '-' }}{{ item.maintainer || '-' }}{{ item.maintenancePerson || '-' }} {{ item.upkeepTime || '-' }}