feat: 可将光转红外结果预览

src/api/modules/demo/DataSeq.ts

@@ -80,3 +80,7 @@ export const batchAdDataSeqApi = (data: any) => {
 export const getAllImagesApi = (ossId: any) => {
   return http.get('/demo/DataSeq/getAllImages/' + ossId)
 }
+
+export const getImagesApi = (inputOdssId: any, subsystem: any, ifInput: any, dir: any) => {
+  return http.get(`/demo/DataSeq/getImages/${inputOdssId}/${subsystem}/${ifInput}/${dir}`)
+}

src/views/demo/components/PreviewImages.vue

@@ -62,6 +62,7 @@ watch(() => props.visible, (val) => {
 const handleOpen = () => {
   currentImageUrls.value = props.urls
   imageIdx.value = 0
+  imageFps.value = 0
 }
 
 const dialogVisible = ref(false)

src/views/demo/toInfrared/index.vue

@@ -3,7 +3,9 @@
     <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listToInfraredApi">
       <!-- 表格 header 按钮 -->
       <template #tableHeader="scope">
-        <el-button type="primary" v-auth="['demo:toInfrared:add']" icon="CirclePlus" @click="openDialog(1, '可见光转红外新增')"> 新增 </el-button>
+        <el-button type="primary" v-auth="['demo:toInfrared:add']" icon="CirclePlus" @click="openDialog(1, '可见光转红外新增')">
+          新增
+        </el-button>
         <!-- <el-button type="primary" v-auth="['demo:toInfrared:import']" icon="Upload" plain @click="batchAdd"> 导入 </el-button>
         <el-button type="primary" v-auth="['demo:toInfrared:export']" icon="Download" plain @click="downloadFile"> 导出 </el-button> -->
         <el-button
@@ -39,6 +41,10 @@
             <el-button type="primary" link icon="Delete"> 终止</el-button>
           </template>
         </el-popconfirm>
+        <el-button type="primary" link icon="View" v-auth="['demo:DataSeq:query']" v-if="scope.row.status == '2'"
+                   @click="preview(scope.row)">
+          预览
+        </el-button>
         <el-button
           type="primary"
           link
@@ -63,20 +69,21 @@
         </el-button>
       </template>
     </ProTable>
-    <FormDialog ref="formDialogRef" />
-    <ImportExcel ref="dialogRef" />
+    <FormDialog ref="formDialogRef"/>
+    <ImportExcel ref="dialogRef"/>
+    <PreviewImages :visible="dialogVisible" :urls="imageUrls" @close="dialogVisible = false"/>
   </div>
 </template>
 
 <script setup lang="tsx" name="ToInfrared">
-import { ref, reactive, onMounted } from 'vue'
-import { useHandleData } from '@/hooks/useHandleData'
-import { useDownload } from '@/hooks/useDownload'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import {ref, reactive, onMounted} from 'vue'
+import {useHandleData} from '@/hooks/useHandleData'
+import {useDownload} from '@/hooks/useDownload'
+import {ElMessage, ElMessageBox} from 'element-plus'
 import ProTable from '@/components/ProTable/index.vue'
 import ImportExcel from '@/components/ImportExcel/index.vue'
 import FormDialog from '@/components/FormDialog/index.vue'
-import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
+import {ProTableInstance, ColumnProps} from '@/components/ProTable/interface'
 import {
   listToInfraredApi,
   delToInfraredApi,
@@ -91,13 +98,23 @@ import {
   getToInfraredApi
 } from '@/api/modules/demo/toInfrared'
 
-import { listDataSeqApi } from '@/api/modules/demo/DataSeq'
+import {getImagesApi, listDataSeqApi} from '@/api/modules/demo/DataSeq'
 
-import { enumAlgorithmModelTrackApi } from '@/api/modules/demo/AlgorithmModelTrack'
-import { getAlgorithmModelTrackApi } from '@/api/modules/demo/AlgorithmModelTrack'
-import { enumAlgorithmConfigTrackApi } from '@/api/modules/demo/AlgorithmConfigTrack'
+import {enumAlgorithmModelTrackApi} from '@/api/modules/demo/AlgorithmModelTrack'
+import {getAlgorithmModelTrackApi} from '@/api/modules/demo/AlgorithmModelTrack'
+import {enumAlgorithmConfigTrackApi} from '@/api/modules/demo/AlgorithmConfigTrack'
 import statusEnums from '@/utils/status'
-import { AlgorithmType, SubSystem, SubSystem__, enumsAlgorithmType, enumsSubSystem } from '@/views/demo/utils'
+import {AlgorithmType, SubSystem, SubSystem__, enumsAlgorithmType, enumsSubSystem} from '@/views/demo/utils'
+import PreviewImages from "@/views/demo/components/PreviewImages.vue";
+
+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, "img")
+  imageUrls.value = data.data
+  dialogVisible.value = true
+}
 
 const openModelDialog = async row => {
   const algorithmModelId = row.algorithmModelId
@@ -141,7 +158,7 @@ const dowloadToInfrared = async (params: any) => {
 }
 
 const openStartDialog = async (row: any) => {
-  let res = { data: {} }
+  let res = {data: {}}
   if (row?.id) {
     res = await getToInfraredApi(row?.id || null)
   }
@@ -177,7 +194,7 @@ const batchDelete = async (ids: string[]) => {
 
 // 导出可见光转红外列表
 const downloadFile = async () => {
-  ElMessageBox.confirm('确认导出可见光转红外数据?', '温馨提示', { type: 'warning' }).then(() =>
+  ElMessageBox.confirm('确认导出可见光转红外数据?', '温馨提示', {type: 'warning'}).then(() =>
     useDownload(exportToInfraredApi, '可见光转红外列表', proTable.value?.searchParam)
   )
 }
@@ -197,7 +214,7 @@ const batchAdd = () => {
 const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
 // 打开弹框的功能
 const openDialog = async (type: number, title: string, row?: any) => {
-  let res = { data: {} }
+  let res = {data: {}}
   if (row?.id) {
     res = await getToInfraredApi(row?.id || null)
   }
@@ -217,8 +234,8 @@ const openDialog = async (type: number, title: string, row?: any) => {
 
 // 表格配置项
 const columns = reactive<ColumnProps<any>[]>([
-  { type: 'selection', fixed: 'left', width: 70 },
-  { prop: 'id', label: '主键ID', width: 180 },
+  {type: 'selection', fixed: 'left', width: 70},
+  {prop: 'id', label: '主键ID', width: 180},
   {
     prop: 'name',
     label: '任务名称',
@@ -302,7 +319,7 @@ const columns = reactive<ColumnProps<any>[]>([
     },
     width: 120
   },
-  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
+  {prop: 'operation', label: '操作', width: 230, fixed: 'right'}
 ])
 // 表单配置项
 let itemsOptions: ProForm.ItemsOptions[] = []
@@ -311,7 +328,7 @@ const setItemsOptions = () => {
     {
       label: '任务名称',
       prop: 'name',
-      rules: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
+      rules: [{required: true, message: '任务名称不能为空', trigger: 'blur'}],
       compOptions: {
         placeholder: '请输入任务名称'
       }
@@ -319,7 +336,7 @@ const setItemsOptions = () => {
     {
       label: '选择数据集',
       prop: 'inputOssId',
-      rules: [{ required: false, message: '数据集不能为空', trigger: 'blur' }],
+      rules: [{required: false, message: '数据集不能为空', trigger: 'blur'}],
       compOptions: {
         elTagName: 'select',
         placeholder: '请选择或者上传数据集',
@@ -330,7 +347,7 @@ const setItemsOptions = () => {
     {
       label: '上传数据集',
       prop: 'inputOssId',
-      rules: [{ required: false, message: '数据集不能为空', trigger: 'blur' }],
+      rules: [{required: false, message: '数据集不能为空', trigger: 'blur'}],
       compOptions: {
         elTagName: 'file-upload',
         fileSize: 4096,
@@ -341,7 +358,7 @@ const setItemsOptions = () => {
     {
       label: '选择模型',
       prop: 'algorithmModelId',
-      rules: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
+      rules: [{required: true, message: '模型不能为空', trigger: 'blur'}],
       compOptions: {
         elTagName: 'select',
         placeholder: '请选择模型',
@@ -395,7 +412,7 @@ const setItemsOptions2 = () => {
     {
       label: '任务名称',
       prop: 'name',
-      rules: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
+      rules: [{required: true, message: '任务名称不能为空', trigger: 'blur'}],
       compOptions: {
         disabled: true,
         placeholder: '请输入任务名称'
@@ -404,7 +421,7 @@ const setItemsOptions2 = () => {
     {
       label: '选择模型',
       prop: 'algorithmModel',
-      rules: [{ required: true, message: '模型不能为空', trigger: 'blur' }],
+      rules: [{required: true, message: '模型不能为空', trigger: 'blur'}],
       compOptions: {
         elTagName: 'select',
         placeholder: '请选择模型',
@@ -437,7 +454,7 @@ const setItemsOptionsModel = () => {
     {
       label: '算法ID',
       prop: 'algorithmId',
-      rules: [{ required: true, message: '算法不能为空', trigger: 'blur' }],
+      rules: [{required: true, message: '算法不能为空', trigger: 'blur'}],
       compOptions: {
         disabled: true,
         placeholder: '请输入算法'
@@ -446,7 +463,7 @@ const setItemsOptionsModel = () => {
     {
       label: '算法类型',
       prop: 'algorithmType',
-      rules: [{ required: true, message: '算法不能为空', trigger: 'blur' }],
+      rules: [{required: true, message: '算法不能为空', trigger: 'blur'}],
       compOptions: {
         disabled: true,
         elTagName: 'select',
@@ -457,7 +474,7 @@ const setItemsOptionsModel = () => {
     {
       label: '算法参数',
       prop: 'parameterConfig',
-      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
+      rules: [{required: true, message: '模型名称不能为空', trigger: 'blur'}],
       compOptions: {
         placeholder: '请输入模型名称'
       }
@@ -465,7 +482,7 @@ const setItemsOptionsModel = () => {
     {
       label: '模型ID',
       prop: 'id',
-      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
+      rules: [{required: true, message: '模型名称不能为空', trigger: 'blur'}],
       compOptions: {
         placeholder: '请输入模型名称'
       }
@@ -473,7 +490,7 @@ const setItemsOptionsModel = () => {
     {
       label: '模型名称',
       prop: 'modelName',
-      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
+      rules: [{required: true, message: '模型名称不能为空', trigger: 'blur'}],
       compOptions: {
         placeholder: '请输入模型名称'
       }
@@ -481,7 +498,7 @@ const setItemsOptionsModel = () => {
     {
       label: '模型保存路径',
       prop: 'modelAddress',
-      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
+      rules: [{required: true, message: '模型名称不能为空', trigger: 'blur'}],
       compOptions: {
         placeholder: '请输入模型名称'
       }
@@ -489,7 +506,7 @@ const setItemsOptionsModel = () => {
     {
       label: '备注',
       prop: 'remarks',
-      rules: [{ required: false, message: '备注不能为空', trigger: 'blur' }],
+      rules: [{required: false, message: '备注不能为空', trigger: 'blur'}],
       compOptions: {
         placeholder: '请输入备注'
       }