|
|
|
@ -2,7 +2,7 @@
|
|
|
|
|
* @Author: donghao donghao@supervision.ltd
|
|
|
|
|
* @Date: 2024-01-19 09:22:30
|
|
|
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
|
|
|
* @LastEditTime: 2024-02-23 15:59:38
|
|
|
|
|
* @LastEditTime: 2024-02-26 17:12:10
|
|
|
|
|
* @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
|
|
|
|
|
-->
|
|
|
|
@ -13,6 +13,7 @@ import ComputePowerType from "./components/computePowerType.vue";
|
|
|
|
|
import { ComputePowerPoolItem } from "./typing";
|
|
|
|
|
import { AnimationPic } from "@/components/AnimationCard";
|
|
|
|
|
import computePowerAllocationIcon from "@/assets/animate/device/computePowerAllocation.json";
|
|
|
|
|
import { DsBox1 } from "@/components/DsBox";
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
|
name: "ComputePowerAllocation"
|
|
|
|
@ -20,41 +21,64 @@ defineOptions({
|
|
|
|
|
|
|
|
|
|
const groupList = ref<Record<string, any>[]>([
|
|
|
|
|
{
|
|
|
|
|
label: "NVIDIA GeForce 4090"
|
|
|
|
|
label: "NVIDIA GeForce 4090",
|
|
|
|
|
type: 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "NVIDIA GeForce 4090"
|
|
|
|
|
label: "瑞芯微 RK3566",
|
|
|
|
|
type: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "NVIDIA GeForce 4090"
|
|
|
|
|
label: "瑞芯微 RK3566",
|
|
|
|
|
type: 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "NVIDIA GeForce 4090"
|
|
|
|
|
label: "NVIDIA GeForce 4090",
|
|
|
|
|
type: 1
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "NVIDIA GeForce 4090",
|
|
|
|
|
type: 1
|
|
|
|
|
}
|
|
|
|
|
]); //获取dom;
|
|
|
|
|
|
|
|
|
|
const poolsData: ComputePowerPoolItem[] = [
|
|
|
|
|
{
|
|
|
|
|
name: "离岗监控",
|
|
|
|
|
type: 1,
|
|
|
|
|
proportion: 34,
|
|
|
|
|
name: "螺纹缺陷检测",
|
|
|
|
|
type: 4,
|
|
|
|
|
proportion: 25,
|
|
|
|
|
pretreatmentEfficiency: 20,
|
|
|
|
|
color: "#3879FE",
|
|
|
|
|
bgColor: "linear-gradient(180deg, #015DE6 0%, #4881F6 100%)"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "玩手机监控",
|
|
|
|
|
type: 2,
|
|
|
|
|
proportion: 46,
|
|
|
|
|
name: "螺纹无牙缺陷检测",
|
|
|
|
|
type: 3,
|
|
|
|
|
proportion: 7,
|
|
|
|
|
pretreatmentEfficiency: 15,
|
|
|
|
|
color: "#FAA90B",
|
|
|
|
|
bgColor: "linear-gradient(180deg, #FA8316 0%, #FAAD16 100%)"
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
name: "压板缺陷检测",
|
|
|
|
|
type: 2,
|
|
|
|
|
proportion: 20,
|
|
|
|
|
pretreatmentEfficiency: 20,
|
|
|
|
|
color: "#18CAF9",
|
|
|
|
|
bgColor: "linear-gradient(180deg, #6FFFFF 0%, #06BEF9 100%)"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "打孔不良检测",
|
|
|
|
|
type: 1,
|
|
|
|
|
proportion: 38,
|
|
|
|
|
pretreatmentEfficiency: 38,
|
|
|
|
|
color: "#24ED75",
|
|
|
|
|
bgColor: "linear-gradient(180deg, #43EA80 0%, #38F8D4 100%)"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "空闲算力",
|
|
|
|
|
type: 0,
|
|
|
|
|
proportion: 20,
|
|
|
|
|
proportion: 10,
|
|
|
|
|
pretreatmentEfficiency: 0,
|
|
|
|
|
color: "#DCDCDC",
|
|
|
|
|
bgColor: "linear-gradient(90deg, #7B7979 0%, #C1C1C1 100%)"
|
|
|
|
@ -63,78 +87,57 @@ const poolsData: ComputePowerPoolItem[] = [
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div
|
|
|
|
|
class="flex items-center justify-center main_booy_container computePowerAllocation_wrap"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex justify-between computePowerAllocation_wrap">
|
|
|
|
|
<div class="banner_side banner_side_left" />
|
|
|
|
|
|
|
|
|
|
<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 class="flex justify-between computePower_banner">
|
|
|
|
|
<div class="flex items-center align-middle left_box banner_item_box">
|
|
|
|
|
<DsBox1 title="硬件组成" type="w2h2">
|
|
|
|
|
<template #default>
|
|
|
|
|
<div class="w-full h-full banner_left">
|
|
|
|
|
<ul class="banner_group">
|
|
|
|
|
<li
|
|
|
|
|
v-for="(v, k) in groupList"
|
|
|
|
|
:key="k"
|
|
|
|
|
class="flex items-center mb-[16px] mx-[24px]"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex items-center px-[16px]">
|
|
|
|
|
<div class="cp_bg_logo_icon" />
|
|
|
|
|
<span class="pl-[12px]">{{ v.label }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="bg_banner_group_logo"
|
|
|
|
|
:class="`bg_banner_group_logo_${v.type}`"
|
|
|
|
|
/>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</DsBox1>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="bg_banner_center">{{ null }}</div> -->
|
|
|
|
|
<AnimationPic :value="computePowerAllocationIcon" />
|
|
|
|
|
|
|
|
|
|
<div class="banner_center">
|
|
|
|
|
<div class="flex justify-center computePower_header py-[12px]">
|
|
|
|
|
<div class="title_side title_left" />
|
|
|
|
|
<span class="ff1">苏胜天算力资源池</span>
|
|
|
|
|
<div class="title_side title_right" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bg_banner_center">{{ null }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <AnimationPic :value="computePowerAllocationIcon" /> -->
|
|
|
|
|
<!-- <AnimationPic class="device-icon-box" value="deviceClassify(device)" /> -->
|
|
|
|
|
|
|
|
|
|
<div class="banner_right">
|
|
|
|
|
<p class="hf-1 pb-[16px]">算力配置</p>
|
|
|
|
|
<ComputePowerCube :list="poolsData" />
|
|
|
|
|
<div class="flex items-center align-middle right_box banner_item_box">
|
|
|
|
|
<DsBox1 title="算力配置" type="w2h2">
|
|
|
|
|
<template #default>
|
|
|
|
|
<div class="w-full h-full banner_right">
|
|
|
|
|
<ComputePowerCube :list="poolsData" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</DsBox1>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<ul
|
|
|
|
|
class="flex items-center justify-center computePower_footer mt-[70px]"
|
|
|
|
|
class="flex items-center justify-center flex-wrap computePower_footer mt-[30px]"
|
|
|
|
|
>
|
|
|
|
|
<li
|
|
|
|
|
v-for="(v, k) in poolsData"
|
|
|
|
@ -145,6 +148,7 @@ const poolsData: ComputePowerPoolItem[] = [
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="banner_side banner_side_right" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|