feat: 1. 封装对比图片预览组件 2. 实现可见光转图片前端预测结果展示

src/api/modules/demo/toInfrared.ts

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

src/views/demo/components/PreviewCompareImages.vue

@@ -0,0 +1,121 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="'预览 - 共' + imageUrlList.length + '张 当前第' + (imageIdx + 1) + '张'"
+    width="80%"
+    :before-close="handleClose"
+  >
+    <el-form :inline="true">
+      <el-form-item label="帧率">
+        <el-select v-model="imageFps" placeholder="选择帧率" style="width: 200px" @change="changeFps">
+          <el-option label="0" value="0"></el-option>
+          <el-option label="5" value="5"></el-option>
+          <el-option label="15" value="15"></el-option>
+          <el-option label="30" value="30"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="跳转至">
+        <el-input v-model="newImageIdx" type="number" style="width: 100px" />
+        <el-button type="primary" @click="confirmNewImageIdx" style="margin-left: 10px">确认</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="image-dialog">
+      <el-image :src="imageUrlList[imageIdx].inputUrl" style="width: 45%"></el-image>
+      <el-image :src="imageUrlList[imageIdx].outputUrl" style="width: 45%"></el-image>
+    </div>
+    <div class="image-dialog-btn" v-if="imageFps == 0">
+      <el-button type="primary" @click="pre_picture" :disabled="imageIdx <= 0">上一个</el-button>
+      <el-button type="primary" @click="next_picture" :disabled="imageIdx >= imageUrlList.length - 1">下一个</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ElMessageBox } from 'element-plus'
+import { ref } from 'vue'
+
+const handleOpen = async (api: any, params: any) => {
+  dialogVisible.value = true
+  imageIdx.value = 0
+  imageFps.value = 0
+  newImageIdx.value = ''
+
+  const res: any = await api(params)
+  if (res.code == 200) {
+    imageUrlList.value = res.data
+  } else {
+    ElMessageBox.alert(res.message)
+  }
+}
+
+const dialogVisible = ref(false)
+const imageFps = ref(0)
+const intervalChangeFps: any = ref()
+const imageIdx = ref(0)
+const imageUrlList = ref<any[]>([])
+const newImageIdx = ref()
+
+const handleClose = (done: () => void) => {
+  console.log('handleClose')
+  if (intervalChangeFps.value) {
+    clearInterval(intervalChangeFps.value)
+  }
+  done()
+}
+
+const confirmNewImageIdx = () => {
+  const val = parseInt(newImageIdx.value)
+  if (val > 0 && val <= imageUrlList.value.length) {
+    imageIdx.value = val - 1
+  } else {
+    ElMessageBox.alert('跳转索引有误，请检查！')
+  }
+}
+
+const changeFps = () => {
+  console.log('changeFps')
+  if (intervalChangeFps.value) {
+    clearInterval(intervalChangeFps.value)
+  }
+
+  if (imageFps.value == 0) {
+    return
+  }
+
+  intervalChangeFps.value = setInterval(() => {
+    next_picture()
+  }, 1000 / imageFps.value)
+}
+
+const next_picture = () => {
+  if (imageIdx.value < imageUrlList.value.length - 1) {
+    imageIdx.value += 1
+  }
+}
+
+const pre_picture = () => {
+  if (imageIdx.value > 0) {
+    imageIdx.value -= 1
+  }
+}
+
+defineExpose({
+  handleOpen: handleOpen
+})
+</script>
+
+<style scoped lang="scss">
+.image-dialog {
+  display: flex;
+  justify-content: center;
+  .el-image {
+    margin-right: 20px;
+    margin-bottom: 20px;
+  }
+}
+.image-dialog-btn {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+</style>

src/views/demo/toInfrared/index.vue

@@ -95,7 +95,7 @@
     </ProTable>
     <FormDialog ref="formDialogRef" />
     <ImportExcel ref="dialogRef" />
-    <PreviewImages :visible="dialogVisible" :urls="imageUrls" @close="dialogVisible = false" />
+    <PreviewCompareImages ref="previewImagesRef" />
     <ViewLog ref="viewLogRef" :get-log-api="getLogToInfraredApi" />
     <el-dialog v-model="showModelDialogVisible" title="模型列表" width="900">
       <el-scrollbar ref="scrollbarRef" id="scrollbarRef1" height="500px">
@@ -149,7 +149,8 @@ import {
   dowloadToInfraredApi,
   getToInfraredApi,
   getLogToInfraredApi,
-  showToInfraredModelApi
+  showToInfraredModelApi,
+  previewPredictResultToInfraredModelApi
 } from '@/api/modules/demo/toInfrared'
 
 import { getImagesApi, listDataSeqApi } from '@/api/modules/demo/DataSeq'
@@ -160,12 +161,19 @@ import { enumAlgorithmConfigTrackApi } from '@/api/modules/demo/AlgorithmConfigT
 import statusEnums from '@/utils/status'
 import { AlgorithmType, SubSystem, SubSystem__, enumsAlgorithmType, enumsSubSystem, AlgorithmType2 } from '@/views/demo/utils'
 import PreviewImages from '@/views/demo/components/PreviewImages.vue'
-import { Row } from 'element-plus/es/components/table-v2/src/components'
+import PreviewCompareImages from '@/views/demo/components/PreviewCompareImages.vue'
 
 import { addAlgorithmModelTrackApi } from '@/api/modules/demo/AlgorithmModelTrack'
 
 import ViewLog from '@/views/demo/components/ViewLog.vue'
 
+const previewImagesRef = ref()
+const dialogVisible = ref(false)
+const imageUrls = ref([])
+const preview = async row => {
+  previewImagesRef.value?.handleOpen(previewPredictResultToInfraredModelApi, row.id)
+}
+
 const enumsAlgorithmConfigTrack = ref<any>([])
 onMounted(async () => {
   const result = await enumAlgorithmConfigTrackApi()
@@ -290,14 +298,6 @@ const showToInfraredModel = async (id: any) => {
 
 const viewLogRef = ref()
 
-const dialogVisible = ref(false)
-const imageUrls = ref([])
-const preview = async row => {
-  console.log('showImages:', row.inputOssId)
-  const data: any = await getImagesApi(row.inputOssId, '_to_infrared', false, 'predict')
-  imageUrls.value = data.data
-  dialogVisible.value = true
-}
 const openModelDialog = async row => {
   const algorithmModelId = row.algorithmModelId
   const result: any = await getAlgorithmModelTrackApi(algorithmModelId)