gis/xian_vue_new
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wzy-warehouse
2026-04-13 20:55:32 +08:00
parent 15b0d2e994
commit 4d2d8787b1
12 changed files with 316 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components.d.ts
Vendored
+2
View File
@@ -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
+29
View File
@@ -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
+28 -26
View File
@@ -4,37 +4,39 @@
</template>
<script lang="ts" setup>
import BaQiiao from '@/assets/json/BaQiao.json';
import BeiLin from '@/assets/json/BeiLin.json';
import ChangAn from '@/assets/json/ChangAn.json';
import GaoLing from '@/assets/json/GaoLing.json';
import HuYi from '@/assets/json/HuYi.json';
import LanTian from '@/assets/json/LanTian.json';
import LianHu from '@/assets/json/LianHu.json';
import LinTong from '@/assets/json/LinTong.json';
import WeiYang from '@/assets/json/WeiYang.json';
import XinCheng from '@/assets/json/XinCheng.json';
import YanLiang from '@/assets/json/YanLiang.json';
import YanTa from '@/assets/json/YanTa.json';
import ZhouZhi from '@/assets/json/ZhouZhi.json';
import {
baQiao,
beiLin,
changAn,
gaoLing,
huYi,
lanTian,
lianHu,
linTong,
weiYang,
xinCheng,
yanLiang,
yanTa,
zhouZhi,
} from '@/assets';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
import { Color } from 'cesium';
import { onMounted } from 'vue';
const areas = [
BaQiiao,
BeiLin,
ChangAn,
GaoLing,
HuYi,
LanTian,
LianHu,
LinTong,
WeiYang,
XinCheng,
YanLiang,
YanTa,
ZhouZhi,
baQiao,
beiLin,
changAn,
gaoLing,
huYi,
lanTian,
lianHu,
linTong,
weiYang,
xinCheng,
yanLiang,
yanTa,
zhouZhi,
];
const areasId = [
'baqiao',
src/component/map/MapComponent.vue
+2 -2
View File
@@ -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
+10 -8
View File
@@ -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
+113
View File
@@ -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
+2 -2
View File
@@ -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
+73
View File
@@ -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
+21
View File
@@ -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
+14
View File
@@ -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
+2 -3
View File
@@ -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 from '@/assets/images/background-image.png';
import { backgroundImage, mainLogoImage } from '@/assets';
useViewerStore().setViewerLoadingCompleted(true);
src/views/home/rainstorm/RainstormView.vue
+20 -84
View File
@@ -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 { DisasterType, HiddenPointType } from '@/types/common/DisasterType';
import type { PaginationType } from '@/types/common/PaginationType';
import { ref, watch, type Ref } from 'vue';
import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue';
import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
import { useRainLegend } from '@/hooks/rainstorm/useRainLegend';
// 2. 只导入核心类型/枚举
import { DisasterType } from '@/types/common/DisasterType';
import { useRoute } from 'vue-router';
const route = useRoute();
</script>
<script lang="ts">
// 灾害链影像点列表数据
// 搜索条件
const conditions: Ref<{ tableData: string; hiddenPoint: HiddenPointType }> =
ref({ tableData: '', hiddenPoint: HiddenPointType.LANDSLIDE });
// 4. 执行钩子，拿到所有需要的数据
const {
selectOptions,
tableDatas,
tableColumns,
paginationConfig,
changeConditions,
changeCurrentPage,
} = useRainDisasterChain();
// 下拉列表
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 }
);
const { legendList } = useRainLegend();
</script>
<style scoped></style>