修改

src/api/sys/user.ts

@@ -356,3 +356,15 @@ export function addcrops(data, mode: ErrorMessageMode = 'modal') {
     },
   )
 }
+
+export function getCropYields(data, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post(
+    {
+      url: `/api/crops`,
+      data,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}

src/views/visualization/MapModal.vue

@@ -1,51 +1,85 @@
 <template>
-  <a-modal
+  <div class="modelRef">
-    v-bind="getBindValue"
+    <a-modal
-    :bodyStyle="{ background: '#233741', color: '#fff' }"
+      v-bind="getBindValue"
-    :width="modelWidth"
+      :bodyStyle="{ background: '#233741', color: '#fff' }"
-    destroyOnClose
+      destroyOnClose
-  >
+      :width="modelWidth"
-    <template #closeIcon>
+      :getContainer="getContainer"
-      <img
+    >
-        class="w-22px h-22px inline text-0"
+      <template #closeIcon>
-        src="../../assets/images/model-close-icon.png"
+        <img
-        alt=""
+          class="w-22px h-22px inline text-0"
-        srcset=""
+          src="../../assets/images/model-close-icon.png"
-      />
+          alt=""
-    </template>
+          srcset=""
-    <div>
+        />
-      <div class="relative -mt-6px h-30px flex items-center">
+      </template>
-        <div class="flex items-center">
+      <div>
-          <span class="block w-8px h-8px bg-[#6CCDDA] rounded-full mr-10px"></span>
+        <div class="relative -mt-6px h-30px flex items-center">
-          <span
+          <div class="flex items-center">
-            class="bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-18px"
+            <span class="block w-8px h-8px bg-[#6CCDDA] rounded-full mr-10px"></span>
-            >{{ year }}年</span
+            <span
+              class="bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-18px"
+              >{{ year }}年</span
+            >
+          </div>
+          <div
+            class="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
           >
+            {{ baseData.name }}
+          </div>
         </div>
         <div
-          class="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
+          class="text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] mt-6px text-15px font-bold"
+          ><span>总面积：{{ data.areas }} 亩</span>
+          <span class="mx-20px">就业人数：{{ data.workforce }} 人</span>
+          <span>总产值：{{ data.cultivated }} ¥</span></div
         >
-          {{ baseData.name }}
+        <div class="bg-[#1D2D35] mt-14px p-10px">
-        </div>
+          <div class="flex">
-      </div>
+            <div class="grid grid-cols-2 gap-10px flex-1 mr-10px" v-if="cropsList.length">
-      <!-- <div
+              <BasicChart
-        class="text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] mt-6px text-15px font-bold"
+                headHeight="34.5px"
-        ><span>总面积：??亩</span> <span class="mx-20px">就业人数：??人</span>
+                :width="`${boxWidth}px`"
-        <span>总产值：￥??</span></div
+                :height="`${boxHeight}px`"
-      > -->
+                v-for="(item, index) in cropsList"
-      <div class="bg-[#1D2D35] mt-14px p-10px">
+                :key="item.id"
-        <div class="flex">
+                :data="item"
-          <div class="grid grid-cols-2 gap-10px flex-1">{{ cropsList }} </div>
+                :index="index"
-          <div class="grid grid-cols-2 gap-10px flex-1 ml-10px">
+              />
-            <SBYXZT headHeight="34.5px" :width="`${boxWidth}px`" height="280px" v-bind="$attrs" />
+            </div>
-            <QXSZ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
+            <div class="grid grid-cols-2 gap-10px flex-1">
-            <SZJCSJ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
+              <SBYXZT
-            <TRJCSJ headHeight="34.5px" :width="`${boxWidth}px`" height="235px" v-bind="$attrs" />
+                v-bind="getBindValue"
+                headHeight="34.5px"
+                :width="`${boxWidth}px`"
+                :height="`${boxHeight}px`"
+              />
+              <QXSZ
+                headHeight="34.5px"
+                :width="`${boxWidth}px`"
+                :height="`${boxHeight}px`"
+                v-bind="getBindValue"
+              />
+              <SZJCSJ
+                headHeight="34.5px"
+                :width="`${boxWidth}px`"
+                :height="`${boxHeight}px`"
+                v-bind="getBindValue"
+              />
+              <TRJCSJ
+                headHeight="34.5px"
+                :width="`${boxWidth}px`"
+                :height="`${boxHeight}px`"
+                v-bind="getBindValue"
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </a-modal>
-  </a-modal>
+  </div>
 </template>
 
 <script lang="ts">
@@ -55,14 +89,11 @@
   import QXSZ from './components/QXSZ.vue'
   import SZJCSJ from './components/SZJCSJ.vue'
   import TRJCSJ from './components/TRJCSJ.vue'
+  import BasicChart from './components/BasicChart.vue'
   import { useVisualizationStore } from '/@/store/modules/visualization'
   import { getAgriculturalBasicDetails } from '/@/api/sys/other'
   const boxWidth = 400
-  interface cropsType {
+  const boxHeight = 280
-    name: string
-    id: number
-    chart: any
-  }
   export default defineComponent({
     components: {
       [Modal.name]: Modal,
@@ -70,6 +101,7 @@
       QXSZ,
       SZJCSJ,
       TRJCSJ,
+      BasicChart,
     },
     props: {
       baseId: {
@@ -85,21 +117,33 @@
     },
     setup(props, { attrs }) {
       const modelVisible = ref(false)
-      const modelWidth = computed(() => boxWidth * 4 + 78)
+
       const visualizationStore = useVisualizationStore()
 
       const Data = reactive({
-        crops: ref<cropsType[]>([]),
+        data: ref<any>({}),
       })
-      const cropsList = ref([])
+      const cropsList = ref<any[]>([])
+
+      const modelLeftCol = computed(() =>
+        unref(cropsList).length >= 2 ? 2 : unref(cropsList).length,
+      )
+      const modelWidth = computed(
+        () => (boxWidth + 10) * unref(modelLeftCol) + (boxWidth + 10) * 2 + 60,
+      )
 
       async function getData() {
         const resData = await getAgriculturalBasicDetails(props.baseId)
         cropsList.value = resData.crops
+        Data.data = resData
+        console.log(modelLeftCol.value)
       }
-
       const year = computed(() => visualizationStore.getYear)
 
+      const getContainer = () => {
+        return document.body.querySelector(`.modelRef`)
+      }
+
       const getBindValue = computed(() => {
         const attr = {
           ...attrs,
@@ -121,10 +165,12 @@
       )
 
       return {
+        getContainer,
         cropsList,
         getBindValue,
         ...toRefs(Data),
         boxWidth,
+        boxHeight,
         modelWidth,
         year,
         modelVisible,

src/views/visualization/components/BasicChart.vue

@@ -1,25 +1,147 @@
 <template>
-  <div> </div>
+  <Box :title="propsData.name" v-bind="$attrs">
+    <div class="h-full flex flex-col w-full">
+      <div class="flex-1" ref="chartRef"> </div>
+    </div>
+  </Box>
 </template>
 
 <script lang="ts">
-  import { defineComponent, onBeforeMount } from 'vue'
+  import { defineComponent, onBeforeMount, unref, reactive, Ref, ref } from 'vue'
-  import { getAgriculturalBasicDetails } from '/@/api/sys/other'
+  import { getCropYieldQuarterStatics } from '/@/api/sys/other'
-
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import Box from './Box.vue'
+  import { computed } from '@vue/reactivity'
+  import { chartBarColors, chartLineColors } from './colors'
   export default defineComponent({
+    components: {
+      Box,
+    },
     props: {
-      baseId: {
+      data: {
-        type: [String, Number],
+        type: Object,
+      },
+      index: {
+        type: Number,
       },
     },
     setup(props) {
+      const propsData: any = computed(() => props.data)
+
+      const chartRef = ref<HTMLDivElement | null>(null)
+
+      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+
+      const Data = reactive({
+        list: [] as any,
+      })
+
       async function getData() {
-        await getAgriculturalBasicDetails(props.baseId)
+        const { id } = unref(props.data) as any
+        if (!id) return
+        const resData = await getCropYieldQuarterStatics({
+          crop_id: id,
+        })
+        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,
+        }
+        const i = Number(props.index) % 2
+        const colors = i == 1 ? chartBarColors : chartLineColors
+        const type = i == 1 ? 'bar' : 'line'
+        Data.list.forEach(({ name, list }, index) => {
+          const color = colors[index % colors.length]
+
+          obj.legendData.push(name)
+
+          obj.series.push({
+            name: name,
+            data: list,
+            type: type,
+            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,
+        })
+      }
+
       onBeforeMount(() => {
         getData()
       })
-      return {}
+      return {
+        propsData,
+        chartRef,
+      }
     },
   })
 </script>

src/views/visualization/components/CChart.vue

@@ -0,0 +1,249 @@
+<template>
+  <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="h-400px w-full" ref="chartRef"></div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { Tabs, TabPane } from 'ant-design-vue'
+  import { defineComponent, ref, reactive, toRefs, Ref, computed, onBeforeMount } from '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'
+  import { chartBarColors } from './colors'
+  const defaultCrops = [
+    {
+      name: '农业',
+      id: 2,
+    },
+    {
+      name: '渔业',
+      id: 3,
+    },
+    {
+      name: '畜牧业',
+      id: 4,
+    },
+    {
+      name: '林业',
+      id: 5,
+    },
+    {
+      name: '其他',
+      id: 6,
+    },
+  ]
+  export default defineComponent({
+    components: {
+      Tabs,
+      TabPane,
+    },
+    props: {
+      visible: {
+        type: Boolean,
+      },
+      parentId: {
+        type: [String, Number],
+      },
+      name: {
+        type: [String],
+      },
+    },
+    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 title = computed(() => props.name)
+
+      const currentTab: any = computed(() => Data.tabs[activeKey.value])
+      const cropsId = computed(() => defaultCrops.find((e) => e.name == props.name)?.id)
+
+      const tabChange = () => {
+        const { is_end } = currentTab.value
+        console.log(is_end)
+
+        getData()
+      }
+
+      async function getData() {
+        const resData = await getCropYieldQuarterStatics({
+          year: visualizationStore.getYear,
+          base_id: visualizationStore.getAddresId,
+          category_id: cropsId.value,
+          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,
+        }
+        const colors = chartBarColors
+        Data.list.forEach(({ name, list }, index) => {
+          const color = colors[index % colors.length]
+
+          obj.legendData.push(name)
+
+          obj.series.push({
+            name: name,
+            data: list,
+            type: 'bar',
+            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
+        const resData = await getCates({
+          parent_id: props.parentId,
+          crop_type: 1,
+          category_id: cropsId.value,
+          type: 'top',
+        })
+        Data.tabs = [
+          {
+            name: '全部',
+            id: null,
+          },
+        ].concat(resData)
+
+        getData()
+      }
+
+      onBeforeMount(() => {
+        getTabs()
+      })
+
+      return {
+        title,
+        ...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/CModal.vue

@@ -1,72 +1,121 @@
 <template>
-  <a-modal
+  <div class="cmodal">
-    v-bind="$attrs"
+    <a-modal
-    :bodyStyle="{ background: '#233741', color: '#fff' }"
+      v-bind="getBindValue"
-    :width="800"
+      :bodyStyle="{ background: '#233741', color: '#fff' }"
-    destroyOnClose
+      :width="800"
-  >
+      :getContainer="getContainer"
-    <template #closeIcon>
+    >
-      <img
+      <template #closeIcon>
-        class="w-22px h-22px inline text-0"
+        <img
-        src="../../../assets/images/model-close-icon.png"
+          class="w-22px h-22px inline text-0"
-        alt=""
+          src="../../../assets/images/model-close-icon.png"
-        srcset=""
+          alt=""
-      />
+          srcset=""
-    </template>
+        />
-    <div>
+      </template>
-      <div class="relative -mt-6px h-30px flex items-center">
+      <div>
-        <div
+        <div class="relative -mt-6px h-30px flex items-center">
-          class="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
+          <div
-        >
+            class="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
-          222
+          >
-        </div>
+            {{ title }}
-      </div>
+          </div>
-      <div class="bg-[#1D2D35] mt-14px p-10px">
+        </div>
-        <div class="h-full flex flex-col w-full">
+        <div class="bg-[#1D2D35] mt-14px p-10px">
-          <div class="px-10px">
+          <div class="h-full flex flex-col w-full">
-            <tabs
+            <div class="px-10px">
-              size="small"
+              <tabs
-              class="mytabs"
+                size="small"
-              v-model:activeKey="activeKey"
+                class="mytabs"
-              :tab-position="mode"
+                v-model:activeKey="activeKey"
-              :tabBarGutter="10"
+                :tab-position="mode"
-              :tabBarStyle="{ color: '#fff', margin: 0 }"
+                :tabBarGutter="10"
-              @change="tabChange"
+                :tabBarStyle="{ color: '#fff', margin: 0 }"
-            >
+                @change="tabChange"
-              <tab-pane v-for="(item, index) in tabs" :key="index" :tab="item.name" />
+              >
-            </tabs>
+                <tab-pane v-for="(item, index) in tabs" :key="index" :tab="item.name" />
+              </tabs>
+            </div>
+            <div class="h-400px w-full" ref="chartRef"></div>
           </div>
-          <div class="flex-1" ref="chartRef"> </div>
         </div>
       </div>
-    </div>
+      <CModal
-  </a-modal>
+        :footer="null"
+        v-model:visible="modelVisible1"
+        :parentId="childParentId"
+        :name="childPname"
+      />
+    </a-modal>
+  </div>
 </template>
 
 <script lang="ts">
-  import { Modal } from 'ant-design-vue'
+  import { Modal, Tabs, TabPane } from 'ant-design-vue'
-  import { defineComponent, ref, onBeforeMount, reactive, toRefs, Ref, computed } from 'vue'
+  import {
-  import { Tabs, TabPane } from 'ant-design-vue'
+    defineComponent,
+    ref,
+    reactive,
+    toRefs,
+    Ref,
+    computed,
+    unref,
+    watchEffect,
+    watch,
+  } from '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'
-
+  import { chartBarColors } from './colors'
+  const defaultCrops = [
+    {
+      name: '农业',
+      id: 2,
+    },
+    {
+      name: '渔业',
+      id: 3,
+    },
+    {
+      name: '畜牧业',
+      id: 4,
+    },
+    {
+      name: '林业',
+      id: 5,
+    },
+    {
+      name: '其他',
+      id: 6,
+    },
+  ]
   export default defineComponent({
+    name: 'CModal',
     components: {
       [Modal.name]: Modal,
       Tabs,
       TabPane,
     },
     props: {
-      parent: {
+      visible: {
-        type: Object,
+        type: Boolean,
       },
-      chart: {
+      parentId: {
-        type: Object,
+        type: [String, Number],
+      },
+      name: {
+        type: [String],
       },
     },
-    setup(props) {
+    setup(props, { attrs }) {
+      const modelVisible = ref(false)
+      const modelVisible1 = ref(false)
+
+      const childParentId = ref(null)
+
+      const childPname = computed(() => props.name)
       const chartRef = ref<HTMLDivElement | null>(null)
 
       const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -81,32 +130,43 @@
         list: [] as any,
       })
 
+      const title = computed(() => props.name)
+
       const currentTab: any = computed(() => Data.tabs[activeKey.value])
+      const cropsId = computed(() => defaultCrops.find((e) => e.name == props.name)?.id)
 
       const tabChange = () => {
-        getData()
+        const { is_end, id } = currentTab.value
+        console.log(id)
+
+        if (is_end == 0) {
+          childParentId.value = id
+          modelVisible1.value = true
+        } else {
+          getData()
+        }
       }
 
       async function getData() {
-        // const resData = await getCropYieldQuarterStatics({
+        const resData = await getCropYieldQuarterStatics({
-        //   year: visualizationStore.getYear,
+          year: visualizationStore.getYear,
-        //   base_id: props.baseId,
+          base_id: visualizationStore.getAddresId,
-        //   category_id: props.id,
+          category_id: cropsId.value,
-        //   crop_id: currentTab.value?.id ?? null,
+          crop_id: currentTab.value?.id ?? null,
-        // })
+        })
-        // const list: any[] = []
+        const list: any[] = []
-        // for (const key in resData) {
+        for (const key in resData) {
-        //   if (Object.prototype.hasOwnProperty.call(resData, key)) {
+          if (Object.prototype.hasOwnProperty.call(resData, key)) {
-        //     const obj = resData[key]
+            const obj = resData[key]
-        //     list.push({
+            list.push({
-        //       name: obj.name,
+              name: obj.name,
-        //       list: Object.keys(obj.list).map((e) => obj.list[e]),
+              list: Object.keys(obj.list).map((e) => obj.list[e]),
-        //       axis: Object.keys(obj.list).map((e) => e),
+              axis: Object.keys(obj.list).map((e) => e),
-        //     })
+            })
-        //   }
+          }
-        // }
+        }
-        // Data.list = list
+        Data.list = list
-        // chartsInit()
+        chartsInit()
       }
 
       function chartsInit() {
@@ -114,11 +174,8 @@
           legendData: [] as any,
           series: [] as any,
         }
-
+        const colors = chartBarColors
-        return
-
         Data.list.forEach(({ name, list }, index) => {
-          const { colors, serie }: any = props.chart
           const color = colors[index % colors.length]
 
           obj.legendData.push(name)
@@ -126,7 +183,7 @@
           obj.series.push({
             name: name,
             data: list,
-            ...serie,
+            type: 'bar',
             itemStyle: {
               color: color.itemColor,
             },
@@ -189,9 +246,11 @@
       }
 
       async function getTabs() {
+        // const
         const resData = await getCates({
-          category_id: props.id,
+          parent_id: props.parentId,
           crop_type: 1,
+          category_id: cropsId.value,
           type: 'top',
         })
         Data.tabs = [
@@ -200,18 +259,57 @@
             id: null,
           },
         ].concat(resData)
+        activeKey.value = 0
+        getData()
       }
 
-      onBeforeMount(() => {
+      const getBindValue = computed(() => {
-        getTabs()
+        const attr = {
-        getData()
+          ...attrs,
+          ...unref(props),
+          visible: unref(modelVisible),
+        }
+        return attr
       })
+
+      const getChildBindValue = computed(() => {
+        const attr = {
+          ...attrs,
+          visible: unref(modelVisible1),
+          parentId: unref(childParentId),
+        }
+        return attr
+      })
+
+      const getContainer = () => {
+        return document.body.querySelector(`.cmodal`)
+      }
+
+      watchEffect(() => {
+        modelVisible.value = !!props.visible
+      })
+      watch(
+        () => unref(modelVisible),
+        (e) => {
+          if (e) {
+            getTabs()
+          }
+        },
+      )
+
       return {
+        childPname,
+        childParentId,
+        title,
+        getContainer,
         ...toRefs(Data),
         chartRef,
         mode,
         tabChange,
         activeKey,
+        getBindValue,
+        modelVisible1,
+        getChildBindValue,
       }
     },
   })

src/views/visualization/components/CModal1.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="cmodal">
+    <a-modal
+      v-bind="getBindValue"
+      :bodyStyle="{ background: '#233741', color: '#fff' }"
+      :width="800"
+      :getContainer="getContainer"
+      destroyOnClose
+    >
+      <template #closeIcon>
+        <img
+          class="w-22px h-22px inline text-0"
+          src="../../../assets/images/model-close-icon.png"
+          alt=""
+          srcset=""
+        />
+      </template>
+      <div>
+        <div class="relative -mt-6px h-30px flex items-center">
+          <div
+            class="absolute top-0 left-40px right-40px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-24px text-center"
+          >
+            {{ title }}
+          </div>
+        </div>
+        <div class="bg-[#1D2D35] mt-14px p-10px">
+          <CChart v-bind="getBindValue" />
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script lang="ts">
+  import { Modal } from 'ant-design-vue'
+  import { defineComponent, ref, computed, unref, watchEffect } from 'vue'
+  import CChart from './CChart.vue'
+  export default defineComponent({
+    components: {
+      [Modal.name]: Modal,
+      CChart,
+    },
+    props: {
+      visible: {
+        type: Boolean,
+      },
+      parentId: {
+        type: [String, Number],
+      },
+      name: {
+        type: [String],
+      },
+    },
+    setup(props, { attrs }) {
+      const modelVisible = ref(false)
+
+      const title = computed(() => props.name)
+
+      const getBindValue = computed(() => {
+        const attr = {
+          ...attrs,
+          ...unref(props),
+          visible: unref(modelVisible),
+        }
+        return attr
+      })
+
+      const getContainer = () => {
+        return document.body.querySelector(`.cmodal`)
+      }
+
+      watchEffect(() => {
+        modelVisible.value = !!props.visible
+      })
+
+      return {
+        title,
+        getContainer,
+        getBindValue,
+      }
+    },
+  })
+</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/Footer.vue

@@ -104,7 +104,6 @@
         [find?.value ?? '其他']: [...(acc[item.type] ?? []), item],
       }
     }, {})
-    console.log(friendlinks.value)
   }
 
   function onClick(e) {

src/views/visualization/components/Map.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative h-full">
+  <div class="relative h-full overflow-hidden">
     <div
       v-if="isBack"
       @click="onBack"
@@ -67,7 +67,6 @@
 
       function mapInit() {
         const mapData: any = []
-        console.log(baseData.value)
 
         // baseData.value.map(({ name, address_lng, address_lat, areas, id }) => {
         baseData.value.map((e: any) => {

src/views/visualization/components/NYQK.vue

@@ -30,11 +30,23 @@
         </div>
       </div>
     </div>
+    <CModal v-model:visible="modelVisible" :footer="null" :name="currentData.name" />
   </div>
 </template>
 
 <script lang="ts">
-  import { Ref, ref, defineComponent, onBeforeMount, reactive, toRefs, watch, computed } from 'vue'
+  import {
+    Ref,
+    ref,
+    defineComponent,
+    onBeforeMount,
+    reactive,
+    toRefs,
+    watch,
+    computed,
+    onMounted,
+  } from 'vue'
+  import CModal from './CModal.vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   import { getCitydataStatistics, getCropYieldCategoryStatics } from '/@/api/sys/other'
   import { CountTo } from '/@/components/CountTo'
@@ -91,16 +103,20 @@
   export default defineComponent({
     components: {
       CountTo,
+      CModal,
     },
     setup() {
+      const modelVisible = ref(false)
       const visualizationStore = useVisualizationStore()
       const chartRef = ref<HTMLDivElement | null>(null)
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+      const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
       const Data = reactive({
         cityData: [] as cityDataType[],
         lyqkData: [] as any,
       })
 
+      const currentData = ref<any>({})
+
       const { rootEmitter } = useVContext()
 
       function chatInit() {
@@ -201,6 +217,13 @@
           }, 0) / 10000,
       )
 
+      onMounted(() => {
+        getInstance()?.on('click', (e) => {
+          currentData.value = e.data
+          modelVisible.value = true
+        })
+      })
+
       onBeforeMount(() => {
         getCitydata()
         getCropYieldCategory()
@@ -231,8 +254,10 @@
       )
 
       return {
+        modelVisible,
         chartRef,
         countNumber,
+        currentData,
         ...toRefs(Data),
       }
     },

src/views/visualization/components/NZW.vue

@@ -14,7 +14,7 @@
           <tab-pane v-for="(item, index) in tabs" :key="index" :tab="item.name" />
         </tabs>
       </div>
-      <div class="flex-1" ref="chartRef"> </div>
+      <div class="flex-1 w-full" ref="chartRef"> </div>
     </div>
     <CModal v-model:visible="visibleCModal" :footer="null" :parent="parent" />
   </Box>
@@ -28,7 +28,7 @@
   import { getCates, getCropYieldQuarterStatics } from '/@/api/sys/other'
   import { useECharts } from '/@/hooks/web/useECharts'
   import { useVisualizationStore } from '/@/store/modules/visualization'
-  import CModal from './CModal.vue'
+  import CModal from './CModal1.vue'
 
   export default defineComponent({
     components: {

src/views/visualization/components/SBYXZT.vue

@@ -104,11 +104,7 @@
       MenuItem: Menu.Item,
       DownOutlined,
     },
-    props: {
+    props: ['baseId'],
-      baseId: {
-        type: Number,
-      },
-    },
     setup(props) {
       console.log('===SBYZT')
       console.log(props.baseId)

src/views/visualization/components/TRJCSJ.vue

@@ -135,7 +135,7 @@
 
       async function getData() {
         const resData = await getDeviceBaseDataStatics({
-          base_id: Data.currentTab,
+          base_id: props.baseId ?? Data.currentTab,
           device_type: 2,
           device_column: Data.currentMenu,
         })