|
1 | | -import React from 'react'; |
2 | | -import { Card, Col, DatePicker, Row, Tabs } from 'antd'; |
3 | | -import { FormattedMessage } from 'umi-plugin-react/locale'; |
| 1 | +import React, { useEffect, useState } from 'react'; |
| 2 | +import { Card, Col, DatePicker, message, Radio, Row, Tabs } from 'antd'; |
4 | 3 | import styles from '../style.less'; |
5 | 4 | import { ISalesData } from '../data'; |
6 | | -import { RangePickerValue } from 'antd/es/date-picker/interface'; |
7 | 5 | import Grouped from './Charts/Grouped/index'; |
| 6 | +import apis from '@/services'; |
| 7 | +import { State } from '@/pages/analysis/components/SalesCard'; |
| 8 | +import moment from 'moment'; |
| 9 | +import Select from 'antd/es/select'; |
8 | 10 |
|
9 | | -const { RangePicker } = DatePicker; |
10 | 11 | const { TabPane } = Tabs; |
11 | 12 |
|
12 | | -const TopSearch = ({ |
13 | | - rangePickerValue, |
14 | | - salesData, |
15 | | - isActive, |
16 | | - handleRangePickerChange, |
17 | | - loading, |
18 | | - selectDate, |
19 | | - }: { |
20 | | - rangePickerValue: RangePickerValue; |
21 | | - isActive: (key: 'today' | 'week' | 'month' | 'year') => string; |
22 | | - salesData: ISalesData[]; |
23 | | - loading: boolean; |
24 | | - handleRangePickerChange: (dates: RangePickerValue, dateStrings: [string, string]) => void; |
25 | | - selectDate: (key: 'today' | 'week' | 'month' | 'year') => void; |
26 | | -}) => ( |
27 | | - <Card loading={loading} bordered={false} bodyStyle={{ padding: 0,marginTop: 24 }}> |
28 | | - <div className={styles.salesCard}> |
29 | | - <Tabs |
30 | | - tabBarExtraContent={ |
31 | | - <div className={styles.salesExtraWrap}> |
32 | | - <div className={styles.salesExtra}> |
33 | | - <a className={isActive('today')} onClick={() => selectDate('today')}> |
34 | | - <FormattedMessage id="analysis.analysis.all-day" defaultMessage="All Day"/> |
35 | | - </a> |
36 | | - <a className={isActive('week')} onClick={() => selectDate('week')}> |
37 | | - <FormattedMessage id="analysis.analysis.all-week" defaultMessage="All Week"/> |
38 | | - </a> |
39 | | - <a className={isActive('month')} onClick={() => selectDate('month')}> |
40 | | - <FormattedMessage id="analysis.analysis.all-month" defaultMessage="All Month"/> |
41 | | - </a> |
42 | | - <a className={isActive('year')} onClick={() => selectDate('year')}> |
43 | | - <FormattedMessage id="analysis.analysis.all-year" defaultMessage="All Year"/> |
44 | | - </a> |
45 | | - </div> |
46 | | - <RangePicker |
47 | | - value={rangePickerValue} |
48 | | - onChange={handleRangePickerChange} |
49 | | - style={{ width: 200 }} |
50 | | - /> |
51 | | - </div> |
| 13 | +export interface State { |
| 14 | + gatewayDataList: any[]; |
| 15 | + ticksDataList: any[]; |
| 16 | + currentTime: string; |
| 17 | + time: string; |
| 18 | + selectionTime: string; |
| 19 | + productDataList: any[]; |
| 20 | + defaultList: any[]; |
| 21 | + dataList: ISalesData[]; |
| 22 | + state: string; |
| 23 | + productId: any[]; |
| 24 | + productData: any; |
| 25 | +} |
| 26 | + |
| 27 | +const TopSearch = ({ loading }: { loading: boolean; }) => { |
| 28 | + |
| 29 | + let gatewayMonitor: (from: string, to: string, time: string, productId: any[]) => void; |
| 30 | + |
| 31 | + const initState: State = { |
| 32 | + gatewayDataList: [], |
| 33 | + ticksDataList: [], |
| 34 | + currentTime: '', |
| 35 | + time: '', |
| 36 | + selectionTime: '', |
| 37 | + productDataList: [], |
| 38 | + defaultList: [], |
| 39 | + dataList: [], |
| 40 | + state: '', |
| 41 | + productId: [], |
| 42 | + productData: {}, |
| 43 | + }; |
| 44 | + |
| 45 | + const [productDataList, setProductDataList] = useState(initState.productDataList); |
| 46 | + const [defaultList, setDefaultList] = useState(initState.defaultList); |
| 47 | + const [dataList, setDataList] = useState(initState.dataList); |
| 48 | + const [stateType, setState] = useState(initState.state); |
| 49 | + const [productId, setProductId] = useState(initState.productId); |
| 50 | + const [productData, setProductData] = useState(initState.productData); |
| 51 | + |
| 52 | + const [gatewayData, setGatewayData] = useState(initState.gatewayDataList); |
| 53 | + const [ticksDataList, setTicksDataList] = useState(initState.ticksDataList); |
| 54 | + const [time, setTime] = useState(initState.time); |
| 55 | + const [selectionTime, setSelectionTime] = useState(initState.selectionTime); |
| 56 | + |
| 57 | + const calculationDate = (val: number) => { |
| 58 | + const dd = new Date(); |
| 59 | + dd.setDate(dd.getDate() - val); |
| 60 | + return `${dd.getFullYear()}-${(dd.getMonth() + 1) < 10 ? `0${dd.getMonth() + 1}` : (dd.getMonth() + 1)}-${dd.getDate() < 10 ? `0${dd.getDate()}` : dd.getDate()} ${dd.getHours() < 10 ? `0${dd.getHours()}` : dd.getHours()}:${dd.getMinutes() < 10 ? `0${dd.getMinutes()}` : dd.getMinutes()}:${dd.getSeconds() < 10 ? `0${dd.getSeconds()}` : dd.getSeconds()}`; |
| 61 | + }; |
| 62 | + |
| 63 | + const timeMap = { |
| 64 | + '1h': '1m', |
| 65 | + '1d': '24m', |
| 66 | + '7d': '168m', |
| 67 | + '30d': '12h', |
| 68 | + }; |
| 69 | + |
| 70 | + useEffect(() => { |
| 71 | + apis.deviceProdcut |
| 72 | + .queryNoPagin() |
| 73 | + .then(response => { |
| 74 | + const tempResult = response?.result; |
| 75 | + if (tempResult) { |
| 76 | + let list = []; |
| 77 | + for (let i = 0; i < tempResult.length; i++) { |
| 78 | + productData[tempResult[i].id] = tempResult[i].name; |
| 79 | + productDataList.push(<Select.Option key={tempResult[i].id}>{tempResult[i].name}</Select.Option>); |
| 80 | + if (i < 6) { |
| 81 | + list.push(tempResult[i].id); |
| 82 | + setDefaultList(defaultList.push(tempResult[i].id)); |
| 83 | + } |
| 84 | + } |
| 85 | + setProductId(list); |
| 86 | + let da = new Date(); |
| 87 | + da.setHours(da.getHours() - 1); |
| 88 | + setSelectionTime(calculationDate(0)); |
| 89 | + setTime('1m'); |
| 90 | + |
| 91 | + gatewayMonitor(formatData(da), calculationDate(0), '1m',defaultList); |
52 | 92 | } |
53 | | - size="large" |
54 | | - tabBarStyle={{ marginBottom: 24 }} |
55 | | - > |
56 | | - <TabPane |
57 | | - tab={'设备消息量'} |
58 | | - key="sales" |
| 93 | + }) |
| 94 | + .catch(() => { |
| 95 | + }); |
| 96 | + }, []); |
| 97 | + |
| 98 | + gatewayMonitor = (from, to, time, productId) => { |
| 99 | + |
| 100 | + let formatData = ''; |
| 101 | + |
| 102 | + if (time === '1m') { |
| 103 | + formatData = 'HH时mm分'; |
| 104 | + } else if (time === '12h') { |
| 105 | + formatData = 'MM月dd日HH时'; |
| 106 | + } else { |
| 107 | + formatData = 'MM月dd日HH时mm分'; |
| 108 | + } |
| 109 | + const list = []; |
| 110 | + productId.forEach(item => { |
| 111 | + list.push({ |
| 112 | + 'dashboard': 'device', |
| 113 | + 'object': 'message', |
| 114 | + 'measurement': 'quantity', |
| 115 | + 'dimension': 'agg', |
| 116 | + 'group': item, |
| 117 | + 'params': { |
| 118 | + 'productId': item, |
| 119 | + 'time': time || '1m', |
| 120 | + 'format': formatData, |
| 121 | + 'from': from, |
| 122 | + 'to': to, |
| 123 | + }, |
| 124 | + }); |
| 125 | + }); |
| 126 | + |
| 127 | + apis.analysis.getMulti(list) |
| 128 | + .then((response: any) => { |
| 129 | + const tempResult = response?.result; |
| 130 | + if (tempResult) { |
| 131 | + const dataList = []; |
| 132 | + tempResult.forEach(item => { |
| 133 | + dataList.push({ |
| 134 | + label: productData[item.group], |
| 135 | + 消息量: item.data.value |
| 136 | + }); |
| 137 | + }); |
| 138 | + setGatewayData(dataList); |
| 139 | + } |
| 140 | + }); |
| 141 | + }; |
| 142 | + |
| 143 | + function handleChange(value) { |
| 144 | + if (value.length > 6) { |
| 145 | + message.error('设备型号最多只能勾选6个'); |
| 146 | + return false; |
| 147 | + } |
| 148 | + setProductId(value); |
| 149 | + const dd = new Date(selectionTime); |
| 150 | + gatewayMonitor(formatData(dd), formatData(new Date()), time, value); |
| 151 | + } |
| 152 | + |
| 153 | + function deviceTime(e) { |
| 154 | + const value = e.target.value; |
| 155 | + setTime(timeMap[value]); |
| 156 | + const dd = new Date(selectionTime); |
| 157 | + |
| 158 | + if (value === '1h') { |
| 159 | + dd.setHours(dd.getHours() - 1); |
| 160 | + } else if (value === '1d') { |
| 161 | + dd.setDate(dd.getDate() - 1); |
| 162 | + } else if (value === '7d') { |
| 163 | + dd.setDate(dd.getDate() - 7); |
| 164 | + } else if (value === '30d') { |
| 165 | + dd.setDate(dd.getDate() - 30); |
| 166 | + } |
| 167 | + gatewayMonitor(formatData(dd), formatData(new Date()), timeMap[value], productId); |
| 168 | + } |
| 169 | + |
| 170 | + const formatData = (value: string) => { |
| 171 | + const dd = new Date(value); |
| 172 | + return `${dd.getFullYear()}-${(dd.getMonth() + 1) < 10 ? `0${dd.getMonth() + 1}` : (dd.getMonth() + 1)}-${dd.getDate() < 10 ? `0${dd.getDate()}` : dd.getDate()} ${dd.getHours() < 10 ? `0${dd.getHours()}` : dd.getHours()}:${dd.getMinutes() < 10 ? `0${dd.getMinutes()}` : dd.getMinutes()}:${dd.getSeconds() < 10 ? `0${dd.getSeconds()}` : dd.getSeconds()}`; |
| 173 | + }; |
| 174 | + |
| 175 | + function onOk(value) { |
| 176 | + setSelectionTime(value); |
| 177 | + const dd = new Date(value); |
| 178 | + if (time === '1m') { |
| 179 | + dd.setHours(dd.getHours() - 1); |
| 180 | + } else if (time === '24m') { |
| 181 | + dd.setDate(dd.getDate() - 1); |
| 182 | + } else if (time === '168m') { |
| 183 | + dd.setDate(dd.getDate() - 7); |
| 184 | + } else if (time === '12h') { |
| 185 | + dd.setDate(dd.getDate() - 30); |
| 186 | + } |
| 187 | + gatewayMonitor(formatData(dd), formatData(value), time, productId); |
| 188 | + } |
| 189 | + |
| 190 | + return ( |
| 191 | + <Card loading={loading} bordered={false} bodyStyle={{ padding: 0, marginTop: 24 }}> |
| 192 | + <div className={styles.salesCard}> |
| 193 | + <Tabs |
| 194 | + tabBarExtraContent={ |
| 195 | + <div className={styles.salesExtraWrap}> |
| 196 | + <div className={styles.salesExtra}> |
| 197 | + <Radio.Group defaultValue="1h" onChange={deviceTime}> |
| 198 | + <Radio.Button value="1h"> |
| 199 | + 1小时 |
| 200 | + </Radio.Button> |
| 201 | + <Radio.Button value="1d"> |
| 202 | + 1天 |
| 203 | + </Radio.Button> |
| 204 | + <Radio.Button value="7d"> |
| 205 | + 7天 |
| 206 | + </Radio.Button> |
| 207 | + <Radio.Button value="30d"> |
| 208 | + 30天 |
| 209 | + </Radio.Button> |
| 210 | + </Radio.Group> |
| 211 | + </div> |
| 212 | + <DatePicker showTime defaultValue={moment(new Date(), 'yyyy-MM-dd HH:mm:ss')} |
| 213 | + placeholder="结束时间" onOk={onOk} format="YYYY-MM-DD HH:mm:ss"/> |
| 214 | + </div> |
| 215 | + } |
| 216 | + size="large" |
| 217 | + tabBarStyle={{ marginBottom: 24 }} |
59 | 218 | > |
60 | | - <Row> |
61 | | - <Col> |
62 | | - <div className={styles.salesBar}> |
63 | | - <Grouped |
64 | | - height={400} |
65 | | - title={ |
66 | | - '连接数量' |
67 | | - } |
68 | | - data={salesData} |
69 | | - /> |
| 219 | + <TabPane |
| 220 | + tab={'设备消息量'} |
| 221 | + key="sales" |
| 222 | + > |
| 223 | + <Row> |
| 224 | + <div> |
| 225 | + <Select mode="tags" defaultValue={defaultList} maxTagTextLength={3} |
| 226 | + maxTagCount={3} |
| 227 | + style={{ width: '50%', float: 'right', marginBottom: 32, marginRight: 25 }} |
| 228 | + placeholder="设备型号" onChange={handleChange}> |
| 229 | + {productDataList} |
| 230 | + </Select> |
70 | 231 | </div> |
71 | | - </Col> |
72 | | - </Row> |
73 | | - </TabPane> |
74 | | - </Tabs> |
75 | | - </div> |
76 | | - </Card> |
77 | | -); |
| 232 | + <Col> |
| 233 | + <div className={styles.salesBar} style={{ marginTop: 30 }}> |
| 234 | + <Grouped |
| 235 | + height={300} |
| 236 | + title={ |
| 237 | + '连接数量' |
| 238 | + } |
| 239 | + data={gatewayData} |
| 240 | + /> |
| 241 | + </div> |
| 242 | + </Col> |
| 243 | + </Row> |
| 244 | + </TabPane> |
| 245 | + </Tabs> |
| 246 | + </div> |
| 247 | + </Card> |
| 248 | + ); |
| 249 | +}; |
78 | 250 |
|
79 | 251 | export default TopSearch; |
0 commit comments