feat: 修改图片相关bug

.vscode/settings.json

@@ -39,5 +39,10 @@
     "jsonc",
     "yaml"
   ],
-  "vue3snippets.enable-compile-vue-file-on-did-save-code": true
+  "vue3snippets.enable-compile-vue-file-on-did-save-code": true,
+  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+  "[vue]": {
+    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+  },
+  "editor.formatOnSaveMode": "modifications"
 }

components.d.ts

@@ -23,7 +23,6 @@ declare module 'vue' {
     NDropdown: typeof import('naive-ui')['NDropdown']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
-    NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NGridItem: typeof import('naive-ui')['NGridItem']
     NImage: typeof import('naive-ui')['NImage']
@@ -34,6 +33,7 @@ declare module 'vue' {
     NotPassed: typeof import('./src/components/NotPassed.vue')['default']
     NPopover: typeof import('naive-ui')['NPopover']
     NPopselect: typeof import('naive-ui')['NPopselect']
+    NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSlider: typeof import('naive-ui')['NSlider']

src/layout/components/Header/RecycleModal.vue

@@ -13,12 +13,14 @@ import { viewOptions } from '@/config/home'
 import NotPassed from '@/components/Approval/NotPassed.vue'
 import { formatToDateHMS } from '@/utils/dateUtil'
 import { off, on } from '@/utils/domUtils'
+import bgLoading from '@/assets/images/bg-loading.png'
 
 const cardStyle = {
   '--n-padding-bottom': '40px',
   '--n-padding-left': '120px',
 }
 
+const bgLoadingImg = ref(bgLoading)
 let startTime = 0
 let endTime = 0
 let startCalTime = false
@@ -732,6 +734,7 @@ watch(() => pagination.pageNo, (newVal, oldVal) => {
                     ref="imageRef"
                     :src="item.imgUrl"
                     :preview-src="item.imgUrl"
+                    :fallback-src="bgLoadingImg"
                     class="img "
                     :class="{
                       'img-fit': viewMode === 'horizontalVersion',

src/views/task/modal/BatchModal.vue

@@ -254,18 +254,15 @@ function afterLeave() {
 
 onMounted(() => {
   show.value && addListeners()
-   window.addEventListener("keydown", handleKeydown);
+  window.addEventListener('keydown', handleKeydown)
 })
 
-
 // 键盘左右箭头快捷切换
 function handleKeydown(event) {
- 
   // 在这里执行右箭头的逻辑
-   if (event.keyCode === 67) {
+  if (event.keyCode === 67)
-show.value=false
+    show.value = false
-   // batchModalRef.value.closeModal()
+  // batchModalRef.value.closeModal()
-    }
 }
 function showModal(value) {
   taskId.value = value
@@ -408,7 +405,8 @@ const gridHeight = computed(() => {
 
 defineExpose({
   showModal,
-  reload,closeModal
+  reload,
+  closeModal,
 })
 </script>
 
@@ -544,40 +542,39 @@ defineExpose({
                     :style="{ height: gridHeight }"
                     class="grid-item"
                   >
-                      <n-image
+                    <n-image
-                        ref="imageRef"
+                      class="img"
-                        class="img"
 
-                        :class="{
+                      :class="{
-                          'img-fit': viewMode === 'horizontalVersion',
+                        'img-fit': viewMode === 'horizontalVersion',
-                          'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+                        'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
-                        }"
+                      }"
 
-                        :src="item.serverThumbnailUrl"
+                      :src="item.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl"
-                      />
+                    />
-                      <div class="small-mark" />
+                    <div class="small-mark" />
-                      <div class="time">
+                    <div class="time">
-                        <div v-if="item.photoDateTimestamp" class="time-item">
+                      <div v-if="item.photoDateTimestamp" class="time-item">
-                          <SvgIcon class="svg-time" color="#FFF" size="14" name="camera-time" />
+                        <SvgIcon class="svg-time" color="#FFF" size="14" name="camera-time" />
-                          <span>{{ formatToDateHMS(Number(item.photoDateTimestamp) || 0) }}</span>
+                        <span>{{ formatToDateHMS(Number(item.photoDateTimestamp) || 0) }}</span>
-                        </div>
-                        <div v-if="item.submitDateTimestamp" class="time-item time-item2">
-                          <SvgIcon class="svg-time" color="#FFF" size="14" name="submit-time" />
-                          <span>{{ formatToDateHMS(Number(item.submitDateTimestamp) || 0) }}</span>
-                        </div>
                       </div>
-                      <img v-if="item.historyStates === 2" class="tag-status" src="@/assets/images/task/tag-pass.png" alt="">
+                      <div v-if="item.submitDateTimestamp" class="time-item time-item2">
-                      <img v-if="item.historyStates === 3" class="tag-status" src="@/assets/images/task/tag-not-pass.png" alt="">
+                        <SvgIcon class="svg-time" color="#FFF" size="14" name="submit-time" />
-                      <div class="check">
+                        <span>{{ formatToDateHMS(Number(item.submitDateTimestamp) || 0) }}</span>
-                        <n-checkbox
-                          v-show="batch && item.historyStates === 1"
-                          v-model:checked="item.checked" @click.prevent
-                          @update:checked="onCheckChange($event, item)"
-                        />
                       </div>
-                      <div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent">
+                    </div>
-                        {{ item.similarityScore }}<span class="percent-unit">%</span>
+                    <img v-if="item.historyStates === 2" class="tag-status" src="@/assets/images/task/tag-pass.png" alt="">
-                      </div>               
+                    <img v-if="item.historyStates === 3" class="tag-status" src="@/assets/images/task/tag-not-pass.png" alt="">
+                    <div class="check">
+                      <n-checkbox
+                        v-show="batch && item.historyStates === 1"
+                        v-model:checked="item.checked" @click.prevent
+                        @update:checked="onCheckChange($event, item)"
+                      />
+                    </div>
+                    <div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent">
+                      {{ item.similarityScore }}<span class="percent-unit">%</span>
+                    </div>
                   </div>
                 </div>
                 <!-- </n-scrollbar> -->

src/views/worksheet/components/pictureCard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import bgLoading from '@/assets/images/bg-loading.png'
 
 const props = defineProps({
   imgurl: String,
@@ -12,6 +13,7 @@ const props = defineProps({
 const imageRef = ref<ComponentElRef | null>()
 const overTask = ref<any>(null)
 const overTasktwo = ref<any>(null)
+const bgLoadingImg = ref(bgLoading)
 
 function overTaskHandle() {
   const item = props.taskDetailInfo
@@ -65,17 +67,20 @@ function previewHandler(event: MouseEvent) {
       isFullScreen
         ? imgbigshow
           ? {
-            'position': 'relative',
+            position: 'relative',
-            'flex': 2,
+            flex: 2,
-            'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+            // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+            background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
           }
           : {
-            'height': '92vh',
+            height: '92vh',
-            'flex': 2,
+            flex: 2,
-            'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+            // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+            background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
           }
         : {
-          'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+          // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+          background: `url(${taskDetailInfo?.ocrPicture?.imgurl}), url(${bgLoadingImg})`,
         }
     "
     @mouseover="overTaskHandle"
@@ -103,11 +108,16 @@ function previewHandler(event: MouseEvent) {
       />
     </div>
     <div class="check">
-      <n-checkbox
+      <!-- <n-checkbox
         v-show="batch && taskDetailInfo?.userapprove?.statshis === 1"
-        v-model:checked="taskDetailInfo?.checked"
+        :checked="taskDetailInfo?.checked"
         @click.stop
         @update:checked="onCheckChange($event, taskDetailInfo)"
+      /> -->
+      <n-checkbox
+        v-show="batch && taskDetailInfo?.userapprove?.statshis === 1"
+        :checked="taskDetailInfo?.checked"
+        @click.stop
       />
     </div>
 

src/views/worksheet/content/Content.vue

@@ -1,16 +1,4 @@
 <script lang="ts" setup>
-import { audit, dubiousfileyd } from '@/api/task/task'
-import {
-  getPictureSimilarityList,
-  getTaskDetailInfo,
-} from '@/api/work/work'
-import NotPassed from '@/components/Approval/NotPassed.vue'
-import { TASK_STATUS_OBJ } from '@/enums/index'
-import { useWorkOrder } from '@/store/modules/workOrder'
-import { isEmpty } from '@/utils'
-import { formatToDateHMS } from '@/utils/dateUtil'
-import { hideDownload } from '@/utils/image'
-import emitter from '@/utils/mitt'
 import { useInfiniteScroll } from '@vueuse/core'
 import { format } from 'date-fns'
 import imagesloaded from 'imagesloaded'
@@ -28,7 +16,20 @@ import {
 } from 'vue'
 import PictureInfo from '../components/PictureInfo.vue'
 import ConfrimModal from '../modal/ConfrimModal.vue'
+import { audit, dubiousfileyd } from '@/api/task/task'
+import {
+  getPictureSimilarityList,
+  getTaskDetailInfo,
+} from '@/api/work/work'
+import NotPassed from '@/components/Approval/NotPassed.vue'
+import { TASK_STATUS_OBJ } from '@/enums/index'
+import { useWorkOrder } from '@/store/modules/workOrder'
+import { isEmpty } from '@/utils'
+import { formatToDateHMS } from '@/utils/dateUtil'
+import { hideDownload } from '@/utils/image'
+import emitter from '@/utils/mitt'
 import type { ApprovalParam, SimilarityPictureSortParam } from '/#/api'
+import bgLoading from '@/assets/images/bg-loading.png'
 
 const batch = ref(false) // 批量审批状态
 const selectItems = ref<any[]>([])
@@ -36,6 +37,7 @@ const message = useMessage()
 const dialog = useDialog()
 const totalCount = ref(0)
 let _imagesload: any
+const bgLoadingImg = ref(bgLoading)
 
 function setBatch(value: boolean) {
   if (value && batch.value)
@@ -798,7 +800,7 @@ defineExpose({
           >
             <div
               class="img-wrapper"
-              :style="{ 'background-image': `url(${item.imgurl})` }"
+              :style="{ background: `url(${item?.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgurl}), url(${bgLoadingImg})` }"
             />
             <div class="time-wrapper">
               <div class="time">