<!--报警分析-->
<template>
  <panel-card title="报警分析">
    <template slot="func">
      <el-col :span="16">
        <el-date-picker
          v-model="timeRange"
          type="datetimerange"
          range-separator="至"
          size="small"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :clearable="false"
          @change="refresh"
        />
      </el-col>
    </template>
    <div class="flex-container">
      <div class="flex-left">
        <ve-line
          :data="chartData"
          :settings="chartSettingsLine"
        />
      </div>
      <div class="flex-right">
        <el-table border :data="tableList" stripe empty-text="无报警" height="340">
          <el-table-column prop="alarmContent" label="报警类型" align="center" />
          <el-table-column prop="alarmCount" label="报警数量" align="center" />
        </el-table>
      </div>
    </div>
  </panel-card>
</template>

<script>
import { alarmStaticByDay, alarmStaticsByContent } from '@/api/data/dataStatics'
import PanelCard from '@/components/BigData/Card/panelCard'
import { getSearchLastWeekTime } from '@/utils/dateutils'

export default {
  name: 'AlarmAnalysis',
  components: { PanelCard },
  data() {
    return {
      listQuery: {
        deviceType: '',
        beginTime: '',
        endTime: ''
      }, // 查询条件
      timeRange: [], // 时间范围
      tableList: [], // 列表
      // 折线图
      chartSettingsLine: {
        labelMap: {
          'date': '日期',
          'alarmTimes': '报警次数'
        },
        dimension: ['date']
      }, // 配置
      chartData: {
        columns: ['date', 'alarmTimes'],
        rows: []
      } // 折线图数据
    }
  },
  created() {
    this.timeRange = getSearchLastWeekTime()
    this.refresh()
  },
  methods: {
    refresh() {
      this.handleDateTime()
      this.fetchAlarmByDay()
      this.fetchAlarmByContent()
    },
    // 获取各类报警的列表
    fetchAlarmByContent() {
      const query = {
        alarmType: '1',
        beginTime: this.listQuery.beginTime,
        endTime: this.listQuery.endTime
      }
      alarmStaticsByContent(query).then(response => {
        this.tableList = response.data
      })
    },
    // 获取每日报警数
    fetchAlarmByDay() {
      // 模拟数据
      // this.chartData.rows = [
      //   { 'date': '9月20日', 'alarmTimes': 153, 'alarmWells': 43 },
      //   { 'date': '9月21日', 'alarmTimes': 150, 'alarmWells': 30 },
      //   { 'date': '9月22日', 'alarmTimes': 143, 'alarmWells': 23 },
      //   { 'date': '9月23日', 'alarmTimes': 173, 'alarmWells': 23 },
      //   { 'date': '9月24日', 'alarmTimes': 272, 'alarmWells': 52 },
      //   { 'date': '9月25日', 'alarmTimes': 253, 'alarmWells': 53 }
      // ]
      alarmStaticByDay(this.listQuery).then(response => {
        this.chartData.rows = response.data
      })
    },
    // 处理时间
    handleDateTime() {
      if (!this.timeRange) {
        this.timeRange = getSearchLastWeekTime()
      }
      this.listQuery.beginTime = this.timeRange[0]
      this.listQuery.endTime = this.timeRange[1]
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-container{
  display: flex;
  .flex-left{
    flex:1;
  }
  .flex-right{
    width: 260px;
    padding: 10px 20px;
  }
}

</style>