498 lines
14 KiB
Vue
498 lines
14 KiB
Vue
<template>
|
||
<div class="model-config-container">
|
||
<a-card title="模型配置" :bordered="false">
|
||
<a-space direction="vertical" fill :size="16">
|
||
<!-- 操作栏 -->
|
||
<div class="operation-bar">
|
||
<a-space>
|
||
<a-button type="primary" @click="handleAdd">
|
||
<template #icon><icon-plus /></template>
|
||
新建配置
|
||
</a-button>
|
||
<a-button @click="refreshList">
|
||
<template #icon><icon-refresh /></template>
|
||
刷新
|
||
</a-button>
|
||
</a-space>
|
||
|
||
<a-space>
|
||
<!-- 搜索栏 -->
|
||
<a-input-search
|
||
v-model="searchKeyword"
|
||
placeholder="请输入模型名称或ID搜索"
|
||
search-button
|
||
@search="handleSearch"
|
||
/>
|
||
</a-space>
|
||
</div>
|
||
|
||
<!-- 列表 -->
|
||
<a-table
|
||
:data="tableData"
|
||
:loading="loading"
|
||
:pagination="pagination"
|
||
@page-change="onPageChange"
|
||
@page-size-change="onPageSizeChange"
|
||
row-key="modelId"
|
||
>
|
||
<template #columns>
|
||
<!-- <a-table-column title="模型ID" data-index="modelId" /> -->
|
||
<a-table-column title="模型名称" data-index="modelName" />
|
||
<a-table-column title="模型路径" data-index="modelPath" />
|
||
<a-table-column title="置信度阈值" data-index="confThreshold">
|
||
<template #cell="{ record }">
|
||
{{ record.confThreshold ? record.confThreshold.toFixed(2) : '-' }}
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="NMS阈值" data-index="nmsThreshold">
|
||
<template #cell="{ record }">
|
||
{{ record.nmsThreshold ? record.nmsThreshold.toFixed(2) : '-' }}
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="操作" fixed="right" :width="180">
|
||
<template #cell="{ record }">
|
||
<a-space>
|
||
<a-button type="text" size="small" @click="handleEdit(record)">
|
||
<template #icon><icon-edit /></template>
|
||
编辑
|
||
</a-button>
|
||
<a-button type="text" size="small" @click="handleView(record)">
|
||
<template #icon><icon-eye /></template>
|
||
查看
|
||
</a-button>
|
||
<a-popconfirm
|
||
title="确定要删除此配置吗?"
|
||
@ok="handleDelete(record)"
|
||
>
|
||
<a-button type="text" status="danger" size="small">
|
||
<template #icon><icon-delete /></template>
|
||
删除
|
||
</a-button>
|
||
</a-popconfirm>
|
||
</a-space>
|
||
</template>
|
||
</a-table-column>
|
||
</template>
|
||
</a-table>
|
||
</a-space>
|
||
</a-card>
|
||
|
||
<!-- 新增/编辑表单 -->
|
||
<a-modal
|
||
v-model:visible="formVisible"
|
||
:title="isEdit ? '编辑模型配置' : '新增模型配置'"
|
||
@cancel="closeForm"
|
||
@before-ok="handleSubmit"
|
||
unmount-on-close
|
||
>
|
||
<a-form
|
||
ref="formRef"
|
||
:model="formData"
|
||
label-align="right"
|
||
:label-col-props="{ span: 6 }"
|
||
:wrapper-col-props="{ span: 18 }"
|
||
auto-label-width
|
||
>
|
||
<!-- <a-form-item
|
||
field="modelId"
|
||
label="模型ID"
|
||
:validate-trigger="['change', 'blur']"
|
||
:rules="[{ required: true, message: '请输入模型ID' }]"
|
||
>
|
||
<a-input
|
||
v-model="formData.modelId"
|
||
placeholder="请输入模型ID"
|
||
:disabled="isEdit"
|
||
/>
|
||
</a-form-item> -->
|
||
<a-form-item
|
||
field="modelName"
|
||
label="模型名称"
|
||
:validate-trigger="['change', 'blur']"
|
||
:rules="[{ required: true, message: '请输入模型名称' }]"
|
||
>
|
||
<a-input
|
||
v-model="formData.modelName"
|
||
placeholder="请输入模型名称"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item
|
||
field="attachId"
|
||
label="模型附件"
|
||
>
|
||
<a-space>
|
||
<a-upload
|
||
:custom-request="uploadModelFile"
|
||
>
|
||
<a-button type="primary">
|
||
<template #icon><icon-upload /></template>
|
||
上传模型文件
|
||
</a-button>
|
||
</a-upload>
|
||
<a-button
|
||
v-if="formData.attachId"
|
||
status="danger"
|
||
@click="formData.attachId = ''"
|
||
>
|
||
<template #icon><icon-delete /></template>
|
||
清除
|
||
</a-button>
|
||
</a-space>
|
||
<div class="upload-tip" v-if="uploadingFile">
|
||
<a-spin /> 上传中...{{ uploadProgress }}%
|
||
</div>
|
||
<div class="upload-tip success" v-if="uploadedFileName && !uploadingFile">
|
||
<icon-check-circle /> 已上传: {{ uploadedFileName }}
|
||
</div>
|
||
</a-form-item>
|
||
<a-form-item
|
||
field="confThreshold"
|
||
label="置信度阈值"
|
||
:validate-trigger="['change', 'blur']"
|
||
:rules="[
|
||
{ required: true, message: '请输入置信度阈值' },
|
||
{
|
||
validator: (value, cb) => {
|
||
if (value < 0 || value > 1) {
|
||
cb('置信度阈值必须在0-1之间');
|
||
}
|
||
}
|
||
}
|
||
]"
|
||
>
|
||
<a-input-number
|
||
v-model="formData.confThreshold"
|
||
placeholder="请输入置信度阈值"
|
||
:min="0"
|
||
:max="1"
|
||
:precision="2"
|
||
:step="0.01"
|
||
style="width: 100%;"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item
|
||
field="nmsThreshold"
|
||
label="NMS阈值"
|
||
:validate-trigger="['change', 'blur']"
|
||
:rules="[
|
||
{ required: true, message: '请输入NMS阈值' },
|
||
{
|
||
validator: (value, cb) => {
|
||
if (value < 0 || value > 1) {
|
||
cb('NMS阈值必须在0-1之间');
|
||
}
|
||
}
|
||
}
|
||
]"
|
||
>
|
||
<a-input-number
|
||
v-model="formData.nmsThreshold"
|
||
placeholder="请输入NMS阈值"
|
||
:min="0"
|
||
:max="1"
|
||
:precision="2"
|
||
:step="0.01"
|
||
style="width: 100%;"
|
||
/>
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-modal>
|
||
|
||
<!-- 查看详情 -->
|
||
<a-modal
|
||
v-model:visible="detailVisible"
|
||
title="模型配置详情"
|
||
@cancel="closeDetail"
|
||
:footer="false"
|
||
unmount-on-close
|
||
>
|
||
<a-descriptions
|
||
:data="detailData"
|
||
:column="1"
|
||
title="基本信息"
|
||
:bordered="true"
|
||
/>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted } from 'vue';
|
||
import { Message } from '@arco-design/web-vue';
|
||
import {
|
||
IconPlus,
|
||
IconRefresh,
|
||
IconEdit,
|
||
IconEye,
|
||
IconDelete,
|
||
IconUpload,
|
||
IconCheckCircle
|
||
} from '@arco-design/web-vue/es/icon';
|
||
import {
|
||
getModelConfigList,
|
||
getModelConfigDetail,
|
||
createModelConfig,
|
||
updateModelConfig,
|
||
deleteModelConfig
|
||
} from '@/apis/model-config';
|
||
import { addAttachment } from '@/apis/attach-info';
|
||
import type { ModelConfigRequest, ModelConfigResponse } from '@/apis/model-config/type';
|
||
|
||
defineOptions({ name: 'ModelConfig' });
|
||
|
||
// 表格数据和加载状态
|
||
const tableData = ref<any[]>([]);
|
||
const loading = ref(false);
|
||
const searchKeyword = ref('');
|
||
|
||
// 分页信息
|
||
const pagination = reactive({
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
showTotal: true,
|
||
showJumper: true,
|
||
});
|
||
|
||
// 表单相关
|
||
const formRef = ref();
|
||
const formVisible = ref(false);
|
||
const isEdit = ref(false);
|
||
const formData = reactive<ModelConfigRequest>({
|
||
attachId: '',
|
||
confThreshold: 0,
|
||
modelId: '',
|
||
modelName: '',
|
||
nmsThreshold: 0,
|
||
});
|
||
|
||
// 详情相关
|
||
const detailVisible = ref(false);
|
||
const detailData = ref<{ label: string; value: any }[]>([]);
|
||
|
||
// 上传文件相关
|
||
const uploadingFile = ref(false);
|
||
const uploadProgress = ref(0);
|
||
const uploadedFileName = ref('');
|
||
|
||
// 获取模型配置列表
|
||
const fetchModelConfigList = async () => {
|
||
loading.value = true;
|
||
try {
|
||
const res = await getModelConfigList({
|
||
keyword: searchKeyword.value,
|
||
page: pagination.current,
|
||
pageSize: pagination.pageSize,
|
||
});
|
||
|
||
if (res.data) {
|
||
tableData.value = Array.isArray(res.data) ? res.data : [];
|
||
pagination.total = Array.isArray(res.data) ? res.data.length : 0;
|
||
} else {
|
||
tableData.value = [];
|
||
pagination.total = 0;
|
||
}
|
||
} catch (error) {
|
||
console.error('获取模型配置列表失败:', error);
|
||
Message.error('获取模型配置列表失败');
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
// 初始化
|
||
onMounted(() => {
|
||
fetchModelConfigList();
|
||
});
|
||
|
||
// 刷新列表
|
||
const refreshList = () => {
|
||
fetchModelConfigList();
|
||
};
|
||
|
||
// 搜索
|
||
const handleSearch = () => {
|
||
pagination.current = 1;
|
||
fetchModelConfigList();
|
||
};
|
||
|
||
// 分页事件
|
||
const onPageChange = (page: number) => {
|
||
pagination.current = page;
|
||
fetchModelConfigList();
|
||
};
|
||
|
||
const onPageSizeChange = (pageSize: number) => {
|
||
pagination.pageSize = pageSize;
|
||
fetchModelConfigList();
|
||
};
|
||
|
||
// 打开新增表单
|
||
const handleAdd = () => {
|
||
isEdit.value = false;
|
||
resetForm();
|
||
formVisible.value = true;
|
||
};
|
||
|
||
// 打开编辑表单
|
||
const handleEdit = async (record: ModelConfigResponse) => {
|
||
isEdit.value = true;
|
||
resetForm();
|
||
|
||
try {
|
||
const res = await getModelConfigDetail(record.modelId);
|
||
if (res.data) {
|
||
const modelData = res.data.data;
|
||
formData.modelId = modelData.modelId;
|
||
formData.modelName = modelData.modelName;
|
||
formData.attachId = modelData.attachId;
|
||
formData.confThreshold = modelData.confThreshold;
|
||
formData.nmsThreshold = modelData.nmsThreshold;
|
||
|
||
formVisible.value = true;
|
||
}
|
||
} catch (error) {
|
||
console.error('获取详情失败:', error);
|
||
Message.error('获取详情失败');
|
||
}
|
||
};
|
||
|
||
// 查看详情
|
||
const handleView = async (record: ModelConfigResponse) => {
|
||
try {
|
||
const res = await getModelConfigDetail(record.modelId);
|
||
if (res.data) {
|
||
const modelData = res.data.data;
|
||
detailData.value = [
|
||
// { label: '模型ID', value: modelData.modelId },
|
||
{ label: '模型名称', value: modelData.modelName },
|
||
{ label: '模型路径', value: modelData.modelPath || '-' },
|
||
{ label: '模型附件ID', value: modelData.attachId || '-' },
|
||
{ label: '置信度阈值', value: modelData.confThreshold ? modelData.confThreshold.toFixed(2) : '-' },
|
||
{ label: 'NMS阈值', value: modelData.nmsThreshold ? modelData.nmsThreshold.toFixed(2) : '-' },
|
||
];
|
||
|
||
detailVisible.value = true;
|
||
}
|
||
} catch (error) {
|
||
console.error('获取详情失败:', error);
|
||
Message.error('获取详情失败');
|
||
}
|
||
};
|
||
|
||
// 删除配置
|
||
const handleDelete = async (record: ModelConfigResponse) => {
|
||
try {
|
||
await deleteModelConfig(record.modelId);
|
||
Message.success('删除成功');
|
||
fetchModelConfigList();
|
||
} catch (error) {
|
||
console.error('删除失败:', error);
|
||
Message.error('删除失败');
|
||
}
|
||
};
|
||
|
||
// 提交表单
|
||
const handleSubmit = async () => {
|
||
if (!formRef.value) return false;
|
||
|
||
try {
|
||
await formRef.value.validate();
|
||
|
||
const submitData = {
|
||
modelId: formData.modelId,
|
||
modelName: formData.modelName,
|
||
attachId: formData.attachId,
|
||
confThreshold: formData.confThreshold,
|
||
nmsThreshold: formData.nmsThreshold,
|
||
};
|
||
|
||
if (isEdit.value) {
|
||
await updateModelConfig(submitData);
|
||
Message.success('更新成功');
|
||
} else {
|
||
await createModelConfig(submitData);
|
||
Message.success('创建成功');
|
||
}
|
||
|
||
closeForm();
|
||
fetchModelConfigList();
|
||
return true;
|
||
} catch (error) {
|
||
console.error('提交失败:', error);
|
||
Message.error('提交失败: ' + (error as any)?.msg || '未知错误');
|
||
return false;
|
||
}
|
||
};
|
||
|
||
// 重置表单
|
||
const resetForm = () => {
|
||
// formData.modelId = '';
|
||
formData.modelName = '';
|
||
formData.attachId = '';
|
||
formData.confThreshold = 0;
|
||
formData.nmsThreshold = 0;
|
||
};
|
||
|
||
// 关闭表单
|
||
const closeForm = () => {
|
||
formVisible.value = false;
|
||
resetForm();
|
||
};
|
||
|
||
// 关闭详情
|
||
const closeDetail = () => {
|
||
detailVisible.value = false;
|
||
detailData.value = [];
|
||
};
|
||
|
||
// 上传模型文件
|
||
const uploadModelFile = async (options: any) => {
|
||
const {onProgress, onError, onSuccess, fileItem, name} = options;
|
||
try {
|
||
// 创建FormData,正确设置文件参数
|
||
const uploadFormData = new FormData();
|
||
uploadFormData.append(name || 'file', fileItem.file);
|
||
// 调用添加附件API,按照格式 /attach-info/{businessType}
|
||
const res = await addAttachment(uploadFormData);
|
||
|
||
if (res && res.data) {
|
||
// 获取上传后的附件ID并设置到表单
|
||
const attachId = res.data;
|
||
formData.attachId = attachId;
|
||
uploadedFileName.value = fileItem.file.name;
|
||
Message.success('模型文件上传成功');
|
||
onSuccess(res);
|
||
} else {
|
||
Message.error('模型文件上传失败');
|
||
onError(new Error('上传失败'));
|
||
}
|
||
} catch (error) {
|
||
console.error('上传失败:', error);
|
||
Message.error('上传失败: ' + (error as any)?.msg || '未知错误');
|
||
onError(error);
|
||
} finally {
|
||
uploadingFile.value = false;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.model-config-container {
|
||
.operation-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.upload-tip {
|
||
margin-top: 8px;
|
||
color: #86909c;
|
||
font-size: 14px;
|
||
|
||
&.success {
|
||
color: #00b42a;
|
||
}
|
||
}
|
||
}
|
||
</style> |