sgxt_web/src/views/home/model/experience copy.vue

<template>
  <div class="comom-title">
    <span class="title">经验分享</span>
  </div>
  <div class="comom-cnt zdryBox">
    <!-- <ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
      <li v-for="item in personList" :key="item.id" >
        <Assessment :item="item" :dict="{D_GS_ZDQT_LB,D_BZ_TYJB}" :lx="3"/>
      </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 Assessment from "@/views/home/components/assessmentItem.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 {D_GS_ZDQT_LB,D_BZ_TYJB} =proxy.$dict('D_GS_ZDQT_LB','D_BZ_TYJB')
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([]);
onMounted(()=>{
  getList()
})
// 复选框切换
function changeData(val){
  pageNum.value = 1;
  personList.value = [];
  checkData.hasChoose = val;
  let ids = [];
  val.forEach(it => {
    if(it == '人员') ids.push(1);
    if(it == '车辆') ids.push(2);
  });
  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 = () =>{
  let data = {  pageSize:10, pageCurrent:pageNum.value };
  loading.value = true;
  qcckPost(data,'/mosty-gsxt/gsxt/jyfx/selectPage').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: 100%;
    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>