fix : 时间选择器优化样式修改 历史记录绑定

nezha-fronted/src/assets/css/components/common/timePicker.scss

@@ -58,7 +58,7 @@
   margin-left: 4px;
 }
 .panel-time-picker-popper[x-placement^=bottom] .popper__arrow {
-  left: 85% !important;
+  left: 50% !important;
 }
 
 .panel-time-picker-popper .el-date-table td.today span {
@@ -84,6 +84,10 @@
 
   .utc-str {
     text-align: right;
+    span{
+      font-size: 12px;
+      background: $--background-color-2;
+    }
   }
 }
 .date-range-refresh {
@@ -96,6 +100,8 @@
 
 .date-range-item {
   list-style-type: none;
+  font-size: 14px;
+  font-weight: 400;
 }
 
 .panel-time-picker-hidden {
@@ -157,25 +163,23 @@
 }
 
 .date-range-panel {
-  height: 480px;
+  height: 460px;
   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: 5%;
+  right: 4%;
-  top: 34px;
+  top: 50px;
   z-index: 1;
 
   .date-range-panel-content-left {
     padding-left: 10px;
     display: flex;
     flex-direction: column;
-
     .content-title {
       font-size: 14px;
       color: #666666;
       font-weight: 400;
-      margin-bottom: 12px;
     }
 
     .content-input {
@@ -204,12 +208,14 @@
 
       .date-range-history-item {
         padding: 5px 0;
+        font-size: 12px;
+        font-weight: 400;
         cursor: pointer;
       }
 
       .date-range-history-item:hover {
         /*font-weight: 600;*/
-        background: #f9f9f9;
+        background: $--background-color-2;
       }
     }
   }
@@ -238,16 +244,16 @@
       }
 
       li:hover {
-        background: #F2F9FF;
+        background: #F5F5F5;
         color: #333333;
       }
       li.active :hover {
-        background: $--color-primary;
+        background: #F5F5F5;
-        color: $--time-picker-hover-color !important;
+        color: $--color-primary !important;
       }
       li.active {
-        background: $--color-primary;
+        background: #F5F5F5;
-        color: $--time-picker-hover-color !important;
+        color: $--color-primary !important;
         font-weight: 400;
 
         .cn-icon-check {

nezha-fronted/src/components/common/pickTime.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="interval-refresh margin-r-10">
-    <time-picker v-if="showTimePicker" ref="timePicker" v-model="searchTime" :default-pick="defaultPick" :show-empty="showEmpty" class="time-picker margin-r-10" size="small" @change="dateChange"></time-picker>
+    <time-picker v-if="showTimePicker" ref="timePicker" v-model="searchTime" :default-pick="defaultPick" :show-empty="showEmpty" class="time-picker margin-r-10" size="small" @change="dateChange" :sign="sign"></time-picker>
     <multipleTime v-if="showMultiple" ref="multipleTime" :stepSearchTime="searchTime" class="multiple-time margin-r-10" @change="dateChange(searchTime)"/>
     <chart-unit v-if="useChartUnit" v-model="unit" class="margin-r-10"></chart-unit>
     <div v-show="useRefresh" class="top-tool-btn-group">
@@ -66,7 +66,8 @@ export default {
     },
     defaultPick: Number,
     showEmpty: { type: Boolean, default: false },
-    id: String
+    id: String,
+    sign:[Number,String]
   },
   data () {
     return {

nezha-fronted/src/components/common/timePicker.vue

@@ -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")
+      this.rangeHistory = localStorage.getItem("date-range-history"+this.sign)
-        ? JSON.parse(localStorage.getItem("date-range-history"))
+        ? 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) {

nezha-fronted/src/components/page/alert/alertMessage.vue

@@ -18,7 +18,7 @@
         <button id="asset-filter" :class="[dataListLayout.indexOf('clickSearch') > -1?'is-focus':'' ]" class="top-tool-btn margin-r-10" @click.stop="showClickSearch">
           <i class="nz-icon nz-icon-funnel"></i>
         </button>
-        <pick-time v-model="searchTime" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
+        <pick-time v-model="searchTime" :sign="sign?sign:'message'" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
         <button id="roles-add" v-has="'alertMessage_view'" :title="$t('overall.exportExcelLower')" class="top-tool-btn margin-r-10"
                 type="button" @click="showExportDialog">
           <i class="nz-icon-download1 nz-icon"></i>
@@ -177,6 +177,7 @@ export default {
   mixins: [dataListMixin, routerPathParams],
   data () {
     return {
+      sign:'',
       chartLoading: false,
       chartInfo: {},
       alertMessageNzTableHeightOffset: 242,
@@ -578,6 +579,8 @@ export default {
       })
     },
     messageDetail (row) {
+      this.sign = Number(row.alertRule.id)
+      console.log(this.sign);
       this.$get('/alert/rule/' + row.alertRule.id).then(res => {
         this.currentMsg = { ...row, alertRule: { ...res.data } }
         this.$nextTick(() => {

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -40,7 +40,7 @@
 <!--                </el-input>-->
 <!--              </div>-->
 
-              <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10"></pick-time>
+              <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10" :sign="panelId"></pick-time>
 
               <button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10"
                       type="button" @click="addChartBefore">