初始提交

src/pages/yyzx/jqxx/index.vue

@@ -0,0 +1,218 @@
+<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>