|
|
|
|
@ -1,77 +1,80 @@
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { computed, onUnmounted, onUpdated, reactive, ref, unref, watch } from 'vue'
|
|
|
|
|
import { useDialog, useMessage } from 'naive-ui'
|
|
|
|
|
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'
|
|
|
|
|
import { clearTF, getPackageTaskList, getTaskDetailInfo, getTaskDetailPictureList, setTF } from '@/api/work/work'
|
|
|
|
|
import { fieldMap } from '@/config/workorder'
|
|
|
|
|
import { hideDownload } from '@/utils/image'
|
|
|
|
|
import { isEmpty } from '@/utils'
|
|
|
|
|
|
|
|
|
|
const batch = ref(false)
|
|
|
|
|
const selectItems = ref<any[]>([])
|
|
|
|
|
const message = useMessage()
|
|
|
|
|
const dialog = useDialog()
|
|
|
|
|
const totalCount = ref(0)
|
|
|
|
|
let _imagesload: any
|
|
|
|
|
import { computed, onUnmounted, onUpdated, reactive, ref, unref, watch } from "vue";
|
|
|
|
|
import { useDialog, useMessage } from "naive-ui";
|
|
|
|
|
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";
|
|
|
|
|
import { formatToDateHMS } from '@/utils/dateUtil'
|
|
|
|
|
import {
|
|
|
|
|
clearTF,
|
|
|
|
|
getPackageTaskList,
|
|
|
|
|
getTaskDetailInfo,
|
|
|
|
|
getTaskDetailPictureList,
|
|
|
|
|
setTF,
|
|
|
|
|
} from "@/api/work/work";
|
|
|
|
|
import { fieldMap } from "@/config/workorder";
|
|
|
|
|
import { hideDownload } from "@/utils/image";
|
|
|
|
|
import { isEmpty } from "@/utils";
|
|
|
|
|
|
|
|
|
|
const batch = ref(false);
|
|
|
|
|
const selectItems = ref<any[]>([]);
|
|
|
|
|
const message = useMessage();
|
|
|
|
|
const dialog = useDialog();
|
|
|
|
|
const totalCount = ref(0);
|
|
|
|
|
let _imagesload: any;
|
|
|
|
|
|
|
|
|
|
function setBatch(value: boolean) {
|
|
|
|
|
batch.value = value
|
|
|
|
|
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 packagepagination = reactive({
|
|
|
|
|
pageNo: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
const taskpagination = reactive({
|
|
|
|
|
pageNo: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
const sortBy: PictureSortParam = {
|
|
|
|
|
orderbyname: 'asc',
|
|
|
|
|
orderbyvalue: 'pictureResult',
|
|
|
|
|
}
|
|
|
|
|
const workStore = useWorkOrder()
|
|
|
|
|
const selectTask = ref<any>(null)
|
|
|
|
|
const overTask = ref<any>(null)
|
|
|
|
|
const taskList = ref<any[]>([])
|
|
|
|
|
const taskDetailInfo = 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[] = []
|
|
|
|
|
orderbyname: "asc",
|
|
|
|
|
orderbyvalue: "pictureResult",
|
|
|
|
|
};
|
|
|
|
|
const workStore = useWorkOrder();
|
|
|
|
|
const selectTask = ref<any>(null);
|
|
|
|
|
const overTask = ref<any>(null);
|
|
|
|
|
const taskList = ref<any[]>([]);
|
|
|
|
|
const taskDetailInfo = 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[] = [];
|
|
|
|
|
|
|
|
|
|
function validate(items: any[]) {
|
|
|
|
|
if (items.length === 0)
|
|
|
|
|
return '至少选中一个任务'
|
|
|
|
|
if (items.length === 0) return "至少选中一个任务";
|
|
|
|
|
|
|
|
|
|
// for (const item of items) {
|
|
|
|
|
// const { iztrueorfalse, history, states } = item
|
|
|
|
|
@ -85,304 +88,302 @@ function validate(items: any[]) {
|
|
|
|
|
// return '审批状态不合法'
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
return null
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function falseHandler() {
|
|
|
|
|
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];
|
|
|
|
|
}
|
|
|
|
|
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 trueHandler() {
|
|
|
|
|
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];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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: () => {
|
|
|
|
|
setTrue()
|
|
|
|
|
setTrue();
|
|
|
|
|
},
|
|
|
|
|
onNegativeClick: () => {},
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setTrue() {
|
|
|
|
|
const ids: any[] = processItems.map(item => item.id)
|
|
|
|
|
const ids: any[] = processItems.map((item) => item.id);
|
|
|
|
|
|
|
|
|
|
const param: SetTFParam = {
|
|
|
|
|
taskchildpictureids: ids.join(','),
|
|
|
|
|
taskchildpictureids: ids.join(","),
|
|
|
|
|
iztrueorfalse: 1,
|
|
|
|
|
packageid: workStore.getActiveId,
|
|
|
|
|
judgeid: '0',
|
|
|
|
|
}
|
|
|
|
|
judgeid: "0",
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
doSetTF(param)
|
|
|
|
|
doSetTF(param);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setFalse(id: string, desc: null | string) {
|
|
|
|
|
const ids: any[] = processItems.map(item => item.id)
|
|
|
|
|
const ids: any[] = processItems.map((item) => item.id);
|
|
|
|
|
|
|
|
|
|
const param: SetTFParam = {
|
|
|
|
|
taskchildpictureids: ids.join(','),
|
|
|
|
|
taskchildpictureids: ids.join(","),
|
|
|
|
|
iztrueorfalse: 0,
|
|
|
|
|
packageid: workStore.getActiveId,
|
|
|
|
|
judgeid: id,
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (desc)
|
|
|
|
|
param.judgedesc = desc
|
|
|
|
|
if (desc) param.judgedesc = desc;
|
|
|
|
|
|
|
|
|
|
doSetTF(param)
|
|
|
|
|
doSetTF(param);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function doSetTF(param: SetTFParam) {
|
|
|
|
|
setTF(param).then((res) => {
|
|
|
|
|
const { code } = res
|
|
|
|
|
processItems.length = 0
|
|
|
|
|
if (code === 'OK')
|
|
|
|
|
updateList(param)
|
|
|
|
|
else
|
|
|
|
|
message.error(res.message)
|
|
|
|
|
})
|
|
|
|
|
const { code } = res;
|
|
|
|
|
processItems.length = 0;
|
|
|
|
|
if (code === "OK") updateList(param);
|
|
|
|
|
else message.error(res.message);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateList(param: SetTFParam) {
|
|
|
|
|
const list = listData.value
|
|
|
|
|
const ids = param.taskchildpictureids.split(',')
|
|
|
|
|
const list = listData.value;
|
|
|
|
|
const ids = param.taskchildpictureids.split(",");
|
|
|
|
|
|
|
|
|
|
for (const item of list) {
|
|
|
|
|
if (ids.includes(item.id))
|
|
|
|
|
item.iztrueorfalse = param.iztrueorfalse
|
|
|
|
|
if (ids.includes(item.id)) item.iztrueorfalse = param.iztrueorfalse;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (ids.includes(taskDetailInfo.value.id))
|
|
|
|
|
taskDetailInfo.value.iztrueorfalse = param.iztrueorfalse
|
|
|
|
|
taskDetailInfo.value.iztrueorfalse = param.iztrueorfalse;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function forwardHandler() {
|
|
|
|
|
workStore.forward()
|
|
|
|
|
workStore.forward();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function backHandler() {
|
|
|
|
|
workStore.back()
|
|
|
|
|
workStore.back();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function reset() {
|
|
|
|
|
taskpagination.pageNo = 0
|
|
|
|
|
taskpagination.pageSize = 20
|
|
|
|
|
listData.value.length = 0
|
|
|
|
|
loading.value = false
|
|
|
|
|
canloadMore = true
|
|
|
|
|
taskpagination.pageNo = 0;
|
|
|
|
|
taskpagination.pageSize = 20;
|
|
|
|
|
listData.value.length = 0;
|
|
|
|
|
loading.value = false;
|
|
|
|
|
canloadMore = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function refreshHandler() {
|
|
|
|
|
reset()
|
|
|
|
|
reset();
|
|
|
|
|
|
|
|
|
|
useInfiniteScroll(
|
|
|
|
|
el as any,
|
|
|
|
|
() => {
|
|
|
|
|
loadMore()
|
|
|
|
|
loadMore();
|
|
|
|
|
},
|
|
|
|
|
{ distance: 10, canLoadMore: () => canloadMore },
|
|
|
|
|
)
|
|
|
|
|
{ distance: 10, canLoadMore: () => canloadMore }
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function loadMore() {
|
|
|
|
|
if (loading.value || el.value == null)
|
|
|
|
|
return
|
|
|
|
|
if (loading.value || el.value == null) return;
|
|
|
|
|
|
|
|
|
|
const more = await featchList()
|
|
|
|
|
listData.value.push(...more)
|
|
|
|
|
const more = await featchList();
|
|
|
|
|
listData.value.push(...more);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function featchList() {
|
|
|
|
|
loading.value = true
|
|
|
|
|
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
|
|
|
|
|
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 []
|
|
|
|
|
return data;
|
|
|
|
|
} catch (error) {
|
|
|
|
|
canloadMore = false;
|
|
|
|
|
return [];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const layout = debounce(() => {
|
|
|
|
|
if (el.value == null)
|
|
|
|
|
return
|
|
|
|
|
if (el.value == null) return;
|
|
|
|
|
|
|
|
|
|
_imagesload = imagesloaded('.grid-item')
|
|
|
|
|
_imagesload = imagesloaded(".grid-item");
|
|
|
|
|
|
|
|
|
|
_imagesload.on('done', (instance) => {
|
|
|
|
|
if (!el.value)
|
|
|
|
|
return
|
|
|
|
|
loading.value = false
|
|
|
|
|
})
|
|
|
|
|
_imagesload.on("done", (instance) => {
|
|
|
|
|
if (!el.value) return;
|
|
|
|
|
loading.value = false;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
_imagesload.on('fail', (instance) => {
|
|
|
|
|
message.error('图片错误')
|
|
|
|
|
loading.value = false
|
|
|
|
|
})
|
|
|
|
|
}, 300)
|
|
|
|
|
_imagesload.on("fail", (instance) => {
|
|
|
|
|
message.error("图片错误");
|
|
|
|
|
loading.value = false;
|
|
|
|
|
});
|
|
|
|
|
}, 300);
|
|
|
|
|
|
|
|
|
|
onUpdated(() => {
|
|
|
|
|
layout()
|
|
|
|
|
})
|
|
|
|
|
layout();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
watch(() => workStore.activeId, async (newValue, oldValue) => {
|
|
|
|
|
const packageid = workStore.getActiveId
|
|
|
|
|
watch(
|
|
|
|
|
() => workStore.activeId,
|
|
|
|
|
async (newValue, oldValue) => {
|
|
|
|
|
const packageid = workStore.getActiveId;
|
|
|
|
|
|
|
|
|
|
if (isEmpty(packageid)) {
|
|
|
|
|
listData.value.length = 0
|
|
|
|
|
totalCount.value = 0
|
|
|
|
|
return
|
|
|
|
|
listData.value.length = 0;
|
|
|
|
|
totalCount.value = 0;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const res = await getPackageTaskList(newValue, packagepagination)
|
|
|
|
|
const { data } = res
|
|
|
|
|
taskList.value = data
|
|
|
|
|
if (taskList.value.length > 0)
|
|
|
|
|
handleSelect(taskList.value[0])
|
|
|
|
|
})
|
|
|
|
|
const res = await getPackageTaskList(newValue, packagepagination);
|
|
|
|
|
const { data } = res;
|
|
|
|
|
taskList.value = data;
|
|
|
|
|
if (taskList.value.length > 0) handleSelect(taskList.value[0]);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const packageName = computed(() => {
|
|
|
|
|
const index = workStore.getCurrentIndex
|
|
|
|
|
return workStore.getOrderList[index]?.packagename || ''
|
|
|
|
|
})
|
|
|
|
|
const index = workStore.getCurrentIndex;
|
|
|
|
|
return workStore.getOrderList[index]?.packagename || "";
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
async function handleSelect(item: any) {
|
|
|
|
|
selectTask.value = item
|
|
|
|
|
const taskId = item.id
|
|
|
|
|
taskDetailInfo.value = await getTaskDetailInfo(taskId, workStore.activeId)
|
|
|
|
|
selectTask.value = item;
|
|
|
|
|
const taskId = item.id;
|
|
|
|
|
taskDetailInfo.value = await getTaskDetailInfo(taskId, workStore.activeId);
|
|
|
|
|
|
|
|
|
|
const packageid = workStore.getActiveId
|
|
|
|
|
const packageid = workStore.getActiveId;
|
|
|
|
|
|
|
|
|
|
if (isEmpty(packageid)) {
|
|
|
|
|
listData.value.length = 0
|
|
|
|
|
totalCount.value = 0
|
|
|
|
|
return
|
|
|
|
|
listData.value.length = 0;
|
|
|
|
|
totalCount.value = 0;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
refreshHandler()
|
|
|
|
|
refreshHandler();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function sortHandler(orderby: 'pictureResult' | 'fromuptime') {
|
|
|
|
|
if (!selectTask.value)
|
|
|
|
|
return
|
|
|
|
|
async function sortHandler(orderby: "pictureResult" | "fromuptime") {
|
|
|
|
|
if (!selectTask.value) return;
|
|
|
|
|
|
|
|
|
|
sortBy.orderbyvalue = orderby
|
|
|
|
|
sortBy.orderbyname = sortBy.orderbyname === 'asc' ? 'desc' : 'asc'
|
|
|
|
|
refreshHandler()
|
|
|
|
|
sortBy.orderbyvalue = orderby;
|
|
|
|
|
sortBy.orderbyname = sortBy.orderbyname === "asc" ? "desc" : "asc";
|
|
|
|
|
refreshHandler();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const propertys = computed(() => {
|
|
|
|
|
const { ocrPicture } = taskDetailInfo.value
|
|
|
|
|
const { ocrPicture } = taskDetailInfo.value;
|
|
|
|
|
const v = pickBy(ocrPicture, (value, key: string) => {
|
|
|
|
|
return key.startsWith('field') && value !== null
|
|
|
|
|
})
|
|
|
|
|
return v
|
|
|
|
|
})
|
|
|
|
|
return key.startsWith("field") && value !== null;
|
|
|
|
|
});
|
|
|
|
|
return v;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
async function clearHandler() {
|
|
|
|
|
dialog.info({
|
|
|
|
|
title: '确认提示',
|
|
|
|
|
content: '确认给该任务图片的标记印记吗?',
|
|
|
|
|
positiveText: '确定',
|
|
|
|
|
negativeText: '取消',
|
|
|
|
|
title: "确认提示",
|
|
|
|
|
content: "确认给该任务图片的标记印记吗?",
|
|
|
|
|
positiveText: "确定",
|
|
|
|
|
negativeText: "取消",
|
|
|
|
|
onPositiveClick: () => {
|
|
|
|
|
clearMark()
|
|
|
|
|
clearMark();
|
|
|
|
|
},
|
|
|
|
|
onNegativeClick: () => {},
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function clearMark() {
|
|
|
|
|
const res = await clearTF(workStore.activeId, selectTask.value.id)
|
|
|
|
|
if (res.code === 'OK') {
|
|
|
|
|
taskDetailInfo.value.iztrueorfalse = null
|
|
|
|
|
message.info('清除标记成功')
|
|
|
|
|
const res = await clearTF(workStore.activeId, selectTask.value.id);
|
|
|
|
|
if (res.code === "OK") {
|
|
|
|
|
taskDetailInfo.value.iztrueorfalse = null;
|
|
|
|
|
message.info("清除标记成功");
|
|
|
|
|
} else {
|
|
|
|
|
message.error(res.message);
|
|
|
|
|
}
|
|
|
|
|
else { message.error(res.message) }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function overTaskHandelr(item: any) {
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
workStore.reset()
|
|
|
|
|
})
|
|
|
|
|
workStore.reset();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function getPercent(pictureid: string) {
|
|
|
|
|
const { ocpictureid, pictureresult } = taskDetailInfo.value
|
|
|
|
|
const index = ocpictureid.split(',').indexOf(String(pictureid))
|
|
|
|
|
const results = pictureresult.split(',')
|
|
|
|
|
const percent = results[index] || '0'
|
|
|
|
|
const val = Math.floor(Number.parseFloat(percent))
|
|
|
|
|
return `${val}%`
|
|
|
|
|
const { ocpictureid, pictureresult } = taskDetailInfo.value;
|
|
|
|
|
const index = ocpictureid.split(",").indexOf(String(pictureid));
|
|
|
|
|
const results = pictureresult.split(",");
|
|
|
|
|
const percent = results[index] || "0";
|
|
|
|
|
const val = Math.floor(Number.parseFloat(percent));
|
|
|
|
|
return `${val}%`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const mark = computed(() => {
|
|
|
|
|
return taskDetailInfo.value.iztrueorfalse === null ? '未标记' : '已标记'
|
|
|
|
|
})
|
|
|
|
|
return taskDetailInfo.value.iztrueorfalse === null ? "未标记" : "已标记";
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function immersionHandler() {
|
|
|
|
|
workStore.updateImmersion()
|
|
|
|
|
workStore.updateImmersion();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showAction() {
|
|
|
|
|
const item = taskDetailInfo.value
|
|
|
|
|
if (batch.value === false)
|
|
|
|
|
overTask.value = item
|
|
|
|
|
const item = taskDetailInfo.value;
|
|
|
|
|
if (batch.value === false) overTask.value = item;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function hideAction() {
|
|
|
|
|
overTask.value = null
|
|
|
|
|
overTask.value = null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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();
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
@ -395,16 +396,21 @@ function previewHandler(event: MouseEvent) {
|
|
|
|
|
<SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<div v-show="!showActions" style="display: flex;align-items: center;">
|
|
|
|
|
<div v-show="!showActions" style="display: flex; align-items: center">
|
|
|
|
|
<n-button text @click="clearHandler">
|
|
|
|
|
<SvgIcon size="12" name="delete" />
|
|
|
|
|
清除标记
|
|
|
|
|
</n-button>
|
|
|
|
|
<div class="btn" style="margin: 0px 10px;" @click="setBatch(true)">
|
|
|
|
|
<SvgIcon style="margin-right: 6px;" size="14" name="tf" />
|
|
|
|
|
<div class="btn" style="margin: 0px 10px" @click="setBatch(true)">
|
|
|
|
|
<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">
|
|
|
|
|
@ -414,11 +420,11 @@ function previewHandler(event: MouseEvent) {
|
|
|
|
|
</template>
|
|
|
|
|
返回
|
|
|
|
|
</n-button>
|
|
|
|
|
<div style="cursor: pointer;margin-left: 16px;" @click="falseHandler">
|
|
|
|
|
<div style="cursor: pointer; margin-left: 16px" @click="falseHandler">
|
|
|
|
|
<SvgIcon width="64" height="28" name="t4" />
|
|
|
|
|
</div>
|
|
|
|
|
<SvgIcon size="24" name="vs" />
|
|
|
|
|
<div style="cursor: pointer;" @click="trueHandler">
|
|
|
|
|
<div style="cursor: pointer" @click="trueHandler">
|
|
|
|
|
<SvgIcon width="64" height="28" name="t3" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -428,34 +434,64 @@ function previewHandler(event: MouseEvent) {
|
|
|
|
|
<div ref="el" class="scroll">
|
|
|
|
|
<div class="wrapper-detail">
|
|
|
|
|
<div
|
|
|
|
|
class="left" :style="{ 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})` }"
|
|
|
|
|
@click="showAction" @mouseleave="leaveTaskHandler"
|
|
|
|
|
class="left"
|
|
|
|
|
:style="{ 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})` }"
|
|
|
|
|
@click="showAction"
|
|
|
|
|
@mouseleave="leaveTaskHandler"
|
|
|
|
|
>
|
|
|
|
|
<!-- 真假标记 -->
|
|
|
|
|
<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="time">
|
|
|
|
|
<SvgIcon color="#FFF" size="16" name="time" />
|
|
|
|
|
<span>{{ formatToDateHMS(taskDetailInfo.createdate || 0) }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 右下信息 -->
|
|
|
|
|
<div class="info">
|
|
|
|
|
<n-grid x-gap="16" y-gap="0" :cols="12">
|
|
|
|
|
<n-gi span="4">
|
|
|
|
|
<span style="color:#8b8d8f;">
|
|
|
|
|
<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;">
|
|
|
|
|
<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;">
|
|
|
|
|
<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;">
|
|
|
|
|
<n-gi
|
|
|
|
|
span="8"
|
|
|
|
|
style="
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: left;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<span>{{ totalCount }}</span>
|
|
|
|
|
<span>相似匹配</span>
|
|
|
|
|
</n-gi>
|
|
|
|
|
@ -466,65 +502,88 @@ function previewHandler(event: MouseEvent) {
|
|
|
|
|
<SvgIcon size="30" name="zoom-out" />
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 预览大图组件 -->
|
|
|
|
|
<div style="display: none;">
|
|
|
|
|
<div style="display: none">
|
|
|
|
|
<n-image
|
|
|
|
|
ref="imageRef" :img-props="{ onClick: hideDownload }"
|
|
|
|
|
ref="imageRef"
|
|
|
|
|
:img-props="{ onClick: hideDownload }"
|
|
|
|
|
:src="taskDetailInfo?.ocrPicture?.imgurl"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 操作 -->
|
|
|
|
|
<div v-show="overTask && overTask.id === taskDetailInfo.id" class="action" @click.stop="hideAction">
|
|
|
|
|
<SvgIcon style="cursor: pointer;" name="t1" @click.stop="trueHandler" />
|
|
|
|
|
<SvgIcon style="cursor: pointer;margin-left: 30px;" name="t2" @click.stop="falseHandler" />
|
|
|
|
|
<div
|
|
|
|
|
v-show="overTask && overTask.id === taskDetailInfo.id"
|
|
|
|
|
class="action"
|
|
|
|
|
@click.stop="hideAction"
|
|
|
|
|
>
|
|
|
|
|
<SvgIcon style="cursor: pointer" name="t1" @click.stop="trueHandler" />
|
|
|
|
|
<SvgIcon
|
|
|
|
|
style="cursor: pointer; margin-left: 30px"
|
|
|
|
|
name="t2"
|
|
|
|
|
@click.stop="falseHandler"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<n-scrollbar style="max-height: 100%;">
|
|
|
|
|
<n-scrollbar style="max-height: 100%">
|
|
|
|
|
<span class="name">图片名称</span>
|
|
|
|
|
<div class="tags">
|
|
|
|
|
<div class="tag tag-actived">
|
|
|
|
|
重复图片
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tag">
|
|
|
|
|
基线任务
|
|
|
|
|
</div>
|
|
|
|
|
<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 class="property-name top" style="font-weight: bold; color: #333333"
|
|
|
|
|
>拜访终端
|
|
|
|
|
</span>
|
|
|
|
|
<span style="font-weight: bold;color: #333333;font-size: 16px;">拜访终端</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">
|
|
|
|
|
<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>
|
|
|
|
|
<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')">
|
|
|
|
|
<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" />
|
|
|
|
|
<SvgIcon style="margin-left: 8px" name="sort" size="12" />
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-left: 15px;cursor: pointer" @click="sortHandler('pictureResult')">
|
|
|
|
|
<div
|
|
|
|
|
style="margin-left: 15px; cursor: pointer"
|
|
|
|
|
@click="sortHandler('pictureResult')"
|
|
|
|
|
>
|
|
|
|
|
<span>相似度排序</span>
|
|
|
|
|
<SvgIcon style="margin-left: 8px;" name="sort" size="12" />
|
|
|
|
|
<SvgIcon style="margin-left: 8px" name="sort" size="12" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<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)"
|
|
|
|
|
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="img-wrapper"
|
|
|
|
|
:style="{ 'background-image': `url(${item.thumburl})` }"
|
|
|
|
|
/>
|
|
|
|
|
<div class="check">
|
|
|
|
|
<n-checkbox
|
|
|
|
|
v-show="batch" v-model:checked="item.checked" @click.stop
|
|
|
|
|
v-show="batch"
|
|
|
|
|
v-model:checked="item.checked"
|
|
|
|
|
@click.stop
|
|
|
|
|
@update:checked="onCheckChange($event, item)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
@ -541,8 +600,8 @@ function previewHandler(event: MouseEvent) {
|
|
|
|
|
<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" />
|
|
|
|
|
<SvgIcon style="cursor: pointer" name="t1" @click.stop="trueHandler" />
|
|
|
|
|
<SvgIcon style="cursor: pointer" name="t2" @click.stop="falseHandler" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -560,7 +619,7 @@ function previewHandler(event: MouseEvent) {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
margin-left: 16px;
|
|
|
|
|
padding: 16px 16px 0px 16px;
|
|
|
|
|
background: #FFF;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
border: 1px solid rgb(239, 239, 245);
|
|
|
|
|
|
|
|
|
|
@ -573,7 +632,7 @@ function previewHandler(event: MouseEvent) {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background: #FFF;
|
|
|
|
|
background: #fff;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
@ -604,11 +663,11 @@ function previewHandler(event: MouseEvent) {
|
|
|
|
|
height: 36px;
|
|
|
|
|
background: linear-gradient(135deg, #5b85f8, #3c6cf0);
|
|
|
|
|
border-radius: 17px;
|
|
|
|
|
box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.30);
|
|
|
|
|
box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.3);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
color: #FFF;
|
|
|
|
|
color: #fff;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -728,8 +787,8 @@ function previewHandler(event: MouseEvent) {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tag-actived {
|
|
|
|
|
color: #FE9800;
|
|
|
|
|
border: 1px solid #FE9800;
|
|
|
|
|
color: #fe9800;
|
|
|
|
|
border: 1px solid #fe9800;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.property {
|
|
|
|
|
@ -749,7 +808,7 @@ function previewHandler(event: MouseEvent) {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 72px;
|
|
|
|
|
top: 4px;
|
|
|
|
|
content: '';
|
|
|
|
|
content: "";
|
|
|
|
|
width: 1px;
|
|
|
|
|
height: 12px;
|
|
|
|
|
background: #979797;
|
|
|
|
|
@ -772,7 +831,7 @@ function previewHandler(event: MouseEvent) {
|
|
|
|
|
|
|
|
|
|
.item-selected {
|
|
|
|
|
box-shadow: 0px 2px 8px 0px rgba(0, 65, 207, 0.28);
|
|
|
|
|
background-color: #FFF;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grid-item {
|
|
|
|
|
@ -804,7 +863,7 @@ function previewHandler(event: MouseEvent) {
|
|
|
|
|
z-index: 3;
|
|
|
|
|
right: 12px;
|
|
|
|
|
top: 2px;
|
|
|
|
|
color: #FFF;
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
|
|
.val {
|
|
|
|
|
position: absolute;
|
|
|
|
|
@ -816,6 +875,12 @@ function previewHandler(event: MouseEvent) {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-family: PingFang SC, PingFang SC-Semibold;
|
|
|
|
|
font-weight: Semibold;
|
|
|
|
|
text-align: left;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -856,4 +921,14 @@ function previewHandler(event: MouseEvent) {
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time {
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 3;
|
|
|
|
|
left: 2%;
|
|
|
|
|
bottom: 2%;
|
|
|
|
|
color: #fff;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
Dragon
1 year ago