From 90e948905bef790119f01d17f46a8429e86160f5 Mon Sep 17 00:00:00 2001 From: zhangxiaolong Date: Tue, 12 Apr 2022 20:05:18 +0800 Subject: [PATCH] =?UTF-8?q?fix=20:=20=E6=97=B6=E9=97=B4=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E5=99=A8=E7=BB=84=E4=BB=B6=E4=BC=98=E5=8C=96=20=E5=88=9D?= =?UTF-8?q?=E6=AD=A5=E4=BF=AE=E6=94=B9=20=20=E6=9C=AA=E5=AE=8C=E5=85=A8?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/components/common/timePicker.scss | 26 ++-- .../src/components/common/pickTime.vue | 2 +- .../src/components/common/timePicker.vue | 133 +++++++++--------- 3 files changed, 83 insertions(+), 78 deletions(-) diff --git a/nezha-fronted/src/assets/css/components/common/timePicker.scss b/nezha-fronted/src/assets/css/components/common/timePicker.scss index ed317e886..7330336e3 100644 --- a/nezha-fronted/src/assets/css/components/common/timePicker.scss +++ b/nezha-fronted/src/assets/css/components/common/timePicker.scss @@ -107,7 +107,7 @@ .date-range-text { font-size: 14px; - min-width: 150px; + // min-width: 150px; flex-direction: row; flex-wrap: nowrap; padding: 0 10px; @@ -115,7 +115,7 @@ justify-content: space-around; height: 26px; background: #FFFFFF; - border: 1px solid #E7EAED; + // border: 1px solid #E7EAED; box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02); border-radius: 2px; line-height: 26px; @@ -157,12 +157,12 @@ } .date-range-panel { - height: 500px; + height: 450px; 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; + right: 5%; top: 34px; z-index: 1; @@ -212,7 +212,7 @@ .date-range-panel-content-right { display: flex; flex-direction: column; - + overflow: hidden; ul { flex: 1; padding: 0; @@ -232,9 +232,17 @@ cursor: pointer; } - li.active { + li:hover { background: #F2F9FF; - color: #0091FF; + color: #333333; + } + li.active :hover { + background: $--color-primary; + color: $--time-picker-hover-color !important; + } + li.active { + background: $--color-primary; + color: $--time-picker-hover-color !important; font-weight: 400; .cn-icon-check { @@ -244,10 +252,6 @@ } } - li:hover { - background: #F2F9FF; - color: #0091FF; - } } } } \ No newline at end of file diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue index 8cfe0d54d..3251531b6 100644 --- a/nezha-fronted/src/components/common/pickTime.vue +++ b/nezha-fronted/src/components/common/pickTime.vue @@ -179,7 +179,7 @@ export default { margin-left: 5px; } .time-picker { - padding-left: 8px; + /* padding-left: 8px; */ display: flex; } diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue index 788124d50..3afc95cc6 100644 --- a/nezha-fronted/src/components/common/timePicker.vue +++ b/nezha-fronted/src/components/common/timePicker.vue @@ -4,7 +4,7 @@ :class="{ 'calendar--small': size === 'small' }" class="calendar" > - -
@@ -37,7 +36,7 @@
-
{{$t("dashboard.panel.noDate")}}
+
{{showTime.text}}
-
From
-
+ prefix-icon=" " + class="panel-time-picker-hidden" + size="mini" + ref="calendar" + :format="timeFormatStrToDatePickFormat(timeFormatMain)" + @change="dateChange" + v-model="searchTime" + type="date" + popper-class="panel-time-picker-popper time-picker-popover__select-top" + align="right" + > + + +
From
+
{{ searchTime[0] }}
-
To
-
+
To
+
{{ searchTime[1] }}
- Apply time range
@@ -139,9 +131,10 @@ class="date-range-history-item" @click="historyChange(item)" > - {{bus.timeFormate(item[0])}} + + {{bus.timeFormate(item.start)}} — - {{bus.timeFormate(item[1])}} + {{this.timeFormate(item.end)}}
@@ -156,16 +149,18 @@
  • - + {{ item.text }}
    • @@ -194,12 +189,12 @@ export default { }, }, data() { - return ({ - rangeHistory : localStorage.getItem("date-range-history")? JSON.parse(localStorage.getItem("date-range-history")): [], - rangeHistoryArr: this.getRangeHistoryArr(), - address: localStorage.getItem("cn-sys-timezone"), + return { + rangeHistory : [], + rangeHistoryArr: [], + address: '', utc: localStorage.getItem("timezoneOffset"), - utcStr: this.getUtcStr(), + utcStr: '', dropdownFlag: false, isPopoverDisabled: false, isCustom: false, @@ -295,52 +290,57 @@ export default { type: "hour", value: 1, }, - }) + } + }, + mounted(){ + this.getItem() + this.getUtcStr() + this.getRangeHistoryArr() }, - methods: { + getItem(){ + this.rangeHistory = localStorage.getItem("date-range-history")? JSON.parse(localStorage.getItem("date-range-history")): []; + this.address= localStorage.getItem("nz-sys-timezone"); + this.utc= localStorage.getItem("timezoneOffset"); + }, myDatePickerShow(){ this.$refs.calendar.pickerVisible = true; }, historyChange (item) { - this.myStartTime = item.start - this.myEndTime = item.end + console.log(item); + this.searchTime[0] = item.start + this.searchTime[1] = item.end this.isCustom = true - returnValue() }, getRangeHistoryArr(){ - // return this.rangeHistory.slice(0, 4) + // this.rangeHistoryArr = this.rangeHistory.slice(0, 4) + // this.rangeHistoryArr = this.$loadsh.slice(this.rangeHistory,0, 4) + console.log('rangeHistoryArr',this.rangeHistoryArr); }, 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; + this.utcStr = str + this.utc }, - timeRange() { + timeRange(item) { + console.log(item); this.isCustom = true; + this.rangeHistory.unshift({ + start: item[0], + end: item[1] + }) + localStorage.setItem('date-range-history', JSON.stringify(this.rangeHistory)) + this.showDropdown() + this.$emit("change", this.searchTime); }, showDropdown() { this.dropdownFlag = !this.dropdownFlag; }, dateChange(val) { + console.log('val',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, @@ -351,8 +351,8 @@ export default { " " + this.searchTime[1] ); - localStorage.setItem('date-range-history', JSON.stringify(rangeHistory)) - this.$emit("change", this.searchTime); + // localStorage.setItem('date-range-history', JSON.stringify(rangeHistory)) + // this.$emit("change", this.searchTime); }, setCustomTime(timeGroup, timeRange) { if (timeGroup) { @@ -517,6 +517,7 @@ 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) {