Browse Source

信鸽推送

dev
deartibers 2 years ago
parent
commit
a5a6eeac6f
  1. 4
      web/client/src/sections/install/containers/roles.jsx
  2. 2
      web/client/src/sections/install/containers/system.jsx
  3. 74
      web/client/src/sections/service/actions/emPush.js
  4. 14
      web/client/src/sections/service/actions/emPush.jsx
  5. 480
      web/client/src/sections/service/components/pushModal.jsx
  6. 10
      web/client/src/sections/service/components/pushModal.less
  7. 333
      web/client/src/sections/service/containers/emPush.jsx
  8. 4
      web/client/src/utils/webapi.js

4
web/client/src/sections/install/containers/roles.jsx

@ -56,7 +56,7 @@ const Roles = (props) => {
let anxinerror = false let anxinerror = false
let anxinerrorArr = [] let anxinerrorArr = []
for (let i = 0; i < row.correlationProject.length; i++) { for (let i = 0; i < row.correlationProject.length; i++) {
if (row.correlationProject[i].del == -1) { if (row.correlationProject[i].del == true) {
anxinerror = true anxinerror = true
anxinerrorArr.push(row.correlationProject[i].pepProjectName) anxinerrorArr.push(row.correlationProject[i].pepProjectName)
} }
@ -65,7 +65,7 @@ const Roles = (props) => {
<div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
{ {
anxinerror ? ( anxinerror ? (
<Tooltip content={anxinerrorArr.join(',') + ',项目已在【项企PEP】中被删除!'}> <Tooltip content={anxinerrorArr.join(',') + ',项目已在【项企PEP】或【映射关系】中被删除!'}>
<div style={{ marginRight: 5 }}> <div style={{ marginRight: 5 }}>
<img src="/assets/images/install/risk.png" alt="" style={{ height: 24, width: 24, }} /> <img src="/assets/images/install/risk.png" alt="" style={{ height: 24, width: 24, }} />
</div> </div>

2
web/client/src/sections/install/containers/system.jsx

@ -131,7 +131,7 @@ const Example = (props) => {
<img src="/assets/images/install/icon_POMS.png" alt="" style={{ height: 10, width: 10, marginLeft: 4, marginRight: 9 }} /> <img src="/assets/images/install/icon_POMS.png" alt="" style={{ height: 10, width: 10, marginLeft: 4, marginRight: 9 }} />
</div> </div>
<div style={{ color: '#FFFFFF', fontSize: 11, marginRight: 12 }}> <div style={{ color: '#FFFFFF', fontSize: 11, marginRight: 12 }}>
PMOS POMS
</div> </div>
</div> </div>
) )

74
web/client/src/sections/service/actions/emPush.js

@ -0,0 +1,74 @@
'use strict';
import { ApiTable, basicAction } from '$utils'
export function getPush () { //获取推送配置列表
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_PUSH',
url: `${ApiTable.getPush}`,
msg: { error: '获取推送配置列表失败' },
reducer: { name: '' }
});
}
export function postPush (data) {//添加/编辑成员
let msg = ''
if (data) {
msg = data.msg
}
return (dispatch) =>
basicAction({
type: "post",
dispatch: dispatch,
data,
actionType: "POST_PUSH",
url: `${ApiTable.postPush}`,
msg: { option: msg }, //添加/编辑成员
reducer: { name: "" },
});
}
export function getOrganizationUsers () { //获取全部未删除用户
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_ORGANIZATION_USERS',
url: `${ApiTable.getOrganizationUsers}`,
msg: { error: '获取全部未删除用户' },
reducer: { name: '' }
});
}
export function getProjectPoms (query) {//获取已绑定项目
return (dispatch) => basicAction({
type: "get",
dispatch: dispatch,
actionType: "GET_PROJECT_POMS",
query: query,
url: `${ApiTable.getProjectPoms}`,
msg: { option: "获取已绑定项目" },
reducer: { name: "ProjectPoms", params: { noClear: true } },
});
}
export function getProjectStructure (query) {//获取绑定项目下结构物
return (dispatch) => basicAction({
type: "get",
dispatch: dispatch,
actionType: "GET_PROJECT_STRUCTURE",
query: query,
url: `${ApiTable.getProjectStructure}`,
msg: { option: "获取绑定项目下结构物" },
reducer: { name: "ProjectStructure", params: { noClear: true } },
});
}
export function getProjectStatus (query) {//获取项目状态列表
return (dispatch) => basicAction({
type: "get",
dispatch: dispatch,
actionType: "GET_PROJECT_STATUS",
query: query,
url: `${ApiTable.getProjectStatus}`,
msg: { option: "获取项目状态列表" },
reducer: { name: "ProjectStatus", params: { noClear: true } },
});
}

14
web/client/src/sections/service/actions/emPush.jsx

@ -1,14 +0,0 @@
'use strict';
import { ApiTable, basicAction } from '$utils'
export function getPush () { //
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_PUSH',
url: `${ApiTable.getPush}`,
msg: { error: '获取推送配置列表失败' },
reducer: { name: '' }
});
}

480
web/client/src/sections/service/components/pushModal.jsx

@ -1,7 +1,8 @@
import React, { useState, useRef, useEffect } from "react"; import React, { useState, useRef, useEffect } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Modal, Form } from "@douyinfe/semi-ui"; import { Modal, Form, Notification } from "@douyinfe/semi-ui";
import { IconAlertCircle } from '@douyinfe/semi-icons'; import { IconAlertCircle } from '@douyinfe/semi-icons';
import './pushModal.less'
function pushModal (props) { function pushModal (props) {
@ -12,47 +13,219 @@ function pushModal (props) {
dispatch, dispatch,
pepList, pepList,
actions, actions,
adminEdit,// pushEdit,//
editObj, editObj,
user
} = props; } = props;
const { install } = actions; const { service } = actions;
const form = useRef();// const form = useRef();//
const [disablePeople, setDisablePeople] = useState(true); // const [disablePeople, setDisablePeople] = useState(true); //
const [peopleList, setPeopleList] = useState([]); //List const [peopleList, setPeopleList] = useState([]); //List
const [departmentId, setDepartmentId] = useState(); //id const [departmentId, setDepartmentId] = useState(); //id
const [peopleId, setPeopleId] = useState(); //id const [peopleId, setPeopleId] = useState(); //id
const [abnormal, setAbnormal] = useState(false); //disable
const [usersList, setUsersList] = useState([]); //
const [structure, setStructure] = useState(true); //disable
const [projectPoms, setProjectPoms] = useState([]); //
const [projectStructure, setProjectStructure] = useState([]); //
const [timeTypeDis, setTimeTypeDis] = useState(true); //disable
const [projectStatus, setProjectStatus] = useState([]); //
// //
useEffect(() => { useEffect(() => {
if (editObj.id) { // if (editObj.id) {
let departmentList = [] // let departmentList = []
for (let i = 0; i < pepList.length; i++) { // for (let i = 0; i < pepList.length; i++) {
if (pepList[i].id == editObj.departments[0].id) { // if (pepList[i].id == editObj.departments[0].id) {
departmentList = pepList[i].users // departmentList = pepList[i].users
// }
// }
// setPeopleList(departmentList)
// setDepartmentId(editObj.departments[0].id)
// setPeopleId(editObj.pepUserId)
// setDisablePeople(false)
// }
getOrganizationUsersList()//
getProjectPomsList()//
}, []);
function getOrganizationUsersList () {//
dispatch(service.getOrganizationUsers()).then((res) => {
if (res.success) {
setUsersList(res.payload.data)
} }
})
} }
setPeopleList(departmentList) function getProjectPomsList () {//
setDepartmentId(editObj.departments[0].id) dispatch(service.getProjectPoms()).then((res) => {
setPeopleId(editObj.pepUserId) if (res.success) {
setDisablePeople(false) setProjectPoms(res.payload?.data?.rows)
}
})
}
function getProjectStructureList (value) {//
dispatch(service.getProjectStructure({ pomsProjectId: value })).then((res) => {
if (res.success) {
let mylist = []
for (let i = 0; i < res.payload?.data.length; i++) {
mylist.push(res.payload?.data[i].id)
}
setProjectStructure(res.payload?.data)
form.current.setValue('strucId', mylist)
form.current.validate(['strucId','timeType'])
setStructure(false)
setTimeTypeDis(false)
}
})
}
function getProjectStatusList () {//
dispatch(service.getProjectStatus()).then((res) => {
if (res.success) {
setProjectStatus(res.payload?.data)
let mylist = []
for (let i = 0; i < res.payload?.data.length; i++) {
mylist.push(res.payload?.data[i].id)
}
form.current.setValue('timeType', mylist)
form.current.validate(['strucId','timeType'])
}
})
} }
}, []);
function handleOk () { function handleOk () {
// //
form.current form.current
.validate() .validate()
.then((values) => { .then((values) => {
if (adminEdit) { if (pushEdit) {
dispatch(install.deteleOrganizationAdmin({id:editObj.id,msg:''})).then( dispatch(service.postPush({ pushId: pushId, pepUserId: values.pepUserId, msg: '编辑推送配置' })).then((res) => {//(PEP)
dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '修改管理员' })).then((res) => {//(PEP)
if (res.success) { if (res.success) {
close(); close();
} }
}) })
)
} }
else { else {
dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '新增管理员' })).then((res) => {//(PEP) let obj = JSON.parse(JSON.stringify(values))
if (obj.timeType[0] == null) {
obj.timeType = []
}
let regu = /^[0-9]*[1-9][0-9]*$/;
if (obj.tactics == 'immediately') {
if (obj.interval1) {
if (regu.test(obj.interval1)) {
if (obj.interval1 <= 1440) {
obj.tacticsParams = {
interval: obj.interval1
}
delete obj.interval1
delete obj.interval2
delete obj.interval3
delete obj.deviceProportion
} else {
Notification.error({
content: '即时推送时间不能大于1440分钟',
duration: 2,
})
}
} else {
Notification.error({
content: '即时推送时间应为正整数',
duration: 2,
})
}
} else {
Notification.error({
content: '即时推送时间应为正整数',
duration: 2,
})
}
}
else if (obj.tactics == 'continue') {
if (obj.interval2) {
if (regu.test(obj.interval2)) {
if (obj.interval2 <= 1440) {
obj.tacticsParams = {
interval: obj.interval2
}
delete obj.interval1
delete obj.interval2
delete obj.interval3
delete obj.deviceProportion
} else {
Notification.error({
content: '持续时长推送时间不能大于1440分钟',
duration: 2,
})
}
} else {
Notification.error({
content: '持续时长推送时间应为正整数',
duration: 2,
})
}
} else {
Notification.error({
content: '持续时长推送时间应为正整数',
duration: 2,
})
}
}
else {
if (regu.test(obj.interval3) && regu.test(obj.deviceProportion)) {
if (obj.interval3 <= 720 && obj.deviceProportion <= 100) {
obj.tacticsParams = {
interval: obj.interval3,
deviceProportion: obj.deviceProportion
}
delete obj.interval1
delete obj.interval2
delete obj.interval3
delete obj.deviceProportion
} else if (obj.interval3 <= 720 && obj.deviceProportion > 100) {
Notification.error({
content: '异常率推送异常率不能超过100%',
duration: 2,
})
} else if (obj.interval3 > 720 && obj.deviceProportion <= 100) {
Notification.error({
content: '异常率推送时间不能超过720小时',
duration: 2,
})
} else {
Notification.error({
content: '异常率推送时间不能超过720小时',
duration: 2,
})
Notification.error({
content: '异常率推送异常率不能超过100%',
duration: 2,
})
}
} else if (regu.test(obj.interval3) && !regu.test(obj.deviceProportion)) {
Notification.error({
content: '异常率推送异常率应为正整数',
duration: 2,
})
} else if (!regu.test(obj.interval3) && regu.test(obj.deviceProportion)) {
Notification.error({
content: '异常率推送时间应为正整数',
duration: 2,
})
} else {
Notification.error({
content: '异常率推送异常率应为正整数',
duration: 2,
})
Notification.error({
content: '异常率推送时间应为正整数',
duration: 2,
})
}
}
console.log('obj', obj);
dispatch(service.postPush({ ...obj, msg: '新增推送配置' })).then((res) => {//(PEP)
if (res.success) { if (res.success) {
close(); close();
} }
@ -67,60 +240,122 @@ function pushModal (props) {
return ( return (
<> <>
<Modal <Modal
title="管理员设置" title={pushEdit ? "修改推送策略" : '新增推送策略'}
okText="确定" okText="确定"
cancelText="取消" cancelText="取消"
visible={visible} visible={visible}
onOk={handleOk} onOk={handleOk}
width={607} width={860}
onCancel={handleCancel} onCancel={handleCancel}
> >
<div style={{ margin: "0px 25px" }}> <div>
<div style={{ width: '100%', height: 32, background: '#F4F8FF', borderRadius: 2, border: '1px solid #C7E1FF', display: 'flex', alignItems: 'center' }}>
<div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}><IconAlertCircle style={{ color: '#0F7EFB' }} /></div>
<div style={{ color: '#0F7EFB', fontSize: 12, marginLeft: 8 }}>成员成为管理员后拥有平台所有权限和项目成员的普通角色会被禁用</div>
</div>
<Form <Form
allowEmpty allowEmpty
labelPosition="left" labelPosition="left"
labelAlign="right" labelAlign="right"
labelWidth="90px" labelWidth="120px"
onValueChange={(values, field) => { onValueChange={(values, field) => {
console.log('values', values);
for (var key in field) { for (var key in field) {
if (key == 'department') { if (key == 'tactics') {
if (values.department >= 0) { if (values.tactics == 'abnormal_rate') {
let departmentList = [] form.current.setValue('alarmType', undefined)
for (let i = 0; i < pepList.length; i++) { setAbnormal(true)
if (pepList[i].id == values.department) { }
departmentList = pepList[i].users else {
setAbnormal(false)
} }
} }
setPeopleList(departmentList) if (key == 'pomsProjectId') {
setDisablePeople(false) getProjectStructureList(values.pomsProjectId)//
form.current.setValue('pepUserId', undefined); for (let i = 0; i < projectPoms.length; i++) {
if (values.pomsProjectId == projectPoms[i].id) {
if (projectPoms[i].pepProjectId) {
getProjectStatusList()//
} }
else { else {
setPeopleList([]) setProjectStatus([{ construction_status: 'POMS', id: null }])
setDisablePeople(true) form.current.setValue('timeType', [null])
form.current.setValue('pepUserId', undefined); form.current.validate()
}
} }
} }
} }
}
// for (var key in field) {
// if (key == 'department') {
// if (values.department >= 0) {
// let departmentList = []
// for (let i = 0; i < pepList.length; i++) {
// if (pepList[i].id == values.department) {
// departmentList = pepList[i].users
// }
// }
// setPeopleList(departmentList)
// setDisablePeople(false)
// form.current.setValue('pepUserId', undefined);
// }
// else {
// setPeopleList([])
// setDisablePeople(true)
// form.current.setValue('pepUserId', undefined);
// }
// }
// }
}} }}
getFormApi={(formApi) => (form.current = formApi)} getFormApi={(formApi) => (form.current = formApi)}
> >
<div style={{ color: '#4A4A4A', fontSize: 14, fontWeight: 600, marginLeft: 6 }}>
项目信息配置
</div>
<div>
<Form.Input
field="name"
label='策略名称:'
style={{ width: 695 }}
// initValue={editObj?.name || ""}
placeholder="请输入策略名称"
showClear
rules={[{ required: true, message: "请输入策略名称" }]} />
</div>
<div> <div>
<Form.Select <Form.Select
label="选择部门:" label="请选择项目:"
field="department" field="pomsProjectId"
placeholder="请选择部门" placeholder="请选择项目"
style={{ width: 417 }} style={{ width: 695 }}
rules={[{ required: true, message: "请选择部门" }]} rules={[{ required: true, message: "请选择项目" }]}
initValue={departmentId || ""} // initValue={departmentId || ""}
filter
>
{
projectPoms.map((item, index) => {
return (
<Form.Select.Option key={index} value={item.id}>
{item.pepProjectName || item.name}
</Form.Select.Option>
)
})
}
</Form.Select>
</div>
<div>
<Form.Select
label="请选择结构物:"
field="strucId"
placeholder="请选择结构物"
style={{ width: 695 }}
rules={[{ required: true, message: "请选择结构物" }]}
// initValue={departmentId || ""}
disabled={structure}
filter
multiple
maxTagCount={3}
showClear showClear
> >
{ {
pepList.map((item, index) => { projectStructure.map((item, index) => {
return ( return (
<Form.Select.Option key={index} value={item.id}> <Form.Select.Option key={index} value={item.id}>
{item.name} {item.name}
@ -130,21 +365,136 @@ function pushModal (props) {
} }
</Form.Select> </Form.Select>
</div> </div>
<div className='pushInput'>
<Form.RadioGroup
field="tactics"
label='推送策略配置:'
type='card'
direction='horizontal'
rules={[{ required: true, message: '请选择推送策略' }]}>
<Form.Radio
value='immediately'
extra={
<span style={{ fontSize: 13 }}>
发现在
<Form.Input
field="interval1"
pure
style={{ width: 60, height: 20, color: '#1859C1' }}
initValue={editObj?.interval || "10"}
// rules={[{ pattern: "^[0-9]*[1-9][0-9]*$", message: "" }]}
/>
分钟内有告警源新增则通过信鸽服务发送一条通知信息
</span>
}
style={{ width: 198 }}>
即时推送机制
</Form.Radio>
<Form.Radio
value='continue'
extra={
<span style={{ fontSize: 13 }}>
告警源持续产生时间超过
<Form.Input
field="interval2"
pure
style={{ width: 60, height: 20, color: '#1859C1' }}
initValue={editObj?.interval || "10"}
// rules={[{ pattern: "^[0-9]*[1-9][0-9]*$", message: "" }]}
/>
分钟则通过信鸽服务发送一条通知信息
</span>
}
style={{ width: 198 }}>
持续时长推送机制
</Form.Radio>
<Form.Radio
value='abnormal_rate'
extra={
<span style={{ fontSize: 13 }}>
异常设备数量达到项目或结构物内设备总数量的
<Form.Input
field="deviceProportion"
pure
style={{ width: 60, height: 20, color: '#1859C1' }}
initValue={editObj?.deviceProportion || "40"}
// rules={[{ pattern: "^[0-9]*[1-9][0-9]*$", message: "" }]}
/>
%且持续时长超过
<Form.Input
field="interval3"
pure
style={{ width: 60, height: 20, color: '#1859C1' }}
initValue={editObj?.interval || "2"}
// rules={[{ pattern: "^[0-9]*[1-9][0-9]*$", message: "" }]}
/>
小时则通过信鸽服务发送一条通知信息
</span>
}
style={{ width: 260 }}>
异常率推送机制
</Form.Radio>
</Form.RadioGroup>
</div>
<div> <div>
<Form.CheckboxGroup
label="监听问题模块:"
field="alarmType"
style={{ width: 695 }}
rules={[{ required: true, message: "监听问题模块" }]}
// initValue={departmentId || ""}
direction='horizontal'
showClear
>
<Form.Checkbox value="data_outages">数据中断</Form.Checkbox>
<Form.Checkbox value="data_exception">数据异常</Form.Checkbox>
<Form.Checkbox value="strategy_hit" disabled={abnormal}>策略命中</Form.Checkbox>
<Form.Checkbox value="video_exception">视频异常</Form.Checkbox>
<Form.Checkbox value="app_exception" disabled={abnormal}>应用异常</Form.Checkbox>
<Form.Checkbox value="device_exception">设备异常</Form.Checkbox>
</Form.CheckboxGroup>
</div>
<div style={{ color: '#4A4A4A', fontSize: 14, fontWeight: 600, marginLeft: 6 }}>
接收信息配置
</div>
<div style={{ display: 'flex' }}>
<Form.Select
label="通知时效:"
field="timeType"
placeholder="请选择通知时效"
style={{ width: 285 }}
rules={[{ required: true, message: "请选择通知时效" }]}
// initValue={departmentId || ""}
disabled={timeTypeDis}
multiple
maxTagCount={3}
>
{
projectStatus.map((item, index) => {
return (
<Form.Select.Option key={index} value={item.id}>
{item.construction_status}
</Form.Select.Option>
)
})
}
</Form.Select>
<Form.Select <Form.Select
label="选择人员:" label="接收人:"
field="pepUserId" field="receiverPepUserId"
placeholder="请选择人员" placeholder="请选择接收人"
style={{ width: 417 }} style={{ width: 285 }}
rules={[{ required: true, message: "请选择人员" }]} rules={[{ required: true, message: "请选择接收人" }]}
initValue={peopleId || ""} initValue={[user.id]}
filter
multiple
maxTagCount={3}
showClear showClear
disabled={disablePeople}
> >
{ {
peopleList.map((item, index) => { usersList.map((item, index) => {
return ( return (
<Form.Select.Option key={item.id} value={item.id}> <Form.Select.Option key={index} value={item.id}>
{item.name} {item.name}
</Form.Select.Option> </Form.Select.Option>
) )
@ -152,6 +502,26 @@ function pushModal (props) {
} }
</Form.Select> </Form.Select>
</div> </div>
<div style={{ marginLeft: 120, color: '#005ABD', fontSize: 14 }}>
不在项目节点的通知策略会自动失效.
</div>
<div style={{ marginTop: 20 }}>
<Form.RadioGroup
field="disable"
pure
direction='horizontal'
style={{ display: 'flex', justifyContent: 'space-evenly' }}
initValue={false || false}
rules={[{ required: true, }]}>
<Form.Radio value={false}>
启用
</Form.Radio>
<Form.Radio value={true}
style={{ marginLeft: 120 }}>
禁用
</Form.Radio>
</Form.RadioGroup>
</div>
</Form> </Form>
</div> </div>
</Modal > </Modal >

10
web/client/src/sections/service/components/pushModal.less

@ -0,0 +1,10 @@
.pushInput{
.semi-input-wrapper-default{
height: 20px !important;
line-height: 20px !important;
}
.semi-input-default{
height: 20px !important;
line-height: 20px !important;
}
}

333
web/client/src/sections/service/containers/emPush.jsx

@ -1,9 +1,9 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Skeleton, Button, Pagination, Form, Popconfirm, Table } from '@douyinfe/semi-ui'; import { Skeleton, Button, Pagination, Form, Popconfirm, Table, Tooltip } from '@douyinfe/semi-ui';
import { SkeletonScreen, } from "$components"; import { SkeletonScreen, } from "$components";
import moment from "moment"; import moment from "moment";
import pushModal from '../components/pushModal' import PushModal from '../components/pushModal'
import '../style.less' import '../style.less'
import { Setup } from "$components"; import { Setup } from "$components";
// import { set } from 'nprogress'; // import { set } from 'nprogress';
@ -18,9 +18,8 @@ const EmPush = (props) => {
const [query, setQuery] = useState({ limit: 10, page: 0 }); // const [query, setQuery] = useState({ limit: 10, page: 0 }); //
const [limits, setLimits] = useState()// const [limits, setLimits] = useState()//
const mylimits = useRef(); // const mylimits = useRef(); //
const [selected, setSelected] = useState([]) //
const [pushModal, setPushModal] = useState(false) // const [pushModal, setPushModal] = useState(false) //
const [systemEdit, setSystemEdit] = useState(false) // const [pushEdit, setPushEdit] = useState(false) //
const [anxincloudList, setAnxincloudList] = useState([]) // const [anxincloudList, setAnxincloudList] = useState([]) //
const [peplist, setPeplist] = useState([]) //PEP const [peplist, setPeplist] = useState([]) //PEP
const [appList, setAppList] = useState([]) // const [appList, setAppList] = useState([]) //
@ -31,20 +30,39 @@ const EmPush = (props) => {
const [appArr, setAppArr] = useState([]) // const [appArr, setAppArr] = useState([]) //
const [bindId, setBindId] = useState() //id const [bindId, setBindId] = useState() //id
const [tableKey, setTableKey] = useState([]) //id const [tableKey, setTableKey] = useState([]) //id
const [projectStatus, setProjectStatus] = useState([]); //
const page = useRef(query.page);// const page = useRef(query.page);//
const EMPUSH = "empush"; const EMPUSH = "empush";
const tableList = [// const tableList = [//
{ {
title: '推送信息', title: '推送信息',
list: [ list: [
{ name: "策略类型", value: "pushWay" }, { name: "策略名称", value: "name" },
{ name: "推送机制", value: "noticeWay" }, { name: "创建时间", value: "createTime" },
{ name: "监听设备数量", value: "monitorCount" }, { name: "关联项目", value: "projectName" },
{ name: "累计推送次数", value: "logCount" }, { name: "接收人", value: "receiverPepUser" },
{ name: "推送方式", value: "pushType" },
{ name: "监听问题模块", value: "alarmType" },
{ name: "生效项目节点", value: "timeType" },
{ name: "推送机制", value: "tactics" },
{ name: "启用状态", value: "disable" },
{ name: "推送次数", value: "pushCount" },
] ]
}, },
]; ];
const alarmTypeObj = {
data_outages: '数据中断',
data_exception: '数据异常',
strategy_hit: '策略命中',
video_exception: '视频异常',
app_exception: '应用异常',
device_exception: '设备异常',
}
const tacticsObj = {
immediately: '即时推送机制',
continue: '持续时长推送机制',
abnormal_rate: '异常率推送机制',
}
function handleRow (record, index) {// function handleRow (record, index) {//
@ -63,31 +81,32 @@ const EmPush = (props) => {
const [tableData, setTableData] = useState([]) // const [tableData, setTableData] = useState([]) //
useEffect(() => { useEffect(() => {
attribute(); // dispatch(service.getPush(query)).then((res) => {//
dispatch(service.getPush(query)).then((res) => {//
// console.log('res.payload.datares.payload.data',res.payload.data); // console.log('res.payload.datares.payload.data',res.payload.data);
// setAnxincloudList(res.payload.data) // setAnxincloudList(res.payload.data)
}) // })
// dispatch(install.getProjectPmanage(query)).then((res) => {//PEP // dispatch(install.getProjectPmanage(query)).then((res) => {//PEP
// setPeplist(res.payload.data) // setPeplist(res.payload.data)
// }) // })
// dispatch(install.getProjectAppList(query)).then((res) => {// // dispatch(install.getProjectAppList(query)).then((res) => {//
// setAppList(res.payload.data) // setAppList(res.payload.data)
// }) // })
getProjectStatusList()
localStorage.getItem(EMPUSH) == null localStorage.getItem(EMPUSH) == null
? localStorage.setItem( ? localStorage.setItem(
EMPUSH, EMPUSH,
JSON.stringify(['pushWay','noticeWay','logCount','monitorCount']) JSON.stringify(['name', 'createTime', 'projectName', 'receiverPepUser', 'alarmType', 'timeType', 'tactics', 'disable'])
) )
: ""; : "";
attribute();
}, []) }, [])
useEffect(() => { useEffect(() => {
// getProjectPomsList(); getPushList();
}, [query]); }, [query]);
function getProjectPomsList () { function getPushList () {
// dispatch(install.getProjectPoms(query)).then((res) => {// dispatch(service.getPush(query)).then((res) => {//
// if (res.success) { if (res.success) {
// let mytableData = JSON.parse(JSON.stringify(res.payload.data.rows)); // let mytableData = JSON.parse(JSON.stringify(res.payload.data.rows));
// let mytableKey = [] // let mytableKey = []
// for (let index = 0; index < mytableData.length; index++) { // for (let index = 0; index < mytableData.length; index++) {
@ -96,28 +115,20 @@ const EmPush = (props) => {
// } // }
// setTableKey(mytableKey) // setTableKey(mytableKey)
// setTableData(mytableData) // setTableData(mytableData)
// setLimits(res.payload.data.count) setTableData(res.payload.data)
// mylimits.current = res.payload.data.rows.length setLimits(res.payload.data.length)
// } mylimits.current = res.payload.data.length
// })
} }
const [columns, setColumns] = useState([// })
{
title: "策略编号",
dataIndex: "index",
key: 'index',
render: (text, r, index) => {
return index + 1;
},
},
{
title: '策略名称',
dataIndex: "pepProjectName",
key: 'pepProjectName',
render: (_, row) => {
return row.pepProjectName
} }
}, function getProjectStatusList () {//
dispatch(service.getProjectStatus()).then((res) => {
if (res.success) {
setProjectStatus(res.payload?.data)
}
})
}
const [columns, setColumns] = useState([//
{ {
title: "操作", title: "操作",
width: "20%", width: "20%",
@ -158,7 +169,7 @@ const EmPush = (props) => {
// setAppArr(myapparr) // setAppArr(myapparr)
// setAnxincloudArr(myanxinArr) // setAnxincloudArr(myanxinArr)
// setBindId(row.id) // setBindId(row.id)
// setSystemEdit(true) // setPushEdit(true)
// }} // }}
> >
修改 修改
@ -186,12 +197,6 @@ const EmPush = (props) => {
}, },
}, },
]) ])
const rowSelection = {
selectedRowKeys: selected,
onChange: (selectedRowKeys, selectedRows) => {
setSelected(selectedRows.map(v => v.key))
},
}
// //
function attribute () { function attribute () {
const arr = localStorage.getItem(EMPUSH) const arr = localStorage.getItem(EMPUSH)
@ -200,59 +205,184 @@ const EmPush = (props) => {
const column = [ const column = [
{ {
title: "关联项目", title: '策略名称',
dataIndex: "noticeWay", dataIndex: "name",
key: "noticeWay", key: 'name',
render: (_, r, index) => { render: (_, row) => {
return r.noticeWay; return row.name
}, }
}, },
{ {
title: "创建时间", title: "创建时间",
dataIndex: "logCount", dataIndex: "createTime",
key: "logCount", key: "createTime",
render: (_, r, index) => { render: (_, r, index) => {
return (r.logCount + '次') return moment(r.createTime).format('YYYY-MM-DD HH:mm:ss');
}, },
}, },
{ {
title: "接收人", title: '关联项目',
dataIndex: "monitorCount", dataIndex: "projectName",
key: "monitorCount", key: "projectName",
render: (_, row) => {
let anxinerror = false
let anxinerrorArr = ''
if (row.pomsProject.del == true) {
anxinerror = true
anxinerrorArr = row.pomsProject.pepProject?.projectName || row.pomsProject.name
}
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
{
anxinerror ? (
<Tooltip content={anxinerrorArr + ',项目已在【项企PEP】或【映射关系】中被删除,请重选项目!'}>
<div style={{ marginRight: 5 }}>
<img src="/assets/images/install/risk.png" alt="" style={{ height: 24, width: 24, }} />
</div>
</Tooltip>) : ('')
}
{
<div className='myseparator' style={{ display: 'flex', alignItems: 'center' }}>
<Tooltip content={row.pomsProject.pepProject?.projectName || row.pomsProject.name}>
<div style={{ width: row.pomsProject?.pepProject?.projectName?.length > 7 || row.pomsProject?.name?.length > 7 ? '112px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: row.pomsProject.del ? '#F93920' : '' }}>
{row.pomsProject.pepProject?.projectName || row.pomsProject.name}
</div>
</Tooltip>
</div>
}
</div>
)
}
},
{
title: '接收人',
dataIndex: "receiverPepUser",
key: 'receiverPepUser',
render: (_, row) => {
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
{
row.receiverPepUser.map((item, index) => {
return (
<div className='myseparator' key={index} style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ display: index > 1 ? 'none' : '', color: '#005ABD' }}>
{item.name}
</div>
<div className='separator' style={{ width: 1, height: 12, border: '1px solid #DCDEE0', margin: '0px 10px', display: index > 0 ? 'none' : '' }}></div>
</div>
)
})
}
{
row.receiverPepUser.length > 2 ? (
<Tooltip content={
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
{
row.receiverPepUser.map((item, index) => {
return (
<div key={index} style={{ color: '#005ABD' }}>
{item.name},
</div>
)
})
}
</div>
} trigger="click" style={{ lineHeight: 2 }}>
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 8, cursor: "pointer", }}>
+{row.receiverPepUser.length - 2}
</div>
</Tooltip>
) : ('')
}
</div>
)
}
},
{
title: "推送方式",
dataIndex: "pushType",
key: "pushType",
render: (_, r, index) => { render: (_, r, index) => {
return r.monitorCount return '邮件通知';
}, },
}, },
{ {
title: "监听问题", title: "监听问题模块",
dataIndex: "pushWay", dataIndex: "alarmType",
key: "pushWay", key: "alarmType",
render: (_, row) => {
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
{
// alarmTypeObj
row.alarmType.map((item, index) => {
return (
<div className='myseparator' key={index} style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ display: index > 1 ? 'none' : '' }}>
{alarmTypeObj[item]}
</div>
<div className='separator' style={{ width: 1, height: 12, border: '1px solid #DCDEE0', margin: '0px 10px', display: index > 0 ? 'none' : '' }}></div>
</div>
)
})
}
{
row.alarmType.length > 2 ? (
<Tooltip content={
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
{
row.alarmType.map((item, index) => {
return (
<div key={index} >
{alarmTypeObj[item]},
</div>
)
})
}
</div>
} trigger="click" style={{ lineHeight: 2 }}>
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 8, cursor: "pointer", }}>
+{row.alarmType.length - 2}
</div>
</Tooltip>
) : ('')
}
</div>
)
}
},
{
title: "生效项目节点",
dataIndex: "timeType",
key: "timeType",
render: (_, r, index) => { render: (_, r, index) => {
return r.pushWay=='email' ? '邮件通知' : '短信通知'; // projectStatus
return r.timeType[0]
}, },
}, },
{ {
title: "通知时效", title: "推送机制",
dataIndex: "text1", dataIndex: "tactics",
key: "text1", key: "tactics",
render: (_, r, index) => { render: (_, r, index) => {
return r.text1 return tacticsObj[r.tactics]
}, },
}, },
{ {
title: "启用状态", title: "启用状态",
dataIndex: "text2", dataIndex: "disable",
key: "text2", key: "disable",
render: (_, r, index) => { render: (_, r, index) => {
return r.text2 // projectStatus
return r.disable
}, },
}, },
{ {
title: "推送次数", title: "推送次数",
dataIndex: "time", dataIndex: "pushCount",
key: "time", key: "pushCount",
render: (_, r, index) => { render: (_, r, index) => {
return r.time return r.pushCount
}, },
}, },
]; ];
@ -260,7 +390,7 @@ const EmPush = (props) => {
let colum = column.filter((item) => { let colum = column.filter((item) => {
return item.key === arr[i]; return item.key === arr[i];
}); });
columns.splice(i + 2, 0, colum[0]); columns.splice(columns.length - 1, 0, colum[0]);
} }
setSetupp(columns); setSetupp(columns);
} }
@ -354,13 +484,7 @@ const EmPush = (props) => {
}} }}
onClick={() => { onClick={() => {
setPushModal(true); setPushModal(true);
setSystemEdit(false) setPushEdit(false);
setPepProjectId()
setPepname()
setAnxinDelete([])
setAppArr([])
setAnxincloudArr()
setBindId()
}} }}
> >
添加推送策略 添加推送策略
@ -368,7 +492,7 @@ const EmPush = (props) => {
</div> </div>
</div> </div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, marginTop: 5 }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, marginTop: 5 }}>
<div style={{ fontSize: 12, color: '#8B8B8B' }}>预留预留预留预留预留预留预留预留预留预留预留预留预留预留预留预留预留预留预留预留预留预留</div> <div style={{ fontSize: 12, color: '#8B8B8B' }}>EM推送提供对映射关系组的项目结构物问题的监听和通知服务支持对设备异常率问题持续时间即时响应等策略定义的动态推送</div>
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<Skeleton <Skeleton
@ -384,7 +508,6 @@ const EmPush = (props) => {
empty="暂无数据" empty="暂无数据"
pagination={false} pagination={false}
onRow={handleRow} onRow={handleRow}
rowSelection={rowSelection}
/> />
</Skeleton> </Skeleton>
<div <div
@ -395,35 +518,6 @@ const EmPush = (props) => {
}} }}
> >
<div> <div>
<div style={{ display: 'inline-block', lineHeight: '30px', fontSize: 13, color: 'gray' }}>勾选<span style={{ fontWeight: 400, color: '#0F7EFB', }}> {selected.length} </span>信息</div>
<Button onClick={() => {
if (selected.length == tableKey.length) {
setSelected([])
}
else {
setSelected(tableKey)
}
}} style={{ fontSize: 13, width: 93, height: 24, borderRadius: '1px', background: '#FFFFFF', border: '1px solid #0F7EFB', color: '#0F7EFB', fontWeight: 400, margin: '0 10px' }}>
{mylimits.current == selected.length ? '取消全选' : '全选'}
</Button>
<Popconfirm
title="删除后对应的项目全局将无法进入和显示,对应的信鸽服务也会被禁用"
arrowPointAtCenter={false}
showArrow={true}
position="topRight"
onConfirm={() => {
// dispatch(install.deleteProjectBind({ bindId: selected.join(','), msg: '' })).then(() => {
// if (page.current > 0 && mylimits.current == selected.length) {
// setQuery({ limit: 10, page: page.current - 1 })
// } else {
// setQuery({ limit: 10, page: page.current })
// }
// setSelected([])
// })
}}
>
<Button type='primary' theme='solid' style={{ fontSize: 13, width: 93, height: 24, borderRadius: '1px', border: '1px solid #0F7EFB', color: '#FFFFFF', fontWeight: 400, }}>批量删除</Button>
</Popconfirm>
</div> </div>
<div style={{ display: 'flex', }}> <div style={{ display: 'flex', }}>
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}> <span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
@ -438,36 +532,26 @@ const EmPush = (props) => {
onChange={(currentPage, pageSize) => { onChange={(currentPage, pageSize) => {
setQuery({ limit: pageSize, page: currentPage - 1 }); setQuery({ limit: pageSize, page: currentPage - 1 });
page.current = currentPage - 1 page.current = currentPage - 1
setSelected([])
}} }}
/> />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* {//映射关系弹 {//
pushModal ? pushModal ?
<PushModal <PushModal
visible={true} visible={true}
anxincloudList={anxincloudList} pushEdit={pushEdit}
systemEdit={systemEdit}
peplist={peplist}
appList={appList}
pepname={pepname}
anxincloudArr={anxincloudArr}
pepProjectId={pepProjectId}
anxinDelete={anxinDelete}
appArr={appArr}
bindId={bindId}
cancel={() => { cancel={() => {
setPushModal(false); setPushModal(false);
}} }}
close={() => { close={() => {
setPushModal(false); setPushModal(false);
getProjectPomsList() getPushList()
}} > }} >
</PushModal> : '' </PushModal> : ''
} */} }
{setup ? ( {setup ? (
<Setup <Setup
tableType={EMPUSH} tableType={EMPUSH}
@ -475,7 +559,6 @@ const EmPush = (props) => {
close={() => { close={() => {
setSetup(false); setSetup(false);
attribute(); attribute();
// setcameraSetup(false);
}} }}
/> />
) : ( ) : (

4
web/client/src/utils/webapi.js

@ -50,6 +50,10 @@ export const ApiTable = {
//服务-信鸽服务 //服务-信鸽服务
getPush: "push", //获取推送配置列表 getPush: "push", //获取推送配置列表
postPush: "push", //新增/编辑推送配置
getOrganizationUsers: "organization/users", //获取全部未删除用户
getProjectStructure: "project/structure", //获取绑定项目下结构物
getProjectStatus: "project/status", //获取项目状态列表
//控制台 //控制台
consoleToollink: 'console/toollink', //常用工具 consoleToollink: 'console/toollink', //常用工具

Loading…
Cancel
Save