src/layout/components/Header/RecycleModal.vue

@@ -132,7 +132,6 @@ async function featchList() {
     //     imgUrl: randomUrl(),
     //   }
     // })
-    // console.log(list)
     // return list
   }
   catch (error) {
@@ -155,7 +154,6 @@ onUpdated(() => {
 })
 
 onBeforeMount(async () => {
-  console.log(888)
   // const list = await featchList()
   // listData.value = list
 })
@@ -191,7 +189,28 @@ function imUpdateSelectIds(x: number, y: number, w: number, h: number) {
     if (rect.right > x && rect.bottom > y && rect.left < x + w && rect.top < y + h)
       index === -1 && selectIds.value.push(item.dataset.id!)
     else index !== -1 && selectIds.value.splice(index, 1)
+
+    let tempApproveIndex = -1;
+    selectedApproveItems.value.map((approveItem, approveIndex) => {
+      if(approveItem.dataset.id == item.dataset.id) {
+        tempApproveIndex = approveIndex;
+      }
+    })
+    if (tempApproveIndex === -1 && item.className.indexOf('grid-item-selected') != -1) {
+      selectedApproveItems.value.push(item)
+    } else {
+      selectedApproveItems.value.splice(tempApproveIndex, 1);
+    }
   })
+  // 选中复选框
+  listData.value.map(item => {
+    if(selectIds.value.includes(String(item.pictureId))) {
+      item.checked = true;
+    }
+  });
+
+  
+
 }
 
 function isSelected(pictureId: number) {
@@ -217,8 +236,16 @@ function moveHandler(e: MouseEvent) {
 
 function upHandler(event: MouseEvent) {
   if (!selectionBox)
-    return
-
+  return
+  if(selectionBox.style.width == "0px") {
+    selectIds.value = []
+    selectedApproveItems.value.forEach((item) => (item.checked = false));
+    selectedApproveItems.value.length = 0;
+    listData.value.map(item => {
+      item.checked = false;
+    });
+    batch.value = false;
+  }
   selectionBox.style.display = 'none'
   start = null
 }
@@ -274,7 +301,6 @@ async function showModal() {
 }
 
 async function onChange(val) {
-  console.log("val------------------------", val);
   sortObj = {
     // orderbyname: val,
     orderByUptime: val
@@ -285,7 +311,6 @@ async function onChange(val) {
 }
 
 async function onChangeView(val) {
-  console.log("val------------------------", val);
   sortObj = {
     // orderbyname: val,
     orderBySimilarity: val
@@ -345,9 +370,18 @@ const showActions = computed(() => {
 function onCheckChange(checked: any, item: any) {
   item.checked = checked
   const index = selectedApproveItems.value.indexOf(item);
+  const picIndex = selectIds.value.indexOf(item.pictureId);
 
-  if (index === -1 && checked) selectedApproveItems.value.push(item);
-  else selectedApproveItems.value.splice(index, 1);
+  if (index === -1 && checked) {
+    selectedApproveItems.value.push(item)
+  } else {
+    selectedApproveItems.value.splice(index, 1);
+  }
+  if (picIndex === -1 && checked) {
+    selectIds.value.push(item.pictureId);
+  } else {
+    selectIds.value.splice(picIndex, 1);
+  }
 }
 
 function rejectHandler() {
@@ -544,7 +578,7 @@ async function refreshHandler(filtersearchId?: any) {
                   <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" >
                     <!-- <div class="time-item">
                       <SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
                       <span>{{ item?.photoDateTimestamp ?
@@ -555,6 +589,11 @@ async function refreshHandler(filtersearchId?: any) {
                       <span>{{ item.submitDateTimestamp ?
                         formatToDateHMS(Number(item.submitDateTimestamp)) : '-' }}</span>
                     </div> -->
+                    <div class="time-item" style="margin-bottom: 4px;">
+                      <SvgIcon color="#FFF" size="16" name="camera" style="margin-right: 4px;" />
+                      <span class="time-value">{{ item?.photoDateTimestamp ? 
+                        formatToDateHMS(Number(item.photoDateTimestamp)) : '-' }} </span>
+                    </div>
                     <div class="time-item">
                       <SvgIcon class="svg-time" color="#FFF" size="16" name="time" />
                       <span>{{ item.submitDateTimestamp ?
@@ -734,9 +773,12 @@ async function refreshHandler(filtersearchId?: any) {
     }
     .time {
         position: absolute;
+        width: 182px;
+        padding-left: 10px;
         z-index: 3;
-        left: 32px;
-        bottom: 32px;
+        left: 16px;
+        bottom: 16px;
+        background: linear-gradient(180deg,rgba(6,0,0,0.01),rgba(0, 0, 0, 0.44) 100%);
 
         .time-item {
           display: flex;

src/views/home/content/Content.vue

@@ -525,7 +525,8 @@ function previewHandler(index: number, event: MouseEvent) {
   event.stopImmediatePropagation();
   event.stopPropagation();
   if (imageRef.value?.[index] && (imageRef.value[index] as any).src)
-    (imageRef.value?.[index] as any).mergedOnClick();
+    // (imageRef.value?.[index] as any).mergedOnClick();
+    (imageRef.value?.[index] as any).click();
 }
 
 const timer = ref();