更新大屏

2025-04-15 14:38:12 +08:00
parent 8b786df36a
commit 7d1ed23a98
90 changed files with 2828 additions and 1061 deletions
--- a/src/views/home/model/zdgk.vue
+++ b/src/views/home/model/zdgk.vue
@ -0,0 +1,148 @@
+<template>
+  <div class="comom-title">
+    <div class="title">
+      <span
+        class="mr12 pointer nowrap"
+        :style="{ fontSize: activeIndex == idx ? '22px' : '18px' }"
+        v-for="(it, idx) in btns"
+        :key="idx"
+        @click="activeIndex = idx"
+        >{{ it }}</span
+      >
+    </div>
+  </div>
+  <div id="zdgk" class="comom-cnt">
+    <MyTable
+      @changePage="changePage"
+      customClass="zdy_bkcz_table"
+      :tableData="pageData.tableData"
+      :tableColumn="pageData.tableColumn"
+      :tableHeight="pageData.tableHeight"
+      :key="pageData.keyCount"
+      :tableConfiger="pageData.tableConfiger"
+    >
+      <template #tp="{ row }">
+        <img width="30" src="@/assets/images/icon100.png" alt="" />
+      </template>
+    </MyTable>
+  </div>
+</template>
+    
+<script setup>
+import MyTable from "@/components/aboutTable/DarkTable.vue";
+import { reactive, ref,onMounted } from "vue";
+const btns = reactive(["重点人管控信息", "重点全体管控信息"]);
+const activeIndex = 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"
+    }
+  ],
+  keyCount: 0,
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    haveControls: false,
+    showSelectType: "null",
+    showIndex: false,
+    stripe: true
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageNum: 1
+  }, //分页
+  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 }
+  ]
+});
+
+onMounted(() => {
+  tabHeightFn();
+  window.onresize = function () {
+    tabHeightFn();
+  };
+});
+
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight =  document.getElementById('zdgk').offsetHeight - 10;
+};
+
+const changePage = () => {
+  console.log("触底加载==========");
+};
+</script>
+    
+    
+  <style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+::v-deeep .comom-title {
+  background: url("~@/assets/images/bg18.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+::v-deep .el-table td.el-table__cell {
+  color: #ffffff;
+}
+
+::v-deep
+  .el-table--striped
+  .el-table__body
+  tr.el-table__row--striped
+  td.el-table__cell {
+  background: rgba(0, 61, 130, 0.75);
+}
+</style>
+  <style lang="scss">
+.zdy_bkcz_table td.el-table__cell {
+  color: #ffffff !important;
+}
+.zdy_bkcz_table th.el-table__cell {
+  color: #ffffff !important;
+  font-size: 15px;
+}
+</style>