+ class="axle-item"
+ :class="getCompletionClass(record.degree_of_completion)">
{{ record.axle_number }}
{{ record.specification }}
{{ record.model }}
@@ -64,6 +66,15 @@ const getRightAxles = (equipment) => {
return axle.includes('右') || axle.includes('right');
});
};
+
+// 根据完成度返回对应的CSS类名
+const getCompletionClass = (degree) => {
+ const percentage = degree * 100;
+ if (percentage < 25) return 'completion-low';
+ if (percentage < 75) return 'completion-medium';
+ if (percentage < 100) return 'completion-high';
+ return 'completion-full';
+};