fix: fix v3 for some display issues

src/components/FormDialog/index.vue

@@ -88,7 +88,11 @@ const handleSubmit = () => {
   if (!formEl) return
   formEl.validate(valid => {
     if (valid) {
-      parameter.value.api!({ ...formModel, ...parameter.value.model, algorithmId: algorithmModelId.value }).then(res => {
+      const _params = { ...formModel, ...parameter.value.model }
+      if (!_params.algorithmId) {
+        _params.algorithmId = algorithmModelId.value
+      }
+      parameter.value.api!(_params).then(res => {
         if (res.code == 200) {
           proFormRef.value?.resetForm(formEl)
           ElMessage.success('操作成功')

src/components/Upload/Img.vue

@@ -56,7 +56,13 @@
     <!--    </el-dialog>-->
     <!--    <el-image-viewer v-else-if="imgViewVisible" :url-list="['/api' + imageUrl]" @close="imgViewVisible = false" />-->
 
-    <el-image-viewer v-if="imgViewVisible" :url-list="['/api' + imageUrl]" @close="imgViewVisible = false" />
+    <el-image-viewer
+      v-if="imgViewVisible"
+      style="position: absolute; z-index: 9999"
+      :z-index="9999"
+      :url-list="['/api' + imageUrl]"
+      @close="imgViewVisible = false"
+    />
   </div>
 </template>
 

src/views/ag/model/index.vue

@@ -53,6 +53,7 @@ import {
   getModelApi
 } from '@/api/modules/ag/model'
 import { getAlgorithmOptionApi } from '@/api/modules/task/task'
+import { listTaskConfigurationApi } from '@/api/modules/task/taskConfiguration'
 
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
@@ -216,8 +217,8 @@ const setItemsOptions = () => {
   ]
 }
 onMounted(() => {
-  getAlgorithmOptionApi().then(res => {
-    allAgloData.value = res.data
+  listTaskConfigurationApi().then(res => {
+    allAgloData.value = res.data.list
   })
 })
 </script>

src/views/demo/components/img-maker.vue

@@ -13,7 +13,7 @@
       <el-button plain type="primary" class="shape-border" @click="changeZoom(0.9)">缩小图片</el-button>
       <!-- <el-button plain type="primary" class="shape-border" @click="drawPolygon('polygon')">多边形</el-button> -->
     </div>
-    <canvas id="canvas" :width="cWidth" :height="cHeight"></canvas>
+    <canvas :id="props.canvasId" :width="cWidth" :height="cHeight"></canvas>
   </div>
 </template>
 <script lang="ts" setup>
@@ -56,6 +56,10 @@ const props = defineProps({
   isPicOnly: {
     type: Boolean,
     default: false
+  },
+  canvasId: {
+    type: String,
+    default: 'canvas'
   }
 })
 const state = reactive({
@@ -132,28 +136,31 @@ const changeZoom = multi => {
 const loadInit = () => {
   drawTypeChange('rectangle')
   state.color = props.classDef && props.classDef.color ? props.classDef.color : '#E34F51'
-  document.addEventListener('keydown', function (e) {
-    if (e.key === 'w' || e.key === 'W') {
-      selectLastObject()
-      return
-    }
-    if (state.activeTarget) {
-      if (e.key === 'r' || e.key === 'R') {
-        // 旋转矩形对象
-        state.activeTarget.rotate(state.activeTarget.angle + 5)
-        state.canvas.renderAll()
-      } else if (e.key === 'e' || e.key === 'E') {
-        // 旋转矩形对象
-        state.activeTarget.rotate(state.activeTarget.angle - 5)
-        state.canvas.renderAll()
+  if (!props.isPicOnly) {
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'w' || e.key === 'W') {
+        selectLastObject()
+        return
       }
-    }
-  })
+      if (state.activeTarget) {
+        if (e.key === 'r' || e.key === 'R') {
+          // 旋转矩形对象
+          state.activeTarget.rotate(state.activeTarget.angle + 5)
+          state.canvas.renderAll()
+        } else if (e.key === 'e' || e.key === 'E') {
+          // 旋转矩形对象
+          state.activeTarget.rotate(state.activeTarget.angle - 5)
+          state.canvas.renderAll()
+        }
+      }
+    })
+  }
+
   if (props.src == '') {
     return
   }
   state.loading = true
-  state.canvas = new fabric.Canvas('canvas', {})
+  state.canvas = new fabric.Canvas(props.canvasId, {})
   state.canvas.selectionColor = 'rgba(0,0,0,0.05)'
   state.canvas.on('mouse:down', mousedown)
   state.canvas.on('mouse:move', mousemove)
@@ -162,11 +169,11 @@ const loadInit = () => {
   let imgElement = new Image()
   imgElement.src = props.src
   imgElement.onload = () => {
-    console.log(imgElement.height, imgElement.width)
+    // console.log(imgElement.height, imgElement.width)
     // 区域大小/图片原始大小 缩放比例
     state.radio =
       props.cWidth / imgElement.width > props.cHeight / imgElement.height ? props.cHeight / imgElement.height : props.cWidth / imgElement.width
-    console.log('state.radio', state.radio)
+    // console.log('state.radio', state.radio)
 
     // 屏幕分辨率/图片原始大小
     state.realRadioX = props.width / imgElement.width
@@ -186,8 +193,8 @@ const loadInit = () => {
       scaleY: state.radio
     })
     state.canvas.add(imgInstance)
-    console.log('props', props)
-    console.log('state', state)
+    // console.log('props', props)
+    // console.log('state', state)
     if (props.jsonData && props.jsonData.length > 0) {
       for (let i = 0; i < props.jsonData.length; i++) {
         let config = props.jsonData[i]
@@ -220,8 +227,8 @@ const loadInit = () => {
     }
     state.radio = state.canvas.getZoom()
     state.loading = false
-    console.log(state.canvas.getObjects())
-    console.log(props.isPicOnly)
+    // console.log('objects', state.canvas.getObjects())
+    // console.log(props.isPicOnly)
     // console.log(state.realRadioX)
     // console.log(state.realRadioY)
   }
@@ -322,6 +329,9 @@ const drawTypeChange = e => {
 }
 // 鼠标按下时触发
 const mousedown = e => {
+  if (props.isPicOnly) {
+    return
+  }
   if (state.dragMode) {
     state.isDragging = true
     state.lastPosX = e.e.clientX - state.canvas.getElement().offsetLeft

src/views/demo/data/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="table-box">
+    <el-image-viewer v-if="imgViewVisible" :url-list="['/api' + imageUrl]" @close="imgViewVisible = false" />
     <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listDataApi" :init-param="initParam">
       <template #yuan="scope">
-        <uploadImg :is-show-data="true" :disabled="true" :image-url="scope.row.url" />
+        <el-image style=" width: 200px;height: 200px" :src="'/api' + scope.row.url" @click="loadImg(scope.row.url)"></el-image>
+        <!--        <uploadImg :is-show-data="true" :disabled="true" :image-url="scope.row.url" @click="loadImg(scope.row.url)"/>-->
         <!--        <el-image style="width: 100px" :src="'/api' + scope.row.url" @click="markImg(scope.row)" />-->
       </template>
       <!-- 表格 header 按钮 -->
@@ -85,6 +87,13 @@ onMounted(() => {
   // })
 })
 
+const imageUrl = ref('')
+const imgViewVisible = ref(false)
+const loadImg = url => {
+  imageUrl.value = url
+  imgViewVisible.value = true
+}
+
 const imgDetect = ref()
 const state = reactive({
   area: '' as string,

src/views/task/bizProcess/index.vue

@@ -18,9 +18,10 @@
         >
           批量删除
         </el-button>
-        <el-button type="primary" icon="View" @click="showCompareResult"> 对比结果 </el-button>
+        <el-button type="primary" icon="View" @click="showCompareResult"> 验证指标对比 </el-button>
         <!--        <el-button type="primary" icon="View" @click="showValResult(true)"> 验证结果 </el-button>-->
         <el-button type="primary" icon="View" @click="showValResult(false)"> 测试结果 </el-button>
+        <el-button type="primary" icon="View" @click="showValResult(true)"> 验证结果 </el-button>
       </template>
       <!-- 表格操作 -->
       <template #operation="scope">
@@ -36,9 +37,13 @@
 
         <el-button type="primary" link icon="finished" @click="showResult(scope.row)"> 执行结果 </el-button>
 
-        <el-button v-show="scope.row.name.indexOf('训练') === -1" type="primary" link icon="search" @click="showExecutedTime(scope.row)"> 执行时间 </el-button>
+        <el-button v-show="scope.row.name.indexOf('训练') === -1" type="primary" link icon="search" @click="showExecutedTime(scope.row)">
+          执行时间
+        </el-button>
 
-        <el-button v-if="scope.row.name.indexOf('训练') === -1" type="primary" link icon="Refresh" @click="reRunTask(scope.row)"> 执行训练 </el-button>
+        <el-button v-if="scope.row.name.indexOf('训练') === -1" type="primary" link icon="Refresh" @click="reRunTask(scope.row)">
+          执行训练
+        </el-button>
         <el-button v-else type="primary" link icon="Refresh" @click="startTask(scope.row)"> 开始训练 </el-button>
 
         <el-button type="primary" link icon="Refresh" @click="exportData(scope.row)"> 导出结果 </el-button>
@@ -57,14 +62,14 @@
 
     <el-dialog v-model="executedTimeVisible" title="执行时间统计" width="70%">
       <el-container v-for="(item, index) in executedTimeData" :key="index">
-        <el-container style="display: flex;flex-direction: column">
-          <h4 v-if="index === 0"> 单幅图像最短运行时间 </h4>
-          <h4 v-else-if="index === 1"> 单幅图像最短运行时间 </h4>
-          <h4 v-else-if="index === 2"> 单幅图像最短运行时间 </h4>
+        <el-container style="display: flex; flex-direction: column">
+          <h4 v-if="index === 0">单幅图像最短运行时间</h4>
+          <h4 v-else-if="index === 1">单幅图像最短运行时间</h4>
+          <h4 v-else-if="index === 2">单幅图像最短运行时间</h4>
           <div style="display: flex; flex-direction: row">
-            <h5> 前处理用时: {{ item['preprocess'] }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </h5>
-            <h5> 推理用时: {{ item['inference'] }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </h5>
-            <h5> 后处理用时: {{ item['postprocess'] }} </h5>
+            <h5>前处理用时: {{ item['preprocess'] }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h5>
+            <h5>推理用时: {{ item['inference'] }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h5>
+            <h5>后处理用时: {{ item['postprocess'] }}</h5>
           </div>
         </el-container>
       </el-container>
@@ -168,10 +173,10 @@
       </el-card>
     </el-dialog>
 
-    <el-dialog v-model="compareDialogVisible" title="执行结果对比">
+    <el-dialog v-model="compareDialogVisible" title="验证指标对比">
       <!--      style="width: 70vw"-->
       <el-container style="display: flex; flex-direction: row">
-        <el-container v-for="(item, index) in listData" :key="index" style="display: flex; flex-direction: column">
+        <el-container v-for="(item, index) in valListData" :key="index" style="display: flex; flex-direction: column">
           <!--          <el-button @click="console.log(item)">test</el-button>-->
           <span style="font-size: 18px"> {{ item.name }} </span>
           <el-card :body-style="{ padding: '0px' }" style="margin-top: 3px">
@@ -212,16 +217,25 @@
           <!--          <el-button @click="console.log(item)">test</el-button>-->
 
           <el-container v-for="(_item, _index) in item" :key="_index">
-            <span v-if="_item.name" style="width: 80px; margin-right: 20px"> {{ _item.name }} </span>
-            <el-image v-if="_item.srcUrl" :src="_item.srcUrl" style=" width: 200px;height: 200px"></el-image>
+            <span
+              v-if="_item.name"
+              :style="{
+                color: _item.color ? _item.color : '#ffffff',
+                width: '80px',
+                'margin-right': '20px'
+              }"
+            >
+              {{ _item.name }}
+            </span>
+            <el-image v-if="_item.srcUrl" :src="_item.srcUrl" style="width: 200px; height: 200px"></el-image>
             <span v-if="_item.imgUrl">标签</span>
             <ImgMaker
-              style=" width: 200px;height: 200px"
+              :canvas-id="_item.name + '_' + _index"
+              style="width: 200px; height: 200px"
               ref="imgMaker"
               v-if="_item.imgUrl"
               :is-pic-only="true"
               :src="_item.imgUrl"
-              :area="area"
               :width="200"
               :height="200"
               :c-width="200"
@@ -229,7 +243,7 @@
               :class-def="typeDefs"
               :json-data="_item.jsonData"
             ></ImgMaker>
-            <el-image v-if="_item.resUrl" :src="_item.resUrl" style=" width: 200px;height: 200px"></el-image>
+            <el-image v-if="_item.resUrl" :src="_item.resUrl" style="width: 200px; height: 200px"></el-image>
           </el-container>
         </el-container>
       </el-container>
@@ -270,24 +284,22 @@ const PATH_PREFIX = 'api/profile/task'
 let resultDialogVisible = ref(false)
 let refSelectData = ref(reactive({}))
 const reRunTask = row => {
-  http.post<any>('/identification/identificationSubtaskDetails/execute', { taskId: row.id }, { loading: false })
-    .then(res => {
-      if (res.code !== 200) {
-        ElMessage.error(res.msg)
-      } else {
-        ElMessage.success('启动成功')
-      }
-    })
+  http.post<any>('/identification/identificationSubtaskDetails/execute', { taskId: row.id }, { loading: false }).then(res => {
+    if (res.code !== 200) {
+      ElMessage.error(res.msg)
+    } else {
+      ElMessage.success('启动成功')
+    }
+  })
 }
 const startTask = row => {
-  http.post<any>('/identification/identificationSubtaskDetails/startTask', { taskId: row.id }, { loading: false })
-    .then(res => {
-      if (res.code !== 200) {
-        ElMessage.error(res.msg)
-      } else {
-        ElMessage.success('启动成功')
-      }
-    })
+  http.post<any>('/identification/identificationSubtaskDetails/startTask', { taskId: row.id }, { loading: false }).then(res => {
+    if (res.code !== 200) {
+      ElMessage.error(res.msg)
+    } else {
+      ElMessage.success('启动成功')
+    }
+  })
 }
 const typeDefs = ref(reactive([]))
 
@@ -323,7 +335,7 @@ const showExecutedTime = row => {
   try {
     executedTimeData.value = JSON.parse(row.remarks)
   } catch (e) {
-    ElMessage.error("解析JSON错误，请检查任务是否已完成")
+    ElMessage.error('解析JSON错误，请检查任务是否已完成')
     return
   }
   executedTimeVisible.value = true
@@ -352,7 +364,7 @@ const showValResult = async isVal => {
           jList[jList.length - 1] = 'txt'
           let obj = {
             name: res.data[j],
-            srcUrl: 'api/profile/task' + listData.value[i].preprocessPath + '/' + res.data[j]
+            srcUrl: 'api/profile/task' + listData.value[i].preprocessPath + (isVal ? '/images/' : '/') + res.data[j]
             // imgUrl: 'api/profile/task' + listData.value[i].preprocessPath + '/images/' + res.data[j],
             // labelUrl: 'api/profile/task' + listData.value[i].preprocessPath + '/labels/' + jList.join('.')
           }
@@ -371,27 +383,53 @@ const showValResult = async isVal => {
         subPath: 'images'
       })
       console.log(res.data)
+      if (isVal) {
+        await loadVerifyResult(listData.value[i].name, '/profile/task' + listData.value[i].preprocessPath + '/result/verify_result.txt')
+      }
+      console.log('load result', verifyResult.value)
       imgDataList.value.push([])
       for (let j = 0; j < res.data.length; j++) {
+        console.log('temp log', verifyResult.value)
         let jList = res.data[j].split('.')
         jList[jList - 1] = 'txt'
         imgDataList.value[imgDataList.value.length - 1].push({
           resUrl: 'api/profile/task' + listData.value[i].resultPath + '/' + res.data[j],
-          name: listData.value[i].name
+          name: listData.value[i].name,
+          picName: res.data[j],
+          color: verifyResult.value[res.data[j]] ? '#00ff00' : '#ff0000'
         })
       }
     }
   }
-  console.log(imgDataList)
+  console.log('datalist', imgDataList)
   valDialogVisible.value = true
 }
 
+const verifyResult = ref({})
+const loadVerifyResult = async (name, filepath) => {
+  // console.log('filepath', filepath)
+  try {
+    verifyResult.value = {}
+    let res = await http.get(filepath)
+    console.log(res)
+    // verifyResult.value[name] = {}
+    let arr = res.replace('\r', '').split('\n')
+    arr.forEach(str => {
+      let vals = str.split(' ')
+      verifyResult.value[vals[0]] = vals[1] === '1'
+    })
+    console.log('verifyResult', verifyResult.value)
+  } catch (e) {
+    verifyResult.value = {}
+  }
+}
+
 const setDetail = obj => {
   http.get<any>(obj.labelUrl).then(res => {
     obj.jsonData = []
-    console.log('result', res)
-    let arr = res.split('\r\n')
-    console.log(arr)
+    // console.log('result', res)
+    let arr = res.replace('\r', '').split('\n')
+    // console.log(arr)
     for (let i = 0; i < arr.length; i++) {
       let subArr = arr[i].split(' ')
       // console.log(subArr)
@@ -407,6 +445,7 @@ const setDetail = obj => {
       const ww = 200
       const hh = 200
       obj.jsonData.push({
+        subArr: subArr,
         pathString:
           'M ' +
           subArr[1] * ww +
@@ -437,10 +476,15 @@ const setDetail = obj => {
 }
 
 let compareDialogVisible = ref(false)
+const valListData = ref([])
 let listData = ref(reactive([]))
 const showCompareResult = () => {
   console.log(listData.value)
+  valListData.value = listData.value.filter(item => {
+    return item.name.includes('验证')
+  })
   compareDialogVisible.value = true
+  console.log('vallist', valListData.value)
 }
 const showResult = row => {
   refSelectData.value = reactive(row)