修改

src/design/index.less

@@ -22,7 +22,9 @@ html {
   src: url('../assets/fonts/pmzd.TTF');
 }
 
-
+.ant-modal-wrap {
+  z-index: 9999999 !important;
+}
 
 html,
 body {
@@ -76,13 +78,15 @@ span {
 }
 
 .cu-date-picker {
-  .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner, .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner{
+  .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
+  .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
+    .ant-picker-cell-inner {
     background: #68ced43b !important;
   }
-  .ant-picker-header button{
+  .ant-picker-header button {
     color: #fff;
   }
-  .ant-picker-header > button:hover{
+  .ant-picker-header > button:hover {
     color: rgba(255, 255, 255, 0.76);
   }
   .ant-picker-dropdown,
@@ -111,7 +115,7 @@ span {
     background-color: rgba(28, 44, 52, 0.8) !important;
     border: 1px solid rgba(57, 102, 132, 1);
   }
-  .ant-picker-cell-disabled{
+  .ant-picker-cell-disabled {
     color: rgba(255, 255, 255, 0.25);
   }
 }

src/views/visualization/MapModal.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="modelRef">
+    <!-- :width="modelWidth" -->
     <a-modal
       v-bind="getBindValue"
       :bodyStyle="{ background: '#233741', color: '#fff' }"
       destroyOnClose
       :width="modelWidth"
+      wrapClassName="cu-map-modal"
       :getContainer="getContainer"
     >
       <template #closeIcon>
@@ -36,38 +38,46 @@
           <span class="mx-20px">就业人数：{{ data.workforce }} 人</span>
           <span>总产值：{{ data.cultivated }} ¥</span></div
         >
-        <div class="bg-[#1D2D35] mt-14px p-10px">
+        <div class="bg-[#1D2D35] mt-14px p-5px overflow-x-auto">
-          <div class="flex">
+          <div class="write-vertical-left w-auto" :style="{ height: boxHeight * 2 + 20 + 'px' }">
-            <div class="grid grid-cols-2 gap-10px flex-1 mr-10px" v-if="cropsList.length">
+            <div
+              class="write-normal inline-block m-5px"
+              v-for="(item, index) in cropsList"
+              :key="item.id"
+            >
               <BasicChart
                 headHeight="34.5px"
                 :width="`${boxWidth}px`"
                 :height="`${boxHeight}px`"
-                v-for="(item, index) in cropsList"
-                :key="item.id"
                 :data="item"
                 :index="index"
               />
             </div>
-            <div class="grid grid-cols-2 gap-10px flex-1">
+            <div class="write-normal inline-block m-5px">
               <SBYXZT
                 v-bind="getBindValue"
                 headHeight="34.5px"
                 :width="`${boxWidth}px`"
                 :height="`${boxHeight}px`"
               />
+            </div>
+            <div class="write-normal inline-block m-5px">
               <QXSZ
                 headHeight="34.5px"
                 :width="`${boxWidth}px`"
                 :height="`${boxHeight}px`"
                 v-bind="getBindValue"
               />
+            </div>
+            <div class="write-normal inline-block m-5px">
               <SZJCSJ
                 headHeight="34.5px"
                 :width="`${boxWidth}px`"
                 :height="`${boxHeight}px`"
                 v-bind="getBindValue"
               />
+            </div>
+            <div class="write-normal inline-block m-5px">
               <TRJCSJ
                 headHeight="34.5px"
                 :width="`${boxWidth}px`"
@@ -125,18 +135,14 @@
       })
       const cropsList = ref<any[]>([])
 
-      const modelLeftCol = computed(() =>
-        unref(cropsList).length >= 2 ? 2 : unref(cropsList).length,
-      )
       const modelWidth = computed(
-        () => (boxWidth + 10) * unref(modelLeftCol) + (boxWidth + 10) * 2 + 60,
+        () => (boxWidth + 10) * Math.ceil((cropsList.value.length + 4) / 2) + 60,
       )
 
       async function getData() {
         const resData = await getAgriculturalBasicDetails(props.baseId)
         cropsList.value = resData.crops
         Data.data = resData
-        console.log(modelLeftCol.value)
       }
       const year = computed(() => visualizationStore.getYear)
 
@@ -179,4 +185,14 @@
   })
 </script>
 
-<style scoped></style>
+<style lang="less">
+  .cu-map-modal {
+    .ant-modal {
+      top: 30px;
+      // max-width: 1700px;
+      // width: auto !important;
+      // width: auto !important;
+      // overflow-x: auto;
+    }
+  }
+</style>

src/views/visualization/components/BasicChart.vue

@@ -77,8 +77,8 @@
             name: name,
             data: list,
             type: type,
-            smooth: true,
+            // smooth: true,
-            symbol: 'none',
+            // symbol: 'none',
             itemStyle: {
               color: color.itemColor,
             },
@@ -86,9 +86,9 @@
         })
 
         setOptions({
-          grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
+          grid: { left: '2%', right: '2%', top: '30px', bottom: '2%', containLabel: true },
           legend: {
-            show: false,
+            show: true,
             data: obj.legendData,
             top: '0%',
             right: '0',

src/views/visualization/components/CModal.vue

@@ -24,6 +24,10 @@
         </div>
         <div class="bg-[#1D2D35] mt-14px p-10px">
           <div class="h-full flex flex-col w-full">
+            <div v-if="ppName == '农业'" class="flex justify-end text-14px text-[#76e9f0]">
+              <div class="mr-10px">大春:{{ bigCount }}</div>
+              <div>小春:{{ smallCount }}</div>
+            </div>
             <div class="px-10px">
               <tabs
                 size="small"
@@ -46,6 +50,7 @@
         v-model:visible="modelVisible1"
         :parentId="childParentId"
         :name="childPname"
+        :pName="ppName"
       />
     </a-modal>
   </div>
@@ -69,6 +74,7 @@
   import { useECharts } from '/@/hooks/web/useECharts'
   import { useVisualizationStore } from '/@/store/modules/visualization'
   import { chartBarColors } from './colors'
+  import { add } from 'lodash-es'
   const defaultCrops = [
     {
       name: '农业',
@@ -108,6 +114,9 @@
       name: {
         type: [String],
       },
+      pName: {
+        type: [String],
+      },
     },
     setup(props, { attrs }) {
       const modelVisible = ref(false)
@@ -116,6 +125,7 @@
       const childParentId = ref(null)
 
       const childPname = ref(props.name)
+      const ppName = ref(props.pName ?? props.name)
       const chartRef = ref<HTMLDivElement | null>(null)
 
       const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -123,6 +133,8 @@
       const mode = ref<TabsProps['tabPosition']>('top')
       const activeKey = ref(0)
 
+      const outputs = ref<any>([])
+
       const visualizationStore = useVisualizationStore()
 
       const Data = reactive({
@@ -135,6 +147,13 @@
       const currentTab: any = computed(() => Data.tabs[activeKey.value])
       const cropsId = computed(() => defaultCrops.find((e) => e.name == props.name)?.id)
 
+      const bigCount = computed(() =>
+        add(Number(outputs.value[0] ?? 0), Number(outputs.value[3] ?? 0)),
+      )
+      const smallCount = computed(() =>
+        add(Number(outputs.value[1] ?? 0), Number(outputs.value[2] ?? 0)),
+      )
+
       const tabChange = () => {
         // const { is_end, id } = currentTab.value
 
@@ -165,14 +184,18 @@
         for (const key in resData) {
           if (Object.prototype.hasOwnProperty.call(resData, key)) {
             const obj = resData[key]
+
             list.push({
               name: obj.name,
               list: Object.keys(obj.list).map((e) => obj.list[e]),
               axis: Object.keys(obj.list).map((e) => e),
             })
+            if (ppName.value == '农业' && key == 'output')
+              outputs.value = Object.keys(obj.list).map((e) => obj.list[e])
           }
         }
         Data.list = list
+
         chartsInit()
       }
 
@@ -299,12 +322,16 @@
         () => unref(modelVisible),
         (e) => {
           if (e) {
+            ppName.value = props.pName ?? props.name
             getTabs()
           }
         },
       )
 
       return {
+        bigCount,
+        smallCount,
+        ppName,
         childPname,
         childParentId,
         title,

src/views/visualization/components/CZNYCY.vue

@@ -20,8 +20,11 @@
   const visualizationStore = useVisualizationStore()
   const chartRef = ref<HTMLDivElement | null>(null)
 
+  import { useVContext } from '../useVContext'
+
   export default defineComponent({
     setup() {
+      const { rootEmitter } = useVContext()
       const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
 
       const Data = reactive({
@@ -132,6 +135,10 @@
 
       onMounted(() => {
         getData()
+
+        rootEmitter.on('interval:auto', () => {
+          getData()
+        })
       })
 
       return {

src/views/visualization/components/DXJG.vue

@@ -152,27 +152,32 @@
       let timer: any = null
       function chartAmi() {
         let index = 0
-
         timer && clearInterval(timer)
         timer = setInterval(() => {
+          if (legendData.length == 0) return
           const currentIndex = index % 4
-
+          const legendIndex = index % legendData.length
-          // getInstance()?.dispatchAction({
+          const sleep = index % (legendData.length * 2)
-          //   type: 'legendUnSelect',
+          if (legendIndex == 0 && sleep != 0) {
-          //   name: legendData[currentIndex],
+            legendData.forEach((_, index) => {
-          // })
+              getInstance()?.dispatchAction({
-
+                type: 'legendUnSelect',
-          // getInstance()?.dispatchAction({
+                name: legendData[index],
-          //   type: 'legendSelect',
+              })
-          //   name: legendData[currentIndex],
+            })
-          // })
+          }
 
           getInstance()?.dispatchAction({
-            type: 'showTip',
+            type: 'legendSelect',
-            seriesIndex: 0,
+            name: legendData[legendIndex],
-            dataIndex: currentIndex,
           })
 
+          // getInstance()?.dispatchAction({
+          //   type: 'showTip',
+          //   seriesIndex: 0,
+          //   dataIndex: currentIndex,
+          // })
+
           index++
         }, 3000)
       }

src/views/visualization/components/DXLX.vue

@@ -122,7 +122,7 @@
             },
           ],
           series: obj.series,
-          animationDuration: 3000,
+          animationDuration: 2000,
         })
 
         chartAmi()
@@ -133,23 +133,30 @@
         let index = 0
         timer && clearInterval(timer)
         timer = setInterval(() => {
+          console.log(legendData)
+
+          if (legendData.length == 0) return
           const currentIndex = index % 4
-
+          const legendIndex = index % legendData.length
-          // getInstance()?.dispatchAction({
+          const sleep = index % (legendData.length * 2)
-          //   type: 'legendUnSelect',
+          if (legendIndex == 0 && sleep != 0) {
-          //   name: legendData[currentIndex],
+            legendData.forEach((_, index) => {
-          // })
+              getInstance()?.dispatchAction({
-
+                type: 'legendUnSelect',
-          // getInstance()?.dispatchAction({
+                name: legendData[index],
-          //   type: 'legendSelect',
+              })
-          //   name: legendData[currentIndex],
+            })
-          // })
+          }
 
           getInstance()?.dispatchAction({
-            type: 'showTip',
+            type: 'legendSelect',
-            seriesIndex: 0,
+            name: legendData[legendIndex],
-            dataIndex: currentIndex,
           })
+          // getInstance()?.dispatchAction({
+          //   type: 'showTip',
+          //   seriesIndex: 0,
+          //   dataIndex: currentIndex,
+          // })
 
           index++
         }, 3000)

src/views/visualization/components/Map.vue

@@ -110,7 +110,7 @@
               shadowOffsetX: 0,
               shadowOffsetY: 5,
               borderColor: '#fff',
-              borderWidth: 1,
+              borderWidth: 0.1,
             },
             emphasis: {
               itemStyle: {

src/views/visualization/components/NYQK.vue

@@ -323,14 +323,12 @@
   }
 
   @keyframes spin {
-    from {
+    50% {
-      -webkit-transform: rotate(0deg);
+      transform: scaleX(0);
-      transform: rotate(0deg);
     }
 
-    to {
+    100% {
-      -webkit-transform: rotate(360deg);
+      transform: scaleX(1);
-      transform: rotate(360deg);
     }
   }
 </style>

src/views/visualization/components/QXSZ.vue

@@ -8,8 +8,8 @@
       </div>
     </template>
     <template #right>
-      <div class="py-10px relative">
+      <div class="py-10px relative" v-if="tabList.length > 1">
-        <div class="" v-if="tabList.length > 1">
+        <div class="">
           <Dropdown
             overlayClassName="dropdownClass"
             placement="bottomRight"
@@ -167,6 +167,7 @@
         })
 
         rootEmitter.on('interval:tab', () => {
+          if (Data.tabList.length == 0) return
           const index = timerTabIndex % Data.tabList.length
           onMenuClick({ key: Data.tabList[index].id })
           timerTabIndex++

src/views/visualization/components/SBYXZT.vue

@@ -34,9 +34,12 @@
       <div class="flex-1 px-30px grid grid-cols-2 gap-y-10px gap-x-10px pb-16px">
         <div class="flex" v-for="(item, index) in list" :key="index">
           <div class="text-center">
-            <img class="w-65.5px h-65.5px" :src="item.img" alt="" srcset="" />
+            <WaterEipple :size="65.5">
+              <img :src="item.img" alt="" srcset="" />
+            </WaterEipple>
             <div class="text-12px font-bold text-white mt-11px">{{ item.name }}</div>
           </div>
+
           <div class="ml-18px">
             <div class="flex items-center h-22px">
               <div class="w-7px h-7px bg-[#76E9F0]"></div>
@@ -73,6 +76,7 @@
   import d03 from '/@/assets/images/d03.png'
   import d04 from '/@/assets/images/d04.png'
   import { useVContext } from '../useVContext'
+  import WaterEipple from './WaterEipple.vue'
 
   const defaultDevice = [
     {
@@ -104,6 +108,7 @@
       Menu,
       MenuItem: Menu.Item,
       DownOutlined,
+      WaterEipple,
     },
     props: ['baseId'],
     setup(props) {
@@ -163,6 +168,7 @@
         })
 
         rootEmitter.on('interval:tab', () => {
+          if (Data.tabList.length == 0) return
           const index = timerTabIndex % Data.tabList.length
           onMenuClick({ key: Data.tabList[index].id })
           timerTabIndex++

src/views/visualization/components/SZJCSJ.vue

@@ -8,8 +8,8 @@
       </div>
     </template>
     <template #right>
-      <div class="py-10px relative">
+      <div class="py-10px relative" v-if="tabList.length > 1">
-        <div class="" v-if="tabList.length > 1">
+        <div class="">
           <Dropdown
             overlayClassName="dropdownClass"
             placement="bottomRight"
@@ -182,12 +182,15 @@
         })
 
         rootEmitter.on('interval:tab', () => {
+          if (Data.tabList.length == 0) return
           const index = timerTabIndex % Data.tabList.length
+
           onMenuClick({ key: Data.tabList[index].id })
           timerTabIndex++
         })
 
         rootEmitter.on('interval:tab1', () => {
+          if (Data.menu.length == 0) return
           const index = timerTab1Index % Data.menu.length
           onChangeMenu(Data.menu[index])
           timerTab1Index++

src/views/visualization/components/TRJCSJ.vue

@@ -8,8 +8,8 @@
       </div>
     </template>
     <template #right>
-      <div class="py-10px relative">
+      <div class="py-10px relative" v-if="tabList.length > 1">
-        <div class="" v-if="tabList.length > 1">
+        <div class="">
           <Dropdown
             overlayClassName="dropdownClass"
             placement="bottomRight"
@@ -183,12 +183,14 @@
         })
 
         rootEmitter.on('interval:tab', () => {
+          if (Data.tabList.length == 0) return
           const index = timerTabIndex % Data.tabList.length
           onMenuClick({ key: Data.tabList[index].id })
           timerTabIndex++
         })
 
         rootEmitter.on('interval:tab1', () => {
+          if (Data.menu.length == 0) return
           const index = timerTab1Index % Data.menu.length
           onChangeMenu(Data.menu[index])
           timerTab1Index++
@@ -205,8 +207,8 @@
               name: e.name,
               data: e.data.map((e) => e.value),
               type: 'line',
-              smooth: true,
+              // smooth: true,
-              symbol: 'none',
+              // symbol: 'none',
               itemStyle: {
                 color: color.itemColor,
               },

src/views/visualization/components/WaterEipple.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="water-container" :style="{ width: size + 'px', height: size + 'px' }">
+    <span v-for="item in 4" :key="item" :style="`--i: ${item}`"></span>
+    <div class="z-10">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  defineProps({
+    size: {
+      type: Number,
+    },
+  })
+</script>
+
+<style lang="less" scoped>
+  .water-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    span {
+      position: absolute;
+      box-sizing: border-box;
+      animation: animate 2s linear infinite;
+      animation-delay: calc(0.5s * var(--i));
+      border: none;
+      // border: 6px solid rgba(118, 233, 240, 0.25);
+      // width: 100%;
+      // height: 100%;
+      border-radius: 50%;
+      box-shadow: rgba(118, 233, 240, 0.25) 0px 0px 18px inset;
+    }
+  }
+
+  @keyframes animate {
+    0% {
+      width: 0%;
+      height: 0%;
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    100% {
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+    }
+  }
+</style>

src/views/visualization/index.vue

@@ -18,15 +18,15 @@
               <DZWZ width="440px" height="353px" />
             </div>
           </div>
-          <div class="flex-1 flex ml-15px justify-between bg-[#162126] bg-opacity-40">
+          <div class="flex-1 flex ml-15px justify-between bg-[#03293f] bg-opacity-55">
-            <div class="bg-[#10272f] bg-opacity-00">
+            <div class="bg-gradient-to-l from-transparent to-[#10272f50]">
               <NYQK />
               <NCZQS class="mt-20px" />
             </div>
             <div class="flex-1">
               <Map />
             </div>
-            <div class="bg-[#10272f] bg-opacity-00">
+            <div class="bg-gradient-to-r from-transparent to-[#10272f50]">
               <CZNYCY />
             </div>
           </div>