<template>
  <div>
    <div class="sub-dev-block">
      <div class="subTitle">今日各设备采集量统计</div>

      <div class="chart-container">
        <div ref="chartCollect" class="dev-chart-body" />
      </div>
    </div>

    <div class="sub-alarm-block">
      <div class="subTitle">今日识别报警人数统计</div>
      <div class="dev-select">
        <el-select v-model="displayAlarmDev" popper-class="cockpit-select">
          <el-option
            v-for="item in alarmDevs"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </div>

      <div class="chart-container">
        <div ref="chartAlarm" class="alarm-chart-body" />
      </div>
    </div>

  </div>

<!--  <el-row :gutter="20" style="padding: 20px;">-->
<!--    <el-col :span="24">-->
<!--      <div class="subTitle">各设备统计</div>-->
<!--    </el-col>-->

<!--    <el-col :span="8">-->
<!--      <div class="panelCorners">-->
<!--        <div class="chart-container">-->
<!--          <div ref="chartCollect" class="chart-body" />-->
<!--        </div>-->
<!--      </div>-->
<!--    </el-col>-->

<!--    <el-col :span="16">-->
<!--      <div class="panelCorners">-->
<!--        <div class="chart-container">-->
<!--          <div ref="chartAlarm" class="chart-body" />-->
<!--        </div>-->
<!--      </div>-->
<!--    </el-col>-->
<!--  </el-row>-->
</template>
<script>
import echarts from 'echarts'
import request from '@/utils/request'
export default {
  name: 'CategoryPanel',
  data() {
    return {
      analysisType: '1',
      dateRange: '',
      xDevDatas: [], // 设备采集量横轴
      xAlarmDatas: [], // 识别报警量横轴
      collectDatas: [], // 采集统计数据
      checkAlarmDatas: [], // 识别统计数据
      alarmDevs: [], // 识别报警设备列表
      displayAlarmDev: 0 // 显示的报警设备
    }
  },
  watch: {
    displayAlarmDev() {
      this.initChartAlarm(this.displayAlarmDev)
    }
  },
  mounted() {
    this.queryDevCollectAnalysis()
    this.queryCheckAlarmAnalysis()
  },
  methods: {
    queryDevCollectAnalysis() {
      request({
        url: '/bigScreen/getDevColAnalysis',
        method: 'post'
      }).then(response => {
        if (response.code === 200) {
          // 查询有新结果时清除原有的列表
          this.xDevDatas = []
          this.collectDatas = [2]
          this.collectDatas[0] = []
          this.collectDatas[1] = []
          if (response.data.length > 0) {
            response.data.forEach(item => {
              this.xDevDatas.push(item.devName)
              const dto = item.personNumAnalysisDTOList
              if (dto[0].personType === '一般人员') {
                this.collectDatas[0].push(dto[0].colNum)
              } else {
                this.collectDatas[1].push(dto[0].colNum)
              }
              if (dto[1].personType === '重点人员') {
                this.collectDatas[1].push(dto[1].colNum)
              } else {
                this.collectDatas[0].push(dto[1].colNum)
              }
            })
          }
          this.initChartCollect()
        }
      })
    },
    queryCheckAlarmAnalysis() {
      request({
        url: '/bigScreen/getRecAlarmAnalysis',
        method: 'post'
      }).then(response => {
        console.log(response)
        if (response.code === 200) {
          // 查询有新结果时清除原有的列表
          // this.xAlarmDatas = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
          this.xAlarmDatas = []
          this.checkAlarmDatas = []
          if (response.data.length > 0) {
            for (let i = 0; i < response.data.length; i++) {
              // 添加下拉列表框数据
              this.alarmDevs.push({
                value: i,
                label: response.data[i].devName
              })

              this.checkAlarmDatas[i] = []
              this.xAlarmDatas[i] = []
              const dto = response.data[i].recAlarmAnalysisDTOList

              for (let j = 0; j < dto.length; j++) {
                this.xAlarmDatas[i].push(dto[j].recDate.substring(0, 5))
                this.checkAlarmDatas[i].push(dto[j].recNum)
              }
            }
            this.displayAlarmDev = 0 // 默认选中第一个
          }
          this.initChartAlarm(0)
        }
      })
    },
    initChartCollect() {
      this.chart = echarts.init(this.$refs.chartCollect)
      this.chart.setOption({
        // title: {
        //   text: '今日采集量对比分析',
        //   textStyle: {
        //     color: '#f0f0f0',
        //     fontSize: 14
        //   },
        //   left: 'center'
        // },
        grid: {
          left: '60px',
          top: '10px'
        },
        legend: {
          // top: 0,
          // right: 0, // 右上方显示
          bottom: 0,
          icon: 'rect', // 方块样式
          textStyle: { // 字体大小和颜色
            color: '#FFFFFF',
            fontSize: 18,
            fontFamily: 'Microsoft YaHei'
          },
          data: ['一般人员', '重点人员']
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#0094FF', // 提示框背景色
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.xDevDatas,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              // rotate: 90,
              fontSize: 10,
              color: '#fff'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              fontSize: 10,
              color: '#fff'
            },
            splitLine: {
              show: false
            }
          }
        ],
        color: [
          '#016FE2', '#02FEFF',
          '#5ab1ef', '#fa6e86',
          '#0067a6', '#c4b4e4',
          '#d87a80', '#9cbbff', '#d9d0c7',
          '#87a997', '#d49ea2', '#5b4947',
          '#7ba3a8', '#19d4ae', '#ffb980'
        ],
        series: [
          {
            name: '一般人员',
            type: 'bar',
            data: this.collectDatas[0]
          },
          {
            name: '重点人员',
            type: 'bar',
            data: this.collectDatas[1]
          }
        ]
      })
      this.chart.resize()
    },
    initChartAlarm(i) {
      this.chart = echarts.init(this.$refs.chartAlarm)
      this.chart.setOption({
        // title: {
        //   text: '今日识别报警人数统计',
        //   textStyle: {
        //     color: '#f0f0f0',
        //     fontSize: 14
        //   },
        //   left: 'center'
        // },
        grid: {
          left: '60px',
          top: '10px'
        },
        legend: {
          bottom: 0,
          icon: 'rect', // 方块样式
          textStyle: { // 字体大小和颜色
            color: '#FFFFFF',
            fontSize: 18,
            fontFamily: 'Microsoft YaHei'
          },
          data: ['报警人数']
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#0094FF', // 提示框背景色
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#FFFF00',
              width: 2
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.xAlarmDatas[i],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              // rotate: 90,
              fontSize: 10,
              color: '#fff'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              fontSize: 10,
              color: '#fff'
            },
            splitLine: {
              show: false
            }
          }
        ],
        color: [
          '#5ab1ef', '#fa6e86',
          '#0067a6', '#c4b4e4',
          '#d87a80', '#9cbbff', '#d9d0c7',
          '#87a997', '#d49ea2', '#5b4947',
          '#7ba3a8', '#19d4ae', '#ffb980'
        ],
        series: [
          {
            name: '报警人数',
            type: 'line',
            smooth: true,
            data: this.checkAlarmDatas[i],
            itemStyle: {
              normal: {
                color: '#016FE2',
                lineStyle: {
                  width: 4 // 设置线条粗细
                }
              }
            },
            areaStyle: {
              type: 'default',
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, // 变化度
                // 三种由深及浅的颜色
                [{
                  offset: 0,
                  color: '#3695FF'
                }, {
                  offset: 1,
                  color: 'rgba(54, 149, 255, 0)'
                }]
              )
            }
          }
        ]
      })
      this.chart.resize()
    }
  }
}
</script>

<style scoped>
  .sub-dev-block {
    border: 2px solid #3370E3;
    background-color: rgba(41, 85, 252, 0.2);
    margin: 20px 10px 0px 20px;
    float: left;
    width: calc((100vw - 60px) * 2 / 5);
  }

  .sub-alarm-block {
    border: 2px solid #3370E3;
    background-color: rgba(41, 85, 252, 0.2);
    margin: 20px 20px 0px 10px;
    float: left;
    width: calc((100vw - 60px) * 3 / 5);
  }

  .subTitle {
    font-weight: bold;
    font-family: '微软雅黑',serif;
    color: #fff;
    font-size: 24px;
    padding: 10px 10px 10px 30px;
    background: url("images/sub-title-background.png") no-repeat;
    float: left;
    width: 400px;
  }

  .dev-select {
    float: right;
    padding: 5px;
  }

  .dev-select >>> .el-input__inner {
    background-color: #142446;
    border-radius: 0px;
    border: 1px solid #016FE2;
    color: #FFFFFF;
    font-size: 18px;
  }

  .chart-container {
    text-align: center;
    display: block;
    margin-top: 60px;
  }
  .dev-chart-body {
     min-height: 240px;
     width: calc((100vw - 60px) * 2 / 5);
     margin-right: auto;
     margin-left: auto;
   }
  .alarm-chart-body {
    min-height: 240px;
    width: calc((100vw - 60px) * 3 / 5);
  }

  @media(max-width: 1440px) {
    .sub-dev-block {
      margin: 15px 9px 0px 18px;
      width: calc((100vw - 54px) * 2 / 5);
      height: 285px;
    }

    .sub-alarm-block {
      margin: 15px 18px 0px 9px;
      width: calc((100vw - 54px) * 3 / 5);
      height: 285px;
    }

    .subTitle {
      font-size: 20px;
      padding: 9px 9px 9px 24px;
    }

    .dev-select >>> .el-input__inner {
      font-size: 16px;
      height: 36px;
    }

    .chart-container{
      text-align: center;
      display: block;
      margin-top: 42px;
    }
    .dev-chart-body {
      min-height: 235px;
      width: calc((100vw - 54px) * 2 / 5);
    }
    .alarm-chart-body {
      min-height: 235px;
      width: calc((100vw - 54px) * 3 / 5);
    }
  }

  @media(max-width: 1366px) {
    .sub-dev-block {
      margin: 12px 8px 0px 16px;
      width: calc((100vw - 48px) * 2 / 5);
      height: 240px;
    }

    .sub-alarm-block {
      margin: 12px 16px 0px 8px;
      width: calc((100vw - 48px) * 3 / 5);
      height: 240px;
    }

    .subTitle {
      font-size: 16px;
      padding: 8px 8px 8px 20px;
    }

    .dev-select >>> .el-input__inner {
      font-size: 14px;
      height: 30px;
    }

    .chart-container{
      text-align: center;
      display: block;
      margin-top: 36px;
    }
    .dev-chart-body {
      min-height: 180px;
      width: calc((100vw - 48px) * 2 / 5);
    }
    .alarm-chart-body {
      min-height: 180px;
      width: calc((100vw - 48px) * 3 / 5);
    }
  }
</style>

<style rel="stylesheet/scss" lang="scss">
  .cockpit-select{
    /*下拉框背景和边框*/
    background-color: #142446;
    border-radius: 0px;
    border: 1px solid #016FE2;
    .el-select-dropdown__list{
      padding:0 0;
    }
    /*下拉框选中选项*/
    .el-select-dropdown__item.selected {
      color: #FFFFFF;
      font-size: 18px;
    }
    /*下拉框未选中选项*/
    .el-select-dropdown__item {
      color: #CCC;
      font-size: 16px;
    }

    /*下拉框的鼠标滑过背景*/
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
      background-color: #016FE2;
    }
  }
  /*下拉框的三角指示标识*/
  .cockpit-select[x-placement^="bottom"] .popper__arrow{
    border-bottom-color: #016FE2;
  }
  .cockpit-select[x-placement^="bottom"] .popper__arrow::after {
    border-bottom-color: #016FE2;
  }
  .cockpit-select[x-placement^="top"] .popper__arrow {
    border-top-color: #016FE2;
  }
  .cockpit-select[x-placement^="top"] .popper__arrow::after {
    border-top-color: #016FE2;
  }

</style>
