sxyanzhu
/
AIManage
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update code

main
haha 2024-05-25 15:30:33 +08:00
parent 019b501687
commit d9d0e6ad8d
2 changed files with 97 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/dashboard/components/ModelFlow.vue
View File

@ -60,9 +60,11 @@
<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>
<img class="img-120" src="./flow/szgl.png" />
</div>
</el-badge>
<div class="title-text">算子管理</div>
</div>
@ -73,15 +75,19 @@
<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>
@ -89,9 +95,11 @@
<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>
@ -166,6 +174,7 @@
position:absolute;
width: 120px;
top:24px;
z-index: 9;
&:first-child{
left: -90px;
&::after{
@ -175,7 +184,7 @@
width: 72px;
height: 40px;
position: relative;
top:-165px;
top:-175px;
left:60px;
}
&::before{
@ -198,7 +207,7 @@
width: 72px;
height: 40px;
position: relative;
top:-165px;
top:-175px;
left:-10px;
}
&::before{
@ -222,7 +231,7 @@
border-left:dotted 2px #3399ff;
height: 60px;
position: relative;
top:-160px;
top:-170px;
left:60px;
}
&::before{

88
src/views/dashboard/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="dashboard-container">
<div class="dashboard-container" :class="isSmallScreen?'is-small':''">
<!-- github角标 -->
<el-row :gutter="10" class="mt-3" style="margin-bottom: 12px;">
<el-col :span="4" v-for="(it, idx) in topInfos" :key="idx">
@ -18,12 +18,12 @@
<template #header>
<div class="row2-top">
<div style="color:#333;font-weight: bold;font-size:15px;">设备运行状态</div>
<div class="div-more" v-if="1==2">更多</div>
<div class="div-more" v-if="false">更多</div>
</div>
</template>
<el-scrollbar max-height="504px">
<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-col :span="isSmallScreen?8:6" v-for="it in devInfos" :key="it.id" class="dev-item" style="margin-bottom: 20px;">
<el-card shadow="hover">
<template #header>
<div class="dev-title">{{ it.name }}
@ -83,7 +83,7 @@
<ModelFlow/>
</el-card>
</div>
<div style="min-width: 300px;padding-left:12px;">
<div style="" class="right-panel">
<el-card shadow="never" class="top-row2 notice-card">
<template #header>
<div class="row2-top">
@ -137,6 +137,18 @@ let devInfos = reactive([
{ 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 },
])
const winWidth=ref(0)
const isSmallScreen=computed(()=>{
return winWidth.value<1440;
});
onMounted(()=>{
winWidth.value=window.outerWidth;
window.onresize=()=>{
setTimeout(()=>{
winWidth.value=window.outerWidth;
},100);
}
});
</script>
<style lang="scss" scoped>
@ -144,6 +156,9 @@ let devInfos = reactive([
position: relative;
min-width:960px;
padding: 0px 24px;
&.is-small{
padding: 0px 12px;
}
.user-avatar {
width: 40px;
@ -177,6 +192,69 @@ let devInfos = reactive([
</style>
<style lang="scss">
.dashboard-container {
&.is-small{
.dev-row3 {
padding:0px !important;
.device-state{
width:80px !important;
}
}
.right-panel{
min-width: 240px;
padding-left:8px;
}
.model-flow {
.card-item{
width:100px;
}
.row-1 {
.line{
width: calc(20% - 100px);
top:10px;
}
}
.row-3 {
.line{
width: calc(20% - 100px);
}
.card-center{
.card-center-item{
width:100px;
&:first-child{
&::after{
left:50px;
}
&::before{
left:50px;
}
}
&:last-child{
&::after{
left:-20px;
}
&::before{
left:51px;
}
}
}
}
.card-item{
&.line-top{
&::after{
left:50px;
}
&::before{
left:48px;
}
}
}
}
}
}
.right-panel{
min-width: 300px;
padding-left:12px;
}
.el-card__body {
padding: 10px 10px;
}