jy2024-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} from "vue";
import {useRouter} from "vue-router";

const accessData = ref([])
const maxValue = ref(0)
const router = useRouter()
onMounted(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:"/alarm/bizAccess",query:{today:"true"}})
}

</script>