admin/iot_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

组态样式调整

Browse Source
This commit is contained in:
shih
2026-05-11 10:44:34 +08:00
parent e156a8d34c
commit 15e97df699
2 changed files with 210 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/views/scada/picture/screen.vue
View File

@@ -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 {

141
src/views/scada/picture/screen2.vue
View File

@@ -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 {