sgxt_web/src/views/home/model/deployControl.vue

<template>
  <div class="comom-title">
    <span class="title">布控预警</span>
  </div>
  <div class="comom-cnt zdryBox">
    <div style="height:33px;">
      <CheckBox :data="checkData" @changeData="changeData"></CheckBox>
    </div>
    <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>
      <MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
    </ul>
  </div>
</template>

<script setup>
import emitter from "@/utils/eventBus.js";
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,onUnmounted,getCurrentInstance} from 'vue';
const { proxy } = getCurrentInstance();
const {D_BZ_HPZL} =proxy.$dict('D_BZ_HPZL')
const checkData = reactive({
  list: ["一级", "二级", "三级", "四级"],
  hasChoose: ["一级", "二级", "三级", "四级"]
});
const total = ref(0);
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)// 清理定时器
  stopAutoScroll()
})
// 自动滚动
const autoScroll = () => {
  if(personList.value.length==0){return}
  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;
  personList.value = [];
  checkData.hasChoose = val;
  let ids = [];
  val.forEach(it => {
    if(it == '一级') ids.push(10);
    if(it == '二级') ids.push(20);
    if(it == '三级') ids.push(30);
    if(it == '四级') ids.push(40);
  });
  yjJb.value = ids.join(',')
  if(val.length == 0) personList.value = [];
  else getList();
}

// 触底加载
const loadList = () =>{
  if( personList.value.length == total.value) return;
  pageNum.value++;
  getList()
}

const getList = (type) =>{
  let data = {  pageSize:10, pageNum:pageNum.value,yjJb:yjJb.value ,bkyj:1};
  loading.value = !type ? true : false;
  qcckPost(data,'/mosty-gsxt/tbYjxx/getPageList').then(res=>{
    loading.value = false;
    let arr = res.records || [];
    personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
    total.value = res.total;
  }).catch(()=>{
    loading.value = false;
  })
}

const chooseItem = (item) =>{
  emitter.emit('showHomeYJ',[item]);
  emitter.emit('deletePointArea','home_yj_map');
  if(!item.jd || !item.jd) return proxy.$message({ type: "warning",  message: "该预警没有坐标！" });
  let icon = require('@/assets/point/yj.png');
  if(item.yjjb == '20') icon = require('@/assets/point/yj1.png');
  if(item.yjjb == '30') icon = require('@/assets/point/yj2.png');
  if(item.yjjb == '40') icon = require('@/assets/point/yj3.png');
  emitter.emit('addPointArea',{flag:'home_yj_map',icon,coords:[item]});
  emitter.emit('setMapCenter',{location:[item.jd,item.wd],zoomLevel:10});
}
</script>

<style>
.el-loading-mask{
  background: rgba(0,0,0,0.5);
}
</style>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.zdryBox{
  background: #052249;
  height: 100%;
  .ryBox{
    height: calc(100% - 33px);
    overflow: hidden;
    overflow-y: auto;
  }
}

::-webkit-scrollbar {
  background-color: #263b70;
}
::-webkit-scrollbar-thumb {
  background-color: #146bbe;
}
::-webkit-scrollbar-track {
  background-color: #263b70;
}
::-webkit-scrollbar-corner {
  background-color: #142141;
}

::v-deep .el-checkbox__label{
  color:#fff;
}
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
  color:#00FFFF;
}
::v-deep .el-checkbox__inner{
  background:rgba(0,144,255,0.2);
  border:1px solid #0072FF;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
  background-color: #00FFFF;
  border-color:#00FFFF;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background-color: #00FFFF;
  border-color:#00FFFF;
}
::v-deep .el-checkbox__inner::after{
  border:2px solid #000;
  border-left:0;
  border-top:0;
  left:3px;
  top:0px;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
  background: #000;
}

</style>