一键巡检开发

src/api/hl/bm.js

@@ -59,3 +59,10 @@ export function addBmModel(modelId,query) {
     })
 }
 
+// 一健巡检--模型列表
+export function getCheckList(){
+    return request({
+        url: '/hl/bm/check/list',
+        method: 'get'
+    })
+}

src/assets/styles/sidebar.scss

@@ -111,6 +111,11 @@
     }
   }
 
+  //.el-menu-item.is-active{
+  //  color: #c8e6c9;
+  //  background: $base-sub-menu-hover;
+  //}
+
   .hideSidebar {
     .sidebar-container {
       width: 54px !important;

src/assets/styles/variables.module.scss

@@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$--color-primary: #409EFF;
+$--color-primary: #00897b;//#409EFF;
 $--color-success: #67C23A;
 $--color-warning: #E6A23C;
 $--color-danger: #F56C6C;

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

@@ -0,0 +1,84 @@
+@import "@/assets/styles/common.scss";
+.check-body {
+  margin: 0;
+  //background-image: linear-gradient(to right bottom,#26a69a,#009688);
+  height:calc(100vh - 84px);
+  overflow: auto;
+  @include borderBox();
+  padding:10px;
+  .site-content {
+    border: 1px solid #DDDDDD80;
+    padding: 20px;
+    background-image: linear-gradient(to right bottom, #F1F1F140, #EEEEEE40);
+    border-radius: 6px;
+
+    .site-row {
+      //background-image: linear-gradient(to right, #004d40 0%, #00695c 1%, #00796b 100%);
+      background: #2c3e5066;
+      box-shadow: 0 0 1px #009688;
+      border-radius: 6px;
+      height: 12px;
+      width: 100%;
+      margin-bottom: 14px;
+    }
+
+    .site-progress {
+      background-image: linear-gradient(to right, #43e97b99 0%, #38f9d799 100%);
+      width: 0;
+      height: 100%;
+      border-radius: 6px;
+      transition: all .5s;
+    }
+
+    .site-label {
+      position: relative;
+      z-index: 1;
+      width: 100%;
+      margin-top: -9px;
+      @include flexBetween();
+      @include borderBox();
+      padding: 0 10px;
+    }
+
+    .site-row .site-node {
+      @include flexCenter();
+      flex-wrap: wrap;
+      cursor: pointer;
+      width: 14.2%;
+    }
+
+    .site {
+      width: 12px;
+      height: 6px;
+      border-radius: 4px;
+      transition: all .3s;
+    }
+
+    .normal {
+      background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
+    }
+
+    .abnormal {
+      background: #e43;
+    }
+
+    .un-info {
+      background-image: linear-gradient(120deg, #F1F1F1 0%, #ebedee 100%);
+    }
+    .site-row .site-node:hover .site {
+      transform: scale(1.3);
+    }
+
+    .site-row .site-node:hover .site-name {
+      text-shadow: 0 0 2px white;
+    }
+
+    .site-row .site-name {
+      font-size: 14px;
+      width: 100%;
+      text-align: center;
+      margin-top: 6px;
+      color:#2c3e50;
+    }
+  }
+}

src/views/hl/check/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="check-body">
+    <div class="site-content">
+      <div class="site-row">
+        <div class="site-progress" style="width: 60%"></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>
+        </div>
+      </div>
+    </div>
+
+    <div class="site-content mt10">
+
+    </div>
+
+  </div>
+</template>
+<script setup lang="ts">
+import {getCheckList} from "@/api/hl/bm"
+import {onMounted} from "vue";
+const checkList = ref([])
+
+onMounted(async ()=>{
+  const res = await getCheckList();
+  checkList.value = res.data
+})
+
+</script>
+<style scoped lang="scss">
+@import "./css/style.scss";
+</style>