283 lines
7.2 KiB
Vue
283 lines
7.2 KiB
Vue
<template>
|
||
<GiPageLayout>
|
||
<GiTable
|
||
row-key="id"
|
||
title="防雷检测服务"
|
||
:data="dataList"
|
||
:columns="tableColumns"
|
||
:loading="loading"
|
||
:scroll="{ x: '100%', y: '100%', minWidth: 1400 }"
|
||
: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="exportReport">
|
||
<template #icon><icon-download /></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 #result="{ record }">
|
||
<a-tag :color="getResultColor(record.result)">
|
||
{{ record.result }}
|
||
</a-tag>
|
||
</template>
|
||
|
||
<!-- 操作列 -->
|
||
<template #action="{ record }">
|
||
<a-space>
|
||
<a-link @click="viewDetail(record)">详情</a-link>
|
||
<a-link @click="viewReport(record)">检测报告</a-link>
|
||
<a-link @click="editRecord(record)" v-if="record.status !== 'completed'">编辑</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'
|
||
|
||
// 搜索表单
|
||
const searchForm = reactive({
|
||
projectName: '',
|
||
client: '',
|
||
status: '',
|
||
detectionDate: '',
|
||
page: 1,
|
||
size: 10
|
||
})
|
||
|
||
// 查询条件配置
|
||
const queryFormColumns = [
|
||
{
|
||
field: 'projectName',
|
||
label: '项目名称',
|
||
type: 'input' as const,
|
||
props: {
|
||
placeholder: '请输入项目名称'
|
||
}
|
||
},
|
||
{
|
||
field: 'client',
|
||
label: '客户',
|
||
type: 'input' as const,
|
||
props: {
|
||
placeholder: '请输入客户名称'
|
||
}
|
||
},
|
||
{
|
||
field: 'status',
|
||
label: '检测状态',
|
||
type: 'select' as const,
|
||
props: {
|
||
placeholder: '请选择检测状态',
|
||
options: [
|
||
{ label: '待检测', value: 'pending' },
|
||
{ label: '检测中', value: 'in_progress' },
|
||
{ label: '已完成', value: 'completed' },
|
||
{ label: '已取消', value: 'cancelled' }
|
||
]
|
||
}
|
||
}
|
||
]
|
||
|
||
// 表格列配置
|
||
const tableColumns: TableColumnData[] = [
|
||
{ title: '任务编号', dataIndex: 'taskCode', width: 120 },
|
||
{ title: '项目名称', dataIndex: 'projectName', width: 200, ellipsis: true, tooltip: true },
|
||
{ title: '客户', dataIndex: 'client', width: 150, ellipsis: true, tooltip: true },
|
||
{ title: '风机数量', dataIndex: 'turbineCount', width: 100 },
|
||
{ title: '检测类型', dataIndex: 'detectionType', width: 120 },
|
||
{ title: '计划检测时间', dataIndex: 'plannedDate', width: 120 },
|
||
{ title: '实际检测时间', dataIndex: 'actualDate', width: 120 },
|
||
{ title: '检测状态', dataIndex: 'status', slotName: 'status', width: 100 },
|
||
{ title: '检测结果', dataIndex: 'result', slotName: 'result', width: 100 },
|
||
{ title: '检测人员', dataIndex: 'inspector', width: 120 },
|
||
{ title: '合格率', dataIndex: 'passRate', width: 100 },
|
||
{ title: '备注', dataIndex: 'remark', width: 200, ellipsis: true, tooltip: true },
|
||
{ title: '操作', slotName: 'action', width: 180, fixed: 'right' }
|
||
]
|
||
|
||
// 数据状态
|
||
const loading = ref(false)
|
||
const dataList = ref([
|
||
{
|
||
id: 1,
|
||
taskCode: 'LD2024001',
|
||
projectName: '华能新能源风电场防雷检测',
|
||
client: '华能新能源股份有限公司',
|
||
turbineCount: 25,
|
||
detectionType: '接地电阻检测',
|
||
plannedDate: '2024-01-20',
|
||
actualDate: '2024-01-20',
|
||
status: 'completed',
|
||
result: '合格',
|
||
inspector: '李检测师',
|
||
passRate: '96%',
|
||
remark: '检测完成，整体防雷系统良好'
|
||
},
|
||
{
|
||
id: 2,
|
||
taskCode: 'LD2024002',
|
||
projectName: '大唐风电场避雷器检测',
|
||
client: '大唐新能源股份有限公司',
|
||
turbineCount: 30,
|
||
detectionType: '避雷器性能检测',
|
||
plannedDate: '2024-01-25',
|
||
actualDate: '2024-01-25',
|
||
status: 'in_progress',
|
||
result: '检测中',
|
||
inspector: '王检测师',
|
||
passRate: '待确定',
|
||
remark: '正在进行第15台风机检测'
|
||
},
|
||
{
|
||
id: 3,
|
||
taskCode: 'LD2024003',
|
||
projectName: '国电投海上风电防雷检测',
|
||
client: '国家电力投资集团',
|
||
turbineCount: 40,
|
||
detectionType: '综合防雷检测',
|
||
plannedDate: '2024-02-01',
|
||
actualDate: '',
|
||
status: 'pending',
|
||
result: '待检测',
|
||
inspector: '张检测师',
|
||
passRate: '待确定',
|
||
remark: '海上风电场，需要特殊设备'
|
||
}
|
||
])
|
||
|
||
const pagination = reactive({
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 3,
|
||
showTotal: true,
|
||
showPageSize: true
|
||
})
|
||
|
||
// 获取状态颜色
|
||
const getStatusColor = (status: string) => {
|
||
const colorMap: Record<string, string> = {
|
||
'pending': 'orange',
|
||
'in_progress': 'blue',
|
||
'completed': 'green',
|
||
'cancelled': 'red'
|
||
}
|
||
return colorMap[status] || 'gray'
|
||
}
|
||
|
||
// 获取状态文本
|
||
const getStatusText = (status: string) => {
|
||
const textMap: Record<string, string> = {
|
||
'pending': '待检测',
|
||
'in_progress': '检测中',
|
||
'completed': '已完成',
|
||
'cancelled': '已取消'
|
||
}
|
||
return textMap[status] || status
|
||
}
|
||
|
||
// 获取结果颜色
|
||
const getResultColor = (result: string) => {
|
||
const colorMap: Record<string, string> = {
|
||
'合格': 'green',
|
||
'不合格': 'red',
|
||
'待整改': 'orange',
|
||
'检测中': 'blue',
|
||
'待检测': 'gray'
|
||
}
|
||
return colorMap[result] || 'gray'
|
||
}
|
||
|
||
// 搜索和重置
|
||
const search = async () => {
|
||
loading.value = true
|
||
setTimeout(() => {
|
||
loading.value = false
|
||
}, 1000)
|
||
}
|
||
|
||
const reset = () => {
|
||
Object.assign(searchForm, {
|
||
projectName: '',
|
||
client: '',
|
||
status: '',
|
||
detectionDate: '',
|
||
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 exportReport = () => {
|
||
Message.info('导出检测报告功能开发中...')
|
||
}
|
||
|
||
const viewDetail = (record: any) => {
|
||
Message.info(`查看检测详情: ${record.projectName}`)
|
||
}
|
||
|
||
const viewReport = (record: any) => {
|
||
Message.info(`查看检测报告: ${record.projectName}`)
|
||
}
|
||
|
||
const editRecord = (record: any) => {
|
||
Message.info(`编辑检测任务: ${record.projectName}`)
|
||
}
|
||
|
||
onMounted(() => {
|
||
search()
|
||
})
|
||
</script> |