@ -26,31 +26,31 @@
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-heartbeat" > < / i > 设备编号
< i class = "fas fa-heartbeat" > < / i > 设备编号
< / span >
< / span >
< span class = "info-value" > { { details . equNumber || '暂无' } } < / span >
< span class = "info-value" : title = "details.equNumber || '暂无'" > { { details . equNumber || '暂无' } } < / span >
< / div >
< / div >
< div class = "info-item" >
< div class = "info-item" >
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-layer-group" > < / i > 固件版本
< i class = "fas fa-layer-group" > < / i > 固件版本
< / span >
< / span >
< span class = "info-value" > { { details . version || '暂无' } } < / span >
< span class = "info-value" : title = "details.version || '暂无'" > { { details . version || '暂无' } } < / span >
< / div >
< / div >
< div class = "info-item" >
< div class = "info-item" >
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-layer-group" > < / i > 设备级别
< i class = "fas fa-layer-group" > < / i > 设备级别
< / span >
< / span >
< span class = "info-value" > { { details . deviceLevel || '暂无' } } 级 < / span >
< span class = "info-value" : title = "(details.deviceLevel || '暂无') + '级'" > { { details . deviceLevel || '暂无' } } 级 < / span >
< / div >
< / div >
< div class = "info-item" >
< div class = "info-item" >
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-map-marker-alt" > < / i > 安装位置
< i class = "fas fa-map-marker-alt" > < / i > 安装位置
< / span >
< / span >
< span class = "info-value" > { { details . location || '暂无' } } < / span >
< span class = "info-value" : title = "details.location || '暂无'" > { { details . location || '暂无' } } < / span >
< / div >
< / div >
< div class = "info-item" >
< div class = "info-item" >
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-tag" > < / i > 品牌型号
< i class = "fas fa-tag" > < / i > 品牌型号
< / span >
< / span >
< span class = "info-value" > { { details . brand || '暂无' } } < / span >
< span class = "info-value" : title = "details.brand || '暂无'" > { { details . brand || '暂无' } } < / span >
< / div >
< / div >
< / div >
< / div >
@ -62,33 +62,33 @@
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-layer-group" > < / i > 生产厂商名称
< i class = "fas fa-layer-group" > < / i > 生产厂商名称
< / span >
< / span >
< span class = "info-value" > { { details . equManuName || '暂无' } } < / span >
< span class = "info-value" : title = "details.equManuName || '暂无'" > { { details . equManuName || '暂无' } } < / span >
< / div >
< / div >
< div class = "info-item" >
< div class = "info-item" >
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-map-marker-alt" > < / i > 供货商名称
< i class = "fas fa-map-marker-alt" > < / i > 供货商名称
< / span >
< / span >
< span class = "info-value" > { { details . supplierName || '暂无' } } < / span >
< span class = "info-value" : title = "details.supplierName || '暂无'" > { { details . supplierName || '暂无' } } < / span >
< / div >
< / div >
< div class = "info-item" >
< div class = "info-item" >
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-tag" > < / i > 供货商联系人
< i class = "fas fa-tag" > < / i > 供货商联系人
< / span >
< / span >
< span class = "info-value" > { { details . contactBy || '暂无' } } < / span >
< span class = "info-value" : title = "details.contactBy || '暂无'" > { { details . contactBy || '暂无' } } < / span >
< / div >
< / div >
< div class = "info-item" >
< div class = "info-item" >
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-heartbeat" > < / i > 供货商联系电话
< i class = "fas fa-heartbeat" > < / i > 供货商联系电话
< / span >
< / span >
< span class = "info-value" > { { details . contactWay || '暂无' } } < / span >
< span class = "info-value" : title = "details.contactWay || '暂无'" > { { details . contactWay || '暂无' } } < / span >
< / div >
< / div >
< div class = "info-item" >
< div class = "info-item" >
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-heartbeat" > < / i > 质保时间
< i class = "fas fa-heartbeat" > < / i > 质保时间
< / span >
< / span >
< span class = "info-value" > { { details . warranty || '暂无' } } < / span >
< span class = "info-value" : title = "details.warranty || '暂无'" > { { details . warranty || '暂无' } } < / span >
< / div >
< / div >
< / div >
< / div >
@ -100,7 +100,7 @@
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-layer-group" > < / i > 带外管理IP
< i class = "fas fa-layer-group" > < / i > 带外管理IP
< / span >
< / span >
< span class = "info-value" > { { details . ip || '暂无' } } < / span >
< span class = "info-value" : title = "details.ip || '暂无'" > { { details . ip || '暂无' } } < / span >
< / div >
< / div >
< div class = "info-item" >
< div class = "info-item" >
< span class = "info-label" >
< span class = "info-label" >
@ -112,13 +112,13 @@
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-layer-group" > < / i > 安装日期
< i class = "fas fa-layer-group" > < / i > 安装日期
< / span >
< / span >
< span class = "info-value" > { { details . installDate || '暂无' } } < / span >
< span class = "info-value" : title = "details.installDate || '暂无'" > { { details . installDate || '暂无' } } < / span >
< / div >
< / div >
< div class = "info-item" >
< div class = "info-item" >
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-layer-group" > < / i > 管理员
< i class = "fas fa-layer-group" > < / i > 管理员
< / span >
< / span >
< span class = "info-value" > { { details . inCharge || '暂无' } } < / span >
< span class = "info-value" : title = "details.inCharge || '暂无'" > { { details . inCharge || '暂无' } } < / span >
< / div >
< / div >
< / div >
< / div >
@ -129,19 +129,19 @@
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-layer-group" > < / i > 设备持续运行时长
< i class = "fas fa-layer-group" > < / i > 设备持续运行时长
< / span >
< / span >
< span class = "info-value" > { { formatDuration ( details . contWorkPeriod ) || '暂无' } } < / span >
< span class = "info-value" : title = "formatDuration(details.contWorkPeriod) || '暂无'" > { { formatDuration ( details . contWorkPeriod ) || '暂无' } } < / span >
< / div >
< / div >
< div class = "info-item" >
< div class = "info-item" >
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-layer-group" > < / i > 待处理预警数
< i class = "fas fa-layer-group" > < / i > 待处理预警数
< / span >
< / span >
< span class = "info-value" > { { details . unhandledAlertCount || '暂无' } } < / span >
< span class = "info-value" : title = "details.unhandledAlertCount || '暂无'" > { { details . unhandledAlertCount || '暂无' } } < / span >
< / div >
< / div >
< div class = "info-item" >
< div class = "info-item" >
< span class = "info-label" >
< span class = "info-label" >
< i class = "fas fa-layer-group" > < / i > 预警总数
< i class = "fas fa-layer-group" > < / i > 预警总数
< / span >
< / span >
< span class = "info-value" > { { details . alertCount || '暂无' } } < / span >
< span class = "info-value" : title = "details.alertCount || '暂无'" > { { details . alertCount || '暂无' } } < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
@ -175,23 +175,102 @@
< / e l - c o l >
< / e l - c o l >
< / e l - c o l >
< / e l - c o l >
< el -col :span ="24" >
< el -col :span ="24" >
< el -col :span ="12" >
< div class = "health-indicators" >
< div ref = "usedmemory" style = "height: 150px" / >
< el -row :gutter ="16" >
< / e l - c o l >
<!-- 温度 -- >
< el -col :span ="12" >
< el -col :span ="8" >
< div ref = "usedmemory2" style = "height: 150px" / >
< div class = "health-card" >
< / e l - c o l >
< div class = "health-header" >
< div class = "health-icon" :class ="getTemperatureClass(details.temperature)" >
< el -col :span ="8" >
< i class = "el-icon-odometer" > < / i >
< div ref = "usedmemory3" style = "height: 120px" / >
< / div >
< / e l - c o l >
< div class = "health-label" > 当前温度 < / div >
< el -col :span ="8" >
< / div >
< div ref = "usedmemory4" style = "height: 120px" / >
< div class = "health-circle" :class ="getTemperatureClass(details.temperature)" >
< / e l - c o l >
< div class = "health-value" :class ="getTemperatureClass(details.temperature)" > { { details . temperature || '暂无' } } < / div >
< el -col :span ="8" >
< div class = "health-unit" > ℃ < / div >
< div ref = "usedmemory5" style = "height: 120px" / >
< / div >
< / e l - c o l >
< / div >
< / e l - c o l >
<!-- CPU使用率 -- >
< el -col :span ="8" >
< div class = "health-card" >
< div class = "health-header" >
< div class = "health-icon" :class ="getUtilizationClass(details.cpuUtilization)" >
< i class = "el-icon-cpu" > < / i >
< / div >
< div class = "health-label" > CPU使用率 < / div >
< / div >
< div class = "health-circle" :class ="getUtilizationClass(details.cpuUtilization)" >
< div class = "health-value" :class ="getUtilizationClass(details.cpuUtilization)" > { { details . cpuUtilization || '暂无' } } < / div >
< div class = "health-unit" > % < / div >
< / div >
< / div >
< / e l - c o l >
<!-- 内存使用率 -- >
< el -col :span ="8" >
< div class = "health-card" >
< div class = "health-header" >
< div class = "health-icon" :class ="getUtilizationClass(details.memoryUtilization)" >
< i class = "el-icon-thumb" > < / i >
< / div >
< div class = "health-label" > 内存使用率 < / div >
< / div >
< div class = "health-circle" :class ="getUtilizationClass(details.memoryUtilization)" >
< div class = "health-value" :class ="getUtilizationClass(details.memoryUtilization)" > { { details . memoryUtilization || '暂无' } } < / div >
< div class = "health-unit" > % < / div >
< / div >
< / div >
< / e l - c o l >
<!-- 健康度 -- >
< el -col :span ="8" >
< div class = "health-card" >
< div class = "health-header" >
< div class = "health-icon" :class ="getHealthClass(Number(details.health))" >
< i class = "el-icon-orange" > < / i >
< / div >
< div class = "health-label" > 当前健康度 < / div >
< / div >
< div class = "health-circle" :class ="getHealthClass(Number(details.health))" >
< div class = "health-value" :class ="getHealthClass(Number(details.health))" > { { Number ( details . health ) == 1 ? '健康' : Number ( details . health ) == 2 ? '良好' : Number ( details . health ) == 3 ? '一般' : Number ( details . health ) == 4 ? '需维护' : '暂无' } } < / div >
< div class = "health-unit" > < / div >
< / div >
< / div >
< / e l - c o l >
<!-- volIn -- >
< el -col :span ="8" >
< div class = "health-card" >
< div class = "health-header" >
< div class = "health-icon system-color" >
< i class = "el-icon-s-data" > < / i >
< / div >
< div class = "health-label" > 当前流量输入值 < / div >
< / div >
< div class = "health-circle system-color" >
< div class = "health-value system-color" > { { details . volIn ? parseInt ( details . volIn ) : '暂无' } } < / div >
< div class = "health-unit" > L / min < / div >
< / div >
< / div >
< / e l - c o l >
<!-- volOut -- >
< el -col :span ="8" >
< div class = "health-card" >
< div class = "health-header" >
< div class = "health-icon system-color" >
< i class = "el-icon-s-data" > < / i >
< / div >
< div class = "health-label" > 当前流量输出值 < / div >
< / div >
< div class = "health-circle system-color" >
< div class = "health-value system-color" > { { details . volOut ? parseInt ( details . volOut ) : '暂无' } } < / div >
< div class = "health-unit" > L / min < / div >
< / div >
< / div >
< / e l - c o l >
< / e l - r o w >
< / div >
< / e l - c o l >
< / e l - c o l >
<!-- 图表模块已删除 -- >
< / e l - r o w >
< / e l - r o w >
< / div >
< / div >
@ -206,19 +285,19 @@
< / div >
< / div >
< div class = "metrics-grid" >
< div class = "metrics-grid" >
< div class = "bottom-item scroll-height-50 0" v-if ="tabIndex == 0" >
< div class = "bottom-item scroll-height-68 0" v-if ="tabIndex == 0" >
< History :dsId ="dsId" / >
< History :dsId ="dsId" / >
< / div >
< / div >
< div class = "bottom-item scroll-height-50 0" v-if ="tabIndex == 1" >
< div class = "bottom-item scroll-height-68 0" v-if ="tabIndex == 1" >
< Interface :dsId ="dsId" / >
< Interface :dsId ="dsId" / >
< / div >
< / div >
< div class = "bottom-item scroll-height-50 0" v-if ="tabIndex == 2" >
< div class = "bottom-item scroll-height-68 0" v-if ="tabIndex == 2" >
< Vlan :dsId ="dsId" / >
< Vlan :dsId ="dsId" / >
< / div >
< / div >
< div class = "bottom-item scroll-height-50 0" v-if ="tabIndex == 3" >
< div class = "bottom-item scroll-height-68 0" v-if ="tabIndex == 3" >
< Routing :dsId ="dsId" / >
< Routing :dsId ="dsId" / >
< / div >
< / div >
< div class = "bottom-item scroll-height-50 0" v-if ="tabIndex == 4" >
< div class = "bottom-item scroll-height-68 0" v-if ="tabIndex == 4" >
< Veneer :dsId ="dsId" / >
< Veneer :dsId ="dsId" / >
< / div >
< / div >
< / div >
< / div >
@ -247,7 +326,7 @@ export default {
components : { History , Interface , Vlan , Routing , LineChart , Veneer } ,
components : { History , Interface , Vlan , Routing , LineChart , Veneer } ,
data ( ) {
data ( ) {
return {
return {
DateValue : [ dayjs ( ) . subtract ( 1 , 'month ' ) . format ( 'YYYY-MM-DD HH:mm:ss' ) , dayjs ( ) . format ( 'YYYY-MM-DD HH:mm:ss' ) ] ,
DateValue : [ dayjs ( ) . subtract ( 1 , 'week ' ) . format ( 'YYYY-MM-DD HH:mm:ss' ) , dayjs ( ) . format ( 'YYYY-MM-DD HH:mm:ss' ) ] ,
selectedTab : 1 ,
selectedTab : 1 ,
tabs : [
tabs : [
{ name : '历史预警' } ,
{ name : '历史预警' } ,
@ -289,306 +368,7 @@ mounted() {
/ / 性 能 图 表
/ / 性 能 图 表
let details = this . historyQueryData ;
let details = this . historyQueryData ;
const combinedPerformanceChart = echarts . init ( document . getElementById ( 'combinedPerformanceChart' ) ) ;
const combinedPerformanceChart = echarts . init ( document . getElementById ( 'combinedPerformanceChart' ) ) ;
const usedmemory = echarts . init ( this . $refs . usedmemory , "macarons" )
/ / 已 删 除 u s e d m e m o r y 系 列 图 表 的 初 始 化 代 码
const usedmemory2 = echarts . init ( this . $refs . usedmemory2 , "macarons" )
const usedmemory3 = echarts . init ( this . $refs . usedmemory3 , "macarons" )
const usedmemory4 = echarts . init ( this . $refs . usedmemory4 , "macarons" )
const usedmemory5 = echarts . init ( this . $refs . usedmemory5 , "macarons" )
const chartData = { min : 0 , max : 100 , value : 70 } ;
usedmemory . setOption ( {
series : [
{
type : 'gauge' ,
center : [ '50%' , '60%' ] ,
radius : '90%' ,
min : chartData . min ,
max : chartData . max ,
startAngle : 220 ,
endAngle : - 40 ,
splitNumber : 8 ,
axisLine : {
lineStyle : {
color : [
[ 0.25 , '#7afeaf' ] ,
[ 0.5 , '#58d9f9' ] ,
[ 0.75 , '#fbdd5e' ] ,
[ 1 , '#f03b44' ] ,
] ,
width : 10 ,
} ,
} ,
splitLine : {
/ / 分 隔 线
show : true ,
length : 15 ,
distance : 10 ,
lineStyle : {
width : 2 ,
color : 'auto' ,
} ,
} ,
axisTick : {
/ / 刻 度 线 样 式 ( 及 短 线 样 式 )
show : true ,
lineStyle : {
width : 2 ,
color : 'auto' ,
} ,
length : 10 ,
distance : 10 ,
} ,
axisLabel : false ,
detail : {
fontSize : '16' ,
formatter : '{value}℃' ,
color : 'auto' ,
offsetCenter : [ '0' , '0%' ] ,
} ,
pointer : {
icon : 'triangle' ,
show : true ,
offsetCenter : [ 0 , '-70%' ] ,
itemStyle : {
color : 'auto' ,
} ,
length : '10%' ,
width : '3%' ,
} ,
data : [
{
value : this . details . temperature ,
name : '温度' ,
title : {
show : true ,
color : '#606266' ,
offsetCenter : [ 0 , '70%' ] ,
fontSize : 18 ,
}
} ,
] ,
}
]
} )
usedmemory2 . setOption ( {
series : [
{
type : 'gauge' ,
center : [ '50%' , '60%' ] ,
radius : '90%' ,
min : chartData . min ,
max : chartData . max ,
startAngle : 220 ,
endAngle : - 40 ,
splitNumber : 8 ,
axisLine : {
lineStyle : {
color : [
[ 0.25 , '#f03b44' ] ,
[ 0.5 , '#fbdd5e' ] ,
[ 0.75 , '#58d9f9' ] ,
[ 1 , '#7afeaf' ] ,
] ,
width : 10 ,
} ,
} ,
splitLine : {
/ / 分 隔 线
show : true ,
length : 15 ,
distance : 10 ,
lineStyle : {
width : 2 ,
color : 'auto' ,
} ,
} ,
axisTick : {
/ / 刻 度 线 样 式 ( 及 短 线 样 式 )
show : true ,
lineStyle : {
width : 2 ,
color : 'auto' ,
} ,
length : 10 ,
distance : 10 ,
} ,
axisLabel : false ,
detail : {
fontSize : '16' ,
formatter : '{value}' ,
color : 'auto' ,
offsetCenter : [ '0' , '0%' ] ,
} ,
pointer : {
icon : 'triangle' ,
show : true ,
offsetCenter : [ 0 , '-70%' ] ,
itemStyle : {
color : 'auto' ,
} ,
length : '10%' ,
width : '3%' ,
} ,
data : [
{
value : this . details . health == 1 ? '100' : this . details . health == 2 ? '75' : this . details . health == 3 ? '50' : this . details . health == 4 ? '25' : '0' ,
name : '健康度' ,
title : {
show : true ,
color : '#606266' ,
offsetCenter : [ 0 , '70%' ] ,
fontSize : 18 ,
}
} ,
] ,
}
]
} )
usedmemory3 . setOption ( {
title : [
{
text : 'CPU占用' ,
left : '45%' ,
top : '55%' ,
textAlign : 'center' ,
textStyle : {
fontSize : '14' ,
fontWeight : '400' ,
color : '#6AA0E4' ,
textAlign : 'center' ,
textShadowColor : '#000' ,
} ,
} ,
] ,
series : {
type : 'pie' ,
radius : [ '90%' , "100%" ] ,
hoverAnimation : false ,
data : [
{
value : this . details . cpuUtilization ,
label : {
normal : {
color : '#6AA0E4' ,
fontSize : 22 ,
fontWeight : 'bold' ,
formatter : function ( params ) {
return params . value + '%' ;
} ,
position : 'center' ,
show : true ,
}
} ,
itemStyle : {
normal : {
color : '#6AA0E4'
}
}
} , {
value : 100 - this . details . cpuUtilization ,
name : '' ,
labelLine : {
show : false
} ,
itemStyle : {
normal : {
color : '#D8D8D8'
} ,
emphasis : {
color : '#D8D8D8'
}
}
} ]
}
} )
usedmemory4 . setOption ( {
title : [
{
text : '内存使用率' ,
left : '45%' ,
top : '55%' ,
textAlign : 'center' ,
textStyle : {
fontSize : '14' ,
fontWeight : '400' ,
color : '#6AA0E4' ,
textAlign : 'center' ,
textShadowColor : '#000' ,
} ,
} ,
] ,
series : {
type : 'pie' ,
radius : [ '90%' , "100%" ] ,
hoverAnimation : false ,
data : [
{
value : this . details . memoryUtilization ,
label : {
normal : {
color : '#6AA0E4' ,
fontSize : 22 ,
fontWeight : 'bold' ,
formatter : function ( params ) {
return params . value + '%' ;
} ,
position : 'center' ,
show : true ,
}
} ,
itemStyle : {
normal : {
color : '#6AA0E4'
}
}
} , {
value : 100 - this . details . memoryUtilization ,
name : '' ,
labelLine : {
show : false
} ,
itemStyle : {
normal : {
color : '#D8D8D8'
} ,
emphasis : {
color : '#D8D8D8'
}
}
} ]
}
} )
usedmemory5 . setOption ( {
series : [
{
type : 'pie' ,
radius : [ 0 , '100%' ] ,
center : [ '50%' , '50%' ] ,
label : {
position : 'inside' ,
formatter : '{b}\n{c}' ,
color : '#30465D'
} ,
labelLine : {
length : 5 ,
length2 : 5
} ,
data : [ {
name : '输入' ,
value : this . details . volIn
} ,
{
name : '输出' ,
value : this . details . volOut
}
]
}
]
} )
combinedPerformanceChart . setOption ( {
combinedPerformanceChart . setOption ( {
tooltip : {
tooltip : {
trigger : 'axis' ,
trigger : 'axis' ,
@ -602,42 +382,20 @@ mounted() {
params . forEach ( function ( item ) {
params . forEach ( function ( item ) {
let value = item . value ;
let value = item . value ;
let unit = '' ;
let unit = '' ;
/ / 处 理 不 同 数 据 的 显 示 格 式
/ / 处 理 不 同 数 据 的 显 示 格 式
if ( item . seriesName === '设备温度' ) {
if ( item . seriesName === '设备温度' ) {
unit = '℃' ;
unit = '℃' ;
} else if ( item . seriesName === '健康度' ) {
} else {
/ / 获 取 原 始 健 康 度 值 - 修 复 访 问 方 式
unit = '%' ;
/ / 通 过 映 射 关 系 反 向 计 算 原 始 值
}
let originalValue ;
switch ( value ) {
case 100 : originalValue = 1 ; break ;
case 75 : originalValue = 2 ; break ;
case 50 : originalValue = 3 ; break ;
case 25 : originalValue = 4 ; break ;
default : originalValue = 0 ;
}
let statusText = '' ;
switch ( originalValue ) {
case 1 : statusText = '健康' ; break ;
case 2 : statusText = '良好' ; break ;
case 3 : statusText = '一般' ; break ;
case 4 : statusText = '需维护' ; break ;
default : statusText = '未知' ;
}
result += item . marker + item . seriesName + ': ' + value + '% (' + statusText + ')<br/>' ;
return ;
} else {
unit = '%' ;
}
result += item . marker + item . seriesName + ': ' + value + unit + '<br/>' ;
result += item . marker + item . seriesName + ': ' + value + unit + '<br/>' ;
} ) ;
} ) ;
return result ;
return result ;
}
}
} ,
} ,
legend : {
legend : {
data : [ '设备温度' , 'CPU使用率' , '内存使用率' , '健康度' ] ,
data : [ '设备温度' , 'CPU使用率' , '内存使用率' ] ,
textStyle : {
textStyle : {
color : '#718096'
color : '#718096'
}
}
@ -764,43 +522,6 @@ mounted() {
} ]
} ]
}
}
}
}
} ,
{
name : '健康度' ,
type : 'bar' ,
/ / 将 健 康 度 值 映 射 为 对 应 的 百 分 比 : 1 - > 1 0 0 , 2 - > 7 5 , 3 - > 5 0 , 4 - > 2 5
/ / 使 用 对 象 格 式 存 储 数 据 , 同 时 包 含 映 射 值 和 原 始 值
data : details . healthList . map ( value => {
const valueMap = { 1 : 100 , 2 : 75 , 3 : 50 , 4 : 25 } ;
/ / 使 用 v a l u e 属 性 表 示 显 示 的 值 , 原 始 值 可 以 通 过 自 定 义 字 段 存 储
return {
value : valueMap [ value ] || 0 ,
originalValue : value
} ;
} ) ,
itemStyle : {
color : function ( params ) {
/ / 获 取 原 始 健 康 度 值 进 行 颜 色 映 射
const originalValue = params . data && params . data . originalValue !== undefined ?
params . data . originalValue : params . value ;
/ / 使 用 s w i t c h 语 句 替 代 对 象 查 找 , 确 保 每 个 c a s e 都 有 b r e a k
switch ( originalValue ) {
case 1 : return '#48bb78' ; / / 健 康 - 绿 色
case 2 : return '#4299e1' ; / / 良 好 - 蓝 色
case 3 : return '#ed8936' ; / / 一 般 - 橙 色
case 4 : return '#f56565' ; / / 需 维 护 - 红 色
default : return '#a0aec0' ; / / 默 认 灰 色
}
}
} ,
barWidth : '40%' ,
emphasis : {
itemStyle : {
shadowBlur : 10 ,
shadowOffsetX : 0 ,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
}
}
}
]
]
} ) ;
} ) ;
@ -809,8 +530,6 @@ mounted() {
/ / 响 应 窗 口 大 小 变 化
/ / 响 应 窗 口 大 小 变 化
window . addEventListener ( 'resize' , function ( ) {
window . addEventListener ( 'resize' , function ( ) {
combinedPerformanceChart . resize ( ) ;
combinedPerformanceChart . resize ( ) ;
usedmemory . resize ( ) ;
usedmemory2 . resize ( ) ;
/ / t r a f f i c C h a r t . r e s i z e ( ) ;
/ / t r a f f i c C h a r t . r e s i z e ( ) ;
} ) ;
} ) ;
} ,
} ,
@ -841,14 +560,46 @@ mounted() {
this . historyQueryList . minTime = date [ 0 ]
this . historyQueryList . minTime = date [ 0 ]
this . historyQueryList . maxTime = date [ 1 ]
this . historyQueryList . maxTime = date [ 1 ]
this . gethistoryQuery ( this . $route . params . id )
this . gethistoryQuery ( this . $route . params . id )
} ,
/ / 根 据 温 度 值 返 回 对 应 的 样 式 类
getTemperatureClass ( temperature ) {
if ( ! temperature || isNaN ( temperature ) ) return 'temperature-normal' ;
const temp = Number ( temperature ) ;
if ( temp < 20 ) return 'temperature-low' ;
if ( temp >= 20 && temp <= 30 ) return 'temperature-normal' ;
if ( temp > 30 && temp <= 40 ) return 'temperature-high' ;
return 'temperature-danger' ;
} ,
/ / 根 据 健 康 度 返 回 对 应 的 样 式 类
getHealthClass ( health ) {
switch ( health ) {
case 1 :
return 'health-excellent' ;
case 2 :
return 'health-good' ;
case 3 :
return 'health-fair' ;
case 4 :
return 'health-poor' ;
default :
return 'health-good' ;
}
} ,
/ / 根 据 使 用 率 返 回 对 应 的 样 式 类
getUtilizationClass ( utilization ) {
if ( ! utilization || isNaN ( utilization ) ) return 'utilization-normal' ;
const value = Number ( utilization ) ;
if ( value <= 50 ) return 'utilization-normal' ;
if ( value > 50 && value <= 80 ) return 'utilization-warning' ;
return 'utilization-danger' ;
}
}
}
}
}
}
< / script >
< / script >
< style scoped >
< style scoped >
. scroll - height - 500 {
. scroll - height - 68 0 {
height : 500 px ;
height : 68 0px ;
overflow - y : auto ;
overflow - y : auto ;
overflow - x : hidden ;
overflow - x : hidden ;
}
}
@ -1138,4 +889,211 @@ mounted() {
font - weight : 600 ;
font - weight : 600 ;
border - bottom : 2 px solid # 2 d3748 ;
border - bottom : 2 px solid # 2 d3748 ;
}
}
< / style >
. info - value {
overflow : hidden ;
text - overflow : ellipsis ;
white - space : nowrap ;
cursor : help ;
}
< / style >
< style scoped >
. health - indicators {
padding : 20 px 20 px 0 ;
background : # fff ;
border - radius : 8 px ;
}
. section - title {
font - size : 16 px ;
font - weight : bold ;
color : # 333 ;
margin - bottom : 20 px ;
}
. health - card {
position : relative ;
display : flex ;
flex - direction : column ;
align - items : center ;
justify - content : center ;
min - height : 180 px ;
padding : 10 px 0 ;
box - sizing : border - box ;
background : linear - gradient ( 135 deg , # edf2f7 , # e2e8f0 ) ;
border - radius : 12 px ;
border : 1 px solid rgba ( 226 , 232 , 240 , 0.8 ) ;
transition : all 0.3 s ease ;
margin - bottom : 16 px ;
}
. health - header {
display : flex ;
align - items : center ;
gap : 8 px ;
margin - bottom : 10 px ;
width : 100 % ;
padding - left : 16 px ;
}
. health - card : hover {
background : rgba ( 255 , 255 , 255 , 0.9 ) ;
border - color : rgba ( 66 , 153 , 225 , 0.3 ) ;
transform : translateY ( - 2 px ) ;
box - shadow : 0 4 px 12 px rgba ( 0 , 0 , 0 , 0.05 ) ;
}
. health - label {
font - size : 14 px ;
color : # 2 d3748 ;
margin - bottom : 0 ;
text - align : left ;
font - weight : bold ;
}
. health - icon {
position : relative ;
width : 40 px ;
height : 40 px ;
border - radius : 50 % ;
display : flex ;
align - items : center ;
justify - content : center ;
font - size : 18 px ;
margin - bottom : 0 ;
background : # e6f7ff ;
color : # 1890 ff ;
}
. health - circle {
width : 120 px ;
height : 120 px ;
border - radius : 50 % ;
display : flex ;
/* flex-direction: column; */
align - items : center ;
justify - content : center ;
position : relative ;
overflow : hidden ;
}
/* 圆形背景颜色 */
/* 温度相关样式 */
. health - circle . temperature - low {
background : linear - gradient ( 135 deg , # f0f9ff 0 % , # e0f2fe 100 % ) ;
}
. health - circle . temperature - normal {
background : linear - gradient ( 135 deg , # f0fdf4 0 % , # dcfce7 100 % ) ;
}
. health - circle . temperature - high {
background : linear - gradient ( 135 deg , # fef3c7 0 % , # fde68a 100 % ) ;
}
. health - circle . temperature - danger {
background : linear - gradient ( 135 deg , # fef2f2 0 % , # fee2e2 100 % ) ;
}
. health - value . temperature - low {
color : # 0 ea5e9 ;
}
. health - value . temperature - normal {
color : # 22 c55e ;
}
. health - value . temperature - high {
color : # f59e0b ;
}
. health - value . temperature - danger {
color : # ef4444 ;
}
/* 健康度相关样式 */
. health - circle . health - excellent {
background : linear - gradient ( 135 deg , # f0fdf4 0 % , # dcfce7 100 % ) ;
}
. health - circle . health - good {
background : linear - gradient ( 135 deg , # dbeafe 0 % , # bfdbfe 100 % ) ;
}
. health - circle . health - fair {
background : linear - gradient ( 135 deg , # fef3c7 0 % , # fde68a 100 % ) ;
}
. health - circle . health - poor {
background : linear - gradient ( 135 deg , # fef2f2 0 % , # fee2e2 100 % ) ;
}
. health - value . health - excellent {
color : # 22 c55e ;
}
. health - value . health - good {
color : # 3 b82f6 ;
}
. health - value . health - fair {
color : # f59e0b ;
}
. health - value . health - poor {
color : # ef4444 ;
}
/* 使用率相关样式 */
. health - circle . utilization - normal {
background : linear - gradient ( 135 deg , # f0fdf4 0 % , # dcfce7 100 % ) ;
}
. health - circle . utilization - warning {
background : linear - gradient ( 135 deg , # fef3c7 0 % , # fde68a 100 % ) ;
}
. health - circle . utilization - danger {
background : linear - gradient ( 135 deg , # fef2f2 0 % , # fee2e2 100 % ) ;
}
. health - value . utilization - normal {
color : # 22 c55e ;
}
. health - value . utilization - warning {
color : # f59e0b ;
}
. health - value . utilization - danger {
color : # ef4444 ;
}
/* 系统色系样式 */
. health - circle . system - color {
background : linear - gradient ( 135 deg , # f0f9ff 0 % , # e0f2fe 100 % ) ;
}
. health - value . system - color {
color : # 0 ea5e9 ;
}
/* 图标颜色 */
. health - icon . blood - pressure ,
. health - icon . heart - rate ,
. health - icon . breath {
background : linear - gradient ( 135 deg , # 22 c55e 0 % , # 4 ade80 100 % ) ;
color : white ;
}
. health - icon . cardio ,
. health - icon . heart - rate - variability {
background : linear - gradient ( 135 deg , # f97316 0 % , # fb923c 100 % ) ;
color : white ;
}
. health - icon . blood - oxygen {
background : linear - gradient ( 135 deg , # ef4444 0 % , # f87171 100 % ) ;
color : white ;
}
. health - icon . system - color {
background : linear - gradient ( 135 deg , # 0 ea5e9 0 % , # 38 bdf8 100 % ) ;
color : white ;
}
/* 数值样式 */
. health - value {
font - size : 28 px ;
font - weight : bold ;
margin - bottom : 5 px ;
}
/* 单位样式 */
. health - unit {
font - size : 14 px ;
color : # 666 ;
}
< / style >