消防站

src/api/api.ts

@@ -5,12 +5,14 @@ import { getBasePoins as getRiskBasePoints, getPointDetailById as getRiskPointDe
 import { getBasePoins as getHospitalsBasePoints, getPointDetailById as getHospitalsPointDetailById} from './hospitals'
 import { getBasePoints as getDangerousSourceBasePoints, getPointDetailById as getDangerousSourcePointDetailById} from './dangerous-source'
 import { getBasePoints as getEmergencyShelterBasePoints, getPointDetailById as getEmergencyShelterPointDetailById} from './emergency-shelter'
+import { getBasePoints as getFirefighterBasePoints, getPointDetailById as getFirefighterPointDetailById} from './firefighter'
 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'
 import type { XianEmergencyShelter } from '@/types/base/XianEmergencyShelter'
+import type { XianFirefighter } from '@/types/base/XianFirefighter'
 
 /**
  * API接口统一导出对象
@@ -106,4 +108,20 @@ export const $api = {
      */
     getPointDetailById: (id: number): Promise<ApiResponse<XianEmergencyShelter>> => getEmergencyShelterPointDetailById(id),
   },
+
+  // 消防站信息
+  firefighter: {
+    /**
+     * 获取所有基础消防站
+     * @returns 消防站数据数组
+     */
+    getBasePoints: (): Promise<ApiResponse<XianFirefighter[]>> => getFirefighterBasePoints(),
+
+    /**
+     * 根据id获取消防站详情
+     * @param id - 消防站id
+     * @returns 消防站详情
+     */
+    getPointDetailById: (id: number): Promise<ApiResponse<XianFirefighter>> => getFirefighterPointDetailById(id),
+  },
 }

src/api/firefighter.ts

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

src/assets/index.ts

@@ -9,6 +9,7 @@ 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 emergencyShelterIcon } from '@/assets/images/icon/emergency-shelter.png';
+export { default as firefighterIcon } from '@/assets/images/icon/firefighter.png';
 
 // 图片
 export { default as backgroundImage } from '@/assets/images/background-image.png';

src/component/rain-earthquake/ControlShowDetailComponent.vue

@@ -22,6 +22,14 @@
       useStatusStore().poiLayers.showRefugeeShelter.loading
     "
   />
+
+  <!-- 消防站 -->
+  <FireStationComponent
+    v-if="
+      useStatusStore().appLoadingCompleted &&
+      useStatusStore().poiLayers.showFireStation.loading
+    "
+  />
 </template>
 
 <script lang="ts" setup>
@@ -29,6 +37,7 @@
   import HospitalComponent from './HospitalComponent.vue';
   import DangerousSourceComponent from './DangerousSourceComponent.vue';
   import EmergencyShelterComponent from './EmergencyShelterComponent.vue';
+  import FireStationComponent from './FireStationComponent.vue';
 </script>
 
 <style scoped lang="less"></style>

src/component/rain-earthquake/FireStationComponent.vue

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

src/config/config.json

@@ -38,6 +38,7 @@
     "riskPointId": "risk-point-",
     "hospitalPointId": "hospital-point-",
     "dangerousSourcePointId": "dangerous-source-point-",
-    "emergencyShelterPointId": "emergency-shelter-point-"
+    "emergencyShelterPointId": "emergency-shelter-point-",
+    "fireStationPointId": "fire-station-point-"
   }
 }

src/hooks/earthquake/useEarthquakeDisasterChain.ts

@@ -205,9 +205,7 @@ export const useEarthquakeDisasterChain = () => {
         name: '显示消防站',
         statusStore: statusStore.poiLayers,
         statusKey: 'showFireStation' as const,
-        callback: (status: unknown) => {
-          console.log('显示消防站', status);
-        },
+        callback: layerControl.clickFireStation,
       },
       {
         name: '显示储备点',

src/hooks/map/useMap.ts

@@ -64,6 +64,11 @@ export const useMap = () => {
           useLoadingInformationStore().emergencyShelter.id = id;
         }
 
+        // 消防站
+        else if (pickedObject.id.startsWith(config.prefix.fireStationPointId)) {
+          useLoadingInformationStore().fireStation.id = id;
+        }
+
         // 其他
         else {
           // 重置状态

src/hooks/rain-earthquake/useFireStationPoint.ts

@@ -0,0 +1,33 @@
+import { firefighterIcon } from '@/assets';
+
+/**
+ * 消防站相关钩子函数
+ * @returns
+ */
+export const useFireStationPoint = () => {
+  /**
+   * 字段映射配置
+   */
+  const field = {
+    teamName: '消防站/队名称',
+    teamType: '消防站类型',
+    address: '地理位置',
+    lon: '经度',
+    lat: '纬度',
+    teamNum: '消防队人数',
+    cars: '消防车数量',
+    devices: '消防器材数量',
+    unitHead: '负责人',
+    telephone: '手机号',
+  };
+
+  /**
+   * 获取消防站图标
+   * @returns 图标路径
+   */
+  function getDisasterIcon(): string {
+    return firefighterIcon;
+  }
+
+  return { field, getDisasterIcon };
+};

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -235,9 +235,7 @@ export const useRainDisasterChain = () => {
         name: '显示消防站',
         statusStore: statusStore.poiLayers,
         statusKey: 'showFireStation' as const,
-        callback: (status: unknown) => {
-          console.log('显示消防站', status);
-        },
+        callback: layerControl.clickFireStation,
       },
       {
         name: '显示储备点',

src/hooks/useLayerControl.ts

@@ -37,10 +37,19 @@ export const useLayerControl = () => {
     useStatusStore().poiLayers.showRefugeeShelter.loading = true;
   };
 
+  /**
+   * 点击显示消防站
+   */
+  const clickFireStation = () => {
+    // 加载状态为true
+    useStatusStore().poiLayers.showFireStation.loading = true;
+  };
+
   return {
     clickHiddenDangerPoint,
     clickHospital,
     clickDangerousSource,
     clickEmergencyShelter,
+    clickFireStation,
   };
 };

src/stores/useLoadingInformation.ts

@@ -68,6 +68,14 @@ export const useLoadingInformationStore = defineStore(
       id: -1,
     });
 
+    // ============================== 消防站状态 ================================
+    const fireStation = reactive({
+      /** 加载状态 */
+      loading: false,
+      /** 消防站ID */
+      id: -1,
+    });
+
     /**
      * 重置所有状态
      */
@@ -95,6 +103,10 @@ export const useLoadingInformationStore = defineStore(
       // 避难所状态重置
       emergencyShelter.loading = false;
       emergencyShelter.id = -1;
+
+      // 消防站状态重置
+      fireStation.loading = false;
+      fireStation.id = -1;
     };
 
     return {
@@ -104,6 +116,7 @@ export const useLoadingInformationStore = defineStore(
       hospital,
       dangerousSource,
       emergencyShelter,
+      fireStation,
       resetStatue,
     };
   }

src/types/base/XianFirefighter.ts

@@ -0,0 +1,115 @@
+import type { Point } from './Point';
+
+/**
+ * 西安市政府消防队伍数据接口
+ */
+export interface XianFirefighter extends Point {
+  /** 队伍名称 */
+  teamName?: string;
+  /** 队伍编号 */
+  teamId?: string;
+  /** 队伍类型 */
+  teamType?: string;
+  /** 消防站类型 */
+  fireType?: string;
+  /** 详细地址 */
+  address?: string;
+  /** 建立时间 */
+  standTime?: string;
+  /** 总面积 */
+  area?: number;
+  /** 建筑面积 */
+  structionArea?: number;
+  /** 总人数 */
+  teamNum?: number;
+  /** 指挥人数 */
+  leaderNum?: number;
+  /** 技术人数 */
+  techNum?: number;
+  /** 消防员人数 */
+  firerNum?: number;
+  /** 消防员平均年龄 */
+  averageAge?: number;
+  /** 消防车总数 */
+  cars?: number;
+  /** 水罐消防车数 */
+  waterCars?: number;
+  /** 泡沫消防车数 */
+  foamCars?: number;
+  /** 举高消防车数 */
+  highCars?: number;
+  /** 专勤消防车数 */
+  dedicateCars?: number;
+  /** 器材总数 */
+  devices?: number;
+  /** 侦检器材数 */
+  detectionDevice?: number;
+  /** 救援器材数 */
+  saveDevice?: number;
+  /** 破拆器材数 */
+  destructionDevice?: number;
+  /** 堵漏器材数 */
+  fillDevice?: number;
+  /** 转移器材数 */
+  transferDevice?: number;
+  /** 洗消器材数 */
+  washDevice?: number;
+  /** 照明器材数 */
+  lightDevice?: number;
+  /** 灭火器材数 */
+  fireDevice?: number;
+  /** 上一年出警次数 */
+  goOut?: number;
+  /** 上一年出警人次 */
+  outPeople?: number;
+  /** 上一年出警车次 */
+  outCar?: number;
+  /** 上报时间 */
+  reportTime?: string;
+  /** 单位负责人 */
+  unitHead?: string;
+  /** 行政区划代码 */
+  governmentCode?: string;
+  /** 创建时间 */
+  createTime?: string;
+  /** 县 */
+  county?: string;
+  /** 乡 */
+  country?: string;
+  /** 村 */
+  village?: string;
+  /** 空间点坐标 */
+  position?: string;
+  /** 联系电话 */
+  telephone?: string;
+  /** 创建人名称 */
+  createName?: string;
+  /** 市 */
+  city?: string;
+  /** 统计负责人 */
+  statisticHead?: string;
+  /** 街道 */
+  street?: string;
+  /** 填表人 */
+  fillName?: string;
+  /** 省 */
+  province?: string;
+  /** 物理主键 */
+  fxpcDataidSjgl?: string;
+  /** 省编码 */
+  provinceCode?: number;
+  /** 市编码 */
+  cityCode?: number;
+  /** 县编码 */
+  countyCode?: number;
+  /** 更新时间 */
+  updateTime?: string;
+  /** 写入时间 */
+  writeTime?: string;
+  /** 经度 */
+  lon?: number;
+  /** 纬度 */
+  lat?: number;
+  /** 逻辑删除标识，0未删除，1已删除 */
+  isDelete?: number;
+}

src/types/common/LoadingResourceType.ts

@@ -22,4 +22,7 @@ export enum LoadingResource {
 
   /** 避难所 */
   EMERGENCY_SHELTER = 'EMERGENCY_SHELTER',
+
+  /** 消防站 */
+  FIRE_STATION = 'FIRE_STATION',
 }