jy2024-ui/src/views/hl/check/index.vue

<template>
  <div class="check-body">
    <div class="site-content">
      <div class="site-row">
        <div class="site-progress" :style="`width: ${currentProgress}%`"></div>
        <div class="site-label">
          <div class="site-node" v-for="(item,index) in checkList" :key="item.modelId">
            <div :class="['site',index<=cIndex && cIndex!=null?'normal':'un-info ']" />
            <div :class="['site-name',{'active-site-name':index<=cIndex && cIndex!=null}]">{{item.modelName}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="site-content mt10">
      <div class="check-status">
        <el-button type="primary" :loading="cLoading" @click="handleNowCheck(checkList.length)" style="padding:16px 22px;">
          立即巡检
        </el-button>
        <span class="check-progress">
          <span class="t-span">巡检进度:</span>
          <el-progress type="circle" :percentage="currentProgress" width="50" stroke-width="4" :color="colors">
            <template #default="{ percentage }">
              <span class="percentage-value">{{ percentage }}%</span>
            </template>
          </el-progress>
        </span>
        <span>
          <span v-show="checkTime" class="check-time">
            <span class="t-span">巡检时间:</span>
            <span class="check-time">{{parseTime(checkTime, '{y}-{m}-{d} {h}:{mi}:{s}')}}</span>
          </span>
        </span>
      </div>
      <div class="progress-bar">
        <div class="progress-bar-inner" :style="`width: ${currentProgress}%`"/>
      </div>

      <div class="check-info">
        <div class="sub-col">
          <el-icon :size="46" color="#409EFF"><Timer /></el-icon>
          <div class="s-c-text">
            {{cIndex!=null?cIndex+1:0}}/{{checkList.length}}<br/>已检测模型</div>
        </div>
        <div class="sub-col">
          <el-icon :size="46" color="#409EFF"><Compass /></el-icon>
          <div class="s-c-text">{{cIndex!=null?Math.ceil((314/checkList.length)*(cIndex+1)):0}}/314<br/>已检测指标</div>
        </div>
        <div class="sub-col">
          <el-icon :size="46" color="#409EFF"><Warning /></el-icon>
          <div class="s-c-text">
            <span class="s-c-num">{{totalError}}</span>
            <br/>已发现问题</div>
        </div>
      </div>
      <el-table :data="listData" style="width: 100%" border class="mt20">
        <el-table-column prop="class" label="分类" width="180" />
        <el-table-column prop="option" label="巡检项" />
        <el-table-column label="巡检进度" align="center" width="180">
          <template #default="{row}">
            <span v-if="checkTime">
              <el-icon size="25" color="#90a4ae" class="rotate" v-if="row.checkProess!=='done'"><Loading /></el-icon>
              <el-icon size="25" color="#388e3c" v-else><CircleCheck /></el-icon>
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="巡检结果" align="center" width="180">
          <template #default="{row}">
            <span v-if="checkTime">
              <el-icon size="25" color="#90a4ae" class="rotate" v-if="!row.checkResult"><Loading /></el-icon>
              <span v-else class="check-result">
                <el-icon size="20" color="#e43"><WarnTriangleFilled /></el-icon>
                <span class="res-text">{{row.checkResult}} 项</span>
              </span>
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script setup lang="ts">
import {getCheckList,getCheckModel} from "@/api/hl/bm"
import {onMounted} from "vue";
import {Timer,Compass,Warning,Loading,CircleCheck,WarnTriangleFilled} from "@element-plus/icons-vue"
const checkList = ref([])
const cLoading = ref(false)
const currentProgress = ref(0)
const cIndex=ref(null)
const listData = ref([])
const checkTime = ref(null)
const totalError=ref(0)

const colors = [
  { color: '#bbdefb', percentage: 20 },
  { color: '#90caf9', percentage: 40 },
  { color: '#64b5f6', percentage: 60 },
  { color: '#2196f3', percentage: 80 },
  { color: '#1e88e5', percentage: 100 },
]

onMounted(async ()=>{
  const res = await getCheckList();
  checkList.value = res.data
  listData.value = res.data[0].classList
})


function convertTime(milliseconds) {
  // 将毫秒转换为秒
  let seconds = Math.floor(milliseconds / 1000);

  // 计算小时、分钟和秒
  let hours = Math.floor(seconds / 3600);
  let minutes = Math.floor((seconds % 3600) / 60);
  let remainingSeconds = seconds % 60;

  // 格式化为00:00:00的形式
  return padZero(hours) + ":" + padZero(minutes) + ":" + padZero(remainingSeconds);
}

// 在数字前面补零，确保两位数的格式
function padZero(number) {
  return (number < 10 ? "0" : "") + number;
}

function getRandomInt(min, max) {
  // Math.random() 生成一个 0 到 1 之间的随机数
  // max - min + 1 是生成随机数的范围
  // Math.floor() 向下取整，确保生成的是整数
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function handleNowCheck(sub){
  if(!cLoading.value){
    cLoading.value = true
    cIndex.value = null;
    checkTime.value = new Date()
  }
  let index = checkList.value.length-sub
  currentProgress.value = Number(Number(index / checkList.value.length * 100).toFixed(2))
  if(index > checkList.value.length-1) {
    return cLoading.value = false
  }
  setTimeout(async ()=>{
    const res = await getCheckModel(checkList.value[index].modelId)
    console.log(res)
    listData.value[index].checkProess = 'done'
    let e = Math.ceil(Math.random()*100)
    totalError.value += e
    listData.value[index].checkResult = e
    cIndex.value = index
    handleNowCheck(sub-1)
  }, getRandomInt(500, 500))
}

</script>
<style scoped lang="scss">
@import "./css/style.scss";
</style>