From e0c42c8b4c1068502488ea7827262577ef9df540 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Wed, 12 Oct 2022 18:20:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3refreshTime=E9=9D=9Eof?=
 =?UTF-8?q?f=EF=BC=8C=E6=94=B9=E4=B8=BAoff=E4=B8=8B=E9=92=BB=E5=90=8E?=
 =?UTF-8?q?=E8=BF=94=E5=9B=9E=E4=BB=8D=E4=B8=BA=E4=B8=8B=E9=92=BB=E5=89=8D?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/TimeRange/TimeRefresh.vue          | 29 +++++++++++++++++--
 src/store/modules/panel.js                    | 10 ++++++-
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/components/common/TimeRange/TimeRefresh.vue b/src/components/common/TimeRange/TimeRefresh.vue
index c39ddcd0..301f2d7b 100644
--- a/src/components/common/TimeRange/TimeRefresh.vue
+++ b/src/components/common/TimeRange/TimeRefresh.vue
@@ -23,8 +23,8 @@
 <script>
 // import { ref } from 'vue'
 import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
-import { dateFormatToUTC } from '@/utils/date-util'
 import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
 export default {
   name: 'TimeRefresh',
@@ -54,6 +54,7 @@ export default {
   },
   setup (props, ctx) {
     const { query } = useRoute()
+    const store = useStore()
     const refreshArr = [
       { value: -1, label: 'off' },
       { value: 30, label: '30s' },
@@ -64,8 +65,25 @@ export default {
     ]
     let refreshObj = {}
 
-    if (query.refreshTime !== undefined) {
-      refreshObj = refreshArr.find(item => item.value === Number(query.refreshTime))
+    // 是否关闭refreshTime标志，
+    // 即时间选择30s后再off，下钻再返回时，地址栏会带着refreshTime，
+    // 此时通过refreshFlag判断已经off，再清除地址栏地址栏会带着refreshTime
+    const refreshFlag = store.state.panel.refreshFlag
+    const refreshTime = store.state.panel.refreshTime
+
+    if (refreshFlag) {
+      if (query.refreshTime !== undefined) {
+        refreshObj = refreshArr.find(item => item.value === Number(query.refreshTime))
+      } else if (refreshTime !== null) {
+        // 此处是避免下钻后浏览器返回，获取不到url的refreshTime情况
+        refreshObj = refreshArr.find(item => item.value === refreshTime)
+      }
+    } else {
+      // 浏览器回退时，清除掉地址栏的refreshTime
+      const newQuery = JSON.parse(JSON.stringify(query))
+      delete newQuery.refreshTime
+      const newUrl = urlParamsHandler(window.location.href, query, newQuery, 'clean')
+      overwriteUrl(newUrl)
     }
 
     return {
@@ -90,6 +108,7 @@ export default {
           refreshTime: val.value
         }
         this.reloadUrl(dateParam)
+        this.$store.commit('setRefreshTime', val.value)
 
         // 设置定时器
         this.intervalTimer = setInterval(() => {
@@ -109,7 +128,11 @@ export default {
         const routeQuery = this.$route.query
         delete routeQuery.refreshTime
         this.reloadUrl(routeQuery, 'cleanOldParams')
+        this.$store.commit('setRefreshTime', null)
+        this.$store.commit('setRefreshFlag', false)
       }
+
+      console.log('查看此时的值=============================')
     },
     showRefreshList () {
       this.dropdownShow = !this.dropdownShow
diff --git a/src/store/modules/panel.js b/src/store/modules/panel.js
index 715db4f4..b28bf298 100644
--- a/src/store/modules/panel.js
+++ b/src/store/modules/panel.js
@@ -49,7 +49,9 @@ const panel = {
     // tabOperationBeforeType: 0, // 记录上次的操作类型
     npmThirdLevelMenuScore: null, // npm overview 第三级菜单的panel分数
     npmLocationCountry: '', // npm location的查询条件--国家
-    npmLocationSide: 'server' // npm location的查询条件--方向
+    npmLocationSide: 'server', // npm location的查询条件--方向
+    refreshTime: null, // 自动刷新时间的秒数
+    refreshFlag: true // 关闭自动刷新标志，true为off，false即开启自动刷新
   },
   mutations: {
     setShowRightBox (state, flag) {
@@ -138,6 +140,12 @@ const panel = {
     },
     setNpmThirdLevelMenuScore (state, score) {
       state.npmThirdLevelMenuScore = score
+    },
+    setRefreshTime (state, time) {
+      state.refreshTime = time
+    },
+    setRefreshFlag (state, flag) {
+      state.refreshFlag = flag
     }
   },
   getters: {