123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406 |
- import ModuleTitle from '@/components/ManagementPage/moduleTitle';
- import TabsContent from '@/components/TabsContent';
- import ThresholdDetail from '@/components/ThresholdDetail';
- import { UnityAction } from '@/utils/utils';
- import { Collapse, Spin, Table, Tabs } from 'antd';
- import { useEffect, useState } from 'react';
- import ThresholdBar from './ThresholdBar';
- import styles from './VideoAnalysis.less';
- const { TabPane } = Tabs;
- const { Panel } = Collapse;
- function VideoAnalysis(props) {
- const { videoNum, data, videoData, loading } = props;
- const [tab, setTab] = useState('1');
- const allCount = Object.values(videoData).reduce(
- (total, item) => total + item?.length,
- 0,
- );
- const [prevKey, setPrevKey] = 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);
- }
- };
- useEffect(() => {
- UnityAction.on('SynCam', selectedItem);
- return () => 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 onTabChange = (tab) => {
- setTab(tab);
- // UnityAction.sendMsg('ProcessAnalysisType', tab);
- };
- return (
- <Spin spinning={loading}>
- <TabsContent
- small={true}
- center={false}
- defaultActiveKey="1"
- items={[
- {
- label: `异常(${videoNum})`,
- key: '1',
- children: (
- <AnalysisContent
- data={data}
- videoData={videoData}
- selectedName={selectedName}
- prevKey={prevKey}
- />
- ),
- },
- {
- label: `全部(${allCount})`,
- key: '2',
- children: <AllContent data={data} videoData={videoData} />,
- },
- ]}
- onChange={onTabChange}
- />
- </Spin>
- );
- }
- function AnalysisContent({ data, selectedName, prevKey }) {
- const handleImgClick = (item) => {
- localStorage.setItem('preview', JSON.stringify(item.data));
- UnityAction.sendMsg('SensorPic');
- };
- const renderContent = (key, item) => {
- let content = '';
- switch (key) {
- case 1:
- content = (
- <>
- <div className={styles.label}>画面报警:</div>
- <div className={styles.content}>
- {item.event_type}
- <img
- className={styles.img}
- src={item.url}
- onClick={() => handleImgClick(item)}
- />
- </div>
- </>
- );
- break;
- case 2:
- content = (
- <>
- <div className={styles.contentFlex}>
- <div>参数:温度</div>
- <div className={styles.threshold}>
- <span>阈值范围:</span>
- <div style={{ width: '180px' }}>
- <ThresholdBar current={0.5} thresholds={[0, 1]} />
- </div>
- </div>
- <div>
- 状态:<span className={styles.textAbnormal}>异常</span>
- </div>
- </div>
- </>
- );
- break;
- case 3:
- content = (
- <>
- <div className={styles.contentFlex}>
- <div>原液位:12.01</div>
- <div> 仪表液位:12.12 </div>
- <div>
- 状态:<span className={styles.textAbnormal}>异常</span>
- </div>
- </div>
- </>
- );
- break;
- }
- return content;
- };
- return (
- <div
- className={styles.page}
- style={{ height: 'calc(100vh - 630px)', overflow: 'auto' }}
- >
- {data?.length > 0 ? (
- data?.map((item) => (
- <div data-name={item.device_name}>
- <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>}
- onChange={(e) => {
- handleCollapse(item.id);
- }}
- >
- <Panel header={item.device_name} key={item.id}>
- <div className={styles.box}>
- <div className={styles.item}>{renderContent(1, item)}</div>
- </div>
- </Panel>
- </Collapse>
- </div>
- ))
- ) : (
- <Empty />
- )}
- </div>
- );
- }
- function AllContent({ data = [], videoData = {} }) {
- const { environment_list = [], fluid_level_list = [] } = videoData;
- const [selectedRowKeys, setSelectedRowKeys] = useState([]);
- const columns1 = [
- {
- title: '设备名称',
- render: (record) => (
- <div>
- {record.device_name}({record.device_code})
- </div>
- ),
- },
- {
- title: '参数',
- dataIndex: 'patrol_name',
- key: 'patrol_name',
- },
- {
- title: '设定值范围',
- render: (record) => (
- <ThresholdDetail
- current={record.value || 0}
- data={{ JsonNumThreshold: record?.json_num_threshold, Type: 2 }}
- // onClick={() => onClickThreshold(record)}
- />
- ),
- },
- {
- title: '状态',
- dataIndex: 'status',
- render: (status) => {
- switch (status) {
- case -1:
- case 0:
- return (
- <div>
- <i
- className={styles.iconStatus}
- style={{ background: '#12CEB3' }}
- ></i>
- 正常
- </div>
- );
- case 1:
- return (
- <div>
- <i
- className={styles.iconStatus}
- style={{ background: '#FE5850' }}
- ></i>
- 异常
- </div>
- );
- case 2:
- return (
- <div>
- <i
- className={styles.iconStatus}
- style={{ background: '#FFE26D' }}
- ></i>
- 警告
- </div>
- );
- }
- },
- },
- ];
- const columns2 = [
- {
- title: '设备名称',
- render: (record) => (
- <div>
- {record.device_name}({record.device_code})
- </div>
- ),
- },
- {
- title: '液位数',
- dataIndex: 'origin_value',
- key: 'origin_value',
- },
- {
- title: '差值',
- dataIndex: 'value',
- key: 'value',
- },
- {
- title: '设定值范围',
- render: (record) => (
- <ThresholdDetail
- current={record.value || 0}
- data={{ JsonNumThreshold: record?.json_num_threshold, Type: 2 }}
- // onClick={() => onClickThreshold(record)}
- />
- ),
- },
- {
- title: '状态',
- dataIndex: 'status',
- render: (status) => {
- switch (status) {
- case -1:
- case 0:
- return (
- <div>
- <i
- className={styles.iconStatus}
- style={{ background: '#12CEB3' }}
- ></i>
- 正常
- </div>
- );
- case 1:
- return (
- <div>
- <i
- className={styles.iconStatus}
- style={{ background: '#FE5850' }}
- ></i>
- 异常
- </div>
- );
- case 2:
- return (
- <div>
- <i
- className={styles.iconStatus}
- style={{ background: '#FFE26D' }}
- ></i>
- 警告
- </div>
- );
- }
- },
- },
- ];
- const columns3 = [
- {
- title: '名称',
- render: (record) => (
- <div>
- {record.device_name}({record.device_code})
- </div>
- ),
- },
- {
- title: '描述',
- dataIndex: 'event_type',
- key: 'event_type',
- },
- {
- title: '图片',
- render: (item) => (
- <img
- className={styles.img}
- src={item.url}
- onClick={() => handleImgClick(item)}
- />
- ),
- },
- ];
- const onSelectRow = (record, index) => {
- const selectedList = [...selectedRowKeys];
- if (selectedList[0] === index) return;
- selectedList[0] = index;
- setSelectedRowKeys(selectedList);
- UnityAction.sendMsg('SynDev', record.DeviceCode);
- };
- const setRowClassName = (record, index) => {
- return index === selectedRowKeys[0] ||
- record.DeviceCode == selectedRowKeys[0]
- ? styles.tableSelect
- : '';
- };
- return (
- <div
- className={styles.page}
- style={{ height: 'calc(100vh - 630px)', overflow: 'auto' }}
- >
- <div className={`card-box ${styles.box}`}>
- <ModuleTitle title="环境监测" />
- <Table
- dataSource={environment_list}
- columns={columns1}
- // rowClassName={setRowClassName}
- // onRow={(record, index) => ({
- // onClick: () => onSelectRow(record, index),
- // })}
- pagination={false}
- scroll={{ y: 400 }}
- />
- </div>
- <div className={`card-box ${styles.box}`}>
- <ModuleTitle title="液位检测" />
- <Table
- dataSource={fluid_level_list}
- columns={columns2}
- // rowClassName={setRowClassName}
- // onRow={(record, index) => ({
- // onClick: () => onSelectRow(record, index),
- // })}
- pagination={false}
- scroll={{ y: 400 }}
- />
- </div>
- <div className={`card-box ${styles.box}`}>
- <ModuleTitle title="感知监测" />
- <Table
- dataSource={data}
- columns={columns3}
- // rowClassName={setRowClassName}
- // onRow={(record, index) => ({
- // onClick: () => onSelectRow(record, index),
- // })}
- pagination={false}
- scroll={{ y: 400 }}
- />
- </div>
- </div>
- );
- }
- export default VideoAnalysis;
|