import TabsContent from '@/components/TabsContent';
import { UnityAction } from '@/utils/utils';
import { connect } from '@umijs/max';
import { Button, Spin, Table, Tabs } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import ThresholdBar from './components/ThresholdBar';
import styles from './index.less';
const { TabPane } = Tabs;
const Analysis = (props) => {
const Status = [
{ name: '异常', type: '1', data: [] },
{ name: '警告', type: '2', data: [] },
{ name: '提醒', type: '3', data: [] },
];
const { list = [], processList, loading } = props;
const [selectedRowKeys, setSelectedRowKeys] = useState();
const [tab, setTab] = useState('1');
const columns = [
{
title: '设备名称',
width: '20%',
render: (record) => (
{record.DeviceName}({record.DeviceCode})
),
},
{
title: '工艺单元',
width: '14%',
dataIndex: 'ProcessSectionId',
render: (id) => {
return processList.find((item) => item.id == id)?.name;
},
},
{
title: '阈值范围',
width: '14%',
render: (record) => {
// let thresholds = [-3,4,6,1];
let thresholds = record.fault_range.split(',');
return (
{record.fault_range && (
)}
{record.plcs && (
)}
);
},
},
{
title: '可能原因',
width: '20%',
dataIndex: 'Reason',
},
{
title: '解决方案',
render: (record) => {
if (record.FixPlan instanceof Array) {
return (
{record.FixPlan.map((item) => (
{item.content}
))}
);
} else {
return record.FixPlan;
}
},
},
];
useEffect(() => {
UnityAction.on('SynDev', selectedItem);
return () => UnityAction.off('SynDev', selectedItem);
}, [data, tab]);
const selectedItem = (e) => {
setSelectedRowKeys(e);
console.log(data);
// alert(e)
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.index}"]`);
if (dom) {
let v = document.getElementsByClassName('ant-table-body')[itemIndex];
v.scrollTop = dom.offsetTop;
}
}
};
const data = useMemo(() => {
return Status.map((item, idx) => {
const data = list?.filter((cur) => cur.grade_alarm == item.type);
return { ...item, data };
});
}, [list]);
const handleBtnClick = (plcs, title) => {
if (!plcs) return;
const msg = JSON.stringify(plcs); //[{ dataitemid: 'Raw_Water_Tank_Level', deviceid: '1436022785' }]
// router.push(`/unity/smart-ops/chart-page/46?type=2&data=${msg}`);
UnityAction.sendMsg(
'ProcessAnalysisAbout',
JSON.stringify({
title,
data: msg,
}),
);
};
const onTabChange = (tab) => {
setTab(tab);
setSelectedRowKeys(null);
UnityAction.sendMsg('ProcessAnalysisType', 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;
}
};
return (
{
return {
label: `${item.name}(${item.data?.length || 0})`,
key: item.type,
children: (
({
onClick: () => onSelectRow(record, index),
})}
pagination={false}
scroll={{ y: document.body.clientHeight - 730 }}
/>
),
};
})}
onChange={onTabChange}
/>
);
};
export default connect(({ smartOps, loading }) => ({
loading: loading.effects['smartOps/queryList'],
list: smartOps.list.list,
processList: smartOps.processList,
}))(Analysis);