图标组件以及整理代码结构

components.d.ts

@@ -12,11 +12,13 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']

src/assets/index.ts

@@ -0,0 +1,29 @@
+// 统一导出所有静态资源
+
+// 图标
+export { default as landslideIcon } from '@/assets/images/icon/landslide.png';
+export { default as waterLoggingIcon } from '@/assets/images/icon/waterlogging.png';
+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 backgroundImage } from '@/assets/images/background-image.png';
+export { default as logoImage } from '@/assets/images/logo.png';
+export { default as mainLogoImage } from '@/assets/images/main-logo.png';
+
+// json
+export { default as baQiao } from '@/assets/json/BaQiao.json';
+export { default as beiLin } from '@/assets/json/BeiLin.json';
+export { default as changAn } from '@/assets/json/ChangAn.json';
+export { default as gaoLing } from '@/assets/json/GaoLing.json';
+export { default as huYi } from '@/assets/json/HuYi.json';
+export { default as lanTian } from '@/assets/json/LanTian.json';
+export { default as lianHu } from '@/assets/json/LianHu.json';
+export { default as linTong } from '@/assets/json/LinTong.json';
+export { default as weiYang } from '@/assets/json/WeiYang.json';
+export { default as xinCheng } from '@/assets/json/XinCheng.json';
+export { default as yanLiang } from '@/assets/json/YanLiang.json';
+export { default as yanTa } from '@/assets/json/YanTa.json';
+export { default as zhouZhi } from '@/assets/json/ZhouZhi.json';
+export { default as xiAn } from '@/assets/json/XiAn.json';

src/component/map/AdministrativeDivision.vue

@@ -4,37 +4,39 @@
 </template>
 
 <script lang="ts" setup>
-  import BaQiiao from '@/assets/json/BaQiao.json';
+  import {
-  import BeiLin from '@/assets/json/BeiLin.json';
+    baQiao,
-  import ChangAn from '@/assets/json/ChangAn.json';
+    beiLin,
-  import GaoLing from '@/assets/json/GaoLing.json';
+    changAn,
-  import HuYi from '@/assets/json/HuYi.json';
+    gaoLing,
-  import LanTian from '@/assets/json/LanTian.json';
+    huYi,
-  import LianHu from '@/assets/json/LianHu.json';
+    lanTian,
-  import LinTong from '@/assets/json/LinTong.json';
+    lianHu,
-  import WeiYang from '@/assets/json/WeiYang.json';
+    linTong,
-  import XinCheng from '@/assets/json/XinCheng.json';
+    weiYang,
-  import YanLiang from '@/assets/json/YanLiang.json';
+    xinCheng,
-  import YanTa from '@/assets/json/YanTa.json';
+    yanLiang,
-  import ZhouZhi from '@/assets/json/ZhouZhi.json';
+    yanTa,
+    zhouZhi,
+  } from '@/assets';
   import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
   import { Color } from 'cesium';
   import { onMounted } from 'vue';
 
   const areas = [
-    BaQiiao,
+    baQiao,
-    BeiLin,
+    beiLin,
-    ChangAn,
+    changAn,
-    GaoLing,
+    gaoLing,
-    HuYi,
+    huYi,
-    LanTian,
+    lanTian,
-    LianHu,
+    lianHu,
-    LinTong,
+    linTong,
-    WeiYang,
+    weiYang,
-    XinCheng,
+    xinCheng,
-    YanLiang,
+    yanLiang,
-    YanTa,
+    yanTa,
-    ZhouZhi,
+    zhouZhi,
   ];
   const areasId = [
     'baqiao',

src/component/map/MapComponent.vue

@@ -12,10 +12,10 @@
   import AdministrativeDivision from './AdministrativeDivision.vue';
   import { useViewerStore } from '@/stores/useViewerStore';
   import { useLoadingInformationStore } from '@/stores/useLoadingInformation';
-  import xiAnGeoJSON from '@/assets/json/XiAn.json';
   import type { GeoJsonFileType } from '@/types/cesium/GeoJsonFileType';
   import { Color, ScreenSpaceEventType } from 'cesium';
   import type { ClickObject } from '@/types/cesium/ClickObject';
+  import { xiAn } from '@/assets';
 
   onBeforeMount(() => {
     // 初始化为false
@@ -30,7 +30,7 @@
       containerId: 'map-container',
       mark: {
         include: true,
-        geoJson: xiAnGeoJSON as GeoJsonFileType,
+        geoJson: xiAn as GeoJsonFileType,
         color: Color.BLACK.withAlpha(0.8),
         border: {
           width: 3,

src/component/rain-earthquake/HiddenPointComponent.vue

@@ -33,15 +33,17 @@
   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';
+  import {
+    debrisFlowIcon,
+    flashFloodIcon,
+    landslideIcon,
+    waterLoggingIcon,
+  } from '@/assets';
 
   const props = defineProps<{
     disasterType: DisasterType;
@@ -114,13 +116,13 @@
   function getDisasterIcon(disasterType?: string): string {
     switch (disasterType) {
       case '滑坡':
-        return landslide;
+        return landslideIcon;
       case '泥石流':
-        return debrisFlow;
+        return debrisFlowIcon;
       case '内涝':
-        return waterlogging;
+        return waterLoggingIcon;
       case '山洪':
-        return flashFlood;
+        return flashFloodIcon;
       default:
         throw new Error(`未知的灾害类型: ${disasterType}`);
     }

src/component/rain-earthquake/LegendComponent.vue

@@ -0,0 +1,113 @@
+<!-- 图例组件 -->
+<template>
+  <div class="legend-box">
+    <div class="title-box">
+      <header>图例</header>
+    </div>
+    <div class="legend-list-box">
+      <el-row
+        v-for="(list, index1) in finalLegendList"
+        :key="index1"
+        class="legend-row"
+      >
+        <el-col
+          :span="24 / colsNum"
+          v-for="(item, index2) in list"
+          :key="`${index1}_${index2}`"
+        >
+          <div class="legend-item">
+            <img :src="item.link" :alt="item.name" class="legend-item-img" />
+            <span class="legend-item-text">{{ item.name }}</span>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Utils } from '@/utils/utils';
+  import { onMounted, ref, type Ref } from 'vue';
+
+  // 接收父组件传递的属性
+  const props = defineProps<{
+    legendList: { name: string; link: string }[];
+    colsNum: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24;
+  }>();
+
+  // 处理后图例列表
+  const finalLegendList: Ref<{ name: string; link: string }[][]> = ref([]);
+
+  onMounted(() => {
+    finalLegendList.value = Utils.chunkArray(props.legendList, props.colsNum);
+  });
+</script>
+
+<style scoped>
+  .legend-box {
+    position: absolute;
+    bottom: 20px;
+    right: 15px;
+    z-index: 1000;
+    width: 310px;
+    height: 265px;
+    overflow-y: auto;
+    box-shadow: inset 0px 0px 9px rgba(62, 136, 210, 1);
+    color: white;
+    font-family: Arial, sans-serif;
+    border: 1px solid rgba(0, 225, 255, 1);
+  }
+
+  .title-box {
+    background: linear-gradient(
+      180deg,
+      rgba(86, 204, 242, 1) 0%,
+      rgba(47, 128, 237, 1) 100%
+    );
+    height: 25px;
+    padding: 10px;
+    text-align: center;
+    font-weight: bold;
+    flex-shrink: 0;
+  }
+
+  .legend-list-box {
+    background: rgba(14, 52, 98, 0.8);
+    padding: 10px;
+    height: calc(100% - 45px);
+    box-sizing: border-box;
+  }
+
+  .legend-row {
+    margin-bottom: 2px;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 8px;
+    margin: 0;
+    min-height: 20px;
+    border-radius: 3px;
+    transition: background-color 0.2s ease;
+  }
+
+  .legend-item-img {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    object-fit: contain;
+    margin-right: 8px;
+  }
+
+  .legend-item-text {
+    flex: 1;
+    text-align: justify;
+    text-justify: inter-ideograph;
+    font-size: 14px;
+    line-height: 1.5;
+    letter-spacing: 0.5px;
+    word-break: break-all;
+  }
+</style>

src/component/rain-earthquake/RiskPointComponent.vue

@@ -29,12 +29,12 @@
   import { $api } from '@/api/api.ts';
   import type { Point } from '@/types/base/Point';
   import LoadingPoints from '@/component/rain-earthquake/LoadingPoints.vue';
-  import riskArea from '@/assets/images/icon/risk-area.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';
+  import { riskAreaIcon } from '@/assets';
 
   const riskPoints = ref<Point[]>([]);
 
@@ -102,7 +102,7 @@
 
 <script lang="ts">
   function getDisasterIcon(): string {
-    return riskArea;
+    return riskAreaIcon;
   }
 </script>
 

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -0,0 +1,73 @@
+import { ref, watch } from 'vue';
+import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
+import { HiddenPointType } from '@/types/common/DisasterType';
+import type { PaginationType } from '@/types/common/PaginationType';
+
+// 灾害链影响点列表钩子函数
+export function useRainDisasterChain() {
+  // 搜索条件
+  const conditions = ref({
+    tableData: '',
+    hiddenPoint: HiddenPointType.LANDSLIDE,
+  });
+
+  // 下拉选项
+  const selectOptions = [
+    { value: HiddenPointType.LANDSLIDE, label: '滑坡' },
+    { value: HiddenPointType.DEBRIS_FLOW, label: '泥石流' },
+    { value: HiddenPointType.FLASH_FLOOD, label: '山洪' },
+    { value: HiddenPointType.WATERLOGGING, label: '内涝' },
+  ];
+
+  // 表格数据
+  const tableDatas = ref<XianHiddenDangerSpots[]>([]);
+
+  // 表头
+  const tableColumns = [
+    { title: '名称', key: 'disasterName' },
+    { title: '位置', key: 'position' },
+    { title: '规模等级', key: 'scaleGrade' },
+    { title: '险情等级', key: 'riskGrade' },
+  ];
+
+  // 分页配置
+  const paginationConfig = ref<PaginationType>({
+    currentPage: 1,
+    pageSize: 10,
+    total: 10,
+    totalPage: 1,
+  });
+
+  // 修改条件
+  function changeConditions(value: {
+    tableData: string;
+    hiddenPoint: HiddenPointType;
+  }): void {
+    conditions.value = value;
+  }
+
+  // 修改页码
+  function changeCurrentPage(value: number) {
+    paginationConfig.value.currentPage = value;
+  }
+
+  // 监听条件变化
+  watch(
+    conditions,
+    () => {
+      console.log('条件改变');
+    },
+    { deep: true }
+  );
+
+  // 把所有需要用到的数据/方法 return 出去
+  return {
+    conditions,
+    selectOptions,
+    tableDatas,
+    tableColumns,
+    paginationConfig,
+    changeConditions,
+    changeCurrentPage,
+  };
+}

src/hooks/rainstorm/useRainLegend.ts

@@ -0,0 +1,21 @@
+import {
+  debrisFlowIcon,
+  flashFloodIcon,
+  landslideIcon,
+  riskAreaIcon,
+  waterLoggingIcon,
+} from '@/assets';
+
+// 引入图例钩子函数
+export function useRainLegend() {
+  // 图例数据
+  const legendList = [
+    { name: '滑坡隐患点', link: landslideIcon },
+    { name: '泥石流隐患点', link: debrisFlowIcon },
+    { name: '山洪隐患点', link: flashFloodIcon },
+    { name: '内涝隐患点', link: waterLoggingIcon },
+    { name: '风险区域', link: riskAreaIcon },
+  ];
+
+  return { legendList };
+}

src/utils/utils.ts

@@ -238,4 +238,18 @@ export const Utils = {
 
     return [newX, newY];
   },
+
+  /**
+   * 将数组拆分为指定大小的子数组
+   * @param {T[]} arr - 要拆分的数组
+   * @param {number} [size=2] - 子数组的大小
+   * @returns {T[][]} 拆分后的子数组
+   */
+  chunkArray: <T>(arr: T[], size: number = 2): T[][] => {
+    const result = [];
+    for (let i = 0; i < arr.length; i += size) {
+      result.push(arr.slice(i, i + size));
+    }
+    return result;
+  },
 };

src/views/IndexView.vue

@@ -6,7 +6,7 @@
       :style="{ 'background-image': `url(${backgroundImage})` }"
     >
       <div class="logo-img">
-        <img :src="mainLogo" alt="西安应急智慧logo" id="main_logo" />
+        <img :src="mainLogoImage" alt="西安应急智慧logo" id="main_logo" />
       </div>
       <div class="nav-list">
         <router-link
@@ -30,8 +30,7 @@
 <script setup lang="ts">
   import { useViewerStore } from '@/stores/useViewerStore';
   import { RouterView, useRoute } from 'vue-router';
-  import mainLogo from '@/assets/images/main-logo.png';
+  import { backgroundImage, mainLogoImage } from '@/assets';
-  import backgroundImage from '@/assets/images/background-image.png';
 
   useViewerStore().setViewerLoadingCompleted(true);
 

src/views/home/rainstorm/RainstormView.vue

@@ -1,12 +1,11 @@
 <template>
   <div>
-    <!-- 基本组件 -->
     <BasicComponent
       :disaster-type="DisasterType.RAINSTORM"
       :key="route.fullPath"
     />
 
-    <!-- 灾害链影像点列表 -->
+    <!-- 直接使用钩子返回的数据 -->
     <DisasterChainPointComponent
       :select-options="selectOptions"
       :table-data-list="tableDatas"
@@ -15,99 +14,36 @@
       @change-conditions="changeConditions"
       @change-current-page="changeCurrentPage"
     />
+
+    <LegendComponent :legend-list="legendList" :cols-num="2" />
   </div>
 </template>
 
 <script setup lang="ts">
+  // 1. 只导入子组件
   import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
   import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.vue';
-  import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
+  import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue';
-  import { DisasterType, HiddenPointType } from '@/types/common/DisasterType';
+  import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
-  import type { PaginationType } from '@/types/common/PaginationType';
+  import { useRainLegend } from '@/hooks/rainstorm/useRainLegend';
-  import { ref, watch, type Ref } from 'vue';
+
+  // 2. 只导入核心类型/枚举
+  import { DisasterType } from '@/types/common/DisasterType';
   import { useRoute } from 'vue-router';
 
   const route = useRoute();
-</script>
 
-<script lang="ts">
+  // 4. 执行钩子，拿到所有需要的数据
-  // 灾害链影像点列表数据
+  const {
-  // 搜索条件
+    selectOptions,
-  const conditions: Ref<{ tableData: string; hiddenPoint: HiddenPointType }> =
+    tableDatas,
-    ref({ tableData: '', hiddenPoint: HiddenPointType.LANDSLIDE });
+    tableColumns,
+    paginationConfig,
+    changeConditions,
+    changeCurrentPage,
+  } = useRainDisasterChain();
 
-  // 下拉列表
+  const { legendList } = useRainLegend();
-  const selectOptions = [
-    {
-      value: HiddenPointType.LANDSLIDE,
-      label: '滑坡',
-    },
-    {
-      value: HiddenPointType.DEBRIS_FLOW,
-      label: '泥石流',
-    },
-    {
-      value: HiddenPointType.FLASH_FLOOD,
-      label: '山洪',
-    },
-    {
-      value: HiddenPointType.WATERLOGGING,
-      label: '内涝',
-    },
-  ];
-
-  // 表格数据
-  const tableDatas: Ref<XianHiddenDangerSpots[]> = ref([]);
-
-  // 表头标签
-  const tableColumns = [
-    {
-      title: `名称`,
-      key: 'disasterName',
-    },
-    {
-      title: '位置',
-      key: 'position',
-    },
-    {
-      title: '规模等级',
-      key: 'scaleGrade',
-    },
-    {
-      title: '险情等级',
-      key: 'riskGrade',
-    },
-  ];
-
-  // 分页配置
-  const paginationConfig: Ref<PaginationType> = ref({
-    currentPage: 1,
-    pageSize: 10,
-    total: 10,
-    totalPage: 1,
-  });
-
-  // 修改条件
-  function changeConditions(value: {
-    tableData: string;
-    hiddenPoint: HiddenPointType;
-  }) {
-    conditions.value = value;
-  }
-
-  // 修改当前页码
-  function changeCurrentPage(value: number) {
-    paginationConfig.value.currentPage = value;
-  }
-
-  // 条件改变时候触发
-  watch(
-    () => conditions,
-    () => {
-      console.log('条件改变');
-    },
-    { deep: true }
-  );
 </script>
 
 <style scoped></style>