fix : 时间选择器优化样式修改 历史记录绑定
This commit is contained in:
zhangxiaolong
@@ -4,24 +4,7 @@
|
||||
:class="{ 'calendar--small': size === 'small' }"
|
||||
class="calendar"
|
||||
>
|
||||
<!-- <my-date-picker
|
||||
prefix-icon=" "
|
||||
class="panel-time-picker-hidden"
|
||||
size="mini"
|
||||
ref="calendar"
|
||||
: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>
|
||||
@@ -42,46 +25,6 @@
|
||||
<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
|
||||
placement="bottom-end"
|
||||
min-width="120px"
|
||||
:visible-arrow="false"
|
||||
:disabled="isPopoverDisabled"
|
||||
trigger="hover"
|
||||
popper-class="popper-z-index right-box-select-top right-public-box-dropdown-top"
|
||||
id="panel-calender-popover">
|
||||
<template v-if="this.searchTime&&this.searchTime.length>1">
|
||||
<el-row :gutter="10" class="calendar-popover">
|
||||
<el-col :span="24" class="calendar-popover-text">{{searchTime[0]}}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="calendar-popover">
|
||||
<el-col :span="24" class="calendar-popover-text">{{$t('dashboard.panel.to')}}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="calendar-popover">
|
||||
<el-col :span="24" class="calendar-popover-text">{{searchTime[1]}}</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="time-no-data">{{$t("dashboard.panel.noDate")}}</div>
|
||||
</template>
|
||||
<div class="el-dropdown-link" slot="reference">
|
||||
<i class="nz-icon nz-icon-time" style="width:20px;"></i>
|
||||
<span class="panel-list-title" id="timePickerContent">{{showTime.text}}</span>
|
||||
<span class="dropdown--suffix">
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-dropdown-menu class="nz-dashboard-dropdown popper-z-index" style="margin-top: 5px" slot="dropdown">
|
||||
<template v-for="(item, index) in timeData" >
|
||||
<el-dropdown-item v-if="item.id !== 12 || showEmpty" :key="index" :class="showTime.id === item.id ? 'nz-dashboard-dropdown-bg' : ''" :command="item">
|
||||
{{item.text}}
|
||||
</el-dropdown-item>
|
||||
</template>
|
||||
|
||||
</el-dropdown-menu>
|
||||
</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">
|
||||
@@ -108,14 +51,12 @@
|
||||
|
||||
<div class="content-title">From</div>
|
||||
<div @click="myDatePickerShow('start')" tabindex="1" class="content-input">
|
||||
<!-- {{ searchTime[0] }} -->
|
||||
<el-input v-model="searchTime[0]" @change="dateChange('start',searchTime[0])"> </el-input>
|
||||
</div>
|
||||
<div class="content-title">To</div>
|
||||
<div @click="myDatePickerShow('end')" tabindex="2" class="content-input">
|
||||
<el-input v-model="searchTime[1]" @change="dateChange('end',searchTime[1])"> </el-input>
|
||||
|
||||
<!-- {{ searchTime[1] }} -->
|
||||
|
||||
</div>
|
||||
<div>
|
||||
@@ -171,7 +112,11 @@
|
||||
</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-col :span="12" class="utc-str">
|
||||
<span>
|
||||
{{ utcStr }}
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</transition>
|
||||
@@ -189,6 +134,7 @@ export default {
|
||||
size: {
|
||||
type: String,
|
||||
},
|
||||
sign:[Number,String]
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -300,11 +246,12 @@ export default {
|
||||
this.getItem();
|
||||
this.getUtcStr();
|
||||
this.getRangeHistoryArr();
|
||||
console.log(this.sign);
|
||||
},
|
||||
methods: {
|
||||
getItem() {
|
||||
this.rangeHistory = localStorage.getItem("date-range-history")
|
||||
? JSON.parse(localStorage.getItem("date-range-history"))
|
||||
this.rangeHistory = localStorage.getItem("date-range-history"+this.sign)
|
||||
? JSON.parse(localStorage.getItem("date-range-history"+this.sign))
|
||||
: [];
|
||||
this.address = localStorage.getItem("nz-sys-timezone");
|
||||
this.utc = localStorage.getItem("timezoneOffset");
|
||||
@@ -337,13 +284,13 @@ export default {
|
||||
end: item[1],
|
||||
});
|
||||
localStorage.setItem(
|
||||
"date-range-history",
|
||||
"date-range-history"+this.sign,
|
||||
JSON.stringify(this.rangeHistory)
|
||||
);
|
||||
this.searchTime[2]=''
|
||||
this.showDropdown();
|
||||
this.getRangeHistoryArr()
|
||||
console.log('timerange里searchTime',this.searchTime);
|
||||
this.searchTime[2]=''
|
||||
this.$emit("change", this.searchTime);
|
||||
this.setSearchTime('','',this.searchTime)
|
||||
},
|
||||
@@ -364,7 +311,6 @@ export default {
|
||||
const startTime = bus.timeFormate(v)
|
||||
this.$set(this.searchTime, 0, startTime);
|
||||
}else{
|
||||
console.log('输入不规范');
|
||||
this.$set(this.searchTime, 0, '');
|
||||
|
||||
}
|
||||
@@ -381,7 +327,6 @@ export default {
|
||||
const endTime = bus.timeFormate(v)
|
||||
this.$set(this.searchTime, 1, endTime);
|
||||
}else{
|
||||
console.log('输入不规范');
|
||||
this.$set(this.searchTime, 1, '');
|
||||
|
||||
}
|
||||
@@ -413,12 +358,16 @@ export default {
|
||||
this.$set(this.searchTime, 0, timeGroup.start_time);
|
||||
this.$set(this.searchTime, 1, timeGroup.end_time);
|
||||
} else {
|
||||
|
||||
const time = this.searchTime.splice(' ')
|
||||
this.showTime= this.nowTimeType ={
|
||||
text:time[0] +' ' + this.$t('dashboard.panel.to') +' '+time[1]
|
||||
}
|
||||
console.log(this.showTime);
|
||||
this.$set(this.searchTime, 0, bus.timeFormate(time[0]));
|
||||
this.$set(this.searchTime, 1, bus.timeFormate(time[1]));
|
||||
// this.$set(this.searchTime, 0, bus.timeFormate(timeGroup.start_time));
|
||||
// this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time));
|
||||
// this.showTime = this.nowTimeType = {
|
||||
// id: 4,
|
||||
// text: this.$t("dashboard.panel.lastOneHour"),
|
||||
@@ -506,7 +455,6 @@ export default {
|
||||
},
|
||||
getCurrentTime() {
|
||||
return this.searchTime;
|
||||
console.log('getcurrenttime');
|
||||
// let timeTypeId = this.showTime.id;
|
||||
// if (timeTypeId === 0) {
|
||||
// return this.searchTime;
|
||||
@@ -583,7 +531,6 @@ export default {
|
||||
defaultPick: {
|
||||
immediate: true,
|
||||
handler(n, o) {
|
||||
console.log(n);
|
||||
if (n && Number.isInteger(n)) {
|
||||
const showTime = this.timeData.find((item) => item.id == n);
|
||||
if (showTime) {
|
||||
|
||||
Reference in New Issue
Block a user