jy2025-ui/src/views/risk/r5/components/alarmsTop.vue

<template>
  <div class="top-title">{{title}}</div>
  <div class="sub-tip">
    <span class="tip-alarm"/>告警次数
    <span class="tip-title"/>持续时间
  </div>
  <div v-for="(item,index) in data" :key="index" class="top-style">
      <span class="index" :style="`background:${colors[index]||'#A1B3D2'}`">
        {{ index + 1 }}
      </span>
    <div class="progress-row">
      {{ item.objName }}
      <div class="row-flex">
        <div class="progress-alarm">
          <div class="alarms" :style="`width:${item.alarms/maxAlarms*100}%`">{{item.alarms}}</div>
        </div>
        <div class="progress-alarm">
          <div class="time" :style="`width:${item.value/maxNum*100}%`">{{item.value}}</div>
        </div>
      </div>

    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  title:{
    type: String,
    default: ''
  },
  colors:{
    type: Array,
    default: () => []
  }
})
const maxNum = computed(() => {
  return Math.max(...props.data.map(item => item.value))+10
})
const maxAlarms = computed(() => {
  return Math.max(...props.data.map(item => item.alarms))+10
})
</script>
<style scoped lang="scss">
</style>