perf: alertList性能优化
This commit is contained in:
chenjinsong
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<span>
|
||||
<div class="alert-label" :style="calcPosition(that.position)">
|
||||
<div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">ID</div>
|
||||
@@ -58,7 +58,7 @@
|
||||
<div class="alert-label-title">Administrator</div>
|
||||
<div class="alert-label-value">{{alertLabelData?alertLabelData.principal:''}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert-label-info" v-if="type==='module'" v-loading="loading">
|
||||
<div class="alert-label-box">
|
||||
@@ -93,7 +93,7 @@
|
||||
<div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -102,53 +102,65 @@
|
||||
props:{
|
||||
id:{},
|
||||
type:{},
|
||||
labelLoading:{},
|
||||
//labelLoading:{},
|
||||
that:{}
|
||||
},
|
||||
watch:{
|
||||
labelLoading(){
|
||||
if(this.type==='asset'){
|
||||
this.$get('/asset/info?id='+this.id).then((res)=>{
|
||||
if(res.msg==='success'){
|
||||
this.loading=false;
|
||||
this.alertLabelData=res.data.Basic;
|
||||
} else{
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
if(this.type==='project'){
|
||||
this.$get('/project/info?id='+this.id).then((res)=>{
|
||||
if(res.msg==='success'){
|
||||
this.loading=false;
|
||||
this.alertLabelData=res.data.basic;
|
||||
} else{
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
if(this.type==='module'){
|
||||
this.$get('/module?id='+this.id).then((res)=>{
|
||||
if(res.msg==='success'){
|
||||
this.loading=false;
|
||||
this.alertLabelData=res.data.list[0];
|
||||
} else{
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
/*watch:{
|
||||
labelLoading: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
if(this.type==='asset'){
|
||||
this.$get('/asset/info?id='+this.id).then((res)=>{
|
||||
if(res.msg==='success'){
|
||||
this.loading=false;
|
||||
this.alertLabelData=res.data.Basic;
|
||||
} else{
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
if(this.type==='project'){
|
||||
this.$get('/project/info?id='+this.id).then((res)=>{
|
||||
if(res.msg==='success'){
|
||||
this.loading=false;
|
||||
this.alertLabelData=res.data.basic;
|
||||
} else{
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
if(this.type==='module'){
|
||||
this.$get('/module?id='+this.id).then((res)=>{
|
||||
if(res.msg==='success'){
|
||||
this.loading=false;
|
||||
this.alertLabelData=res.data.list[0];
|
||||
} else{
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},*/
|
||||
data() {
|
||||
return {
|
||||
alertLabelData:null,
|
||||
loading:true
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
components:{
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
calcPosition() {
|
||||
return function(position) {
|
||||
return {
|
||||
left: `${position.left + position.width + 20}px`,
|
||||
top: `${position.top - 20}px`,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
alertActiveStr(){
|
||||
return vm.$t('overall.active');
|
||||
@@ -162,13 +174,66 @@
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
|
||||
if(this.type==='asset'){
|
||||
this.$get('/asset/info?id='+this.id).then((res)=>{
|
||||
if(res.msg==='success'){
|
||||
this.loading=false;
|
||||
this.alertLabelData=res.data.Basic;
|
||||
} else{
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
if(this.type==='project'){
|
||||
this.$get('/project/info?id='+this.id).then((res)=>{
|
||||
if(res.msg==='success'){
|
||||
this.loading=false;
|
||||
this.alertLabelData=res.data.basic;
|
||||
} else{
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
if(this.type==='module'){
|
||||
this.$get('/module?id='+this.id).then((res)=>{
|
||||
if(res.msg==='success'){
|
||||
this.loading=false;
|
||||
this.alertLabelData=res.data.list[0];
|
||||
} else{
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.alert-label {
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
z-index: 3000;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-label::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border: 5px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
.alert-label-info{
|
||||
border: 1px solid #ebeef5;
|
||||
border-bottom: none;
|
||||
|
||||
@@ -59,14 +59,12 @@
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop == 'alertRule'">
|
||||
<span class="too-long-split pointer" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)">
|
||||
<el-tooltip
|
||||
:placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
|
||||
effect="light">
|
||||
<alertRuleInfo slot="content" :id="scope.row.alertRule.id" :messageLoad="scope.row.loading"></alertRuleInfo>
|
||||
<span>{{scope.row[item.prop].alertName}}</span>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<div class="too-long-split pointer"v-if="scope.row.alertRule.alertName" >
|
||||
<span @mouseenter="alertMessagehover(scope.row.alertRule, true, $event)" @mouseleave="alertMessagehover(scope.row.alertRule, false)">
|
||||
<span>{{scope.row.alertRule.alertName}}</span>
|
||||
</span>
|
||||
<alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :that="scope.row.alertRule"></alertRuleInfo>
|
||||
</div>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'summary'">
|
||||
@@ -78,12 +76,31 @@
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<span v-else-if="item.prop == 'severity'">
|
||||
<span v-if="scope.row[item.prop] == 'high'"><i class="nz-icon nz-icon-arrow-up"></i> {{returnSeverityLabel(scope.row[item.prop])}}</span>
|
||||
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{returnSeverityLabel(scope.row[item.prop])}}</span>
|
||||
<span v-if="scope.row[item.prop] == 'low'"><i class="nz-icon nz-icon-arrow-down"></i> {{returnSeverityLabel(scope.row[item.prop])}}</span>
|
||||
</span>
|
||||
<span v-if="scope.row[item.prop] == 'high'"><i class="nz-icon nz-icon-arrow-up"></i> {{returnSeverityLabel(scope.row[item.prop])}}</span>
|
||||
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{returnSeverityLabel(scope.row[item.prop])}}</span>
|
||||
<span v-if="scope.row[item.prop] == 'low'"><i class="nz-icon nz-icon-arrow-down"></i> {{returnSeverityLabel(scope.row[item.prop])}}</span>
|
||||
</span>
|
||||
<template v-else-if="item.prop == 'labels'" class="labels">
|
||||
<el-tooltip
|
||||
<div v-for="(item,i) in labelsSort(scope.row.labels)">
|
||||
<span @mouseenter="labelHover(scope.row, item.label, true, $event)" @mouseleave="labelHover(scope.row, item.label, false)">
|
||||
<nz-alert-tag
|
||||
:label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
|
||||
:cursor-point="tagType(item.label) == 'info' ? false : true"
|
||||
:key="item.label"
|
||||
v-if="item.label != 'alertname' && item.label != 'severity'"
|
||||
>
|
||||
{{item.value}}
|
||||
</nz-alert-tag>
|
||||
</span>
|
||||
<alertLabel
|
||||
v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project') && scope.row[item.label] && scope.row[item.label].loading"
|
||||
:id="scope.row[item.label].id"
|
||||
:that="scope.row[item.label]"
|
||||
:type="item.label"
|
||||
></alertLabel>
|
||||
</div>
|
||||
|
||||
<!--<el-tooltip
|
||||
v-for="(item,i) in labelsSort(scope.row.labels)"
|
||||
:placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
|
||||
effect="light"
|
||||
@@ -107,7 +124,8 @@
|
||||
{{item.value}}
|
||||
</nz-alert-tag>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</el-tooltip>-->
|
||||
|
||||
</template>
|
||||
<div v-else-if="item.prop == 'state'">
|
||||
<span class="">
|
||||
@@ -755,17 +773,28 @@
|
||||
}
|
||||
},
|
||||
// alertNmae鼠标划入
|
||||
alertMessagehover(item,index){
|
||||
item.loading=true;
|
||||
this.$set(this.tableData,index,item);// 调用父组件
|
||||
alertMessagehover(item, loading, e) {
|
||||
if (e) {
|
||||
let dom = e.currentTarget;
|
||||
let position = dom.getBoundingClientRect();
|
||||
this.$set(item, "position", position);
|
||||
}
|
||||
this.$set(item, "loading", loading);
|
||||
//item.loading = true;
|
||||
//this.$set(this.tableData,index,item);// 调用父组件
|
||||
},
|
||||
// label 鼠标划入
|
||||
labelHover(item,index,type){
|
||||
labelHover(item, type, loading, e){
|
||||
if(this.labelToolTipDis(type)){
|
||||
return
|
||||
return;
|
||||
}
|
||||
item[type].loading=true;
|
||||
this.$set(this.tableData,index,item);// 调用父组件
|
||||
if (e) {
|
||||
let dom = e.currentTarget;
|
||||
let position = dom.getBoundingClientRect();
|
||||
this.$set(item[type], "position", position);
|
||||
}
|
||||
this.$set(item[type], "loading", loading);
|
||||
//this.$set(this.tableData,index,item);// 调用父组件
|
||||
},
|
||||
// Severity Label
|
||||
returnSeverityLabel(key){
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="alert-rule-info" v-loading="loading">
|
||||
<div class="alert-rule-info" :style="calcPosition(that.position)" v-loading="loading">
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">ID</div>
|
||||
<div class="alert-rule-value">{{alertRuleData?alertRuleData.id:''}}</div>
|
||||
@@ -30,8 +30,9 @@
|
||||
props:{
|
||||
id:{},
|
||||
messageLoad:{},
|
||||
that: {}
|
||||
},
|
||||
watch:{
|
||||
/*watch:{
|
||||
messageLoad:{
|
||||
handler:function(){
|
||||
this.$get('/alert/rule?id='+this.id).then((res)=>{
|
||||
@@ -45,7 +46,7 @@
|
||||
},
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
},*/
|
||||
data() {
|
||||
return {
|
||||
loading:true,
|
||||
@@ -55,34 +56,73 @@
|
||||
components:{
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
calcPosition() {
|
||||
return function(position) {
|
||||
return {
|
||||
left: `${position.left + position.width + 20}px`,
|
||||
top: `${position.top + 20}px`,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
formatThreshold(value,unit) {
|
||||
let unitMethod = chartDataFormat.getUnit(unit);
|
||||
if (unitMethod&&value) {
|
||||
return unitMethod.compute(value, null, 2);
|
||||
} else {
|
||||
return value
|
||||
return value;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
|
||||
this.$get('/alert/rule?id='+this.id).then((res)=>{
|
||||
if(res.msg === 'success') {
|
||||
this.loading = false;
|
||||
this.alertRuleData=res.data.list[0];
|
||||
} else{
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.alert-rule-info::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border: 5px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
position: absolute;
|
||||
top: calc(50% - 6px);
|
||||
left: 0;
|
||||
transform: translate(-100%, -100%);
|
||||
}
|
||||
.alert-rule-info{
|
||||
border: 1px solid #ebeef5;
|
||||
border-bottom: none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
z-index: 3000;
|
||||
padding: 10px;
|
||||
transform: translateY(-50%);
|
||||
overflow-wrap: break-word;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-rule-box{
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
.alert-rule-title{
|
||||
@@ -94,7 +134,6 @@
|
||||
}
|
||||
.alert-rule-value{
|
||||
text-align: left;
|
||||
width: 180px;
|
||||
color: #1a1a1a;
|
||||
padding: 0 3px 0 13px;
|
||||
}
|
||||
|
||||
@@ -485,28 +485,30 @@
|
||||
this.tools.loading = false;
|
||||
if (response.code == 200) {
|
||||
this.tableData = response.data.list;
|
||||
this.tableData.forEach((item) => {
|
||||
item.labels = JSON.parse(item.labels);
|
||||
let paramStr = JSON.stringify(this.promQueryParamConvert(item));
|
||||
this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
|
||||
let current = [];
|
||||
if (response2.data && response2.data.result && response2.data.result.length > 0) {
|
||||
current = response2.data.result[0].value.map((item, i) => {
|
||||
if (i == 0) {
|
||||
return bus.computeTimezone(item);
|
||||
} else {
|
||||
return parseFloat(item).toFixed(2);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
current=[null,null]
|
||||
}
|
||||
this.requestIndex+=1;
|
||||
item.current=current;
|
||||
if(this.requestIndex===this.tableData.length){
|
||||
this.$set(item, "current", current);
|
||||
this.requestIndex=0;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.tableData.forEach((item) => {
|
||||
item.labels = JSON.parse(item.labels);
|
||||
let paramStr = JSON.stringify(this.promQueryParamConvert(item));
|
||||
this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
|
||||
let current = [];
|
||||
if (response2.data && response2.data.result && response2.data.result.length > 0) {
|
||||
current = response2.data.result[0].value.map((item, i) => {
|
||||
if (i == 0) {
|
||||
return bus.computeTimezone(item);
|
||||
} else {
|
||||
return parseFloat(item).toFixed(2);
|
||||
}
|
||||
});
|
||||
}else{
|
||||
current=[null,null]
|
||||
}
|
||||
this.requestIndex+=1;
|
||||
item.current=current;
|
||||
if(this.requestIndex===this.tableData.length){
|
||||
this.$set(item, "current", current);
|
||||
this.requestIndex=0;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
this.deleteBox.ids='';
|
||||
|
||||
@@ -112,7 +112,7 @@
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
|
||||
<div class="content-col-content">
|
||||
<chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
|
||||
<chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
|
||||
<div class="right-bottom-zoom">
|
||||
<div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(1)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
|
||||
<div class="zoom-option" @click="zoomMap(-1)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
|
||||
@@ -686,7 +686,7 @@
|
||||
geoJson: {geoJson: world.worldData}
|
||||
};
|
||||
|
||||
setTimeout(()=>{this.queryDataCenterMapData();this.$refs.dataCenterMap.endLoading();},200)
|
||||
setTimeout(()=>{this.queryDataCenterMapData();},1000)
|
||||
},
|
||||
queryDataCenterMapData() {
|
||||
let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
|
||||
@@ -767,6 +767,7 @@
|
||||
data:seriesDatas
|
||||
}]
|
||||
this.$refs.dataCenterMap.setSeries(this.dataCenterMapSeries);
|
||||
this.$refs.dataCenterMap.endLoading();
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user