xian_vue_new/src/component/rain-earthquake/HiddenPointComponent.vue

<!-- 隐患点组件 -->
<template>
  <div>
    <!-- 加载基础隐患点 -->
    <LoadingPoints
      v-if="
        useViewerStore().getViewerLoadingCompleted() &&
        baseHiddenPoints.length > 0
      "
      :base-points="baseHiddenPoints"
      :get-disaster-icon="getDisasterIcon"
      :prefix="config.prefix.hiddenDangerPointId"
    />

    <!-- 显示信息框 -->
    <InformationBox
      :data="hiddenDangerPointDetail as Record<string, any>"
      :field="field"
      v-if="
        useLoadingInformationStore().getLoadingHiddenPointInformationStatus()
      "
      :title="informationBoxTitle"
      :offset-x="offsetX"
      :offset-y="offsetY"
      :key="useLoadingInformationStore().getHiddenPointId()"
    />
  </div>
</template>

<script setup lang="ts">
  import { DisasterType } from '@/types/common/DisasterType';
  import { ref, watch } from 'vue';
  import { $api } from '@/api/api.ts';
  import type { Point } from '@/types/base/Point';
  import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
  import landslide from '@/assets/images/icon/landslide.png';
  import debrisFlow from '@/assets/images/icon/debris-flow.png';
  import flashFlood from '@/assets/images/icon/flash-flood.png';
  import waterlogging from '@/assets/images/icon/waterlogging.png';
  import config from '@/config/config.json';
  import InformationBox from '@/component/common/InformationBox.vue';
  import { useViewerStore } from '@/stores/useViewerStore';
  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';

  const props = defineProps<{
    disasterType: DisasterType;
  }>();

  const baseHiddenPoints = ref<Point[]>([]);

  const informationBoxTitle = ref('');
  const offsetX = ref(0);
  const offsetY = ref(0);
  const hiddenDangerPointDetail = ref<Point>();

  const field = {
    fieldCode: '野外编号',
    disasterName: '灾害点名称',
    position: '位置',
    disasterType: '灾害类型',
    scaleGrade: '规模等级',
    riskGrade: '风险等级',
  };

  $api.hiddenDangerSpots.getBasePoins(props.disasterType).then((res) => {
    baseHiddenPoints.value = res.data;
  });

  // 监听id变化
  watch(
    () => useLoadingInformationStore().getHiddenPointId(),
    async (newId: number) => {
      if (newId === -1) {
        return;
      }

      // 获取隐患点数据
      const clickObject = useLoadingInformationStore().getClickObject();

      if (!clickObject || !clickObject.primitive) {
        console.warn('点击对象或图元不存在');
        return;
      }

      const res = await $api.hiddenDangerSpots.getPointDetailById(
        useLoadingInformationStore().getHiddenPointId()
      );

      // 更新数据
      hiddenDangerPointDetail.value = res.data;
      informationBoxTitle.value = res.data.disasterType + '隐患点';

      try {
        // 将坐标转换为偏移量
        const screenPos = CesiumUtilsSingleton.convertScreenPosition(
          clickObject.primitive.position
        );
        offsetX.value = screenPos.x;
        offsetY.value = screenPos.y;

        // 显示新的信息框
        useLoadingInformationStore().setLoadingHiddenPointInformationStatus(
          true
        );
      } catch (error) {
        throw new Error(`坐标转换失败:${error}`);
      }
    }
  );
</script>

<script lang="ts">
  function getDisasterIcon(disasterType?: string): string {
    switch (disasterType) {
      case '滑坡':
        return landslide;
      case '泥石流':
        return debrisFlow;
      case '内涝':
        return waterlogging;
      case '山洪':
        return flashFlood;
      default:
        throw new Error(`未知的灾害类型: ${disasterType}`);
    }
  }
</script>

<style scoped></style>