<!-- 隐患分类 -->
<script lang="ts" setup>
import { getTotal } from '@/api/monitor/statistics'
import sbzxs from '@/assets/images/monitor/设备在线数.png'
import sbzs from '@/assets/images/monitor/设备总数.png'
import sblxl from '@/assets/images/monitor/设备离线率.png'
const data = [
  {
    value: 100,
    name: '危险点',
  },
  {
    value: 1,
    name: '危险源',
  },
  {
    value: 23,
    name: '危险化学品场所',
  },
  {
    value: 456,
    name: '危险作业',
  },
  {
    value: 798,
    name: '危险作业工序',
  },
]
const list = ref({
  devTotal: '****',
  onlineNum: '****',
  onlineRate: '****',
})
const numbersDom: any = ref(null)
const timer: any = ref(null)
// 数字动态滚动
const numberAnimation = (numbers: any) => {
  // 获取所有的dom,querySelectorAll为为数组
  numbers.forEach((counter: any) => {
    counter.innerText = 0
    const upDateNumber = () => {
      // 获取每个类名为number的data-target,即获取最大值
      const target = Number(counter.getAttribute('data-target'))

      // 获取当前div的数值
      const d = Number(counter.innerText)

      // 设置数据增加的值，可以通过target除的数值确定怎么加数值的快慢
      const increment = target / 200

      // 当数字小于最大值时，执行下面的操作
      if (d < target) {
        // 向上取整
        counter.innerText = `${Math.ceil(d + increment)}`
        // 1ms重新调用，不然它会在第一次运行完就结束
        setTimeout(upDateNumber, 1)
      }
      else {
        counter.innerText = target
      }
    }
    upDateNumber()
  })
}
onMounted(() => {
  getTotal().then((res) => {
    if (res.code === 200) {
      list.value = res.data
      if (list.value.onlineNum === '' || list.value.onlineNum === null || list.value.onlineNum === undefined) {
        list.value.onlineNum = '0'
      }
      // list.value.rate = (Number(list.value.onlineNum) / Number(list.value.devTotal) * 100).toFixed(2)
      // if (Number.isNaN(list.value.rate)) {
      //   list.value.rate = '****'
      // }
      const numbersDom = document.querySelectorAll('#number')
      numberAnimation(numbersDom)
      if (timer.value) {
        clearInterval(timer.value)
      }
      timer.value = setInterval(() => {
        numberAnimation(numbersDom)
      }, 5000)
    }
  })
})

onBeforeUnmount(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})
</script>

<template>
  <div class="danger-point-bs">
    <div v-for="item in data" :key="item.value" class="item">
      <el-image :src="sbzs" class="base-map-image" mode="fill" />
      <div class="item-text">
        <div class="title">
          {{ item.name }}
        </div>
        <div id="number" class="num" :data-target="`${item.value}`" />
      </div>
    </div>
    <!-- <div style="display: flex;height: 90px;text-align: center;width: 100%;justify-content: space-around;">
      <div class="item">
        <el-image :src="sbzs" class="base-map-image" mode="fill" />
        <div class="item-text">
          <div style="color: #0f67e7;">
            重大危险源
          </div>
          <div class="num">
            {{ list.devTotal }}<span class="unit">个</span>
          </div>
        </div>
      </div>
      <div class="item">
        <el-image :src="sbzxs" class="base-map-image" mode="fill" />
        <div class="item-text">
          <div style="color: #0f67e7;">
            危险点
          </div>
          <div class="num">
            {{ list.onlineNum }}<span class="unit">个</span>
          </div>
        </div>
      </div>
      <div class="item">
        <el-image :src="sbzxs" class="base-map-image" mode="fill" />
        <div class="item-text">
          <div style="color: #0f67e7;">
            危险化学品场所
          </div>
          <div class="num">
            {{ list.onlineNum }}<span class="unit">个</span>
          </div>
        </div>
      </div>
      <div class="item">
        <el-image :src="sblxl" class="base-map-image" mode="fill" />
        <div class="item-text">
          <div style="color: #0f67e7;">
            危险作业
          </div>
          <div class="num">
            {{ list.onlineRate }}<span class="unit">个</span>
          </div>
        </div>
      </div>
      <div class="item">
        <el-image :src="sblxl" class="base-map-image" mode="fill" />
        <div class="item-text">
          <div style="color: #0f67e7;">
            危险工序
          </div>
          <div class="num">
            {{ list.onlineRate }}<span class="unit">个</span>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
@font-face {
  font-family: MyFont;
  src: url("@/assets/Digital.ttf");
}
.danger-point-bs {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    background-color: #183749;
    border-radius: 0.5rem;
    border: 0.1rem solid #45d7ff;
    width: 48%;
    margin-bottom: 1rem;
    .base-map-image {
      width: 3rem;
      height: 3rem;
      // margin-left: 20px;
    }
    .title {
      font-size: 1rem;
      color: #97c0c4;
    }
    .num {
      font-size: 1.8rem;
      font-family: MyFont !important;
      color: #fff;
      /* 应用动画 */
      // animation: num-animation 3s infinite alternate;
      /* 设置动画关键帧 */
      // transform-style: preserve-3d;
      // animation-delay: 5s;
    }
  }
}
/* 定义关键帧 */
@keyframes num-animation {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-360deg);
  }
}

// 数字从下面慢慢浮上来效果
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>