297 lines
7.6 KiB
Vue
297 lines
7.6 KiB
Vue
<template>
|
|
<GiPageLayout>
|
|
<GiTable
|
|
row-key="id"
|
|
title="叶片内部检测"
|
|
:data="dataList"
|
|
:columns="tableColumns"
|
|
:loading="loading"
|
|
:scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
|
|
: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="batchImport">
|
|
<template #icon><icon-upload /></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 #defectLevel="{ record }">
|
|
<a-tag :color="getDefectColor(record.defectLevel)" v-if="record.defectLevel">
|
|
{{ record.defectLevel }}
|
|
</a-tag>
|
|
<span v-else>-</span>
|
|
</template>
|
|
|
|
<!-- 操作列 -->
|
|
<template #action="{ record }">
|
|
<a-space>
|
|
<a-link @click="viewDetail(record)">详情</a-link>
|
|
<a-link @click="viewImages(record)">检测图片</a-link>
|
|
<a-link @click="generateReport(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'
|
|
|
|
// 搜索表单
|
|
const searchForm = reactive({
|
|
projectName: '',
|
|
turbineCode: '',
|
|
bladePosition: '',
|
|
status: '',
|
|
page: 1,
|
|
size: 10
|
|
})
|
|
|
|
// 查询条件配置
|
|
const queryFormColumns = [
|
|
{
|
|
field: 'projectName',
|
|
label: '项目名称',
|
|
type: 'input' as const,
|
|
props: {
|
|
placeholder: '请输入项目名称'
|
|
}
|
|
},
|
|
{
|
|
field: 'turbineCode',
|
|
label: '风机编号',
|
|
type: 'input' as const,
|
|
props: {
|
|
placeholder: '请输入风机编号'
|
|
}
|
|
},
|
|
{
|
|
field: 'bladePosition',
|
|
label: '叶片位置',
|
|
type: 'select' as const,
|
|
props: {
|
|
placeholder: '请选择叶片位置',
|
|
options: [
|
|
{ label: 'A叶片', value: 'A' },
|
|
{ label: 'B叶片', value: 'B' },
|
|
{ label: 'C叶片', value: 'C' }
|
|
]
|
|
}
|
|
},
|
|
{
|
|
field: 'status',
|
|
label: '检测状态',
|
|
type: 'select' as const,
|
|
props: {
|
|
placeholder: '请选择检测状态',
|
|
options: [
|
|
{ label: '待检测', value: 'pending' },
|
|
{ label: '检测中', value: 'in_progress' },
|
|
{ label: '已完成', value: 'completed' }
|
|
]
|
|
}
|
|
}
|
|
]
|
|
|
|
// 表格列配置
|
|
const tableColumns: TableColumnData[] = [
|
|
{ title: '检测编号', dataIndex: 'detectionCode', width: 120 },
|
|
{ title: '项目名称', dataIndex: 'projectName', width: 180, ellipsis: true, tooltip: true },
|
|
{ title: '风机编号', dataIndex: 'turbineCode', width: 100 },
|
|
{ title: '叶片位置', dataIndex: 'bladePosition', width: 100 },
|
|
{ title: '叶片型号', dataIndex: 'bladeModel', width: 120 },
|
|
{ title: '检测方法', dataIndex: 'detectionMethod', width: 120 },
|
|
{ title: '检测日期', dataIndex: 'detectionDate', width: 120 },
|
|
{ title: '检测状态', dataIndex: 'status', slotName: 'status', width: 100 },
|
|
{ title: '缺陷数量', dataIndex: 'defectCount', width: 100 },
|
|
{ title: '缺陷等级', dataIndex: 'defectLevel', slotName: 'defectLevel', width: 100 },
|
|
{ title: '检测人员', dataIndex: 'inspector', width: 120 },
|
|
{ title: '完成进度', dataIndex: 'progress', 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,
|
|
detectionCode: 'BID2024001',
|
|
projectName: '华润风电场叶片内部检测',
|
|
turbineCode: 'WT001',
|
|
bladePosition: 'A',
|
|
bladeModel: 'LM82.5',
|
|
detectionMethod: '内窥镜检测',
|
|
detectionDate: '2024-01-18',
|
|
status: 'completed',
|
|
defectCount: 3,
|
|
defectLevel: '轻微',
|
|
inspector: '张检测师',
|
|
progress: '100%',
|
|
remark: '发现几处轻微粘接缺陷'
|
|
},
|
|
{
|
|
id: 2,
|
|
detectionCode: 'BID2024002',
|
|
projectName: '大唐风电场叶片内部检测',
|
|
turbineCode: 'WT002',
|
|
bladePosition: 'B',
|
|
bladeModel: 'GE87.0',
|
|
detectionMethod: '超声波检测',
|
|
detectionDate: '2024-01-20',
|
|
status: 'in_progress',
|
|
defectCount: 0,
|
|
defectLevel: '',
|
|
inspector: '李检测师',
|
|
progress: '65%',
|
|
remark: '正在进行根部检测'
|
|
},
|
|
{
|
|
id: 3,
|
|
detectionCode: 'BID2024003',
|
|
projectName: '国电投海上风电叶片检测',
|
|
turbineCode: 'WT003',
|
|
bladePosition: 'C',
|
|
bladeModel: 'V164-9.5',
|
|
detectionMethod: '红外热成像',
|
|
detectionDate: '2024-01-22',
|
|
status: 'pending',
|
|
defectCount: 0,
|
|
defectLevel: '',
|
|
inspector: '王检测师',
|
|
progress: '0%',
|
|
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'
|
|
}
|
|
return colorMap[status] || 'gray'
|
|
}
|
|
|
|
// 获取状态文本
|
|
const getStatusText = (status: string) => {
|
|
const textMap: Record<string, string> = {
|
|
'pending': '待检测',
|
|
'in_progress': '检测中',
|
|
'completed': '已完成'
|
|
}
|
|
return textMap[status] || status
|
|
}
|
|
|
|
// 获取缺陷等级颜色
|
|
const getDefectColor = (level: string) => {
|
|
const colorMap: Record<string, string> = {
|
|
'无缺陷': 'green',
|
|
'轻微': 'blue',
|
|
'中等': 'orange',
|
|
'严重': 'red'
|
|
}
|
|
return colorMap[level] || 'gray'
|
|
}
|
|
|
|
// 搜索和重置
|
|
const search = async () => {
|
|
loading.value = true
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1000)
|
|
}
|
|
|
|
const reset = () => {
|
|
Object.assign(searchForm, {
|
|
projectName: '',
|
|
turbineCode: '',
|
|
bladePosition: '',
|
|
status: '',
|
|
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 batchImport = () => {
|
|
Message.info('批量导入功能开发中...')
|
|
}
|
|
|
|
const viewDetail = (record: any) => {
|
|
Message.info(`查看检测详情: ${record.projectName} - ${record.turbineCode}${record.bladePosition}叶片`)
|
|
}
|
|
|
|
const viewImages = (record: any) => {
|
|
Message.info(`查看检测图片: ${record.projectName} - ${record.turbineCode}${record.bladePosition}叶片`)
|
|
}
|
|
|
|
const generateReport = (record: any) => {
|
|
Message.info(`生成检测报告: ${record.projectName} - ${record.turbineCode}${record.bladePosition}叶片`)
|
|
}
|
|
|
|
onMounted(() => {
|
|
search()
|
|
})
|
|
</script> |