surprise
2023-12-29 18377dc5d61caf3a6a0835e17015ac2601f8709d
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
<template>
  <div class="chartbox">
    <div class="closeBtn" @click="close">x</div>
    <div class="tabsBox">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用地规划统计" name="first">
          <div
            id="ydghChart"
            style="width: 1050px; height: 400px; margin: 20px auto 0"
          ></div>
        </el-tab-pane>
        <el-tab-pane label="窨井类型统计" name="second">
          <div
            id="yjlxChart"
            style="width: 1000px; height: 400px; margin: 20px auto 0"
          ></div>
        </el-tab-pane>
        <el-tab-pane label="视频区划统计" name="third">
          <div
            id="spqhChart"
            style="width: 1000px; height: 400px; margin: 20px auto 0"
          ></div>
        </el-tab-pane>
        <el-tab-pane label="企业区划统计" name="fourth">
          <div
            id="qyqhChart"
            style="width: 1000px; height: 400px; margin: 20px auto 0"
          ></div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "qycharts",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      activeName: "first",
      filterData: {
        yinghai: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
                  <ogc:Or>
                   <ogc:And>
                      <ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing>
                      <gml:posList>116.528430557 39.717047897 116.523150597 39.718594241 116.521008259 39.715748836 116.526466372 39.71418735599999 116.524389925 39.712277836 116.5250746153 39.7121056246 116.523690603 39.710053236 116.521873409 39.710498507 116.520724469 39.708573537 116.510857259 39.711209797 116.510263792 39.710094966 116.504905152 39.71040009 116.501956601 39.712151599 116.499245865 39.708092608 116.494764747 39.71742170800001 116.493053062 39.712555338 116.489464228 39.718316989 116.484957894 39.717641568 116.487941043 39.72445832199999 116.481830415 39.726403261 116.483663321 39.731126072 116.490406116 39.734959904 116.498369567 39.737790522 116.515527832 39.739601198 116.521505087 39.742157836 116.526512211 39.741859198 116.526504801 39.740676263 116.530859094 39.739465152 116.531775809 39.741455654 116.533816424 39.740404636 116.532178369 39.736947076 116.526424828 39.738391913 116.526035711 39.72880738900001 116.53163657 39.727284154 116.531220973 39.721130557 116.528430557 39.717047897 </gml:posList>
                      </gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects>
                   </ogc:And>   
                   <ogc:And>
                      <ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing>
                      <gml:posList>116.450112402 39.774130501 116.452743995 39.771348889 116.455777821 39.772890859 116.458696737 39.77237073 116.460276763 39.76858090399999 116.466350258 39.76908386 116.468792657 39.766602872 116.469975215 39.761060664 116.491450101 39.760240091 116.4918908752 39.75875153789999 116.489286484 39.750704629 116.489672587 39.736812869 116.478151932 39.73247846400001 116.477078734 39.734361145 116.467882005 39.73534127700001 116.466772505 39.7394284 116.4637488 39.738893845 116.464710473 39.73565172100001 116.456089819 39.736568463 116.457219077 39.73310806899999 116.458899154 39.732984441 116.459261802 39.726771135 116.457037332 39.72568437200001 116.451070549 39.7270806 116.450115994 39.731612039 116.445047486 39.731770966 116.444722308 39.735367284 116.449192189 39.735056815 116.447617625 39.740191603 116.420801356 39.739688452 116.417320928 39.760845145 116.440359545 39.77152452499999 116.43965911 39.777895177 116.446217032 39.77444053300001 116.450112402 39.774130501 </gml:posList>
                      </gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects>
                   </ogc:And>
                  </ogc:Or>   
                  </ogc:Filter>`,
        yizhuang: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
                  <ogc:Or>
                   <ogc:And>
                      <ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing>
                      <gml:posList>116.491940227 39.815595332 116.476138385 39.809699805 116.469947569 39.803946892 116.473359446 39.80088132 116.481973891 39.804029188 116.484730106 39.800565853 116.479588329 39.799786575 116.483337919 39.794981832 116.478440999 39.79272169 116.486782694 39.783346691 116.47799773 39.779077739 116.489679132 39.772463569 116.487117312 39.76330861 116.493169202 39.762701244 116.4918908752 39.75875153789999 116.491450101 39.760240091 116.469975215 39.761060664 116.468792657 39.766602872 116.466350258 39.76908386 116.460276763 39.76858090399999 116.458696737 39.77237073 116.455777821 39.772890859 116.452743995 39.771348889 116.450112402 39.774130501 116.45395102 39.78099937000001 116.455954225 39.782904603 116.458218473 39.782555122 116.458691328 39.786156868 116.460733209 39.786199503 116.46208783 39.79652698400001 116.46438247 39.794785341 116.465960691 39.80761057 116.479235579 39.811528582 116.47947871 39.815657888 116.483811028 39.81510691 116.483636363 39.817709544 116.489304975 39.817565008 116.489073715 39.814962657 116.491940227 39.815595332 </gml:posList>
                      </gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects>
                   </ogc:And>   
                   <ogc:And>
                      <ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing>
                      <gml:posList>116.529344538 39.822930706 116.53388311 39.822402274 116.533670396 39.820391365 116.529568623 39.820443579 116.529786464 39.817465239 116.528203566 39.817441194 116.52649628 39.819144032 116.506571393 39.810367979 116.501800279 39.813256849 116.504813906 39.814615625 116.501836098 39.816318794 116.496686635 39.817591233 116.504154383 39.820244864 116.503761045 39.822168848 116.505290142 39.822240873 116.505849086 39.825035793 116.507664823 39.824208025 116.508784421 39.82919445600001 116.510551118 39.829306749 116.520108646 39.828665226 116.520497541 39.825700922 116.525832846 39.825612317 116.525895727 39.823740848 116.529344538 39.822930706 </gml:posList>
                      </gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects>
                   </ogc:And>
                  </ogc:Or>   
                  </ogc:Filter>`,
        madianqiao: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing>
<gml:posList>116.601166476 39.76517634199999 116.601043832 39.767286454 116.609838171 39.767546748 116.609072206 39.776811159 116.623308344 39.77764160800001 116.623288902 39.77408636 116.624467395 39.773714614 116.630916869 39.77438972 116.630703589 39.776394976 116.643844707 39.769366162 116.644513464 39.763037786 116.65483026 39.763445653 116.668164347 39.755216282 116.686733098 39.740480982 116.680652495 39.740250237 116.680510666 39.736811642 116.678905908 39.736518632 116.679179994 39.730621452 116.677301194 39.730267918 116.677256746 39.724455524 116.665332792 39.724322535 116.66551678 39.710997805 116.674176398 39.710960229 116.674212362 39.702341662 116.677064136 39.702372129 116.67708679 39.693507825 116.664475703 39.693900205 116.664471352 39.690808055 116.662187642 39.691072551 116.662967493 39.686741404 116.656996335 39.68537953 116.656532167 39.687461281 116.651946497 39.687557843 116.651916157 39.68542119300001 116.64697072 39.685740237 116.645037743 39.687168737 116.64550693 39.693472971 116.641492357 39.693817996 116.640182549 39.699845392 116.642848167 39.699793505 116.642043608 39.702594679 116.647258094 39.702958792 116.647311288 39.707373992 116.639169441 39.70838939 116.636006832 39.713473653 116.636750127 39.714755033 116.63310817 39.714760128 116.631414097 39.723264584 116.625320462 39.722312349 116.625578436 39.723761314 116.621537577 39.727071053 116.615934542 39.727041954 116.616053798 39.724700665 116.61079457 39.724642724 116.609963993 39.720893718 116.609063102 39.722797098 116.607181189 39.722783612 116.606267958 39.720608902 116.60311279 39.72027468 116.60367623 39.718158502 116.598858699 39.71743909900001 116.598098171 39.713420282 116.594733346 39.714608532 116.594839639 39.711338428 116.584555611 39.710480306 116.584558545 39.71230228999999 116.574259883 39.71208158799999 116.574232627 39.709238184 116.56776736 39.708343454 116.567279588 39.713819744 116.539996529 39.714040263 116.53002492 39.710860538 116.524389925 39.712277836 116.526466372 39.71418735599999 116.521008259 39.715748836 116.523150597 39.718594241 116.528430557 39.717047897 116.531220973 39.721130557 116.53163657 39.727284154 116.526035711 39.72880738900001 116.526424828 39.738391913 116.532178368 39.736947076 116.533816424 39.740404636 116.531775808 39.741455654 116.530859094 39.739465152 116.526504801 39.740676263 116.526512211 39.741859198 116.521505087 39.742157836 116.526088159 39.747560541 116.516981566 39.74831494 116.519255244 39.761224483 116.514615134 39.764487668 116.517648926 39.768644029 116.52264253 39.760050967 116.534740079 39.760036217 116.533943758 39.76503188 116.53111777 39.764987217 116.530582775 39.767367872 116.539888966 39.767571552 116.538620709 39.771134868 116.536628955 39.76942842 116.530143632 39.768706305 116.524540905 39.777460941 116.532086305 39.780073142 116.526378629 39.78671343900001 116.537462088 39.788161245 116.539945961 39.783770263 116.544506355 39.783390063 116.542404118 39.779589788 116.544938673 39.777886635 116.549934472 39.777848235 116.557836183 39.78131178 116.568776284 39.782698223 116.570317845 39.771312615 116.583437213 39.77436148599999 116.585222736 39.764921174 116.601166476 39.76517634199999 </gml:posList>
</gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects></ogc:Filter>`,
        qingyundian: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing>
<gml:posList>116.447617625 39.740191603 116.449192189 39.735056815 116.444722308 39.735367284 116.445047486 39.731770966 116.450115994 39.731612039 116.451070549 39.7270806 116.457037332 39.72568437200001 116.459261802 39.726771135 116.458899154 39.732984441 116.457219077 39.73310806899999 116.456089819 39.736568463 116.464710473 39.73565172100001 116.4637488 39.738893845 116.466772505 39.7394284 116.467882005 39.73534127700001 116.477078734 39.734361145 116.4784422262 39.7322167233 116.479115877 39.730939598 116.483663321 39.731126072 116.481830415 39.726403261 116.487941043 39.72445832199999 116.484957894 39.717641568 116.489464228 39.718316989 116.493053062 39.712555338 116.494764747 39.71742170800001 116.499245865 39.708092608 116.501956601 39.712151599 116.504905152 39.71040009 116.510263792 39.710094966 116.510857259 39.711209797 116.520724469 39.708573537 116.521873409 39.710498507 116.523690603 39.710053236 116.5250746153 39.7121056246 116.53002492 39.710860538 116.539996529 39.714040263 116.5516260966 39.7139655475 116.5634992838 39.7138502988 116.5643299046 39.7011498907 116.5591677566 39.7011207997 116.5593776416 39.6971490617 116.5636705406 39.6971023417 116.5636947386 39.6898713687 116.5571883406 39.6907026687 116.5590908636 39.6787753777 116.5583360126 39.6718288817 116.5565151416 39.6717675407 116.5562812636 39.6601024997 116.5530245126 39.6597523687 116.5545443006 39.6530656387 116.5521083836 39.6526742427 116.5511100332 39.6549268573 116.5483853862 39.6546624083 116.5466421842 39.6504617833 116.5401146132 39.6500543343 116.5313044192 39.6543675563 116.5219106172 39.6538911823 116.5184526502 39.6560272383 116.5186935582 39.6533395683 116.5100109602 39.65262750530001 116.5098112732 39.6540700663 116.5128779052 39.6540473733 116.5096794872 39.6542801573 116.5087703532 39.6597357313 116.5075182482 39.6597304273 116.5077404212 39.6566995803 116.5064843902 39.6565596713 116.4980615752 39.6590714503 116.4992563852 39.6611954723 116.4946446152 39.66182351230001 116.4945288382 39.6632881223 116.4888228172 39.6630493453 116.4859300402 39.6673989123 116.4813379822 39.6643739753 116.4785897252 39.6667452493 116.4753181662 39.6668940383 116.4747094622 39.6685464343 116.4703358092 39.6689962673 116.4684044052 39.67176540229999 116.4623777132 39.6715724633 116.4584076012 39.6801691023 116.4565623432 39.6803171453 116.4556737412 39.6828196393 116.4527109482 39.6829483463 116.4527144072 39.6852924953 116.4406400112 39.6879517203 116.4401155542 39.6907169553 116.4352511182 39.6905757173 116.4344787202 39.6934742693 116.4300423992 39.6930479773 116.4283679332 39.6998374473 116.4204829382 39.69875276629999 116.4198858182 39.7058098213 116.4247854302 39.7062278653 116.4233975412 39.7190523153 116.4320712432 39.7199062283 116.4317857532 39.7226237583 116.4388018362 39.7238237533 116.4364055632 39.72491824930001 116.4306363302 39.7339367023 116.4297344097 39.739856062 116.447617625 39.740191603 </gml:posList>                    
</gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects></ogc:Filter>`,
        zhangziying: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing>
<gml:posList>116.636750127 39.714755033 116.636006832 39.713473653 116.639169441 39.70838939 116.647311288 39.707373992 116.647258094 39.702958792 116.642043608 39.702594679 116.642848167 39.699793505 116.640182549 39.699845392 116.641492357 39.693817996 116.64550693 39.693472971 116.645037743 39.687168737 116.6453457528 39.686941113 116.6451723333 39.6844903456 116.6424224853 39.6846068706 116.6420877443 39.68117560559999 116.6393223503 39.6781387536 116.6393982723 39.6729158076 116.6229300803 39.6709937116 116.6225131493 39.66911918760001 116.6227837243 39.6713936456 116.6067086049 39.6695309791 116.6080348159 39.6642823571 116.6127163966 39.6630342257 116.6130528716 39.6593855467 116.5911673346 39.6562983817 116.5955849206 39.6449349267 116.5973822396 39.6451917837 116.5999139066 39.64012994769999 116.6085532146 39.6428558897 116.6100307116 39.6368237617 116.6202460306 39.6369988447 116.6195104486 39.6306588917 116.6233361616 39.6307935217 116.6237311376 39.6253238887 116.6174410506 39.6253949847 116.6156030266 39.6229627047 116.6065468916 39.62408677469999 116.6059732656 39.6215529777 116.6022639496 39.6215814317 116.6018898186 39.62373030069999 116.5971648236 39.6235352997 116.5963298246 39.6215903027 116.5934198216 39.6214903057 116.5942998236 39.61853530270001 116.5894448186 39.6169403007 116.5877298186 39.6174953007 116.5868448236 39.6204453047 116.5870398256 39.6183153017 116.5861298176 39.6201652977 116.5837448226 39.6183452997 116.5827948166 39.6208352997 116.5770548356 39.6219903007 116.5797598236 39.6225503057 116.5733048286 39.6224453017 116.5735548206 39.6185253057 116.5635598226 39.61919530570001 116.5614326356 39.6224514627 116.5599584456 39.6222708277 116.5602570076 39.6203432307 116.5570910146 39.6210492347 116.5589444116 39.62222321170001 116.5553949826 39.62220968870001 116.5575116296 39.6231760347 116.5558973326 39.6231698777 116.5570947596 39.6235180487 116.5545131146 39.6250085777 116.5539309626 39.6276377627 116.5598054446 39.63047578670001 116.5585740466 39.6342889107 116.5566436506 39.6330961377 116.5561818696 39.6346615797 116.5574453626 39.6362965947 116.5625212376 39.6363158127 116.5620457786 39.6381102927 116.5638328836 39.6402326567 116.5609424826 39.64020877770001 116.5634821266 39.6414632787 116.5621787536 39.64404173070001 116.5565068516 39.6409908097 116.5556922906 39.6482901697 116.5531218406 39.6478928087 116.5520893876 39.6510012817 116.5521083836 39.6526742427 116.5545443006 39.6530656387 116.5530245126 39.6597523687 116.5562812636 39.6601024997 116.5565151416 39.6717675407 116.5583360126 39.6718288817 116.5590908636 39.6787753777 116.5571883406 39.6907026687 116.5636947386 39.6898713687 116.5636705406 39.6971023417 116.5593776416 39.6971490617 116.5591677566 39.7011207997 116.5643299046 39.7011498907 116.5634992838 39.7138502988 116.567279588 39.713819744 116.56776736 39.708343454 116.574232627 39.709238184 116.574259883 39.71208158799999 116.584558545 39.71230228999999 116.584555611 39.710480306 116.594839639 39.711338428 116.594733346 39.714608532 116.598098171 39.713420282 116.598858699 39.71743909900001 116.60367623 39.718158502 116.60311279 39.72027468 116.606267958 39.720608902 116.607181189 39.722783612 116.609063102 39.722797098 116.609963993 39.720893718 116.61079457 39.724642724 116.616053798 39.724700665 116.615934542 39.727041954 116.621537577 39.727071053 116.625578436 39.723761314 116.625320462 39.722312349 116.631414097 39.723264584 116.63310817 39.714760128 116.636750127 39.714755033 </gml:posList>                    
</gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects></ogc:Filter>`,
        caiyu: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing>
<gml:posList>116.6022639496 39.6215814317 116.6059732656 39.6215529777 116.6065468916 39.62408677469999 116.6156030266 39.6229627047 116.6174410506 39.6253949847 116.6237311376 39.6253238887 116.6233361616 39.6307935217 116.6195104486 39.6306588917 116.6202460306 39.6369988447 116.6100307116 39.6368237617 116.6085532146 39.6428558897 116.5999139066 39.64012994769999 116.5973822396 39.6451917837 116.5955849206 39.6449349267 116.5911673346 39.6562983817 116.6130528716 39.6593855467 116.6127163966 39.6630342257 116.6080348159 39.6642823571 116.6067086049 39.6695309791 116.6227837243 39.6713936456 116.6225131493 39.66911918760001 116.6229300803 39.6709937116 116.6393982723 39.6729158076 116.6393695577 39.67489118959999 116.6393223503 39.6781387536 116.6420877443 39.68117560559999 116.6424224853 39.6846068706 116.6451723333 39.6844903456 116.6453457528 39.686941113 116.6469719097 39.685740237 116.6519173467 39.68542119300001 116.6519476867 39.687557843 116.6565333557 39.687461281 116.6569975247 39.68537953 116.6606607233 39.6862150153 116.6637838277 39.682250051 116.6602180767 39.678697108 116.6604439247 39.675161043 116.6624011607 39.675495707 116.6637140907 39.673454792 116.6814679227 39.675759113 116.6977622437 39.672982744 116.6989707217 39.666268466 116.6961354587 39.657830728 116.6969277457 39.648748374 116.7043149357 39.636586197 116.7043180187 39.638571833 116.7079293387 39.639165209 116.7179047877 39.6375061 116.7184360247 39.633334988 116.7159708147 39.633230923 116.7167741017 39.629929494 116.7155406847 39.62835041600001 116.7191561537 39.62570764 116.7195175437 39.622895339 116.7158261967 39.622544997 116.7158361937 39.620574999 116.7102261947 39.620389996 116.7041011897 39.616894997 116.7000461867 39.617854997 116.6994011847 39.620259996 116.6946511977 39.619864998 116.6962061947 39.613325003 116.6979211947 39.612540002 116.6983761877 39.609825002 116.6967611957 39.609230003 116.7075161907 39.604335002 116.7080061947 39.601710004 116.7094461947 39.602864994 116.7120211917 39.602100002 116.7123461957 39.599910004 116.7150711937 39.599400003 116.7125361967 39.599080003 116.7166461947 39.59821500200001 116.7187261947 39.594030006 116.7186111897 39.596860001 116.7200961887 39.594234999 116.7203361937 39.596630003 116.7210711937 39.591864999 116.7187361877 39.591234997 116.7175561897 39.593875001 116.7179311937 39.590904998 116.7169561967 39.591604996 116.7140561917 39.589169999 116.6991961887 39.586819997 116.6946811857 39.589904998 116.6932061857 39.594319996 116.6904961877 39.594259997 116.6880961857 39.600424995 116.6829961917 39.597370002 116.6828011847 39.598729996 116.6787861997 39.599484997 116.6769161877 39.597289998 116.6764261847 39.599629997 116.6743461897 39.59852 116.6743311847 39.600114997 116.6588611887 39.604469996 116.6518661877 39.60239000100001 116.6518611937 39.599684999 116.6494511927 39.598619999 116.6445811867 39.598874998 116.6438111847 39.602744996 116.6437361937 39.598799998 116.6408011887 39.598089997 116.6397611857 39.601034995 116.6372211867 39.600719997 116.6365461847 39.603639995 116.6325861897 39.602355002 116.6326011917 39.603895001 116.6300461957 39.603809996 116.6296461937 39.598899998 116.6225311877 39.598564996 116.6147711877 39.600704998 116.6144461847 39.605879996 116.6111211867 39.606284997 116.6109211847 39.613074995 116.6074511867 39.612789997 116.6060461857 39.61781499500001 116.6020561867 39.618679997 116.6022639496 39.6215814317 </gml:posList>                    
</gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects></ogc:Filter>`,
        ronghuajiedao: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing>
<gml:posList>116.525102934 39.790573583 116.5275925237 39.7868720072 116.526378629 39.78671343900001 116.532086305 39.780073142 116.524540905 39.777460941 116.530143632 39.768706305 116.536628955 39.76942842 116.538620709 39.771134868 116.539888966 39.767571552 116.530582775 39.767367872 116.53111777 39.764987217 116.533943758 39.76503188 116.534740079 39.760036217 116.522642531 39.760050967 116.517648926 39.768644029 116.5167411804 39.7674003977 116.507975167 39.7723504 116.490498779 39.777044384 116.484869224 39.782434812 116.486782694 39.783346691 116.478440999 39.79272169 116.483337919 39.794981832 116.479588329 39.799786575 116.484730106 39.800565853 116.481973891 39.804029188 116.473359446 39.80088132 116.469947569 39.803946892 116.476138385 39.809699805 116.491940227 39.815595332 116.492237652 39.814492122 116.501836098 39.816318794 116.504813906 39.814615625 116.501800279 39.813256849 116.506571393 39.810367979 116.52649628 39.819144032 116.528203566 39.817441194 116.534731852 39.81077046 116.535768947 39.802084342 116.531874349 39.801431395 116.531851137 39.799141462 116.529225217 39.799025087 116.531693197 39.795578405 116.528138974 39.794620443 116.529579471 39.792324583 116.525102934 39.790573583 </gml:posList>                    
</gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects></ogc:Filter>`,
        jiugong: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing>
<gml:posList>116.465960691 39.80761057 116.46438247 39.794785341 116.46208783 39.79652698400001 116.460733209 39.786199503 116.458691328 39.786156868 116.458218473 39.782555122 116.455954225 39.782904603 116.45395102 39.78099937000001 116.450112402 39.774130501 116.446217032 39.77444053300001 116.43965911 39.777895177 116.440359545 39.77152452499999 116.417320928 39.760845145 116.419221844 39.749259074 116.405992299 39.748257995 116.404578697 39.75528074000001 116.406849525 39.756323107 116.405176477 39.769787821 116.392130573 39.7686342 116.389983327 39.785420674 116.413939269 39.786143469 116.415477638 39.78880881900001 116.414918286 39.792766926 116.423200443 39.793138686 116.423191077 39.802377578 116.418006922 39.802247101 116.419594027 39.805331021 116.417950664 39.805323997 116.416307951 39.809035985 116.41175296 39.80684397999999 116.409311073 39.811104904 116.403693784 39.810016448 116.403768873 39.815371907 116.413339275 39.813989358 116.412239853 39.821334456 116.407950167 39.822672404 116.409492313 39.828090375 116.413500064 39.825308616 116.414502006 39.828392389 116.418945136 39.828572992 116.41890064 39.830879546 116.424306221 39.830885474 116.423812764 39.828792084 116.430352967 39.82905370400001 116.429963395 39.82651471 116.434070055 39.826451376 116.434586774 39.828366327 116.436864074 39.82652714200001 116.438224106 39.819261961 116.447659328 39.821424438 116.45716707 39.813097947 116.462637206 39.813572426 116.4683873101 39.8083267736 116.465960691 39.80761057 </gml:posList>
</gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects></ogc:Filter>`,
        taihu: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing>
<gml:posList>116.601043832 39.767286454 116.601166476 39.76517634199999 116.585222736 39.764921174 116.583437213 39.77436148599999 116.570317845 39.771312615 116.568776284 39.782698223 116.557836183 39.78131178 116.549934472 39.777848235 116.544938673 39.777886635 116.542404118 39.779589788 116.544506355 39.783390063 116.539945961 39.783770263 116.537462088 39.788161245 116.5275925237 39.7868720072 116.527363263 39.787200476 116.525102934 39.790573583 116.529579471 39.792324583 116.528138974 39.794620443 116.531693197 39.795578405 116.529225217 39.799025087 116.531851137 39.799141462 116.531874349 39.801431395 116.535768947 39.802084342 116.534731852 39.81077046 116.528203566 39.817441194 116.529786464 39.817465239 116.529568623 39.820443579 116.533670395 39.820391365 116.53388311 39.822402274 116.529344538 39.822930706 116.529066156 39.825939766 116.531806337 39.82553391 116.532261515 39.827094683 116.526633731 39.829912396 116.52738192 39.831731335 116.52974236 39.830286836 116.531787081 39.83096011 116.535157716 39.828405321 116.536863995 39.829187168 116.537856737 39.83400353 116.539348543 39.832619878 116.539359682 39.83492059400001 116.542351371 39.833137236 116.555156088 39.833403092 116.55605876 39.831113258 116.556772783 39.83244997 116.563658686 39.832428329 116.563588407 39.833866018 116.566558025 39.833964754 116.566803388 39.831052104 116.571377972 39.829584538 116.57164276 39.82649421299999 116.581080945 39.82714781300001 116.577777206 39.823796178 116.585784669 39.822802315 116.585405219 39.825218795 116.588093628 39.82526789900001 116.592008407 39.825071848 116.59233746 39.823639288 116.59324107 39.830628208 116.596484781 39.83061901 116.596005872 39.84019988099999 116.602572203 39.84547827 116.598886011 39.845101503 116.598232335 39.848737876 116.607438183 39.849343393 116.621456262 39.859910895 116.630121527 39.859419615 116.630117602 39.857699543 116.642143881 39.856236847 116.642152058 39.85466212 116.639411452 39.854707705 116.639664594 39.850526611 116.644879037 39.851515923 116.644788937 39.852835263 116.652904055 39.85294261300001 116.655950879 39.850824417 116.664541079 39.85056401500001 116.664617332 39.849215987 116.661037943 39.849197071 116.663781285 39.835764571 116.673065461 39.838547339 116.673356096 39.837102789 116.676480737 39.836964492 116.67754058 39.833667839 116.68585274 39.834402561 116.685288247 39.832553599 116.688285268 39.82823586300001 116.659855048 39.808464839 116.655349436 39.800678562 116.64603311 39.797816165 116.639357897 39.790423623 116.639506432 39.781869321 116.636066112 39.7787024 116.6367908828 39.7731390539 116.630703589 39.776394976 116.630916869 39.77438972 116.624467395 39.773714614 116.623288902 39.77408636 116.623308344 39.77764160800001 116.609072206 39.776811159 116.609838171 39.767546748 116.601043832 39.767286454 </gml:posList>
</gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects></ogc:Filter>`,
        boxing: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing>
<gml:posList>116.483663321 39.731126072 116.479115877 39.730939598 116.4784422262 39.7322167233 116.4782518314 39.7325161653 116.489672587 39.736812869 116.489286484 39.750704629 116.493169202 39.762701244 116.487117312 39.76330861 116.489679132 39.772463569 116.47799773 39.779077739 116.484869224 39.782434812 116.490498779 39.777044384 116.507975167 39.7723504 116.5167411804 39.7674003977 116.514615134 39.764487668 116.519255244 39.761224483 116.516981566 39.74831494 116.526088159 39.747560541 116.521505087 39.742157836 116.515527832 39.739601198 116.498369567 39.737790522 116.490406116 39.734959904 116.483663321 39.731126072 </gml:posList>
</gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects></ogc:Filter>`,
      },
    };
  },
  mounted() {
    setTimeout(() => {
      this.drawLine();
    }, 500);
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
      // this.drawLine();
    },
    drawLine() {
      // 基于准备好的dom,初始化echarts实例
      let ydghChart = this.$echarts.init(document.getElementById("ydghChart"));
      let yjlxChart = this.$echarts.init(document.getElementById("yjlxChart"));
      let spqhChart = this.$echarts.init(document.getElementById("spqhChart"));
      let qyqhChart = this.$echarts.init(document.getElementById("qyqhChart"));
      // 用地规划
      let ydghOpt = {
        title: {
          //1.标题居中
          left: "center",
          //2.主副标题之间的间距
          itemGap: 20,
          // 3.标题文本样式
          text: "用地规划统计",
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "bold",
            fontFamily: "sans-serif",
            fontSize: 24,
          },
          //4.副标题
          // subtext: "副标题", //副标题文本样式
          // subtextStyle: {},
          //5.grid组件离容器左侧的距离。
          // left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。
          //如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。
          // left: "center",
        },
        // color: "#91CC75",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "待研究",
              "多功能",
              "工业用地",
              "公共管理与公共服务用地",
              "基本农田",
              "集体建设用地",
              "交通设施用地",
              "居住用地",
              "绿地",
              "商业服务业设施用地",
              "水域",
              "物流仓储用地",
              "战略留白用地",
 
              // "待研究",
              // "道路用地",
              // "多功能",
              // "工业",
              // "基本农田",
              // "集体建设用地",
              // "教育",
              // "居住",
              // "科研",
              // "绿地",
              // "商业服务业",
              // "社会福利",
              // "市政",
              // "水域",
              // "体育",
              // "停车场",
              // "文化娱乐",
              // "物流",
              // "行政办公",
              // "医疗",
              // "战略留白用地",
            ],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 16,
              },
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 3; //一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
            },
          },
        ],
        yAxis: [
          {
            name: "面积(公顷)",
            type: "value",
            nameTextStyle: {
              color: "#fff",
              fontSize: 18,
              padding: [0, 0, 10, -30], //name文字位置 对应 上右下左
            },
            splitLine: {
              // 网格线
              show: true,
              lineStyle: {
                //分割线
                color: "#fff",
                width: 1,
                type: "dashed", //dotted:虚线 solid:实线
              },
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#fff",
                fontSize: 18,
              },
            },
          },
        ],
        series: [
          {
            // name: "面积",
            type: "bar",
            barWidth: "60%",
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
                fontSize: 18,
              },
            },
            data: [
              181.46, 619.49, 3570.25, 1358.78, 2673.98, 166.7, 4574.52, 2032.9,
              5852.32, 414.01, 793.63, 250.69, 309.7,
            ],
            // data: [
            //   181.460863, 4518.31, 619.49, 3570.248734, 2673.98, 166.7, 327.09,
            //   2032.9, 137.97, 5852.316949, 414.010021, 23.7, 636.91247,
            //   793.634256, 76.64, 56.21, 58.22, 250.69, 41.94, 56.31, 309.7,
            // ],
          },
        ],
      };
      // 窨井类型
      let yjlxOpt = {
        title: {
          //1.标题居中
          left: "center",
          //2.主副标题之间的间距
          itemGap: 20,
          // 3.标题文本样式
          text: "窨井类型统计",
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "bold",
            fontFamily: "sans-serif",
            fontSize: 24,
          },
        },
        color: "#91CC75",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "电力井",
              "监控井",
              "交通井",
              "路灯井",
              "其他",
              "燃气井",
              "热气井",
              "通信井",
              "污水井",
              "雨水井",
            ],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位:个",
            nameTextStyle: {
              color: "#fff",
              fontSize: 18,
              padding: [0, 0, 10, -30], //name文字位置 对应 上右下左
            },
            splitLine: {
              // 网格线
              show: true,
              lineStyle: {
                //分割线
                color: "#fff",
                width: 1,
                type: "dashed", //dotted:虚线 solid:实线
              },
            },
            // axisLine: {
            //   show: true,
            //   lineStyle: {
            //     color: "#91CC75",
            //   },
            // },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 18,
              },
            },
          },
        ],
        series: [
          {
            name: "数量",
            type: "bar",
            barWidth: "60%",
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
                fontSize: 18,
              },
            },
            data: [2259, 596, 2330, 7027, 39, 112, 2265, 2757, 3479, 4016],
          },
        ],
      };
      // 视频区划
      let spqhOpt = {
        title: {
          //1.标题居中
          left: "center",
          //2.主副标题之间的间距
          itemGap: 20,
          // 3.标题文本样式
          text: "视频区域统计",
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "bold",
            fontFamily: "sans-serif",
            fontSize: 24,
          },
          //4.副标题
          // subtext: "副标题", //副标题文本样式
          // subtextStyle: {},
          //5.grid组件离容器左侧的距离。
          // left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。
          //如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。
          // left: "center",
        },
        // color: "#91CC75",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "瀛海地区",
              "亦庄地区",
              "马驹桥镇",
              "青云店镇",
              "长子营镇",
              "采育镇",
              "荣华街道",
              "旧宫地区",
              "台湖镇",
              "博兴街道",
            ],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 16,
              },
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = params.length == 4 ? 2 : 3; //一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位:路",
            nameTextStyle: {
              color: "#fff",
              fontSize: 18,
              padding: [0, 0, 10, -30], //name文字位置 对应 上右下左
            },
            splitLine: {
              // 网格线
              show: true,
              lineStyle: {
                //分割线
                color: "#fff",
                width: 1,
                type: "dashed", //dotted:虚线 solid:实线
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 18,
              },
            },
          },
        ],
        series: [
          {
            name: "路数",
            type: "bar",
            barWidth: "60%",
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
                fontSize: 18,
              },
            },
            data: [869, 374, 721, 10, 0, 0, 2567, 2, 1011, 968],
          },
        ],
      };
      // 企业区划
      let qyqhOpt = {
        title: {
          //1.标题居中
          left: "center",
          //2.主副标题之间的间距
          // itemGap: 20,
          // 3.标题文本样式
          text: "企业区划统计",
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "bold",
            fontFamily: "sans-serif",
            fontSize: 24,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          top: "center",
 
          left: "left",
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
        },
        series: [
          {
            name: "企业数量",
            type: "pie",
            radius: "70%",
            center: ["50%", "60%"],
            label: {
              // alignTo: "edge",
              formatter: "{name|{b}}:{time|{c} 家}",
              minMargin: 5,
              edgeDistance: 10,
              // lineHeight: 15,
              rich: {
                time: {
                  fontSize: 16,
                  color: "#fff",
                },
              },
            },
            data: [
              {
                value: 282,
                name: "长子营镇",
                label: {
                  color: "#fff",
                  fontSize: 16,
                },
              },
              {
                value: 21999,
                label: {
                  color: "#fff",
                  fontSize: 16,
                },
                name: "马驹桥镇",
              },
              {
                value: 118,
                label: {
                  color: "#fff",
                  fontSize: 16,
                },
                name: "青云店镇",
              },
              {
                value: 178,
                label: {
                  color: "#fff",
                  fontSize: 16,
                },
                name: "采育镇",
              },
              {
                value: 1852,
                label: {
                  color: "#fff",
                  fontSize: 16,
                },
                name: "博兴街道",
              },
              {
                value: 8389,
                label: {
                  color: "#fff",
                  fontSize: 16,
                },
                name: "旧宫地区",
              },
              {
                value: 30943,
                label: {
                  color: "#fff",
                  fontSize: 16,
                },
                name: "荣华街道",
              },
              {
                value: 5029,
                label: {
                  color: "#fff",
                  fontSize: 16,
                },
                name: "台湖镇",
              },
              {
                value: 1677,
                label: {
                  color: "#fff",
                  fontSize: 16,
                },
                name: "亦庄地区",
              },
              {
                value: 3209,
                label: {
                  color: "#fff",
                  fontSize: 16,
                },
                name: "瀛海地区",
              },
            ],
            emphasis: {
              itemStyle: {
                // shadowBlur: 10,
                // shadowOffsetX: 0,
                // shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      ydghChart.setOption(ydghOpt);
      yjlxChart.setOption(yjlxOpt);
      spqhChart.setOption(spqhOpt);
      qyqhChart.setOption(qyqhOpt);
    },
    close() {
      this.$store.commit("setqyEchartsShow", false);
    },
    test() {
      Promise.all([
        axios.get(
          "http://10.10.4.116:8070/gisserver/wfsserver/YZ_SPJK_NEW_wfs",
          {
            params: {
              version: "1.3.0",
              request: "GetFeature",
              typename: `摄像头0423`,
              propertyname: "*",
              format: "json",
              filter: this.filterData.yinghai,
            },
          }
        ),
        axios.get(
          "http://10.10.4.116:8070/gisserver/wfsserver/YZ_SPJK_NEW_wfs",
          {
            params: {
              version: "1.3.0",
              request: "GetFeature",
              typename: `摄像头0423`,
              propertyname: "*",
              format: "json",
              filter: this.filterData.yizhuang,
            },
          }
        ),
        axios.get(
          "http://10.10.4.116:8070/gisserver/wfsserver/YZ_SPJK_NEW_wfs",
          {
            params: {
              version: "1.3.0",
              request: "GetFeature",
              typename: `摄像头0423`,
              propertyname: "*",
              format: "json",
              filter: this.filterData.madianqiao,
            },
          }
        ),
        axios.get(
          "http://10.10.4.116:8070/gisserver/wfsserver/YZ_SPJK_NEW_wfs",
          {
            params: {
              version: "1.3.0",
              request: "GetFeature",
              typename: `摄像头0423`,
              propertyname: "*",
              format: "json",
              filter: this.filterData.qingyundian,
            },
          }
        ),
        axios.get(
          "http://10.10.4.116:8070/gisserver/wfsserver/YZ_SPJK_NEW_wfs",
          {
            params: {
              version: "1.3.0",
              request: "GetFeature",
              typename: `摄像头0423`,
              propertyname: "*",
              format: "json",
              filter: this.filterData.zhangziying,
            },
          }
        ),
        axios.get(
          "http://10.10.4.116:8070/gisserver/wfsserver/YZ_SPJK_NEW_wfs",
          {
            params: {
              version: "1.3.0",
              request: "GetFeature",
              typename: `摄像头0423`,
              propertyname: "*",
              format: "json",
              filter: this.filterData.caiyu,
            },
          }
        ),
        axios.get(
          "http://10.10.4.116:8070/gisserver/wfsserver/YZ_SPJK_NEW_wfs",
          {
            params: {
              version: "1.3.0",
              request: "GetFeature",
              typename: `摄像头0423`,
              propertyname: "*",
              format: "json",
              filter: this.filterData.ronghuajiedao,
            },
          }
        ),
        axios.get(
          "http://10.10.4.116:8070/gisserver/wfsserver/YZ_SPJK_NEW_wfs",
          {
            params: {
              version: "1.3.0",
              request: "GetFeature",
              typename: `摄像头0423`,
              propertyname: "*",
              format: "json",
              filter: this.filterData.jiugong,
            },
          }
        ),
        axios.get(
          "http://10.10.4.116:8070/gisserver/wfsserver/YZ_SPJK_NEW_wfs",
          {
            params: {
              version: "1.3.0",
              request: "GetFeature",
              typename: `摄像头0423`,
              propertyname: "*",
              format: "json",
              filter: this.filterData.taihu,
            },
          }
        ),
        axios.get(
          "http://10.10.4.116:8070/gisserver/wfsserver/YZ_SPJK_NEW_wfs",
          {
            params: {
              version: "1.3.0",
              request: "GetFeature",
              typename: `摄像头0423`,
              propertyname: "*",
              format: "json",
              filter: this.filterData.boxing,
            },
          }
        ),
      ]).then((res) => {
        console.log(res);
        let arr = res.map((item) => {
          return item.data;
        });
        console.log(arr);
      });
    },
  },
};
</script>
 
<style scoped>
.chartbox {
  width: 1100px;
  height: 60%;
  position: absolute;
  z-index: 9999999;
  pointer-events: all;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(204, 204, 204, 0.76);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.8);
}
 
.closeBtn {
  /* background-color: #bfa; */
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}
.tabsBox {
  /* background-color: #bfa; */
  margin-top: 50px;
}
.tabsBox .el-tabs /deep/ .el-tabs__item {
  color: #fff;
  font-size: 16px;
}
.tabsBox .el-tabs /deep/ .el-tabs__nav {
  margin-left: 30px;
}
</style>>