fix : 时间选择器组件优化 初步修改 未完全完成

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;
-      }
     }
   }
 }

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;
 }
 </style>

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"
@@ -22,7 +22,6 @@
       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>
@@ -37,7 +36,7 @@
         </div>
       </div>
       <div class="calendar-popover-text" v-else>
-        <div class="time-no-data">{{$t("dashboard.panel.noDate")}}</div>
+        <div class="time-no-data">{{showTime.text}}</div>
       </div>
       <div class="calendar-popover-text">
         <i
@@ -96,36 +95,29 @@
               Absolute time range
             </div>
             <my-date-picker
-              popper-class="panel-time-picker-popper time-picker-popover__select-top"
+      prefix-icon=" "
-              :default-time="['00:00:00', '23:59:59']"
+      class="panel-time-picker-hidden"
-              :range-separator="$t('dashboard.panel.to')"
+      size="mini"
-              :start-placeholder="$t('dashboard.panel.startTime')"
+      ref="calendar"
-              :end-placeholder="$t('dashboard.panel.endTime')"
+      :format="timeFormatStrToDatePickFormat(timeFormatMain)"
-              align="right"
+      @change="dateChange"
-              prefix-icon=" "
+      v-model="searchTime"
-              class="panel-time-picker-hidden"
+      type="date"
-              size="mini"
+      popper-class="panel-time-picker-popper time-picker-popover__select-top"
-              ref="calendar"
+      align="right"
-              :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
+    >
-              :format="timeFormatStrToDatePickFormat(timeFormatMain)"
+    </my-date-picker>
-              :clearable="false"
+            
-              :editable="false"
+            <div  class="content-title">From</div>
-              v-model="searchTime"
+            <div @click="myDatePickerShow" tabindex="1" class="content-input">
-              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  class="content-title">To</div>
-            <div  tabindex="2" class="content-input">
+            <div @click="myDatePickerShow" tabindex="2" class="content-input">
               {{ searchTime[1] }}
             </div>
             <div>
-              <el-button @click="timeRange" type="primary" size="mini"
+              <el-button @click="timeRange(searchTime)" type="primary" size="mini"
                 >Apply time range</el-button
               >
             </div>
@@ -139,9 +131,10 @@
                 class="date-range-history-item"
                 @click="historyChange(item)"
               >
-                {{bus.timeFormate(item[0])}}
+                <!-- {{this.timeFormate(item.start)}} -->
+                {{bus.timeFormate(item.start)}}
                 —
-                {{bus.timeFormate(item[1])}}
+                {{this.timeFormate(item.end)}}
 
               </div>
             </div>
@@ -156,16 +149,18 @@
               <li
                 v-for="(item,key) in timeData"
                 @click="timeChange(item)"
-                :class="showTime.id === item.id ? 'nz-dashboard-dropdown-bg' : ''"
+                :class="showTime.id === item.id ? 'active' : ''"
                 :key="key"
+
               >
-                <span style="position: relative">
+                <span style="position: relative"
+                v-if="item.id !== 12 || showEmpty"
+                
+                >
                   {{ item.text }}
                   <i
-                    v-if="
+                v-if="showTime.id === item.id "
-                      item.id !== 12 || showEmpty
+                    class="nz-icon nz-icon-check"
-                    "
-                    class="cn-icon cn-icon-check"
                   ></i>
                 </span>
               </li>
@@ -194,12 +189,12 @@ export default {
     },
   },
   data() {
-    return ({
+    return {
-      rangeHistory : localStorage.getItem("date-range-history")? JSON.parse(localStorage.getItem("date-range-history")): [],
+      rangeHistory : [],
-      rangeHistoryArr: this.getRangeHistoryArr(),
+      rangeHistoryArr: [],
-        address: localStorage.getItem("cn-sys-timezone"),
+        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
+      console.log(item);
-      this.myEndTime = item.end
+      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) {
+      this.utcStr = str + this.utc
-        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() {
+    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))
+      // localStorage.setItem('date-range-history', JSON.stringify(rangeHistory))
-      this.$emit("change", this.searchTime);
+      // 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) {