diff --git a/config/routes.js b/config/routes.js index dd0f7b1..2b7e78e 100644 --- a/config/routes.js +++ b/config/routes.js @@ -177,7 +177,20 @@ export default [ component: './alarmcenter_policy/Policy', }, ] - } + }, + //分析报表 + { + path: '/topnavbar00/business/analyzeReports', + name: 'analyzeReports', + routes: [ + // 分析报表设置 + { + path: '/topnavbar00/business/analyzeReports/set', + name: 'set', + component: './analyzeReports_set/Set', + }, + ] + }, ], }, ], diff --git a/src/pages/alarmcenter_policy/Policy.js b/src/pages/alarmcenter_policy/Policy.js index f8b001e..a948183 100644 --- a/src/pages/alarmcenter_policy/Policy.js +++ b/src/pages/alarmcenter_policy/Policy.js @@ -3,6 +3,8 @@ 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"; +import ContactGrouping from "@/pages/alarmcenter_policy/component/contactGroupManagement/ContactGrouping"; +import TemplateManagement from "@/pages/alarmcenter_policy/component/templateManagement/TemplateManagement"; // 导入新组件 const items =[ { @@ -18,12 +20,12 @@ const items =[ { label: `联系人分组管理`, key: '联系人分组管理', - children: `Content of tab 3`, + children: , }, { label: `模板管理`, key: '模板管理', - children: `Content of tab 4`, + children: , // 使用新组件替换占位文本 }, ] const Policy = ()=>{ diff --git a/src/pages/alarmcenter_policy/Policy.less b/src/pages/alarmcenter_policy/Policy.less index 64127a1..9ba1054 100644 --- a/src/pages/alarmcenter_policy/Policy.less +++ b/src/pages/alarmcenter_policy/Policy.less @@ -35,9 +35,7 @@ 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%); border-image-slice: 1; backdrop-filter: blur(3.4000000953674316px); - box-shadow: 1px 2px 5px 0px #00666540; - } :global(.ant-tabs-nav-list){ align-items: center; diff --git a/src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.js b/src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.js index bed11f0..c4b5f75 100644 --- a/src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.js +++ b/src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import Title from "@/pages/homepage/compontent/title"; -import { Col, Input, Row, Select, Steps, Button } from "antd"; +import { Col, Input, Row, Select, Steps, Button, Table } from "antd"; // 添加Table组件导入 import styles from './ScenarioBased.less'; const ScenarioBased = () => { @@ -40,14 +40,105 @@ const ScenarioBased = () => { } }; + // 步骤编号样式 + const style={ + position: 'absolute', + bottom: 0, + right: 0, + fontFamily: 'PingFang SC', + fontWeight: 'bold', + fontStyle: 'normal', + fontSize: '128px', + lineHeight: '100%', + letterSpacing: '0%', + color: '#2C9E9D33', + padding: '10px', + borderRadius: '4px' + }; + + // 升级规则表格数据 + const [upgradeRules, setUpgradeRules] = useState([ + { + key: '1', + stage: '阶段 1', + timeCondition: '告警后 1 小时未处理', + notifyUpgrade: '短信→短信 + 邮件', + contactGroupUpgrade: '运维组→运维组 + 研发组' + }, + { + key: '2', + stage: '阶段 1', + timeCondition: '告警后 2 小时未处理', + notifyUpgrade: '短信 + 邮件→电话 + 短信 + 邮件', + contactGroupUpgrade: '运维组 + 研发组→高管组' + } + ]); + + // 表格列配置 + const columns = [ + { + title: '升级阶段', + dataIndex: 'stage', + key: 'stage', + render: (text) =>
{text}
+ }, + { + title: '时间条件', + dataIndex: 'timeCondition', + key: 'timeCondition', + render: (text) => + }, + { + title: '通知方式升级', + dataIndex: 'notifyUpgrade', + key: 'notifyUpgrade', + render: (text) => + }, + { + title: '联系人组升级', + dataIndex: 'contactGroupUpgrade', + key: 'contactGroupUpgrade', + render: (text) => + } + ]; + + // 添加新的升级规则 + const handleAddRule = () => { + const newRule = { + key: `${upgradeRules.length + 1}`, + stage: `阶段 ${upgradeRules.length + 1}`, + timeCondition: '', + notifyUpgrade: '', + contactGroupUpgrade: '' + }; + setUpgradeRules([...upgradeRules, newRule]); + }; + return (
- + {/* 步骤条组件，current属性控制当前激活的步骤 */} + + + + {/* 步骤内容区域 */} @@ -58,7 +149,7 @@ const ScenarioBased = () => { {/* 步骤1：选择业务场景（完全保持原有内容） */} {/* 步骤数：01（右下角） */} -
01
+
01
预设场景：
@@ -88,7 +179,7 @@ const ScenarioBased = () => { {/* 步骤2：配置联系人分组（完全保持原有内容） */} {/* 步骤数：02（右下角） */} -
02
+
02
@@ -144,82 +235,82 @@ const ScenarioBased = () => { {/* 步骤3：组合通知方式（左侧） */} {/* 步骤数：03（右下角） */} -
03
+
03
- - -
可选通知方式：
- - - - - - - - - - - - - -
组合规则：
- - - +
    +
  • + 组合通知方式 +
    • +
  • + 短信： + +
    • +
  • + 邮件： + +
    • +
  • + APP 推送： + +
    • +
  • + 电话： + +
    • +
{/* 步骤4：设置告警升级规则（右侧） */} {/* 步骤数：04（右下角） */} -
04
+
04
-
- - -
升级周期：
- - - -
升级层级：
- - - -
最大重试次数：
- - - - - -
升级规则详情：
- - - +
+
+ 设置告警升级规则 +
+ {/* 升级规则表格 */} + + {/* 添加新规则按钮 */} +
+ +
)} - - {/* 翻页按钮 */} - - - - ); }; diff --git a/src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.less b/src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.less index ab8f99c..ac4a73a 100644 --- a/src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.less +++ b/src/pages/alarmcenter_policy/component/ScenarioBased/ScenarioBased.less @@ -4,6 +4,7 @@ } :global(.ant-steps-item-title){ position: relative; + border: 1px solid; background: linear-gradient(45deg, #fafafa, #f8f8f8, #f7f7f7, #f6f6f6, #f6f6f6, #f7f7f7, #f8f8f8, #fafafa); @@ -66,4 +67,26 @@ //); } } + + /* 添加步骤之间横线连接处右侧的旋转四边形 */ + :global(.ant-steps-item:not(:last-child)){ + &:after { + /* 创建旋转四边形 */ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%) translateX(-30%) rotate(45deg); + width: 20px; /* 四边形的宽高 */ + height: 20px; + background-color: #22C5AA; /* 颜色与连接线一致 */ + z-index: 1; /* 确保显示在连接线之上 */ + } + } +} +.tableaa{ + :global(.ant-table-cell){ + background-color: transparent !important; + border: none !important; + } } diff --git a/src/pages/alarmcenter_policy/component/contactGroupManagement/ContactGrouping.js b/src/pages/alarmcenter_policy/component/contactGroupManagement/ContactGrouping.js new file mode 100644 index 0000000..3f5c959 --- /dev/null +++ b/src/pages/alarmcenter_policy/component/contactGroupManagement/ContactGrouping.js @@ -0,0 +1,144 @@ +import React, { useState } from 'react'; +import { Button, Tag, Space } from 'antd'; +import { EditOutlined, DeleteOutlined, UserOutlined } from '@ant-design/icons'; +import TableWithPagination from '@/components/assetmangement/table'; + +const ContactGrouping = () => { + // 定义表格列配置 + const columns = [ + { + title: '', + dataIndex: 'checkbox', + key: 'checkbox', + // 复选框列，通过TableWithPagination的rowSelection属性控制 + }, + { + title: '分组ID', + dataIndex: 'groupId', + key: 'groupId', + }, + { + title: '分组名称', + dataIndex: 'groupName', + key: 'groupName', + }, + { + title: '成员列表', + dataIndex: 'memberList', + key: 'memberList', + ellipsis: true, // 超出部分显示省略号 + }, + { + title: '优先级', + dataIndex: 'priority', + align: 'center', + key: 'priority', + render: (priority) => { + // 根据优先级显示不同颜色的标签 + let color = 'default'; + if (priority === '高') { + color = 'red'; + } else if (priority === '中') { + color = 'orange'; + } else if (priority === '低') { + color = 'green'; + } + return {priority}; + }, + }, + { + title: '操作', + dataIndex: 'action', + key: 'action', + align: 'center', + render: (_, record) => ( + + + + + + ), + }, + ]; + + // 模拟数据，匹配截图中的示例 + const dataSource = [ + { + key: '1', + groupId: 'GRP-001', + groupName: '运维组', + memberList: '张三, 李四, 王五', + priority: '高', + }, + { + key: '2', + groupId: 'GRP-002', + groupName: '研发组', + memberList: '赵六, 孙七', + priority: '中', + }, + { + key: '3', + groupId: 'GRP-003', + groupName: '管理层', + memberList: '周八, 吴九', + priority: '低', + }, + ]; + + // 编辑操作处理 + const handleEdit = (record) => { + console.log('编辑分组:', record); + // 这里可以添加编辑逻辑，比如打开编辑弹窗 + }; + + // 删除操作处理 + const handleDelete = (record) => { + console.log('删除分组:', record); + // 这里可以添加删除逻辑，比如确认弹窗后删除 + }; + + // 成员管理操作处理 + const handleMemberManagement = (record) => { + console.log('成员管理:', record); + // 这里可以添加成员管理逻辑，比如打开成员管理弹窗 + }; + + return ( +
+ {/* 表格组件 */} + +
+ ); +}; + +export default ContactGrouping; diff --git a/src/pages/alarmcenter_policy/component/templateManagement/TemplateManagement.js b/src/pages/alarmcenter_policy/component/templateManagement/TemplateManagement.js new file mode 100644 index 0000000..ab79575 --- /dev/null +++ b/src/pages/alarmcenter_policy/component/templateManagement/TemplateManagement.js @@ -0,0 +1,123 @@ +import React, { useState } from 'react'; +import { Button, Space } from 'antd'; +import { UploadOutlined, ExportOutlined, ShareAltOutlined } from '@ant-design/icons'; +import TableWithPagination from '@/components/assetmangement/table'; + +const TemplateManagement = () => { + // 定义表格列配置 + const columns = [ + { + title: '', + dataIndex: 'checkbox', + key: 'checkbox', + // 复选框列，通过TableWithPagination的rowSelection属性控制 + }, + { + title: '模板ID', + dataIndex: 'templateId', + key: 'templateId', + }, + { + title: '模板名称', + dataIndex: 'templateName', + key: 'templateName', + }, + { + title: '适用场景', + dataIndex: 'applicationScene', + key: 'applicationScene', + }, + { + title: '创建时间', + dataIndex: 'createTime', + key: 'createTime', + }, + { + title: '操作', + dataIndex: 'action', + key: 'action', + align: 'center', // 设置操作列居中显示 + render: (_, record) => ( + + + + + + ), + }, + ]; + + // 模拟数据，匹配截图中的示例 + const dataSource = [ + { + key: '1', + templateId: 'TPL-001', + templateName: '设备故障告警模板', + applicationScene: '设备故障场景', + createTime: '2025-10-30', + }, + { + key: '2', + templateId: 'TPL-002', + templateName: '系统性能告警模板', + applicationScene: '系统性能场景', + createTime: '2025-10-29', + }, + ]; + + // 应用操作处理函数 + const handleApply = (record) => { + console.log('应用模板:', record); + // 这里可以添加应用模板的逻辑，比如打开应用确认弹窗 + }; + + // 导出操作处理函数 + const handleExport = (record) => { + console.log('导出模板:', record); + // 这里可以添加导出模板的逻辑，比如生成并下载模板文件 + }; + + // 分享操作处理函数 + const handleShare = (record) => { + console.log('分享模板:', record); + // 这里可以添加分享模板的逻辑，比如打开分享弹窗 + }; + + return ( +
+ {/* 使用TableWithPagination组件渲染表格 */} + +
+ ); +}; + +export default TemplateManagement; diff --git a/src/pages/analyzeReports_set/Set.js b/src/pages/analyzeReports_set/Set.js new file mode 100644 index 0000000..d6b6751 --- /dev/null +++ b/src/pages/analyzeReports_set/Set.js @@ -0,0 +1,354 @@ +import Title from '../homepage/compontent/title' +import {Button, Col, Form, Input, Row, Select, Switch, Tabs, DatePicker, Divider} from "antd"; +import {PlusOutlined} from "@ant-design/icons"; +import styles from './Set.less' + +const Item=()=>{ + // 时间粒度选项 + const timeGranularityOptions = [ + { label: '按小时', value: 'hour' }, + { label: '按天', value: 'day' }, + { label: '按周', value: 'week' }, + { label: '按月', value: 'month' }, + ]; + +// 时间范围选项 + const timeRangeOptions = [ + { label: '最近7天', value: 'last7days' }, + { label: '最近30天', value: 'last30days' }, + { label: '最近90天', value: 'last90days' }, + { label: '自定义', value: 'custom' }, + ]; + // 表单提交处理 + const onFinish = (values) => { + console.log('表单提交:', values); + }; + return ( +
+ {/* 添加表单 */} +
+ + {/* 时间粒度选择 */} +
+ + + + + + {/* 时间范围自定义 */} + + + + + + + + + ) +} + +// Excel选项组件 +const ExcelOption=()=>{ + // 表单提交处理 + const onFinish = (values) => { + console.log('Excel选项表单提交:', values); + }; + + // 样式设置选项 + const fontOptions = [ + { label: '宋体', value: 'simSun' }, + { label: '微软雅黑', value: 'microsoftYaHei' }, + { label: '黑体', value: 'heiTi' }, + { label: 'Arial', value: 'arial' }, + { label: 'Times New Roman', value: 'timesNewRoman' }, + ]; + + const fontSizeOptions = [ + { label: '10', value: '10' }, + { label: '12', value: '12' }, + { label: '14', value: '14' }, + { label: '16', value: '16' }, + { label: '18', value: '18' }, + { label: '20', value: '20' }, + ]; + + const colorOptions = [ + { label: '红色', value: '#FF0000' }, + { label: '蓝色', value: '#0000FF' }, + { label: '绿色', value: '#00FF00' }, + { label: '黄色', value: '#FFFF00' }, + { label: '黑色', value: '#000000' }, + { label: '白色', value: '#FFFFFF' }, + ]; + + const borderStyleOptions = [ + { label: '无', value: 'none' }, + { label: '细线', value: 'thin' }, + { label: '粗线', value: 'thick' }, + { label: '虚线', value: 'dashed' }, + ]; + + return ( +
+
+ {/* 样式设置部分 */} +
+

样式设置

+ +
+ + + + + + + + + + + + + + + + + + + + + + + {/* 布局设置部分 */} +
+

布局设置

+ +
+ + + + + + +