更新

src/router/index.js

@@ -220,6 +220,12 @@ export const publicRoutes = [
             meta: { title: "积分排名", icon: "article" },
             component: () => import("@/views/backOfficeSystem/fourColorManage/warningControl/scoreRanking/index"),
           },
+          {
+            path: "/sevenWarning",
+            name: "sevenWarning",
+            meta: { title: "七类重点人员", icon: "article" },
+            component: () => import("@/views/backOfficeSystem/fourColorManage/warningControl/sevenWarning/index.vue"),
+          },
           // {
           //   path: "/modelWarning",
           //   name: "modelWarning",

src/views/backOfficeSystem/fourColorManage/warningControl/sevenWarning/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div>
+    <div class="titleBox">
+      <PageTitle title="七类重点人员" />
+
+    </div>
+    <!-- 搜索 -->
+    <div ref="searchBox">
+      <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount">
+        <template #age="{ row }">
+          <div class="ageBox">
+            <el-input v-model="queryFrom.age_s"  type="number" :min="1" :max="100" style="width: 80px;"></el-input>
+            <span style="color: #333;" class="ml5 mr5">至</span>
+            <el-input v-model="queryFrom.age_b" type="number" :min="parseInt(queryFrom.age_s)+1" :max="100" style="width: 80px;"></el-input>
+          </div>
+        </template>
+      </Search>
+    </div>
+    <!-- 表格 -->
+    <div class="tabBox">
+      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
+        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
+        <template #czzt="{ row }">
+          <DictTag :value="row.czzt" :tag="false" :options="D_GSXT_YJXX_CZZT" />
+        </template>
+        <template #sex="{ row }">
+            <span v-if="row.yjRysfzh"> {{ IdCard.getSex(row.yjRysfzh,2) }} </span>
+        </template>
+        <template #age="{ row }">
+            <span v-if="row.yjRysfzh"> {{ IdCard.getAge(row.yjRysfzh,3) }} </span>
+        </template>
+        <template #yjJb="{ row }">
+          <DictTag :value="row.yjJb" :tag="false" :options="D_BZ_YJJB" />
+        </template>
+        <template #bqdl="{ row }">
+          <DictTag :value="row.bqdl" :tag="false"  :options="D_GS_QLZDRLX" />
+        </template>
+        <template #yjLylx="{ row }">
+          <DictTag :value="row.yjLylx" :tag="false"  :options="D_GS_QLZDRLX" />
+        </template>
+       <template #yjLx="{ row }">
+          <DictTag :value="row.yjLx" :tag="false"  :options="D_GS_QLZDRYXX" />
+        </template>
+        <template #controls="{ row }">
+          <el-link type="warning">报错</el-link>
+          <el-link type="warning">指派</el-link>
+        </template>
+      </MyTable>
+      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
+        ...pageData.pageConfiger,
+        total: pageData.total
+      }"></Pages>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { IdCard } from '@/utils/validate.js'
+import PageTitle from "@/components/aboutTable/PageTitle.vue";
+import Search from "@/components/aboutTable/Search.vue";
+import MyTable from "@/components/aboutTable/MyTable.vue";
+import Pages from "@/components/aboutTable/Pages.vue";
+import { qcckGet, qcckPost } from "@/api/qcckApi.js";
+import { reactive, ref, onMounted, getCurrentInstance, } from "vue";
+const { proxy } = getCurrentInstance();
+//    预警类型：D_GS_YJLX
+const { D_GS_YJLX,D_GS_QLZDRLX,D_BZ_RYLB,D_BZ_YJJB, D_GS_QLZDRYXX,D_BZ_XB,D_GSXT_YJXX_CZZT } = proxy.$dict('D_GS_YJLX','D_GS_QLZDRLX','D_BZ_RYLB',"D_BZ_YJJB", "D_GS_QLZDRYXX", "D_BZ_XB","D_GSXT_YJXX_CZZT"); //获取字典数据
+const searchBox = ref(); //搜索框
+const searchConfiger = ref(
+  [
+    { label: "姓名", prop: 'xm', placeholder: "请输入姓名", showType: "input" },
+    { label: "年龄段", prop: 'age', placeholder: "请输入身份证号码", showType: "Slot" },
+    { label: "性别", prop: 'xbdm', placeholder: "请选择性别", showType: "select", options: D_BZ_XB },
+    { label: "身份证", prop: 'sfzh', placeholder: "请输入身份证号码", showType: "input" },
+    { label: "预警时间", prop: 'datatime', showType: "datetimerange" },
+    { label: "状态", prop: 'czzt', placeholder: "请选择状态", showType: "select", options: D_GSXT_YJXX_CZZT },
+    { label: "人员类别", prop: 'rylb', placeholder: "请选择人员类别", showType: "select", options: D_BZ_RYLB },
+    { label: "细类", prop: 'bqdl', placeholder: "请选择细类", showType: "select", options: D_GS_QLZDRYXX },
+    { label: "活动发生地址", prop: 'hfsdz', placeholder: "请输入活动发生地址", showType: "input" },
+    { label: "接收单位", prop: 'ssbmdm',showType: "department" },
+  ]);
+
+const queryFrom = ref({});
+const pageData = reactive({
+  tableData: [], //表格数据
+  keyCount: 0,
+  tableConfiger: {
+    rowHieght: 61,
+    showSelectType: "null",
+    loading: false,
+    haveControls: true
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageCurrent: 1
+  }, //分页
+  controlsWidth: 160, //操作栏宽度
+  tableColumn: [
+    { label: "状态", prop: "czzt", showSolt: true },
+    { label: "预警时间", prop: "yjSj" },
+    { label: "人员姓名", prop: "yjRyxm", },
+    { label: "身份证号", prop: "yjRysfzh", },
+    { label: "性别", prop: "sex" ,showSolt: true },
+    { label: "年龄", prop: "age", showSolt: true },
+    { label: "预警级别", prop: "yjJb", showSolt: true },
+    { label: "人员类别", prop: "yjLx", showSolt: true },
+    { label: "细类", prop: "bqdl" ,showSolt: true},
+    { label: "轨迹类别", prop: "yjLylx", showSolt: true },
+    { label: "活动发生地", prop: "yjDz" },
+    { label: "接收单位", prop: "ssbm" },
+    { label: "预警次数", prop: "yjCs" },
+  ]
+});
+
+onMounted(() => {
+  tabHeightFn();
+  getList()
+});
+
+// 搜索
+const onSearch = (val) => {
+  queryFrom.value = { ...val }
+  pageData.pageConfiger.pageCurrent = 1;
+  getList()
+}
+const changeNo = (val) => {
+  pageData.pageConfiger.pageCurrent = val;
+  getList()
+}
+const changeSize = (val) => {
+  pageData.pageConfiger.pageSize = val;
+  getList()
+}
+const getList = () => {
+  pageData.tableConfiger.loading = true;
+  const promes = {
+    ...queryFrom.value,
+    pageCurrent: pageData.pageConfiger.pageCurrent,
+    pageSize: pageData.pageConfiger.pageSize
+  }
+  qcckPost(promes, '/mosty-gsxt/tbYjxx/getQlzdrPageList').then((res) => {
+    pageData.total = res.total || 0;
+    pageData.tableConfiger.loading = false;
+    pageData.tableData = res.records || []
+  }).catch(() => {
+    pageData.tableConfiger.loading = false;
+  })
+}
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;
+  window.onresize = function () { tabHeightFn(); };
+};
+</script>
+
+<style>
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+</style>