小优化

src/hooks/useSetImgBg.ts

@@ -6,6 +6,7 @@ import useMainStore from '@/store/main'
 import { useRoute } from 'vue-router'
 import analyze from 'rgbaster'
 import { ElMessage } from 'element-plus'
+import bus from '@/utils/bus'
 export type RGBA = number[]
 
 export type Point = [number, number]
@@ -89,13 +90,14 @@ const autoLoadImage = (url: any, errorNum: number, rs?: any, rj?: any) => {
     img.onerror = () => {
       console.log('img error')
       if (errorNum == 3) {
+        dynamicMessage?.close()
         ElMessage.error('图片渲染失败：' + url)
         rj ? rj() : reject()
       } else {
         if (errorNum == 0) {
           dynamicMessage = ElMessage.warning('正在加载图片...')
         }
-        autoLoadImage(url, ++errorNum, resolve, reject)
+        autoLoadImage(url, ++errorNum, rs ? rs : resolve, rj ? rj : reject)
       }
     }
   })
@@ -176,6 +178,9 @@ export const useSetImgBg = (option: Ref<SetImgBgOption>, frontColor?: Ref<string
             resolve(resultImg)
           })
           .catch(() => {
+            drawing.value = false
+            dataUrl.value = ''
+            imgLoading.value = false
             reject()
           })
       })
@@ -210,29 +215,28 @@ export const useSetImgBg = (option: Ref<SetImgBgOption>, frontColor?: Ref<string
           dataUrl.value = ''
           return
         }
-        initImage({ image: opt.image, frontColor, setFrontColor })
-          .then((image) => {
-            if (!image) return
-            createImageBitmap(image).then((imageBitMap) => {
-              imageWorker.postMessage(
-                {
-                  type: 'init',
-                  imageBitMap,
-                  basePoint: opt.basePoint,
-                  enableSharpen: opt.enableSharpen,
-                  distance: opt.distance,
-                  scale: opt.scale,
-                  rotate: opt.rotate,
-                },
-                [imageBitMap]
-              )
-            })
-          })
-          .catch((err: any) => {
-            drawing.value = false
-            dataUrl.value = ''
-            console.log('initImage catch err')
+        initImage({ image: opt.image, frontColor, setFrontColor }).then((image) => {
+          if (!image) return
+          createImageBitmap(image).then((imageBitMap) => {
+            imageWorker.postMessage(
+              {
+                type: 'init',
+                imageBitMap,
+                basePoint: opt.basePoint,
+                enableSharpen: opt.enableSharpen,
+                distance: opt.distance,
+                scale: opt.scale,
+                rotate: opt.rotate,
+              },
+              [imageBitMap]
+            )
           })
+        })
+        // .catch((err: any) => {
+        //   drawing.value = false
+        //   dataUrl.value = ''
+        //   console.log('initImage catch err')
+        // })
       })
     },
     { immediate: true }

src/modules/marking/mark/index.vue

@@ -34,6 +34,7 @@
       </div>
       <div
         v-else-if="!!currentTask"
+        v-loading="imgLoading"
         class="flex flex-1 direction-column radius-base full fill-blank mark-content"
         :style="{ 'background-color': backgroundColor }"
       >
@@ -286,6 +287,8 @@ const refreshTaskPool = (force = false, isRefresh = false, hasLimit = false) =>
         getMarkingTask().then((result: any) => {
           if (result?.length) {
             // currentTaskPool[isRefresh ? 'unshift' : 'push'](...result)
+            // result[1] && (result[1].url = '/file/sample_b/1/1/1/SAMPA-14.jpg')
+            // result[1] && (result[1].url = 'http://127.0.0.1:9991/break-test.jpg')
             if (hasLimit) {
               result = result.filter((item: any) => {
                 return item.taskType === 'FORCE'