feat: 初始化数据大屏模块
parent
feb64ea1de
commit
130131aea4
@ -1,3 +1,4 @@
|
||||
shamefully-hoist=true
|
||||
strict-peer-dependencies=false
|
||||
shell-emulator=true
|
||||
shell-emulator=true
|
||||
registry=https://registry.npmmirror.com/
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"type": "module"
|
||||
}
|
||||
@ -0,0 +1,101 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-01-12 14:35:28
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-02-22 14:16:05
|
||||
* @FilePath: \General-AI-Platform-Web-Client\index.html
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
|
||||
/>
|
||||
<title>pure-admin-thin</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<!-- update 2024-01-21 16:41 -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="//at.alicdn.com/t/c/font_4412653_g3j0o4m1zi.css"
|
||||
/>
|
||||
<script src="https://threejs.org/build/three.js"></script>
|
||||
<script>
|
||||
window.process = {};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loader,
|
||||
.loader::before,
|
||||
.loader::after {
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
border-radius: 50%;
|
||||
animation: load-animation 1.8s infinite ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin: 80px auto;
|
||||
font-size: 10px;
|
||||
color: #406eeb;
|
||||
text-indent: -9999em;
|
||||
transform: translateZ(0);
|
||||
transform: translate(-50%, 0);
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
.loader::before,
|
||||
.loader::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.loader::before {
|
||||
left: -3.5em;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.loader::after {
|
||||
left: 3.5em;
|
||||
}
|
||||
|
||||
@keyframes load-animation {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 2.5em 0 -1.3em;
|
||||
}
|
||||
|
||||
40% {
|
||||
box-shadow: 0 2.5em 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
<script type="module" src="/src/pages/dataScreen/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,51 @@
|
||||
<svg width="433" height="292" viewBox="0 0 433 292" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_iii_8677_100860)">
|
||||
<path d="M2 274.13V3H416.766L432 21.6778V274.13L418.24 291H15.76L2 274.13Z" fill="#00183E"
|
||||
fill-opacity="0.9" />
|
||||
</g>
|
||||
<path d="M2 274.13V3H416.766L432 21.6778V274.13L418.24 291H15.76L2 274.13Z" stroke="#20A0FD"
|
||||
stroke-opacity="0.4" stroke-width="1.5" />
|
||||
<path d="M413 12.88L415.88 10L425 19.12L422.12 22L413 12.88Z" fill="white" />
|
||||
<path d="M378 3H416.86L432 20.6882V50" stroke="#2ABAF0" stroke-width="2" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M405.528 48H421.554L418.027 51H402L405.528 48Z"
|
||||
fill="url(#paint0_linear_8677_100860)" />
|
||||
<path d="M2 37V2H74" stroke="#2CCAFF" stroke-width="3" />
|
||||
<defs>
|
||||
<filter id="filter0_iii_8677_100860" x="1.25" y="-1.75" width="431.5" height="297.5"
|
||||
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="-4" />
|
||||
<feGaussianBlur stdDeviation="4" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix"
|
||||
values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0" />
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_8677_100860" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="-4" />
|
||||
<feGaussianBlur stdDeviation="4" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix"
|
||||
values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0" />
|
||||
<feBlend mode="normal" in2="effect1_innerShadow_8677_100860"
|
||||
result="effect2_innerShadow_8677_100860" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="4" />
|
||||
<feGaussianBlur stdDeviation="4" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix type="matrix"
|
||||
values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0" />
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_8677_100860"
|
||||
result="effect3_innerShadow_8677_100860" />
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_8677_100860" x1="411.777" y1="48" x2="411.777" y2="51"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FEF643" />
|
||||
<stop offset="1" stop-color="#FFA217" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@ -0,0 +1,158 @@
|
||||
<script setup lang="ts">
|
||||
import "animate.css";
|
||||
// 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
|
||||
import "@/components/ReIcon/src/offlineIcon";
|
||||
import { setType } from "./types";
|
||||
import { useResizeObserver } from "@vueuse/core";
|
||||
import { useAppStoreHook } from "@/store/modules/app";
|
||||
import { useSettingStoreHook } from "@/store/modules/settings";
|
||||
import { deviceDetection, useGlobal } from "@pureadmin/utils";
|
||||
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
||||
import { ref, reactive, computed, onMounted, onBeforeMount } from "vue";
|
||||
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const route = useRoute();
|
||||
const appWrapperRef = ref();
|
||||
const isMobile = deviceDetection();
|
||||
const pureSetting = useSettingStoreHook();
|
||||
const { $storage } = useGlobal<GlobalPropertiesApi>();
|
||||
|
||||
const set: setType = reactive({
|
||||
sidebar: computed(() => {
|
||||
return useAppStoreHook().sidebar;
|
||||
}),
|
||||
|
||||
device: computed(() => {
|
||||
return useAppStoreHook().device;
|
||||
}),
|
||||
|
||||
fixedHeader: computed(() => {
|
||||
return pureSetting.fixedHeader;
|
||||
}),
|
||||
|
||||
classes: computed(() => {
|
||||
return {
|
||||
hideSidebar: !set.sidebar.opened,
|
||||
openSidebar: set.sidebar.opened,
|
||||
withoutAnimation: set.sidebar.withoutAnimation,
|
||||
mobile: set.device === "mobile"
|
||||
};
|
||||
}),
|
||||
|
||||
hideTabs: computed(() => {
|
||||
return $storage?.configure.hideTabs;
|
||||
})
|
||||
});
|
||||
|
||||
function setTheme(layoutModel: string) {
|
||||
window.document.body.setAttribute("layout", layoutModel);
|
||||
$storage.layout = {
|
||||
layout: `${layoutModel}`,
|
||||
theme: $storage.layout?.theme,
|
||||
darkMode: $storage.layout?.darkMode,
|
||||
sidebarStatus: $storage.layout?.sidebarStatus,
|
||||
epThemeColor: $storage.layout?.epThemeColor
|
||||
};
|
||||
}
|
||||
|
||||
function toggle(device: string, bool: boolean) {
|
||||
useAppStoreHook().toggleDevice(device);
|
||||
useAppStoreHook().toggleSideBar(bool, "resize");
|
||||
}
|
||||
|
||||
// 判断是否可自动关闭菜单栏
|
||||
let isAutoCloseSidebar = true;
|
||||
|
||||
useResizeObserver(appWrapperRef, entries => {
|
||||
if (isMobile) return;
|
||||
const entry = entries[0];
|
||||
const { width } = entry.contentRect;
|
||||
width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
|
||||
/** width app-wrapper类容器宽度
|
||||
* 0 < width <= 760 隐藏侧边栏
|
||||
* 760 < width <= 990 折叠侧边栏
|
||||
* width > 990 展开侧边栏
|
||||
*/
|
||||
if (width > 0 && width <= 760) {
|
||||
toggle("mobile", false);
|
||||
isAutoCloseSidebar = true;
|
||||
} else if (width > 760 && width <= 990) {
|
||||
if (isAutoCloseSidebar) {
|
||||
toggle("desktop", false);
|
||||
isAutoCloseSidebar = false;
|
||||
}
|
||||
} else if (width > 990 && !set.sidebar.isClickCollapse) {
|
||||
toggle("desktop", true);
|
||||
isAutoCloseSidebar = true;
|
||||
} else {
|
||||
toggle("desktop", false);
|
||||
isAutoCloseSidebar = false;
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (isMobile) {
|
||||
toggle("mobile", false);
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
useDataThemeChange().dataThemeChange();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="appWrapperRef" :class="[set.classes, route?.meta?.bodyClass]">
|
||||
<dv-full-screen-container>
|
||||
<div class="w-full ds_app_box">
|
||||
<header>顶部</header>
|
||||
<!-- 主体内容 -->
|
||||
<router-view />
|
||||
<footer>底部</footer>
|
||||
</div></dv-full-screen-container
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.app-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
|
||||
&::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&.mobile.openSidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.app-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.re-screen {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
// .computePowerAllocation_page {
|
||||
// background: url("@/assets/computePower/bg.png");
|
||||
// background-repeat: no-repeat;
|
||||
// .navbar {
|
||||
// background-color: transparent !important;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
@ -0,0 +1,34 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-02-22 14:04:50
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-02-22 14:21:13
|
||||
* @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\App.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<template>
|
||||
<el-config-provider :locale="currentLocale">
|
||||
<router-view />
|
||||
<ReDialog />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { ElConfigProvider } from "element-plus";
|
||||
import zhCn from "element-plus/lib/locale/lang/zh-cn";
|
||||
import en from "element-plus/lib/locale/lang/en";
|
||||
import { ReDialog } from "@/components/ReDialog";
|
||||
export default defineComponent({
|
||||
name: "app",
|
||||
components: {
|
||||
[ElConfigProvider.name]: ElConfigProvider,
|
||||
ReDialog
|
||||
},
|
||||
computed: {
|
||||
currentLocale() {
|
||||
return this.$storage.locale?.locale === "zh" ? zhCn : en;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,15 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
|
||||
export default {
|
||||
path: "/computePowerAllocation",
|
||||
meta: {
|
||||
title: $t("menus.hsComputePowerAllocation"),
|
||||
icon: "icon-suanlipeizhi",
|
||||
// showLink: false,
|
||||
bodyClass: "computePowerAllocation_page",
|
||||
rank: 6,
|
||||
roles: ["admin", "common"]
|
||||
},
|
||||
component: () => import("@/views/computePowerAllocation/index.vue"),
|
||||
name: "computePowerAllocationIndex"
|
||||
} as RouteConfigsTable;
|
||||
@ -0,0 +1,31 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
const Layout = () => import("@/layout/index.vue");
|
||||
|
||||
export default [
|
||||
{
|
||||
path: "/login",
|
||||
name: "Login",
|
||||
component: () => import("@/views/login/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hslogin"),
|
||||
showLink: false,
|
||||
rank: 101
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/redirect",
|
||||
component: Layout,
|
||||
meta: {
|
||||
title: $t("status.hsLoad"),
|
||||
showLink: false,
|
||||
rank: 102
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/redirect/:path(.*)",
|
||||
name: "Redirect",
|
||||
component: () => import("@/layout/redirect.vue")
|
||||
}
|
||||
]
|
||||
}
|
||||
] as Array<RouteConfigsTable>;
|
||||
@ -0,0 +1,35 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-01-12 14:35:28
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-02-22 14:28:13
|
||||
* @FilePath: \General-AI-Platform-Web-Client\src\router\modules\workbench.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import { $t } from "@/plugins/i18n";
|
||||
|
||||
const Layout = () => import("@/layout/dataScreenIndex.vue");
|
||||
|
||||
export default {
|
||||
path: "/",
|
||||
name: "Workbench",
|
||||
component: Layout,
|
||||
redirect: "/workbench",
|
||||
meta: {
|
||||
title: $t("menus.hshome"),
|
||||
icon: "icon-gongzuotai-weixuan",
|
||||
// showLink: false,
|
||||
rank: 1
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/workbench",
|
||||
name: "Workbench",
|
||||
component: () => import("@/pages/dataScreen/views/home/homeIndex.vue"),
|
||||
meta: {
|
||||
title: "工作台",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
}
|
||||
]
|
||||
} as RouteConfigsTable;
|
||||
@ -0,0 +1,81 @@
|
||||
.computePowerAllocation_wrap {
|
||||
height: 100%;
|
||||
|
||||
// padding-top: calc(50vh - 330px - 48px);
|
||||
.computePowerAllocation_body {
|
||||
border-radius: 12px;
|
||||
background: rgba(21, 77, 221, 0.05);
|
||||
width: 1080px;
|
||||
height: 660px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.computePower_header {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 46px;
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
line-height: 46px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(180deg, #014be6 0%, #014be6 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.computePower_banner {
|
||||
padding: 32px 32px 0;
|
||||
|
||||
.banner_left {
|
||||
.banner_group {
|
||||
& > li {
|
||||
width: 266px;
|
||||
height: 88px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.bg_banner_group_logo {
|
||||
width: 266px;
|
||||
height: 166.25px;
|
||||
top: -38px;
|
||||
position: absolute;
|
||||
left: 52px;
|
||||
background: url("@/assets/computePower/computerTypeLogo.png")
|
||||
no-repeat 0 0;
|
||||
background-size: cover;
|
||||
opacity: 0.05;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg_banner_center {
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
background: url("@/assets/computePower/banner.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.banner_right {
|
||||
.computePowerCube_wrap {
|
||||
padding: 16px;
|
||||
width: 266px;
|
||||
height: 400px;
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.computePower_footer {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,146 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-01-19 09:22:30
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-02-22 14:26:57
|
||||
* @FilePath: \General-AI-Platform-Web-Client\src\views\computePowerAllocation\index.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue"; //引入相关api/引入下载的动效json
|
||||
import ComputePowerCube from "./components/computePowerCube.vue";
|
||||
import ComputePowerType from "./components/computePowerType.vue";
|
||||
import { ComputePowerPoolItem } from "./typing";
|
||||
defineOptions({
|
||||
name: "ComputePowerAllocation"
|
||||
});
|
||||
|
||||
const groupList = ref<Record<string, any>[]>([
|
||||
{
|
||||
label: "NVIDIA GeForce 4090"
|
||||
},
|
||||
{
|
||||
label: "NVIDIA GeForce 4090"
|
||||
},
|
||||
{
|
||||
label: "NVIDIA GeForce 4090"
|
||||
},
|
||||
{
|
||||
label: "NVIDIA GeForce 4090"
|
||||
}
|
||||
]); //获取dom;
|
||||
|
||||
const poolsData: ComputePowerPoolItem[] = [
|
||||
{
|
||||
name: "离岗监控",
|
||||
type: 1,
|
||||
proportion: 34,
|
||||
pretreatmentEfficiency: 20,
|
||||
color: "#3879FE",
|
||||
bgColor: "linear-gradient(180deg, #015DE6 0%, #4881F6 100%)"
|
||||
},
|
||||
{
|
||||
name: "玩手机监控",
|
||||
type: 2,
|
||||
proportion: 46,
|
||||
pretreatmentEfficiency: 15,
|
||||
color: "#FAA90B",
|
||||
bgColor: "linear-gradient(180deg, #FA8316 0%, #FAAD16 100%)"
|
||||
},
|
||||
|
||||
{
|
||||
name: "空闲算力",
|
||||
type: 0,
|
||||
proportion: 20,
|
||||
pretreatmentEfficiency: 0,
|
||||
color: "#DCDCDC",
|
||||
bgColor: "linear-gradient(90deg, #7B7979 0%, #C1C1C1 100%)"
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center justify-center main_booy_container computePowerAllocation_wrap"
|
||||
>
|
||||
<div class="computePowerAllocation_body">
|
||||
<div class="flex justify-center computePower_header">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="667"
|
||||
height="50"
|
||||
viewBox="0 0 667 50"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M4 1.25H2.39949L3.42366 2.47992L21.2082 23.8375C25.9105 29.4845 32.879 32.75 40.2275 32.75H169.682C173.92 32.75 178.078 33.9086 181.706 36.1005L192.922 42.8776C199.28 46.7193 206.567 48.75 213.996 48.75H316.342C317.146 48.75 317.909 48.3989 318.431 47.7889L320.231 45.6869L319.662 45.199L320.231 45.6869C320.469 45.4096 320.816 45.25 321.181 45.25H346.911C347.242 45.25 347.56 45.3818 347.795 45.6165L350.121 47.9438C350.636 48.46 351.336 48.75 352.066 48.75H443.362C450.566 48.75 457.641 46.8403 463.867 43.2154L476.417 35.9077C479.969 33.8396 484.006 32.75 488.116 32.75H630.515C638.594 32.75 646.165 28.8065 650.796 22.186L664.615 2.42988L665.44 1.25H664H4Z"
|
||||
fill="url(#paint0_linear_7277_81243)"
|
||||
stroke="white"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_7277_81243"
|
||||
x1="334"
|
||||
y1="10"
|
||||
x2="334"
|
||||
y2="48"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#154DDD" stop-opacity="0.15" />
|
||||
<stop offset="1" stop-color="#154DDD" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<span>苏胜天算力资源池</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between computePower_banner">
|
||||
<div class="banner_left">
|
||||
<p class="hf-1">硬件组成</p>
|
||||
<ul class="banner_group">
|
||||
<li
|
||||
v-for="(v, k) in groupList"
|
||||
:key="k"
|
||||
class="flex items-center bg-white p-[16px] mt-[16px]"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8.948 8.7975V7.3675C9.08911 7.35702 9.23051 7.35102 9.372 7.3495C13.294 7.2255 15.865 10.7235 15.865 10.7235C15.865 10.7235 13.091 14.5745 10.115 14.5745C9.72158 14.5753 9.33059 14.5128 8.957 14.3895V10.0435C10.485 10.2285 10.794 10.9005 11.704 12.4285L13.744 10.7145C13.744 10.7145 12.252 8.7625 9.744 8.7625C9.47818 8.75656 9.21227 8.76826 8.948 8.7975ZM8.948 4.0625V6.2005L9.372 6.1735C14.822 5.9885 18.382 10.6435 18.382 10.6435C18.382 10.6435 14.302 15.6075 10.052 15.6075C9.68491 15.6063 9.31858 15.5739 8.957 15.5105V16.8355C9.257 16.8705 9.567 16.8975 9.867 16.8975C13.824 16.8975 16.687 14.8745 19.46 12.4895C19.919 12.8605 21.8 13.7525 22.19 14.1415C19.557 16.3495 13.418 18.1255 9.937 18.1255C9.602 18.1255 9.284 18.1075 8.966 18.0725V19.9365H24V4.0625H8.948ZM8.948 14.3885V15.5195C5.291 14.8655 4.275 11.0595 4.275 11.0595C4.275 11.0595 6.033 9.1155 8.948 8.7975V10.0345H8.94C7.412 9.8485 6.21 11.2795 6.21 11.2795C6.21 11.2795 6.89 13.6915 8.949 14.3895M2.456 10.8995C2.456 10.8995 4.62 7.7025 8.956 7.3665V6.2005C4.153 6.5895 0 10.6525 0 10.6525C0 10.6525 2.35 17.4545 8.948 18.0725V16.8355C4.108 16.2355 2.456 10.8995 2.456 10.8995Z"
|
||||
fill="#76B900"
|
||||
/>
|
||||
</svg>
|
||||
<p class="pf-2 pl-[12px]">{{ v.label }}</p>
|
||||
<div class="bg_banner_group_logo"> </div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg_banner_center">{{ null }}</div>
|
||||
<div class="banner_right">
|
||||
<p class="hf-1 pb-[16px]">算力配置</p>
|
||||
<ComputePowerCube :list="poolsData" />
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="flex items-center justify-center computePower_footer mt-[70px]"
|
||||
>
|
||||
<li
|
||||
v-for="(v, k) in poolsData"
|
||||
:key="k"
|
||||
class="flex items-center justify-center mx-[20px]"
|
||||
>
|
||||
<ComputePowerType :info="v" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./computePowerAllocation.scss";
|
||||
</style>
|
||||
@ -0,0 +1,16 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-01-22 13:30:43
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-01-22 13:30:53
|
||||
* @FilePath: \General-AI-Platform-Web-Client\src\views\computePowerAllocation\typing.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
|
||||
export type ComputePowerPoolItem = {
|
||||
name: string;
|
||||
type: number; // 类别
|
||||
color?: string; //
|
||||
proportion: number;
|
||||
pretreatmentEfficiency?: number;
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
.left_box_1 {
|
||||
width: 430px;
|
||||
height: 288px;
|
||||
background: url("@/assets/svg/screenBgCommon.svg") no-repeat;
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-02-22 14:27:21
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-02-22 15:43:48
|
||||
* @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\views\home\homeIndex.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<template>
|
||||
<div class="flex justify-between w-full ds_home_wrap">
|
||||
<div class="left">
|
||||
<div class="left_box_1">123</div>
|
||||
<div class="left_box_1">123</div>
|
||||
<div class="left_box_1">123</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="left_box_1">123</div>
|
||||
<div class="left_box_1">123</div>
|
||||
<div class="left_box_1">123</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "./homeIndex.scss";
|
||||
</style>
|
||||
Loading…
Reference in New Issue