src/api/sys/user.ts

@@ -385,14 +385,6 @@ export function getShrimpPrices(params, mode: ErrorMessageMode = 'modal') {
   )
 }
 /**
-<<<<<<< HEAD
- * @description:getCropYields
- */
-export function getCropYields(params, mode: ErrorMessageMode = 'modal') {
-  return defHttp.get(
-    {
-      url: `/api/rice-shrimp-prices`,
-=======
  * @description:稻虾价格 - 添加
  */
 export function addShrimpPrices(data, mode: ErrorMessageMode = 'modal') {
@@ -440,7 +432,6 @@ export function getShrimpIndustries(params, mode: ErrorMessageMode = 'modal') {
   return defHttp.get(
     {
       url: `/api/rice-shrimp-industries`,
->>>>>>> 3938cb121abb57822ba7daa68754d32be79f7dce
       params,
     },
     {
@@ -448,8 +439,6 @@ export function getShrimpIndustries(params, mode: ErrorMessageMode = 'modal') {
     },
   )
 }
-<<<<<<< HEAD
-=======
 /**
  * @description:稻虾产业 - 添加
  */
@@ -663,4 +652,3 @@ export function deleteCropYields(id: string, mode: ErrorMessageMode = 'modal') {
     },
   )
 }
->>>>>>> 3938cb121abb57822ba7daa68754d32be79f7dce

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 -mt-4px">
+    <div class="px-14px pb-14px flex-1">
       <div class="bg-[#293E4E] bg-opacity-30 h-full">
         <slot></slot>
       </div>
@@ -42,7 +42,7 @@
     },
     headHeight: {
       type: String as PropType<string>,
-      default: '34px',
+      default: '49px',
     },
   })
 </script>

src/views/visualization/components/CModal.vue

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

src/views/visualization/components/Circle.vue

@@ -1,223 +0,0 @@
-<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,27 +1,21 @@
 <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 v-show="isChart" class="flex-1" ref="chartRef"> </div>
+      <div 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, toRefs } from 'vue'
+  import { defineComponent, reactive, ref, Ref, onBeforeMount, watch } 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({
@@ -29,17 +23,11 @@
         series: [],
       })
 
-      const isChart = ref(true)
-
-      function changeChart() {
-        isChart.value = !isChart.value
-      }
-
       const chartRef = ref<HTMLDivElement | null>(null)
 
       const visualizationStore = useVisualizationStore()
 
-      const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
 
       async function getData() {
         const resData = await getRiceShrimpIndustry({
@@ -47,10 +35,9 @@
         })
         Data.x_axis = resData.x_axis
         Data.series = resData.series
-
         chartsInit()
       }
-      let legendData = [] as any
+
       const chartsInit = () => {
         const obj = {
           legendData: [] as any,
@@ -63,21 +50,16 @@
           obj.series.push({
             name: name,
             data: data,
-            smooth: false,
+            smooth: true,
             type: 'line',
-            // symbol: 'none',
+            symbol: 'none',
             itemStyle: {
               color: color.itemColor,
             },
-            areaStyle: {
-              color: color.areaColor,
-            },
           })
         })
-        legendData = obj.legendData
-
         setOptions({
-          grid: { left: '2%', right: '4%', top: '10%', bottom: '2%', containLabel: true },
+          grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
           legend: {
             data: obj.legendData,
             top: '0%',
@@ -129,34 +111,6 @@
           ],
           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(() => {
@@ -169,9 +123,6 @@
       )
 
       return {
-        isChart,
-        changeChart,
-        ...toRefs(Data),
         chartRef,
       }
     },

src/views/visualization/components/DXJG.vue

@@ -47,8 +47,8 @@
         chartsInit()
       }
 
-      const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
+      const { setOptions } = 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: false,
+            smooth: true,
-            // symbol: 'none',
+            symbol: 'none',
             itemStyle: {
               color: color.itemColor,
             },
@@ -72,11 +72,8 @@
             },
           })
         })
-
-        legendData = obj.legendData
-
         setOptions({
-          grid: { left: '4%', right: '4%', top: '10%', bottom: '2%', containLabel: true },
+          grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
           legend: {
             data: obj.legendData,
             top: '0%',
@@ -114,8 +111,6 @@
               axisTick: {
                 show: false,
               },
-              max: 60,
-              min: 0,
               splitLine: {
                 lineStyle: {
                   type: 'solid',
@@ -129,35 +124,7 @@
             },
           ],
           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, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
 
       async function getData() {
         const resData = await getRiceShrimpFlow({
@@ -35,12 +35,9 @@
         })
         Data.x_axis = resData.x_axis
         Data.series = resData.series
-
         chartsInit()
       }
 
-      let legendData = [] as any
-
       const chartsInit = () => {
         const obj = {
           legendData: [] as any,
@@ -53,9 +50,9 @@
           obj.series.push({
             name: name,
             data: data,
-            smooth: false,
+            smooth: true,
             type: 'line',
-            // symbol: 'none',
+            symbol: 'none',
             stack: 'Total',
             itemStyle: {
               color: color.itemColor,
@@ -65,8 +62,6 @@
             },
           })
         })
-
-        legendData = obj.legendData
         setOptions({
           grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
           legend: {
@@ -119,37 +114,7 @@
             },
           ],
           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: [21, 30],
+              symbolSize: [32, 41],
               symbolOffset: [0, -20],
               z: 9999,
               data: mapData,
@@ -280,8 +280,8 @@
                 color: '#00FFF6',
               },
               symbol: img2,
-              symbolSize: [100, 34],
+              symbolSize: [100, 50],
-              symbolOffset: [0, -46],
+              symbolOffset: [0, -60],
               z: 999,
               data: mapData,
             },

src/views/visualization/components/NYQK.vue

@@ -122,14 +122,7 @@
       function chatInit() {
         setOptions({
           legend: {
-            show: true,
+            show: false,
-            textStyle: {
-              color: '#fff',
-            },
-            orient: 'vertical',
-            right: 0,
-            top: 20,
-            bottom: 20,
           },
           tooltip: {
             trigger: 'item',
@@ -138,8 +131,7 @@
             {
               name: '隆昌农业产业情况',
               type: 'pie',
-              radius: '80%',
+              radius: '70%',
-              center: ['40%', '50%'],
               colorBy: 'data',
               color: colorList,
               itemStyle: {
@@ -148,7 +140,7 @@
                 },
               },
               label: {
-                show: false,
+                show: true,
                 formatter: '{b}\n{d}%',
               },
               data: Data.lyqkData.map((item, index) => {
@@ -160,45 +152,6 @@
             },
           ],
         })
-
-        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,11 +52,12 @@
   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 { chartLineColors } from './colors'
+  import { chartBarColors } from './colors'
   import { dateUtil } from '/@/utils/dateUtil'
   const desList = [
     {
@@ -176,7 +177,7 @@
 
       const chartsInit = () => {
         const data = Data.list.map((e, index) => {
-          const color = chartLineColors[index % chartLineColors.length]
+          const color = chartBarColors[index % chartBarColors.length]
           return {
             axis: e.data.map((e) => dateUtil(e.key).format('HH:mm')),
             name: e.name,
@@ -186,21 +187,27 @@
               type: 'line',
               smooth: true,
               label: {
-                show: false,
+                show: true,
                 position: 'top',
                 color: '#fff',
               },
               itemStyle: {
-                color: color.itemColor,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              },
+                  {
-              areaStyle: {
+                    offset: 0,
-                color: color.areaColor,
+                    color: color.itemColor1,
+                  },
+                  {
+                    offset: 1,
+                    color: color.itemColor2,
+                  },
+                ]),
               },
             },
           }
         })
         setOptions({
-          grid: { left: '2%', right: '2%', top: '30px', bottom: '2%', containLabel: true },
+          grid: { left: '2%', right: '2%', top: '20px', 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: '30px', bottom: '2%', containLabel: true },
+          grid: { left: '2%', right: '2%', top: '20px', bottom: '2%', containLabel: true },
           legend: {
             data: data.map((e) => e.name),
             top: '0%',

src/views/visualization/components/colors.ts

@@ -6,35 +6,11 @@ export const chartLineColors = [
   },
   {
     itemColor: '#28F2E6',
-    areaColor: '#28f2e660',
+    areaColor: 'rgba(40, 242, 230, 0.4)',
   },
   {
     itemColor: '#5470c6',
-    areaColor: '#5470c660',
+    areaColor: 'rgba(40, 242, 230, 0.4)',
-  },
-  {
-    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 = [