NEZ-1787 feat：时间选择器组件优化

2022-04-24 18:02:26 +08:00
parent fe6b1ba5cf
commit 9914919747
8 changed files with 125 additions and 74 deletions
--- a/nezha-fronted/config/index.js
+++ b/nezha-fronted/config/index.js
@@ -19,10 +19,10 @@ module.exports = {
      }
    },
    // Various Dev Server settings
-    // host: '0.0.0.0', // can be overwritten by process.env.HOST
-    host: '127.0.0.1', // can be overwritten by process.env.HOST
+    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    // host: '127.0.0.1', // can be overwritten by process.env.HOST
    port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-    autoOpenBrowser: true,
+    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
--- a/nezha-fronted/src/assets/css/components/common/timePicker.scss
+++ b/nezha-fronted/src/assets/css/components/common/timePicker.scss
@@ -166,7 +166,7 @@
 .date-range-panel {
  // height: 460px;
  width: 500px;
-  background: #FFFFFF;
+  background: $--background-color-empty;
  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: 4%;
@@ -179,26 +179,58 @@
    flex-direction: column;
    .content-title {
      font-size: 14px;
-      color: #666666;
+      color: $--color-text-regular;
      font-weight: 400;
    }

    .content-input {
      width: 230px;
+      display: flex;
+      position: relative;
+      align-items: center;
+      margin-bottom: 12px;
      .el-input{
        width: auto;
+        flex: 1;
        .el-input__inner{
-          border: 1px solid #E7EAED;
-          border-radius: 2px;
+          border: 1px solid $--border-color-light;
+          border-radius: 2px 0px 0px 2px;
          width: 230px;
          padding: 0 8px;
-          height: 30px;
-          line-height: 30px;
-          margin-bottom: 12px;
+          //height: 30px;
+          //line-height: 30px;
          outline: #169AFF;
        }

      }
+      .input-hint{
+        display: none;
+      }
+      .nz-icon-box{
+        height: 28px;
+        box-sizing: border-box;
+        background: $--background-color-disabled;
+        line-height: 28px;
+        padding: 0 4px;
+        border-radius: 0 2px 2px 0;
+
+      }
+      &.input-error{
+        .el-input{
+          .el-input__inner{
+            border: 1px solid $--color-danger;
+            outline: $--color-danger;
+          }
+        }
+        .input-hint{
+          display: block;
+          color: $--color-danger;
+          position: absolute;
+          left: 0;
+          font-size: 14px;
+          bottom: -25px;
+        }
+      }
    }

    .date-range-history {
@@ -236,22 +268,22 @@
        display: flex;
        flex-direction: column;
        justify-content: center;
-        color: #333333;
+        color: $--color-text-primary;
        font-weight: 400;
        padding: 0 10px;
        cursor: pointer;
      }

      li:hover {
-        background: #F5F5F5;
-        color: #333333;
+        background: $--alert-rule-background-color;
+        color: $--color-text-primary;
      }
      li.activeLi :hover {
-        background: #F5F5F5;
+        background: $--alert-rule-background-color;
        color: $--color-primary !important;
      }
      li.activeLi {
-        background: #F5F5F5;
+        background: $--alert-rule-background-color;
        color: $--color-primary !important;
        font-weight: 400;

--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -32,7 +32,7 @@ $--left-menu-background-color-hover: $--left-menu-background-color-active;

 /* 3.字色 */
 // 标题字色(覆盖element-ui内置变量)
-$--color-text-primary: #333332;
+$--color-text-primary: #333333;
 // 普通字色(覆盖element-ui内置变量)
 $--color-text-regular: #666665;
 // 次要字色(覆盖element-ui内置变量)
@@ -221,7 +221,7 @@ $--switch-background-color: #dcdfe6;
 $--project-input-background-color: $--color-text-disabled;

 /* alert rule */
-$--alert-rule-background-color: #f4f4f5;
+$--alert-rule-background-color: #f5f5f5;
 $--alert-rule-color: $--overview-icon-color;

 /* webSSH */
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -117,7 +117,7 @@ export default {
      // 处理legend别名
      alias = alias + this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend)
      if (!alias) {
-        alias = chartInfo.elements[expressionIndex].expression
+        alias = chartInfo.elements[expressionIndex].expression || ''
      }
      if (alias == 'Previous ') {
        alias += chartInfo.elements[expressionIndex].expression
@@ -148,9 +148,9 @@ export default {
      if (/\{\{.+\}\}/.test(aliasExpression)) {
        const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
-          // if (!legend) {
-          //   return label
-          // }
+          if (!legend) {
+            return label
+          }
          const reg = new RegExp(label + '=".+?"')
          let value = null
          if (reg.test(legend)) {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -494,7 +494,6 @@ export default {
      if (this.$refs.pickTime) {
        const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
        this.nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
-        console.log(nowTimeType, this.nowTimeType)
        this.setSearchTime(nowTimeType.type, nowTimeType.value)
        this.filter.start_time = bus.timeFormate(this.searchTime[0])
        this.filter.end_time = bus.timeFormate(this.searchTime[1])
@@ -520,7 +519,6 @@ export default {
        this.$set(this.searchTime, 0, startTime)
        this.$set(this.searchTime, 1, endTime)
        this.$set(this.searchTime, 2, val + 'h')
-        console.log(this.searchTime)
      } 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())))
--- a/nezha-fronted/src/components/common/js/validate.js
+++ b/nezha-fronted/src/components/common/js/validate.js
@@ -221,3 +221,10 @@ export function sysObjectIdInput (rule, value, callback) {
 export function longAndLat (rule, value, callback) { // 校验经纬度

 }
+export function dataValidate () {
+  // const time = '([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$'
+  // const YMD = '/((([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29))'
+  // const DMY = '/((^(3[01]|[12][0-9]|0[1-9])(\\/)(10|12|0[13578])(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(30|[12][0-9]|0[1-9])(\\/)(11|0[469])(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(2[0-8]|1[0-9]|0[1-9])(\\/)(02)(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(29)(\\/)(02)(\\/)([2468][048]00)$)|(^(29)(\\/)(02)(\\/)([3579][26]00)$)|(^(29)(\\/)(02)(\\/)([1][89][0][48])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][0][48])$)|(^(29)(\\/)(02)(\\/)([1][89][2468][048])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][2468][048])$)|(^(29)(\\/)(02)(\\/)([1][89][13579][26])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][13579][26])$))/'
+  // const MDY =
+}
+
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -46,22 +46,31 @@
              size="mini"
              ref="calendar"
              :format="timeFormatStrToDatePickFormat(timeFormatMain)"
-              @change="dateChange(whoChoose)"
-              v-model="searchTimeValue"
-              type="date"
+              :value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
+              @change="dateChange"
+              :default-time="['00:00:00', '23:59:59']"
+              v-model="oldSearchTime"
+              type="daterange"
              popper-class="panel-time-picker-popper time-picker-popover__select-top"
              align="right"
            >
            </my-date-picker>
-
+<!--            @change="dateChange(whoChoose)"-->
            <div class="content-title">{{$t('dashboard.panel.chartForm.valMapping.from')}}</div>
-            <div @click="myDatePickerShow('start')" tabindex="1" class="content-input">
-              <el-input  v-model="searchTime[0]" @change="dateChange('start',searchTime[0])"> </el-input>
+            <div  tabindex="1" class="content-input" :class="oldSearchTimeError[0] ? 'input-error' : ''">
+              <el-input   @focus="searchTimeValue = oldSearchTime[0]"  v-model="oldSearchTime[0]" @change="dateInputChange('start',oldSearchTime[0])" size="mini"> </el-input>
+              <div @click="myDatePickerShow()" class="nz-icon-box">
+                <i class="nz-icon nz-icon-table1"/>
+              </div>
+              <div class="input-hint">{{inputError}}</div>
            </div>
            <div class="content-title">{{$t('dashboard.panel.chartForm.valMapping.to')}}</div>
-            <div @click="myDatePickerShow('end')" tabindex="2" class="content-input">
-              <el-input  v-model="searchTime[1]" @change="dateChange('end',searchTime[1])"> </el-input>
-
+            <div tabindex="2" class="content-input" :class="oldSearchTimeError[1] ? 'input-error' : ''">
+              <el-input  @focus="searchTimeValue = oldSearchTime[1]" v-model="oldSearchTime[1]" @change="dateInputChange('end',oldSearchTime[1])" size="mini"> </el-input>
+              <div  @click="myDatePickerShow()" class="nz-icon-box">
+                <i class="nz-icon nz-icon-table1"/>
+              </div>
+              <div class="input-hint">{{$t('date.formatError')}}</div>
            </div>
            <div>
              <el-button
@@ -132,6 +141,7 @@

 <script>
 import bus from '@/libs/bus'
+import moment from 'moment-timezone'

 export default {
  name: 'timePicker',
@@ -159,6 +169,13 @@ export default {
        bus.timeFormate(bus.getOffsetTimezoneData(-1)),
        bus.timeFormate(bus.getOffsetTimezoneData())
      ],
+      oldSearchTime: [bus.timeFormate(bus.getOffsetTimezoneData(-1)),
+        bus.timeFormate(bus.getOffsetTimezoneData())],
+      oldSearchTimeError: {
+        0: false,
+        1: false
+      },
+      inputError: this.$t('date.formatError'),
      showTime: {
        id: 4,
        text: this.$t('dashboard.panel.lastOneHour')
@@ -253,6 +270,9 @@ export default {
    this.getItem()
    this.getUtcStr()
    this.getRangeHistoryArr()
+    const timeTemp = this.$loadsh.cloneDeep(this.searchTime)
+    this.oldSearchTime[0] = timeTemp[0]
+    this.oldSearchTime[1] = timeTemp[1]
  },
  methods: {
    changeDropdownFlag () {
@@ -268,8 +288,8 @@ export default {
      this.utc = localStorage.getItem('timezoneOffset')
    },
    myDatePickerShow (item) {
-      this.whoChoose = item
-      this.isCustom = true
+      // this.whoChoose = item
+      // this.isCustom = true
      this.$refs.calendar.focus()
      this.$refs.calendar.pickerVisible = true
      if (document.getElementById('viewGraphDialog')) {
@@ -308,9 +328,13 @@ export default {
      this.utcStr = str + this.utc
    },
    timeRange (item) {
+      if (this.oldSearchTimeError[0] || this.oldSearchTimeError[1]) {
+        return
+      }
+      this.searchTime = this.$loadsh.cloneDeep(this.oldSearchTime)
      this.showTime = this.nowTimeType = {
        id: 0,
-        text: this.$t('dashboard.panel.customTimeRange'),
+        text: this.searchTime[0] + ' ' + this.$t('dashboard.panel.to') + ' ' + this.searchTime[1],
        value: -1
      }
      this.isCustom = true
@@ -329,49 +353,42 @@ export default {
      this.$emit('change', this.searchTime)
    },
    showDropdown () {
+      const timeTemp = this.$loadsh.cloneDeep(this.searchTime)
+      this.oldSearchTime[0] = timeTemp[0]
+      this.oldSearchTime[1] = timeTemp[1]
+      this.oldSearchTimeError[0] = false
+      this.oldSearchTimeError[1] = false
      this.dropdownFlag = !this.dropdownFlag
    },
-    dateChange (type, v) {
+    dateInputChange (type, v) {
      if (type == 'start') {
-        if (!v) {
-          const startTime = bus.timeFormate(this.searchTimeValue).trim().split(' ')[0] + ' '
-          this.$set(this.searchTime, 0, startTime)
+        const dateValidate = moment(this.oldSearchTime[0], this.timeFormatMain).isValid()
+        if (!dateValidate) {
+          this.inputError = this.$t('date.formatError')
+          this.oldSearchTimeError[0] = true
        } else {
-          const str = v.trim().split(' ')[1]
-          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.oldSearchTimeError[0] = false
+          this.oldSearchTime[0] = bus.timeFormate(this.oldSearchTime[0])
        }
      } else if (type == 'end') {
-        if (!v) {
-          const endTime = bus.timeFormate(this.searchTimeValue).trim().split(' ')[0] + ' '
-          this.$set(this.searchTime, 1, endTime)
+        const dateValidate = moment(this.oldSearchTime[1], this.timeFormatMain).isValid()
+        if (!dateValidate) {
+          this.oldSearchTimeError[1] = true
        } else {
-          const str = v.trim().split(' ')[1]
-          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.oldSearchTimeError[1] = false
+          // this.$set(this.oldSearchTime, 1, bus.timeFormate(this.oldSearchTime[1]))
+          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.oldSearchTimeError[0]).isBefore(this.oldSearchTime[1]))
+      if (moment(this.oldSearchTime[0], this.timeFormatMain).isValid() && moment(this.oldSearchTime[1], this.timeFormatMain).isValid() && !moment(this.oldSearchTimeError[0]).isBefore(this.oldSearchTime[1])) {
+        this.oldSearchTimeError[0] = true
+        this.inputError = this.$t('date.fromGreaterTo')
      }
-      this.searchTime[2] = ''
-      this.$set(this.showTime, 'id', 0)
-      this.$set(
-        this.showTime,
-        'text',
-        this.searchTime[0] +
-          ' ' +
-          this.$t('dashboard.panel.to') +
-          ' ' +
-          this.searchTime[1]
-      )
+    },
+    dateChange () {
+      this.oldSearchTimeError[0] = false
+      this.oldSearchTimeError[1] = false
    },
    setCustomTime (timeGroup, timeRange) {
      if (timeGroup) {
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -552,7 +552,6 @@ export default {
        obj.queryHistory = []
        obj.promQL = function (context) {
          return Promise.resolve(this.complete.promQL(context)).then((res) => {
-            console.log(res)
            const { state, pos } = context
            const tree = syntaxTree(state).resolve(pos, -1)
            const start = res != null ? res.from : tree.from
@@ -687,7 +686,6 @@ export default {
    },
    fetchFn (a, b) {
      const params = {}
-      console.log(b)
      if (b) {
        params['match[]'] = b.body.get('match[]')
        params.start = b.body.get('start')
@@ -1063,7 +1061,6 @@ export default {
      // elInput.selectionEnd = startPos + insertTxt.length
      this.expressionList[this.index] = insertTxt
      this.codeMirrorValue[this.index] = insertTxt
-      console.log('inserttext', this.codeMirrorValue[this.index])
      this.initCodeMirror()
    }
    /* setMsg:function(){