From f22ce56239a5167c05ad71447a298c64a3390b81 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 16:13:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0=E9=87=8D=E7=BD=AE=E5=A4=B1=E6=95=88=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/TimeRange/TimeRefresh.vue          | 67 ++++++++++++++++---
 1 file changed, 58 insertions(+), 9 deletions(-)

diff --git a/src/components/common/TimeRange/TimeRefresh.vue b/src/components/common/TimeRange/TimeRefresh.vue
index 98092609..c39ddcd0 100644
--- a/src/components/common/TimeRange/TimeRefresh.vue
+++ b/src/components/common/TimeRange/TimeRefresh.vue
@@ -22,6 +22,10 @@
 
 <script>
 // import { ref } from 'vue'
+import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import { dateFormatToUTC } from '@/utils/date-util'
+import { useRoute } from 'vue-router'
+
 export default {
   name: 'TimeRefresh',
   props: {
@@ -37,19 +41,42 @@ export default {
       interval: -1,
       unit: 2,
       dropdownShow: false,
-      interLabel: '',
-      refreshArr: [
-        { value: -1, label: 'off' },
-        { value: 30, label: '30s' },
-        { value: 60, label: '1m' },
-        { value: 300, label: '5m' },
-        { value: 900, label: '15m' },
-        { value: 1800, label: '30m' }
-      ]
+      interLabel: ''
+      // refreshArr: [
+      //   { value: -1, label: 'off' },
+      //   { value: 30, label: '30s' },
+      //   { value: 60, label: '1m' },
+      //   { value: 300, label: '5m' },
+      //   { value: 900, label: '15m' },
+      //   { value: 1800, label: '30m' }
+      // ]
     }
   },
   setup (props, ctx) {
+    const { query } = useRoute()
+    const refreshArr = [
+      { value: -1, label: 'off' },
+      { value: 30, label: '30s' },
+      { value: 60, label: '1m' },
+      { value: 300, label: '5m' },
+      { value: 900, label: '15m' },
+      { value: 1800, label: '30m' }
+    ]
+    let refreshObj = {}
 
+    if (query.refreshTime !== undefined) {
+      refreshObj = refreshArr.find(item => item.value === Number(query.refreshTime))
+    }
+
+    return {
+      refreshArr,
+      refreshObj
+    }
+  },
+  mounted () {
+    if (Object.keys(this.refreshObj).length > 0) {
+      this.setRefresh(this.refreshObj)
+    }
   },
   methods: {
     setRefresh (val) {
@@ -58,6 +85,12 @@ export default {
       this.dropdownShow = false
       const now = window.$dayJs.tz().valueOf()
       if (val && val.value != -1) {
+        // 向地址栏添加自动刷新频率
+        const dateParam = {
+          refreshTime: val.value
+        }
+        this.reloadUrl(dateParam)
+
         // 设置定时器
         this.intervalTimer = setInterval(() => {
           this.$emit('change')
@@ -71,6 +104,11 @@ export default {
       if (val && val.value == -1) {
         // 清除定时器
         clearInterval(this.intervalTimer)
+
+        // 地址栏中清除自动刷新频率refreshTime
+        const routeQuery = this.$route.query
+        delete routeQuery.refreshTime
+        this.reloadUrl(routeQuery, 'cleanOldParams')
       }
     },
     showRefreshList () {
@@ -78,6 +116,17 @@ export default {
     },
     dropdownShowFalse () {
       this.dropdownShow = false
+    },
+    /**
+     * 向地址栏添加/删除参数
+     */
+    reloadUrl (newParam, clean) {
+      const { query } = this.$route
+      let newUrl = urlParamsHandler(window.location.href, query, newParam)
+      if (clean) {
+        newUrl = urlParamsHandler(window.location.href, query, newParam, clean)
+      }
+      overwriteUrl(newUrl)
     }
   }
 }