feat: 修改图片加载占位 #265

Merged
yaoshuli merged 7 commits from fix/updatesyspic into test 1 year ago

9
components.d.ts vendored

@ -11,7 +11,6 @@ declare module 'vue' {
BasicModal: typeof import('./src/components/Modal/BasicModal.vue')['default']
DataHeader: typeof import('./src/components/DataHeader/index.vue')['default']
NAvatar: typeof import('naive-ui')['NAvatar']
NBackTop: typeof import('naive-ui')['NBackTop']
NButton: typeof import('naive-ui')['NButton']
NCard: typeof import('naive-ui')['NCard']
NCheckbox: typeof import('naive-ui')['NCheckbox']
@ -22,11 +21,8 @@ declare module 'vue' {
NDialogProvider: typeof import('naive-ui')['NDialogProvider']
NDivider: typeof import('naive-ui')['NDivider']
NDropdown: typeof import('naive-ui')['NDropdown']
NEllipsis: typeof import('naive-ui')['NEllipsis']
NEmpty: typeof import('naive-ui')['NEmpty']
NForm: typeof import('naive-ui')['NForm']
NFormItem: typeof import('naive-ui')['NFormItem']
NGi: typeof import('naive-ui')['NGi']
NGrid: typeof import('naive-ui')['NGrid']
NGridItem: typeof import('naive-ui')['NGridItem']
NImage: typeof import('naive-ui')['NImage']
@ -35,7 +31,6 @@ declare module 'vue' {
NModal: typeof import('naive-ui')['NModal']
NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
NotPassed: typeof import('./src/components/NotPassed.vue')['default']
NPopconfirm: typeof import('naive-ui')['NPopconfirm']
NPopover: typeof import('naive-ui')['NPopover']
NPopselect: typeof import('naive-ui')['NPopselect']
NProgress: typeof import('naive-ui')['NProgress']
@ -45,11 +40,7 @@ declare module 'vue' {
NSpace: typeof import('naive-ui')['NSpace']
NSpin: typeof import('naive-ui')['NSpin']
NSwitch: typeof import('naive-ui')['NSwitch']
NTabPane: typeof import('naive-ui')['NTabPane']
NTabs: typeof import('naive-ui')['NTabs']
NTag: typeof import('naive-ui')['NTag']
NTimeline: typeof import('naive-ui')['NTimeline']
NTimelineItem: typeof import('naive-ui')['NTimelineItem']
NTooltip: typeof import('naive-ui')['NTooltip']
NUpload: typeof import('naive-ui')['NUpload']
NUploadDragger: typeof import('naive-ui')['NUploadDragger']

@ -37,10 +37,11 @@
"sortablejs": "^1.15.1",
"vue": "^3.3.8",
"vue-draggable-plus": "^0.3.5",
"vue-lazyload": "^3.0.0",
"vue-mousetrap": "^1.0.5",
"vue-router": "^4.1.6",
"vue-types": "^4.2.1",
"vue-waterfall2": "^2.0.7",
"vue3-lazy": "1.0.0-alpha.1",
"xlsx": "^0.18.5"
},
"devDependencies": {

File diff suppressed because it is too large Load Diff

@ -1,28 +1,28 @@
<script lang="ts" setup>
import { defineOptions, ref } from "vue";
import { defineOptions, ref } from 'vue'
defineOptions({ name: "ShortcutModal" });
defineOptions({ name: 'ShortcutModal' })
const show = ref(false);
const show = ref(false)
const cardStyle = {
"width": "800px",
"--n-padding-bottom": "10px",
"--n-padding-left": "10px",
"padding-bottom": "100px",
};
'width': '800px',
'--n-padding-bottom': '10px',
'--n-padding-left': '10px',
'padding-bottom': '100px',
}
function showModal() {
show.value = true;
show.value = true
}
function closeModal() {
show.value = false;
show.value = false
}
defineExpose({
showModal,
});
})
</script>
<template>
@ -125,14 +125,23 @@ defineExpose({
<div class="wrapper-request">
<table style="margin-left: 120px; width: 290px">
<tr>
<td ><div class="key" style="float: left;
margin-left: 5px;" data-key="c" /></td>
<td><div style="float: left;
margin-left: -60px;">关闭关闭当前场景弹窗</div></td>
<td>
<div
class="key" style="float: left;
margin-left: 5px;" data-key="c"
/>
</td>
<td>
<div
style="float: left;
margin-left: -60px;"
>
关闭关闭当前场景弹窗
</div>
</td>
</tr>
<tr>
<td>
<td>
<div class="key" data-key="&larr;" />
<span>/</span>
<div class="key" data-key="&rarr;" />
@ -142,7 +151,7 @@ defineExpose({
</table>
<table style="margin-left: 50px">
<tr>
<td style="text-align: left; width: 55px">
<td style="text-align: left; width: 55px">
<div class="key" data-key="p p" />
</td>
<td>通过</td>
@ -154,7 +163,6 @@ defineExpose({
<td>不通过</td>
</tr>
</table>
</div>
<div class="wrapper-request">
<table style="margin-left: 120px; width: 180px">

@ -1,11 +1,12 @@
import './styles/tailwind.css'
import { createApp } from 'vue'
import waterfall from 'vue-waterfall2'
import lazyPlugin from 'vue3-lazy'
import App from './App.vue'
import router, { setupRouter } from './router'
import { setupGlobalProperties, setupMousestrap, setupNaive, setupNaiveDiscreteApi, setupSvgIcon } from '@/plugins'
import { setupStore } from '@/store'
import 'virtual:svg-icons-register'
import VueLazyload from 'vue-lazyload'
import bgPng from '@/assets/images/bg-loading.png'
import closePng from '@/assets/images/close.png'
@ -19,14 +20,13 @@ async function bootstrap() {
setupGlobalProperties(app)
setupRouter(app)
await router.isReady()
const meta = document.createElement('meta')
const meta = document.createElement('meta')
meta.name = 'naive-ui-style'
document.head.appendChild(meta)
app.use(VueLazyload, {
preLoad: 1.3,
app.use(waterfall)
app.use(lazyPlugin, {
error: closePng,
loading: bgPng,
attempt: 1
})
app.mount('#app', true)
}

@ -1,6 +1,6 @@
import { defineStore } from 'pinia'
import { getBackList, getBusinessList, getIzShowList, getPictureTypeList, getRegionList, getRejectList, getRelationTypeList, getTFList, getizApprovalStatusList, getizstatusList } from '@/api/dictionary'
import { store } from '@/store'
import { defineStore } from 'pinia'
export interface DictionaryState {
regionList: any
@ -76,8 +76,8 @@ export const useDictionaryStore = defineStore({
return state.iztaskrromList
},
getiztaskstatus: (state) => {
// return state.iztaskstatusList
return state.izstatusList
// return state.iztaskstatusList
return state.izstatusList
},
getizvisitpro: (state) => {
return state.izvisitproList
@ -105,32 +105,32 @@ export const useDictionaryStore = defineStore({
},
getizApprovalStatus: (state) => {
return state.izApprovalStatusList
}
},
},
actions: {
initData(){
initData() {
// this.fetchRegionList(); //废弃
this.fetchPictureTypeList();
this.fetchPersionList();
this.fetchPlanList();
this.fetchTFList();
this.fetchPictureTypeList()
this.fetchPersionList()
this.fetchPlanList()
this.fetchTFList()
// this.fetchIzShowList(); //废弃
this.fetchIzProjectList();
this.fetchIztaskrromList();
this.fetchIztaskstatusList();
this.fetchIzvisitproList();
this.fetchIzfirmList();
this.fetchIzproductnameList();
this.fetchizcustomnameList();
this.fetchIzCustomtypeList();
this.fetchIzcustomlevelList();
this.fetchizizprojecttypeList();
this.fetchizvisitcityList();
this.fetchRejectList();
this.fetchBackList();
this.fetchRelationTypeList();
this.fetchizstatusListt();
this.fetchizApprovalStatusList();
this.fetchIzProjectList()
this.fetchIztaskrromList()
this.fetchIztaskstatusList()
this.fetchIzvisitproList()
this.fetchIzfirmList()
this.fetchIzproductnameList()
this.fetchizcustomnameList()
this.fetchIzCustomtypeList()
this.fetchIzcustomlevelList()
this.fetchizizprojecttypeList()
this.fetchizvisitcityList()
this.fetchRejectList()
this.fetchBackList()
this.fetchRelationTypeList()
this.fetchizstatusListt()
this.fetchizApprovalStatusList()
},
settfList(config) {
this.tfList = config

@ -26,7 +26,7 @@ import emitter from '@/utils/mitt'
import { getFilterList } from '@/api/home/main'
import { useKeydown } from '@/hooks/event/useKeydown'
const emit = defineEmits(['inputChange',])
const emit = defineEmits(['inputChange'])
const finalStore = useFinal()
//
const asideValue: Record<keyof typeof asideMap, any> = reactive({})
@ -336,7 +336,7 @@ function updateComponent(key, e) {
}
defineExpose({
showSearch,
});
})
useKeydown('s', () => setShowSearch(true))
</script>
@ -410,7 +410,7 @@ useKeydown('s', () => setShowSearch(true))
box-sizing: border-box;
height: 100% !important;
margin-left: 16px;
&-header {
padding: 10px;
width: 100%;

@ -310,7 +310,8 @@ function closeModal() {
}
defineExpose({
showModal,closeModal,
showModal,
closeModal,
query,
pagination,
})

@ -194,8 +194,8 @@ watch(
function showModal() {
show.value = true
setTimeout(() => {
// formValue.name = ''
}, 300);
// formValue.name = ''
}, 300)
}
function closeModal() {
@ -250,7 +250,7 @@ function edit(editFilter: any) {
const { searchname, ocrUsersearchchildList, id } = editFilter
currentEditId = id
currentEditId = id
formValue.conditions = ocrUsersearchchildList.map((item) => {
return {
@ -261,8 +261,8 @@ currentEditId = id
})
formValue.name = editFilter.searchname
// formValue.searchname = searchname
formValue.name = searchname
console.log(formValue)
formValue.name = searchname
console.log(formValue)
}
defineExpose({

@ -8,6 +8,7 @@ import { NButton, NDataTable, useDialog, useMessage } from 'naive-ui'
import {
computed,
defineEmits,
defineProps,
h,
nextTick,
onBeforeMount,
@ -16,7 +17,7 @@ import {
reactive,
ref,
unref,
watch,defineProps
watch,
} from 'vue'
import { rowPropKeys } from 'naive-ui/es/legacy-grid/src/Row'
import { useRoute, useRouter } from 'vue-router'
@ -47,13 +48,14 @@ import emitter from '@/utils/mitt'
import { formatToDateHMS } from '@/utils/dateUtil'
import { getAllfieldList, getfieldList, savefield } from '@/api/home/filter'
import DataHeader from '@/components/DataHeader/index.vue'
const props = defineProps({
taskvalue: {
type: String,
default: ""
}
});
default: '',
},
})
const emit = defineEmits(['changeShow'])
function changeContent() {
emit('changeShow')
@ -415,7 +417,7 @@ async function formatColumns() {
key: columnsRef.value[index].key,
fixed: columnsRef.value[index].fixed || undefined,
width: 200,
sorter: 'default',
sorter: 'default',
renderSorterIcon: ({ order }) => {
if (order === false)
return h(SvgIcon, { name: 'sort-2' })
@ -427,7 +429,7 @@ async function formatColumns() {
render(row: any) {
return row.fromusername
},
}
}
@ -506,7 +508,7 @@ async function query(
) {
console.log('query', taskName)
const asideParmas = cloneDeep(unref(finalStore.getAsideValue))
console.log(asideParmas);
console.log(asideParmas)
if (asideParmas.izyear) {
asideParmas.izuptime = cloneDeep(asideParmas.izyear)
@ -524,13 +526,12 @@ async function query(
// 使使
// let params = filterId ? { userSearchId: filterId } : asideParmas
let params = asideParmas
if (params?.izshowall == true)
{
const params = asideParmas
if (params?.izshowall == true) {
params.isFail = true
delete params.izshowall;
delete params.izshowall
}
// params = params?.izshowall ? { isFail: true } : params
// params = params?.izshowall ? { isFail: true } : params
const result = await getFinalList({
sortorder: sortorder.value,
@ -567,7 +568,7 @@ async function handlePageChange(currentPage) {
return
const { pageSize } = pagination
pagination.page = currentPage
await query(currentPage, pageSize,{},props.taskvalue)
await query(currentPage, pageSize, {}, props.taskvalue)
}
async function handlePageSizeChange(currentPageSize) {
if (loading.value)
@ -576,7 +577,7 @@ async function handlePageSizeChange(currentPageSize) {
const { page } = pagination
pagination.pageSize = currentPageSize
await query(page, currentPageSize,{},props.taskvalue)
await query(page, currentPageSize, {}, props.taskvalue)
}
function handleCheck(rowKeys: DataTableRowKey[]) {
@ -739,7 +740,7 @@ function validate(items: any[]) {
function goDetail(row) {
router.push({
name: 'final-detail',
query: { id: row.id, packageid: row.packageid, taskindex: row.taskIndex,type:'table' },
query: { id: row.id, packageid: row.packageid, taskindex: row.taskIndex, type: 'table' },
})
}
@ -876,7 +877,7 @@ function reload() {
const { page, pageSize } = unref(
tableRef.value?.pagination,
) as PaginationProps
query(page!, pageSize!,{},props.taskvalue)
query(page!, pageSize!, {}, props.taskvalue)
}
watch(
@ -918,10 +919,9 @@ function filterTableData(keyword) {
query(pagination.page, pagination.pageSize, '', keyword)
else query(pagination.page, pagination.pageSize)
}
async function initData(pageSize, page, filterId?: any,
taskName?: string) {
async function initData(pageSize, page, filterId?: any, taskName?: string) {
const asideParmas = unref(finalStore.getAsideValue)
if (asideParmas.izyear) {
if (asideParmas.izyear) {
asideParmas.izuptime = cloneDeep(asideParmas.izyear)
if (typeof asideParmas.izuptime == 'object') {
asideParmas.izuptime[0] = dayjs(asideParmas.izuptime[0]).format(
@ -936,11 +936,10 @@ async function initData(pageSize, page, filterId?: any,
}
// 使使
// let params = filterId ? { userSearchId: filterId } : asideParmas
let params = asideParmas
if (params?.izshowall == true)
{
const params = asideParmas
if (params?.izshowall == true) {
params.isFail = true
delete params.izshowall;
delete params.izshowall
}
const result = await getFinalList({
sortorder: sortorder.value,
@ -965,7 +964,7 @@ onMounted(() => {
emitter.on('filter-final', refreshHandler)
getColumns()
if (asideParmas == null) {
initData(1, 20,{},props.taskvalue)
initData(1, 20, {}, props.taskvalue)
}
else {
reset()
@ -1167,7 +1166,7 @@ defineExpose({
flex-direction: column;
box-sizing: border-box;
margin-left: 16px;
width: 100%;
background: #fff;
padding: 0px 24px 24px 24px;

@ -1,8 +1,9 @@
<script lang="ts" setup>
import { computed, onMounted, reactive, ref, unref, watch,defineProps } from 'vue'
import { computed, defineProps, onMounted, reactive, ref, unref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { chunk } from 'lodash-es'
import { chunk, cloneDeep } from 'lodash-es'
import { useDialog, useMessage } from 'naive-ui'
import dayjs from 'dayjs'
import { RepeatModal, RepeatTaskTableModal } from '../comp'
import testImg from '@/assets/images/test.png'
import type { RowData } from '@/config/final'
@ -10,10 +11,16 @@ import { getFinalList } from '@/api/final'
import { useFinal } from '@/store/modules/final'
import { formatToDateHMS } from '@/utils/dateUtil'
import { audit } from '@/api/task/task'
import dayjs from 'dayjs'
import { cloneDeep } from 'lodash-es'
import NotPassed from '@/components/Approval/NotPassed.vue'
const props = defineProps({
taskvalue: {
type: String,
default: '',
},
})
const emit = defineEmits(['changeShow'])
const dialog = useDialog()
const message = useMessage()
@ -26,13 +33,6 @@ const total = ref(0)
const scrollContainer = ref(null)
const tableData = ref<any>([])
const finalStore = useFinal()
const props = defineProps({
taskvalue: {
type: String,
default: ""
}
});
let num = 1
const pagination = reactive({
page: 1,
@ -99,27 +99,25 @@ async function initData(
taskName?: string,
) {
const asideParmas = unref(finalStore.getAsideValue)
if(asideParmas.izyear){
// console.log(asideParmas.izyear)
if (asideParmas.izyear) {
// console.log(asideParmas.izyear)
// asideParmas.izuptime = cloneDeep(asideParmas.izyear)
// asideParmas.izuptime = asideParmas.izyear.split(",");
let ontime = dayjs(asideParmas.izyear[0]).format(
'YYYY/MM/DD',
)
let twotime = dayjs(asideParmas.izyear[1]).format(
'YYYY/MM/DD',
)
asideParmas.izuptime =ontime+"-"+twotime
// delete asideParmas.izyear
const ontime = dayjs(asideParmas.izyear[0]).format(
'YYYY/MM/DD',
)
const twotime = dayjs(asideParmas.izyear[1]).format(
'YYYY/MM/DD',
)
asideParmas.izuptime = `${ontime}-${twotime}`
// delete asideParmas.izyear
}
// 使使
// let params = filterId ? { userSearchId: filterId } : asideParmas
let params = asideParmas
if (params?.izshowall == true)
{
const params = asideParmas
if (params?.izshowall == true) {
params.isFail = true
delete params.izshowall;
delete params.izshowall
}
const result = await getFinalList({
sortorder: sortorder.value,
@ -131,10 +129,10 @@ async function initData(
...params,
})
const { data, pageCount, totalCount } = result
//console.log(data, pageCount, totalCount)
// console.log(data, pageCount, totalCount)
// tableData.value = tableData.value.concat(data);
tableData.value = data
// console.log(tableData.value)
// console.log(tableData.value)
total.value = totalCount
pagination.page = page
pagination.pageCount = Math.ceil(totalCount / pageSize)
@ -158,38 +156,36 @@ async function query(
const asideParmas = unref(finalStore.getAsideValue)
// 使使
// let params = filterId ? { userSearchId: filterId } : asideParmas
if(asideParmas.izyear){
// console.log(asideParmas.izyear)
if (asideParmas.izyear) {
// console.log(asideParmas.izyear)
// asideParmas.izuptime = cloneDeep(asideParmas.izyear)
// asideParmas.izuptime = asideParmas.izyear.split(",");
let ontime = dayjs(asideParmas.izyear[0]).format(
'YYYY/MM/DD',
)
let twotime = dayjs(asideParmas.izyear[1]).format(
'YYYY/MM/DD',
)
asideParmas.izuptime =ontime+"-"+twotime
// delete asideParmas.izyear
const ontime = dayjs(asideParmas.izyear[0]).format(
'YYYY/MM/DD',
)
const twotime = dayjs(asideParmas.izyear[1]).format(
'YYYY/MM/DD',
)
asideParmas.izuptime = `${ontime}-${twotime}`
// delete asideParmas.izyear
}
let params = asideParmas
if (params?.izshowall == true)
{
if (params?.izshowall == true) {
params.isFail = true
delete params.izshowall;
delete params.izshowall
}
params = params?.izshowall ? {isFail:true} : params;
params = params?.izshowall ? { isFail: true } : params
const result = await getFinalList({
sortorder: sortorder.value,
pageSize,
currPage: page,
sortname: sortname.value,
taskName,
// isFail: true,
// isFail: true,
...params,
})
const { data, pageCount, totalCount } = result
console.log(data, pageCount, totalCount);
console.log(data, pageCount, totalCount)
const newlist = []
const oldlist = tableData.value
if (oldlist.length > 0) {
@ -239,7 +235,7 @@ function isValidTimestamp(value) {
function goDetail(row) {
router.push({
name: 'final-detail',
query: { id: row.id, packageid: row.packageid, taskindex: row.taskNode, type:'card' },
query: { id: row.id, packageid: row.packageid, taskindex: row.taskNode, type: 'card' },
})
}
//
@ -271,8 +267,8 @@ function showModal(modalRef: any) {
}
onMounted(() => {
initRem()
initData(1, 20,{},props.taskvalue)
initData(1, 20, {}, props.taskvalue)
})
const item = {
img: testImg,
@ -313,14 +309,14 @@ function doAudit(param: any, row: any) {
if (code === 'OK') {
message.success(res.message)
// changecardstatus(3, row);
initData(1, 20,{},props.taskvalue)
initData(1, 20, {}, props.taskvalue)
num = 1
reload()
selectionIds.value = []
selectionIds.value = []
}
else {
message.error(res.message)
selectionIds.value = []
selectionIds.value = []
}
})
},
@ -423,7 +419,6 @@ function checkBottom() {
if (!container)
return
// const { scrollTop, clientHeight, scrollHeight } = container;
const scrollTop = window.pageYOffset || document.documentElement.scrollTop
@ -435,13 +430,13 @@ function checkBottom() {
const scrollHeight = document.documentElement.scrollHeight
clearTimeout(debounceTimer)
// console.log(pagination)
// console.log(pagination)
debounceTimer = setTimeout(() => {
if (scrollTop + clientHeight >= scrollHeight -500&&!(pagination.pageCount<num)) {
if (scrollTop + clientHeight >= scrollHeight - 500 && !(pagination.pageCount < num)) {
num = num + 1
console.log(num)
console.log( pagination.pageCount)
query(num, 20,{},props.taskvalue)
console.log(pagination.pageCount)
query(num, 20, {}, props.taskvalue)
// fetchData(); //
}
}, 500)
@ -471,18 +466,18 @@ function changesort(sortnamex) {
sortorder.value = 'asc'
sortname.value = 'field1'
}
initData(1, 20,{},props.taskvalue)
initData(1, 20, {}, props.taskvalue)
num = 1
}
function notpass (){
initData(1, 20,{},props.taskvalue)
selectionIds.value = []
function notpass() {
initData(1, 20, {}, props.taskvalue)
selectionIds.value = []
}
watch(
() => finalStore.asideValue,
(newVal, oldVal) => {
initData(1, 20,{},props.taskvalue)
num=1
initData(1, 20, {}, props.taskvalue)
num = 1
},
{ deep: true },
)
@ -594,13 +589,13 @@ defineExpose({
</div>
</div>
<div style="width: 3vw">
<!--<SvgIcon name="magnifying-1" size="18" style="margin-right: 8px" />
<!-- <SvgIcon name="magnifying-1" size="18" style="margin-right: 8px" />
<SvgIcon
style="cursor: pointer"
size="18"
name="column"
@click="showModal(customTabelRef)"
/>-->
/> -->
</div>
</div>
<div ref="scrollContainer" :class="tableData.length > 4 ? 'cotnet_wrapeer' : 'cotnet_wrapeertwo'" @scroll="checkBottom">

@ -225,7 +225,6 @@ function newFilterOk() {
filterModalRef.value.pagination.pageSize,
)
filterModalRef.value.closeModal()
}
// key
@ -361,7 +360,7 @@ useKeydown('s', () => setShowSearch(true))
border-radius: 3px;
box-sizing: border-box;
margin-left: 16px;
&-header {
padding: 10px;
width: 100%;

@ -1,83 +1,75 @@
<script lang="ts" setup>
import dayjs from "dayjs";
import { onUpdated, watch } from "vue";
import { onMounted, ref } from "vue";
import { useConfig } from "@/store/modules/asideConfig";
import { useFinal } from '@/store/modules/final'
import dayjs from 'dayjs'
import { onMounted, onUpdated, ref, watch } from 'vue'
const configUseStore = useConfig();
import { useConfig } from '@/store/modules/asideConfig'
import { useFinal } from '@/store/modules/final'
const props = defineProps<{
value: [number, number] | null
label: string
}>()
const emit = defineEmits<{
(e: 'update:value', value: number[]): void
}>()
const configUseStore = useConfig()
const time = ref<[number, number] | null>(props.value)
const timeold = ref<[number, number] | null>(props.value)
const isLoadValue = ref(false)
configUseStore.$subscribe(() => {
if (isLoadValue.value) {
isLoadValue.value = false;
return;
isLoadValue.value = false
return
}
let asideValue = configUseStore.getAsideValue;
if (asideValue["izyear"]) {
time.value = asideValue["izyear"];
} else {
time.value = null;
}
});
const asideValue = configUseStore.getAsideValue
if (asideValue.izyear)
time.value = asideValue.izyear
else
time.value = null
})
const finalStore = useFinal()
finalStore.$subscribe(() => {
if (isLoadValue.value) {
isLoadValue.value = false;
return;
}
let asideValue = finalStore.getAsideValue;
console.log("asideValue izyear", asideValue);
if (asideValue && asideValue["izyear"]) {
time.value = asideValue["izyear"];
} else {
time.value = null;
isLoadValue.value = false
return
}
});
const asideValue = finalStore.getAsideValue
console.log('asideValue izyear', asideValue)
if (asideValue && asideValue.izyear)
time.value = asideValue.izyear
else
time.value = null
})
const props = defineProps<{
value: [number, number] | null;
label: string;
}>();
const emit = defineEmits<{
(e: "update:value", value: number[]): void;
}>();
const time = ref<[number, number] | null>(props.value);
const timeold = ref<[number, number] | null>(props.value);
const isLoadValue = ref(false);
function onChange(value: [number, number]) {
isLoadValue.value = true;
emit("update:value", value);
isLoadValue.value = true
emit('update:value', value)
}
onMounted(() => {
if (!props.value) {
//
const currentDate = dayjs();
const currentDate = dayjs()
//
const endDate = currentDate.toDate();
const startDate = currentDate.subtract(3, "month").toDate();
const endDate = currentDate.toDate()
const startDate = currentDate.subtract(3, 'month').toDate()
//
timeold.value = [startDate.getTime(), endDate.getTime()];
time.value = [startDate.getTime(), endDate.getTime()];
console.log("time init", startDate.getTime(), endDate.getTime());
timeold.value = [startDate.getTime(), endDate.getTime()]
time.value = [startDate.getTime(), endDate.getTime()]
console.log('time init', startDate.getTime(), endDate.getTime())
setTimeout(() => {
emit("update:value", [startDate.getTime(), endDate.getTime()]);
}, 300);
emit('update:value', [startDate.getTime(), endDate.getTime()])
}, 300)
}
});
watch(
() => time.value,
() => {
// console.log(time.value)
if(time.value==null){
time.value=timeold.value
}
},
)
})
watch(
() => time.value,
() => {
// console.log(time.value)
if (time.value == null)
time.value = timeold.value
},
)
</script>
<template>
@ -85,15 +77,16 @@ onMounted(() => {
<n-collapse :default-expanded-names="['1']" arrow-placement="right">
<n-collapse-item :title="label" name="1">
<n-space>
<n-date-picker
v-model:value="time"
type="daterange"
:clearable="false"
@update:value="onChange"
placeholder="请选择"
@update:value="onChange"
>
<template #separator> </template>
<template #separator>
</template>
</n-date-picker>
</n-space>
</n-collapse-item>

@ -615,7 +615,7 @@ function handleOk() {
width: 76px;
height: 84px;
background: #ffffff;
box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.15);
box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.15);
>div{
text-align: center;
height: 50%;

@ -217,8 +217,8 @@ function showModal() {
typeOptions.value = list
show.value = true
setTimeout(() => {
// formValue.name = ''
}, 300);
// formValue.name = ''
}, 300)
}
function closeModal() {

@ -4,15 +4,18 @@ import { Download as DownloadIcon, Upload as UploadIcon } from '@vicons/tabler'
import { Icon } from '@vicons/utils'
import { useInfiniteScroll } from '@vueuse/core'
import dayjs from 'dayjs'
import imagesloaded from 'imagesloaded'
// import imagesloaded from 'imagesloaded'
import { cloneDeep, debounce } from 'lodash-es'
import Masonry from 'masonry-layout'
// import Masonry from 'masonry-layout'
import { NIcon, useMessage } from 'naive-ui'
import type { Component } from 'vue'
import {
computed,
h,
nextTick,
onBeforeMount,
onMounted,
onUnmounted,
onUpdated,
@ -54,9 +57,9 @@ const listData = ref<any[]>([])
const timer = ref()
const showClose = ref(false)
const deviceHeight = ref(600)
let _masonry: null | Masonry = null
let _imagesload: any
const masonryRef = ref<ComponentRef>(null)
// let _masonry: null | Masonry = null
// let _imagesload: any
// const masonryRef = ref<ComponentRef>(null)
const el = ref<HTMLDivElement | null>(null)
const viewMode = ref('masonry')
const pagination = reactive({
@ -101,36 +104,36 @@ const listStyle = computed(() => {
}
})
const layout = debounce(() => {
if (masonryRef.value == null || el.value == null)
return
if (_masonry !== null)
(_masonry as any).addItems()
_masonry = new Masonry(masonryRef.value as any, {
itemSelector: '.grid-item',
gutter: 17,
columnWidth: 182,
percentPosition: true,
stagger: 10,
})
loading.value = false
//
_imagesload = imagesloaded('.grid-item')
_imagesload.on('done', (instance) => {
(_masonry as any).layout()
if (!el.value)
return
loading.value = false
})
_imagesload.on('fail', (instance) => {
message.error('图片错误')
loading.value = false
})
}, 300)
// const layout = debounce(() => {
// if (masonryRef.value == null || el.value == null)
// return
// if (_masonry !== null)
// (_masonry as any).addItems()
// _masonry = new Masonry(masonryRef.value as any, {
// itemSelector: '.grid-item',
// gutter: 17,
// columnWidth: 182,
// percentPosition: true,
// stagger: 10,
// })
// loading.value = false
// //
// _imagesload = imagesloaded('.grid-item')
// _imagesload.on('done', (instance) => {
// (_masonry as any).layout()
// if (!el.value)
// return
// loading.value = false
// })
// _imagesload.on('fail', (instance) => {
// message.error('')
// loading.value = false
// })
// }, 300)
useInfiniteScroll(
el as any,
@ -140,12 +143,25 @@ useInfiniteScroll(
{ distance: 10, canLoadMore: () => canloadMore },
)
onUpdated(() => {
nextTick(() => {
setTimeout(() => {
layout()
}, 50)
onBeforeMount(async () => {
const more = await featchList()
more.forEach((item) => {
item.calHeight = 182 * item.high / item.wide
})
listData.value = more
const tmore = await featchList()
tmore.forEach((item) => {
item.calHeight = 182 * item.high / item.wide
})
listData.value = listData.value.concat(tmore)
})
onUpdated(() => {
// nextTick(() => {
// setTimeout(() => {
// layout()
// }, 50)
// })
})
const timeRange = ref('')
@ -157,14 +173,6 @@ const timeLabel = computed(() => {
return item?.label
})
const viewLabel = computed(() => {
const item = viewOptions.find((option) => {
return option.value === viewMode.value
})
return item?.label
})
const isAllowDownload = ref(true)
const calNum = ref(0)
const searchValue = ref('')
@ -254,46 +262,48 @@ async function featchList(userSearchId?: string) {
const list = data.map((item) => {
return {
calHeight: 0,
imgUrl: item.imgurl,
thumburl: item.serverThumbnailUrl || item.imgurl || bgLoadingImg,
thumburl: item.serverThumbnailUrl,
upname: item.upname,
ocrPictureclass: item.ocrPictureclass,
uphead: item.uphead,
similar: item.similarityscore || -1,
imgName: item.imgname,
states: item.states,
wide: item.wide,
high: item.high,
loadOver: false,
isRepeatHis: item.isRepeatHis,
}
})
loading.value = false
return list
}
catch (error) {
canloadMore = false
loading.value = false
return []
}
}
async function loadMore() {
console.log('loading.value加兹安', loading.value, el.value)
if (loading.value || el.value == null)
return
canloadMore = false
const more = await featchList()
// if(isInitSeaerch.value) {
// listData.value = []
// isInitSeaerch.value = false
// }
console.log(more)
listData.value.push(...more)
console.log(listData.value)
more.forEach((item) => {
item.calHeight = 182 * item.high / item.wide
})
// listData.value.push(...more)
listData.value = listData.value.concat(more)
console.log('listData.value出来了', listData.value)
}
const gridHeight = computed(() => {
let height = ''
if (viewMode.value === 'masonry')
height = ''
height = 'auto'
else if (viewMode.value === 'horizontalVersion')
height = '145px'
else if (viewMode.value === 'verticalVersion')
@ -481,9 +491,13 @@ function reset() {
canloadMore = true
filterId = null
layout()
// layout()
}
watch(listData.value, (newVal, oldVal) => {
console.log('最新的val', newVal)
})
async function refreshHandler(filtersearchId?: any) {
reset()
@ -643,9 +657,19 @@ const dropdownOptions = ref([
},
])
function finish() {
console.log('finish')
}
function scroll() {
}
const masonryRef = ref(null)
defineExpose({
showLoginSuccessModal,
closeLoginSuccessModal
closeLoginSuccessModal,
})
</script>
@ -717,22 +741,28 @@ defineExpose({
<n-spin :show="loading">
<div ref="el" class="scroll" :style="listStyle">
<!-- <n-scrollbar :on-scroll="scrollHandler"> -->
<div ref="masonryRef" class="grid">
<waterfall :col="8" :data="listData" :gutter-width="10" @finish="finish">
<div
v-for="(item, index) in listData"
:key="index"
:style="{ height: gridHeight, minHeight: gridMinHeight }"
:key="item.calHeight"
:style="{ height: gridHeight }"
class="grid-item"
>
<!-- <div :style="{ 'background-color': randomColor(0.2) }" class="wrapper-content-item-img" /> -->
<!-- <img
class="wrapper-content-item-img" :class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }"
:src="item.imgUrl"
> -->
<img
:key="item.thumburl"
v-lazy="item.thumburl"
:class="{
'img-fit': viewMode === 'horizontalVersion',
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
}"
:style="{ height: `${`${item.calHeight}px`}` }"
class="img"
alt="加载错误"
>
<n-image
ref="imageRef"
:key="item.imgUrl"
class="img"
:img-props="{
onClick: ($event) => {
@ -748,42 +778,21 @@ defineExpose({
:src="item.thumburl"
:fallback-src="bgLoadingImg"
:style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
style="display: none"
/>
<img
v-if="item.states == 3"
class="tag-status"
src="@/assets/images/task/tag-pass.png"
alt=""
>
<img
<img
v-if="item.states == 5"
class="tag-status"
src="@/assets/images/task/tag-not-pass.png"
alt=""
>
<img
v-if="(item.states != 3&&item.states != 5)&&item.isRepeatHis"
class="tag-status"
src="@/assets/images/reset.png"
alt=""
>
<img
style="top:35px"
v-if="(item.states == 3||item.states == 5)&&item.isRepeatHis"
class="tag-status"
src="@/assets/images/reset.png"
alt=""
>
<!-- @load="loadImgOver(item)" -->
<!-- <n-image
class="img"
:class="{
'img-fit': viewMode === 'horizontalVersion',
'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
}"
:src="baseImg"
v-show="!item.loadOver"
/> -->
<div v-if="item.similar != -1" class="percent">
<SvgIcon size="42" :name="item.similar == 100 ? 'error_tag' : 'tag'" />
@ -836,14 +845,9 @@ defineExpose({
/>
<span>{{ item.upname }}</span>
</div>
<!-- <div class="right">
<span :style="{ marginRight: '5px' }">分类</span>
<span>{{ item.ocrPictureclass?.classname }}</span>
</div> -->
</div>
</div>
</div>
<!-- </n-scrollbar> -->
</waterfall>
</div>
</n-spin>
</div>
@ -869,7 +873,6 @@ defineExpose({
flex-direction: column;
box-sizing: border-box;
margin-left: 16px;
margin-right: 16px;
width: 100%;
&-header {
@ -916,19 +919,26 @@ defineExpose({
padding-bottom: 16px;
}
.grid{
display: block !important;
}
.img {
width: 182px;
max-width: 182px;
border-radius: 7px;
display: block;
height: calc(100% - 25px);
opacity: 1 !important;
// height: calc(100% - 25px);
}
.img-fit {
width: 100%;
width: 182px;
overflow: hidden;
}
.img-full {
width: 100%;
width: 182px;
overflow: hidden;
::v-deep(img) {

@ -143,7 +143,7 @@ onMounted(() => {
window.addEventListener('keydown', handleKeydown)
init()
})
onUnmounted(()=>{
onUnmounted(() => {
window.removeEventListener('keydown', handleKeydown)
})
async function init() {

@ -126,9 +126,9 @@ function changeimgbigshow() {
//
useKeydown('right', forwardHandler)
useKeydown('left', backHandler)
useKeydown('c', ()=>{
isFullScreen.value = false
imgbigshow.value=false
useKeydown('c', () => {
isFullScreen.value = false
imgbigshow.value = false
})
useKeydown('p p', () => {
const item = taskDetailInfo.value

@ -1,14 +1,14 @@
<script lang="ts" setup>
import { ref } from "vue";
import Aside from "./aside/Aside.vue";
import Content from "./content/Content.vue";
import DataHeader from "@/components/DataHeader/index.vue";
import { ref } from 'vue'
import Aside from './aside/Aside.vue'
import Content from './content/Content.vue'
import DataHeader from '@/components/DataHeader/index.vue'
import Robot from '@/components/Robot/index.vue'
const asideRef: any = ref(null);
const asideRef: any = ref(null)
function setAsideItemName(text) {
asideRef.value.setAsideItemName(text);
asideRef.value.setAsideItemName(text)
}
</script>
@ -19,7 +19,7 @@ function setAsideItemName(text) {
</div>
<div class="main">
<!-- 侧边 -->
<Aside ref="asideRef" />
<Aside ref="asideRef" />
<!-- 内容 -->
<Content @set-aside-item-name="setAsideItemName" />

@ -194,8 +194,8 @@ watch(
function showModal() {
show.value = true
setTimeout(() => {
// formValue.name = ''
}, 300);
// formValue.name = ''
}, 300)
}
function closeModal() {

@ -266,7 +266,7 @@ if (searchContent) {
border-radius: 3px;
box-sizing: border-box;
margin-left: 16px;
&-header {
padding: 12px 16px;
width: 100%;

Loading…
Cancel
Save