右侧按钮组件

src/component/rain-earthquake/LeftButtonComponent.vue

@@ -29,8 +29,12 @@
   const selectedButtonId: Ref<number> = ref(-1);
 
   // 接收父组件传递的参数
-  defineProps<{
+  const props = defineProps<{
-    buttonList: { name: string; callback: (...args: unknown[]) => unknown }[];
+    buttonList: {
+      name: string;
+      callback: (...args: unknown[]) => unknown;
+      executeOnce?: boolean;
+    }[];
   }>();
 
   // 点击按钮触发
@@ -49,6 +53,10 @@
     }
     selectedButtonId.value = index;
     callback();
+
+    if (props.buttonList[index].executeOnce) {
+      selectedButtonId.value = -1;
+    }
   };
 </script>
 

src/component/rain-earthquake/RightButtonComponent.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="right-button-box">
+    <ul class="right-button-ul">
+      <li v-for="(buttonItem, index) in buttonList" :key="index">
+        <button
+          @click="handelButton(index, buttonItem.callback)"
+          :style="{
+            'background-image': `url(${selectedButtonId == index ? rightOrangeButton : rightBlueButton})`,
+          }"
+        >
+          {{ buttonItem.name }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { rightBlueButton, rightOrangeButton } from '@/assets';
+  import { ref, type Ref } from 'vue';
+
+  // 记录选中按钮id
+  const selectedButtonId: Ref<number> = ref(-1);
+
+  // 接收父组件传递的参数
+  const props = defineProps<{
+    buttonList: {
+      name: string;
+      callback: (...args: unknown[]) => unknown;
+      executeOnce?: boolean;
+    }[];
+  }>();
+
+  // 点击按钮触发
+  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();
+    if (props.buttonList[index].executeOnce) {
+      selectedButtonId.value = -1;
+    }
+  };
+</script>
+
+<style scoped>
+  .right-button-box {
+    width: 180px;
+    position: absolute;
+    top: 45px;
+    right: 200px;
+    z-index: 1000;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0);
+    padding: 15px 0;
+  }
+
+  .right-button-ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .right-button-ul li {
+    margin: 15px 0 0 0;
+    padding: 0;
+    text-align: center;
+  }
+  .right-button-ul li button {
+    width: 190px;
+    height: 30px;
+    padding: 5px;
+    color: white;
+    cursor: pointer;
+    font-size: 16px;
+    white-space: nowrap;
+    min-width: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+    background-color: transparent;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: 20px center;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+  }
+</style>

src/hooks/rainstorm/useRainDisasterChain.ts

@@ -2,6 +2,8 @@ import { ref } from 'vue';
 import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
 import type { PaginationType } from '@/types/common/PaginationType';
 import { PointType } from '@/types/common/DisasterType';
+import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
+import config from '@/config/config.json';
 
 /**
  * 暴雨灾害链影响点列表钩子函数
@@ -136,6 +138,52 @@ export const useRainDisasterChain = () => {
     },
   ];
 
+  /**
+   * 右侧按钮信息
+   */
+  const rightButtonInfo = [
+    {
+      name: '暴雨下载',
+      callback: () => {
+        console.log('暴雨下载');
+      },
+    },
+    {
+      name: '图件下载',
+      callback: () => {
+        console.log('图件下载');
+      },
+    },
+    {
+      name: '雷达云图',
+      callback: () => {
+        console.log('雷达云图');
+      },
+    },
+    {
+      name: '信息表格',
+      callback: () => {
+        console.log('信息表格');
+      },
+    },
+    {
+      name: '场景重置',
+      callback: () => {
+        CesiumUtilsSingleton.clearAllResources('custom');
+      },
+      executeOnce: true,
+    },
+    {
+      name: '视角重置',
+      callback: () => {
+        CesiumUtilsSingleton.flyToTarget(
+          config.defaultPosition as [number, number, number]
+        );
+      },
+      executeOnce: true,
+    },
+  ];
+
   // 把所有需要用到的数据/方法 return 出去
   return {
     conditions,
@@ -144,6 +192,7 @@ export const useRainDisasterChain = () => {
     tableColumns,
     paginationConfig,
     leftButtonInfo,
+    rightButtonInfo,
     changeConditions,
     changeCurrentPage,
   };

src/views/home/rainstorm/RainstormView.vue

@@ -21,6 +21,9 @@
 
     <!-- 左侧按钮组件 -->
     <LeftButtonComponent :button-list="leftButtonInfo" />
+
+    <!-- 右侧按钮组件 -->
+    <RightButtonComponent :button-list="rightButtonInfo" />
   </div>
 </template>
 
@@ -29,6 +32,7 @@
   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 RightButtonComponent from '@/component/rain-earthquake/RightButtonComponent.vue';
   import { useRainDisasterChain } from '@/hooks/rainstorm/useRainDisasterChain';
   import { useRainLegend } from '@/hooks/rainstorm/useRainLegend';
   import { DisasterType } from '@/types/common/DisasterType.ts';
@@ -44,6 +48,7 @@
     tableColumns,
     paginationConfig,
     leftButtonInfo,
+    rightButtonInfo,
     changeConditions,
     changeCurrentPage,
   } = useRainDisasterChain();