free-sun
/
OperationalService
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

路由跳转

dev
wenlele 2 years ago
parent
e6ddca6eb0
commit
7efc9c9d74
4 changed files with 141 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      web/client/src/sections/control/containers/control.jsx
  2. 212
      web/client/src/sections/problem/components/tableData.jsx
  3. 21
      web/client/src/sections/problem/containers/dataAlarm.jsx
  4. 3
      web/package.json

16
web/client/src/sections/control/containers/control.jsx
View File

@ -23,8 +23,8 @@ let member
let web
const Control = (props) => {
const { dispatch, actions, user, loading, socket, pepProjectId } = props
const Control = ({ dispatch, actions, user, history, loading, socket, pepProjectId }) => {
const { control, install } = actions
const [timelineList, setTimelineList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//最新动态列表
@ -171,7 +171,7 @@ const Control = (props) => {
await dispatch(control.getAppAlarmsAggDay({ pepProjectId: pepProjectId })).then(res => {
if (res.success) setAppBI(res.payload.data)
})
await dispatch(control.getAlarmsHandleStatistics({ pepProjectId: pepProjectId })).then(res => {
await dispatch(control.getAlarmsHandleStatistics({ projectCorrelationId: pepProjectId })).then(res => {
if (res.success) setEfficiencyBI(res.payload.data[0])
})
}
@ -681,7 +681,7 @@ const Control = (props) => {
<div id='alarm' style={{ width: 'calc(100% - 200px)', position: 'relative', whiteSpace: 'nowrap', }}>
{exhibition.current['workbench']?.map((item, index) => {
return (
<div key={item.name} style={{ background: item.img, backgroundSize: "100% 100%", display: "inline-block", width: 270, height: 135, marginRight: 26 }}>
pepProjectId && item.name == '关注的项目' ? '' : <div key={item.name} style={{ background: item.img, backgroundSize: "100% 100%", display: "inline-block", width: 270, height: 135, marginRight: 26 }}>
<div style={{ margin: '35px 0px 0px 134px' }}>
<div>
<span style={{ fontSize: 14, color: '#4A4A4A', fontWeight: 500, fontFamily: 'PingFangSC-Medium, PingFang SC' }}>{item.name}</span>
@ -915,7 +915,13 @@ const Control = (props) => {
problemsList?.map((v, index) => {
return (
<div style={{ marginBottom: 15, paddingRight: 30, }} key={'problems' + index} onClick={() => {
dispatch(push(v.url))
history.push({
pathname: v.url,
query: {
keywordTarget: v.groupName == '应用异常' ? "" : 'source',
keyword:v.SourceName,
}
})
}}>
<div style={{ fontSize: 14, color: '#646566' }} >
【{v.SourceName}】{v.groupName}{v.groupName == '视频异常' ? "" : '，诊断为 '} <span style={{ color: '#0F7EFB', borderBottom: '1px dotted #0F7EFB', cursor: "pointer" }} >{v.typeName}，请前往确认</span>

212
web/client/src/sections/problem/components/tableData.jsx
View File

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

21
web/client/src/sections/problem/containers/dataAlarm.jsx
View File

@ -14,7 +14,8 @@ import { request } from 'screenfull';
import { useRef } from 'react';
import { render } from 'less';
const DataAlarm = ({ match, dispatch, actions, user, loading, socket, iotVcmpWeb }) => {
const DataAlarm = (props) => {
const { match, dispatch, actions, user, loading, socket, iotVcmpWeb } = props
let route = match.url.substring(match.url.lastIndexOf("/") + 1, match.url.length)
const { problem } = actions
@ -304,14 +305,14 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket, iotVcmpWeb
name: '操作', sort: 25, value: 'text', render: (_, r, index) => {
return <div style={{ width: 195 }}>
{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 || r.autoRestore || r.confirmAuto ?
<Button theme='borderless' style={{ width: 65 }} onClick={() => {
setConfirm(true)
setSelected([r.key])
}}>确认</Button>
: r.State == 3 || r.autoRestore || r.confirmAuto ?
<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', 'deviceAbnormal'].includes(route) ? <>
<Button theme='borderless' style={{ width: 65 }} disabled>已派单</Button>
{route == 'deviceAbnormal' ? "" : <Button theme='borderless' style={{ width: 65 }} onClick={() => {
@ -427,6 +428,8 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket, iotVcmpWeb
setQuery={setQuery}
tableData={tableData}
setTableData={setTableData}
genre={genre}
location={props.location?.query}
/>
{setup ? (
<Setup
@ -596,7 +599,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket, iotVcmpWeb
)
}
function mapStateToProps(state) {
function mapStateToProps (state) {
const { auth, global, members, webSocket } = state
return {
// loading: members.isRequesting,

3
web/package.json
View File

@ -69,7 +69,6 @@
"moment": "^2.29.3",
"npm": "^7.20.6",
"perfect-scrollbar": "^1.5.5",
"qs": "^6.10.5",
"screenfull": "5.2.0",
"socket.io-client": "^1.7.4",
"socket.io-parser": "^3.4.1",
@ -81,4 +80,4 @@
"webpack-dev-server": "^3.11.2",
"webpack-hot-middleware": "^2.25.0"
}
}
}

Write Preview
Loading…
Cancel
Save