This commit is contained in:
2025-08-29 14:30:58 +08:00
parent 3647241da0
commit 3272bbd888
4 changed files with 93 additions and 20 deletions

View File

@ -2,9 +2,7 @@
<div class="homeBox">
<!-- <GdMap></GdMap> -->
<!-- 头部 -->
<Head></Head>
<!-- 内容 -->
<!-- 左边 -->
<div class="home-aside asideL">
<div class="asideL-top">
@ -36,16 +34,10 @@
</div>
<!-- 中间 -->
<div class="home-center">
<div class="middle-top">
<Yszs />
</div>
<div class="middle-top"><Yszs /></div>
<div class="flex middle-bottom mt10">
<div class="mr10" style="width: 50%;">
<DeployControl />
</div>
<div class="flex-1" style="flex: 1;">
<ZdryWarning />
</div>
<div class="mr10" style="width: 50%;"><DeployControl /></div>
<div class="flex-1" style="flex: 1;"><ZdryWarning /></div>
</div>
</div>

View File

@ -6,7 +6,7 @@
<div style="height:33px;">
<CheckBox :data="checkData" @changeData="changeData"></CheckBox>
</div>
<ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
<ul class="ryBox" ref="scrollTableRef" @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll" v-loading="loading" v-infinite-scroll="loadList" >
<li v-for="item in personList" :key="item.id" @click="chooseItem(item)">
<DeployControlItem :item="item" :dict="{D_BZ_HPZL}"/>
</li>
@ -21,7 +21,7 @@ import { qcckPost } from "@/api/qcckApi.js";
import DeployControlItem from "@/views/home/components/deployControlItem.vue";
import * as MOSTY from "@/components/MyComponents/index";
import CheckBox from "@/components/checkBox/index.vue";
import { ref ,reactive, onMounted,getCurrentInstance} from 'vue';
import { ref ,reactive, onMounted,onUnmounted,getCurrentInstance} from 'vue';
const { proxy } = getCurrentInstance();
const {D_BZ_HPZL} =proxy.$dict('D_BZ_HPZL')
const checkData = reactive({
@ -33,9 +33,50 @@ const yjJb = ref('10,20,30,40');
const pageNum = ref(1);
const loading = ref(false); // 加载中
const personList = ref([]);
const scrollTableRef = ref(null) // 滚动元素区域
let isAutoScrolling = true // 是否自动滚动
const intervalId = ref(null) //定时器
onMounted(()=>{
getList()
autoScroll()
})
onUnmounted(() => {
if (intervalId.value) clearInterval(intervalId.value)// 清理定时器
})
// 自动滚动
const autoScroll = () => {
intervalId.value = setInterval(() => {
if (!isAutoScrolling) return
const scrollTableEl = scrollTableRef.value
scrollTableEl.scrollTop += 1 // 垂直滚动距离
let scrollTop = scrollTableEl.scrollTop;
let scrollHeight = scrollTableEl.scrollHeight;
let offsetHeight = Math.ceil(scrollTableEl.getBoundingClientRect().height);
let currentHeight = scrollTop + offsetHeight;
if (currentHeight >= scrollHeight) { // 到底部
if(personList.value.length == total.value){
scrollTableEl.scrollTop = 0;
}else{
pageNum.value++;
getList('load')
}
}
}, 100)
}
// 停止滚动
const stopAutoScroll = () => {
isAutoScrolling = false
}
// 开始滚动
const startAutoScroll = () => {
isAutoScrolling = true
autoScroll()
}
// 复选框切换
function changeData(val){
pageNum.value = 1;
@ -60,9 +101,9 @@ const loadList = () =>{
getList()
}
const getList = () =>{
const getList = (type) =>{
let data = { pageSize:10, pageNum:pageNum.value,yjJb:yjJb.value ,bkyj:1};
loading.value = true;
loading.value = !type ? true : false;
qcckPost(data,'/mosty-gsxt/tbYjxx/getPageList').then(res=>{
loading.value = false;
let arr = res.records || [];

View File

@ -6,7 +6,7 @@
<div style="height:33px;">
<CheckBox :data="checkData" @changeData="changeData"></CheckBox>
</div>
<ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
<ul class="ryBox" ref="scrollCgTableRef" @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll" v-loading="loading" v-infinite-scroll="loadList">
<li v-for="item in personList" :key="item.id" @click="chooseItem(item)">
<YjItem :item="item" :dict="{D_BZ_HPZL}"></YjItem>
</li>
@ -21,7 +21,7 @@ import { qcckPost } from "@/api/qcckApi.js";
import YjItem from "@/views/home/components/yjItem.vue";
import * as MOSTY from "@/components/MyComponents/index";
import CheckBox from "@/components/checkBox/index.vue";
import { ref ,reactive, onMounted,getCurrentInstance} from 'vue';
import { ref ,reactive, onMounted,getCurrentInstance , onUnmounted} from 'vue';
const { proxy } = getCurrentInstance();
const {D_BZ_HPZL} =proxy.$dict('D_BZ_HPZL')
const checkData = reactive({
@ -33,9 +33,49 @@ const yjJb = ref('1,2');
const pageNum = ref(1);
const loading = ref(false); // 加载中
const personList = ref([]);
const scrollCgTableRef = ref(null) // 滚动元素区域
let isAutoScrolling = true // 是否自动滚动
const intervalId = ref(null) //定时器
onMounted(()=>{
getList()
autoScroll()
})
onUnmounted(() => {
if (intervalId.value) clearInterval(intervalId.value)// 清理定时器
})
// 自动滚动
const autoScroll = () => {
intervalId.value = setInterval(() => {
if (!isAutoScrolling) return
const scrollTableEl = scrollCgTableRef.value
scrollTableEl.scrollTop += 1 // 垂直滚动距离
let scrollTop = scrollTableEl.scrollTop;
let scrollHeight = scrollTableEl.scrollHeight;
let offsetHeight = Math.ceil(scrollTableEl.getBoundingClientRect().height);
let currentHeight = scrollTop + offsetHeight;
if (currentHeight >= scrollHeight) { // 到底部
if(personList.value.length == total.value){
scrollTableEl.scrollTop = 0;
}else{
pageNum.value++;
getList('load')
}
}
}, 100)
}
// 停止滚动
const stopAutoScroll = () => {
isAutoScrolling = false
}
// 开始滚动
const startAutoScroll = () => {
isAutoScrolling = true
autoScroll()
}
// 复选框切换
function changeData(val){
pageNum.value = 1;
@ -58,9 +98,9 @@ const loadList = () =>{
getList()
}
const getList = () =>{
const getList = (type) =>{
let data = { pageSize:10, pageNum:pageNum.value,yjLx:yjJb.value };
loading.value = true;
loading.value = !type ? true : false;
qcckPost(data,'/mosty-gsxt/tbYjxx/getPageList').then(res=>{
loading.value = false;
let arr = res.records || [];