From b319a1807270e5b95b0d5ad1221b8a0053e54055 Mon Sep 17 00:00:00 2001 From: liushilong <2224574157@qq.com> Date: Mon, 15 Apr 2024 14:45:20 +0800 Subject: [PATCH 01/14] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=85=A8?= =?UTF-8?q?=E5=B1=80=E6=90=9C=E7=B4=A2=E4=BB=BB=E5=8A=A1=E5=AE=A1=E6=89=B9?= =?UTF-8?q?=E6=A8=A1=E5=9D=97=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/task/content/Content.vue | 931 +++++++++++++---------------- 1 file changed, 419 insertions(+), 512 deletions(-) diff --git a/src/views/task/content/Content.vue b/src/views/task/content/Content.vue index 3644816..673556d 100644 --- a/src/views/task/content/Content.vue +++ b/src/views/task/content/Content.vue @@ -8,207 +8,207 @@ import { ref, unref, watch, -} from "vue"; -import { chunk, clone } from "lodash-es"; -import { useDialog, useMessage } from "naive-ui"; -import { useRoute, useRouter } from "vue-router"; -import { useInfiniteScroll } from "@vueuse/core"; -import BatchModal from "../modal/BatchModal.vue"; -import CustomSettingModal from "../modal/CustomSettingModal.vue"; -import PictureTable from "./PictureTable.vue"; -import TaskTable from "./TaskTable.vue"; -import History from "./History.vue"; -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"; +} from 'vue' +import { chunk, clone } from 'lodash-es' +import { useDialog, useMessage } from 'naive-ui' +import { useRoute, useRouter } from 'vue-router' +import { useInfiniteScroll } from '@vueuse/core' +import BatchModal from '../modal/BatchModal.vue' +import CustomSettingModal from '../modal/CustomSettingModal.vue' +import PictureTable from './PictureTable.vue' +import TaskTable from './TaskTable.vue' +import History from './History.vue' +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 { audit, dubiousfileyd, getSimilarityList, getTaskDetailInfo, -} from "@/api/task/task"; -import { useTask } from "@/store/modules/task"; -import { useUser } from "@/store/modules/user"; -import { isEmpty } from "@/utils"; -import { formatToDateHMS } from "@/utils/dateUtil"; -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([]); -const message = useMessage(); -const dialog = useDialog(); -const notPassModalRef = ref(null); -const batchModalRef: any = ref(null); -const totalCount = ref(0); -const taskId: any = ref(""); // 任务id -const packageId: any = ref(""); // 包id -const CustomSettingModalRef = ref(null); -const taskTableData = ref([]); -const route = useRoute(); -const isDetail = ref(false); // 是否是详情 -const finalStore = useFinal(); -const imgbigshow = ref(true); +} from '@/api/task/task' +import { useTask } from '@/store/modules/task' +import { useUser } from '@/store/modules/user' +import { isEmpty } from '@/utils' +import { formatToDateHMS } from '@/utils/dateUtil' +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([]) +const message = useMessage() +const dialog = useDialog() +const notPassModalRef = ref(null) +const batchModalRef: any = ref(null) +const totalCount = ref(0) +const taskId: any = ref('') // 任务id +const packageId: any = ref('') // 包id +const CustomSettingModalRef = ref(null) +const taskTableData = ref([]) +const route = useRoute() +const isDetail = ref(false) // 是否是详情 +const finalStore = useFinal() +const imgbigshow = ref(true) const sortBy: any = { - orderType: "desc", - orderName: "similarityScore", -}; -const el = ref(null); + orderType: 'desc', + orderName: 'similarityScore', +} +const el = ref(null) const pagination = reactive({ pageNo: 0, pageSize: 30, -}); +}) 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: 30, -}); -const taskStore = useTask(); -const overTask = ref(null); -const overTasktwo = ref(null); -const taskDetailInfo = ref({}); -const taskDetailPictureList = ref([]); -const userStore = useUser(); -const imageRef = ref(); -let processItems: any[] = []; -const isFullScreen = ref(false); +}) +const taskStore = useTask() +const overTask = ref(null) +const overTasktwo = ref(null) +const taskDetailInfo = ref({}) +const taskDetailPictureList = ref([]) +const userStore = useUser() +const imageRef = ref() +let processItems: any[] = [] +const isFullScreen = ref(false) const fullscreenStyles = computed(() => ({ - width: isFullScreen.value ? "100vw" : "", - height: isFullScreen.value ? "100vh" : "", - position: isFullScreen.value ? "fixed" : "", - top: isFullScreen.value ? "0" : "", - left: isFullScreen.value ? "0" : "", - zIndex: isFullScreen.value ? "100" : "", -})); + width: isFullScreen.value ? '100vw' : '', + height: isFullScreen.value ? '100vh' : '', + position: isFullScreen.value ? 'fixed' : '', + top: isFullScreen.value ? '0' : '', + left: isFullScreen.value ? '0' : '', + zIndex: isFullScreen.value ? '100' : '', +})) const fullscreenStylestwo = computed(() => ({ - width: isFullScreen.value ? "100vw" : "", - height: isFullScreen.value ? "100vh" : "", - position: isFullScreen.value ? "fixed" : "", - top: isFullScreen.value ? "0" : "", - left: isFullScreen.value ? "0" : "", - zIndex: isFullScreen.value ? "160" : "", -})); + width: isFullScreen.value ? '100vw' : '', + height: isFullScreen.value ? '100vh' : '', + position: isFullScreen.value ? 'fixed' : '', + top: isFullScreen.value ? '0' : '', + left: isFullScreen.value ? '0' : '', + zIndex: isFullScreen.value ? '160' : '', +})) onMounted(() => { - window.addEventListener("keydown", handleKeydown); + window.addEventListener('keydown', handleKeydown) if (route.query.id) { - taskId.value = route.query.id; - packageId.value = route.query.packageid; - isDetail.value = true; - getDetail(); + taskId.value = route.query.id + packageId.value = route.query.packageid + isDetail.value = true + getDetail() } -}); +}) -let lastKeyPressTime = 0; -let keyPressTimer = null; +let lastKeyPressTime = 0 +let keyPressTimer = null function changeimgbigshow() { - imgbigshow.value = !imgbigshow.value; + imgbigshow.value = !imgbigshow.value } -const doubleClickInterval = 300; // 可以自定义间隔时间，单位是毫秒 +const doubleClickInterval = 300 // 可以自定义间隔时间，单位是毫秒 // 键盘左右箭头快捷切换 function handleKeydown(event) { - if (event.key === "ArrowLeft") { - backHandler(); + if (event.key === 'ArrowLeft') { + backHandler() } // 在这里执行左箭头的逻辑 - else if (event.key === "ArrowRight") { - forwardHandler(); + else if (event.key === 'ArrowRight') { + forwardHandler() } // 在这里执行右箭头的逻辑 else if (event.keyCode === 67) { - isFullScreen.value = false; + isFullScreen.value = false // batchModalRef.value.closeModal() - } else if (event.keyCode === 27) { - overTask.value = null; - overTasktwo.value = null; - } else if (event.key === "p" || event.key === "P") { + } + else if (event.keyCode === 27) { + overTask.value = null + overTasktwo.value = null + } + else if (event.key === 'p' || event.key === 'P') { // 获取当前时间 - const now = Date.now(); + const now = Date.now() // 如果两次按键时间间隔小于我们设定的双击间隔，则认为是双击 if (now - lastKeyPressTime < doubleClickInterval) { // 清除已经设置的定时器（如果有的话） - clearTimeout(keyPressTimer); - const item = taskDetailInfo.value; - if ( - item?.userapprove?.statshis === 2 || - item?.userapprove?.statshis == 3 - ) { - overTask.value = null; - return; + clearTimeout(keyPressTimer) + const item = taskDetailInfo.value + if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) { + overTask.value = null + return } if (validate([item]) == null && batch.value === false) - overTask.value = item; + overTask.value = item // 执行想要的操作 - approvalHandler(); + approvalHandler() // 重置上次按键时间 - lastKeyPressTime = 0; - } else { + lastKeyPressTime = 0 + } + else { // 如果不是双击，则更新上次按键时间，并开始一个新的计时器 - lastKeyPressTime = now; + lastKeyPressTime = now // 通过定时器重置上次按键时间 // 这可以防止如果用户只按了一次键，也会触发双击的情况 - clearTimeout(keyPressTimer); + clearTimeout(keyPressTimer) keyPressTimer = setTimeout(() => { - lastKeyPressTime = 0; - }, doubleClickInterval); + lastKeyPressTime = 0 + }, doubleClickInterval) } - } else if (event.key === "x" || event.key === "X") { + } + else if (event.key === 'x' || event.key === 'X') { // 获取当前时间 - const now = Date.now(); + const now = Date.now() // 如果两次按键时间间隔小于我们设定的双击间隔，则认为是双击 if (now - lastKeyPressTime < doubleClickInterval) { // 清除已经设置的定时器（如果有的话） - clearTimeout(keyPressTimer); - const item = taskDetailInfo.value; - if ( - item?.userapprove?.statshis === 2 || - item?.userapprove?.statshis == 3 - ) { - overTask.value = null; - return; + clearTimeout(keyPressTimer) + const item = taskDetailInfo.value + if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) { + overTask.value = null + return } if (validate([item]) == null && batch.value === false) - overTask.value = item; + overTask.value = item // 执行想要的操作 - const modal = unref(notPassModalRef)! as any; - modal.showModal([taskDetailInfo.value]); + const modal = unref(notPassModalRef)! as any + modal.showModal([taskDetailInfo.value]) // 重置上次按键时间 - lastKeyPressTime = 0; - } else { + lastKeyPressTime = 0 + } + else { // 如果不是双击，则更新上次按键时间，并开始一个新的计时器 - lastKeyPressTime = now; + lastKeyPressTime = now // 通过定时器重置上次按键时间 // 这可以防止如果用户只按了一次键，也会触发双击的情况 - clearTimeout(keyPressTimer); + clearTimeout(keyPressTimer) keyPressTimer = setTimeout(() => { - lastKeyPressTime = 0; - }, doubleClickInterval); + lastKeyPressTime = 0 + }, doubleClickInterval) } } } @@ -217,26 +217,27 @@ function setBatch(value: boolean) { // if (totalCount.value === 0) // return - batch.value = value; + batch.value = value if (value === false) { - taskDetailInfo.value.checked = false; - selectItems.value = []; + taskDetailInfo.value.checked = false + selectItems.value = [] taskDetailPictureList.value.forEach((item) => { - item.checked = false; - }); + item.checked = false + }) } } // 从store里面获取任务id function currentTaskId() { - const index = taskStore.getCurrentIndex; - return taskStore.getApprovalList[index]?.id || ""; + const index = taskStore.getCurrentIndex + return taskStore.getApprovalList[index]?.id || '' } // states:1未提交，2待审批，3通过，4不通过 function validate(items: any[]) { - if (items.length === 0) return "至少选中一个任务"; + if (items.length === 0) + return '至少选中一个任务' // const useInfo = userStore.getUserInfo // const username = useInfo.loginname @@ -253,400 +254,412 @@ function validate(items: any[]) { // return '审批人不一致' // } - return null; + return null } function approvalHandler(items?: any) { - let cloneItem: any; + let cloneItem: any if (batch.value) { - processItems = selectItems.value; - } else if (overTask.value) { - cloneItem = clone(overTask.value); - processItems = [cloneItem]; + 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 } - console.log(processItems); + console.log(processItems) - const list: any = []; + const list: any = [] processItems.forEach((item) => { list.push({ formId: item.id, taskId: item.taskId, taskName: item.fromTaskName, - }); - }); + }) + }) const param = { result: true, - comment: "", - disposeType: "", - disposeTypeId: "", - failCauseId: "", - failCauseName: "", + comment: '', + disposeType: '', + disposeTypeId: '', + failCauseId: '', + failCauseName: '', flowTaskInfoList: list, - }; + } dialog.info({ - title: "确认提示", - content: "确认给该任务审批为【通过】吗?", - positiveText: "确定", - negativeText: "取消", + title: '确认提示', + content: '确认给该任务审批为【通过】吗?', + positiveText: '确定', + negativeText: '取消', onPositiveClick: () => { - doAudit(param); - overTask.value = null; + doAudit(param) + overTask.value = null }, onNegativeClick: () => { - overTask.value = null; + overTask.value = null }, - }); -} -function approvalHandlerx(item?: any) { - console.log(item); - alert(1); + }) } +// function approvalHandlerx(item?: any) { +// console.log(item); +// alert(1); +// } function singleRejectHandlex(item?: any) { - console.log(item); - const modal = unref(notPassModalRef)! as any; + console.log(item) + const modal = unref(notPassModalRef)! as any - modal.showModal([item]); + modal.showModal([item]) } function rejectHandler(items?: any) { - console.log(items); - const modal = unref(notPassModalRef)! as any; - modal.showModal(items); + console.log(items) + const modal = unref(notPassModalRef)! as any + modal.showModal(items) } function singleRejectHandler() { - const modal = unref(notPassModalRef)! as any; - modal.showModal([taskDetailInfo.value]); + const modal = unref(notPassModalRef)! as any + modal.showModal([taskDetailInfo.value]) } function doAudit(param: any) { audit(param).then((res) => { - const { code } = res; - if (code === "OK") { - message.success(res.message); - setBatch(false); - reloadList(param, "通过"); - batchModalRef.value.reload(); + const { code } = res + if (code === 'OK') { + message.success(res.message) + setBatch(false) + reloadList(param, '通过') + batchModalRef.value.reload() } - }); + }) } function showModal(modalRef: any) { - const modal = unref(modalRef)! as any; - modal.showModal(taskId.value); + const modal = unref(modalRef)! as any + modal.showModal(taskId.value) } function forwardHandler() { - taskStore.forward(); + taskStore.forward() } function backHandler() { - taskStore.back(); + taskStore.back() } async function handleDragEnd(event, item) { - console.log(event, item); + console.log(event, item) // 可以在这里添加拖拽结束后的逻辑 - const flag = taskStore.getInFile; + const flag = taskStore.getInFile if (flag) { - const res = await dubiousfileyd({ pictureid: item.pictureId }); - if (res.code === "OK") { - message.success("加入成功"); - setBatch(false); - getTableData(); - getImgList(); + const res = await dubiousfileyd({ pictureid: item.pictureId }) + if (res.code === 'OK') { + message.success('加入成功') + setBatch(false) + getTableData() + getImgList() } - taskStore.setInFile(false); - taskStore.setInFile(item.pictureId); + taskStore.setInFile(false) + taskStore.setInFile(item.pictureId) } } async function addSuspicious() { - taskStore.setInFileId(taskDetailInfo.value.ocrPicture); - console.log(taskDetailInfo.value.ocrPicture); + taskStore.setInFileId(taskDetailInfo.value.ocrPicture) + console.log(taskDetailInfo.value.ocrPicture) if (taskDetailInfo.value.ocrPicture.pictureid) { const res = await dubiousfileyd({ pictureid: taskDetailInfo.value.ocrPicture.id, - }); - - if (res.code === "OK") { - message.success("加入成功"); - setBatch(false); - getTableData(); - getImgList(); - } else { - message.error(res.message); + }) + + if (res.code === 'OK') { + message.success('加入成功') + setBatch(false) + getTableData() + getImgList() + } + else { + message.error(res.message) } - taskStore.setInFile(false); + taskStore.setInFile(false) } } async function getTableData() { - const useInfo = userStore.getUserInfo; - const listData = []; - const reviewType = 3; // 类型 - let res = await getAllfieldList(reviewType); - const fieldList = (res as any)?.data; - res = await getfieldList(reviewType, useInfo.id); - const userFieldList = (res as any)?.data.userFieldFixed; + const useInfo = userStore.getUserInfo + const listData = [] + const reviewType = 3 // 类型 + let res = await getAllfieldList(reviewType) + const fieldList = (res as any)?.data + res = await getfieldList(reviewType, useInfo.id) + const userFieldList = (res as any)?.data.userFieldFixed const blueList = [ - "拜访终端名称", - "定位信息", - "拜访日期", - "定位距离", - "拜访小结", - "拜访项目类别", - ]; + '拜访终端名称', + '定位信息', + '拜访日期', + '定位距离', + '拜访小结', + '拜访项目类别', + ] fieldList.map((v) => { if (userFieldList.includes(v.name)) { - let locationobj = { address: "" }; - if (v.name == "location") - locationobj = JSON.parse(taskDetailInfo.value.ocrPicture[v.name]); - + let locationobj = { address: '' } + if (v.name == 'location') { + locationobj = JSON.parse( + taskDetailInfo.value.ocrPicture ? taskDetailInfo.value.ocrPicture[v.name] : '{}', + ) + } const item = { label: v.fieldDesc, value: - v.name == "location" + v.name == 'location' ? locationobj.address - : taskDetailInfo.value.ocrPicture[v.name], + : taskDetailInfo.value.ocrPicture + ? taskDetailInfo.value.ocrPicture[v.name] + : '', key: v.name, blue: blueList.includes(v.fieldDesc), - }; - listData.push(item); + } + listData.push(item) } - }); - taskTableData.value = chunk(listData, 2); + return v + }) + taskTableData.value = chunk(listData, 2) } async function getImgList() { - if (!isEmpty(taskDetailInfo.value.ocrPicture.id)) { + if (!isEmpty(taskDetailInfo.value.ocrPicture?.id)) { const { data, total } = await getSimilarityList({ ...taskpagination, ...sortBy, pictureId: taskDetailInfo.value.ocrPicture.id, - }); - taskDetailPictureList.value = data; - totalCount.value = total; - } else { - taskDetailPictureList.value.length = 0; - totalCount.value = 0; + }) + taskDetailPictureList.value = data + totalCount.value = total + } + else { + taskDetailPictureList.value.length = 0 + totalCount.value = 0 } } function overTaskHandle() { - const item = taskDetailInfo.value; + const item = taskDetailInfo.value if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) { - overTask.value = null; - return; + overTask.value = null + return } - 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; - overTasktwo.value = null; + overTask.value = null + overTasktwo.value = null } function showActionsModal() { - const modal = unref(CustomSettingModalRef)! as any; - modal.showModal(); + const modal = unref(CustomSettingModalRef)! as any + modal.showModal() } onUnmounted(() => { - taskStore.reset(); - window.removeEventListener("keydown", handleKeydown); -}); + taskStore.reset() + window.removeEventListener('keydown', handleKeydown) +}) function immersionHandler() { - imgbigshow.value = true; + imgbigshow.value = true // taskStore.updateImmersion() - toggleFullScreen(); + toggleFullScreen() } // 切换全屏状态 function toggleFullScreen() { - isFullScreen.value = !isFullScreen.value; + isFullScreen.value = !isFullScreen.value if (isFullScreen.value) { - fetchData(); - window.addEventListener("scroll", checkBottom); - } else { - window.removeEventListener("scroll", checkBottom); + fetchData() + window.addEventListener('scroll', checkBottom) + } + else { + window.removeEventListener('scroll', checkBottom) } } function previewHandler(event: MouseEvent) { - event.stopImmediatePropagation(); - event.stopPropagation(); + event.stopImmediatePropagation() + event.stopPropagation() if (imageRef.value && (imageRef.value as any).src) - (imageRef.value as any).mergedOnClick(); + (imageRef.value as any).mergedOnClick() } watch( () => [taskStore.activeId], () => { if (!isEmpty(taskStore.getActiveId)) { - packageId.value = taskStore.getPackageid; - taskId.value = taskStore.getActiveId; - getDetail(); + packageId.value = taskStore.getPackageid + taskId.value = taskStore.getActiveId + getDetail() } - } -); + }, +) // 获取数据 async function getDetail() { - taskDetailInfo.value = await getTaskDetailInfo(taskId.value, packageId.value); - setBatch(false); - getTableData(); - getImgList(); + taskDetailInfo.value = await getTaskDetailInfo(taskId.value, packageId.value) + setBatch(false) + getTableData() + getImgList() } function notPassSuccess(param) { - batchModalRef.value.reload(); - reloadList(param, "不通过"); - overTask.value = null; + batchModalRef.value.reload() + reloadList(param, '不通过') + overTask.value = null } function reloadList(param, text) { // 修改左侧状态 - const id = currentTaskId(); - const hasCurrentId = param.flowTaskInfoList.find( - (item) => item.formId === id - ); - finalStore.setListKey(); - if (hasCurrentId) emit("setAsideItemName", text); - - getDetail(); + const id = currentTaskId() + const hasCurrentId = param.flowTaskInfoList.find(item => item.formId === id) + finalStore.setListKey() + if (hasCurrentId) + emit('setAsideItemName', text) + + getDetail() } function goBack() { - router.back(); + router.back() } function switchBatch() { - setBatch(!batch.value); + setBatch(!batch.value) } function getrowValue(e) { - if (e.key == "location") { - const locationobj = JSON.parse(taskDetailInfo.value.ocrPicture.location); - const lat = locationobj.lat.$numberDecimal; - const lng = locationobj.lng.$numberDecimal; - const name = e.value; - const protocol = window.location.protocol; - 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}`); + if (e.key == 'location') { + const locationobj = JSON.parse(taskDetailInfo.value.ocrPicture.location) + const lat = locationobj.lat.$numberDecimal + const lng = locationobj.lng.$numberDecimal + const name = e.value + const protocol = window.location.protocol + 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}`) } } function overTaskHandelr(item: any) { if (item?.historyStates === 2 || item?.historyStates == 3) { - overTasktwo.value = null; - return; + overTasktwo.value = null + return } if (validate([item]) == null && batchtwo.value === false) - overTasktwo.value = item; + overTasktwo.value = item } function closePassno() { - console.log(notPassModalRef.value); - overTask.value = null; + console.log(notPassModalRef.value) + overTask.value = null } // const loadingx = ref(false); -const items = ref([]); -const scrollContainer = ref(null); -let debounceTimer; +const items = ref([]) +const scrollContainer = ref(null) +let debounceTimer async function fetchData() { - if (loading.value) return; // 如果已经在加载中，则不重复加载 + if (loading.value) + return // 如果已经在加载中，则不重复加载 - loading.value = true; + loading.value = true try { - loadMore(); - } finally { - loading.value = false; + loadMore() + } + finally { + loading.value = false } } // const throttledCheckScroll = throttle(checkBottom, 200); -let num = 1; +let num = 1 // 检查是否滚动到底部 function checkBottom() { - const container = scrollContainer.value; + const container = scrollContainer.value // console.log(1) - if (!container) return; + if (!container) + return // const { scrollTop, clientHeight, scrollHeight } = container; - const scrollTop = window.pageYOffset || document.documentElement.scrollTop; + const scrollTop = window.pageYOffset || document.documentElement.scrollTop // 获取视口的内部高度 - const clientHeight = - window.innerHeight || document.documentElement.clientHeight; + const clientHeight = window.innerHeight || document.documentElement.clientHeight // 获取整个文档的高度 - const scrollHeight = document.documentElement.scrollHeight; + const scrollHeight = document.documentElement.scrollHeight - clearTimeout(debounceTimer); + clearTimeout(debounceTimer) debounceTimer = setTimeout(() => { if (scrollTop + clientHeight >= scrollHeight - 10) { - num = num + 1; - console.log(num); - fetchData(); // 接近底部时加载更多数据 + num = num + 1 + console.log(num) + fetchData() // 接近底部时加载更多数据 } - }, 500); + }, 500) } async function loadMore() { - console.log(loading.value); + console.log(loading.value) if (loading.value) { - const more = await fetchList(); - taskDetailPictureList.value.push(...more); - console.log(taskDetailPictureList); + const more = await fetchList() + taskDetailPictureList.value.push(...more) + console.log(taskDetailPictureList) } } -let canloadMore = true; +let canloadMore = true async function fetchList() { try { - pagination.pageNo += 1; + 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 []; + }) + canloadMore = pageCount >= pagination.pageNo && pageCount > 0 + totalCount.value = total + return data + } + catch (error) { + canloadMore = false + return [] } } async function reset() { - pagination.pageNo = 0; - pagination.pageSize = 30; - taskDetailPictureList.value.length = 0; - loading.value = false; - canloadMore = true; + pagination.pageNo = 0 + pagination.pageSize = 30 + taskDetailPictureList.value.length = 0 + loading.value = false + canloadMore = true // layout() } async function refreshHandler() { - getImgList(); + getImgList() } -function sortHandler(orderby: "similarityScore" | "createdate") { - sortBy.orderName = orderby; - sortBy.orderType = sortBy.orderType === "asc" ? "desc" : "asc"; - refreshHandler(); +function sortHandler(orderby: 'similarityScore' | 'createdate') { + sortBy.orderName = orderby + sortBy.orderType = sortBy.orderType === 'asc' ? 'desc' : 'asc' + refreshHandler() } @@ -661,18 +674,8 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
任务ID：{{ taskDetailInfo.fromtaskname }}
@@ -735,14 +738,14 @@ function sortHandler(orderby: "similarityScore" | "createdate") { src="@/assets/images/task/btn-not-pass.png" alt="" @click.stop="rejectHandler(selectItems)" - /> + > + >
@@ -759,8 +762,8 @@ function sortHandler(orderby: "similarityScore" | "createdate") { :style=" isFullScreen ? { - height: '596px', - } + height: '596px', + } : {} " > @@ -800,21 +803,21 @@ function sortHandler(orderby: "similarityScore" | "createdate") { isFullScreen ? imgbigshow ? { - position: 'relative', - //width: '70vw', - flex: 1, - // flex: 0.75, - 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`, - } + 'position': 'relative', + //width: '70vw', + 'flex': 1, + // flex: 0.75, + 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`, + } : { - height: '92vh', - flex: 1, + 'height': '92vh', + 'flex': 1, - 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`, - } - : { 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`, } + : { + 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`, + } " @mouseover="overTaskHandle" @mouseleave="leaveTaskHandler" @@ -855,35 +858,23 @@ function sortHandler(orderby: "similarityScore" | "createdate") { class="img-status" src="@/assets/images/task/pass.png" alt="" - /> + > + >
- +
- +
- +
@@ -893,11 +884,7 @@ function sortHandler(orderby: "similarityScore" | "createdate") { - + @@ -912,43 +899,27 @@ function sortHandler(orderby: "similarityScore" | "createdate") { class="icon-status" src="@/assets/images/task/similarity.png" alt="" - /> + > - {{ totalCount }}张 - + {{ totalCount }}张 相似匹配
- + - {{ - taskDetailInfo?.ocrPicture?.photoDateTimestamp ?? "-" - }} + {{ taskDetailInfo?.ocrPicture?.photoDateTimestamp ?? "-" }}
- + {{ taskDetailInfo?.ocrPicture?.submitDateTimestamp - ? formatToDateHMS( - Number(taskDetailInfo.ocrPicture.submitDateTimestamp) - ) + ? formatToDateHMS(Number(taskDetailInfo.ocrPicture.submitDateTimestamp)) : "-" }}
@@ -968,14 +939,14 @@ function sortHandler(orderby: "similarityScore" | "createdate") { :style=" isFullScreen ? { - flex: 0.3, - // flex: 0, - //width: '30vw', - borderLeft: '2px solid #507AFD', - position: 'relative', - borderRadius: 0, - height: '596px', - } + flex: 0.3, + // flex: 0, + //width: '30vw', + borderLeft: '2px solid #507AFD', + position: 'relative', + borderRadius: 0, + height: '596px', + } : { flex: 0.5 } " > @@ -1040,21 +1011,16 @@ function sortHandler(orderby: "similarityScore" | "createdate") { class="tag-status" src="@/assets/images/task/tag-pass.png" alt="" - /> + > + >
- + {{ item.photoDateTimestamp ? formatToDateHMS(Number(item.photoDateTimestamp)) @@ -1062,12 +1028,7 @@ function sortHandler(orderby: "similarityScore" | "createdate") { }}
- + {{ item.submitDateTimestamp ? formatToDateHMS(Number(item.submitDateTimestamp)) @@ -1095,7 +1056,9 @@ function sortHandler(orderby: "similarityScore" | "createdate") { width: 20vw; " > - {{ taskDetailInfo.fromtaskname }} + + {{ taskDetailInfo.fromtaskname }} +
@@ -1157,16 +1120,10 @@ function sortHandler(orderby: "similarityScore" | "createdate") { {{ item[0].value }}
-
+
{{ item[0].label }}
-
+
{{ item[0].value }}
相似图片({{ totalCount }}) + >相似图片({{ totalCount }})
时间排序 - - + +
相似度排序 - - + +
@@ -1322,21 +1254,16 @@ function sortHandler(orderby: "similarityScore" | "createdate") { class="tag-status" src="@/assets/images/task/tag-pass.png" alt="" - /> + > + >
- + {{ item.photoDateTimestamp ? formatToDateHMS(Number(item.photoDateTimestamp)) @@ -1344,12 +1271,7 @@ function sortHandler(orderby: "similarityScore" | "createdate") { }}
- + {{ item.submitDateTimestamp ? formatToDateHMS(Number(item.submitDateTimestamp)) @@ -1357,10 +1279,7 @@ function sortHandler(orderby: "similarityScore" | "createdate") { }}
-
+
{{ item.similarityScore }}%
@@ -1447,16 +1366,8 @@ function sortHandler(orderby: "similarityScore" | "createdate") {
-->
- - + +
@@ -2165,11 +2076,7 @@ function sortHandler(orderby: "similarityScore" | "createdate") { .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; From 9bcc0a642552f9ff6d9f367073f003c915187295 Mon Sep 17 00:00:00 2001 From: lihui_ocr Date: Mon, 15 Apr 2024 15:41:47 +0800 Subject: [PATCH 02/14] =?UTF-8?q?feat:=E5=8D=A1=E7=89=87=E9=A1=B5=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E4=B8=8E=E9=80=9A=E8=BF=87=E5=90=8E=E7=8A=B6=E6=80=81?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/final/content/ListContent.vue | 316 +++++++++++++++++------- 1 file changed, 222 insertions(+), 94 deletions(-) diff --git a/src/views/final/content/ListContent.vue b/src/views/final/content/ListContent.vue index a7fa77c..4e4474d 100644 --- a/src/views/final/content/ListContent.vue +++ b/src/views/final/content/ListContent.vue @@ -19,9 +19,10 @@ const sortorder = ref("asc"); const sortname = ref("states"); const loading = ref(true); const total = ref(0); - +const scrollContainer=ref(null); const tableData = ref([]); const finalStore = useFinal(); +let num = 1; const pagination = reactive({ page: 1, pageCount: 20, @@ -40,8 +41,40 @@ const initRem = () => { document.documentElement.style.fontSize = scale * rempPx + "px"; }; -function initData() { - query(1, 10); +async function initData( page: number, + pageSize: number, + filterId?: any, + taskName?: string) { + const asideParmas = unref(finalStore.getAsideValue); + // 有过滤配置的时候优先使用过滤配置，不要使用左侧参数 + // let params = filterId ? { userSearchId: filterId } : asideParmas + let params = asideParmas; + params = params?.izshowall ? {} : params; + + const result = await getFinalList({ + sortorder: sortorder.value, + pageSize, + currPage: page, + sortname: sortname.value, + taskName, + //isFail: true, + ...params, + }); + const { data, pageCount, totalCount } = result; + console.log(data, pageCount, totalCount); +//tableData.value = tableData.value.concat(data); + tableData.value = data; +console.log(tableData.value) + total.value = totalCount; + pagination.page = page; + pagination.pageCount = Math.ceil(totalCount / pageSize); + loading.value = false; + tableData.value.map((item) => { + if(isValidTimestamp(item.createdate)){ + item.createdate = formatToDateHMS(item.createdate); + }}); + + tableData.value = chunk(tableData.value, 4); } async function query( page: number, @@ -63,23 +96,51 @@ async function query( currPage: page, sortname: sortname.value, taskName, + //isFail: true, ...params, }); const { data, pageCount, totalCount } = result; console.log(data, pageCount, totalCount); - - tableData.value = data; - + let newlist=[] +let oldlist= tableData.value +if(oldlist.length>0){ + oldlist.map((item)=>{ + console.log(item) + if(item.length>0){ +item.map((itemx:any)=>{ + newlist.push(itemx) +}) + } + }) + data.map((item)=>{ +newlist.push(item) + }) + +}else{ + newlist=data +} +//tableData.value = tableData.value.concat(data); + tableData.value = newlist; +console.log(tableData.value) total.value = totalCount; pagination.page = page; pagination.pageCount = Math.ceil(totalCount / pageSize); loading.value = false; tableData.value.map((item) => { + if(isValidTimestamp(item.createdate)){ item.createdate = formatToDateHMS(item.createdate); - }); + }}); tableData.value = chunk(tableData.value, 4); } +function isValidTimestamp(value) { + if (typeof value !== 'number' || !Number.isInteger(value)) { + return false; // 首先确保值是一个整数数字 + } + const date = new Date(value); + return !isNaN(date.getTime()); // 验证能否转换为有效日期 +} + //查看详情页 function goDetail(row) { router.push({ @@ -113,7 +174,7 @@ function showModal(modalRef: any) { } onMounted(() => { initRem(); - initData(); + initData(1,20); }); const item = { img: testImg, @@ -175,7 +236,8 @@ function doAudit(param: any, row: any) { if (code === "OK") { message.success(res.message); //changecardstatus(3, row); - query(1, 10); + initData(1,20); + num=1 reload(); } else { message.error(res.message); @@ -206,6 +268,35 @@ function reload() { // const { page, pageSize } = unref(tableRef.value?.pagination) as PaginationProps // query(page!, pageSize!) } + +let debounceTimer; +// 检查是否滚动到底部 +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); + query(num, 20) + // fetchData(); // 接近底部时加载更多数据 + } + }, 500); +} + diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue index 5126514..41dfddb 100644 --- a/src/layout/components/Menu/index.vue +++ b/src/layout/components/Menu/index.vue @@ -1,57 +1,57 @@