runResult.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <div class="column-row">
  3. <div class="column-row-title">
  4. <span class="title-text" @click="handleTarget" style="cursor: pointer"><img src="@/assets/images/title-icon.png"
  5. alt=""/>异常分析及预测
  6. <span class="s-span">(截止前一天)</span>
  7. </span>
  8. <div>风险<span class="yellow-txt">{{ riskNum }}</span></div>
  9. </div>
  10. <div class="column-content">
  11. <div class="c-row" v-for="item in riskData">
  12. <span class="c-item">{{ item.objName }}</span>
  13. <span class="c-item">{{ item.metricsName }}</span>
  14. <span
  15. :class=" item.status==2 ? 'statue-risk' : 'statue-normal' ">{{ item.status == 1 ? '正常' : '存在风险' }}</span>
  16. </div>
  17. </div>
  18. </div>
  19. </template>
  20. <script setup lang="ts">
  21. import {riskList} from "@/api/index/hl"
  22. import {onMounted, onUnmounted} from "vue";
  23. import {useRouter} from "vue-router"
  24. const props = defineProps(["refreshTime"])
  25. const risk = ref(false)
  26. const riskData = ref([])
  27. const riskNum = ref(0)
  28. const interval = ref(null)
  29. const router = useRouter()
  30. const handleTarget = () => {
  31. router.push("/risk/heterogeneous")
  32. }
  33. onMounted(() => {
  34. getRisk()
  35. interval.value = setInterval(() => {
  36. getRisk()
  37. }, props.refreshTime)
  38. })
  39. onUnmounted(() => {
  40. clearInterval(interval.value)
  41. })
  42. async function getRisk() {
  43. const {data} = await riskList(risk.value ? 2 : 1)
  44. riskData.value = data.data
  45. riskNum.value = data.num;
  46. }
  47. </script>
  48. <style scoped lang="scss">
  49. </style>