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

feat:新增功能

Browse Source 
1.panel图表按时间查询功能（查询时间默认最近1小时）
2.panel图表按图表名称查询功能
3.panel图表刷新功能（完成的是图表上的刷新图标，定期刷新还未完成）
fix:修改BUG
1.修改图表数据查询接口URL
This commit is contained in:
hanyuxia
2020-01-08 16:44:41 +08:00
parent 7cc8c1b065
commit 63fcf08116
8 changed files with 148 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,14 +15,14 @@
<line-chart-block v-if="item.type === 'line' || item.type === 'bar' || item.type === 4" :key="'inner' + item.id"
ref="editChart"
@on-refresh-data=""
@on-refresh-data="refreshChart"
@on-remove-chart-block="removeChart"
@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=""
@on-refresh-data="refreshChart"
@on-remove-chart-block="removeChart"
@on-edit-chart-block="editData"
:panel-id="filter.panelId"
@@ -34,7 +34,7 @@
</template>
<script>
import axios from 'axios';
//import bus from '../../libs/bus';
import bus from '../../libs/bus';
import lineChartBlock from './line-chart-block';
import chartTable from './chart-table';
@@ -81,7 +81,11 @@ export default {
};
if (!param.query) delete param.query;
//根据panelId获得panel下的所有图表
this.$get('panel/'+ params.panelId+'/charts').then(response => {
let searchTitleStr = '';
if(this.filter.searchName&&this.filter.searchName!=''){
searchTitleStr = '?title='+this.filter.searchName;
}
this.$get('panel/'+ params.panelId+'/charts'+searchTitleStr).then(response => {
if (response.code === 200) {
if(response.data.list){
this.dataList = response.data.list;
@@ -117,13 +121,13 @@ export default {
} else {
let startTime = '';
let endTime = '';
if (filterType === 'refresh') {//刷新：需要根据刷新周期来？？？
if (filterType === 'refresh') {//刷新
const now = new Date();
const origin = new Date(this.filter.end_time);
const numInterval = now.getTime() - origin.getTime();
if (numInterval >= 6000) {
if (numInterval >= 60000) {//大于1分钟，则start、end均往后移numInterval，否则时间不变
startTime = this.getNewTime(this.filter.start_time, numInterval);
endTime = bus.timeFormate(now, 'yyyy/MM/dd-hh:mm:ss');
endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
} else {
startTime = this.filter.start_time;
endTime = this.filter.end_time;
@@ -132,15 +136,10 @@ export default {
startTime = this.filter.start_time;
endTime = this.filter.end_time;
}
//测试数据----之后会要去掉
startTime='2020-01-02T10:10:30.781Z';
endTime = '2020-01-02T20:10:30.781Z';
this.$nextTick(() => {
const axiosArr = chartItem.elements.map((ele) => {
const filterItem = ele;
return this.$get('http://192.168.40.247:9090/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step=3600s');
return this.$get('/prom/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step=3600s');
});
// 一个图表的所有element单独获取数据
axios.all(axiosArr).then((res) => {
@@ -200,8 +199,7 @@ export default {
}
*/
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(':');
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm');
tableData.push({//表格数据
label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
metric: queryItem.metric.__name__,//metric列
@@ -272,7 +270,7 @@ export default {
getNewTime(time, num) {
const date = new Date(time);
const newDate = new Date(parseInt(date.getTime(), 10) + num);
return bus.timeFormate(newDate, 'yyyy/MM/dd-hh:mm:ss');
return bus.timeFormate(newDate, 'yyyy-MM-dd hh:mm:ss');
},
// 删除图表
removeChart(chartId) {
@@ -289,7 +287,6 @@ export default {
this.$emit('on-edit-chart', chart);
}
},
/*
// 刷新列表中的一个图表
refreshChart(chartId) {
this.dataList.forEach((item, index) => {
@@ -298,6 +295,7 @@ export default {
}
});
},
/*
// 刷新数据
refreshData() {
this.getData(this.filter);

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

@@ -61,4 +61,8 @@
font-size: 24px;
font-weight: 600;
}
.chart-table-col{
width: 100%;
}
}

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

@@ -11,13 +11,13 @@
<div class="edit">
<!-- v-if="firstShow" -->
<div class="list-icon">
<span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" v-if="showSetting">
<span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" >
<i class="el-icon-refresh-right"></i>
</span>
<span @click="editChart" :title="$t('dashboard.edit')" class="set-icon" v-if="showSetting">
<span @click="editChart" :title="$t('dashboard.edit')" class="set-icon">
<i class="el-icon-edit-outline"></i>
</span>
<span @click="removeChart" :title="$t('dashboard.delete')" class="set-icon" v-if="showSetting">
<span @click="removeChart" :title="$t('dashboard.delete')" class="set-icon" >
<i class="el-icon-delete"></i>
</span>
<span @click="showAllScreen" :title="$t('dashboard.screen')" class="set-icon">
@@ -30,10 +30,10 @@
<div class="mt-10">
<!--
<el-table size="small" :loading="tableLoading">-->
<el-table :data="seriesItem" height="350" border style="width: 100%">
<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="125" 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>
@@ -67,11 +67,6 @@ export default {
type: Number,
default: 0,
},
// 展示设置内容
showSetting: {
type: Boolean,
default: true,
},
},
data() {
return {

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

@@ -5,7 +5,7 @@
<div class="line-chart-block" >
<div class="edit">
<div class="list-icon" v-if="firstShow">
<div class="list-icon" >
<span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" v-if="showSetting">
<i class="el-icon-refresh-right"></i>
</span>
@@ -103,7 +103,7 @@ export default {
end_time: '',
},
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
firstShow: false, // 默认不显示操作按钮,
// firstShow: false, // 默认不显示操作按钮,
};
},
computed: {
@@ -120,19 +120,12 @@ export default {
methods: {
// chartSite用于区分是全屏显示还是局部显示
initChart(chartInfo, dataArg, ele, chartSite,legend) {
this.firstShow = true; // 展示操作按键
//this.firstShow = true; // 展示操作按键
const self = this;
this.chartType = ''; // 图表类型
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 = {
@@ -324,6 +317,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);
@@ -370,6 +364,7 @@ export default {
});
// eslint-disable-next-line
this.echartStore.setOption(option);//显示全屏界面
this.echartStore.hideLoading();
}
this.echartStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
},
@@ -397,7 +392,11 @@ export default {
editChart() {
this.$emit('on-edit-chart-block', this.data.id);
},
// 重新请求数据 刷新操作
refreshChart() {
this.echartStore.showLoading();
this.$emit('on-refresh-data', this.data.id);
},
/*
handleClose(done) {
/*
@@ -422,11 +421,7 @@ export default {
},
});
},
// 重新请求数据 刷新操作-> console, create-board
refreshChart() {
this.highchartStore.showLoading();
this.$emit('on-refresh-data', this.data.id);
},
// 全屏查看
showAllScreen() {
// 初始化同步时间

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

@@ -20,6 +20,9 @@ const cn = {
title:'仪表盘',
panel:{
title:'看板',
searchItem:{
name:'标题'
},
//面板-侧滑框
createPanelTitle: "创建面板",
createPanelTitleSec:"创建新面板",
@@ -67,7 +70,14 @@ const cn = {
recSevenDay:'近7日',
recOneMonth:'近一个月',
curMonth:'本月',
lastMonth:'上月'
lastMonth:'上月',
refreshInterval:{
never:'从不',
oneMinute:'1分钟',
threeMinutes:'3分钟',
fiveMinutes:'5分钟',
tenMinutes:'10分钟',
}
},
metric:{
name:"指标名称",

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

@@ -25,6 +25,9 @@ const en = {
title:'Dashboard',
panel:{
title:'Panel',
searchItem:{
name:'Title'
},
//面板-侧滑框
createPanelTitle: "Create Panel",
createPanelTitleSec:"Create New Panel",
@@ -72,7 +75,14 @@ const en = {
recSevenDay:'recent week',
recOneMonth:'recent month',
curMonth:'this month',
lastMonth:'last month'
lastMonth:'last month',
refreshInterval:{
never:'never',
oneMinute:'1 min',
threeMinutes:'3 mins',
fiveMinutes:'5 mins',
tenMinutes:'10 mins',
}
},
metric:{
name:"Metric",
@@ -111,7 +121,6 @@ const en = {
},
tip: {
confirmDelete: "Confirm Delete?",
assetConfirmDelete: 'Its associated Endpoints and Alert Rules will also be deleted, confirm delete?',
yes: "Yes",
no: "No",
deleteSuccess: "Successfully Deleted",

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

@@ -337,7 +337,6 @@
// 每个模块均有返回,当全部模块返回完成时,将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;
// 保存完成,进行删除操作

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

@@ -65,6 +65,20 @@
color: #F98D9A;
}
/* end--Panel-自定义可编辑的el-select下拉框样式*/
.panel-select-width{
width: 150px;
}
.panel-refresh-interval{
margin-right: 5px;
float: right;
}
.panel-refresh-interval-select{
width: 95px;
}
.panel-calendar{
float: right;
margin-right: 1px;
}
</style>
<template>
@@ -81,8 +95,8 @@
<button @click="toAddChart" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</button>
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
<el-select class="right-box-row-with-btn" popper-class="" v-model="showPanel.id" placeholder="" size="small" @change="panelChange">
<div class="top-tool-search float-right"><search-input ref="searchInput" :searchMsg="searchMsg" @search="search" ></search-input></div>
<el-select class="panel-select-width" popper-class="" v-model="showPanel.id" placeholder="" size="small" @change="panelChange">
<el-option >
<span class="panel-dropdown-btn-create" @click.stop="toAdd" >{{$t('dashboard.panel.createPanelTitleSec')}}</span>
</el-option>
@@ -99,12 +113,27 @@
<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="panel-refresh-interval" >
<div class="block">
<!--
<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-refresh-right"></i></span>
</button>
-->
<el-select class="panel-refresh-interval-select" placeholder="" v-model="interval" @change="selectInterval" size="small">
<el-option v-for="item in intervalList"
:value="item.value"
:label="item.name"
:key="item.value">{{item.name}}</el-option>
</el-select>
</div>
</div>
<div class="panel-calendar" >
<div class="block">
<el-date-picker size="small" ref="calendar"
format="yyyy/MM/dd HH:mm"
@change="dateChange"
v-model="value2"
v-model="searchTime"
type="datetimerange"
:picker-options="pickerOptions"
:range-separator="$t('dashboard.panel.to')"
@@ -132,6 +161,7 @@
<script>
import ChartBox from "./chartBox";
import ChartList from '../../charts/chart-list';
import bus from '../../../libs/bus';
export default {
name: "panel",
@@ -222,7 +252,24 @@
}
}]
},
value2: [new Date(), new Date()],
searchTime: [new Date().setHours(new Date().getHours()-1),new Date()],
intervalList: [{
value: 0,
name: this.$t("dashboard.panel.refreshInterval.never"),
}, {
value: 60,
name: this.$t("dashboard.panel.refreshInterval.oneMinute"),
}, {
value: 180,
name: this.$t("dashboard.panel.refreshInterval.threeMinutes"),
}, {
value: 300,
name: this.$t("dashboard.panel.refreshInterval.fiveMinutes"),
}, {
value: 600,
name: this.$t("dashboard.panel.refreshInterval.tenMinutes"),
}],
interval: 0,
showPanel:{//panel下拉列表
id:'',
name:''
@@ -252,30 +299,27 @@
panelData: [],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
searchLabelList: [
/*
{
id: 1,
name: this.$t("dashboard.panel.panelForm.panelId"),
type: 'input',
label: 'id',
disabled: false
},{
id: 2,
name: this.$t("dashboard.panel.panelForm.panelName"),
name: this.$t("dashboard.panel.searchItem.name"),
type: 'input',
label: 'name',
disabled: false
}],
}
*/],
},
searchLabel: {}, //搜索参数
//---图表相关参数--start
dataList: [], // 数据列表
searchName: '', // 搜索名称
//searchName: '', // 搜索名称
filter: { // 过滤条件
//productId: 0,
panelId: 0,
start_time: '',
end_time: '',
searchName:''
},
panelId: 0,
//removeModal: false, // 删除弹出
@@ -290,6 +334,7 @@
methods: {
//面板相关操作
panelChange(){
this.$refs.searchInput.select();
this.filter.panelId = this.showPanel.id;
this.getData(this.filter);
},
@@ -383,11 +428,27 @@
},
// 获取数据,用在子页面
getData(params) {
if( params.start_time===''||params.end_time===''){
let now = new Date();
let endTimeTmp = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
let startTimeTmp = bus.timeFormate(now.setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
params.start_time = startTimeTmp;
params.end_time = endTimeTmp;
}
this.$refs.chartList.initData(params);
},
/*图表相关操作--end*/
/*时间条件查询--start*/
// 选择日期变化
dateChange() {
this.$refs.searchInput.select();
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
this.filter.panelId = this.showPanel.id;
this.getData(this.filter);
},
/*时间条件查询--end*/
//公用操作
jumpTo(data,id) {
this.$store.state.assetData.moduleData = data
@@ -400,9 +461,7 @@
});
},
getTableData: function() {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$get('panel', this.searchLabel).then(response => {
this.$get('panel').then(response => {
if (response.code === 200) {
this.panelData = response.data.list;
if( response.data.list.length>0 ){
@@ -433,19 +492,26 @@
this.getTableData();
},
search: function(searchObj) {
console.info(searchObj);
this.searchLabel = {};
let containTitle = false;
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
if(item==='name'){
this.filter.searchName = searchObj[item];//此处就一个条件
containTitle= true;
}
}
this.getTableData();
}
if(!containTitle){
this.filter.searchName = '';
}
this.filter.panelId = this.showPanel.id;
this.getData(this.filter);
}
},
created() {
this.getTableData();
this.getData(this.filter);
},
mounted: function() {
},