修改

src/assets/icons/more-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667196433611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9606" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M418.9 146.14H204.95a58.799 58.799 0 0 0-41.6 17.21 58.716 58.716 0 0 0-17.21 41.59v213.94a58.758 58.758 0 0 0 58.8 58.8h213.94a58.758 58.758 0 0 0 58.8-58.8V204.95c0.01-15.6-6.18-30.56-17.21-41.59a58.687 58.687 0 0 0-41.57-17.22zM860.65 163.36a58.716 58.716 0 0 0-41.59-17.21H605.11a58.758 58.758 0 0 0-58.8 58.8v213.94a58.758 58.758 0 0 0 58.8 58.8h213.93c15.6 0.01 30.56-6.18 41.59-17.21a58.768 58.768 0 0 0 17.22-41.59V204.95c0.02-15.6-6.17-30.56-17.2-41.59zM418.89 546.31l0.01-0.01H204.95a58.799 58.799 0 0 0-41.6 17.21 58.716 58.716 0 0 0-17.21 41.59v213.94a58.799 58.799 0 0 0 17.21 41.6 58.716 58.716 0 0 0 41.59 17.21h213.94a58.758 58.758 0 0 0 58.8-58.8V605.11c0.01-15.6-6.18-30.56-17.21-41.59a58.718 58.718 0 0 0-41.58-17.21zM819.06 546.31v-0.01H605.11a58.758 58.758 0 0 0-58.8 58.8v213.94a58.79 58.79 0 0 0 17.2 41.59 58.768 58.768 0 0 0 41.59 17.22h213.95c15.6 0.01 30.56-6.18 41.6-17.21a58.716 58.716 0 0 0 17.21-41.59V605.11a58.758 58.758 0 0 0-58.8-58.8z" p-id="9607" fill="#ffffff"></path></svg>

src/enums/cacheEnum.ts

@@ -25,6 +25,8 @@ export const APP_SESSION_CACHE_KEY = 'COMMON__SESSION__KEY__'
 // lock info
 export const LOCK_INFO_KEY = 'LOCK__INFO__KEY__'
 
+export const YEAR_KEY = 'YEAR_KEY__'
+
 export enum CacheTypeEnum {
   SESSION,
   LOCAL,

src/store/modules/user.ts

@@ -91,8 +91,6 @@ export const useUserStore = defineStore({
       try {
         const { goHome = true, mode, ...loginParams } = params
         const data = await loginApi(loginParams, mode)
-        console.log(data)
-
         const { token } = data
         this.setToken(token)
 

src/store/modules/visualization.ts

@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+
+import { YEAR_KEY } from '/@/enums/cacheEnum'
+
+interface VisualizationState {
+  year: number
+  addressId?: number | null
+}
+
+export const useVisualizationStore = defineStore({
+  id: 'app-visualization',
+  state: (): VisualizationState => ({
+    year: Number(localStorage.getItem(YEAR_KEY)) || new Date().getFullYear(),
+    addressId: null,
+  }),
+  getters: {
+    getYear(): number {
+      return this.year
+    },
+    getAddresId(): number | null {
+      return this?.addressId ?? null
+    },
+  },
+  actions: {
+    setAddressId(id: number | null) {
+      this.addressId = id
+    },
+    setYear(year: number) {
+      this.year = year
+      localStorage.setItem(YEAR_KEY, String(year))
+    },
+    plus() {
+      this.setYear(this.year + 1)
+    },
+    minus() {
+      this.setYear(this.year - 1)
+    },
+  },
+})

src/views/visualization/components/Footer.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="bg w-392px h-30px absolute bottom-0 left-1/2 z-999 footer flex items-end">
+    <div class="grid h-27px w-full grid-cols-5 text-white text-12px font-bold px-18px">
+      <div
+        class="h-full flex items-center cursor-pointer justify-center"
+        v-for="item in 4"
+        :key="item"
+      >
+        xxx系统
+      </div>
+      <div class="h-full flex items-center cursor-pointer justify-center">
+        <Popover
+          placement="topRight"
+          trigger="click"
+          overlayClassName="fotter-popover"
+          color="rgba(28, 44, 52, .8)"
+          :get-popup-container="getPopupContainer"
+          :align="{ offset: [38, 0] }"
+        >
+          <template #content>
+            <div class="text-white"> 1 </div>
+          </template>
+          <SvgIcon name="more-icon" />
+        </Popover>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { SvgIcon } from '/@/components/Icon'
+  import { Popover } from 'ant-design-vue'
+
+  const getPopupContainer = (trigger) => {
+    return trigger.parentElement
+  }
+</script>
+
+<style lang="less" scoped>
+  .bg {
+    background: url('../../../assets/images/footer.png') no-repeat;
+    background-size: 100%;
+  }
+
+  .footer {
+    transform: translateX(-50%);
+  }
+
+  ::v-deep(.fotter-popover) {
+    .ant-popover-inner-content {
+      width: 375px;
+      border: 1px solid rgba(57, 102, 132, 1);
+    }
+
+    .ant-popover-arrow {
+      right: 42px;
+
+      .ant-popover-arrow-content {
+        background-color: rgba(57, 102, 132, 1) !important;
+      }
+    }
+  }
+</style>

src/views/visualization/components/Head.vue

@@ -1,5 +1,22 @@
 <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"
+    >
+      {{ year }}年
+      <div class="flex flex-col justify-center -mt-2px ml-4px">
+        <caret-up-outlined
+          :style="{ fontSize: '10px', color: '#76E9F0' }"
+          class="h-6px cursor-pointer"
+          @click="onYearPlus"
+        />
+        <caret-down-outlined
+          :style="{ fontSize: '10px', color: '#76E9F0' }"
+          class="h-6px cursor-pointer"
+          @click="onYearMinus"
+        />
+      </div>
+    </div>
     <div class="w-1099px h-43px relative">
       <div class="absolute left-0 bottom-0 w-340px text-10px h-28px flex items-center justify-end">
         {{ state.date }} {{ state.time }}
@@ -20,8 +37,22 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive } from 'vue'
+  import { reactive, computed } from 'vue'
   import headTitleImg from '/@/assets/images/head-title.png'
+  import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'
+
+  import { useVisualizationStore } from '/@/store/modules/visualization'
+
+  const visualizationStore = useVisualizationStore()
+
+  const year = computed(() => visualizationStore.getYear)
+
+  const onYearPlus = () => {
+    visualizationStore.plus()
+  }
+  const onYearMinus = () => {
+    visualizationStore.minus()
+  }
 
   const state = reactive({
     date: '',

src/views/visualization/components/Map.vue

@@ -6,7 +6,7 @@
       class="absolute left-25px top-25px z-999 text-white border rounded-2px px-30px py-6px text-12px cursor-pointer"
       >返回</div
     >
-    <div ref="chartRef" class="w-full h-[calc(100% - 2px)]"> </div>
+    <div ref="chartRef" class="w-full h-full"> </div>
   </div>
 </template>
 <script lang="ts">
@@ -72,7 +72,7 @@
               show: false,
             },
             itemStyle: {
-              areaColor: 'rgba(0, 15, 40, 0.5)',
+              areaColor: 'rgba(0, 15, 40, 0.0)',
               shadowColor: 'rgba(0, 0, 0, 1)',
               shadowBlur: 0,
               shadowOffsetX: 0,
@@ -105,12 +105,13 @@
                 color: '#fff',
               },
               itemStyle: {
-                areaColor: {
+                // areaColor: {
-                  image: domImg,
+                //   image: domImg,
-                  repeat: 'repeat',
+                //   repeat: 'repeat',
-                },
+                // },
                 borderColor: 'rgba(147, 235, 248, 1)',
                 borderWidth: 1,
+                areaColor: 'rgba(0, 0, 0, 0.2)',
 
                 // shadowColor: 'rgba(128, 217, 248, 1)',
                 // shadowOffsetX: -2,

src/views/visualization/components/NYQK.vue

@@ -4,20 +4,20 @@
       class="text-18px mt-19px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
       >隆昌农业产业情况</div
     >
-    <div class="w-full h-200px mx-auto mt-10px" ref="chartRef"> </div>
+    <div class="w-full h-250px mx-auto mt-10px" ref="chartRef"> </div>
     <div
       class="font-bold text-18px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-center mt-10px"
     >
       总产值：
       <CountTo
         :startVal="0"
-        :endVal="2200202"
+        :endVal="countNumber"
         class="font-bold text-18px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
       />
       万元
     </div>
 
-    <div class="grid grid-cols-2 gap-y-20px gap-x-10px mx-10px mt-18px">
+    <div class="grid grid-cols-2 gap-y-18px gap-x-10px mx-10px mt-18px">
       <div class="flex items-center" v-for="item in cityData" :key="item.slug">
         <!-- <SvgIcon :name="item.slug" :size="40" color="transparent" /> -->
         <img :src="item.icon" alt="" class="w-40px h-40px" srcset="" />
@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-  import { Ref, ref, defineComponent, onBeforeMount, reactive, toRefs, watch } from 'vue'
+  import { Ref, ref, defineComponent, onBeforeMount, reactive, toRefs, watch, computed } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   import { getCitydataStatistics, getCropYieldCategoryStatics } from '/@/api/sys/other'
   import { CountTo } from '/@/components/CountTo'
@@ -45,6 +45,10 @@
   import cityIcon3 from '/@/assets/images/city-3.png'
   import cityIcon4 from '/@/assets/images/city-4.png'
 
+  import { useVisualizationStore } from '/@/store/modules/visualization'
+
+  var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
+
   interface cityDataType {
     name: string
     slug: string
@@ -89,6 +93,7 @@
       CountTo,
     },
     setup() {
+      const visualizationStore = useVisualizationStore()
       const chartRef = ref<HTMLDivElement | null>(null)
       const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
       const Data = reactive({
@@ -103,28 +108,47 @@
           legend: {
             show: false,
           },
+          tooltip: {
+            trigger: 'item',
+          },
           series: [
             {
               name: '隆昌农业产业情况',
               type: 'pie',
               radius: '70%',
-              color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
+              colorBy: 'data',
+              color: colorList,
+              itemStyle: {
+                color: function (params) {
+                  return colorList[params.dataIndex]
+                },
+              },
               label: {
                 show: true,
+                formatter: '{b}\n{d}%',
               },
-              data: Data.lyqkData,
+              data: Data.lyqkData.map((item, index) => {
+                item.label = {
+                  color: colorList[index],
+                }
+                return item
+              }),
             },
           ],
         })
       }
 
-      async function getCropYieldCategory(params = { year: '2022', base_id: null }) {
+      async function getCropYieldCategory() {
-        const { list } = await getCropYieldCategoryStatics(params)
+        const { list } = await getCropYieldCategoryStatics({
-        const arr = [] as { value: string; name: string }[]
+          year: visualizationStore.getYear,
+          base_id: visualizationStore.getAddresId,
+        })
+        const arr = [] as { value: string | number; name: string }[]
         for (const key in list) {
           if (Object.prototype.hasOwnProperty.call(list, key)) {
             arr.push({
-              value: list[key],
+              // value: list[key],
+              value: parseInt(Math.random() * 100),
               name: key,
             })
           }
@@ -169,16 +193,27 @@
         Data.cityData = temp
       }
 
+      const countNumber = computed(() =>
+        Data.lyqkData.reduce((c, p) => {
+          c += p.value
+          return c
+        }, 0),
+      )
+
       onBeforeMount(() => {
         getCitydata()
         getCropYieldCategory()
         //地图点击
         rootEmitter.on('map:click', (e) => {
+          visualizationStore.setAddressId(e.id)
           onChangeMap(e)
+          getCropYieldCategory()
         })
         //地图返回
         rootEmitter.on('map:back', () => {
+          visualizationStore.setAddressId(null)
           getCitydata()
+          getCropYieldCategory()
         })
       })
 
@@ -189,8 +224,16 @@
         },
       )
 
+      watch(
+        () => visualizationStore.getYear,
+        () => {
+          getCropYieldCategory()
+        },
+      )
+
       return {
         chartRef,
+        countNumber,
         ...toRefs(Data),
       }
     },

src/views/visualization/index.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- <ScaleScreen :boxStyle="{ background: '#020603' }" :width="3120" :height="760" :autoScale="false"> -->
-  <div class="overflow-y-scroll bg-[#020603] bg-img">
+  <div class="overflow-y-scroll">
-    <div class="flex flex-col h-full w-3120px h-760px">
+    <div class="flex flex-col h-full w-3120px h-760px bg-img relative">
       <Head />
       <div class="flex-1 flex justify-between px-20px">
         <div class="flex">
@@ -12,15 +12,15 @@
             <Forestry width="440px" height="353px" />
           </div>
         </div>
-        <div class="flex-1 flex ml-15px justify-between bg-[#162126] bg-opacity-5">
+        <div class="flex-1 flex ml-15px justify-between bg-[#162126] bg-opacity-60">
-          <div class="bg-[10272f] bg-opacity-50">
+          <div class="bg-[#10272f] bg-opacity-00">
             <NYQK />
-            <NCZQS class="mt-37px" />
+            <NCZQS class="mt-20px" />
           </div>
           <div class="flex-1">
             <Map />
           </div>
-          <div class="bg-[10272f] bg-opacity-50">
+          <div class="bg-[#10272f] bg-opacity-00">
             <CZNYCY />
           </div>
         </div>
@@ -36,9 +36,11 @@
           </div>
         </div>
       </div>
+      <Footer />
     </div>
     <MapModal v-model:visible="visibleMapModal" :footer="null" />
   </div>
+  <!-- </ScaleScreen> -->
 </template>
 
 <script lang="ts">
@@ -50,6 +52,7 @@
   import Forestry from './components/Forestry.vue'
   import Agriculture from './components/Agriculture.vue'
   import Head from './components/Head.vue'
+  import Footer from './components/Footer.vue'
   import NYQK from './components/NYQK.vue'
   import NCZQS from './components/NCZQS.vue'
   import CZNYCY from './components/CZNYCY.vue'
@@ -62,6 +65,7 @@
   import MapModal from './MapModal.vue'
   import { createVContext } from './useVContext'
   import mitt from '/@/utils/mitt'
+  import { useVisualizationStore } from '/@/store/modules/visualization'
   export default defineComponent({
     components: {
       [Modal.name]: Modal,
@@ -80,10 +84,14 @@
       SZJCSJ,
       TRJCSJ,
       Head,
+      Footer,
       MapModal,
     },
     setup() {
-      const mapData = reactive([])
+      const visualizationStore = useVisualizationStore()
+
+      console.log(visualizationStore.getYear)
+
       const vEmitter = mitt()
 
       createVContext({
@@ -114,6 +122,10 @@
   .bg-img {
     // background-image: url('../../assets/images/map-bg.png') no-repeat;
     // background-position: center;
+    background: url('../../assets/images/map-bg.png') no-repeat, #020603;
+    background-position: center center;
+    background-attachment: scroll;
+    background-size: auto 100%;
   }
 
   // .bg {