Merge pull request 'jie' (#63) from jie into test

Reviewed-on: #63

src/api/work/work.ts

@@ -83,7 +83,7 @@ export async function getTaskDetailInfo(checkDuplicateId: string) {
  * @param params
  * @returns
  */
-export async function getTaskDetailPictureList(params: PageParam & PictureSortParam & SimilarityPictureSortParam) {
+export async function getPictureSimilarityList(params: PageParam & PictureSortParam & SimilarityPictureSortParam) {
 
   const res = await http.request({
     url: `/backstage/jifen/ocrtaskchildpicture/getPictureSimilarityList`,
@@ -97,6 +97,7 @@ export async function getTaskDetailPictureList(params: PageParam & PictureSortPa
   const list = records.map((item,index) => {
     return {
       id: item.id,
+      checkDuplicateId: item.checkDuplicateId,
       taskId: item.taskId,
       taskname: item.fromTaskName,
       assignee: item.assignee,

src/views/worksheet/components/PictureInfo.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { fieldMap } from "@/config/workorder";
+import { TASK_STATUS_OBJ } from '@/enums/index';
+import { format } from 'date-fns';
+import { pickBy } from "lodash-es";
+import { computed, defineProps } from "vue";
+
+const props = defineProps({
+  taskDetailInfo: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const propertys = computed(() => {
+  const { ocrPicture } = props.taskDetailInfo;
+  const v = pickBy(ocrPicture, (value, key: string) => {
+    return key.startsWith("field") && value !== null;
+  });
+  return v;
+});
+</script>
+
+<template>
+  <div class="right">
+    <n-scrollbar style="max-height: 100%">
+      <n-ellipsis style="max-width: 350px">任务ID：{{ taskDetailInfo.taskname }}</n-ellipsis>
+      <div class="tags">
+        <div class="tag tag-submiting" v-if="taskDetailInfo.historyStates == '1'">待审批</div>
+        <div class="tag tag-submited" v-else-if="taskDetailInfo.historyStates == 2 || taskDetailInfo.workStatus == 3">已审批</div>
+        <div class="tag tag-passed" v-if="taskDetailInfo.historyStates == 2">{{ TASK_STATUS_OBJ[taskDetailInfo.historyStates] }}</div>
+        <div class="tag tag-not-passed" v-else-if="taskDetailInfo.workStatus == 3">{{ TASK_STATUS_OBJ[taskDetailInfo.historyStates] }}</div>
+      </div>
+      <n-divider class="divider-line" />
+      <div class="property">
+        <span class="property-name top" style="color: #666666">图片大小</span>
+        <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgSize && (taskDetailInfo.pictureInfo.imgSize / 1000).toFixed(2) }}KB</span>
+      </div>
+      <div class="property">
+        <span class="property-name top" style="color: #666666">图片格式</span>
+        <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgFormat }}</span>
+      </div>
+      <div class="property">
+        <span class="property-name top" style="color: #666666">图片尺寸</span>
+        <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgMeasure }}</span>
+      </div>
+      <div class="property">
+        <span class="property-name top" style="color: #666666">色彩空间</span>
+        <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgSpace }}</span>
+      </div>
+      <div class="property">
+        <span class="property-name top" style="color: #666666">提报人</span>
+        <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.upname || "-" }}</span>
+      </div>
+      <div class="property">
+        <span class="property-name top" style="color: #666666">创建时间</span>
+        <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.createTime }}</span>
+      </div>
+      <div class="property">
+        <span class="property-name top" style="color: #666666">提报时间</span>
+        <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.submitDateTimestamp && format(taskDetailInfo.submitDateTimestamp, 'yyyy-MM-dd HH:mm:ss') || '-' }}</span>
+      </div>
+      <div v-for="(value, key) in propertys" :key="key" class="property">
+        <span class="property-name">{{ fieldMap[key] }}</span>
+        <span class="property-content">{{ value }}</span>
+      </div>
+    </n-scrollbar>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.right {
+  // flex: 1;
+  // display: flex;
+  // flex-direction: column;
+  // justify-content: space-between;
+  // // background: #fafafa;
+
+  // border-radius: 8px;
+  // margin-left: 20px;
+  // padding: 24px;
+  // width: 24vw;
+  flex: 0.5;
+  background: #f9f9f9;
+  border-radius: 8px;
+  margin-left: 20px;
+  padding: 24px;
+  // background: lime;
+
+
+  .task-name {
+    display: inline-block;
+    width: 100%;
+    font-size: 18px;
+    color: #0d0b22;
+    line-height: 25px;
+    font-family: PingFang SC, PingFang SC-Medium;
+    font-weight: Medium;
+    max-width: 445px;
+    /* 设置文本溢出时的样式为省略号 */
+    text-overflow: ellipsis;
+    /* 隐藏超出容器的文本 */
+    overflow: hidden;
+    /* 确保文本不换行 */
+    white-space: nowrap;
+  }
+
+  // ::v-deep(.n-divider:not(.n-divider--vertical)) {
+
+  ::v-deep(.divider-line .n-divider__line) {
+    background-color: #e8e8e8;
+  }
+
+  .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;
+  }
+
+  .property {
+    display: flex;
+    align-items: center;
+    margin-top: 12px;
+    line-height: 20px;
+  }
+
+  .property-name {
+    width: 56px;
+    text-align: right;
+    color: #999999;
+    position: relative;
+    margin-right: 32px;
+  }
+
+  .top {}
+
+  .property-content {
+    flex: 1;
+    color: #333333;
+  }
+}
+
+
+::v-deep(.n-divider:not(.n-divider--vertical)) {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+</style>

src/views/worksheet/content/Content.vue

@@ -1,11 +1,9 @@
 <script lang="ts" setup>
 import { audit } from '@/api/task/task';
 import {
-getTaskDetailInfo,
-getTaskDetailPictureList
+getPictureSimilarityList, getTaskDetailInfo
 } from "@/api/work/work";
 import NotPassed from '@/components/Approval/NotPassed.vue';
-import { fieldMap } from "@/config/workorder";
 import { TASK_STATUS_OBJ } from '@/enums/index';
 import { useWorkOrder } from "@/store/modules/workOrder";
 import { isEmpty } from "@/utils";
@@ -18,6 +16,7 @@ import imagesloaded from "imagesloaded";
 import { clone, debounce, pickBy } from "lodash-es";
 import { useDialog, useMessage } from "naive-ui";
 import { computed, onUnmounted, onUpdated, reactive, ref, unref, watch } from "vue";
+import PictureInfo from "../components/PictureInfo.vue";
 import ConfrimModal from "../modal/ConfrimModal.vue";
 import type { ApprovalParam, SimilarityPictureSortParam } from "/#/api";
 
@@ -135,7 +134,7 @@ async function featchList() {
   loading.value = true;
   try {
     taskpagination.pageNo += 1;
-    const { data, total, pageCount } = await getTaskDetailPictureList(
+    const { data, total, pageCount } = await getPictureSimilarityList(
       { ...taskpagination, ...sortBy, checkDuplicateId: workStore.activeId, pictureId: taskDetailInfo.value.id }
     );
 
@@ -487,18 +486,10 @@ function reloadList() {
             </div>
           </div>
           <!-- 右侧任务 标题信息 -->
-          <div class="right">
+          <!-- <div class="right">
             <n-scrollbar style="max-height: 100%">
               <n-ellipsis style="max-width: 350px">任务ID：{{ taskDetailInfo.taskname }}</n-ellipsis>
               <div class="tags">
-                <!-- <div class="tag tag-submiting" v-if="taskDetailInfo.workStatus == '1'">{{ TASK_STATUS_OBJ[taskDetailInfo.workStatus]
-                }}</div>
-                <div class="tag tag-submited" v-else-if="taskDetailInfo.workStatus == '2'">已审批</div>
-                <div class="tag tag-passed" v-if="taskDetailInfo.historyStates == 2">{{
-                  TASK_STATUS_OBJ[taskDetailInfo.historyStates] }}</div>
-                <div class="tag tag-not-passed" v-else-if="taskDetailInfo.workStatus == 3">{{
-                  TASK_STATUS_OBJ[taskDetailInfo.historyStates]
-                }}</div> -->
                 <div class="tag tag-submiting" v-if="taskDetailInfo.historyStates == '1'">待审批</div>
                 <div class="tag tag-submited" v-else-if="taskDetailInfo.historyStates == 2 || taskDetailInfo.workStatus == 3">已审批</div>
                 <div class="tag tag-passed" v-if="taskDetailInfo.historyStates == 2">{{
@@ -550,7 +541,8 @@ function reloadList() {
                 <span class="property-content">{{ propertys[key] }}</span>
               </div>
             </n-scrollbar>
-          </div>
+          </div> -->
+          <PictureInfo :taskDetailInfo="taskDetailInfo"></PictureInfo>
         </div>
         <div style="display: flex; justify-content: space-between; padding: 12px 0px 3px 0">
           <div>
@@ -670,29 +662,6 @@ function reloadList() {
       }
     }
 
-    .right {
-      display: flex;
-      align-items: center;
-
-      .btn {
-        width: 118px;
-        height: 36px;
-        background: linear-gradient(135deg, #5b85f8, #3c6cf0);
-        border-radius: 17px;
-        box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.3);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-        cursor: pointer;
-      }
-
-      .batch {
-        display: flex;
-        align-items: center;
-      }
-    }
-
     .font {
       font-size: 20px;
       font-family: PingFang SC, PingFang SC-Medium;