diff --git a/src/api/sys/other.ts b/src/api/sys/other.ts
index 01422920..83e023b5 100644
--- a/src/api/sys/other.ts
+++ b/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,
+    },
+  )
 }
diff --git a/src/assets/icons/mj-icon.svg b/src/assets/icons/city_data_area.svg
similarity index 100%
rename from src/assets/icons/mj-icon.svg
rename to src/assets/icons/city_data_area.svg
diff --git a/src/assets/icons/city_data_cultivated_area.svg b/src/assets/icons/city_data_cultivated_area.svg
new file mode 100644
index 00000000..5bc7c214
--- /dev/null
+++ b/src/assets/icons/city_data_cultivated_area.svg
@@ -0,0 +1,6 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="78px" height="78px">
+<image  x="0px" y="0px" width="78px" height="78px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAMAAAC5dNAvAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACUlBMVEV26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fD///9aa9k8AAAAxXRSTlMAAwUJDQ8SExQVEQsHBAIGDBcWAQoQDggbHyQnKSgmIx4YISowNDg3NjIuLTU5KyUxMzsiHBodIDo8GS9JVWBlZl9UR0Z7h46MiouJhHdhQ1p/kJN+eXRxcnWIjSyDlG5raWNiZHB8ek2WkoBqaFxZWF12bJdzXlZTUVBPTlJXW2d4fUSPTEtISoGCRUJBQD8+PW2RmL3Km7LQsN23hZ7IwKTNzKe7tKCrw8Sar6nCuqidmW+xrKO+roa2oqaqtZyt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" />
+</svg>
diff --git a/src/assets/icons/city_data_population.svg b/src/assets/icons/city_data_population.svg
new file mode 100644
index 00000000..dc3cc1d0
--- /dev/null
+++ b/src/assets/icons/city_data_population.svg
@@ -0,0 +1,6 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="79px" height="78px">
+<image  x="0px" y="0px" width="79px" height="78px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAABOCAMAAABWtrsRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACZFBMVEV26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fD///9NKz9BAAAAy3RSTlMAAgUIDA8REhMUFRAJAwEEFhcLBg0KDgcZHyMnKSooJSEbGB0vMjg3NjUwKxozLCQmNDktOiIcHjsxIC5EUl5laGRaTz88XHWEjI+LiomHfmxJdI2TgHpycXd8g2Y9dpKIe2tqZ2NibYaWaV9dWVhbYHB9S3mYeFVUUE5TVm+ClIFRTUxKSEdGV0VDQkGFQD5/kaTQsprNuNfMmbvJosHRua+9pZthbrqjnaCesbfE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" />
+</svg>
diff --git a/src/assets/icons/city_data_street.svg b/src/assets/icons/city_data_street.svg
new file mode 100644
index 00000000..b53c6525
--- /dev/null
+++ b/src/assets/icons/city_data_street.svg
@@ -0,0 +1,6 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="79px" height="78px">
+<image  x="0px" y="0px" width="79px" height="78px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAABOCAMAAABWtrsRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACT1BMVEV26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fB26fD////CENLdAAAAxHRSTlMAAgUICw4REhMUFQ8MCQMBBBYXEAYNCgcYGR4jJygpJCAbHC8zODc2NCoaOTUwLCUmLR06HyIrMjEuOyFCUVxkZmJYTD08W3SDjI6Liod9aU9Jc5SPgHt2cnF3fISBYz51kpOIbGpnZW2NYJZdWlleYXpHeZhfV1VUUE5WcIJNSkhGS1KGU0VEQ0GFa0A/bn54f4lokafPr5vNtdnKvMmhw9G2sKVvmrOtpLudoJ+xo7melbeQsqqXv5mptKycuquuws7T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" />
+</svg>
diff --git a/src/assets/icons/model-close-icon.svg b/src/assets/icons/model-close-icon.svg
new file mode 100644
index 00000000..3ee091fc
--- /dev/null
+++ b/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>
diff --git a/src/assets/images/city-1.png b/src/assets/images/city-1.png
new file mode 100644
index 00000000..560e9a0e
Binary files /dev/null and b/src/assets/images/city-1.png differ
diff --git a/src/assets/images/city-2.png b/src/assets/images/city-2.png
new file mode 100644
index 00000000..753bd2a6
Binary files /dev/null and b/src/assets/images/city-2.png differ
diff --git a/src/assets/images/city-3.png b/src/assets/images/city-3.png
new file mode 100644
index 00000000..ee8986cb
Binary files /dev/null and b/src/assets/images/city-3.png differ
diff --git a/src/assets/images/city-4.png b/src/assets/images/city-4.png
new file mode 100644
index 00000000..717789c5
Binary files /dev/null and b/src/assets/images/city-4.png differ
diff --git a/src/assets/images/head-title.png b/src/assets/images/head-title.png
index ee1d6ad6..6654338f 100644
Binary files a/src/assets/images/head-title.png and b/src/assets/images/head-title.png differ
diff --git a/src/assets/images/map-bg.png b/src/assets/images/map-bg.png
new file mode 100644
index 00000000..143fc9df
Binary files /dev/null and b/src/assets/images/map-bg.png differ
diff --git a/src/assets/images/model-close-icon.png b/src/assets/images/model-close-icon.png
new file mode 100644
index 00000000..fe131e5e
Binary files /dev/null and b/src/assets/images/model-close-icon.png differ
diff --git a/src/views/visualization/MapModal.vue b/src/views/visualization/MapModal.vue
new file mode 100644
index 00000000..10f2b387
--- /dev/null
+++ b/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>
diff --git a/src/views/visualization/components/Head.vue b/src/views/visualization/components/Head.vue
index d3f13f58..34daddcf 100644
--- a/src/views/visualization/components/Head.vue
+++ b/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="absolute left-0 bottom-0 w-1/4 text-10px h-28px flex items-center justify-end">
-        2022-10-22 10:10
+    <div class="w-1099px h-43px relative">
+      <div class="absolute left-0 bottom-0 w-340px text-10px h-28px flex items-center justify-end">
+        {{ 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>
diff --git a/src/views/visualization/components/Map.vue b/src/views/visualization/components/Map.vue
index f4b4f55d..1cecf182 100644
--- a/src/views/visualization/components/Map.vue
+++ b/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: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-    },
-    setup(_, { emit }) {
+    setup() {
       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',
-              borderWidth: 1.3,
-              shadowBlur: 15,
-              shadowColor: 'rgb(58,115,192)',
-              shadowOffsetX: 7,
-              shadowOffsetY: 6,
-              areaColor: {
-                image: domImg,
-              },
+              areaColor: 'rgba(0, 15, 40, 0.5)',
+              shadowColor: 'rgba(0, 0, 0, 1)',
+              shadowBlur: 0,
+              shadowOffsetX: 0,
+              shadowOffsetY: 5,
+              borderColor: 'rgba(0, 0, 0, 0.7)',
+              borderWidth: 0.5,
             },
             emphasis: {
               itemStyle: {
-                areaColor: '#8dd7fc',
-                color: '#fff',
+                areaColor: '#2AB8FF',
+                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,
-                shadowOffsetX: 0,
-                shadowOffsetY: 1,
+
+                // shadowColor: 'rgba(128, 217, 248, 1)',
+                // shadowOffsetX: -2,
+                // 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
-        mapJSON.value = resData
+        const _resData = await getAgriculturalBasic()
+        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
diff --git a/src/views/visualization/components/NYQK.vue b/src/views/visualization/components/NYQK.vue
index c0626aa2..2bb0c672 100644
--- a/src/views/visualization/components/NYQK.vue
+++ b/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">
-        <SvgIcon name="mj-icon" :size="40" color="transparent" />
+      <div class="flex items-center" v-for="item in cityData" :key="item.slug">
+        <!-- <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-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">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 class="text-12px font-bold">{{ item.name }}</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>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
-  import { Ref, ref, watch } from 'vue'
+<script lang="ts">
+  import { Ref, ref, defineComponent, onBeforeMount, reactive, toRefs, watch } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
-  import { SvgIcon } from '/@/components/Icon'
-  const props = defineProps({
-    loading: Boolean,
-    width: {
-      type: String as PropType<string>,
-      default: '100%',
-    },
-    height: {
-      type: String as PropType<string>,
-      default: '300px',
-    },
-  })
-  const chartRef = ref<HTMLDivElement | null>(null)
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
-  watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return
-      }
-      setOptions({
-        legend: {
-          show: false,
-        },
-        series: [
-          {
-            name: 'Access From',
-            type: 'pie',
-            radius: '90%',
-            label: {
-              show: false,
-            },
-            data: [
-              { value: 1048, name: 'Search Engine' },
-              { value: 735, name: 'Direct' },
-              { value: 580, name: 'Email' },
-              { value: 484, name: 'Union Ads' },
-              { value: 300, name: 'Video Ads' },
-            ],
-          },
-        ],
-      })
+  import { getCitydataStatistics, getCropYieldCategoryStatics } from '/@/api/sys/other'
+  import { CountTo } from '/@/components/CountTo'
+  import { useVContext } from '../useVContext'
+  import { deepMerge } from '/@/utils'
+  import cityIcon1 from '/@/assets/images/city-1.png'
+  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,
     },
     {
-      immediate: true,
+      slug: 'city_data_population',
+      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>)
+      const Data = reactive({
+        cityData: [] as cityDataType[],
+        lyqkData: [] as any,
+      })
+
+      const { rootEmitter } = useVContext()
+
+      function chatInit() {
+        setOptions({
+          legend: {
+            show: false,
+          },
+          series: [
+            {
+              name: '隆昌农业产业情况',
+              type: 'pie',
+              radius: '70%',
+              color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
+              label: {
+                show: true,
+              },
+              data: Data.lyqkData,
+            },
+          ],
+        })
+      }
+
+      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>
diff --git a/src/views/visualization/index.vue b/src/views/visualization/index.vue
index 6dcd666b..aeaccce0 100644
--- a/src/views/visualization/index.vue
+++ b/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">
-            <Fisheries width="440px" height="337px" />
-            <Husbandry width="440px" height="337px" />
-            <Agriculture width="440px" height="337px" />
-            <Forestry width="440px" height="337px" />
+          <div class="grid grid-cols-2 gap-x-10px gap-y-10px">
+            <Fisheries width="440px" height="353px" />
+            <Husbandry width="440px" height="353px" />
+            <Agriculture width="440px" height="353px" />
+            <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" />
-        </div>
-        <div class="flex">
-          <div class="bg-[#10272F] bg-opacity-80">
+          <div class="flex-1">
+            <Map />
+          </div>
+          <div class="bg-[10272f] bg-opacity-50">
             <CZNYCY />
           </div>
+        </div>
+        <div class="flex">
           <div class="mx-16px">
-            <JK width="440px" height="379px" />
-            <SBYXZT class="mt-16px" width="440px" height="295px" />
+            <JK width="440px" height="387px" />
+            <SBYXZT class="mt-16px" width="440px" height="310px" />
           </div>
           <div class="">
-            <QXSZ width="440px" height="222px" />
-            <SZJCSJ class="mt-11px" width="440px" height="222px" />
-            <TRJCSJ class="mt-11px" width="440px" height="222px" />
+            <QXSZ width="440px" height="230px" />
+            <SZJCSJ class="mt-11px" width="440px" height="230px" />
+            <TRJCSJ class="mt-11px" width="440px" height="230px" />
           </div>
         </div>
       </div>
     </div>
-
-    <a-modal v-model:visible="visible" :bodyStyle="{ background: '#233741', color: '#fff' }">
-      <template #closeIcon> 1 </template>
-    </a-modal>
+    <MapModal v-model:visible="visibleMapModal" :footer="null" />
   </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)
-        visible.value = true
+        vEmitter.emit('map:click')
       }
 
+      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>
diff --git a/src/views/visualization/useVContext.ts b/src/views/visualization/useVContext.ts
new file mode 100644
index 00000000..e6397ec9
--- /dev/null
+++ b/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)
+}