NEZ-1787 feat :时间选择器组件 优化 初步模型 未完全完成
This commit is contained in:
zhangxiaolong
@@ -73,3 +73,181 @@
|
|||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
}
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.date-range-refresh {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-time-range {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-range-item {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 14px 0 7px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-popover-text {
|
||||||
|
white-space: nowrap;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-popover-text:first-of-type {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calendar-popover-text:last-of-type {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-range-panel {
|
||||||
|
height: 500px;
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,15 +1,51 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="panel-calender" :class="{'calendar--small': size === 'small'}" class="calendar">
|
<div
|
||||||
<my-date-picker prefix-icon=" " class="panel-time-picker-hidden " size="mini" ref="calendar"
|
id="panel-calender"
|
||||||
:value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
|
:class="{ 'calendar--small': size === 'small' }"
|
||||||
:format="timeFormatStrToDatePickFormat(timeFormatMain)" @change="dateChange" v-model="searchTime" type="datetimerange"
|
class="calendar"
|
||||||
popper-class="panel-time-picker-popper time-picker-popover__select-top"
|
>
|
||||||
:default-time="['00:00:00', '23:59:59']"
|
<!-- <my-date-picker
|
||||||
:range-separator="$t('dashboard.panel.to')"
|
prefix-icon=" "
|
||||||
:start-placeholder="$t('dashboard.panel.startTime')"
|
class="panel-time-picker-hidden"
|
||||||
:end-placeholder="$t('dashboard.panel.endTime')" align="right">
|
size="mini"
|
||||||
</my-date-picker>
|
ref="calendar"
|
||||||
<el-dropdown ref="timePickerDropdown" class="calendar-dropdown-title" trigger="click" @command="timeChange" @visible-change="popoverClick">
|
:value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
|
||||||
|
:format="timeFormatStrToDatePickFormat(timeFormatMain)"
|
||||||
|
@change="dateChange"
|
||||||
|
v-model="searchTime"
|
||||||
|
type="datetimerange"
|
||||||
|
popper-class="panel-time-picker-popper time-picker-popover__select-top"
|
||||||
|
:default-time="['00:00:00', '23:59:59']"
|
||||||
|
:range-separator="$t('dashboard.panel.to')"
|
||||||
|
:start-placeholder="$t('dashboard.panel.startTime')"
|
||||||
|
:end-placeholder="$t('dashboard.panel.endTime')"
|
||||||
|
align="right"
|
||||||
|
>
|
||||||
|
</my-date-picker> -->
|
||||||
|
|
||||||
|
<div @click="showDropdown" class="date-range-text">
|
||||||
|
<div class="calendar-popover-text">
|
||||||
|
<i class="nz-icon nz-icon-time"></i>
|
||||||
|
</div>
|
||||||
|
<div class="calendar-popover-text" style="display: flex" v-if="isCustom">
|
||||||
|
<div class="calendar-popover-text">
|
||||||
|
{{searchTime[0]}}
|
||||||
|
</div>
|
||||||
|
<div class="calendar-popover-text">{{$t('dashboard.panel.to')}}</div>
|
||||||
|
<div class="calendar-popover-text">
|
||||||
|
{{searchTime[1]}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="calendar-popover-text" v-else>
|
||||||
|
<div class="time-no-data">{{$t("dashboard.panel.noDate")}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="calendar-popover-text">
|
||||||
|
<i
|
||||||
|
class="el-icon-arrow-down"
|
||||||
|
></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <el-dropdown ref="timePickerDropdown" class="calendar-dropdown-title" trigger="click" @command="timeChange" @visible-change="popoverClick">
|
||||||
<el-popover
|
<el-popover
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
min-width="120px"
|
min-width="120px"
|
||||||
@@ -48,271 +84,451 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</el-dropdown>
|
</el-dropdown> -->
|
||||||
|
<transition name="el-zoom-in-top">
|
||||||
|
<div v-if="dropdownFlag" class="date-range-panel popper-z-index">
|
||||||
|
<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>
|
||||||
|
<my-date-picker
|
||||||
|
popper-class="panel-time-picker-popper time-picker-popover__select-top"
|
||||||
|
:default-time="['00:00:00', '23:59:59']"
|
||||||
|
:range-separator="$t('dashboard.panel.to')"
|
||||||
|
:start-placeholder="$t('dashboard.panel.startTime')"
|
||||||
|
:end-placeholder="$t('dashboard.panel.endTime')"
|
||||||
|
align="right"
|
||||||
|
prefix-icon=" "
|
||||||
|
class="panel-time-picker-hidden"
|
||||||
|
size="mini"
|
||||||
|
ref="calendar"
|
||||||
|
:value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
|
||||||
|
:format="timeFormatStrToDatePickFormat(timeFormatMain)"
|
||||||
|
:clearable="false"
|
||||||
|
:editable="false"
|
||||||
|
v-model="searchTime"
|
||||||
|
type="datetimerange"
|
||||||
|
placement="left-start"
|
||||||
|
style="position: absolute"
|
||||||
|
@change="dateChange"
|
||||||
|
/>
|
||||||
|
<div @click="myDatePickerShow" class="content-title">From</div>
|
||||||
|
<div tabindex="1" class="content-input">
|
||||||
|
{{ searchTime[0] }}
|
||||||
|
</div>
|
||||||
|
<div @click="myDatePickerShow" class="content-title">To</div>
|
||||||
|
<div tabindex="2" class="content-input">
|
||||||
|
{{ searchTime[1] }}
|
||||||
|
</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)"
|
||||||
|
>
|
||||||
|
{{bus.timeFormate(item[0])}}
|
||||||
|
—
|
||||||
|
{{bus.timeFormate(item[1])}}
|
||||||
|
|
||||||
|
</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,key) in timeData"
|
||||||
|
@click="timeChange(item)"
|
||||||
|
:class="showTime.id === item.id ? 'nz-dashboard-dropdown-bg' : ''"
|
||||||
|
:key="key"
|
||||||
|
>
|
||||||
|
<span style="position: relative">
|
||||||
|
{{ item.text }}
|
||||||
|
<i
|
||||||
|
v-if="
|
||||||
|
item.id !== 12 || showEmpty
|
||||||
|
"
|
||||||
|
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>
|
</div>
|
||||||
</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,
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
isPopoverDisabled: false,
|
|
||||||
isCustom: false,
|
|
||||||
searchTime: [
|
|
||||||
bus.timeFormate(bus.getOffsetTimezoneData(-1)),
|
|
||||||
bus.timeFormate(bus.getOffsetTimezoneData())
|
|
||||||
],
|
|
||||||
showTime: {
|
|
||||||
id: 4,
|
|
||||||
text: this.$t('dashboard.panel.lastOneHour')
|
|
||||||
},
|
|
||||||
timeData: [
|
|
||||||
{
|
|
||||||
id: 0,
|
|
||||||
text: this.$t('dashboard.panel.customTimeRange'),
|
|
||||||
value: -1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 12,
|
|
||||||
text: this.$t('dashboard.panel.noDate'),
|
|
||||||
value: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
text: this.$t('dashboard.panel.lastFiveMin'),
|
|
||||||
type: 'minute',
|
|
||||||
value: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
text: this.$t('dashboard.panel.lastFifteenMin'),
|
|
||||||
type: 'minute',
|
|
||||||
value: 15
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
text: this.$t('dashboard.panel.lastThirtyMin'),
|
|
||||||
type: 'minute',
|
|
||||||
value: 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
text: this.$t('dashboard.panel.lastOneHour'),
|
|
||||||
type: 'hour',
|
|
||||||
value: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
text: this.$t('dashboard.panel.lastThreeHour'),
|
|
||||||
type: 'hour',
|
|
||||||
value: 3
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
text: this.$t('dashboard.panel.lastSixHour'),
|
|
||||||
type: 'hour',
|
|
||||||
value: 6
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
text: this.$t('dashboard.panel.lastTwelveHour'),
|
|
||||||
type: 'hour',
|
|
||||||
value: 12
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 8,
|
|
||||||
text: this.$t('dashboard.panel.lastTwentyFourHour'),
|
|
||||||
type: 'hour',
|
|
||||||
value: 24
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 9,
|
|
||||||
text: this.$t('dashboard.panel.lastTwoDay'),
|
|
||||||
type: 'date',
|
|
||||||
value: 2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 10,
|
|
||||||
text: this.$t('dashboard.panel.lastSevenDay'),
|
|
||||||
type: 'date',
|
|
||||||
value: 7
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 11,
|
|
||||||
text: this.$t('dashboard.panel.lastThirtyDay'),
|
|
||||||
type: 'date',
|
|
||||||
value: 30
|
|
||||||
}
|
|
||||||
],
|
|
||||||
nowTimeType: {
|
|
||||||
id: 4,
|
|
||||||
text: this.$t('dashboard.panel.lastOneHour'),
|
|
||||||
type: 'hour',
|
|
||||||
value: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
dateChange (val) {
|
|
||||||
const startTime = bus.timeFormate(val[0])
|
|
||||||
const endTime = bus.timeFormate(val[1])
|
|
||||||
this.$set(this.searchTime, 0, startTime)
|
|
||||||
this.$set(this.searchTime, 1, endTime)
|
|
||||||
|
|
||||||
this.$set(this.showTime, 'id', 0)
|
|
||||||
this.$set(this.showTime, 'text', this.searchTime[0] + ' ' + this.$t('dashboard.panel.to') + ' ' + this.searchTime[1])
|
|
||||||
this.$emit('change', this.searchTime)
|
|
||||||
},
|
},
|
||||||
setCustomTime (timeGroup, timeRange) {
|
},
|
||||||
|
data() {
|
||||||
|
return ({
|
||||||
|
rangeHistory : localStorage.getItem("date-range-history")? JSON.parse(localStorage.getItem("date-range-history")): [],
|
||||||
|
rangeHistoryArr: this.getRangeHistoryArr(),
|
||||||
|
address: localStorage.getItem("cn-sys-timezone"),
|
||||||
|
utc: localStorage.getItem("timezoneOffset"),
|
||||||
|
utcStr: this.getUtcStr(),
|
||||||
|
dropdownFlag: false,
|
||||||
|
isPopoverDisabled: false,
|
||||||
|
isCustom: false,
|
||||||
|
searchTime: [
|
||||||
|
bus.timeFormate(bus.getOffsetTimezoneData(-1)),
|
||||||
|
bus.timeFormate(bus.getOffsetTimezoneData()),
|
||||||
|
],
|
||||||
|
showTime: {
|
||||||
|
id: 4,
|
||||||
|
text: this.$t("dashboard.panel.lastOneHour"),
|
||||||
|
},
|
||||||
|
timeData: [
|
||||||
|
// {
|
||||||
|
// id: 0,
|
||||||
|
// text: this.$t("dashboard.panel.customTimeRange"),
|
||||||
|
// value: -1,
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
text: this.$t("dashboard.panel.noDate"),
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
text: this.$t("dashboard.panel.lastFiveMin"),
|
||||||
|
type: "minute",
|
||||||
|
value: 5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
text: this.$t("dashboard.panel.lastFifteenMin"),
|
||||||
|
type: "minute",
|
||||||
|
value: 15,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
text: this.$t("dashboard.panel.lastThirtyMin"),
|
||||||
|
type: "minute",
|
||||||
|
value: 30,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
text: this.$t("dashboard.panel.lastOneHour"),
|
||||||
|
type: "hour",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
text: this.$t("dashboard.panel.lastThreeHour"),
|
||||||
|
type: "hour",
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
text: this.$t("dashboard.panel.lastSixHour"),
|
||||||
|
type: "hour",
|
||||||
|
value: 6,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
text: this.$t("dashboard.panel.lastTwelveHour"),
|
||||||
|
type: "hour",
|
||||||
|
value: 12,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
text: this.$t("dashboard.panel.lastTwentyFourHour"),
|
||||||
|
type: "hour",
|
||||||
|
value: 24,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
text: this.$t("dashboard.panel.lastTwoDay"),
|
||||||
|
type: "date",
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
text: this.$t("dashboard.panel.lastSevenDay"),
|
||||||
|
type: "date",
|
||||||
|
value: 7,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
text: this.$t("dashboard.panel.lastThirtyDay"),
|
||||||
|
type: "date",
|
||||||
|
value: 30,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
nowTimeType: {
|
||||||
|
id: 4,
|
||||||
|
text: this.$t("dashboard.panel.lastOneHour"),
|
||||||
|
type: "hour",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
myDatePickerShow(){
|
||||||
|
this.$refs.calendar.pickerVisible = true;
|
||||||
|
},
|
||||||
|
historyChange (item) {
|
||||||
|
this.myStartTime = item.start
|
||||||
|
this.myEndTime = item.end
|
||||||
|
this.isCustom = true
|
||||||
|
returnValue()
|
||||||
|
},
|
||||||
|
getRangeHistoryArr(){
|
||||||
|
// return this.rangeHistory.slice(0, 4)
|
||||||
|
},
|
||||||
|
getUtcStr() {
|
||||||
|
console.log(this.utc);
|
||||||
|
let str = "UTC ";
|
||||||
|
if (this.utc < 0) {
|
||||||
|
str += "- ";
|
||||||
|
} else {
|
||||||
|
str += "+ ";
|
||||||
|
}
|
||||||
|
const abs = Math.abs(this.utc);
|
||||||
|
if (abs > 10) {
|
||||||
|
str += abs + "";
|
||||||
|
} else {
|
||||||
|
str += "0" + (abs + "");
|
||||||
|
}
|
||||||
|
str += ":00 ";
|
||||||
|
console.log(str);
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
timeRange() {
|
||||||
|
this.isCustom = true;
|
||||||
|
},
|
||||||
|
showDropdown() {
|
||||||
|
this.dropdownFlag = !this.dropdownFlag;
|
||||||
|
},
|
||||||
|
dateChange(val) {
|
||||||
|
const startTime = bus.timeFormate(val[0]);
|
||||||
|
const endTime = bus.timeFormate(val[1]);
|
||||||
|
this.$set(this.searchTime, 0, startTime);
|
||||||
|
this.$set(this.searchTime, 1, endTime);
|
||||||
|
|
||||||
|
this.$set(this.showTime, "id", 0);
|
||||||
|
this.$set(
|
||||||
|
this.showTime,
|
||||||
|
"text",
|
||||||
|
this.searchTime[0] +
|
||||||
|
" " +
|
||||||
|
this.$t("dashboard.panel.to") +
|
||||||
|
" " +
|
||||||
|
this.searchTime[1]
|
||||||
|
);
|
||||||
|
localStorage.setItem('date-range-history', JSON.stringify(rangeHistory))
|
||||||
|
this.$emit("change", this.searchTime);
|
||||||
|
},
|
||||||
|
setCustomTime(timeGroup, timeRange) {
|
||||||
if (timeGroup) {
|
if (timeGroup) {
|
||||||
this.showTime = this.nowTimeType = this.timeData.find(item => item.id == timeGroup.id)
|
this.showTime = this.nowTimeType = this.timeData.find(
|
||||||
|
(item) => item.id == timeGroup.id
|
||||||
|
);
|
||||||
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 {
|
||||||
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();
|
||||||
if (timeGroup.start_time) {
|
if (timeGroup.start_time) {
|
||||||
this.$set(this.searchTime, 0, bus.timeFormate(timeGroup.start_time))
|
this.$set(
|
||||||
this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time))
|
this.searchTime,
|
||||||
|
0,
|
||||||
|
bus.timeFormate(timeGroup.start_time)
|
||||||
|
);
|
||||||
|
this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time));
|
||||||
} else {
|
} else {
|
||||||
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]));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
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) {
|
||||||
this.nowTimeType = val
|
console.log(val,from);
|
||||||
this.$set(this.showTime, 'id', val.id)
|
this.nowTimeType = val;
|
||||||
this.$set(this.showTime, 'text', val.text)
|
this.$set(this.showTime, "id", val.id);
|
||||||
|
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) { // custom
|
if (id === 0) {
|
||||||
if (from === 'chart') {
|
// custom
|
||||||
this.isCustom = false
|
if (from === "chart") {
|
||||||
this.$emit('change', this.searchTime)
|
this.isCustom = false;
|
||||||
|
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')) { // 处理 多弹出的z-index的问题 当前为 alertMessage的处理
|
if (document.getElementById("viewGraphDialog")) {
|
||||||
const viewGraphDialogStyle = window.getComputedStyle(document.getElementById('viewGraphDialog', null))
|
// 处理 多弹出的z-index的问题 当前为 alertMessage的处理
|
||||||
|
const viewGraphDialogStyle = window.getComputedStyle(
|
||||||
|
document.getElementById("viewGraphDialog", null)
|
||||||
|
);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (viewGraphDialogStyle['z-index'] !== 'auto') {
|
if (viewGraphDialogStyle["z-index"] !== "auto") {
|
||||||
const dom = document.getElementsByClassName('el-picker-panel')
|
const dom =
|
||||||
|
document.getElementsByClassName("el-picker-panel");
|
||||||
Array.prototype.forEach.call(dom, function (element) {
|
Array.prototype.forEach.call(dom, function (element) {
|
||||||
element.style['z-index'] = viewGraphDialogStyle['z-index'] + 1
|
element.style["z-index"] =
|
||||||
})
|
viewGraphDialogStyle["z-index"] + 1;
|
||||||
this.$refs.calendar.$el.style['z-index'] = viewGraphDialogStyle['z-index'] + 1
|
});
|
||||||
|
this.$refs.calendar.$el.style["z-index"] =
|
||||||
|
viewGraphDialogStyle["z-index"] + 1;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.isCustom = false
|
this.isCustom = false;
|
||||||
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() {
|
||||||
let timeTypeId = this.showTime.id
|
let timeTypeId = this.showTime.id;
|
||||||
if (timeTypeId === 0) {
|
if (timeTypeId === 0) {
|
||||||
return this.searchTime
|
return this.searchTime;
|
||||||
} else {
|
} else {
|
||||||
if (!timeTypeId) { timeTypeId = 4 }
|
if (!timeTypeId) {
|
||||||
const currentTime = this.timeData.find(item => item.id === timeTypeId)
|
timeTypeId = 4;
|
||||||
this.setSearchTime(currentTime.type, currentTime.value)
|
}
|
||||||
return this.searchTime
|
const currentTime = this.timeData.find(
|
||||||
|
(item) => item.id === timeTypeId
|
||||||
|
);
|
||||||
|
this.setSearchTime(currentTime.type, currentTime.value);
|
||||||
|
return this.searchTime;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setSearchTime (type, val) {
|
setSearchTime(type, val) {
|
||||||
if (type === 'minute') {
|
if (type === "minute") {
|
||||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val))
|
const startTime = bus.timeFormate(
|
||||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
|
new Date(bus.computeTimezone(new Date().getTime())).setMinutes(
|
||||||
this.$set(this.searchTime, 0, startTime)
|
new Date(bus.computeTimezone(new Date().getTime())).getMinutes() -
|
||||||
this.$set(this.searchTime, 1, endTime)
|
val
|
||||||
this.$set(this.searchTime, 2, val + 'm')
|
)
|
||||||
} else if (type === 'hour') {
|
);
|
||||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(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, 1, endTime)
|
this.$set(this.searchTime, 0, startTime);
|
||||||
this.$set(this.searchTime, 2, val + 'h')
|
this.$set(this.searchTime, 1, endTime);
|
||||||
} else if (type === 'date') {
|
this.$set(this.searchTime, 2, val + "m");
|
||||||
const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val))
|
} else if (type === "hour") {
|
||||||
const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())))
|
const startTime = bus.timeFormate(
|
||||||
this.$set(this.searchTime, 0, startTime)
|
new Date(bus.computeTimezone(new Date().getTime())).setHours(
|
||||||
this.$set(this.searchTime, 1, endTime)
|
new Date(bus.computeTimezone(new Date().getTime())).getHours() - val
|
||||||
this.$set(this.searchTime, 2, val + 'd')
|
)
|
||||||
|
);
|
||||||
|
const endTime = bus.timeFormate(
|
||||||
|
new Date(bus.computeTimezone(new Date().getTime()))
|
||||||
|
);
|
||||||
|
this.$set(this.searchTime, 0, startTime);
|
||||||
|
this.$set(this.searchTime, 1, endTime);
|
||||||
|
this.$set(this.searchTime, 2, val + "h");
|
||||||
|
} else if (type === "date") {
|
||||||
|
const startTime = bus.timeFormate(
|
||||||
|
new Date(bus.computeTimezone(new Date().getTime())).setDate(
|
||||||
|
new Date(bus.computeTimezone(new Date().getTime())).getDate() - val
|
||||||
|
)
|
||||||
|
);
|
||||||
|
const endTime = bus.timeFormate(
|
||||||
|
new Date(bus.computeTimezone(new Date().getTime()))
|
||||||
|
);
|
||||||
|
this.$set(this.searchTime, 0, startTime);
|
||||||
|
this.$set(this.searchTime, 1, endTime);
|
||||||
|
this.$set(this.searchTime, 2, val + "d");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
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;
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
|
||||||
created () {
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
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>
|
||||||
|
|||||||
Reference in New Issue
Block a user