更新内容:

1. 添加部分健康管理页面
2. 添加风场地理位置页面
3. UI优化调整及问题修改

src/App.vue

@@ -307,7 +307,7 @@ body {
     height: calc(100vh - @headerHeight);
     top: @headerHeight;
     background-color: fade(#192a26, 75%);
-    z-index: 1;
+    z-index: 99;
     opacity: 0;
     transition: opacity 0.2s;
     transition-timing-function: ease-in;

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

@@ -0,0 +1,256 @@
+[
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "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
+                    ]
+                ]
+            ]
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 1,
+            "fc_code": "fc01",
+            "width": 3
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "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": [
+                [
+                    [
+                        106.47456765200002,
+                        37.767809629
+                    ],
+                    [
+                        106.47378444700001,
+                        37.76765942600002
+                    ],
+                    [
+                        106.47127389899998,
+                        37.768507004000014
+                    ],
+                    [
+                        106.46947145500002,
+                        37.76905417400002
+                    ]
+                ]
+            ]
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 2,
+            "fc_code": "fc01",
+            "width": 3
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "paths": [
+                [
+                    [
+                        106.469321251,
+                        37.76809930799999
+                    ],
+                    [
+                        106.47069454199999,
+                        37.76863574999999
+                    ]
+                ]
+            ]
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 3,
+            "fc_code": "fc01",
+            "width": 3
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "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
+                    ]
+                ]
+            ]
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 4,
+            "fc_code": "fc01",
+            "width": 3
+        },
+        "popupTemplate": null
+    }
+]

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

@@ -0,0 +1,189 @@
+[
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 106.47947073,
+            "y": 37.76491284399998
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 1,
+            "fc_code": "fc01",
+            "code": "syz",
+            "type": "升压站"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 106.478161812,
+            "y": 37.769397497
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 2,
+            "fc_code": "fc01",
+            "code": "A01",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 106.47457838100001,
+            "y": 37.76784181599999
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 401,
+            "fc_code": "fc01",
+            "code": "A02",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 106.47423505799998,
+            "y": 37.767080068999974
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 402,
+            "fc_code": "fc01",
+            "code": "A03",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 106.47315144499998,
+            "y": 37.765030861000014
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 403,
+            "fc_code": "fc01",
+            "code": "A04",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 106.46861314799997,
+            "y": 37.76419401200002
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 404,
+            "fc_code": "fc01",
+            "code": "A05",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 106.46949291200002,
+            "y": 37.76907563200001
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 405,
+            "fc_code": "fc01",
+            "code": "A06",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 106.469321251,
+            "y": 37.76813149499998
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 406,
+            "fc_code": "fc01",
+            "code": "A07",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 106.47117734,
+            "y": 37.76058912299999
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 407,
+            "fc_code": "fc01",
+            "code": "A08",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 106.463967562,
+            "y": 37.76771307000001
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 408,
+            "fc_code": "fc01",
+            "code": "A09",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    },
+    {
+        "geometry": {
+            "spatialReference": {
+                "wkid": 4326
+            },
+            "x": 106.46254062700001,
+            "y": 37.760556936
+        },
+        "symbol": null,
+        "attributes": {
+            "objectid": 409,
+            "fc_code": "fc01",
+            "code": "A10",
+            "type": "风场"
+        },
+        "popupTemplate": null
+    }
+]

src/assets/icon/svg/指南针.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
+	 height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g id="渐变">
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#000" opacity="0" d="M100.523,18.655c44.661,0,80.865,36.205,80.865,80.866
+		c0,44.66-36.204,80.865-80.865,80.865c-44.661,0-80.865-36.205-80.865-80.865C19.658,54.86,55.863,18.655,100.523,18.655z"/>
+</g>
+<g id="图层_2">
+	<g>
+		<g>
+			<path fill-rule="evenodd" clip-rule="evenodd" fill="#606769" opacity="0.75" d="M100.523,56.301c-23.869,0-43.22,19.349-43.22,43.22
+				c0,23.869,19.351,43.219,43.22,43.219c23.87,0,43.22-19.35,43.22-43.219C143.743,75.65,124.394,56.301,100.523,56.301z
+				 M100.954,139.082c-21.765,0-39.414-17.648-39.414-39.416c0-21.77,17.649-39.418,39.414-39.418
+				c21.772,0,39.417,17.648,39.417,39.418C140.371,121.434,122.727,139.082,100.954,139.082z"/>
+		</g>
+	</g>
+</g>
+<g id="图层_3">
+	<g>
+		<g>
+			<path fill-rule="evenodd" clip-rule="evenodd" fill="#05BB4C" d="M100.523,18.655c-44.661,0-80.865,36.205-80.865,80.866
+				c0,44.66,36.205,80.865,80.865,80.865c44.661,0,80.865-36.205,80.865-80.865C181.389,54.86,145.185,18.655,100.523,18.655z
+				 M101.156,173.509c-40.862,0-73.988-33.126-73.988-73.987c0-40.863,33.126-73.989,73.988-73.989
+				c40.862,0,73.988,33.125,73.988,73.989C175.145,140.383,142.019,173.509,101.156,173.509z"/>
+		</g>
+	</g>
+</g>
+<g id="图层_4">
+	<g>
+		<g>
+			<path fill-rule="evenodd" clip-rule="evenodd" fill="#05BB4C" opacity="0.2" d="M100.582,4.724h-0.118c-52.356,0-94.797,42.441-94.797,94.798
+				c0,52.355,42.441,94.797,94.797,94.797h0.118c52.356,0,94.798-42.441,94.798-94.797C195.38,47.165,152.938,4.724,100.582,4.724z
+				 M101.169,189.813c-49.76,0-90.1-40.338-90.1-90.095c0-49.76,40.34-90.1,90.1-90.1c49.757,0,90.095,40.34,90.095,90.1
+				C191.264,149.475,150.926,189.813,101.169,189.813z"/>
+		</g>
+	</g>
+</g>
+<g id="图层_1">
+	<polyline fill="#606769" points="59.177,142.682 113.678,116.092 84.673,87.663 	"/>
+</g>
+<g id="图层_7">
+	<polygon fill="#BD3338" points="139.496,60.156 114.004,115.172 85.004,86.745 	"/>
+</g>
+</svg>

src/assets/icon/svg_fill/compass.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
+	 height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+<g id="渐变">
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#000" opacity="0" d="M100.523,18.655c44.661,0,80.865,36.205,80.865,80.866
+		c0,44.66-36.204,80.865-80.865,80.865c-44.661,0-80.865-36.205-80.865-80.865C19.658,54.86,55.863,18.655,100.523,18.655z"/>
+</g>
+<g id="图层_2">
+	<g>
+		<g>
+			<path fill-rule="evenodd" clip-rule="evenodd" fill="#606769" opacity="0.75" d="M100.523,56.301c-23.869,0-43.22,19.349-43.22,43.22
+				c0,23.869,19.351,43.219,43.22,43.219c23.87,0,43.22-19.35,43.22-43.219C143.743,75.65,124.394,56.301,100.523,56.301z
+				 M100.954,139.082c-21.765,0-39.414-17.648-39.414-39.416c0-21.77,17.649-39.418,39.414-39.418
+				c21.772,0,39.417,17.648,39.417,39.418C140.371,121.434,122.727,139.082,100.954,139.082z"/>
+		</g>
+	</g>
+</g>
+<g id="图层_3">
+	<g>
+		<g>
+			<path fill-rule="evenodd" clip-rule="evenodd" fill="#05BB4C" d="M100.523,18.655c-44.661,0-80.865,36.205-80.865,80.866
+				c0,44.66,36.205,80.865,80.865,80.865c44.661,0,80.865-36.205,80.865-80.865C181.389,54.86,145.185,18.655,100.523,18.655z
+				 M101.156,173.509c-40.862,0-73.988-33.126-73.988-73.987c0-40.863,33.126-73.989,73.988-73.989
+				c40.862,0,73.988,33.125,73.988,73.989C175.145,140.383,142.019,173.509,101.156,173.509z"/>
+		</g>
+	</g>
+</g>
+<g id="图层_4">
+	<g>
+		<g>
+			<path fill-rule="evenodd" clip-rule="evenodd" fill="#05BB4C" opacity="0.2" d="M100.582,4.724h-0.118c-52.356,0-94.797,42.441-94.797,94.798
+				c0,52.355,42.441,94.797,94.797,94.797h0.118c52.356,0,94.798-42.441,94.798-94.797C195.38,47.165,152.938,4.724,100.582,4.724z
+				 M101.169,189.813c-49.76,0-90.1-40.338-90.1-90.095c0-49.76,40.34-90.1,90.1-90.1c49.757,0,90.095,40.34,90.095,90.1
+				C191.264,149.475,150.926,189.813,101.169,189.813z"/>
+		</g>
+	</g>
+</g>
+<g id="图层_1">
+	<polyline fill="#606769" points="59.177,142.682 113.678,116.092 84.673,87.663 	"/>
+</g>
+<g id="图层_7">
+	<polygon fill="#BD3338" points="139.496,60.156 114.004,115.172 85.004,86.745 	"/>
+</g>
+</svg>

src/assets/icon/svg_fill/fj.svg

@@ -0,0 +1,23 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+	<g>
+		<path fill="#FFFFFF" d="M99.388,105.25c8.441,0,15.283-6.767,15.283-15.083c0-8.333-6.833-15.075-15.283-15.075
+		s-15.283,6.75-15.283,15.083C84.104,98.483,90.938,105.25,99.388,105.25z M92.913,116.25L83.471,200h31.5l-9.475-83.742H92.913
+		V116.25z" />
+	</g>
+	<g>
+		<path fill="#FFFFFF" d="M86.346,109.158c-0.073,0.678-0.471,1.277-1.066,1.608C59.213,124.934,29.388,138.8,20.471,139
+		c-1.042-0.025-2.4-0.066-3.375-1.5c-0.292-0.461-0.442-0.996-0.434-1.541c0.792-4.918,8.25-9.934,19.3-18.226
+		c10.975-7.858,25.358-17.108,39.125-25.192c0.955-0.581,2.201-0.278,2.782,0.677c0.144,0.236,0.237,0.499,0.276,0.773
+		c0.743,5.239,3.407,10.015,7.475,13.4C86.138,107.816,86.412,108.492,86.346,109.158z" />
+		<path fill="#FFFFFF" d="M92.22,71.033c-1.074,0.387-2.258-0.17-2.645-1.244c-0.081-0.224-0.122-0.459-0.122-0.697
+		c0.392-24.508,2.475-50,5.441-61.65c1.309-3.75,1.292-6.617,5.092-7.442c3.833,0.833,3.783,3.684,5.1,7.442
+		c1.017,3.908,1.9,9.292,2.642,15.725c1.525,12.792,2.566,29.616,2.809,45.917c0.001,0.676-0.329,1.311-0.884,1.699
+		c-0.336,0.254-0.746,0.389-1.166,0.384c-0.251,0.002-0.5-0.043-0.733-0.134c-2.479-0.952-5.11-1.451-7.767-1.475
+		C97.27,69.559,94.67,70.117,92.22,71.033L92.22,71.033z" />
+		<path fill="#FFFFFF" d="M163.604,119.332c-12.719-9.203-25.857-17.813-39.374-25.799c-0.587-0.35-1.31-0.381-1.925-0.083
+		c-0.615,0.271-1.052,0.836-1.158,1.5c-0.886,5.22-3.695,9.918-7.875,13.166c-0.533,0.42-0.823,1.074-0.775,1.75
+		c0.05,0.668,0.45,1.275,1.041,1.634c26.25,14.267,57.268,29.524,66.15,29.75c0.967-0.024,2.283-0.158,3.233-1.476
+		c0.267-0.469,0.407-1,0.408-1.541C182.537,133.341,174.862,127.999,163.604,119.332L163.604,119.332z" />
+		<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="5s" type="rotate" from="0 99 90" to="360 99 90" repeatCount="indefinite" />
+	</g>
+</svg>

src/assets/styles/color.less

@@ -15,13 +15,17 @@
 }
 
 .bg-pink {
-    background: @pink;
+  background: @pink;
 }
 
 .blue {
   color: @blue;
 }
 
+.darkblue {
+  color: @darkBlue2;
+}
+
 .yellow {
   color: @yellow;
 }
@@ -57,3 +61,11 @@
 .gary-l {
   color: @gray-l;
 }
+
+.pink {
+  color: @pink;
+}
+
+.white {
+    color: @white;
+}

src/assets/styles/common/color.less

@@ -5,7 +5,7 @@
 @darkBlue2: #1529E9;
 @darkgray: #606769;
 @gray: #606769;
-@gray-l: #b2bdc0;
+@gray-l: #B3BDC0;
 @black: #000000;
 @write: #ffffff;
 @ligntRed: #ff7a7f;

src/assets/styles/font.less

@@ -11,3 +11,7 @@
 .font-num {
   font-family: @font-family-num;
 }
+
+.font-cn {
+  font-family: "SourceHanSans";
+}

src/components/arcgis/arcgis.vue

@@ -0,0 +1,292 @@
+<template>
+    <div class="arcgis"></div>
+</template>
+
+<script>
+    import Map from "@arcgis/core/Map";
+    import Basemap from "@arcgis/core/Basemap";
+    import Graphic from "@arcgis/core/Graphic";
+    import SpatialReference from "@arcgis/core/geometry/SpatialReference";
+    import PictureMarkerSymbol from "@arcgis/core/symbols/PictureMarkerSymbol";
+    import MapView from "@arcgis/core/views/MapView";
+    import SceneView from "@arcgis/core/views/SceneView";
+    import MapImageLayer from "@arcgis/core/layers/MapImageLayer";
+    import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
+    import IdentifyParameters from "@arcgis/core/tasks/support/IdentifyParameters";
+    import "@arcgis/core/assets/esri/themes/light/main.css";
+
+    const mapUrl = "http://61.161.152.110:12345/arcgis/rest/services/NX_MAP_15/MapServer"; // ArcMap地址
+    // const mapUrl = "http://172.16.6.30:12345/arcgis/rest/services/NX_MAP_15/MapServer"; // ArcMap地址
+    let basemap = null;
+    let map = null;
+    let view = null;
+    let point_graphicsLayer = null;
+    let line_graphicsLayer = null;
+    let text_graphicsLayer = null;
+    let point_graphics = [];
+    let line_graphics = [];
+    let text_graphics = [];
+
+    export default {
+        // 名称
+        name: "arcgis",
+        // 使用组件
+        components: {},
+        // 传入参数
+        props: {
+            data: {
+                type: Object,
+                default: () => {
+                    return {
+                        mode: "2D", // 模式 2D 3D
+                        title: "宁夏地图", // 标题
+                        center: [106.230909, 38.487193], // 初始中心点
+                        height: 654, // 3D地图初始相机高度
+                        tilt: 65, // 俯视角
+                        scale: 128000, // 缩放
+                    }
+                },
+            }
+        },
+        // 自定义事件
+        emits: {
+            when: null, // 地图加载完成
+            clickMap: null, // 点击地图(可点击元素)
+        },
+        // 数据
+        data() {
+            return {
+                fanStateImgMapping: [{
+                        name: "待机",
+                        code: "dj",
+                        img: require("@assets/map/fan/green.png")
+                    },
+                    {
+                        name: "运行",
+                        code: "yx",
+                        img: require("@assets/map/fan/blue.png")
+                    },
+                    {
+                        name: "限电",
+                        code: "xd",
+                        img: require("@assets/map/fan/purple.png")
+                    },
+                    {
+                        name: "故障",
+                        code: "gz",
+                        img: require("@assets/map/fan/red.png")
+                    },
+                    {
+                        name: "检查",
+                        code: "jc",
+                        img: require("@assets/map/fan/orange.png")
+                    },
+                    {
+                        name: "离线",
+                        code: "lx",
+                        img: require("@assets/map/fan/black.png")
+                    },
+                    {
+                        name: "受累",
+                        code: "sl",
+                        img: require("@assets/map/fan/white.png")
+                    },
+                ],
+                syzImg: require("@assets/temp.png"),
+            }
+        },
+        // 函数
+        methods: {
+            // 初始化地图
+            initMap: function() {
+                basemap = new Basemap({
+                    // 底图
+                    baseLayers: [
+                        new MapImageLayer({
+                            url: mapUrl,
+                            title: this.data.title,
+                            spatialReference: SpatialReference.WGS84,
+                        }),
+                    ],
+                    title: this.data.title,
+                    spatialReference: SpatialReference.WGS84,
+                });
+                map = new Map({
+                    // 地图容器
+                    basemap: basemap,
+                });
+                if (this.data.mode == "3D") {
+                    view = new SceneView({
+                        // 3D显示图层
+                        map: map,
+                        center: this.data.center,
+                        camera: {
+                            position: {
+                                x: this.data.center[0], // lon
+                                y: this.data.center[1], // lat
+                                z: this.data.height, // elevation in meters
+                            },
+                            tilt: this.data.tilt,
+                        },
+                        container: this.$el,
+                    });
+                } else {
+                    view = new MapView({
+                        // 3D显示图层
+                        map: map,
+                        center: this.data.center,
+                        container: this.$el,
+                    });
+                }
+                view.scale = this.data.scale;
+                //去掉版权
+                view.ui._removeComponents(["attribution"]);
+                view.when(() => {
+                    this.when();
+                    this.$emit('when');
+                });
+            },
+            when: function() {
+                // 当地图加载完成
+                point_graphicsLayer = new GraphicsLayer({
+                    graphics: []
+                });
+                line_graphicsLayer = new GraphicsLayer({
+                    graphics: []
+                });
+                text_graphicsLayer = new GraphicsLayer({
+                    graphics: []
+                });
+                map.add(line_graphicsLayer);
+                map.add(point_graphicsLayer);
+                map.add(text_graphicsLayer);
+                view.on("click", (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 != null) {
+                            this.$emit('clickMap', result);
+                        }
+                    })
+                })
+            },
+            // 通过name或code获取img
+            getFanImg: function(nameOrState) {
+                const item = this.fanStateImgMapping.find(t => t.name == nameOrState || t.code ==
+                    nameOrState);
+                if (item) {
+                    return item.img;
+                } else {
+                    console.error(nameOrState, "对应的图片不存在");
+                    return "";
+                }
+            },
+            // 添加图片点
+            addImgPoint: function(jsonItem) {
+                let item = JSON.parse(JSON.stringify(jsonItem));
+                item.geometry.type = "point";
+                item.geometry.spatialReference = SpatialReference.WGS84;
+                item.symbol = {
+                    type: "picture-marker",
+                    url: item.attributes.type == "升压站" ? this.syzImg : this.getFanImg("dj"),
+                    width: item.attributes.type == "升压站" ? "96px" : "48px",
+                    height: item.attributes.type == "升压站" ? "96px" : "48px",
+                    xoffset: 0,
+                    yoffset: 18
+                };
+                let graphic = new Graphic(item);
+                point_graphics.push(graphic);
+                point_graphicsLayer.add(graphic);
+                this.addImgText(jsonItem);
+            },
+            // 添加图片文字
+            addImgText: function(jsonItem) {
+                let item = JSON.parse(JSON.stringify(jsonItem));
+                item.geometry.type = "point";
+                item.geometry.spatialReference = SpatialReference.WGS84;
+                item.symbol = {
+                    type: "text",
+                    color: "white",
+                    haloColor: "black",
+                    haloSize: "1px",
+                    text: item.attributes.code,
+                    xoffset: 0,
+                    yoffset: -10,
+                    font: {
+                        size: 12,
+                        // family: "Josefin Slab",/
+                        weight: "bold"
+                    }
+                };
+                let graphic = new Graphic(item);
+                text_graphics.push(graphic);
+                text_graphicsLayer.add(graphic);
+            },
+            // 添加线段
+            addLine: function(jsonItem) {
+                let item = JSON.parse(JSON.stringify(jsonItem));
+                item.geometry.type = "polyline";
+                item.geometry.spatialReference = SpatialReference.WGS84;
+                item.symbol = {
+                    type: "simple-line",
+                    color: "#05bb4c",
+                    width: item.attributes.width
+                }
+                let graphic = new Graphic(item);
+                line_graphics.push(graphic);
+                line_graphicsLayer.add(graphic);
+            },
+            addFanByJson: function(jsonObj, lineJsonObj) {
+                jsonObj.forEach(item => {
+                    this.addImgPoint(item);
+                });
+                lineJsonObj.forEach(item => {
+                    this.addLine(item);
+                });
+            },
+            goto: function(point) {
+                view.goTo({
+                    center: point
+                }).catch(function(error) {
+                    if (error.name != "AbortError") {
+                        console.error(error);
+                    }
+                });
+            }
+        },
+        // 生命周期钩子
+        beforeCreate() {
+            // 创建前
+        },
+        created() {
+            // 创建后
+        },
+        beforeMount() {
+            // 渲染前
+        },
+        mounted() {
+            // 渲染后
+            this.initMap();
+        },
+        beforeUpdate() {
+            // 数据更新前
+        },
+        updated() {
+            // 数据更新后
+        },
+    }
+</script>
+
+<style lang="less">
+    .arcgis {
+        width: 100%;
+        height: 100%;
+    }
+</style>

src/components/chart/bar/hover-bar-chart.vue

@@ -184,7 +184,6 @@ export default {
             fontSize: util.vh(16),
           },
           formatter: function(param) {
-            console.log(param);
             let marker = '<span style="display:inline-block;margin-right:0.370vh;border-radius:0.926vh;width:0.926vh;height:0.926vh;background-color:' + partten.getColor("green") + ';"></span>';
             return param.name + "<br >" + marker + param.seriesName + "：" + param.value;
           },

src/components/chart/bar/list-bar-chart.vue

@@ -45,6 +45,10 @@ export default {
       type: Number,
       default: 150,
     },
+    colors: {
+      type: Array,
+      default: () => ["green", "purple"],
+    },
   },
   data() {
     return {
@@ -61,6 +65,9 @@ export default {
   },
   methods: {
     initChart() {
+      let color1 = this.colors[0];
+      let color2 = this.colors[1];
+
       let option = {
         xAxis: {
           max: this.total,
@@ -100,8 +107,8 @@ export default {
           },
         ],
         series: [
+          // 内
           {
-            // 内
             type: "bar",
             barWidth: 10,
             // legendHoverLink: false,
@@ -120,11 +127,11 @@ export default {
                       colorStops: [
                         {
                           offset: 0,
-                          color: partten.getColor("green"), // 0% 处的颜色
+                          color: partten.getColor(color1), // 0% 处的颜色
                         },
                         {
                           offset: 1,
-                          color: partten.getColor("green"), // 100% 处的颜色
+                          color: partten.getColor(color1), // 100% 处的颜色
                         },
                       ],
                     };
@@ -138,11 +145,11 @@ export default {
                       colorStops: [
                         {
                           offset: 0,
-                          color: partten.getColor("purple"), // 0% 处的颜色
+                          color: partten.getColor(color2), // 0% 处的颜色
                         },
                         {
                           offset: 1,
-                          color: partten.getColor("purple"), // 100% 处的颜色
+                          color: partten.getColor(color2), // 100% 处的颜色
                         },
                       ],
                     };
@@ -156,11 +163,11 @@ export default {
                       colorStops: [
                         {
                           offset: 0,
-                          color: partten.getColor("green"), // 0% 处的颜色
+                          color: partten.getColor(color1), // 0% 处的颜色
                         },
                         {
                           offset: 1,
-                          color: partten.getColor("green"), // 100% 处的颜色
+                          color: partten.getColor(color1), // 100% 处的颜色
                         },
                       ],
                     };
@@ -175,24 +182,34 @@ export default {
               normal: {
                 show: true,
                 position: [0, util.vh("-20")],
-                formatter: "{b}",
+                formatter: function(param) {
+                  return param.data.name;
+                },
                 textStyle: {
                   color: "#7a8385",
                   fontSize: util.vh("14"),
                 },
+                rich: {
+                  c1: {
+                    color: partten.getColor(color1),
+                  },
+                  c2: {
+                    color: partten.getColor(color2),
+                  },
+                },
               },
             },
             data: this.list,
             z: 1,
             animationEasing: "elasticOut",
           },
+          // 三角
           {
-            // 三角
             type: "pictorialBar",
             symbolPosition: "end",
             data: this.list,
             symbol: "triangle",
-            symbolOffset: [0, -21],
+            symbolOffset: [0, -16],
             symbolSize: [10, 10],
             symbolRotate: 180,
             itemStyle: {
@@ -201,11 +218,11 @@ export default {
                 color: function(params) {
                   var color;
                   if (params.dataIndex == 0 || params.dataIndex == 2) {
-                    color = partten.getColor("green");
+                    color = partten.getColor(color1);
                   } else if (params.dataIndex == 1 || params.dataIndex == 3) {
-                    color = partten.getColor("purple");
+                    color = partten.getColor(color2);
                   } else {
-                    color = partten.getColor("green");
+                    color = partten.getColor(color1);
                   }
                   return color;
                 },
@@ -214,8 +231,8 @@ export default {
               },
             },
           },
+          // 分隔
           {
-            // 分隔
             type: "pictorialBar",
             itemStyle: {
               normal: {
@@ -235,8 +252,8 @@ export default {
             z: 2,
             animationEasing: "elasticOut",
           },
+          // 外边框
           {
-            // 外边框
             type: "pictorialBar",
             symbol: "rect",
             symbolBoundingData: this.total,
@@ -265,7 +282,7 @@ export default {
                     lineHeight: util.vh(20),
                   },
                   gm: {
-                    backgroundColor: partten.getColor("green"),
+                    backgroundColor: partten.getColor(color1),
                     width: util.vh(8),
                     height: util.vh(8),
                     lineHeight: util.vh(20),
@@ -273,7 +290,7 @@ export default {
                     borderRadius: [50, 50, 50, 50],
                   },
                   pm: {
-                    backgroundColor: partten.getColor("purple"),
+                    backgroundColor: partten.getColor(color2),
                     width: util.vh(8),
                     height: util.vh(8),
                     lineHeight: util.vh(20),
@@ -288,6 +305,7 @@ export default {
             },
             data: this.datas,
           },
+          // 外框
           {
             type: "bar",
             name: "外框",
@@ -298,7 +316,7 @@ export default {
                 itemStyle: {
                   normal: {
                     color: "transparent",
-                    borderColor: partten.getColor("green"), // [, "#333"],
+                    borderColor: partten.getColor(color1), // [, "#333"],
                     borderWidth: 1, // 边框宽度
                     // barBorderRadius: 0, //圆角半径
                     opacity: 0.5,
@@ -315,7 +333,7 @@ export default {
                 itemStyle: {
                   normal: {
                     color: "transparent",
-                    borderColor: partten.getColor("purple"), // [, "#333"],
+                    borderColor: partten.getColor(color2), // [, "#333"],
                     opacity: 0.5,
                     borderWidth: 1, // 边框宽度
                     // barBorderRadius: 0, //圆角半径
@@ -332,7 +350,7 @@ export default {
                 itemStyle: {
                   normal: {
                     color: "transparent",
-                    borderColor: partten.getColor("green"), // [, "#333"],
+                    borderColor: partten.getColor(color1), // [, "#333"],
                     borderWidth: 1, // 边框宽度
                     opacity: 0.5,
                     // barBorderRadius: 0, //圆角半径
@@ -349,7 +367,7 @@ export default {
                 itemStyle: {
                   normal: {
                     color: "transparent",
-                    borderColor: partten.getColor("purple"), // [, "#333"],
+                    borderColor: partten.getColor(color2), // [, "#333"],
                     opacity: 0.7,
                     borderWidth: 1, // 边框宽度
                     // barBorderRadius: 0, //圆角半径
@@ -374,10 +392,12 @@ export default {
     this.id = "pie-chart-" + util.newGUID();
   },
   mounted() {
-    this.$el.style.width = this.width;
-    this.$el.style.height = this.height;
-    this.chart = echarts.init(this.$el);
-    this.initChart();
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.chart = echarts.init(this.$el);
+      this.initChart();
+    });
   },
   updated() {
     this.initChart();

src/components/chart/bar/multiple-bar-chart.vue

@@ -31,30 +31,6 @@ export default {
               text: "1日",
               value: 1,
             },
-            {
-              text: "2日",
-              value: 2,
-            },
-            {
-              text: "3日",
-              value: 1,
-            },
-            {
-              text: "4日",
-              value: 3,
-            },
-            {
-              text: "5日",
-              value: 3,
-            },
-            {
-              text: "6日",
-              value: 3,
-            },
-            {
-              text: "7日",
-              value: 3,
-            },
           ],
         },
         {
@@ -167,7 +143,7 @@ export default {
       default: () => ["(万KWh)", "(风速)"],
     },
   },
-  data () {
+  data() {
     return {
       id: "",
       chart: null,
@@ -175,17 +151,16 @@ export default {
     };
   },
   computed: {
-    datas () {
-      return this.list.map((t) => {
-        return t.value;
-      });
-    },
-    xdata () {
-      return this.list[0].value.map((t) => {
-        return t.text;
-      });
+    xdata() {
+      let result = [];
+      if (this.list && this.list.length > 0 && this.list[0].value.length > 0) {
+        result = this.list[0].value.map((t) => {
+          return t.text;
+        });
+      }
+      return result;
     },
-    ydata () {
+    ydata() {
       let result = [];
       this.units.forEach((value, index) => {
         let data = null;
@@ -213,6 +188,7 @@ export default {
               formatter: "{value}",
               fontSize: util.vh(14),
             },
+
             //分格线
             splitLine: {
               show: false,
@@ -225,24 +201,25 @@ export default {
 
       return result;
     },
-    series () {
+    series() {
       let result = [];
-      this.list.forEach((value, index) => {
-        result.push({
-          name: value.title,
-          type: "bar",
-          yAxisIndex: value.yAxisIndex,
-          data: value.value.map((t) => {
-            return t.value;
-          }),
+      if (this.list && this.list.length > 0) {
+        this.list.forEach((value, index) => {
+          result.push({
+            name: value.title,
+            type: "bar",
+            yAxisIndex: value.yAxisIndex,
+            data: value.value.map((t) => {
+              return t.value;
+            }),
+          });
         });
-      });
-
+      }
       return result;
     },
   },
   methods: {
-    initChart () {
+    initChart() {
       let option = {
         color: this.color,
         tooltip: {
@@ -252,7 +229,7 @@ export default {
             color: "#fff",
             fontSize: util.vh(16),
           },
-          formatter: function (param) {
+          formatter: function(param) {
             return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
           },
         },
@@ -281,21 +258,20 @@ export default {
       this.chart.setOption(option);
     },
   },
-  created () {
+  created() {
     this.$nextTick(() => {
       this.id = "pie-chart-" + util.newGUID();
     });
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
       this.chart = echarts.init(this.$el);
       this.initChart();
     });
-
   },
-  updated () {
+  updated() {
     this.$nextTick(() => {
       this.initChart();
     });

src/components/chart/bar/single-bar-chart.vue

@@ -0,0 +1,395 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "percent-pie",
+  componentName: "percent-pie",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "18.519vh",
+    },
+    //  传入数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          name: "当日预测电量",
+          value: 103.62,
+        },
+        {
+          name: "实际发电量",
+          value: 98.62,
+        },
+        {
+          name: "当月预测电量",
+          value: 113.27,
+        },
+        {
+          name: "实际发电量",
+          value: 136.72,
+        },
+      ],
+    },
+    total: {
+      type: Number,
+      default: 150,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {
+    datas() {
+      return this.list.map((t) => {
+        return t.value;
+      });
+    },
+  },
+  methods: {
+    initChart() {
+      let option = {
+        xAxis: {
+          max: this.total,
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        grid: {
+          left: util.vh(16),
+          top: util.vh(16), // 设置条形图的边s距
+          right: util.vh(80),
+          bottom: 0,
+        },
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            data: this.list,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            // 内
+            type: "bar",
+            barWidth: 10,
+            // legendHoverLink: false,
+            // silent: true,
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  var color;
+                  if (params.dataIndex == 0 || params.dataIndex == 2) {
+                    color = {
+                      type: "linear",
+                      x: 0,
+                      y: 0,
+                      x2: 1,
+                      y2: 0,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: partten.getColor("green"), // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: partten.getColor("green"), // 100% 处的颜色
+                        },
+                      ],
+                    };
+                  } else if (params.dataIndex == 1 || params.dataIndex == 3) {
+                    color = {
+                      type: "linear",
+                      x: 0,
+                      y: 0,
+                      x2: 1,
+                      y2: 0,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: partten.getColor("purple"), // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: partten.getColor("purple"), // 100% 处的颜色
+                        },
+                      ],
+                    };
+                  } else {
+                    color = {
+                      type: "linear",
+                      x: 0,
+                      y: 0,
+                      x2: 1,
+                      y2: 0,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: partten.getColor("green"), // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: partten.getColor("green"), // 100% 处的颜色
+                        },
+                      ],
+                    };
+                  }
+                  return color;
+                },
+                shadowBlur: 3,
+                shadowColor: "rgba(255, 255, 255, 0.70)",
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                position: [0, util.vh("-20")],
+                formatter: "{b}",
+                textStyle: {
+                  color: "#7a8385",
+                  fontSize: util.vh("14"),
+                },
+              },
+            },
+            data: this.list,
+            z: 1,
+            animationEasing: "elasticOut",
+          },
+          {
+            // 三角
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.list,
+            symbol: "triangle",
+            symbolOffset: [0, -16],
+            symbolSize: [10, 10],
+            symbolRotate: 180,
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function(params) {
+                  var color;
+                  if (params.dataIndex == 0 || params.dataIndex == 2) {
+                    color = partten.getColor("green");
+                  } else if (params.dataIndex == 1 || params.dataIndex == 3) {
+                    color = partten.getColor("purple");
+                  } else {
+                    color = partten.getColor("green");
+                  }
+                  return color;
+                },
+                shadowBlur: 2,
+                shadowColor: "rgba(255, 255, 255, 0.80)",
+              },
+            },
+          },
+          {
+            // 分隔
+            type: "pictorialBar",
+            itemStyle: {
+              normal: {
+                color: "#20314f",
+              },
+            },
+            symbolRepeat: "fixed",
+            symbolMargin: 6,
+            symbol: "rect",
+            symbolClip: true,
+            symbolSize: [1, 10],
+            symbolPosition: "start",
+            symbolOffset: [10, -1],
+            symbolBoundingData: this.total,
+            symbolRotate: -15,
+            data: this.list,
+            z: 2,
+            animationEasing: "elasticOut",
+          },
+          {
+            // 外边框
+            type: "pictorialBar",
+            symbol: "rect",
+            symbolBoundingData: this.total,
+            itemStyle: {
+              normal: {
+                color: "none",
+              },
+            },
+            label: {
+              normal: {
+                formatter: (params) => {
+                  var text;
+                  if (params.dataIndex == 0 || params.dataIndex == 2) {
+                    text = "{gm|}{f|  " + params.data + "}";
+                  } else if (params.dataIndex == 1 || params.dataIndex == 3) {
+                    text = "{pm|}{f|  " + params.data + "}";
+                  } else {
+                    text = "{gm|}{f|  " + params.data + "}";
+                  }
+                  return text;
+                },
+                rich: {
+                  f: {
+                    color: "#ffffff",
+                    fontSize: util.vh("14"),
+                    lineHeight: util.vh(20),
+                  },
+                  gm: {
+                    backgroundColor: partten.getColor("green"),
+                    width: util.vh(8),
+                    height: util.vh(8),
+                    lineHeight: util.vh(20),
+                    verticalAlign: "middle",
+                    borderRadius: [50, 50, 50, 50],
+                  },
+                  pm: {
+                    backgroundColor: partten.getColor("purple"),
+                    width: util.vh(8),
+                    height: util.vh(8),
+                    lineHeight: util.vh(20),
+                    verticalAlign: "middle",
+                    borderRadius: [50, 50, 50, 50],
+                  },
+                },
+                position: "right",
+                distance: 8, // 向右偏移位置
+                show: true,
+              },
+            },
+            data: this.datas,
+          },
+          {
+            type: "bar",
+            name: "外框",
+            barGap: "-120%", // 设置外框粗细
+            data: [
+              {
+                value: this.total,
+                itemStyle: {
+                  normal: {
+                    color: "transparent",
+                    borderColor: partten.getColor("green"), // [, "#333"],
+                    borderWidth: 1, // 边框宽度
+                    // barBorderRadius: 0, //圆角半径
+                    opacity: 0.5,
+                    label: {
+                      // 标签显示位置
+                      show: false,
+                      position: "top", // insideTop 或者横向的 insideLeft
+                    },
+                  },
+                },
+              },
+              {
+                value: this.total,
+                itemStyle: {
+                  normal: {
+                    color: "transparent",
+                    borderColor: partten.getColor("purple"), // [, "#333"],
+                    opacity: 0.5,
+                    borderWidth: 1, // 边框宽度
+                    // barBorderRadius: 0, //圆角半径
+                    label: {
+                      // 标签显示位置
+                      show: false,
+                      position: "top", // insideTop 或者横向的 insideLeft
+                    },
+                  },
+                },
+              },
+              {
+                value: this.total,
+                itemStyle: {
+                  normal: {
+                    color: "transparent",
+                    borderColor: partten.getColor("green"), // [, "#333"],
+                    borderWidth: 1, // 边框宽度
+                    opacity: 0.5,
+                    // barBorderRadius: 0, //圆角半径
+                    label: {
+                      // 标签显示位置
+                      show: false,
+                      position: "top", // insideTop 或者横向的 insideLeft
+                    },
+                  },
+                },
+              },
+              {
+                value: this.total,
+                itemStyle: {
+                  normal: {
+                    color: "transparent",
+                    borderColor: partten.getColor("purple"), // [, "#333"],
+                    opacity: 0.7,
+                    borderWidth: 1, // 边框宽度
+                    // barBorderRadius: 0, //圆角半径
+                    label: {
+                      // 标签显示位置
+                      show: false,
+                      position: "top", // insideTop 或者横向的 insideLeft
+                    },
+                  },
+                },
+              },
+            ],
+            barWidth: 14,
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+      debugger
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/chart/combination/bar-line-chart.vue

@@ -85,10 +85,7 @@ export default {
               color: partten.getColor("gray"),
             },
             axisLine: {
-              lineStyle: {
-                color: "#96A4F4",
-              },
-              width: 5,
+              show: false,
             },
             axisTick: {
               show: false,

src/components/chart/combination/vertival-bar-line-chart.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "multiple-bar-chart",
+  componentName: "multiple-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "800px",
+    },
+    // 传入数据
+    bardata: {
+      type: Object,
+      default: () => {
+        return {
+          area: ["风场1", "风场2", "风场3", "风场4", "风场5", "风场6", "风场7", "风场8", "风场9"],
+          legend: ["实际电量", "计划检修损失", "非计划检修损失", "限电损失", "受累损失", "性能损失"],
+          data: [
+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          ],
+        };
+      },
+    },
+    lineData: {
+      type: Array,
+      default: () => [200, 350, 400, 500, 600, 700, 800, 900, 1200],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["健康趋势", "风机健康状态数量"],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
+    };
+  },
+  methods: {
+    initChart() {
+      let option = {
+        color: this.color,
+        grid: {
+          left: 40,
+          right: 16,
+          bottom: 16,
+          top: 40,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+          formatter: function(param) {
+            return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              color: partten.getColor("gray"),
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            data: this.bardata.area,
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: this.units[0],
+            axisLabel: {
+              formatter: "{value} ",
+              color: partten.getColor("gray"),
+            },
+            axisLine: {
+              type: "dashed",
+              lineStyle: {
+                color: partten.getColor("gray"),
+              },
+              width: 5,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                dashOffset: 10,
+                color: partten.getColor("gray") + 80,
+              },
+            },
+          },
+          {
+            type: "value",
+            name: this.units[1],
+            axisLabel: {
+              formatter: "{value} ",
+              color: partten.getColor("gray"),
+              align: "left",
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: [],
+      };
+
+      option.series.push({
+        name: this.units[0],
+        type: "line",
+        data: this.lineData,
+        smooth: false, //平滑展示
+        yAxisIndex: 0,
+        lineStyle: {
+          color: partten.getColor("green"),
+        },
+        itemStyle: {
+          color: partten.getColor("green"),
+        },
+      });
+
+      for (var i = 0; i < this.bardata.legend.length; i++) {
+        option.series.push({
+          name: this.bardata.legend[i],
+          type: "bar",
+          stack: "总量",
+          yAxisIndex: 1,
+          //   barWidth: "60%",
+          label: {
+            show: false,
+            position: "insideRight",
+          },
+          data: this.bardata.data[i],
+        });
+      }
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.chart = echarts.init(this.$el);
+      this.initChart();
+    });
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

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

@@ -196,7 +196,6 @@ export default {
             fontSize: util.vh(16),
           },
           formatter: function(param) {
-            console.log(param);
             return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
           },
         },

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

@@ -215,25 +215,20 @@ export default {
       default: () => ["(MW)", "(风速)"],
     },
   },
-  data () {
+  data() {
     return {
       id: "",
       chart: null,
-      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
+      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338", "#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
     };
   },
   computed: {
-    datas () {
-      return this.list.map((t) => {
-        return t.value;
-      });
-    },
-    xdata () {
+    xdata() {
       return this.list[0].value.map((t) => {
         return t.text;
       });
     },
-    series () {
+    series() {
       let result = [];
 
       this.list.forEach((value, index) => {
@@ -280,7 +275,7 @@ export default {
 
       return result;
     },
-    yAxis () {
+    yAxis() {
       let result = [];
       this.units.forEach((value, index) => {
         result.push({
@@ -290,10 +285,14 @@ export default {
             formatter: "{value}",
             fontSize: util.vh(14),
           },
+          axisLine: {
+            show: false,
+          },
           //分格线
           splitLine: {
+            show: index == 0,
             lineStyle: {
-              color: "#999",
+              color: partten.getColor("gray"),
               type: "dashed",
             },
           },
@@ -304,7 +303,7 @@ export default {
     },
   },
   methods: {
-    hexToRgba (hex, opacity) {
+    hexToRgba(hex, opacity) {
       let rgbaColor = "";
       let reg = /^#[\da-f]{6}$/i;
       if (reg.test(hex)) {
@@ -312,7 +311,7 @@ export default {
       }
       return rgbaColor;
     },
-    initChart () {
+    initChart() {
       let option = {
         color: this.color,
         tooltip: {
@@ -322,7 +321,7 @@ export default {
             color: "#fff",
             fontSize: util.vh(16),
           },
-          formatter: function (param) {
+          formatter: function(param) {
             console.log(param);
             return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
           },
@@ -344,6 +343,9 @@ export default {
                 color: "#333",
               },
             },
+            axisLine: {
+              show: false,
+            },
             data: this.xdata,
           },
         ],
@@ -354,16 +356,18 @@ export default {
       this.chart && option && this.chart.setOption(option);
     },
   },
-  created () {
+  created() {
     this.id = "pie-chart-" + util.newGUID();
   },
-  mounted () {
-    this.$el.style.width = this.width;
-    this.$el.style.height = this.height;
-    this.chart = echarts.init(this.$el);
-    this.initChart();
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.chart = echarts.init(this.$el);
+      this.initChart();
+    });
   },
-  updated () {
+  updated() {
     this.initChart();
   },
 };

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

@@ -0,0 +1,360 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "double-line-chart",
+  componentName: "double-line-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "50px",
+    },
+    title: {
+      type: String,
+      default: "风机",
+    },
+    // 传入数据
+    data: {
+      type: Array,
+      default: () => {
+        return [
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          1,
+          0,
+          0,
+          0,
+          0,
+          0,
+          1,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          1,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+          0,
+        ];
+      },
+    },
+    // 单位
+    color: {
+      type: String,
+      default: "green",
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      // 时间轴
+      xData: [
+        "00:00",
+        "00:15",
+        "00:30",
+        "00:45",
+        "01:00",
+        "01:15",
+        "01:30",
+        "01:45",
+        "02:00",
+        "02:15",
+        "02:30",
+        "02:45",
+        "03:00",
+        "03:15",
+        "03:30",
+        "03:45",
+        "04:00",
+        "04:15",
+        "04:30",
+        "04:45",
+        "05:00",
+        "05:15",
+        "05:30",
+        "05:45",
+        "06:00",
+        "06:15",
+        "06:30",
+        "06:45",
+        "07:00",
+        "07:15",
+        "07:30",
+        "07:45",
+        "08:00",
+        "08:15",
+        "08:30",
+        "08:45",
+        "09:00",
+        "09:15",
+        "09:30",
+        "09:45",
+        "10:00",
+        "10:15",
+        "10:30",
+        "10:45",
+        "11:00",
+        "11:15",
+        "11:30",
+        "11:45",
+        "12:00",
+        "12:15",
+        "12:30",
+        "12:45",
+        "13:00",
+        "13:15",
+        "13:30",
+        "13:45",
+        "14:00",
+        "14:15",
+        "14:30",
+        "14:45",
+        "15:00",
+        "15:15",
+        "15:30",
+        "15:45",
+        "16:00",
+        "16:15",
+        "16:30",
+        "16:45",
+        "17:00",
+        "17:15",
+        "17:30",
+        "17:45",
+        "18:00",
+        "18:15",
+        "18:30",
+        "18:45",
+        "19:00",
+        "19:15",
+        "19:30",
+        "19:45",
+        "20:00",
+        "20:15",
+        "20:30",
+        "20:45",
+        "21:00",
+        "21:15",
+        "21:30",
+        "21:45",
+        "22:00",
+        "22:15",
+        "22:30",
+        "22:45",
+        "23:00",
+        "23:15",
+        "23:30",
+        "23:45",
+      ],
+    };
+  },
+  computed: {
+    colorValue() {
+      return partten.getColor(this.color);
+    },
+  },
+  methods: {
+    initChart() {
+      let option = {
+        title: {
+          text: this.title,
+          textStyle: {
+            color: "#ffffffcc",
+            fontSize: 14,
+          },
+          left: 16,
+          top: 0,
+        },
+        grid: {
+          top: 40,
+          left: 16,
+          right: 16,
+          bottom: 32,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: this.xData,
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: partten.getColor("gray"),
+              },
+            },
+            axisLabel: {
+              show: true,
+              margin: 16,
+              interval: 7,
+            },
+            axisTick: {
+              show: false,
+              lineStyle: {
+                color: partten.getColor("gray"),
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitNumber: 1,
+            min: 0,
+            max: 1,
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                color: partten.getColor("gray"),
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "line",
+            data: this.data,
+            showAllSymbol: true,
+            symbol: "circle",
+            symbolSize: 10,
+            lineStyle: {
+              normal: {
+                color: this.colorValue,
+              },
+            },
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              color: this.colorValue,
+              shadowColor: this.colorValue,
+              shadowBlur: 4,
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/chart/other/Dashboard.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "Dashboard-chart",
+  componentName: "Dashboard-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    value: {
+      type: Number,
+      default: 50,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {},
+  methods: {
+    initChart() {
+      let option = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        series: [
+          {
+            name: "内部进度条",
+            type: "gauge",
+            // center: ['50%', '50%'],
+            radius: "80%",
+            z: 4,
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [this.value / 100, partten.getColor("green")],
+                  [1, partten.getColor("gray")],
+                ],
+                width: 8,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              formatter: function(value) {
+                if (value !== 0) {
+                  var num = Math.round(value);
+                  return parseInt(num).toFixed(0) + "";
+                } else {
+                  return 0;
+                }
+              },
+              offsetCenter: [0, "75%"],
+              textStyle: {
+                padding: [0, 0, 0, 0],
+                fontSize: 20,
+                fontWeight: "700",
+                color: partten.getColor("green"),
+              },
+            },
+            title: {
+              show: false,
+            },
+            data: [
+              {
+                name: this.value,
+                value: this.value,
+              },
+            ],
+            pointer: {
+              show: true,
+              length: "70%",
+              radius: "20%",
+              width: 2, //指针粗细
+              itemStyle: {
+                color: partten.getColor("green"),
+              },
+            },
+            animationDuration: 1500,
+          },
+          // 内圆
+          {
+            name: "内圆",
+            type: "pie",
+            hoverAnimation: false,
+            legendHoverLink: false,
+            radius: "8%",
+            z: 4,
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 0,
+              },
+              {
+                value: 10,
+                itemStyle: {
+                  normal: {
+                    color: "#161f1e",
+                  },
+                  emphasis: {
+                    color: "#161f1e",
+                  },
+                },
+              },
+            ],
+          },
+          // 圆环
+          {
+            name: "小圆形",
+            type: "pie",
+            hoverAnimation: false,
+            legendHoverLink: false,
+            radius: ["8%", "5%"],
+            z: 5,
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 0,
+              },
+              {
+                value: 10,
+                itemStyle: {
+                  normal: {
+                    color: partten.getColor("green"),
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: "外部刻度",
+            type: "gauge",
+            radius: "94%",
+            min: 0, //最小刻度
+            max: 100, //最大刻度
+            splitNumber: 4, //刻度数量
+            startAngle: 225,
+            endAngle: -45,
+            axisLine: {
+              show: false,
+            },
+            //仪表盘轴线
+            axisLabel: {
+              show: true,
+              distance: 16,
+              fontSize: 12,
+            },
+            //刻度标签。
+            axisTick: {
+              show: true,
+              splitNumber: 4,
+              lineStyle: {
+                color: partten.getColor("gray"), //用颜色渐变函数不起作用
+                width: 1,
+              },
+              length: 4,
+            },
+            //刻度样式
+            splitLine: {
+              show: false,
+            },
+            //分隔线样式
+            detail: {
+              show: false,
+            },
+            pointer: {
+              show: true,
+            },
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.chart = echarts.init(this.$el);
+      this.initChart();
+    });
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/chart/other/Dashboard2.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "Dashboard-chart",
+  componentName: "Dashboard-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    name: {
+      type: String,
+      default: "万KWH",
+    },
+    value: {
+      type: Number,
+      default: 50,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {},
+  methods: {
+    initChart() {
+      let value = this.value;
+      let option = {
+        grid: {
+          top: 8,
+          bottom: -16,
+          left: 8,
+          right: 8,
+        },
+        series: [
+          {
+            type: "gauge", //刻度轴表盘
+            radius: "115%", //刻度盘的大小
+            center: ["50%", "75%"],
+            startAngle: 180, //开始刻度的角度
+            endAngle: 0, //结束刻度的角度
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 8,
+                color: [
+                  [0, partten.getColor("gray")],
+                  [value / 100, partten.getColor("green")],
+                  [1, partten.getColor("gray")],
+                ],
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            title: {
+              show: true,
+              offsetCenter: [0, "-40%"],
+              textStyle: {
+                color: partten.getColor("gray"),
+                fontSize: util.vh(12),
+              },
+            },
+            detail: {
+              show: true,
+              offsetCenter: [0, "0%"],
+              color: "#ffffff",
+              formatter: function(params) {
+                return params;
+              },
+              textStyle: {
+                color: partten.getColor("green"),
+                fontSize: util.vh(16),
+              },
+            },
+            data: [
+              {
+                name: "万KWh",
+                value: value,
+              },
+            ],
+          },
+          {
+            type: "gauge",
+            radius: "115%",
+            center: ["50%", "75%"],
+            startAngle: 180,
+            endAngle: 0,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 1,
+                color: [
+                  [this.value / 100, partten.getColor("green")],
+                  [1, "#fff"],
+                ],
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            detail: { show: false },
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.chart = echarts.init(this.$el);
+      this.initChart();
+    });
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/chart/other/thermometer-chart.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "thermometer-chart",
+  componentName: "thermometer-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    value: {
+      type: Number,
+      default: 80,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {
+    barValue() {
+      return [this.value * 0.8 + 16];
+    },
+  },
+  methods: {
+    hexToRgba(hex, opacity) {
+      let rgbaColor = "";
+      let reg = /^#[\da-f]{6}$/i;
+      if (reg.test(hex)) {
+        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt("0x" + hex.slice(3, 5))},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+      }
+      return rgbaColor;
+    },
+    initChart() {
+      var mercuryColor = "#05BB4C";
+      var borderColor = "#B3BDC0";
+
+      let option = {
+        grid: {
+          top: 8,
+          bottom: 8,
+          left: 8,
+          right: 8,
+        },
+        yAxis: [
+          {
+            show: false,
+            position: "left",
+          },
+          {
+            show: false,
+            data: [],
+            min: 0,
+            max: 9,
+          },
+        ],
+        xAxis: [
+          {
+            show: false,
+            data: [],
+            max: 3,
+          },
+          {
+            show: false,
+            data: [],
+            max: 3,
+          },
+          {
+            show: false,
+            data: [],
+            max: 4,
+          },
+          {
+            show: false,
+            min: -35, //根据容器大小调整此处最小值和最大值，以正常显示刻度
+            max: 80,
+
+          },
+        ],
+        series: [
+          {
+            name: "条",
+            type: "bar",
+            xAxisIndex: 0,
+            data: this.barValue,
+            barWidth: 16,
+            itemStyle: {
+              normal: {
+                color: mercuryColor,
+                barBorderRadius: 100,
+                borderWidth: 8,
+                borderType: "dashed",
+                borderColor: "transparent",
+              },
+            },
+            z: 2,
+          },
+          {
+            name: "外框",
+            type: "bar",
+            xAxisIndex: 2,
+            barGap: "-100%",
+            data: [100],
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                color: "transparent",
+                barBorderRadius: 50,
+                borderWidth: 2,
+                borderColor: borderColor,
+              },
+            },
+            z: 0,
+          },
+          {
+            name: "刻度",
+            type: "bar",
+            yAxisIndex: 1,
+            xAxisIndex: 3,
+            label: {
+              normal: {
+                show: true,
+                position: "right",
+                distance: 8,
+                color: borderColor,
+                fontSize: 12,
+                formatter: function(params) {
+                  if (params.dataIndex == 1) {
+                    return "0%";
+                  } else if (params.dataIndex == 5) {
+                    return "50%";
+                  } else if (params.dataIndex == 9) {
+                    return "100%";
+                  } else {
+                    return "";
+                  }
+                },
+              },
+            },
+            barGap: "-100%",
+            data: [0, 10, 5, 10, 5, 10, 5, 10, 5, 10, 5],
+            barWidth: 2,
+            itemStyle: {
+              normal: {
+                color: borderColor,
+                barBorderRadius: 10,
+              },
+            },
+            z: 0,
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.chart = echarts.init(this.$el);
+      this.initChart();
+    });
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/chart/other/thermometer-v-chart.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "thermometer-chart",
+  componentName: "thermometer-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "60px",
+    },
+    value: {
+      type: Number,
+      default: 80,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {
+    barValue() {
+      return [this.value * 0.8 + 16];
+    },
+  },
+  methods: {
+    hexToRgba(hex, opacity) {
+      let rgbaColor = "";
+      let reg = /^#[\da-f]{6}$/i;
+      if (reg.test(hex)) {
+        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt("0x" + hex.slice(3, 5))},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+      }
+      return rgbaColor;
+    },
+    initChart() {
+      var mercuryColor = "#05BB4C";
+      var borderColor = "#B3BDC0";
+
+      let option = {
+        grid: {
+          top: 0,
+          bottom: 24,
+          left: 16,
+          right: 16,
+        },
+        xAxis: [
+          {
+            show: false,
+            position: "left",
+          },
+          {
+            show: false,
+            data: [],
+            min: 0,
+            max: 9,
+          },
+        ],
+        yAxis: [
+          {
+            show: false,
+            data: [],
+            max: 0,
+          },
+          {
+            show: false,
+            data: [],
+            max: 0,
+          },
+          {
+            show: false,
+            data: [],
+            max: 0,
+          },
+          {
+            show: false,
+            min: -5, //根据容器大小调整此处最小值和最大值，以正常显示刻度
+            max: 100,
+          },
+        ],
+        series: [
+          {
+            name: "条",
+            type: "bar",
+            yAxisIndex: 0,
+            data: this.barValue,
+            barWidth: 16,
+            itemStyle: {
+              normal: {
+                color: mercuryColor,
+                barBorderRadius: 100,
+                borderWidth: 8,
+                borderType: "dashed",
+                borderColor: "transparent",
+              },
+            },
+            z: 2,
+          },
+          {
+            name: "外框",
+            type: "bar",
+            yAxisIndex: 2,
+            barGap: "-100%",
+            data: [100],
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                color: "transparent",
+                barBorderRadius: 50,
+                borderWidth: 2,
+                borderColor: borderColor,
+              },
+            },
+            z: 0,
+          },
+          {
+            name: "刻度",
+            type: "bar",
+            xAxisIndex: 1,
+            yAxisIndex: 3,
+            label: {
+              normal: {
+                show: true,
+                position: "bottom",
+                distance: 8,
+                color: borderColor,
+                fontSize: 12,
+                formatter: function(params) {
+                  if (params.dataIndex == 1) {
+                    return "0%";
+                  } else if (params.dataIndex == 5) {
+                    return "50%";
+                  } else if (params.dataIndex == 9) {
+                    return "100%";
+                  } else {
+                    return "";
+                  }
+                },
+              },
+            },
+            barGap: "-100%",
+            data: [0, 10, 5, 10, 5, 10, 5, 10, 5, 10, 5],
+            barWidth: 2,
+            itemStyle: {
+              normal: {
+                color: borderColor,
+                barBorderRadius: 10,
+              },
+            },
+            z: 0,
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.chart = echarts.init(this.$el);
+      this.initChart();
+    });
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

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

@@ -0,0 +1,133 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "percent-pie",
+  componentName: "percent-pie",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "18.519vh",
+    },
+    // 百分比值
+    // 外部饼图数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          value: 310,
+          name: "邮件营销",
+        },
+        {
+          value: 234,
+          name: "联盟广告",
+        },
+        {
+          value: 335,
+          name: "视频广告",
+        },
+        {
+          value: 548,
+          name: "百度",
+        },
+        {
+          value: 351,
+          name: "谷歌",
+        },
+      ],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {},
+  methods: {
+    initChart() {
+      let option = {
+        color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(0,0,0,0.3)",
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+        },
+        grid: {
+          top: 8,
+          left: 8,
+          right: 8,
+          bottom: 8,
+        },
+        legend: {
+          icon: "circle",
+          orient: "vertical",
+          top: "center",
+          right: "0",
+          align: "left",
+          textStyle: {
+            color: "#fff",
+          },
+          itemGap: 8,
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "70%",
+            center: ["35%", "50%"],
+            data: this.list,
+            labelLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/chart/radar/radar-chart.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "radar-chart",
+  componentName: "radar-chart",
+  props: {
+    // 宽度 默认9.722vh
+    width: {
+      type: String,
+      default: "100%",
+    },
+    // 高度 默认9.722vh
+    height: {
+      type: String,
+      default: "7.4074vh",
+    },
+    // 标题
+    title: {
+      type: String,
+      default: "标题",
+    },
+    // 值
+    value: {
+      type: Object,
+      default: () => {
+          return {
+              indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+              data: [
+                  {
+                      value: [44200, 14200, 20000, 35000, 50000, 38000],
+                      name: "NAME"
+                  }
+              ],
+          }
+      },
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      lineStyles: [{
+          areaStyle: {
+            color: 'rgba(75,85,174, 0.9)'
+          }
+      }]
+    };
+  },
+  computed: {},
+  methods: {
+    initChart() {
+      let maxValue = -1;
+      this.value.data.forEach((item, index) => {
+          item.value.forEach(value => {
+              if (value > maxValue) {
+                  maxValue = value;
+              }
+          })
+          item.areaStyle = this.lineStyles[index % this.lineStyles.length].areaStyle
+      })
+      maxValue *= 1.5;
+      let indicator = [];
+      this.value.indicator.forEach(item => {
+          indicator.push({ name: item, max: maxValue })
+      })
+      let option = {
+        grid: {
+          left: 40,
+          right: 40,
+          bottom: 80,
+          top: 80,
+          containLabel: true,
+        },
+        radar: [
+          // 最低层 80
+          {
+            radius: "80%",
+            center: ["50%", "50%"],
+            splitNumber: 1,
+            nameGap: "10",
+            name: {
+                show: false,
+              textStyle: {
+                color: partten.getColor("gray") + 99,
+                fontSize: 12,
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                color: "transparent",
+              },
+            },
+            indicator: indicator,
+          },
+          // 次外层 70 - 80
+          {
+            radius: ["70%", "80%"],
+            center: ["50%", "50%"],
+            startAngle: 90,
+            splitNumber: 2,
+            name: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+                shadowBlur: 1,
+                shadowColor: "#fff",
+                shadowOffsetX: 0.5,
+                shadowOffsetY: 1,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray") + 40,
+                shadowColor: "#fff",
+                shadowBlur: 0,
+                shadowOffsetX: 0.5,
+                shadowOffsetY: 0.5,
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                color: "transparent",
+              },
+            },
+            indicator: indicator,
+          },
+          // 渐变层 40 - 70
+          {
+            radius: ["40%", "70%"],
+            center: ["50%", "50%"],
+            splitNumber: 1,
+            name: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray"),
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                shadowBlur: 4,
+                color: {
+                  type: "radial",
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0.5,
+                      color: "transparent", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: partten.getColor("green") + 60, // 100% 处的颜色
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+            },
+            indicator: indicator,
+          },
+          // 内层 0 - 40
+          {
+            radius: "40%",
+            center: ["50%", "50%"],
+            splitNumber: 1,
+            name: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray"),
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                shadowBlur: 4,
+                color: "transparent",
+              },
+            },
+            indicator: indicator,
+          },
+        ],
+        series: [
+            {
+                name: this.title,
+                 type: 'radar',
+                 data: this.value.data
+            }
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.chart = echarts.init(this.$el);
+      this.initChart();
+    });
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: auto;
+}
+</style>

src/components/coms/panel/panel.vue

@@ -69,7 +69,7 @@ export default {
 
   .panel-header {
     display: flex;
-    font-size: @fontsize;
+    font-size: @fontsize-s;
     padding-left: 1.185vh;
     background: rgba(255, 255, 255, 10%);
     line-height: 2.593vh;

src/components/coms/table/table.vue

@@ -2,12 +2,12 @@
   <table class="com-table">
     <thead>
       <tr>
-        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }">{{ col.name }}</th>
+        <th v-for="(col, index) of data.column" :key="index">{{ col.name }}</th>
       </tr>
     </thead>
     <tbody class="scroll">
       <tr v-for="(row, index) of data.data" :key="index">
-        <td v-for="(col, i) of data.column" :key="i" :class="{ light: col.is_light || row.is_light, num: col.is_num }" v-html="template(col, row[col.field])"></td>
+        <td v-for="(col, i) of data.column" :key="i" :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num }" v-html="template(col, row[col.field])" @mouseenter="hover(row, col)" @mouseleave="leave()"></td>
       </tr>
     </tbody>
   </table>
@@ -43,12 +43,20 @@ export default {
                 }
              */
     data: Object,
+    // hover 样式
+    showHover: {
+      type: Boolean,
+      default: true,
+    },
   },
   // 自定义事件
   emits: {},
   // 数据
   data() {
-    return {};
+    return {
+      hoverRow: -1,
+      hoverCol: -1,
+    };
   },
   // 函数
   methods: {
@@ -56,6 +64,16 @@ export default {
       if (!col.template) return data;
       else return col.template(data);
     },
+    hover(row, col) {
+      if (this.showHover) {
+        this.hoverRow = row;
+        this.hoverCol = col;
+      }
+    },
+    leave() {
+      this.hoverRow = -1;
+      this.hoverCol = -1;
+    },
   },
   // 生命周期钩子
   beforeCreate() {
@@ -128,7 +146,7 @@ export default {
         font-size: @fontsize-s;
 
         &.light {
-          color: @green;
+          color: @green !important;
         }
 
         &.num {

src/helper/partten.js

@@ -4,6 +4,8 @@ const color = [
     { key: "yellow", value: "#F8DE5B" },
     { key: "gray", value: "#606769" },
     { key: "purple", value: "#4B55AE" },
+    { key: "orange", value: "#e17e23" },
+    { key: "blue", value: "#1a93cf" },
 ];
 
 function getColor(key) {

src/router/index.js

@@ -53,6 +53,9 @@ const routes = [
     }, {
       path: 'map',
       component: () => import(/* webpackChunkName: "windsitemap" */ '../views/WindSite/pages/Map.vue'),
+    }, {
+      path: 'map1',
+      component: () => import(/* webpackChunkName: "windsitemap1" */ '../views/WindSite/pages/Map1.vue'),
     }]
   },
   {
@@ -93,6 +96,26 @@ const routes = [
     name: 'decision4',
     component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision4.vue'),
   },
+  {
+    path: '/health1',
+    name: 'health1',
+    component: () => import('../views/HealthControl/Health1.vue'),
+  },
+  {
+    path: '/health2',
+    name: 'health2',
+    component: () => import('../views/HealthControl/Health2.vue'),
+  },
+  {
+    path: '/health3',
+    name: 'health3',
+    component: () => import('../views/HealthControl/Health3.vue'),
+  },
+  {
+    path: '/health4',
+    name: 'health4',
+    component: () => import('../views/HealthControl/Health4.vue'),
+  },
 ]
 
 const router = createRouter({

src/views/Decision/Decision1.vue

@@ -91,7 +91,7 @@
               </div>
             </div>
           </template>
-          <bar-line-chart  :height="'calc(100vh - 200px)'"/>
+          <bar-line-chart :height="'calc(100vh - 200px)'" />
         </toolbar-panel>
       </el-col>
       <el-col :span="12" class="pd-l-8">
@@ -262,7 +262,7 @@ export default {
       height: calc(100vh - 24.5vh);
     }
     td {
-      color: #b2bdc0 !important;
+      color: #b2bdc0;
     }
   }
 }

src/views/Decision/Decision2.vue

@@ -226,7 +226,7 @@ export default {
 
     th,
     td {
-      color: #b2bdc0 !important;
+      color: #b2bdc0;
       &:nth-child(1) {
         width: 50px;
       }

src/views/Decision/Decision3.vue

@@ -247,7 +247,7 @@ export default {
       }
       th,
       td {
-        color: #b2bdc0 !important;
+        color: #b2bdc0;
         &:nth-child(1) {
           width: 32px;
         }
@@ -265,7 +265,7 @@ export default {
       }
       th,
       td {
-        color: #b2bdc0 !important;
+        color: #b2bdc0;
         padding: 0;
 
         &:nth-child(1) {

src/views/Decision/Decision4.vue

@@ -255,7 +255,7 @@ export default {
 
     th,
     td {
-      color: #b2bdc0 !important;
+      color: #b2bdc0;
       &:nth-child(1) {
         width: 50px;
       }

src/views/HealthControl/Health1.vue

@@ -0,0 +1,397 @@
+<template>
+  <div class="health-1">
+    <div class="selections mg-b-16">
+      <div class="item">未确认缺陷</div>
+      <div class="item">未确认缺陷</div>
+      <div class="item active">未确认缺陷</div>
+      <div class="item">未确认缺陷</div>
+    </div>
+    <div class="power-info mg-b-16">
+      <div class="info-tab">
+        <div class="tab active">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-wind-site'" />
+          </i>
+          <span> 24小时健康趋势 </span>
+        </div>
+        <div class="tab">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-wind-site'" />
+          </i>
+          <span> 7日健康趋势 </span>
+        </div>
+        <div class="tab">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-wind-site'" />
+          </i>
+          <span>30日健康趋势</span>
+        </div>
+        <div class="empty"></div>
+        <div class="tab">
+          <span>全部风场健康趋势</span>
+        </div>
+      </div>
+      <div class="info-chart">
+        <panel class="info-chart-panel" :title="'损失电量分析'">
+          <vertival-bar-line-chart :height="'310px'" />
+        </panel>
+      </div>
+    </div>
+    <div class="health-report">
+      <panel class="health-report-panel" :title="'健康报告'" :showLine="false">
+        <div class="actions mg-b-16">
+          <div class="item green">当日内推荐</div>
+          <div class="item purple">三日内推荐</div>
+          <div class="item gray">超三日推荐</div>
+        </div>
+        <div class="report-items">
+          <div class="item">
+            <div class="title">风机编号：QG01_04</div>
+            <div class="info">
+              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+              <p>推荐检修时间：2021-06-04 16:00:00</p>
+              <p>推荐时间对应风速：2.4</p>
+              <p>判断时间：2021-05-27 08:20:00</p>
+              <div class="actions mg-t-16">
+                <button class="btn success">
+                  <i class="fa fa-check"></i>
+                  提交
+                </button>
+                <button class="btn">
+                  <i class="fa fa-close"></i>
+                  取消
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">风机编号：QG01_04</div>
+            <div class="info">
+              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+              <p>推荐检修时间：2021-06-04 16:00:00</p>
+              <p>推荐时间对应风速：2.4</p>
+              <p>判断时间：2021-05-27 08:20:00</p>
+              <div class="actions mg-t-16">
+                <button class="btn success">
+                  <i class="fa fa-check"></i>
+                  提交
+                </button>
+                <button class="btn">
+                  <i class="fa fa-close"></i>
+                  取消
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">风机编号：QG01_04</div>
+            <div class="info">
+              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+              <p>推荐检修时间：2021-06-04 16:00:00</p>
+              <p>推荐时间对应风速：2.4</p>
+              <p>判断时间：2021-05-27 08:20:00</p>
+              <div class="actions mg-t-16">
+                <button class="btn success">
+                  <i class="fa fa-check"></i>
+                  提交
+                </button>
+                <button class="btn">
+                  <i class="fa fa-close"></i>
+                  取消
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">风机编号：QG01_04</div>
+            <div class="info">
+              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+              <p>推荐检修时间：2021-06-04 16:00:00</p>
+              <p>推荐时间对应风速：2.4</p>
+              <p>判断时间：2021-05-27 08:20:00</p>
+              <div class="actions mg-t-16">
+                <button class="btn success">
+                  <i class="fa fa-check"></i>
+                  提交
+                </button>
+                <button class="btn">
+                  <i class="fa fa-close"></i>
+                  取消
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">风机编号：QG01_04</div>
+            <div class="info">
+              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+              <p>推荐检修时间：2021-06-04 16:00:00</p>
+              <p>推荐时间对应风速：2.4</p>
+              <p>判断时间：2021-05-27 08:20:00</p>
+              <div class="actions mg-t-16">
+                <button class="btn success">
+                  <i class="fa fa-check"></i>
+                  提交
+                </button>
+                <button class="btn">
+                  <i class="fa fa-close"></i>
+                  取消
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">风机编号：QG01_04</div>
+            <div class="info">
+              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+              <p>推荐检修时间：2021-06-04 16:00:00</p>
+              <p>推荐时间对应风速：2.4</p>
+              <p>判断时间：2021-05-27 08:20:00</p>
+              <div class="actions mg-t-16">
+                <button class="btn success">
+                  <i class="fa fa-check"></i>
+                  提交
+                </button>
+                <button class="btn">
+                  <i class="fa fa-close"></i>
+                  取消
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="title">风机编号：QG01_04</div>
+            <div class="info">
+              <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+              <p>推荐检修时间：2021-06-04 16:00:00</p>
+              <p>推荐时间对应风速：2.4</p>
+              <p>判断时间：2021-05-27 08:20:00</p>
+              <div class="actions mg-t-16">
+                <button class="btn success">
+                  <i class="fa fa-check"></i>
+                  提交
+                </button>
+                <button class="btn">
+                  <i class="fa fa-close"></i>
+                  取消
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </panel>
+    </div>
+  </div>
+</template>
+
+<script>
+import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+export default {
+  setup() {},
+  components: { SvgIcon, Panel, VertivalBarLineChart },
+};
+</script>
+
+<style lang="less">
+.health-1 {
+  .selections {
+    display: flex;
+
+    .item {
+      flex: 0 0 128px;
+      text-align: center;
+      line-height: 33px;
+      margin-right: 8px;
+      color: @font-color;
+      font-size: @fontsize-s;
+      background: fade(@gray, 20);
+      border: 1px solid fade(@gray, 20);
+
+      &:hover,
+      &.active {
+        background: fade(@green, 20);
+        border: 1px solid @green;
+        color: @green;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .power-info {
+    display: flex;
+    .info-tab {
+      flex: 0 0 156px;
+      display: flex;
+      flex-direction: column;
+      height: 350px;
+      margin-right: 1.4815vh;
+
+      .tab {
+        position: relative;
+        flex: 0 0 auto;
+        text-align: center;
+        line-height: 33px;
+        margin-right: 8px;
+        color: @gray-l;
+        font-size: 12px;
+        background: fade(@gray, 20);
+        border: 1px solid fade(@gray, 20);
+
+        display: flex;
+        align-items: center;
+
+        i {
+          margin: 0 1.4815vh;
+          svg use {
+            fill: @gray-l;
+          }
+        }
+
+        &:hover,
+        &.active {
+          background: fade(@green, 20);
+          border: 1px solid @green;
+          color: @green;
+          cursor: pointer;
+          
+          i svg use {
+            fill: @green;
+          }
+        }
+
+        &.active::after {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -19px;
+          padding: 0;
+          border-bottom: 9px solid @green;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 10;
+          transform: rotate(90deg);
+        }
+
+        &.active::before {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -17px;
+          padding: 0;
+          border-bottom: 9px solid #063319;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 12;
+          transform: rotate(90deg);
+        }
+
+        & + .tab {
+          margin-top: 0.7407vh;
+        }
+
+        &:last-child {
+          text-align: center;
+          justify-content: center;
+        }
+      }
+
+      .empty {
+        flex: 1 0 auto;
+      }
+    }
+
+    .info-chart {
+      flex: 1 0 auto;
+    }
+  }
+
+  .health-report {
+    // 健康报告 按钮样式
+    .actions {
+      display: flex;
+
+      .item {
+        flex: 0 0 102px;
+        text-align: center;
+        line-height: 33px;
+        margin-right: 8px;
+        color: fade(@white, 75);
+        font-size: @fontsize-s;
+
+        &.green {
+          background: @green;
+        }
+
+        &.purple {
+          background: @purple;
+        }
+
+        &.gray {
+          background: @gray;
+        }
+      }
+    }
+
+    .report-items {
+      display: flex;
+      flex-wrap: wrap;
+
+      .item {
+        flex: 0 0 calc(100% / 6 - 16px);
+        margin-bottom: 16px;
+
+        & + .item {
+          margin-left: 16px;
+        }
+
+        &:nth-child(6n + 1) {
+          margin-left: 0px;
+        }
+
+        .title {
+          background: fade(@gray, 40);
+          // color: fade(@white, 75);
+          color: @gray-l;
+          line-height: 37px;
+          padding-left: 16px;
+          font-size: @fontsize-s;
+        }
+
+        .info {
+          background: fade(@gray, 20);
+          padding: 16px;
+          font-size: @fontsize-s;
+          color: @font-color;
+          line-height: 1.5;
+          p {
+            margin: 0;
+            line-height: 2;
+          }
+
+          .actions {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .success {
+              border-color: #05bb4c;
+              color: #05bb4c;
+              background: rgba(5, 187, 76, 0.2);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/HealthControl/Health2.vue

@@ -0,0 +1,724 @@
+<template>
+  <div class="health-2">
+    <div class="power-info mg-b-16">
+      <div class="info-tab">
+        <div class="tab active">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-wind-site'" />
+          </i>
+          <span> 24小时健康趋势 </span>
+        </div>
+        <div class="tab">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-wind-site'" />
+          </i>
+          <span> 7日健康趋势 </span>
+        </div>
+        <div class="tab">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-wind-site'" />
+          </i>
+          <span>30日健康趋势</span>
+        </div>
+        <div class="empty"></div>
+        <div class="tab">
+          <span>全部风场健康趋势</span>
+        </div>
+      </div>
+      <div class="info-chart">
+        <panel class="info-chart-panel" :title="'损失电量分析'">
+          <vertival-bar-line-chart :height="'310px'" />
+        </panel>
+      </div>
+    </div>
+    <div class="fc-info mg-b-16">
+      <div class="fc-item">
+        <div class="title">牛首山风场</div>
+        <div class="tags">
+          <div class="tag">
+            <i class="svg-icon svg-icon-gray-l svg-icon-lg">
+              <svg-icon :svgid="'svg-duoyun'" />
+            </i>
+          </div>
+          <div class="tag">
+            <div class="tag-title">实时风速</div>
+            <div class="tag-value">12.34<span class="unit">m/s</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">预测风速</div>
+            <div class="tag-value">12.34<span class="unit">m/s</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（优）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（良）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（差）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+        </div>
+        <div class="health-info">
+          <div class="title">
+            设备健康度
+            <div class="actions">
+              <div class="action active">
+                <i class="svg-icon svg-icon-sm">
+                  <svg-icon :svgid="'svg-wind-site'" />
+                </i>
+                比例
+              </div>
+              <div class="action">
+                <i class="svg-icon svg-icon-sm">
+                  <svg-icon :svgid="'svg-wind-site'" />
+                </i>
+                风机号
+              </div>
+            </div>
+          </div>
+          <div class="info-body">
+            <div class="proportion-info">
+              <thermometer-chart :height="'120px'" :width="'80px'" />
+              <dashboard :height="'150px'" :width="'150px'" />
+            </div>
+            <div class="device-list"></div>
+          </div>
+        </div>
+      </div>
+      <div class="fc-item">
+        <div class="title">牛首山风场</div>
+        <div class="tags">
+          <div class="tag">
+            <i class="svg-icon svg-icon-gray-l svg-icon-lg">
+              <svg-icon :svgid="'svg-duoyun'" />
+            </i>
+          </div>
+          <div class="tag">
+            <div class="tag-title">实时风速</div>
+            <div class="tag-value">12.34<span class="unit">m/s</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">预测风速</div>
+            <div class="tag-value">12.34<span class="unit">m/s</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（优）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（良）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（差）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+        </div>
+        <div class="health-info">
+          <div class="title">
+            设备健康度
+            <div class="actions">
+              <div class="action active">
+                <i class="svg-icon svg-icon-sm">
+                  <svg-icon :svgid="'svg-wind-site'" />
+                </i>
+                比例
+              </div>
+              <div class="action">
+                <i class="svg-icon svg-icon-sm">
+                  <svg-icon :svgid="'svg-wind-site'" />
+                </i>
+                风机号
+              </div>
+            </div>
+          </div>
+          <div class="info-body">
+            <div class="proportion-info" v-show="false">
+              <thermometer-chart :height="'120px'" :width="'80px'" />
+              <dashboard :height="'150px'" :width="'150px'" />
+            </div>
+            <div class="device-list">
+              <div class="item green">1号</div>
+              <div class="item purple">1号</div>
+              <div class="item orange">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+              <div class="item">1号</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fc-item">
+        <div class="title">牛首山风场</div>
+        <div class="tags">
+          <div class="tag">
+            <i class="svg-icon svg-icon-gray-l svg-icon-lg">
+              <svg-icon :svgid="'svg-duoyun'" />
+            </i>
+          </div>
+          <div class="tag">
+            <div class="tag-title">实时风速</div>
+            <div class="tag-value">12.34<span class="unit">m/s</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">预测风速</div>
+            <div class="tag-value">12.34<span class="unit">m/s</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（优）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（良）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（差）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+        </div>
+        <div class="health-info">
+          <div class="title">
+            设备健康度
+            <div class="actions">
+              <div class="action active">
+                <i class="svg-icon svg-icon-sm">
+                  <svg-icon :svgid="'svg-wind-site'" />
+                </i>
+                比例
+              </div>
+              <div class="action">
+                <i class="svg-icon svg-icon-sm">
+                  <svg-icon :svgid="'svg-wind-site'" />
+                </i>
+                风机号
+              </div>
+            </div>
+          </div>
+          <div class="info-body">
+            <div class="proportion-info">
+              <thermometer-chart :height="'120px'" :width="'80px'" />
+              <dashboard :height="'150px'" :width="'150px'" />
+            </div>
+            <div class="device-list"></div>
+          </div>
+        </div>
+      </div>
+      <div class="fc-item">
+        <div class="title">牛首山风场</div>
+        <div class="tags">
+          <div class="tag">
+            <i class="svg-icon svg-icon-gray-l svg-icon-lg">
+              <svg-icon :svgid="'svg-duoyun'" />
+            </i>
+          </div>
+          <div class="tag">
+            <div class="tag-title">实时风速</div>
+            <div class="tag-value">12.34<span class="unit">m/s</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">预测风速</div>
+            <div class="tag-value">12.34<span class="unit">m/s</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（优）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（良）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（差）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+        </div>
+        <div class="health-info">
+          <div class="title">
+            设备健康度
+            <div class="actions">
+              <div class="action active">
+                <i class="svg-icon svg-icon-sm">
+                  <svg-icon :svgid="'svg-wind-site'" />
+                </i>
+                比例
+              </div>
+              <div class="action">
+                <i class="svg-icon svg-icon-sm">
+                  <svg-icon :svgid="'svg-wind-site'" />
+                </i>
+                风机号
+              </div>
+            </div>
+          </div>
+          <div class="info-body">
+            <div class="proportion-info">
+              <thermometer-chart :height="'120px'" :width="'80px'" />
+              <dashboard :height="'150px'" :width="'150px'" />
+            </div>
+            <div class="device-list"></div>
+          </div>
+        </div>
+      </div>
+      <div class="fc-item">
+        <div class="title">牛首山风场</div>
+        <div class="tags">
+          <div class="tag">
+            <i class="svg-icon svg-icon-gray-l svg-icon-lg">
+              <svg-icon :svgid="'svg-duoyun'" />
+            </i>
+          </div>
+          <div class="tag">
+            <div class="tag-title">实时风速</div>
+            <div class="tag-value">12.34<span class="unit">m/s</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">预测风速</div>
+            <div class="tag-value">12.34<span class="unit">m/s</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（优）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（良）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+          <div class="tag">
+            <div class="tag-title">健康度（差）</div>
+            <div class="tag-value">12.34<span class="unit">台</span></div>
+          </div>
+        </div>
+        <div class="health-info">
+          <div class="title">
+            设备健康度
+            <div class="actions">
+              <div class="action active">
+                <i class="svg-icon svg-icon-sm">
+                  <svg-icon :svgid="'svg-wind-site'" />
+                </i>
+                比例
+              </div>
+              <div class="action">
+                <i class="svg-icon svg-icon-sm">
+                  <svg-icon :svgid="'svg-wind-site'" />
+                </i>
+                风机号
+              </div>
+            </div>
+          </div>
+          <div class="info-body">
+            <div class="proportion-info">
+              <thermometer-chart :height="'120px'" :width="'80px'" />
+              <dashboard :height="'150px'" :width="'150px'" />
+            </div>
+            <div class="device-list"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="fc-list">
+      <Table :data="tableData" />
+    </div>
+  </div>
+</template>
+
+<script>
+import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+import Dashboard from "../../components/chart/other/Dashboard.vue";
+import ThermometerChart from "../../components/chart/other/thermometer-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import Table from "../../components/coms/table/table.vue";
+export default {
+  setup() {},
+  components: { SvgIcon, Panel, VertivalBarLineChart, ThermometerChart, Dashboard, Table },
+  data() {
+    return {
+      tableData: {
+        column: [
+          {
+            name: "",
+            field: "index",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "name",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "lqf",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "yggl",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "yyy",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "pcspp",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        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,
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    for (let i = 1; i < 20; i++) {
+      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+      this.tableData.data[i].index = i + 1;
+    }
+  },
+};
+</script>
+
+<style lang="less">
+.health-2 {
+  // 电量健康情况
+  .power-info {
+    display: flex;
+    .info-tab {
+      flex: 0 0 156px;
+      display: flex;
+      flex-direction: column;
+      height: 350px;
+      margin-right: 1.4815vh;
+
+      .tab {
+        position: relative;
+        flex: 0 0 auto;
+        text-align: center;
+        line-height: 33px;
+        margin-right: 8px;
+        color: @gray-l;
+        font-size: 12px;
+        background: fade(@gray, 20);
+        border: 1px solid fade(@gray, 20);
+
+        display: flex;
+        align-items: center;
+
+        i {
+          margin: 0 1.4815vh;
+          svg use {
+            fill: @gray-l;
+          }
+        }
+
+        &:hover,
+        &.active {
+          background: fade(@green, 20);
+          border: 1px solid @green;
+          color: @green;
+          cursor: pointer;
+          i {
+            svg use {
+              fill: @green;
+            }
+          }
+        }
+
+        &.active::after {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -19px;
+          padding: 0;
+          border-bottom: 9px solid @green;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 10;
+          transform: rotate(90deg);
+        }
+
+        &.active::before {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -17px;
+          padding: 0;
+          border-bottom: 9px solid #063319;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 12;
+          transform: rotate(90deg);
+        }
+
+        & + .tab {
+          margin-top: 0.7407vh;
+        }
+
+        &:last-child {
+          text-align: center;
+          justify-content: center;
+        }
+      }
+
+      .empty {
+        flex: 1 0 auto;
+      }
+    }
+
+    .info-chart {
+      flex: 1 0 auto;
+    }
+  }
+  // 风场信息
+  .fc-info {
+    display: flex;
+    flex-wrap: wrap;
+
+    //
+    .fc-item {
+      flex: 1 0 calc(100% / 5 - 8px);
+
+      & > .title {
+        background: fade(@gray, 20);
+        padding: 0 1.4815vh;
+        line-height: 27px;
+        color: fade(@white, 75);
+        font-size: @fontsize-s;
+        margin-bottom: 0.7407vh;
+      }
+
+      & + .fc-item {
+        margin-left: 8px;
+      }
+
+      .tags {
+        display: flex;
+        flex-wrap: wrap;
+
+        .tag {
+          flex: 1 0 calc(100% / 3 - 8px);
+          background: fade(@gray, 20);
+          margin-bottom: 8px;
+
+          .tag-title {
+            font-size: 12px;
+            color: @gray-l;
+            line-height: 24px;
+            background: fade(@gray, 40);
+            text-align: center;
+          }
+
+          .tag-value {
+            position: relative;
+            font-size: 20px;
+            color: @green;
+            text-align: center;
+            padding: 12px 0;
+            .unit {
+              position: absolute;
+              color: @gray;
+              font-size: 12px;
+              bottom: 8px;
+              right: 8px;
+            }
+          }
+
+          & + .tag {
+            margin-left: 8px;
+          }
+
+          &:nth-child(1) {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            i {
+              width: 56px;
+              height: 56px;
+              svg {
+                width: 56px;
+                height: 56px;
+              }
+            }
+          }
+
+          &:nth-child(3n + 1) {
+            margin-left: 0px;
+          }
+        }
+      }
+
+      .health-info {
+        .title {
+          line-height: 24px;
+          color: @gray-l;
+          background: fade(@gray, 40);
+          padding: 0 16px;
+          font-size: 12px;
+
+          .actions {
+            float: right;
+            display: flex;
+
+            .action {
+              display: flex;
+              align-items: center;
+
+              i {
+                margin-right: 0.3704vh;
+              }
+
+              & + .action {
+                margin-left: 1.4815vh;
+              }
+
+              &.active,
+              &:hover {
+                cursor: pointer;
+                color: @green;
+
+                svg use {
+                  fill: @green;
+                }
+              }
+            }
+          }
+        }
+
+        .info-body {
+          height: 170px;
+          background: fade(@gray, 20);
+
+          .proportion-info {
+            height: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+          }
+
+          .device-list {
+            display: flex;
+            flex-wrap: wrap;
+            padding: 8px 16px;
+
+            .item {
+              flex: 1 0 64px;
+              line-height: 26px;
+              background: fade(@gray, 20);
+              color: @gray-l;
+              font-size: 12px;
+              margin-bottom: 4px;
+              text-align: center;
+              border: 1px solid transparent;
+
+              & + .item {
+                margin-left: 4px;
+              }
+
+              &:nth-child(5n + 1) {
+                margin-left: 0px;
+              }
+
+              &.green {
+                color: @green;
+                background: fade(@green, 20);
+                border-color: @green;
+              }
+
+              &.purple {
+                color: @purple;
+                background: fade(@purple, 20);
+                border-color: @purple;
+              }
+
+              &.orange {
+                color: @orange;
+                background: fade(@orange, 20);
+                border-color: @orange;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 列表
+  .fc-list {
+    .com-table thead tr th {
+      padding: 4px 0;
+    }
+    tbody {
+      height: calc(100vh - 880px);
+    }
+    th,
+    td {
+      &:nth-child(1) {
+        width: 32px;
+      }
+    }
+  }
+}
+</style>

src/views/HealthControl/Health3.vue

@@ -0,0 +1,442 @@
+<template>
+  <div class="health-3">
+    <div class="power-info mg-b-8">
+      <div class="info-tab">
+        <div class="tab active">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-wind-site'" />
+          </i>
+          <span> 24小时健康趋势 </span>
+        </div>
+        <div class="tab">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-wind-site'" />
+          </i>
+          <span> 7日健康趋势 </span>
+        </div>
+        <div class="tab">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-wind-site'" />
+          </i>
+          <span>30日健康趋势</span>
+        </div>
+        <div class="empty"></div>
+        <div class="tab">
+          <span>全部风场健康趋势</span>
+        </div>
+      </div>
+      <div class="info-chart">
+        <panel class="info-chart-panel" :title="'损失电量分析'">
+          <vertival-bar-line-chart :height="'310px'" />
+        </panel>
+      </div>
+    </div>
+    <div class="fj-info">
+      <div class="left-info ">
+        <panel title="预测电量" class="mg-b-16">
+          <list-bar-chart :list="listBarData1" :colors="listBarData1Color" :height="'9.5vh'" />
+          <div class="dashboard">
+            <dashboard-2 :height="'7.5vh'" :width="'115px'" :value="25" />
+            <div class="lengends">
+              <div class="item">
+                <span class="label">本日预测电量</span>
+                <span class="lengend gary"></span>
+                <span class="value">123</span>
+              </div>
+              <div class="item">
+                <span class="label">本日已发电量</span>
+                <span class="lengend green"></span>
+                <span class="value">123</span>
+              </div>
+            </div>
+          </div>
+          <div class="dashboard">
+            <dashboard-2 :height="'7.5vh'" :width="'115px'" :value="34" />
+            <div class="lengends">
+              <div class="item">
+                <span class="label">本日预测电量</span>
+                <span class="lengend gary"></span>
+                <span class="value">123</span>
+              </div>
+              <div class="item">
+                <span class="label">本日已发电量</span>
+                <span class="lengend green"></span>
+                <span class="value">123</span>
+              </div>
+            </div>
+          </div>
+        </panel>
+        <panel title="设备健康度" class="mg-b-16">
+          <thermometer-v-chart :height="'5.5vh'" :value="100" />
+        </panel>
+        <panel title="隐患等级" class="mg-b-16">
+          <normal-pie-chart :height="'14vh'" />
+        </panel>
+      </div>
+      <div class="right-info">
+        <toolbar-panel title="风机健康矩阵列表" :showLine="false" class="matrix-panel mg-b-8">
+          <template v-slot:tools>
+            <div class="tools">
+              <span class="level">
+                <span class="text green">优</span>：
+                <span class="value white">98</span>
+                <span class="unit gray">台</span>
+              </span>
+              <span class="level">
+                <span class="text purple">良</span>：
+                <span class="value white">98</span>
+                <span class="unit gray">台</span>
+              </span>
+              <span class="level">
+                <span class="text orange">差</span>：
+                <span class="value white">98</span>
+                <span class="unit gray">台</span>
+              </span>
+            </div>
+          </template>
+          <div class="matrix">
+            <div class="item green">1号</div>
+            <div class="item purple">2号</div>
+            <div class="item orange">3号</div>
+            <div class="item" v-for="index of 100" :key="index">{{ index + 3 }}号</div>
+            <div class="blank" v-for="index of 20" :key="index"></div>
+          </div>
+        </toolbar-panel>
+        <div class="table">
+          <Table :data="tableData" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ListBarChart from "../../components/chart/bar/list-bar-chart.vue";
+import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+import Dashboard2 from "../../components/chart/other/Dashboard2.vue";
+import ThermometerVChart from "../../components/chart/other/thermometer-v-chart.vue";
+import NormalPieChart from "../../components/chart/pie/normal-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
+import Table from "../../components/coms/table/table.vue";
+export default {
+  setup() {},
+  components: { SvgIcon, Panel, VertivalBarLineChart, Table, ListBarChart, ThermometerVChart, NormalPieChart, ToolbarPanel, Dashboard2 },
+  data() {
+    return {
+      listBarData1: [
+        { name: "未来 {c1|15分钟} 预测电量", value: 123.62 },
+        { name: "未来 {c1|4小时} 预测电量", value: 123.62 },
+      ],
+      listBarData1Color: ["purple", "purple"],
+      tableData: {
+        column: [
+          {
+            name: "",
+            field: "index",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "name",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "lqf",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "yggl",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "yyy",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "pcspp",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        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,
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    for (let i = 1; i < 50; i++) {
+      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+      this.tableData.data[i].index = i + 1;
+    }
+  },
+};
+</script>
+
+<style lang="less">
+.health-3 {
+  .power-info {
+    display: flex;
+    .info-tab {
+      flex: 0 0 156px;
+      display: flex;
+      flex-direction: column;
+      height: 350px;
+      margin-right: 1.4815vh;
+
+      .tab {
+        position: relative;
+        flex: 0 0 auto;
+        text-align: center;
+        line-height: 33px;
+        margin-right: 8px;
+        color: @gray-l;
+        font-size: 12px;
+        background: fade(@gray, 20);
+        border: 1px solid fade(@gray, 20);
+
+        display: flex;
+        align-items: center;
+
+        i {
+          margin: 0 1.4815vh;
+          svg use {
+            fill: @gray-l;
+          }
+        }
+
+        &:hover,
+        &.active {
+          background: fade(@green, 20);
+          border: 1px solid @green;
+          color: @green;
+          cursor: pointer;
+
+          i svg use {
+            fill: @green;
+          }
+        }
+
+        &.active::after {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -19px;
+          padding: 0;
+          border-bottom: 9px solid @green;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 10;
+          transform: rotate(90deg);
+        }
+
+        &.active::before {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -17px;
+          padding: 0;
+          border-bottom: 9px solid #063319;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 12;
+          transform: rotate(90deg);
+        }
+
+        & + .tab {
+          margin-top: 0.7407vh;
+        }
+
+        &:last-child {
+          text-align: center;
+          justify-content: center;
+        }
+      }
+
+      .empty {
+        flex: 1 0 auto;
+      }
+    }
+
+    .info-chart {
+      flex: 1 0 auto;
+    }
+  }
+
+  .fj-info {
+    display: flex;
+    .left-info {
+      flex: 0 0 300px;
+      padding-right: 16px;
+
+      .com-panel .panel-header {
+        margin-bottom: 0.7407vh;
+      }
+      @media screen and (max-height: 1078px) {
+        .mg-b-16 {
+          margin-bottom: 0.7407vh;
+        }
+      }
+
+      @media screen and (min-height: 1078px) and (max-height: 1080px) {
+        .com-panel .panel-header {
+          margin-bottom: 1.4815vh;
+        }
+      }
+
+      .dashboard {
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        .lengends {
+          font-size: 12px;
+          line-height: 20px;
+          padding-left: 12px;
+          .item {
+            display: flex;
+            align-items: center;
+
+            .label {
+              margin-right: 8px;
+              color: @gray;
+            }
+
+            .lengend {
+              display: inline-block;
+              width: 6px;
+              height: 6px;
+              background: @gray;
+              border-radius: 50%;
+              margin-right: 8px;
+
+              &.green {
+                background: @green;
+              }
+            }
+            .value {
+              color: fade(@white, 75);
+            }
+          }
+        }
+      }
+    }
+
+    .right-info {
+      flex: 1;
+
+      .matrix-panel {
+        .panel-title {
+          flex: 0 0 auto;
+        }
+
+        .tools {
+          margin-left: 8px;
+
+          .level {
+            padding: 0 16px;
+          }
+        }
+
+        .matrix {
+          display: flex;
+          flex-wrap: wrap;
+
+          .item {
+            flex: 1 0 calc(100% / 20 - 4px);
+            line-height: 26px;
+            background: fade(@gray, 20);
+            color: @gray-l;
+            font-size: 12px;
+            margin-bottom: 4px;
+            text-align: center;
+            border: 1px solid transparent;
+
+            & + .item {
+              margin-left: 4px;
+            }
+
+            &:nth-child(20n + 1) {
+              margin-left: 0px;
+            }
+
+            &.green {
+              color: @green;
+              background: fade(@green, 20);
+              border-color: @green;
+            }
+
+            &.purple {
+              color: @purple;
+              background: fade(@purple, 20);
+              border-color: @purple;
+            }
+
+            &.orange {
+              color: @orange;
+              background: fade(@orange, 20);
+              border-color: @orange;
+            }
+          }
+
+          .blank {
+            flex: 1 0 calc(100% / 20 - 4px);
+            margin-left: 4px;
+          }
+        }
+      }
+
+      .table {
+        .com-table thead tr th {
+          padding: 0.3704vh 0;
+        }
+
+        tbody {
+          height: 33vh;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/HealthControl/Health4.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="health-4">
+    <simple-line-chart :height="'100px'" />
+    <simple-line-chart :height="'100px'" :color="'yellow'" :title="'发电机'" />
+    <simple-line-chart :height="'100px'" :color="'purple'" :title="'变桨系统'" />
+    <simple-line-chart :height="'100px'" :color="'blue'" :title="'主控系统'" />
+    <simple-line-chart :height="'100px'" :color="'orange'" :title="'齿轮箱'" />
+  </div>
+</template>
+
+<script>
+import SimpleLineChart from "../../components/chart/line/simple-line-chart.vue";
+export default {
+  setup() {},
+  components: { SimpleLineChart },
+  data() {
+    return {};
+  },
+  created() {},
+};
+</script>
+
+<style lang="less">
+.health-4 {
+  padding: 0 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 100%;
+
+  .chart {
+    flex: 0;
+  }
+}
+</style>

src/views/Home/Home.vue

@@ -822,11 +822,8 @@ export default {
 
       .fengji-icon {
         padding: 1.111vh;
-        border: 0.093vh solid #05bb4c;
         border-radius: 50%;
-        border-right-color: transparent;
-        border-top-color: transparent;
-        margin-right: -0.741vh;
+        box-shadow: inset 1.5px -1px 1px 0px @green;
 
         svg {
           width: 2.593vh;

src/views/Home/components/map.vue

@@ -22,6 +22,65 @@
       </span>
       返回
     </div>
+    <!-- 指南针 -->
+    <div class="compass">
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
+        <g id="渐变">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            fill="#000"
+            opacity="0"
+            d="M100.523,18.655c44.661,0,80.865,36.205,80.865,80.866
+		c0,44.66-36.204,80.865-80.865,80.865c-44.661,0-80.865-36.205-80.865-80.865C19.658,54.86,55.863,18.655,100.523,18.655z"
+          />
+        </g>
+        <g id="图层_2">
+          <g>
+            <g>
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                fill="#606769"
+                opacity="0.75"
+                d="M100.523,56.301c-23.869,0-43.22,19.349-43.22,43.22 c0,23.869,19.351,43.219,43.22,43.219c23.87,0,43.22-19.35,43.22-43.219C143.743,75.65,124.394,56.301,100.523,56.301z M100.954,139.082c-21.765,0-39.414-17.648-39.414-39.416c0-21.77,17.649-39.418,39.414-39.418 c21.772,0,39.417,17.648,39.417,39.418C140.371,121.434,122.727,139.082,100.954,139.082z"
+              />
+            </g>
+          </g>
+        </g>
+        <g id="图层_3">
+          <g>
+            <g>
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                fill="#05BB4C"
+                d="M100.523,18.655c-44.661,0-80.865,36.205-80.865,80.866 c0,44.66,36.205,80.865,80.865,80.865c44.661,0,80.865-36.205,80.865-80.865C181.389,54.86,145.185,18.655,100.523,18.655z M101.156,173.509c-40.862,0-73.988-33.126-73.988-73.987c0-40.863,33.126-73.989,73.988-73.989 c40.862,0,73.988,33.125,73.988,73.989C175.145,140.383,142.019,173.509,101.156,173.509z"
+              />
+            </g>
+          </g>
+        </g>
+        <g id="图层_4">
+          <g>
+            <g>
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                fill="#05BB4C"
+                opacity="0.2"
+                d="M100.582,4.724h-0.118c-52.356,0-94.797,42.441-94.797,94.798 c0,52.355,42.441,94.797,94.797,94.797h0.118c52.356,0,94.798-42.441,94.798-94.797C195.38,47.165,152.938,4.724,100.582,4.724z M101.169,189.813c-49.76,0-90.1-40.338-90.1-90.095c0-49.76,40.34-90.1,90.1-90.1c49.757,0,90.095,40.34,90.095,90.1 C191.264,149.475,150.926,189.813,101.169,189.813z"
+              />
+            </g>
+          </g>
+        </g>
+        <g id="图层_1">
+          <polyline fill="#606769" points="59.177,142.682 113.678,116.092 84.673,87.663" />
+        </g>
+        <g id="图层_7">
+          <polygon fill="#BD3338" points="139.496,60.156 114.004,115.172 85.004,86.745" />
+        </g>
+      </svg>
+    </div>
     <div class="map-img">
       <SvgMap></SvgMap>
     </div>
@@ -31,6 +90,7 @@
 <script>
 import SvgMap from "./map/svg-map.vue";
 import SvgIcon from "../../../components/coms/icon/svg-icon.vue";
+import compassIcon from "@/assets/icon/svg_fill/compass.svg";
 export default {
   // 名称
   name: "Map",
@@ -56,6 +116,7 @@ export default {
           text: "电站",
         },
       ],
+      compassIcon: compassIcon,
       activeTab: 0,
       img: require("@assets/map/map-nx.png"),
       nxSvgFile: require("@assets/map/map-nx.svg"),
@@ -179,6 +240,28 @@ export default {
     }
   }
 
+  .compass {
+    position: absolute;
+    right: 16px;
+    bottom: 32px;
+    border-radius: 50%;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 4px;
+      left: 4px;
+      border-radius: 50%;
+      width: 36px;
+      height: 36px;
+      box-shadow: inset 0px -5px 10px 0px @green;
+    }
+    svg {
+      height: 45px;
+      width: 45px;
+    }
+  }
+
   .map-img {
     width: calc(100% - 14.815vh);
     height: calc(100% - 14.815vh);

src/views/LightMatrix/LightMatrix.vue

@@ -7,56 +7,49 @@
       <div class="dot right bottom"></div>
       <Row>
         <Col :span="3">
-          <div class="panel-item-gf">
-            <div class="panel-item-gf-left">
-              <span class="svg-icon svg-icon-write svg-icon-md">
-                <SvgIcon :svgid="panelData.first.icon"></SvgIcon>
-              </span>
+          <div class="panel-item-gf-new">
+            <div class="panel-left">
+              <i class="svg-icon svg-icon-write">
+                <SvgIcon :svgid="'svg-photovoltaic'"></SvgIcon>
+              </i>
             </div>
-            <div class="panel-item-gf-right">
-              <div class="panel-item-gf-up">{{ panelData.first.text }}</div>
-              <div class="panel-item-gf-down">{{ sourceMap[panelData.first.key] || "---" }}</div>
+            <div class="panel-right">
+              <span class="text">接入光伏</span>
+              <span class="value">
+                {{ sourceMap[panelData.first.key] || "---" }}
+                <span class="unit">台</span>
+              </span>
             </div>
           </div>
         </Col>
         <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
-          <div class="panel-item" :class="data.color">
-            <div class="panel-item-left">
-              <div class="panel-item-li">
-                <span>{{ data.name }}</span>
-                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
-                  <SvgIcon :svgid="data.nameIcon"></SvgIcon>
-                </span>
-              </div>
-              <div class="panel-item-li">
-                <span v-if="data.calcStr && sourceMap">{{ calcGfStr(data.calcStr) || "---" }}</span>
-                <span v-else>{{ sourceMap[data.key] || "---" }}</span>
-                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
-                  <SvgIcon :svgid="data.numIcon"></SvgIcon>
-                </span>
-              </div>
+          <div class="panel-item-new" :class="data.color">
+            <div class="panel-left">
+              <i class="svg-icon" :class="'svg-icon-' + data.color">
+                <SvgIcon :svgid="data.nameIcon"></SvgIcon>
+              </i>
+              <span class="text">{{ data.text1 }}</span>
             </div>
-            <div class="panel-item-right">
-              <div class="panel-item-ri">
-                <span>{{ data.text1 }}</span>
-                <span>{{ sourceMap[data.key1] || "---" }}</span>
-              </div>
-              <div class="panel-item-ri">
-                <span>{{ data.text2 }}</span>
-                <span>{{ sourceMap[data.key2] || "---" }}</span>
-              </div>
+            <div class="panel-right">
+              <span class="text">{{ sourceMap[data.key1] || "---" }}台数</span>
+              <span class="value">
+                {{ data.num }}
+                <span class="unit">台</span>
+              </span>
             </div>
           </div>
         </Col>
       </Row>
     </div>
-    <div class="panel-box">
+    <div class="panel-box scroll">
       <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
         <div class="panel-title">
           <div class="panel-title-name">
-            <i class="fa fa-send"></i>
+            <i class="svg-icon svg-icon-sm svg-icon-green">
+              <SvgIcon :svgid="'svg-photovoltaic'"></SvgIcon>
+            </i>
             <span>{{ sourceMap.fczbmap[pItem[pIndex].wpId].name }}</span>
-            <div class="sub-title-item" v-for="(data, index) in tables[0].subTitleDatas" :key="index">
+            <div class="sub-title-item" v-for="(data, index) of table.subTitleDatas" :key="index">
               <span class="sub-title">{{ data.text }}</span>
               <span class="sub-count" :class="data.color">{{ sourceMap.fczbmap[pItem[pIndex].wpId][data.key] }}</span>
             </div>
@@ -75,19 +68,19 @@
               </div>
               <div class="card-right">
                 <div class="num">
-                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + cItem.color">
+                  <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
                     <SvgIcon svgid="svg-A"></SvgIcon>
                   </i>
                   <span>{{ cItem.fdl }}</span>
                 </div>
                 <div class="num">
-                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + cItem.color">
+                  <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
                     <SvgIcon svgid="svg-W"></SvgIcon>
                   </i>
                   <span>{{ cItem.gl }}</span>
                 </div>
                 <div class="num">
-                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + cItem.color">
+                  <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
                     <SvgIcon svgid="svg-V"></SvgIcon>
                   </i>
                   <span>{{ cItem.fs }}</span>
@@ -146,7 +139,7 @@ export default {
             key2: "gfsdtjnum",
           },
           {
-            color: "blue",
+            color: "purple",
             name: "运行",
             nameIcon: "svg-normal-power",
             calcStr: ["gfzcfdnum", "gfqxjclnum"],
@@ -432,216 +425,176 @@ export default {
       }
     }
 
-    .panel-item-gf {
-      width: 100%;
-      background-color: fade(@darkgray, 20%);
+    .panel-item-gf-new {
       display: flex;
       height: @panelHeight;
+      align-items: center;
+      justify-content: center;
 
-      .panel-item-gf-left {
-        width: @panelHeight;
-        height: @panelHeight;
-        background-color: fade(@darkgray, 40%);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
+      .panel-left {
         i {
-          font-size: 2.778vh;
-          color: @write;
+          width: 100%;
+          height: 100%;
+          display: block;
+          padding: 10px 15px;
+          border-radius: 50%;
+          box-shadow: inset 1.5px -1px 1px 0px @green;
+
+          svg {
+            margin-top: 0.7407vh;
+          }
         }
       }
 
-      .panel-item-gf-right {
-        flex-grow: 1;
-        color: @write;
-        text-align: right;
-
-        .panel-item-gf-up {
-          height: @panelHeight / 2;
-          border-bottom: 1px solid fade(@gray, 40%);
-          line-height: @panelHeight / 2;
-          padding-right: 1.111vh;
-          font-size: @fontsize;
+      .panel-right {
+        display: flex;
+        flex-direction: column;
+        padding-left: 2.2222vh;
+
+        .text {
+          color: @green;
+          font-size: @fontsize-s;
+          padding-bottom: 0.7407vh;
         }
 
-        .panel-item-gf-down {
-          height: @panelHeight / 2;
-          line-height: @panelHeight / 2;
-          padding-right: 1.111vh;
-          font-weight: 600;
-          font-size: @fontsize;
+        .value {
+          font-size: 2.2222vh;
+          .unit {
+            font-size: @fontsize-s;
+            padding-left: 0.7407vh;
+          }
         }
       }
     }
 
-    .panel-item {
-      width: 100%;
-      height: @panelHeight;
+    .panel-item-new {
       display: flex;
-      font-size: @fontsize-s;
+      height: @panelHeight;
+      align-items: center;
+      justify-content: center;
 
-      .panel-item-left {
-        width: @panelHeight;
-        height: @panelHeight;
+      .panel-left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 40%;
+        height: 100%;
+        border-right: 1px dashed;
 
-        .panel-item-li {
-          width: 100%;
-          height: @panelHeight / 2;
-          line-height: @panelHeight / 2;
-          padding: 0 1.111vh;
-          display: flex;
-          align-items: center;
-          font-size: @fontsize-s;
+        i svg {
+          width: 2.7778vh;
+          height: 2.7778vh;
+        }
 
-          .svg-icon {
-            margin-left: auto;
-          }
+        .text {
+          font-size: @fontsize-s;
+          line-height: 1;
+          margin-top: 4px;
         }
       }
 
-      .panel-item-right {
-        flex-grow: 1;
-        height: @panelHeight;
-
-        .panel-item-ri {
-          height: @panelHeight / 2;
-          line-height: @panelHeight / 2;
-          padding: 0 1.111vh;
-
-          &:first-child {
-            border-bottom: 1px solid;
-          }
+      .panel-right {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        flex: 0 0 60%;
+        height: 100%;
+        padding-left: 24px;
 
-          span {
-            &:first-child {
-              float: left;
-            }
+        .text {
+          font-size: @fontsize-s;
+          padding-bottom: 4px;
+        }
 
-            &:last-child {
-              float: right;
-              color: @write;
-            }
+        .value {
+          color: @white;
+          font-size: 24px;
+          .unit {
+            font-size: @fontsize-s;
+            padding-left: 8px;
           }
         }
       }
 
       &.green {
-        background-color: fade(@green, 20%);
-        color: @green;
+        i svg {
+          margin-left: 8px;
+        }
 
-        .panel-item-left {
-          background-color: fade(@green, 20%);
+        .panel-left {
+          background-color: fade(@green, 25);
+          border-color: fade(@green, 50);
         }
 
-        .panel-item-right {
-          .panel-item-ri {
-            &:first-child {
-              border-color: @green;
-            }
-          }
+        .panel-right {
+          background-color: fade(@green, 15);
         }
       }
 
-      &.blue {
-        background-color: fade(@darkBlue, 20%);
-        color: @darkBlue;
-
-        .panel-item-left {
-          background-color: fade(@darkBlue, 20%);
+      &.purple {
+        .panel-left {
+          background-color: fade(@purple, 25);
+          border-color: fade(@purple, 50);
         }
 
-        .panel-item-right {
-          .panel-item-ri {
-            &:first-child {
-              border-color: @darkBlue;
-            }
-          }
+        .panel-right {
+          background-color: fade(@purple, 15);
         }
       }
 
       &.pink {
-        background-color: fade(@pink, 20%);
-        color: @pink;
-
-        .panel-item-left {
-          background-color: fade(@pink, 20%);
+        .panel-left {
+          background-color: fade(@pink, 25);
+          border-color: fade(@pink, 50);
         }
 
-        .panel-item-right {
-          .panel-item-ri {
-            &:first-child {
-              border-color: @pink;
-            }
-          }
+        .panel-right {
+          background-color: fade(@pink, 15);
         }
       }
 
       &.red {
-        background-color: fade(@red, 20%);
-        color: @red;
-
-        .panel-item-left {
-          background-color: fade(@red, 20%);
+        .panel-left {
+          background-color: fade(@red, 25);
+          border-color: fade(@red, 50);
         }
 
-        .panel-item-right {
-          .panel-item-ri {
-            &:first-child {
-              border-color: @red;
-            }
-          }
+        .panel-right {
+          background-color: fade(@red, 15);
         }
       }
 
       &.orange {
-        background-color: fade(@orange, 20%);
-        color: @orange;
-
-        .panel-item-left {
-          background-color: fade(@orange, 20%);
+        .panel-left {
+          background-color: fade(@orange, 25);
+          border-color: fade(@orange, 50);
         }
 
-        .panel-item-right {
-          .panel-item-ri {
-            &:first-child {
-              border-color: @orange;
-            }
-          }
+        .panel-right {
+          background-color: fade(@orange, 15);
         }
       }
 
       &.gray {
-        background-color: fade(@darkgray, 20%);
-        color: @gray;
-
-        .panel-item-left {
-          background-color: fade(@darkgray, 20%);
+        .panel-left {
+          background-color: fade(@gray, 25);
+          border-color: fade(@gray, 50);
         }
 
-        .panel-item-right {
-          .panel-item-ri {
-            &:first-child {
-              border-color: @darkgray;
-            }
-          }
+        .panel-right {
+          background-color: fade(@gray, 15);
         }
       }
 
-      &.write {
-        background-color: fade(@write, 20%);
-        color: @write;
-
-        .panel-item-left {
-          background-color: fade(@write, 20%);
+      &.white {
+        .panel-left {
+          background-color: fade(@white, 25);
+          border-color: fade(@white, 50);
         }
 
-        .panel-item-right {
-          .panel-item-ri {
-            &:first-child {
-              border-color: @write;
-            }
-          }
+        .panel-right {
+          background-color: fade(@white, 15);
         }
       }
     }
@@ -650,7 +603,6 @@ export default {
   .panel-box {
     margin-top: 1.481vh;
     flex-grow: 1;
-    overflow: auto;
 
     .panel-title {
       width: 100%;
@@ -663,24 +615,29 @@ export default {
         color: @green;
         display: flex;
         align-items: center;
+        padding: 0 16px;
 
         i {
-          margin: 0 0.556vh 0 1.481vh;
+          margin-right: 0.7407vh;
         }
 
         .sub-title-item {
           display: flex;
+          flex: 1;
 
           .sub-title {
+            flex: 0 0 auto;
+            font-size: 12px;
             color: @gray;
-            font-size: @fontsize-s;
             margin: 0 0.556vh 0 1.481vh;
+            padding-top: 1px;
           }
 
           .sub-count {
-            font-size: @fontsize-s;
+            font-size: 14px;
             font-family: "Bicubik";
             font-weight: 500;
+            flex: 1 0 auto;
 
             &.write {
               color: @write;
@@ -769,6 +726,7 @@ export default {
 
           .card-right {
             width: 60%;
+            margin-top: 2px;
 
             .num {
               width: 100%;
@@ -807,7 +765,7 @@ export default {
 
         &.blue {
           border-color: @darkBlue;
-          background-color: fade(@darkBlue, 30%);
+          background-color: fade(@darkBlue, 15%);
 
           .card-panel {
             .card-left {
@@ -840,7 +798,7 @@ export default {
 
         &.pink {
           border-color: @pink;
-          background-color: fade(@pink, 30%);
+          background-color: fade(@pink, 15%);
 
           .card-panel {
             .card-left {
@@ -873,7 +831,7 @@ export default {
 
         &.orange {
           border-color: @orange;
-          background-color: fade(@orange, 30%);
+          background-color: fade(@orange, 15%);
 
           .card-panel {
             .card-left {
@@ -904,7 +862,7 @@ export default {
 
         &.green {
           border-color: @green;
-          background-color: fade(@green, 30%);
+          background-color: fade(@green, 15%);
 
           .card-panel {
             .card-left {
@@ -935,7 +893,7 @@ export default {
 
         &.gray {
           border-color: @darkgray;
-          background-color: fade(@darkgray, 30%);
+          background-color: fade(@darkgray, 15%);
 
           .card-panel {
             .card-left {

src/views/LightMatrix1/LightMatrix1.vue

@@ -8,7 +8,6 @@
           <div class="dot right top"></div>
           <div class="dot right bottom"></div>
           <div class="item">
-            <div class="loop"></div>
             <span class="svg-icon svg-icon-gray svg-icon-md">
               <SvgIcon svgid="svg-wind-site"></SvgIcon>
             </span>
@@ -56,7 +55,7 @@
           <div class="item">
             <div class="loop"></div>
             <span class="svg-icon svg-icon-gray svg-icon-md">
-              <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
+              <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
             </span>
           </div>
           <div class="item write" @click="changeShow('jrfj1_GDC')">
@@ -94,11 +93,13 @@
         </div>
       </Col>
     </Row>
-    <div class="panel-box">
+    <div class="panel-box scroll">
       <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
         <div class="panel-title">
           <div class="panel-title-name">
-            <i class="fa fa-send"></i>
+            <i class="svg-icon svg-icon-sm svg-icon-green">
+              <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
+            </i>
             <span>{{ sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name || "------" }}</span>
             <div class="sub-title-item" v-for="(fcItem, fcIndex) in fcStateArray" :key="fcIndex">
               <span class="sub-title">{{ fcItem.text }}</span>
@@ -494,7 +495,6 @@ export default {
   .panel-box {
     margin-top: 0.7407vh;
     flex-grow: 1;
-    overflow: auto;
 
     .panel-title {
       width: 100%;
@@ -507,20 +507,26 @@ export default {
         color: @green;
         display: flex;
         align-items: center;
+        padding: 0 16px;
 
         i {
-          margin: 0 0.556vh 0 1.481vh;
+          margin-right: 0.7407vh;
         }
 
         .sub-title-item {
+          display: flex;
+          flex: 1;
+
           .sub-title {
+            flex: 0 0 auto;
             color: @gray;
-            font-size: @fontsize-s;
+            font-size: 12px;
             margin: 0 0.556vh 0 1.481vh;
           }
 
           .sub-count {
-            font-size: @fontsize-s;
+            flex: 1 0 auto;
+            font-size: 14px;
             font-family: "Bicubik";
             font-weight: 500;
 

src/views/LightMatrix2/LightMatrix2.vue

@@ -8,7 +8,9 @@
           <div class="dot right top"></div>
           <div class="dot right bottom"></div>
           <div class="item">
-            <i :class="panel1Data.first.icon"></i>
+            <span class="svg-icon svg-icon-gray svg-icon-lg">
+              <svg-icon svgid="svg-wind-site"></svg-icon>
+            </span>
           </div>
           <div class="item" :class="data.color" v-for="(data, index) of panel1Data.datas" :key="index">
             <div>{{ data.test }}</div>
@@ -31,11 +33,13 @@
         </div>
       </Col>
     </Row>
-    <div class="panel-box">
+    <div class="panel-box scroll">
       <div v-for="(pItem, pIndex) of sourceMap.fjmap" :key="pIndex">
         <div class="panel-title">
           <div class="panel-title-name">
-            <i class="fa fa-send"></i>
+            <i class="svg-icon svg-icon-sm svg-icon-green">
+              <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
+            </i>
             <span>{{ sourceMap.fczbmap[pItem[pIndex].wpId].name }}</span>
             <div class="sub-title-item" v-for="(data, index) in tables[0].subTitleDatas" :key="index">
               <span class="sub-title">{{ data.text }}</span>
@@ -78,6 +82,7 @@ import util from "@/helper/util.js";
 
 import store from "@store/index.js";
 
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 export default {
   // 名称
   name: "LightMatrix2",
@@ -85,6 +90,7 @@ export default {
   components: {
     Row,
     Col,
+    SvgIcon,
   },
   // 数据
   data() {
@@ -497,7 +503,6 @@ export default {
   .panel-box {
     margin-top: 1.481vh;
     flex-grow: 1;
-    overflow: auto;
 
     .panel-title {
       width: 100%;
@@ -510,20 +515,27 @@ export default {
         color: @green;
         display: flex;
         align-items: center;
+        padding: 0 16px;
 
         i {
-          margin: 0 0.556vh 0 1.481vh;
+          margin-right: 0.7407vh;
         }
 
         .sub-title-item {
+          display: flex;
+          flex: 1;
+
           .sub-title {
+            flex: 0 0 auto;
             color: @gray;
-            font-size: @fontsize-s;
+            font-size: 12px;
             margin: 0 0.556vh 0 1.481vh;
+            padding-top: 1px;
           }
 
           .sub-count {
-            font-size: @fontsize-s;
+            flex: 1 0 auto;
+            font-size: 14px;
             font-family: "Bicubik";
             font-weight: 500;
 
@@ -587,7 +599,7 @@ export default {
           display: flex;
 
           .card-left {
-            width: 40%;
+            width: 30%;
             border-right: 0.093vh dotted;
 
             .tag {
@@ -595,17 +607,19 @@ export default {
               font-size: 14px;
               width: 100%;
               text-align: center;
+              padding-top: 0.3704vh;
             }
           }
 
           .card-right {
-            width: 60%;
+            width: 70%;
 
             .num {
               width: 100%;
               font-size: 13px;
               text-align: right;
-              padding-right: 0.278vh;
+              padding-right: 0.3704vh;
+              margin: 0.3704vh 0;
             }
           }
         }
@@ -639,10 +653,13 @@ export default {
 
         &.blue {
           border-color: @darkBlue;
-          background-color: fade(@darkBlue, 30%);
+          background-color: fade(@darkBlue, 15%);
 
           .card-panel {
             .card-left {
+              .tag {
+                color: @darkBlue;
+              }
               border-color: @darkBlue;
             }
 
@@ -660,10 +677,13 @@ export default {
 
         &.pink {
           border-color: @pink;
-          background-color: fade(@pink, 30%);
+          background-color: fade(@pink, 15%);
 
           .card-panel {
             .card-left {
+              .tag {
+                color: @pink;
+              }
               border-color: @pink;
             }
 
@@ -681,10 +701,13 @@ export default {
 
         &.orange {
           border-color: @orange;
-          background-color: fade(@orange, 30%);
+          background-color: fade(@orange, 15%);
 
           .card-panel {
             .card-left {
+              .tag {
+                color: @orange;
+              }
               border-color: @orange;
             }
 
@@ -702,10 +725,13 @@ export default {
 
         &.green {
           border-color: @green;
-          background-color: fade(@green, 30%);
+          background-color: fade(@green, 15%);
 
           .card-panel {
             .card-left {
+              .tag {
+                color: @green;
+              }
               border-color: @green;
             }
 
@@ -723,10 +749,13 @@ export default {
 
         &.gray {
           border-color: @darkgray;
-          background-color: fade(@darkgray, 30%);
+          background-color: fade(@darkgray, 15%);
 
           .card-panel {
             .card-left {
+              .tag {
+                color: @white;
+              }
               border-color: @darkgray;
             }
 
@@ -749,6 +778,9 @@ export default {
             background-color: @red;
 
             .card-left {
+              .tag {
+                color: @white;
+              }
               border-color: @darkRed;
             }
 
@@ -771,6 +803,9 @@ export default {
             background-color: @write;
 
             .card-left {
+              .tag {
+                color: @white;
+              }
               border-color: @black;
 
               .tag {

src/views/LightMatrix3/LightMatrix3.vue

@@ -50,11 +50,13 @@
         </Col>
       </Row>
     </div>
-    <div class="panel-box">
+    <div class="panel-box scroll">
       <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
         <div class="panel-title">
           <div class="panel-title-name">
-            <i class="fa fa-send"></i>
+            <i class="svg-icon svg-icon-sm svg-icon-green">
+              <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
+            </i>
             <span>{{ sourceMap.fczbmap[pItem[pIndex].wpId].name }}</span>
             <div class="sub-title-item" v-for="(data, index) of tables[0].subTitleDatas" :key="index">
               <span class="sub-title">{{ data.text }}</span>
@@ -552,11 +554,11 @@ export default {
       }
 
       &.green {
-        background-color: fade(@green, 20%);
+        background-color: fade(@green, 15%);
         color: @green;
 
         .panel-item-left {
-          background-color: fade(@green, 20%);
+          background-color: fade(@green, 15%);
         }
 
         .panel-item-right {
@@ -569,11 +571,11 @@ export default {
       }
 
       &.blue {
-        background-color: fade(@darkBlue, 20%);
+        background-color: fade(@darkBlue, 15%);
         color: @darkBlue;
 
         .panel-item-left {
-          background-color: fade(@darkBlue, 20%);
+          background-color: fade(@darkBlue, 15%);
         }
 
         .panel-item-right {
@@ -586,11 +588,11 @@ export default {
       }
 
       &.pink {
-        background-color: fade(@pink, 20%);
+        background-color: fade(@pink, 15%);
         color: @pink;
 
         .panel-item-left {
-          background-color: fade(@pink, 20%);
+          background-color: fade(@pink, 15%);
         }
 
         .panel-item-right {
@@ -603,11 +605,11 @@ export default {
       }
 
       &.red {
-        background-color: fade(@red, 20%);
+        background-color: fade(@red, 15%);
         color: @red;
 
         .panel-item-left {
-          background-color: fade(@red, 20%);
+          background-color: fade(@red, 15%);
         }
 
         .panel-item-right {
@@ -620,11 +622,11 @@ export default {
       }
 
       &.orange {
-        background-color: fade(@orange, 20%);
+        background-color: fade(@orange, 15%);
         color: @orange;
 
         .panel-item-left {
-          background-color: fade(@orange, 20%);
+          background-color: fade(@orange, 15%);
         }
 
         .panel-item-right {
@@ -637,11 +639,11 @@ export default {
       }
 
       &.gray {
-        background-color: fade(@darkgray, 20%);
+        background-color: fade(@darkgray, 15%);
         color: @gray;
 
         .panel-item-left {
-          background-color: fade(@darkgray, 20%);
+          background-color: fade(@darkgray, 15%);
         }
 
         .panel-item-right {
@@ -654,11 +656,11 @@ export default {
       }
 
       &.write {
-        background-color: fade(@write, 20%);
+        background-color: fade(@write, 15%);
         color: @write;
 
         .panel-item-left {
-          background-color: fade(@write, 20%);
+          background-color: fade(@write, 15%);
         }
 
         .panel-item-right {
@@ -675,7 +677,6 @@ export default {
   .panel-box {
     margin-top: 1.481vh;
     flex-grow: 1;
-    overflow: auto;
 
     .panel-title {
       width: 100%;
@@ -688,20 +689,27 @@ export default {
         color: @green;
         display: flex;
         align-items: center;
+        padding: 0 16px;
 
         i {
-          margin: 0 0.556vh 0 1.481vh;
+          margin-right: 0.7407vh;
         }
 
         .sub-title-item {
+          display: flex;
+          flex: 1;
+
           .sub-title {
+            flex: 0 0 auto;
             color: @gray;
-            font-size: @fontsize-s;
+            font-size: 12px;
             margin: 0 0.556vh 0 1.481vh;
+            padding-top: 1px;
           }
 
           .sub-count {
-            font-size: @fontsize-s;
+            flex: 1 0 auto;
+            font-size: 14px;
             font-family: "Bicubik";
             font-weight: 500;
 
@@ -866,7 +874,7 @@ export default {
 
         &.blue {
           border-color: @darkBlue;
-          background-color: fade(@darkBlue, 30%);
+          background-color: fade(@darkBlue, 15%);
 
           .circle {
             border-color: @darkBlue;
@@ -905,7 +913,7 @@ export default {
 
         &.pink {
           border-color: @pink;
-          background-color: fade(@pink, 30%);
+          background-color: fade(@pink, 15%);
 
           .circle {
             border-color: @pink;
@@ -944,7 +952,7 @@ export default {
 
         &.orange {
           border-color: @orange;
-          background-color: fade(@orange, 30%);
+          background-color: fade(@orange, 15%);
 
           .center-icon {
             color: @write;
@@ -983,7 +991,7 @@ export default {
 
         &.green {
           border-color: @green;
-          background-color: fade(@green, 30%);
+          background-color: fade(@green, 15%);
 
           .center-icon {
             color: @write;
@@ -1022,7 +1030,7 @@ export default {
 
         &.gray {
           border-color: @darkgray;
-          background-color: fade(@darkgray, 30%);
+          background-color: fade(@darkgray, 15%);
 
           .center-icon {
             color: @write;

src/views/Status/Status.vue

@@ -25,7 +25,7 @@ export default {
     ComTable,
   },
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 遮罩开关
       sourceMap: {}, // 核心数据
@@ -180,18 +180,18 @@ export default {
 
   methods: {
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "monitor/monitor",
-        success (res) {
+        success(res) {
           if (res.data) {
             let sourceMap = res.data;
             let datas = [];
             let data = [];
-            sourceMap.maps.forEach(ele => {
+            sourceMap.maps.forEach((ele) => {
               datas.push({
                 title: ele.name,
                 weather: {
@@ -240,7 +240,7 @@ export default {
                   {
                     f1: "测风塔:",
                     f2: "风速",
-                    f3: ((ele.cftfs || 0) + "m/s"),
+                    f3: (ele.cftfs || 0) + "m/s",
                     f4: "风向",
                     f5: ele.cftfx || 0,
                     is_light: false,
@@ -257,7 +257,7 @@ export default {
               });
             });
 
-            sourceMap.vos.forEach(ele => {
+            sourceMap.vos.forEach((ele) => {
               ele.row_span = [];
               ele.col_span = [];
               ele.is_light = false;
@@ -277,7 +277,7 @@ export default {
     },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -287,14 +287,12 @@ export default {
     });
   },
 
-  mounted () {
+  mounted() {},
 
-  },
-
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
-  }
+  },
 };
 </script>
 
@@ -331,7 +329,7 @@ export default {
 
     &::after,
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       width: 0.185vh;
       height: 0.185vh;

src/views/Status/components/status-panel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="status-panel">
     <div class="pause" v-if="data.breakOff">中断</div>
-    <ComPanel class="status-com-panel" :title="data.title">
+    <ComPanel class="status-com-panel" :title="data.title" @click="onClick">
       <div class="p-body">
         <div class="category-box">
           <div class="score">
@@ -74,7 +74,15 @@ export default {
     return {};
   },
   // 函数
-  methods: {},
+  methods: {
+    onClick() {
+      this.$router.push({
+        path: "/windsite/home",
+        query: { id: "1" },
+        params: { a: "2" },
+      });
+    },
+  },
   // 生命周期钩子
   beforeCreate() {
     // 创建前

src/views/WindSite/WindSite.vue

@@ -10,8 +10,7 @@
           <div class="page-common-body-menu-border left bottom"></div>
           <div class="page-common-body-menu-border right top"></div>
           <div class="page-common-body-menu-border right bottom"></div>
-          <div class="page-common-body-menu-item" v-for="(menuData, index) of menuDatas" :key="index" @click="clickMenu(index)"
-            :class="{ active: activeIndex == index }">
+          <div class="page-common-body-menu-item" v-for="(menuData, index) of menuDatas" :key="index" @click="clickMenu(index)" :class="{ active: activeIndex == index }">
             <router-link :to="menuData.path">
               <span class="svg-icon" :class="activeIndex == index ? 'svg-icon-yellow' : 'svg-icon-green'">
                 <SvgIcon :svgid="menuData.icon"></SvgIcon>
@@ -34,7 +33,7 @@ export default {
     SvgIcon,
   },
   // 数据
-  data () {
+  data() {
     return {
       activeIndex: 0,
       menuDatas: [
@@ -76,25 +75,21 @@ export default {
         },
         {
           icon: "svg-easy-compass",
-          path: "/windsite/standalone",
-		},
+          path: "/windsite/map1",
+        },
       ],
     };
   },
   // 函数
   methods: {
-    clickMenu: function (index) {
+    clickMenu: function(index) {
       this.activeIndex = index;
-    }
-  },
-
-  created () {
-
+    },
   },
 
-  mounted () {
+  created() {},
 
-  }
+  mounted() {},
 };
 </script>
 
@@ -170,7 +165,7 @@ export default {
             position: relative;
 
             &::after {
-              content: '';
+              content: "";
               width: calc(100% - 0.37vh);
               height: calc(100% - 0.37vh);
               position: absolute;

src/views/WindSite/pages/DraughtFanList.vue

@@ -21,7 +21,7 @@ export default {
     BtnGroup2,
   },
   // 数据
-  data () {
+  data() {
     return {
       btnGroups: [
         {
@@ -195,17 +195,17 @@ export default {
   // 函数
   methods: {
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "monitorwt/findWtInfoList",
         data: {
-          wpId: "MHS_FDC"
+          wpId: "MHS_FDC",
         },
-        success (res) {
-          res.data.forEach(ele => {
+        success(res) {
+          res.data.forEach((ele) => {
             for (let key in ele) {
               if (key !== "code" && key !== "lnid" && key !== "model" && key !== "pjid" && key !== "wpid") {
                 ele[key] = ele[key] || 0;
@@ -218,7 +218,7 @@ export default {
     },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -228,18 +228,16 @@ export default {
     });
   },
 
-  mounted () {
+  mounted() {},
 
-  },
-
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
   },
-}
+};
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .draught-fan-list {
   width: 100%;
   height: 100%;
@@ -263,7 +261,7 @@ export default {
     margin-top: 1.481vh;
 
     &:before {
-      content: '';
+      content: "";
       width: 0.37vh;
       height: 0.37vh;
       background: @write;

src/views/WindSite/pages/Home/Home.vue

@@ -1,39 +1,42 @@
 <template>
   <div class="wind-site-home">
+    <div class="mg-b-8">
+      <btn-group-double :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select" />
+    </div>
     <row>
       <wind-site-weather />
       <panel-3 class="wind-site-info">
         <row align="middle">
           <div class="info-item">
-            <div class="value">{{jczbmap.zjrl}}</div>
+            <div class="value">{{ jczbmap.zjrl }}</div>
             <div class="text">装机容量</div>
           </div>
           <div class="info-item">
-            <div class="value">{{jczbmap.rfdl}}</div>
+            <div class="value">{{ jczbmap.rfdl }}</div>
             <div class="text">日发电量</div>
           </div>
           <div class="info-item">
-            <div class="value">{{jczbmap.yfdl}}</div>
+            <div class="value">{{ jczbmap.yfdl }}</div>
             <div class="text">月发电量</div>
           </div>
           <div class="info-item">
-            <div class="value">{{jczbmap.nfdl}}</div>
+            <div class="value">{{ jczbmap.nfdl }}</div>
             <div class="text">年发电量</div>
           </div>
           <div class="info-item">
-            <div class="value">{{jczbmap.ylyxs}}</div>
+            <div class="value">{{ jczbmap.ylyxs }}</div>
             <div class="text">月利用小时</div>
           </div>
           <div class="info-item">
-            <div class="value">{{jczbmap.nlyxs}}</div>
+            <div class="value">{{ jczbmap.nlyxs }}</div>
             <div class="text">年利用小时</div>
           </div>
           <div class="info-item">
-            <div class="value">{{jczbmap.ssfs}}</div>
+            <div class="value">{{ jczbmap.ssfs }}</div>
             <div class="text">实时风速</div>
           </div>
           <div class="info-item">
-            <div class="value">{{jczbmap.sjgl}}</div>
+            <div class="value">{{ jczbmap.sjgl }}</div>
             <div class="text">实时功率</div>
           </div>
         </row>
@@ -46,65 +49,65 @@
             </div>
             <div class="info">
               <div class="text green">接入风机</div>
-              <div class="value">{{jczbmap.jrts}}</div>
+              <div class="value">{{ jczbmap.jrts }}</div>
             </div>
           </div>
           <div class="situation">
-            <row>
+            <row class="icon-status">
               <div class="status ">
-                <span class="svg-icon svg-icon-green">
-                  <svg-icon svgid="svg-风机" />
+                <span class="svg-icon svg-icon-purple">
+                  <svg-icon svgid="svg-standby" />
                 </span>
-                <span class="text green">
+                <span class="text purple">
                   待机
                 </span>
               </div>
               <div class="status ">
                 <span class="svg-icon svg-icon-green">
-                  <svg-icon svgid="svg-风机" />
+                  <svg-icon svgid="svg-normal-power" />
                 </span>
                 <span class="text green">
                   运行
                 </span>
               </div>
               <div class="status ">
-                <span class="svg-icon svg-icon-green">
-                  <svg-icon svgid="svg-风机" />
+                <span class="svg-icon svg-icon-yellow">
+                  <svg-icon svgid="svg-limit-power" />
                 </span>
-                <span class="text green">
+                <span class="text yellow">
                   限电
                 </span>
               </div>
               <div class="status ">
-                <span class="svg-icon svg-icon-green">
-                  <svg-icon svgid="svg-风机" />
+                <span class="svg-icon svg-icon-red">
+                  <svg-icon svgid="svg-gz-downtime" />
                 </span>
-                <span class="text green">
+                <span class="text red">
                   故障
                 </span>
               </div>
               <div class="status ">
-                <span class="svg-icon svg-icon-green">
-                  <svg-icon svgid="svg-风机" />
+                <span class="svg-icon svg-icon-orange">
+                  <svg-icon svgid="svg-jx-downtime" />
                 </span>
-                <span class="text green">
+                <span class="text orange">
                   检修
                 </span>
               </div>
               <div class="status ">
-                <span class="svg-icon svg-icon-green">
-                  <svg-icon svgid="svg-风机" />
+                <span class="svg-icon svg-icon-gray">
+                  <svg-icon svgid="svg-offline" />
                 </span>
-                <span class="text green">
-                  受累
+                <span class="text gray">
+                  离线
                 </span>
               </div>
               <div class="status ">
-                <span class="svg-icon svg-icon-green">
-                  <svg-icon svgid="svg-风机" />
+                <span class="svg-icon svg-icon-darkblue">
+                  <svg-icon svgid="svg-intranet-involvement" />
                 </span>
-                <span class="text green">
-                  离线
+                <span class="text darkblue">
+                  受限
                 </span>
               </div>
             </row>
@@ -114,7 +117,7 @@
                   待风
                 </span>
                 <span class="value">
-                  {{jczbmap.djnum}}
+                  {{ jczbmap.djnum }}
                 </span>
               </div>
               <div class="status">
@@ -122,7 +125,7 @@
                   正常出力
                 </span>
                 <span class="value">
-                  {{jczbmap.zcfdnum}}
+                  {{ jczbmap.zcfdnum }}
                 </span>
               </div>
               <div class="status">
@@ -130,7 +133,7 @@
                   降出力
                 </span>
                 <span class="value">
-                  {{jczbmap.xdjclnum}}
+                  {{ jczbmap.xdjclnum }}
                 </span>
               </div>
               <div class="status">
@@ -138,7 +141,7 @@
                   故障停机
                 </span>
                 <span class="value">
-                  {{jczbmap.gztjnum}}
+                  {{ jczbmap.gztjnum }}
                 </span>
               </div>
               <div class="status">
@@ -146,7 +149,7 @@
                   检修停机
                 </span>
                 <span class="value">
-                  {{jczbmap.jxtjnum}}
+                  {{ jczbmap.jxtjnum }}
                 </span>
               </div>
               <div class="status">
@@ -154,7 +157,7 @@
                   电网
                 </span>
                 <span class="value">
-                  {{jczbmap.dwslnum}}
+                  {{ jczbmap.dwslnum }}
                 </span>
               </div>
               <div class="status">
@@ -162,66 +165,7 @@
                   离线
                 </span>
                 <span class="value">
-                  {{jczbmap.lxnum}}
-                </span>
-              </div>
-            </row>
-            <row>
-              <div class="status">
-                <span class="text gray">
-                  手动停机
-                </span>
-                <span class="value">
-                  {{jczbmap.sdtjts}}
-                </span>
-              </div>
-              <div class="status">
-                <span class="text gray">
-                  降出力
-                </span>
-                <span class="value">
-                  {{jczbmap.qxjclnum}}
-                </span>
-              </div>
-              <div class="status">
-                <span class="text gray">
-                  停机
-                </span>
-                <span class="value">
-                  {{jczbmap.sdtjts}}
-                </span>
-              </div>
-              <div class="status">
-                <span class="text gray">
-                  场内受累
-                </span>
-                <span class="value">
-                  {{jczbmap.cnsltjnum}}
-                </span>
-              </div>
-              <div class="status">
-                <span class="text gray">
-                  产内受累
-                </span>
-                <span class="value">
-                  {{jczbmap.cnsljxnum}}
-                </span>
-              </div>
-
-              <div class="status">
-                <span class="text gray">
-                  环境
-                </span>
-                <span class="value">
-                  {{jczbmap.hjslnum}}
-                </span>
-              </div>
-              <div class="status">
-                <span class="text gray">
-                  未知
-                </span>
-                <span class="value">
-                  --
+                  {{ jczbmap.lxnum }}
                 </span>
               </div>
             </row>
@@ -231,51 +175,51 @@
     </row>
     <row>
       <Col :span="6">
-      <panel title="日度损失电量分析"></panel>
+        <panel title="日度损失电量分析"></panel>
       </Col>
       <Col :span="12">
-      <panel title="4小时功率曲线图">
-        <multiple-line-chart height="18.519vh" v-if="Powertrend" :list="Powertrend.value" :units="Powertrend.units" />
-      </panel>
+        <panel title="4小时功率曲线图">
+          <multiple-line-chart height="18.519vh" v-if="Powertrend" :list="Powertrend.value" :units="Powertrend.units" />
+        </panel>
       </Col>
       <Col :span="6">
-      <panel>
-        <light-matrix :list="fjmap" />
-      </panel>
+        <panel>
+          <light-matrix :list="fjmap" />
+        </panel>
       </Col>
     </row>
     <row>
       <Col :span="8">
-      <panel title="日度损失电量分析">
-        <dual-pie-chart :innerData="pieChartData.dayData" :outerData="pieChartData.dayData" height="21.296vh" />
-      </panel>
+        <panel title="日度损失电量分析">
+          <dual-pie-chart :innerData="pieChartData.dayData" :outerData="pieChartData.dayData" height="21.296vh" />
+        </panel>
       </Col>
       <Col :span="8">
-      <panel title="月度损失电量分析">
-        <dual-pie-chart :innerData="pieChartData.monthData" :outerData="pieChartData.monthData" height="21.296vh" />
-      </panel>
+        <panel title="月度损失电量分析">
+          <dual-pie-chart :innerData="pieChartData.monthData" :outerData="pieChartData.monthData" height="21.296vh" />
+        </panel>
       </Col>
       <Col :span="8">
-      <panel title="年度损失电量分析">
-        <dual-pie-chart :innerData="pieChartData.yearData" :outerData="pieChartData.yearData" height="21.296vh" />
-      </panel>
+        <panel title="年度损失电量分析">
+          <dual-pie-chart :innerData="pieChartData.yearData" :outerData="pieChartData.yearData" height="21.296vh" />
+        </panel>
       </Col>
     </row>
     <row>
       <Col :span="8">
-      <panel title="日度损失电量分析">
-        <hover-bar-chart :list="dayLost" height="21.296vh" />
-      </panel>
+        <panel title="日度损失电量分析">
+          <hover-bar-chart :list="dayLost" height="21.296vh" />
+        </panel>
       </Col>
       <Col :span="8">
-      <panel title="完成电量">
-        <multiple-bar-chart height="21.296vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units" />
-      </panel>
+        <panel title="完成电量">
+          <multiple-bar-chart height="21.296vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units" />
+        </panel>
       </Col>
       <Col :span="8">
-      <panel title="月发电量对比">
-        <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
-      </panel>
+        <panel title="月发电量对比">
+          <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
+        </panel>
       </Col>
     </row>
   </div>
@@ -287,6 +231,7 @@ import MultipleBarChart from "../../../../components/chart/bar/multiple-bar-char
 import MultipleLineChart from "../../../../components/chart/line/multiple-line-chart.vue";
 import NormalLineChart from "../../../../components/chart/line/normal-line-chart.vue";
 import DualPieChart from "../../../../components/chart/pie/dual-pie-chart.vue";
+import BtnGroupDouble from "../../../../components/coms/btn/btn-group-double.vue";
 import Col from "../../../../components/coms/grid/col.vue";
 import Row from "../../../../components/coms/grid/row.vue";
 import SvgIcon from "../../../../components/coms/icon/svg-icon.vue";
@@ -298,9 +243,9 @@ export default {
   // 名称
   name: "WindSiteHome",
   // 使用组件
-  components: { WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix },
+  components: { WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix, BtnGroupDouble },
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 计时器
       fjmap: [], // 分机矩阵
@@ -321,12 +266,13 @@ export default {
           {
             title: "发电量",
             yAxisIndex: 0,
-            value: []
-          }, {
+            value: [],
+          },
+          {
             title: "预测电量",
             yAxisIndex: 1,
-            value: []
-          }
+            value: [],
+          },
         ],
         units: [""],
       },
@@ -336,23 +282,25 @@ export default {
       // 月发电量对比
       MonthCompare: {
         units: ["(MK)"],
-        value: [{
-          title: "月发电量",
-          yAxisIndex: 0,
-          value: []
-        }, {
-          title: "月预测电量",
-          yAxisIndex: 0,
-          value: []
-        }]
+        value: [
+          {
+            title: "月发电量",
+            yAxisIndex: 0,
+            value: [],
+          },
+          {
+            title: "月预测电量",
+            yAxisIndex: 0,
+            value: [],
+          },
+        ],
       },
     };
   },
   // 函数
   methods: {
-
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       this.requestWpInfo(showLoading);
       this.requestLoss(showLoading);
       this.requestPower(showLoading);
@@ -360,73 +308,88 @@ export default {
     },
 
     // 获取场站监视数据
-    requestWpInfo (showLoading) {
+    requestWpInfo(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "monitor/findWpInfoBywpId",
         data: {
-          wpId: "MHS_FDC"
+          wpId: "MHS_FDC",
         },
-        success (res) {
+        success(res) {
           if (res.data) {
             let fjmap = [];
-            let keys = ["value1", "value2", "value3", "value4", "value5", "value6", "value7", "value9",];
+            let keys = ["value1", "value2", "value3", "value4", "value5", "value6", "value7", "value9"];
             let Powertrend = {
               // 图表所用单位
               units: ["(万KWh)", "(风速)"],
-              value: [{
-                title: "应发功率",
-                yAxisIndex: 1, // 使用单位
-                value: []
-              }, {
-                title: "实发功率",
-                yAxisIndex: 1, // 使用单位
-                value: []
-              }, {
-                title: "理论功率",
-                yAxisIndex: 1, // 使用单位
-                value: []
-              }, {
-                title: "预测功率",
-                yAxisIndex: 1, // 使用单位
-                value: []
-              }, {
-                title: "保证功率",
-                yAxisIndex: 1, // 使用单位
-                value: []
-              }, {
-                title: "平均风速",
-                yAxisIndex: 1, // 使用单位
-                value: []
-              }, {
-                title: "小时预测功率",
-                yAxisIndex: 1, // 使用单位
-                value: []
-              }, {
-                title: "最有功率律",
-                yAxisIndex: 1, // 使用单位
-                value: []
-              }]
+              value: [
+                {
+                  title: "应发功率",
+                  yAxisIndex: 1, // 使用单位
+                  value: [],
+                },
+                {
+                  title: "实发功率",
+                  yAxisIndex: 1, // 使用单位
+                  value: [],
+                },
+                {
+                  title: "理论功率",
+                  yAxisIndex: 1, // 使用单位
+                  value: [],
+                },
+                {
+                  title: "预测功率",
+                  yAxisIndex: 1, // 使用单位
+                  value: [],
+                },
+                {
+                  title: "保证功率",
+                  yAxisIndex: 1, // 使用单位
+                  value: [],
+                },
+                {
+                  title: "平均风速",
+                  yAxisIndex: 1, // 使用单位
+                  value: [],
+                },
+                {
+                  title: "小时预测功率",
+                  yAxisIndex: 1, // 使用单位
+                  value: [],
+                },
+                {
+                  title: "最有功率律",
+                  yAxisIndex: 1, // 使用单位
+                  value: [],
+                },
+              ],
             };
 
-            let dayPieChartKey = [{
-              key: "gzssdl",
-              name: "故障损失电量"
-            }, {
-              key: "jxssdl",
-              name: "检修损失电量"
-            }, {
-              key: "qfssdl",
-              name: "性能损失电量"
-            }, {
-              key: "slssdl",
-              name: "受累损失电量"
-            }, {
-              key: "xdssdl",
-              name: "限电损失电量"
-            }];
+            let dayPieChartKey = [
+              {
+                key: "gzssdl",
+                name: "故障损失电量",
+              },
+              {
+                key: "jxssdl",
+                name: "检修损失电量",
+              },
+              {
+                key: "qfssdl",
+                name: "性能损失电量",
+              },
+              {
+                key: "slssdl",
+                name: "受累损失电量",
+              },
+              {
+                key: "xdssdl",
+                name: "限电损失电量",
+              },
+            ];
 
             // 饼图 1 数据
             let dayData = [];
@@ -437,7 +400,7 @@ export default {
             // 饼图 2 数据
             let yearData = [];
 
-            res.data.fjjzmap.fjmap[0].forEach(ele => {
+            res.data.fjjzmap.fjmap[0].forEach((ele) => {
               fjmap.push({
                 tag: ele.wtnum,
                 color: "gray",
@@ -445,15 +408,15 @@ export default {
             });
 
             keys.forEach((key, keyIndex) => {
-              res.data.glvos.forEach(ele => {
+              res.data.glvos.forEach((ele) => {
                 Powertrend.value[keyIndex].value.push({
                   text: "",
-                  value: ele[key] || 0
+                  value: ele[key] || 0,
                 });
               });
             });
 
-            dayPieChartKey.forEach(ele => {
+            dayPieChartKey.forEach((ele) => {
               dayData.push({
                 value: res.data.wxssmap["r" + ele.key] || 0,
                 unit: "万kwh",
@@ -479,7 +442,7 @@ export default {
             that.pieChartData = {
               dayData,
               monthData,
-              yearData
+              yearData,
             };
           } else {
             that.fjmap = [];
@@ -488,59 +451,61 @@ export default {
             that.pieChartData = {
               dayData: [],
               monthData: [],
-              yearData: []
+              yearData: [],
             };
           }
-
         },
       });
     },
 
     // 获取日度损失电量分析
-    requestLoss (showLoading) {
+    requestLoss(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "monitor/findLossWpBar",
         data: {
-          wpId: "MHS_FDC"
+          wpId: "MHS_FDC",
         },
-        success (res) {
+        success(res) {
           let dayLost = [];
-          res.data.forEach(ele => {
+          res.data.forEach((ele) => {
             dayLost.push({
               text: ele.timestr,
               value: ele.value1 || 0,
             });
           });
           that.dayLost = dayLost;
-        }
+        },
       });
     },
 
     // 获取完成电量
-    requestPower (showLoading) {
+    requestPower(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "monitor/findPowerWpBar",
         data: {
-          wpId: "MHS_FDC"
+          wpId: "MHS_FDC",
         },
-        success (res) {
-          let data = [{
-            title: "发电量",
-            yAxisIndex: 0,
-            value: []
-          }, {
-            title: "预测电量",
-            yAxisIndex: 1,
-            value: []
-          }];
-
-          res.data.forEach(ele => {
+        success(res) {
+          let data = [
+            {
+              title: "发电量",
+              yAxisIndex: 0,
+              value: [],
+            },
+            {
+              title: "预测电量",
+              yAxisIndex: 1,
+              value: [],
+            },
+          ];
+
+          res.data.forEach((ele) => {
             data[0].value.push({
               text: ele.timestr,
               value: ele.value1 || 0,
@@ -552,32 +517,35 @@ export default {
           });
 
           that.CompleteElectricity.data = data;
-        }
+        },
       });
     },
 
     // 获取月发电量对比
-    requestMonthPower (showLoading) {
+    requestMonthPower(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "monitor/findMonthPowerWpBar",
         data: {
-          wpId: "MHS_FDC"
+          wpId: "MHS_FDC",
         },
-        success (res) {
-          let data = [{
-            title: "月发电量",
-            yAxisIndex: 0,
-            value: []
-          }, {
-            title: "月预测电量",
-            yAxisIndex: 0,
-            value: []
-          }];
-
-          res.data.forEach(ele => {
+        success(res) {
+          let data = [
+            {
+              title: "月发电量",
+              yAxisIndex: 0,
+              value: [],
+            },
+            {
+              title: "月预测电量",
+              yAxisIndex: 0,
+              value: [],
+            },
+          ];
+
+          res.data.forEach((ele) => {
             data[0].value.push({
               text: ele.timestr,
               value: ele.value1 || 0,
@@ -589,15 +557,14 @@ export default {
           });
 
           that.MonthCompare.value = data;
-        }
+        },
       });
-    }
+    },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
-
       that.requestData(false);
 
       that.timmer = setInterval(() => {
@@ -606,19 +573,16 @@ export default {
     });
   },
 
-  mounted () {
+  mounted() {},
 
-  },
-
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
   },
-
 };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .wind-site-home {
   .wind-site-info {
     margin-left: 0.7407vh;
@@ -659,10 +623,9 @@ export default {
 
       .fengji-icon {
         padding: 1.111vh;
-        border: 0.093vh solid #05bb4c;
         border-radius: 50%;
-        border-right-color: transparent;
-        border-top-color: transparent;
+        box-shadow: inset 1.5px -1px 1px 0px @green;
+
         svg {
           width: 3.333vh;
           height: 3.333vh;
@@ -701,8 +664,8 @@ export default {
         align-items: center;
         padding: 0.37vh 0;
         svg {
-          width: 1.111vh;
-          height: 1.111vh;
+          width: 1.8519vh;
+          height: 1.8519vh;
           margin-right: 0.37vh;
         }
         .text {
@@ -715,6 +678,21 @@ export default {
           padding-right: 0.741vh;
         }
       }
+
+      .icon-status {
+        .text {
+          font-size: @fontsize;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+
+  .light-matrix-panel {
+    height: 100%;
+
+    .panel-body {
+      height: 100%;
     }
   }
 }

src/views/WindSite/pages/Home/light-matrix.vue

@@ -24,18 +24,14 @@ export default {
         //   tag: "A01",
         //   color: "gray",
         // }
-      ]
-    }
+      ],
+    },
   },
   // 数据
-  data () {
-    return {
-
-    };
+  data() {
+    return {};
   },
-  methods: {
-
-  }
+  methods: {},
 };
 </script>
 
@@ -44,6 +40,7 @@ export default {
 @titleHeight: 3.704vh;
 
 .light-matrix-small {
+  height: 100%;
   padding: 8px;
   background: fade(@gray, 20);
 
@@ -51,6 +48,7 @@ export default {
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
+  align-content: space-around;
 
   .blank {
     margin-right: 4px;
@@ -81,9 +79,9 @@ export default {
       border-color: @green;
     }
 
-    &.blue {
-      color: @darkBlue;
-      border-color: @darkBlue;
+    &.purple {
+      color: @purple;
+      border-color: @purple;
     }
 
     &.pink {
@@ -103,9 +101,9 @@ export default {
     }
 
     &.gray {
-      color: @write;
+      color: @darkgray;
       border-color: @darkgray;
-      background-color: @darkgray;
+      background-color: transparent;
     }
   }
 }

src/views/WindSite/pages/Home/wind-site-weather.vue

@@ -94,10 +94,6 @@ export default {
     color: @gray;
   }
 
-  .text {
-    margin-bottom: 0.741vh;
-  }
-
   .weather {
     display: inline-flex;
 
@@ -143,7 +139,7 @@ export default {
 
       .text {
         color: @gray;
-        width: 4.444vh;
+        width: 5.5vh;
       }
 
       .value {

src/views/WindSite/pages/LightMatrix.vue

@@ -65,22 +65,28 @@
           <div class="card-left">
             <div class="tag">{{ col.tag }}</div>
             <div class="icon">
-              <span class="svg-icon svg-icon-sm" :class="col.color == 'write' ? 'svg-icon-black' : col.color == 'gray' ? 'svg-icon-gray' : 'svg-icon-write'">
+              <span class="svg-icon svg-icon-sm" :class="col.color == 'black' ? 'svg-icon-black' : col.color == 'gray' ? 'svg-icon-gray' : 'svg-icon-write'">
                 <SvgIcon :svgid="col.icon"></SvgIcon>
               </span>
             </div>
           </div>
           <div class="card-right">
             <div class="num">
-              <i class="fa fa-user"></i>
+              <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
+                <SvgIcon svgid="svg-A"></SvgIcon>
+              </i>
               <span>{{ col.num1 }}</span>
             </div>
             <div class="num">
-              <i class="fa fa-user"></i>
+              <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
+                <SvgIcon svgid="svg-W"></SvgIcon>
+              </i>
               <span>{{ col.num2 }}</span>
             </div>
             <div class="num">
-              <i class="fa fa-user"></i>
+              <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
+                <SvgIcon svgid="svg-V"></SvgIcon>
+              </i>
               <span>{{ col.num3 }}</span>
             </div>
           </div>
@@ -309,7 +315,7 @@ export default {
         tempData[i].color = "red";
       }
       if (i == 118) {
-        tempData[i].color = "write";
+        tempData[i].color = "black";
       }
       if (i == 119) {
         tempData[i].color = "gray";
@@ -337,8 +343,8 @@ export default {
 @titleHeight: 3.704vh;
 
 .light-matrix {
-  width: 100%;
-  height: 100%;
+  width: calc(100% - 1.111vh);
+  height: calc(100vh - 7.222vh);
   display: flex;
   flex-direction: column;
 
@@ -347,7 +353,7 @@ export default {
     border: 0.093vh solid @darkgray;
     position: relative;
     padding: 1.111vh 2.222vh;
-    background-color: fade(@darkgray, 20%);
+    background-color: fade(@darkgray, 15%);
 
     .dot {
       width: 0.185vh;
@@ -375,7 +381,7 @@ export default {
 
     .panel-item-gf {
       width: 100%;
-      background-color: fade(@darkgray, 20%);
+      background-color: fade(@darkgray, 15%);
       display: flex;
       height: @panelHeight;
 
@@ -403,7 +409,7 @@ export default {
           border-bottom: 0.093vh solid fade(@darkgray, 40%);
           line-height: @panelHeight / 2;
           padding-right: 1.111vh;
-          font-size: @fontsize-s;
+          font-size: @fontsize;
         }
 
         .panel-item-gf-down {
@@ -411,7 +417,7 @@ export default {
           line-height: @panelHeight / 2;
           padding-right: 1.111vh;
           font-weight: 600;
-          font-size: @fontsize-s;
+          font-size: @fontsize;
         }
       }
     }
@@ -433,6 +439,7 @@ export default {
           padding: 0 1.111vh;
           display: flex;
           align-items: center;
+          font-size: @fontsize-s;
 
           .svg-icon {
             margin-left: auto;
@@ -467,11 +474,11 @@ export default {
       }
 
       &.green {
-        background-color: fade(@green, 20%);
+        background-color: fade(@green, 15%);
         color: @green;
 
         .panel-item-left {
-          background-color: fade(@green, 20%);
+          background-color: fade(@green, 15%);
         }
 
         .panel-item-right {
@@ -484,11 +491,11 @@ export default {
       }
 
       &.blue {
-        background-color: fade(@darkBlue, 20%);
+        background-color: fade(@darkBlue, 15%);
         color: @darkBlue;
 
         .panel-item-left {
-          background-color: fade(@darkBlue, 20%);
+          background-color: fade(@darkBlue, 15%);
         }
 
         .panel-item-right {
@@ -501,11 +508,11 @@ export default {
       }
 
       &.pink {
-        background-color: fade(@pink, 20%);
+        background-color: fade(@pink, 15%);
         color: @pink;
 
         .panel-item-left {
-          background-color: fade(@pink, 20%);
+          background-color: fade(@pink, 15%);
         }
 
         .panel-item-right {
@@ -518,11 +525,11 @@ export default {
       }
 
       &.red {
-        background-color: fade(@red, 20%);
+        background-color: fade(@red, 15%);
         color: @red;
 
         .panel-item-left {
-          background-color: fade(@red, 20%);
+          background-color: fade(@red, 15%);
         }
 
         .panel-item-right {
@@ -535,11 +542,11 @@ export default {
       }
 
       &.orange {
-        background-color: fade(@orange, 20%);
+        background-color: fade(@orange, 15%);
         color: @orange;
 
         .panel-item-left {
-          background-color: fade(@orange, 20%);
+          background-color: fade(@orange, 15%);
         }
 
         .panel-item-right {
@@ -552,11 +559,11 @@ export default {
       }
 
       &.gray {
-        background-color: fade(@darkgray, 20%);
+        background-color: fade(@darkgray, 15%);
         color: @gray;
 
         .panel-item-left {
-          background-color: fade(@darkgray, 20%);
+          background-color: fade(@darkgray, 15%);
         }
 
         .panel-item-right {
@@ -569,11 +576,11 @@ export default {
       }
 
       &.write {
-        background-color: fade(@write, 20%);
+        background-color: fade(@write, 15%);
         color: @write;
 
         .panel-item-left {
-          background-color: fade(@write, 20%);
+          background-color: fade(@write, 15%);
         }
 
         .panel-item-right {
@@ -592,10 +599,9 @@ export default {
     height: @titleHeight;
     line-height: @titleHeight;
     background-color: fade(@darkgray, 40%);
-    margin-top: 1.481vh;
 
     .panel-title-name {
-      font-size: 13px;
+      font-size: @fontsize-s;
       color: @green;
       display: flex;
       align-items: center;
@@ -605,14 +611,16 @@ export default {
       }
 
       .sub-title-item {
+        display: flex;
+
         .sub-title {
           color: @gray;
-          font-size: 13px;
+          font-size: @fontsize-s;
           margin: 0 0.556vh 0 1.481vh;
         }
 
         .sub-count {
-          font-size: 13px;
+          font-size: @fontsize-s;
           font-family: "Bicubik";
           font-weight: 500;
 
@@ -649,10 +657,9 @@ export default {
   }
 
   .panel-body {
-    flex-grow: 1;
     background-color: fade(@darkgray, 20%);
     padding: 0.741vh;
-    overflow: auto;
+    margin-bottom: 1.481vh;
     width: 100%;
     display: flex;
     flex-direction: row;
@@ -671,10 +678,11 @@ export default {
     }
 
     .card {
-      border: 0.093vh solid;
+      border: 1px solid;
 
       .card-panel {
         display: flex;
+        flex-grow: row;
 
         .card-left {
           width: 40%;
@@ -684,7 +692,7 @@ export default {
 
           .tag {
             color: @write;
-            font-size: 14px;
+            font-size: @fontsize-s;
             width: 100%;
             text-align: center;
           }
@@ -696,23 +704,30 @@ export default {
             justify-content: center;
 
             i {
-              font-size: 1.667vh;
+              font-size: 14px;
             }
           }
         }
 
         .card-right {
           width: 60%;
+          margin-top: 2px;
 
           .num {
             width: 100%;
             font-size: 14px;
             text-align: left;
             padding-right: 0.278vh;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
 
             i {
               margin: 0 0.37vh;
             }
+            span {
+              flex: 1;
+            }
           }
         }
       }
@@ -721,7 +736,7 @@ export default {
         height: 0.926vh;
         padding: 0.093vh 0.185vh;
         position: relative;
-        border-top: 0.093vh solid;
+        border-top: 1px solid;
         background-color: transparent;
 
         .percent {
@@ -735,7 +750,7 @@ export default {
 
       &.blue {
         border-color: @darkBlue;
-        background-color: fade(@darkBlue, 30%);
+        background-color: fade(@darkBlue, 15%);
 
         .card-panel {
           .card-left {
@@ -746,8 +761,10 @@ export default {
             }
 
             .icon {
-              i {
-                color: @write;
+              svg {
+                use {
+                  fill: @write;
+                }
               }
             }
           }
@@ -766,7 +783,7 @@ export default {
 
       &.pink {
         border-color: @pink;
-        background-color: fade(@pink, 30%);
+        background-color: fade(@pink, 15%);
 
         .card-panel {
           .card-left {
@@ -777,8 +794,10 @@ export default {
             }
 
             .icon {
-              i {
-                color: @write;
+              svg {
+                use {
+                  fill: @write;
+                }
               }
             }
           }
@@ -797,7 +816,7 @@ export default {
 
       &.orange {
         border-color: @orange;
-        background-color: fade(@orange, 30%);
+        background-color: fade(@orange, 15%);
 
         .card-panel {
           .card-left {
@@ -808,8 +827,8 @@ export default {
             }
 
             .icon {
-              i {
-                color: @write;
+              use {
+                fill: @write;
               }
             }
           }
@@ -828,7 +847,7 @@ export default {
 
       &.green {
         border-color: @green;
-        background-color: fade(@green, 30%);
+        background-color: fade(@green, 15%);
 
         .card-panel {
           .card-left {
@@ -839,8 +858,8 @@ export default {
             }
 
             .icon {
-              i {
-                color: @write;
+              use {
+                fill: @write;
               }
             }
           }
@@ -859,7 +878,7 @@ export default {
 
       &.gray {
         border-color: @darkgray;
-        background-color: fade(@darkgray, 30%);
+        background-color: fade(@darkgray, 15%);
 
         .card-panel {
           .card-left {
@@ -870,8 +889,8 @@ export default {
             }
 
             .icon {
-              i {
-                color: @black;
+              use {
+                fill: @black;
               }
             }
           }
@@ -902,8 +921,8 @@ export default {
             }
 
             .icon {
-              i {
-                color: @write;
+              use {
+                fill: @write;
               }
             }
           }
@@ -920,7 +939,7 @@ export default {
         }
       }
 
-      &.write {
+      &.black {
         border-color: @write;
 
         .card-panel {
@@ -934,8 +953,12 @@ export default {
             }
 
             .icon {
-              i {
-                color: @black;
+              .svg-icon {
+                svg {
+                  use {
+                    fill: @black;
+                  }
+                }
               }
             }
           }

src/views/WindSite/pages/Map.vue

@@ -9,27 +9,139 @@
           <SvgIcon svgid="svg-wind-site"></SvgIcon>
         </span>
         <span class="green">某某某风电场</span>
-        <div class="sub-title-item green">
-          <span class="sub-title">aaaa</span>
-          <span class="sub-count">56</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="panel-body">
-      <div id="map-1" dojotype="dijit.layout.ContentPane" region="center"></div>
+      <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>
-import Map from "@arcgis/core/Map";
-import Basemap from "@arcgis/core/Basemap";
-import MapView from "@arcgis/core/views/MapView";
-import SceneView from "@arcgis/core/views/SceneView";
-import MapImageLayer from "@arcgis/core/layers/MapImageLayer";
 import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
-import "@arcgis/core/assets/esri/themes/light/main.css";
+import arcgis from "@com/arcgis/arcgis.vue";
+import dataService from "@/helper/data.js";
 
 export default {
   // 名称
@@ -38,6 +150,7 @@ export default {
   components: {
     BtnGroup2,
     SvgIcon,
+    arcgis,
   },
   // 数据
   data() {
@@ -90,10 +203,32 @@ export default {
           ],
         },
       ],
+      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: {},
+  methods: {
+    when: function() {
+      let jsonObj = dataService.get("arcgis-nx-fc1");
+      let lineJsonObj = dataService.get("arcgis-nx-fc1-line");
+      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
+    },
+    clickMap: function(info) {
+      console.log(info);
+      this.showPopup = true;
+    },
+    popupBack: function() {
+      this.showPopup = false;
+    },
+  },
   // 生命周期钩子
   beforeCreate() {
     // 创建前
@@ -106,44 +241,6 @@ export default {
   },
   mounted() {
     // 渲染后
-    const MapURL = "http://61.161.152.110:12345/arcgis/rest/services/NX_MAP_14/MapServer";
-    const FeaturepURL = "http://61.161.152.110:12345/arcgis/services/NX_MAP_14/MapServer/FeatureServer";
-    const basemap = new Basemap({
-      // 底图
-      baseLayers: [
-        new MapImageLayer({
-          url: MapURL,
-          title: "宁夏地图",
-          spatialReference: 4326,
-        }),
-      ],
-      title: "宁夏地图",
-      spatialReference: 4326,
-    });
-    const map = new Map({
-      // 地图容器
-      basemap: basemap,
-    });
-    const view = new SceneView({
-      // 3D显示图层
-      map: map,
-      center: [106.230909, 38.487193],
-      camera: {
-        position: {
-          x: 106.230909, // lon
-          y: 38.487193, // lat
-          z: 654, // elevation in meters
-        },
-        tilt: 65,
-      },
-      container: this.$el.querySelector("#map-1"),
-    });
-    view.scale = 128000;
-    //去掉版权
-    view.ui._removeComponents(["attribution"]);
-
-    // 当地图加载完成
-    view.when(() => {});
   },
   beforeUpdate() {
     // 数据更新前
@@ -170,34 +267,45 @@ export default {
 
   .panel-title {
     width: 100%;
-    height: @titleHeight;
-    line-height: @titleHeight;
     background-color: fade(@darkgray, 40%);
     margin-top: 1.481vh;
+    padding: 6px;
+    display: flex;
+    align-items: center;
 
     .panel-title-name {
-      font-size: 13px;
       color: @green;
       display: flex;
       align-items: center;
+      line-height: 0;
+      font-size: 0;
 
       i,
       span {
         margin: 0 0 0 1.481vh;
+        line-height: 0;
+        font-size: 13px;
       }
     }
 
     .sub-title-item {
+      display: flex;
+      align-items: center;
+      margin-left: 16px;
+
       .sub-title {
         font-size: 13px;
-        margin: 0 0 0 1.481vh;
+        margin-left: 6px;
       }
 
       .sub-count {
         font-size: 13px;
-        font-family: "Bicubik";
         font-weight: 500;
       }
+
+      img {
+        height: 31px;
+      }
     }
   }
 
@@ -206,10 +314,103 @@ export default {
     background-color: fade(@darkgray, 20%);
     padding: 0.741vh;
     overflow: auto;
+    position: relative;
+
+    .map-popup-panel {
+      width: 679px;
+      position: absolute;
+      left: 71px;
+      top: 22px;
+
+      .map-popup-panel-header {
+        width: 100%;
+        background: fade(#152221, 90%);
+        display: flex;
+
+        .map-popup-panel-title {
+          padding: 17px 24px;
+          font-size: @fontsize-s;
+          position: relative;
+
+          &::before,
+          &::after {
+            position: absolute;
+            width: calc(50% - 6px);
+            bottom: 0;
+            border-bottom: 2px solid @green;
+          }
+
+          &::before {
+            content: "";
+            left: 0;
+          }
+
+          &::after {
+            content: "";
+            right: 0;
+          }
 
-    #map-1 {
-      width: 100%;
-      height: 100%;
+          span {
+            position: absolute;
+            width: 11.3px;
+            height: 11.3px;
+            border-left: 2px solid @green;
+            border-top: 2px solid @green;
+            left: calc(50% - 5.65px);
+            bottom: -3px;
+            transform: rotate(45deg);
+          }
+        }
+
+        .map-popup-panel-date {
+          flex-grow: 1;
+          padding: 17px 24px;
+          font-size: @fontsize-s;
+          text-align: right;
+          border-bottom: 2px solid @green;
+        }
+
+        .map-popup-panel-back {
+          margin-left: auto;
+          width: 54px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          cursor: pointer;
+
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            height: 50%;
+            border-left: 1px solid @gray;
+            top: 25%;
+          }
+        }
+      }
+
+      .map-popup-panel-body {
+        background: fade(#152221, 75%);
+        border: 1px solid fade(@darkgray, 40);
+        border-top: 0px;
+
+        .table-form {
+          .text,
+          .unit {
+            font-weight: 400;
+          }
+
+          .unit {
+            min-width: auto;
+          }
+
+          .value,
+          .unit {
+            text-align: left;
+          }
+        }
+      }
     }
   }
 }

src/views/WindSite/pages/Map1.vue

@@ -0,0 +1,420 @@
+<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>
+        <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="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>
+import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import arcgis from "@com/arcgis/arcgis.vue";
+import dataService from "@/helper/data.js";
+
+export default {
+  // 名称
+  name: "Map1",
+  // 使用组件
+  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: [106.230909, 38.487193], // 初始中心点
+        height: 654, // 3D地图初始相机高度
+        tilt: 65, // 俯视角
+        scale: 15000,
+      },
+      showPopup: false,
+    };
+  },
+  // 函数
+  methods: {
+    when: function() {
+      let jsonObj = dataService.get("arcgis-nx-fc1");
+      let lineJsonObj = dataService.get("arcgis-nx-fc1-line");
+      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
+      setTimeout(() => {
+        this.$refs.arcgis.goto([106.50778412800003, 37.766672373000006]);
+      }, 3000);
+    },
+    clickMap: function(info) {
+      console.log(info);
+      this.showPopup = true;
+    },
+    popupBack: function() {
+      this.showPopup = false;
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@titleHeight: 3.704vh;
+
+.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;
+    display: flex;
+    align-items: center;
+
+    .panel-title-name {
+      color: @green;
+      display: flex;
+      align-items: center;
+      line-height: 0;
+      font-size: 0;
+
+      i,
+      span {
+        margin: 0 0 0 1.481vh;
+        line-height: 0;
+        font-size: 13px;
+      }
+    }
+
+    .sub-title-item {
+      display: flex;
+      align-items: center;
+      margin-left: 16px;
+
+      .sub-title {
+        font-size: 13px;
+        margin-left: 6px;
+      }
+
+      .sub-count {
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      img {
+        height: 31px;
+      }
+    }
+  }
+
+  .panel-body {
+    flex-grow: 1;
+    background-color: fade(@darkgray, 20%);
+    padding: 0.741vh;
+    overflow: auto;
+    position: relative;
+
+    .map-popup-panel {
+      width: 679px;
+      position: absolute;
+      left: 71px;
+      top: 22px;
+
+      .map-popup-panel-header {
+        width: 100%;
+        background: fade(#152221, 90%);
+        display: flex;
+
+        .map-popup-panel-title {
+          padding: 17px 24px;
+          font-size: @fontsize-s;
+          position: relative;
+
+          &::before,
+          &::after {
+            position: absolute;
+            width: calc(50% - 6px);
+            bottom: 0;
+            border-bottom: 2px solid @green;
+          }
+
+          &::before {
+            content: "";
+            left: 0;
+          }
+
+          &::after {
+            content: "";
+            right: 0;
+          }
+
+          span {
+            position: absolute;
+            width: 11.3px;
+            height: 11.3px;
+            border-left: 2px solid @green;
+            border-top: 2px solid @green;
+            left: calc(50% - 5.65px);
+            bottom: -3px;
+            transform: rotate(45deg);
+          }
+        }
+
+        .map-popup-panel-date {
+          flex-grow: 1;
+          padding: 17px 24px;
+          font-size: @fontsize-s;
+          text-align: right;
+          border-bottom: 2px solid @green;
+        }
+
+        .map-popup-panel-back {
+          margin-left: auto;
+          width: 54px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          cursor: pointer;
+
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            height: 50%;
+            border-left: 1px solid @gray;
+            top: 25%;
+          }
+        }
+      }
+
+      .map-popup-panel-body {
+        background: fade(#152221, 75%);
+        border: 1px solid fade(@darkgray, 40);
+        border-top: 0px;
+
+        .table-form {
+          .text,
+          .unit {
+            font-weight: 400;
+          }
+
+          .unit {
+            min-width: auto;
+          }
+
+          .value,
+          .unit {
+            text-align: left;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/WindSite/pages/Matrix.vue

@@ -293,7 +293,8 @@ export default {
             width: 100%;
             font-size: 13px;
             text-align: right;
-            padding-right: 0.278vh;
+            padding-right: 0.3704vh;
+            margin: 0.1852vh 0;
           }
         }
       }
@@ -316,7 +317,7 @@ export default {
 
       &.blue {
         border-color: @darkBlue;
-        background-color: fade(@darkBlue, 30%);
+        background-color: fade(@darkBlue, 15%);
 
         .card-panel {
           .card-left {
@@ -341,7 +342,7 @@ export default {
 
       &.pink {
         border-color: @pink;
-        background-color: fade(@pink, 30%);
+        background-color: fade(@pink, 15%);
 
         .card-panel {
           .card-left {
@@ -366,7 +367,7 @@ export default {
 
       &.orange {
         border-color: @orange;
-        background-color: fade(@orange, 30%);
+        background-color: fade(@orange, 15%);
 
         .card-panel {
           .card-left {
@@ -391,7 +392,7 @@ export default {
 
       &.gray {
         border-color: @darkgray;
-        background-color: fade(@darkgray, 30%);
+        background-color: fade(@darkgray, 15%);
 
         .card-panel {
           .card-left {

src/views/WindSite/pages/Tower.vue

@@ -9,8 +9,24 @@
     <WindTower></WindTower>
     <dash-pie-chart class="pie-left" :title="item.title" :value="item.value" height="9.722vh" width="9.722vh" />
     <dash-pie-chart class="pie-right" :title="item.title" :value="item.value" height="9.722vh" width="9.722vh" />
-    <Panel class="panel-top" title="日资源玫瑰图"></Panel>
-    <Panel class="panel-bottom" title="月资源玫瑰图"></Panel>
+    <Panel class="panel-top" title="日资源玫瑰图">
+      <div class="direction-chart">
+        <DirectionRadarChart width="70%" height="152px" :value="ri_value" />
+        <div class="legend">
+          <span class="dot bg-purple"></span>
+          <span>静风频率为11</span>
+        </div>
+      </div>
+    </Panel>
+    <Panel class="panel-bottom" title="月资源玫瑰图">
+      <div class="direction-chart">
+        <DirectionRadarChart width="70%" height="152px" :value="ri_value" />
+        <div class="legend">
+          <span class="dot bg-purple"></span>
+          <span>静风频率为11</span>
+        </div>
+      </div>
+    </Panel>
     <toolbar-panel class="rose-chart" title="月资源玫瑰图">
       <template v-slot:tools>
         <div class="tools">
@@ -56,6 +72,7 @@ import Panel from "@com/coms/panel/panel.vue";
 import MultipleLineChart from "@com/chart/line/multiple-line-chart.vue";
 import WindTower from "./Tower/WindTower.vue";
 import DashPieChart from "@com/chart/pie/dash-pie-chart.vue";
+import DirectionRadarChart from "@com/chart/radar/radar-chart.vue";
 export default {
   // 名称
   name: "Tower",
@@ -68,6 +85,7 @@ export default {
     WindTower,
     DashPieChart,
     Panel,
+    DirectionRadarChart,
   },
   // 传入参数
   props: {},
@@ -291,6 +309,15 @@ export default {
         title: "风速",
         value: 12.3,
       },
+      ri_value: {
+        indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
+        data: [
+          {
+            value: [44200, 14200, 20000, 35000, 50000, 38000],
+            name: "NAME",
+          },
+        ],
+      },
     };
   },
   // 函数
@@ -336,27 +363,46 @@ export default {
     left: 28.333vh;
     width: 4.167vh;
   }
+
   .windmill-2 {
     top: 8.333vh;
     left: 11.111vh;
     width: 3.426vh;
   }
+
   .windmill-3 {
     top: 4.63vh;
     left: 38.889vh;
     width: 2.593vh;
   }
+
   .windmill-4 {
     top: 21.296vh;
     left: 122.87vh;
     width: 3.426vh;
   }
+
   .windmill-5 {
     top: 5.556vh;
     left: 121.296vh;
     width: 2.407vh;
   }
 
+  .direction-chart {
+    .legend {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .dot {
+        width: 7px;
+        height: 7px;
+        display: inline-block;
+        margin-right: 8px;
+      }
+    }
+  }
+
   .pie-left,
   .pie-right {
     position: fixed;

src/views/layout/Menu.vue

@@ -18,7 +18,7 @@
   <div class="sub-menu" v-show="isShowSubMenu">
     <ul class="menu-list">
       <li class="menu-item" v-for="(menu, index) of subMenu" @click="subclick(index)" :key="menu" :class="{ active: subIndex == index }">
-        <router-link :to="menu.path">
+        <router-link :to="{ path: menu.path, query: { root: currRoot } }">
           <div class="menu-icon svg-icon">
             <SvgIcon :svgid="menu.icon"></SvgIcon>
           </div>
@@ -143,7 +143,28 @@ export default {
         {
           id: "health",
           text: "健康管理",
-          data: [],
+          data: [
+            {
+              text: "健康管理1",
+              icon: "svg-wind-site",
+              path: "/health1",
+            },
+            {
+              text: "健康管理2",
+              icon: "svg-wind-site",
+              path: "/health2",
+            },
+            {
+              text: "健康管理3",
+              icon: "svg-wind-site",
+              path: "/health3",
+            },
+            {
+              text: "健康管理4",
+              icon: "svg-wind-site",
+              path: "/health4",
+            },
+          ],
         },
         {
           id: "decision",
@@ -347,7 +368,7 @@ export default {
 
       .sub-menu-text {
         margin-left: 1.1111vh;
-        color: @gray;
+        color: @gray-l;
       }
 
       & + .menu-item {