<!-- 区域安全隐患分类 -->
<script lang="ts" setup>
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
const safeCatogeryByDeptData: any = ref([]) // 单元安全隐患分类Y轴
const safeCatogeryByDeptYDataMax = ref() // 单元安全隐患分类Y轴
const safeCatogeryByDeptXData: Ref<string[]> = ref([]) // 单元安全隐患分类X轴
const safeCatogeryByDeptLoading = ref(false) // 单位安全隐患分类
// 单元安全隐患分类
function getSafeCatogeryByDept() {
  safeCatogeryByDeptLoading.value = true
  // const value = res.data.map((item: any) => Number(item.value))
  // lastMonthAlarmData.value = [{ name: '设备数量', data: value }]
  // lastMonthAlarmYDataMax.value = Math.max(value) > 10 ? Math.max(value) : 10
  // lastMonthAlarmXData.value = res.data.map((item: any) => item.areaName)
  const value = [88, 58, 55, 77, 23, 40, 55]
  const value1 = [10, 20, 34, 5, 44, 55, 1]
  const value2 = [67, 67, 67, 88, 23, 50, 66]
  const value3 = [67, 58, 88, 78, 23, 40, 122]
  safeCatogeryByDeptData.value = [{ name: '有害气体', data: value }, { name: '易燃易爆', data: value1 }, { name: '机械', data: value2 }, { name: '其他', data: value3 }]
  // safeCatogeryByDeptYDataMax.value = Math.max(value) > 10 ? Math.max(value) : 10
  safeCatogeryByDeptXData.value = ['二部', '201', '203', '283', '23', '25', '706']
  safeCatogeryByDeptLoading.value = false
}

onMounted(() => {
  getSafeCatogeryByDept()
})
</script>

<template>
  <div style="width: 100%;height: 100%;">
    <bar-chart-vertical
      unit=""
      :x-axis-data="safeCatogeryByDeptXData"
      :data="safeCatogeryByDeptData"
      :max="safeCatogeryByDeptYDataMax"
      :barConer="2"
      :useDefaultCoclor="true"
      :legend="{
        textStyle: {
          color: '#acdddf',
          fontSize: 12,
        },
        show: true,
        orient: 'horizontal',
        // right: '20%',
        // top: 'center',
        icon: 'circle',
        itemWidth: 12,
        itemHeight: 12,
        y: 'top',
        x: 'center',
        type: 'scroll', // 显示分页
      }"
      :grid="{
        top: 50,
        left: 10,
        right: 10,
        bottom: 0,
        containLabel: true, // 是否包含坐标轴的刻度标签
      }"
      axisLineColor="#acdddf"
      fontColor="#acdddf"
      :isAutomaticCarousel="true"
      tooltipTextColor="#fff"
      tooltipBackgroundColor="rgba(3, 53, 139, .9)"
    />
  </div>
</template>