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

Merge branch 'main' of https://git.mcnetmart.com/guoxiangbin/ocr-web

Browse Source
bak
刘释隆 1 year ago
parent 52744856ee f11fc716d8
commit 3043be633c
11 changed files with 395 additions and 391 deletions
Show Stats Download Patch File Download Diff File

3
src/api/home/main.ts
Unescape View File

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

1
src/api/work/work.ts
Unescape View File

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

12
src/views/final/aside/Aside.vue
Unescape View File

@ -134,16 +134,8 @@ function scrollHandler(key: string) {
element?.scrollIntoView(true) element?.scrollIntoView(true)
} }
// 设置过滤配置的值（匹配的设置，不匹配的重置为默认值） function filterHandler(searchId: string) {
function filterHandler(filterList: Filter[]) { emitter.emit('filter-final', searchId)
const filerMap: Record<string, any> = {}
for (const filter of filterList) {
const { key, value } = filter
filerMap[key] = value
}
emitter.emit('filter-final', filerMap)
} }
function editFilter(filter: any) { function editFilter(filter: any) {

5
src/views/final/comp/Action.vue
Unescape View File

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

9
src/views/final/content/Content.vue
Unescape View File

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

11
src/views/home/aside/Aside.vue
Unescape View File

@ -133,15 +133,8 @@ function scrollHandler(key: string) {
} }
// 选择某个过滤配置，刷新图片墙 // 选择某个过滤配置，刷新图片墙
function filterHandler(filterList: Filter[]) { function filterHandler(searchId: string) {
const filerMap: Record<string, any> = {} emitter.emit('filter', searchId)
for (const filter of filterList) {
const { key, value } = filter
filerMap[key] = value
}
emitter.emit('filter', filerMap)
} }
function editFilter(filter: any) { function editFilter(filter: any) {

1
src/views/home/aside/comp/AdvanceFilter.vue
Unescape View File

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

40
src/views/home/content/Content.vue
Unescape View File

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

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

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

2
src/views/worksheet/aside/WorkSheetList.vue
Unescape View File

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

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

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

Write Preview
Loading…
Cancel
Save