|
|
@ -5,23 +5,31 @@ import { SkeletonScreen, } from "$components"; |
|
|
import moment from "moment"; |
|
|
import moment from "moment"; |
|
|
import { validate } from "schema-utils"; |
|
|
import { validate } from "schema-utils"; |
|
|
import { emit } from "superagent"; |
|
|
import { emit } from "superagent"; |
|
|
|
|
|
import qs from "qs"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition, pepProjectId, |
|
|
const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition, pepProjectId, |
|
|
selected, setSelected, setIfBulk, setConfirm, setGenre, query, setQuery, tableData, setTableData }) => { |
|
|
selected, setSelected, setIfBulk, setConfirm, genre, setGenre, query, setQuery, tableData, setTableData, location }) => { |
|
|
const { problem } = actions |
|
|
const { problem } = actions |
|
|
|
|
|
|
|
|
const [count, setCount] = useState(0) // |
|
|
const [count, setCount] = useState(0) // |
|
|
const [search, setSearch] = useState({}) //查询 |
|
|
// const [search, setSearch] = useState({}) |
|
|
const [checkAll, setCheckAll] = useState(true) //查询 |
|
|
const [checkAll, setCheckAll] = useState(true) //查询 |
|
|
|
|
|
|
|
|
const api = useRef(); |
|
|
const api = useRef(); |
|
|
|
|
|
const search = useRef({ |
|
|
|
|
|
state: '', keywordTarget: '', keyword: '', kindId: '', groupUnitId: '', |
|
|
|
|
|
errType: '', confirmState: '', onlineState: '', sustainTimeStart: '', sustainTimeEnd: '' |
|
|
|
|
|
}) |
|
|
|
|
|
const kindName = useRef() |
|
|
|
|
|
const groupId = useRef() |
|
|
let title = { dataLnterrupt: "数据中断详情", dataAbnormal: "数据异常详情", strategyHit: "策略命中详情", videoAbnormal: "视频异常详情", useAbnormal: "应用异常详情", deviceAbnormal: "设备异常详情" } |
|
|
let title = { dataLnterrupt: "数据中断详情", dataAbnormal: "数据异常详情", strategyHit: "策略命中详情", videoAbnormal: "视频异常详情", useAbnormal: "应用异常详情", deviceAbnormal: "设备异常详情" } |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
switch (route) { |
|
|
switch (route) { |
|
|
case 'useAbnormal': |
|
|
case 'useAbnormal': |
|
|
dispatch(problem.getAlarmLnspectionApi({ ...search, pepProjectId: pepProjectId })).then((res) => { |
|
|
dispatch(problem.getAlarmLnspectionApi({ ...search.current, pepProjectId: pepProjectId })).then((res) => { |
|
|
if (res.success) { |
|
|
if (res.success) { |
|
|
let typeData = { element: "元素异常", apiError: "接口报错 ", timeout: "加载超时" } |
|
|
let typeData = { element: "元素异常", apiError: "接口报错 ", timeout: "加载超时" } |
|
|
let tableDatas = res.payload.data?.rows.map(v => ({ |
|
|
let tableDatas = res.payload.data?.rows.map(v => ({ |
|
|
@ -46,15 +54,7 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition |
|
|
}) |
|
|
}) |
|
|
break; |
|
|
break; |
|
|
case 'videoAbnormal': |
|
|
case 'videoAbnormal': |
|
|
let cameraKind = [] |
|
|
dispatch(problem.getAlarmVideoList({ ...search.current, pepProjectId: pepProjectId })).then((res) => { |
|
|
dispatch(problem.getAlarmVideoDeviceKind()).then((res) => { |
|
|
|
|
|
if (res.success) { |
|
|
|
|
|
cameraKind = res.payload.data.map(v => ({ name: v.kind, value: v.id })) |
|
|
|
|
|
setGenre(res.payload.data.map(v => ({ name: v.kind, value: v.id }))) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
dispatch(problem.getAlarmVideoList({ ...search, pepProjectId: pepProjectId })).then((res) => { |
|
|
|
|
|
if (res.success) { |
|
|
if (res.success) { |
|
|
let tableDatas = res.payload.data?.map(v => ({ |
|
|
let tableDatas = res.payload.data?.map(v => ({ |
|
|
key: v.alarmId, |
|
|
key: v.alarmId, |
|
|
@ -72,7 +72,7 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition |
|
|
resolve: v.resolve || [], |
|
|
resolve: v.resolve || [], |
|
|
cameraChannelNo: v.cameraChannelNo, |
|
|
cameraChannelNo: v.cameraChannelNo, |
|
|
cameraSerialNo: v.cameraSerialNo, |
|
|
cameraSerialNo: v.cameraSerialNo, |
|
|
cameraKindId: v.cameraKindId ? cameraKind?.find(u => u.value == v.cameraKindId)?.name : "", |
|
|
cameraKindId: v.cameraKindId ? kindName.current?.find(u => u.value == v.cameraKindId)?.name : "", |
|
|
venderName: v.venderName, |
|
|
venderName: v.venderName, |
|
|
platform: v.platform, |
|
|
platform: v.platform, |
|
|
confirm: v.confirmContent, |
|
|
confirm: v.confirmContent, |
|
|
@ -85,61 +85,79 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition |
|
|
}) |
|
|
}) |
|
|
break; |
|
|
break; |
|
|
default: |
|
|
default: |
|
|
dispatch(problem.getAlarmDataGroup()).then((res) => { |
|
|
if (genre?.length > 0) { |
|
|
if (res.success) { |
|
|
dispatch(problem.getAlarmDataList({ ...query, ...search.current, groupId: groupId.current.map(v => v.id).join(), pepProjectId: pepProjectId })).then((res) => { |
|
|
let data |
|
|
if (res.success) { |
|
|
if (route == 'dataLnterrupt') data = res.payload.data?.filter(v => v.desc == '数据中断') |
|
|
setCount(res.payload.data?.count || 0) |
|
|
if (route == 'dataAbnormal') data = res.payload.data?.filter(v => v.desc == '数据异常') |
|
|
let tableDatas = res.payload.data?.rows?.map(v => ({ |
|
|
if (route == 'strategyHit') data = res.payload.data?.filter(v => v.desc == '策略命中') |
|
|
key: v.AlarmId, |
|
|
if (route == 'deviceAbnormal') data = res.payload.data?.filter(v => v.desc == '掉线' || v.desc == '不活跃') |
|
|
StructureName: v.StructureName, |
|
|
let genreData = [] |
|
|
projectName: v.pomsProject?.map(r => (r.name ? { id: r.id, name: r.name, state: 'PMOS' } : { |
|
|
data?.map(v => { |
|
|
id: r.id, name: r.pepProject?.projectName, state: r.pepProject?.constructionStatus |
|
|
v?.unit?.map(vv => { |
|
|
}))?.filter(c => c), |
|
|
genreData.push({ name: vv.name, value: vv.id }) |
|
|
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") : "", |
|
|
}) |
|
|
confirmTime: v.confirmedTime ? moment(v.confirmedTime).format("YYYY-MM-DD HH:mm:ss") : "", |
|
|
setGenre(genreData) |
|
|
SourceName: v.SourceName, |
|
|
if (data && data[0]?.id) { |
|
|
AlarmGroupUnit: v.AlarmGroupUnit ? genre?.find(r => r.value == v.AlarmGroupUnit)?.name : "无", |
|
|
dispatch(problem.getAlarmDataList({ ...query, ...search, groupId: data.map(v => v.id).join(), pepProjectId: pepProjectId })).then((res) => { |
|
|
Strategy: v.AlarmGroupUnit ? genre?.find(r => r.value == v.AlarmGroupUnit)?.name : "", |
|
|
if (res.success) { |
|
|
type: route == 'deviceAbnormal' ? v.DeviceStatus == 0 ? "离线" : '' : v.AlarmGroupUnit ? genre?.find(r => r.value == v.AlarmGroupUnit)?.name : "", |
|
|
setCount(res.payload.data?.count || 0) |
|
|
cameraKindId: v.AlarmGroupUnit ? genre?.find(r => r.value == v.AlarmGroupUnit)?.name : "", |
|
|
let tableDatas = res.payload.data?.rows?.map(v => ({ |
|
|
AlarmCodeName: v.AlarmCodeName, |
|
|
key: v.AlarmId, |
|
|
CurrentLevel: v.CurrentLevel, |
|
|
StructureName: v.StructureName, |
|
|
detailCount: v.detailCount, |
|
|
projectName: v.pomsProject?.map(r => (r.name ? { id: r.id, name: r.name, state: 'PMOS' } : { |
|
|
AlarmContent: v.AlarmContent, |
|
|
id: r.id, name: r.pepProject?.projectName, state: r.pepProject?.constructionStatus |
|
|
State: v.State, |
|
|
}))?.filter(c => c), |
|
|
alarmType: v.alarmType, |
|
|
createTime: v.StartTime ? moment(v.StartTime).format("YYYY-MM-DD HH:mm:ss") : "", |
|
|
confirm: v.confirmedContent, |
|
|
updateTime: v.EndTime ? moment(v.EndTime).format("YYYY-MM-DD HH:mm:ss") : "", |
|
|
station: v.StructureLongitude && v.StructureLatitude ? v.StructureLongitude + '. ' + v.StructureLatitude : "", |
|
|
confirmTime: v.confirmedTime ? moment(v.confirmedTime).format("YYYY-MM-DD HH:mm:ss") : "", |
|
|
})) |
|
|
SourceName: v.SourceName, |
|
|
setTableData(tableDatas) |
|
|
AlarmGroupUnit: v.AlarmGroupUnit ? genreData.find(r => r.value == v.AlarmGroupUnit)?.name : "无", |
|
|
|
|
|
Strategy: v.AlarmGroupUnit ? genreData.find(r => r.value == v.AlarmGroupUnit)?.name : "", |
|
|
|
|
|
type: route == 'deviceAbnormal' ? v.DeviceStatus == 0 ? "离线" : '' : v.AlarmGroupUnit ? genreData.find(r => r.value == v.AlarmGroupUnit)?.name : "", |
|
|
|
|
|
cameraKindId: v.AlarmGroupUnit ? genreData.find(r => r.value == v.AlarmGroupUnit)?.name : "", |
|
|
|
|
|
AlarmCodeName: v.AlarmCodeName, |
|
|
|
|
|
CurrentLevel: v.CurrentLevel, |
|
|
|
|
|
detailCount: v.detailCount, |
|
|
|
|
|
AlarmContent: v.AlarmContent, |
|
|
|
|
|
State: v.State, |
|
|
|
|
|
alarmType: v.alarmType, |
|
|
|
|
|
confirm: v.confirmedContent, |
|
|
|
|
|
station: v.StructureLongitude && v.StructureLatitude ? v.StructureLongitude + '. ' + v.StructureLatitude : "", |
|
|
|
|
|
})) |
|
|
|
|
|
setTableData(tableDatas) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
}) |
|
|
} |
|
|
} |
|
|
}) |
|
|
|
|
|
break; |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
}, [query, genre, pepProjectId]) |
|
|
|
|
|
|
|
|
}, [query, search, pepProjectId]) |
|
|
|
|
|
|
|
|
|
|
|
// console.log(exhibition); |
|
|
useEffect(() => { |
|
|
// console.log(tableData); |
|
|
if (location) { |
|
|
|
|
|
search.current = { ...search.current, ...location } |
|
|
|
|
|
} |
|
|
|
|
|
if (route !== 'videoAbnormal' && route !== 'useAbnormal') { |
|
|
|
|
|
dispatch(problem.getAlarmDataGroup()).then((res) => { |
|
|
|
|
|
if (res.success) { |
|
|
|
|
|
let data |
|
|
|
|
|
if (route == 'dataLnterrupt') 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 == 'deviceAbnormal') data = res.payload.data?.filter(v => v.desc == '掉线' || v.desc == '不活跃') |
|
|
|
|
|
groupId.current = data |
|
|
|
|
|
let genreData = [] |
|
|
|
|
|
data?.map(v => { |
|
|
|
|
|
v?.unit?.map(vv => { |
|
|
|
|
|
genreData.push({ name: vv.name, value: vv.id }) |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
setGenre(genreData) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
if (route == 'useAbnormal') { |
|
|
|
|
|
setGenre({ element: "元素异常", apiError: "接口报错 ", timeout: "加载超时" }) |
|
|
|
|
|
} |
|
|
|
|
|
if (route == 'videoAbnormal') { |
|
|
|
|
|
dispatch(problem.getAlarmVideoDeviceKind()).then((res) => { |
|
|
|
|
|
if (res.success) { |
|
|
|
|
|
kindName.current = res.payload.data.map(v => ({ name: v.kind, value: v.id })) |
|
|
|
|
|
setGenre(res.payload.data.map(v => ({ name: v.kind, value: v.id }))) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
|
|
console.log(location); |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
|
@ -234,7 +252,7 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition |
|
|
style={{ width: 80, height: 32, borderRadius: 3, }} |
|
|
style={{ width: 80, height: 32, borderRadius: 3, }} |
|
|
onClick={() => { |
|
|
onClick={() => { |
|
|
api.current.validate().then((v) => { |
|
|
api.current.validate().then((v) => { |
|
|
setSearch({ |
|
|
search.current = { |
|
|
state: v.state, |
|
|
state: v.state, |
|
|
keywordTarget: v.keywordTarget, |
|
|
keywordTarget: v.keywordTarget, |
|
|
keyword: v.keyword, |
|
|
keyword: v.keyword, |
|
|
@ -245,7 +263,7 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition |
|
|
onlineState: v.onlineState, |
|
|
onlineState: v.onlineState, |
|
|
sustainTimeStart: v.time && v.time.length > 0 ? 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 && v.time.length > 0 ? 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([]) |
|
|
setSelected([]) |
|
|
setQuery({ limit: 10, page: 0 }) |
|
|
setQuery({ limit: 10, page: 0 }) |
|
|
}); |
|
|
}); |
|
|
@ -261,36 +279,40 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition |
|
|
active={true} |
|
|
active={true} |
|
|
placeholder={SkeletonScreen()} |
|
|
placeholder={SkeletonScreen()} |
|
|
> |
|
|
> |
|
|
<Table |
|
|
{(() => { |
|
|
columns={exhibition} |
|
|
// console.log(tableData); |
|
|
dataSource={route == 'useAbnormal' || route == 'videoAbnormal' ? tableData.slice(query.page * query.limit, (query.page + 1) * query.limit) || [] : tableData} |
|
|
return <Table |
|
|
bordered={false} |
|
|
columns={exhibition} |
|
|
empty={<div><img src="/assets/images/problem/shield.png" style={{ width: 20 }} />暂无告警数据</div>} |
|
|
dataSource={route == 'useAbnormal' || route == 'videoAbnormal' ? tableData.slice(query.page * query.limit, (query.page + 1) * query.limit) || [] : tableData} |
|
|
style={{}} |
|
|
bordered={false} |
|
|
pagination={false} |
|
|
empty={<div><img src="/assets/images/problem/shield.png" style={{ width: 20 }} />暂无告警数据</div>} |
|
|
onRow={(record, index) => { |
|
|
style={{}} |
|
|
if (index % 1 === 0) { |
|
|
pagination={false} |
|
|
return { style: { background: '#FAFCFF' } } |
|
|
onRow={(record, index) => { |
|
|
} |
|
|
if (index % 1 === 0) { |
|
|
}} |
|
|
return { style: { background: '#FAFCFF' } } |
|
|
rowSelection={{ |
|
|
} |
|
|
selectedRowKeys: selected || [], |
|
|
}} |
|
|
getCheckboxProps: record => ({ |
|
|
rowSelection={{ |
|
|
disabled: record.confirmTime ? true : false, |
|
|
selectedRowKeys: selected || [], |
|
|
// name: record.name, |
|
|
getCheckboxProps: record => ({ |
|
|
}), |
|
|
disabled: record.confirmTime ? true : false, |
|
|
onSelect: (record, selected) => { |
|
|
// name: record.name, |
|
|
// console.log(`select row: ${selected}`, record); |
|
|
}), |
|
|
}, |
|
|
onSelect: (record, selected) => { |
|
|
// onSelectAll: (selected, selectedRows) => { |
|
|
// console.log(`select row: ${selected}`, record); |
|
|
// console.log(`select all rows: ${selected}`, selectedRows); |
|
|
}, |
|
|
// }, |
|
|
// onSelectAll: (selected, selectedRows) => { |
|
|
onChange: (selectedRowKeys, selectedRows) => { |
|
|
// console.log(`select all rows: ${selected}`, selectedRows); |
|
|
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); |
|
|
// }, |
|
|
setSelected(selectedRows?.map(v => v.key)) |
|
|
onChange: (selectedRowKeys, selectedRows) => { |
|
|
}, |
|
|
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); |
|
|
}} |
|
|
setSelected(selectedRows?.map(v => v.key)) |
|
|
/> |
|
|
}, |
|
|
|
|
|
}} |
|
|
|
|
|
/> |
|
|
|
|
|
})()} |
|
|
|
|
|
|
|
|
</Skeleton> |
|
|
</Skeleton> |
|
|
<div |
|
|
<div |
|
|
style={{ |
|
|
style={{ |
|
|
|
