1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
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;