CN-667 feat: Dashboard - npm - 下钻 - 流量折线图开发

2022-08-12 15:25:54 +08:00
parent d55cdcb709
commit b5a980ed3f
13 changed files with 668 additions and 59 deletions
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -60,4 +60,6 @@
@import './views/charts2/npmEventsByType';
@import './views/charts2/npmRecentEvents';
@import './views/charts2/npmAppEventTable';
+@import './views/charts2/npmRelatedSessions';
+@import './views/charts2/npmTrafficLine';
 //@import '../chart';
--- a/src/assets/css/components/views/charts2/npmRecentEvents.scss
+++ b/src/assets/css/components/views/charts2/npmRecentEvents.scss
@@ -26,6 +26,20 @@
      tr td {
        padding: 7.5px 0;
      }
+      .el-table__empty-block .el-table__empty-text {
+        line-height: 25px;
+        .table-no-data {
+          .icon {
+            width: 30px;
+            height: 30px;
+          }
+          .table-no-data__title {
+            font-size: 14px;
+            color: #575757;
+            font-weight: 400;
+          }
+        }
+      }
    }
  }
  .data-recent-table {
--- a/src/assets/css/components/views/charts2/npmRelatedSessions.scss
+++ b/src/assets/css/components/views/charts2/npmRelatedSessions.scss
@@ -0,0 +1,86 @@
+.npm-sessions {
+  height: 100%;
+  width: 100%;
+  .npm-sessions-title {
+    font-size: 14px;
+    color: #353636;
+    font-weight: 500;
+  }
+  .npm-sessions-div {
+    display: flex;
+    margin: 10px 0 10px 0;
+    width: 100%;
+    height: 12px;
+    .npm-sessions-div-red {
+      height: 100%;
+      background: #E26154;
+      border: 1px solid #E26154;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      border-left: none;
+    }
+    .npm-sessions-div-green {
+      height: 100%;
+      background: #7E9F54;
+      border: 1px solid #7E9F54;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      border-right: none;
+    }
+  }
+
+  .npm-sessions-body {
+    display: flex;
+    justify-content: space-between;
+    .npm-sessions-body-left {
+      display: flex;
+      .npm-sessions-as-clients.right {
+        margin-right: 45px;
+      }
+      .npm-sessions-as-clients {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .npm-sessions-as-client {
+          display: flex;
+          align-items: center;
+          .npm-sessions-as-client-i18n {
+            ont-size: 12px;
+            color: #717171;
+            font-weight: 400;
+          }
+          .npm-sessions-as-client-percent {
+            font-size: 18px;
+            color: #353636;
+            font-weight: 700;
+          }
+          .npm-sessions-as-client-green,.npm-sessions-as-client-red {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+          }
+          .npm-sessions-as-client-green {
+            background: green;
+          }
+          .npm-sessions-as-client-red {
+            background: red;
+          }
+        }
+      }
+    }
+    .npm-sessions-body-right {
+      text-align: right;
+      .npm-sessions-Progress-number {
+        font-size: 14px;
+        color: #353636;
+        font-weight: 700;
+      }
+      .npm-sessions-Progress-unit {
+        font-size: 12px;
+        color: #717171;
+        font-weight: 400;
+      }
+    }
+
+  }
+}
--- a/src/assets/css/components/views/charts2/npmTrafficLine.scss
+++ b/src/assets/css/components/views/charts2/npmTrafficLine.scss
@@ -0,0 +1,32 @@
+.npm-traffic-line {
+  height: 100%;
+  width: 100%;
+  .npm-traffic-line-title {
+    font-size: 14px;
+    color: #353636;
+    font-weight: 600;
+    height: 32px;
+  }
+  .npm-traffic-line-body {
+    border: 1px solid #E2E5EC;
+    border-radius: 4px;
+    height: calc(100% - 32px);
+    width: 100%;
+    .chart-drawing {
+      height: 100%;
+      width: 100%;
+      .echarts-tooltip.echarts-tooltip-dark {
+        .cn-chart-tooltip {
+          display: flex;
+          justify-content: space-between;
+          .cn-chart-tooltip-value.cn-chart-tooltip__color {
+            font-size: 12px;
+            color: #353636;
+            line-height: 21px;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -158,7 +158,11 @@ export const api = {
      appHttpResponseDelay: '/interface/application/performance/overview/appHttpResponseDelay',
      appSslConDelay: '/interface/application/performance/overview/appSslConDelay',
      appTcpLostlenPercent: '/interface/application/performance/overview/appTcpLostlenPercent',
-      appPacketRetransPercent: '/interface/application/performance/overview/appPacketRetransPercent'
+      appPacketRetransPercent: '/interface/application/performance/overview/appPacketRetransPercent',
+      // 各维度下钻会话统计
+      relatedSessions: '/interface/application/performance/relatedSessions',
+      // 各维度下钻流量曲线图
+      trafficGraph: '/interface/application/performance/overview/drilldown/drilldown/dimension/trafficGraph'
    },
    location: {
      // 折线图
@@ -167,7 +171,7 @@ export const api = {
      httpResponseLatency: '/interface/application/performance/location/httpResponseLatency',
      sslHandshakeLatency: '/interface/application/performance/location/sslHandshakeLatency',
      packetsLoss: '/interface/application/performance/location/packetsLoss',
-      packetsRetrains: '/interface/application/performance/location/packetsRetrains',
+      packetsRetrains: '/interface/application/performance/location/packetsRetrains'
    },
    events: {
      list: '/interface/overview/event/list',
--- a/src/views/charts/charts/tools.js
+++ b/src/views/charts/charts/tools.js
@@ -484,3 +484,27 @@ export function stackedLineTooltipFormatter (params) {
  str += '</div>'
  return str
 }
+export function trafficLineTooltipFormatter (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
+}
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -138,7 +138,6 @@ export default {
      sizes: [3, 4, 6, 8, 9, 10],
      echartsLabelValue: '',
      echartsType: 'Bits/s',
-      echartsData: {},
      dynamicVariable: '',
      showMarkLine: true,
      isNoData: false
@@ -286,7 +285,7 @@ export default {
              }
            ])
          },
-          data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1])]),
+          data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number']),
          markLine: {
            silent: true,
            lineStyle: {
@@ -464,9 +463,6 @@ export default {
    }
  },
  mounted () {
-    if (this.chart) {
-      this.echartsData = _.cloneDeep(this.chart)
-    }
    this.timer = setTimeout(() => {
      this.init()
    }, 200)
--- a/src/views/charts2/charts/npm/NpmEventsByType.vue
+++ b/src/views/charts2/charts/npm/NpmEventsByType.vue
@@ -8,15 +8,15 @@
          <div class="npm-event-pie-legend-title">{{ $t('overall.type') }}</div>
          <template v-for="(legend, index) in chartData" :key="index">
            <div class="npm-event-pie-legend-type">
-              <div class="npm-event-pie-legend-type-icon" :class="iconClass(legend)"></div>
-              <div>{{legend.severity}}</div>
+              <div class="npm-event-pie-legend-type-icon" :class="legend.eventSeverity"></div>
+              <div class="npm-event-pie-legend-type-severity">{{legend.eventSeverity}}</div>
            </div>
          </template>
        </div>
        <div class="npm-event-pie-legend">
          <div class="npm-event-pie-legend-title">{{ $t('network.total') }}</div>
          <template v-for="(legend, index) in chartData" :key="index">
-            <div class="npm-event-pie-legend-total">{{legend.total}}</div>
+            <div class="npm-event-pie-legend-total">{{legend.count}}</div>
          </template>
        </div>
      </div>
@@ -26,11 +26,19 @@

 <script>
 import { shallowRef } from 'vue'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
 import * as echarts from 'echarts'
 import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
+import { getSecond } from '@/utils/date-util'

 export default {
  name: 'NpmEventsByType',
+  props: {
+    chart: Object,
+    timeFilter: Object,
+    type: String
+  },
  setup () {
    return {
      myChart: shallowRef(null)
@@ -38,47 +46,10 @@ export default {
  },
  data () {
    return {
-      chartData: [
-        { value: 1048, severity: 'Critical', total: 323 },
-        { value: 1315, severity: 'High', total: 178 },
-        { value: 5810, severity: 'Medium', total: 223 },
-        { value: 4184, severity: 'Low', total: 178 },
-        { value: 3100, severity: 'Info', total: 323 }
-      ],
+      chartData: [],
      timer: null
    }
  },
-  computed: {
-    iconClass () {
-      return function (row) {
-        let className
-        switch (row.severity) {
-          case ('Critical'): {
-            className = 'critical'
-            break
-          }
-          case ('High'): {
-            className = 'high'
-            break
-          }
-          case ('Info'): {
-            className = 'info'
-            break
-          }
-          case ('Medium'): {
-            className = 'medium'
-            break
-          }
-          case ('Low'): {
-            className = 'low'
-            break
-          }
-          default: break
-        }
-        return className
-      }
-    }
-  },
  methods: {
    init () {
      const _this = this
@@ -95,7 +66,7 @@ export default {
        formatter: function () {
          let num = 0
          _this.chartData.forEach(t => {
-            num += t.total
+            num += t.count
          })
          return num
        }
@@ -110,6 +81,37 @@ export default {
      })
      this.myChart.setOption(this.chartOption)
    },
+    eventsVyTypeData () {
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        type: 'severity'
+      }
+      get(api.npm.events.list, params).then(res => {
+        if (res.code === 200) {
+          res.data.result.forEach(t => {
+            if (t.eventSeverity === 'critical') {
+              t.index = 0
+            } else if (t.eventSeverity === 'high') {
+              t.index = 1
+            } else if (t.eventSeverity === 'info') {
+              t.index = 4
+            } else if (t.eventSeverity === 'low') {
+              t.index = 3
+            } else if (t.eventSeverity === 'medium') {
+              t.index = 2
+            }
+          })
+          this.chartData = res.data.result.sort((a, b) => { return a.index - b.index })
+          this.chartData = this.chartData.map(t => {
+            return {
+              ...t,
+              value: t.count
+            }
+          })
+        }
+      })
+    },
    resize () {
      this.myChart.resize()
    }
@@ -118,6 +120,7 @@ export default {
    this.timer = setTimeout(() => {
      this.init()
    }, 100)
+    this.eventsVyTypeData()
    window.addEventListener('resize', this.resize)
  },
  beforeUnmount () {
--- a/src/views/charts2/charts/npm/NpmEventsHeader.vue
+++ b/src/views/charts2/charts/npm/NpmEventsHeader.vue
@@ -19,11 +19,13 @@ export default {
  name: 'NpmEventsHeader',
  props: {
    chart: Object,
-    timeFilter: Object
+    timeFilter: Object,
+    // type: String
  },
  data () {
    return {
-      chartData: []
+      chartData: [],
+      type: 'severity'
    }
  },
  methods: {
@@ -31,11 +33,24 @@ export default {
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime),
-        type: 'severity'
+        type: this.type
      }
      get(api.npm.events.list, params).then(res => {
        if (res.code === 200) {
-          this.chartData = res.data.result
+          res.data.result.forEach(t => {
+            if (t.eventSeverity === 'critical') {
+              t.index = 0
+            } else if (t.eventSeverity === 'high') {
+              t.index = 1
+            } else if (t.eventSeverity === 'info') {
+              t.index = 4
+            } else if (t.eventSeverity === 'low') {
+              t.index = 3
+            } else if (t.eventSeverity === 'medium') {
+              t.index = 2
+            }
+          })
+          this.chartData = res.data.result.sort((a, b) => { return a.index - b.index })
        }
      })
    }
--- a/src/views/charts2/charts/npm/NpmRecentEvents.vue
+++ b/src/views/charts2/charts/npm/NpmRecentEvents.vue
@@ -30,6 +30,15 @@
          </template>
        </el-table-column>
      </template>
+      <template v-slot:empty>
+        <div class="table-no-data">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#cn-icon-a-allclear"></use>
+          </svg>
+          <div class="table-no-data__title">{{ $t('npm.thereNoEvents') }}</div>
+        </div>
+        <!-- <div v-else>&nbsp;</div>-->
+      </template>
    </el-table>
  </div>
 </template>
@@ -52,7 +61,8 @@ export default {
        { label: 'network.severity', prop: 'eventSeverity' },
        { label: 'network.entity', prop: 'eventKey' },
        { label: 'detections.eventType', prop: 'eventType' }
-      ]
+      ],
+      isNoData: true
    }
  },
  methods: {
@@ -60,7 +70,7 @@ export default {
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime),
-        limit: 1
+        limit: 8
      }
      get(api.npm.events.recentEvents, params).then(res => {
        if (res.code === 200) {
--- a/src/views/charts2/charts/npm/NpmTrafficLine.vue
+++ b/src/views/charts2/charts/npm/NpmTrafficLine.vue
@@ -1,9 +1,283 @@
 <template>
-  <div style="height: 100%;width: 100%;border: 1px solid lightgray"></div>
+  <div class="npm-traffic-line">
+    <div class="npm-traffic-line-title">{{$t('overall.traffic')}}</div>
+    <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>
+      </template>
+    </div>
+  </div>
 </template>

 <script>
+import * as echarts from 'echarts'
+import { trafficLineChartOption } from '@/views/charts2/charts/options/echartOption'
+import unitConvert from '@/utils/unit-convert'
+import { unitTypes, chartColor3 } from '@/utils/constants.js'
+import { shallowRef } from 'vue'
+import { trafficLineTooltipFormatter } from '@/views/charts/charts/tools'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+import { getSecond } from '@/utils/date-util'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
+import _ from 'lodash'
 export default {
-  name: 'NpmTrafficLine'
+  name: 'NpmTrafficLine',
+  props: {
+    chart: Object,
+    timeFilter: Object,
+    // type: String,
+    // side: String,
+    // ip: String
+  },
+  components: {
+    ChartNoData
+  },
+  setup () {
+    return {
+      myChart: shallowRef(null)
+    }
+  },
+  data () {
+    return {
+      unitConvert,
+      unitTypes,
+      isNoData: false,
+      ip: '192.68.44.54',
+      side: 'client',
+      type: 'ip',
+      mpackets: [
+        { name: 'network.total', show: true, positioning: 0, data: [], unitType: '' },
+        { name: 'network.inbound', show: true, positioning: 1, data: [], unitType: '' },
+        { name: 'network.outbound', show: true, positioning: 2, data: [], unitType: '' },
+        { 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: '' }
+      ],
+    }
+  },
+  methods: {
+    init () {
+      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
+      // }
+      // const result = npmTrafficLine
+      // result.forEach((t, i) => {
+      //   if (t.type === 'bytes') {
+      //     const mpackets = _.cloneDeep(this.mpackets)
+      //     mpackets[0].analysis = t.totalBitsRate.analysis
+      //     mpackets[1].analysis = t.inboundBitsRate.analysis
+      //     mpackets[2].analysis = t.outboundBitsRate.analysis
+      //     mpackets[3].analysis = t.internalBitsRate.analysis
+      //     mpackets[4].analysis = t.externalBitsRate.analysis
+      //     mpackets[5].analysis = t.other.analysis
+      //     mpackets[0].data = t.totalBitsRate.values ? t.totalBitsRate.values : []
+      //     mpackets[1].data = t.inboundBitsRate.values ? t.inboundBitsRate.values : []
+      //     mpackets[2].data = t.outboundBitsRate.values ? t.outboundBitsRate.values : []
+      //     mpackets[3].data = t.internalBitsRate.values ? t.internalBitsRate.values : []
+      //     mpackets[4].data = t.externalBitsRate.values ? t.externalBitsRate.values : []
+      //     mpackets[5].data = t.other.values ? t.other.values : []
+      //     this.mpackets = mpackets
+      //     this.echartsInit(this.mpackets)
+      //   } else if (t.type === 'packets') {
+      //     const mpackets = _.cloneDeep(this.mpackets)
+      //     mpackets[0].analysis = t.totalPacketsRate.analysis
+      //     mpackets[1].analysis = t.inboundPacketsRate.analysis
+      //     mpackets[2].analysis = t.outboundPacketsRate.analysis
+      //     mpackets[3].analysis = t.internalPacketsRate.analysis
+      //     mpackets[4].analysis = t.externalPacketsRate.analysis
+      //     mpackets[5].analysis = t.other.analysis
+      //     mpackets[0].data = t.totalPacketsRate.values ? t.totalPacketsRate.values : []
+      //     mpackets[1].data = t.inboundPacketsRate.values ? t.inboundPacketsRate.values : []
+      //     mpackets[2].data = t.outboundPacketsRate.values ? t.outboundPacketsRate.values : []
+      //     mpackets[3].data = t.internalPacketsRate.values ? t.internalPacketsRate.values : []
+      //     mpackets[4].data = t.externalPacketsRate.values ? t.externalPacketsRate.values : []
+      //     mpackets[5].data = t.other.values ? t.other.values : []
+      //     this.mpackets = mpackets
+      //     this.echartsInit(this.mpackets)
+      //   } else if (t.type === 'sessions') {
+      //     const mpackets = _.cloneDeep(this.mpackets)
+      //     mpackets[0].analysis = t.totalSessionsRate.analysis
+      //     mpackets[0].data = t.totalSessionsRate.values ? t.totalSessionsRate.values : []
+      //     this.mpackets = mpackets
+      //     this.echartsInit(this.mpackets)
+      //   }
+      // })
+      get(api.npm.overview.trafficGraph, params).then((res) => {
+        if (res.code === 200) {
+          // res.data.result.length = 0
+          if (res.data.result.length === 0) {
+            this.isNoData = true
+            return
+          }
+          res.data.result.forEach((t, i) => {
+            if (t.type === 'bytes') {
+              const mpackets = _.cloneDeep(this.mpackets)
+              mpackets[0].analysis = t.totalBitsRate.analysis
+              mpackets[1].analysis = t.inboundBitsRate.analysis
+              mpackets[2].analysis = t.outboundBitsRate.analysis
+              mpackets[3].analysis = t.internalBitsRate.analysis
+              mpackets[4].analysis = t.externalBitsRate.analysis
+              mpackets[5].analysis = t.other.analysis
+              mpackets[0].data = t.totalBitsRate.values ? t.totalBitsRate.values : []
+              mpackets[1].data = t.inboundBitsRate.values ? t.inboundBitsRate.values : []
+              mpackets[2].data = t.outboundBitsRate.values ? t.outboundBitsRate.values : []
+              mpackets[3].data = t.internalBitsRate.values ? t.internalBitsRate.values : []
+              mpackets[4].data = t.externalBitsRate.values ? t.externalBitsRate.values : []
+              mpackets[5].data = t.other.values ? t.other.values : []
+              mpackets.forEach(e => {
+                e.unitType = 'bps'
+                if (e.name !== 'network.total' && e.analysis.avg == 0) {
+                  e.show = false
+                }
+              })
+              this.mpackets = mpackets
+              this.echartsInit(this.mpackets)
+            } else if (t.type === 'packets') {
+              const mpackets = _.cloneDeep(this.mpackets)
+              mpackets[0].analysis = t.totalPacketsRate.analysis
+              mpackets[1].analysis = t.inboundPacketsRate.analysis
+              mpackets[2].analysis = t.outboundPacketsRate.analysis
+              mpackets[3].analysis = t.internalPacketsRate.analysis
+              mpackets[4].analysis = t.externalPacketsRate.analysis
+              mpackets[5].analysis = t.other.analysis
+              mpackets[0].data = t.totalPacketsRate.values ? t.totalPacketsRate.values : []
+              mpackets[1].data = t.inboundPacketsRate.values ? t.inboundPacketsRate.values : []
+              mpackets[2].data = t.outboundPacketsRate.values ? t.outboundPacketsRate.values : []
+              mpackets[3].data = t.internalPacketsRate.values ? t.internalPacketsRate.values : []
+              mpackets[4].data = t.externalPacketsRate.values ? t.externalPacketsRate.values : []
+              mpackets[5].data = t.other.values ? t.other.values : []
+              mpackets.forEach(e => {
+                e.unitType = 'packets/s'
+                if (e.name !== 'network.total' && e.analysis.avg == 0) {
+                  e.show = false
+                }
+              })
+              this.mpackets = mpackets
+              this.echartsInit(this.mpackets)
+            } else if (t.type === 'sessions') {
+              const mpackets = _.cloneDeep(this.mpackets)
+              mpackets[0].analysis = t.totalSessionsRate.analysis
+              mpackets[0].data = t.totalSessionsRate.values ? t.totalSessionsRate.values : []
+              mpackets.forEach((e, i) => {
+                if (i !== 0) {
+                  e.show = false
+                }
+                e.unitType = 'sessions/s'
+              })
+              this.mpackets = mpackets
+              this.echartsInit(this.mpackets)
+            }
+          })
+        }
+      })
+    },
+    echartsInit (echartsData) {
+      const dom = document.getElementById('chart')
+      this.myChart = echarts.init(dom)
+      this.chartOption = trafficLineChartOption
+      const chartOption = this.chartOption.series[0]
+      this.chartOption.series = echartsData.map((t, i) => {
+        return {
+          ...chartOption,
+          name: this.$t(t.name),
+          lineStyle: {
+            color: chartColor3[t.positioning],
+            width: 1
+          },
+          stack: this.$t(echartsData[0].name),
+          areaStyle: {
+            opacity: 0.1,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: chartColor3[t.positioning]
+              },
+              {
+                offset: 1,
+                color: chartColor3[t.positioning]
+              }
+            ])
+          },
+          data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), 'number'])
+        }
+      })
+      this.chartOption.tooltip.formatter = (params) => {
+        params.forEach(t => {
+          t.seriesName = this.$t(t.seriesName)
+        })
+        const str = trafficLineTooltipFormatter(params)
+        return str
+      }
+      this.myChart.on('legendselectchanged', this.handleLegendClick)
+      this.myChart.setOption(this.chartOption)
+    },
+    // 点击前，高亮legend个数
+    getSelectedNum (params) {
+      let selectedNum = 0
+      const legendItem = params.selected
+      for (const name in legendItem) {
+        if (name === params.name) {
+          if (!legendItem[name]) {
+            selectedNum = selectedNum + 1
+          }
+        } else {
+          if (legendItem[name]) {
+            selectedNum = selectedNum + 1
+          }
+        }
+      }
+      return selectedNum
+    },
+
+    // 自定义legend的点击事件:此方法只处理多条曲线的情况（单条曲线正常切换legend和曲线）
+    handleLegendClick (params) {
+      // legend点击事件
+      const legendNum = Object.keys(params.selected).length
+      const selectedNum = this.getSelectedNum(params)
+
+      const legendItem = params.selected
+      if (selectedNum === legendNum) { // 点击前：全部曲线高亮
+        for (const name in legendItem) {
+          if (name === params.name) {
+            legendItem[name] = true
+          } else {
+            legendItem[name] = false
+          }
+        }
+      } else if (selectedNum === 1 && !params.selected[params.name]) { // 点击前：多条曲线，且只有一条曲线高亮时
+        for (const name in legendItem) {
+          legendItem[name] = true
+        }
+      }
+      this.myChart.setOption({
+        legend: {
+          selected: legendItem
+        }
+      })
+    },
+    resize () {
+      this.myChart.resize()
+    }
+  },
+  mounted () {
+    this.timer = setTimeout(() => {
+      this.init()
+    }, 200)
+    window.addEventListener('resize', this.resize)
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer)
+  }
 }
 </script>
+
--- a/src/views/charts2/charts/npm/RelatedSessions.vue
+++ b/src/views/charts2/charts/npm/RelatedSessions.vue
@@ -1,9 +1,87 @@
 <template>
- <div style="height: 100%;width: 100%;border: 1px solid lightgray"></div>
+ <div class="npm-sessions">
+   <div class="npm-sessions-title">{{$t('npm.relatedSessions')}}</div>
+   <div class="npm-sessions-div">
+     <div class="npm-sessions-div-green" id="green" v-show="clientSessions > 0"></div>
+     <div class="npm-sessions-div-red" id="red" v-show="serverSessions > 0"></div>
+   </div>
+   <div class="npm-sessions-body">
+     <div class="npm-sessions-body-left">
+       <div class="npm-sessions-as-clients right">
+         <div class="npm-sessions-as-client">
+           <div class="npm-sessions-as-client-green"></div>&nbsp;
+           <div class="npm-sessions-as-client-i18n">{{$t('npm.asClient')}}</div>
+         </div>
+         <div class="npm-sessions-as-client-percent">{{sessionData.clientSessions}}</div>
+       </div>
+       <div class="npm-sessions-as-clients">
+         <div class="npm-sessions-as-client">
+           <div class="npm-sessions-as-client-red"></div>&nbsp;
+           <div class="npm-sessions-as-client-i18n">{{$t('npm.asClient')}}</div>
+         </div>
+         <div class="npm-sessions-as-client-percent">{{sessionData.serverSessions}}</div>
+       </div>
+     </div>
+     <div class="npm-sessions-body-right">
+       <span class="npm-sessions-Progress-number">{{unitConvert(sessionData.sessionsRate, unitTypes.number)[0]}}</span>&nbsp;<span class="npm-sessions-Progress-unit">{{unitConvert(sessionData.sessionsRate, unitTypes.number)[1]}}Sessions/s</span>
+     </div>
+   </div>
+ </div>
 </template>

 <script>
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+import { getSecond } from '@/utils/date-util'
+import unitConvert from '@/utils/unit-convert'
+import { unitTypes } from '@/utils/constants'
+
 export default {
-  name: 'RelatedSessions'
+  name: 'RelatedSessions',
+  props: {
+    chart: Object,
+    timeFilter: Object,
+    // ip: String
+  },
+  data () {
+    return {
+      sessionData: {},
+      unitConvert,
+      unitTypes,
+      clientSessions: 0,
+      serverSessions: 0,
+      ip: '116.178.236.216'
+    }
+  },
+  methods: {
+    relatedSessionsData () {
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        ip: this.ip
+      }
+      const divGreen = document.getElementById('green')
+      const divred = document.getElementById('red')
+      get(api.npm.overview.relatedSessions, params).then(res => {
+        if (res.code === 200) {
+          this.sessionData = res.data.result
+          this.clientSessions = this.sessionData.clientSessions / (this.sessionData.clientSessions + this.sessionData.serverSessions)
+          this.serverSessions = this.sessionData.serverSessions / (this.sessionData.clientSessions + this.sessionData.serverSessions)
+          this.sessionData.clientSessions = unitConvert(this.clientSessions, unitTypes.percent).join('')
+          this.sessionData.serverSessions = unitConvert(this.serverSessions, unitTypes.percent).join('')
+          if (this.clientSessions === 1) {
+            divGreen.style.borderRadius = 4 + 'px'
+          } else if (this.serverSessions === 1) {
+            divred.style.borderRadius = 4 + 'px'
+          }
+          divGreen.style.width = this.sessionData.clientSessions
+          divred.style.width = this.sessionData.serverSessions
+        }
+      })
+    }
+  },
+  mounted () {
+    this.relatedSessionsData()
+  }
 }
 </script>
--- a/src/views/charts2/charts/options/echartOption.js
+++ b/src/views/charts2/charts/options/echartOption.js
@@ -320,3 +320,74 @@ export const npmLineChartOption = {
    }
  ]
 }
+
+export const trafficLineChartOption = {
+  color: chartColor3,
+  tooltip: {
+    trigger: 'axis',
+    className: 'echarts-tooltip echarts-tooltip-dark'
+  },
+  legend: {
+    show: true,
+    left: '0.8%',
+    top: '4%',
+    padding: 2,
+    orient: 'horizontal',
+    icon: 'circle',
+    itemGap: 20,
+    itemWidth: 8,
+    textStyle: {
+      padding: [0, 0, 0, 2],
+      fontSize: 12,
+      color: '#717171',
+      fontWeight: 400,
+      fontFamily: 'NotoSansSChineseRegular'
+    }
+  },
+  grid: {
+    top: '21%',
+    left: '2%',
+    right: '1%',
+    bottom: 20,
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'time',
+      splitNumber: 12,
+      axisLabel: {
+        formatter: function (value) {
+          const data = new Date(value)
+          const h = data.getHours() > 9 ? data.getHours() : '0' + data.getHours()
+          const m = data.getMinutes() > 9 ? data.getMinutes() : '0' + data.getMinutes()
+          return h + ':' + m
+        }
+      }
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        formatter: function (value) {
+          return unitConvert(value, unitTypes.number).join('')
+        }
+      }
+    }
+  ],
+  series: [
+    {
+      type: 'line',
+      symbol: 'circle',
+      smooth: true,
+      showSymbol: false,
+      emphasis: {
+        focus: 'series'
+      },
+      data: []
+    }
+  ]
+}