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

feat:新增功能

Browse Source 
1.panel图表删除功能（图表删除及编辑界面删除）
2.panel图表修改功能
3.panel图表图例增加分页及长度自适应
fix:修改BUG
1.legen样式及位置调整调整
2.panel图表高设置无效
3.新增图表界面会显示图表列表里的4个操作图标
This commit is contained in:
hanyuxia
2020-01-06 17:10:57 +08:00
parent 18dcbbaa8e
commit 0a5c4cba89
6 changed files with 281 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,7 @@
ref="editChart"
@on-refresh-data=""
@on-remove-chart-block="removeChart"
@on-edit-chart-block=""
@on-edit-chart-block="editData"
:panel-id="filter.panelId"
:editChartId="'editChartId' + item.id"></line-chart-block>
<!--
@@ -88,6 +88,7 @@ export default {
}else {
this.dataList = response.data;
}
//alert(JSON.stringify(response)); 查着，返回的内容就没有图表表达式了？？
this.dataSetFirst(this.dataList);
}
});
@@ -103,11 +104,11 @@ export default {
// 获取一个图表具体数据,图表信息，图表位置index
getChartData(chartInfo, pos, filterType) {
//alert(JSON.stringify(chartInfo));
const chartItem = chartInfo;
const index = pos; // 指标
const len = chartItem.elements.length;
//this.setSize(chartItem.span, index); // 设置该图表宽度
this.setSize(chartItem.span,chartItem.height, index); // 设置该图表宽度,高度
this.setSize(chartItem.span, index); // 设置该图表宽度
// 没有数据的设置提示信息暂无数据-针对每一个图
if (len === 0) {
this.$nextTick(() => {
@@ -170,7 +171,7 @@ export default {
metric_name: '',
};
// 图表中每条线的名字,后半部分
let host = `${queryItem.metric.__name__}, `;//up,
let host = `${queryItem.metric.__name__}{`;//up,
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
// 设置时间-数据格式对
const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
@@ -178,10 +179,11 @@ export default {
if (dpsArr.length > 0 && tagsArr.length > 0) {
tagsArr.forEach((tag, i) => {
if (tag !== '__name__') {
host += i === 0 ? `${tag}=${queryItem.metric[tag]}` : ` ${tag}=${queryItem.metric[tag]},`;
host += i === 0 ? `${tag}="${queryItem.metric[tag]}"` : `${tag}="${queryItem.metric[tag]}",`;
}
});
if(host.endsWith(',')){host = host.substr(0,host.length-1);}
host +="}";
legend.push(host);
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
seriesItem.theData.name = host;
@@ -254,11 +256,11 @@ export default {
}
},
// 设置图表的宽度
setSize(size,height, index) {
setSize(size, index) {
this.$nextTick(() => {
const chartBox = document.getElementsByClassName('chartBox');
chartBox[index].style.width = `${(size / 12) * 100}%`;
chartBox[index].style.height = height;
//chartBox[index].style.height = height;
});
},
@@ -269,29 +271,18 @@ export default {
},
// 删除图表
removeChart(chartId) {
/*
const chart = this.dataList.find(item => item.id === chartId);
if (chart) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("panel?ids=" + u.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
if(this.showPanel.id===u.id){
this.showPanel.id ='';
}
this.getTableData();
this.rightBox.show = false;
} else {
this.$message.error(response.msg);
}
})
});
//this.$emit('on-remove-chart', chart);
}*/
this.$emit('on-remove-chart', chart);
}
},
// 编辑图表
editData(chartId) {
// 获取该id下chart的相关信息
const chart = this.dataList.find(item => item.id === chartId);
if (chart) {
this.$emit('on-edit-chart', chart);
}
},
/*
// 刷新列表中的一个图表
@@ -306,16 +297,6 @@ export default {
refreshData() {
this.getData(this.filter);
},
// 编辑图表
editData(chartId) {
// 获取该id下chart的相关信息
const chart = this.dataList.find(item => item.id === chartId);
if (chart) {
this.$emit('on-edit-chart', chart);
}
},
*/
},

87
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -21,7 +21,7 @@
</div>
</div>
<div class="line-area" ref="lineChartArea" style=""></div>
<div class="line-area" ref="lineChartArea" ></div>
<!--
<Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-
<el-dialog class="line-chart-block-modal"
@@ -126,9 +126,15 @@ export default {
if ( chartInfo.type === 4) {//line,bar
this.chartType = 'line';
}
//alert(ele.style.height);
// ele.style.height= chartInfo.height;
//alert(chartInfo.height);
//alert(ele.style.height);
//var myEchart = echarts.init(document.getElementById('lineChartArea'));
this.echartStore = echarts.init(ele);
var chartWidth = ele.clientWidth;
var option = {
title: {
text: chartInfo.title || null,
@@ -152,34 +158,67 @@ export default {
confine:true
},
legend: {
type:'scroll',
height:80,
show:true,
icon:"roundRect",
itemHeight:5,
itemWidth:15,
formatter:function(name){
if(!name){
return '';
}
if(name.length>5){
return name.slice(0,5)+'...';
//计算宽度
var span = document.createElement("span");
var result = {};
result.width = span.offsetWidth;
result.height = span.offsetHeight;
span.style.visibility = "hidden";
span.style.fontSize = 14;
span.style.fontFamily = "Arial";
span.style.display = "inline-block";
document.body.appendChild(span);
if(typeof span.textContent != "undefined"){
span.textContent = name;
}else{
span.innerText = name;
}
var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
document.body.removeChild(span);
if(txtWidth < chartWidth){
return name;
}else {
var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
return name.slice(0,charNum)+'...';
//return name;
}
},
tooltip:{show:true},
data: legend,
//orient:'vertical',
orient:'vertical',
x:'center',
y:'top',
top:'5%',
y:'bottom',
//top:'5%',
//bottom:0
},
grid: {
bottom: '10%',
containLabel: true
//height:"50%",
//top: '13%',
containLabel: false,
bottom:156
},
dataZoom: [{
type: 'inside',
type: 'slider',
show:true,
xAxisIndex: [0],
start: 0,
end: 100,
height:15
}, {
height:25,
bottom:96
}
/*
, {
start: 0,
end: 100,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
@@ -191,7 +230,10 @@ export default {
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
}
*/],
xAxis: {
type: 'time',
@@ -217,7 +259,8 @@ export default {
type: 'value',
splitLine:{
show:true
}
},
//boundaryGap:[0,0.2]
},
useUTC: false,//使用本地时间
series: dataArg
@@ -328,6 +371,7 @@ export default {
// eslint-disable-next-line
this.echartStore.setOption(option);//显示全屏界面
}
this.echartStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,legend) {
@@ -338,14 +382,22 @@ export default {
this.data = chartItem;
this.seriesItem = seriesItem;
this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'local',legend);
/*
if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 4) {
this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'local',legend);
}
*/
},
// 删除该图表
removeChart() {
this.$emit('on-remove-chart-block', this.data.id);
}
},
// 编辑图表
editChart() {
this.$emit('on-edit-chart-block', this.data.id);
},
/*
handleClose(done) {
/*
@@ -375,11 +427,6 @@ export default {
this.highchartStore.showLoading();
this.$emit('on-refresh-data', this.data.id);
},
// 编辑图表
editChart() {
this.$emit('on-edit-chart-block', this.data.id);
},
},
// 全屏查看
showAllScreen() {
// 初始化同步时间

6
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -1,6 +1,6 @@
<template key="panelBox">
<transition name="right-box">
<div class="right-box right-box-panel" v-if="rightBox.show">
<div class="right-box right-box-panel z-top" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="panel.id != ''" @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-style-light">
@@ -141,5 +141,7 @@
<style scoped>
.z-top{
z-index: 50;
}
</style>

69
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -46,10 +46,13 @@
.label-center{
margin-top:6px;
}
.z-top{
z-index: 50;
}
</style>
<template key="chartBox">
<transition name="right-box">
<div class="right-box right-box-add-chart" v-if="rightBox.show" >
<div class="right-box right-box-add-chart z-top" v-if="rightBox.show" >
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="chart.id != ''" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-style-light">
@@ -110,7 +113,7 @@
<el-col :span="8">
<div class="grid-content ">
<el-form-item prop="heigh">
<el-input-number :min="10" label="" v-model="chart.height" placeholder="" size="small"></el-input-number>px
<el-input-number :min="400" label="" v-model="chart.height" placeholder="" size="small"></el-input-number>px
</el-form-item>
</div>
</el-col>
@@ -198,6 +201,7 @@
show: false,
title: this.$t('dashboard.panel.createChartTitle'),
},
editInfo: {},
chart: {
id:'',
title: '',
@@ -239,7 +243,7 @@
spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
// 是否为编辑已有信息
isedit: false,
productId: 0,//不需要这个参数，可以删除
//productId: 0,//不需要这个参数，可以删除
panelId: 0,
metricList: [], // metric列表
deleteIndex: '', // 要删除的指标模块
@@ -253,6 +257,9 @@
show(show) {
this.rightBox.show = show;
},
setTitle(title) {
this.rightBox.title = title;
},
save() {
this.$refs['chartForm'].validate((valid) => {
if (valid) {
@@ -287,10 +294,14 @@
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("panel/"+u.id+"/charts").then(response => {
this.$delete("panel/"+this.panelId+"/charts?ids="+u.id).then(response => {
if (response.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
//this.getTableData();//删除相关图表后，刷新面板数据---调用panel的方法刷新
this.$refs.chartForm.resetFields();//清空表单
this.chart.id='';//不清除，再次打开创建图表，会显示删除按钮
this.$emit('on-delete-success');
} else {
this.$message.error(response.msg);
}
@@ -303,6 +314,8 @@
esc() {
this.rightBox.show = false;
//this.editParamBox.show = false;
this.$refs.chartForm.resetFields();//清空表单
this.chart.id='';//不清除，再次打开创建图表，会显示删除按钮
},
/*metric部分相关方法--begin*/
@@ -373,18 +386,16 @@
},
// 更新图表
updateCharts(params) {
/*
const obj = params;
obj.id = this.chartId;
updateCharts(obj).then((res) => {
if (res.status === 200) {
this.chartModal = false;
this.initInfo();
this.$refs.chartInfo.resetFields();
this.$emit('on-create-success', 'update', res.data);
this.$put('panel/'+this.panelId+'/charts', params).then(response => {
if (response.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$refs.chartForm.resetFields();//清空表单
this.$emit('on-create-success', 'update', response.data,params);
} else {
this.$message.error(response.msg);
}
});
*/
},
// 获取每个tag组件内部校验后数据,点击生成图表时触发
getTarget(target) {
@@ -423,7 +434,7 @@
params.elements = elements;
if (valid) {
if (this.isedit) {
params.id = this.chartId;
params.id = this.chart.id;
this.updateCharts(params);
} else {
this.addCharts(params);
@@ -460,6 +471,34 @@
//this.chartModal = true;//????控制弹出框显示和隐藏的，不需要了
this.initOpen(); // 获取metric, productId数据
},
// 编辑chart时使用, set_tdata
editData(data, panelId) {
//alert('data='+JSON.stringify(data)+"=="+panelId);
this.panelId = panelId;
this.isedit = true;
//this.chartModal = true;
this.editInfo = data;
// 图表信息获取
this.chart.id = data.id;
this.chart.title = data.title;
this.chart.span = data.span;
this.chart.height = data.height;
this.chart.type = data.type;
this.getSuggestMetric();//获得指标列表
// 指标
this.elements = [];
bus.chartAddInfo.metricTarget = [];
data.elements.forEach((item, index) => {
this.elements.push(index);
});
this.$nextTick(() => {
const cSet = this.$refs.chartTag;
// 派发charttag数据
cSet.forEach((item, index) => {
item.setMdata(data.elements[index]);
});
});
},
// 初始化信息
initInfo() {

99
nezha-fronted/src/components/page/dashboard/chartMetric.vue
View File

@@ -290,12 +290,105 @@ export default {
// 编辑已有图表状态时，先填充数据
setMdata(data) {
//alert('metricSetData'+JSON.stringify(data));
this.setDataFlag = true;
this.target = Object.assign({}, data);
this.elementInfo.metric = data.metric;
this.selectMetric(); // 获取tag
// this.proTags(data.tags);
if(this.target.type==='expert'){
this.tableShow = 2;
this.elementInfo.type = this.target.type;
this.elementInfo.expression = this.target.expression;
}else {
this.tableShow = 1;
this.elementInfo.type = this.target.type;
//解析expression，=>标签列表，值列表（index对应），设置selectedTagList及tagList里的isSelect为true
var expression = this.target.expression;
//alert('expression=='+expression);
this.elementInfo.metric = expression.substring(0,expression.indexOf('{'));
//alert(this.elementInfo.metric);
//this.selectMetric(); // 获取tag
this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
this.elementInfo.selectedTagList = [];
this.elementInfo.tagList = [];
if (response.code === 200) {
//this.elementInfo.tagList = response.data.list;
if(response.data.list){
response.data.list.forEach((item) => {
const tagObj = {
name: item.name,
isSelect:false//当前元素是否被选中，默认都未选中
};
this.elementInfo.tagList.push(tagObj);
});
}else {
response.data.forEach((item) => {
const tagObj = {
name: item.name,
isSelect:false//当前元素是否被选中，默认都未选中
};
this.elementInfo.tagList.push(tagObj);
});
}
let labValArrStr = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
this.stringToTags(labValArrStr);
}else {
this.elementInfo.tagList = [];
}
});
}
},
//字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4'
stringToTags(str) {
//alert("str=="+str);
let labArr = str.split(',');
labArr.forEach((item, index) => {//b=~'1|2|3'
let labName = item.substring(0,item.indexOf('='));
this.elementInfo.tagList.every((tagItem,index) => {
if(tagItem.name===labName){
tagItem.isSelect = true;
return false;
}else {
return true;
}
});
//查询metricLabel名称对应的LabelValue
this.$get('metric/labelVal?metric='+this.elementInfo.metric+"&name="+labName).then(response => {
const tagObj = {
name:labName,//选中的metricLabel名称
list:[],//metricLabel名称对应的LabelValue
value:[]//最终选择的值
};
let labVal = item.substring(item.indexOf('=')+1,item.length);
if(labVal.indexOf('~')!=-1){
labVal = labVal.substring(2,labVal.length-1);
let valArr = labVal.split('|');
valArr.forEach((labItem, labIndex) => {
tagObj.value.push(labItem);
});
}else {
labVal = labVal.substring(1,labVal.length-1);
tagObj.value.push(labVal);
}
if (response.code === 200) {
if(response.data.list){
response.data.list.forEach((resItem) => {
tagObj.list.push(resItem.value)
});
this.elementInfo.selectedTagList.push(tagObj);
}else{
response.data.forEach((resItem) => {
tagObj.list.push(resItem.value)
});
this.elementInfo.selectedTagList.push(tagObj);
}
}else {
this.elementInfo.selectedTagList.push(tagObj);
}
});
});
},
clearHistory() {
this.elementInfo.metric = '';
this.setDataFlag = false;

57
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -25,7 +25,8 @@
/* begin-chart list*/
.table-list {
margin-top: 10px;
overflow-y:auto;
height: 100%;
}
.box-content {
position: relative;
@@ -100,7 +101,7 @@
</el-option>
</el-select>
</div>
<div class="table-list" style="overflow-y:auto;height: 100%;">
<div class="table-list" >
<div class="box-content">
<chart-list
@on-edit-chart="editData"
@@ -110,7 +111,7 @@
</div>
<panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
<chart-box ref="addChartModal" @on-create-success="createSuccess"></chart-box>
<chart-box ref="addChartModal" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
</div>
</template>
@@ -181,8 +182,8 @@
end_time: '',
},
panelId: 0,
removeModal: false, // 删除弹出
deleteObj: {}, // 删除对象
//removeModal: false, // 删除弹出
//deleteObj: {}, // 删除对象
//---图表相关参数--end
}
},
@@ -243,12 +244,30 @@
// 编辑图表信息,打开编辑弹窗
editData(data) {
this.$refs.addChartModal.editData(data, this.panelId, this.filter.productId);
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
this.$refs.addChartModal.show(true);
this.$refs.addChartModal.editData(data, this.showPanel.id);
},
// 移除图表
// 移除图表:弹出确认框询问
removeData(data) {
this.deleteObj = data;
this.removeModal = true;
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("panel/"+data.panelId+"/charts?ids=" + data.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();//删除相关图表后，刷新面板数据
} else {
this.$message.error(response.msg);
}
})
});
},
delChartOk(){
this.filter.panelId = this.showPanel.id;
this.getData(this.filter);
},
// 图表创建成功，回调panel页面，进行图表的刷新
createSuccess(msg, data,params) {
@@ -289,16 +308,21 @@
this.$get('panel', this.searchLabel).then(response => {
if (response.code === 200) {
this.panelData = response.data.list;
if(this.panelData.length>0 ){
this.filter.panelId = this.panelData[0].id;
}
if( response.data.list.length>0 && this.showPanel.id===''){
this.showPanel.id = response.data.list[0].id;
if( response.data.list.length>0 ){
if(this.showPanel.id===''){
this.showPanel.id = response.data.list[0].id;
this.filter.panelId = this.showPanel.id;
this.getData(this.filter);
}
this.filter.panelId = this.showPanel.id;
}else {
this.showPanel.id ='';
this.filter.panelId='';
}
this.pageObj.total = response.data.total
this.getData(this.filter);
if(this.panel.id===''||this.panel.id===this.showPanel.id){
this.getData(this.filter);
}
}
})
@@ -324,6 +348,7 @@
},
created() {
this.getTableData();
this.getData(this.filter);
},
mounted: function() {
},