From 79dde563fe2dccc8dab3d456c12144bc307385b8 Mon Sep 17 00:00:00 2001
From: lihui_ocr <lihui1@qq.com>
Date: Wed, 10 Apr 2024 23:49:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=B2=89=E6=B5=B8=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E4=B8=8B=E5=B0=8F=E5=9B=BE=E7=89=87=E7=9A=84=E5=AE=A1=E6=A0=B8?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=8F=8A=E6=89=B9=E9=87=8F=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/task/content/Content.vue | 276 +++++++++++++++++++++++++++--
 1 file changed, 266 insertions(+), 10 deletions(-)

diff --git a/src/views/task/content/Content.vue b/src/views/task/content/Content.vue
index ac2cfe2..a03961b 100644
--- a/src/views/task/content/Content.vue
+++ b/src/views/task/content/Content.vue
@@ -283,8 +283,19 @@ function approvalHandler(items?: any) {
     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);
 }
@@ -420,6 +431,7 @@ function overTaskHandle() {
 
 function leaveTaskHandler() {
   overTask.value = null;
+   overTasktwo.value = null;
 }
 
 function showActionsModal() {
@@ -998,40 +1010,140 @@ function closePassno(){
               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)"
@@ -1090,20 +1202,23 @@ function closePassno(){
           <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"  @close="closePassno"/>
     <BatchModal
@@ -1767,4 +1882,145 @@ function closePassno(){
   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>