<!--
  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 = ['2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04', '2025-06-05', '2025-06-06']
  data.value = [
    {
      name: '数量',
      data: [15, 19, 50, 11, 20, 0],
    },
  ]
  resizePage()
}, 1000)

// 各类报警统计
const alarmCountLoading = ref(false)
const xAxisData1 = ref([])
const data1 = ref([])
setTimeout(() => {
  xAxisData1.value = [
    '北燃哨兵', '济南项目', '便携式管盯调试202412', '运维组测试分组1', '设备分组联调2', '设备分组联调12月01', '测试g'
  ]
  data1.value = [
    {
      name: '设备数量',
      data: [1, 3, 5, 1, 9, 15, 7],
    },
  ]
  resizePage()
}, 1000);
// 获取数据
const fetchData = () => {

}
fetchData()
</script>

<template>
  <div class="header-container">
    <!-- 设备分组统计 -->
    <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>
    <!-- 报警趋势统计 -->
    <layout class="header-left" title="报警趋势统计">
      <template #content>
        <div class="content">
          <!-- 垂直柱状图 -->
          <div v-loading="deviceTypeLoading" class="bar">
            <line-chart :x-axis-data="xAxisData" :data="data" :gradient="true"
              :legend="{ itemWidth: 8, itemHeight: 8, type: 'scroll', orient: 'horizontal', icon: 'roundRect', right: '60', top: '10' }"
              :grid="{
                top: 50,
                left: 60,
                right: 60,
                bottom: 20,
                containLabel: true, // 是否包含坐标轴的刻度标签
              }" />
          </div>
        </div>
      </template>
    </layout>

  </div>
</template>

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

  .header-left {
    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;

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

  .header-right {
    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;
      justify-content: space-between;

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

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