Merge pull request 'fix:沉浸模式下小图片的审核功能及批量操作' (#148) from fix/changeimgback into test

Reviewed-on: #148

src/components/Approval/NotPassed.vue

@@ -4,7 +4,7 @@ import { useMessage } from 'naive-ui'
 import { useDictionary } from '@/store/modules/dictonary'
 import { audit } from '@/api/task/task'
 
-const emit = defineEmits(['success'])
+const emit = defineEmits(['success','close'])
 const message = useMessage()
 const loading = ref(false)
 
@@ -42,6 +42,7 @@ function showModal(value) {
 
 function closeModal() {
   show.value = false
+     emit('close')
 }
 
 defineExpose({

src/views/home/aside/comp/AdvanceFilter.vue

@@ -414,7 +414,7 @@ defineExpose({
   align-items: center;
   position: absolute;
   left: 0;
-  top: -5px;
+  
   width: 100%;
   padding: 12px 16px;
   border-bottom: 1px solid #e8e8e8;

src/views/task/content/Content.vue

@@ -157,9 +157,17 @@ function handleKeydown(event) {
 
     // 如果两次按键时间间隔小于我们设定的双击间隔，则认为是双击
     if (now - lastKeyPressTime < doubleClickInterval) {
-      // 清除已经设置的定时器（如果有的话）
+       const item = taskDetailInfo.value;
-      clearTimeout(keyPressTimer);
+      if (
+        item?.userapprove?.statshis === 2 ||
+        item?.userapprove?.statshis == 3
+      ) {
+        overTask.value = null;
+        return;
+      }
 
+      if (validate([item]) == null && batch.value === false)
+        overTask.value = item;
       // 执行想要的操作
       const modal = unref(notPassModalRef)! as any;
       modal.showModal([taskDetailInfo.value]);
@@ -270,12 +278,24 @@ function approvalHandler(items?: any) {
     negativeText: "取消",
     onPositiveClick: () => {
       doAudit(param);
+       overTask.value = null;
     },
-    onNegativeClick: () => {},
+    onNegativeClick: () => {overTask.value = null;},
   });
 }
+function approvalHandlerx(item?:any){
+ 
+  console.log(item)
+    alert(1)
+}
+function singleRejectHandlex(item?:any){
+  console.log(item)
+ const modal = unref(notPassModalRef)! as any;
 
+ modal.showModal([item]);
+}
 function rejectHandler(items?: any) {
+  console.log(items)
   const modal = unref(notPassModalRef)! as any;
   modal.showModal(items);
 }
@@ -334,7 +354,7 @@ async function addSuspicious() {
     const res = await dubiousfileyd({
       pictureid: taskDetailInfo.value.ocrPicture.id,
     });
- console.log(res)
+
   if (res.code === "OK") {
       message.success("加入成功");
       setBatch(false);
@@ -411,6 +431,7 @@ function overTaskHandle() {
 
 function leaveTaskHandler() {
   overTask.value = null;
+   overTasktwo.value = null;
 }
 
 function showActionsModal() {
@@ -461,6 +482,7 @@ async function getDetail() {
 function notPassSuccess(param) {
   batchModalRef.value.reload();
   reloadList(param, "不通过");
+  overTask.value=null
 }
 
 function reloadList(param, text) {
@@ -507,6 +529,9 @@ function overTaskHandelr(item: any) {
   if (validate([item]) == null && batchtwo.value === false)
     overTasktwo.value = item;
 }
+function closePassno(){
+    overTask.value=null
+}
 </script>
 
 <template>
@@ -985,40 +1010,140 @@ function overTaskHandelr(item: any) {
               style="margin-left: 5px"
               name="sort"
               size="12"
-              v-show="selectedSortName !== 'createdate'"
+            
             />
             <SvgIcon
               style="margin-left: 5px"
               name="active-sort"
               size="12"
-              v-show="selectedSortName === 'createdate'"
+       
             />
           </div>
           <div
             style="margin-left: 15px; cursor: pointer"
-            @click="sortHandler('similarityScore')"
+           
           >
             <span>相似度排序</span>
             <SvgIcon
               style="margin-left: 5px"
               name="sort"
               size="12"
-              v-show="selectedSortName !== 'similarityScore'"
+           
             />
             <SvgIcon
               style="margin-left: 5px"
               name="active-sort"
               size="12"
-              v-show="selectedSortName === 'similarityScore'"
+      
             />
           </div>
         </div>
       </div>
-      <div class="wrapper-list">
+      <div class="allview">
+      <div class="list" >
+              <div
+                v-for="item in taskDetailPictureList"
+                :key="item.id"
+                class="item"
+                draggable="true"
+                @dragend="
+                  (event) => {
+                    handleDragEnd(event, item);
+                  }
+                "
+              >
+                <div
+                  class="img-wrapper"
+                  :style="{
+                    'background-image': `url(${item.serverThumbnailUrl})`,
+                  }"
+                           @mouseover="overTaskHandelr(item)"
+        @mouseleave="leaveTaskHandler"
+                >
+             
+                 <div
+            v-show="overTasktwo&& overTasktwo.id === item.id&&!batch"
+            class="action"
+      
+       
+          >
+            <SvgIcon
+              style="cursor: pointer"
+              name="t1"
+              @click.stop="approvalHandler([item])"
+            />
+            <SvgIcon
+              style="cursor: pointer; margin-left: 40px"
+              name="t2"
+              @click.stop="singleRejectHandlex(item)"
+            />
+          </div>
+                </div>
+                <div class="small-mark" />
+                <div class="check">
+                  <n-checkbox
+                    v-show="batch && item.historyStates === 1"
+                    v-model:checked="item.checked"
+                    @click.stop
+                    @update:checked="onCheckChange($event, item)"
+                  />
+                </div>
+
+                <img
+                  v-if="item.historyStates === 2"
+                  class="tag-status"
+                  src="@/assets/images/task/tag-pass.png"
+                  alt=""
+                />
+                <img
+                  v-if="item.historyStates === 3"
+                  class="tag-status"
+                  src="@/assets/images/task/tag-not-pass.png"
+                  alt=""
+                />
+                <div class="time">
+                  <div class="time-item">
+                    <SvgIcon
+                      class="svg-time"
+                      color="#FFF"
+                      size="16"
+                      name="camera-time"
+                    />
+                    <span>{{
+                      item.photoDateTimestamp
+                        ? formatToDateHMS(Number(item.photoDateTimestamp))
+                        : "-"
+                    }}</span>
+                  </div>
+                  <div class="time-item time-item2">
+                    <SvgIcon
+                      class="svg-time"
+                      color="#FFF"
+                      size="16"
+                      name="submit-time"
+                    />
+                    <span>{{
+                      item.submitDateTimestamp
+                        ? formatToDateHMS(Number(item.submitDateTimestamp))
+                        : "-"
+                    }}</span>
+                  </div>
+                </div>
+                <div
+                  :class="{ 'percent-red': item.similarityScore === 100 }"
+                  class="percent"
+                >
+                  {{ item.similarityScore }}<span class="percent-unit">%</span>
+                </div>
+              </div>
+              
+            </div>
+    </div>
+     <!-- <div class="wrapper-list">
         <div
           v-for="(item, index) in taskDetailPictureList"
           :key="index"
-          :class="{ 'item-selected': item === selectTask }"
+        
           class="grid-item"
           @click="handleSelect(item)"
           @mouseover="overTaskHandelr(item)"
@@ -1077,22 +1202,25 @@ function overTaskHandelr(item: any) {
           <div
             v-show="overTasktwo && overTasktwo.id === item.id"
             class="action"
+               @mouseover="overTaskHandelr"
+        @mouseleave="leaveTaskHandler"
+       
           >
             <SvgIcon
               style="cursor: pointer"
               name="t1"
-              @click.stop="approvalHandler"
+              @click.stop="approvalHandlerx(item)"
             />
             <SvgIcon
               style="cursor: pointer; margin-left: 40px"
               name="t2"
-              @click.stop="singleRejectHandler(item)"
+              @click.stop="singleRejectHandlex(item)"
             />
           </div>
         </div>
-      </div>
+      </div>-->
     </div>
-    <NotPassed ref="notPassModalRef" @success="notPassSuccess" />
+    <NotPassed ref="notPassModalRef" @success="notPassSuccess"  @close="closePassno"/>
     <BatchModal
       ref="batchModalRef"
       @reject="rejectHandler"
@@ -1754,4 +1882,145 @@ function overTaskHandelr(item: any) {
   margin: 3px 0 10px 0;
   max-width: 650px;
 }
+ .allview {
+      flex: 0.5;
+      background: #f6f9fd;
+      border-radius: 8px;
+     // margin-left: 20px;
+      padding-top: 24px;
+      .action {
+        position: absolute;
+        z-index: 10;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        border-radius: 8px;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+      .right-card {
+        padding: 3px;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        font-size: 17px;
+        font-weight: bold;
+        color: #333333;
+        margin-bottom: 16px;
+      }
+
+      .list {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        justify-content: flex-start;
+        flex-shrink: 0;
+      }
+
+      .item {
+        // flex-basis: calc((100% - 48px) / 3);
+        box-sizing: border-box;
+        border-radius: 8px;
+        position: relative;
+        // overflow: hidden;
+        margin: 0px 16px 27px 0px;
+
+        .small-mark {
+          width: 100%;
+          height: 53px;
+          background: linear-gradient(
+            180deg,
+            rgba(0, 0, 0, 0.01),
+            rgba(0, 0, 0, 0.44) 88%
+          );
+          border-radius: 0px 8px 8px 8px;
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          z-index: 0;
+        }
+
+        .tag-status {
+          width: 46px;
+          height: 22px;
+          position: absolute;
+          left: -4px;
+          top: 4px;
+        }
+
+        .time {
+          position: absolute;
+          z-index: 3;
+          left: 3px;
+          bottom: 3px;
+
+          .time-item {
+            display: flex;
+            align-items: center;
+            font-size: 16px;
+            font-family: PingFang SC, PingFang SC-Medium;
+            font-weight: 500;
+            color: #ffffff;
+            margin-bottom: 2px;
+            line-height: 12px;
+          }
+
+          .time-item2 {
+            margin-bottom: 0;
+          }
+
+          .svg-time {
+            margin-right: 5px;
+          }
+        }
+
+        .img-wrapper {
+          position: relative;
+          width: 230px;
+          height: 130px;
+          overflow: hidden;
+          background-size: cover;
+          background-position: center;
+          background-repeat: no-repeat;
+          border-radius: 8px;
+          cursor: n-resize;
+        }
+
+        .check {
+          position: absolute;
+          z-index: 5;
+          left: 6px;
+          top: 4px;
+        }
+      }
+
+      .percent {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 35px;
+        height: 18px;
+        opacity: 0.9;
+        background: #6f92fd;
+        border-radius: 6px 0px 6px 0px;
+        z-index: 5;
+        right: 12px;
+        top: 2px;
+        color: #fff;
+        font-size: 14px;
+      }
+
+      .percent-unit {
+        font-size: 8px;
+        margin-top: 4px;
+      }
+
+      .percent-red {
+        background: #ff4e4f;
+      }
+    }
 </style>