import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'react-redux';
import { Skeleton, Button, Pagination, Form, Popconfirm, Table, Tooltip } from '@douyinfe/semi-ui';
import { IconSearch } from '@douyinfe/semi-icons';
import { SkeletonScreen, } from "$components";
import moment from "moment";
import PushModal from '../components/pushModal'
import '../style.less'
import { Setup } from "$components";
const EmPush = (props) => {
const form = useRef();//表单
const { dispatch, actions, user, loading, socket } = props
const { service } = actions;
const [setup, setSetup] = useState(false); //表格设置是否显现
const [setupp, setSetupp] = useState([]);//实际显示的表格列表
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
const [limits, setLimits] = useState()//每页实际条数
const mylimits = useRef(); //每页实际条数
const [pushModal, setPushModal] = useState(false) //信鸽弹框
const [pushEdit, setPushEdit] = useState(false) //是否是修改
const [change, setChange] = useState(false) //是否改变
const [allTableData, setAllTableData] = useState([]) //获取到的所有表格信息
const [editObj, setEditObj] = useState({});//管理员弹框修改内容
const [projectStatus, setProjectStatus] = useState([]); //获取项目状态列表
const page = useRef(query.page);//哪一页
const EMPUSH = "empush";
const tableList = [//表格属性
{
title: '推送信息',
list: [
{ name: "关联项目", value: "projectName" },
{ name: "策略名称", value: "name" },
{ name: "创建时间", value: "createTime" },
{ 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) {//斑马条纹
// 给偶数行设置斑马纹
if (index % 2 === 0) {
return {
style: {
background: '#FAFCFF',
}
};
} else {
return {};
}
}
const [tableData, setTableData] = useState([]) //表格数据
useEffect(() => {
localStorage.getItem(EMPUSH) == null
? localStorage.setItem(
EMPUSH,
JSON.stringify(['projectName', 'name', 'createTime', 'receiverPepUser', 'alarmType', 'timeType', 'tactics', 'disable'])
)
: "";
getProjectStatusList()
getPushList(query);
}, [])
useEffect(() => {
let showTableData = JSON.parse(JSON.stringify(allTableData)).slice(query.page * query.limit, (query.page + 1) * query.limit)
setTableData(showTableData)
mylimits.current = showTableData.length
}, [change]);
function getPushList (query) {
let val = form.current.getValues()
dispatch(service.getPush({ ...val })).then((res) => {//获取已绑定项目
if (res.success) {
let mytableData = JSON.parse(JSON.stringify(res.payload.data));
for (let index = 0; index < mytableData.length; index++) {
mytableData[index].key = String(mytableData[index].id)
}
setAllTableData(mytableData)
let showTableData = mytableData.slice(query.page * query.limit, (query.page + 1) * query.limit)
setTableData(showTableData)
setQuery(query)
setLimits(res.payload.data.length)
mylimits.current = showTableData.length
}
})
}
function getProjectStatusList () {//获取项目状态列表
dispatch(service.getProjectStatus()).then((res) => {
if (res.success) {
setProjectStatus(res.payload?.data)
attribute(res.payload?.data);
}
})
}
const columns = [//表格属性
{
title: "操作",
width: "12%",
dataIndex: "text",
key: 'text',
render: (_, row) => {
return (
{row?.disable ? (
) : (
{
dispatch(service.putPushPushId({ pushId: row?.id, del: false, disable: true, msg: '更改推送配置状态' })).then(() => {
getPushList({ limit: query.limit, page: page.current });
})
}}
>
)}
{
dispatch(service.putPushPushId({ pushId: row?.id, del: true, disable: false, msg: '删除推送配置' })).then(() => {
if (page.current > 0 && mylimits.current < 2) {
getPushList({ limit: query.limit, page: page.current - 1 });
} else {
getPushList({ limit: query.limit, page: page.current });
}
})
}}
>
);
},
},
]
function expandRowRender (record, index) {
return (
结构物：
{
record.structure?.map((item, index) => {
return (
{item.name}
)
})
}
{
anxinerror ? (
) : ('')
}
{
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}
}
{
row.pomsProject?.pepProject?.projectName ? (
{
val.map((ite, idx) => {
return (
{ite.id == row.pomsProject?.pepProject.constructionStatusId ? ite.construction_status : ''}
)
})
}
) : (
)
}
{
row.receiverPepUser.map((item, index) => {
return (
1 ? 'none' : '', color: '#005ABD' }}>
{item.name}
0 ? 'none' : '' }}>
)
})
}
{
row.receiverPepUser.length > 2 ? (
{
row.receiverPepUser.map((item, index) => {
return (
{item.name},
)
})
}
+{row.receiverPepUser.length - 2}
) : ('')
}
)
}
},
{
title: "推送方式",
dataIndex: "pushType",
key: "pushType",
render: (_, r, index) => {
return '邮件通知';
},
},
{
title: "监听问题模块",
dataIndex: "alarmType",
key: "alarmType",
render: (_, row) => {
return (
{
row.alarmType.map((item, index) => {
return (
1 ? 'none' : '' }}>
{alarmTypeObj[item]}
0 ? 'none' : '' }}>
)
})
}
{
row.alarmType.length > 2 ? (
{
row.alarmType.map((item, index) => {
return (
{alarmTypeObj[item]},
)
})
}
+{row.alarmType.length - 2}
) : ('')
}
)
}
},
{
title: "生效项目节点",
dataIndex: "timeType",
key: "timeType",
render: (_, row, index) => {
return (
{
row.timeType.length > 0 ? (
row.timeType.map((item, index) => {
return (
1 ? 'none' : 'flex', alignItems: 'center'
}}>
{
val.map((ite, idx) => {
return (
{ite.id == item ? ite.construction_status : ''}
)
})
}
)
})
) : (
)
}
{
row.timeType.length > 2 ? (
{
row.timeType.map((item, index) => {
return (
{
val.map((ite, idx) => {
return (
{ite.id == item ? ite.construction_status : ''}
)
})
},
)
})
}
+{row.timeType.length - 2}
) : ('')
}
)
},
},
{
title: "推送机制",
dataIndex: "tactics",
key: "tactics",
render: (_, r, index) => {
return tacticsObj[r.tactics]
},
},
{
title: "启用状态",
dataIndex: "disable",
key: "disable",
render: (_, row, index) => {
let enableType = ''
if (row.disable) {
enableType = '禁用'
}
else {
if (row.timeType.length > 0) {
for (let i = 0; i < row.timeType.length; i++) {
if (row.timeType[i] == row.pomsProject?.pepProject?.constructionStatusId) {
enableType = '已生效'
break;
} else {
enableType = '未生效'
}
}
}
else {
enableType = '已生效'
}
}
return (
{enableType}
)
},
},
{
title: "推送次数",
dataIndex: "pushCount",
key: "pushCount",
render: (_, r, index) => {
return r.pushCount + '次'
},
},
];
for (let i = 0; i < arr.length; i++) {
let colum = column.filter((item) => {
return item.key === arr[i];
});
columns.splice(columns.length - 1, 0, colum[0]);
}
setSetupp(columns);
}
return (
<>
setSetup(true)} />
EM推送提供对映射关系组的项目、结构物问题的监听和通知服务，支持对设备异常率、问题持续时间、即时响应等策略定义的动态推送。
s)}
dataSource={tableData}
bordered={false}
hideExpandedColumn={false}
empty="暂无数据"
expandedRowRender={expandRowRender}
pagination={false}
onRow={handleRow}
/>
共{limits}条信息
{
setQuery({ limit: pageSize, page: currentPage - 1 });
page.current = currentPage - 1
setChange(!change)
}}
/>
{//推送配置弹框
pushModal ?
{
setPushModal(false);
}}
close={() => {
setPushModal(false);
getPushList(query)
}} >
: ''
}
{setup ? (
{
setSetup(false);
attribute(projectStatus);
}}
/>
) : (
""
)}
)
}
function mapStateToProps (state) {
const { auth, global, getPush } = state;
return {
loading: getPush.isRequesting,
user: auth.user,
actions: global.actions,
// members: members.data,
};
}
export default connect(mapStateToProps)(EmPush);
