diff --git a/src/pages/alarmcenter_policy/Policy.js b/src/pages/alarmcenter_policy/Policy.js index 42e5a08..f8b001e 100644 --- a/src/pages/alarmcenter_policy/Policy.js +++ b/src/pages/alarmcenter_policy/Policy.js @@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react'; import { Button, Checkbox, Divider, Tabs } from 'antd'; import styles from './Policy.less' import ListOfStrategies from "@/pages/alarmcenter_policy/component/listOfStrategies/ListOfStrategies"; +import ScenarioBased from "@/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased"; const items =[ { @@ -12,7 +13,7 @@ const items =[ { label: `场景化配置`, key: '场景化配置', - children: `Content of tab 2`, + children: , }, { label: `联系人分组管理`, @@ -29,7 +30,7 @@ const Policy = ()=>{ const [activeKey, setActiveKey] = useState('策略列表'); return ( -
+
{activeKey}
}} items={items} onChange={(key) => setActiveKey(key)} />
diff --git a/src/pages/alarmcenter_policy/Policy.less b/src/pages/alarmcenter_policy/Policy.less index 5b2d2c8..64127a1 100644 --- a/src/pages/alarmcenter_policy/Policy.less +++ b/src/pages/alarmcenter_policy/Policy.less @@ -20,6 +20,16 @@ } .tabs{ + height:100%; + :global(.ant-tabs-tabpane){ + height:100%; + } + :global(.ant-tabs-content-top){ + height:100%; + } + :global(.ant-tabs-content-holder){ + height:100%; + } :global(.ant-tabs-nav){ border: 1px solid; border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(167, 229, 228, 0) 59.69%, #A7E5E4 79.76%); diff --git a/src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.js b/src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.js new file mode 100644 index 0000000..bed11f0 --- /dev/null +++ b/src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.js @@ -0,0 +1,227 @@ +import React, { useState } from 'react'; +import Title from "@/pages/homepage/compontent/title"; +import { Col, Input, Row, Select, Steps, Button } from "antd"; +import styles from './ScenarioBased.less'; + +const ScenarioBased = () => { + // 步骤配置项(保持不变) + const items = [ + { + title: '01 选择业务场景', + }, + { + title: '02 配置联系人分组', + }, + { + title: '03 组合通知方式', + }, + { + title: '04 设置告警升级规则', + }, + ]; + + // 页码状态管理,0表示第一页(步骤1-2),1表示第二页(步骤3-4) + const [currentPage, setCurrentPage] = useState(0); + + // 当前激活的步骤,根据页码动态计算 + const currentStep = currentPage * 2 + 1; // 第一页激活步骤2,第二页激活步骤4 + + // 下一步按钮点击事件 + const handleNextPage = () => { + if (currentPage < 1) { // 最多只有两页 + setCurrentPage(currentPage + 1); + } + }; + + // 上一步按钮点击事件 + const handlePreviousPage = () => { + if (currentPage > 0) { + setCurrentPage(currentPage - 1); + } + }; + + return ( +
+ + + + {/* 步骤条组件,current属性控制当前激活的步骤 */} + + + + + {/* 步骤内容区域 */} +
+ {/* 第一页:显示步骤1和步骤2(保持原有左右分布布局) */} + {currentPage === 0 && ( + + {/* 步骤1:选择业务场景(完全保持原有内容) */} + + {/* 步骤数:01(右下角) */} +
01
+ + 预设场景: +
+
+ +
+
+ +
+
+ + + {/* 步骤2:配置联系人分组(完全保持原有内容) */} + + {/* 步骤数:02(右下角) */} +
02
+ + + + + 联系人组 + + + + + + + + + + + + + + 优先级 + + + + + + + + + + + + + + 说明 + + + + + + + + + + + + + +
+ )} + + {/* 第二页:显示步骤3和步骤4(改为左右分布) */} + {currentPage === 1 && ( + + {/* 步骤3:组合通知方式(左侧) */} + + {/* 步骤数:03(右下角) */} +
03
+ +
+ + +
可选通知方式:
+ + + + + + + + + + + + + +
组合规则:
+ + +
+
+ + + {/* 步骤4:设置告警升级规则(右侧) */} + + {/* 步骤数:04(右下角) */} +
04
+ +
+ + +
升级周期:
+ + + +
升级层级:
+ + + +
最大重试次数:
+ + +
+ + +
升级规则详情:
+ + +
+
+ +
+ )} +
+ + {/* 翻页按钮 */} + + + + +
+ ); +}; + +export default ScenarioBased; diff --git a/src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.less b/src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.less new file mode 100644 index 0000000..ab8f99c --- /dev/null +++ b/src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.less @@ -0,0 +1,69 @@ +.steps{ + :global(.ant-steps-item-icon){ + display:none + } + :global(.ant-steps-item-title){ + position: relative; + background: linear-gradient(45deg, + #fafafa, #f8f8f8, #f7f7f7, #f6f6f6, + #f6f6f6, #f7f7f7, #f8f8f8, #fafafa); + border-radius: 8px; /* 内部圆角 */ + padding: 0 10px; + z-index: 0; + &::before { + content: ''; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + background: linear-gradient(45deg, + #b6b6b6, #f8f8f8, #f7f7f7, #f6f6f6, + #f6f6f6, #f7f7f7, #f8f8f8, #b6b6b6); + border-radius: 10px; /* 外部圆角,比内部大2px */ + z-index: -1; + /* 方法A:使用clip-path挖空中间 */ + clip-path: polygon( + /* 外框 */ + 0% 0%, 100% 0%, 100% 100%, 0% 100%, + /* 挖空内框(从2px开始到-2px结束) */ + 2px 2px, 2px calc(100% - 2px), + calc(100% - 2px) calc(100% - 2px), + calc(100% - 2px) 2px + ); + } + &::after{ + background-color: #22C5AA !important; + height:3px; + } + } + :global(.ant-steps-item-active .ant-steps-item-title){ + position: relative; + background: #82BFB3; + border-radius: 8px; /* 内部圆角 */ + padding: 0 16px; + z-index: 0; + color:#fff !important; + &::before { + content: ''; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 1px solid; + background: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(0, 143, 142, 0) 59.69%, #008F8E 79.76%); + border-radius: 10px; /* 外部圆角,比内部大2px */ + z-index: -1; + /* 方法A:使用clip-path挖空中间 */ + //clip-path: polygon( + // /* 外框 */ + // 0% 0%, 100% 0%, 100% 100%, 0% 100%, + // /* 挖空内框(从2px开始到-2px结束) */ + // 2px 2px, 2px calc(100% - 2px), + // calc(100% - 2px) calc(100% - 2px), + // calc(100% - 2px) 2px + //); + } + } +}