|
|
@ -1,11 +1,14 @@ |
|
|
import React, { useEffect, useState } from 'react' |
|
|
import React, { useEffect, useState } from 'react' |
|
|
import { connect } from 'react-redux' |
|
|
import { connect } from 'react-redux' |
|
|
import { IconAlertCircle } from '@douyinfe/semi-icons' |
|
|
import { IconAlertCircle } from '@douyinfe/semi-icons' |
|
|
|
|
|
import { Button, Form, Modal, Skeleton, Pagination, TextArea } from "@douyinfe/semi-ui"; |
|
|
import Statistics from '../components/statistics' |
|
|
import Statistics from '../components/statistics' |
|
|
import TableData from '../components/tableData' |
|
|
import TableData from '../components/tableData' |
|
|
import { Setup } from "$components"; |
|
|
import { Setup, OutHidden } from "$components"; |
|
|
|
|
|
import moment from "moment"; |
|
|
|
|
|
|
|
|
import '../style.less' |
|
|
import '../style.less' |
|
|
|
|
|
import { request } from 'screenfull'; |
|
|
|
|
|
|
|
|
const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
|
|
|
|
|
@ -14,7 +17,14 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
const [collect, setCollect] = useState([]) //搜索结构 |
|
|
const [collect, setCollect] = useState([]) //搜索结构 |
|
|
const [setup, setSetup] = useState(false); //表格设置是否显现 |
|
|
const [setup, setSetup] = useState(false); //表格设置是否显现 |
|
|
const [tableSetup, setTableSetup] = useState([]); //单一表格设置信息 |
|
|
const [tableSetup, setTableSetup] = useState([]); //单一表格设置信息 |
|
|
const [exhibition, setExhibition] = useState([]); //单一表格展现信息 |
|
|
const [exhibition, setExhibition] = useState([]); //表格结构 |
|
|
|
|
|
const [anomaly, setAnomaly] = useState(); //单条异常对应的图片 |
|
|
|
|
|
const [pictures, setPictures] = useState(false); //单条异常对应的图片是否显示 |
|
|
|
|
|
const [confirm, setConfirm] = useState(false); //表格确认弹框 |
|
|
|
|
|
const [ifBulk, setIfBulk] = useState(false); //是否批量确认 |
|
|
|
|
|
const [content, setContent] = useState(false); //确认内容 |
|
|
|
|
|
const [selected, setSelected] = useState([]) //表格被勾选项 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const tableType = { dataLnterrupt: 'dataLnterrupt', dataAbnormal: 'dataAbnormal', strategyHit: 'strategyHit', videoAbnormal: 'videoAbnormal', useAbnormal: 'useAbnormal', deviceAbnormal: 'deviceAbnormal' } |
|
|
const tableType = { dataLnterrupt: 'dataLnterrupt', dataAbnormal: 'dataAbnormal', strategyHit: 'strategyHit', videoAbnormal: 'videoAbnormal', useAbnormal: 'useAbnormal', deviceAbnormal: 'deviceAbnormal' } |
|
|
const statistic = { dataLnterrupt: '数据中断统计', dataAbnormal: '数据异常统计', strategyHit: '策略命中统计', videoAbnormal: '视频异常统计', useAbnormal: '应用异常统计', deviceAbnormal: '设备异常统计' } |
|
|
const statistic = { dataLnterrupt: '数据中断统计', dataAbnormal: '数据异常统计', strategyHit: '策略命中统计', videoAbnormal: '视频异常统计', useAbnormal: '应用异常统计', deviceAbnormal: '设备异常统计' } |
|
|
@ -110,13 +120,13 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
{ name: '历史', value: '22' }] |
|
|
{ name: '历史', value: '22' }] |
|
|
}], |
|
|
}], |
|
|
useAbnormal: [ // 应用异常(useAbnormal) |
|
|
useAbnormal: [ // 应用异常(useAbnormal) |
|
|
{ name: '搜索', field: '1' }, |
|
|
{ name: '搜索', field: 'errType' }, |
|
|
{ |
|
|
{ |
|
|
name: '异常类型', field: '2', |
|
|
name: '异常类型', field: '2', |
|
|
data: [ |
|
|
data: [ |
|
|
{ name: '接口报错', value: '11' }, |
|
|
{ name: '接口报错', value: 'apiError ' }, |
|
|
{ name: '加载超时', value: '22' }, |
|
|
{ name: '加载超时', value: 'timeout' }, |
|
|
{ name: '元素异常', value: '33' }] |
|
|
{ name: '元素异常', value: 'element' }] |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
name: '异常状态', field: '3', |
|
|
name: '异常状态', field: '3', |
|
|
@ -152,40 +162,74 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
|
|
|
|
|
//表格设置信息 |
|
|
//表格设置信息 |
|
|
const tableList = { |
|
|
const tableList = { |
|
|
dataLnterrupt: ['1', '2', '3', '4', '6', '9', '7', '5', '10', '8', '11', '12', '13', '14'], |
|
|
dataLnterrupt: ['projectName', '2', '3', '4', '6', '9', 'createTime', '5', '10', 'updateTime', '11', 'confirm', 'confirmTime', '14'], |
|
|
dataAbnormal: ['1', '2', '3', '4', '15', '16', '9', '7', '5', '10', '8', '11', '12', '13'], |
|
|
dataAbnormal: ['projectName', '2', '3', '4', 'alarmContent', '16', '9', 'createTime', '5', '10', 'updateTime', '11', 'confirm', 'confirmTime'], |
|
|
strategyHit: ['1', '2', '3', '17', '18', '7', '5', '10', '8', '11', '12', '13'], |
|
|
strategyHit: ['projectName', '2', '3', '17', '18', 'createTime', '5', '10', 'updateTime', '11', 'confirm', 'confirmTime'], |
|
|
videoAbnormal: ['1', '2', '3', '19', '20', '21', '22', '5', '6', '7', '8', '12', '13'], |
|
|
videoAbnormal: ['projectName', '2', '3', '19', '20', '21', '22', '5', '6', 'createTime', 'updateTime', 'confirm', 'confirmTime'], |
|
|
useAbnormal: ['1', '23', '24', '15', '25', '7', '8', '12', '13'], |
|
|
useAbnormal: ['projectName', 'appName', 'url', 'type', 'alarmContent', 'createTime', 'updateTime', 'confirm', 'confirmTime'], |
|
|
deviceAbnormal: ['1', '2', '3', '19', '15', '21', '5', '6', '7', '8', '12', '13'], |
|
|
deviceAbnormal: ['projectName', '2', '3', '19', 'alarmContent', '21', '5', '6', 'createTime', 'updateTime', 'confirm', 'confirmTime'], |
|
|
} |
|
|
} |
|
|
//表格默认配置信息 |
|
|
//表格默认配置信息 |
|
|
const columns = { |
|
|
const columns = { |
|
|
dataLnterrupt: ['0', '1', '2', '3', '4', '5', '6', '7', '8',], |
|
|
dataLnterrupt: ['serialNumber', 'projectName', '2', '3', '4', '5', '6', 'createTime', 'updateTime',], |
|
|
dataAbnormal: ['0', '1', '2', '3', '15', '5', '6', '7', '8'], |
|
|
dataAbnormal: ['serialNumber', 'projectName', '2', '3', 'alarmContent', '5', '6', 'createTime', 'updateTime'], |
|
|
strategyHit: ['0', '1', '2', '3', '17', '5', '10', '11', '8'], |
|
|
strategyHit: ['serialNumber', 'projectName', '2', '3', '17', '5', '10', '11', 'updateTime'], |
|
|
videoAbnormal: ['0', '1', '2', '3', '21', '20', '5', '7', '8'], |
|
|
videoAbnormal: ['serialNumber', 'projectName', '2', '3', '21', '20', '5', 'createTime', 'updateTime'], |
|
|
useAbnormal: ['0', '1', '23', '24', '15', '25', '7', '8'], |
|
|
useAbnormal: ['serialNumber', 'appName', 'projectName', 'url', 'type', 'alarmContent', 'createTime', 'updateTime'], |
|
|
deviceAbnormal: ['0', '1', '2', '3', '15', '19', '5', '7', '8'], |
|
|
deviceAbnormal: ['serialNumber', 'projectName', '2', '3', 'alarmContent', '19', '5', 'createTime', 'updateTime'], |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//所有表格信息 |
|
|
//所有表格信息 |
|
|
const columnAll = [ |
|
|
const columnAll = [ |
|
|
{ name: '问题编号', value: '0' }, |
|
|
{ name: '问题编号', value: 'serialNumber', render: (_, r, index) => r.serialNumber }, |
|
|
{ name: '项目名称', value: '1' }, |
|
|
{ |
|
|
|
|
|
name: '项目名称', value: 'projectName', render: (_, r, index) => { |
|
|
|
|
|
return <> |
|
|
|
|
|
{r.projectName.map((v, index) => { |
|
|
|
|
|
let width |
|
|
|
|
|
let name = v |
|
|
|
|
|
switch (r.projectName?.length) { |
|
|
|
|
|
case 1: |
|
|
|
|
|
if (v.length > 25) width = 358 |
|
|
|
|
|
break; |
|
|
|
|
|
case 2: |
|
|
|
|
|
if (v.length > 12) width = 173 |
|
|
|
|
|
break; |
|
|
|
|
|
default: |
|
|
|
|
|
if (v.length > 7) width = 112 |
|
|
|
|
|
break; |
|
|
|
|
|
} |
|
|
|
|
|
return (<div key={r.id + r.appName + index} style={{ display: 'inline-block', height: 20 }}> |
|
|
|
|
|
{index > 0 ? <span style={{ width: 1, height: 12, border: '1px solid #DCDEE0', margin: '3px 8px', display: 'inline-block', }}></span> : ""} |
|
|
|
|
|
{OutHidden({ width, name })} |
|
|
|
|
|
</div>) |
|
|
|
|
|
|
|
|
|
|
|
})} |
|
|
|
|
|
</> |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
{ name: '结构物名称', value: '2' }, |
|
|
{ name: '结构物名称', value: '2' }, |
|
|
{ name: '告警源', value: '3' }, |
|
|
{ name: '告警源', value: '3' }, |
|
|
{ name: '中断类型', value: '4' }, |
|
|
{ name: '中断类型', value: '4' }, |
|
|
{ name: '告警信息', value: '5' }, |
|
|
{ name: '告警信息', value: '5' }, |
|
|
{ name: '常见原因', value: '6' }, |
|
|
{ name: '常见原因', value: '6' }, |
|
|
{ name: '产生时间', value: '7' }, |
|
|
{ name: '产生时间', value: 'createTime' }, |
|
|
{ name: '更新时间', value: '8' }, |
|
|
{ name: '更新时间', value: 'updateTime' }, |
|
|
{ name: '服务器地址', value: '9' }, |
|
|
{ name: '服务器地址', value: '9' }, |
|
|
{ name: '告警等级', value: '10' }, |
|
|
{ name: '告警等级', value: '10' }, |
|
|
{ name: '产生次数', value: '11' }, |
|
|
{ name: '产生次数', value: '11' }, |
|
|
{ name: '确认信息', value: '12' }, |
|
|
{ name: '确认信息', value: 'confirm', render: (_, r, index) => r.confirm }, |
|
|
{ name: '确认/恢复时间', value: '13' }, |
|
|
{ name: '确认/恢复时间', value: 'confirmTime', }, |
|
|
{ name: '项目阶段', value: '14' }, |
|
|
{ name: '项目阶段', value: '14' }, |
|
|
{ name: '异常类型', value: '15' }, |
|
|
{ |
|
|
|
|
|
name: '异常信息', value: 'alarmContent', render: (_, r, index) => { |
|
|
|
|
|
return <>{r.alarmContent} |
|
|
|
|
|
{r.screenshot ? <img src="/assets/images/problem/anomaly.png" style={{ display: 'inline-block', width: 12 }} onClick={() => (setAnomaly(r.screenshot), setPictures(true))} /> : ""} |
|
|
|
|
|
</> |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
{ name: '异常原因', value: '16' }, |
|
|
{ name: '异常原因', value: '16' }, |
|
|
{ name: '策略类型', value: '17' }, |
|
|
{ name: '策略类型', value: '17' }, |
|
|
{ name: '命中状态', value: '18' }, |
|
|
{ name: '命中状态', value: '18' }, |
|
|
@ -193,9 +237,14 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
{ name: '设备类型', value: '20' }, |
|
|
{ name: '设备类型', value: '20' }, |
|
|
{ name: '设备厂家', value: '21' }, |
|
|
{ name: '设备厂家', value: '21' }, |
|
|
{ name: '接入方式', value: '22' }, |
|
|
{ name: '接入方式', value: '22' }, |
|
|
{ name: '应用名称', value: '23' }, |
|
|
{ name: '应用名称', value: 'appName' }, |
|
|
{ name: 'URL地址', value: '24' }, |
|
|
{ name: 'URL地址', value: 'url' }, |
|
|
{ name: '异常信息', value: '25' }, |
|
|
{ |
|
|
|
|
|
name: '异常类型', value: 'type', render: (_, r, index) => { |
|
|
|
|
|
let data = { element: '元素异常', apiError: '接口报错', timeout: '加载超时' } |
|
|
|
|
|
return data[r.type] |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
] |
|
|
] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -208,9 +257,9 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
if (route) { |
|
|
if (route) { |
|
|
let setup = tableList[route].map(v => columnAll.find(vv => v == vv.value)) |
|
|
let setup = tableList[route].map(v => columnAll.find(vv => v == vv.value)) |
|
|
|
|
|
|
|
|
let data = ['0'] |
|
|
let data = ['serialNumber'] |
|
|
if (tableType[route] == 'dataAbnormal') { |
|
|
if (tableType[route] == 'dataAbnormal') { |
|
|
data = ['0', '6'] |
|
|
data = ['serialNumber', '6'] |
|
|
data.splice(1, 0, ...arr) |
|
|
data.splice(1, 0, ...arr) |
|
|
} else { |
|
|
} else { |
|
|
data.splice(1, 0, ...arr) |
|
|
data.splice(1, 0, ...arr) |
|
|
@ -222,12 +271,23 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
let TableDisplay = data.map(v => { |
|
|
let TableDisplay = data.map(v => { |
|
|
let datas = columnAll.find(vv => v == vv.value) |
|
|
let datas = columnAll.find(vv => v == vv.value) |
|
|
if (datas) { |
|
|
if (datas) { |
|
|
return { title: datas.name, dataIndex: datas.value, rowKey: datas.value } |
|
|
return { title: datas.name, dataIndex: datas.value, rowKey: datas.value, render: datas.render } |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}) |
|
|
}) |
|
|
|
|
|
TableDisplay.push({ |
|
|
// console.log(TableDisplay); |
|
|
title: '操作', |
|
|
|
|
|
dataIndex: 'text', |
|
|
|
|
|
rowKey: 'text', |
|
|
|
|
|
render: (_, r) => { |
|
|
|
|
|
return <> |
|
|
|
|
|
{r.confirmTime ? <Button theme='borderless' disabled>已确认</Button> : |
|
|
|
|
|
<Button theme='borderless' onClick={() => (setConfirm(true), setSelected([r.id]))}>确认</Button> |
|
|
|
|
|
} |
|
|
|
|
|
</> |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
console.log(TableDisplay); |
|
|
// console.log(setup); |
|
|
// console.log(setup); |
|
|
setExhibition(TableDisplay) |
|
|
setExhibition(TableDisplay) |
|
|
setTableSetup([{ list: setup }]) |
|
|
setTableSetup([{ list: setup }]) |
|
|
@ -262,7 +322,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
<div> |
|
|
<div> |
|
|
{abnormalLenght > 0 ? <div style={{ height: 30, fontSize: 12, display: 'flex' }}><IconAlertCircle /><div>当前滞留5个工单即将超时，请尽快处理！</div></div> : ""} |
|
|
{abnormalLenght > 0 ? <div style={{ height: 30, fontSize: 12, display: 'flex' }}><IconAlertCircle /><div>当前滞留5个工单即将超时，请尽快处理！</div></div> : ""} |
|
|
</div> |
|
|
</div> |
|
|
{/* <Statistics |
|
|
<Statistics |
|
|
route={route} |
|
|
route={route} |
|
|
tableType={tableType} |
|
|
tableType={tableType} |
|
|
statistic={statistic} |
|
|
statistic={statistic} |
|
|
@ -272,7 +332,11 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
collectData={collectData} |
|
|
collectData={collectData} |
|
|
setSetup={setSetup} |
|
|
setSetup={setSetup} |
|
|
exhibition={exhibition} |
|
|
exhibition={exhibition} |
|
|
/> */} |
|
|
setConfirm={setConfirm} |
|
|
|
|
|
setIfBulk={setIfBulk} |
|
|
|
|
|
selected={selected} |
|
|
|
|
|
setSelected={setSelected} |
|
|
|
|
|
/> |
|
|
{setup ? ( |
|
|
{setup ? ( |
|
|
<Setup |
|
|
<Setup |
|
|
tableType={tableType[route] || []} |
|
|
tableType={tableType[route] || []} |
|
|
@ -286,6 +350,34 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
) : ( |
|
|
) : ( |
|
|
"" |
|
|
"" |
|
|
)} |
|
|
)} |
|
|
|
|
|
{pictures ? <Modal |
|
|
|
|
|
hasCancel={false} |
|
|
|
|
|
closable={false} |
|
|
|
|
|
visible={true} |
|
|
|
|
|
footer='' |
|
|
|
|
|
width={837} |
|
|
|
|
|
onCancel={() => setPictures(false)} |
|
|
|
|
|
> |
|
|
|
|
|
<img src={`/_file-server/${anomaly}`} |
|
|
|
|
|
style={{ width: 789, height: 359, }} |
|
|
|
|
|
/> |
|
|
|
|
|
</Modal> : ""} |
|
|
|
|
|
|
|
|
|
|
|
{confirm ? <Modal |
|
|
|
|
|
title={ifBulk ? '批量确认' : "确认"} |
|
|
|
|
|
visible={true} |
|
|
|
|
|
width={600} |
|
|
|
|
|
onCancel={() => setConfirm(false)} |
|
|
|
|
|
onOk={() => { |
|
|
|
|
|
dispatch(problem.postApiConfirm({ appAlarmId: selected, confirm: content })) |
|
|
|
|
|
setConfirm(false) |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<div style={{ display: 'flex', paddingLeft: 20 }}> |
|
|
|
|
|
<span style={{ display: 'inline-block', width: 78 }}>确认信息:</span> |
|
|
|
|
|
<TextArea maxCount={500} showClear onChange={(e) => setContent(e)} /> |
|
|
|
|
|
</div> |
|
|
|
|
|
</Modal> : ""} |
|
|
</div> |
|
|
</div> |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
|
|
