xzlz_jbWeb/src/views/dataBI/components/Patrolmissions.vue

<template>
  <ul class="patrol-missions" v-if="showModel" infinite-scroll-distance="1" v-infinite-scroll="loadList"
    v-loading="loading">
    <li class="test-item" v-for="(item, index) in list" :key="`info${index}`">
      <div class="person-img"><img src="@/assets/images/person.png" /></div>
      <div class="info">
        <div class="text one_text_detail f16">{{ item.qwmc }}</div>
        <div class="text lh30 flex">负责人:{{ item.xm }} (<dict-tag :options="D_BAXX_GWLX" :value="item.gw" :tag="false" />)
        </div>
        <div class="lh30">电话:{{ item.lxdh }}</div>
        <div class="one_text_detail">巡逻路线:{{ item.bxxmc }}</div>
      </div>
    </li>
    <p class="tc" v-if="list.length > 0 && noMore && !loading">没有数据了</p>
    <MOSTY.Empty :show="true" :imgSize="100" v-if="list.length == 0 && !loading"></MOSTY.Empty>
  </ul>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { qcckGet } from "@/api/qcckApi.js";
import { onMounted, ref, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const { D_BAXX_GWLX } = proxy.$dict("D_BAXX_GWLX");
const list = ref([])
const loading = ref(false);
const page = ref(1);
const total = ref(0)
const noMore = ref(false)
const showModel = ref(false)
onMounted(() => {
  showModel.value = true;
  getDateMeta()
})
// 更新数据
const getDateMeta = () => {
  loading.value = true;
  let params = {
    pageSize: 10,
    pageCurrent: page.value,
  }
  qcckGet(params, '/mosty-jbld/jbldzsd/selectXlrw').then(res => {
    loading.value = false;
    list.value = res;
    // let arr =  res.records || []
    // list.value = page.value == 1 ? arr : list.value.concat(arr);
    // total.value = res.total
  }).catch(() => {
    loading.value = false;
  })
}

// 滚动加载
const loadList = () => {
  //  if(list.value.length == total.value) return noMore.value = true;
  //  noMore.value = false;
  //   page.value++;
  //   getDateMeta();
}

</script>
<style lang="scss" scoped>
.patrol-missions {
  margin-top: 10px;
  height: calc(100% - 10px);
  padding: 10px 10px 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;

  .test-item {
    background: url("~@/assets/images/bi/xlrw.png") no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 10px 14px 20px;
    box-sizing: border-box;
    margin-bottom: 4px;

    &:nth-last-child(1) {
      margin-bottom: 0;
    }

    .person-img {
      width: 116px;
      height: 90px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .info {
      width: calc(100% - 145px);

      .text {
        color: rgb(1, 252, 254);
      }
    }
  }
}

::-webkit-scrollbar {
  background-color: #263b70 !important;
}

::-webkit-scrollbar-thumb {
  background-color: #146bbe !important;
  ;
  border-radius: 50px;
}

::-webkit-scrollbar-track {
  background-color: #263b70 !important;
  ;
}

::-webkit-scrollbar-corner {
  background-color: #142141 !important;
  ;
}
</style>