fix: networkoverview的metric提至顶部

2022-11-01 16:46:11 +08:00
parent 45de9c8107
commit da03a3658c
7 changed files with 100 additions and 68 deletions
--- a/src/assets/css/components/components/common/TimeRange/date-time-range.scss
+++ b/src/assets/css/components/components/common/TimeRange/date-time-range.scss
@@ -71,6 +71,7 @@
    white-space: nowrap;
    display: inline-block;
    margin: 0 5px;
+    color: #353636;
    .cn-icon-Data {
      color: #575757;
    }
--- a/src/assets/css/components/views/charts2/panel.scss
+++ b/src/assets/css/components/views/charts2/panel.scss
@@ -31,7 +31,6 @@
          background: #749F4D;
        }
        height:24px;
-        font-family: NotoSansHans-Medium;
        font-size: 12px;
        color: #353636;
        font-weight: 500;
@@ -46,8 +45,26 @@
        justify-content: center;
      }
    }
-    .panel__time {
+    .panel__tools {
      display: flex;
+
+      &>.el-select {
+        width: 162px;
+        margin-right: 10px;
+
+        .select-prefix {
+          font-size: 14px;
+          color: #999;
+          padding: 0 6px 0 3px;
+        }
+        .el-input__inner {
+          font-size: 14px;
+          color: #353636;
+        }
+      }
+      .panel__time {
+        display: flex;
+      }
    }
  }
  .chart-list {
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -186,6 +186,21 @@ export const networkOverviewTabs = [
  'network.protocolPorts'
 ] */

+export const metricOptions = [
+  {
+    value: 'Bits/s',
+    label: 'Bits/s'
+  },
+  {
+    value: 'Packets/s',
+    label: 'Packets/s'
+  },
+  {
+    value: 'Sessions/s',
+    label: 'Sessions/s'
+  }
+]
+
 export const operationType = {
  mainMenu: 0, // 菜单
  secondMenu: 2, // 二级菜单
--- a/src/views/charts2/Chart.vue
+++ b/src/views/charts2/Chart.vue
@@ -4,6 +4,7 @@
    <network-overview-line
        v-if="chart.type === typeMapping.networkOverview.line"
        :chart="chart"
+        :metric="metric"
        :time-filter="timeFilter"
        ref="networkLine"
        @toggleLoading="toggleLoading"
@@ -23,6 +24,7 @@
    <network-overview-tabs
         v-else-if="chart.type === typeMapping.networkOverview.table"
         :time-filter="timeFilter"
+         :metric="metric"
         :chart="chart"
         :ref="`tab${chart.id}`"
         @toggleLoading="toggleLoading"
@@ -38,6 +40,7 @@
    <network-overview-apps
        v-else-if="chart.type === typeMapping.networkOverview.appList"
        :chart="chart"
+        :metric="metric"
        :time-filter="timeFilter"
        @toggleLoading="toggleLoading"
    >
@@ -188,8 +191,7 @@ import DnsEventChart from '@/views/charts2/charts/dnsInsight/DnsEventChart'
 import DnsRecentEvents from '@/views/charts2/charts/dnsInsight/DnsRecentEvents'
 import DnsTrafficLine from '@/views/charts2/charts/dnsInsight/DnsTrafficLine'

-import { get } from '@/utils/http'
-import { getNowTime, getSecond } from '@/utils/date-util'
+import { getNowTime } from '@/utils/date-util'
 import { ref } from 'vue'
 import LinkDirectionGrid from '@/views/charts2/charts/linkMonitor/LinkDirectionGrid'
 export default {
@@ -224,6 +226,7 @@ export default {
  },
  props: {
    chart: Object,
+    metric: String,
    timeFilter: Object,
    extraParams: Object
  },
--- a/src/views/charts2/ChartList.vue
+++ b/src/views/charts2/ChartList.vue
@@ -21,6 +21,7 @@
                 :key="item.i">
        <chart
            :time-filter="timeFilter"
+            :metric="metric"
            :extra-params="extraParams"
            :id="item.id"
            ref="chartGrid"
@@ -44,6 +45,7 @@ export default {
  name: 'ChartList',
  props: {
    timeFilter: Object,
+    metric: String,
    panelType: Number,
    chartList: Array,
    panelLock: Boolean,
--- a/src/views/charts2/Panel.vue
+++ b/src/views/charts2/Panel.vue
@@ -9,25 +9,40 @@
          Score:{{score}}
        </div>
      </div>
-      <div class="panel__time">
-        <date-time-range
-            class="date-time-range"
-            :start-time="timeFilter.startTime"
-            :end-time="timeFilter.endTime"
-            :date-range="timeFilter.dateRangeValue"
-            ref="dateTimeRange"
-            @change="reload"
-        />
-        <time-refresh
-            class="date-time-range"
-            @change="timeRefreshChange"
-            :end-time="timeFilter.endTime"
-        />
+      <div class="panel__tools">
+        <el-select
+            size="mini"
+            v-model="metric"
+            placeholder=""
+            :popper-append-to-body="false"
+            @change="metricChange"
+        >
+          <template #prefix>
+            <span class="select-prefix">Metric:</span>
+          </template>
+          <el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+        <div class="panel__time">
+          <date-time-range
+              class="date-time-range"
+              :start-time="timeFilter.startTime"
+              :end-time="timeFilter.endTime"
+              :date-range="timeFilter.dateRangeValue"
+              ref="dateTimeRange"
+              @change="reload"
+          />
+          <time-refresh
+              class="date-time-range"
+              @change="timeRefreshChange"
+              :end-time="timeFilter.endTime"
+          />
+        </div>
      </div>
    </div>
    <chart-list
        ref="chartList"
        :time-filter="timeFilter"
+        :metric="metric"
        :chart-list="chartList"
        :panel-type="panelType"
        :panel-lock="panelLock"
@@ -43,7 +58,8 @@ import { ref } from 'vue'
 import {
  panelTypeAndRouteMapping,
  curTabState,
-  drillDownPanelTypeMapping
+  drillDownPanelTypeMapping,
+  metricOptions
 } from '@/utils/constants'
 import { getPanelList, getChartList } from '@/utils/api'
 import { getNowTime, getSecond } from '@/utils/date-util'
@@ -63,6 +79,7 @@ export default {
  },
  data () {
    return {
+      metricOptions,
      chartList: [], // 普通panel的chart
      panelLock: true,
      extraParams: {},
@@ -213,11 +230,14 @@ export default {
    // npm是否展示分数
    const showScorePanel = [drillDownPanelTypeMapping.npmOverviewIp, drillDownPanelTypeMapping.npmOverviewDomain, drillDownPanelTypeMapping.npmOverviewApp, drillDownPanelTypeMapping.npmOverviewCommon, drillDownPanelTypeMapping.npmThirdMenu]
    const showScore = showScorePanel.indexOf(panelType) > -1
+
+    const metric = ref(query.metric || 'Bits/s')
    return {
      panelType,
      panel,
      timeFilter,
-      showScore
+      showScore,
+      metric
    }
  },
  methods: {
@@ -280,6 +300,13 @@ export default {
      } else {
        return this.$route.query[param] ? this.$route.query[param] : defaultValue
      }
+    },
+    metricChange (value) {
+      const { query } = this.$route
+      const newUrl = urlParamsHandler(window.location.href, query, {
+        metric: value
+      })
+      overwriteUrl(newUrl)
    }
  }
 }
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
@@ -2,21 +2,6 @@
  <div class="network-overview-apps">
    <div class="network-overview-apps-header">
      <div class="network-overview-apps-title">{{$t('networkOverview.appType.providerAndApp')}}</div>
-      <div class="line-select-metric">
-        <span>{{$t('network.metric')}}:</span>
-        <div class="line-select__operation">
-          <el-select
-              size="mini"
-              v-model="metricFilter"
-              placeholder=""
-              popper-class="common-select"
-              :popper-append-to-body="false"
-              @change="metricChange"
-          >
-            <el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
-          </el-select>
-        </div>
-      </div>
    </div>

    <div class="app-cards">
@@ -53,7 +38,7 @@
            </div>
            <div class="app-card__body-previous">
              <div>Total</div>
-              <div v-if="metricFilter === 'Bits/s'">{{unitConvert(app.total, unitTypes.byte).join(' ')}}</div>
+              <div v-if="metric === 'Bits/s'">{{unitConvert(app.total, unitTypes.byte).join(' ')}}</div>
              <div v-else>{{unitConvert(app.total, unitTypes.number).join(' ')}}</div>
            </div>
          </div>
@@ -132,7 +117,7 @@ import unitConvert from '@/utils/unit-convert'
 import { storageKey, unitTypes, networkTable, operationType, curTabState } from '@/utils/constants'
 import * as echarts from 'echarts'
 import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
-import { ref, shallowRef } from 'vue'
+import { shallowRef } from 'vue'
 import { get, put } from '@/utils/http'
 import { api } from '@/utils/api'
 import _ from 'lodash'
@@ -142,7 +127,6 @@ import loading from '@/components/common/Loading'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import { appStackedLineTooltipFormatter } from '@/views/charts/charts/tools'
 import chartMixin from '@/views/charts2/chart-mixin'
-import { useRoute } from 'vue-router'

 export default {
  name: 'NetworkOverviewApps',
@@ -153,20 +137,6 @@ export default {
  mixins: [chartMixin],
  data () {
    return {
-      metricOptions: [
-        {
-          value: 'Bits/s',
-          label: 'Bits/s'
-        },
-        {
-          value: 'Packets/s',
-          label: 'Packets/s'
-        },
-        {
-          value: 'Sessions/s',
-          label: 'Sessions/s'
-        }
-      ],
      appData: [],
      // 假数据
      appTempData: [],
@@ -196,22 +166,18 @@ export default {
      urlChangeParams: {}
    }
  },
+  props: {
+    metric: {
+      type: String,
+      default: 'Bits/s'
+    }
+  },
  setup () {
-    const { query } = useRoute()
-    const metricFilter = ref(query.appListMetric || 'Bits/s')
    return {
-      metricFilter,
      myChart: shallowRef([])
    }
  },
  watch: {
-    metricFilter (n) {
-      const { query } = this.$route
-      const newUrl = urlParamsHandler(window.location.href, query, {
-        appListMetric: n
-      })
-      overwriteUrl(newUrl)
-    },
    showAddApp: {
      deep: true,
      handler (n) {
@@ -223,10 +189,11 @@ export default {
        }
      }
    },
-    timeFilter: {
-      handler () {
-        this.init()
-      }
+    timeFilter (n) {
+      this.init()
+    },
+    metric (n) {
+      this.init()
    }
  },
  methods: {
@@ -282,9 +249,9 @@ export default {
          const prevData = res[0].data.result
          const data = res[1].data.result
          let toCompareType = 'bytes'
-          if (this.metricFilter === 'Sessions/s') {
+          if (this.metric === 'Sessions/s') {
            toCompareType = 'sessions'
-          } else if (this.metricFilter === 'Packets/s') {
+          } else if (this.metric === 'Packets/s') {
            toCompareType = 'packets'
          }
          data.forEach(d => {