@@ -70,20 +73,55 @@ const sortedEquipmentData = computed(() => {
const getLeftAxles = (equipment) => {
if (!equipment.status_records || equipment.status_records.length === 0) return [];
- return equipment.status_records.filter(record => {
+ // 获取所有左侧轴记录
+ const leftAxles = equipment.status_records.filter(record => {
const axle = record.axle_number;
return axle.includes('左') || axle.includes('left');
});
+
+ // 按照左1, 左2, 左3...的顺序排序
+ return leftAxles.sort((a, b) => {
+ // 提取轴号中的数字,如"左1"提取出1
+ const aNum = extractAxleNumber(a.axle_number);
+ const bNum = extractAxleNumber(b.axle_number);
+ return aNum - bNum;
+ });
};
// 获取右侧轴信息
const getRightAxles = (equipment) => {
if (!equipment.status_records || equipment.status_records.length === 0) return [];
- return equipment.status_records.filter(record => {
+ // 获取所有右侧轴记录
+ const rightAxles = equipment.status_records.filter(record => {
const axle = record.axle_number;
return axle.includes('右') || axle.includes('right');
});
+
+ // 按照右1, 右2, 右3...的顺序排序
+ return rightAxles.sort((a, b) => {
+ // 提取轴号中的数字,如"右1"提取出1
+ const aNum = extractAxleNumber(a.axle_number);
+ const bNum = extractAxleNumber(b.axle_number);
+ return aNum - bNum;
+ });
+};
+
+// 提取轴号中的数字
+const extractAxleNumber = (axleStr) => {
+ if (!axleStr) return Infinity;
+
+ // 使用正则表达式提取数字,如从"左1"中提取出1
+ const match = axleStr.match(/(\d+)/);
+ if (match) {
+ return parseInt(match[0], 10);
+ }
+
+ // 如果没有数字,例如只有"左边"或"右边",则使用默认值
+ if (axleStr.includes('左') || axleStr.includes('left')) return 0;
+ if (axleStr.includes('右') || axleStr.includes('right')) return 0;
+
+ return Infinity;
};
// 根据完成度返回对应的CSS类名
@@ -117,10 +155,20 @@ const getCompletionClass = (degree) => {
.equipment-header {
background-color: #f5f7fa;
padding: 10px 15px;
- font-weight: bold;
font-size: 16px;
- text-align: center;
border-bottom: 1px solid #dcdfe6;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.equipment-name {
+ font-weight: bold;
+}
+
+.equipment-health {
+ font-size: 14px;
+ color: #67c23a;
}
.equipment-body {
@@ -235,6 +283,8 @@ const getCompletionClass = (degree) => {
font-weight: bold;
}
+
+
.no-records {
text-align: center;
color: #909399;