危险源点

src/api/api.ts

@@ -3,10 +3,12 @@ import { getSm2PublicKey } from './crypto'
 import { getBasePoins as getHiddenDangerBasePoints, getPointDetailById as getHiddenDangerPointDetailById} from './hidden-danger-spots'
 import { getBasePoins as getRiskBasePoints, getPointDetailById as getRiskPointDetailById} from './risk-spots'
 import { getBasePoins as getHospitalsBasePoints, getPointDetailById as getHospitalsPointDetailById} from './hospitals'
+import { getBasePoints as getDangerousSourceBasePoints, getPointDetailById as getDangerousSourcePointDetailById} from './dangerous-source'
 import type { ApiResponse } from '@/types/ApiResponse'
 import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots'
 import type { XianRiskSpots } from '@/types/base/XianRiskSpots'
 import type { XianHospitals } from '@/types/base/XianHospitals'
+import type { XianDangerousSource } from '@/types/base/XianDangerousSource'
 
 /**
  * API接口统一导出对象
@@ -70,4 +72,20 @@ export const $api = {
      */
     getPointDetailById: (id: number): Promise<ApiResponse<XianHospitals>> => getHospitalsPointDetailById(id),
   },
+
+  // 危险源信息
+  dangerousSource: {
+    /**
+     * 获取所有基础危险源
+     * @returns 危险源数据数组
+     */
+    getBasePoints: (): Promise<ApiResponse<XianDangerousSource[]>> => getDangerousSourceBasePoints(),
+
+    /**
+     * 根据id获取危险源详情
+     * @param id - 危险源id
+     * @returns 危险源详情
+     */
+    getPointDetailById: (id: number): Promise<ApiResponse<XianDangerousSource>> => getDangerousSourcePointDetailById(id),
+  },
 }

src/api/dangerous-source.ts

@@ -0,0 +1,20 @@
+import type { ApiResponse } from "@/types/ApiResponse"
+import type { XianDangerousSource } from "@/types/base/XianDangerousSource"
+import httpInstance from "@/utils/request/http"
+
+/**
+ * 获取危险源基础数据
+ * @returns 危险源数据数组
+ */
+export const getBasePoints = (): Promise<ApiResponse<XianDangerousSource[]>> => {
+    return httpInstance.get('/dangerous-source/base-points')
+}
+
+/**
+ * 根据id获取危险源详情
+ * @param id - 危险源id
+ * @returns 危险源详情
+ */
+export const getPointDetailById = (id: number): Promise<ApiResponse<XianDangerousSource>> => {
+    return httpInstance.get(`/dangerous-source/point-detail/${id}`)
+}

src/assets/index.ts

@@ -7,6 +7,7 @@ export { default as debrisFlowIcon } from '@/assets/images/icon/debris-flow.png'
 export { default as flashFloodIcon } from '@/assets/images/icon/flash-flood.png';
 export { default as riskAreaIcon } from '@/assets/images/icon/risk-area.png';
 export { default as hospitalIcon } from '@/assets/images/icon/hospital.png';
+export { default as dangerousSourceIcon } from '@/assets/images/icon/dangerous-source.png';
 
 // 图片
 export { default as backgroundImage } from '@/assets/images/background-image.png';

src/component/rain-earthquake/ControlShowDetailComponent.vue

@@ -6,11 +6,20 @@
       useStatusStore().poiLayers.showHospital.loading
     "
   />
+
+  <!-- 危险源 -->
+  <DangerousSourceComponent
+    v-if="
+      useStatusStore().appLoadingCompleted &&
+      useStatusStore().poiLayers.showDangerSource.loading
+    "
+  />
 </template>
 
 <script lang="ts" setup>
   import { useStatusStore } from '@/stores/useStatusStore';
   import HospitalComponent from './HospitalComponent.vue';
+  import DangerousSourceComponent from './DangerousSourceComponent.vue';
 </script>
 
 <style scoped lang="less"></style>

src/component/rain-earthquake/DangerousSourceComponent.vue

@@ -0,0 +1,120 @@
+<!-- 危险源组件 -->
+<template>
+  <div>
+    <!-- 加载危险源 -->
+    <LoadingPoints
+      v-if="
+        useStatusStore().appLoadingCompleted && dangerousSourcePoints.length > 0
+      "
+      :base-points="dangerousSourcePoints"
+      :get-disaster-icon="getDisasterIcon"
+      :prefix="config.prefix.dangerousSourcePointId"
+      :is-default="false"
+      :loading-resource-field="LoadingResource.DANGEROUS_SOURCE"
+    />
+
+    <!-- 显示信息框 -->
+    <InformationBox
+      :data="dangerousSourcePointDetail as Record<string, any>"
+      :field="field"
+      v-if="useLoadingInformationStore().dangerousSource.loading"
+      :title="informationBoxTitle"
+      :offset-x="offsetX"
+      :offset-y="offsetY"
+      :key="useLoadingInformationStore().dangerousSource.id"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  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 config from '@/config/config.json';
+  import InformationBox from '@/component/common/InformationBox.vue';
+  import { useStatusStore } from '@/stores/useStatusStore';
+  import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
+  import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+  import { LoadingResource } from '@/types/common/LoadingResourceType';
+  import { useDangerousSourcePoint } from '@/hooks/rain-earthquake/useDangerousSourcePoint';
+  import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
+
+  const dangerousSourcePoints = ref<Point[]>([]);
+
+  // 信息框相关配置
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const dangerousSourcePointDetail = ref<Point>();
+  const informationBoxTitle = ref('');
+
+  // 获取钩子函数
+  const { field, getDisasterIcon } = useDangerousSourcePoint();
+
+  $api.dangerousSource.getBasePoints().then((res) => {
+    dangerousSourcePoints.value = res.data;
+  });
+
+  // 监听id变化
+  watch(
+    () => useLoadingInformationStore().dangerousSource.id,
+    async (newId: number) => {
+      if (newId === -1) {
+        return;
+      }
+      // 获取危险源数据
+      const clickObject = useLoadingInformationStore().clickObject;
+
+      if (!clickObject || !clickObject.primitive) {
+        console.warn('点击对象或图元不存在');
+        return;
+      }
+
+      const res = await $api.dangerousSource.getPointDetailById(
+        useLoadingInformationStore().dangerousSource.id
+      );
+
+      // 更新数据
+      dangerousSourcePointDetail.value = res.data;
+      informationBoxTitle.value = res.data.name || '危险源信息';
+
+      try {
+        // 将坐标转换为偏移量
+        const screenPos = CesiumUtilsSingleton.convertScreenPosition(
+          clickObject.primitive.position
+        );
+        offsetX.value = screenPos.x;
+        offsetY.value = screenPos.y;
+
+        // 显示新的信息框
+        useLoadingInformationStore().dangerousSource.loading = true;
+      } catch (error) {
+        throw new Error(`坐标转换失败:${error}`);
+      }
+    }
+  );
+
+  // 监听显示隐藏
+  watch(
+    () => useStatusStore().poiLayers.showDangerSource.show,
+    (newValue: boolean) => {
+      if (newValue) {
+        // 显示危险源
+        CesiumUtilsSingleton.batchShowPrimitives(
+          useLoadingResourceStore().getLoadingResource(
+            LoadingResource.DANGEROUS_SOURCE
+          )
+        );
+      } else {
+        // 隐藏危险源
+        CesiumUtilsSingleton.batchHidePrimitives(
+          useLoadingResourceStore().getLoadingResource(
+            LoadingResource.DANGEROUS_SOURCE
+          )
+        );
+      }
+    }
+  );
+</script>
+
+<style scoped></style>

src/config/config.json

@@ -36,6 +36,7 @@
   "prefix": {
     "hiddenDangerPointId": "hidden-danger-point-",
     "riskPointId": "risk-point-",
-    "hospitalPointId": "hospital-point-"
+    "hospitalPointId": "hospital-point-",
+    "dangerousSourcePointId": "dangerous-source-point-"
   }
 }

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -193,9 +193,7 @@ export const useEarthquakeDisasterChain = () => {
         name: '显示危险源',
         statusStore: statusStore.poiLayers,
         statusKey: 'showDangerSource' as const,
-        callback: (status: unknown) => {
+        callback: layerControl.clickDangerousSource,
-          console.log('显示危险源', status);
-        },
       },
       {
         name: '显示避难所',

src/hooks/map/useMap.ts

@@ -50,6 +50,13 @@ export const useMap = () => {
           useLoadingInformationStore().hospital.id = id;
         }
 
+        // 危险源
+        else if (
+          pickedObject.id.startsWith(config.prefix.dangerousSourcePointId)
+        ) {
+          useLoadingInformationStore().dangerousSource.id = id;
+        }
+
         // 其他
         else {
           // 重置状态

src/hooks/rain-earthquake/useDangerousSourcePoint.ts

@@ -0,0 +1,32 @@
+import { dangerousSourceIcon } from '@/assets';
+
+/**
+ * 危险源相关钩子函数
+ * @returns
+ */
+export const useDangerousSourcePoint = () => {
+  /**
+   * 字段映射配置
+   */
+  const field = {
+    unitCode: '统一编号',
+    name: '危险源名称',
+    level: '级别',
+    enterpriseType: '危险源类型',
+    address: '地理位置',
+    lon: '经度',
+    lat: '纬度',
+    unitHead: '负责人',
+    telephone: '手机号',
+  };
+
+  /**
+   * 获取危险源图标
+   * @returns 图标路径
+   */
+  function getDisasterIcon(): string {
+    return dangerousSourceIcon;
+  }
+
+  return { field, getDisasterIcon };
+};

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -223,9 +223,7 @@ export const useRainDisasterChain = () => {
         name: '显示危险源',
         statusStore: statusStore.poiLayers,
         statusKey: 'showDangerSource' as const,
-        callback: (status: unknown) => {
+        callback: layerControl.clickDangerousSource,
-          console.log('显示危险源', status);
-        },
       },
       {
         name: '显示避难所',

src/hooks/useLayerControl.ts

@@ -21,5 +21,13 @@ export const useLayerControl = () => {
     useStatusStore().poiLayers.showHospital.loading = true;
   };
 
-  return { clickHiddenDangerPoint, clickHospital };
+  /**
+   * 点击显示危险源
+   */
+  const clickDangerousSource = () => {
+    // 加载状态为true
+    useStatusStore().poiLayers.showDangerSource.loading = true;
+  };
+
+  return { clickHiddenDangerPoint, clickHospital, clickDangerousSource };
 };

src/stores/useLoadingInformation.ts

@@ -52,6 +52,14 @@ export const useLoadingInformationStore = defineStore(
       id: -1,
     });
 
+    // ============================== 危险源加载状态 ================================
+    const dangerousSource = reactive({
+      /** 加载状态 */
+      loading: false,
+      /** 危险源ID */
+      id: -1,
+    });
+
     /**
      * 重置所有状态
      */
@@ -71,6 +79,10 @@ export const useLoadingInformationStore = defineStore(
       // 医院状态重置
       hospital.loading = false;
       hospital.id = -1;
+
+      // 危险源状态重置
+      dangerousSource.loading = false;
+      dangerousSource.id = -1;
     };
 
     return {
@@ -78,6 +90,7 @@ export const useLoadingInformationStore = defineStore(
       hiddenPoint,
       riskPoint,
       hospital,
+      dangerousSource,
       resetStatue,
     };
   }

src/types/base/XianDangerousSource.ts

@@ -0,0 +1,83 @@
+import type { Point } from './Point';
+
+/**
+ * 西安市危险源数据接口
+ */
+export interface XianDangerousSource extends Point {
+  /** 企业名称 */
+  name?: string;
+  /** 全国统一社会信用代码 */
+  unitCode?: string;
+  /** 详细地址 */
+  address?: string;
+  /** 是否位于化工园区 */
+  isInchemistry?: string;
+  /** 开业（成立）时间 */
+  standTime?: string;
+  /** 企业类型 */
+  enterpriseType?: string;
+  /** 等级 */
+  level?: string;
+  /** 安全生产标准化等级 */
+  safeProductLevel?: string;
+  /** 总容积 */
+  sumVolume?: string;
+  /** 储罐类型 */
+  tankType?: string;
+  /** 总容积（其他说明1） */
+  sumVolumeOther1?: string;
+  /** 总容积（其他说明3） */
+  sumVolumeOther3?: string;
+  /** 总容积（其他说明2） */
+  sumVolumeOther2?: string;
+  /** 创建时间 */
+  createTime?: string;
+  /** 填表人 */
+  fillName?: string;
+  /** 空间点坐标 */
+  position?: string;
+  /** 省 */
+  province?: string;
+  /** 市 */
+  city?: string;
+  /** 上报时间 */
+  reportTime?: string;
+  /** 联系电话 */
+  telephone?: string;
+  /** 县 */
+  county?: string;
+  /** 乡 */
+  country?: string;
+  /** 单位负责人 */
+  unitHead?: string;
+  /** 创建人名称 */
+  createName?: string;
+  /** 村 */
+  village?: string;
+  /** 行政区划代码 */
+  governmentCode?: string;
+  /** 街道 */
+  street?: string;
+  /** 统计负责人 */
+  statisticsHead?: string;
+  /** 机构编码 */
+  structionCode?: string;
+  /** 物理主键 */
+  physicalKey?: string;
+  /** 省编码 */
+  provinceCode?: string;
+  /** 市编码 */
+  cityCode?: string;
+  /** 县编码 */
+  countyCode?: string;
+  /** 更新时间 */
+  updateTime?: string;
+  /** 写入时间 */
+  writeTime?: string;
+  /** 经度 */
+  lon?: number;
+  /** 纬度 */
+  lat?: number;
+  /** 逻辑删除标识，0未删除，1已删除 */
+  isDelete?: number;
+}

src/types/common/LoadingResourceType.ts

@@ -16,4 +16,7 @@ export enum LoadingResource {
 
   /** 医院 */
   HOSPITAL = 'HOSPITAL',
+
+  /** 危险源 */
+  DANGEROUS_SOURCE = 'DANGEROUS_SOURCE',
 }