<!-- 特种设备与常规冷热设备 -->
<template>
  <div class="resourceAndEquipmentStatistics">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="resourceAndEquipmentStatisticsPage">
      <div class="left-box" id="resourceAndEquipmentStatisticsECharts">

      </div>
      <div class="right-box">
        <div class="for-max-box" v-for="(item,index) in dataList" :key="index">
          <div class="for-title-box">
            <p :class="index==0?'border-color-1':(index==1?'border-color-2':(index==2?'border-color-3':(index==3?'border-color-4':(index==4?'border-color-5':''))))"></p>
            <p>{{item.name}}</p>
            <dv-digital-flop :config="item.config" class="dvDigitalFlop" />
          </div>
          <div class="for-background"></div>
        </div>
      </div>
      <div class="position-num-box">
        <p class="position-title">设备总数(台)</p>
        <dv-digital-flop :config="maxNum" class="position-num" />
      </div>
      <p class="position-left-p"></p>
      <p class="position-right-p"></p>
    </div>
    <!--<add-page :propsData="propsData" v-if="pageType === 2"></add-page>-->
  </div>
</template>
<script>
  const configData = {
    content: '{nt}%',
    textAlign :'right',
    style:{
      fill:'#fff',
      fontSize: 20,
      fontWeight:110,
      fontFamily: 'YouSheBiaoTiHei',
      gradientColor: ['#fff','#fff'],
      gradientType: 'linear',//'linear' | 'radial'
      gradientWith:'fill',//'stroke' | 'fill'
      gradientParams: [0, 0, 0, 30],
    }
  }
  const numConfigData = {
    content: '{nt}',
    textAlign :'center',
    style:{
      fill:'#fff',
      fontSize: 16,
      fontWeight:700,
      fontFamily: 'YouSheBiaoTiHei',
      gradientColor: ['#fff','#fff'],
      gradientType: 'linear',//'linear' | 'radial'
      gradientWith:'fill',//'stroke' | 'fill'
      gradientParams: [0, 0, 0, 140],
    }
  }
  import { reportReportBsEquipLifeList } from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'index',
    components: {
      titlePageImgComponents
    },
    data () {
      return {
        //组件传参
        propsData:{
          title:'实验室冷热与特种设备统计',
        },
        dataList:[
          {name:"5年内",value:0,config:{number:[0], content:configData.content,textAlign:configData.textAlign, style:configData.style}},
          {name:"10年内",value:0,config:{number:[0], content:configData.content,textAlign:configData.textAlign, style:configData.style}},
          {name:"12年内",value:0,config:{number:[0], content:configData.content,textAlign:configData.textAlign, style:configData.style}},
          {name:"20年内",value:0,config:{number:[0], content:configData.content,textAlign:configData.textAlign, style:configData.style}},
          {name:"超期服役",value:0,config:{number:[0], content:configData.content,textAlign:configData.textAlign, style:configData.style}},
        ],
        //设备总数
        maxNum:{number:[0], content:numConfigData.content,textAlign:numConfigData.textAlign, style:numConfigData.style},
        //echarts数据
        echartsBox:null,
        // 定时器
        echartsTimer:null,
      }
    },
    created () {

    },
    mounted () {
      this.getList();
      this.timeFunction();
    },
    methods: {
      getList(){
        reportReportBsEquipLifeList().then(response => {
          let deviceNum = 0;
          let list = []
          for (let i = 0; i < response.data.length; i++) {
            deviceNum = deviceNum+(response.data[i].deviceNum ? response.data[i].deviceNum : 0);
            list.push({
              name: response.data[i].lifeInterval ? response.data[i].lifeInterval : '未知',
              value: response.data[i].deviceNum ? response.data[i].deviceNum : 0,
              config:{
                number:[response.data[i].deviceRate?response.data[i].deviceRate:0],
                content:configData.content,
                textAlign:configData.textAlign,
                style:configData.style,
              }
            })
          }
          this.$set(this, 'dataList', list)
          this.$set(this, 'maxNum', {
            number:[deviceNum],
            content:numConfigData.content,
            textAlign:numConfigData.textAlign,
            style:numConfigData.style
          })
          this.eChartsMethod(list)
        })
      },
      eChartsMethod(list){
        let option = {
          color:['#3BB9FD', '#73BE7F', '#82DEE1', '#F8D2A9', '#FFA0A0'],
          tooltip: {
            show: false,
            trigger: 'item'
          },
          legend: {
            show: false
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['47%', '60%'],
              avoidLabelOverlap: false,
              label: {
                show: false
              },
              emphasis: {
                show: false,
                label: {
                  show: false
                }
              },
              labelLine: {
                show: false
              },
              data: list
            }
          ]
        };
        this.echartsBox = this.$echarts.init(document.getElementById('resourceAndEquipmentStatisticsECharts'));
        this.echartsBox.clear();
        this.echartsBox.setOption(option);
      },
      //时间定时器
      timeFunction(){
        let self = this;
        this.echartsTimer = window.setInterval(showTime, 180000);
        function showTime() {
          self.getList();
        }
      },
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.echartsTimer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.echartsTimer);
    }
  }
</script>
<style scoped lang="scss">
  .resourceAndEquipmentStatistics{
    width: 652px;
    height: 403px;
    overflow: hidden;
    .resourceAndEquipmentStatisticsPage{
      width:652px;
      height:339px;
      padding-top:20px ;
      background: linear-gradient( 180deg, rgba(4,117,129,0.2) 0%, rgba(0,15,22,0) 100%);
      display: flex;
      position: relative;
      .left-box{
        width:409px;
        height:339px;
      }
      .right-box{
        width:225px;
        height:339px;
        padding-top:30px;
        .for-max-box{
          height:50px;
          width:225px;
          position: relative;
          .for-title-box{
            padding-right:10px;
            display: flex;
            p:nth-child(1){
              width:20px;
              height:20px;
              margin:7px 14px;
              -webkit-border-radius: 50%;
              -moz-border-radius: 50%;
              border-radius: 50%;
            }
            p:nth-child(2){
              height: 30px;
              line-height: 30px;
              flex:1;
              color:#fff;
              font-size:14px;
              font-family: SOURCEHANSANSCN;
            }
            .dvDigitalFlop{
              height: 30px;
              line-height: 30px;
              color:#fff;
              width:110px;
              font-family: YouSheBiaoTiHei;
            }
            .border-color-1{
              border:3px solid #3BB9FD;
            }
            .border-color-2{
              border:3px solid #73BE7F;
            }
            .border-color-3{
              border:3px solid #82DEE1;
            }
            .border-color-4{
              border:3px solid #F8D2A9;
            }
            .border-color-5{
              border:3px solid #FFA0A0;
            }
          }
          .for-background{
            position: absolute;
            top:35px;
            left:0;
            width:225px;
            height:5px;
            background-color: #206A9F;
            /*background: url("../../../assets/ZDimages/img_zysb_sjbg@1x.png");*/
            -webkit-background-size: 100%;
            background-size: 100%;
          }
        }
      }
      .position-left-p{
        position: absolute;
        width: 88px;
        height: 170px;
        left:22px;
        top:115px;
        background: url("../../../assets/ZDimages/img_zysb_tbbjr@1x.png");
        -webkit-background-size: 100%;
        background-size: 100%;
      }
      .position-right-p{
        position: absolute;
        width: 88px;
        height: 170px;
        left:298px;
        top:108px;
        background: url("../../../assets/ZDimages/img_zysb_tbbjl@1x.png");
        -webkit-background-size: 100%;
        background-size: 100%;
      }
      .position-num-box{
        position: absolute;
        width: 113px;
        height: 113px;
        left:148px;
        top:133px;
        background: url("../../../assets/ZDimages/img_sbzsbg@1x.png");
        -webkit-background-size: 100%;
        background-size: 100%;
        .position-title{
          margin-top:45px;
          text-align: center;
          color:#fff;
          font-size:14px;
          line-height:20px;
          font-family: SOURCEHANSANSCN;
        }
        .position-num{
          height: 20px;
          line-height: 20px;
          color:#fff;
          font-family: YouSheBiaoTiHei;
        }
      }
    }
  }
</style>
