jy2025-ui/src/views/index/widget/accessError.vue

<template>
  <div class="column-row-title">
    <span class="title-text"><img src="@/assets/images/title-icon.png" alt=""/>业务访问报错排名
      <span class="s-span">(当日)</span>
    </span>
  </div>
  <div class="column-content column-content-half" @click="target">
    <div class="tab-block">
      <span><span class="tab-blue"/>总次数</span>
      <span><span class="tab-yellow"/>访问错误次数</span>
    </div>
    <div class="access-row" v-for="item in accessData">
      <div class="a-r-label">{{ item.name }}</div>
      <div class="a-r-progress">
        <div class="p-total">
          <span class="progress" :style="`width: calc(${(item.total/maxValue)*100}% - 40px)`"/>
          {{ item.total }}
        </div>
        <div class="p-total p-error">
          <span class="progress" :style="`width: ${(item.error/item.total)*100}%`"/>
          {{ item.error }}
        </div>
        <!--        <el-progress :percentage="item.total" :format="(percentage) => (percentage)"/>-->
        <!--        <el-progress :percentage="item.error" :format="(percentage) => (percentage)"/>-->
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {bizAccess} from "@/api/index/hl"
import {onMounted, onUnmounted} from "vue";
import {useRouter} from "vue-router";

const props = defineProps(["refreshTime"])
const accessData = ref([])
const maxValue = ref(0)
const router = useRouter()
const interval = ref(null)
onMounted(() => {
  getBiz()
  interval.value = setInterval(() => {
    getBiz()
  }, props.refreshTime)
})


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

const getBiz = async () => {
  const res = await bizAccess()
  accessData.value = res.data
  maxValue.value = Math.max(...accessData.value.map(item => item.total)) + 20
}


function target() {
  router.push({path: "/pxf-risk-monitor-web/alarm/bizAccess", query: {today: "true"}})
}

</script>