更新内容:

1. 图标显示样式调整
2. 修改浮动界面晃动问题
3. table 组件 添加 排序及点击样式
4. 风场矩阵样式修改
5. 其他样式修改及UI样式优化

src/App.vue

@@ -259,7 +259,7 @@ export default {
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: #c5c5c5;
+    background-color: fade(@gray, 75);
     -webkit-border-radius: 4px;
     outline: none;
     outline-offset: 0px;

src/assets/styles/form.less

@@ -164,22 +164,25 @@ input[type="checkbox"] {
 
   .el-select-dropdown {
     &.is-multiple .el-select-dropdown__item.selected {
-      background-color: fade(@green, 100);
+      background-color: fade(@green, 20);
       color: #fff;
       font-weight: 400;
+      border: 1px solid @green;
     }
 
     .el-select-dropdown__item {
       color: @font-color;
 
       &:hover {
-        background-color: fade(@green, 100);
+        background-color: fade(@green, 20);
         color: #fff;
       }
 
       &.selected {
-        background-color: fade(@green, 100);
+        background-color: fade(@green, 20);
         color: #fff;
+        border: 1px solid #05bb4c;
+        font-weight: 500;
       }
     }
   }

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

@@ -82,10 +82,7 @@ export default {
           backgroundColor: "rgba(0,0,0,0.4)",
           textStyle: {
             color: "#fff",
-            fontSize: util.vh(16),
-          },
-          formatter: function(param) {
-            return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
+            fontSize: 14,
           },
         },
         yAxis: {

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

@@ -174,14 +174,15 @@ export default {
   },
   methods: {
     initChart() {
+      let chart = echarts.init(this.$el);
       let option = {
         color: this.color,
         tooltip: {
           trigger: "item",
-          backgroundColor: "rgba(0,0,0,0.3)",
+          backgroundColor: "rgba(0,0,0,0.4)",
           textStyle: {
             color: "#fff",
-            fontSize: util.vh(16),
+            fontSize: 14,
           },
           formatter: function(param) {
             let marker = '<span style="display:inline-block;margin-right:0.370vh;border-radius:0.926vh;width:0.926vh;height:0.926vh;background-color:' + partten.getColor("green") + ';"></span>';
@@ -200,7 +201,7 @@ export default {
             type: "category",
             data: this.xdata,
             axisLabel: {
-              fontSize: util.vh(14),
+              fontSize: 14,
             },
           },
         ],
@@ -216,7 +217,7 @@ export default {
               },
             },
             axisLabel: {
-              fontSize: util.vh(14),
+              fontSize: 14,
             },
           },
         ],
@@ -225,7 +226,7 @@ export default {
           type: "bar",
           data: this.datas,
           itemStyle: {
-            color: partten.getColor("gray"),
+            color: partten.getColor("gray") + 50,
           },
           emphasis: {
             itemStyle: {
@@ -235,20 +236,23 @@ export default {
         },
       };
 
-      this.chart.setOption(option);
+      chart.setOption(option);
     },
   },
   created() {
     this.id = "pie-chart-" + util.newGUID();
   },
   mounted() {
-    this.$el.style.width = this.width;
-    this.$el.style.height = this.height;
-    this.chart = echarts.init(this.$el);
-    this.initChart();
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

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

@@ -85,9 +85,9 @@ export default {
           },
         },
         grid: {
-          left: util.vh(16),
-          top: util.vh(16), // 设置条形图的边s距
-          right: util.vh(80),
+          left: 16,
+          top: 16, // 设置条形图的边s距
+          right: 80,
           bottom: 0,
         },
         yAxis: [
@@ -110,7 +110,7 @@ export default {
           // 内
           {
             type: "bar",
-            barWidth: 10,
+            barWidth: 6,
             // legendHoverLink: false,
             // silent: true,
             itemStyle: {
@@ -187,7 +187,7 @@ export default {
                 },
                 textStyle: {
                   color: "#7a8385",
-                  fontSize: util.vh("14"),
+                  fontSize: 14,
                 },
                 rich: {
                   c1: {
@@ -209,8 +209,8 @@ export default {
             symbolPosition: "end",
             data: this.list,
             symbol: "triangle",
-            symbolOffset: [0, -16],
-            symbolSize: [10, 10],
+            symbolOffset: [0, -10],
+            symbolSize: [5, 5],
             symbolRotate: 180,
             itemStyle: {
               normal: {
@@ -243,9 +243,9 @@ export default {
             symbolMargin: 6,
             symbol: "rect",
             symbolClip: true,
-            symbolSize: [1, 10],
+            symbolSize: [1, 7],
             symbolPosition: "start",
-            symbolOffset: [10, -1],
+            symbolOffset: [7, -1],
             symbolBoundingData: this.total,
             symbolRotate: -15,
             data: this.list,
@@ -278,22 +278,22 @@ export default {
                 rich: {
                   f: {
                     color: "#ffffff",
-                    fontSize: util.vh("14"),
-                    lineHeight: util.vh(20),
+                    fontSize: 14,
+                    lineHeight: 20,
                   },
                   gm: {
                     backgroundColor: partten.getColor(color1),
-                    width: util.vh(8),
-                    height: util.vh(8),
-                    lineHeight: util.vh(20),
+                    width: 8,
+                    height: 8,
+                    lineHeight: 20,
                     verticalAlign: "middle",
                     borderRadius: [50, 50, 50, 50],
                   },
                   pm: {
                     backgroundColor: partten.getColor(color2),
-                    width: util.vh(8),
-                    height: util.vh(8),
-                    lineHeight: util.vh(20),
+                    width: 8,
+                    height: 8,
+                    lineHeight: 20,
                     verticalAlign: "middle",
                     borderRadius: [50, 50, 50, 50],
                   },
@@ -380,7 +380,7 @@ export default {
                 },
               },
             ],
-            barWidth: 14,
+            barWidth: 8,
           },
         ],
       };
@@ -400,7 +400,9 @@ export default {
     });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

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

@@ -72,7 +72,7 @@ export default {
   methods: {
     initChart(value, index) {
       var currColor = this.colors[index % 2];
-      var $dom = document.getElementById((this.id + (index + 1)));
+      var $dom = document.getElementById(this.id + (index + 1));
       $dom.style.width = this.width;
       $dom.style.height = `calc(${this.height} / ${this.list.length} - 4px)`;
       let chart = echarts.init($dom);
@@ -94,9 +94,9 @@ export default {
           },
         },
         grid: {
-          left: util.vh(16),
-          top: util.vh(16), // 设置条形图的边s距
-          right: util.vh(80),
+          left: 16,
+          top: 16, // 设置条形图的边s距
+          right: 80,
           bottom: 0,
         },
         yAxis: [
@@ -119,7 +119,7 @@ export default {
           // 内
           {
             type: "bar",
-            barWidth: 10,
+            barWidth: 6,
             // legendHoverLink: false,
             // silent: true,
             itemStyle: {
@@ -156,7 +156,7 @@ export default {
                 },
                 textStyle: {
                   color: "#7a8385",
-                  fontSize: util.vh("14"),
+                  fontSize: 14,
                 },
                 rich: {
                   c1: {
@@ -178,8 +178,8 @@ export default {
             symbolPosition: "end",
             data: [value],
             symbol: "triangle",
-            symbolOffset: [0, -16],
-            symbolSize: [10, 10],
+            symbolOffset: [0, -10],
+            symbolSize: [5, 5],
             symbolRotate: 180,
             itemStyle: {
               normal: {
@@ -204,9 +204,9 @@ export default {
             symbolMargin: 6,
             symbol: "rect",
             symbolClip: true,
-            symbolSize: [1, 10],
+            symbolSize: [1, 7],
             symbolPosition: "start",
-            symbolOffset: [10, -1],
+            symbolOffset: [7, -1],
             symbolBoundingData: value.total,
             symbolRotate: -15,
             data: [value],
@@ -231,14 +231,14 @@ export default {
                 rich: {
                   f: {
                     color: "#ffffff",
-                    fontSize: util.vh("14"),
-                    lineHeight: util.vh(20),
+                    fontSize: 14,
+                    lineHeight: 20,
                   },
                   gm: {
                     backgroundColor: partten.getColor(currColor),
-                    width: util.vh(8),
-                    height: util.vh(8),
-                    lineHeight: util.vh(20),
+                    width: 8,
+                    height: 8,
+                    lineHeight: 20,
                     verticalAlign: "middle",
                     borderRadius: [50, 50, 50, 50],
                   },
@@ -274,7 +274,7 @@ export default {
                 },
               },
             ],
-            barWidth: 14,
+            barWidth: 8,
           },
         ],
       };

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

@@ -142,15 +142,29 @@ export default {
       type: Array,
       default: () => ["(万KWh)", "(风速)"],
     },
+    // 显示 legend
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
+    },
   },
   data() {
     return {
       id: "",
       chart: null,
-      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
     };
   },
   computed: {
+    legend() {
+      return this.list.map((t) => {
+        return t.title;
+      });
+    },
     xdata() {
       let result = [];
       if (this.list && this.list.length > 0 && this.list[0].value.length > 0) {
@@ -170,7 +184,7 @@ export default {
             name: value,
             axisLabel: {
               formatter: "{value} ",
-              fontSize: util.vh(14),
+              fontSize: 14,
             },
             //分格线
             splitLine: {
@@ -186,7 +200,7 @@ export default {
             name: value,
             axisLabel: {
               formatter: "{value}",
-              fontSize: util.vh(14),
+              fontSize: 14,
             },
 
             //分格线
@@ -208,6 +222,9 @@ export default {
           result.push({
             name: value.title,
             type: "bar",
+            emphasis: {
+              focus: "series",
+            },
             yAxisIndex: value.yAxisIndex,
             data: value.value.map((t) => {
               return t.value;
@@ -220,24 +237,36 @@ export default {
   },
   methods: {
     initChart() {
+      let chart = echarts.init(this.$el);
+
       let option = {
         color: this.color,
         tooltip: {
-          trigger: "item",
-          backgroundColor: "rgba(0,0,0,0.3)",
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,0.4)",
           textStyle: {
             color: "#fff",
-            fontSize: util.vh(16),
+            fontSize: 14,
           },
-          formatter: function(param) {
-            return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 56,
+          icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
           },
         },
         grid: {
-          top: util.vh(32),
-          left: util.vh(40),
-          right: this.ydata.length > 1 ? util.vh(40) : util.vh(16),
-          bottom: util.vh(24),
+          top: 32,
+          left: 40,
+          right: this.ydata.length > 1 ? 40 : 14,
+          bottom: 24,
         },
         xAxis: [
           {
@@ -247,7 +276,7 @@ export default {
               type: "shadow",
             },
             axisLabel: {
-              fontSize: util.vh(14),
+              fontSize: 14,
             },
           },
         ],
@@ -255,7 +284,7 @@ export default {
         series: this.series,
       };
 
-      this.chart.setOption(option);
+      chart.setOption(option);
     },
   },
   created() {
@@ -267,7 +296,6 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
-      this.chart = echarts.init(this.$el);
       this.initChart();
     });
   },

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

@@ -191,12 +191,16 @@ export default {
       type: Boolean,
       default: true,
     },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
+    },
   },
   data() {
     return {
       id: "",
       chart: null,
-      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
     };
   },
   computed: {
@@ -219,7 +223,7 @@ export default {
             name: value,
             axisLabel: {
               formatter: "{value} ",
-              fontSize: util.vh(14),
+              fontSize: 14,
             },
             //分格线
             splitLine: {
@@ -235,7 +239,7 @@ export default {
             name: value,
             axisLabel: {
               formatter: "{value}",
-              fontSize: util.vh(14),
+              fontSize: 14,
             },
 
             //分格线
@@ -295,10 +299,10 @@ export default {
         color: this.color,
         tooltip: {
           trigger: "axis",
-          backgroundColor: partten.getColor("gray") + "99",
+          backgroundColor: "rgba(0,0,0,0.4)",
           textStyle: {
             color: "#fff",
-            fontSize: util.vh(16),
+            fontSize: 14,
           },
         },
         grid: {
@@ -315,7 +319,7 @@ export default {
               type: "shadow",
             },
             axisLabel: {
-              fontSize: util.vh(14),
+              fontSize: 14,
             },
           },
         ],
@@ -341,12 +345,16 @@ export default {
     this.id = "pie-chart-" + util.newGUID();
   },
   mounted() {
-    this.$el.style.width = this.width;
-    this.$el.style.height = this.height;
-    this.initChart();
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

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

@@ -49,6 +49,8 @@ export default {
   },
   methods: {
     initChart() {
+      let chart = echarts.init(this.$el);
+
       let option = {
         title: [
           {
@@ -57,7 +59,7 @@ export default {
             y: "35%",
             textAlign: "center",
             textStyle: {
-              fontSize: util.vh("16"),
+              fontSize: 14,
               fontWeight: "600",
               color: partten.getColor(this.colors),
               textAlign: "center",
@@ -164,17 +166,20 @@ export default {
         ],
       };
 
-      this.chart.setOption(option);
+      chart.setOption(option);
     },
   },
   mounted() {
-    this.$el.style.width = this.width;
-    this.$el.style.height = this.height;
-    this.chart = echarts.init(this.$el);
-    this.initChart();
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

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

@@ -61,6 +61,8 @@ export default {
   },
   methods: {
     initChart() {
+      let chart = echarts.init(this.$el);
+
       let option = {
         xAxis: {
           max: this.total,
@@ -77,10 +79,18 @@ export default {
             show: false,
           },
         },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
         grid: {
-          left: util.vh(16),
-          top: util.vh(16), // 设置条形图的边s距
-          right: util.vh(80),
+          left: 16,
+          top: 16, // 设置条形图的边s距
+          right: 80,
           bottom: 0,
         },
         yAxis: [
@@ -367,21 +377,23 @@ export default {
         ],
       };
 
-      this.chart.setOption(option);
+      chart.setOption(option);
     },
   },
   created() {
     this.id = "pie-chart-" + util.newGUID();
   },
   mounted() {
-      debugger
-    this.$el.style.width = this.width;
-    this.$el.style.height = this.height;
-    this.chart = echarts.init(this.$el);
-    this.initChart();
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

src/components/chart/bar/thermometer.vue

@@ -1,316 +1,316 @@
 <template>
-    <div class="thermometer"></div>
+  <div class="thermometer"></div>
 </template>
 
 <script>
 import * as echarts from "echarts";
 export default {
-    // 名称
-    name: "thermometer",
-    // 使用组件
-    components: {},
-    // 传入参数
-    props: {
-        width: {
-            type: String,
-            default: "9.259vh",
-        },
-        height: {
-            type: String,
-            default: "11.111vh",
-        },
-        min: {
-            type: Number,
-            default: -20,
-        },
-        max: {
-            type: Number,
-            default: 100,
-        },
-        value: {
-            type: Number,
-            default: 36.6,
-        },
-        title: {
-            type: String,
-            default: "温度",
-        },
+  // 名称
+  name: "thermometer",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    width: {
+      type: String,
+      default: "9.259vh",
     },
-    // 自定义事件
-    emits: {},
-    // 数据
-    data() {
-        return {
-            option: {}
-        };
+    height: {
+      type: String,
+      default: "11.111vh",
     },
-    // 函数
-    methods: {
-        initChart: function () {
-            const chart = echarts.init(this.$el);
-            let kd = []; // 刻度
-            for (var i = 0, len = 135; i <= len; i++) {
-                if (i < 30 || i > 130) {
-                    kd.push("");
-                } else {
-                    if ((i - 30) % 20 === 0) {
-                        kd.push("-3");
-                    } else if ((i - 30) % 4 === 0) {
-                        kd.push("-1");
-                    } else {
-                        kd.push("");
-                    }
-                }
-            }
-            let width = this.$el.offsetWidth;
-            this.option = {
-                backgroundColor: "transparent",
-                grid: {
-                    top: "0",
-                    left: "0",
-                    right: "0",
-                    bottom: "45%",
-                },
-                yAxis: [
-                    {
-                        axisLine: {
-                            show: false,
-                        },
-                        axisLabel: {
-                            show: false,
-                        },
-                        axisTick: {
-                            show: false,
-                        },
-                        splitLine: {
-                            show: false,
-                        },
-                    },
-                    {
-                        show: false,
-                        data: [],
-                        min: 0,
-                        max: 135,
-                        axisLine: {
-                            show: false,
-                        },
-                    },
-                ],
-                xAxis: [
-                    {
-                        axisTick: "none",
-                        axisLine: "none",
-                        offset: 0,
-                        data: [this.title],
-                        axisLabel: {
-                            show: true,
-                            textStyle: {
-                                color: "#606769",
-                                fontSize: "14",
-                            },
-                            lineHeight: 40,
-                        },
-                        splitLine: {
-                            show: false,
-                        },
-                    },
-                    {
-                        axisTick: "none",
-                        axisLabel: {
-                            show: false,
-                        },
-                        data: [0],
-                        splitLine: {
-                            show: false,
-                        },
-                        axisLine: {
-                            show: false,
-                        },
-                    },
-                    {
-                        name: "单位：件",
-                        nameGap: "50",
-                        data: [],
-                        splitLine: {
-                            show: false,
-                        },
-                        axisLine: {
-                            show: false,
-                            color: "#ffffff",
-                        },
-                    },
-                    {
-                        show: false,
-                        min: 0 - width * 0.35,
-                        max: width * 0.5,
-                    },
-                ],
-                series: [
-                    {
-                        name: "℃",
-                        type: "bar",
-                        yAxisIndex: 0,
-                        xAxisIndex: 0,
-                        label: {
-                            show: true,
-                            position: "top",
-                            formatter: "{back|" + "{c}" + "}",
-                            rich: {
-                                back: {
-                                    align: "right",
-                                    lineHeight: 14,
-                                    fontSize: 14,
-                                    fontFamily: "微软雅黑",
-                                    color: "#05bb4c",
-                                },
-                            },
-                            offset: [25, 15],
-                        },
-                        data: [this.value],
-                        barWidth: 5,
-                        itemStyle: {
-                            normal: {
-                                color: "#05bb4c",
-                            },
-                        },
-                        z: 2,
-                    },
-                    {
-                        name: "温度背景框",
-                        type: "bar",
-                        yAxisIndex: 0,
-                        xAxisIndex: 1,
-                        barGap: "-100%",
-                        data: [99],
-                        barWidth: 8,
-                        itemStyle: {
-                            normal: {
-                                color: "#040c0b",
-                                barBorderRadius: 5,
-                            },
-                        },
-                        z: 1,
-                    },
-                    {
-                        name: "外框",
-                        type: "bar",
-                        yAxisIndex: 0,
-                        xAxisIndex: 2,
-                        barGap: "-100%",
-                        data: [100],
-                        barWidth: width * 0.1,
-                        itemStyle: {
-                            normal: {
-                                color: "#606769",
-                                barBorderRadius: width * 0.5,
-                            },
-                        },
-                        z: 0,
-                    },
-                    {
-                        name: "外圆",
-                        type: "scatter",
-                        hoverAnimation: false,
-                        data: [0],
-                        yAxisIndex: 0,
-                        xAxisIndex: 2,
-                        symbolSize: width * 0.15,
-                        itemStyle: {
-                            normal: {
-                                color: "#05bb4c",
-                                opacity: 1,
-                            },
-                        },
-                        z: 2,
-                    },
-                    {
-                        name: "白圆",
-                        type: "scatter",
-                        hoverAnimation: false,
-                        data: [0],
-                        yAxisIndex: 0,
-                        xAxisIndex: 1,
-                        symbolSize: width * 0.2,
-                        itemStyle: {
-                            normal: {
-                                color: "#040c0b",
-                                opacity: 1,
-                            },
-                        },
-                        z: 1,
-                    },
-                    {
-                        name: "外圆",
-                        type: "scatter",
-                        hoverAnimation: false,
-                        data: [0],
-                        yAxisIndex: 0,
-                        xAxisIndex: 2,
-                        symbolSize: width * 0.23,
-                        itemStyle: {
-                            normal: {
-                                color: "#606769",
-                                opacity: 1,
-                            },
-                        },
-                        z: 0,
-                    },
-                    {
-                        name: "刻度",
-                        type: "bar",
-                        yAxisIndex: 1,
-                        xAxisIndex: 3,
-                        label: {
-                            normal: {
-                                show: false,
-                            },
-                        },
-                        barGap: "100%",
-                        data: kd,
-                        barWidth: 1,
-                        itemStyle: {
-                            normal: {
-                                color: "#606769",
-                                barBorderRadius: width * 1.2,
-                            },
-                        },
-                        z: 0,
-                    },
-                ],
-            };
-            chart.setOption(this.option);
-        },
-        setValue: function () {
-            this.option.series[0].data[0] = this.value;
-            const chart = echarts.getInstanceByDom(this.$el);
-            chart.setOption(this.option);
-        }
-    },
-    // 生命周期钩子
-    beforeCreate() {
-        // 创建前
+    min: {
+      type: Number,
+      default: -20,
     },
-    created() {
-        // 创建后
+    max: {
+      type: Number,
+      default: 100,
     },
-    beforeMount() {
-        // 渲染前
+    value: {
+      type: Number,
+      default: 36.6,
     },
-    mounted() {
-        // 渲染后
-        this.$nextTick(() => {
-            this.$el.style.width = this.width;
-            this.$el.style.height = this.height;
-            this.initChart();
-        });
+    title: {
+      type: String,
+      default: "温度",
     },
-    beforeUpdate() {
-        // 数据更新前
+  },
+  // 自定义事件
+  emits: {},
+  // 数据
+  data() {
+    return {
+      option: {},
+    };
+  },
+  // 函数
+  methods: {
+    initChart: function() {
+      const chart = echarts.init(this.$el);
+      let kd = []; // 刻度
+      for (var i = 0, len = 135; i <= len; i++) {
+        if (i < 30 || i > 130) {
+          kd.push("");
+        } else {
+          if ((i - 30) % 20 === 0) {
+            kd.push("-3");
+          } else if ((i - 30) % 4 === 0) {
+            kd.push("-1");
+          } else {
+            kd.push("");
+          }
+        }
+      }
+      let width = this.$el.offsetWidth;
+      this.option = {
+        backgroundColor: "transparent",
+        grid: {
+          top: "0",
+          left: "0",
+          right: "0",
+          bottom: "45%",
+        },
+        yAxis: [
+          {
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          {
+            show: false,
+            data: [],
+            min: 0,
+            max: 135,
+            axisLine: {
+              show: false,
+            },
+          },
+        ],
+        xAxis: [
+          {
+            axisTick: "none",
+            axisLine: "none",
+            offset: 0,
+            data: [this.title],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#606769",
+                fontSize: "14",
+              },
+              lineHeight: 40,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          {
+            axisTick: "none",
+            axisLabel: {
+              show: false,
+            },
+            data: [0],
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+          },
+          {
+            name: "单位：件",
+            nameGap: "50",
+            data: [],
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+              color: "#ffffff",
+            },
+          },
+          {
+            show: false,
+            min: 0 - width * 0.35,
+            max: width * 0.5,
+          },
+        ],
+        series: [
+          {
+            name: "℃",
+            type: "bar",
+            yAxisIndex: 0,
+            xAxisIndex: 0,
+            label: {
+              show: true,
+              position: "top",
+              formatter: "{back|" + "{c}" + "}",
+              rich: {
+                back: {
+                  align: "right",
+                  lineHeight: 14,
+                  fontSize: 14,
+                  fontFamily: "微软雅黑",
+                  color: "#05bb4c",
+                },
+              },
+              offset: [25, 15],
+            },
+            data: [this.value],
+            barWidth: 5,
+            itemStyle: {
+              normal: {
+                color: "#05bb4c",
+              },
+            },
+            z: 2,
+          },
+          {
+            name: "温度背景框",
+            type: "bar",
+            yAxisIndex: 0,
+            xAxisIndex: 1,
+            barGap: "-100%",
+            data: [99],
+            barWidth: 8,
+            itemStyle: {
+              normal: {
+                color: "#040c0b",
+                barBorderRadius: 5,
+              },
+            },
+            z: 1,
+          },
+          {
+            name: "外框",
+            type: "bar",
+            yAxisIndex: 0,
+            xAxisIndex: 2,
+            barGap: "-100%",
+            data: [100],
+            barWidth: width * 0.1,
+            itemStyle: {
+              normal: {
+                color: "#606769",
+                barBorderRadius: width * 0.5,
+              },
+            },
+            z: 0,
+          },
+          {
+            name: "外圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            yAxisIndex: 0,
+            xAxisIndex: 2,
+            symbolSize: width * 0.15,
+            itemStyle: {
+              normal: {
+                color: "#05bb4c",
+                opacity: 1,
+              },
+            },
+            z: 2,
+          },
+          {
+            name: "白圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            yAxisIndex: 0,
+            xAxisIndex: 1,
+            symbolSize: width * 0.2,
+            itemStyle: {
+              normal: {
+                color: "#040c0b",
+                opacity: 1,
+              },
+            },
+            z: 1,
+          },
+          {
+            name: "外圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            yAxisIndex: 0,
+            xAxisIndex: 2,
+            symbolSize: width * 0.23,
+            itemStyle: {
+              normal: {
+                color: "#606769",
+                opacity: 1,
+              },
+            },
+            z: 0,
+          },
+          {
+            name: "刻度",
+            type: "bar",
+            yAxisIndex: 1,
+            xAxisIndex: 3,
+            label: {
+              normal: {
+                show: false,
+              },
+            },
+            barGap: "100%",
+            data: kd,
+            barWidth: 1,
+            itemStyle: {
+              normal: {
+                color: "#606769",
+                barBorderRadius: width * 1.2,
+              },
+            },
+            z: 0,
+          },
+        ],
+      };
+      chart.setOption(this.option);
     },
-    updated() {
-        // 数据更新后
-        this.setValue();
+    setValue: function() {
+      this.option.series[0].data[0] = this.value;
+      const chart = echarts.getInstanceByDom(this.$el);
+      chart.setOption(this.option);
     },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+    this.setValue();
+  },
 };
 </script>
 

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

@@ -43,21 +43,40 @@ export default {
       type: Array,
       default: () => [200, 350, 400, 500, 600, 700, 800, 900, 1200],
     },
+    lineName: {
+      type: String,
+      default: "损失电量",
+    },
     // 单位
     units: {
       type: Array,
       default: () => ["(万KWh)", "(风速)"],
     },
+    // 显示 legend
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
+    },
   },
   data() {
     return {
       id: "",
       chart: null,
-      color: ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
     };
   },
+  computed: {
+    legend() {
+      return this.bardata.legend;
+    },
+  },
   methods: {
     initChart() {
+      let chart = echarts.init(this.$el);
       let option = {
         color: this.color,
         grid: {
@@ -67,16 +86,26 @@ export default {
           top: 16,
           containLabel: true,
         },
+        legend: {
+          show: this.showLegend,
+          data: this.bardata.legend,
+          right: 56,
+          icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
         tooltip: {
-          trigger: "item",
+          trigger: "axis",
           backgroundColor: "rgba(0,0,0,0.4)",
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),
           },
-          formatter: function(param) {
-            return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
-          },
         },
         yAxis: [
           {
@@ -138,6 +167,7 @@ export default {
         ],
         series: [],
       };
+      // bar data
       for (var i = 0; i < this.bardata.legend.length; i++) {
         option.series.push({
           name: this.bardata.legend[i],
@@ -148,17 +178,24 @@ export default {
             show: false,
             position: "insideRight",
           },
+          emphasis: {
+            focus: "series",
+          },
           data: this.bardata.data[i],
         });
       }
 
-      if (this.lineData.length > 0)
+      // line data
+      if (this.lineData.length > 0) {
         option.series.push({
-          name: "损失电量",
+          name: this.lineName,
           type: "line",
           data: this.lineData,
           smooth: false, //平滑展示
           xAxisIndex: 1,
+          emphasis: {
+            focus: "series",
+          },
           lineStyle: {
             color: partten.getColor("green"),
           },
@@ -166,8 +203,9 @@ export default {
             color: partten.getColor("green"),
           },
         });
+      }
 
-      this.chart.setOption(option);
+      chart.setOption(option);
     },
   },
   created() {
@@ -177,12 +215,13 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
-      this.chart = echarts.init(this.$el);
       this.initChart();
     });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

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

@@ -48,35 +48,60 @@ export default {
       type: Array,
       default: () => ["健康趋势", "风机健康状态数量"],
     },
+    // 显示 legend
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => ["#05bb4c", "#4b55ae", "#e17e23", "#02BB4C", "#EDB32F", "#EDEB2F"],
+    },
   },
   data() {
     return {
       id: "",
       chart: null,
-      color: ["#05bb4c", "#4b55ae", "#e17e23", "#02BB4C", "#EDB32F", "#EDEB2F"],
-      // color: ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
     };
   },
+
+  computed: {
+    legend() {
+      return this.bardata.legend;
+    },
+  },
   methods: {
     initChart() {
+      let chart = echarts.init(this.$el);
       let option = {
         color: this.color,
         grid: {
-          left: 40,
+          left: 16,
           right: 16,
-          bottom: 16,
-          top: 40,
+          bottom: 0,
+          top: 32,
           containLabel: true,
         },
         tooltip: {
-          trigger: "item",
+          trigger: "axis",
           backgroundColor: "rgba(0,0,0,0.4)",
           textStyle: {
             color: "#fff",
-            fontSize: util.vh(16),
+            fontSize: 14,
           },
-          formatter: function(param) {
-            return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.bardata.legend,
+          right: 120,
+          icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
           },
         },
         xAxis: [
@@ -142,7 +167,8 @@ export default {
         series: [],
       };
 
-      if (this.lineData.length > 0)
+      // line data
+      if (this.lineData.length > 0) {
         option.series.push({
           name: this.units[0],
           type: "line",
@@ -151,14 +177,19 @@ export default {
           yAxisIndex: 0,
           lineStyle: {
             // color: partten.getColor("green"),
-            color: '#323E6F'
+            color: "#323E6F",
+          },
+          emphasis: {
+            focus: "series",
           },
           itemStyle: {
             // color: partten.getColor("green"),
-            color: '#323E6F'
+            color: "#323E6F",
           },
         });
+      }
 
+      // bar data
       for (var i = 0; i < this.bardata.legend.length; i++) {
         option.series.push({
           name: this.bardata.legend[i],
@@ -170,11 +201,14 @@ export default {
             show: false,
             position: "insideRight",
           },
+          emphasis: {
+            focus: "series",
+          },
           data: this.bardata.data[i],
         });
       }
 
-      this.chart.setOption(option);
+      chart.setOption(option);
     },
   },
   created() {
@@ -184,12 +218,13 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
-      this.chart = echarts.init(this.$el);
       this.initChart();
     });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

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

@@ -156,6 +156,7 @@ export default {
           lineStyle: {
             normal: {
               color: this.color[index],
+              width: 1,
             },
           },
           yAxisIndex: value.yAxisIndex,
@@ -194,7 +195,7 @@ export default {
         color: this.color,
         tooltip: {
           trigger: "axis",
-          backgroundColor: partten.getColor("gray") + "55",
+          backgroundColor: "rgba(0,0,0,0.4)",
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),

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

@@ -257,10 +257,35 @@ export default {
           lineStyle: {
             normal: {
               color: this.color[index],
+              width: 1,
             },
           },
           areaStyle: {
             normal: {
+              color:
+                index == 0
+                  ? new echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: this.hexToRgba(this.color[index], 0.3),
+                        },
+                        {
+                          offset: 1,
+                          color: this.hexToRgba(this.color[index], 0.1),
+                        },
+                      ],
+                      false
+                    )
+                  : "transparent",
+              shadowColor: this.hexToRgba(this.color[index], 0.1),
+              shadowBlur: 10,
+            },
+            emphasis: {
               color: new echarts.graphic.LinearGradient(
                 0,
                 0,
@@ -282,6 +307,10 @@ export default {
               shadowBlur: 10,
             },
           },
+          tooltip: {
+            show: true,
+            position: [10, 10],
+          },
           yAxisIndex: value.yAxisIndex,
           data: value.value.map((t) => {
             return t.value;
@@ -329,21 +358,17 @@ export default {
     },
     resize() {},
     initChart() {
-      const chart = echarts.init(this.$el);
+      let chart = echarts.init(this.$el);
 
       let option = {
         color: this.color,
         tooltip: {
-          trigger: "axis",
+          trigger: "item",
           axisPointer: {
             type: "shadow",
-            label: {
-              backgroundColor: "#6a7985",
-            },
           },
-          backgroundColor: partten.getColor("gray") + "99",
+          backgroundColor: "rgba(0,0,0,0.4)",
           textStyle: {
-            color: "#fff",
             fontSize: util.vh(16),
           },
         },

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

@@ -179,6 +179,7 @@ export default {
           lineStyle: {
             normal: {
               color: this.color[index],
+              width: 1,
             },
           },
           yAxisIndex: value.yAxisIndex,
@@ -199,7 +200,7 @@ export default {
         color: this.color,
         tooltip: {
           trigger: "axis",
-          backgroundColor: partten.getColor("gray") + "55",
+          backgroundColor: "rgba(0,0,0,0.4)",
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),

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

@@ -260,7 +260,7 @@ export default {
         },
         tooltip: {
           trigger: "axis",
-          backgroundColor: partten.getColor("gray") + "55",
+          backgroundColor: "rgba(0,0,0,0.4)",
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),
@@ -327,6 +327,7 @@ export default {
             lineStyle: {
               normal: {
                 color: this.colorValue,
+                width: 1,
               },
             },
             label: {
@@ -337,9 +338,6 @@ export default {
               shadowColor: this.colorValue,
               shadowBlur: 4,
             },
-            tooltip: {
-              show: false,
-            },
           },
         ],
       };
@@ -357,12 +355,16 @@ export default {
     this.id = "pie-chart-" + util.newGUID();
   },
   mounted() {
-    this.$el.style.width = this.width;
-    this.$el.style.height = this.height;
-    this.initChart();
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
   unmounted() {
     window.removeEventListener("resize", this.resize);

src/components/chart/other/Dashboard.vue

@@ -37,6 +37,7 @@ export default {
   computed: {},
   methods: {
     initChart() {
+      let chart = echarts.init(this.$el);
       let option = {
         tooltip: {
           formatter: "{a} <br/>{b} : {c}%",
@@ -207,7 +208,7 @@ export default {
         ],
       };
 
-      this.chart.setOption(option);
+      chart.setOption(option);
     },
   },
   created() {
@@ -217,12 +218,13 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
-      this.chart = echarts.init(this.$el);
       this.initChart();
     });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

src/components/chart/other/Dashboard2.vue

@@ -37,6 +37,8 @@ export default {
   computed: {},
   methods: {
     initChart() {
+      let chart = echarts.init(this.$el);
+
       let value = this.value;
       let option = {
         grid: {
@@ -57,9 +59,9 @@ export default {
               lineStyle: {
                 width: 8,
                 color: [
-                  [0, partten.getColor("gray")],
+                  [0, partten.getColor("gray") + "33"],
                   [value / 100, partten.getColor("green")],
-                  [1, partten.getColor("gray")],
+                  [1, partten.getColor("gray") + "33"],
                 ],
               },
             },
@@ -114,7 +116,7 @@ export default {
                 width: 1,
                 color: [
                   [this.value / 100, partten.getColor("green")],
-                  [1, "#fff"],
+                  [1, "#fff5"],
                 ],
               },
             },
@@ -132,7 +134,7 @@ export default {
         ],
       };
 
-      this.chart.setOption(option);
+      chart.setOption(option);
     },
   },
   created() {
@@ -142,12 +144,13 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
-      this.chart = echarts.init(this.$el);
       this.initChart();
     });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

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

@@ -46,7 +46,7 @@ export default {
     },
     initChart() {
       var mercuryColor = "#05BB4C";
-      var borderColor = "#B3BDC0";
+      var borderColor = partten.getColor("gray");
 
       let option = {
         grid: {
@@ -87,7 +87,6 @@ export default {
             show: false,
             min: -35, //根据容器大小调整此处最小值和最大值，以正常显示刻度
             max: 80,
-
           },
         ],
         series: [
@@ -114,12 +113,12 @@ export default {
             xAxisIndex: 2,
             barGap: "-100%",
             data: [100],
-            barWidth: 20,
+            barWidth: 18,
             itemStyle: {
               normal: {
                 color: "transparent",
                 barBorderRadius: 50,
-                borderWidth: 2,
+                borderWidth: 1,
                 borderColor: borderColor,
               },
             },
@@ -179,7 +178,9 @@ export default {
     });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

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

@@ -46,7 +46,7 @@ export default {
     },
     initChart() {
       var mercuryColor = "#05BB4C";
-      var borderColor = "#B3BDC0";
+      var borderColor = partten.getColor("gray");
 
       let option = {
         grid: {
@@ -113,12 +113,12 @@ export default {
             yAxisIndex: 2,
             barGap: "-100%",
             data: [100],
-            barWidth: 20,
+            barWidth: 18,
             itemStyle: {
               normal: {
                 color: "transparent",
                 barBorderRadius: 50,
-                borderWidth: 2,
+                borderWidth: 1,
                 borderColor: borderColor,
               },
             },

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

@@ -31,6 +31,16 @@ export default {
       type: Number,
       default: 42.1,
     },
+    // 最小值
+    min: {
+      type: Number,
+      default: 0,
+    },
+    // 最大值
+    max: {
+      type: Number,
+      default: 100,
+    },
     // 颜色 传入 green yellow等 (partten中支持的颜色)
     color: {
       type: String,
@@ -76,15 +86,15 @@ export default {
               lineStyle: {
                 color: [
                   [
-                    this.value / 100,
+                    this.value / this.max,
                     new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                       {
                         offset: 0,
-                        color: partten.getColor(this.color) + '01',
+                        color: partten.getColor(this.color) + "01",
                       },
                       {
                         offset: 1,
-                        color: partten.getColor(this.color)+ 'ff',
+                        color: partten.getColor(this.color) + "ff",
                       },
                     ]),
                   ],
@@ -111,8 +121,8 @@ export default {
             name: "指针",
             type: "gauge",
             z: 2,
-            min: 0,
-            max: 100,
+            min: this.min,
+            max: this.max,
             radius: "100%",
             axisLine: {
               show: false,
@@ -161,8 +171,8 @@ export default {
             type: "gauge",
             //  center: ['20%', '50%'],
             radius: "100%",
-            min: 0, //最小刻度
-            max: 100, //最大刻度
+            min: this.min, //最小刻度
+            max: this.max, //最大刻度
             splitNumber: 10, //刻度数量
             startAngle: 225,
             endAngle: -45,

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

@@ -94,7 +94,7 @@ export default {
         color: ["#1893ce", "#edbf00", "#039178", "#ae4802", "#ea8b00"],
         tooltip: {
           trigger: "item",
-          backgroundColor: "rgba(0,0,0,0.3)",
+          backgroundColor: "rgba(0,0,0,0.4)",
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),

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

@@ -60,7 +60,7 @@ export default {
         color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
         tooltip: {
           trigger: "item",
-          backgroundColor: "rgba(0,0,0,0.3)",
+          backgroundColor: "rgba(0,0,0,0.4)",
           textStyle: {
             color: "#fff",
             fontSize: util.vh(16),

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

@@ -24,6 +24,10 @@ export default {
       type: Number,
       default: 10,
     },
+    max: {
+      type: Number,
+      default: 100,
+    },
     // 颜色 green yellow 等 partten支持的颜色
     color: {
       type: String,
@@ -60,7 +64,7 @@ export default {
                 },
               },
               {
-                value: 100 - this.value,
+                value: this.max - this.value,
                 name: "",
                 itemStyle: {
                   color: "transparent",
@@ -86,7 +90,7 @@ export default {
                 },
               },
               {
-                value: 100 - this.value,
+                value: this.max - this.value,
                 name: "",
                 itemStyle: {
                   color: "#5f6769",

src/components/coms/btn/btn-group-double.vue

@@ -136,7 +136,8 @@ export default {
 
       &.active {
         color: @write;
-        background-color: @darkBlue;
+        background-color: fade(@darkBlue, 60);
+        border-color: fade(@darkBlue, 60);
       }
     }
   }

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

@@ -1,17 +1,19 @@
 <template>
-  <div class="com-collapse">
-    <div class="collapse-box" v-for="(menu, i) in list" :key="menu" :class="{ active: menuIndex == i }">
-      <div class="box-text" @click="menuClick(i)">
-        {{ menu.text }}
-      </div>
-      <div class="collapse-items">
-        <div class="item" v-for="(item, j) in menu.children" :key="item" @click.stop="itemClick(item, j)" :class="{ active: itemIndex == j }">
-          <span class="dot" :class="'bg-' + item.color"></span>
-          <span class="value"> {{ item.text }}</span>
+  <el-scrollbar>
+    <div class="com-collapse" :style="{ height: allowScroll ? scrollHeight : 'auto' }">
+      <div class="collapse-box" v-for="(menu, i) in list" :key="menu" :class="{ active: menuIndex == i }">
+        <div class="box-text" @click="menuClick(i)">
+          {{ menu.text }}
+        </div>
+        <div class="collapse-items">
+          <div class="item" v-for="(item, j) in menu.children" :key="item" @click.stop="itemClick(item, j)" :class="{ active: itemIndex == j }">
+            <span class="dot" :class="'bg-' + item.color"></span>
+            <span class="value"> {{ item.text }}</span>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </el-scrollbar>
 </template>
 
 <script>
@@ -90,6 +92,14 @@ export default {
         },
       ],
     },
+    allowScroll: {
+      type: Boolean,
+      default: false,
+    },
+    scrollHeight: {
+      type: String,
+      default: "100%",
+    },
   },
   // 自定义事件
   emits: {

src/components/coms/table/table.vue

@@ -2,25 +2,28 @@
   <table class="com-table">
     <thead>
       <tr>
-        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }">{{ col.name }}</th>
+        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" @click="onSort(col)">{{ col.name }}</th>
       </tr>
     </thead>
-    <tbody :class="{ scroll: canScroll }">
-      <tr v-for="(row, index) of data.data" :key="index">
-        <td
-          v-for="(col, i) of data.column"
-          :key="i"
-          :class="{
-            light: hoverRow == row || hoverCol == col,
-            num: col.is_num,
-            'always-light': col.is_light || row.is_light,
-          }"
-          v-html="template(col, row[col.field])"
-          @mouseenter="hover(row, col)"
-          @mouseleave="leave()"
-        ></td>
-      </tr>
-    </tbody>
+    <el-scrollbar>
+      <tbody>
+        <tr v-for="(row, index) of tableData" :key="index">
+          <td
+            v-for="(col, i) of data.column"
+            :key="i"
+            :class="{
+              light: hoverRow == row || hoverCol == col,
+              num: col.is_num,
+              'always-light': col.is_light || row.is_light,
+            }"
+            v-html="template(col, row[col.field])"
+            @click="onClick(col, row)"
+            @mouseenter="hover(row, col)"
+            @mouseleave="leave()"
+          ></td>
+        </tr>
+      </tbody>
+    </el-scrollbar>
   </table>
 </template>
 
@@ -40,6 +43,8 @@ export default {
                         is_num: false, // 是否为数字
                         is_light: false, // 是否高亮
                         template:function(){ }
+                        click:function(){} //点击事件
+                        sortable:fasle // 排序
                     },{
                         name: "冷却风温度",
                         field: "lqf",
@@ -71,10 +76,53 @@ export default {
     return {
       hoverRow: -1,
       hoverCol: -1,
+      sortCol: "",
+      sortType: "",
     };
   },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = JSON.parse(JSON.stringify(this.data.data));
+
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
+
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+
+        return data;
+      }
+    },
+  },
   // 函数
   methods: {
+    onClick(col, data) {
+      if (col.click) col.click(event, data);
+    },
+    onSort(col) {
+      if (col.sortable == true) {
+        this.sortCol = col.field;
+        switch (this.sortType) {
+          case "":
+            this.sortType = "DESC";
+            break;
+          case "DESC":
+            this.sortType = "ASC";
+            break;
+          case "ASC":
+            this.sortType = "";
+            break;
+        }
+      }
+    },
     template(col, data) {
       if (!col.template) return data;
       else return col.template(data);
@@ -134,6 +182,7 @@ export default {
         font-size: @fontsize-s;
         position: sticky;
         top: 0;
+        cursor: pointer;
 
         &.light,
         &.always-light {

src/helper/partten.js

@@ -7,6 +7,8 @@ const color = [
     { key: "purple", value: "#4B55AE" },
     { key: "orange", value: "#e17e23" },
     { key: "blue", value: "#1a93cf" },
+    { key: "red", value: "#BA3237" },
+    { key: "pink", value: "#c531c7" },
 ];
 
 function getColor(key) {

src/router/index.js

@@ -60,8 +60,9 @@ const routes = [
     }, {
       path: 'map1/:wpId',
       component: () => import(/* webpackChunkName: "windsitemap1" */ '../views/WindSite/pages/Map1.vue'),
-    },{
-      path: 'boosterstation', // AGC 监视
+    }, 
+    {
+      path: 'boosterstation', // 升压站
       component: () => import(/* webpackChunkName: "boosterstation" */ '../views/WindSite/pages/BoosterStation.vue'),
     },]
   },

src/views/Decision/Decision1.vue

@@ -37,8 +37,6 @@
           <div class="lable">结束日期：</div>
           <div class="search-input">
             <el-date-picker v-model="value5" type="date" placeholder="选择日期" popper-class="date-select"> </el-date-picker>
-            <div class="unit svg-icon svg-icon-gray">
-            </div>
           </div>
         </div>
       </div>
@@ -84,7 +82,7 @@
               </div>
             </div>
           </template>
-          <bar-line-chart :height="'calc(100vh - 200px)'" />
+          <bar-line-chart :height="'calc(100vh - 200px)'" :color="barColor" />
         </toolbar-panel>
       </el-col>
       <el-col :span="12" class="pd-l-8">
@@ -103,6 +101,8 @@ import BarLineChart from "../../components/chart/combination/bar-line-chart.vue"
 import Panel from "../../components/coms/panel/panel.vue";
 import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
 import Table from "../../components/coms/table/table.vue";
+import partten from "@/helper/partten.js";
+
 export default {
   components: { ToolbarPanel, BarLineChart, Panel, Table },
   data() {
@@ -224,6 +224,7 @@ export default {
           label: "北京烤鸭",
         },
       ],
+      barColor: [partten.getColor("green"), partten.getColor("orange"), partten.getColor("yellow"), partten.getColor("red"), partten.getColor("purple"), partten.getColor("blue")],
       value1: [],
       value2: [],
       value3: [],

src/views/Decision/Decision2.vue

@@ -78,21 +78,22 @@
     </el-row>
     <div>
       <panel title="日度损失电量分析">
-        <multiple-hover-bar-chart height="240px" :customerTooltip="true" @tooltip="tooltip" />
+        <multiple-bar-chart :list="barchart" height="240px" :customerTooltip="true" @tooltip="tooltip" />
       </panel>
     </div>
   </div>
 </template>
 
 <script>
-import MultipleHoverBarChart from "../../components/chart/bar/multiple-hover-bar-chart.vue";
+import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
 import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
 import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 import Panel from "../../components/coms/panel/panel.vue";
 import Table from "../../components/coms/table/table.vue";
 export default {
-  components: { Panel, Table, SvgIcon, DualPieChart, MultipleHoverBarChart },
+  components: { Panel, Table, SvgIcon, DualPieChart, MultipleBarChart },
   data() {
+    let that = this;
     return {
       tableData: {
         column: [
@@ -110,12 +111,23 @@ export default {
             template: function() {
               return "<input class='check' type='CheckBox' >";
             },
+            click: function(event, data) {
+              // checkbox 事件
+              // event.target checkbox or td 需进行判断
+              // event.target.checked 判断 checkbox 是否选中
+              // data  当前数据
+              // console.log(that);
+              // console.log(event.target);
+              // console.log(event.target.checked);
+              // console.log(data);
+            },
           },
           {
             name: "名称",
             field: "name",
             is_num: false,
             is_light: false,
+            sortable: true,
           },
           {
             name: "理论发电量",
@@ -166,10 +178,20 @@ export default {
             is_light: false,
           },
           {
-            name: "风能率用率%",
+            name: "操作",
             field: "w1",
             is_num: false,
             is_light: false,
+            template: function() {
+              return "<a class='action'>详情</a>";
+            },
+            click: function(event, data) {
+              // checkbox 事件
+              // data 判断 当前数据
+              // console.log(that);
+              // console.log(event.target);
+              // console.log(data);
+            },
           },
         ],
         data: [
@@ -225,6 +247,63 @@ export default {
       value3: [],
       value4: "",
       value5: "",
+      barchart: [
+        {
+          title: "故障损失电量",
+          yAxisIndex: 0,
+          value: [
+            { text: "麻黄山风电场", value: 0.66 },
+            { text: "牛首山风电场", value: 0.71 },
+            { text: "石板泉风电场", value: 0.52 },
+            { text: "青山风电场", value: 16.35 },
+            { text: "香山风电场", value: 0.74 },
+          ],
+        },
+        {
+          title: "检修损失电量",
+          yAxisIndex: 0,
+          value: [
+            { text: "麻黄山风电场", value: 0.71 },
+            { text: "牛首山风电场", value: 3.09 },
+            { text: "石板泉风电场", value: 5.64 },
+            { text: "青山风电场", value: 0.03 },
+            { text: "香山风电场", value: 2.07 },
+          ],
+        },
+        {
+          title: "性能损失电量",
+          yAxisIndex: 0,
+          value: [
+            { text: "麻黄山风电场", value: 24.31 },
+            { text: "牛首山风电场", value: 30.71 },
+            { text: "石板泉风电场", value: 53.53 },
+            { text: "青山风电场", value: 62.69 },
+            { text: "香山风电场", value: 61.31 },
+          ],
+        },
+        {
+          title: "限电损失电量",
+          yAxisIndex: 0,
+          value: [
+            { text: "麻黄山风电场", value: 1.95 },
+            { text: "牛首山风电场", value: 2.45 },
+            { text: "石板泉风电场", value: 4.53 },
+            { text: "青山风电场", value: 30.48 },
+            { text: "香山风电场", value: 8.28 },
+          ],
+        },
+        {
+          title: "受累损失电量",
+          yAxisIndex: 0,
+          value: [
+            { text: "麻黄山风电场", value: 0 },
+            { text: "牛首山风电场", value: 0 },
+            { text: "石板泉风电场", value: 0 },
+            { text: "青山风电场", value: 0 },
+            { text: "香山风电场", value: 0 },
+          ],
+        },
+      ],
     };
   },
   methods: {
@@ -244,6 +323,7 @@ export default {
     for (let i = 1; i < 50; i++) {
       this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
       this.tableData.data[i].index = i + 1;
+      this.tableData.data[i].name = this.tableData.data[i].name + i;
     }
   },
 };
@@ -269,5 +349,11 @@ export default {
       }
     }
   }
+
+  .action {
+    text-decoration: underline;
+    color: @green;
+    cursor: pointer;
+  }
 }
 </style>

src/views/Decision/Decision3.vue

@@ -76,7 +76,7 @@
       <!-- 风资源列表 -->
       <div class="direction-info mg-b-16">
         <table class="com-table">
-          <tbody class="scroll">
+          <tbody>
             <tr>
               <td v-for="(col, i) of tableData.column" :key="i">
                 <div v-if="i == 0">22</div>

src/views/HealthControl/Health1.vue

@@ -45,141 +45,143 @@
             <div class="item purple">三日内推荐</div>
             <div class="item gray">超三日推荐</div>
           </div>
-          <div class="report-items scroll">
-            <div class="item">
-              <div class="title">风机编号：QG01_04</div>
-              <div class="info">
-                <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
-                <p>推荐检修时间：2021-06-04 16:00:00</p>
-                <p>推荐时间对应风速：2.4</p>
-                <p>判断时间：2021-05-27 08:20:00</p>
-                <div class="actions mg-t-16">
-                  <button class="btn success">
-                    <i class="fa fa-check"></i>
-                    提交
-                  </button>
-                  <button class="btn">
-                    <i class="fa fa-close"></i>
-                    取消
-                  </button>
+          <el-scrollbar>
+            <div class="report-items">
+              <div class="item">
+                <div class="title">风机编号：QG01_04</div>
+                <div class="info">
+                  <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+                  <p>推荐检修时间：2021-06-04 16:00:00</p>
+                  <p>推荐时间对应风速：2.4</p>
+                  <p>判断时间：2021-05-27 08:20:00</p>
+                  <div class="actions mg-t-16">
+                    <button class="btn success">
+                      <i class="fa fa-check"></i>
+                      提交
+                    </button>
+                    <button class="btn">
+                      <i class="fa fa-close"></i>
+                      取消
+                    </button>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="item">
-              <div class="title">风机编号：QG01_04</div>
-              <div class="info">
-                <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
-                <p>推荐检修时间：2021-06-04 16:00:00</p>
-                <p>推荐时间对应风速：2.4</p>
-                <p>判断时间：2021-05-27 08:20:00</p>
-                <div class="actions mg-t-16">
-                  <button class="btn success">
-                    <i class="fa fa-check"></i>
-                    提交
-                  </button>
-                  <button class="btn">
-                    <i class="fa fa-close"></i>
-                    取消
-                  </button>
+              <div class="item">
+                <div class="title">风机编号：QG01_04</div>
+                <div class="info">
+                  <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+                  <p>推荐检修时间：2021-06-04 16:00:00</p>
+                  <p>推荐时间对应风速：2.4</p>
+                  <p>判断时间：2021-05-27 08:20:00</p>
+                  <div class="actions mg-t-16">
+                    <button class="btn success">
+                      <i class="fa fa-check"></i>
+                      提交
+                    </button>
+                    <button class="btn">
+                      <i class="fa fa-close"></i>
+                      取消
+                    </button>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="item">
-              <div class="title">风机编号：QG01_04</div>
-              <div class="info">
-                <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
-                <p>推荐检修时间：2021-06-04 16:00:00</p>
-                <p>推荐时间对应风速：2.4</p>
-                <p>判断时间：2021-05-27 08:20:00</p>
-                <div class="actions mg-t-16">
-                  <button class="btn success">
-                    <i class="fa fa-check"></i>
-                    提交
-                  </button>
-                  <button class="btn">
-                    <i class="fa fa-close"></i>
-                    取消
-                  </button>
+              <div class="item">
+                <div class="title">风机编号：QG01_04</div>
+                <div class="info">
+                  <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+                  <p>推荐检修时间：2021-06-04 16:00:00</p>
+                  <p>推荐时间对应风速：2.4</p>
+                  <p>判断时间：2021-05-27 08:20:00</p>
+                  <div class="actions mg-t-16">
+                    <button class="btn success">
+                      <i class="fa fa-check"></i>
+                      提交
+                    </button>
+                    <button class="btn">
+                      <i class="fa fa-close"></i>
+                      取消
+                    </button>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="item">
-              <div class="title">风机编号：QG01_04</div>
-              <div class="info">
-                <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
-                <p>推荐检修时间：2021-06-04 16:00:00</p>
-                <p>推荐时间对应风速：2.4</p>
-                <p>判断时间：2021-05-27 08:20:00</p>
-                <div class="actions mg-t-16">
-                  <button class="btn success">
-                    <i class="fa fa-check"></i>
-                    提交
-                  </button>
-                  <button class="btn">
-                    <i class="fa fa-close"></i>
-                    取消
-                  </button>
+              <div class="item">
+                <div class="title">风机编号：QG01_04</div>
+                <div class="info">
+                  <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+                  <p>推荐检修时间：2021-06-04 16:00:00</p>
+                  <p>推荐时间对应风速：2.4</p>
+                  <p>判断时间：2021-05-27 08:20:00</p>
+                  <div class="actions mg-t-16">
+                    <button class="btn success">
+                      <i class="fa fa-check"></i>
+                      提交
+                    </button>
+                    <button class="btn">
+                      <i class="fa fa-close"></i>
+                      取消
+                    </button>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="item">
-              <div class="title">风机编号：QG01_04</div>
-              <div class="info">
-                <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
-                <p>推荐检修时间：2021-06-04 16:00:00</p>
-                <p>推荐时间对应风速：2.4</p>
-                <p>判断时间：2021-05-27 08:20:00</p>
-                <div class="actions mg-t-16">
-                  <button class="btn success">
-                    <i class="fa fa-check"></i>
-                    提交
-                  </button>
-                  <button class="btn">
-                    <i class="fa fa-close"></i>
-                    取消
-                  </button>
+              <div class="item">
+                <div class="title">风机编号：QG01_04</div>
+                <div class="info">
+                  <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+                  <p>推荐检修时间：2021-06-04 16:00:00</p>
+                  <p>推荐时间对应风速：2.4</p>
+                  <p>判断时间：2021-05-27 08:20:00</p>
+                  <div class="actions mg-t-16">
+                    <button class="btn success">
+                      <i class="fa fa-check"></i>
+                      提交
+                    </button>
+                    <button class="btn">
+                      <i class="fa fa-close"></i>
+                      取消
+                    </button>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="item">
-              <div class="title">风机编号：QG01_04</div>
-              <div class="info">
-                <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
-                <p>推荐检修时间：2021-06-04 16:00:00</p>
-                <p>推荐时间对应风速：2.4</p>
-                <p>判断时间：2021-05-27 08:20:00</p>
-                <div class="actions mg-t-16">
-                  <button class="btn success">
-                    <i class="fa fa-check"></i>
-                    提交
-                  </button>
-                  <button class="btn">
-                    <i class="fa fa-close"></i>
-                    取消
-                  </button>
+              <div class="item">
+                <div class="title">风机编号：QG01_04</div>
+                <div class="info">
+                  <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+                  <p>推荐检修时间：2021-06-04 16:00:00</p>
+                  <p>推荐时间对应风速：2.4</p>
+                  <p>判断时间：2021-05-27 08:20:00</p>
+                  <div class="actions mg-t-16">
+                    <button class="btn success">
+                      <i class="fa fa-check"></i>
+                      提交
+                    </button>
+                    <button class="btn">
+                      <i class="fa fa-close"></i>
+                      取消
+                    </button>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="item">
-              <div class="title">风机编号：QG01_04</div>
-              <div class="info">
-                <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
-                <p>推荐检修时间：2021-06-04 16:00:00</p>
-                <p>推荐时间对应风速：2.4</p>
-                <p>判断时间：2021-05-27 08:20:00</p>
-                <div class="actions mg-t-16">
-                  <button class="btn success">
-                    <i class="fa fa-check"></i>
-                    提交
-                  </button>
-                  <button class="btn">
-                    <i class="fa fa-close"></i>
-                    取消
-                  </button>
+              <div class="item">
+                <div class="title">风机编号：QG01_04</div>
+                <div class="info">
+                  <p>推荐理由：大风额定出力曲线偏差大于基准 值同时等级评估级别过低</p>
+                  <p>推荐检修时间：2021-06-04 16:00:00</p>
+                  <p>推荐时间对应风速：2.4</p>
+                  <p>判断时间：2021-05-27 08:20:00</p>
+                  <div class="actions mg-t-16">
+                    <button class="btn success">
+                      <i class="fa fa-check"></i>
+                      提交
+                    </button>
+                    <button class="btn">
+                      <i class="fa fa-close"></i>
+                      取消
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          </el-scrollbar>
         </panel>
       </div>
     </div>

src/views/HealthControl/Health2.vue

@@ -27,7 +27,7 @@
     </div>
     <div class="fc-info mg-b-16">
       <div class="fc-item" v-for="(item, index) in wpmap" :key="index">
-        <div class="title" @click="jumpUrl(item.wpId)">{{item.name}}</div>
+        <div class="title" @click="jumpUrl(item.wpId)">{{ item.name }}</div>
         <div class="tags">
           <div class="tag">
             <i class="svg-icon svg-icon-gray-l svg-icon-lg">
@@ -36,23 +36,23 @@
           </div>
           <div class="tag">
             <div class="tag-title">实时风速</div>
-            <div class="tag-value">{{item.sjfs}}<span class="unit">m/s</span></div>
+            <div class="tag-value">{{ item.sjfs }}<span class="unit">m/s</span></div>
           </div>
           <div class="tag">
             <div class="tag-title">预测风速</div>
-            <div class="tag-value">{{item.ycfs}}<span class="unit">m/s</span></div>
+            <div class="tag-value">{{ item.ycfs }}<span class="unit">m/s</span></div>
           </div>
           <div class="tag">
             <div class="tag-title">健康度（优）</div>
-            <div class="tag-value">{{item.ysl}}<span class="unit">台</span></div>
+            <div class="tag-value">{{ item.ysl }}<span class="unit">台</span></div>
           </div>
           <div class="tag">
             <div class="tag-title">健康度（良）</div>
-            <div class="tag-value">{{item.lsl}}<span class="unit">台</span></div>
+            <div class="tag-value">{{ item.lsl }}<span class="unit">台</span></div>
           </div>
           <div class="tag">
             <div class="tag-title">健康度（差）</div>
-            <div class="tag-value">{{item.csl}}<span class="unit">台</span></div>
+            <div class="tag-value">{{ item.csl }}<span class="unit">台</span></div>
           </div>
         </div>
         <div class="health-info">
@@ -78,8 +78,8 @@
               <thermometer-chart :value="item.jkd" :height="'120px'" :width="'80px'" />
               <dashboard :value="item.csl" :max="item.jrts" :height="'150px'" :width="'150px'" />
             </div>
-            <div class="device-list" v-show="item.showType === '2'">
-              <div class="item orange" v-for="(gzItem, gzIndex) in item.gzId" :key="gzIndex">{{gzItem.name}}</div>
+             <div class="device-list" v-show="item.showType === '2'">
+              <div class="item orange" v-for="(gzItem, gzIndex) in item.gzId" :key="gzIndex">{{ gzItem.name }}</div>
             </div>
           </div>
         </div>
@@ -104,15 +104,16 @@ export default {
   data() {
     return {
       type: "2",
-      bardata:{
-        area:[],
-        legend:[],
-        data:[[]]
+      bardata: {
+        area: [],
+        legend: [],
+        data: [[]],
       },
-      wpmap:[],
-      lineData:[],
+      wpmap: [],
+      lineData: [],
       tableData: {
-        column: [{
+        column: [
+          {
             name: "",
             field: "",
             is_num: false,
@@ -152,18 +153,18 @@ export default {
     this.getAllMap();
   },
 
-  methods:{
+  methods: {
     // 获取顶部柱状图数据
-    requestData(){
+    requestData() {
       let that = this;
       that.API.requestData({
         method: "POST",
         subUrl: "recommen/findAllChartjz",
         data: {
           wpId: "0",
-          type: that.type
+          type: that.type,
         },
-        success (res) {
+        success(res) {
           // 顶部图表绿线
           let lineData = res.data.lvchart;
 
@@ -173,59 +174,58 @@ export default {
 
           let dataLength = res.data.datechart.length;
 
-          for(let i=0;i<dataLength;i++){
+          for (let i = 0; i < dataLength; i++) {
             data.push([res.data.yslchart[i], res.data.lslchart[i], res.data.cslchart[i]]);
           }
 
           let bardata = {
             area,
             legend,
-            data
+            data,
           };
 
           that.bardata = bardata;
           that.lineData = lineData;
-        }
+        },
       });
     },
 
-    getAllMap(){
+    getAllMap() {
       let that = this;
       that.API.requestData({
         method: "POST",
         subUrl: "healthmain/findAllMap",
-        success (res) {
-
-          res.data.wpmap.forEach(ele=>{
-            if(ele.tqyb < 10) ele.tqyb = ("0" + ele.tqyb);
+        success(res) {
+          res.data.wpmap.forEach((ele) => {
+            if (ele.tqyb < 10) ele.tqyb = "0" + ele.tqyb;
             ele.showType = "1";
-            ele.svgIcon = ("svg-" + ele.tqyb);
+            ele.svgIcon = "svg-" + ele.tqyb;
           });
 
           that.wpmap = res.data.wpmap;
 
           that.tableData.data = res.data.gzls;
-        }
+        },
       });
     },
 
     // 改变风场显示类型
-    changeWpShowType(index, showType){
+    changeWpShowType(index, showType) {
       this.wpmap[index].showType = showType;
     },
 
-    changeDate(type){
+    changeDate(type) {
       this.type = type;
       this.requestData();
     },
 
     // 页面跳转
-    jumpUrl(wpId){
+    jumpUrl(wpId) {
       this.$router.push({
-        path:`/health/health3/${wpId}`
+        path: `/health/health3/${wpId}`,
       });
     },
-  }
+  },
 };
 </script>
 
@@ -494,6 +494,21 @@ export default {
                 background: fade(@orange, 20);
                 border-color: @orange;
               }
+
+              &.red {
+                color: @red;
+                background: fade(@red, 20);
+                border-color: @red;
+              }
+            }
+
+            .blank {
+              flex: 1 0 64px;
+              margin-left: 4px;
+
+              &:nth-child(5n + 1) {
+                margin-left: 0px;
+              }
             }
           }
         }

src/views/HealthControl/Health3.vue

@@ -472,6 +472,12 @@ export default {
               background: fade(@orange, 20);
               border-color: @orange;
             }
+
+            &.red {
+              color: @red;
+              background: fade(@red, 20);
+              border-color: @red;
+            }
           }
 
           .blank {

src/views/HealthControl/Health5.vue

@@ -1,47 +1,49 @@
 <template>
   <div class="health-5">
-    <!-- 当内容超出页面时 添加 scroll 即可自动添加滚动条 -->
-    <div class="health-matrix scroll">
-      <div class="health-matrix-panel" v-for="index of 6" :key="index">
-        <div class="header">
-          <i class="svg-icon svg-icon-sm svg-icon-white">
-            <svg-icon :svgid="'svg-wind-site'" />
-          </i>
-          <span class="title">某某某风机厂</span>
-          <div class="tools">
-            <div class="tool-block">
-              <div class="legend bg-green"></div>
-              <div class="legend-text green">良好数量</div>
-              <div class="legend-value">123</div>
-            </div>
-            <div class="tool-block">
-              <div class="legend bg-purple"></div>
-              <div class="legend-text purple">正常数量</div>
-              <div class="legend-value">123</div>
-            </div>
-            <div class="tool-block">
-              <div class="legend bg-yellow"></div>
-              <div class="legend-text yellow">注意数量</div>
-              <div class="legend-value">123</div>
-            </div>
-            <div class="tool-block">
-              <div class="legend bg-orange"></div>
-              <div class="legend-text orange">严重数量</div>
-              <div class="legend-value">123</div>
+    <!-- 当内容超出页面时 添加 el-scrollbar 即可自动添加滚动条 -->
+    <el-scrollbar>
+      <div class="health-matrix">
+        <div class="health-matrix-panel" v-for="index of 6" :key="index">
+          <div class="header">
+            <i class="svg-icon svg-icon-sm svg-icon-white">
+              <svg-icon :svgid="'svg-wind-site'" />
+            </i>
+            <span class="title">某某某风机厂</span>
+            <div class="tools">
+              <div class="tool-block">
+                <div class="legend bg-green"></div>
+                <div class="legend-text green">良好数量</div>
+                <div class="legend-value">123</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-purple"></div>
+                <div class="legend-text purple">正常数量</div>
+                <div class="legend-value">123</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-yellow"></div>
+                <div class="legend-text yellow">注意数量</div>
+                <div class="legend-value">123</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-orange"></div>
+                <div class="legend-text orange">严重数量</div>
+                <div class="legend-value">123</div>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="body">
-          <div class="matrix">
-            <div class="item green">1号</div>
-            <div class="item purple">2号</div>
-            <div class="item orange">3号</div>
-            <div class="item" v-for="index of 100" :key="index">{{ index + 3 }}号</div>
-            <div class="blank" v-for="index of 25" :key="index"></div>
+          <div class="body">
+            <div class="matrix">
+              <div class="item green">1号</div>
+              <div class="item purple">2号</div>
+              <div class="item orange">3号</div>
+              <div class="item" v-for="index of 100" :key="index">{{ index + 3 }}号</div>
+              <div class="blank" v-for="index of 25" :key="index"></div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -148,6 +150,12 @@ export default {
           background: fade(@orange, 20);
           border-color: @orange;
         }
+
+        &.red {
+          color: @red;
+          background: fade(@red, 20);
+          border-color: @red;
+        }
       }
 
       .blank {

src/views/HealthControl/Health6.vue

@@ -415,6 +415,12 @@ export default {
         background: fade(@orange, 20);
         border-color: @orange;
       }
+
+      &.red {
+        color: @red;
+        background: fade(@red, 20);
+        border-color: @red;
+      }
     }
 
     .blank {

src/views/Home/Home.vue

@@ -46,32 +46,32 @@
     </Row>
     <Row type="flex">
       <Col :span="12">
-      <toolbar-panel title="日发电量">
-        <template v-slot:tools>
-          <div class="tools">
-            <div class="tool-block">
-              <div class="legend bg-green"></div>
-              <div class="legend-text">日发电量(单位:万KWh)</div>
-            </div>
-            <div class="tool-block">
-              <div class="legend bg-purple"></div>
-              <div class="legend-text">上网电量（单位：万KWh）</div>
-            </div>
-            <div class="tool-block">
-              <div class="legend bg-orange"></div>
-              <div class="legend-text">购网电量（单位：万KWh）</div>
-            </div>
-            <div class="tool-block">
-              <div class="legend bg-yellow"></div>
-              <div class="legend-text">风速</div>
+        <toolbar-panel title="日发电量">
+          <template v-slot:tools>
+            <div class="tools">
+              <div class="tool-block">
+                <div class="legend bg-green"></div>
+                <div class="legend-text">日发电量(单位:万KWh)</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-purple"></div>
+                <div class="legend-text">上网电量（单位：万KWh）</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-orange"></div>
+                <div class="legend-text">购网电量（单位：万KWh）</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-yellow"></div>
+                <div class="legend-text">风速</div>
+              </div>
             </div>
-          </div>
-        </template>
-        <template v-slot:default>
-          <!-- 日发电量 -->
-          <multiple-bar-chart :list="DayPower.value" :units="DayPower.units" height="12.963vh" />
-        </template>
-      </toolbar-panel>
+          </template>
+          <template v-slot:default>
+            <!-- 日发电量 -->
+            <multiple-bar-chart :list="DayPower.value" :units="DayPower.units" height="12.963vh" :showLegend="true" />
+          </template>
+        </toolbar-panel>
       </Col>
       <Col :span="12">
       <toolbar-panel title="72小时功率趋势图">
@@ -442,7 +442,7 @@ import Weather from "./components/weather.vue";
 import PowerReview from "./components/power-review.vue";
 import PowerPlan from "./components/power-plan.vue";
 import Map from "./components/map.vue";
-import ListBarChart2 from '../../components/chart/bar/list-bar-chart2.vue';
+import ListBarChart2 from "../../components/chart/bar/list-bar-chart2.vue";
 
 import Table from "./dialog/table.vue";
 

src/views/LightMatrix/LightMatrix.vue

@@ -41,7 +41,8 @@
         </Col>
       </Row>
     </div>
-    <div class="panel-box scroll">
+    <el-scrollbar>
+     <div class="panel-box">
       <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
         <div class="panel-title">
           <div class="panel-title-name">
@@ -93,6 +94,7 @@
         </div>
       </div>
     </div>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -639,7 +641,7 @@ export default {
             }
 
             &.blue {
-              color: @blue;
+              color: @darkBlue;
             }
 
             &.pink {
@@ -664,8 +666,8 @@ export default {
 
     .panel-body {
       background-color: fade(@darkgray, 20%);
-      padding: 0.741vh;
-      margin-bottom: 1.481vh;
+      padding: 4px 8px 8px 8px;
+      margin-bottom: 8px;
       width: 100%;
       display: flex;
       flex-direction: row;
@@ -674,13 +676,13 @@ export default {
 
       .blank {
         margin-right: 4px;
-        flex: 1 0 125px;
+        flex: 1 0 105px;
       }
 
       .card {
         margin-right: 4px;
         margin-top: 4px;
-        flex: 1 0 125px;
+        flex: 1 0 105px;
       }
 
       .card {
@@ -691,16 +693,17 @@ export default {
           flex-grow: row;
 
           .card-left {
-            width: 40%;
+            width: 40px;
             border-right: 0.093vh dotted;
             display: flex;
             flex-direction: column;
 
             .tag {
               color: @write;
-              font-size: @fontsize-s;
+              font-size: 12px;
               width: 100%;
               text-align: center;
+              line-height: 1.5;
             }
 
             .icon {
@@ -716,12 +719,11 @@ export default {
           }
 
           .card-right {
-            width: 60%;
             margin-top: 2px;
 
             .num {
               width: 100%;
-              font-size: 14px;
+              font-size: 12px;
               text-align: left;
               padding-right: 0.278vh;
               display: flex;
@@ -729,7 +731,7 @@ export default {
               justify-content: space-around;
 
               i {
-                margin: 0 0.37vh;
+                margin: 0 2px 0 4px;
               }
               span {
                 flex: 1;
@@ -763,7 +765,7 @@ export default {
               border-color: @darkBlue;
 
               .tag {
-                background-color: @darkBlue;
+                background-color: fade(@darkBlue, 30);
               }
 
               .icon {
@@ -796,7 +798,7 @@ export default {
               border-color: @pink;
 
               .tag {
-                background-color: @pink;
+                background-color: fade(@pink, 30);
               }
 
               .icon {
@@ -829,7 +831,7 @@ export default {
               border-color: @orange;
 
               .tag {
-                background-color: @orange;
+                background-color: fade(@orange, 30);
               }
 
               .icon {
@@ -860,7 +862,7 @@ export default {
               border-color: @green;
 
               .tag {
-                background-color: @green;
+                background-color: fade(@green, 30);
               }
 
               .icon {
@@ -891,7 +893,7 @@ export default {
               border-color: @darkgray;
 
               .tag {
-                background-color: @darkgray;
+                background-color: fade(@darkgray, 30%);
               }
 
               .icon {
@@ -923,7 +925,7 @@ export default {
               border-color: @darkRed;
 
               .tag {
-                background-color: @darkRed;
+                background-color: fade(@darkRed, 50%);
               }
 
               .icon {
@@ -955,7 +957,7 @@ export default {
               border-color: @black;
 
               .tag {
-                background-color: @darkgray;
+                background-color: fade(@darkgray, 80%);
               }
 
               .icon {

src/views/LightMatrix1/LightMatrix1.vue

@@ -8,6 +8,7 @@
           <div class="dot right top"></div>
           <div class="dot right bottom"></div>
           <div class="item">
+            <div class="loop"></div>
             <span class="svg-icon svg-icon-gray svg-icon-md">
               <SvgIcon svgid="svg-wind-site"></SvgIcon>
             </span>
@@ -55,7 +56,7 @@
           <div class="item">
             <div class="loop"></div>
             <span class="svg-icon svg-icon-gray svg-icon-md">
-              <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
+              <SvgIcon :svgid="'svg-photovoltaic'" style="margin: 3px 0px -3px 1px;"></SvgIcon>
             </span>
           </div>
           <div class="item write" @click="changeShow('jrfj1_GDC')">
@@ -546,7 +547,7 @@ export default {
             }
 
             &.blue {
-              color: @blue;
+              color: @darkBlue;
             }
 
             &.pink {

src/views/LightMatrix2/LightMatrix2.vue

@@ -33,45 +33,47 @@
         </div>
       </Col>
     </Row>
-    <div class="panel-box scroll">
-      <div v-for="(pItem, pIndex) of sourceMap.fjmap" :key="pIndex">
-        <div class="panel-title">
-          <div class="panel-title-name">
-            <i class="svg-icon svg-icon-sm svg-icon-green">
-              <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
-            </i>
-            <span>{{ sourceMap.fczbmap[pItem[pIndex].wpId].name }}</span>
-            <div class="sub-title-item" v-for="(data, index) in tables[0].subTitleDatas" :key="index">
-              <span class="sub-title">{{ data.text }}</span>
-              <span class="sub-count" :class="data.color">{{ sourceMap.fczbmap[pItem[pIndex].wpId][data.key] }}</span>
+    <el-scrollbar>
+      <div class="panel-box">
+        <div v-for="(pItem, pIndex) of sourceMap.fjmap" :key="pIndex">
+          <div class="panel-title">
+            <div class="panel-title-name">
+              <i class="svg-icon svg-icon-sm svg-icon-green">
+                <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
+              </i>
+              <span>{{ sourceMap.fczbmap[pItem[pIndex].wpId].name }}</span>
+              <div class="sub-title-item" v-for="(data, index) in tables[0].subTitleDatas" :key="index">
+                <span class="sub-title">{{ data.text }}</span>
+                <span class="sub-count" :class="data.color">{{ sourceMap.fczbmap[pItem[pIndex].wpId][data.key] }}</span>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="panel-body">
-          <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color" @click="goDetails(cItem)">
-            <div class="card-panel">
-              <div class="card-left">
-                <div class="tag">{{ cItem.wtnum }}</div>
+          <div class="panel-body">
+            <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color" @click="goDetails(cItem)">
+              <div class="card-panel">
+                <div class="card-left">
+                  <div class="tag">{{ cItem.wtnum }}</div>
+                </div>
+                <div class="card-right">
+                  <div class="num">{{ cItem.gl }}&nbsp;kw</div>
+                  <div class="num">{{ cItem.fs }}&nbsp;m/s</div>
+                </div>
               </div>
-              <div class="card-right">
-                <div class="num">{{ cItem.gl }}&nbsp;kw</div>
-                <div class="num">{{ cItem.fs }}&nbsp;m/s</div>
+              <div class="card-percent">
+                <div class="split-item"></div>
+                <div class="split-item"></div>
+                <div class="split-item"></div>
+                <div class="split-item"></div>
+                <div class="split-item"></div>
+                <div class="percent" :style="'width: ' + cItem.lyl + '%'"></div>
               </div>
             </div>
-            <div class="card-percent">
-              <div class="split-item"></div>
-              <div class="split-item"></div>
-              <div class="split-item"></div>
-              <div class="split-item"></div>
-              <div class="split-item"></div>
-              <div class="percent" :style="'width: ' + cItem.lyl + '%'"></div>
-            </div>
+            <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+            <i class="blank" v-for="i in pItem.length" :key="i"></i>
           </div>
-          <!-- 站位用 保证卡片布局最后一行不会有问题 -->
-          <i class="blank" v-for="i in pItem.length" :key="i"></i>
         </div>
       </div>
-    </div>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -334,11 +336,11 @@ export default {
     },
 
     // 查看风机详情
-    goDetails(item){
+    goDetails(item) {
       this.$router.push({
         path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
       });
-    }
+    },
   },
 
   created() {
@@ -555,7 +557,7 @@ export default {
             }
 
             &.blue {
-              color: @blue;
+              color: @darkBlue;
             }
 
             &.pink {
@@ -581,8 +583,8 @@ export default {
     .panel-body {
       height: calc(100% - 7.407vh);
       background-color: fade(@darkgray, 20%);
-      padding: 0.741vh;
-      margin-bottom: 1.481vh;
+      padding: 4px 8px 8px 8px;
+      margin-bottom: 8px;
       width: 100%;
       display: flex;
       flex-direction: row;
@@ -591,12 +593,12 @@ export default {
 
       .blank {
         margin-right: 4px;
-        flex: 1 0 13vh;
+        flex: 1 0 110px;
       }
       .card {
         margin-right: 4px;
         margin-top: 4px;
-        flex: 1 0 13vh;
+        flex: 1 0 110px;
       }
 
       .card {
@@ -632,16 +634,15 @@ export default {
         }
 
         .card-percent {
-          height: 0.926vh;
-          padding: 0.093vh 0.185vh;
+          height: 8px;
           position: relative;
-          border-top: 0.093vh solid;
+          border-top: 1px solid;
           background-color: transparent;
           display: flex;
 
           .split-item {
             flex: 1;
-            border-right: 0.093vh solid @black;
+            border-right: 1px solid @black;
             z-index: 1;
 
             &:last-child {
@@ -650,7 +651,7 @@ export default {
           }
 
           .percent {
-            height: 0.648vh;
+            height: 5px;
             background-color: @yellow;
             position: absolute;
             left: 0.185vh;

src/views/LightMatrix3/LightMatrix3.vue

@@ -50,58 +50,60 @@
         </Col>
       </Row>
     </div>
-    <div class="panel-box scroll">
-      <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
-        <div class="panel-title">
-          <div class="panel-title-name">
-            <i class="svg-icon svg-icon-sm svg-icon-green">
-              <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
-            </i>
-            <span>{{ sourceMap.fczbmap[pItem[pIndex].wpId].name }}</span>
-            <div class="sub-title-item" v-for="(data, index) of tables[0].subTitleDatas" :key="index">
-              <span class="sub-title">{{ data.text }}</span>
-              <span class="sub-count" :class="data.color">{{ sourceMap.fczbmap[pItem[pIndex].wpId][data.key] }}</span>
+    <el-scrollbar>
+      <div class="panel-box">
+        <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
+          <div class="panel-title">
+            <div class="panel-title-name">
+              <i class="svg-icon svg-icon-sm svg-icon-green">
+                <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
+              </i>
+              <span>{{ sourceMap.fczbmap[pItem[pIndex].wpId].name }}</span>
+              <div class="sub-title-item" v-for="(data, index) of table.subTitleDatas" :key="index">
+                <span class="sub-title">{{ data.text }}</span>
+                <span class="sub-count" :class="data.color">{{ sourceMap.fczbmap[pItem[pIndex].wpId][data.key] }}</span>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="panel-body">
-          <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color" @click="goDetails(cItem)">
-            <div class="circle">
-              <span class="center-icon svg-icon svg-icon-md" :class="cItem.color == 'black' ? 'svg-icon-black' : 'svg-icon-write'">
-                <SvgIcon :svgid="mapping[cItem.color]"></SvgIcon>
-              </span>
-            </div>
-            <div class="card-panel">
-              <div class="card-left">
-                <div class="tag">{{ cItem.wtnum }}</div>
-                <div class="num">
-                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + cItem.color">
-                    <SvgIcon svgid="svg-W"></SvgIcon>
-                  </i>
-                  <div>{{ cItem.gl }}</div>
-                </div>
-              </div>
-              <div class="card-right">
-                <div class="num">
-                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + cItem.color">
-                    <!-- <SvgIcon svgid="svg-R"></SvgIcon> -->
-                  </i>
-                  <div>{{ cItem.fdl || "&nbsp;" }}</div>
+          <div class="panel-body">
+            <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color" @click="goDetails(cItem)">
+              <div class="card-panel">
+                <div class="card-left">
+                  <div class="tag">{{ cItem.wtnum }}</div>
+                  <div class="icon">
+                    <span class="svg-icon svg-icon-sm" :class="cItem.color == 'black' ? 'svg-icon-black' : cItem.color == 'gray' ? 'svg-icon-gray' : 'svg-icon-write'">
+                      <SvgIcon :svgid="mapping[cItem.color]"></SvgIcon>
+                    </span>
+                  </div>
                 </div>
-                <div class="num">
-                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + cItem.color">
-                    <SvgIcon svgid="svg-P"></SvgIcon>
-                  </i>
-                  <div>{{ cItem.fs }}</div>
+                <div class="card-right">
+                  <div class="num">
+                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
+                      <SvgIcon svgid="svg-W"></SvgIcon>
+                    </i>
+                    <span>{{ cItem.gl }}</span>
+                  </div>
+                  <div class="num">
+                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
+                      <SvgIcon svgid="svg-R"></SvgIcon>
+                    </i>
+                    <span>{{ cItem.fdl || "&nbsp;" }}</span>
+                  </div>
+                  <div class="num">
+                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
+                      <SvgIcon svgid="svg-P"></SvgIcon>
+                    </i>
+                    <span>{{ cItem.fs }}</span>
+                  </div>
                 </div>
               </div>
             </div>
+            <!-- 站位用 保证卡片布局最后一行不会有问题 -->
+            <i class="blank" v-for="i in pItem.length" :key="i"></i>
           </div>
-          <!-- 站位用 保证卡片布局最后一行不会有问题 -->
-          <i class="blank" v-for="i in pItem.length" :key="i"></i>
         </div>
       </div>
-    </div>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -396,7 +398,7 @@ export default {
           }
         },
       });
-    }
+    },
   },
 
   created() {
@@ -705,6 +707,7 @@ export default {
             font-size: 12px;
             margin: 0 0.556vh 0 1.481vh;
             padding-top: 1px;
+            width: 50px;
           }
 
           .sub-count {
@@ -722,7 +725,7 @@ export default {
             }
 
             &.blue {
-              color: @blue;
+              color: @darkBlue;
             }
 
             &.pink {
@@ -755,102 +758,458 @@ export default {
       flex-wrap: wrap;
       justify-content: space-between;
 
+      // old card theme
+      // .blank {
+      //   margin-right: 4px;
+      //   flex: 1 0 165px;
+      // }
+
+      // .card {
+      //   margin-right: 4px;
+      //   margin-top: 4px;
+      //   flex: 1 0 165px;
+      // }
+
+      // .card {
+      //   border: 0.093vh solid;
+      //   position: relative;
+
+      //   .circle {
+      //     width: 1.4815vh;
+      //     position: absolute;
+      //     height: 1.4815vh;
+      //     border: 0.0926vh solid #ffffff;
+      //     border-radius: 100%;
+      //     top: calc(50% - 0.7407vh);
+      //     left: calc(50% - 0.7407vh);
+      //     background-color: fade(#000, 30);
+
+      //     .center-icon {
+      //       font-size: 2.222vh;
+      //       position: absolute;
+      //       left: calc(50% - 1.111vh);
+      //       top: calc(50% - 1.111vh);
+      //     }
+      //   }
+
+      //   .card-panel {
+      //     display: flex;
+
+      //     .card-left {
+      //       flex: 1 0 auto;
+      //       border-right: 0.093vh solid;
+
+      //       .tag {
+      //         color: @write;
+      //         font-size: 14px;
+      //         width: 100%;
+      //         text-align: center;
+      //         border-bottom: 0.093vh solid;
+      //         padding: 0.7407vh 0;
+      //       }
+
+      //       .num {
+      //         display: flex;
+      //         align-items: center;
+      //         justify-content: space-around;
+      //         width: 100%;
+      //         font-size: 14px;
+      //         text-align: left;
+      //         padding: 0.7407vh 0;
+
+      //         div {
+      //           min-width: 5.463vh;
+      //           display: inline-block;
+      //           margin-right: 0.3704vh;
+      //         }
+
+      //         i {
+      //           margin-top: 0.2778vh;
+      //           margin-left: 0.7407vh;
+      //         }
+      //       }
+      //     }
+
+      //     .card-right {
+      //       flex: 1 0 auto;
+
+      //       .num {
+      //         display: flex;
+      //         align-items: center;
+      //         justify-content: space-around;
+      //         width: 100%;
+      //         font-size: 14px;
+      //         text-align: left;
+      //         padding: 0.7407vh 0;
+
+      //         &:first-child {
+      //           border-bottom: 0.093vh solid;
+      //         }
+
+      //         div {
+      //           min-width: 5.463vh;
+      //           display: inline-block;
+      //           margin-right: 0.3704vh;
+      //         }
+
+      //         i {
+      //           margin-top: 0.2778vh;
+      //           margin-left: 0.7407vh;
+      //         }
+      //       }
+      //     }
+      //   }
+
+      //   .card-percent {
+      //     height: 0.926vh;
+      //     padding: 0.093vh 0.185vh;
+      //     position: relative;
+      //     border-top: 0.093vh solid;
+      //     background-color: transparent;
+
+      //     .percent {
+      //       height: 0.648vh;
+      //       background-color: @green;
+      //       position: absolute;
+      //       left: 0.185vh;
+      //       top: 0.093vh;
+      //     }
+      //   }
+
+      //   &.blue {
+      //     border-color: @darkBlue;
+      //     background-color: fade(@darkBlue, 15%);
+
+      //     .circle {
+      //       border-color: @darkBlue;
+      //       background-color: #0e062b;
+      //     }
+
+      //     .center-icon {
+      //       color: @write;
+      //     }
+
+      //     .card-panel {
+      //       .card-left {
+      //         border-color: @darkBlue;
+
+      //         .tag {
+      //           border-color: @darkBlue;
+      //         }
+
+      //         .num {
+      //           color: @darkBlue;
+      //         }
+      //       }
+
+      //       .card-right {
+      //         .num {
+      //           color: @darkBlue;
+      //           border-color: @darkBlue;
+      //         }
+      //       }
+      //     }
+
+      //     .card-percent {
+      //       border-color: @darkBlue;
+      //     }
+      //   }
+
+      //   &.pink {
+      //     border-color: @pink;
+      //     background-color: fade(@pink, 15%);
+
+      //     .circle {
+      //       border-color: @pink;
+      //       background-color: #26062d;
+      //     }
+
+      //     .center-icon {
+      //       color: @write;
+      //     }
+
+      //     .card-panel {
+      //       .card-left {
+      //         border-color: @pink;
+
+      //         .tag {
+      //           border-color: @pink;
+      //         }
+
+      //         .num {
+      //           color: @pink;
+      //         }
+      //       }
+
+      //       .card-right {
+      //         .num {
+      //           color: @pink;
+      //           border-color: @pink;
+      //         }
+      //       }
+      //     }
+
+      //     .card-percent {
+      //       border-color: @pink;
+      //     }
+      //   }
+
+      //   &.orange {
+      //     border-color: @orange;
+      //     background-color: fade(@orange, 15%);
+
+      //     .center-icon {
+      //       color: @write;
+      //     }
+
+      //     .circle {
+      //       border-color: @orange;
+      //       background-color: #2d1e07;
+      //     }
+
+      //     .card-panel {
+      //       .card-left {
+      //         border-color: @orange;
+
+      //         .tag {
+      //           border-color: @orange;
+      //         }
+
+      //         .num {
+      //           color: @orange;
+      //         }
+      //       }
+
+      //       .card-right {
+      //         .num {
+      //           color: @orange;
+      //           border-color: @orange;
+      //         }
+      //       }
+      //     }
+
+      //     .card-percent {
+      //       border-color: @orange;
+      //     }
+      //   }
+
+      //   &.green {
+      //     border-color: @green;
+      //     background-color: fade(@green, 15%);
+
+      //     .center-icon {
+      //       color: @write;
+      //       padding-left: 4px;
+      //     }
+
+      //     .circle {
+      //       border-color: @green;
+      //       background-color: #0f2a09;
+      //     }
+      //     .card-panel {
+      //       .card-left {
+      //         border-color: @green;
+
+      //         .tag {
+      //           border-color: @green;
+      //         }
+
+      //         .num {
+      //           color: @green;
+      //         }
+      //       }
+
+      //       .card-right {
+      //         .num {
+      //           color: @green;
+      //           border-color: @green;
+      //         }
+      //       }
+      //     }
+
+      //     .card-percent {
+      //       border-color: @green;
+      //     }
+      //   }
+
+      //   &.gray {
+      //     border-color: @darkgray;
+      //     background-color: fade(@darkgray, 15%);
+
+      //     .center-icon {
+      //       color: @write;
+      //     }
+
+      //     .circle {
+      //       border-color: @darkgray;
+      //       background-color: #2b2b2b;
+      //     }
+
+      //     .card-panel {
+      //       .card-left {
+      //         border-color: @darkgray;
+
+      //         .tag {
+      //           border-color: @darkgray;
+      //         }
+
+      //         .num {
+      //           color: @gray;
+      //         }
+      //       }
+
+      //       .card-right {
+      //         .num {
+      //           color: @gray;
+      //           border-color: @darkgray;
+      //         }
+      //       }
+      //     }
+
+      //     .card-percent {
+      //       border-color: @darkgray;
+      //     }
+      //   }
+
+      //   &.red {
+      //     border-color: @red;
+
+      //     .center-icon {
+      //       color: @write;
+      //     }
+
+      //     .circle {
+      //       border-color: @red;
+      //       background-color: #840c0e;
+      //     }
+
+      //     .card-panel {
+      //       background-color: @red;
+
+      //       .card-left {
+      //         border-color: @darkRed;
+
+      //         .tag {
+      //           border-color: @darkRed;
+      //         }
+
+      //         .num {
+      //           color: @write;
+      //         }
+      //       }
+
+      //       .card-right {
+      //         .num {
+      //           color: @write;
+      //           border-color: @darkRed;
+      //         }
+      //       }
+      //     }
+
+      //     .card-percent {
+      //       border-color: @red;
+      //     }
+      //   }
+
+      //   &.black {
+      //     border-color: @write;
+
+      //     .center-icon {
+      //       color: @black;
+      //     }
+
+      //     .circle {
+      //       border-color: @black;
+      //       background-color: #ffffff;
+      //     }
+
+      //     .card-panel {
+      //       background-color: @write;
+
+      //       .card-left {
+      //         border-color: @black;
+
+      //         .tag {
+      //           color: @black;
+      //           border-color: @black;
+      //         }
+
+      //         .num {
+      //           color: @black;
+      //         }
+      //       }
+
+      //       .card-right {
+      //         .num {
+      //           color: @black;
+      //           border-color: @black;
+      //         }
+      //       }
+      //     }
+      //   }
+      // }
+
       .blank {
         margin-right: 4px;
-        flex: 1 0 165px;
+        flex: 1 0 105px;
       }
 
       .card {
         margin-right: 4px;
         margin-top: 4px;
-        flex: 1 0 165px;
+        flex: 1 0 105px;
       }
 
       .card {
-        border: 0.093vh solid;
-        position: relative;
-
-        .circle {
-          width: 1.4815vh;
-          position: absolute;
-          height: 1.4815vh;
-          border: 0.0926vh solid #ffffff;
-          border-radius: 100%;
-          top: calc(50% - 0.7407vh);
-          left: calc(50% - 0.7407vh);
-          background-color: fade(#000, 30);
-
-          .center-icon {
-            font-size: 2.222vh;
-            position: absolute;
-            left: calc(50% - 1.111vh);
-            top: calc(50% - 1.111vh);
-          }
-        }
+        border: 1px solid;
 
         .card-panel {
           display: flex;
+          flex-grow: row;
 
           .card-left {
-            flex: 1 0 auto;
-            border-right: 0.093vh solid;
+            width: 40px;
+            border-right: 0.093vh dotted;
+            display: flex;
+            flex-direction: column;
 
             .tag {
               color: @write;
-              font-size: 14px;
+              font-size: 12px;
               width: 100%;
               text-align: center;
-              border-bottom: 0.093vh solid;
-              padding: 0.7407vh 0;
+              line-height: 1.5;
             }
 
-            .num {
+            .icon {
+              flex-grow: 1;
               display: flex;
               align-items: center;
-              justify-content: space-around;
-              width: 100%;
-              font-size: 14px;
-              text-align: left;
-              padding: 0.7407vh 0;
-
-              div {
-                min-width: 5.463vh;
-                display: inline-block;
-                margin-right: 0.3704vh;
-              }
+              justify-content: center;
 
               i {
-                margin-top: 0.2778vh;
-                margin-left: 0.7407vh;
+                font-size: 14px;
               }
             }
           }
 
           .card-right {
-            flex: 1 0 auto;
+            margin-top: 2px;
 
             .num {
+              width: 100%;
+              font-size: 12px;
+              text-align: left;
+              padding-right: 0.278vh;
               display: flex;
               align-items: center;
               justify-content: space-around;
-              width: 100%;
-              font-size: 14px;
-              text-align: left;
-              padding: 0.7407vh 0;
-
-              &:first-child {
-                border-bottom: 0.093vh solid;
-              }
-
-              div {
-                min-width: 5.463vh;
-                display: inline-block;
-                margin-right: 0.3704vh;
-              }
 
               i {
-                margin-top: 0.2778vh;
-                margin-left: 0.7407vh;
+                margin: 0 2px 0 4px;
+              }
+              span {
+                flex: 1;
               }
             }
           }
@@ -860,7 +1219,7 @@ export default {
           height: 0.926vh;
           padding: 0.093vh 0.185vh;
           position: relative;
-          border-top: 0.093vh solid;
+          border-top: 1px solid;
           background-color: transparent;
 
           .percent {
@@ -876,32 +1235,26 @@ export default {
           border-color: @darkBlue;
           background-color: fade(@darkBlue, 15%);
 
-          .circle {
-            border-color: @darkBlue;
-            background-color: #0e062b;
-          }
-
-          .center-icon {
-            color: @write;
-          }
-
           .card-panel {
             .card-left {
               border-color: @darkBlue;
 
               .tag {
-                border-color: @darkBlue;
+                background-color: fade(@darkBlue, 30);
               }
 
-              .num {
-                color: @darkBlue;
+              .icon {
+                svg {
+                  use {
+                    fill: @write;
+                  }
+                }
               }
             }
 
             .card-right {
               .num {
                 color: @darkBlue;
-                border-color: @darkBlue;
               }
             }
           }
@@ -915,32 +1268,26 @@ export default {
           border-color: @pink;
           background-color: fade(@pink, 15%);
 
-          .circle {
-            border-color: @pink;
-            background-color: #26062d;
-          }
-
-          .center-icon {
-            color: @write;
-          }
-
           .card-panel {
             .card-left {
               border-color: @pink;
 
               .tag {
-                border-color: @pink;
+                background-color: fade(@pink, 30);
               }
 
-              .num {
-                color: @pink;
+              .icon {
+                svg {
+                  use {
+                    fill: @write;
+                  }
+                }
               }
             }
 
             .card-right {
               .num {
                 color: @pink;
-                border-color: @pink;
               }
             }
           }
@@ -954,32 +1301,24 @@ export default {
           border-color: @orange;
           background-color: fade(@orange, 15%);
 
-          .center-icon {
-            color: @write;
-          }
-
-          .circle {
-            border-color: @orange;
-            background-color: #2d1e07;
-          }
-
           .card-panel {
             .card-left {
               border-color: @orange;
 
               .tag {
-                border-color: @orange;
+                background-color: fade(@orange, 30);
               }
 
-              .num {
-                color: @orange;
+              .icon {
+                use {
+                  fill: @write;
+                }
               }
             }
 
             .card-right {
               .num {
                 color: @orange;
-                border-color: @orange;
               }
             }
           }
@@ -993,32 +1332,24 @@ export default {
           border-color: @green;
           background-color: fade(@green, 15%);
 
-          .center-icon {
-            color: @write;
-            padding-left: 4px;
-          }
-
-          .circle {
-            border-color: @green;
-            background-color: #0f2a09;
-          }
           .card-panel {
             .card-left {
               border-color: @green;
 
               .tag {
-                border-color: @green;
+                background-color: fade(@green, 30);
               }
 
-              .num {
-                color: @green;
+              .icon {
+                use {
+                  fill: @write;
+                }
               }
             }
 
             .card-right {
               .num {
                 color: @green;
-                border-color: @green;
               }
             }
           }
@@ -1032,32 +1363,24 @@ export default {
           border-color: @darkgray;
           background-color: fade(@darkgray, 15%);
 
-          .center-icon {
-            color: @write;
-          }
-
-          .circle {
-            border-color: @darkgray;
-            background-color: #2b2b2b;
-          }
-
           .card-panel {
             .card-left {
               border-color: @darkgray;
 
               .tag {
-                border-color: @darkgray;
+                background-color: fade(@darkgray, 30%);
               }
 
-              .num {
-                color: @gray;
+              .icon {
+                use {
+                  fill: @black;
+                }
               }
             }
 
             .card-right {
               .num {
                 color: @gray;
-                border-color: @darkgray;
               }
             }
           }
@@ -1070,15 +1393,6 @@ export default {
         &.red {
           border-color: @red;
 
-          .center-icon {
-            color: @write;
-          }
-
-          .circle {
-            border-color: @red;
-            background-color: #840c0e;
-          }
-
           .card-panel {
             background-color: @red;
 
@@ -1086,18 +1400,19 @@ export default {
               border-color: @darkRed;
 
               .tag {
-                border-color: @darkRed;
+                background-color: fade(@darkRed, 50%);
               }
 
-              .num {
-                color: @write;
+              .icon {
+                use {
+                  fill: @write;
+                }
               }
             }
 
             .card-right {
               .num {
                 color: @write;
-                border-color: @darkRed;
               }
             }
           }
@@ -1110,15 +1425,6 @@ export default {
         &.black {
           border-color: @write;
 
-          .center-icon {
-            color: @black;
-          }
-
-          .circle {
-            border-color: @black;
-            background-color: #ffffff;
-          }
-
           .card-panel {
             background-color: @write;
 
@@ -1126,19 +1432,23 @@ export default {
               border-color: @black;
 
               .tag {
-                color: @black;
-                border-color: @black;
+                background-color: fade(@darkgray, 80%);
               }
 
-              .num {
-                color: @black;
+              .icon {
+                .svg-icon {
+                  svg {
+                    use {
+                      fill: @black;
+                    }
+                  }
+                }
               }
             }
 
             .card-right {
               .num {
                 color: @black;
-                border-color: @black;
               }
             }
           }

src/views/WindSite/components/bsx6.vue

@@ -4,6 +4,7 @@
 
 <script>
 import { Graph } from "@antv/x6";
+import customNode from "./customNode.js";
 
 export default {
     // 名称
@@ -18,6 +19,654 @@ export default {
     data() {
         return {
             graph: null,
+            color: {
+                red: "#b30461",
+                yellow: "#cbaa07",
+            },
+            trees: [
+                {
+                    id: "tree1",
+                    x: 174,
+                    y: 270,
+                    width: 1480,
+                    color: "#b30461",
+                    label: "110kV 母线",
+                    direction: "left",
+                    subNode: [
+                        {
+                            id: "tree1_sub1",
+                            direction: "top",
+                            x: 693,
+                            items: [
+                                {
+                                    id: "tree1_sub1_item1",
+                                    shape: "circuit-breaker-vertical-break",
+                                    label: "111-1",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub1_item2",
+                                    shape: "earthing-disconnector-transverse-break",
+                                    label: "111-01",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub1_item3",
+                                    shape: "circuit-breaker-vertical-break",
+                                    label: "111",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub1_item4",
+                                    shape: "earthing-disconnector-transverse-break",
+                                    label: "111-03",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub1_item5",
+                                    shape: "circuit-breaker-vertical-break",
+                                    label: "111-3",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub1_item6",
+                                    shape: "earthing-disconnector-transverse-break",
+                                    label: "111-0",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub1_item7",
+                                    shape: "arrow-vertical",
+                                    direction: "left",
+                                    height: 65,
+                                    fill: "#b30461",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree1_sub2",
+                            direction: "bottom",
+                            x: 604,
+                            items: [
+                                {
+                                    id: "tree1_sub2_item1",
+                                    shape: "earthing-disconnector-transverse-break",
+                                    label: "11-0",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub2_item2",
+                                    shape: "circuit-breaker-vertical-break",
+                                    label: "101-1",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub2_item3",
+                                    shape: "earthing-disconnector-transverse-break",
+                                    label: "101-01",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub2_item4",
+                                    shape: "circuit-breaker-vertical-break",
+                                    label: "101",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub2_item5",
+                                    shape: "earthing-disconnector-transverse-break",
+                                    label: "101-03",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub2_item6",
+                                    shape: "circuit-breaker-vertical-break",
+                                    label: "101-3",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub2_item7",
+                                    shape: "earthing-disconnector-transverse-break",
+                                    label: "101-0",
+                                    direction: "left",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree1_sub3",
+                            direction: "bottom",
+                            x: 839,
+                            items: [
+                                {
+                                    id: "tree1_sub3_item1",
+                                    shape: "circuit-breaker-vertical-break",
+                                    label: "11-9",
+                                    direction: "left",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree1_sub4",
+                            direction: "bottom",
+                            x: 1225,
+                            items: [
+                                {
+                                    id: "tree1_sub4_item1",
+                                    shape: "earthing-disconnector-transverse-break",
+                                    label: "11-0",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub4_item2",
+                                    shape: "circuit-breaker-vertical-break",
+                                    label: "102-1",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub4_item3",
+                                    shape: "earthing-disconnector-transverse-break",
+                                    label: "102-01",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub4_item4",
+                                    shape: "circuit-breaker-vertical-break",
+                                    label: "102",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub4_item5",
+                                    shape: "earthing-disconnector-transverse-break",
+                                    label: "102-03",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub4_item6",
+                                    shape: "circuit-breaker-vertical-break",
+                                    label: "102-03",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub4_item7",
+                                    shape: "earthing-disconnector-transverse-break",
+                                    label: "102-0",
+                                    direction: "left",
+                                },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    id: "tree2",
+                    x: 174,
+                    y: 600,
+                    width: 935,
+                    color: "#cbaa07",
+                    label: "35kV I母线",
+                    direction: "left",
+                    subNode: [
+                        {
+                            id: "tree2_sub1",
+                            direction: "bottom",
+                            x: 100,
+                            items: [
+                                {
+                                    id: "tree2_sub1_item1",
+                                    shape: "long-circuit-breaker-vertical-break",
+                                    label: "318",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub1_item2",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub1_item3",
+                                    shape: "grounding-transformer",
+                                    label: "",
+                                    direction: "left",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree2_sub2",
+                            direction: "bottom",
+                            x: 237,
+                            items: [
+                                {
+                                    id: "tree2_sub2_item1",
+                                    shape: "long-circuit-breaker-vertical-link",
+                                    label: "317",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub2_item2",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub2_item3",
+                                    shape: "grounding-transformer",
+                                    label: "",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub2_item4",
+                                    shape: "arrow-vertical",
+                                    direction: "left",
+                                    height: 130,
+                                    fill: "#cbaa07",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree2_sub3",
+                            direction: "bottom",
+                            x: 329,
+                            items: [
+                                {
+                                    id: "tree2_sub3_item1",
+                                    shape: "long-circuit-breaker-vertical-link",
+                                    label: "316",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub3_item2",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub3_item3",
+                                    shape: "long-circuit-breaker-vertical-break",
+                                    label: "-3",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree2_sub3_item4",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-03",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree2_sub3_item5",
+                                    shape: "capacitance-vertical",
+                                    label: "",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree2_sub3_item6",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "2C-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub3_item7",
+                                    shape: "arrow-vertical",
+                                    direction: "left",
+                                    height: 100,
+                                    fill: "#cbaa07",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree2_sub4",
+                            direction: "bottom",
+                            x: 427,
+                            items: [
+                                {
+                                    id: "tree2_sub4_item1",
+                                    shape: "long-circuit-breaker-vertical-link",
+                                    label: "315",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub4_item2",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub4_item3",
+                                    shape: "long-circuit-breaker-vertical-break",
+                                    label: "-3",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree2_sub4_item4",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-03",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree2_sub4_item5",
+                                    shape: "capacitance-vertical",
+                                    label: "",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree2_sub4_item6",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "1C-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree3_sub4_item7",
+                                    shape: "arrow-vertical",
+                                    direction: "left",
+                                    height: 100,
+                                    fill: "#cbaa07",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree2_sub5",
+                            direction: "bottom",
+                            x: 511,
+                            items: [
+                                {
+                                    id: "tree2_sub5_item1",
+                                    shape: "long-circuit-breaker-vertical-link",
+                                    label: "314",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub5_item2",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub5_item3",
+                                    shape: "long-circuit-breaker-vertical-break",
+                                    label: "-3",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree2_sub5_item4",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-03",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree2_sub5_item5",
+                                    shape: "reactor-vertical",
+                                    label: "",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree3_sub2_item6",
+                                    shape: "arrow-vertical",
+                                    direction: "left",
+                                    height: 100,
+                                    fill: "#cbaa07",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree2_sub6_1",
+                            direction: "top",
+                            x: 604,
+                            items: [
+                                {
+                                    id: "tree2_sub6_1_item1",
+                                    shape: "line-vertical",
+                                    label: "",
+                                    direction: "left",
+                                    height: 177,
+                                    fill: "#cbaa07",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree2_sub6",
+                            direction: "bottom",
+                            x: 604,
+                            items: [
+                                {
+                                    id: "tree2_sub6_item1",
+                                    shape: "long-circuit-breaker-vertical-break",
+                                    label: "31-9",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub6_item2",
+                                    shape: "resistance-vertical",
+                                    label: "",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub6_item3",
+                                    shape: "voltage-transformer",
+                                    label: "",
+                                    direction: "left",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree2_sub7",
+                            direction: "bottom",
+                            x: 700,
+                            items: [
+                                {
+                                    id: "tree2_sub7_item1",
+                                    shape: "long-circuit-breaker-vertical-link",
+                                    label: "313",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub7_item2",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub7_item3",
+                                    shape: "arrow-vertical",
+                                    direction: "left",
+                                    height: 240,
+                                    fill: "#cbaa07",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree2_sub8",
+                            direction: "bottom",
+                            x: 792,
+                            items: [
+                                {
+                                    id: "tree2_sub8_item1",
+                                    shape: "long-circuit-breaker-vertical-link",
+                                    label: "312",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub8_item2",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub8_item3",
+                                    shape: "arrow-vertical",
+                                    direction: "left",
+                                    height: 240,
+                                    fill: "#cbaa07",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree2_sub9",
+                            direction: "bottom",
+                            x: 886,
+                            items: [
+                                {
+                                    id: "tree2_sub9_item1",
+                                    shape: "long-circuit-breaker-vertical-link",
+                                    label: "311",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub9_item2",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree2_sub9_item3",
+                                    shape: "arrow-vertical",
+                                    direction: "left",
+                                    height: 240,
+                                    fill: "#cbaa07",
+                                },
+                            ],
+                        },
+                    ],
+                },
+                {
+                    id: "tree3",
+                    x: 1163,
+                    y: 600,
+                    width: 491,
+                    color: "#cbaa07",
+                    label: "35kV II母线",
+                    direction: "right",
+                    subNode: [
+                        {
+                            id: "tree3_sub1",
+                            direction: "bottom",
+                            x: 30,
+                            items: [
+                                {
+                                    id: "tree3_sub1_item1",
+                                    shape: "long-circuit-breaker-vertical-break",
+                                    label: "323",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree3_sub1_item2",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree3_sub1_item3",
+                                    shape: "grounding-transformer",
+                                    label: "",
+                                    direction: "left",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree3_sub2",
+                            direction: "bottom",
+                            x: 119,
+                            items: [
+                                {
+                                    id: "tree3_sub2_item1",
+                                    shape: "long-circuit-breaker-vertical-link",
+                                    label: "322",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree3_sub2_item2",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree3_sub2_item3",
+                                    shape: "long-circuit-breaker-vertical-break",
+                                    label: "-3",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree3_sub2_item4",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-03",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree3_sub2_item5",
+                                    shape: "arrow-vertical",
+                                    direction: "left",
+                                    height: 170,
+                                    fill: "#cbaa07",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree3_sub3",
+                            direction: "bottom",
+                            x: 281,
+                            items: [
+                                {
+                                    id: "tree3_sub3_item1",
+                                    shape: "long-circuit-breaker-vertical-link",
+                                    label: "321",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree3_sub3_item2",
+                                    shape: "earthing-disconnector-vertical-break",
+                                    label: "-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tre3_sub3_item3",
+                                    shape: "arrow-vertical",
+                                    direction: "left",
+                                    height: 240,
+                                    fill: "#cbaa07",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree3_sub4",
+                            direction: "bottom",
+                            x: 381,
+                            items: [
+                                {
+                                    id: "tree3_sub4_item1",
+                                    shape: "long-circuit-breaker-vertical-break",
+                                    label: "32-9",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree3_sub4_item2",
+                                    shape: "resistance-vertical",
+                                    label: "",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree3_sub4_item3",
+                                    shape: "voltage-transformer",
+                                    label: "",
+                                    direction: "left",
+                                },
+                            ],
+                        },
+                        {
+                            id: "tree3_sub0",
+                            direction: "top",
+                            x: 236,
+                            items: [
+                                {
+                                    id: "tree3_sub0_item1",
+                                    shape: "line-vertical",
+                                    label: "",
+                                    direction: "left",
+                                    height: 177,
+                                    fill: "#cbaa07",
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
         };
     },
     // 函数
@@ -27,32 +676,106 @@ export default {
                 container: this.$el, // 画布的容器
                 // width: undefined, // 默认使用容器宽度
                 // height: undefined, // 默认使用容器高度
-                autoResize: true, // boolean | Element | Document 是否监听容器大小改变，并自动更新画布大小 默认监听画布容器，也可以指定监听的元素
+                autoResize: true, // boolean | Element | Document 是否监听容器大小改变，并自动更新画布大小 默认监听画布容器，也可以指定监听的元素 
+                mousewheel: {
+                    enabled: true,
+                    modifiers: [],
+                },
+                scroller: {
+                    enabled: true,
+                    pannable: true,
+                },
+                interacting: false,
             });
         },
         initData: function () {
-            const data = {
-                // 节点
-                nodes: [
-                    {
-                        id: "node1",
-                        shape: "rect",
-                        x: 174,
-                        y: 270,
-                        width: 1480,
-                        height: 3,
-                        attrs: {
-                            body: {
-                                fill: "#efdbff",
-                            },
+            const data = { nodes: [] };
+            this.trees.forEach((tree) => {
+                let nodeRoot = {
+                    id: tree.id,
+                    shape: "root-node",
+                    x: tree.x,
+                    y: tree.y,
+                    width: tree.width,
+                    attrs: {
+                        line: {
+                            fill: tree.color,
+                            width: tree.width,
+                        },
+                        label: {
+                            text: tree.label,
+                            x: tree.direction == "left" ? 0 : tree.width,
+                            "text-anchor": tree.direction == "left" ? "start" : "end"
                         },
-                        movable: false,
                     },
-                ],
-            };
+                    movable: false,
+                };
+                data.nodes.push(nodeRoot);
+                tree.subNode.forEach((sub) => {
+                    let y = tree.y;
+                    let prevHeight = customNode.weight;
+                    sub.items.forEach((item) => {
+                        let shape = `${item.shape}-${sub.direction}-${item.direction}`;
+                        switch (sub.direction) {
+                            case "top":
+                                y = y - customNode.nodeSize[shape].height;
+                                break;
+                            case "bottom":
+                                y = y + prevHeight;
+                                prevHeight = customNode.nodeSize[shape].height;
+                                break;
+                            default:
+                                break;
+                        }
+                        let nodeSub = {
+                            id: item.id,
+                            x: sub.x + tree.x,
+                            y: y,
+                            shape: shape,
+                            attrs: {
+                                label: {
+                                    text: item.label,
+                                },
+                            },
+                            movable: false,
+                        };
+                        switch (item.shape) {
+                            case "arrow-vertical":
+                                nodeSub.attrs.line = {
+                                    height: item.height,
+                                    fill: item.fill,
+                                }
+                                nodeSub.attrs.arrow = {
+                                    refY: sub.direction == "bottom" ? item.height : 0,
+                                    fill: item.fill,
+                                }
+                                if (sub.direction == "top") {
+                                    nodeSub.y -= item.height;
+                                }
+                                break;
+
+                            case "line-vertical":
+                                nodeSub.attrs.line = {
+                                    height: item.height,
+                                    fill: item.fill,
+                                }
+                                if (sub.direction == "top") {
+                                    nodeSub.y -= item.height;
+                                }
+                                break;
+                        
+                            default:
+                                break;
+                        }
+                        data.nodes.push(nodeSub);
+                    });
+                });
+            });
             this.graph.fromJSON(data);
         },
         initX6: function () {
+            // 注册自定义节点
+            customNode.register();
             this.initGraph();
             this.initData();
         },
@@ -81,6 +804,4 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.bsx6 {
-}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="wind-site-home">
-    <div class="mg-b-8">
+    <div class="mg-b-16">
       <btn-group-double :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select" />
     </div>
     <row>
@@ -72,7 +72,7 @@
               </div>
               <div class="status ">
                 <span class="svg-icon svg-icon-yellow">
-                  <svg-icon svgid="svg-limit-power" />
+                  <svg-icon svgid="svg-limit-power" style="margin:3px 0.3704vh -3px 0;" />
                 </span>
                 <span class="text yellow">
                   限电
@@ -215,7 +215,7 @@
       </Col>
       <Col :span="8">
         <panel title="完成电量">
-          <multiple-bar-chart height="21.296vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units" />
+          <multiple-bar-chart height="21.296vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units" :showLegend="true" />
         </panel>
       </Col>
       <Col :span="8">

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

@@ -413,7 +413,7 @@ export default {
     .panel-title {
       display: flex;
       width: 100%;
-      background: fade(@darkgray, 20);
+      background: fade(@darkgray, 40);
       padding: 0.37vh;
       padding-left: 2.222vh;
       align-items: center;

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

@@ -1,9 +1,12 @@
 <template>
+  <div class="mg-b-8">
+    <btn-group-double :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select" />
+  </div>
   <div class="wind-site-info">
     <div class="wind-site-menu">
       <div class="wind-site-title">选择风机</div>
       <div class="wind-site-body">
-        <collapse-list :list="WindSites" @click="clickMenu" />
+        <collapse-list :list="WindSites" :allowScroll="true" scrollHeight="calc(100vh - 175px)" />
       </div>
     </div>
     <div class="wind-site-info-body">
@@ -11,7 +14,7 @@
         <div class="info-menu-item" v-for="(item, index) in InfoBtns.data" :key="item" :class="{ active: InfoBtns.activeIndex == index }" @click="onInfoMenuItemClick(item, index)">{{ item.text }}</div>
       </div>
       <el-row>
-        <el-col :span="16" class="pd-r-16" style="position:relative;">
+        <el-col :span="16" style="position:relative;">
           <!-- 基本信息 使用 v-if 每次点击重新加载  -->
           <!-- 使用 v-show 首次全部加载 之后隐藏 点击后显示 -->
           <base-info v-show="InfoBtns.activeIndex == 0" :data="sourceMap" />
@@ -19,8 +22,7 @@
           <div style="text-align:center;">
             <StandAloneImg class="sai" v-show="InfoBtns.activeIndex != 0" :activeIndex="InfoBtns.activeIndex" @selectSvg="selectSvg"></StandAloneImg>
           </div>
-          <generator class="saig" v-show="InfoBtns.activeIndex == 1"></generator>
-          <gearbox class="saig" v-show="InfoBtns.activeIndex == 2"></gearbox>
+          <generator class="saig" v-show="InfoBtns.activeIndex != 0"></generator>
         </el-col>
         <el-col :span="8">
           <warning :data="WarnData" />
@@ -36,9 +38,9 @@ import BaseInfo from "./Base-Info.vue";
 import Warning from "./Warning.vue";
 import StandAloneImg from "./StandAloneImg.vue";
 import generator from "./pages/generator.vue";
-import gearbox from "./pages/gear-box.vue";
+import BtnGroupDouble from "../../../../components/coms/btn/btn-group-double.vue";
 export default {
-  components: { collapseList, BaseInfo, Warning, StandAloneImg, generator, gearbox },
+  components: { collapseList, BaseInfo, Warning, StandAloneImg, generator, BtnGroupDouble },
   props: {
     id: {
       type: String,
@@ -249,12 +251,12 @@ export default {
     flex: 0 0 13.889vh;
     color: @gray;
     background: fade(@darkgray, 10);
-    height: calc(100vh - 8.519vh);
+    height: calc(100vh - 122px);
 
     .wind-site-title {
-      font-size: 1.667vh;
+      font-size: 14px;
       font-weight: 600;
-      padding: 1.481vh;
+      padding: 16px;
     }
   }
 
@@ -265,18 +267,21 @@ export default {
     .info-menu {
       .info-menu-item {
         display: inline-block;
-        padding: 0.741vh 1.481vh;
         border: 1px solid fade(@darkgray, 80);
-        border-radius: 4px;
+        border-radius: 2px;
         color: @gray;
         font-size: @fontsize-s;
-        font-weight: 600;
         letter-spacing: 1px;
         cursor: pointer;
+        width: 85px;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
 
         &.active {
           color: @white;
-          background: fade(@purple, 80);
+          background: fade(@purple, 60);
+          border-color: fade(@purple, 60);
         }
 
         & + .info-menu-item {

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

@@ -10,7 +10,7 @@
         <button class="btn empty-btn" @click="reset">重置</button>
       </el-row>
       <el-row class="options">
-        <el-col class="option-item" :span="8" v-for="(option, index) in options" :key="option" @click="onOptionClick(option, index)" :class="{ active: option.isActive, 'has-value': option.count != '' }">
+        <el-col class="option-item" :span="8" v-for="(option, index) in options" :key="option" @click="onOptionClick(option, index)" :class="{ active: option.isActive }">
           <div class="count">{{ option.count }}</div>
           <div class="text">{{ option.text }}</div>
         </el-col>
@@ -106,7 +106,7 @@ export default {
         data.index = index;
 
         if (this.activeArray.length < index + 1) {
-          this.activeArray.push((!index ? true : false));
+          this.activeArray.push(!index ? true : false);
         }
 
         options.push({
@@ -187,8 +187,8 @@ export default {
         outline: unset;
         border-radius: 0%;
         margin-right: 0.741vh;
-        height: 33px;
-        line-height: 33px;
+        height: 28px;
+        line-height: 28px;
       }
     }
 
@@ -199,10 +199,10 @@ export default {
       border: 1px solid @darkgray;
       // padding: 0.741vh 1.481vh;
       color: @gray;
-      font-size: @fontsize-s;
+      font-size: 14px;
       cursor: pointer;
-      height: 33px;
-      line-height: 33px;
+      height: 28px;
+      line-height: 28px;
     }
 
     .empty {
@@ -215,21 +215,21 @@ export default {
         padding-top: 0.741vh;
         color: @gray;
         cursor: pointer;
-        font-size: @fontsize-s;
+        font-size: 12px;
 
         .count {
           flex: 0 0 3.704vh;
           text-align: center;
           border: 1px solid @darkgray;
           margin-right: 0.37vh;
-          line-height: 30px;
+          line-height: 28px;
         }
 
         .text {
           flex: 1 0 auto;
-          text-align: center;
           border: 1px solid @darkgray;
-          line-height: 30px;
+          line-height: 28px;
+          padding: 0 8px;
         }
 
         & + .option-item {
@@ -240,7 +240,7 @@ export default {
           padding-left: 0px;
         }
 
-        &.has-value {
+        &.purple {
           .text,
           .count {
             border-color: @purple;
@@ -269,8 +269,13 @@ export default {
       margin: auto;
     }
 
+    thead tr th {
+      padding: 8px 0;
+      font-size: 14px;
+    }
+
     tbody {
-      height: 512px;
+      height: 54vh;
     }
   }
 }

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

@@ -108,8 +108,8 @@ export default {
     .panel-title {
       display: flex;
       width: 100%;
-      background: fade(@darkgray, 20);
-      padding: 1.37vh;
+      background: fade(@darkgray, 40);
+      padding: 8px;
       padding-left: 2.222vh;
       align-items: center;
       font-size: @fontsize-s;