dy_app/src/pages/yyzx/jqxx/index.vue

<template>
  <div>
    <TopNav navTitle="警情列表" :showRight="false" :showLeft="true" />
    <van-sticky>
      <div class="sticky_box">
        <Tabs
          :list="tabs"
          @onYjjb="onSelect"
          :type="'car'"
          :key="tabsIndex"
        ></Tabs>
        <Search
          placeholder="请输入关键字"
          v-model="kwd"
          :isSx="true"
          @update:sx="showPopup = !showPopup"
          @update:modelValue="onSearch"
        ></Search>
      </div>
    </van-sticky>
    <SxPopup
      :showPopup="showPopup"
      :list="yjxx.sxList"
      :p_top="145"
      @update:close="showPopup = false"
      @update:onConfirm="onConfirm"
      :kssj="dateFormat()"
      :jssj="dateFormat()"
    />
    <van-pull-refresh v-model="loadingPull" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text=" "
        @load="onLoad"
        offset="1"
        :immediate-check="false"
      >
        <List
          v-for="(item, index) in yjxx.list"
          :key="index"
          :item="item"
          path="/yyzx/jqxx/jqDetail"
        />
        <van-empty
          description="没有警情信息"
          image="default"
          v-if="yjxx.list.length <= 0 && showEmpty"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import TopNav from "../../../components/topNav.vue";
import Search from "../../../components/search.vue";
import Tabs from "../../../components/tabs.vue";
import SxPopup from "../../../components/SxPopup.vue";
import List from "../../../components/JqList.vue";
import { setTimeQuantum, dateFormat } from "../../../utils/tools.js";
import { getDictList, setDict } from "../../../utils/dict";
import { ref, reactive, onMounted, watch } from "vue";
import { getJqList, getStatistics } from "../../../api/jqxx";
const tabs = ref([
  {
    name: "全部警情",
    value: null,
    count: 0,
  },
  {
    name: "刑事警情",
    value: 1,
    count: 0,
  },
  {
    name: "行政警情",
    value: 2,
    count: 0,
  },
  {
    name: "交通警情",
    value: 3,
    count: 0,
  },
  {
    name: "其他",
    value: 4,
    count: 0,
  },
]);
const sx = ref([setTimeQuantum()]);
sx.value[0].array[0].isCheck = true;
const yjxx = reactive({
  sxList: sx.value, //筛选条件数据
  list: [], //预警列表数据,
  total: 0,
});
const params = ref({
  pageNum: 1,
  pageSize: 10,
  bjnr: "",
  bjlb: "",
  endTime: dateFormat(),
  startTime: dateFormat(),
});
const tabsIndex = ref(1);
const kwd = ref("");
const finished = ref(false);
const loading = ref(false);
const loadingPull = ref(false);
const showEmpty = ref(false);
const showPopup = ref(false); //筛选弹窗
//下拉刷新
function onRefresh() {
  tabsIndex.value++;
  yjxx.list = [];
  params.value.pageNum = 1;
  params.value.bjnr = "";
  params.value.bjlb = "";
  params.value.endTime = "";
  params.value.startTime = "";
  getList();
  getJqtj();
}
//获取警情列表
function getList() {
  loading.value = false;
  getJqList(params.value)
    .then((res) => {
      loading.value = false;
      loadingPull.value = false;
      if (res.records && res.records.length > 0) {
        yjxx.list.push(...res.records);
      } else {
        showEmpty.value = true;
      }
      yjxx.total = res.total;
    })
    .catch((err) => {
      loading.value = false;
      showEmpty.value = true;
    });
}
function onLoad() {
  if (yjxx.list >= yjxx.total) {
    finished.value = true;
    return;
  }
  params.value.pageNum++;
  getList();
}
//获取警情统计数据
function getJqtj() {
  const data = {
    endTime: params.value.endTime,
    startTime: params.value.startTime,
    bjnr: params.value.bjnr,
  };
  getStatistics(data).then((res) => {
    tabs.value[0].count = res.jtCount + res.qtCount + res.xsCount + res.xzCount;
    tabs.value[1].count = res.xsCount;
    tabs.value[2].count = res.xzCount;
    tabs.value[3].count = res.jtCount;
    tabs.value[4].count = res.qtCount;
  });
}
onMounted(() => {
  getList();
  getJqtj();
});
/**
 * tab选择
 * @param {Object} val
 */
function onSelect(val) {
  // loading.value = true;
  finished.value = false;
  yjxx.list = [];
  params.value.bjnr = "";
  params.value = {
    pageNum: 1,
    pageSize: 10,
    endTime: params.value.endTime,
    startTime: params.value.startTime,
    bjlb: !val ? null : val,
  };
  getList();
}
/**
 * 关键字搜索
 * @param {Object} val
 */
function onSearch(val) {
  yjxx.list = [];
  params.value.bjnr = val;
  params.value = {
    pageNum: 1,
    pageSize: 20,
    endTime: "",
    startTime: "",
    bjlb: !val ? null : val,
  };
  getList();
  getJqtj();
}
function onConfirm(val) {
  yjxx.list = [];
  params.value.startTime = val.startTime;
  params.value.endTime = val.endTime;
  getList();
  getJqtj();
  showPopup.value = false;
}
</script>

<style>
</style>