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 (
);
};