update code
parent
86faa6878b
commit
f43647068d
|
@ -13,6 +13,13 @@ const userOperationNotice=()=>{
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const userRunning=()=>{
|
||||||
|
return request({
|
||||||
|
url:`/logs/user_operation/running`,
|
||||||
|
method:"get"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
//获取用户操作详情
|
//获取用户操作详情
|
||||||
const userOperation=(operation_id)=>{
|
const userOperation=(operation_id)=>{
|
||||||
return request({
|
return request({
|
||||||
|
@ -33,6 +40,7 @@ export default {
|
||||||
serverState,
|
serverState,
|
||||||
userOperationNotice,
|
userOperationNotice,
|
||||||
userOperation,
|
userOperation,
|
||||||
compileDeploy
|
compileDeploy,
|
||||||
|
userRunning
|
||||||
|
|
||||||
}
|
}
|
|
@ -1,299 +1,347 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="model-flow">
|
<div class="model-flow">{{ info }}
|
||||||
<el-row class="row-1">
|
<el-row class="row-1">
|
||||||
<div class="card-item">
|
<div class="card-item">
|
||||||
<div class="title-text">算法上传</div>
|
<div class="title-text">算法上传</div>
|
||||||
<el-badge :value="0" class="item">
|
<el-badge :value="0" class="item">
|
||||||
<div class="div-img">
|
<div class="div-img">
|
||||||
<img class="img-150" src="./flow/suanfashangchuan.png" />
|
<img class="img-150" src="./flow/suanfashangchuan.png" />
|
||||||
</div>
|
</div>
|
||||||
</el-badge>
|
</el-badge>
|
||||||
</div>
|
</div>
|
||||||
<div class="line line-right">
|
<div class="line line-right">
|
||||||
</div>
|
</div>
|
||||||
<div class="card-item is-active" >
|
<div class="card-item ">
|
||||||
<div class="title-text">算子检查</div>
|
<div class="title-text">算子互联</div>
|
||||||
<el-badge :value="10" class="item">
|
<el-badge :value="0" class="item">
|
||||||
<div class="div-img">
|
<div class="div-img">
|
||||||
<img class="img-150" src="./flow/suanzijiancha.png" />
|
<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>
|
</div>
|
||||||
<el-row class="row-3">
|
</el-badge>
|
||||||
|
</div>
|
||||||
<div class="card-item line-top">
|
|
||||||
<el-badge :value="0" class="item">
|
<div class="line line-right">
|
||||||
<div class="div-img">
|
</div>
|
||||||
<img class="img-120" src="./flow/szgl.png" />
|
|
||||||
</div>
|
<div class="card-item" :class="info.cnt1 > 0 ? 'is-active' : ''">
|
||||||
</el-badge>
|
<div class="title-text">编译部署</div>
|
||||||
<div class="title-text">算子管理</div>
|
<el-badge :value="info.cnt1" class="item">
|
||||||
|
<div class="div-img">
|
||||||
</div>
|
<img class="img-150" src="./flow/bybs.png" />
|
||||||
<div class="line"></div>
|
</div>
|
||||||
|
</el-badge>
|
||||||
<div class="card-item" >
|
</div>
|
||||||
</div>
|
<div class="line line-right">
|
||||||
<div class="line"></div>
|
</div>
|
||||||
<div class="card-item card-center">
|
<div class="card-item" :class="info.cnt2 > 0 ? 'is-active' : ''">
|
||||||
<div class="card-center-item">
|
<div class="title-text">推理评估</div>
|
||||||
<el-badge :value="0" class="item">
|
<el-badge :value="info.cnt2" class="item">
|
||||||
<div class="div-img">
|
<div class="div-img">
|
||||||
<img class="img-120" src="./flow/sbgl.png" />
|
<img class="img-150" src="./flow/tlpg.png" />
|
||||||
</div>
|
</div>
|
||||||
</el-badge>
|
</el-badge>
|
||||||
<div class="title-text">设备管理</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="card-center-item">
|
<div class="line line-right">
|
||||||
<el-badge :value="0" class="item">
|
</div>
|
||||||
<div class="div-img">
|
|
||||||
<img class="img-120" src="./flow/gjgl.png" />
|
<div class="card-item" :class="info.cnt3 > 0 ? 'is-active' : ''">
|
||||||
</div>
|
<div class="title-text">评估报告</div>
|
||||||
</el-badge>
|
<el-badge :value="info.cnt3" class="item">
|
||||||
<div class="title-text">工具管理</div>
|
<div class="div-img">
|
||||||
</div>
|
<img class="img-150" src="./flow/pgbg.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
</el-badge>
|
||||||
<div class="card-item" ></div>
|
</div>
|
||||||
<div class="line"></div>
|
|
||||||
<div class="card-item line-top">
|
</el-row>
|
||||||
<el-badge :value="0" class="item">
|
<el-row class="row-3">
|
||||||
<div class="div-img">
|
|
||||||
<img class="img-120" src="./flow/sjjgl.png" />
|
<div class="card-item line-top">
|
||||||
</div>
|
<el-badge :value="0" class="item">
|
||||||
</el-badge>
|
<div class="div-img">
|
||||||
<div class="title-text">数据管理</div>
|
<img class="img-120" src="./flow/szgl.png" />
|
||||||
|
</div>
|
||||||
</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>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
|
import LogApi from '@/api/log'
|
||||||
|
let info = reactive({
|
||||||
|
cnt1: 0,
|
||||||
|
cnt2: 0,
|
||||||
|
cnt3: 0
|
||||||
|
})
|
||||||
|
const loadData = () => {
|
||||||
|
LogApi.userRunning().then(d => {
|
||||||
|
let tmps = d.data?.data?.running_operation_list || [];
|
||||||
|
const findCnt = t => {
|
||||||
|
let objs = tmps.filter(it => it.logs_operation_type == t);
|
||||||
|
return objs.length > 0 ? objs[0].operation_count : 0;
|
||||||
|
}
|
||||||
|
info.cnt1 = findCnt("model_compile");
|
||||||
|
info.cnt2 = findCnt("model_infer");
|
||||||
|
info.cnt3 = findCnt("model_report");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
loadData();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss'>
|
<style lang='scss'>
|
||||||
@media screen and (max-width:1440px) {
|
@media screen and (max-width:1440px) {
|
||||||
.model-flow {
|
.model-flow {
|
||||||
padding-left:10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width:1440px) {
|
@media screen and (min-width:1440px) {
|
||||||
.model-flow {
|
.model-flow {
|
||||||
padding-left:60px;
|
padding-left: 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.model-flow {
|
.model-flow {
|
||||||
.row-1 {
|
.row-1 {
|
||||||
.title-text {
|
.title-text {
|
||||||
margin-bottom: 10px;
|
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{
|
.line {
|
||||||
margin-top:60px;
|
position: relative;
|
||||||
.line{
|
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;
|
position: relative;
|
||||||
width:calc(20% - 120px);
|
top: -175px;
|
||||||
text-align: center;
|
left: 60px;
|
||||||
img{
|
}
|
||||||
position: relative;
|
|
||||||
top:30px;
|
&::before {
|
||||||
}
|
display: inline-block;
|
||||||
|
content: " ";
|
||||||
|
height: 25px;
|
||||||
|
width: 2px;
|
||||||
|
border-left: dotted 1px #3399ff;
|
||||||
|
position: absolute;
|
||||||
|
top: -32px;
|
||||||
|
left: 60px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.title-text{
|
|
||||||
margin-top:10px;
|
&:last-child {
|
||||||
}
|
left: 90px;
|
||||||
.card-center{
|
|
||||||
|
&::after {
|
||||||
|
display: inline-block;
|
||||||
|
content: " ";
|
||||||
|
background-image: url('./flow/line2.png');
|
||||||
|
width: 72px;
|
||||||
|
height: 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width:120px;
|
top: -175px;
|
||||||
.card-center-item{
|
left: -10px;
|
||||||
position:absolute;
|
}
|
||||||
width: 120px;
|
|
||||||
top:24px;
|
&::before {
|
||||||
z-index: 9;
|
display: inline-block;
|
||||||
&:first-child{
|
content: " ";
|
||||||
left: -90px;
|
height: 25px;
|
||||||
&::after{
|
width: 2px;
|
||||||
display:inline-block;
|
border-left: dotted 1px #3399ff;
|
||||||
content:" ";
|
position: absolute;
|
||||||
background-image: url('./flow/line1.png');
|
top: -32px;
|
||||||
width: 72px;
|
left: 61px;
|
||||||
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 {
|
.card-item {
|
||||||
width: 120px;
|
&.line-top {
|
||||||
.el-badge__content{
|
&::after {
|
||||||
display: none;
|
display: inline-block;
|
||||||
}
|
content: " ";
|
||||||
&.is-active{
|
border-left: dotted 2px #3399ff;
|
||||||
.div-img{
|
height: 60px;
|
||||||
background: #3399ff;
|
position: relative;
|
||||||
box-shadow: var(--el-box-shadow-light);
|
top: -170px;
|
||||||
&:hover{
|
left: 60px;
|
||||||
background: #3399ff88;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-badge__content{
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.title-text{
|
|
||||||
text-align: center;
|
&::before {
|
||||||
font-weight: bold;
|
display: inline-block;
|
||||||
font-size: 14px;
|
content: " ";
|
||||||
}
|
background-image: url('./flow/arrow.png');
|
||||||
.el-badge{
|
transform: rotate(-90deg);
|
||||||
width: auto;
|
width: 6px;
|
||||||
display: block;
|
height: 6px;
|
||||||
}
|
position: relative;
|
||||||
.div-img{
|
top: -61px;
|
||||||
background: #fff;
|
left: 58px;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
</style>
|
|
@ -1,299 +1,327 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="model-flow">
|
<div class="model-flow">
|
||||||
<el-row class="row-1">
|
<el-row class="row-1">
|
||||||
<div class="card-item">
|
<div class="card-item">
|
||||||
<div class="title-text">任务描述</div>
|
<div class="title-text">任务描述</div>
|
||||||
<el-badge :value="0" class="item">
|
<el-badge :value="0" class="item">
|
||||||
<div class="div-img">
|
<div class="div-img">
|
||||||
<img class="img-150" src="./flow/suanfashangchuan.png" />
|
<img class="img-150" src="./flow/suanfashangchuan.png" />
|
||||||
</div>
|
</div>
|
||||||
</el-badge>
|
</el-badge>
|
||||||
</div>
|
</div>
|
||||||
<div class="line line-right">
|
<div class="line line-right">
|
||||||
</div>
|
</div>
|
||||||
<div class="card-item is-active" >
|
<div class="card-item is-active">
|
||||||
<div class="title-text">算子检查</div>
|
<div class="title-text">算子互联</div>
|
||||||
<el-badge :value="10" class="item">
|
<el-badge :value="0" class="item">
|
||||||
<div class="div-img">
|
<div class="div-img">
|
||||||
<img class="img-150" src="./flow/suanzijiancha.png" />
|
<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>
|
</div>
|
||||||
<el-row class="row-3">
|
</el-badge>
|
||||||
|
</div>
|
||||||
<div class="card-item line-top">
|
|
||||||
<el-badge :value="0" class="item">
|
<div class="line line-right">
|
||||||
<div class="div-img">
|
</div>
|
||||||
<img class="img-120" src="./flow/szgl.png" />
|
|
||||||
</div>
|
<div class="card-item">
|
||||||
</el-badge>
|
<div class="title-text">编译部署</div>
|
||||||
<div class="title-text">算子管理</div>
|
<el-badge :value="0" class="item">
|
||||||
|
<div class="div-img">
|
||||||
</div>
|
<img class="img-150" src="./flow/bybs.png" />
|
||||||
<div class="line"></div>
|
|
||||||
|
</div>
|
||||||
<div class="card-item" >
|
</el-badge>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line line-right">
|
||||||
<div class="card-item card-center">
|
</div>
|
||||||
<div class="card-center-item">
|
<div class="card-item">
|
||||||
<el-badge :value="0" class="item">
|
<div class="title-text">性能采集</div>
|
||||||
<div class="div-img">
|
<el-badge :value="0" class="item">
|
||||||
<img class="img-120" src="./flow/sbgl.png" />
|
<div class="div-img">
|
||||||
</div>
|
<img class="img-150" src="./flow/tlpg.png" />
|
||||||
</el-badge>
|
</div>
|
||||||
<div class="title-text">设备管理</div>
|
</el-badge>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-center-item">
|
|
||||||
<el-badge :value="0" class="item">
|
<div class="line line-right">
|
||||||
<div class="div-img">
|
</div>
|
||||||
<img class="img-120" src="./flow/gjgl.png" />
|
|
||||||
</div>
|
<div class="card-item">
|
||||||
</el-badge>
|
<div class="title-text">评估报告</div>
|
||||||
<div class="title-text">工具管理</div>
|
<el-badge :value="0" class="item">
|
||||||
</div>
|
<div class="div-img">
|
||||||
</div>
|
<img class="img-150" src="./flow/pgbg.png" />
|
||||||
<div class="line"></div>
|
</div>
|
||||||
<div class="card-item" ></div>
|
</el-badge>
|
||||||
<div class="line"></div>
|
</div>
|
||||||
<div class="card-item line-top">
|
|
||||||
<el-badge :value="0" class="item">
|
</el-row>
|
||||||
<div class="div-img">
|
<el-row class="row-3">
|
||||||
<img class="img-120" src="./flow/sjjgl.png" />
|
|
||||||
</div>
|
<div class="card-item line-top">
|
||||||
</el-badge>
|
<el-badge :value="0" class="item">
|
||||||
<div class="title-text">数据集管理</div>
|
<div class="div-img">
|
||||||
|
<img class="img-120" src="./flow/szgl.png" />
|
||||||
</div>
|
</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>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang='ts' setup>
|
<script lang='ts' setup>
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss'>
|
<style lang='scss'>
|
||||||
@media screen and (max-width:1440px) {
|
@media screen and (max-width:1440px) {
|
||||||
.model-flow {
|
.model-flow {
|
||||||
padding-left:10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width:1440px) {
|
@media screen and (min-width:1440px) {
|
||||||
.model-flow {
|
.model-flow {
|
||||||
padding-left:60px;
|
padding-left: 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.model-flow {
|
.model-flow {
|
||||||
.row-1 {
|
.row-1 {
|
||||||
.title-text {
|
.title-text {
|
||||||
margin-bottom: 10px;
|
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{
|
.line {
|
||||||
margin-top:60px;
|
position: relative;
|
||||||
.line{
|
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;
|
position: relative;
|
||||||
width:calc(20% - 120px);
|
top: -175px;
|
||||||
text-align: center;
|
left: 60px;
|
||||||
img{
|
}
|
||||||
position: relative;
|
|
||||||
top:30px;
|
&::before {
|
||||||
}
|
display: inline-block;
|
||||||
|
content: " ";
|
||||||
|
height: 25px;
|
||||||
|
width: 2px;
|
||||||
|
border-left: dotted 1px #3399ff;
|
||||||
|
position: absolute;
|
||||||
|
top: -32px;
|
||||||
|
left: 60px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.title-text{
|
|
||||||
margin-top:10px;
|
&:last-child {
|
||||||
}
|
left: 90px;
|
||||||
.card-center{
|
|
||||||
|
&::after {
|
||||||
|
display: inline-block;
|
||||||
|
content: " ";
|
||||||
|
background-image: url('./flow/line2.png');
|
||||||
|
width: 72px;
|
||||||
|
height: 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width:120px;
|
top: -175px;
|
||||||
.card-center-item{
|
left: -10px;
|
||||||
position:absolute;
|
}
|
||||||
width: 120px;
|
|
||||||
top:24px;
|
&::before {
|
||||||
z-index: 9;
|
display: inline-block;
|
||||||
&:first-child{
|
content: " ";
|
||||||
left: -90px;
|
height: 25px;
|
||||||
&::after{
|
width: 2px;
|
||||||
display:inline-block;
|
border-left: dotted 1px #3399ff;
|
||||||
content:" ";
|
position: absolute;
|
||||||
background-image: url('./flow/line1.png');
|
top: -32px;
|
||||||
width: 72px;
|
left: 61px;
|
||||||
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 {
|
.card-item {
|
||||||
width: 120px;
|
&.line-top {
|
||||||
.el-badge__content{
|
&::after {
|
||||||
display: none;
|
display: inline-block;
|
||||||
}
|
content: " ";
|
||||||
&.is-active{
|
border-left: dotted 2px #3399ff;
|
||||||
.div-img{
|
height: 60px;
|
||||||
background: #3399ff;
|
position: relative;
|
||||||
box-shadow: var(--el-box-shadow-light);
|
top: -170px;
|
||||||
&:hover{
|
left: 60px;
|
||||||
background: #3399ff88;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-badge__content{
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.title-text{
|
|
||||||
text-align: center;
|
&::before {
|
||||||
font-weight: bold;
|
display: inline-block;
|
||||||
font-size: 14px;
|
content: " ";
|
||||||
}
|
background-image: url('./flow/arrow.png');
|
||||||
.el-badge{
|
transform: rotate(-90deg);
|
||||||
width: auto;
|
width: 6px;
|
||||||
display: block;
|
height: 6px;
|
||||||
}
|
position: relative;
|
||||||
.div-img{
|
top: -61px;
|
||||||
background: #fff;
|
left: 58px;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
</style>
|
|
@ -278,9 +278,9 @@ function uploadFile(file) {
|
||||||
|
|
||||||
// 文件上传
|
// 文件上传
|
||||||
function handleFileChange(file, b) {
|
function handleFileChange(file, b) {
|
||||||
if (file.file.size > 10 * 1024 * 1024) {
|
if (file.file.size > 500 * 1024 * 1024) {
|
||||||
ElMessage.warning("文件大小不能超10M");
|
ElMessage.warning("文件大小不能超500M");
|
||||||
file.onError("文件大小不能超10M")
|
file.onError("文件大小不能超500M")
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let ext = file.file.name.split(".").pop().toLowerCase();
|
let ext = file.file.name.split(".").pop().toLowerCase();
|
||||||
|
|
|
@ -47,8 +47,7 @@
|
||||||
<el-table-column label="量化和编译参数" align="left" prop="tool_params_name" width="160">
|
<el-table-column label="量化和编译参数" align="left" prop="tool_params_name" width="160">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<span class="args-state state-2 command" @click.stop="doChoice(scope.row)" v-if="scope.row.available">{{
|
<span class="args-state state-2 command" @click.stop="doChoice(scope.row)" v-if="scope.row.available">{{
|
||||||
scope.row.tool_params_name ? scope.row.tool_params_name : "请选择"
|
scope.row.tool_params_name ? scope.row.tool_params_name : "请选择" }}</span>
|
||||||
}}</span>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="设备状态" align="center" width="100">
|
<el-table-column label="设备状态" align="center" width="100">
|
||||||
|
|
Loading…
Reference in New Issue