fix:修改问题

1 chart编辑界面metric选择优化
2 webshell关闭询问弹出,在只有一个连接的时候不提示
This commit is contained in:
hyx
2020-03-31 21:56:51 +08:00
parent 203e977b87
commit 9a40ada4d0
3 changed files with 108 additions and 28 deletions

View File

@@ -266,14 +266,16 @@
//可以做最小化的处理点击窗口外的空白处会调用此方法 //可以做最小化的处理点击窗口外的空白处会调用此方法
closeConsole(){ closeConsole(){
//弹窗询问是否关闭所有链接关闭窗口复选框记住我的选择用户勾选且选择yes 保存到localstorage之后关闭不再提醒 //弹窗询问是否关闭所有链接关闭窗口复选框记住我的选择用户勾选且选择yes 保存到localstorage之后关闭不再提醒
//localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en', //en/cn if(this.editableTabs.length===1){
//localStorage.setItem('nz-language', this.lang); this.closeShellWindow();
}else {
let remember = localStorage.getItem('close-shell-remember') ? localStorage.getItem('close-shell-remember') : false; let remember = localStorage.getItem('close-shell-remember') ? localStorage.getItem('close-shell-remember') : false;
if(remember){ if(remember){
this.closeShellWindow(); this.closeShellWindow();
}else { }else {
this.closeConfirmShow = true; this.closeConfirmShow = true;
} }
}
}, },
cancleConfirm(){ cancleConfirm(){
this.closeConfirmShow = false; this.closeConfirmShow = false;

View File

@@ -630,31 +630,25 @@
}, },
// 获取metric列表 // 获取metric列表
getSuggestMetric() { getSuggestMetric() {
//this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => { //this.$get('/prom/api/v1/label/__name__/values').then(response => {
this.$get('/prom/api/v1/label/__name__/values').then(response => { this.$get('/module?pageSize=-1').then(response => {
//if (response.code === 200) { if (response.code === 200) {
if (response.status === 'success') { this.metricList = response.data.list;
this.metricList = response.data;
const cascaderMap = new Map(); const cascaderMap = new Map();
this.metricList.forEach((item,index) => { this.metricList.forEach((item,index) => {
let arr = []; let projectName = item.project.name;
let par = '';//父value let moduleName = item.name;
//let metricTmp = item.metric;//子value
let metricTmp = item;//子value
if(metricTmp){
arr = metricTmp.split('_');
par = arr[0];
}
const childOption = { const childOption = {
value: metricTmp, value: moduleName,
label: metricTmp, label: moduleName,
children:[],
}; };
if(cascaderMap.has(par)){ if(cascaderMap.has(projectName)){
cascaderMap.get(par).push(childOption); cascaderMap.get(projectName).push(childOption);
}else { }else {
let childArr = []; let childArr = [];
childArr.push(childOption); childArr.push(childOption);
cascaderMap.set(par,childArr); cascaderMap.set(projectName,childArr);
} }
}); });
let metricCascaderArr = []; let metricCascaderArr = [];

View File

@@ -82,6 +82,10 @@
.mt1{ .mt1{
margin-top:1px; margin-top:1px;
} }
.chart-metric-box-dropdown{
width: 619px;
z-index: 2950 !important;
}
</style> </style>
<style> <style>
.li-list-part-label-val-list .metric-title-position .el-form-item__label { .li-list-part-label-val-list .metric-title-position .el-form-item__label {
@@ -141,7 +145,9 @@
:options="metricCascaderList" :options="metricCascaderList"
:props="{ expandTrigger: 'hover' }" :props="{ expandTrigger: 'hover' }"
:show-all-levels="false" :show-all-levels="false"
@change="selectMetric"></el-cascader> @change="selectMetric"
@expand-change="handleItemChange"
></el-cascader>
<span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span> <span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span>
<div @click="deleteTarget" class="right-box-row-btn" v-if="countTotal > 1"> <div @click="deleteTarget" class="right-box-row-btn" v-if="countTotal > 1">
<i class="el-icon-minus"></i> <i class="el-icon-minus"></i>
@@ -253,6 +259,7 @@ export default {
tagSet: null, // 根据你metric获取的tags信息 tagSet: null, // 根据你metric获取的tags信息
setDataFlag: false, // true时为获取数据,编辑状态 setDataFlag: false, // true时为获取数据,编辑状态
vendorCount: '', vendorCount: '',
labelSort:['project','module','endpoint','datacenter','asset'],
}; };
}, },
watch: {}, watch: {},
@@ -321,11 +328,63 @@ export default {
} }
}, },
//动态加载第三级选项metric及label
handleItemChange(val) {
if(val && val.length===2) {//点击二级菜单,才进行查询
let proTmp = val[0];
let module = val[1];
let project = proTmp.substring(0, proTmp.length - 4);
this.metricCascaderList.map((item, index) => {
if(item.value===proTmp){//选择的project
item.children.map((innerItem, innerIndex) => {
if (innerItem.value === module && innerItem.children.length === 0) {//不重复加载
// 当二级分类的的child为空时才请求一次数据
let match = '{project="'+project+'",module="'+module+'"}';
this.$get('/prom/api/v1/series?match[]='+match).then(res => {
//this.$get('http://192.168.40.247:9090/api/v1/series?match[]='+match).then(res => {
if (res.status === 'success') {
let queryItem = res.data;//[]设置 metric和label
let metricArr = [];
let metricArrTmp = [];
res.data.forEach((tag, i) => {
//const tagsArr = Object.keys(tag);//["__name__","asset","idc","instance","job","module","project"]
let metricName = tag.__name__;
if(metricArrTmp.indexOf(metricName)===-1){
const childOption = {
value: metricName,//+"_par",
label: metricName
};
metricArrTmp.push(metricName);
metricArr.push(childOption);
}
});
this.$set(item.children[innerIndex], 'children', metricArr);
//this.$set(innerItem, 'children', metricArr);
/*
const tagObj = {
name: item[0],
list:item[1],
value:[]//最终选择的值
};
this.elementInfo.selectedTagList.push(tagObj);
*/
}
})
}
})
}
});
}
},
// 选择metric // 选择metric
selectMetric() { selectMetric() {
if (this.elementInfo.metric) {//选择了metric则设置tagList否则设置为空 if (this.elementInfo.metric) {//选择了metric则设置tagList否则设置为空
this.elementInfo.metric = this.elementInfo.metric[1];
this.getSuggestTags(this.elementInfo.metric); this.getSuggestTags(this.elementInfo.metric);
this.elementInfo.metric = this.elementInfo.metric[2];
} else { } else {
this.elementInfo.tagList = []; this.elementInfo.tagList = [];
this.setLabelDivHeight(0); this.setLabelDivHeight(0);
@@ -355,11 +414,15 @@ export default {
}, },
*/ */
// 获取tags列表 // 获取tags列表
getSuggestTags(metric) { getSuggestTags(metricArr) {
let metric = metricArr[2];
let proTmp = metricArr[0];
let project = proTmp.substring(0, proTmp.length - 4);
let module = metricArr[1];
//this.$get('metric/labelName?metric='+metric).then(response => { //this.$get('metric/labelName?metric='+metric).then(response => {
this.$get('/metric/series?match[]='+metric).then(response => { this.$get('/metric/series?match[]='+metric).then(response => {
this.elementInfo.selectedTagList = []; this.elementInfo.selectedTagList = [];
//this.elementInfo.tagList = []; let tagListTmp = [];
if (response.code === 200) { if (response.code === 200) {
const objList = Object.entries(response.data); const objList = Object.entries(response.data);
objList.forEach((item) => { objList.forEach((item) => {
@@ -368,8 +431,29 @@ export default {
list:item[1], list:item[1],
value:[]//最终选择的值 value:[]//最终选择的值
}; };
this.elementInfo.selectedTagList.push(tagObj); if(item[0]==='project'){
tagObj.value.push(project);
}else if(item[0]==='module'){
tagObj.value.push(module);
}
tagListTmp.push(tagObj);
}); });
this.labelSort.forEach((sortItem) => {
let itemIndex = -1;
tagListTmp.forEach((item,i) => {
if(sortItem===item.name){//labelSort:['project','module','endpoint','datacenter','asset'],
this.elementInfo.selectedTagList.push(item);
itemIndex = i;
}
});
if(itemIndex!==-1){
tagListTmp.splice(itemIndex,1);
}
});
tagListTmp.forEach((item,i) => {
this.elementInfo.selectedTagList.push(item);
});
let tagNum = this.elementInfo.selectedTagList.length; let tagNum = this.elementInfo.selectedTagList.length;
this.setLabelDivHeight(tagNum); this.setLabelDivHeight(tagNum);
}else { }else {