|
@@ -5,6 +5,16 @@ import SquareBox from '@/components/ScreenBox/SquareBox';
|
5
|
5
|
import StatisCard from '@/components/ScreenBox/StatisCard';
|
6
|
6
|
import classNames from 'classnames';
|
7
|
7
|
import { useEffect, useRef, useState } from 'react';
|
|
8
|
+import {
|
|
9
|
+ getBasic,
|
|
10
|
+ getOrgDetail,
|
|
11
|
+ getTypeList,
|
|
12
|
+ getAreaDetail,
|
|
13
|
+ getMachineryBar,
|
|
14
|
+ getWorkNumPie,
|
|
15
|
+ getTypeBasic,
|
|
16
|
+ getMessageList,
|
|
17
|
+} from '@/services/monitoringScreen';
|
8
|
18
|
import MachineryStatus from './components/MachineryStatus';
|
9
|
19
|
import MachineryType from './components/MachineryType';
|
10
|
20
|
import { useParticlesJs } from './hook';
|
|
@@ -19,11 +29,9 @@ export default (props) => {
|
19
|
29
|
const screenRef = useRef();
|
20
|
30
|
const [weather, setWeather] = useState('暂无天气信息');
|
21
|
31
|
|
22
|
|
- const [machineryTypeData, setMachineryTypeData] = useState([
|
23
|
|
- { name: '收割机', value: 200 },
|
24
|
|
- { name: '播种机', value: 100 },
|
25
|
|
- { name: '农药机', value: 50 },
|
26
|
|
- ]);
|
|
32
|
+ const [basic, setBasic] = useState();
|
|
33
|
+
|
|
34
|
+ const [machineryTypeData, setMachineryTypeData] = useState([]);
|
27
|
35
|
|
28
|
36
|
const [machineryStatusData, setMachineryStatusData] = useState([
|
29
|
37
|
{ name: '预约', value: 350 },
|
|
@@ -33,101 +41,108 @@ export default (props) => {
|
33
|
41
|
{ name: '维修', value: 380 },
|
34
|
42
|
]);
|
35
|
43
|
|
36
|
|
- const [workData, setWorkData] = useState([
|
37
|
|
- { name: '收割机', value: 35 },
|
38
|
|
- { name: '播种机', value: 35 },
|
39
|
|
- { name: '农药机', value: 30 },
|
40
|
|
- { name: '其他', value: 180 },
|
41
|
|
- ]);
|
|
44
|
+ const [workData, setWorkData] = useState([]);
|
42
|
45
|
|
43
|
|
- const [workAreaData, setWorkAreaData] = useState([
|
44
|
|
- { name: '收割机', value: 350 },
|
45
|
|
- { name: '播种机', value: 900 },
|
46
|
|
- { name: '农药机', value: 650 },
|
47
|
|
- { name: '其他', value: 180 },
|
48
|
|
- ]);
|
|
46
|
+ const [workAreaData, setWorkAreaData] = useState([]);
|
49
|
47
|
|
50
|
|
- const [machineTypeList, setMachineTypeList] = useState([
|
51
|
|
- { id: 't0', name: '合作社' },
|
52
|
|
- { id: 't1', name: '收割机' },
|
53
|
|
- { id: 't2', name: '播种机' },
|
54
|
|
- { id: 't3', name: '农药机' },
|
55
|
|
- ]);
|
|
48
|
+ const [machineTypeList, setMachineTypeList] = useState([{ id: 't0', name: '合作社' }]);
|
56
|
49
|
|
57
|
|
- const [orgList, setOrgList] = useState([
|
58
|
|
- {
|
59
|
|
- orgId: 1,
|
60
|
|
- name: '合作社1',
|
61
|
|
- address: '合作社地址1',
|
62
|
|
- phone: '13823838438',
|
63
|
|
- machineNum: 12,
|
64
|
|
- lnglat: [112.039556, 32.775169],
|
65
|
|
- },
|
66
|
|
- {
|
67
|
|
- orgId: 2,
|
68
|
|
- name: '合作社2',
|
69
|
|
- address: '合作社地址2',
|
70
|
|
- phone: '13823838438',
|
71
|
|
- machineNum: 68,
|
72
|
|
- lnglat: [112.181692, 32.759002],
|
73
|
|
- },
|
74
|
|
- {
|
75
|
|
- orgId: 3,
|
76
|
|
- name: '合作社3',
|
77
|
|
- address: '合作社地址3',
|
78
|
|
- phone: '13823838438',
|
79
|
|
- machineNum: 3,
|
80
|
|
- lnglat: [111.958532, 32.631875],
|
81
|
|
- },
|
82
|
|
- {
|
83
|
|
- orgId: 4,
|
84
|
|
- name: '合作社4',
|
85
|
|
- address: '合作社地址4',
|
86
|
|
- phone: '13823838438',
|
87
|
|
- machineNum: 42,
|
88
|
|
- lnglat: [112.164526, 32.603536],
|
89
|
|
- },
|
90
|
|
- ]);
|
|
50
|
+ const [orgList, setOrgList] = useState();
|
91
|
51
|
|
92
|
|
- const [machineList, setMachineList] = useState([
|
93
|
|
- {
|
94
|
|
- machineryId: 'm1',
|
95
|
|
- name: '农机1',
|
96
|
|
- typeId: 't1',
|
97
|
|
- orgName: '合作社1',
|
98
|
|
- lnglat: [111.867906, 32.799276],
|
99
|
|
- },
|
100
|
|
- {
|
101
|
|
- machineryId: 'm2',
|
102
|
|
- name: '农机2',
|
103
|
|
- typeId: 't2',
|
104
|
|
- orgName: '合作社1',
|
105
|
|
- lnglat: [112.087632, 32.66527],
|
106
|
|
- },
|
107
|
|
- {
|
108
|
|
- machineryId: 'm3',
|
109
|
|
- name: '农机3',
|
110
|
|
- typeId: 't1',
|
111
|
|
- orgName: '合作社2',
|
112
|
|
- lnglat: [112.237321, 32.631737],
|
113
|
|
- },
|
114
|
|
- {
|
115
|
|
- machineryId: 'm4',
|
116
|
|
- name: '农机4',
|
117
|
|
- typeId: 't3',
|
118
|
|
- orgName: '合作社2',
|
119
|
|
- lnglat: [112.002488, 32.563476],
|
120
|
|
- },
|
121
|
|
- {
|
122
|
|
- machineryId: 'm5',
|
123
|
|
- name: '农机5',
|
124
|
|
- typeId: 't3',
|
125
|
|
- orgName: '合作社3',
|
126
|
|
- lnglat: [112.105485, 32.791195],
|
127
|
|
- },
|
128
|
|
- ]);
|
|
52
|
+ const [machineList, setMachineList] = useState([]);
|
|
53
|
+ const [appointList, setAppointList] = useState();
|
|
54
|
+ const [acceptList, setAcceptList] = useState();
|
129
|
55
|
|
130
|
56
|
useEffect(() => {
|
|
57
|
+ //顶部基本数据
|
|
58
|
+ getBasic()
|
|
59
|
+ .then((res) => {
|
|
60
|
+ var data = {};
|
|
61
|
+ for (let i = 0; i < res.length; i++) {
|
|
62
|
+ const element = res[i];
|
|
63
|
+ data[element.name] = element.value;
|
|
64
|
+ }
|
|
65
|
+ setBasic(data);
|
|
66
|
+ })
|
|
67
|
+ .catch((err) => {
|
|
68
|
+ console.log(err.message);
|
|
69
|
+ });
|
|
70
|
+ //地图上合作社的marker
|
|
71
|
+ getOrgDetail()
|
|
72
|
+ .then((res) => {
|
|
73
|
+ res.forEach((item) => {
|
|
74
|
+ item.lnglat = [item['lng'] - 0, item['lat'] - 0];
|
|
75
|
+ item.machineryNum = item.machineryNum - 0;
|
|
76
|
+ });
|
|
77
|
+ setOrgList(res);
|
|
78
|
+ })
|
|
79
|
+ .catch((err) => {
|
|
80
|
+ console.log(err.message);
|
|
81
|
+ });
|
|
82
|
+ //获取地图上所有农机markers
|
|
83
|
+ getTypeBasic()
|
|
84
|
+ .then((res) => {
|
|
85
|
+ res.forEach((item) => {
|
|
86
|
+ item.lnglat = [item.location.split(',')[0] - 0, item.location.split(',')[1] - 0];
|
|
87
|
+ });
|
|
88
|
+ setMachineList(res);
|
|
89
|
+ })
|
|
90
|
+ .catch((err) => {
|
|
91
|
+ console.log(err.message);
|
|
92
|
+ });
|
|
93
|
+ //获取地图左侧选择的农机列表
|
|
94
|
+ getTypeList()
|
|
95
|
+ .then((res) => {
|
|
96
|
+ let data = [].concat(machineTypeList);
|
|
97
|
+ res.forEach((item) => {
|
|
98
|
+ data.push({ id: item.typeId, name: item.name });
|
|
99
|
+ });
|
|
100
|
+ setMachineTypeList(data);
|
|
101
|
+ })
|
|
102
|
+ .catch((err) => {
|
|
103
|
+ console.log(err.message);
|
|
104
|
+ });
|
|
105
|
+ //作业面积统计
|
|
106
|
+ getAreaDetail()
|
|
107
|
+ .then((res) => {
|
|
108
|
+ console.log('---------res---->', res);
|
|
109
|
+ setWorkAreaData([].concat(res));
|
|
110
|
+ })
|
|
111
|
+ .catch((err) => {
|
|
112
|
+ console.log(err.message);
|
|
113
|
+ });
|
|
114
|
+ //农机类型统计
|
|
115
|
+ getMachineryBar()
|
|
116
|
+ .then((res) => {
|
|
117
|
+ setMachineryTypeData(res);
|
|
118
|
+ })
|
|
119
|
+ .catch((err) => {
|
|
120
|
+ console.log(err.message);
|
|
121
|
+ });
|
|
122
|
+ //农机作业数统计
|
|
123
|
+ getWorkNumPie()
|
|
124
|
+ .then((res) => {
|
|
125
|
+ setWorkData(res);
|
|
126
|
+ })
|
|
127
|
+ .catch((err) => {
|
|
128
|
+ console.log(err.message);
|
|
129
|
+ });
|
|
130
|
+
|
|
131
|
+ getMessageList({ messageType: 'appoint' })
|
|
132
|
+ .then((res) => {
|
|
133
|
+ setAppointList(res);
|
|
134
|
+ })
|
|
135
|
+ .catch((err) => {
|
|
136
|
+ console.log(err.message);
|
|
137
|
+ });
|
|
138
|
+ getMessageList({ messageType: 'accept' })
|
|
139
|
+ .then((res) => {
|
|
140
|
+ setAcceptList(res);
|
|
141
|
+ })
|
|
142
|
+ .catch((err) => {
|
|
143
|
+ console.log(err.message);
|
|
144
|
+ });
|
|
145
|
+
|
131
|
146
|
getWeather()
|
132
|
147
|
.then((res) => {
|
133
|
148
|
if (res && res.length) {
|
|
@@ -167,10 +182,30 @@ export default (props) => {
|
167
|
182
|
</div>
|
168
|
183
|
<div className={classNames(Styles['grail-content'], Styles['pd-lr-40'])}>
|
169
|
184
|
<div className={Styles['statis-container']}>
|
170
|
|
- <StatisCard color="#23E8AE" icon="icon1" value={2346} title="农机总数(台)" />
|
171
|
|
- <StatisCard color="#0BDAFF" icon="icon2" value={528} title="农机使用数(台)" />
|
172
|
|
- <StatisCard color="#F5CC5C" icon="icon3" value={168} title="总预约数(台)" />
|
173
|
|
- <StatisCard color="#C579FF" icon="icon4" value={1568} title="总服务数(台)" />
|
|
185
|
+ <StatisCard
|
|
186
|
+ color="#23E8AE"
|
|
187
|
+ icon="icon1"
|
|
188
|
+ value={basic?.totalMachineryNum}
|
|
189
|
+ title="农机总数(台)"
|
|
190
|
+ />
|
|
191
|
+ <StatisCard
|
|
192
|
+ color="#0BDAFF"
|
|
193
|
+ icon="icon2"
|
|
194
|
+ value={basic?.totalMachineryUsed}
|
|
195
|
+ title="农机使用数(台)"
|
|
196
|
+ />
|
|
197
|
+ <StatisCard
|
|
198
|
+ color="#F5CC5C"
|
|
199
|
+ icon="icon3"
|
|
200
|
+ value={basic?.totalOrderNum}
|
|
201
|
+ title="总预约数"
|
|
202
|
+ />
|
|
203
|
+ <StatisCard
|
|
204
|
+ color="#C579FF"
|
|
205
|
+ icon="icon4"
|
|
206
|
+ value={basic?.totalServiceNum}
|
|
207
|
+ title="总服务数"
|
|
208
|
+ />
|
174
|
209
|
</div>
|
175
|
210
|
<GeoMap machineTypeList={machineTypeList} orgList={orgList} machineList={machineList} />
|
176
|
211
|
</div>
|
|
@@ -190,47 +225,29 @@ export default (props) => {
|
190
|
225
|
<div className="flex" style={{ padding: '20px 0' }}>
|
191
|
226
|
<div className="flex-1">
|
192
|
227
|
<List title="预约订单">
|
193
|
|
- <div>
|
194
|
|
- <ColorFont color="#F5CC5C">[快乐每一天]</ColorFont> 32s前预约了一台收割机,
|
195
|
|
- <ColorFont color="#44F68B">[收割机001]</ColorFont> 接到了此订单!
|
196
|
|
- </div>
|
197
|
|
- <div>
|
198
|
|
- <ColorFont color="#F5CC5C">[幸福人生]</ColorFont> 58分钟前预约了一台收割机,
|
199
|
|
- <ColorFont color="#44F68B">[播种机008]</ColorFont> 接到了此订单!
|
200
|
|
- </div>
|
201
|
|
- <div>
|
202
|
|
- <ColorFont color="#F5CC5C">[灿烂人生]</ColorFont> 2个小时前预约了一台收割机,
|
203
|
|
- <ColorFont color="#44F68B">[收割机007]</ColorFont> 接到了此订单!
|
204
|
|
- </div>
|
205
|
|
- <div>
|
206
|
|
- <ColorFont color="#F5CC5C">[快乐每一天]</ColorFont> 32s前预约了一台收割机,
|
207
|
|
- <ColorFont color="#44F68B">[收割机001]</ColorFont> 接到了此订单!
|
208
|
|
- </div>
|
209
|
|
- <div>
|
210
|
|
- <ColorFont color="#F5CC5C">[幸福人生]</ColorFont> 58分钟前预约了一台收割机,
|
211
|
|
- <ColorFont color="#44F68B">[播种机008]</ColorFont> 接到了此订单!
|
212
|
|
- </div>
|
213
|
|
- <div>
|
214
|
|
- <ColorFont color="#F5CC5C">[灿烂人生]</ColorFont> 2个小时前预约了一台收割机,
|
215
|
|
- <ColorFont color="#44F68B">[收割机007]</ColorFont> 接到了此订单!
|
216
|
|
- </div>
|
|
228
|
+ {appointList?.map((item) => {
|
|
229
|
+ return (
|
|
230
|
+ <div key={item.messageId}>
|
|
231
|
+ <ColorFont color="#F5CC5C">{item.appointTime}</ColorFont>{' '}
|
|
232
|
+ <ColorFont color="#F5CC5C">[{item.appointPerson}]</ColorFont> 预约了一台
|
|
233
|
+ {item.appointMachineryType}。
|
|
234
|
+ </div>
|
|
235
|
+ );
|
|
236
|
+ })}
|
217
|
237
|
</List>
|
218
|
238
|
</div>
|
219
|
239
|
<div className={classNames('flex-0', Styles['footer-middle'])} />
|
220
|
240
|
<div className="flex-1">
|
221
|
241
|
<List title="作业订单" color="green">
|
222
|
|
- <div>
|
223
|
|
- <ColorFont color="#44F68B">[收割机001]</ColorFont>
|
224
|
|
- 32s前接到了一个订单,距离目的地还有3.2公里。
|
225
|
|
- </div>
|
226
|
|
- <div>
|
227
|
|
- <ColorFont color="#44F68B">[播种机008]</ColorFont>{' '}
|
228
|
|
- 2分钟前接到一个订单,距离目的地还有3.8公里。
|
229
|
|
- </div>
|
230
|
|
- <div>
|
231
|
|
- <ColorFont color="#44F68B">[收割机007]</ColorFont>{' '}
|
232
|
|
- 2个小时前接到一个订单,距离目的地还有3.8公里。
|
233
|
|
- </div>
|
|
242
|
+ {acceptList?.map((item) => {
|
|
243
|
+ return (
|
|
244
|
+ <div key={item.messageId}>
|
|
245
|
+ <ColorFont color="#44F68B">{item.acceptTime}</ColorFont>{' '}
|
|
246
|
+ <ColorFont color="#44F68B">[{item.acceptPerson}]</ColorFont>
|
|
247
|
+ 接到了一个订单。
|
|
248
|
+ </div>
|
|
249
|
+ );
|
|
250
|
+ })}
|
234
|
251
|
</List>
|
235
|
252
|
</div>
|
236
|
253
|
</div>
|