From 4d2d8787b10880c5a16ef8f05ff60a9b2d7be975 Mon Sep 17 00:00:00 2001 From: wzy-warehouse <18135009705@163.com> Date: Mon, 13 Apr 2026 20:55:32 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E6=A0=87=E7=BB=84=E4=BB=B6=E4=BB=A5?= =?UTF-8?q?=E5=8F=8A=E6=95=B4=E7=90=86=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 2 + src/assets/index.ts | 29 +++++ src/component/map/AdministrativeDivision.vue | 54 +++++---- src/component/map/MapComponent.vue | 4 +- .../rain-earthquake/HiddenPointComponent.vue | 18 +-- .../rain-earthquake/LegendComponent.vue | 113 ++++++++++++++++++ .../rain-earthquake/RiskPointComponent.vue | 4 +- src/hooks/rainstorm/useRainDisasterChain.ts | 73 +++++++++++ src/hooks/rainstorm/useRainLegend.ts | 21 ++++ src/utils/utils.ts | 14 +++ src/views/IndexView.vue | 5 +- src/views/home/rainstorm/RainstormView.vue | 104 ++++------------ 12 files changed, 316 insertions(+), 125 deletions(-) create mode 100644 src/assets/index.ts create mode 100644 src/component/rain-earthquake/LegendComponent.vue create mode 100644 src/hooks/rainstorm/useRainDisasterChain.ts create mode 100644 src/hooks/rainstorm/useRainLegend.ts diff --git a/components.d.ts b/components.d.ts index 5eddf62..48d4602 100644 --- a/components.d.ts +++ b/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'] diff --git a/src/assets/index.ts b/src/assets/index.ts new file mode 100644 index 0000000..205c83c --- /dev/null +++ b/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'; diff --git a/src/component/map/AdministrativeDivision.vue b/src/component/map/AdministrativeDivision.vue index 4a25aef..1fcf732 100644 --- a/src/component/map/AdministrativeDivision.vue +++ b/src/component/map/AdministrativeDivision.vue @@ -4,37 +4,39 @@ + + diff --git a/src/component/rain-earthquake/RiskPointComponent.vue b/src/component/rain-earthquake/RiskPointComponent.vue index 5617e6b..7f12ac9 100644 --- a/src/component/rain-earthquake/RiskPointComponent.vue +++ b/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([]); @@ -102,7 +102,7 @@ diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts new file mode 100644 index 0000000..b03ae4b --- /dev/null +++ b/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([]); + + // 表头 + const tableColumns = [ + { title: '名称', key: 'disasterName' }, + { title: '位置', key: 'position' }, + { title: '规模等级', key: 'scaleGrade' }, + { title: '险情等级', key: 'riskGrade' }, + ]; + + // 分页配置 + const paginationConfig = ref({ + 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, + }; +} diff --git a/src/hooks/rainstorm/useRainLegend.ts b/src/hooks/rainstorm/useRainLegend.ts new file mode 100644 index 0000000..3013e74 --- /dev/null +++ b/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 }; +} diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 88af070..0ac07a8 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -238,4 +238,18 @@ export const Utils = { return [newX, newY]; }, + + /** + * 将数组拆分为指定大小的子数组 + * @param {T[]} arr - 要拆分的数组 + * @param {number} [size=2] - 子数组的大小 + * @returns {T[][]} 拆分后的子数组 + */ + chunkArray: (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; + }, }; diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue index 44933a0..fa139ef 100644 --- a/src/views/IndexView.vue +++ b/src/views/IndexView.vue @@ -6,7 +6,7 @@ :style="{ 'background-image': `url(${backgroundImage})` }" >
- +
import { useViewerStore } from '@/stores/useViewerStore'; import { RouterView, useRoute } from 'vue-router'; - import mainLogo from '@/assets/images/main-logo.png'; - import backgroundImage from '@/assets/images/background-image.png'; + import { backgroundImage, mainLogoImage } from '@/assets'; useViewerStore().setViewerLoadingCompleted(true); diff --git a/src/views/home/rainstorm/RainstormView.vue b/src/views/home/rainstorm/RainstormView.vue index c814727..cc3bea7 100644 --- a/src/views/home/rainstorm/RainstormView.vue +++ b/src/views/home/rainstorm/RainstormView.vue @@ -1,12 +1,11 @@ -