From 9c0012b3cdcd96780880328b2e3faab7f4f284ec Mon Sep 17 00:00:00 2001
From: zjlnb666 <14659021+zhangjianlong666@user.noreply.gitee.com>
Date: Thu, 8 Jan 2026 18:02:23 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=93=E6=9E=9C=E6=A1=86=E5=9B=BA=E5=AE=9A?=
=?UTF-8?q?=E9=AB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/alarmcenter_policy/Policy.js | 5 +-
src/pages/alarmcenter_policy/Policy.less | 10 +
.../component/ScenarioBased/ScenarioBased.js | 227 ++++++++++++++++++
.../ScenarioBased/ScenarioBased.less | 69 ++++++
4 files changed, 309 insertions(+), 2 deletions(-)
create mode 100644 src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.js
create mode 100644 src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.less
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
+ //);
+ }
+ }
+}