修改

src/api/sys/other.ts

@@ -1,6 +1,6 @@
-import { defHttp } from '/@/utils/http/axios';
+import { defHttp } from '/@/utils/http/axios'
 
-import { ErrorMessageMode } from '/#/axios';
+import { ErrorMessageMode } from '/#/axios'
 
 /**
  * @description:设备列表
@@ -14,7 +14,7 @@ export function getDevices(params, mode: ErrorMessageMode = 'modal') {
     {
       errorMessageMode: mode,
     },
-  );
+  )
 }
 /**
  * @description:设备类型
@@ -27,7 +27,7 @@ export function getDeviceTypes(mode: ErrorMessageMode = 'modal') {
     {
       errorMessageMode: mode,
     },
-  );
+  )
 }
 /**
  * @description:添加设备
@@ -41,7 +41,7 @@ export function createDevice(data, mode: ErrorMessageMode = 'modal') {
     {
       errorMessageMode: mode,
     },
-  );
+  )
 }
 /**
  * @description:更新设备
@@ -55,7 +55,7 @@ export function updateDevice(device, data, mode: ErrorMessageMode = 'modal') {
     {
       errorMessageMode: mode,
     },
-  );
+  )
 }
 /**
  * @description:删除设备
@@ -68,7 +68,7 @@ export function deleteDevice(device, mode: ErrorMessageMode = 'modal') {
     {
       errorMessageMode: mode,
     },
-  );
+  )
 }
 /**
  * @description:基地数据列表
@@ -85,5 +85,33 @@ export function getAgriculturalBasic(
     {
       errorMessageMode: mode,
     },
-  );
+  )
+}
+/**
+ * @description:基础数据统计
+ * 镇街数据根据城基地数据列表
+ */
+export function getCitydataStatistics(mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: '/api/citydata-statistics',
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+/**
+ * @description:行业产值统计（镇街）
+ */
+export function getCropYieldCategoryStatics(params, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: '/api/crop-yield-category-statics',
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
 }

src/assets/icons/model-close-icon.svg

@@ -0,0 +1,5 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="6240px" height="1520px">
+</svg>

src/views/visualization/MapModal.vue

@@ -0,0 +1,73 @@
+<template>
+  <a-modal
+    v-bind="$attrs"
+    :bodyStyle="{ background: '#233741', color: '#fff' }"
+    :width="modelWidth"
+  >
+    <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="flex items-center">
+          <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
+          >
+        </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"
+        >
+          隆昌基地情况
+        </div>
+      </div>
+      <div
+        class="text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] mt-6px text-15px font-bold"
+        ><span>总面积：1000亩</span> <span class="mx-20px">就业人数：5人</span>
+        <span>总产值：￥54000000</span></div
+      >
+      <div class="bg-[#1D2D35] mt-14px p-10px">
+        <div class="grid grid-cols-2 gap-10px">
+          <Fisheries :width="`${boxWidth}px`" height="235px" />
+          <Husbandry :width="`${boxWidth}px`" height="235px" />
+          <Agriculture :width="`${boxWidth}px`" height="235px" />
+          <Forestry :width="`${boxWidth}px`" height="235px" />
+        </div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  import { Modal } from 'ant-design-vue'
+  import { defineComponent, computed } from 'vue'
+  import Fisheries from './components/Fisheries.vue'
+  import Husbandry from './components/Husbandry.vue'
+  import Forestry from './components/Forestry.vue'
+  import Agriculture from './components/Agriculture.vue'
+  const boxWidth = 275
+  export default defineComponent({
+    components: {
+      [Modal.name]: Modal,
+      Fisheries,
+      Husbandry,
+      Forestry,
+      Agriculture,
+    },
+    setup() {
+      const modelWidth = computed(() => boxWidth * 2 + 78)
+      return {
+        boxWidth,
+        modelWidth,
+      }
+    },
+  })
+</script>
+
+<style scoped></style>

src/views/visualization/components/Head.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="text-4xl text-white flex items-center justify-center relative">
-    <div class="w-1325px h-43px mt-3.5px relative">
+    <div class="w-1099px h-43px relative">
-      <div class="absolute left-0 bottom-0 w-1/4 text-10px h-28px flex items-center justify-end">
+      <div class="absolute left-0 bottom-0 w-340px text-10px h-28px flex items-center justify-end">
-        2022-10-22 10:10
+        {{ state.date }} {{ state.time }}
       </div>
-      <div class="absolute right-0 bottom-0 w-1/4 text-10px h-28px flex items-center justify-start">
+      <div
+        class="absolute right-0 bottom-0 w-340px text-10px h-28px flex items-center justify-start"
+      >
         <div>多云</div>
         <div class="mx-20px">PM2.5</div>
         <div class="flex items-center">
@@ -18,7 +20,42 @@
 </template>
 
 <script setup lang="ts">
+  import { reactive } from 'vue'
   import headTitleImg from '/@/assets/images/head-title.png'
+
+  const state = reactive({
+    date: '',
+    time: '',
+    week: '',
+    showIndex: 0,
+  })
+  // 获取时间接口
+  const getTime = async () => {
+    var myDate = new Date()
+    let month = (myDate.getMonth() + 1).toString().padStart(2, '0')
+    let day = myDate.getDate().toString().padStart(2, '0')
+    let hour = myDate.getHours().toString().padStart(2, '0')
+    let minutes = myDate.getMinutes().toString().padStart(2, '0')
+    let seconed = myDate.getSeconds().toString().padStart(2, '0')
+    state.date = myDate.getFullYear() + '-' + month + '-' + day
+    state.time = hour + ':' + minutes + ':' + seconed
+  }
+
+  setInterval(() => {
+    getTime()
+  }, 1000)
+
+  // 获取当前星期几
+
+  const getWeekDate = () => {
+    var now = new Date()
+    var day = now.getDay()
+    var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+    state.week = weeks[day]
+  }
+  setInterval(() => {
+    getWeekDate()
+  }, 1000 * 60 * 60 * 24)
 </script>
 
 <style scoped></style>

src/views/visualization/components/Map.vue

@@ -6,21 +6,20 @@
       class="absolute left-25px top-25px z-999 text-white border rounded-2px px-30px py-6px text-12px cursor-pointer"
       >返回</div
     >
-    <div ref="chartRef" :style="{ height, width }"> </div>
+    <div ref="chartRef" class="w-full h-[calc(100% - 2px)]"> </div>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType, ref, Ref, onMounted } from 'vue'
+  import { defineComponent, ref, Ref, onMounted } from 'vue'
-
   import { useECharts } from '/@/hooks/web/useECharts'
   import { registerMap } from 'echarts'
   import { deepMerge } from '/@/utils'
-  // import icon from '/@/assets/images/data-address.png'
+  import { useVContext } from '../useVContext'
-
+  import { getAgriculturalBasic } from '/@/api/sys/other'
   const domImg = document.createElement('img')
   domImg.style.height = '8px'
   domImg.src =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE4MTE0OTgyQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE4MTE0OTgzQTdDQzExRUI4Q0RBRkMwQkFGMTY2NDhEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTgxMTQ5ODBBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTgxMTQ5ODFBN0NDMTFFQjhDREFGQzBCQUYxNjY0OEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4v4trwAAAAVklEQVR42mL0D225cu0hAzWAjpY8C9CsL19/wIV4uDnI5gKNYmKgKhjcxrFAggBZiBIuyDhqRQWQOxoVo1ExGhWjUTEaFYMiKoB1LVq1TXZUAI0CCDAAcAlaxCt7dtQAAAAASUVORK5CYII='
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAOlJREFUKFPFkN9qwjAUh09OkzRN0lrbOllhIOxd9h678a0HwkbFWmtsq17I2pE6iuKNbIOdqx/nD+fjI8nL6xxsISPQnrpzRgJte507JP2MtB0ZjvrOfTUchcns0RSLJYADfjhNapMVlHtciEA11WrrqbFGpM6+Xu9+9+k+sPPW8CmePD9t1m/vVsIoTCe78iPnrnKFF+jKLDeejnwHGbWo/4AXPczSMl9kvb1omtRlVnCmXK60bIy1F2tE/BN7DgB8fku8zLdeBxF+lPZIFk8GcXiockOpYExIcWzK2pUjiQTxuN82P7L3BSnVXLvzcNTUAAAAAElFTkSuQmCC'
 
   const domImgHover = document.createElement('img')
   domImgHover.style.height = '8px'
@@ -28,22 +27,15 @@
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAIAAAAmKNuZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFDQ0Q2RjYyQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFDQ0Q2RjYzQTdDRDExRUI4ODUxRDIxRjkzMEExNzg2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUNDRDZGNjBBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUNDRDZGNjFBN0NEMTFFQjg4NTFEMjFGOTMwQTE3ODYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6FboimAAAASklEQVR42mIUnL9XtHsDAzXA69IARjWtXJYX7+FCfyQEKeEyMVAVDG7jWCB+RhaihAsybjQqRqNiNCpGo2I0KoZZVDBSt9oGCDAAhYNrvRu3DWEAAAAASUVORK5CYII='
   const img2 = 'image://https://www.makeapie.cn/asset/get/s/data-1619318279159-o6ZbTGoO0.png'
   export default defineComponent({
-    props: {
+    setup() {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-    },
-    setup(_, { emit }) {
       const chartRef = ref<HTMLDivElement | null>(null)
       const isBack = ref<boolean>(false)
       const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
       const mapJSON = ref()
       const tempMapJSON = ref()
+
+      const { rootEmitter } = useVContext()
+
       const mapData = [
         {
           name: '古湖街道',
@@ -54,6 +46,7 @@
       ]
 
       function onBack() {
+        rootEmitter.emit('map:back')
         isBack.value = false
         tempMapJSON.value = deepMerge(mapJSON.value)
         mapInit()
@@ -62,72 +55,79 @@
       function mapInit() {
         registerMap('lcxz', tempMapJSON.value)
         setOptions({
-          backgroundColor: '#012248',
+          backgroundColor: 'transparent',
           stateAnimation: {
             duration: 100,
           },
           geo: {
             map: 'lcxz',
+            aspectScale: 0.75,
+            layoutCenter: ['50%', '50.5%'],
+            layoutSize: '100%',
+            silent: true,
             roam: false,
-            silent: false,
+            z: 0,
             label: {
               color: '#fff',
-              show: true,
+              show: false,
             },
             itemStyle: {
-              borderColor: '#53D9FF',
+              areaColor: 'rgba(0, 15, 40, 0.5)',
-              borderWidth: 1.3,
+              shadowColor: 'rgba(0, 0, 0, 1)',
-              shadowBlur: 15,
+              shadowBlur: 0,
-              shadowColor: 'rgb(58,115,192)',
+              shadowOffsetX: 0,
-              shadowOffsetX: 7,
+              shadowOffsetY: 5,
-              shadowOffsetY: 6,
+              borderColor: 'rgba(0, 0, 0, 0.7)',
-              areaColor: {
+              borderWidth: 0.5,
-                image: domImg,
-              },
             },
             emphasis: {
               itemStyle: {
-                areaColor: '#8dd7fc',
+                areaColor: '#2AB8FF',
-                color: '#fff',
+                borderWidth: 1,
+                color: 'green',
               },
               label: {
-                color: '#012248',
+                show: false,
               },
             },
           },
           series: [
             {
               type: 'map',
+              zoom: 1.1,
               roam: false,
               map: 'lcxz',
               select: {
                 disabled: true,
               },
               label: {
-                // show: false,
+                show: false,
                 color: '#fff',
               },
               itemStyle: {
-                borderColor: '#2ab8ff',
                 areaColor: {
                   image: domImg,
+                  repeat: 'repeat',
                 },
+                borderColor: 'rgba(147, 235, 248, 1)',
                 borderWidth: 1,
-                shadowColor: 'rgba(0, 0, 0, 0.5)',
+
-                shadowBlur: 0,
+                // shadowColor: 'rgba(128, 217, 248, 1)',
-                shadowOffsetX: 0,
+                // shadowOffsetX: -2,
-                shadowOffsetY: 1,
+                // shadowOffsetY: 2,
+                // shadowBlur: 10,
               },
               emphasis: {
                 label: {
+                  show: false,
                   color: '#fff',
                 },
                 itemStyle: {
                   areaColor: {
-                    image: domImgHover,
+                    image: domImg,
                     repeat: 'repeat',
                   },
-                  borderColor: '#2ab8ff',
+                  borderColor: 'rgba(147, 235, 248, 1)',
                   borderWidth: 1,
                   shadowColor: 'rgba(0, 255, 255, 0.7)',
                   shadowBlur: 10,
@@ -257,14 +257,23 @@
       }
 
       onMounted(async () => {
-        const resData = (await (await import('./lcxz1.json')).default) as any
+        const _resData = await getAgriculturalBasic()
-        mapJSON.value = resData
+        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)
+          if (item) {
+            p.push(Object.assign(c, { properties: item }))
+          }
+          return p
+        }, [])
+        mapJSON.value = _mapData
         tempMapJSON.value = deepMerge(mapJSON.value)
         mapInit()
         getInstance()?.on('click', (e) => {
           if (e.seriesType == 'map') {
             const temp = mapJSON.value.features.filter((obj) => obj.properties.name == e.name)
-            emit('onMapChange', deepMerge(temp[0].properties))
+
+            rootEmitter.emit('map:click', deepMerge(temp[0].properties))
 
             if (temp) {
               isBack.value = true

src/views/visualization/components/NYQK.vue

@@ -4,96 +4,197 @@
       class="text-18px mt-19px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
       >隆昌农业产业情况</div
     >
-    <div class="w-200px h-200px mx-auto mt-10px" ref="chartRef"> </div>
+    <div class="w-full h-200px mx-auto mt-10px" ref="chartRef"> </div>
     <div
       class="font-bold text-18px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-center mt-10px"
     >
-      总产值：2200202万元
+      总产值：
+      <CountTo
+        :startVal="0"
+        :endVal="2200202"
+        class="font-bold text-18px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
+      />
+      万元
     </div>
 
     <div class="grid grid-cols-2 gap-y-20px gap-x-10px mx-10px mt-18px">
-      <div class="flex items-center">
+      <div class="flex items-center" v-for="item in cityData" :key="item.slug">
-        <SvgIcon name="mj-icon" :size="40" color="transparent" />
+        <!-- <SvgIcon :name="item.slug" :size="40" color="transparent" /> -->
+        <img :src="item.icon" alt="" class="w-40px h-40px" srcset="" />
         <div class="text-white ml-6px">
-          <div class="text-12px font-bold">面积</div>
+          <div class="text-12px font-bold">{{ item.name }}</div>
-          <div class="text-10px font-bold mt-4px">794.41 平方公里</div>
+          <div class="text-10px font-bold mt-4px">
+            <CountTo :startVal="0" :endVal="item.value" class="text-10px font-bold" />
+            <span>{{ item.unit }}</span>
           </div>
         </div>
-      <div class="flex items-center">
-        <SvgIcon name="mj-icon" :size="40" color="transparent" />
-        <div class="text-white ml-6px">
-          <div class="text-12px font-bold">人口</div>
-          <div class="text-10px font-bold mt-4px">794.41 万人</div>
-        </div>
-      </div>
-      <div class="flex items-center">
-        <SvgIcon name="mj-icon" :size="40" color="transparent" />
-        <div class="text-white ml-6px">
-          <div class="text-12px font-bold">镇街</div>
-          <div class="text-10px font-bold mt-4px">13个</div>
-        </div>
-      </div>
-      <div class="flex items-center">
-        <SvgIcon name="mj-icon" :size="40" color="transparent" />
-        <div class="text-white ml-6px">
-          <div class="text-12px font-bold">耕地</div>
-          <div class="text-10px font-bold mt-4px">794.41 平方公里</div>
-        </div>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
-  import { Ref, ref, watch } from 'vue'
+  import { Ref, ref, defineComponent, onBeforeMount, reactive, toRefs, watch } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
-  import { SvgIcon } from '/@/components/Icon'
+  import { getCitydataStatistics, getCropYieldCategoryStatics } from '/@/api/sys/other'
-  const props = defineProps({
+  import { CountTo } from '/@/components/CountTo'
-    loading: Boolean,
+  import { useVContext } from '../useVContext'
-    width: {
+  import { deepMerge } from '/@/utils'
-      type: String as PropType<string>,
+  import cityIcon1 from '/@/assets/images/city-1.png'
-      default: '100%',
+  import cityIcon2 from '/@/assets/images/city-2.png'
+  import cityIcon3 from '/@/assets/images/city-3.png'
+  import cityIcon4 from '/@/assets/images/city-4.png'
+
+  interface cityDataType {
+    name: string
+    slug: string
+    unit: string
+    value: number
+    icon: string
+  }
+
+  const cityDefaultData = [
+    {
+      slug: 'city_data_area',
+      name: '面积',
+      value: '0',
+      unit: '平方公里',
+      icon: cityIcon1,
     },
-    height: {
+    {
-      type: String as PropType<string>,
+      slug: 'city_data_population',
-      default: '300px',
+      name: '人口',
+      value: '0',
+      unit: '万人',
+      icon: cityIcon2,
     },
-  })
+    {
+      slug: 'city_data_street',
+      name: '镇街',
+      value: '0',
+      unit: '个',
+      icon: cityIcon3,
+    },
+    {
+      slug: 'city_data_cultivated_area',
+      name: '耕地',
+      value: '0',
+      unit: '万亩',
+      icon: cityIcon4,
+    },
+  ]
+
+  export default defineComponent({
+    components: {
+      CountTo,
+    },
+    setup() {
       const chartRef = ref<HTMLDivElement | null>(null)
       const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
-  watch(
+      const Data = reactive({
-    () => props.loading,
+        cityData: [] as cityDataType[],
-    () => {
+        lyqkData: [] as any,
-      if (props.loading) {
+      })
-        return
+
-      }
+      const { rootEmitter } = useVContext()
+
+      function chatInit() {
         setOptions({
           legend: {
             show: false,
           },
           series: [
             {
-            name: 'Access From',
+              name: '隆昌农业产业情况',
               type: 'pie',
-            radius: '90%',
+              radius: '70%',
+              color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
               label: {
-              show: false,
+                show: true,
               },
-            data: [
+              data: Data.lyqkData,
-              { value: 1048, name: 'Search Engine' },
-              { value: 735, name: 'Direct' },
-              { value: 580, name: 'Email' },
-              { value: 484, name: 'Union Ads' },
-              { value: 300, name: 'Video Ads' },
-            ],
             },
           ],
         })
-    },
+      }
-    {
+
-      immediate: true,
+      async function getCropYieldCategory(params = { year: '2022', base_id: null }) {
+        const { list } = await getCropYieldCategoryStatics(params)
+        const arr = [] as { value: string; name: string }[]
+        for (const key in list) {
+          if (Object.prototype.hasOwnProperty.call(list, key)) {
+            arr.push({
+              value: list[key],
+              name: key,
+            })
+          }
+        }
+        Data.lyqkData = arr
+      }
+
+      //获取所有
+      async function getCitydata() {
+        const resData = await getCitydataStatistics()
+        const temp = [] as cityDataType[]
+        cityDefaultData.forEach((e) => {
+          const obj = deepMerge({}, e)
+          const item: cityDataType = resData.find((r) => r.slug == e.slug)
+          if (item) {
+            obj.value = Number(item.value)
+            obj.unit = item.unit
+          }
+          temp.push(obj)
+        })
+        Data.cityData = temp
+      }
+
+      function onChangeMap(el) {
+        const keys = ['city_data_street']
+        const temp = [] as cityDataType[]
+        cityDefaultData.forEach((e) => {
+          const obj = deepMerge({}, e)
+          if (!keys.includes(e.slug)) {
+            //面积
+            if (e.slug == 'city_data_area') {
+              obj.value = Number(el.areas)
+              obj.unit = '亩'
+            } else if (e.slug == 'city_data_population') {
+              obj.value = el.workforce
+            } else if (e.slug == 'city_data_cultivated_area') {
+              obj.value = el.cultivated
+            }
+            temp.push(obj)
+          }
+        })
+        Data.cityData = temp
+      }
+
+      onBeforeMount(() => {
+        getCitydata()
+        getCropYieldCategory()
+        //地图点击
+        rootEmitter.on('map:click', (e) => {
+          onChangeMap(e)
+        })
+        //地图返回
+        rootEmitter.on('map:back', () => {
+          getCitydata()
+        })
+      })
+
+      watch(
+        () => Data.lyqkData,
+        () => {
+          chatInit()
         },
       )
+
+      return {
+        chartRef,
+        ...toRefs(Data),
+      }
+    },
+  })
 </script>
 
 <style scoped></style>

src/views/visualization/index.vue

@@ -1,50 +1,48 @@
 <template>
   <!-- <ScaleScreen :boxStyle="{ background: '#020603' }" :width="3120" :height="760" :autoScale="false"> -->
-  <div class="overflow-y-scroll bg-[#020603]">
+  <div class="overflow-y-scroll bg-[#020603] bg-img">
     <div class="flex flex-col h-full w-3120px h-760px">
       <Head />
-      <div class="flex-1 flex justify-between py-11px px-20px">
+      <div class="flex-1 flex justify-between px-20px">
         <div class="flex">
-          <div class="grid grid-cols-2 gap-x-16px gap-y-16px">
+          <div class="grid grid-cols-2 gap-x-10px gap-y-10px">
-            <Fisheries width="440px" height="337px" />
+            <Fisheries width="440px" height="353px" />
-            <Husbandry width="440px" height="337px" />
+            <Husbandry width="440px" height="353px" />
-            <Agriculture width="440px" height="337px" />
+            <Agriculture width="440px" height="353px" />
-            <Forestry width="440px" height="337px" />
+            <Forestry width="440px" height="353px" />
           </div>
-          <div class="bg-[#10272F] bg-opacity-80 ml-16px">
+        </div>
+        <div class="flex-1 flex ml-15px justify-between bg-[#162126] bg-opacity-5">
+          <div class="bg-[10272f] bg-opacity-50">
             <NYQK />
             <NCZQS class="mt-37px" />
           </div>
-        </div>
           <div class="flex-1">
-          <Map @onMapChange="onMapChange" />
+            <Map />
           </div>
-        <div class="flex">
+          <div class="bg-[10272f] bg-opacity-50">
-          <div class="bg-[#10272F] bg-opacity-80">
             <CZNYCY />
           </div>
+        </div>
+        <div class="flex">
           <div class="mx-16px">
-            <JK width="440px" height="379px" />
+            <JK width="440px" height="387px" />
-            <SBYXZT class="mt-16px" width="440px" height="295px" />
+            <SBYXZT class="mt-16px" width="440px" height="310px" />
           </div>
           <div class="">
-            <QXSZ width="440px" height="222px" />
+            <QXSZ width="440px" height="230px" />
-            <SZJCSJ class="mt-11px" width="440px" height="222px" />
+            <SZJCSJ class="mt-11px" width="440px" height="230px" />
-            <TRJCSJ class="mt-11px" width="440px" height="222px" />
+            <TRJCSJ class="mt-11px" width="440px" height="230px" />
           </div>
         </div>
       </div>
     </div>
-
+    <MapModal v-model:visible="visibleMapModal" :footer="null" />
-    <a-modal v-model:visible="visible" :bodyStyle="{ background: '#233741', color: '#fff' }">
-      <template #closeIcon> 1 </template>
-    </a-modal>
   </div>
-  <!-- </ScaleScreen> -->
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref } from 'vue'
+  import { defineComponent, ref, onBeforeMount, reactive } from 'vue'
   import Map from './components/Map.vue'
   import ScaleScreen from '/@/components/ScaleScreen'
   import Fisheries from './components/Fisheries.vue'
@@ -61,6 +59,9 @@
   import SZJCSJ from './components/SZJCSJ.vue'
   import TRJCSJ from './components/TRJCSJ.vue'
   import { Modal } from 'ant-design-vue'
+  import MapModal from './MapModal.vue'
+  import { createVContext } from './useVContext'
+  import mitt from '/@/utils/mitt'
   export default defineComponent({
     components: {
       [Modal.name]: Modal,
@@ -79,17 +80,30 @@
       SZJCSJ,
       TRJCSJ,
       Head,
+      MapModal,
     },
     setup() {
-      const visible = ref<boolean>(false)
+      const mapData = reactive([])
+      const vEmitter = mitt()
+
+      createVContext({
+        rootEmitter: vEmitter,
+      })
+
+      const visibleMapModal = ref<boolean>(false)
 
       function onMapChange(e) {
-        console.log(e)
+        vEmitter.emit('map:click')
-        visible.value = true
       }
 
+      onBeforeMount(() => {
+        vEmitter.on('map:click', (e) => {
+          console.log(e)
+        })
+      })
+
       return {
-        visible,
+        visibleMapModal,
         onMapChange,
       }
     },
@@ -97,6 +111,13 @@
 </script>
 
 <style scoped lang="less">
-  .cu {
+  .bg-img {
+    // background-image: url('../../assets/images/map-bg.png') no-repeat;
+    // background-position: center;
   }
+
+  // .bg {
+  //   background: linear-gradient(90deg, #658eb4 1%, #658eb4 100%);
+  //   opacity: 0.2;
+  // }
 </style>

src/views/visualization/useVContext.ts

@@ -0,0 +1,17 @@
+import type { InjectionKey } from 'vue'
+import type { Emitter } from '/@/utils/mitt'
+import { createContext, useContext } from '/@/hooks/core/useContext'
+
+export interface VContextProps {
+  rootEmitter: Emitter
+}
+
+const key: InjectionKey<VContextProps> = Symbol()
+
+export function createVContext(context: VContextProps) {
+  return createContext<VContextProps>(context, key, { readonly: false, native: true })
+}
+
+export function useVContext() {
+  return useContext<VContextProps>(key)
+}