feat: 封装result.json展示组件，并实现可见光转红外结果展示

src/api/modules/demo/toInfrared.ts

@@ -102,3 +102,7 @@ export const showToInfraredModelApi = (id: string | number) => {
 export const previewPredictResultToInfraredModelApi = (id: string | number) => {
   return http.get('/demo/toInfrared/previewPredictResult/' + id, {}, { loading: false })
 }
+
+export const getStatisticsResultToInfraredApi = (id: string | number) => {
+  return http.get('/demo/toInfrared/statistics_result/' + id, {}, { loading: false })
+}

src/views/demo/components/ShowStatisticResult.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-dialog v-model="showResultDialogVisible" title="统计结果" width="700">
+    <el-card style="width: 100%; margin-bottom: 10px">
+      <div class="evaluate-data">
+        <template v-for="(item, index) in ResultData" :key="index">
+          <span>{{ item.name }}: {{ item.value }}</span
+          ><br />
+        </template>
+      </div>
+    </el-card>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const props = defineProps({
+  api: {
+    type: Function,
+    required: true
+  }
+})
+
+const showResultDialogVisible = ref(false)
+const ResultData = ref([])
+const get_statistics_result = async (id: number | string) => {
+  const res: any = await props.api(id)
+  ResultData.value = res.data
+  showResultDialogVisible.value = true
+}
+
+defineExpose({
+  get_statistics_result: get_statistics_result
+})
+</script>
+
+<style lang="scss" scoped>
+.evaluate-data {
+  span {
+    margin-bottom: 20px;
+    font-size: 20px;
+    line-height: 2;
+  }
+}
+</style>

src/views/demo/toInfrared/index.vue

@@ -54,6 +54,16 @@
         >
           预览
         </el-button>
+        <el-button
+          type="primary"
+          link
+          icon="View"
+          v-auth="['demo:DataSeq:query']"
+          v-if="scope.row.status == '2' && scope.row.type == AlgorithmType2['预测/推理']"
+          @click="showStatisticResultRef.get_statistics_result(scope.row.id)"
+        >
+          结果
+        </el-button>
         <el-button
           type="primary"
           link
@@ -102,6 +112,7 @@
     <ImportExcel ref="dialogRef" />
     <PreviewCompareImages ref="previewImagesRef" />
     <ViewLog ref="viewLogRef" :get-log-api="getLogToInfraredApi" />
+    <ShowStatisticResult ref="showStatisticResultRef" :api="getStatisticsResultToInfraredApi" />
     <el-dialog v-model="showModelDialogVisible" title="模型列表" width="900">
       <el-scrollbar ref="scrollbarRef" id="scrollbarRef1" height="500px">
         <template v-for="model in model_list" :key="model">
@@ -121,7 +132,7 @@
                   >下载
                 </el-link>
                 <el-button type="success" link @click="addToInfraredModel(model.path)"
-                  ><el-icon><Plus /></el-icon>添加模型</el-button
+                  ><el-icon> <Plus /> </el-icon>添加模型</el-button
                 >
               </el-form-item>
             </el-form>
@@ -155,7 +166,8 @@ import {
   getToInfraredApi,
   getLogToInfraredApi,
   showToInfraredModelApi,
-  previewPredictResultToInfraredModelApi
+  previewPredictResultToInfraredModelApi,
+  getStatisticsResultToInfraredApi
 } from '@/api/modules/demo/toInfrared'
 
 import { getImagesApi, listDataSeqApi } from '@/api/modules/demo/DataSeq'
@@ -169,10 +181,13 @@ import PreviewImages from '@/views/demo/components/PreviewImages.vue'
 import PreviewCompareImages from '@/views/demo/components/PreviewCompareImages.vue'
 import { addAlgorithmModelTrackApi } from '@/api/modules/demo/AlgorithmModelTrack'
 import ViewLog from '@/views/demo/components/ViewLog.vue'
-
 import useWebSocketStore from '@/stores/modules/websocket'
 import { resetHeart } from '@/utils/websocket'
 
+import ShowStatisticResult from '@/views/demo/components/ShowStatisticResult.vue'
+
+const showStatisticResultRef = ref()
+
 onMounted(() => {
   const websocketStore = useWebSocketStore()
   websocketStore.websocket.onmessage = (e: any) => {