yjdp-web/src/views/globalMap/RightMenu/GridPointRainfall.vue

<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';
import { getRainfallCode, getRainfallInfo } from '@/api/globalMap/gridPointRainfall';

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;
      }
    });
  });
  getRainfallCode({
    longitude: props.location[0],
    latitude: props.location[1]
  }).then((res) => {
    getRainfallInfo(res.rows[0].code).then((res2) => {
      const data = res2.data.rainfallHistory;
      const data2 = res2.data.rainfallFuture;
      const data3 = [];
      data.forEach(() => {
        data3.push('');
      });
      data3[data3.length - 1] = data[data2.length - 1].value;
      data2.forEach((item) => {
        data3.push(item.hour);
      });
      chartOption.value.series[0].data = res2.data.rainfallHistory;
      chartOption.value.series[1].data = data3;
    });
  });
});
onMounted(() => {

});
</script>

<style lang="scss" scoped></style>