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图表曲线图全屏展示（查询时间还未添加），表格全屏展示
未实现查询功能）
fix:修改BUG
1.panel图表未选择label时，多了}
2.panel图表图例中第一个和第二个之间少了逗号
This commit is contained in:
hanyuxia
2020-01-09 17:02:33 +08:00
parent 50a8a2c878
commit 24ef367a2f
8 changed files with 134 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -178,7 +178,7 @@ 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 += `${tag}="${queryItem.metric[tag]}",`;
}
});
if(host.endsWith(',')){host = host.substr(0,host.length-1);}

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

@@ -64,5 +64,13 @@
.chart-table-col{
width: 100%;
}
.element-bottom-border {
border-bottom: 1px solid #dfe7f2;
margin-bottom:-20px;
}
.element-top-border {
padding-top: 10px;
border-top: 1px solid #dfe7f2;
margin-top:-25px;
}
}

25
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -37,21 +37,32 @@
<el-table-column prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" sortable></el-table-column>
</el-table>
</div>
<!--全屏
<el-dialog title="查看" v-model="screenModal" width="96%">
<div class="clearfix">
<!--全屏-->
<el-dialog title="查看" :visible.sync="screenModal" width="96%" :before-close="handleClose">
<div class="clearfix element-top-border">
<div class="float-left table-title">
{{data.title}}
</div>
<div class="float-right">
<Icon style="cursor:pointer;" type="refresh" size="16" color="#5aacff" @click.native="refreshChart"></Icon>
<div class="float-right edit">
<span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" @click.native="refreshChart">
<i class="el-icon-refresh-right"></i>
</span>
</div>
</div>
<div class="mt-10">
<Table border size="small" :height="350" :data="seriesItem" :columns="columns" :loading="tableLoading"></Table>
<el-table :data="seriesItem" height="350" border class="chart-table-col" v-loading="tableLoading">
<el-table-column prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" sortable></el-table-column>
<el-table-column prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" sortable></el-table-column>
<el-table-column prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" sortable></el-table-column>
<el-table-column prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" sortable></el-table-column>
</el-table>
</div>
<div class=" element-bottom-border" ></div>
<span slot="footer" class="dialog-footer" >
<el-button @click="screenModal = false">取 消</el-button>
<el-button type="primary" @click="screenModal = false">确 定</el-button>
</span>
</el-dialog>
-->
</div>
</template>
<script>

10
nezha-fronted/src/components/charts/line-chart-block.scss
View File

@@ -83,4 +83,14 @@
white-space: pre-wrap !important;
}
}
.element-top-border {
padding-bottom: 5px;
border-top: 1px solid #dfe7f2;
margin-top:-25px;
}
.element-bottom-border {
border-bottom: 1px solid #dfe7f2;
margin-bottom:-20px;
}
}

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

@@ -23,27 +23,40 @@
<div class="line-area" ref="lineChartArea" ></div>
<!--
<Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-
<Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
<el-dialog class="line-chart-block-modal"
title="查看"
:visible.sync="screenModal"
width="90%"
:before-close="handleClose">
<el-row>
:before-close="handleClose"
@opened="initDialog">
<el-row class="element-top-border" >
<div class="float-right">
全屏，日期选择组件
<calendar-select placement="bottom-end" ref="dateSelect" @on-date-change="dateChange"></calendar-select>
</div>
</el-row>>
<div class="line-area" ref="screenShowArea" id="lineChartArea"></div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<div class="block">
<!--
<el-date-picker size="small" ref="calendar"
format="yyyy/MM/dd HH:mm"
@change="dateChange"
v-model="searchTime"
type="datetimerange"
:picker-options="pickerOptions"
:range-separator="$t('dashboard.panel.to')"
:start-placeholder="$t('dashboard.panel.startTime')"
:end-placeholder="$t('dashboard.panel.endTime')"
align="right">
</el-date-picker>
-->
</div>
</div>
</el-row>
<div class="line-area " ref="screenShowArea" ></div>
<div class=" element-bottom-border" ></div>
<span slot="footer" class="dialog-footer" >
<el-button @click="screenModal = false">取 消</el-button>
<el-button type="primary" @click="screenModal = false">确 定</el-button>
</span>
</el-dialog>
<!--</Modal>-->
</div>
</template>
@@ -103,6 +116,7 @@ export default {
end_time: '',
},
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
legend:[]
// firstShow: false, // 默认不显示操作按钮,
};
},
@@ -258,7 +272,6 @@ export default {
useUTC: false,//使用本地时间
series: dataArg
};
// params.series = dataArg;
if (chartSite === 'local') { // 本地显示
/*
@@ -319,6 +332,7 @@ export default {
this.echartStore.setOption(option);//创建图表
this.echartStore.hideLoading();
} else if (chartSite === 'screen') { // 全屏显示
/*
option.series = dataArg.map((item) => {// params.series = dataArg.map((item) => {
const obj = Object.assign(item);
obj.events = {
@@ -362,6 +376,7 @@ export default {
};
return obj;
});
*/
// eslint-disable-next-line
this.echartStore.setOption(option);//显示全屏界面
this.echartStore.hideLoading();
@@ -373,6 +388,7 @@ export default {
if (filter) { // 保存数据,用于同步时间
this.stableFilter = filter;
}
this.legend = legend;
this.panelIdInner = panelId;
this.data = chartItem;
this.seriesItem = seriesItem;
@@ -397,6 +413,35 @@ export default {
this.echartStore.showLoading();
this.$emit('on-refresh-data', this.data.id);
},
initDialog(){
//此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表
this.initChart(this.data, this.seriesItem, this.$refs.screenShowArea, 'screen',this.legend);
// 日期组件同步时间
/*
this.$refs.calendar.initTime({
start: this.stableFilter.start_time,
end: this.stableFilter.end_time,
});
*/
},
// 全屏查看
showAllScreen() {
// 初始化同步时间
this.filter.start_time = this.stableFilter.start_time;
this.filter.end_time = this.stableFilter.end_time;
this.screenModal = true;
},
dateChange(time) {
/*
this.filter.start_time = `${time[0]}:00`;
this.filter.end_time = `${time[1]}:59`;
if (this.showSetting) {
this.getQueryChart('list');
} else {
this.getQueryChart('dashboard');
}
*/
},
/*
handleClose(done) {
/*
@@ -422,20 +467,6 @@ export default {
});
},
// 全屏查看
showAllScreen() {
// 初始化同步时间
this.filter.start_time = this.stableFilter.start_time;
this.filter.end_time = this.stableFilter.end_time;
this.screenModal = true;
// 全屏绘图
this.initChart(this.data, this.seriesItem, this.$refs.screenShowArea, 'screen');
// 日期组件同步时间
this.$refs.dateSelect.initTime({
start: this.stableFilter.start_time,
end: this.stableFilter.end_time,
});
},
dateChange(time) {
this.filter.start_time = `${time[0]}:00`;
this.filter.end_time = `${time[1]}:59`;

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

@@ -215,7 +215,7 @@
},
rules: {
title: [
{required: true, trigger: 'blur'}
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
/*
heigh: [
@@ -263,7 +263,7 @@
this.$refs['chartForm'].validate((valid) => {
if (valid) {
if (this.chart.id) {//修改
this.$put('panel/'+this.chart.id+'/charts', this.project).then(response => {
this.$put('panel/'+this.chart.id+'/charts').then(response => {
if (response.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
@@ -356,24 +356,33 @@
// 格式化tag为字符串表达式
tagsToString(metric,arr) {
let str = metric;
let sepStr = '';
arr.forEach((item, index) => {
if (index === 0) {
str +="{"
if(item.value.length===1){
str += `${item.name}='${item.value.join('|')}'`;
sepStr = ',';
}else if(item.value.length>1){
str += `${item.name}=~'${item.value.join('|')}'`;
sepStr = ',';
}
} else {
if(item.value.length===1){
str += `,${item.name}='${item.value.join('|')}'`;
str += sepStr+`${item.name}='${item.value.join('|')}'`;
sepStr = ',';
}else if(item.value.length>1){
str += `,${item.name}=~'${item.value.join('|')}'`;
str += sepStr+`${item.name}=~'${item.value.join('|')}'`;
sepStr = ',';
}
}
});
if(str.indexOf('{')>-1){
str +="}";
}
if(str.endsWith('{}')){
str = str.substring(0,str.indexOf('{'));
}
return str;
},
// 新建图表

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

@@ -54,12 +54,15 @@
.metric-title-row-position{
margin-top:-10px;
}
.star-red{
color:#ff1818;
}
</style>
<template>
<el-form :model="elementInfo" ref="elementInfo">
<el-form :model="elementInfo" ref="elementInfo" >
<el-row>
<el-col span="16">
{{$t('dashboard.panel.chartForm.metric')}}
<span class="star-red">*</span>&nbsp;{{$t('dashboard.panel.chartForm.metric')}}
</el-col>
<el-col span="8">
<div class="nz-btn-group float-left" v-show="tableShow == 2">
@@ -80,9 +83,9 @@
</div>
</el-col>
</el-row>
<el-row v-show="tableShow == 2">
<el-row v-if="tableShow == 2">
<el-col span="22">
<el-form-item prop="expression" ><!--expression和metric的验证只能有一个，不能同时存在？？:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<el-form-item prop="expression" :rules="{ required: true, message:$t('validate.required'), trigger: 'blur' }"><!--expression和metric的验证只能有一个，不能同时存在？？:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<el-input size="mini" ref="metricExpression" type="textarea" maxlength="1024" show-word-limit v-model="elementInfo.expression" :placeholder="this.$t('dashboard.metric.expertTip')" ></el-input>
</el-form-item>
</el-col>
@@ -90,9 +93,9 @@
&nbsp;&nbsp;<button type="button" v-if="countTotal > 1" @click="deleteTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square nz-btn-style-higher"><span class="top-tool-btn-txt"><i class="el-icon-close"></i></span></button>
</el-col>
</el-row>
<el-row v-show="tableShow == 1">
<el-row v-if="tableShow == 1">
<el-col span="22">
<el-form-item :label-width="80" prop="metric" ><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<el-form-item :label-width="80" prop="metric" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<el-select ref="metricSelect" placeholder="" popper-class="" size="small" v-model="elementInfo.metric" @change="selectMetric">
<el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
:value="item.metric">{{item.metric}}</el-option>
@@ -105,7 +108,7 @@
</el-col>
</el-row>
<el-row v-if="elementInfo.metric" v-show="tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<el-col span="12">
<div class="metric-title-label">{{elementInfo.metric}}</div>
<div class="li-list-part">
@@ -319,7 +322,12 @@ export default {
//解析expression，=>标签列表，值列表（index对应），设置selectedTagList及tagList里的isSelect为true
var expression = this.target.expression;
//alert('expression=='+expression);
if(expression.indexOf('{')>-1){
this.elementInfo.metric = expression.substring(0,expression.indexOf('{'));
}else {
this.elementInfo.metric = expression;
}
//alert(this.elementInfo.metric);
//this.selectMetric(); // 获取tag
this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
@@ -344,9 +352,10 @@ export default {
this.elementInfo.tagList.push(tagObj);
});
}
if(expression.indexOf('{')>-1){
let labValArrStr = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
this.stringToTags(labValArrStr);
}
}else {
this.elementInfo.tagList = [];
}
@@ -355,7 +364,6 @@ export default {
},
//字符串格式化为对象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('='));

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

@@ -334,6 +334,7 @@
methods: {
//面板相关操作
panelChange(){
//alert(JSON.stringify(this.$refs.searchInput.select_list));
this.$refs.searchInput.select();
this.filter.panelId = this.showPanel.id;
this.getData(this.filter);