<template>
|
<div class="device-detail-container">
|
<a-page-header
|
title="CNC加工中心预测性维护详情"
|
:sub-title="deviceInfo.deviceName"
|
@back="() => $router.go(-1)"
|
/>
|
|
<a-row :gutter="16" class="mt-4">
|
<!-- 设备基本信息 -->
|
<a-col :span="8">
|
<a-card title="设备基本信息" class="mb-4" :style="{ height: '440px' }">
|
<a-descriptions bordered :column="1">
|
<a-descriptions-item label="设备名称">{{ deviceInfo.deviceName }}</a-descriptions-item>
|
<a-descriptions-item label="设备类型">{{ deviceInfo.deviceType }}</a-descriptions-item>
|
<a-descriptions-item label="设备编号">{{ deviceInfo.deviceId }}</a-descriptions-item>
|
<a-descriptions-item label="安装日期">{{ deviceInfo.installDate }}</a-descriptions-item>
|
<a-descriptions-item label="使用年限">{{ deviceInfo.serviceLife }}年</a-descriptions-item>
|
<a-descriptions-item label="当前状态">
|
<a-tag :color="deviceInfo.statusColor">{{ deviceInfo.status }}</a-tag>
|
</a-descriptions-item>
|
</a-descriptions>
|
</a-card>
|
</a-col>
|
|
<!-- 设备健康状态与维护建议 -->
|
<a-col :span="16">
|
<a-card title="设备健康状态与维护建议" class="mb-4" :style="{ height: '440px' }">
|
<a-row :gutter="16">
|
<a-col :span="8">
|
<a-statistic
|
title="整体健康度"
|
:value="healthData.overallHealth"
|
:precision="0"
|
suffix="%"
|
:value-style="{ color: healthData.healthColor }"
|
/>
|
</a-col>
|
<a-col :span="8">
|
<a-statistic
|
title="预测剩余寿命"
|
:value="healthData.predictedLife"
|
suffix="天"
|
/>
|
</a-col>
|
<a-col :span="8">
|
<a-statistic
|
title="故障风险等级"
|
:value="healthData.riskLevel"
|
:value-style="{ color: healthData.riskColor }"
|
/>
|
</a-col>
|
</a-row>
|
<div class="mt-4">
|
<a-progress
|
:percent="healthData.overallHealth"
|
:stroke-color="healthData.healthColor"
|
:show-info="false"
|
/>
|
</div>
|
<a-divider orientation="left">预测性维护建议</a-divider>
|
<a-table
|
:columns="maintenanceColumns"
|
:data-source="maintenanceData"
|
:pagination="false"
|
size="small"
|
>
|
<template #urgency="{ text }">
|
<a-tag :color="getUrgencyColor(text)">{{ text }}</a-tag>
|
</template>
|
<template #action="{ record }">
|
<a-button type="link" size="small" @click="handleMaintenance(record)">处理</a-button>
|
</template>
|
</a-table>
|
</a-card>
|
</a-col>
|
</a-row>
|
|
<!-- 实时数据趋势图 -->
|
<a-card title="实时数据趋势图" class="mb-4">
|
<a-row :gutter="16">
|
<a-col :span="8">
|
<div id="spindleVibrationChart" style="height: 300px;"></div>
|
</a-col>
|
<a-col :span="8">
|
<div id="spindleTemperatureChart" style="height: 300px;"></div>
|
</a-col>
|
<a-col :span="8">
|
<div id="spindleCurrentChart" style="height: 300px;"></div>
|
</a-col>
|
</a-row>
|
<a-row :gutter="16" class="mt-4">
|
<a-col :span="8">
|
<div id="spindleSpeedChart" style="height: 300px;"></div>
|
</a-col>
|
<a-col :span="8">
|
<div id="servoMotorCurrentChart" style="height: 300px;"></div>
|
</a-col>
|
<a-col :span="8">
|
<div id="servoMotorTemperatureChart" style="height: 300px;"></div>
|
</a-col>
|
</a-row>
|
<a-row :gutter="16" class="mt-4">
|
<a-col :span="8">
|
<div id="axisMotionSmoothnessChart" style="height: 300px;"></div>
|
</a-col>
|
<a-col :span="8">
|
<div id="guideRailTemperatureChart" style="height: 300px;"></div>
|
</a-col>
|
<a-col :span="8">
|
<div id="guideRailResistanceNoiseChart" style="height: 300px;"></div>
|
</a-col>
|
</a-row>
|
<a-row :gutter="16" class="mt-4">
|
<a-col :span="8">
|
<div id="hydraulicPressureChart" style="height: 300px;"></div>
|
</a-col>
|
<a-col :span="8">
|
<div id="hydraulicFlowChart" style="height: 300px;"></div>
|
</a-col>
|
<a-col :span="8">
|
<div id="hydraulicOilTemperatureChart" style="height: 300px;"></div>
|
</a-col>
|
</a-row>
|
<a-row :gutter="16" class="mt-4">
|
<a-col :span="8">
|
<div id="airSourcePressureChart" style="height: 300px;"></div>
|
</a-col>
|
<a-col :span="8">
|
<div id="coolantFlowChart" style="height: 300px;"></div>
|
</a-col>
|
<a-col :span="8">
|
<div id="coolantTemperatureChart" style="height: 300px;"></div>
|
</a-col>
|
</a-row>
|
|
</a-card>
|
<a-row :gutter="16">
|
<!-- 备件寿命预测 -->
|
<a-col :span="12">
|
<a-card title="备件寿命预测" class="mb-4">
|
<a-table
|
:columns="sparePartColumns"
|
:data-source="sparePartData"
|
:pagination="false"
|
size="small"
|
>
|
<template #status="{ text }">
|
<a-tag :color="getStatusColor(text)">{{ text }}</a-tag>
|
</template>
|
</a-table>
|
</a-card>
|
</a-col>
|
|
<!-- 历史维护记录 -->
|
<a-col :span="12">
|
<a-card title="历史维护记录" class="mb-4">
|
<a-timeline>
|
<a-timeline-item v-for="item in historyData" :key="item.id" :color="item.color">
|
{{ item.date }} - {{ item.type }}: {{ item.description }}
|
</a-timeline-item>
|
</a-timeline>
|
</a-card>
|
</a-col>
|
</a-row>
|
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { defineComponent, reactive, onMounted, onUnmounted } from 'vue';
|
import * as echarts from 'echarts';
|
|
export default defineComponent({
|
name: 'CNCMachiningCenterDetail',
|
setup() {
|
// 模拟数据
|
const deviceInfo = reactive({
|
deviceName: 'CNC加工中心 #CNC-001',
|
deviceType: 'CNC加工中心',
|
deviceId: 'CNC-2024-001',
|
installDate: '2023-08-20',
|
serviceLife: 15,
|
status: '运行中',
|
statusColor: '#52c41a'
|
});
|
|
const healthData = reactive({
|
overallHealth: 95,
|
healthColor: '#52c41a',
|
predictedLife: 4500,
|
riskLevel: '低风险',
|
riskColor: '#52c41a'
|
});
|
|
const maintenanceColumns = [
|
{
|
title: '维护类型',
|
dataIndex: 'type',
|
key: 'type'
|
},
|
{
|
title: '维护内容',
|
dataIndex: 'content',
|
key: 'content'
|
},
|
{
|
title: '建议时间',
|
dataIndex: 'suggestedTime',
|
key: 'suggestedTime'
|
},
|
{
|
title: '紧急程度',
|
dataIndex: 'urgency',
|
key: 'urgency',
|
slots: { customRender: 'urgency' }
|
},
|
{
|
title: '操作',
|
key: 'action',
|
slots: { customRender: 'action' }
|
}
|
];
|
|
const maintenanceData = reactive([
|
{
|
key: '1',
|
type: '例行保养',
|
content: '检查主轴润滑系统',
|
suggestedTime: '2024-07-15',
|
urgency: '中等'
|
},
|
{
|
key: '2',
|
type: '伺服系统维护',
|
content: '检查X轴伺服电机',
|
suggestedTime: '2024-09-01',
|
urgency: '低'
|
},
|
{
|
key: '3',
|
type: '导轨维护',
|
content: '补充导轨润滑油',
|
suggestedTime: '2024-08-01',
|
urgency: '高'
|
}
|
]);
|
|
const getUrgencyColor = (urgency: string) => {
|
switch (urgency) {
|
case '高':
|
return 'red';
|
case '中等':
|
return 'orange';
|
case '低':
|
return 'green';
|
default:
|
return 'default';
|
}
|
};
|
|
const sparePartColumns = [
|
{
|
title: '备件名称',
|
dataIndex: 'name',
|
key: 'name'
|
},
|
{
|
title: '当前寿命',
|
dataIndex: 'currentLife',
|
key: 'currentLife',
|
customRender: ({ text }: { text: number }) => `${text}小时`
|
},
|
{
|
title: '预测剩余寿命',
|
dataIndex: 'remainingLife',
|
key: 'remainingLife',
|
customRender: ({ text }: { text: number }) => `${text}小时`
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
key: 'status',
|
slots: { customRender: 'status' }
|
}
|
];
|
|
const sparePartData = reactive([
|
{
|
key: '1',
|
name: '主轴轴承',
|
currentLife: 8000,
|
remainingLife: 500,
|
status: '预警'
|
},
|
{
|
key: '2',
|
name: 'X轴丝杠',
|
currentLife: 12000,
|
remainingLife: 2000,
|
status: '良好'
|
},
|
{
|
key: '3',
|
name: '液压油',
|
currentLife: 3000,
|
remainingLife: 200,
|
status: '预警'
|
}
|
]);
|
|
const historyData = reactive([
|
{
|
id: '1',
|
date: '2024-05-20',
|
type: '例行保养',
|
description: '主轴润滑系统检查',
|
color: 'green'
|
},
|
{
|
id: '2',
|
date: '2024-02-10',
|
type: '故障维修',
|
description: 'Y轴伺服电机报警处理',
|
color: 'red'
|
},
|
{
|
id: '3',
|
date: '2023-11-01',
|
type: '年度保养',
|
description: '全面检查设备运行状态',
|
color: 'green'
|
}
|
]);
|
|
const getStatusColor = (status: string) => {
|
switch (status) {
|
case '良好':
|
return '#52c41a';
|
case '预警':
|
return '#faad14';
|
case '危险':
|
return '#f5222d';
|
default:
|
return '#d9d9d9';
|
}
|
};
|
|
const handleMaintenance = (record: any) => {
|
console.log('处理维护建议:', record);
|
// 实际项目中这里会调用API处理维护建议
|
};
|
|
return {
|
deviceInfo,
|
healthData,
|
maintenanceColumns,
|
maintenanceData,
|
sparePartColumns,
|
sparePartData,
|
historyData,
|
getStatusColor,
|
getUrgencyColor,
|
handleMaintenance
|
};
|
},
|
|
mounted() {
|
// 初始化图表
|
const initChart = (chartId: string, title: string, chartData: any[], unit: string, baseValue: number, fluctuation: number) => {
|
const chart = echarts.init(document.getElementById(chartId));
|
|
const updateChart = () => {
|
// 生成新的数据点
|
const now = new Date();
|
const time = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
|
const newValue = (baseValue + (Math.random() * 2 - 1) * fluctuation).toFixed(2);
|
|
// 添加新数据点，最多保留60个点（5分钟数据）
|
chartData.push({
|
time,
|
value: newValue
|
});
|
if (chartData.length > 60) {
|
chartData.shift();
|
}
|
|
const option = {
|
title: {
|
text: title,
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'axis',
|
formatter: (params) => {
|
return `${params[0].axisValueLabel}<br/>${params[0].marker} ${params[0].seriesName}: ${params[0].data}${unit}`;
|
}
|
},
|
grid: {
|
left: '8%', // 增加左侧边距
|
right: '5%',
|
bottom: '10%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
data: chartData.map(item => item.time)
|
},
|
yAxis: {
|
type: 'value',
|
axisLabel: {
|
formatter: (value) => `${value}${unit}`
|
}
|
},
|
series: [
|
{
|
data: chartData.map(item => parseFloat(item.value)),
|
type: 'line',
|
smooth: true,
|
lineStyle: {
|
width: 2,
|
color: '#5470C6' // Default color
|
},
|
areaStyle: {
|
opacity: 0.8,
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{
|
offset: 0,
|
color: 'rgba(84,112,198,0.3)'
|
},
|
{
|
offset: 1,
|
color: 'rgba(84,112,198,0)'
|
}
|
])
|
},
|
}
|
]
|
};
|
chart.setOption(option);
|
};
|
|
// 生成初始数据点（60个点，5分钟数据）
|
for (let i = 0; i < 60; i++) {
|
const now = new Date(Date.now() - (60 - i) * 5000); // 生成过去5分钟的数据
|
const time = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
|
const newValue = (baseValue + (Math.random() * 2 - 1) * fluctuation).toFixed(2);
|
chartData.push({
|
time,
|
value: newValue
|
});
|
}
|
|
// 初始渲染
|
updateChart();
|
|
// 每5秒更新一次数据
|
const intervalId = setInterval(updateChart, 5000);
|
|
window.addEventListener('resize', () => {
|
chart.resize();
|
});
|
onUnmounted(() => {
|
clearInterval(intervalId);
|
});
|
|
};
|
|
|
|
|
initChart('spindleVibrationChart', '主轴振动', [], 'mm/s', 3.0, 0.5);
|
initChart('spindleTemperatureChart', '主轴温度', [], '°C', 50, 3);
|
initChart('spindleCurrentChart', '主轴电流', [], 'A', 150, 10);
|
initChart('spindleSpeedChart', '主轴转速', [], 'RPM', 8000, 100);
|
initChart('servoMotorCurrentChart', '伺服电机电流', [], 'A', 50, 5);
|
initChart('servoMotorTemperatureChart', '伺服电机温度', [], '°C', 45, 3);
|
initChart('axisMotionSmoothnessChart', '轴运动平稳性', [], '', 0.8, 0.1);
|
initChart('guideRailTemperatureChart', '导轨温度', [], '°C', 35, 2);
|
initChart('guideRailResistanceNoiseChart', '导轨运动阻力/噪音', [], 'dB', 10, 2);
|
initChart('hydraulicPressureChart', '液压系统压力', [], 'bar', 150, 5);
|
initChart('hydraulicFlowChart', '液压系统流量', [], 'L/min', 20, 2);
|
initChart('hydraulicOilTemperatureChart', '液压油温度', [], '°C', 55, 3);
|
initChart('airSourcePressureChart', '气源压力', [], 'bar', 0.7, 0.05);
|
initChart('coolantFlowChart', '冷却液流量', [], 'L/min', 30, 3);
|
initChart('coolantTemperatureChart', '冷却液温度', [], '°C', 28, 2);
|
}
|
|
});
|
</script>
|
|
<style scoped>
|
.device-detail-container {
|
padding: 16px;
|
background: #f0f2f5;
|
}
|
|
.mt-4 {
|
margin-top: 16px;
|
}
|
|
.mb-4 {
|
margin-bottom: 16px;
|
}
|
</style>
|
