左侧按钮组件

src/assets/index.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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();