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

fix:布局平铺

Browse Source
pull/130/head
lihui_ocr 1 year ago
parent a6e144b15c
commit 7677963d3a
1 changed files with 433 additions and 8 deletions
Show Stats Download Patch File Download Diff File

441
src/views/task/content/Content.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save