|
@@ -3,11 +3,16 @@ import TabsContent from '@/components/TabsContent';
|
|
import ThresholdDetail from '@/components/ThresholdDetail';
|
|
import ThresholdDetail from '@/components/ThresholdDetail';
|
|
import { UnityAction } from '@/utils/utils';
|
|
import { UnityAction } from '@/utils/utils';
|
|
import { Collapse, Spin, Table, Tabs } from 'antd';
|
|
import { Collapse, Spin, Table, Tabs } from 'antd';
|
|
-import { useEffect, useMemo, useState } from 'react';
|
|
|
|
|
|
+import { useMemo, useState } from 'react';
|
|
import styles from './VideoAnalysis.less';
|
|
import styles from './VideoAnalysis.less';
|
|
|
|
|
|
const { TabPane } = Tabs;
|
|
const { TabPane } = Tabs;
|
|
const { Panel } = Collapse;
|
|
const { Panel } = Collapse;
|
|
|
|
+const TYPE = {
|
|
|
|
+ video: 1,
|
|
|
|
+ fill: 2,
|
|
|
|
+ water: 3,
|
|
|
|
+};
|
|
|
|
|
|
function VideoAnalysis(props) {
|
|
function VideoAnalysis(props) {
|
|
const { videoNum, data, videoData, loading } = props;
|
|
const { videoNum, data, videoData, loading } = props;
|
|
@@ -23,37 +28,41 @@ function VideoAnalysis(props) {
|
|
const errorData = useMemo(() => {
|
|
const errorData = useMemo(() => {
|
|
const list1 =
|
|
const list1 =
|
|
videoData.dumu_list?.map((item) => {
|
|
videoData.dumu_list?.map((item) => {
|
|
- return { ...item, type_name: '视频报警', type: 1 };
|
|
|
|
|
|
+ return { ...item, type_name: '视频报警', type: TYPE.video };
|
|
}) || [];
|
|
}) || [];
|
|
const list2 =
|
|
const list2 =
|
|
videoData.environment_list
|
|
videoData.environment_list
|
|
?.filter((item) => item.status)
|
|
?.filter((item) => item.status)
|
|
.map((item) => {
|
|
.map((item) => {
|
|
- return { ...item, type_name: '环境监测', type: 2 };
|
|
|
|
|
|
+ return { ...item, type_name: '环境监测', type: TYPE.fill };
|
|
}) || [];
|
|
}) || [];
|
|
const list3 =
|
|
const list3 =
|
|
videoData.fluid_level_list
|
|
videoData.fluid_level_list
|
|
?.filter((item) => item.status)
|
|
?.filter((item) => item.status)
|
|
.map((item) => {
|
|
.map((item) => {
|
|
- return { ...item, type_name: '液位监测', type: 3 };
|
|
|
|
|
|
+ return { ...item, type_name: '液位监测', type: TYPE.water };
|
|
}) || [];
|
|
}) || [];
|
|
return [...list1, ...list2, ...list3];
|
|
return [...list1, ...list2, ...list3];
|
|
}, [videoData]);
|
|
}, [videoData]);
|
|
|
|
|
|
- useEffect(() => {
|
|
|
|
- UnityAction.on('SynCam', selectedItem);
|
|
|
|
- return () => UnityAction.off('SynCam', selectedItem);
|
|
|
|
- }, [data?.list]);
|
|
|
|
|
|
+ // useEffect(() => {
|
|
|
|
+ // UnityAction.on('SynCam', selectedItem);
|
|
|
|
+ // UnityAction.on('SynDev', selectedItem);
|
|
|
|
+ // return () => {
|
|
|
|
+ // UnityAction.off('SynDev', selectedItem);
|
|
|
|
+ // UnityAction.off('SynCam', selectedItem);
|
|
|
|
+ // };
|
|
|
|
+ // }, [data?.list]);
|
|
|
|
|
|
- //滚动到相应位置
|
|
|
|
- const selectedItem = (e) => {
|
|
|
|
- setSelectedName(e);
|
|
|
|
- const dom = document.querySelector(`div[data-name="${e}"]`);
|
|
|
|
- if (dom) {
|
|
|
|
- let v = document.getElementById('videoContent');
|
|
|
|
- v.scrollTop = dom.offsetTop;
|
|
|
|
- }
|
|
|
|
- };
|
|
|
|
|
|
+ // //滚动到相应位置
|
|
|
|
+ // const selectedItem = (e) => {
|
|
|
|
+ // setSelectedName(e);
|
|
|
|
+ // const dom = document.querySelector(`div[data-name="${e}"]`);
|
|
|
|
+ // if (dom) {
|
|
|
|
+ // let v = document.getElementById('videoContent');
|
|
|
|
+ // v.scrollTop = dom.offsetTop;
|
|
|
|
+ // }
|
|
|
|
+ // };
|
|
|
|
|
|
const onTabChange = (tab) => {
|
|
const onTabChange = (tab) => {
|
|
setTab(tab);
|
|
setTab(tab);
|
|
@@ -96,10 +105,11 @@ function AnalysisContent({ errorData, selectedName }) {
|
|
UnityAction.sendMsg('SensorPic');
|
|
UnityAction.sendMsg('SensorPic');
|
|
};
|
|
};
|
|
const handleCollapse = (item) => {
|
|
const handleCollapse = (item) => {
|
|
- const key = item.type == 1 ? item.device_name : item.device_code;
|
|
|
|
|
|
+ const key = item.type == TYPE.video ? item.device_name : item.device_code;
|
|
|
|
+ const name = item.type == TYPE.video ? 'SynCam' : 'SynDev';
|
|
if (key === prevKey) return;
|
|
if (key === prevKey) return;
|
|
setPrevKey(key);
|
|
setPrevKey(key);
|
|
- UnityAction.sendMsg('SynCam', key);
|
|
|
|
|
|
+ UnityAction.sendMsg(name, key);
|
|
};
|
|
};
|
|
|
|
|
|
const renderContent = (key, item) => {
|
|
const renderContent = (key, item) => {
|
|
@@ -187,7 +197,7 @@ function AnalysisContent({ errorData, selectedName }) {
|
|
return content;
|
|
return content;
|
|
};
|
|
};
|
|
const getClassName = (item) => {
|
|
const getClassName = (item) => {
|
|
- const key = item.type == 1 ? item.device_name : item.device_code;
|
|
|
|
|
|
+ const key = item.type == TYPE.video ? item.device_name : item.device_code;
|
|
return selectedName == key || prevKey == key
|
|
return selectedName == key || prevKey == key
|
|
? styles.tableSelect
|
|
? styles.tableSelect
|
|
: styles.table;
|
|
: styles.table;
|
|
@@ -400,17 +410,19 @@ function AllContent({ data = [], videoData = {} }) {
|
|
},
|
|
},
|
|
];
|
|
];
|
|
|
|
|
|
- const onSelectRow = (record, index) => {
|
|
|
|
|
|
+ const onSelectRow = (item, type) => {
|
|
|
|
+ const key = type == TYPE.video ? item.device_name : item.device_code;
|
|
|
|
+ const name = type == TYPE.video ? 'SynCam' : 'SynDev';
|
|
const selectedList = [...selectedRowKeys];
|
|
const selectedList = [...selectedRowKeys];
|
|
- if (selectedList[0] === index) return;
|
|
|
|
- selectedList[0] = index;
|
|
|
|
|
|
+ if (selectedList[0] === key) return;
|
|
|
|
+ selectedList[0] = key;
|
|
setSelectedRowKeys(selectedList);
|
|
setSelectedRowKeys(selectedList);
|
|
- UnityAction.sendMsg('SynDev', record.DeviceCode);
|
|
|
|
|
|
+ UnityAction.sendMsg(name, key);
|
|
};
|
|
};
|
|
|
|
|
|
- const setRowClassName = (record, index) => {
|
|
|
|
- return index === selectedRowKeys[0] ||
|
|
|
|
- record.DeviceCode == selectedRowKeys[0]
|
|
|
|
|
|
+ const setRowClassName = (item) => {
|
|
|
|
+ const key = item.type == TYPE.video ? item.device_name : item.device_code;
|
|
|
|
+ return selectedRowKeys.length > 0 && key == selectedRowKeys[0]
|
|
? styles.tableSelect
|
|
? styles.tableSelect
|
|
: '';
|
|
: '';
|
|
};
|
|
};
|
|
@@ -425,10 +437,10 @@ function AllContent({ data = [], videoData = {} }) {
|
|
<Table
|
|
<Table
|
|
dataSource={environment_list}
|
|
dataSource={environment_list}
|
|
columns={columns1}
|
|
columns={columns1}
|
|
- // rowClassName={setRowClassName}
|
|
|
|
- // onRow={(record, index) => ({
|
|
|
|
- // onClick: () => onSelectRow(record, index),
|
|
|
|
- // })}
|
|
|
|
|
|
+ rowClassName={setRowClassName}
|
|
|
|
+ onRow={(record, index) => ({
|
|
|
|
+ onClick: () => onSelectRow(record, TYPE.fill),
|
|
|
|
+ })}
|
|
pagination={false}
|
|
pagination={false}
|
|
scroll={{ y: 400 }}
|
|
scroll={{ y: 400 }}
|
|
/>
|
|
/>
|
|
@@ -438,10 +450,10 @@ function AllContent({ data = [], videoData = {} }) {
|
|
<Table
|
|
<Table
|
|
dataSource={fluid_level_list}
|
|
dataSource={fluid_level_list}
|
|
columns={columns2}
|
|
columns={columns2}
|
|
- // rowClassName={setRowClassName}
|
|
|
|
- // onRow={(record, index) => ({
|
|
|
|
- // onClick: () => onSelectRow(record, index),
|
|
|
|
- // })}
|
|
|
|
|
|
+ rowClassName={setRowClassName}
|
|
|
|
+ onRow={(record, index) => ({
|
|
|
|
+ onClick: () => onSelectRow(record, TYPE.water),
|
|
|
|
+ })}
|
|
pagination={false}
|
|
pagination={false}
|
|
scroll={{ y: 400 }}
|
|
scroll={{ y: 400 }}
|
|
/>
|
|
/>
|
|
@@ -449,12 +461,12 @@ function AllContent({ data = [], videoData = {} }) {
|
|
<div className={`card-box ${styles.box}`}>
|
|
<div className={`card-box ${styles.box}`}>
|
|
<ModuleTitle title="感知监测" />
|
|
<ModuleTitle title="感知监测" />
|
|
<Table
|
|
<Table
|
|
- dataSource={data}
|
|
|
|
|
|
+ dataSource={dumu_list}
|
|
columns={columns3}
|
|
columns={columns3}
|
|
- // rowClassName={setRowClassName}
|
|
|
|
- // onRow={(record, index) => ({
|
|
|
|
- // onClick: () => onSelectRow(record, index),
|
|
|
|
- // })}
|
|
|
|
|
|
+ rowClassName={setRowClassName}
|
|
|
|
+ onRow={(record, index) => ({
|
|
|
|
+ onClick: () => onSelectRow(record, TYPE.video),
|
|
|
|
+ })}
|
|
pagination={false}
|
|
pagination={false}
|
|
scroll={{ y: 400 }}
|
|
scroll={{ y: 400 }}
|
|
/>
|
|
/>
|