update code
parent
9a08b862e7
commit
25bb59c95e
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
|
|
@ -8,6 +8,34 @@ class MenuAPI {
|
|||
static getRoutes() {
|
||||
return new Promise((resolve) => {
|
||||
resolve([
|
||||
{
|
||||
path: "/home",
|
||||
component: "Layout",
|
||||
redirect: "/home/index2",
|
||||
name: "/index2",
|
||||
meta: {
|
||||
title: "数据总览2",
|
||||
icon: "homepage",
|
||||
hidden: false,
|
||||
roles: ["GUEST", "ADMIN", "ADMIN6"],
|
||||
alwaysShow: false,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "index2",
|
||||
component: "dashboard/index2",
|
||||
name: "dashboardIndex2",
|
||||
meta: {
|
||||
title: "模型管理",
|
||||
icon: "user",
|
||||
hidden: true,
|
||||
roles: ["ADMIN", "GUEST"],
|
||||
keepAlive: true,
|
||||
alwaysShow: false,
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/modelMgr",
|
||||
component: "Layout",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
|
|
@ -0,0 +1,112 @@
|
|||
<template>
|
||||
<div class="flex" style="height: 100%;align-items: center;">
|
||||
<div style="flex-grow: 1;display: flex;align-items: center;padding-top: 3px;">
|
||||
<span style="position: relative;top:7px;">
|
||||
<img src="@/assets/logojd.png" class="logo-image" />
|
||||
</span>
|
||||
<span class="logo-title" style="font-weight: bold;font-size: 28px;margin-left: auto;margin-right: auto;color:#101010">超异构框架统一管理平台</span>
|
||||
</div>
|
||||
<div>
|
||||
<!--全屏 -->
|
||||
<div class="setting-item" @click="toggle">
|
||||
<svg-icon
|
||||
:icon-class="isFullscreen ? 'fullscreen-exit' : 'fullscreen'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 用户头像 -->
|
||||
<el-dropdown class="setting-item" trigger="click">
|
||||
<div class="flex-center h100% p10px">
|
||||
<img
|
||||
:src="userStore.user.avatar + '?imageView2/1/w/80/h/80'"
|
||||
class="rounded-full mr-10px w24px w24px"
|
||||
/>
|
||||
<span>{{ userStore.user.username }}</span>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item >
|
||||
修改密码
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="logout">
|
||||
注销登录
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
useAppStore,
|
||||
useTagsViewStore,
|
||||
useUserStore,
|
||||
useSettingsStore,
|
||||
} from "@/store";
|
||||
import defaultSettings from "@/settings";
|
||||
import { DeviceEnum } from "@/enums/DeviceEnum";
|
||||
|
||||
const appStore = useAppStore();
|
||||
const tagsViewStore = useTagsViewStore();
|
||||
const userStore = useUserStore();
|
||||
const settingStore = useSettingsStore();
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
|
||||
|
||||
const { isFullscreen, toggle } = useFullscreen();
|
||||
|
||||
/**
|
||||
* 注销
|
||||
*/
|
||||
function logout() {
|
||||
ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
lockScroll: false,
|
||||
}).then(() => {
|
||||
userStore
|
||||
.logout()
|
||||
.then(() => {
|
||||
tagsViewStore.delAllViews();
|
||||
})
|
||||
.then(() => {
|
||||
router.push(`/login?redirect=${route.fullPath}`);
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.setting-item {
|
||||
display: inline-block;
|
||||
min-width: 40px;
|
||||
height: $navbar-height;
|
||||
line-height: $navbar-height;
|
||||
color: var(--el-text-color);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgb(0 0 0 / 10%);
|
||||
}
|
||||
}
|
||||
.logo-image {
|
||||
height: 60px;
|
||||
}
|
||||
.layout-top,
|
||||
.layout-mix {
|
||||
.setting-item,
|
||||
.el-icon {
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
.dark .setting-item:hover {
|
||||
background: rgb(255 255 255 / 20%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -51,7 +51,7 @@ const handleMenuSelect = (routePath: string) => {
|
|||
permissionStore.setMixLeftMenus(routePath);
|
||||
// 获取左侧菜单集合，默认跳转到第一个菜单
|
||||
const mixLeftMenus = permissionStore.mixLeftMenus;
|
||||
goToFirstMenu(mixLeftMenus);
|
||||
goToFirstMenu(mixLeftMenus);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<el-container class="wh-full main-container">
|
||||
<el-header><NavbarRight /></el-header>
|
||||
<el-header>
|
||||
<NavbarRight2 v-if="isNav2"/>
|
||||
<NavbarRight v-else/>
|
||||
</el-header>
|
||||
<el-container class="center-container">
|
||||
<el-aside width="200px">
|
||||
<Sidebar class="sidebar-container" />
|
||||
|
|
@ -14,18 +17,20 @@
|
|||
<script setup lang="ts">
|
||||
import { useAppStore, usePermissionStore } from "@/store";
|
||||
import { DeviceEnum } from "@/enums/DeviceEnum";
|
||||
import NavbarRight2 from './components/NavBar/components/NavbarRight2.vue'
|
||||
const appStore = useAppStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
const width = useWindowSize().width;
|
||||
const WIDTH_DESKTOP = 992; // 响应式布局容器固定宽度 大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
|
||||
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
|
||||
const isOpenSidebar = computed(() => appStore.sidebar.opened);
|
||||
|
||||
let isNav2=ref(false)
|
||||
const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活path
|
||||
|
||||
watch(
|
||||
() => activeTopMenuPath.value,
|
||||
(newVal) => {
|
||||
|
||||
permissionStore.setMixLeftMenus(newVal);
|
||||
},
|
||||
{
|
||||
|
|
@ -46,10 +51,13 @@ watchEffect(() => {
|
|||
});
|
||||
|
||||
|
||||
|
||||
onMounted(()=>{
|
||||
isNav2.value=location.href.indexOf("/home/index2")>=0
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
watch(route, () => {
|
||||
watch(route, (a,b,c) => {
|
||||
isNav2.value=a.path=='/home/index2';
|
||||
if (isMobile.value && isOpenSidebar.value) {
|
||||
appStore.closeSideBar();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,10 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
component: () => import("@/views/login/index.vue"),
|
||||
meta: { hidden: true },
|
||||
},
|
||||
|
||||
{
|
||||
path: "/home2",
|
||||
component: () => import("@/views/home2.vue"),
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
name: "/",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,299 @@
|
|||
<template>
|
||||
<div class="model-flow">
|
||||
<el-row class="row-1">
|
||||
<div class="card-item">
|
||||
<div class="title-text">任务描述</div>
|
||||
<el-badge :value="0" class="item">
|
||||
<div class="div-img">
|
||||
<img class="img-150" src="./flow/suanfashangchuan.png" />
|
||||
</div>
|
||||
</el-badge>
|
||||
</div>
|
||||
<div class="line line-right">
|
||||
</div>
|
||||
<div class="card-item is-active" >
|
||||
<div class="title-text">算子检查</div>
|
||||
<el-badge :value="10" class="item">
|
||||
<div class="div-img">
|
||||
<img class="img-150" src="./flow/suanzijiancha.png" />
|
||||
|
||||
</div>
|
||||
</el-badge>
|
||||
</div>
|
||||
|
||||
<div class="line line-right">
|
||||
</div>
|
||||
|
||||
<div class="card-item" >
|
||||
<div class="title-text">编译部署</div>
|
||||
<el-badge :value="0" class="item">
|
||||
<div class="div-img">
|
||||
<img class="img-150" src="./flow/bybs.png" />
|
||||
|
||||
</div>
|
||||
</el-badge>
|
||||
</div>
|
||||
<div class="line line-right">
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<div class="title-text">性能采集</div>
|
||||
<el-badge :value="0" class="item">
|
||||
<div class="div-img">
|
||||
<img class="img-150" src="./flow/tlpg.png" />
|
||||
</div>
|
||||
</el-badge>
|
||||
</div>
|
||||
|
||||
<div class="line line-right">
|
||||
</div>
|
||||
|
||||
<div class="card-item">
|
||||
<div class="title-text">评估报告</div>
|
||||
<el-badge :value="0" class="item">
|
||||
<div class="div-img">
|
||||
<img class="img-150" src="./flow/pgbg.png" />
|
||||
</div>
|
||||
</el-badge>
|
||||
</div>
|
||||
|
||||
</el-row>
|
||||
<el-row class="row-3">
|
||||
|
||||
<div class="card-item line-top">
|
||||
<el-badge :value="0" class="item">
|
||||
<div class="div-img">
|
||||
<img class="img-120" src="./flow/szgl.png" />
|
||||
</div>
|
||||
</el-badge>
|
||||
<div class="title-text">算子管理</div>
|
||||
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="card-item" >
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="card-item card-center">
|
||||
<div class="card-center-item">
|
||||
<el-badge :value="0" class="item">
|
||||
<div class="div-img">
|
||||
<img class="img-120" src="./flow/sbgl.png" />
|
||||
</div>
|
||||
</el-badge>
|
||||
<div class="title-text">设备管理</div>
|
||||
</div>
|
||||
<div class="card-center-item">
|
||||
<el-badge :value="0" class="item">
|
||||
<div class="div-img">
|
||||
<img class="img-120" src="./flow/gjgl.png" />
|
||||
</div>
|
||||
</el-badge>
|
||||
<div class="title-text">工具管理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="card-item" ></div>
|
||||
<div class="line"></div>
|
||||
<div class="card-item line-top">
|
||||
<el-badge :value="0" class="item">
|
||||
<div class="div-img">
|
||||
<img class="img-120" src="./flow/sjjgl.png" />
|
||||
</div>
|
||||
</el-badge>
|
||||
<div class="title-text">数据集管理</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
@media screen and (max-width:1440px) {
|
||||
.model-flow {
|
||||
padding-left:10px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width:1440px) {
|
||||
.model-flow {
|
||||
padding-left:60px;
|
||||
}
|
||||
}
|
||||
.model-flow {
|
||||
.row-1 {
|
||||
.title-text {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.line{
|
||||
position: relative;
|
||||
width:calc(20% - 120px);
|
||||
&::before{
|
||||
display: inline-block;
|
||||
height: 1px;
|
||||
content: " ";
|
||||
width:calc(100% - 30px);
|
||||
border-top:dotted 2px #3399ff;
|
||||
position: relative;
|
||||
top:40%;
|
||||
left:10px;
|
||||
}
|
||||
&::after{
|
||||
display: inline-block;
|
||||
content:" ";
|
||||
background-image: url('./flow/arrow.png');
|
||||
width:6px;
|
||||
height:6px;
|
||||
position: relative;
|
||||
top:calc(40% + 2px);
|
||||
right:-10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-3{
|
||||
margin-top:60px;
|
||||
.line{
|
||||
position: relative;
|
||||
width:calc(20% - 120px);
|
||||
text-align: center;
|
||||
img{
|
||||
position: relative;
|
||||
top:30px;
|
||||
}
|
||||
}
|
||||
.title-text{
|
||||
margin-top:10px;
|
||||
}
|
||||
.card-center{
|
||||
position: relative;
|
||||
width:120px;
|
||||
.card-center-item{
|
||||
position:absolute;
|
||||
width: 120px;
|
||||
top:24px;
|
||||
z-index: 9;
|
||||
&:first-child{
|
||||
left: -90px;
|
||||
&::after{
|
||||
display:inline-block;
|
||||
content:" ";
|
||||
background-image: url('./flow/line1.png');
|
||||
width: 72px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
top:-175px;
|
||||
left:60px;
|
||||
}
|
||||
&::before{
|
||||
display: inline-block;
|
||||
content: " ";
|
||||
height: 25px;
|
||||
width: 2px;
|
||||
border-left:dotted 1px #3399ff;
|
||||
position:absolute;
|
||||
top:-32px;
|
||||
left:60px;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
left: 90px;
|
||||
&::after{
|
||||
display:inline-block;
|
||||
content:" ";
|
||||
background-image: url('./flow/line2.png');
|
||||
width: 72px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
top:-175px;
|
||||
left:-10px;
|
||||
}
|
||||
&::before{
|
||||
display: inline-block;
|
||||
content: " ";
|
||||
height: 25px;
|
||||
width: 2px;
|
||||
border-left:dotted 1px #3399ff;
|
||||
position:absolute;
|
||||
top:-32px;
|
||||
left:61px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-item{
|
||||
&.line-top{
|
||||
&::after{
|
||||
display: inline-block;
|
||||
content:" ";
|
||||
border-left:dotted 2px #3399ff;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
top:-170px;
|
||||
left:60px;
|
||||
}
|
||||
&::before{
|
||||
display: inline-block;
|
||||
content:" ";
|
||||
background-image: url('./flow/arrow.png');
|
||||
transform: rotate(-90deg);
|
||||
width:6px;
|
||||
height:6px;
|
||||
position: relative;
|
||||
top:-61px;
|
||||
left:58px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-item {
|
||||
width: 120px;
|
||||
.el-badge__content{
|
||||
display: none;
|
||||
}
|
||||
&.is-active{
|
||||
.div-img{
|
||||
background: #3399ff;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
&:hover{
|
||||
background: #3399ff88;
|
||||
}
|
||||
}
|
||||
.el-badge__content{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.title-text{
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-badge{
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
.div-img{
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
padding:10px 0px 0px;
|
||||
border-radius: 8px;
|
||||
&:hover{
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
}
|
||||
img {
|
||||
&.img-150 {
|
||||
width: 80px;
|
||||
height: 44px;
|
||||
}
|
||||
&.img-120{
|
||||
width: 80px;
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -117,28 +117,30 @@ import IndexNotice from './components/IndexNotice.vue'
|
|||
import ServiceStatus from './components/ServiceStatus.vue'
|
||||
import DeviceAPI from "@/api/device";
|
||||
let svTemp=ref(55.5)
|
||||
let rd=()=>{ return +(""+Math.random()).substring(3,5)};
|
||||
let rd2=()=>{ return +(""+Math.random()).substring(3,4)};
|
||||
let topInfos = reactive([
|
||||
{ title: '模型总数', count: 158,ucnt:3, clsName: 'c1', icon: "images/nav/nav1.png" },
|
||||
{ title: '算子总数', count: 158, ucnt:3,clsName: 'c1', icon: "images/nav/nav2.png" },
|
||||
{ title: '数据集总数', count: 158, ucnt:3,clsName: 'c1', icon: "images/nav/nav3.png" },
|
||||
{ title: '评估报告总数', count: 158,ucnt:3, clsName: 'c1', icon: "images/nav/nav4.png" },
|
||||
{ title: '互联总数', count: 158, ucnt:3,clsName: 'c1', icon: "images/nav/nav5.png" },
|
||||
{ title: '总访问量', count: 158, ucnt:3,clsName: 'c1', icon: "images/nav/nav1.png" },
|
||||
{ title: '模型总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav1.png" },
|
||||
{ title: '算子总数', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav2.png" },
|
||||
{ title: '数据集总数', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav3.png" },
|
||||
{ title: '评估报告总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav4.png" },
|
||||
{ title: '互联总数', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav5.png" },
|
||||
{ title: '总访问量', count: rd(), ucnt:rd2(),clsName: 'c1', icon: "images/nav/nav1.png" },
|
||||
]);
|
||||
|
||||
let devInfos = reactive([
|
||||
{ id: 1001, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 'offline', temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1002, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 'compile', temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1003, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'free', temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1004, name: '设备名称4', netType: 'network001', modelName: '模型名称', state: 'inferencing', temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1005, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 'noreg', temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1006, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'publish', temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1007, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 'training', temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1008, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 'updating', temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1009, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'offline', temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1010, name: '设备名称4', netType: 'network001', modelName: '模型名称', state: 'training', temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1011, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 'training', temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1012, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'training', temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1001, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 'offline', temperature:rd() , memory: rd(), cpu:rd() },
|
||||
{ id: 1002, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 'compile', temperature:rd() , memory: rd(), cpu:rd() },
|
||||
{ id: 1003, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'free', temperature:rd() , memory: rd(), cpu:rd() },
|
||||
{ id: 1004, name: '设备名称4', netType: 'network001', modelName: '模型名称', state: 'inferencing', temperature:rd() , memory: rd(), cpu:rd() },
|
||||
{ id: 1005, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 'noreg', temperature:rd() , memory: rd(), cpu:rd() },
|
||||
{ id: 1006, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'publish', temperature:rd() , memory: rd(), cpu:rd() },
|
||||
{ id: 1007, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 'training', temperature:rd() , memory: rd(), cpu:rd() },
|
||||
{ id: 1008, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 'updating', temperature:rd() , memory: rd(), cpu:rd() },
|
||||
{ id: 1009, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 'offline', temperature:rd() , memory: rd(), cpu:rd() },
|
||||
{ id: 1010, name: '设备名称4', netType: 'network001', modelName: '模型名称', state: 'training', temperature:rd() , memory: rd(), cpu:rd() },
|
||||
{ id: 1011, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 'training', temperature:rd() , memory: rd(), cpu:rd() },
|
||||
{ id: 1012, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 'training', temperature:rd() , memory: rd(), cpu:rd() },
|
||||
])
|
||||
const winWidth=ref(0)
|
||||
const isSmallScreen=computed(()=>{
|
||||
|
|
@ -161,7 +163,7 @@ const getState=(e:any)=>{
|
|||
return "未注册";
|
||||
}
|
||||
if(e=="publish"){
|
||||
return "部署模型和算子中";
|
||||
return "部署中";
|
||||
}
|
||||
if(e=="training"){
|
||||
return "训练中";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,478 @@
|
|||
<template>
|
||||
<div class="dashboard-container" :class="isSmallScreen?'is-small':''">
|
||||
<!-- github角标 -->
|
||||
<el-row :gutter="10" class="mt-3" style="margin-bottom: 12px;">
|
||||
<el-col :span="4" v-for="(it, idx) in topInfos" :key="idx">
|
||||
<el-card shadow="always" class="top-row1">
|
||||
<img :src="it.icon" class="top-icon" />
|
||||
<div class="top-row">
|
||||
<div class="div-title">{{ it.title }}</div>
|
||||
<div class="div-num">
|
||||
<span style="color:dodgerblue;">{{ it.ucnt }} </span>/ <span style="font-size:14px;">{{it.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="display: flex;">
|
||||
<div style="flex-grow: 1;">
|
||||
<el-card shadow="never" class="top-row2">
|
||||
<template #header>
|
||||
<div class="row2-top">
|
||||
<div style="color:#333;font-weight: bold;font-size:15px;">设备运行状态</div>
|
||||
<div class="div-more" v-if="false">更多</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-scrollbar max-height="504px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="isSmallScreen?8:6" v-for="it in devInfos" :key="it.id" class="dev-item" style="margin-bottom: 20px;">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="dev-title">{{ it.name }}
|
||||
<svg-icon icon-class="enlarge" color="#666" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="dev-row2">
|
||||
<div>
|
||||
网络类型:<span>{{ it.netType }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dev-row3">
|
||||
<div class="device-state">
|
||||
|
||||
<img style="position: relative;top: -10px;left:-10px;" :src="'images/state/'+it.state+'.png'"/>
|
||||
<div style="font-size:20px;color:#888;position: relative;top: -10px;padding-right:10px;text-align: center;" >{{getState(it.state) }}</div>
|
||||
</div>
|
||||
<div class="dev-chart">
|
||||
<div class="chart-item-title">
|
||||
<span>温度</span>
|
||||
<span>{{ it.temperature }}%</span>
|
||||
</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-line-inline" :style="'width:' + it.temperature + '%'"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-item-title">
|
||||
<span>内存</span>
|
||||
<span>{{ it.memory }}%</span>
|
||||
</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-line-inline" :style="'width:' + it.memory + '%'"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-item-title">
|
||||
<span>效率</span>
|
||||
<span>{{ it.cpu }}%</span>
|
||||
</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-line-inline" :style="'width:' + it.cpu + '%'"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="proc-card">
|
||||
<template #header>
|
||||
<div class="row2-top">
|
||||
<div style="color:#333;font-weight: bold;font-size:15px;">超异构任务部署流程</div>
|
||||
</div>
|
||||
</template>
|
||||
<ModelFlow/>
|
||||
</el-card>
|
||||
</div>
|
||||
<div style="" class="right-panel">
|
||||
<el-card shadow="never" class="top-row2 notice-card">
|
||||
<template #header>
|
||||
<div class="row2-top">
|
||||
<div style="color:#333;font-weight: bold;font-size:15px;">通知中心</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-scrollbar height="484px">
|
||||
<IndexNotice/>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="proc-card server-status">
|
||||
<template #header>
|
||||
<div class="row2-top">
|
||||
<div style="color:#333;font-weight: bold;font-size:15px;">服务器运行状态</div>
|
||||
</div>
|
||||
</template>
|
||||
<ServiceStatus :val="svTemp" width="200px" height="200px"></ServiceStatus>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
import ModelFlow from './components/ModelFlow2.vue'
|
||||
import IndexNotice from './components/IndexNotice.vue'
|
||||
import ServiceStatus from './components/ServiceStatus.vue'
|
||||
import DeviceAPI from "@/api/device";
|
||||
let svTemp=ref(55.5)
|
||||
let rd=()=>{ return +(""+Math.random()).substring(3,6)};
|
||||
let rd2=()=>{ return +(""+Math.random()).substring(3,4)};
|
||||
let rd3=()=>{ return +(""+Math.random()).substring(3,5)};
|
||||
let topInfos = reactive([
|
||||
{ title: '模型总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav1.png" },
|
||||
{ title: '算子总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav2.png" },
|
||||
{ title: '数据集总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav3.png" },
|
||||
{ title: '评估报告总数', count:rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav4.png" },
|
||||
{ title: '互联总数', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav5.png" },
|
||||
{ title: '总访问量', count: rd(),ucnt:rd2(), clsName: 'c1', icon: "images/nav/nav1.png" },
|
||||
]);
|
||||
|
||||
let devInfos = reactive([
|
||||
{ id: 1001, name: 'NPU-TC-01', netType: 'network001', modelName: '模型名称', state: 'offline', temperature: rd3(), memory: rd3(), cpu: rd3(), },
|
||||
{ id: 1002, name: 'GPU-B101', netType: 'network001', modelName: '模型名称', state: 'compile', temperature: rd3(), memory: rd3(), cpu: rd3(), },
|
||||
{ id: 1003, name: 'CPU-SW-02', netType: 'network001', modelName: '模型名称', state: 'free', temperature: rd3(), memory: rd3(), cpu: rd3(), },
|
||||
{ id: 1004, name: 'CPU-SW-01', netType: 'network001', modelName: '模型名称', state: 'inferencing', temperature: rd3(), memory: rd3(), cpu: rd3(), },
|
||||
{ id: 1005, name: 'FPGA-FD-01', netType: 'network001', modelName: '模型名称', state: 'noreg', temperature: rd3(), memory: rd3(), cpu: rd3(), },
|
||||
{ id: 1006, name: 'GPU-MR-01', netType: 'network001', modelName: '模型名称', state: 'publish', temperature: rd3(), memory: rd3(), cpu: rd3(), },
|
||||
{ id: 1007, name: 'FPGA-FD-02', netType: 'network001', modelName: '模型名称', state: 'training', temperature: rd3(), memory: rd3(), cpu: rd3(), },
|
||||
{ id: 1008, name: 'CPU-SW-03', netType: 'network001', modelName: '模型名称', state: 'updating',temperature: rd3(), memory: rd3(), cpu: rd3(), },
|
||||
])
|
||||
const winWidth=ref(0)
|
||||
const isSmallScreen=computed(()=>{
|
||||
return winWidth.value<1440;
|
||||
});
|
||||
const getState=(e:any)=>{
|
||||
if(e=="offline"){
|
||||
return "离线";
|
||||
}
|
||||
if(e=="compile"){
|
||||
return "编译中";
|
||||
}
|
||||
if(e=="free"){
|
||||
return "空闲";
|
||||
}
|
||||
if(e=="inferencing"){
|
||||
return "推理中";
|
||||
}
|
||||
if(e=="noreg"){
|
||||
return "未注册";
|
||||
}
|
||||
if(e=="publish"){
|
||||
return "部署中";
|
||||
}
|
||||
if(e=="training"){
|
||||
return "训练中";
|
||||
}
|
||||
|
||||
return "升级中";
|
||||
}
|
||||
onMounted(()=>{
|
||||
winWidth.value=window.outerWidth;
|
||||
window.onresize=()=>{
|
||||
setTimeout(()=>{
|
||||
winWidth.value=window.outerWidth;
|
||||
},100);
|
||||
}
|
||||
DeviceAPI.getStatus().then(d=>{
|
||||
debugger;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-container {
|
||||
position: relative;
|
||||
min-width:960px;
|
||||
padding: 0px 24px;
|
||||
&.is-small{
|
||||
padding: 0px 12px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.github-corner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.data-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
font-weight: bold;
|
||||
color: var(--el-text-color-regular);
|
||||
background: var(--el-bg-color-overlay);
|
||||
border-color: var(--el-border-color);
|
||||
box-shadow: var(--el-box-shadow-dark);
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
fill: currentcolor !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.dashboard-container {
|
||||
&.is-small{
|
||||
.dev-row3 {
|
||||
padding:0px !important;
|
||||
.device-state{
|
||||
width:80px !important;
|
||||
}
|
||||
}
|
||||
.right-panel{
|
||||
min-width: 240px;
|
||||
padding-left:8px;
|
||||
}
|
||||
.model-flow {
|
||||
.card-item{
|
||||
width:100px;
|
||||
}
|
||||
.row-1 {
|
||||
.line{
|
||||
width: calc(20% - 100px);
|
||||
top:10px;
|
||||
}
|
||||
}
|
||||
.row-3 {
|
||||
.line{
|
||||
width: calc(20% - 100px);
|
||||
}
|
||||
.card-center{
|
||||
.card-center-item{
|
||||
width:100px;
|
||||
&:first-child{
|
||||
&::after{
|
||||
left:50px;
|
||||
}
|
||||
&::before{
|
||||
left:50px;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
&::after{
|
||||
left:-20px;
|
||||
}
|
||||
&::before{
|
||||
left:51px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-item{
|
||||
&.line-top{
|
||||
&::after{
|
||||
left:50px;
|
||||
}
|
||||
&::before{
|
||||
left:48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-panel{
|
||||
min-width: 300px;
|
||||
padding-left:12px;
|
||||
}
|
||||
.el-card__body {
|
||||
padding: 10px 10px;
|
||||
}
|
||||
|
||||
.top-row1 {
|
||||
position: relative;
|
||||
|
||||
.top-icon {
|
||||
top: 20px;
|
||||
position: absolute;
|
||||
background: #409eff2b;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
* {
|
||||
fill: #3399ff;
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-row {
|
||||
padding-left: 40px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
|
||||
.div-title {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.div-num {
|
||||
font-size: 20px;
|
||||
font-weight: bolder;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-row2 {
|
||||
&.notice-card{
|
||||
.el-card__header{
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
.el-card__body {
|
||||
.el-scrollbar{
|
||||
padding:10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-card__header{
|
||||
padding: 8px;
|
||||
border:none;
|
||||
.row2-top {
|
||||
position: relative;
|
||||
|
||||
.div-more {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 0px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.el-card__body{
|
||||
padding:0px;
|
||||
.el-scrollbar{
|
||||
padding:0px 10px;
|
||||
.el-scrollbar__bar.is-horizontal{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dev-item {
|
||||
.el-card {
|
||||
background: #EEF7FE;
|
||||
padding: 8px;
|
||||
|
||||
.el-card__header {
|
||||
padding: 4px;
|
||||
border: none;
|
||||
|
||||
.dev-title {
|
||||
color: var(--el-color-primary);
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
||||
.svg-icon {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
background: #fff;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
border-radius: 8px;
|
||||
padding:10px;
|
||||
.dev-row3 {
|
||||
display: flex;
|
||||
padding:12px;
|
||||
align-items: center;
|
||||
.device-state {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.state-text{
|
||||
font-size:16px;
|
||||
&.state0{
|
||||
color:var(--el-color-primary);
|
||||
}
|
||||
&.state1{
|
||||
color:var(--el-color-warning);
|
||||
}
|
||||
&.state2{
|
||||
color:var(--el-color-danger);
|
||||
}
|
||||
}
|
||||
|
||||
.dev-chart{
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
.chart-item-title{
|
||||
margin: 12px 0px 0px;
|
||||
font-size:12px;
|
||||
position: relative;
|
||||
span{
|
||||
&:first-child{
|
||||
font-weight: bold;
|
||||
}
|
||||
&:last-child{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-line{
|
||||
background-color: #ccc;
|
||||
height:8px;
|
||||
border-radius:4px;
|
||||
.chart-line-inline{
|
||||
background-color: var(--el-color-primary);
|
||||
height:8px;
|
||||
border-radius:4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.proc-card{
|
||||
margin-top:20px;
|
||||
padding: 8px;
|
||||
.el-card__header{
|
||||
padding: 8px;
|
||||
border:none;
|
||||
}
|
||||
.el-card__body{
|
||||
background: #EEF7FE;
|
||||
border-radius: 8px;
|
||||
height:300px;
|
||||
}
|
||||
&.server-status{
|
||||
background: #EEF7FE;
|
||||
padding: 8px;
|
||||
.el-card__header{
|
||||
}
|
||||
.el-card__body {
|
||||
background: #fff;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
</script>
|
||||
<style scoped lang='less'>
|
||||
</style>
|
||||
Loading…
Reference in New Issue