From a848db4267d49065b3f6a080099f4ebea3e150f0 Mon Sep 17 00:00:00 2001
From: zhangxiaolong <zhangxiaolong@geedgenetworks.com>
Date: Wed, 13 Apr 2022 13:11:16 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1787=20fix=20:=20=E5=9F=BA=E6=9C=AC?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=20=E4=B8=8B=E4=B8=80=E6=AD=A5=E8=87=AA?=
 =?UTF-8?q?=E6=B5=8B=E4=BB=A5=E5=8F=8A=E4=BF=AE=E6=94=B9=E5=8E=86=E5=8F=B2?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/common/timePicker.scss     |  23 +-
 .../src/components/common/timePicker.vue      | 460 ++++++++++--------
 2 files changed, 277 insertions(+), 206 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/common/timePicker.scss b/nezha-fronted/src/assets/css/components/common/timePicker.scss
index 7330336e3..6846f57d5 100644
--- a/nezha-fronted/src/assets/css/components/common/timePicker.scss
+++ b/nezha-fronted/src/assets/css/components/common/timePicker.scss
@@ -157,7 +157,7 @@
 }
 
 .date-range-panel {
-  height: 450px;
+  height: 480px;
   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);
@@ -179,14 +179,19 @@
     }
 
     .content-input {
-      border: 1px solid #E7EAED;
-      border-radius: 2px;
-      width: 230px;
-      padding: 0 8px;
-      height: 30px;
-      line-height: 30px;
-      margin-bottom: 12px;
-      outline: #169AFF;
+      .el-input{
+        .el-input__inner{
+          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 {
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index 3afc95cc6..1ecdeeec7 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"
   >
-  <!-- <my-date-picker
+    <!-- <my-date-picker
       prefix-icon=" "
       class="panel-time-picker-hidden"
       size="mini"
@@ -28,20 +28,18 @@
       </div>
       <div class="calendar-popover-text" style="display: flex" v-if="isCustom">
         <div class="calendar-popover-text">
-          {{searchTime[0]}}
+          {{ searchTime[0] }}
         </div>
-        <div class="calendar-popover-text">{{$t('dashboard.panel.to')}}</div>
+        <div class="calendar-popover-text">{{ $t("dashboard.panel.to") }}</div>
         <div class="calendar-popover-text">
-          {{searchTime[1]}}
+          {{ searchTime[1] }}
         </div>
       </div>
       <div class="calendar-popover-text" v-else>
-        <div class="time-no-data">{{showTime.text}}</div>
+        <div class="time-no-data">{{ showTime.text }}</div>
       </div>
       <div class="calendar-popover-text">
-        <i
-          class="el-icon-arrow-down"
-        ></i>
+        <i class="el-icon-arrow-down"></i>
       </div>
     </div>
     <!-- <el-dropdown ref="timePickerDropdown" class="calendar-dropdown-title" trigger="click" @command="timeChange" @visible-change="popoverClick">
@@ -95,29 +93,36 @@
               Absolute time range
             </div>
             <my-date-picker
-      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"
-    >
-    </my-date-picker>
-            
-            <div  class="content-title">From</div>
-            <div @click="myDatePickerShow" tabindex="1" class="content-input">
-              {{ searchTime[0] }}
+              prefix-icon=" "
+              class="panel-time-picker-hidden"
+              size="mini"
+              ref="calendar"
+              :format="timeFormatStrToDatePickFormat(timeFormatMain)"
+              @change="dateChange(whoChoose)"
+              v-model="searchTimeValue"
+              type="date"
+              popper-class="panel-time-picker-popper time-picker-popover__select-top"
+              align="right"
+            >
+            </my-date-picker>
+
+            <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" tabindex="2" class="content-input">
-              {{ searchTime[1] }}
+            <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>
-              <el-button @click="timeRange(searchTime)" type="primary" size="mini"
+              <el-button
+                @click="timeRange(searchTime)"
+                type="primary"
+                size="mini"
                 >Apply time range</el-button
               >
             </div>
@@ -131,11 +136,9 @@
                 class="date-range-history-item"
                 @click="historyChange(item)"
               >
-                <!-- {{this.timeFormate(item.start)}} -->
-                {{bus.timeFormate(item.start)}}
+                {{ timeFormate(item.start) }}
                 —
-                {{this.timeFormate(item.end)}}
-
+                {{ timeFormate(item.end) }}
               </div>
             </div>
           </el-col>
@@ -147,19 +150,18 @@
             <div class="date-range-title">Relatime time ranges</div>
             <ul class="date-range-item">
               <li
-                v-for="(item,key) in timeData"
+                v-for="(item, key) in timeData"
                 @click="timeChange(item)"
                 :class="showTime.id === item.id ? 'active' : ''"
                 :key="key"
-
               >
-                <span style="position: relative"
-                v-if="item.id !== 12 || showEmpty"
-                
+                <span
+                  style="position: relative"
+                  v-if="item.id !== 12 || showEmpty"
                 >
                   {{ item.text }}
                   <i
-                v-if="showTime.id === item.id "
+                    v-if="showTime.id === item.id"
                     class="nz-icon nz-icon-check"
                   ></i>
                 </span>
@@ -190,157 +192,203 @@ export default {
   },
   data() {
     return {
-      rangeHistory : [],
+      whoChoose:'',
+      searchTimeValue:'',
+      rangeHistory: [],
       rangeHistoryArr: [],
-        address: '',
-        utc: localStorage.getItem("timezoneOffset"),
-        utcStr: '',
-        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"),
+      address: "",
+      utc: localStorage.getItem("timezoneOffset"),
+      utcStr: "",
+      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,
         },
-        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: 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,
+      },
+    };
   },
-  mounted(){
-    this.getItem()
-    this.getUtcStr()
-    this.getRangeHistoryArr()
+  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");
+    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;
+    myDatePickerShow(item) {
+      this.whoChoose = item
+        this.$refs.calendar.pickerVisible = true;
     },
-    historyChange (item)  {
-      console.log(item);
-      this.searchTime[0] = item.start
-      this.searchTime[1] = item.end
-      this.isCustom = 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)
     },
-    getRangeHistoryArr(){
-      // this.rangeHistoryArr = this.rangeHistory.slice(0, 4)
-      // this.rangeHistoryArr = this.$loadsh.slice(this.rangeHistory,0, 4)
-      console.log('rangeHistoryArr',this.rangeHistoryArr);
+    getRangeHistoryArr() {
+      const arr = this.rangeHistory.slice(0, 3)
+      this.rangeHistoryArr = arr
     },
     getUtcStr() {
       let str = "UTC ";
-      this.utcStr = str + this.utc
+      this.utcStr = str + this.utc;
     },
     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()
+        end: item[1],
+      });
+      localStorage.setItem(
+        "date-range-history",
+        JSON.stringify(this.rangeHistory)
+      );
+      this.showDropdown();
+      this.getRangeHistoryArr()
+      console.log('timerange里searchTime',this.searchTime);
+      this.searchTime[2]=''
       this.$emit("change", this.searchTime);
+      this.setSearchTime('','',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);
+    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)){
+            const startTime = bus.timeFormate(v)
+          this.$set(this.searchTime, 0, startTime);
+          }else{
+            console.log('输入不规范');
+          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)){
+            const endTime = bus.timeFormate(v)
+          this.$set(this.searchTime, 1, endTime);
+          }else{
+            console.log('输入不规范');
+          this.$set(this.searchTime, 1, '');
+
+          }
+        }
+      }
+      this.searchTime[2] = ''
+      console.log('searchTime',this.searchTime);
       this.$set(this.showTime, "id", 0);
       this.$set(
         this.showTime,
@@ -351,39 +399,48 @@ export default {
           " " +
           this.searchTime[1]
       );
-      // localStorage.setItem('date-range-history', JSON.stringify(rangeHistory))
-      // this.$emit("change", this.searchTime);
+      console.log('showTime',this.showTime);
     },
     setCustomTime(timeGroup, timeRange) {
       if (timeGroup) {
+        console.log('timeGroup',timeGroup);
         this.showTime = this.nowTimeType = this.timeData.find(
           (item) => item.id == timeGroup.id
         );
+        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);
         } else {
-          this.showTime = this.nowTimeType = {
-            id: 4,
-            text: this.$t("dashboard.panel.lastOneHour"),
-            type: "hour",
-            value: 1,
-          };
-          const time = bus.getTimezontDateRange();
-          if (timeGroup.start_time) {
-            this.$set(
-              this.searchTime,
-              0,
-              bus.timeFormate(timeGroup.start_time)
-            );
-            this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time));
-          } else {
-            this.$set(this.searchTime, 0, bus.timeFormate(time[0]));
-            this.$set(this.searchTime, 1, bus.timeFormate(time[1]));
+          const time = this.searchTime.splice(' ')
+          this.showTime= this.nowTimeType ={
+            text:time[0] +' ' + this.$t('dashboard.panel.to') +' '+time[1]
           }
+          this.$set(this.searchTime, 0, bus.timeFormate(time[0]));
+          this.$set(this.searchTime, 1, bus.timeFormate(time[1]));
+          // this.showTime = this.nowTimeType = {
+          //   id: 4,
+          //   text: this.$t("dashboard.panel.lastOneHour"),
+          //   type: "hour",
+          //   value: 1,
+          // };
+          // const time = bus.getTimezontDateRange();
+          // if (timeGroup.start_time) {
+          //   this.$set(
+          //     this.searchTime,
+          //     0,
+          //     bus.timeFormate(timeGroup.start_time)
+          //   );
+          //   this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time));
+          // } else {
+          //   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]));
         }
       } else {
+        console.log('no timegroup');
         this.showTime = this.nowTimeType = {
           id: 4,
           text: this.$t("dashboard.panel.lastOneHour"),
@@ -396,7 +453,7 @@ export default {
       }
     },
     timeChange(val, from) {
-      console.log(val,from);
+      console.log(val, from);
       this.nowTimeType = val;
       this.$set(this.showTime, "id", val.id);
       this.$set(this.showTime, "text", val.text);
@@ -436,30 +493,35 @@ export default {
             }
           }
         } else {
-          this.isCustom = false;
+          console.log('else',this.searchTime);
+          // this.isCustom = false;
+          this.showDropdown()
           if (this.showEmpty && id === 12) {
             this.searchTime = [];
           }
           this.$emit("change", this.searchTime);
         }
       }
+
     },
     getCurrentTime() {
-      let timeTypeId = this.showTime.id;
-      if (timeTypeId === 0) {
         return this.searchTime;
-      } else {
-        if (!timeTypeId) {
-          timeTypeId = 4;
-        }
-        const currentTime = this.timeData.find(
-          (item) => item.id === timeTypeId
-        );
-        this.setSearchTime(currentTime.type, currentTime.value);
-        return this.searchTime;
-      }
+      console.log('getcurrenttime');
+      // let timeTypeId = this.showTime.id;
+      // if (timeTypeId === 0) {
+      //   return this.searchTime;
+      // } else {
+      //   if (!timeTypeId) {
+      //     timeTypeId = 4;
+      //   }
+      //   const currentTime = this.timeData.find(
+      //     (item) => item.id === timeTypeId
+      //   );
+      //   this.setSearchTime(currentTime.type, currentTime.value);
+      //   return this.searchTime;
+      // }
     },
-    setSearchTime(type, val) {
+    setSearchTime(type, val,time) {
       if (type === "minute") {
         const startTime = bus.timeFormate(
           new Date(bus.computeTimezone(new Date().getTime())).setMinutes(
@@ -497,6 +559,10 @@ export default {
         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) {