import React, { useState, useEffect, useContext } from 'react'; import PropTypes from 'prop-types'; import Empty from '@wisdom-components/empty'; import classNames from 'classnames'; import { Modal, Button, Tabs, Input, Radio, ConfigProvider } from 'antd'; import BasicTable from '@wisdom-components/basictable'; import './index.less'; const { TabPane } = Tabs; const RealTimeInfo = (props) => { const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); const prefixCls = getPrefixCls('realtime-info'); const { deviceConfService, pointAddressEntryService, sensorTypeService, deviceRealInfoService, deviceRealInfoParams, user, placeholder, defaultTargetValue, modalTitle, buttonText, } = props; const [isModalVisible, setIsModalVisible] = useState(false); const [targetValue, setTargetValue] = useState(defaultTargetValue); // 重点/全部 const [searchValue, setSearchValue] = useState(''); // 搜索框内容 const [columns, setColumns] = useState(defaultColumns); // 搜索框内容 const [tabData, setTabData] = useState([]); const [tabKey, setTabKey] = useState(''); const [guid, setGuid] = useState(''); const [deviceConf, setDeviceConf] = useState([]); // 设备配置 const [deviceInfo, setDeviceInfo] = useState({}); // 设备实时数据 const [sensorType, setSensorType] = useState({}); // sensorType const [pointAddress, setPointAddress] = useState([]); // pointAddress const [tableData, setTableData] = useState([]); // 表格数据 const [searchData, setSearchData] = useState([]); // 表格搜索数据 const handleTabData = (data = {}) => { let tData = []; tData.push({ key: data.code, title: data.name, guid: data.guid, versionID: data.versionID, deviceType: data.aName, }); if (data.child && data.child.length) { data.child.forEach((child) => { tData.push({ key: child.code, title: data.name + child.name, guid: child.guid, versionID: child.versionID, deviceType: child.aName, }); }); } setTabData(tData); setTabKey(tData[0].key); }; // 过滤重点指标 const filterEmphasis = (dataSource) => { const cur = tabData.filter((item) => item.key === tabKey); const conf = cur.length > 0 ? deviceConf.filter((item) => item.deviceType === cur[0].deviceType) : []; const dPoints = conf.length > 0 && conf[0].dPoints ? conf[0].dPoints.split(',') : []; const data = dataSource.filter((item) => dPoints.includes(item.name)); setSearchData(data); }; const handleFilterColumns = (data = []) => { const keyArr = defaultColumns.map((item) => item.dataIndex); const filter = []; keyArr.forEach((key) => { let length = 0; data.forEach((item) => { if (item[key] === '--' || item[key] === '') { length++; } }); if (data.length === length) { filter.push(key); } }); const column = defaultColumns.filter((item) => !filter.includes(item.dataIndex)); setColumns(column); setTableData(data); }; const handleData = (data1 = [], data2 = [], data3 = {}) => { let time = data3.pt; if (time) time = time.slice(5, 19).replace('-', '/'); let newData = data1.map((item, index) => { return { id: item.id, key: item.id, index: index + 1, name: item.name, value: 0, unit: '--', type: '--', time: time, desc: item.valDesc || '--', ...item, }; }); newData.forEach((item) => { let curData1 = data2.filter((child) => child.id == item.sensorTypeID); let curData2 = data3.dataList.filter((child) => child.paid == item.id); if (curData1.length) { item.unit = curData1[0].unit || '--'; item.type = curData1[0].name || '--'; } if (curData2.length) { item.value = curData2[0].pv || '--'; } }); handleFilterColumns(newData); const data = searchValue ? newData.filter((item) => item.name.indexOf(searchValue) !== -1) : newData; if (targetValue === 'emphasis') { filterEmphasis(data); } else { setSearchData(data); } }; const GetDeviceConf = () => { const deviceType = deviceRealInfoParams.accountFieldParams.length > 0 ? deviceRealInfoParams.accountFieldParams.map((item) => item.AName).join(',') : '二供泵房,二供机组'; deviceConfService({ user, showAll: true, deviceType, }).then((res) => { if (res.code === 0 && res.data.length) { setDeviceConf(res.data); } }); }; const GetDeviceRealInfo = () => { deviceRealInfoService(deviceRealInfoParams).then((res) => { if (res.code === 0 && res.data) { setDeviceInfo(res.data.list[0]); handleTabData(res.data.list[0]); } }); }; const GetSensorType = () => { sensorTypeService({}).then((res) => { if (res.code === 0 && res.data.length) { setSensorType(res.data); } }); }; const GetPointAddressEntry = () => { const cur = tabData.filter((item) => item.key === tabKey); !!cur.length && pointAddressEntryService({ versionID: cur[0].versionID }).then((res) => { if (res.code === 0 && res.data.length) { setPointAddress(res.data); } }); }; useEffect(() => { if (isModalVisible) { GetDeviceConf(); GetDeviceRealInfo(); GetSensorType(); } }, [isModalVisible]); useEffect(() => { GetPointAddressEntry(); }, [tabKey]); useEffect(() => { handleData(pointAddress, sensorType, deviceInfo); }, [pointAddress]); useEffect(() => { if (targetValue === 'emphasis') { // 重点指标 filterEmphasis(searchData); } else { // 全部 if (searchValue) { const data = tableData.filter((item) => item.name.indexOf(searchValue) !== -1); setSearchData(data); } else { setSearchData(tableData); } } }, [targetValue]); const showModal = () => { setIsModalVisible(true); }; const handleOk = () => { setIsModalVisible(false); }; const handleCancel = () => { setIsModalVisible(false); }; const onSearch = (e) => { // 前端搜索 if (e.target.value) { if (targetValue === 'emphasis') { // 重点指标 const cur = tabData.filter((item) => item.key === tabKey); const conf = cur.length > 0 ? deviceConf.filter((item) => item.deviceType === cur[0].deviceType) : []; const dPoints = conf.length > 0 && conf[0].dPoints ? conf[0].dPoints.split(',') : []; const data = tableData.filter((item) => dPoints.includes(item.name)); const newDate = data.filter((item) => item.name.indexOf(e.target.value) !== -1); setSearchData(newDate); } else { // 全部 const data = tableData.filter((item) => item.name.indexOf(e.target.value) !== -1); setSearchData(data); } } else { if (targetValue === 'emphasis') { // 重点指标 filterEmphasis(tableData); } else { // 全部 setSearchData(tableData); } } setSearchValue(e.target.value); }; const onTabChange = (key) => { const g = tabData.filter((item) => item.key === key); setGuid(g[0].guid); setTabKey(key); }; const onRadioChange = (e) => { setTargetValue(e.target.value); }; const renderTitle = () => { return ( <div className={classNames(`${prefixCls}-modal-title`)}> <Tabs tabBarExtraContent={{ left: <h3 style={{ fontWeight: 'bold' }}>{modalTitle}</h3> }} activeKey={tabKey} onChange={onTabChange} centered > {tabData.map((item) => ( <TabPane tab={item.title} key={item.key} /> ))} </Tabs> </div> ); }; return ( <div className={classNames(prefixCls)}> <Button type="link" onClick={showModal}> {buttonText} </Button> <Modal className={classNames(`${prefixCls}-modal`)} width={915} title={renderTitle()} footer={null} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} > <div className={classNames(`${prefixCls}-modal-content`)}> <div className={classNames(`${prefixCls}-search-wrap`)}> <div className={classNames(`${prefixCls}-search`)}> <div className={classNames(`${prefixCls}-label`)}>搜索:</div> <Input placeholder={placeholder} onChange={onSearch} value={searchValue} /> </div> <div className={classNames(`${prefixCls}-target`)}> <div className={classNames(`${prefixCls}-label`)}>指标:</div> <Radio.Group onChange={onRadioChange} defaultValue={targetValue}> <Radio.Button value="emphasis">重点指标</Radio.Button> <Radio.Button value="all">全部</Radio.Button> </Radio.Group> </div> </div> <div className={classNames(`${prefixCls}-code-wrap`)}> <div>采集编码:{guid || '--'}</div> <div>更新时间:{(tableData.length && tableData[0].time) || '--'}</div> </div> <div className={classNames(`${prefixCls}-modal-table`)}> <BasicTable bordered columns={columns} locale={{ emptyText: <Empty /> }} pagination={false} dataSource={searchData} {...props} /> </div> </div> </Modal> </div> ); }; RealTimeInfo.defaultProps = { buttonText: '查看更多', modalTitle: '实时指标监控', placeholder: '输入指标名称等', defaultTargetValue: 'emphasis', user: null, deviceRealInfoParams: {}, deviceConfService: () => {}, pointAddressEntryService: () => {}, sensorTypeService: () => {}, deviceRealInfoService: () => {}, }; RealTimeInfo.propTypes = { buttonText: PropTypes.string, modalTitle: PropTypes.string, placeholder: PropTypes.string, defaultTargetValue: PropTypes.string, user: PropTypes.string, deviceRealInfoParams: PropTypes.object, deviceConfService: PropTypes.func, pointAddressEntryService: PropTypes.func, sensorTypeService: PropTypes.func, deviceRealInfoService: PropTypes.func, }; export default RealTimeInfo; const defaultColumns = [ { title: '序号', dataIndex: 'index', width: 60, }, { title: '指标名称', dataIndex: 'name', width: 150, }, { title: '最新指标', dataIndex: 'value', render: (text) => <a>{text}</a>, }, { title: '单位', dataIndex: 'unit', }, { title: '指标类型', dataIndex: 'type', }, { title: '数据描述', dataIndex: 'desc', }, { title: '更新时间', dataIndex: 'time', }, ];