格点雨量

src/components/HeaderSection/index.vue

@@ -42,7 +42,6 @@
 import usePermissionStore from '@/store/modules/permission';
 import useUserStore from '@/store/modules/user';
 import { onClickOutside} from "@vueuse/core";
-import { onClickOutside} from "@vueuse/core";
 
 const router = useRouter();
 const userStore = useUserStore();

src/views/globalMap/RightMenu/GridPointRainfall.vue

@@ -0,0 +1,48 @@
+<template>
+  <Dialog custom-show title="格点雨量" :height="'1000px'" hide-footer @close="handleClose">
+    <div class="gradient-text title">雨量统计：{{address}}({{location[0]}}, {{location[1]}})</div>
+    <Chart :option="chartOption" style="height: 700px" />
+  </Dialog>
+</template>
+
+<script lang="ts" setup name="GridPointRainfall">
+import { option9 } from '@/views/globalMap/RightMenu/echartOptions';
+import AMapLoader from '@amap/amap-jsapi-loader';
+
+interface Props {
+  modelValue: boolean;
+  location?: string | number[];
+}
+const props = withDefaults(defineProps<Props>(), {});
+const emits = defineEmits(['update:modelValue']);
+let address = ref('');
+let chartOption = ref(option9);
+const handleClose = () => {
+  emits('update:modelValue', false);
+};
+let AMap, geocoder;
+onMounted(() => {
+  AMapLoader.load({
+    key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.PlaceSearch', 'AMap.ContextMenu', 'AMap.PolygonEditor', 'AMap.Geocoder'] // 插件列表
+  }).then((res) => {
+    AMap = res;
+    geocoder = new AMap.Geocoder({
+      // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+      city: '010'
+    });
+    geocoder.getAddress(props.location, (status, result) => {
+      if (status === 'complete' && result.info === 'OK') {
+        address.value = result.regeocode.formattedAddress;
+      }
+    });
+  });
+  chartOption.value.series[0].data = [820, 932, 901, 934, 1290, 1330];
+  chartOption.value.series[1].data = ['', '', '', '', '', 1330, 901, 934, 1290, 1330, 1320];
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/globalMap/RightMenu/echartOptions.ts

@@ -707,3 +707,98 @@ export const option8 = {
     }
   ]
 };
+
+// 格点雨量
+export const option9 = {
+  legend: {
+    show: true,
+    icon: 'rect',
+    itemWidth: 75,
+    itemHeight: 42,
+    itemGap: 30,
+    textStyle: {
+      fontSize: '32',
+      color: '#A8CCDE'
+    },
+    data: ['过去累计雨量', '未来累计雨量']
+  },
+  color: ['#467cd1', '#bcbcbc'],
+  xAxis: {
+    type: 'category',
+    axisLabel: {
+      textStyle: {
+        color: '#a7ccdf',
+        fontFamily: '微软雅黑',
+        fontSize: 32
+      }
+    },
+    data: ['-24h', '-12h', '-6h', '-3h', '-1h', '现在', '1h', '3h', '24h', '40h', '70h']
+  },
+  yAxis: {
+    type: 'value',
+    axisLabel: {
+      textStyle: {
+        color: '#a7ccdf',
+        fontFamily: '微软雅黑',
+        fontSize: 32
+      }
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#0c2c5a'
+      }
+    },
+    axisLine: {
+      show: false
+    }
+  },
+  series: [
+    {
+      name: '过去累计雨量',
+      data: [],
+      label: {
+        show: true, // 显示标签
+        color: '#a7ccdf',
+        fontFamily: '微软雅黑',
+        fontSize: 32,
+        position: 'top' // 标签位置，可以是 'top'、'bottom'、'left'、'right' 等
+      },
+      markLine: {
+        symbol: 'none',
+        data: [
+          {
+            xAxis: 5, // "现在"的索引为1（从0开始计数）
+            yAxis: null, // yAxis为null表示竖线贯穿整个y轴
+            label: { show: false },
+            lineStyle: {
+              width: 6,
+              color: 'red',
+              type: 'solid'
+            }
+          }
+        ]
+      },
+      lineStyle: {
+        width: 6
+      },
+      type: 'line',
+      smooth: true
+    },
+    {
+      name: '未来累计雨量',
+      label: {
+        show: true, // 显示标签
+        color: '#a7ccdf',
+        fontFamily: '微软雅黑',
+        fontSize: 32,
+        position: 'top' // 标签位置，可以是 'top'、'bottom'、'left'、'right' 等
+      },
+      data: [],
+      lineStyle: {
+        width: 6
+      },
+      type: 'line',
+      smooth: true
+    }
+  ]
+};

src/views/globalMap/index.vue

@@ -26,6 +26,7 @@
       <TimeAxis />
       <DrawTools v-if="showDrawTools" @handle-analysis-data="handleAnalysisData" />
       <NearbyVideos v-if="showNearbyVideos" v-model="showNearbyVideos" :location="location" />
+      <GridPointRainfall v-if="showRainfall" v-model="showRainfall" :location="location" />
       <MaterialDetail v-if="showWarehouse" v-model="showWarehouse" :warehouse-data="warehouseData" />
       <CommunicationSupport v-if="communicationSupport.show" @close="handleHideCommunicationSupport" />
     </div>
@@ -47,6 +48,7 @@ import RightMenu from './RightMenu/index.vue';
 import { PointType } from '@/api/globalMap/type';
 import DrawTools from '@/views/globalMap/RightMenu/DrawTools.vue';
 import CommunicationSupport from '@/views/globalMap/RightMenu/CommunicationSupport.vue';
+import GridPointRainfall from '@/views/globalMap/RightMenu/GridPointRainfall.vue';
 
 const rightMenuRef = ref(null);
 const mapData = reactive(logicalData);
@@ -57,7 +59,7 @@ let leftMenuRef = ref(null);
 //  vectorgraph satellite imageMap 废弃：logical satellite2 satellite3
 let activeMap = ref('satellite');
 // 附近视频菜单数据
-let videoMenu = ref({});
+let tempMenu = ref({});
 const communicationSupport = reactive({
   show: false,
   data: {}
@@ -152,7 +154,7 @@ const clickMenu = (item, dataList) => {
     communicationSupport.show = !communicationSupport.show;
     communicationSupport.data = item;
   } else if (item.path === '4') {
-    videoMenu.value = item;
+    tempMenu.value = item;
     // 附近视频
     map = getMap();
     //为地图注册click事件获取鼠标点击出的经纬度坐标
@@ -240,13 +242,24 @@ const trackPlayback = (data) => {
   return {};
 };
 let showNearbyVideos = ref(false);
+let showRainfall = ref(false);
 let location = ref([]);
 watch(showNearbyVideos, () => {
   if (!showNearbyVideos.value) {
     location.value = [];
-    if (!!videoMenu.value) {
-      leftMenuRef.value.setMenuChange(videoMenu.value, false);
-      videoMenu.value = {};
+    if (!!tempMenu.value) {
+      leftMenuRef.value.setMenuChange(tempMenu.value, false);
+      tempMenu.value = {};
+      map.off('click', handleClickMap);
+    }
+  }
+});
+watch(showRainfall, () => {
+  if (!showRainfall.value) {
+    location.value = [];
+    if (!!tempMenu.value) {
+      leftMenuRef.value.setMenuChange(tempMenu.value, false);
+      tempMenu.value = {};
       map.off('click', handleClickMap);
     }
   }
@@ -258,7 +271,11 @@ const handleShowVideo = (data) => {
 };
 const handleClickMap = (e) => {
   location.value = [e.lnglat.getLng(), e.lnglat.getLat()];
-  showNearbyVideos.value = true;
+  if (!!tempMenu.value && tempMenu.value.name === '附近视频') {
+    showNearbyVideos.value = true;
+  } else if (!!tempMenu.value && tempMenu.value.name === '格点雨量') {
+    showRainfall.value = true;
+  }
 };
 let showWarehouse = ref(false);
 let warehouseData = ref('');