V1.0.13版本更新

src/assets/dataService/arcgis-nx-fc1-line.json

@@ -6,57 +6,54 @@
             },
             "paths": [
                 [
-                    [
-                        106.478161812,
-                        37.769397497
-                    ],
-                    [
-                        106.47877335499999,
-                        37.76933312400001
-                    ],
-                    [
-                        106.48048996900002,
-                        37.768034935
-                    ],
-                    [
-                        106.48259282100003,
-                        37.76651143999999
-                    ],
-                    [
-                        106.48214221,
-                        37.76623249099998
-                    ],
-                    [
-                        106.48159503900001,
-                        37.766114473000016
-                    ],
-                    [
-                        106.48064017299998,
-                        37.76544928599998
-                    ],
-                    [
-                        106.48048996900002,
-                        37.76524543800002
-                    ],
-                    [
-                        106.480082273,
-                        37.76525616599997
-                    ],
-                    [
-                        106.479460001,
-                        37.76491284399998
-                    ],
-                    [
-                        106.47456765200002,
-                        37.767809629
-                    ]
+                    107.0644069,
+                    37.30000218
+                ],
+                [
+                    107.0609736,
+                    37.29027221
+                ],
+                [
+                    107.0545363,
+                    37.29431798
+                ],
+                [
+                    107.0488715,
+                    37.29385708
+                ],
+                [
+                    107.04561,
+                    37.29752713
+                ],
+                [
+                    107.0409322,
+                    37.30025821
+                ],
+                [
+                    107.0374346,
+                    37.30382554
+                ],
+                [
+                    107.0325208,
+                    37.30630038
+                ],
+                [
+                    107.0349455,
+                    37.30909941
+                ],
+                [
+                    107.0286155,
+                    37.30956022
+                ],
+                [
+                    107.0238519,
+                    37.31106208
                 ]
             ]
         },
         "symbol": null,
         "attributes": {
-            "objectid": 1,
-            "fc_code": "fc01",
+            "fc_code": "MHS",
             "width": 3
         },
         "popupTemplate": null
@@ -68,103 +65,54 @@
             },
             "paths": [
                 [
-                    [
-                        106.47422432899998,
-                        37.76701569599999
-                    ],
-                    [
-                        106.47382736200001,
-                        37.76769161200002
-                    ],
-                    [
-                        106.47189617200002,
-                        37.76813149499998
-                    ],
-                    [
-                        106.47135973000002,
-                        37.768346070999996
-                    ],
-                    [
-                        106.47315144499998,
-                        37.764998674000026
-                    ],
-                    [
-                        106.47131681399998,
-                        37.763625382999976
-                    ],
-                    [
-                        106.469578743,
-                        37.763464451000004
-                    ],
-                    [
-                        106.46923542000002,
-                        37.764022350000005
-                    ],
-                    [
-                        106.46859168999998,
-                        37.76418328300002
-                    ],
-                    [
-                        106.46682143200002,
-                        37.765395641
-                    ],
-                    [
-                        106.464782953,
-                        37.76680111899998
-                    ],
-                    [
-                        106.46432161299998,
-                        37.76714444200002
-                    ],
-                    [
-                        106.46397829099999,
-                        37.76769161200002
-                    ],
-                    [
-                        106.463989019,
-                        37.76770234100002
-                    ]
-                ]
-            ]
-        },
-        "symbol": null,
-        "attributes": {
-            "objectid": 401,
-            "fc_code": "fc01",
-            "width": 5
-        },
-        "popupTemplate": null
-    },
-    {
-        "geometry": {
-            "spatialReference": {
-                "wkid": 4326
-            },
-            "paths": [
+                    107.0649004,
+                    37.30542993
+                ],
+                [
+                    107.0527768,
+                    37.30129941
+                ],
+                [
+                    107.048614,
+                    37.30432051
+                ],
                 [
-                    [
-                        106.47456765200002,
-                        37.767809629
-                    ],
-                    [
-                        106.47378444700001,
-                        37.76765942600002
-                    ],
-                    [
-                        106.47127389899998,
-                        37.768507004000014
-                    ],
-                    [
-                        106.46947145500002,
-                        37.76905417400002
-                    ]
+                    107.0456958,
+                    37.30819486
+                ],
+                [
+                    107.0414472,
+                    37.31130101
+                ],
+                [
+                    107.0348811,
+                    37.31508967
+                ],
+                [
+                    107.0305467,
+                    37.31749588
+                ],
+                [
+                    107.0199444,
+                    37.31830556
+                ],
+                [
+                    107.0611238,
+                    37.30860447
+                ],
+                [
+                    107.0571327,
+                    37.31169354
+                ],
+                [
+                    107.0521975,
+                    37.31369028
                 ]
             ]
         },
         "symbol": null,
         "attributes": {
-            "objectid": 2,
-            "fc_code": "fc01",
+            "fc_code": "MHS",
             "width": 3
         },
         "popupTemplate": null
@@ -176,21 +124,54 @@
             },
             "paths": [
                 [
-                    [
-                        106.469321251,
-                        37.76809930799999
-                    ],
-                    [
-                        106.47069454199999,
-                        37.76863574999999
-                    ]
+                    107.0693851,
+                    37.30322815
+                ],
+                [
+                    107.0744705,
+                    37.30041183
+                ],
+                [
+                    107.0696425,
+                    37.29628104
+                ],
+                [
+                    107.0717883,
+                    37.29213295
+                ],
+                [
+                    107.0662093,
+                    37.28824071
+                ],
+                [
+                    107.0567894,
+                    37.31587468
+                ],
+                [
+                    107.0560169,
+                    37.31988494
+                ],
+                [
+                    107.0506954,
+                    37.32184734
+                ],
+                [
+                    107.0727539,
+                    37.31087435
+                ],
+                [
+                    107.0761871,
+                    37.3067612
+                ],
+                [
+                    107.0820665,
+                    37.30641985
                 ]
             ]
         },
         "symbol": null,
         "attributes": {
-            "objectid": 3,
-            "fc_code": "fc01",
+            "fc_code": "MHS",
             "width": 3
         },
         "popupTemplate": null
@@ -202,53 +183,50 @@
             },
             "paths": [
                 [
-                    [
-                        106.46255135500002,
-                        37.76048183400002
-                    ],
-                    [
-                        106.46808743499997,
-                        37.76037454599998
-                    ],
-                    [
-                        106.46884918199999,
-                        37.760299444
-                    ],
-                    [
-                        106.46916031799998,
-                        37.76011705399998
-                    ],
-                    [
-                        106.47113442400001,
-                        37.760331630999985
-                    ],
-                    [
-                        106.471198797,
-                        37.760556936
-                    ],
-                    [
-                        106.470930576,
-                        37.761157750999985
-                    ],
-                    [
-                        106.47076964399997,
-                        37.76178002400002
-                    ],
-                    [
-                        106.47024393100003,
-                        37.76248812699998
-                    ],
-                    [
-                        106.469589472,
-                        37.76345372200001
-                    ]
+                    107.0360184,
+                    37.32406563
+                ],
+                [
+                    107.0318985,
+                    37.32969639
+                ],
+                [
+                    107.0269525,
+                    37.33528407
+                ],
+                [
+                    107.0515966,
+                    37.32539657
+                ],
+                [
+                    107.0396662,
+                    37.33669159
+                ],
+                [
+                    107.0315766,
+                    37.34420644
+                ],
+                [
+                    107.0183909,
+                    37.34223611
+                ],
+                [
+                    107.0164329,
+                    37.33144098
+                ],
+                [
+                    107.0044997,
+                    37.32873236
+                ],
+                [
+                    107.0019168,
+                    37.33337322
                 ]
             ]
         },
         "symbol": null,
         "attributes": {
-            "objectid": 4,
-            "fc_code": "fc01",
+            "fc_code": "MHS",
             "width": 3
         },
         "popupTemplate": null

src/assets/dataService/arcgis-nx-fc1.json

@@ -4,8 +4,8 @@
             "spatialReference": {
                 "wkid": 4326
             },
-            "x": 106.47947073,
-            "y": 37.76491284399998
+            "x": 107.0674069,
+            "y": 37.3040218
         },
         "symbol": null,
         "attributes": {
@@ -21,14 +21,13 @@
             "spatialReference": {
                 "wkid": 4326
             },
-            "x": 106.478161812,
-            "y": 37.769397497
+            "x": 107.0644069,
+            "y": 37.30000218
         },
         "symbol": null,
         "attributes": {
-            "objectid": 2,
-            "fc_code": "fc01",
-            "code": "A01",
+            "fc_code": "MHS",
+            "code": "MG01",
             "type": "风场"
         },
         "popupTemplate": null
@@ -38,14 +37,13 @@
             "spatialReference": {
                 "wkid": 4326
             },
-            "x": 106.47457838100001,
-            "y": 37.76784181599999
+            "x": 107.0609736,
+            "y": 37.29027221
         },
         "symbol": null,
         "attributes": {
-            "objectid": 401,
-            "fc_code": "fc01",
-            "code": "A02",
+            "fc_code": "MHS",
+            "code": "MG02",
             "type": "风场"
         },
         "popupTemplate": null
@@ -55,14 +53,13 @@
             "spatialReference": {
                 "wkid": 4326
             },
-            "x": 106.47423505799998,
-            "y": 37.767080068999974
+            "x": 107.0545363,
+            "y": 37.29431798
         },
         "symbol": null,
         "attributes": {
-            "objectid": 402,
-            "fc_code": "fc01",
-            "code": "A03",
+            "fc_code": "MHS",
+            "code": "MG03",
             "type": "风场"
         },
         "popupTemplate": null
@@ -72,14 +69,13 @@
             "spatialReference": {
                 "wkid": 4326
             },
-            "x": 106.47315144499998,
-            "y": 37.765030861000014
+            "x": 107.0488715,
+            "y": 37.29385708
         },
         "symbol": null,
         "attributes": {
-            "objectid": 403,
-            "fc_code": "fc01",
-            "code": "A04",
+            "fc_code": "MHS",
+            "code": "MG04",
             "type": "风场"
         },
         "popupTemplate": null
@@ -89,14 +85,13 @@
             "spatialReference": {
                 "wkid": 4326
             },
-            "x": 106.46861314799997,
-            "y": 37.76419401200002
+            "x": 107.04561,
+            "y": 37.29752713
         },
         "symbol": null,
         "attributes": {
-            "objectid": 404,
-            "fc_code": "fc01",
-            "code": "A05",
+            "fc_code": "MHS",
+            "code": "MG05",
             "type": "风场"
         },
         "popupTemplate": null
@@ -106,14 +101,13 @@
             "spatialReference": {
                 "wkid": 4326
             },
-            "x": 106.46949291200002,
-            "y": 37.76907563200001
+            "x": 107.0409322,
+            "y": 37.30025821
         },
         "symbol": null,
         "attributes": {
-            "objectid": 405,
-            "fc_code": "fc01",
-            "code": "A06",
+            "fc_code": "MHS",
+            "code": "MG06",
             "type": "风场"
         },
         "popupTemplate": null
@@ -123,14 +117,13 @@
             "spatialReference": {
                 "wkid": 4326
             },
-            "x": 106.469321251,
-            "y": 37.76813149499998
+            "x": 107.0374346,
+            "y": 37.30382554
         },
         "symbol": null,
         "attributes": {
-            "objectid": 406,
-            "fc_code": "fc01",
-            "code": "A07",
+            "fc_code": "MHS",
+            "code": "MG07",
             "type": "风场"
         },
         "popupTemplate": null
@@ -140,14 +133,13 @@
             "spatialReference": {
                 "wkid": 4326
             },
-            "x": 106.47117734,
-            "y": 37.76058912299999
+            "x": 107.0325208,
+            "y": 37.30630038
         },
         "symbol": null,
         "attributes": {
-            "objectid": 407,
-            "fc_code": "fc01",
-            "code": "A08",
+            "fc_code": "MHS",
+            "code": "MG08",
             "type": "风场"
         },
         "popupTemplate": null
@@ -157,14 +149,13 @@
             "spatialReference": {
                 "wkid": 4326
             },
-            "x": 106.463967562,
-            "y": 37.76771307000001
+            "x": 107.0349455,
+            "y": 37.30909941
         },
         "symbol": null,
         "attributes": {
-            "objectid": 408,
-            "fc_code": "fc01",
-            "code": "A09",
+            "fc_code": "MHS",
+            "code": "MG09",
             "type": "风场"
         },
         "popupTemplate": null
@@ -174,14 +165,541 @@
             "spatialReference": {
                 "wkid": 4326
             },
-            "x": 106.46254062700001,
-            "y": 37.760556936
+            "x": 107.0286155,
+            "y": 37.30956022
         },
         "symbol": null,
         "attributes": {
-            "objectid": 409,
-            "fc_code": "fc01",
-            "code": "A10",
+            "fc_code": "MHS",
+            "code": "MG10",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0238519,
+            "y": 37.31106208
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG11",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0649004,
+            "y": 37.30542993
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG12",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0527768,
+            "y": 37.30129941
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG13",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.048614,
+            "y": 37.30432051
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG14",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0456958,
+            "y": 37.30819486
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG15",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0414472,
+            "y": 37.31130101
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG16",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0348811,
+            "y": 37.31508967
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG17",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0305467,
+            "y": 37.31749588
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG18",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0199444,
+            "y": 37.31830556
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG19",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0611238,
+            "y": 37.30860447
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG20",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0571327,
+            "y": 37.31169354
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG21",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0521975,
+            "y": 37.31369028
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG22",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0693851,
+            "y": 37.30322815
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG23",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0744705,
+            "y": 37.30041183
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG24",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0696425,
+            "y": 37.29628104
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG25",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0717883,
+            "y": 37.29213295
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG26",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0662093,
+            "y": 37.28824071
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG27",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0567894,
+            "y": 37.31587468
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG28",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0560169,
+            "y": 37.31988494
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG29",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0506954,
+            "y": 37.32184734
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG30",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0727539,
+            "y": 37.31087435
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG31",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0761871,
+            "y": 37.3067612
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG32",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0820665,
+            "y": 37.30641985
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG33",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0360184,
+            "y": 37.32406563
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG34",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0318985,
+            "y": 37.32969639
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG35",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0269525,
+            "y": 37.33528407
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG36",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0515966,
+            "y": 37.32539657
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG37",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0396662,
+            "y": 37.33669159
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG38",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0315766,
+            "y": 37.34420644
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG39",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0183909,
+            "y": 37.34223611
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG40",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0164329,
+            "y": 37.33144098
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG41",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0044997,
+            "y": 37.32873236
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG42",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 107.0019168,
+            "y": 37.33337322
+        },
+        "symbol": null,
+        "attributes": {
+            "fc_code": "MHS",
+            "code": "MG43",
             "type": "风场"
         },
         "popupTemplate": null

src/assets/styles/el-override/el-card.less

@@ -0,0 +1,13 @@
+.main-body {
+  .el-card {
+    background: transparent;
+    border-color: fade(@gray, 50);
+    border-radius: 0;
+
+    .el-card__header {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      border: none;
+    }
+  }
+}

src/assets/styles/el-override/el-input.less

@@ -0,0 +1,257 @@
+@picker-bg-color: fade(#121d1c, 95);
+
+.main-body {
+  .el-input__inner {
+    background: fade(@gray, 20);
+    color: @gray-l;
+  }
+
+  .el-input {
+    &.is-disabled .el-input__inner {
+      background-color: fade(@gray-l, 20);
+      border-color: @gray;
+      color: @gray;
+      cursor: not-allowed;
+    }
+  }
+
+  // 数字组件
+  .el-input-number {
+    &.is-controls-right {
+      .el-input-number__increase {
+        border-bottom: 1px solid @gray;
+      }
+
+      .el-input-number__decrease,
+      .el-input-number__increase {
+        line-height: 15px;
+        color: @gray-l;
+        background: fade(@gray, 40);
+        border-left: 1px solid @gray;
+      }
+    }
+  }
+
+  // 日期组件
+  .el-date-editor {
+    &.is-active,
+    &.is-active:hover,
+    &.is-focus .el-input__inner {
+      border-color: @green;
+    }
+
+    // el datetimerange Start
+    &.el-date-editor--datetimerange {
+      border: 1px solid fade(@gray, 20);
+      height: 33px;
+      padding: 0 8px;
+      width: 369px;
+
+      .el-range-separator {
+        color: @gray-l;
+        line-height: 33px;
+      }
+
+      .el-range-input {
+        flex-basis: 145px;
+        line-height: 33px;
+        background: transparent;
+        color: @gray-l;
+        &::placeholder {
+          text-align: center;
+          color: @gray-l;
+        }
+      }
+    }
+    // el datetimerange End
+  }
+
+  // 单选框
+  .el-radio {
+    color: @gray-l;
+
+    &.is-checked {
+      .el-radio__inner {
+        background: @green;
+        border-color: @green;
+      }
+
+      .el-radio__label {
+        color: @green;
+      }
+    }
+
+    &.is-bordered.is-checked {
+      border-color: @green;
+    }
+
+    &:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
+      box-shadow: 0 0 2px 2px @green;
+    }
+  }
+
+  // 单选框组
+  .el-radio-group {
+    height: 33px;
+    & > .el-radio {
+      line-height: 33px;
+    }
+  }
+
+  // 树组件
+  .el-tree {
+    color: @gray-l;
+    background: fade(@gray, 20);
+
+    .el-checkbox__inner {
+      background: transparent;
+      border-color: @gray;
+    }
+
+    .el-checkbox__input.is-disabled .el-checkbox__inner {
+      background: @gray;
+      border-color: @gray;
+    }
+
+    &.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+      background: transparent;
+      color: @green;
+    }
+
+    .el-tree-node__content:hover,
+    .el-upload-list__item:hover {
+      background: transparent;
+      color: @green;
+    }
+
+    .el-checkbox__inner:hover {
+      border-color: @green;
+    }
+
+    .el-checkbox__input.is-focus .el-checkbox__inner {
+      border-color: @green;
+    }
+
+    .el-checkbox__input.is-checked .el-checkbox__inner,
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+      background: @green;
+      border-color: @green;
+    }
+  }
+}
+
+.el-picker__popper.el-popper[role="tooltip"] {
+  border-color: @picker-bg-color !important;
+  background: @picker-bg-color !important;
+}
+
+.el-picker-panel {
+  // el datetimerange  picker Start
+  &.el-date-range-picker {
+    color: @gray-l;
+    background: transparent;
+
+    .el-date-range-picker__time-header {
+      border-color: @gray;
+
+      .el-icon-arrow-right {
+        color: @gray-l;
+      }
+
+      .el-input__inner {
+        background: fade(@gray, 20);
+        color: @gray-l;
+        border-color: @gray;
+      }
+
+      .el-date-range-picker__time-picker-wrap {
+        .el-time-panel {
+          background-color: @picker-bg-color;
+
+          .el-time-spinner__item.active:not(.disabled) {
+            color: @green;
+          }
+          .el-time-spinner__item:hover:not(.disabled):not(.active) {
+            background: transparent;
+            color: @green;
+          }
+        }
+
+        .el-time-panel__btn.confirm {
+          color: @green;
+        }
+
+        .el-time-panel__btn.cancel {
+          color: @gray;
+        }
+      }
+    }
+
+    .el-date-range-picker__content {
+      border-color: @gray;
+
+      .el-date-table {
+        th {
+          color: @gray-l;
+        }
+
+        td {
+          &.available:hover {
+            color: @green;
+          }
+
+          &.in-range div,
+          &.in-range div:hover {
+            background: fade(@gray, 40);
+          }
+
+          &.end-date span,
+          &.start-date span {
+            background: @green;
+          }
+
+          &.today {
+            span {
+              color: @green;
+            }
+
+            &.end-date span,
+            &.start-date span {
+              color: @white;
+            }
+          }
+
+          &.next-month,
+          &.prev-month {
+            color: @gray;
+          }
+        }
+      }
+    }
+  }
+  // el datetimerange  picker End
+
+  .el-picker-panel__body {
+    border-color: @gray;
+  }
+
+  .el-picker-panel__footer {
+    background: transparent;
+    border-color: @gray;
+
+    .el-button--text {
+      color: @gray;
+    }
+
+    .el-button.is-plain {
+      background: transparent;
+      border-color: @green;
+      color: @green;
+    }
+  }
+}
+
+.el-popper__arrow::before {
+  background: fade(#121d1c, 95) !important;
+  border: 1px solid fade(#121d1c, 95) !important;
+}

src/assets/styles/el-override/el-pagination.less

@@ -0,0 +1,36 @@
+// el-pagination
+.main-body {
+  .el-pagination {
+    color: @gray;
+    .el-pagination__total {
+      color: @gray;
+    }
+
+    button {
+      &.btn-next,
+      &.btn-prev {
+        background: center center no-repeat fade(@gray, 20);
+        color: @gray-l;
+      }
+      &:disabled {
+        color: @gray-l;
+        background-color: fade(@gray, 20);
+        cursor: not-allowed;
+      }
+    }
+
+    .el-pager li {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      &.active {
+        color: @green;
+      }
+    }
+
+    .el-input__inner {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      border: 1px solid fade(@gray, 20);
+    }
+  }
+}

src/assets/styles/el-override/el-table.less

@@ -0,0 +1,104 @@
+// el-table
+.main-body {
+  .el-table {
+    background: transparent;
+    border: 0px;
+
+    &.el-table--border::after,
+    &.el-table--group::after,
+    &::before {
+      background-color: transparent;
+    }
+
+    tr {
+      &:hover {
+        td {
+          color: @green;
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    td {
+      border: 0px;
+      padding: 0;
+      height: 27px;
+      line-height: 27px;
+      font-size: 12px;
+    }
+
+    th {
+      border: 0px;
+      padding: 0px;
+      height: 30px;
+      line-height: 30px;
+      font-weight: normal;
+      text-align: center;
+      color: @gray-l;
+
+      &.is-leaf {
+        border: 0px;
+      }
+    }
+
+    th,
+    tr {
+      background-color: transparent;
+      border: 0px;
+    }
+
+    thead {
+      color: @gray-l;
+      font-weight: 500;
+      font-size: @fontsize-s;
+      border: 0px;
+
+      th,
+      &.is-group th {
+        & > .cell {
+        }
+
+        background-color: fade(@gray, 20);
+      }
+    }
+
+    .el-table__body {
+      border: 0px;
+    }
+
+    &.el-table--striped .el-table__body tr.el-table__row--striped {
+      &:hover td {
+        background-color: fade(@gray, 20) !important;
+      }
+
+      td {
+        background-color: fade(@gray, 20);
+      }
+    }
+
+    &.el-table--border,
+    &.el-table--group {
+      border: none;
+    }
+
+    .ascending .sort-caret.ascending {
+      border-bottom-color: @green;
+    }
+
+    .descending .sort-caret.descending {
+      border-top-color: @green;
+    }
+  }
+
+  .el-table__expanded-cell {
+    background: transparent;
+  }
+
+  .el-table__body tr.hover-row.current-row > td,
+  .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
+  .el-table__body tr.hover-row.el-table__row--striped > td,
+  .el-table__body tr.hover-row > td {
+    background: transparent;
+    color: @green;
+  }
+}

src/assets/styles/el-override/index.less

@@ -0,0 +1,5 @@
+@import "./el-card.less";
+@import "./el-pagination.less";
+@import "./el-pagination.less";
+@import "./el-input.less";
+@import "./el-table.less";

src/assets/styles/form.less

@@ -1,83 +1,104 @@
 // 查询 样式
-.query {
-  display: flex;
-  justify-content: space-between;
-
-  &.left {
-    justify-content: flex-start;
-  }
-
-  .query-items {
-    flex: 0 0 auto;
+.main-body {
+  .query {
     display: flex;
+    justify-content: space-between;
+
+    &.left {
+      justify-content: flex-start;
+    }
 
-    .query-item {
+    .query-items {
       flex: 0 0 auto;
       display: flex;
-      margin: 0 1.4815vh;
 
-      .el-input {
-        &.placeholder-left {
-          input {
-            &::placeholder {
-              text-align: left;
+      .query-item {
+        flex: 0 0 auto;
+        display: flex;
+        margin: 0 1.4815vh;
+
+        .el-input {
+          &.placeholder-left {
+            input {
+              &::placeholder {
+                text-align: left;
+              }
             }
           }
         }
-      }
-      .placeholder-left {
-        .el-input {
-          input {
-            height: 33px !important;
-            &::placeholder {
-              text-align: left;
+        .placeholder-left {
+          .el-input {
+            input {
+              height: 33px !important;
+              &::placeholder {
+                text-align: left;
+              }
             }
           }
         }
-      }
-
-      .lable {
-        flex: 0 0 auto;
-        margin-right: 1.4815vh;
-        line-height: 33px;
-        color: @gray-l;
-      }
-
-      .search-input {
-        position: relative;
 
-        input {
-          box-sizing: border-box;
-          flex: 0 0 200px;
-          border: 0px solid @darkgray;
-          color: @white;
-          outline: unset;
-          border-radius: 0%;
-          padding-right: 40px;
-          background: fade(#536268, 20);
-          height: 33px;
+        .lable {
+          flex: 0 0 auto;
+          margin-right: 1.4815vh;
           line-height: 33px;
-
-          &::placeholder {
-            font-size: 12px;
-            text-align: right;
-            color: @darkgray;
-          }
+          color: @gray-l;
         }
 
-        .unit {
-          position: absolute;
-          right: 12px;
-          top: 6px;
-          line-height: 33px;
-          margin: auto;
+        .search-input {
+          position: relative;
+
+          // input {
+          //   box-sizing: border-box;
+          //   flex: 0 0 200px;
+          //   border: 0px solid @darkgray;
+          //   color: @white;
+          //   outline: unset;
+          //   border-radius: 0%;
+          //   padding-right: 40px;
+          //   background: fade(#536268, 20);
+          //   height: 33px;
+          //   line-height: 33px;
+
+          //   &::placeholder {
+          //     font-size: 12px;
+          //     text-align: right;
+          //     color: @darkgray;
+          //   }
+          // }
+
+          // .unit {
+          //   position: absolute;
+          //   right: 12px;
+          //   top: 6px;
+          //   line-height: 33px;
+          //   margin: auto;
+          // }
         }
       }
     }
+
+    .query-actions {
+      flex: 0 0 auto;
+    }
   }
 
-  .query-actions {
-    flex: 0 0 auto;
+  input {
+    box-sizing: border-box;
+    flex: 0 0 200px;
+    border: 0px solid @darkgray;
+    color: @white;
+    outline: unset;
+    border-radius: 0%;
+    padding-right: 40px;
+    background: fade(#536268, 20);
+    height: 33px;
+    line-height: 33px;
+
+    &::placeholder {
+      font-size: 12px;
+      text-align: right;
+      color: @darkgray;
+    }
   }
 }
 
@@ -223,7 +244,6 @@ input[type="checkbox"] {
 }
 
 .date-select {
-
   .el-input {
     .el-input__inner {
       background: fade(#536268, 20);
@@ -256,7 +276,6 @@ input[type="checkbox"] {
         }
 
         td {
-
           &.next-month,
           &.prev-month {
             color: @gray;
@@ -396,7 +415,6 @@ input[type="checkbox"] {
           }
         }
       }
-
     }
   }
 }
@@ -423,9 +441,8 @@ input[type="checkbox"] {
 
 .el-checkbox-group {
   .el-checkbox {
-
     &.is-checked {
-      .el-checkbox__input  {
+      .el-checkbox__input {
         &.is-checked {
           .el-checkbox__inner {
             background-color: @green;
@@ -433,13 +450,13 @@ input[type="checkbox"] {
           }
         }
       }
-    
+
       .el-checkbox__label {
         color: @green;
       }
     }
 
-    .el-checkbox__input  {
+    .el-checkbox__input {
       .el-checkbox__inner {
         background-color: transparent;
         border-color: #606769;
@@ -451,4 +468,3 @@ input[type="checkbox"] {
     }
   }
 }
-

src/assets/styles/main.less

@@ -15,3 +15,6 @@
 @import "./dialog.less";
 
 @import "./table.less";
+
+// el 样式 重写
+@import "./el-override/index.less";

src/assets/styles/table.less

@@ -65,145 +65,3 @@
     }
   }
 }
-
-// el-table
-.main-body {
-  .el-table {
-    background: transparent;
-    border: 0px;
-
-    &.el-table--border::after,
-    &.el-table--group::after,
-    &::before {
-      background-color: transparent;
-    }
-
-    tr {
-      &:hover {
-        td {
-          color: @green;
-          background-color: transparent !important;
-        }
-      }
-    }
-
-    td {
-      border: 0px;
-      padding: 0;
-      height: 27px;
-      line-height: 27px;
-      font-size: 12px;
-    }
-
-    th {
-      border: 0px;
-      padding: 0px;
-      height: 30px;
-      line-height: 30px;
-      font-weight: normal;
-      text-align: center;
-      color: @gray-l;
-
-      &.is-leaf {
-        border: 0px;
-      }
-    }
-
-    th,
-    tr {
-      background-color: transparent;
-      border: 0px;
-    }
-
-    thead {
-      color: @gray-l;
-      font-weight: 500;
-      font-size: @fontsize-s;
-      border: 0px;
-
-      th,
-      &.is-group th {
-        & > .cell {
-        }
-
-        background-color: fade(@gray, 20);
-      }
-    }
-
-    .el-table__body {
-      border: 0px;
-    }
-
-    &.el-table--striped .el-table__body tr.el-table__row--striped {
-      &:hover td {
-        background-color: fade(@gray, 20) !important;
-      }
-
-      td {
-        background-color: fade(@gray, 20);
-      }
-    }
-
-    &.el-table--border,
-    &.el-table--group {
-      border: none;
-    }
-
-    .ascending .sort-caret.ascending {
-      border-bottom-color: @green;
-    }
-
-    .descending .sort-caret.descending {
-      border-top-color: @green;
-    }
-  }
-
-  .el-table__expanded-cell {
-    background: transparent;
-  }
-
-  .el-table__body tr.hover-row.current-row > td,
-  .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
-  .el-table__body tr.hover-row.el-table__row--striped > td,
-  .el-table__body tr.hover-row > td {
-    background: transparent;
-    color: @green;
-  }
-}
-
-// el-pagination
-.main-body {
-  .el-pagination {
-    color: @gray;
-    .el-pagination__total {
-      color: @gray;
-    }
-
-    button {
-      &.btn-next,
-      &.btn-prev {
-        background: center center no-repeat fade(@gray, 20);
-        color: @gray-l;
-      }
-      &:disabled {
-        color: @gray-l;
-        background-color: fade(@gray, 20);
-        cursor: not-allowed;
-      }
-    }
-
-    .el-pager li {
-      color: @gray-l;
-      background: fade(@gray, 20);
-      &.active {
-        color: @green;
-      }
-    }
-
-    .el-input__inner {
-      color: @gray-l;
-      background: fade(@gray, 20);
-      border: 1px solid fade(@gray, 20);
-    }
-  }
-}

src/components/arcgis/arcgis.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="arcgis">
+    <div class="arcgis" :class="{'pointer': pointer}">
         <div id="viewDiv"></div>
         <div id="marker">
             <div v-for="(marker, index) of markers" :key="index" v-show="marker.show" 
@@ -55,6 +55,9 @@
                         height: 654, // 3D地图初始相机高度
                         tilt: 65, // 俯视角
                         scale: 128000, // 缩放
+                        rotation: 0, // 正北顺时针旋转角度
+                        ox: 0, // 标记整体偏移
+                        oy: 0, // 标记整体偏移
                     }
                 },
             }
@@ -105,10 +108,25 @@
                 ],
                 syzImg: require("@assets/temp.png"),
                 markers: [],
+                pointer: false,
             }
         },
         // 函数
         methods: {
+            // 世界转屏幕
+            worldToScreen: function (point) {
+                // var world = new Point(point.x, point.y, SpatialReference.WGS84);
+                // var screenPoint = map.toScreen(point);
+            },
+            // 屏幕转世界
+            screenToWorld: function (point) {},
+            // 偏移转经纬度
+            oToLL: function (x, y) {
+                return {
+                    x: 0.00000899 * x,
+                    y: 0.00001141 * y
+                }
+            },
             // 初始化地图
             initMap: function() {
                 basemap = new Basemap({
@@ -144,10 +162,11 @@
                     });
                 } else {
                     view = new MapView({
-                        // 3D显示图层
+                        // 2D显示图层
                         map: map,
                         center: this.data.center,
                         container: this.$el.querySelector("#viewDiv"),
+                        rotation: this.data.rotation,
                     });
                 }
                 view.scale = this.data.scale;
@@ -180,7 +199,7 @@
                 map.add(text_graphicsLayer);
                 map.add(img_graphicsLayer);
                 map.add(html_graphicsLayer);
-                view.on("click", (event) => {
+                view.on("click", (event) => { // 监听鼠标点击 判断是否可以点击
                     view.hitTest(event).then((response) => {
                         let result = null;
                         if (response.results.length) {
@@ -196,6 +215,24 @@
                         }
                     })
                 });
+                view.on("pointer-move", (event) => { // 监听鼠标移动 判断是否把鼠标变成小手
+                    view.hitTest(event).then((response) => {
+                        let result = null;
+                        if (response.results.length) {
+                            const canClick = ["picture-marker", "text"];
+                            response.results.forEach(item => {
+                                if (canClick.indexOf(item.graphic.symbol.type) >= 0) {
+                                    result = item.graphic.attributes;
+                                }
+                            })
+                        }
+                        if (result) {
+                            this.pointer= true;
+                        } else {
+                            this.pointer= false;
+                        }
+                    })
+                })
                 view.watch("extent", (evt) => {
                     this.markers.forEach((marker, index) => {
                         let graphics = html_graphics[index];
@@ -318,6 +355,8 @@
                 let item = JSON.parse(JSON.stringify(jsonItem));
                 item.geometry.type = "point";
                 item.geometry.spatialReference = SpatialReference.WGS84;
+                item.geometry.x += this.oToLL(this.data.ox, this.data.oy).x;
+                item.geometry.y += this.oToLL(this.data.ox, this.data.oy).y;
                 item.symbol = {
                     type: "picture-marker",
                     url: item.attributes.type == "升压站" ? this.syzImg : this.getFanImg(item.attributes.state),
@@ -336,6 +375,8 @@
                 let item = JSON.parse(JSON.stringify(jsonItem));
                 item.geometry.type = "point";
                 item.geometry.spatialReference = SpatialReference.WGS84;
+                item.geometry.x += this.oToLL(this.data.ox, this.data.oy).x;
+                item.geometry.y += this.oToLL(this.data.ox, this.data.oy).y;
                 item.symbol = {
                     type: "text",
                     color: "white",
@@ -359,10 +400,14 @@
                 let item = JSON.parse(JSON.stringify(jsonItem));
                 item.geometry.type = "polyline";
                 item.geometry.spatialReference = SpatialReference.WGS84;
+                item.geometry.paths.forEach(item => {
+                    item[0] += this.oToLL(this.data.ox, this.data.oy).x;
+                    item[1] += this.oToLL(this.data.ox, this.data.oy).y;
+                });
                 item.symbol = {
                     type: "simple-line",
                     color: "#05bb4c",
-                    width: item.attributes.width
+                    width: item.attributes.width,
                 }
                 let graphic = new Graphic(item);
                 line_graphics.push(graphic);
@@ -416,6 +461,10 @@
         position: relative;
         overflow: hidden;
 
+        &.pointer {
+            cursor: pointer;
+        }
+
         #viewDiv {
             position: absolute;
             z-index: 1;

src/components/chart/line/normal-line-chart.vue

@@ -126,6 +126,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    smooth: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -174,7 +178,7 @@ export default {
         result.push({
           name: value.title,
           type: "line",
-          smooth: true,
+          smooth: this.smooth,
           zlevel: index,
           lineStyle: {
             normal: {

src/components/coms/table/table2.vue

@@ -11,9 +11,10 @@
       :fixed="col.fixed"
       :align="col.align ? col.align : 'center'"
       :resizable="col.resizable"
+      :header-align="'center'"
     >
       <template v-if="col.slot == true" #default="item">
-        <slot :name="col.field" :column="col" :row="item.row" :all="item"></slot>
+        <slot :name="col.field" :column="col" :row="item.row" :all="item" :data="item.row[col.field]"></slot>
       </template>
     </el-table-column>
   </el-table>

src/router/index.js

@@ -471,7 +471,22 @@ const routes = [{
         name: 'xqjsl',
         component: () =>
             import ('../views/Decision/slgl/xqjsl.vue')
-    }
+    },
+  {
+      path: "/new/powerforecast2",
+      name: "powerforecast2",
+      component: () => import(/* webpackChunkName: "powerforecast2" */ "../views/NewPages/power-forecast-2.vue"),
+  },
+  {
+      path: "/new/alarmcenter1",
+      name: "alarmcenter1",
+      component: () => import(/* webpackChunkName: "powerforecast2" */ "../views/NewPages/alarm-center-1.vue"),
+  },
+  {
+      path: "/new/historysearch",
+      name: "historysearch",
+      component: () => import(/* webpackChunkName: "historysearch" */ "../views/NewPages/history-search.vue"),
+  },
 ]
 const router = createRouter({
     history: createWebHashHistory(),

src/views/Demo.vue

@@ -56,7 +56,7 @@
 
     <h3>折线图：multiple-line-chart</h3>
     <multiple-line-chart :height="'200px'" />
-    
+
     <h3>折线图：multi-arrow-line-chart</h3>
     <multi-arrow-line-chart :height="'200px'" />
 
@@ -203,7 +203,7 @@
     <p>width : 列宽 可自定与每列宽度 如果想设置横向滚动条 需手动设置列宽 满足各列宽度和大于屏幕宽度</p>
     <p>click : 点击事件 与原有table相同</p>
     <p>sortable : 排序</p>
-    <p>slot: 开启插槽 为true时, 可在HTML中添加 插槽模板 添加自定义内容 为false时, 默认对应显示值, 示例参考代码中template </p>
+    <p>slot: 开启插槽 为true时, 可在HTML中添加 插槽模板 添加自定义内容 为false时, 默认对应显示值, 示例参考代码中template</p>
     <p>fixed: 固定列</p>
     <p>align: 默认文本居中 left | center| right</p>
     <table-2 :data="tableData2" :height="'200px'" :pageSize="10" @onPagging="tableonPagging">
@@ -339,7 +339,7 @@ export default {
     AreaBarChart,
     MultipleBarLineChart,
     Table2,
-    multiArrowLineChart
+    multiArrowLineChart,
   },
   methods: {
     select(data) {
@@ -495,6 +495,7 @@ export default {
         data: [
           {
             index: 1,
+            id: "",
             name: "MG01-01",
             lqf: "0.1000",
             yggl: "0.1000",
@@ -596,6 +597,7 @@ export default {
         data: [
           {
             index: 1,
+            id: "123",
             name: "MG01-01",
             lqf: "0.1000",
             yggl: "0.1000",

src/views/NewPages/alarm-center-1.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="alarm-center-1">
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">风场：</div>
+            <div class="search-input">
+              <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="lable">开始日期：</div>
+            <div class="search-input">
+              <el-date-picker v-model="value2" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="lable">结束日期：</div>
+            <div class="search-input">
+              <el-date-picker v-model="value3" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="lable">规则：</div>
+            <div class="search-input">
+              <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <div class="query-actions">
+          <button class="btn green">搜索</button>
+          <button class="btn green">筛选</button>
+          <button class="btn green">导出</button>
+        </div>
+      </div>
+    </div>
+    <panel-3 class="table-panel">
+      <table-2 :data="tableData" :height="'88vh'">
+        <template v-slot:v1="scope">
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v1 }}</span>
+          </div>
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v2 }}</span>
+          </div>
+        </template>
+        <template v-slot:v2="scope">
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v1 }}</span>
+          </div>
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v2 }}</span>
+          </div>
+        </template>
+        <template v-slot:v3="scope">
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v1 }}</span>
+          </div>
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v2 }}</span>
+          </div>
+        </template>
+        <template v-slot:v4="scope">
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v1 }}</span>
+          </div>
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v2 }}</span>
+          </div>
+        </template>
+        <template v-slot:v5="scope">
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v1 }}</span>
+          </div>
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v2 }}</span>
+          </div>
+        </template>
+        <template v-slot:v6="scope">
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v1 }}</span>
+          </div>
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v2 }}</span>
+          </div>
+        </template>
+        <template v-slot:v7="scope">
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v1 }}</span>
+          </div>
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v2 }}</span>
+          </div>
+        </template>
+        <template v-slot:v8="scope">
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v1 }}</span>
+          </div>
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v2 }}</span>
+          </div>
+        </template>
+        <template v-slot:v9="scope">
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v1 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v1 }}</span>
+          </div>
+          <div class="bar">
+            <div class="bar-percent" :style="{ width: (scope.data.v2 / (scope.data.v1 + scope.data.v2)) * 100 + 'px' }"></div>
+            <span class="value">{{ scope.data.v2 }}</span>
+          </div>
+        </template>
+      </table-2>
+    </panel-3>
+  </div>
+</template>
+
+<script>
+import Panel3 from "../../components/coms/panel/panel3.vue";
+import Table2 from "../../components/coms/table/table2.vue";
+export default {
+  components: { Panel3, Table2 },
+  data() {
+    return {
+      tableData: {
+        column: [
+          {
+            name: "风机编号",
+            field: "name",
+          },
+          {
+            name: "主轴温度温差大于8度",
+            field: "v1",
+            align: "left",
+            slot: true,
+          },
+          {
+            name: "浆叶角过小",
+            field: "v2",
+            align: "left",
+            slot: true,
+          },
+          {
+            name: "齿轮箱温控阀故障或换热器效率低",
+            field: "v3",
+            align: "left",
+            slot: true,
+          },
+          {
+            name: "齿轮箱轴承温升速度超过1.5",
+            field: "v4",
+            align: "left",
+            slot: true,
+          },
+          {
+            name: "齿轮箱轴承温升超过40度",
+            field: "v5",
+            align: "left",
+            slot: true,
+          },
+          {
+            name: "滤网压差",
+            field: "v6",
+            align: "left",
+            slot: true,
+          },
+          {
+            name: "解缆动作",
+            field: "v7",
+            align: "left",
+            slot: true,
+          },
+          {
+            name: "液压泵运行",
+            field: "v8",
+            align: "left",
+            slot: true,
+          },
+          {
+            name: "偏航",
+            field: "v9",
+            align: "left",
+            slot: true,
+          },
+        ],
+        data: [
+          {
+            name: "MG01_01",
+            v1: {
+              v1: 12,
+              v2: 0,
+            },
+            v2: {
+              v1: 0,
+              v2: 0,
+            },
+            v3: {
+              v1: 0,
+              v2: 0,
+            },
+            v4: {
+              v1: 87,
+              v2: 123,
+            },
+            v5: {
+              v1: 0,
+              v2: 0,
+            },
+            v6: {
+              v1: 7,
+              v2: 343,
+            },
+            v7: {
+              v1: 0,
+              v2: 0,
+            },
+            v8: {
+              v1: 0,
+              v2: 0,
+            },
+            v9: {
+              v1: 0,
+              v2: 0,
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    tabSelect(tab) {},
+  },
+  created() {
+    for (let i = 1; i < 40; i++) {
+      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+    }
+  },
+};
+</script>
+
+<style lang="less">
+.alarm-center-1 {
+  .action-bar {
+    display: flex;
+
+    .query {
+      justify-content: flex-start;
+    }
+  }
+
+  .table-panel {
+    width: 100%;
+    background: transparent;
+    padding: 0;
+
+    .bar {
+      display: flex;
+      align-items: center;
+      height: 16px;
+      margin: 8px 0;
+
+      .bar-percent {
+        height: 100%;
+        background: @green;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+</style>

src/views/NewPages/history-search.vue

@@ -0,0 +1,542 @@
+<template>
+  <div class="searchPage1">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">日期：</div>
+          <div class="search-input">
+            <el-date-picker size="medium" v-model="form.dateArea" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">间隔：</div>
+          <div class="search-input">
+            <el-input-number v-model="form.interval" controls-position="right"></el-input-number>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable"></div>
+          <div class="search-input">
+            <transition name="el-zoom-in-center">
+              <el-radio-group v-model="form.type" size="small" v-show="form.interval">
+                <el-radio label="0" @click.prevent="getRadio('0')">最大</el-radio>
+                <el-radio label="1" @click.prevent="getRadio('1')">最小</el-radio>
+                <el-radio label="2" @click.prevent="getRadio('2')">平均</el-radio>
+              </el-radio-group>
+            </transition>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions">
+        <button class="btn green" @click="renderCharts">生成曲线</button>
+      </div>
+    </div>
+    <div class="cardBox">
+      <el-card class="box-card">
+        <template v-slot:header class="clearfix">
+          <span>类型</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
+        </template>
+        <div>
+          <el-radio-group
+            v-model="form.fjType"
+            size="small"
+            @change="
+              (fjType) => {
+                resetForm();
+              }
+            "
+          >
+            <el-form ref="form" :model="form">
+              <el-form-item style="margin-bottom:5px;">
+                <el-radio border size="medium" label="1">单风机多参数对比</el-radio>
+              </el-form-item>
+              <el-form-item style="margin-bottom:5px;">
+                <el-radio border size="medium" label="2">多风机单参数对比</el-radio>
+              </el-form-item>
+            </el-form>
+          </el-radio-group>
+        </div>
+      </el-card>
+      <el-card class="box-card">
+        <template v-slot:header class="clearfix">
+          <span>设备结构</span>
+        </template>
+        <div>
+          <div class="treeBox">
+            <el-input size="small" placeholder="输入以检索" :disabled="!treeData.length" v-model="filterText"></el-input>
+            <el-tree ref="treeRef" node-key="id" :data="treeData" :props="treeProps" :show-checkbox="true" :highlight-current="true" :filter-node-method="filterNode" @check-change="getTreeChecked"></el-tree>
+          </div>
+        </div>
+      </el-card>
+      <el-card class="box-card">
+        <template v-slot:header class="clearfix">
+          <span>关键参数</span>
+        </template>
+        <div class="selectBox treeBox">
+          <el-input size="small" placeholder="输入以检索" :disabled="!gjcsOptions.length" v-model="filterText1"></el-input>
+          <el-tree ref="treeRef1" node-key="code" :data="gjcsOptions" :props="{ children: null, label: 'description' }" :show-checkbox="true" :highlight-current="true" :filter-node-method="filterNode1" @check-change="getTreeChecked1"></el-tree>
+          <!-- <el-select style="width:100%;" v-model="form.gjcs" filterable clearable :multiple="!treeIsMultiple"
+            placeholder="输入以检索" @change="(res) => { this.$forceUpdate(); }">
+            <el-option v-for="item in gjcsOptions" :key="item.id" :label="item.description" :value="item.code">
+            </el-option>
+          </el-select> -->
+        </div>
+      </el-card>
+    </div>
+    <div class="chartsBox">
+      <div id="lineChart" style="width:100%;height:100%;"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+
+export default {
+  data() {
+    return {
+      form: {
+        pointId: "",
+        pointName: "",
+        autoReq: false,
+        dateArea: [this.fmtDate(new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24))), this.fmtDate(new Date())],
+        interval: "",
+        type: "",
+        fjType: "1",
+        gjcs: "",
+      },
+
+      treeIsMultiple: false,
+      filterText: "",
+      filterText1: "",
+
+      treeData: [
+        {
+          id: 1,
+          label: "一级 2",
+          children: [
+            {
+              id: 3,
+              label: "二级 2-1",
+              children: [
+                {
+                  id: 4,
+                  label: "三级 3-1-1",
+                },
+                {
+                  id: 5,
+                  label: "三级 3-1-2",
+                  disabled: true,
+                },
+              ],
+            },
+            {
+              id: 2,
+              label: "二级 2-2",
+              disabled: true,
+              children: [
+                {
+                  id: 6,
+                  label: "三级 3-2-1",
+                },
+                {
+                  id: 7,
+                  label: "三级 3-2-2",
+                  disabled: true,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      gjcsOptions: [],
+
+      treeProps: {
+        children: "children",
+        label: "label",
+      },
+
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "最近一天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+    };
+  },
+
+  mounted() {
+    let that = this;
+    that.$nextTick(() => {
+      that.getEquipmentStructure();
+      that.getEquipmentParams();
+    });
+  },
+
+  methods: {
+    // 获取设备结构
+    getEquipmentStructure() {
+      let that = this;
+      that.API.requestData({
+        baseURL: "http://10.155.32.4:8031/",
+        subUrl: "paramComparison/equipmentStructure",
+        timeout: 30000,
+        success(res) {
+          // 请求成功的回调
+          let treeData = [];
+
+          res.data.forEach((ele) => {
+            let findRes = treeData.find((findEle) => {
+              return ele.windpowerstationid === findEle.label;
+            });
+            if (!findRes) {
+              let treeTemp = {
+                label: ele.windpowerstationid,
+                children: [],
+              };
+              treeTemp.children.push({
+                label: ele.name,
+                id: ele.id,
+              });
+              treeData.push(treeTemp);
+            } else {
+              findRes.children.push({
+                label: ele.name,
+                id: ele.id,
+              });
+            }
+          });
+          that.treeData = treeData;
+        },
+      });
+    },
+
+    // 获取关键节点
+    getEquipmentParams() {
+      let that = this;
+      that.API.requestData({
+        baseURL: "http://10.155.32.4:8031/",
+        subUrl: "paramComparison/equipmentParams",
+        success(res) {
+          that.gjcsOptions = res.data;
+        },
+      });
+    },
+
+    // 获取单选结果
+    getRadio(type) {
+      if (type === this.form.type && this.form.type !== "") {
+        this.form.type = "";
+      } else {
+        this.form.type = type;
+      }
+    },
+
+    // 渲染图表
+    renderCharts() {
+      let that = this;
+      that.$nextTick(() => {
+        let begin = that.form.dateArea.length ? new Date(that.form.dateArea[0]).formatDate("yyyy-MM-dd hh:mm:ss") : "";
+        let end = that.form.dateArea.length ? new Date(that.form.dateArea[1]).formatDate("yyyy-MM-dd hh:mm:ss") : "";
+        let interval = that.form.interval;
+        let type = that.form.type;
+        let paramtype = that.form.fjType;
+        let wts = [];
+        let wtsArray = that.$refs.treeRef.getCheckedNodes();
+        let params = [];
+        let paramsArray = that.$refs.treeRef1.getCheckedNodes();
+        // let params = that.form.gjcs;
+
+        wtsArray.forEach((pEle) => {
+          if (pEle.id) {
+            wts.push(pEle.id);
+          } else {
+            pEle.children.forEach((cEle) => {
+              wts.push(cEle.id);
+            });
+          }
+        });
+
+        paramsArray.forEach((pEle) => {
+          params.push(pEle.code);
+        });
+
+        let data = {};
+        data.begin = begin;
+        data.end = end;
+        interval && (data.interval = interval);
+        type && (data.type = type);
+        data.paramtype = paramtype;
+        data.wts = wts.toString();
+        data.params = params.toString();
+
+        if (begin && end && paramtype && wts.length && params.length) {
+          that.API.requestData({
+            baseURL: "http://10.155.32.4:8031/",
+            subUrl: "paramComparison/generatingCurve",
+            timeout: 10000,
+            data,
+            success(res) {
+              if (res.data.length) {
+                let xAxisData = []; // x轴标题
+                let seriesData = []; // 折线图数据
+
+                let keyArray = [];
+
+                if (that.form.fjType === "1") {
+                  params.forEach((ele) => {
+                    let findRes = that.gjcsOptions.find((findEle) => {
+                      return ele === findEle.code;
+                    });
+                    keyArray.push(findRes.description);
+                  });
+                } else {
+                  wtsArray.forEach((pEle) => {
+                    if (pEle.id) {
+                      keyArray.push(pEle.label);
+                    } else {
+                      pEle.children.forEach((cEle) => {
+                        keyArray.push(cEle.label);
+                      });
+                    }
+                  });
+                }
+
+                keyArray.forEach((ele) => {
+                  seriesData.push({
+                    data: [],
+                    type: "line",
+                    smooth: true,
+                    name: ele,
+                  });
+                });
+
+                res.data.forEach((pEle) => {
+                  xAxisData.push(that.fmtDate(new Date(pEle.time)));
+                  keyArray.forEach((cEle, cIndex) => {
+                    seriesData[cIndex].data.push(pEle[cEle] || null);
+                  });
+                });
+
+                document.getElementById("lineChart").removeAttribute("_echarts_instance_");
+                let chartDom = document.getElementById("lineChart");
+                let myChart = echarts.init(chartDom);
+                let option = {
+                  xAxis: {
+                    type: "category",
+                    data: xAxisData,
+                  },
+                  yAxis: {
+                    type: "value",
+                  },
+                  series: seriesData,
+                  tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                      type: "cross",
+                      label: {
+                        backgroundColor: "#6a7985",
+                      },
+                    },
+                  },
+                };
+                option && myChart.setOption(option);
+              } else {
+                that.BASE.showMsg({
+                  type: "warning",
+                  msg: "所选参数暂无数据，请切换参数后再次尝试",
+                });
+              }
+            },
+          });
+        } else {
+          that.BASE.showMsg({
+            msg: "无法生成，请检查 日期、设备结构与关键参数是否已选择",
+          });
+        }
+      });
+    },
+
+    // 过滤树形节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+
+    // 过滤树形节点
+    filterNode1(value, data) {
+      if (!value) return true;
+      return data.description.indexOf(value) !== -1;
+    },
+
+    // 获取树形选中
+    getTreeChecked(data, checked, node) {
+      if (!this.treeIsMultiple) {
+        if (checked === true) {
+          this.checkedId = data.id;
+          this.$refs.treeRef.setCheckedKeys([data.id]);
+        } else {
+          if (this.checkedId == data.id) {
+            this.$refs.treeRef.setCheckedKeys([]);
+          }
+        }
+      }
+    },
+
+    // 获取树形选中
+    getTreeChecked1(data, checked, node) {
+      if (this.treeIsMultiple) {
+        if (checked === true) {
+          this.checkedId = data.code;
+          this.$refs.treeRef1.setCheckedKeys([data.code]);
+        } else {
+          if (this.checkedId == data.code) {
+            this.$refs.treeRef1.setCheckedKeys([]);
+          }
+        }
+      }
+    },
+
+    // 重置表单
+    resetForm() {
+      this.form.fjType === "1" ? (this.treeIsMultiple = false) : (this.treeIsMultiple = true);
+      this.$refs.treeRef.setCheckedKeys([]);
+      this.$refs.treeRef1.setCheckedKeys([]);
+      this.form.gjcs = "";
+      this.$forceUpdate();
+      document.getElementById("lineChart").removeAttribute("_echarts_instance_");
+      echarts.init(document.getElementById("lineChart"));
+    },
+
+    // 格式化日期
+    fmtDate(date) {
+      let curDate = date || new Date();
+      let year = curDate.getFullYear();
+      let mouth = curDate.getUTCMonth() + 1;
+      let day = curDate.getDate();
+      let hour = curDate.getHours();
+      let minutes = curDate.getMinutes();
+      let seconds = curDate.getSeconds();
+      return year + "-" + (mouth < 10 ? "0" + mouth : mouth) + "-" + (day < 10 ? "0" + day : day) + " " + (hour < 10 ? "0" + hour : hour) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
+    },
+  },
+
+  watch: {
+    filterText(val) {
+      this.$refs.treeRef.filter(val);
+    },
+
+    filterText1(val) {
+      this.$refs.treeRef1.filter(val);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.searchBox1 {
+  width: 80%;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  position: relative;
+
+  .btnBox {
+    position: absolute;
+    left: calc(100% + 60px);
+    top: 0;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+  }
+
+  .el-input {
+    width: 150px;
+  }
+}
+
+.cardBox {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+
+  .el-card {
+    width: 32%;
+    height: 255px;
+
+    .treeBox {
+      width: 100%;
+
+      .el-tree {
+        width: 100%;
+        height: 160px;
+        margin-top: 10px;
+        overflow-y: scroll;
+
+      
+      }
+    }
+  }
+}
+
+.selectBox {
+  .el-select {
+    max-height: 150px;
+    overflow-y: scroll;
+
+   
+  }
+}
+
+.chartsBox {
+  width: 100%;
+  height: 400px;
+}
+</style>
+<style lang="less">
+.cardBox {
+  .el-card__header {
+    padding: 5px 20px;
+  }
+
+  .el-card__body {
+    padding: 10px 20px;
+  }
+}
+</style>

src/views/NewPages/power-forecast-2.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="power-forecast-2">
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">风场：</div>
+            <div class="search-input">
+              <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              </el-select>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="lable">开始日期：</div>
+            <div class="search-input">
+              <el-date-picker v-model="value2" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="lable">结束日期：</div>
+            <div class="search-input">
+              <el-date-picker v-model="value3" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
+            </div>
+          </div>
+        </div>
+        <div class="query-actions">
+          <button class="btn green">搜索</button>
+        </div>
+      </div>
+      <div class="query" style="margin-left:32px">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">预测准确率：</div>
+            <div class="fj-lable">麻黄山 <span class="num">55%</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <panel :title="'功率预测对比'" class="mg-b-16" :showLine="false">
+      <normal-line-chart :smooth="false" :showLegend="true" :height="'200px'" />
+    </panel>
+    <panel :title="'功率预测对比'" class="mg-b-16" :showLine="false">
+      <table-2 :data="tableData" :height="'58vh'" />
+    </panel>
+  </div>
+</template>
+
+<script>
+import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import Table2 from "../../components/coms/table/table2.vue";
+export default {
+  components: { Panel, NormalLineChart, Table2 },
+  setup() {},
+  data() {
+    return {
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      value1: "",
+      value2: "",
+      value3: "",
+      tableData: {
+        column: [
+          {
+            name: "时间",
+            field: "name",
+            click: function(event, data) {
+              console.log(event);
+              console.log(data);
+            },
+          },
+          {
+            name: "预测风速",
+            field: "lqf",
+          },
+          {
+            name: "预测功率",
+            field: "yggl",
+          },
+          {
+            name: "实际风速",
+            field: "yyy",
+          },
+          {
+            name: "实际功率",
+            field: "pcspp",
+          },
+        ],
+        data: [
+          {
+            index: 1,
+            name: "MG01-01",
+            lqf: "0.1000",
+            yggl: "0.1000",
+            yyy: "0.10",
+            pcspp: "0.1000",
+            u1: "0.1000",
+            u2: "0.1000",
+            v1: "0.1000",
+            v2: "0.1000",
+            w1: "0.1000",
+            w2: "0.1000",
+            zca: "0.1000",
+            zcb: "0.1000",
+            clx: "0.1000",
+            clx1: "0.1000",
+            clx2: "0.1000",
+            jc: "0.1000",
+            hh: "0.1000",
+            hj: "0.1000",
+            is_light: false,
+          },
+        ],
+        total: 100,
+      },
+    };
+  },
+  created() {
+    for (let i = 1; i < 40; i++) {
+      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+      this.tableData.data[i].index = i + 1;
+      this.tableData.data[i].yyy = i * 0.01 * Math.random();
+    }
+  },
+};
+</script>
+
+<style lang="less">
+.power-forecast-2 {
+  .action-bar {
+    display: flex;
+
+    .query {
+      justify-content: flex-start;
+    }
+
+    .fj-lable {
+      height: 33px;
+      line-height: 33px;
+      padding: 0px 24px;
+      background: fade(@gray, 20);
+      font-size: 14px;
+      color: @gray-l;
+
+      .num {
+        margin-left: 12px;
+        font-family: @font-family-num;
+        font-size: 16px;
+        color: @green;
+      }
+    }
+  }
+}
+</style>

src/views/SandTable/SandTable.vue

@@ -1,5 +1,7 @@
 <template>
     <div class="sand-table">
+        <img :src="require('@assets/png/3dback.png')" class="i3dback">
+        <StBack></StBack>
         <ThreeModel class="three-model-layer" @when="when"></ThreeModel>
         <div class="sand-table-left" v-if="showPanel">
             <PanelSand class="left-panel" title="板块标题" subTitle="AM10:52  实况">
@@ -96,6 +98,7 @@ import Weather from "./component/weather.vue";
 import ListBarChart2 from "@com/chart/bar/list-bar-chart2.vue";
 import PowerPlan from "./component/power-plan.vue";
 import PowerReview from "./component/power-review.vue";
+import StBack from "./component/st-back.vue";
 import Table from "@com/coms/table/table.vue";
 import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
 
@@ -113,6 +116,7 @@ export default {
         PowerReview,
         Table,
         RadarPieChart,
+        StBack,
     },
     // 数据
     data() {
@@ -231,6 +235,15 @@ export default {
     height: 91.667vh;
     position: relative;
 
+    .i3dback {
+        position: fixed;
+        z-index: -1;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+    }
+
     .left-panel {
         width: 36.852vh;
     }

src/views/SandTable/component/ThreeModel.vue

@@ -7,7 +7,113 @@
                 :id="htmlLayer[0].id"
                 v-show="htmlLayer[0].show"
                 :style="'left: ' + htmlLayer[0].x + 'px; top: ' + htmlLayer[0].y + 'px;'"
-            ></div>
+            >
+                <div class="fan-info-close" @click.stop="closeFanInfo">
+                    <i class="el-icon-close"></i>
+                </div>
+                <div class="fan-info-item">
+                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
+                        <svg-icon svgid="svg-风机" />
+                    </span>
+                    <span class="gray-l mg-l-8">接入</span>
+                    <span class="green num">176</span>
+                    <span class="green mg-l-8">台</span>
+                </div>
+                <div class="fan-info-item">
+                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
+                        <svg-icon svgid="svg-normal-power" />
+                    </span>
+                    <span class="gray-l mg-l-8">运行</span>
+                    <span class="green num">1</span>
+                    <span class="green mg-l-8">台</span>
+                </div>
+                <div class="fan-info-item">
+                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
+                        <svg-icon svgid="svg-standby" />
+                    </span>
+                    <span class="gray-l mg-l-8">待机</span>
+                    <span class="green num">1</span>
+                    <span class="green mg-l-8">台</span>
+                </div>
+                <div class="fan-info-item">
+                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
+                        <svg-icon svgid="svg-limit-power" />
+                    </span>
+                    <span class="gray-l mg-l-8">限电</span>
+                    <span class="green num">1</span>
+                    <span class="green mg-l-8">台</span>
+                </div>
+                <div class="fan-info-item">
+                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
+                        <svg-icon svgid="svg-gz-downtime" />
+                    </span>
+                    <span class="gray-l mg-l-8">故障</span>
+                    <span class="green num">1</span>
+                    <span class="green mg-l-8">台</span>
+                </div>
+                <div class="fan-info-item">
+                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
+                        <svg-icon svgid="svg-jx-downtime" />
+                    </span>
+                    <span class="gray-l mg-l-8">检修</span>
+                    <span class="green num">1</span>
+                    <span class="green mg-l-8">台</span>
+                </div>
+                <div class="fan-info-item">
+                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
+                        <svg-icon svgid="svg-offline" />
+                    </span>
+                    <span class="gray-l mg-l-8">离线</span>
+                    <span class="green num">1</span>
+                    <span class="green mg-l-8">台</span>
+                </div>
+                <div class="fan-info-item">
+                    <span class="svg-icon svg-icon-gray-l svg-icon-sm">
+                        <svg-icon svgid="svg-intranet-involvement" />
+                    </span>
+                    <span class="gray-l mg-l-8">受累</span>
+                    <span class="green num">1</span>
+                    <span class="green mg-l-8">台</span>
+                </div>
+            </div>
+            <div
+                class="three-html-dom build-info"
+                :id="htmlLayer[1].id"
+                v-show="htmlLayer[1].show"
+                :style="'left: ' + htmlLayer[1].x + 'px; top: ' + htmlLayer[1].y + 'px;'"
+            >
+                <div class="build-info-close" @click.stop="closeBuildInfo">
+                    <i class="el-icon-close"></i>
+                </div>
+                <div class="build-info-item blue" :style="'right: '+circleXY[0].x+'px; top: '+circleXY[0].y+'px'">
+                    <div class="build-info-item-num">97</div>
+                    <div class="build-info-item-text">综合厂</div>
+                </div>
+                <div class="build-info-item blue" :style="'right: '+circleXY[1].x+'px; top: '+circleXY[1].y+'px'">
+                    <div class="build-info-item-num">97</div>
+                    <div class="build-info-item-text">风能</div>
+                </div>
+                <div class="build-info-item green" :style="'right: '+circleXY[2].x+'px; top: '+circleXY[2].y+'px'">
+                    <div class="build-info-item-num">97</div>
+                    <div class="build-info-item-text">利用小时</div>
+                </div>
+                <div class="build-info-item purple" :style="'right: '+circleXY[3].x+'px; top: '+circleXY[3].y+'px'">
+                    <div class="build-info-item-num">97</div>
+                    <div class="build-info-item-text">评分</div>
+                </div>
+                <div class="build-info-item orange" :style="'right: '+circleXY[4].x+'px; top: '+circleXY[4].y+'px'">
+                    <div class="build-info-item-num">97</div>
+                    <div class="build-info-item-text">MTBF</div>
+                </div>
+                <div class="build-info-item yellow" :style="'right: '+circleXY[5].x+'px; top: '+circleXY[5].y+'px'">
+                    <div class="build-info-item-num">97</div>
+                    <div class="build-info-item-text">设备科</div>
+                </div>
+                <div class="build-info-item blue" :style="'right: '+circleXY[6].x+'px; top: '+circleXY[6].y+'px'">
+                    <div class="build-info-item-num">97</div>
+                    <div class="build-info-item-text">MTTR</div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -17,16 +123,20 @@ import loading from "@com/coms/loading/loading.vue";
 import * as THREE from "three";
 import { GLTFLoader } from "@node/three/examples/jsm/loaders/GLTFLoader.js";
 import { OrbitControls } from "@node/three/examples/jsm/controls/OrbitControls.js";
+import { GeometryUtils } from "@node/three/examples/jsm/utils/GeometryUtils.js";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
 let camera, scene, renderer, controls;
 let mixers = [];
 let clock = new THREE.Clock();
 let fanAnimates = [];
+let cylinder = null;
 export default {
     // 名称
     name: "ThreeModel",
     // 使用组件
     components: {
         loading,
+        SvgIcon,
     },
     // 传入参数
     props: {},
@@ -48,7 +158,25 @@ export default {
                     oy: -50,
                     position: null,
                 },
+                {
+                    id: "build-info",
+                    x: 0,
+                    y: 0,
+                    show: false,
+                    ox: -300,
+                    oy: -50,
+                    position: null,
+                },
             ],
+            circleXY: [
+                { x: -(200*Math.sin(0/180*Math.PI)), y: -(200*Math.cos(0/180*Math.PI)) },
+                { x: -(200*Math.sin(-30/180*Math.PI)), y: -(200*Math.cos(-30/180*Math.PI)) },
+                { x: -(200*Math.sin(-60/180*Math.PI)), y: -(200*Math.cos(-60/180*Math.PI)) },
+                { x: -(200*Math.sin(-90/180*Math.PI)), y: -(200*Math.cos(-90/180*Math.PI)) },
+                { x: -(200*Math.sin(-120/180*Math.PI)), y: -(200*Math.cos(-120/180*Math.PI)) },
+                { x: -(200*Math.sin(-150/180*Math.PI)), y: -(200*Math.cos(-150/180*Math.PI)) },
+                { x: -(200*Math.sin(-180/180*Math.PI)), y: -(200*Math.cos(-180/180*Math.PI)) },
+            ]
         };
     },
     // 函数
@@ -175,8 +303,8 @@ export default {
             );
         },
         // 创建一个圆柱
-        initCylinderGeometry: function(position) {
-            let geometry = new THREE.CylinderGeometry(2, 2, 7, 64);
+        initCylinderGeometry: function(position, cr=2) {
+            let geometry = new THREE.CylinderGeometry(cr, cr, 7, 64);
             //加载纹理
             let texture = new THREE.TextureLoader().load("static/3d/beam-texture.png");
             texture.wrapS = texture.wrapT = THREE.RepeatWrapping; //每个都重复
@@ -202,13 +330,13 @@ export default {
                     side: THREE.DoubleSide,
                 }),
             ];
-            let cylinder = new THREE.Mesh(geometry, materials);
+            cylinder = new THREE.Mesh(geometry, materials);
             cylinder.position.set(position.x + 5.75, position.y + 8, position.z);
             scene.add(cylinder);
         },
         // 判断时候是可点击对象 返回null 或object
         getClickObject: function(intersects) {
-            const names = ["组840", "组857", "组838"];
+            const names = ["组833", "组840", "组857", "组838"];
             const x = true;
             let obj = null;
             for (let intersect of intersects) {
@@ -261,6 +389,38 @@ export default {
             this.htmlLayer[0].show = true;
             this.setEveryHTML();
         },
+        // 隐藏风机弹出层
+        hideFanInfo: function () {
+            this.htmlLayer[0].show = false;
+        },
+        // 显示楼信息弹出层
+        showBuildInfo: function(position) {
+            this.htmlLayer[1].position = {
+                x: position.x,
+                y: position.y,
+                z: position.z,
+            };
+            this.htmlLayer[1].show = true;
+            this.setEveryHTML();
+        },
+        // 隐藏楼信息弹出层
+        hideBuildInfo: function () {
+            this.htmlLayer[1].show = false;
+        },
+        // 关闭弹出
+        closeFanInfo: function () {
+            this.htmlLayer[0].show = false;
+            if (cylinder) {
+                scene.remove(cylinder);
+            }
+        },
+        // 关闭弹出
+        closeBuildInfo: function () {
+            this.htmlLayer[1].show = false;
+            if (cylinder) {
+                scene.remove(cylinder);
+            }
+        },
         // 点击事件
         clickEvent: function(event) {
             event.preventDefault();
@@ -268,15 +428,27 @@ export default {
             vector = vector.unproject(camera);
             let raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
             let intersects = raycaster.intersectObjects(scene.children, true);
-            console.log(intersects);
+            // console.log(intersects); // 输出点击的对象信息
             // 找是否是可点击对象
             let obj = this.getClickObject(intersects);
             if (obj) {
-                console.log(obj);
-                this.initCylinderGeometry(obj.position);
-                this.showFanInfo(obj.position);
+                if (cylinder) {
+                    scene.remove(cylinder);
+                }
+                this.initCylinderGeometry(obj.position, obj.name == "组833" ? 4 : 2);
+                if (obj.name == "组833") {
+                    this.showBuildInfo(obj.position);
+                    this.hideFanInfo();
+                } else {
+                    this.showFanInfo(obj.position);
+                    this.hideBuildInfo();
+                }
             }
         },
+        // 初始化云
+        initCloud: function () {
+            
+        },
         // 初始化
         initThree: function() {
             this.initScene();
@@ -286,6 +458,7 @@ export default {
             this.initLight();
             this.initControls();
             this.initContent();
+            this.initCloud();
             renderer.setAnimationLoop(this.animate);
         },
         // 动画
@@ -331,6 +504,7 @@ export default {
 <style lang="less" scoped>
 .three-model {
     position: relative;
+    overflow: hidden;
 
     .three-html-layer {
         position: absolute;
@@ -344,11 +518,125 @@ export default {
         }
 
         .fan-info {
+            padding: 14px;
             width: 149px;
             height: 288px;
             background: #1a1f2fd8;
             border: 1px solid #05bb4c;
             box-shadow: 0px 8px 17px 1px #05bb4c66;
+
+            .fan-info-close {
+                position: absolute;
+                width: 20px;
+                height: 20px;
+                top: -10px;
+                right: -10px;
+                border-radius: 50%;
+                background: #1a1f2fd8;
+                border: 1px solid #05bb4c;
+                box-shadow: 0px 8px 17px 1px #05bb4c66;
+                cursor: pointer;
+                color: @gray-l;
+                transition: all 0.3s;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 8px;
+
+                &:hover {
+                    color: #05bb4c;
+                }
+            }
+
+            .fan-info-item {
+
+                +.fan-info-item {
+                    margin-top: 13px;
+                }
+
+                .svg-icon {
+                    text-align: center;
+                }
+
+                .num {
+                    display: inline-block;
+                    width: 45px;
+                    text-align: right;
+                }
+            }
+        }
+
+        .build-info {
+            width: 400px;
+            height: 200px;
+            position: relative;
+
+            .build-info-close {
+                position: absolute;
+                width: 40px;
+                height: 40px;
+                top: 20px;
+                right: 20px;
+                border-radius: 50%;
+                background: #1a1f2fd8;
+                border: 1px solid #05bb4c;
+                box-shadow: 0px 8px 17px 1px #05bb4c66;
+                cursor: pointer;
+                color: @gray-l;
+                transition: all 0.3s;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 14px;
+
+                &:hover {
+                    color: #05bb4c;
+                }
+            }
+
+            .build-info-item {
+                width: 72px;
+                height: 72px;
+                border-radius: 50%;
+                background: #1A1F2FE5;
+                position: absolute;
+
+                .build-info-item-num {
+                    font-size: 24px;
+                    font-weight: 500;
+                    color: #FFFFFF;
+                    text-align: center;
+                    line-height: 1.2;
+                    margin-top: 9px;
+                }
+
+                .build-info-item-text {
+                    font-size: 12px;
+                    color: #FFFFFF;
+                    font-weight: 400;
+                    text-align: center;
+                }
+
+                &.blue {
+                    border: 2px solid #1DA0D7;
+                }
+
+                &.green {
+                    border: 2px solid #05BB4C;
+                }
+
+                &.purple {
+                    border: 2px solid #323E6F;
+                }
+
+                &.orange {
+                    border: 2px solid #DB5520;
+                }
+
+                &.yellow {
+                    border: 2px solid #EDB32F;
+                }
+            }
         }
     }
 }

src/views/SandTable/component/st-back.vue

@@ -0,0 +1,150 @@
+<template>
+    <div class="st-back">
+        <svg viewBox="0 0 872 872" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
+            <defs>
+                <polygon id="sjx-svg-def" points="13 0 26 22 0 22" fill="#F4DF6A"></polygon>
+                <rect id="cjx-svg-def" x="0" y="0" width="94" height="12" fill="#F4DF6A"></rect>
+            </defs>
+            <circle cx="436" cy="436" r="430" stroke="#2F3647" stroke-width="2" fill="none" stroke-dasharray="15,10">
+                <animateTransform
+                    attributeName="transform"
+                    attributeType="XML"
+                    type="rotate"
+                    from="359 436 436"
+                    to="0 436 436"
+                    dur="50s"
+                    repeatCount="indefinite"
+                />
+            </circle>
+            <circle cx="436" cy="436" r="270" stroke="#2F3647" stroke-width="70" fill="none" stroke-dasharray="500,50">
+                <animateTransform
+                    attributeName="transform"
+                    attributeType="XML"
+                    type="rotate"
+                    from="0 436 436"
+                    to="359 436 436"
+                    dur="25s"
+                    repeatCount="indefinite"
+                />
+            </circle>
+            <circle cx="436" cy="436" r="350" stroke="#2F3647" stroke-width="2" fill="none"></circle>
+            <use xlink:href="#sjx-svg-def" x="424" y="815">
+                <animateTransform
+                    attributeName="transform"
+                    attributeType="XML"
+                    type="rotate"
+                    from="0 436 436"
+                    to="359 436 436"
+                    dur="15s"
+                    repeatCount="indefinite"
+                />
+            </use>
+            <use xlink:href="#sjx-svg-def" x="75" y="245">
+                <animateTransform
+                    attributeName="transform"
+                    attributeType="XML"
+                    type="rotate"
+                    from="0 436 436"
+                    to="359 436 436"
+                    dur="15s"
+                    repeatCount="indefinite"
+                />
+            </use>
+            <use xlink:href="#sjx-svg-def" x="775" y="245">
+                <animateTransform
+                    attributeName="transform"
+                    attributeType="XML"
+                    type="rotate"
+                    from="0 436 436"
+                    to="359 436 436"
+                    dur="15s"
+                    repeatCount="indefinite"
+                />
+            </use>
+            <use xlink:href="#cjx-svg-def" x="390" y="778">
+                <animateTransform
+                    attributeName="transform"
+                    attributeType="XML"
+                    type="rotate"
+                    from="359 436 436"
+                    to="0 436 436"
+                    dur="15s"
+                    repeatCount="indefinite"
+                />
+            </use>
+            <use xlink:href="#cjx-svg-def" x="390" y="778">
+                <animateTransform
+                    attributeName="transform"
+                    attributeType="XML"
+                    type="rotate"
+                    from="135 436 436"
+                    to="-224 436 436"
+                    dur="15s"
+                    repeatCount="indefinite"
+                />
+            </use>
+            <use xlink:href="#cjx-svg-def" x="390" y="778">
+                <animateTransform
+                    attributeName="transform"
+                    attributeType="XML"
+                    type="rotate"
+                    from="225 436 436"
+                    to="-134 436 436"
+                    dur="15s"
+                    repeatCount="indefinite"
+                />
+            </use>
+        </svg>
+    </div>
+</template>
+
+<script>
+export default {
+    // 名称
+    name: "st-back",
+    // 使用组件
+    components: {},
+    // 数据
+    data() {
+        return {};
+    },
+    // 函数
+    methods: {},
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+    },
+    beforeUpdate() {
+        // 数据更新前
+    },
+    updated() {
+        // 数据更新后
+    },
+};
+</script>
+
+<style lang="less">
+.st-back {
+    width: 872px;
+    height: 872px;
+    position: fixed;
+    z-index: 0;
+    left: calc(50% - 436px);
+    top: calc(50% - 436px);
+    transform: rotateX(20deg);
+
+    svg {
+        width: 872px;
+        height: 872px;
+    }
+}
+</style>

src/views/WindSite/pages/Map.vue

@@ -1,140 +1,151 @@
 <template>
-  <div class="map-1">
-    <div class="btn-group-tabs">
-      <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
-    </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>
-          <span class="sub-count font-num white">256</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/green.png" />
-          <span class="sub-title green">待机台数</span>
-          <span class="sub-count font-num green">56</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/blue.png" />
-          <span class="sub-title blue">并网台数</span>
-          <span class="sub-count font-num blue">256</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/purple.png" />
-          <span class="sub-title pink">限电台数</span>
-          <span class="sub-count font-num pink">3</span>
+    <div class="map-1">
+        <div class="btn-group-tabs">
+            <BtnGroup2
+                :btnGroups="btnGroups"
+                :rowIndex="0"
+                :index="1"
+                @select="select"
+            ></BtnGroup2>
         </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/red.png" />
-          <span class="sub-title red">故障台数</span>
-          <span class="sub-count font-num red">5</span>
+        <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>
+                    <span class="sub-count font-num white">256</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/green.png" />
+                    <span class="sub-title green">待机台数</span>
+                    <span class="sub-count font-num green">56</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/blue.png" />
+                    <span class="sub-title blue">并网台数</span>
+                    <span class="sub-count font-num blue">256</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/purple.png" />
+                    <span class="sub-title pink">限电台数</span>
+                    <span class="sub-count font-num pink">3</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/red.png" />
+                    <span class="sub-title red">故障台数</span>
+                    <span class="sub-count font-num red">5</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/orange.png" />
+                    <span class="sub-title orange">检修台数</span>
+                    <span class="sub-count font-num orange">20</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/white.png" />
+                    <span class="sub-title white">受累台数</span>
+                    <span class="sub-count font-num white">256</span>
+                </div>
+                <div class="sub-title-item">
+                    <img src="../../../assets/map/fan/black.png" />
+                    <span class="sub-title gray">离线台数</span>
+                    <span class="sub-count font-num gray">2</span>
+                </div>
+            </div>
         </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/orange.png" />
-          <span class="sub-title orange">检修台数</span>
-          <span class="sub-count font-num orange">20</span>
+        <div class="panel-body">
+            <arcgis class="arcgis-layer" @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap"></arcgis>
+            <div class="map-popup-panel" v-show="showPopup">
+                <div class="map-popup-panel-header">
+                    <div class="map-popup-panel-title green">
+                        某某风电场总貌<span></span>
+                    </div>
+                    <div class="map-popup-panel-date gray">2020年5月10日</div>
+                    <div class="map-popup-panel-back" @click="popupBack">
+                        <span class="svg-icon svg-icon-white svg-icon-sm">
+                            <SvgIcon svgid="svg-arrow-dpwn-1"></SvgIcon>
+                        </span>
+                    </div>
+                </div>
+                <div class="map-popup-panel-body">
+                    <table class="table-form">
+                        <tr>
+                            <td class="text white">装机容量</td>
+                            <td class="value green">49.5</td>
+                            <td class="unit white">M/W</td>
+                            <td class="text white">装机台数</td>
+                            <td class="value green">33</td>
+                            <td class="unit white">台</td>
+                            <td class="text white">风机型号</td>
+                            <td class="value green" colspan="2">UP82/77-1500</td>
+                        </tr>
+                        <tr>
+                            <td class="text white">实时功率</td>
+                            <td class="value green">50.81</td>
+                            <td class="unit white">M/W</td>
+                            <td class="text white">平均风速</td>
+                            <td class="value green">14.66</td>
+                            <td class="unit white">m/s</td>
+                            <td class="text white">运行台数</td>
+                            <td class="value green">33</td>
+                            <td class="unit white">台</td>
+                        </tr>
+                        <tr>
+                            <td class="text white">待机台数</td>
+                            <td class="value green">0</td>
+                            <td class="unit white">台</td>
+                            <td class="text white">故障台数</td>
+                            <td class="value green">0</td>
+                            <td class="unit white">台</td>
+                            <td class="text white">维护台数</td>
+                            <td class="value green">0</td>
+                            <td class="unit white">台</td>
+                        </tr>
+                        <tr>
+                            <td class="text white">离线台数</td>
+                            <td class="value green">0</td>
+                            <td class="unit white">台</td>
+                            <td class="text white"></td>
+                            <td class="value green"></td>
+                            <td class="unit white"></td>
+                            <td class="text white"></td>
+                            <td class="value green"></td>
+                            <td class="unit white"></td>
+                        </tr>
+                        <tr>
+                            <td class="text white">日发电量</td>
+                            <td class="value green">49.5</td>
+                            <td class="unit white">万kWh</td>
+                            <td class="text white">月发电量</td>
+                            <td class="value green">49.5</td>
+                            <td class="unit white">万kWh</td>
+                            <td class="text white"></td>
+                            <td class="value green"></td>
+                            <td class="unit white"></td>
+                        </tr>
+                        <tr>
+                            <td class="text white">年发电量</td>
+                            <td class="value green">49.5</td>
+                            <td class="unit white">万kWh</td>
+                            <td class="text white">总发电量</td>
+                            <td class="value green">49.5</td>
+                            <td class="unit white">万kWh</td>
+                            <td class="text white"></td>
+                            <td class="value green"></td>
+                            <td class="unit white"></td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+            <div class="map-tool">
+                <div class="m-btn" :class="{'active': mapToolIndex == 0}" @click="clickMapTool(0)">风机排布</div>
+                <div class="m-btn" :class="{'active': mapToolIndex == 1}" @click="clickMapTool(1)">巡检路线</div>
+            </div>
         </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/white.png" />
-          <span class="sub-title white">受累台数</span>
-          <span class="sub-count font-num white">256</span>
-        </div>
-        <div class="sub-title-item">
-          <img src="../../../assets/map/fan/black.png" />
-          <span class="sub-title gray">离线台数</span>
-          <span class="sub-count font-num gray">2</span>
-        </div>
-      </div>
     </div>
-    <div class="panel-body">
-      <arcgis @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap"></arcgis>
-      <div class="map-popup-panel" v-show="showPopup">
-        <div class="map-popup-panel-header">
-          <div class="map-popup-panel-title green">某某风电场总貌<span></span></div>
-          <div class="map-popup-panel-date gray">2020年5月10日</div>
-          <div class="map-popup-panel-back" @click="popupBack">
-            <span class="svg-icon svg-icon-white svg-icon-sm">
-              <SvgIcon svgid="svg-arrow-dpwn-1"></SvgIcon>
-            </span>
-          </div>
-        </div>
-        <div class="map-popup-panel-body">
-          <table class="table-form">
-            <tr>
-              <td class="text white">装机容量</td>
-              <td class="value green">49.5</td>
-              <td class="unit white">M/W</td>
-              <td class="text white">装机台数</td>
-              <td class="value green">33</td>
-              <td class="unit white">台</td>
-              <td class="text white">风机型号</td>
-              <td class="value green" colspan="2">UP82/77-1500</td>
-            </tr>
-            <tr>
-              <td class="text white">实时功率</td>
-              <td class="value green">50.81</td>
-              <td class="unit white">M/W</td>
-              <td class="text white">平均风速</td>
-              <td class="value green">14.66</td>
-              <td class="unit white">m/s</td>
-              <td class="text white">运行台数</td>
-              <td class="value green">33</td>
-              <td class="unit white">台</td>
-            </tr>
-            <tr>
-              <td class="text white">待机台数</td>
-              <td class="value green">0</td>
-              <td class="unit white">台</td>
-              <td class="text white">故障台数</td>
-              <td class="value green">0</td>
-              <td class="unit white">台</td>
-              <td class="text white">维护台数</td>
-              <td class="value green">0</td>
-              <td class="unit white">台</td>
-            </tr>
-            <tr>
-              <td class="text white">离线台数</td>
-              <td class="value green">0</td>
-              <td class="unit white">台</td>
-              <td class="text white"></td>
-              <td class="value green"></td>
-              <td class="unit white"></td>
-              <td class="text white"></td>
-              <td class="value green"></td>
-              <td class="unit white"></td>
-            </tr>
-            <tr>
-              <td class="text white">日发电量</td>
-              <td class="value green">49.5</td>
-              <td class="unit white">万kWh</td>
-              <td class="text white">月发电量</td>
-              <td class="value green">49.5</td>
-              <td class="unit white">万kWh</td>
-              <td class="text white"></td>
-              <td class="value green"></td>
-              <td class="unit white"></td>
-            </tr>
-            <tr>
-              <td class="text white">年发电量</td>
-              <td class="value green">49.5</td>
-              <td class="unit white">万kWh</td>
-              <td class="text white">总发电量</td>
-              <td class="value green">49.5</td>
-              <td class="unit white">万kWh</td>
-              <td class="text white"></td>
-              <td class="value green"></td>
-              <td class="unit white"></td>
-            </tr>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
@@ -144,277 +155,329 @@ import arcgis from "@com/arcgis/arcgis.vue";
 import dataService from "@/helper/data.js";
 
 export default {
-  // 名称
-  name: "Map",
-  // 使用组件
-  components: {
-    BtnGroup2,
-    SvgIcon,
-    arcgis,
-  },
-  // 数据
-  data() {
-    return {
-      btnGroups: [
-        {
-          icon: "svg-wind-site",
-          btns: [
-            {
-              text: "某某风场",
-              code: "mmfdc1",
-            },
-            {
-              text: "某某风场",
-              code: "mhsfc",
-            },
-            {
-              text: "某某风场",
-              code: "mmfdc2",
-            },
-            {
-              text: "某某风场",
-              code: "mmfdc3",
-            },
-            {
-              text: "某某风场",
-              code: "mmfdc4",
+    // 名称
+    name: "Map",
+    // 使用组件
+    components: {
+        BtnGroup2,
+        SvgIcon,
+        arcgis,
+    },
+    // 数据
+    data() {
+        return {
+            btnGroups: [
+                {
+                    icon: "svg-wind-site",
+                    btns: [
+                        {
+                            text: "某某风场",
+                            code: "mmfdc1",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mhsfc",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmfdc2",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmfdc3",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmfdc4",
+                        },
+                    ],
+                },
+                {
+                    icon: "svg-photovoltaic",
+                    btns: [
+                        {
+                            text: "某某风场",
+                            code: "mmgf1",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmgf2",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmgf3",
+                        },
+                        {
+                            text: "某某风场",
+                            code: "mmgf4",
+                        },
+                    ],
+                },
+            ],
+            arcgisData: {
+                mode: "2D", // 模式 2D 3D
+                title: "宁夏地图", // 标题
+                center: [107.0391975, 37.31469028], // 初始中心点 106.230909, 38.487193
+                height: 654, // 3D地图初始相机高度
+                tilt: 65, // 俯视角
+                scale: 30000,
+                rotation: -45,
+                ox: -600,
+                oy: -50,
             },
-          ],
+            showPopup: true,
+            mapToolIndex: 0,
+        };
+    },
+    // 函数
+    methods: {
+        when: function () {
+            let jsonObj = dataService.get("arcgis-nx-fc1");
+            let data = [{id: "MG13", state: "yx"},{id: "MG12", state: "xd"},{id: "MG34", state: "gz"},{id: "MG39", state: "jc"},
+                        {id: "MG02", state: "lx"}, {id: "MG19", state: "sl"}]
+            jsonObj.forEach(item => {
+                let obj = data.find(t => t.id == item.attributes.code);
+                if (obj) {
+                    item.attributes.state = obj.state;
+                } else {
+                    item.attributes.state = "dj";
+                }
+            });
+            let lineJsonObj = dataService.get("arcgis-nx-fc1-line");
+            this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
         },
-        {
-          icon: "svg-photovoltaic",
-          btns: [
-            {
-              text: "某某风场",
-              code: "mmgf1",
-            },
-            {
-              text: "某某风场",
-              code: "mmgf2",
-            },
-            {
-              text: "某某风场",
-              code: "mmgf3",
-            },
-            {
-              text: "某某风场",
-              code: "mmgf4",
-            },
-          ],
+        clickMap: function (info) {
+            console.log(info)
+            this.showPopup = true;
         },
-      ],
-      arcgisData: {
-        mode: "2D", // 模式 2D 3D
-        title: "宁夏地图", // 标题
-        center: [106.47423505799998, 37.767080068999974], // 初始中心点 106.230909, 38.487193
-        height: 654, // 3D地图初始相机高度
-        tilt: 65, // 俯视角
-        scale: 15000,
-      },
-      showPopup: false,
-    };
-  },
-  // 函数
-  methods: {
-    when: function() {
-      let jsonObj = dataService.get("arcgis-nx-fc1");
-      jsonObj.forEach(item => {
-        item.attributes.state = "dj";
-      });
-      let lineJsonObj = dataService.get("arcgis-nx-fc1-line");
-      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
+        popupBack: function () {
+            this.showPopup = false;
+        },
+        clickMapTool: function (index) {
+            this.mapToolIndex = index;
+        },
+    },
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
     },
-    clickMap: function(info) {
-      console.log(info);
-      this.showPopup = true;
+    beforeUpdate() {
+        // 数据更新前
     },
-    popupBack: function() {
-      this.showPopup = false;
+    updated() {
+        // 数据更新后
     },
-  },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-  },
-  beforeUpdate() {
-    // 数据更新前
-  },
-  updated() {
-    // 数据更新后
-  },
 };
 </script>
 
 <style lang="less" scoped>
-@titleHeight: 3.704vh;
+@titleHeight: 40px;
 
 .map-1 {
-  width: 100%;
-  height: calc(100vh - 90px);
-  display: flex;
-  flex-direction: column;
-
-  .btn-group-tabs {
-    display: flex;
-    flex-direction: row;
-  }
-
-  .panel-title {
     width: 100%;
-    background-color: fade(@darkgray, 40%);
-    margin-top: 1.481vh;
-    padding: 6px;
+    height: calc(100vh - 90px);
     display: flex;
-    align-items: center;
-
-    .panel-title-name {
-      color: @green;
-      display: flex;
-      align-items: center;
-      line-height: 0;
-      font-size: 0;
+    flex-direction: column;
 
-      i,
-      span {
-        margin: 0 0 0 1.481vh;
-        line-height: 0;
-        font-size: 13px;
-      }
+    .btn-group-tabs {
+        display: flex;
+        flex-direction: row;
     }
 
-    .sub-title-item {
-      display: flex;
-      align-items: center;
-      margin-left: 16px;
+    .panel-title {
+        width: 100%;
+        background-color: fade(@darkgray, 40%);
+        margin-top: 16px;
+        padding: 6px;
+        display: flex;
+        align-items: center;
 
-      .sub-title {
-        font-size: 13px;
-        margin-left: 6px;
-      }
+        .panel-title-name {
+            color: @green;
+            display: flex;
+            align-items: center;
+            line-height: 0;
+            font-size: 0;
 
-      .sub-count {
-        font-size: 13px;
-        font-weight: 500;
-      }
+            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;
+            }
 
-      img {
-        height: 31px;
-      }
+            .sub-count {
+                font-size: 13px;
+                font-weight: 500;
+            }
+            
+            img {
+                height: 31px;
+            }
+        }
     }
-  }
 
-  .panel-body {
-    flex-grow: 1;
-    background-color: fade(@darkgray, 20%);
-    padding: 0.741vh;
-    overflow: auto;
-    position: relative;
+    .panel-body {
+        flex-grow: 1;
+        background-color: fade(@darkgray, 20%);
+        padding: 8px;
+        overflow: auto;
+        position: relative;
 
-    .map-popup-panel {
-      width: 679px;
-      position: absolute;
-      left: 71px;
-      top: 22px;
+        .arcgis-layer {
+            z-index: 1;
+        }
 
-      .map-popup-panel-header {
-        width: 100%;
-        background: fade(#152221, 90%);
-        display: flex;
+        .map-popup-panel {
+            width: 760px;
+            position: absolute;
+            left: 71px;
+            top: 22px;
+            z-index: 2;
 
-        .map-popup-panel-title {
-          padding: 17px 24px;
-          font-size: @fontsize-s;
-          position: relative;
+            .map-popup-panel-header {
+                width: 100%;
+                background: fade(#152221, 90%);
+                display: flex;
 
-          &::before,
-          &::after {
-            position: absolute;
-            width: calc(50% - 6px);
-            bottom: 0;
-            border-bottom: 2px solid @green;
-          }
+                .map-popup-panel-title {
+                    padding: 17px 24px;
+                    font-size: @fontsize-s;
+                    position: relative;
 
-          &::before {
-            content: "";
-            left: 0;
-          }
+                    &::before,
+                    &::after {
+                        position: absolute;
+                        width: calc(50% - 6px);
+                        bottom: 0;
+                        border-bottom: 2px solid @green;
+                    }
 
-          &::after {
-            content: "";
-            right: 0;
-          }
+                    &::before {
+                        content: "";
+                        left: 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);
-          }
-        }
+                    &::after {
+                        content: "";
+                        right: 0;
+                    }
 
-        .map-popup-panel-date {
-          flex-grow: 1;
-          padding: 17px 24px;
-          font-size: @fontsize-s;
-          text-align: right;
-          border-bottom: 2px solid @green;
-        }
+                    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-back {
-          margin-left: auto;
-          width: 54px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          position: relative;
-          cursor: pointer;
+                .map-popup-panel-date {
+                    flex-grow: 1;
+                    padding: 17px 24px;
+                    font-size: @fontsize-s;
+                    text-align: right;
+                    border-bottom: 2px solid @green;
+                }
 
-          &::after {
-            content: "";
-            position: absolute;
-            left: 0;
-            height: 50%;
-            border-left: 1px solid @gray;
-            top: 25%;
-          }
+                .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-popup-panel-body {
-        background: fade(#152221, 75%);
-        border: 1px solid fade(@darkgray, 40);
-        border-top: 0px;
+        .map-tool {
+            position: absolute;
+            right: 22px;
+            top: 22px;
+            z-index: 2;
+            background: #152221AF;
+            padding: 18px 14px;
 
-        .table-form {
-          .text,
-          .unit {
-            font-weight: 400;
-          }
+            .m-btn {
+                width: 124px;
+                height: 44px;
+                background: #152221BF;
+                border: 1px solid #152221BF;
+                color: #FFFFFF;
+                transition: all .3s;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
 
-          .unit {
-            min-width: auto;
-          }
+                &:hover,
+                &.active {
+                    background: #05BB4C33;
+                    border: 1px solid #05BB4C;
+                    color: #05BB4C;
+                }
 
-          .value,
-          .unit {
-            text-align: left;
-          }
+                +.m-btn {
+                    margin-top: 16px;
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>

src/views/WindSite/pages/Map1.vue

@@ -59,7 +59,10 @@
         <div class="panel-body">
             <arcgis @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap">
                 <template v-slot:test>
-                    <img :src="tempImg" style="width: 800px; height: 700px;">
+                    <div class="panel-box">
+                        <!-- <div class="panel-item" v-for="index of 80" :key="index"></div> -->
+                        <img :src="tempImg" style="width: 800px; height: 700px;">
+                    </div>
                 </template>
             </arcgis>
         </div>
@@ -336,5 +339,21 @@ export default {
             }
         }
     }
+
+    .panel-box {
+        width: 800px;
+        display: flex;
+        flex-wrap: wrap;
+
+        .panel-item {
+            width: 100px;
+            height: 100px;
+            padding: 20px;
+            background: #536268B8;
+            margin-top: -20px;
+            margin-left: -20px;
+        }
+
+    }
 }
 </style>