sgxt_web/src/views/home/model/bkcz.vue

<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="changeActive(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" height="30" src="" alt="">
        </template>
        <template #ryXb="{row}">
          <DictTag :tag="false" :value="row.ryXb" color="#fff" :options="D_BZ_XB"/>
        </template>
        <template #zdrRyjb="{row}">
          <DictTag :tag="false" :value="row.zdrRyjb" color="#fff" :options="D_GS_ZDR_RYJB"/>
        </template>
        <template #zdrBkZt="{row}">
          <DictTag :tag="false" :value="row.zdrBkZt" color="#fff" :options="D_GS_ZDR_BK_ZT"/>
        </template>
        <template #zdrCzzt="{row}">
          <DictTag :tag="false" color="#FDBC3A" :value="row.zdrCzzt" :options="D_GS_ZDR_CZZT" />
        </template>
        <!-- *************** -->
        <template #qtFxdj="{row}">
          <DictTag :value="row.qtFxdj" color="#fff" :options="D_GS_ZDQT_FXDJ" />
        </template>
        <template #qtLb="{row}">
          <DictTag :value="row.qtLb" color="#fff" :options="D_GS_ZDQT_LB" />
        </template>
         
    </MyTable>
  </div>
</template>
  
<script setup>
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import MyTable from "@/components/aboutTable/DarkTable.vue";
import { reactive, ref,onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { D_GS_ZDQT_LB,D_GS_ZDQT_FXDJ,D_GS_ZDR_RYJB,D_BZ_XB,D_GS_ZDR_BK_ZT,D_GS_ZDR_CZZT} = proxy.$dict('D_GS_ZDQT_LB','D_GS_ZDQT_FXDJ','D_GS_ZDR_RYJB','D_BZ_XB','D_GS_ZDR_BK_ZT','D_GS_ZDR_CZZT')
const btns = reactive(["全域布控处置重点人员", "全域布控处置重点群体"]);
const activeIndex = ref(0);
const pageData = reactive({
  tableData: [],
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 61,
    haveControls: false,
    showSelectType: "null",
    showIndex: false,
    stripe:true
  },
  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: "gxSsbmmc" ,showOverflowTooltip: true},
    { label: "人员级别", prop: "zdrRyjb" ,showOverflowTooltip: true,showSolt: true},
    { label: "管控状态", prop: "zdrBkZt" ,showOverflowTooltip: true,showSolt: true},
    { label: "处置状态", prop: "zdrCzzt",showOverflowTooltip: true,showSolt: true  },
  ]
});
const page = ref(1);
const total = ref(0);

onMounted(() => {
  getData()
  tabHeightFn();
});

const changeActive = (idx) =>{
  activeIndex.value = idx;
  pageData.tableData = []
  page.value = 0;
  total.value = 0;
  switch(idx){
    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: "gxSsbmmc" ,showOverflowTooltip: true},
        { label: "人员级别", prop: "zdrRyjb" ,showOverflowTooltip: true,showSolt: true},
        { label: "管控状态", prop: "zdrBkZt" ,showOverflowTooltip: true,showSolt: true},
        { label: "处置状态", prop: "zdrCzzt",showOverflowTooltip: true,showSolt: true  },
      ]
      break;
    case 1:
      pageData.tableColumn = [
        { label: "群体名称", prop: "qtMc"},
        { label: "群体类别", prop: "qtLb",showSolt:true},
        { label: "风险等级", prop: "qtFxdj", showSolt: true},
        { label: "列控原因", prop: "zdrLkyy"},
        { label: "开始时间", prop: "zdrRkkssj"},
        { label: "截至时间", prop: "zdrRkjssj"},
      ]
      break;
  }
  pageData.keyCount++;
  getData()
}

// 获取数据
const getData = () =>{
  pageData.tableConfiger.loading = true;
  let url = activeIndex.value == 0 ? '/mosty-gsxt/tbGsxtZdry/selectPage':'/mosty-gsxt/tbGsxtZdqt/selectPage';
  let data = { pageSize:10,pageCurrent:page.value };
  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 changePage = () => {
  if(pageData.tableData.length == total.value) return false;
  page.value++;
  getData()
};


const tabHeightFn = () => {
  pageData.tableHeight =  document.getElementById('qcbk').offsetHeight - 12;
  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>