<!-- 各单位接入视频点位（折线+柱状） -->
<script lang="ts" setup name="DeptVideoPoint">
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
import { getDeptVideoPoint } from '@/api/bs'
import LineChartDynamics from '@/components/Echart/LineChartDynamics.vue'
const dangerTimeLineXData: any = ref([]) // 各单位预警时间分析X轴
const dangerTimeLineData = ref() // 各单位预警时间分析Y轴
const loading = ref(false) // loading
// 单位时间报警曲线
function getDangerTimeLine() {
  loading.value = true
  getDeptVideoPoint().then((res: any) => {
    if (res && res.data) {
      dangerTimeLineXData.value = res.data.x
      if (res.data.y && res.data.y.length) {
        const toConnectList = res.data.y.find((item: { name: string }) => item.name === '计划接入').data
        const connectList = res.data.y.find((item: { name: string }) => item.name === '实际接入').data
        dangerTimeLineData.value = [{ name: '实际接入', data: connectList }, { name: '计划接入', data: toConnectList, seriesType: 'bar' }]
      }
    }
  })
  loading.value = false
}
onMounted(() => {
  getDangerTimeLine()
})
</script>

<template>
  <div class="danter-time-bs" style="width: 100%;height: 100%;" v-loading="loading">
    <line-chart-dynamics
      :x-axis-data="dangerTimeLineXData"
      :data="dangerTimeLineData"
      unit=""
      :legend="{
        textStyle: {
          color: '#acdddf',
          fontSize: 12,
        },
        show: true,
        orient: 'horizontal',
        icon: 'circle',
        itemWidth: 12,
        itemHeight: 12,
        y: 'top',
        x: 'center',
        type: 'scroll', // 显示分页
      }"
      :grid="{
        top: 36,
        left: 20,
        right: 10,
        bottom: 0,
        containLabel: true, // 是否包含坐标轴的刻度标签
      }"
      axis-line-color="#acdddf"
      font-color="#acdddf"
      :is-automatic-carousel="true"
      tooltipTextColor="#fff"
      :Xrotate="45"
      tooltipBackgroundColor="rgba(3, 53, 139, .9)"
    />
      <!-- :Xrotate="45" -->
  </div>
</template>

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