<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">
      <div class="floor-one">
        <h5 class="tit">基本情况</h5>
        <el-row :gutter="20">
           <el-col :span="6">
            <div class="grid-content bgorange">
              <i class="iconfont iconfasfa-cog1"></i>
              <h4><p>今日报案登记数</p>{{item1}}</h4>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bgpink">
              <i class="iconfont iconmd-av_timer1"></i>
              <h4><p>昨日报案登记数</p>{{item2}}</h4>
            </div>
          </el-col>
           <el-col :span="6">
            <div class="grid-content bgblue">
              <i class="iconfont iconfasfa-cog1"></i>
              <h4><p>今日咨询登记数</p>{{item3}}</h4>
            </div>
          </el-col>
           <el-col :span="6">
            <div class="grid-content bggreen">
              <i class="iconfont iconmd-av_timer1"></i>
              <h4><p>昨日咨询登记数</p>{{item4}}</h4>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-card class="diagram">
        <div id="everyDayMeasuringDiv" 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"; // progress bar style
import NProgress from "nprogress"; // progress bar
// @ is an alias to /src
export default {
  name: "Home",
  data() {
    return {
      item1: "0",
      item2: "0",
      item3: "0",
      item4: "0",
      advisoryNumList: [],
      reportNumList: [],
      day: [],
    };
  },
  methods: {
    everyDayMeasuringView() {
      //每日测温结果统计
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("everyDayMeasuringDiv")
      );

      // 绘制图表
      myChart.setOption({
        title: {
          text: "本月报案咨询登记数趋势图"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["报案登记数", "咨询登记数"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            interval: 0,
            rotate: 40
          },
          data: this.day,
          name: "日期"
        },
        yAxis: {
          type: "value",
          min: 0,
          name: "登记数"
        },
        color: ["#FF6200", "#1890FF"],
        series: [
          {
            name: "报案登记数",
            type: "line",
            //stack: "总量",
            data: this.reportNumList
          },
          {
            name: "咨询登记数",
            type: "line",
            data: this.advisoryNumList
          }
        ]
      });

      var self = this;
      var formData = new FormData();
      homeApi.countByReport(formData).then(function (response) {
        var jsonData = response.data;

        self.item1 = jsonData.item1;
        self.item2 = jsonData.item2;
      })
      .catch((error) => {
        console.log(error);
      });

      homeApi.countByAdvisory(formData).then(function (response) {
        var jsonData = response.data;

        self.item3 = jsonData.item3;
        self.item4 = jsonData.item4;
      })
      .catch((error) => {
        console.log(error);
      });
    },
  },
  async mounted() {
    // var self = this;

    // var formData = new FormData();
    // await homeApi.trendDataForMonth(formData).then(function(response) {
    //   var jsonData = response.data;
    //   if (jsonData.result) {
    //     console.log(jsonData);
    //     self.advisoryNumList = jsonData.data.advisoryNumList;
    //     self.reportNumList = jsonData.data.reportNumList;
    //     self.day = jsonData.data.day;
    //   }
    // });
  
    // this.everyDayMeasuringView();
  },
};
</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>