<template>
  <div class="">
    <div class="label">管网材料信息
    </div>
    <!--<div>-->
    <!--<div class="div-select">-->
    <!--<select v-model="date" >-->
    <!--<option :value="date" v-for="s in date">{{s}}</option>-->
    <!--</select>-->
    <!--</div>-->
    <div class="d1" style="height: 30%">
      <div class="d11">
        <table class="backgroundimg">
          <tr>
            <td >总长度</td> <td ><span class="span-unit">{{sum}}米</span></td>
          </tr>
          <tr>
            <td >PE</td> <td ><span class="span-unit">{{PE}}米</span></td>
          </tr>
          <tr>
            <td >钢管</td> <td ><span class="span-unit">{{Iron}}米</span></td>
          </tr>
        </table>
      </div>
    </div>
    <div id='pie' style="height: 70%;width: 100%">
    </div>
    <!--</div>-->
  </div>
</template>

<script>
  import co from 'co'
  import * as Util  from '../../Util'
  import {HttpResetClass} from 'vue-client'
  export default {
    name: "supplygas",
    data() {
      return {
        totalgas: '',
        totalgasarrary: [],
        PE:0,
        Iron:0,
        sum:0,
        sqlcondition: '',
        result: [],
        unit: '',
        resdata: []
      }
    },
    methods: {
      init () {
        var color = ['#2F8DF4', '#ef9861']
        var title = ['钢管', 'PE']
        var option = {
          color: color,
          backgroundColor: '#ffffff00',
          legend: {
            orient: 'horizontal',
            left: 'center',
            top: 'bottom',
            icon: 'circle',
            padding: [0, 0, 30, 0],
            data: title,
            textStyle: {
              color: '#fff'
            }
          },
          series: [{
            type: 'pie',
            roseType: 'radius',
            radius: ['40%', '60%'],
            data: [{
              value: this.Iron,
              name: '钢管'
            }, {
              value: this.PE,
              name: 'PE'
            }],
            labelLine: {
              normal: {
                length: '5%'
              }
            },
            label: {
              show: true,
              formatter: '{b|{b}占比:{d}%}\n{长度：{c}}',
              rich: {
                b: {
                  fontSize: 14,
                  padding: [5, 0],
                  color: '#fff'
                },
                hr: {
                  height: 0,
                  borderWidth: 1,
                  width: '100%',
                  borderColor: '#fff'
                },
                per: {
                  color: '#FDF44E',
                  fontSize: 14,
                  borderRadius: 2
                }
              },
              position: 'outside'
            }
          }]
        }
        let barchart = this.$echarts.init(document.getElementById('pie' +
          ''))
        console.log(option)
        barchart.setOption(option)
        let index = -1 // 高亮所在下标
        let dataLength = title.length   // 当前饼图有多少个扇形
        // 用定时器控制饼图高亮
        // this.mTime = setInterval(() => {
        //   // 清除之前的高亮
        //   barchart.dispatchAction({
        //     type: 'downplay',
        //     seriesIndex: 0,
        //     dataIndex: index
        //   })
        //   index = (index + 1) % dataLength
        //   // 当前下标高亮
        //   barchart.dispatchAction({
        //     type: 'highlight',
        //     seriesIndex: 0,
        //     dataIndex: index
        //   })
        //   if (index > dataLength) {
        //     index = 0
        //   }
        // }, 1000)
        // 鼠标划入
        barchart.on('mouseover', () => {
          // 停止定时器，清除之前的高亮
          // clearInterval(this.mTime)
          this.echartsPie.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index
          })
        })
      }
    },
    watch: {

    },
    ready () {
        let http = new HttpResetClass()
        http.load('post', 'rs/logic/getNetLenMat', {}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
              console.log(res.data)
              if(res.data.length>0){
                this.sum = 0
                for(let i=0;i<res.data.length;i++){
                  if(res.data[i].name ==='PE'){
                    this.PE = res.data[i].len.toFixed(2)
                    this.sum+=parseFloat(this.PE)
                  }
                  if(res.data[i].name ==='钢'){
                    this.Iron = res.data[i].len.toFixed(2)
                    this.sum+=parseFloat(this.Iron)

                  }
                }
              }
              this.sum = this.sum.toFixed(2)
                    this.init()
        })

    }
  }
</script>

<style scoped>
  @media screen and (max-width: 1920px) {
    .label {
      font-size: 0.85em;
      color: #fff;
      height: 8%;
      width: 100%;
      margin-left: 6%;
    }
    table {
      width: 100%;
      height: 100%;
    }

    span {
      border: solid 1px #00f7ff;
      /*margin: 0px 5px;*/
      /*padding: 1px 6px;*/
      background-color: #01363f;
      color: #f7cb32;
      font-size: 2.6rem;
      font-weight: bolder;
      /*width: 30px;*/
      /*height: 44px;*/
      margin: 0% 2%;
      padding: 1% 2%;
      border-radius: 4px;
    }

    .backgroundimg td {
      text-align: center;
      /*width: 486px;*/
      height: 40%;
      width: 40%;
      color: #ffffff;
    }

    .td2 {
      font-size: 1.8rem;
      height: 20%!important;
    }

    .td3 {
      padding-left: 4%;
      text-align: center;
    }

    .td4 {
    }

    .span-unit {
      margin-left: 1px;
      font-size: 1.5em;
      color: #f7cb32;
      border: none;
      background-color: rgba(1, 207, 242, 0);
    }

    .backgroundimg {
      /*background-image: url('../../../../static/ManageHomePic/gasborder.png');*/
      background-size: 90% 75%;
      background: no-repeat center;
    }

    .d1 {
      /*height: 250px;*/
      width: 100%;
      height: 100%;
      padding-top: 5%;
    }

    .d11 {
      /*height: 140px*/
      width: 100%;
      height: 45%;
    }

    .d12 {
      /*height: 114px;*/
      width: 100%;
      height: 45%;
    }

  }
  @media screen and (max-width: 1366px) {
    .label {
      font-size: 0.85em;
      color: #fff;
      height: 8%;
      width: 100%;
      margin-left: 6%;
    }
    table {
      width: 100%;
      height: 100%;
    }

    span {
      border: solid 1px #00f7ff;
      /*margin: 0px 5px;*/
      /*padding: 1px 6px;*/
      background-color: #01363f;
      color: #f7cb32;
      font-size: 1.8rem;
      font-weight: bolder;
      /*width: 30px;*/
      /*height: 44px;*/
      margin: 0% 2%;
      padding: 1% 2%;
      border-radius: 4px;
    }

    .backgroundimg td {
      text-align: center;
      /*width: 486px;*/
      height: 40%;
      width: 100%;
      color: #ffffff;
    }
    .span-unit {
      margin-left: 1px;
      font-size: 1em;
      color: #f7cb32;
      border: none;
      background-color: rgba(1, 207, 242, 0);
    }

    .backgroundimg {
      /*background-image: url('../../../../static/ManageHomePic/gasborder.png');*/
      background-size: 90% 75%;
      background: no-repeat center;
    }

    .d1 {
      /*height: 250px;*/
      width: 100%;
      height: 100%;
      padding-top: 5%;
    }

    .d11 {
      /*height: 140px*/
      width: 100%;
      height: 45%;
    }

    .d12 {
      /*height: 114px;*/
      width: 100%;
      height: 45%;
    }

  }

</style>
