update code
parent
7508ae810e
commit
3ba667188e
|
|
@ -5,6 +5,7 @@
|
|||
<link rel="icon" href="logo.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>算法测试验证软件平台</title>
|
||||
<link rel="stylesheet" href="./css/main.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
.dev-state {
|
||||
background-size: 100% 100%;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.dev-state.dev-s {
|
||||
background-image: url('../images/dev/dev-s.png');
|
||||
}
|
||||
.dev-state.dev-w {
|
||||
background-image: url('../images/dev/dev-w.png');
|
||||
}
|
||||
.dev-state.dev-e {
|
||||
background-image: url('../images/dev/dev-e.png');
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
.dev-state{
|
||||
background-size: 100% 100%;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
&.dev-s{
|
||||
background-image: url('../images/dev/dev-s.png');
|
||||
}
|
||||
&.dev-w{
|
||||
background-image: url('../images/dev/dev-w.png');
|
||||
}
|
||||
&.dev-e{
|
||||
background-image: url('../images/dev/dev-e.png');
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 606 B |
Binary file not shown.
|
After Width: | Height: | Size: 603 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 328 B |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 282 B |
|
|
@ -0,0 +1 @@
|
|||
<svg class="icon" style="width: 1.00390625em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1755"><path d="M395.731085 571.196755l10.18176 10.18176q4.072704 4.072704 8.145408 7.63632t8.145408 7.63632l12.218112 12.218112q20.363521 20.363521 16.290817 35.636161t-25.454401 35.636161q-9.163584 10.18176-30.036193 31.054369t-44.799745 45.308833-46.32701 46.836098-34.617985 35.636161q-18.327169 18.327169-25.454401 32.072545t6.109056 26.981665q9.163584 9.163584 23.418049 24.436225t24.436225 25.454401q17.308993 17.308993 12.7272 30.545281t-30.036193 15.27264q-26.472577 3.054528-59.05421 7.127232t-67.199618 7.63632-67.708706 7.63632-60.581474 7.127232q-26.472577 3.054528-36.654337-6.618144t-8.145408-34.108897q2.036352-25.454401 5.599968-57.017858t7.63632-64.654178 7.63632-65.672354 6.618144-60.072386q3.054528-29.527105 16.799905-37.672513t31.054369 9.163584q10.18176 10.18176 26.472577 24.945313t27.490753 25.963489 21.381697 7.127232 23.418049-16.290817q13.236288-13.236288 36.145249-36.654337t47.854274-48.363362 48.363362-48.87245 37.672513-38.181601q6.109056-6.109056 13.745376-11.709024t16.799905-7.63632 18.836257 1.018176 20.872609 13.236288zM910.928158 58.036034q26.472577-3.054528 36.654337 6.618144t8.145408 34.108897q-2.036352 25.454401-5.599968 57.017858t-7.63632 64.654178-7.63632 66.181442-6.618144 60.581474q-3.054528 29.527105-16.799905 37.163425t-31.054369-9.672672q-10.18176-10.18176-27.999841-26.472577t-29.018017-27.490753-19.345345-9.672672-20.363521 13.745376q-14.254464 14.254464-37.163425 37.672513t-48.363362 49.381538-49.890626 50.399714l-37.672513 37.672513q-6.109056 6.109056-13.236288 12.218112t-15.781729 9.163584-18.327169 1.018176-19.854433-13.236288l-38.690689-38.690689q-20.363521-20.363521-17.818081-37.163425t22.908961-37.163425q9.163584-9.163584 30.545281-31.054369t45.817921-46.32701 47.345186-47.854274 36.145249-35.636161q18.327169-18.327169 22.908961-30.036193t-8.654496-24.945313q-9.163584-9.163584-21.890785-22.399873t-22.908961-23.418049q-17.308993-17.308993-12.7272-30.545281t30.036193-16.290817 58.545122-7.127232 67.708706-7.63632 67.708706-7.63632 60.581474-7.127232z" p-id="1756"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7629"><path d="M525.541411 131.503033l-230.494605 148.031475h-114.988917c-63.895239 0-115.679649 51.14996-115.679649 115.219161v230.898811c0 63.664995 51.150984 115.219161 115.679649 115.219161h114.988917l230.494605 147.915841c32.582069 14.128789 57.840336-0.980327 57.840336-33.04358V164.54559c0-32.120558-25.892717-46.825468-57.840336-33.042557z m194.223516 186.033997c-10.841929-11.649318-29.122271-12.283768-40.712237-1.384533-11.649318 10.899234-12.226462 29.122271-1.384533 40.770565 5.363148 5.76633 14.531971 18.511609 23.989367 37.772279 16.146749 32.870642 25.892717 71.449285 25.892717 115.507733 0 44.058448-9.745968 82.694397-25.892717 115.507734-9.457396 19.259646-18.626219 32.004925-23.989367 37.772278-10.899234 11.648294-10.264784 29.871331 1.384533 40.770566 11.648294 10.899234 29.871331 10.264784 40.770566-1.384533 9.054213-9.68764 21.509896-26.987654 33.620725-51.727105 19.895119-40.483017 31.774681-87.654362 31.774681-140.996245 0-53.341882-11.879562-100.514251-31.774681-140.996244-12.169157-24.62484-24.625864-41.983183-33.679054-51.612495z m176.806845-35.69599c-23.297612-39.444361-46.825468-66.778916-63.318094-81.483826-11.880585-10.609639-30.102598-9.572006-40.714284 2.36486-10.609639 11.936867-9.573029 30.101575 2.364861 40.712238 2.709715 2.421142 8.131191 7.842619 15.396665 16.261358 12.455683 14.416338 24.911366 31.601742 36.619012 51.439556 33.504068 56.860009 53.630455 123.349329 53.630455 199.066825s-20.126386 142.206816-53.68776 199.125153c-11.706623 19.836791-24.220634 37.022195-36.619012 51.438533-7.265474 8.41874-12.68695 13.840216-15.397689 16.261359-11.879562 10.610662-12.916171 28.833699-2.363837 40.714283 10.553357 11.879562 28.833699 12.916171 40.713261 2.363838 16.493649-14.70491 40.021505-41.98216 63.319117-81.483826 38.522362-65.336054 61.646012-141.745305 61.646012-228.41934 0.058328-86.614683-23.066345-163.023934-61.588707-228.361011z" fill="" p-id="7630"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg class="icon" style="width: 1.1298828125em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1157 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8423"><path d="M1147.099099 904.936937l-499.603604-864.864865a78.990991 78.990991 0 0 0-137.225225 0l-499.603603 864.864865a79.567568 79.567568 0 0 0 68.900901 119.063063h998.918918a79.567568 79.567568 0 0 0 68.612613-119.063063zM522.378378 349.117117a57.657658 57.657658 0 0 1 57.657658-57.657658 57.657658 57.657658 0 0 1 56.216216 57.657658v296.936937a57.657658 57.657658 0 0 1-113.009009 0z m113.873874 590.414415h-115.315315v-115.315316h115.315315z" p-id="8424"></path></svg>
|
||||
|
After Width: | Height: | Size: 680 B |
|
|
@ -2,7 +2,7 @@
|
|||
<el-container class="wh-full main-container">
|
||||
<el-header><NavbarRight /></el-header>
|
||||
<el-container class="center-container">
|
||||
<el-aside width="240px">
|
||||
<el-aside width="200px">
|
||||
<Sidebar class="sidebar-container" />
|
||||
</el-aside>
|
||||
<el-main>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div class="index-notice">
|
||||
<div v-for="(it,idx) in noticeList" :key="idx" class="notice-item">
|
||||
<div style="font-size: 12px;color: #333;">
|
||||
<svg-icon class="icon-info" icon-class="info" v-if="it.type=='info'" color="orange"></svg-icon>
|
||||
<svg-icon class="icon-warn" icon-class="warn" v-if="it.type=='warn'" color="red"></svg-icon>
|
||||
{{ it.type=="info"?"系统信息":"告警信息" }}
|
||||
</div>
|
||||
<div style="color: #666;padding: 0px 12px;">
|
||||
{{ it.msg }}
|
||||
</div>
|
||||
<div style="text-align: right;color: #666;padding:0px 12px;border-bottom: solid 1px #eee;">
|
||||
{{ it.date }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import {reactive} from 'vue'
|
||||
let noticeList=reactive([
|
||||
{ type:'info',msg:'测试消息1',date:'2024-05-12'},
|
||||
{ type:'info',msg:'测试消息2',date:'2024-05-12'},
|
||||
{ type:'warn',msg:'测试告警3',date:'2024-05-12'},
|
||||
{ type:'warn',msg:'测试告警4',date:'2024-05-12'},
|
||||
{ type:'info',msg:'测试消息5',date:'2024-05-12'},
|
||||
{ type:'warn',msg:'测试告警3',date:'2024-05-12'},
|
||||
{ type:'warn',msg:'测试告警4',date:'2024-05-12'},
|
||||
{ type:'info',msg:'测试消息5',date:'2024-05-12'},
|
||||
])
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.index-notice{
|
||||
.notice-item{
|
||||
font-size: 12px;
|
||||
line-height: 30px;}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
<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">
|
||||
<div class="div-img">
|
||||
<img class="img-120" src="./flow/szgl.png" />
|
||||
</div>
|
||||
<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">
|
||||
<div class="div-img">
|
||||
<img class="img-120" src="./flow/sbgl.png" />
|
||||
</div>
|
||||
<div class="title-text">设备管理</div>
|
||||
</div>
|
||||
<div class="card-center-item">
|
||||
<div class="div-img">
|
||||
<img class="img-120" src="./flow/gjgl.png" />
|
||||
</div>
|
||||
<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">
|
||||
<div class="div-img">
|
||||
<img class="img-120" src="./flow/sjjgl.png" />
|
||||
</div>
|
||||
<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;
|
||||
&:first-child{
|
||||
left: -90px;
|
||||
&::after{
|
||||
display:inline-block;
|
||||
content:" ";
|
||||
background-image: url('./flow/line1.png');
|
||||
width: 72px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
top:-165px;
|
||||
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:-165px;
|
||||
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:-160px;
|
||||
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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 606 B |
Binary file not shown.
|
After Width: | Height: | Size: 603 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 328 B |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 282 B |
|
|
@ -2,64 +2,68 @@
|
|||
<div class="dashboard-container">
|
||||
<!-- 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">{{it.count}}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<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">{{ it.count }}</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>设备运行状态</div>
|
||||
<div class="div-more">更多</div>
|
||||
<div style="color:#333;font-weight: bold;font-size:15px;">设备运行状态</div>
|
||||
<div class="div-more" v-if="1==2">更多</div>
|
||||
</div>
|
||||
<el-row :gutter="10" class="mt-3">
|
||||
<el-col :span="8" v-for="it in devInfos" :key="it.id" style="margin-bottom: 12px;">
|
||||
<el-card>
|
||||
<div class="dev-title">{{it.name }}
|
||||
<el-icon class="dev-more"><MoreFilled /></el-icon>
|
||||
</div>
|
||||
</template>
|
||||
<el-scrollbar max-height="504px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="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>
|
||||
模型名称:<span>{{ it.modelName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dev-row3">
|
||||
<div class="dev-state">
|
||||
<i class="icon"></i>
|
||||
<div :class="'state'+it.state">{{it.state==0?"正常":(it.state==1?"异常":"预警")}}</div>
|
||||
<div>设备运行状态</div>
|
||||
<div class="device-state">
|
||||
<i class="dev-state" :class="it.state == 0 ? 'dev-s' : it.state == 1 ? 'dev-w' : 'dev-e'"></i>
|
||||
<div class="state-text" :class="'state' + it.state">{{ it.state == 0 ? "正常" : (it.state == 1 ? "预警" : "异常") }}</div>
|
||||
<div style="color:#999;font-size:12px;">设备运行状态</div>
|
||||
</div>
|
||||
<div class="dev-chart">
|
||||
<div class="chart-item-title">
|
||||
<span>温度</span>
|
||||
<span>{{it.temperature}}%</span>
|
||||
<span>{{ it.temperature }}%</span>
|
||||
</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-line-inline" :style="'width:'+it.temperature+'%'"></div>
|
||||
<div class="chart-line-inline" :style="'width:' + it.temperature + '%'"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-item-title">
|
||||
<span>内存</span>
|
||||
<span>{{it.memory}}%</span>
|
||||
<span>{{ it.memory }}%</span>
|
||||
</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-line-inline" :style="'width:'+it.memory+'%'"></div>
|
||||
<div class="chart-line-inline" :style="'width:' + it.memory + '%'"></div>
|
||||
</div>
|
||||
|
||||
<div class="chart-item-title">
|
||||
<span>CPU</span>
|
||||
<span>{{it.cpu}}%</span>
|
||||
<span>{{ it.cpu }}%</span>
|
||||
</div>
|
||||
<div class="chart-line">
|
||||
<div class="chart-line-inline" :style="'width:'+it.cpu+'%'"></div>
|
||||
<div class="chart-line-inline" :style="'width:' + it.cpu + '%'"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -67,41 +71,76 @@
|
|||
</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="min-width: 300px;padding-left:12px;">
|
||||
<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>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {reactive} from 'vue'
|
||||
let topInfos=reactive([
|
||||
{title:'模型总数',count:158,clsName:'c1',icon:"images/nav/nav1.png"},
|
||||
{title:'算子总数',count:158,clsName:'c1',icon:"images/nav/nav2.png"},
|
||||
{title:'数据集总数',count:158,clsName:'c1',icon:"images/nav/nav3.png"},
|
||||
{title:'评估报告总数',count:158,clsName:'c1',icon:"images/nav/nav4.png"},
|
||||
{title:'互联总数',count:158,clsName:'c1',icon:"images/nav/nav5.png"},
|
||||
{title:'总访问量',count:158,clsName:'c1',icon:"images/nav/nav1.png"},
|
||||
import { reactive } from 'vue'
|
||||
import ModelFlow from './components/ModelFlow.vue'
|
||||
import IndexNotice from './components/IndexNotice.vue'
|
||||
let topInfos = reactive([
|
||||
{ title: '模型总数', count: 158, clsName: 'c1', icon: "images/nav/nav1.png" },
|
||||
{ title: '算子总数', count: 158, clsName: 'c1', icon: "images/nav/nav2.png" },
|
||||
{ title: '数据集总数', count: 158, clsName: 'c1', icon: "images/nav/nav3.png" },
|
||||
{ title: '评估报告总数', count: 158, clsName: 'c1', icon: "images/nav/nav4.png" },
|
||||
{ title: '互联总数', count: 158, clsName: 'c1', icon: "images/nav/nav5.png" },
|
||||
{ title: '总访问量', count: 158, clsName: 'c1', icon: "images/nav/nav1.png" },
|
||||
]);
|
||||
|
||||
let devInfos=reactive([
|
||||
{id:1001,name:'设备名称1',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
|
||||
{id:1002,name:'设备名称2',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
|
||||
{id:1003,name:'设备名称3',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
|
||||
{id:1004,name:'设备名称4',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
|
||||
{id:1005,name:'设备名称5',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
|
||||
{id:1006,name:'设备名称6',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
|
||||
{id:1007,name:'设备名称1',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
|
||||
{id:1008,name:'设备名称2',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
|
||||
{id:1009,name:'设备名称3',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
|
||||
{id:1010,name:'设备名称4',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
|
||||
{id:1011,name:'设备名称5',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
|
||||
{id:1012,name:'设备名称6',netType:'network001',modelName:'模型名称',state:0,temperature:25,memory:85,cpu:51},
|
||||
let devInfos = reactive([
|
||||
{ id: 1001, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 0, temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1002, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 1, temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1003, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 2, temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1004, name: '设备名称4', netType: 'network001', modelName: '模型名称', state: 0, temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1005, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 1, temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1006, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 2, temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1007, name: '设备名称1', netType: 'network001', modelName: '模型名称', state: 0, temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1008, name: '设备名称2', netType: 'network001', modelName: '模型名称', state: 1, temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1009, name: '设备名称3', netType: 'network001', modelName: '模型名称', state: 2, temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1010, name: '设备名称4', netType: 'network001', modelName: '模型名称', state: 0, temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1011, name: '设备名称5', netType: 'network001', modelName: '模型名称', state: 1, temperature: 25, memory: 85, cpu: 51 },
|
||||
{ id: 1012, name: '设备名称6', netType: 'network001', modelName: '模型名称', state: 2, temperature: 25, memory: 85, cpu: 51 },
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-container {
|
||||
position: relative;
|
||||
padding: 12px 24px;
|
||||
min-width:960px;
|
||||
padding: 0px 24px;
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
|
|
@ -134,51 +173,190 @@ let devInfos=reactive([
|
|||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.dashboard-container{
|
||||
.el-card__body{
|
||||
padding:10px 10px;
|
||||
.dashboard-container {
|
||||
.el-card__body {
|
||||
padding: 10px 10px;
|
||||
}
|
||||
.top-row1{
|
||||
|
||||
.top-row1 {
|
||||
position: relative;
|
||||
.top-icon{
|
||||
top:20px;
|
||||
|
||||
.top-icon {
|
||||
top: 20px;
|
||||
position: absolute;
|
||||
background: #409eff2b;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
svg{
|
||||
width:20px;
|
||||
height:20px;
|
||||
*{
|
||||
fill: #3399ff;;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
* {
|
||||
fill: #3399ff;
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-row{
|
||||
|
||||
.top-row {
|
||||
padding-left: 40px;
|
||||
line-height:30px;
|
||||
text-align: center;
|
||||
.div-title{
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
|
||||
.div-title {
|
||||
font-weight: bold;
|
||||
font-size:14px;
|
||||
color:#333;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
.div-num{
|
||||
font-size:20px;
|
||||
|
||||
.div-num {
|
||||
font-size: 20px;
|
||||
font-weight: bolder;
|
||||
color:#333;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-row2{
|
||||
.row2-top{
|
||||
|
||||
.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{
|
||||
|
||||
.div-more {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top:0px;
|
||||
font-size: 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;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue