274 lines
6.8 KiB
Vue
274 lines
6.8 KiB
Vue
<template>
|
|
<GiPageLayout>
|
|
<GiTable
|
|
row-key="id"
|
|
title="定制无人机"
|
|
:data="dataList"
|
|
:columns="tableColumns"
|
|
:loading="loading"
|
|
:scroll="{ x: '100%', y: '100%', minWidth: 1300 }"
|
|
:pagination="pagination"
|
|
@page-change="onPageChange"
|
|
@page-size-change="onPageSizeChange"
|
|
@refresh="search"
|
|
>
|
|
<template #top>
|
|
<GiForm
|
|
v-model="searchForm"
|
|
search
|
|
:columns="queryFormColumns"
|
|
size="medium"
|
|
@search="search"
|
|
@reset="reset"
|
|
/>
|
|
</template>
|
|
|
|
<template #toolbar-left>
|
|
<a-space>
|
|
<a-button type="primary" @click="openAddModal">
|
|
<template #icon><icon-plus /></template>
|
|
<template #default>新增无人机</template>
|
|
</a-button>
|
|
<a-button @click="openCustomModal">
|
|
<template #icon><icon-settings /></template>
|
|
<template #default>定制配置</template>
|
|
</a-button>
|
|
</a-space>
|
|
</template>
|
|
|
|
<!-- 无人机状态 -->
|
|
<template #status="{ record }">
|
|
<a-tag :color="getStatusColor(record.status)">
|
|
{{ getStatusText(record.status) }}
|
|
</a-tag>
|
|
</template>
|
|
|
|
<!-- 飞行时长 -->
|
|
<template #flightTime="{ record }">
|
|
<span class="font-medium text-blue-600">{{ record.flightTime }}小时</span>
|
|
</template>
|
|
|
|
<!-- 操作列 -->
|
|
<template #action="{ record }">
|
|
<a-space>
|
|
<a-link @click="viewDetail(record)">详情</a-link>
|
|
<a-link @click="editRecord(record)">编辑</a-link>
|
|
<a-link @click="flightRecord(record)">飞行记录</a-link>
|
|
<a-link @click="maintenance(record)">维护</a-link>
|
|
</a-space>
|
|
</template>
|
|
</GiTable>
|
|
</GiPageLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { Message } from '@arco-design/web-vue'
|
|
import type { TableColumnData } from '@arco-design/web-vue'
|
|
|
|
// 搜索表单
|
|
let searchForm = reactive({
|
|
droneName: '',
|
|
model: '',
|
|
status: '',
|
|
owner: '',
|
|
page: 1,
|
|
size: 10
|
|
})
|
|
|
|
// 查询条件配置
|
|
const queryFormColumns = [
|
|
{
|
|
field: 'droneName',
|
|
label: '无人机名称',
|
|
type: 'input' as const,
|
|
props: {
|
|
placeholder: '请输入无人机名称'
|
|
}
|
|
},
|
|
{
|
|
field: 'model',
|
|
label: '型号',
|
|
type: 'input' as const,
|
|
props: {
|
|
placeholder: '请输入型号'
|
|
}
|
|
},
|
|
{
|
|
field: 'status',
|
|
label: '状态',
|
|
type: 'select' as const,
|
|
props: {
|
|
placeholder: '请选择状态',
|
|
options: [
|
|
{ label: '可用', value: 'available' },
|
|
{ label: '使用中', value: 'in_use' },
|
|
{ label: '维护中', value: 'maintenance' },
|
|
{ label: '故障', value: 'fault' }
|
|
]
|
|
}
|
|
}
|
|
]
|
|
|
|
// 表格列配置
|
|
const tableColumns: TableColumnData[] = [
|
|
{ title: '无人机编号', dataIndex: 'droneCode', width: 120 },
|
|
{ title: '无人机名称', dataIndex: 'droneName', width: 180, ellipsis: true, tooltip: true },
|
|
{ title: '型号规格', dataIndex: 'model', width: 120 },
|
|
{ title: '载重能力', dataIndex: 'payload', width: 100 },
|
|
{ title: '续航时间', dataIndex: 'endurance', width: 100 },
|
|
{ title: '最大飞行高度', dataIndex: 'maxAltitude', width: 120 },
|
|
{ title: '购买日期', dataIndex: 'purchaseDate', width: 120 },
|
|
{ title: '累计飞行时长', dataIndex: 'flightTime', slotName: 'flightTime', width: 120 },
|
|
{ title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
|
|
{ title: '负责人', dataIndex: 'owner', width: 100 },
|
|
{ title: '存放位置', dataIndex: 'location', width: 150, ellipsis: true, tooltip: true },
|
|
{ title: '备注', dataIndex: 'remark', width: 200, ellipsis: true, tooltip: true },
|
|
{ title: '操作', slotName: 'action', width: 200, fixed: 'right' }
|
|
]
|
|
|
|
// 数据状态
|
|
const loading = ref(false)
|
|
const dataList = ref([
|
|
{
|
|
id: 1,
|
|
droneCode: 'DR001',
|
|
droneName: '风电叶片检测无人机',
|
|
model: 'M300RTK',
|
|
payload: '2.7kg',
|
|
endurance: '55分钟',
|
|
maxAltitude: '7000m',
|
|
purchaseDate: '2023-05-20',
|
|
flightTime: 156.5,
|
|
status: 'available',
|
|
owner: '李飞行员',
|
|
location: '设备仓库A区',
|
|
remark: '配备高清相机和热成像设备'
|
|
},
|
|
{
|
|
id: 2,
|
|
droneCode: 'DR002',
|
|
droneName: '塔筒巡检无人机',
|
|
model: 'M350RTK',
|
|
payload: '2.9kg',
|
|
endurance: '42分钟',
|
|
maxAltitude: '7000m',
|
|
purchaseDate: '2023-07-15',
|
|
flightTime: 89.2,
|
|
status: 'in_use',
|
|
owner: '王飞行员',
|
|
location: '现场作业点',
|
|
remark: '正在执行塔筒巡检任务'
|
|
},
|
|
{
|
|
id: 3,
|
|
droneCode: 'DR003',
|
|
droneName: '定制运输无人机',
|
|
model: 'Custom-T1000',
|
|
payload: '50kg',
|
|
endurance: '35分钟',
|
|
maxAltitude: '500m',
|
|
purchaseDate: '2023-09-10',
|
|
flightTime: 45.8,
|
|
status: 'maintenance',
|
|
owner: '张工程师',
|
|
location: '维修车间',
|
|
remark: '螺旋桨需要更换'
|
|
}
|
|
])
|
|
|
|
const pagination = reactive({
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 3,
|
|
showTotal: true,
|
|
showPageSize: true
|
|
})
|
|
|
|
// 获取状态颜色
|
|
const getStatusColor = (status: string) => {
|
|
const colorMap: Record<string, string> = {
|
|
'available': 'green',
|
|
'in_use': 'blue',
|
|
'maintenance': 'orange',
|
|
'fault': 'red'
|
|
}
|
|
return colorMap[status] || 'gray'
|
|
}
|
|
|
|
// 获取状态文本
|
|
const getStatusText = (status: string) => {
|
|
const textMap: Record<string, string> = {
|
|
'available': '可用',
|
|
'in_use': '使用中',
|
|
'maintenance': '维护中',
|
|
'fault': '故障'
|
|
}
|
|
return textMap[status] || status
|
|
}
|
|
|
|
// 搜索和重置
|
|
const search = async () => {
|
|
loading.value = true
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1000)
|
|
}
|
|
|
|
const reset = () => {
|
|
Object.assign(searchForm, {
|
|
droneName: '',
|
|
model: '',
|
|
status: '',
|
|
owner: '',
|
|
page: 1,
|
|
size: 10
|
|
})
|
|
pagination.current = 1
|
|
search()
|
|
}
|
|
|
|
// 分页处理
|
|
const onPageChange = (page: number) => {
|
|
searchForm.page = page
|
|
pagination.current = page
|
|
search()
|
|
}
|
|
|
|
const onPageSizeChange = (size: number) => {
|
|
searchForm.size = size
|
|
searchForm.page = 1
|
|
pagination.pageSize = size
|
|
pagination.current = 1
|
|
search()
|
|
}
|
|
|
|
// 操作方法
|
|
const openAddModal = () => {
|
|
Message.info('新增无人机功能开发中...')
|
|
}
|
|
|
|
const openCustomModal = () => {
|
|
Message.info('定制配置功能开发中...')
|
|
}
|
|
|
|
const viewDetail = (record: any) => {
|
|
Message.info(`查看无人机详情: ${record.droneName}`)
|
|
}
|
|
|
|
const editRecord = (record: any) => {
|
|
Message.info(`编辑无人机: ${record.droneName}`)
|
|
}
|
|
|
|
const flightRecord = (record: any) => {
|
|
Message.info(`查看飞行记录: ${record.droneName}`)
|
|
}
|
|
|
|
const maintenance = (record: any) => {
|
|
Message.info(`维护记录: ${record.droneName}`)
|
|
}
|
|
|
|
onMounted(() => {
|
|
search()
|
|
})
|
|
</script> |