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

Merge pull request 'fix:沉浸模式布局及不同状态优化' (#158) from fix/change_task into test

Browse Source 
Reviewed-on: #158
pull/160/head
赵辉 1 year ago
parent f91f028cf7 0b860955ef
commit cf7386b337
2 changed files with 315 additions and 40 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,5 +1,14 @@
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, reactive, ref, unref, watch } from "vue";
import {
computed,
onMounted,
onUnmounted,
reactive,
ref,
unref,
watch,
nextTick,
} from "vue";
import { chunk, clone } from "lodash-es";
import { useDialog, useMessage } from "naive-ui";
import { useRoute, useRouter } from "vue-router";
@ -12,7 +21,7 @@ import NotPassed from "@/components/Approval/NotPassed.vue";
import { getAllfieldList, getfieldList } from "@/api/home/filter";
import { TASK_STATUS_OBJ } from "@/enums/index";
import { useFinal } from "@/store/modules/final";
import { useInfiniteScroll } from "@vueuse/core";
import {
audit,
dubiousfileyd,
@ -44,11 +53,16 @@ const taskTableData = ref<any[]>([]);
const route = useRoute();
const isDetail = ref(false); // 是否是详情
const finalStore = useFinal();
const imgbigshow = ref(true);
const sortBy: any = {
orderType: "desc",
orderName: "similarityScore",
};
const el = ref<HTMLDivElement | null>(null);
const pagination = reactive({
pageNo: 0,
pageSize: 30,
});
function onCheckChange(checked: any, item: any) {
const index = selectItems.value.indexOf(item);
item.checked = checked;
@ -97,6 +111,9 @@ onMounted(() => {
let lastKeyPressTime = 0;
let keyPressTimer = null;
function changeimgbigshow() {
imgbigshow.value = !imgbigshow.value;
}
const doubleClickInterval = 300; // 可以自定义间隔时间，单位是毫秒
// 键盘左右箭头快捷切换
function handleKeydown(event) {
@ -117,12 +134,16 @@ function handleKeydown(event) {
// 清除已经设置的定时器（如果有的话）
clearTimeout(keyPressTimer);
const item = taskDetailInfo.value;
if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) {
if (
item?.userapprove?.statshis === 2 ||
item?.userapprove?.statshis == 3
) {
overTask.value = null;
return;
}
if (validate([item]) == null && batch.value === false) overTask.value = item;
if (validate([item]) == null && batch.value === false)
overTask.value = item;
// 执行想要的操作
approvalHandler();
@ -146,12 +167,16 @@ function handleKeydown(event) {
// 如果两次按键时间间隔小于我们设定的双击间隔，则认为是双击
if (now - lastKeyPressTime < doubleClickInterval) {
const item = taskDetailInfo.value;
if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) {
if (
item?.userapprove?.statshis === 2 ||
item?.userapprove?.statshis == 3
) {
overTask.value = null;
return;
}
if (validate([item]) == null && batch.value === false) overTask.value = item;
if (validate([item]) == null && batch.value === false)
overTask.value = item;
// 执行想要的操作
const modal = unref(notPassModalRef)! as any;
modal.showModal([taskDetailInfo.value]);
@ -224,7 +249,8 @@ function approvalHandler(items?: any) {
processItems = [cloneItem];
}
if (items !== undefined && !(items instanceof PointerEvent)) processItems = items;
if (items !== undefined && !(items instanceof PointerEvent))
processItems = items;
const msg = validate(processItems);
@ -434,6 +460,12 @@ function immersionHandler() {
// 切换全屏状态
function toggleFullScreen() {
isFullScreen.value = !isFullScreen.value;
if (isFullScreen.value) {
fetchData();
window.addEventListener("scroll", checkBottom);
} else {
window.removeEventListener("scroll", checkBottom);
}
}
function previewHandler(event: MouseEvent) {
event.stopImmediatePropagation();
@ -471,7 +503,9 @@ function notPassSuccess(param) {
function reloadList(param, text) {
// 修改左侧状态
const id = currentTaskId();
const hasCurrentId = param.flowTaskInfoList.find((item) => item.formId === id);
const hasCurrentId = param.flowTaskInfoList.find(
(item) => item.formId === id
);
finalStore.setListKey();
if (hasCurrentId) emit("setAsideItemName", text);
@ -496,7 +530,9 @@ function getrowValue(e) {
const hostname = window.location.hostname;
const port = window.location.port;
const hostWithPort = protocol + "//" + hostname + ":" + port + "/";
window.open(hostWithPort + "map" + "?name=" + name + "&lat=" + lat + "&lng=" + lng);
window.open(
hostWithPort + "map" + "?name=" + name + "&lat=" + lat + "&lng=" + lng
);
}
}
function overTaskHandelr(item: any) {
@ -505,21 +541,115 @@ function overTaskHandelr(item: any) {
return;
}
if (validate([item]) == null && batchtwo.value === false) overTasktwo.value = item;
if (validate([item]) == null && batchtwo.value === false)
overTasktwo.value = item;
}
function closePassno() {
overTask.value = null;
}
//const loadingx = ref(false);
const items = ref([]);
const scrollContainer = ref(null);
let debounceTimer;
async function fetchData() {
if (loading.value) {
return; // 如果已经在加载中，则不重复加载
}
loading.value = true;
try {
loadMore();
} finally {
loading.value = false;
}
}
//const throttledCheckScroll = throttle(checkBottom, 200);
let num = 1;
// 检查是否滚动到底部
function checkBottom() {
const container = scrollContainer.value;
// console.log(1)
if (!container) {
return;
}
//const { scrollTop, clientHeight, scrollHeight } = container;
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// 获取视口的内部高度
const clientHeight =
window.innerHeight || document.documentElement.clientHeight;
// 获取整个文档的高度
const scrollHeight = document.documentElement.scrollHeight;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
if (scrollTop + clientHeight >= scrollHeight - 10) {
num = num + 1;
console.log(num);
fetchData(); // 接近底部时加载更多数据
}
}, 500);
}
function reset() {
taskpagination.pageNo = 0;
taskpagination.pageSize = 20;
taskDetailPictureList.value.length = 0;
loading.value = false;
canloadMore = true;
}
async function loadMore() {
console.log(loading.value);
if (loading.value) {
const more = await fetchList();
taskDetailPictureList.value.push(...more);
console.log(taskDetailPictureList);
}
}
let canloadMore = true;
async function fetchList() {
try {
pagination.pageNo += 1;
const { data, pageCount, total } = await getSimilarityList({
...pagination,
...sortBy,
pictureId: taskDetailInfo.value.ocrPicture.id,
});
canloadMore = pageCount >= pagination.pageNo && pageCount > 0;
totalCount.value = total;
return data;
} catch (error) {
canloadMore = false;
return [];
}
}
</script>
<template>
<div class="wrapper fullscreen-container" :style="fullscreenStyles">
<div
ref="scrollContainer"
@scroll="checkBottom"
class="wrapper fullscreen-container"
:style="fullscreenStyles"
>
<div class="wrapper-header">
<div class="left">
<span class="font">任务ID：{{ taskDetailInfo.fromtaskname }}</span>
<template v-if="!isDetail">
<SvgIcon size="22" class="forward" name="arrow-left" @click="backHandler" />
<SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
<SvgIcon
size="22"
class="forward"
name="arrow-left"
@click="backHandler"
/>
<SvgIcon
size="22"
class="back"
name="arrow-right"
@click="forwardHandler"
/>
</template>
</div>
<div v-if="!isDetail" class="right">
@ -601,13 +731,47 @@ function closePassno() {
</n-button>
</div>
</div>
<div class="wrapper-detail">
<div
class="wrapper-detail"
:style="
isFullScreen
? {
height: '596px',
}
: {}
"
>
<div
v-show="!imgbigshow"
class="aside-collapse-btn"
@click="collapseHandler"
:style="{
position: 'fixed',
right: '0px',
top: '155px',
cursor: 'pointer',
zIndex:100
}"
>
<SvgIcon
:name="false ? 'expand-cir' : 'collapse-cir'"
size="40"
@click="changeimgbigshow"
/>
</div>
<div
class="left"
:style="
isFullScreen
? imgbigshow
? {
height: '395px',
position: 'relative',
flex: 2,
'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
}
: {
height: '92vh',
flex: 2,
'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
}
: {
@ -662,10 +826,18 @@ function closePassno() {
/>
</div>
<div class="mark">
<SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 0" size="128" name="jia" />
<SvgIcon
v-show="taskDetailInfo?.iztrueorfalse === 0"
size="128"
name="jia"
/>
</div>
<div class="mark">
<SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 1" size="128" name="zhen" />
<SvgIcon
v-show="taskDetailInfo?.iztrueorfalse === 1"
size="128"
name="zhen"
/>
</div>
<div class="big-mark" />
<div class="preview" @click="previewHandler">
@ -675,7 +847,11 @@ function closePassno() {
<n-grid x-gap="12" y-gap="10" :cols="12">
<n-gi span="4" class="gi1">
<span>
<img class="icon-status" src="@/assets/images/task/status.png" alt="" />
<img
class="icon-status"
src="@/assets/images/task/status.png"
alt=""
/>
</span>
</n-gi>
<n-gi span="8" class="gi2">
@ -694,21 +870,36 @@ function closePassno() {
</span>
</n-gi>
<n-gi span="8" class="gi2">
<span class="value num">{{ totalCount }}<span class="unit">张</span> </span>
<span class="value num"
>{{ totalCount }}<span class="unit">张</span>
</span>
<span class="label">相似匹配</span>
</n-gi>
</n-grid>
</div>
<div class="time">
<div class="time-item">
<SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
<span>{{ taskDetailInfo?.ocrPicture?.photoDateTimestamp ?? "-" }}</span>
<SvgIcon
class="svg-time"
color="#FFF"
size="16"
name="camera-time"
/>
  <span>{{ taskDetailInfo?.ocrPicture?.photoDateTimestamp ?? "-" }}</span>
</div>
<div class="time-item time-item2">
<SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />
<SvgIcon
class="svg-time"
color="#FFF"
size="16"
name="submit-time"
/>
<span>{{
taskDetailInfo?.ocrPicture?.submitDateTimestamp
? formatToDateHMS(Number(taskDetailInfo.ocrPicture.submitDateTimestamp))
? formatToDateHMS(
Number(taskDetailInfo.ocrPicture.submitDateTimestamp)
)
: "-"
}}</span>
</div>
@ -722,7 +913,36 @@ function closePassno() {
</div>
<div class="leftback"></div>
</div>
<div class="right">
<div
class="right"
v-show="imgbigshow"
:style="
isFullScreen
? {
width: '320px',
borderLeft: '2px solid #507AFD',
position: 'relative',
}
: {}
"
>
<div
v-show="isFullScreen"
class="aside-collapse-btn"
@click="collapseHandler"
:style="{
position: 'absolute',
left: '-20px',
top: '85px',
cursor: 'pointer',
}"
>
<SvgIcon
:name="true ? 'expand-cir' : 'collapse-cir'"
size="40"
@click="changeimgbigshow"
/>
</div>
<n-scrollbar v-if="totalCount > 0" style="max-height: 100%">
<div class="right-card">
<div class="header" v-show="!isFullScreen">
@ -776,7 +996,12 @@ function closePassno() {
/>
<div class="time">
<div class="time-item">
<SvgIcon class="svg-time" color="#FFF" size="8" name="camera-time" />
<SvgIcon
class="svg-time"
color="#FFF"
size="8"
name="camera-time"
/>
<span>{{
item.photoDateTimestamp
? formatToDateHMS(Number(item.photoDateTimestamp))
@ -784,7 +1009,12 @@ function closePassno() {
}}</span>
</div>
<div class="time-item time-item2">
<SvgIcon class="svg-time" color="#FFF" size="8" name="submit-time" />
<SvgIcon
class="svg-time"
color="#FFF"
size="8"
name="submit-time"
/>
<span>{{
item.submitDateTimestamp
? formatToDateHMS(Number(item.submitDateTimestamp))
@ -853,10 +1083,16 @@ function closePassno() {
{{ item[0].value }}
</div>
</div>
<div class="viewlabel" v-if="!(item[0].label == '拜访终端名称')">
<div
class="viewlabel"
v-if="!(item[0].label == '拜访终端名称')"
>
{{ item[0].label }}
</div>
<div class="viewvalue" v-if="!(item[0].label == '拜访终端名称')">
<div
class="viewvalue"
v-if="!(item[0].label == '拜访终端名称')"
>
{{ item[0].value }}
</div>
<div
@ -897,7 +1133,14 @@ function closePassno() {
</n-tab-pane>
</n-tabs>
<div v-else class="imgbottom">
<div style="display: flex; justify-content: space-between; padding: 12px 0px 3px 0">
<div
v-show="imgbigshow"
style="
display: flex;
justify-content: space-between;
padding: 12px 0px 3px 0;
"
>
<div>
<span
style="
@ -930,7 +1173,7 @@ function closePassno() {
</div>
</div>
</div>
<div class="allview">
<div class="allview" v-show="imgbigshow">
<div class="list">
<div
v-for="item in taskDetailPictureList"
@ -991,7 +1234,12 @@ function closePassno() {
/>
<div class="time">
<div class="time-item">
<SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />
<SvgIcon
class="svg-time"
color="#FFF"
size="16"
name="camera-time"
/>
<span>{{
item.photoDateTimestamp
? formatToDateHMS(Number(item.photoDateTimestamp))
@ -999,7 +1247,12 @@ function closePassno() {
}}</span>
</div>
<div class="time-item time-item2">
<SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />
<SvgIcon
class="svg-time"
color="#FFF"
size="16"
name="submit-time"
/>
<span>{{
item.submitDateTimestamp
? formatToDateHMS(Number(item.submitDateTimestamp))
@ -1007,7 +1260,10 @@ function closePassno() {
}}</span>
</div>
</div>
<div :class="{ 'percent-red': item.similarityScore === 100 }" class="percent">
<div
:class="{ 'percent-red': item.similarityScore === 100 }"
class="percent"
>
{{ item.similarityScore }}<span class="percent-unit">%</span>
</div>
</div>
@ -1094,14 +1350,24 @@ function closePassno() {
</div>
</div>-->
</div>
<NotPassed ref="notPassModalRef" @success="notPassSuccess" @close="closePassno" />
<BatchModal ref="batchModalRef" @reject="rejectHandler" @approval="approvalHandler" />
<NotPassed
ref="notPassModalRef"
@success="notPassSuccess"
@close="closePassno"
/>
<BatchModal
ref="batchModalRef"
@reject="rejectHandler"
@approval="approvalHandler"
/>
<CustomSettingModal ref="CustomSettingModalRef" @on-ok="getDetail" />
</div>
</template>
<style lang="less" scoped>
.fullscreen-container {
overflow-y: auto;
/* 可添加其他样式 */
width: 100vw;
height: 100vh;
@ -1753,6 +2019,8 @@ function closePassno() {
max-width: 650px;
}
.allview {
// overflow-y: auto;
//height: 400px;
flex: 0.5;
background: #f6f9fd;
border-radius: 8px;
@ -1801,7 +2069,11 @@ function closePassno() {
.small-mark {
width: 100%;
height: 53px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.44) 88%);
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.01),
rgba(0, 0, 0, 0.44) 88%
);
border-radius: 0px 8px 8px 8px;
position: absolute;
left: 0;

3
src/views/task/index.vue
Unescape View File

@ -29,6 +29,9 @@ function setAsideItemName(text) {
</template>
<style lang="less" scoped>
:deep(.wrapper){
top:0
}
.main {
display: flex;
flex-direction: row;

Write Preview
Loading…
Cancel
Save