<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-25 08:59:04
-->
<template>
  <div class="yhjgba">
    <el-row :gutter="8">
      <el-col :span="12">
        <el-card
          shadow="hover"
          :body-style="{ padding: '0' }"
          style="height: 260px"
        >
          <div slot="header" class="flexst">
            <h5 class="title">根据登记类型统计分析收件</h5>
          </div>
          <djlx/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card
          shadow="hover"
          :body-style="{ padding: '0' }"
          style="height: 260px"
        >
          <div slot="header" class="flexst">
            <h5 class="title">根据证书种类统计分析发证情况</h5>
          </div>
           <zszl/>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="8" class="marginTop10">
      <el-col :span="12">
        <el-card
          shadow="hover"
          :body-style="{ padding: '0' }"
          style="height: 260px"
        >
          <div slot="header" class="flexst">
            <h5 class="title">根据收件人统计分析收件</h5>
          </div>
          <psjr/>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card
          shadow="hover"
          :body-style="{ padding: '0' }"
          style="height: 260px"
        >
          <div slot="header" class="flexst">
            <h5 class="title">收件日统计</h5>
          </div>
           <sjri/>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="8" class="marginTop10">
      <el-col :span="12">
        <el-card
          shadow="hover"
          :body-style="{ padding: '0' }"
          style="height: 260px"
        >
          <div slot="header" class="flexst">
            <h5 class="title">根据区域统计分析收件</h5>
          </div>
           <qytj/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card
          shadow="hover"
          :body-style="{ padding: '0' }"
          style="height: 260px"
        >
          <div slot="header" class="flexst">
            <h5 class="title">收件月统计</h5>
          </div>
          <sjyue/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import  djlx  from "./components/djlx.vue";
import  zszl  from "./components/zszl.vue";
import  qytj  from "./components/qytj.vue";
import  sjri  from "./components/sjri.vue";
import  sjyue  from "./components/sjyue.vue";
import  psjr  from "./components/sjr.vue";

export default {
  components: {djlx,zszl,qytj,sjri,sjyue,psjr},
  computed: {
    ...mapGetters(["dictData", "transfer"]),
  },
  data() {
    return {
      queryForm: {},
      tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
    };
  },
  mounted() {

  },
  methods: {
    getOption() {
      return {


      };
    },

    handleSearch() {},
  },
};
</script>
<style scoped lang="scss">
/deep/.el-card__header {
  padding: 8px 10px;
}

/deep/.el-card__body {
  padding: 3px 10px 5px 10px;
  overflow: hidden;
}
.yhjgba {
  .el-col {
    padding: 4px;
  }
  .inquire {
    width: 100%;
    height: 40px;
    border: 1px solid rgb(184, 217, 243);
    // background-color: rebeccapurple;
  }
  .concent {
    width: 100%;
    height: 300px;
    display: flex;
    .left {
      width: 70%;
         height: 200px;
    }
    .right {
      width: 30%;
      height: 200px;
    }
  }
}
</style>