feat: 算力分配3D图构建完成

index.html

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-01-12 14:35:28
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-18 15:41:26
+ * @LastEditTime: 2024-01-19 10:36:56
  * @FilePath: \General-AI-Platform-Web-Client\index.html
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -23,6 +23,7 @@
       rel="stylesheet"
       href="//at.alicdn.com/t/c/font_4412653_c3k3yiaknkn.css"
     />
+    <script src="https://threejs.org/build/three.js"></script>
     <script>
       window.process = {};
     </script>

mock/asyncRoutes.ts

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-01-12 14:35:28
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-17 11:09:58
+ * @LastEditTime: 2024-01-19 09:51:18
  * @FilePath: \general-work-web\General-AI-Platform-Web-Client\mock\asyncRoutes.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -21,6 +21,7 @@ const demoRouter = {
   path: "/demo/leftTree",
   name: "DemoLeftTree",
   meta: {
+    showLink: false,
     title: "测试",
     icon: "",
     roles: ["admin", "common"],

src/layout/index.vue

@@ -26,7 +26,9 @@ import setting from "./components/setting/index.vue";
 import Vertical from "./components/sidebar/vertical.vue";
 // import Horizontal from "./components/sidebar/horizontal.vue";
 import backTop from "@/assets/svg/back_top.svg?component";
+import { useRoute } from "vue-router";
 
+const route = useRoute();
 const appWrapperRef = ref();
 const { isDark } = useDark();
 const { layout } = useLayout();
@@ -52,7 +54,8 @@ const set: setType = reactive({
       hideSidebar: !set.sidebar.opened,
       openSidebar: set.sidebar.opened,
       withoutAnimation: set.sidebar.withoutAnimation,
-      mobile: set.device === "mobile"
+      mobile: set.device === "mobile",
+      ...route.meta?.bodyClass
     };
   }),
 

src/router/modules/demo.ts

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-01-17 15:26:20
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-17 16:56:11
+ * @LastEditTime: 2024-01-19 09:52:30
  * @FilePath: \General-AI-Platform-Web-Client\src\router\modules\demo.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -26,6 +26,14 @@ export default {
       meta: {
         title: "基础表格"
       }
+    },
+    {
+      path: "/demo/cube",
+      name: "DemoCube",
+      component: () => import("@/views/demo/cube.vue"),
+      meta: {
+        title: "立体效果"
+      }
     }
   ]
 } as RouteConfigsTable;

src/views/demo/cube.vue

@@ -0,0 +1,130 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-19 09:38:33
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-01-19 13:11:17
+ * @FilePath: \General-AI-Platform-Web-Client\src\views\demo\cube.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+
+<script setup lang="ts">
+import { ref } from "vue";
+defineOptions({
+  name: "DemoCube"
+});
+const listData = ref([
+  {
+    label: "剩余算力",
+    value: 214,
+    color: "#DCDCDC"
+  },
+  {
+    label: "离岗监控",
+    value: 207,
+    color: "#FAA90B"
+  },
+  {
+    label: "玩手机监控",
+    value: 120,
+    color: "#014BE6"
+  }
+]);
+
+const fetchPathValByHeight = val => {
+  return val - 12;
+};
+</script>
+<template>
+  <div class="cube_wrap">
+    <ul class="cube_info">
+      <li v-for="(v, k) in listData" :key="k">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="42"
+          :height="v.value"
+          :viewBox="`0 0 42 ${v.value}`"
+          fill="none"
+        >
+          <path
+            :d="`M20.7846 90L41.5692 ${fetchPathValByHeight(v.value)}L20.7846 ${
+              v.value
+            }L0 ${fetchPathValByHeight(v.value)}L20.7846 90Z`"
+            fill="#D9D9D9"
+          />
+          <path
+            :d="`M41.5693 72L20.7847 60V90L41.5693 ${fetchPathValByHeight(
+              v.value
+            )}V72Z`"
+            fill="#D9D9D9"
+          />
+          <path
+            :d="`M20.7846 60L0 72V${fetchPathValByHeight(
+              v.value
+            )}L20.7846 90V60Z`"
+            fill="#D9D9D9"
+          />
+          <path
+            :d="`M20.7847 24L41.5693 12V${fetchPathValByHeight(
+              v.value
+            )}L20.7847 ${v.value}V24Z`"
+            :fill="v.color"
+          />
+          <path
+            :d="`M0 12L20.7846 24V${v.value}L0 ${fetchPathValByHeight(
+              v.value
+            )}V12Z`"
+            :fill="v.color"
+          />
+          <rect
+            width="24"
+            height="24"
+            transform="matrix(0.866025 0.5 -0.866025 0.5 20.7847 0)"
+            :fill="v.color"
+          />
+        </svg>
+      </li>
+    </ul>
+    <ul class="cube_btn">
+      <li>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="15"
+          height="18"
+          viewBox="0 0 15 18"
+          fill="none"
+        >
+          <path
+            d="M-4.37114e-07 9L15 0.339744L15 17.6603L-4.37114e-07 9Z"
+            fill="#FAA90B"
+          />
+        </svg>
+      </li>
+    </ul>
+
+    <div />
+  </div>
+</template>
+
+<style lang="scss">
+.cube_wrap {
+  position: relative;
+  .cube_info {
+    & > li {
+      margin-top: -24px;
+      &:nth-child(1) {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .cube_btn {
+    & > li {
+      width: 20px;
+      height: 20px;
+      position: absolute;
+      left: 41px;
+      top: 193px;
+    }
+  }
+}
+</style>