<template>
    <div style="padding-left:10rem">
            <el-row type="flex" class="row-bg">
                  <el-col :span="12">
                      <div class="titleContent">硫含量超标船舶分布
                      <div style="float:right;margin-right:4rem">
                          <span style="color:#666666;margin-right:5rem">日期</span> 
                          <!-- <div style="width:20rem;float:left"> -->
                         <el-date-picker
                                v-model="liuDate"
                                type="month"
                                placeholder="选择月份"
                                size='mini'
                                style="width:50rem"
                                @change="liuPie"
                                value-format="yyyy-MM">
                        </el-date-picker>
                          <!-- </div> -->
                      </div>
              
                  </div>
                      <div id="liuPieChart" style="width:250rem;height:145rem;"></div>
                  </el-col>
                   <el-col :span="12">
                      <div class="titleContent">黑烟抓拍分布
                              <div style="float:right;margin-right:4rem">
                          <span style="color:#666666;margin-right:5rem">日期</span> 
                          <!-- <div style="width:20rem"> -->
                          <el-date-picker
                                v-model="blackDate"
                                type="month"
                                placeholder="选择月份"
                                size='mini'
                                style="width:50rem"
                                @change="hyPie"
                                value-format="yyyy-MM">
                        </el-date-picker>
                          <!-- </div> -->
                      </div>
              
                      </div>
                      <div id="hyPieChart" style="width:250rem;height:145rem;"></div>
                  </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" >
              <el-col :span="12">
                      <div class="titleContent">硫含量超标船舶统计</div>
                      <div>
                        <div @click="back" style="float:left;margin-top:60rem">
                              <img src="@/assets/images/return.png" class="icon_size"/>
                        </div>
                        <div id="myChart" style="width:250rem;height:145rem;float:left"></div>
                        <div @click="next" style="float:left;margin-top:60rem">
                              <img src="@/assets/images/next.png" class="icon_size"/>
                          </div>
                      </div>
              </el-col>
              <el-col :span="12">
                      <div class="titleContent">黑烟抓拍统计</div>
                      <div>
                        <div @click="hyback" style="float:left;margin-top:60rem">
                              <img src="@/assets/images/return.png" class="icon_size"/>
                        </div>
                        <div id="hyChart" style="width:250rem;height:145rem;float:left"></div>
                        <div @click="hynext" style="float:left;margin-top:60rem">
                              <img src="@/assets/images/next.png" class="icon_size"/>
                          </div>
                      </div>
              </el-col>
            </el-row>

    </div>
    
    
</template>

<script>
import { getDicts } from "@/api/system/dict/data";
import { getBlackSnapPos,getSo2SnapPos,getSo2Time } from "@/api/data/staticalData";

export default {
  name: "Statistical",
  data() {
    return {
      months:[],
      hyMonths:[],
      liuDate:'',
      blackDate:'',
      liuMonth:'',
      blackMonth:'',
      blackName:undefined,
      so2Name:undefined,
      so2TimeData:undefined,
      monthOptions:[
          {
              value:"2021-08",
              label:'2021年8月'
          }
      ]
    };
  },
  mounted() {
       var myDate = new Date();
        var tYear = myDate.getFullYear();
        var tMonth = myDate.getMonth();
        if(tMonth > 5){
            for(var m=1;m<7;m++){
                this.months.push(tYear+"-"+"0"+m);
                this.hyMonths.push(tYear+"-"+"0"+m);
            }
        }else{
           for(var m=7;m<13;m++){
             if(m <10){
                this.months.push((tYear-1)+"-"+"0"+m); 
                this.hyMonths.push((tYear-1)+"-"+"0"+m); 
             }else{
                this.months.push((tYear-1)+"-"+m); 
                this.hyMonths.push((tYear-1)+"-"+m); 
             }
            }
        }
     this.getDicts('heiyan_snap_pos');
       this.getDicts('so2_snap_pos');
    //   console.log(this.blackName);
    //   this.hyLine();
      this.getSo2Time();
    //   this.liuPie();
    //   this.hyPie();
  },
  methods: {
      getSo2Time(){
          getSo2Time().then(data =>{
                this.so2TimeData = data.data
                this.drawLine();
                this.hyLine()
          });
      },
      getDicts(type){
          getDicts(type).then(data =>{
              if(type == 'heiyan_snap_pos'){     
                    this.blackName = data.data;
                    this.hyPie();
                    //  console.log(this.blackName);
              }else if(type == 'so2_snap_pos'){
                    this.so2Name = data.data;
                    this.liuPie();
              }
          });
      },
      back(){
         var year = parseInt(this.months[0].split("-")[0])
         var month = parseInt(this.months[0].split("-")[1])
         this.months = [];
            if(month > 5){
              for(var m=1;m<7;m++){
                  this.months.push(year+"-"+"0"+m);
              }
            }else{
              for(var m=7;m<13;m++){
                  if(m <10){
                      this.months.push((year-1)+"-"+"0"+m); 
                  }else{
                      this.months.push((year-1)+"-"+m); 
                  }
              }
            }
            this.drawLine();
      },
      next(){
          var year = parseInt(this.months[0].split("-")[0])
                  var month = parseInt(this.months[0].split("-")[1])
                  this.months = [];
                      if(month > 5){
                        for(var m=1;m<7;m++){
                            this.months.push((year+1)+"-"+"0"+m);
                        }
                      }else{
                        for(var m=7;m<13;m++){
                            if(m <10){
                                this.months.push(year+"-"+"0"+m); 
                            }else{
                                this.months.push(year-1+"-"+m); 
                            }
                        }
                      }
                      this.drawLine();
      },
       hyback(){
         var year = parseInt(this.hyMonths[0].split("-")[0])
         var month = parseInt(this.hyMonths[0].split("-")[1])
         this.hyMonths = [];
            if(month > 5){
              for(var m=1;m<7;m++){
                  this.hyMonths.push(year+"-"+"0"+m);
              }
            }else{
              for(var m=7;m<13;m++){
                  if(m <10){
                      this.hyMonths.push((year-1)+"-"+"0"+m); 
                  }else{
                      this.hyMonths.push((year-1)+"-"+m); 
                  }
              }
            }
            this.hyLine();
      },
      hynext(){
          var year = parseInt(this.hyMonths[0].split("-")[0])
                  var month = parseInt(this.hyMonths[0].split("-")[1])
                  this.hyMonths = [];
                      if(month > 5){
                        for(var m=1;m<7;m++){
                            this.hyMonths.push((year+1)+"-"+"0"+m);
                        }
                      }else{
                        for(var m=7;m<13;m++){
                            if(m <10){
                                this.hyMonths.push(year+"-"+"0"+m); 
                            }else{
                                this.hyMonths.push(year-1+"-"+m); 
                            }
                        }
                      }
                      this.hyLine();
      },
      liuPie(){
            getSo2SnapPos({'month':this.liuDate}).then(response => {
                    console.log(response);
                    var myChart =  this.$echarts.init(document.getElementById('liuPieChart'));
                    var series = [];
                    for(var index in this.so2Name){
                        console.log(this.so2Name[index].dictLabel);
                            var object =   {
                                'value':response.data[this.so2Name[index].dictLabel],
                                'name':this.so2Name[index].dictLabel,
                                'itemStyle': {
                                        'normal':{
                                        'color':this.so2Name[index].cssClass
                                        }
                                    },
                                //  'label':{'color':this.blackName[index].cssClass}
                                }
                            series.push(object);
                    }
                    var option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '25%',
                            right: 'right'
                        },
                        series: [
                            {
                                name: '检测点',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    alignTo: 'labelLine',
                                    formatter: '{name|{b}}\n{time|{d} %}',
                                    minMargin: 5,
                                    edgeDistance: 10,
                                    lineHeight: 15,
                                    rich: {
                                        name:{
                                            fontSize: 10,
                                            color:'#000'
                                        },
                                        time: {
                                            fontSize: 10,
                                        }
                                    }
                                },
                                labelLine: {
                                    length: 20,
                                    length2: 20,
                                    maxSurfaceAngle: 80
                                }, 
                                data: series
                            }
                        ]
                    };
                    myChart.setOption(option); 
            })
      },
       hyPie(){
           console.log(this.blackDate);
           var that = this;
           getBlackSnapPos({'month':this.blackDate}).then(response => {
                            var myChart =  that.$echarts.init(document.getElementById('hyPieChart'));
                            var series = [];
                            for(var index in that.blackName){
                                    var object =   {
                                        'value':response.data[that.blackName[index].dictLabel],
                                        'name':that.blackName[index].dictLabel,
                                        'itemStyle': {
                                                'normal':{
                                                'color':that.blackName[index].cssClass
                                                }
                                            },
                                        //  'label':{'color':this.blackName[index].cssClass}
                                        }
                                    series.push(object);
                            }
                            // console.log(series)
                            var option = {
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    top: '25%',
                                    right: 'right'
                                },
                                series: [
                                    {
                                        name: '检测点',
                                        type: 'pie',
                                        radius: ['40%', '70%'],
                                        avoidLabelOverlap: false,
                                        label: {
                                            alignTo: 'labelLine',
                                            formatter: '{name|{b}}\n{time|{d} %}',
                                            minMargin: 5,
                                            edgeDistance: 10,
                                            lineHeight: 15,
                                            rich: {
                                                name:{
                                                    fontSize: 10,
                                                    color:'#000'
                                                },
                                                time: {
                                                    fontSize: 10,
                                                }
                                            }
                                        },
                                        labelLine: {
                                            length: 20,
                                            length2: 20,
                                            maxSurfaceAngle: 80
                                        }, 
                                        data: series
                                    }
                                ]
                            };
                            myChart.setOption(option); 
           });
      },
      drawLine(){
        var so2Arry = [];
        var aisArry = [];
        for(var index in this.months){
            // console.log(this.so2TimeData.so2['2021-01-01T00:00:00Z']);
            if(this.so2TimeData.so2[this.months[index]+'-01T00:00:00Z']){
                  so2Arry.push(this.so2TimeData.so2[this.months[index]+'-01T00:00:00Z']);
            }else {
                  so2Arry.push(0);
            }  
            if(this.so2TimeData.ais[this.months[index]+'-01T00:00:00Z']){
                  aisArry.push(this.so2TimeData.ais[this.months[index]+'-01T00:00:00Z']);
            }else{
                  aisArry.push(0);
            }
        }
        var myChart =  this.$echarts.init(document.getElementById('myChart'));
                    var  option = {
                                title: {
                                    textStyle: {
                                            fontSize:20,
                                            color: 'white' //x轴data 的颜色
                                        }
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    right: '10%',
                                    top: '3%',
                                    data: ['嗅探','光谱']
                                },
                                grid: {
                                    left: '5%',
                                    right: '5%',
                                    bottom: '5%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: true,
                                      axisLine:{       //y轴
                                          show:false,
                                          color: ['#657ca8'],
                                        },
                                    data: this.months,
                                    splitLine: {
                                        show: false,
                                        lineStyle:{
                                            color: ['#657ca8'],
                                            width: 1,
                                            type: 'solid'
                                        }
                                       },
                                    axisLabel: {
                                        interval: 0,
                                        show: true,
                                        textStyle: {
                                            fontSize:15,
                                            color: 'black' //x轴data 的颜色
                                        }
                                        },
                                    },
                                yAxis: {
                                    type: 'value',
                                         axisTick:{       
                                          show:false
                                        },
                                        axisLine:{       //y轴
                                          show:false
                                
                                        },
                                         splitLine: {
                                        show: true,
                                        lineStyle:{
                                            color: ['#435886'],
                                            width: 1,
                                            type: 'solid'
                                        }
                                       },
                                    axisLabel: {
                                        interval: 0,
                                        show: true,
                                        textStyle: {
                                            fontSize:15,
                                            color: 'black' //x轴data 的颜色
                                        }
                            },
                                },
                                series: [
                                    {
                                        name: '光谱',
                                        type: 'line',
                                        data:so2Arry,
                                          symbolSize:5,
                                          itemStyle:{ 
                                                normal:{ 
                                                  color:'#228FFE',
                                                  lineStyle:{ 
                                                     color:'#228FFE', //折线颜色
                                                     width:3
                                                   },
                                                   
                                                 } 
                                           },
                                         areaStyle: {color:{
                                                type: 'linear',
                                                x: 0,
                                                y: 0,
                                                x2: 0,
                                                y2: 1,
                                                colorStops: [{
                                                    offset: 0, color: 'rgba(34,143,254,1)' // 0% 处的颜色
                                                }, {
                                                    offset: 1, color: 'rgba(34,143,254,0)' // 100% 处的颜色
                                                }],
                                                global: false // 缺省为 false
                                      }},  
                                    },
                                    {
                                        name: '嗅探',
                                        type: 'line',
                                        data: aisArry,
                                        symbolSize:5,
                                          itemStyle:{ 
                                                normal:{ 
                                                  color:'#7EFF7B',
                                                  lineStyle:{ 
                                                     color:'#7EFF7B', //折线颜色
                                                     width:3
                                                  },
                                                   
                                                 } 
                                          },
                                         areaStyle: {color:{
                                                type: 'linear',
                                                x: 0,
                                                y: 0,
                                                x2: 0,
                                                y2: 1,
                                                colorStops: [{
                                                    offset: 0, color: 'rgba(126,255,123,1)' // 0% 处的颜色
                                                }, {
                                                    offset: 1, color: 'rgba(126,255,123,0)' // 100% 处的颜色
                                                }],
                                                global: false // 缺省为 false
                                      }},  
                                    },
                                ]
                            };
                            myChart.setOption(option); 
    }, 
     hyLine(){
        //  console.log();
        //  console.log(this.so2TimeData.black);
        var black = [];
        for(var index in this.hyMonths){
        // console.log(this.so2TimeData.black['2021-08-01T00:00:00Z']);
                if(this.so2TimeData.black[this.hyMonths[index]+'-01T00:00:00Z']){
                        black.push(this.so2TimeData.black[this.hyMonths[index]+'-01T00:00:00Z']);
                }else{
                        black.push(0);
                }
        }
        var myChart =  this.$echarts.init(document.getElementById('hyChart'));
                    var  option = {
                                title: {
                                    textStyle: {
                                            fontSize:20,
                                            color: 'white' //x轴data 的颜色
                                        }
                                },
                                tooltip: {
                                    trigger: 'axis'
                                },
                                grid: {
                                    left: '5%',
                                    right: '5%',
                                    bottom: '5%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: true,
                                      axisLine:{       //y轴
                                          show:false,
                                          color: ['#657ca8'],
                                        },
                                    data: this.hyMonths,
                                    splitLine: {
                                        show: false,
                                        lineStyle:{
                                            color: ['#657ca8'],
                                            width: 1,
                                            type: 'solid'
                                        }
                                       },
                                    axisLabel: {
                                        interval: 0,
                                        show: true,
                                        textStyle: {
                                            fontSize:15,
                                            color: 'black' //x轴data 的颜色
                                        }
                                        },
                                    },
                                yAxis: {
                                    type: 'value',
                                         axisTick:{       
                                          show:false
                                        },
                                        axisLine:{       //y轴
                                          show:false
                                        },
                                        name: '单位:艘',
                                         splitLine: {
                                        show: true,
                                        lineStyle:{
                                            color: ['#435886'],
                                            width: 1,
                                            type: 'solid'
                                        }
                                       },
                                    axisLabel: {
                                        interval: 0,
                                        show: true,
                                        textStyle: {
                                            fontSize:15,
                                            color: 'black' //x轴data 的颜色
                                        }
                            },
                                },
                                series: [
                                    {
                                        name: '昨日',
                                        type: 'line',
                                        data:black,
                                          symbolSize:5,
                                          itemStyle:{ 
                                                normal:{ 
                                                  color:'#FF8000',
                                                  lineStyle:{ 
                                                     color:'#FF8000', //折线颜色
                                                     width:3
                                                   },
                                                   
                                                 } 
                                           },
                                         areaStyle: {color:{
                                                type: 'linear',
                                                x: 0,
                                                y: 0,
                                                x2: 0,
                                                y2: 1,
                                                colorStops: [{
                                                    offset: 0, color: 'rgba(255,128,0,1)' // 0% 处的颜色
                                                }, {
                                                    offset: 1, color: 'rgba(255,128,0,0)' // 100% 处的颜色
                                                }],
                                                global: false // 缺省为 false
                                      }},  
                                    },
                                ]
                            };
                            myChart.setOption(option); 
    } 
  }
};
</script>

<style scoped>
  .icon_size{
    width:10rem;
    height:20rem;
  }
  .titleContent{
    margin-top:5rem;
    width:280rem;
    height:15rem;
    font-size: 6rem;
    font-weight:bold;
    padding-left:8rem;
    padding-top:2rem;
    background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#C9E9F8), to(#F2F9FF));/*谷歌*/ 
  }
  
  /* .wfcbContent >>> .el-date-editor.el-input, .el-date-editor.el-input__inner{
    width:50rem;
  } */
 
</style>