|
|
|
@ -34,6 +34,8 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
const [alarmId, setAlarmId] = useState(false) //查看alarmId |
|
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 }) //分页 |
|
|
|
const [tableData, setTableData] = useState([]) //表格数据 |
|
|
|
const [videoModal, setVideoModal] = useState(false) //视频播放弹框 |
|
|
|
const [videoData, setVideoData] = useState({}) //视频播放参数 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -57,6 +59,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
attribute(tableType[route], route); |
|
|
|
}, []) |
|
|
|
|
|
|
|
// console.log(selected); |
|
|
|
|
|
|
|
//搜索结构 |
|
|
|
const collectData = { |
|
|
|
@ -109,19 +112,19 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
{ name: '历史', value: 'histroy' }] |
|
|
|
}], |
|
|
|
useAbnormal: [ // 应用异常(useAbnormal) |
|
|
|
{ name: '搜索', field: 'errType' }, |
|
|
|
{ name: '搜索', field: 'keyword' }, |
|
|
|
{ |
|
|
|
name: '异常类型', field: '2', |
|
|
|
name: '异常类型', field: 'errType', |
|
|
|
data: [ |
|
|
|
{ name: '接口报错', value: 'apiError ' }, |
|
|
|
{ name: '加载超时', value: 'timeout' }, |
|
|
|
{ name: '元素异常', value: 'element' }] |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '异常状态', field: '3', |
|
|
|
name: '异常状态', field: 'confirmState', |
|
|
|
data: [ |
|
|
|
{ name: '当前', value: '11' }, |
|
|
|
{ name: '历史', value: '22' }] |
|
|
|
{ name: '当前', value: 'unconfirmed' }, |
|
|
|
{ name: '历史', value: 'confirmd' }] |
|
|
|
}], |
|
|
|
deviceAbnormal: [ // 设备告警(deviceAbnormal) |
|
|
|
{ name: '搜索', field: '1' }, |
|
|
|
@ -151,18 +154,18 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
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', 'platform', 'AlarmContent', '111', 'createTime', 'updateTime', 'confirm', 'confirmTime', 'camerOnline'], |
|
|
|
videoAbnormal: ['index', 'projectName', 'StructureName', 'SourceName', 'station', 'cameraKindId', 'venderName', 'cameraSerialNo', 'cameraChannelNo', 'platform', 'AlarmContent', 'resolve', 'createTime', 'updateTime', 'confirm', 'confirmTime', 'camerOnline'], |
|
|
|
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'], |
|
|
|
deviceAbnormal: ['index', 'projectName', 'StructureName', 'SourceName', 'station', 'alarmContent', 'venderName', 'AlarmContent', 'AlarmCodeName', 'createTime', 'updateTime', 'confirm', 'confirmTime'], |
|
|
|
} |
|
|
|
//表格默认配置信息 |
|
|
|
const columns = { |
|
|
|
dataLnterrupt: ['projectName', 'StructureName', 'SourceName', 'AlarmGroupUnit', 'AlarmContent', 'AlarmCodeName', 'createTime', 'updateTime',], |
|
|
|
dataAbnormal: ['projectName', 'StructureName', 'SourceName', 'AlarmContent', 'AlarmCodeName', 'createTime', 'updateTime'], |
|
|
|
strategyHit: ['projectName', 'StructureName', 'SourceName', 'Strategy', 'AlarmContent', 'CurrentLevel', 'detailCount', 'updateTime'], |
|
|
|
videoAbnormal: ['projectName', 'StructureName', 'SourceName', '21', '20', 'AlarmContent', 'createTime', 'updateTime'], |
|
|
|
videoAbnormal: ['projectName', 'StructureName', 'SourceName', 'venderName', 'cameraKindId', 'AlarmContent', 'createTime', 'updateTime'], |
|
|
|
useAbnormal: ['appName', 'projectName', 'url', 'type', 'alarmContent', 'createTime', 'updateTime'], |
|
|
|
deviceAbnormal: ['projectName', 'StructureName', 'SourceName', 'alarmContent', '19', 'AlarmContent', 'createTime', 'updateTime'], |
|
|
|
deviceAbnormal: ['projectName', 'StructureName', 'SourceName', 'alarmContent', 'station', 'AlarmContent', 'createTime', 'updateTime'], |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -179,7 +182,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, marginBottom: 8 }}> |
|
|
|
return v.name ? <div key={r.id + v.name + index} style={{ width: 176, marginBottom: 8 }}> |
|
|
|
{OutHidden({ |
|
|
|
number: 7, |
|
|
|
name: v.name |
|
|
|
@ -194,11 +197,18 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
</div> : "" |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
</> |
|
|
|
} |
|
|
|
}, |
|
|
|
{ name: '结构物名称', sort: 4, value: 'StructureName' }, |
|
|
|
{ |
|
|
|
name: '结构物名称', sort: 4, value: 'StructureName', render: (_, r, index) => { |
|
|
|
if (route == 'videoAbnormal') { |
|
|
|
return r.StructureName?.map((v, index) => <div key={v.name + v.id} style={{ lineHeight: "22px" }}>{v.name}</div>) |
|
|
|
} else { |
|
|
|
return r.StructureName |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '告警源', sort: 2, value: 'SourceName', render: (_, r, index) => { |
|
|
|
let data = '' |
|
|
|
@ -206,18 +216,18 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
data = '传感器' |
|
|
|
} |
|
|
|
if (route == 'strategyHit') data = '测点' |
|
|
|
return r.SourceName ? <div style={{ width: 136, display: 'flex', justifyContent: 'space-between' }}> |
|
|
|
return r.SourceName ? <div style={{ width: data ? 136 : 84, display: 'flex', justifyContent: 'space-between' }}> |
|
|
|
<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> |
|
|
|
{data ? <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> : "" |
|
|
|
} |
|
|
|
}, |
|
|
|
{ name: '中断类型', sort: 6, value: 'AlarmGroupUnit' }, |
|
|
|
{ name: '告警信息', sort: 5, value: 'AlarmContent' }, |
|
|
|
{ name: '常见原因', sort: 7, value: 'AlarmCodeName' }, |
|
|
|
{ name: '产生时间', sort: 22, value: 'createTime' }, |
|
|
|
{ name: '更新时间', sort: 23, value: 'updateTime' }, |
|
|
|
{ name: '服务器地址', sort: 12, value: '9' }, |
|
|
|
{ name: '产生时间', sort: 22, value: 'createTime', render: (_, r, index) => r.createTime || '无' }, |
|
|
|
{ name: '更新时间', sort: 23, value: 'updateTime', render: (_, r, index) => r.updateTime || '无' }, |
|
|
|
// { name: '服务器地址', sort: 12, value: '9' }, |
|
|
|
{ |
|
|
|
name: '告警等级', sort: 13, value: 'CurrentLevel', render: (_, r, index) => { |
|
|
|
let data = { 1: '一级', 2: '二级', 3: '三级' } |
|
|
|
@ -230,13 +240,13 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
{ name: '产生次数', sort: 19, value: 'detailCount', render: (_, r, index) => r.detailCount + '次' }, |
|
|
|
{ |
|
|
|
name: '确认信息', sort: 20, value: 'confirm', render: (_, r, index) => { |
|
|
|
return r.State == 3 ? '无' : r.State == 4 ? r.confirm : '未确认' |
|
|
|
return r.State == 3 ? '无' : r.State == 4 ? r.confirm : r.confirm || '未确认' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ name: '确认/恢复时间', sort: 21, value: 'confirmTime', render: (_, r, index) => r.confirmTime ? r.confirmTime : "无" }, |
|
|
|
{ |
|
|
|
name: '持续时间', sort: 19.5, value: 'sustainTime', render: (_, r, index) => { |
|
|
|
console.log(r.updateTime); |
|
|
|
// 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) + '分钟' |
|
|
|
@ -259,9 +269,15 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
return '当前' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ name: '位置信息', sort: 11, value: '19' }, |
|
|
|
{ name: '设备类型', sort: 6, value: '20' }, |
|
|
|
{ name: '设备厂家', sort: 10, value: '21' }, |
|
|
|
{ name: '位置信息', sort: 11, value: 'station', render: (_, r, index) => r.station?.map(v => <div key={v.resolve + v.id} style={{ lineHeight: "22px" }}>{v.position}</div>) }, |
|
|
|
{ |
|
|
|
name: '设备类型', sort: 6, value: 'cameraKindId', render: (_, r, index) => { |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
{ name: '设备厂家', sort: 10, value: 'venderName', render: (_, r, index) => r.platform ? '未知' : r.venderName }, |
|
|
|
{ name: '通道号', sort: 10.1, value: 'cameraChannelNo' }, |
|
|
|
{ name: '系列号', sort: 10.2, value: 'cameraSerialNo' }, |
|
|
|
{ |
|
|
|
name: '接入方式', sort: 9, value: 'platform', render: (_, r, index) => { |
|
|
|
let accessType = { yingshi: "萤石云", nvr: "NVR", ipc: "IPC", cascade: "级联" } |
|
|
|
@ -271,28 +287,34 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
{ name: '应用名称', sort: 2, value: 'appName' }, |
|
|
|
{ name: 'URL地址', sort: 16, value: 'url' }, |
|
|
|
{ name: '异常类型', sort: 6, value: 'type' }, |
|
|
|
{ name: '解决方案', sort: 17, value: '111' }, |
|
|
|
{ name: '解决方案', sort: 17, value: 'resolve', render: (_, r, index) => r.resolve?.map(v => <div key={v.resolve + v.id} style={{ lineHeight: "22px" }}>{v.resolve}</div>) }, |
|
|
|
{ name: '在离线', sort: 18, value: 'camerOnline' }, |
|
|
|
{ |
|
|
|
name: '操作', sort: 25, value: 'text', render: (_, r, index) => { |
|
|
|
return <div style={{ width: 195 }}> |
|
|
|
{r.State || r.State == 0 ? r.State >= 0 && r.State < 3 ? |
|
|
|
{r.State && r.State >= 0 && r.State < 3 || route && ['videoAbnormal', 'useAbnormal'].includes(route) && !r.confirmTime ? |
|
|
|
<Button theme='borderless' style={{ width: 65 }} onClick={() => { |
|
|
|
setConfirm(true) |
|
|
|
setSelected([r.key]) |
|
|
|
}}>确认</Button> |
|
|
|
: r.State == 3 ? |
|
|
|
<Button theme='borderless' style={{ width: 65 }} disabled>自动恢复</Button> : |
|
|
|
<Button theme='borderless' style={{ width: 65 }} disabled>已确认</Button> : "" |
|
|
|
<Button theme='borderless' style={{ width: 65 }} disabled>已确认</Button> |
|
|
|
} |
|
|
|
{route ? ['dataLnterrupt', 'dataAbnormal', 'strategyHit'].includes(route) ? <> |
|
|
|
{route && ['dataLnterrupt', 'dataAbnormal', 'strategyHit'].includes(route) ? <> |
|
|
|
<Button theme='borderless' style={{ width: 65 }} disabled>已派单</Button> |
|
|
|
<Button theme='borderless' style={{ width: 65 }} onClick={() => { |
|
|
|
setCheckPop(true) |
|
|
|
setAlarmId(r.key) |
|
|
|
}}>查看</Button> |
|
|
|
</> |
|
|
|
: "" : "" |
|
|
|
: route == 'videoAbnormal' ? <> |
|
|
|
<Button theme='borderless' style={{ width: 65 }} disabled>已派单</Button> |
|
|
|
<Button theme='borderless' style={{ width: 65 }} onClick={() => { |
|
|
|
setVideoModal(true) |
|
|
|
setVideoData({ channeNo: r.cameraChannelNo, serialNo: r.cameraSerialNo, type: r.platform }) |
|
|
|
}}>播放</Button> |
|
|
|
</> : "" |
|
|
|
} |
|
|
|
</div> |
|
|
|
} |
|
|
|
@ -352,7 +374,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
route=='dataLnterrupt'|| route=='dataAbnormal'|| route=='strategyHit'? |
|
|
|
// route=='dataLnterrupt'|| route=='dataAbnormal'|| route=='strategyHit'? |
|
|
|
<div style={{ minWidth: 1000 }}> |
|
|
|
{/* 滞留提醒 */} |
|
|
|
<div> |
|
|
|
@ -412,15 +434,23 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
onOk={() => { |
|
|
|
|
|
|
|
if (route == 'useAbnormal') { |
|
|
|
TextAreaApi.current.validate().then((v) => { |
|
|
|
dispatch(problem.postApiConfirm({ appAlarmId: selected, confirm: content })).then(res => { |
|
|
|
if (res.success) { |
|
|
|
setConfirm(false) |
|
|
|
setQuery({ limit: query.limit, page: query.page }) |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
}) |
|
|
|
} else if (route == 'videoAbnormal') { |
|
|
|
TextAreaApi.current.validate().then((v) => { |
|
|
|
dispatch(problem.putAlarmVideoConfirm({ alarmId: selected, content: content })).then(res => { |
|
|
|
if (res.success) { |
|
|
|
setConfirm(false) |
|
|
|
setQuery({ limit: query.limit, page: query.page }) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} else { |
|
|
|
TextAreaApi.current.validate().then((v) => { |
|
|
|
dispatch(problem.putAlarmdataConfirm({ alarmId: selected, content: content })).then(res => { |
|
|
|
@ -457,6 +487,48 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
</div> |
|
|
|
</Modal> : ""} |
|
|
|
|
|
|
|
{videoModal ? <Modal |
|
|
|
visible={true} |
|
|
|
// videoData |
|
|
|
header={null} |
|
|
|
footer={null} |
|
|
|
size={'large'} |
|
|
|
style={{ padding: 0 }} |
|
|
|
bodyStyle={{ padding: 0 }} |
|
|
|
className="videoModal" |
|
|
|
onCancel={() => setVideoModal(false)} |
|
|
|
onOk={() => { |
|
|
|
|
|
|
|
|
|
|
|
}} |
|
|
|
> |
|
|
|
<div style={{ width: 918, height: 460, marginLeft: -24 }}> |
|
|
|
<iframe |
|
|
|
allowFullScreen |
|
|
|
src={`https://mediaconsole.ngaiot.com/video_play_cross?slideDown=true&videoObj=${encodeURIComponent(JSON.stringify({ |
|
|
|
channelNo: 1, |
|
|
|
content: ['5442542542', '452345', '234524525'], |
|
|
|
serialNo: "F61504020", |
|
|
|
type: "yingshi", |
|
|
|
yingshiToken: "at.7tj6k9mzcwmn112xag96e23tcdsta8nn-7p2qvqv6zq-1k500nr-tsd9bn01o" |
|
|
|
// type: 'cascade', |
|
|
|
// serialNo: '34020000001310000003', // 设备序列号 必须 |
|
|
|
// topSerialNo: '34020000001110000079', // 设备顶级序列号 必须 |
|
|
|
// audio: true, |
|
|
|
// highDefinition: true, |
|
|
|
// cloudControl: true, |
|
|
|
// // playUrlSd: 'wss://221.230.55.27:8082/jessica/34020000001110000079/34020000001310000003.flv', // 必须 |
|
|
|
// playUrlSd: 'wss://221.230.55.27:8082/jessica/34020000001110000075/34020000001110000073.flv', // 必须 |
|
|
|
}))}`} |
|
|
|
style={{ height: "100%", width: "100%" }} |
|
|
|
frameBorder={0} |
|
|
|
> |
|
|
|
<p>你的浏览器不支持 iframe。</p> |
|
|
|
</iframe> |
|
|
|
</div> |
|
|
|
|
|
|
|
</Modal> : ""} |
|
|
|
|
|
|
|
{checkPop ? |
|
|
|
<SideSheets |
|
|
|
alarmId={alarmId} |
|
|
|
@ -466,7 +538,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => { |
|
|
|
/> : "" |
|
|
|
} |
|
|
|
</div> |
|
|
|
:<Set /> |
|
|
|
// :<Set /> |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
|
