版本更新:

UI样式优化

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/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,309 @@
+<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.initChart();
+  },
+};
+</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),

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/router/index.js

@@ -60,7 +60,10 @@ const routes = [
     }, {
       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: '/monitor/lightmatrix', // 光伏明细矩阵
@@ -88,17 +91,17 @@ const routes = [
   {
     path: '/decision/decision2',
     name: 'decision2',
-    component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision2.vue'),
+    component: () => import(/* webpackChunkName: "decision2" */ '../views/Decision/Decision2.vue'),
   },
   {
     path: '/decision/decision3',
     name: 'decision3',
-    component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision3.vue'),
+    component: () => import(/* webpackChunkName: "decision3" */ '../views/Decision/Decision3.vue'),
   },
   {
     path: '/decision/decision4',
     name: 'decision4',
-    component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision4.vue'),
+    component: () => import(/* webpackChunkName: "decision4" */ '../views/Decision/Decision4.vue'),
   },
   {
     path: '/health/health1',

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/Home/Home.vue

@@ -12,7 +12,7 @@
       <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>
@@ -28,20 +28,20 @@
       <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" />
+            </com-panel>
+          </Col>
+        </Row>
       </Col>
     </Row>
     <Row type="flex">
@@ -429,7 +429,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";
@@ -440,6 +440,7 @@ 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";
 
@@ -451,7 +452,7 @@ export default {
     ComPanel,
     Weather,
     CoulometricAnalysis,
-    ListBarChart,
+    // ListBarChart,
     PowerReview,
     ToolbarPanel,
     PowerPlan,
@@ -460,6 +461,7 @@ export default {
     Panel3,
     SvgIcon,
     Map,
+    ListBarChart2,
     Table
   },
   data () {
@@ -685,6 +687,16 @@ export default {
     clearInterval(this.timmer);
     this.timmer = null;
   },
+  methods: {
+    // 地图进入事件
+    onEnter() {
+      this.powerplanShowSingle = true;
+    },
+    // 地图退出事件
+    onBack() {
+      this.powerplanShowSingle = false;
+    },
+  },
 };
 </script>
 

src/views/Home/components/map.vue

@@ -159,6 +159,10 @@ export default {
       mapName: "nx",
     };
   },
+  emits: {
+    onEnter: null,
+    onBack: null,
+  },
   // 函数
   methods: {
     selectTab(index, showType) {

src/views/Home/components/map/MHS_FDC.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">
@@ -226,6 +228,8 @@ export default {
             sourceMap:{},
             c1: true,
             c2: true,
+            svgWidth: "791px",
+            svgHeight: "423px"
         };
     },
     // 函数
@@ -233,13 +237,12 @@ export default {
         changeshowType(id) {
             this.activeId = id;
         },
-
         clickFj(){
           this.$emit("clickFj", this.sourceMap.id);
         }
     },
-    
     created() {
+        // 创建后
       this.sourceMap = this.data;
       setTimeout(() => {
             this.c1 = true;
@@ -248,7 +251,11 @@ export default {
             }, 500);
         }, 2000);
     },
-    
+    mounted() {
+        // 渲染后
+        this.svgWidth = this.$el.scrollWidth.toFixed(0) + "px";
+        this.svgHeight = this.$el.scrollHeight.toFixed(0) + "px";
+    },
     watch:{
       data(res){
         this.sourceMap = res;

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 v-if="showType === 'all' || showType === 'fc'">
+            <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.stop="clickLabel('XS_FDC')"
                 />
                 <!-- +5 +12| -->
                 <text x="180" y="207" fill="#919697" font-size="14">香山</text>
                 <!-- +70 0 -->
                 <text x="245" y="207" fill="#05bb4c" font-size="14">{{sourceMap.XS_FDC_zjts}}台</text>
             </g>
-            <g v-if="showType === 'all' || showType === 'gf'">
+            <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.stop="clickLabel('MCH_GDC')"
                 />
                 <!-- +5 +12| -->
                 <text x="310" y="52" fill="#919697" font-size="14">马场湖</text>
                 <!-- +70 0 -->
                 <text x="375" y="52" fill="#05bb4c" font-size="14">{{sourceMap.MCH_GDC_zjts}}台</text>
             </g>
-            <g v-if="showType === 'all' || showType === 'gf'">
+            <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.stop="clickLabel('XH_GDC')"
                 />
                 <!-- +5 +12| -->
                 <text x="320" y="92" fill="#919697" font-size="14">宣和</text>
                 <!-- +70 0 -->
                 <text x="385" y="92" fill="#05bb4c" font-size="14">{{sourceMap.XH_GDC_zjts}}台</text>
             </g>
-            <g v-if="showType === 'all' || showType === 'fc'">
+            <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.stop="clickLabel('NSS_FDC')"
                 />
                 <!-- +5 +12| -->
                 <text x="440" y="77" fill="#919697" font-size="14">牛首山</text>
                 <!-- +70 0 -->
                 <text x="505" y="77" fill="#05bb4c" font-size="14">{{sourceMap.NSS_FDC_zjts}}</text>
             </g>
-            <g v-if="showType === 'all' || showType === 'gf'">
+            <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.stop="clickLabel('DWK_GDC')"
                 />
                 <!-- +5 +12| -->
                 <text x="600" y="17" fill="#919697" font-size="14">大武口</text>
                 <!-- +70 0 -->
                 <text x="665" y="17" fill="#05bb4c" font-size="14">{{sourceMap.DWK_GDC_zjts}}台</text>
             </g>
-            <g v-if="showType === 'all' || showType === 'gf'">
+            <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.stop="clickLabel('PL_GDC')"
                 />
                 <!-- +5 +12| -->
                 <text x="620" y="42" fill="#919697" font-size="14">平罗</text>
                 <!-- +70 0 -->
                 <text x="685" y="42" fill="#05bb4c" font-size="14">{{sourceMap.PL_GDC_zjts}}台</text>
             </g>
-            <g v-if="showType === 'all' || showType === 'fc'">
+            <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.stop="clickLabel('SBQ_FDC')"
                 />
                 <!-- +5 +12| -->
                 <text x="410" y="137" fill="#919697" font-size="14">石板泉</text>
                 <!-- +70 0 -->
                 <text x="475" y="137" fill="#05bb4c" font-size="14">{{sourceMap.SBQ_FDC_zjts}}台</text>
             </g>
-            <g v-if="showType === 'all' || showType === 'fc'">
+            <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,34 +231,156 @@
                     stroke="#46C55A35"
                     fill="#000000"
                     opacity="0.8"
-                    class="item-label"
-                    @click.stop="clickLabel('MHS_FDC')"
                 />
                 <!-- +5 +12| -->
                 <text x="420" y="167" fill="#919697" font-size="14">麻黄山</text>
                 <!-- +70 0 -->
                 <text x="485" y="167" fill="#05bb4c" font-size="14">{{sourceMap.MHS_FDC_zjts}}台</text>
             </g>
-            <g v-if="showType === 'all' || showType === 'fc'">
+            <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.stop="clickLabel('QS_FDC')"
-                />
+                <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>
                 <!-- +70 0 -->
                 <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>
 </template>
@@ -278,10 +409,13 @@ export default {
     // 数据
     data() {
         return {
+            popup: [false, false, false, false, false, false, false, false, false],
             showType:"",
             sourceMap:{},
             c1: false,
             c2: false,
+            svgWidth: "791px",
+            svgHeight: "423px"
         };
     },
     // 函数
@@ -289,7 +423,18 @@ export default {
         clickLabel(wpId) {
            this.$emit("clickLabel", wpId);
         },
-        mouseover() {},
+        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();
+        },
     },
     // 生命周期钩子
     beforeCreate() {
@@ -306,6 +451,9 @@ export default {
     },
     
     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;
     },
@@ -416,7 +564,7 @@ export default {
     }
 
     .nx-map-down-circle-2 {
-        animation: nxMapDownCircle2 4s linear infinite;
+        animation: nxMapDownCircle2 4s linear;
     }
     @keyframes nxMapDownCircle2 {
         0% {
@@ -445,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/power-plan.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="power-plan">
-    <tab @select="selectionItemClick" :data="tabs" class="power-plan-tab" />
+    <tab @select="selectionItemClick" :data="currTabs" class="power-plan-tab" />
     <row>
       <Col :span="12">
-      <percent-card-2 :title="'月完成率' + parseInt((planData.yfdl / planData.yfdljh * 100)) + '%'" 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="'年完成率' + parseInt((planData.nfdl / planData.nfdljh * 100)) + '%'" 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>
@@ -43,18 +41,31 @@ export default {
       },
     };
   },
-
   props: {
+    showSingle: {
+      type: Boolean,
+      default: false,
+    },
     data: {
       type: Object,
       default: () => { }
     }
   },
-
-  mounted () {
+  computed: {
+    currTabs() {
+      if (this.showSingle) {
+        return [
+          {
+            id: "1",
+            text: "风电",
+          },
+        ];
+      } else return this.tabs;
+    },
+  },
+  mounted() {
     this.planData = this.data;
   },
-
   methods: {
     selectionItemClick (item) {
       // 点击tab选项 模拟数据变化

src/views/WindSite/WindSite.vue

@@ -10,8 +10,7 @@
           <div class="page-common-body-menu-border left bottom"></div>
           <div class="page-common-body-menu-border right top"></div>
           <div class="page-common-body-menu-border right bottom"></div>
-          <div class="page-common-body-menu-item" v-for="(menuData, index) of menuDatas" :key="index" @click="clickMenu(index)"
-            :class="{ active: activeIndex == index }">
+          <div class="page-common-body-menu-item" v-for="(menuData, index) of menuDatas" :key="index" @click="clickMenu(index)" :class="{ active: activeIndex == index }">
             <router-link :to="menuData.path">
               <span class="svg-icon" :class="activeIndex == index ? 'svg-icon-yellow' : 'svg-icon-green'">
                 <SvgIcon :svgid="menuData.icon"></SvgIcon>
@@ -34,67 +33,67 @@ export default {
     SvgIcon,
   },
   // 数据
-  data () {
+  data() {
     return {
       activeIndex: 0,
       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",
+          path: "/monitor/windsite/box",
         },
         // {
         //   icon: "svg-matrix",
-        //   path: "/windsite/info",
+        //   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",
         },
       ],
     };
   },
   // 函数
   methods: {
-    clickMenu: function (index) {
+    clickMenu: function(index) {
       this.activeIndex = index;
     },
   },
 
-  created () {
-    this.menuDatas.forEach(ele => {
-      ele.path = ("/monitor" + ele.path + "/" + this.$route.params.wpId);
+  created() {
+    this.menuDatas.forEach((ele) => {
+      ele.path = ele.path + "/" + this.$route.params.wpId;
     });
   },
 
-  mounted () { },
+  mounted() {},
 };
 </script>
 
@@ -170,7 +169,7 @@ export default {
             position: relative;
 
             &::after {
-              content: '';
+              content: "";
               width: calc(100% - 0.37vh);
               height: calc(100% - 0.37vh);
               position: absolute;

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温度",

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

@@ -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>
@@ -239,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>
@@ -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

@@ -259,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/Menu.vue

@@ -1,8 +1,7 @@
 <template>
   <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)">
+      <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="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'">
@@ -38,7 +37,7 @@ export default {
     SvgIcon,
   },
   props: {},
-  data () {
+  data() {
     return {
       currRoot: "monitor",
       menuData: [
@@ -184,11 +183,11 @@ export default {
     };
   },
   methods: {
-    click (index) {
+    click(index) {
       this.activeIndex = index;
       this.subIndex = null;
     },
-    subMenuShow (children, index) {
+    subMenuShow(children, index) {
       if (children) {
         this.isShowSubMenu = true;
         this.parentIndex = index;
@@ -198,13 +197,13 @@ export default {
       }
       this.subMenu = children;
     },
-    subclick (index) {
+    subclick(index) {
       this.activeIndex = this.parentIndex;
       this.subIndex = index;
     },
   },
   computed: {
-    currentMenu () {
+    currentMenu() {
       let data = this.menuData.filter((t) => {
         return t.id == this.currRoot;
       })[0].data;
@@ -214,10 +213,17 @@ export default {
   watch: {
     // 监听路由
     $route: {
-      handler: function (val, oldVal) {
+      handler: function(val, oldVal) {
         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;
           }
         });