Merge branch 'dev-3.4' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.4rel-22.07.02

5 files changed, 63 insertions, 16 deletions

diff --git a/nezha-fronted/src/components/common/mixin/mainMixinFun.js b/nezha-fronted/src/components/common/mixin/mainMixinFun.js
index 81026d3c1..1676cf909 100644
--- a/nezha-fronted/src/components/common/mixin/mainMixinFun.js
+++ b/nezha-fronted/src/components/common/mixin/mainMixinFun.js
@@ -63,7 +63,7 @@ export default {
     translation (key) {
       return i18n.t(key)
     },
-    timeFormatStrToDatePickFormat (str, flag) {
+    timeFormatStrToDatePickFormat (str = localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD HH:mm:ss', flag) {
       if (flag) {
         const reg = /Y/g
         str = str.replace(reg, 'y')
diff --git a/nezha-fronted/src/components/common/mixin/system/systemMixin.js b/nezha-fronted/src/components/common/mixin/system/systemMixin.js
index 4bd5b88d8..fd725c7a0 100644
--- a/nezha-fronted/src/components/common/mixin/system/systemMixin.js
+++ b/nezha-fronted/src/components/common/mixin/system/systemMixin.js
@@ -238,6 +238,7 @@ export default {
             localStorage.setItem('nz-sys-logo', this.basic.system_logo)
             localStorage.setItem('nz-sys-default-cabinet-usize', this.basic.default_cabinet_usize)
             localStorage.setItem('nz-unsaved-change', this.basic.unsaved_change)
+            this.$store.commit('setTimeFormatMain', this.basic.date_format)
             this.basic.map_center_config = JSON.parse(this.basic.map_center_config)
             this.basic.pin_policy = JSON.parse(this.basic.pin_policy)
             this.basic.lnglat = `${this.basic.map_center_config.longitude},${this.basic.map_center_config.latitude}`
@@ -301,7 +302,7 @@ export default {
     dateFormatTimer () {
       const date = new Date()
       const milli = date.getTime()
-      this.dateFormatList.map(e => {
+      this.dateFormatList.forEach(e => {
         if (e.label === 'DD/MM/YYYY HH:mm:ss') {
           e.time = bus.timeFormate(bus.computeTimezone(milli), e.label)
         } else if (e.label === 'MM/DD/YYYY HH:mm:ss') {
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index 8c49ef9ca..53f721130 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -45,8 +45,8 @@
               class="panel-time-picker-hidden"
               size="mini"
               ref="calendar"
-              :format="timeFormatStrToDatePickFormat(timeFormatMain)"
-              :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
+              :format="timeFormatStrToDatePickFormat()"
+              :value-format="timeFormatStrToDatePickFormat()"
               @change="dateChange"
               :default-time="['00:00:00', '23:59:59']"
               v-model="oldSearchTime"
@@ -274,8 +274,24 @@ export default {
     const timeTemp = this.$loadsh.cloneDeep(this.searchTime)
     this.oldSearchTime[0] = timeTemp[0]
     this.oldSearchTime[1] = timeTemp[1]
+    // 监听dateFormat变化 改变日期格式
+    window.addEventListener('storage', this.watchDateFormat)
   },
   methods: {
+    // 监听localStorage日期格式
+    watchDateFormat (e) {
+      if (e.key === 'nz-default-dateFormat') {
+        // 先用之前vuex的日期格式获取到正确时间
+        const timeStart = this.momentStrToTimestamp(this.oldSearchTime[0], this.timeFormatMain)
+        const timeEnd = this.momentStrToTimestamp(this.oldSearchTime[1], this.timeFormatMain)
+        this.$set(this.oldSearchTime, 0, this.momentTz(timeStart))
+        this.$set(this.oldSearchTime, 1, this.momentTz(timeEnd))
+        this.searchTime = this.$loadsh.cloneDeep(this.oldSearchTime)
+        this.$emit('change', this.searchTime)
+        // 更新vuex日期格式
+        this.$store.commit('setTimeFormatMain', localStorage.getItem('nz-default-dateFormat') || 'YYYY-MM-DD HH:mm:ss')
+      }
+    },
     changeDropdownFlag () {
       if (this.dropdownFlag) {
         this.dropdownFlag = false
@@ -340,8 +356,8 @@ export default {
       }
       this.isCustom = true
       this.rangeHistory.unshift({
-        start: this.momentStrToTimestamp(item[0]),
-        end: this.momentStrToTimestamp(item[1])
+        start: this.momentStrToTimestamp(this.searchTime[0]),
+        end: this.momentStrToTimestamp(this.searchTime[1])
       })
       localStorage.setItem(
         'date-range-history' + this.sign,
@@ -362,8 +378,9 @@ export default {
       this.dropdownFlag = !this.dropdownFlag
     },
     dateInputChange (type, v) {
+      const timeFormatMain = localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD HH:mm:ss'
       if (type == 'start') {
-        const dateValidate = moment(this.oldSearchTime[0], this.timeFormatMain).isValid()
+        const dateValidate = moment(this.oldSearchTime[0], timeFormatMain).isValid()
         if (!dateValidate) {
           this.inputError = this.$t('date.formatError')
           this.oldSearchTimeError[0] = true
@@ -372,7 +389,7 @@ export default {
           this.oldSearchTime[0] = bus.timeFormate(this.oldSearchTime[0])
         }
       } else if (type == 'end') {
-        const dateValidate = moment(this.oldSearchTime[1], this.timeFormatMain).isValid()
+        const dateValidate = moment(this.oldSearchTime[1], timeFormatMain).isValid()
         if (!dateValidate) {
           this.oldSearchTimeError[1] = true
         } else {
@@ -381,8 +398,8 @@ export default {
           this.oldSearchTime[1] = bus.timeFormate(this.oldSearchTime[1])
         }
       }
-      console.log(moment(this.oldSearchTime[0], this.timeFormatMain).isValid(), moment(this.oldSearchTime[1], this.timeFormatMain).isValid(), !moment(this.oldSearchTime[0]).isBefore(this.oldSearchTime[1]))
-      if (moment(this.oldSearchTime[0], this.timeFormatMain).isValid() && moment(this.oldSearchTime[1], this.timeFormatMain).isValid() && !moment(this.oldSearchTime[0]).isBefore(this.oldSearchTime[1])) {
+      // console.log(moment(this.oldSearchTime[0], timeFormatMain).isValid(), moment(this.oldSearchTime[1], timeFormatMain).isValid(), !moment(this.oldSearchTime[0]).isBefore(this.oldSearchTime[1]))
+      if (moment(this.oldSearchTime[0], timeFormatMain).isValid() && moment(this.oldSearchTime[1], timeFormatMain).isValid() && !moment(this.oldSearchTime[0]).isBefore(this.oldSearchTime[1])) {
         this.oldSearchTimeError[0] = true
         this.inputError = this.$t('date.fromGreaterTo')
       }
@@ -588,6 +605,9 @@ export default {
           : []
       }
     }
+  },
+  beforeDestroy () {
+    window.removeEventListener('storage', this.watchDateFormat)
   }
 }
 </script>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
index e8d66996d..9a1d6021b 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -179,7 +179,7 @@
                 </div>
               </el-collapse-item>
               <el-collapse-item v-if="showTab.indexOf('2') > -1" name="2" title="Logs">
-                <log-tab ref="logDetail" :log-data="logData" :explore-log-table="logTabNoData" :explore-item="true" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData" v-my-loading="chartLoading"></log-tab>
+                <log-tab ref="logDetail" :timeRange="filterTime" :log-data="logData" :explore-log-table="logTabNoData" :explore-item="true" :tab-index="tabIndex" @exportLog="exportLog" @limitChange="queryLogData" v-my-loading="chartLoading"></log-tab>
               </el-collapse-item>
             </template>
           </el-collapse>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
index 89f687746..50077d553 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
@@ -60,7 +60,8 @@
           prop="date"
           width="160"
         >
-          <template slot-scope="{ row }">{{utcTimeToTimezoneStr(row.date)}}</template>
+          <!-- <template slot-scope="{ row }">{{utcTimeToTimezoneStr(row.date)}}</template> -->
+          <template slot-scope="{ row }">{{momentTz(row.date)}}</template>
         </el-table-column>
         <el-table-column
           v-if="!showSwitch"
@@ -117,7 +118,8 @@ export default {
     },
     loadingBottom: Boolean,
     exploreLogTable: Boolean,
-    exploreItem: Boolean
+    exploreItem: Boolean,
+    timeRange: {}
   },
   computed: {
     tableTimeFormat () {
@@ -265,7 +267,7 @@ export default {
             borderRadius: 3,
             textStyle: {
               padding: [0, 0, 0, 6],
-              color: this.theme == 'light' ? '#666666' : '#BEBEBE',
+              color: this.theme == 'light' ? '#666666' : '#BEBEBE'
             },
             inactiveColor: this.theme == 'light' ? '#BEBEBE' : '#666666' // 字体颜色
           },
@@ -278,7 +280,7 @@ export default {
               rotate: 0,
               fontSize: 13 * window.devicePixelRatio,
               formatter (value) {
-                return vm.utcTimeToTimezoneStr(vm.$unixTimeParseToString(vm.toMillisecondTime(parseInt(value)) / 1000, 'yyyy-MM-dd hh:mm:ss'), 'hh:mm')
+                return vm.defaultXAxisFormatter(vm.toMillisecondTime(parseInt(value)))
               }
             },
             boundaryGap: [0, '1%']
@@ -499,12 +501,36 @@ export default {
       }
       return alias
     },
+    defaultXAxisFormatter: function (value) {
+      value = bus.UTCTimeToConfigTimezone(value)
+      const tData = new Date(value)
+      const month = tData.getMonth() + 1 > 9 ? tData.getMonth() + 1 : '0' + (tData.getMonth() + 1)
+      const day = tData.getDate() > 9 ? tData.getDate() : '0' + tData.getDate()
+      const hour = tData.getHours() > 9 ? tData.getHours() : '0' + tData.getHours()
+      const minute = tData.getMinutes() > 9 ? tData.getMinutes() : '0' + tData.getMinutes()
+      const dateFormatStr = this.timeFormatMain.split(' ')[0]
+      const diffSec = (this.momentStrToTimestamp(this.timeRange[1]) - this.momentStrToTimestamp(this.timeRange[0]))
+      const secOneDay = 24 * 60 * 60 * 1000// 1天的毫秒数
+      let str = ''
+      if (dateFormatStr === 'DD/MM/YYYY') {
+        str += [day, month].join('/')
+      } else if (dateFormatStr === 'MM/DD/YYYY') {
+        str += [month, day].join('/')
+      } else {
+        str += [month, day].join('-')
+      }
+      if (diffSec <= secOneDay) { // 同一天
+        return [hour, minute].join(':')
+      } else { // 大于1天，小于30天
+        return str + '\n' + [hour, minute].join(':')
+      }
+    },
     tooltipFormatter (params, a, b) {
       const vm = this
       let str = `
            <div style="margin: 0px 0 0;line-height:1;">
             <div style="margin: 0px 0 0;line-height:1;">
-                <div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${vm.utcTimeToTimezoneStr(vm.$unixTimeParseToString(vm.toMillisecondTime(parseInt(params[0].axisValue)) / 1000, 'yyyy-MM-dd hh:mm:ss'), 'hh:mm')}</div>
+                <div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${vm.utcTimeToTimezoneStr(vm.toMillisecondTime(parseInt(params[0].axisValue)))}</div>
                 <div style="margin: 10px 0 0;line-height:1;">
                     <div style="margin: 0px 0 0;line-height:1;">`
       params.forEach(item => {