<template>
  <el-card
    shadow="never"
    class="aui-card--fill"
  >
    <!--  <div class="title">
      欢迎登陆检察阳光码管理系统
    </div> -->
    <div class="top">
      <div
        class="item"
        v-for="item in list"
        :key="item.id"
      >
        <div class="item-content">
          <img
            src="../../assets/img/member_icon_54.png"
            alt=""
            class="title-img"
          >
          <div class="right">
            <div class="num">{{item.num}}</div>
            <div class="title">{{item.title}}</div>
          </div>
        </div>

      </div>
    </div>
    <div class="titleline">
      <div class="left">
        <img
          src="../../assets/img/logo_tj.png"
          alt=""
          style="width:20px;height:20px"
        >
        部门办案情况
      </div>
      <div class="right">
        <img
          src="../../assets/img/logo_tj.png"
          alt=""
          style="width:20px;height:20px"
        >
        部门办案情况统计
      </div>
    </div>
    <div class="bottom">
      <!--  <div
        ref="chartpie"
        style="width:40%;height:470px;flex:3.5"
      ></div> -->
      <div style="width:40%;transform: translate3d(0, -10%, 0);">
        <Echarts
          :options="optionHandlingSituation"
          height="470px"
          width="100%"
        />
      </div>

      <div style="width:60%;transform: translate3d(0, -10%, 0);">
        <Echarts
          :options="optionHandlingSituationZhe"
          height="470px"
          width="100%"
        />
      </div>

      <!-- <div
        ref="chartzhexian"
        style="width:60%;height:470px;flex:6.5"
      ></div> -->
    </div>

  </el-card>
</template>

<script>
import Echarts from "../../components/echarts.vue";
export default {
  components: { Echarts },
  data() {
    return {
      optionHandlingSituation: {},
      optionHandlingSituationZhe: {},
      list: [
        {
          id: 1,
          title: "第一检察部",
          num: 834,
        },
        {
          id: 2,
          title: "第二检察部",
          num: 307,
        },
        {
          id: 3,
          title: "第三检察部",
          num: 32,
        },
        {
          id: 4,
          title: "第四检察部",
          num: 145,
        },
        {
          id: 5,
          title: "第五检察部",
          num: 153,
        },
        {
          id: 6,
          title: "第六检察部",
          num: 81,
        },
        {
          id: 7,
          title: "第七检察部",
          num: 271,
        },
        {
          id: 8,
          title: "溪口检察部",
          num: 8,
        },
      ],
    };
  },

  created() {
    //  this.getSysInfo();
    this.getPie();
    this.getZhe();
  },
  mounted() {},
  methods: {
    getSysInfo() {
      this.$http
        .get("/sys/info")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.sysInfo = res.data;
        })
        .catch(() => {});
    },
    getPie() {
      this.optionHandlingSituation = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 0,
          left: "center",

          data: [
            "第一检察部",
            "第二检察部",
            "第三检察部",
            "第四检察部",
            "第五检察部",
            "第六检察部",
            "第七检察部",
            "溪口检察部",
          ],
        },
        series: [
          {
            name: "占比",
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              { value: 1548, name: "第一检察部" },
              { value: 735, name: "第二检察部" },
              { value: 510, name: "第三检察部" },
              { value: 434, name: "第四检察部" },
              { value: 335, name: "第五检察部" },
              { value: 335, name: "第六检察部" },
              { value: 335, name: "第七检察部" },
              { value: 335, name: "溪口检察部" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    },
    getZhe() {
      this.optionHandlingSituationZhe = {
        /* title: {
            text: "折线图堆叠",
          }, */
        tooltip: {
          trigger: "axis",
        },
        legend: {
          bottom: 0,
          left: "center",
          data: [
            "第一检察部",
            "第二检察部",
            "第三检察部",
            "第四检察部",
            "第五检察部",
            "第六检察部",
            "第七检察部",
            "溪口检察部",
          ],
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "10%",
          containLabel: true,
        },
        /*  toolbox: {
            feature: {
              saveAsImage: {},
            },
          }, */
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2020-12",
            "2021-01",
            "2021-02",
            "2021-03",
            "2021-04",
            "2021-05",
          ],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        series: [
          {
            name: "第一检察部",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230],
          },
          {
            name: "第二检察部",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330],
          },
          {
            name: "第三检察部",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190, 330],
          },
          {
            name: "第四检察部",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330],
          },
          {
            name: "第五检察部",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 1290, 1330],
          },
          {
            name: "第六检察部",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330],
          },
          {
            name: "第七检察部",
            type: "line",
            stack: "总量",
            data: [100, 200, 300, 500, 200, 100],
          },
          {
            name: "溪口检察部",
            type: "line",
            stack: "总量",
            data: [500, 100, 500, 200, 50, 10],
          },
        ],
      };
    },
  },
};
</script>
<style lang="less" scoped>
.top {
  display: flex;
  justify-content: space-between;
  .item {
    background: #4f96e1;
    color: #fff;
    display: flex;
    width: 150px;
    height: 90px;
    text-align: center;
    vertical-align: middle;
    padding: 10px 10px 0;
    border-radius: 8px;
    position: relative;
    .num {
      font-size: 30px;
    }
    .item-content {
      position: absolute;
      width: 80%;
      margin: 0 auto;
      top: 50%;

      transform: translate(0, -50%);
      display: flex;
    }
    .title-img {
      width: 40px;
      height: 40px;
      //vertical-align: middle;
    }
    .right {
      margin-left: 10px;
      text-align: right;
    }
    .title,
    .num {
      text-align: right;
    }
  }
}
.titleline {
  display: flex;
  line-height: 50px;
  font-size: 18px;
  margin-top: 35px;
  border-bottom: 1px solid #eee;
  .left {
    width: 40%;
  }
  .right {
    width: 60%;
  }
}
.bottom {
  width: 100%;
  display: flex;
  margin-top: 20px;
}
</style>
