From f68349894601aaaddfdc7468527a2d0320fc7a55 Mon Sep 17 00:00:00 2001
From: ihzero <ihzero@163.com>
Date: Mon, 15 May 2023 11:01:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A7=E5=88=B6=E5=B7=A6=E8=BE=B9=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E6=92=AD=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/enums/cacheEnum.ts                      |  2 ++
 src/store/modules/visualization.ts          | 12 +++++++--
 src/views/visualization/components/DXCY.vue | 12 ++++++++-
 src/views/visualization/components/DXJG.vue | 26 +++++++++++++++---
 src/views/visualization/components/DXLX.vue | 12 ++++++++-
 src/views/visualization/components/DZWZ.vue | 12 ++++++++-
 src/views/visualization/components/Head.vue | 30 ++++++++++++++++++---
 7 files changed, 93 insertions(+), 13 deletions(-)

diff --git a/src/enums/cacheEnum.ts b/src/enums/cacheEnum.ts
index 12e82dd7..89485d95 100644
--- a/src/enums/cacheEnum.ts
+++ b/src/enums/cacheEnum.ts
@@ -27,6 +27,8 @@ export const LOCK_INFO_KEY = 'LOCK__INFO__KEY__'
 
 export const YEAR_KEY = 'YEAR_KEY__'
 
+export const PLAY_KEY = 'PLAY_KEY__'
+
 export const INIT_TIME = 'INIT_TIME_'
 
 export enum CacheTypeEnum {
diff --git a/src/store/modules/visualization.ts b/src/store/modules/visualization.ts
index 200e9b15..e1a4652b 100644
--- a/src/store/modules/visualization.ts
+++ b/src/store/modules/visualization.ts
@@ -1,17 +1,18 @@
 import { defineStore } from 'pinia'
 
-import { YEAR_KEY } from '/@/enums/cacheEnum'
+import { YEAR_KEY, PLAY_KEY } from '/@/enums/cacheEnum'
 
 interface VisualizationState {
   year: number
   addressId?: number | null
+  play: boolean
 }
-
 export const useVisualizationStore = defineStore({
   id: 'app-visualization',
   state: (): VisualizationState => ({
     year: Number(localStorage.getItem(YEAR_KEY)) || new Date().getFullYear() - 1,
     addressId: null,
+    play: localStorage.getItem(PLAY_KEY) === 'true' ? true : false,
   }),
   getters: {
     getYear(): number {
@@ -20,6 +21,9 @@ export const useVisualizationStore = defineStore({
     getAddresId(): number | null {
       return this?.addressId ?? null
     },
+    getPlay(): boolean {
+      return this.play
+    },
   },
   actions: {
     setAddressId(id: number | null) {
@@ -29,6 +33,10 @@ export const useVisualizationStore = defineStore({
       this.year = year
       localStorage.setItem(YEAR_KEY, String(year))
     },
+    setPlay(play: boolean) {
+      this.play = play
+      localStorage.setItem(PLAY_KEY, String(play))
+    },
     plus() {
       this.setYear(this.year + 1)
     },
diff --git a/src/views/visualization/components/DXCY.vue b/src/views/visualization/components/DXCY.vue
index 61f13864..6598e2f6 100644
--- a/src/views/visualization/components/DXCY.vue
+++ b/src/views/visualization/components/DXCY.vue
@@ -151,7 +151,9 @@
           series: obj.series,
         })
 
-        chartAmi()
+        if (visualizationStore.getPlay) {
+          chartAmi()
+        }
       }
 
       let timer: any = null
@@ -233,6 +235,14 @@
         () => getData(),
       )
 
+      watch(
+        () => visualizationStore.getPlay,
+        () => {
+          timer && clearInterval(timer)
+          getData()
+        },
+      )
+
       return {
         isChart,
         changeChart,
diff --git a/src/views/visualization/components/DXJG.vue b/src/views/visualization/components/DXJG.vue
index 9ecf22c8..2a358d22 100644
--- a/src/views/visualization/components/DXJG.vue
+++ b/src/views/visualization/components/DXJG.vue
@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, ref, Ref, onBeforeMount, onBeforeUnmount } from 'vue'
+  import { defineComponent, reactive, ref, Ref, onBeforeMount, onBeforeUnmount, watch } from 'vue'
   import Box from './Box.vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   import { getRiceShrimpPrice } from '/@/api/sys/other'
   import { chartLineColors } from './colors'
-
+  import { useVisualizationStore } from '/@/store/modules/visualization'
   import { useVContext } from '../useVContext'
 
   export default defineComponent({
@@ -20,6 +20,7 @@
       Box,
     },
     setup() {
+      const visualizationStore = useVisualizationStore()
       const { rootEmitter } = useVContext()
       const tabList = reactive([
         {
@@ -151,7 +152,9 @@
           series: obj.series,
           animationDuration: 2000,
         })
-        chartAmi()
+        if (visualizationStore.getPlay) {
+          chartAmi()
+        }
       }
       let timer: any = null
 
@@ -218,7 +221,9 @@
       }
 
       async function getData(init = true) {
-        const resData = await getRiceShrimpPrice()
+        const resData = await getRiceShrimpPrice({
+          year: visualizationStore.getYear,
+        })
         Data.x_axis = resData.x_axis
         Data.series = resData.series
         if (init) {
@@ -240,6 +245,19 @@
         timer && clearInterval(timer)
       })
 
+      watch(
+        () => visualizationStore.getYear,
+        () => getData(),
+      )
+
+      watch(
+        () => visualizationStore.getPlay,
+        () => {
+          timer && clearInterval(timer)
+          getData()
+        },
+      )
+
       return {
         tabList,
         currentTab,
diff --git a/src/views/visualization/components/DXLX.vue b/src/views/visualization/components/DXLX.vue
index 3b8df1de..093e8a0d 100644
--- a/src/views/visualization/components/DXLX.vue
+++ b/src/views/visualization/components/DXLX.vue
@@ -132,7 +132,9 @@
           animationDuration: 2000,
         })
 
-        chartAmi()
+        if (visualizationStore.getPlay) {
+          chartAmi()
+        }
       }
 
       let timer: any = null
@@ -216,6 +218,14 @@
         () => getData(),
       )
 
+      watch(
+        () => visualizationStore.getPlay,
+        () => {
+          timer && clearInterval(timer)
+          getData()
+        },
+      )
+
       return {
         chartRef,
       }
diff --git a/src/views/visualization/components/DZWZ.vue b/src/views/visualization/components/DZWZ.vue
index 91ab5aea..07ac24ef 100644
--- a/src/views/visualization/components/DZWZ.vue
+++ b/src/views/visualization/components/DZWZ.vue
@@ -193,7 +193,9 @@
           series: obj.series,
         })
 
-        chartAmi()
+        if (visualizationStore.getPlay) {
+          chartAmi()
+        }
       }
 
       let timer: any = null
@@ -266,6 +268,14 @@
         },
       )
 
+      watch(
+        () => visualizationStore.getPlay,
+        () => {
+          timer && clearInterval(timer)
+          getData()
+        },
+      )
+
       onBeforeMount(() => {
         getData()
         rootEmitter.on('interval:auto', () => {
diff --git a/src/views/visualization/components/Head.vue b/src/views/visualization/components/Head.vue
index b24e1f6a..9c89b203 100644
--- a/src/views/visualization/components/Head.vue
+++ b/src/views/visualization/components/Head.vue
@@ -1,8 +1,20 @@
 <template>
   <div class="text-4xl text-white flex items-center justify-center relative">
     <div
-      class="absolute left-36px text-15px font-bold bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] flex items-center"
+      class="absolute left-20px text-15px font-bold bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] flex items-center"
     >
+      <Tooltip placement="topLeft" title="自动播放">
+        <CaretRightOutlined
+          v-if="!play"
+          class="!text-white text-lg mr-4 opacity-80 cursor-pointer"
+          @click="setPlay"
+        />
+        <PauseOutlined
+          v-else
+          class="!text-white text-lg mr-4 opacity-80 cursor-pointer"
+          @click="setPlay"
+        />
+      </Tooltip>
       <DatePicker
         v-model:value="value1"
         picker="year"
@@ -68,10 +80,15 @@
 </template>
 
 <script setup lang="ts">
-  import { DatePicker } from 'ant-design-vue'
+  import { DatePicker, Tooltip } from 'ant-design-vue'
   import { reactive, computed, ref, onBeforeMount } from 'vue'
   import headTitleImg from '/@/assets/images/head-title.png'
-  import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
+  import {
+    CaretUpOutlined,
+    CaretDownOutlined,
+    CaretRightOutlined,
+    PauseOutlined,
+  } from '@ant-design/icons-vue'
   import dayjs, { Dayjs } from 'dayjs'
   import { useRouter } from 'vue-router'
 
@@ -79,7 +96,8 @@
 
   const visualizationStore = useVisualizationStore()
 
-  const year = computed(() => visualizationStore.getYear)
+  // const year = computed(() => visualizationStore.getYear)
+  const play = computed(() => visualizationStore.getPlay)
 
   const router = useRouter()
 
@@ -90,6 +108,10 @@
     value1.value = dayjs(visualizationStore.getYear + '', 'YYYY')
   })
 
+  function setPlay() {
+    visualizationStore.setPlay(!play.value)
+  }
+
   function goHome() {
     router.push('/')
   }