From 5f897e496e471b03e111382d3f2100466a20bb00 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Tue, 20 Sep 2022 16:49:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20dns=E6=95=B4=E4=BD=93=E6=B5=81=E9=87=8F?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E6=8A=98=E7=BA=BF=E5=9B=BE=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../charts/dnsInsight/DnsTrafficLine.vue      | 475 +++++++++++++++++-
 .../networkOverview/NetworkOverviewLine.vue   |  12 +
 2 files changed, 485 insertions(+), 2 deletions(-)

diff --git a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
index 0acbe291..986dc4a8 100644
--- a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
+++ b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
@@ -1,9 +1,480 @@
 <template>
-呵呵
+  <div class="line network dns-traffic-line">
+    <chart-no-data v-if="isNoData"></chart-no-data>
+    <div class="line-header">
+      <div class="line-header-left">
+        <div class="line-value-active" v-if="lineTab"></div>
+        <div class="line-value">
+          <div class="line-value-mpackets"
+               v-show="item.show"
+               :class=" {'is-active': lineTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
+               v-for="(item, index) in mpackets"
+               :key="index"
+               @mouseenter="mouseenter(item)"
+               @mouseleave="mouseleave(item)"
+               @click="activeChange(item, index)">
+            <div class="line-value-mpackets-name">
+              <div :class="item.class"></div>
+              <div class="mpackets-name">{{$t(item.name)}}</div>
+            </div>
+            <div class="line-value-unit">
+              <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
+              <span class="line-value-unit-number2">
+                <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="line-select line-header-right">
+        <div class="line-select-metric">
+          <span>{{$t('network.metric')}}:</span>
+          <div class="line-select__operation">
+            <el-select
+                size="mini"
+                v-model="lineMetric"
+                popper-class="common-select"
+                :popper-append-to-body="false"
+                @change="metricSelectChange"
+            >
+              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="line-select-reference-line">
+          <span>{{$t('network.referenceLine')}}:</span>
+          <div class="line-select__operation">
+            <el-select
+                size="mini"
+                v-model="lineRefer"
+                :disabled="!lineTab"
+                popper-class="common-select"
+                :popper-append-to-body="false"
+                @change="referenceSelectChange"
+            >
+              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="chart-drawing" v-show="showMarkLine" id="dnsLineChart"></div>
+  </div>
 </template>
 
 <script>
+import * as echarts from 'echarts'
+import { stackedLineChartOption } from '@/views/charts2/charts/options/echartOption'
+import unitConvert from '@/utils/unit-convert'
+import { unitTypes, chartColor3, chartColor4 } from '@/utils/constants.js'
+import { ref, shallowRef } from 'vue'
+import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
+import _ from 'lodash'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+import { getSecond } from '@/utils/date-util'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
+import chartMixin from '@/views/charts2/chart-mixin'
+import { useRoute } from 'vue-router'
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
 export default {
-  name: 'DnsTrafficLine'
+  name: 'DnsTrafficLine',
+  components: {
+    ChartNoData
+  },
+  setup () {
+    const { query } = useRoute()
+    const lineMetric = ref(query.lineMetric || 'Queries/s')
+    const lineRefer = ref(query.lineRefer || 'Average')
+    const lineTab = ref(query.lineTab || '')
+    return {
+      lineMetric,
+      lineRefer,
+      lineTab,
+      myChart: shallowRef(null)
+    }
+  },
+  mixins: [chartMixin],
+  data () {
+    return {
+      options1: [
+        {
+          value: 'Bits/s',
+          label: 'Bits/s'
+        },
+        {
+          value: 'Queries/s',
+          label: 'Queries/s'
+        }
+      ],
+      options2: [
+        {
+          value: 'Average',
+          label: 'Average'
+        },
+        {
+          value: '95th Percentile',
+          label: '95th Percentile'
+        },
+        {
+          value: 'Maximum',
+          label: 'Maximum'
+        }
+      ],
+      mpackets: [
+        { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
+        { analysis: {}, name: 'network.inbound', class: 'inbound', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
+        { analysis: {}, name: 'network.outbound', class: 'outbound', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
+      ],
+      unitConvert,
+      unitTypes,
+      chartDateObject: [],
+      timer: null,
+      mousemoveCursor: '',
+      leftOffset: 0,
+      sizes: [3, 4, 6, 8, 9, 10],
+      dynamicVariable: '',
+      showMarkLine: true
+    }
+  },
+  watch: {
+    lineTab (n) {
+      this.$nextTick(() => {
+        this.handleActiveBar(n)
+        const { query } = this.$route
+        const newUrl = urlParamsHandler(window.location.href, query, {
+          lineTab: n
+        })
+        overwriteUrl(newUrl)
+      })
+    },
+    lineMetric (n) {
+      const { query } = this.$route
+      const newUrl = urlParamsHandler(window.location.href, query, {
+        lineMetric: n
+      })
+      overwriteUrl(newUrl)
+    },
+    lineRefer (n) {
+      const { query } = this.$route
+      const newUrl = urlParamsHandler(window.location.href, query, {
+        lineRefer: n
+      })
+      overwriteUrl(newUrl)
+    },
+    timeFilter: {
+      deep: true,
+      handler (n) {
+        if (this.lineTab) {
+          this.init(this.lineMetric, this.showMarkLine, 'active')
+        } else {
+          this.init()
+        }
+      }
+    }
+  },
+  methods: {
+    init (val, show, active) {
+      if (!val) {
+        val = this.lineMetric
+      }
+      const params = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime)
+      }
+      const condition = this.$store.getters.getQueryCondition
+      if (condition) {
+        params.q = condition
+      }
+      this.toggleLoading(true)
+      get(api.dnsInsight.totalTrafficAnalysis, params).then((res) => {
+        if (res.code === 200) {
+          this.isNoData = res.data.result.length === 0
+          res.data.result.forEach((t, i) => {
+            if (t.type === 'bytes' && val === 'Bits/s') {
+              const mpackets = _.cloneDeep(this.mpackets)
+              mpackets[0].analysis = t.totalBitsRate.analysis
+              mpackets[1].analysis = t.inboundBitsRate.analysis
+              mpackets[2].analysis = t.outboundBitsRate.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.forEach(e => {
+                e.unitType = 'bps'
+                if (e.name !== 'network.total' && e.analysis.avg == 0) {
+                  e.show = false
+                } else {
+                  e.show = true
+                  if (!active && show !== this.lineRefer) {
+                    this.legendSelectChange(e, 'index')
+                  }
+                }
+                if (this.lineTab === e.class) {
+                  if (e.analysis.avg < 1) {
+                    this.lineTab = ''
+                    this.init()
+                  }
+                }
+              })
+              this.mpackets = mpackets
+              this.$nextTick(() => {
+                this.echartsInit(this.mpackets, show)
+              })
+            } else if (t.type === 'queries' && val === 'Queries/s') {
+              const mpackets = _.cloneDeep(this.mpackets)
+              mpackets[0].analysis = t.totalQueryRate.analysis
+              mpackets[0].data = t.totalQueryRate.values ? t.totalQueryRate.values : []
+              mpackets.forEach((e, i) => {
+                if (i !== 0) {
+                  e.show = false
+                }
+                e.unitType = 'queries/s'
+                if (show !== this.lineRefer) {
+                  this.legendSelectChange(e, 0)
+                }
+              })
+              this.mpackets = mpackets
+              this.$nextTick(() => {
+                this.echartsInit(this.mpackets, show)
+              })
+            }
+          })
+        }
+      }).catch(e => {
+        console.error(e)
+        this.isNoData = true
+      }).finally(() => {
+        this.toggleLoading(false)
+      })
+    },
+    echartsInit (echartsData, show) {
+      if (this.lineTab) {
+        this.handleActiveBar()
+        echartsData = echartsData.filter(t => t.show === true && t.invertTab === false)
+      } else {
+        echartsData = echartsData.filter(t => t.show === true)
+      }
+      const _this = this
+      const dom = document.getElementById('dnsLineChart')
+      !this.myChart && (this.myChart = echarts.init(dom))
+      this.chartOption = stackedLineChartOption
+      const chartOption = this.chartOption.series[0]
+      this.chartOption.series = echartsData.map((t, i) => {
+        return {
+          ...chartOption,
+          name: t.name,
+          lineStyle: {
+            color: chartColor3[t.positioning],
+            width: 1
+          },
+          stack: t.name !== 'network.total' ? 'network.total' : '',
+          symbolSize: function (value, params) {
+            return _this.symbolSizeSortChange(i, value[0])
+          },
+          itemStyle: {
+            emphasis: {
+              borderColor: chartColor4[t.positioning],
+              borderWidth: 2,
+              shadowColor: chartColor4[t.positioning],
+              shadowBlur: this.sizes[t.positioning] + 2
+            }
+          },
+          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']),
+          markLine: {
+            silent: true,
+            lineStyle: {
+              color: '#B4B1A8'
+            },
+            symbol: 'none',
+            label: {
+              formatter (params) {
+                const arr = unitConvert(params.value, unitTypes.number).join('')
+                return _this.lineRefer + '(' + arr + echartsData[0].unitType + ')'
+              },
+              position: 'insideStartTop',
+              color: '#717171',
+              fontFamily: 'NotoSansSChineseRegular'
+            }
+          }
+        }
+      })
+      if (!show) {
+        this.chartOption.series.forEach((t, i) => {
+          t.markLine.label.show = false
+          t.markLine = []
+        })
+      }
+      if (this.lineRefer === 'Average' && show) {
+        this.chartOption.series.forEach((t, i) => {
+          t.markLine.label.show = true
+          t.markLine.data = [
+            {
+              yAxis: echartsData[i].analysis.avg
+            }
+          ]
+        })
+      } else if (this.lineRefer === '95th Percentile' && show) {
+        this.chartOption.series.forEach((t, i) => {
+          t.markLine.label.show = true
+          t.markLine.data = [
+            { yAxis: echartsData[i].analysis.p95 }
+          ]
+        })
+      } else if (this.lineRefer === 'Maximum' && show) {
+        this.chartOption.series.forEach((t, i) => {
+          t.markLine.label.show = true
+          t.markLine.data = [
+            { yAxis: echartsData[i].analysis.max }
+          ]
+        })
+      }
+      this.chartOption.tooltip.formatter = (params) => {
+        params.forEach(t => {
+          t.seriesName = this.$t(t.seriesName)
+        })
+        const str = stackedLineTooltipFormatter(params)
+        return str
+      }
+      this.showMarkLine = true
+      this.myChart.setOption(this.chartOption)
+    },
+    activeChange (item, index) {
+      this.lineTab = item.class
+      this.legendSelectChange(item, index, 'active')
+      this.showMarkLine = !item.invertTab
+      this.init(this.lineMetric, this.showMarkLine, 'active')
+    },
+    mouseenter (item) {
+      this.mousemoveCursor = item.class
+      this.handleActiveBar(item.class)
+    },
+    mouseleave () {
+      this.mousemoveCursor = ''
+    },
+    dispatchLegendSelectAction (name) {
+      this.myChart && this.myChart.dispatchAction({
+        type: 'legendSelect',
+        name: name
+      })
+    },
+    dispatchLegendUnSelectAction (name) {
+      this.myChart && this.myChart.dispatchAction({
+        type: 'legendUnSelect',
+        name: name
+      })
+    },
+    legendSelectChange (item, index, val) {
+      if (index === 'index') {
+        this.dispatchLegendSelectAction(item.name)
+      } else if (this.mpackets[index] && this.mpackets[index].name === item.name) {
+        this.dispatchLegendSelectAction(item.name)
+        this.mpackets.forEach((t) => {
+          if (t.name !== item.name) {
+            this.dispatchLegendUnSelectAction(t.name)
+          }
+        })
+      }
+      if (val === 'active') {
+        this.mpackets.forEach(t => {
+          if (item.name === t.name) {
+            t.invertTab = !t.invertTab
+          } else {
+            t.invertTab = true
+          }
+          if (t.invertTab && item.name === t.name) {
+            if (this.lineTab) {
+              this.lineTab = ''
+            } else {
+              this.lineTab = t.class
+            }
+            this.mpackets.forEach((e) => {
+              this.dispatchLegendSelectAction(e.name)
+            })
+          }
+        })
+      }
+    },
+    handleActiveBar (value) {
+      if (document.querySelector('.network .line-value-mpackets.is-active')) {
+        const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-mpackets.is-active')
+        const activeBar = document.querySelector('.network .line-value-active')
+        activeBar.style.cssText += `width: ${clientWidth}px; left: ${offsetLeft + this.leftOffset + clientLeft}px;`
+      }
+    },
+    resize () {
+      this.myChart.resize()
+    },
+    metricSelectChange (val) {
+      this.lineMetric = val
+      this.lineTab = ''
+      this.handleActiveBar()
+      this.showMarkLine = !this.showMarkLine
+      this.mpackets.forEach((e, i) => {
+        if (!e.invertTab) {
+          e.invertTab = true
+        }
+      })
+      this.init(val, this.showMarkLine)
+    },
+    referenceSelectChange (val) {
+      this.lineRefer = val
+      this.echartsInit(this.mpackets, this.showMarkLine)
+    },
+    symbolSizeSortChange (index, time) {
+      const dataIntegrationArray = []
+      if (stackedLineChartOption.series[0]) {
+        const totalData = stackedLineChartOption.series[0].data.find(t => t[0] === time) // [time, value]
+        if (totalData) {
+          dataIntegrationArray.push(totalData)
+          totalData[2] = 0
+        }
+      }
+      if (stackedLineChartOption.series[1]) {
+        const inboundData = stackedLineChartOption.series[1].data.find(t => t[0] === time)
+        if (inboundData) {
+          dataIntegrationArray.push(inboundData)
+          inboundData[2] = 1
+        }
+      }
+      if (stackedLineChartOption.series[2]) {
+        const outboundData = stackedLineChartOption.series[2].data.find(t => t[0] === time)
+        if (outboundData) {
+          dataIntegrationArray.push(outboundData)
+          outboundData[2] = 2
+        }
+      }
+      dataIntegrationArray.sort((a, b) => { return a[1] - b[1] })
+      const sortIndex = dataIntegrationArray.findIndex(a => a[2] === index)
+      return this.sizes[sortIndex]
+    }
+  },
+  mounted () {
+    this.timer = setTimeout(() => {
+      if (this.lineTab) {
+        const data = this.mpackets.find(t => t.class === this.lineTab)
+        this.activeChange(data, data.positioning)
+      } else {
+        this.init()
+      }
+    }, 200)
+    window.addEventListener('resize', this.resize)
+  },
+  beforeUnmount () {
+    clearTimeout(this.timer)
+    window.removeEventListener('resize', this.resize)
+  }
 }
 </script>
diff --git a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
index f031b652..7be8e2ea 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -225,6 +225,12 @@ export default {
                     this.legendSelectChange(e, 'index')
                   }
                 }
+                if (this.lineTab === e.class) {
+                  if (e.analysis.avg < 1) {
+                    this.lineTab = ''
+                    this.init()
+                  }
+                }
               })
               this.mpackets = mpackets
               this.$nextTick(() => {
@@ -254,6 +260,12 @@ export default {
                     this.legendSelectChange(e, 'index')
                   }
                 }
+                if (this.lineTab === e.class) {
+                  if (e.analysis.avg < 1) {
+                    this.lineTab = ''
+                    this.init()
+                  }
+                }
               })
               this.mpackets = mpackets
               this.$nextTick(() => {