guoxiangbin
/
ocr-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: 增加右侧图片信息

Browse Source
pull/63/head
lizijiee 1 year ago
parent 85ae4ead31
commit 68ebf8f311
2 changed files with 187 additions and 34 deletions
Show Stats Download Patch File Download Diff File

183
src/views/worksheet/components/PictureInfo.vue
Unescape View File

@ -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>

38
src/views/worksheet/content/Content.vue
Unescape View File

@ -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;

Write Preview
Loading…
Cancel
Save