<!--
  Description: 报警统计-报警趋势分析
  Author: 李亚光
  Date: 2023-07-09
 -->
<script lang="ts" setup name="TrendAnalysis">
import layout from './layout.vue'
const listQuery = ref({
  type: 'day',
})
const selectTimeType = (type: string) => {
  listQuery.value.type = type
}
const xAxisData = ref([])
const data = ref([])
const list = ref([])
setTimeout(() => {
  xAxisData.value = [
    '2024-07-01 12:11:12',
    '2024-07-02 12:11:12',
    '2024-07-03 12:11:12',
    '2024-07-04 12:11:12',
    '2024-07-05 12:11:12',
    '2024-07-06 12:11:12',
    '2024-07-07 12:11:12',
  ]
  data.value = [
    {
      name: '闸井浓度超限',
      data: [1, 3, 5, 1, 4, 2, 7],
      symbol: 'emptyCircle',
    },
    {
      name: '场站浓度超限',
      data: [2, 1, 4, 1, 5, 2, 9],
      symbol: 'emptyCircle',
    },
    {
      name: '闸井浓度超限',
      data: [4, 3, 2, 4, 7, 9, 1],
      symbol: 'emptyCircle',
    },
  ]
  list.value = xAxisData.value.map((item, index) => ({
    alarmTime: item,
    wellOver: data.value[0].data[index],
    senceOver: data.value[1].data[index],
    thirdParty: data.value[2].data[index],
  }))
}, 1000)
</script>

<template>
  <layout title="报警趋势分析">
    <!-- 查询条件 -->
    <template #search>
      <div class="search">
        <el-button
          :class="listQuery.type === 'day' ? 'active' : ''" round size="small"
          @click="selectTimeType('day')"
        >
          今日
        </el-button>
        <el-button
          :class="listQuery.type === 'week' ? 'active' : ''" round size="small"
          @click="selectTimeType('week')"
        >
          本周
        </el-button>
        <el-button
          :class="listQuery.type === 'month' ? 'active' : ''" round size="small"
          @click="selectTimeType('month')"
        >
          本月
        </el-button>
        <el-select v-model="listQuery.keywords" placeholder="全部类别" clearable style="width: 180px;margin: 0 5px;" />
        <dept-select
          v-model="listQuery.keywords" placeholder="管理单位" :clearable="true"
          style="width: 220px;margin: 0 5px;"
        />
        <el-date-picker
          v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
          style="width: 340px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable
        />
        <el-button type="primary" style="margin: 0 5px;">
          搜索
        </el-button>
      </div>
    </template>
    <template #content>
      <div class="alarm-count">
        <div class="bar">
          <line-chart
            :x-axis-data="xAxisData" :data="data" :gradient="false"
            :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '10' }"
          />
        </div>
        <div class="table">
          <el-table border :data="list" stripe style="width: 100%;" :height="440">
            <el-table-column label="日期" prop="alarmTime" align="center" />
            <el-table-column label="闸井浓度超限" prop="wellOver" align="center" />
            <el-table-column label="场站浓度超限" prop="senceOver" align="center" />
            <el-table-column label="疑似第三方破坏" prop="thirdParty" align="center" />
          </el-table>
        </div>
      </div>
    </template>
  </layout>
</template>

<style lang="scss" scoped>
.active {
  color: #3d7eff;
  border-color: #c5d8ff;
  outline: none;
  background-color: #ecf2ff;
}

.search {
  display: flex;
  align-items: center;
}

.alarm-count {
  display: flex;

  .bar {
    width: 60%;
    height: 450px;
  }

  .table {
    width: 38%;
    padding: 10px;
    margin-left: 20px;
  }
}
</style>