更新大屏

src/views/home/model/zdgk.vue

@@ -6,7 +6,7 @@
         :style="{ fontSize: activeIndex == idx ? '22px' : '18px' }"
         v-for="(it, idx) in btns"
         :key="idx"
-        @click="activeIndex = idx"
+        @click="changeIndex(idx)"
         >{{ it }}</span
       >
     </div>
@@ -21,63 +21,34 @@
       :key="pageData.keyCount"
       :tableConfiger="pageData.tableConfiger"
     >
+    <template #ryXb="{row}">
+      <DictTag :tag="false" :value="row.ryXb" :options="D_BZ_XB" />
+    </template>
+    <template #qtLb="{row}">
+      <DictTag :tag="false" :value="row.qtLb" :options="D_GS_ZDQT_LB" />
+    </template>
+    <template #qtFxdj="{row}">
+      <DictTag :tag="false" :value="row.qtFxdj" :options="D_GS_ZDQT_FXDJ" />
+    </template>
       <template #tp="{ row }">
-        <img width="30" src="@/assets/images/icon100.png" alt="" />
+        <img width="30" height="30" src="" alt="" />
       </template>
     </MyTable>
   </div>
 </template>
     
 <script setup>
+import { qcckGet } from "@/api/qcckApi.js";
 import MyTable from "@/components/aboutTable/DarkTable.vue";
-import { reactive, ref,onMounted } from "vue";
+import { reactive, ref,onMounted,getCurrentInstance } from "vue";
+const { proxy } = getCurrentInstance();
+const { D_BZ_XB,D_GS_ZDQT_LB,D_GS_ZDQT_FXDJ } = proxy.$dict('D_BZ_XB','D_GS_ZDQT_LB','D_GS_ZDQT_FXDJ');
 const btns = reactive(["重点人管控信息", "重点全体管控信息"]);
 const activeIndex = ref(0);
+const page = ref(1);
+const total = ref(0);
 const pageData = reactive({
-  tableData: [
-    {
-      tp: "https://example.com/photo1.jpg",
-      xm: "张三",
-      xb: "男",
-      sfzh: "330102199001011234",
-      gkyy: "抢劫xxxxx"
-    },
-    {
-      tp: "https://example.com/photo2.jpg",
-      xm: "李四",
-      xb: "女",
-      sfzh: "330102199203034567",
-      gkyy: "抢劫xxxxx"
-    },
-    {
-      tp: "https://example.com/photo3.jpg",
-      xm: "王五",
-      xb: "男",
-      sfzh: "330102199505057890",
-      gkyy: "抢劫xxxxx"
-    },
-    {
-      tp: "https://example.com/photo3.jpg",
-      xm: "王五",
-      xb: "男",
-      sfzh: "330102199505057890",
-      gkyy: "抢劫xxxxx"
-    },
-    {
-      tp: "https://example.com/photo3.jpg",
-      xm: "王五",
-      xb: "男",
-      sfzh: "330102199505057890",
-      gkyy: "抢劫xxxxx"
-    },
-    {
-      tp: "https://example.com/photo3.jpg",
-      xm: "王五",
-      xb: "男",
-      sfzh: "330102199505057890",
-      gkyy: "抢劫xxxxx"
-    }
-  ],
+  tableData: [],
   keyCount: 0,
   tableConfiger: {
     loading: false,
@@ -94,27 +65,74 @@ const pageData = reactive({
   }, //分页
   tableColumn: [
     { label: "照片", prop: "tp", showSolt: true },
-    { label: "姓名", prop: "xm", showOverflowTooltip: true },
-    { label: "性别", prop: "xb", showOverflowTooltip: true },
-    { label: "身份证号码", prop: "sfzh", showOverflowTooltip: true },
-    { label: "管控原因", prop: "gkyy", showOverflowTooltip: true }
+    { label: "姓名", prop: "ryXm", showOverflowTooltip: true },
+    { label: "性别", prop: "ryXb", showOverflowTooltip: true,showSolt:true },
+    { label: "身份证号码", prop: "rySfzh", showOverflowTooltip: true },
+    { label: "管控原因", prop: "zdrLkyy", showOverflowTooltip: true }
   ]
 });
 
 onMounted(() => {
   tabHeightFn();
-  window.onresize = function () {
-    tabHeightFn();
-  };
+  getList()
 });
 
+// 切换啊按钮
+const changeIndex = (index) =>{
+  activeIndex.value = index;
+  page.value  = 1;
+   pageData.tableData = [];
+   switch(index){
+    case 0:
+      pageData.tableColumn = [
+        { label: "照片", prop: "tp", showSolt: true },
+        { label: "姓名", prop: "ryXm", showOverflowTooltip: true },
+        { label: "性别", prop: "ryXb", showOverflowTooltip: true,showSolt:true },
+        { label: "身份证号码", prop: "rySfzh", showOverflowTooltip: true },
+        { label: "管控原因", prop: "zdrLkyy", showOverflowTooltip: true }
+      ]
+      break;
+    case 1:
+      pageData.tableColumn = [
+        { label: "照片", prop: "tp", showSolt: true },
+        { label: "群体名称", prop: "qtMc", showOverflowTooltip: true },
+        { label: "群体类别", prop: "qtLb", showOverflowTooltip: true,showSolt:true },
+        { label: "风险等级", prop: "qtFxdj", showOverflowTooltip: true ,showSolt: true},
+        { label: "列控原因", prop: "zdrLkyy", showOverflowTooltip: true }
+      ]
+      break;
+   }
+   pageData.keyCount++;
+   getList()
+}
+
+// 获取列表
+const getList = () => {
+  pageData.tableConfiger.loading = true;
+  let data = { pageSize:10,pageCurrent:page.value };
+  let url =  activeIndex.value == 0 ? '/mosty-gsxt/tbGsxtZdry/selectPage':'/mosty-gsxt/tbGsxtZdqt/selectPage'
+  qcckGet(data, url).then((res) => {
+    let arr = res.records || [];
+    pageData.tableData = page.value == 1 ? arr : pageData.tableData.concat(arr)
+    total.value = res.total;
+    pageData.tableConfiger.loading = false;
+  }).catch(() => {
+    pageData.tableConfiger.loading = false;
+  });
+};
+
 // 表格高度计算
 const tabHeightFn = () => {
   pageData.tableHeight =  document.getElementById('zdgk').offsetHeight - 10;
+  window.onresize = function () {
+    tabHeightFn();
+  };
 };
 
 const changePage = () => {
-  console.log("触底加载==========");
+  if(pageData.tableData.length == total.value) return false;
+  page.value++;
+  getList()
 };
 </script>