perf: 细节调整
This commit is contained in:
chenjinsong
@@ -1,73 +1,86 @@
|
||||
<template>
|
||||
<div v-ele-click-outside="changeDropdown" style="position: relative" class="date-range-box">
|
||||
<div @click="showDropdown" class="date-range-text">
|
||||
<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">{{dayJs.tz(startTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
|
||||
<div class="calendar-popover-text"> - </div>
|
||||
<div class="calendar-popover-text">{{dayJs.tz(endTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
|
||||
</div>
|
||||
<div class="calendar-popover-text" v-else>
|
||||
{{showDetail}}
|
||||
</div>
|
||||
<div class="calendar-popover-text"><i class="cn-icon cn-icon-arrow-down" :class="dropdownFlag ? 'cn-icon-arrow-down-active' : ''"></i></div>
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-if="dropdownFlag" class="date-range-panel">
|
||||
<el-row class="date-range-panel-top" style="position: relative">
|
||||
<el-col :span="16" class="date-range-panel-content date-range-panel-content-left">
|
||||
<div class="date-range-title" style="padding-left: 0">Absolute time range</div>
|
||||
<MyDatePicker
|
||||
:clearable='false'
|
||||
:editable='false'
|
||||
v-model="timeArr"
|
||||
type="datetimerange"
|
||||
ref="myDatePicker"
|
||||
:popper-class="'myDatePicker'"
|
||||
class="panel-time-picker-hidden"
|
||||
:size="'small'"
|
||||
placement="left-start"
|
||||
style="position: absolute"
|
||||
@change="timeArrChange"
|
||||
/>
|
||||
<div class="content-title">From</div>
|
||||
<div @click="myDatePickerShow" tabindex="1" class="content-input">{{dayJs.tz(myStartTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
|
||||
<div class="content-title">To</div>
|
||||
<div @click="myDatePickerShow" tabindex="2" class="content-input">{{dayJs.tz(myEndTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
|
||||
<div><el-button @click="timeRange" type="primary" size="mini">Apply time range</el-button></div>
|
||||
<div class="date-range-title" style="padding-left: 0">Recently used absolute ranges </div>
|
||||
<div class="date-range-history">
|
||||
<div v-for="(item, index) in rangeHistoryArr" :key="index" class="date-range-history-item" @click="historyChange(item)">
|
||||
{{dayJs.tz(item.start).format('YYYY-MM-DD HH:mm:ss')}}
|
||||
—
|
||||
{{dayJs.tz(item.end).format('YYYY-MM-DD HH:mm:ss')}}
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" class="date-range-panel-content date-range-panel-content-right" style="border-left: 1px solid rgba(0,0,0,0.09);">
|
||||
<div class="date-range-title">Relatime time ranges</div>
|
||||
<ul class="date-range-item">
|
||||
<li v-for="item in dateRangeArr" @click="quickChange(item.value)" :class="(item.value==dateRangeValue.value || item.value==dateRangeValue)?'active':''" :key="item.value">
|
||||
<span style="position: relative">
|
||||
{{item.name}}
|
||||
<i v-if="(item.value==dateRangeValue.value || item.value==dateRangeValue)" class="cn-icon cn-icon-check"></i>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="date-range-panel-bottom" style="">
|
||||
<el-col :span="12">{{address}}</el-col>
|
||||
<el-col :span="12" class="utc-str">{{utcStr}}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</transition>
|
||||
<div v-ele-click-outside="changeDropdown" style="position: relative" class="date-range-box">
|
||||
<div @click="showDropdown" class="date-range-text">
|
||||
<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">{{ dayJs.tz(startTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
|
||||
<div class="calendar-popover-text"> -</div>
|
||||
<div class="calendar-popover-text">{{ dayJs.tz(endTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
|
||||
</div>
|
||||
<div class="calendar-popover-text" v-else>
|
||||
{{ showDetail }}
|
||||
</div>
|
||||
<div class="calendar-popover-text"><i class="cn-icon cn-icon-arrow-down"
|
||||
:class="dropdownFlag ? 'cn-icon-arrow-down-active' : ''"></i></div>
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-if="dropdownFlag" class="date-range-panel">
|
||||
<el-row class="date-range-panel-top" style="position: relative">
|
||||
<el-col :span="16" class="date-range-panel-content date-range-panel-content-left">
|
||||
<div class="date-range-title" style="padding-left: 0">Absolute time range</div>
|
||||
<MyDatePicker
|
||||
:clearable='false'
|
||||
:editable='false'
|
||||
v-model="timeArr"
|
||||
type="datetimerange"
|
||||
ref="myDatePicker"
|
||||
:popper-class="'myDatePicker'"
|
||||
class="panel-time-picker-hidden"
|
||||
:size="'small'"
|
||||
placement="left-start"
|
||||
style="position: absolute"
|
||||
@change="timeArrChange"
|
||||
/>
|
||||
<div class="content-title">From</div>
|
||||
<div @click="myDatePickerShow" tabindex="1" class="content-input">
|
||||
{{ dayJs.tz(myStartTime).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</div>
|
||||
<div class="content-title">To</div>
|
||||
<div @click="myDatePickerShow" tabindex="2" class="content-input">
|
||||
{{ dayJs.tz(myEndTime).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</div>
|
||||
<div>
|
||||
<el-button @click="timeRange" type="primary" size="mini">Apply time range</el-button>
|
||||
</div>
|
||||
<div class="date-range-title" style="padding-left: 0">Recently used absolute ranges</div>
|
||||
<div class="date-range-history">
|
||||
<div v-for="(item, index) in rangeHistoryArr" :key="index" class="date-range-history-item"
|
||||
@click="historyChange(item)">
|
||||
{{ dayJs.tz(item.start).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
—
|
||||
{{ dayJs.tz(item.end).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" class="date-range-panel-content date-range-panel-content-right"
|
||||
style="border-left: 1px solid rgba(0,0,0,0.09);">
|
||||
<div class="date-range-title">Relatime time ranges</div>
|
||||
<ul class="date-range-item">
|
||||
<li v-for="item in dateRangeArr" @click="quickChange(item.value)"
|
||||
:class="(item.value==dateRangeValue.value || item.value==dateRangeValue)?'active':''"
|
||||
:key="item.value">
|
||||
<span style="position: relative">
|
||||
{{ item.name }}
|
||||
<i v-if="(item.value==dateRangeValue.value || item.value==dateRangeValue)"
|
||||
class="cn-icon cn-icon-check"></i>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="date-range-panel-bottom" style="">
|
||||
<el-col :span="12">{{ address }}</el-col>
|
||||
<el-col :span="12" class="utc-str">{{ utcStr }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed } from 'vue'
|
||||
import {ref, computed} from 'vue'
|
||||
import MyDatePicker from '../MyDatePicker'
|
||||
|
||||
export default {
|
||||
name: 'DateTimeRange',
|
||||
props: {
|
||||
@@ -92,7 +105,7 @@ export default {
|
||||
components: {
|
||||
MyDatePicker
|
||||
},
|
||||
setup (props, ctx) {
|
||||
setup(props, ctx) {
|
||||
// data
|
||||
const myStartTime = ref(props.startTime)
|
||||
const myEndTime = ref(props.endTime)
|
||||
@@ -252,163 +265,193 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.date-range-box{
|
||||
.date-range-box {
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
|
||||
.date-range-refresh {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.date-time-range {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.date-range-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/deep/ .panel-time-picker-hidden {
|
||||
visibility: hidden !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.date-range-text {
|
||||
font-size: 14px;
|
||||
min-width: 150px;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 26px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
|
||||
border-radius: 2px;
|
||||
line-height: 26px;
|
||||
transition: width .3s;
|
||||
|
||||
.cn-icon {
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
.date-range-refresh{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.date-range-item{
|
||||
list-style-type:none;
|
||||
}
|
||||
/deep/ .panel-time-picker-hidden{
|
||||
visibility: hidden !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.date-range-text{
|
||||
font-size: 14px;
|
||||
min-width:150px;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 26px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||
border-radius: 2px;
|
||||
line-height: 26px;
|
||||
transition: width .3s;
|
||||
.cn-icon{
|
||||
font-size: 14px;
|
||||
}
|
||||
.cn-icon-arrow-down{
|
||||
transition: all .3s;
|
||||
display: inline-block;
|
||||
}
|
||||
.cn-icon-arrow-down-active{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.date-range-title{
|
||||
font-family: Roboto-Black;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 600;
|
||||
padding: 14px 0px 7px 8px;
|
||||
}
|
||||
.calendar-popover-text{
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cn-icon-arrow-down {
|
||||
transition: all .3s;
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.cn-icon-arrow-down-active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
.calendar-popover-text:first-of-type{
|
||||
margin-left: 0;
|
||||
|
||||
.date-range-title {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 600;
|
||||
padding: 14px 0px 7px 8px;
|
||||
}
|
||||
.calendar-popover-text:last-of-type{
|
||||
margin-right: 0;
|
||||
|
||||
.calendar-popover-text {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.date-range-panel{
|
||||
height: 410px;
|
||||
width: 500px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 34px;
|
||||
z-index: 1;
|
||||
.date-range-panel-content-left{
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.content-title{
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.content-input{
|
||||
border: 1px solid #E7EAED;
|
||||
border-radius: 2px;
|
||||
width: 230px;
|
||||
padding: 0 8px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 12px;
|
||||
outline: #169AFF;
|
||||
}
|
||||
.content-input:focus{
|
||||
border: 1px solid #169AFF;
|
||||
}
|
||||
.date-range-history{
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
.date-range-history-item{
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.date-range-history-item:hover{
|
||||
/*font-weight: 600;*/
|
||||
background: #f9f9f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.date-range-panel-content-right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
ul{
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
li{
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
font-family: Roboto-Regular;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
li.active{
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
font-weight: 400;
|
||||
.cn-icon-check{
|
||||
color: #0091FF;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
}
|
||||
}
|
||||
li:hover{
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-popover-text:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
.date-range-panel-top{
|
||||
height: 364px;
|
||||
|
||||
.calendar-popover-text:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
.date-range-panel-bottom{
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-top: 1px solid rgba(0,0,0,0.09);
|
||||
padding: 0 10px;
|
||||
|
||||
.date-range-panel {
|
||||
height: 410px;
|
||||
width: 500px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 34px;
|
||||
z-index: 1;
|
||||
|
||||
.date-range-panel-content-left {
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
.utc-str{
|
||||
text-align: right;
|
||||
flex-direction: column;
|
||||
|
||||
.content-title {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.content-input {
|
||||
border: 1px solid #E7EAED;
|
||||
border-radius: 2px;
|
||||
width: 230px;
|
||||
padding: 0 8px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 12px;
|
||||
outline: #169AFF;
|
||||
}
|
||||
|
||||
.content-input:focus {
|
||||
border: 1px solid #169AFF;
|
||||
}
|
||||
|
||||
.date-range-history {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
.date-range-history-item {
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.date-range-history-item:hover {
|
||||
/*font-weight: 600;*/
|
||||
background: #f9f9f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-range-panel-content-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
ul {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li.active {
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
font-weight: 400;
|
||||
|
||||
.cn-icon-check {
|
||||
color: #0091FF;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background: #F2F9FF;
|
||||
color: #0091FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-range-panel-top {
|
||||
height: 364px;
|
||||
}
|
||||
|
||||
.date-range-panel-bottom {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.09);
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
|
||||
.utc-str {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user