bug fix

src/components/shared/ScoringPanel.vue

@@ -123,7 +123,9 @@ const questionList = computed(() => {
 })
 
 const allowSubmit = computed(() => {
-  return scoreValues.value?.length === questionList.value?.length
+  let filterArr = scoreValues.value.filter((score) => score != undefined)
+  // return scoreValues.value?.length === questionList.value?.length
+  return filterArr.length === questionList.value?.length
 })
 
 const getClass = (val: string, callback?: string) => {
@@ -139,7 +141,12 @@ const onSubmit = () => {
 const onEnter = (index: number) => {
   dialogModeBeforeSubmit.value = dialogMode.value
   nextTick(() => {
-    if (scoreValues.value.length >= questionList.value?.length) {
+    console.log('index:', index)
+    console.log('scoreValues.value.length:', scoreValues.value.length)
+    console.log('questionList.value?.length:', questionList.value?.length)
+    let filterArr = scoreValues.value.filter((score) => score != undefined)
+    // if (scoreValues.value.length >= questionList.value?.length) {
+    if (filterArr.length >= questionList.value?.length) {
       const nullScoreIndex = scoreValues.value?.findIndex((v) => !`${v}`)
       const validFailIndexIndex = scoreValidFail.value?.findIndex((v) => !!v)
       if (nullScoreIndex >= 0) {

src/hooks/useSetImgBg.ts

@@ -17,9 +17,58 @@ export interface SetImgBgOption {
 
 interface InitOption {
   image: string | HTMLImageElement
+  frontColor?: Ref<string>
+  setFrontColor?: any
 }
 
-export const initImage = async ({ image }: InitOption) => {
+function getRgba(canvas: any, that: any) {
+  const imgWidth = that.width
+  const imgHeight = that.height
+
+  canvas.width = imgWidth
+  canvas.height = imgHeight
+
+  const context = canvas.getContext('2d')
+
+  context.drawImage(that, 0, 0, imgWidth, imgHeight)
+  const imgdatas = context.getImageData(0, 0, imgWidth, imgHeight)
+  const imgdata = imgdatas.data
+  const newJson: any = {}
+  const length = imgdata.length
+  for (let i = 0; i < length; i++) {
+    if (i % 4 === 0) {
+      const alpha = Math.round((imgdata[i + 3] / 255) * 100) / 100
+      const rgba = imgdata[i] + ',' + imgdata[i + 1] + ',' + imgdata[i + 2] + ',' + alpha
+      if (!newJson[rgba]) {
+        newJson[rgba] = 1
+      } else {
+        newJson[rgba]++
+      }
+    }
+  }
+  let maxNum = 0
+  let maxVal = ''
+  for (const key in newJson) {
+    if (newJson[key] > maxNum) {
+      maxNum = newJson[key]
+      maxVal = key
+    }
+  }
+  console.log('rgba:', maxVal + ';次数:' + maxNum)
+  return maxVal
+}
+function getHex(...value: any) {
+  const r = value[0].toString(16)
+  const g = value[1].toString(16)
+  const b = value[2].toString(16)
+  let hex = r + g + b
+  if (r.slice(0, 1) == r.slice(1, 1) && g.slice(0, 1) == g.slice(1, 1) && b.slice(0, 1) == b.slice(1, 1)) {
+    hex = r.slice(0, 1) + g.slice(0, 1) + b.slice(0, 1)
+  }
+  return hex
+}
+
+export const initImage = async ({ image, frontColor, setFrontColor }: InitOption) => {
   if (!image) {
     return console.warn(`return for img define ${image}`)
   }
@@ -28,7 +77,16 @@ export const initImage = async ({ image }: InitOption) => {
     image = await new Promise<HTMLImageElement>((resolve, reject) => {
       const img = new Image()
       img.src = image as string
-      img.onload = () => {
+      img.onload = function () {
+        if (frontColor && setFrontColor && frontColor.value === 'transparent') {
+          const canvas = document.createElement('canvas')
+          const maxVal = getRgba(canvas, this)
+          console.log('maxVal:', maxVal)
+          const splitArr = maxVal.split(',')
+          const hex = getHex(Number(splitArr[0]), Number(splitArr[1]), Number(splitArr[2]))
+          setFrontColor('#' + hex)
+        }
+
         resolve(img)
       }
       img.onerror = reject
@@ -42,11 +100,10 @@ interface MessageData {
   blob?: Blob
 }
 
-export const useSetImgBg = (option: Ref<SetImgBgOption>) => {
+export const useSetImgBg = (option: Ref<SetImgBgOption>, frontColor?: Ref<string>, setFrontColor?: any) => {
   const imageWorker = new TintImageWorker()
   const drawing = ref<boolean>(false)
   const dataUrl = ref('')
-
   imageWorker.addEventListener('message', (e) => {
     const data = e.data as MessageData
     drawing.value = data.drawing
@@ -68,9 +125,22 @@ export const useSetImgBg = (option: Ref<SetImgBgOption>) => {
           dataUrl.value = ''
           return
         }
-        initImage({ image: opt.image }).then((image) => {
+        initImage({ image: opt.image, frontColor, setFrontColor }).then((image) => {
+          console.log('opt.image:', opt.image)
+
           if (!image) return
           createImageBitmap(image).then((imageBitMap) => {
+            console.log('imageBitMap:', imageBitMap)
+            console.log('22222', {
+              type: 'init',
+              imageBitMap,
+              basePoint: opt.basePoint,
+              enableSharpen: opt.enableSharpen,
+              distance: opt.distance,
+              scale: opt.scale,
+              rotate: opt.rotate,
+            })
+
             imageWorker.postMessage(
               {
                 type: 'init',

src/modules/analysis/view-marked-detail/index.vue

@@ -18,12 +18,7 @@
         </span>
         <right-button class="next-button" @click="checkNext" />
         <div class="flex-1 p-base scroll-auto mark-content-paper">
-          <img
-            :src="frontColor === 'transparent' ? current?.filePath : dataUrl"
-            alt=""
-            class="paper-img"
-            :style="{ 'background-color': frontColor }"
-          />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
       </div>
       <div class="flex direction-column p-base radius-base fill-blank m-l-base table-view">
@@ -208,7 +203,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 
 onRefresh()
 </script>

src/modules/example/ImageModify.vue

@@ -80,7 +80,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">

src/modules/expert/assess/index.vue

@@ -236,7 +236,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">

src/modules/expert/expert/index.vue

@@ -299,7 +299,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">

src/modules/expert/sample/index.vue

@@ -18,12 +18,7 @@
         </span>
         <right-button class="next-button" @click="checkNext" />
         <div class="flex-1 p-base scroll-auto mark-content-paper">
-          <img
-            :src="frontColor === 'transparent' ? currentRfPaper?.filePath : dataUrl"
-            alt=""
-            class="paper-img"
-            :style="{ 'background-color': frontColor }"
-          />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
       </div>
       <div class="flex direction-column p-base radius-base fill-blank m-l-base table-view">
@@ -224,7 +219,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">

src/modules/expert/standard/index.vue

@@ -68,7 +68,7 @@ type RowType = ExtractMultipleApiResponse<'getStandardList'> & { index: number }
 /** 图片预览 */
 const previewModalVisible = ref<boolean>(false)
 
-const { onBack } = useMarkHeader()
+const { onBack, frontColor, setFrontColor } = useMarkHeader()
 
 /** 预览试卷 */
 const onPreview = () => {
@@ -195,7 +195,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">

src/modules/expert/training/index.vue

@@ -16,12 +16,7 @@
         </span>
         <right-button class="next-button" @click="checkNext" />
         <div class="flex-1 p-base scroll-auto mark-content-paper">
-          <img
-            :src="frontColor === 'transparent' ? current?.filePath : dataUrl"
-            alt=""
-            class="paper-img"
-            :style="{ 'background-color': frontColor }"
-          />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
       </div>
       <div class="flex direction-column p-base radius-base fill-blank m-l-base table-view">
@@ -192,7 +187,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">

src/modules/marking/arbitration/index.vue

@@ -16,12 +16,7 @@
         </span>
         <right-button class="next-button" @click="checkNext" />
         <div class="flex-1 p-base scroll-auto mark-content-paper">
-          <img
-            :src="frontColor === 'transparent' ? currentArbitration?.filePath : dataUrl"
-            alt=""
-            class="paper-img"
-            :style="{ 'background-color': frontColor }"
-          />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
         <scoring-panel-with-confirm
           :id="currentArbitration?.taskId"
@@ -243,7 +238,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">

src/modules/marking/inquiry-result/index.vue

@@ -18,12 +18,7 @@
         </span>
         <right-button class="next-button" @click="checkNext" />
         <div class="flex-1 p-base scroll-auto mark-content-paper">
-          <img
-            :src="frontColor === 'transparent' ? current?.filePath : dataUrl"
-            alt=""
-            class="paper-img"
-            :style="{ 'background-color': frontColor }"
-          />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
       </div>
       <div class="flex direction-column p-base radius-base fill-blank m-l-base table-view">
@@ -318,7 +313,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 
 onRefresh()
 </script>
@@ -345,8 +340,15 @@ onRefresh()
       }
     }
   }
+  // @media (max-width: 10000px) {
+  //   .table-view {
+  //     .detail-info-label {
+  //       width: 200px !important;
+  //     }
+  //   }
+  // }
   .table-view {
-    width: 580px;
+    width: 620px;
     .detail-info-label {
       .detail-info-label-num {
         min-width: 32px;

src/modules/marking/mark/index.vue

@@ -23,12 +23,7 @@
           <svg-icon name="preview"></svg-icon>
         </span>
         <div :class="{ 'text-center': center }">
-          <img
-            :src="frontColor === 'transparent' ? currentTask?.url : dataUrl"
-            alt=""
-            class="paper-img"
-            :style="{ 'background-color': frontColor }"
-          />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
       </div>
     </div>
@@ -186,8 +181,8 @@ const refreshTaskPool = (force = false, isRefresh = false) => {
   refreshTimer = window.setTimeout(
     () => {
       // alert(currentTaskPool.length)
-      // if (currentTaskPool.length < (isRefresh ? Number.MAX_SAFE_INTEGER : CACHE_NUM)) {
-      if (currentTaskPool.length < Number.MAX_SAFE_INTEGER) {
+      if (currentTaskPool.length < (isRefresh ? Number.MAX_SAFE_INTEGER : CACHE_NUM)) {
+        // if (currentTaskPool.length < Number.MAX_SAFE_INTEGER) {
         getMarkingTask().then((result) => {
           if (result?.length) {
             currentTaskPool[isRefresh ? 'unshift' : 'push'](...result)
@@ -376,7 +371,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 
 watch(currentTask, () => {
   getMarkStatus()

src/modules/marking/problem/index.vue

@@ -18,12 +18,7 @@
         </span>
         <right-button class="next-button" @click="checkNext" />
         <div class="flex-1 p-base scroll-auto mark-content-paper">
-          <img
-            :src="frontColor === 'transparent' ? currentProblem?.filePath : dataUrl"
-            alt=""
-            class="paper-img"
-            :style="{ 'background-color': frontColor }"
-          />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
         <scoring-panel-with-confirm
           :id="currentProblem?.taskId"
@@ -270,7 +265,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">

src/modules/marking/repeat/index.vue

@@ -26,12 +26,7 @@
         </span>
         <right-button class="next-button" @click="checkNext" />
         <div class="flex-1 p-base scroll-auto mark-content-paper">
-          <img
-            :src="frontColor === 'transparent' ? currentReMarkPaper?.filePath : dataUrl"
-            alt=""
-            class="paper-img"
-            :style="{ 'background-color': frontColor }"
-          />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
         <scoring-panel-with-confirm
           :id="currentReMarkPaper?.taskId"
@@ -256,7 +251,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">

src/modules/marking/similar/index.vue

@@ -68,7 +68,7 @@ import type { MarkHeaderInstance, EpFormItem, EpTableColumn } from 'global-type'
 
 type RowType = ExtractMultipleApiResponse<'getSimilarPaperList'> & { index: number }
 
-const { onBack } = useMarkHeader()
+const { onBack, frontColor, setFrontColor } = useMarkHeader()
 
 type OperationClick = MarkHeaderInstance['onClick']
 
@@ -184,7 +184,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">

src/modules/marking/training-record/index.vue

@@ -13,12 +13,7 @@
       >
         <right-button class="next-button" @click="checkNext" />
         <div class="flex-1 p-base scroll-auto mark-content-paper">
-          <img
-            :src="frontColor === 'transparent' ? current?.url : dataUrl"
-            alt=""
-            class="paper-img"
-            :style="{ 'background-color': frontColor }"
-          />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
       </div>
       <div class="p-base radius-base fill-blank scroll-auto m-l-base table-view">
@@ -138,7 +133,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">

src/modules/marking/view-sample/index.vue

@@ -13,12 +13,7 @@
       >
         <right-button class="next-button" @click="checkNext" />
         <div class="flex-1 p-base scroll-auto mark-content-paper">
-          <img
-            :src="frontColor === 'transparent' ? current?.url : dataUrl"
-            alt=""
-            class="paper-img"
-            :style="{ 'background-color': frontColor }"
-          />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
       </div>
       <div class="p-base radius-base fill-blank scroll-auto m-l-base table-view">
@@ -115,7 +110,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">

src/modules/monitor/system-check/index.vue

@@ -21,12 +21,7 @@
         </span>
         <right-button class="next-button" @click="checkNext" />
         <div class="flex-1 p-base scroll-auto mark-content-paper">
-          <img
-            :src="frontColor === 'transparent' ? currentSystemCheckPaper?.filePath : dataUrl"
-            alt=""
-            class="paper-img"
-            :style="{ 'background-color': frontColor }"
-          />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
       </div>
       <div class="flex direction-column p-base radius-base fill-blank m-l-base table-view">
@@ -283,7 +278,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">

src/modules/monitor/training-monitoring-detail/index.vue

@@ -17,12 +17,7 @@
         </span>
         <right-button class="next-button" @click="checkNext" />
         <div class="flex-1 p-base scroll-auto mark-content-paper">
-          <img
-            :src="frontColor === 'transparent' ? current?.filePath : dataUrl"
-            alt=""
-            class="paper-img"
-            :style="{ 'background-color': frontColor }"
-          />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
       </div>
       <div class="flex direction-column p-base radius-base fill-blank m-l-base table-view">
@@ -166,7 +161,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 
 fetchData()
 </script>

src/modules/quality/self-check-detail/index.vue

@@ -19,12 +19,7 @@
         </span>
         <right-button class="next-button" @click="checkNext" />
         <div class="flex-1 p-base scroll-auto mark-content-paper">
-          <img
-            :src="frontColor === 'transparent' ? current?.filePath : dataUrl"
-            alt=""
-            class="paper-img"
-            :style="{ 'background-color': frontColor }"
-          />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
       </div>
       <div class="flex direction-column p-base radius-base fill-blank m-l-base table-view">
@@ -208,7 +203,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">

src/modules/quality/subjective-check/index.vue

@@ -19,12 +19,7 @@
         </span>
         <right-button class="next-button" @click="checkNext" />
         <div class="flex-1 p-base scroll-auto mark-content-paper">
-          <img
-            :src="frontColor === 'transparent' ? currentSubjectiveCheck?.filePath : dataUrl"
-            alt=""
-            class="paper-img"
-            :style="{ 'background-color': frontColor }"
-          />
+          <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
       </div>
       <div class="p-base radius-base fill-blank scroll-auto m-l-base table-view">
@@ -299,7 +294,7 @@ const imgOption = computed<SetImgBgOption>(() => {
   }
 })
 
-const { drawing, dataUrl } = useSetImgBg(imgOption)
+const { drawing, dataUrl } = useSetImgBg(imgOption, frontColor, setFrontColor)
 </script>
 
 <style scoped lang="scss">