|
|
|
@ -10,6 +10,7 @@ import moment from "moment"; |
|
|
|
|
|
|
|
import '../style.less' |
|
|
|
import { request } from 'screenfull'; |
|
|
|
import { useRef } from 'react'; |
|
|
|
|
|
|
|
const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
let route = match.url.substring(match.url.lastIndexOf("/") + 1, match.url.length) |
|
|
|
@ -30,6 +31,11 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
const [checkPop, setCheckPop] = useState(false) //查看弹框是否显现 |
|
|
|
const [alarmId, setAlarmId] = useState(false) //查看alarmId |
|
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 }) //分页 |
|
|
|
const [tableData, setTableData] = useState([]) //表格数据 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const TextAreaApi = useRef('') |
|
|
|
|
|
|
|
const tableType = { dataLnterrupt: 'dataLnterrupt', dataAbnormal: 'dataAbnormal', strategyHit: 'strategyHit', videoAbnormal: 'videoAbnormal', useAbnormal: 'useAbnormal', deviceAbnormal: 'deviceAbnormal' } |
|
|
|
const statistic = { dataLnterrupt: '数据中断统计', dataAbnormal: '数据异常统计', strategyHit: '策略命中统计', videoAbnormal: '视频异常统计', useAbnormal: '应用异常统计', deviceAbnormal: '设备异常统计' } |
|
|
|
@ -133,16 +139,16 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
{ name: '离线', value: '11' }] |
|
|
|
}], |
|
|
|
common: { |
|
|
|
name: '持续时间', |
|
|
|
name: '告警时间', |
|
|
|
field: 'time' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
//表格设置信息 |
|
|
|
const tableList = { |
|
|
|
dataLnterrupt: ['index', 'projectName', 'StructureName', 'SourceName', 'AlarmGroupUnit', 'AlarmCodeName', 'createTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime',], |
|
|
|
dataAbnormal: ['index', 'projectName', 'StructureName', 'SourceName', 'type', 'alarmType', 'createTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime'], |
|
|
|
strategyHit: ['index', 'projectName', 'StructureName', 'SourceName', 'Strategy', 'State', 'createTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime'], |
|
|
|
dataLnterrupt: ['index', 'projectName', 'StructureName', 'SourceName', 'AlarmGroupUnit', 'AlarmCodeName', 'sustainTime', 'createTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime',], |
|
|
|
dataAbnormal: ['index', 'projectName', 'StructureName', 'SourceName', 'type', 'alarmType', 'createTime', 'sustainTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime'], |
|
|
|
strategyHit: ['index', 'projectName', 'StructureName', 'SourceName', 'Strategy', 'State', 'createTime', 'sustainTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime'], |
|
|
|
videoAbnormal: ['index', 'projectName', 'StructureName', 'SourceName', '19', '20', '21', '22', 'AlarmContent', '111', 'createTime', 'updateTime', 'confirm', 'confirmTime', '56115'], |
|
|
|
useAbnormal: ['index', 'projectName', 'appName', 'url', 'type', 'alarmContent', 'createTime', 'updateTime', 'confirm', 'confirmTime'], |
|
|
|
deviceAbnormal: ['index', 'projectName', 'StructureName', 'SourceName', '19', 'alarmContent', '21', 'AlarmContent', 'AlarmCodeName', 'createTime', 'updateTime', 'confirm', 'confirmTime'], |
|
|
|
@ -171,7 +177,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
name: '项目名称', sort: 3, value: 'projectName', render: (_, r, index) => { |
|
|
|
return <> |
|
|
|
{r.projectName?.map((v, index) => { |
|
|
|
return v.name ? <div key={r.id + r.appName + index} style={{ width: 176, }}> |
|
|
|
return v.name ? <div key={r.id + r.appName + index} style={{ width: 176, height: 18, }}> |
|
|
|
{OutHidden({ |
|
|
|
number: 7, |
|
|
|
name: v.name |
|
|
|
@ -199,7 +205,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
} |
|
|
|
if (route == 'strategyHit') data = '测点' |
|
|
|
return <div style={{ width: 136, display: 'flex', justifyContent: 'space-between' }}> |
|
|
|
<div style={{ display: "inline-block", width: 84, }}>{r.SourceName}</div> |
|
|
|
<div style={{ display: "inline-block", width: 84, lineHeight: "20px" }}>{r.SourceName}</div> |
|
|
|
<div style={{ display: "inline-block", width: 44, height: 18, lineHeight: '18px', textAlign: "center", border: '1px solid #0F7EFB', fontWeight: 400, color: '#0F7EFB', fontSize: 12 }}>{data}</div> |
|
|
|
</div> |
|
|
|
} |
|
|
|
@ -213,12 +219,23 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
{ |
|
|
|
name: '告警等级', sort: 13, value: 'CurrentLevel', render: (_, r, index) => { |
|
|
|
let data = { 1: '一级', 2: '二级', 3: '三级' } |
|
|
|
return data[r.CurrentLevel] |
|
|
|
return <div style={{ width: 52 }}> |
|
|
|
<img src={`/assets/images/problem/${'CurrentLevel' + r.CurrentLevel}.png`} style={{ display: "inline-block", width: 18, marginRight: 6 }} /> |
|
|
|
{data[r.CurrentLevel]} |
|
|
|
</div> |
|
|
|
} |
|
|
|
}, |
|
|
|
{ name: '产生次数', sort: 19, value: 'detailCount', render: (_, r, index) => r.detailCount + '次' }, |
|
|
|
{ name: '确认信息', sort: 20, value: 'confirm', render: (_, r, index) => r.confirm }, |
|
|
|
{ name: '确认/恢复时间', sort: 21, value: 'confirmTime', }, |
|
|
|
{ |
|
|
|
name: '持续时间', sort: 19.5, value: 'sustainTime', render: (_, r, index) => { |
|
|
|
console.log(r.updateTime); |
|
|
|
let time = moment(r.updateTime).diff(moment(r.createTime), 'seconds') |
|
|
|
// console.log(time); |
|
|
|
return time < 60 ? '< 1分钟' : time > 3600 ? Math.floor(time / 3600) + '小时' + Math.floor((time - Math.floor(time / 3600) * 3600) / 60) + '分钟' : Math.floor((time - Math.floor(time / 3600) * 3600) / 60) + '分钟' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '异常信息', sort: 14, value: 'alarmContent', render: (_, r, index) => { |
|
|
|
return <>{r.alarmContent} |
|
|
|
@ -247,17 +264,19 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
{ name: '在离线', sort: 18, value: '56115' }, |
|
|
|
{ |
|
|
|
name: '操作', sort: 25, value: 'text', render: (_, r, index) => { |
|
|
|
return <div style={{ width: 190 }}> |
|
|
|
{r.State || r.State == 0 ? r.State >= 0 && r.State < 3 ? <Button theme='borderless' onClick={() => { |
|
|
|
return <div style={{ width: 195 }}> |
|
|
|
{r.State || r.State == 0 ? r.State >= 0 && r.State < 3 ? |
|
|
|
<Button theme='borderless' style={{ width: 65 }} onClick={() => { |
|
|
|
setConfirm(true) |
|
|
|
// console.log(r) |
|
|
|
setSelected([r.key]) |
|
|
|
}}>确认</Button> : |
|
|
|
<Button theme='borderless' disabled>已确认</Button> : "" |
|
|
|
}}>确认</Button> |
|
|
|
: r.State == 3 ? |
|
|
|
<Button theme='borderless' style={{ width: 65 }} disabled>自动恢复</Button> : |
|
|
|
<Button theme='borderless' style={{ width: 65 }} disabled>已确</Button> : "" |
|
|
|
} |
|
|
|
{route ? ['dataLnterrupt', 'dataAbnormal', 'strategyHit'].includes(route) ? <> |
|
|
|
<Button theme='borderless' disabled>已派单</Button> |
|
|
|
<Button theme='borderless' onClick={() => { |
|
|
|
<Button theme='borderless' style={{ width: 65 }} disabled>已派单</Button> |
|
|
|
<Button theme='borderless' style={{ width: 65 }} onClick={() => { |
|
|
|
setCheckPop(true) |
|
|
|
setAlarmId(r.key) |
|
|
|
}}>查看</Button> |
|
|
|
@ -344,6 +363,8 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
setGenre={setGenre} |
|
|
|
query={query} |
|
|
|
setQuery={setQuery} |
|
|
|
tableData={tableData} |
|
|
|
setTableData={setTableData} |
|
|
|
/> |
|
|
|
{setup ? ( |
|
|
|
<Setup |
|
|
|
@ -377,6 +398,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
width={600} |
|
|
|
onCancel={() => setConfirm(false)} |
|
|
|
onOk={() => { |
|
|
|
|
|
|
|
if (route == 'useAbnormal') { |
|
|
|
dispatch(problem.postApiConfirm({ appAlarmId: selected, confirm: content })).then(res => { |
|
|
|
if (res.success) { |
|
|
|
@ -388,19 +410,40 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
} else if (route == 'videoAbnormal') { |
|
|
|
setConfirm(false) |
|
|
|
} else { |
|
|
|
console.log(selected); |
|
|
|
dispatch(problem.putAlarmdataConfirm({ alarmId: selected, content: content })).then(res => { |
|
|
|
if (res.success) { |
|
|
|
setConfirm(false) |
|
|
|
setQuery({ limit: query.limit, page: query.page }) |
|
|
|
TextAreaApi.current.validate().then((v) => { |
|
|
|
// console.log(selected); |
|
|
|
// dispatch(problem.putAlarmdataConfirm({ alarmId: selected, content: content })).then(res => { |
|
|
|
// if (res.success) { |
|
|
|
// setConfirm(false) |
|
|
|
let data = tableData?.map(v => { |
|
|
|
if (selected.find(vv => vv == v.key)) { |
|
|
|
return { ...v, confirm: '告警确认：' + content, confirmTime: moment().format("YYYY-MM-DD HH:mm:ss"), State: 4 } |
|
|
|
} else { |
|
|
|
return { ...v } |
|
|
|
} |
|
|
|
}) || tableData |
|
|
|
setTableData(data) |
|
|
|
setConfirm(false) |
|
|
|
// console.log(data) |
|
|
|
// setQuery({ limit: query.limit, page: query.page }) |
|
|
|
// } |
|
|
|
// }) |
|
|
|
}) |
|
|
|
} |
|
|
|
}} |
|
|
|
> |
|
|
|
<div style={{ display: 'flex', paddingLeft: 20 }}> |
|
|
|
<span style={{ display: 'inline-block', width: 78 }}>确认信息:</span> |
|
|
|
<TextArea maxCount={500} showClear onChange={(e) => setContent(e)} /> |
|
|
|
<div style={{ paddingLeft: 20 }}> |
|
|
|
<Form |
|
|
|
// onSubmit={(values) => console.log(values)} |
|
|
|
getFormApi={(formApi) => (TextAreaApi.current = formApi)} |
|
|
|
> |
|
|
|
<Form.TextArea maxCount={500} showClear |
|
|
|
label='确认信息' |
|
|
|
labelPosition="left" |
|
|
|
rules={[{ required: true, message: "请输入确认信息" }]} |
|
|
|
field='textData' |
|
|
|
onChange={(e) => setContent(e)} /> |
|
|
|
</Form> |
|
|
|
</div> |
|
|
|
</Modal> : ""} |
|
|
|
|
|
|
|
|
