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-14 16:00:39 +08:00
parent 2a3256fa17
commit c3f2cc0b3d
11 changed files with 250 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/left-blue-button.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

src/assets/images/left-orange-button.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

src/assets/images/right-blue-button.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

src/assets/images/right-orange-button.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

src/assets/index.ts
+4
View File
@@ -11,6 +11,10 @@ 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';
export { default as leftBlueButton } from '@/assets/images/left-blue-button.png';
export { default as leftOrangeButton } from '@/assets/images/left-orange-button.png';
export { default as rightBlueButton } from '@/assets/images/right-blue-button.png';
export { default as rightOrangeButton } from '@/assets/images/right-orange-button.png';
// json
export { default as baQiao } from '@/assets/json/BaQiao.json';
src/component/rain-earthquake/DisasterChainPointComponent.vue
+1 -1
View File
@@ -169,7 +169,7 @@
padding: 15px;
border-radius: 2px;
z-index: 1000;
width: 550px;
width: 500px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
font-size: 14px;
border: 1px solid rgba(0, 225, 255, 0.5);
src/component/rain-earthquake/LeftButtonComponent.vue
+97
View File
@@ -0,0 +1,97 @@
<template>
<div
class="left-button-box"
:style="{
left: `${useStatusStore().getDisasterChainPointShow() ? 575 : 100}px`,
}"
>
<ul class="left-button-ul">
<li v-for="(buttonItem, index) in buttonList" :key="index">
<button
@click="handelButton(index, buttonItem.callback)"
:style="{
'background-image': `url(${selectedButtonId == index ? leftOrangeButton : leftBlueButton})`,
}"
>
{{ buttonItem.name }}
</button>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { leftBlueButton, leftOrangeButton } from '@/assets';
import { useStatusStore } from '@/stores/useStatusStore';
import { ref, type Ref } from 'vue';
// 记录选中按钮id
const selectedButtonId: Ref<number> = ref(-1);
// 接收父组件传递的参数
defineProps<{
buttonList: { name: string; callback: (...args: unknown[]) => unknown }[];
}>();
// 点击按钮触发
const handelButton = (
index: number,
callback: (...args: unknown[]) => unknown
) => {
if (index == selectedButtonId.value) {
selectedButtonId.value = -1;
return;
} else if (
selectedButtonId.value != -1 &&
selectedButtonId.value != index
) {
return;
}
selectedButtonId.value = index;
callback();
};
</script>
<style scoped>
.left-button-box {
width: 180px;
position: absolute;
top: 45px;
z-index: 1000;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0);
padding: 15px 0;
}
.left-button-ul {
list-style: none;
padding: 0;
margin: 0;
}
.left-button-ul li {
margin: 15px 0 0 0;
padding: 0;
text-align: center;
}
.left-button-ul li button {
width: 250px;
height: 30px;
padding: 5px;
color: white;
cursor: pointer;
font-size: 16px;
white-space: nowrap;
min-width: 100px;
display: flex;
align-items: center;
opacity: 1;
background-color: transparent;
background-size: 100%;
background-repeat: no-repeat;
background-position: -30px center;
border: none;
box-shadow: none;
border-radius: 0;
}
</style>
src/hooks/earthquake/useEarthquakeDisasterChain.ts
+60 -5
View File
@@ -54,20 +54,74 @@ export const useEarthquakeDisasterChain = () => {
* 修改搜索条件
* @param value - 新的搜索条件
*/
function changeConditions(value: {
const changeConditions = (value: {
tableData: string;
hiddenPoint: PointType;
}): void {
}): void => {
conditions.value = value;
}
};
/**
* 修改页码
* @param value - 新的页码
*/
function changeCurrentPage(value: number) {
const changeCurrentPage = (value: number) => {
paginationConfig.value.currentPage = value;
}
};
/**
* 左侧按钮信息
*/
const leftButtonInfo = [
{
name: '周边分析',
callback: () => {
console.log('周边分析');
},
},
{
name: '关联分析',
callback: () => {
console.log('关联分析');
},
},
{
name: '次生衍生灾害链分析',
callback: () => {
console.log('次生衍生灾害链分析');
},
},
{
name: '历史相似性分析',
callback: () => {
console.log('历史相似性分析');
},
},
{
name: '灾害链模型库测试',
callback: () => {
console.log('灾害链模型库测试');
},
},
{
name: '承灾体信息提取',
callback: () => {
console.log('承灾体信息提取');
},
},
{
name: '地震滑坡堰塞湖泥石流(7级)',
callback: () => {
console.log('地震滑坡堰塞湖泥石流(7级)');
},
},
{
name: '地震滑坡堰塞湖泥石流(8级)',
callback: () => {
console.log('地震滑坡堰塞湖泥石流(8级)');
},
},
];
// 把所有需要用到的数据/方法 return 出去
return {
@@ -76,6 +130,7 @@ export const useEarthquakeDisasterChain = () => {
tableDatas,
tableColumns,
paginationConfig,
leftButtonInfo,
changeConditions,
changeCurrentPage,
};
src/hooks/rainstorm/useRainDisasterChain.ts
+72 -5
View File
@@ -55,20 +55,86 @@ export const useRainDisasterChain = () => {
* 修改搜索条件
* @param value - 新的搜索条件
*/
function changeConditions(value: {
const changeConditions = (value: {
tableData: string;
hiddenPoint: PointType;
}): void {
}): void => {
conditions.value = value;
}
};
/**
* 修改页码
* @param value - 新的页码
*/
function changeCurrentPage(value: number) {
const changeCurrentPage = (value: number) => {
paginationConfig.value.currentPage = value;
}
};
/**
* 左侧按钮信息
*/
const leftButtonInfo = [
{
name: '周边分析',
callback: () => {
console.log('周边分析');
},
},
{
name: '关联分析',
callback: () => {
console.log('关联分析');
},
},
{
name: '次生衍生灾害链分析',
callback: () => {
console.log('次生衍生灾害链分析');
},
},
{
name: '历史相似性分析',
callback: () => {
console.log('历史相似性分析');
},
},
{
name: '灾害链模型库测试',
callback: () => {
console.log('灾害链模型库测试');
},
},
{
name: '承灾体信息提取',
callback: () => {
console.log('承灾体信息提取');
},
},
{
name: '暴雨内涝灾害链(50mm)',
callback: () => {
console.log('暴雨内涝灾害链(50mm)');
},
},
{
name: '暴雨滑坡灾害链(80mm)',
callback: () => {
console.log('暴雨滑坡灾害链(80mm)');
},
},
{
name: '暴雨洪涝灾害链(100mm)',
callback: () => {
console.log('暴雨洪涝灾害链(100mm)');
},
},
{
name: '暴雨山洪灾害链(110mm)',
callback: () => {
console.log('暴雨山洪灾害链(110mm)');
},
},
];
// 把所有需要用到的数据/方法 return 出去
return {
@@ -77,6 +143,7 @@ export const useRainDisasterChain = () => {
tableDatas,
tableColumns,
paginationConfig,
leftButtonInfo,
changeConditions,
changeCurrentPage,
};
src/views/home/earthquake/EarthquakeView.vue
+8
View File
@@ -1,10 +1,12 @@
<template>
<div>
<!-- 基础组件 -->
<BasicComponent
:disaster-type="DisasterType.EARTHQUAKE"
:key="route.fullPath"
/>
<!-- 灾害链影响列表组件 -->
<DisasterChainPointComponent
:select-options="selectOptions"
:table-data-list="tableDatas"
@@ -14,13 +16,18 @@
@change-current-page="changeCurrentPage"
/>
<!-- 图例组件 -->
<LegendComponent :legend-list="legendList" :cols-num="2" />
<!-- 左侧按钮组件 -->
<LeftButtonComponent :button-list="leftButtonInfo" />
</div>
</template>
<script setup lang="ts">
import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.vue';
import LeftButtonComponent from '@/component/rain-earthquake/LeftButtonComponent.vue';
import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue';
import { useEarthquakeDisasterChain } from '@/hooks/earthquake/useEarthquakeDisasterChain';
import { useEarthquakeLegend } from '@/hooks/earthquake/useEarthquakeLegend';
@@ -36,6 +43,7 @@
tableDatas,
tableColumns,
paginationConfig,
leftButtonInfo,
changeConditions,
changeCurrentPage,
} = useEarthquakeDisasterChain();
src/views/home/rainstorm/RainstormView.vue
+8
View File
@@ -1,10 +1,12 @@
<template>
<div>
<!-- 基础组件 -->
<BasicComponent
:disaster-type="DisasterType.RAINSTORM"
:key="route.fullPath"
/>
<!-- 灾害链影响列表组件 -->
<DisasterChainPointComponent
:select-options="selectOptions"
:table-data-list="tableDatas"
@@ -14,13 +16,18 @@
@change-current-page="changeCurrentPage"
/>
<!-- 图例组件 -->
<LegendComponent :legend-list="legendList" :cols-num="2" />
<!-- 左侧按钮组件 -->
<LeftButtonComponent :button-list="leftButtonInfo" />
</div>
</template>
<script setup lang="ts">
import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.vue';
import LeftButtonComponent from '@/component/rain-earthquake/LeftButtonComponent.vue';
import LegendComponent from '@/component/rain-earthquake/LegendComponent.vue';
import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
import { useRainLegend } from '@/hooks/rainstorm/useRainLegend';
@@ -36,6 +43,7 @@
tableDatas,
tableColumns,
paginationConfig,
leftButtonInfo,
changeConditions,
changeCurrentPage,
} = useRainDisasterChain();