CN-743 下钻配置增加unit相关内容

2022-10-12 11:11:22 +08:00
parent e005eb7cb4
commit c025109b49
5 changed files with 49 additions and 25 deletions
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -73,7 +73,8 @@
            </div>
          </template>
          <template v-else-if="index===2">
-            <span class="route-menu" @click="jump(route,item,'',3)">{{$t(item)}}</span>
+            <span v-if="route===wholeScreenRouterMapping.dns" >{{$t(item)}}</span>
+            <span v-else class="route-menu" @click="jump(route,item,'',3)">{{$t(item)}}</span>
          </template>
          <template v-else-if="index===1">
            <span class="route-menu" @click="jump(route,'','',2)" v-if="route.indexOf('detection') === -1">{{item}}</span>
@@ -188,7 +189,8 @@ import {
  networkOverviewTabList,
  networkTable,
  operationType,
-  storageKey
+  storageKey,
+  wholeScreenRouterMapping
 } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
@@ -242,7 +244,8 @@ export default {
      ],
      curPageNum: 1,
      curTabState: curTabState,
-      urlChangeParams: {}
+      urlChangeParams: {},
+      wholeScreenRouterMapping
    }
  },
  computed: {
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -57,8 +57,8 @@ const user = {
            tempArr = tempArr[1].split('&')
            tempArr.forEach(t => {
              let firstEqualIndex = t.indexOf('=')
-              let key = t.substring(0,firstEqualIndex)
-              let value = t.substring(firstEqualIndex+1)
+              let key = t.substring(0, firstEqualIndex)
+              let value = t.substring(firstEqualIndex + 1)
              query[key] = value
            })
          }
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -97,7 +97,8 @@ export const unitTypes = {
  byte: 'byte',
  bps: 'bps',
  string: 'string',
-  percent: 'percent'
+  percent: 'percent',
+  qps: 'qps'
 }
 export const chartTableDefaultPageSize = 10 // table类型图表默认每页数据量
 export const chartTableTopOptions = [10, 100] // table类型图表的TOP-N选项
@@ -958,7 +959,7 @@ export const dnsServiceInsightsTabList = [
  },
  {
    label: 'QNames',
-    prop: 'dnsServerRole',
+    prop: 'qname',
    queryCycleTotalProp: 'qnames',
    dillDownProp: ['dns_qname'],
    checked: true,
@@ -1123,7 +1124,7 @@ export const networkTable = {
    bytesCycleColumnNameGroup: bytesCycleColumnNameGroupForDns,
    defaultOrderBy: 'totalBytes'
  },
-  linkMonitor:{
+  linkMonitor: {
    tabList: linkMonitorTabList,
    column: customTableTitlesForLinkMonitor,
    url: linkMonitorUrl,
--- a/src/utils/unit-convert.js
+++ b/src/utils/unit-convert.js
@@ -4,6 +4,7 @@ import _ from 'lodash'
 const numberUnit = ['', 'K', 'M', 'G', 'T', 'P', 'E']
 const byteUnit = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB']
 const bpsUnit = ['bps', 'Kbps', 'Mbps', 'Gbps', 'Tbps', 'Pbps', 'Ebps']
+const qpsUnit = ['qps', 'Kqps', 'Mqps', 'Gqps', 'Tqps', 'Pqps', 'Eqps']
 const timeUnit = [ // 时间单位步进倍数，以ms为基数
  { unit: 'ms', step: 1 },
  { unit: 's', step: 1000 },
@@ -35,6 +36,9 @@ export function numberUnitConvert (value, sourceUnit, targetUnit, dot = 2) {
 export function bpsUnitConvert (value, sourceUnit, targetUnit, dot = 2) {
  return asciiCompute(value, 1000, bpsUnit, dot)
 }
+export function qpsUnitConvert (value, sourceUnit, targetUnit, dot = 2) {
+  return asciiCompute(value, 1000, qpsUnit, dot)
+}
 export function byteUnitConvert (value, unitType, sourceUnit = 'B', targetUnit, dot = 2) {
  return asciiCompute(value, 1024, byteUnit, dot)
 }
@@ -109,6 +113,9 @@ export default function unitConvert (value, unitType, sourceUnit, targetUnit, do
      case unitTypes.byte: {
        return byteUnitConvert(value, unitType, sourceUnit, targetUnit, dot)
      }
+      case unitTypes.qps: {
+        return qpsUnitConvert(value, sourceUnit, targetUnit, dot)
+      }
    }
  }
 }
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
@@ -47,7 +47,12 @@
                  <template v-if="item.columnType === tableColumnType.chainRatio"  >
                    <div class="data-total" >
                      <div class="data-value">
-                        {{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? unitConvert(scope.row[item.prop][0], unitTypes.number).join(' ') : '-'):'' }}
+                        <template v-if="showUnit && item.unit">
+                          {{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? unitConvert(scope.row[item.prop][0], item.unit).join(' ') : '-'):'' }}
+                        </template>
+                        <template v-else>
+                          {{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? unitConvert(scope.row[item.prop][0], unitTypes.number).join(' ') : '-'):'' }}
+                        </template>
                      </div>
                      <div class="data-trend">
                        <template v-if="scope.row[item.prop]">
@@ -73,18 +78,23 @@
                  </template>
                  <template v-else-if="item.columnType === tableColumnType.percent" >
                    <div class="dns-in-ex">
-                      <div class="dns-percent-pic" >
+                      <div class="dns-percent-pic">
                        <div v-if="scope.row[item.prop][0] !== false" class="div-green" id="green" :style="`width:${scope.row[item.prop][0]}`"></div>
                        <div v-if="scope.row[item.prop][0] !== false" class="div-yellow" id="yellow" :style="`width:${scope.row[item.prop][1]}`"></div>
                      </div>
-                      <div class="dns-percent" >{{scope.row[item.prop][2]}}</div>
+                      <div class="dns-percent">{{scope.row[item.prop][2]}}</div>
                    </div>
                  </template>
                  <template v-else-if="item.prop === 'score'" >
                    {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '0'}}
                  </template>
                  <template v-else>
-                    {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '-'}}
+                    <template v-if="showUnit && item.unit">
+                      {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], item.unit).join(' ') : '-'}}
+                    </template>
+                    <template v-else>
+                      {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '-'}}
+                    </template>
                  </template>
                </template>
              </el-table-column>
@@ -250,7 +260,8 @@ export default {
      tableSortColumn: '',
      tableSortType: '',
      tableSortTab: '',
-      urlChangeParams: {}
+      urlChangeParams: {},
+      showUnit: false
    }
  },
  props: {
@@ -350,18 +361,18 @@ export default {
      }
    },
    isThirdMenu () { // 当前是否为3级
-      if(this.isOnlyRead){
+      if (this.isOnlyRead) {
        return false
-      }else {
+      } else {
        const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
        const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
        return thirdMenu && !fourthMenu
      }
    },
    isFourthMenu () { // 当前是否为4级
-      if(this.isOnlyRead){
+      if (this.isOnlyRead) {
        return false
-      }else {
+      } else {
        const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
        const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
        return thirdMenu && fourthMenu
@@ -408,11 +419,11 @@ export default {

      // 针对network overview – app list 点击标题触发下钻，相关内容处理
      const thirdMenu = this.getUrlParam(this.curTabState.thirdMenu, '')
-      //const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
+      // const fourthMenu = this.getUrlParam(this.curTabState.fourthMenu, '')
      if (this.isFourthMenu()) {
        this.list.forEach(item => {
          if (item.label === thirdMenu) {
-            //item.checked = false
+            // item.checked = false
          }
        })
      } else if (this.isThirdMenu()) {
@@ -463,7 +474,7 @@ export default {
        this.showCustomizeTabs = false
      } else if (curOperationType === operationType.changeTab) { // 切换tab
        this.showCustomizeTabs = true
-      } else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu ) { // 点击的为第二级菜单、或者点击菜单进入、
+      } else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击的为第二级菜单、或者点击菜单进入、
        if (curTab) {
          this.showTab(curTab)
          this.urlChangeParams[this.curTabState.curTab] = curTab.prop
@@ -519,7 +530,7 @@ export default {
            this.showCustomizeTabs = true
          })
        }
-      }else {
+      } else {
        this.showCustomizeTabs = true
      }
      this.changeUrlTabState()
@@ -961,7 +972,7 @@ export default {
          item.disabled = false
          if (columnValue) {
            if (item.label === columnName) {
-              //item.disabled = true
+              // item.disabled = true
            }
          }
        })
@@ -1022,7 +1033,7 @@ export default {
          item.disabled = false
          if (columnValue) {
            if (item.label === columnName) {
-              //item.disabled = true
+              // item.disabled = true
            }
          }
        })
@@ -1085,7 +1096,7 @@ export default {
      this.urlChangeParams[this.curTabState.networkOverviewBeforeTab] = tab.prop
    },
    setQueryCondition (tab, value) {
-      value = value.replaceAll("'","\\\\'")
+      value = value.replaceAll("'", "\\\\'")
      const queryCondition = []
      const searchProps = tab.dillDownProp
      if (tab.prop === 'protocolPort') {
@@ -1189,7 +1200,7 @@ export default {
      })
    },
    handleSearchParams (columnValue) {
-      columnValue = columnValue.replaceAll("'","\\\\'")
+      columnValue = columnValue.replaceAll("'", "\\\\'")
      const queryCondition = []
      const curTab = this.getCurTab()
      const searchProps = curTab.dillDownProp
@@ -1519,6 +1530,7 @@ export default {
            column.name = commonColumn ? commonColumn.name : ''
            column.label = commonColumn ? commonColumn.i18n : ''
            column.prop = commonColumn ? commonColumn.prop : ''
+            column.unit = commonColumn ? commonColumn.unit : null
            column.checked = !((hiddenColumnList.indexOf(columnName) >= 0))
            column.disabled = (disabledColumnList.indexOf(columnName) >= 0)
            column.columnType = commonColumn ? commonColumn.columnType : ''
@@ -1701,6 +1713,7 @@ export default {
        this.columnNameGroup = this.curTable.bytesColumnNameGroup
        this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
        this.isOnlyRead = this.curTable.isOnlyRead ? this.curTable.isOnlyRead : false
+        this.showUnit = this.curTable.showUnit ? this.curTable.showUnit : false
        if (this.curTableInCode.defaultOrderBy) {
          this.orderBy = this.curTableInCode.defaultOrderBy
        }