更新内容:

1. 决策支持页面
2. 单机页面
3. UI样式调整

.gitignore

@@ -7,4 +7,6 @@ webpack.config.js
 .vs/
 package-lock.json
 .py
-.py/
+.py/
+.idea
+.idea/

src/App.vue

@@ -274,18 +274,16 @@ body {
   background-image: url("./assets/background.png");
   background-size: cover;
   font-size: @fontsize;
+  font-family: @defalut-font-family;
 }
-
 @menuWidth: 5.37vh;
 @headerHeight: 4.63vh;
-
 .main {
   width: 100vw;
   height: 100%;
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
-
   .header-body {
     // background: radial-gradient(closest-corner at 22% 40%, #2d5a47, #040d0a, #040d0a);
     flex: 0 0 100%;
@@ -302,7 +300,6 @@ body {
       flex-grow: 1;
     }
   }
-
   .menu-body {
     position: absolute;
     flex: 0 0 @menuWidth;
@@ -314,23 +311,19 @@ body {
     opacity: 0;
     transition: opacity 0.2s;
     transition-timing-function: ease-in;
-
     &:hover {
       opacity: 1;
       transition: opacity 0.2s;
       transition-timing-function: ease-out;
     }
   }
-
   .main-body {
     flex: 0 0 calc(100vw);
     max-width: calc(100vw);
     height: calc(100vh - @headerHeight);
     padding: 1.481vh;
-
     // transition: flex 0.1s, margin-left 0.1s;
     // transition-timing-function: ease-in-out;
-
     // &.show-menu {
     //   flex: 0 0 calc(100vw - @menuWidth);
     //   margin-left: @menuWidth;

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

@@ -23,5 +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" />
 	</g>
 </svg>

src/assets/styles/app.less

@@ -79,3 +79,17 @@
 .mg-r-16 {
   margin-right: 1.481vh;
 }
+
+.scroll {
+  overflow: hidden;
+  padding-right: 6px;
+  &:hover {
+    overflow: auto;
+    padding-right: 0px;
+  }
+}
+
+
+.el-col + .el-col {
+  padding-left: 1.481vh;
+}

src/assets/styles/button.less

@@ -0,0 +1,26 @@
+.btn {
+  height: 30px;
+  flex: 0 0 auto;
+  background: transparent;
+  border: 1px solid @darkgray;
+  padding: 0 1.481vh;
+  color: @gray;
+  font-size: @fontsize-s;
+  cursor: pointer;
+
+  &:hover {
+    border-color: @green;
+    color: @green;
+    background: fade(@green, 20);
+  }
+
+  &.green {
+    border-color: @green;
+    color: @green;
+    background: fade(@green, 20);
+  }
+
+  & + button {
+    margin-left: 16px;
+  }
+}

src/assets/styles/color.less

@@ -27,7 +27,7 @@
 }
 
 .gray {
-  color: @gray;
+  color: @font-color;
 }
 
 .purple {

src/assets/styles/common/color.less

@@ -2,13 +2,14 @@
 @yellow: #edbf03;
 @blue: #1a93cf;
 @darkBlue: #4b55ae;
+@darkBlue2: #1529E9;
 @darkgray: #606769;
-@gray: #b2bdc0;
+@gray: #606769;
 @gray-l: #b2bdc0;
 @black: #000000;
 @write: #ffffff;
 @ligntRed: #ff7a7f;
-@red: #bd3338;
+@red: #BA3237;
 @darkRed: #710f14;
 @purple: #4b55ae;
 @orange: #e17e23;
@@ -18,3 +19,5 @@
 @greenLinearTop: linear-gradient(to top, fade(@green, 50%), fade(@green, 0));
 @greenLinearRight: linear-gradient(to right, fade(@green, 50%), fade(@green, 0));
 @redLinearRight: linear-gradient(to right, fade(@red, 50%), fade(@red, 0));
+
+@font-color: #7a8385;

src/assets/styles/common/font.less

@@ -1,6 +1,8 @@
 // @fontsize: 14px;
 // @fontsize-l: 16px;
 // @fontsize-s: 12px;
+@defalut-font-family: Arial, "SourceHanSans", "Microsoft YaHei", sans-serif;
+@font-family-num: "Bicubik";
 
 @fontsize: 1.481vh;
 @fontsize-l: 1.667vh;

src/assets/styles/font.less

@@ -1,8 +1,13 @@
 @font-face {
-  font-family: "Bicubik";
+  font-family: @font-family-num;
   src: url("../font/Bicubik.woff"), url("../font/Bicubik.ttf");
 }
 
+@font-face {
+  font-family: "SourceHanSans";
+  src: url("../font/SourceHanSansCN-Normal.ttf");
+}
+
 .font-num {
-    font-family: "Bicubik";
+  font-family: @font-family-num;
 }

src/assets/styles/form.less

@@ -0,0 +1,95 @@
+// 查询 样式
+.query {
+  display: flex;
+  justify-content: space-between;
+  .query-items {
+    flex: 0 0 auto;
+    display: flex;
+
+    .query-item {
+      flex: 0 0 auto;
+      display: flex;
+      margin: 0 1.4815vh;
+
+      .lable {
+        flex: 0 0 auto;
+        margin-right: 1.4815vh;
+        line-height: 33px;
+        color: @gray-l;
+      }
+
+      .search-input {
+        position: relative;
+
+        input {
+          box-sizing: border-box;
+          flex: 0 0 200px;
+          border: 0px solid @darkgray;
+          padding: 0.741vh;
+          color: @gray;
+          outline: unset;
+          border-radius: 0%;
+          padding-right: 40px;
+          background: fade(#536268, 20);
+
+          &::placeholder {
+            font-size: 12px;
+            text-align: right;
+            color: @darkgray;
+          }
+        }
+
+        .unit {
+          position: absolute;
+          right: 12px;
+          top: 6px;
+          line-height: 33px;
+          margin: auto;
+        }
+      }
+    }
+  }
+
+  .query-actions {
+    flex: 0 0 auto;
+  }
+}
+
+input[type="checkbox"] {
+  position: relative;
+  display: inline-block;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  outline: none;
+  border: 1px solid @gray;
+  background-color: #000;
+  border-radius: 20%;
+  margin: 0;
+
+  &:checked {
+    border-color: @green;
+    background: @green;
+  }
+
+  &::after {
+    display: inline-block;
+    content: " ";
+    position: absolute;
+    left: 30%;
+    top: 5%;
+    width: 3px;
+    height: 7px;
+    border-color: #fff;
+    border-style: solid;
+    border-width: 0px 2px 2px 0px;
+    transform: rotate(45deg);
+    opacity: 0;
+  }
+
+  &:checked::after {
+    content: "";
+    opacity: 1;
+    transition: opacity 0.3s ease-out;
+  }
+}

src/assets/styles/main.less

@@ -7,3 +7,7 @@
 @import "./svg.less";
 
 @import "./table-form.less";
+
+@import "./form.less";
+
+@import "./button.less";

src/assets/styles/svg.less

@@ -82,6 +82,13 @@
       }
     }
   }
+  &.svg-icon-darkblue {
+    svg {
+      use {
+        fill: @darkBlue2;
+      }
+    }
+  }
 
   &.svg-icon-yellow {
     svg {
@@ -133,7 +140,7 @@
   &.svg-icon-red {
     svg {
       use {
-        fill: @ligntRed;
+        fill: @red;
       }
     }
   }

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

@@ -0,0 +1,168 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "multiple-bar-chart",
+  componentName: "multiple-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "800px",
+    },
+    // 传入数据
+    data: {
+      type: Object,
+      default: {
+        area: ["新荣区", "平城区", "云冈区", "云州区", "阳高县", "天镇县", "广灵县", "浑源县", "左云县"],
+        legend: ["因病", "因残", "因学", "因灾", "缺土地", "缺水"],
+        data: [
+          [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+        ],
+      },
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
+    };
+  },
+  computed: {
+    datas() {
+      return this.list.map((t) => {
+        return t.value;
+      });
+    },
+    xdata() {
+      return this.list[0].value.map((t) => {
+        return t.text;
+      });
+    },
+    ydata() {
+      let result = [];
+
+      return result;
+    },
+    series() {
+      let result = [];
+      return result;
+    },
+  },
+  methods: {
+    initChart() {
+      let option = {
+        color: this.color,
+        grid: {
+          left: 40,
+          right: 16,
+          bottom: 16,
+          top: 16,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+          formatter: function(param) {
+            return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
+          },
+        },
+        yAxis: {
+          type: "category",
+          axisLabel: {
+            color: partten.getColor("gray"),
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#96A4F4",
+            },
+            width: 5,
+          },
+          axisTick: {
+            show: false,
+          },
+          data: this.data.area,
+        },
+        xAxis: {
+          type: "value",
+          axisLabel: {
+            color: partten.getColor("gray"),
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#96A4F4",
+              type: "dashed",
+            },
+            width: 5,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            lineStyle: {
+              color: partten.getColor("gray") + "20",
+            },
+          },
+        },
+        series: [],
+      };
+      for (var i = 0; i < this.data.legend.length; i++) {
+        option.series.push({
+          name: this.data.legend[i],
+          type: "bar",
+          stack: "总量",
+          //   barWidth: "60%",
+          label: {
+            show: false,
+            position: "insideRight",
+          },
+          data: this.data.data[i],
+        });
+      }
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.chart = echarts.init(this.$el);
+      this.initChart();
+    });
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

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

@@ -177,7 +177,7 @@ export default {
                 position: [0, util.vh("-20")],
                 formatter: "{b}",
                 textStyle: {
-                  color: partten.getColor("gray"),
+                  color: "#7a8385",
                   fontSize: util.vh("14"),
                 },
               },

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

@@ -200,7 +200,7 @@ export default {
             //分格线
             splitLine: {
               lineStyle: {
-                color: "#999",
+                color: "#5a6162",
                 type: "dashed",
               },
             },

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

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

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

@@ -113,7 +113,7 @@ export default {
       default: "",
     },
   },
-  data () {
+  data() {
     return {
       id: "",
       chart: null,
@@ -121,20 +121,20 @@ export default {
     };
   },
   computed: {
-    colorValue () {
+    colorValue() {
       return partten.getColor(this.color);
     },
-    datas () {
+    datas() {
       return this.list.map((t) => {
         return t.value;
       });
     },
-    xdata () {
+    xdata() {
       return this.list[0].value.map((t) => {
         return t.text;
       });
     },
-    series () {
+    series() {
       let result = [];
 
       this.list.forEach((value, index) => {
@@ -158,7 +158,7 @@ export default {
 
       return result;
     },
-    yAxis () {
+    yAxis() {
       let result = [];
       result.push({
         type: "value",
@@ -177,7 +177,7 @@ export default {
     },
   },
   methods: {
-    hexToRgba (hex, opacity) {
+    hexToRgba(hex, opacity) {
       let rgbaColor = "";
       let reg = /^#[\da-f]{6}$/i;
       if (reg.test(hex)) {
@@ -185,7 +185,7 @@ export default {
       }
       return rgbaColor;
     },
-    initChart () {
+    initChart() {
       let option = {
         color: this.color,
         tooltip: {
@@ -195,16 +195,16 @@ export default {
             color: "#fff",
             fontSize: util.vh(16),
           },
-          formatter: function (param) {
+          formatter: function(param) {
             console.log(param);
             return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
           },
         },
         grid: {
-          top: 20,
-          left: 30,
-          right: 20,
-          bottom: 40,
+          top: 16,
+          left: 32,
+          right: 8,
+          bottom: 24,
         },
         xAxis: [
           {
@@ -227,10 +227,10 @@ export default {
       this.chart.setOption(option);
     },
   },
-  created () {
+  created() {
     this.id = "pie-chart-" + util.newGUID();
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
@@ -238,7 +238,7 @@ export default {
       this.initChart();
     });
   },
-  updated () {
+  updated() {
     this.initChart();
   },
 };

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

@@ -215,7 +215,7 @@ export default {
       default: () => ["(MW)", "(风速)"],
     },
   },
-  data () {
+  data() {
     return {
       id: "",
       chart: null,
@@ -223,17 +223,17 @@ export default {
     };
   },
   computed: {
-    datas () {
+    datas() {
       return this.list.map((t) => {
         return t.value;
       });
     },
-    xdata () {
+    xdata() {
       return this.list[0].value.map((t) => {
         return t.text;
       });
     },
-    series () {
+    series() {
       let result = [];
 
       this.list.forEach((value, index) => {
@@ -280,7 +280,7 @@ export default {
 
       return result;
     },
-    yAxis () {
+    yAxis() {
       let result = [];
       this.units.forEach((value, index) => {
         result.push({
@@ -304,7 +304,7 @@ export default {
     },
   },
   methods: {
-    hexToRgba (hex, opacity) {
+    hexToRgba(hex, opacity) {
       let rgbaColor = "";
       let reg = /^#[\da-f]{6}$/i;
       if (reg.test(hex)) {
@@ -312,7 +312,7 @@ export default {
       }
       return rgbaColor;
     },
-    initChart () {
+    initChart() {
       let option = {
         color: this.color,
         tooltip: {
@@ -322,7 +322,7 @@ export default {
             color: "#fff",
             fontSize: util.vh(16),
           },
-          formatter: function (param) {
+          formatter: function(param) {
             console.log(param);
             return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
           },
@@ -354,16 +354,16 @@ export default {
       this.chart.setOption(option);
     },
   },
-  created () {
+  created() {
     this.id = "pie-chart-" + util.newGUID();
   },
-  mounted () {
+  mounted() {
     this.$el.style.width = this.width;
     this.$el.style.height = this.height;
     this.chart = echarts.init(this.$el);
     this.initChart();
   },
-  updated () {
+  updated() {
     this.initChart();
   },
 };

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

@@ -149,7 +149,7 @@ export default {
           //分格线
           splitLine: {
             lineStyle: {
-              color: "#999",
+              color: partten.getColor("gray"),
               type: "dashed",
             },
           },

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

@@ -80,17 +80,17 @@ export default {
                     new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                       {
                         offset: 0,
-                        color: "rgba(255, 255, 255, 0)",
+                        color: partten.getColor(this.color) + '01',
                       },
                       {
                         offset: 1,
-                        color: partten.getColor(this.color),
+                        color: partten.getColor(this.color)+ 'ff',
                       },
                     ]),
                   ],
                   [1, "transparent"],
                 ],
-                width: util.vh(8),
+                width: util.vh(16),
               },
             },
             axisLabel: {

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

@@ -69,11 +69,6 @@ export default {
           unit: "个",
           name: "谷歌",
         },
-        {
-          value: 247,
-          unit: "个",
-          name: "必应",
-        },
       ],
     },
     // 颜色
@@ -96,6 +91,7 @@ export default {
       let legendData = [...legend1, ...legend2];
 
       let option = {
+        color: ["#1893ce", "#edbf00", "#039178", "#ae4802", "#ea8b00"],
         tooltip: {
           trigger: "item",
           backgroundColor: "rgba(0,0,0,0.3)",
@@ -119,7 +115,7 @@ export default {
           //icon: 'circle',
           itemGap: 12, //图例item间距
           textStyle: {
-            color: "#fff",
+            color: partten.getColor("gray"),
             fontSize: util.vh(14),
           },
           data: legend1,
@@ -174,10 +170,10 @@ export default {
                 },
                 padding: [0, 0, 0, 0],
                 rich: {
-                  color: "#fff",
+                  color: "#ffffff" + "cc",
                   percent: {
                     fontSize: util.vh(14),
-                    color: "#fff",
+                    color: "#ffffff" + "cc",
                   },
                 },
               },
@@ -187,7 +183,7 @@ export default {
       };
 
       this.chart.setOption(option);
-    }
+    },
   },
   created() {
     this.id = "pie-chart-" + util.newGUID();

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

@@ -0,0 +1,382 @@
+<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: "dsah-pie",
+  componentName: "dsah-pie",
+  props: {
+    // 宽度 默认9.722vh
+    width: {
+      type: String,
+      default: "100%",
+    },
+    // 高度 默认9.722vh
+    height: {
+      type: String,
+      default: "7.4074vh",
+    },
+    // 标题
+    title: {
+      type: String,
+      default: "标题",
+    },
+    // 值
+    value: {
+      type: Number,
+      default: 90,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      indicator: [
+        {
+          name: "北",
+          max: 100,
+        },
+        {
+          name: "北北西",
+          max: 100,
+        },
+        {
+          name: "北西",
+          max: 100,
+        },
+        {
+          name: "西北西",
+          max: 100,
+        },
+        {
+          name: "西",
+          max: 100,
+        },
+        {
+          name: "西南西",
+          max: 100,
+        },
+        {
+          name: "南西",
+          max: 100,
+        },
+        {
+          name: "南南西",
+          max: 100,
+        },
+        {
+          name: "南",
+          max: 100,
+        },
+        {
+          name: "南南东",
+          max: 100,
+        },
+        {
+          name: "东南",
+          max: 100,
+        },
+        {
+          name: "东南东",
+          max: 100,
+        },
+        {
+          name: "东",
+          max: 100,
+        },
+        {
+          name: "东北东",
+          max: 100,
+        },
+        {
+          name: "北东",
+          max: 100,
+        },
+        {
+          name: "北北东",
+          max: 100,
+        },
+      ],
+    };
+  },
+  computed: {},
+  methods: {
+    initChart() {
+      let option = {
+        grid: {
+          left: 40,
+          right: 40,
+          bottom: 80,
+          top: 80,
+          containLabel: true,
+        },
+        radar: [
+          // 最低层 80
+          {
+            radius: "80%",
+            center: ["50%", "50%"],
+            splitNumber: 1,
+            nameGap: "10",
+            name: {
+              textStyle: {
+                color: partten.getColor("gray") + 99,
+                fontSize: 12,
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                color: "transparent",
+              },
+            },
+            indicator: this.indicator,
+          },
+          // 次外层 70 - 80
+          {
+            radius: ["70%", "80%"],
+            center: ["50%", "50%"],
+            startAngle: 90,
+            splitNumber: 2,
+            name: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+                shadowBlur: 1,
+                shadowColor: "#fff",
+                shadowOffsetX: 0.5,
+                shadowOffsetY: 1,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray") + 40,
+                shadowColor: "#fff",
+                shadowBlur: 0,
+                shadowOffsetX: 0.5,
+                shadowOffsetY: 0.5,
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                color: "transparent",
+              },
+            },
+            indicator: this.indicator,
+          },
+          // 渐变层 40 - 70
+          {
+            radius: ["40%", "70%"],
+            center: ["50%", "50%"],
+            splitNumber: 1,
+            name: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray"),
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                shadowBlur: 4,
+                color: {
+                  type: "radial",
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [
+                    {
+                      offset: 0.5,
+                      color: "transparent", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: partten.getColor("green") + 60, // 100% 处的颜色
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+            },
+            indicator: this.indicator,
+          },
+          // 内层 0 - 40
+          {
+            radius: "40%",
+            center: ["50%", "50%"],
+            splitNumber: 1,
+            name: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: partten.getColor("gray") + 40,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                width: 1,
+                color: partten.getColor("gray"),
+              },
+            },
+            splitArea: {
+              areaStyle: {
+                shadowBlur: 4,
+                color: "transparent",
+              },
+            },
+            indicator: this.indicator,
+          },
+        ],
+        series: [
+          // 进度条
+          {
+            z: 1,
+            name: "内部（环形）进度条",
+            type: "gauge",
+            radius: "70%",
+            splitNumber: 5,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [
+                    this.value / 360,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0,
+                        color: partten.getColor(this.color) + 10,
+                      },
+                      {
+                        offset: 1,
+                        color: partten.getColor(this.color) + 99,
+                      },
+                    ]),
+                  ],
+                  [1, "transparent"],
+                ],
+                width: 40,
+              },
+            },
+            startAngle: 90,
+            endAngle: 450,
+            clockwise: true,
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+          },
+          // 指针
+          {
+            name: "指针",
+            type: "gauge",
+            z: 2,
+            min: 0,
+            max: 360,
+            radius: "100%",
+            startAngle: 90,
+            endAngle: 360 + 90,
+            clockwise: false,
+            axisLine: {
+              show: false,
+            },
+            tooltip: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            detail: {
+              show: false,
+            },
+            title: {
+              //标题
+              show: false,
+            },
+            data: [
+              {
+                value: this.value,
+              },
+            ],
+            itemStyle: {
+              normal: {
+                color: "#fff",
+              },
+            },
+            pointer: {
+              show: true,
+              length: "70%",
+              radius: "0%",
+              width: util.vh(3), //指针粗细
+              offsetCenter: ["0%", "0%"],
+            },
+            animationDuration: 1000,
+          },
+        ],
+      };
+
+      this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.chart = echarts.init(this.$el);
+      this.initChart();
+    });
+  },
+  updated() {
+    this.initChart();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: auto;
+}
+</style>

src/components/coms/cards/card-1.vue

@@ -79,7 +79,7 @@ export default {
     .card-title {
       width: 100%;
       font-size: @fontsize-s;
-      color: @gray;
+      color: @font-color;
     }
 
     .card-value {

src/components/coms/grid/row.vue

@@ -43,7 +43,7 @@ export default {
   box-sizing: border-box;
 }
 .row + .row {
-  margin-top: 1.481vh;
+  margin-top: 1vh;
 }
 .row:after,
 .row:before {

src/components/coms/panel/panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="com-panel" :class="{ 'no-title': !hasTitle }">
+  <div class="com-panel" :class="{ 'no-title': !hasTitle, line: showLine }">
     <div v-if="hasTitle" class="panel-header">
       <div class="panel-title">
         <i v-if="hasIcon" class="panel-icon" :class="icon"></i>
@@ -24,6 +24,10 @@ export default {
     icon: String,
     // 副标题
     subTitle: String,
+    showLine: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     // 是否存在标题
@@ -42,9 +46,11 @@ export default {
 </script>
 <style lang="less">
 .com-panel {
-  border-left: 0.185vh solid rgba(255, 255, 255, 50%);
+  &.line {
+    border-left: 0.185vh solid rgba(255, 255, 255, 50%);
+  }
 
-  &:before {
+  &.line:before {
     content: " ";
     width: 0.37vh;
     height: 0.37vh;
@@ -70,7 +76,7 @@ export default {
     margin-bottom: 1.481vh;
 
     .panel-title {
-      color: rgba(255, 255, 255, 0.8);
+      color: fade(#fff, 75);
       flex: 1 1 auto;
       .panel-icon {
         margin-right: 0.741vh;
@@ -86,9 +92,8 @@ export default {
     }
   }
 
-  .panel-body {
+  &.line .panel-body {
     padding-left: 1.185vh;
-    color: rgba(255, 255, 255, 0.8);
   }
 
   &.no-title .panel-body {

src/components/coms/panel/panel2.vue

@@ -71,6 +71,7 @@ export default {
     .panel-header2 {
       &::after {
         background-image: @greenLinearRight;
+        width: 10%;
       }
       .panel-title2 {
         .panel-icon2 {
@@ -84,6 +85,7 @@ export default {
     .panel-header2 {
       &::after {
         background-image: @redLinearRight;
+        width: 10%;
       }
       .panel-title2 {
         .panel-icon2 {
@@ -97,7 +99,7 @@ export default {
     display: flex;
     font-size: @fontsize;
     padding-left: 1.185vh;
-    background: rgba(255, 255, 255, 10%);
+    background: fade(@gray, 20);
     line-height: 2.963vh;
     margin-bottom: 1.111vh;
     position: relative;

src/components/coms/panel/toolbar-panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="com-panel" :class="{ 'no-title': !hasTitle }">
+  <div class="com-panel" :class="{ 'no-title': !hasTitle, line: showLine }">
     <div v-if="hasTitle" class="panel-header">
       <div class="panel-title">
         <i v-if="hasIcon" class="panel-icon" :class="icon"></i>
@@ -25,6 +25,10 @@ export default {
     title: String,
     // 图标
     icon: String,
+    showLine: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     hasTitle() {

src/components/coms/table/table-span.vue

@@ -2,8 +2,7 @@
   <table class="com-table">
     <thead>
       <tr>
-        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }">{{ col.name }}<br v-if="col.unit != ''" />{{
-          col.unit }}</th>
+        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }">{{ col.name }}<br v-if="col.unit != ''" />{{ col.unit }}</th>
       </tr>
     </thead>
     <tbody>
@@ -29,13 +28,13 @@ export default {
   // 自定义事件
   emits: {},
   // 数据
-  data () {
+  data() {
     return {};
   },
   computed: {},
   // 函数
   methods: {
-    rowspan: function (row, col) {
+    rowspan: function(row, col) {
       if (row.row_span.length == 0) {
         return 1;
       } else {
@@ -47,7 +46,7 @@ export default {
         }
       }
     },
-    colspan: function (row, col) {
+    colspan: function(row, col) {
       if (row.col_span.length == 0) {
         return 1;
       } else {
@@ -61,22 +60,22 @@ export default {
     },
   },
   // 生命周期钩子
-  beforeCreate () {
+  beforeCreate() {
     // 创建前
   },
-  created () {
+  created() {
     // 创建后
   },
-  beforeMount () {
+  beforeMount() {
     // 渲染前
   },
-  mounted () {
+  mounted() {
     // 渲染后
   },
-  beforeUpdate () {
+  beforeUpdate() {
     // 数据更新前
   },
-  updated () {
+  updated() {
     // 数据更新后
   },
 };
@@ -126,7 +125,7 @@ export default {
         }
 
         &.num {
-          font-family: 'Bicubik';
+          font-family: "Bicubik";
           font-weight: 400;
         }
 

src/components/coms/table/table.vue

@@ -5,7 +5,7 @@
         <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }">{{ col.name }}</th>
       </tr>
     </thead>
-    <tbody>
+    <tbody class="scroll">
       <tr v-for="(row, index) of data.data" :key="index">
         <td v-for="(col, i) of data.column" :key="i" :class="{ light: col.is_light || row.is_light, num: col.is_num }" v-html="template(col, row[col.field])"></td>
       </tr>
@@ -89,8 +89,12 @@ export default {
 
   thead {
     tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
       th {
-        background-color: fade(@darkBack, 60%);
+        background-color: fade(@darkBack, 20%);
         padding: 1.481vh 0;
         color: @titleGray;
         font-weight: 400;
@@ -106,7 +110,13 @@ export default {
   }
 
   tbody {
+    display: block;
+
     tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
       &:nth-child(2n) {
         background-color: fade(@rowGray, 20%);
       }

src/components/coms/tabs/tab.vue

@@ -50,7 +50,7 @@ export default {
 <style lang="less">
 .tabs {
   display: flex;
-  color: @gray;
+  color: @font-color;
   margin-bottom: 1.111vh;
   font-size: @fontsize;
   .tab-item {

src/components/other/healthReport/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog custom-class="cDialog" top="50px" v-model="dialogVisible" width="80%" @closed="dialogClosed">
-    <div slot="title">
+    <div>
       <div class="title">健康评价报告概述</div>
     </div>
     <el-form style="margin-top:10px;">
@@ -74,8 +74,7 @@
         </div>
         <el-form-item class="imp fw">变桨</el-form-item>
         <div class="infoBox">
-          <p>1）关键参数：变桨采用“变桨电机温度1”、“变桨电机温度2” 、“变桨电机温度3”、“变频器温度1”、“变频器温度2”
-            、“变频器温度3”为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区</p>
+          <p>1）关键参数：变桨采用“变桨电机温度1”、“变桨电机温度2” 、“变桨电机温度3”、“变频器温度1”、“变频器温度2” 、“变频器温度3”为关键参数，该参数在统计周期内数据显示样本在安全运行区内，没有超过进入劣化区</p>
         </div>
         <el-table :data="tableData" border stripe max-height="300" style="width: 100%; margin:10px 0;">
           <el-table-column prop="date" label="日期"></el-table-column>
@@ -175,56 +174,62 @@
 import DoubleLineChart from "@com/chart/line/double-line-chart.vue";
 
 export default {
-  data () {
+  data() {
     return {
       dialogVisible: false, // 弹窗是否显示
-      tableData: [{ // 表格1数据
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1517 弄'
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1519 弄'
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄'
-      }]
+      tableData: [
+        {
+          // 表格1数据
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
     };
   },
 
   props: {
     show: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
 
   components: {
-    DoubleLineChart
+    DoubleLineChart,
   },
 
-  mounted () {
+  mounted() {
     this.dialogVisible = this.show;
   },
 
   methods: {
-    dialogClosed () {
+    dialogClosed() {
       this.dialogVisible = false;
       this.$emit("closed", false);
-    }
+    },
   },
 
   watch: {
-    show (value) {
+    show(value) {
       this.dialogVisible = value;
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -299,4 +304,4 @@ export default {
     margin-bottom: 0;
   }
 }
-</style>
+</style>

src/helper/partten.js

@@ -2,7 +2,7 @@
 const color = [
     { key: "green", value: "#05BB4C" },
     { key: "yellow", value: "#F8DE5B" },
-    { key: "gray", value: "#b2bdc0" },
+    { key: "gray", value: "#606769" },
     { key: "purple", value: "#4B55AE" },
 ];
 

src/router/index.js

@@ -73,6 +73,25 @@ const routes = [
     path: '/lightmatrix3', // 明细矩阵
     name: 'LightMatrix3',
     component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/LightMatrix3/LightMatrix3.vue'),
+  }, {
+    path: '/decision1',
+    name: 'decision1',
+    component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision1.vue'),
+  },
+  {
+    path: '/decision2',
+    name: 'decision2',
+    component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision2.vue'),
+  },
+  {
+    path: '/decision3',
+    name: 'decision3',
+    component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision3.vue'),
+  },
+  {
+    path: '/decision4',
+    name: 'decision4',
+    component: () => import(/* webpackChunkName: "lightmatrix3" */ '../views/Decision/Decision4.vue'),
   },
 ]
 

src/store/index.js

@@ -14,19 +14,19 @@ const state = {
 
 //改变状态的方法
 const mutations = {
-  loadingStore (state, tag) {
+  loadingStore(state, tag) {
     state.loading = tag;
   },
-  changeTheme (state, tag) {
+  changeTheme(state, tag) {
     state.themeName = tag;
   },
-  update (state, newData) {
+  update(state, newData) {
     state.windturbineMap = newData.data
   }
 };
 
 const actions = {
-  getupdate (context, newData) {
+  getupdate(context, newData) {
     context.commit("update", newData);
   },
 };

src/store/modules/user.js

@@ -5,7 +5,7 @@ const state = {
   username: '',
 }
 const mutations = {
-  REMOVE_TOKEN (state) {
+  REMOVE_TOKEN(state) {
     localStorage.removeItem('authToken');
     localStorage.removeItem('username');
     state.authToken = "";
@@ -30,7 +30,7 @@ const mutations = {
   },
 }
 const actions = {
-  async login (context, data) {
+  async login(context, data) {
     const result = await login(data)
     if (result.data.sucess) {
       //调用vuex中setToken方法

src/views/Agc/Agc.vue

@@ -4,14 +4,12 @@
       <!-- <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2> -->
     </div>
     <div class="panel-groups">
-      <AgcPanel class="panel-item" v-for="(data, index) of datas" :key="index" :data="data" chartType="multiple"
-        :chartData="data.tb"></AgcPanel>
+      <AgcPanel class="panel-item" v-for="(data, index) of datas" :key="index" :data="data" chartType="multiple" :chartData="data.tb"></AgcPanel>
     </div>
   </div>
 </template>
 
 <script>
-import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
 import AgcPanel from "./components/agc-panel.vue";
 
 import store from "@store/index.js";
@@ -21,11 +19,10 @@ export default {
   name: "Agc",
   // 使用组件
   components: {
-    BtnGroup2,
     AgcPanel,
   },
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 计时器
       datas: [
@@ -88,48 +85,52 @@ export default {
   },
   // 函数
   methods: {
-    select: function (item) {
+    select: function(item) {
       // console.log(item);
     },
 
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "genreset/getAgcValues",
-        success (res) {
+        success(res) {
           let datas = [];
           if (res.data) {
-            res.data.forEach(pEle => {
-
+            res.data.forEach((pEle) => {
               pEle.jcxx.icon = "fa fa-gears";
               pEle.jcxx.color = pEle.jcxx.zt === 0 ? "red" : "green";
 
               let keys = ["llgl", "sjgl", "xdzl", "ycgl"];
 
-              let tb = [{
-                title: "理论功率",
-                yAxisIndex: 0,
-                value: [],
-              }, {
-                title: "实际功率",
-                yAxisIndex: 0,
-                value: [],
-              }, {
-                title: "限电指令",
-                yAxisIndex: 0,
-                value: [],
-              }, {
-                title: "预测功率",
-                yAxisIndex: 0,
-                value: [],
-              }];
+              let tb = [
+                {
+                  title: "理论功率",
+                  yAxisIndex: 0,
+                  value: [],
+                },
+                {
+                  title: "实际功率",
+                  yAxisIndex: 0,
+                  value: [],
+                },
+                {
+                  title: "限电指令",
+                  yAxisIndex: 0,
+                  value: [],
+                },
+                {
+                  title: "预测功率",
+                  yAxisIndex: 0,
+                  value: [],
+                },
+              ];
 
               keys.forEach((key, keyIndex) => {
                 pEle.tb.forEach((cEle, cIndex) => {
-                  tb[keyIndex].value.push({ text: String((cIndex + 1)), value: cEle[keys[keyIndex]] || 0 });
+                  tb[keyIndex].value.push({ text: String(cIndex + 1), value: cEle[keys[keyIndex]] || 0 });
                 });
               });
 
@@ -140,12 +141,12 @@ export default {
           } else {
             that.datas = datas;
           }
-        }
+        },
       });
-    }
+    },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -155,7 +156,7 @@ export default {
     });
   },
 
-  mounted () {
+  mounted() {
     // 渲染后
     for (let i = 1; i < 12; i++) {
       this.datas.push(JSON.parse(JSON.stringify(this.datas[0])));
@@ -165,10 +166,10 @@ export default {
     }
   },
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
-  }
+  },
 };
 </script>
 
@@ -193,9 +194,9 @@ export default {
 
     .panel-item {
       width: calc(25% - 1.204vh);
-      height: 26.852vh;
+      height: 29vh;
       margin-left: 1.481vh;
-      margin-top: 1.481vh;
+      margin-bottom: 1.481vh;
 
       &:nth-child(4n + 1) {
         margin-left: 0;

src/views/Agc/components/agc-panel.vue

@@ -1,20 +1,19 @@
 <template>
-  <ComPanel v-if="data && data.jcxx" :title="data.jcxx.name || '---'" :icon="data.jcxx.icon" :subTitle="data.jcxx.ddmc || '---'"
-    :color="data.jcxx.color">
+  <ComPanel v-if="data && data.jcxx" :title="data.jcxx.name || '---'" :icon="data.jcxx.icon" :subTitle="data.jcxx.ddmc || '---'" :color="data.jcxx.color">
     <table class="panel-table">
       <tbody>
         <tr>
           <td colspan="2">
             <div class="data-item">
               <span class="data-item-name">有功设定限制</span>
-              <span class="data-item-count">{{data.jcxx.AGC002}}</span>
+              <span class="data-item-count">{{ data.jcxx.AGC002 }}</span>
               <span class="data-item-unit">MW</span>
             </div>
           </td>
           <td colspan="2">
             <div class="data-item">
               <span class="data-item-name">实发有功</span>
-              <span class="data-item-count">{{data.jcxx.SSZGL}}</span>
+              <span class="data-item-count">{{ data.jcxx.SSZGL }}</span>
               <span class="data-item-unit">MW</span>
             </div>
           </td>
@@ -23,14 +22,14 @@
           <td colspan="2">
             <div class="data-item">
               <span class="data-item-name">AGC可调上限</span>
-              <span class="data-item-count">{{data.jcxx.AGC003}}</span>
+              <span class="data-item-count">{{ data.jcxx.AGC003 }}</span>
               <span class="data-item-unit">MW</span>
             </div>
           </td>
           <td colspan="2">
             <div class="data-item">
               <span class="data-item-name">理论功率</span>
-              <span class="data-item-count">{{data.jcxx.ZZSGL}}</span>
+              <span class="data-item-count">{{ data.jcxx.ZZSGL }}</span>
               <span class="data-item-unit">MW</span>
             </div>
           </td>
@@ -39,14 +38,14 @@
           <td colspan="2">
             <div class="data-item">
               <span class="data-item-name">AGC可调下限</span>
-              <span class="data-item-count">{{data.jcxx.AGC004}}</span>
+              <span class="data-item-count">{{ data.jcxx.AGC004 }}</span>
               <span class="data-item-unit">MW</span>
             </div>
           </td>
           <td colspan="2">
             <div class="data-item">
               <span class="data-item-name">预测功率</span>
-              <span class="data-item-count">{{data.jcxx.ycgl || 0}}</span>
+              <span class="data-item-count">{{ data.jcxx.ycgl || 0 }}</span>
               <span class="data-item-unit">MW</span>
             </div>
           </td>
@@ -80,8 +79,8 @@
       </tbody>
     </table>
     <!-- 查看默认实例去除末尾参数 :list 即可 -->
-    <DoubleLineChart v-if="chartType=== 'double'" height="13.889vh" :list="chartData"></DoubleLineChart>
-    <MultipleLineChart v-if="chartType=== 'multiple'" height="13.889vh" :list="chartData"></MultipleLineChart>
+    <DoubleLineChart v-if="chartType === 'double'" height="13.889vh" :list="chartData"></DoubleLineChart>
+    <MultipleLineChart v-if="chartType === 'multiple'" height="13.889vh" :list="chartData"></MultipleLineChart>
   </ComPanel>
 </template>
 
@@ -96,45 +95,45 @@ export default {
   components: {
     ComPanel,
     DoubleLineChart,
-    MultipleLineChart
+    MultipleLineChart,
   },
   // 传入参数
   props: {
     data: Object,
     chartType: {
       type: String,
-      default: "double"
+      default: "double",
     },
     chartData: {
       type: Array,
-      default: []
-    }
+      default: [],
+    },
   },
   // 自定义事件
   emits: {},
   // 数据
-  data () {
+  data() {
     return {};
   },
   // 函数
   methods: {},
   // 生命周期钩子
-  beforeCreate () {
+  beforeCreate() {
     // 创建前
   },
-  created () {
+  created() {
     // 创建后
   },
-  beforeMount () {
+  beforeMount() {
     // 渲染前
   },
-  mounted () {
+  mounted() {
     // 渲染后
   },
-  beforeUpdate () {
+  beforeUpdate() {
     // 数据更新前
   },
-  updated () {
+  updated() {
     // 数据更新后
   },
 };
@@ -145,8 +144,9 @@ export default {
   width: 100%;
 
   .data-item {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: fade(@gray, 20);
     padding: 0.278vh;
+    padding-left: 0.7407vh;
     font-size: 1.204vh;
     display: flex;
     flex-direction: row;
@@ -167,7 +167,7 @@ export default {
 
     .data-item-icon {
       margin-left: auto;
-      font-size: 1.667vh;
+      font-size: @fontsize-s;
     }
   }
 }

src/views/Decision/Decision1.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="decision-page-1">
+    <!-- 查询样式统一处理 样式在 assets/styles/form.less 文件中 -->
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">场站：</div>
+          <div class="search-input">
+            <input name="" placeholder="请输入场站信息" />
+            <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">
+            <input name="" />
+            <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">
+            <input name="" />
+            <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">
+            <input name="" />
+            <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">
+            <input name="" />
+            <div class="unit svg-icon svg-icon-gray">
+              <svg-icon :svgid="'svg-arrow-down'" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions">
+        <button class="btn green">搜索</button>
+        <button class="btn">明细信息</button>
+        <button class="btn">导出</button>
+      </div>
+    </div>
+    <div class="actions mg-b-8">
+      <button class="btn green">风场</button>
+      <button class="btn">项目</button>
+      <button class="btn">集电线路</button>
+    </div>
+    <el-row :type="'flex'" class="content">
+      <el-col :span="12" class="pd-r-8">
+        <toolbar-panel :title="123" :showLine="false">
+          <template v-slot:tools>
+            <div class="tools">
+              <div class="tool-block">
+                <div class="legend bg-green"></div>
+                <div class="legend-text">实际电量</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-orange"></div>
+                <div class="legend-text">计划检修损失</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-yellow"></div>
+                <div class="legend-text">非计划检修损失</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-red"></div>
+                <div class="legend-text">限电损失</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-purple"></div>
+                <div class="legend-text">受累损失</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-blue"></div>
+                <div class="legend-text">性能损失</div>
+              </div>
+            </div>
+          </template>
+          <bar-line-chart  :height="'calc(100vh - 200px)'"/>
+        </toolbar-panel>
+      </el-col>
+      <el-col :span="12" class="pd-l-8">
+        <panel :title="'项目列表'" :showLine="false">
+          <div class="project-table">
+            <Table :data="tableData"></Table>
+          </div>
+        </panel>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<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 },
+  data() {
+    return {
+      tableData: {
+        column: [
+          {
+            name: "",
+            field: "index",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "名称",
+            field: "name",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "理论发电量",
+            field: "lqf",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "SCADA发电量",
+            field: "yggl",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "风速",
+            field: "yyy",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "非计划检修",
+            field: "pcspp",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "计划检修",
+            field: "u1",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "受累",
+            field: "u2",
+            is_num: false,
+            is_light: true,
+          },
+          {
+            name: "限电",
+            field: "v1",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "性能",
+            field: "v2",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "风能率用率%",
+            field: "w1",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        data: [
+          {
+            index: 1,
+            name: "MG01-01",
+            lqf: "0.1000",
+            yggl: "0.1000",
+            yyy: "0.10",
+            pcspp: "0.1000",
+            u1: "0.1000",
+            u2: "0.1000",
+            v1: "0.1000",
+            v2: "0.1000",
+            w1: "0.1000",
+            w2: "0.1000",
+            zca: "0.1000",
+            zcb: "0.1000",
+            clx: "0.1000",
+            clx1: "0.1000",
+            clx2: "0.1000",
+            jc: "0.1000",
+            hh: "0.1000",
+            hj: "0.1000",
+            is_light: false,
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    for (let i = 1; i < 50; i++) {
+      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+      this.tableData.data[i].index = i + 1;
+    }
+  },
+};
+</script>
+
+<style lang="less">
+.decision-page-1 {
+  .com-panel .panel-title {
+    line-height: 3.4259vh;
+  }
+
+  .tools {
+    display: flex;
+    line-height: 3.4259vh;
+
+    .tool-block {
+      display: flex;
+      align-items: center;
+      margin-left: 0.741vh;
+
+      .legend {
+        flex: auto;
+        width: 0.741vh;
+        height: 0.741vh;
+        margin-right: 0.741vh;
+
+        &.long {
+          width: 2.963vh;
+          height: 0.37vh;
+        }
+      }
+
+      .legend-text {
+        color: @gray-l;
+        font-size: @fontsize-s;
+      }
+    }
+  }
+
+  .project-table {
+    overflow: auto;
+
+    tbody {
+      height: calc(100vh - 24.5vh);
+    }
+    td {
+      color: #b2bdc0 !important;
+    }
+  }
+}
+</style>

src/views/Decision/Decision2.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="decision-page-2">
+    <!-- 查询样式统一处理 样式在 assets/styles/form.less 文件中 -->
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">场站：</div>
+          <div class="search-input">
+            <input name="" placeholder="请输入场站信息" />
+            <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">
+            <input name="" />
+            <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">
+            <input name="" />
+            <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">
+            <input name="" />
+            <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">
+            <input name="" />
+            <div class="unit svg-icon svg-icon-gray">
+              <svg-icon :svgid="'svg-arrow-down'" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions">
+        <button class="btn green">搜索</button>
+        <button class="btn">明细信息</button>
+        <button class="btn">导出</button>
+      </div>
+    </div>
+    <div class="actions mg-b-8">
+      <button class="btn green">风场</button>
+      <button class="btn">项目</button>
+      <button class="btn">集电线路</button>
+    </div>
+    <div class="mg-b-16">
+      <div class="project-table">
+        <Table :data="tableData"></Table>
+      </div>
+    </div>
+    <el-row class="mg-b-16">
+      <el-col :span="8">
+        <panel title="日度损失电量分析">
+          <dual-pie-chart height="21.296vh" />
+        </panel>
+      </el-col>
+      <el-col :span="8">
+        <panel title="日度损失电量分析">
+          <dual-pie-chart height="21.296vh" />
+        </panel>
+      </el-col>
+      <el-col :span="8">
+        <panel title="日度损失电量分析">
+          <dual-pie-chart height="21.296vh" />
+        </panel>
+      </el-col>
+    </el-row>
+    <div>
+      <panel title="日度损失电量分析">
+        <multiple-bar-chart height="240px" />
+      </panel>
+    </div>
+  </div>
+</template>
+
+<script>
+import MultipleBarChart from "../../components/chart/bar/multiple-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 },
+  data() {
+    return {
+      tableData: {
+        column: [
+          {
+            name: "",
+            field: "index",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "",
+            field: "check",
+            is_num: false,
+            is_light: false,
+            template: function() {
+              return "<input class='check' type='CheckBox' >";
+            },
+          },
+          {
+            name: "名称",
+            field: "name",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "理论发电量",
+            field: "lqf",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "SCADA发电量",
+            field: "yggl",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "风速",
+            field: "yyy",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "非计划检修",
+            field: "pcspp",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "计划检修",
+            field: "u1",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "受累",
+            field: "u2",
+            is_num: false,
+            is_light: true,
+          },
+          {
+            name: "限电",
+            field: "v1",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "性能",
+            field: "v2",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "风能率用率%",
+            field: "w1",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        data: [
+          {
+            index: 1,
+            name: "MG01-01",
+            lqf: "0.1000",
+            yggl: "0.1000",
+            yyy: "0.10",
+            pcspp: "0.1000",
+            u1: "0.1000",
+            u2: "0.1000",
+            v1: "0.1000",
+            v2: "0.1000",
+            w1: "0.1000",
+            w2: "0.1000",
+            zca: "0.1000",
+            zcb: "0.1000",
+            clx: "0.1000",
+            clx1: "0.1000",
+            clx2: "0.1000",
+            jc: "0.1000",
+            hh: "0.1000",
+            hj: "0.1000",
+            is_light: false,
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    for (let i = 1; i < 50; i++) {
+      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+      this.tableData.data[i].index = i + 1;
+    }
+  },
+};
+</script>
+
+<style lang="less">
+.decision-page-2 {
+  .project-table {
+    overflow: auto;
+
+    tbody {
+      height: 189px;
+    }
+
+    th,
+    td {
+      color: #b2bdc0 !important;
+      &:nth-child(1) {
+        width: 50px;
+      }
+      &:nth-child(2) {
+        width: 50px;
+      }
+    }
+  }
+}
+</style>

src/views/Decision/Decision3.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="decision-page-3">
+    <!-- 查询样式统一处理 样式在 assets/styles/form.less 文件中 -->
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">场站：</div>
+          <div class="search-input">
+            <input name="" placeholder="请输入场站信息" />
+            <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">
+            <input name="" />
+            <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">
+            <input name="" />
+            <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">
+            <input name="" />
+            <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">
+            <input name="" />
+            <div class="unit svg-icon svg-icon-gray">
+              <svg-icon :svgid="'svg-arrow-down'" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions">
+        <button class="btn green">搜索</button>
+        <button class="btn">明细信息</button>
+        <button class="btn">导出</button>
+      </div>
+    </div>
+    <div class="actions mg-b-8">
+      <button class="btn green">风场</button>
+      <button class="btn">项目</button>
+      <button class="btn">集电线路</button>
+    </div>
+    <!-- 列表 -->
+    <div class="info">
+      <div class="mg-b-16">
+        <div class="project-table">
+          <Table :data="tableData"></Table>
+        </div>
+      </div>
+      <!-- 风资源列表 -->
+      <div class="direction-info mg-b-16">
+        <table class="com-table">
+          <tbody class="scroll">
+            <tr>
+              <td v-for="(col, i) of tableData.column" :key="i">
+                <div v-if="i == 0">22</div>
+                <div v-if="i == 1">风资源</div>
+                <div v-if="i != 0 && i != 1">
+                  <div class="direction-title">3.123</div>
+                  <div class="direction-chart">
+                    <DirectionRadarChart :width="'70%'" :height="'232px'" :value="90" />
+                    <div class="legend mg-t-16">
+                      <span class="dot"></span>
+                      <span>静风频率为2</span>
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <!-- 日功率曲线 -->
+      <div>
+        <toolbar-panel :title="'日功率曲线'">
+          <template v-slot:tools>
+            <div class="tools">
+              <div class="tool-block">
+                <div class="legend bg-green"></div>
+                <div class="legend-text">理论功率</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-orange"></div>
+                <div class="legend-text">预测功率4小时</div>
+              </div>
+            </div>
+          </template>
+          <double-line-chart :height="'200px'" />
+          <normal-line-chart :height="'200px'" />
+        </toolbar-panel>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DoubleLineChart from "../../components/chart/line/double-line-chart.vue";
+import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
+import DirectionRadarChart from "../../components/chart/radar/direction-radar-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
+import Table from "../../components/coms/table/table.vue";
+export default {
+  components: { Table, SvgIcon, DirectionRadarChart, ToolbarPanel, DoubleLineChart, NormalLineChart },
+  data() {
+    return {
+      tableData: {
+        column: [
+          {
+            name: "",
+            field: "index",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "name",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "lqf",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "yggl",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "yyy",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "项目",
+            field: "pcspp",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        data: [
+          {
+            index: 1,
+            name: "MG01-01",
+            lqf: "0.1000",
+            yggl: "0.1000",
+            yyy: "0.10",
+            pcspp: "0.1000",
+            u1: "0.1000",
+            u2: "0.1000",
+            v1: "0.1000",
+            v2: "0.1000",
+            w1: "0.1000",
+            w2: "0.1000",
+            zca: "0.1000",
+            zcb: "0.1000",
+            clx: "0.1000",
+            clx1: "0.1000",
+            clx2: "0.1000",
+            jc: "0.1000",
+            hh: "0.1000",
+            hj: "0.1000",
+            is_light: false,
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    for (let i = 1; i < 20; i++) {
+      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+      this.tableData.data[i].index = i + 1;
+    }
+  },
+};
+</script>
+
+<style lang="less">
+.decision-page-3 {
+  .com-panel {
+    .panel-title {
+      color: @gray-l;
+    }
+    .tools {
+      display: flex;
+
+      .tool-block {
+        display: flex;
+        align-items: center;
+        margin-left: 0.741vh;
+
+        .legend {
+          flex: auto;
+          width: 0.741vh;
+          height: 0.741vh;
+          margin-right: 0.741vh;
+
+          &.long {
+            width: 2.963vh;
+            height: 0.37vh;
+          }
+        }
+
+        .legend-text {
+          color: @gray-l;
+          font-size: @fontsize-s;
+        }
+      }
+    }
+  }
+
+  .info {
+    overflow: auto;
+    height: calc(100vh - 150px);
+  }
+
+  .project-table {
+    overflow: auto;
+    .com-table {
+      tbody {
+        padding-right: 0px;
+      }
+      th,
+      td {
+        color: #b2bdc0 !important;
+        &:nth-child(1) {
+          width: 32px;
+        }
+        &:nth-child(2) {
+          width: 183px;
+        }
+      }
+    }
+  }
+
+  .direction-info {
+    .com-table {
+      tbody {
+        padding-right: 0px;
+      }
+      th,
+      td {
+        color: #b2bdc0 !important;
+        padding: 0;
+
+        &:nth-child(1) {
+          width: 32px;
+          background-color: fade(#536268, 20);
+        }
+        &:nth-child(2) {
+          width: 183px;
+          background-color: fade(#536268, 40);
+        }
+
+        .direction-title {
+          background-color: fade(#536268, 20);
+          font-size: @fontsize-s;
+          line-height: 2.963vh;
+        }
+
+        .direction-chart {
+          padding-top: 48px;
+          .legend {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-top: 32px;
+            margin-bottom: 16px;
+
+            .dot {
+              width: 7px;
+              height: 7px;
+              background: @green;
+              display: inline-block;
+              margin-right: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Decision/Decision4.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="decision-page-4">
+    <!-- 查询样式统一处理 样式在 assets/styles/form.less 文件中 -->
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">场站：</div>
+          <div class="search-input">
+            <input name="" placeholder="请输入场站信息" />
+            <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">
+            <input name="" />
+            <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">
+            <input name="" />
+            <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">
+            <input name="" />
+            <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">
+            <input name="" />
+            <div class="unit svg-icon svg-icon-gray">
+              <svg-icon :svgid="'svg-arrow-down'" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions">
+        <button class="btn green">搜索</button>
+        <button class="btn">明细信息</button>
+        <button class="btn">导出</button>
+      </div>
+    </div>
+    <div class="actions mg-b-8">
+      <button class="btn green">风场</button>
+      <button class="btn">项目</button>
+      <button class="btn">集电线路</button>
+    </div>
+    <div class="mg-b-16">
+      <div class="project-table">
+        <Table :data="tableData"></Table>
+      </div>
+    </div>
+    <div>
+      <panel title=""> </panel>
+
+      <toolbar-panel :title="'日度损失电量分析'">
+        <template v-slot:tools>
+          <div class="tools">
+            <div class="tool-block">
+              <div class="legend bg-green"></div>
+              <div class="legend-text">理论功率</div>
+            </div>
+            <div class="tool-block">
+              <div class="legend bg-orange"></div>
+              <div class="legend-text">预测功率4小时</div>
+            </div>
+          </div>
+        </template>
+        <multiple-bar-chart height="240px" />
+      </toolbar-panel>
+    </div>
+  </div>
+</template>
+
+<script>
+import MultipleBarChart from "../../components/chart/bar/multiple-bar-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: { Panel, Table, SvgIcon, MultipleBarChart, ToolbarPanel },
+  data() {
+    return {
+      tableData: {
+        column: [
+          {
+            name: "",
+            field: "index",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "",
+            field: "check",
+            is_num: false,
+            is_light: false,
+            template: function() {
+              return "<input class='check' type='CheckBox' >";
+            },
+          },
+          {
+            name: "名称",
+            field: "name",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "理论发电量",
+            field: "lqf",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "SCADA发电量",
+            field: "yggl",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "风速",
+            field: "yyy",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "非计划检修",
+            field: "pcspp",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "计划检修",
+            field: "u1",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "受累",
+            field: "u2",
+            is_num: false,
+            is_light: true,
+          },
+          {
+            name: "限电",
+            field: "v1",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "性能",
+            field: "v2",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "风能率用率%",
+            field: "w1",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        data: [
+          {
+            index: 1,
+            name: "MG01-01",
+            lqf: "0.1000",
+            yggl: "0.1000",
+            yyy: "0.10",
+            pcspp: "0.1000",
+            u1: "0.1000",
+            u2: "0.1000",
+            v1: "0.1000",
+            v2: "0.1000",
+            w1: "0.1000",
+            w2: "0.1000",
+            zca: "0.1000",
+            zcb: "0.1000",
+            clx: "0.1000",
+            clx1: "0.1000",
+            clx2: "0.1000",
+            jc: "0.1000",
+            hh: "0.1000",
+            hj: "0.1000",
+            is_light: false,
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    for (let i = 1; i < 50; i++) {
+      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+      this.tableData.data[i].index = i + 1;
+    }
+  },
+};
+</script>
+
+<style lang="less">
+.decision-page-4 {
+  .com-panel {
+    .panel-title {
+      color: @gray-l;
+    }
+    .tools {
+      display: flex;
+
+      .tool-block {
+        display: flex;
+        align-items: center;
+        margin-left: 0.741vh;
+
+        .legend {
+          flex: auto;
+          width: 0.741vh;
+          height: 0.741vh;
+          margin-right: 0.741vh;
+
+          &.long {
+            width: 2.963vh;
+            height: 0.37vh;
+          }
+        }
+
+        .legend-text {
+          color: @gray-l;
+          font-size: @fontsize-s;
+        }
+      }
+    }
+  }
+
+  .project-table {
+    overflow: auto;
+
+    tbody {
+      height: 400px;
+    }
+
+    th,
+    td {
+      color: #b2bdc0 !important;
+      &:nth-child(1) {
+        width: 50px;
+      }
+      &:nth-child(2) {
+        width: 50px;
+      }
+    }
+  }
+}
+</style>

src/views/Home/Home.vue

@@ -4,11 +4,7 @@
       <Col :span="6">
         <Row type="flex">
           <Col :span="24">
-            <com-panel
-              title="银川"
-              sub-title="AM 10:52 实况"
-              icon="fa fa-map-marker"
-            >
+            <com-panel title="银川" sub-title="AM 10:52 实况" icon="fa fa-map-marker">
               <weather />
             </com-panel>
           </Col>
@@ -73,11 +69,7 @@
           </template>
           <template v-slot:default>
             <!-- 日发电量 -->
-            <multiple-bar-chart
-              :list="DayPower.value"
-              :units="DayPower.units"
-              height="12.963vh"
-            />
+            <multiple-bar-chart :list="DayPower.value" :units="DayPower.units" height="12.963vh" />
           </template>
         </toolbar-panel>
       </Col>
@@ -102,11 +94,7 @@
             </div>
           </template>
           <template v-slot:default>
-            <multiple-line-chart
-              :list="Powertrend.value"
-              :units="Powertrend.units"
-              height="12.963vh"
-            />
+            <multiple-line-chart :list="Powertrend.value" :units="Powertrend.units" height="12.963vh" />
           </template>
         </toolbar-panel>
       </Col>
@@ -410,7 +398,7 @@
                 </div>
               </div>
               <div class="situation-item">
-                <div class="icon svg-icon svg-icon-blue">
+                <div class="icon svg-icon svg-icon-darkblue">
                   <svg-icon class="" svgid="svg-受累图标" />
                 </div>
                 <div class="info">
@@ -767,6 +755,7 @@ export default {
 
       &.value {
         text-align: right;
+        font-family: @font-family-num;
       }
 
       &.unit {
@@ -824,7 +813,7 @@ export default {
       }
 
       &.fengji {
-        flex: 0 1 7.3737vw;
+        flex: 0 1 7.99vw;
 
         .info .value {
           font-size: 1.852vh;

src/views/Home/components/map.vue

@@ -1,184 +1,208 @@
 <template>
-    <div class="map">
-        <div class="back"></div>
-        <div class="security-days">
-            <div class="text">安全天数:</div>
-            <div class="num">
-                <span class="font-num">1,945</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)">
-                <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="map-img">
-            <SvgMap></SvgMap>
-        </div>
+  <div class="map">
+    <div class="back"></div>
+    <div class="security-days">
+      <div class="text">安全天数:</div>
+      <div class="num">
+        <span class="font-num">1,945</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)">
+        <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">
+      <span class="svg-icon svg-icon-sm">
+        <svg-icon :svgid="'svg-arrow-dpwn-1'" />
+      </span>
+      返回
+    </div>
+    <div class="map-img">
+      <SvgMap></SvgMap>
+    </div>
+  </div>
 </template>
 
 <script>
-    import SvgIcon from '@com/coms/icon/svg-icon.vue';
-    import SvgMap from "./map/svg-map.vue";
-    export default {
-        // 名称
-        name: "Map",
-        // 使用组件
-        components: {
-            SvgIcon,
-            SvgMap,
-        },
-        // 数据
-        data() {
-            return {
-                tabs: [{
-                        icon: 'svg-all',
-                        text: '全部'
-                    },
-                    {
-                        icon: 'svg-wind-site',
-                        text: '风场'
-                    },
-                    {
-                        icon: 'svg-photovoltaic',
-                        text: '电站'
-                    },
-                ],
-                activeTab: 0,
-                img: require("@assets/map/map-nx.png"),
-                nxSvgFile: require("@assets/map/map-nx.svg"),
-            }
-        },
-        // 函数
-        methods: {
-            selectTab: function(index) {
-                this.activeTab = index;
-            }
-        },
-        // 生命周期钩子
-        beforeCreate() {
-            // 创建前
-        },
-        created() {
-            // 创建后
-        },
-        beforeMount() {
-            // 渲染前
+import SvgMap from "./map/svg-map.vue";
+import SvgIcon from "../../../components/coms/icon/svg-icon.vue";
+export default {
+  // 名称
+  name: "Map",
+  // 使用组件
+  components: {
+    SvgMap,
+    SvgIcon,
+  },
+  // 数据
+  data() {
+    return {
+      tabs: [
+        {
+          icon: "svg-all",
+          text: "全部",
         },
-        mounted() {
-            // 渲染后
+        {
+          icon: "svg-wind-site",
+          text: "风场",
         },
-        beforeUpdate() {
-            // 数据更新前
+        {
+          icon: "svg-photovoltaic",
+          text: "电站",
         },
-        updated() {
-            // 数据更新后
-        },
-    }
+      ],
+      activeTab: 0,
+      img: require("@assets/map/map-nx.png"),
+      nxSvgFile: require("@assets/map/map-nx.svg"),
+    };
+  },
+  // 函数
+  methods: {
+    selectTab: function(index) {
+      this.activeTab = index;
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
 </script>
 
 <style lang="less" scoped>
-    .map {
+.map {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .back {
+    position: fixed;
+    z-index: -1;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    background: url(../../../assets/background-home.png) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .security-days {
+    margin: 1.852vh;
+
+    .text {
+      font-size: 2.222vh;
+      color: @write;
+    }
+
+    .num {
+      color: @green;
+      font-size: 3.704vh;
+
+      .unit {
+        font-size: 2.222vh;
         position: relative;
-        width: 100%;
-        height: 100%;
-
-        .back {
-            position: fixed;
-            z-index: -1;
-            width: 100vw;
-            height: 100vh;
-            top: 0;
-            left: 0;
-            background: url(../../../assets/background-home.png) no-repeat;
-            background-size: 100% 100%;
-        }
+        margin-left: 0.556vh;
+        top: -0.185vh;
+      }
+    }
+  }
 
-        .security-days {
-            margin: 1.852vh;
-
-            .text {
-                font-size: 2.222vh;
-                color: @write;
-            }
-
-            .num {
-                color: @green;
-                font-size: 3.704vh;
-
-                .unit {
-                    font-size: 2.222vh;
-                    position: relative;
-                    margin-left: 0.556vh;
-                    top: -0.185vh;
-                }
-            }
-        }
+  .tab-box {
+    margin: 1.852vh 2.778vh;
 
-        .tab-box {
-            margin: 1.852vh 2.778vh;
-
-            .tab-item {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: @fontsize-l;
-                cursor: pointer;
-                width: 6.481vh;
-                padding: 0.741vh 0;
-
-                &.active {
-                    color: @green;
-                    position: relative;
-                    background-image: @greenLinearTop;
-
-                    &::after {
-                        content: "";
-                        position: absolute;
-                        width: 100%;
-                        height: 0.463vh;
-                        border: 0.093vh solid @green;
-                        border-top: 0;
-                        left: 0;
-                        bottom: 0;
-                        box-sizing: border-box;
-                    }
-                }
-
-                .svg-icon {
-                    margin-right: 0.556vh;
-                }
-            }
-        }
-    
-        .map-img {
-            width: calc(100% - 14.815vh);
-            height: calc(100% - 14.815vh);
-            margin: 7.407vh;
-            position: absolute;
-            z-index: 1;
-            top: 0;
-            left: 0;
-            
-            @keyframes rotate
-            {
-                from {transform: rotateX(70deg);}
-                to {transform: rotateX(0deg);}
-            }
-            
-            img {
-                width: 100%;
-                animation: rotate 3s;
-                animation-direction: alternate;
-                animation-iteration-count: infinite;
-            }
+    .tab-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: @fontsize-l;
+      cursor: pointer;
+      width: 6.481vh;
+      padding: 0.741vh 0;
+
+      &.active {
+        color: @green;
+        position: relative;
+        background-image: @greenLinearTop;
+
+        &::after {
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 0.463vh;
+          border: 0.093vh solid @green;
+          border-top: 0;
+          left: 0;
+          bottom: 0;
+          box-sizing: border-box;
         }
-        
+      }
+
+      .svg-icon {
+        margin-right: 0.556vh;
+      }
+    }
+  }
+
+  .return {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    top: 0;
+    right: 16px;
+    font-size: @fontsize-l;
+    color: fade(@white, 80);
+    .svg-icon {
+      margin-right: 0.7407vh;
+      svg {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  .map-img {
+    width: calc(100% - 14.815vh);
+    height: calc(100% - 14.815vh);
+    margin: 7.407vh;
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+
+    @keyframes rotate {
+      from {
+        transform: rotateX(70deg);
+      }
+      to {
+        transform: rotateX(0deg);
+      }
+    }
+
+    img {
+      width: 100%;
+      animation: rotate 3s;
+      animation-direction: alternate;
+      animation-iteration-count: infinite;
     }
+  }
+}
 </style>

src/views/Home/components/weather.vue

@@ -105,7 +105,7 @@ export default {
     font-size: @fontsize-s;
 
     .text {
-      color: @gray;
+      color: @font-color;
     }
 
     .value {

src/views/LightMatrix/LightMatrix.vue

@@ -7,46 +7,46 @@
       <div class="dot right bottom"></div>
       <Row>
         <Col :span="3">
-        <div class="panel-item-gf">
-          <div class="panel-item-gf-left">
-            <span class="svg-icon svg-icon-write svg-icon-md">
-              <SvgIcon :svgid="panelData.first.icon"></SvgIcon>
-            </span>
-          </div>
-          <div class="panel-item-gf-right">
-            <div class="panel-item-gf-up">{{ panelData.first.text }}</div>
-            <div class="panel-item-gf-down">{{ sourceMap[panelData.first.key] || "---" }}</div>
-          </div>
-        </div>
-        </Col>
-        <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
-        <div class="panel-item" :class="data.color">
-          <div class="panel-item-left">
-            <div class="panel-item-li">
-              <span>{{ data.name }}</span>
-              <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
-                <SvgIcon :svgid="data.nameIcon"></SvgIcon>
+          <div class="panel-item-gf">
+            <div class="panel-item-gf-left">
+              <span class="svg-icon svg-icon-write svg-icon-md">
+                <SvgIcon :svgid="panelData.first.icon"></SvgIcon>
               </span>
             </div>
-            <div class="panel-item-li">
-              <span v-if="data.calcStr && sourceMap">{{ calcGfStr(data.calcStr) || "---" }}</span>
-              <span v-else>{{ sourceMap[data.key] || "---" }}</span>
-              <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
-                <SvgIcon :svgid="data.numIcon"></SvgIcon>
-              </span>
+            <div class="panel-item-gf-right">
+              <div class="panel-item-gf-up">{{ panelData.first.text }}</div>
+              <div class="panel-item-gf-down">{{ sourceMap[panelData.first.key] || "---" }}</div>
             </div>
           </div>
-          <div class="panel-item-right">
-            <div class="panel-item-ri">
-              <span>{{ data.text1 }}</span>
-              <span>{{ sourceMap[data.key1] || "---" }}</span>
+        </Col>
+        <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
+          <div class="panel-item" :class="data.color">
+            <div class="panel-item-left">
+              <div class="panel-item-li">
+                <span>{{ data.name }}</span>
+                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
+                  <SvgIcon :svgid="data.nameIcon"></SvgIcon>
+                </span>
+              </div>
+              <div class="panel-item-li">
+                <span v-if="data.calcStr && sourceMap">{{ calcGfStr(data.calcStr) || "---" }}</span>
+                <span v-else>{{ sourceMap[data.key] || "---" }}</span>
+                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
+                  <SvgIcon :svgid="data.numIcon"></SvgIcon>
+                </span>
+              </div>
             </div>
-            <div class="panel-item-ri">
-              <span>{{ data.text2 }}</span>
-              <span>{{ sourceMap[data.key2] || "---" }}</span>
+            <div class="panel-item-right">
+              <div class="panel-item-ri">
+                <span>{{ data.text1 }}</span>
+                <span>{{ sourceMap[data.key1] || "---" }}</span>
+              </div>
+              <div class="panel-item-ri">
+                <span>{{ data.text2 }}</span>
+                <span>{{ sourceMap[data.key2] || "---" }}</span>
+              </div>
             </div>
           </div>
-        </div>
         </Col>
       </Row>
     </div>
@@ -123,7 +123,7 @@ export default {
   },
 
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 计时器
       sourceMap: {}, // 核心数据
@@ -311,7 +311,7 @@ export default {
   // 函数
   methods: {
     // 根据风机状态码返回对应 class
-    getColor (fjzt) {
+    getColor(fjzt) {
       switch (fjzt) {
         case 0:
           return "green";
@@ -337,26 +337,26 @@ export default {
       }
     },
 
-    calcGfStr (calcStr) {
+    calcGfStr(calcStr) {
       return parseInt(this.sourceMap[calcStr[0]]) + parseInt(this.sourceMap[calcStr[1]]) + "";
     },
 
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "matrix/matrixDetialGfPush",
-        success (res) {
+        success(res) {
           if (res.data) {
             let sourceMap = res.data;
             for (let key in sourceMap) {
-              if (key !== 'fczbmap' && key !== 'fjmap') {
-                sourceMap[key] += '';
-              } else if (key === 'fjmap') {
-                sourceMap[key].forEach(pItem => {
-                  pItem.forEach(cItem => {
+              if (key !== "fczbmap" && key !== "fjmap") {
+                sourceMap[key] += "";
+              } else if (key === "fjmap") {
+                sourceMap[key].forEach((pItem) => {
+                  pItem.forEach((cItem) => {
                     cItem.color = that.getColor(cItem.fjzt);
                     cItem.isShow = true;
                   });
@@ -372,7 +372,7 @@ export default {
     },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -382,9 +382,9 @@ export default {
     });
   },
 
-  mounted () { },
+  mounted() {},
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
   },
@@ -669,6 +669,8 @@ export default {
         }
 
         .sub-title-item {
+          display: flex;
+
           .sub-title {
             color: @gray;
             font-size: @fontsize-s;
@@ -677,7 +679,7 @@ export default {
 
           .sub-count {
             font-size: @fontsize-s;
-            font-family: 'Bicubik';
+            font-family: "Bicubik";
             font-weight: 500;
 
             &.write {
@@ -780,6 +782,9 @@ export default {
               i {
                 margin: 0 0.37vh;
               }
+              span {
+                flex: 1;
+              }
             }
           }
         }

src/views/LightMatrix1/LightMatrix1.vue

@@ -341,7 +341,7 @@ export default {
 
 <style lang="less" scoped>
 @panelHeight: 6.481vh;
-@titleHeight: 3.704vh;
+@titleHeight: 2.7778vh;
 
 .light-matrix {
   width: calc(100% - 1.111vh);
@@ -359,10 +359,9 @@ export default {
     width: 100%;
     border: 0.093vh solid @darkgray;
     position: relative;
-    padding: 1.111vh 2.222vh;
+    padding: 0.7407vh 1.4815vh;
     background-color: fade(@darkgray, 20%);
     display: flex;
-    height: 6.944vh;
 
     .dot {
       width: 0.185vh;
@@ -493,7 +492,7 @@ export default {
   }
 
   .panel-box {
-    margin-top: 1.481vh;
+    margin-top: 0.7407vh;
     flex-grow: 1;
     overflow: auto;
 
@@ -559,24 +558,23 @@ export default {
 
     .panel-body {
       height: calc(100% - 7.407vh);
-      background-color: fade(@darkgray, 20%);
-      padding: 0.741vh;
-      margin-bottom: 1.481vh;
+      padding: 0.3704vh;
       width: 100%;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: space-between;
+      justify-content: flex-start;
 
       .blank {
-        margin-right: 4px;
-        flex: 1 0 4.4444vh;
+        margin-right: 0.2778vh;
+        flex: 1 0 40px;
       }
 
       .card {
-        margin-right: 4px;
-        margin-top: 4px;
-        flex: 1 0 4.4444vh;
+        margin-right: 0.2778vh;
+        margin-top: 0.1852vh;
+        flex: 1 0 40px;
       }
 
       .card {
@@ -584,7 +582,7 @@ export default {
         padding: 0.185vh 0.3704vh;
         text-align: center;
         border: 0.093vh solid;
-        font-size: 14px;
+        font-size: 12px;
 
         &.write {
           color: @black;

src/views/LightMatrix3/LightMatrix3.vue

@@ -7,46 +7,46 @@
       <div class="dot right bottom"></div>
       <Row>
         <Col :span="3">
-        <div class="panel-item-gf">
-          <div class="panel-item-gf-left">
-            <span class="svg-icon svg-icon-write svg-icon-md">
-              <SvgIcon :svgid="panelData.first.icon"></SvgIcon>
-            </span>
-          </div>
-          <div class="panel-item-gf-right">
-            <div class="panel-item-gf-up">{{ panelData.first.text }}</div>
-            <div class="panel-item-gf-down">{{ sourceMap[panelData.first.key] || "---" }}</div>
-          </div>
-        </div>
-        </Col>
-        <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
-        <div class="panel-item" :class="data.color">
-          <div class="panel-item-left">
-            <div class="panel-item-li">
-              <span>{{ data.name }}</span>
-              <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
-                <SvgIcon :svgid="data.nameIcon"></SvgIcon>
+          <div class="panel-item-gf">
+            <div class="panel-item-gf-left">
+              <span class="svg-icon svg-icon-write svg-icon-md">
+                <SvgIcon :svgid="panelData.first.icon"></SvgIcon>
               </span>
             </div>
-            <div class="panel-item-li">
-              <span v-if="data.calcStr && sourceMap">{{ calcGfStr(data.calcStr) || "---" }}</span>
-              <span v-else>{{ sourceMap[data.key] || "---" }}</span>
-              <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
-                <SvgIcon :svgid="data.numIcon"></SvgIcon>
-              </span>
+            <div class="panel-item-gf-right">
+              <div class="panel-item-gf-up">{{ panelData.first.text }}</div>
+              <div class="panel-item-gf-down">{{ sourceMap[panelData.first.key] || "---" }}</div>
             </div>
           </div>
-          <div class="panel-item-right">
-            <div class="panel-item-ri">
-              <span>{{ data.text1 }}</span>
-              <span>{{ sourceMap[data.key1] || "---" }}</span>
+        </Col>
+        <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
+          <div class="panel-item" :class="data.color">
+            <div class="panel-item-left">
+              <div class="panel-item-li">
+                <span>{{ data.name }}</span>
+                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
+                  <SvgIcon :svgid="data.nameIcon"></SvgIcon>
+                </span>
+              </div>
+              <div class="panel-item-li">
+                <span v-if="data.calcStr && sourceMap">{{ calcGfStr(data.calcStr) || "---" }}</span>
+                <span v-else>{{ sourceMap[data.key] || "---" }}</span>
+                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
+                  <SvgIcon :svgid="data.numIcon"></SvgIcon>
+                </span>
+              </div>
             </div>
-            <div class="panel-item-ri">
-              <span>{{ data.text2 }}</span>
-              <span>{{ sourceMap[data.key2] || "---" }}</span>
+            <div class="panel-item-right">
+              <div class="panel-item-ri">
+                <span>{{ data.text1 }}</span>
+                <span>{{ sourceMap[data.key1] || "---" }}</span>
+              </div>
+              <div class="panel-item-ri">
+                <span>{{ data.text2 }}</span>
+                <span>{{ sourceMap[data.key2] || "---" }}</span>
+              </div>
             </div>
           </div>
-        </div>
         </Col>
       </Row>
     </div>
@@ -64,9 +64,11 @@
         </div>
         <div class="panel-body">
           <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color">
-            <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>
-            </span>
+            <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>
+              </span>
+            </div>
             <div class="card-panel">
               <div class="card-left">
                 <div class="tag">{{ cItem.wtnum }}</div>
@@ -82,7 +84,7 @@
                   <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + cItem.color">
                     <!-- <SvgIcon svgid="svg-R"></SvgIcon> -->
                   </i>
-                  <div>{{ cItem.fdl || '&nbsp;' }}</div>
+                  <div>{{ cItem.fdl || "&nbsp;" }}</div>
                 </div>
                 <div class="num">
                   <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + cItem.color">
@@ -120,7 +122,7 @@ export default {
   },
 
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 遮罩开关
       sourceMap: {}, // 核心数据
@@ -316,7 +318,7 @@ export default {
   // 函数
   methods: {
     // 根据风机状态码返回对应 class
-    getColor (fjzt) {
+    getColor(fjzt) {
       switch (fjzt) {
         case 0: // 待机
           return "green";
@@ -360,18 +362,18 @@ export default {
       }
     },
 
-    calcGfStr (calcStr) {
+    calcGfStr(calcStr) {
       return parseInt(this.sourceMap[calcStr[0]]) + parseInt(this.sourceMap[calcStr[1]]) + "";
     },
 
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "matrix/matrixDetialPush",
-        success (res) {
+        success(res) {
           if (res.data) {
             let sourceMap = res.data;
             for (let key in sourceMap) {
@@ -395,7 +397,7 @@ export default {
     },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -405,9 +407,9 @@ export default {
     });
   },
 
-  mounted () { },
+  mounted() {},
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
   },
@@ -700,7 +702,7 @@ export default {
 
           .sub-count {
             font-size: @fontsize-s;
-            font-family: 'Bicubik';
+            font-family: "Bicubik";
             font-weight: 500;
 
             &.write {
@@ -760,11 +762,22 @@ export default {
         border: 0.093vh solid;
         position: relative;
 
-        .center-icon {
-          font-size: 2.222vh;
+        .circle {
+          width: 1.4815vh;
           position: absolute;
-          left: calc(50% - 1.111vh);
-          top: calc(50% - 1.111vh);
+          height: 1.4815vh;
+          border: 0.0926vh solid #ffffff;
+          border-radius: 100%;
+          top: calc(50% - 0.7407vh);
+          left: calc(50% - 0.7407vh);
+          background-color: fade(#000, 30);
+
+          .center-icon {
+            font-size: 2.222vh;
+            position: absolute;
+            left: calc(50% - 1.111vh);
+            top: calc(50% - 1.111vh);
+          }
         }
 
         .card-panel {
@@ -780,7 +793,7 @@ export default {
               width: 100%;
               text-align: center;
               border-bottom: 0.093vh solid;
-              padding: 0.37vh 0;
+              padding: 0.7407vh 0;
             }
 
             .num {
@@ -790,7 +803,7 @@ export default {
               width: 100%;
               font-size: 14px;
               text-align: left;
-              padding: 0.37vh 0;
+              padding: 0.7407vh 0;
 
               div {
                 min-width: 5.463vh;
@@ -815,7 +828,7 @@ export default {
               width: 100%;
               font-size: 14px;
               text-align: left;
-              padding: 0.37vh 0;
+              padding: 0.7407vh 0;
 
               &:first-child {
                 border-bottom: 0.093vh solid;
@@ -855,6 +868,11 @@ export default {
           border-color: @darkBlue;
           background-color: fade(@darkBlue, 30%);
 
+          .circle {
+            border-color: @darkBlue;
+            background-color: #0e062b;
+          }
+
           .center-icon {
             color: @write;
           }
@@ -889,6 +907,11 @@ export default {
           border-color: @pink;
           background-color: fade(@pink, 30%);
 
+          .circle {
+            border-color: @pink;
+            background-color: #26062d;
+          }
+
           .center-icon {
             color: @write;
           }
@@ -927,6 +950,11 @@ export default {
             color: @write;
           }
 
+          .circle {
+            border-color: @orange;
+            background-color: #2d1e07;
+          }
+
           .card-panel {
             .card-left {
               border-color: @orange;
@@ -959,8 +987,13 @@ export default {
 
           .center-icon {
             color: @write;
+            padding-left: 4px;
           }
 
+          .circle {
+            border-color: @green;
+            background-color: #0f2a09;
+          }
           .card-panel {
             .card-left {
               border-color: @green;
@@ -995,6 +1028,11 @@ export default {
             color: @write;
           }
 
+          .circle {
+            border-color: @darkgray;
+            background-color: #2b2b2b;
+          }
+
           .card-panel {
             .card-left {
               border-color: @darkgray;
@@ -1028,6 +1066,11 @@ export default {
             color: @write;
           }
 
+          .circle {
+            border-color: @red;
+            background-color: #840c0e;
+          }
+
           .card-panel {
             background-color: @red;
 
@@ -1063,6 +1106,11 @@ export default {
             color: @black;
           }
 
+          .circle {
+            border-color: @black;
+            background-color: #ffffff;
+          }
+
           .card-panel {
             background-color: @write;
 

src/views/Status/Status.vue

@@ -11,7 +11,7 @@
 
 <script>
 import StatusPanel from "./components/status-panel.vue";
-import ComTable from '@com/coms/table/table.vue';
+import ComTable from "@com/coms/table/table.vue";
 import util from "@/helper/util.js";
 
 import { datainit, webtest } from "@tools/websocket.js";
@@ -26,7 +26,7 @@ export default {
     ComTable,
   },
   // 数据
-  data () {
+  data() {
     return {
       loadingFlg: false, // 遮罩开关
       websocketServe: null, // websocket 服务实例
@@ -182,7 +182,7 @@ export default {
   // 函数
   methods: {},
 
-  created () {
+  created() {
     let that = this;
     that.loadingFlg = true;
     // that.BASE.showLoading();
@@ -191,35 +191,33 @@ export default {
       that.API.requestData({
         method: "POST",
         subUrl: "admin/websocketdisconnect",
-        success () {
+        success() {
           that.websocketServe = datainit("/topic/wpInfoPush");
-        }
+        },
       });
     });
   },
 
-  mounted () {
+  mounted() {},
 
-  },
-
-  unmounted () {
+  unmounted() {
     this.websocketServe && this.websocketServe.disconnect();
     this.API.requestData({
       method: "POST",
-      subUrl: "admin/websocketdisconnect"
+      subUrl: "admin/websocketdisconnect",
     });
   },
 
   watch: {
     // 监听 websocket 回调并包装数据用于展示
-    '$store.state.windturbineMap': function (res) {
+    "$store.state.windturbineMap": function(res) {
       // this.loadingFlg && this.BASE.closeLoading();
       this.loadingFlg = false;
       if (res) {
         let sourceMap = JSON.parse(res);
         let datas = [];
         let data = [];
-        sourceMap.maps.forEach(ele => {
+        sourceMap.maps.forEach((ele) => {
           datas.push({
             title: ele.name,
             weather: {
@@ -268,7 +266,7 @@ export default {
               {
                 f1: "测风塔:",
                 f2: "风速",
-                f3: ((ele.cftfs || 0) + "m/s"),
+                f3: (ele.cftfs || 0) + "m/s",
                 f4: "风向",
                 f5: ele.cftfx || 0,
                 is_light: false,
@@ -285,7 +283,7 @@ export default {
           });
         });
 
-        sourceMap.vos.forEach(ele => {
+        sourceMap.vos.forEach((ele) => {
           ele.row_span = [];
           ele.col_span = [];
           ele.is_light = false;
@@ -300,8 +298,8 @@ export default {
         this.datas = [];
         this.tableData.data = [];
       }
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -338,7 +336,7 @@ export default {
 
     &::after,
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       width: 0.185vh;
       height: 0.185vh;

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

@@ -5,22 +5,22 @@
       <div class="p-body">
         <div class="category-box">
           <div class="score">
-            <span>{{data.category.score}}</span>
+            <span>{{ data.category.score }}</span>
           </div>
           <div class="box">
             <div class="category-item" v-for="(item, index) of data.category.datas" :key="index">
-              <div>{{item.text}}</div>
-              <div :class="item.color">{{item.num}}</div>
+              <div>{{ item.text }}</div>
+              <div :class="item.color">{{ item.num }}</div>
             </div>
           </div>
         </div>
         <div class="item-box">
-          <div class="data-item" v-for="(item, index) of data.items" :key="index" :class="{ 'light': item.is_light }">
-            <div class="f1">{{item.f1}}</div>
-            <div class="f2">{{item.f2}}</div>
-            <div class="f3">{{item.f3}}</div>
-            <div class="f4">{{item.f4}}</div>
-            <div class="f5">{{item.f5}}</div>
+          <div class="data-item" v-for="(item, index) of data.items" :key="index" :class="{ light: item.is_light }">
+            <div class="f1">{{ item.f1 }}</div>
+            <div class="f2">{{ item.f2 }}</div>
+            <div class="f3">{{ item.f3 }}</div>
+            <div class="f4">{{ item.f4 }}</div>
+            <div class="f5">{{ item.f5 }}</div>
           </div>
         </div>
       </div>
@@ -29,13 +29,13 @@
 </template>
 
 <script>
-import ComPanel from '@com/coms/panel/panel.vue'
+import ComPanel from "@com/coms/panel/panel.vue";
 export default {
   // 名称
   name: "StatusPanel",
   // 使用组件
   components: {
-    ComPanel
+    ComPanel,
   },
   /**
    * {
@@ -67,36 +67,34 @@ export default {
       }
    */
   props: {
-    data: Object
+    data: Object,
   },
   // 数据
-  data () {
-    return {
-
-    }
+  data() {
+    return {};
   },
   // 函数
   methods: {},
   // 生命周期钩子
-  beforeCreate () {
+  beforeCreate() {
     // 创建前
   },
-  created () {
+  created() {
     // 创建后
   },
-  beforeMount () {
+  beforeMount() {
     // 渲染前
   },
-  mounted () {
+  mounted() {
     // 渲染后
   },
-  beforeUpdate () {
+  beforeUpdate() {
     // 数据更新前
   },
-  updated () {
+  updated() {
     // 数据更新后
   },
-}
+};
 </script>
 
 <style lang="less" scoped>
@@ -211,7 +209,7 @@ export default {
 
           .f3,
           .f5 {
-            font-family: 'Bicubik';
+            font-family: "Bicubik";
             text-align: left;
             color: @green;
             justify-content: flex-start;
@@ -245,7 +243,7 @@ export default {
             position: relative;
 
             &::after {
-              content: '';
+              content: "";
               position: absolute;
               height: 100%;
               width: 0.278vh;

src/views/WindSite/WindSite.vue

@@ -73,6 +73,10 @@ export default {
           icon: "svg-easy-compass",
           path: "/windsite/map",
         },
+        {
+          icon: "svg-easy-compass",
+          path: "/windsite/standalone",
+		},
       ],
     };
   },

src/views/WindSite/pages/Box.vue

@@ -232,12 +232,11 @@
 
             .list {
                 margin-right: 1.481vh;
+                flex: 0 0 auto;
             }
 
             .grid {
                 flex-grow: 1;
-                
-                
             }
         }
     }

src/views/WindSite/pages/DraughtFanList.vue

@@ -1,248 +1,286 @@
 <template>
-    <div class="draught-fan-list">
-        <div class="btn-group-tabs">
-            <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
-        </div>
-        <div class="df-table">
-            <ComTable :data="data"></ComTable>
-        </div>
+  <div class="draught-fan-list">
+    <div class="btn-group-tabs">
+      <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
     </div>
+    <div class="df-table">
+      <ComTable :data="data"></ComTable>
+    </div>
+  </div>
 </template>
 
 <script>
-    import ComTable from '@com/coms/table/table.vue';
-    import BtnGroup2 from '@com/coms/btn/btn-group-double.vue';
-    export default {
-        // 名称
-        name: "DraughtFanList",
-        // 使用组件
-        components: {
-            ComTable,
-            BtnGroup2
-        },
-        // 数据
-        data() {
-            return {
-                btnGroups: [{
-                        icon: "fa fa-fire",
-                        btns: [{
-                            text: "某某风场",
-                            code: "mmfdc1",
-                        }, {
-                            text: "某某风场",
-                            code: "mhsfc",
-                        }, {
-                            text: "某某风场",
-                            code: "mmfdc2",
-                        }, {
-                            text: "某某风场",
-                            code: "mmfdc3",
-                        }, {
-                            text: "某某风场",
-                            code: "mmfdc4",
-                        }]
-                    },
-                    {
-                        icon: "fa fa-fire-extinguisher",
-                        btns: [{
-                            text: "某某风场",
-                            code: "mmgf1",
-                        }, {
-                            text: "某某风场",
-                            code: "mmgf2",
-                        }, {
-                            text: "某某风场",
-                            code: "mmgf3",
-                        }, {
-                            text: "某某风场",
-                            code: "mmgf4",
-                        }]
-                    }
-                ],
-                data: {
-                    column: [{
-                        name: "风机名称",
-                        field: "name",
-                        is_num: false,
-                        is_light: false
-                    },{
-                        name: "冷却风温度",
-                        field: "lqf",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "有功功率",
-                        field: "yggl",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "液压油温度",
-                        field: "yyy",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "Pcspp温度",
-                        field: "pcspp",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "U1绕组温度",
-                        field: "u1",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "U2绕组温度",
-                        field: "u2",
-                        is_num: true,
-                        is_light: true
-                    },{
-                        name: "V1绕组温度",
-                        field: "v1",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "V2绕组温度",
-                        field: "v2",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "W1绕组温度",
-                        field: "w1",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "W2绕组温度",
-                        field: "w2",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "轴承A温度",
-                        field: "zca",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "轴承B温度",
-                        field: "zcb",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "齿轮箱温度",
-                        field: "clx",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "齿轮箱轴1温度",
-                        field: "clx1",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "齿轮箱轴2温度",
-                        field: "clx2",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "机舱温度",
-                        field: "jc",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "滑环温度",
-                        field: "hh",
-                        is_num: true,
-                        is_light: false
-                    },{
-                        name: "环境温度",
-                        field: "hj",
-                        is_num: true,
-                        is_light: false
-                    }],
-                    data: [{
-                        name: "1E01",
-                        lqf: 15.78,
-                        yggl: 15.79,
-                        yyy: 15.79,
-                        pcspp: 15.79,
-                        u1: 15.79,
-                        u2: 15.79,
-                        v1: 15.79,
-                        v2: 15.79,
-                        w1: 15.79,
-                        w2: 15.79,
-                        zca: 15.79,
-                        zcb: 15.79,
-                        clx: 15.79,
-                        clx1: 15.79,
-                        clx2: 15.79,
-                        jc: 15.79,
-                        hh: 15.79,
-                        hj: 15.79,
-                        is_light: false
-                    }]
-                }
-            }
-        },
-        // 函数
-        methods: {},
-        // 生命周期钩子
-        beforeCreate() {
-            // 创建前
-        },
-        created() {
-            // 创建后
-            for (let i = 1; i < 50; i++) {
-                this.data.data.push(JSON.parse(JSON.stringify(this.data.data[0])));
-                if (i == 16) {
-                    this.data.data[i].is_light = true;
-                }
-            }
-        },
-        beforeMount() {
-            // 渲染前
-        },
-        mounted() {
-            // 渲染后
-        },
-        beforeUpdate() {
-            // 数据更新前
+import ComTable from "@com/coms/table/table.vue";
+import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
+export default {
+  // 名称
+  name: "DraughtFanList",
+  // 使用组件
+  components: {
+    ComTable,
+    BtnGroup2,
+  },
+  // 数据
+  data() {
+    return {
+      btnGroups: [
+        {
+          icon: "fa fa-fire",
+          btns: [
+            {
+              text: "某某风场",
+              code: "mmfdc1",
+            },
+            {
+              text: "某某风场",
+              code: "mhsfc",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc2",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc3",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc4",
+            },
+          ],
         },
-        updated() {
-            // 数据更新后
+        {
+          icon: "fa fa-fire-extinguisher",
+          btns: [
+            {
+              text: "某某风场",
+              code: "mmgf1",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf2",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf3",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf4",
+            },
+          ],
         },
+      ],
+      data: {
+        column: [
+          {
+            name: "风机名称",
+            field: "name",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "冷却风温度",
+            field: "lqf",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "有功功率",
+            field: "yggl",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "液压油温度",
+            field: "yyy",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "Pcspp温度",
+            field: "pcspp",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "U1绕组温度",
+            field: "u1",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "U2绕组温度",
+            field: "u2",
+            is_num: true,
+            is_light: true,
+          },
+          {
+            name: "V1绕组温度",
+            field: "v1",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "V2绕组温度",
+            field: "v2",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "W1绕组温度",
+            field: "w1",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "W2绕组温度",
+            field: "w2",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "轴承A温度",
+            field: "zca",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "轴承B温度",
+            field: "zcb",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "齿轮箱温度",
+            field: "clx",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "齿轮箱轴1温度",
+            field: "clx1",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "齿轮箱轴2温度",
+            field: "clx2",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "机舱温度",
+            field: "jc",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "滑环温度",
+            field: "hh",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "环境温度",
+            field: "hj",
+            is_num: true,
+            is_light: false,
+          },
+        ],
+        data: [
+          {
+            name: "1E01",
+            lqf: 15.78,
+            yggl: 15.79,
+            yyy: 15.79,
+            pcspp: 15.79,
+            u1: 15.79,
+            u2: 15.79,
+            v1: 15.79,
+            v2: 15.79,
+            w1: 15.79,
+            w2: 15.79,
+            zca: 15.79,
+            zcb: 15.79,
+            clx: 15.79,
+            clx1: 15.79,
+            clx2: 15.79,
+            jc: 15.79,
+            hh: 15.79,
+            hj: 15.79,
+            is_light: false,
+          },
+        ],
+      },
+    };
+  },
+  // 函数
+  methods: {},
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+    for (let i = 1; i < 50; i++) {
+      this.data.data.push(JSON.parse(JSON.stringify(this.data.data[0])));
+      if (i == 16) {
+        this.data.data[i].is_light = true;
+      }
     }
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
 </script>
 
-<style lang="less" scoped>
-    .draught-fan-list {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        
-        .btn-group-tabs {
-            display: flex;
-            flex-direction: row;
-        
-            .photovoltaic {
-                margin-left: 1.481vh;
-            }
-        }
-        
-        .df-table {
-            border: 0.093vh solid fade(@darkgray, 50%);
-            position: relative;
-            overflow: auto;
-            flex-grow: 1;
-            margin-top: 1.481vh;
-            
-            &:before {
-              content: "";
-              width: 0.37vh;
-              height: 0.37vh;
-              background: @write;
-              position: absolute;
-              left: 0.278vh;
-              top: 0.278vh;
-            }
-        }
+<style lang="less">
+.draught-fan-list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .btn-group-tabs {
+    display: flex;
+    flex-direction: row;
+
+    .photovoltaic {
+      margin-left: 1.481vh;
+    }
+  }
+
+  .df-table {
+    border: 0.093vh solid fade(@darkgray, 50%);
+    position: relative;
+    overflow: auto;
+    flex-grow: 1;
+    margin-top: 1.481vh;
+
+    &:before {
+      content: "";
+      width: 0.37vh;
+      height: 0.37vh;
+      background: @write;
+      position: absolute;
+      left: 0.278vh;
+      top: 0.278vh;
+    }
+
+    tbody {
+      height: calc(100vh - 166px);
     }
+  }
+}
 </style>

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

@@ -11,11 +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">
+        <el-col :span="16" class="pd-r-16" style="text-align: center;">
           <!-- 基本信息 使用 v-if 每次点击重新加载  -->
           <!-- 使用 v-show 首次全部加载 之后隐藏 点击后显示 -->
           <base-info v-show="InfoBtns.activeIndex == 0" />
-          <base-info v-if="InfoBtns.activeIndex == 2" />
+          <!-- <base-info v-if="InfoBtns.activeIndex == 2" /> -->
+          <StandAloneImg class="sai" v-show="InfoBtns.activeIndex != 0" :activeIndex="InfoBtns.activeIndex" @selectSvg="selectSvg"></StandAloneImg>
+          <generator class="saig" v-show="InfoBtns.activeIndex == 1"></generator>
+          <gearbox class="saig" v-show="InfoBtns.activeIndex == 2"></gearbox>
         </el-col>
         <el-col :span="8">
           <warning />
@@ -29,8 +32,11 @@
 import collapseList from "@/components/coms/collapse/collapse-list.vue";
 import BaseInfo from "./Base-Info.vue";
 import Warning from "./Warning.vue";
+import StandAloneImg from "./StandAloneImg.vue";
+import generator from "./pages/generator.vue";
+import gearbox from "./pages/gear-box.vue";
 export default {
-  components: { collapseList, BaseInfo, Warning },
+  components: { collapseList, BaseInfo, Warning, StandAloneImg, generator, gearbox },
   props: {
     id: {
       type: String,
@@ -147,6 +153,9 @@ export default {
     onInfoMenuItemClick(item, index) {
       this.InfoBtns.activeIndex = index;
     },
+    selectSvg: function(index) {
+      this.InfoBtns.activeIndex = index;
+    },
   },
 };
 </script>
@@ -154,6 +163,15 @@ export default {
 <style lang="less" scoped>
 .wind-site-info {
   display: flex;
+
+  .sai {
+    width: 70%;
+  }
+
+  .saig {
+    margin-top: -100px;
+  }
+
   .wind-site-menu {
     flex: 0 0 13.889vh;
     color: @gray;

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

@@ -330,6 +330,10 @@ export default {
       background-color: @red;
       margin: auto;
     }
+
+    tbody {
+      height: 571px;
+    }
   }
 }
 </style>

src/views/WindSite/pages/Info/pages/gear-box.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="gear-box">
+        <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">80.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">99.5</td>
+                <td class="unit gray">℃</td>
+                <td class="text gray">轴承B温度</td>
+                <td class="value green">89.9</td>
+                <td class="unit gray">℃</td>
+              </tr>
+              <tr>
+                <td class="text gray">W1绕组温度</td>
+                <td class="value green">97.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>
+</template>
+
+<script>
+    export default {
+        // 名称
+        name: "gearbox",
+        // 使用组件
+        components: {},
+        // 数据
+        data() {
+            return {}
+        },
+        // 函数
+        methods: {},
+        // 生命周期钩子
+        beforeCreate() {
+            // 创建前
+        },
+        created() {
+            // 创建后
+        },
+        beforeMount() {
+            // 渲染前
+        },
+        mounted() {
+            // 渲染后
+        },
+        beforeUpdate() {
+            // 数据更新前
+        },
+        updated() {
+            // 数据更新后
+        },
+    }
+</script>
+
+<style lang="less" scoped>
+    .gear-box {
+        
+        .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;
+          }
+        }
+    }
+</style>

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

@@ -0,0 +1,109 @@
+<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>
+</template>
+
+<script>
+    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;
+          }
+        }
+    }
+</style>

src/views/WindSite/pages/Map.vue

@@ -1,184 +1,216 @@
 <template>
-    <div class="map-1">
-        <div class="btn-group-tabs">
-            <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
-        </div>
-        <div class="panel-title">
-            <div class="panel-title-name">
-                <span class="svg-icon svg-icon-green svg-icon-sm">
-                    <SvgIcon svgid="svg-wind-site"></SvgIcon>
-                </span>
-                <span class="green">某某某风电场</span>
-                <div class="sub-title-item green">
-                    <span class="sub-title">aaaa</span>
-                    <span class="sub-count">56</span>
-                </div>
-            </div>
-        </div>
-        <div class="panel-body">
-            <div id="map-1" dojotype="dijit.layout.ContentPane" region="center"></div>
+  <div class="map-1">
+    <div class="btn-group-tabs">
+      <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
+    </div>
+    <div class="panel-title">
+      <div class="panel-title-name">
+        <span class="svg-icon svg-icon-green svg-icon-sm">
+          <SvgIcon svgid="svg-wind-site"></SvgIcon>
+        </span>
+        <span class="green">某某某风电场</span>
+        <div class="sub-title-item green">
+          <span class="sub-title">aaaa</span>
+          <span class="sub-count">56</span>
         </div>
+      </div>
+    </div>
+    <div class="panel-body">
+      <div id="map-1" dojotype="dijit.layout.ContentPane" region="center"></div>
     </div>
+  </div>
 </template>
 
 <script>
-    import Map from "@arcgis/core/Map";
-    import MapView from "@arcgis/core/views/MapView";
-    import MapImageLayer from "@arcgis/core/layers/MapImageLayer";
-    import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
-    import SvgIcon from "@com/coms/icon/svg-icon.vue";
-    import '@arcgis/core/assets/esri/themes/light/main.css';
+import Map from "@arcgis/core/Map";
+import Basemap from "@arcgis/core/Basemap";
+import MapView from "@arcgis/core/views/MapView";
+import SceneView from "@arcgis/core/views/SceneView";
+import MapImageLayer from "@arcgis/core/layers/MapImageLayer";
+import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import "@arcgis/core/assets/esri/themes/light/main.css";
 
-    export default {
-        // 名称
-        name: "Map",
-        // 使用组件
-        components: {
-            BtnGroup2,
-            SvgIcon,
-        },
-        // 数据
-        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: {},
-        // 生命周期钩子
-        beforeCreate() {
-            // 创建前
-        },
-        created() {
-            // 创建后
+export default {
+  // 名称
+  name: "Map",
+  // 使用组件
+  components: {
+    BtnGroup2,
+    SvgIcon,
+  },
+  // 数据
+  data() {
+    return {
+      btnGroups: [
+        {
+          icon: "svg-wind-site",
+          btns: [
+            {
+              text: "某某风场",
+              code: "mmfdc1",
+            },
+            {
+              text: "某某风场",
+              code: "mhsfc",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc2",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc3",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc4",
+            },
+          ],
         },
-        beforeMount() {
-            // 渲染前
+        {
+          icon: "svg-photovoltaic",
+          btns: [
+            {
+              text: "某某风场",
+              code: "mmgf1",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf2",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf3",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf4",
+            },
+          ],
         },
-        mounted() {
-            // 渲染后
-            const map = new Map();
-            const layer = new MapImageLayer({
-                url: "http://61.161.152.110:12345/arcgis/rest/services/NX_MAP_14/MapServer"
-            });
-            map.add(layer);
-            const view = new MapView({
-                map: map,
-                center: [106.230909, 38.487193],
-                container: this.$el.querySelector("#map-1")
-            });
-            view.scale = 128000;
+      ],
+    };
+  },
+  // 函数
+  methods: {},
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+    const MapURL = "http://61.161.152.110:12345/arcgis/rest/services/NX_MAP_14/MapServer";
+    const FeaturepURL = "http://61.161.152.110:12345/arcgis/services/NX_MAP_14/MapServer/FeatureServer";
+    const basemap = new Basemap({
+      // 底图
+      baseLayers: [
+        new MapImageLayer({
+          url: MapURL,
+          title: "宁夏地图",
+          spatialReference: 4326,
+        }),
+      ],
+      title: "宁夏地图",
+      spatialReference: 4326,
+    });
+    const map = new Map({
+      // 地图容器
+      basemap: basemap,
+    });
+    const view = new SceneView({
+      // 3D显示图层
+      map: map,
+      center: [106.230909, 38.487193],
+      camera: {
+        position: {
+          x: 106.230909, // lon
+          y: 38.487193, // lat
+          z: 654, // elevation in meters
         },
-        beforeUpdate() {
-            // 数据更新前
-        },
-        updated() {
-            // 数据更新后
-        },
-    }
+        tilt: 65,
+      },
+      container: this.$el.querySelector("#map-1"),
+    });
+    view.scale = 128000;
+    //去掉版权
+    view.ui._removeComponents(["attribution"]);
+
+    // 当地图加载完成
+    view.when(() => {});
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
 </script>
 
 <style lang="less" scoped>
-    @titleHeight: 3.704vh;
+@titleHeight: 3.704vh;
 
-    .map-1 {
-        width: 100%;
-        height: calc(100vh - 90px);
-        display: flex;
-        flex-direction: column;
+.map-1 {
+  width: 100%;
+  height: calc(100vh - 90px);
+  display: flex;
+  flex-direction: column;
 
-        .btn-group-tabs {
-            display: flex;
-            flex-direction: row;
-        }
+  .btn-group-tabs {
+    display: flex;
+    flex-direction: row;
+  }
 
-        .panel-title {
-            width: 100%;
-            height: @titleHeight;
-            line-height: @titleHeight;
-            background-color: fade(@darkgray, 40%);
-            margin-top: 1.481vh;
+  .panel-title {
+    width: 100%;
+    height: @titleHeight;
+    line-height: @titleHeight;
+    background-color: fade(@darkgray, 40%);
+    margin-top: 1.481vh;
 
-            .panel-title-name {
-                font-size: 13px;
-                color: @green;
-                display: flex;
-                align-items: center;
+    .panel-title-name {
+      font-size: 13px;
+      color: @green;
+      display: flex;
+      align-items: center;
 
-                i,
-                span {
-                    margin: 0 0 0 1.481vh;
-                }
-            }
+      i,
+      span {
+        margin: 0 0 0 1.481vh;
+      }
+    }
 
-            .sub-title-item {
-                .sub-title {
-                    font-size: 13px;
-                    margin: 0 0 0 1.481vh;
-                }
+    .sub-title-item {
+      .sub-title {
+        font-size: 13px;
+        margin: 0 0 0 1.481vh;
+      }
 
-                .sub-count {
-                    font-size: 13px;
-                    font-family: "Bicubik";
-                    font-weight: 500;
-                }
-            }
-        }
+      .sub-count {
+        font-size: 13px;
+        font-family: "Bicubik";
+        font-weight: 500;
+      }
+    }
+  }
 
-        .panel-body {
-            flex-grow: 1;
-            background-color: fade(@darkgray, 20%);
-            padding: 0.741vh;
-            overflow: auto;
+  .panel-body {
+    flex-grow: 1;
+    background-color: fade(@darkgray, 20%);
+    padding: 0.741vh;
+    overflow: auto;
 
-            #map-1 {
-                width: 100%;
-                height: 100%;
-            }
-        }
+    #map-1 {
+      width: 100%;
+      height: 100%;
     }
+  }
+}
 </style>

src/views/WindSite/pages/Matrix.vue

@@ -6,9 +6,9 @@
     <div class="panel-title">
       <div class="panel-title-name" v-if="sourceMap">
         <i class="fa fa-send"></i>
-        <span>{{sourceMap.fczbmap.jczbmap.name}}</span>
+        <span>{{ sourceMap.fczbmap.jczbmap.name }}</span>
         <span class="sub-title">接入台数</span>
-        <span class="sub-count">{{sourceMap.fczbmap.jczbmap.yxts}}</span>
+        <span class="sub-count">{{ sourceMap.fczbmap.jczbmap.yxts }}</span>
       </div>
     </div>
     <div class="panel-body">
@@ -44,14 +44,15 @@ export default {
     BtnGroup2,
   },
 
-  data () {
+  data() {
     return {
       timmer: null, // 遮罩开关
-      sourceMap: { // 核心数据
+      sourceMap: {
+        // 核心数据
         fczbmap: {
-          jczbmap: {}
+          jczbmap: {},
         },
-        fjmap: [[]]
+        fjmap: [[]],
       },
       col: 15,
       datas: [
@@ -116,7 +117,7 @@ export default {
   },
 
   methods: {
-    getColor (fjzt) {
+    getColor(fjzt) {
       switch (fjzt) {
         case 0:
           return "green";
@@ -143,16 +144,16 @@ export default {
     },
 
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
         method: "POST",
         subUrl: "matrix/matrixByWpIdPush",
         data: {
-          wpId: "MHS_FDC"
+          wpId: "MHS_FDC",
         },
-        success (res) {
+        success(res) {
           if (res.data) {
             let sourceMap = res.data;
             for (let key in sourceMap) {
@@ -171,17 +172,16 @@ export default {
           } else {
             that.sourceMap = {};
           }
-
         },
       });
     },
 
-    select (res) {
+    select(res) {
       // console.log("res", res);
-    }
+    },
   },
 
-  created () {
+  created() {
     let that = this;
     that.$nextTick(() => {
       that.requestData(false);
@@ -191,11 +191,9 @@ export default {
     });
   },
 
-  mounted () {
-
-  },
+  mounted() {},
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
   },

src/views/WindSite/pages/Tower.vue

@@ -7,7 +7,11 @@
     <Windmill class="windmill-4"></Windmill>
     <Windmill class="windmill-5"></Windmill>
     <WindTower></WindTower>
-    <toolbar-panel class="rose-chart" title="日发电量">
+    <dash-pie-chart class="pie-left" :title="item.title" :value="item.value" height="9.722vh" width="9.722vh" />
+    <dash-pie-chart class="pie-right" :title="item.title" :value="item.value" height="9.722vh" width="9.722vh" />
+    <Panel class="panel-top" title="日资源玫瑰图"></Panel>
+    <Panel class="panel-bottom" title="月资源玫瑰图"></Panel>
+    <toolbar-panel class="rose-chart" title="月资源玫瑰图">
       <template v-slot:tools>
         <div class="tools">
           <div class="tool-block">
@@ -48,8 +52,10 @@
 import Wave from "@com/three/wave.vue";
 import Windmill from "../components/Windmill.vue";
 import ToolbarPanel from "@com/coms/panel/toolbar-panel.vue";
+import Panel from "@com/coms/panel/panel.vue";
 import MultipleLineChart from "@com/chart/line/multiple-line-chart.vue";
 import WindTower from "./Tower/WindTower.vue";
+import DashPieChart from "@com/chart/pie/dash-pie-chart.vue";
 export default {
   // 名称
   name: "Tower",
@@ -60,6 +66,8 @@ export default {
     ToolbarPanel,
     MultipleLineChart,
     WindTower,
+    DashPieChart,
+    Panel,
   },
   // 传入参数
   props: {},
@@ -279,6 +287,10 @@ export default {
           },
         ],
       },
+      item: {
+        title: "风速",
+        value: 12.3,
+      },
     };
   },
   // 函数
@@ -345,6 +357,36 @@ export default {
     width: 2.407vh;
   }
 
+  .pie-left,
+  .pie-right {
+    position: fixed;
+    top: 8vh;
+  }
+
+  .pie-left {
+    left: 5vh;
+  }
+
+  .pie-right {
+    left: 20vh;
+  }
+
+  .panel-top,
+  .panel-bottom {
+    position: fixed;
+    right: 10vh;
+    width: 36vh;
+    height: 24vh;
+  }
+
+  .panel-top {
+    top: 7vh;
+  }
+
+  .panel-bottom {
+    top: 35vh;
+  }
+
   .rose-chart {
     position: absolute;
     left: 0;

src/views/layout/Header.vue

@@ -143,7 +143,7 @@ export default {
       justify-content: center;
       width: 9.259vh;
       height: 100%;
-      color: @gray;
+      color: @font-color;
       cursor: pointer;
       transition: color 0.2s ease-in-out;
 

src/views/layout/Menu.vue

@@ -148,7 +148,28 @@ export default {
         {
           id: "decision",
           text: "决策支持",
-          data: [],
+          data: [
+            {
+              text: "决策支持1",
+              icon: "svg-matrix",
+              path: "/decision1",
+            },
+            {
+              text: "决策支持2",
+              icon: "svg-matrix",
+              path: "/decision2",
+            },
+            {
+              text: "决策支持3",
+              icon: "svg-matrix",
+              path: "/decision3",
+            },
+            {
+              text: "决策支持4",
+              icon: "svg-matrix",
+              path: "/decision4",
+            },
+          ],
         },
         {
           id: "knowledge",