<!--
  Description: 设备分类统计/各类报警统计
  Author: 李亚光
  Date: 2025-06-12
 -->
<script lang="ts" setup name="DeviceTypeCount">
import layout from './layout.vue'
const resizePage = () => {
  setTimeout(() => {
    const resize = new Event('resize')
    window.dispatchEvent(resize)
  })
}
// 设备分类统计数据
const deviceTypeLoading = ref(false)
const xAxisData = ref([])
const data = ref<any[]>([])
setTimeout(() => {
  xAxisData.value = ['井盖状态监测仪', '井盖状态监测仪', '商用燃气智能监测终端', '商用燃气智能监测终端', '管盯']
  data.value = [
    {
      name: '设备数量',
      data: [15, 19, 50, 11, 20],
    },
  ]
  resizePage()
}, 1000)

// 各类报警统计
const alarmCountLoading = ref(false)
const xAxisData1 = ref([])
const data1 = ref([])
setTimeout(() => {
    xAxisData1.value = [
      '设备离线', '浓度超限', '数据异常', '设备异常',
    ]
    data1.value = [
      {
        name: '报警数量',
        data: [1, 3, 5, 1,],
      },
    ]
    resizePage()
}, 1000);
// 获取数据
const fetchData = () => {

}
fetchData()
</script>

<template>
  <div class="header-container">
    <!-- 设备分类统计 -->
    <layout class="header-left" title="设备分类统计">
      <template #content>
        <div class="content">
          <!-- 垂直柱状图 -->
          <div v-loading="deviceTypeLoading" class="bar">
            <bar-chart-horizontal v-show="xAxisData" :x-axis-data="xAxisData" :bar-coner="0" :data="data" :colors="[]"
              :bar-width="15"
              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '0', top: '0' }" />
            <el-empty v-show="!xAxisData" description="暂无数据" />
          </div>
        </div>
      </template>
    </layout>
    <!-- 各类报警统计 -->
    <layout class="header-right" title="各类报警统计">
      <template #content>
        <div class="content">
          <!-- 垂直柱状图 -->
          <div v-loading="alarmCountLoading" class="bar">
            <bar-chart-vertical v-show="xAxisData1.length" :x-axis-data="xAxisData1" :bar-coner="0" :data="data1"
              :show-label="false" :colors="[]" :bar-width="15"
              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '40', top: '10' }"
              :grid="{
                top: 50,
                left: 40,
                right: 40,
                bottom: 20,
                containLabel: true, // 是否包含坐标轴的刻度标签
              }" />
            <el-empty v-show="!xAxisData1" description="暂无数据" />
          </div>
        </div>
      </template>
    </layout>
  </div>
</template>

<style lang="scss" scoped>
.header-container {
  display: flex;
  justify-content: space-between;

  .header-left {
    width: 49%;
    box-sizing: border-box;
    padding: 10px;

    .title {
      font-weight: 700;
      font-size: 18px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 5px;
    }

    .content {
      display: flex;
      padding: 10px;

      .bar {
        width: 100%;
        height: 300px;
      }
    }
  }

  .header-right {
    width: 50%;
    box-sizing: border-box;
    padding: 10px;

    .title {
      font-weight: 700;
      font-size: 18px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 5px;
    }

    .content {
      display: flex;
      padding: 10px;
      justify-content: space-between;

      .bar {
        width: 100%;
        height: 300px;
      }

      .circle {
        width: 40%;
        height: 300px;
      }
    }
  }
}
</style>