zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
Esacpe
2025-08-29 14:30:58 +08:00
parent 3647241da0
commit 3272bbd888
4 changed files with 93 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/homeScreen.scss
View File

@ -258,7 +258,7 @@
left: 50%; left: 50%;
bottom: 2px; bottom: 2px;
transform: translateX(-50%); transform: translateX(-50%);
width: calc(100% - 920px); width: calc(100% - 890px);
height: calc((100% - 141px)/3 - 32px); height: calc((100% - 141px)/3 - 32px);
min-width: 560px; min-width: 560px;
overflow: hidden; overflow: hidden;

14
src/views/home/index.vue
View File

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

49
src/views/home/model/deployControl.vue
View File

@ -6,7 +6,7 @@
<div style="height:33px;"> <div style="height:33px;">
<CheckBox :data="checkData" @changeData="changeData"></CheckBox> <CheckBox :data="checkData" @changeData="changeData"></CheckBox>
</div> </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)"> <li v-for="item in personList" :key="item.id" @click="chooseItem(item)">
<DeployControlItem :item="item" :dict="{D_BZ_HPZL}"/> <DeployControlItem :item="item" :dict="{D_BZ_HPZL}"/>
</li> </li>
@ -21,7 +21,7 @@ import { qcckPost } from "@/api/qcckApi.js";
import DeployControlItem from "@/views/home/components/deployControlItem.vue"; import DeployControlItem from "@/views/home/components/deployControlItem.vue";
import * as MOSTY from "@/components/MyComponents/index"; import * as MOSTY from "@/components/MyComponents/index";
import CheckBox from "@/components/checkBox/index.vue"; 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 { proxy } = getCurrentInstance();
const {D_BZ_HPZL} =proxy.$dict('D_BZ_HPZL') const {D_BZ_HPZL} =proxy.$dict('D_BZ_HPZL')
const checkData = reactive({ const checkData = reactive({
@ -33,9 +33,50 @@ const yjJb = ref('10,20,30,40');
const pageNum = ref(1); const pageNum = ref(1);
const loading = ref(false); // 加载中 const loading = ref(false); // 加载中
const personList = ref([]); const personList = ref([]);
const scrollTableRef = ref(null) // 滚动元素区域
let isAutoScrolling = true // 是否自动滚动
const intervalId = ref(null) //定时器
onMounted(()=>{ onMounted(()=>{
getList() 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){ function changeData(val){
pageNum.value = 1; pageNum.value = 1;
@ -60,9 +101,9 @@ const loadList = () =>{
getList() getList()
} }
const getList = () =>{ const getList = (type) =>{
let data = { pageSize:10, pageNum:pageNum.value,yjJb:yjJb.value ,bkyj:1}; 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=>{ qcckPost(data,'/mosty-gsxt/tbYjxx/getPageList').then(res=>{
loading.value = false; loading.value = false;
let arr = res.records || []; let arr = res.records || [];

48
src/views/home/model/zdryWarning.vue
View File

@ -6,7 +6,7 @@
<div style="height:33px;"> <div style="height:33px;">
<CheckBox :data="checkData" @changeData="changeData"></CheckBox> <CheckBox :data="checkData" @changeData="changeData"></CheckBox>
</div> </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)"> <li v-for="item in personList" :key="item.id" @click="chooseItem(item)">
<YjItem :item="item" :dict="{D_BZ_HPZL}"></YjItem> <YjItem :item="item" :dict="{D_BZ_HPZL}"></YjItem>
</li> </li>
@ -21,7 +21,7 @@ import { qcckPost } from "@/api/qcckApi.js";
import YjItem from "@/views/home/components/yjItem.vue"; import YjItem from "@/views/home/components/yjItem.vue";
import * as MOSTY from "@/components/MyComponents/index"; import * as MOSTY from "@/components/MyComponents/index";
import CheckBox from "@/components/checkBox/index.vue"; 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 { proxy } = getCurrentInstance();
const {D_BZ_HPZL} =proxy.$dict('D_BZ_HPZL') const {D_BZ_HPZL} =proxy.$dict('D_BZ_HPZL')
const checkData = reactive({ const checkData = reactive({
@ -33,9 +33,49 @@ const yjJb = ref('1,2');
const pageNum = ref(1); const pageNum = ref(1);
const loading = ref(false); // 加载中 const loading = ref(false); // 加载中
const personList = ref([]); const personList = ref([]);
const scrollCgTableRef = ref(null) // 滚动元素区域
let isAutoScrolling = true // 是否自动滚动
const intervalId = ref(null) //定时器
onMounted(()=>{ onMounted(()=>{
getList() 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){ function changeData(val){
pageNum.value = 1; pageNum.value = 1;
@ -58,9 +98,9 @@ const loadList = () =>{
getList() getList()
} }
const getList = () =>{ const getList = (type) =>{
let data = { pageSize:10, pageNum:pageNum.value,yjLx:yjJb.value }; 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=>{ qcckPost(data,'/mosty-gsxt/tbYjxx/getPageList').then(res=>{
loading.value = false; loading.value = false;
let arr = res.records || []; let arr = res.records || [];