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>
|