import React, { useEffect, useState } from 'react'; import styles from './NormChart.less'; import { monitorService } from '../api'; import { Checkbox, Row, Input, Tooltip, Tag, Spin } from 'antd'; import ECHistoryInfo from '@wisdom-components/ec_historyinfo'; import HistoryView from '@wisdom-components/ec_historyview'; const { Search } = Input; const CheckboxGroup = Checkbox.Group; const NormChart = (props) => { const { deviceType, deviceCode, info } = props; const [normList, setNormList] = useState([]); const [checkedList, setCheckedList] = useState([info.sensorName]); const [searchStr, setSearchStr] = useState(''); const [normListLoading, setNormListLoading] = useState(false); const getPumpConfig = () => { setNormListLoading(true); monitorService .GetDeviceQuotaList({ accountName: deviceType, }) .then((res) => { if (res.code === 0) { setNormList(res.data); } else { setNormList([]); } setNormListLoading(false); }) .catch((err) => { setNormListLoading(false); }); }; const onChange = (e) => { setCheckedList(e); }; const search = (e) => { setSearchStr(e.target.value); }; useEffect(() => { getPumpConfig(); }, []); return ( <div className={styles.normChart}> <div className={styles.listWrapper}> <div className={styles.normList}> <h3 className={styles.listTitle}>泵房指标</h3> <Search onChange={search} style={{ marginBottom: 10 }} /> <CheckboxGroup style={{ height: 'calc(100% - 77px)', overflowY: 'scroll' }} onChange={onChange} value={checkedList} > <div style={{ display: 'flex', flexDirection: 'column', overflowY: 'scroll' }}> {normList .filter((item) => item.name.includes(searchStr)) .map((item) => { return ( <Row style={{ width: 'calc(100% - 20px)' }}> <Checkbox value={item.name}> <Tooltip title={item.name}> <div style={{ width: '120px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }} > {item.name} </div> </Tooltip> </Checkbox> </Row> ); })} </div> </CheckboxGroup> </div> </div> <div className={styles.chartWrapper}> <Spin className={styles.normSpin} spinning={normListLoading} /> {checkedList && checkedList.length ? ( <div className={styles.selectedNorm}> <h3 className={styles.listTitle}>已选指标</h3> <div className={styles.selectedNormWrapper}> {checkedList.map((item) => { return ( <Tag style={{ marginBottom: 8 }} closable color="#108ee9" onClose={() => { let _checkedList = [...checkedList]; _checkedList = _checkedList.filter((checked) => checked !== item); setCheckedList(_checkedList); }} > {item} </Tag> ); })} </div> </div> ) : ( '' )} <div className={styles.chart}> {checkedList && checkedList.length && ( <HistoryView title={'历史数据'} deviceParams={[ { deviceCode, deviceType, sensors: checkedList.join(','), }, ]} /> )} </div> </div> </div> ); }; export default NormChart;