feat: 设备状态展示完成

src/assets/svg/icons/treeNodeLineSelected.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
-  <path d="M1 1C1.63158 3.66667 4.91579 9 13 9" stroke="#154DDD" stroke-width="2.3"
+  <path d="M1 1C1.63158 3.66667 4.91579 9 13 9" stroke="#154DDD" stroke-width="2"
     stroke-linecap="round" />
 </svg>

src/components/CustomTree/src/collapseTreeStyle.scss

@@ -62,18 +62,10 @@
       display: inline-block;
 
       // margin-bottom: -10px;
-      width: 12px;
+      width: 16px;
-      height: 12px;
+      height: 16px;
-      margin-top: -2px;
+      margin-top: -1px;
-
-      // position: absolute;
-      // left: -2px;
       margin-left: -2px;
-
-      // border-radius: 50%;
-      // border-left: 1px solid red ;
-      // background-image: url("@/assets/svg/bgFooter.svg");
-
       background-image: url("@/assets/svg/icons/treeNodeLineSelected.svg");
       background-repeat: no-repeat;
 

src/layout/components/navbar.vue

@@ -3,7 +3,7 @@
 import Notice from "./notice/index.vue";
 import mixNav from "./sidebar/mixNav.vue";
 import { useNav } from "@/layout/hooks/useNav";
-// import Breadcrumb from "./sidebar/breadCrumb.vue";
+import Breadcrumb from "./sidebar/breadCrumb.vue";
 import topCollapse from "./sidebar/topCollapse.vue";
 import { useTranslationLang } from "../hooks/useTranslationLang";
 import globalization from "@/assets/svg/globalization.svg?component";
@@ -39,10 +39,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
       @toggleClick="toggleSideBar"
     />
 
-    <!-- <Breadcrumb
+    <Breadcrumb class="breadcrumb-container" />
-      v-if="layout !== 'mix' && device !== 'mobile'"
-      class="breadcrumb-container"
-    /> -->
 
     <mixNav v-if="layout === 'mix'" />
 

src/layout/components/sidebar/breadCrumb.vue

@@ -4,7 +4,7 @@ import { transformI18n } from "@/plugins/i18n";
 import { ref, watch, onMounted, toRaw } from "vue";
 import { getParentPaths, findRouteByPath } from "@/router/utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 
 const route = useRoute();
 const levelList = ref([]);
@@ -64,14 +64,14 @@ const getBreadcrumb = (): void => {
   );
 };
 
-const handleLink = (item: RouteLocationMatched): void => {
+// const handleLink = (item: RouteLocationMatched): void => {
-  const { redirect, path } = item;
+//   const { redirect, path } = item;
-  if (redirect) {
+//   if (redirect) {
-    router.push(redirect as any);
+//     router.push(redirect as any);
-  } else {
+//   } else {
-    router.push(path);
+//     router.push(path);
-  }
+//   }
-};
+// };
 
 onMounted(() => {
   getBreadcrumb();
@@ -96,9 +96,7 @@ watch(
         v-for="item in levelList"
         :key="item.path"
       >
-        <a @click.prevent="handleLink(item)">
+        {{ transformI18n(item.meta.title) }}
-          {{ transformI18n(item.meta.title) }}
-        </a>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>

src/views/serverModule/components/ServerCard.scss

@@ -0,0 +1,70 @@
+@import "@/style/index";
+
+.server-card {
+  box-sizing: border-box;
+  height: 182px;
+
+  // background-color: skyblue;
+  // border: 1.5px solid #52c41a
+  border-radius: 12px;
+  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 10%);
+
+  &_offline {
+    background-color: #f5f5f5;
+
+    // border: 1.5px solid #dcdcdc;
+  }
+
+  .server-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 54px;
+    padding: 16px;
+    border-bottom: 1px solid #e0e0e0;
+
+    .server-state {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 48px;
+      height: 24px;
+      font-size: 14px;
+      color: #fff;
+      text-align: center;
+      background-color: #52c41a;
+      border-radius: 0 12px;
+
+      &_offline {
+        background-color: #dcdcdc;
+      }
+    }
+  }
+
+  .server-content {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 128px;
+    padding: 16px;
+
+    .server-content-left {
+      width: 80px;
+    }
+
+    .server-content-right {
+      flex: 1;
+      padding-left: 12px;
+    }
+  }
+
+  .rectProgress_box {
+    padding: 4px 0;
+    font-size: 12px;
+    color: $--web-font1;
+  }
+}

src/views/serverModule/components/ServerCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, PropType } from "vue";
+import { computed, PropType, ref } from "vue";
 import { AnimationPic } from "@/components/AnimationCard";
 import serverIcon from "@/assets/animate/device/server.json";
 defineOptions({
@@ -28,6 +28,29 @@ const stateClass = computed(() => [
   "server-state",
   { "server-state_offline": props.device?.state === "离线" }
 ]);
+
+const progressData = ref([
+  {
+    label: "CPU",
+    percent: 0.79,
+    strokeColor: "rgb(243,48,5)"
+  },
+  {
+    label: "内存",
+    percent: 0.18,
+    strokeColor: "rgb(33,169,122)"
+  },
+  {
+    label: "存储",
+    percent: 0.79,
+    strokeColor: "rgb(33,169,122)"
+  },
+  {
+    label: "GPU",
+    percent: 0.18,
+    strokeColor: "rgb(250,173,20)"
+  }
+]);
 </script>
 
 <template>
@@ -40,69 +63,42 @@ const stateClass = computed(() => [
       <div class="server-content-left">
         <AnimationPic :value="serverIcon" />
       </div>
-      <div class="server-content-right">进度条</div>
+      <div class="server-content-right">
+        <ul class="w-full">
+          <li v-for="(v, k) in progressData" :key="k">
+            <div class="flex items-center rectProgress_box">
+              <span>
+                {{ v.label }}
+              </span>
+              <div class="flex flex-1">
+                <el-progress
+                  style="width: 100%; margin-left: 8px"
+                  :show-text="false"
+                  :stroke-width="10"
+                  :percentage="100 * v.percent"
+                  :color="v.strokeColor"
+                />
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.server-card {
+@import url("./ServerCard.scss");
-  box-sizing: border-box;
+</style>
-  height: 182px;
-  // background-color: skyblue;
-  // border: 1.5px solid #52c41a
-  border-radius: 12px;
-  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 10%);
-
-  &_offline {
-    background-color: #f5f5f5;
-    // border: 1.5px solid #dcdcdc;
-  }
-
-  .server-header {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    width: 100%;
-    height: 54px;
-    padding: 16px;
-    border-bottom: 1px solid #e0e0e0;
-
-    .server-state {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 48px;
-      height: 24px;
-      font-size: 14px;
-      color: #fff;
-      text-align: center;
-      background-color: #52c41a;
-      border-radius: 0 12px;
 
-      &_offline {
+<style lang="scss">
-        background-color: #dcdcdc;
+.rectProgress_box {
-      }
+  .el-progress-bar__outer {
-    }
+    border-radius: 2px;
   }
 
-  .server-content {
+  .el-progress-bar__inner {
-    box-sizing: border-box;
+    border-radius: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: 128px;
-    padding: 16px;
-
-    .server-content-left {
-      width: 80px;
-    }
-
-    .server-content-right {
-      flex: 1;
-    }
   }
 }
 </style>