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

fix：修改自定义时间不生效的问题

Browse Source
This commit is contained in:
zhangyu
2022-04-13 16:22:54 +08:00
parent ff37d50c9a
commit 081677e7dc
1 changed files with 228 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

451
nezha-fronted/src/components/common/timePicker.vue
View File

@@ -4,7 +4,7 @@
:class="{ 'calendar--small': size === 'small' }" :class="{ 'calendar--small': size === 'small' }"
class="calendar" class="calendar"
> >
<div @click="showDropdown" class="date-range-text"> <div @click="showDropdown" class="date-range-text">
<div class="calendar-popover-text"> <div class="calendar-popover-text">
<i class="nz-icon nz-icon-time"></i> <i class="nz-icon nz-icon-time"></i>
@@ -57,7 +57,6 @@
<div @click="myDatePickerShow('end')" tabindex="2" class="content-input"> <div @click="myDatePickerShow('end')" tabindex="2" class="content-input">
<el-input v-model="searchTime[1]" @change="dateChange('end',searchTime[1])"> </el-input> <el-input v-model="searchTime[1]" @change="dateChange('end',searchTime[1])"> </el-input>
</div> </div>
<div> <div>
<el-button <el-button
@@ -124,37 +123,37 @@
</template> </template>
<script> <script>
import bus from "@/libs/bus"; import bus from '@/libs/bus'
export default { export default {
name: "timePicker", name: 'timePicker',
props: { props: {
defaultPick: Number, defaultPick: Number,
showEmpty: { default: false, type: Boolean }, showEmpty: { default: false, type: Boolean },
size: { size: {
type: String, type: String
}, },
sign:[Number,String] sign: [Number, String]
}, },
data() { data () {
return { return {
whoChoose:'', whoChoose: '',
searchTimeValue:'', searchTimeValue: '',
rangeHistory: [], rangeHistory: [],
rangeHistoryArr: [], rangeHistoryArr: [],
address: "", address: '',
utc: localStorage.getItem("timezoneOffset"), utc: localStorage.getItem('timezoneOffset'),
utcStr: "", utcStr: '',
dropdownFlag: false, dropdownFlag: false,
isPopoverDisabled: false, isPopoverDisabled: false,
isCustom: false, isCustom: false,
searchTime: [ searchTime: [
bus.timeFormate(bus.getOffsetTimezoneData(-1)), bus.timeFormate(bus.getOffsetTimezoneData(-1)),
bus.timeFormate(bus.getOffsetTimezoneData()), bus.timeFormate(bus.getOffsetTimezoneData())
], ],
showTime: { showTime: {
id: 4, id: 4,
text: this.$t("dashboard.panel.lastOneHour"), text: this.$t('dashboard.panel.lastOneHour')
}, },
timeData: [ timeData: [
// { // {
@@ -164,208 +163,210 @@ export default {
// }, // },
{ {
id: 12, id: 12,
text: this.$t("dashboard.panel.noDate"), text: this.$t('dashboard.panel.noDate'),
value: 0, value: 0
}, },
{ {
id: 1, id: 1,
text: this.$t("dashboard.panel.lastFiveMin"), text: this.$t('dashboard.panel.lastFiveMin'),
type: "minute", type: 'minute',
value: 5, value: 5
}, },
{ {
id: 2, id: 2,
text: this.$t("dashboard.panel.lastFifteenMin"), text: this.$t('dashboard.panel.lastFifteenMin'),
type: "minute", type: 'minute',
value: 15, value: 15
}, },
{ {
id: 3, id: 3,
text: this.$t("dashboard.panel.lastThirtyMin"), text: this.$t('dashboard.panel.lastThirtyMin'),
type: "minute", type: 'minute',
value: 30, value: 30
}, },
{ {
id: 4, id: 4,
text: this.$t("dashboard.panel.lastOneHour"), text: this.$t('dashboard.panel.lastOneHour'),
type: "hour", type: 'hour',
value: 1, value: 1
}, },
{ {
id: 5, id: 5,
text: this.$t("dashboard.panel.lastThreeHour"), text: this.$t('dashboard.panel.lastThreeHour'),
type: "hour", type: 'hour',
value: 3, value: 3
}, },
{ {
id: 6, id: 6,
text: this.$t("dashboard.panel.lastSixHour"), text: this.$t('dashboard.panel.lastSixHour'),
type: "hour", type: 'hour',
value: 6, value: 6
}, },
{ {
id: 7, id: 7,
text: this.$t("dashboard.panel.lastTwelveHour"), text: this.$t('dashboard.panel.lastTwelveHour'),
type: "hour", type: 'hour',
value: 12, value: 12
}, },
{ {
id: 8, id: 8,
text: this.$t("dashboard.panel.lastTwentyFourHour"), text: this.$t('dashboard.panel.lastTwentyFourHour'),
type: "hour", type: 'hour',
value: 24, value: 24
}, },
{ {
id: 9, id: 9,
text: this.$t("dashboard.panel.lastTwoDay"), text: this.$t('dashboard.panel.lastTwoDay'),
type: "date", type: 'date',
value: 2, value: 2
}, },
{ {
id: 10, id: 10,
text: this.$t("dashboard.panel.lastSevenDay"), text: this.$t('dashboard.panel.lastSevenDay'),
type: "date", type: 'date',
value: 7, value: 7
}, },
{ {
id: 11, id: 11,
text: this.$t("dashboard.panel.lastThirtyDay"), text: this.$t('dashboard.panel.lastThirtyDay'),
type: "date", type: 'date',
value: 30, value: 30
}, }
], ],
nowTimeType: { nowTimeType: {
id: 4, id: 4,
text: this.$t("dashboard.panel.lastOneHour"), text: this.$t('dashboard.panel.lastOneHour'),
type: "hour", type: 'hour',
value: 1, value: 1
}, }
}; }
}, },
mounted() { mounted () {
this.getItem(); this.getItem()
this.getUtcStr(); this.getUtcStr()
this.getRangeHistoryArr(); this.getRangeHistoryArr()
console.log(this.sign); console.log(this.sign)
}, },
methods: { methods: {
getItem() { getItem () {
this.rangeHistory = localStorage.getItem("date-range-history"+this.sign) this.rangeHistory = localStorage.getItem('date-range-history' + this.sign)
? JSON.parse(localStorage.getItem("date-range-history"+this.sign)) ? JSON.parse(localStorage.getItem('date-range-history' + this.sign))
: []; : []
this.address = localStorage.getItem("nz-sys-timezone"); this.address = localStorage.getItem('nz-sys-timezone')
this.utc = localStorage.getItem("timezoneOffset"); this.utc = localStorage.getItem('timezoneOffset')
}, },
myDatePickerShow(item) { myDatePickerShow (item) {
this.whoChoose = item this.whoChoose = item
this.$refs.calendar.pickerVisible = true; this.$refs.calendar.pickerVisible = true
}, },
historyChange(item) { historyChange (item) {
this.searchTime[0] = item.start; this.searchTime[0] = item.start
this.searchTime[1] = item.end; this.searchTime[1] = item.end
this.isCustom = true; this.isCustom = true
this.showDropdown(); this.showDropdown()
this.$emit("change", this.searchTime); this.$emit('change', this.searchTime)
this.setSearchTime('','',this.searchTime) this.setSearchTime('', '', this.searchTime)
}, },
getRangeHistoryArr() { getRangeHistoryArr () {
const arr = this.rangeHistory.slice(0, 3) const arr = this.rangeHistory.slice(0, 3)
this.rangeHistoryArr = arr this.rangeHistoryArr = arr
}, },
getUtcStr() { getUtcStr () {
let str = "UTC "; const str = 'UTC '
this.utcStr = str + this.utc; this.utcStr = str + this.utc
}, },
timeRange(item) { timeRange (item) {
this.showTime = this.nowTimeType = {
this.isCustom = true; id: 0,
text: this.$t('dashboard.panel.customTimeRange'),
value: -1
}
this.isCustom = true
this.rangeHistory.unshift({ this.rangeHistory.unshift({
start: item[0], start: item[0],
end: item[1], end: item[1]
}); })
localStorage.setItem( localStorage.setItem(
"date-range-history"+this.sign, 'date-range-history' + this.sign,
JSON.stringify(this.rangeHistory) JSON.stringify(this.rangeHistory)
); )
this.searchTime[2]='' this.$set(this.searchTime, 2, '')
this.showDropdown(); this.showDropdown()
this.getRangeHistoryArr() this.getRangeHistoryArr()
console.log('timerange里searchTime',this.searchTime); console.log('timerange里searchTime', this.searchTime)
this.$emit("change", this.searchTime); this.setSearchTime('', '', this.searchTime)
this.setSearchTime('','',this.searchTime) this.$emit('change', this.searchTime)
console.log(this.searchTime)
}, },
showDropdown() { showDropdown () {
this.dropdownFlag = !this.dropdownFlag; this.dropdownFlag = !this.dropdownFlag
}, },
dateChange(type,v) { dateChange (type, v) {
if(type == 'start'){ if (type == 'start') {
if(!v){ if (!v) {
const startTime = bus.timeFormate(this.searchTimeValue).trim().split(" ")[0] + ' '; const startTime = bus.timeFormate(this.searchTimeValue).trim().split(' ')[0] + ' '
this.$set(this.searchTime, 0, startTime); this.$set(this.searchTime, 0, startTime)
}else{ } else {
console.log(v); console.log(v)
let str = v.trim().split(' ')[1] const str = v.trim().split(' ')[1]
console.log(str); console.log(str)
let reg = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/ const reg = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/
if(reg.test(str)){ if (reg.test(str)) {
const startTime = bus.timeFormate(v) const startTime = bus.timeFormate(v)
this.$set(this.searchTime, 0, startTime); this.$set(this.searchTime, 0, startTime)
}else{ } else {
this.$set(this.searchTime, 0, ''); this.$set(this.searchTime, 0, '')
} }
} }
}else if(type == 'end'){ } else if (type == 'end') {
if(!v){ if (!v) {
const endTime = bus.timeFormate(this.searchTimeValue).trim().split(" ")[0] + ' '; const endTime = bus.timeFormate(this.searchTimeValue).trim().split(' ')[0] + ' '
this.$set(this.searchTime, 1, endTime); this.$set(this.searchTime, 1, endTime)
}else{ } else {
let str = v.trim().split(' ')[1] const str = v.trim().split(' ')[1]
console.log(str); console.log(str)
let reg = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/ const reg = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/
if(reg.test(str)){ if (reg.test(str)) {
const endTime = bus.timeFormate(v) const endTime = bus.timeFormate(v)
this.$set(this.searchTime, 1, endTime); this.$set(this.searchTime, 1, endTime)
}else{ } else {
this.$set(this.searchTime, 1, ''); this.$set(this.searchTime, 1, '')
} }
} }
} }
this.searchTime[2] = '' this.searchTime[2] = ''
console.log('searchTime',this.searchTime); console.log('searchTime', this.searchTime)
this.$set(this.showTime, "id", 0); this.$set(this.showTime, 'id', 0)
this.$set( this.$set(
this.showTime, this.showTime,
"text", 'text',
this.searchTime[0] + this.searchTime[0] +
" " + ' ' +
this.$t("dashboard.panel.to") + this.$t('dashboard.panel.to') +
" " + ' ' +
this.searchTime[1] this.searchTime[1]
); )
console.log('showTime',this.showTime); console.log('showTime', this.showTime)
}, },
setCustomTime(timeGroup, timeRange) { setCustomTime (timeGroup, timeRange) {
if (timeGroup) { if (timeGroup) {
console.log('timeGroup',timeGroup); console.log('timeGroup', timeGroup)
this.showTime = this.nowTimeType = this.timeData.find( this.showTime = this.nowTimeType = this.timeData.find(
(item) => item.id == timeGroup.id (item) => item.id == timeGroup.id
); )
console.log(this.showTime); console.log(this.showTime)
if (this.showTime) { if (this.showTime) {
this.showTime = Object.assign({}, this.showTime); this.showTime = Object.assign({}, this.showTime)
this.$set(this.searchTime, 0, timeGroup.start_time); this.$set(this.searchTime, 0, timeGroup.start_time)
this.$set(this.searchTime, 1, timeGroup.end_time); this.$set(this.searchTime, 1, timeGroup.end_time)
} else { } else {
const time = this.searchTime.splice(' ') const time = this.searchTime.splice(' ')
this.showTime= this.nowTimeType ={ this.showTime = this.nowTimeType = {
text:time[0] +' ' + this.$t('dashboard.panel.to') +' '+time[1] text: time[0] + ' ' + this.$t('dashboard.panel.to') + ' ' + time[1]
} }
console.log(this.showTime); console.log(this.showTime)
this.$set(this.searchTime, 0, bus.timeFormate(time[0])); this.$set(this.searchTime, 0, bus.timeFormate(time[0]))
this.$set(this.searchTime, 1, bus.timeFormate(time[1])); this.$set(this.searchTime, 1, bus.timeFormate(time[1]))
// this.$set(this.searchTime, 0, bus.timeFormate(timeGroup.start_time)); // this.$set(this.searchTime, 0, bus.timeFormate(timeGroup.start_time));
// this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time)); // this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time));
// this.showTime = this.nowTimeType = { // this.showTime = this.nowTimeType = {
@@ -386,75 +387,74 @@ export default {
// this.$set(this.searchTime, 0, bus.timeFormate(time[0])); // this.$set(this.searchTime, 0, bus.timeFormate(time[0]));
// this.$set(this.searchTime, 1, bus.timeFormate(time[1])); // this.$set(this.searchTime, 1, bus.timeFormate(time[1]));
// } // }
// this.$set(this.searchTime, 0, bus.timeFormate(time[0])); // this.$set(this.searchTime, 0, bus.timeFormate(time[0]));
} }
} else { } else {
console.log('no timegroup'); console.log('no timegroup')
this.showTime = this.nowTimeType = { this.showTime = this.nowTimeType = {
id: 4, id: 4,
text: this.$t("dashboard.panel.lastOneHour"), text: this.$t('dashboard.panel.lastOneHour'),
type: "hour", type: 'hour',
value: 1, value: 1
}; }
const time = bus.getTimezontDateRange(); const time = bus.getTimezontDateRange()
this.$set(this.searchTime, 0, time[0]); this.$set(this.searchTime, 0, time[0])
this.$set(this.searchTime, 1, time[1]); this.$set(this.searchTime, 1, time[1])
} }
}, },
timeChange(val, from) { timeChange (val, from) {
console.log(val, from); console.log(val, from)
this.nowTimeType = val; this.nowTimeType = val
this.$set(this.showTime, "id", val.id); this.$set(this.showTime, 'id', val.id)
this.$set(this.showTime, "text", val.text); this.$set(this.showTime, 'text', val.text)
if (!val) { if (!val) {
this.isCustom = false; this.isCustom = false
return false; return false
} else { } else {
this.setSearchTime(val.type, val.value); this.setSearchTime(val.type, val.value)
const id = val.id; const id = val.id
if (id === 0) { if (id === 0) {
// custom // custom
if (from === "chart") { if (from === 'chart') {
this.isCustom = false; this.isCustom = false
this.$emit("change", this.searchTime); this.$emit('change', this.searchTime)
} else { } else {
this.isCustom = true; this.isCustom = true
this.$refs.calendar.focus(); this.$refs.calendar.focus()
this.$refs.calendar.pickerVisible = true; this.$refs.calendar.pickerVisible = true
if (document.getElementById("viewGraphDialog")) { if (document.getElementById('viewGraphDialog')) {
// 处理 多弹出的z-index的问题 当前为 alertMessage的处理 // 处理 多弹出的z-index的问题 当前为 alertMessage的处理
const viewGraphDialogStyle = window.getComputedStyle( const viewGraphDialogStyle = window.getComputedStyle(
document.getElementById("viewGraphDialog", null) document.getElementById('viewGraphDialog', null)
); )
setTimeout(() => { setTimeout(() => {
if (viewGraphDialogStyle["z-index"] !== "auto") { if (viewGraphDialogStyle['z-index'] !== 'auto') {
const dom = const dom =
document.getElementsByClassName("el-picker-panel"); document.getElementsByClassName('el-picker-panel')
Array.prototype.forEach.call(dom, function (element) { Array.prototype.forEach.call(dom, function (element) {
element.style["z-index"] = element.style['z-index'] =
viewGraphDialogStyle["z-index"] + 1; viewGraphDialogStyle['z-index'] + 1
}); })
this.$refs.calendar.$el.style["z-index"] = this.$refs.calendar.$el.style['z-index'] =
viewGraphDialogStyle["z-index"] + 1; viewGraphDialogStyle['z-index'] + 1
} }
}); })
} }
} }
} else { } else {
console.log('else',this.searchTime); console.log('else', this.searchTime)
// this.isCustom = false; // this.isCustom = false;
this.showDropdown() this.showDropdown()
if (this.showEmpty && id === 12) { if (this.showEmpty && id === 12) {
this.searchTime = []; this.searchTime = []
} }
this.$emit("change", this.searchTime); this.$emit('change', this.searchTime)
} }
} }
}, },
getCurrentTime() { getCurrentTime () {
return this.searchTime; return this.searchTime
// let timeTypeId = this.showTime.id; // let timeTypeId = this.showTime.id;
// if (timeTypeId === 0) { // if (timeTypeId === 0) {
// return this.searchTime; // return this.searchTime;
@@ -469,80 +469,85 @@ export default {
// return this.searchTime; // return this.searchTime;
// } // }
}, },
setSearchTime(type, val,time) { setSearchTime (type, val, time) {
if (type === "minute") { debugger
if (type === 'minute') {
const startTime = bus.timeFormate( const startTime = bus.timeFormate(
new Date(bus.computeTimezone(new Date().getTime())).setMinutes( new Date(bus.computeTimezone(new Date().getTime())).setMinutes(
new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - new Date(bus.computeTimezone(new Date().getTime())).getMinutes() -
val val
) )
); )
const endTime = bus.timeFormate( const endTime = bus.timeFormate(
new Date(bus.computeTimezone(new Date().getTime())) new Date(bus.computeTimezone(new Date().getTime()))
); )
this.$set(this.searchTime, 0, startTime); this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime); this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + "m"); this.$set(this.searchTime, 2, val + 'm')
} else if (type === "hour") { } else if (type === 'hour') {
const startTime = bus.timeFormate( const startTime = bus.timeFormate(
new Date(bus.computeTimezone(new Date().getTime())).setHours( new Date(bus.computeTimezone(new Date().getTime())).setHours(
new Date(bus.computeTimezone(new Date().getTime())).getHours() - val new Date(bus.computeTimezone(new Date().getTime())).getHours() - val
) )
); )
const endTime = bus.timeFormate( const endTime = bus.timeFormate(
new Date(bus.computeTimezone(new Date().getTime())) new Date(bus.computeTimezone(new Date().getTime()))
); )
this.$set(this.searchTime, 0, startTime); this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime); this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + "h"); this.$set(this.searchTime, 2, val + 'h')
} else if (type === "date") { } else if (type === 'date') {
const startTime = bus.timeFormate( const startTime = bus.timeFormate(
new Date(bus.computeTimezone(new Date().getTime())).setDate( new Date(bus.computeTimezone(new Date().getTime())).setDate(
new Date(bus.computeTimezone(new Date().getTime())).getDate() - val new Date(bus.computeTimezone(new Date().getTime())).getDate() - val
) )
); )
const endTime = bus.timeFormate( const endTime = bus.timeFormate(
new Date(bus.computeTimezone(new Date().getTime())) new Date(bus.computeTimezone(new Date().getTime()))
); )
this.$set(this.searchTime, 0, startTime); this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime); this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + "d"); this.$set(this.searchTime, 2, val + 'd')
}else{ } else {
this.$set(this.searchTime, 0, time[0]); this.$set(this.searchTime, 0, time[0])
this.$set(this.searchTime, 1, time[1]); this.$set(this.searchTime, 1, time[1])
} }
}, },
setCostomTime: function (costomTime) { setCostomTime: function (costomTime) {
this.searchTime = Object.assign(costomTime); this.searchTime = Object.assign(costomTime)
const val = Object.assign(this.timeData[0]); const val = Object.assign(this.timeData[0])
this.$set(this.showTime, "id", val.id); this.$set(this.showTime, 'id', val.id)
this.$set(this.showTime, "text", val.text); this.$set(this.showTime, 'text', val.text)
}, },
popoverClick(val) { popoverClick (val) {
if (val) { if (val) {
this.isPopoverDisabled = true; this.isPopoverDisabled = true
} else { } else {
this.isPopoverDisabled = false; this.isPopoverDisabled = false
} }
}, }
}, },
watch: { watch: {
searchTime: {
handler (n, o) {
console.log(n)
}
},
defaultPick: { defaultPick: {
immediate: true, immediate: true,
handler(n, o) { handler (n, o) {
if (n && Number.isInteger(n)) { if (n && Number.isInteger(n)) {
const showTime = this.timeData.find((item) => item.id == n); const showTime = this.timeData.find((item) => item.id == n)
if (showTime) { if (showTime) {
this.showTime = Object.assign({}, showTime); this.showTime = Object.assign({}, showTime)
this.searchTime = this.$parent.searchTime; this.searchTime = this.$parent.searchTime
} }
if (this.showEmpty && this.defaultPick === 12) { if (this.showEmpty && this.defaultPick === 12) {
this.searchTime = []; this.searchTime = []
} }
} }
}, }
}, }
}, }
}; }
</script> </script>