<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">控制台</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <div class="card">
      <el-card class="diagram">
        <div id="monthlyProductionDiv" style="width:100%;height: 280px;"></div>
      </el-card>
      <el-card class="diagram">
        <div id="monthlyClothRollDiv" style="width:100%;height: 280px;"></div>
      </el-card>
    </div>
  </div>
</template>
<script>
import Constant from "@/constant";
import homeApi from "@/api/home";
import "nprogress/nprogress.css";
import NProgress from "nprogress";

export default {
  name: "Home",
  data() {
    return {
      monthlyProduction: [],
      monthlyClothRoll: [],
    };
  },
  methods: {
    monthlyData() {
      var self = this;

      homeApi.monthlyData().then(response => {
        var jsonData = response.data;
        if (jsonData.result) {
          self.monthlyProduction = jsonData.data.listVolume;
          self.monthlyClothRoll = jsonData.data.listNumber;

          self.monthlyProductionView();
          self.monthlyClothRollView();
        }
      });
    },
    monthlyProductionView() {
      let myChart = this.$echarts.init(document.getElementById("monthlyProductionDiv"));

      myChart.setOption({
        title: {
          text: "月度产量"
        },
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value',
          min: 0,
          name: "米"
        },
        series: [
          {
            data: this.monthlyProduction,
            type: 'line'
          }
        ]
      });
    },
    monthlyClothRollView() {
      let myChart = this.$echarts.init(document.getElementById("monthlyClothRollDiv"));

      myChart.setOption({
        title: {
          text: "月度工作量"
        },
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value',
          min: 0,
          name: "卷"
        },
        series: [
          {
            data: this.monthlyClothRoll,
            type: 'line'
          }
        ]
      });
    },
  },
  async mounted() {
    this.monthlyData();
  },
};
</script>
<style lang="scss" scoped>
.xtsyqk_fyy {
  height: 64px;
  margin-bottom: 40px;
}
.xtsyqk_fyy i {
  font-size: 26px;
}
.xtsyqk_fyy span b {
  font-size: 21px;
}
.xtsyqk_fyy span {
  display: block;
  text-align: center;
  font-size: 14px;
}
.xtsyqk_fyy_60 {
  width: 60%;
  float: center;
}
.xtsyqk_fyy_40 {
  width: 40%;
  float: left;
}
.el-breadcrumb {
  margin: 10px;
  line-height: 20px;
}

.el-divider {
  margin: 5px 0;
}

.header {
  text-align: left;
}

.diagram_top {
  margin: 20px 20px;
  width: 140px;
  height: 120px;
  float: left;
}
.diagram {
  margin: 20px 20px;
  width: 97%;
  height: 300px;
  float: left;
}
.diagram_extraWide {
  margin: 20px 20px;
  width: 220px;
  height: 120px;
  float: left;
}
.ax_default {
  width: 180px;
}
.ax_default2 {
  width: 320px;
}
.diagram_jkgs {
  margin: 20px 20px;
  height: 120px;
  float: left;
}
.ax_default3 {
  width: 170px;
}
.grid-content{
  display: flex;
  align-items: center;
  padding:15px 20px;
  color:white;
  border-radius: 3px;
}
.floor-one .grid-content i{
  font-size:50px
}
.floor-one .grid-content h4{
  text-align: center;
  font-size:24px;
  margin:0;
  margin-left:10px
}
.floor-one .grid-content p{
  font-size:14px;
  margin:0
}
.bgpink{
  background:#FF7970
}
.bgorange{
  background:#FF6200
}
.bgblue{
  background:#427BEE
}
.bggreen{
  background:#42b7ee
}
.bgyellow{
  background:#F4C735
}
.bgred{
  background:#F44235
}
.card{
  padding:30px;
  text-align: left;
}
.floor-two .grid-content{
  justify-content: center;
  position:relative
}
.floor-two .grid-content::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:1px;
  height:50px;
  margin-top:-25px;
  background:#D3D3D3
}
.floor-two .el-col:last-child .grid-content:after{
  width:0
}
.floor-two .grid-content i{
  width:50px;
  height:50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  color:white;
  font-size:25px
}
.floor-two .grid-content h5{
  text-align: center;
  font-size:16px;
  margin:0;
  margin-left:10px;
  color:black
}
.floor-two .grid-content h5 p{
  font-size:14px;
  margin:0;
  margin-top:10px;
  font-weight:initial;
}
.floor-two{
  margin:50px 0
}
.tit{
  margin:0 0 20px
}
</style>