<template lang="html">
  <div id="charts">
    <div id="exception" style=" height: 98%;width: 98%;padding: 1% 1%;"></div>
  </div>
</template>

<script>
  import * as Util from '../../../../Util'
  import co from 'co'
  import echarts from 'echarts'
  import {HttpResetClass} from 'vue-client'

  let getData = function* (self, condition) {
    console.log('异常分析图表分析')
    console.log('异常分析图表分析数据', self)
    let load = new HttpResetClass()
    load.load('POST', 'rs/sql/DrillErrorEchars',
      {data: {condition: condition, groupname: self.groupname, startDate: self.startdate, endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null}).then((res) => {
      console.log('开始进行图表重新选渲染')
      let name = []
      let type1 = []
      let type1_lv = []
      let type2 = []
      let type2_lv = []
      let type3 = []
      let type3_lv = []
      let type4 = []
      let type4_lv = []
      let type5 = []
      let type5_lv = []
      let type6 = []
      let type6_lv = []
      let type7 = []
      let type7_lv = []
      let type8 = []
      let type8_lv = []
      let type9 = []
      let type9_lv = []
      for (var i = 0; i < res.data.length; i++) {
        name[i] = res.data[i].f_insert_date
        type1[i] = res.data[i].type1
        type1_lv[i] = res.data[i].type1_lv
        type2[i] = res.data[i].type2
        type2_lv[i] = res.data[i].type2_lv
        type3[i] = res.data[i].type3
        type3_lv[i] = res.data[i].type3_lv
        type4[i] = res.data[i].type4
        type4_lv[i] = res.data[i].type4_lv
        type5[i] = res.data[i].type5
        type5_lv[i] = res.data[i].type5_lv
        type6[i] = res.data[i].type6
        type6_lv[i] = res.data[i].type6_lv
        type7[i] = res.data[i].type7
        type7_lv[i] = res.data[i].type7_lv
        type8[i] = res.data[i].type8
        type8_lv[i] = res.data[i].type8_lv
        type9[i] = res.data[i].type9
        type9_lv[i] = res.data[i].type9_lv
      }
      self.set(name, type1, type1_lv, type2, type2_lv, type3, type3_lv, type4, type4_lv,
        type5, type5_lv, type6, type6_lv, type7, type7_lv, type8, type8_lv, type9, type9_lv)
    })
  }
  export default {
    props: {
      echarts: {
        type: Boolean,
        default: false
      },
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      },
      condition: {
        type: String,
        default: '1=1'
      },
      groupname: {
        type: String,
        default: 'year'
      }
    },
    data() {
      return {
        xc: ''
      }
    },
    methods: {
      set(name, type1, type1_lv, type2, type2_lv, type3, type3_lv, type4, type4_lv,
          type5, type5_lv, type6, type6_lv, type7, type7_lv, type8, type8_lv, type9, type9_lv) {

        let name1 = ''
        if (this.groupname === 'year') {
          name1 = '年'
        } else if (this.groupname === 'month') {
          name1 = '月'
        } else if (this.groupname === 'week') {
          name1 = '周'
        } else {
          name1 = '日'
        }
        this.xc = echarts.init(document.getElementById('exception'))
        this.xc.setOption({
          'title': {
            'text': '异常' + name1 + '分析',
            'left': 'center',
            'y': '10',
            'textStyle': {
              'color': '#696969',
              fontSize: 20
            }
          },
          'backgroundColor': '#F8F8FF',
          'color': '#384757',
          'tooltip': {
            'trigger': 'axis',
            'extraCssText': 'width: auto;height: auto;'
          },
          'legend': {
            'data': [
              {
                'name': '拆表上报',
                'icon': 'circle',
                'textStyle': {
                  'color': '#7d838b',
                  fontSize: 20
                }
              },
              {
                'name': '补抄上报',
                'icon': 'circle',
                'textStyle': {
                  'color': '#233564',
                  fontSize: 20
                }
              },
              {
                'name': '锂电低电上报',
                'icon': 'circle',
                'textStyle': {
                  'color': '#ffaa00',
                  fontSize: 20
                }
              },
              {
                'name': 'E7上报',
                'icon': 'circle',
                'textStyle': {
                  'color': '#FD2234',
                  fontSize: 20
                }
              },
              {
                'name': 'E8上报',
                'icon': 'circle',
                'textStyle': {
                  'color': '#AE3345',
                  fontSize: 20
                }
              },
              {
                'name': 'E16上报',
                'icon': 'circle',
                'textStyle': {
                  'color': '#Bc0',
                  fontSize: 20
                }
              },
              {
                'name': 'E21上报',
                'icon': 'circle',
                'textStyle': {
                  'color': '#dedfda',
                  fontSize: 20
                }
              },
              {
                'name': 'E23上报',
                'icon': 'circle',
                'textStyle': {
                  'color': '#ffaaff',
                  fontSize: 20
                }
              },
              {
                'name': '其他上报',
                'icon': 'circle',
                'textStyle': {
                  'color': '#daaaaa',
                  fontSize: 20
                }
              },
              {
                'name': '拆表上报率',
                'icon': 'circle',
                'textStyle': {
                  'color': '#7d838b',
                  fontSize: 20
                }
              },
              {
                'name': '补抄上报率',
                'icon': 'circle',
                'textStyle': {
                  'color': '#233564',
                  fontSize: 20
                }
              },
              {
                'name': '锂电低电上报率',
                'icon': 'circle',
                'textStyle': {
                  'color': '#ffaa00',
                  fontSize: 20
                }
              },
              {
                'name': 'E7上报率',
                'icon': 'circle',
                'textStyle': {
                  'color': '#FD2234',
                  fontSize: 20
                }
              },
              {
                'name': 'E8上报率',
                'icon': 'circle',
                'textStyle': {
                  'color': '#AE3345',
                  fontSize: 20
                }
              },
              {
                'name': 'E16上报率',
                'icon': 'circle',
                'textStyle': {
                  'color': '#Bc0',
                  fontSize: 20
                }
              },
              {
                'name': 'E21上报率',
                'icon': 'circle',
                'textStyle': {
                  'color': '#dedfda',
                  fontSize: 20
                }
              },
              {
                'name': 'E23上报率',
                'icon': 'circle',
                'textStyle': {
                  'color': '#ffaaff',
                  fontSize: 20
                }
              },
              {
                'name': '其他上报率',
                'icon': 'circle',
                'textStyle': {
                  'color': '#daaaaa',
                  fontSize: 20
                }
              }
            ],
            'top': '10%',
            'textStyle': {
              'color': '#fff'
            }
          },
          'xAxis': [
            {
              'type': 'category',
              'data': name,
              'name': '时间',
              'axisPointer': {
                'type': 'shadow'
              },
              'axisLabel': {
                'show': true,
                'textStyle': {
                  'color': '#7d838b',
                  fontSize: 15
                }
              }
            }
          ],
          'yAxis': [
            {
              'type': 'value',
              'name': '异常数',
              nameTextStyle: {
                fontSize: 10
              },
              'show': true,
              'axisLabel': {
                'show': true,
                'textStyle': {
                  'color': '#7d838b',
                  fontSize: 10
                }
              }
            },
            {
              'type': 'value',
              'name': '概率%',
              nameTextStyle: {
                fontSize: 15
              },
              'show': true,
              'axisLabel': {
                'show': true,
                'textStyle': {
                  'color': '#ffaa00',
                  fontSize: 15
                }
              }
            }
          ],
          'grid': {
            'top': '20%'
          },
          'series': [
            {
              'name': '拆表上报',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'bar',
              'data': type1,
              'markPoint': {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              'barWidth': 'auto',
              'itemStyle': {
                'normal': {
                  'color': '#7d838b'
                }
              },
              'barGap': '0'
            },
            {
              'name': '拆表上报率',
              'type': 'line',
              'data': type1_lv,
              'yAxisIndex': 1,
              'itemStyle': {
                'normal': {
                  'color': '#7d838b',
                  fontSize: 10
                }
              },
              'smooth': true
            },
            {
              'name': '补抄上报',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'bar',
              'data': type2,
              'markPoint': {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              'barWidth': 'auto',
              'itemStyle': {
                'normal': {
                  'color': '#233564'
                }
              },
              'barGap': '0'
            },
            {
              'name': '补抄上报率',
              'type': 'line',
              'yAxisIndex': 1,
              'data': type2_lv,
              'itemStyle': {
                'normal': {
                  'color': '#233564',
                  fontSize: 10
                }
              },
              'smooth': true
            },
            {
              'name': '锂电低电上报',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'bar',
              'data': type3,
              'markPoint': {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              'barWidth': 'auto',
              'itemStyle': {
                'normal': {
                  'color': '#ffaa00'
                }
              },
              'barGap': '0'
            },
            {
              'name': '锂电低电上报率',
              'type': 'line',
              'data': type3_lv,
              'yAxisIndex': 1,
              'itemStyle': {
                'normal': {
                  'color': '#ffaa00',
                  fontSize: 10
                }
              },
              'smooth': true
            },
            {
              'name': 'E7上报',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'bar',
              'data': type4,
              'markPoint': {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              'barWidth': 'auto',
              'itemStyle': {
                'normal': {
                  'color': '#FD2234'
                }
              },
              'barGap': '0'
            },
            {
              'name': 'E7上报率',
              'type': 'line',
              'data': type4_lv,
              'yAxisIndex': 1,
              'itemStyle': {
                'normal': {
                  'color': '#FD2234',
                  fontSize: 10
                }
              },
              'smooth': true
            },
            {
              'name': 'E8上报',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'bar',
              'data': type5,
              'markPoint': {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              'barWidth': 'auto',
              'itemStyle': {
                'normal': {
                  'color': '#AE3345'
                }
              },
              'barGap': '0'
            },
            {
              'name': 'E8上报率',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'line',
              'data': type5_lv,
              'yAxisIndex': 1,
              'itemStyle': {
                'normal': {
                  'color': '#AE3345',
                  fontSize: 10
                }
              },
              'smooth': true
            },
            {
              'name': 'E16上报',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'bar',
              'data': type6,
              'markPoint': {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              'barWidth': 'auto',
              'itemStyle': {
                'normal': {
                  'color': '#Bc0'
                }
              },
              'barGap': '0'
            },
            {
              'name': 'E16上报率',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'line',
              'data': type6_lv,
              'yAxisIndex': 1,
              'itemStyle': {
                'normal': {
                  'color': '#Bc0',
                  fontSize: 10
                }
              },
              'smooth': true
            },
            {
              'name': 'E21上报',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'bar',
              'data': type7,
              'markPoint': {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              'barWidth': 'auto',
              'itemStyle': {
                'normal': {
                  'color': '#dedfda'
                }
              },
              'barGap': '0'
            },
            {
              'name': 'E21上报率',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'line',
              'data': type7_lv,
              'yAxisIndex': 1,
              'itemStyle': {
                'normal': {
                  'color': '#dedfda',
                  fontSize: 10
                }
              },
              'smooth': true
            },
            {
              'name': 'E23上报',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'bar',
              'data': type8,
              'markPoint': {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              'barWidth': 'auto',
              'itemStyle': {
                'normal': {
                  'color': '#ffaaff'
                }
              },
              'barGap': '0'
            },
            {
              'name': 'E23上报率',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'line',
              'data': type8_lv,
              'yAxisIndex': 1,
              'itemStyle': {
                'normal': {
                  'color': '#ffaaff',
                  fontSize: 10
                }
              },
              'smooth': true
            },
            {
              'name': '其他上报',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'bar',
              'data': type9,
              'markPoint': {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              },
              'barWidth': 'auto',
              'itemStyle': {
                'normal': {
                  'color': '#daaaaa'
                }
              },
              'barGap': '0'
            },
            {
              'name': '其他上报率',
              nameTextStyle: {
                fontSize: 15
              },
              'type': 'line',
              'data': type9_lv,
              'yAxisIndex': 1,
              'itemStyle': {
                'normal': {
                  'color': '#daaaaa',
                  fontSize: 10
                }
              },
              'smooth': true
            }
          ]
        })
      },
      searchdata(condition) {
        let getGen = getData(this, condition)
        co(getGen)
      }
    },
    watch: {
      'echarts'(val) {
        this.searchdata(this.condition)
      },
      'groupname'(val) {
        this.searchdata(this.condition)
      }
    }
  }
</script>
