<!-- 各地区设备数量 -->
<script lang="ts" setup>
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
import { areaDev } from '@/api/monitor/statistics'
import BarChartVerticalDynamics from '@/components/Echart/BarChartVerticalDynamics.vue'
const safeCatogeryByDeptData: any = ref([]) // 单元安全隐患分类Y轴
const safeCatogeryByDeptYDataMax = ref() // 单元安全隐患分类Y轴
const safeCatogeryByDeptXData: Ref<string[]> = ref([]) // 单元安全隐患分类X轴
const loading = ref(false) // loading
const devBarXData = ref([])
const devBarData = ref([])
const devBarYDataMax = ref()
function getDevData() {
  loading.value = true
  areaDev().then((res) => {
    const value = res.data.map((item: { value: any }) => Number(item.value))
    // const value = [1,2,3,4,5,6,7,8]
    // devBarXData.value= [1,2,3,4,5,6,7,8]
    devBarData.value = [{ name: '设备数量', data: value }]
    // devBarYDataMax.value = Math.max(value) > 10 ? Math.max(value) : 10
    devBarYDataMax.value = Math.max(value)
    devBarXData.value = res.data.map((item: { areaName: any }) => item.areaName)
    loading.value = false
  })
}

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

<template>
  <div v-loading="loading" style="width: 100%;height: 100%;" class="area-device-count-bs">
    <bar-chart-vertical-dynamics
      unit="个"
      :x-axis-data="devBarXData"
      :data="devBarData"
      :bar-coner="2"
      :use-default-coclor="true"
      :legend="{
        textStyle: {
          color: '#acdddf',
          fontSize: 12,
        },
        show: false,
        orient: 'horizontal',
        // right: '20%',
        // top: 'center',
        icon: 'circle',
        itemWidth: 12,
        itemHeight: 12,
        y: 'top',
        x: 'center',
        type: 'scroll', // 显示分页
      }"
      :grid="{
        top: 50,
        left: 20,
        right: 10,
        bottom: 0,
        containLabel: true, // 是否包含坐标轴的刻度标签
      }"
      axis-line-color="#acdddf"
      font-color="#acdddf"
      :is-automatic-carousel="true"
      tooltip-text-color="#fff"
      tooltip-background-color="rgba(3, 53, 139, .9)"
      :cycle="5"
    />
  </div>
</template>

<style lang="scss">
  .area-device-count-bs {
  .el-loading-mask {
    background-color: rgba(30, 90, 142, 0.7); /* 更改为你想要的颜色 */
  }
}
</style>