<template lang='pug'>
    el-container(style="padding:0px;height:77.6vh;")
        el-header(style='height:42px;line-height:42px;border: 1px solid rgba(196, 196, 196, 1);background: #f4f4f4;')
            span.title-bold.title-left-color() 告警统计
        el-main.box_main
            el-card()
                div.tableCard()
                    el-form( :inline="true" :model="dataForm" size="mini" @keyup.enter.native="getDataList()")
                        el-row( )
                            el-col(:span='24')
                                el-form-item( label="告警时间:" )
                                    el-date-picker(v-model="dataForm.startTime" value-format="yyyy-MM-dd" style="width:165px;" clearable type="date" placeholder="开始日期")
                                    font &nbsp;&nbsp;至&nbsp;&nbsp;
                                    el-date-picker(v-model="dataForm.endTime" value-format="yyyy-MM-dd" style="width:165px;" clearable type="date" placeholder="结束日期")
                                    //el-date-picker(type="daterange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="inputWidth" style="width:275px;" v-model="rangeTime" clearable)
                                el-button( type="primary" size='mini' icon="el-icon-search" @click="getDataList()") 查询
                                //el-button(@click="reSet()" size='mini' type="primary" icon="el-icon-refresh-right") 重置
                    el-row()
                        el-col(:span="8")
                            div(class="div-block")
                                div(class='chart-title') 历史告警占比统计
                                div(class="inner" id="chartData")
                        el-col(:span="8")
                            div(class="div-block")
                                div(class='chart-title') 历史告警数据统计
                                div(class="inner" id="chartData2")
                        el-col(:span="8")
                            div(class="div-block")
                                div(class='chart-title') 历史告警趋势统计
                                div(class="inner" id="chartData3")
                                    //ve-line(:data="chartData3" :extend="extend3" v-bind="pubSetting" legend-position="bottom" )

</template>

<script>
import list from '@/pages/demo/charts/list/_mixin/list.js'

export default {
  mixins: [
    list
  ],
  data () {
    this.extend1 = {
      grid: {
        top: -30
      }
    }
    this.extend2 = {
      series: {
        type: 'bar', // 添加该属性
        label: { show: true, position: 'top' }
      }
    }
    this.extend3 = {
      series: {
        type: 'line', // 添加该属性
        label: {
          normal: {
            show: true
          }
        }
      }
    }
    return {
      chartData: {
      },
      chartData2: {
      },
      chartData3: {
        columns: [],
        rows: []
      },
      chartInit1: null,
      chartInit2: null,
      chartInit3: null,
      dataForm: {
        startTime: '',
        endTime: ''
      },
      //rangeTime: [new Date(2000, 10, 10), new Date(2000, 10, 11)],
      rangeTime: [],
      dataList: [],
      alarmTypeList: []
    }
  },
  created () {
    this.timeChange(10) //默认10天
    this.getDataList()
  },
  methods: {
    //重置
    reSet() {
          this.dataForm = {}
          this.getDataList()
    },
    timeChange (val) {
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * (val - 1))
      //this.rangeTime = [new Date(start.getFullYear(), start.getMonth(), start.getDate()), new Date()]
      this.dataForm.startTime = this.getime(new Date(start.getFullYear(), start.getMonth(), start.getDate()))
      this.dataForm.endTime = this.getime(new Date())
    },
    getime (time) {
      let str = ''
      let y = time.getFullYear()
      let m = (time.getMonth() + 1 + '').padStart(2, '0')
      let d = (time.getDate() + '').padStart(2, '0')
      str = `${y}-${m}-${d}`
      return str
    },
    getDataList () {
      if (!this.dataForm.startTime || this.dataForm.startTime.length <= 0) {
            this.$message.error('请选择开始日期！')
            return
      }
        if (!this.dataForm.endTime || this.dataForm.endTime.length <= 0) {
            this.$message.error('请选择结束日期！')
            return
        }

      this.getPieDataList()
      this.getHistogramDataList()
      this.getLineDataList()
    },
    getOption1(data) {
        if (!this.chartInit1) {
            let dom = document.getElementById('chartData')
            if (!dom) return
            this.chartInit1 = this.$echarts.init(dom)
        }
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'horizontal',
                bottom: 20,
                data: data
            },
            series: [
                {
                    bottom: 80,
                    type: 'pie',
                    radius: '80%',
                    center: ['50%', '50%'],
                    /*itemStyle: {
                        normal: {
                            color: function (params) {
                                //自定义颜色
                                let colorList = [
                                    '#67C23A', '#409EFF', '#F56C6C', '#E6A23C'
                                ]
                                return colorList[params.dataIndex]
                            }
                        }
                    },*/
                    data: this.chartData
                }
            ]
        }
        this.chartInit1.setOption(option)
    },
    // 获取数据列表(历史占比统计)
    getPieDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/eqAlarm/getPieStatisticsData'),
        method: 'post',
        data: {
          stationId: localStorage.getItem('stationId'),
          startTime: this.dataForm.startTime,
          endTime: this.dataForm.endTime
        }
      }).then(data => {
        if (data && data.code === 0) {
          this.chartData = data.rows
          this.getOption1(data.dicList)
        }
        this.dataListLoading = false
      })
    },
    getOption2(data) {
          if (!this.chartInit2) {
              let dom = document.getElementById('chartData2')
              if (!dom) return
              this.chartInit2 = this.$echarts.init(dom)
          }
          let option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              legend: {
                  type: 'plain',
                  orient: 'horizontal',
                  bottom: 10,
                  data: data
              },
              xAxis: {
                  data: data,
                  axisLabel: {
                      //align: 'center',
                      interval: 0,
                      rotate: 10
                  }
              },
              yAxis: {
                minInterval: 1//不允许出现小数
              },
              grid: {
                  left: '2%',
                  right: '2%',
                  containLabel: true
              },
              series: [{
                  type: 'bar',
                  data: this.chartData2,
                  barWidth: '80%',
                  bottom: 80
                  /*itemStyle: {
                      normal: {
                          color: function (params) {
                              //自定义颜色
                              let colorList = [
                                  '#67C23A', '#409EFF', '#F56C6C', '#E6A23C'
                              ]
                              return colorList[params.dataIndex]
                          }
                      }
                  }*/
              }]
          }
          this.chartInit2.setOption(option)
    },
    // 获取数据列表
    getHistogramDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/eqAlarm/getHistogramStatisticsData'),
        method: 'post',
        data: {
          stationId: localStorage.getItem('stationId'),
          startTime: this.dataForm.startTime,
          endTime: this.dataForm.endTime
        }
      }).then(data => {
        if (data && data.code === 0) {
          this.chartData2 = data.countList
          this.getOption2(data.dicList)
        }
        this.dataListLoading = false
      })
    },
    getOption3(data) {
        if (!this.chartInit3) {
            let dom = document.getElementById('chartData3')
            if (!dom) return
            this.chartInit3 = this.$echarts.init(dom)
        }
        let option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                orient: 'horizontal',
                bottom: 10,
                data: data.legendData
            },
            grid: {
                left: '2%',
                right: '2%',
                containLabel: true
            },
            toolbox: {},
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.xAxisData
            },
            yAxis: {
                type: 'value',
                minInterval: 1//不允许出现小数
            },
            series: data.rows
        }
        this.chartInit3.setOption(option)
    },
    // 获取数据列表
    getLineDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/eqAlarm/getLineStatisticsData'),
        method: 'post',
        data: {
          stationId: localStorage.getItem('stationId'),
          startTime: this.dataForm.startTime,
          endTime: this.dataForm.endTime
        }
      }).then(data => {
        if (data && data.code === 0) {
          this.getOption3(data)
        }
        this.dataListLoading = false
      })
    }
  }
}
</script>
<style lang='scss'>
.div-block {
  height: 55vh;
  width: 540px;
  position: relative;
  text-align: center;
  margin: 5px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(23, 41, 71, 0.08);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);

  .chart-title {
    line-height: 40px;
    background: #eef8ff;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333;
  }
}

.inner {
  position: absolute;
  top: 80px;
  right: 20px;
  bottom: 20px;
  left: 20px;
}
</style>
