广场模式添加默认选中 应用领域

This commit is contained in:
a0049873 2022-11-29 14:49:34 +08:00
parent 76a6edbe63
commit d065f76217
3 changed files with 314 additions and 274 deletions

View File

@ -22,7 +22,11 @@
</div> </div>
<div class="bottom" v-show="selectFlag2"> <div class="bottom" v-show="selectFlag2">
<span class="light"></span> <span class="light"></span>
<div v-for="val in dictList" :key="val" @click="changeAreaFunction(val)"> <div
v-for="val in dictList"
:key="val"
@click="changeAreaFunction(val)"
>
{{ val }} {{ val }}
</div> </div>
</div> </div>
@ -30,9 +34,18 @@
</div> </div>
<div class="algorithm-class"> <div class="algorithm-class">
<div v-for="(item, index) in dataList" :key="`algorithm-${index}`" class="algorithm-card"> <div
<a-image :src="algorithmCardPhoto(item)" :width="525" :height="275" :fallback="imgSrc" :preview="false"> v-for="(item, index) in dataList"
</a-image> :key="`algorithm-${index}`"
class="algorithm-card"
>
<a-image
:src="algorithmCardPhoto(item)"
:width="525"
:height="275"
:fallback="imgSrc"
:preview="false"
></a-image>
<a-tooltip> <a-tooltip>
<template #title>{{ item.name }}</template> <template #title>{{ item.name }}</template>
@ -46,308 +59,324 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { getCategoryTreePage } from '@/api/personalCenter' import { getCategoryTreePage } from '@/api/personalCenter'
import { getGisByArea } from '@/api/home' import { getGisByArea } from '@/api/home'
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue' import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const deptType = ref(null) const area = router.currentRoute.value.query.area
const typeName = ref('全市') const deptType = ref(null)
const typeName2 = ref('全部') const typeName = ref('全市')
const dictList = ref([]) const typeName2 = ref('全部')
const dataList = ref([]) if (area) {
const selectFlag2 = ref(false) typeName2.value = area
const selectFlag = ref(false)
getCategoryTreePage({
page: 1,
limit: 99,
dictTypeId: '1513712507692818433',
}).then((res) => {
dictList.value = ['全部']
res.data.data.list.map((val) => {
// if (val.dictLabel !== '') {
dictList.value.push(val.dictLabel)
// }
})
})
const params = {
pageNum: 1,
type: '智能算法',
area: typeName2.value == '全部' ? '' : typeName2.value,
pageSize: 9 // 9
}
//
const changeAreaFunction = (val) => {
params.pageNum = 1;
typeName2.value = val
params.area = typeName2.value == '全部' ? '' : typeName2.value;
selectFlag2.value = false
pageWithAttrsFunction()
}
let algorithmclassDom = null
const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
const dataLength = ref(true)
const isNoMore = ref(false)
let url = ref('')
const pageWithAttrsFunction = () => {
getGisByArea(params).then((res) => {
dataList.value = res.data.data.list
if (res.data.data.list.length < 9) {
dataLength.value = false
}
})
}
pageWithAttrsFunction()
//
const algorithmCardPhoto = (item) => {
let _arr = []
if(item.pic && typeof item.pic == 'string') {
_arr = JSON.parse(item.pic)
} }
let _img = _arr[0] && _arr[0].img || imgSrc.value; const dictList = ref([])
console.log('_img------------>', _img); const dataList = ref([])
return _img const selectFlag2 = ref(false)
} const selectFlag = ref(false)
// getCategoryTreePage({
const detailFunction = (id) => { page: 1,
window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`) limit: 99,
} dictTypeId: '1513712507692818433',
const algorithmFunction = (e) => { }).then((res) => {
var scrollTop = e.currentTarget.scrollTop dictList.value = ['全部']
var windowHeight = e.currentTarget.clientHeight res.data.data.list.map((val) => {
var scrollHeight = e.currentTarget.scrollHeight // if (val.dictLabel !== '') {
console.log(scrollTop, windowHeight, scrollHeight, '123') dictList.value.push(val.dictLabel)
if ( // }
scrollTop + windowHeight <= scrollHeight + 1 && })
scrollTop + windowHeight >= scrollHeight - 1 })
) { const params = {
// pageNum: 1,
isNoMore.value = true type: '智能算法',
params.pageNum++ area: typeName2.value == '全部' ? '' : typeName2.value,
pageSize: 9, // 9
}
//
const changeAreaFunction = (val) => {
params.pageNum = 1
typeName2.value = val
params.area = typeName2.value == '全部' ? '' : typeName2.value
selectFlag2.value = false
pageWithAttrsFunction()
}
let algorithmclassDom = null
const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
const dataLength = ref(true)
const isNoMore = ref(false)
let url = ref('')
const pageWithAttrsFunction = () => {
getGisByArea(params).then((res) => { getGisByArea(params).then((res) => {
dataList.value.push(...res.data.data.list) dataList.value = res.data.data.list
if (res.data.data.list.length < 9) { if (res.data.data.list.length < 9) {
dataLength.value = false dataLength.value = false
} }
}) })
} else {
isNoMore.value = false
} }
} pageWithAttrsFunction()
// //
const changeDeptType = (str) => { const algorithmCardPhoto = (item) => {
if (str) { let _arr = []
if (algorithmclassDom) { if (item.pic && typeof item.pic == 'string') {
algorithmclassDom.scrollTop = 0; _arr = JSON.parse(item.pic)
} }
switch (str) { let _img = (_arr[0] && _arr[0].img) || imgSrc.value
case '全市': console.log('_img------------>', _img)
deptType.value = null return _img
typeName.value = '全 市' }
break //
case '市级': const detailFunction = (id) => {
deptType.value = 2 window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
typeName.value = '市 级' }
break const algorithmFunction = (e) => {
case '区级': var scrollTop = e.currentTarget.scrollTop
deptType.value = 3 var windowHeight = e.currentTarget.clientHeight
typeName.value = '区 级' var scrollHeight = e.currentTarget.scrollHeight
break console.log(scrollTop, windowHeight, scrollHeight, '123')
case '企业': if (
deptType.value = 4 scrollTop + windowHeight <= scrollHeight + 1 &&
typeName.value = '企 业' scrollTop + windowHeight >= scrollHeight - 1
break ) {
//
isNoMore.value = true
params.pageNum++
getGisByArea(params).then((res) => {
dataList.value.push(...res.data.data.list)
if (res.data.data.list.length < 9) {
dataLength.value = false
}
})
} else {
isNoMore.value = false
} }
params.pageNum = 1; }
if(deptType.value !== null && deptType.value !== undefined) {
params.deptType = deptType.value; //
}else { const changeDeptType = (str) => {
if(Object.keys(params).includes('deptType')) { if (str) {
delete params.deptType if (algorithmclassDom) {
algorithmclassDom.scrollTop = 0
}
switch (str) {
case '全市':
deptType.value = null
typeName.value = '全 市'
break
case '市级':
deptType.value = 2
typeName.value = '市 级'
break
case '区级':
deptType.value = 3
typeName.value = '区 级'
break
case '企业':
deptType.value = 4
typeName.value = '企 业'
break
}
params.pageNum = 1
if (deptType.value !== null && deptType.value !== undefined) {
params.deptType = deptType.value
} else {
if (Object.keys(params).includes('deptType')) {
delete params.deptType
}
} }
} }
selectFlag.value = false
getData(str)
} }
selectFlag.value = false
getData(str)
}
const getData = (str) => { const getData = (str) => {
getGisByArea(params).then((res) => { getGisByArea(params).then((res) => {
const resData = res.data.data || {} const resData = res.data.data || {}
if (resData.list.length > 0 && resData.list.length < 9 && algorithmclassDom) { if (
algorithmclassDom.removeEventListener('scroll', algorithmFunction, true) resData.list.length > 0 &&
} resData.list.length < 9 &&
dataList.value = resData.list || [] algorithmclassDom
nextTick(() => { ) {
algorithmclassDom = document.querySelector('.algorithm-box')
if (str && algorithmclassDom) {
algorithmclassDom.removeEventListener('scroll', algorithmFunction, true) algorithmclassDom.removeEventListener('scroll', algorithmFunction, true)
algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
} }
dataList.value = resData.list || []
nextTick(() => {
algorithmclassDom = document.querySelector('.algorithm-box')
if (str && algorithmclassDom) {
algorithmclassDom.removeEventListener(
'scroll',
algorithmFunction,
true
)
algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
}
})
}) })
})
}
onMounted(() => {
algorithmclassDom = document.querySelector('.algorithm-class')
if (dataLength.value) {
//
algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
} }
})
onBeforeUnmount(() => { onMounted(() => {
algorithmclassDom.removeEventListener('scroll', algorithmFunction, true) algorithmclassDom = document.querySelector('.algorithm-class')
}) if (dataLength.value) {
//
algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
}
})
onBeforeUnmount(() => {
algorithmclassDom.removeEventListener('scroll', algorithmFunction, true)
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.algorithm { .algorithm {
.select { .select {
margin: 0.1rem 0 0.1rem 0.2rem; margin: 0.1rem 0 0.1rem 0.2rem;
color: #fff; color: #fff;
font-size: 0.2rem; font-size: 0.2rem;
font-family: webfont; font-family: webfont;
position: relative;
.top {
cursor: pointer;
width: 3.61rem;
height: 0.85rem;
font-weight: 600;
text-align: center;
padding-top: 0.1rem;
background: url('~@/assets/capacitySquare/select-bg.png') no-repeat;
background-size: 100%;
position: relative; position: relative;
.light { .top {
width: 0.56rem; cursor: pointer;
height: 3px; width: 3.61rem;
position: absolute; height: 0.85rem;
top: 0.4rem; font-weight: 600;
left: 1.52rem;
background: url('~@/assets/capacitySquare/select-light1.png') no-repeat;
background-size: 100%;
}
}
.bottom {
cursor: pointer;
position: absolute;
top: 0.5rem;
left: 0.9rem;
z-index: 1000;
background: rgba(57, 134, 239, 0.68);
border: 1px solid #aed5ff;
.light {
display: inline-block;
width: 2.39rem;
height: 5px;
position: absolute;
top: -0.08rem;
left: -0.3rem;
background: url('~@/assets/capacitySquare/select-light2.png') no-repeat;
background-size: 100%;
}
&>div {
width: 1.8rem;
height: 0.4rem;
line-height: 0.4rem;
text-align: center; text-align: center;
border-top: 1px solid #aed5ff; padding-top: 0.1rem;
} background: url('~@/assets/capacitySquare/select-bg.png') no-repeat;
background-size: 100%;
position: relative;
&>div:nth-of-type(1) { .light {
border: none; width: 0.56rem;
} height: 3px;
} position: absolute;
} top: 0.4rem;
left: 1.52rem;
.algorithm-class { background: url('~@/assets/capacitySquare/select-light1.png')
// margin-top: 0.6rem; no-repeat;
margin-bottom: 0.18rem; background-size: 100%;
display: grid;
grid-template-columns: repeat(3, 33%);
height: 8.8rem;
overflow: auto;
margin-left: 1.15rem;
margin-right: 0.15rem;
.algorithm-card {
height: 2.75rem;
width: 5.25rem;
background: url('~@/assets/capacitySquare/algorithm-bg.png') no-repeat;
background-size: 100% 100%;
margin-bottom: 0.4rem;
margin-right: 0.65rem;
position: relative;
:deep(.ant-image) {
img {
margin-top: 0.15rem;
height: 2.45rem;
width: 5.05rem;
margin-left: 0.1rem;
} }
} }
.algorithm-card-photo { .bottom {
height: 100%; cursor: pointer;
width: 100%;
background: url('~@/assets/capacitySquare/algorithm-photo.jpg') no-repeat;
background-size: 100%;
}
.algorithm-card-title {
position: absolute; position: absolute;
height: 0.6rem; top: 0.5rem;
margin-left: 0.08rem; left: 0.9rem;
width: 97%; z-index: 1000;
color: #ffffff; background: rgba(57, 134, 239, 0.68);
font-size: 0.22rem; border: 1px solid #aed5ff;
font-family: alibaba;
bottom: 0.15rem;
padding-left: 0.22rem;
background: url('~@/assets/capacitySquare/algorithm-title-bg.png') no-repeat;
background-size: 100%;
display: flex;
flex-direction: column;
justify-content: center;
span { .light {
line-height: 0.24rem; display: inline-block;
overflow: hidden; width: 2.39rem;
text-overflow: ellipsis; height: 5px;
white-space: nowrap; position: absolute;
cursor: pointer; top: -0.08rem;
left: -0.3rem;
background: url('~@/assets/capacitySquare/select-light2.png')
no-repeat;
background-size: 100%;
} }
span:last-child { & > div {
font-size: 0.14rem; width: 1.8rem;
height: 0.4rem;
line-height: 0.4rem;
text-align: center;
border-top: 1px solid #aed5ff;
}
& > div:nth-of-type(1) {
border: none;
} }
} }
} }
}
.algorithm-class::-webkit-scrollbar-track-piece { .algorithm-class {
background: #a5bcdb; // margin-top: 0.6rem;
border-radius: 0.08rem; margin-bottom: 0.18rem;
} display: grid;
grid-template-columns: repeat(3, 33%);
height: 8.8rem;
overflow: auto;
margin-left: 1.15rem;
margin-right: 0.15rem;
.algorithm-class::-webkit-scrollbar-thumb { .algorithm-card {
height: 3.2rem; height: 2.75rem;
background: linear-gradient(to bottom, #47d7f5, #3dc6e3); width: 5.25rem;
} background: url('~@/assets/capacitySquare/algorithm-bg.png') no-repeat;
background-size: 100% 100%;
margin-bottom: 0.4rem;
margin-right: 0.65rem;
position: relative;
.algorithm-class::-webkit-scrollbar { :deep(.ant-image) {
height: 8.8rem; img {
width: 0.08rem; margin-top: 0.15rem;
border-radius: 0.08rem; height: 2.45rem;
width: 5.05rem;
margin-left: 0.1rem;
}
}
.algorithm-card-photo {
height: 100%;
width: 100%;
background: url('~@/assets/capacitySquare/algorithm-photo.jpg')
no-repeat;
background-size: 100%;
}
.algorithm-card-title {
position: absolute;
height: 0.6rem;
margin-left: 0.08rem;
width: 97%;
color: #ffffff;
font-size: 0.22rem;
font-family: alibaba;
bottom: 0.15rem;
padding-left: 0.22rem;
background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
no-repeat;
background-size: 100%;
display: flex;
flex-direction: column;
justify-content: center;
span {
line-height: 0.24rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
span:last-child {
font-size: 0.14rem;
}
}
}
}
.algorithm-class::-webkit-scrollbar-track-piece {
background: #a5bcdb;
border-radius: 0.08rem;
}
.algorithm-class::-webkit-scrollbar-thumb {
height: 3.2rem;
background: linear-gradient(to bottom, #47d7f5, #3dc6e3);
}
.algorithm-class::-webkit-scrollbar {
height: 8.8rem;
width: 0.08rem;
border-radius: 0.08rem;
}
} }
}
</style> </style>

View File

@ -1,8 +1,8 @@
<!-- <!--
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-08-09 09:31:25 * @Date: 2022-08-09 09:31:25
* @LastEditors: hisense.wuhongjian * @LastEditors: Light
* @LastEditTime: 2022-10-24 10:44:50 * @LastEditTime: 2022-11-29 14:41:49
* @Description: 应用资源 * @Description: 应用资源
--> -->
<template> <template>
@ -57,12 +57,17 @@
import { selectAppList } from '@/api/home' import { selectAppList } from '@/api/home'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
const selectArea = router.currentRoute.value.query.area
const pageNum = ref(1) const pageNum = ref(1)
const flag = ref(true) const flag = ref(true)
const type = ref(null) const type = ref(null)
const area = ref(null) const area = ref(null)
const typeName = ref('全市') const typeName = ref('全市')
const typeName2 = ref('全部') const typeName2 = ref('全部')
if (selectArea && selectArea !== '全部') {
typeName2.value = selectArea
area.value = selectArea
}
const dictList = ref([]) const dictList = ref([])
const data = reactive({ list: [] }) const data = reactive({ list: [] })
const selectFlag = ref(false) const selectFlag = ref(false)
@ -121,8 +126,8 @@
type: type.value, type: type.value,
area: area.value, area: area.value,
}).then((res) => { }).then((res) => {
console.log('res---应用广场--------->', res); console.log('res---应用广场--------->', res)
if (res.data.data.total.length < 9) { if (res.data.data.total.length < 9) {
dom.removeEventListener('scroll', viewMonitor, true) dom.removeEventListener('scroll', viewMonitor, true)
} }

View File

@ -60,9 +60,15 @@
import { getCategoryTreePage } from '@/api/personalCenter' import { getCategoryTreePage } from '@/api/personalCenter'
import { getGisByArea } from '@/api/home' import { getGisByArea } from '@/api/home'
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue' import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const area = router.currentRoute.value.query.area
const deptType = ref(null) const deptType = ref(null)
const typeName = ref('全市') const typeName = ref('全市')
const typeName2 = ref('全部') const typeName2 = ref('全部')
if (area) {
typeName2.value = area
}
const dictList = ref([]) const dictList = ref([])
const dataList = ref([]) const dataList = ref([])
const selectFlag2 = ref(false) const selectFlag2 = ref(false)
@ -337,4 +343,4 @@
border-radius: 0.08rem; border-radius: 0.08rem;
} }
} }
</style> </style>