| | |
| | | |
| | | <!-- 设备健康状态可视化 --> |
| | | <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
| | | <Card title="设备健康度分布" > |
| | | <Card title="设备健康度评分" > |
| | | <!-- 这里将放置健康度分布图表 --> |
| | | <div ref="chartRef" class="h-64 w-full"></div> |
| | | </Card> |
| | |
| | | <div class="grid grid-cols-1 gap-4"> |
| | | |
| | | <!-- 这里将放置预警表格 --> |
| | | <a-table :columns="warningColumns" :data-source="warningData" :pagination="false" class="w-full"> |
| | | <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)"> |
| | |
| | | <a-button type="link" @click="generateWorkOrder(record)" :disabled="record.maintenanceSuggestion === '暂无建议'">生成工单</a-button> |
| | | </template> |
| | | </template> |
| | | </a-table> |
| | | </Table> |
| | | </div> |
| | | |
| | | </Card> |
| | |
| | | <div class="grid grid-cols-2 gap-4 mb-6"> |
| | | <!-- 设备部件寿命预测 --> |
| | | <Card title="设备部件寿命预测"> |
| | | <a-table :columns="lifePredictionColumns" :data-source="lifePredictionData" :pagination="false" class="w-full"> |
| | | <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)"> |
| | |
| | | <a-button type="link" @click="showLifePredictionDetail(record)">详情</a-button> |
| | | </template> |
| | | </template> |
| | | </a-table> |
| | | </Table> |
| | | </Card> |
| | | |
| | | <!-- 备件库存与预警 --> |
| | | <Card title="备件库存与预警"> |
| | | <a-table :columns="sparePartColumns" :data-source="sparePartData" :pagination="false" class="w-full"> |
| | | <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)"> |
| | |
| | | <a-button type="link" @click="showSparePartDetail(record)">详情</a-button> |
| | | </template> |
| | | </template> |
| | | </a-table> |
| | | </Table> |
| | | </Card> |
| | | </div> |
| | | |
| | |
| | | <script setup lang="ts"> |
| | | import { onMounted, ref } from 'vue'; |
| | | import { Page } from '@vben/common-ui'; |
| | | import { Card, Table, Tag, Button, Form, Input, Textarea, Select, message } from 'ant-design-vue'; |
| | | import { Button, Card, Form, Input, message, Select, Table, Tag } from 'ant-design-vue'; |
| | | import * as echarts from 'echarts'; |
| | | |
| | | const chartRef = ref<HTMLElement | null>(null); |
| | |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['90%-100%', '80%-90%', '70%-80%', '60%-70%', '50%-60%', '40%-50%', '30%-40%', '20%-30%', '10%-20%', '0%-10%'], |
| | | axisLabel: { |
| | | rotate: 45 |
| | | } |
| | | data: ['10分', '9分', '8分', '7分', '6分', '5分', '4分', '3分', '2分', '1分'], |
| | | |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | |
| | | { value: 21, itemStyle: { color: '#52c41a' } }, |
| | | { value: 8, itemStyle: { color: '#faad14' } }, |
| | | { value: 5, itemStyle: { color: '#faad14' } }, |
| | | { value: 3, itemStyle: { color: '#faad14' } }, |
| | | { value: 1, itemStyle: { color: '#ff4d4f' } }, |
| | | { value: 1, itemStyle: { color: '#ff4d4f' } } |
| | | |
| | | ], |
| | | label: { |
| | | show: true, |
| | | position: 'top' |
| | | position: 'top', |
| | | formatter: '{c}台' |
| | | } |
| | | } |
| | | ] |