jy2024-ui/src/views/index/widget/alarmRanking.vue

<template>
  <div class="column-row-title alarm-ranking">
    <span class="title-text"><img src="@/assets/images/title-icon.png" alt=""/>组件告警数排名
      <span class="s-span">(周)</span>
    </span>
<!--    <div><el-checkbox v-model="alarm" label="当前告警数" size="large" @change="getAlarm"/><span class="yellow-txt">8</span></div>-->
  </div>
  <div class="column-content column-content-half" @click="target">
    <div v-for="(item,index) in alarmData" class="alarm-row">
      <div class="ranking-title">
        <div>
          <span :class="index===0 ? 'no1' : index ===1 ? 'no2':index ===2 ? 'no3':'no-other'">
            NO.{{index+1}}
          </span>
          {{item.name}}
        </div>
        <span class="alarm-num">{{item.num}}</span>
      </div>
      <div class="alarm-progress">
        <div class="progress" :style="`width:${(item.num/maxValue)*100}%`" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {objAlarm} from "@/api/index/hl"
import {onMounted,onUnmounted} from "vue";
import {useRouter} from "vue-router";

const props = defineProps(["refreshTime"])

const alarm = ref(false)
const alarmData = ref([])
const maxValue = ref(0)
const router = useRouter()
const interval = ref(null)
onMounted(()=>{
  getAlarm()
  interval.value = setInterval(() => {
    getAlarm()
  }, props.refreshTime)
})

onUnmounted(() => {
  clearInterval(interval.value)
})

async function getAlarm(){
  const res = await objAlarm()
  alarmData.value = res.data.data.sort((a,b)=>b.num - a.num)
  maxValue.value = Math.max(...alarmData.value.map(item=>item.num))+20
}

function target(){
  router.push({path:"/alarm/bizSort",query:{today:"true"}})
}
</script>