diff --git a/package.json b/package.json
index 044a580..f6750da 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.1",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",

diff --git a/package.json b/package.json
index 044a580..f6750da 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.1",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
diff --git a/src/assets/newImgs/HMScreen/Numberbox.png b/src/assets/newImgs/HMScreen/Numberbox.png
new file mode 100644
index 0000000..f67bfec
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Numberbox.png
Binary files differ

diff --git a/package.json b/package.json
index 044a580..f6750da 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.1",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
diff --git a/src/assets/newImgs/HMScreen/Numberbox.png b/src/assets/newImgs/HMScreen/Numberbox.png
new file mode 100644
index 0000000..f67bfec
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Numberbox.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/bottomBgcimg.png b/src/assets/newImgs/HMScreen/bottomBgcimg.png
new file mode 100644
index 0000000..9357665
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottomBgcimg.png
Binary files differ

diff --git a/package.json b/package.json
index 044a580..f6750da 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.1",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
diff --git a/src/assets/newImgs/HMScreen/Numberbox.png b/src/assets/newImgs/HMScreen/Numberbox.png
new file mode 100644
index 0000000..f67bfec
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Numberbox.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/bottomBgcimg.png b/src/assets/newImgs/HMScreen/bottomBgcimg.png
new file mode 100644
index 0000000..9357665
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottomBgcimg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pie_bottom.png b/src/assets/newImgs/HMScreen/pie_bottom.png
new file mode 100644
index 0000000..e3d8b4e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pie_bottom.png
Binary files differ

diff --git a/package.json b/package.json
index 044a580..f6750da 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.1",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
diff --git a/src/assets/newImgs/HMScreen/Numberbox.png b/src/assets/newImgs/HMScreen/Numberbox.png
new file mode 100644
index 0000000..f67bfec
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Numberbox.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/bottomBgcimg.png b/src/assets/newImgs/HMScreen/bottomBgcimg.png
new file mode 100644
index 0000000..9357665
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottomBgcimg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pie_bottom.png b/src/assets/newImgs/HMScreen/pie_bottom.png
new file mode 100644
index 0000000..e3d8b4e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pie_bottom.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/title_img.png b/src/assets/newImgs/HMScreen/title_img.png
new file mode 100644
index 0000000..ccb5549
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/title_img.png
Binary files differ

diff --git a/package.json b/package.json
index 044a580..f6750da 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.1",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
diff --git a/src/assets/newImgs/HMScreen/Numberbox.png b/src/assets/newImgs/HMScreen/Numberbox.png
new file mode 100644
index 0000000..f67bfec
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Numberbox.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/bottomBgcimg.png b/src/assets/newImgs/HMScreen/bottomBgcimg.png
new file mode 100644
index 0000000..9357665
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottomBgcimg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pie_bottom.png b/src/assets/newImgs/HMScreen/pie_bottom.png
new file mode 100644
index 0000000..e3d8b4e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pie_bottom.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/title_img.png b/src/assets/newImgs/HMScreen/title_img.png
new file mode 100644
index 0000000..ccb5549
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/title_img.png
Binary files differ
diff --git a/src/main.js b/src/main.js
index 837f2f8..8e35824 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,7 @@
 import router from './router';
 import directive from './directive'; // directive
 import * as echarts from 'echarts';
+import 'echarts-gl';
 
 // 注册指令
 import plugins from './plugins'; // plugins

diff --git a/package.json b/package.json
index 044a580..f6750da 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.1",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
diff --git a/src/assets/newImgs/HMScreen/Numberbox.png b/src/assets/newImgs/HMScreen/Numberbox.png
new file mode 100644
index 0000000..f67bfec
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Numberbox.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/bottomBgcimg.png b/src/assets/newImgs/HMScreen/bottomBgcimg.png
new file mode 100644
index 0000000..9357665
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottomBgcimg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pie_bottom.png b/src/assets/newImgs/HMScreen/pie_bottom.png
new file mode 100644
index 0000000..e3d8b4e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pie_bottom.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/title_img.png b/src/assets/newImgs/HMScreen/title_img.png
new file mode 100644
index 0000000..ccb5549
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/title_img.png
Binary files differ
diff --git a/src/main.js b/src/main.js
index 837f2f8..8e35824 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,7 @@
 import router from './router';
 import directive from './directive'; // directive
 import * as echarts from 'echarts';
+import 'echarts-gl';
 
 // 注册指令
 import plugins from './plugins'; // plugins
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
new file mode 100644
index 0000000..6e3a6d6
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -0,0 +1,239 @@
+<template>
+    <div :id="id"
+         style="width: 100%; height: 100%"></div>
+  </template>
+  <script>
+  import * as echarts from 'echarts';
+  import { guid } from '@/utils/ruoyi';
+  import { reactive, toRefs, onMounted, watch } from 'vue';
+  export default {
+    name: 'line-chart',
+    props: {
+      data: Object,
+      refresh: Number,
+    },
+    setup (props) {
+      const allData = reactive({
+        series: [],
+        legend: [],
+        id: guid(),
+        chart: null,
+      });
+      const resizeTheChart = () => {
+        if (allData.chart) {
+          allData.chart.resize();
+        }
+      };
+  
+      const init = () => {
+        let chartDom = echarts.init(document.getElementById(allData.id));
+  
+        var shadowYData = [100, 100];
+        var color = "rgba(31,227,249,1)";
+        var shadowColor = "#0b5767";
+        var barWidth = 12;
+  
+        var option;
+        option = {
+          color: ["#3FFFC2", "#FFF21C"],
+          
+          tooltip: {
+            trigger: "axis",
+            // formatter: "{b}：{c}㎡",
+            // feature: {
+            //   mark: { show: true },
+            //   dataView: { show: true, readOnly: false },
+            //   magicType: { show: true, type: ['line', 'bar'] },
+            //   restore: { show: true },
+            //   saveAsImage: { show: true }
+            // },
+            // axisPointer: {
+            //   type: "cross",
+            //   textStyle: {
+            //     color: "#fff"
+            //   }
+            // },
+            formatter: (params) => {
+              // console.log(params);
+              var relVal = '' + params[0].name
+              for (var i = 0, l = params.length; i < l; i++) {
+                if (params[i].seriesName) {
+                  let unit = params[i].seriesName == '多年月均降雨量' ? 'mm' : '天'
+                  relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit
+                }
+              }
+              return relVal
+            }
+          },
+          grid: {
+            top: 50,
+            bottom: 30,
+          },
+          legend: {
+              
+              data: ['多年月均降雨量', '月降雨天数'],
+              textStyle: {
+              color: '#fff'
+          }
+          },
+          xAxis: [
+            {
+              type: "category",
+              axisLine: {
+                show: false,
+                lineStyle: {
+                  width: 2,
+                  color: "#58b2ed",
+                }
+              },
+              splitLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                color: "rgba(255,255,255,1)",
+                fontSize: 14,
+                fontFamily: "AlibabaPuHuiTi",
+              },
+              data: props.data.xAxis,
+            }
+          ],
+          yAxis: [
+            {
+              name: '降雨量(mm)',
+              type: 'value',
+              axisLabel: {
+                color: '#fff',
+                show: true,
+              },
+              nameTextStyle: {
+                color: '#fff',
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                  color: '#60C2FF',
+                },
+              },
+              alignTicks: true,
+            },
+  
+            {
+              name: '天数',
+              type: 'value',
+              nameTextStyle: {
+                color: '#fff',
+              },
+                    min: 0,
+                  max: 20,
+                  interval: 5,
+              axisLabel: {
+                show: true,
+                color: '#fff',
+              },
+              splitLine: {
+                lineStyle: {
+                  color: '#D1DEEE',
+                  type: 'dashed',
+                  color: '#53D8FB',
+                },
+              },
+              alignTicks: true,
+            },
+  
+          ],
+          dataZoom: [
+            {
+              // show: true,
+              show: false,
+              height: 4,
+              bottom: 18,
+              start: 0,
+              end: 100,
+              handleSize: '100%',
+              fillerColor: "#94FA41",
+              borderColor: "transparent",
+              backgroundColor: "rgba(148, 250, 65, 0.2)",
+              handleStyle: {
+                color: "#94FA41",
+              },
+              moveHandleSize: 0,
+              textStyle: {
+                color: "#fff"
+              },
+            },
+            {
+              type: "inside",
+              show: true,
+              height: 15,
+              start: 1,
+              end: 35
+            }
+          ],
+          "series": [
+  
+  
+            {
+              name: '多年月均降雨量',
+              type: 'bar',
+              "barWidth": barWidth,
+              barGap: '10%', // Make series be overlap
+              barCateGoryGap: '10%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
+                    offset: 0,
+                    color: "rgba(24, 255, 255, 1)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(188, 255, 255, 1)"
+                  }
+                  ]),
+                },
+              },
+              data: props.data.yAxis
+            },
+            {
+              // smooth: true, //变为曲线 默认false折线
+              name: "月降雨天数",
+              type: "line",
+              data: props.data.yAxis2,
+              yAxisIndex: 1,
+              color: "#FFF21C",
+            },
+          ]
+  
+        };
+        option && chartDom.setOption(option, true);
+        allData.chart = chartDom;
+      };
+      watch(
+        () => props.refresh,
+        () => {
+          if (allData.chartDom) {
+            allData.chartDom.dispose();
+            allData.chartDom = null;
+          }
+          setTimeout(() => {
+            init();
+          }, 0);
+        }
+      );
+      onMounted(() => {
+        init();
+        window.addEventListener('resize', resizeTheChart);
+  
+  
+      });
+      return {
+        ...toRefs(allData),
+        resizeTheChart,
+        init,
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file

diff --git a/package.json b/package.json
index 044a580..f6750da 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.1",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
diff --git a/src/assets/newImgs/HMScreen/Numberbox.png b/src/assets/newImgs/HMScreen/Numberbox.png
new file mode 100644
index 0000000..f67bfec
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Numberbox.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/bottomBgcimg.png b/src/assets/newImgs/HMScreen/bottomBgcimg.png
new file mode 100644
index 0000000..9357665
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottomBgcimg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pie_bottom.png b/src/assets/newImgs/HMScreen/pie_bottom.png
new file mode 100644
index 0000000..e3d8b4e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pie_bottom.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/title_img.png b/src/assets/newImgs/HMScreen/title_img.png
new file mode 100644
index 0000000..ccb5549
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/title_img.png
Binary files differ
diff --git a/src/main.js b/src/main.js
index 837f2f8..8e35824 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,7 @@
 import router from './router';
 import directive from './directive'; // directive
 import * as echarts from 'echarts';
+import 'echarts-gl';
 
 // 注册指令
 import plugins from './plugins'; // plugins
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
new file mode 100644
index 0000000..6e3a6d6
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -0,0 +1,239 @@
+<template>
+    <div :id="id"
+         style="width: 100%; height: 100%"></div>
+  </template>
+  <script>
+  import * as echarts from 'echarts';
+  import { guid } from '@/utils/ruoyi';
+  import { reactive, toRefs, onMounted, watch } from 'vue';
+  export default {
+    name: 'line-chart',
+    props: {
+      data: Object,
+      refresh: Number,
+    },
+    setup (props) {
+      const allData = reactive({
+        series: [],
+        legend: [],
+        id: guid(),
+        chart: null,
+      });
+      const resizeTheChart = () => {
+        if (allData.chart) {
+          allData.chart.resize();
+        }
+      };
+  
+      const init = () => {
+        let chartDom = echarts.init(document.getElementById(allData.id));
+  
+        var shadowYData = [100, 100];
+        var color = "rgba(31,227,249,1)";
+        var shadowColor = "#0b5767";
+        var barWidth = 12;
+  
+        var option;
+        option = {
+          color: ["#3FFFC2", "#FFF21C"],
+          
+          tooltip: {
+            trigger: "axis",
+            // formatter: "{b}：{c}㎡",
+            // feature: {
+            //   mark: { show: true },
+            //   dataView: { show: true, readOnly: false },
+            //   magicType: { show: true, type: ['line', 'bar'] },
+            //   restore: { show: true },
+            //   saveAsImage: { show: true }
+            // },
+            // axisPointer: {
+            //   type: "cross",
+            //   textStyle: {
+            //     color: "#fff"
+            //   }
+            // },
+            formatter: (params) => {
+              // console.log(params);
+              var relVal = '' + params[0].name
+              for (var i = 0, l = params.length; i < l; i++) {
+                if (params[i].seriesName) {
+                  let unit = params[i].seriesName == '多年月均降雨量' ? 'mm' : '天'
+                  relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit
+                }
+              }
+              return relVal
+            }
+          },
+          grid: {
+            top: 50,
+            bottom: 30,
+          },
+          legend: {
+              
+              data: ['多年月均降雨量', '月降雨天数'],
+              textStyle: {
+              color: '#fff'
+          }
+          },
+          xAxis: [
+            {
+              type: "category",
+              axisLine: {
+                show: false,
+                lineStyle: {
+                  width: 2,
+                  color: "#58b2ed",
+                }
+              },
+              splitLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                color: "rgba(255,255,255,1)",
+                fontSize: 14,
+                fontFamily: "AlibabaPuHuiTi",
+              },
+              data: props.data.xAxis,
+            }
+          ],
+          yAxis: [
+            {
+              name: '降雨量(mm)',
+              type: 'value',
+              axisLabel: {
+                color: '#fff',
+                show: true,
+              },
+              nameTextStyle: {
+                color: '#fff',
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                  color: '#60C2FF',
+                },
+              },
+              alignTicks: true,
+            },
+  
+            {
+              name: '天数',
+              type: 'value',
+              nameTextStyle: {
+                color: '#fff',
+              },
+                    min: 0,
+                  max: 20,
+                  interval: 5,
+              axisLabel: {
+                show: true,
+                color: '#fff',
+              },
+              splitLine: {
+                lineStyle: {
+                  color: '#D1DEEE',
+                  type: 'dashed',
+                  color: '#53D8FB',
+                },
+              },
+              alignTicks: true,
+            },
+  
+          ],
+          dataZoom: [
+            {
+              // show: true,
+              show: false,
+              height: 4,
+              bottom: 18,
+              start: 0,
+              end: 100,
+              handleSize: '100%',
+              fillerColor: "#94FA41",
+              borderColor: "transparent",
+              backgroundColor: "rgba(148, 250, 65, 0.2)",
+              handleStyle: {
+                color: "#94FA41",
+              },
+              moveHandleSize: 0,
+              textStyle: {
+                color: "#fff"
+              },
+            },
+            {
+              type: "inside",
+              show: true,
+              height: 15,
+              start: 1,
+              end: 35
+            }
+          ],
+          "series": [
+  
+  
+            {
+              name: '多年月均降雨量',
+              type: 'bar',
+              "barWidth": barWidth,
+              barGap: '10%', // Make series be overlap
+              barCateGoryGap: '10%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
+                    offset: 0,
+                    color: "rgba(24, 255, 255, 1)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(188, 255, 255, 1)"
+                  }
+                  ]),
+                },
+              },
+              data: props.data.yAxis
+            },
+            {
+              // smooth: true, //变为曲线 默认false折线
+              name: "月降雨天数",
+              type: "line",
+              data: props.data.yAxis2,
+              yAxisIndex: 1,
+              color: "#FFF21C",
+            },
+          ]
+  
+        };
+        option && chartDom.setOption(option, true);
+        allData.chart = chartDom;
+      };
+      watch(
+        () => props.refresh,
+        () => {
+          if (allData.chartDom) {
+            allData.chartDom.dispose();
+            allData.chartDom = null;
+          }
+          setTimeout(() => {
+            init();
+          }, 0);
+        }
+      );
+      onMounted(() => {
+        init();
+        window.addEventListener('resize', resizeTheChart);
+  
+  
+      });
+      return {
+        ...toRefs(allData),
+        resizeTheChart,
+        init,
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
new file mode 100644
index 0000000..4e8d52a
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -0,0 +1,5 @@
+<!--年内降雨量特征  -->
+
+<template>
+  <div>123</div>
+</template>

diff --git a/package.json b/package.json
index 044a580..f6750da 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.1",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
diff --git a/src/assets/newImgs/HMScreen/Numberbox.png b/src/assets/newImgs/HMScreen/Numberbox.png
new file mode 100644
index 0000000..f67bfec
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Numberbox.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/bottomBgcimg.png b/src/assets/newImgs/HMScreen/bottomBgcimg.png
new file mode 100644
index 0000000..9357665
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottomBgcimg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pie_bottom.png b/src/assets/newImgs/HMScreen/pie_bottom.png
new file mode 100644
index 0000000..e3d8b4e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pie_bottom.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/title_img.png b/src/assets/newImgs/HMScreen/title_img.png
new file mode 100644
index 0000000..ccb5549
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/title_img.png
Binary files differ
diff --git a/src/main.js b/src/main.js
index 837f2f8..8e35824 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,7 @@
 import router from './router';
 import directive from './directive'; // directive
 import * as echarts from 'echarts';
+import 'echarts-gl';
 
 // 注册指令
 import plugins from './plugins'; // plugins
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
new file mode 100644
index 0000000..6e3a6d6
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -0,0 +1,239 @@
+<template>
+    <div :id="id"
+         style="width: 100%; height: 100%"></div>
+  </template>
+  <script>
+  import * as echarts from 'echarts';
+  import { guid } from '@/utils/ruoyi';
+  import { reactive, toRefs, onMounted, watch } from 'vue';
+  export default {
+    name: 'line-chart',
+    props: {
+      data: Object,
+      refresh: Number,
+    },
+    setup (props) {
+      const allData = reactive({
+        series: [],
+        legend: [],
+        id: guid(),
+        chart: null,
+      });
+      const resizeTheChart = () => {
+        if (allData.chart) {
+          allData.chart.resize();
+        }
+      };
+  
+      const init = () => {
+        let chartDom = echarts.init(document.getElementById(allData.id));
+  
+        var shadowYData = [100, 100];
+        var color = "rgba(31,227,249,1)";
+        var shadowColor = "#0b5767";
+        var barWidth = 12;
+  
+        var option;
+        option = {
+          color: ["#3FFFC2", "#FFF21C"],
+          
+          tooltip: {
+            trigger: "axis",
+            // formatter: "{b}：{c}㎡",
+            // feature: {
+            //   mark: { show: true },
+            //   dataView: { show: true, readOnly: false },
+            //   magicType: { show: true, type: ['line', 'bar'] },
+            //   restore: { show: true },
+            //   saveAsImage: { show: true }
+            // },
+            // axisPointer: {
+            //   type: "cross",
+            //   textStyle: {
+            //     color: "#fff"
+            //   }
+            // },
+            formatter: (params) => {
+              // console.log(params);
+              var relVal = '' + params[0].name
+              for (var i = 0, l = params.length; i < l; i++) {
+                if (params[i].seriesName) {
+                  let unit = params[i].seriesName == '多年月均降雨量' ? 'mm' : '天'
+                  relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit
+                }
+              }
+              return relVal
+            }
+          },
+          grid: {
+            top: 50,
+            bottom: 30,
+          },
+          legend: {
+              
+              data: ['多年月均降雨量', '月降雨天数'],
+              textStyle: {
+              color: '#fff'
+          }
+          },
+          xAxis: [
+            {
+              type: "category",
+              axisLine: {
+                show: false,
+                lineStyle: {
+                  width: 2,
+                  color: "#58b2ed",
+                }
+              },
+              splitLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                color: "rgba(255,255,255,1)",
+                fontSize: 14,
+                fontFamily: "AlibabaPuHuiTi",
+              },
+              data: props.data.xAxis,
+            }
+          ],
+          yAxis: [
+            {
+              name: '降雨量(mm)',
+              type: 'value',
+              axisLabel: {
+                color: '#fff',
+                show: true,
+              },
+              nameTextStyle: {
+                color: '#fff',
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                  color: '#60C2FF',
+                },
+              },
+              alignTicks: true,
+            },
+  
+            {
+              name: '天数',
+              type: 'value',
+              nameTextStyle: {
+                color: '#fff',
+              },
+                    min: 0,
+                  max: 20,
+                  interval: 5,
+              axisLabel: {
+                show: true,
+                color: '#fff',
+              },
+              splitLine: {
+                lineStyle: {
+                  color: '#D1DEEE',
+                  type: 'dashed',
+                  color: '#53D8FB',
+                },
+              },
+              alignTicks: true,
+            },
+  
+          ],
+          dataZoom: [
+            {
+              // show: true,
+              show: false,
+              height: 4,
+              bottom: 18,
+              start: 0,
+              end: 100,
+              handleSize: '100%',
+              fillerColor: "#94FA41",
+              borderColor: "transparent",
+              backgroundColor: "rgba(148, 250, 65, 0.2)",
+              handleStyle: {
+                color: "#94FA41",
+              },
+              moveHandleSize: 0,
+              textStyle: {
+                color: "#fff"
+              },
+            },
+            {
+              type: "inside",
+              show: true,
+              height: 15,
+              start: 1,
+              end: 35
+            }
+          ],
+          "series": [
+  
+  
+            {
+              name: '多年月均降雨量',
+              type: 'bar',
+              "barWidth": barWidth,
+              barGap: '10%', // Make series be overlap
+              barCateGoryGap: '10%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
+                    offset: 0,
+                    color: "rgba(24, 255, 255, 1)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(188, 255, 255, 1)"
+                  }
+                  ]),
+                },
+              },
+              data: props.data.yAxis
+            },
+            {
+              // smooth: true, //变为曲线 默认false折线
+              name: "月降雨天数",
+              type: "line",
+              data: props.data.yAxis2,
+              yAxisIndex: 1,
+              color: "#FFF21C",
+            },
+          ]
+  
+        };
+        option && chartDom.setOption(option, true);
+        allData.chart = chartDom;
+      };
+      watch(
+        () => props.refresh,
+        () => {
+          if (allData.chartDom) {
+            allData.chartDom.dispose();
+            allData.chartDom = null;
+          }
+          setTimeout(() => {
+            init();
+          }, 0);
+        }
+      );
+      onMounted(() => {
+        init();
+        window.addEventListener('resize', resizeTheChart);
+  
+  
+      });
+      return {
+        ...toRefs(allData),
+        resizeTheChart,
+        init,
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
new file mode 100644
index 0000000..4e8d52a
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -0,0 +1,5 @@
+<!--年内降雨量特征  -->
+
+<template>
+  <div>123</div>
+</template>
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
new file mode 100644
index 0000000..2b72b45
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -0,0 +1,382 @@
+<template>
+  <div class="tslyqk_constituent_3d">
+    <div class="echarts3D" ref="echarts3D"></div>
+    <div class="bg-nopx"></div>
+  </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts';
+const { proxy } = getCurrentInstance();
+
+// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+  // 计算
+  let midRatio = (startRatio + endRatio) / 2;
+
+  let startRadian = startRatio * Math.PI * 2;
+  let endRadian = endRatio * Math.PI * 2;
+  let midRadian = midRatio * Math.PI * 2;
+
+  // 如果只有一个扇形，则不实现选中效果。
+  // if (startRatio === 0 && endRatio === 1) {
+  //     isSelected = false;
+  // }
+  isSelected = false;
+  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+  k = typeof k !== 'undefined' ? k : 1 / 3;
+
+  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+  let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+
+  // 计算高亮效果的放大比例（未高亮，则比例为 1）
+  let hoverRate = isHovered ? 1.05 : 1;
+
+  // 返回曲面参数方程
+  return {
+    u: {
+      min: -Math.PI,
+      max: Math.PI * 3,
+      step: Math.PI / 32,
+    },
+
+    v: {
+      min: 0,
+      max: Math.PI * 2,
+      step: Math.PI / 20,
+    },
+
+    x: function (u, v) {
+      if (u < startRadian) {
+        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      if (u > endRadian) {
+        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+
+    y: function (u, v) {
+      if (u < startRadian) {
+        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      if (u > endRadian) {
+        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+
+    z: function (u, v) {
+      if (u < -Math.PI * 0.5) {
+        return Math.sin(u);
+      }
+      if (u > Math.PI * 2.5) {
+        return Math.sin(u) * h * 0.1;
+      }
+      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    },
+  };
+}
+// 生成模拟 3D 饼图的配置项
+function getPie3D(pieData, internalDiameterRatio) {
+  let series = [];
+  let sumValue = 0;
+  let startValue = 0;
+  let endValue = 0;
+  let legendData = [];
+  let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
+
+  // 为每一个饼图数据，生成一个 series-surface 配置
+  for (let i = 0; i < pieData.length; i++) {
+    sumValue += pieData[i].value;
+
+    let seriesItem = {
+      name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+      type: 'surface',
+      parametric: true,
+      wireframe: {
+        show: false,
+      },
+      pieData: pieData[i],
+      pieStatus: {
+        selected: false,
+        hovered: false,
+        k: 1 / 10,
+      },
+    };
+
+    if (typeof pieData[i].itemStyle != 'undefined') {
+      let itemStyle = {};
+
+      typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
+      typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
+
+      seriesItem.itemStyle = itemStyle;
+    }
+    series.push(seriesItem);
+  }
+
+  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+  for (let i = 0; i < series.length; i++) {
+    endValue = startValue + series[i].pieData.value;
+
+    series[i].pieData.startRatio = startValue / sumValue;
+    series[i].pieData.endRatio = endValue / sumValue;
+    series[i].parametricEquation = getParametricEquation(
+      series[i].pieData.startRatio,
+      series[i].pieData.endRatio,
+      false,
+      false,
+      k,
+      series[i].pieData.value
+    );
+
+    startValue = endValue;
+
+    legendData.push(series[i].name);
+  }
+
+  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
+  series.push({
+    name: 'mouseoutSeries',
+    type: 'surface',
+    parametric: true,
+    wireframe: {
+      show: false,
+    },
+    itemStyle: {
+      opacity: 0.1,
+      color: '#E1E8EC',
+    },
+    parametricEquation: {
+      u: {
+        min: 0,
+        max: Math.PI * 2,
+        step: Math.PI / 20,
+      },
+      v: {
+        min: 0,
+        max: Math.PI,
+        step: Math.PI / 20,
+      },
+      x: function (u, v) {
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+      },
+      y: function (u, v) {
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+      },
+      z: function (u, v) {
+        return Math.cos(v) > 0 ? -0.5 : -5;
+      },
+    },
+  });
+
+  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
+  series.push({
+    name: 'mouseoutSeries',
+    type: 'surface',
+    parametric: true,
+    wireframe: {
+      show: false,
+    },
+    itemStyle: {
+      opacity: 0.1,
+      color: '#E1E8EC',
+    },
+    parametricEquation: {
+      u: {
+        min: 0,
+        max: Math.PI * 2,
+        step: Math.PI / 20,
+      },
+      v: {
+        min: 0,
+        max: Math.PI,
+        step: Math.PI / 20,
+      },
+      x: function (u, v) {
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+      },
+      y: function (u, v) {
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+      },
+      z: function (u, v) {
+        return Math.cos(v) > 0 ? -5 : -7;
+      },
+    },
+  });
+  series.push({
+    name: 'mouseoutSeries',
+    type: 'surface',
+    parametric: true,
+    wireframe: {
+      show: false,
+    },
+    itemStyle: {
+      opacity: 0.1,
+      color: '#E1E8EC',
+    },
+    parametricEquation: {
+      u: {
+        min: 0,
+        max: Math.PI * 2,
+        step: Math.PI / 20,
+      },
+      v: {
+        min: 0,
+        max: Math.PI,
+        step: Math.PI / 20,
+      },
+      x: function (u, v) {
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+      },
+      y: function (u, v) {
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+      },
+      z: function (u, v) {
+        return Math.cos(v) > 0 ? -7 : -7;
+      },
+    },
+  });
+
+  // 准备待返回的配置项，把准备好的 legendData、series 传入。
+  let option = {
+    tooltip: {
+      formatter: params => {
+        if (params.seriesName !== 'mouseoutSeries') {
+          return `${
+            params.seriesName
+          }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+            params.color
+          };"></span>${option.series[params.seriesIndex].pieData.value}`;
+        }
+      },
+    },
+    //animation: false,
+    legend: {
+      orient: 'vertical',
+      icon: 'circle',
+      right: '5%',
+      top: '20%',
+      show: true,
+      itemGap: 10,
+      textStyle: {
+        color: '#A1E2FF',
+      },
+      // icon:'diamond',
+      data: legendData,
+      formatter: params => {
+        return params;
+      },
+    },
+    xAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    yAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    zAxis3D: {},
+    grid3D: {
+      viewControl: {
+        autoRotate: true,
+        //3d效果可以放大、旋转等，请自己去查看官方配置
+        // alpha: 0,
+        // beta: 100,
+        // rotateSensitivity: 100,
+        // zoomSensitivity: 100,
+        // panSensitivity: 100,
+      },
+      top: '5%',
+      left: 'left',
+      width: '70%',
+      //   heigth: '50%',
+      show: false,
+      boxHeight: 20,
+    },
+    series: series,
+  };
+  return option;
+}
+// 传入数据生成 option
+
+const initEcharts = () => {
+  const optionData = [
+    {
+      name: '草(0.4%)',
+      value: 0.4,
+      itemStyle: {
+        color: '#FFED52',
+      },
+    },
+    {
+      name: '田 (83.3%)',
+      value: 83.3,
+      itemStyle: {
+        color: '#FF8E5B',
+      },
+    },
+    {
+      name: '林 (11.4%)',
+      value: 11.4,
+      itemStyle: {
+        color: '#D956FF',
+      },
+    },
+    {
+      name: '湖 (1.6%)',
+      value: 1.6,
+      itemStyle: {
+        color: '#18FFFF',
+      },
+    },
+    {
+      name: '水 (3.4%)',
+      value: 3.4,
+      itemStyle: {
+        color: '#4CC1FF',
+      },
+    },
+  ];
+  // 生成配置选项
+  const option = getPie3D(optionData, 0.59);
+  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
+  const myChart = echarts.init(proxy.$refs.echarts3D);
+
+  // 绘制图形
+  myChart.setOption(option);
+};
+
+onMounted(() => {
+  initEcharts();
+});
+</script>
+
+<style lang="scss" scoped>
+.tslyqk_constituent_3d {
+  width: 100%;
+  height: 150px;
+  position: relative;
+  //   background: red;
+  .echarts3D {
+    height: 100%;
+    height: 150px;
+    position: relative;
+    // z-index: 310;
+    // background: red;
+  }
+  //   .bg-nopx {
+  //     position: absolute;
+  //     left: 50%;
+  //     top: 50%;
+  //     transform: translate(calc(-50% - 86px), calc(-50% + 24px));
+  //     width: 240px;
+  //     height: 151px;
+  //     // background: url('@/assets/newImgs/UrbanCharacteristics/pie_bottom.png') no-repeat;
+  //     background-size: 100% 100%;
+  //   }
+}
+</style>

diff --git a/package.json b/package.json
index 044a580..f6750da 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.1",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
diff --git a/src/assets/newImgs/HMScreen/Numberbox.png b/src/assets/newImgs/HMScreen/Numberbox.png
new file mode 100644
index 0000000..f67bfec
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Numberbox.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/bottomBgcimg.png b/src/assets/newImgs/HMScreen/bottomBgcimg.png
new file mode 100644
index 0000000..9357665
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottomBgcimg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pie_bottom.png b/src/assets/newImgs/HMScreen/pie_bottom.png
new file mode 100644
index 0000000..e3d8b4e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pie_bottom.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/title_img.png b/src/assets/newImgs/HMScreen/title_img.png
new file mode 100644
index 0000000..ccb5549
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/title_img.png
Binary files differ
diff --git a/src/main.js b/src/main.js
index 837f2f8..8e35824 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,7 @@
 import router from './router';
 import directive from './directive'; // directive
 import * as echarts from 'echarts';
+import 'echarts-gl';
 
 // 注册指令
 import plugins from './plugins'; // plugins
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
new file mode 100644
index 0000000..6e3a6d6
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -0,0 +1,239 @@
+<template>
+    <div :id="id"
+         style="width: 100%; height: 100%"></div>
+  </template>
+  <script>
+  import * as echarts from 'echarts';
+  import { guid } from '@/utils/ruoyi';
+  import { reactive, toRefs, onMounted, watch } from 'vue';
+  export default {
+    name: 'line-chart',
+    props: {
+      data: Object,
+      refresh: Number,
+    },
+    setup (props) {
+      const allData = reactive({
+        series: [],
+        legend: [],
+        id: guid(),
+        chart: null,
+      });
+      const resizeTheChart = () => {
+        if (allData.chart) {
+          allData.chart.resize();
+        }
+      };
+  
+      const init = () => {
+        let chartDom = echarts.init(document.getElementById(allData.id));
+  
+        var shadowYData = [100, 100];
+        var color = "rgba(31,227,249,1)";
+        var shadowColor = "#0b5767";
+        var barWidth = 12;
+  
+        var option;
+        option = {
+          color: ["#3FFFC2", "#FFF21C"],
+          
+          tooltip: {
+            trigger: "axis",
+            // formatter: "{b}：{c}㎡",
+            // feature: {
+            //   mark: { show: true },
+            //   dataView: { show: true, readOnly: false },
+            //   magicType: { show: true, type: ['line', 'bar'] },
+            //   restore: { show: true },
+            //   saveAsImage: { show: true }
+            // },
+            // axisPointer: {
+            //   type: "cross",
+            //   textStyle: {
+            //     color: "#fff"
+            //   }
+            // },
+            formatter: (params) => {
+              // console.log(params);
+              var relVal = '' + params[0].name
+              for (var i = 0, l = params.length; i < l; i++) {
+                if (params[i].seriesName) {
+                  let unit = params[i].seriesName == '多年月均降雨量' ? 'mm' : '天'
+                  relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit
+                }
+              }
+              return relVal
+            }
+          },
+          grid: {
+            top: 50,
+            bottom: 30,
+          },
+          legend: {
+              
+              data: ['多年月均降雨量', '月降雨天数'],
+              textStyle: {
+              color: '#fff'
+          }
+          },
+          xAxis: [
+            {
+              type: "category",
+              axisLine: {
+                show: false,
+                lineStyle: {
+                  width: 2,
+                  color: "#58b2ed",
+                }
+              },
+              splitLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                color: "rgba(255,255,255,1)",
+                fontSize: 14,
+                fontFamily: "AlibabaPuHuiTi",
+              },
+              data: props.data.xAxis,
+            }
+          ],
+          yAxis: [
+            {
+              name: '降雨量(mm)',
+              type: 'value',
+              axisLabel: {
+                color: '#fff',
+                show: true,
+              },
+              nameTextStyle: {
+                color: '#fff',
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                  color: '#60C2FF',
+                },
+              },
+              alignTicks: true,
+            },
+  
+            {
+              name: '天数',
+              type: 'value',
+              nameTextStyle: {
+                color: '#fff',
+              },
+                    min: 0,
+                  max: 20,
+                  interval: 5,
+              axisLabel: {
+                show: true,
+                color: '#fff',
+              },
+              splitLine: {
+                lineStyle: {
+                  color: '#D1DEEE',
+                  type: 'dashed',
+                  color: '#53D8FB',
+                },
+              },
+              alignTicks: true,
+            },
+  
+          ],
+          dataZoom: [
+            {
+              // show: true,
+              show: false,
+              height: 4,
+              bottom: 18,
+              start: 0,
+              end: 100,
+              handleSize: '100%',
+              fillerColor: "#94FA41",
+              borderColor: "transparent",
+              backgroundColor: "rgba(148, 250, 65, 0.2)",
+              handleStyle: {
+                color: "#94FA41",
+              },
+              moveHandleSize: 0,
+              textStyle: {
+                color: "#fff"
+              },
+            },
+            {
+              type: "inside",
+              show: true,
+              height: 15,
+              start: 1,
+              end: 35
+            }
+          ],
+          "series": [
+  
+  
+            {
+              name: '多年月均降雨量',
+              type: 'bar',
+              "barWidth": barWidth,
+              barGap: '10%', // Make series be overlap
+              barCateGoryGap: '10%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
+                    offset: 0,
+                    color: "rgba(24, 255, 255, 1)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(188, 255, 255, 1)"
+                  }
+                  ]),
+                },
+              },
+              data: props.data.yAxis
+            },
+            {
+              // smooth: true, //变为曲线 默认false折线
+              name: "月降雨天数",
+              type: "line",
+              data: props.data.yAxis2,
+              yAxisIndex: 1,
+              color: "#FFF21C",
+            },
+          ]
+  
+        };
+        option && chartDom.setOption(option, true);
+        allData.chart = chartDom;
+      };
+      watch(
+        () => props.refresh,
+        () => {
+          if (allData.chartDom) {
+            allData.chartDom.dispose();
+            allData.chartDom = null;
+          }
+          setTimeout(() => {
+            init();
+          }, 0);
+        }
+      );
+      onMounted(() => {
+        init();
+        window.addEventListener('resize', resizeTheChart);
+  
+  
+      });
+      return {
+        ...toRefs(allData),
+        resizeTheChart,
+        init,
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
new file mode 100644
index 0000000..4e8d52a
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -0,0 +1,5 @@
+<!--年内降雨量特征  -->
+
+<template>
+  <div>123</div>
+</template>
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
new file mode 100644
index 0000000..2b72b45
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -0,0 +1,382 @@
+<template>
+  <div class="tslyqk_constituent_3d">
+    <div class="echarts3D" ref="echarts3D"></div>
+    <div class="bg-nopx"></div>
+  </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts';
+const { proxy } = getCurrentInstance();
+
+// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+  // 计算
+  let midRatio = (startRatio + endRatio) / 2;
+
+  let startRadian = startRatio * Math.PI * 2;
+  let endRadian = endRatio * Math.PI * 2;
+  let midRadian = midRatio * Math.PI * 2;
+
+  // 如果只有一个扇形，则不实现选中效果。
+  // if (startRatio === 0 && endRatio === 1) {
+  //     isSelected = false;
+  // }
+  isSelected = false;
+  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+  k = typeof k !== 'undefined' ? k : 1 / 3;
+
+  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+  let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+
+  // 计算高亮效果的放大比例（未高亮，则比例为 1）
+  let hoverRate = isHovered ? 1.05 : 1;
+
+  // 返回曲面参数方程
+  return {
+    u: {
+      min: -Math.PI,
+      max: Math.PI * 3,
+      step: Math.PI / 32,
+    },
+
+    v: {
+      min: 0,
+      max: Math.PI * 2,
+      step: Math.PI / 20,
+    },
+
+    x: function (u, v) {
+      if (u < startRadian) {
+        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      if (u > endRadian) {
+        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+
+    y: function (u, v) {
+      if (u < startRadian) {
+        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      if (u > endRadian) {
+        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+
+    z: function (u, v) {
+      if (u < -Math.PI * 0.5) {
+        return Math.sin(u);
+      }
+      if (u > Math.PI * 2.5) {
+        return Math.sin(u) * h * 0.1;
+      }
+      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    },
+  };
+}
+// 生成模拟 3D 饼图的配置项
+function getPie3D(pieData, internalDiameterRatio) {
+  let series = [];
+  let sumValue = 0;
+  let startValue = 0;
+  let endValue = 0;
+  let legendData = [];
+  let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
+
+  // 为每一个饼图数据，生成一个 series-surface 配置
+  for (let i = 0; i < pieData.length; i++) {
+    sumValue += pieData[i].value;
+
+    let seriesItem = {
+      name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+      type: 'surface',
+      parametric: true,
+      wireframe: {
+        show: false,
+      },
+      pieData: pieData[i],
+      pieStatus: {
+        selected: false,
+        hovered: false,
+        k: 1 / 10,
+      },
+    };
+
+    if (typeof pieData[i].itemStyle != 'undefined') {
+      let itemStyle = {};
+
+      typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
+      typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
+
+      seriesItem.itemStyle = itemStyle;
+    }
+    series.push(seriesItem);
+  }
+
+  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+  for (let i = 0; i < series.length; i++) {
+    endValue = startValue + series[i].pieData.value;
+
+    series[i].pieData.startRatio = startValue / sumValue;
+    series[i].pieData.endRatio = endValue / sumValue;
+    series[i].parametricEquation = getParametricEquation(
+      series[i].pieData.startRatio,
+      series[i].pieData.endRatio,
+      false,
+      false,
+      k,
+      series[i].pieData.value
+    );
+
+    startValue = endValue;
+
+    legendData.push(series[i].name);
+  }
+
+  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
+  series.push({
+    name: 'mouseoutSeries',
+    type: 'surface',
+    parametric: true,
+    wireframe: {
+      show: false,
+    },
+    itemStyle: {
+      opacity: 0.1,
+      color: '#E1E8EC',
+    },
+    parametricEquation: {
+      u: {
+        min: 0,
+        max: Math.PI * 2,
+        step: Math.PI / 20,
+      },
+      v: {
+        min: 0,
+        max: Math.PI,
+        step: Math.PI / 20,
+      },
+      x: function (u, v) {
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+      },
+      y: function (u, v) {
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+      },
+      z: function (u, v) {
+        return Math.cos(v) > 0 ? -0.5 : -5;
+      },
+    },
+  });
+
+  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
+  series.push({
+    name: 'mouseoutSeries',
+    type: 'surface',
+    parametric: true,
+    wireframe: {
+      show: false,
+    },
+    itemStyle: {
+      opacity: 0.1,
+      color: '#E1E8EC',
+    },
+    parametricEquation: {
+      u: {
+        min: 0,
+        max: Math.PI * 2,
+        step: Math.PI / 20,
+      },
+      v: {
+        min: 0,
+        max: Math.PI,
+        step: Math.PI / 20,
+      },
+      x: function (u, v) {
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+      },
+      y: function (u, v) {
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+      },
+      z: function (u, v) {
+        return Math.cos(v) > 0 ? -5 : -7;
+      },
+    },
+  });
+  series.push({
+    name: 'mouseoutSeries',
+    type: 'surface',
+    parametric: true,
+    wireframe: {
+      show: false,
+    },
+    itemStyle: {
+      opacity: 0.1,
+      color: '#E1E8EC',
+    },
+    parametricEquation: {
+      u: {
+        min: 0,
+        max: Math.PI * 2,
+        step: Math.PI / 20,
+      },
+      v: {
+        min: 0,
+        max: Math.PI,
+        step: Math.PI / 20,
+      },
+      x: function (u, v) {
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+      },
+      y: function (u, v) {
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+      },
+      z: function (u, v) {
+        return Math.cos(v) > 0 ? -7 : -7;
+      },
+    },
+  });
+
+  // 准备待返回的配置项，把准备好的 legendData、series 传入。
+  let option = {
+    tooltip: {
+      formatter: params => {
+        if (params.seriesName !== 'mouseoutSeries') {
+          return `${
+            params.seriesName
+          }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+            params.color
+          };"></span>${option.series[params.seriesIndex].pieData.value}`;
+        }
+      },
+    },
+    //animation: false,
+    legend: {
+      orient: 'vertical',
+      icon: 'circle',
+      right: '5%',
+      top: '20%',
+      show: true,
+      itemGap: 10,
+      textStyle: {
+        color: '#A1E2FF',
+      },
+      // icon:'diamond',
+      data: legendData,
+      formatter: params => {
+        return params;
+      },
+    },
+    xAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    yAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    zAxis3D: {},
+    grid3D: {
+      viewControl: {
+        autoRotate: true,
+        //3d效果可以放大、旋转等，请自己去查看官方配置
+        // alpha: 0,
+        // beta: 100,
+        // rotateSensitivity: 100,
+        // zoomSensitivity: 100,
+        // panSensitivity: 100,
+      },
+      top: '5%',
+      left: 'left',
+      width: '70%',
+      //   heigth: '50%',
+      show: false,
+      boxHeight: 20,
+    },
+    series: series,
+  };
+  return option;
+}
+// 传入数据生成 option
+
+const initEcharts = () => {
+  const optionData = [
+    {
+      name: '草(0.4%)',
+      value: 0.4,
+      itemStyle: {
+        color: '#FFED52',
+      },
+    },
+    {
+      name: '田 (83.3%)',
+      value: 83.3,
+      itemStyle: {
+        color: '#FF8E5B',
+      },
+    },
+    {
+      name: '林 (11.4%)',
+      value: 11.4,
+      itemStyle: {
+        color: '#D956FF',
+      },
+    },
+    {
+      name: '湖 (1.6%)',
+      value: 1.6,
+      itemStyle: {
+        color: '#18FFFF',
+      },
+    },
+    {
+      name: '水 (3.4%)',
+      value: 3.4,
+      itemStyle: {
+        color: '#4CC1FF',
+      },
+    },
+  ];
+  // 生成配置选项
+  const option = getPie3D(optionData, 0.59);
+  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
+  const myChart = echarts.init(proxy.$refs.echarts3D);
+
+  // 绘制图形
+  myChart.setOption(option);
+};
+
+onMounted(() => {
+  initEcharts();
+});
+</script>
+
+<style lang="scss" scoped>
+.tslyqk_constituent_3d {
+  width: 100%;
+  height: 150px;
+  position: relative;
+  //   background: red;
+  .echarts3D {
+    height: 100%;
+    height: 150px;
+    position: relative;
+    // z-index: 310;
+    // background: red;
+  }
+  //   .bg-nopx {
+  //     position: absolute;
+  //     left: 50%;
+  //     top: 50%;
+  //     transform: translate(calc(-50% - 86px), calc(-50% + 24px));
+  //     width: 240px;
+  //     height: 151px;
+  //     // background: url('@/assets/newImgs/UrbanCharacteristics/pie_bottom.png') no-repeat;
+  //     background-size: 100% 100%;
+  //   }
+}
+</style>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index b140c6b..d27456a 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -4,7 +4,45 @@
     <div class="publicLeftHM">
       <!-- 自然地理 -->
       <div class="partTitleHM">自然地理</div>
-      <div class="partContHM">自然地理自然地理</div>
+      <div class="partContHM">
+        <div class="ListBox ListBox1">
+          <div class="physicalGeography">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="text">总面积</div>
+                <div class="sum bgcYellow">6118</div>
+                <div class="unit">km²</div>
+                <div class="icon colorBlue"></div>
+                <div class="text">中心城区</div>
+                <div class="sum colorBlue">647.55</div>
+                <div class="unit">km²</div>
+                <div class="iconTwo bgcblue"></div>
+                <div class="text">建成区</div>
+                <div class="sum bgcblue">117</div>
+                <div class="unit">km²</div>
+              </div>
+            </div>
+          </div>
+          <tslyqk_constituent_3d></tslyqk_constituent_3d>
+        </div>
+        <div class="ListBox ListBox3">
+          <div class="ListTitle">自然空间格局(一心、一核、一带、三片、三廊)</div>
+          <div class="ListContent">
+            <div class="SpatialPattern" v-for="item in policiesList">
+              <div class="eachinfo cyan">
+                <div class="number">{{ item.NumberA }}</div>
+                <div class="headText">{{ item.name }}</div>
+                <div class="rightText">{{ item.content }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 降雨特征 -->
+      <div class="Lowerleft">
+        <rainfall />
+      </div>
     </div>
 
     <div class="publicRightHM">
@@ -16,8 +54,36 @@
 </template>
 
 <script setup>
+import tslyqk_constituent_3d from '@/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue'; //3d图例
+import rainfall from '@/views/sponeScreen/cityGK/rainfall.vue'; //降雨页面
 const { proxy } = getCurrentInstance();
-
+const policiesList = ref([
+  {
+    name: '一心',
+    NumberA: '01',
+    content: '中心城区',
+  },
+  {
+    name: '一核',
+    NumberA: '02',
+    content: '开封新区',
+  },
+  {
+    name: '一带',
+    NumberA: '03',
+    content: '沿黄河南岸形成的沿黄生态涵养带',
+  },
+  {
+    name: '三片',
+    NumberA: '04',
+    content: '北部水源保护区、中部海绵城市重点建设区、南部卫生防护区',
+  },
+  {
+    name: '三廊',
+    NumberA: '05',
+    content: '沿运粮河、开封西湖以及东护城大堤形成的三条生态廊道',
+  },
+]);
 // 面板内容展开收起控制
 const props = defineProps({
   showPanel: {
@@ -35,4 +101,172 @@
 onMounted(() => {});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.ListBox {
+  .ListTitle {
+    width: 100%;
+    height: 32px;
+    line-height: 32px;
+    background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    // box-sizing: border-box;
+    padding-left: 30px;
+    font-family: SourceHanSansCN-Medium;
+    font-weight: bold;
+    font-size: 15px;
+    color: #e4f5ff;
+  }
+  .ListContent {
+    width: 100%;
+    height: calc(100% - 32px);
+    overflow: auto;
+    // background: red;
+  }
+  .SpatialPattern {
+    padding-top: 5px;
+    overflow: auto;
+    // background: red;
+    .eachinfo {
+      width: 100%;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      // background: yellow;
+      margin-bottom: 3px;
+      cursor: pointer;
+    }
+    .headText {
+      font-weight: 500;
+      font-size: 16px;
+      min-width: 50px;
+      color: #18ffff;
+      margin-left: 15px;
+      text-align: center;
+      // background: red;
+    }
+    .rightText {
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出部分省略号 */
+      word-break: break-all; /* break-all(允许在单词内换行。) */
+      display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
+      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
+      -webkit-line-clamp: 1; /* 显示的行数 */
+      padding-left: 10px;
+      color: #b8ecff;
+      // background: yellow;
+    }
+    .cyan {
+      background: url('@/assets/newImgs/HMScreen/Numberbox.png') no-repeat;
+      background-size: 100% 100%;
+      .number {
+        color: #d1dff7;
+        font-weight: 400;
+        font-size: 16px;
+        position: relative;
+        left: 8px;
+        // background: blueviolet;
+      }
+    }
+  }
+
+  width: 100%;
+  margin-top: 2px;
+  height: 150px;
+  position: relative;
+  // background: red;
+  .physicalGeography {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    // background: yellowgreen;
+    .waterSupply {
+      position: relative;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .eachDescribe {
+        display: flex;
+        align-items: center;
+        font-family: SourceHanSansCN-Regular;
+        font-weight: 300;
+        // background: red;
+        .unit {
+          padding-top: 2px;
+          color: #ffffff;
+        }
+        .icon {
+          display: inline-block;
+          border-color: #3afff8;
+          border-style: solid;
+          border-width: 2px;
+          width: 0;
+          height: 0;
+          margin-right: 7px;
+          position: relative;
+          top: -2px;
+          -moz-transform: rotate(45deg);
+          -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+          transform: rotate(45deg);
+          margin-left: 7px;
+        }
+        .iconTwo {
+          display: inline-block;
+          border-color: #18e87a;
+          border-style: solid;
+          border-width: 2px;
+          width: 0;
+          height: 0;
+          margin-right: 7px;
+          position: relative;
+          top: -2px;
+          -moz-transform: rotate(45deg);
+          -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+          transform: rotate(45deg);
+          margin-left: 7px;
+        }
+        .colorYellow {
+          color: #ffed52;
+        }
+        .colorBlue {
+          color: #18ffff;
+        }
+        .bgcYellow {
+          color: #ffed52;
+        }
+        .bgcblue {
+          color: #18e87a;
+        }
+        .text {
+          padding: 0 5px 0 5px;
+          font-size: 16px;
+          color: #b8ecff;
+        }
+        .sum {
+          font-size: 16px;
+          padding-right: 10px;
+        }
+      }
+      .bottomBgc {
+        width: 100%;
+        height: 16px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background: url('@/assets/newImgs/HMScreen/bottomBgcimg.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.ListBox3 {
+  margin-top: 20px;
+  height: 235px;
+  // background: red;
+}
+.Lowerleft {
+  margin-top: 15px;
+}
+</style>

diff --git a/package.json b/package.json
index 044a580..f6750da 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "cross-env": "^7.0.3",
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.1",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "2.2.27",
     "file-saver": "2.0.5",
diff --git a/src/assets/newImgs/HMScreen/Numberbox.png b/src/assets/newImgs/HMScreen/Numberbox.png
new file mode 100644
index 0000000..f67bfec
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/Numberbox.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/bottomBgcimg.png b/src/assets/newImgs/HMScreen/bottomBgcimg.png
new file mode 100644
index 0000000..9357665
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/bottomBgcimg.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/pie_bottom.png b/src/assets/newImgs/HMScreen/pie_bottom.png
new file mode 100644
index 0000000..e3d8b4e
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/pie_bottom.png
Binary files differ
diff --git a/src/assets/newImgs/HMScreen/title_img.png b/src/assets/newImgs/HMScreen/title_img.png
new file mode 100644
index 0000000..ccb5549
--- /dev/null
+++ b/src/assets/newImgs/HMScreen/title_img.png
Binary files differ
diff --git a/src/main.js b/src/main.js
index 837f2f8..8e35824 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,7 @@
 import router from './router';
 import directive from './directive'; // directive
 import * as echarts from 'echarts';
+import 'echarts-gl';
 
 // 注册指令
 import plugins from './plugins'; // plugins
diff --git a/src/views/sponeScreen/Echarts/RainfallEcharts.vue b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
new file mode 100644
index 0000000..6e3a6d6
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/RainfallEcharts.vue
@@ -0,0 +1,239 @@
+<template>
+    <div :id="id"
+         style="width: 100%; height: 100%"></div>
+  </template>
+  <script>
+  import * as echarts from 'echarts';
+  import { guid } from '@/utils/ruoyi';
+  import { reactive, toRefs, onMounted, watch } from 'vue';
+  export default {
+    name: 'line-chart',
+    props: {
+      data: Object,
+      refresh: Number,
+    },
+    setup (props) {
+      const allData = reactive({
+        series: [],
+        legend: [],
+        id: guid(),
+        chart: null,
+      });
+      const resizeTheChart = () => {
+        if (allData.chart) {
+          allData.chart.resize();
+        }
+      };
+  
+      const init = () => {
+        let chartDom = echarts.init(document.getElementById(allData.id));
+  
+        var shadowYData = [100, 100];
+        var color = "rgba(31,227,249,1)";
+        var shadowColor = "#0b5767";
+        var barWidth = 12;
+  
+        var option;
+        option = {
+          color: ["#3FFFC2", "#FFF21C"],
+          
+          tooltip: {
+            trigger: "axis",
+            // formatter: "{b}：{c}㎡",
+            // feature: {
+            //   mark: { show: true },
+            //   dataView: { show: true, readOnly: false },
+            //   magicType: { show: true, type: ['line', 'bar'] },
+            //   restore: { show: true },
+            //   saveAsImage: { show: true }
+            // },
+            // axisPointer: {
+            //   type: "cross",
+            //   textStyle: {
+            //     color: "#fff"
+            //   }
+            // },
+            formatter: (params) => {
+              // console.log(params);
+              var relVal = '' + params[0].name
+              for (var i = 0, l = params.length; i < l; i++) {
+                if (params[i].seriesName) {
+                  let unit = params[i].seriesName == '多年月均降雨量' ? 'mm' : '天'
+                  relVal += '<br/>' + params[i].marker + params[i].seriesName + ' ' + params[i].value + unit
+                }
+              }
+              return relVal
+            }
+          },
+          grid: {
+            top: 50,
+            bottom: 30,
+          },
+          legend: {
+              
+              data: ['多年月均降雨量', '月降雨天数'],
+              textStyle: {
+              color: '#fff'
+          }
+          },
+          xAxis: [
+            {
+              type: "category",
+              axisLine: {
+                show: false,
+                lineStyle: {
+                  width: 2,
+                  color: "#58b2ed",
+                }
+              },
+              splitLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                color: "rgba(255,255,255,1)",
+                fontSize: 14,
+                fontFamily: "AlibabaPuHuiTi",
+              },
+              data: props.data.xAxis,
+            }
+          ],
+          yAxis: [
+            {
+              name: '降雨量(mm)',
+              type: 'value',
+              axisLabel: {
+                color: '#fff',
+                show: true,
+              },
+              nameTextStyle: {
+                color: '#fff',
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                  color: '#60C2FF',
+                },
+              },
+              alignTicks: true,
+            },
+  
+            {
+              name: '天数',
+              type: 'value',
+              nameTextStyle: {
+                color: '#fff',
+              },
+                    min: 0,
+                  max: 20,
+                  interval: 5,
+              axisLabel: {
+                show: true,
+                color: '#fff',
+              },
+              splitLine: {
+                lineStyle: {
+                  color: '#D1DEEE',
+                  type: 'dashed',
+                  color: '#53D8FB',
+                },
+              },
+              alignTicks: true,
+            },
+  
+          ],
+          dataZoom: [
+            {
+              // show: true,
+              show: false,
+              height: 4,
+              bottom: 18,
+              start: 0,
+              end: 100,
+              handleSize: '100%',
+              fillerColor: "#94FA41",
+              borderColor: "transparent",
+              backgroundColor: "rgba(148, 250, 65, 0.2)",
+              handleStyle: {
+                color: "#94FA41",
+              },
+              moveHandleSize: 0,
+              textStyle: {
+                color: "#fff"
+              },
+            },
+            {
+              type: "inside",
+              show: true,
+              height: 15,
+              start: 1,
+              end: 35
+            }
+          ],
+          "series": [
+  
+  
+            {
+              name: '多年月均降雨量',
+              type: 'bar',
+              "barWidth": barWidth,
+              barGap: '10%', // Make series be overlap
+              barCateGoryGap: '10%',
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
+                    offset: 0,
+                    color: "rgba(24, 255, 255, 1)"
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(188, 255, 255, 1)"
+                  }
+                  ]),
+                },
+              },
+              data: props.data.yAxis
+            },
+            {
+              // smooth: true, //变为曲线 默认false折线
+              name: "月降雨天数",
+              type: "line",
+              data: props.data.yAxis2,
+              yAxisIndex: 1,
+              color: "#FFF21C",
+            },
+          ]
+  
+        };
+        option && chartDom.setOption(option, true);
+        allData.chart = chartDom;
+      };
+      watch(
+        () => props.refresh,
+        () => {
+          if (allData.chartDom) {
+            allData.chartDom.dispose();
+            allData.chartDom = null;
+          }
+          setTimeout(() => {
+            init();
+          }, 0);
+        }
+      );
+      onMounted(() => {
+        init();
+        window.addEventListener('resize', resizeTheChart);
+  
+  
+      });
+      return {
+        ...toRefs(allData),
+        resizeTheChart,
+        init,
+      };
+    },
+  };
+  </script>
+  
\ No newline at end of file
diff --git a/src/views/sponeScreen/Echarts/RainfallLegend.vue b/src/views/sponeScreen/Echarts/RainfallLegend.vue
new file mode 100644
index 0000000..4e8d52a
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/RainfallLegend.vue
@@ -0,0 +1,5 @@
+<!--年内降雨量特征  -->
+
+<template>
+  <div>123</div>
+</template>
diff --git a/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
new file mode 100644
index 0000000..2b72b45
--- /dev/null
+++ b/src/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue
@@ -0,0 +1,382 @@
+<template>
+  <div class="tslyqk_constituent_3d">
+    <div class="echarts3D" ref="echarts3D"></div>
+    <div class="bg-nopx"></div>
+  </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts';
+const { proxy } = getCurrentInstance();
+
+// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+  // 计算
+  let midRatio = (startRatio + endRatio) / 2;
+
+  let startRadian = startRatio * Math.PI * 2;
+  let endRadian = endRatio * Math.PI * 2;
+  let midRadian = midRatio * Math.PI * 2;
+
+  // 如果只有一个扇形，则不实现选中效果。
+  // if (startRatio === 0 && endRatio === 1) {
+  //     isSelected = false;
+  // }
+  isSelected = false;
+  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+  k = typeof k !== 'undefined' ? k : 1 / 3;
+
+  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+  let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+  let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+
+  // 计算高亮效果的放大比例（未高亮，则比例为 1）
+  let hoverRate = isHovered ? 1.05 : 1;
+
+  // 返回曲面参数方程
+  return {
+    u: {
+      min: -Math.PI,
+      max: Math.PI * 3,
+      step: Math.PI / 32,
+    },
+
+    v: {
+      min: 0,
+      max: Math.PI * 2,
+      step: Math.PI / 20,
+    },
+
+    x: function (u, v) {
+      if (u < startRadian) {
+        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      if (u > endRadian) {
+        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+
+    y: function (u, v) {
+      if (u < startRadian) {
+        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      if (u > endRadian) {
+        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+
+    z: function (u, v) {
+      if (u < -Math.PI * 0.5) {
+        return Math.sin(u);
+      }
+      if (u > Math.PI * 2.5) {
+        return Math.sin(u) * h * 0.1;
+      }
+      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    },
+  };
+}
+// 生成模拟 3D 饼图的配置项
+function getPie3D(pieData, internalDiameterRatio) {
+  let series = [];
+  let sumValue = 0;
+  let startValue = 0;
+  let endValue = 0;
+  let legendData = [];
+  let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
+
+  // 为每一个饼图数据，生成一个 series-surface 配置
+  for (let i = 0; i < pieData.length; i++) {
+    sumValue += pieData[i].value;
+
+    let seriesItem = {
+      name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+      type: 'surface',
+      parametric: true,
+      wireframe: {
+        show: false,
+      },
+      pieData: pieData[i],
+      pieStatus: {
+        selected: false,
+        hovered: false,
+        k: 1 / 10,
+      },
+    };
+
+    if (typeof pieData[i].itemStyle != 'undefined') {
+      let itemStyle = {};
+
+      typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
+      typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
+
+      seriesItem.itemStyle = itemStyle;
+    }
+    series.push(seriesItem);
+  }
+
+  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+  for (let i = 0; i < series.length; i++) {
+    endValue = startValue + series[i].pieData.value;
+
+    series[i].pieData.startRatio = startValue / sumValue;
+    series[i].pieData.endRatio = endValue / sumValue;
+    series[i].parametricEquation = getParametricEquation(
+      series[i].pieData.startRatio,
+      series[i].pieData.endRatio,
+      false,
+      false,
+      k,
+      series[i].pieData.value
+    );
+
+    startValue = endValue;
+
+    legendData.push(series[i].name);
+  }
+
+  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
+  series.push({
+    name: 'mouseoutSeries',
+    type: 'surface',
+    parametric: true,
+    wireframe: {
+      show: false,
+    },
+    itemStyle: {
+      opacity: 0.1,
+      color: '#E1E8EC',
+    },
+    parametricEquation: {
+      u: {
+        min: 0,
+        max: Math.PI * 2,
+        step: Math.PI / 20,
+      },
+      v: {
+        min: 0,
+        max: Math.PI,
+        step: Math.PI / 20,
+      },
+      x: function (u, v) {
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+      },
+      y: function (u, v) {
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+      },
+      z: function (u, v) {
+        return Math.cos(v) > 0 ? -0.5 : -5;
+      },
+    },
+  });
+
+  // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
+  series.push({
+    name: 'mouseoutSeries',
+    type: 'surface',
+    parametric: true,
+    wireframe: {
+      show: false,
+    },
+    itemStyle: {
+      opacity: 0.1,
+      color: '#E1E8EC',
+    },
+    parametricEquation: {
+      u: {
+        min: 0,
+        max: Math.PI * 2,
+        step: Math.PI / 20,
+      },
+      v: {
+        min: 0,
+        max: Math.PI,
+        step: Math.PI / 20,
+      },
+      x: function (u, v) {
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+      },
+      y: function (u, v) {
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+      },
+      z: function (u, v) {
+        return Math.cos(v) > 0 ? -5 : -7;
+      },
+    },
+  });
+  series.push({
+    name: 'mouseoutSeries',
+    type: 'surface',
+    parametric: true,
+    wireframe: {
+      show: false,
+    },
+    itemStyle: {
+      opacity: 0.1,
+      color: '#E1E8EC',
+    },
+    parametricEquation: {
+      u: {
+        min: 0,
+        max: Math.PI * 2,
+        step: Math.PI / 20,
+      },
+      v: {
+        min: 0,
+        max: Math.PI,
+        step: Math.PI / 20,
+      },
+      x: function (u, v) {
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+      },
+      y: function (u, v) {
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+      },
+      z: function (u, v) {
+        return Math.cos(v) > 0 ? -7 : -7;
+      },
+    },
+  });
+
+  // 准备待返回的配置项，把准备好的 legendData、series 传入。
+  let option = {
+    tooltip: {
+      formatter: params => {
+        if (params.seriesName !== 'mouseoutSeries') {
+          return `${
+            params.seriesName
+          }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+            params.color
+          };"></span>${option.series[params.seriesIndex].pieData.value}`;
+        }
+      },
+    },
+    //animation: false,
+    legend: {
+      orient: 'vertical',
+      icon: 'circle',
+      right: '5%',
+      top: '20%',
+      show: true,
+      itemGap: 10,
+      textStyle: {
+        color: '#A1E2FF',
+      },
+      // icon:'diamond',
+      data: legendData,
+      formatter: params => {
+        return params;
+      },
+    },
+    xAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    yAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    zAxis3D: {},
+    grid3D: {
+      viewControl: {
+        autoRotate: true,
+        //3d效果可以放大、旋转等，请自己去查看官方配置
+        // alpha: 0,
+        // beta: 100,
+        // rotateSensitivity: 100,
+        // zoomSensitivity: 100,
+        // panSensitivity: 100,
+      },
+      top: '5%',
+      left: 'left',
+      width: '70%',
+      //   heigth: '50%',
+      show: false,
+      boxHeight: 20,
+    },
+    series: series,
+  };
+  return option;
+}
+// 传入数据生成 option
+
+const initEcharts = () => {
+  const optionData = [
+    {
+      name: '草(0.4%)',
+      value: 0.4,
+      itemStyle: {
+        color: '#FFED52',
+      },
+    },
+    {
+      name: '田 (83.3%)',
+      value: 83.3,
+      itemStyle: {
+        color: '#FF8E5B',
+      },
+    },
+    {
+      name: '林 (11.4%)',
+      value: 11.4,
+      itemStyle: {
+        color: '#D956FF',
+      },
+    },
+    {
+      name: '湖 (1.6%)',
+      value: 1.6,
+      itemStyle: {
+        color: '#18FFFF',
+      },
+    },
+    {
+      name: '水 (3.4%)',
+      value: 3.4,
+      itemStyle: {
+        color: '#4CC1FF',
+      },
+    },
+  ];
+  // 生成配置选项
+  const option = getPie3D(optionData, 0.59);
+  //   const myChart = proxy.echarts.init(proxy.$refs.echarts);
+  const myChart = echarts.init(proxy.$refs.echarts3D);
+
+  // 绘制图形
+  myChart.setOption(option);
+};
+
+onMounted(() => {
+  initEcharts();
+});
+</script>
+
+<style lang="scss" scoped>
+.tslyqk_constituent_3d {
+  width: 100%;
+  height: 150px;
+  position: relative;
+  //   background: red;
+  .echarts3D {
+    height: 100%;
+    height: 150px;
+    position: relative;
+    // z-index: 310;
+    // background: red;
+  }
+  //   .bg-nopx {
+  //     position: absolute;
+  //     left: 50%;
+  //     top: 50%;
+  //     transform: translate(calc(-50% - 86px), calc(-50% + 24px));
+  //     width: 240px;
+  //     height: 151px;
+  //     // background: url('@/assets/newImgs/UrbanCharacteristics/pie_bottom.png') no-repeat;
+  //     background-size: 100% 100%;
+  //   }
+}
+</style>
diff --git a/src/views/sponeScreen/cityGK/index.vue b/src/views/sponeScreen/cityGK/index.vue
index b140c6b..d27456a 100644
--- a/src/views/sponeScreen/cityGK/index.vue
+++ b/src/views/sponeScreen/cityGK/index.vue
@@ -4,7 +4,45 @@
     <div class="publicLeftHM">
       <!-- 自然地理 -->
       <div class="partTitleHM">自然地理</div>
-      <div class="partContHM">自然地理自然地理</div>
+      <div class="partContHM">
+        <div class="ListBox ListBox1">
+          <div class="physicalGeography">
+            <div class="waterSupply">
+              <div class="bottomBgc"></div>
+              <div class="eachDescribe">
+                <div class="text">总面积</div>
+                <div class="sum bgcYellow">6118</div>
+                <div class="unit">km²</div>
+                <div class="icon colorBlue"></div>
+                <div class="text">中心城区</div>
+                <div class="sum colorBlue">647.55</div>
+                <div class="unit">km²</div>
+                <div class="iconTwo bgcblue"></div>
+                <div class="text">建成区</div>
+                <div class="sum bgcblue">117</div>
+                <div class="unit">km²</div>
+              </div>
+            </div>
+          </div>
+          <tslyqk_constituent_3d></tslyqk_constituent_3d>
+        </div>
+        <div class="ListBox ListBox3">
+          <div class="ListTitle">自然空间格局(一心、一核、一带、三片、三廊)</div>
+          <div class="ListContent">
+            <div class="SpatialPattern" v-for="item in policiesList">
+              <div class="eachinfo cyan">
+                <div class="number">{{ item.NumberA }}</div>
+                <div class="headText">{{ item.name }}</div>
+                <div class="rightText">{{ item.content }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 降雨特征 -->
+      <div class="Lowerleft">
+        <rainfall />
+      </div>
     </div>
 
     <div class="publicRightHM">
@@ -16,8 +54,36 @@
 </template>
 
 <script setup>
+import tslyqk_constituent_3d from '@/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue'; //3d图例
+import rainfall from '@/views/sponeScreen/cityGK/rainfall.vue'; //降雨页面
 const { proxy } = getCurrentInstance();
-
+const policiesList = ref([
+  {
+    name: '一心',
+    NumberA: '01',
+    content: '中心城区',
+  },
+  {
+    name: '一核',
+    NumberA: '02',
+    content: '开封新区',
+  },
+  {
+    name: '一带',
+    NumberA: '03',
+    content: '沿黄河南岸形成的沿黄生态涵养带',
+  },
+  {
+    name: '三片',
+    NumberA: '04',
+    content: '北部水源保护区、中部海绵城市重点建设区、南部卫生防护区',
+  },
+  {
+    name: '三廊',
+    NumberA: '05',
+    content: '沿运粮河、开封西湖以及东护城大堤形成的三条生态廊道',
+  },
+]);
 // 面板内容展开收起控制
 const props = defineProps({
   showPanel: {
@@ -35,4 +101,172 @@
 onMounted(() => {});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.ListBox {
+  .ListTitle {
+    width: 100%;
+    height: 32px;
+    line-height: 32px;
+    background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    // box-sizing: border-box;
+    padding-left: 30px;
+    font-family: SourceHanSansCN-Medium;
+    font-weight: bold;
+    font-size: 15px;
+    color: #e4f5ff;
+  }
+  .ListContent {
+    width: 100%;
+    height: calc(100% - 32px);
+    overflow: auto;
+    // background: red;
+  }
+  .SpatialPattern {
+    padding-top: 5px;
+    overflow: auto;
+    // background: red;
+    .eachinfo {
+      width: 100%;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      // background: yellow;
+      margin-bottom: 3px;
+      cursor: pointer;
+    }
+    .headText {
+      font-weight: 500;
+      font-size: 16px;
+      min-width: 50px;
+      color: #18ffff;
+      margin-left: 15px;
+      text-align: center;
+      // background: red;
+    }
+    .rightText {
+      overflow: hidden;
+      text-overflow: ellipsis; /* 超出部分省略号 */
+      word-break: break-all; /* break-all(允许在单词内换行。) */
+      display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
+      -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
+      -webkit-line-clamp: 1; /* 显示的行数 */
+      padding-left: 10px;
+      color: #b8ecff;
+      // background: yellow;
+    }
+    .cyan {
+      background: url('@/assets/newImgs/HMScreen/Numberbox.png') no-repeat;
+      background-size: 100% 100%;
+      .number {
+        color: #d1dff7;
+        font-weight: 400;
+        font-size: 16px;
+        position: relative;
+        left: 8px;
+        // background: blueviolet;
+      }
+    }
+  }
+
+  width: 100%;
+  margin-top: 2px;
+  height: 150px;
+  position: relative;
+  // background: red;
+  .physicalGeography {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    // background: yellowgreen;
+    .waterSupply {
+      position: relative;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .eachDescribe {
+        display: flex;
+        align-items: center;
+        font-family: SourceHanSansCN-Regular;
+        font-weight: 300;
+        // background: red;
+        .unit {
+          padding-top: 2px;
+          color: #ffffff;
+        }
+        .icon {
+          display: inline-block;
+          border-color: #3afff8;
+          border-style: solid;
+          border-width: 2px;
+          width: 0;
+          height: 0;
+          margin-right: 7px;
+          position: relative;
+          top: -2px;
+          -moz-transform: rotate(45deg);
+          -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+          transform: rotate(45deg);
+          margin-left: 7px;
+        }
+        .iconTwo {
+          display: inline-block;
+          border-color: #18e87a;
+          border-style: solid;
+          border-width: 2px;
+          width: 0;
+          height: 0;
+          margin-right: 7px;
+          position: relative;
+          top: -2px;
+          -moz-transform: rotate(45deg);
+          -webkit-transform: rotate(45deg);
+          -o-transform: rotate(45deg);
+          transform: rotate(45deg);
+          margin-left: 7px;
+        }
+        .colorYellow {
+          color: #ffed52;
+        }
+        .colorBlue {
+          color: #18ffff;
+        }
+        .bgcYellow {
+          color: #ffed52;
+        }
+        .bgcblue {
+          color: #18e87a;
+        }
+        .text {
+          padding: 0 5px 0 5px;
+          font-size: 16px;
+          color: #b8ecff;
+        }
+        .sum {
+          font-size: 16px;
+          padding-right: 10px;
+        }
+      }
+      .bottomBgc {
+        width: 100%;
+        height: 16px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background: url('@/assets/newImgs/HMScreen/bottomBgcimg.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.ListBox3 {
+  margin-top: 20px;
+  height: 235px;
+  // background: red;
+}
+.Lowerleft {
+  margin-top: 15px;
+}
+</style>
diff --git a/src/views/sponeScreen/cityGK/rainfall.vue b/src/views/sponeScreen/cityGK/rainfall.vue
new file mode 100644
index 0000000..37030d6
--- /dev/null
+++ b/src/views/sponeScreen/cityGK/rainfall.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="partTitleHM">
+    降雨特征
+    <div class="head-right" style="">
+      <div
+        class="head-item"
+        v-for="(item, index) in yearList"
+        :key="item"
+        :class="activedname == item.name ? 'activedright' : ''"
+        @click="yearclick(item, index)"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+  </div>
+
+  <div class="partContHM">
+    <div class="HeadContent" v-if="activedname.value == '年际降雨变化'">丰、枯年交替出现，且降雨量变化幅度大</div>
+    <div class="HeadContent" v-else>年内降雨量分配不均匀，冬季干旱，雨雪稀少</div>
+    <div class="box-body">
+      <div style="height: 100%">
+        <RainfallEcharts :data="chartData2" :refresh="chartData2.refresh"></RainfallEcharts>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import RainfallEcharts from '@/views/sponeScreen/Echarts/RainfallEcharts.vue'; //3d图例
+const chartData2 = ref({
+  xAxis: [1985, 1900, 1995, 2000, 2005, 2010, 2015, 2020],
+  yAxis: [700, 600, 750, 800, 750, 740, 780, 900],
+  yAxis2: [7, 9, 10, 9, 11, 10, 12, 15],
+  refresh: 1,
+});
+const activedname = ref('年际降雨变化');
+
+const ContentDetails = ref('');
+const yearList = ref([
+  { name: '年际降雨变化', value: 1 },
+  { name: '年内降雨量', value: 2 },
+]);
+const a = ref('');
+function yearclick(val) {
+  console.log(val.name, 'val.name');
+  activedname.value = val.name;
+  console.log(activedname.value, 'activedname.value ');
+}
+const refresh = ref(1);
+</script>
+
+<style lang="scss" scoped>
+.HeadContent {
+  width: 100%;
+  height: 30px;
+  background: #2270ff;
+  text-align: center;
+  line-height: 30px;
+  color: #ffffff;
+}
+.box-body {
+  height: calc(100vh - 710px);
+  padding-left: 5px;
+  position: relative;
+  overflow: auto;
+}
+.head-right {
+  cursor: pointer;
+  position: relative;
+  font-size: 14px;
+  left: 200px;
+  top: -32px;
+  color: #fff;
+  display: flex;
+  max-width: 200px;
+  overflow: hidden;
+  overflow-x: auto;
+  line-height: 18px;
+
+  .head-item {
+    margin-left: 10px;
+    padding: 2px 3px;
+    border: 1px solid transparent;
+    background: #013a73;
+    height: 23px;
+    text-align: center;
+    min-width: 42px;
+  }
+
+  .activedright {
+    border: 1px solid #2cfce9;
+    color: #e4f5ff;
+    background: #166f84;
+  }
+}
+</style>