From 081677e7dc376d3d705a25d2492af45c3a3ce5f5 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 13 Apr 2022 16:22:54 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=97=B6=E9=97=B4=E4=B8=8D=E7=94=9F=E6=95=88?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/timePicker.vue      | 451 +++++++++---------
 1 file changed, 228 insertions(+), 223 deletions(-)

diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index 4ee0d6e47..1c840915a 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"
   >
-    
+
     <div @click="showDropdown" class="date-range-text">
       <div class="calendar-popover-text">
         <i class="nz-icon nz-icon-time"></i>
@@ -57,7 +57,6 @@
             <div @click="myDatePickerShow('end')" tabindex="2" class="content-input">
               <el-input v-model="searchTime[1]" @change="dateChange('end',searchTime[1])"> </el-input>
 
-
             </div>
             <div>
               <el-button
@@ -124,37 +123,37 @@
 </template>
 
 <script>
-import bus from "@/libs/bus";
+import bus from '@/libs/bus'
 
 export default {
-  name: "timePicker",
+  name: 'timePicker',
   props: {
     defaultPick: Number,
     showEmpty: { default: false, type: Boolean },
     size: {
-      type: String,
+      type: String
     },
-    sign:[Number,String]
+    sign: [Number, String]
   },
-  data() {
+  data () {
     return {
-      whoChoose:'',
-      searchTimeValue:'',
+      whoChoose: '',
+      searchTimeValue: '',
       rangeHistory: [],
       rangeHistoryArr: [],
-      address: "",
-      utc: localStorage.getItem("timezoneOffset"),
-      utcStr: "",
+      address: '',
+      utc: localStorage.getItem('timezoneOffset'),
+      utcStr: '',
       dropdownFlag: false,
       isPopoverDisabled: false,
       isCustom: false,
       searchTime: [
         bus.timeFormate(bus.getOffsetTimezoneData(-1)),
-        bus.timeFormate(bus.getOffsetTimezoneData()),
+        bus.timeFormate(bus.getOffsetTimezoneData())
       ],
       showTime: {
         id: 4,
-        text: this.$t("dashboard.panel.lastOneHour"),
+        text: this.$t('dashboard.panel.lastOneHour')
       },
       timeData: [
         // {
@@ -164,208 +163,210 @@ export default {
         // },
         {
           id: 12,
-          text: this.$t("dashboard.panel.noDate"),
-          value: 0,
+          text: this.$t('dashboard.panel.noDate'),
+          value: 0
         },
         {
           id: 1,
-          text: this.$t("dashboard.panel.lastFiveMin"),
-          type: "minute",
-          value: 5,
+          text: this.$t('dashboard.panel.lastFiveMin'),
+          type: 'minute',
+          value: 5
         },
         {
           id: 2,
-          text: this.$t("dashboard.panel.lastFifteenMin"),
-          type: "minute",
-          value: 15,
+          text: this.$t('dashboard.panel.lastFifteenMin'),
+          type: 'minute',
+          value: 15
         },
         {
           id: 3,
-          text: this.$t("dashboard.panel.lastThirtyMin"),
-          type: "minute",
-          value: 30,
+          text: this.$t('dashboard.panel.lastThirtyMin'),
+          type: 'minute',
+          value: 30
         },
         {
           id: 4,
-          text: this.$t("dashboard.panel.lastOneHour"),
-          type: "hour",
-          value: 1,
+          text: this.$t('dashboard.panel.lastOneHour'),
+          type: 'hour',
+          value: 1
         },
         {
           id: 5,
-          text: this.$t("dashboard.panel.lastThreeHour"),
-          type: "hour",
-          value: 3,
+          text: this.$t('dashboard.panel.lastThreeHour'),
+          type: 'hour',
+          value: 3
         },
         {
           id: 6,
-          text: this.$t("dashboard.panel.lastSixHour"),
-          type: "hour",
-          value: 6,
+          text: this.$t('dashboard.panel.lastSixHour'),
+          type: 'hour',
+          value: 6
         },
         {
           id: 7,
-          text: this.$t("dashboard.panel.lastTwelveHour"),
-          type: "hour",
-          value: 12,
+          text: this.$t('dashboard.panel.lastTwelveHour'),
+          type: 'hour',
+          value: 12
         },
         {
           id: 8,
-          text: this.$t("dashboard.panel.lastTwentyFourHour"),
-          type: "hour",
-          value: 24,
+          text: this.$t('dashboard.panel.lastTwentyFourHour'),
+          type: 'hour',
+          value: 24
         },
         {
           id: 9,
-          text: this.$t("dashboard.panel.lastTwoDay"),
-          type: "date",
-          value: 2,
+          text: this.$t('dashboard.panel.lastTwoDay'),
+          type: 'date',
+          value: 2
         },
         {
           id: 10,
-          text: this.$t("dashboard.panel.lastSevenDay"),
-          type: "date",
-          value: 7,
+          text: this.$t('dashboard.panel.lastSevenDay'),
+          type: 'date',
+          value: 7
         },
         {
           id: 11,
-          text: this.$t("dashboard.panel.lastThirtyDay"),
-          type: "date",
-          value: 30,
-        },
+          text: this.$t('dashboard.panel.lastThirtyDay'),
+          type: 'date',
+          value: 30
+        }
       ],
       nowTimeType: {
         id: 4,
-        text: this.$t("dashboard.panel.lastOneHour"),
-        type: "hour",
-        value: 1,
-      },
-    };
+        text: this.$t('dashboard.panel.lastOneHour'),
+        type: 'hour',
+        value: 1
+      }
+    }
   },
-  mounted() {
-    this.getItem();
-    this.getUtcStr();
-    this.getRangeHistoryArr();
-    console.log(this.sign);
+  mounted () {
+    this.getItem()
+    this.getUtcStr()
+    this.getRangeHistoryArr()
+    console.log(this.sign)
   },
   methods: {
-    getItem() {
-      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");
+    getItem () {
+      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')
     },
-    myDatePickerShow(item) {
+    myDatePickerShow (item) {
       this.whoChoose = item
-        this.$refs.calendar.pickerVisible = true;
+      this.$refs.calendar.pickerVisible = true
     },
-    historyChange(item) {
-      this.searchTime[0] = item.start;
-      this.searchTime[1] = item.end;
-      this.isCustom = true;
-      this.showDropdown();
-      this.$emit("change", this.searchTime);
-      this.setSearchTime('','',this.searchTime)
+    historyChange (item) {
+      this.searchTime[0] = item.start
+      this.searchTime[1] = item.end
+      this.isCustom = true
+      this.showDropdown()
+      this.$emit('change', this.searchTime)
+      this.setSearchTime('', '', this.searchTime)
     },
-    getRangeHistoryArr() {
+    getRangeHistoryArr () {
       const arr = this.rangeHistory.slice(0, 3)
       this.rangeHistoryArr = arr
     },
-    getUtcStr() {
-      let str = "UTC ";
-      this.utcStr = str + this.utc;
+    getUtcStr () {
+      const str = 'UTC '
+      this.utcStr = str + this.utc
     },
-    timeRange(item) {
-      
-      this.isCustom = true;
+    timeRange (item) {
+      this.showTime = this.nowTimeType = {
+        id: 0,
+        text: this.$t('dashboard.panel.customTimeRange'),
+        value: -1
+      }
+      this.isCustom = true
       this.rangeHistory.unshift({
         start: item[0],
-        end: item[1],
-      });
+        end: item[1]
+      })
       localStorage.setItem(
-        "date-range-history"+this.sign,
+        'date-range-history' + this.sign,
         JSON.stringify(this.rangeHistory)
-      );
-      this.searchTime[2]=''
-      this.showDropdown();
+      )
+      this.$set(this.searchTime, 2, '')
+      this.showDropdown()
       this.getRangeHistoryArr()
-      console.log('timerange里searchTime',this.searchTime);
-      this.$emit("change", this.searchTime);
-      this.setSearchTime('','',this.searchTime)
+      console.log('timerange里searchTime', this.searchTime)
+      this.setSearchTime('', '', this.searchTime)
+      this.$emit('change', this.searchTime)
+      console.log(this.searchTime)
     },
-    showDropdown() {
-      this.dropdownFlag = !this.dropdownFlag;
+    showDropdown () {
+      this.dropdownFlag = !this.dropdownFlag
     },
-    dateChange(type,v) {
-      if(type == 'start'){
-        if(!v){
-          const startTime = bus.timeFormate(this.searchTimeValue).trim().split(" ")[0] + ' ';
-        this.$set(this.searchTime, 0, startTime);
-        }else{
-          console.log(v);
-          let str = v.trim().split(' ')[1]
-          console.log(str);
-          let reg = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/
-          if(reg.test(str)){
+    dateChange (type, v) {
+      if (type == 'start') {
+        if (!v) {
+          const startTime = bus.timeFormate(this.searchTimeValue).trim().split(' ')[0] + ' '
+          this.$set(this.searchTime, 0, startTime)
+        } else {
+          console.log(v)
+          const str = v.trim().split(' ')[1]
+          console.log(str)
+          const reg = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/
+          if (reg.test(str)) {
             const startTime = bus.timeFormate(v)
-          this.$set(this.searchTime, 0, startTime);
-          }else{
-          this.$set(this.searchTime, 0, '');
-
+            this.$set(this.searchTime, 0, startTime)
+          } else {
+            this.$set(this.searchTime, 0, '')
           }
         }
-      }else if(type == 'end'){
-        if(!v){
-          const endTime = bus.timeFormate(this.searchTimeValue).trim().split(" ")[0] + ' ';
-        this.$set(this.searchTime, 1, endTime);
-        }else{
-           let str = v.trim().split(' ')[1]
-          console.log(str);
-          let reg = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/
-          if(reg.test(str)){
+      } else if (type == 'end') {
+        if (!v) {
+          const endTime = bus.timeFormate(this.searchTimeValue).trim().split(' ')[0] + ' '
+          this.$set(this.searchTime, 1, endTime)
+        } else {
+          const str = v.trim().split(' ')[1]
+          console.log(str)
+          const reg = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/
+          if (reg.test(str)) {
             const endTime = bus.timeFormate(v)
-          this.$set(this.searchTime, 1, endTime);
-          }else{
-          this.$set(this.searchTime, 1, '');
-
+            this.$set(this.searchTime, 1, endTime)
+          } else {
+            this.$set(this.searchTime, 1, '')
           }
         }
       }
       this.searchTime[2] = ''
-      console.log('searchTime',this.searchTime);
-      this.$set(this.showTime, "id", 0);
+      console.log('searchTime', this.searchTime)
+      this.$set(this.showTime, 'id', 0)
       this.$set(
         this.showTime,
-        "text",
+        'text',
         this.searchTime[0] +
-          " " +
-          this.$t("dashboard.panel.to") +
-          " " +
+          ' ' +
+          this.$t('dashboard.panel.to') +
+          ' ' +
           this.searchTime[1]
-      );
-      console.log('showTime',this.showTime);
+      )
+      console.log('showTime', this.showTime)
     },
-    setCustomTime(timeGroup, timeRange) {
+    setCustomTime (timeGroup, timeRange) {
       if (timeGroup) {
-        console.log('timeGroup',timeGroup);
+        console.log('timeGroup', timeGroup)
         this.showTime = this.nowTimeType = this.timeData.find(
           (item) => item.id == timeGroup.id
-        );
-        console.log(this.showTime);
+        )
+        console.log(this.showTime)
         if (this.showTime) {
-          this.showTime = Object.assign({}, this.showTime);
-          this.$set(this.searchTime, 0, timeGroup.start_time);
-          this.$set(this.searchTime, 1, timeGroup.end_time);
+          this.showTime = Object.assign({}, this.showTime)
+          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]
+          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]));
+          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 = {
@@ -386,75 +387,74 @@ export default {
           //   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(time[0]));
+          // this.$set(this.searchTime, 0, bus.timeFormate(time[0]));
         }
       } else {
-        console.log('no timegroup');
+        console.log('no timegroup')
         this.showTime = this.nowTimeType = {
           id: 4,
-          text: this.$t("dashboard.panel.lastOneHour"),
-          type: "hour",
-          value: 1,
-        };
-        const time = bus.getTimezontDateRange();
-        this.$set(this.searchTime, 0, time[0]);
-        this.$set(this.searchTime, 1, time[1]);
+          text: this.$t('dashboard.panel.lastOneHour'),
+          type: 'hour',
+          value: 1
+        }
+        const time = bus.getTimezontDateRange()
+        this.$set(this.searchTime, 0, time[0])
+        this.$set(this.searchTime, 1, time[1])
       }
     },
-    timeChange(val, from) {
-      console.log(val, from);
-      this.nowTimeType = val;
-      this.$set(this.showTime, "id", val.id);
-      this.$set(this.showTime, "text", val.text);
+    timeChange (val, from) {
+      console.log(val, from)
+      this.nowTimeType = val
+      this.$set(this.showTime, 'id', val.id)
+      this.$set(this.showTime, 'text', val.text)
       if (!val) {
-        this.isCustom = false;
-        return false;
+        this.isCustom = false
+        return false
       } 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 (from === "chart") {
-            this.isCustom = false;
-            this.$emit("change", this.searchTime);
+          if (from === 'chart') {
+            this.isCustom = false
+            this.$emit('change', this.searchTime)
           } else {
-            this.isCustom = true;
-            this.$refs.calendar.focus();
-            this.$refs.calendar.pickerVisible = true;
-            if (document.getElementById("viewGraphDialog")) {
+            this.isCustom = true
+            this.$refs.calendar.focus()
+            this.$refs.calendar.pickerVisible = true
+            if (document.getElementById('viewGraphDialog')) {
               // 处理 多弹出的z-index的问题 当前为 alertMessage的处理
               const viewGraphDialogStyle = window.getComputedStyle(
-                document.getElementById("viewGraphDialog", null)
-              );
+                document.getElementById('viewGraphDialog', null)
+              )
               setTimeout(() => {
-                if (viewGraphDialogStyle["z-index"] !== "auto") {
+                if (viewGraphDialogStyle['z-index'] !== 'auto') {
                   const dom =
-                    document.getElementsByClassName("el-picker-panel");
+                    document.getElementsByClassName('el-picker-panel')
                   Array.prototype.forEach.call(dom, function (element) {
-                    element.style["z-index"] =
-                      viewGraphDialogStyle["z-index"] + 1;
-                  });
-                  this.$refs.calendar.$el.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
                 }
-              });
+              })
             }
           }
         } else {
-          console.log('else',this.searchTime);
+          console.log('else', this.searchTime)
           // this.isCustom = false;
           this.showDropdown()
           if (this.showEmpty && id === 12) {
-            this.searchTime = [];
+            this.searchTime = []
           }
-          this.$emit("change", this.searchTime);
+          this.$emit('change', this.searchTime)
         }
       }
-
     },
-    getCurrentTime() {
-        return this.searchTime;
+    getCurrentTime () {
+      return this.searchTime
       // let timeTypeId = this.showTime.id;
       // if (timeTypeId === 0) {
       //   return this.searchTime;
@@ -469,80 +469,85 @@ export default {
       //   return this.searchTime;
       // }
     },
-    setSearchTime(type, val,time) {
-      if (type === "minute") {
+    setSearchTime (type, val, time) {
+      debugger
+      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 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 + "m");
-      } else if (type === "hour") {
+        )
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        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(
           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") {
+        )
+        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");
-      }else{
-        this.$set(this.searchTime, 0, time[0]);
-        this.$set(this.searchTime, 1, time[1]);
-
+        )
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'd')
+      } else {
+        this.$set(this.searchTime, 0, time[0])
+        this.$set(this.searchTime, 1, time[1])
       }
     },
     setCostomTime: function (costomTime) {
-      this.searchTime = Object.assign(costomTime);
-      const val = Object.assign(this.timeData[0]);
-      this.$set(this.showTime, "id", val.id);
-      this.$set(this.showTime, "text", val.text);
+      this.searchTime = Object.assign(costomTime)
+      const val = Object.assign(this.timeData[0])
+      this.$set(this.showTime, 'id', val.id)
+      this.$set(this.showTime, 'text', val.text)
     },
-    popoverClick(val) {
+    popoverClick (val) {
       if (val) {
-        this.isPopoverDisabled = true;
+        this.isPopoverDisabled = true
       } else {
-        this.isPopoverDisabled = false;
+        this.isPopoverDisabled = false
       }
-    },
+    }
   },
   watch: {
+    searchTime: {
+      handler (n, o) {
+        console.log(n)
+      }
+    },
     defaultPick: {
       immediate: true,
-      handler(n, o) {
+      handler (n, o) {
         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) {
-            this.showTime = Object.assign({}, showTime);
-            this.searchTime = this.$parent.searchTime;
+            this.showTime = Object.assign({}, showTime)
+            this.searchTime = this.$parent.searchTime
           }
           if (this.showEmpty && this.defaultPick === 12) {
-            this.searchTime = [];
+            this.searchTime = []
           }
         }
-      },
-    },
-  },
-};
+      }
+    }
+  }
+}
 </script>