fix:修改面板点击刷新按钮时间未改变的问题

This commit is contained in:
zhangyu
2020-10-20 17:03:15 +08:00
parent 70a55f93c2
commit cf933dbbd4
5 changed files with 86 additions and 7 deletions

View File

@@ -27,7 +27,7 @@
<i slot="suffix" class="el-input__icon nz-icon nz-icon-search" @click="focusInput" style="float: right"></i>
</el-input>
</div>
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" v-if="from=='asset'"></pick-time>
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" v-if="from=='asset'" ref="pickTime"></pick-time>
<export-excel
export-file-name="chart"
export-url="/panel/export"
@@ -67,7 +67,7 @@
</el-input>
</div>
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime"></pick-time>
<button @click="addChart" :title="$t('overall.createChart')"
class="nz-btn nz-btn-size-normal nz-btn-style-light ">
<i class="nz-icon-create-square nz-icon"></i>
@@ -309,12 +309,36 @@
// 选择日期变化
dateChange(val) {
// this.searchTime = [...val];
let nowTimeType=this.$refs.pickTime.$refs.timePicker.nowTimeType;
this.setSearchTime(nowTimeType.type,nowTimeType.value);
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*/
setSearchTime(type,val){//设置searchTime
if(type==='minute'){
let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
this.$set(this.searchTime, 0, startTime);
this.$set(this.searchTime, 1, endTime);
this.$set(this.searchTime, 2, val + "m");
}else if(type==='hour'){
let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
this.$set(this.searchTime, 0, startTime);
this.$set(this.searchTime, 1, endTime);
this.$set(this.searchTime, 2, val + "h");
}else if(type==='date'){
let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
this.$set(this.searchTime, 0, startTime);
this.$set(this.searchTime, 1, endTime);
this.$set(this.searchTime, 2, val + "d");
}
this.$refs.pickTime.$refs.timePicker.searchTime=this.searchTime;
},
//公用操作
getTableData(linkId) {
if (this.from == "alertRule" || this.from == "endpoint") {

View File

@@ -1,6 +1,6 @@
<template>
<div class="interval-refresh ">
<time-picker v-if="showTimePicker" ref="timePicker" class="time-picker" @change="dateChange" :default-pick="defaultPick" :show-empty="showEmpty"></time-picker>
<time-picker v-if="showTimePicker" ref="timePicker" class="time-picker" @change="dateChange" :default-pick="defaultPick" :show-empty="showEmpty" v-model="this.searchTime"></time-picker>
<chart-unit v-model="unit" v-if="useChartUnit"></chart-unit>
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" v-show="useRefresh" style="height: 24px;line-height: 24px;vertical-align: middle;">
<button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="refreshDataFunc">

View File

@@ -223,6 +223,12 @@ export default {
value:30,
}
],
nowTimeType:{
id:4,
text:this.$t("dashboard.panel.lastOneHour"),
type:'hour',
value:1,
},
};
},
methods: {
@@ -260,6 +266,7 @@ export default {
//left(){},
//right(){},
timeChange(val) {
this.nowTimeType=val;
this.$set(this.showTime, 'id', val.id);
this.$set(this.showTime, 'text', val.text);
if (!val) {
@@ -354,7 +361,7 @@ export default {
}
}
}
}
},
},
mounted: function () {
/*

View File

@@ -4,7 +4,7 @@
<!-- 顶部工具栏 -->
<div class="top-tools" style="z-index: 1">
<div class="top-tool-main-right">
<pick-time :refresh-data-func="expressionChange" v-model="filterTime" @unitChange="chartUnitChange">
<pick-time :refresh-data-func="expressionChange" v-model="filterTime" @unitChange="chartUnitChange" ref="pickTime">
<template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
</pick-time>
<button :disabled="saveDisabled" type="button" @click="saveChart"
@@ -424,13 +424,37 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
}, 200)
},
expressionChange: function () {
//console.log(this.filterTime)
let nowTimeType=this.$refs.pickTime.$refs.timePicker.nowTimeType;
console.log(this.filterTime,nowTimeType);
this.setSearchTime(nowTimeType.type,nowTimeType.value);
if (this.expressions && this.expressions.length >= 1) {
this.queryTableData();
this.queryChartData()
this.storeHistory();
}
},
setSearchTime(type,val){//设置searchTime
if(type==='minute'){
let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
this.$set(this.filterTime, 0, startTime);
this.$set(this.filterTime, 1, endTime);
this.$set(this.filterTime, 2, val + "m");
}else if(type==='hour'){
let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
this.$set(this.filterTime, 0, startTime);
this.$set(this.filterTime, 1, endTime);
this.$set(this.filterTime, 2, val + "h");
}else if(type==='date'){
let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
this.$set(this.filterTime, 0, startTime);
this.$set(this.filterTime, 1, endTime);
this.$set(this.filterTime, 2, val + "d");
}
this.$refs.pickTime.$refs.timePicker.searchTime=this.filterTime;
},
storeHistory:function(){
let expire=24;
let historyJson=localStorage.getItem(this.historyParam.key);

View File

@@ -57,7 +57,7 @@
</el-input>
</div>
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime"></pick-time>
<export-excel
export-file-name="chart"
export-url="/panel/export"
@@ -384,11 +384,35 @@
/*时间条件查询--start*/
// 选择日期变化
dateChange(val) {
let nowTimeType=this.$refs.pickTime.$refs.timePicker.nowTimeType;
this.setSearchTime(nowTimeType.type,nowTimeType.value);
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);
},
setSearchTime(type,val){//设置searchTime
if(type==='minute'){
let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
this.$set(this.searchTime, 0, startTime);
this.$set(this.searchTime, 1, endTime);
this.$set(this.searchTime, 2, val + "m");
}else if(type==='hour'){
let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
this.$set(this.searchTime, 0, startTime);
this.$set(this.searchTime, 1, endTime);
this.$set(this.searchTime, 2, val + "h");
}else if(type==='date'){
let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
this.$set(this.searchTime, 0, startTime);
this.$set(this.searchTime, 1, endTime);
this.$set(this.searchTime, 2, val + "d");
}
this.$refs.pickTime.$refs.timePicker.searchTime=this.searchTime;
},
/*时间条件查询--end*/
//公用操作
jumpTo(data, id) {