更新
This commit is contained in:
@ -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>
|
||||
|
@ -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 || [];
|
||||
|
@ -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 || [];
|
||||
|
Reference in New Issue
Block a user