update code

main
haha 2024-08-20 20:39:44 +08:00
parent 86faa6878b
commit f43647068d
5 changed files with 633 additions and 550 deletions

View File

@ -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
} }

View File

@ -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>

View File

@ -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>

View File

@ -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();

View File

@ -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">