This commit is contained in:
13684185576
2025-07-19 19:20:35 +08:00
parent 46fb5f3ce5
commit 14ddbbdcc4
2 changed files with 147 additions and 133 deletions

View File

@ -1,107 +1,123 @@
<template>
<ul class="patrol-missions" v-if="showModel" infinite-scroll-distance="1" v-infinite-scroll="loadList" v-loading="loading">
<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">负责人:{{ item.xm }}</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>
<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 } from 'vue';
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(()=>{
onMounted(() => {
showModel.value = true;
getDateMeta()
})
// 更新数据
const getDateMeta = () =>{
// 更新数据
const getDateMeta = () => {
loading.value = true;
let params = {
pageSize:10,
pageCurrent:page.value,
pageSize: 10,
pageCurrent: page.value,
}
qcckGet(params,'/mosty-jbld/dptj/getJbxlrw').then(res=>{
qcckGet(params, '/mosty-jbld/jbldzsd/selectXlrw').then(res => {
loading.value = false;
let arr = res.records || []
list.value = page.value == 1 ? arr : list.value.concat(arr);
total.value = res.total
}).catch(()=>{
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 = () =>{
console.log('鸡杂');
if(list.value.length == total.value) return noMore.value = true;
noMore.value = false;
page.value++;
getDateMeta();
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;
.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;
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;
margin-bottom: 4px;
&:nth-last-child(1) {
margin-bottom: 0;
}
.person-img {
width: 116px;
height: 90px;
img {
width: 100%;
height: 100%;
}
.person-img {
width: 116px;
height: 90px;
img {
width: 100%;
height: 100%;
}
}
.info {
width: calc(100% - 145px);
.text{
color: rgb(1, 252, 254);
}
}
.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;;
}
}
::-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>