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图表修改时，删除第一个metric时，删除的是第二个metric
2.panel图表新增时的标题为编辑时的标题
This commit is contained in:
hanyuxia
2020-01-07 17:12:48 +08:00
parent caeb1c0a84
commit fca0867d1b
8 changed files with 201 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,14 +20,14 @@
@on-edit-chart-block="editData"
:panel-id="filter.panelId"
:editChartId="'editChartId' + item.id"></line-chart-block>
<!--
<chart-table v-if="item.type === 'table'" ref="editChart" :key="'inner' + item.id"
@on-refresh-data="refreshChart"
@on-refresh-data=""
@on-remove-chart-block="removeChart"
@on-edit-chart-block="editData"
:panel-id="filter.panelId"
:editChartId="'editChartId' + item.id"></chart-table>
-->
</div>
<el-row v-if="dataList.length === 0" class="noData"></el-row>
</div>
@@ -36,7 +36,7 @@
import axios from 'axios';
//import bus from '../../libs/bus';
import lineChartBlock from './line-chart-block';
//import chartTable from './chart-table';
import chartTable from './chart-table';
export default {
name: 'chartList',
@@ -44,7 +44,7 @@ export default {
},
components: {
lineChartBlock,
//chartTable,
chartTable,
},
data() {
return {
@@ -189,6 +189,7 @@ export default {
seriesItem.theData.name = host;
seriesItem.metric_name = seriesItem.theData.name;
// 将秒改为毫秒
//alert('table=='+JSON.stringify(queryItem))
seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
/*曲线汇总暂不需要
if (sumData.data[dpsIndex]) {
@@ -198,15 +199,19 @@ export default {
sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
}
*/
let t_date = new Date(dpsItem[0] * 1000);
let timeTmp = [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + "\n"
+ [t_date.getHours(), t_date.getMinutes()].join(':');
tableData.push({//表格数据
label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
metric: queryItem.metric.__name__,//metric列
time: timeTmp,//采集时间
value: dpsItem[1],//数值
});
return [dpsItem[0] * 1000, dpsItem[1]];
});
tableData.push({//表格数据
name: host.slice(host.indexOf(', ') + 1),
metric: queryItem.metric.__name__,
time: (dpsArr[dpsArr.length - 1][0]) * 1000,
value: dpsArr[dpsArr.length - 1][1],
});
series.push(seriesItem.theData);
} else if (chartItem.elements && chartItem.elements[innerPos]) {
// 无数据提示
/*
@@ -229,7 +234,7 @@ export default {
this.filter.panelId, this.filter);
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 4) {
if (series.length && chartItem.type === 4) {//曲线汇总
series.push(sumData);
//series.push(sumData);//后续需要
}
this.$refs.editChart[index].setData(chartItem, series,
this.filter.panelId, this.filter,legend);

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

@@ -9,8 +9,9 @@
padding: 10px;
margin-bottom: 10px;
.table-title {
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
font-size: 14px;
font-family: Arial;
font-size: 18px;
font-weight:bold;
}
.edit {
// position: absolute;

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

@@ -11,26 +11,34 @@
<div class="edit">
<!-- v-if="firstShow" -->
<div class="list-icon">
<span @click="refreshChart" title="刷新" class="set-icon" v-if="showSetting">
<Icon type="refresh"></Icon>
<span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" v-if="showSetting">
<i class="el-icon-refresh-right"></i>
</span>
<span @click="editChart" title="编辑" class="set-icon" v-if="showSetting">
<Icon type="compose"></Icon>
<span @click="editChart" :title="$t('dashboard.edit')" class="set-icon" v-if="showSetting">
<i class="el-icon-edit-outline"></i>
</span>
<span @click="removeChart" title="删除" class="set-icon" v-if="showSetting">
<Icon type="trash-a"></Icon>
<span @click="removeChart" :title="$t('dashboard.delete')" class="set-icon" v-if="showSetting">
<i class="el-icon-delete"></i>
</span>
<span @click="showAllScreen" title="全屏" class="set-icon">
<Icon type="arrow-expand"></Icon>
<span @click="showAllScreen" :title="$t('dashboard.screen')" class="set-icon">
<i class="el-icon-full-screen"></i>
</span>
</div>
</div>
</div>
</div>
<div class="mt-10">
<Table border size="small" :height="350" :data="seriesItem" :columns="columns" :loading="tableLoading"></Table>
<!--
<el-table size="small" :loading="tableLoading">-->
<el-table :data="seriesItem" height="350" border style="width: 100%">
<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="125" sortable></el-table-column>
<el-table-column prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" sortable></el-table-column>
</el-table>
</div>
<Modal title="查看" v-model="screenModal" width="96%">
<!--全屏
<el-dialog title="查看" v-model="screenModal" width="96%">
<div class="clearfix">
<div class="float-left table-title">
{{data.title}}
@@ -42,13 +50,12 @@
<div class="mt-10">
<Table border size="small" :height="350" :data="seriesItem" :columns="columns" :loading="tableLoading"></Table>
</div>
</Modal>
</el-dialog>
-->
</div>
</template>
<script>
// import axios from 'axios';
import bus from '../../libs/bus';
// import { getQueryChart } from '../../models/service';
export default {
name: 'chartTable',
@@ -95,7 +102,7 @@ export default {
width: 200,
sortable: true,
}, {
title: 'tag',
title: 'Label',//tag
key: 'name',
minWidth: 200,
sortable: true,

17
nezha-fronted/src/components/common/language/cn.js
View File

@@ -51,6 +51,23 @@ const cn = {
metric:"指标",
addMetric:"添加指标",
},
chartTableColumn:{
metric:'指标',
label:'标签',
time:'时间',
value:'值',
},
startTime:'开始时间',
endTime:'结束时间',
to:'至',
recOne:'近1小时',
recFour:'近4小时',
recOneDay:'近1日',
yesterday:'昨日',
recSevenDay:'近7日',
recOneMonth:'近一个月',
curMonth:'本月',
lastMonth:'上月'
},
metric:{
name:"指标名称",

17
nezha-fronted/src/components/common/language/en.js
View File

@@ -56,6 +56,23 @@ const en = {
metric:"Metric",
addMetric:"Add Metric",
},
chartTableColumn:{
metric:'metric',
label:'label',
time:'time',
value:'value',
},
startTime:'startTime',
endTime:'endTime',
to:'To',
recOne:'recent hour',
recFour:'recent 4 hours',
recOneDay:'recent day',
yesterday:'yesterday',
recSevenDay:'recent week',
recOneMonth:'recent month',
curMonth:'this month',
lastMonth:'last month'
},
metric:{
name:"Metric",

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

@@ -125,7 +125,6 @@
<el-row class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
<chart-metric ref="chartTag"
:product-id="productId"
:pointer="index"
:metric-list="metricList"
:count-total="elements.length"
@@ -325,7 +324,9 @@
},
// 删除指标,第一步, 新方法
deleteTarget(index) {
//alert('box第一步，循环所有的metric，为什么要循环？？');
this.deleteIndex = index;
// alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
this.$refs.chartTag.forEach((item) => {
// 子组件保存内容到bus
item.subSave();
@@ -334,13 +335,18 @@
// subSave保存成功后回调,第二步
subOk() {
// 每个模块均有返回,当全部模块返回完成时,将sub计数器重置
//alert('box第二步，subCount和元素个数一样了，就从deleteIndex开始删除一个元素，this.subCount='+this.subCount);
this.subCount += 1;
//alert(this.elements.length);
if (this.subCount === this.elements.length) {
this.subCount = 0;
// 保存完成,进行删除操作
//alert('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
//alert('box第二步，删除之前，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
this.elements.splice(this.deleteIndex, 1);
this.elementTarget.splice(this.deleteIndex, 1);
this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[]
bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);
//alert('box第二步，删除完毕，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
this.$nextTick(() => {
this.$refs.chartTag.forEach((item, index) => {
item.setSubdata(index); // 将数据从bus重新赋值

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

@@ -83,7 +83,7 @@
<el-row v-show="tableShow == 2">
<el-col span="22">
<el-form-item prop="expression" ><!--expression和metric的验证只能有一个，不能同时存在？？:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
<el-input size="mini" 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-col>
<el-col span="2">
@@ -193,22 +193,37 @@ export default {
methods: {
// 删除该选项,第一步,传递要删除的参数
deleteTarget() {
//alert('metric第一步，删除的指针，之后回调box的第一个步'+this.pointer);
this.$emit('on-delete-target', this.pointer);
},
// 第二步,on-delete-target回调，保存数据
subSave() {
//alert('metric第二步，bus.chartAddInfo.metricTarget,指针'+JSON.stringify(bus.chartAddInfo.metricTarget)+'==pointer'+this.pointer);
bus.chartAddInfo.metricTarget[this.pointer] = this.elementInfo;
//alert('metric第二步，保存信息到bus'+JSON.stringify(this.elementInfo))
this.$emit('sub-save-ok');
},
// 第三步,将数据重新赋值,sub-save-ok回调
setSubdata(index) {
if (index === this.pointer) {
this.elementInfo.metric = bus.chartAddInfo.metricTarget[this.pointer].metric;
//alert('metric第三步，bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
//alert('metric第三步，bus('+this.pointer+')='+JSON.stringify(bus.chartAddInfo.metricTarget[this.pointer]));
this.elementInfo = bus.chartAddInfo.metricTarget[this.pointer];
//alert('metric第三步，index'+index+',如果index是当前pointer('+this.pointer+')，则继续，把bus中的值赋值给当前metric')
//alert('metric第三步，elementInfo='+JSON.stringify(this.elementInfo));
if(this.elementInfo.type==='expert'){
//alert('metric第三步，expert');
// 当该项expression为空时，重置一下
if (!this.elementInfo.expression && this.$refs.metricExpression) {
this.$refs.metricExpression.reset();
}
this.clickTabelShow(2,'expert');
}else {
// alert('metric第三步，normal');
// 当该项metric为空时，重置一下
if (!this.elementInfo.metric && this.$refs.metricSelect) {
this.$refs.metricSelect.reset();
}
this.elementInfo.tagList = bus.chartAddInfo.metricTarget[this.pointer].tagList;
this.clickTabelShow(1,'normal');
}
},
@@ -293,6 +308,7 @@ export default {
//alert('metricSetData'+JSON.stringify(data));
this.setDataFlag = true;
this.target = Object.assign({}, data);
//this.pointer =
if(this.target.type==='expert'){
this.tableShow = 2;
this.elementInfo.type = this.target.type;

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

@@ -66,7 +66,6 @@
}
/* end--Panel-自定义可编辑的el-select下拉框样式*/
</style>
<template>
<div class="panel">
@@ -100,6 +99,21 @@
<span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span>
</el-option>
</el-select>
<div class="float-right" style="margin-right: 10px;">
<div class="block">
<el-date-picker size="small" ref="calendar"
format="yyyy/MM/dd HH:mm"
@change="dateChange"
v-model="value2"
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>
<div class="table-list" >
<div class="box-content">
@@ -127,6 +141,88 @@
show: false,
title: this.$t('dashboard.panel.createPanelTitle')
},
pickerOptions: {
shortcuts: [
{
text: this.$t("dashboard.panel.recOne"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setHours(start.getHours() - 1);
picker.$emit('pick', [start, end]);
}
},{
text: this.$t("dashboard.panel.recFour"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setHours(start.getHours() - 4);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.recOneDay"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 1);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.yesterday"),
onClick(picker) {
const start = new Date();
const end = new Date();
start.setDate(start.getDate() - 1);
start.setHours(0);
start.setMinutes(0);
start.setSeconds(0);
end.setDate(end.getDate() - 1);
end.setHours(23);
end.setMinutes(59);
end.setSeconds(59);
picker.$emit('pick', [start, end]);
}
},{
text: this.$t("dashboard.panel.recSevenDay"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 7);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.recOneMonth"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 30);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.curMonth"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(1);
start.setHours(0);
start.setMinutes(0);
picker.$emit('pick', [start, end]);
}
},{
text: this.$t("dashboard.panel.lastMonth"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(1);
start.setMonth(start.getMonth() - 1);
end.setDate(0);
start.setStart();
end.setEnd();
picker.$emit('pick', [start, end]);
}
}]
},
value2: [new Date(), new Date()],
showPanel:{//panel下拉列表
id:'',
name:''
@@ -238,6 +334,7 @@
},
/*图表相关操作--start*/
toAddChart:function(){
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
this.$refs.addChartModal.show(true);
this.$refs.addChartModal.createData(this.showPanel.id);//初始化创建图表需要的初始数据
},