<template>
|
<Page :auto-content-height="true" :padding="false" class="p-0" content-class="flex flex-col w-full gap-4">
|
<div class="p-5">
|
|
<!-- 设备健康状态可视化 -->
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
<Card title="设备健康度评分" >
|
<!-- 这里将放置健康度分布图表 -->
|
<div ref="chartRef" class="h-64 w-full"></div>
|
</Card>
|
<Card title="关键指标" >
|
<div class="grid grid-cols-2 gap-2">
|
<div class="p-2 bg-blue-50 rounded">
|
<p class="text-sm text-gray-600">健康设备</p>
|
<p class="text-xl font-bold">85%</p>
|
</div>
|
<div class="p-2 bg-yellow-50 rounded">
|
<p class="text-sm text-gray-600">预警设备</p>
|
<p class="text-xl font-bold">12%</p>
|
</div>
|
<div class="p-2 bg-red-50 rounded">
|
<p class="text-sm text-gray-600">故障设备</p>
|
<p class="text-xl font-bold">3%</p>
|
</div>
|
<div class="p-2 bg-green-50 rounded">
|
<p class="text-sm text-gray-600">维护完成</p>
|
<p class="text-xl font-bold">92%</p>
|
</div>
|
<div class="p-2 bg-blue-50 rounded">
|
<p class="text-sm text-gray-600">待处理工单</p>
|
<p class="text-xl font-bold">{{ healthData.pendingWorkOrders }}</p>
|
</div>
|
<div class="p-2 bg-yellow-50 rounded">
|
<p class="text-sm text-gray-600">备件库存预警</p>
|
<p class="text-xl font-bold">{{ healthData.sparePartWarnings }}</p>
|
</div>
|
</div>
|
</Card>
|
</div>
|
|
<!-- 故障预测与预警 -->
|
<Card title="故障预测与预警" class="mb-6">
|
<div class="grid grid-cols-1 gap-4">
|
|
<!-- 这里将放置预警表格 -->
|
<Table :columns="warningColumns" :data-source="warningData" :pagination="false" class="w-full">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'status'">
|
<a-tag :color="getStatusColor(record.status)">
|
{{ record.status }}
|
</a-tag>
|
</template>
|
<template v-else-if="column.key === 'action'">
|
<a-button type="link" @click="handleDetail(record)">详情</a-button>
|
<a-button type="link" @click="generateWorkOrder(record)" :disabled="record.maintenanceSuggestion === '暂无建议'">生成工单</a-button>
|
</template>
|
</template>
|
</Table>
|
</div>
|
|
</Card>
|
|
<!-- 备件信息 -->
|
<div class="grid grid-cols-2 gap-4 mb-6">
|
<!-- 设备部件寿命预测 -->
|
<Card title="设备部件寿命预测">
|
<Table :columns="lifePredictionColumns" :data-source="lifePredictionData" :pagination="false" class="w-full">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'lifeStatus'">
|
<a-tag :color="getLifeStatusColor(record.remainingDays)">
|
{{ getLifeStatus(record.remainingDays) }}
|
</a-tag>
|
</template>
|
<template v-else-if="column.key === 'action'">
|
<a-button type="link" @click="showLifePredictionDetail(record)">详情</a-button>
|
</template>
|
</template>
|
</Table>
|
</Card>
|
|
<!-- 备件库存与预警 -->
|
<Card title="备件库存与预警">
|
<Table :columns="sparePartColumns" :data-source="sparePartData" :pagination="false" class="w-full">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'stockStatus'">
|
<a-tag :color="getStockStatusColor(record.currentStock, record.safetyStock)">
|
{{ getStockStatus(record.currentStock, record.safetyStock) }}
|
</a-tag>
|
</template>
|
<template v-else-if="column.key === 'action'">
|
<a-button type="link" @click="showSparePartDetail(record)">详情</a-button>
|
</template>
|
</template>
|
</Table>
|
</Card>
|
</div>
|
|
|
</div>
|
</Page>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, ref } from 'vue';
|
import { Page } from '@vben/common-ui';
|
import { Button, Card, Form, Input, message, Select, Table, Tag } from 'ant-design-vue';
|
import * as echarts from 'echarts';
|
|
const chartRef = ref<HTMLElement | null>(null);
|
|
const healthData = {
|
healthy: 85,
|
warning: 12,
|
critical: 3,
|
maintained: 92,
|
pendingWorkOrders: 5, // 模拟待处理工单数
|
sparePartWarnings: 2, // 模拟备件库存预警数
|
};
|
|
// 高风险设备预警数据
|
const warningColumns = [
|
{ title: '设备名称', dataIndex: 'name', key: 'name' },
|
|
{ title: '关键部件', dataIndex: 'component', key: 'component' },
|
{ title: '风险指标', dataIndex: 'indicator', key: 'indicator' },
|
{ title: '当前值', dataIndex: 'value', key: 'value' },
|
{ title: '阈值', dataIndex: 'threshold', key: 'threshold' },
|
{ title: '状态', dataIndex: 'status', key: 'status' },
|
{ title: '维护建议', dataIndex: 'maintenanceSuggestion', key: 'maintenanceSuggestion' },
|
{ title: '操作', key: 'action' },
|
];
|
|
// 模拟高风险设备数据
|
const warningData = ref([
|
{
|
key: '1',
|
name: 'SMT贴片机',
|
type: 'SMT机器',
|
component: '左3-Head',
|
indicator: '真空压力',
|
value: 32,
|
threshold: 35,
|
status: '中风险',
|
maintenanceSuggestion: '真空压力值低于设定值，建议检查或更换吸嘴',
|
maintenanceType: '预防性维护',
|
},
|
{
|
key: '2',
|
name: 'CNC加工中心',
|
type: 'CNC',
|
component: '主轴',
|
indicator: '温度',
|
value: 85,
|
threshold: 80,
|
status: '中风险',
|
maintenanceSuggestion: '建议对主轴进行润滑保养并检查冷却系统',
|
maintenanceType: '润滑维护',
|
},
|
{
|
key: '3',
|
name: '注塑机',
|
type: '注塑设备',
|
component: '液压系统',
|
indicator: '射出压力不稳定',
|
value: 28,
|
threshold: 30,
|
status: '低风险',
|
maintenanceSuggestion: '建议检查液压系统密封件',
|
maintenanceType: '检查维护',
|
},
|
// {
|
// key: '4',
|
// name: '空压机',
|
// type: '空气压缩机',
|
// component: '电机',
|
// indicator: '电流',
|
// value: 49,
|
// threshold: 50,
|
// status: '低风险',
|
// maintenanceSuggestion: '暂无建议',
|
// maintenanceType: '无',
|
// },
|
]);
|
|
// 备件库存数据
|
const sparePartColumns = [
|
{ title: '备件名称', dataIndex: 'name', key: 'name' },
|
{ title: '当前库存', dataIndex: 'currentStock', key: 'currentStock' },
|
{ title: '安全库存', dataIndex: 'safetyStock', key: 'safetyStock' },
|
{ title: '预测需求', dataIndex: 'predictedDemand', key: 'predictedDemand' },
|
{ title: '库存状态', dataIndex: 'stockStatus', key: 'stockStatus' },
|
];
|
|
// 模拟备件数据
|
const sparePartData = ref([
|
{
|
key: '1',
|
name: '传送带轴承',
|
currentStock: 10,
|
safetyStock: 15,
|
predictedDemand: 8,
|
},
|
{
|
key: '2',
|
name: '主轴润滑油',
|
currentStock: 2,
|
safetyStock: 3,
|
predictedDemand: 1,
|
},
|
{
|
key: '3',
|
name: '液压系统密封件',
|
currentStock: 20,
|
safetyStock: 25,
|
predictedDemand: 5,
|
},
|
{
|
key: '4',
|
name: '电机碳刷',
|
currentStock: 8,
|
safetyStock: 10,
|
predictedDemand: 2,
|
},
|
]);
|
const getStatusColor = (status) => {
|
switch (status) {
|
case '高风险': return 'red';
|
case '中风险': return 'orange';
|
case '低风险': return 'yellow';
|
default: return 'green';
|
}
|
};
|
|
|
|
// 工单表单数据
|
const workOrderForm = ref({
|
type: '',
|
equipment: '',
|
content: '',
|
priority: 'medium',
|
});
|
|
const selectedMaintenance = ref(null);
|
|
const lifePredictionColumns = [
|
{ title: '设备名称', dataIndex: 'deviceName', key: 'deviceName' },
|
{ title: '部位名称', dataIndex: 'componentName', key: 'componentName' },
|
{ title: '部件名称', dataIndex: 'name', key: 'name' },
|
{ title: '预测寿命 (天)', dataIndex: 'predictedLife', key: 'predictedLife' },
|
{ title: '剩余寿命 (天)', dataIndex: 'remainingDays', key: 'remainingDays' },
|
{ title: '状态', dataIndex: 'lifeStatus', key: 'lifeStatus' },
|
{ title: '操作', dataIndex: 'action', key: 'action' },
|
];
|
|
const lifePredictionData = ref([
|
{ key: '4', deviceName: '空压机', componentName: '电机', name: '传感器', predictedLife: 500, remainingDays: 10 },
|
{ key: '2', deviceName: 'CNC加工中心', componentName: '主轴', name: '齿轮', predictedLife: 730, remainingDays: 30 },
|
{ key: '1', deviceName: 'SMT贴片机', componentName: '传送带', name: '轴承', predictedLife: 365, remainingDays: 50 },
|
|
{ key: '3', deviceName: '注塑机', componentName: '液压系统', name: '滤芯', predictedLife: 180, remainingDays: 90 },
|
|
{ key: '5', deviceName: '焊接机器人', componentName: '焊枪', name: '焊嘴', predictedLife: 240, remainingDays: 60 }
|
]);
|
|
const getLifeStatus = (remainingDays) => {
|
if (remainingDays <= 30) {
|
return '即将到期';
|
} else if (remainingDays <= 90) {
|
return '中期预警';
|
} else {
|
return '寿命充足';
|
}
|
};
|
|
const getLifeStatusColor = (remainingDays) => {
|
if (remainingDays <= 30) {
|
return 'red';
|
} else if (remainingDays <= 90) {
|
return 'orange';
|
} else {
|
return 'green';
|
}
|
};
|
|
const showLifePredictionDetail = (record) => {
|
message.info(`备件名称: ${record.name}, 预测寿命: ${record.predictedLife}天, 剩余寿命: ${record.remainingDays}天`);
|
};
|
|
|
|
const getStockStatus = (currentStock, safetyStock) => {
|
if (currentStock <= safetyStock) {
|
return '库存预警';
|
} else {
|
return '库存充足';
|
}
|
};
|
|
const getStockStatusColor = (currentStock, safetyStock) => {
|
if (currentStock <= safetyStock) {
|
return 'red';
|
} else {
|
return 'green';
|
}
|
};
|
|
const showSparePartDetail = (record) => {
|
message.info(`备件名称: ${record.name}, 当前库存: ${record.currentStock}, 安全库存: ${record.safetyStock}, 预测需求: ${record.predictedDemand}`);
|
};
|
|
const generateWorkOrder = (record) => {
|
selectedMaintenance.value = record;
|
workOrderForm.value = {
|
type: record.maintenanceType,
|
equipment: record.name,
|
content: record.maintenanceSuggestion,
|
priority: 'medium',
|
};
|
};
|
|
const submitWorkOrder = () => {
|
console.log('提交工单:', workOrderForm.value);
|
// 这里可以添加工单提交逻辑
|
message.success('工单提交成功');
|
selectedMaintenance.value = null;
|
workOrderForm.value = {
|
type: '',
|
equipment: '',
|
content: '',
|
priority: 'medium',
|
};
|
};
|
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter();
|
|
const handleDetail = (record) => {
|
// 根据设备名称不同跳转不同的详情页面
|
if (record.name === 'SMT贴片机') {
|
console.log('设备ID111:', record.name)
|
router.push({ path: '/predictive/smt-detail', query: { deviceId: record.key } });
|
} else if (record.name === 'CNC加工中心') {
|
router.push({ path: '/predictive/cnc-detail', query: { deviceId: record.key } });
|
} else if (record.name === '注塑机') {
|
router.push({ path: '/predictive/injection-detail', query: { deviceId: record.key } });
|
} else {
|
router.push({ path: '/predictive/air-compressor-detail', query: { deviceId: record.key } });
|
}
|
};
|
|
onMounted(() => {
|
if (chartRef.value) {
|
const myChart = echarts.init(chartRef.value);
|
const option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
xAxis: {
|
type: 'category',
|
data: ['10分', '9分', '8分', '7分', '6分', '5分', '4分', '3分', '2分', '1分'],
|
|
},
|
yAxis: {
|
type: 'value',
|
name: '设备数量',
|
minInterval: 1
|
},
|
series: [
|
{
|
name: '设备数量',
|
type: 'bar',
|
barWidth: '60%',
|
data: [
|
{ value: 48, itemStyle: { color: '#52c41a' } },
|
{ value: 53, itemStyle: { color: '#52c41a' } },
|
{ value: 37, itemStyle: { color: '#52c41a' } },
|
{ value: 29, itemStyle: { color: '#52c41a' } },
|
{ value: 21, itemStyle: { color: '#52c41a' } },
|
{ value: 8, itemStyle: { color: '#faad14' } },
|
{ value: 5, itemStyle: { color: '#faad14' } },
|
|
],
|
label: {
|
show: true,
|
position: 'top',
|
formatter: '{c}台'
|
}
|
}
|
]
|
};
|
myChart.setOption(option);
|
|
// 响应式调整图表大小
|
window.addEventListener('resize', () => {
|
myChart.resize();
|
});
|
}
|
});
|
</script>
|
|
<style scoped>
|
/* 可以在这里添加组件样式 */
|
</style>
|
