CN-697 feat: 增加使用url保存页面状态的功能，此提交实现panel的时间条件和network overview的App list的metric值

src/assets/css/components/views/charts2/networkOverviewLine.scss

@@ -4,7 +4,7 @@
   border: 1px solid #E2E5EC;
   border-radius: 4px;
   .chart-drawing {
-    height: 80%;
+    height: 100%;
     width: 100%;
     .echarts-tooltip.echarts-tooltip-dark {
       .cn-chart-body {

src/components/common/TimeRange/DateTimeRange.vue

@@ -59,11 +59,11 @@
               <li v-for="item in dateRangeArr" @click="quickChange(item.value)"
                   :class="(item.value==dateRangeValue.value || item.value==dateRangeValue)?'active':''"
                   :key="item.value">
-                            <span style="position: relative">
+                <span style="position: relative">
-                                {{ item.name }}
+                    {{ item.name }}
-                                <i v-if="(item.value==dateRangeValue.value || item.value==dateRangeValue)"
+                    <i v-if="(item.value==dateRangeValue.value || item.value==dateRangeValue)"
-                                   class="cn-icon cn-icon-check"></i>
+                       class="cn-icon cn-icon-check"></i>
-                            </span>
+                </span>
               </li>
             </ul>
           </el-col>
@@ -118,7 +118,7 @@ export default {
     const utc = localStorage.getItem(storageKey.timezoneOffset)
     const rangeHistory = ref(localStorage.getItem(storageKey.dataRangeHistory) ? JSON.parse(localStorage.getItem(storageKey.dataRangeHistory)) : [])
     const dateRangeValue = props.dateRange ? ref(props.dateRange) : ref(60)
-    const isCustom = ref(false)
+    const isCustom = ref(dateRangeValue.value === -1)
     const dateRangeArr = [
       {
         value: 5,

src/utils/tools.js

@@ -836,3 +836,26 @@ export function computeScore (data, index) {
   }
   return score * k
 }
+
+// cleanOldParams: true|false，是否清除oldParams
+export function urlParamsHandler (url, oldParams, newParams, cleanOldParams) {
+  let newUrl = url.split('?')[0]
+  let params
+  if (cleanOldParams) {
+    params = newParams
+  } else {
+    params = Object.assign(oldParams, newParams)
+  }
+  if (Object.keys(params).length > 0) {
+    newUrl += '?'
+    Object.keys(params).forEach(key => {
+      newUrl += `${key}=${newParams[key]}&`
+    })
+    newUrl = newUrl.substring(0, newUrl.length - 1)
+  }
+  return newUrl
+}
+
+export function overwriteUrl (url) {
+  window.history.pushState('', '', url)
+}

src/views/charts2/Panel.vue

@@ -38,13 +38,13 @@
 </template>
 
 <script>
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import { panelTypeAndRouteMapping, bytesColumnNameGroupForNpm, scoreUrl, customTableTitlesForAppPerformance, operationType } from '@/utils/constants'
 import { getPanelList, getChartList } from '@/utils/api'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { getTypeCategory } from '@/views/charts/charts/tools'
-import { computeScore } from '@/utils/tools'
+import { computeScore, urlParamsHandler, overwriteUrl } from '@/utils/tools'
 import ChartList from '@/views/charts2/ChartList'
 import { get } from '@/utils/http'
 
@@ -147,10 +147,9 @@ export default {
   setup (props, ctx) {
     const panel = ref({})
     let panelType = 1 // 取得panel的type
-    const { params } = useRoute()
+    const { params, query } = useRoute()
-    const router = useRouter()
+    const thirdPanel = params.thirdPanel
-    const thirdPanel = router.currentRoute.value.params.thirdPanel
+    const fourthPanel = params.fourthPanel
-    const fourthPanel = router.currentRoute.value.params.fourthPanel
     if (fourthPanel) {
       panelType = Number(fourthPanel)
     } else if (thirdPanel) {
@@ -162,10 +161,21 @@ export default {
     function isEntityDetail (t) {
       return [4, 5, 6].indexOf(t) > -1
     }
-    // date
+    // 获取url携带的range、startTime、endTime
-    const dateRangeValue = isEntityDetail(panelType) ? 60 * 24 : 60
+    const rangeParam = query.range
-    const { startTime, endTime } = getNowTime(dateRangeValue)
+    const startTimeParam = query.startTime
-    const timeFilter = ref({ startTime, endTime, dateRangeValue })
+    const endTimeParam = query.endTime
+    // 若url携带了，使用携带的值，否则使用默认值。
+    const dateRangeValue = rangeParam ? parseInt(query.range) : (isEntityDetail(panelType) ? 60 * 24 : 60)
+    const timeFilter = ref({ dateRangeValue })
+    if (!startTimeParam || !endTimeParam) {
+      const { startTime, endTime } = getNowTime(isEntityDetail(panelType) ? 60 * 24 : 60)
+      timeFilter.value.startTime = startTime
+      timeFilter.value.endTime = endTime
+    } else {
+      timeFilter.value.startTime = parseInt(startTimeParam)
+      timeFilter.value.endTime = parseInt(endTimeParam)
+    }
 
     return {
       panelType,
@@ -206,7 +216,14 @@ export default {
       }
     },
     reload (startTime, endTime, dateRangeValue) {
-      this.timeFilter = { startTime: startTime, endTime: endTime, dateRangeValue: dateRangeValue }
+      this.timeFilter = { startTime: getSecond(startTime), endTime: getSecond(endTime), dateRangeValue: dateRangeValue }
+      const { query } = this.$route
+      const newUrl = urlParamsHandler(window.location.href, query, {
+        startTime: this.timeFilter.startTime,
+        endTime: this.timeFilter.endTime,
+        range: dateRangeValue.value
+      })
+      overwriteUrl(newUrl)
     },
     timeRefreshChange () {
       // 不是自选时间

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

@@ -121,7 +121,7 @@ import unitConvert from '@/utils/unit-convert'
 import { storageKey, unitTypes, networkTable, operationType } from '@/utils/constants'
 import * as echarts from 'echarts'
 import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
-import { shallowRef } from 'vue'
+import { ref, shallowRef } from 'vue'
 import { get, put } from '@/utils/http'
 import { api } from '@/utils/api'
 import _ from 'lodash'
@@ -131,6 +131,7 @@ 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',
@@ -140,13 +141,15 @@ export default {
   },
   mixins: [chartMixin],
   setup () {
+    const { query } = useRoute()
+    const metricFilter = ref(query.appListMetric || 'Bits/s')
     return {
+      metricFilter,
       myChart: shallowRef([])
     }
   },
   data () {
     return {
-      metricFilter: 'Bits/s',
       metricOptions: [
         {
           value: 'Bits/s',

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

@@ -1,66 +1,66 @@
 <template>
   <div class="line network">
-    <chart-no-data v-if="isNoData"></chart-no-data>
+    <div class="line-header">
-    <template v-else>
+      <div class="line-header-left">
-      <div class="line-header">
+        <div class="line-value-active" v-if="activeTab"></div>
-        <div class="line-header-left">
+        <div class="line-value">
-          <div class="line-value-active" v-if="activeShow"></div>
+          <div class="line-value-mpackets"
-          <div class="line-value">
+               v-show="item.show"
-            <div class="line-value-mpackets"
+               :class=" {'is-active': activeTab === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
-                 v-show="item.show"
+               v-for="(item, index) in mpackets"
-                 :class=" {'is-active': activeShow === item.class, 'mousemove-cursor': mousemoveCursor === item.class}"
+               :key="index"
-                 v-for="(item, index) in mpackets"
+               @mouseenter="mouseenter(item)"
-                 :key="index"
+               @mouseleave="mouseleave(item)"
-                 @mouseenter="mouseenter(item)"
+               @click="activeChange(item, index)">
-                 @mouseleave="mouseleave(item)"
+            <div class="line-value-mpackets-name">
-                 @click="activeChange(item, index)">
+              <div :class="item.class"></div>
-              <div class="line-value-mpackets-name">
+              <div class="mpackets-name">{{$t(item.name)}}</div>
-                <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 class="line-value-unit">
-        </div>
+              <span class="line-value-unit-number">{{unitConvert(item.analysis.avg, unitTypes.number)[0]}}</span>
-        <div class="line-select line-header-right">
+              <span class="line-value-unit-number2">
-          <div class="line-select-metric">
+                <span>{{unitConvert(item.analysis.avg, unitTypes.number)[1]}}</span><span v-if="item.unitType">{{item.unitType}}</span>
-            <span>{{$t('network.metric')}}:</span>
+              </span>
-            <div class="line-select__operation">
-              <el-select
-                  size="mini"
-                  v-model="value1"
-                  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="value2"
-                  :disabled="!activeShow"
-                  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="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="value1"
+                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="value2"
+                :disabled="!activeTab"
+                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 style="height: calc(100% - 74px); width: 100%;">
+      <chart-no-data v-if="isNoData"></chart-no-data>
       <div class="chart-drawing" v-show="showMarkLine" id="overviewLineChart"></div>
-    </template>
+    </div>
   </div>
 </template>
 
@@ -132,7 +132,7 @@ export default {
       unitTypes,
       chartDateObject: [],
       timer: null,
-      activeShow: '',
+      activeTab: '',
       mousemoveCursor: '',
       leftOffset: 0,
       sizes: [3, 4, 6, 8, 9, 10],
@@ -143,7 +143,7 @@ export default {
     }
   },
   watch: {
-    activeShow (n) {
+    activeTab (n) {
       this.$nextTick(() => {
         this.handleActiveBar(n)
       })
@@ -365,7 +365,7 @@ export default {
       } else {
         this.echartsLabelValue = this.echartsLabelValue
       }
-      this.activeShow = item.class
+      this.activeTab = item.class
       this.legendSelectChange(item, index, 'active')
       this.showMarkLine = !item.invertTab
       this.init(this.echartsType, this.showMarkLine, 'active')
@@ -391,7 +391,7 @@ export default {
     },
     legendSelectChange (item, index, val) {
       if (index === 'index') {
-        this.activeShow = !item.class
+        this.activeTab = !item.class
         this.dispatchLegendSelectAction(item.name)
       } else if (this.mpackets[index].name === item.name) {
         this.dispatchLegendSelectAction(item.name)
@@ -409,7 +409,7 @@ export default {
             t.invertTab = true
           }
           if (t.invertTab && item.name === t.name) {
-            this.activeShow = !t.class
+            this.activeTab = !t.class
             this.mpackets.forEach((e) => {
               this.dispatchLegendSelectAction(e.name)
             })
@@ -429,7 +429,7 @@ export default {
     },
     metricSelectChange (val) {
       this.echartsType = val
-      this.activeShow = ''
+      this.activeTab = ''
       this.handleActiveBar()
       this.showMarkLine = !this.showMarkLine
       this.init(val, this.showMarkLine)