提交

src/assets/styles/dialog.less

@@ -18,6 +18,15 @@
     .el-dialog__body {
       padding: 16px 24px;
     }
+
+    &.hide-header {
+      .el-dialog__header {
+        border: none;
+        .el-dialog__title {
+          display: none;
+        }
+      }
+    }
   }
 }
 

src/assets/styles/font.less

@@ -15,3 +15,15 @@
 .font-cn {
   font-family: "SourceHanSans";
 }
+
+.font-md {
+  font-size: @fontsize;
+}
+
+.font-sm {
+  font-size: @fontsize-s;
+}
+
+.font-lg {
+  font-size: @fontsize-l;
+}

src/assets/styles/form.less

@@ -3,6 +3,10 @@
   display: flex;
   justify-content: space-between;
 
+  &.left {
+    justify-content: flex-start;
+  }
+
   .query-items {
     flex: 0 0 auto;
     display: flex;
@@ -12,6 +16,26 @@
       display: flex;
       margin: 0 1.4815vh;
 
+      .el-input {
+        &.placeholder-left {
+          input {
+            &::placeholder {
+              text-align: left;
+            }
+          }
+        }
+      }
+      .placeholder-left {
+        .el-input {
+          input {
+            height: 33px !important;
+            &::placeholder {
+              text-align: left;
+            }
+          }
+        }
+      }
+
       .lable {
         flex: 0 0 auto;
         margin-right: 1.4815vh;
@@ -395,4 +419,36 @@ input[type="checkbox"] {
       }
     }
   }
-}
+}
+
+.el-checkbox-group {
+  .el-checkbox {
+
+    &.is-checked {
+      .el-checkbox__input  {
+        &.is-checked {
+          .el-checkbox__inner {
+            background-color: @green;
+            border-color: @green;
+          }
+        }
+      }
+    
+      .el-checkbox__label {
+        color: @green;
+      }
+    }
+
+    .el-checkbox__input  {
+      .el-checkbox__inner {
+        background-color: transparent;
+        border-color: #606769;
+      }
+    }
+
+    .el-checkbox__label {
+      color: @gray-l;
+    }
+  }
+}
+

src/assets/styles/svg.less

@@ -56,6 +56,13 @@
         fill: @gray;
       }
     }
+    &.svg-shadow {
+      svg {
+        use {
+          filter: drop-shadow(0 0 6px @gray);
+        }
+      }
+    }
   }
   &.svg-icon-gray-l {
     svg {
@@ -63,6 +70,13 @@
         fill: @gray-l;
       }
     }
+    &.svg-shadow {
+      svg {
+        use {
+          filter: drop-shadow(0 0 6px @gray-l);
+        }
+      }
+    }
   }
   &.svg-icon-green {
     svg {
@@ -70,6 +84,13 @@
         fill: @green;
       }
     }
+    &.svg-shadow {
+      svg {
+        use {
+          filter: drop-shadow(0 0 6px @green);
+        }
+      }
+    }
   }
   &.svg-icon-red {
     svg {
@@ -77,6 +98,13 @@
         fill: @red;
       }
     }
+    &.svg-shadow {
+      svg {
+        use {
+          filter: drop-shadow(0 0 6px @red);
+        }
+      }
+    }
   }
   &.svg-icon-blue {
     svg {
@@ -84,6 +112,13 @@
         fill: @darkBlue;
       }
     }
+    &.svg-shadow {
+      svg {
+        use {
+          filter: drop-shadow(0 0 6px @darkBlue);
+        }
+      }
+    }
   }
   &.svg-icon-darkblue {
     svg {
@@ -91,6 +126,14 @@
         fill: @darkBlue2;
       }
     }
+
+    &.svg-shadow {
+      svg {
+        use {
+          filter: drop-shadow(0 0 6px @darkBlue2);
+        }
+      }
+    }
   }
 
   &.svg-icon-yellow {
@@ -99,6 +142,13 @@
         fill: @yellow;
       }
     }
+    &.svg-shadow {
+      svg {
+        use {
+          filter: drop-shadow(0 0 6px @yellow);
+        }
+      }
+    }
   }
 
   &.svg-icon-orange {
@@ -107,6 +157,14 @@
         fill: @orange;
       }
     }
+
+    &.svg-shadow {
+      svg {
+        use {
+          filter: drop-shadow(0 0 6px @orange);
+        }
+      }
+    }
   }
 
   &.svg-icon-purple {
@@ -115,6 +173,14 @@
         fill: @purple;
       }
     }
+
+    &.svg-shadow {
+      svg {
+        use {
+          filter: drop-shadow(0 0 6px @purple);
+        }
+      }
+    }
   }
 
   &.svg-icon-write {
@@ -123,6 +189,14 @@
         fill: @write;
       }
     }
+
+    &.svg-shadow {
+      svg {
+        use {
+          filter: drop-shadow(0 0 6px @write);
+        }
+      }
+    }
   }
 
   &.svg-icon-black {
@@ -131,6 +205,14 @@
         fill: @black;
       }
     }
+
+    &.svg-shadow {
+      svg {
+        use {
+          filter: drop-shadow(0 0 6px @black);
+        }
+      }
+    }
   }
   &.svg-icon-pink {
     svg {
@@ -138,13 +220,14 @@
         fill: @pink;
       }
     }
-  }
 
-  &.svg-icon-red {
-    svg {
-      use {
-        fill: @red;
+    &.svg-shadow {
+      svg {
+        use {
+          filter: drop-shadow(0 0 6px @pink);
+        }
       }
     }
   }
+
 }

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

@@ -22,17 +22,19 @@ export default {
     // 传入数据
     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],
-        ],
+      default: () => {
+        return {
+          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],
+          ],
+        };
       },
     },
   },
@@ -80,6 +82,7 @@ export default {
         tooltip: {
           trigger: "item",
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
             fontSize: 14,

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

@@ -180,6 +180,7 @@ export default {
         tooltip: {
           trigger: "item",
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
             fontSize: 14,

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

@@ -60,6 +60,7 @@ export default {
     return {
       id: "",
       chart: null,
+      firstAnimation: true,
     };
   },
   computed: {
@@ -121,6 +122,7 @@ export default {
           {
             type: "bar",
             barWidth: 6,
+            animation: this.firstAnimation,
             // legendHoverLink: false,
             // silent: true,
             itemStyle: {
@@ -144,8 +146,8 @@ export default {
                     ],
                   };
                 },
-                shadowBlur: 3,
-                shadowColor: "rgba(255, 255, 255, 0.70)",
+                shadowBlur: 10,
+                shadowColor: "rgba(255, 255, 255, 0.30)",
               },
             },
             label: {
@@ -157,15 +159,7 @@ export default {
                 },
                 textStyle: {
                   color: "#7a8385",
-                  fontSize: 14,
-                },
-                rich: {
-                  c1: {
-                    color: partten.getColor(currColor),
-                  },
-                  c2: {
-                    color: partten.getColor(currColor),
-                  },
+                  fontSize: 12,
                 },
               },
             },
@@ -177,6 +171,7 @@ export default {
           {
             type: "pictorialBar",
             symbolPosition: "end",
+            animation: this.firstAnimation,
             data: [value],
             symbol: "triangle",
             symbolOffset: [0, -10],
@@ -188,8 +183,8 @@ export default {
                 color: function(params) {
                   return partten.getColor(currColor);
                 },
-                shadowBlur: 2,
-                shadowColor: "rgba(255, 255, 255, 0.80)",
+                // shadowBlur: 2,
+                // shadowColor: "rgba(255, 255, 255, 0.80)",
               },
             },
           },
@@ -201,13 +196,14 @@ export default {
                 color: "#20314f",
               },
             },
+            animation: this.firstAnimation,
             symbolRepeat: "fixed",
-            symbolMargin: 6,
+            symbolMargin: 4,
             symbol: "rect",
             symbolClip: true,
-            symbolSize: [1, 7],
+            symbolSize: [1, 8],
             symbolPosition: "start",
-            symbolOffset: [7, -1],
+            symbolOffset: [8, -1],
             symbolBoundingData: value.total,
             symbolRotate: -15,
             data: [value],
@@ -217,6 +213,7 @@ export default {
           // 外边框
           {
             type: "pictorialBar",
+            animation: this.firstAnimation,
             symbol: "rect",
             symbolBoundingData: value.total,
             itemStyle: {
@@ -234,11 +231,12 @@ export default {
                     color: "#ffffff",
                     fontSize: 14,
                     lineHeight: 20,
+                    fontFamily: "Bicubik",
                   },
                   gm: {
                     backgroundColor: partten.getColor(currColor),
-                    width: 8,
-                    height: 8,
+                    width: 4,
+                    height: 4,
                     lineHeight: 20,
                     verticalAlign: "middle",
                     borderRadius: [50, 50, 50, 50],
@@ -254,6 +252,7 @@ export default {
           // 外框
           {
             type: "bar",
+            animation: this.firstAnimation,
             name: "外框",
             barGap: "-120%", // 设置外框粗细
             data: [
@@ -275,7 +274,7 @@ export default {
                 },
               },
             ],
-            barWidth: 8,
+            barWidth: 9,
           },
         ],
       };
@@ -301,6 +300,7 @@ export default {
       this.list.forEach((value, index) => {
         this.initChart(value, index);
       });
+      this.firstAnimation = false;
     });
   },
   updated() {

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

@@ -152,11 +152,16 @@ export default {
       type: Array,
       default: () => ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
     },
+    showAnimation: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
       id: "",
       chart: null,
+      firstAnimation: true,
     };
   },
   computed: {
@@ -221,6 +226,7 @@ export default {
           result.push({
             name: value.title,
             type: "bar",
+            animation: this.firstAnimation && this.showAnimation,
             yAxisIndex: value.yAxisIndex,
             data: value.value.map((t) => {
               return t.value;
@@ -241,6 +247,7 @@ export default {
         tooltip: {
           trigger: "axis",
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
             fontSize: 12,
@@ -301,6 +308,7 @@ export default {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
       this.initChart();
+      this.firstAnimation = false;
     });
   },
   updated() {

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

@@ -300,6 +300,7 @@ export default {
         tooltip: {
           trigger: "axis",
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
             fontSize: 14,

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

@@ -56,10 +56,11 @@ export default {
           {
             text: this.text,
             x: "45%",
-            y: "35%",
+            y: "32%",
             textAlign: "center",
             textStyle: {
               fontSize: 14,
+              fontFamily: "Bicubik",
               fontWeight: "600",
               color: partten.getColor(this.colors),
               textAlign: "center",

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

@@ -82,6 +82,7 @@ export default {
         tooltip: {
           trigger: "axis",
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
             fontSize: 14,

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

@@ -102,6 +102,7 @@ export default {
         tooltip: {
           trigger: "axis",
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),

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

@@ -85,6 +85,7 @@ export default {
         tooltip: {
           trigger: "axis",
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
             fontSize: 14,

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

@@ -196,6 +196,7 @@ export default {
         tooltip: {
           trigger: "axis",
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),

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

@@ -256,9 +256,12 @@ export default {
           zlevel: index,
           lineStyle: {
             normal: {
-              color: this.color[index],
+              color: index != 0 ? partten.getColor("gray") : this.color[index],
               width: 1,
             },
+            emphasis: {
+              color: this.color[index],
+            },
           },
           areaStyle: {
             normal: {
@@ -281,7 +284,8 @@ export default {
                       ],
                       false
                     )
-                  : "transparent",
+                  : 
+                  "transparent",
               shadowColor: this.hexToRgba(this.color[index], 0.1),
               shadowBlur: 10,
             },
@@ -368,6 +372,7 @@ export default {
             type: "shadow",
           },
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             fontSize: util.vh(16),
           },

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

@@ -0,0 +1,316 @@
+<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-y-line-chart",
+    componentName: "multiple-y-line-chart",
+    props: {
+        width: {
+            type: String,
+            default: "100%",
+        },
+        height: {
+            type: String,
+            default: "13.889vh",
+        },
+        // 数据
+        list: {
+            type: Array,
+            default: () => [
+                {
+                    title: "机舱震动x方向",
+                    yAxis: {
+                      min: -0.01,
+                      max: 0,
+                      unit: "",
+                      position: "left",
+                    },
+                    value: [
+                        {
+                            text: "-0.003",
+                            value: -0.003,
+                        },
+                        {
+                            text: "-0.002",
+                            value: -0.002,
+                        },
+                        {
+                            text: "-0.003",
+                            value: -0.006,
+                        },
+                    ],
+                },
+                {
+                    title: "机舱震动y方向",
+                    yAxis: {
+                      min: -0.01,
+                      max: 0,
+                      unit: "",
+                      position: "right",
+                    },
+                    value: [
+                        {
+                            text: "-0.01",
+                            value: -0.01,
+                        },
+                        {
+                            text: "-0.005",
+                            value: -0.005,
+                        },
+                        {
+                            text: "-0.008",
+                            value: -0.008,
+                        },
+                    ],
+                },
+                {
+                    title: "机舱震动最大偏移值",
+                    yAxis: {
+                      min: 0,
+                      max: 1,
+                      unit: "",
+                      position: "left",
+                    },
+                    value: [
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "0.05",
+                            value: 0.05,
+                        },
+                        {
+                            text: "0.5",
+                            value: 0.5,
+                        },
+                    ],
+                },
+                {
+                    title: "风速1",
+                    yAxis: {
+                      min: 0,
+                      max: 10,
+                      unit: "",
+                      position: "right",
+                    },
+                    value: [
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "5",
+                            value: 5,
+                        },
+                        {
+                            text: "3",
+                            value: 1,
+                        },
+                    ],
+                },
+                {
+                    title: "风速2",
+                    yAxis: {
+                      min: 0,
+                      max: 10,
+                      unit: "",
+                      position: "left",
+                    },
+                    value: [
+                        {
+                            text: "1",
+                            value: 1,
+                        },
+                        {
+                            text: "2",
+                            value: 2,
+                        },
+                        {
+                            text: "3",
+                            value: 1,
+                        },
+                    ],
+                },
+            ],
+        },
+        showLegend: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            id: "",
+            chart: null,
+            color: ["#323E6F", "#1DA0D7", "#05BB4C", "#EDB32F", "#DB5520"],
+        };
+    },
+    computed: {
+        legend() {
+            return this.list.map((t) => {
+                return t.title;
+            });
+        },
+        xdata() {
+            return this.list[0].value.map((t) => {
+                return t.text;
+            });
+        },
+        yAxis() {
+            let result = [];
+            let p = {left: 0, right: 0};
+            this.list.forEach((item, index) => {
+                result.push({
+                    type: "value",
+                    name: `${item.title}${item.yAxis.unit}`,
+                    nameLocation: p[item.yAxis.position] % 2 == 0 ? "end" : "start",
+                    min: item.yAxis.min,
+                    max: item.yAxis.max,
+                    position: item.yAxis.position,
+                    offset: p[item.yAxis.position] * 60,
+                    axisLabel: {
+                        formatter: "{value}",
+                        fontSize: util.vh(14),
+                    },
+                    //分格线
+                    splitLine: {
+                        lineStyle: {
+                            color: partten.getColor("gray"),
+                            type: "dashed",
+                        },
+                    },
+                    axisLine: {
+                      show: true,
+                    },
+                    axisTick: {
+                      show: true
+                    }
+                });
+                p[item.yAxis.position]++;
+            });
+
+            return result;
+        },
+        series() {
+            let result = [];
+
+            this.list.forEach((value, index) => {
+                result.push({
+                    name: value.title,
+                    type: "line",
+                    smooth: true,
+                    zlevel: index,
+                    lineStyle: {
+                        normal: {
+                            color: this.color[index],
+                            width: 1,
+                        },
+                    },
+                    yAxisIndex: index,
+                    data: value.value.map((t) => {
+                        return t.value;
+                    }),
+                });
+            });
+
+            return result;
+        },
+    },
+    methods: {
+        initChart() {
+            const chart = echarts.init(this.$el);
+
+            let option = {
+                color: this.color,
+                tooltip: {
+                    trigger: "axis",
+                    backgroundColor: partten.getColor("gray"),
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: util.vh(16),
+                    },
+                },
+                legend: {
+                    show: this.showLegend,
+                    data: this.legend,
+                    right: 56,
+                    icon: "circle",
+                    itemWidth: 6,
+                    inactiveColor: partten.getColor("gray"),
+                    textStyle: {
+                        color: partten.getColor("grayl"),
+                        fontSize: 12,
+                    },
+                },
+                grid: {
+                    top: util.vh(80),
+                    left: util.vh(80),
+                    right: util.vh(80),
+                    bottom: util.vh(24),
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        axisLabel: {
+                            formatter: "{value}",
+                            fontSize: util.vh(14),
+                            textStyle: {
+                                color: partten.getColor("gray"),
+                            },
+                        },
+                        data: this.xdata,
+                    },
+                ],
+                yAxis: this.yAxis,
+                series: this.series,
+            };
+            console.log(option)
+            chart.clear();
+            chart.setOption(option);
+
+            this.resize = function() {
+                chart.resize();
+            };
+
+            window.addEventListener("resize", this.resize);
+        },
+    },
+    created() {
+        this.id = "pie-chart-" + util.newGUID();
+    },
+    mounted() {
+        this.$nextTick(() => {
+            setTimeout(() => {
+                this.$el.style.width = this.width;
+                this.$el.style.height = this.height;
+                this.initChart();
+            }, 1000);
+        });
+    },
+    updated() {
+        this.$nextTick(() => {
+            this.initChart();
+        });
+    },
+    unmounted() {
+        window.removeEventListener("resize", this.resize);
+    },
+};
+</script>
+
+<style lang="less">
+.chart {
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+}
+</style>

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

@@ -201,6 +201,7 @@ export default {
         tooltip: {
           trigger: "axis",
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),

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

@@ -265,6 +265,7 @@ export default {
         tooltip: {
           trigger: "axis",
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),

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

@@ -14,7 +14,7 @@ export default {
     // 宽度 默认9.722vh
     width: {
       type: String,
-      default: "70%",
+      default: "85%",
     },
     // 高度 默认9.722vh
     height: {
@@ -72,7 +72,7 @@ export default {
           textAlign: "center",
           textStyle: {
             color: partten.getColor("gray"),
-            fontSize: util.vh(14),
+            fontSize: util.vh(12),
             fontWeight: "normal",
           },
         },
@@ -102,7 +102,7 @@ export default {
                   ],
                   [1, "transparent"],
                 ],
-                width: util.vh(16),
+                width: util.vh(12),
               },
             },
             axisLabel: {
@@ -162,7 +162,7 @@ export default {
               show: true,
               length: "35%",
               radius: "20%",
-              width: util.vh(2), //指针粗细
+              width: 1, //指针粗细
               offsetCenter: ["0%", "-40%"],
             },
             animationDuration: 0,
@@ -196,7 +196,7 @@ export default {
               distance: 6,
               splitNumber: 2,
               lineStyle: {
-                color: "#fff", //用颜色渐变函数不起作用
+                color: partten.getColor("green"), //用颜色渐变函数不起作用
                 width: util.vh(1),
               },
               length: util.vh(4),
@@ -232,7 +232,7 @@ export default {
                       return params.value;
                     },
                     color: partten.getColor(this.color),
-                    fontSize: util.vh(16),
+                    fontSize: util.vh(12),
                     fontWeight: "bold",
                     position: "center",
                     show: true,
@@ -244,6 +244,50 @@ export default {
               },
             ],
           },
+          {
+            name: "内部阴影",
+            type: "gauge",
+            radius: "90%",
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  // [
+                  //   1,
+                  //   new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  //     {
+                  //       offset: 0,
+                  //       color: "rgba(45,230,150,0)",
+                  //     },
+                  //     {
+                  //       offset: 0.5,
+                  //       color: "rgba(45,230,150,0.2)",
+                  //     },
+                  //     {
+                  //       offset: 1,
+                  //       color: "rgba(45,230,150,1)",
+                  //     },
+                  //   ]),
+                  // ],
+                  [1, "rgba(45,230,150,0.1)"],
+                  // [1, "rgba(45,230,150,0)"],
+                ],
+                width: 3,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+          },
           // 光环
           {
             type: "pie",

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

@@ -95,6 +95,7 @@ export default {
         tooltip: {
           trigger: "item",
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),

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

@@ -61,6 +61,7 @@ export default {
         tooltip: {
           trigger: "item",
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),

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

@@ -109,6 +109,7 @@ export default {
         tooltip: {
           trigger: "item",
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),

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

@@ -1,6 +1,6 @@
 <template>
   <div class="card-1">
-    <div class="card-icon svg-icon" :class="'svg-icon-' + color">
+    <div class="card-icon svg-icon svg-shadow" :class="'svg-icon-' + color">
       <svg-icon :svgid="shieldIcon" />
     </div>
     <div class="card-info">
@@ -65,33 +65,36 @@ export default {
 <style lang="less">
 .card-1 {
   display: flex;
+  align-items: center;
 
   .card-icon svg {
-    width: 2.963vh;
-    height: 2.963vh;
+    width: 36px;
+    height: 36px;
   }
 
   .card-info {
     flex: auto;
     align-self: center;
-    margin-left: 1.481vh;
+    margin-left: 8px;
 
     .card-title {
       width: 100%;
-      font-size: @fontsize-s;
+      font-size: 12px;
       color: @font-color;
     }
 
     .card-value {
-      font-size: @fontsize-s;
-      font-weight: 600;
+      margin-top: 4px;
+      font-size: 16px;
 
       .value-text {
         margin-right: 0.741vh;
+        font-family: @font-family-num;
       }
+
       .increase-icon {
-        width: 0.926v;
-        height: 0.926vh;
+        width: 1.1111vh;
+        height: 1.1111vh;
       }
     }
 

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

@@ -72,7 +72,7 @@ export default {
     text-align: center;
     width: 100%;
     margin-top: 1.481vh;
-    font-size: @fontsize-s;
+    font-size: 12px;
   }
 
   .card-info {
@@ -88,6 +88,7 @@ export default {
 
       .value-text {
         margin-right: 0.741vh;
+        font-family: @font-family-num;
       }
     }
 

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

@@ -49,6 +49,7 @@ export default {
     margin-left: 1.481vh;
 
     .card-value {
+      font-family: @font-family-num;
       font-size: @fontsize-l;
       font-weight: 600;
     }

src/components/coms/list/list.vue

@@ -36,7 +36,31 @@ export default {
                     color: "blue"
                 }
              */
-    list: Array,
+    list: {
+      type: Array,
+      default: () => [
+        {
+          text: "1#逆变室",
+          color: "blue",
+        },
+        {
+          text: "1#逆变室",
+          color: "blue",
+        },
+        {
+          text: "1#逆变室",
+          color: "red",
+        },
+        {
+          text: "1#逆变室",
+          color: "green",
+        },
+        {
+          text: "1#逆变室",
+          color: "purple",
+        },
+      ],
+    },
   },
   // 自定义事件
   emits: {
@@ -124,7 +148,7 @@ export default {
 
       &.active {
         color: @write;
-        background-color: fade(@blue, 60%);
+        background-color: fade(@purple, 60%);
       }
 
       &::after {

src/components/coms/panel/panel.vue

@@ -47,15 +47,15 @@ export default {
 <style lang="less">
 .com-panel {
   &.line {
-    border-left: 0.185vh solid rgba(255, 255, 255, 50%);
+    border-left: 1px solid @gray;
   }
 
   &.line:before {
     content: " ";
-    width: 0.37vh;
-    height: 0.37vh;
+    width: 3px;
+    height: 3px;
     float: left;
-    background: #fff;
+    background: #c9c9c9;
     margin: 0.185vh 0.556vh 0vh 0.185vh;
   }
 

src/components/coms/panel/panel3.vue

@@ -18,7 +18,7 @@ export default {
 .com-panel-3 {
   position: relative;
   background: rgba(255, 255, 255, 0.1);
-  padding: 0.741vh;
+  padding: 1.4815vh;
   display: inline-block;
   border: 0.093vh solid #536268;
 

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

@@ -2,27 +2,34 @@
   <table class="com-table">
     <thead>
       <tr>
-        <th @click="onSort(0)">排序</th>
-        <th @click="onSort(1)"></th>
-        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" @click="onSort(col)">{{ col.name }}</th>
+        <th @click="onSort(0)" style="width:50px">排序</th>
+        <th @click="onSort(1)" style="width:50px"></th>
+        <th v-for="(col, index) of data.column" :key="index" :style="{ width: col.width }" :class="{ light: col.is_light }" @click="onSort(col)">{{ col.name }}</th>
       </tr>
     </thead>
     <el-scrollbar>
       <tbody :style="{ height: height }">
         <tr v-for="(row, index) of tableData" :key="index">
-          <td :class="{ light: hoverRow == row || hoverCol == 0, num: true }" @mouseenter="hover(row, col)" @mouseleave="leave()">
-            {{ index + 1 }}
+          <td v-if="allowIndex == true" style="width:50px" :class="{ light: hoverRow == row || hoverCol == 0, num: true }" @mouseenter="hover(row, col)" @mouseleave="leave()">
+            {{ startRow + index + 1 }}
           </td>
-          <td :class="{ light: hoverRow == row || hoverCol == 1 }" @mouseenter="hover(row, col)" @mouseleave="leave()">
+          <td :class="{ light: hoverRow == row || hoverCol == 1 }" style="width:50px" @mouseenter="hover(row, col)" @mouseleave="leave()">
             <input class="check" type="CheckBox" :key="index" :id="'check-' + index" :checked="row.checked ? row.checked : false" @change="onCheck(row)" />
           </td>
-          <td v-for="(col, i) of data.column" :key="i" :class="{ light: hoverRow == row || hoverCol == col + 2, num: col.is_num, 'always-light': col.is_light || row.is_light }" @mouseenter="hover(row, col)" @mouseleave="leave()">
+          <td
+            v-for="(col, i) of data.column"
+            :key="i"
+            :style="{ width: col.width }"
+            :class="{ light: hoverRow == row || hoverCol == col + 2, num: col.is_num, 'always-light': col.is_light || row.is_light }"
+            @mouseenter="hover(row, col)"
+            @mouseleave="leave()"
+          >
             <component :is="col.type ? col.type : 'div'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)"> </component>
           </td>
         </tr>
       </tbody>
-      <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total"> </el-pagination>
     </el-scrollbar>
+    <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total"> </el-pagination>
   </table>
 </template>
 
@@ -79,6 +86,10 @@ export default {
       type: String,
       default: "",
     },
+    allowIndex: {
+      type: Boolean,
+      default: true,
+    },
   },
   // 自定义事件
   emits: {

src/components/coms/table/table.vue

@@ -2,7 +2,7 @@
   <table class="com-table">
     <thead>
       <tr>
-        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" @click="onSort(col)">
+        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" :style="{ width: col.width }" @click="onSort(col)">
           {{ col.name }}
         </th>
       </tr>

src/components/coms/tabs/tab.vue

@@ -52,7 +52,7 @@ export default {
   display: flex;
   color: @font-color;
   margin-bottom: 1.111vh;
-  font-size: @fontsize;
+  font-size: 12px;
   .tab-item {
     padding: 0.37vh 1.852vh;
     cursor: pointer;

src/router/index.js

@@ -17,6 +17,11 @@ const routes = [
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
   },
   {
+    path: '/monitor/demo',
+    name: 'Demo',
+    component: () => import(/* webpackChunkName: "Demo" */ '../views/Demo.vue'),
+  },
+  {
     path: '/monitor/status', // 状态监视
     name: 'Status',
     component: () => import(/* webpackChunkName: "status" */ '../views/Status/Status.vue'),

src/views/Demo.vue

@@ -0,0 +1,828 @@
+<template>
+  <h1>组件示例</h1>
+  <tab :data="tabData" @select="select" />
+  <!-- 图表 -->
+  <el-scrollbar v-if="currTab == 1" style="height:85%;">
+    <h2>图表</h2>
+
+    <h2>07-07新增</h2>
+    <h3>柱状图：multiple-y-line-chart</h3>
+    <multiple-y-line-chart :height="'300px'" />
+
+
+    <h2>old</h2>
+
+    <h3>柱状图：horizontal-bar-chart</h3>
+    <horizontal-bar-chart :height="'300px'" />
+
+    <h3>柱状图：horizontal-bar-chart</h3>
+    <hover-bar-chart :list="HoverBarChart" :height="'200px'" />
+
+    <h3>柱状图：list-bar-chart-2</h3>
+    <list-bar-chart-2 :list="ListBarChart" :height="'200px'" />
+
+    <h3>柱状图：multiple-bar-chart</h3>
+    <multiple-bar-chart :list="MultipleBarChart" :height="'200px'" />
+
+    <h3>柱状图：multiple-hover-bar-chart</h3>
+    <multiple-hover-bar-chart :height="'200px'" />
+
+    <h3>柱状图：percent-bar</h3>
+    <percent-bar />
+
+    <h3>柱状图：single-bar-chart</h3>
+    <single-bar-chart />
+
+    <h3>柱状图：thermometer</h3>
+    <thermometer />
+
+    <h3>组合：bar-line-chart</h3>
+    <bar-line-chart :height="'300px'" />
+
+    <h3>组合：bar-line-chart</h3>
+    <vertival-bar-line-chart :height="'300px'" />
+
+    <h3>折线图：double-line-chart</h3>
+    <double-line-chart :height="'200px'" />
+
+    <h3>折线图：multiple-line-chart</h3>
+    <multiple-line-chart :height="'200px'" />
+
+    <h3>折线图：multiple-line-chart</h3>
+    <normal-line-chart />
+
+    <h3>折线图：simple-line-chart</h3>
+    <simple-line-chart />
+
+    <h3>折线图：table-line-chart</h3>
+    <table-line-chart />
+
+    <h3>饼图：dash-pie-chart</h3>
+    <div style="width: 350px">
+      <dash-pie-chart />
+    </div>
+
+    <h3>饼图：dual-pie-chart</h3>
+    <div style="width: 350px">
+      <dual-pie-chart />
+    </div>
+
+    <h3>饼图：normal-pie-chart</h3>
+    <div style="width: 350px">
+      <normal-pie-chart />
+    </div>
+
+    <h3>饼图：percent-pie-chart</h3>
+    <div style="width: 350px">
+      <percent-pie-chart />
+    </div>
+
+    <h3>饼图：direction-radar-chart</h3>
+    <div style="height: 500px">
+      <direction-radar-chart :height="'500px'" />
+    </div>
+
+    <h3>饼图：normal-radar-chart</h3>
+    <div style="height: 500px">
+      <normal-radar-chart :height="'500px'" />
+    </div>
+
+    <h3>饼图：normal-radar-chart</h3>
+    <div style="height: 500px">
+      <radar-chart :height="'500px'" />
+    </div>
+  </el-scrollbar>
+  <!-- 组件 -->
+  <el-scrollbar v-if="currTab == 2" style="height:85%;">
+    <h3>panel</h3>
+    <panel :title="'title 标题'">
+      带标题title
+    </panel>
+    <br />
+    <panel>
+      无标题title
+    </panel>
+
+    <h3>panel-2</h3>
+    <panel-2 :title="'panel -2'">
+      panel 2
+    </panel-2>
+
+    <h3>panel-3</h3>
+    <panel-3>
+      panel-3
+    </panel-3>
+
+    <h3>toolbar-panel</h3>
+    <toolbar-panel title="toolbar-panel">
+      <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)'" :color="barColor" />
+    </toolbar-panel>
+
+    <h3>btn-group-double</h3>
+    <btn-group-double :btnGroups="btnGroups" @select="btnGroupDoubleSelect" />
+
+    <h3>card-1</h3>
+    <card-1 />
+
+    <h3>percent-card</h3>
+    <percent-card :value="25" :title="'标题'" />
+
+    <h3>percent-card-2</h3>
+    <percent-card-2 />
+
+    <h3>collapse-list</h3>
+    <div style="width:200px">
+      <collapse-list />
+    </div>
+
+    <h3>list</h3>
+    <div style="width:200px">
+      <list />
+    </div>
+  </el-scrollbar>
+
+  <el-scrollbar v-if="currTab == 3" style="height:85%;">
+    <h3>table</h3>
+    <Table :data="tableData" :height="'200px'" :canScroll="true" :pageSize="40" :showHover="false" @onPagging="tableonPagging" />
+    <h3>table</h3>
+    <check-table :data="tableData" :height="'200px'" :canScroll="true" :pageSize="40" :showHover="false" @onPagging="tableonPagging" @check="CheckTableonCheck" />
+  </el-scrollbar>
+
+  <el-scrollbar v-if="currTab == 4" style="height:85%;">
+    <i class="svg-icon svg-icon-sm mg-r-16">
+      <svg-icon :svgid="'svg-wind-site'" />
+    </i>
+    <i class="svg-icon svg-icon-green mg-r-16">
+      <svg-icon :svgid="'svg-wind-site'" />
+    </i>
+    <i class="svg-icon svg-icon-lg svg-icon-red mg-r-16">
+      <svg-icon :svgid="'svg-wind-site'" />
+    </i>
+  </el-scrollbar>
+</template>
+
+<script>
+import horizontalBarChart from "../components/chart/bar/horizontal-bar-chart.vue";
+import HoverBarChart from "../components/chart/bar/hover-bar-chart.vue";
+import ListBarChart2 from "../components/chart/bar/list-bar-chart2.vue";
+import MultipleBarChart from "../components/chart/bar/multiple-bar-chart.vue";
+import MultipleHoverBarChart from "../components/chart/bar/multiple-hover-bar-chart.vue";
+import PercentBar from "../components/chart/bar/percent-bar.vue";
+import SingleBarChart from "../components/chart/bar/single-bar-chart.vue";
+import Thermometer from "../components/chart/bar/thermometer.vue";
+import BarLineChart from "../components/chart/combination/bar-line-chart.vue";
+import VertivalBarLineChart from "../components/chart/combination/vertival-bar-line-chart.vue";
+import DoubleLineChart from "../components/chart/line/double-line-chart.vue";
+import MultipleLineChart from "../components/chart/line/multiple-line-chart.vue";
+import MultipleYLineChart from "../components/chart/line/multiple-y-line-chart.vue";
+import NormalLineChart from "../components/chart/line/normal-line-chart.vue";
+import SimpleLineChart from "../components/chart/line/simple-line-chart.vue";
+import TableLineChart from "../components/chart/line/table-line-chart.vue";
+import DashPieChart from "../components/chart/pie/dash-pie-chart.vue";
+import DualPieChart from "../components/chart/pie/dual-pie-chart.vue";
+import NormalPieChart from "../components/chart/pie/normal-pie-chart.vue";
+import PercentPieChart from "../components/chart/pie/percent-pie-chart.vue";
+import DirectionRadarChart from "../components/chart/radar/direction-radar-chart.vue";
+import NormalRadarChart from "../components/chart/radar/normal-radar-chart.vue";
+import RadarChart from "../components/chart/radar/radar-chart.vue";
+import BtnGroupDouble from "../components/coms/btn/btn-group-double.vue";
+import Card1 from "../components/coms/cards/card-1.vue";
+import PercentCard2 from "../components/coms/cards/percent-card-2.vue";
+import PercentCard from "../components/coms/cards/percent-card.vue";
+import CollapseList from "../components/coms/collapse/collapse-list.vue";
+import SvgIcon from "../components/coms/icon/svg-icon.vue";
+import List from "../components/coms/list/list.vue";
+import Panel from "../components/coms/panel/panel.vue";
+import Panel2 from "../components/coms/panel/panel2.vue";
+import Panel3 from "../components/coms/panel/panel3.vue";
+import ToolbarPanel from "../components/coms/panel/toolbar-panel.vue";
+import CheckTable from "../components/coms/table/check-table.vue";
+import Table from "../components/coms/table/table.vue";
+import Tab from "../components/coms/tabs/tab.vue";
+
+export default {
+  components: {
+    horizontalBarChart,
+    HoverBarChart,
+    ListBarChart2,
+    MultipleBarChart,
+    MultipleHoverBarChart,
+    PercentBar,
+    SingleBarChart,
+    Thermometer,
+    BarLineChart,
+    VertivalBarLineChart,
+    DoubleLineChart,
+    MultipleLineChart,
+    NormalLineChart,
+    SimpleLineChart,
+    TableLineChart,
+    DashPieChart,
+    DualPieChart,
+    NormalPieChart,
+    PercentPieChart,
+    DirectionRadarChart,
+    NormalRadarChart,
+    RadarChart,
+    Tab,
+    BtnGroupDouble,
+    Card1,
+    PercentCard,
+    PercentCard2,
+    CollapseList,
+    List,
+    Panel,
+    Panel2,
+    Panel3,
+    ToolbarPanel,
+    Table,
+    CheckTable,
+    SvgIcon,
+    MultipleYLineChart,
+  },
+  methods: {
+    select(data) {
+      // console.log(data);
+      this.currTab = parseInt(data.id);
+    },
+    btnGroupDoubleSelect(param) {
+      console.log("btn-group-double");
+      console.log(param);
+    },
+    tableonPagging(param) {
+      console.log("table pagging event");
+      console.log(param);
+      this.tableData.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,
+        },
+      ];
+      let index = 0;
+      for (let i = param.start; i < param.end; i++) {
+        this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+        this.tableData.data[index].index = i + 1;
+        index++;
+      }
+    },
+    CheckTableonCheck(param) {
+      console.log("table check event");
+      console.log(param);
+    },
+  },
+  data() {
+    return {
+      currTab: 2,
+      tabData: [
+        {
+          id: "1",
+          text: "图表",
+        },
+        {
+          id: "2",
+          text: "组件",
+        },
+        {
+          id: "3",
+          text: "表格",
+        },
+        {
+          id: "4",
+          text: "图标",
+        },
+      ],
+      tableData: {
+        column: [
+          {
+            name: "",
+            field: "index",
+            width: "50px",
+            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,
+          },
+        ],
+        total: 100,
+      },
+      // 柱状图：horizontal-bar-chart data
+      HorizontalBarChart: {
+        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],
+        ],
+      },
+      // 柱状图：horizontal-bar-chart data
+      HoverBarChart: [
+        {
+          text: "1",
+          value: 1,
+        },
+        {
+          text: "2",
+          value: 2,
+        },
+        {
+          text: "3",
+          value: 1,
+        },
+        {
+          text: "4",
+          value: 3,
+        },
+        {
+          text: "5",
+          value: 3,
+        },
+        {
+          text: "6",
+          value: 3,
+        },
+        {
+          text: "7",
+          value: 3,
+        },
+        {
+          text: "8",
+          value: 3,
+        },
+        {
+          text: "9",
+          value: 3,
+        },
+        {
+          text: "10",
+          value: 3,
+        },
+        {
+          text: "11",
+          value: 3,
+        },
+        {
+          text: "12",
+          value: 3,
+        },
+        {
+          text: "13",
+          value: 3,
+        },
+        {
+          text: "14",
+          value: 3,
+        },
+        {
+          text: "15",
+          value: 3,
+        },
+        {
+          text: "16",
+          value: 3,
+        },
+        {
+          text: "17",
+          value: 3,
+        },
+        {
+          text: "18",
+          value: 3,
+        },
+        {
+          text: "19",
+          value: 3,
+        },
+        {
+          text: "20",
+          value: 3,
+        },
+        {
+          text: "21",
+          value: 3,
+        },
+        {
+          text: "22",
+          value: 3,
+        },
+        {
+          text: "23",
+          value: 3,
+        },
+        {
+          text: "24",
+          value: 3,
+        },
+        {
+          text: "25",
+          value: 3,
+        },
+        {
+          text: "26",
+          value: 3,
+        },
+        {
+          text: "27",
+          value: 3,
+        },
+        {
+          text: "28",
+          value: 3,
+        },
+        {
+          text: "29",
+          value: 3,
+        },
+        {
+          text: "30",
+          value: 3,
+        },
+        {
+          text: "31",
+          value: 3,
+        },
+      ],
+      // list-bar-chart-2 data
+      ListBarChart: [
+        {
+          name: "当日预测电量",
+          value: 103.62,
+          total: 150,
+        },
+        {
+          name: "实际发电量",
+          value: 98.62,
+          total: 100,
+        },
+        {
+          name: "当月预测电量",
+          value: 113.27,
+          total: 150,
+        },
+        {
+          name: "实际发电量",
+          value: 136.72,
+          total: 150,
+        },
+      ],
+      // multiple-bar-chart data
+      MultipleBarChart: [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "购网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "风速",
+          yAxisIndex: 1,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+      ],
+      // btnGroups
+      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",
+            },
+          ],
+        },
+      ],
+    };
+  },
+  created() {
+    for (let i = 1; i < 21; i++) {
+      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+      this.tableData.data[i].index = i + 1;
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.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;
+    }
+  }
+}
+</style>

src/views/HealthControl/Health1.vue

@@ -191,14 +191,22 @@
     <div v-if="tabIndex == 2">
       <button class="btn" @click="dialogVisible = true">点击弹窗</button>
       <button class="btn" @click="dialog2Visible = true">消缺跟踪弹窗</button>
+      <button class="btn" @click="dialog3Visible = true">指标排行弹窗</button>
+      <button class="btn" @click="dialog4Visible = true">故障诊断弹窗</button>
+      <button class="btn" @click="showMessage">消息提醒</button>
+      <button class="btn" @click="showComfirm">操作确认</button>
       <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
         <dayinfo />
       </el-dialog>
       <el-dialog title="消缺跟踪" v-model="dialog2Visible" width="1400px" top="10vh" custom-class="modal" :close-on-click-modal="false">
         <Track />
       </el-dialog>
-      <button class="btn" @click="showMessage">消息提醒</button>
-      <button class="btn" @click="showComfirm">操作确认</button>
+      <el-dialog title="风功率曲线" v-model="dialog3Visible" width="1400px" top="10vh" custom-class="modal" :close-on-click-modal="false">
+        <RankingPop />
+      </el-dialog>
+      <el-dialog title="故障诊断" v-model="dialog4Visible" width="1400px" top="10vh" custom-class="modal hide-header" :close-on-click-modal="false">
+        <FaultDiagnosis />
+      </el-dialog>
     </div>
     <div v-if="tabIndex == 3">
       tab4
@@ -213,14 +221,18 @@ import Panel from "../../components/coms/panel/panel.vue";
 import Dayinfo from "./dayinfo.vue";
 import Health2 from "./Health2.vue";
 import Track from "./track.vue";
+import RankingPop from "./ranking-pop.vue";
+import FaultDiagnosis from "./fault-diagnosis.vue";
 export default {
   setup() {},
-  components: { SvgIcon, Panel, VertivalBarLineChart, Health2, Dayinfo, Track },
+  components: { SvgIcon, Panel, VertivalBarLineChart, Health2, Dayinfo, Track, RankingPop, FaultDiagnosis },
   data() {
     return {
       tabIndex: 0,
       dialogVisible: false,
       dialog2Visible: false,
+      dialog3Visible: false,
+      dialog4Visible: false,
     };
   },
   methods: {

src/views/HealthControl/defect-elimination-tracking.vue

@@ -0,0 +1,198 @@
+<template>
+    <div class="defect-elimination-tracking" v-if="showMe">
+        <div class="defect-elimination-tracking-close">
+            <i class="el-icon el-icon-close" @click="close"></i>
+        </div>
+        <div class="header-tile-box">
+            <div class="header-tile-h">
+                <div class="header-box">
+                    <img :src="header" class="header" />
+                </div>
+            </div>
+            <div class="header-tile">
+                <div class="info-form-box">
+                    <div class="info-form">
+                        <div class="info-form-label">检修人员：</div>
+                        <div class="info-form-value">王义波</div>
+                    </div>
+                    <div class="info-form">
+                        <div class="info-form-label">收缩血压：</div>
+                        <div class="info-form-value">0</div>
+                    </div>
+                </div>
+            </div>
+            <div class="header-tile">
+                <div class="info-form-box">
+                    <div class="info-form">
+                        <div class="info-form-label">工作时长：</div>
+                        <div class="info-form-value">76.0分钟</div>
+                    </div>
+                    <div class="info-form">
+                        <div class="info-form-label">舒张血压：</div>
+                        <div class="info-form-value">0</div>
+                    </div>
+                </div>
+            </div>
+            <div class="header-tile">
+                <div class="info-form-box">
+                    <div class="info-form">
+                        <div class="info-form-label">工作强度：</div>
+                        <div class="info-form-value">高</div>
+                    </div>
+                    <div class="info-form">
+                        <div class="info-form-label">心跳频率：</div>
+                        <div class="info-form-value">0</div>
+                    </div>
+                </div>
+            </div>
+            <div class="header-tile">
+                <div class="info-form-box">
+                    <div class="info-form">
+                        <div class="info-form-label">疲劳度：</div>
+                        <div class="info-form-value">0</div>
+                    </div>
+                    <div class="info-form">
+                        <div class="info-form-label">血压：</div>
+                        <div class="info-form-value">0</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="det-chart-title">检修人员健康情况</div>
+        <div class="det-chart-sub-title">工作期间检测值</div>
+        <normal-line-chart class="det-chart" height="21.296vh" :showLegend="true" />
+        <div class="det-chart-sub-title-big">专业技能:</div>
+        <div class="det-chart-sub-title">电力类，机电类</div>
+    </div>
+</template>
+
+<script>
+import NormalLineChart from "@com/chart/line/normal-line-chart.vue";
+export default {
+    components: {
+        NormalLineChart
+    },
+    data() {
+        return {
+            showMe: false,
+            header: require("@assets/header.png"),
+        };
+    },
+    // 函数
+    methods: {
+        show: function () {
+            this.showMe = true;
+        },
+        close: function () {
+            this.showMe = false;
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.defect-elimination-tracking {
+    position: absolute;
+    width: 800px;
+    height: 460px;
+    top: calc(50% - 230px);
+    left: calc(50% - 400px);
+    background: rgba(18, 29, 28, 0.95);
+    border: 1px solid rgba(5, 187, 76, 0.5);
+    padding: 16px;
+
+    .defect-elimination-tracking-close {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        cursor: pointer;
+
+        i {
+            font-size: 16px;
+            color: #909399;
+        }
+
+        &:hover {
+            i {
+                color: @green;
+            }
+        }
+    }
+
+    .header-tile-box {
+        display: flex;
+
+        .header-tile-h {
+            width: 54px;
+
+            .header-box {
+                width: 54px;
+                height: 76px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: #ffffff;
+
+                .header {
+                    width: 54px;
+                }
+            }
+        }
+
+        .header-tile {
+            padding: 0 8px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            .info-form-box {
+                .info-form {
+                    display: flex;
+
+                    .info-form-label {
+                        width: 80px;
+                        font-size: @fontsize-s;
+                        color: @gray-l;
+                        text-align: right;
+                    }
+
+                    .info-form-value {
+                        font-size: @fontsize-s;
+                        color: @white;
+                        line-height: 1.5;
+                        margin-left: 8px;
+                    }
+
+                    +.info-form {
+                        margin-top: 8px;
+                    }
+                }
+            }
+        }
+    }
+    
+    .det-chart {
+        width: 100%;
+        height: 21.296vh;
+    }
+
+    .det-chart-title {
+        text-align: center;
+        font-size: @fontsize;
+        color: @gray-l;
+        margin-top: 16px;
+    }
+
+    .det-chart-sub-title {
+        font-size: @fontsize-s;
+        color: @gray-l;
+        margin: 8px 0;
+    }
+
+    .det-chart-sub-title-big {
+        font-size: @fontsize;
+        color: @gray-l;
+        margin: 16px 0 8px 0;
+    }
+}
+</style>

src/views/HealthControl/fault-diagnosis.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="fault-diagnosis-pop-up-window">
+        <div class="white font-md">查询条件</div>
+        <div class="query left mg-b-8">
+            <div class="query-items">
+                <div class="query-item">
+                    <div class="lable">风机：</div>
+                    <div class="search-input">
+                        <el-input v-model="value1" placeholder="SG01_53" class="placeholder-left" />
+                    </div>
+                </div>
+                <div class="query-item">
+                    <div class="lable">部件类型：</div>
+                    <div class="search-input">
+                        <el-select class="placeholder-left" v-model="value2" multiple placeholder="风机" popper-class="select">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </div>
+                </div>
+                <div class="query-item">
+                    <div class="lable">测点类型：</div>
+                    <div class="search-input">
+                        <el-select class="placeholder-left" v-model="value3" multiple placeholder="所有测点" popper-class="select">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </div>
+                </div>
+            </div>
+            <div class="query-actions">
+                <button class="btn green">重新选择</button>
+            </div>
+        </div>
+        <div class="white font-md mg-t-16">测点选择</div>
+        <el-checkbox-group v-model="checkList" text-color="#05bb4c" fill="#05bb4c">
+            <el-checkbox class="cb-item" label="C01">转子位置，值为：223.42</el-checkbox>
+            <el-checkbox class="cb-item" label="C02">机舱震动×方向 ，值为： 0.00</el-checkbox>
+            <el-checkbox class="cb-item" label="C03">机舱震动×方向 ，值为： 0.00</el-checkbox>
+            <el-checkbox class="cb-item" label="C04">机舱震动×方向 ，值为： 0.00</el-checkbox>
+            <br>
+            <el-checkbox class="cb-item" label="C05">风向1，值为：203.08</el-checkbox>
+            <el-checkbox class="cb-item" label="C06">风向1，值为：203.08</el-checkbox>
+            <el-checkbox class="cb-item" label="C07">风向1，值为：203.08</el-checkbox>
+            <el-checkbox class="cb-item" label="C08">风向1，值为：203.08</el-checkbox>
+            <br>
+            <el-checkbox class="cb-item" label="C09">转子位置，值为：223.42</el-checkbox>
+            <el-checkbox class="cb-item" label="C10">转子位置，值为：223.42</el-checkbox>
+            <el-checkbox class="cb-item" label="C11">转子位置，值为：223.42</el-checkbox>
+            <el-checkbox class="cb-item" label="C12">转子位置，值为：223.42</el-checkbox>
+        </el-checkbox-group>
+        <div class="white font-md mg-t-16">风机故障回溯</div>
+        <div class="fdp-sub-title font-sm">国电电力宁夏新能源集控系统</div>
+        <multiple-y-line-chart class="fdp-chart" height="32.407vh" :showLegend="true" />
+    </div>
+</template>
+
+<script>
+import MultipleYLineChart from "@com/chart/line/multiple-y-line-chart.vue";
+export default {
+    components: {MultipleYLineChart},
+    data() {
+        return {
+            options: [
+                {
+                    value: "选项1",
+                    label: "黄金糕",
+                },
+                {
+                    value: "选项2",
+                    label: "双皮奶",
+                },
+                {
+                    value: "选项3",
+                    label: "蚵仔煎",
+                },
+                {
+                    value: "选项4",
+                    label: "龙须面",
+                },
+                {
+                    value: "选项5",
+                    label: "北京烤鸭",
+                },
+            ],
+            value1: "",
+            value2: [],
+            value3: [],
+            checkList: ["C01", "C02", "C03", "C04"],
+        };
+    },
+    // 函数
+    methods: {},
+};
+</script>
+
+<style lang="less">
+.fault-diagnosis-pop-up-window {
+    width: 100%;
+    height: 60.185vh;
+
+    .fdp-sub-title {
+        color: #a8b2b5;
+        margin: 2px 0 16px 0;
+    }
+
+    .cb-item {
+        margin-top: 12px;
+        width: 240px;
+    }
+
+    .fdp-chart {
+        width: 100%;
+        height: 32.407vh;
+    }
+}
+</style>

src/views/HealthControl/ranking-pop.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="index-ranking-pop-up-window">
+      <normal-line-chart class="irpuw-chart" height="54.63vh" :showLegend="true" />
+  </div>
+</template>
+
+<script>
+import NormalLineChart from "@com/chart/line/normal-line-chart.vue";
+export default {
+  components: {
+      NormalLineChart
+  },
+  data() {
+    return {
+
+    };
+  },
+  // 函数
+  methods: {
+   
+  },
+};
+</script>
+
+<style lang="less">
+.index-ranking-pop-up-window {
+    width: 100%;
+    height: 60.185vh;
+    padding: 30px;
+
+    .irpuw-chart {
+        width: 100%;
+        height: 54.63vh;
+    }
+}
+</style>

src/views/HealthControl/track.vue

@@ -213,14 +213,17 @@
         </div>
       </div>
     </div>
+    <DefectEliminationTracking ref="det" :show="showDefectEliminationTracking"></DefectEliminationTracking>
   </div>
 </template>
 
 <script>
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import DefectEliminationTracking from "./defect-elimination-tracking.vue";
 export default {
   components: {
-    SvgIcon
+    SvgIcon,
+    DefectEliminationTracking,
   },
   data() {
     return {
@@ -274,13 +277,25 @@ export default {
         qxclpjsc: 11,
         yssc: 11,
         yspjsc: 11,
-      }
+      },
     };
   },
   // 函数
   methods: {
     selectTab: function(index) {
       this.activeTab = index;
+      switch (index) {
+        case 0:
+        case 2:
+          this.$refs.det.close();
+          break;
+        case 1:
+          this.$refs.det.show();
+          break;
+      
+        default:
+          break;
+      }
     },
   },
 };
@@ -289,6 +304,7 @@ export default {
 <style lang="less">
 .track-info {
   display: flex;
+  position: relative;
   .form-info {
     flex: 0 0 720px;
     .work-flow {

src/views/Home/Home.vue

@@ -1,50 +1,50 @@
 <template>
   <div class="home">
-    <Row type="flex" style="height:55vh">
-      <Col :span="6" class="top-left-panel">
-      <Row type="flex" class="weather">
-        <Col :span="24">
-        <com-panel :title="tqmap.name || 'yc'" :sub-title="nowTime + ' 实况'" icon="fa fa-map-marker">
-          <weather :data="tqmap" />
-        </com-panel>
-        </Col>
-      </Row>
-      <Row type="flex"  class="plan">
-        <Col :span="24">
-        <com-panel title="预测电量" sub-title="（单位：万kWh）">
-            <list-bar-chart-2 :list="ForecastPower" height="100%" />
-        </com-panel>
-        </Col>
-      </Row>
-      <Row type="flex"  class="power">
-        <Col :span="24">
-        <com-panel title="功率负荷" sub-title="（单位：MW）">
-          <power-review :data="powerData" :id="wpId" @chartClick="showPowerChart" />
-        </com-panel>
-        </Col>
+      <Row type="flex" style="height:55vh">
+          <div class="top-left-panel">
+              <Row type="flex" class="weather">
+                  <Col :span="24">
+                  <com-panel :title="tqmap.name || 'yc'" :sub-title="nowTime + ' 实况'" icon="fa fa-map-marker">
+                      <weather :data="tqmap" />
+                  </com-panel>
+                  </Col>
+              </Row>
+              <Row type="flex" class="plan">
+                  <Col :span="24">
+                  <com-panel title="预测电量" sub-title="（单位：万kWh）">
+                      <list-bar-chart-2 :list="ForecastPower" height="100%" />
+                  </com-panel>
+                  </Col>
+              </Row>
+              <Row type="flex" class="power">
+                  <Col :span="24">
+                  <com-panel title="功率负荷" sub-title="（单位：MW）">
+                      <power-review :data="powerData" :id="wpId" @chartClick="showPowerChart" />
+                  </com-panel>
+                  </Col>
+              </Row>
+          </div>
+          <div class="top-mid-panel">
+              <Map :wpId="wpId" :day="String(jczbmap.aqts || '---')" :data="fcmap" :xtData="xtmap" @mapClick="changeShowType"></Map>
+          </div>
+          <div class="top-right-panel">
+              <Row type="flex">
+                  <Col :span="24">
+                  <com-panel title="电量分析" sub-title="（单位：万kWh）">
+                      <coulometric-analysis />
+                  </com-panel>
+                  </Col>
+              </Row>
+              <Row type="flex">
+                  <Col :span="24">
+                  <com-panel title="计划电量完成情况" sub-title="（单位：万kWh）">
+                      <power-plan :data="planData" :title="planBtnName" :showSingle="powerplanShowSingle" :id="wpId" @chartClick="showDoneChart" />
+                  </com-panel>
+                  </Col>
+              </Row>
+          </div>
       </Row>
-      </Col>
-      <Col :span="12">
-      <Map :wpId="wpId" :day="String(jczbmap.aqts || '---')" :data="fcmap" :xtData="xtmap" @mapClick="changeShowType"></Map>
-      </Col>
-      <Col :span="6" class="top-right-panel">
-        <Row type="flex">
-          <Col :span="24">
-            <com-panel title="电量分析" sub-title="（单位：万kWh）">
-              <coulometric-analysis />
-            </com-panel>
-          </Col>
-        </Row>
-        <Row type="flex">
-          <Col :span="24">
-            <com-panel title="计划电量完成情况" sub-title="（单位：万kWh）">
-              <power-plan :data="planData" :title="planBtnName" :showSingle="powerplanShowSingle" :id="wpId" @chartClick="showDoneChart" />
-            </com-panel>
-          </Col>
-        </Row>
-      </Col>
-    </Row>
-    <Row type="flex" style="height:calc(40vh - 208px);">
+    <Row type="flex" style="height:calc(40vh - 236px);margin-top:20px;">
       <Col :span="12">
         <toolbar-panel title="日发电量">
           <template v-slot:tools>
@@ -95,7 +95,7 @@
       </toolbar-panel>
       </Col>
     </Row>
-    <Row type="flex">
+    <Row type="flex" style="margin-top:20px;">
       <!-- 下方 table -->
       <Col :span="16" class="table-card-panel">
       <row>
@@ -785,147 +785,133 @@ export default {
           margin-left: 8px;
         }
       }
+
       .table-card {
         background: rgba(255, 255, 255, 0.1);
         border-collapse: collapse;
         width: 100%;
+        outline: 1px solid @gray;
 
-      .curP{
-        cursor: pointer;
-      }
+        .curP{
+            cursor: pointer;
+          }
 
-      tr {
-        font-size: 12px;
+        tr {
+          font-size: 12px;
           td {
-            border: 0.093vh solid @darkgray;
+            border: 0.093vh solid fade(@gray, 20);
             line-height: 27px;
             padding: 0 4px;
             &.text {
             }
 
-            &.value {
-              text-align: right;
-              font-family: @font-family-num;
-            }
-
-            &.unit {
-            }
-          }
-        }
-      }
-
-      .tools {
-        display: flex;
+                &.value {
+                  text-align: right;
+                  font-family: @font-family-num;
+                }
 
-        .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;
+                &.unit {
+                }
+              }
             }
           }
 
-          .legend-text {
-            color: #ffffff4d;
-          }
-        }
-      }
-
-      .situation {
-        width: 100%;
-        height: 100%;
-        .situation-body {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          height: 100%;
-
-          .situation-item {
+          .tools {
             display: flex;
-            align-content: center;
-            flex: 1 1 auto;
-            align-items: center;
-
-            .icon {
-              svg {
-                width: 4.167vh;
-                height: 4.167vh;
-              }
-            }
-
-            &.fengji {
-              flex: 0 1 7.99vw;
 
-              .info .value {
-                font-size: 24px;
-              }
-            }
-
-            .fengji-icon {
-              padding: 1.111vh;
-              border-radius: 50%;
-              box-shadow: inset 1.5px -1px 1px 0px @green;
-
-              svg {
-                width: 2.593vh;
-                height: 2.593vh;
-              }
-            }
-
-            .info {
+            .tool-block {
               display: flex;
-              flex-direction: column;
-              justify-content: center;
+              align-items: center;
               margin-left: 0.741vh;
 
-              .title {
-                font-size: 12px;
-                font-weight: bold;
-                margin-bottom: 0.7407vh;
-              }
+      .legend {
+        flex: auto;
+        width: 6px;
+        height: 6px;
+        margin-right: 0.741vh;
 
-              .text {
-                display: inline-block;
-                width: 64px;
-                text-align: left;
+                &.long {
+                  width: 2.963vh;
+                  height: 0.37vh;
+                }
               }
 
-              .value {
-                text-align: right;
-                font-size: 12px;
+              .legend-text {
+                color: #ffffff4d;
               }
             }
           }
-        }
-      }
-      .com-panel {
-        height: 100%;
 
-        .panel-body {
-          height: calc(100% - 32px);
-        }
-      }
+          .situation {
+            width: 100%;
+            height: 100%;
+            .situation-body {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              height: 100%;
 
-      .top-left-panel {
+      .situation-item {
         display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-
-        .row {
-          flex: 0 0 auto;
+        align-content: center;
+        flex: 1 1 25%;
+        align-items: center;
+
+                .icon {
+                  svg {
+                    width: 4.167vh;
+                    height: 4.167vh;
+                  }
+                }
+
+        &.fengji {
+          flex: 0 1 25%;
+
+          .info {
+            margin-left: 16px;
+            .value {
+              font-size: 24px;
+            }
+          }
         }
 
-        .plan {
-          flex: 1 0 auto;
+                .fengji-icon {
+                  padding: 1.111vh;
+                  border-radius: 50%;
+                  box-shadow: inset 1.5px -1px 1px 0px @green;
+
+                  svg {
+                    width: 2.593vh;
+                    height: 2.593vh;
+                  }
+                }
+
+                .info {
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  margin-left: 0.741vh;
+
+                  .title {
+                    font-size: 12px;
+                    font-weight: bold;
+                    margin-bottom: 0.7407vh;
+                  }
+
+                  .text {
+                    display: inline-block;
+                    width: 64px;
+                    text-align: left;
+                  }
+
+                  .value {
+                    text-align: right;
+                    font-size: 12px;
+                  }
+                }
+              }
+            }
+          }
           .com-panel {
             height: 100%;
 
@@ -933,13 +919,38 @@ export default {
               height: calc(100% - 32px);
             }
           }
-        }
-      }
 
-      .top-right-panel {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
+  .top-left-panel {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 0 0 380px;
+
+            .row {
+              flex: 0 0 auto;
+            }
+
+    .plan {
+      flex: 0 0 auto;
+      .com-panel {
+        height: 100%;
+
+        .panel-body {
+          height: calc(100% - 32px);
+        }
       }
     }
+  }
+
+  .top-mid-panel {
+    flex: 1 1 auto;
+  }
+
+  .top-right-panel {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 0 0 380px;
+  }
+}
 </style>

src/views/Home/components/coulometric-analysis.vue

@@ -19,12 +19,8 @@
           <span class="value">{{ ReduceLosses }}</span>
         </div>
         <percent-card :value="ReductionRate" color="yellow" title="" />
-        <div>
-          <card-1 class="increase-info" title="因偏航对风超出范围" :value="OutRange" :isIncrease="false" />
-        </div>
-        <div>
-          <card-1 class="increase-info" title="降出力运行" :value="ReducedOutput" :isIncrease="false" />
-        </div>
+        <card-1 class="increase-info" title="因偏航对风超出范围" :value="OutRange" :isIncrease="false" />
+        <card-1 class="increase-info" title="降出力运行" :value="ReducedOutput" :isIncrease="false" />
       </Col>
     </row>
   </div>
@@ -71,10 +67,10 @@ export default {
 
 <style lang="less">
 .coulometric-analysis {
-  padding: 0 1.481vh;
+  padding: 0 8px;
 
   .coulometric-info {
-    margin-bottom: 2.222vh;
+    margin-bottom: 1.4815vh;
     .title {
       font-size: @fontsize;
       margin-right: 0.741vh;
@@ -85,7 +81,12 @@ export default {
   }
 
   .increase-info {
-    margin: 2.778vh 0;
+    margin: 30px 0;
+
+    &:last-child {
+      margin-top: 4.4444vh;
+      margin-bottom: 24px;
+    }
   }
 
   .icon {

src/views/Home/components/map.vue

@@ -255,10 +255,11 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: @fontsize-l;
+      font-size: @fontsize;
       cursor: pointer;
       width: 6.481vh;
-      padding: 0.741vh 0;
+      padding: 0.3704vh 0;
+      margin-bottom: 1.4815vh;
 
       &.active {
         color: @green;
@@ -279,7 +280,8 @@ export default {
       }
 
       .svg-icon {
-        margin-right: 0.556vh;
+        margin-right: 12px;
+        margin-top: 2px;
       }
     }
   }
@@ -287,6 +289,7 @@ export default {
   .return {
     position: absolute;
     display: flex;
+    z-index: 2;
     align-items: center;
     top: 0;
     right: 16px;
@@ -326,8 +329,9 @@ export default {
   .map-img {
     // width: calc(100% - 14.815vh);
     width: 100%;
-    height: calc(100% - 14.815vh);
-    margin: 7.407vh 0;
+    // height: calc(100% - 14.815vh);
+    height: 100%;
+    // margin: 7.407vh 0;
     position: absolute;
     z-index: 1;
     top: 0;

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

@@ -7,7 +7,7 @@
             x="0px"
             y="0px"
             viewBox="0 0 745.3 459"
-            :style="'enable-background: new 0 0 745.3 459; transform: rotateX('+deg+'deg);'"
+            :style="'enable-background: new 0 0 745.3 459; transform: rotateX('+deg+'deg); left: '+svgLeft+'; top: '+svgTop+';'"
             xml:space="preserve"
             :width = "svgWidth"
             :height = "svgHeight"
@@ -19,8 +19,8 @@
                         x1="25"
                         y1="25"
                         x2="25"
-                        y2="80"
-                        stroke="#edbf03"
+                        y2="60"
+                        stroke="#16FFAA"
                         stroke-width="1"
                     />
                     <circle
@@ -28,7 +28,7 @@
                         cx="25"
                         cy="25"
                         r="2"
-                        fill="#edbf03"
+                        fill="#16FFAA"
                     />
                 </g>
                 <g id="nx-map-circle-1">
@@ -37,7 +37,7 @@
                         cx="25"
                         cy="80"
                         r="3"
-                        fill="#edbf03"
+                        fill="#EAFF00"
                     />
                     <circle
                         class="nx-map-down-circle-2"
@@ -45,7 +45,7 @@
                         cx="25"
                         cy="80"
                         r="9"
-                        stroke="#edbf03"
+                        stroke="#EAFF00"
                         stroke-width="1"
                         fill="none"
                     >
@@ -59,7 +59,7 @@
                         cy="80"
                         r="16"
                         opacity="0.6"
-                        stroke="#edbf03"
+                        stroke="#EAFF00"
                         stroke-width="1"
                         fill="none"
                     >
@@ -103,292 +103,289 @@
                 transform="matrix(1 0 0 1 -113 60.6679)"
             ></image>
 <g v-if="showPoint">
-            <g v-if="showType === 'all' || showType === 'fc'" class="item-label" @click.stop="clickLabel('XS_FDC', '香山风电场')" @mouseover="mouseover(0)" @mouseout="mouseout">
-                <use xlink:href="#nx-map-line-1" x="150" y="195" />
-                <use xlink:href="#nx-map-circle-1" x="150" y="195" />
-                <!-- +25 -5 -->
-                <rect
-                    x="175"
-                    y="190"
-                    width="110"
-                    height="23"
-                    stroke="#46C55A35"
-                    fill="#000000"
-                    opacity="0.8"
-                />
+    <g v-if="showType === 'all' || showType === 'fc'" class="item-label" @click.stop="clickLabel('XS_FDC', '香山风电场')" @mouseover="mouseover(0)" @mouseout="mouseout">
+        <use xlink:href="#nx-map-line-1" x="180" y="180" />
+        <!-- +0 -20 -->
+        <use xlink:href="#nx-map-circle-1" x="180" y="160" />
+        <!-- +25 -5 -->
+        <rect x="205"
+              y="180"
+              width="110"
+              height="18"
+              stroke="#46C55A35"
+              fill="#000000"
+              opacity="0.8" />
                 <!-- +5 +12| -->
-                <text x="180" y="207" fill="#919697" font-size="14">香山</text>
-                <!-- +70 0 -->
-                <text x="245" y="207" fill="#05bb4c" font-size="14">{{sourceMap.XS_FDC_zjts}}台</text>
-            </g>
+                <text x="210" y="193" fill="#919697" font-size="12">香山</text>
+        <!-- +70 0 -->
+                <text x="280" y="193" fill="#05bb4c" font-size="12">{{sourceMap.XS_FDC_zjts}}台</text>
+    </g>
             <g v-if="showType === 'all' || showType === 'gf'" class="item-label" @click.stop="clickLabel('MCH_GDC', '马场湖光电厂')" @mouseover="mouseover(1)" @mouseout="mouseout">
-                <use xlink:href="#nx-map-line-1" x="280" y="40" />
+                <use xlink:href="#nx-map-line-1" x="280" y="60" />
                 <use xlink:href="#nx-map-circle-1" x="280" y="40" />
-                <!-- +25 -5 -->
+                <!-- +25 +20 -->
                 <rect
                     x="305"
-                    y="35"
+                    y="60"
                     width="110"
-                    height="23"
+                    height="18"
                     stroke="#46C55A35"
                     fill="#000000"
                     opacity="0.8"
                 />
-                <!-- +5 +12| -->
-                <text x="310" y="52" fill="#919697" font-size="14">马场湖</text>
+                <!-- +5 +13 -->
+                <text x="310" y="74" fill="#919697" font-size="12">马场湖</text>
                 <!-- +70 0 -->
-                <text x="375" y="52" fill="#05bb4c" font-size="14">{{sourceMap.MCH_GDC_zjts}}台</text>
+                <text x="370" y="74" fill="#05bb4c" font-size="12">{{sourceMap.MCH_GDC_zjts}}台</text>
             </g>
             <g v-if="showType === 'all' || showType === 'gf'" class="item-label" @click.stop="clickLabel('XH_GDC', '宣和光电厂')" @mouseover="mouseover(2)" @mouseout="mouseout">
-                <use xlink:href="#nx-map-line-1" x="290" y="80" />
-                <use xlink:href="#nx-map-circle-1" x="290" y="80" />
+                <use xlink:href="#nx-map-line-1" x="290" y="90" />
+                <!-- +0 -20 -->
+                <use xlink:href="#nx-map-circle-1" x="290" y="70" />
                 <!-- +25 -5 -->
-                <rect
-                    x="315"
-                    y="75"
-                    width="110"
-                    height="23"
-                    stroke="#46C55A35"
-                    fill="#000000"
-                    opacity="0.8"
-                />
-                <!-- +5 +12| -->
-                <text x="320" y="92" fill="#919697" font-size="14">宣和</text>
+                <rect x="315"
+                      y="90"
+                      width="110"
+                      height="18"
+                      stroke="#46C55A35"
+                      fill="#000000"
+                      opacity="0.8" />
+                <!-- +5 +14 -->
+                <text x="320" y="104" fill="#919697" font-size="12">宣和</text>
                 <!-- +70 0 -->
-                <text x="385" y="92" fill="#05bb4c" font-size="14">{{sourceMap.XH_GDC_zjts}}台</text>
+                <text x="380" y="104" fill="#05bb4c" font-size="12">{{sourceMap.XH_GDC_zjts}}台</text>
             </g>
             <g v-if="showType === 'all' || showType === 'fc'" class="item-label" @click.stop="clickLabel('NSS_FDC', '牛首山风电场')" @mouseover="mouseover(3)" @mouseout="mouseout">
-                <use xlink:href="#nx-map-line-1" x="410" y="65" />
+                <use xlink:href="#nx-map-line-1" x="410" y="85" />
                 <use xlink:href="#nx-map-circle-1" x="410" y="65" />
-                <!-- +25 -5 -->
+                <!-- +25 +20 -->
                 <rect
                     x="435"
-                    y="60"
+                    y="85"
                     width="110"
-                    height="23"
+                    height="18"
                     stroke="#46C55A35"
                     fill="#000000"
                     opacity="0.8"
                 />
-                <!-- +5 +12| -->
-                <text x="440" y="77" fill="#919697" font-size="14">牛首山</text>
+                <!-- +5 +14 -->
+                <text x="440" y="99" fill="#919697" font-size="12">牛首山</text>
                 <!-- +70 0 -->
-                <text x="505" y="77" fill="#05bb4c" font-size="14">{{sourceMap.NSS_FDC_zjts}}台</text>
+                <text x="500" y="99" fill="#05bb4c" font-size="12">{{sourceMap.NSS_FDC_zjts}}台</text>
             </g>
             <g v-if="showType === 'all' || showType === 'gf'" class="item-label" @click="clickLabel('DWK_GDC', '大武口电厂')" @mouseover="mouseover(4)" @mouseout="mouseout">
-                <use xlink:href="#nx-map-line-1" x="570" y="5" />
-                <use xlink:href="#nx-map-circle-1" x="570" y="5" />
+                <use xlink:href="#nx-map-line-1" x="550" y="15" />
+                <use xlink:href="#nx-map-circle-1" x="550" y="-5" />
                 <!-- +25 -5 -->
-                <rect
-                    x="595"
-                    y="0"
-                    width="110"
-                    height="23"
-                    stroke="#46C55A35"
-                    fill="#000000"
-                    opacity="0.8"
-                />
-                <!-- +5 +12| -->
-                <text x="600" y="17" fill="#919697" font-size="14">大武口</text>
+                <rect x="575"
+                      y="15"
+                      width="110"
+                      height="18"
+                      stroke="#46C55A35"
+                      fill="#000000"
+                      opacity="0.8" />
+                <!-- +5 +14 -->
+                <text x="580" y="29" fill="#919697" font-size="12">大武口</text>
                 <!-- +70 0 -->
-                <text x="665" y="17" fill="#05bb4c" font-size="14">{{sourceMap.DWK_GDC_zjts}}台</text>
+                <text x="640" y="29" fill="#05bb4c" font-size="12">{{sourceMap.DWK_GDC_zjts}}台</text>
             </g>
             <g v-if="showType === 'all' || showType === 'gf'" class="item-label" @click="clickLabel('PL_GDC', '平罗光电厂')" @mouseover="mouseover(5)" @mouseout="mouseout">
-                <use xlink:href="#nx-map-line-1" x="590" y="30" />
-                <use xlink:href="#nx-map-circle-1" x="590" y="30" />
+                <use xlink:href="#nx-map-line-1" x="570" y="40" />
+                <use xlink:href="#nx-map-circle-1" x="570" y="20" />
                 <!-- +25 -5 -->
-                <rect
-                    x="615"
-                    y="25"
-                    width="110"
-                    height="23"
-                    stroke="#46C55A35"
-                    fill="#000000"
-                    opacity="0.8"
-                />
-                <!-- +5 +12| -->
-                <text x="620" y="42" fill="#919697" font-size="14">平罗</text>
+                <rect x="595"
+                      y="40"
+                      width="110"
+                      height="18"
+                      stroke="#46C55A35"
+                      fill="#000000"
+                      opacity="0.8" />
+                <!-- +5 +14 -->
+                <text x="600" y="54" fill="#919697" font-size="12">平罗</text>
                 <!-- +70 0 -->
-                <text x="685" y="42" fill="#05bb4c" font-size="14">{{sourceMap.PL_GDC_zjts}}台</text>
+                <text x="660" y="54" fill="#05bb4c" font-size="12">{{sourceMap.PL_GDC_zjts}}台</text>
             </g>
             <g v-if="showType === 'all' || showType === 'fc'" class="item-label"  @click="clickLabel('SBQ_FDC', '石板泉风电场')" @mouseover="mouseover(6)" @mouseout="mouseout">
-                <use xlink:href="#nx-map-line-1" x="380" y="125" />
+                <use xlink:href="#nx-map-line-1" x="380" y="145" />
                 <use xlink:href="#nx-map-circle-1" x="380" y="125" />
-                <!-- +25 -5 -->
+                <!-- +25 +20 -->
                 <rect
                     x="405"
-                    y="120"
+                    y="145"
                     width="110"
-                    height="23"
+                    height="18"
                     stroke="#46C55A35"
                     fill="#000000"
                     opacity="0.8"
                 />
-                <!-- +5 +12| -->
-                <text x="410" y="137" fill="#919697" font-size="14">石板泉</text>
+                <!-- +5 +14 -->
+                <text x="410" y="159" fill="#919697" font-size="12">石板泉</text>
                 <!-- +70 0 -->
-                <text x="475" y="137" fill="#05bb4c" font-size="14">{{sourceMap.SBQ_FDC_zjts}}台</text>
+                <text x="470" y="159" fill="#05bb4c" font-size="12">{{sourceMap.SBQ_FDC_zjts}}台</text>
             </g>
             <g v-if="showType === 'all' || showType === 'fc'" class="item-label" @click="clickLabel('MHS_FDC', '麻黄山风电场')" @mouseover="mouseover(7)" @mouseout="mouseout">
-                <use xlink:href="#nx-map-line-1" x="390" y="155" />
+                <use xlink:href="#nx-map-line-1" x="390" y="175" />
                 <use xlink:href="#nx-map-circle-1" x="390" y="155" />
-                <!-- +25 -5 -->
+                <!-- +25 +5 -->
                 <rect
                     x="415"
-                    y="150"
+                    y="175"
                     width="110"
-                    height="23"
+                    height="18"
                     stroke="#46C55A35"
                     fill="#000000"
                     opacity="0.8"
                 />
-                <!-- +5 +12| -->
-                <text x="420" y="167" fill="#919697" font-size="14">麻黄山</text>
+                <!-- +5 +13 || +14 -->
+                <text x="420" y="188" fill="#919697" font-size="12">麻黄山</text>
                 <!-- +70 0 -->
-                <text x="485" y="167" fill="#05bb4c" font-size="14">{{sourceMap.MHS_FDC_zjts}}台</text>
+                <text x="490" y="188" fill="#05bb4c" font-size="12">{{sourceMap.MHS_FDC_zjts}}台</text>
             </g>
             <g v-if="showType === 'all' || showType === 'fc'" class="item-label" @click="clickLabel('QS_FDC', '青山风电场')" @mouseover="mouseover(8)" @mouseout="mouseout">
                 <use xlink:href="#nx-map-line-1" x="430" y="180" />
-                <use xlink:href="#nx-map-circle-1" x="430" y="180" />
+                <use xlink:href="#nx-map-circle-1" x="430" y="160" />
                 <!-- +25 -5 -->
-                <rect x="455"
-                      y="175"
-                      width="110"
-                      height="23"
-                      stroke="#46C55A35"
-                      fill="#000000"
-                      opacity="0.8" />
+                <rect  
+                    x="465"
+                    y="195"
+                    width="110"
+                    height="18"
+                    stroke="#46C55A35"
+                    fill="#000000"
+                    opacity="0.8" />
                 <!-- +5 +12| -->
-                <text x="460" y="192" fill="#919697" font-size="14">青山</text>
+                <text x="470" y="209" fill="#919697" font-size="12">青山</text>
                 <!-- +70 0 -->
-                <text x="525" y="192" fill="#05bb4c" font-size="14">{{sourceMap.QS_FDC_zjts}}台</text>
+                <text x="540" y="209" fill="#05bb4c" font-size="12">{{sourceMap.QS_FDC_zjts}}台</text>
             </g>
             <g class="popup-layer-svg">
                 <g v-show="popup[0]">
+                    <!-- +140 0 -->
                     <!-- +5 (+10+50, +20)+25 -->
-                    <use xlink:href="#popup-box-svg" x="290" y="190" />
-                    <text x="300" y="210" fill="#919697" font-size="14">经度</text>
-                    <text x="350" y="210" fill="#05bb4c" font-size="14">{{xtMap.QS_FDC && xtMap.XS_FDC.jd}}</text>
-                    <text x="300" y="235" fill="#919697" font-size="14">纬度</text>
-                    <text x="350" y="235" fill="#05bb4c" font-size="14">{{xtMap.QS_FDC && xtMap.XS_FDC.wd}}</text>
-                    <text x="300" y="260" fill="#919697" font-size="14">海拔</text>
-                    <text x="350" y="260" fill="#05bb4c" font-size="14">{{xtMap.QS_FDC && xtMap.XS_FDC.hb}}</text>
-                    <text x="300" y="285" fill="#919697" font-size="14">功率</text>
-                    <text x="350" y="285" fill="#05bb4c" font-size="14">{{xtMap.QS_FDC && xtMap.XS_FDC.gl}}</text>
-                    <text x="300" y="310" fill="#919697" font-size="14">风速</text>
-                    <text x="350" y="310" fill="#05bb4c" font-size="14">{{xtMap.QS_FDC && xtMap.XS_FDC.ssfs}}</text>
+                    <use xlink:href="#popup-box-svg" x="320" y="180" />
+                    <text x="330" y="200" fill="#919697" font-size="12">经度</text>
+                    <text x="380" y="200" fill="#05bb4c" font-size="12">{{xtMap.QS_FDC && xtMap.XS_FDC.jd}}</text>
+                    <text x="330" y="225" fill="#919697" font-size="12">纬度</text>
+                    <text x="380" y="225" fill="#05bb4c" font-size="12">{{xtMap.QS_FDC && xtMap.XS_FDC.wd}}</text>
+                    <text x="330" y="250" fill="#919697" font-size="12">海拔</text>
+                    <text x="380" y="250" fill="#05bb4c" font-size="12">{{xtMap.QS_FDC && xtMap.XS_FDC.hb}}</text>
+                    <text x="330" y="275" fill="#919697" font-size="12">功率</text>
+                    <text x="380" y="275" fill="#05bb4c" font-size="12">{{xtMap.QS_FDC && xtMap.XS_FDC.gl}}</text>
+                    <text x="330" y="300" fill="#919697" font-size="12">风速</text>
+                    <text x="380" y="300" fill="#05bb4c" font-size="12">{{xtMap.QS_FDC && xtMap.XS_FDC.ssfs}}</text>
                 </g>
                 <g v-show="popup[1]">
                     <!-- +5 (+10+50, +20)+25 -->
-                    <use xlink:href="#popup-box-svg" x="420" y="35" />
-                    <text x="430" y="55" fill="#919697" font-size="14">经度</text>
-                    <text x="480" y="55" fill="#05bb4c" font-size="14">{{xtMap.MCH_GDC && xtMap.MCH_GDC.jd}}</text>
-                    <text x="430" y="80" fill="#919697" font-size="14">纬度</text>
-                    <text x="480" y="80" fill="#05bb4c" font-size="14">{{xtMap.MCH_GDC && xtMap.MCH_GDC.wd}}</text>
-                    <text x="430" y="105" fill="#919697" font-size="14">海拔</text>
-                    <text x="480" y="105" fill="#05bb4c" font-size="14">{{xtMap.MCH_GDC && xtMap.MCH_GDC.hb}}</text>
-                    <text x="430" y="130" fill="#919697" font-size="14">功率</text>
-                    <text x="480" y="130" fill="#05bb4c" font-size="14">{{xtMap.MCH_GDC && xtMap.MCH_GDC.gl}}</text>
-                    <text x="430" y="155" fill="#919697" font-size="14">风速</text>
-                    <text x="480" y="155" fill="#05bb4c" font-size="14">{{xtMap.MCH_GDC && xtMap.MCH_GDC.ssfs}}</text>
+                    <use xlink:href="#popup-box-svg" x="420" y="60" />
+                    <text x="430" y="80" fill="#919697" font-size="12">经度</text>
+                    <text x="480" y="80" fill="#05bb4c" font-size="12">{{xtMap.MCH_GDC && xtMap.MCH_GDC.jd}}</text>
+                    <text x="430" y="105"fill="#919697" font-size="12">纬度</text>
+                    <text x="480" y="105"fill="#05bb4c" font-size="12">{{xtMap.MCH_GDC && xtMap.MCH_GDC.wd}}</text>
+                    <text x="430" y="130" fill="#919697" font-size="12">海拔</text>
+                    <text x="480" y="130" fill="#05bb4c" font-size="12">{{xtMap.MCH_GDC && xtMap.MCH_GDC.hb}}</text>
+                    <text x="430" y="155" fill="#919697" font-size="12">功率</text>
+                    <text x="480" y="155" fill="#05bb4c" font-size="12">{{xtMap.MCH_GDC && xtMap.MCH_GDC.gl}}</text>
+                    <text x="430" y="180" fill="#919697" font-size="12">风速</text>
+                    <text x="480" y="180" fill="#05bb4c" font-size="12">{{xtMap.MCH_GDC && xtMap.MCH_GDC.ssfs}}</text>
                 </g>
                 <g v-show="popup[2]">
+                    <!-- +140 0 -->
                     <!-- +5 (+10+50, +20)+25 -->
-                    <use xlink:href="#popup-box-svg" x="430" y="75" />
-                    <text x="440" y="95" fill="#919697" font-size="14">经度</text>
-                    <text x="490" y="95" fill="#05bb4c" font-size="14">{{xtMap.XH_GDC && xtMap.XH_GDC.jd}}</text>
-                    <text x="440" y="120" fill="#919697" font-size="14">纬度</text>
-                    <text x="490" y="120" fill="#05bb4c" font-size="14">{{xtMap.XH_GDC && xtMap.XH_GDC.wd}}</text>
-                    <text x="440" y="145" fill="#919697" font-size="14">海拔</text>
-                    <text x="490" y="145" fill="#05bb4c" font-size="14">{{xtMap.XH_GDC && xtMap.XH_GDC.hb}}</text>
-                    <text x="440" y="170" fill="#919697" font-size="14">功率</text>
-                    <text x="490" y="170" fill="#05bb4c" font-size="14">{{xtMap.XH_GDC && xtMap.XH_GDC.gl}}</text>
-                    <text x="440" y="195" fill="#919697" font-size="14">风速</text>
-                    <text x="490" y="195" fill="#05bb4c" font-size="14">{{xtMap.XH_GDC && xtMap.XH_GDC.ssfs}}</text>
+                    <use xlink:href="#popup-box-svg" x="430" y="90" />
+                    <text x="440" y="110" fill="#919697" font-size="12">经度</text>
+                    <text x="490" y="110" fill="#05bb4c" font-size="12">{{xtMap.XH_GDC && xtMap.XH_GDC.jd}}</text>
+                    <text x="440" y="135" fill="#919697" font-size="12">纬度</text>
+                    <text x="490" y="135" fill="#05bb4c" font-size="12">{{xtMap.XH_GDC && xtMap.XH_GDC.wd}}</text>
+                    <text x="440" y="160" fill="#919697" font-size="12">海拔</text>
+                    <text x="490" y="160" fill="#05bb4c" font-size="12">{{xtMap.XH_GDC && xtMap.XH_GDC.hb}}</text>
+                    <text x="440" y="185" fill="#919697" font-size="12">功率</text>
+                    <text x="490" y="185" fill="#05bb4c" font-size="12">{{xtMap.XH_GDC && xtMap.XH_GDC.gl}}</text>
+                    <text x="440" y="210" fill="#919697" font-size="12">风速</text>
+                    <text x="490" y="210" fill="#05bb4c" font-size="12">{{xtMap.XH_GDC && xtMap.XH_GDC.ssfs}}</text>
                 </g>
                 <g v-show="popup[3]">
                     <!-- +5 (+10+50, +20)+25 -->
-                    <use xlink:href="#popup-box-svg" x="550" y="60" />
-                    <text x="560" y="80" fill="#919697" font-size="14">经度</text>
-                    <text x="610" y="80" fill="#05bb4c" font-size="14">{{xtMap.NSS_FDC && xtMap.NSS_FDC.jd}}</text>
-                    <text x="560" y="105" fill="#919697" font-size="14">纬度</text>
-                    <text x="610" y="105" fill="#05bb4c" font-size="14">{{xtMap.NSS_FDC && xtMap.NSS_FDC.wd}}</text>
-                    <text x="560" y="130" fill="#919697" font-size="14">海拔</text>
-                    <text x="610" y="130" fill="#05bb4c" font-size="14">{{xtMap.NSS_FDC && xtMap.NSS_FDC.hb}}</text>
-                    <text x="560" y="155" fill="#919697" font-size="14">功率</text>
-                    <text x="610" y="155" fill="#05bb4c" font-size="14">{{xtMap.NSS_FDC && xtMap.NSS_FDC.gl}}</text>
-                    <text x="560" y="180" fill="#919697" font-size="14">风速</text>
-                    <text x="610" y="180" fill="#05bb4c" font-size="14">{{xtMap.NSS_FDC && xtMap.NSS_FDC.ssfs}}</text>
+                    <use xlink:href="#popup-box-svg" x="550" y="85" />
+                    <text x="560" y="105" fill="#919697" font-size="12">经度</text>
+                    <text x="610" y="105" fill="#05bb4c" font-size="12">{{xtMap.NSS_FDC && xtMap.NSS_FDC.jd}}</text>
+                    <text x="560" y="130" fill="#919697" font-size="12">纬度</text>
+                    <text x="610" y="130" fill="#05bb4c" font-size="12">{{xtMap.NSS_FDC && xtMap.NSS_FDC.wd}}</text>
+                    <text x="560" y="155" fill="#919697" font-size="12">海拔</text>
+                    <text x="610" y="155" fill="#05bb4c" font-size="12">{{xtMap.NSS_FDC && xtMap.NSS_FDC.hb}}</text>
+                    <text x="560" y="180" fill="#919697" font-size="12">功率</text>
+                    <text x="610" y="180" fill="#05bb4c" font-size="12">{{xtMap.NSS_FDC && xtMap.NSS_FDC.gl}}</text>
+                    <text x="560" y="205" fill="#919697" font-size="12">风速</text>
+                    <text x="610" y="205" fill="#05bb4c" font-size="12">{{xtMap.NSS_FDC && xtMap.NSS_FDC.ssfs}}</text>
                 </g>
                 <g v-show="popup[4]">
                     <!-- +5 (+10+50, +20)+25 -->
-                    <use xlink:href="#popup-box-svg" x="480" y="0" />
-                    <text x="490" y="20" fill="#919697" font-size="14">经度</text>
-                    <text x="540" y="20" fill="#05bb4c" font-size="14">{{xtMap.DWK_GDC && xtMap.DWK_GDC.jd}}</text>
-                    <text x="490" y="45" fill="#919697" font-size="14">纬度</text>
-                    <text x="540" y="45" fill="#05bb4c" font-size="14">{{xtMap.DWK_GDC && xtMap.DWK_GDC.wd}}</text>
-                    <text x="490" y="70" fill="#919697" font-size="14">海拔</text>
-                    <text x="540" y="70" fill="#05bb4c" font-size="14">{{xtMap.DWK_GDC && xtMap.DWK_GDC.hb}}</text>
-                    <text x="490" y="95" fill="#919697" font-size="14">功率</text>
-                    <text x="540" y="95" fill="#05bb4c" font-size="14">{{xtMap.DWK_GDC && xtMap.DWK_GDC.gl}}</text>
-                    <text x="490" y="120" fill="#919697" font-size="14">风速</text>
-                    <text x="540" y="120" fill="#05bb4c" font-size="14">{{xtMap.DWK_GDC && xtMap.DWK_GDC.ssfs}}</text>
+                    <use xlink:href="#popup-box-svg" x="460" y="15" />
+                    <text x="470" y="35" fill="#919697" font-size="12">经度</text>
+                    <text x="520" y="35" fill="#05bb4c" font-size="12">{{xtMap.DWK_GDC && xtMap.DWK_GDC.jd}}</text>
+                    <text x="470" y="60" fill="#919697" font-size="12">纬度</text>
+                    <text x="520" y="60" fill="#05bb4c" font-size="12">{{xtMap.DWK_GDC && xtMap.DWK_GDC.wd}}</text>
+                    <text x="470" y="85" fill="#919697" font-size="12">海拔</text>
+                    <text x="520" y="85" fill="#05bb4c" font-size="12">{{xtMap.DWK_GDC && xtMap.DWK_GDC.hb}}</text>
+                    <text x="470" y="110" fill="#919697" font-size="12">功率</text>
+                    <text x="520" y="110" fill="#05bb4c" font-size="12">{{xtMap.DWK_GDC && xtMap.DWK_GDC.gl}}</text>
+                    <text x="470" y="135" fill="#919697" font-size="12">风速</text>
+                    <text x="520" y="135" fill="#05bb4c" font-size="12">{{xtMap.DWK_GDC && xtMap.DWK_GDC.ssfs}}</text>
                 </g>
                 <g v-show="popup[5]">
                     <!-- +5 (+10+50, +20)+25 -->
-                    <use xlink:href="#popup-box-svg" x="500" y="25" />
-                    <text x="510" y="45" fill="#919697" font-size="14">经度</text>
-                    <text x="560" y="45" fill="#05bb4c" font-size="14">{{xtMap.PL_GDC && xtMap.PL_GDC.jd}}</text>
-                    <text x="510" y="70" fill="#919697" font-size="14">纬度</text>
-                    <text x="560" y="70" fill="#05bb4c" font-size="14">{{xtMap.PL_GDC && xtMap.PL_GDC.wd}}</text>
-                    <text x="510" y="95" fill="#919697" font-size="14">海拔</text>
-                    <text x="560" y="95" fill="#05bb4c" font-size="14">{{xtMap.PL_GDC && xtMap.PL_GDC.hb}}</text>
-                    <text x="510" y="120" fill="#919697" font-size="14">功率</text>
-                    <text x="560" y="120" fill="#05bb4c" font-size="14">{{xtMap.PL_GDC && xtMap.PL_GDC.gl}}</text>
-                    <text x="510" y="145" fill="#919697" font-size="14">风速</text>
-                    <text x="560" y="145" fill="#05bb4c" font-size="14">{{xtMap.PL_GDC && xtMap.PL_GDC.ssfs}}</text>
+                    <use xlink:href="#popup-box-svg" x="480" y="40" />
+                    <text x="490" y="60" fill="#919697" font-size="12">经度</text>
+                    <text x="540" y="60" fill="#05bb4c" font-size="12">{{xtMap.PL_GDC && xtMap.PL_GDC.jd}}</text>
+                    <text x="490" y="85" fill="#919697" font-size="12">纬度</text>
+                    <text x="540" y="85" fill="#05bb4c" font-size="12">{{xtMap.PL_GDC && xtMap.PL_GDC.wd}}</text>
+                    <text x="490" y="110" fill="#919697" font-size="12">海拔</text>
+                    <text x="540" y="110" fill="#05bb4c" font-size="12">{{xtMap.PL_GDC && xtMap.PL_GDC.hb}}</text>
+                    <text x="490" y="135" fill="#919697" font-size="12">功率</text>
+                    <text x="540" y="135" fill="#05bb4c" font-size="12">{{xtMap.PL_GDC && xtMap.PL_GDC.gl}}</text>
+                    <text x="490" y="160" fill="#919697" font-size="12">风速</text>
+                    <text x="540" y="160" fill="#05bb4c" font-size="12">{{xtMap.PL_GDC && xtMap.PL_GDC.ssfs}}</text>
                 </g>
                 <g v-show="popup[6]">
                     <!-- +5 (+10+50, +20)+25 -->
-                    <use xlink:href="#popup-box-svg" x="520" y="120" />
-                    <text x="530" y="140" fill="#919697" font-size="14">经度</text>
-                    <text x="580" y="140" fill="#05bb4c" font-size="14">{{xtMap.SBQ_FDC && xtMap.SBQ_FDC.jd}}</text>
-                    <text x="530" y="165" fill="#919697" font-size="14">纬度</text>
-                    <text x="580" y="165" fill="#05bb4c" font-size="14">{{xtMap.SBQ_FDC && xtMap.SBQ_FDC.wd}}</text>
-                    <text x="530" y="190" fill="#919697" font-size="14">海拔</text>
-                    <text x="580" y="190" fill="#05bb4c" font-size="14">{{xtMap.SBQ_FDC && xtMap.SBQ_FDC.hb}}</text>
-                    <text x="530" y="215" fill="#919697" font-size="14">功率</text>
-                    <text x="580" y="215" fill="#05bb4c" font-size="14">{{xtMap.SBQ_FDC && xtMap.SBQ_FDC.gl}}</text>
-                    <text x="530" y="240" fill="#919697" font-size="14">风速</text>
-                    <text x="580" y="240" fill="#05bb4c" font-size="14">{{xtMap.SBQ_FDC && xtMap.SBQ_FDC.ssfs}}</text>
+                    <use xlink:href="#popup-box-svg" x="520" y="145" />
+                    <text x="530" y="165" fill="#919697" font-size="12">经度</text>
+                    <text x="580" y="165" fill="#05bb4c" font-size="12">{{xtMap.SBQ_FDC && xtMap.SBQ_FDC.jd}}</text>
+                    <text x="530" y="190" fill="#919697" font-size="12">纬度</text>
+                    <text x="580" y="190" fill="#05bb4c" font-size="12">{{xtMap.SBQ_FDC && xtMap.SBQ_FDC.wd}}</text>
+                    <text x="530" y="215" fill="#919697" font-size="12">海拔</text>
+                    <text x="580" y="215" fill="#05bb4c" font-size="12">{{xtMap.SBQ_FDC && xtMap.SBQ_FDC.hb}}</text>
+                    <text x="530" y="240" fill="#919697" font-size="12">功率</text>
+                    <text x="580" y="240" fill="#05bb4c" font-size="12">{{xtMap.SBQ_FDC && xtMap.SBQ_FDC.gl}}</text>
+                    <text x="530" y="265" fill="#919697" font-size="12">风速</text>
+                    <text x="580" y="265" fill="#05bb4c" font-size="12">{{xtMap.SBQ_FDC && xtMap.SBQ_FDC.ssfs}}</text>
                 </g>
                 <g v-show="popup[7]">
                     <!-- +5 (+10+50, +20)+25 -->
-                    <use xlink:href="#popup-box-svg" x="530" y="150" />
-                    <text x="540" y="170" fill="#919697" font-size="14">经度</text>
-                    <text x="590" y="170" fill="#05bb4c" font-size="14">{{xtMap.MHS_FDC && xtMap.MHS_FDC.jd}}</text>
-                    <text x="540" y="195" fill="#919697" font-size="14">纬度</text>
-                    <text x="590" y="195" fill="#05bb4c" font-size="14">{{xtMap.MHS_FDC && xtMap.MHS_FDC.wd}}</text>
-                    <text x="540" y="220" fill="#919697" font-size="14">海拔</text>
-                    <text x="590" y="220" fill="#05bb4c" font-size="14">{{xtMap.MHS_FDC && xtMap.MHS_FDC.hb}}</text>
-                    <text x="540" y="245" fill="#919697" font-size="14">功率</text>
-                    <text x="590" y="245" fill="#05bb4c" font-size="14">{{xtMap.MHS_FDC && xtMap.MHS_FDC.gl}}</text>
-                    <text x="540" y="270" fill="#919697" font-size="14">风速</text>
-                    <text x="590" y="270" fill="#05bb4c" font-size="14">{{xtMap.MHS_FDC && xtMap.MHS_FDC.ssfs}}</text>
+                    <use xlink:href="#popup-box-svg" x="530" y="175" />
+                    <text x="540" y="195" fill="#919697" font-size="12">经度</text>
+                    <text x="590" y="195" fill="#05bb4c" font-size="12">{{xtMap.MHS_FDC && xtMap.MHS_FDC.jd}}</text>
+                    <text x="540" y="220" fill="#919697" font-size="12">纬度</text>
+                    <text x="590" y="220" fill="#05bb4c" font-size="12">{{xtMap.MHS_FDC && xtMap.MHS_FDC.wd}}</text>
+                    <text x="540" y="245" fill="#919697" font-size="12">海拔</text>
+                    <text x="590" y="245" fill="#05bb4c" font-size="12">{{xtMap.MHS_FDC && xtMap.MHS_FDC.hb}}</text>
+                    <text x="540" y="270" fill="#919697" font-size="12">功率</text>
+                    <text x="590" y="270" fill="#05bb4c" font-size="12">{{xtMap.MHS_FDC && xtMap.MHS_FDC.gl}}</text>
+                    <text x="540" y="295" fill="#919697" font-size="12">风速</text>
+                    <text x="590" y="295" fill="#05bb4c" font-size="12">{{xtMap.MHS_FDC && xtMap.MHS_FDC.ssfs}}</text>
                 </g>
                 <g v-show="popup[8]">
                     <!-- +5 (+10+50, +20)+25 -->
-                    <use xlink:href="#popup-box-svg" x="570" y="175" />
-                    <text x="580" y="195" fill="#919697" font-size="14">经度</text>
-                    <text x="630" y="195" fill="#05bb4c" font-size="14">{{xtMap.QS_FDC && xtMap.QS_FDC.jd}}</text>
-                    <text x="580" y="220" fill="#919697" font-size="14">纬度</text>
-                    <text x="630" y="220" fill="#05bb4c" font-size="14">{{xtMap.QS_FDC && xtMap.QS_FDC.wd}}</text>
-                    <text x="580" y="245" fill="#919697" font-size="14">海拔</text>
-                    <text x="630" y="245" fill="#05bb4c" font-size="14">{{xtMap.QS_FDC && xtMap.QS_FDC.hb}}</text>
-                    <text x="580" y="270" fill="#919697" font-size="14">功率</text>
-                    <text x="630" y="270" fill="#05bb4c" font-size="14">{{xtMap.QS_FDC && xtMap.QS_FDC.gl}}</text>
-                    <text x="580" y="295" fill="#919697" font-size="14">风速</text>
-                    <text x="630" y="295" fill="#05bb4c" font-size="14">{{xtMap.QS_FDC && xtMap.QS_FDC.ssfs}}</text>
+                    <use xlink:href="#popup-box-svg" x="580" y="195" />
+                    <text x="590" y="215" fill="#919697" font-size="12">经度</text>
+                    <text x="640" y="215" fill="#05bb4c" font-size="12">{{xtMap.QS_FDC && xtMap.QS_FDC.jd}}</text>
+                    <text x="590" y="240" fill="#919697" font-size="12">纬度</text>
+                    <text x="640" y="240" fill="#05bb4c" font-size="12">{{xtMap.QS_FDC && xtMap.QS_FDC.wd}}</text>
+                    <text x="590" y="265" fill="#919697" font-size="12">海拔</text>
+                    <text x="640" y="265" fill="#05bb4c" font-size="12">{{xtMap.QS_FDC && xtMap.QS_FDC.hb}}</text>
+                    <text x="590" y="290" fill="#919697" font-size="12">功率</text>
+                    <text x="640" y="290" fill="#05bb4c" font-size="12">{{xtMap.QS_FDC && xtMap.QS_FDC.gl}}</text>
+                    <text x="590" y="315" fill="#919697" font-size="12">风速</text>
+                    <text x="640" y="315" fill="#05bb4c" font-size="12">{{xtMap.QS_FDC && xtMap.QS_FDC.ssfs}}</text>
                 </g>
             </g>
 </g>
@@ -438,10 +435,10 @@ export default {
             r: 0,
             deg: 0,
             showPoint: false,
-            svgWidth1: document.body.scrollWidth,
-            svgHeight1: document.body.scrollHeight,
-            svgWidth: "791px",
-            svgHeight: "423px"
+            svgTop: 0,
+            svgLeft: 0,
+            svgWidth: "auto",
+            svgHeight: "auto"
         };
     },
     // 函数
@@ -478,8 +475,10 @@ export default {
 
     mounted() {
         // 渲染后
-        this.svgWidth = this.$el.scrollWidth.toFixed(0) + "px";
-        this.svgHeight = this.$el.scrollHeight.toFixed(0) + "px";
+        this.svgHeight = (this.$el.scrollHeight).toFixed(0);
+        this.svgWidth = (this.svgHeight/459*745.3).toFixed(0); // 745.3 459
+        this.svgTop = `calc(50% - ${this.svgHeight / 2 - 20}px)`;
+        this.svgLeft = `calc(50% - ${this.svgWidth / 2}px)`;
 
         this.showType = this.show;
         this.sourceMap = this.data;
@@ -549,6 +548,8 @@ export default {
 <style lang="less" scoped>
 .svg-map-nx {
     position: relative;
+    width: 100%;
+    height: 100%;
 
     svg {
         position: absolute;

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

@@ -7,7 +7,7 @@
             x="0px"
             y="0px"
             viewBox="0 0 745.3 399"
-            style="enable-background: new 0 0 745.3 399"
+            :style="'enable-background: new 0 0 745.3 399; left: '+svgLeft+'; top: '+svgTop+';'"
             xml:space="preserve"
             :width = "svgWidth"
             :height = "svgHeight"
@@ -217,8 +217,10 @@ export default {
             activeId: "",
             c1: false,
             c2: false,
-            svgWidth: "791px",
-            svgHeight: "423px"
+            svgTop: 0,
+            svgLeft: 0,
+            svgWidth: "auto",
+            svgHeight: "auto"
         };
     },
     // 函数
@@ -246,8 +248,10 @@ export default {
     },
     mounted() {
         // 渲染后
-        this.svgWidth = this.$el.scrollWidth.toFixed(0) + "px";
-        this.svgHeight = this.$el.scrollHeight.toFixed(0) + "px";
+        this.svgWidth = (this.$el.scrollWidth*0.8).toFixed(0);
+        this.svgHeight = (this.$el.scrollHeight*0.8).toFixed(0);
+        this.svgTop = `calc(50% - ${this.svgHeight / 2}px)`;
+        this.svgLeft = `calc(50% - ${this.svgWidth / 2}px)`;
     },
     beforeUpdate() {
         // 数据更新前
@@ -261,6 +265,8 @@ export default {
 <style lang="less" scoped>
 .svg-map {
     position: relative;
+    width: 100%;
+    height: 100%;
 
     svg {
         position: absolute;

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

@@ -3,7 +3,7 @@
     <Row type="flex" justify="center" :align="'middle'">
       <!-- 功率复核 PowerLoad -->
       <Col v-for="item in PowerLoad" :key="item" :span="6">
-        <dash-pie-chart :title="item.title" :value="item.value" :max="item.max" height="11.1111vh" @click="openDialog(item.dialogTitle, item.subUrl, item.targetName, item.dialogType)" />
+        <dash-pie-chart :title="item.title" :value="item.value" :max="item.max" height="10vh" @click="openDialog(item.dialogTitle, item.subUrl, item.targetName, item.dialogType)" />
       </Col>
     </Row>
   </div>

src/views/Home/components/weather.vue

@@ -123,10 +123,12 @@ export default {
 
     .text {
       color: @font-color;
+      font-size: 12px;
+      margin-bottom: 8px;
     }
 
     .value {
-      margin: 0.9259vh 0;
+      margin: 8px 0;
     }
 
     .other-icon {

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

@@ -14,6 +14,132 @@
             <div class="return">返回</div>
           </div>
         </div>
+        <div class="inverter-datas">
+          <div v-for="index of 2" :key="index" class="inverter-item">
+            <div class="inverter-item-header">
+              <div class="name">3#逆变器</div>
+              <div class="other">逆变器型号：GBL-2000</div>
+              <div class="state">
+                状态：
+                <div class="dot red"></div>
+              </div>
+            </div>
+            <div class="inverter-item-info">
+              <div class="form">
+                <table class="table-form mg-b-8">
+                  <tr>
+                    <td class="text gray">直流电机</td>
+                    <td class="value green">20.00</td>
+                    <td class="unit gray">V</td>
+                    <td class="text gray">交流无功功率</td>
+                    <td class="value green">20.00</td>
+                    <td class="unit gray">Var</td>
+                  </tr>
+                  <tr>
+                    <td class="text gray">直流电流</td>
+                    <td class="value green">19.56</td>
+                    <td class="unit gray">A</td>
+                    <td class="text gray">功率因素</td>
+                    <td class="value green">19.56</td>
+                    <td class="unit gray">Var</td>
+                  </tr>
+                  <tr>
+                    <td class="text gray">直流功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">V</td>
+                    <td class="text gray">功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">KWh</td>
+                  </tr>
+                  <tr>
+                    <td class="text gray">直流功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">V</td>
+                    <td class="text gray">功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">KWh</td>
+                  </tr>
+                  <tr>
+                    <td class="text gray">直流功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">V</td>
+                    <td class="text gray">功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">KWh</td>
+                  </tr>
+                  <tr>
+                    <td class="text gray">直流功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">V</td>
+                    <td class="text gray">功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">KWh</td>
+                  </tr>
+                  <tr>
+                    <td class="text gray">直流功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">V</td>
+                    <td class="text gray">功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">KWh</td>
+                  </tr>
+                  <tr>
+                    <td class="text gray">直流功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">V</td>
+                    <td class="text gray">功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">KWh</td>
+                  </tr>
+                  <tr>
+                    <td class="text gray">直流功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">V</td>
+                    <td class="text gray">功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">KWh</td>
+                  </tr>
+                  <tr>
+                    <td class="text gray">直流功率</td>
+                    <td class="value green">52000.20</td>
+                    <td class="unit gray">V</td>
+                    <td class="text gray"></td>
+                    <td class="value green"></td>
+                    <td class="unit gray"></td>
+                  </tr>
+                </table>
+
+                <panel class="line-panel" :title="'开网频率'">
+                  <multiple-line-chart :list="lineValue" :units="['']" height="100%" />
+                </panel>
+              </div>
+              <div class="states">
+                <div class="counts">
+                  <div class="all">
+                    <span class="text">全部状态</span>
+                    <span class="value">30</span>
+                  </div>
+                  <div class="error">
+                    <span class="text">报警状态</span>
+                    <span class="value">30</span>
+                  </div>
+                </div>
+                <div class="state-list">
+                  <el-scrollbar>
+                    <div class="list-body">
+                      <div v-for="index of 100" :key="index" class="list-item">
+                        <div class="text">主流功率</div>
+                        <div class="state">
+                          <div :class="{ red: index % 2 == 1, green: index % 2 != 1 }"></div>
+                        </div>
+                      </div>
+                    </div>
+                  </el-scrollbar>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -23,6 +149,8 @@
 import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
 import List from "@com/coms/list/list.vue";
 import util from "@/helper/util.js";
+import Panel from "../../../components/coms/panel/panel.vue";
+import MultipleLineChart from "../../../components/chart/line/multiple-line-chart.vue";
 export default {
   // 名称
   name: "Box",
@@ -30,6 +158,8 @@ export default {
   components: {
     BtnGroup2,
     List,
+    Panel,
+    MultipleLineChart,
   },
   // 数据
   data() {
@@ -91,25 +221,41 @@ export default {
           },
         ],
       },
-      grid: {
-        title: {
-          show: true,
-          icon: "fa fa-fire",
-          text: "第一号小室",
-        },
-        subTitle: {
-          show: true,
-          text: "3#逆变室",
-          subText: "逆变器型号：GBL-2000",
-        },
-        start: 0,
-        limit: 20,
-        column: [{ name: "汇流箱编号", field: "no", is_num: false, is_light: false }],
-        data: {
-          list: [],
-          total: 160,
+      lineValue: [
+        {
+          title: "平均风速",
+          value: [
+            {
+              text: "1日",
+              value: 0,
+            },
+            {
+              text: "2日",
+              value: 3,
+            },
+            {
+              text: "3日",
+              value: 2,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 4,
+            },
+            {
+              text: "6日",
+              value: 1,
+            },
+            {
+              text: "7日",
+              value: 2,
+            },
+          ],
         },
-      },
+      ],
     };
   },
   // 函数
@@ -145,68 +291,6 @@ export default {
       }
       this.list.datas.push(t);
     }
-    for (let i = 1; i <= 28; i++) {
-      let temp = { name: i + "#", field: "n" + i, is_num: false, is_light: false };
-      if (i == 11) {
-        temp.is_light = true;
-      }
-      this.grid.column.push(temp);
-    }
-    for (let i = 1; i <= 12; i++) {
-      let temp = {
-        no: "第" + i + "支电流",
-        is_light: false,
-      };
-      for (let i = 1; i <= 28; i++) {
-        temp["n" + i] = 5.9;
-      }
-      this.grid.data.list.push(temp);
-    }
-    let temp = {
-      no: "总路数",
-      is_light: true,
-    };
-    for (let i = 1; i <= 28; i++) {
-      temp["n" + i] = 8.0;
-    }
-    this.grid.data.list.push(temp);
-    temp = {
-      no: "总电流",
-      is_light: false,
-    };
-    for (let i = 1; i <= 28; i++) {
-      temp["n" + i] = 5.9;
-    }
-    this.grid.data.list.push(temp);
-    temp = {
-      no: "电压",
-      is_light: false,
-    };
-    for (let i = 1; i <= 28; i++) {
-      temp["n" + i] = 162.0;
-    }
-    this.grid.data.list.push(temp);
-    temp = {
-      no: "内部温度",
-      is_light: false,
-    };
-    for (let i = 1; i <= 28; i++) {
-      temp["n" + i] = 0.0;
-    }
-    this.grid.data.list.push(temp);
-    temp = {
-      no: "避雷信号",
-      is_light: false,
-    };
-    for (let i = 1; i <= 28; i++) {
-      temp["n" + i] = 0.0;
-    }
-    this.grid.data.list.push(temp);
-    this.grid.data.list = this.grid.data.list.concat(util.copy(this.grid.data.list));
-    this.grid.data.list = this.grid.data.list.concat(util.copy(this.grid.data.list));
-    this.grid.data.list = this.grid.data.list.concat(util.copy(this.grid.data.list));
-    this.grid.data.list = this.grid.data.list.concat(util.copy(this.grid.data.list));
-    this.grid.data.total = this.grid.data.list.length;
   },
   beforeMount() {
     // 渲染前
@@ -223,7 +307,7 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .state-green {
   width: 0.741vh;
   height: 0.741vh;
@@ -272,6 +356,7 @@ export default {
           top: 0;
           right: 0;
           display: flex;
+          color: @gray-l;
 
           & > div {
             padding: 16px;
@@ -282,6 +367,174 @@ export default {
           }
         }
       }
+
+      .inverter-datas {
+        display: flex;
+        height: calc(100% - 53px);
+
+        .inverter-item {
+          flex: 0 0 calc(50% - 4px);
+          margin: 8px 0;
+
+          .inverter-item-header {
+            color: @gray-l;
+            background: fade(@gray, 40);
+            display: flex;
+            height: 37px;
+            line-height: 37px;
+            padding: 0 16px;
+
+            .name {
+              flex: 1 0 auto;
+            }
+
+            .other {
+              margin-right: 32px;
+            }
+
+            .state {
+              display: flex;
+              align-items: center;
+              .dot {
+                width: 8px;
+                height: 8px;
+
+                &.green {
+                  background: @green;
+                }
+
+                &.yellow {
+                  background: @yellow;
+                }
+
+                &.orange {
+                  background: @orange;
+                }
+
+                &.red {
+                  background: @red;
+                }
+              }
+            }
+          }
+
+          .inverter-item-info {
+            display: flex;
+            margin-top: 8px;
+            height: calc(100% - 37px);
+
+            .form {
+              flex: 0 0 518px;
+              position: relative;
+
+              .table-form {
+                outline: 1px solid fade(@gray, 40);
+                tr td.text {
+                  text-align: left;
+                  line-height: 37px;
+                  padding: 0;
+                  padding-left: 32px;
+                }
+              }
+
+              .line-panel {
+                position: absolute;
+                bottom: 0;
+                width: 100%;
+
+                .panel-body {
+                  height: 216px;
+                }
+              }
+            }
+
+            .states {
+              flex: 1 1 auto;
+              margin-left: 8px;
+
+              .counts {
+                display: flex;
+                & > div {
+                  flex: 0 0 calc(50% - 4px);
+                  height: 37px;
+                  line-height: 37px;
+                  text-align: center;
+                  display: flex;
+                  justify-content: space-evenly;
+                  font-size: 12px;
+
+                  .value {
+                    font-family: @font-family-num;
+                    font-size: 16px;
+                  }
+                }
+
+                .all {
+                  background: fade(@gray, 40);
+                }
+
+                .error {
+                  background: @red;
+                  margin-left: 8px;
+                }
+              }
+
+              .state-list {
+                outline: 1px solid fade(@gray, 40);
+                margin-top: 8px;
+                height: calc(100% - 42px);
+
+                .list-item {
+                  display: flex;
+                  line-height: 37px;
+                  padding: 0 16px;
+                  color: @gray;
+                  background: fade(@gray, 20);
+                  font-size: @fontsize-s;
+                  align-items: center;
+
+                  &:nth-child(2n) {
+                    background: transparent;
+                  }
+
+                  .text {
+                    flex: 1 0 auto;
+                  }
+
+                  .state {
+                    width: 22px;
+                    height: 22px;
+                    margin-right: 16px;
+                    background: #010b0a;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    & > div {
+                      width: 14px;
+                      height: 14px;
+                      border-radius: 50%;
+
+                      &.green {
+                        background: @green;
+                      }
+
+                      &.red {
+                        background: @red;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+          & + .inverter-item {
+            margin-left: 8px;
+          }
+        }
+      }
     }
   }
 }