gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：处理时间选择的数据改变

Browse Source
This commit is contained in:
zhangyu
2021-06-21 19:15:22 +08:00
parent 188a3cde26
commit 085ab63a7e
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/common/TimeRange/DateTimeRange.vue
View File

@@ -1,16 +1,16 @@
<template> <template>
<div v-ele-click-outside="changeDropdown" style="position: relative" class="date-range-box"> <div v-ele-click-outside="changeDropdown" style="position: relative" class="date-range-box">
<div @click="showDropdown" class="date-range-text"> <div @click="showDropdown" class="date-range-text">
<div class="calendar-popover-text"><i class="cn-icon cn-icon-add"></i></div> <div class="calendar-popover-text"><i class="cn-icon cn-icon-time"></i></div>
<div class="calendar-popover-text" style="display: flex" v-if="isCustom"> <div class="calendar-popover-text" style="display: flex" v-if="isCustom">
<div class="calendar-popover-text">{{dayJs.tz(startTime).format('YYYY-MM-DD HH:mm:ss')}}</div> <div class="calendar-popover-text">{{dayJs.tz(startTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
<div class="calendar-popover-text"> - </div> <div class="calendar-popover-text"> - </div>
<div class="calendar-popover-text">{{dayJs.tz(endTime).format('YYYY-MM-DD HH:mm:ss')}}</div> <div class="calendar-popover-text">{{dayJs.tz(endTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
</div> </div>
<div class="calendar-popover-text" v-else> <div class="calendar-popover-text" v-else>
{{dateRangeArr.find(item=>item.value === dateRangeValue).name}} {{dateRangeArr.find(item=>item.value == dateRangeValue).name}}
</div> </div>
<div class="calendar-popover-text"><i class="cn-icon cn-icon-add"></i></div> <div class="calendar-popover-text"><i class="cn-icon cn-icon-arrow-down"></i></div>
</div> </div>
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
<div v-if="dropdownFlag" class="date-range-panel"> <div v-if="dropdownFlag" class="date-range-panel">
@@ -40,7 +40,10 @@
<div> <div>
<div>Relatime time ranges</div> <div>Relatime time ranges</div>
<ul class="date-range-item"> <ul class="date-range-item">
<li v-for="item in dateRangeArr" @click="quickChange(item.value)" :class="item.value==dateRangeValue?'active':''" :key="item.value">{{item.name}}</li> <li v-for="item in dateRangeArr" @click="quickChange(item.value)" :class="item.value==dateRangeValue?'active':''" :key="item.value">
{{item.name}}
<i v-if="item.value==dateRangeValue" class="cn-icon cn-icon-check"></i>
</li>
</ul> </ul>
</div> </div>
</el-col> </el-col>
@@ -170,13 +173,15 @@ export default {
} }
const timeRange = () => { const timeRange = () => {
isCustom.value = true isCustom.value = true
dateRangeValue.value = -1
returnValue() returnValue()
} }
const quickChange = (value) => { const quickChange = (value) => {
console.log(value)
dateRangeValue.value = value
isCustom.value = false isCustom.value = false
myEndTime.value = window.$dayJs.tz().valueOf() myEndTime.value = window.$dayJs.tz().valueOf()
myStartTime.value = myEndTime.value - value * 60 * 1000 myStartTime.value = myEndTime.value - value * 60 * 1000
dateRangeValue.value = value
returnValue() returnValue()
} }
const returnValue = () => { const returnValue = () => {