| | |
| | | </a-row> |
| | | </a-card> |
| | | <a-row :gutter="16"> |
| | | <!-- 备件寿命预测 --> |
| | | <!-- 部件寿命预测 --> |
| | | <a-col :span="12"> |
| | | <a-card title="备件寿命预测" class="mb-4"> |
| | | <a-card title="部件寿命预测" class="mb-4"> |
| | | <a-table |
| | | :columns="sparePartColumns" |
| | | :data-source="sparePartData" |
| | |
| | | dataIndex: 'suggestedTime', |
| | | key: 'suggestedTime' |
| | | }, |
| | | { |
| | | title: '紧急程度', |
| | | dataIndex: 'urgency', |
| | | key: 'urgency' |
| | | }, |
| | | { |
| | | title: '操作', |
| | | key: 'action', |
| | | slots: { customRender: 'action' } |
| | | }, |
| | | |
| | | { |
| | | title: '紧急程度', |
| | | dataIndex: 'urgency', |
| | |
| | | |
| | | const sparePartColumns = [ |
| | | { |
| | | title: '备件名称', |
| | | title: '部件名称', |
| | | dataIndex: 'name', |
| | | key: 'name' |
| | | }, |
| | |
| | | value: value |
| | | }); |
| | | } |
| | | |
| | | |
| | | const updateChart = () => { |
| | | // 生成新的数据点 |
| | | const now = new Date(); |
| | | const time = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`; |
| | | const newValue = +(Math.random() * fluctuation + baseValue - fluctuation / 2).toFixed(2); |
| | | |
| | | |
| | | // 添加新数据点,最多保留60个点(5分钟数据) |
| | | chartData.push({ |
| | | time, |
| | |
| | | if (chartData.length > 60) { |
| | | chartData.shift(); |
| | | } |
| | | |
| | | |
| | | const option = { |
| | | title: { |
| | | text: title, |
| | |
| | | }; |
| | | chart.setOption(option); |
| | | }; |
| | | |
| | | |
| | | // 初始渲染 |
| | | updateChart(); |
| | | |
| | | |
| | | // 每5秒更新一次数据 |
| | | const intervalId = setInterval(updateChart, 5000); |
| | | |
| | | |
| | | window.addEventListener('resize', () => { |
| | | chart.resize(); |
| | | }); |
| | |
| | | initChart('vibrationChart', '振动趋势', vibrationData, 'mm/s', 10, 2); |
| | | initChart('currentChart', '电流趋势', currentData, 'A', 50, 10); |
| | | } |
| | | |
| | | |
| | | }); |
| | | </script> |
| | | |
| | |
| | | padding: 16px; |
| | | background: #f0f2f5; |
| | | } |
| | | </style> |
| | | </style> |