From 2b63e8577aab12761636779c7f48b2d98da623c6 Mon Sep 17 00:00:00 2001
From: lizijiee <562949697@qq.com>
Date: Tue, 2 Apr 2024 11:35:35 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=8F=AF=E7=96=91=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E5=A4=B9=E5=A2=9E=E5=8A=A0=E6=89=B9=E9=87=8F=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E5=AE=A1=E6=A0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Header/RecycleModal.vue | 68 +++++++++++++------
 1 file changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/layout/components/Header/RecycleModal.vue b/src/layout/components/Header/RecycleModal.vue
index f24faff..7f66e7b 100644
--- a/src/layout/components/Header/RecycleModal.vue
+++ b/src/layout/components/Header/RecycleModal.vue
@@ -37,7 +37,7 @@ const timeLabel = computed(() => {
   return item?.label
 })
 
-const viewMode = ref('masonry')
+const viewMode = ref('horizontalVersion')
 
 const viewLabel = computed(() => {
   const item = viewOptions.find((option) => {
@@ -134,6 +134,7 @@ async function loadMore() {
 }
 
 onUpdated(() => {
+  console.log('onUpdated',onUpdated)
   layout()
 })
 
@@ -265,8 +266,8 @@ async function commit() {
     layout()
   }
 }
- function remove() {
-  if ( !selectIds.value|| selectIds.value.length === 0) {
+function remove() {
+  if (!selectIds.value || selectIds.value.length === 0) {
     message.error('至少选中一个')
     return
   }
@@ -313,9 +314,8 @@ function rejectHandler() {
 
 function reset() {
   batch.value = false;
-  pagination.pageNo = 0;
+  pagination.pageNo = 1;
   pagination.pageSize = 20;
-  listData.value.length = 0;
   selectedApproveItems.value.length = 0;
   loading = false;
   canloadMore = true;
@@ -386,9 +386,11 @@ function doAudit(param: any) {
 function reloadList() {
   refreshHandler()
 }
-function refreshHandler() {
+async function refreshHandler() {
   reset()
-  featchList()
+  const list = await featchList()
+  listData.value = list
+  layout()
 }
 
 </script>
@@ -413,13 +415,13 @@ function refreshHandler() {
               <div>
                 <n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click" @change="onChange">
                   <div class="wrapper-content-form-dropdown">
-                    <span>{{ timeLabel || '时间排序' }}</span>
+                    <span>时间排序</span>
                     <SvgIcon class="wrapper-content-form-dropdown-gap" name="arrow-botton" size="14" />
                   </div>
                 </n-popselect>
                 <n-popselect v-model:value="viewMode" :options="viewOptions" trigger="click">
                   <div class="wrapper-form-dropdown">
-                    <span>{{ viewLabel || '视图模式' }}</span>
+                    <span>视图模式</span>
                     <SvgIcon class="wrapper-content-form-gap" name="arrow-botton" size="14" />
                   </div>
                 </n-popselect>
@@ -456,17 +458,18 @@ function refreshHandler() {
                 <div v-for="(item, index) in listData" :key="item.id" :data-id="item.id"
                   :class="{ 'grid-item-selected': isSelected(item.id) }" :style="{ height: gridHeight }"
                   class="grid-item">
-                  <!-- <img
-                    class="wrapper-content-item-img"
-                    :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
-                  > -->
                   <n-image :src="item.imgUrl" class="img "
                     :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }" />
-                  <n-checkbox v-if="batch" v-model:checked="item.checked" style="position:absolute;left:20px;top:20px"
-                    @click.prevent @update:checked="onCheckChange($event, item)" />
-                  <!-- <div class="percent">
-                    {{ getPercent(item.pictureid, item) }}
-                  </div> -->
+                  <n-checkbox v-if="batch && item.historyStates === 1" v-model:checked="item.checked"
+                    style="position:absolute;left:20px;top:20px" @click.prevent
+                    @update:checked="onCheckChange($event, item)" />
+                  <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="{ 'percent-red': item.similarityScore === 100 }" class="percent">
+                    {{ item.similarityScore }}<span class="percent-unit">%</span>
+                  </div>
                 </div>
               </div>
               <!-- </n-scrollbar> -->
@@ -480,7 +483,7 @@ function refreshHandler() {
       </n-card>
     </n-modal>
     <NotPassed ref="notPassModalRef" @success="reloadList" />
-    <ConfrimModal ref="confrimModalRef" @commit="commit" :selectedTotal="selectIds.length"/>
+    <ConfrimModal ref="confrimModalRef" @commit="commit" :selectedTotal="selectIds.length" />
 
   </div>
 </template>
@@ -597,20 +600,40 @@ function refreshHandler() {
       width: 214px;
       padding: 16px;
       position: relative;
+
+      .tag-status {
+        width: 46px;
+        height: 22px;
+        position: absolute;
+        left: 16px;
+        top: 20px;
+      }
+
     }
 
     .percent {
       position: absolute;
-      text-align: center;
+      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: 22px;
-      top: 22px;
+      right: 28px;
+      top: 20px;
       color: #fff;
+      font-size: 14px;
+
+      .percent-unit {
+        font-size: 8px;
+        margin-top: 4px;
+      }
+    }
+    .percent-red {
+      background: #ff4e4f;
     }
 
     .grid-item-selected {
@@ -620,6 +643,7 @@ function refreshHandler() {
     .scroll {
       overflow-y: auto;
       height: calc(100vh - 282px);
+      margin-left: 20px;
     }
   }
 }

From ef187f22859d115b3c595c63a6981278d0d0da07 Mon Sep 17 00:00:00 2001
From: lizijiee <562949697@qq.com>
Date: Tue, 2 Apr 2024 12:19:51 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E5=AE=A1=E6=A0=B8=E5=92=8C?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E5=90=8E=E9=87=8D=E6=96=B0layout=20=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Header/RecycleModal.vue | 55 +++++++++++++++++--
 1 file changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/layout/components/Header/RecycleModal.vue b/src/layout/components/Header/RecycleModal.vue
index 7f66e7b..d3a551e 100644
--- a/src/layout/components/Header/RecycleModal.vue
+++ b/src/layout/components/Header/RecycleModal.vue
@@ -11,6 +11,7 @@ import { debounce } from 'lodash-es'
 
 import { audit } from '@/api/task/task'
 import NotPassed from '@/components/Approval/NotPassed.vue'
+import { formatToDateHMS } from '@/utils/dateUtil'
 import { off, on } from '@/utils/domUtils'
 import ConfrimModal from "./ConfrimModal.vue"
 
@@ -134,7 +135,7 @@ async function loadMore() {
 }
 
 onUpdated(() => {
-  console.log('onUpdated',onUpdated)
+  console.log('onUpdated', onUpdated)
   layout()
 })
 
@@ -243,6 +244,7 @@ async function showModal() {
   pagination.pageNo = 1
   const list = await featchList()
   listData.value = list
+  layout()
 }
 
 async function onChange() {
@@ -470,6 +472,23 @@ async function refreshHandler() {
                   <div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent">
                     {{ item.similarityScore }}<span class="percent-unit">%</span>
                   </div>
+                  <div class="time" style="left: 25px;bottom: 15px;">
+                    <!-- <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 class="time-item">
+                      <SvgIcon class="svg-time" color="#FFF" size="16" name="time" />
+                      <span>{{ item.submitDateTimestamp ?
+                        formatToDateHMS(Number(item.submitDateTimestamp)) : '-' }}</span>
+                    </div>
+                  </div>
                 </div>
               </div>
               <!-- </n-scrollbar> -->
@@ -610,6 +629,9 @@ async function refreshHandler() {
       }
 
     }
+    .grid-item-selected {
+      background-color: #dae3ff;
+    }
 
     .percent {
       position: absolute;
@@ -632,13 +654,35 @@ async function refreshHandler() {
         margin-top: 4px;
       }
     }
+
     .percent-red {
       background: #ff4e4f;
     }
+    .time {
+        position: absolute;
+        z-index: 3;
+        left: 32px;
+        bottom: 32px;
+
+        .time-item {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          font-family: PingFang SC, PingFang SC-Medium;
+          font-weight: 500;
+          color: #ffffff;
+          margin-bottom: 4px;
+        }
+
+        .time-item2 {
+          margin-bottom: 0;
+        }
+
+        .svg-time {
+          margin-right: 5px;
+        }
+      }
 
-    .grid-item-selected {
-      background-color: #dae3ff;
-    }
 
     .scroll {
       overflow-y: auto;
@@ -666,5 +710,4 @@ async function refreshHandler() {
     height: 100%;
     object-fit: cover;
   }
-}
-</style>
+}</style>