sgxt_web/src/views/home/model/zdryWarning.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" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
      <li v-for="item in personList" :key="item.id" @click="chooseItem(item)">
        <YjItem :item="item"></YjItem>
      </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 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';
const { proxy } = getCurrentInstance();
const checkData = reactive({
  list: ["红", "橙", "黄", "蓝"],
  hasChoose: ["红"]
});
const total = ref(0);
const yjJb = ref('');
const pageNum = ref(1);
const loading = ref(false); // 加载中
const personList = ref([]);
onMounted(()=>{
  getList()
})
// 复选框切换
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(',')
  getList()
}

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

const getList = () =>{
  let params = {  pageSize:10, pageNum:pageNum.value,yjJb:yjJb.value };
  loading.value = true;
  qcckPost({params},'/mosty-jmxf/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('deletePointArea','home_yj_map');
  console.log(item.jd,item.wd);
  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;
  .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>