import ModuleTitle from '@/components/ManagementPage/moduleTitle'; import TabsContent from '@/components/TabsContent'; import ThresholdDetail from '@/components/ThresholdDetail'; import { UnityAction } from '@/utils/utils'; import { connect } from '@umijs/max'; import { Table, Tabs } from 'antd'; import dayjs from 'dayjs'; import { useEffect, useMemo, useState } from 'react'; import styles from './DeviceAnalysis.less'; const { TabPane } = Tabs; const DeviceAnalysis = (props) => { const Status = [ { name: '异常', type: '0', data: [] }, { name: '全部', type: '1 ', data: [] }, ]; const { loading, autoReport } = props; const [selectedRowKeys, setSelectedRowKeys] = useState(); const [tab, setTab] = useState('1'); const columns = [ { title: '设备名称', render: (record) => (
{record.DeviceName}({record.DeviceCode})
), }, { title: '巡检项', width: '14%', dataIndex: 'TemplateItem', render: (TemplateItem) =>
{TemplateItem.Name}
, }, { title: '设定值范围', width: '40%', render: (record) => ( onClickThreshold(record)} /> ), }, { title: '状态', width: '14%', dataIndex: 'Status', render: (Status) => { switch (Status) { case -1: case 0: return (
正常
); case 1: return (
异常
); case 2: return (
警告
); } }, }, ]; useEffect(() => { UnityAction.on('SynDev', selectedItem); return () => UnityAction.off('SynDev', selectedItem); }, [data, tab]); const selectedItem = (e) => { setSelectedRowKeys(e); console.log(data); const itemIndex = data?.findIndex((item) => item.type == tab); const item = data[itemIndex]?.data?.find((item) => item.DeviceCode == e); if (item) { const dom = document.querySelector(`tr[data-row-key="${item.Id}"]`); if (dom) { let v = document.getElementsByClassName('ant-table-body')[itemIndex]; v.scrollTop = dom.offsetTop; } } }; const data = useMemo(() => { return [ { name: '异常', type: '1', data: autoReport?.extendWarningData, FluidLevelList: autoReport?.FluidLevelList?.filter( (item) => item.status && !item.history, ), DrugFlowList: autoReport?.DrugFlowList?.filter( (item) => item.status && !item.history, ), WaterInCheckList: autoReport?.WaterInCheckList?.filter( (item) => item.status, ), PressureCompareList: autoReport?.PressureCompareList?.filter( (item) => !item.history, ), WaterQualityCompareList: autoReport?.WaterQualityCompareList?.filter( (item) => !item.history, ), }, { name: '全部', type: '2', data: autoReport?.extendWarningAllData, FluidLevelList: autoReport?.FluidLevelList, DrugFlowList: autoReport?.DrugFlowList, WaterInCheckList: autoReport?.WaterInCheckList, PressureCompareList: autoReport?.PressureCompareList, WaterQualityCompareList: autoReport?.WaterQualityCompareList, }, ]; }, [autoReport]); const onTabChange = (tab) => { setTab(tab); setSelectedRowKeys(null); UnityAction.sendMsg('DevAnalysisType', tab); }; // const rowSelection = { // type: 'radio', // selectedRowKeys, // onChange: (selectedRowKeys, selectedRows) => { // setSelectedRowKeys(selectedRowKeys); // UnityAction.sendMsg('SynDev', selectedRows[0].DeviceCode); // }, // }; const onSelectRow = (record, index) => { // const selectedList = [...selectedRowKeys]; // if (selectedList[0] === index) return; // selectedList[0] = index; setSelectedRowKeys(index); UnityAction.sendMsg('SynDev', record.DeviceCode); }; const setRowClassName = (record, index) => { if (!selectedRowKeys && selectedRowKeys !== 0) return; if (selectedRowKeys == index || selectedRowKeys == record.DeviceCode) { return styles.tableSelect; } }; const calculateLength = (params) => { let length = 0; Object.keys(params).forEach((key) => { if (key !== 'name' && key !== 'type') { length += params[key]?.length; } }); return length; }; return (
{ return { label: `${item.name}(${calculateLength(item) || 0})`, key: item.type, children: ( <> {(item.type === '1' ? item?.data?.length > 0 : true) && ( <> ({ onClick: () => onSelectRow(record, index), })} pagination={false} // scroll={{ y: document.body.clientHeight - 730 }} /> )} {(item.type === '1' ? item?.FluidLevelList?.length > 0 : true) && ( )} {(item.type === '1' ? item?.DrugFlowList?.length > 0 : true) && ( )} {(item.type === '1' ? item?.WaterInCheckList?.length > 0 : true) && ( )} {(item.type === '1' ? item?.PressureCompareList?.length > 0 : true) && ( )} {(item.type === '1' ? item?.WaterQualityCompareList?.length > 0 : true) && ( )} ), }; })} onChange={onTabChange} /> ); }; export default connect(({ eqSelfInspection, loading }) => ({ loading: loading.effects['eqSelfInspection/getPatrolDataById'], autoReport: eqSelfInspection.autoReport, }))(DeviceAnalysis); const LiquidLevel = (props) => { const { allData, type } = props; const columns = [ { title: '设备名称', width: '14%', dataIndex: 'device_name', }, { title: '时间', dataIndex: 'record_time', render: (text) => { if (text) { return dayjs(text).format('YYYY.MM.DD HH:mm'); } }, }, { title: '类型', key: 'template_item_name', dataIndex: 'template_item_name', }, { title: '液位数', dataIndex: 'origin_value', }, { title: '差值/比值', dataIndex: 'value', }, { title: '设定值范围', width: '20%', render: (record) => ( ), }, { title: '状态', dataIndex: 'status', width: '1.25rem', render: (status) => { switch (status) { case -1: case 0: return (
正常
); case 1: return (
异常
); case 2: return (
警告
); default: return (
异常
); } }, }, ]; return (
); }; const DosingFlow = (props) => { const { allData, type } = props; const columns = [ { title: '设备名称', width: '14%', dataIndex: 'device_name', }, { title: '时间', dataIndex: 'record_time', render: (text) => { if (text) { return dayjs(text).format('YYYY.MM.DD HH:mm'); } }, }, { title: '类型', key: 'template_item_name', dataIndex: 'template_item_name', }, { title: '实际流量', dataIndex: 'origin_value', }, { title: '计量流量', dataIndex: 'value', }, { title: '差值/比值', dataIndex: 'value', }, { title: '设定值范围', width: '20%', render: (record) => ( ), }, { title: '状态', dataIndex: 'status', width: '1.25rem', render: (status) => { switch (status) { case -1: case 0: return (
正常
); case 1: return (
异常
); case 2: return (
警告
); default: return (
异常
); } }, }, ]; return (
); }; const WaterFlow = (props) => { const { allData, type } = props; const columns = [ { title: '设备名称', width: '20%', dataIndex: 'item_alias', }, // { // title: '实际流量', // width: '20%', // dataIndex: 'current_val', // }, // { // title: '计量流量', // width: '16%', // dataIndex: 'thresholds', // }, { title: '差值', // width: '15%', dataIndex: 'current_val', }, { title: '时间', // width: '15%', dataIndex: 'create_time', render: (text) => { if (text) { return dayjs(text).format('HH:mm:ss'); } return '-'; }, }, { title: '设定值范围', width: '30%', render: (record) => ( ), }, { title: '状态', dataIndex: 'status', width: '1.25rem', render: (status) => { switch (status) { case -1: case 0: return (
正常
); case 1: return (
异常
); case 2: return (
警告
); default: return (
异常
); } }, }, ]; return (
); }; const PressureGauge = (props) => { const { allData, type } = props; const columns = [ { title: '设备名称', width: '20%', key: 'item_alias', dataIndex: 'item_alias', }, { title: '时间范围', key: 'dataRange', width: '1.5rem', render: (record) => { if (record.query_start && record.query_end) { return ( <> {dayjs(record.query_start).format('HH:mm:ss')}
{dayjs(record.query_end).format('HH:mm:ss')} ); } return '-'; }, }, { title: ( <> 仪表
最小数 ), width: '1.25rem', key: 'data_min', dataIndex: 'data_min', }, { title: ( <> 仪表
最大数 ), width: '1.25rem', key: 'data_max', dataIndex: 'data_max', }, { title: '可能原因', key: 'content', dataIndex: 'content', }, { title: '状态', key: 'status', dataIndex: 'status', width: '1.25rem', render: (status) => { switch (status) { case -1: case 0: return (
正常
); case 1: return (
异常
); case 2: return (
警告
); default: return (
异常
); } }, }, ]; return (
); }; const WaterQuality = (props) => { const { allData, type } = props; const columns = [ { title: '设备名称', width: '20%', key: 'item_alias', dataIndex: 'item_alias', }, { title: '时间范围', key: 'dataRange', width: '1.5rem', render: (record) => { if (record.query_start && record.query_end) { return ( <> {dayjs(record.query_start).format('HH:mm:ss')}
{dayjs(record.query_end).format('HH:mm:ss')} ); } return '-'; }, }, { title: ( <> 仪表
最小数 ), width: '1.25rem', key: 'data_min', dataIndex: 'data_min', }, { title: ( <> 仪表
最大数 ), width: '1.25rem', key: 'data_max', dataIndex: 'data_max', }, { title: '可能原因', key: 'content', dataIndex: 'content', }, { title: '状态', key: 'status', dataIndex: 'status', width: '1.25rem', render: (status) => { switch (status) { case -1: case 0: return (
正常
); case 1: return (
异常
); case 2: return (
警告
); default: return (
异常
); } }, }, ]; return (
); };