fix: 修复网络概况 部分组件问题

src/views/charts/charts/tools.js

@@ -508,3 +508,27 @@ export function trafficLineTooltipFormatter (params) {
   str += '</div>'
   return str
 }
+export function appStackedLineTooltipFormatter (params) {
+  let str = '<div>'
+  params.forEach((item, i) => {
+    const tData = item.data[0]
+    if (i === 0) {
+      str += '<div style="margin-bottom: 5px">'
+      str += dateFormatByAppearance(tData)
+      str += '</div>'
+    }
+    str += '<div class="cn-chart-tooltip">'
+    str += '<span class="cn-chart-tooltip-box">'
+    str += item.marker
+    str += `<span class="cn-chart-tooltip-content"> 
+        ${item.seriesName}
+    </span>`
+    str += '</span>'
+    str += `<span class="cn-chart-tooltip-value cn-chart-tooltip__color">
+        ${unitConvert(item.data[1], item.value[2]).join(' ')}
+    </span>`
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}

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

@@ -107,7 +107,7 @@
           <div class="body__searcher">
             <el-input v-model="searcherApp" @input="searcherAppChange" size="mini" :placeholder="$t('networkOverview.search')" prefix-icon="el-icon-search"></el-input>
           </div>
-          <div class="body__loading" v-if="loading"><loading :loading="loading"></loading></div>
+          <div class="body__loading"><loading :loading="loading"></loading></div>
         </div>
       </div>
     </el-drawer>
@@ -127,6 +127,7 @@ import { getSecond } from '@/utils/date-util'
 import { getChainRatio } from '@/utils/tools'
 import loading from '@/components/common/Loading'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
+import { appStackedLineTooltipFormatter } from '@/views/charts/charts/tools'
 export default {
   name: 'NetworkOverviewApps',
   props: {
@@ -172,7 +173,6 @@ export default {
       appTypeTab: 0,
       appShowName: false,
       searcherApp: '',
-      appShowTypeTab: 0,
       // 选中的app，不区分app和provider
       toSaveApp: [],
       myChartArray: [],
@@ -186,13 +186,15 @@ export default {
       timerScroll: null,
       offset: 0,
       flag: false,
-      timerSearc: null
+      timerSearc: null,
+      timerHandle: null
     }
   },
   watch: {
     showAddApp: {
       deep: true,
       handler (n) {
+        this.searcherApp = ''
         if (n) {
           window.addEventListener('scroll', this.handleScroll, true)
         } else {
@@ -307,7 +309,7 @@ export default {
         const chartOption = _.cloneDeep(appListChartOption)
         chartOption.series = [{
           ...chartOption.series[0],
-          data: obj.lineData,
+          data: obj.lineData.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number']),
           lineStyle: {
             color: obj.trend === 'up' ? '#7FA054' : '#35ADDA'
           },
@@ -325,6 +327,13 @@ export default {
             ])
           }
         }]
+        chartOption.tooltip.formatter = (params) => {
+          params.forEach(t => {
+            t.seriesName = this.$t(t.seriesName)
+          })
+          const str = appStackedLineTooltipFormatter(params)
+          return str
+        }
         chart.setOption(chartOption)
         this.myChart.push(chart)
         this.$nextTick(() => {
@@ -338,82 +347,74 @@ export default {
       const scrollHeight = e.target.scrollHeight
       if (scrollTop && (clientHeight + scrollTop) >= scrollHeight) {
         if (this.pageObj.pages > this.pageObj.pageNo) {
-          this.pageObj.pageNo++
           this.loading = true
-          const params = {
+          this.pageObj.pageNo = this.pageObj.pageNo + 1
-            startTime: getSecond(this.timeFilter.startTime),
+          this.addApp(this.pageObj.pageNo, this.searcherApp, this.loading)
-            endTime: getSecond(this.timeFilter.endTime),
-            pageSize: this.pageObj.pageSize,
-            pageNo: this.pageObj.pageNo
-          }
-          if (this.appShowTypeTab == 0) {
-            params.type = 'overviewProvide'
-            get(api.dict, params).then(res => {
-              if (res.code === 200) {
-                res.data.list.forEach(t => {
-                  this.toSaveApp.forEach(e => {
-                    if (t.value === e.name) {
-                      t.provideShow = e.provideShow
-                    }
-                  })
-                })
-                this.providerOptions.push(...res.data.list)
-                this.pageObj.pages = res.data.pages
-                this.appListData([], this.providerOptions)
-              }
-              this.loading = false
-            })
-          } else if (this.appShowTypeTab == 1) {
-            params.type = 'overviewApp'
-            get(api.dict, params).then(res => {
-              if (res.code === 200) {
-                res.data.list.forEach(t => {
-                  this.toSaveApp.forEach(e => {
-                    if (t.value === e.name) {
-                      t.appShow = e.appShow
-                    }
-                  })
-                })
-                this.appOptions.push(...res.data.list)
-                this.pageObj.pages = res.data.pages
-                this.appListData(this.appOptions, [])
-              }
-              this.loading = false
-            })
-          }
         }
       }
     },
-    addApp () {
+    addApp (pageNo, val, show) {
       this.showAddApp = true
-      this.searcherApp = ''
       const letter = 'abcdefghijklmnopqrstuvwxyz'
-      this.providerOptions = []
-      this.appOptions = []
-      this.pageObj.pageNo = 1
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
         pageSize: this.pageObj.pageSize,
-        pageNo: this.pageObj.pageNo
+        q: ''
       }
-      if (this.appShowTypeTab == 0) {
+      if (val && show) { // 搜索有值 并且 true
+        params.q = val
+        params.pageNo = pageNo
+      } else if (!val && show) { // 搜索无值 并且 true
+        val = ''
+        params.pageNo = pageNo
+      } else if (val && !show) { // 搜索有值 并且 false
+        params.q = val
+        params.pageNo = 1
+      } else {
+        params.pageNo = 1
+      }
+      if (this.appTypeTab == 0) {
         params.type = 'overviewProvide'
         get(api.dict, params).then(res => {
           if (res.code === 200) {
-            this.providerOptions.push(...res.data.list)
             this.pageObj.pages = res.data.pages
-            this.appListData([], this.providerOptions)
+            res.data.list.forEach(t => {
+              this.toSaveApp.forEach(e => {
+                if (t.value === e.name) {
+                  t.provideShow = e.provideShow
+                }
+              })
+            })
+            if (val && !show) {
+              this.providerOptions = res.data.list
+            } else {
+              this.providerOptions.push(...res.data.list)
+              this.appListData([], this.providerOptions)
+            }
           }
+          this.loading = false
         })
-      } else if (this.appShowTypeTab == 1) {
+      } else if (this.appTypeTab == 1) {
         params.type = 'overviewApp'
         get(api.dict, params).then(res => {
           if (res.code === 200) {
-            this.appOptions.push(...res.data.list)
             this.pageObj.pages = res.data.pages
-            this.appListData(this.appOptions, [])
+            res.data.list.forEach(t => {
+              this.toSaveApp.forEach(e => {
+                if (t.value === e.name) {
+                  t.appShow = e.appShow
+                }
+              })
+            })
+            if (val && !show) {
+              this.appOptions = res.data.list
+            } else {
+              this.appOptions.push(...res.data.list)
+              this.appListData(this.appOptions, [])
+            }
           }
+          this.loading = false
         })
       }
     },
@@ -431,63 +432,30 @@ export default {
       this.showAddApp = false
     },
     appTypeTabChange (val) {
-      this.appShowTypeTab = val.index
+      this.pageObj.pageNo = 1
       this.searcherApp = ''
-      this.addApp(val.index)
+      this.addApp()
       window.addEventListener('scroll', this.scrollChange, true)
       this.timerScroll = setTimeout(() => {
         window.removeEventListener('scroll', this.scrollChange, true)
-      }, 300)
+      }, 500)
     },
     scrollChange (e) {
       e.target.scrollTop = 0
     },
     searcherAppChange (val) {
       clearTimeout(this.timerSearc)
+      window.addEventListener('scroll', this.scrollChange, true)
       this.timerSearc = setTimeout(() => {
         if (this.flag) {
           return false
         }
         this.flag = true
-        if (!val) {
+        this.pageObj.pageNo = 1
-          this.pageObj.pageNo = 1
+        this.searcherApp = val
-        }
+        this.addApp(this.pageObj.pageNo, val)
-        const params = {
-          startTime: getSecond(this.timeFilter.startTime),
-          endTime: getSecond(this.timeFilter.endTime),
-          pageSize: this.pageObj.pageSize,
-          pageNo: this.pageObj.pageNo
-        }
-        if (this.appShowTypeTab == 0) {
-          params.type = 'overviewProvide'
-          get(api.dict, params).then(res => {
-            if (res.code === 200) {
-              res.data.list.forEach(t => {
-                this.toSaveApp.forEach(e => {
-                  if (t.value === e.name) {
-                    t.provideShow = e.provideShow
-                  }
-                })
-              })
-              this.providerOptions = res.data.list.filter(t => t.value.indexOf(val) > -1)
-            }
-          })
-        } else if (this.appShowTypeTab == 1) {
-          params.type = 'overviewApp'
-          get(api.dict, params).then(res => {
-            if (res.code === 200) {
-              res.data.list.forEach(t => {
-                this.toSaveApp.forEach(e => {
-                  if (t.value === e.name) {
-                    t.appShow = e.appShow
-                  }
-                })
-              })
-              this.appOptions = res.data.list.filter(t => t.value.indexOf(val) > -1)
-            }
-          })
-        }
         this.flag = false
+        window.removeEventListener('scroll', this.scrollChange, true)
       }, 500)
     },
     // 保存变更，并且在增、删app后，根据当前app数量更改整体高度

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

@@ -295,7 +295,7 @@ export default {
             label: {
               formatter (params) {
                 const arr = unitConvert(params.value, unitTypes.number).join('')
-                return _this.echartsLabelValue + '(' + arr + 'packets/s' + ')'
+                return _this.echartsLabelValue + '(' + arr + echartsData[0].unitType + ')'
               },
               position: 'insideStartTop',
               color: '#717171',

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

@@ -64,9 +64,21 @@ export default {
               return
             }
             res.data.result = res.data.result.map(t => {
+              if (t.eventSeverity === 'critical') {
+                t.index = 0
+              } else if (t.eventSeverity === 'high') {
+                t.index = 1
+              } else if (t.eventSeverity === 'medium') {
+                t.index = 1
+              } else if (t.eventSeverity === 'low') {
+                t.index = 3
+              } else if (t.eventSeverity === 'info') {
+                t.index = 4
+              }
               return {
                 name: t.eventSeverity,
-                value: t.count
+                value: t.count,
+                index: t.index
               }
             })
             if (res.data.result.length <= 0) {
@@ -74,7 +86,7 @@ export default {
             } else {
               this.chartOption.legend.show = true
             }
-            this.chartOption.series[0].data = res.data.result
+            this.chartOption.series[0].data = res.data.result.sort((a, b) => { return a.index - b.index })
             this.myChart.setOption(this.chartOption)
           }
         })

src/views/charts2/charts/npm/NpmTrafficLine.vue

@@ -4,7 +4,7 @@
     <div class="npm-traffic-line-body">
       <chart-no-data v-if="isNoData"></chart-no-data>
       <template v-else>
-        <div class="chart-drawing" id="chart"></div>
+        <div class="chart-drawing" :id="chartData.name"></div>
       </template>
     </div>
   </div>
@@ -21,7 +21,6 @@ import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
-import { npmTrafficLine } from '@/views/charts2/charts/npmLineData'
 import _ from 'lodash'
 export default {
   name: 'NpmTrafficLine',
@@ -45,8 +44,8 @@ export default {
       unitConvert,
       unitTypes,
       isNoData: false,
-      ip: '192.68.44.54',
+      ip: '116.178.236.216',
-      side: 'client',
+      side: '',
       type: 'ip',
       mpackets: [
         { name: 'network.total', show: true, positioning: 0, data: [], unitType: '' },
@@ -55,18 +54,25 @@ export default {
         { name: 'network.internal', show: true, positioning: 3, data: [], unitType: '' },
         { name: 'network.through', show: true, positioning: 4, data: [], unitType: '' },
         { name: 'network.other', show: true, positioning: 5, data: [], unitType: '' }
-      ]
+      ],
+      chartData: {}
     }
   },
   methods: {
     init () {
+      const condition = this.$store.getters.getQueryCondition
+      console.log(condition)
+      if (this.chartData.id === 24) {
+        this.side = 'client'
+      } else {
+        this.side = 'server'
+      }
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
         q: `ip='${this.ip}' and side='${this.side}'`,
         type: 'ip'
       }
-      // const condition = this.$store.getters.getQueryCondition
       // if (condition) {
       //   params.q = condition
       //   params.type = this.type
@@ -74,21 +80,22 @@ export default {
       get(api.npm.overview.trafficGraph, params).then((res) => {
         if (res.code === 200) {
           // res.data.result.length = 0
-          res.data.result = npmTrafficLine
           if (res.data.result.length === 0) {
             this.isNoData = true
             return
           }
           res.data.result.forEach((t, i) => {
-            const mpackets = _.cloneDeep(this.mpackets)
+            if (t.type === 'bytes') {
-            mpackets[0].data = t.totalBitsRate.values ? t.totalBitsRate.values : []
+              const mpackets = _.cloneDeep(this.mpackets)
-            mpackets[1].data = t.inboundBitsRate.values ? t.inboundBitsRate.values : []
+              mpackets[0].data = t.totalBitsRate.values ? t.totalBitsRate.values : []
-            mpackets[2].data = t.outboundBitsRate.values ? t.outboundBitsRate.values : []
+              mpackets[1].data = t.inboundBitsRate.values ? t.inboundBitsRate.values : []
-            mpackets[3].data = t.internalBitsRate.values ? t.internalBitsRate.values : []
+              mpackets[2].data = t.outboundBitsRate.values ? t.outboundBitsRate.values : []
-            mpackets[4].data = t.externalBitsRate.values ? t.externalBitsRate.values : []
+              mpackets[3].data = t.internalBitsRate.values ? t.internalBitsRate.values : []
-            mpackets[5].data = t.other.values ? t.other.values : []
+              mpackets[4].data = t.throughBitsRate.values ? t.throughBitsRate.values : []
-            this.mpackets = mpackets
+              mpackets[5].data = t.other.values ? t.other.values : []
-            this.echartsInit(this.mpackets)
+              this.mpackets = mpackets
+              this.echartsInit(this.mpackets)
+            }
             // else if (t.type === 'packets') {
             //   const mpackets = _.cloneDeep(this.mpackets)
             //   mpackets[0].data = t.totalPacketsRate.values ? t.totalPacketsRate.values : []
@@ -106,11 +113,13 @@ export default {
             //   this.echartsInit(this.mpackets)
             // }
           })
+        } else {
+          this.isNoData = true
         }
       })
     },
     echartsInit (echartsData) {
-      const dom = document.getElementById('chart')
+      const dom = document.getElementById(this.chartData.name)
       this.myChart = echarts.init(dom)
       this.chartOption = trafficLineChartOption
       const chartOption = this.chartOption.series[0]
@@ -198,6 +207,9 @@ export default {
     }
   },
   mounted () {
+    if (this.chart) {
+      this.chartData = _.cloneDeep(this.chart)
+    }
     this.timer = setTimeout(() => {
       this.init()
     }, 200)

src/views/charts2/charts/options/echartOption.js

@@ -227,12 +227,7 @@ export const appListChartOption = {
   },
   yAxis: {
     show: false,
-    type: 'value',
+    type: 'value'
-    axisLabel: {
-      formatter: function (value) {
-        return unitConvert(value, unitTypes.number, null, null, 0).join(' ')
-      }
-    }
   },
   grid: {
     left: 0,