<!-- 各区域接入视频点位(雷达图) -->
<script lang="ts" setup name="AreaVideoPoint">
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
import { getVideoPoint } from '@/api/bs'
import radarChart from '@/components/Echart/radarChart.vue'
const alarmYearData: any = ref([]) // Y轴
const alarmYearXData: Ref<string[]> = ref([]) // X轴
const loading = ref(false)
const indicator = ref([])
function fetchVideoPoint() {
  loading.value = true
  getVideoPoint().then((res) => {
    if (res && res.data && res.data.length) {
      const value = res.data.map((item: { value: number }) => item.value)
      alarmYearData.value = [{ name: '视频点位数量', value }]
      indicator.value = res.data.map((item: { value: number; name: string }) => {
        return {
          name: item.name,
          // max: (Number(item.value)).toFixed(0),
        }
      })
    }
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

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

<template>
  <div style="width: 100%;height: 100%;" class="alarm-year-bs" v-loading="loading">
    <radar-chart
      unit=""
      :data="alarmYearData"
      :legend="{
        textStyle: {
          color: '#acdddf',
          fontSize: 12,
        },
        show: false,
        orient: 'horizontal',
        icon: 'circle',
        itemWidth: 12,
        itemHeight: 12,
        y: 'top',
        x: 'center',
        type: 'scroll', // 显示分页
      }"
      :grid="{
        top: 50,
        left: 40,
        right: 10,
        bottom: 0,
        containLabel: true, // 是否包含坐标轴的刻度标签
      }"
      axisLineColor="#acdddf"
      fontColor="#acdddf"
      :radar="indicator"
    />
  </div>
</template>

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