更新大屏

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/bkcz.vue
+++ b/src/views/home/model/bkcz.vue
@ -0,0 +1,138 @@
+<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 class="comom-cnt" id="qcbk">
+    <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>
+        <template #czzt="{row}">
+            <span style="color:#FDBC3A">{{ row.czzt }}</span>
+        </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",
+      gkdw: "城东派出所",
+      hdsj: "2023-12-25 14:30",
+      sfdz: "杭州市上城区平海路123号",
+      czzt: "已处置"
+    },
+    {
+      tp: "https://example.com/photo2.jpg",
+      xm: "李四",
+      xb: "女",
+      sfzh: "330102199203034567",
+      gkdw: "城西派出所",
+      hdsj: "2023-12-25 16:45",
+      sfdz: "杭州市西湖区文三路456号",
+      czzt: "待处置"
+    },
+    {
+      tp: "https://example.com/photo3.jpg",
+      xm: "王五",
+      xb: "男",
+      sfzh: "330102199505057890",
+      gkdw: "城北派出所",
+      hdsj: "2023-12-25 09:15",
+      sfdz: "杭州市拱墅区莫干山路789号",
+      czzt: "处置中"
+    },
+    {
+      tp: "https://example.com/photo3.jpg",
+      xm: "王五",
+      xb: "男",
+      sfzh: "330102199505057890",
+      gkdw: "城北派出所",
+      hdsj: "2023-12-25 09:15",
+      sfdz: "杭州市拱墅区莫干山路789号",
+      czzt: "处置中"
+    },
+  ],
+  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: "gkdw" ,showOverflowTooltip: true},
+    { label: "活动时间", prop: "hdsj" ,showOverflowTooltip: true},
+    { label: "活动发生地址", prop: "sfdz" ,showOverflowTooltip: true},
+    { label: "处置状态", prop: "czzt",showOverflowTooltip: true,showSolt: true  },
+  ]
+});
+
+onMounted(() => {
+  tabHeightFn();
+});
+
+const changePage = () => {
+  console.log('触底加载==========');
+};
+
+const tabHeightFn = () => {
+  pageData.tableHeight =  document.getElementById('qcbk').offsetHeight - 10;
+    window.onresize = function () {
+      tabHeightFn();
+    };
+};
+
+</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-deeep .comom-cnt{
+  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>