From 68ebf8f3117c1f54fe3202894dc37dd2dc1053d5 Mon Sep 17 00:00:00 2001
From: lizijiee <562949697@qq.com>
Date: Mon, 1 Apr 2024 23:31:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../worksheet/components/PictureInfo.vue      | 183 ++++++++++++++++++
 src/views/worksheet/content/Content.vue       |  38 +---
 2 files changed, 187 insertions(+), 34 deletions(-)
 create mode 100644 src/views/worksheet/components/PictureInfo.vue

diff --git a/src/views/worksheet/components/PictureInfo.vue b/src/views/worksheet/components/PictureInfo.vue
new file mode 100644
index 0000000..a312527
--- /dev/null
+++ b/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>
diff --git a/src/views/worksheet/content/Content.vue b/src/views/worksheet/content/Content.vue
index 825192f..aa732d6 100644
--- a/src/views/worksheet/content/Content.vue
+++ b/src/views/worksheet/content/Content.vue
@@ -4,7 +4,6 @@ import {
 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";
@@ -17,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";
 
@@ -486,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">{{
@@ -549,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>
@@ -669,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;