feat: 一键巡检开发

src/api/hl/bm.js

@@ -66,3 +66,12 @@ export function getCheckList(){
         method: 'get'
     })
 }
+
+// 一健巡检--按模型ID巡检
+export function getCheckModel(modelId){
+    return request({
+        url: '/hl/bm/check/'+modelId,
+        method: 'get'
+    })
+}
+

src/views/hl/check/css/style.scss

@@ -23,7 +23,7 @@
     }
 
     .site-progress {
-      background-image: linear-gradient(to right, #43e97b99 0%, #38f9d799 100%);
+      background-image: linear-gradient(to right, #3d5afe 0%, #2196f3 100%);
       width: 0;
       height: 100%;
       border-radius: 6px;
@@ -34,7 +34,7 @@
       position: relative;
       z-index: 1;
       width: 100%;
-      margin-top: -9px;
+      margin-top: -10px;
       @include flexBetween();
       @include borderBox();
       padding: 0 10px;
@@ -48,8 +48,8 @@
     }
 
     .site {
-      width: 12px;
-      height: 6px;
+      width: 9px;
+      height: 9px;
       border-radius: 4px;
       transition: all .3s;
     }
@@ -73,12 +73,58 @@
       text-shadow: 0 0 2px white;
     }
 
-    .site-row .site-name {
+
+
+    .site-name {
       font-size: 14px;
       width: 100%;
       text-align: center;
       margin-top: 6px;
       color:#2c3e50;
     }
+
+    .active-site-name{
+      color: #1565c0;
+      font-weight: bold;
+    }
+    .check-status{
+      @include flexBetween()
+    }
+
+    .check-btn {
+      padding: 10px 20px;
+    }
+
+    .progress-bar {
+      background: #e9e9e9;
+      border-radius: 2px;
+      height: 4px;
+      width: 100%;
+      overflow: hidden;
+      margin-top: 15px;
+    }
+    .percentage-value {
+      margin-top: 10px;
+      font-size: 12px;
+    }
+    .percentage-label {
+      margin-top: 10px;
+      font-size: 12px;
+    }
+    .check-progress{
+      @include flexStart();
+      .t-span{
+        margin-right:5px;
+        font-weight: bold;
+        color:#444;
+      }
+    }
+    .progress-bar-inner {
+      background-image: linear-gradient(to right, #3d5afe 0%, #2196f3 100%);
+      opacity: 0.7;
+      width: 0;
+      height: 4px;
+      transition: all .2s;
+    }
   }
 }

src/views/hl/check/index.vue

@@ -2,32 +2,111 @@
   <div class="check-body">
     <div class="site-content">
       <div class="site-row">
-        <div class="site-progress" style="width: 60%"></div>
+        <div class="site-progress" :style="`width: ${currentProgress}%`"></div>
         <div class="site-label">
-          <div class="site-node" v-for="item in checkList" :key="item.modelId">
-            <div class="site un-info" />
-            <div class="site-name">{{item.modelName}}</div>
+          <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>
+      </div>
+      <div class="progress-bar">
+        <div class="progress-bar-inner" :style="`width: ${currentProgress}%`"/>
+      </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>
 
     </div>
 
   </div>
 </template>
 <script setup lang="ts">
-import {getCheckList} from "@/api/hl/bm"
+import {getCheckList,getCheckModel} from "@/api/hl/bm"
 import {onMounted} from "vue";
 const checkList = ref([])
+const cLoading = ref(false)
+const currentProgress = ref(0)
+const cIndex=ref(null)
+const listData = ref([])
+
+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;
+  }
+  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)
+    cIndex.value = index
+    handleNowCheck(sub-1)
+  }, getRandomInt(500, 500))
+}
+
 </script>
 <style scoped lang="scss">
 @import "./css/style.scss";