You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.6 KiB
Vue
96 lines
2.6 KiB
Vue
3 months ago
|
|
||
|
|
<template>
|
||
|
|
<div id="scroll-board">
|
||
|
|
<!-- 添加加载状态提示 -->
|
||
|
|
<div v-if="loading" class="loading-text">数据加载中...</div>
|
||
|
|
<!-- 添加数据为空提示 -->
|
||
|
|
<div v-if="!loading && config.data.length === 0" class="empty-text">暂无维修工单数据</div>
|
||
|
|
<dv-scroll-board v-else :config="config" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getRepairWorkOrder } from "@/api/kanban/equipment";
|
||
|
|
import moment from "moment";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'ScrollBoard',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
loading: false, // 新增加载状态
|
||
|
|
config: {
|
||
|
|
header: ['序号', '设备', '故障信息', '计划维修时间'], // 添加序号列
|
||
|
|
data: [],
|
||
|
|
index: false, // 关闭自动索引，使用自定义序号
|
||
|
|
columnWidth: [50, 120, 200, 200], // 调整列宽
|
||
|
|
align: ['center'],
|
||
|
|
rowNum: 7,
|
||
|
|
headerBGC: '#1981f6',
|
||
|
|
headerHeight: 45,
|
||
|
|
oddRowBGC: 'rgba(0, 44, 81, 0.8)',
|
||
|
|
evenRowBGC: 'rgba(10, 29, 50, 0.8)'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async getdatalist() {
|
||
|
|
try {
|
||
|
|
this.loading = true;
|
||
|
|
const response = await getRepairWorkOrder({
|
||
|
|
poolName: "ds_1000"
|
||
|
|
});
|
||
|
|
|
||
|
|
if (response.data?.length > 0) {
|
||
|
|
// 数据预处理
|
||
|
|
const processedData = response.data.map((item, index) => {
|
||
|
|
// 确保字段存在并提供默认值
|
||
|
|
const deviceName = item.equipmentName || '未知设备';
|
||
|
|
const faultInfo = item.workFaultDesc || '无故障描述';
|
||
|
|
|
||
|
|
// 时间格式化（添加容错处理）
|
||
|
|
const repairTime = item.workPlanTime ?
|
||
|
|
moment(item.workPlanTime).format("YYYY-MM-DD HH:mm:ss") :
|
||
|
|
'--';
|
||
|
|
|
||
|
|
// 返回带序号的完整数据行
|
||
|
|
return [`${index + 1}`, deviceName, faultInfo, repairTime];
|
||
|
|
});
|
||
|
|
|
||
|
|
// 响应式更新配置
|
||
|
|
this.config = {
|
||
|
|
...this.config,
|
||
|
|
data: processedData
|
||
|
|
};
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('数据获取失败:', error);
|
||
|
|
// 显示错误数据
|
||
|
|
this.config.data = [['-', '数据加载失败', '请稍后重试', '-']];
|
||
|
|
} finally {
|
||
|
|
this.loading = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getdatalist();
|
||
|
|
// 添加定时刷新（可选）
|
||
|
|
this.timer = setInterval(() => {
|
||
|
|
this.getdatalist();
|
||
|
|
}, 60000); // 60秒刷新
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
clearInterval(this.timer); // 清除定时器
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
#scroll-board {
|
||
|
|
width: 50%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-left: 20px;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
</style>
|