<template>
    <div style="height: 77vh; overflow-y: auto;">
        <!-- <el-button @click="shujuchuli">查询</el-button> -->
        <el-col :span="24" v-for="(item, index) in list" :key="index" style="margin-top: 10px;">
        <div
          ref="kk"
          v-loading="loading"
          :id="item.id"
          style="width: calc((100vw - 280px) ;background:#fff;height:calc((100vh + 185px)/3) ;zoom:1;"
        ></div>
      </el-col>
    </div>
</template>
<script>
import qsdata from '../../../test/components/data'
export default {
    data(){
        return {
            loading:false,
            domId:'',
            obj:null,
            list:[],
            url:require("@/assets/point.png"),
            seriesData:[]
        }
    },
    created(){
        this.shujuchuli()
    },
    mounted(){
        this.getEcharts() 
    },
    methods:{
      shujuchuli(){
        let a = Date.now();
        // console.log('初始化',a)
        this.list = []
        this.loading = true
        // console.log('+++++++++++++++++++++++++++++',qsdata.data)
        var shujuData = qsdata.data
        //判断是几个图
        for(var i=0;i<shujuData.length;i++){
         //判断有无暂降点
         if(shujuData[i].eventDetail !==null){
          //  shujuData[i].phaiscType = this.quchuarr(shujuData[i].phaiscType)
            shujuData[i].phaiscType.push('暂降触发点')

           //有暂降点
           var chufa =[]
           if(shujuData[i].phaiscType.length==4){
               let avalue=[]
               let bvalue=[]
               let cvalue=[]
               //循环处理abc三项数据
              for(var j=0;j<shujuData[i].value.length;j++){
                avalue.push([shujuData[i].value[j][0],shujuData[i].value[j][1].toFixed(2)])
                bvalue.push([shujuData[i].value[j][0],shujuData[i].value[j][2].toFixed(2)])
                cvalue.push([shujuData[i].value[j][0],shujuData[i].value[j][3].toFixed(2)])
              }
              //不存在一个暂降点或1个 //处理暂降点
              if(shujuData[i].eventDetail.length>0){
                   for(var k=0;k<shujuData[i].eventDetail.length;k++){
                    chufa.push([shujuData[i].eventDetail[k].time,shujuData[i].minValue.toFixed(2)])
                   }
              }
              var shuju ={
                id:'qushifenx'+i,
                title:shujuData[i].lineName+'--'+shujuData[i].targetName,
                legend:shujuData[i].phaiscType,
                valueName:shujuData[i].unit[0],
                minValue:shujuData[i].minValue.toFixed(2),
                avalue:avalue,
                bvalue:bvalue,
                cvalue:cvalue,
                chufa:chufa
              }
              this.list.push(shuju)
           
          }
           //如频率等
           if(shujuData[i].phaiscType.length==2){
              let avalue=[]
              let bvalue=[]
              let cvalue=[]
              //循环处理单项数据
              for(var j=0;j<shujuData[i].value.length;j++){
                avalue.push([shujuData[i].value[j][0],shujuData[i].value[j][1].toFixed(2)])
                bvalue.push([])
                cvalue.push([])
              }
              //不存在一个暂降点或1个 //处理暂降点
              if(shujuData[i].eventDetail.length>0){
                   for(var k=0;k<shujuData[i].eventDetail.length;k++){
                    chufa.push([shujuData[i].eventDetail[k].time,shujuData[i].minValue.toFixed(2)])
                   }
              }
              var shuju ={
                id:'qushifenx'+i,
                title:shujuData[i].lineName+'--'+shujuData[i].targetName,
                legend:shujuData[i].phaiscType,
                minValue:shujuData[i].minValue.toFixed(2),
                valueName:shujuData[i].unit[0],
                avalue:avalue,
                bvalue:bvalue,
                cvalue:cvalue,
                chufa:chufa
              }
              this.list.push(shuju)
           }
         }else if(shujuData[i].eventDetail ==null ){
           //如线电压相有效值
           if(shujuData[i].phaiscType.length==3){
               let avalue=[]
               let bvalue=[]
               let cvalue=[]
               //循环处理abc三项数据
              for(var j=0;j<shujuData[i].value.length;j++){
                avalue.push([shujuData[i].value[j][0],shujuData[i].value[j][1].toFixed(2)])
                bvalue.push([shujuData[i].value[j][0],shujuData[i].value[j][2].toFixed(2)])
                cvalue.push([shujuData[i].value[j][0],shujuData[i].value[j][3].toFixed(2)])
              }
              var shuju ={
                id:'qushifenx'+i,
                title:shujuData[i].lineName+'--'+shujuData[i].targetName,
                legend:shujuData[i].phaiscType,
                valueName:shujuData[i].unit[0],
                minValue:shujuData[i].minValue.toFixed(2),
                avalue:avalue,
                bvalue:bvalue,
                cvalue:cvalue
              }
              this.list.push(shuju)
           }
            
            if(shujuData[i].phaiscType.length==1){
                let avalue=[]
                let bvalue=[]
                let cvalue=[]
               //循环处理abc三项数据
              for(var j=0;j<shujuData[i].value.length;j++){
                avalue.push([shujuData[i].value[j][0],shujuData[i].value[j][1].toFixed(2)])
                bvalue.push([])
                cvalue.push([])
              }
              var shuju ={
                id:'qushifenx'+i,
                title:shujuData[i].lineName+'--'+shujuData[i].targetName,
                legend:shujuData[i].phaiscType,
                valueName:shujuData[i].unit[0],
                minValue:shujuData[i].minValue.toFixed(2),
                avalue:avalue,
                bvalue:bvalue,
                cvalue:cvalue
              }
              this.list.push(shuju)
            }
         }

        }
        let b = Date.now();
        // console.log('处理后',b)
        this.getEcharts()
        // console.log('++++++++++++=========================================',this.list)
      },
      getEcharts(){
        this.loading = true
        var arr =[]
        const echarts = require("echarts")
        this.list.forEach(item=>{
        var myChartes = echarts.init(document.getElementById(item.id))
        var option = {
        title: {
            left: "center",
            text: item.title,
            textStyle: {
              fontSize: 12,
            },
          },   
         tooltip : {
                      trigger: 'axis',
                       axisPointer: { // 坐标轴指示器，坐标轴触发有效
                       type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
                       },
         formatter: function (params) {

                  var tips = "";
                      tips += params[0].data[0] + '</br/>';
                    
                  for (var i = 0; i < params.length; i++) {
                      
                      tips += params[i].seriesName + ":" + params[i].value[1] + "<br/>";
                      }
                   return tips;
                }

         },
         grid: {
                left: '20px',
                right: '20px',
                bottom: '20px',
                top:'10%',
                containLabel: true
              },
         legend: {
            left: '8%',
            data:item.legend
        }, 
        dataZoom: [
            {
              type: 'inside',
              start: 0,
            end: 100,
            },
            {
               start: 0,
            end: 100,
            }
        ],
        xAxis : [
            {
                type : 'time',
                axisLine: {
                    show: true,
                    lineStyle: {
                    color: "#999999"
                    }
                },
            }
        ],
        toolbox: {
                    show: true,
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {},
                    myFull: {
                show: true,
                title: "全屏查看",
                id: item.id,
                icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
                onclick: (e) => {
                 //this.obj = e;
                 // this.domId = e.option.toolbox[0].feature.myFull.id;
                  //this.fullFlag = true;
                  let element = document.getElementById(item.id);
                  
                  if (element.requestFullScreen) {
                    // HTML W3C 提议
                    element.requestFullScreen();
                  } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullScreen();
                  } else if (element.webkitRequestFullScreen) {
                    // Webkit (works in Safari5.1 and Chrome 15)
                    element.webkitRequestFullScreen();
                  } else if (element.mozRequestFullScreen) {
                    // Firefox (works in nightly)
                    element.mozRequestFullScreen();
                  }
                  // 退出全屏
                  if (element.requestFullScreen) {
                    document.exitFullscreen();
                  } else if (element.msRequestFullScreen) {
                  } else if (element.webkitRequestFullScreen) {
                    document.webkitCancelFullScreen();
                  } else if (element.mozRequestFullScreen) {
                    document.mozCancelFullScreen();
                  }
                },
                    }
                    },
                 
                },
        yAxis : [
            {
                type : 'value',
                min:item.minValue-0.50,
                name:'单位('+item.valueName+')',
                axisLabel: {
                    formatter: '{value}',
                    left:'20px'
                    },

                axisLine: {
                    show: true,
                    lineStyle: {
                    color: "#999999"
                    }
                },
            }
        ],
        series : [
            {
                name:item.legend[0],
                symbol: "none",
            //  symbolSize: 5,
                type:'line',
            // smooth: true,
                barWidth:22,
                itemStyle: {
                    normal: {
                        color: 'green'
                        }
                    },
                    
                    
                data:item.avalue
            },
            {
                name:item.legend[1],
                symbol: "none",
            // symbol: 'circle',
                //symbolSize: 5,
                type:'line',
            // smooth: true,
                barWidth:22,
                itemStyle: {
                    normal: {
                        color: 'red'
                        }
                    },
                    
                    
                data:item.bvalue
            },
            {
                name:item.legend[2],
                symbol: "none",
            // symbol: 'circle',
            // symbolSize: 5,
                type:'line',
            //  smooth: true,
                barWidth:22,
                itemStyle: {
                    normal: {
                        color: '#FFCC00'
                        }
                    },
                    
                
                data:item.cvalue
            },
            {
                name:item.legend[3],
                //symbol: "",
                type: "scatter",
                symbol: "image://" + this.url,
                itemStyle: {
                        width: "30px",
                        height: "35px",
                      },
                data:item.chufa
            },
        ]
        };
        myChartes.setOption(option)
window.echartsArr.push(myChartes);
        this.loading = false
        arr.push(myChartes);
    })
       echarts.connect(arr);
       let _this = this;
      _this.$erd.listenTo(_this.$refs.kk, (element) => {
        _this.$nextTick(() => {
            arr[0].resize();
            arr[1].resize();
            arr[2].resize();
        });
      })
      }
    }
  
}
</script>

