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) { if (dpsArr.length > 0 && tagsArr.length > 0) {
tagsArr.forEach((tag, i) => { tagsArr.forEach((tag, i) => {
if (tag !== '__name__') { 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);} 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{ .chart-table-col{
width: 100%; 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-column prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" sortable></el-table-column>
</el-table> </el-table>
</div> </div>
<!--全屏 <!--全屏-->
<el-dialog title="查看" v-model="screenModal" width="96%"> <el-dialog title="查看" :visible.sync="screenModal" width="96%" :before-close="handleClose">
<div class="clearfix"> <div class="clearfix element-top-border">
<div class="float-left table-title"> <div class="float-left table-title">
{{data.title}} {{data.title}}
</div> </div>
<div class="float-right"> <div class="float-right edit">
<Icon style="cursor:pointer;" type="refresh" size="16" color="#5aacff" @click.native="refreshChart"></Icon> <span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" @click.native="refreshChart">
<i class="el-icon-refresh-right"></i>
</span>
</div> </div>
</div> </div>
<div class="mt-10"> <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>
<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> </el-dialog>
-->
</div> </div>
</template> </template>
<script> <script>

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

@@ -83,4 +83,14 @@
white-space: pre-wrap !important; 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;
}
} }

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

@@ -23,27 +23,40 @@
<div class="line-area" ref="lineChartArea" ></div> <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" <el-dialog class="line-chart-block-modal"
title="查看" title="查看"
:visible.sync="screenModal" :visible.sync="screenModal"
width="90%" width="90%"
:before-close="handleClose"> :before-close="handleClose"
<el-row> @opened="initDialog">
<el-row class="element-top-border" >
<div class="float-right"> <div class="float-right">
全屏，日期选择组件 <div class="block">
<calendar-select placement="bottom-end" ref="dateSelect" @on-date-change="dateChange"></calendar-select> <!--
<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> </div>
</el-row>> </el-row>
<div class="line-area" ref="screenShowArea" id="lineChartArea"></div> <div class="line-area " ref="screenShowArea" ></div>
<div class=" element-bottom-border" ></div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer" >
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="screenModal = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button> <el-button type="primary" @click="screenModal = false">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
-->
<!--</Modal>--> <!--</Modal>-->
</div> </div>
</template> </template>
@@ -103,6 +116,7 @@ export default {
end_time: '', end_time: '',
}, },
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等 stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
legend:[]
// firstShow: false, // 默认不显示操作按钮, // firstShow: false, // 默认不显示操作按钮,
}; };
}, },
@@ -258,7 +272,6 @@ export default {
useUTC: false,//使用本地时间 useUTC: false,//使用本地时间
series: dataArg series: dataArg
}; };
// params.series = dataArg; // params.series = dataArg;
if (chartSite === 'local') { // 本地显示 if (chartSite === 'local') { // 本地显示
/* /*
@@ -319,6 +332,7 @@ export default {
this.echartStore.setOption(option);//创建图表 this.echartStore.setOption(option);//创建图表
this.echartStore.hideLoading(); this.echartStore.hideLoading();
} else if (chartSite === 'screen') { // 全屏显示 } else if (chartSite === 'screen') { // 全屏显示
/*
option.series = dataArg.map((item) => {// params.series = dataArg.map((item) => { option.series = dataArg.map((item) => {// params.series = dataArg.map((item) => {
const obj = Object.assign(item); const obj = Object.assign(item);
obj.events = { obj.events = {
@@ -362,6 +376,7 @@ export default {
}; };
return obj; return obj;
}); });
*/
// eslint-disable-next-line // eslint-disable-next-line
this.echartStore.setOption(option);//显示全屏界面 this.echartStore.setOption(option);//显示全屏界面
this.echartStore.hideLoading(); this.echartStore.hideLoading();
@@ -373,6 +388,7 @@ export default {
if (filter) { // 保存数据,用于同步时间 if (filter) { // 保存数据,用于同步时间
this.stableFilter = filter; this.stableFilter = filter;
} }
this.legend = legend;
this.panelIdInner = panelId; this.panelIdInner = panelId;
this.data = chartItem; this.data = chartItem;
this.seriesItem = seriesItem; this.seriesItem = seriesItem;
@@ -397,6 +413,35 @@ export default {
this.echartStore.showLoading(); this.echartStore.showLoading();
this.$emit('on-refresh-data', this.data.id); 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) { 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) { dateChange(time) {
this.filter.start_time = `${time[0]}:00`; this.filter.start_time = `${time[0]}:00`;
this.filter.end_time = `${time[1]}:59`; this.filter.end_time = `${time[1]}:59`;

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

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

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

@@ -54,12 +54,15 @@
.metric-title-row-position{ .metric-title-row-position{
margin-top:-10px; margin-top:-10px;
} }
.star-red{
color:#ff1818;
}
</style> </style>
<template> <template>
<el-form :model="elementInfo" ref="elementInfo"> <el-form :model="elementInfo" ref="elementInfo" >
<el-row> <el-row>
<el-col span="16"> <el-col span="16">
{{$t('dashboard.panel.chartForm.metric')}} <span class="star-red">*</span>&nbsp;{{$t('dashboard.panel.chartForm.metric')}}
</el-col> </el-col>
<el-col span="8"> <el-col span="8">
<div class="nz-btn-group float-left" v-show="tableShow == 2"> <div class="nz-btn-group float-left" v-show="tableShow == 2">
@@ -80,9 +83,9 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-row v-show="tableShow == 2"> <el-row v-if="tableShow == 2">
<el-col span="22"> <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-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-form-item>
</el-col> </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> &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-col>
</el-row> </el-row>
<el-row v-show="tableShow == 1"> <el-row v-if="tableShow == 1">
<el-col span="22"> <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-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" <el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
:value="item.metric">{{item.metric}}</el-option> :value="item.metric">{{item.metric}}</el-option>
@@ -105,7 +108,7 @@
</el-col> </el-col>
</el-row> </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"> <el-col span="12">
<div class="metric-title-label">{{elementInfo.metric}}</div> <div class="metric-title-label">{{elementInfo.metric}}</div>
<div class="li-list-part"> <div class="li-list-part">
@@ -123,7 +126,7 @@
</el-col> </el-col>
<el-col span="12"> <el-col span="12">
<div class="li-list-part-label-val-list" > <div class="li-list-part-label-val-list" >
<el-form-item class="metric-title-position" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" > <el-form-item class="metric-title-position" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
<el-row class="metric-title-row-position" > <el-row class="metric-title-row-position" >
<!--多选列表 --> <!--多选列表 -->
<el-col span="20" > <el-col span="20" >
@@ -319,7 +322,12 @@ export default {
//解析expression，=>标签列表，值列表（index对应），设置selectedTagList及tagList里的isSelect为true //解析expression，=>标签列表，值列表（index对应），设置selectedTagList及tagList里的isSelect为true
var expression = this.target.expression; var expression = this.target.expression;
//alert('expression=='+expression); //alert('expression=='+expression);
this.elementInfo.metric = expression.substring(0,expression.indexOf('{')); if(expression.indexOf('{')>-1){
this.elementInfo.metric = expression.substring(0,expression.indexOf('{'));
}else {
this.elementInfo.metric = expression;
}
//alert(this.elementInfo.metric); //alert(this.elementInfo.metric);
//this.selectMetric(); // 获取tag //this.selectMetric(); // 获取tag
this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => { this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
@@ -344,9 +352,10 @@ export default {
this.elementInfo.tagList.push(tagObj); this.elementInfo.tagList.push(tagObj);
}); });
} }
if(expression.indexOf('{')>-1){
let labValArrStr = expression.substring(expression.indexOf('{')+1,expression.indexOf('}')); let labValArrStr = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
this.stringToTags(labValArrStr); this.stringToTags(labValArrStr);
}
}else { }else {
this.elementInfo.tagList = []; this.elementInfo.tagList = [];
} }
@@ -355,7 +364,6 @@ export default {
}, },
//字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4' //字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4'
stringToTags(str) { stringToTags(str) {
//alert("str=="+str);
let labArr = str.split(','); let labArr = str.split(',');
labArr.forEach((item, index) => {//b=~'1|2|3' labArr.forEach((item, index) => {//b=~'1|2|3'
let labName = item.substring(0,item.indexOf('=')); let labName = item.substring(0,item.indexOf('='));

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

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