CN-668 Dashboard - npm - 下钻功能交互开发(未改问题：特殊IP报错，protocol和port的tab参数传递有问题，监视timeFilter)

src/assets/css/components/views/charts2/panel.scss

@@ -12,6 +12,39 @@
       line-height: 24px;
       font-weight: 900;
       color: #353636;
+      display:flex;
+      .score {
+        .circle-icon {
+          border-radius: 3px;
+          width: 6px;
+          height: 6px;
+          margin-left: 10px;
+          margin-right: 4px;
+        }
+        .data-score-red {
+          background: #E26154;
+        }
+        .data-score-yellow {
+          background: #E5A219;
+        }
+        .data-score-green {
+          background: #749F4D;
+        }
+        height:24px;
+        font-family: NotoSansHans-Medium;
+        font-size: 12px;
+        color: #353636;
+        font-weight: 500;
+        margin-left:8px;
+        padding-right:13px;
+        background: #F7F7F7;
+        border: 1px solid #E2E5EC;
+        box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
+        border-radius: 4px;
+        display:flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
     .panel__time {
       display: flex;

src/components/layout/Header.vue

@@ -149,7 +149,7 @@
 <script>
 import { useRoute } from 'vue-router'
 import { get, put } from '@/utils/http'
-import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl,drillDownPanelTypeMapping } from '@/utils/constants'
+import { entityType, storageKey, networkOverviewTabList, operationType, networkOverviewSearchUrl, drillDownPanelTypeMapping } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
 import { getNowTime, getSecond } from '@/utils/date-util'
@@ -401,7 +401,7 @@ export default {
                 this.$store.commit('setBreadcrumbColumnValue', columnValue)
                 this.$store.commit('setBreadcrumbColumnName', columnName)
                 const tabObjGroup = networkOverviewTabList.filter(item => item.label == columnName)
-                let type = tabObjGroup&&tabObjGroup[0]?tabObjGroup[0].prop:''
+                const type = tabObjGroup && tabObjGroup[0] ? tabObjGroup[0].prop : ''
                 this.$store.commit('setDimensionType', type)
                 this.$store.commit('setPanelName', columnValue)
               } else if (columnName) { // 点击的为列名
@@ -413,7 +413,7 @@ export default {
                 const tabList = this.$store.getters.getNetworkOverviewTabList
                 const curTab = tabList.filter(item => this.$t(item.label) === columnName)[0]
                 this.$store.commit('setNetworkOverviewCurrentTab', curTab)
-                this.$store.commit('setDimensionType', curTab?curTab.prop:'')
+                this.$store.commit('setDimensionType', curTab ? curTab.prop : '')
                 this.$store.commit('setQueryCondition', '')
                 this.$store.commit('setNetworkOverviewBeforeTab', null)
               } else {
@@ -432,14 +432,14 @@ export default {
           })
         }
       })
-      //console.log(this.$store.getters.getDimensionType)
+      // console.log(this.$store.getters.getDimensionType)
-      if(opeType===3){
+      if (opeType === 3) {
         this.$router.push({
-          params:{...this.$route.params,fourthPanel:''}
+          params: { ...this.$route.params, fourthPanel: '' }
         })
-      }else if(opeType!=4){
+      } else if (opeType != 4) {
         this.$router.push({
-          params:{...this.$route.params,fourthPanel:'',thirdPanel:''}
+          params: { ...this.$route.params, fourthPanel: '', thirdPanel: '' }
         })
       }
 

src/router/index.js

@@ -15,7 +15,7 @@ const routes = [
     component: () => import('@/components/layout/Home'),
     children: [
       {
-        name:'panel',
+        name: 'panel',
         path: '/panel/:typeName',
         component: () => import('@/views/charts2/Panel')
       },

src/views/charts2/Chart.vue

@@ -231,10 +231,6 @@ export default {
           get(requestUrl, this.queryParams).then(response => {
             if (response.code === 200) {
               this.chartData = response.data.result
-            } else {
-              if (this.chart.type === 601) {
-                this.$refs['tab' + this.chart.id].loading = false
-              }
             }
           })
         }

src/views/charts2/ChartList.vue

@@ -36,7 +36,7 @@
 import VueGridLayout from 'vue-grid-layout'
 import _ from 'lodash'
 import Chart from '@/views/charts2/Chart'
-import { panelTypeAndRouteMapping, storageKey,drillDownPanelTypeMapping } from '@/utils/constants'
+import { panelTypeAndRouteMapping, storageKey, drillDownPanelTypeMapping } from '@/utils/constants'
 import { typeMapping } from '@/views/charts2/chart-tools'
 export default {
   name: 'ChartList',
@@ -66,7 +66,7 @@ export default {
       if (!_.isEmpty(n)) {
         if (this.panelType === panelTypeAndRouteMapping.networkAppPerformance) {
           this.layout = n.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex)
-        }else if(Object.values(drillDownPanelTypeMapping).indexOf(this.panelType)>=-1){
+        } else if (Object.values(drillDownPanelTypeMapping).indexOf(this.panelType) >= -1) {
           this.layout = n.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex || !c.params.hasOwnProperty('tabIndex'))
         } else {
           this.layout = [...n]
@@ -86,7 +86,7 @@ export default {
     },
     npmTabIndex (n) {
       if (this.panelType === panelTypeAndRouteMapping.networkAppPerformance ||
-          Object.values(drillDownPanelTypeMapping).indexOf(this.panelType)>=-1) {
+          Object.values(drillDownPanelTypeMapping).indexOf(this.panelType) >= -1) {
         this.layout = this.chartList.filter(c => c.type === typeMapping.npm.npmTabs || c.params.tabIndex === this.npmTabIndex || !c.params.hasOwnProperty('tabIndex'))
       }
     }

src/views/charts2/Panel.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="panel-box">
     <div class="panel__header">
-      <div class="panel__title">{{panelName?panelName:(panel.i18n ? $t(panel.i18n) : panel.name)}}</div>
+      <div class="panel__title">{{panelName?panelName:(panel.i18n ? $t(panel.i18n) : panel.name)}}
+        <div  v-if="score" class="score">
+          <div class="circle-icon"  v-if="score <= 2" :class="{'data-score-red': score <= 2}" ></div>
+          <div class="circle-icon"  v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
+          <div class="circle-icon"  v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
+          Score:{{score}}
+        </div>
+      </div>
       <div class="panel__time">
         <date-time-range
             class="date-time-range"
@@ -33,11 +40,13 @@
 <script>
 import { useRoute, useRouter } from 'vue-router'
 import { ref } from 'vue'
-import { panelTypeAndRouteMapping } from '@/utils/constants'
+import { panelTypeAndRouteMapping, bytesColumnNameGroupForNpm, scoreUrl, customTableTitlesForAppPerformance } from '@/utils/constants'
 import { getPanelList, getChartList } from '@/utils/api'
-import { getNowTime } from '@/utils/date-util'
+import { getNowTime, getSecond } from '@/utils/date-util'
 import { getTypeCategory } from '@/views/charts/charts/tools'
+import { computeScore } from '@/utils/tools'
 import ChartList from '@/views/charts2/ChartList'
+import { get } from '@/utils/http'
 
 export default {
   name: 'Panel',
@@ -53,11 +62,58 @@ export default {
       chartList: [], // 普通panel的chart
       panelLock: true,
       extraParams: {},
-      panelName: ''
+      panelName: '',
+      score: null
     }
   },
   async mounted () {
     this.panelName = this.$store.getters.getPanelName
+    if (this.panelName && this.$route.path === '/panel/networkAppPerformance') {
+      // let columnName = this.$store.getters.getBreadcrumbColumnName
+      const columnValue = this.$store.getters.getBreadcrumbColumnValue
+      const queryParams = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        type: this.$store.getters.getDimensionType,
+        params: columnValue || ''
+      }
+      const requestGroup = []
+      scoreUrl.forEach(url => {
+        if (url) {
+          const request = get(url, queryParams, true)
+          requestGroup.push(request)
+        }
+      })
+      const scoreGroup = []
+      let score = 0
+      Promise.all(requestGroup).then(res => {
+        res.forEach(t => {
+          if (t.code === 200) {
+            const data = t.data.result ? t.data.result[0] : null
+            if (data) {
+              customTableTitlesForAppPerformance.forEach(item => {
+                if (data[bytesColumnNameGroupForNpm[item.prop]]) {
+                  score = computeScore(data, item.scoreType)
+                  scoreGroup.push(score)
+                } else {
+                  scoreGroup.push(0)
+                }
+              })
+            }
+          }
+        })
+      }).finally(() => {
+        scoreGroup.forEach(i => {
+          score = Number(score) + Number(i)
+        })
+        score = Math.ceil(score * 6)
+        if (score > 6) {
+          score = 6
+        }
+        this.score = score || 0
+      })
+    }
+
     await this.init()
     const vm = this
     this.emitter.on('reloadChartList', async function () {
@@ -74,14 +130,14 @@ export default {
     const panel = ref({})
     let panelType = 1 // 取得panel的type
     const { params } = useRoute()
-    let router = useRouter()
+    const router = useRouter()
-    let thirdPanel = router.currentRoute.value.params.thirdPanel
+    const thirdPanel = router.currentRoute.value.params.thirdPanel
-    let fourthPanel = router.currentRoute.value.params.fourthPanel
+    const fourthPanel = router.currentRoute.value.params.fourthPanel
-    if(fourthPanel){
+    if (fourthPanel) {
       panelType = Number(fourthPanel)
-    }else if(thirdPanel){
+    } else if (thirdPanel) {
       panelType = Number(thirdPanel)
-    }else {
+    } else {
       panelType = props.entity ? props.entity.type : panelTypeAndRouteMapping[params.typeName]
     }
 

src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue

@@ -37,17 +37,21 @@
                 <template  #default="scope" :column="item">
                   <template v-if="item.columnType === tableColumnType.chainRatio"  >
                     <div class="data-total" >
-                      {{scope.row[item.prop] ? unitConvert(scope.row[item.prop], unitTypes.number).join(' ') : '-'}}
+                      {{scope.row[item.prop]?((scope.row[item.prop][0]||scope.row[item.prop][0]===0)? unitConvert(scope.row[item.prop][0], unitTypes.number).join(' ') : '-'):'' }}
-                      <div v-if="scope.row['trend'] === 'up'" class="data-total-trend data-total-trend-red">
+                      <template v-if="scope.row[item.prop]">
-                        <i class="cn-icon-rise1 cn-icon"></i><span>{{scope.row['trendValue']}}</span>
+                        <div v-if="scope.row[item.prop][1] === 'up'" class="data-total-trend data-total-trend-red">
-                      </div>
+                          <i class="cn-icon-rise1 cn-icon"></i><span>{{scope.row[item.prop][2]}}</span>
-                      <div v-else-if="scope.row['trend'] === 'down'" class="data-total-trend data-total-trend-green">
+                        </div>
-                        <i class="cn-icon-decline cn-icon"></i><span>{{scope.row['trendValue']}}</span>
+                        <div v-else-if="scope.row[item.prop][1] === 'down'" class="data-total-trend data-total-trend-green">
-                      </div>
+                          <i class="cn-icon-decline cn-icon"></i><span>{{scope.row[item.prop][2]}}</span>
-                      <div v-else-if="scope.row['trend'] === 'noChange'" class="data-total-trend data-total-trend-black">
+                        </div>
-                        <i class="cn-icon-constant cn-icon"></i>
+                        <div v-else-if="scope.row[item.prop][1] === 'noChange'" class="data-total-trend data-total-trend-black">
-                      </div>
+                          <i class="cn-icon-constant cn-icon"></i>
-
+                        </div>
+                      </template>
+                      <template  v-else>
+                        -
+                      </template>
                     </div>
                   </template>
                   <template v-else-if="item.columnType === tableColumnType.dillDown" >
@@ -145,10 +149,11 @@
 </template>
 <script>
 import { ref } from 'vue'
-import {operationType, unitTypes,networkTable,tableColumnType } from '@/utils/constants'
+import { operationType, unitTypes, networkTable, tableColumnType, cycle } from '@/utils/constants'
 import { get } from '@/utils/http'
 import unitConvert from '@/utils/unit-convert'
-import { getChainRatio } from '@/utils/tools'
+import { getChainRatio, computeScore } from '@/utils/tools'
+import { getSecond } from '@/utils/date-util'
 import chartMixin from '@/views/charts2/chart-mixin'
 
 export default {
@@ -177,28 +182,22 @@ export default {
         }
       ],
       customTableTitles: [],
-      list: [],//当前状态列表
+      list: [], // 当前状态列表
-      networkTabList: [],//原始状态列表
+      networkTabList: [], // 原始状态列表
       showBackground: false,
       tableData: [],
       showTabs: true,
-      columnNameGroup: {
+      columnNameGroup: {},
-        total: 'bytesTotal',
+      cycleColumnNameGroup: {},
-        inbound: 'inboundBitsRate',
-        outbound: 'outboundBitsRate',
-        internal: 'internalBitsRate',
-        through: 'throughBitsRate'
-      },
       metricUnit: 'bytes',
       loading: false,
-      drillDown: false,
+      tableColumnType: tableColumnType,
-      tableColumnType:tableColumnType,
+      curTable: {}, // 当前的表格类型
-      curTable:{},//当前的表格类型
+      tableType: '',
-      tableType:'',
+      hasMetricSearch: true,
-      hasMetricSearch:true,
+      activeTab: '',
-      activeTab:'',
+      activeCustomize: '',
-      activeCustomize:'',
+      networkSearchUrl: {}
-      networkSearchUrl:{}
     }
   },
   props: {
@@ -231,15 +230,16 @@ export default {
       const label = curTab.label
       if (this.metric === 'Bits/s') {
         this.columnNameGroup = this.curTable.bytesColumnNameGroup
+        this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
         this.orderBy = 'bytesTotal'
         this.metricUnit = 'bytes'
         const titleGroup = []
         if (this.customTableTitles.length === 2) {
-          this.curTable.column.forEach((item,index) => {
+          this.curTable.column.forEach((item, index) => {
             if (item.tabColumn) {
               item.label = label
             }
-            if(index===1){
+            if (index === 1) {
               item.checked = this.customTableTitles[1].checked
             }
             titleGroup.push(item)
@@ -253,18 +253,18 @@ export default {
           })
         }
         this.customTableTitles = titleGroup
-
       } else if (this.metric === 'Packets/s') {
         this.columnNameGroup = this.curTable.packetsColumnNameGroup
+        this.cycleColumnNameGroup = this.curTable.packetsCycleColumnNameGroup
         this.orderBy = 'packetsTotal'
         this.metricUnit = 'packets'
         const titleGroup = []
         if (this.customTableTitles.length === 2) {
-          this.curTable.column.forEach((item,index) => {
+          this.curTable.column.forEach((item, index) => {
             if (item.tabColumn) {
               item.label = label
             }
-            if(index===1){
+            if (index === 1) {
               item.checked = this.customTableTitles[1].checked
             }
             titleGroup.push(item)
@@ -280,6 +280,7 @@ export default {
         this.customTableTitles = titleGroup
       } else if (this.metric === 'Sessions/s') {
         this.columnNameGroup = this.curTable.sessionsColumnNameGroup
+        this.cycleColumnNameGroup = this.curTable.sessionsCycleColumnNameGroup
         this.orderBy = 'sessions'
         this.metricUnit = 'sessions'
         let totalChecked = true
@@ -288,9 +289,10 @@ export default {
             totalChecked = item.checked
           }
         })
+        const totalColumn = this.customTableTitles.filter(item => item.prop === 'total')
         this.customTableTitles = [
-          { label: label, prop: 'tab', checked: true, tabColumn: true,columnType:this.curTable.column[0].columnType},
+          { label: label, prop: 'tab', checked: true, tabColumn: true, columnType: this.curTable.column[0].columnType },
-          { label: 'network.total', prop: 'total', checked: totalChecked, tabColumn: false,columnType:this.curTable.column[1].columnType}
+          { label: 'network.total', prop: 'total', checked: totalChecked, tabColumn: false, columnType: this.curTable.column[1].columnType, cycleDataUrl: totalColumn ? totalColumn.cycleDataUrl : '', isInMainUrl: true }
         ]
       }
       let queryParams = {
@@ -367,7 +369,8 @@ export default {
           this.$store.commit('setNetworkOverviewCurrentTab', curTab)
         }
         this.showTabs = true
-      } else if (curOperationType === operationType.secondMenu) { // 点击的为第二级菜单、或者点击菜单进入、
+      } else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击的为第二级菜单、或者点击菜单进入、
+        this.list = this.$_.cloneDeep(this.curTable.tabList)
         if (curTab) { // tab切换
           this.activeTab = curTab.label
           this.customTableTitles[0].label = curTab.label
@@ -428,20 +431,19 @@ export default {
         }
       }
 
-      this.tableData = []
       const tabList = []
       const tableDataTmp = this.chartData.map(item => {
         tabList.push(item[curTab.prop])
-        return {
+        const otherData = { tab: item[curTab.prop] }
-          tab: item[curTab.prop],
+        Object.keys(this.columnNameGroup).forEach(i => {
-          total: item[this.columnNameGroup.total],
+          otherData[i] = item[this.columnNameGroup[i]]
-          inbound: item[this.columnNameGroup.inbound],
+        })
-          outbound: item[this.columnNameGroup.outbound],
+        return otherData
-          internal: item[this.columnNameGroup.internal],
-          through: item[this.columnNameGroup.through]
-        }
       })
-      const queryParams = {}
+      const queryParams = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime)
+      }
       if (tabList.length > 0) {
         const conditionStr = tabList.filter(item => item != '')
         queryParams.params = conditionStr.toString()
@@ -454,60 +456,143 @@ export default {
       if (condition) {
         queryParams.q = condition
       }
-      get(this.gerCycleUrl(), queryParams).then(response => {
+
-        if (response.code === 200) {
+      const self = this
-          cycleTotalList = response.data.result
+      this.customTableTitles.forEach(tableColumn => {
-          tableDataTmp.forEach(item => {
+        if (tableColumn.columnType === tableColumnType.chainRatio && tableColumn.isInMainUrl) {
-            const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
+          get(self.gerCycleUrl(), queryParams).then(response => {
-            let trend = ''//空：无图标；up：向上的图标；down：向下的图标；noChange：横向箭头图标
+            if (response.code === 200) {
-            let trendPercent = ''
+              cycleTotalList = response.data.result
-            if (cycle) {
+              tableDataTmp.forEach(item => {
-              const totalDiff = item.total - cycle[this.metricUnit]
+                const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
-              if (cycle[this.metricUnit] && cycle[this.metricUnit]!=0) {
+                let trend = ''// 空：无图标；up：向上的图标；down：向下的图标；noChange：横向箭头图标
-                let chainRatio = getChainRatio(item.total, cycle[this.metricUnit])
+                let trendPercent = ''
-                if (chainRatio === '-') {
+                if (cycle) {
-                  trend = ''
+                  const curVal = Number(item[tableColumn.prop])
-                  trendPercent = ''
+                  const preVal = Number(cycle[self.cycleColumnNameGroup[tableColumn.prop]])
-                }else {
+                  if (preVal && preVal != 0) {
-                  trendPercent = Math.round(Math.abs(chainRatio)* 100)
+                    const totalDiff = curVal - preVal
-                  if (totalDiff > 0) {
+                    const chainRatio = getChainRatio(curVal, preVal)
-                    trend = 'up'
+                    if (chainRatio === '-') {
-                    trendPercent = trendPercent + '%'
+                      trend = ''
-                  } else if (totalDiff < 0) {
+                      trendPercent = ''
-                    trend = 'down'
+                    } else {
-                    trendPercent = trendPercent + '%'
+                      trendPercent = Math.round(Math.abs(chainRatio) * 100)
-                  } else {
+                      if (totalDiff > 0) {
-                    trend = 'noChange'//横向图标
+                        trend = 'up'
-                  }
+                        trendPercent = trendPercent + '%'
-                  if (trendPercent === '0%') {
+                      } else if (totalDiff < 0) {
-                    trend = 'noChange'
+                        trend = 'down'
-                    trendPercent = ''
+                        trendPercent = trendPercent + '%'
+                      } else {
+                        trend = 'noChange'// 横向图标
+                      }
+                      if (trendPercent === '0%') {
+                        trend = 'noChange'
+                        trendPercent = ''
+                      }
+                    }
                   }
                 }
-              }
+                item[tableColumn.prop] = [item[tableColumn.prop], trend, trendPercent]
+              })
             }
-            this.tableData.push({
+          }).catch(e => {
-              tab: item.tab,
+            console.log(e)
-              total: item.total,
+          }).finally(e => {
-              trend: trend,
+            this.tableData = tableDataTmp
-              trendValue: trendPercent,
+            // 查询需要单独查询的，且需要展示环比图标，列的当前周期的数据
-              inbound: item.inbound,
+            this.customTableTitles.forEach(tableColumn => {
-              outbound: item.outbound,
+              if (tableColumn.columnType === tableColumnType.chainRatio && !tableColumn.isInMainUrl) {
-              internal: item.internal,
+                get(self.gerColumnUrl(tableColumn), queryParams).then(response => {
-              through: item.through
+                  if (response.code === 200) {
+                    const columnList = response.data.result
+                    self.tableData.forEach((item, i) => {
+                      const data = columnList.find(i => i[curTab.prop] === item.tab)
+                      if (data) {
+                        item[tableColumn.prop] = data[self.columnNameGroup[tableColumn.prop]]
+                        let score = 0
+                        if (data) {
+                          score = computeScore(data, tableColumn.scoreType)
+                        }
+                        item.scoreGroup = item.scoreGroup ? [...item.scoreGroup, score] : [score]
+                        if (item && item.scoreGroup && item.scoreGroup.length >= 5) {
+                          // self.tableData.forEach(data => {
+                          let score = 0
+                          item.scoreGroup.forEach(i => {
+                            score = Number(score) + Number(i)
+                          })
+                          score = Math.ceil(score * 6)
+                          if (score > 6) {
+                            score = 6
+                          }
+                          item.score = score || 0
+                        }
+                      }
+                    })
+                  }
+                }).catch(e => {
+                  console.log(e)
+                  self.toggleLoading(false)
+                }).finally(e => {
+                  // 查询需要单独查询的，且需要展示环比图标，列的前一周期的数据
+                  if (tableColumn.cycle) {
+                    const queryCycleParams = {
+                      ...queryParams,
+                      cycle: tableColumn.cycle
+                    }
+                    get(self.gerColumnUrl(tableColumn), queryCycleParams).then(response => {
+                      if (response.code === 200) {
+                        cycleTotalList = response.data.result
+                        self.tableData.forEach(item => {
+                          const cycle = cycleTotalList.find(i => i[curTab.prop] === item.tab)
+                          let trend = ''// 空：无图标；up：向上的图标；down：向下的图标；noChange：横向箭头图标
+                          let trendPercent = ''
+                          if (cycle) {
+                            const curVal = Number(item[tableColumn.prop])
+                            // let preVal = Number(cycle[self.metricUnit])
+                            const preVal = Number(cycle[self.columnNameGroup[tableColumn.prop]])
+                            if (preVal && preVal != 0) {
+                              const totalDiff = curVal - preVal
+                              const chainRatio = getChainRatio(curVal, preVal)
+                              if (chainRatio === '-') {
+                                trend = ''
+                                trendPercent = ''
+                              } else {
+                                trendPercent = Math.round(Math.abs(chainRatio) * 100)
+                                if (totalDiff > 0) {
+                                  trend = 'up'
+                                  trendPercent = trendPercent + '%'
+                                } else if (totalDiff < 0) {
+                                  trend = 'down'
+                                  trendPercent = trendPercent + '%'
+                                } else {
+                                  trend = 'noChange'// 横向图标
+                                }
+                                if (trendPercent === '0%') {
+                                  trend = 'noChange'
+                                  trendPercent = ''
+                                }
+                              }
+                            }
+                          }
+                          item[tableColumn.prop] = [item[tableColumn.prop] ? item[tableColumn.prop] : '', trend, trendPercent]
+                        })
+                      }
+                    }).catch(e => {
+                      console.log(e)
+                    })
+                  }
+                  self.toggleLoading(false)
+                })
+              }
             })
+            self.toggleLoading(false)
           })
-
-          this.toggleLoading(false)
-        } else {
-          this.tableData = tableDataTmp
-          this.toggleLoading(false)
         }
-      }).catch(e => {
-        this.toggleLoading(false)
-      }).finally(e => {
-        this.toggleLoading(false)
       })
+
+      self.toggleLoading(false)
     },
     tabChange (index) {
       const beforeType = this.$store.getters.getTabOperationBeforeType
@@ -582,7 +667,7 @@ export default {
             menu.columnValue = columnValue
             this.$store.commit('setPanelName', columnValue)
             this.$store.commit('setBreadcrumbColumnName', columnName)
-            this.$store.commit('setDimensionType', tabGroup[0]?tabGroup[0].prop:'')
+            this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
             this.$store.commit('setBreadcrumbColumnValue', columnValue)
           }
         } else if (!this.$_.isEmpty(menu.children)) {
@@ -592,13 +677,12 @@ export default {
               child.columnValue = columnValue
               this.$store.commit('setPanelName', columnValue)
               this.$store.commit('setBreadcrumbColumnName', columnName)
-              this.$store.commit('setDimensionType', tabGroup[0]?tabGroup[0].prop:'')
+              this.$store.commit('setDimensionType', tabGroup[0] ? tabGroup[0].prop : '')
               this.$store.commit('setBreadcrumbColumnValue', columnValue)
             }
           })
         }
       })
-      console.log(this.$store.getters.getDimensionType)
       let toPanel = null
       this.list.forEach((item, index) => {
         if (item.label === columnName) {
@@ -627,14 +711,14 @@ export default {
       })
       this.$store.commit('setBreadcrumbColumnValueList', valueList)
       this.$router.push({
-        name:'panel',
+        name: 'panel',
         path: this.$route.path,
         query: {
           t: +new Date()
         },
-        params:{
+        params: {
-          thirdPanel:this.curTable.panelIdOfThirdMenu,
+          thirdPanel: this.curTable.panelIdOfThirdMenu,
-          fourthPanel:toPanel
+          fourthPanel: toPanel
         }
       })
     },
@@ -717,6 +801,22 @@ export default {
         return this.networkSearchUrl.curUrl
       }
     },
+    gerCycleUrl () {
+      const condition = this.$store.getters.getQueryCondition
+      if (condition) {
+        return this.networkSearchUrl.drilldownCycleUrl
+      } else {
+        return this.networkSearchUrl.cycleUrl
+      }
+    },
+    gerColumnUrl (tableColumn) {
+      const condition = this.$store.getters.getQueryCondition
+      if (condition) {
+        return tableColumn.dillDownCycleDataUrl
+      } else {
+        return tableColumn.cycleDataUrl
+      }
+    },
     handleQueryParams (extraParams) {
       let queryType = ''
       const name = this.$store.getters.getBreadcrumbColumnName
@@ -768,9 +868,10 @@ export default {
           this.customTableTitles[0].label = curTab.label
           this.$store.commit('setNetworkOverviewCurrentTab', curTab)
         }
-      } else if (curOperationType === operationType.secondMenu) { // 点击第二级菜单，点击菜单
+      } else if (curOperationType === operationType.secondMenu || curOperationType === operationType.mainMenu) { // 点击第二级菜单，点击菜单
-        const list = this.$_.cloneDeep(this.networkTabList)
+        this.list = this.$_.cloneDeep(this.curTable.tabList)
-        const tabObjGroup = list.filter(item => item.checked)
+        this.$store.commit('setNetworkOverviewTabList', this.list)
+        const tabObjGroup = this.list.filter(item => item.checked)
         if (tabObjGroup && tabObjGroup.length > 0) {
           const curTab = tabObjGroup[0]
           queryType = curTab.prop
@@ -809,14 +910,6 @@ export default {
       }
       return extraParams
     },
-    gerCycleUrl () {
-      const condition = this.$store.getters.getQueryCondition
-      if (condition) {
-        return this.networkSearchUrl.drilldownCycleUrl
-      } else {
-        return this.networkSearchUrl.cycleUrl
-      }
-    },
     handleCustomizeClick (tab) {
       this.activeCustomize = tab.paneName
     },
@@ -848,19 +941,18 @@ export default {
     }
   },
   mounted () {
-    if (this.chart.params && this.chart.params.drillDown) {
+    // 当前表格相关数据初始化
-      this.drillDown = this.chart.params.drillDown
+    this.tableType = this.chart.params ? this.chart.params.name : 'networkOverview'
-    }
+    this.curTable = networkTable[this.tableType] ? networkTable[this.tableType] : networkTable.networkOverview
-    //当前表格相关数据初始化
-    this.tableType = this.chart.params?this.chart.params.name:'networkOverview'
-    this.curTable = networkTable[this.tableType]?networkTable[this.tableType]:networkTable[0]
     this.hasMetricSearch = this.curTable.hasMetricSearch
-    this.customTableTitles =  this.$_.cloneDeep(this.curTable.column)
+    this.customTableTitles = this.$_.cloneDeep(this.curTable.column)
     this.list = this.$_.cloneDeep(this.curTable.tabList)
     this.networkTabList = this.curTable.tabList
     this.activeTab = this.networkTabList[0].label
     this.activeCustomize = ref('tabs')
     this.networkSearchUrl = this.curTable.url
+    this.columnNameGroup = this.curTable.bytesColumnNameGroup
+    this.cycleColumnNameGroup = this.curTable.bytesCycleColumnNameGroup
 
     if (this.$store.getters.getNetworkOverviewTabList.length > 0) {
       this.list = this.$store.getters.getNetworkOverviewTabList
@@ -889,8 +981,8 @@ export default {
     }
   },
   setup (props) {},
-  destroyed () {
+  unmounted () {
-    this.$store.commit('setNetworkOverviewTabList', this.list)//保存状态
+    this.$store.commit('setNetworkOverviewTabList', this.list)// 保存状态
   }
 }
 </script>