我已经成功创建了设备状态监控功能。以下是我所做的更改：
创建了一个新的组件 EquipmentStatus.vue ，用于显示设备运行状态 在 plan/index.vue 中添加了"设备运行状态"按钮和相应的处理函数 在 api.js 中添加了设备状态API的端点配置 功能说明： 点击"设备运行状态"按钮，系统会调用 http://localhost:8100/api/plan/equipment/status/ API API返回的设备数据会以卡片形式展示，每个设备一张卡片 每个设备卡片中，根据 axle_number 分为左侧和右侧两部分显示 每个 status_records 显示为一个小方块，包含： 轴编号 规格 型号 完成度百分比 如果 status_records 为空，显示"设备当前未运行" 运行中的轴会有绿色边框标识，未运行的轴显示为灰色master
parent
b0168e4996
commit
b0380b3e54
@ -0,0 +1,165 @@
|
|||||||
|
<template>
|
||||||
|
<div class="equipment-status-container">
|
||||||
|
<div class="equipment-grid">
|
||||||
|
<div v-for="equipment in equipmentData" :key="equipment.equipment_code" class="equipment-item">
|
||||||
|
<div class="equipment-header">
|
||||||
|
{{ equipment.equipment_code }}
|
||||||
|
</div>
|
||||||
|
<div class="equipment-body">
|
||||||
|
<div class="axle-container">
|
||||||
|
<div class="axle-side left">
|
||||||
|
<div v-for="record in getLeftAxles(equipment)" :key="`${record.axle_number}-${record.update_time}`"
|
||||||
|
class="axle-item" :class="{ 'running': record.status === '1' }">
|
||||||
|
<div class="axle-number">{{ record.axle_number }}</div>
|
||||||
|
<div class="axle-spec">{{ record.specification }}</div>
|
||||||
|
<div class="axle-model">{{ record.model }}</div>
|
||||||
|
<div class="axle-progress">完成度: {{ (record.degree_of_completion * 100).toFixed(0) }}%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="axle-side right">
|
||||||
|
<div v-for="record in getRightAxles(equipment)" :key="`${record.axle_number}-${record.update_time}`"
|
||||||
|
class="axle-item" :class="{ 'running': record.status === '1' }">
|
||||||
|
<div class="axle-number">{{ record.axle_number }}</div>
|
||||||
|
<div class="axle-spec">{{ record.specification }}</div>
|
||||||
|
<div class="axle-model">{{ record.model }}</div>
|
||||||
|
<div class="axle-progress">完成度: {{ (record.degree_of_completion * 100).toFixed(0) }}%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="!equipment.status_records || equipment.status_records.length === 0" class="no-records">
|
||||||
|
设备当前未运行
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineProps } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
equipmentData: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取左侧轴信息
|
||||||
|
const getLeftAxles = (equipment) => {
|
||||||
|
if (!equipment.status_records || equipment.status_records.length === 0) return [];
|
||||||
|
|
||||||
|
return equipment.status_records.filter(record => {
|
||||||
|
const axle = record.axle_number;
|
||||||
|
return axle.includes('左') || axle.includes('left');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取右侧轴信息
|
||||||
|
const getRightAxles = (equipment) => {
|
||||||
|
if (!equipment.status_records || equipment.status_records.length === 0) return [];
|
||||||
|
|
||||||
|
return equipment.status_records.filter(record => {
|
||||||
|
const axle = record.axle_number;
|
||||||
|
return axle.includes('右') || axle.includes('right');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.equipment-status-container {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-item {
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-header {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
padding: 10px 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 1px solid #dcdfe6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipment-body {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axle-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axle-side {
|
||||||
|
width: 48%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axle-item {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axle-item.running {
|
||||||
|
background-color: #f0f9ff;
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axle-item.running::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 4px;
|
||||||
|
background-color: #67c23a;
|
||||||
|
border-radius: 4px 0 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axle-number {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axle-spec {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #606266;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axle-model {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axle-progress {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #409eff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-records {
|
||||||
|
text-align: center;
|
||||||
|
color: #909399;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue