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)=>{
|
||||
return request({
|
||||
|
|
@ -33,6 +40,7 @@ export default {
|
|||
serverState,
|
||||
userOperationNotice,
|
||||
userOperation,
|
||||
compileDeploy
|
||||
compileDeploy,
|
||||
userRunning
|
||||
|
||||
}
|
||||
|
|
@ -1,299 +1,347 @@
|
|||
<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>
|
||||
<div class="model-flow">{{ info }}
|
||||
<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 ">
|
||||
<div class="title-text">算子互联</div>
|
||||
<el-badge :value="0" class="item">
|
||||
<div class="div-img">
|
||||
<img class="img-150" src="./flow/suanzijiancha.png" />
|
||||
|
||||
</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>
|
||||
</div>
|
||||
</el-badge>
|
||||
</div>
|
||||
|
||||
<div class="line line-right">
|
||||
</div>
|
||||
|
||||
<div class="card-item" :class="info.cnt1 > 0 ? 'is-active' : ''">
|
||||
<div class="title-text">编译部署</div>
|
||||
<el-badge :value="info.cnt1" 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" :class="info.cnt2 > 0 ? 'is-active' : ''">
|
||||
<div class="title-text">推理评估</div>
|
||||
<el-badge :value="info.cnt2" 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" :class="info.cnt3 > 0 ? 'is-active' : ''">
|
||||
<div class="title-text">评估报告</div>
|
||||
<el-badge :value="info.cnt3" 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>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
<style lang='scss'>
|
||||
@media screen and (max-width:1440px) {
|
||||
.model-flow {
|
||||
padding-left:10px;
|
||||
}
|
||||
.model-flow {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:1440px) {
|
||||
.model-flow {
|
||||
padding-left:60px;
|
||||
}
|
||||
.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-1 {
|
||||
.title-text {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.row-3{
|
||||
margin-top:60px;
|
||||
.line{
|
||||
|
||||
.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;
|
||||
width:calc(20% - 120px);
|
||||
text-align: center;
|
||||
img{
|
||||
position: relative;
|
||||
top:30px;
|
||||
}
|
||||
top: -175px;
|
||||
left: 60px;
|
||||
}
|
||||
|
||||
&::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;
|
||||
}
|
||||
.card-center{
|
||||
|
||||
&:last-child {
|
||||
left: 90px;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
content: " ";
|
||||
background-image: url('./flow/line2.png');
|
||||
width: 72px;
|
||||
height: 40px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
&.line-top {
|
||||
&::after {
|
||||
display: inline-block;
|
||||
content: " ";
|
||||
border-left: dotted 2px #3399ff;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
top: -170px;
|
||||
left: 60px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
&::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>
|
||||
|
|
@ -1,299 +1,327 @@
|
|||
<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>
|
||||
<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="0" class="item">
|
||||
<div class="div-img">
|
||||
<img class="img-150" src="./flow/suanzijiancha.png" />
|
||||
|
||||
</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>
|
||||
</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>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
@media screen and (max-width:1440px) {
|
||||
.model-flow {
|
||||
padding-left:10px;
|
||||
}
|
||||
.model-flow {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:1440px) {
|
||||
.model-flow {
|
||||
padding-left:60px;
|
||||
}
|
||||
.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-1 {
|
||||
.title-text {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.row-3{
|
||||
margin-top:60px;
|
||||
.line{
|
||||
|
||||
.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;
|
||||
width:calc(20% - 120px);
|
||||
text-align: center;
|
||||
img{
|
||||
position: relative;
|
||||
top:30px;
|
||||
}
|
||||
top: -175px;
|
||||
left: 60px;
|
||||
}
|
||||
|
||||
&::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;
|
||||
}
|
||||
.card-center{
|
||||
|
||||
&:last-child {
|
||||
left: 90px;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
content: " ";
|
||||
background-image: url('./flow/line2.png');
|
||||
width: 72px;
|
||||
height: 40px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
&.line-top {
|
||||
&::after {
|
||||
display: inline-block;
|
||||
content: " ";
|
||||
border-left: dotted 2px #3399ff;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
top: -170px;
|
||||
left: 60px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
&::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>
|
||||
|
|
@ -278,9 +278,9 @@ function uploadFile(file) {
|
|||
|
||||
// 文件上传
|
||||
function handleFileChange(file, b) {
|
||||
if (file.file.size > 10 * 1024 * 1024) {
|
||||
ElMessage.warning("文件大小不能超10M");
|
||||
file.onError("文件大小不能超10M")
|
||||
if (file.file.size > 500 * 1024 * 1024) {
|
||||
ElMessage.warning("文件大小不能超500M");
|
||||
file.onError("文件大小不能超500M")
|
||||
return;
|
||||
}
|
||||
let ext = file.file.name.split(".").pop().toLowerCase();
|
||||
|
|
|
|||
|
|
@ -47,8 +47,7 @@
|
|||
<el-table-column label="量化和编译参数" align="left" prop="tool_params_name" width="160">
|
||||
<template #default="scope">
|
||||
<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 : "请选择"
|
||||
}}</span>
|
||||
scope.row.tool_params_name ? scope.row.tool_params_name : "请选择" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备状态" align="center" width="100">
|
||||
|
|
|
|||
Loading…
Reference in New Issue