修改

src/api/sys/other.ts

@@ -74,7 +74,7 @@ export function deleteDevice(device, mode: ErrorMessageMode = 'modal') {
  * @description:基地数据列表
  */
 export function getAgriculturalBasic(
-  params: any = { per_page: 999999, page: 1, parent_id: 0, type: 2 },
+  params: any = { parent_id: 0, type: 2 },
   mode: ErrorMessageMode = 'modal',
 ) {
   return defHttp.get(
@@ -220,3 +220,89 @@ export function getRiceShrimpIndustry(params, mode: ErrorMessageMode = 'modal')
     },
   )
 }
+
+/**
+ * @description:重点产业报表 - 稻虾流向
+ */
+export function getRiceShrimpFlow(params, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: '/api/charts/rice-shrimp-flow',
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+
+/**
+ * @description:重点产业报表 - 大宗物资
+ */
+export function getMateriel(params, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: '/api/charts/materiel',
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+/**
+ * @description:重点产业报表 - 稻虾价格
+ */
+export function getRiceShrimpPrice(params?, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: '/api/charts/rice-shrimp-price',
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+/**
+ * @description:农作物产业分类
+ */
+export function getKeywordsCropsCate(params?, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: '/api/keywords-crops-cate',
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+/**
+ * @description:农作物
+ */
+export function getCates(params?, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: '/api/crops',
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+/**
+ * @description:农作物统计（季度）
+ */
+export function getCropYieldQuarterStatics(params?, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: '/api/crop-yield-quarter-statics',
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}

src/views/visualization/MapModal.vue

@@ -3,6 +3,7 @@
     v-bind="$attrs"
     :bodyStyle="{ background: '#233741', color: '#fff' }"
     :width="modelWidth"
+    destroyOnClose
   >
     <template #closeIcon>
       <img
@@ -18,7 +19,7 @@
           <span class="block w-8px h-8px bg-[#6CCDDA] rounded-full mr-10px"></span>
           <span
             class="bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-18px"
-            >2022年</span
+            >{{ year }}年</span
           >
         </div>
         <div
@@ -33,11 +34,17 @@
         <span>总产值：￥54000000</span></div
       >
       <div class="bg-[#1D2D35] mt-14px p-10px">
-        <div class="grid grid-cols-2 gap-10px">
+        <div class="grid grid-cols-4 gap-10px">
-          <Fisheries :width="`${boxWidth}px`" height="235px" />
+          <NZW
-          <Husbandry :width="`${boxWidth}px`" height="235px" />
+            v-for="(item, index) in crops"
-          <Agriculture :width="`${boxWidth}px`" height="235px" />
+            :key="index"
-          <Forestry :width="`${boxWidth}px`" height="235px" />
+            headHeight="34.5px"
+            :width="`${boxWidth}px`"
+            height="235px"
+            :title="item.name"
+            :id="item.id"
+            :chart="item.chart"
+          />
         </div>
       </div>
     </div>
@@ -46,25 +53,96 @@
 
 <script lang="ts">
   import { Modal } from 'ant-design-vue'
-  import { defineComponent, computed } from 'vue'
+  import { defineComponent, computed, onBeforeMount, reactive, toRefs, ref } from 'vue'
-  import Fisheries from './components/Fisheries.vue'
+  import NZW from './components/NZW.vue'
-  import Husbandry from './components/Husbandry.vue'
+  import { useVisualizationStore } from '/@/store/modules/visualization'
-  import Forestry from './components/Forestry.vue'
+  import { getKeywordsCropsCate } from '/@/api/sys/other'
-  import Agriculture from './components/Agriculture.vue'
+  import { chartLineColors } from './components/colors'
-  const boxWidth = 275
+  const boxWidth = 300
+  // const defaultTab = ['渔业', '畜牧业', '农业', '林业']
+  const defaultTab = [
+    {
+      name: '渔业',
+      chart: {
+        serie: {
+          type: 'bar',
+          symbol: 'none',
+        },
+        colors: chartLineColors,
+      },
+    },
+    {
+      name: '畜牧业',
+      chart: {
+        serie: {
+          type: 'line',
+          symbol: 'none',
+        },
+        colors: chartLineColors,
+      },
+    },
+    {
+      name: '农业',
+      chart: {
+        serie: {
+          type: 'line',
+          symbol: 'none',
+        },
+        colors: chartLineColors,
+      },
+    },
+    {
+      name: '林业',
+      chart: {
+        serie: {
+          type: 'bar',
+          symbol: 'none',
+        },
+        colors: chartLineColors,
+      },
+    },
+  ]
+  interface cropsType {
+    name: string
+    id: number
+    chart: any
+  }
   export default defineComponent({
     components: {
       [Modal.name]: Modal,
-      Fisheries,
+      NZW,
-      Husbandry,
-      Forestry,
-      Agriculture,
     },
     setup() {
-      const modelWidth = computed(() => boxWidth * 2 + 78)
+      const modelWidth = computed(() => boxWidth * 4 + 78)
+      const visualizationStore = useVisualizationStore()
+
+      const Data = reactive({
+        crops: ref<cropsType[]>([]),
+      })
+
+      const year = computed(() => visualizationStore.getYear)
+
+      async function getCrops() {
+        const resData = await getKeywordsCropsCate()
+        console.log(resData)
+
+        const a = resData
+          .filter((e) => defaultTab.findIndex(({ name }) => e.name == name) >= 0)
+          .map((e, i) => Object.assign({}, e, defaultTab[i]))
+        console.log(a)
+
+        Data.crops = a
+      }
+
+      onBeforeMount(() => {
+        getCrops()
+      })
+
       return {
+        ...toRefs(Data),
         boxWidth,
         modelWidth,
+        year,
       }
     },
   })

src/views/visualization/components/Agriculture.vue

@@ -1,64 +1,69 @@
 <template>
-  <Box title="农业">
+  <Box title="稻虾流向">
     <div class="h-full flex flex-col">
-      <div class="py-10px">
-        <ul class="flex items-center justify-center m-0">
-          <li
-            class="mx-11px text-white text-12px cursor-pointer"
-            :class="{ active: currentTab == item.key }"
-            @click="changeTab(item.key)"
-            v-for="item in tabList"
-            :key="item.key"
-            >{{ item.value }}</li
-          >
-        </ul>
-      </div>
       <div class="flex-1" ref="chartRef"> </div>
     </div>
   </Box>
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
+  import { defineComponent, reactive, ref, Ref, onBeforeMount, watch } from 'vue'
   import Box from './Box.vue'
   import { useECharts } from '/@/hooks/web/useECharts'
+  import { getRiceShrimpFlow } from '/@/api/sys/other'
+  import { useVisualizationStore } from '/@/store/modules/visualization'
+  import { chartLineColors } from './colors'
   export default defineComponent({
     components: {
       Box,
     },
     setup() {
-      const tabList = reactive([
+      const Data = reactive({
-        {
+        x_axis: [],
-          key: '0',
+        series: [],
-          value: '全部',
+      })
-        },
-        {
-          key: '1',
-          value: '猪',
-        },
-        {
-          key: '2',
-          value: '牛',
-        },
-      ])
-
-      const currentTab = ref<String>('0')
 
       const chartRef = ref<HTMLDivElement | null>(null)
 
-      const changeTab = (key: String) => {
+      const visualizationStore = useVisualizationStore()
-        if (currentTab.value == key) return
-        currentTab.value = key
-        chartsInit()
-      }
 
       const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
 
+      async function getData() {
+        const resData = await getRiceShrimpFlow({
+          year: visualizationStore.getYear,
+        })
+        Data.x_axis = resData.x_axis
+        Data.series = resData.series
+        chartsInit()
+      }
+
       const chartsInit = () => {
+        const obj = {
+          legendData: [] as any,
+          series: [] as any,
+        }
+
+        Data.series.forEach(({ name, data }, index) => {
+          const color = chartLineColors[index % chartLineColors.length]
+          obj.legendData.push(name)
+          obj.series.push({
+            name: name,
+            data: data,
+            type: 'line',
+            symbol: 'none',
+            itemStyle: {
+              color: color.itemColor,
+            },
+            areaStyle: {
+              color: color.areaColor,
+            },
+          })
+        })
         setOptions({
           grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
           legend: {
-            data: ['销售水量', '主营业务'],
+            data: obj.legendData,
             top: '0%',
             right: '0',
             textStyle: {
@@ -76,7 +81,7 @@
           },
           xAxis: {
             type: 'category',
-            data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
+            data: Data.x_axis,
             axisTick: {
               show: false,
             },
@@ -105,44 +110,21 @@
               },
             },
           ],
-          series: [
+          series: obj.series,
-            {
-              name: '销售水量',
-              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
-              type: 'line',
-              symbol: 'none',
-              itemStyle: {
-                color: '#00F4B9',
-              },
-              areaStyle: {
-                color: 'rgba(0, 244, 185, 0.4)',
-              },
-            },
-            {
-              name: '主营业务',
-              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30].reverse(),
-              type: 'line',
-              symbol: 'none',
-              itemStyle: {
-                color: '#28F2E6',
-              },
-              areaStyle: {
-                color: 'rgba(40, 242, 230, 0.4)',
-              },
-            },
-          ],
         })
       }
 
-      onMounted(() => {
+      onBeforeMount(() => {
-        chartsInit()
+        getData()
       })
 
+      watch(
+        () => visualizationStore.getYear,
+        () => getData(),
+      )
+
       return {
-        tabList,
-        currentTab,
         chartRef,
-        changeTab,
       }
     },
   })

src/views/visualization/components/Box.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bg-[#0A404E] bg-opacity-40 flex flex-col w-full" :style="{ width, height }">
-    <div class="flex items-center justify-between h-49px px-14px relative">
+    <div class="flex items-center justify-between px-14px relative" :style="{ height: headHeight }">
       <div
         class="flex items-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
       >
@@ -37,6 +37,10 @@
       type: String as PropType<string>,
       default: '200px',
     },
+    headHeight: {
+      type: String as PropType<string>,
+      default: '49px',
+    },
   })
 </script>
 

src/views/visualization/components/DXCY.vue

@@ -0,0 +1,134 @@
+<template>
+  <Box title="稻虾产业">
+    <div class="h-full flex flex-col">
+      <div class="flex-1" ref="chartRef"> </div>
+    </div>
+  </Box>
+</template>
+
+<script lang="ts">
+  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'
+  export default defineComponent({
+    components: {
+      Box,
+    },
+    setup() {
+      const Data = reactive({
+        x_axis: [],
+        series: [],
+      })
+
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const visualizationStore = useVisualizationStore()
+
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+      async function getData() {
+        const resData = await getRiceShrimpIndustry({
+          year: visualizationStore.getYear,
+        })
+        Data.x_axis = resData.x_axis
+        Data.series = resData.series
+        chartsInit()
+      }
+
+      const chartsInit = () => {
+        const obj = {
+          legendData: [] as any,
+          series: [] as any,
+        }
+
+        Data.series.forEach(({ name, data }, index) => {
+          const color = chartLineColors[index % chartLineColors.length]
+          obj.legendData.push(name)
+          obj.series.push({
+            name: name,
+            data: data,
+            type: 'line',
+            symbol: 'none',
+            itemStyle: {
+              color: color.itemColor,
+            },
+          })
+        })
+        setOptions({
+          grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
+          legend: {
+            data: obj.legendData,
+            top: '0%',
+            right: '0',
+            textStyle: {
+              color: '#ffffff',
+            },
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: Data.x_axis,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: '#fff',
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'solid',
+                  color: '#8EEEFF',
+                  opacity: 0.3,
+                },
+              },
+              axisLabel: {
+                color: '#fff',
+              },
+            },
+          ],
+          series: obj.series,
+        })
+      }
+
+      onBeforeMount(() => {
+        getData()
+      })
+
+      watch(
+        () => visualizationStore.getYear,
+        () => getData(),
+      )
+
+      return {
+        chartRef,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="less">
+  .active {
+    @apply font-bold text-15px text-[#76E9F0];
+  }
+</style>

src/views/visualization/components/DXJG.vue

@@ -0,0 +1,153 @@
+<template>
+  <Box title="稻虾价格">
+    <div class="h-full flex flex-col">
+      <div class="flex-1" ref="chartRef"> </div>
+    </div>
+  </Box>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, Ref, onBeforeMount } from 'vue'
+  import Box from './Box.vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import { getRiceShrimpPrice } from '/@/api/sys/other'
+  import { chartLineColors } from './colors'
+  export default defineComponent({
+    components: {
+      Box,
+    },
+    setup() {
+      const tabList = reactive([
+        {
+          key: '0',
+          value: '全部',
+        },
+        {
+          key: '1',
+          value: '鱼',
+        },
+        {
+          key: '2',
+          value: '虾',
+        },
+      ])
+
+      const Data = reactive({
+        x_axis: [],
+        series: [],
+      })
+
+      const currentTab = ref<String>('0')
+
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const changeTab = (key: String) => {
+        if (currentTab.value == key) return
+        currentTab.value = key
+        chartsInit()
+      }
+
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+      const chartsInit = () => {
+        const obj = {
+          legendData: [] as any,
+          series: [] as any,
+        }
+
+        Data.series.forEach(({ name, data }, index) => {
+          const color = chartLineColors[index % chartLineColors.length]
+          obj.legendData.push(name + '')
+          obj.series.push({
+            name: name,
+            data: data,
+            type: 'line',
+            // symbol: 'none',
+            itemStyle: {
+              color: color.itemColor,
+            },
+            areaStyle: {
+              color: color.areaColor,
+            },
+          })
+        })
+        setOptions({
+          grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
+          legend: {
+            data: obj.legendData,
+            top: '0%',
+            right: '0',
+            textStyle: {
+              color: '#ffffff',
+            },
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: Data.x_axis,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: '#fff',
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'solid',
+                  color: '#8EEEFF',
+                  opacity: 0.3,
+                },
+              },
+              axisLabel: {
+                color: '#fff',
+              },
+            },
+          ],
+          series: obj.series,
+        })
+      }
+
+      async function getData() {
+        const resData = await getRiceShrimpPrice()
+        Data.x_axis = resData.x_axis
+        Data.series = resData.series
+        chartsInit()
+      }
+
+      onBeforeMount(() => {
+        getData()
+      })
+
+      return {
+        tabList,
+        currentTab,
+        chartRef,
+        changeTab,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="less">
+  .active {
+    @apply font-bold text-15px text-[#76E9F0];
+  }
+</style>

src/views/visualization/components/DXLX.vue

@@ -0,0 +1,137 @@
+<template>
+  <Box title="稻虾流向">
+    <div class="h-full flex flex-col">
+      <div class="flex-1" ref="chartRef"> </div>
+    </div>
+  </Box>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, Ref, onBeforeMount, watch } from 'vue'
+  import Box from './Box.vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import { getRiceShrimpFlow } from '/@/api/sys/other'
+  import { useVisualizationStore } from '/@/store/modules/visualization'
+  import { chartLineColors } from './colors'
+  export default defineComponent({
+    components: {
+      Box,
+    },
+    setup() {
+      const Data = reactive({
+        x_axis: [],
+        series: [],
+      })
+
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const visualizationStore = useVisualizationStore()
+
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+      async function getData() {
+        const resData = await getRiceShrimpFlow({
+          year: visualizationStore.getYear,
+        })
+        Data.x_axis = resData.x_axis
+        Data.series = resData.series
+        chartsInit()
+      }
+
+      const chartsInit = () => {
+        const obj = {
+          legendData: [] as any,
+          series: [] as any,
+        }
+
+        Data.series.forEach(({ name, data }, index) => {
+          const color = chartLineColors[index % chartLineColors.length]
+          obj.legendData.push(name)
+          obj.series.push({
+            name: name,
+            data: data,
+            type: 'line',
+            symbol: 'none',
+            itemStyle: {
+              color: color.itemColor,
+            },
+            areaStyle: {
+              color: color.areaColor,
+            },
+          })
+        })
+        setOptions({
+          grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
+          legend: {
+            data: obj.legendData,
+            top: '0%',
+            right: '0',
+            textStyle: {
+              color: '#ffffff',
+            },
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: Data.x_axis,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: '#fff',
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'solid',
+                  color: '#8EEEFF',
+                  opacity: 0.3,
+                },
+              },
+              axisLabel: {
+                color: '#fff',
+              },
+            },
+          ],
+          series: obj.series,
+        })
+      }
+
+      onBeforeMount(() => {
+        getData()
+      })
+
+      watch(
+        () => visualizationStore.getYear,
+        () => getData(),
+      )
+
+      return {
+        chartRef,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="less">
+  .active {
+    @apply font-bold text-15px text-[#76E9F0];
+  }
+</style>

src/views/visualization/components/DZWZ.vue

@@ -0,0 +1,175 @@
+<template>
+  <Box title="大宗物质">
+    <div class="h-full flex flex-col">
+      <div class="py-10px">
+        <ul class="flex items-center justify-center m-0">
+          <li
+            class="mx-11px text-white text-12px cursor-pointer"
+            :class="{ active: currentTab == item.key }"
+            @click="changeTab(item.key)"
+            v-for="item in tabList"
+            :key="item.key"
+            >{{ item.value }}</li
+          >
+        </ul>
+      </div>
+      <div class="flex-1" ref="chartRef"> </div>
+    </div>
+  </Box>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, ref, Ref, onBeforeMount } from 'vue'
+  import Box from './Box.vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import { getMateriel } from '/@/api/sys/other'
+  import { useVisualizationStore } from '/@/store/modules/visualization'
+  import { chartBarColors } from './colors'
+  export default defineComponent({
+    components: {
+      Box,
+    },
+    setup() {
+      const tabList = reactive([
+        {
+          key: '1',
+          value: '饲料',
+        },
+        {
+          key: '2',
+          value: '肥料',
+        },
+      ])
+
+      const Data = reactive({
+        x_axis: [],
+        series: [],
+      })
+
+      const currentTab = ref<String>('1')
+
+      const visualizationStore = useVisualizationStore()
+
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const changeTab = (key: String) => {
+        if (currentTab.value == key) return
+        currentTab.value = key
+        getData()
+      }
+
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+      async function getData() {
+        const resData = await getMateriel({
+          year: visualizationStore.getYear,
+          type: currentTab.value,
+        })
+        Data.x_axis = resData.x_axis
+        Data.series = resData.series
+        chartsInit()
+      }
+
+      const chartsInit = () => {
+        const obj = {
+          legendData: [] as any,
+          series: [] as any,
+        }
+        Data.series.forEach(({ name, data, diffs }, index) => {
+          const color = chartBarColors[index % chartBarColors.length]
+          obj.legendData.push(name)
+
+          obj.series.push({
+            name: 'Placeholder',
+            type: 'bar',
+            stack: 'Total' + index,
+            itemStyle: {
+              borderColor: 'transparent',
+              color: 'transparent',
+            },
+            data: data,
+          })
+          obj.series.push({
+            name: name,
+            type: 'bar',
+            stack: 'Total' + index,
+            itemStyle: {
+              color: color.itemColor1,
+            },
+            label: {
+              show: true,
+              position: 'inside',
+              color: '#fff',
+            },
+            data: diffs,
+          })
+        })
+        setOptions({
+          grid: { left: '2%', right: '2%', top: '3%', bottom: '2%', containLabel: true },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+            formatter: function (params) {
+              var tar = params[1]
+              return tar.name + '<br/>' + tar.seriesName + ' : ' + (tar?.value ?? 0)
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: Data.x_axis,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: '#fff',
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'solid',
+                  color: '#8EEEFF',
+                  opacity: 0.3,
+                },
+              },
+              axisLabel: {
+                color: '#fff',
+              },
+            },
+          ],
+          series: obj.series,
+        })
+      }
+
+      onBeforeMount(() => {
+        getData()
+      })
+
+      return {
+        tabList,
+        currentTab,
+        chartRef,
+        changeTab,
+      }
+    },
+  })
+</script>
+
+<style scoped lang="less">
+  .active {
+    @apply font-bold text-15px text-[#76E9F0];
+  }
+</style>

src/views/visualization/components/Fisheries.vue

@@ -1,28 +1,18 @@
 <template>
   <Box title="稻虾价格">
     <div class="h-full flex flex-col">
-      <div class="py-10px">
-        <ul class="flex items-center justify-center m-0">
-          <li
-            class="mx-11px text-white text-12px cursor-pointer"
-            :class="{ active: currentTab == item.key }"
-            @click="changeTab(item.key)"
-            v-for="item in tabList"
-            :key="item.key"
-            >{{ item.value }}</li
-          >
-        </ul>
-      </div>
       <div class="flex-1" ref="chartRef"> </div>
     </div>
   </Box>
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
+  import { defineComponent, reactive, ref, Ref, onBeforeMount } from 'vue'
   import Box from './Box.vue'
   import { useECharts } from '/@/hooks/web/useECharts'
-  import echarts from '/@/utils/lib/echarts'
+  import { getRiceShrimpPrice } from '/@/api/sys/other'
+  import { chartLineColors } from './colors'
+  import { array } from 'vue-types'
   export default defineComponent({
     components: {
       Box,
@@ -43,6 +33,11 @@
         },
       ])
 
+      const Data = reactive({
+        x_axis: [],
+        series: [],
+      })
+
       const currentTab = ref<String>('0')
 
       const chartRef = ref<HTMLDivElement | null>(null)
@@ -56,8 +51,37 @@
       const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
 
       const chartsInit = () => {
+        const obj = {
+          legendData: [] as any,
+          series: [] as any,
+        }
+
+        Data.series.forEach(({ name, data }, index) => {
+          const color = chartLineColors[index % chartLineColors.length]
+          obj.legendData.push(name + '')
+          obj.series.push({
+            name: name,
+            data: data,
+            type: 'line',
+            symbol: 'none',
+            itemStyle: {
+              color: color.itemColor,
+            },
+            areaStyle: {
+              color: color.areaColor,
+            },
+          })
+        })
         setOptions({
-          grid: { left: '2%', right: '2%', top: '3%', bottom: '2%', containLabel: true },
+          grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
+          legend: {
+            data: obj.legendData,
+            top: '0%',
+            right: '0',
+            textStyle: {
+              color: '#ffffff',
+            },
+          },
           tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -69,7 +93,7 @@
           },
           xAxis: {
             type: 'category',
-            data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
+            data: Data.x_axis,
             axisTick: {
               show: false,
             },
@@ -98,34 +122,19 @@
               },
             },
           ],
-          series: [
+          series: obj.series,
-            {
-              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
-              type: 'bar',
-              label: {
-                show: true,
-                position: 'top',
-                color: '#fff',
-              },
-              itemStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: '#76E9F0',
-                  },
-                  {
-                    offset: 1,
-                    color: '#1A3537',
-                  },
-                ]),
-              },
-            },
-          ],
         })
       }
 
-      onMounted(() => {
+      async function getData() {
+        const resData = await getRiceShrimpPrice()
+        Data.x_axis = resData.x_axis
+        Data.series = resData.series
         chartsInit()
+      }
+
+      onBeforeMount(() => {
+        getData()
       })
 
       return {

src/views/visualization/components/Forestry.vue

@@ -1,5 +1,5 @@
 <template>
-  <Box title="林业">
+  <Box title="大宗物质">
     <div class="h-full flex flex-col">
       <div class="py-10px">
         <ul class="flex items-center justify-center m-0">
@@ -19,43 +19,91 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, ref, Ref, onMounted } from 'vue'
+  import { defineComponent, reactive, ref, Ref, onBeforeMount } from 'vue'
   import Box from './Box.vue'
   import { useECharts } from '/@/hooks/web/useECharts'
-  import echarts from '/@/utils/lib/echarts'
+  import { getMateriel } from '/@/api/sys/other'
+  import { useVisualizationStore } from '/@/store/modules/visualization'
+  import { chartBarColors } from './colors'
   export default defineComponent({
     components: {
       Box,
     },
     setup() {
       const tabList = reactive([
-        {
-          key: '0',
-          value: '全部',
-        },
         {
           key: '1',
-          value: '鱼',
+          value: '饲料',
         },
         {
           key: '2',
-          value: '虾',
+          value: '肥料',
         },
       ])
 
-      const currentTab = ref<String>('0')
+      const Data = reactive({
+        x_axis: [],
+        series: [],
+      })
+
+      const currentTab = ref<String>('1')
+
+      const visualizationStore = useVisualizationStore()
 
       const chartRef = ref<HTMLDivElement | null>(null)
 
       const changeTab = (key: String) => {
         if (currentTab.value == key) return
         currentTab.value = key
-        chartsInit()
+        getData()
       }
 
       const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
 
+      async function getData() {
+        const resData = await getMateriel({
+          year: visualizationStore.getYear,
+          type: currentTab.value,
+        })
+        Data.x_axis = resData.x_axis
+        Data.series = resData.series
+        chartsInit()
+      }
+
       const chartsInit = () => {
+        const obj = {
+          legendData: [] as any,
+          series: [] as any,
+        }
+        Data.series.forEach(({ name, data, diffs }, index) => {
+          const color = chartBarColors[index % chartBarColors.length]
+          obj.legendData.push(name)
+
+          obj.series.push({
+            name: 'Placeholder',
+            type: 'bar',
+            stack: 'Total' + index,
+            itemStyle: {
+              borderColor: 'transparent',
+              color: 'transparent',
+            },
+            data: data,
+          })
+          obj.series.push({
+            name: name,
+            type: 'bar',
+            stack: 'Total' + index,
+            itemStyle: {
+              color: color.itemColor1,
+            },
+            label: {
+              show: true,
+              position: 'inside',
+              color: '#fff',
+            },
+            data: diffs,
+          })
+        })
         setOptions({
           grid: { left: '2%', right: '2%', top: '3%', bottom: '2%', containLabel: true },
           tooltip: {
@@ -66,10 +114,14 @@
                 color: '#019680',
               },
             },
+            formatter: function (params) {
+              var tar = params[1]
+              return tar.name + '<br/>' + tar.seriesName + ' : ' + (tar?.value ?? 0)
+            },
           },
           xAxis: {
             type: 'category',
-            data: [...new Array(10)].map((_item, index) => `${index + 6}:00`),
+            data: Data.x_axis,
             axisTick: {
               show: false,
             },
@@ -98,34 +150,12 @@
               },
             },
           ],
-          series: [
+          series: obj.series,
-            {
-              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
-              type: 'bar',
-              label: {
-                show: true,
-                position: 'top',
-                color: '#fff',
-              },
-              itemStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: '#76E9F0',
-                  },
-                  {
-                    offset: 1,
-                    color: '#1A3537',
-                  },
-                ]),
-              },
-            },
-          ],
         })
       }
 
-      onMounted(() => {
+      onBeforeMount(() => {
-        chartsInit()
+        getData()
       })
 
       return {

src/views/visualization/components/Husbandry.vue

@@ -12,7 +12,7 @@
   import { useECharts } from '/@/hooks/web/useECharts'
   import { getRiceShrimpIndustry } from '/@/api/sys/other'
   import { useVisualizationStore } from '/@/store/modules/visualization'
-
+  import { chartLineColors } from './colors'
   export default defineComponent({
     components: {
       Box,
@@ -35,21 +35,32 @@
         })
         Data.x_axis = resData.x_axis
         Data.series = resData.series
-        console.log(Data)
         chartsInit()
       }
 
       const chartsInit = () => {
-        const legendData = []
+        const obj = {
-        const series = []
+          legendData: [] as any,
-        Data.series.forEach((e) => {
+          series: [] as any,
-          legendData.push(e.name)
+        }
+
+        Data.series.forEach(({ name, data }, index) => {
+          const color = chartLineColors[index % chartLineColors.length]
+          obj.legendData.push(name)
+          obj.series.push({
+            name: name,
+            data: data,
+            type: 'line',
+            symbol: 'none',
+            itemStyle: {
+              color: color.itemColor,
+            },
+          })
         })
-        return
         setOptions({
           grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
           legend: {
-            data: ['销售水量', '主营业务'],
+            data: obj.legendData,
             top: '0%',
             right: '0',
             textStyle: {
@@ -96,32 +107,7 @@
               },
             },
           ],
-          series: [
+          series: obj.series,
-            {
-              name: '销售水量',
-              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30],
-              type: 'line',
-              symbol: 'none',
-              itemStyle: {
-                color: '#00F4B9',
-              },
-              areaStyle: {
-                color: 'rgba(0, 244, 185, 0.4)',
-              },
-            },
-            {
-              name: '主营业务',
-              data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30].reverse(),
-              type: 'line',
-              symbol: 'none',
-              itemStyle: {
-                color: '#28F2E6',
-              },
-              areaStyle: {
-                color: 'rgba(40, 242, 230, 0.4)',
-              },
-            },
-          ],
         })
       }
 

src/views/visualization/components/Map.vue

@@ -10,12 +10,13 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, Ref, onMounted } from 'vue'
+  import { defineComponent, ref, Ref, onMounted, watch } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   import { registerMap } from 'echarts'
   import { deepMerge } from '/@/utils'
   import { useVContext } from '../useVContext'
   import { getAgriculturalBasic } from '/@/api/sys/other'
+  import { useVisualizationStore } from '/@/store/modules/visualization'
   const domImg = document.createElement('img')
   domImg.style.height = '8px'
   domImg.src =
@@ -28,6 +29,7 @@
   const img2 = 'image://https://www.makeapie.cn/asset/get/s/data-1619318279159-o6ZbTGoO0.png'
   export default defineComponent({
     setup() {
+      const visualizationStore = useVisualizationStore()
       const chartRef = ref<HTMLDivElement | null>(null)
       const isBack = ref<boolean>(false)
       const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -36,16 +38,10 @@
 
       const { rootEmitter } = useVContext()
 
-      const mapData = [
+      const baseData = ref([])
-        {
-          name: '古湖街道',
-          value: [105.243227, 29.340601],
-          datas: 768,
-          img: 'image://https://www.makeapie.cn/asset/get/s/data-1619059442567-s5l7-f8Eu9.png',
-        },
-      ]
 
       function onBack() {
+        visualizationStore.setAddressId(null)
         rootEmitter.emit('map:back')
         isBack.value = false
         tempMapJSON.value = deepMerge(mapJSON.value)
@@ -53,7 +49,20 @@
       }
 
       function mapInit() {
+        const mapData = [] as any
+        console.log(baseData.value)
+
+        baseData.value.map(({ name, address_lng, address_lat, areas, id }) => {
+          mapData.push({
+            name: name,
+            value: [address_lng, address_lat],
+            datas: areas,
+            id: id,
+            img: 'image://https://www.makeapie.cn/asset/get/s/data-1619059442567-s5l7-f8Eu9.png',
+          })
+        })
         registerMap('lcxz', tempMapJSON.value)
+
         setOptions({
           backgroundColor: 'transparent',
           stateAnimation: {
@@ -257,8 +266,19 @@
         })
       }
 
-      onMounted(async () => {
+      async function getBase() {
-        const _resData = await getAgriculturalBasic()
+        try {
+          const resData = await getAgriculturalBasic({
+            parent_id: visualizationStore.getAddresId,
+            type: 1,
+          })
+          baseData.value = resData ?? []
+        } finally {
+          mapInit()
+        }
+      }
+      async function getData() {
+        const _resData = await getAgriculturalBasic({ type: 2 })
         const _mapData = (await (await import('./lcxz1.json')).default) as any
         _mapData.features.reduce((p, c) => {
           const item = _resData.find((e) => e.name == c.properties.name)
@@ -269,25 +289,39 @@
         }, [])
         mapJSON.value = _mapData
         tempMapJSON.value = deepMerge(mapJSON.value)
-        mapInit()
+        getBase()
+      }
+      onMounted(async () => {
+        await getData()
+
         getInstance()?.on('click', (e) => {
+          if (e.seriesType == 'effectScatter' || e.seriesType == 'scatter') {
+            rootEmitter.emit('base:click', e.data)
+          }
+
           if (e.seriesType == 'map') {
             const temp = mapJSON.value.features.filter((obj) => obj.properties.name == e.name)
-
+            visualizationStore.setAddressId(temp[0].properties?.id)
             rootEmitter.emit('map:click', deepMerge(temp[0].properties))
-
             if (temp) {
               isBack.value = true
               tempMapJSON.value = deepMerge({
                 type: 'FeatureCollection',
                 features: temp,
               })
-              mapInit()
+              // mapInit()
             }
           }
         })
       })
 
+      watch(
+        () => visualizationStore.getAddresId,
+        () => {
+          getBase()
+        },
+      )
+
       return { chartRef, isBack, onBack }
     },
   })

src/views/visualization/components/NYQK.vue

@@ -204,13 +204,11 @@
         getCropYieldCategory()
         //地图点击
         rootEmitter.on('map:click', (e) => {
-          visualizationStore.setAddressId(e.id)
           onChangeMap(e)
           getCropYieldCategory()
         })
         //地图返回
         rootEmitter.on('map:back', () => {
-          visualizationStore.setAddressId(null)
           getCitydata()
           getCropYieldCategory()
         })

src/views/visualization/components/NZW.vue

@@ -0,0 +1,220 @@
+<template>
+  <Box title="农作物" v-bind="$attrs">
+    <div class="h-full flex flex-col w-full">
+      <div class="px-10px">
+        <tabs
+          size="small"
+          class="mytabs"
+          v-model:activeKey="activeKey"
+          :tab-position="mode"
+          :tabBarGutter="10"
+          :tabBarStyle="{ color: '#fff', margin: 0 }"
+          @change="tabChange"
+        >
+          <tab-pane v-for="(item, index) in tabs" :key="index" :tab="item.name" />
+        </tabs>
+      </div>
+      <div class="flex-1" ref="chartRef"> </div>
+    </div>
+  </Box>
+</template>
+
+<script lang="ts">
+  import Box from './Box.vue'
+  import { defineComponent, ref, onBeforeMount, reactive, toRefs, Ref, computed } from 'vue'
+  import { Tabs, TabPane } from 'ant-design-vue'
+  import type { TabsProps } from 'ant-design-vue'
+  import { getCates, getCropYieldQuarterStatics } from '/@/api/sys/other'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import { useVisualizationStore } from '/@/store/modules/visualization'
+
+  export default defineComponent({
+    components: {
+      Box,
+      Tabs,
+      TabPane,
+    },
+    props: {
+      id: {
+        type: Number,
+      },
+      baseId: {
+        type: Number,
+      },
+      chart: {
+        type: Object,
+      },
+    },
+    setup(props) {
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+      const mode = ref<TabsProps['tabPosition']>('top')
+      const activeKey = ref(0)
+
+      const visualizationStore = useVisualizationStore()
+
+      const Data = reactive({
+        tabs: [] as any,
+        list: [] as any,
+      })
+
+      const currentTab: any = computed(() => Data.tabs[activeKey.value])
+
+      const tabChange = () => {
+        getData()
+      }
+
+      async function getData() {
+        const resData = await getCropYieldQuarterStatics({
+          year: visualizationStore.getYear,
+          base_id: props.baseId,
+          category_id: props.id,
+          crop_id: currentTab.value?.id ?? null,
+        })
+        const list: any[] = []
+        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),
+            })
+          }
+        }
+        Data.list = list
+        chartsInit()
+      }
+
+      function chartsInit() {
+        const obj = {
+          legendData: [] as any,
+          series: [] as any,
+        }
+
+        Data.list.forEach(({ name, list }, index) => {
+          const { colors, serie }: any = props.chart
+          const color = colors[index % colors.length]
+
+          obj.legendData.push(name)
+
+          obj.series.push({
+            name: name,
+            data: list,
+            ...serie,
+            itemStyle: {
+              color: color.itemColor,
+            },
+          })
+        })
+
+        setOptions({
+          grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
+          legend: {
+            show: false,
+            data: obj.legendData,
+            top: '0%',
+            right: '0',
+            textStyle: {
+              color: '#ffffff',
+            },
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: Data.list[0]?.axis,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: '#fff',
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'solid',
+                  color: '#8EEEFF',
+                  opacity: 0.3,
+                },
+              },
+              axisLabel: {
+                color: '#fff',
+              },
+            },
+          ],
+          series: obj.series,
+        })
+      }
+
+      async function getTabs() {
+        const resData = await getCates({
+          category_id: props.id,
+          crop_type: 1,
+          type: 'top',
+        })
+        Data.tabs = [
+          {
+            name: '全部',
+            id: null,
+          },
+        ].concat(resData)
+      }
+
+      onBeforeMount(() => {
+        getTabs()
+        getData()
+      })
+      return {
+        ...toRefs(Data),
+        chartRef,
+        mode,
+        tabChange,
+        activeKey,
+      }
+    },
+  })
+</script>
+<style lang="less" scoped>
+  ::v-deep(.mytabs) {
+    .ant-tabs-ink-bar {
+      display: none;
+    }
+
+    .ant-tabs-tab {
+      &:hover {
+        color: #76e9f0;
+      }
+    }
+
+    .ant-tabs-tab-active {
+      .ant-tabs-tab-btn {
+        color: #76e9f0;
+      }
+    }
+
+    .ant-tabs-nav {
+      &::before {
+        display: none;
+      }
+    }
+  }
+</style>

src/views/visualization/components/SZJCSJ.vue

@@ -167,7 +167,7 @@
 
       const chartsInit = () => {
         const data = Data.list.map((e, index) => {
-          const color = chartBarColors[index % Data.list.length]
+          const color = chartBarColors[index % chartBarColors.length]
           return {
             axis: e.data.map((e) => dateUtil(e.key).format('HH:mm')),
             name: e.name,

src/views/visualization/components/TRJCSJ.vue

@@ -168,7 +168,7 @@
 
       const chartsInit = () => {
         const data = Data.list.map((e, index) => {
-          const color = chartLineColors[index % Data.list.length]
+          const color = chartLineColors[index % chartLineColors.length]
           return {
             axis: e.data.map((e) => dateUtil(e.key).format('HH:mm')),
             name: e.name,

src/views/visualization/components/colors.ts

@@ -11,6 +11,7 @@ export const chartLineColors = [
 ]
 export const chartBarColors = [
   {
+    itemColor: '#76E9F0',
     itemColor1: '#76E9F0',
     itemColor2: '#1A3537',
   },

src/views/visualization/index.vue

@@ -6,10 +6,10 @@
       <div class="flex-1 flex justify-between px-20px">
         <div class="flex">
           <div class="grid grid-cols-2 gap-x-10px gap-y-10px">
-            <Fisheries width="440px" height="353px" />
+            <DXJG width="440px" height="353px" />
-            <Husbandry width="440px" height="353px" />
+            <DXCY width="440px" height="353px" />
-            <Agriculture width="440px" height="353px" />
+            <DXLX width="440px" height="353px" />
-            <Forestry width="440px" height="353px" />
+            <DZWZ width="440px" height="353px" />
           </div>
         </div>
         <div class="flex-1 flex ml-15px justify-between bg-[#162126] bg-opacity-60">
@@ -38,7 +38,7 @@
       </div>
       <Footer />
     </div>
-    <MapModal v-model:visible="visibleMapModal" :footer="null" />
+    <MapModal v-model:visible="visibleMapModal" :footer="null" :baseId="baseId" />
   </div>
   <!-- </ScaleScreen> -->
 </template>
@@ -47,10 +47,10 @@
   import { defineComponent, ref, onBeforeMount, reactive } from 'vue'
   import Map from './components/Map.vue'
   import ScaleScreen from '/@/components/ScaleScreen'
-  import Fisheries from './components/Fisheries.vue'
+  import DXJG from './components/DXJG.vue'
-  import Husbandry from './components/Husbandry.vue'
+  import DXCY from './components/DXCY.vue'
-  import Forestry from './components/Forestry.vue'
+  import DZWZ from './components/DZWZ.vue'
-  import Agriculture from './components/Agriculture.vue'
+  import DXLX from './components/DXLX.vue'
   import Head from './components/Head.vue'
   import Footer from './components/Footer.vue'
   import NYQK from './components/NYQK.vue'
@@ -71,10 +71,10 @@
       [Modal.name]: Modal,
       Map,
       ScaleScreen,
-      Fisheries,
+      DXJG,
-      Husbandry,
+      DXCY,
-      Forestry,
+      DZWZ,
-      Agriculture,
+      DXLX,
       NYQK,
       NCZQS,
       CZNYCY,
@@ -88,9 +88,7 @@
       MapModal,
     },
     setup() {
-      const visualizationStore = useVisualizationStore()
+      const baseId = ref('')
-
-      console.log(visualizationStore.getYear)
 
       const vEmitter = mitt()
 
@@ -98,21 +96,21 @@
         rootEmitter: vEmitter,
       })
 
-      const visibleMapModal = ref<boolean>(false)
+      const visibleMapModal = ref<boolean>(true)
-
-      function onMapChange(e) {
-        vEmitter.emit('map:click')
-      }
 
       onBeforeMount(() => {
-        vEmitter.on('map:click', (e) => {
+        vEmitter.on('map:click', () => {
-          console.log(e)
+          // visibleMapModal.value = true
+        })
+        vEmitter.on('base:click', (e) => {
+          baseId.value = e.id
+          visibleMapModal.value = true
         })
       })
 
       return {
         visibleMapModal,
-        onMapChange,
+        baseId,
       }
     },
   })