fix:修复拖动节点 频繁调用接口的问题

This commit is contained in:
zhangyu
2021-04-28 19:26:49 +08:00
parent cc5e4fb7fd
commit d262a18b86
2 changed files with 21 additions and 5 deletions

View File

@@ -54,6 +54,7 @@
:styleType="2" :styleType="2"
:metricOptionsParent="metricOptions" :metricOptionsParent="metricOptions"
@change="expressionChange" @change="expressionChange"
:from-father-data="true"
@removeExpression="removeExpression" @removeExpression="removeExpression"
></promql-input> ></promql-input>
<el-row> <el-row>
@@ -1128,7 +1129,7 @@ export default {
}) })
}, },
mounted () { mounted () {
this.queryMetrics() // this.queryMetrics()
// this.topologyData.data.grid= !!dataOption.grid; // this.topologyData.data.grid= !!dataOption.grid;
// this.topologyData.data.rule= !!dataOption.rule; // this.topologyData.data.rule= !!dataOption.rule;
// this.topologyData.data.projectInfo= !!dataOption.projectInfo; // this.topologyData.data.projectInfo= !!dataOption.projectInfo;

View File

@@ -10,7 +10,7 @@
<el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric <el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric
&nbsp;<i class="nz-icon nz-icon-arrow-down"></i></el-button> &nbsp;<i class="nz-icon nz-icon-arrow-down"></i></el-button>
<el-cascader-panel v-loading="tempBoxShowLoading" v-show="dropDownVisible" v-model="cascaderValue" v-clickoutside="closeDropdown" <el-cascader-panel v-loading="tempBoxShowLoading" v-show="dropDownVisible" v-model="cascaderValue" v-clickoutside="closeDropdown"
slot="dropdown" ref="metricSelector" :props="{emitPath:false,}" slot="dropdown" ref="metricSelector" :props="{emitPath:false,}" :loading="loading"
:options="metricOptions" @change="metricChange"> :options="metricOptions" @change="metricChange">
<template slot-scope="{ node, data }"> <template slot-scope="{ node, data }">
@@ -178,6 +178,10 @@ export default {
typeContentLoading: { typeContentLoading: {
type: Boolean, type: Boolean,
default: false default: false
},
fromFatherData: {
type: Boolean,
default: false
} }
// metricOptions: {type: Array}, // metricOptions: {type: Array},
// metricStore: {type: Array} // metricStore: {type: Array}
@@ -204,11 +208,14 @@ export default {
datacenterOption: [], datacenterOption: [],
projectOption: [], projectOption: [],
filterSilence: '', filterSilence: '',
tempBoxId: {} tempBoxId: {},
loading: false
} }
}, },
created () { mounted () {
this.queryMetrics() if (!this.fromFatherData) {
this.queryMetrics()
}
}, },
methods: { methods: {
closeDropdown () { closeDropdown () {
@@ -229,8 +236,15 @@ export default {
}, },
toggleDropdown () { toggleDropdown () {
this.dropDownVisible = !this.dropDownVisible this.dropDownVisible = !this.dropDownVisible
this.getMetricOptions()
},
getMetricOptions () {
if (!this.metricOptions.length) {
this.queryMetrics()
}
}, },
queryMetrics: function () { queryMetrics: function () {
this.loading = true
this.$get('prom/api/v1/label/__name__/values').then(response => { this.$get('prom/api/v1/label/__name__/values').then(response => {
if (response.status == 'success') { if (response.status == 'success') {
const metrics = response.data.sort() const metrics = response.data.sort()
@@ -300,6 +314,7 @@ export default {
}, },
getExprTemp () { getExprTemp () {
this.$get('/expression/tmpl/gname').then(res => { this.$get('/expression/tmpl/gname').then(res => {
this.loading = false
if (res.code === 200) { if (res.code === 200) {
res.data.list.forEach(item => { res.data.list.forEach(item => {
this.metricOptions.unshift({ this.metricOptions.unshift({