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

<template>
  <div class="app-health">
    <div :class="`a-h-item ${itemClass[index]}`" v-for="(item,index) in currData" @click="handleDetails(item)">
        <div :class="`i-value ${ item.hlScore > 80 ? 'i-normal' :  'i-risk' } `">
          {{item.hlScore}}
        </div>
        <img :src="itemImg" alt="" class="h-img"/>
        <div class="i-label">{{item.modelName}}</div>
    </div>
<!--    <div class="a-h-item item-jcd">-->
<!--      <img src="@/assets/images/health-small.png" alt="" />-->
<!--      <div class="i-label">应用健康度</div>-->
<!--    </div>-->
  </div>
</template>
<script setup lang="ts">
import itemImg from "@/assets/images/health-mini.png"
import {hlCurr} from "@/api/index/hl"
import {onMounted,onUnmounted} from "vue";
import {useRouter} from "vue-router"
const props = defineProps(["refreshTime"])
const router = useRouter()
const currData= ref([])
const itemClass = ["","item-cq","item-js","item-hg","item-fb","item-yw"]
const interval = ref(null)
onMounted( ()=>{
  getHl()
  interval.value = setInterval(() => {
    getHl()
  }, props.refreshTime)
})

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

async function getHl(){
  const res = await hlCurr()
  currData.value = res.data
}

function handleDetails(item){
  const {modelId,hlScoreId} = item
  router.push({path: '/pxf-risk-monitor-web/hl/bm',query:{modelId,hlScoreId}})
}

</script>
<style scoped lang="scss">
</style>