修改样式

src/api/sys/user.ts

@@ -399,3 +399,17 @@ export function getShrimpPrices(params, mode: ErrorMessageMode = 'modal') {
     },
   )
 }
+/**
+ * @description:getCropYields
+ */
+export function getCropYields(params, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: `/api/rice-shrimp-prices`,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}

src/views/visualization/components/Box.vue

@@ -17,7 +17,7 @@
         <img class="w-76.5px h-7.5px" :src="HeadIcon" alt="" srcset="" />
       </slot>
     </div>
-    <div class="px-14px pb-14px flex-1">
+    <div class="px-14px pb-14px flex-1 -mt-4px">
       <div class="bg-[#293E4E] bg-opacity-30 h-full">
         <slot></slot>
       </div>
@@ -42,7 +42,7 @@
     },
     headHeight: {
       type: String as PropType<string>,
-      default: '49px',
+      default: '34px',
     },
   })
 </script>

src/views/visualization/components/CModal.vue

@@ -159,7 +159,7 @@
           year: visualizationStore.getYear,
           base_id: visualizationStore.getAddresId,
           category_id: cropsId.value,
-          crop_id: props.parentId ?? currentTab.value?.id ?? null,
+          crop_id: currentTab.value?.id ?? props.parentId ?? null,
         })
         const list: any[] = []
         for (const key in resData) {

src/views/visualization/components/Circle.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="relative w-full h-full" style="zoom: 0.55">
+    <div class="container-box">
+      <div class="main" :style="`transform: rotateY(-${count * 90}deg) translateZ(-200px)`">
+        <div
+          class="figure frame"
+          :style="`transform: rotateY(${index * 90}deg) translateZ(400px)`"
+          v-for="(item, index) in pAxis"
+          :key="index"
+        >
+          <div class="text-white px-10px">
+            <div class="text-16px py-4px">{{ item }}</div>
+            <div class="text-left" v-for="(ob, ins) in pDxis" :key="ins">
+              <span>{{ ob.name }} ：</span>
+              <span>{{ ob.data[index] }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="circle-container" style="transform: translateZ(-200px)">
+        <div class="big-circle"></div>
+        <div class="small-circle"></div>
+      </div>
+      <div class="static-container">
+        <div class="all-lights1"></div>
+        <div class="all-lights2"></div>
+        <div class="earth"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, computed, unref, ref, watchEffect } from 'vue'
+
+  export default defineComponent({
+    // :axis="x_axis" :data="series"
+    props: {
+      axis: {
+        type: Array,
+        default: () => [],
+      },
+      data: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    setup(props) {
+      const count = ref(0)
+
+      const pAxis = computed(() => unref(props.axis))
+
+      const pDxis = computed(() => unref(props.data))
+
+      let timer: any = null
+
+      function Interval() {
+        count.value = 0
+        timer?.clearInterval()
+        timer = setInterval(() => {
+          count.value += 1
+        }, 3000)
+      }
+
+      Interval()
+
+      return {
+        count,
+        pAxis,
+        pDxis,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="less">
+  .container-box {
+    position: absolute;
+    top: 38%;
+    left: 0;
+    width: 100%;
+    height: 50%;
+    perspective: 800px;
+    perspective-origin: 50% -50%;
+    clear: both;
+    z-index: 1;
+  }
+
+  .main {
+    position: absolute;
+    top: 5%;
+    left: 35%;
+    transform-style: preserve-3d;
+    z-index: 2;
+    transform-origin: 100px 0px -200px;
+    height: 100px;
+    width: 200px;
+    transition: transform 0.5s ease-in-out 0s;
+
+    .frame {
+      height: 100px;
+      width: 200px;
+      background: #28f2e660;
+      position: absolute;
+      background-size: 100% 100%;
+    }
+
+    .figure,
+    .total-item {
+      text-align: center;
+      overflow: auto;
+    }
+  }
+
+  .circle-container {
+    z-index: 1;
+    position: absolute;
+    top: 5%;
+    left: 38%;
+    transform-style: preserve-3d;
+
+    .big-circle,
+    .small-circle {
+      background-position: 50%;
+      background-size: 100% 100%;
+      border-radius: 50%;
+    }
+
+    .big-circle {
+      width: 1200px;
+      height: 1200px;
+      top: -550px;
+      left: -510px;
+      background-image: url('../../../assets/images/img03.png');
+      transform: rotateX(90deg) translateZ(-70px);
+      position: absolute;
+      background-repeat: no-repeat;
+
+      animation: 20s linear 0s infinite normal none running rotateCircle;
+    }
+
+    .small-circle {
+      width: 600px;
+      height: 600px;
+      top: -250px;
+      left: -200px;
+      background-image: url('../../../assets/images/img02.png');
+      background-repeat: no-repeat;
+      position: absolute;
+      transform: rotateX(90deg) translateZ(0);
+
+      animation: 20s linear 0s infinite normal none running rotateSmallCircle;
+    }
+  }
+
+  .static-container {
+    .all-lights1,
+    .all-lights2 {
+      background-repeat: no-repeat;
+      background-position: 50%;
+      position: absolute;
+      background-size: 100%;
+      transform: rotateX(50deg);
+    }
+
+    .all-lights1 {
+      width: 200px;
+      height: 200px;
+      left: 50%;
+      transform: translateX(-50%);
+      top: -110px;
+      background-image: url('../../../assets/images/img01.png');
+      z-index: 20;
+    }
+
+    .all-lights2 {
+      width: 133.333px;
+      height: 133.333px;
+      left: 50%;
+      transform: translateX(-50%);
+      top: -90px;
+      background-image: url('../../../assets/images/img04.png');
+      z-index: 20;
+    }
+
+    .earth,
+    .steps {
+      background-repeat: no-repeat;
+      background-position: 50%;
+      position: absolute;
+      background-size: 100%;
+    }
+
+    .earth {
+      background-image: url('../../../assets/images/img05.png');
+      z-index: 19;
+      width: 160px;
+      height: 160px;
+      left: 50%;
+      transform: translateX(-50%);
+      top: -100px;
+    }
+  }
+
+  @keyframes rotateCircle {
+    0% {
+      transform: rotateY(0) rotateX(90deg) translateZ(-70px);
+    }
+
+    100% {
+      transform: rotateY(1turn) rotateX(90deg) translateZ(-70px);
+    }
+  }
+  @keyframes rotateSmallCircle {
+    0% {
+      transform: rotateY(0) rotateX(90deg) translateZ(0);
+    }
+
+    100% {
+      transform: rotateY(-1turn) rotateX(90deg) translateZ(0);
+    }
+  }
+</style>

src/views/visualization/components/DXCY.vue

@@ -1,21 +1,27 @@
 <template>
   <Box title="稻虾产业">
+    <template #right>
+      <div class="text-[#76E9F0] text-13px cursor-pointer" @click="changeChart">切换</div>
+    </template>
     <div class="h-full flex flex-col">
-      <div class="flex-1" ref="chartRef"> </div>
+      <div v-show="isChart" class="flex-1" ref="chartRef"> </div>
+      <Circle v-show="!isChart" class="flex-1" :axis="x_axis" :data="series" />
     </div>
   </Box>
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, ref, Ref, onBeforeMount, watch } from 'vue'
+  import { defineComponent, reactive, ref, Ref, onBeforeMount, watch, toRefs } from 'vue'
   import Box from './Box.vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   import { getRiceShrimpIndustry } from '/@/api/sys/other'
   import { useVisualizationStore } from '/@/store/modules/visualization'
   import { chartLineColors } from './colors'
+  import Circle from './Circle.vue'
   export default defineComponent({
     components: {
       Box,
+      Circle,
     },
     setup() {
       const Data = reactive({
@@ -23,11 +29,17 @@
         series: [],
       })
 
+      const isChart = ref(true)
+
+      function changeChart() {
+        isChart.value = !isChart.value
+      }
+
       const chartRef = ref<HTMLDivElement | null>(null)
 
       const visualizationStore = useVisualizationStore()
 
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+      const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
 
       async function getData() {
         const resData = await getRiceShrimpIndustry({
@@ -35,9 +47,10 @@
         })
         Data.x_axis = resData.x_axis
         Data.series = resData.series
+
         chartsInit()
       }
-
+      let legendData = [] as any
       const chartsInit = () => {
         const obj = {
           legendData: [] as any,
@@ -50,16 +63,21 @@
           obj.series.push({
             name: name,
             data: data,
-            smooth: true,
+            smooth: false,
             type: 'line',
-            symbol: 'none',
+            // symbol: 'none',
             itemStyle: {
               color: color.itemColor,
             },
+            areaStyle: {
+              color: color.areaColor,
+            },
           })
         })
+        legendData = obj.legendData
+
         setOptions({
-          grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
+          grid: { left: '2%', right: '4%', top: '10%', bottom: '2%', containLabel: true },
           legend: {
             data: obj.legendData,
             top: '0%',
@@ -111,6 +129,34 @@
           ],
           series: obj.series,
         })
+
+        // chartAmi()
+      }
+
+      let timer: any = null
+      function chartAmi() {
+        let index = 0
+        timer?.clearInterval()
+        timer = setInterval(() => {
+          const currentIndex = index % legendData.length
+          // getInstance()?.dispatchAction({
+          //   type: 'legendUnSelect',
+          //   name: legendData[currentIndex],
+          // })
+
+          // getInstance()?.dispatchAction({
+          //   type: 'legendSelect',
+          //   name: legendData[currentIndex],
+          // })
+
+          getInstance()?.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: currentIndex,
+          })
+
+          index++
+        }, 3000)
       }
 
       onBeforeMount(() => {
@@ -123,6 +169,9 @@
       )
 
       return {
+        isChart,
+        changeChart,
+        ...toRefs(Data),
         chartRef,
       }
     },

src/views/visualization/components/DXJG.vue

@@ -47,8 +47,8 @@
         chartsInit()
       }
 
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+      const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
-
+      let legendData = [] as any
       const chartsInit = () => {
         const obj = {
           legendData: [] as any,
@@ -62,8 +62,8 @@
             name: name,
             data: data,
             type: 'line',
-            smooth: true,
+            smooth: false,
-            symbol: 'none',
+            // symbol: 'none',
             itemStyle: {
               color: color.itemColor,
             },
@@ -72,8 +72,11 @@
             },
           })
         })
+
+        legendData = obj.legendData
+
         setOptions({
-          grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
+          grid: { left: '4%', right: '4%', top: '10%', bottom: '2%', containLabel: true },
           legend: {
             data: obj.legendData,
             top: '0%',
@@ -111,6 +114,8 @@
               axisTick: {
                 show: false,
               },
+              max: 60,
+              min: 0,
               splitLine: {
                 lineStyle: {
                   type: 'solid',
@@ -124,7 +129,35 @@
             },
           ],
           series: obj.series,
+          animationDuration: 2000,
         })
+        chartAmi()
+      }
+      let timer: any = null
+      function chartAmi() {
+        let index = 0
+        timer?.clearInterval()
+        timer = setInterval(() => {
+          const currentIndex = index % 4
+
+          // getInstance()?.dispatchAction({
+          //   type: 'legendUnSelect',
+          //   name: legendData[currentIndex],
+          // })
+
+          // getInstance()?.dispatchAction({
+          //   type: 'legendSelect',
+          //   name: legendData[currentIndex],
+          // })
+
+          getInstance()?.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: currentIndex,
+          })
+
+          index++
+        }, 3000)
       }
 
       async function getData() {

src/views/visualization/components/DXLX.vue

@@ -27,7 +27,7 @@
 
       const visualizationStore = useVisualizationStore()
 
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+      const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
 
       async function getData() {
         const resData = await getRiceShrimpFlow({
@@ -35,9 +35,12 @@
         })
         Data.x_axis = resData.x_axis
         Data.series = resData.series
+
         chartsInit()
       }
 
+      let legendData = [] as any
+
       const chartsInit = () => {
         const obj = {
           legendData: [] as any,
@@ -50,9 +53,9 @@
           obj.series.push({
             name: name,
             data: data,
-            smooth: true,
+            smooth: false,
             type: 'line',
-            symbol: 'none',
+            // symbol: 'none',
             stack: 'Total',
             itemStyle: {
               color: color.itemColor,
@@ -62,6 +65,8 @@
             },
           })
         })
+
+        legendData = obj.legendData
         setOptions({
           grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
           legend: {
@@ -114,7 +119,37 @@
             },
           ],
           series: obj.series,
+          animationDuration: 3000,
         })
+
+        chartAmi()
+      }
+
+      let timer: any = null
+      function chartAmi() {
+        let index = 0
+        timer?.clearInterval()
+        timer = setInterval(() => {
+          const currentIndex = index % 4
+
+          // getInstance()?.dispatchAction({
+          //   type: 'legendUnSelect',
+          //   name: legendData[currentIndex],
+          // })
+
+          // getInstance()?.dispatchAction({
+          //   type: 'legendSelect',
+          //   name: legendData[currentIndex],
+          // })
+
+          getInstance()?.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: currentIndex,
+          })
+
+          index++
+        }, 3000)
       }
 
       onBeforeMount(() => {

src/views/visualization/components/Map.vue

@@ -237,7 +237,7 @@
               symbol: (_, params) => {
                 return mapData[params.dataIndex].img
               },
-              symbolSize: [32, 41],
+              symbolSize: [21, 30],
               symbolOffset: [0, -20],
               z: 9999,
               data: mapData,
@@ -280,8 +280,8 @@
                 color: '#00FFF6',
               },
               symbol: img2,
-              symbolSize: [100, 50],
+              symbolSize: [100, 34],
-              symbolOffset: [0, -60],
+              symbolOffset: [0, -46],
               z: 999,
               data: mapData,
             },

src/views/visualization/components/NYQK.vue

@@ -122,7 +122,14 @@
       function chatInit() {
         setOptions({
           legend: {
-            show: false,
+            show: true,
+            textStyle: {
+              color: '#fff',
+            },
+            orient: 'vertical',
+            right: 0,
+            top: 20,
+            bottom: 20,
           },
           tooltip: {
             trigger: 'item',
@@ -131,7 +138,8 @@
             {
               name: '隆昌农业产业情况',
               type: 'pie',
-              radius: '70%',
+              radius: '80%',
+              center: ['40%', '50%'],
               colorBy: 'data',
               color: colorList,
               itemStyle: {
@@ -140,7 +148,7 @@
                 },
               },
               label: {
-                show: true,
+                show: false,
                 formatter: '{b}\n{d}%',
               },
               data: Data.lyqkData.map((item, index) => {
@@ -152,6 +160,45 @@
             },
           ],
         })
+
+        chartAmi()
+      }
+
+      let timer: any = null
+      function chartAmi() {
+        let index = 0
+        timer?.clearInterval()
+        timer = setInterval(() => {
+          const currentIndex = index % Data.lyqkData.length
+          // getInstance()?.dispatchAction({
+          //   type: 'legendUnSelect',
+          //   name: legendData[currentIndex],
+          // })
+
+          // getInstance()?.dispatchAction({
+          //   type: 'legendSelect',
+          //   name: legendData[currentIndex],
+          // })
+
+          getInstance()?.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: currentIndex,
+          })
+
+          getInstance()?.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0,
+            dataIndex: currentIndex - 1,
+          })
+          getInstance()?.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 0,
+            dataIndex: currentIndex,
+          })
+
+          index++
+        }, 3000)
       }
 
       async function getCropYieldCategory() {

src/views/visualization/components/SZJCSJ.vue

@@ -52,12 +52,11 @@
   import { defineComponent, reactive, ref, Ref, onBeforeMount, computed, toRefs } from 'vue'
   import Box from './Box.vue'
   import { useECharts } from '/@/hooks/web/useECharts'
-  import echarts from '/@/utils/lib/echarts'
   import { getAgriculturalDeviceBasic, getDeviceBaseDataStatics } from '/@/api/sys/other'
   import { DownOutlined } from '@ant-design/icons-vue'
   import { Dropdown, Menu } from 'ant-design-vue'
   import { cloneDeep } from 'lodash'
-  import { chartBarColors } from './colors'
+  import { chartLineColors } from './colors'
   import { dateUtil } from '/@/utils/dateUtil'
   const desList = [
     {
@@ -177,7 +176,7 @@
 
       const chartsInit = () => {
         const data = Data.list.map((e, index) => {
-          const color = chartBarColors[index % chartBarColors.length]
+          const color = chartLineColors[index % chartLineColors.length]
           return {
             axis: e.data.map((e) => dateUtil(e.key).format('HH:mm')),
             name: e.name,
@@ -187,27 +186,21 @@
               type: 'line',
               smooth: true,
               label: {
-                show: true,
+                show: false,
                 position: 'top',
                 color: '#fff',
               },
               itemStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                color: color.itemColor,
-                  {
-                    offset: 0,
-                    color: color.itemColor1,
               },
-                  {
+              areaStyle: {
-                    offset: 1,
+                color: color.areaColor,
-                    color: color.itemColor2,
-                  },
-                ]),
               },
             },
           }
         })
         setOptions({
-          grid: { left: '2%', right: '2%', top: '20px', bottom: '2%', containLabel: true },
+          grid: { left: '2%', right: '2%', top: '30px', bottom: '2%', containLabel: true },
           legend: {
             data: data.map((e) => e.name),
             top: '0%',

src/views/visualization/components/TRJCSJ.vue

@@ -198,7 +198,7 @@
         })
 
         setOptions({
-          grid: { left: '2%', right: '2%', top: '20px', bottom: '2%', containLabel: true },
+          grid: { left: '2%', right: '2%', top: '30px', bottom: '2%', containLabel: true },
           legend: {
             data: data.map((e) => e.name),
             top: '0%',

src/views/visualization/components/colors.ts

@@ -6,11 +6,35 @@ export const chartLineColors = [
   },
   {
     itemColor: '#28F2E6',
-    areaColor: 'rgba(40, 242, 230, 0.4)',
+    areaColor: '#28f2e660',
   },
   {
     itemColor: '#5470c6',
-    areaColor: 'rgba(40, 242, 230, 0.4)',
+    areaColor: '#5470c660',
+  },
+  {
+    itemColor: '#91cc75',
+    areaColor: '#91cc7560',
+  },
+  {
+    itemColor: '#fac858',
+    areaColor: '#fac85860',
+  },
+  {
+    itemColor: '#ee6666',
+    areaColor: '#ee666660',
+  },
+  {
+    itemColor: '#73c0de',
+    areaColor: '#73c0de60',
+  },
+  {
+    itemColor: '#3ba272',
+    areaColor: '#3ba27260',
+  },
+  {
+    itemColor: '#fc8452',
+    areaColor: '#fc845260',
   },
 ]
 export const chartBarColors = [