|
@@ -3,12 +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, useState } from 'react';
|
|
|
|
-import ThresholdBar from './ThresholdBar';
|
|
|
|
|
|
+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;
|
|
@@ -21,33 +25,48 @@ function VideoAnalysis(props) {
|
|
const [prevKey, setPrevKey] = useState();
|
|
const [prevKey, setPrevKey] = useState();
|
|
const [selectedName, setSelectedName] = useState('');
|
|
const [selectedName, setSelectedName] = useState('');
|
|
|
|
|
|
- const handleCollapse = (key) => {
|
|
|
|
- if (key === prevKey) return;
|
|
|
|
- setPrevKey(key);
|
|
|
|
- const device = data.list.find((item) => item.id === key)?.device_name;
|
|
|
|
- if (device) {
|
|
|
|
- UnityAction.sendMsg('SynCam', device);
|
|
|
|
- }
|
|
|
|
- };
|
|
|
|
|
|
+ const errorData = useMemo(() => {
|
|
|
|
+ const list1 =
|
|
|
|
+ videoData.dumu_list?.map((item) => {
|
|
|
|
+ return { ...item, type_name: '视频报警', type: TYPE.video };
|
|
|
|
+ }) || [];
|
|
|
|
+ const list2 =
|
|
|
|
+ videoData.environment_list
|
|
|
|
+ ?.filter((item) => item.status)
|
|
|
|
+ .map((item) => {
|
|
|
|
+ return { ...item, type_name: '环境监测', type: TYPE.fill };
|
|
|
|
+ }) || [];
|
|
|
|
+ const list3 =
|
|
|
|
+ videoData.fluid_level_list
|
|
|
|
+ ?.filter((item) => item.status)
|
|
|
|
+ .map((item) => {
|
|
|
|
+ return { ...item, type_name: '液位监测', type: TYPE.water };
|
|
|
|
+ }) || [];
|
|
|
|
+ return [...list1, ...list2, ...list3];
|
|
|
|
+ }, [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);
|
|
- // UnityAction.sendMsg('ProcessAnalysisType', tab);
|
|
|
|
|
|
+ UnityAction.sendMsg('SensorAnalysisType', tab);
|
|
};
|
|
};
|
|
|
|
|
|
return (
|
|
return (
|
|
@@ -62,10 +81,8 @@ function VideoAnalysis(props) {
|
|
key: '1',
|
|
key: '1',
|
|
children: (
|
|
children: (
|
|
<AnalysisContent
|
|
<AnalysisContent
|
|
- data={data}
|
|
|
|
- videoData={videoData}
|
|
|
|
|
|
+ errorData={errorData}
|
|
selectedName={selectedName}
|
|
selectedName={selectedName}
|
|
- prevKey={prevKey}
|
|
|
|
/>
|
|
/>
|
|
),
|
|
),
|
|
},
|
|
},
|
|
@@ -81,11 +98,19 @@ function VideoAnalysis(props) {
|
|
);
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
-function AnalysisContent({ data, selectedName, prevKey }) {
|
|
|
|
|
|
+function AnalysisContent({ errorData, selectedName }) {
|
|
|
|
+ const [prevKey, setPrevKey] = useState();
|
|
const handleImgClick = (item) => {
|
|
const handleImgClick = (item) => {
|
|
localStorage.setItem('preview', JSON.stringify(item.data));
|
|
localStorage.setItem('preview', JSON.stringify(item.data));
|
|
UnityAction.sendMsg('SensorPic');
|
|
UnityAction.sendMsg('SensorPic');
|
|
};
|
|
};
|
|
|
|
+ const handleCollapse = (item) => {
|
|
|
|
+ const key = item.type == TYPE.video ? item.device_name : item.device_code;
|
|
|
|
+ const name = item.type == TYPE.video ? 'SynCam' : 'SynDev';
|
|
|
|
+ if (key === prevKey) return;
|
|
|
|
+ setPrevKey(key);
|
|
|
|
+ UnityAction.sendMsg(name, key);
|
|
|
|
+ };
|
|
|
|
|
|
const renderContent = (key, item) => {
|
|
const renderContent = (key, item) => {
|
|
let content = '';
|
|
let content = '';
|
|
@@ -98,7 +123,7 @@ function AnalysisContent({ data, selectedName, prevKey }) {
|
|
{item.event_type}
|
|
{item.event_type}
|
|
<img
|
|
<img
|
|
className={styles.img}
|
|
className={styles.img}
|
|
- src={item.url}
|
|
|
|
|
|
+ src={item.path}
|
|
onClick={() => handleImgClick(item)}
|
|
onClick={() => handleImgClick(item)}
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
@@ -109,16 +134,28 @@ function AnalysisContent({ data, selectedName, prevKey }) {
|
|
content = (
|
|
content = (
|
|
<>
|
|
<>
|
|
<div className={styles.contentFlex}>
|
|
<div className={styles.contentFlex}>
|
|
- <div>参数:温度</div>
|
|
|
|
|
|
+ <div>参数:{item.patrol_name}</div>
|
|
<div className={styles.threshold}>
|
|
<div className={styles.threshold}>
|
|
<span>阈值范围:</span>
|
|
<span>阈值范围:</span>
|
|
<div style={{ width: '180px' }}>
|
|
<div style={{ width: '180px' }}>
|
|
- <ThresholdBar current={0.5} thresholds={[0, 1]} />
|
|
|
|
|
|
+ <ThresholdDetail
|
|
|
|
+ current={item.value || 0}
|
|
|
|
+ data={{
|
|
|
|
+ JsonNumThreshold: item?.json_num_threshold,
|
|
|
|
+ Type: 2,
|
|
|
|
+ }}
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
<div>
|
|
<div>
|
|
- 状态:<span className={styles.textAbnormal}>异常</span>
|
|
|
|
|
|
+ 状态:
|
|
|
|
+ {item?.status <= 0 ? (
|
|
|
|
+ <span className={styles.textNormal}>正常</span>
|
|
|
|
+ ) : item.status == 1 ? (
|
|
|
|
+ <span className={styles.textAbnormal}>异常</span>
|
|
|
|
+ ) : (
|
|
|
|
+ <span className={styles.textWarning}>警告</span>
|
|
|
|
+ )}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
</>
|
|
@@ -128,11 +165,29 @@ function AnalysisContent({ data, selectedName, prevKey }) {
|
|
content = (
|
|
content = (
|
|
<>
|
|
<>
|
|
<div className={styles.contentFlex}>
|
|
<div className={styles.contentFlex}>
|
|
- <div>原液位:12.01</div>
|
|
|
|
- <div> 仪表液位:12.12 </div>
|
|
|
|
-
|
|
|
|
|
|
+ <div>原液位:{item.origin_value}</div>
|
|
|
|
+ <div> 差值:{item.value} </div>
|
|
|
|
+ <div className={styles.threshold}>
|
|
|
|
+ <span>阈值范围:</span>
|
|
|
|
+ <div style={{ width: '180px' }}>
|
|
|
|
+ <ThresholdDetail
|
|
|
|
+ current={item.value || 0}
|
|
|
|
+ data={{
|
|
|
|
+ JsonNumThreshold: item?.json_num_threshold,
|
|
|
|
+ Type: 2,
|
|
|
|
+ }}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
<div>
|
|
<div>
|
|
- 状态:<span className={styles.textAbnormal}>异常</span>
|
|
|
|
|
|
+ 状态:
|
|
|
|
+ {item?.status <= 0 ? (
|
|
|
|
+ <span className={styles.textNormal}>正常</span>
|
|
|
|
+ ) : item.status == 1 ? (
|
|
|
|
+ <span className={styles.textAbnormal}>异常</span>
|
|
|
|
+ ) : (
|
|
|
|
+ <span className={styles.textWarning}>警告</span>
|
|
|
|
+ )}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
</>
|
|
@@ -141,31 +196,36 @@ function AnalysisContent({ data, selectedName, prevKey }) {
|
|
}
|
|
}
|
|
return content;
|
|
return content;
|
|
};
|
|
};
|
|
-
|
|
|
|
|
|
+ const getClassName = (item) => {
|
|
|
|
+ const key = item.type == TYPE.video ? item.device_name : item.device_code;
|
|
|
|
+ return selectedName == key || prevKey == key
|
|
|
|
+ ? styles.tableSelect
|
|
|
|
+ : styles.table;
|
|
|
|
+ };
|
|
return (
|
|
return (
|
|
<div
|
|
<div
|
|
className={styles.page}
|
|
className={styles.page}
|
|
style={{ height: 'calc(100vh - 630px)', overflow: 'auto' }}
|
|
style={{ height: 'calc(100vh - 630px)', overflow: 'auto' }}
|
|
>
|
|
>
|
|
- {data?.length > 0 ? (
|
|
|
|
- data?.map((item) => (
|
|
|
|
|
|
+ {errorData?.length > 0 ? (
|
|
|
|
+ errorData?.map((item) => (
|
|
<div data-name={item.device_name}>
|
|
<div data-name={item.device_name}>
|
|
<Collapse
|
|
<Collapse
|
|
- defaultActiveKey={[item.id]}
|
|
|
|
- key={item.id}
|
|
|
|
- className={
|
|
|
|
- selectedName == item.device_name || prevKey == item.id
|
|
|
|
- ? styles.tableSelect
|
|
|
|
- : styles.table
|
|
|
|
- }
|
|
|
|
- expandIcon={() => <div className={styles.typeText}>视频报警</div>}
|
|
|
|
|
|
+ defaultActiveKey={[item.device_name]}
|
|
|
|
+ key={item.device_name}
|
|
|
|
+ className={getClassName(item)}
|
|
|
|
+ expandIcon={() => (
|
|
|
|
+ <div className={styles.typeText}>{item.type_name}</div>
|
|
|
|
+ )}
|
|
onChange={(e) => {
|
|
onChange={(e) => {
|
|
- handleCollapse(item.id);
|
|
|
|
|
|
+ handleCollapse(item);
|
|
}}
|
|
}}
|
|
>
|
|
>
|
|
- <Panel header={item.device_name} key={item.id}>
|
|
|
|
|
|
+ <Panel header={item.device_name} key={item.device_name}>
|
|
<div className={styles.box}>
|
|
<div className={styles.box}>
|
|
- <div className={styles.item}>{renderContent(1, item)}</div>
|
|
|
|
|
|
+ <div className={styles.item}>
|
|
|
|
+ {renderContent(item.type, item)}
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
</Panel>
|
|
</Collapse>
|
|
</Collapse>
|
|
@@ -179,7 +239,11 @@ function AnalysisContent({ data, selectedName, prevKey }) {
|
|
}
|
|
}
|
|
|
|
|
|
function AllContent({ data = [], videoData = {} }) {
|
|
function AllContent({ data = [], videoData = {} }) {
|
|
- const { environment_list = [], fluid_level_list = [] } = videoData;
|
|
|
|
|
|
+ const {
|
|
|
|
+ environment_list = [],
|
|
|
|
+ fluid_level_list = [],
|
|
|
|
+ dumu_list = [],
|
|
|
|
+ } = videoData;
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
|
const columns1 = [
|
|
const columns1 = [
|
|
{
|
|
{
|
|
@@ -339,24 +403,26 @@ function AllContent({ data = [], videoData = {} }) {
|
|
render: (item) => (
|
|
render: (item) => (
|
|
<img
|
|
<img
|
|
className={styles.img}
|
|
className={styles.img}
|
|
- src={item.url}
|
|
|
|
|
|
+ src={item.path}
|
|
onClick={() => handleImgClick(item)}
|
|
onClick={() => handleImgClick(item)}
|
|
/>
|
|
/>
|
|
),
|
|
),
|
|
},
|
|
},
|
|
];
|
|
];
|
|
|
|
|
|
- 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
|
|
: '';
|
|
: '';
|
|
};
|
|
};
|
|
@@ -371,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 }}
|
|
/>
|
|
/>
|
|
@@ -384,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 }}
|
|
/>
|
|
/>
|
|
@@ -395,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 }}
|
|
/>
|
|
/>
|