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

perf: 调整chart-title字体、完善detail逻辑

Browse Source
This commit is contained in:
chenjinsong
2020-06-16 10:38:26 +08:00
parent be1b0eef8e
commit 6a4435f7ef
4 changed files with 47 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
nezha-fronted/src/components/charts/chart-alert-list.vue
View File

@@ -7,7 +7,7 @@
<div class="resize-box resize-box-alert" ref="resizeBox">
<div class="chart-alert-info" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex" v-show="!isPreview">
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow, 'drag-disabled': !data.draggable}" :id="'chartTitle'+chartIndex" v-show="!isPreview">
<el-popover
v-if="isError"
:close-delay=10
@@ -24,9 +24,9 @@
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartInfo.title}}</span>
<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
<span class="chart-title-icon" v-if="data.editable"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
<ul slot="dropdown" v-show="dropdownMenuShow" v-if="data.editable" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
<li @click="refreshChart" class="el-dropdown-menu__item">
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
<li @click="editChart" class="el-dropdown-menu__item">
@@ -275,7 +275,7 @@
ref="elementset"
></element-set>
</div>
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview"></span>
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview && data.resizable"></span>
</div>
</div>
</template>

35
nezha-fronted/src/components/charts/chart-detail.vue
View File

@@ -5,7 +5,7 @@
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box" ref="resizeBox">
<div class="chart-container" :id="'chartContainerDiv' + chartIndex" @mouseenter="caretShow = true" @mouseleave="caretShow = false">
<div class="chart-container chart-detail" :id="'chartContainerDiv' + chartIndex" @mouseenter="caretShow = true" @mouseleave="caretShow = false">
<loading :ref="'localLoading' + chartIndex"></loading>
<div class="clearfix chart-title" :class="{'drag-disabled': !data.draggable}" :id="'chartTitle' + chartIndex">
<el-popover
@@ -32,21 +32,32 @@
<div class="chart-sub-content" :class="{'init-no-animation': index == 0, 'fold-500': show.indexOf(index) == -1, 'unfold-500': show.indexOf(index) > -1}">
<template v-for="(value, key, i) in item.data">
<!-- endpoint-detail、asset的assetInfo的asset详情-->
<div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset') && data.type == 'assetInfo' && assetKey[key]">
<!-- endpoint-detail、asset、model的assetInfo的asset详情-->
<div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset' || data.from == 'model') && data.type == 'assetInfo' && item.type == 'basic' && assetKey[key]">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span>{{assetKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{assetKey[key]}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`" :class="{'content-item-value-muti': Array.isArray(value) && value.length > 0}">
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<span v-if="key == 'state'">{{value == 1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.outStock')}}</span>
<span v-else-if="key == 'alert'" class="as-button" :class="{'success': value <= 0, 'danger': value > 0}">{{value + ' ' + $t('overall.active')}}</span>
<template v-else-if="key == 'pingRtt'">
<div class="active-icon" :class="{'green': item.data.pingStatus == 1, 'red': item.data.pingStatus == 1 != 1}"></div>
<span>{{value ? value + 'ms' : ''}}</span>
</template>
<template v-else-if="Array.isArray(value) && value.length>0">
<span v-else-if="assetKey[key]">{{value ? value : "&nbsp;"}}</span>
</div>
</div>
<!-- endpoint-detail、asset、model的assetInfo的feature-->
<div class="content-item" v-if="(data.from == 'endpoint' || data.from == 'asset' || data.from == 'model') && data.type == 'assetInfo' && item.type == 'feature'">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span>{{key}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`" :class="{'content-item-value-muti': Array.isArray(value) && value.length > 0}">
<template v-if="Array.isArray(value) && value.length>0">
<div v-if="typeof value[0] == 'string'" class="item-value-sub" v-for="(_item, _index) in value" :key="_index">{{_item}}</div>
<el-table
v-else
@@ -72,7 +83,7 @@
</el-table-column>
</el-table>
</template>
<span v-else-if="assetKey[key]">{{value ? value : "&nbsp;"}}</span>
<span v-else-if="key">{{value ? value : "&nbsp;"}}</span>
</div>
</div>
@@ -140,6 +151,17 @@
<span>{{value ? value : "&nbsp;"}}</span>
</div>
</div>
<!-- alertRule-detail的详情-->
<div class="content-item" v-else-if="data.from == 'alertRule' && data.type == 'alertRuleInfo'">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span>{{key}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<span>{{value ? value : "&nbsp;"}}</span>
</div>
</div>
</template>
</div>
</div>
@@ -346,6 +368,7 @@
// 设置数据, filter区分
setData(chartItem, detail, panelId, filter, area, errorMsg) {
//this.resize(chartItem);
console.info(chartItem, detail)
if(errorMsg && errorMsg !== ''){
this.isError = true;
this.errorContent = errorMsg;

11
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -537,7 +537,7 @@
buildIn: 1,
elements: [{
id: '',
expression: `nz_alert_nums{id="${this.detail[0].value}"}`,
expression: `nz_alert_nums{id="${this.detail.id}"}`,
type: ''
}]
});
@@ -595,7 +595,10 @@
type: "alertList",
prev: -9,
next: -1,
buildIn: 1
buildIn: 1,
draggable: false,
resizable: false,
editable: false,
});
this.$nextTick(() => {
this.dataList.forEach((item,index) => {
@@ -1248,10 +1251,12 @@
response.data && function() {
response.data.Basic && detail.push({
title: vm.$t('asset.createAssetTab.basicTitle'),
type: 'basic',
data: response.data.Basic
});
response.data.Feature && detail.push({
title: vm.$t('asset.createAssetTab.featureTitle'),
type: 'feature',
data: response.data.Feature
});
}();
@@ -1261,6 +1266,7 @@
}else {
detail.push({
title: vm.$t('asset.createAssetTab.basicTitle'),
type: 'basic',
data: {
sn: 'assetInfo Test',
host: '192.168.40.42',
@@ -1273,6 +1279,7 @@
});
detail.push({
title: vm.$t('asset.createAssetTab.featureTitle'),
type: 'feature',
data: {
CPU: "Intel E500",
Memory: "256GB",

12
nezha-fronted/src/components/charts/chart.scss
View File

@@ -210,7 +210,7 @@
}
}
}
.chart-container {
.chart-container.chart-detail {
height: 100%;
position: relative;
background-color: white;
@@ -224,7 +224,6 @@
text-align: center;
width: 100%;
line-height: 30px;
height: 28px;
padding: 1px 3px 0 3px;
box-sizing: border-box;
.nz-chart-top{
@@ -237,10 +236,9 @@
font-size: 12px;
}
.chart-title-text {
font-weight: bold;
font-size: 18px;
font-size: 16px;
line-height: 26px;
color: #333;
color: #52545c;
display:flex;
justify-content:center;
align-items:center;
@@ -445,9 +443,9 @@
font-size: 12px;
}
.chart-title {
font-weight: bold;
font-size: 18px;
font-size: 16px;
line-height: 26px;
color: #52545c;
color: #333;
display:flex;
justify-content:center;