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

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

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,

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

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">
+                        <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]">
@@ -83,10 +88,15 @@
                   <template v-else-if="item.prop === 'score'" >
                     {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '0'}}
                   </template>
+                  <template v-else>
+                    <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>
             </template>
             <template v-slot:empty>
@@ -250,7 +260,8 @@ export default {
       tableSortColumn: '',
       tableSortType: '',
       tableSortTab: '',
-      urlChangeParams: {}
+      urlChangeParams: {},
+      showUnit: false
     }
   },
   props: {
@@ -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
         }