From a6536b1d93ee7be9e4ae59542bdcfbe6ad504b04 Mon Sep 17 00:00:00 2001
From: lijun <lj7788@126.com>
Date: Mon, 16 Sep 2024 00:25:35 +0800
Subject: [PATCH] update code

---
 package.json                                  |   2 +-
 src/views/connection/editFlow.vue             |   5 +-
 src/views/simulationEvaluation/reportDesc.vue | 266 +++++++++++++-----
 yarn.lock                                     |  39 ++-
 4 files changed, 230 insertions(+), 82 deletions(-)

diff --git a/package.json b/package.json
index f5991df..982a568 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "color": "^4.2.3",
     "echarts": "^5.5.0",
     "element-plus": "^2.7.2",
+    "html2canvas": "^1.4.1",
     "js-md5": "^0.8.3",
     "json-editor-vue3": "^1.1.1",
     "lodash-es": "^4.17.21",
@@ -63,7 +64,6 @@
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.2",
     "pinia": "^2.1.7",
-    "print-js": "^1.6.0",
     "sockjs-client": "1.6.1",
     "sortablejs": "^1.15.2",
     "stompjs": "^2.3.3",
diff --git a/src/views/connection/editFlow.vue b/src/views/connection/editFlow.vue
index ccdf281..d7dafb4 100644
--- a/src/views/connection/editFlow.vue
+++ b/src/views/connection/editFlow.vue
@@ -184,13 +184,12 @@ defineExpose({
   .flow-card {
     height: 80%;
     width: calc(100% - 450px);
-
+    margin: 0px 12px;
     .el-card__body {
       height: 100%;
       padding: 4px;
     }
-
-    margin: 0px 12px;
+    
   }
 
   .node-panel {
diff --git a/src/views/simulationEvaluation/reportDesc.vue b/src/views/simulationEvaluation/reportDesc.vue
index 9bc9925..bf58d20 100644
--- a/src/views/simulationEvaluation/reportDesc.vue
+++ b/src/views/simulationEvaluation/reportDesc.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="app-container simulation-report-desc"  >
+    <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">
@@ -33,48 +33,82 @@
             <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>
+                    <template v-if="info.reportType == 'other'">
+                        <div v-if="info.thresholds" class="info-thresholds">
+                            <span>置信度阈值：</span>
+                            <span>{{ info.thresholds.score_threshold }}</span>
+                            <span style="margin-left:10px;">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.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>
+                        <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>
+                        <div class="print-page"></div>
+                        <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>
+                    </template>
+                    <template v-else>
+                        <el-table :data="it.targets" stripe style="margin-top:10px;">
+                            <el-table-column label="目标序号" align="left" prop="index" />
+                            <el-table-column label="IDSW" align="left" prop="idsw" />
+                            <el-table-column label="TM(跟踪次数)" align="left" prop="mt" />
+                            <el-table-column label="ML(丢失次数)" align="left" prop="ml" />
+                            <el-table-column label="FM(打断次数)" align="left" prop="fm" />
+                            <el-table-column label="IDF1" align="left" prop="idf1" />
+                        </el-table>
+                        <div class="info-thresholds" style="margin-top: 10px;line-height: 24px;">
+                            <div> <span>MOTA（跟踪准确度）</span>
+                                <span>{{ it.mota }}</span>
+                            </div>
+                            <div> <span>平均推理时间:</span>
+                                <span>{{ it.inference_time }}ms</span>
+                            </div>
+                            <div><span>系统延迟时间:</span>
+                                <span>{{ it.system_delay }}ms</span>
+                            </div>
+                        </div>
+                    </template>
                 </div>
             </div>
+
+            <template v-if="info.robustness && info.robustness.length > 0">
+                <div class="sub-title">鲁棒性评估报告</div>
+                <el-table :data="info.robustness" stripe style="margin-top:10px;">
+                    <el-table-column label="数据集1名称" align="left" prop="data1" />
+                    <el-table-column label="数据集1的mAP" align="left" prop="data1_map" />
+                    <el-table-column label="数据集2名称" align="left" prop="data2" />
+                    <el-table-column label="数据集2的mAP" align="left" prop="data2_map" />
+                    <el-table-column label="mAP下降率" align="left" prop="map_decrease" />
+                </el-table>
+            </template>
         </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="doExport">导出</el-button>
             <el-button type="primary" @click="doDelete">删除</el-button>
             <el-button @click="goBack">返回</el-button>
         </el-card>
@@ -84,7 +118,8 @@
 <script setup>
 import ReportApi from '@/api/report'
 import charts from './components/charts.vue'
-import printJS from 'print-js'
+import html2canvas from 'html2canvas';
+import { useDateFormat } from "@vueuse/core";
 const route = useRoute()
 const router = useRouter();
 const info = reactive({
@@ -92,44 +127,58 @@ const info = reactive({
     taskList: [],
     thresholds: null,
     extra_evaluation_type: '',
-    tasks: []
+    tasks: [],
+    reportType: '',
+    robustness: []
 })
-function goBack(){
-    router.push({ path: "/simulationEvaluation/reportList"});
+const  doExport=async () => {
+    try{
+        let dom=document.querySelector("#print_simulation_report_desc");
+        const canvas = await html2canvas(dom);
+        const img = canvas.toDataURL('image/png');
+        const link = document.createElement('a');
+        link.href = img;
+        link.setAttribute('download', info.report.report_name+ useDateFormat(new Date(),"YYYYMMDDHHmmss").value+'.png');
+        link.click();
+    }catch(e){
+        ElMessage.error("导出图片失败!");
+        console.error("导出图片失败!",e);
+    }
 }
-function doPrint(){
-    printJS({
-        printable:'print_simulation_report_desc',
-        type: 'html',
-        header:info.report.report_name,
-        ignoreElements: ['no-print']
-    });
+function goBack() {
+    router.push({ path: "/simulationEvaluation/reportList" });
+}
+function doPrint() {
+    document.querySelector("html").classList.add("report-print");
+    window.print();
+    document.querySelector("html").classList.remove("report-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("删除失败!");
-      }
-    });    
+    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 },
+        legend: {
+            left: '10%', right: '10%',
+            data: chartInfo.names
+        },
         grid: { top: '25%', },
         xAxis: [{
             type: 'category',   // 还有其他的type，可以去官网喵两眼哦
@@ -147,10 +196,10 @@ function renderChart1(data, type) {
                 name: it.name,
                 type: it.type,
                 data: it.data,
-       label:{
-        show:true,
-        position:'top'
-      }
+                label: {
+                    show: true,
+                    position: 'top'
+                }
             }
         })
     }
@@ -162,6 +211,9 @@ function initTaskChart(it) {
     let names = [];
     let classes = it.classes || [];
     classes.forEach(d => {
+        if (rocs.length > 20) {
+            return;
+        }
         rocs.push({
             name: d.class_name, data: d.roc, type: 'line'
         });
@@ -181,16 +233,22 @@ function loadData() {
         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)
+        info.tasks = (info.report.report_data?.tasks || info.report.report_data?.report_data?.tasks || []).map(it => {
+
             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);
+            if (it.targets && it.targets.length > 0) {
+                info.reportType = "tracking";
+            } else {
+                info.reportType = "other"
+            }
             return it;
         });
-
+        let obj = info.report?.report_data?.robustness || null
+        info.robustness = obj ? [obj] : []
     });
 }
 onMounted(loadData);
@@ -225,7 +283,12 @@ onMounted(loadData);
             font-weight: bold;
         }
     }
-    .card-footer{
+
+    .print-page {
+        page-break-after: always;
+    }
+
+    .card-footer {
         position: fixed;
         width: calc(100% - 215px);
         bottom: 0px;
@@ -236,7 +299,64 @@ onMounted(loadData);
             .el-pagination {
                 justify-content: end;
             }
-        }  
+        }
     }
 }
+
+html.report-print {
+    height: auto;
+
+    body {
+        #app {
+            height: auto;
+            min-height: unset;
+
+            .main-container {
+                min-height: unset;
+
+                .center-container {
+                    display: block;
+
+                    .el-main {
+                        .app-main {
+                            min-height: unset;
+
+                            .el-scrollbar {
+                                height: unset;
+
+                                .el-scrollbar__wrap {
+                                    height: unset !important;
+
+                                    .simulation-report-desc {
+                                        .el-table {
+                                            table {
+                                                width: 100% !important;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .el-header {
+            display: none;
+        }
+
+        .el-aside {
+            display: none;
+        }
+
+        .card-footer {
+            display: none;
+        }
+    }
+}
+
+@page {
+    margin: 20px;
+}
 </style>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index eedd036..ddb08c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2700,6 +2700,11 @@ balanced-match@^2.0.0:
   resolved "https://registry.npmmirror.com/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9"
   integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
 
+base64-arraybuffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -3346,6 +3351,13 @@ css-functions-list@^3.2.2:
   resolved "https://registry.npmmirror.com/css-functions-list/-/css-functions-list-3.2.2.tgz#9a54c6dd8416ed25c1079cd88234e927526c1922"
   integrity sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==
 
+css-line-break@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
+  integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
+  dependencies:
+    utrie "^1.0.2"
+
 css-select@^4.1.3:
   version "4.3.0"
   resolved "https://registry.npmmirror.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
@@ -5073,6 +5085,14 @@ html-void-elements@^2.0.0:
   resolved "https://registry.npmmirror.com/html-void-elements/-/html-void-elements-2.0.1.tgz#29459b8b05c200b6c5ee98743c41b979d577549f"
   integrity sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==
 
+html2canvas@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
+  integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+  dependencies:
+    css-line-break "^2.1.0"
+    text-segmentation "^1.0.3"
+
 htmlparser2@^3.8.3:
   version "3.10.1"
   resolved "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
@@ -7422,11 +7442,6 @@ pretty-format@^27.5.1:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-print-js@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.npmmirror.com/print-js/-/print-js-1.6.0.tgz#692b046cf31992b46afa6c6d8a9db1c69d431d1f"
-  integrity sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==
-
 prismjs@^1.23.0:
   version "1.29.0"
   resolved "https://registry.npmmirror.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
@@ -8567,6 +8582,13 @@ text-extensions@^2.0.0:
   resolved "https://registry.npmmirror.com/text-extensions/-/text-extensions-2.4.0.tgz#a1cfcc50cf34da41bfd047cc744f804d1680ea34"
   integrity sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==
 
+text-segmentation@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
+  integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
+  dependencies:
+    utrie "^1.0.2"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -9052,6 +9074,13 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   resolved "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+utrie@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
+  integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
+  dependencies:
+    base64-arraybuffer "^1.0.2"
+
 v8-to-istanbul@^8.1.0:
   version "8.1.1"
   resolved "https://registry.npmmirror.com/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz#77b752fd3975e31bbcef938f85e9bd1c7a8d60ed"