lz_web_qwgl/src/views/backOfficeSystem/qwManagement/qwgl/components/count.vue

<template>
  <div class="countBox">
    <div class="topBox">
      <div class="panel-heading">报表统计</div>
      <MyTable :tableData="tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
        <template #bbzl="{ row }">
          <dict-tag :options="dict" :value="row.bbzl" :tag="false" />
        </template>
      </MyTable>
    </div>
    <div class="topBox">
      <div class="panel-heading">报表查看(值班值守)</div>
      <MyTable :tableData="bbcxData" :tableColumn="pageDataCk.tableColumn" :tableHeight="pageDataCk.tableHeight"
        :key="pageDataCk.keyCount" :tableConfiger="pageDataCk.tableConfiger" :controlsWidth="pageDataCk.controlsWidth">
        <template #ryList="{ row }">
          <span v-for="(item, index) in ryData('01', row.ryList)" :key="index">{{ item.ryXm }}
          </span>
        </template>
        <template #fb="{ row }">
          <span v-for="(item, index) in ryData('02', row.ryList)" :key="index">{{ item.ryXm }}</span>
        </template>
        <template #zhzzb="{ row }">
          <span v-for="(item, index) in ryData('03', row.ryList)" :key="index">{{ item.ryXm }}
          </span>
        </template>
        <template #zhzfb="{ row }">
          <span v-for="(item, index) in ryData('04', row.ryList)" :key="index">{{ item.ryXm }}</span>
        </template> 
        <template #zbz="{ row }">
          <span v-for="(item, index) in ryData('05', row.ryList)" :key="index">{{ item.ryXm }}
          </span>
        </template>
        <template #mj="{ row }">
          <span v-for="(item, index) in ryData('06', row.ryList)" :key="index">{{ item.ryXm }}</span>
        </template>
        <template #fj="{ row }">
          <span v-for="(item, index) in ryData('07', row.ryList)" :key="index">{{ item.ryXm }}</span>
        </template>
      </MyTable>
    </div>
    <div class="topBox">
      <div class="panel-heading">时段警力(值班值守)</div>
      <div class="eharsBox">
        <barEcharts :data="lineData" />
      </div>
    </div>
  </div>
</template>

<script setup>
import barEcharts from './lineEcharts.vue'
import MyTable from "@/components/aboutTable/MyTable.vue";
import {
  ref,
  reactive,
  computed,
  watch,
  onMounted,
  getCurrentInstance,
  onUnmounted,
} from "vue";
const props = defineProps({
  lineData: {},
  dict: {},
  tableData: [],
  bbcxData: []
})
const pageData = reactive({
  // tableData:props.tableData? props.tableData:[], //表格数据
  keyCount: 0,
  tableHeight: 245,
  tableConfiger: {
    loading: false,
    rowHieght: 61,
    showSelectType: "null",
    haveControls: false,
    showIndex: false,
    stripe: true
  },
  total: 0,
  pageConfiger: {
    pageSize: 10,
    pageNum: 1
  }, //分页
  controlsWidth: 120, //操作栏宽度
  tableColumn: [
    { label: "勤务报备种类", prop: "bbzl", showSolt: true },
    { label: "民警数量", prop: "mjsl" },
    { label: "辅警数量", prop: "fjsl" },
    { label: "车俩数量", prop: "clsl" },
    { label: "统计日期", prop: "tjrqStr" },
  ]
});
const pageDataCk = reactive({
  tableData: [], //表格数据
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 61,
    showSelectType: "null",
    haveControls: false,
    showIndex: false,
    stripe: true
  },
  tableHeight: 300,
  total: 0,
  pageConfiger: {
    pageSize: 10,
    pageNum: 1
  }, //分页
  controlsWidth: 120, //操作栏宽度
  tableColumn: [
    { label: "班次", prop: "bcMc" },
    { label: "值班领导(主班)", prop: "ryList", showSolt: true },
    { label: "值班领导(副班)", prop: "fb", showSolt: true },
    { label: "指挥长(主班)", prop: "zhzzb", showSolt: true },
    { label: "指挥长(副班)", prop: "zhzfb", showSolt: true },
    { label: "值班长", prop: "zbz", showSolt: true },
    { label: "值班民警", prop: "mj", showSolt: true },
    { label: "值班辅警", prop: "fj", showSolt: true },
    { label: "频道", prop: "zbpdh" },
    { label: "呼号", prop: "zbpdhh" },
    { label: "值班电话", prop: "zbdh" },
    { label: "报备人", prop: "xtCjr" },
  ]
});

const ryData = (val, data) => {
  switch (val) {
    case "01":
      return data.filter(item => item.ryZbbbzw == val)
    case "02":
      return data.filter(item => item.ryZbbbzw == val)
    case "03":
      return data.filter(item => item.ryZbbbzw == val)
    case "04":
      return data.filter(item => item.ryZbbbzw == val)
    case "05":
      return data.filter(item => item.ryZbbbzw == val)
    case "06":
      return data.filter(item => item.ryZbbbzw == val)
    case "07":
      return data.filter(item => item.ryZbbbzw == val)
  }
}


</script>

<style lang="scss" scoped>
.countBox {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 0 10px;
  box-sizing: border-box;

  .topBox {
    margin-bottom: 10px;

    .eharsBox {
      height: 400px;
    }
  }
}

.panel-heading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #ECF7F7;
}

::v-deep .el-table th.el-table__cell {
  background: #ECF7F7;
}

::v-deep .el-table .cell {
  color: #000;
}
</style>