This commit is contained in:
Mr.j
parent
02c705ae3d
commit
c7043dbdb1
|
|
@ -0,0 +1,313 @@
|
|||
<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>
|
||||
Loading…
Reference in New Issue