更新大屏

src/views/home/model/zdryWarning.vue

@@ -6,7 +6,7 @@
     <div style="height:33px;">
      <CheckBox :data="checkData" @changeData="changeData"></CheckBox>
     </div>
-    <ul class="ryBox" v-loading="loading">
+    <ul class="ryBox" v-loading="loading" v-infinite-scroll="loadList" style="overflow: auto">
       <li :class="item.isChecked ? 'active':''" v-for="item in personList" :key="item.id" >
         <YjItem :item="item"></YjItem>
       </li>
@@ -16,85 +16,65 @@
 </template>
 
 <script setup>
+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} from 'vue';
+import { ref ,reactive, onMounted} from 'vue';
 const checkData = reactive({
   list: ["红", "橙", "黄", "蓝"],
   hasChoose: ["红"]
 });
+const total = ref(0);
+const yjJb = ref('');
+const pageNum = ref(1);
 const loading = ref(false); // 加载中
-const personList = ref([
-  {
-    image: require("@/assets/images/person.png"),
-    name: "张三",
-    gender: "男",
-    similarity: 85,
-    sfzh:'11010119900307121X',
-    age: 25,
-    mz:'汉',
-    warningTime: "2025-02-15 13: 00",
-    location: "林艺市八宫区天山路宫区天山路宫区天山路",
-    yjjb:'10',
-    yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
-  },
-  {
-    image: require("@/assets/images/person.png"),
-    name: "张三",
-    gender: "男",
-    age: 25,
-    sfzh:'11010119900307121X',
-    mz:'汉',
-    similarity: 85,
-    warningTime: "2025-02-15 13: 00",
-    location: "林艺市八宫区天山路宫区天山路宫区天山路",
-    yjjb:'20',
-    yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
-  },
-  {
-    image: require("@/assets/images/person.png"),
-    name: "张三",
-    gender: "男",
-    age: 25,
-    mz:'汉',
-    sfzh:'11010119900307121X',
-    similarity: 85,
-    warningTime: "2025-02-15 13: 00",
-    location: "林艺市八宫区天山路...",
-    yjjb:'30',
-    yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
-  },
-  {
-    image: require("@/assets/images/person.png"),
-    name: "张三",
-    gender: "男",
-    age: 25,
-    mz:'汉',
-    sfzh:'11010119900307121X',
-    similarity: 85,
-    warningTime: "2025-02-15 13: 00",
-    location: "林艺市八宫区天山路...",
-    yjjb:'40',
-    yjnr:'2024-02-05 12:10:10 默默人在在某某公园持枪抢劫'
-  },
-]);
+const personList = ref([]);
+onMounted(()=>{
+  getList()
+})
 // 复选框切换
-function changeData(){
-  console.log('切换');
+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 contentItem = ref([
-    {label:'线索总数',value:'892'},
-    {label:'下发总数',value:'892'},
-    {label:'已处置总数',value:'892'},
-    {label:'反馈总数',value:'892'},
-    {label:'未反馈总数',value:'892'},
-    {label:'未处置总数',value:'892'},
-])
+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;
+  })
+}
 </script>
 
+<style>
+.el-loading-mask{
+  background: rgba(0,0,0,0.5);
+}
+</style>
 
 <style lang="scss" scoped>
 @import "@/assets/css/homeScreen.scss";