组态样式调整
This commit is contained in:
shih
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user