|
|
|
|
@ -2,142 +2,95 @@
|
|
|
|
|
* @Author: donghao donghao@supervision.ltd
|
|
|
|
|
* @Date: 2024-01-19 09:22:30
|
|
|
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
|
|
|
* @LastEditTime: 2024-03-04 14:27:02
|
|
|
|
|
* @LastEditTime: 2024-03-08 15:26:06
|
|
|
|
|
* @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 { onMounted, ref } from "vue";
|
|
|
|
|
import ComputePowerCube from "./components/computePowerCube.vue";
|
|
|
|
|
import ComputePowerType from "./components/computePowerType.vue";
|
|
|
|
|
import { ComputePowerPoolItem } from "./typing";
|
|
|
|
|
import { getPowerPoolsList, getPowerGroupList } from "@/api/list";
|
|
|
|
|
|
|
|
|
|
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 groupList = ref<Record<string, any>[]>([]); //获取dom;
|
|
|
|
|
|
|
|
|
|
const poolsData = ref<ComputePowerPoolItem[]>([]);
|
|
|
|
|
|
|
|
|
|
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%)"
|
|
|
|
|
},
|
|
|
|
|
async function fetchPowerData() {
|
|
|
|
|
const res = await getPowerPoolsList();
|
|
|
|
|
console.log("fetchPowerData_res", res);
|
|
|
|
|
poolsData.value = res.data;
|
|
|
|
|
}
|
|
|
|
|
async function fetchGroupData() {
|
|
|
|
|
const res = await getPowerGroupList();
|
|
|
|
|
console.log("fetchGroupData_res", res);
|
|
|
|
|
groupList.value = res.data.splice(0, 4);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
name: "空闲算力",
|
|
|
|
|
type: 0,
|
|
|
|
|
proportion: 20,
|
|
|
|
|
pretreatmentEfficiency: 0,
|
|
|
|
|
color: "#DCDCDC",
|
|
|
|
|
bgColor: "linear-gradient(90deg, #7B7979 0%, #C1C1C1 100%)"
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
fetchGroupData();
|
|
|
|
|
fetchPowerData();
|
|
|
|
|
});
|
|
|
|
|
</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">
|
|
|
|
|
<div class="main_booy_container computePowerAllocation_wrap">
|
|
|
|
|
<ul class="computePowerAllocation_body">
|
|
|
|
|
<li>
|
|
|
|
|
<h3>算力配置</h3>
|
|
|
|
|
<div class="flex items-center head_info mt-[16px]">
|
|
|
|
|
<div class="bg_header_logo"></div>
|
|
|
|
|
<div class="head_info_item ml-[12px]">
|
|
|
|
|
<h6 class="font-bold pf-1">苏胜天算力资源池</h6>
|
|
|
|
|
<p class="pf-2">算力资源999Tops</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="mt-[16px]">
|
|
|
|
|
<h3>硬件组成</h3>
|
|
|
|
|
<ul class="flex justify-between banner_group">
|
|
|
|
|
<li
|
|
|
|
|
v-for="(v, k) in groupList"
|
|
|
|
|
:key="k"
|
|
|
|
|
class="flex items-center mb-[16px]"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex items-center px-[16px]">
|
|
|
|
|
<div
|
|
|
|
|
class="cp_bg_logo_icon"
|
|
|
|
|
:class="`cp_bg_logo_icon_${v.type}`"
|
|
|
|
|
/>
|
|
|
|
|
<span class="pl-[12px] pf-2 two-line w-[230px]">{{
|
|
|
|
|
v.label
|
|
|
|
|
}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="bg_banner_group_logo"
|
|
|
|
|
:class="`bg_banner_group_logo_${v.type}`"
|
|
|
|
|
/>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="mt-[16px]">
|
|
|
|
|
<h3>算力配置</h3>
|
|
|
|
|
<div class="mt-[16px]">
|
|
|
|
|
<ComputePowerCube :list="poolsData" />
|
|
|
|
|
<ul class="flex flex-wrap items-center computePower_footer mt-[16px]">
|
|
|
|
|
<li
|
|
|
|
|
v-for="(v, k) in groupList"
|
|
|
|
|
v-for="(v, k) in poolsData"
|
|
|
|
|
:key="k"
|
|
|
|
|
class="flex items-center bg-white p-[16px] mt-[16px]"
|
|
|
|
|
class="flex items-center justify-center mr-[16px] mb-[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>
|
|
|
|
|
<ComputePowerType :info="v" />
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bg_banner_center"></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>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
