arcgis地图

src/assets/dataService/arcgis-qs-line.json

@@ -0,0 +1,81 @@
+[{
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"paths": [
+			[107.217636108398, 37.5534917819943],
+			[107.231798171997, 37.5528113263644],
+			[107.236969470978, 37.5531430492601],
+			[107.230060100555, 37.5577912673456],
+			[107.224591076374, 37.5590223799266],
+			[107.224127054214, 37.5460702271695],
+			[107.232570648193, 37.540800261985],
+			[107.232785224915, 37.5394391127873],
+			[107.235864400864, 37.5409959251395],
+			[107.235864400864, 37.533288110023],
+			[107.233192920685, 37.5303868385901],
+			[107.209181785583, 37.5484073523692],
+			[107.205193340778, 37.5397134714219],
+			[107.208774089813, 37.5290765499824],
+			[107.215468883514, 37.5266601132254],
+			[107.219025492668, 37.5420125145689],
+			[107.218194007874, 37.5337560464588],
+			[107.223858833313, 37.5354405933172],
+			[107.227699756622, 37.5289404147812],
+			[107.237141132355, 37.5237415658803],
+			[107.225081920624, 37.5251795816112],
+			[107.21836566925, 37.5229502199563],
+			[107.201065421104, 37.5422209349572],
+			[107.201489210129, 37.5326159780052],
+			[107.205587625504, 37.5232650575122],
+			[107.211112976074, 37.5201932073065],
+			[107.209621667862, 37.5160574973166],
+			[107.205834388733, 37.5123811182352],
+			[107.203409671783, 37.5168574261816],
+			[107.198731899261, 37.5207207916834],
+			[107.199257612228, 37.508976902057],
+			[107.203677892685, 37.5070449403205],
+			[107.207164764404, 37.5046958798405],
+			[107.191742062569, 37.5510399861667],
+			[107.197715342045, 37.5495386732784],
+			[107.186712920666, 37.542729223053],
+			[107.19198346138, 37.5386734554438],
+			[107.18975186348, 37.5317992018309],
+			[107.194333076477, 37.5262006410413],
+			[107.190524339676, 37.5248307164361],
+			[107.193850278854, 37.5174190732396],
+			[107.194257974625, 37.5101939271718],
+			[107.192884683609, 37.5060406408998],
+			[107.187992334366, 37.5092492450648],
+			[107.163863182068, 37.5293998700896],
+			[107.164839506149, 37.5234862939188],
+			[107.169742584229, 37.5172829167653],
+			[107.176394462585, 37.520057055894],
+			[107.171856164932, 37.514849077877],
+			[107.168154716492, 37.5123811182352],
+			[107.17866897583, 37.5083981698663],
+			[107.175278663635, 37.5056065751042],
+			[107.179956436157, 37.5064917262093],
+			[107.182434797287, 37.5108066875511],
+			[107.185535430908, 37.5054533748091],
+			[107.195867300034, 37.5567855247009],
+			[107.187415659428, 37.5552779484629],
+			[107.187415659428, 37.5552779484629],
+			[107.17248916626, 37.5599366645357],
+			[107.168728709221, 37.5571682613454],
+			[107.16448277235, 37.5539532124332],
+			[107.165713906288, 37.5494004489002],
+			[107.171477973461, 37.5439818513075],
+			[107.177338600159, 37.5468443149692],
+			[107.165193557739, 37.5421656398089],
+			[107.168530225754, 37.5352193923647]
+		]
+	},
+	"symbol": null,
+	"attributes": {
+		"fc_code": "QS",
+		"width": 3
+	},
+	"popupTemplate": null
+}]

src/assets/dataService/arcgis-xs.json

@@ -0,0 +1,887 @@
+[{
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 105.2139616,
+            "y": 37.17630397
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 1,
+            "fc_code": "fc01",
+            "code": "升压站",
+            "type": "升压站"
+        },
+        "popupTemplate": null
+    },{
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2139616,
+		"y": 37.17630397
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG01",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2186394,
+		"y": 37.17746656
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG02",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2209997,
+		"y": 37.18197998
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG03",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2246046,
+		"y": 37.18398015
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG04",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2170515,
+		"y": 37.16939645
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG05",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2227592,
+		"y": 37.17149955
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG06",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2188325,
+		"y": 37.17346581
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG07",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2284241,
+		"y": 37.17165343
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG08",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2288532,
+		"y": 37.17532943
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG09",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2307415,
+		"y": 37.17856075
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG10",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2354193,
+		"y": 37.18136453
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG11",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2213216,
+		"y": 37.16744719
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG12",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2199697,
+		"y": 37.1630697
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG13",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2188754,
+		"y": 37.15821314
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG14",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2351832,
+		"y": 37.16212919
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG15",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2419209,
+		"y": 37.16488228
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG16",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2455902,
+		"y": 37.16595955
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG17",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2475214,
+		"y": 37.16895189
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG18",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2521992,
+		"y": 37.16784046
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG19",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2424788,
+		"y": 37.16185559
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG20",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2399254,
+		"y": 37.15814473
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG21",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2384663,
+		"y": 37.15386932
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG22",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2489376,
+		"y": 37.16094927
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG23",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2476501,
+		"y": 37.15793952
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG24",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2444744,
+		"y": 37.15532299
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG25",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2115583,
+		"y": 37.17213218
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG26",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2099276,
+		"y": 37.17526105
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG27",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2087474,
+		"y": 37.18179192
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG28",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2079105,
+		"y": 37.18509134
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG29",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2108502,
+		"y": 37.18861284
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG30",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1989198,
+		"y": 37.1755517
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG31",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1991987,
+		"y": 37.18280057
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG32",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.198791,
+		"y": 37.18815129
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG33",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1958299,
+		"y": 37.1801849
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG34",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1887488,
+		"y": 37.18856156
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG35",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1947355,
+		"y": 37.17633817
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG36",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1866031,
+		"y": 37.17977459
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG37",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1873326,
+		"y": 37.1755688
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG38",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1796722,
+		"y": 37.17688527
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG39",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1824403,
+		"y": 37.18757008
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG40",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1773977,
+		"y": 37.18500586
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG41",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1714969,
+		"y": 37.18526229
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG42",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2116871,
+		"y": 37.16691711
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG43",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2104855,
+		"y": 37.1634288
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG44",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.207417,
+		"y": 37.16799435
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG45",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.201602,
+		"y": 37.16690001
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG46",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2053785,
+		"y": 37.15397194
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG47",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.2037477,
+		"y": 37.15821314
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG48",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1997781,
+		"y": 37.15963252
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG49",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1993275,
+		"y": 37.15679373
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG50",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.194757,
+		"y": 37.15879457
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG51",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1912808,
+		"y": 37.16060726
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG52",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1859164,
+		"y": 37.15607546
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG53",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1862597,
+		"y": 37.15226171
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG54",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1868176,
+		"y": 37.1622147
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG55",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1817322,
+		"y": 37.16525848
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG56",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1725054,
+		"y": 37.16621604
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG57",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}, {
+	"geometry": {
+		"spatialReference": {
+			"wkid": 4326
+		},
+		"x": 105.1694369,
+		"y": 37.1642838
+	},
+	"symbol": null,
+	"attributes": {
+		"code": "#XG58",
+		"fc_code": "XS",
+		"type": "风场"
+	},
+	"popupTemplate": null
+}]

src/components/arcgis/MHS_FDC.vue

@@ -200,7 +200,8 @@ export default {
       });
     },
     when: function () {
-      let jsonObj = dataService.get("arcgis-nx-fc1");
+      let jsonObj = dataService.get("arcgis-mhs");
+	  console.log(jsonObj)
       this.fans = jsonObj;
       jsonObj.forEach((item) => {
         let obj = this.fjmap.find((t) => {
@@ -254,7 +255,7 @@ export default {
           false
         );
       });
-      let lineJsonObj = dataService.get("arcgis-nx-fc1-line");
+      let lineJsonObj = dataService.get("arcgis-mhs-line");
       this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
     },
     clickMap: function (info) {

src/components/arcgis/NSS_FDC.vue

@@ -144,10 +144,10 @@ export default {
       arcgisData: {
         mode: "2D", // 模式 2D 3D
         title: "宁夏地图", // 标题
-        center: [107.0391975, 37.31469028], // 初始中心点 106.230909, 38.487193
+        center: [106.0231304, 37.76323706], // 初始中心点 106.230909, 38.487193
         height: 654, // 3D地图初始相机高度
         tilt: 65, // 俯视角
-        scale: 30000,
+        scale: 50000,
         rotation: -45,
         ox: -600,
         oy: -50,
@@ -255,7 +255,7 @@ export default {
           false
         );
       });
-      let lineJsonObj = dataService.get("arcgis-nx-fc1-line");
+      let lineJsonObj = dataService.get("arcgis-nss-line");
       this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
     },
     clickMap: function (info) {

src/components/arcgis/QS_FDC.vue

@@ -0,0 +1,445 @@
+<template>
+	<div style="width: 100%; height: 100%">
+		<arcgis class="arcgis-layer" @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap">
+			<template v-for="(fan, index) of fans" :key="index" v-slot:[fan.attributes.code]>
+				<svg v-if="fan.attributes.code != '升压站'" @click="clickFan(fan.attributes.code)"
+					class="can-click esri-component" version="1.1" xmlns="http://www.w3.org/2000/svg"
+					xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 240" enable-background="new 0 0 200 240"
+					xml:space="preserve" width="66" height="66">
+					<!-- 底座 -->
+					<g>
+						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][2]"
+							d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
+                            c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z" />
+					</g>
+					<!-- 后面的脑袋 -->
+					<g>
+						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][0]" d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
+                                c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z" />
+					</g>
+					<!-- 柱 -->
+					<g>
+						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][0]"
+							d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z" />
+					</g>
+					<!-- 风扇 -->
+					<g>
+						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][1]"
+							d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z" />
+						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][1]" d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
+                            M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z" />
+						<animateTransform v-if="fan.attributes.rotate" attributeName="transform" attributeType="XML"
+							type="rotate" from="0 100 82" to="359 100 82" :dur="fan.attributes.dur + 's'"
+							repeatCount="indefinite" />
+					</g>
+					<!-- 前面的尖 -->
+					<g>
+						<path fill-rule="evenodd" clip-rule="evenodd" :fill="colors[fan.attributes.state][2]" d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
+                            c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z" />
+					</g>
+					<!-- 文字 -->
+					<g>
+						<text x="100" y="240" fill="#ffffff" font-size="40" text-anchor="middle"
+							alignment-baseline="baseline">
+							{{ fan.attributes.code }}
+						</text>
+					</g>
+				</svg>
+				<div v-if="fan.attributes.code == '升压站'">
+					<div class="syz-img">
+						<img :src="syzImg" />
+					</div>
+					<div class="white font-sm mr-t-8" style="text-align: center">
+						{{ fan.attributes.code }}
+					</div>
+				</div>
+			</template>
+		</arcgis>
+	</div>
+</template>
+
+<script>
+	import arcgis from "./arcgis.vue";
+	import dataService from "@/helper/data.js";
+
+	export default {
+		// 名称
+		name: "Map",
+		// 使用组件
+		components: {
+			arcgis,
+		},
+		props: {
+			wpId: {
+				type: String,
+				default: "",
+			},
+		},
+		// 数据
+		data() {
+			return {
+				wpnumMap: {}, //风机监视数量
+				wpInfoMap: {}, //风机详情
+				fjmap: [], // 风机名
+				sourceId: "",
+				arcgisData: {
+					mode: "2D", // 模式 2D 3D
+					title: "宁夏地图", // 标题
+					center: [107.217636108398, 37.5134917819943], // 初始中心点 106.230909, 38.487193
+					height: 654, // 3D地图初始相机高度
+					tilt: 65, // 俯视角
+					scale: 55000,
+					rotation: -45,
+					ox: -600,
+					oy: -50,
+				},
+				showPopup: false,
+				mapToolIndex: 0,
+				fans: [],
+				colors: {
+					0: ["#05bb4c", "#4ad476", "#9fedb2"],
+					1: ["#4b55ae", "#959dc7", "#d3d6e0"],
+					2: ["#BA3237", "#d4807d", "#eddad8"],
+					3: ["#606769", "#757575", "#AFAFAF"],
+					4: ["#e17e23", "#fabf78", "#ffebcc"],
+					5: ["#c531c7", "#e080dc", "#fadef7"],
+					6: ["#c531c7", "#e080dc", "#fadef7"],
+				},
+				syzImg: require("@assets/png/booster-station.png"),
+			};
+		},
+		created() {
+			let that = this;
+			that.sourceId = this.wpId;
+			that.$nextTick(() => {
+				that.requestData();
+			});
+		},
+		// 函数
+		methods: {
+			select(res) {
+				this.$router.replace({
+					path: `/monitor/windsite/map/${res.code}`,
+				});
+			},
+			// 风机状态监视
+			requestData() {
+				let that = this;
+				that.API.requestData({
+					method: "POST",
+					subUrl: "monitor/findGeneralAppearance",
+					data: {
+						wpId: that.wpId,
+					},
+					success(res) {
+						if (res.code == 200) {
+							that.wpnumMap = res.data.fczbmap.jczbmap;
+							that.wpInfoMap = res.data.wxssmap;
+							that.fjmap = res.data.fjmap[0];
+						}
+					},
+				});
+			},
+			when: function() {
+				let jsonObj = dataService.get("arcgis-qs");
+				console.log(jsonObj)
+				this.fans = jsonObj;
+				jsonObj.forEach((item) => {
+					let obj = this.fjmap.find((t) => {
+						let wtid = t.wtId.replace("01_", "");
+						if (wtid == item.attributes.code) return t;
+					});
+					if (obj) {
+						item.attributes.state = String(obj.fjzt);
+					} else {
+						item.attributes.state = "4";
+					}
+					console.log(item.attributes.state)
+					switch (item.attributes.state) {
+						case "0": //待机
+							item.attributes.rotate = false; // 转
+							item.attributes.dur = 8; // 转一圈时间
+							break;
+						case "1": //运行
+							item.attributes.rotate = true; // 转
+							item.attributes.dur = 2; // 转一圈时间
+							break;
+						case "2": //故障
+							item.attributes.rotate = false; // 不转
+							item.attributes.dur = 8;
+							break;
+						case "3": //中断
+							item.attributes.rotate = false; // 不转
+							item.attributes.dur = 8;
+							break;
+						case "4": //维护
+							item.attributes.rotate = false; // 不转
+							item.attributes.dur = 8;
+							break;
+						case "5": //限电
+							item.attributes.rotate = true; // 转
+							item.attributes.dur = 6;
+							break;
+						case "6": //停机
+							item.attributes.rotate = false; // 不转
+							item.attributes.dur = 8;
+							break;
+						default:
+							item.attributes.rotate = false;
+							item.attributes.dur = 8;
+							break;
+					}
+					this.$refs.arcgis.addHtmlPoint(
+						[item.geometry.x, item.geometry.y],
+						item.attributes.code,
+						33,
+						50,
+						false
+					);
+				});
+				let lineJsonObj = dataService.get("arcgis-qs-line");
+				this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
+			},
+			clickMap: function(info) {
+				console.log(info);
+			},
+			clickFan: function(code) {
+				let wtId = code.replace("G", "G01_");
+				this.$router.push(`/monitor/windsite/info/${this.wpId}/${wtId}`);
+			},
+			popupBack: function() {
+				this.showPopup = false;
+			},
+			clickMapTool: function(index) {
+				//   this.mapToolIndex = index;
+				this.showPopup = !this.showPopup;
+			},
+		},
+		watch: {
+			wpId(res) {
+				this.sourceId = res;
+				if (res) {
+					this.requestData();
+				}
+			},
+		},
+	};
+</script>
+
+<style lang="less" scoped>
+	@titleHeight: 40px;
+
+	.map-1 {
+		width: 100%;
+		height: calc(100vh - 90px);
+		display: flex;
+		flex-direction: column;
+
+		.btn-group-tabs {
+			display: flex;
+			flex-direction: row;
+		}
+
+		.can-click {
+			cursor: pointer;
+		}
+
+		.syz-img {
+			width: 65px;
+			height: 47px;
+
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.panel-title {
+			width: 100%;
+			background-color: fade(@darkgray, 40%);
+			margin-top: 16px;
+			padding: 6px;
+			display: flex;
+			align-items: center;
+
+			.panel-title-name {
+				color: @green;
+				display: flex;
+				align-items: center;
+				line-height: 0;
+				font-size: 0;
+
+				i,
+				span {
+					margin: 0 0 0 16px;
+					line-height: 0;
+					font-size: 13px;
+				}
+			}
+
+			.sub-title-item {
+				display: flex;
+				align-items: center;
+				margin-left: 16px;
+
+				.sub-title {
+					font-size: 13px;
+					margin-left: 6px;
+				}
+
+				.sub-count {
+					font-size: 13px;
+					font-weight: 500;
+				}
+
+				img {
+					height: 31px;
+				}
+			}
+		}
+
+		.panel-body {
+			flex-grow: 1;
+			background-color: fade(@darkgray, 20%);
+			padding: 8px;
+			overflow: auto;
+			position: relative;
+
+			.arcgis-layer {
+				z-index: 1;
+			}
+
+			.map-popup-panel {
+				width: 760px;
+				position: absolute;
+				left: 71px;
+				top: 22px;
+				z-index: 2;
+
+				.map-popup-panel-header {
+					width: 100%;
+					background: fade(#152221, 90%);
+					display: flex;
+
+					.map-popup-panel-title {
+						padding: 17px 24px;
+						font-size: @fontsize-s;
+						position: relative;
+
+						&::before,
+						&::after {
+							position: absolute;
+							width: calc(50% - 6px);
+							bottom: 0;
+							border-bottom: 2px solid @green;
+						}
+
+						&::before {
+							content: "";
+							left: 0;
+						}
+
+						&::after {
+							content: "";
+							right: 0;
+						}
+
+						span {
+							position: absolute;
+							width: 11.3px;
+							height: 11.3px;
+							border-left: 2px solid @green;
+							border-top: 2px solid @green;
+							left: calc(50% - 5.65px);
+							bottom: -3px;
+							transform: rotate(45deg);
+						}
+					}
+
+					.map-popup-panel-date {
+						flex-grow: 1;
+						padding: 17px 24px;
+						font-size: @fontsize-s;
+						text-align: right;
+						border-bottom: 2px solid @green;
+					}
+
+					.map-popup-panel-back {
+						margin-left: auto;
+						width: 54px;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						position: relative;
+						cursor: pointer;
+
+						&::after {
+							content: "";
+							position: absolute;
+							left: 0;
+							height: 50%;
+							border-left: 1px solid @gray;
+							top: 25%;
+						}
+					}
+				}
+
+				.map-popup-panel-body {
+					background: fade(#152221, 75%);
+					border: 1px solid fade(@darkgray, 40);
+					border-top: 0px;
+
+					.table-form {
+
+						.text,
+						.unit {
+							font-weight: 400;
+						}
+
+						.unit {
+							min-width: auto;
+						}
+
+						.value,
+						.unit {
+							text-align: left;
+						}
+					}
+				}
+			}
+
+			.map-tool {
+				position: absolute;
+				right: 22px;
+				top: 22px;
+				z-index: 2;
+				background: #152221af;
+				padding: 18px 14px;
+
+				.m-btn {
+					width: 124px;
+					height: 44px;
+					background: #152221bf;
+					border: 1px solid #152221bf;
+					color: #ffffff;
+					transition: all 0.3s;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					cursor: pointer;
+
+					&:hover,
+					&.active {
+						background: #05bb4c33;
+						border: 1px solid #05bb4c;
+						color: #05bb4c;
+					}
+
+					+.m-btn {
+						margin-top: 16px;
+					}
+				}
+			}
+		}
+	}
+</style>

src/components/arcgis/SBQ_FDC.vue

@@ -0,0 +1,501 @@
+<template>
+  <div style="width: 100%; height: 100%">
+    <arcgis
+      class="arcgis-layer"
+      @when="when"
+      ref="arcgis"
+      :data="arcgisData"
+      @clickMap="clickMap"
+    >
+      <template
+        v-for="(fan, index) of fans"
+        :key="index"
+        v-slot:[fan.attributes.code]
+      >
+        <svg
+          v-if="fan.attributes.code != '升压站'"
+          @click="clickFan(fan.attributes.code)"
+          class="can-click esri-component"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          viewBox="0 0 200 240"
+          enable-background="new 0 0 200 240"
+          xml:space="preserve"
+          width="66"
+          height="66"
+        >
+          <!-- 底座 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][2]"
+              d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
+                            c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z"
+            />
+          </g>
+          <!-- 后面的脑袋 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][0]"
+              d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
+                                c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z"
+            />
+          </g>
+          <!-- 柱 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][0]"
+              d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z"
+            />
+          </g>
+          <!-- 风扇 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][1]"
+              d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][1]"
+              d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
+                            M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z"
+            />
+            <animateTransform
+              v-if="fan.attributes.rotate"
+              attributeName="transform"
+              attributeType="XML"
+              type="rotate"
+              from="0 100 82"
+              to="359 100 82"
+              :dur="fan.attributes.dur + 's'"
+              repeatCount="indefinite"
+            />
+          </g>
+          <!-- 前面的尖 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][2]"
+              d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
+                            c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z"
+            />
+          </g>
+          <!-- 文字 -->
+          <g>
+            <text
+              x="100"
+              y="240"
+              fill="#ffffff"
+              font-size="40"
+              text-anchor="middle"
+              alignment-baseline="baseline"
+            >
+              {{ fan.attributes.code }}
+            </text>
+          </g>
+        </svg>
+        <div v-if="fan.attributes.code == '升压站'">
+          <div class="syz-img">
+            <img :src="syzImg" />
+          </div>
+          <div class="white font-sm mr-t-8" style="text-align: center">
+            {{ fan.attributes.code }}
+          </div>
+        </div>
+      </template>
+    </arcgis>
+  </div>
+</template>
+
+<script>
+import arcgis from "./arcgis.vue";
+import dataService from "@/helper/data.js";
+
+export default {
+  // 名称
+  name: "Map",
+  // 使用组件
+  components: {
+    arcgis,
+  },
+  props: {
+    wpId: {
+      type: String,
+      default: "",
+    },
+  },
+  // 数据
+  data() {
+    return {
+      wpnumMap: {}, //风机监视数量
+      wpInfoMap: {}, //风机详情
+      fjmap: [], // 风机名
+      sourceId: "",
+      arcgisData: {
+        mode: "2D", // 模式 2D 3D
+        title: "宁夏地图", // 标题
+        center: [106.4515667, 37.60171667], // 初始中心点 106.230909, 38.487193
+        height: 654, // 3D地图初始相机高度
+        tilt: 65, // 俯视角
+        scale: 120000,
+        rotation: -45,
+        ox: -600,
+        oy: -50,
+      },
+      showPopup: false,
+      mapToolIndex: 0,
+      fans: [],
+      colors: {
+        0: ["#05bb4c", "#4ad476", "#9fedb2"],
+        1: ["#4b55ae", "#959dc7", "#d3d6e0"],
+        2: ["#BA3237", "#d4807d", "#eddad8"],
+        3: ["#606769", "#757575", "#AFAFAF"],
+        4: ["#e17e23", "#fabf78", "#ffebcc"],
+        5: ["#c531c7", "#e080dc", "#fadef7"],
+        6: ["#c531c7", "#e080dc", "#fadef7"],
+      },
+      syzImg: require("@assets/png/booster-station.png"),
+    };
+  },
+  created() {
+    let that = this;
+    that.sourceId = this.wpId;
+    that.$nextTick(() => {
+      that.requestData();
+    });
+  },
+  // 函数
+  methods: {
+    select(res) {
+      this.$router.replace({
+        path: `/monitor/windsite/map/${res.code}`,
+      });
+    },
+    // 风机状态监视
+    requestData() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "monitor/findGeneralAppearance",
+        data: {
+          wpId: that.wpId,
+        },
+        success(res) {
+          if (res.code == 200) {
+            that.wpnumMap = res.data.fczbmap.jczbmap;
+            that.wpInfoMap = res.data.wxssmap;
+            that.fjmap = res.data.fjmap[0];
+          }
+        },
+      });
+    },
+    when: function () {
+      let jsonObj = dataService.get("arcgis-sbq");
+      this.fans = jsonObj;
+      jsonObj.forEach((item) => {
+        let obj = this.fjmap.find((t) => {
+          let wtid = t.wtId.replace("01_", "");
+          if (wtid == item.attributes.code) return t;
+        });
+        if (obj) {
+          item.attributes.state = String(obj.fjzt);
+        } else {
+          item.attributes.state = "4";
+        }
+        switch (item.attributes.state) {
+          case "0": //待机
+            item.attributes.rotate = false; // 转
+            item.attributes.dur = 8; // 转一圈时间
+            break;
+          case "1": //运行
+            item.attributes.rotate = true; // 转
+            item.attributes.dur = 2; // 转一圈时间
+            break;
+          case "2": //故障
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          case "3": //中断
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          case "4": //维护
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          case "5": //限电
+            item.attributes.rotate = true; // 转
+            item.attributes.dur = 6;
+            break;
+          case "6": //停机
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          default:
+            item.attributes.rotate = false;
+            item.attributes.dur = 8;
+            break;
+        }
+        this.$refs.arcgis.addHtmlPoint(
+          [item.geometry.x, item.geometry.y],
+          item.attributes.code,
+          33,
+          50,
+          false
+        );
+      });
+      let lineJsonObj = dataService.get("arcgis-sbq-line");
+      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
+    },
+    clickMap: function (info) {
+      console.log(info);
+    },
+    clickFan: function (code) {
+      let wtId = code.replace("G", "G01_");
+      this.$router.push(`/monitor/windsite/info/${this.wpId}/${wtId}`);
+    },
+    popupBack: function () {
+      this.showPopup = false;
+    },
+    clickMapTool: function (index) {
+      //   this.mapToolIndex = index;
+      this.showPopup = !this.showPopup;
+    },
+  },
+  watch: {
+    wpId(res) {
+      this.sourceId = res;
+      if (res) {
+        this.requestData();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@titleHeight: 40px;
+
+.map-1 {
+  width: 100%;
+  height: calc(100vh - 90px);
+  display: flex;
+  flex-direction: column;
+
+  .btn-group-tabs {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .can-click {
+    cursor: pointer;
+  }
+
+  .syz-img {
+    width: 65px;
+    height: 47px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .panel-title {
+    width: 100%;
+    background-color: fade(@darkgray, 40%);
+    margin-top: 16px;
+    padding: 6px;
+    display: flex;
+    align-items: center;
+
+    .panel-title-name {
+      color: @green;
+      display: flex;
+      align-items: center;
+      line-height: 0;
+      font-size: 0;
+
+      i,
+      span {
+        margin: 0 0 0 16px;
+        line-height: 0;
+        font-size: 13px;
+      }
+    }
+
+    .sub-title-item {
+      display: flex;
+      align-items: center;
+      margin-left: 16px;
+
+      .sub-title {
+        font-size: 13px;
+        margin-left: 6px;
+      }
+
+      .sub-count {
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      img {
+        height: 31px;
+      }
+    }
+  }
+
+  .panel-body {
+    flex-grow: 1;
+    background-color: fade(@darkgray, 20%);
+    padding: 8px;
+    overflow: auto;
+    position: relative;
+
+    .arcgis-layer {
+      z-index: 1;
+    }
+
+    .map-popup-panel {
+      width: 760px;
+      position: absolute;
+      left: 71px;
+      top: 22px;
+      z-index: 2;
+
+      .map-popup-panel-header {
+        width: 100%;
+        background: fade(#152221, 90%);
+        display: flex;
+
+        .map-popup-panel-title {
+          padding: 17px 24px;
+          font-size: @fontsize-s;
+          position: relative;
+
+          &::before,
+          &::after {
+            position: absolute;
+            width: calc(50% - 6px);
+            bottom: 0;
+            border-bottom: 2px solid @green;
+          }
+
+          &::before {
+            content: "";
+            left: 0;
+          }
+
+          &::after {
+            content: "";
+            right: 0;
+          }
+
+          span {
+            position: absolute;
+            width: 11.3px;
+            height: 11.3px;
+            border-left: 2px solid @green;
+            border-top: 2px solid @green;
+            left: calc(50% - 5.65px);
+            bottom: -3px;
+            transform: rotate(45deg);
+          }
+        }
+
+        .map-popup-panel-date {
+          flex-grow: 1;
+          padding: 17px 24px;
+          font-size: @fontsize-s;
+          text-align: right;
+          border-bottom: 2px solid @green;
+        }
+
+        .map-popup-panel-back {
+          margin-left: auto;
+          width: 54px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          cursor: pointer;
+
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            height: 50%;
+            border-left: 1px solid @gray;
+            top: 25%;
+          }
+        }
+      }
+
+      .map-popup-panel-body {
+        background: fade(#152221, 75%);
+        border: 1px solid fade(@darkgray, 40);
+        border-top: 0px;
+
+        .table-form {
+          .text,
+          .unit {
+            font-weight: 400;
+          }
+
+          .unit {
+            min-width: auto;
+          }
+
+          .value,
+          .unit {
+            text-align: left;
+          }
+        }
+      }
+    }
+
+    .map-tool {
+      position: absolute;
+      right: 22px;
+      top: 22px;
+      z-index: 2;
+      background: #152221af;
+      padding: 18px 14px;
+
+      .m-btn {
+        width: 124px;
+        height: 44px;
+        background: #152221bf;
+        border: 1px solid #152221bf;
+        color: #ffffff;
+        transition: all 0.3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        &:hover,
+        &.active {
+          background: #05bb4c33;
+          border: 1px solid #05bb4c;
+          color: #05bb4c;
+        }
+
+        + .m-btn {
+          margin-top: 16px;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/arcgis/XS_FDC.vue

@@ -0,0 +1,501 @@
+<template>
+  <div style="width: 100%; height: 100%">
+    <arcgis
+      class="arcgis-layer"
+      @when="when"
+      ref="arcgis"
+      :data="arcgisData"
+      @clickMap="clickMap"
+    >
+      <template
+        v-for="(fan, index) of fans"
+        :key="index"
+        v-slot:[fan.attributes.code]
+      >
+        <svg
+          v-if="fan.attributes.code != '升压站'"
+          @click="clickFan(fan.attributes.code)"
+          class="can-click esri-component"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          viewBox="0 0 200 240"
+          enable-background="new 0 0 200 240"
+          xml:space="preserve"
+          width="66"
+          height="66"
+        >
+          <!-- 底座 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][2]"
+              d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
+                            c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z"
+            />
+          </g>
+          <!-- 后面的脑袋 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][0]"
+              d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
+                                c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z"
+            />
+          </g>
+          <!-- 柱 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][0]"
+              d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z"
+            />
+          </g>
+          <!-- 风扇 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][1]"
+              d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][1]"
+              d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
+                            M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z"
+            />
+            <animateTransform
+              v-if="fan.attributes.rotate"
+              attributeName="transform"
+              attributeType="XML"
+              type="rotate"
+              from="0 100 82"
+              to="359 100 82"
+              :dur="fan.attributes.dur + 's'"
+              repeatCount="indefinite"
+            />
+          </g>
+          <!-- 前面的尖 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][2]"
+              d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
+                            c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z"
+            />
+          </g>
+          <!-- 文字 -->
+          <g>
+            <text
+              x="100"
+              y="240"
+              fill="#ffffff"
+              font-size="40"
+              text-anchor="middle"
+              alignment-baseline="baseline"
+            >
+              {{ fan.attributes.code }}
+            </text>
+          </g>
+        </svg>
+        <div v-if="fan.attributes.code == '升压站'">
+          <div class="syz-img">
+            <img :src="syzImg" />
+          </div>
+          <div class="white font-sm mr-t-8" style="text-align: center">
+            {{ fan.attributes.code }}
+          </div>
+        </div>
+      </template>
+    </arcgis>
+  </div>
+</template>
+
+<script>
+import arcgis from "./arcgis.vue";
+import dataService from "@/helper/data.js";
+
+export default {
+  // 名称
+  name: "Map",
+  // 使用组件
+  components: {
+    arcgis,
+  },
+  props: {
+    wpId: {
+      type: String,
+      default: "",
+    },
+  },
+  // 数据
+  data() {
+    return {
+      wpnumMap: {}, //风机监视数量
+      wpInfoMap: {}, //风机详情
+      fjmap: [], // 风机名
+      sourceId: "",
+      arcgisData: {
+        mode: "2D", // 模式 2D 3D
+        title: "宁夏地图", // 标题
+        center: [105.2139616, 37.15630397], // 初始中心点 106.230909, 38.487193
+        height: 654, // 3D地图初始相机高度
+        tilt: 65, // 俯视角
+        scale: 45000,
+        rotation: -45,
+        ox: -600,
+        oy: -50,
+      },
+      showPopup: false,
+      mapToolIndex: 0,
+      fans: [],
+      colors: {
+        0: ["#05bb4c", "#4ad476", "#9fedb2"],
+        1: ["#4b55ae", "#959dc7", "#d3d6e0"],
+        2: ["#BA3237", "#d4807d", "#eddad8"],
+        3: ["#606769", "#757575", "#AFAFAF"],
+        4: ["#e17e23", "#fabf78", "#ffebcc"],
+        5: ["#c531c7", "#e080dc", "#fadef7"],
+        6: ["#c531c7", "#e080dc", "#fadef7"],
+      },
+      syzImg: require("@assets/png/booster-station.png"),
+    };
+  },
+  created() {
+    let that = this;
+    that.sourceId = this.wpId;
+    that.$nextTick(() => {
+      that.requestData();
+    });
+  },
+  // 函数
+  methods: {
+    select(res) {
+      this.$router.replace({
+        path: `/monitor/windsite/map/${res.code}`,
+      });
+    },
+    // 风机状态监视
+    requestData() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "monitor/findGeneralAppearance",
+        data: {
+          wpId: that.wpId,
+        },
+        success(res) {
+          if (res.code == 200) {
+            that.wpnumMap = res.data.fczbmap.jczbmap;
+            that.wpInfoMap = res.data.wxssmap;
+            that.fjmap = res.data.fjmap[0];
+          }
+        },
+      });
+    },
+    when: function () {
+      let jsonObj = dataService.get("arcgis-xs");
+      this.fans = jsonObj;
+      jsonObj.forEach((item) => {
+        let obj = this.fjmap.find((t) => {
+          let wtid = t.wtId.replace("01_", "");
+          if (wtid == item.attributes.code) return t;
+        });
+        if (obj) {
+          item.attributes.state = String(obj.fjzt);
+        } else {
+          item.attributes.state = "4";
+        }
+        switch (item.attributes.state) {
+          case "0": //待机
+            item.attributes.rotate = false; // 转
+            item.attributes.dur = 8; // 转一圈时间
+            break;
+          case "1": //运行
+            item.attributes.rotate = true; // 转
+            item.attributes.dur = 2; // 转一圈时间
+            break;
+          case "2": //故障
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          case "3": //中断
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          case "4": //维护
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          case "5": //限电
+            item.attributes.rotate = true; // 转
+            item.attributes.dur = 6;
+            break;
+          case "6": //停机
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          default:
+            item.attributes.rotate = false;
+            item.attributes.dur = 8;
+            break;
+        }
+        this.$refs.arcgis.addHtmlPoint(
+          [item.geometry.x, item.geometry.y],
+          item.attributes.code,
+          33,
+          50,
+          false
+        );
+      });
+      let lineJsonObj = dataService.get("arcgis-xs-line");
+      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
+    },
+    clickMap: function (info) {
+      console.log(info);
+    },
+    clickFan: function (code) {
+      let wtId = code.replace("G", "G01_");
+      this.$router.push(`/monitor/windsite/info/${this.wpId}/${wtId}`);
+    },
+    popupBack: function () {
+      this.showPopup = false;
+    },
+    clickMapTool: function (index) {
+      //   this.mapToolIndex = index;
+      this.showPopup = !this.showPopup;
+    },
+  },
+  watch: {
+    wpId(res) {
+      this.sourceId = res;
+      if (res) {
+        this.requestData();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@titleHeight: 40px;
+
+.map-1 {
+  width: 100%;
+  height: calc(100vh - 90px);
+  display: flex;
+  flex-direction: column;
+
+  .btn-group-tabs {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .can-click {
+    cursor: pointer;
+  }
+
+  .syz-img {
+    width: 65px;
+    height: 47px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .panel-title {
+    width: 100%;
+    background-color: fade(@darkgray, 40%);
+    margin-top: 16px;
+    padding: 6px;
+    display: flex;
+    align-items: center;
+
+    .panel-title-name {
+      color: @green;
+      display: flex;
+      align-items: center;
+      line-height: 0;
+      font-size: 0;
+
+      i,
+      span {
+        margin: 0 0 0 16px;
+        line-height: 0;
+        font-size: 13px;
+      }
+    }
+
+    .sub-title-item {
+      display: flex;
+      align-items: center;
+      margin-left: 16px;
+
+      .sub-title {
+        font-size: 13px;
+        margin-left: 6px;
+      }
+
+      .sub-count {
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      img {
+        height: 31px;
+      }
+    }
+  }
+
+  .panel-body {
+    flex-grow: 1;
+    background-color: fade(@darkgray, 20%);
+    padding: 8px;
+    overflow: auto;
+    position: relative;
+
+    .arcgis-layer {
+      z-index: 1;
+    }
+
+    .map-popup-panel {
+      width: 760px;
+      position: absolute;
+      left: 71px;
+      top: 22px;
+      z-index: 2;
+
+      .map-popup-panel-header {
+        width: 100%;
+        background: fade(#152221, 90%);
+        display: flex;
+
+        .map-popup-panel-title {
+          padding: 17px 24px;
+          font-size: @fontsize-s;
+          position: relative;
+
+          &::before,
+          &::after {
+            position: absolute;
+            width: calc(50% - 6px);
+            bottom: 0;
+            border-bottom: 2px solid @green;
+          }
+
+          &::before {
+            content: "";
+            left: 0;
+          }
+
+          &::after {
+            content: "";
+            right: 0;
+          }
+
+          span {
+            position: absolute;
+            width: 11.3px;
+            height: 11.3px;
+            border-left: 2px solid @green;
+            border-top: 2px solid @green;
+            left: calc(50% - 5.65px);
+            bottom: -3px;
+            transform: rotate(45deg);
+          }
+        }
+
+        .map-popup-panel-date {
+          flex-grow: 1;
+          padding: 17px 24px;
+          font-size: @fontsize-s;
+          text-align: right;
+          border-bottom: 2px solid @green;
+        }
+
+        .map-popup-panel-back {
+          margin-left: auto;
+          width: 54px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          cursor: pointer;
+
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            height: 50%;
+            border-left: 1px solid @gray;
+            top: 25%;
+          }
+        }
+      }
+
+      .map-popup-panel-body {
+        background: fade(#152221, 75%);
+        border: 1px solid fade(@darkgray, 40);
+        border-top: 0px;
+
+        .table-form {
+          .text,
+          .unit {
+            font-weight: 400;
+          }
+
+          .unit {
+            min-width: auto;
+          }
+
+          .value,
+          .unit {
+            text-align: left;
+          }
+        }
+      }
+    }
+
+    .map-tool {
+      position: absolute;
+      right: 22px;
+      top: 22px;
+      z-index: 2;
+      background: #152221af;
+      padding: 18px 14px;
+
+      .m-btn {
+        width: 124px;
+        height: 44px;
+        background: #152221bf;
+        border: 1px solid #152221bf;
+        color: #ffffff;
+        transition: all 0.3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        &:hover,
+        &.active {
+          background: #05bb4c33;
+          border: 1px solid #05bb4c;
+          color: #05bb4c;
+        }
+
+        + .m-btn {
+          margin-top: 16px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/WindSite/pages/Map.vue

@@ -10,10 +10,6 @@
     </div>
     <div class="panel-title">
       <div class="panel-title-name">
-        <!-- <span class="svg-icon svg-icon-green svg-icon-sm">
-          <SvgIcon svgid="svg-wind-site"></SvgIcon>
-        </span>
-        <span class="green">某某某风电场</span> -->
         <div class="sub-title-item">
           <img src="../../../assets/map/fan/black.png" />
           <span class="sub-title gray">接入台数</span>
@@ -46,14 +42,19 @@
         </div>
         <div class="sub-title-item">
           <img src="../../../assets/map/fan/black.png" />
-          <span class="sub-title gray">离线台数</span>
+          <span class="sub-title gray">离线台数{{wpId}}</span>
           <span class="sub-count font-num gray">{{ wpnumMap.lxts }}</span>
         </div>
       </div>
     </div>
     <div class="panel-body">
-      <MHSFDC wpId="MHS_FDC" v-if="wpId.indexOf('FDC') !== -1" />
-	  <!-- <NSSFDC wpId="NSS_FDC" v-if="wpId.indexOf('FDC') !== -1" /> -->
+      <MHSFDC wpId="MHS_FDC" v-if="wpId.indexOf('MHS_FDC') !== -1" />
+	  <NSSFDC wpId="NSS_FDC" v-if="wpId.indexOf('NSS_FDC') !== -1" />
+	  <QSFDC wpId="QS_FDC" v-if="wpId.indexOf('QS_FDC') !== -1" />
+	  <SBQFDC wpId="SBQ_FDC" v-if="wpId.indexOf('SBQ_FDC') !== -1" />
+	  <XSFDC wpId="XS_FDC" v-if="wpId.indexOf('XS_FDC') !== -1" />
+	  
+	  
       <PLGDC wpId="PL_GDC" v-if="wpId.indexOf('GDC') !== -1" />
       <div class="map-popup-panel" v-show="showPopup">
         <!-- <div class="map-popup-panel-header">
@@ -165,7 +166,10 @@
 import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
 // import SvgIcon from "@com/coms/icon/svg-icon.vue";
 import MHSFDC from "@com/arcgis/MHS_FDC.vue";
-// import NSSFDC from "@com/arcgis/NSS_FDC.vue";
+import NSSFDC from "@com/arcgis/NSS_FDC.vue";
+import QSFDC from "@com/arcgis/QS_FDC.vue";
+import SBQFDC from "@com/arcgis/SBQ_FDC.vue";
+import XSFDC from "@com/arcgis/XS_FDC.vue";
 import PLGDC from "@com/arcgis/PL_GDC.vue";
 import dataService from "@/helper/data.js";
 
@@ -176,7 +180,10 @@ export default {
   components: {
     BtnGroup2,
     MHSFDC,
-	  // NSSFDC,
+	NSSFDC,
+	QSFDC,
+	SBQFDC,
+	XSFDC,
     PLGDC
   },
   // 数据
@@ -288,7 +295,6 @@ export default {
         success(res) {
           if (res.code == 200) {
             that.wpnumMap = res.data.fczbmap.jczbmap;
-			  console.log(that.wpnumMap)
             that.wpInfoMap = res.data.wxssmap;
             that.fjmap = res.data.fjmap[0];
           }