|
|
|
|
@ -175,23 +175,102 @@ |
|
|
|
|
</el-col> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="24"> |
|
|
|
|
<el-col :span="12"> |
|
|
|
|
<div ref="usedmemory" style="height: 150px" /> |
|
|
|
|
<div class="health-indicators"> |
|
|
|
|
<el-row :gutter="16"> |
|
|
|
|
<!-- 温度 --> |
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<div class="health-card"> |
|
|
|
|
<div class="health-header"> |
|
|
|
|
<div class="health-icon" :class="getTemperatureClass(details.temperature)"> |
|
|
|
|
<i class="el-icon-odometer"></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="health-label">当前温度</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="health-circle" :class="getTemperatureClass(details.temperature)"> |
|
|
|
|
<div class="health-value" :class="getTemperatureClass(details.temperature)">{{details.temperature || '暂无'}}</div> |
|
|
|
|
<div class="health-unit">℃</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="12"> |
|
|
|
|
<div ref="usedmemory2" style="height: 150px" /> |
|
|
|
|
<!-- 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> |
|
|
|
|
</el-col> |
|
|
|
|
|
|
|
|
|
<!-- 内存使用率 --> |
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<div ref="usedmemory3" style="height: 120px" /> |
|
|
|
|
<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> |
|
|
|
|
</el-col> |
|
|
|
|
<!-- 健康度 --> |
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<div ref="usedmemory4" style="height: 120px" /> |
|
|
|
|
<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> |
|
|
|
|
</el-col> |
|
|
|
|
<!-- volIn --> |
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<div ref="usedmemory5" style="height: 120px" /> |
|
|
|
|
<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> |
|
|
|
|
</el-col> |
|
|
|
|
<!-- 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> |
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
<!-- 图表模块已删除 --> |
|
|
|
|
</el-row> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
@ -206,19 +285,19 @@ |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="metrics-grid"> |
|
|
|
|
<div class="bottom-item scroll-height-500" v-if="tabIndex == 0"> |
|
|
|
|
<div class="bottom-item scroll-height-680" v-if="tabIndex == 0"> |
|
|
|
|
<History :dsId="dsId"/> |
|
|
|
|
</div> |
|
|
|
|
<div class="bottom-item scroll-height-500" v-if="tabIndex == 1"> |
|
|
|
|
<div class="bottom-item scroll-height-680" v-if="tabIndex == 1"> |
|
|
|
|
<Interface :dsId="dsId"/> |
|
|
|
|
</div> |
|
|
|
|
<div class="bottom-item scroll-height-500" v-if="tabIndex == 2"> |
|
|
|
|
<div class="bottom-item scroll-height-680" v-if="tabIndex == 2"> |
|
|
|
|
<Vlan :dsId="dsId"/> |
|
|
|
|
</div> |
|
|
|
|
<div class="bottom-item scroll-height-500" v-if="tabIndex == 3"> |
|
|
|
|
<div class="bottom-item scroll-height-680" v-if="tabIndex == 3"> |
|
|
|
|
<Routing :dsId="dsId"/> |
|
|
|
|
</div> |
|
|
|
|
<div class="bottom-item scroll-height-500" v-if="tabIndex == 4"> |
|
|
|
|
<div class="bottom-item scroll-height-680" v-if="tabIndex == 4"> |
|
|
|
|
<Veneer :dsId="dsId"/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -289,317 +368,7 @@ mounted() { |
|
|
|
|
// 性能图表 |
|
|
|
|
let details = this.historyQueryData; |
|
|
|
|
const combinedPerformanceChart = echarts.init(document.getElementById('combinedPerformanceChart')); |
|
|
|
|
const usedmemory = echarts.init(this.$refs.usedmemory, "macarons") |
|
|
|
|
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, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}) |
|
|
|
|
const value = this.details.cpuUtilization / 100; |
|
|
|
|
usedmemory3.setOption({ |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
type: 'liquidFill', |
|
|
|
|
radius: '47%', |
|
|
|
|
center: ['25%', '45%'], |
|
|
|
|
color: [ |
|
|
|
|
{ |
|
|
|
|
type: 'linear', |
|
|
|
|
x: 0, |
|
|
|
|
y: 0, |
|
|
|
|
x2: 0, |
|
|
|
|
y2: 1, |
|
|
|
|
colorStops: [ |
|
|
|
|
{ |
|
|
|
|
offset: 0, |
|
|
|
|
color: '#446bf5', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
offset: 1, |
|
|
|
|
color: '#2ca3e2', |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
globalCoord: false, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
data: [value, value], // data个数代表波浪数 |
|
|
|
|
backgroundStyle: { |
|
|
|
|
borderWidth: 1, |
|
|
|
|
color: 'RGBA(51, 66, 127, 0.7)', |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
normal: { |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: 50, |
|
|
|
|
color: '#fff', |
|
|
|
|
}, |
|
|
|
|
formatter: function(params) { |
|
|
|
|
return Math.round(params.value * 100) + '%'; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
outline: { |
|
|
|
|
// show: false |
|
|
|
|
borderDistance: 0, |
|
|
|
|
itemStyle: { |
|
|
|
|
borderWidth: 2, |
|
|
|
|
borderColor: '#112165', |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
title: [ |
|
|
|
|
{ |
|
|
|
|
text: 'CPU占用', |
|
|
|
|
left: '25%', |
|
|
|
|
top: '75%', |
|
|
|
|
textAlign: 'center', |
|
|
|
|
textStyle: { |
|
|
|
|
fontSize: '14', |
|
|
|
|
fontWeight: '400', |
|
|
|
|
color: '#6AA0E4', |
|
|
|
|
textAlign: 'center', |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
] |
|
|
|
|
}) |
|
|
|
|
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 |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}) |
|
|
|
|
// 已删除usedmemory系列图表的初始化代码 |
|
|
|
|
combinedPerformanceChart.setOption({ |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
@ -761,8 +530,6 @@ mounted() { |
|
|
|
|
// 响应窗口大小变化 |
|
|
|
|
window.addEventListener('resize', function() { |
|
|
|
|
combinedPerformanceChart.resize(); |
|
|
|
|
usedmemory.resize(); |
|
|
|
|
usedmemory2.resize(); |
|
|
|
|
// trafficChart.resize(); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
@ -793,14 +560,46 @@ mounted() { |
|
|
|
|
this.historyQueryList.minTime = date[0] |
|
|
|
|
this.historyQueryList.maxTime = date[1] |
|
|
|
|
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> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
.scroll-height-500 { |
|
|
|
|
height: 500px; |
|
|
|
|
.scroll-height-680 { |
|
|
|
|
height: 680px; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
overflow-x: hidden; |
|
|
|
|
} |
|
|
|
|
@ -1097,3 +896,204 @@ mounted() { |
|
|
|
|
cursor: help; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
.health-indicators { |
|
|
|
|
padding: 20px 20px 0; |
|
|
|
|
background: #fff; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.section-title { |
|
|
|
|
font-size: 16px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: #333; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.health-card { |
|
|
|
|
position: relative; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
min-height: 180px; |
|
|
|
|
padding: 10px 0; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
background: linear-gradient(135deg, #edf2f7, #e2e8f0); |
|
|
|
|
border-radius: 12px; |
|
|
|
|
border: 1px solid rgba(226, 232, 240, 0.8); |
|
|
|
|
transition: all 0.3s ease; |
|
|
|
|
margin-bottom: 16px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.health-header { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
gap: 8px; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
width: 100%; |
|
|
|
|
padding-left: 16px; |
|
|
|
|
} |
|
|
|
|
.health-card:hover { |
|
|
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
|
|
border-color: rgba(66, 153, 225, 0.3); |
|
|
|
|
transform: translateY(-2px); |
|
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.health-label { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #2d3748; |
|
|
|
|
margin-bottom: 0; |
|
|
|
|
text-align: left; |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.health-icon { |
|
|
|
|
position: relative; |
|
|
|
|
width: 40px; |
|
|
|
|
height: 40px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
font-size: 18px; |
|
|
|
|
margin-bottom: 0; |
|
|
|
|
background: #e6f7ff; |
|
|
|
|
color: #1890ff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.health-circle { |
|
|
|
|
width: 120px; |
|
|
|
|
height: 120px; |
|
|
|
|
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(135deg, #f0f9ff 0%, #e0f2fe 100%); |
|
|
|
|
} |
|
|
|
|
.health-circle.temperature-normal { |
|
|
|
|
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); |
|
|
|
|
} |
|
|
|
|
.health-circle.temperature-high { |
|
|
|
|
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); |
|
|
|
|
} |
|
|
|
|
.health-circle.temperature-danger { |
|
|
|
|
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.health-value.temperature-low { |
|
|
|
|
color: #0ea5e9; |
|
|
|
|
} |
|
|
|
|
.health-value.temperature-normal { |
|
|
|
|
color: #22c55e; |
|
|
|
|
} |
|
|
|
|
.health-value.temperature-high { |
|
|
|
|
color: #f59e0b; |
|
|
|
|
} |
|
|
|
|
.health-value.temperature-danger { |
|
|
|
|
color: #ef4444; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 健康度相关样式 */ |
|
|
|
|
.health-circle.health-excellent { |
|
|
|
|
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); |
|
|
|
|
} |
|
|
|
|
.health-circle.health-good { |
|
|
|
|
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); |
|
|
|
|
} |
|
|
|
|
.health-circle.health-fair { |
|
|
|
|
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); |
|
|
|
|
} |
|
|
|
|
.health-circle.health-poor { |
|
|
|
|
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.health-value.health-excellent { |
|
|
|
|
color: #22c55e; |
|
|
|
|
} |
|
|
|
|
.health-value.health-good { |
|
|
|
|
color: #3b82f6; |
|
|
|
|
} |
|
|
|
|
.health-value.health-fair { |
|
|
|
|
color: #f59e0b; |
|
|
|
|
} |
|
|
|
|
.health-value.health-poor { |
|
|
|
|
color: #ef4444; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 使用率相关样式 */ |
|
|
|
|
.health-circle.utilization-normal { |
|
|
|
|
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); |
|
|
|
|
} |
|
|
|
|
.health-circle.utilization-warning { |
|
|
|
|
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); |
|
|
|
|
} |
|
|
|
|
.health-circle.utilization-danger { |
|
|
|
|
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.health-value.utilization-normal { |
|
|
|
|
color: #22c55e; |
|
|
|
|
} |
|
|
|
|
.health-value.utilization-warning { |
|
|
|
|
color: #f59e0b; |
|
|
|
|
} |
|
|
|
|
.health-value.utilization-danger { |
|
|
|
|
color: #ef4444; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 系统色系样式 */ |
|
|
|
|
.health-circle.system-color { |
|
|
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); |
|
|
|
|
} |
|
|
|
|
.health-value.system-color { |
|
|
|
|
color: #0ea5e9; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 图标颜色 */ |
|
|
|
|
.health-icon.blood-pressure, |
|
|
|
|
.health-icon.heart-rate, |
|
|
|
|
.health-icon.breath { |
|
|
|
|
background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%); |
|
|
|
|
color: white; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.health-icon.cardio, |
|
|
|
|
.health-icon.heart-rate-variability { |
|
|
|
|
background: linear-gradient(135deg, #f97316 0%, #fb923c 100%); |
|
|
|
|
color: white; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.health-icon.blood-oxygen { |
|
|
|
|
background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); |
|
|
|
|
color: white; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.health-icon.system-color { |
|
|
|
|
background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%); |
|
|
|
|
color: white; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 数值样式 */ |
|
|
|
|
.health-value { |
|
|
|
|
font-size: 28px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 单位样式 */ |
|
|
|
|
.health-unit { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #666; |
|
|
|
|
} |
|
|
|
|
</style> |
Wangxin
8 months ago