314 lines
9.1 KiB
Vue
314 lines
9.1 KiB
Vue
<template>
|
|
<div class="device-detail-container">
|
|
<a-card title="设备基本信息">
|
|
<a-descriptions :data="basicInfo" layout="vertical" bordered />
|
|
</a-card>
|
|
|
|
<a-card title="设备状态信息" style="margin-top: 16px">
|
|
<a-descriptions :data="statusInfo" layout="vertical" bordered />
|
|
</a-card>
|
|
|
|
<a-card title="设备详细信息" style="margin-top: 16px">
|
|
<a-tabs>
|
|
<a-tab-pane key="maintenance" tab="维护记录">
|
|
<div class="maintenance-section">
|
|
<a-button type="primary" @click="handleAddMaintenance">
|
|
添加维护记录
|
|
</a-button>
|
|
<a-divider />
|
|
<a-table :data="maintenanceRecords" :columns="maintenanceColumns" row-key="id" size="small" />
|
|
</div>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="usage" tab="使用记录">
|
|
<div class="usage-section">
|
|
<a-table :data="usageRecords" :columns="usageColumns" row-key="id" size="small" />
|
|
</div>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="location" tab="位置变更">
|
|
<div class="location-section">
|
|
<a-table :data="locationRecords" :columns="locationColumns" row-key="id" size="small" />
|
|
</div>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="files" tab="相关文件">
|
|
<div class="files-section">
|
|
<a-upload
|
|
:file-list="fileList"
|
|
:custom-request="handleFileUpload"
|
|
:show-upload-list="{ showPreviewIcon: true, showRemoveIcon: true }"
|
|
>
|
|
<a-button>
|
|
<template #icon>
|
|
<IconUpload />
|
|
</template>
|
|
上传文件
|
|
</a-button>
|
|
</a-upload>
|
|
</div>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { IconUpload } from '@arco-design/web-vue/es/icon'
|
|
import { getEquipmentDetail } from '@/apis/equipment'
|
|
import type { EquipmentResp } from '@/types/equipment.d'
|
|
|
|
defineOptions({ name: 'DeviceDetail' })
|
|
|
|
const route = useRoute()
|
|
const deviceId = route.params.id as string
|
|
|
|
// 设备基本信息
|
|
const basicInfo = ref([
|
|
{ label: '设备名称', value: '' },
|
|
{ label: '设备类型', value: '' },
|
|
{ label: '设备型号', value: '' },
|
|
{ label: '序列号', value: '' },
|
|
{ label: '品牌', value: '' },
|
|
{ label: '资产编号', value: '' },
|
|
{ label: '负责人', value: '' },
|
|
{ label: '物理位置', value: '' },
|
|
{ label: '配置规格', value: '' },
|
|
{ label: '备注', value: '' },
|
|
])
|
|
|
|
// 设备状态信息
|
|
const statusInfo = ref([
|
|
{ label: '设备状态', value: '' },
|
|
{ label: '使用状态', value: '' },
|
|
{ label: '位置状态', value: '' },
|
|
{ label: '健康状态', value: '' },
|
|
{ label: '当前使用人', value: '' },
|
|
{ label: '所属项目', value: '' },
|
|
{ label: '创建时间', value: '' },
|
|
{ label: '更新时间', value: '' },
|
|
])
|
|
|
|
// 维护记录
|
|
const maintenanceRecords = ref([
|
|
{
|
|
id: 1,
|
|
maintenanceType: '定期保养',
|
|
maintenancePerson: '张师傅',
|
|
maintenanceTime: '2024-06-01 10:00:00',
|
|
description: '更换机油，检查设备运行状态',
|
|
cost: 500,
|
|
status: '已完成',
|
|
},
|
|
{
|
|
id: 2,
|
|
maintenanceType: '故障维修',
|
|
maintenancePerson: '李师傅',
|
|
maintenanceTime: '2024-05-15 14:30:00',
|
|
description: '修复传感器故障',
|
|
cost: 1200,
|
|
status: '已完成',
|
|
},
|
|
])
|
|
|
|
const maintenanceColumns = [
|
|
{ title: '维护类型', dataIndex: 'maintenanceType', key: 'maintenanceType' },
|
|
{ title: '维护人员', dataIndex: 'maintenancePerson', key: 'maintenancePerson' },
|
|
{ title: '维护时间', dataIndex: 'maintenanceTime', key: 'maintenanceTime' },
|
|
{ title: '维护描述', dataIndex: 'description', key: 'description' },
|
|
{ title: '维护费用', dataIndex: 'cost', key: 'cost' },
|
|
{ title: '状态', dataIndex: 'status', key: 'status' },
|
|
]
|
|
|
|
// 使用记录
|
|
const usageRecords = ref([
|
|
{
|
|
id: 1,
|
|
userName: '张三',
|
|
projectName: '项目A',
|
|
startTime: '2024-06-01 09:00:00',
|
|
endTime: '2024-06-01 18:00:00',
|
|
usagePurpose: '现场检测',
|
|
},
|
|
{
|
|
id: 2,
|
|
userName: '李四',
|
|
projectName: '项目B',
|
|
startTime: '2024-05-30 08:00:00',
|
|
endTime: '2024-05-30 17:00:00',
|
|
usagePurpose: '安全巡检',
|
|
},
|
|
])
|
|
|
|
const usageColumns = [
|
|
{ title: '使用人', dataIndex: 'userName', key: 'userName' },
|
|
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
|
|
{ title: '开始时间', dataIndex: 'startTime', key: 'startTime' },
|
|
{ title: '结束时间', dataIndex: 'endTime', key: 'endTime' },
|
|
{ title: '使用目的', dataIndex: 'usagePurpose', key: 'usagePurpose' },
|
|
]
|
|
|
|
// 位置变更记录
|
|
const locationRecords = ref([
|
|
{
|
|
id: 1,
|
|
oldLocation: '仓库A',
|
|
newLocation: '现场B',
|
|
changeTime: '2024-06-01 08:00:00',
|
|
changeReason: '项目需要',
|
|
operator: '管理员',
|
|
},
|
|
{
|
|
id: 2,
|
|
oldLocation: '现场B',
|
|
newLocation: '仓库A',
|
|
changeTime: '2024-05-30 18:00:00',
|
|
changeReason: '项目结束',
|
|
operator: '管理员',
|
|
},
|
|
])
|
|
|
|
const locationColumns = [
|
|
{ title: '原位置', dataIndex: 'oldLocation', key: 'oldLocation' },
|
|
{ title: '新位置', dataIndex: 'newLocation', key: 'newLocation' },
|
|
{ title: '变更时间', dataIndex: 'changeTime', key: 'changeTime' },
|
|
{ title: '变更原因', dataIndex: 'changeReason', key: 'changeReason' },
|
|
{ title: '操作人', dataIndex: 'operator', key: 'operator' },
|
|
]
|
|
|
|
// 文件列表
|
|
const fileList = ref([
|
|
{
|
|
uid: '1',
|
|
name: '设备说明书.pdf',
|
|
status: 'done',
|
|
url: 'https://example.com/manual.pdf',
|
|
},
|
|
{
|
|
uid: '2',
|
|
name: '维护记录.xlsx',
|
|
status: 'done',
|
|
url: 'https://example.com/maintenance.xlsx',
|
|
},
|
|
])
|
|
|
|
// 获取设备类型文本
|
|
const getEquipmentTypeText = (type: string) => {
|
|
const typeMap: Record<string, string> = {
|
|
1: '检测设备',
|
|
2: '安全设备',
|
|
3: '车辆',
|
|
}
|
|
return typeMap[type] || type
|
|
}
|
|
|
|
// 获取设备状态文本
|
|
const getEquipmentStatusText = (status: string) => {
|
|
const statusMap: Record<string, string> = {
|
|
normal: '正常',
|
|
maintenance: '维修中',
|
|
scrapped: '报废',
|
|
}
|
|
return statusMap[status] || status
|
|
}
|
|
|
|
// 获取使用状态文本
|
|
const getUseStatusText = (status: string) => {
|
|
return status === '1' ? '使用中' : '空闲'
|
|
}
|
|
|
|
// 获取位置状态文本
|
|
const getLocationStatusText = (status: string) => {
|
|
const statusMap: Record<string, string> = {
|
|
in_stock: '库存中',
|
|
allocated: '已分配',
|
|
repair: '维修中',
|
|
scrap: '待报废',
|
|
scrapped: '已报废',
|
|
borrowed: '外借中',
|
|
lost: '丢失',
|
|
}
|
|
return statusMap[status] || status
|
|
}
|
|
|
|
// 获取健康状态文本
|
|
const getHealthStatusText = (status: string) => {
|
|
const statusMap: Record<string, string> = {
|
|
excellent: '优秀',
|
|
good: '良好',
|
|
normal: '一般',
|
|
poor: '较差',
|
|
bad: '差',
|
|
}
|
|
return statusMap[status] || status
|
|
}
|
|
|
|
// 加载设备详情
|
|
const loadDeviceDetail = async () => {
|
|
try {
|
|
const res = await getEquipmentDetail(deviceId)
|
|
const device = res.data as EquipmentResp
|
|
|
|
// 更新基本信息
|
|
basicInfo.value = [
|
|
{ label: '设备名称', value: device.equipmentName },
|
|
{ label: '设备类型', value: getEquipmentTypeText(device.equipmentType) },
|
|
{ label: '设备型号', value: device.equipmentModel },
|
|
{ label: '序列号', value: device.equipmentSn },
|
|
{ label: '品牌', value: device.brand || '-' },
|
|
{ label: '资产编号', value: device.assetCode || '-' },
|
|
{ label: '负责人', value: device.responsiblePerson || '-' },
|
|
{ label: '物理位置', value: device.physicalLocation || '-' },
|
|
{ label: '配置规格', value: device.specification || '-' },
|
|
{ label: '备注', value: device.assetRemark || '-' },
|
|
]
|
|
|
|
// 更新状态信息
|
|
statusInfo.value = [
|
|
{ label: '设备状态', value: getEquipmentStatusText(device.equipmentStatus) },
|
|
{ label: '使用状态', value: getUseStatusText(device.useStatus) },
|
|
{ label: '位置状态', value: getLocationStatusText(device.locationStatus || '') },
|
|
{ label: '健康状态', value: getHealthStatusText(device.healthStatus || '') },
|
|
{ label: '当前使用人', value: device.name || '-' },
|
|
{ label: '所属项目', value: device.projectName || '-' },
|
|
{ label: '创建时间', value: device.createTime || '-' },
|
|
{ label: '更新时间', value: device.updateTime || '-' },
|
|
]
|
|
} catch (error) {
|
|
console.error('加载设备详情失败:', error)
|
|
}
|
|
}
|
|
|
|
// 添加维护记录
|
|
const handleAddMaintenance = () => {
|
|
// TODO: 实现添加维护记录的逻辑
|
|
console.log('添加维护记录')
|
|
}
|
|
|
|
// 文件上传处理
|
|
const handleFileUpload = (options: any) => {
|
|
// TODO: 实现文件上传逻辑
|
|
console.log('文件上传:', options)
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (deviceId) {
|
|
loadDeviceDetail()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.device-detail-container {
|
|
padding: 16px;
|
|
background: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.maintenance-section,
|
|
.usage-section,
|
|
.location-section,
|
|
.files-section {
|
|
padding: 16px 0;
|
|
}
|
|
</style>
|