隐患点

src/component/common/InformationBox.vue

@@ -0,0 +1,110 @@
+<!-- 内容显示组件 -->
+<template>
+    <div class="infomation-box" :style="{ width: `${width}px`, 'max-height': `${height}px`, top: `${newOffsetY}px`, left: `${newOffsetX}px` }">
+        <header>
+            <div class="title">
+                <h3>{{ title }}</h3>
+            </div>
+        </header>
+        <div class="content">
+            <table class="table">
+                <tr v-for="(tableData, index) in tableDatas" :key="index">
+                    <td class="label">{{ tableData.title }}</td>
+                    <td>{{ tableData.content }}</td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { Utils } from '@/utils/utils';
+import { onMounted, ref, type Ref } from 'vue';
+
+const props = defineProps<{
+    title: string
+    data: Record<string, any>
+    field: Record<string, string>
+    offsetX: number
+    offsetY: number
+}>()
+
+// 定义宽高和偏移
+const width = ref(400)
+const height = ref(450)
+const newOffsetX = ref(props.offsetX)
+const newOffsetY = ref(props.offsetY)
+
+const tableDatas: Ref<{ title: string, content: string }[]> = ref([])
+
+onMounted(() => {
+    // 判断是否超出屏幕，超出就重新定位
+    [newOffsetX.value, newOffsetY.value] = Utils.keepWithinScreen(props.offsetX, props.offsetY, width.value, height.value)
+
+    // 数据转换
+    Object.entries(props.data).forEach(([key, value]) => {
+        // 判读key是不是存在field中，存在就添加到表格数据，不存在则不添加
+        if (Object.hasOwn(props.field, key)) {
+            tableDatas.value.push({
+                title: props.field[key],
+                content: value
+            })
+        }
+    });
+})
+</script>
+
+<style scoped>
+.infomation-box {
+    overflow-y: auto;
+    position: absolute;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.title {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    background-color: rgba(14, 52, 98, 0.95);
+    padding: 2px 15px;
+    border-bottom: 1px solid #e9ecef;
+    box-sizing: border-box;
+    height: 40px;
+}
+
+.title h3 {
+    color: #FFF;
+    font-size: 14px;
+    font-weight: bold;
+    font-family: "Source Han Sans CN";
+}
+
+.content {
+    width: 100%;
+    color: #FFF;
+    background-color: rgba(0, 94, 153, 1);
+}
+
+.table {
+    width: 100%;
+    height: 100%;
+    border-collapse: collapse;
+}
+
+.table tr td {
+    padding: 8px;
+    border-top: 1px solid #000;
+    border-bottom: 1px solid #000;
+    border-left: none;
+    border-right: none;
+    text-align: left;
+    font-family: "Source Han Sans CN";
+    font-size: 13px;
+}
+
+.label {
+    width: 30%;
+    font-size: 13px;
+}
+</style>

src/component/map/Map.vue

@@ -2,23 +2,33 @@
     <div class="map_container" id="map-container"></div>
 
     <!-- 行政区划 -->
-    <AdministrativeDivision v-if="viewerLoadingCompleted"/>
+    <AdministrativeDivision v-if="useViewerStore().getViewerLoadingCompleted()" />
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { onBeforeMount, onMounted } from 'vue';
 import config from '@/config/config.json';
 import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
 import AdministrativeDivision from './AdministrativeDivision.vue';
+import { useViewerStore } from '@/stores/useViewerStore';
 
-// 指示器加载完成
-let viewerLoadingCompleted = ref(false);
+onBeforeMount(() => {
+    // 初始化为false
+    useViewerStore().setViewerLoadingCompleted(false)
+
+    // 清除viewer相关资源
+    if (CesiumUtilsSingleton.getViewer()) {
+        CesiumUtilsSingleton.clearAllResources('all')
+    }
+})
 
 onMounted(() => {
     CesiumUtilsSingleton.initCesiumViewer({
         containerId: 'map-container'
     })
-    viewerLoadingCompleted.value = true;
+
+    // 更新完成状态
+    useViewerStore().setViewerLoadingCompleted(true)
     CesiumUtilsSingleton.viewToTarget(config.defaultPosition as [number, number, number]);
 })
 

src/component/rain-earthquake/BasicComponent.vue

@@ -0,0 +1,26 @@
+<!-- 基础组件 -->
+<template>
+  <div>
+    <!-- 地图组件 -->
+    <MapComponent />
+
+    <!-- 隐患点组件 -->
+    <HiddenPointComponent :disaster-type="props.disasterType" />
+
+    <!-- 风险点组件 -->
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import MapComponent from "@/component/map/Map.vue"
+import type { DisasterType } from "@/types/common/DisasterType";
+import HiddenPointComponent from "./HiddenPointComponent.vue";
+
+// 获取父组件传递德数据
+const props = defineProps<{
+  disasterType: DisasterType
+}>()
+</script>
+
+<style scoped></style>

src/component/rain-earthquake/HiddenPointComponent.vue

@@ -0,0 +1,120 @@
+<!-- 隐患点组件 -->
+<template>
+  <div>
+    <!-- 加载基础隐患点 -->
+    <LoadingPoints v-if="useViewerStore().getViewerLoadingCompleted() && baseHiddenPoints.length > 0" :base-points="baseHiddenPoints"
+      :get-disaster-icon="getDisasterIcon" />
+
+    <!-- 显示信息框 -->
+    <InformationBox 
+      :data='hiddenDangerPointDetail as Record<string, any>' 
+      :field="field"
+      v-if="showInformationBox" 
+      :title="informationBoxTitle" 
+      :offset-x="offsetX" 
+      :offset-y="offsetY"
+      :key="clickHiddenDangerPointId" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DisasterType } from "@/types/common/DisasterType";
+import { ref } 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 { CesiumUtilsSingleton } from "@/utils/cesium/CesiumUtils";
+import config from '@/config/config.json'
+import InformationBox from "@/component/common/InformationBox.vue";
+import type { Billboard } from "cesium";
+import { useViewerStore } from "@/stores/useViewerStore";
+
+
+const props = defineProps<{
+  disasterType: DisasterType
+}>()
+
+const baseHiddenPoints = ref<Point[]>([]);
+
+const clickHiddenDangerPointId = ref(-1);
+
+const showInformationBox = ref(false);
+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
+})
+
+CesiumUtilsSingleton.clickLayer(async (pickedObject: object) => {
+  const obj: { id: string, primitive: Billboard } = pickedObject as { id: string, primitive: Billboard }
+
+  if (obj && Object.hasOwn(obj, 'id') && (typeof obj.id == 'string') && obj.id.includes(config.prefix.hiddenDangerPointId)) {
+    const matchResult = obj.id.match(/\d+$/)
+    clickHiddenDangerPointId.value = matchResult ? parseInt(matchResult[0]) : -1
+
+    try {
+      // 先隐藏旧的信息框
+      showInformationBox.value = false
+      
+      // 获取隐患点数据
+      const res = await $api.hiddenDangerSpots.getPointDetailById(clickHiddenDangerPointId.value)
+      
+      // 等待一帧，确保旧组件已销毁
+      await new Promise(resolve => setTimeout(resolve, 0))
+      
+      // 更新数据
+      hiddenDangerPointDetail.value = res.data
+      informationBoxTitle.value = res.data.disasterType + '隐患点'
+
+      // 将坐标转换为偏移量
+      const screenPos = CesiumUtilsSingleton.convertScreenPosition(obj.primitive.position)
+      offsetX.value = screenPos.x
+      offsetY.value = screenPos.y
+      
+      // 显示新的信息框
+      showInformationBox.value = true
+    } catch (error) {
+      showInformationBox.value = false
+      throw new Error(`获取隐患点数据失败: ${error}`);
+    }
+  } else {
+    showInformationBox.value = false
+    clickHiddenDangerPointId.value = -1
+  }
+})
+</script>
+
+<script lang="ts">
+function getDisasterIcon(disasterType: string): string {
+  switch (disasterType) {
+    case '滑坡':
+      return landslide
+    case '泥石流':
+      return debrisFlow
+    case '内涝':
+      return flashFlood
+    case "山洪":
+      return waterlogging
+    default:
+      throw new Error(`未知的灾害类型: ${disasterType}`);
+  }
+}
+</script>
+
+<style scoped></style>

src/component/rain-earthquake/LoadingPoints.vue

@@ -0,0 +1,26 @@
+<!-- 加载点的组件 -->
+<template>
+
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { usePointsHandle } from '@/hooks/usePointsHandle';
+import type { Point } from '@/types/base/Point';
+
+// 属性
+const props = defineProps<{
+    basePoints: Point[],
+    getDisasterIcon: (disasterType: string) => string
+}>();
+
+// 点处理钩子
+const pointsHandle = usePointsHandle()
+
+onMounted(() => {
+    // 加载点
+    pointsHandle.addPoints(props.basePoints, props.getDisasterIcon)
+})
+</script>
+
+<style scoped></style>