<!--消息统计-->
<template>
  <div class="iotHome-messageStatistics">
    <div class="statistics-title-box">
      <p>告警消息统计</p>
    </div>
    <div class="statistics-box">
      <div id="message-statistics-box"></div>
      <div class="statistics-for-box">
        <p v-for="(item,index) in newList" :key="index">{{item.name}}：{{item.value}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import { iotStatisticsMessages } from "@/api/iotDevice/index";
  export default {
    name: 'messageStatistics',
    data(){
      return{
        eChartsListColor : [ "#A069FF", "#63FFE5", "#009DFF", "#FFA200", "#FF2A00",],
        maxNum:'',
        newList:[],
      }
    },
    created(){
    },
    mounted(){
      this.iotStatisticsMessages();
    },
    methods:{
      iotStatisticsMessages(){
        iotStatisticsMessages({}).then(response => {
          let list = [];
          for(let i=0;i<response.data.messages.length;i++){
            list.push({
              name:response.data.messages[i].alarmName,
              value:response.data.messages[i].count,
            })
          }
          this.$set(this,'maxNum',response.data.total);
          this.$set(this,'newList',list);
          this.$nextTick(()=>{
            this.eChartsDraw();
          })
        })
      },
      //eCharts绘制
      eChartsDraw(){
        let myChart = this.$echarts.init(document.getElementById('message-statistics-box'));
        let bgColor = "#fff";
        let title = "总数";
        let echartData = this.newList;
        let formatNumber = function (num) {
          let reg = /(?=(\B)(\d{3})+$)/g;
          return num.toString().replace(reg, ",");
        };
        let option = {
          backgroundColor: bgColor,
          color: this.eChartsListColor,
          title: [
            {
              text: "{name|" + title + "}\n{val|" + formatNumber(this.maxNum) + "}",
              top: "center",
              left: "center",
              type:false,
              textStyle: {
                rich: {
                  name: {
                    fontSize: 14,
                    fontWeight: "normal",
                    color: "#67828c",
                    padding: [10, 0],
                  },
                  val: {
                    fontSize: 16,
                    fontWeight: "normal",
                    color: "#67828c",
                  },
                },
              },
            },
          ],
          series: [
            {
              type: "pie",
              radius: ["70%", "90%"],
              center: ["50%", "50%"],
              data: echartData,
              hoverAnimation: false,
              itemStyle: {
                normal: {
                  borderColor: bgColor,
                  borderWidth: 0,
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              label: {
                normal: {
                  show: false,
                },
              },
            },
          ],
        };
        myChart.setOption(option);
      },
    },
  }
</script>

<style scoped lang="scss">
  .iotHome-messageStatistics{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .statistics-title-box{
      display: flex;
      padding:20px;
      line-height:20px;
      font-size:16px;
      color:#333;
    }
    .statistics-box{
      display: flex;
      #message-statistics-box{
        overflow: hidden;
        width:200px;
        height:140px;
      }
      .statistics-for-box{
        width:300px;
        p{
          display: inline-block;
          width:150px;
          font-size:16px;
          font-weight:700;
          color:#999;
          line-height:40px;
        }
      }
    }
  }
</style>
