334 lines
13 KiB
Vue
334 lines
13 KiB
Vue
<template>
|
||
<div class="app-container add-report">
|
||
<div class="scroll div-content-scroll">
|
||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||
<el-card>
|
||
<template #header><svg-icon icon-class="pause" style="width: 20px; height: 20px" />报告基本信息
|
||
</template>
|
||
|
||
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="报告名称" prop="reportName">
|
||
<el-input v-model="form.reportName" placeholder="请输入数据集名称" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="16">
|
||
<el-form-item label="报告说明" prop="reportDesc">
|
||
<el-input v-model="form.reportDesc" placeholder="请输入数据集版本" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
</el-card>
|
||
|
||
<el-card style="margin-top: 10px;">
|
||
<template #header><svg-icon icon-class="pause" style="width: 20px; height: 20px" />推理任务
|
||
</template>
|
||
<el-table :data="info.tableData" stripe class="data-table1">
|
||
<el-table-column label="任务名称" align="left" prop="task_name" />
|
||
<el-table-column label="任务说明" align="left" prop="task_desc" />
|
||
<el-table-column label="使用数据集" align="left" prop="dataset_name" />
|
||
<el-table-column label="运行模型" align="left" prop="model_name" width="120" />
|
||
<el-table-column label="模型网络" align="left" prop="modl_net_type" width="120" />
|
||
<el-table-column label="创建时间" align="left" prop="create_time" width="120" v-if="1 == 2" />
|
||
<el-table-column label="完成时间" align="left" prop="finish_time" width="120" />
|
||
<el-table-column label="操作" fixed="right" align="center" width="100">
|
||
<template #default="scope">
|
||
<el-button text type="primary" size="small"
|
||
@click="doDelete(scope.row)"><i-ep-close-bold />删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<template #empty>
|
||
<el-button type="primary" @click="choiceTask">选择推理任务</el-button>
|
||
</template>
|
||
</el-table>
|
||
|
||
<div style="margin-top: 10px;"
|
||
v-if="['detection', 'classification', 'tracking'].indexOf(info.modl_sub_type) >= 0">
|
||
<div class="div-nav-header"><el-icon color="#409eff">
|
||
<Warning />
|
||
</el-icon>常用性能测评</div>
|
||
<el-row class="row-norm">
|
||
<el-col :span="12">
|
||
<el-form-item label="算法性能指标">
|
||
<span v-for="(it, idx) in info.norm.lvl1" :key="idx">{{ it }}</span>
|
||
</el-form-item>
|
||
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="实时响应指标">
|
||
<span v-for="(it, idx) in info.norm.lvl2" :key="idx">{{ it }}</span>
|
||
</el-form-item>
|
||
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div style="margin-top: 10px;" v-if="['detection', 'classification'].indexOf(info.modl_sub_type) >= 0">
|
||
<div class="div-nav-header"><el-icon color="#409eff">
|
||
<Warning />
|
||
</el-icon>算法阀值指标</div>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="置信度阈值" prop="score_threshold">
|
||
<el-input v-model="form.score_threshold" style="width: 120px;" class="txt-number"
|
||
placeholder="请输入置信度阈值" type="number" />
|
||
</el-form-item>
|
||
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="IoU阈值" prop="nms_threshold">
|
||
<el-input v-model="form.nms_threshold" style="width: 120px;" class="txt-number"
|
||
placeholder="请输入置信度阈值" type="number" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card style="margin-top: 10px;" v-if="info.modl_sub_type">
|
||
<template #header><svg-icon icon-class="pause" style="width: 20px; height: 20px" />更多测评
|
||
</template>
|
||
|
||
<el-table :data="info.tableData2" stripe class="data-table2">
|
||
<el-table-column label="任务名称" align="left" prop="task_name" />
|
||
<el-table-column label="任务说明" align="left" prop="task_desc" />
|
||
<el-table-column label="使用数据集" align="left" prop="dataset_name" />
|
||
<el-table-column label="运行模型" align="left" prop="model_name" width="120" />
|
||
<el-table-column label="模型网络" align="left" prop="modl_net_type" width="120" />
|
||
<el-table-column label="创建时间" align="left" prop="create_time" width="120" v-if="1 == 2" />
|
||
<el-table-column label="完成时间" align="left" prop="finish_time" width="120" />
|
||
<el-table-column label="操作" fixed="right" align="center" width="100">
|
||
<template #default="scope">
|
||
<el-button text type="primary" size="small" v-if="!scope.row.old"
|
||
@click="doDeleteComp(scope.row)"><i-ep-close-bold />删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<template #empty>
|
||
<el-button type="primary" @click="choiceRobustTask">添加鲁棒性任务</el-button>
|
||
<el-button type="primary" @click="choiceCompTask">添加对比任务</el-button>
|
||
</template>
|
||
</el-table>
|
||
|
||
</el-card>
|
||
</el-form>
|
||
</div>
|
||
<choiceTaskDlg ref="taskDlg" @success="doChoiceSuccess" />
|
||
|
||
<el-card class="card-footer">
|
||
<el-button type="primary" @click="doSave">生成报告</el-button>
|
||
</el-card>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import choiceTaskDlg from './components/choiceTaskDlg.vue'
|
||
import ReportApi from '@/api/report'
|
||
const router = useRouter();
|
||
const info = reactive({
|
||
tableData: [],
|
||
tableData2: [],
|
||
modl_sub_type: '',
|
||
norm: {
|
||
lvl1: [],
|
||
lvl2: [],
|
||
},
|
||
choiceType: '',
|
||
})
|
||
const formRef=ref();
|
||
const form = ref({}); // 基础表单
|
||
const taskDlg = ref()
|
||
const validateScore = (r, v, callback) => {
|
||
if (+v < 0 || +v >= 1) {
|
||
return callback(new Error('值在0-1之间'))
|
||
}
|
||
callback()
|
||
}
|
||
// 校验规则
|
||
const rules = reactive({
|
||
reportName: [{ required: true, message: "数据集名称不能为空", trigger: "blur" }],
|
||
score_threshold: [
|
||
{ required: true, message: "置信度阈值不能为空", trigger: "blur" },
|
||
{ validator: validateScore, trigger: 'blur' }
|
||
],
|
||
nms_threshold: [{ required: true, message: "IoU阈值不能为空", trigger: "blur" },
|
||
{ validator: validateScore, trigger: 'blur' }
|
||
],
|
||
});
|
||
//生成报告(验证)
|
||
function doSave() {
|
||
formRef.value.validate(d=>{
|
||
if(d){
|
||
if(!info.tableData || info.tableData.length==0){
|
||
ElMessage.error("请选择任务!");
|
||
return;
|
||
}
|
||
doMakeReport();//生成报告
|
||
}
|
||
});
|
||
}
|
||
//生成报告
|
||
function doMakeReport(){
|
||
let postData={
|
||
report_name:form.value.reportName,
|
||
report_desc:form.value.reportDesc,
|
||
task_id_list:info.tableData2 && info.tableData2.length>1?info.tableData2.map(d=>d.task_id):info.tableData.map(d=>d.task_id),
|
||
extra_evaluation_type:info.choiceType
|
||
};
|
||
if(info.choiceType=='horizontal_comparison'){
|
||
postData.threshold={
|
||
score_threshold:form.value.score_threshold,
|
||
nms_threshold:form.value.nms_threshold
|
||
};
|
||
}
|
||
ReportApi.addReport(postData).then(d=>{
|
||
let reportId=d.data?.data?.report_id||'';
|
||
if(reportId){
|
||
router.push({ path: "/simulationEvaluation/reportDesc", query: { id:reportId} });
|
||
ElMessage.success("生成报告成功!");
|
||
}else{
|
||
ElMessage.error("生成报告失败!");
|
||
}
|
||
});
|
||
}
|
||
//删除已选择
|
||
function doDelete(row) {
|
||
info.tableData = [];
|
||
info.modl_sub_type = "";
|
||
}
|
||
//删除对比
|
||
function doDeleteComp(row) {
|
||
let idx = info.tableData2.indexOf(row)
|
||
if (idx >= 0) {
|
||
info.tableData2 = info.tableData2.splice(idx, 1);
|
||
if (info.tableData2.length == 1) {
|
||
info.tableData2 = [];
|
||
info.choiceType=''
|
||
}
|
||
}
|
||
}
|
||
//选择任务
|
||
function choiceTask() {
|
||
info.choiceType = 'select'
|
||
taskDlg.value.showDialog({});
|
||
}
|
||
//添加鲁棒性任务
|
||
function choiceRobustTask() {
|
||
info.choiceType = 'robustness'
|
||
let taskId = info.tableData && info.tableData.length > 0 ? info.tableData[0].task_id : '';
|
||
taskDlg.value.showDialog({
|
||
disTaskId: taskId,
|
||
mult: false
|
||
});
|
||
}
|
||
//添加对比任务
|
||
function choiceCompTask() {
|
||
info.choiceType = 'horizontal_comparison'
|
||
let taskId = info.tableData && info.tableData.length > 0 ? info.tableData[0].task_id : '';
|
||
taskDlg.value.showDialog({
|
||
disTaskId: taskId,
|
||
mult: true
|
||
});
|
||
}
|
||
function doChoiceSuccess(d) {
|
||
if (info.choiceType !== 'select') {
|
||
info.tableData2 = [];
|
||
let it = info.tableData[0];
|
||
it.old = true;
|
||
info.tableData2 = [it, ...d];
|
||
}
|
||
info.tableData = d || [];
|
||
info.modl_sub_type = info.tableData != null && info.tableData.length > 0 ? info.tableData[0].modl_sub_type || '' : '';
|
||
if (['tracking'].indexOf(info.modl_sub_type) >= 0) {
|
||
info.norm = {
|
||
lvl1: "1.IDSW (ID跳变),2.MT（跟踪轨迹）,3.ML（丢失轨迹）,4.FM（打断次数）,5.MOTA（跟踪准确度）".split(","),
|
||
lvl2: "1. 平均推理时间,2. 系统延迟时间".split(",")
|
||
}
|
||
form.value.score_threshold = 0.5;
|
||
form.value.nms_threshold = 0.5;
|
||
} else if (['detection', 'classification'].indexOf(info.modl_sub_type) >= 0) {
|
||
info.norm = {
|
||
lvl1: "1.Precision（精确度）,2.Recall (召回率),3.F1-Score (F1分数),4. Micro F1,5. Macro F1,6.加权F1-Score,7.AP（平均精度）,8.mAP(多类平均精度),9.PR曲线".split(","),
|
||
lvl2: "1. 平均推理时间,2. 系统延迟时间".split(",")
|
||
}
|
||
form.value.score_threshold = 0.5;
|
||
form.value.nms_threshold = 0.5;
|
||
} else {
|
||
info.norm = {
|
||
lvl1: [],
|
||
lvl2: []
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.add-report {
|
||
.el-card__header {
|
||
padding: 8px 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.data-table1 {
|
||
.el-table__empty-block {
|
||
display: block;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.txt-number {
|
||
|
||
input::-webkit-inner-spin-button,
|
||
input::-webkit-outer-spin-button {
|
||
-webkit-appearance: none;
|
||
}
|
||
}
|
||
|
||
.row-norm {
|
||
.el-form-item__content {
|
||
background: #eee;
|
||
border-radius: 10px;
|
||
padding: 10px;
|
||
line-height: 20px;
|
||
font-weight: bold;
|
||
span{
|
||
margin-right:8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.div-nav-header {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
position: relative;
|
||
|
||
.el-icon {
|
||
position: relative;
|
||
margin-right: 4px;
|
||
top: 2px;
|
||
}
|
||
}
|
||
|
||
.card-footer {
|
||
position: fixed;
|
||
width: calc(100% - 215px);
|
||
bottom: 0px;
|
||
|
||
.el-card__body {
|
||
padding: 10px;
|
||
|
||
.el-pagination {
|
||
justify-content: end;
|
||
}
|
||
}
|
||
}
|
||
.div-content-scroll{
|
||
margin-bottom: 60px;
|
||
max-height: calc(100vh - 140px);
|
||
overflow-y: auto;
|
||
}
|
||
}
|
||
</style> |