控制左边自动播放

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 {

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)
     },

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,

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,

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,
       }

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', () => {

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('/')
   }