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-05-06 17:44:30 +08:00
parent 7e7605ee97
commit c347bbea8b
6 changed files with 193 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/rain-earthquake/LeftLegendComponent.vue
+75
View File
@@ -0,0 +1,75 @@
<!-- 左侧图例组件 -->
<template>
<div
class="legend-container"
v-show="useStatusStore().uiComponents.leftLegend.show"
>
<div class="legend-title">
{{ useLeftLegendStore().legendListInfo.title }}
</div>
<div
class="legend-item"
v-for="(item, index) in useLeftLegendStore().legendListInfo.list"
:key="index"
>
<div
class="legend-color"
:style="{ 'background-color': `${item.color}` }"
></div>
<div class="legend-text">
<span class="legend-text-title">{{ item.label }}</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { useLeftLegendStore } from '@/stores/useLeftLegendStore';
import { useStatusStore } from '@/stores/useStatusStore';
</script>
<style scoped>
.legend-container {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 1000;
padding: 6px;
position: absolute;
bottom: 10px;
left: 15px;
border-radius: 2px;
z-index: 1000;
display: flex;
flex-direction: column;
width: 240px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
color: white;
font-family: Arial, sans-serif;
background: rgba(14, 52, 98, 0.8);
border: 1px solid rgb(0, 225, 255);
}
.legend-title {
font-weight: bold;
font-size: 16px;
text-align: center;
}
.legend-item {
display: flex;
align-items: center;
margin: 3px 0;
font-size: 12px;
width: 100%;
color: white;
}
.legend-color {
width: 16px;
height: 16px;
margin-right: 6px;
border-radius: 2px;
}
</style>
src/hooks/rain-earthquake/useLayerControl.ts
+46
View File
@@ -1,3 +1,4 @@
import { useLeftLegendStore } from '@/stores/useLeftLegendStore';
import { useStatusStore } from '@/stores/useStatusStore.ts';
/**
@@ -58,6 +59,51 @@ export const useLayerControl = () => {
const clickPopulationGrid = () => {
// 加载状态为true
useStatusStore().poiLayers.showPopulationGrid.loading = true;
if (useStatusStore().poiLayers.showPopulationGrid.show) {
// 显示图例
useStatusStore().uiComponents.leftLegend.loading = true;
useStatusStore().uiComponents.leftLegend.show = true;
useLeftLegendStore().legendListInfo.title = '人口密度图例';
useLeftLegendStore().legendListInfo.list = [
{
label: 'Min-0 < 100',
color: '#b1fe02',
},
{
label: '100 ≤ X < 500',
color: '#6bf700',
},
{
label: '500 ≤ X < 1000',
color: '#fcf600',
},
{
label: '1000 ≤ X < 2000',
color: '#fecb02',
},
{
label: '2000 ≤ X < 4000',
color: '#fc9e00',
},
{
label: '4000 ≤ X < 8000',
color: '#fe7004',
},
{
label: '8000 ≤ X < 10000',
color: '#fb3f02',
},
{
label: '10000 ≤ X < Max',
color: '#ff0000',
},
];
} else {
// 隐藏图例
useStatusStore().uiComponents.leftLegend.show = false;
}
};
/**
src/hooks/rain-earthquake/useRightHandle.ts
+39
View File
@@ -2,6 +2,7 @@ import { useStatusStore } from '@/stores/useStatusStore.ts';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils.ts';
import config from '@/config/config.json';
import { useButtonSelectedIdStore } from '@/stores/useButtonSelectedIdStore';
import { useLeftLegendStore } from '@/stores/useLeftLegendStore';
export const useRightHandle = () => {
/**
@@ -13,9 +14,47 @@ export const useRightHandle = () => {
// 开启暴雨模拟：显示降雨栅格图层
useStatusStore().weatherLayers.showRainfallGrid.loading = true;
useStatusStore().weatherLayers.showRainfallGrid.show = true;
// 显示图例
useStatusStore().uiComponents.leftLegend.loading = true;
useStatusStore().uiComponents.leftLegend.show = true;
useLeftLegendStore().legendListInfo.title = '降雨量图例';
useLeftLegendStore().legendListInfo.list = [
{
label: '无雨/微雨; <0.1mm/12h',
color: 'rgba(200,200,200,0)',
},
{
label: '小雨；<5mm/12h',
color: 'rgba(0,0,255,0.4)',
},
{
label: '中雨； <15mm/12h',
color: 'rgba(0,255,255,0.5)',
},
{
label: '大雨； <30mm/12h',
color: 'rgba(0,255,0,0.6)',
},
{
label: '暴雨； <70mm/12h',
color: 'rgba(255,255,0,0.7)',
},
{
label: '大暴雨； <140mm/12h',
color: 'rgba(255,165,0,0.8)',
},
{
label: '特大暴雨； >140mm/12h',
color: 'rgba(255,0,0,0.9)',
},
];
} else {
// 关闭暴雨模拟：隐藏降雨栅格图层
useStatusStore().weatherLayers.showRainfallGrid.show = false;
// 隐藏图例
useStatusStore().uiComponents.leftLegend.show = false;
}
};
src/stores/useLeftLegendStore.ts
+16
View File
@@ -0,0 +1,16 @@
import { defineStore } from 'pinia';
import { ref, type Ref } from 'vue';
/**
* 左侧图例信息
*/
export const useLeftLegendStore = defineStore('leftLegend', () => {
const legendListInfo: Ref<{
title: string;
list: { label: string; color: string }[];
}> = ref({
title: '',
list: [],
});
return { legendListInfo };
});
src/stores/useStatusStore.ts
+8
View File
@@ -28,6 +28,10 @@ export const useStatusStore = defineStore('status', () => {
show: true,
loading: true,
},
leftLegend: {
show: false,
loading: false,
},
rightButton: {
show: true,
loading: true,
@@ -210,6 +214,10 @@ export const useStatusStore = defineStore('status', () => {
show: true,
loading: true,
};
uiComponents.leftLegend = {
show: false,
loading: false,
};
uiComponents.rightButton = {
show: true,
loading: true,
src/views/home/rainstorm/RainstormView.vue
+9
View File
@@ -29,6 +29,14 @@
:button-list="leftButtonInfo"
/>
<!-- 左侧图例组件 -->
<LeftLegendComponent
v-if="
useStatusStore().appLoadingCompleted &&
useStatusStore().uiComponents.leftLegend.loading
"
/>
<!-- 右侧按钮组件 -->
<RightButtonComponent
v-if="
@@ -56,6 +64,7 @@
import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.vue';
import FunctionComponent from '@/component/rain-earthquake/FunctionComponent.vue';
import LeftButtonComponent from '@/component/rain-earthquake/LeftButtonComponent.vue';
import LeftLegendComponent from '@/component/rain-earthquake/LeftLegendComponent.vue';
import RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue';
import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
import { useStatusStore } from '@/stores/useStatusStore';