巴林闲侠 2 years ago
parent
commit
2eebeaee5c
  1. BIN
      web/client/assets/images/problem/export.png
  2. BIN
      web/client/assets/images/problem/icon_POMS.png
  3. BIN
      web/client/assets/images/problem/setup.png
  4. 2
      web/client/src/sections/problem/actions/problem.jsx
  5. 88
      web/client/src/sections/problem/components/tableData.jsx
  6. 128
      web/client/src/sections/problem/containers/dataAlarm.jsx

BIN
web/client/assets/images/problem/export.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
web/client/assets/images/problem/icon_POMS.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
web/client/assets/images/problem/setup.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

2
web/client/src/sections/problem/actions/problem.jsx

@ -118,7 +118,7 @@ export function putAlarmdataConfirm (data) { //确认数据告警
data, data,
actionType: 'PUT-AIARM-DATA-CONFIRM', actionType: 'PUT-AIARM-DATA-CONFIRM',
url: `${ApiTable.putAlarmdataConfirm}`, url: `${ApiTable.putAlarmdataConfirm}`,
msg: { error: '确认数据告警' }, msg: { error: '确认数据告警失败' },
reducer: { name: '' } reducer: { name: '' }
}); });
} }

88
web/client/src/sections/problem/components/tableData.jsx

@ -21,32 +21,38 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition
useEffect(() => { useEffect(() => {
switch (route) { switch (route) {
case 'useAbnormal': case 'useAbnormal':
dispatch(problem.getAlarmLnspectionApi({})).then((res) => { // dispatch(problem.getAlarmLnspectionApi({})).then((res) => {
console.log(res.payload.data) // console.log(res.payload.data)
if (res.success) { // if (res.success) {
let typeData = { element: "元素异常", apiError: "接口报错 ", timeout: "加载超时" } // let typeData = { element: "", apiError: " ", timeout: "" }
setCount(res.payload.data?.count || 0) // setCount(res.payload.data?.count || 0)
let tableDatas = res.payload.data?.rows.map(v => ({ // let tableDatas = res.payload.data?.rows.map(v => ({
key: v.id, // key: v.id,
// serialNumber: v.serialNumber, // // serialNumber: v.serialNumber,
projectName: v.app?.projectCorrelations?.map(r => (r.name?{ name: r.name, state: '自定义' }:{ name: r.pepProject?.project_name, state: r.pepProject?.construction_status // projectName: v.app?.projectCorrelations?.map(r => (r.name ? { name: r.name, state: '' } : {
}))?.filter(c => c), // name: r.pepProject?.project_name, state: r.pepProject?.construction_status
appName: v.app?.name, // }))?.filter(c => c),
url: v.app?.url, // appName: v.app?.name,
createTime: v.createTime ? moment(v.createTime).format("YYYY-MM-DD HH:mm:ss") : "", // url: v.app?.url,
updateTime: v.updateTime ? moment(v.updateTime).format("YYYY-MM-DD HH:mm:ss") : "", // createTime: v.createTime ? moment(v.createTime).format("YYYY-MM-DD HH:mm:ss") : "",
confirmTime: v.confirmTime ? moment(v.confirmTime).format("YYYY-MM-DD HH:mm:ss") : "", // updateTime: v.updateTime ? moment(v.updateTime).format("YYYY-MM-DD HH:mm:ss") : "",
alarmContent: v.alarmContent, // confirmTime: v.confirmTime ? moment(v.confirmTime).format("YYYY-MM-DD HH:mm:ss") : "",
screenshot: v.screenshot, // alarmContent: v.alarmContent,
type: v.type ? typeData[v.type] : "", // screenshot: v.screenshot,
confirm: v.confirm, // type: v.type ? typeData[v.type] : "",
})) // confirm: v.confirm,
console.log(tableDatas); // }))
setTableData(tableDatas) // console.log(tableDatas);
} // setTableData(tableDatas)
}) // }
// })
break; break;
case 'videoAbnormal': case 'videoAbnormal':
// dispatch(problem.getAlarmDataGroup()).then((res) => {
// if (res.success) { }
// })
break; break;
default: default:
dispatch(problem.getAlarmDataGroup()).then((res) => { dispatch(problem.getAlarmDataGroup()).then((res) => {
@ -58,14 +64,14 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition
if (route == 'dataAbnormal') data = res.payload.data?.filter(v => v.desc == '数据异常') if (route == 'dataAbnormal') data = res.payload.data?.filter(v => v.desc == '数据异常')
if (route == 'strategyHit') data = res.payload.data?.filter(v => v.desc == '策略命中') if (route == 'strategyHit') data = res.payload.data?.filter(v => v.desc == '策略命中')
if (route == 'deviceAbnormal') data = res.payload.data?.filter(v => v.desc == '掉线' || v.desc == '不活跃') if (route == 'deviceAbnormal') data = res.payload.data?.filter(v => v.desc == '掉线' || v.desc == '不活跃')
console.log(data); // console.log(data);
let genreData = [] let genreData = []
data?.map(v => { data?.map(v => {
v?.unit?.map(vv => { v?.unit?.map(vv => {
genreData.push({ name: vv.name, id: vv.id }) genreData.push({ name: vv.name, value: vv.id })
}) })
}) })
// console.log(genreData); console.log(genreData);
setGenre(genreData) setGenre(genreData)
if (data && data[0]?.id) { if (data && data[0]?.id) {
dispatch(problem.getAlarmDataList({ ...query, ...search, groupId: data.map(v => v.id).join(), pepProjectId: '' })).then((res) => { dispatch(problem.getAlarmDataList({ ...query, ...search, groupId: data.map(v => v.id).join(), pepProjectId: '' })).then((res) => {
@ -75,14 +81,16 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition
let tableDatas = res.payload.data?.rows?.map(v => ({ let tableDatas = res.payload.data?.rows?.map(v => ({
key: v.AlarmId, key: v.AlarmId,
StructureName: v.StructureName, StructureName: v.StructureName,
projectName: [], projectName: v.pomsProject?.map(r => (r.name ? { name: r.name, state: 'PMOS' } : {
name: r.pepProject?.projectName, state: r.pepProject?.constructionStatus
}))?.filter(c => c),
createTime: v.StartTime ? moment(v.StartTime).format("YYYY-MM-DD HH:mm:ss") : "", createTime: v.StartTime ? moment(v.StartTime).format("YYYY-MM-DD HH:mm:ss") : "",
updateTime: v.EndTime ? moment(v.EndTime).format("YYYY-MM-DD HH:mm:ss") : "", updateTime: v.EndTime ? moment(v.EndTime).format("YYYY-MM-DD HH:mm:ss") : "",
confirmTime: v.confirmedTime ? moment(v.confirmedTime).format("YYYY-MM-DD HH:mm:ss") : "", confirmTime: v.confirmedTime ? moment(v.confirmedTime).format("YYYY-MM-DD HH:mm:ss") : "",
SourceName: v.SourceName, SourceName: v.SourceName,
AlarmGroupUnit: v.AlarmGroupUnit ? genreData.find(r => r.id == v.AlarmGroupUnit)?.name : "", AlarmGroupUnit: v.AlarmGroupUnit ? genreData.find(r => r.value == v.AlarmGroupUnit)?.name : "",
Strategy: v.AlarmGroupUnit ? genreData.find(r => r.id == v.AlarmGroupUnit)?.name : "", Strategy: v.AlarmGroupUnit ? genreData.find(r => r.value == v.AlarmGroupUnit)?.name : "",
type: v.AlarmGroupUnit ? genreData.find(r => r.id == v.AlarmGroupUnit)?.name : "", type: v.AlarmGroupUnit ? genreData.find(r => r.value == v.AlarmGroupUnit)?.name : "",
AlarmCodeName: v.AlarmCodeName, AlarmCodeName: v.AlarmCodeName,
CurrentLevel: v.CurrentLevel, CurrentLevel: v.CurrentLevel,
detailCount: v.detailCount, detailCount: v.detailCount,
@ -105,7 +113,7 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition
}, [query, search]) }, [query, search])
console.log(query);
return ( return (
<> <>
<div style={{ backgroundColor: '#FFFFFF', paddingTop: 8 }}> <div style={{ backgroundColor: '#FFFFFF', paddingTop: 8 }}>
@ -122,7 +130,7 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition
let frame = [] let frame = []
collectData[route]?.map((v, index) => { collectData[route]?.map((v, index) => {
if (index == 0) { if (index == 0) {
frame.push(<Form.InputGroup key={v.field} label={v.name + ':'} labelPosition="left" style={{ width: 203, marginRight: 10, marginBottom: 16 }}> frame.push(<Form.InputGroup key={v.field} label={v.name + ':'} labelPosition="left" style={{ width: 203, marginRight: 16, marginBottom: 16 }}>
<Form.Select style={{ width: 88 }} field='keywordTarget' initValue='source' rules={[{ required: true, message: '请选择筛选类型' }]} showClear> <Form.Select style={{ width: 88 }} field='keywordTarget' initValue='source' rules={[{ required: true, message: '请选择筛选类型' }]} showClear>
{[{ name: "告警源", value: "source" }, { name: "项目", value: "pepProject" }, { name: "结构物", value: "struc" },].map(vv => { {[{ name: "告警源", value: "source" }, { name: "项目", value: "pepProject" }, { name: "结构物", value: "struc" },].map(vv => {
return <Form.Select.Option value={vv.value} key={vv.value}>{vv.name}</Form.Select.Option> return <Form.Select.Option value={vv.value} key={vv.value}>{vv.name}</Form.Select.Option>
@ -136,7 +144,7 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition
labelPosition="left" labelPosition="left"
field={v.field} field={v.field}
key={v.field} key={v.field}
style={{ width: 116, marginRight: 10, color: "#F9F9F9", }} style={{ width: 116, marginRight: 16, color: "#F9F9F9", }}
placeholder="全部" placeholder="全部"
filter filter
showClear showClear
@ -171,7 +179,8 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "flex-end", alignItems: "flex-end",
marginRight: 10 marginRight: 20,
marginBottom: 16
}} }}
> >
<img title='导出' src="/assets/images/problem/export.png" style={{ width: 20 }} /> <img title='导出' src="/assets/images/problem/export.png" style={{ width: 20 }} />
@ -191,15 +200,16 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition
// sustainTimeStart: v.time ? moment(v.time[0]).format("YYYY-MM-DD HH:mm:ss") : "", // sustainTimeStart: v.time ? moment(v.time[0]).format("YYYY-MM-DD HH:mm:ss") : "",
// sustainTimeEnd: v.time ? moment(v.time[1]).format("YYYY-MM-DD HH:mm:ss") : "", // sustainTimeEnd: v.time ? moment(v.time[1]).format("YYYY-MM-DD HH:mm:ss") : "",
// }); // });
console.log(v.time);
setSearch({ setSearch({
state: v.state, state: v.state,
keywordTarget: v.keywordTarget, keywordTarget: v.keywordTarget,
keyword: v.keyword, keyword: v.keyword,
groupUnitId: v.groupUnitId, groupUnitId: v.groupUnitId,
sustainTimeStart: v.time ? moment(v.time[0]).format("YYYY-MM-DD HH:mm:ss") : "", sustainTimeStart: v.time && v.time.length > 0 ? moment(v.time[0]).format("YYYY-MM-DD HH:mm:ss") : "",
sustainTimeEnd: v.time ? moment(v.time[1]).format("YYYY-MM-DD HH:mm:ss") : "", sustainTimeEnd: v.time && v.time.length > 0 ? moment(v.time[1]).format("YYYY-MM-DD HH:mm:ss") : "",
}); });
setSelected([])
setQuery({ limit: 10, page: 0 }) setQuery({ limit: 10, page: 0 })
}); });
}} }}
@ -258,7 +268,7 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition
<Button onClick={() => { <Button onClick={() => {
if (checkAll) { if (checkAll) {
setSelected(tableData?.map(v => { setSelected(tableData?.map(v => {
if (!v.confirmTime) { if (!(v.State > 2)) {
return v.key return v.key
} }
})?.filter(v => v)) })?.filter(v => v))

128
web/client/src/sections/problem/containers/dataAlarm.jsx

@ -165,13 +165,13 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
// //
const columnAll = [ const columnAll = [
{ {
name: "序号", value: "index", render: (_, r, index) => { name: "序号", sort: 1, value: "index", render: (_, r, index) => {
return index + 1; return index + 1;
}, },
}, },
{ name: '问题编号', value: 'serialNumber', render: (_, r, index) => r.serialNumber }, { name: '问题编号', sort: 1, value: 'serialNumber', render: (_, r, index) => r.serialNumber },
{ {
name: '项目名称', value: 'projectName', render: (_, r, index) => { name: '项目名称', sort: 3, value: 'projectName', render: (_, r, index) => {
return <> return <>
{r.projectName?.map((v, index) => { {r.projectName?.map((v, index) => {
return <div key={r.id + r.appName + index} style={{ width: 176, }}> return <div key={r.id + r.appName + index} style={{ width: 176, }}>
@ -180,22 +180,22 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
name: v.name name: v.name
})} })}
<div style={{ <div style={{
width: 58, height: 18, background: 'linear-gradient(rgb(235, 245, 255) 0%, rgb(235, 245, 255) 0%, rgb(211, 232, 255) 100%)', width: 58, height: 18, background: v.state == 'PMOS' ? 'linear-gradient(rgb(153, 199, 221) 0%, rgb(48, 72, 252) 100%)' : 'linear-gradient(rgb(235, 245, 255) 0%, rgb(235, 245, 255) 0%, rgb(211, 232, 255) 100%)',
borderRadius: 2, display: "inline-block", marginLeft: 6 borderRadius: 2, display: "inline-block", marginLeft: 6
}}> }}>
<img src="/assets/images/install/icon_zhengque.png" style={{ display: "inline-block", width: 10 }} /> <img src={`/assets/images/install/${v.state == 'PMOS' ? 'icon_POMS' : 'icon_zhengque'}.png`} style={{ display: "inline-block", width: 10 }} />
<span style={{ display: "inline-block", width: 48, fontSize: 12, textAlign: "center" }}>{v.state}</span> <span style={{ display: "inline-block", color: v.state == 'PMOS' ? "rgb(255, 255, 255)" : "rgb(15, 126, 251)", width: 48, fontSize: 12, textAlign: "center" }}>{v.state}</span>
</div> </div>
</div> </div>
}) })
} }
</> </>
} }
}, },
{ name: '结构物名称', value: 'StructureName' }, { name: '结构物名称', sort: 4, value: 'StructureName' },
{ {
name: '告警源', value: 'SourceName', render: (_, r, index) => { name: '告警源', sort: 2, value: 'SourceName', render: (_, r, index) => {
let data = '' let data = ''
if (route == 'dataLnterrupt' || route == 'dataAbnormal') { if (route == 'dataLnterrupt' || route == 'dataAbnormal') {
data = '传感器' data = '传感器'
@ -207,47 +207,69 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
</div> </div>
} }
}, },
{ name: '中断类型', value: 'AlarmGroupUnit' }, { name: '中断类型', sort: 6, value: 'AlarmGroupUnit' },
{ name: '告警信息', value: 'AlarmContent' }, { name: '告警信息', sort: 5, value: 'AlarmContent' },
{ name: '常见原因', value: 'AlarmCodeName' }, { name: '常见原因', sort: 7, value: 'AlarmCodeName' },
{ name: '产生时间', value: 'createTime' }, { name: '产生时间', sort: 22, value: 'createTime' },
{ name: '更新时间', value: 'updateTime' }, { name: '更新时间', sort: 23, value: 'updateTime' },
{ name: '服务器地址', value: '9' }, { name: '服务器地址', sort: 12, value: '9' },
{ {
name: '告警等级', value: 'CurrentLevel', render: (_, r, index) => { name: '告警等级', sort: 13, value: 'CurrentLevel', render: (_, r, index) => {
let data = { 1: '一级', 2: '二级', 3: '三级' } let data = { 1: '一级', 2: '二级', 3: '三级' }
return data[r.CurrentLevel] return data[r.CurrentLevel]
} }
}, },
{ name: '产生次数', value: 'detailCount', render: (_, r, index) => r.detailCount + '次' }, { name: '产生次数', sort: 19, value: 'detailCount', render: (_, r, index) => r.detailCount + '次' },
{ name: '确认信息', value: 'confirm', render: (_, r, index) => r.confirm }, { name: '确认信息', sort: 20, value: 'confirm', render: (_, r, index) => r.confirm },
{ name: '确认/恢复时间', value: 'confirmTime', }, { name: '确认/恢复时间', sort: 21, value: 'confirmTime', },
{ {
name: '异常信息', value: 'alarmContent', render: (_, r, index) => { name: '异常信息', sort: 14, value: 'alarmContent', render: (_, r, index) => {
return <>{r.alarmContent} return <>{r.alarmContent}
{r.screenshot ? <img src="/assets/images/problem/anomaly.png" style={{ display: 'inline-block', width: 12 }} onClick={() => (setAnomaly(r.screenshot), setPictures(true))} /> : ""} {r.screenshot ? <img src="/assets/images/problem/anomaly.png" style={{ display: 'inline-block', width: 12 }} onClick={() => (setAnomaly(r.screenshot), setPictures(true))} /> : ""}
</> </>
} }
}, },
{ name: '异常原因', value: 'alarmType' }, { name: '异常原因', sort: 8, value: 'alarmType' },
{ name: '策略类型', value: 'Strategy' }, { name: '策略类型', sort: 6, value: 'Strategy' },
{ {
name: '命中状态', value: 'State', render: (_, r, index) => { name: '命中状态', sort: 15, value: 'State', render: (_, r, index) => {
if (r.State == 3 || r.State == 4) { if (r.State == 3 || r.State == 4) {
return '历史' return '历史'
} }
return '当前' return '当前'
} }
}, },
{ name: '位置信息', value: '19' }, { name: '位置信息', sort: 11, value: '19' },
{ name: '设备类型', value: '20' }, { name: '设备类型', sort: 6, value: '20' },
{ name: '设备厂家', value: '21' }, { name: '设备厂家', sort: 10, value: '21' },
{ name: '接入方式', value: '22' }, { name: '接入方式', sort: 9, value: '22' },
{ name: '应用名称', value: 'appName' }, { name: '应用名称', sort: 2, value: 'appName' },
{ name: 'URL地址', value: 'url' }, { name: 'URL地址', sort: 16, value: 'url' },
{ name: '异常类型', value: 'type' }, { name: '异常类型', sort: 6, value: 'type' },
{ name: '解决方案', value: '111' }, { name: '解决方案', sort: 17, value: '111' },
{ name: '在离线', value: '56115' }, { 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={() => {
setConfirm(true)
// console.log(r)
setSelected([r.key])
}}>确认</Button> :
<Button theme='borderless' disabled>已确认</Button> : ""
}
{route ? ['dataLnterrupt', 'dataAbnormal', 'strategyHit'].includes(route) ? <>
<Button theme='borderless' disabled>已派单</Button>
<Button theme='borderless' onClick={() => {
setCheckPop(true)
setAlarmId(r.key)
}}>查看</Button>
</>
: "" : ""
}
</div>
}
},
] ]
@ -265,7 +287,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
// data = ['AlarmCodeName'] // data = ['AlarmCodeName']
// data.splice(1, 0, ...arr) // data.splice(1, 0, ...arr)
// } else { // } else {
data.splice(1, 0, ...arr) data.splice(1, 0, ...arr, 'text')
// } // }
@ -275,33 +297,12 @@ 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, render: datas.render } return { title: datas.name, sort: datas.sort, dataIndex: datas.value, rowKey: datas.value, render: datas.render }
} }
}) })
// console.log(TableDisplay); TableDisplay.sort((a, b) => a.sort - b.sort)
TableDisplay.push({
title: '操作',
dataIndex: 'text',
rowKey: 'text',
render: (_, r) => {
return <div style={{ width: 190 }}>
{r.confirmTime ? <Button theme='borderless' disabled>已确认</Button> :
<Button theme='borderless' onClick={() => (setConfirm(true), setSelected([r.id]))}>确认</Button>
}
{route ? ['dataLnterrupt', 'dataAbnormal', 'strategyHit'].includes(route) ? <>
<Button theme='borderless' disabled>已派单</Button>
<Button theme='borderless' onClick={() => {
setCheckPop(true)
setAlarmId(r.key)
}}>查看</Button>
</>
: "" : ""
}
</div>
}
})
// console.log(TableDisplay); // console.log(TableDisplay);
// console.log(setup); // console.log(setup);
setExhibition(TableDisplay) setExhibition(TableDisplay)
@ -319,18 +320,10 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
// console.log(selected);
const distinguish = (route) => {
switch (route) {
case value:
break;
default:
break;
}
}
return ( return (
<div style={{ minWidth: 1000 }}> <div style={{ minWidth: 1000 }}>
{/* 滞留提醒 */} {/* 滞留提醒 */}
@ -352,6 +345,8 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
selected={selected} selected={selected}
setSelected={setSelected} setSelected={setSelected}
setGenre={setGenre} setGenre={setGenre}
query={query}
setQuery={setQuery}
/> />
{setup ? ( {setup ? (
<Setup <Setup
@ -396,6 +391,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
} else if (route == 'videoAbnormal') { } else if (route == 'videoAbnormal') {
setConfirm(false) setConfirm(false)
} else { } else {
console.log(selected);
dispatch(problem.putAlarmdataConfirm({ alarmId: selected, content: content })).then(res => { dispatch(problem.putAlarmdataConfirm({ alarmId: selected, content: content })).then(res => {
if (res.success) { if (res.success) {
setConfirm(false) setConfirm(false)
@ -406,7 +402,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
}} }}
> >
<div style={{ display: 'flex', paddingLeft: 20 }}> <div style={{ display: 'flex', paddingLeft: 20 }}>
<span style={{ display: 'inline-block', width: 78 }}>确认信息:</span> <span style={{ display: 'inline-block', width: 78 }}>确认信息:</span>
<TextArea maxCount={500} showClear onChange={(e) => setContent(e)} /> <TextArea maxCount={500} showClear onChange={(e) => setContent(e)} />
</div> </div>
</Modal> : ""} </Modal> : ""}

Loading…
Cancel
Save