xzlz_JczWeb/src/views/backOfficeSystem/peopleManag/crossStation/index.vue

<template>
  <div>
    <div class="titleBox">
      <PageTitle title="过站汇总管理"> </PageTitle>
    </div>
    <!-- 表格 -->
    <div ref="searchBox">
      <Search :searchArr="searchConfiger" @submit="onSearch" />
    </div>
    <div class="top_box">
      <div class="item_box">
        <div>过站总人数：{{ totalObj.gzryNum }}</div>
        <div class="fl_box">
          <div>入林人数：{{ totalObj.rlclNum }}</div>
          <div>出林人数：{{ totalObj.clryNum }}</div>
        </div>
      </div>
      <div class="item_box">
        <div>过站总车数：{{ totalObj.gzclNum }}</div>
        <div class="fl_box">
          <div>入林车数：{{ totalObj.rlclNum }}</div>
          <div>出林车数：{{ totalObj.clclNum }}</div>
        </div>
      </div>
      <div class="item_box">
        <div>过站物品数：{{ totalObj.gzwpNum }}</div>
        <div class="fl_box">
          <div>入林物品数：{{ totalObj.rlwpNum }}</div>
          <div>出林物品数：{{ totalObj.clwpNum }}</div>
        </div>
      </div>
    </div>
    <div class="tabBox">
      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
        @columnInfo="columnInfo">
      </MyTable>
      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
        ...pageData.pageConfiger,
        total: pageData.total
      }"></Pages>
    </div>
  </div>
  <Gjrxloder v-model="showGjry" :chooseShow="false" :searchData="dialogSearch" />
  <Gjclloder v-model="showGjcl" :chooseShow="false" :searchData="dialogSearch" />
  <Gjwploder v-model="showGjwp" :chooseShow="false" :searchData="dialogSearch" />
</template>

<script setup>
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import Gjrxloder from "@/components/loder/gjrxloder.vue";
import Gjclloder from "@/components/loder/gjclloder.vue";
import Gjwploder from "@/components/loder/gjwploder.vue";
import { isAuth } from "@/utils/tools.js";
import { ElMessage } from "element-plus";
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const { D_BZ_WPLX } = proxy.$dict("D_BZ_WPLX");
const searchConfiger = ref([
  {
    showType: "datetimerange",
    prop: "time",
    placeholder: "请选择时间",
    label: "时间"
  }
]);
const totalObj = ref({});
const showGjry = ref(false);
const showGjcl = ref(false);
const showGjwp = ref(false);
const detailDiloag = ref();
const dialogSearch = ref({});
const pageData = reactive({
  tableData: [], //表格数据
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false,
    haveControls: false
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  controlsWidth: 250, //操作栏宽度
  tableColumn: [
    {
      label: "检查站名称",
      prop: "kkMc",
      showOverflowTooltip: true
    },
    { label: "过站总人数", prop: "gzryNum", showOverflowTooltip: true },
    { label: "入林人数", prop: "rlclNum", showOverflowTooltip: true },
    { label: "出林人数", prop: "clryNum", showOverflowTooltip: true },
    {
      label: "过站总车辆",
      prop: "gzclNum",
      showOverflowTooltip: true
    },

    {
      label: "入林车辆",
      prop: "rlclNum",
      showOverflowTooltip: true
    },
    {
      label: "出林车辆",
      prop: "clclNum",
      showOverflowTooltip: true
    },
    {
      label: "过站物品数",
      prop: "gzwpNum",
      showOverflowTooltip: true
    },
    {
      label: "入林物品数",
      prop: "rlwpNum",
      showOverflowTooltip: true
    },
    {
      label: "出林物品数",
      prop: "clwpNum",
      showOverflowTooltip: true
    }
  ]
});
const Auth = ref(true);
onMounted(() => {
  tabHeightFn();
});

//查询条件
const queryCondition = ref({});
// 统计
const getjczgetXfllTj = () => {
  qcckGet(queryCondition.value, "/mosty-jcz/jczGjrytx/getGjrytxhzTj").then(
    (res) => {
      console.log(res, "res");
      totalObj.value = res;
    }
  );
};

const getjczgetXfllList = () => {
  qcckGet(queryCondition.value, "/mosty-jcz/jczGjrytx/getGjrytxhzlb")
    .then((res) => {
      pageData.tableData = res.records;
      pageData.total = res.total;
    })
    .finally(() => {
      pageData.tableConfiger.loading = false;
    });
};
getjczgetXfllTj();
getjczgetXfllList();
// 搜索
const onSearch = (val) => {
  if (val.time) {
    queryCondition.value.kssj = val.time[0];
    queryCondition.value.jssj = val.time[1];
  } else {
    queryCondition.value.kssj = "";
    queryCondition.value.jssj = "";
  }
  getjczgetXfllTj();
  getjczgetXfllList();
};
const columnInfo = (val) => {
  // 过站类型（01 入林 02 出林） 01 入林 02 出林
  dialogSearch.value.kkId = val.row.kkId;
  switch (val.column.property) {
    case "gzryNum":
      dialogSearch.value.gzlx = "";
      showGjry.value = true;
      break;
    case "rlclNum":
      dialogSearch.value.gzlx = "01";
      showGjry.value = true;
      break;
    case "clryNum":
      dialogSearch.value.gzlx = "02";
      showGjry.value = true;
      break;
    case "gzclNum":
      dialogSearch.value.gzlx = "";
      showGjcl.value = true;
      break;
    case "rlclNum":
      dialogSearch.value.gzlx = "01";
      showGjcl.value = true;
      break;
    case "clclNum":
      dialogSearch.value.gzlx = "02";
      showGjcl.value = true;
      break;
    case "gzwpNum":
      dialogSearch.value.gzlx = "";
      showGjwp.value = true;
      break;
    case "rlwpNum":
      dialogSearch.value.gzlx = "01";
      showGjwp.value = true;
      break;
    case "clwpNum":
      dialogSearch.value.gzlx = "02";
      showGjwp.value = true;
      break;
  }
};
const changeNo = (val) => {
  pageData.pageConfiger.pageCurrent = val;
};
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
};

// 新增
const addEdit = (type, row) => {
  detailDiloag.value.init(type, row);
};

const searchBox = ref(null);
// 表格高度计算
const tabHeightFn = () => {
  pageData.tableHeight =
    window.innerHeight - searchBox.value.offsetHeight - 280;
  window.onresize = function () {
    tabHeightFn();
  };
};
</script>

<style lang="scss" scoped>
.el-loading-mask {
  background: rgba(0, 0, 0, 0.5) !important;
}

.top_box {
  display: flex;
  justify-content: space-around;
  color: #000;
  margin-bottom: 10px;

  .item_box {
    text-align: center;
    width: 22%;
    font-size: 20px;
  }

  .fl_box {
    display: flex;
    font-size: 16px;
    justify-content: space-between;
  }
}
</style>