gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-3453 fix: dashboard chart name显示优化

Browse Source
This commit is contained in:
zyh
2024-04-22 14:53:29 +08:00
parent e9c15d3b5f
commit 5fbead2f55
3 changed files with 24 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -17,12 +17,13 @@
position: relative;
flex-direction: column;
&:hover > .chart-header.chart-header--float{
background-color: $--chart-title-hover-background-color;
height: 39px;
opacity: 1;
}
.chart-header {
position: relative;
&.chart-header--float {
background-color: $--chart-title-hover-background-color;
position: absolute;
top: 0;
width: 100%;
@@ -30,32 +31,30 @@
box-sizing: border-box;
height: 0px;
opacity: 0;
transition: all linear .3s;
transition: height linear 0.3s, opacity linear 0.3s;
.chart-header__tools {
.chart-header__tool .tool__icon {
visibility: visible;
// visibility: visible;
}
}
}
display: flex;
justify-content:space-between;
align-items:center;
padding: 0 10px;
height: 39px;
font-size: 14px;
line-height: 40px;
color: $--color-text-primary;
transition: all 0.2s;
&:hover {
background-color: $--chart-title-hover-background-color;
.chart-header__tools {
background-color: $--chart-title-hover-background-color;
.chart-header__tool .tool__icon {
visibility: visible;
}
}
}
.chart-header__title {
max-width: calc(100% - 100px);
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@@ -66,8 +65,11 @@
z-index: 10;
}
.chart-header__tools {
height: 100%;
position: absolute;
top: 0;
right: 10px;
display: flex;
justify-content: space-between;
align-items: center;
.chart-header__tool {

3
nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue
View File

@@ -163,7 +163,7 @@ export default {
if (chartCache[key] === getChart(this.chartId)) {
option = {
tooltip: {
className: 'chart-time-series',
className: 'chart-time-series'
}
}
} else {
@@ -293,7 +293,6 @@ export default {
{
scale: 'left',
values: (u, vals, space) => vals.map(v => {
console.log(v)
return leftUnitCompute.compute(v, null, -1, decimals) + ''
}),
incrs: incrs,

43
nezha-fronted/src/components/common/table/asset/assetTable.vue
View File

@@ -56,17 +56,17 @@
<template slot="copy-text">
<i
class="ip-icon nz-icon nz-icon-mgt"
:class="ipColorClass(scope.row, scope.row.manageIp)"
:class="(getPingInfo(scope.row, 'mgt') && getPingInfo(scope.row, 'mgt').status == 1) ? 'green-color' : 'red-color'"
></i>
{{scope.row.manageIp ? scope.row.manageIp : '-'}}
</template>
</copy>
<div class="active-icon-content" v-if="getPingInfo(scope.row, scope.row.manageIp)">
<p v-if="getPingInfo(scope.row, scope.row.manageIp).rtt">
{{$t('asset.rtt') + (getPingInfo(scope.row, scope.row.manageIp).rtt + 'ms')}}
<div class="active-icon-content" v-if="getPingInfo(scope.row, 'mgt')">
<p v-if="getPingInfo(scope.row, 'mgt').rtt">
{{$t('asset.rtt') + (getPingInfo(scope.row, 'mgt').rtt + 'ms')}}
</p>
<p>
{{$t('asset.assetStatPre') + (getPingInfo(scope.row, scope.row.manageIp).lastUpdate ? utcTimeToTimezoneStr(getPingInfo(scope.row, scope.row.manageIp).lastUpdate) : $t('asset.assetStatDown'))}}
{{$t('asset.assetStatPre') + (getPingInfo(scope.row, 'mgt').lastUpdate ? utcTimeToTimezoneStr(getPingInfo(scope.row, 'mgt').lastUpdate) : $t('asset.assetStatDown'))}}
</p>
</div>
</div>
@@ -75,17 +75,17 @@
<template slot="copy-text">
<i
class="ip-icon nz-icon nz-icon-ipmi"
:class="ipColorClass(scope.row, scope.row.ipmiIp)"
:class="(getPingInfo(scope.row, 'ipmi') && getPingInfo(scope.row, 'ipmi').status == 1) ? 'green-color' : 'red-color'"
></i>
{{scope.row.ipmiIp ? scope.row.ipmiIp : ''}}
{{scope.row.ipmiIp ? scope.row.ipmiIp : '-'}}
</template>
</copy>
<div class="active-icon-content" v-if="getPingInfo(scope.row, scope.row.ipmiIp)">
<p v-if="getPingInfo(scope.row, scope.row.ipmiIp).rtt">
{{$t('asset.rtt') + (getPingInfo(scope.row, scope.row.ipmiIp).rtt + 'ms')}}
<div class="active-icon-content" v-if="getPingInfo(scope.row, 'ipmi')">
<p v-if="getPingInfo(scope.row, 'ipmi').rtt">
{{$t('asset.rtt') + (getPingInfo(scope.row, 'ipmi').rtt + 'ms')}}
</p>
<p>
{{$t('asset.assetStatPre') + (getPingInfo(scope.row, scope.row.ipmiIp).lastUpdate ? utcTimeToTimezoneStr(getPingInfo(scope.row, scope.row.ipmiIp).lastUpdate) : $t('asset.assetStatDown'))}}
{{$t('asset.assetStatPre') + (getPingInfo(scope.row, 'ipmi').lastUpdate ? utcTimeToTimezoneStr(getPingInfo(scope.row, 'ipmi').lastUpdate) : $t('asset.assetStatDown'))}}
</p>
</div>
</div>
@@ -457,28 +457,11 @@ export default {
return `[${start}-${end}]`
},
ipColorClass (row, ip) {
let status = 0
// 获取ip对应的ping status
if (row.pingInfo && row.pingInfo.length) {
row.pingInfo.forEach(item => {
if (item.host == ip) {
status = item.status
}
})
}
if (status == 1) {
return 'green-color'
} else if (status == 0) {
return 'red-color'
}
},
getPingInfo (row, ip) {
getPingInfo (row, type) {
if (!row.pingInfo || !row.pingInfo.length) {
return false
}
const info = row.pingInfo.find(item => item.host == ip)
const info = row.pingInfo.find(item => item.type == type)
return info
}
}