魏熙美 il y a 5 ans
Parent
révision
0847768f31

+ 1
- 0
.eslintrc.js Voir le fichier

@@ -5,5 +5,6 @@ module.exports = {
5 5
   globals: {
6 6
     ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
7 7
     page: true,
8
+    AMap: true,
8 9
   },
9 10
 };

+ 1
- 1
config/config.js Voir le fichier

@@ -479,7 +479,7 @@ export default {
479 479
 
480 480
   proxy: {
481 481
     '/api/': {
482
-      target: 'http://192.168.0.84:8080/',
482
+      target: 'http://localhost:8080/',
483 483
       changeOrigin: true,
484 484
       // pathRewrite: { '^/server': '' },
485 485
     },

+ 1
- 0
package.json Voir le fichier

@@ -56,6 +56,7 @@
56 56
     "qs": "^6.7.0",
57 57
     "react": "^16.8.6",
58 58
     "react-amap": "^1.2.8",
59
+    "react-amap-plugin-autocomplete": "0.0.4",
59 60
     "react-copy-to-clipboard": "^5.0.1",
60 61
     "react-document-title": "^2.0.3",
61 62
     "react-dom": "^16.8.6",

+ 401
- 0
src/pages/building/list/add/amap.css Voir le fichier

@@ -0,0 +1,401 @@
1
+html {
2
+  font-size: 12px;
3
+}
4
+.amap-copyright {
5
+  box-sizing: content-box;
6
+}
7
+* {
8
+  box-sizing: border-box;
9
+}
10
+.input-textarea {
11
+  color: grey;
12
+  height: 8em;
13
+  overflow: auto;
14
+  border-radius: 0.4rem;
15
+  border: 1px solid #ced4da;
16
+  margin-bottom: 1rem;
17
+}
18
+body {
19
+  margin: 0;
20
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
21
+  line-height: 1.5;
22
+  font-weight: 300;
23
+  color: #111213;
24
+}
25
+hr {
26
+  margin: 0.5rem 0;
27
+  box-sizing: content-box;
28
+  height: 0;
29
+  overflow: visible;
30
+  border: 0;
31
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
32
+}
33
+p {
34
+  margin-top: 0;
35
+  margin-bottom: 0;
36
+}
37
+label {
38
+  display: inline-block;
39
+  margin-bottom: 0.4rem;
40
+}
41
+label,
42
+.btn {
43
+  margin-left: 0;
44
+  font-size: 1rem;
45
+}
46
+button,
47
+input,
48
+select {
49
+  margin: 0;
50
+  font-family: inherit;
51
+  font-size: inherit;
52
+  line-height: inherit;
53
+  overflow: visible;
54
+  text-transform: none;
55
+}
56
+[type=button]::-moz-focus-inner,
57
+[type=reset]::-moz-focus-inner,
58
+[type=submit]::-moz-focus-inner,
59
+button::-moz-focus-inner {
60
+  padding: 0;
61
+  border-style: none;
62
+}
63
+input[type=checkbox],
64
+input[type=radio] {
65
+  -webkit-box-sizing: border-box;
66
+  box-sizing: border-box;
67
+  padding: 0;
68
+  margin: 0 0.5rem 0 0;
69
+}
70
+h4 {
71
+  font-family: inherit;
72
+  line-height: 1.8;
73
+  font-weight: 300;
74
+  color: inherit;
75
+  font-size: 1.1rem;
76
+  margin-top: 0;
77
+  margin-bottom: 0.5rem;
78
+}
79
+.btn {
80
+  display: inline-block;
81
+  font-weight: 400;
82
+  text-align: center;
83
+  white-space: nowrap;
84
+  vertical-align: middle;
85
+  -webkit-user-select: none;
86
+  -moz-user-select: none;
87
+  -ms-user-select: none;
88
+  user-select: none;
89
+  border: 1px solid transparent;
90
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
91
+  background-color: transparent;
92
+  background-image: none;
93
+  color: #25A5F7;
94
+  border-color: #25A5F7;
95
+  padding: .25rem .5rem;
96
+  line-height: 1.5;
97
+  border-radius: 1rem;
98
+  -webkit-appearance: button;
99
+  cursor: pointer;
100
+}
101
+.btn:hover {
102
+  color: #fff;
103
+  background-color: #25A5F7;
104
+  border-color: #25A5F7;
105
+}
106
+.btn:hover {
107
+  text-decoration: none;
108
+}
109
+.input-item {
110
+  position: relative;
111
+  display: -ms-flexbox;
112
+  display: flex;
113
+  -ms-flex-wrap: wrap;
114
+  flex-wrap: wrap;
115
+  -ms-flex-align: center;
116
+  align-items: center;
117
+  width: 100%;
118
+  height: 3rem;
119
+}
120
+.input-item:last-child {
121
+  margin-bottom: 0;
122
+}
123
+.input-item > select,
124
+.input-item > input[type=text],
125
+.input-item > input[type=date] {
126
+  position: relative;
127
+  -ms-flex: 1 1 auto;
128
+  flex: 1 1 auto;
129
+  width: 1%;
130
+  margin-bottom: 0;
131
+}
132
+.input-item > select:not(:last-child),
133
+.input-item > input[type=text]:not(:last-child),
134
+.input-item > input[type=date]:not(:last-child) {
135
+  border-top-right-radius: 0;
136
+  border-bottom-right-radius: 0;
137
+}
138
+.input-item > select:not(:first-child),
139
+.input-item > input[type=text]:not(:first-child),
140
+.input-item > input[type=date]:not(:first-child) {
141
+  border-top-left-radius: 0;
142
+  border-bottom-left-radius: 0;
143
+}
144
+.input-item-prepend {
145
+  margin-right: -1px;
146
+}
147
+.input-item-text,
148
+input[type=text],
149
+input[type=date],
150
+select {
151
+  height: calc(4.2rem);
152
+}
153
+.input-item-text {
154
+  width: 6rem;
155
+  text-align: justify;
156
+  padding: 0.4rem 0.7rem;
157
+  display: inline-block;
158
+  text-justify: distribute-all-lines;
159
+  /*ie6-8*/
160
+  text-align-last: justify;
161
+  /* ie9*/
162
+  -moz-text-align-last: justify;
163
+  /*ff*/
164
+  -webkit-text-align-last: justify;
165
+  /*chrome 20+*/
166
+  -ms-flex-align: center;
167
+  align-items: center;
168
+  margin-bottom: 0;
169
+  font-size: 1rem;
170
+  font-weight: 400;
171
+  line-height: 1.5;
172
+  color: #495057;
173
+  text-align: center;
174
+  white-space: nowrap;
175
+  background-color: #e9ecef;
176
+  border: 1px solid #ced4da;
177
+  border-radius: .25rem;
178
+  border-bottom-right-radius: 0;
179
+  border-top-right-radius: 0;
180
+}
181
+.input-item-text input[type=checkbox],
182
+.input-item-text input[type=radio] {
183
+  margin-top: 0;
184
+}
185
+.input-card {
186
+  display: flex;
187
+  flex-direction: column;
188
+  min-width: 0;
189
+  word-wrap: break-word;
190
+  background-color: #fff;
191
+  background-clip: border-box;
192
+  border-radius: .25rem;
193
+  width: 22rem;
194
+  border-width: 0;
195
+  border-radius: 0.4rem;
196
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
197
+  position: fixed;
198
+  bottom: 1rem;
199
+  right: 1rem;
200
+  -ms-flex: 1 1 auto;
201
+  flex: 1 1 auto;
202
+  padding: 0.75rem 1.25rem;
203
+}
204
+.input-text {
205
+  line-height: 2rem;
206
+  margin-right: 2rem;
207
+}
208
+.info hr {
209
+  margin-right: 0;
210
+  margin-left: 0;
211
+  border-top-color: grey;
212
+}
213
+.info {
214
+  padding: .75rem 1.25rem;
215
+  margin-bottom: 1rem;
216
+  border-radius: .25rem;
217
+  position: fixed;
218
+  top: 1rem;
219
+  background-color: white;
220
+  width: auto;
221
+  min-width: 22rem;
222
+  border-width: 0;
223
+  right: 1rem;
224
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
225
+  position: absolute;
226
+  z-index: 100;
227
+}
228
+.code {
229
+  left: 1.5rem;
230
+  right: 1.5rem;
231
+  top: 1.5rem;
232
+  bottom: 1.5rem;
233
+  overflow: auto;
234
+  margin-bottom: 0rem;
235
+}
236
+.code .btn {
237
+  top: 1rem;
238
+  position: absolute;
239
+  right: 1rem;
240
+}
241
+.code .result {
242
+  border: 1px solid rgba(0, 0, 0, 0.1);
243
+  border-radius: 0.5rem;
244
+  padding: 1rem;
245
+  bottom: 1rem;
246
+  position: absolute;
247
+  top: 5.5rem;
248
+  right: 1rem;
249
+  left: 1rem;
250
+  overflow: auto;
251
+}
252
+.code .status {
253
+  color: #80adff;
254
+  display: inline-block;
255
+  font-size: 14px;
256
+}
257
+.code h4 {
258
+  display: inline-block;
259
+  max-width: 20rem;
260
+  margin-right: 1rem;
261
+  margin-bottom: 1rem;
262
+}
263
+select,
264
+input[type=text],
265
+input[type=date] {
266
+  display: inline-block;
267
+  width: 100%;
268
+  padding: .375rem 1.75rem .375rem .75rem;
269
+  line-height: 1.5;
270
+  color: #495057;
271
+  vertical-align: middle;
272
+  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
273
+  background-size: 8px 10px;
274
+  border: 1px solid #ced4da;
275
+  border-radius: .25rem;
276
+  -webkit-appearance: none;
277
+  -moz-appearance: none;
278
+  appearance: none;
279
+}
280
+input[type=text],
281
+input[type=date] {
282
+  background: #fff;
283
+  padding: .375rem .75rem;
284
+}
285
+select:focus,
286
+input[type=text]:focus,
287
+input[type=date]:focus {
288
+  border-color: #80bdff;
289
+  outline: 0;
290
+  box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, 0.1);
291
+}
292
+.btn:focus {
293
+  outline: 0;
294
+  box-shadow: none;
295
+}
296
+select:focus::-ms-value,
297
+input[type=text]:focus::-ms-value,
298
+input[type=date]:focus::-ms-value {
299
+  color: #495057;
300
+  background-color: #fff;
301
+}
302
+/* native toastr */
303
+.native-toast {
304
+  position: fixed;
305
+  background-color: rgba(50, 50, 50, 0.8);
306
+  border-radius: 33px;
307
+  color: white;
308
+  left: 50%;
309
+  text-align: center;
310
+  padding: 6px 12px;
311
+  opacity: 0;
312
+  z-index: 99999;
313
+  transition: transform .25s, opacity .25s, top .25s;
314
+  box-sizing: border-box;
315
+}
316
+.native-toast-bottom {
317
+  bottom: 50px;
318
+  -ms-transform: translateX(-50%) translateY(50px);
319
+  transform: translateX(-50%) translateY(50px);
320
+}
321
+.native-toast-bottom.native-toast-shown {
322
+  opacity: 1;
323
+  -ms-transform: translateX(-50%) translateY(0);
324
+  transform: translateX(-50%) translateY(0);
325
+}
326
+.native-toast-bottom.native-toast-edge {
327
+  bottom: 0;
328
+}
329
+.native-toast-top {
330
+  top: 50px;
331
+  -ms-transform: translateX(-50%) translateY(-50px);
332
+  transform: translateX(-50%) translateY(-50px);
333
+}
334
+.native-toast-top.native-toast-shown {
335
+  opacity: 1;
336
+  -ms-transform: translateX(-50%) translateY(0);
337
+  transform: translateX(-50%) translateY(0);
338
+}
339
+.native-toast-top.native-toast-edge {
340
+  top: 0;
341
+}
342
+.native-toast-center {
343
+  top: 0;
344
+  -ms-transform: translateX(-50%) translateY(-50px);
345
+  transform: translateX(-50%) translateY(-50px);
346
+}
347
+.native-toast-center.native-toast-shown {
348
+  opacity: 1;
349
+  top: 50%;
350
+  -ms-transform: translateX(-50%) translateY(-50%);
351
+  transform: translateX(-50%) translateY(-50%);
352
+}
353
+.native-toast-edge {
354
+  border-radius: 0;
355
+  width: 100%;
356
+  text-align: left;
357
+}
358
+@media screen and (min-width: 40rem) {
359
+  .native-toast:not(.native-toast-edge) {
360
+    max-width: 18rem;
361
+  }
362
+}
363
+/*
364
+  max-width does not seem to work in small screen?
365
+*/
366
+/*@media screen and (max-width: 768px) {
367
+  .native-toast:not(.native-toast-edge) {
368
+    max-width: 400px;
369
+  }
370
+}
371
+
372
+@media screen and (max-width: 468px) {
373
+  .native-toast:not(.native-toast-edge) {
374
+    max-width: 300px;
375
+  }
376
+}*/
377
+/* types */
378
+.native-toast-error {
379
+  background-color: #d92727;
380
+  color: white;
381
+}
382
+.native-toast-success {
383
+  background-color: #62a465;
384
+  color: white;
385
+}
386
+.native-toast-warning {
387
+  background-color: #fdaf17;
388
+  color: white;
389
+}
390
+.native-toast-info {
391
+  background-color: #5060ba;
392
+  color: white;
393
+}
394
+[class^="native-toast-icon-"] {
395
+  vertical-align: middle;
396
+  margin-right: 8px;
397
+}
398
+[class^="native-toast-icon-"] svg {
399
+  width: 16px;
400
+  height: 16px;
401
+}

+ 434
- 0
src/pages/building/list/add/amap.less Voir le fichier

@@ -0,0 +1,434 @@
1
+html {
2
+  font-size: 12px;
3
+}
4
+.amap-copyright{
5
+  box-sizing: content-box
6
+}
7
+* {
8
+  box-sizing: border-box
9
+}
10
+.input-textarea{
11
+   color:grey;
12
+   height:8em;
13
+   overflow:auto;
14
+   border-radius:0.4rem;
15
+   border:1px solid #ced4da;
16
+   margin-bottom:1rem;
17
+}
18
+body {
19
+  margin: 0;
20
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
21
+  line-height: 1.5;
22
+  font-weight: 300;
23
+  color: #111213;
24
+}
25
+
26
+hr {
27
+  margin: 0.5rem 0;
28
+  box-sizing: content-box;
29
+  height: 0;
30
+  overflow: visible;
31
+  border: 0;
32
+  border-top: 1px solid rgba(0, 0, 0, .1)
33
+}
34
+
35
+p {
36
+  margin-top: 0;
37
+  margin-bottom: 0;
38
+}
39
+
40
+label {
41
+  display: inline-block;
42
+  margin-bottom: 0.4rem;
43
+}
44
+
45
+label, .btn {
46
+  margin-left: 0;
47
+  font-size: 1rem;
48
+}
49
+
50
+button, input, select {
51
+  margin: 0;
52
+  font-family: inherit;
53
+  font-size: inherit;
54
+  line-height: inherit;
55
+  overflow: visible;
56
+  text-transform: none
57
+}
58
+
59
+[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
60
+  padding: 0;
61
+  border-style: none;
62
+}
63
+
64
+input[type=checkbox], input[type=radio] {
65
+  box-sizing: border-box;
66
+  padding: 0;
67
+  -webkit-box-sizing: border-box;
68
+  box-sizing: border-box;
69
+  padding: 0;
70
+  margin: 0 0.5rem 0 0;
71
+}
72
+
73
+h4 {
74
+  font-family: inherit;
75
+  line-height: 1.8;
76
+  font-weight: 300;
77
+  color: inherit;
78
+  font-size: 1.1rem;
79
+  margin-top: 0;
80
+  margin-bottom: .5rem
81
+}
82
+
83
+.btn {
84
+  display: inline-block;
85
+  font-weight: 400;
86
+  text-align: center;
87
+  white-space: nowrap;
88
+  vertical-align: middle;
89
+  -webkit-user-select: none;
90
+  -moz-user-select: none;
91
+  -ms-user-select: none;
92
+  user-select: none;
93
+  border: 1px solid transparent;
94
+  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
95
+  background-color: transparent;
96
+  background-image: none;
97
+  color: #25A5F7;
98
+  border-color: #25A5F7;
99
+  padding: .25rem .5rem;
100
+  line-height: 1.5;
101
+  border-radius: 1rem;
102
+  -webkit-appearance: button;
103
+  cursor:pointer;
104
+}
105
+
106
+.btn:hover {
107
+  color: #fff;
108
+  background-color: #25A5F7;
109
+  border-color: #25A5F7
110
+}
111
+
112
+.btn:hover {
113
+  text-decoration: none
114
+}
115
+
116
+.input-item {
117
+  position: relative;
118
+  display: -ms-flexbox;
119
+  display: flex;
120
+  -ms-flex-wrap: wrap;
121
+  flex-wrap: wrap;
122
+  -ms-flex-align: center;
123
+  align-items: center;
124
+  width: 100%;
125
+  height: 3rem;
126
+}
127
+
128
+.input-item:last-child {
129
+  margin-bottom: 0;
130
+}
131
+
132
+.input-item>select, .input-item>input[type=text], .input-item>input[type=date] {
133
+  position: relative;
134
+  -ms-flex: 1 1 auto;
135
+  flex: 1 1 auto;
136
+  width: 1%;
137
+  margin-bottom: 0;
138
+}
139
+
140
+.input-item>select:not(:last-child), .input-item>input[type=text]:not(:last-child), .input-item>input[type=date]:not(:last-child) {
141
+  border-top-right-radius: 0;
142
+  border-bottom-right-radius: 0
143
+}
144
+
145
+.input-item>select:not(:first-child), .input-item>input[type=text]:not(:first-child), .input-item>input[type=date]:not(:first-child) {
146
+  border-top-left-radius: 0;
147
+  border-bottom-left-radius: 0
148
+}
149
+
150
+.input-item-prepend {
151
+  margin-right: -1px;
152
+}
153
+
154
+.input-item-text, input[type=text],input[type=date], select {
155
+  height: calc(2.2rem + 2px);
156
+}
157
+
158
+.input-item-text {
159
+  width: 6rem;
160
+  text-align: justify;
161
+  padding: 0.4rem 0.7rem;
162
+  display: inline-block;
163
+  text-justify: distribute-all-lines;
164
+  /*ie6-8*/
165
+  text-align-last: justify;
166
+  /* ie9*/
167
+  -moz-text-align-last: justify;
168
+  /*ff*/
169
+  -webkit-text-align-last: justify;
170
+  /*chrome 20+*/
171
+  -ms-flex-align: center;
172
+  align-items: center;
173
+  margin-bottom: 0;
174
+  font-size: 1rem;
175
+  font-weight: 400;
176
+  line-height: 1.5;
177
+  color: #495057;
178
+  text-align: center;
179
+  white-space: nowrap;
180
+  background-color: #e9ecef;
181
+  border: 1px solid #ced4da;
182
+  border-radius: .25rem;
183
+  border-bottom-right-radius: 0;
184
+  border-top-right-radius: 0;
185
+}
186
+
187
+.input-item-text input[type=checkbox], .input-item-text input[type=radio] {
188
+  margin-top: 0
189
+}
190
+
191
+.input-card {
192
+  display: flex;
193
+  flex-direction: column;
194
+  min-width: 0;
195
+  word-wrap: break-word;
196
+  background-color: #fff;
197
+  background-clip: border-box;
198
+  border-radius: .25rem;
199
+  width: 22rem;
200
+  border-width: 0;
201
+  border-radius: 0.4rem;
202
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
203
+  position: fixed;
204
+  bottom: 1rem;
205
+  right: 1rem;
206
+  -ms-flex: 1 1 auto;
207
+  flex: 1 1 auto;
208
+  padding: 0.75rem 1.25rem;
209
+}
210
+
211
+.input-text {
212
+  line-height: 2rem;
213
+  margin-right: 2rem;
214
+}
215
+
216
+.info hr {
217
+  margin-right: 0;
218
+  margin-left: 0;
219
+  border-top-color: grey;
220
+}
221
+
222
+.info {
223
+  padding: .75rem 1.25rem;
224
+  margin-bottom: 1rem;
225
+  border-radius: .25rem;
226
+  position: fixed;
227
+  top: 1rem;
228
+  background-color: white;
229
+  width: auto;
230
+  min-width: 22rem;
231
+  border-width: 0;
232
+  right: 1rem;
233
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
234
+  position: absolute;
235
+  z-index: 100;
236
+}
237
+
238
+.code {
239
+  left: 1.5rem;
240
+  right: 1.5rem;
241
+  top: 1.5rem;
242
+  bottom: 1.5rem;
243
+  overflow: auto;
244
+  margin-bottom: 0rem;
245
+}
246
+
247
+.code .btn {
248
+  top: 1rem;
249
+  position: absolute;
250
+  right: 1rem;
251
+}
252
+
253
+.code .result {
254
+  border: 1px solid rgba(0, 0, 0, 0.1);
255
+  border-radius: 0.5rem;
256
+  padding: 1rem;
257
+  bottom: 1rem;
258
+  position: absolute;
259
+  top: 5.5rem;
260
+  right: 1rem;
261
+  left: 1rem;
262
+  overflow: auto;
263
+}
264
+
265
+.code .status {
266
+  color: #80adff;
267
+  display: inline-block;
268
+  font-size: 14px;
269
+}
270
+
271
+.code h4 {
272
+  display: inline-block;
273
+  max-width: 20rem;
274
+  margin-right: 1rem;
275
+  margin-bottom: 1rem;
276
+}
277
+
278
+select, input[type=text], input[type=date] {
279
+  display: inline-block;
280
+  width: 100%;
281
+  padding: .375rem 1.75rem .375rem .75rem;
282
+  line-height: 1.5;
283
+  color: #495057;
284
+  vertical-align: middle;
285
+  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
286
+  background-size: 8px 10px;
287
+  border: 1px solid #ced4da;
288
+  border-radius: .25rem;
289
+  -webkit-appearance: none;
290
+  -moz-appearance: none;
291
+  appearance: none
292
+}
293
+
294
+input[type=text],input[type=date] {
295
+  background: #fff;
296
+  padding: .375rem .75rem;
297
+}
298
+
299
+select:focus, input[type=text]:focus, input[type=date]:focus {
300
+  border-color: #80bdff;
301
+  outline: 0;
302
+  box-shadow: 0 0 0 .1rem rgba(128, 189, 255, .1)
303
+}
304
+
305
+.btn:focus {
306
+  outline: 0;
307
+  box-shadow: none;
308
+}
309
+
310
+select:focus::-ms-value, input[type=text]:focus::-ms-value,input[type=date]:focus::-ms-value {
311
+  color: #495057;
312
+  background-color: #fff
313
+}
314
+
315
+
316
+/* native toastr */
317
+.native-toast {
318
+  position: fixed;
319
+  background-color: rgba(50, 50, 50, .8);
320
+  border-radius: 33px;
321
+  color: white;
322
+  left: 50%;
323
+  text-align: center;
324
+  padding: 6px 12px;
325
+  opacity: 0;
326
+  z-index: 99999;
327
+  transition: transform .25s, opacity .25s, top .25s;
328
+  box-sizing: border-box;
329
+}
330
+
331
+.native-toast-bottom {
332
+  bottom: 50px;
333
+  -ms-transform: translateX(-50%) translateY(50px);
334
+      transform: translateX(-50%) translateY(50px)
335
+}
336
+
337
+.native-toast-bottom.native-toast-shown {
338
+  opacity: 1;
339
+  -ms-transform: translateX(-50%) translateY(0);
340
+      transform: translateX(-50%) translateY(0);
341
+}
342
+
343
+.native-toast-bottom.native-toast-edge {
344
+  bottom: 0;
345
+}
346
+
347
+.native-toast-top {
348
+  top: 50px;
349
+  -ms-transform: translateX(-50%) translateY(-50px);
350
+      transform: translateX(-50%) translateY(-50px)
351
+}
352
+
353
+.native-toast-top.native-toast-shown {
354
+  opacity: 1;
355
+  -ms-transform: translateX(-50%) translateY(0);
356
+      transform: translateX(-50%) translateY(0);
357
+}
358
+
359
+.native-toast-top.native-toast-edge {
360
+  top: 0;
361
+}
362
+
363
+.native-toast-center {
364
+  top: 0;
365
+  -ms-transform: translateX(-50%) translateY(-50px);
366
+      transform: translateX(-50%) translateY(-50px)
367
+}
368
+
369
+.native-toast-center.native-toast-shown {
370
+  opacity: 1;
371
+  top: 50%;
372
+  -ms-transform: translateX(-50%) translateY(-50%);
373
+      transform: translateX(-50%) translateY(-50%);
374
+}
375
+
376
+.native-toast-edge {
377
+  border-radius: 0;
378
+  width: 100%;
379
+  text-align: left;
380
+}
381
+
382
+@media screen and (min-width: 40rem) {
383
+  .native-toast:not(.native-toast-edge) {
384
+    max-width: 18rem;
385
+  }
386
+}
387
+
388
+/*
389
+  max-width does not seem to work in small screen?
390
+*/
391
+
392
+/*@media screen and (max-width: 768px) {
393
+  .native-toast:not(.native-toast-edge) {
394
+    max-width: 400px;
395
+  }
396
+}
397
+
398
+@media screen and (max-width: 468px) {
399
+  .native-toast:not(.native-toast-edge) {
400
+    max-width: 300px;
401
+  }
402
+}*/
403
+
404
+/* types */
405
+
406
+.native-toast-error {
407
+  background-color: #d92727;
408
+  color: white;
409
+}
410
+
411
+.native-toast-success {
412
+  background-color: #62a465;
413
+  color: white;
414
+}
415
+
416
+.native-toast-warning {
417
+  background-color: #fdaf17;
418
+  color: white;
419
+}
420
+
421
+.native-toast-info {
422
+  background-color: #5060ba;
423
+  color: white;
424
+}
425
+
426
+[class^="native-toast-icon-"] {
427
+  vertical-align: middle;
428
+  margin-right: 8px
429
+}
430
+
431
+[class^="native-toast-icon-"] svg {
432
+  width: 16px;
433
+  height: 16px;
434
+}

+ 401
- 0
src/pages/building/list/add/amap.wxss Voir le fichier

@@ -0,0 +1,401 @@
1
+html {
2
+  font-size: 12px;
3
+}
4
+.amap-copyright {
5
+  box-sizing: content-box;
6
+}
7
+* {
8
+  box-sizing: border-box;
9
+}
10
+.input-textarea {
11
+  color: grey;
12
+  height: 8em;
13
+  overflow: auto;
14
+  border-radius: 0.4rem;
15
+  border: 1px solid #ced4da;
16
+  margin-bottom: 1rem;
17
+}
18
+body {
19
+  margin: 0;
20
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
21
+  line-height: 1.5;
22
+  font-weight: 300;
23
+  color: #111213;
24
+}
25
+hr {
26
+  margin: 0.5rem 0;
27
+  box-sizing: content-box;
28
+  height: 0;
29
+  overflow: visible;
30
+  border: 0;
31
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
32
+}
33
+p {
34
+  margin-top: 0;
35
+  margin-bottom: 0;
36
+}
37
+label {
38
+  display: inline-block;
39
+  margin-bottom: 0.4rem;
40
+}
41
+label,
42
+.btn {
43
+  margin-left: 0;
44
+  font-size: 1rem;
45
+}
46
+button,
47
+input,
48
+select {
49
+  margin: 0;
50
+  font-family: inherit;
51
+  font-size: inherit;
52
+  line-height: inherit;
53
+  overflow: visible;
54
+  text-transform: none;
55
+}
56
+[type=button]::-moz-focus-inner,
57
+[type=reset]::-moz-focus-inner,
58
+[type=submit]::-moz-focus-inner,
59
+button::-moz-focus-inner {
60
+  padding: 0;
61
+  border-style: none;
62
+}
63
+input[type=checkbox],
64
+input[type=radio] {
65
+  -webkit-box-sizing: border-box;
66
+  box-sizing: border-box;
67
+  padding: 0;
68
+  margin: 0 0.5rem 0 0;
69
+}
70
+h4 {
71
+  font-family: inherit;
72
+  line-height: 1.8;
73
+  font-weight: 300;
74
+  color: inherit;
75
+  font-size: 1.1rem;
76
+  margin-top: 0;
77
+  margin-bottom: 0.5rem;
78
+}
79
+.btn {
80
+  display: inline-block;
81
+  font-weight: 400;
82
+  text-align: center;
83
+  white-space: nowrap;
84
+  vertical-align: middle;
85
+  -webkit-user-select: none;
86
+  -moz-user-select: none;
87
+  -ms-user-select: none;
88
+  user-select: none;
89
+  border: 1px solid transparent;
90
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
91
+  background-color: transparent;
92
+  background-image: none;
93
+  color: #25A5F7;
94
+  border-color: #25A5F7;
95
+  padding: .25rem .5rem;
96
+  line-height: 1.5;
97
+  border-radius: 1rem;
98
+  -webkit-appearance: button;
99
+  cursor: pointer;
100
+}
101
+.btn:hover {
102
+  color: #fff;
103
+  background-color: #25A5F7;
104
+  border-color: #25A5F7;
105
+}
106
+.btn:hover {
107
+  text-decoration: none;
108
+}
109
+.input-item {
110
+  position: relative;
111
+  display: -ms-flexbox;
112
+  display: flex;
113
+  -ms-flex-wrap: wrap;
114
+  flex-wrap: wrap;
115
+  -ms-flex-align: center;
116
+  align-items: center;
117
+  width: 100%;
118
+  height: 3rem;
119
+}
120
+.input-item:last-child {
121
+  margin-bottom: 0;
122
+}
123
+.input-item > select,
124
+.input-item > input[type=text],
125
+.input-item > input[type=date] {
126
+  position: relative;
127
+  -ms-flex: 1 1 auto;
128
+  flex: 1 1 auto;
129
+  width: 1%;
130
+  margin-bottom: 0;
131
+}
132
+.input-item > select:not(:last-child),
133
+.input-item > input[type=text]:not(:last-child),
134
+.input-item > input[type=date]:not(:last-child) {
135
+  border-top-right-radius: 0;
136
+  border-bottom-right-radius: 0;
137
+}
138
+.input-item > select:not(:first-child),
139
+.input-item > input[type=text]:not(:first-child),
140
+.input-item > input[type=date]:not(:first-child) {
141
+  border-top-left-radius: 0;
142
+  border-bottom-left-radius: 0;
143
+}
144
+.input-item-prepend {
145
+  margin-right: -1px;
146
+}
147
+.input-item-text,
148
+input[type=text],
149
+input[type=date],
150
+select {
151
+  height: calc(4.2rem);
152
+}
153
+.input-item-text {
154
+  width: 6rem;
155
+  text-align: justify;
156
+  padding: 0.4rem 0.7rem;
157
+  display: inline-block;
158
+  text-justify: distribute-all-lines;
159
+  /*ie6-8*/
160
+  text-align-last: justify;
161
+  /* ie9*/
162
+  -moz-text-align-last: justify;
163
+  /*ff*/
164
+  -webkit-text-align-last: justify;
165
+  /*chrome 20+*/
166
+  -ms-flex-align: center;
167
+  align-items: center;
168
+  margin-bottom: 0;
169
+  font-size: 1rem;
170
+  font-weight: 400;
171
+  line-height: 1.5;
172
+  color: #495057;
173
+  text-align: center;
174
+  white-space: nowrap;
175
+  background-color: #e9ecef;
176
+  border: 1px solid #ced4da;
177
+  border-radius: .25rem;
178
+  border-bottom-right-radius: 0;
179
+  border-top-right-radius: 0;
180
+}
181
+.input-item-text input[type=checkbox],
182
+.input-item-text input[type=radio] {
183
+  margin-top: 0;
184
+}
185
+.input-card {
186
+  display: flex;
187
+  flex-direction: column;
188
+  min-width: 0;
189
+  word-wrap: break-word;
190
+  background-color: #fff;
191
+  background-clip: border-box;
192
+  border-radius: .25rem;
193
+  width: 22rem;
194
+  border-width: 0;
195
+  border-radius: 0.4rem;
196
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
197
+  position: fixed;
198
+  bottom: 1rem;
199
+  right: 1rem;
200
+  -ms-flex: 1 1 auto;
201
+  flex: 1 1 auto;
202
+  padding: 0.75rem 1.25rem;
203
+}
204
+.input-text {
205
+  line-height: 2rem;
206
+  margin-right: 2rem;
207
+}
208
+.info hr {
209
+  margin-right: 0;
210
+  margin-left: 0;
211
+  border-top-color: grey;
212
+}
213
+.info {
214
+  padding: .75rem 1.25rem;
215
+  margin-bottom: 1rem;
216
+  border-radius: .25rem;
217
+  position: fixed;
218
+  top: 1rem;
219
+  background-color: white;
220
+  width: auto;
221
+  min-width: 22rem;
222
+  border-width: 0;
223
+  right: 1rem;
224
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
225
+  position: absolute;
226
+  z-index: 100;
227
+}
228
+.code {
229
+  left: 1.5rem;
230
+  right: 1.5rem;
231
+  top: 1.5rem;
232
+  bottom: 1.5rem;
233
+  overflow: auto;
234
+  margin-bottom: 0rem;
235
+}
236
+.code .btn {
237
+  top: 1rem;
238
+  position: absolute;
239
+  right: 1rem;
240
+}
241
+.code .result {
242
+  border: 1px solid rgba(0, 0, 0, 0.1);
243
+  border-radius: 0.5rem;
244
+  padding: 1rem;
245
+  bottom: 1rem;
246
+  position: absolute;
247
+  top: 5.5rem;
248
+  right: 1rem;
249
+  left: 1rem;
250
+  overflow: auto;
251
+}
252
+.code .status {
253
+  color: #80adff;
254
+  display: inline-block;
255
+  font-size: 14px;
256
+}
257
+.code h4 {
258
+  display: inline-block;
259
+  max-width: 20rem;
260
+  margin-right: 1rem;
261
+  margin-bottom: 1rem;
262
+}
263
+select,
264
+input[type=text],
265
+input[type=date] {
266
+  display: inline-block;
267
+  width: 100%;
268
+  padding: .375rem 1.75rem .375rem .75rem;
269
+  line-height: 1.5;
270
+  color: #495057;
271
+  vertical-align: middle;
272
+  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
273
+  background-size: 8px 10px;
274
+  border: 1px solid #ced4da;
275
+  border-radius: .25rem;
276
+  -webkit-appearance: none;
277
+  -moz-appearance: none;
278
+  appearance: none;
279
+}
280
+input[type=text],
281
+input[type=date] {
282
+  background: #fff;
283
+  padding: .375rem .75rem;
284
+}
285
+select:focus,
286
+input[type=text]:focus,
287
+input[type=date]:focus {
288
+  border-color: #80bdff;
289
+  outline: 0;
290
+  box-shadow: 0 0 0 0.1rem rgba(128, 189, 255, 0.1);
291
+}
292
+.btn:focus {
293
+  outline: 0;
294
+  box-shadow: none;
295
+}
296
+select:focus::-ms-value,
297
+input[type=text]:focus::-ms-value,
298
+input[type=date]:focus::-ms-value {
299
+  color: #495057;
300
+  background-color: #fff;
301
+}
302
+/* native toastr */
303
+.native-toast {
304
+  position: fixed;
305
+  background-color: rgba(50, 50, 50, 0.8);
306
+  border-radius: 33px;
307
+  color: white;
308
+  left: 50%;
309
+  text-align: center;
310
+  padding: 6px 12px;
311
+  opacity: 0;
312
+  z-index: 99999;
313
+  transition: transform .25s, opacity .25s, top .25s;
314
+  box-sizing: border-box;
315
+}
316
+.native-toast-bottom {
317
+  bottom: 50px;
318
+  -ms-transform: translateX(-50%) translateY(50px);
319
+  transform: translateX(-50%) translateY(50px);
320
+}
321
+.native-toast-bottom.native-toast-shown {
322
+  opacity: 1;
323
+  -ms-transform: translateX(-50%) translateY(0);
324
+  transform: translateX(-50%) translateY(0);
325
+}
326
+.native-toast-bottom.native-toast-edge {
327
+  bottom: 0;
328
+}
329
+.native-toast-top {
330
+  top: 50px;
331
+  -ms-transform: translateX(-50%) translateY(-50px);
332
+  transform: translateX(-50%) translateY(-50px);
333
+}
334
+.native-toast-top.native-toast-shown {
335
+  opacity: 1;
336
+  -ms-transform: translateX(-50%) translateY(0);
337
+  transform: translateX(-50%) translateY(0);
338
+}
339
+.native-toast-top.native-toast-edge {
340
+  top: 0;
341
+}
342
+.native-toast-center {
343
+  top: 0;
344
+  -ms-transform: translateX(-50%) translateY(-50px);
345
+  transform: translateX(-50%) translateY(-50px);
346
+}
347
+.native-toast-center.native-toast-shown {
348
+  opacity: 1;
349
+  top: 50%;
350
+  -ms-transform: translateX(-50%) translateY(-50%);
351
+  transform: translateX(-50%) translateY(-50%);
352
+}
353
+.native-toast-edge {
354
+  border-radius: 0;
355
+  width: 100%;
356
+  text-align: left;
357
+}
358
+@media screen and (min-width: 40rem) {
359
+  .native-toast:not(.native-toast-edge) {
360
+    max-width: 18rem;
361
+  }
362
+}
363
+/*
364
+  max-width does not seem to work in small screen?
365
+*/
366
+/*@media screen and (max-width: 768px) {
367
+  .native-toast:not(.native-toast-edge) {
368
+    max-width: 400px;
369
+  }
370
+}
371
+
372
+@media screen and (max-width: 468px) {
373
+  .native-toast:not(.native-toast-edge) {
374
+    max-width: 300px;
375
+  }
376
+}*/
377
+/* types */
378
+.native-toast-error {
379
+  background-color: #d92727;
380
+  color: white;
381
+}
382
+.native-toast-success {
383
+  background-color: #62a465;
384
+  color: white;
385
+}
386
+.native-toast-warning {
387
+  background-color: #fdaf17;
388
+  color: white;
389
+}
390
+.native-toast-info {
391
+  background-color: #5060ba;
392
+  color: white;
393
+}
394
+[class^="native-toast-icon-"] {
395
+  vertical-align: middle;
396
+  margin-right: 8px;
397
+}
398
+[class^="native-toast-icon-"] svg {
399
+  width: 16px;
400
+  height: 16px;
401
+}

+ 84
- 6
src/pages/building/list/add/components/amap.jsx Voir le fichier

@@ -1,20 +1,98 @@
1 1
 import React from 'react';
2 2
 import ReactDOM from 'react-dom';
3
-import { Map } from 'react-amap';
3
+import { Map, Marker } from 'react-amap';
4
+import '../amap.less'
4 5
 
5 6
 class Amap extends React.Component {
6 7
   constructor(props) {
7
-    super(props)
8
-    this.state = { coordinates: [] }
8
+    super(props);
9
+    this.amapEvents = {
10
+      created: mapInstance => {
11
+        console.log('高德地图 Map 实例创建成功;如果你要亲自对实例进行操作,可以从这里开始。比如:');
12
+        console.log(mapInstance.getZoom());
13
+        AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.CitySearch'], () => {
14
+          // 实例化Autocomplete
15
+          const autoOptions = {
16
+            // city 限定城市,默认全国
17
+            city: '全国',
18
+            // input 为绑定输入提示功能的input的DOM ID
19
+            input: 'amapInput',
20
+          }
21
+          const autoComplete = new AMap.Autocomplete(autoOptions);
22
+          // 无需再手动执行search方法,autoComplete会根据传入input对应的DOM动态触发search
23
+
24
+          const placeSearch = new AMap.PlaceSearch({
25
+            city: '南京',
26
+            map: mapInstance,
27
+          })
28
+          AMap.event.addListener(autoComplete, 'select', e => {
29
+            // TODO 针对选中的poi实现自己的功能
30
+            placeSearch.setCity(e.poi.adcode)
31
+            placeSearch.search(e.poi.name)
32
+          })
33
+
34
+
35
+          const citySearch = new AMap.CitySearch()
36
+          citySearch.getLocalCity((status, result) => {
37
+            if (status === 'complete' && result.info === 'OK') {
38
+              // 查询成功,result即为当前所在城市信息
39
+              console.log('当前所在城市:', result)
40
+              if (result && result.city && result.bounds) {
41
+                // 当前城市名称
42
+                // const cityinfo = result.city;
43
+
44
+                // 当前城市位置信息
45
+                const citybounds = result.bounds;
46
+                // document.getElementById('info').innerHTML = '您当前所在城市:'+cityinfo;
47
+                // 地图显示当前城市
48
+                mapInstance.setBounds(citybounds);
49
+            }
50
+            }
51
+          })
52
+        })
53
+
54
+        mapInstance.on('click', e => {
55
+          const lngLat = `${e.lnglat.getLng()},${e.lnglat.getLat()}`
56
+          console.log('坐标位置:', lngLat)
57
+          this.props.onChange(lngLat)
58
+        });
59
+      },
60
+    };
61
+    this.markerEvents = {
62
+      created: markerInstance => {
63
+        console.log('高德地图 Marker 实例创建成功;如果你要亲自对实例进行操作,可以从这里开始。比如:');
64
+        console.log(markerInstance.getPosition());
65
+
66
+        // 地理坐标位置定位
67
+        // markerInstance.setPosition();
68
+      },
69
+    }
70
+    this.markerPosition = { longitude: 120, latitude: 30 };
9 71
   }
10 72
 
11 73
   render() {
12 74
     return (
13
-      <div style={{ width: '100%', height: '400px' }}>
14
-        <Map amapkey="f0d1d4f82432504003ebf46e5e36ff03"/>
15
-      </div>
75
+      <>
76
+        <div style={{ width: '100%', height: '400px' }}>
77
+          <Map events={this.amapEvents} amapkey="f0d1d4f82432504003ebf46e5e36ff03">
78
+            <Marker position={this.markerPosition} events={this.markerEvents} />
79
+          </Map>
80
+          {
81
+              <div className="info">
82
+                <div className="input-item">
83
+                  <div className="input-item-prepend">
84
+                    <span className="input-item-text" style={{ width: '8rem' }}>请输入关键字</span>
85
+                  </div>
86
+                  <input id="amapInput" type="text" />
87
+                </div>
88
+            </div>
89
+            }
90
+        </div>
91
+      </>
16 92
     )
17 93
   }
18 94
 }
19 95
 
96
+// f0d1d4f82432504003ebf46e5e36ff03
97
+
20 98
 export default Amap

+ 2
- 2
src/pages/building/list/add/components/base.jsx Voir le fichier

@@ -125,7 +125,7 @@ function AddBuilding(props) {
125 125
           <Form.Item label="销售状态" hasFeedback>
126 126
             {getFieldDecorator('marketStatus')(<Input />)}
127 127
           </Form.Item>
128
-          <Form.Item label="标签" hasFeedback>
128
+          <Form.Item label="标签" hasFeedback style={{ display: 'none' }}>
129 129
             {getFieldDecorator('tags')(
130 130
               <Select mode="multiple" placeholder="标签" style={{ width: '1016px' }}>
131 131
                 <Option value="未知">未知</Option>
@@ -178,7 +178,7 @@ function AddBuilding(props) {
178 178
             {getFieldDecorator('coordinate')(<Input disabled />)}
179 179
           </Form.Item>
180 180
           <Form.Item label="地图位置" hasFeedback>
181
-            {(<Amap />)}
181
+            {getFieldDecorator('coordinate')(<Amap />)}
182 182
           </Form.Item>
183 183
           <Form.Item label="周边交通" hasFeedback>
184 184
             {getFieldDecorator('buildingTransport')(