jiangxucong
/
dq-IoTP
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

结果框固定高

Browse Source
main
zjlnb666 3 weeks ago
parent 46e5c81d84
commit 9c0012b3cd
4 changed files with 309 additions and 2 deletions
Show Stats Download Patch File Download Diff File

5
src/pages/alarmcenter_policy/Policy.js
Unescape Escape View File

@ -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: <ScenarioBased/>,
},
{
label: `联系人分组管理`,
@ -29,7 +30,7 @@ const Policy = ()=>{
const [activeKey, setActiveKey] = useState('策略列表');
return (
<div style={{borderTopLeftRadius:16}}>
<div style={{borderTopLeftRadius:16,height:'100%'}}>
<Tabs className={styles['tabs']} tabBarExtraContent={{left: <div className={styles['title']}><span>{activeKey}</span></div>}} items={items}
onChange={(key) => setActiveKey(key)} />
</div>

10
src/pages/alarmcenter_policy/Policy.less
Unescape Escape View File

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

227
src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.js
Unescape Escape View File

@ -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 (
<div style={{ padding: '20px', height: '100%', display: 'flex', flexDirection: 'column' }}>
<Title title='场景化配置'></Title>
<Row style={{ marginTop: 20 }}>
<Col span={18}>
{/* 步骤条组件，current属性控制当前激活的步骤 */}
<Steps className={styles['steps']} current={currentStep} items={items} />
</Col>
</Row>
{/* 步骤内容区域 */}
<div style={{ marginTop: 40, flex: 1 }}>
{/* 第一页：显示步骤1和步骤2（保持原有左右分布布局） */}
{currentPage === 0 && (
<Row style={{ marginTop: 40, flex: 1 ,height:'100%'}}>
{/* 步骤1：选择业务场景（完全保持原有内容） */}
<Col span={7} style={{ borderRight: '1px solid #D7D7D7', height: '100%', position: 'relative' }}>
{/* 步骤数：01（右下角） */}
<div style={{ position: 'absolute', bottom: 0, right: 0, fontSize: '18px', color: '#999', fontWeight: 'bold' ,}}>01</div>
<Title title={'选择业务场景'} style={{ marginBottom: 20 }}></Title>
<span>预设场景：</span>
<div style={{ marginTop: 20 }}>
<div style={{ width: 300 }}>
<Select style={{ width: 300 }}
options={
[
{
label: '场景1',
value: '场景1',
},
{
label: '场景2',
value: '场景2',
},
]
}
>
</Select>
</div>
<div style={{ width: 300, marginTop: 20 }}>
<Input placeholder={'自定义输入'}></Input>
</div>
</div>
</Col>
{/* 步骤2：配置联系人分组（完全保持原有内容） */}
<Col span={16} offset={1} style={{ height: '100%', position: 'relative' }}>
{/* 步骤数：02（右下角） */}
<div style={{ position: 'absolute', bottom: 0, right: 0, fontSize: '18px', color: '#999', fontWeight: 'bold' }}>02</div>
<Title title={'配置联系人分组'}></Title>
<Row gutter={20}>
<Col style={{ width: 160 }}>
<Row gutter={[0, 20]} style={{ marginTop: 20 }}>
<Col span={24}>联系人组</Col>
<Col span={24}>
<Select style={{ width: 150 }} options={[{ label: '运维组', value: '运维组' }]} defaultValue={'运维组'}></Select>
</Col>
<Col span={24}>
<Select style={{ width: 150 }} options={[{ label: '研发组', value: '研发组' }]} defaultValue={'研发组'}></Select>
</Col>
<Col span={24}>
<Select style={{ width: 150 }} options={[{ label: '管理层组', value: '管理层组' }]} defaultValue={'管理层组'}></Select>
</Col>
</Row>
</Col>
<Col style={{ width: 100 }}>
<Row gutter={[0, 20]} style={{ marginTop: 20 }}>
<Col span={24}>优先级</Col>
<Col span={24}>
<Select style={{ width: 75 }} options={[{ label: '高', value: '高' }]} defaultValue={'高'}></Select>
</Col>
<Col span={24}>
<Select style={{ width: 75 }} options={[{ label: '中', value: '中' }]} defaultValue={'中'}></Select>
</Col>
<Col span={24}>
<Select style={{ width: 75 }} options={[{ label: '低', value: '低' }]} defaultValue={'低'}></Select>
</Col>
</Row>
</Col>
<Col style={{ width: 210 }}>
<Row gutter={[0, 20]} style={{ marginTop: 20 }}>
<Col span={24}>说明</Col>
<Col span={24}>
<Input style={{ width: 200 }} defaultValue={'设备故障场景下优先通知'}></Input>
</Col>
<Col span={24}>
<Input style={{ width: 200 }} defaultValue={'技术问题需协同研发时通知'}></Input>
</Col>
<Col span={24}>
<Input style={{ width: 200 }} defaultValue={'重大故障升级后通知'}></Input>
</Col>
</Row>
</Col>
</Row>
</Col>
</Row>
)}
{/* 第二页：显示步骤3和步骤4（改为左右分布） */}
{currentPage === 1 && (
<Row style={{ marginTop: 40, flex: 1 ,height:'100%'}}>
{/* 步骤3：组合通知方式（左侧） */}
<Col span={7} style={{borderRight: '1px solid #D7D7D7', height: '100%', position: 'relative' }}>
{/* 步骤数：03（右下角） */}
<div style={{ position: 'absolute', bottom: 0, right: 0, fontSize: '18px', color: '#999', fontWeight: 'bold' }}>03</div>
<Title title={'组合通知方式'} style={{ marginBottom: 20 }}></Title>
<div style={{ padding: '20px', borderRadius: '8px', height: 'calc(100% - 60px)' }}>
<Row gutter={[16, 16]}>
<Col span={24}>
<div style={{ fontWeight: 'bold', marginBottom: 10 }}>可选通知方式：</div>
<Row gutter={[16, 16]}>
<Col span={12}>
<Select style={{ width: '100%' }} options={[{ label: '短信', value: 'sms' }]}></Select>
</Col>
<Col span={12}>
<Select style={{ width: '100%' }} options={[{ label: '邮件', value: 'email' }]}></Select>
</Col>
<Col span={12}>
<Select style={{ width: '100%' }} options={[{ label: '电话', value: 'phone' }]}></Select>
</Col>
</Row>
</Col>
<Col span={24}>
<div style={{ fontWeight: 'bold', marginBottom: 10 }}>组合规则：</div>
<Input.TextArea rows={4} placeholder="请输入通知组合规则" />
</Col>
</Row>
</div>
</Col>
{/* 步骤4：设置告警升级规则（右侧） */}
<Col span={16} offset={1} style={{ height: '100%', position: 'relative' }}>
{/* 步骤数：04（右下角） */}
<div style={{ position: 'absolute', bottom: 0, right: 0, fontSize: '18px', color: '#999', fontWeight: 'bold' }}>04</div>
<Title title={'设置告警升级规则'} style={{ marginBottom: 20 }}></Title>
<div style={{ padding: '20px', borderRadius: '8px', height: 'calc(100% - 60px)' }}>
<Row gutter={[16, 16]}>
<Col span={8}>
<div style={{ fontWeight: 'bold', marginBottom: 10 }}>升级周期：</div>
<Input placeholder="如：30分钟" />
</Col>
<Col span={8}>
<div style={{ fontWeight: 'bold', marginBottom: 10 }}>升级层级：</div>
<Select style={{ width: '100%' }} options={[{ label: '3层', value: '3' }]}></Select>
</Col>
<Col span={8}>
<div style={{ fontWeight: 'bold', marginBottom: 10 }}>最大重试次数：</div>
<Input placeholder="如：3次" />
</Col>
</Row>
<Row gutter={[16, 16]} style={{ marginTop: 20 }}>
<Col span={24}>
<div style={{ fontWeight: 'bold', marginBottom: 10 }}>升级规则详情：</div>
<Input.TextArea rows={6} placeholder="请输入详细的告警升级规则" />
</Col>
</Row>
</div>
</Col>
</Row>
)}
</div>
{/* 翻页按钮 */}
<Row style={{ marginTop: 40, justifyContent: 'flex-end' }}>
<Button
type="default"
onClick={() => setCurrentPage(0)}
disabled={currentPage === 0}
style={{ marginRight: 16 }}
>
上一页
</Button>
<Button
type="primary"
onClick={() => setCurrentPage(1)}
disabled={currentPage === 1}
>
下一页
</Button>
</Row>
</div>
);
};
export default ScenarioBased;

69
src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.less
Unescape Escape View File

@ -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
//);
}
}
}
Write Preview
Loading…
Cancel
Save