fix: 服务质量折线图接口更改、满屏滚动修复

2022-04-19 13:11:26 +08:00
parent d3632a5b30
commit 78108f0e05
16 changed files with 146 additions and 94 deletions
--- a/src/Login.vue
+++ b/src/Login.vue
@@ -43,9 +43,11 @@ import { post, get } from '@/utils/http'
 import { useRouter } from 'vue-router'
 import { storageKey } from '@/utils/constants'
 import { api } from '@/utils/api'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+dayjs.extend(utc)

 export default {
-
  name: 'Login',
  data () {
    return {
@@ -89,12 +91,13 @@ export default {
          }
        }
      ).catch(e => {
+        console.error(e)
        this.loading = false
        this.blockOperation.query = false
        this.$message.error(this.$t('tip.unknownError'))
      })
    },
-    appearance () {
+    queryAppearance () {
      get(api.appearance).then(res => {
        if (res.code === 200) {
          this.appearanceOut(res.data)
@@ -103,21 +106,22 @@ export default {
    },
    appearanceOut (data) {
      if (this.$_.isEmpty(localStorage.getItem(storageKey.language))) {
-        localStorage.setItem(storageKey.language, data.lang)
-      }
-      if (this.$_.isEmpty(localStorage.getItem(storageKey.sysTimezone))) {
-        localStorage.setItem(storageKey.sysTimezone, data.timezone)
+        localStorage.setItem(storageKey.language, data.lang || 'zh')
      }
      if (this.$_.isEmpty(localStorage.getItem(storageKey.theme))) {
-        localStorage.setItem(storageKey.theme, data.theme)
-      }
-      if (this.$_.isEmpty(localStorage.getItem(storageKey.dateFormat))) {
-        localStorage.setItem(storageKey.dateFormat, data.dateFormat)
+        localStorage.setItem(storageKey.theme, data.theme || 'light')
      }
+      localStorage.setItem(storageKey.sysTimezone, data.timezone)
+      window.$dayJs.tz.setDefault(data.timezone)
+      localStorage.setItem(storageKey.timezoneOffset, window.$dayJs.tz().utcOffset() / 60)
+      localStorage.setItem(storageKey.timezoneLocalOffset, dayjs().utcOffset() / 60)
+      localStorage.setItem(storageKey.dateFormat, data.dateFormat)
+      localStorage.setItem(storageKey.sysName, data.system_name)
+      localStorage.setItem(storageKey.sysLogo, data.system_logo)
    }
  },
  mounted () {
-    this.appearance()
+    this.queryAppearance()
  },
  setup (props) {
    const { currentRoute } = useRouter()
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -55,9 +55,9 @@
          cursor: pointer;
        }
        &.overview__row--single-value {
-          flex-wrap: nowrap;
+          flex-wrap: wrap;
          .cn-chart__single-value--detail-overview {
-            margin-right: 60px;
+            margin-right: 30px;
          }
        }
        .row__label {
--- a/src/components/common/MyDatePicker/index.js
+++ b/src/components/common/MyDatePicker/index.js
@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true })

 const vue = require('vue')
-const dayjs = require('dayjs')
 const timePicker = require('../MytTimePicker')
 const locale = require('element-plus/lib/locale')
 const ElInput = require('element-plus/lib/el-input')
--- a/src/components/table/report/builtinReportTable.vue
+++ b/src/components/table/report/builtinReportTable.vue
@@ -37,9 +37,12 @@
            {{scope.row.startTime}}-{{scope.row.endTime}}
          </template>
        </span>
-        <span v-if="item.prop === 'type'">
+        <span v-else-if="item.prop === 'type'">
            {{scope.row.reportTemp.name}}
        </span>
+        <span v-else-if="item.prop === 'state'">
+            {{getJobStatus(scope.row.state)}}
+        </span>
        <span v-else>{{scope.row[item.prop]}}</span>
      </template>

@@ -52,7 +55,7 @@
        <div class="table-operation-title">{{$t('overall.option')}}</div>
      </template>
      <template #default="scope">
-        <div class="table-operation-items">
+        <div class="table-operation-items" v-if="scope.row.state === 1">
          <div class="table-operation-item--down" @click="tableOperation(['download', scope.row, 1])">
            <loading :loading="loadingTableId === scope.row.id"></loading>
            <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
@@ -112,6 +115,12 @@ export default {
          prop: 'dataRange',
          show: true,
          minWidth: 110
+        }, {
+          label: this.$t('overall.status'),
+          prop: 'state',
+          show: true,
+          width: 120,
+          sortable: 'custom'
        }
      ],
      checkboxAll: false,
@@ -126,6 +135,13 @@ export default {
    }
  },
  methods: {
+    getJobStatus (state) {
+      if (state === 0) {
+        return this.$t('overall.inProgress')
+      } else if (state === 1) {
+        return this.$t('overall.completed')
+      }
+    },
    selectionChange (objs) {
      this.$emit('selectionChange', objs)
      this.checkboxIds = objs.map(item => { return item.id }).join(',')
--- a/src/components/table/settings/OperationLogTable.vue
+++ b/src/components/table/settings/OperationLogTable.vue
@@ -50,7 +50,7 @@
          </template>
        </span>
        <span v-else-if="item.prop === 'username'">{{formatUsername(scope.row)}}</span>
-        <span v-else-if="item.prop === 'ctime'">{{utcTimeToSysTime(scope.row[item.prop])}}</span>
+        <span v-else-if="item.prop === 'ctime'">{{dateFormatByAppearance(scope.row[item.prop])}}</span>
        <template v-else-if="item.prop === 'params' || item.prop === 'response'">
          <span>{{scope.row[item.prop]}}</span>
        </template>
--- a/src/components/table/settings/UserTable.vue
+++ b/src/components/table/settings/UserTable.vue
@@ -40,6 +40,14 @@
            <span>-</span>
          </template>
        </template>
+        <template v-else-if="item.prop === 'lastLoginTime'">
+          <template v-if="scope.row[item.prop]">
+            {{dateFormatByAppearance(scope.row[item.prop])}}
+          </template>
+          <template v-else>
+            <span>-</span>
+          </template>
+        </template>
        <template v-else-if="item.prop === 'status'">
          <el-switch
                  v-if="scope.row.id"
--- a/src/mixins/common.js
+++ b/src/mixins/common.js
@@ -1,5 +1,5 @@
 import { hasButton } from '@/permission'
-import { getMillisecond } from '@/utils/date-util'
+import { dateFormatByAppearance } from '@/utils/date-util'
 import { storageKey } from '@/utils/constants'
 export default {
  data () {
@@ -39,22 +39,8 @@ export default {
        query: false
      }
    },
-    // 时间相关
-    utcTimeToSysTime (str) { // utc 0 到系统设置的时区
-      let date = ''
-      if (isNaN(str)) {
-        date = window.$dayJs(str).valueOf() + localStorage.getItem(storageKey.timezoneLocalOffset) * 60 * 60 * 1000
-      } else {
-        date = str
-      }
-      date = window.$dayJs.tz(date).format('YYYY-MM-DD HH:mm:ss')
-      return date
-    },
-    utcTimeToLocalhost (str) { // 系统设置的时区 到 utc 0
-      return str
-    },
-    parseMsDate (time, format = 'YYYY-MM-DD HH:mm:ss') {
-      return this.dayJs.tz(parseFloat(time)).format(format)
+    dateFormatByAppearance (date) {
+      return dateFormatByAppearance(date)
    }
  }
 }
--- a/src/mixins/data-list.js
+++ b/src/mixins/data-list.js
@@ -1,11 +1,10 @@
 import { tableSort } from '@/utils/tools'
-import { defaultPageSize, fromRoute, position } from '@/utils/constants'
+import { defaultPageSize, fromRoute, position, storageKey } from '@/utils/constants'
 import { get, del } from '@/utils/http'
 import { ref } from 'vue'
 import pagination from '@/components/common/Pagination'
 import axios from 'axios'
 import { api } from '@/utils/api'
-import { storageKey } from '@/utils/constants'

 export default {
  components: {
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,14 +1,10 @@
 import { post } from '@/utils/http'
 import router from '@/router'
 import { sortByOrderNum, getWelcomeMenu } from '@/permission'
-import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc'
 import { ElMessage } from 'element-plus' // dependent on utc plugin
 import { storageKey } from '@/utils/constants'
 import { api } from '@/utils/api'

-dayjs.extend(utc)
-
 const user = {
  state () {
    return {
@@ -46,16 +42,7 @@ const user = {
  },
  actions: {
    loginSuccess (store, res) {
-      console.info(res)
-      window.$dayJs.tz.setDefault(res.data.timezone)
      localStorage.setItem(storageKey.token, res.data.token)
-      localStorage.setItem(storageKey.sysName, res.data.systemName)
-      if (res.systemLogo) {
-        localStorage.setItem(storageKey.sysLogo, res.data.systemLogo)
-      }
-      localStorage.setItem(storageKey.sysTimezone, res.data.timezone)
-      localStorage.setItem(storageKey.timezoneOffset, dayjs.tz().utcOffset() / 60)
-      localStorage.setItem(storageKey.timezoneLocalOffset, dayjs().utcOffset() / 60)
      post(api.permissions, { token: res.data.token }).then(res2 => {
        const menuList = sortByOrderNum(res2.data.menus)
        store.commit('setMenuList', menuList)
@@ -93,7 +80,6 @@ const user = {
      })
    },
    logoutSuccess (store, res) {
-      localStorage.removeItem(storageKey.username)
      localStorage.removeItem(storageKey.username)
      localStorage.removeItem(storageKey.token)
    }
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -116,7 +116,9 @@ export const api = {
      listBasic: '/interface/detection/performance/list/basic',
      listCount: '/interface/detection/performance/list/count',
      overviewBasic: '/interface/detection/performance/detail/overview/basic',
-      metric: '/interface/detection/performance/detail/overview/metric'
+      dnsErrorMetric: '/interface/detection/performance/detail/overview/metric',
+      httpErrorMetric: '/interface/detection/performance/detail/overview/metric',
+      highDnsResponseTimeMetric: '/interface/detection/performance/detail/overview/metric'
    }
  },
  // Dashboard
--- a/src/utils/date-util.js
+++ b/src/utils/date-util.js
@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import { storageKey } from '@/utils/constants'
 // 获取初始化时间，默认最近一周
 Date.prototype.setStart = function () {
  this.setHours(0)
@@ -44,3 +45,19 @@ export function getNowTime (interval) {
 export function rTime (date) {
  return window.$dayJs.tz(new Date(date)).format('MM-DD HH:mm')
 }
+// 时间格式转换
+export function dateFormat (date, format = 'YYYY-MM-DD HH:mm:ss') {
+  let d = date
+  // date不是数字，则视为时间字符串，例如2022-02-22 22:22
+  if (isNaN(date)) {
+    d = window.$dayJs(date).valueOf() + parseInt(localStorage.getItem('cn-timezone-local-offset'))
+  } else {
+    d = getMillisecond(date)
+  }
+  d = window.$dayJs(d).tz().format(format)
+  return d
+}
+// 时间格式转换，使用appearance的时间格式
+export function dateFormatByAppearance (date) {
+  return dateFormat(date, localStorage.getItem(storageKey.dateFormat))
+}
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -185,7 +185,7 @@ export default {
      this.$refs.panelChartList.groupParentCalcHeight(params.chart, params.childrenList)
    },
    wholeScreenScroll (e) {
-      if (this.scroll.prevent) {
+      if (this.scroll.prevent || !this.panel.params || !this.panel.params.wholeScreenScroll) {
        return
      }
      this.scroll.prevent = true
--- a/src/views/charts/charts/ChartDomainWhois.vue
+++ b/src/views/charts/charts/ChartDomainWhois.vue
@@ -20,11 +20,11 @@
        </div>
        <div class="domain-detail-list__row">
          <div class="domain-detail-list__label">{{$t('entities.creationDate')}}</div>
-          <div class="domain-detail-list__content">{{ parseMsDate($_.get(chartData, "createTime")) || '-'}}</div>
+          <div class="domain-detail-list__content">{{ dateFormatByAppearance($_.get(chartData, "createTime")) || '-'}}</div>
        </div>
        <div class="domain-detail-list__row">
          <div class="domain-detail-list__label">{{$t('entities.expirationDate')}}</div>
-          <div class="domain-detail-list__content">{{ parseMsDate($_.get(chartData, "expirationTime")) || '-'}}</div>
+          <div class="domain-detail-list__content">{{ dateFormatByAppearance($_.get(chartData, "expirationTime")) || '-'}}</div>
        </div>
      </div>
    </div>
--- a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
@@ -189,19 +189,30 @@ export default {
          const nowTime = getSecond(new Date())
          this.searchStartTime = this.detection.startTime - allTime / 2
          this.searchEndTime = _.min([nowTime, (this.detection.endTime + allTime / 2)])
-
-          get(api.detection.performanceEvent.metric, {
-            appName: this.detection.appName,
-            startTime: this.searchStartTime,
-            endTime: this.searchEndTime,
-            eventType: this.detection.eventType
-          }).then((response) => {
-            if (response.code === 200) {
-              resolve(response.data.result[0])
-            } else {
-              reject(response)
-            }
-          })
+          let url
+          if (this.detection.eventType === 'dns error') {
+            url = api.detection.performanceEvent.dnsErrorMetric
+          } else if (this.detection.eventType === 'http error') {
+            url = api.detection.performanceEvent.httpErrorMetric
+          } else if (this.detection.eventType === 'high dns response time') {
+            url = api.detection.performanceEvent.highDnsResponseTimeMetric
+          }
+          if (url) {
+            get(url, {
+              appName: this.detection.appName,
+              startTime: this.searchStartTime,
+              endTime: this.searchEndTime,
+              eventType: this.detection.eventType
+            }).then((response) => {
+              if (response.code === 200) {
+                resolve(response.data.result[0])
+              } else {
+                reject(response)
+              }
+            })
+          } else {
+            resolve()
+          }
        } catch (e) {
          reject(e)
        }
--- a/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
@@ -99,6 +99,7 @@ import * as echarts from 'echarts'
 import { markRaw } from 'vue'
 import { metricOption } from '@/views/detections/options/detectionOptions'
 import { sortBy, reverseSortBy } from '@/utils/tools'
+import _ from 'lodash'
 export default {
  name: 'DetectionPerformanceEventDomainOverview',
  props: {
@@ -178,7 +179,7 @@ export default {
          chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
        }
      }).catch(error => {
-        console.log(error)
+        console.error(error)
        const chartDom = document.getElementById(`detectionMetricChartDomain${this.detection.domain}`)
        chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
      }).finally(() => {
@@ -221,19 +222,30 @@ export default {
          const nowTime = getSecond(new Date())
          this.searchStartTime = this.detection.startTime - allTime / 2
          this.searchEndTime = _.min([nowTime, (this.detection.endTime + allTime / 2)])
-
-          get(api.detection.performanceEvent.metric, {
-            domain: this.detection.domain,
-            startTime: this.searchStartTime,
-            endTime: this.searchEndTime,
-            eventType: this.detection.eventType
-          }).then((response) => {
-            if (response.code === 200) {
-              resolve(response.data.result[0])
-            } else {
-              reject(response)
-            }
-          })
+          let url
+          if (this.detection.eventType === 'dns error') {
+            url = api.detection.performanceEvent.dnsErrorMetric
+          } else if (this.detection.eventType === 'http error') {
+            url = api.detection.performanceEvent.httpErrorMetric
+          } else if (this.detection.eventType === 'high dns response time') {
+            url = api.detection.performanceEvent.highDnsResponseTimeMetric
+          }
+          if (url) {
+            get(url, {
+              domain: this.detection.domain,
+              startTime: this.searchStartTime,
+              endTime: this.searchEndTime,
+              eventType: this.detection.eventType
+            }).then((response) => {
+              if (response.code === 200) {
+                resolve(response.data.result[0])
+              } else {
+                reject(response)
+              }
+            })
+          } else {
+            resolve()
+          }
        } catch (e) {
          reject(e)
        }
--- a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
@@ -142,7 +142,7 @@ export default {
          chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
        }
      }).catch(error => {
-        console.log(error)
+        console.error(error)
        const chartDom = document.getElementById(`detectionMetricChartIp${this.detection.serverIp}`)
        chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
      }).finally(() => {
@@ -186,18 +186,30 @@ export default {
          const nowTime = getSecond(new Date())
          this.searchStartTime = this.detection.startTime - allTime / 2
          this.searchEndTime = _.min([nowTime, (this.detection.endTime + allTime / 2)])
-          get(api.detection.performanceEvent.metric, {
-            serverIp: this.detection.serverIp,
-            startTime: this.searchStartTime,
-            endTime: this.searchEndTime,
-            eventType: this.detection.eventType
-          }).then((response) => {
-            if (response.code === 200) {
-              resolve(response.data.result[0])
-            } else {
-              reject(response)
-            }
-          })
+          let url
+          if (this.detection.eventType === 'dns error') {
+            url = api.detection.performanceEvent.dnsErrorMetric
+          } else if (this.detection.eventType === 'http error') {
+            url = api.detection.performanceEvent.httpErrorMetric
+          } else if (this.detection.eventType === 'high dns response time') {
+            url = api.detection.performanceEvent.highDnsResponseTimeMetric
+          }
+          if (url) {
+            get(url, {
+              serverIp: this.detection.serverIp,
+              startTime: this.searchStartTime,
+              endTime: this.searchEndTime,
+              eventType: this.detection.eventType
+            }).then((response) => {
+              if (response.code === 200) {
+                resolve(response.data.result[0])
+              } else {
+                reject(response)
+              }
+            })
+          } else {
+            resolve()
+          }
        } catch (e) {
          reject(e)
        }