wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

广场

This commit is contained in:
851673013@qq.com 2022-08-10 10:32:50 +08:00
parent 469c6afd61
commit 12bee09773
2 changed files with 81 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
front/src/views/capacitySquare/components/algorithm.vue
View File

@ -28,7 +28,7 @@
</template> </template>
<script setup> <script setup>
import { pageWithAttrs } from '@/api/abilityStatistics' import { pageWithAttrs } from '@/api/abilityStatistics'
import { ref, onMounted } from 'vue' import { ref, onMounted, onBeforeUnmount } from 'vue'
const dataList = ref([]) const dataList = ref([])
const params = { const params = {
deptIds: [], deptIds: [],
@ -40,6 +40,7 @@
pageSize: 9, pageSize: 9,
type: '组件服务', type: '组件服务',
} }
let algorithmclass = null
const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg')) const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
const dataLength = ref(true) const dataLength = ref(true)
const isNoMore = ref(false) const isNoMore = ref(false)
@ -55,44 +56,54 @@
pageWithAttrsFunction() pageWithAttrsFunction()
//图片显示 //图片显示
const algorithmCardPhoto = (List) => { const algorithmCardPhoto = (List) => {
List.map((item) => { let obj = List.filter((item) => item.attrType === '图层缩略图')[0]
if (item.attrType === '图层缩略图') { if (obj) {
url.value = item.attrValue List.map((item) => {
} if (item.attrType === '图层缩略图') {
}) url.value = item.attrValue
}
})
} else {
url.value = '@/assets/capacitySquare/algorithm-photo2.jpg'
}
return url.value return url.value
} }
//跳转详情页 //跳转详情页
const detailFunction = (id) => { const detailFunction = (id) => {
window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`) window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
} }
onMounted(() => { const algorithmFunction = (e) => {
const algorithmclass = document.querySelector('.algorithm-class') var scrollTop = e.currentTarget.scrollTop
if (dataLength.value) { var windowHeight = e.currentTarget.clientHeight
//监听滚动事件 var scrollHeight = e.currentTarget.scrollHeight
algorithmclass.addEventListener('scroll', (e) => { console.log(scrollTop, windowHeight, scrollHeight, '123')
var scrollTop = e.currentTarget.scrollTop if (
var windowHeight = e.currentTarget.clientHeight scrollTop + windowHeight <= scrollHeight + 1 &&
var scrollHeight = e.currentTarget.scrollHeight scrollTop + windowHeight >= scrollHeight - 1
console.log(scrollTop, windowHeight, scrollHeight, '123') ) {
if ( // 当前滚动条已经触底
scrollTop + windowHeight <= scrollHeight + 1 && isNoMore.value = true
scrollTop + windowHeight >= scrollHeight - 1 params.pageNum++
) { pageWithAttrs(params).then((res) => {
// 当前滚动条已经触底 dataList.value.push(...res.data.data.records)
isNoMore.value = true if (res.data.data.records.length < 9) {
params.pageNum++ dataLength.value = false
pageWithAttrs(params).then((res) => {
dataList.value.push(...res.data.data.records)
if (res.data.data.records.length < 9) {
dataLength.value = false
}
})
} else {
isNoMore.value = false
} }
}) })
} else {
isNoMore.value = false
} }
}
onMounted(() => {
algorithmclass = document.querySelector('.algorithm-class')
if (dataLength.value) {
//监听滚动事件
algorithmclass.addEventListener('scroll', algorithmFunction, true)
}
})
onBeforeUnmount(() => {
algorithmclass.removeEventListener('scroll', algorithmFunction, true)
}) })
</script> </script>

70
front/src/views/capacitySquare/components/layer.vue
View File

@ -28,8 +28,9 @@
</template> </template>
<script setup> <script setup>
import { pageWithAttrs } from '@/api/abilityStatistics' import { pageWithAttrs } from '@/api/abilityStatistics'
import { ref, onMounted } from 'vue' import { ref, onMounted, onBeforeUnmount } from 'vue'
const dataList = ref([]) const dataList = ref([])
let algorithmclass = null
const params = { const params = {
deptIds: [], deptIds: [],
districtId: '', districtId: '',
@ -55,44 +56,53 @@
pageWithAttrsFunction() pageWithAttrsFunction()
//图片显示 //图片显示
const algorithmCardPhoto = (List) => { const algorithmCardPhoto = (List) => {
List.map((item) => { let obj = List.filter((item) => item.attrType === '图层缩略图')[0]
if (item.attrType === '图层缩略图') { if (obj) {
url.value = item.attrValue List.map((item) => {
} if (item.attrType === '图层缩略图') {
}) url.value = item.attrValue
}
})
} else {
url.value = '@/assets/capacitySquare/algorithm-photo2.jpg'
}
return url.value return url.value
} }
//跳转详情页 //跳转详情页
const detailFunction = (id) => { const detailFunction = (id) => {
window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`) window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
} }
onMounted(() => { const layerFunction = (e) => {
const algorithmclass = document.querySelector('.algorithm-class') var scrollTop = e.currentTarget.scrollTop
if (dataLength.value) { var windowHeight = e.currentTarget.clientHeight
//监听滚动事件 var scrollHeight = e.currentTarget.scrollHeight
algorithmclass.addEventListener('scroll', (e) => { console.log(scrollTop, windowHeight, scrollHeight, '123')
var scrollTop = e.currentTarget.scrollTop if (
var windowHeight = e.currentTarget.clientHeight scrollTop + windowHeight <= scrollHeight + 1 &&
var scrollHeight = e.currentTarget.scrollHeight scrollTop + windowHeight >= scrollHeight - 1
console.log(scrollTop, windowHeight, scrollHeight, '123') ) {
if ( // 当前滚动条已经触底
scrollTop + windowHeight <= scrollHeight + 1 && isNoMore.value = true
scrollTop + windowHeight >= scrollHeight - 1 params.pageNum++
) { pageWithAttrs(params).then((res) => {
// 当前滚动条已经触底 dataList.value.push(...res.data.data.records)
isNoMore.value = true if (res.data.data.records.length < 9) {
params.pageNum++ dataLength.value = false
pageWithAttrs(params).then((res) => {
dataList.value.push(...res.data.data.records)
if (res.data.data.records.length < 9) {
dataLength.value = false
}
})
} else {
isNoMore.value = false
} }
}) })
} else {
isNoMore.value = false
} }
}
onMounted(() => {
algorithmclass = document.querySelector('.algorithm-class')
if (dataLength.value) {
//监听滚动事件
algorithmclass.addEventListener('scroll', layerFunction, true)
}
})
onBeforeUnmount(() => {
algorithmclass.removeEventListener('scroll', layerFunction, true)
}) })
</script> </script>