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

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)
+        localStorage.setItem(storageKey.language, data.lang || 'zh')
-      }
-      if (this.$_.isEmpty(localStorage.getItem(storageKey.sysTimezone))) {
-        localStorage.setItem(storageKey.sysTimezone, data.timezone)
       }
       if (this.$_.isEmpty(localStorage.getItem(storageKey.theme))) {
-        localStorage.setItem(storageKey.theme, data.theme)
+        localStorage.setItem(storageKey.theme, data.theme || 'light')
-      }
-      if (this.$_.isEmpty(localStorage.getItem(storageKey.dateFormat))) {
-        localStorage.setItem(storageKey.dateFormat, data.dateFormat)
       }
+      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()

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 {

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')

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(',')

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>

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"

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
       }
     },
-    // 时间相关
+    dateFormatByAppearance (date) {
-    utcTimeToSysTime (str) { // utc 0 到系统设置的时区
+      return dateFormatByAppearance(date)
-      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)
     }
   }
 }

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: {

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

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

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))
+}

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

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>

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)])
-
+          let url
-          get(api.detection.performanceEvent.metric, {
+          if (this.detection.eventType === 'dns error') {
-            appName: this.detection.appName,
+            url = api.detection.performanceEvent.dnsErrorMetric
-            startTime: this.searchStartTime,
+          } else if (this.detection.eventType === 'http error') {
-            endTime: this.searchEndTime,
+            url = api.detection.performanceEvent.httpErrorMetric
-            eventType: this.detection.eventType
+          } else if (this.detection.eventType === 'high dns response time') {
-          }).then((response) => {
+            url = api.detection.performanceEvent.highDnsResponseTimeMetric
-            if (response.code === 200) {
+          }
-              resolve(response.data.result[0])
+          if (url) {
-            } else {
+            get(url, {
-              reject(response)
+              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)
         }

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)])
-
+          let url
-          get(api.detection.performanceEvent.metric, {
+          if (this.detection.eventType === 'dns error') {
-            domain: this.detection.domain,
+            url = api.detection.performanceEvent.dnsErrorMetric
-            startTime: this.searchStartTime,
+          } else if (this.detection.eventType === 'http error') {
-            endTime: this.searchEndTime,
+            url = api.detection.performanceEvent.httpErrorMetric
-            eventType: this.detection.eventType
+          } else if (this.detection.eventType === 'high dns response time') {
-          }).then((response) => {
+            url = api.detection.performanceEvent.highDnsResponseTimeMetric
-            if (response.code === 200) {
+          }
-              resolve(response.data.result[0])
+          if (url) {
-            } else {
+            get(url, {
-              reject(response)
+              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)
         }

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, {
+          let url
-            serverIp: this.detection.serverIp,
+          if (this.detection.eventType === 'dns error') {
-            startTime: this.searchStartTime,
+            url = api.detection.performanceEvent.dnsErrorMetric
-            endTime: this.searchEndTime,
+          } else if (this.detection.eventType === 'http error') {
-            eventType: this.detection.eventType
+            url = api.detection.performanceEvent.httpErrorMetric
-          }).then((response) => {
+          } else if (this.detection.eventType === 'high dns response time') {
-            if (response.code === 200) {
+            url = api.detection.performanceEvent.highDnsResponseTimeMetric
-              resolve(response.data.result[0])
+          }
-            } else {
+          if (url) {
-              reject(response)
+            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)
         }