刘释隆 1 year ago
commit 3043be633c

@ -117,9 +117,10 @@ export async function getPictureList(params: any): Promise<any> {
headers: { 'Content-Type': ContentTypeEnum.FORM_DATA },
})
const { data: { records, pages } } = res
const { data: { records, pages, total } } = res
return {
pageCount: pages,
data: records,
total,
}
}

@ -87,6 +87,7 @@ export async function getTaskDetailPictureList(packageid: string, taskchildpictu
assignee: item.assignee,
pictureid: item.pictureid,
imgurl: item.ocrPicture.imgurl,
thumburl: item.serverThumbnailUrl || item.ocrPicture.imgurl,
iztrueorfalse: item.iztrueorfalse,
states: item.states,
history: hasHistory(item.ocpictureid, item.picturecompare),

@ -134,16 +134,8 @@ function scrollHandler(key: string) {
element?.scrollIntoView(true)
}
//
function filterHandler(filterList: Filter[]) {
const filerMap: Record<string, any> = {}
for (const filter of filterList) {
const { key, value } = filter
filerMap[key] = value
}
emitter.emit('filter-final', filerMap)
function filterHandler(searchId: string) {
emitter.emit('filter-final', searchId)
}
function editFilter(filter: any) {

@ -17,8 +17,9 @@ const props = defineProps({
})
const actionConfig = {
1: [{ label: '查看', key: 'view' }, { label: '重置审批', key: 'reset' }],
5: [{ label: '通过', key: 'approval' }, { label: '不通过', key: 'reject' }, { label: '重置审批', key: 'reset' }],
3: [{ label: '查看', key: 'view' }, { label: '重置审批', key: 'reset' }],
4: [{ label: '查看', key: 'view' }, { label: '重置审批', key: 'reset' }],
2: [{ label: '通过', key: 'approval' }, { label: '不通过', key: 'reject' }, { label: '重置审批', key: 'reset' }],
}
const actions = computed(() => {

@ -130,15 +130,14 @@ const pagination = reactive({
})
const tableData = ref<Array<RowData>>([])
const selectionIds = ref<DataTableRowKey[]>([])
const userStore = useUser()
const dialog = useDialog()
const message = useMessage()
const finalStore = useFinal()
async function query(page: number, pageSize: number, filterValues?: any) {
async function query(page: number, pageSize: number, filterId?: any) {
const asideParmas = unref(finalStore.getAsideValue)
// 使使
const params = filterValues || asideParmas
const params = filterId ? { userSearchId: filterId } : asideParmas
const result = await getFinalList({ sortorder: 'asc', pageSize, currPage: page, sortname: '', ...params })
const { data, pageCount } = result
tableData.value = data
@ -404,9 +403,9 @@ function reset() {
pagination.pageSize = 1
}
async function refreshHandler(filterValues?: any) {
async function refreshHandler(searchId?: any) {
reset()
query(pagination.page, pagination.pageSize, filterValues)
query(pagination.page, pagination.pageSize, searchId)
}
</script>

@ -133,15 +133,8 @@ function scrollHandler(key: string) {
}
//
function filterHandler(filterList: Filter[]) {
const filerMap: Record<string, any> = {}
for (const filter of filterList) {
const { key, value } = filter
filerMap[key] = value
}
emitter.emit('filter', filerMap)
function filterHandler(searchId: string) {
emitter.emit('filter', searchId)
}
function editFilter(filter: any) {

@ -46,6 +46,7 @@ function generateDefaultConfig(): FilterEntity[] {
if (isDefaultFilter === true) {
const config = {
id: '',
name: label,
favorite: false,
isDefaultFilter,

@ -26,7 +26,7 @@ const el = ref<HTMLDivElement | null>(null)
const viewMode = ref('masonry')
const pagination = reactive({
pageNo: 0,
pageSize: 50,
pageSize: 30,
})
const configStore = useConfig()
const packageModalRef = ref(null)
@ -34,6 +34,7 @@ const generateModalRef = ref(null)
const LoginSuccessModalRef = ref(null)
const loading = ref(false)
const message = useMessage()
const totalCount = ref(0)
let canloadMore = true
let filterId = null
@ -130,12 +131,14 @@ async function featchList() {
const asideParams = unref(configStore.getAsideValue)
const params = filterId ? { userSearchId: filterId } : asideParams
const result = await getPictureList({ ...pagination, ...contentParams, ...params })
const { data, pageCount } = result
const { data, pageCount, total } = result
totalCount.value = total
canloadMore = pageCount >= pagination.pageNo && pageCount > 0
const list = data.map((item) => {
return {
imgUrl: item.imgurl,
thumburl: item.serverThumbnailUrl || item.imgurl,
upname: item.upname,
ocrPictureclass: item.ocrPictureclass,
uphead: item.uphead,
@ -216,7 +219,7 @@ watch(() => configStore.asideValue, (newVal, oldVal) => {
function reset() {
pagination.pageNo = 0
pagination.pageSize = 50
pagination.pageSize = 30
listData.value.length = 0
loading.value = false
canloadMore = true
@ -253,19 +256,22 @@ function getAvatar(url: string): string {
<SvgIcon style="cursor: pointer;" size="105" name="yijianchachong" @click="oneCheck" />
</div>
<div class="wrapper-content">
<div class="form">
<n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click">
<div class="dropdown">
<span>{{ timeLabel || '请选择' }}</span>
<SvgIcon class="gap" name="arrow-botton" size="14" />
</div>
</n-popselect>
<n-popselect v-model:value="viewMode" :options="viewOptions" trigger="click">
<div class="dropdown">
<span>{{ viewLabel || '请选择' }}</span>
<SvgIcon class="gap" name="arrow-botton" size="14" />
</div>
</n-popselect>
<div style="display: flex;justify-content: space-between;">
<div class="form">
<n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click">
<div class="dropdown">
<span>{{ timeLabel || '请选择' }}</span>
<SvgIcon class="gap" name="arrow-botton" size="14" />
</div>
</n-popselect>
<n-popselect v-model:value="viewMode" :options="viewOptions" trigger="click">
<div class="dropdown">
<span>{{ viewLabel || '请选择' }}</span>
<SvgIcon class="gap" name="arrow-botton" size="14" />
</div>
</n-popselect>
</div>
<span>{{ totalCount }}</span>
</div>
<n-spin :show="loading">
<div ref="el" class="scroll" :style="listStyle">
@ -279,7 +285,7 @@ function getAvatar(url: string): string {
> -->
<n-image
class="img" :img-props="{ onClick: hideDownload }"
:class="{ 'img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
:class="{ 'img-fit': viewMode !== 'masonry' }" :src="item.thumburl"
/>
<div class="info">
<div class="left">

@ -1,37 +1,34 @@
<script lang="ts" setup>
import { getAllfieldList } from "@/api/home/filter";
import { audit } from "@/api/task/task";
import { getTaskDetailInfo, getTaskDetailPictureList } from "@/api/work/work";
import { useTask } from "@/store/modules/task";
import { useUser } from "@/store/modules/user";
import { isEmpty } from "@/utils";
import { hideDownload } from "@/utils/image";
import emitter from "@/utils/mitt";
import _ from 'lodash';
import { clone } from "lodash-es";
import { useDialog, useMessage } from "naive-ui";
import { computed, onUnmounted, reactive, ref, unref, watch } from "vue";
import BatchModal from "../modal/BatchModal.vue";
import ConfrimModal from "../modal/ConfrimModal.vue";
import CustomSettingModal from "../modal/CustomSettingModal.vue";
import PictureTable from "./PictureTable.vue";
import TaskTable from "./TaskTable.vue";
import type { ApprovalParam, PictureSortParam } from "/#/api";
const batch = ref(false);
const selectItems = ref<any[]>([]);
const message = useMessage();
const dialog = useDialog();
const confrimModalRef = ref(null);
const batchModalRef = ref(null);
const totalCount = ref(0);
const CustomSettingModalRef = ref(null);
const taskTableData = ref<any[]>([]);
import { clone } from 'lodash-es'
import { useDialog, useMessage } from 'naive-ui'
import { computed, onUnmounted, reactive, ref, unref, watch } from 'vue'
import { isEmpty } from '@/utils'
import BatchModal from '../modal/BatchModal.vue'
import { audit } from '@/api/task/task'
import { getTaskDetailInfo, getTaskDetailPictureList } from '@/api/work/work'
import { useTask } from '@/store/modules/task'
import { useUser } from '@/store/modules/user'
import { hideDownload } from '@/utils/image'
import emitter from '@/utils/mitt'
import ConfrimModal from '../modal/ConfrimModal.vue'
import CustomSettingModal from '../modal/CustomSettingModal.vue'
import PictureTable from './PictureTable.vue'
import TaskTable from './TaskTable.vue'
import type { ApprovalParam, PictureSortParam } from '/#/api'
const batch = ref(false)
const selectItems = ref<any[]>([])
const message = useMessage()
const dialog = useDialog()
const confrimModalRef = ref(null)
const batchModalRef = ref(null)
const totalCount = ref(0)
const CustomSettingModalRef = ref(null)
const sortBy: PictureSortParam = {
orderbyname: "asc",
orderbyvalue: "fromuptime",
};
orderbyname: 'asc',
orderbyvalue: 'fromuptime',
}
function setBatch(value: boolean) {
if (totalCount.value === 0)
@ -39,38 +36,40 @@ function setBatch(value: boolean) {
batch.value = value
if (value === false) {
selectItems.value.forEach((item) => (item.checked = false));
selectItems.value.length = 0;
selectItems.value.forEach(item => (item.checked = false))
selectItems.value.length = 0
}
}
function onCheckChange(checked: any, item: any) {
const index = selectItems.value.indexOf(item);
item.checked = checked;
const index = selectItems.value.indexOf(item)
item.checked = checked
if (index === -1 && checked) selectItems.value.push(item);
else selectItems.value.splice(index, 1);
if (index === -1 && checked)
selectItems.value.push(item)
else selectItems.value.splice(index, 1)
}
const showActions = computed(() => {
return selectItems.value.length > 0 && batch;
});
return selectItems.value.length > 0 && batch
})
const taskpagination = reactive({
pageNo: 1,
pageSize: 10,
});
const taskStore = useTask();
const overTask = ref<any>(null);
const taskDetailInfo = ref<any>({});
const taskDetailPictureList = ref<any[]>([]);
const userStore = useUser();
const imageRef = ref<ComponentElRef | null>();
let processItems: any[] = [];
})
const taskStore = useTask()
const overTask = ref<any>(null)
const taskDetailInfo = ref<any>({})
const taskDetailPictureList = ref<any[]>([])
const userStore = useUser()
const imageRef = ref<ComponentElRef | null>()
let processItems: any[] = []
// states:1234
function validate(items: any[]) {
if (items.length === 0) return "至少选中一个任务";
if (items.length === 0)
return '至少选中一个任务'
// const useInfo = userStore.getUserInfo
// const username = useInfo.loginname
@ -87,200 +86,175 @@ function validate(items: any[]) {
// return ''
// }
return null;
return null
}
function approvalHandler(items?: any) {
let cloneItem: any;
if (batch.value) {
processItems = selectItems.value;
} else if (overTask.value) {
cloneItem = clone(overTask.value);
processItems = [cloneItem];
let cloneItem: any
if (batch.value) { processItems = selectItems.value }
else if (overTask.value) {
cloneItem = clone(overTask.value)
processItems = [cloneItem]
}
if (items !== undefined && !(items instanceof PointerEvent))
processItems = items;
processItems = items
const msg = validate(processItems);
const msg = validate(processItems)
if (msg !== null) {
message.error(msg);
return;
message.error(msg)
return
}
dialog.info({
title: "确认提示",
content: "确认给该任务审批为【通过】吗?",
positiveText: "确定",
negativeText: "取消",
title: '确认提示',
content: '确认给该任务审批为【通过】吗?',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: () => {
approval();
approval()
},
onNegativeClick: () => {},
});
onNegativeClick: () => { },
})
}
function rejectHandler(items?: any) {
let cloneItem: any;
if (batch.value) {
processItems = selectItems.value;
} else if (overTask.value) {
cloneItem = clone(overTask.value);
processItems = [cloneItem];
let cloneItem: any
if (batch.value) { processItems = selectItems.value }
else if (overTask.value) {
cloneItem = clone(overTask.value)
processItems = [cloneItem]
}
if (items !== undefined && !(items instanceof PointerEvent))
processItems = items;
processItems = items
const msg = validate(processItems);
const msg = validate(processItems)
if (msg !== null) {
message.error(msg);
return;
message.error(msg)
return
}
const modal = unref(confrimModalRef)! as any;
modal.showModal();
const modal = unref(confrimModalRef)! as any
modal.showModal()
}
function approval() {
const formIds: string[] = processItems.map((item) => item.id);
const taskIds: string[] = processItems.map((item) => item.taskId);
const tasknames: string[] = processItems.map((item) => item.taskname);
const formIds: string[] = processItems.map(item => item.id)
const taskIds: string[] = processItems.map(item => item.taskId)
const tasknames: string[] = processItems.map(item => item.taskname)
const param: ApprovalParam = {
formid: formIds,
taskId: taskIds,
approvd: true,
taskComment: "approval",
taskComment: 'approval',
taskname: tasknames,
};
}
doAudit(param);
doAudit(param)
}
function doAudit(param: any) {
audit(param).then((res) => {
const { code } = res;
processItems.length = 0;
if (code === "OK") emitter.emit("refresh");
else message.error(res.message);
});
const { code } = res
processItems.length = 0
if (code === 'OK')
emitter.emit('refresh')
else message.error(res.message)
})
}
function reject(idOrDesc: string, backId: string, isOther: boolean) {
const formIds: string[] = processItems.map((item) => item.id);
const taskIds: string[] = processItems.map((item) => item.taskId);
const tasknames: string[] = processItems.map((item) => item.taskname);
const formIds: string[] = processItems.map(item => item.id)
const taskIds: string[] = processItems.map(item => item.taskId)
const tasknames: string[] = processItems.map(item => item.taskname)
const param: ApprovalParam = {
formid: formIds,
taskId: taskIds,
approvd: false,
taskComment: idOrDesc,
taskname: isOther ? tasknames : ["其他"],
};
taskname: isOther ? tasknames : ['其他'],
}
doAudit(param);
doAudit(param)
}
function showModal(modalRef: any) {
const modal = unref(modalRef)! as any;
modal.showModal();
const modal = unref(modalRef)! as any
modal.showModal()
}
function forwardHandler() {
taskStore.forward();
taskStore.forward()
}
function backHandler() {
taskStore.back();
taskStore.back()
}
watch(
() => [taskStore.activeId],
async (newValue, oldValue) => {
const packageid = taskStore.getPackageid;
const taskId = taskStore.getActiveId;
if (isEmpty(taskId)) return;
let listData = [];
taskDetailInfo.value = await getTaskDetailInfo(taskId, packageid);
const reviewType = 3; //
let res = await getAllfieldList(reviewType);
let fieldList = (res as any)?.data;
console.log(taskDetailInfo.value, "taskDetailInfo");
console.log(fieldList, "fieldList");
let showFieldData = taskDetailInfo.value.ocrPicture;
let showFieldKeys = Object.keys(showFieldData);
for (let i in showFieldKeys) {
let key = showFieldKeys[i];
let currentData = fieldList.find((v) => v.name == key);
if (currentData) {
let item = {
label: currentData.fieldDesc,
value: taskDetailInfo.value.ocrPicture[key],
key: currentData.name,
};
listData.push(item);
}
}
taskTableData.value = _.chunk(listData,2);
console.log(taskTableData.value,'taskTableData')
if (!isEmpty(packageid)) {
const { data, total } = await getTaskDetailPictureList(
packageid,
taskId,
{ ...taskpagination, ...sortBy }
);
taskDetailPictureList.value = data;
totalCount.value = total;
} else {
taskDetailPictureList.value.length = 0;
totalCount.value = 0;
}
watch(() => [taskStore.activeId], async (newValue, oldValue) => {
const packageid = taskStore.getPackageid
const taskId = taskStore.getActiveId
if (isEmpty(taskId))
return
taskDetailInfo.value = await getTaskDetailInfo(taskId, packageid)
if (!isEmpty(packageid)) {
const { data, total } = await getTaskDetailPictureList(packageid, taskId, { ...taskpagination, ...sortBy })
taskDetailPictureList.value = data
totalCount.value = total
}
else {
taskDetailPictureList.value.length = 0
totalCount.value = 0
}
);
})
const currentTaskId = computed(() => {
const index = taskStore.getCurrentIndex;
return taskStore.getApprovalList[index]?.formid || "";
});
const index = taskStore.getCurrentIndex
return taskStore.getApprovalList[index]?.formid || ''
})
function overTaskHandle() {
const item = taskDetailInfo.value;
const item = taskDetailInfo.value
if (validate([item]) == null && batch.value === false) overTask.value = item;
if (validate([item]) == null && batch.value === false)
overTask.value = item
}
function leaveTaskHandler() {
overTask.value = null;
overTask.value = null
}
function showActionsModal() {
const modal = unref(CustomSettingModalRef)! as any;
modal.showModal();
const modal = unref(CustomSettingModalRef)! as any
modal.showModal()
}
onUnmounted(() => {
taskStore.reset();
});
taskStore.reset()
})
const mark = computed(() => {
return taskDetailInfo.value.iztrueorfalse === null ? "未标记" : "已标记";
});
return taskDetailInfo.value.iztrueorfalse === null ? '未标记' : '已标记'
})
function immersionHandler() {
taskStore.updateImmersion();
taskStore.updateImmersion()
}
function previewHandler(event: MouseEvent) {
event.stopImmediatePropagation();
event.stopPropagation();
event.stopImmediatePropagation()
event.stopPropagation()
if (imageRef.value) (imageRef.value as any).mergedOnClick();
if (imageRef.value)
(imageRef.value as any).mergedOnClick()
}
function getPercent(pictureid: string) {
@ -312,21 +286,12 @@ function getPercent(pictureid: string) {
/>
</div>
<div class="right">
<div
v-show="!showActions"
style="display: flex; align-items: center"
@click="setBatch(true)"
>
<div v-show="!showActions" style="display: flex;align-items: center;" @click="setBatch(true)">
<div class="btn">
<SvgIcon style="margin-right: 6px" size="14" name="tf" />
<SvgIcon style="margin-right: 6px;" size="14" name="tf" />
批量审批
</div>
<SvgIcon
style="cursor: pointer"
size="20"
name="immersion-model"
@click="immersionHandler"
/>
<SvgIcon style="cursor: pointer;" size="20" name="immersion-model" @click="immersionHandler" />
</div>
<div v-show="showActions" class="batch">
<n-button text @click="setBatch(false)">
@ -335,14 +300,11 @@ function getPercent(pictureid: string) {
</template>
返回
</n-button>
<div
style="cursor: pointer; margin-left: 16px"
@click.stop="rejectHandler"
>
<div style="cursor: pointer;margin-left: 16px;" @click.stop="rejectHandler">
<SvgIcon width="64" height="28" name="a1" />
</div>
<SvgIcon size="24" name="vs" />
<div style="cursor: pointer" @click.stop="approvalHandler">
<div style="cursor: pointer;" @click.stop="approvalHandler">
<SvgIcon width="64" height="28" name="a2" />
</div>
</div>
@ -350,43 +312,21 @@ function getPercent(pictureid: string) {
</div>
<div class="wrapper-detail">
<div
class="left"
:style="{
'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
}"
@mouseover="overTaskHandle"
@mouseleave="leaveTaskHandler"
@click="previewHandler"
class="left" :style="{ 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})` }"
@mouseover="overTaskHandle" @mouseleave="leaveTaskHandler" @click="previewHandler"
>
<div v-show="overTask" class="action">
<SvgIcon style="cursor: pointer;" width="168" height="48" name="r6" @click.stop="approvalHandler" />
<SvgIcon
style="cursor: pointer"
width="168"
height="48"
name="r6"
@click.stop="approvalHandler"
/>
<SvgIcon
style="cursor: pointer; margin-left: 30px"
width="168"
height="48"
name="r7"
style="cursor: pointer;margin-left: 30px;" width="168" height="48" name="r7"
@click.stop="rejectHandler"
/>
</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="info">
<n-grid x-gap="12" y-gap="10" :cols="12">
@ -396,7 +336,7 @@ function getPercent(pictureid: string) {
</span>
</n-gi>
<n-gi span="8" class="gi2">
<span style="font-size: bold; font-size: 18px">{{ mark }}</span>
<span style="font-size: bold;font-size: 18px;">{{ mark }}</span>
<span>审批状态</span>
</n-gi>
<n-gi span="4" class="gi1">
@ -405,9 +345,7 @@ function getPercent(pictureid: string) {
</span>
</n-gi>
<n-gi span="8" class="gi2">
<span style="font-size: bold; font-size: 18px">{{
totalCount
}}</span>
<span style="font-size: bold;font-size: 18px;">{{ totalCount }}</span>
<span>相似匹配</span>
</n-gi>
</n-grid>
@ -416,12 +354,8 @@ function getPercent(pictureid: string) {
<SvgIcon color="#FFF" size="16" name="time" />
<span>2023-09-17 13:09:10</span>
</div>
<div style="display: none">
<n-image
ref="imageRef"
:img-props="{ onClick: hideDownload }"
:src="taskDetailInfo?.ocrPicture?.imgurl"
/>
<div style="display: none;">
<n-image ref="imageRef" :img-props="{ onClick: hideDownload }" :src="taskDetailInfo?.ocrPicture?.imgurl" />
</div>
</div>
<div class="right">
@ -429,22 +363,13 @@ function getPercent(pictureid: string) {
<div class="header">
<span>相似图片({{ totalCount }})</span>
<SvgIcon
style="margin-right: 20px; cursor: pointer"
name="max"
size="24"
style="margin-right: 20px;cursor: pointer;" name="max" size="24"
@click="showModal(batchModalRef)"
/>
</div>
<div class="list">
<div
v-for="(item, index) in taskDetailPictureList"
:key="index"
class="item"
>
<div
class="img-wrapper"
:style="{ 'background-image': `url(${item.imgurl})` }"
/>
<div v-for="(item, index) in taskDetailPictureList" :key="index" class="item">
<div class="img-wrapper" :style="{ 'background-image': `url(${item.thumburl})` }" />
<div class="check">
<n-checkbox
v-show="batch"
@ -465,7 +390,9 @@ function getPercent(pictureid: string) {
<div class="info-header">
<div class="left_box">
<div class="title">填报信息</div>
<div class="title">
填报信息
</div>
<SvgIcon size="12" name="collapse" />
</div>
<div class="right_box" @click="showActionsModal">
@ -475,7 +402,7 @@ function getPercent(pictureid: string) {
</div>
<n-tabs type="line" animated>
<n-tab-pane name="task-info" tab="任务信息">
<TaskTable :data="taskDetailInfo" :taskTableData="taskTableData"/>
<TaskTable :data="taskDetailInfo" />
</n-tab-pane>
<n-tab-pane name="picture-info" tab="图片信息">
<PictureTable :data="taskDetailInfo" />
@ -541,7 +468,7 @@ function getPercent(pictureid: string) {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
color: #FFF;
margin-right: 6px;
cursor: pointer;
}
@ -611,7 +538,7 @@ function getPercent(pictureid: string) {
background: rgba(216, 216, 216, 0.4);
border-radius: 7px;
padding: 10px;
color: #fff;
color: #FFF;
}
.time {
@ -619,7 +546,7 @@ function getPercent(pictureid: string) {
z-index: 3;
left: 2%;
bottom: 2%;
color: #fff;
color: #FFF;
display: flex;
align-items: center;
}
@ -633,7 +560,7 @@ function getPercent(pictureid: string) {
display: flex;
align-items: left;
flex-direction: column;
justify-content: center;
justify-content: center
}
}

@ -27,7 +27,7 @@ const { isLoading } = useInfiniteScroll(
() => {
loadMore()
},
{ distance: 10, interval: 300, canLoadMore: () => {
{ distance: 10, interval: 800, canLoadMore: () => {
// console.log('canloadmore excuted!')
return canloadMore.value
} },

@ -1,7 +1,9 @@
<script lang="ts" setup>
import { computed, onUnmounted, reactive, ref, unref, watch } from 'vue'
import { computed, onMounted, onUnmounted, onUpdated, reactive, ref, unref, watch } from 'vue'
import { useDialog, useMessage } from 'naive-ui'
import { clone, pickBy } from 'lodash-es'
import { clone, debounce, pickBy } from 'lodash-es'
import { useInfiniteScroll } from '@vueuse/core'
import imagesloaded from 'imagesloaded'
import ConfrimModal from '../modal/ConfrimModal.vue'
import type { PictureSortParam, SetTFParam } from '/#/api'
import { useWorkOrder } from '@/store/modules/workOrder'
@ -15,6 +17,7 @@ const selectItems = ref<any[]>([])
const message = useMessage()
const dialog = useDialog()
const totalCount = ref(0)
let _imagesload: any
function setBatch(value: boolean) {
batch.value = value
@ -59,6 +62,11 @@ const taskDetailInfo = ref<any>({})
const taskDetailPictureList = ref<any[]>([])
const confrimModalRef = ref(null)
const imageRef = ref<ComponentElRef | null>()
const listData = ref<any[]>([])
const loading = ref(false)
const el = ref<HTMLDivElement | null>(null)
let canloadMore = true
let processItems: any[] = []
@ -184,16 +192,86 @@ function backHandler() {
workStore.back()
}
function reset() {
taskpagination.pageNo = 0
taskpagination.pageSize = 20
listData.value.length = 0
loading.value = false
canloadMore = true
}
async function refreshHandler() {
reset()
useInfiniteScroll(
el as any,
() => {
loadMore()
},
{ distance: 10, canLoadMore: () => canloadMore },
)
}
async function loadMore() {
if (loading.value || el.value == null)
return
const more = await featchList()
listData.value.push(...more)
}
async function featchList() {
loading.value = true
try {
taskpagination.pageNo += 1
const taskId = selectTask.value.id
const { data, total, pageCount } = await getTaskDetailPictureList(workStore.activeId, taskId, { ...taskpagination, ...sortBy })
totalCount.value = total
canloadMore = pageCount >= taskpagination.pageNo && pageCount > 0
return data
}
catch (error) {
canloadMore = false
return []
}
}
const layout = debounce(() => {
if (el.value == null)
return
_imagesload = imagesloaded('.grid-item')
_imagesload.on('done', (instance) => {
if (!el.value)
return
const scrollHeight = el.value!.scrollHeight
const clientHeight = el.value!.clientHeight
const top = scrollHeight - clientHeight - 100
el.value!.scrollTo({ top, behavior: 'instant' })
loading.value = false
})
_imagesload.on('fail', (instance) => {
message.error('图片错误')
loading.value = false
})
}, 300)
onUpdated(() => {
layout()
})
watch(() => workStore.activeId, async (newValue, oldValue) => {
const taskId = workStore.getActiveId
const packageid = workStore.getActiveId
if (isEmpty(taskId))
if (isEmpty(packageid))
return
const res = await getPackageTaskList(newValue, packagepagination)
const { data } = res
taskList.value = data
if (taskList.value.length > 0)
handleSelect(taskList.value[0])
})
@ -208,21 +286,20 @@ async function handleSelect(item: any) {
const taskId = item.id
taskDetailInfo.value = await getTaskDetailInfo(taskId, workStore.activeId)
const { data, total } = await getTaskDetailPictureList(workStore.activeId, taskId, { ...taskpagination, ...sortBy })
taskDetailPictureList.value = data
totalCount.value = total
const packageid = workStore.getActiveId
if (isEmpty(packageid))
return
refreshHandler()
}
async function sortHandler(orderby: 'pictureResult' | 'fromuptime') {
if (!selectTask.value)
return
taskpagination.pageNo = 1
taskpagination.pageSize = 10
sortBy.orderbyvalue = orderby
const res = await getTaskDetailPictureList(workStore.activeId, selectTask.value.id, { ...taskpagination, ...sortBy })
taskDetailPictureList.value = res.data
refreshHandler()
}
const propertys = computed(() => {
@ -273,7 +350,7 @@ function getPercent(pictureid: string) {
const index = ocpictureid.split(',').indexOf(String(pictureid))
const results = pictureresult.split(',')
const percent = results[index] || '0'
const val = Number.parseFloat(percent)
const val = Math.floor(Number.parseFloat(percent))
return `${val}%`
}
@ -292,8 +369,6 @@ function previewHandler(event: MouseEvent) {
if (imageRef.value)
(imageRef.value as any).mergedOnClick()
}
const count = computed(() => taskDetailPictureList.value.length)
</script>
<template>
@ -334,110 +409,115 @@ const count = computed(() => taskDetailPictureList.value.length)
</div>
</div>
</div>
<div class="wrapper-detail">
<div
class="left" :style="{ 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})` }"
@click="previewHandler"
>
<div class="mark">
<SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 0" size="128" name="jia" />
</div>
<div class="mark">
<SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 1" size="128" name="zhen" />
</div>
<div class="info">
<n-grid x-gap="16" y-gap="0" :cols="12">
<n-gi span="4">
<span style="color:#8b8d8f;">
<SvgIcon name="m1" />
</span>
</n-gi>
<n-gi span="8" style="display: flex;align-items: left;flex-direction: column;justify-content: center;">
<span>{{ mark }}</span>
<span>图片标记</span>
</n-gi>
<n-gi span="4">
<span style="color:#8b8d8f;">
<SvgIcon name="m2" />
</span>
</n-gi>
<n-gi span="8" style="display: flex;align-items: left;flex-direction: column;justify-content: center;">
<span>{{ totalCount }}</span>
<span>相似匹配</span>
</n-gi>
</n-grid>
</div>
<div style="display: none;">
<n-image ref="imageRef" :img-props="{ onClick: hideDownload }" :src="taskDetailInfo?.ocrPicture?.imgurl" />
</div>
</div>
<div class="right">
<n-scrollbar style="max-height: 100%;">
<span class="name">图片名称</span>
<div class="tags">
<div class="tag tag-actived">
重复图片
<n-spin :show="loading">
<div ref="el" class="scroll">
<div class="wrapper-detail">
<div
class="left" :style="{ 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})` }"
@click="previewHandler"
>
<div class="mark">
<SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 0" size="128" name="jia" />
</div>
<div class="tag">
基线任务
<div class="mark">
<SvgIcon v-show="taskDetailInfo?.iztrueorfalse === 1" size="128" name="zhen" />
</div>
<div class="info">
<n-grid x-gap="16" y-gap="0" :cols="12">
<n-gi span="4">
<span style="color:#8b8d8f;">
<SvgIcon name="m1" />
</span>
</n-gi>
<n-gi span="8" style="display: flex;align-items: left;flex-direction: column;justify-content: center;">
<span>{{ mark }}</span>
<span>图片标记</span>
</n-gi>
<n-gi span="4">
<span style="color:#8b8d8f;">
<SvgIcon name="m2" />
</span>
</n-gi>
<n-gi span="8" style="display: flex;align-items: left;flex-direction: column;justify-content: center;">
<span>{{ totalCount }}</span>
<span>相似匹配</span>
</n-gi>
</n-grid>
</div>
<div style="display: none;">
<n-image ref="imageRef" :img-props="{ onClick: hideDownload }" :src="taskDetailInfo?.ocrPicture?.imgurl" />
</div>
</div>
<n-divider />
<div class="property">
<span class="property-name top" style="font-weight: bold;color: #333333;">拜访终端
</span>
<span style="font-weight: bold;color: #333333;font-size: 16px;">拜访终端</span>
</div>
<div v-for="(key) in Object.keys(propertys)" :key="key" class="property">
<span class="property-name">{{ fieldMap[key] }}</span>
<span class="property-content ">{{ propertys[key] }}</span>
<div class="right">
<n-scrollbar style="max-height: 100%;">
<span class="name">图片名称</span>
<div class="tags">
<div class="tag tag-actived">
重复图片
</div>
<div class="tag">
基线任务
</div>
</div>
<n-divider />
<div class="property">
<span class="property-name top" style="font-weight: bold;color: #333333;">拜访终端
</span>
<span style="font-weight: bold;color: #333333;font-size: 16px;">拜访终端</span>
</div>
<div v-for="(key) in Object.keys(propertys)" :key="key" class="property">
<span class="property-name">{{ fieldMap[key] }}</span>
<span class="property-content ">{{ propertys[key] }}</span>
</div>
</n-scrollbar>
</div>
</n-scrollbar>
</div>
</div>
<div style="display: flex;justify-content: space-between;padding: 12px 0px;">
<div><span style="font-size: 21px;font-weight: bold;">相似图片</span><span>({{ count }})</span></div>
<div style="display: flex;align-items: center;" @click="sortHandler('fromuptime')">
<div style="cursor: pointer;">
<span>按时间排序</span>
<SvgIcon style="margin-left: 8px;" name="sort" size="12" />
</div>
<div style="margin-left: 15px;cursor: pointer" @click="sortHandler('pictureResult')">
<span>相似度排序</span>
<SvgIcon style="margin-left: 8px;" name="sort" size="12" />
</div>
</div>
</div>
<div class="wrapper-list">
<div
v-for="(item, index) in taskDetailPictureList" :key="index" :class="{ 'item-selected': item === selectTask }"
class="item" @click="handleSelect(item)" @mouseover="overTaskHandelr(item)" @mouseleave="leaveTaskHandler"
>
<div class="img-wrapper" :style="{ 'background-image': `url(${item.imgurl})` }" />
<div class="check">
<n-checkbox
v-show="batch" v-model:checked="item.checked" @click.stop
@update:checked="onCheckChange($event, item)"
/>
</div>
<div class="percent">
<SvgIcon size="42" name="tag" />
<div class="val">
{{ getPercent(item.pictureid) }}
<div style="display: flex;justify-content: space-between;padding: 12px 0px;">
<div><span style="font-size: 21px;font-weight: bold;">相似图片</span><span>({{ totalCount }})</span></div>
<div style="display: flex;align-items: center;">
<div style="cursor: pointer;" @click="sortHandler('fromuptime')">
<span>按时间排序</span>
<SvgIcon style="margin-left: 8px;" name="sort" size="12" />
</div>
<div style="margin-left: 15px;cursor: pointer" @click="sortHandler('pictureResult')">
<span>相似度排序</span>
<SvgIcon style="margin-left: 8px;" name="sort" size="12" />
</div>
</div>
</div>
<div class="mark">
<SvgIcon v-show="item.iztrueorfalse === 0" name="jia" />
</div>
<div class="mark">
<SvgIcon v-show="item.iztrueorfalse === 1" name="zhen" />
</div>
<div v-show="overTask && overTask.id === item.id" class="action">
<SvgIcon style="cursor: pointer;" name="t1" @click.stop="trueHandler" />
<SvgIcon style="cursor: pointer;" name="t2" @click.stop="falseHandler" />
<div class="wrapper-list">
<div
v-for="(item, index) in listData" :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.thumburl})` }" />
<div class="check">
<n-checkbox
v-show="batch" v-model:checked="item.checked" @click.stop
@update:checked="onCheckChange($event, item)"
/>
</div>
<div class="percent">
<SvgIcon size="42" name="tag" />
<div class="val">
{{ getPercent(item.pictureid) }}
</div>
</div>
<div class="mark">
<SvgIcon v-show="item.iztrueorfalse === 0" name="jia" />
</div>
<div class="mark">
<SvgIcon v-show="item.iztrueorfalse === 1" name="zhen" />
</div>
<div v-show="overTask && overTask.id === item.id" class="action">
<SvgIcon style="cursor: pointer;" name="t1" @click.stop="trueHandler" />
<SvgIcon style="cursor: pointer;" name="t2" @click.stop="falseHandler" />
</div>
</div>
</div>
</div>
</div>
</n-spin>
<ConfrimModal ref="confrimModalRef" @commit="setFalse" />
</div>
</template>
@ -453,8 +533,11 @@ const count = computed(() => taskDetailPictureList.value.length)
background: #FFF;
border-radius: 3px;
border: 1px solid rgb(239, 239, 245);
height: calc(100vh - 88px);
overflow-y: scroll;
.scroll {
height: calc(100vh - 88px - 72px);
overflow-y: scroll;
}
&-header {
display: flex;
@ -635,7 +718,7 @@ const count = computed(() => taskDetailPictureList.value.length)
background-color: #FFF;
}
.item {
.grid-item {
box-sizing: border-box;
border-radius: 8px;
padding: 9px 10px;

Loading…
Cancel
Save