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

perf: 优化detail折叠动画

Browse Source
This commit is contained in:
chenjinsong
2020-06-28 19:31:53 +08:00
parent 42f6f3bd2b
commit 169d6a6dbe
3 changed files with 163 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,176 +24,178 @@
</div> </div>
<div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak> <div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
<el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal"> <el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
<div v-for="(item, index) in detail" :key="index" style="padding: 0 15px;"> <div v-for="(item, index) in detail" :key="index" class="chart-sub">
<div class="chart-sub-title" @click="hideElement(index)"> <div class="chart-sub-title" @click="hideElement(index)">
<span><i :class="{'el-icon-caret-right': show.indexOf(index) == -1,'el-icon-caret-bottom': show.indexOf(index) > -1}"></i></span> <span><i :class="{'el-icon-caret-right': show.indexOf(index) == -1,'el-icon-caret-bottom': show.indexOf(index) > -1}"></i></span>
<span>{{item.title}}</span> <span>{{item.title}}</span>
</div> </div>
<div class="chart-sub-content" :class="{'init-no-animation': index == 0, 'fold-600': show.indexOf(index) == -1, 'unfold-600': show.indexOf(index) > -1}"> <el-collapse-transition>
<template v-for="(value, key, i) in item.data"> <div class="chart-sub-content" v-show="show.indexOf(index) > -1">
<template v-for="(value, key, i) in item.data">
<!-- endpoint-detail、asset、model的assetInfo的asset详情--> <!-- 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" 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}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{assetKey[key]}}</span> <span class="content-text">{{assetKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{assetKey[key]}}</div> <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}`">
<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>
<div v-else-if="key == 'tags'" class="no-overflow" style="padding-bottom: 5px;">
<template v-if="value && value.length > 0">
<nz-alert-tag :label="tagItem.tag" type="normal" style="margin: 5px 5px 0 0; vertical-align: middle;"
:cursor-point="false"
:key="tagItem.id"
v-for="(tagItem, tagIndex) in value">
<div :id="`tag-${index}-${tagIndex}`" class="tag-value">
<span class="content-text">{{tagItem.value}}</span>
</div>
</nz-alert-tag>
</template>
<template v-else>&nbsp;</template>
</div> </div>
<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="assetKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template>
</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 class="content-text">{{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}"> <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<template v-if="Array.isArray(value) && value.length>0"> <span v-if="key == 'state'">{{value == 1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.outStock')}}</span>
<div v-if="typeof value[0] == 'string'" class="item-value-sub" v-for="(_item, _index) in value" :key="_index">{{_item}}</div> <span v-else-if="key == 'alert'" class="as-button" :class="{'success': value <= 0, 'danger': value > 0}">{{value + ' ' + $t('overall.active')}}</span>
<el-table <div v-else-if="key == 'tags'" class="no-overflow" style="padding-bottom: 5px;">
v-else <template v-if="value && value.length > 0">
class="nz-table asset-info-table" <nz-alert-tag :label="tagItem.tag" type="normal" style="margin: 5px 5px 0 0; vertical-align: middle;"
:data="value" :cursor-point="false"
tooltip-effect="light" :key="tagItem.id"
height="100%" v-for="(tagItem, tagIndex) in value">
ref="dataTable" <div :id="`tag-${index}-${tagIndex}`" class="tag-value">
v-scrollBar:el-table="'small'" <span class="content-text">{{tagItem.value}}</span>
> </div>
<el-table-column </nz-alert-tag>
:resizable="false" </template>
v-for="(_item, _index) in setLabels(value)" <template v-else>&nbsp;</template>
v-if="_item.show" </div>
:key="`col-${_index}`" <template v-else-if="key == 'pingRtt'">
:label="_item.label" <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="assetKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template>
</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 class="content-text">{{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
class="nz-table asset-info-table"
:data="value"
tooltip-effect="light"
height="100%"
ref="dataTable"
v-scrollBar:el-table="'small'"
> >
<template slot-scope="scope" :column="_item"> <el-table-column
<template > :resizable="false"
<span v-html="scope.row[_item.prop]"></span> v-for="(_item, _index) in setLabels(value)"
v-if="_item.show"
:key="`col-${_index}`"
:label="_item.label"
>
<template slot-scope="scope" :column="_item">
<template >
<span v-html="scope.row[_item.prop]"></span>
</template>
</template> </template>
</template> </el-table-column>
</el-table-column> </el-table>
</el-table> </template>
</template> <template v-else-if="key">
<template v-else-if="key"> <span class="content-text">{{value ? value : "&nbsp;"}}</span>
<span class="content-text">{{value ? value : "&nbsp;"}}</span> <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div> </template>
</template> </div>
</div> </div>
</div>
<!-- project的projectInfo的project详情--> <!-- project的projectInfo的project详情-->
<div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && projectKey[key]"> <div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && projectKey[key]">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{projectKey[key]}}</span> <span class="content-text">{{projectKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div> <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{projectKey[key]}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<template v-if="key == 'alertStat'">
<div class="active-icon dark-red"></div>
<span>{{value[0]}}</span>&nbsp;&nbsp;
<div class="active-icon red"></div>
<span>{{value[1]}}</span>&nbsp;&nbsp;
<div class="active-icon orange"></div>
<span>{{value[2]}}</span>
</template>
<template v-else-if="projectKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template>
</div>
</div> </div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`"> <!-- project的projectInfo的module详情-->
<template v-if="key == 'alertStat'"> <div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && moduleKey[key]">
<div class="active-icon dark-red"></div> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span>{{value[0]}}</span>&nbsp;&nbsp; <span class="content-text">{{moduleKey[key]}}</span>
<div class="active-icon red"></div> <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
<span>{{value[1]}}</span>&nbsp;&nbsp; </div>
<div class="active-icon orange"></div> <div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<span>{{value[2]}}</span> <template v-if="key == 'alertStat'">
</template> <div class="active-icon dark-red"></div>
<template v-else-if="projectKey[key]"> <span>{{value[0]}}</span>&nbsp;&nbsp;
<span class="content-text">{{value ? value : "&nbsp;"}}</span> <div class="active-icon red"></div>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div> <span>{{value[1]}}</span>&nbsp;&nbsp;
</template> <div class="active-icon orange"></div>
<span>{{value[2]}}</span>
</template>
<template v-else-if="key == 'endpointStat'">
<img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
<span>{{value[0]}}</span>&nbsp;&nbsp;
<img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
<span>{{value[1]}}</span>&nbsp;&nbsp;
</template>
<template v-else-if="moduleKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template>
</div>
</div> </div>
</div>
<!-- project的projectInfo的module详情-->
<div class="content-item" v-else-if="data.from == 'project' && data.type == 'projectInfo' && moduleKey[key]">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{moduleKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{moduleKey[key]}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<template v-if="key == 'alertStat'">
<div class="active-icon dark-red"></div>
<span>{{value[0]}}</span>&nbsp;&nbsp;
<div class="active-icon red"></div>
<span>{{value[1]}}</span>&nbsp;&nbsp;
<div class="active-icon orange"></div>
<span>{{value[2]}}</span>
</template>
<template v-else-if="key == 'endpointStat'">
<img src='../../assets/img/up.png' width="16" style="vertical-align: middle">
<span>{{value[0]}}</span>&nbsp;&nbsp;
<img src='../../assets/img/down.png' width="16" style="vertical-align: middle">
<span>{{value[1]}}</span>&nbsp;&nbsp;
</template>
<template v-else-if="moduleKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template>
</div>
</div>
<!-- endpoint-detail的endpointInfo的endpoint详情--> <!-- endpoint-detail的endpointInfo的endpoint详情-->
<div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && endpointKey[key]"> <div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && endpointKey[key]">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{endpointKey[key]}}</span> <span class="content-text">{{endpointKey[key]}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div> <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{endpointKey[key]}}</div>
</div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`">
<template v-if="key == 'state'"><div id="littleChart" style="cursor: pointer; height: 80px;" @click="preview"></div></template>
<template v-else-if="endpointKey[key]">
<span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template>
</div>
</div> </div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`"> <!-- endpoint-detail的endpointInfo的alert详情-->
<template v-if="key == 'state'"><div id="littleChart" style="cursor: pointer; height: 80px;" @click="preview"></div></template> <div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && item.title == $t('overall.alert')">
<template v-else-if="endpointKey[key]"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{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 class="content-text">{{value ? value : "&nbsp;"}}</span> <span class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div> <div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</template> </div>
</div> </div>
</div>
<!-- endpoint-detail的endpointInfo的alert详情-->
<div class="content-item" v-else-if="data.from == 'endpoint' && data.type == 'endpointInfo' && item.title == $t('overall.alert')">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{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 class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</div>
</div>
<!-- alertRule-detail的详情--> <!-- alertRule-detail的详情-->
<div class="content-item" v-else-if="data.from == 'alertRule' && data.type == 'alertRuleInfo'"> <div class="content-item" v-else-if="data.from == 'alertRule' && data.type == 'alertRuleInfo'">
<div class="content-item-key item-tip" :id="`key-${index}-${i}`"> <div class="content-item-key item-tip" :id="`key-${index}-${i}`">
<span class="content-text">{{key}}</span> <span class="content-text">{{key}}</span>
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(`key-${index}`, key, i, ready)">{{key}}</div> <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 class="content-text">{{value ? value : "&nbsp;"}}</span>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div>
</div>
</div> </div>
<div class="content-item-value item-tip" :id="`value-${index}-${i}`"> </template>
<span class="content-text">{{value ? value : "&nbsp;"}}</span> </div>
<div class="item-tip-hide item-tip-value el-popover" :class="itemTip(`value-${index}`, key, i, ready)">{{value}}</div> </el-collapse-transition>
</div>
</div>
</template>
</div>
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>

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

@@ -1204,21 +1204,22 @@
let step = bus.getStep(startTime, endTime); let step = bus.getStep(startTime, endTime);
this.$nextTick(() => { this.$nextTick(() => {
let query = chartInfo.elements[0].expression; let query = chartInfo.elements[0].expression;
this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step).then(response => { this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step=5m').then(response => {
if (response.status === 'success') { if (response.status === 'success') {
if (response.data.result) { if (response.data.result) {
let series = { let series = {
name: '', name: '',
symbol: 'emptyCircle', //去掉点 symbol: 'emptyCircle', //去掉点
symbolSize: [2, 2], symbolSize: 6,
smooth: 0.2, //曲线变平滑 smooth: 0.2, //曲线变平滑
showSymbol: false, showSymbol: true,
data: [], data: [],
type: "line", type: "line",
lineStyle: { lineStyle: {
width: 1, width: 1,
opacity: 0.9 opacity: 0.9
}, },
label: {show: true},
itemStyle: { itemStyle: {
color: function(params) { color: function(params) {
if (params.data[1] == "1") { if (params.data[1] == "1") {

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

@@ -316,6 +316,13 @@
.active-icon { .active-icon {
margin: 0; margin: 0;
} }
.chart-sub {
padding: 0 15px;
margin-bottom: 5px;
:last-of-type {
margin-bottom: 0;
}
}
.chart-sub-title { .chart-sub-title {
background-color: #efefef; background-color: #efefef;
font-size: 13px; font-size: 13px;
@@ -326,11 +333,7 @@
user-select: none; user-select: none;
} }
.chart-sub-content { .chart-sub-content {
opacity: 0;
max-height: 0;
visibility: hidden;
width: 100%; width: 100%;
margin-bottom: 5px;
box-sizing: border-box; box-sizing: border-box;
.content-item>div { .content-item>div {
display: inline-block; display: inline-block;
@@ -443,59 +446,6 @@
} }
} }
} }
.init-no-animation {
opacity: 1;
max-height: 200px;
visibility: visible;
}
.fold-500 {
animation-name: fold-500; //该动画定义在main.scss里
animation-duration: 0.2s;
animation-iteration-count:1;
opacity: 0;
max-height: 0;
visibility: hidden;
}
.fold-600 {
animation-name: fold-600; //该动画定义在main.scss里
animation-duration: 0.2s;
animation-iteration-count:1;
opacity: 0;
max-height: 0;
visibility: hidden;
}
.fold-200 {
animation-name: fold-200; //该动画定义在main.scss里
animation-duration: 0.2s;
animation-iteration-count:1;
opacity: 0;
max-height: 0;
visibility: hidden;
}
.unfold-500 {
animation-name: unfold-500;
animation-duration: 0.2s;
animation-iteration-count:1;
opacity: 1;
max-height: 500px;
visibility: visible;
}
.unfold-600 {
animation-name: unfold-600;
animation-duration: 0.2s;
animation-iteration-count:1;
opacity: 1;
max-height: 600px;
visibility: visible;
}
.unfold-200 {
animation-name: unfold-200;
animation-duration: 0.2s;
animation-iteration-count:1;
opacity: 1;
max-height: 200px;
visibility: visible;
}
} }
.chart-url { .chart-url {
.url-container { .url-container {