From 29d89ee6e408d5f3d85d2b7508745cd5940b40d3 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Fri, 4 Nov 2022 10:31:10 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8E=BB=E9=99=A4=E6=97=A0=E7=94=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BEReference=20line=E9=97=AA=E5=8A=A8?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../charts/dnsInsight/DnsTrafficLine.vue      |   1 +
 .../charts/linkMonitor/LinkTrafficLine.vue    |  20 +-
 .../LinkTrafficDrillDownLine.vue              | 430 ------------------
 .../networkOverview/NetworkOverviewLine.vue   |   2 +
 4 files changed, 17 insertions(+), 436 deletions(-)
 delete mode 100644 src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownLine.vue

diff --git a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
index 473395b1..fc4080db 100644
--- a/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
+++ b/src/views/charts2/charts/dnsInsight/DnsTrafficLine.vue
@@ -227,6 +227,7 @@ export default {
                 if (this.lineTab === e.class) {
                   if (e.analysis.avg <= 0) {
                     this.lineTab = ''
+                    this.lineRefer = ''
                     this.init()
                   }
                 }
diff --git a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue
index ea561ad9..f8fcd275 100644
--- a/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue
@@ -112,7 +112,11 @@ export default {
           label: 'Packets/s'
         }
       ],
-      mpackets: [],
+      mpackets: [
+        { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
+        { analysis: {}, name: 'linkMonitor.ingress', class: 'ingress', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
+        { analysis: {}, name: 'linkMonitor.egress', class: 'egress', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
+      ],
       unitConvert,
       unitTypes,
       chartDateObject: [],
@@ -173,11 +177,13 @@ export default {
       get(api.linkMonitor.totalTrafficAnalysis, params).then((res) => {
         if (res.code === 200) {
           this.isNoData = res.data.result.length === 0
-          this.mpackets = [
-            { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
-            { analysis: {}, name: 'linkMonitor.ingress', class: 'ingress', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
-            { analysis: {}, name: 'linkMonitor.egress', class: 'egress', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
-          ]
+          if (this.isNoData) {
+            this.mpackets = [
+              { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
+              { analysis: {}, name: 'linkMonitor.ingress', class: 'ingress', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
+              { analysis: {}, name: 'linkMonitor.egress', class: 'egress', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
+            ]
+          }
           res.data.result.forEach((t, i) => {
             if (t.type === 'bytes' && val === 'Bits/s') {
               const mpackets = _.cloneDeep(this.mpackets)
@@ -202,6 +208,7 @@ export default {
                 if (this.lineTab === e.class) {
                   if (e.analysis.avg <= 0) {
                     this.lineTab = ''
+                    this.lineRefer = ''
                     this.init()
                   }
                 }
@@ -242,6 +249,7 @@ export default {
                 if (this.lineTab === e.class) {
                   if (e.analysis.avg <= 0) {
                     this.lineTab = ''
+                    this.lineRefer = ''
                     this.init()
                   }
                 }
diff --git a/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownLine.vue b/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownLine.vue
deleted file mode 100644
index e05c4c98..00000000
--- a/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownLine.vue
+++ /dev/null
@@ -1,430 +0,0 @@
-<template>
-  <div class="line network link-traffic">
-    <loading :loading="loading"></loading>
-    <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>
-    </div>
-    <div style="height: calc(100% - 74px); position: relative">
-      <chart-no-data v-if="isNoData"></chart-no-data>
-      <div class="chart-drawing" v-show="showMarkLine && !isNoData" id="linkTrafficLineChart"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import * as echarts from 'echarts'
-import { linkTrafficLineChartOption } 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'
-import Loading from '@/components/common/Loading'
-export default {
-  name: 'linkTrafficDrillDownLine',
-  components: {
-    ChartNoData,
-    Loading
-  },
-  setup () {
-    const { query } = useRoute()
-    const lineMetric = ref(query.lineMetric || 'Bits/s')
-    const lineTab = ref(query.lineTab || '')
-    const queryCondition = ref(query.queryCondition || '')
-    return {
-      lineMetric,
-      lineTab,
-      queryCondition,
-      myChart: shallowRef(null)
-    }
-  },
-  props: {
-    linkTrafficShow: Boolean,
-    linkTrafficData: Array
-  },
-  mixins: [chartMixin],
-  data () {
-    return {
-      options1: [
-        {
-          value: 'Bits/s',
-          label: 'Bits/s'
-        },
-        {
-          value: 'Packets/s',
-          label: 'Packets/s'
-        }
-      ],
-      mpackets: [
-        { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
-        { analysis: {}, name: 'linkMonitor.ingress', class: 'ingress', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
-        { analysis: {}, name: 'linkMonitor.egress', class: 'egress', 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,
-      loading: false
-    }
-  },
-  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)
-    },
-    timeFilter: {
-      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)
-      }
-      if (this.queryCondition) {
-        const condition = this.queryCondition.toLowerCase().split(' or ')
-        if (condition.length > 1) {
-          params.egressParam = condition.find(c => c.indexOf('common_egress_link_id') > -1 || c.indexOf('egress_link_direction') > -1)
-          params.ingressParam = condition.find(c => c.indexOf('common_ingress_link_id') > -1 || c.indexOf('ingress_link_direction') > -1)
-        }
-      }
-      this.loading = true
-      get(api.linkMonitor.totalTrafficAnalysis, params).then((res) => {
-        if (res.code === 200) {
-          this.isNoData = res.data.result.length === 0
-          if (this.isNoData) {
-            this.mpackets = [
-              { analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
-              { analysis: {}, name: 'linkMonitor.ingress', class: 'ingress', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
-              { analysis: {}, name: 'linkMonitor.egress', class: 'egress', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
-            ]
-          }
-          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.ingressBitsRate.analysis
-              mpackets[2].analysis = t.egressBitsRate.analysis
-              mpackets[0].data = t.totalBitsRate.values ? t.totalBitsRate.values : []
-              mpackets[1].data = t.ingressBitsRate.values ? t.ingressBitsRate.values : []
-              mpackets[2].data = t.egressBitsRate.values ? t.egressBitsRate.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.legendSelectChange(e, 'index')
-                  }
-                }
-                if (this.lineTab === e.class) {
-                  if (e.analysis.avg <= 0) {
-                    this.lineTab = ''
-                    this.init()
-                  }
-                }
-              })
-              this.mpackets = mpackets
-              this.$nextTick(() => {
-                this.echartsInit(this.mpackets)
-              })
-            } else if (t.type === 'packets' && val === 'Packets/s') {
-              const mpackets = _.cloneDeep(this.mpackets)
-              mpackets[0].analysis = t.totalPacketsRate.analysis
-              mpackets[1].analysis = t.ingressPacketsRate.analysis
-              mpackets[2].analysis = t.egressPacketsRate.analysis
-              mpackets[0].data = t.totalPacketsRate.values ? t.totalPacketsRate.values : []
-              mpackets[1].data = t.ingressPacketsRate.values ? t.ingressPacketsRate.values : []
-              mpackets[2].data = t.egressPacketsRate.values ? t.egressPacketsRate.values : []
-              mpackets.forEach(e => {
-                e.unitType = 'packets/s'
-                if (e.name !== 'network.total' && e.analysis.avg == 0) {
-                  e.show = false
-                } else {
-                  e.show = true
-                  if (!active && !show) {
-                    this.legendSelectChange(e, 'index')
-                  }
-                }
-                if (this.lineTab === e.class) {
-                  if (e.analysis.avg <= 0) {
-                    this.lineTab = ''
-                    this.init()
-                  }
-                }
-              })
-              this.mpackets = mpackets
-              this.$nextTick(() => {
-                this.echartsInit(this.mpackets)
-              })
-            }
-          })
-        }
-      }).catch(e => {
-        console.error(e)
-        this.isNoData = true
-      }).finally(() => {
-        this.loading = false
-      })
-    },
-    echartsInit (echartsData) {
-      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('linkTrafficLineChart')
-      !this.myChart && (this.myChart = echarts.init(dom))
-      this.chartOption = linkTrafficLineChartOption
-      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']),
-        }
-      })
-      this.chartOption.tooltip.formatter = (params) => {
-        params.forEach(t => {
-          t.seriesName = this.$t(t.seriesName)
-          this.mpackets.forEach(e => {
-            if (this.$t(e.name) === t.seriesName) {
-              t.borderColor = chartColor3[e.positioning]
-            }
-          })
-        })
-        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)
-    },
-    symbolSizeSortChange (index, time) {
-      const dataIntegrationArray = []
-      if (linkTrafficLineChartOption.series[0]) {
-        const totalData = linkTrafficLineChartOption.series[0].data.find(t => t[0] === time) // [time, value]
-        if (totalData) {
-          dataIntegrationArray.push(totalData)
-          totalData[2] = 0
-        }
-      }
-      if (linkTrafficLineChartOption.series[1]) {
-        const ingressData = linkTrafficLineChartOption.series[1].data.find(t => t[0] === time)
-        if (ingressData) {
-          dataIntegrationArray.push(ingressData)
-          ingressData[2] = 1
-        }
-      }
-      if (linkTrafficLineChartOption.series[2]) {
-        const egressData = linkTrafficLineChartOption.series[2].data.find(t => t[0] === time)
-        if (egressData) {
-          dataIntegrationArray.push(egressData)
-          egressData[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 9923b977..1a073290 100644
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
@@ -220,6 +220,7 @@ export default {
                 if (this.lineTab === e.class) {
                   if (e.analysis.avg <= 0) {
                     this.lineTab = ''
+                    this.lineRefer = ''
                     this.init()
                   }
                 }
@@ -267,6 +268,7 @@ export default {
                 if (this.lineTab === e.class) {
                   if (e.analysis.avg <= 0) {
                     this.lineTab = ''
+                    this.lineRefer = ''
                     this.init()
                   }
                 }