<!--
  Description: 综合大屏 - 数据展示- 各分公司报警统计
  Author: 李亚光
  Date: 2024-09-18
 -->
<script lang="ts" setup name="FullScreenDeptAlarmCount">
import layout from './layout.vue'
import BarChartHorizontal from '@/components/Echart/BarChartHorizontal.vue'
// 宽高
const height = ref((window.innerHeight - 100 - 50) / 3)
const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
window.addEventListener('resize', () => {
  height.value = (window.innerHeight - 100 - 50) / 3
  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
})
const data = ref<any[]>([])
const xAxisData = ref<any[]>([])

onMounted(() => {
  setTimeout(() => {
    xAxisData.value = ['第一分公司', '第二分公司', '第三分公司', '第四分公司', '第五分公司']
    data.value = [
      {
        name: '数量',
        data: [54, 64, 32, 28, 43],
      },
    ]
  }, 3000)
})
</script>

<template>
  <layout class="layout" :height="height" :width="width" title="各分公司报警统计" subtitle="Alarm Statistics Of Each Company">
    <template #content>
      <bar-chart-horizontal
        :data="data" :x-axis-data="xAxisData" bar-width="10" :bar-coner="0" label-color="#a7ceec"
        :show-label="true" :style="{ width: '100%', height: `${height - 30}px` }" :legend="{ show: false }"
        font-color="#fff"
      />
    </template>
  </layout>
</template>

<style lang="scss" scoped>
::v-deep(.el-loading-mask) {
  background-color: rgba($color: #0b0b0f, $alpha: 95%);
}

.layout {
  ::v-deep(.title) {
    padding-left: 8px !important;
    color: #fff;
    font-weight: 700;
    // padding-left: 20px;
    box-sizing: border-box;
  }
}
</style>