242 lines
8.6 KiB
Vue
242 lines
8.6 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container simulation-report-desc" >
|
|||
|
|
<div style="background-color: #fff;padding:20px;margin-bottom: 60px;" id="print_simulation_report_desc">
|
|||
|
|
<div class="report-name">{{ info.report.report_name }}</div>
|
|||
|
|
<div class="report-info">
|
|||
|
|
<table>
|
|||
|
|
<tr>
|
|||
|
|
<td style="width:100px;" align="right"> 报告创建人:</td>
|
|||
|
|
<td>{{ info.report.user_name }}</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td align="right"> 报告生成时间:</td>
|
|||
|
|
<td>{{ info.report.create_time }}</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td align="right"> 报告说明:</td>
|
|||
|
|
<td>{{ info.report.report_desc }}</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<div class="div-line"></div>
|
|||
|
|
<div class="sub-title">推理任务列表</div>
|
|||
|
|
<el-table :data="info.taskList" stripe style="margin-top:10px;">
|
|||
|
|
<el-table-column label="任务名称" align="left" prop="task_name" />
|
|||
|
|
<el-table-column label="模型名称" align="left" prop="model_name" />
|
|||
|
|
<el-table-column label="网络类型" align="left" prop="modl_sub_type" />
|
|||
|
|
<el-table-column label="互联名称" align="left" prop="connection_name" />
|
|||
|
|
<el-table-column label="数据集名称" align="left" prop="dataset_name" />
|
|||
|
|
<el-table-column label="图片数量" align="left" prop="image_count" />
|
|||
|
|
<el-table-column label="设备名称" align="left" prop="device_name" />
|
|||
|
|
<el-table-column label="设备处理器" align="left" prop="hardware_chip" />
|
|||
|
|
</el-table>
|
|||
|
|
<div class="task-lists" v-if="info.tasks && info.tasks.length > 0">
|
|||
|
|
<div v-for="(it, idx) in info.tasks" :key="idx">
|
|||
|
|
<div class="sub-title">我的任务{{ idx + 1 }}的评估报告</div>
|
|||
|
|
<div v-if="info.thresholds" class="info-thresholds">
|
|||
|
|
<span>置信度阈值：</span>
|
|||
|
|
<span>{{ info.thresholds.score_threshold }}</span>
|
|||
|
|
<span>nms阈值:</span>
|
|||
|
|
<span>{{ info.thresholds.nms_threshold }}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-table :data="it.classes" stripe style="margin-top:10px;">
|
|||
|
|
<el-table-column label="类别名称" align="left" prop="class_name" />
|
|||
|
|
<el-table-column label="Accuracy(准确度)" align="left" prop="accuracy" />
|
|||
|
|
<el-table-column label="Precision(精准度)" align="left" prop="precision" />
|
|||
|
|
<el-table-column label="Recall(召回率)" align="left" prop="recall" />
|
|||
|
|
<el-table-column label="F1-score" align="left" prop="f1_score" />
|
|||
|
|
<el-table-column label="AP" align="left" prop="ap" />
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<el-table :data="it.datas" stripe style="margin-top:20px;" >
|
|||
|
|
<el-table-column label="mAP" align="left" prop="map" />
|
|||
|
|
<el-table-column label="Micro F1" align="left" prop="micro_f1" />
|
|||
|
|
<el-table-column label="Macro F1" align="left" prop="macro_f1" />
|
|||
|
|
<el-table-column label="加权F1-Scroe" align="left" prop="weight_f1" />
|
|||
|
|
<el-table-column label="平均推理时间" align="left" prop="inference_time" />
|
|||
|
|
<el-table-column label="系统延迟时间" align="left" prop="system_delay" />
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<el-row class="report-chart1" style="margin-top:20px;">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<charts :id="'reportChart1-' + idx" width="100%" height="400px"
|
|||
|
|
:render="opt => renderChart1(it, 'roc')"></charts>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<charts :id="'reportChart2-' + idx" width="100%" height="400px"
|
|||
|
|
:render="opt => renderChart1(it, 'rp')"></charts>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-card class="card-footer">
|
|||
|
|
<el-button type="primary" @click="doPrint">打印</el-button>
|
|||
|
|
<el-button type="primary">导出</el-button>
|
|||
|
|
<el-button type="primary" @click="doDelete">删除</el-button>
|
|||
|
|
<el-button @click="goBack">返回</el-button>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import ReportApi from '@/api/report'
|
|||
|
|
import charts from './components/charts.vue'
|
|||
|
|
import printJS from 'print-js'
|
|||
|
|
const route = useRoute()
|
|||
|
|
const router = useRouter();
|
|||
|
|
const info = reactive({
|
|||
|
|
report: {},
|
|||
|
|
taskList: [],
|
|||
|
|
thresholds: null,
|
|||
|
|
extra_evaluation_type: '',
|
|||
|
|
tasks: []
|
|||
|
|
})
|
|||
|
|
function goBack(){
|
|||
|
|
router.push({ path: "/simulationEvaluation/reportList"});
|
|||
|
|
}
|
|||
|
|
function doPrint(){
|
|||
|
|
printJS({
|
|||
|
|
printable:'print_simulation_report_desc',
|
|||
|
|
type: 'html',
|
|||
|
|
header:info.report.report_name,
|
|||
|
|
ignoreElements: ['no-print']
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
const doDelete = () => {
|
|||
|
|
let id = route.query.id;
|
|||
|
|
ElMessageBox.confirm("确认删除?", "警告", {
|
|||
|
|
confirmButtonText: "确定",
|
|||
|
|
cancelButtonText: "取消",
|
|||
|
|
type: "warning",
|
|||
|
|
}).then(function () {
|
|||
|
|
ReportApi.deleteReport(id).then(d=>{
|
|||
|
|
if(d.data.code==0){
|
|||
|
|
ElMessage.success("删除成功!");
|
|||
|
|
goBack();
|
|||
|
|
}else{
|
|||
|
|
ElMessage.error("删除失败!");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function renderChart1(data, type) {
|
|||
|
|
let chartInfo = data.chartsInfo
|
|||
|
|
let opt = {
|
|||
|
|
legend: {
|
|||
|
|
left:'10%',right:'10%',
|
|||
|
|
data: chartInfo.names },
|
|||
|
|
grid: { top: '25%', },
|
|||
|
|
xAxis: [{
|
|||
|
|
type: 'category', // 还有其他的type，可以去官网喵两眼哦
|
|||
|
|
data: ['0.0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', "0.8", "0.9", "1.0"], // x轴数据
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
name: type == 'roc' ? "ROC曲线" : "RP曲线"
|
|||
|
|
}],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
series: (type == "roc" ? chartInfo.rocs : chartInfo.rps).map(it => {
|
|||
|
|
return {
|
|||
|
|
name: it.name,
|
|||
|
|
type: it.type,
|
|||
|
|
data: it.data,
|
|||
|
|
label:{
|
|||
|
|
show:true,
|
|||
|
|
position:'top'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
return opt;
|
|||
|
|
}
|
|||
|
|
function initTaskChart(it) {
|
|||
|
|
let rocs = [];
|
|||
|
|
let rps = [];
|
|||
|
|
let names = [];
|
|||
|
|
let classes = it.classes || [];
|
|||
|
|
classes.forEach(d => {
|
|||
|
|
rocs.push({
|
|||
|
|
name: d.class_name, data: d.roc, type: 'line'
|
|||
|
|
});
|
|||
|
|
rps.push({
|
|||
|
|
name: d.class_name, data: d.pr, type: 'line'
|
|||
|
|
});
|
|||
|
|
names.push(d.class_name)
|
|||
|
|
});
|
|||
|
|
return {
|
|||
|
|
rocs, rps, names
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function loadData() {
|
|||
|
|
let id = route.query.id;
|
|||
|
|
ReportApi.getReport(id).then(d => {
|
|||
|
|
info.report = d.data.data || {};
|
|||
|
|
info.taskList = info.report.task_list || []
|
|||
|
|
info.thresholds = info.report.report_parameters?.report_parameters?.thresholds || null
|
|||
|
|
info.extra_evaluation_type = info.report.report_parameters?.report_parameters?.extra_evaluation_type || '';
|
|||
|
|
info.tasks = (info.report.report_data?.tasks || []).map(it => {
|
|||
|
|
it.classes.splice(20)
|
|||
|
|
it.datas = [{
|
|||
|
|
inference_time: it.inference_time, macro_f1: it.macro_f1, map: it.map, micro_f1: it.micro_f1,
|
|||
|
|
system_delay: it.system_delay, task_id: it.task_id, weight_f1: it.weight_f1
|
|||
|
|
}];
|
|||
|
|
it.chartsInfo = initTaskChart(it);
|
|||
|
|
return it;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
onMounted(loadData);
|
|||
|
|
</script>
|
|||
|
|
<style lang='scss'>
|
|||
|
|
.simulation-report-desc {
|
|||
|
|
|
|||
|
|
font-size: 12px;
|
|||
|
|
|
|||
|
|
.report-name {
|
|||
|
|
font-size: 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sub-title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.div-line {
|
|||
|
|
margin: 10px 0px;
|
|||
|
|
height: 2px;
|
|||
|
|
background-color: #aaa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.task-lists {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
|
|||
|
|
.info-thresholds {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.card-footer{
|
|||
|
|
position: fixed;
|
|||
|
|
width: calc(100% - 215px);
|
|||
|
|
bottom: 0px;
|
|||
|
|
|
|||
|
|
.el-card__body {
|
|||
|
|
padding: 10px;
|
|||
|
|
|
|||
|
|
.el-pagination {
|
|||
|
|
justify-content: end;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|