@ -18,7 +18,7 @@
< block -box >
< ul class = "card-gauges" >
< li v-for ="(item, index) in gaugeConfig " :key ="index" >
< li v-for ="(item, index) in gaugeConfig .slice(-3) " :key ="index" >
< template v-if ="!detail.isExternal || index >= 2" >
< Gauge v -bind = " item " / >
< / template >
@ -39,14 +39,11 @@
< time -picker v -model = " times " type = "datetimerange" size = "small" / >
< / template >
< div style = "height: 200px" >
< echarts -plus
: options = "
getRangeOptions ( {
core : gaugeConfig [ 0 ] . data ,
memory : gaugeConfig [ 1 ] . data ,
} )
"
/ >
< echarts -plus : options = " getRangeOptions ( {
core : gaugeConfig [ 0 ] . data ,
memory : gaugeConfig [ 1 ] . data ,
} )
" / >
< / div >
< / b l o c k - b o x >
< block -box title = "资源使用趋势（%） >
@ -54,14 +51,11 @@
< time -picker v -model = " times " type = "datetimerange" size = "small" / >
< / template >
< div style = "height: 200px" >
< echarts -plus
: options = "
getRangeOptions ( {
core : gaugeConfig [ 2 ] . data ,
memory : gaugeConfig [ 3 ] . data ,
} )
"
/ >
< echarts -plus : options = " getRangeOptions ( {
core : gaugeConfig [ 2 ] . data ,
memory : gaugeConfig [ 3 ] . data ,
} )
" / >
< / div >
< / b l o c k - b o x >
@ -93,7 +87,7 @@ import { useRoute } from 'vue-router';
import BlockBox from '@/components/BlockBox.vue' ;
import { onMounted , ref , watch , defineProps } from 'vue' ;
import TaskList from '~/vgpu/views/task/admin/index.vue' ;
import { ElPopover } from 'element-plus' ;
import { ElPopover } from 'element-plus' ;
import Gauge from '~/vgpu/components/gauge.vue' ;
import useInstantVector from '~/vgpu/hooks/useInstantVector' ;
import { QuestionFilled } from '@element-plus/icons-vue' ;
@ -134,36 +128,36 @@ const columns = [
const text = health ? '健康' : '硬件错误' ;
const color = health ? '#2563eb' : '#EF4444' ;
return (
< div
style = { {
color ,
position : 'relative' ,
display : 'inline-flex' ,
alignItems : 'center' ,
justifyContent : 'center' ,
gap : '5px' ,
< div
style = { {
color ,
position : 'relative' ,
display : 'inline-flex' ,
alignItems : 'center' ,
justifyContent : 'center' ,
gap : '5px' ,
} }
>
< el -tag disable -transitions type = { isExternal ? 'warning' : ( health ? 'success' : 'danger' ) } >
{ isExternal ? '未纳管' : ( health ? '健康' : '硬件错误' ) }
< / e l - t a g >
{ ! health && (
< ElPopover trigger = "hover" popper -style = {{ width : ' 190px ' }} >
{ {
reference : ( ) => (
< el -icon color = "#939EA9" size = "14" >
< QuestionFilled / >
< / e l - i c o n >
) ,
default : ( ) => (
< span style = { { marginLeft : '5px' } } >
请排查该 GPU 硬件问题
< / span >
) ,
} }
>
< el -tag disable -transitions type = { isExternal ? 'warning' : ( health ? 'success' : 'danger' ) } >
{ isExternal ? '未纳管' : ( health ? '健康' : '硬件错误' ) }
< / e l - t a g >
{ ! health && (
< ElPopover trigger = "hover" popper -style = {{ width : ' 190px ' }} >
{ {
reference : ( ) => (
< el -icon color = "#939EA9" size = "14" >
< QuestionFilled / >
< / e l - i c o n >
) ,
default : ( ) => (
< span style = { { marginLeft : '5px' } } >
请排查该 GPU 硬件问题
< / span >
) ,
} }
< / ElPopover >
) }
< / div >
< / ElPopover >
) }
< / div >
) ;
} else {
return < el -tag disable -transitions size = "small" type = "info" > 加载中 ... < / e l - t a g > ;
@ -201,9 +195,9 @@ const columns = [
width : 120 ,
value : 'mode' ,
render : ( { mode , type } ) => (
< el -tag disable -transitions >
{ type ? . split ( '-' ) [ 0 ] === "NVIDIA" ? mode : 'default' }
< / e l - t a g >
< el -tag disable -transitions >
{ type ? . split ( '-' ) [ 0 ] === "NVIDIA" ? mode : 'default' }
< / e l - t a g >
)
}
] ;
@ -362,9 +356,11 @@ watch(
/ / l i n e - h e i g h t : 2 0 p x ;
margin - bottom : 20 px ;
}
. card - detail - left {
min - width : 1050 px ;
}
. card - detail - info {
/ / d i s p l a y : f l e x ;
/ / f l e x - d i r e c t i o n : c o l u m n ;
@ -393,6 +389,7 @@ watch(
list - style : none ;
display : flex ;
height : 200 px ;
li {
flex : 1 ;
}
@ -407,6 +404,7 @@ watch(
. node - block {
display : flex ;
flex - direction : column ;
. home - block - content {
flex : 1 ;
}
