Merge branch 'yx' of http://61.161.152.110:10101/r/electronic-map into yx

# Conflicts:
#	src/router/index.js
#	src/views/layout/Menu.vue

public/static/config/modeConfig.js

@@ -9,7 +9,8 @@ let baseURL = null;
 let websocketUrl = null;
 
 if (localTest) {
-  baseURL = "http://192.168.10.23:8082/" // 联机调试 - 石林
+  // baseURL = "http://192.168.10.23:8082/" // 联机调试 - 石林
+  baseURL = "http://192.168.10.18:8082/" // 联机调试 - 石林
   websocketUrl = (baseURL.replace(/http:\/\//g, "")) + "gyee-websocket";
 } else {
   baseURL = "http://10.155.32.4:8082/" // 正式环境

src/assets/icon/svg/wind-info/availability.svg

@@ -0,0 +1,33 @@
+<?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="74.992px" height="83px" viewBox="64.504 59.5 74.992 83" enable-background="new 64.504 59.5 74.992 83"
+	 xml:space="preserve">
+<g id="图层_2">
+	<g>
+		<g>
+			<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M133.668,91.877c-2.572-0.058-5.293-1.722-6.924-4.529
+				c-1.677-2.886-1.728-6.161-0.38-8.412c-4.349-4.738-10.074-8.208-16.553-9.773c-1.396,2.043-4.122,3.431-7.257,3.431
+				c-3.247,0-6.047-1.491-7.394-3.654c-6.878,1.442-12.961,5.018-17.527,9.994c1.349,2.25,1.299,5.527-0.378,8.414
+				c-1.631,2.807-4.352,4.471-6.924,4.529c-0.844,2.896-1.303,5.956-1.303,9.123c0,3.571,0.58,7.007,1.643,10.225
+				c2.469,0.19,5.025,1.836,6.584,4.519c1.509,2.598,1.697,5.51,0.739,7.707c4.523,4.774,10.467,8.204,17.166,9.609
+				c1.347-2.164,4.147-3.655,7.394-3.655c3.135,0,5.861,1.388,7.258,3.432c6.3-1.522,11.892-4.842,16.194-9.382
+				c-0.961-2.198-0.772-5.111,0.737-7.711c1.559-2.683,4.113-4.328,6.582-4.519c1.063-3.218,1.645-6.652,1.645-10.225
+				C134.971,97.833,134.512,94.774,133.668,91.877z M102.539,128.298c-14.869,0-26.922-11.981-26.922-26.761
+				c0-14.778,12.053-26.759,26.922-26.759c14.867,0,26.921,11.981,26.921,26.759C129.46,116.316,117.406,128.298,102.539,128.298z"
+				/>
+		</g>
+	</g>
+</g>
+<g id="图层_3">
+	<g>
+		<g>
+			<path fill-rule="evenodd" clip-rule="evenodd" opacity="0.2" fill="#FFFFFF" d="M102.387,79.763c-12.084,0-21.882,9.749-21.882,21.775
+				s9.797,21.775,21.882,21.775c12.087,0,21.883-9.749,21.883-21.775S114.474,79.763,102.387,79.763z M102.251,119.952
+				c-10.112,0-18.309-8.197-18.309-18.309s8.197-18.309,18.309-18.309c10.11,0,18.308,8.197,18.308,18.309
+				S112.361,119.952,102.251,119.952z"/>
+		</g>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/wind-info/base-info.svg

@@ -0,0 +1,13 @@
+<?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" id="图层_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="74.992px" height="83px" viewBox="64.504 59.5 74.992 83" enable-background="new 64.504 59.5 74.992 83"
+	 xml:space="preserve">
+<path fill="#FFFFFF" d="M110.48,101.222c0,0-0.854,0.632-1.764,1.838l-2.854-1.28c0.121-0.408,0.198-0.823,0.186-1.267
+	c-0.039-2-1.456-3.633-3.342-4.093l0.404-3.092c0.82-0.115,1.688-0.317,2.578-0.676l-2.085-32.85c0,0-1.776-0.728-3.291,0.079
+	l-2.535,32.906c0,0,0.983,0.412,2.503,0.577l0.294,3.044c-1.956,0.474-3.395,2.209-3.362,4.262c0.009,0.386,0.083,0.747,0.189,1.098
+	l-2.947,1.204c-0.504-0.64-1.12-1.258-1.88-1.833l-28.072,18.182c0,0,0.235,1.87,1.717,2.738l30.428-14.302
+	c0,0-0.131-1.034-0.735-2.407l2.545-1.774c0.828,0.838,1.976,1.353,3.259,1.331c1.212-0.021,2.309-0.521,3.091-1.313l2.521,1.88
+	c-0.308,0.751-0.559,1.579-0.687,2.515l30.152,14.664c0,0,1.534-1.145,1.572-2.825L110.48,101.222z"/>
+</svg>

src/assets/icon/svg/wind-info/parameter.svg

@@ -0,0 +1,21 @@
+<?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" id="图层_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="74.992px" height="83px" viewBox="64.504 59.5 74.992 83" enable-background="new 64.504 59.5 74.992 83"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path fill="#FFFFFF" d="M134.846,79.836l-7.168,2.967l0.906,2.121l7.168-2.963L134.846,79.836z M126.369,68.37l-5.496,5.42
+			l1.652,1.629l5.496-5.42L126.369,68.37z M102.764,59.5h-2.338v7.663h2.338V59.5z M73.79,71.238l5.495,5.42l1.652-1.629
+			l-5.495-5.421L73.79,71.238z M65.841,83.449l7.188,2.912l0.886-2.132l-7.189-2.91L65.841,83.449z M64.504,96.973h7.771v-2.305
+			h-7.771V96.973z M85.825,62.665l2.84,7.132l2.172-0.842l-2.839-7.133L85.825,62.665z M103.057,99.442l5.326-18.354L97.484,96.943
+			L103.057,99.442z M111.727,68.673l2.133,0.94l3.168-6.998l-2.135-0.939L111.727,68.673z M130.914,94.668v2.305h7.771v-2.305
+			H130.914z M131.686,74.005l-5.496,3.658l0.668,0.977l5.496-3.659L131.686,74.005z M121.406,64.393l-3.682,5.44l0.996,0.652
+			l3.682-5.437L121.406,64.393z M94.716,60.364l1.299,6.411l1.173-0.229l-1.299-6.414L94.716,60.364z M71.046,76.419l5.516,3.629
+			l0.663-0.979l-5.516-3.631L71.046,76.419z M65.553,89.639l6.508,1.253l0.23-1.154l-6.509-1.255L65.553,89.639z M81.142,66.011
+			l3.585,5.502l1.005-0.639l-3.584-5.498L81.142,66.011z M107.631,66.313l1.166,0.259l1.465-6.375l-1.17-0.262L107.631,66.313z
+			 M131.83,90.125l6.504-1.28l-0.234-1.158l-6.504,1.282L131.83,90.125z"/>
+	</g>
+</g>
+</svg>

src/assets/icon/svg/wind-info/pitch-info.svg

@@ -0,0 +1,16 @@
+<?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" id="图层_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="74.992px" height="83px" viewBox="64.504 59.5 74.992 83" enable-background="new 64.504 59.5 74.992 83"
+	 xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M135.195,86.154h-3.479h-1.914h-9.674
+	c-1.922,0-3.477-1.556-3.477-3.477s1.555-3.477,3.477-3.477h5.992c-5.447-7.7-14.381-12.748-24.533-12.748
+	c-16.641,0-30.13,13.49-30.13,30.13c0,1.92-1.559,3.477-3.477,3.477c-1.922,0-3.477-1.556-3.477-3.477l0,0
+	c0-20.481,16.603-37.083,37.083-37.083c12.436,0,23.416,6.141,30.129,15.543v-6.272c0-1.921,1.557-3.477,3.479-3.477
+	c1.92,0,3.477,1.556,3.477,3.477v13.906C138.672,84.598,137.115,86.154,135.195,86.154z M67.981,107.014h15.066
+	c1.918,0,3.477,1.557,3.477,3.477c0,1.922-1.558,3.477-3.477,3.477h-6.036c5.449,7.709,14.416,12.748,24.577,12.748
+	c16.641,0,30.129-13.49,30.129-30.131c0-1.92,1.557-3.477,3.479-3.477c1.92,0,3.477,1.557,3.477,3.477l0,0
+	c0,20.481-16.6,37.084-37.084,37.084c-12.454,0-23.425-6.168-30.13-15.592v6.32c0,1.922-1.559,3.477-3.477,3.477
+	c-1.922,0-3.477-1.555-3.477-3.477V110.49C64.504,108.57,66.059,107.014,67.981,107.014z"/>
+</svg>

src/assets/icon/svg/wind-info/power-grid.svg

@@ -0,0 +1,26 @@
+<?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" id="图层_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="74.992px" height="83px" viewBox="64.504 59.5 74.992 83" enable-background="new 64.504 59.5 74.992 83"
+	 xml:space="preserve">
+<path fill="#FFFFFF" d="M101.849,91.074h-0.011c-2.199,0.003-4.411-0.535-6.418-1.617L78.66,134.118h7.937l1.348-3.591l13.762-5.699
+	l13.912,5.663l1.367,3.627h7.937l-16.754-44.654C106.193,90.532,104.021,91.074,101.849,91.074 M101.792,93.63l2.408,6.423h-4.819
+	L101.792,93.63z M97.796,104.275h7.992l1.054,2.815l-4.915,2.916l-5.09-3.176L97.796,104.275z M95.333,110.836l2.528,1.581
+	l-4.011,2.377L95.333,110.836z M113.609,125.124l-11.152-4.532l-1.528,0.004l-10.958,4.535l1.524-4.06l10.377-6.152l10.33,6.449
+	L113.609,125.124z M109.778,114.91l-3.842-2.399l2.405-1.426L109.778,114.91z M83.262,88.216c0.789,0,1.579-0.311,2.183-0.93
+	c1.206-1.235,1.206-3.244,0-4.481c-1.563-1.604-2.331-3.681-2.335-5.786c0.004-2.103,0.772-4.178,2.335-5.781
+	c1.206-1.239,1.206-3.244,0-4.48c-1.206-1.237-3.16-1.24-4.367-0.003c-2.754,2.827-4.144,6.561-4.139,10.265
+	c-0.004,3.707,1.385,7.443,4.139,10.268C81.681,87.905,82.471,88.216,83.262,88.216 M118.207,66.754
+	c-1.207,1.239-1.207,3.244,0,4.483c1.563,1.604,2.333,3.679,2.333,5.784c0,2.103-0.77,4.178-2.333,5.783
+	c-1.207,1.237-1.207,3.246,0,4.481c0.602,0.619,1.395,0.93,2.184,0.93c0.788,0,1.581-0.311,2.182-0.93
+	c2.752-2.827,4.146-6.561,4.142-10.265c0.005-3.705-1.39-7.44-4.142-10.268C121.369,65.517,119.41,65.517,118.207,66.754
+	 M75.562,89.129c-3.263-3.354-4.88-7.716-4.884-12.11c0.004-4.393,1.624-8.757,4.884-12.105c1.206-1.239,1.206-3.244,0-4.483
+	s-3.157-1.239-4.365,0c-4.456,4.571-6.695,10.595-6.693,16.589c-0.002,5.994,2.237,12.017,6.693,16.592
+	c0.604,0.617,1.394,0.929,2.183,0.929c0.79,0,1.578-0.312,2.182-0.929c1.206-1.238,1.206-3.245,0.002-4.481H75.562z M132.45,60.43
+	c-1.203-1.239-3.158-1.239-4.365,0c-1.203,1.239-1.203,3.244,0,4.48c3.263,3.352,4.883,7.716,4.883,12.111
+	c0,4.392-1.62,8.754-4.883,12.105c-1.203,1.238-1.203,3.248,0,4.483c0.605,0.619,1.395,0.929,2.187,0.929
+	c0.789,0,1.577-0.31,2.179-0.932c4.455-4.572,6.697-10.595,6.697-16.586C139.147,71.027,136.905,65.001,132.45,60.43
+	 M101.792,86.441c5.065,0,9.172-4.22,9.172-9.42c0-5.204-4.106-9.42-9.172-9.42c-5.067,0-9.174,4.216-9.174,9.42
+	C92.618,82.222,96.725,86.441,101.792,86.441"/>
+</svg>

src/assets/icon/svg/wind-info/temperature-info.svg

@@ -0,0 +1,19 @@
+<?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" id="图层_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="M69.343,88.114V24.972C69.343,11.18,58.163,0,44.372,0C30.581,0,19.401,11.18,19.401,24.972v63.171
+		C7.216,96.354-0.063,110.107,0,124.801c0.004,24.504,19.874,44.367,44.379,44.363c24.506-0.006,44.368-19.875,44.363-44.381
+		C88.741,110.104,81.478,96.375,69.343,88.114z M44.372,160.629c-19.788-0.006-35.824-16.051-35.819-35.838
+		c0.003-12.557,6.579-24.195,17.333-30.677c1.516-0.908,2.312-2.66,2-4.399c0.028-0.237,0.028-0.478,0-0.714V60.429h17.429
+		c2.366-0.001,4.284-1.92,4.283-4.288c-0.001-2.365-1.918-4.283-4.283-4.284H27.886v-6.972h17.429
+		c2.366-0.001,4.284-1.92,4.283-4.288c-0.001-2.365-1.918-4.283-4.283-4.284H27.886V24.886c0-9.057,7.343-16.4,16.4-16.4
+		c9.058,0,16.4,7.343,16.4,16.4V89c-0.014,0.237-0.014,0.477,0,0.714c-0.295,1.737,0.497,3.479,2,4.399
+		c16.947,10.214,22.406,32.234,12.191,49.181C68.428,153.998,56.868,160.566,44.372,160.629z"/>
+	<path fill="#FFFFFF" d="M61.715,117c-2.366,0-4.286,1.918-4.286,4.285l0,0c0,7.094-4.514,13.398-11.229,15.686
+		c-2.24,0.764-3.438,3.197-2.676,5.439c0.593,1.742,2.234,2.912,4.076,2.904c0.467,0.008,0.932-0.07,1.371-0.229
+		c10.229-3.434,17.128-13.01,17.143-23.801c0.002-2.367-1.916-4.285-4.283-4.287C61.792,116.998,61.753,116.998,61.715,117z"/>
+</g>
+</svg>

src/assets/icon/svg/风机.svg

@@ -23,6 +23,6 @@
 		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" />
+		<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/table-form.less

@@ -11,19 +11,18 @@
     td {
       padding: 0.741vh;
       border: 0px;
-      font-size: @fontsize-s;
-      font-weight: 600;
+      font-size: 12px;
       text-align: center;
 
       &.text {
-        min-width: 11.111vh;
+        min-width: 13vh;
       }
 
       &.value {
-        min-width: 7.407vh;
+        min-width: 6vh;
       }
       &.unit {
-        min-width: 4.63vh;
+        min-width: 40px;
       }
     }
   }

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

@@ -0,0 +1,313 @@
+<template>
+  <div>
+    <div class="chart" v-for="index of list.length" :key="index" :id="id + index"></div>
+  </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,
+          total: 200,
+        },
+        {
+          name: "实际发电量",
+          value: 98.62,
+          total: 100,
+        },
+        {
+          name: "当月预测电量",
+          value: 113.27,
+          total: 100,
+        },
+        {
+          name: "实际发电量",
+          value: 136.72,
+          total: 100,
+        },
+      ],
+    },
+    total: {
+      type: Number,
+      default: 150,
+    },
+    colors: {
+      type: Array,
+      default: () => ["green", "purple"],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {
+    datas() {
+      return this.list.map((t) => {
+        return t.value;
+      });
+    },
+  },
+  methods: {
+    initChart(value, index) {
+      var currColor = this.colors[index % 2];
+      var $dom = document.getElementById((this.id + (index + 1)));
+      $dom.style.width = this.width;
+      $dom.style.height = `calc(${this.height} / ${this.list.length} - 4px)`;
+      let chart = echarts.init($dom);
+
+      let option = {
+        xAxis: {
+          max: value.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: [value],
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          // 内
+          {
+            type: "bar",
+            barWidth: 10,
+            // legendHoverLink: false,
+            // silent: true,
+            itemStyle: {
+              normal: {
+                color: function(params) {
+                  return {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 1,
+                    y2: 0,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: partten.getColor(currColor), // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: partten.getColor(currColor), // 100% 处的颜色
+                      },
+                    ],
+                  };
+                },
+                shadowBlur: 3,
+                shadowColor: "rgba(255, 255, 255, 0.70)",
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                position: [0, util.vh("-20")],
+                formatter: function(param) {
+                  return param.data.name;
+                },
+                textStyle: {
+                  color: "#7a8385",
+                  fontSize: util.vh("14"),
+                },
+                rich: {
+                  c1: {
+                    color: partten.getColor(currColor),
+                  },
+                  c2: {
+                    color: partten.getColor(currColor),
+                  },
+                },
+              },
+            },
+            data: [value],
+            z: 1,
+            animationEasing: "elasticOut",
+          },
+          // 三角
+          {
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: [value],
+            symbol: "triangle",
+            symbolOffset: [0, -16],
+            symbolSize: [10, 10],
+            symbolRotate: 180,
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function(params) {
+                  return partten.getColor(currColor);
+                },
+                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: value.total,
+            symbolRotate: -15,
+            data: [value],
+            z: 2,
+            animationEasing: "elasticOut",
+          },
+          // 外边框
+          {
+            type: "pictorialBar",
+            symbol: "rect",
+            symbolBoundingData: value.total,
+            itemStyle: {
+              normal: {
+                color: "none",
+              },
+            },
+            label: {
+              normal: {
+                formatter: (params) => {
+                  return "{gm|}{f|  " + params.data + "}";
+                },
+                rich: {
+                  f: {
+                    color: "#ffffff",
+                    fontSize: util.vh("14"),
+                    lineHeight: util.vh(20),
+                  },
+                  gm: {
+                    backgroundColor: partten.getColor(currColor),
+                    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: [value.value],
+          },
+          // 外框
+          {
+            type: "bar",
+            name: "外框",
+            barGap: "-120%", // 设置外框粗细
+            data: [
+              {
+                value: value.total,
+                itemStyle: {
+                  normal: {
+                    color: "transparent",
+                    borderColor: partten.getColor(currColor), // [, "#333"],
+                    borderWidth: 1, // 边框宽度
+                    // barBorderRadius: 0, //圆角半径
+                    opacity: 0.5,
+                    label: {
+                      // 标签显示位置
+                      show: false,
+                      position: "top", // insideTop 或者横向的 insideLeft
+                    },
+                  },
+                },
+              },
+            ],
+            barWidth: 14,
+          },
+        ],
+      };
+
+      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.list.forEach((value, index) => {
+        this.initChart(value, index);
+      });
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.list.forEach((value, index) => {
+        this.initChart(value, index);
+      });
+    });
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/components/chart/bar/multiple-hover-bar-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: "multiple-bar-chart",
+  componentName: "multiple-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 传入数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 1,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 1,
+            },
+            {
+              text: "5日",
+              value: 1,
+            },
+            {
+              text: "6日",
+              value: 1,
+            },
+            {
+              text: "7日",
+              value: 1,
+            },
+            {
+              text: "8日",
+              value: 1,
+            },
+            {
+              text: "9日",
+              value: 1,
+            },
+            {
+              text: "10日",
+              value: 1,
+            },
+            {
+              text: "11日",
+              value: 1,
+            },
+            {
+              text: "12日",
+              value: 1,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              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,
+            },
+          ],
+        },
+        {
+          title: "购网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              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,
+            },
+          ],
+        },
+        {
+          title: "风速",
+          yAxisIndex: 1,
+          value: [
+            {
+              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,
+            },
+          ],
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(万KWh)", "(风速)"],
+    },
+    // 自定义tooltip 显示内容
+    customerTooltip: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
+    };
+  },
+  computed: {
+    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() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        let data = null;
+        if (index == 0) {
+          data = {
+            type: "value",
+            name: value,
+            axisLabel: {
+              formatter: "{value} ",
+              fontSize: util.vh(14),
+            },
+            //分格线
+            splitLine: {
+              lineStyle: {
+                color: "#5a6162",
+                type: "dashed",
+              },
+            },
+          };
+        } else {
+          data = {
+            type: "value",
+            name: value,
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: util.vh(14),
+            },
+
+            //分格线
+            splitLine: {
+              show: false,
+            },
+          };
+        }
+
+        result.push(data);
+      });
+
+      return result;
+    },
+    series() {
+      let result = [];
+      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;
+            }),
+            itemStyle: {
+              color: partten.getColor("gray") + 50,
+            },
+            emphasis: {
+              itemStyle: {
+                color: this.color[index],
+              },
+            },
+          });
+        });
+      }
+      return result;
+    },
+  },
+  emits: {
+    tooltip: function(param, callback) {
+      var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];
+      var result = param[0].axisValue;
+      param.forEach((value, index) => {
+        result += "<br />" + `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` + value.seriesName + "：" + value.value;
+      });
+      callback(result);
+      return true;
+    },
+  },
+  methods: {
+    initChart() {
+      let that = this;
+      let chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: partten.getColor("gray") + "99",
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+        },
+        grid: {
+          top: util.vh(32),
+          left: util.vh(40),
+          right: this.ydata.length > 1 ? util.vh(40) : util.vh(16),
+          bottom: util.vh(24),
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: this.xdata,
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLabel: {
+              fontSize: util.vh(14),
+            },
+          },
+        ],
+        yAxis: this.ydata,
+        series: this.series,
+      };
+
+      if (that.customerTooltip) {
+        option.tooltip.formatter = function(param) {
+          let result = "";
+          let callback = function(value) {
+            result = value;
+          };
+          that.$emit("tooltip", param, callback);
+          return result;
+        };
+      }
+
+      chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

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

@@ -335,7 +335,13 @@ export default {
         color: this.color,
         tooltip: {
           trigger: "axis",
-          backgroundColor: partten.getColor("gray") + "55",
+          axisPointer: {
+            type: "shadow",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+          backgroundColor: partten.getColor("gray") + "99",
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),
@@ -389,7 +395,9 @@ export default {
     },
   },
   created() {
-    this.id = "pie-chart-" + util.newGUID();
+    this.$nextTick(() => {
+      this.id = "pie-chart-" + util.newGUID();
+    });
   },
   mounted() {
     this.$nextTick(() => {
@@ -399,7 +407,9 @@ export default {
     });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
   unmounted() {
     window.removeEventListener("resize", this.resize);

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

@@ -65,7 +65,20 @@ export default {
       ],
     };
   },
-  computed: {},
+  computed: {
+    series() {
+      let result = [];
+      this.value.forEach((value, index) => {
+        result.push({
+          name: this.title,
+          type: "radar",
+          data: value.data,
+        });
+      });
+
+      return result;
+    },
+  },
   methods: {
     initChart() {
       let maxValue = -1;
@@ -84,6 +97,7 @@ export default {
       this.value[0].indicator.forEach((item) => {
         indicator.push({ name: item, max: maxValue });
       });
+
       let option = {
         grid: {
           left: 150,
@@ -298,13 +312,7 @@ export default {
             indicator: indicator,
           },
         ],
-        series: [
-          {
-            name: this.title,
-            type: "radar",
-            data: this.value.data,
-          },
-        ],
+        series: this.series,
       };
 
       this.chart.setOption(option);

src/components/coms/cards/percent-card-2.vue

@@ -53,8 +53,6 @@ export default {
   },
   computed: {
     percent() {
-      console.log(111,this.TotalValue)
-      console.log(222,this.ActualValue)
       // return parseInt((this.ActualValue / this.TotalValue) * 100);
       return parseInt((this.TotalValue / this.ActualValue) * 100);
     },

src/components/coms/collapse/collapse-list.vue

@@ -118,6 +118,24 @@ export default {
       this.itemIndex = index;
       this.$emit("click", item);
     },
+    setDefaultActiveMenu(menu){
+      menu.forEach((pEle,pIndex)=>{
+
+        let findResult=pEle.children.find(cEle=>{
+          return cEle.wpId === this.wpId;
+        });
+
+        if (findResult) this.menuIndex=pIndex;
+
+        pEle.children.forEach((cEle,cIndex)=>{
+          if(cEle.id === this.wtId){
+            this.itemIndex=cIndex
+          }
+        });
+
+      });
+
+    }
   },
   // 生命周期钩子
   beforeCreate() {
@@ -129,13 +147,23 @@ export default {
   beforeMount() {
     // 渲染前
   },
-  mounted() {},
+  mounted() {
+    this.wpId = this.$route.params.wpId || "";
+    this.wtId = this.$route.params.wtId || "";
+    this.setDefaultActiveMenu(this.list);
+  },
   beforeUpdate() {
     // 数据更新前
   },
   updated() {
     // 数据更新后
   },
+
+  watch:{
+    list(res){
+      this.setDefaultActiveMenu(res)
+    }
+  }
 };
 </script>
 

src/components/coms/table/table.vue

@@ -2,12 +2,23 @@
   <table class="com-table">
     <thead>
       <tr>
-        <th v-for="(col, index) of data.column" :key="index">{{ col.name }}</th>
+        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }">{{ col.name }}</th>
       </tr>
     </thead>
     <tbody :class="{ scroll: canScroll }">
       <tr v-for="(row, index) of data.data" :key="index">
-        <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>
+        <td
+          v-for="(col, i) of data.column"
+          :key="i"
+          :class="{
+            light: hoverRow == row || hoverCol == col,
+            num: col.is_num,
+            'always-light': col.is_light || row.is_light,
+          }"
+          v-html="template(col, row[col.field])"
+          @mouseenter="hover(row, col)"
+          @mouseleave="leave()"
+        ></td>
       </tr>
     </tbody>
   </table>
@@ -124,7 +135,8 @@ export default {
         position: sticky;
         top: 0;
 
-        &.light {
+        &.light,
+        &.always-light {
           color: @green;
         }
       }
@@ -149,7 +161,8 @@ export default {
         text-align: center;
         font-size: @fontsize-s;
 
-        &.light {
+        &.light,
+        &.always-light {
           color: @green !important;
         }
 

src/main.js

@@ -7,6 +7,7 @@ import 'font-awesome/css/font-awesome.min.css';
 // 引入 element-ui
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
+import locale from 'element-plus/lib/locale/lang/zh-cn';
 
 // 引入环境配置
 import "@modeConfig/modeConfig.js";
@@ -40,7 +41,7 @@ Date.prototype.formatDate = function (fmt) {
 }
 
 window.__STATICVUE__ = createApp(App);
-window.__STATICVUE__.use(ElementPlus);
+window.__STATICVUE__.use(ElementPlus, { locale });
 window.__STATICVUE__.use(store);
 window.__STATICVUE__.use(router);
 

src/router/index.js

@@ -3,98 +3,105 @@ import Home from '../views/Home/Home.vue'
 
 const routes = [
   {
-    path: '/', // 驾驶舱
+    path: '/',
+    redirect: '/monitor/home'
+  },
+  {
+    path: '/monitor/home', // 驾驶舱
     name: 'Home',
     component: Home,
   },
   {
-    path: '/about',
+    path: '/monitor/about',
     name: 'About',
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
   },
   {
-    path: '/status', // 状态监视
+    path: '/monitor/status', // 状态监视
     name: 'Status',
     component: () => import(/* webpackChunkName: "status" */ '../views/Status/Status.vue'),
   },
   {
-    path: '/agc', // AGC 监视
+    path: '/monitor/agc', // AGC 监视
     name: 'Agc',
     component: () => import(/* webpackChunkName: "agc" */ '../views/Agc/Agc.vue'),
   },
   {
-    path: '/windsite',
+    path: '/monitor/windsite',
     name: 'WindSite',
     component: () => import(/* webpackChunkName: "windsite" */ '../views/WindSite/WindSite.vue'),
     children: [{
-      path: 'home',  // 场站监视
+      path: 'home/:wpId',  // 场站监视
       component: () => import(/* webpackChunkName: "windsitehome" */ '../views/WindSite/pages/Home/Home.vue'),
     }, {
-      path: 'draughtfanlist', // 风机列表
+      path: 'draughtfanlist/:wpId', // 风机列表
       component: () => import(/* webpackChunkName: "windsitedraughtfanlist" */ '../views/WindSite/pages/DraughtFanList.vue'),
     }, {
-      path: 'matrix', // 风场矩阵
+      path: 'matrix/:wpId', // 风场矩阵
       component: () => import(/* webpackChunkName: "windsitematrix" */ '../views/WindSite/pages/Matrix.vue'),
     }, {
-      path: 'lightmatrix',
+      path: 'lightmatrix/:wpId',
       component: () => import(/* webpackChunkName: "windsitelightmatrix" */ '../views/WindSite/pages/LightMatrix.vue'),
     }, {
-      path: 'box',
+      path: 'box/:wpId',
       component: () => import(/* webpackChunkName: "windsitebox" */ '../views/WindSite/pages/Box.vue'),
     }, {
-      path: 'info', // 单机状态监视
-      component: () => import(/* webpackChunkName: "windsitebox" */ '../views/WindSite/pages/Info/Info.vue'),
+      path: 'info/:wpId/:wtId', // 单机状态监视
+      component: () => import(/* webpackChunkName: "info" */ '../views/WindSite/pages/Info/Info.vue'),
     }, {
-      path: 'tower',
+      path: 'tower/:wpId', // 测风塔
       component: () => import(/* webpackChunkName: "windsitetower" */ '../views/WindSite/pages/Tower.vue'),
     }, {
-      path: 'inverter-info',
-      component: () => import(/* webpackChunkName: "windsitetower" */ '../views/WindSite/pages/Inverter-Info.vue'),
+      path: 'inverter-info/:wpId',
+      component: () => import(/* webpackChunkName: "inverter-info" */ '../views/WindSite/pages/Inverter-Info.vue'),
     }, {
-      path: 'map',
+      path: 'map/:wpId',
       component: () => import(/* webpackChunkName: "windsitemap" */ '../views/WindSite/pages/Map.vue'),
     }, {
-      path: 'map1',
+      path: 'map1/:wpId',
       component: () => import(/* webpackChunkName: "windsitemap1" */ '../views/WindSite/pages/Map1.vue'),
-    }]
+    },{
+      path: 'boosterstation', // AGC 监视
+      component: () => import(/* webpackChunkName: "boosterstation" */ '../views/WindSite/pages/BoosterStation.vue'),
+    },]
   },
   {
-    path: '/lightmatrix', // 光伏明细矩阵
+    path: '/monitor/lightmatrix', // 光伏明细矩阵
     name: 'LightMatrix',
     component: () => import(/* webpackChunkName: "lightmatrix" */ '../views/LightMatrix/LightMatrix.vue'),
   },
   {
-    path: '/lightmatrix1', // 基础矩阵
+    path: '/monitor/lightmatrix1', // 基础矩阵
     name: 'LightMatrix1',
     component: () => import(/* webpackChunkName: "lightmatrix1" */ '../views/LightMatrix1/LightMatrix1.vue'),
   },
   {
-    path: '/lightmatrix2', // 欠发矩阵
+    path: '/monitor/lightmatrix2', // 欠发矩阵
     name: 'LightMatrix2',
     component: () => import(/* webpackChunkName: "lightmatrix2" */ '../views/LightMatrix2/LightMatrix2.vue'),
   }, {
-    path: '/lightmatrix3', // 明细矩阵
+    path: '/monitor/lightmatrix3', // 明细矩阵
     name: 'LightMatrix3',
     component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/LightMatrix3/LightMatrix3.vue'),
   }, {
-    path: '/decision1',
+    path: '/decision/decision1',
     name: 'decision1',
-    component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision1.vue'),
+    component: () => import(/* webpackChunkName: "decision1" */ '../views/Decision/Decision1.vue'),
   },
   {
-    path: '/decision2',
+    path: '/decision/decision2',
     name: 'decision2',
-    component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision2.vue'),
+    component: () => import(/* webpackChunkName: "decision2" */ '../views/Decision/Decision2.vue'),
   },
   {
-    path: '/decision3',
+    path: '/decision/decision3',
     name: 'decision3',
-    component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision3.vue'),
+    component: () => import(/* webpackChunkName: "decision3" */ '../views/Decision/Decision3.vue'),
   },
   {
-    path: '/decision4',
+    path: '/decision/decision4',
     name: 'decision4',
-    component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision4.vue'),
+    component: () => import(/* webpackChunkName: "decision4" */ '../views/Decision/Decision4.vue'),
   },
   {
     path: '/health',
@@ -102,37 +109,37 @@ const routes = [
     component: () => import('../views/HealthControl/Health.vue'),
   },
   {
-    path: '/health1',
+    path: '/health/health1',
     name: 'health1',
     component: () => import('../views/HealthControl/Health1.vue'),
   },
   {
-    path: '/health2',
+    path: '/health/health2',
     name: 'health2',
     component: () => import('../views/HealthControl/Health2.vue'),
   },
   {
-    path: '/health3',
+    path: '/health/health3',
     name: 'health3',
     component: () => import('../views/HealthControl/Health3.vue'),
   },
   {
-    path: '/health4',
+    path: '/health/health4',
     name: 'health4',
     component: () => import('../views/HealthControl/Health4.vue'),
   },
   {
-    path: '/health5',
+    path: '/health/health5',
     name: 'health5',
     component: () => import('../views/HealthControl/Health5.vue'),
   },
   {
-    path: '/health6',
+    path: '/health/health6',
     name: 'health6',
     component: () => import('../views/HealthControl/Health6.vue'),
   },
   {
-    path: '/health7',
+    path: '/health/health7',
     name: 'health7',
     component: () => import('../views/HealthControl/Health7.vue'),
   },

src/views/About.vue

@@ -8,7 +8,7 @@
 
 <script>
 // import ListBarChart from "../components/chart/bar/list-bar-chart.vue";
-import HealthReport from "@com/other/healthReport";
+import HealthReport from "@com/other/healthReport/index.vue";
 // 导入header.vue文件
 export default {
   data () {

src/views/Decision/Decision1.vue

@@ -9,9 +9,6 @@
             <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
             </el-select>
-            <!-- <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="'svg-arrow-down'" />
-            </div> -->
           </div>
         </div>
         <div class="query-item">
@@ -20,9 +17,6 @@
             <el-select v-model="value2" multiple placeholder="请选择" popper-class="select">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
             </el-select>
-            <!-- <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="'svg-arrow-down'" />
-            </div> -->
           </div>
         </div>
         <div class="query-item">
@@ -31,18 +25,12 @@
             <el-select v-model="value3" multiple placeholder="请选择" popper-class="select">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
             </el-select>
-            <!-- <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="'svg-arrow-down'" />
-            </div> -->
           </div>
         </div>
         <div class="query-item">
           <div class="lable">开始日期：</div>
           <div class="search-input">
             <el-date-picker v-model="value4" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
-            <!-- <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="'svg-arrow-down'" />
-            </div> -->
           </div>
         </div>
         <div class="query-item">
@@ -50,7 +38,6 @@
           <div class="search-input">
             <el-date-picker v-model="value5" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
             <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="''" />
             </div>
           </div>
         </div>
@@ -113,12 +100,11 @@
 
 <script>
 import BarLineChart from "../../components/chart/combination/bar-line-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 {
-  components: { ToolbarPanel, BarLineChart, Panel, Table, SvgIcon },
+  components: { ToolbarPanel, BarLineChart, Panel, Table },
   data() {
     return {
       tableData: {

src/views/Decision/Decision2.vue

@@ -9,9 +9,6 @@
             <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
             </el-select>
-            <!-- <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="'svg-arrow-down'" />
-            </div> -->
           </div>
         </div>
         <div class="query-item">
@@ -20,9 +17,6 @@
             <el-select v-model="value2" multiple placeholder="请选择" popper-class="select">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
             </el-select>
-            <!-- <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="'svg-arrow-down'" />
-            </div> -->
           </div>
         </div>
         <div class="query-item">
@@ -31,18 +25,12 @@
             <el-select v-model="value3" multiple placeholder="请选择" popper-class="select">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
             </el-select>
-            <!-- <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="'svg-arrow-down'" />
-            </div> -->
           </div>
         </div>
         <div class="query-item">
           <div class="lable">开始日期：</div>
           <div class="search-input">
             <el-date-picker v-model="value4" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
-            <!-- <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="'svg-arrow-down'" />
-            </div> -->
           </div>
         </div>
         <div class="query-item">
@@ -90,20 +78,20 @@
     </el-row>
     <div>
       <panel title="日度损失电量分析">
-        <multiple-bar-chart height="240px" />
+        <multiple-hover-bar-chart height="240px" :customerTooltip="true" @tooltip="tooltip" />
       </panel>
     </div>
   </div>
 </template>
 
 <script>
-import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
+import MultipleHoverBarChart from "../../components/chart/bar/multiple-hover-bar-chart.vue";
 import DualPieChart from "../../components/chart/pie/dual-pie-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 {
-  components: { Panel, Table, SvgIcon, DualPieChart, MultipleBarChart },
+  components: { Panel, Table, SvgIcon, DualPieChart, MultipleHoverBarChart },
   data() {
     return {
       tableData: {
@@ -239,6 +227,19 @@ export default {
       value5: "",
     };
   },
+  methods: {
+    // 自定义tooltip 显示内容
+    tooltip(param, callback) {
+      var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];
+
+      var result = param[0].axisValue;
+      param.forEach((value, index) => {
+        result += "<br />" + `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` + value.seriesName + "：" + value.value;
+      });
+      callback(result);
+      return true;
+    },
+  },
   created() {
     for (let i = 1; i < 50; i++) {
       this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));

src/views/HealthControl/Health2.vue

@@ -2,13 +2,7 @@
   <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-24-houre'" />
-          </i>
-          <span> 24小时健康趋势 </span>
-        </div>
-        <div class="tab">
+        <div class="tab active" @click="changeDate">
           <i class="svg-icon svg-icon svg-icon-sm">
             <svg-icon :svgid="'svg-h-day'" />
           </i>
@@ -21,9 +15,9 @@
           <span>30日健康趋势</span>
         </div>
         <div class="empty"></div>
-        <div class="tab">
+        <!-- <div class="tab">
           <span>全部风场健康趋势</span>
-        </div>
+        </div> -->
       </div>
       <div class="info-chart">
         <panel class="info-chart-panel" :title="'损失电量分析'">
@@ -429,6 +423,19 @@ export default {
       this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
       this.tableData.data[i].index = i + 1;
     }
+
+    let that = this;
+    that.API.requestData({
+      method: "POST",
+      subUrl: "recommen/findAllChartjz",
+      data: {
+        wpId: "0",
+        type: that.type
+      },
+      success (res) {
+        console.log(123123,res);
+      }
+    });
   },
 };
 </script>

src/views/HealthControl/HealthTab3.vue

@@ -83,14 +83,14 @@
         </thead>
         <tbody>
           <tr v-for="(row, index) of tableData.data" :key="index">
-            <td>{{ row.wfname }}</td>
-            <td>{{ row.wtid }}</td>
-            <td>{{new Date(row.operationdate).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
-            <td>{{row.departuretime ? new Date().formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
-            <td>{{ row.reason }}</td>
-            <td>{{ row.ismain }}</td>
-            <td>{{ row.status }}</td>
-            <td>
+            <td class="white">{{ row.wfname }}</td>
+            <td class="white">{{ row.wtid }}</td>
+            <td class="white">{{new Date(row.operationdate).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
+            <td class="white">{{row.departuretime ? new Date().formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
+            <td class="white">{{ row.reason }}</td>
+            <td class="white">{{ row.ismain }}</td>
+            <td class="white">{{ row.status }}</td>
+            <td class="white">
               <button class="btn success" @click="onClickTrack(row)">消缺跟踪</button>
             </td>
           </tr>

src/views/HealthControl/dayinfo.vue

@@ -256,7 +256,16 @@ export default {
           indicator: ["平均切入风速", "性能损失电量", "拟合优度", "功率一致性系数", "利用小时", "设备可利用率", "等效可利用系数", "有效风时数", "平均风速", "静风频率"],
           data: [
             {
-              value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000, 35000, 50000, 38000],
+              value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000, 35000],
+              name: "NAME",
+            },
+          ],
+        },
+        {
+          indicator: ["平均切入风速", "性能损失电量", "拟合优度", "功率一致性系数", "利用小时", "设备可利用率", "等效可利用系数", "有效风时数", "平均风速", "静风频率"],
+          data: [
+            {
+              value: [44210, 14200, 10000, 36000, 50000, 38400, 42200, 14200, 20000, 35000],
               name: "NAME",
             },
           ],

src/views/Home/Home.vue

@@ -12,36 +12,36 @@
       <Row type="flex">
         <Col :span="24">
         <com-panel title="预测电量" sub-title="（单位：万KWh）">
-          <list-bar-chart :list="ForecastPower" height="16.6667vh" />
+            <list-bar-chart-2 :list="ForecastPower" height="16.6667vh" />
         </com-panel>
         </Col>
       </Row>
       <Row type="flex">
         <Col :span="24">
         <com-panel title="功率复核" sub-title="（单位：万KW）">
-          <power-review :data="powerData" />
+          <power-review :data="powerData" :id="wpId" @chartClick="showPowerChart" />
         </com-panel>
         </Col>
       </Row>
       </Col>
       <Col :span="12">
-      <Map></Map>
+      <Map :wpId="wpId" :day="String(jczbmap.aqts || '---')" :data="fcmap" @mapClick="changeShowType"></Map>
       </Col>
       <Col :span="6">
-      <Row type="flex">
-        <Col :span="24">
-        <com-panel title="电量分析" sub-title="（单位：万KWh）">
-          <coulometric-analysis />
-        </com-panel>
-        </Col>
-      </Row>
-      <Row type="flex">
-        <Col :span="24">
-        <com-panel title="计划电量完成情况" sub-title="（单位：万KWh）">
-          <power-plan :data="planData" />
-        </com-panel>
-        </Col>
-      </Row>
+        <Row type="flex">
+          <Col :span="24">
+            <com-panel title="电量分析" sub-title="（单位：万KWh）">
+              <coulometric-analysis />
+            </com-panel>
+          </Col>
+        </Row>
+        <Row type="flex">
+          <Col :span="24">
+            <com-panel title="计划电量完成情况" sub-title="（单位：万KWh）">
+              <power-plan :data="planData" :showSingle="powerplanShowSingle" :id="wpId" @chartClick="showDownChart" />
+            </com-panel>
+          </Col>
+        </Row>
       </Col>
     </Row>
     <Row type="flex">
@@ -109,24 +109,24 @@
             <tr class="">
               <td class="text gray">装机容量</td>
               <td class="value green">{{jczbmap.zjrl}}</td>
-              <td class="unit gray">万kwh</td>
+              <td class="unit gray">万kw</td>
             </tr>
             <tr class="">
               <td class="text gray">装机台数</td>
               <td class="value green">{{jczbmap.zjts}}</td>
               <td class="unit gray">台</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('日发电量详情', 'genreset/findDayInfo', 'rfdl', 'table')">
               <td class="text gray">日发电量</td>
               <td class="value green">{{jczbmap.rfdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('月发电量详情', 'genreset/findMonthInfo', 'yfdl', 'table')">
               <td class="text gray">月发电量</td>
               <td class="value green">{{jczbmap.yfdl}}</td>
               <td class="unit gray gray">万kwh</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('年发电量详情', 'genreset/findYearInfo', 'nfdl', 'table')">
               <td class="text gray">年发电量</td>
               <td class="value green">{{jczbmap.nfdl}}</td>
               <td class="unit gray">万kwh</td>
@@ -143,12 +143,12 @@
         <com-panel>
           <table class="table-card">
             <tr class="">
-              <td class="text gray">mttr</td>
+              <td class="text gray">MTTR</td>
               <td class="value green">{{jczbmap.mttr}}</td>
               <td class="unit gray">小时</td>
             </tr>
             <tr class="">
-              <td class="text gray">mtbf</td>
+              <td class="text gray">MTBF</td>
               <td class="value green">{{jczbmap.mtbf}}</td>
               <td class="unit gray">小时</td>
             </tr>
@@ -168,9 +168,9 @@
               <td class="unit gray gray">%</td>
             </tr>
             <tr class="">
-              <td class="text gray">年等效科利用系数</td>
-              <td class="value green">{{gxkmap.ndxkyss}}</td>
-              <td class="unit gray">%</td>
+              <td class="text gray">{{wpId === "0" ? "节约二氧化碳" : "年等效科利用系数"}}</td>
+              <td class="value green">{{wpId === "0" ? jczbmap.jpeyht : gxkmap.ndxkyss}}</td>
+              <td class="unit gray">{{wpId === "0" ? "万吨" : "%"}}</td>
             </tr>
           </table>
         </com-panel>
@@ -178,35 +178,35 @@
         <Col>
         <com-panel>
           <table class="table-card">
-            <tr class="">
+            <tr class="" @click="openDialog('日性能损失详情', 'genreset/findDayInfo', 'rxnssdl', 'table')">
               <td class="text gray">日性能损失</td>
               <td class="value green">{{wxssmap.rqfssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('日故障损失详情', 'genreset/findDayInfo', 'rgzssdl', 'table')">
               <td class="text gray">日故障损失</td>
               <td class="value green">{{wxssmap.rgzssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('日检修损失详情', 'genreset/findDayInfo', 'rjxssdl', 'table')">
               <td class="text gray">日检修损失</td>
               <td class="value green">{{wxssmap.rjxssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('日限电损失详情', 'genreset/findDayInfo', 'rxdssdl', 'table')">
               <td class="text gray">日限电损失</td>
               <td class="value green">{{wxssmap.rxdssdl}}</td>
               <td class="unit gray gray">万kwh</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('日受累损失详情', 'genreset/findDayInfo', 'rslssdl', 'table')">
               <td class="text gray">日受累损失</td>
               <td class="value green">{{wxssmap.rslssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">年待机小时</td>
-              <td class="value green">{{gxkmap.ndjxs}}</td>
-              <td class="unit gray">小时</td>
+              <td class="text gray">{{wpId === "0" ? "节约标煤" : "年待机小时"}}</td>
+              <td class="value green">{{wpId === "0" ? jczbmap.jybm : gxkmap.ndjxs}}</td>
+              <td class="unit gray">{{wpId === "0" ? "万吨" : "小时"}}</td>
             </tr>
           </table>
         </com-panel>
@@ -214,35 +214,35 @@
         <Col>
         <com-panel>
           <table class="table-card">
-            <tr class="">
+            <tr class="" @click="openDialog('月性能损失详情', 'genreset/findMonthInfo', 'yxnssdl', 'table')">
               <td class="text gray">月性能损失</td>
               <td class="value green">{{wxssmap.yqfssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('月故障损失详情', 'genreset/findMonthInfo', 'ygzssdl', 'table')">
               <td class="text gray">月故障损失</td>
               <td class="value green">{{wxssmap.ygzssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('月检修损失详情', 'genreset/findMonthInfo', 'yjxssdl', 'table')">
               <td class="text gray">月检修损失</td>
               <td class="value green">{{wxssmap.yjxssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('月限电损失详情', 'genreset/findMonthInfo', 'yxdssdl', 'table')">
               <td class="text gray">月限电损失</td>
               <td class="value green">{{wxssmap.yxdssdl}}</td>
               <td class="unit gray gray">万kwh</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('月受累损失详情', 'genreset/findMonthInfo', 'yslssdl', 'table')">
               <td class="text gray">月受累损失</td>
               <td class="value green">{{wxssmap.yslssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">年运行小时</td>
-              <td class="value green">{{gxkmap.nyxxs}}</td>
-              <td class="unit gray">小时</td>
+              <td class="text gray">{{wpId === "0" ? "节约二氧化硫" : "年运行小时"}}</td>
+              <td class="value green">{{wpId === "0" ? jczbmap.jpeyhl : gxkmap.nyxxs}}</td>
+              <td class="unit gray">{{wpId === "0" ? "万吨" : "小时"}}</td>
             </tr>
           </table>
         </com-panel>
@@ -250,35 +250,35 @@
         <Col>
         <com-panel>
           <table class="table-card">
-            <tr class="">
+            <tr class="" @click="openDialog('年性能损失详情', 'genreset/findYearInfo', 'nxnssdl', 'table')">
               <td class="text gray">年性能损失</td>
               <td class="value green">{{wxssmap.nqfssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('年故障损失详情', 'genreset/findYearInfo', 'ngzssdl', 'table')">
               <td class="text gray">年故障损失</td>
               <td class="value green">{{wxssmap.ngzssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('年检修损失详情', 'genreset/findYearInfo', 'njxssdl', 'table')">
               <td class="text gray">年检修损失</td>
               <td class="value green">{{wxssmap.njxssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('年限电损失详情', 'genreset/findYearInfo', 'nxdssdl', 'table')">
               <td class="text gray">年限电损失</td>
               <td class="value green">{{wxssmap.nxdssdl}}</td>
               <td class="unit gray gray">万kwh</td>
             </tr>
-            <tr class="">
+            <tr class="" @click="openDialog('年受累损失详情', 'genreset/findYearInfo', 'nslssdl', 'table')">
               <td class="text gray">年受累损失</td>
               <td class="value green">{{wxssmap.nslssdl}}</td>
               <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">年故障小时</td>
-              <td class="value green">{{gxkmap.ngzxs}}</td>
-              <td class="unit gray">小时</td>
+              <td class="text gray">{{wpId === "0" ? "节约用水" : "年故障小时"}}</td>
+              <td class="value green">{{wpId === "0" ? jczbmap.jys : gxkmap.ngzxs}}</td>
+              <td class="unit gray">{{wpId === "0" ? "万吨" : "小时"}}</td>
             </tr>
           </table>
         </com-panel>
@@ -418,6 +418,11 @@
       </panel-3>
       </Col>
     </Row>
+    <el-dialog :title="dialogTitle" v-model="dialogShow" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="true" @closed="dialogType = ''">
+      <Table :data="dialogData" v-if="dialogType === 'table'" />
+      <MultipleLineChart height="500px" :units="powerLineChartData.units" :list="powerLineChartData.value" :showLegend="true" v-if="dialogType === 'powerLineChart'" />
+      <multiple-bar-chart height="500px" :list="doneLineChartData.value" :units="doneLineChartData.units" v-if="dialogType === 'doneLineChart'" />
+    </el-dialog>
   </div>
 </template>
 
@@ -426,7 +431,7 @@
 import Row from "../../components/coms/grid/row.vue";
 import Col from "../../components/coms/grid/col.vue";
 import ComPanel from "../../components/coms/panel/panel";
-import ListBarChart from "../../components/chart/bar/list-bar-chart.vue";
+// import ListBarChart from "../../components/chart/bar/list-bar-chart.vue";
 import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
 import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
 import MultipleLineChart from "../../components/chart/line/multiple-line-chart.vue";
@@ -437,6 +442,9 @@ import Weather from "./components/weather.vue";
 import PowerReview from "./components/power-review.vue";
 import PowerPlan from "./components/power-plan.vue";
 import Map from "./components/map.vue";
+import ListBarChart2 from '../../components/chart/bar/list-bar-chart2.vue';
+
+import Table from "./dialog/table.vue";
 
 export default {
   name: "Home",
@@ -446,7 +454,7 @@ export default {
     ComPanel,
     Weather,
     CoulometricAnalysis,
-    ListBarChart,
+    // ListBarChart,
     PowerReview,
     ToolbarPanel,
     PowerPlan,
@@ -455,6 +463,8 @@ export default {
     Panel3,
     SvgIcon,
     Map,
+    ListBarChart2,
+    Table
   },
   data () {
     return {
@@ -465,25 +475,36 @@ export default {
       mxztmap: {},
       planData: {},
       powerData: {},
+      powerLineChartData: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+      doneLineChartData: {
+        // 图表所用单位
+        units: [""],
+        value: [
+          {
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          },
+        ],
+      },
+      dialogType: null,
+      wpId: "0",
+      fcmap:{},
+      dialogShow: false,
+      dialogTitle: "",
+      dialogData:{},
       // 预测电量
-      ForecastPower: [
-        {
-          name: "当日预测电量",
-          value: 103.62,
-        },
-        {
-          name: "实际发电量",
-          value: 98.62,
-        },
-        {
-          name: "当月预测电量",
-          value: 113.27,
-        },
-        {
-          name: "实际发电量",
-          value: 136.72,
-        },
-      ],
+      ForecastPower: [],
       // 日发电量
       DayPower: {
         // 图表所用单位
@@ -519,8 +540,9 @@ export default {
         showLoading,
         method: "POST",
         subUrl: "genreset/findBasicDataInfo",
+        timeout: 60000,
         data: {
-          id: "MHS_FDC",
+          id: that.wpId,
         },
         success (res) {
           let glvos = [];
@@ -578,7 +600,7 @@ export default {
           rdlKey.forEach((keyEle, keyIndex) => {
             res.data.rdlvos.forEach(cEle => {
               DayPower.value[keyIndex].value.push({
-                text: new Date(cEle.time).formatDate("yyyy-MM-dd"),
+                text: cEle.timestr,
                 value: cEle[keyEle]
               });
             });
@@ -587,7 +609,7 @@ export default {
           glKey.forEach((keyEle, keyIndex) => {
             res.data.glvos.forEach(cEle => {
               Powertrend.value[keyIndex].value.push({
-                text: new Date(cEle.time).formatDate("yyyy-MM-dd"),
+                text: new Date(cEle.time).formatDate("hh:mm:ss"),
                 value: cEle[keyEle]
               });
             });
@@ -595,16 +617,32 @@ export default {
 
           that.powerData = [{
             title: "风速",
-            value: res.data.jczbmap.ssfs
+            value: res.data.jczbmap.ssfs,
+            dialogTitle: "风速详情",
+            subUrl: "genreset/findGLDetail",
+            targetName: "ssfs",
+            dialogType: "powerLineChart"
           }, {
             title: "保证功率",
-            value: res.data.jczbmap.bzgl
+            value: res.data.jczbmap.bzgl,
+            dialogTitle: "保证功率详情",
+            subUrl: "genreset/findGLDetail",
+            targetName: "bzgl",
+            dialogType: "powerLineChart"
           }, {
             title: "应发功率",
-            value: res.data.jczbmap.yfgl
+            value: res.data.jczbmap.yfgl,
+            dialogTitle: "应发功率详情",
+            subUrl: "genreset/findGLDetail",
+            targetName: "yfgl",
+            dialogType: "powerLineChart"
           }, {
             title: "实际功率",
-            value: res.data.jczbmap.sjgl
+            value: res.data.jczbmap.sjgl,
+            dialogTitle: "实际功率详情",
+            subUrl: "genreset/findGLDetail",
+            targetName: "sjgl",
+            dialogType: "powerLineChart"
           }];
 
           that.DayPower = DayPower;
@@ -613,6 +651,26 @@ export default {
           that.wxssmap = res.data.wxssmap;
           that.gxkmap = res.data.gxkmap;
           that.mxztmap = res.data.mxztmap;
+          that.fcmap = res.data.fcmap;
+
+          that.ForecastPower = [{
+            name: "当日预测电量",
+            value: res.data.jczbmap.rycfdl,
+            total: res.data.jczbmap.rfdlsx
+          },{
+            name: "实际发电量",
+            value: res.data.jczbmap.rfdl,
+            total: res.data.jczbmap.rfdlsx
+          },{
+            name: "当月预测电量",
+            value: res.data.jczbmap.yycfdl,
+            total: res.data.jczbmap.yfdlsx
+          },{
+            name: "实际发电量",
+            value: res.data.jczbmap.yfdl,
+            total: res.data.jczbmap.yfdlsx
+          }];
+
           that.planData = {
             yfdl: res.data.jczbmap.yfdl,
             nfdl: res.data.jczbmap.nfdl,
@@ -621,10 +679,89 @@ export default {
             ywcl: res.data.gxkmap.ywcl,
             nwcl: res.data.gxkmap.nwcl
           };
-          console.log(111, res);
         },
       });
     },
+
+    // 点击地图展示类型
+    changeShowType(wpId){
+      clearInterval(this.timmer);
+      this.timmer = null;
+      this.wpId = wpId;
+      this.requestData(false);
+      this.timmer = setInterval(() => {
+        this.requestData(false);
+      }, this.$store.state.websocketTimeSec);
+    },
+
+    // 打开弹窗
+    openDialog(dialogTitle, subUrl, targetName, dialogType){
+      console.log(123123,dialogType)
+      this.dialogTitle = dialogTitle;
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl,
+        data: {
+          id:that.wpId,
+          targetName
+        },
+        success (res) {
+          that.dialogShow = true;
+          that.dialogData = res.data;
+          that.dialogType = dialogType;
+        }
+      });
+    },
+
+    // 显示功率复核图表
+    showPowerChart(res){
+      this.dialogTitle = res.dialogTitle;
+      this.dialogType = res.dialogType;
+
+      let powerLineChartData = {
+        // 图表所用单位
+        units: [""],
+        value: [],
+      };
+
+      res.data.forEach((pEle,pIndex)=>{
+        powerLineChartData.value.push({
+          title: pEle[0].name,
+          yAxisIndex: 0,
+          value: [],
+        });
+
+        pEle.forEach(cEle=>{
+          powerLineChartData.value[pIndex].value.push({
+            text: new Date(cEle.time).formatDate("hh:mm:ss"),
+            value: cEle.value1
+          });
+        });
+      });
+
+      this.powerLineChartData = powerLineChartData;
+      this.dialogShow = true;
+    },
+
+    // 显示计划电量完成情况图表
+    showDownChart(res){
+      this.dialogTitle = res.dialogTitle;
+      this.dialogType = res.dialogType;
+
+      this.doneLineChartData = res.data;
+      this.dialogShow = true;
+    },
+
+    // 地图进入事件
+    onEnter() {
+      this.powerplanShowSingle = true;
+    },
+
+    // 地图退出事件
+    onBack() {
+      this.powerplanShowSingle = false;
+    },
   },
 
   created () {
@@ -640,7 +777,7 @@ export default {
   unmounted () {
     clearInterval(this.timmer);
     this.timmer = null;
-  },
+  }
 };
 </script>
 

src/views/Home/components/map.vue

@@ -1,27 +1,27 @@
 <template>
   <div class="map">
     <div class="back"></div>
-    <div class="security-days">
+    <div class="security-days" v-if="fcId === '0'">
       <div class="text">安全天数:</div>
       <div class="num">
-        <span class="font-num">1,945</span>
+        <span class="font-num">{{safeDay}}</span>
         <span class="unit">天</span>
       </div>
     </div>
     <div class="tab-box">
-      <div class="tab-item" v-for="(tab, index) of tabs" :key="index" :class="{ active: activeTab == index }" @click="selectTab(index)">
+      <div class="tab-item" v-for="(tab, index) of tabs" :key="index" :class="{ active: activeTab == index }" @click.stop="selectTab(index, tab.show)">
         <span class="svg-icon svg-icon-sm" :class="activeTab == index ? 'svg-icon-green' : 'svg-icon-write'">
           <SvgIcon :svgid="tab.icon"></SvgIcon>
         </span>
         <span>{{ tab.text }}</span>
       </div>
     </div>
-    <div class="return" @click="backMap" v-show="!nxmap">
+    <!-- <div class="return" @click="backMap" v-show="mapName !== 'nx'">
       <span class="svg-icon svg-icon-sm">
         <svg-icon :svgid="'svg-arrow-dpwn-1'" />
       </span>
       返回
-    </div>
+    </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">
@@ -82,15 +82,21 @@
       </svg>
     </div>
     <div class="map-img">
-      <SvgMap v-if="!nxmap"></SvgMap>
-      <SvgMapNX v-if="nxmap" @clickLabel="clickLabel"></SvgMapNX>
+      <!-- 宁夏地图总览 -->
+      <SvgMapNX v-if="mapName === 'nx'" :show="showType" :data="sourceMap" @clickLabel="clickLabel"></SvgMapNX>
+      <!-- 麻黄山风电场 -->
+      <MHSFDC v-if="mapName === 'MHS_FDC'" :data="sourceMap" @clickFj="clickFj"></MHSFDC>
     </div>
   </div>
 </template>
 
 <script>
-import SvgMap from "./map/svg-map.vue";
+// 宁夏地图总览
 import SvgMapNX from "./map/svg-map-nx.vue";
+
+// 麻黄山风电场
+import MHSFDC from "./map/MHS_FDC.vue";
+
 import SvgIcon from "../../../components/coms/icon/svg-icon.vue";
 import compassIcon from "@/assets/icon/svg_fill/compass.svg";
 export default {
@@ -98,65 +104,98 @@ export default {
   name: "Map",
   // 使用组件
   components: {
-    SvgMap,
     SvgMapNX,
+    MHSFDC,
     SvgIcon,
   },
+  props:{
+    wpId:{
+      type:String,
+      default:"0"
+    },
+    day:{
+      type:String,
+      default:"---"
+    },
+    data:{
+      type:Object,
+      default:() => {}
+    }
+  },
+
+  mounted(){
+    this.fcId = this.wpId;
+    this.safeDay = this.day;
+    this.sourceMap = this.data;
+  },
   // 数据
   data() {
     return {
+      fcId:"",
+      safeDay:"",
+      showType: "all",
+      sourceMap:{},
       tabs: [
         {
           icon: "svg-all",
           text: "全部",
+          show: "all"
         },
         {
           icon: "svg-wind-site",
           text: "风场",
+          show: "fc"
         },
         {
           icon: "svg-photovoltaic",
           text: "电站",
+          show: "gf"
         },
       ],
       compassIcon: compassIcon,
       activeTab: 0,
       img: require("@assets/map/map-nx.png"),
       nxSvgFile: require("@assets/map/map-nx.svg"),
-      nxmap: false,
+      mapName: "nx",
     };
   },
+  emits: {
+    onEnter: null,
+    onBack: null,
+  },
   // 函数
   methods: {
-    selectTab: function(index) {
+    selectTab(index, showType) {
       this.activeTab = index;
+      this.showType = showType;
+      let wpId = (showType === "all" ? "0" : showType === "fc" ? "-1" : "-2");
+      this.safeDay = "---";
+      this.mapName = "nx";
+      this.$emit("mapClick", wpId);
     },
-    backMap: function() {
-      this.nxmap = true;
+    backMap() {
+      // this.mapName = "nx";
+      // this.$emit("mapClick", wpId);
     },
-    clickLabel: function() {
-      this.nxmap = false;
+    clickLabel(wpId) {
+      this.mapName = wpId;
+      this.$emit("mapClick", wpId);
     },
+    clickFj(wpId){
+      this.$emit("mapClick", wpId);
+    }
   },
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-  },
-  beforeUpdate() {
-    // 数据更新前
-  },
-  updated() {
-    // 数据更新后
-  },
+  watch:{
+    wpId(res){
+      this.fcId = res;
+    },
+    day(res){
+      this.safeDay = res;
+    },
+    data(res){
+      this.sourceMap = res;
+    }
+  }
 };
 </script>
 

src/views/Home/components/map/svg-map-nx.vue

@@ -9,6 +9,8 @@
             viewBox="0 0 745.3 399"
             style="enable-background: new 0 0 745.3 399"
             xml:space="preserve"
+            :width = "svgWidth"
+            :height = "svgHeight"
         >
             <defs>
                 <g id="nx-map-line-1">
@@ -46,7 +48,10 @@
                         stroke="#edbf03"
                         stroke-width="1"
                         fill="none"
-                    />
+                    >
+                        <!-- <animate attributeType="XML" attributeName="r" from="3" to="20" dur="3s" repeatCount="indefinite"/>
+                        <animate attributeType="XML" attributeName="opacity" values="1;1;1;1;1;0" dur="3s" repeatCount="indefinite"/> -->
+                    </circle>
                     <circle
                         class="nx-map-down-circle-3"
                         :class="{'nx-map-down-circle-loop' : c2}"
@@ -57,7 +62,25 @@
                         stroke="#edbf03"
                         stroke-width="1"
                         fill="none"
-                    />
+                    >
+                        <!-- <animate attributeType="XML" attributeName="r" from="3" to="20" dur="2s" repeatCount="indefinite"/>
+                        <animate attributeType="XML" attributeName="opacity" values="1;1;1;1;1;0" dur="2s" repeatCount="indefinite"/> -->
+                    </circle>
+                </g>
+                <g id="popup-box-svg">
+                    <rect x="0" y="0" width="110" height="130" stroke="#46C55A35" fill="#000000" opacity="0.8" />
+                    <circle cx="4" cy="4" r="2" fill="#ffffff">
+                        <animate attributeType="XML" attributeName="fill" values="#ffffff;transparent;#ffffff" dur="2s" repeatCount="indefinite"/>
+                    </circle>
+                    <circle cx="106" cy="4" r="2" fill="#ffffff">
+                        <animate attributeType="XML" attributeName="fill" values="#ffffff;transparent;#ffffff" dur="2s" repeatCount="indefinite"/>
+                    </circle>
+                    <circle cx="4" cy="126" r="2" fill="#ffffff">
+                        <animate attributeType="XML" attributeName="fill" values="#ffffff;transparent;#ffffff" dur="2s" repeatCount="indefinite"/>
+                    </circle>
+                    <circle cx="106" cy="126" r="2" fill="#ffffff">
+                        <animate attributeType="XML" attributeName="fill" values="#ffffff;transparent;#ffffff" dur="2s" repeatCount="indefinite"/>
+                    </circle>
                 </g>
             </defs>
 
@@ -70,7 +93,7 @@
                 transform="matrix(1 0 0 1 -113 60.6679)"
             ></image>
 
-            <g>
+            <g v-if="showType === 'all' || showType === 'fc'" class="item-label" @click.stop="clickLabel('XS_FDC')" @mouseover="mouseover(0)" @mouseout="mouseout">
                 <use xlink:href="#nx-map-line-1" x="150" y="195" />
                 <use xlink:href="#nx-map-circle-1" x="150" y="195" />
                 <!-- +25 -5 -->
@@ -82,15 +105,13 @@
                     stroke="#46C55A35"
                     fill="#000000"
                     opacity="0.8"
-                    class="item-label"
-                    @click="clickLabel"
                 />
                 <!-- +5 +12| -->
-                <text x="180" y="207" fill="#919697" font-size="14">光伏</text>
+                <text x="180" y="207" fill="#919697" font-size="14">香山</text>
                 <!-- +70 0 -->
-                <text x="245" y="207" fill="#05bb4c" font-size="14">126台</text>
+                <text x="245" y="207" fill="#05bb4c" font-size="14">{{sourceMap.XS_FDC_zjts}}台</text>
             </g>
-            <g>
+            <g v-if="showType === 'all' || showType === 'gf'" class="item-label" @click.stop="clickLabel" @mouseover="mouseover(1)" @mouseout="mouseout">
                 <use xlink:href="#nx-map-line-1" x="280" y="40" />
                 <use xlink:href="#nx-map-circle-1" x="280" y="40" />
                 <!-- +25 -5 -->
@@ -102,15 +123,13 @@
                     stroke="#46C55A35"
                     fill="#000000"
                     opacity="0.8"
-                    class="item-label"
-                    @click="clickLabel"
                 />
                 <!-- +5 +12| -->
-                <text x="310" y="52" fill="#919697" font-size="14">风场</text>
+                <text x="310" y="52" fill="#919697" font-size="14">马场湖</text>
                 <!-- +70 0 -->
-                <text x="375" y="52" fill="#05bb4c" font-size="14">66MW</text>
+                <text x="375" y="52" fill="#05bb4c" font-size="14">{{sourceMap.MCH_GDC_zjts}}台</text>
             </g>
-            <g>
+            <g v-if="showType === 'all' || showType === 'gf'" class="item-label" @click.stop="clickLabel('XH_GDC')" @mouseover="mouseover(2)" @mouseout="mouseout">
                 <use xlink:href="#nx-map-line-1" x="290" y="80" />
                 <use xlink:href="#nx-map-circle-1" x="290" y="80" />
                 <!-- +25 -5 -->
@@ -122,15 +141,13 @@
                     stroke="#46C55A35"
                     fill="#000000"
                     opacity="0.8"
-                    class="item-label"
-                    @click="clickLabel"
                 />
                 <!-- +5 +12| -->
-                <text x="320" y="92" fill="#919697" font-size="14">风场</text>
+                <text x="320" y="92" fill="#919697" font-size="14">宣和</text>
                 <!-- +70 0 -->
-                <text x="385" y="92" fill="#05bb4c" font-size="14">66MW</text>
+                <text x="385" y="92" fill="#05bb4c" font-size="14">{{sourceMap.XH_GDC_zjts}}台</text>
             </g>
-            <g>
+            <g v-if="showType === 'all' || showType === 'fc'" class="item-label" @click.stop="clickLabel('NSS_FDC')" @mouseover="mouseover(3)" @mouseout="mouseout">
                 <use xlink:href="#nx-map-line-1" x="410" y="65" />
                 <use xlink:href="#nx-map-circle-1" x="410" y="65" />
                 <!-- +25 -5 -->
@@ -142,15 +159,13 @@
                     stroke="#46C55A35"
                     fill="#000000"
                     opacity="0.8"
-                    class="item-label"
-                    @click="clickLabel"
                 />
                 <!-- +5 +12| -->
-                <text x="440" y="77" fill="#919697" font-size="14">风场</text>
+                <text x="440" y="77" fill="#919697" font-size="14">牛首山</text>
                 <!-- +70 0 -->
-                <text x="505" y="77" fill="#05bb4c" font-size="14">126台</text>
+                <text x="505" y="77" fill="#05bb4c" font-size="14">{{sourceMap.NSS_FDC_zjts}}</text>
             </g>
-            <g>
+            <g v-if="showType === 'all' || showType === 'gf'" class="item-label" @click="clickLabel('DWK_GDC')" @mouseover="mouseover(4)" @mouseout="mouseout">
                 <use xlink:href="#nx-map-line-1" x="570" y="5" />
                 <use xlink:href="#nx-map-circle-1" x="570" y="5" />
                 <!-- +25 -5 -->
@@ -162,15 +177,13 @@
                     stroke="#46C55A35"
                     fill="#000000"
                     opacity="0.8"
-                    class="item-label"
-                    @click="clickLabel"
                 />
                 <!-- +5 +12| -->
-                <text x="600" y="17" fill="#919697" font-size="14">光伏</text>
+                <text x="600" y="17" fill="#919697" font-size="14">大武口</text>
                 <!-- +70 0 -->
-                <text x="665" y="17" fill="#05bb4c" font-size="14">66MW</text>
+                <text x="665" y="17" fill="#05bb4c" font-size="14">{{sourceMap.DWK_GDC_zjts}}台</text>
             </g>
-            <g>
+            <g v-if="showType === 'all' || showType === 'gf'" class="item-label" @click="clickLabel('PL_GDC')" @mouseover="mouseover(5)" @mouseout="mouseout">
                 <use xlink:href="#nx-map-line-1" x="590" y="30" />
                 <use xlink:href="#nx-map-circle-1" x="590" y="30" />
                 <!-- +25 -5 -->
@@ -182,15 +195,13 @@
                     stroke="#46C55A35"
                     fill="#000000"
                     opacity="0.8"
-                    class="item-label"
-                    @click="clickLabel"
                 />
                 <!-- +5 +12| -->
-                <text x="620" y="42" fill="#919697" font-size="14">光伏</text>
+                <text x="620" y="42" fill="#919697" font-size="14">平罗</text>
                 <!-- +70 0 -->
-                <text x="685" y="42" fill="#05bb4c" font-size="14">66MW</text>
+                <text x="685" y="42" fill="#05bb4c" font-size="14">{{sourceMap.PL_GDC_zjts}}台</text>
             </g>
-            <g>
+            <g v-if="showType === 'all' || showType === 'fc'" class="item-label"  @click="clickLabel('SBQ_FDC')" @mouseover="mouseover(6)" @mouseout="mouseout">
                 <use xlink:href="#nx-map-line-1" x="380" y="125" />
                 <use xlink:href="#nx-map-circle-1" x="380" y="125" />
                 <!-- +25 -5 -->
@@ -202,15 +213,13 @@
                     stroke="#46C55A35"
                     fill="#000000"
                     opacity="0.8"
-                    class="item-label"
-                    @click="clickLabel"
                 />
                 <!-- +5 +12| -->
-                <text x="410" y="137" fill="#919697" font-size="14">风场</text>
+                <text x="410" y="137" fill="#919697" font-size="14">石板泉</text>
                 <!-- +70 0 -->
-                <text x="475" y="137" fill="#05bb4c" font-size="14">126台</text>
+                <text x="475" y="137" fill="#05bb4c" font-size="14">{{sourceMap.SBQ_FDC_zjts}}台</text>
             </g>
-            <g>
+            <g v-if="showType === 'all' || showType === 'fc'" class="item-label" @click="clickLabel('MHS_FDC')" @mouseover="mouseover(7)" @mouseout="mouseout">
                 <use xlink:href="#nx-map-line-1" x="390" y="155" />
                 <use xlink:href="#nx-map-circle-1" x="390" y="155" />
                 <!-- +25 -5 -->
@@ -222,33 +231,155 @@
                     stroke="#46C55A35"
                     fill="#000000"
                     opacity="0.8"
-                    class="item-label"
-                    @click="clickLabel"
                 />
                 <!-- +5 +12| -->
-                <text x="420" y="167" fill="#919697" font-size="14">风场</text>
+                <text x="420" y="167" fill="#919697" font-size="14">麻黄山</text>
                 <!-- +70 0 -->
-                <text x="485" y="167" fill="#05bb4c" font-size="14">126台</text>
+                <text x="485" y="167" fill="#05bb4c" font-size="14">{{sourceMap.MHS_FDC_zjts}}台</text>
             </g>
-            <g>
+            <g v-if="showType === 'all' || showType === 'fc'" class="item-label" @click="clickLabel('QS_FDC')" @mouseover="mouseover(8)" @mouseout="mouseout">
                 <use xlink:href="#nx-map-line-1" x="430" y="180" />
                 <use xlink:href="#nx-map-circle-1" x="430" y="180" />
                 <!-- +25 -5 -->
-                <rect
-                    x="455"
-                    y="175"
-                    width="110"
-                    height="23"
-                    stroke="#46C55A35"
-                    fill="#000000"
-                    opacity="0.8"
-                    class="item-label"
-                    @click="clickLabel"
-                />
+                <rect x="455"
+                      y="175"
+                      width="110"
+                      height="23"
+                      stroke="#46C55A35"
+                      fill="#000000"
+                      opacity="0.8" />
                 <!-- +5 +12| -->
-                <text x="460" y="192" fill="#919697" font-size="14">光伏</text>
+                <text x="460" y="192" fill="#919697" font-size="14">青山</text>
                 <!-- +70 0 -->
-                <text x="525" y="192" fill="#05bb4c" font-size="14">126台</text>
+                <text x="525" y="192" fill="#05bb4c" font-size="14">{{sourceMap.QS_FDC_zjts}}台</text>
+            </g>
+            <g class="popup-layer-svg">
+                <g v-show="popup[0]">
+                    <!-- +5 (+10+50, +20)+25 -->
+                    <use xlink:href="#popup-box-svg" x="290" y="190" />
+                    <text x="300" y="210" fill="#919697" font-size="14">经度</text>
+                    <text x="350" y="210" fill="#05bb4c" font-size="14">37.43</text>
+                    <text x="300" y="235" fill="#919697" font-size="14">纬度</text>
+                    <text x="350" y="235" fill="#05bb4c" font-size="14">105.59</text>
+                    <text x="300" y="260" fill="#919697" font-size="14">海拔</text>
+                    <text x="350" y="260" fill="#05bb4c" font-size="14">1810</text>
+                    <text x="300" y="285" fill="#919697" font-size="14">功率</text>
+                    <text x="350" y="285" fill="#05bb4c" font-size="14">55</text>
+                    <text x="300" y="310" fill="#919697" font-size="14">风速</text>
+                    <text x="350" y="310" fill="#05bb4c" font-size="14">2</text>
+                </g>
+                <g v-show="popup[1]">
+                    <!-- +5 (+10+50, +20)+25 -->
+                    <use xlink:href="#popup-box-svg" x="420" y="35" />
+                    <text x="430" y="55" fill="#919697" font-size="14">经度</text>
+                    <text x="480" y="55" fill="#05bb4c" font-size="14">37.43</text>
+                    <text x="430" y="80" fill="#919697" font-size="14">纬度</text>
+                    <text x="480" y="80" fill="#05bb4c" font-size="14">105.59</text>
+                    <text x="430" y="105" fill="#919697" font-size="14">海拔</text>
+                    <text x="480" y="105" fill="#05bb4c" font-size="14">1810</text>
+                    <text x="430" y="130" fill="#919697" font-size="14">功率</text>
+                    <text x="480" y="130" fill="#05bb4c" font-size="14">55</text>
+                    <text x="430" y="155" fill="#919697" font-size="14">风速</text>
+                    <text x="480" y="155" fill="#05bb4c" font-size="14">2</text>
+                </g>
+                <g v-show="popup[2]">
+                    <!-- +5 (+10+50, +20)+25 -->
+                    <use xlink:href="#popup-box-svg" x="430" y="75" />
+                    <text x="440" y="95" fill="#919697" font-size="14">经度</text>
+                    <text x="490" y="95" fill="#05bb4c" font-size="14">37.43</text>
+                    <text x="440" y="120" fill="#919697" font-size="14">纬度</text>
+                    <text x="490" y="120" fill="#05bb4c" font-size="14">105.59</text>
+                    <text x="440" y="145" fill="#919697" font-size="14">海拔</text>
+                    <text x="490" y="145" fill="#05bb4c" font-size="14">1810</text>
+                    <text x="440" y="170" fill="#919697" font-size="14">功率</text>
+                    <text x="490" y="170" fill="#05bb4c" font-size="14">55</text>
+                    <text x="440" y="195" fill="#919697" font-size="14">风速</text>
+                    <text x="490" y="195" fill="#05bb4c" font-size="14">2</text>
+                </g>
+                <g v-show="popup[3]">
+                    <!-- +5 (+10+50, +20)+25 -->
+                    <use xlink:href="#popup-box-svg" x="550" y="60" />
+                    <text x="560" y="80" fill="#919697" font-size="14">经度</text>
+                    <text x="610" y="80" fill="#05bb4c" font-size="14">37.43</text>
+                    <text x="560" y="105" fill="#919697" font-size="14">纬度</text>
+                    <text x="610" y="105" fill="#05bb4c" font-size="14">105.59</text>
+                    <text x="560" y="130" fill="#919697" font-size="14">海拔</text>
+                    <text x="610" y="130" fill="#05bb4c" font-size="14">1810</text>
+                    <text x="560" y="155" fill="#919697" font-size="14">功率</text>
+                    <text x="610" y="155" fill="#05bb4c" font-size="14">55</text>
+                    <text x="560" y="180" fill="#919697" font-size="14">风速</text>
+                    <text x="610" y="180" fill="#05bb4c" font-size="14">2</text>
+                </g>
+                <g v-show="popup[4]">
+                    <!-- +5 (+10+50, +20)+25 -->
+                    <use xlink:href="#popup-box-svg" x="480" y="0" />
+                    <text x="490" y="20" fill="#919697" font-size="14">经度</text>
+                    <text x="540" y="20" fill="#05bb4c" font-size="14">37.43</text>
+                    <text x="490" y="45" fill="#919697" font-size="14">纬度</text>
+                    <text x="540" y="45" fill="#05bb4c" font-size="14">105.59</text>
+                    <text x="490" y="70" fill="#919697" font-size="14">海拔</text>
+                    <text x="540" y="70" fill="#05bb4c" font-size="14">1810</text>
+                    <text x="490" y="95" fill="#919697" font-size="14">功率</text>
+                    <text x="540" y="95" fill="#05bb4c" font-size="14">55</text>
+                    <text x="490" y="120" fill="#919697" font-size="14">风速</text>
+                    <text x="540" y="120" fill="#05bb4c" font-size="14">2</text>
+                </g>
+                <g v-show="popup[5]">
+                    <!-- +5 (+10+50, +20)+25 -->
+                    <use xlink:href="#popup-box-svg" x="500" y="25" />
+                    <text x="510" y="45" fill="#919697" font-size="14">经度</text>
+                    <text x="560" y="45" fill="#05bb4c" font-size="14">37.43</text>
+                    <text x="510" y="70" fill="#919697" font-size="14">纬度</text>
+                    <text x="560" y="70" fill="#05bb4c" font-size="14">105.59</text>
+                    <text x="510" y="95" fill="#919697" font-size="14">海拔</text>
+                    <text x="560" y="95" fill="#05bb4c" font-size="14">1810</text>
+                    <text x="510" y="120" fill="#919697" font-size="14">功率</text>
+                    <text x="560" y="120" fill="#05bb4c" font-size="14">55</text>
+                    <text x="510" y="145" fill="#919697" font-size="14">风速</text>
+                    <text x="560" y="145" fill="#05bb4c" font-size="14">2</text>
+                </g>
+                <g v-show="popup[6]">
+                    <!-- +5 (+10+50, +20)+25 -->
+                    <use xlink:href="#popup-box-svg" x="520" y="120" />
+                    <text x="530" y="140" fill="#919697" font-size="14">经度</text>
+                    <text x="580" y="140" fill="#05bb4c" font-size="14">37.43</text>
+                    <text x="530" y="165" fill="#919697" font-size="14">纬度</text>
+                    <text x="580" y="165" fill="#05bb4c" font-size="14">105.59</text>
+                    <text x="530" y="190" fill="#919697" font-size="14">海拔</text>
+                    <text x="580" y="190" fill="#05bb4c" font-size="14">1810</text>
+                    <text x="530" y="215" fill="#919697" font-size="14">功率</text>
+                    <text x="580" y="215" fill="#05bb4c" font-size="14">55</text>
+                    <text x="530" y="240" fill="#919697" font-size="14">风速</text>
+                    <text x="580" y="240" fill="#05bb4c" font-size="14">2</text>
+                </g>
+                <g v-show="popup[7]">
+                    <!-- +5 (+10+50, +20)+25 -->
+                    <use xlink:href="#popup-box-svg" x="530" y="150" />
+                    <text x="540" y="170" fill="#919697" font-size="14">经度</text>
+                    <text x="590" y="170" fill="#05bb4c" font-size="14">37.43</text>
+                    <text x="540" y="195" fill="#919697" font-size="14">纬度</text>
+                    <text x="590" y="195" fill="#05bb4c" font-size="14">105.59</text>
+                    <text x="540" y="220" fill="#919697" font-size="14">海拔</text>
+                    <text x="590" y="220" fill="#05bb4c" font-size="14">1810</text>
+                    <text x="540" y="245" fill="#919697" font-size="14">功率</text>
+                    <text x="590" y="245" fill="#05bb4c" font-size="14">55</text>
+                    <text x="540" y="270" fill="#919697" font-size="14">风速</text>
+                    <text x="590" y="270" fill="#05bb4c" font-size="14">2</text>
+                </g>
+                <g v-show="popup[8]">
+                    <!-- +5 (+10+50, +20)+25 -->
+                    <use xlink:href="#popup-box-svg" x="570" y="175" />
+                    <text x="580" y="195" fill="#919697" font-size="14">经度</text>
+                    <text x="630" y="195" fill="#05bb4c" font-size="14">37.43</text>
+                    <text x="580" y="220" fill="#919697" font-size="14">纬度</text>
+                    <text x="630" y="220" fill="#05bb4c" font-size="14">105.59</text>
+                    <text x="580" y="245" fill="#919697" font-size="14">海拔</text>
+                    <text x="630" y="245" fill="#05bb4c" font-size="14">1810</text>
+                    <text x="580" y="270" fill="#919697" font-size="14">功率</text>
+                    <text x="630" y="270" fill="#05bb4c" font-size="14">55</text>
+                    <text x="580" y="295" fill="#919697" font-size="14">风速</text>
+                    <text x="630" y="295" fill="#05bb4c" font-size="14">2</text>
+                </g>
             </g>
         </svg>
     </div>
@@ -261,7 +392,16 @@ export default {
     // 使用组件
     components: {},
     // 传入参数
-    props: {},
+    props: {
+      show:{
+        type:String,
+        default:"all"
+      },
+      data:{
+        type:Object,
+        default:() => {}
+      }
+    },
     // 自定义事件
     emits: {
         clickLabel: null,
@@ -269,16 +409,32 @@ export default {
     // 数据
     data() {
         return {
+            popup: [false, false, false, false, false, false, false, false, false],
+            showType:"",
+            sourceMap:{},
             c1: false,
             c2: false,
+            svgWidth: "791px",
+            svgHeight: "423px"
         };
     },
     // 函数
     methods: {
-        clickLabel: function () {
-           this.$emit("clickLabel");
+        clickLabel(wpId) {
+           this.$emit("clickLabel", wpId);
+        },
+        popupHide: function () {
+            for (let i = 0; i < this.popup.length; i++) {
+                this.popup[i] = false;
+            }
+        },
+        mouseover: function (index) {
+            this.popupHide();
+            this.popup[index] = true;
+        },
+        mouseout: function () {
+            this.popupHide();
         },
-        mouseover() {},
     },
     // 生命周期钩子
     beforeCreate() {
@@ -293,18 +449,23 @@ export default {
             }, 500);
         }, 2000);
     },
-    beforeMount() {
-        // 渲染前
-    },
+    
     mounted() {
         // 渲染后
+        this.svgWidth = this.$el.scrollWidth.toFixed(0) + "px";
+        this.svgHeight = this.$el.scrollHeight.toFixed(0) + "px";
+        this.showType = this.show;
+        this.sourceMap = this.data;
     },
-    beforeUpdate() {
-        // 数据更新前
-    },
-    updated() {
-        // 数据更新后
-    },
+    
+    watch:{
+      show(res){
+        this.showType = res;
+      },
+      data(res){
+        this.sourceMap = res;
+      }
+    }
 };
 </script>
 
@@ -403,7 +564,7 @@ export default {
     }
 
     .nx-map-down-circle-2 {
-        animation: nxMapDownCircle2 4s linear infinite;
+        animation: nxMapDownCircle2 4s linear;
     }
     @keyframes nxMapDownCircle2 {
         0% {
@@ -432,7 +593,7 @@ export default {
     }
 
     .nx-map-down-circle-3 {
-        animation: nxMapDownCircle3 4s linear infinite;
+        animation: nxMapDownCircle3 4s linear;
     }
     @keyframes nxMapDownCircle3 {
         0% {

src/views/Home/components/map/svg-map.vue

@@ -9,6 +9,8 @@
             viewBox="0 0 745.3 399"
             style="enable-background: new 0 0 745.3 399"
             xml:space="preserve"
+            :width = "svgWidth"
+            :height = "svgHeight"
         >
             <defs>
                 <g id="nx-map-line">
@@ -207,13 +209,16 @@ export default {
     // 传入参数
     props: {},
     // 自定义事件
-    emits: {},
+        emits: {
+        },
     // 数据
     data() {
         return {
             activeId: "",
             c1: false,
             c2: false,
+            svgWidth: "791px",
+            svgHeight: "423px"
         };
     },
     // 函数
@@ -241,6 +246,8 @@ export default {
     },
     mounted() {
         // 渲染后
+        this.svgWidth = this.$el.scrollWidth.toFixed(0) + "px";
+        this.svgHeight = this.$el.scrollHeight.toFixed(0) + "px";
     },
     beforeUpdate() {
         // 数据更新前

src/views/Home/components/power-plan.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="power-plan">
-    <tab @select="selectionItemClick" :data="tabs" class="power-plan-tab" />
-    <row>
+    <tab @select="selectionItemClick" :data="currTabs" class="power-plan-tab" />
+    <row @click="openDialog('计划电量完成详情', 'genreset/findProjectPlanPower', 'doneLineChart')">
       <Col :span="12">
-      <percent-card-2 :title="'月完成率' + (planData.ywcl || '') + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.yfdl"
-        :ActualValue="planData.yfdljh" :percent="planData.ywcl" />
+        <percent-card-2 :title="'月完成率' + parseInt((planData.yfdl / planData.yfdljh) * 100) + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.yfdl" :ActualValue="planData.yfdljh" :percent="planData.ywcl" />
       </Col>
       <Col :span="12">
-      <percent-card-2 :title="'年完成率' + (planData.nwcl || '') + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.nfdl"
-        :ActualValue="planData.nfdljh" :percent="planData.nwcl" />
+        <percent-card-2 :title="'年完成率' + parseInt((planData.nfdl / planData.nfdljh) * 100) + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.nfdl" :ActualValue="planData.nfdljh" :percent="planData.nwcl" />
       </Col>
     </row>
   </div>
@@ -24,6 +22,7 @@ export default {
   data () {
     return {
       planData: {},
+      wpId: "",
       // tab项
       tabs: [
         {
@@ -43,18 +42,36 @@ export default {
       },
     };
   },
-
   props: {
+    showSingle: {
+      type: Boolean,
+      default: false,
+    },
     data: {
       type: Object,
       default: () => { }
+    },
+    id:{
+      type: String,
+      default: ""
     }
   },
-
-  mounted () {
+  computed: {
+    currTabs() {
+      if (this.showSingle) {
+        return [
+          {
+            id: "1",
+            text: "风电",
+          },
+        ];
+      } else return this.tabs;
+    },
+  },
+  mounted() {
     this.planData = this.data;
+    this.wpId = this.id;
   },
-
   methods: {
     selectionItemClick (item) {
       // 点击tab选项 模拟数据变化
@@ -68,11 +85,66 @@ export default {
         actual: 45,
       };
     },
+
+    openDialog(dialogTitle, subUrl, dialogType){
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl,
+        data: {
+          id:that.wpId
+        },
+        success (res) {
+          
+          let key = [{
+            key:"value1",
+            title:"月计划发电量"
+          }, {
+            key:"value2",
+            title:"年计划发电量"
+          }, {
+            key:"value3",
+            title:"月发电量"
+          }, {
+            key:"value4",
+            title:"年发电量"
+          }];
+
+          let doneLineChartData = {
+            // 图表所用单位
+            units: [""],
+            value: [],
+          };
+
+          key.forEach((keyEle, keyIndex)=>{
+
+            doneLineChartData.value.push({
+              title: keyEle.title,
+              yAxisIndex: 0, // 使用单位
+              value: []
+            });
+
+            res.data.forEach(ele => {
+              doneLineChartData.value[keyIndex].value.push({
+                text: ele.name,
+                value: ele[keyEle.key]
+              });
+            });
+          });
+
+          that.$emit("chartClick", { dialogTitle, dialogType, data: doneLineChartData });
+
+        }
+      });
+    },
   },
 
   watch: {
     data (res) {
       this.planData = res;
+    },
+    id(res){
+      this.wpId = res;
     }
   }
 };

src/views/Home/components/power-review.vue

@@ -3,7 +3,7 @@
     <Row type="flex" justify="center" :align="'middle'">
       <!-- 功率复核 PowerLoad -->
       <Col v-for="item in PowerLoad" :key="item" :span="6">
-      <dash-pie-chart :title="item.title" :value="item.value" height="9.722vh" />
+        <dash-pie-chart :title="item.title" :value="item.value" height="9.722vh" @click="openDialog(item.dialogTitle, item.subUrl, item.targetName, item.dialogType)" />
       </Col>
     </Row>
   </div>
@@ -25,6 +25,7 @@ export default {
     return {
       // 功率复核数据
       PowerLoad: [],
+      wpId:""
     };
   },
 
@@ -32,16 +33,41 @@ export default {
     data: {
       type: Array,
       default: () => []
+    },
+    id:{
+      type:String,
+      defaylt:""
     }
   },
 
   mounted () {
     this.PowerLoad = this.data;
+    this.wpId = this.id;
+  },
+
+  methods:{
+    openDialog(dialogTitle, subUrl, targetName, dialogType){
+      let that = this;
+      that.API.requestData({
+          method: "POST",
+          subUrl,
+          data: {
+            id:that.wpId,
+            targetName
+          },
+          success (res) {
+            that.$emit("chartClick", { dialogTitle, dialogType, data: res.data });
+          }
+        });
+    }
   },
 
   watch: {
     data (res) {
       this.PowerLoad = res;
+    },
+    id(){
+      this.wpId = res;
     }
   }
 };

src/views/Home/dialog/table.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="health-day-info">
+    <!-- <div class="header">
+      <span class="herder-info">
+        风机编号：麻黄山24号风机
+      </span>
+      <span class="herder-info">
+        风机编号：麻黄山24号风机
+      </span>
+      <span class="herder-info">
+        基础指标
+      </span>
+    </div> -->
+    <div class="body">
+      <div class="left">
+        <table class="table-form">
+          <tr>
+            <td class="white"></td>
+            <td class="white" v-for="(item, index) in tableData.datels" :key="index">{{item}}</td>
+          </tr>
+          <tr v-for="(item, index) in tableData.result" :key="index">
+            <td class="white">{{item.value1}}</td>
+            <td class="white">{{item.value2}}</td>
+            <td class="white">{{item.value3}}</td>
+            <td class="white">{{item.value4}}</td>
+            <td class="white">{{item.value5}}</td>
+            <td class="white">{{item.value6}}</td>
+            <td class="white">{{item.value7}}</td>
+            <td class="white">{{item.value8}}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: "",
+      tableData:{}
+    };
+  },
+
+  props:{
+    data:{
+      type:Object,
+      default:() => {}
+    }
+  },
+
+  mounted(){
+    this.tableData = this.data;
+  },
+
+  watch:{
+    data(res){
+      this.tableData = res;
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.health-day-info {
+  .header {
+    display: flex;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    background: fade(@gray, 60);
+    color: @white;
+
+    .herder-info {
+      flex: 1 0 25%;
+      text-align: center;
+      font-size: @fontsize-s;
+
+      &:last-child {
+        flex: 1 0 50%;
+      }
+    }
+  }
+
+  .body {
+    display: flex;
+    .left {
+      flex: 0 0 100%;
+
+      display: flex;
+      flex-direction: column;
+
+      .chart-body {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+      }
+    }
+    .right {
+      flex: 0 0 50%;
+    }
+  }
+}
+</style>

src/views/LightMatrix/LightMatrix.vue

@@ -340,6 +340,7 @@ export default {
               } else if (key === "fjmap") {
                 sourceMap[key].forEach((pItem) => {
                   pItem.forEach((cItem) => {
+                    cItem.icon = "svg-photovoltaic";
                     cItem.color = that.getColor(cItem.fjzt);
                     cItem.isShow = true;
                   });

src/views/LightMatrix1/LightMatrix1.vue

@@ -108,7 +108,7 @@
           </div>
         </div>
         <div class="panel-body">
-          <div class="card" v-for="(cItem, cIndex) of pItem" :key="cIndex" v-show="cItem.isShow" :class="cItem.color">
+          <div class="card" v-for="(cItem, cIndex) of pItem" :key="cIndex" v-show="cItem.isShow" :class="cItem.color" @click="goDetails(cItem)">
             {{ cItem.wtnum }}
           </div>
           <!-- 站位用 保证卡片布局最后一行不会有问题 -->
@@ -321,6 +321,13 @@ export default {
         },
       });
     },
+
+    // 查看风机详情
+    goDetails(item){
+      this.$router.push({
+        path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
+      });
+    }
   },
 
   created() {

src/views/LightMatrix2/LightMatrix2.vue

@@ -27,7 +27,7 @@
           <div class="item2" v-for="(data, index) of panel2Data.datas" :key="index">
             <div class="name">{{ data.test }}</div>
             <div class="num2">{{ sourceMap[data.key] }}</div>
-            <!-- <div class="num1">×{{ data.num1 }}</div> -->
+            <div class="num1">×{{ data.num1 }}</div>
             <div class="num3">{{ data.num3 }}</div>
           </div>
         </div>
@@ -48,14 +48,14 @@
           </div>
         </div>
         <div class="panel-body">
-          <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color">
+          <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color" @click="goDetails(cItem)">
             <div class="card-panel">
               <div class="card-left">
                 <div class="tag">{{ cItem.wtnum }}</div>
               </div>
               <div class="card-right">
-                <div class="num">{{ cItem.gl }}</div>
-                <div class="num">{{ cItem.fs }}</div>
+                <div class="num">{{ cItem.gl }}&nbsp;kw</div>
+                <div class="num">{{ cItem.fs }}&nbsp;m/s</div>
               </div>
             </div>
             <div class="card-percent">
@@ -332,6 +332,13 @@ export default {
         },
       });
     },
+
+    // 查看风机详情
+    goDetails(item){
+      this.$router.push({
+        path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
+      });
+    }
   },
 
   created() {

src/views/LightMatrix3/LightMatrix3.vue

@@ -65,7 +65,7 @@
           </div>
         </div>
         <div class="panel-body">
-          <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color">
+          <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color" @click="goDetails(cItem)">
             <div class="circle">
               <span class="center-icon svg-icon svg-icon-md" :class="cItem.color == 'black' ? 'svg-icon-black' : 'svg-icon-write'">
                 <SvgIcon :svgid="mapping[cItem.color]"></SvgIcon>
@@ -396,7 +396,7 @@ export default {
           }
         },
       });
-    },
+    }
   },
 
   created() {

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

@@ -75,10 +75,10 @@ export default {
   },
   // 函数
   methods: {
-    jumpPage(id) {
+    jumpPage(wpId) {
       this.$router.push({
-        path: "/windsite/home",
-        query: { wpId: id },
+        path: `/monitor/windsite/home/${wpId}`,
+        // query: { wpId: id },
       });
     },
   },

src/views/WindSite/WindSite.vue

@@ -39,44 +39,44 @@ export default {
       menuDatas: [
         {
           icon: "svg-agc",
-          path: "/windsite/home",
+          path: "/monitor/windsite/home",
         },
         {
           icon: "svg-matrix",
-          path: "/windsite/draughtfanlist",
-        } /*
+          path: "/monitor/windsite/draughtfanlist",
+        },
         {
           icon: "svg-agc",
-          path: "/windsite/matrix",
+          path: "/monitor/windsite/matrix",
         },
         {
           icon: "svg-agc",
-          path: "/windsite/lightmatrix",
+          path: "/monitor/windsite/lightmatrix",
         },
         {
           icon: "svg-intranet-involvement",
-          path: "/windsite/box",
-        },*/,
-        {
-          icon: "svg-matrix",
-          path: "/windsite/info",
+          path: "/monitor/windsite/box",
         },
+        // {
+        //   icon: "svg-matrix",
+        //   path: "/monitor/windsite/info",
+        // },
         {
           icon: "svg-easy-compass",
-          path: "/windsite/tower",
-        } /*
+          path: "/monitor/windsite/tower",
+        },
         {
           icon: "svg-easy-compass",
-          path: "/windsite/Inverter-Info",
+          path: "/monitor/windsite/Inverter-Info",
         },
         {
           icon: "svg-easy-compass",
-          path: "/windsite/map",
+          path: "/monitor/windsite/map",
         },
         {
           icon: "svg-easy-compass",
-          path: "/windsite/map1",
-        },*/,
+          path: "/monitor/windsite/map1",
+        },
       ],
     };
   },
@@ -87,7 +87,11 @@ export default {
     },
   },
 
-  created() {},
+  created() {
+    this.menuDatas.forEach((ele) => {
+      ele.path = ele.path + "/" + this.$route.params.wpId;
+    });
+  },
 
   mounted() {},
 };

src/views/WindSite/components/bsx6.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="bsx6"></div>
+</template>
+
+<script>
+import { Graph } from "@antv/x6";
+
+export default {
+    // 名称
+    name: "bsx6",
+    // 使用组件
+    components: {},
+    // 传入参数
+    props: {},
+    // 自定义事件
+    emits: {},
+    // 数据
+    data() {
+        return {
+            graph: null,
+        };
+    },
+    // 函数
+    methods: {
+        initGraph: function () {
+            this.graph = new Graph({
+                container: this.$el, // 画布的容器
+                // width: undefined, // 默认使用容器宽度
+                // height: undefined, // 默认使用容器高度
+                autoResize: true, // boolean | Element | Document 是否监听容器大小改变，并自动更新画布大小 默认监听画布容器，也可以指定监听的元素
+            });
+        },
+        initData: function () {
+            const data = {
+                // 节点
+                nodes: [
+                    {
+                        id: "node1",
+                        shape: "rect",
+                        x: 174,
+                        y: 270,
+                        width: 1480,
+                        height: 3,
+                        attrs: {
+                            body: {
+                                fill: "#efdbff",
+                            },
+                        },
+                        movable: false,
+                    },
+                ],
+            };
+            this.graph.fromJSON(data);
+        },
+        initX6: function () {
+            this.initGraph();
+            this.initData();
+        },
+    },
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+        this.initX6();
+    },
+    beforeUpdate() {
+        // 数据更新前
+    },
+    updated() {
+        // 数据更新后
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.bsx6 {
+}
+</style>

src/views/WindSite/pages/BoosterStation.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class="booster-station">
+        <div class="btn-group-tabs">
+            <BtnGroup2
+                :btnGroups="btnGroups"
+                :rowIndex="0"
+                :index="1"
+                @select="select"
+            ></BtnGroup2>
+        </div>
+        <bsx6 class="booster-station-body"></bsx6>
+    </div>
+</template>
+
+<script>
+import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
+import bsx6 from "../components/bsx6.vue";
+export default {
+    // 名称
+    name: "BoosterStation",
+    // 使用组件
+    components: {
+        bsx6,
+        BtnGroup2,
+    },
+    // 数据
+    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",
+                        },
+                    ],
+                },
+            ],
+        };
+    },
+    // 函数
+    methods: {
+        select: function (item) {
+            console.log(item)
+        }
+    },
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+    },
+    beforeUpdate() {
+        // 数据更新前
+    },
+    updated() {
+        // 数据更新后
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.booster-station {
+    width: 100%;
+    height: calc(100vh - 90px);
+    display: flex;
+    flex-direction: column;
+
+    .btn-group-tabs {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .booster-station-body {
+        flex-grow: 1;
+    }
+}
+</style>

src/views/WindSite/pages/DraughtFanList.vue

@@ -77,25 +77,25 @@ export default {
             name: "风机名称",
             field: "code",
             is_num: false,
-            is_light: false,
+            is_light: true,
           },
           {
             name: "冷却风温度",
             field: "FDJLQFWD",
             is_num: true,
-            is_light: false,
+            is_light: true,
           },
           {
             name: "有功功率",
             field: "FJGL",
             is_num: true,
-            is_light: false,
+            is_light: true,
           },
           {
             name: "液压油温度",
             field: "YYYW",
             is_num: true,
-            is_light: false,
+            is_light: true,
           },
           {
             name: "Pcspp温度",
@@ -202,7 +202,7 @@ export default {
         method: "POST",
         subUrl: "monitorwt/findWtInfoList",
         data: {
-          wpId: "MHS_FDC",
+          wpId: that.wpId
         },
         success(res) {
           res.data.forEach((ele) => {
@@ -220,6 +220,7 @@ export default {
 
   created() {
     let that = this;
+    that.wpId = that.$route.params.wpId;
     that.$nextTick(() => {
       that.requestData(false);
       that.timmer = setInterval(() => {

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

@@ -173,9 +173,11 @@
         </row>
       </panel-3>
     </row>
-    <div class="first-info mg-t-16 mg-b-16" style="height:215px;">
+    <div class="first-info mg-t-16 mg-b-16">
       <div style="flex:0 1 450px;">
-        <panel title="日度损失电量分析"></panel>
+        <panel title="场站">
+          <station height="18.519vh" />
+        </panel>
       </div>
       <div class="mg-l-16" style="flex:1 1 auto;" ref="lineChart">
         <panel title="4小时功率曲线图">
@@ -238,12 +240,13 @@ import SvgIcon from "../../../../components/coms/icon/svg-icon.vue";
 import Panel from "../../../../components/coms/panel/panel.vue";
 import Panel3 from "../../../../components/coms/panel/panel3.vue";
 import LightMatrix from "./light-matrix.vue";
+import Station from "./Station.vue";
 import WindSiteWeather from "./wind-site-weather.vue";
 export default {
   // 名称
   name: "WindSiteHome",
   // 使用组件
-  components: { WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix, BtnGroupDouble },
+  components: { WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix, BtnGroupDouble, Station },
   // 数据
   data() {
     return {
@@ -455,6 +458,8 @@ export default {
             res.data.fjjzmap.fjmap[0].forEach((ele) => {
               fjmap.push({
                 tag: ele.wtnum,
+                wtId: ele.wtId,
+                wpId: ele.wpId,
                 color: that.getColor(ele.fjzt),
               });
             });
@@ -462,7 +467,7 @@ export default {
             keys.forEach((key, keyIndex) => {
               res.data.glvos.forEach((ele) => {
                 Powertrend.value[keyIndex].value.push({
-                  text: "",
+                  text: new Date().formatDate("yyyy-MM-dd"),
                   value: ele[key],
                 });
               });
@@ -616,10 +621,9 @@ export default {
 
   created() {
     let that = this;
-    that.wpId = that.$route.query.wpId;
+    that.wpId = that.$route.params.wpId;
     that.$nextTick(() => {
       that.requestData(false);
-
       that.timmer = setInterval(() => {
         that.requestData(false);
       }, that.$store.state.websocketTimeSec);

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

@@ -0,0 +1,487 @@
+<template>
+  <div :id="id" class="station"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import { Graph } from "@antv/x6";
+import partten from "@/helper/partten.js";
+import stationimg from "@/assets/images/station.png";
+
+export default {
+  // 名称
+  name: "station",
+  // 使用组件
+  components: {},
+  // 数据
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    // 高度 默认9.722vh
+    height: {
+      type: String,
+      default: "175px",
+    },
+  },
+  data() {
+    return {
+      id: "",
+      list: [
+        {
+          id: "root",
+          type: "img",
+          image: stationimg,
+          x: 10,
+          y: 70,
+        },
+        // 线A
+        {
+          id: "A1",
+          type: "circle",
+          x: 120,
+          y: 40,
+          connects: ["root"],
+        },
+        {
+          id: "A2",
+          type: "circle",
+          x: 180,
+          y: 30,
+          connects: ["A1"],
+        },
+        {
+          id: "A3",
+          type: "circle",
+          x: 200,
+          y: 15,
+          connects: ["A2"],
+        },
+        {
+          id: "A3-1",
+          type: "circle",
+          x: 200,
+          y: 35,
+          connects: ["A3"],
+        },
+        {
+          id: "A3-2",
+          type: "circle",
+          x: 240,
+          y: 35,
+          connects: ["A3-1"],
+        },
+        {
+          id: "A3-3",
+          type: "circle",
+          x: 260,
+          y: 45,
+          connects: ["A3-2"],
+        },
+        {
+          id: "A4",
+          type: "circle",
+          x: 260,
+          y: 15,
+          connects: ["A3"],
+        },
+        {
+          id: "A5",
+          type: "circle",
+          x: 280,
+          y: 5,
+          connects: ["A4"],
+        },
+        {
+          id: "A6",
+          type: "circle",
+          x: 310,
+          y: 5,
+          connects: ["A5"],
+        },
+        {
+          id: "A7",
+          type: "circle",
+          x: 330,
+          y: 20,
+          connects: ["A6"],
+        },
+        {
+          id: "A8",
+          type: "circle",
+          x: 350,
+          y: 15,
+          connects: ["A7"],
+        },
+        {
+          id: "A9",
+          type: "circle",
+          x: 350,
+          y: 15,
+          connects: ["A8"],
+        },
+        {
+          id: "A10",
+          type: "circle",
+          x: 370,
+          y: 5,
+          connects: ["A9"],
+        },
+        {
+          id: "A11",
+          type: "circle",
+          x: 400,
+          y: 0,
+          connects: ["A10"],
+        },
+        // 线B
+        {
+          id: "B1",
+          type: "circle",
+          x: 150,
+          y: 60,
+          connects: ["root"],
+        },
+        {
+          id: "B2",
+          type: "circle",
+          x: 180,
+          y: 70,
+          connects: ["B1"],
+        },
+        {
+          id: "B3",
+          type: "circle",
+          x: 220,
+          y: 55,
+          connects: ["B2"],
+        },
+        {
+          id: "B4",
+          type: "circle",
+          x: 240,
+          y: 75,
+          connects: ["B3"],
+        },
+        {
+          id: "B5",
+          type: "circle",
+          x: 280,
+          y: 45,
+          connects: ["B4"],
+        },
+        {
+          id: "B6",
+          type: "circle",
+          x: 310,
+          y: 60,
+          connects: ["B5"],
+        },
+        {
+          id: "B6-1",
+          type: "circle",
+          x: 310,
+          y: 50,
+          connects: ["B6"],
+        },
+        {
+          id: "B6-2",
+          type: "circle",
+          x: 370,
+          y: 40,
+          connects: ["B6-1"],
+        },
+        {
+          id: "B7",
+          type: "circle",
+          x: 330,
+          y: 60,
+          connects: ["B6"],
+        },
+        {
+          id: "B8",
+          type: "circle",
+          x: 370,
+          y: 50,
+          connects: ["B7"],
+        },
+        {
+          id: "B9",
+          type: "circle",
+          x: 390,
+          y: 70,
+          connects: ["B8"],
+        },
+        {
+          id: "B10",
+          type: "circle",
+          x: 420,
+          y: 65,
+          connects: ["B9"],
+        },
+        // 线C
+        {
+          id: "C1",
+          type: "circle",
+          x: 150,
+          y: 75,
+          connects: ["root"],
+        },
+        {
+          id: "C2",
+          type: "circle",
+          x: 220,
+          y: 85,
+          connects: ["C1"],
+        },
+        {
+          id: "C3",
+          type: "circle",
+          x: 290,
+          y: 95,
+          connects: ["C2"],
+        },
+        {
+          id: "C4",
+          type: "circle",
+          x: 330,
+          y: 130,
+          connects: ["C3"],
+        },
+        {
+          id: "C5",
+          type: "circle",
+          x: 350,
+          y: 110,
+          connects: ["C4"],
+        },
+        // 线D
+        {
+          id: "D1",
+          type: "circle",
+          x: 150,
+          y: 130,
+          connects: ["root"],
+        },
+        {
+          id: "D2",
+          type: "circle",
+          x: 190,
+          y: 125,
+          connects: ["D1"],
+        },
+        {
+          id: "D3",
+          type: "circle",
+          x: 230,
+          y: 120,
+          connects: ["D2"],
+        },
+        {
+          id: "D4",
+          type: "circle",
+          x: 270,
+          y: 115,
+          connects: ["D3"],
+        },
+        {
+          id: "D5",
+          type: "circle",
+          x: 310,
+          y: 115,
+          connects: ["D4"],
+        },
+        {
+          id: "D6",
+          type: "circle",
+          x: 360,
+          y: 90,
+          connects: ["D5"],
+        },
+        {
+          id: "D7",
+          type: "circle",
+          x: 410,
+          y: 85,
+          connects: ["D6"],
+        },
+        // 线E
+        {
+          id: "E1",
+          type: "circle",
+          x: 145,
+          y: 145,
+          connects: ["root"],
+        },
+        {
+          id: "E2",
+          type: "circle",
+          x: 180,
+          y: 140,
+          connects: ["E1"],
+        },
+        {
+          id: "E3",
+          type: "circle",
+          x: 240,
+          y: 150,
+          connects: ["E2"],
+        },
+        {
+          id: "E4",
+          type: "circle",
+          x: 265,
+          y: 140,
+          connects: ["E3"],
+        },
+        {
+          id: "E5",
+          type: "circle",
+          x: 300,
+          y: 145,
+          connects: ["E4"],
+        },
+        {
+          id: "E6",
+          type: "circle",
+          x: 325,
+          y: 140,
+          connects: ["E5"],
+        },
+        {
+          id: "E7",
+          type: "circle",
+          x: 350,
+          y: 125,
+          connects: ["E6"],
+        },
+        {
+          id: "E8",
+          type: "circle",
+          x: 390,
+          y: 120,
+          connects: ["E7"],
+        },
+        {
+          id: "E9",
+          type: "circle",
+          x: 410,
+          y: 140,
+          connects: ["E8"],
+        },
+        {
+          id: "E10",
+          type: "circle",
+          x: 425,
+          y: 130,
+          connects: ["E9"],
+        },
+      ],
+    };
+  },
+  // 函数
+  methods: {
+    initStation() {
+      const graph = new Graph({
+        container: document.getElementById(this.id),
+        grid: false,
+      });
+
+      this.list.forEach((data) => {
+        this.createNode(graph, data);
+      });
+    },
+    createNode(graph, data) {
+      switch (data.type) {
+        case "circle":
+          graph.addNode({
+            id: data.id,
+            shape: "circle",
+            x: data.x,
+            y: data.y,
+            width: 8,
+            height: 8,
+            attrs: {
+              body: {
+                fill: partten.getColor("green"),
+                stroke: "transparent",
+              },
+            },
+          });
+          break;
+
+        case "img":
+          graph.addNode({
+            id: data.id,
+            x: data.x,
+            y: data.y,
+            width: 120,
+            height: 45,
+            shape: "html",
+            label: "升压站",
+            html() {
+              const wrap = document.createElement("div");
+              wrap.innerHTML = `<img src="${data.image}" />`;
+              return wrap;
+            },
+            attrs: {
+              label: {
+                x: 0,
+                y: 70,
+                fill: partten.getColor("gray"),
+                fontSize: 12,
+              },
+            },
+          });
+          break;
+      }
+
+      if (data.connects && data.connects.length > 0) {
+        data.connects.forEach((value, index) => {
+          graph.addEdge({
+            source: data.id,
+            target: value,
+            attrs: {
+              line: {
+                stroke: partten.getColor("gray"),
+                strokeDasharray: 4,
+                sourceMarker: {
+                  name: "path",
+                },
+                targetMarker: {
+                  name: "path",
+                },
+              },
+            },
+          });
+        });
+      }
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    this.id = "station-" + util.newGUID();
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initStation();
+    });
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {},
+};
+</script>
+
+<style lang="less"></style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="light-matrix-small">
-    <div class="card" v-for="(item, i) of list" :key="i" :class="item.color">
+    <div class="card" v-for="(item, i) of list" :key="i" :class="item.color" @click="jumpUrl(item.wpId, item.wtId)">
       {{ item.tag }}
     </div>
     <!-- 站位用 保证卡片布局最后一行不会有问题 -->
@@ -48,6 +48,13 @@ export default {
         this.$el.style.width = "1168px";
       }
     },
+
+    // 页面跳转
+    jumpUrl(wpId, wtId){
+      this.$router.push({
+        path: `/monitor/windsite/info/${wpId}/${wtId}`
+      });
+    }
   },
   // 生命周期钩子
   beforeCreate() {

src/views/WindSite/pages/Info/Base-Info.vue

@@ -14,7 +14,7 @@
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">机型</div>
-        <div class="tag-value">{{ sourceMap.lnname }}</div>
+        <div class="tag-value">{{ sourceMap.model }}</div>
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">告警时间</div>
@@ -34,19 +34,31 @@
             <div class="generation-value green">{{ sourceMap.jczbmap && sourceMap.jczbmap.RFDL }}<span class="unit">kwh</span></div>
           </div>
           <el-row class="wind-site-state">
-            <el-col :span="6">
+            <el-col :span="6" class="generation-item">
+              <i class="svg-icon svg-icon-lg svg-icon-gray">
+                <svg-icon :svgid="'svg-availability'" />
+              </i>
               <div class="value">{{ sourceMap.jczbmap && sourceMap.jczbmap.FJKYL }}</div>
               <div class="text">月可利用率</div>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="6" class="generation-item">
+              <i class="svg-icon svg-icon-lg svg-icon-gray not-first">
+                <svg-icon :svgid="'svg-availability'" />
+              </i>
               <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.ygzxs }}</div>
               <div class="text">月故障小时数</div>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="6" class="generation-item">
+              <i class="svg-icon svg-icon-lg svg-icon-gray not-first">
+                <svg-icon :svgid="'svg-availability'" />
+              </i>
               <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.ytjxs }}</div>
               <div class="text">月待机小时数</div>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="6" class="generation-item">
+              <i class="svg-icon svg-icon-lg svg-icon-gray not-first">
+                <svg-icon :svgid="'svg-availability'" />
+              </i>
               <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.yyxxs }}</div>
               <div class="text">月发电小时数</div>
             </el-col>
@@ -64,12 +76,12 @@
     </el-row>
     <!-- 基本信息 -->
     <el-row>
-      <el-col :span="12" class="pd-r-16">
+      <el-col :span="12">
         <!-- 基本信息 -->
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
             <div class="svg-icon svg-icon-gray-l mg-r-16">
-              <svg-icon :svgid="'svg-normal-power'" />
+              <svg-icon :svgid="'svg-base-info'" style="margin: 3px 0 -3px 0;" />
             </div>
             <div class="title">发电机</div>
           </div>
@@ -114,7 +126,7 @@
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
             <div class="svg-icon svg-icon-gray-l mg-r-16">
-              <svg-icon :svgid="'svg-normal-power'" />
+              <svg-icon :svgid="'svg-parameter'" style="margin: 6px 0 -6px 0;" />
             </div>
             <div class="title">齿轮箱</div>
           </div>
@@ -151,9 +163,9 @@
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
             <div class="svg-icon svg-icon-gray-l mg-r-16">
-              <svg-icon :svgid="'svg-normal-power'" />
+              <svg-icon :svgid="'svg-pitch-info'" style="margin: 3px 0 -3px 0;padding: 2px;" />
             </div>
-            <div class="title">变桨</div>
+            <div class="title">变桨信息</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
@@ -190,9 +202,9 @@
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
             <div class="svg-icon svg-icon-gray-l mg-r-16">
-              <svg-icon :svgid="'svg-normal-power'" />
+              <svg-icon :svgid="'svg-power-grid'" />
             </div>
-            <div class="title">偏航</div>
+            <div class="title">偏航信息</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
@@ -211,9 +223,9 @@
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
             <div class="svg-icon svg-icon-gray-l mg-r-16">
-              <svg-icon :svgid="'svg-normal-power'" />
+              <svg-icon :svgid="'svg-temperature-info'" style="margin: 3px -5px -3px 5px;" />
             </div>
-            <div class="title">液压</div>
+            <div class="title">液压信息</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
@@ -301,6 +313,7 @@ export default {
   .wind-site-name {
     padding: 0.37vh 2.222vh;
     display: flex;
+    align-items: center;
     font-size: @fontsize-s;
     border: 1px solid @green;
     .svg-icon {
@@ -353,6 +366,36 @@ export default {
         font-size: 2.037vh;
       }
     }
+
+    .generation-item {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      text-align: center;
+      i {
+        position: absolute;
+        left: calc(50% - 44px);
+        top: -8px;
+        svg {
+          width: 90px;
+          height: 90px;
+        }
+
+        &.not-first {
+          left: calc(50% - 38px);
+        }
+      }
+      .value {
+        margin: 32px 0;
+        align-items: center;
+        flex: 1 0 auto;
+        font-size: 12px;
+      }
+      .text {
+        font-size: 12px;
+      }
+    }
   }
 
   .power-load {

src/views/WindSite/pages/Info/Info.vue

@@ -11,12 +11,14 @@
         <div class="info-menu-item" v-for="(item, index) in InfoBtns.data" :key="item" :class="{ active: InfoBtns.activeIndex == index }" @click="onInfoMenuItemClick(item, index)">{{ item.text }}</div>
       </div>
       <el-row>
-        <el-col :span="16" class="pd-r-16" style="text-align: center;">
+        <el-col :span="16" class="pd-r-16" style="position:relative;">
           <!-- 基本信息 使用 v-if 每次点击重新加载  -->
           <!-- 使用 v-show 首次全部加载 之后隐藏 点击后显示 -->
           <base-info v-show="InfoBtns.activeIndex == 0" :data="sourceMap" />
           <!-- <base-info v-if="InfoBtns.activeIndex == 2" /> -->
-          <StandAloneImg class="sai" v-show="InfoBtns.activeIndex != 0" :activeIndex="InfoBtns.activeIndex" @selectSvg="selectSvg"></StandAloneImg>
+          <div style="text-align:center;">
+            <StandAloneImg class="sai" v-show="InfoBtns.activeIndex != 0" :activeIndex="InfoBtns.activeIndex" @selectSvg="selectSvg"></StandAloneImg>
+          </div>
           <generator class="saig" v-show="InfoBtns.activeIndex == 1"></generator>
           <gearbox class="saig" v-show="InfoBtns.activeIndex == 2"></gearbox>
         </el-col>
@@ -139,7 +141,7 @@ export default {
         method: "POST",
         subUrl: "matrix/findSimpleMatrixAll",
         data: {
-          wpId: "MHS_FDC",
+          wpId: that.wpId,
         },
         success(res) {
           let WindSites = [];
@@ -156,6 +158,7 @@ export default {
             pEle.fjls[0].forEach((cEle) => {
               WindSites[pIndex].children.push({
                 id: cEle.wtId,
+                wpId: cEle.wpId,
                 text: cEle.wtnum,
                 color: that.getColor(cEle.fjzt),
               });
@@ -212,6 +215,8 @@ export default {
 
   created() {
     let that = this;
+    that.wpId = that.$route.params.wpId;
+    that.wtId = that.$route.params.wtId || '';
     that.$nextTick(() => {
       that.requestData(false);
       that.timmer = setInterval(() => {
@@ -236,7 +241,9 @@ export default {
   }
 
   .saig {
-    margin-top: -100px;
+    position: absolute;
+    width: 100%;
+    bottom: 0;
   }
 
   .wind-site-menu {

src/views/WindSite/pages/Info/Warning.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="wind-site-warning">
-    <div class="search pd-16">
-      <el-row class="mg-b-16">
+    <div class="search pd-16 pd-b-8">
+      <el-row>
         <div class="query">
           <input class="search-input" name="query" v-model="query" />
         </div>
@@ -17,7 +17,7 @@
       </el-row>
     </div>
     <div class="warning-list">
-      <Table :data="warning" />
+      <Table :data="warning" :canScroll="true" />
     </div>
   </div>
 </template>
@@ -106,7 +106,7 @@ export default {
         data.index = index;
 
         if (this.activeArray.length < index + 1) {
-          this.activeArray.push(false);
+          this.activeArray.push((!index ? true : false));
         }
 
         options.push({
@@ -187,6 +187,8 @@ export default {
         outline: unset;
         border-radius: 0%;
         margin-right: 0.741vh;
+        height: 33px;
+        line-height: 33px;
       }
     }
 
@@ -195,10 +197,12 @@ export default {
       flex: 0 0 auto;
       background: transparent;
       border: 1px solid @darkgray;
-      padding: 0.741vh 1.481vh;
+      // padding: 0.741vh 1.481vh;
       color: @gray;
       font-size: @fontsize-s;
       cursor: pointer;
+      height: 33px;
+      line-height: 33px;
     }
 
     .empty {
@@ -208,25 +212,24 @@ export default {
     .options {
       .option-item {
         display: flex;
-        padding-bottom: 0.741vh;
+        padding-top: 0.741vh;
         color: @gray;
         cursor: pointer;
         font-size: @fontsize-s;
 
         .count {
           flex: 0 0 3.704vh;
-          padding: 0.37vh;
           text-align: center;
           border: 1px solid @darkgray;
           margin-right: 0.37vh;
-          line-height: 2.222vh;
+          line-height: 30px;
         }
 
         .text {
           flex: 1 0 auto;
-          padding: 0.741vh;
           text-align: center;
           border: 1px solid @darkgray;
+          line-height: 30px;
         }
 
         & + .option-item {
@@ -267,7 +270,7 @@ export default {
     }
 
     tbody {
-      height: 571px;
+      height: 512px;
     }
   }
 }

src/views/WindSite/pages/Info/pages/generator.vue

@@ -1,109 +1,162 @@
 <template>
-    <div class="generator">
-        <div class="info-panel base-info">
-          <div class="panel-title gary-l">
-            <div class="title">遥测值</div>
-          </div>
-          <div class="panel-body">
-            <table class="table-form">
-              <tr>
-                <td class="text gray">U1绕组温度</td>
-                <td class="value green">90.5</td>
-                <td class="unit gray">℃</td>
-                <td class="text gray">轴承A温度</td>
-                <td class="value green">31.7</td>
-                <td class="unit gray">℃</td>
-              </tr>
-              <tr>
-                <td class="text gray">V1绕组温度</td>
-                <td class="value green">89.5</td>
-                <td class="unit gray">℃</td>
-                <td class="text gray">轴承B温度</td>
-                <td class="value green">49.9</td>
-                <td class="unit gray">℃</td>
-              </tr>
-              <tr>
-                <td class="text gray">W1绕组温度</td>
-                <td class="value green">87.3</td>
-                <td class="unit gray">℃</td>
-                <td class="text gray"></td>
-                <td class="value green"></td>
-                <td class="unit gray"></td>
-              </tr>
-            </table>
-          </div>
-        </div>
+  <div class="generator">
+    <div class="info-panel base-info">
+      <div class="panel-title gary-l">
+        <div class="title">遥测值</div>
+      </div>
+      <div class="panel-body">
+        <table class="table-form">
+          <tr>
+            <td class="text gray">U1绕组温度</td>
+            <td class="value green">90.5</td>
+            <td class="unit gray">℃</td>
+            <td class="text gray">轴承A温度</td>
+            <td class="value green">31.7</td>
+            <td class="unit gray">℃</td>
+          </tr>
+          <tr>
+            <td class="text gray">V1绕组温度</td>
+            <td class="value green">89.5</td>
+            <td class="unit gray">℃</td>
+            <td class="text gray">轴承B温度</td>
+            <td class="value green">49.9</td>
+            <td class="unit gray">℃</td>
+          </tr>
+          <tr>
+            <td class="text gray">W1绕组温度</td>
+            <td class="value green">87.3</td>
+            <td class="unit gray">℃</td>
+            <td class="text gray"></td>
+            <td class="value green"></td>
+            <td class="unit gray"></td>
+          </tr>
+        </table>
+      </div>
     </div>
+    <div class="info-panel base-info">
+      <div class="panel-title gary-l">
+        <div class="title">遥测值</div>
+      </div>
+      <div class="panel-body">
+        <table class="table-form">
+          <tr>
+            <td class="dot">空冷风扇保护1</td>
+            <td class="dot">空冷风扇保护1</td>
+            <td class="dot">空冷风扇保护1</td>
+            <td class="dot">空冷风扇保护1</td>
+            <td class="dot">空冷风扇保护1</td>
+          </tr>
+          <tr>
+            <td class="dot ">空冷风扇保护1</td>
+            <td class="dot ">空冷风扇保护1</td>
+            <td class="dot ">空冷风扇保护1</td>
+            <td class="dot red">空冷风扇保护1</td>
+            <td class="dot red">空冷风扇保护1</td>
+          </tr>
+          <tr>
+            <td class="dot ">空冷风扇保护1</td>
+            <td class="dot ">空冷风扇保护1</td>
+            <td class="dot ">空冷风扇保护1</td>
+            <td class="dot red">空冷风扇保护1</td>
+            <td class="dot">空冷风扇保护1</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        // 名称
-        name: "generator",
-        // 使用组件
-        components: {},
-        // 数据
-        data() {
-            return {}
-        },
-        // 函数
-        methods: {},
-        // 生命周期钩子
-        beforeCreate() {
-            // 创建前
-        },
-        created() {
-            // 创建后
-        },
-        beforeMount() {
-            // 渲染前
-        },
-        mounted() {
-            // 渲染后
-        },
-        beforeUpdate() {
-            // 数据更新前
-        },
-        updated() {
-            // 数据更新后
-        },
-    }
+export default {
+  // 名称
+  name: "generator",
+  // 使用组件
+  components: {},
+  // 数据
+  data() {
+    return {};
+  },
+  // 函数
+  methods: {},
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
 </script>
 
 <style lang="less" scoped>
-    .generator {
-        
-        .info-panel {
-          flex: 1 0 auto;
-          width: 100%;
-          .panel-title {
-            display: flex;
-            width: 100%;
-            background: fade(@darkgray, 20);
-            padding: 1.37vh;
-            padding-left: 2.222vh;
-            align-items: center;
-            font-size: @fontsize-s;
-            color: #b2bdc0;
-        
-            svg {
-              .svg-use path {
-                fill: @gray;
-              }
-        
-              width: 2.222vh;
-              height: 2.222vh;
-            }
-          }
-        
-          .panel-body {
-            border: 1px solid fade(@darkgray, 40);
-            border-top: 0px;
-          }
-        
-          & + .info-panel {
-            margin-top: 1.481vh;
+.generator {
+  .info-panel {
+    flex: 1 0 auto;
+    width: 100%;
+    .panel-title {
+      display: flex;
+      width: 100%;
+      background: fade(@darkgray, 20);
+      padding: 1.37vh;
+      padding-left: 2.222vh;
+      align-items: center;
+      font-size: @fontsize-s;
+      color: #b2bdc0;
+
+      svg {
+        .svg-use path {
+          fill: @gray;
+        }
+
+        width: 2.222vh;
+        height: 2.222vh;
+      }
+    }
+
+    .panel-body {
+      border: 1px solid fade(@darkgray, 40);
+      border-top: 0px;
+    }
+
+    & + .info-panel {
+      margin-top: 1.481vh;
+    }
+
+    .table-form {
+      .dot {
+        color: @gray;
+
+        &.red {
+          color: @red;
+
+          &::before {
+            background: @red;
           }
         }
+
+        &::before {
+          content: " ";
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          background: @green;
+          margin-right: 8px;
+          border-radius: 50%;
+        }
+      }
     }
+  }
+}
 </style>

src/views/WindSite/pages/Tower.vue

@@ -141,7 +141,7 @@ export default {
         method: "POST",
         subUrl: "monitor/findCftInfo",
         data: {
-          wpId: "MHS_FDC",
+          wpId: that.wpId,
         },
         success(res) {
           let rmgtmap = {
@@ -242,6 +242,7 @@ export default {
 
   created() {
     let that = this;
+    that.wpId = that.$route.params.wpId;
     that.$nextTick(() => {
       that.requestData(false);
       that.timmer = setInterval(() => {
@@ -258,10 +259,11 @@ export default {
 </script>
 
 <style lang="less">
-.tower {
-  position: relative;
-  width: 100%;
-  height: 100%;
+    .tower {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
 
   .windmill-1,
   .windmill-2,

src/views/layout/Header.vue

@@ -5,8 +5,7 @@
         {{ menu.text }}
       </li>
     </ul>
-    <!--
-    <ul class="header-menu-dropdown" :class="{ dropdown: dropdown }">
+    <!-- <ul class="header-menu-dropdown" :class="{ dropdown: dropdown }">
       <li class="header-menu-dropdown-title" @click="clickMenu()"><i class="fa fa-gear"></i>菜单<i class="fa fa-sort-down down"></i></li>
       <ul class="header-menu-dropdown-list">
         <li class="header-menu-dropdown-item" v-for="(menu, index) of menusDropdown" :key="menu" @click="clickSubMenu(index, menu.code)">
@@ -15,7 +14,7 @@
       </ul>
     </ul> -->
     <ul class="header-menu-user">
-      <li class="header-menu-user-title"><i class="fa fa-user"></i>王军</li>
+      <li class="header-menu-user-title"><i class="fa fa-user"></i>Administrator</li>
     </ul>
   </div>
 </template>
@@ -27,71 +26,68 @@ export default {
         {
           id: "monitor",
           text: "状态监视",
-          path: "/",
+          path: "/monitor/home",
           isActive: true,
         },
         {
           id: "datacenter",
           text: "数据管理",
-          path: "/",
+          path: "/datacenter",
           isActive: false,
         },
         {
           id: "statistic",
           text: "统计分析",
-          path: "/",
+          path: "/statistic",
           isActive: false,
         },
         {
           id: "health",
           text: "健康管理",
-          path: "/",
+          path: "/health",
           isActive: false,
         },
         {
           id: "decision",
           text: "决策支持",
-          path: "/",
+          path: "/decision/decision1",
           isActive: false,
         },
         {
           id: "knowledge",
           text: "知识管理",
-          path: "/",
+          path: "/knowledge",
           isActive: false,
         },
         {
           id: "report",
           text: "智能报表",
-          path: "/",
+          path: "/report",
           isActive: false,
         },
       ],
       activeIndex: 0,
-      /* menusDropdown: [
-        {
-          text: "子菜单1",
-          code: "submenu1",
-        },
-        {
-          text: "子菜单2",
-          code: "submenu2",
-        },
-        {
-          text: "子菜单3",
-          code: "submenu3",
-        },
-      ],
-      dropdown: false,*/
+      // menusDropdown: [
+      //   {
+      //     text: "子菜单1",
+      //     code: "submenu1",
+      //   },
+      //   {
+      //     text: "子菜单2",
+      //     code: "submenu2",
+      //   },
+      //   {
+      //     text: "子菜单3",
+      //     code: "submenu3",
+      //   },
+      // ],
+      // dropdown: false,
     };
   },
-  emits: {
-    onMenuClick: null,
-  },
   methods: {
     click(index, data) {
       this.activeIndex = index;
-      this.$emit("onMenuClick", { id: data.id });
+      this.$router.push(data.path);
     },
     clickSubMenu(index, code) {
       console.log(index, code);
@@ -109,7 +105,7 @@ export default {
     $route: {
       handler: function(val, oldVal) {
         this.menus.some((t, index) => {
-          if (t.id == val.query.root) {
+          if (val.path.includes(t.id)) {
             this.activeIndex = index;
           }
         });

src/views/layout/Menu.vue

@@ -2,7 +2,7 @@
   <div class="menu">
     <ul class="menu-list">
       <li class="menu-item" v-for="(menu, index) of currentMenu" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }" @mouseenter="subMenuShow(menu.children, index)">
-        <router-link v-if="!menu.children" :to="{ path: menu.path, query: { root: currRoot } }">
+        <router-link v-if="!menu.children" :to="menu.path">
           <el-tooltip class="item" effect="dark" :content="menu.text" placement="right" :show-after="500">
             <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
               <SvgIcon :svgid="menu.icon"></SvgIcon>
@@ -17,10 +17,10 @@
       </li>
     </ul>
   </div>
-  <div class="sub-menu" v-show="isShowSubMenu">
+  <!-- <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="{ path: menu.path, query: { root: currRoot } }">
+        <router-link :to="menu.path">
           <div class="menu-icon svg-icon">
             <SvgIcon :svgid="menu.icon"></SvgIcon>
           </div>
@@ -28,7 +28,7 @@
         </router-link>
       </li>
     </ul>
-  </div>
+  </div> -->
 </template>
 <script>
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
@@ -36,9 +36,7 @@ export default {
   components: {
     SvgIcon,
   },
-  props: {
-    root: { type: String, default: "monitor" },
-  },
+  props: {},
   data() {
     return {
       currRoot: "monitor",
@@ -50,70 +48,49 @@ export default {
             {
               text: "驾驶舱",
               icon: "svg-lead-cockpit",
-              path: "/",
+              path: "/monitor/home",
             },
             {
               text: "基础矩阵",
               icon: "svg-matrix",
-              path: "/lightmatrix1",
+              path: "/monitor/lightmatrix1",
             },
             {
-              text: "风场明细矩阵",
+              text: "明细矩阵",
               icon: "svg-mx-matrix",
-              path: "/lightmatrix2",
+              path: "/monitor/lightmatrix3",
             },
             {
               text: "欠发矩阵",
               icon: "svg-qf-matrix",
-              path: "/lightmatrix3",
+              path: "/monitor/lightmatrix2",
             },
             {
-              text: "光伏明细矩阵",
+              text: "光伏矩阵",
               icon: "svg-gf-matrix",
-              path: "/lightmatrix",
+              path: "/monitor/lightmatrix",
             },
             {
               text: "状态监视",
               icon: "svg-state-watch",
-              path: "/status",
+              path: "/monitor/status",
             },
             {
               text: "Agc",
               icon: "svg-agc",
-              path: "/agc",
-            },
-            /*   {
-              text: "网络",
-              icon: "svg-agc",
-              path: "/agc",
+              path: "/monitor/agc",
             },
             {
               text: "风场",
               icon: "svg-wind-site",
-              path: "/windsite/home",
+              path: "/monitor/windsite/home",
             },
-            {
-              text: "关于",
-              icon: "svg-agc",
-              path: "/about",
-            },*/
           ],
         },
         {
           id: "datacenter",
           text: "数据管理",
-          data: [
-            /*{
-              text: "矩阵",
-              icon: "svg-matrix",
-              path: "/lightmatrix",
-            },
-            {
-              text: "矩阵",
-              icon: "svg-matrix",
-              path: "/lightmatrix1",
-            },*/
-          ],
+          data: [],
         },
         {
           id: "statistic",
@@ -125,40 +102,45 @@ export default {
           text: "健康管理",
           data: [
             {
-              text: "健康管理1",
+              text: "健康管理",
               icon: "svg-wind-site",
               path: "/health",
-            }/*,
+            },
+            {
+              text: "健康管理1",
+              icon: "svg-wind-site",
+              path: "/health/health1",
+            },
             {
               text: "健康管理2",
               icon: "svg-wind-site",
-              path: "/health2",
+              path: "/health/health2",
             },
             {
               text: "健康管理3",
               icon: "svg-wind-site",
-              path: "/health3",
+              path: "/health/health3",
             },
             {
               text: "健康管理4",
               icon: "svg-wind-site",
-              path: "/health4",
+              path: "/health/health4",
             },
             {
               text: "健康管理5",
               icon: "svg-wind-site",
-              path: "/health5",
+              path: "/health/health5",
             },
             {
               text: "健康管理6",
               icon: "svg-wind-site",
-              path: "/health6",
+              path: "/health/health6",
             },
             {
               text: "健康管理7",
               icon: "svg-wind-site",
-              path: "/health7",
-            },*/
+              path: "/health/health7",
+            },
           ],
         },
         {
@@ -168,23 +150,23 @@ export default {
             {
               text: "决策支持1",
               icon: "svg-matrix",
-              path: "/decision1",
-            },/*
+              path: "/decision/decision1",
+            },
             {
               text: "决策支持2",
               icon: "svg-matrix",
-              path: "/decision2",
+              path: "/decision/decision2",
             },
             {
               text: "决策支持3",
               icon: "svg-matrix",
-              path: "/decision3",
+              path: "/decision/decision3",
             },
             {
               text: "决策支持4",
               icon: "svg-matrix",
-              path: "/decision4",
-            },*/
+              path: "/decision/decision4",
+            },
           ],
         },
         {
@@ -230,19 +212,23 @@ export default {
       let data = this.menuData.filter((t) => {
         return t.id == this.currRoot;
       })[0].data;
-
       return data;
     },
   },
   watch: {
-    //监听路由
+    // 监听路由
     $route: {
       handler: function(val, oldVal) {
-        if (val.query.root) this.currRoot = val.query.root;
-
-        this.currentMenu.some((element, index) => {
-          if (element.path == val.path) {
-            this.activeIndex = index;
+        this.menuData.some((element, index) => {
+          if (val.path.includes(element.id)) {
+            this.currRoot = element.id;
+            this.$nextTick(() => {
+              this.currentMenu.some((element, index) => {
+                if (val.path == element.path) {
+                  this.activeIndex = index;
+                }
+              });
+            });
             return true;
           }
         });
@@ -250,27 +236,6 @@ export default {
       //深度观察监听
       deep: true,
     },
-    root: {
-      handler: function(val, oldVal) {
-        this.currRoot = val;
-      },
-    },
-    currentMenu: {
-      handler: function(val, oldVal) {
-        if (val && val.length > 0) {
-          // 基于 root 和 currRoot 为一致
-          // 进行页面刷新
-          // 防止 刷新页面也同步执行切换页面逻辑
-          if (this.root == this.currRoot) {
-            this.activeIndex = 0;
-            this.$router.push({
-              path: val[0].path,
-              query: { root: this.currRoot },
-            });
-          }
-        }
-      },
-    },
   },
 };
 </script>