<template>
  <div class="cointan">
    <div class="title1">
      <div style="margin-left:25px;line-height: 22px;">设备数量</div>
    </div>
    <!-- 柱状图 -->
    <div class="backg">
      <div class="chart" ref="chart"></div>
      <div class="huannum">458</div>
      <div class="huantxt">设备总数</div>
    </div>
    <!-- 两边介绍 -->
    <div class="jieshao">
      200<br/>
      在线数
      <div class="circle"></div>
    </div>

    <div class="jieshao" style="margin-left:349px">
      40<br/>
      离线数
      <div class="circle" style="background: #F9DA4F;"></div>
    </div>

    <div class="jieshao" style="margin-top:183px">
      10<br/>
      故障数
      <div class="circle" style="background: #23BE72;"></div>
    </div>

    <div class="jieshao" style="margin:183px 0 0 349px">
      10<br/>
      告警数
      <div class="circle" style="background: #7D5AFB;"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'leftButtom',
  data() {
    return {
      
    }
  },
  props: {
    msg: String
  },
  created(){
    
  },
  mounted(){
    this.getEchartData()
  },
  methods:{
    getEchartData(){
      let _this = this;
      const chart = this.$refs.chart;
      var option = null;
      const myChart = this.$echarts.init(chart);

      option = {
        color: ['#00D1C8','#23BE72','#F9DA4F','#7D5AFB' ],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['80%', '100%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '在线数' },
              { value: 735, name: '故障数' },
              { value: 580, name: '离线数' },
              { value: 484, name: '告警数' }
            ]
          }
        ]
      };
      myChart.setOption(option);

      myChart.off("click");

      myChart.on("click", function (params) {
        // console.log(params);
        _this.$emit("openPop");
      });

      window.addEventListener("resize", function () {
        myChart.resize();
      });
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          chart.resize();
        });
      });
      return option;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.cointan{
  width: 450px;
  height: 302px;
  background-image: url('../assets/index/litterbackground.png');
  background-size: 100%;
}
.title1{
  position: absolute;
  margin: 9px 0 0 10px;
  font-size: 20px;
  font-family : '优设标题黑';
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
}
// 柱状图
.backg{
  position: absolute;
  margin: 63px 0 0 116px;
  width: 212px;
  height: 212px;
  background-image: url('../assets/leftButtom/background.png');
  background-size: 100%;
}
.chart{
  position: absolute;
  margin: 28px 0 0 20px;
  width: 174px;
  height: 157px;
}
.huannum{
  position: absolute;
  margin: 78px 0 0 50px;
  width: 112px;
  text-align: center;
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  color: rgba(102, 255, 255, 1);
  font-family : '优设标题黑';
}
.huantxt{
  position: absolute;
  margin: 116px 0 0 74px;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.17px;
  color: rgba(255, 255, 255, 1);
}
// 两边介绍
.jieshao{
  position: absolute;
  margin: 110px 0 0 39px;
  width: 55px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 16px;
}
.circle{
  width: 8px;
  height: 8px;
  background: #00D1C8;
  border-radius: 50%;
  margin: 5px 0 0 22px;
}
</style>
