diff --git a/src/assets/images/left-blue-button.png b/src/assets/images/left-blue-button.png
new file mode 100644
index 0000000..09d5a75
Binary files /dev/null and b/src/assets/images/left-blue-button.png differ
diff --git a/src/assets/images/left-orange-button.png b/src/assets/images/left-orange-button.png
new file mode 100644
index 0000000..ab48de9
Binary files /dev/null and b/src/assets/images/left-orange-button.png differ
diff --git a/src/assets/images/right-blue-button.png b/src/assets/images/right-blue-button.png
new file mode 100644
index 0000000..ebc3dd4
Binary files /dev/null and b/src/assets/images/right-blue-button.png differ
diff --git a/src/assets/images/right-orange-button.png b/src/assets/images/right-orange-button.png
new file mode 100644
index 0000000..b82ec4f
Binary files /dev/null and b/src/assets/images/right-orange-button.png differ
diff --git a/src/assets/index.ts b/src/assets/index.ts
index 205c83c..fb4196d 100644
--- a/src/assets/index.ts
+++ b/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';
diff --git a/src/component/rain-earthquake/DisasterChainPointComponent.vue b/src/component/rain-earthquake/DisasterChainPointComponent.vue
index 22b8e41..141a5e5 100644
--- a/src/component/rain-earthquake/DisasterChainPointComponent.vue
+++ b/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);
diff --git a/src/component/rain-earthquake/LeftButtonComponent.vue b/src/component/rain-earthquake/LeftButtonComponent.vue
new file mode 100644
index 0000000..cfc74a0
--- /dev/null
+++ b/src/component/rain-earthquake/LeftButtonComponent.vue
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
diff --git a/src/hooks/earthquake/useEarthquakeDisasterChain.ts b/src/hooks/earthquake/useEarthquakeDisasterChain.ts
index 7d08273..cdaf682 100644
--- a/src/hooks/earthquake/useEarthquakeDisasterChain.ts
+++ b/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,
};
diff --git a/src/hooks/rainstorm/useRainDisasterChain.ts b/src/hooks/rainstorm/useRainDisasterChain.ts
index 662c113..1990c57 100644
--- a/src/hooks/rainstorm/useRainDisasterChain.ts
+++ b/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,
};
diff --git a/src/views/home/earthquake/EarthquakeView.vue b/src/views/home/earthquake/EarthquakeView.vue
index 5679011..2e2df0b 100644
--- a/src/views/home/earthquake/EarthquakeView.vue
+++ b/src/views/home/earthquake/EarthquakeView.vue
@@ -1,10 +1,12 @@
+
+
+
+
+
+