85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div class="cn-refresh-box" v-ele-click-outside="dropdownShowFalse">
|
||
|
|
<span>
|
||
|
|
<el-button-group size="mini">
|
||
|
|
<el-button size="mini" @click="$emit('change')"><i class="cn-icon cn-icon-refresh"></i></el-button>
|
||
|
|
<el-button size="mini" @click="showRefreshList">
|
||
|
|
{{interLabel}}
|
||
|
|
<i class="cn-icon cn-icon-dropdown" :class="dropdownShow?'active' : ''"></i>
|
||
|
|
</el-button>
|
||
|
|
</el-button-group>
|
||
|
|
</span>
|
||
|
|
<transition name="el-zoom-in-top">
|
||
|
|
<div v-if="dropdownShow" class="refresh-list">
|
||
|
|
<div v-for="(item, index) in refreshArr" :key="index" @click="setRefresh(item)" class="refresh-list-item" :class="item.value==interval ? 'active' : ''">
|
||
|
|
{{item.label}}
|
||
|
|
<i v-if="item.value==interval" class="cn-icon cn-icon-check"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// import { ref } from 'vue'
|
||
|
|
export default {
|
||
|
|
name: 'TimeRefresh',
|
||
|
|
props: {
|
||
|
|
endTime: {
|
||
|
|
type: Number
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
searchTime: [],
|
||
|
|
lastRefreshTime: '',
|
||
|
|
intervalTimer: null,
|
||
|
|
interval: -1,
|
||
|
|
unit: 2,
|
||
|
|
dropdownShow: false,
|
||
|
|
interLabel: '',
|
||
|
|
refreshArr: [
|
||
|
|
{ value: -1, label: 'off' },
|
||
|
|
{ value: 30, label: '30s' },
|
||
|
|
{ value: 60, label: '1m' },
|
||
|
|
{ value: 300, label: '5m' },
|
||
|
|
{ value: 900, label: '15m' },
|
||
|
|
{ value: 1800, label: '30m' }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setup (props, ctx) {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
setRefresh (val) {
|
||
|
|
this.interval = val.value
|
||
|
|
this.interLabel = val.value == -1 ? '' : val.label
|
||
|
|
this.dropdownShow = false
|
||
|
|
const now = window.$dayJs.tz().valueOf()
|
||
|
|
if (val && val.value != -1) {
|
||
|
|
// 设置定时器
|
||
|
|
this.intervalTimer = setInterval(() => {
|
||
|
|
this.$emit('change')
|
||
|
|
}, val.value * 1000)
|
||
|
|
// 设置定时器 比上次刷新间隔大于30s 立马刷新一次
|
||
|
|
if ((now - this.endTime) / 1000 > 30) {
|
||
|
|
this.$emit('change')
|
||
|
|
}
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (val && val.value == -1) {
|
||
|
|
// 清除定时器
|
||
|
|
clearInterval(this.intervalTimer)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
showRefreshList () {
|
||
|
|
this.dropdownShow = !this.dropdownShow
|
||
|
|
},
|
||
|
|
dropdownShowFalse () {
|
||
|
|
this.dropdownShow = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|