From 7677963d3aadca0d729571b991e9b5faebb5cc4c Mon Sep 17 00:00:00 2001
From: lihui_ocr <lihui1@qq.com>
Date: Wed, 10 Apr 2024 00:30:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=B8=83=E5=B1=80=E5=B9=B3=E9=93=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/task/content/Content.vue | 441 ++++++++++++++++++++++++++++-
 1 file changed, 433 insertions(+), 8 deletions(-)

diff --git a/src/views/task/content/Content.vue b/src/views/task/content/Content.vue
index f7c2738..f75eca3 100644
--- a/src/views/task/content/Content.vue
+++ b/src/views/task/content/Content.vue
@@ -36,8 +36,9 @@ import { hideDownload } from "@/utils/image";
 const emit = defineEmits(["setAsideItemName"]);
 
 const router = useRouter();
-
+const loading = ref(false);
 const batch = ref(false);
+const batchtwo = ref(false);
 const selectItems = ref<any[]>([]);
 const message = useMessage();
 const dialog = useDialog();
@@ -74,6 +75,7 @@ const taskpagination = reactive({
 });
 const taskStore = useTask();
 const overTask = ref<any>(null);
+const overTasktwo = ref<any>(null);
 const taskDetailInfo = ref<any>({});
 const taskDetailPictureList = ref<any[]>([]);
 const userStore = useUser();
@@ -407,6 +409,15 @@ function getrowValue(e) {
     );
   }
 }
+function overTaskHandelr(item: any) {
+  if (item?.historyStates === 2 || item?.historyStates == 3) {
+    overTasktwo.value = null;
+    return;
+  }
+
+  if (validate([item]) == null && batchtwo.value === false)
+    overTasktwo.value = item;
+}
 </script>
 
 <template>
@@ -511,9 +522,16 @@ function getrowValue(e) {
     <div class="wrapper-detail">
       <div
         class="left"
-        :style="{
-          'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
-        }"
+        :style="
+          isFullScreen
+            ? {
+                height: '395px',
+                'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+              }
+            : {
+                'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
+              }
+        "
         @mouseover="overTaskHandle"
         @mouseleave="leaveTaskHandler"
         @click="previewHandler"
@@ -653,7 +671,7 @@ function getrowValue(e) {
       <div class="right">
         <n-scrollbar v-if="totalCount > 0" style="max-height: 100%">
           <div class="right-card">
-            <div class="header">
+            <div class="header" v-show="!isFullScreen">
               <span>相似图片({{ totalCount }})</span>
               <SvgIcon
                 style="margin-right: 20px; cursor: pointer"
@@ -662,7 +680,7 @@ function getrowValue(e) {
                 @click="showModal(batchModalRef)"
               />
             </div>
-            <div class="list">
+            <div class="list" v-if="!isFullScreen">
               <div
                 v-for="item in taskDetailPictureList"
                 :key="item.id"
@@ -738,13 +756,87 @@ function getrowValue(e) {
                 </div>
               </div>
             </div>
+            <n-scrollbar v-else style="max-height: 100%">
+              <n-ellipsis style="">
+                {{ taskDetailInfo.fromtaskname }}
+              </n-ellipsis>
+              <div class="tags">
+                <div
+                  class="tag tag-submiting"
+                  v-if="taskDetailInfo?.userapprove?.statshis == 1"
+                >
+                  待审批
+                </div>
+                <div
+                  class="tag tag-submited"
+                  v-else-if="
+                    taskDetailInfo?.userapprove?.statshis == 2 ||
+                    taskDetailInfo?.userapprove?.statshis == 3
+                  "
+                >
+                  已审批
+                </div>
+                <div
+                  class="tag tag-passed"
+                  v-if="taskDetailInfo?.userapprove?.statshis == 2"
+                >
+                  {{ TASK_STATUS_OBJ[taskDetailInfo?.userapprove?.statshis] }}
+                </div>
+                <div
+                  class="tag tag-not-passed"
+                  v-else-if="taskDetailInfo?.userapprove?.statshis == 3"
+                >
+                  {{ TASK_STATUS_OBJ[taskDetailInfo?.userapprove?.statshis] }}
+                </div>
+              </div>
+              <n-divider class="divider-line" />
+              <div>
+                <div v-for="(item, index) in taskTableData" :key="index">
+                  <div
+                    v-if="item[0].label == '拜访终端名称'"
+                    :style="{ display: 'flex',height:'26px' }"
+                  >
+                    <div :style="{ width: '100px', borderRight: '2px solid',marginTop:'4px', }">
+                      {{ item[0].label }}
+                    </div>
+                    <div :style="{ marginLeft: '15px', fontSize: '16px' }">
+                      {{ item[0].value }}
+                    </div>
+                  </div>
+                  <div
+                    class="viewlabel"
+                    v-if="!(item[0].label == '拜访终端名称')"
+                  >
+                    {{ item[0].label }}
+                  </div>
+                  <div
+                    class="viewvalue"
+                    v-if="!(item[0].label == '拜访终端名称')"
+                  >
+                    {{ item[0].value }}
+                  </div>
+                  <div
+                    class="viewlabel"
+                    v-if="item[1] && !(item[1].label == '拜访终端名称')"
+                  >
+                    {{ item[1].label }}
+                  </div>
+                  <div
+                    class="viewvalue"
+                    v-if="item[1] && !(item[1].label == '拜访终端名称')"
+                  >
+                    {{ item[1].value }}
+                  </div>
+                </div>
+              </div>
+            </n-scrollbar>
           </div>
         </n-scrollbar>
         <n-empty v-else description="暂无数据" />
       </div>
     </div>
 
-    <n-tabs type="line" animated>
+    <n-tabs type="line" animated v-if="!isFullScreen">
       <n-tab-pane name="task-info" tab="任务信息">
         <TaskTable
           :data="taskDetailInfo"
@@ -760,6 +852,147 @@ function getrowValue(e) {
         <History :data="taskDetailInfo" />
       </n-tab-pane>
     </n-tabs>
+    <div v-else class="imgbottom">
+      <div
+        style="
+          display: flex;
+          justify-content: space-between;
+          padding: 12px 0px 3px 0;
+        "
+      >
+        <div>
+          <span
+            style="
+              font-size: 18px;
+              font-weight: Medium;
+              color: #333333;
+              font-family: PingFang SC, PingFang SC-Medium;
+            "
+            >相似图片({{ totalCount }})</span
+          >
+        </div>
+        <div
+          style="
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            margin-right: 25px;
+            color: #323233;
+          "
+        >
+          <div style="cursor: pointer" @click="sortHandler('createdate')">
+            <span>时间排序</span>
+            <SvgIcon
+              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
+          v-for="(item, index) in taskDetailPictureList"
+          :key="index"
+          :class="{ 'item-selected': item === selectTask }"
+          class="grid-item"
+          @click="handleSelect(item)"
+          @mouseover="overTaskHandelr(item)"
+          @mouseleave="leaveTaskHandler"
+        >
+          <div
+            class="img-wrapper"
+            :style="{ 'background-image': `url(${item.serverThumbnailUrl})` }"
+          />
+          <div class="time-wrapper">
+            <div class="time">
+              <SvgIcon color="#FFF" size="16" name="camera" />
+              <span class="current-time">{{
+                item.photoDateTimestamp
+                  ? formatToDateHMS(Number(item.photoDateTimestamp) || 0)
+                  : "-"
+              }}</span>
+            </div>
+            <div class="time">
+              <SvgIcon color="#FFF" size="16" name="save" />
+              <span class="current-time">{{
+                item.submitDateTimestamp
+                  ? formatToDateHMS(Number(item.submitDateTimestamp) || 0)
+                  : "-"
+              }}</span>
+            </div>
+          </div>
+          <div class="check">
+            <n-checkbox
+              v-show="
+                batchtwo && item.historyStates !== 2 && item.historyStates !== 3
+              "
+              v-model:checked="item.checked"
+              @click.stop
+              @update:checked="onCheckChange($event, item)"
+            />
+          </div>
+          <div
+            class="percent"
+            :class="{ 'percent-red': item?.maxSimilarity >= 100 }"
+          >
+            <div class="val">
+              {{
+                item?.similarityScore &&
+                Number(item?.similarityScore).toFixed(0)
+              }}<span class="percent-unit">%</span>
+            </div>
+          </div>
+
+          <div class="pass-status" v-if="item.historyStates === 2">
+            <SvgIcon name="pass-icon" style="width: 52; height: 24px" />
+          </div>
+          <div class="pass-status" v-else-if="item.historyStates === 3">
+            <SvgIcon name="no-pass-icon" style="width: 52; height: 24px" />
+          </div>
+          <div
+            v-show="overTasktwo && overTasktwo.id === item.id"
+            class="action"
+          >
+            <SvgIcon
+              style="cursor: pointer"
+              name="t1"
+              @click.stop="approvalHandler"
+            />
+            <SvgIcon
+              style="cursor: pointer; margin-left: 40px"
+              name="t2"
+              @click.stop="singleRejectHandler(item)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
     <NotPassed ref="notPassModalRef" @success="notPassSuccess" />
     <BatchModal
       ref="batchModalRef"
@@ -858,6 +1091,7 @@ function getrowValue(e) {
   border-radius: 3px;
   border: 1px solid rgb(239, 239, 245);
   height: 892px;
+  overflow-y: scroll;
   // 62+82+16
   // height: 100%;
   // overflow-y: scroll;
@@ -1084,7 +1318,7 @@ function getrowValue(e) {
           height: 129px;
         }
       }
-    /*  .leftback {
+      /*  .leftback {
         position: absolute;
         width: 100%;
         height: 151px;
@@ -1229,5 +1463,196 @@ function getrowValue(e) {
       }
     }
   }
+  .imgbottom {
+    .header {
+      padding: 12px 0px 3px;
+      font-size: 18px;
+      color: #333333;
+      margin-bottom: 16px;
+    }
+  }
+  .wrapper-list {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-shrink: 0;
+
+    .item-selected {
+      box-shadow: 0px 2px 8px 0px rgba(0, 65, 207, 0.28);
+      background-color: #fff;
+    }
+
+    .grid-item {
+      box-sizing: border-box;
+      border-radius: 8px;
+      padding: 9px 5px;
+      position: relative;
+
+      .img-wrapper {
+        width: 230px;
+        height: 130px;
+        overflow: hidden;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        border-radius: 8px;
+      }
+
+      .time-wrapper {
+        position: absolute;
+        bottom: 9px;
+        width: calc(100% - 11px);
+        height: 58px;
+        background: linear-gradient(
+          180deg,
+          rgba(0, 0, 0, 0.01),
+          rgba(0, 0, 0, 0.71) 100%
+        );
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        font-weight: Medium;
+        padding-left: 12px;
+        color: white;
+
+        .time .current-time {
+          margin-left: 9px;
+          font-weight: Medium;
+        }
+      }
+
+      .check {
+        position: absolute;
+        z-index: 3;
+        left: 12px;
+        top: 12px;
+      }
+
+      .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: 15px;
+        color: #fff;
+        font-size: 14px;
+      }
+
+      .percent-unit {
+        font-size: 8px;
+        margin-top: 4px;
+      }
+
+      .percent-red {
+        background: #ff4e4f;
+      }
+
+      .pass-status {
+        position: absolute;
+        left: 0px;
+        top: 15px;
+      }
+
+      .mark {
+        position: absolute;
+        z-index: 3;
+        right: 62px;
+        top: 9px;
+        width: 64px;
+        height: 40px;
+        overflow: hidden;
+        overflow: hidden;
+
+        svg {
+          position: absolute;
+          top: -20px;
+        }
+      }
+
+      .action {
+        position: absolute;
+        z-index: 5;
+        left: 4px;
+        top: 9px;
+        width: 230px;
+        height: 130px;
+        display: flex;
+        border-radius: 8px;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(0, 0, 0, 0.48);
+      }
+    }
+  }
+  .tags {
+    display: flex;
+    margin-top: 8px;
+  }
+
+  .tag {
+    border: 1px solid #d8d8d8;
+    box-sizing: border-box;
+    border-radius: 8px;
+    color: #666666;
+    margin-right: 12px;
+    padding: 4px 8px;
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  .tag-submited {
+    color: #507afd;
+    border: 1px solid #507afd;
+  }
+
+  .tag-submiting {
+    color: #ffb800;
+    border: 1px solid #ffb800;
+  }
+
+  .tag-passed {
+    color: #02c984;
+    border: 1px solid #02c984;
+  }
+
+  .tag-not-passed {
+    color: #ff7575;
+    border: 1px solid #ff7575;
+  }
+
+  .tag-approved {
+    color: #507afd;
+    border: 1px solid #507afd;
+  }
+}
+.viewlabel {
+ margin-top: 10px;
+ font-size: 14px;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: Regular;
+  text-align: left;
+  color: #999999;
+  line-height: 20px;
+  height: 20px;
+}
+.viewvalue {
+  font-size: 14px;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: Regular;
+  text-align: left;
+  color: #333333;
+  line-height: 20px;
+  height: 100%;
+  margin: 3px 0 10px 0;
+  max-width: 650px;
 }
 </style>