<!--
 * @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: 270px"
        >
          <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: 270px"
        >
          <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: 270px"
        >
          <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: 270px"
        >
          <div slot="header" class="flexst">
            <h5 class="title">收件日统计</h5>
          </div>
          <ul class="workbench flexst"></ul>
        </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: 270px"
        >
          <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: 270px"
        >
          <div slot="header" class="flexst">
            <h5 class="title">收件月统计</h5>
          </div>
          <ul class="workbench flexst"></ul>
        </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";

export default {
  components: {djlx,zszl,qytj},
  computed: {
    ...mapGetters(["dictData", "transfer"]),
  },
  data() {
    return {
      queryForm: {},
      tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
    };
  },
  mounted() {
    // 创建一个 ECharts 实例
    this.chart = echarts.init(this.$refs.chart);
    // 在 ECharts 实例中配置图表
    this.chart.setOption(this.getOption());
  },
  methods: {
    getOption() {
      return {

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "饼图名称",
            type: "pie",
            radius: ["20%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 335, name: "数据1" },
              { value: 310, name: "数据2" },
              { value: 234, name: "数据3" },
              { value: 135, name: "数据4" },
              { value: 1548, name: "数据5" },
            ],
          },
        ],
      };
    },

    handleSearch() {},
  },
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.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>