<template>
  <div class="equipmentLifeComponent">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="eCharts-max-big-box">
      <div id="equipmentLifeComponentECharts">

      </div>
      <div class="position-equipmentLife-box">
        <div v-for="(item,index) in dataList" :key="index">
          <p>{{item.name}}</p>
          <p>{{item.value}}台</p>
          <p>{{item.num}}%</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    reportReportBsEquipLifeList,
  } from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'equipmentLifeComponent',
    components: {
      titlePageImgComponents
    },
    data () {
      return {
        propsData:{
          title:'设备使用寿命统计',
          checkType:'equipmentLifeComponent',
        },
        //eCharts定时器
        eChartsTimer:null,
        dataList:[],
      }
    },
    created(){

    },
    mounted() {
      this.timedRefresh();
    },
    methods: {
      timedRefresh(){
        let self = this;
        self.getData();
        //定时动画
        window.clearInterval(self.eChartsTimer);
        self.eChartsTimer = setInterval(function(){
          self.getData();
        },1000*30);
      },
      getData(){
        reportReportBsEquipLifeList().then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            list.push({
              name:response.data[i].lifeInterval?response.data[i].lifeInterval:'未知',
              value:response.data[i].deviceNum?response.data[i].deviceNum:0,
              num:response.data[i].deviceRate?response.data[i].deviceRate:0,
            })
          }
          this.$set(this,'dataList',list);
          this.eChartsMethod(list);
        })
      },
      eChartsMethod(list) {
        let option = {
          color:['#0183FA','#00E6FF','#047581','#FCC23C','#FF7575'],
          series: [
            {
              name:'漏斗图',
              type:'funnel',
              left: 33,
              right:33,
              top: 31,
              bottom: 31,
              sort: 'descending',//'ascending'，'descending'，'none'
              label: {
                show:false,
                position: 'inside',
                fontSize:18,
                color: "#fff",
                itemStyle: {
                  color: '#fff',
                  borderWidth: 0
                },
                formatter:function(params){//自动提示工具
                  return params.name
                }
              },
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 0
              },
              emphasis: {
                label: {
                  fontSize: 20//悬停时文字大小
                }
              },
              data: list
            }
          ]
        };
        let echartsBox = this.$echarts.init(document.getElementById('equipmentLifeComponentECharts'));
        echartsBox.clear();
        echartsBox.setOption(option);
      }
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.eChartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .equipmentLifeComponent{
    height: 443px;
    width:680px;
    .eCharts-max-big-box {
      height:381px;
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      overflow: hidden;
      position: relative;
      #equipmentLifeComponentECharts{
        z-index:5;
        height:361px;
        width:340px;
        position: absolute;
        top:0;
        left:0;
      }
      .position-equipmentLife-box{
        z-index:0;
        height:361px;
        width:316px;
        position: absolute;
        top:26px;
        left:170px;
        div{
          width:464px;
          display: flex;
          padding-left:202px;
          border-bottom: 1px dashed rgba(4,117,129,0.3);
          p{
            padding-top:14px;
            line-height:46px;
            font-size:18px;
            color:#ffffff;
          }
          p:nth-child(1){
            width:100px;
          }
          p:nth-child(2){
            width:100px;

          }
          p:nth-child(3){
            width:60px;
          }
        }
      }
    }
  }
</style>
