冲突处理

src/assets/styles/dialog.less

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

src/assets/styles/font.less

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

src/assets/styles/form.less

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

src/assets/styles/svg.less

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

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

@@ -22,17 +22,19 @@ export default {
     // 传入数据
     data: {
       type: Object,
-      default: {
-        area: ["新荣区", "平城区", "云冈区", "云州区", "阳高县", "天镇县", "广灵县", "浑源县", "左云县"],
-        legend: ["因病", "因残", "因学", "因灾", "缺土地", "缺水"],
-        data: [
-          [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
-          [320, 302, 301, 334, 390, 330, 320, 100, 50],
-          [320, 302, 301, 334, 390, 330, 320, 100, 50],
-          [320, 302, 301, 334, 390, 330, 320, 100, 50],
-          [320, 302, 301, 334, 390, 330, 320, 100, 50],
-          [320, 302, 301, 334, 390, 330, 320, 100, 50],
-        ],
+      default: () => {
+        return {
+          area: ["新荣区", "平城区", "云冈区", "云州区", "阳高县", "天镇县", "广灵县", "浑源县", "左云县"],
+          legend: ["因病", "因残", "因学", "因灾", "缺土地", "缺水"],
+          data: [
+            [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+            [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          ],
+        };
       },
     },
   },
@@ -80,6 +82,7 @@ export default {
         tooltip: {
           trigger: "item",
           backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
           textStyle: {
             color: "#fff",
             fontSize: 14,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/components/coms/list/list.vue

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

src/components/coms/panel/panel.vue

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

src/components/coms/panel/panel3.vue

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

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

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

src/components/coms/table/table.vue

@@ -2,7 +2,7 @@
   <table class="com-table">
     <thead>
       <tr>
-        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" @click="onSort(col)">
+        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" :style="{ width: col.width }" @click="onSort(col)">
           {{ col.name }}
         </th>
       </tr>
@@ -256,6 +256,9 @@ export default {
         color: @rowGray;
         text-align: center;
         font-size: @fontsize-s;
+        overflow: hidden; //隐藏文字
+        text-overflow: ellipsis; //显示 ...
+        white-space: nowrap; //不换行
 
         &.light,
         &.always-light {

src/components/coms/tabs/tab.vue

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

src/router/index.js

@@ -17,6 +17,11 @@ const routes = [
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
   },
   {
+    path: '/monitor/demo',
+    name: 'Demo',
+    component: () => import(/* webpackChunkName: "Demo" */ '../views/Demo.vue'),
+  },
+  {
     path: '/monitor/status', // 状态监视
     name: 'Status',
     component: () => import(/* webpackChunkName: "status" */ '../views/Status/Status.vue'),
@@ -219,14 +224,29 @@ const routes = [
     component: () => import('../views/powerRank/index.vue'),
   },
   {
-    path: '/knowledge',
+    path: '/knowledge',   //故障知识列表
     name: 'knowledge1',
     component: () => import('../views/Knowledge/Knowledge1.vue'),
   },  
   {
-    path: '/knowledge2',
+    path: '/knowledge2',  //安全措施知识
     name: 'knowledge2',
     component: () => import('../views/Knowledge/Knowledge2.vue'),
+  },
+  {
+    path: '/knowledge3',   //风险辨识知识
+    name: 'knowledge3',
+    component: () => import('../views/Knowledge/Knowledge3.vue'),
+  },
+  {
+    path: '/knowledge4',   //作业指导知识
+    name: 'knowledge4',
+    component: () => import('../views/Knowledge/Knowledge4.vue'),
+  },
+  {
+    path: '/knowledge5',   //特征参数
+    name: 'knowledge5',
+    component: () => import('../views/Knowledge/Knowledge5.vue'),
   }
 ]
 

src/views/Demo.vue

@@ -0,0 +1,828 @@
+<template>
+  <h1>组件示例</h1>
+  <tab :data="tabData" @select="select" />
+  <!-- 图表 -->
+  <el-scrollbar v-if="currTab == 1" style="height:85%;">
+    <h2>图表</h2>
+
+    <h2>07-07新增</h2>
+    <h3>柱状图：multiple-y-line-chart</h3>
+    <multiple-y-line-chart :height="'300px'" />
+
+
+    <h2>old</h2>
+
+    <h3>柱状图：horizontal-bar-chart</h3>
+    <horizontal-bar-chart :height="'300px'" />
+
+    <h3>柱状图：horizontal-bar-chart</h3>
+    <hover-bar-chart :list="HoverBarChart" :height="'200px'" />
+
+    <h3>柱状图：list-bar-chart-2</h3>
+    <list-bar-chart-2 :list="ListBarChart" :height="'200px'" />
+
+    <h3>柱状图：multiple-bar-chart</h3>
+    <multiple-bar-chart :list="MultipleBarChart" :height="'200px'" />
+
+    <h3>柱状图：multiple-hover-bar-chart</h3>
+    <multiple-hover-bar-chart :height="'200px'" />
+
+    <h3>柱状图：percent-bar</h3>
+    <percent-bar />
+
+    <h3>柱状图：single-bar-chart</h3>
+    <single-bar-chart />
+
+    <h3>柱状图：thermometer</h3>
+    <thermometer />
+
+    <h3>组合：bar-line-chart</h3>
+    <bar-line-chart :height="'300px'" />
+
+    <h3>组合：bar-line-chart</h3>
+    <vertival-bar-line-chart :height="'300px'" />
+
+    <h3>折线图：double-line-chart</h3>
+    <double-line-chart :height="'200px'" />
+
+    <h3>折线图：multiple-line-chart</h3>
+    <multiple-line-chart :height="'200px'" />
+
+    <h3>折线图：multiple-line-chart</h3>
+    <normal-line-chart />
+
+    <h3>折线图：simple-line-chart</h3>
+    <simple-line-chart />
+
+    <h3>折线图：table-line-chart</h3>
+    <table-line-chart />
+
+    <h3>饼图：dash-pie-chart</h3>
+    <div style="width: 350px">
+      <dash-pie-chart />
+    </div>
+
+    <h3>饼图：dual-pie-chart</h3>
+    <div style="width: 350px">
+      <dual-pie-chart />
+    </div>
+
+    <h3>饼图：normal-pie-chart</h3>
+    <div style="width: 350px">
+      <normal-pie-chart />
+    </div>
+
+    <h3>饼图：percent-pie-chart</h3>
+    <div style="width: 350px">
+      <percent-pie-chart />
+    </div>
+
+    <h3>饼图：direction-radar-chart</h3>
+    <div style="height: 500px">
+      <direction-radar-chart :height="'500px'" />
+    </div>
+
+    <h3>饼图：normal-radar-chart</h3>
+    <div style="height: 500px">
+      <normal-radar-chart :height="'500px'" />
+    </div>
+
+    <h3>饼图：normal-radar-chart</h3>
+    <div style="height: 500px">
+      <radar-chart :height="'500px'" />
+    </div>
+  </el-scrollbar>
+  <!-- 组件 -->
+  <el-scrollbar v-if="currTab == 2" style="height:85%;">
+    <h3>panel</h3>
+    <panel :title="'title 标题'">
+      带标题title
+    </panel>
+    <br />
+    <panel>
+      无标题title
+    </panel>
+
+    <h3>panel-2</h3>
+    <panel-2 :title="'panel -2'">
+      panel 2
+    </panel-2>
+
+    <h3>panel-3</h3>
+    <panel-3>
+      panel-3
+    </panel-3>
+
+    <h3>toolbar-panel</h3>
+    <toolbar-panel title="toolbar-panel">
+      <template v-slot:tools>
+        <div class="tools">
+          <div class="tool-block">
+            <div class="legend bg-green"></div>
+            <div class="legend-text">实际电量</div>
+          </div>
+          <div class="tool-block">
+            <div class="legend bg-orange"></div>
+            <div class="legend-text">计划检修损失</div>
+          </div>
+          <div class="tool-block">
+            <div class="legend bg-yellow"></div>
+            <div class="legend-text">非计划检修损失</div>
+          </div>
+          <div class="tool-block">
+            <div class="legend bg-red"></div>
+            <div class="legend-text">限电损失</div>
+          </div>
+          <div class="tool-block">
+            <div class="legend bg-purple"></div>
+            <div class="legend-text">受累损失</div>
+          </div>
+          <div class="tool-block">
+            <div class="legend bg-blue"></div>
+            <div class="legend-text">性能损失</div>
+          </div>
+        </div>
+      </template>
+      <bar-line-chart :height="'calc(100vh - 200px)'" :color="barColor" />
+    </toolbar-panel>
+
+    <h3>btn-group-double</h3>
+    <btn-group-double :btnGroups="btnGroups" @select="btnGroupDoubleSelect" />
+
+    <h3>card-1</h3>
+    <card-1 />
+
+    <h3>percent-card</h3>
+    <percent-card :value="25" :title="'标题'" />
+
+    <h3>percent-card-2</h3>
+    <percent-card-2 />
+
+    <h3>collapse-list</h3>
+    <div style="width:200px">
+      <collapse-list />
+    </div>
+
+    <h3>list</h3>
+    <div style="width:200px">
+      <list />
+    </div>
+  </el-scrollbar>
+
+  <el-scrollbar v-if="currTab == 3" style="height:85%;">
+    <h3>table</h3>
+    <Table :data="tableData" :height="'200px'" :canScroll="true" :pageSize="40" :showHover="false" @onPagging="tableonPagging" />
+    <h3>table</h3>
+    <check-table :data="tableData" :height="'200px'" :canScroll="true" :pageSize="40" :showHover="false" @onPagging="tableonPagging" @check="CheckTableonCheck" />
+  </el-scrollbar>
+
+  <el-scrollbar v-if="currTab == 4" style="height:85%;">
+    <i class="svg-icon svg-icon-sm mg-r-16">
+      <svg-icon :svgid="'svg-wind-site'" />
+    </i>
+    <i class="svg-icon svg-icon-green mg-r-16">
+      <svg-icon :svgid="'svg-wind-site'" />
+    </i>
+    <i class="svg-icon svg-icon-lg svg-icon-red mg-r-16">
+      <svg-icon :svgid="'svg-wind-site'" />
+    </i>
+  </el-scrollbar>
+</template>
+
+<script>
+import horizontalBarChart from "../components/chart/bar/horizontal-bar-chart.vue";
+import HoverBarChart from "../components/chart/bar/hover-bar-chart.vue";
+import ListBarChart2 from "../components/chart/bar/list-bar-chart2.vue";
+import MultipleBarChart from "../components/chart/bar/multiple-bar-chart.vue";
+import MultipleHoverBarChart from "../components/chart/bar/multiple-hover-bar-chart.vue";
+import PercentBar from "../components/chart/bar/percent-bar.vue";
+import SingleBarChart from "../components/chart/bar/single-bar-chart.vue";
+import Thermometer from "../components/chart/bar/thermometer.vue";
+import BarLineChart from "../components/chart/combination/bar-line-chart.vue";
+import VertivalBarLineChart from "../components/chart/combination/vertival-bar-line-chart.vue";
+import DoubleLineChart from "../components/chart/line/double-line-chart.vue";
+import MultipleLineChart from "../components/chart/line/multiple-line-chart.vue";
+import MultipleYLineChart from "../components/chart/line/multiple-y-line-chart.vue";
+import NormalLineChart from "../components/chart/line/normal-line-chart.vue";
+import SimpleLineChart from "../components/chart/line/simple-line-chart.vue";
+import TableLineChart from "../components/chart/line/table-line-chart.vue";
+import DashPieChart from "../components/chart/pie/dash-pie-chart.vue";
+import DualPieChart from "../components/chart/pie/dual-pie-chart.vue";
+import NormalPieChart from "../components/chart/pie/normal-pie-chart.vue";
+import PercentPieChart from "../components/chart/pie/percent-pie-chart.vue";
+import DirectionRadarChart from "../components/chart/radar/direction-radar-chart.vue";
+import NormalRadarChart from "../components/chart/radar/normal-radar-chart.vue";
+import RadarChart from "../components/chart/radar/radar-chart.vue";
+import BtnGroupDouble from "../components/coms/btn/btn-group-double.vue";
+import Card1 from "../components/coms/cards/card-1.vue";
+import PercentCard2 from "../components/coms/cards/percent-card-2.vue";
+import PercentCard from "../components/coms/cards/percent-card.vue";
+import CollapseList from "../components/coms/collapse/collapse-list.vue";
+import SvgIcon from "../components/coms/icon/svg-icon.vue";
+import List from "../components/coms/list/list.vue";
+import Panel from "../components/coms/panel/panel.vue";
+import Panel2 from "../components/coms/panel/panel2.vue";
+import Panel3 from "../components/coms/panel/panel3.vue";
+import ToolbarPanel from "../components/coms/panel/toolbar-panel.vue";
+import CheckTable from "../components/coms/table/check-table.vue";
+import Table from "../components/coms/table/table.vue";
+import Tab from "../components/coms/tabs/tab.vue";
+
+export default {
+  components: {
+    horizontalBarChart,
+    HoverBarChart,
+    ListBarChart2,
+    MultipleBarChart,
+    MultipleHoverBarChart,
+    PercentBar,
+    SingleBarChart,
+    Thermometer,
+    BarLineChart,
+    VertivalBarLineChart,
+    DoubleLineChart,
+    MultipleLineChart,
+    NormalLineChart,
+    SimpleLineChart,
+    TableLineChart,
+    DashPieChart,
+    DualPieChart,
+    NormalPieChart,
+    PercentPieChart,
+    DirectionRadarChart,
+    NormalRadarChart,
+    RadarChart,
+    Tab,
+    BtnGroupDouble,
+    Card1,
+    PercentCard,
+    PercentCard2,
+    CollapseList,
+    List,
+    Panel,
+    Panel2,
+    Panel3,
+    ToolbarPanel,
+    Table,
+    CheckTable,
+    SvgIcon,
+    MultipleYLineChart,
+  },
+  methods: {
+    select(data) {
+      // console.log(data);
+      this.currTab = parseInt(data.id);
+    },
+    btnGroupDoubleSelect(param) {
+      console.log("btn-group-double");
+      console.log(param);
+    },
+    tableonPagging(param) {
+      console.log("table pagging event");
+      console.log(param);
+      this.tableData.data = [
+        {
+          index: 1,
+          name: "MG01-01",
+          lqf: "0.1000",
+          yggl: "0.1000",
+          yyy: "0.10",
+          pcspp: "0.1000",
+          u1: "0.1000",
+          u2: "0.1000",
+          v1: "0.1000",
+          v2: "0.1000",
+          w1: "0.1000",
+          w2: "0.1000",
+          zca: "0.1000",
+          zcb: "0.1000",
+          clx: "0.1000",
+          clx1: "0.1000",
+          clx2: "0.1000",
+          jc: "0.1000",
+          hh: "0.1000",
+          hj: "0.1000",
+          is_light: false,
+        },
+      ];
+      let index = 0;
+      for (let i = param.start; i < param.end; i++) {
+        this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+        this.tableData.data[index].index = i + 1;
+        index++;
+      }
+    },
+    CheckTableonCheck(param) {
+      console.log("table check event");
+      console.log(param);
+    },
+  },
+  data() {
+    return {
+      currTab: 2,
+      tabData: [
+        {
+          id: "1",
+          text: "图表",
+        },
+        {
+          id: "2",
+          text: "组件",
+        },
+        {
+          id: "3",
+          text: "表格",
+        },
+        {
+          id: "4",
+          text: "图标",
+        },
+      ],
+      tableData: {
+        column: [
+          {
+            name: "",
+            field: "index",
+            width: "50px",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "名称",
+            field: "name",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "理论发电量",
+            field: "lqf",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "SCADA发电量",
+            field: "yggl",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "风速",
+            field: "yyy",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "非计划检修",
+            field: "pcspp",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "计划检修",
+            field: "u1",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "受累",
+            field: "u2",
+            is_num: false,
+            is_light: true,
+          },
+          {
+            name: "限电",
+            field: "v1",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "性能",
+            field: "v2",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "风能率用率%",
+            field: "w1",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        data: [
+          {
+            index: 1,
+            name: "MG01-01",
+            lqf: "0.1000",
+            yggl: "0.1000",
+            yyy: "0.10",
+            pcspp: "0.1000",
+            u1: "0.1000",
+            u2: "0.1000",
+            v1: "0.1000",
+            v2: "0.1000",
+            w1: "0.1000",
+            w2: "0.1000",
+            zca: "0.1000",
+            zcb: "0.1000",
+            clx: "0.1000",
+            clx1: "0.1000",
+            clx2: "0.1000",
+            jc: "0.1000",
+            hh: "0.1000",
+            hj: "0.1000",
+            is_light: false,
+          },
+        ],
+        total: 100,
+      },
+      // 柱状图：horizontal-bar-chart data
+      HorizontalBarChart: {
+        area: ["新荣区", "平城区", "云冈区", "云州区", "阳高县", "天镇县", "广灵县", "浑源县", "左云县"],
+        legend: ["因病", "因残", "因学", "因灾", "缺土地", "缺水"],
+        data: [
+          [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+        ],
+      },
+      // 柱状图：horizontal-bar-chart data
+      HoverBarChart: [
+        {
+          text: "1",
+          value: 1,
+        },
+        {
+          text: "2",
+          value: 2,
+        },
+        {
+          text: "3",
+          value: 1,
+        },
+        {
+          text: "4",
+          value: 3,
+        },
+        {
+          text: "5",
+          value: 3,
+        },
+        {
+          text: "6",
+          value: 3,
+        },
+        {
+          text: "7",
+          value: 3,
+        },
+        {
+          text: "8",
+          value: 3,
+        },
+        {
+          text: "9",
+          value: 3,
+        },
+        {
+          text: "10",
+          value: 3,
+        },
+        {
+          text: "11",
+          value: 3,
+        },
+        {
+          text: "12",
+          value: 3,
+        },
+        {
+          text: "13",
+          value: 3,
+        },
+        {
+          text: "14",
+          value: 3,
+        },
+        {
+          text: "15",
+          value: 3,
+        },
+        {
+          text: "16",
+          value: 3,
+        },
+        {
+          text: "17",
+          value: 3,
+        },
+        {
+          text: "18",
+          value: 3,
+        },
+        {
+          text: "19",
+          value: 3,
+        },
+        {
+          text: "20",
+          value: 3,
+        },
+        {
+          text: "21",
+          value: 3,
+        },
+        {
+          text: "22",
+          value: 3,
+        },
+        {
+          text: "23",
+          value: 3,
+        },
+        {
+          text: "24",
+          value: 3,
+        },
+        {
+          text: "25",
+          value: 3,
+        },
+        {
+          text: "26",
+          value: 3,
+        },
+        {
+          text: "27",
+          value: 3,
+        },
+        {
+          text: "28",
+          value: 3,
+        },
+        {
+          text: "29",
+          value: 3,
+        },
+        {
+          text: "30",
+          value: 3,
+        },
+        {
+          text: "31",
+          value: 3,
+        },
+      ],
+      // list-bar-chart-2 data
+      ListBarChart: [
+        {
+          name: "当日预测电量",
+          value: 103.62,
+          total: 150,
+        },
+        {
+          name: "实际发电量",
+          value: 98.62,
+          total: 100,
+        },
+        {
+          name: "当月预测电量",
+          value: 113.27,
+          total: 150,
+        },
+        {
+          name: "实际发电量",
+          value: 136.72,
+          total: 150,
+        },
+      ],
+      // multiple-bar-chart data
+      MultipleBarChart: [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "购网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "风速",
+          yAxisIndex: 1,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+      ],
+      // btnGroups
+      btnGroups: [
+        {
+          icon: "fa fa-fire",
+          btns: [
+            {
+              text: "某某风场",
+              code: "mmfdc1",
+            },
+            {
+              text: "某某风场",
+              code: "mhsfc",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc2",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc3",
+            },
+            {
+              text: "某某风场",
+              code: "mmfdc4",
+            },
+          ],
+        },
+        {
+          icon: "fa fa-fire-extinguisher",
+          btns: [
+            {
+              text: "某某风场",
+              code: "mmgf1",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf2",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf3",
+            },
+            {
+              text: "某某风场",
+              code: "mmgf4",
+            },
+          ],
+        },
+      ],
+    };
+  },
+  created() {
+    for (let i = 1; i < 21; i++) {
+      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+      this.tableData.data[i].index = i + 1;
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tools {
+  display: flex;
+  line-height: 3.4259vh;
+
+  .tool-block {
+    display: flex;
+    align-items: center;
+    margin-left: 0.741vh;
+
+    .legend {
+      flex: auto;
+      width: 0.741vh;
+      height: 0.741vh;
+      margin-right: 0.741vh;
+
+      &.long {
+        width: 2.963vh;
+        height: 0.37vh;
+      }
+    }
+
+    .legend-text {
+      color: @gray-l;
+      font-size: @fontsize-s;
+    }
+  }
+}
+</style>

src/views/HealthControl/Health1.vue

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

src/views/HealthControl/HealthTab3.vue

@@ -73,33 +73,11 @@
       </div>
     </div>
     <div class="table-box">
-      <table class="com-table">
-        <thead>
-          <tr>
-            <th v-for="(col, index) of tableData.column" :key="index">
-              {{ col }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, index) of tableData.data" :key="index">
-            <td>{{ row.wfname }}</td>
-            <td>{{ row.wtid }}</td>
-            <td>{{row.operationdate ? new Date(row.operationdate).formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
-            <td>{{row.departuretime ? new Date(row.departuretime).formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
-            <td>{{ row.reason }}</td>
-            <td>{{ row.ismain }}</td>
-            <td>{{ row.status }}</td>
-            <td>
-              <button class="btn success" @click="onClickTrack(row)">消缺跟踪</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <ComTable :data="tableData" height="80vh"></ComTable>
     </div>
-    <div>
-      <el-dialog title="消缺跟踪" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
-        <info-track />
+    <div class="dialog-box">
+      <el-dialog title="消缺跟踪" v-model="dialogVisible" width="950px" custom-class="modal" :close-on-click-modal="false">
+        <info-track :data="trackDate"/>
       </el-dialog>   
     </div> 
   </div>
@@ -107,11 +85,13 @@
 
 <script>
 import InfoTrack from "./infotrack.vue";
+import ComTable from "@com/coms/table/table.vue";
 import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 
 export default {
-  components: { InfoTrack, SvgIcon },
+  components: { InfoTrack, ComTable, SvgIcon },
   data() {
+    const that = this
     return {
       stations: [], // 场站
       windturbines: [], // 风机
@@ -120,14 +100,62 @@ export default {
       starts: "",
       endts: new Date(),
       tableData: {
-        column: ["场站", "风机编号", "任务开始时间", "任务接受时间", "检修原因", "受否下单", "任务状态", "操作"],
+        column: [
+          { 
+            name: "场站",
+            field: "wfname",
+            is_light: false
+          },
+          { 
+            name: "风机编号",
+            field: "wtid",
+            is_light: false
+          },
+          { 
+            name: "任务开始时间",
+            field: "operationdate",
+            is_light: false
+          },
+          { 
+            name: "任务接受时间",
+            field: "departuretime",
+            is_light: false
+          },
+          { 
+            name: "检修原因",
+            field: "reason",
+            is_light: false
+          },
+          { 
+            name: "受否下单",
+            field: "ismain",
+            is_light: false
+          },
+          { 
+            name: "任务状态",
+            field: "status",
+            is_light: false
+          },
+          {
+            name: "操作",
+            field: "",
+            is_num: false,
+            is_light: false,
+            template() {
+              return "<el-button type='text' style='cursor: pointer;'>消缺跟踪</el-button>";
+            },
+            click(e, row) {
+              that.onClickTrack(row);
+            },
+          },],
         data: [],
       },
-      dialogVisible: false
+      dialogVisible: false,
+      trackDate: undefined,
     };
   },
   created() {
-    this.starts = new Date(new Date().setMonth(new Date().getMonth()-40)).formatDate("yyyy-MM-dd");
+    this.starts = new Date(new Date().setMonth(new Date().getMonth()-2)).formatDate("yyyy-MM-dd");
     this.requestStations();
   },
   methods: {
@@ -138,6 +166,7 @@ export default {
     // 消缺跟踪
     onClickTrack(row){
       this.dialogVisible = true
+      this.requestTrack(row);
     },
     // 获取场站
     requestStations() {
@@ -149,6 +178,7 @@ export default {
           if (res.code == 200) {
             that.stations = res.data;
             that.station = that.stations[3].id;
+            that.requestUnfinishedList();
           }
         },
       });
@@ -179,11 +209,40 @@ export default {
         },
         success(res) {
           if (res.code == 200) {
-            that.tableData.data = res.data;
+            that.tableData.data = []
+            res.data.forEach(item => {
+              let obj = {
+                wfname: item.wfname,
+                wtid: item.wtid,
+                operationdate: item.operationdate?new Date(item.operationdate).formatDate("yyyy-MM-dd hh:mm:ss"):'',
+                departuretime: item.departuretime?new Date(item.departuretime).formatDate("yyyy-MM-dd hh:mm:ss"):'',
+                reason: item.reason,
+                ismain: item.ismain,
+                status: item.status,
+                rid: item.rid
+              }
+              that.tableData.data.push(obj)
+          });
           }
         },
       });
     },
+    // 通过消缺单获得详细信息
+    requestTrack(row){
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "recommen/findMainTrack",
+        data: {
+          rid: row.rid,
+        },
+        success(res) {
+          if (res.code == 200) {
+            that.trackDate = res.data
+          }
+        },
+      });
+    }
   },
   watch: {
     station(val) {
@@ -199,77 +258,11 @@ export default {
 @rowGray: #606769;
 @darkBack: #536268;
 .health-tab-3 {
-  .table-box {
-    border: 0.093vh solid @darkgray;
-    position: relative;
-    overflow: auto;
-    flex-grow: 1;
-    top: 1vh;
-  }
-  .com-table {
-    width: 100%;
-    border-collapse: collapse;
+  .dialog-box {
+    height: 100%;
     display: flex;
-    flex-direction: column;
-    max-height: calc(100vh - 175px);
-  
-    thead {
-      tr {
-        position: relative;
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-
-        th {
-          background-color: fade(@darkBack, 20%);
-          padding: 1.481vh 0;
-          color: @titleGray;
-          font-weight: 400;
-          font-size: @fontsize-s;
-          position: sticky;
-          // top: 0;
-
-          &.light {
-            color: @green;
-          }
-        }
-      }
-    }
-
-    tbody {
-      display: block;
-      max-height: 100%; 
-      overflow-y: scroll;
-
-      tr {
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-
-        &:nth-child(2n) {
-          background-color: fade(@rowGray, 20%);
-        }
-
-        td {
-          padding: 0.556vh 0;
-          color: @rowGray;
-          text-align: center;
-          font-size: @fontsize-s;
-          overflow: hidden; //隐藏文字
-          text-overflow: ellipsis; //显示 ...
-          white-space: nowrap; //不换行
-
-          &.light {
-            color: @green !important;
-          }
-
-          &.num {
-            font-family: "Bicubik";
-            font-weight: 400;
-          }
-        }
-      }
-    }
+    justify-content: center;
+    align-items: center;
   }
 }
 </style>

src/views/HealthControl/HealthTab4.vue

@@ -68,50 +68,31 @@
           </div>
         </div>
       </div>
+      
       <div class="query-actions" style="margin-right: 500px">
         <button class="btn green" @click="onClickSearch">搜索</button>
       </div>
     </div>
     <div class="table-box">
-      <table class="com-table">
-        <thead>
-          <tr>
-            <th v-for="(col, index) of tableData.column" :key="index">
-              {{ col }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, index) of tableData.data" :key="index">
-            <td>{{ row.wfname }}</td>
-            <td>{{ row.wtid }}</td>
-            <td>{{new Date(row.operationdate).formatDate("yyyy-MM-dd hh:mm:ss")}}</td>
-            <td>{{row.departuretime ? new Date().formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
-            <td>{{ row.reason }}</td>
-            <td>{{ row.repairedcomment }}</td>
-            <td>
-              <button class="btn success" @click="onClickTrack(row)">消缺跟踪</button>
-              <button class="btn success" @click="onClickHistory(row)">历史查询</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <ComTable :data="tableData" height="80vh"></ComTable>
     </div>
-    <div>
-      <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
-        <dayinfo />
+    <div class="dialog-box">
+      <el-dialog title="日信息对比" v-model="dialogVisible" width="1200px" custom-class="modal" :close-on-click-modal="false">
+        <info-history :data="trackDate"/>
       </el-dialog>   
     </div> 
   </div>
 </template>
 
 <script>
-import Dayinfo from "./dayinfo.vue";
+import InfoHistory from "./infotrack2.vue";
+import ComTable from "@com/coms/table/table.vue";
 import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 
 export default {
-  components: { Dayinfo, SvgIcon },
+  components: { InfoHistory, ComTable, SvgIcon },
   data() {
+    const that = this
     return {
       stations: [], // 场站
       windturbines: [], // 风机
@@ -120,28 +101,73 @@ export default {
       starts: "",
       endts: new Date(),
       tableData: {
-        column: ["场站", "风机编号", "任务开始时间", "任务接受时间", "检修原因", "消缺工艺",  "操作"],
+        column: [
+          { 
+            name: "场站",
+            field: "wfname",
+            is_light: false
+          },
+          { 
+            name: "风机编号",
+            field: "wtid",
+            is_light: false
+          },
+          { 
+            name: "任务开始时间",
+            field: "operationdate",
+            is_light: false
+          },
+          { 
+            name: "任务接受时间",
+            field: "departuretime",
+            is_light: false
+          },
+          { 
+            name: "检修原因",
+            field: "reason",
+            is_light: false
+          },
+          { 
+            name: "消缺工艺",
+            field: "repairedcomment",
+            is_light: false
+          },
+          {
+            name: "操作",
+            field: "",
+            is_num: false,
+            is_light: false,
+            template() {
+              return "<el-button type='text' style='cursor: pointer;'>消缺跟踪</el-button>";
+            },
+            click(e, row) {
+              that.onClickTrack(row);
+            },
+          }
+        ],
         data: [],
       },
-      dialogVisible: false
+      dialogVisible: false,
+      trackDate: undefined,
     };
   },
   created() {
-    this.starts = new Date(new Date().setMonth(new Date().getMonth()-1)).formatDate("yyyy-MM-dd");
+    this.starts = new Date(new Date().setMonth(new Date().getMonth()-2)).formatDate("yyyy-MM-dd");
     this.requestStations();
   },
   methods: {
     // 搜索按钮
     onClickSearch() {
-      this.requestUnfinishedList();
+      this.requestFinishedList();
     },
     // 消缺跟踪
     onClickTrack(row){
       this.dialogVisible = true
+      this.requestTrack(row);
     },
     // 历史查询
     onClickHistory(row){
-
+      this.dialogVisible = true
     },
     // 获取场站
     requestStations() {
@@ -153,6 +179,7 @@ export default {
           if (res.code == 200) {
             that.stations = res.data;
             that.station = that.stations[3].id;
+            that.requestFinishedList();
           }
         },
       });
@@ -169,8 +196,8 @@ export default {
         },
       });
     },
-    // 获取未完成消缺单列表
-    requestUnfinishedList() {
+    // 获取已完成消缺单列表
+    requestFinishedList() {
       let that = this;
       that.API.requestData({
         method: "POST",
@@ -183,11 +210,39 @@ export default {
         },
         success(res) {
           if (res.code == 200) {
-            that.tableData.data = res.data;
+            that.tableData.data = []
+            res.data.forEach(item => {
+              let obj = {
+                wfname: item.wfname,
+                wtid: item.wtid,
+                operationdate: item.operationdate?new Date(item.operationdate).formatDate("yyyy-MM-dd hh:mm:ss"):'',
+                departuretime: item.departuretime?new Date(item.departuretime).formatDate("yyyy-MM-dd hh:mm:ss"):'',
+                reason: item.reason,
+                repairedcomment: item.repairedcomment,
+                rid: item.rid
+              }
+              that.tableData.data.push(obj)
+            });
           }
         },
       });
     },
+    // 通过消缺单获得详细信息
+    requestTrack(row){
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "recommen/findMainTrack",
+        data: {
+          rid: row.rid,
+        },
+        success(res) {
+          if (res.code == 200) {
+            that.trackDate = res.data
+          }
+        },
+      });
+    }
   },
   watch: {
     station(val) {
@@ -203,77 +258,11 @@ export default {
 @rowGray: #606769;
 @darkBack: #536268;
 .health-tab-4 {
-  .table-box {
-    border: 0.093vh solid @darkgray;
-    position: relative;
-    overflow: auto;
-    flex-grow: 1;
-    top: 1vh;
-  }
-  .com-table {
-    width: 100%;
-    border-collapse: collapse;
+  .dialog-box {
+    height: 100%;
     display: flex;
-    flex-direction: column;
-    max-height: calc(100vh - 175px);
-  
-    thead {
-      tr {
-        position: relative;
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-
-        th {
-          background-color: fade(@darkBack, 20%);
-          padding: 1.481vh 0;
-          color: @titleGray;
-          font-weight: 400;
-          font-size: @fontsize-s;
-          position: sticky;
-          // top: 0;
-
-          &.light {
-            color: @green;
-          }
-        }
-      }
-    }
-
-    tbody {
-      display: block;
-      max-height: 100%; 
-      overflow-y: scroll;
-
-      tr {
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-
-        &:nth-child(2n) {
-          background-color: fade(@rowGray, 20%);
-        }
-
-        td {
-          padding: 0.556vh 0;
-          color: @rowGray;
-          text-align: center;
-          font-size: @fontsize-s;
-          overflow: hidden; //隐藏文字
-          text-overflow: ellipsis; //显示 ...
-          white-space: nowrap; //不换行
-
-          &.light {
-            color: @green !important;
-          }
-
-          &.num {
-            font-family: "Bicubik";
-            font-weight: 400;
-          }
-        }
-      }
-    }
+    justify-content: center;
+    align-items: center;
   }
 }
 </style>

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

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

src/views/HealthControl/fault-diagnosis.vue

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

src/views/HealthControl/infohistory.vue

@@ -1,275 +0,0 @@
-<template>
-  <div class="health-tab-3">
-    <div class="query mg-b-8">
-      <div class="query-items">
-        <div class="query-item">
-          <div class="lable">场站：</div>
-          <div class="search-input">
-            <el-select
-              v-model="station"
-              clearable
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in stations"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">机组</div>
-          <div class="search-input">
-            <el-select
-              v-model="windturbine"
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in windturbines"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-
-        <div class="query-item">
-          <div class="lable">开始日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="starts"
-              type="date"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">结束日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="endts"
-              type="date"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-            <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="''" />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="query-actions" style="margin-right: 500px">
-        <button class="btn green" @click="onClickSearch">搜索</button>
-      </div>
-    </div>
-    <div class="table-box">
-      <table class="com-table">
-        <thead>
-          <tr>
-            <th v-for="(col, index) of tableData.column" :key="index">
-              {{ col }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, index) of tableData.data" :key="index">
-            <td>{{ row.wfname }}</td>
-            <td>{{ row.wtid }}</td>
-            <td>{{row.operationdate ? new Date(row.operationdate).formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
-            <td>{{row.departuretime ? new Date(row.departuretime).formatDate("yyyy-MM-dd hh:mm:ss") : ""}}</td>
-            <td>{{ row.reason }}</td>
-            <td>{{ row.ismain }}</td>
-            <td>{{ row.status }}</td>
-            <td>
-              <button class="btn success" @click="onClickTrack(row)">消缺跟踪</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div>
-      <el-dialog title="消缺跟踪" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
-        <info-track />
-      </el-dialog>   
-    </div> 
-  </div>
-</template>
-
-<script>
-import InfoTrack from "./infotrack.vue";
-import SvgIcon from "../../components/coms/icon/svg-icon.vue";
-
-export default {
-  components: { InfoTrack, SvgIcon },
-  data() {
-    return {
-      stations: [], // 场站
-      windturbines: [], // 风机
-      station: "",
-      windturbine: "",
-      starts: "",
-      endts: new Date(),
-      tableData: {
-        column: ["场站", "风机编号", "任务开始时间", "任务接受时间", "检修原因", "受否下单", "任务状态", "操作"],
-        data: [],
-      },
-      dialogVisible: false
-    };
-  },
-  created() {
-    this.starts = new Date(new Date().setMonth(new Date().getMonth()-40)).formatDate("yyyy-MM-dd");
-    this.requestStations();
-  },
-  methods: {
-    // 搜索按钮
-    onClickSearch() {
-      this.requestUnfinishedList();
-    },
-    // 消缺跟踪
-    onClickTrack(row){
-      this.dialogVisible = true
-    },
-    // 获取场站
-    requestStations() {
-      let that = this;
-      that.API.requestData({
-        method: "GET",
-        subUrl: "powercompare/windfarmAjax",
-        success(res) {
-          if (res.code == 200) {
-            that.stations = res.data;
-            that.station = that.stations[3].id;
-          }
-        },
-      });
-    },
-    // 获取风机
-    requestWindturbines(wpid) {
-      let that = this;
-      that.API.requestData({
-        method: "GET",
-        subUrl: "powercompare/windturbineAjax",
-        data: { wpId: wpid },
-        success(res) {
-          if (res.code == 200) that.windturbines = res.data;
-        },
-      });
-    },
-    // 获取未完成消缺单列表
-    requestUnfinishedList() {
-      let that = this;
-      that.API.requestData({
-        method: "POST",
-        subUrl: "recommen/unfinishedList",
-        data: {
-          wpId: that.station,
-          wtId: that.windturbine,
-          beginDate: new Date(that.starts).formatDate("yyyy-MM-dd"),
-          endDate: new Date(that.endts).formatDate("yyyy-MM-dd"),
-        },
-        success(res) {
-          if (res.code == 200) {
-            that.tableData.data = res.data;
-          }
-        },
-      });
-    },
-  },
-  watch: {
-    station(val) {
-      this.windturbine = "";
-      this.requestWindturbines(val);
-    },
-  },
-};
-</script>
-
-<style lang="less" scope>
-@titleGray: #9ca5a8;
-@rowGray: #606769;
-@darkBack: #536268;
-.health-tab-3 {
-  .table-box {
-    border: 0.093vh solid @darkgray;
-    position: relative;
-    overflow: auto;
-    flex-grow: 1;
-    top: 1vh;
-  }
-  .com-table {
-    width: 100%;
-    border-collapse: collapse;
-    display: flex;
-    flex-direction: column;
-    max-height: calc(100vh - 175px);
-  
-    thead {
-      tr {
-        position: relative;
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-
-        th {
-          background-color: fade(@darkBack, 20%);
-          padding: 1.481vh 0;
-          color: @titleGray;
-          font-weight: 400;
-          font-size: @fontsize-s;
-          position: sticky;
-          // top: 0;
-
-          &.light {
-            color: @green;
-          }
-        }
-      }
-    }
-
-    tbody {
-      display: block;
-      max-height: 100%; 
-      overflow-y: scroll;
-
-      tr {
-        display: table;
-        table-layout: fixed;
-        width: 100%;
-
-        &:nth-child(2n) {
-          background-color: fade(@rowGray, 20%);
-        }
-
-        td {
-          padding: 0.556vh 0;
-          color: @rowGray;
-          text-align: center;
-          font-size: @fontsize-s;
-          overflow: hidden; //隐藏文字
-          text-overflow: ellipsis; //显示 ...
-          white-space: nowrap; //不换行
-
-          &.light {
-            color: @green !important;
-          }
-
-          &.num {
-            font-family: "Bicubik";
-            font-weight: 400;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

src/views/HealthControl/infotrack.vue

@@ -1,31 +1,535 @@
 <template>
-  <div class="info-track">
-
+  <div class="track-info">
+    <div class="form-info">
+      <div class="work-flow">
+        <div class="work-flow-line"></div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-warn"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">流程未启动</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-down"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺单已下达</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-hour-hand"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺单处理中</div>
+        </div>
+        <div class="work-flow-item active">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-对"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺完成</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-flag"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺验收</div>
+        </div>
+      </div>
+      <div class="form-body">
+        <el-form ref="form" :model="form" label-width="120px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="风场：">
+                <el-input
+                  v-model="form.wpName"
+                  placeholder="风场名称"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="风机：">
+                <el-input
+                  v-model="form.wtId"
+                  placeholder="风机名称"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="推荐检修时间：">
+                <el-input
+                  v-model="form.tjss"
+                  placeholder="推荐检修时间"
+                ></el-input>
+                <!-- <el-date-picker v-model="form.tjjxsj" type="datetime" placeholder="推荐检修时间" popper-class="date-select"></el-date-picker> -->
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="预计检修风速：">
+                <el-input
+                  v-model="form.tjfs"
+                  placeholder="预计检修风速"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="推荐理由：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.description"
+                  placeholder="推荐理由"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="下单时间：">
+                <el-input
+                  v-model="form.prodtdepttime"
+                  placeholder="下单时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="主要负责人：">
+                <el-input
+                  v-model="form.workleader"
+                  placeholder="主要负责人"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="出发时间：">
+                <el-input
+                  v-model="form.departuretime"
+                  placeholder="出发时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="到达时间：">
+                <el-input
+                  v-model="form.arrivaltime"
+                  placeholder="到达时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="排查方法：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.gzpc"
+                  placeholder="排查方法"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="处理方法：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.repairedcomment"
+                  placeholder="处理方法"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="消缺时间：">
+                <el-input
+                  v-model="form.repairedtime"
+                  placeholder="消缺时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="故障时长：">
+                <el-input
+                  v-model="form.degradebugtype"
+                  placeholder="故障时长"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="验收人：">
+                <el-input
+                  v-model="form.checkdeptlabornum"
+                  placeholder="验收人"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="验收时间：">
+                <el-input
+                  v-model="form.checktime"
+                  placeholder="验收时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="验收意见：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.checkdeptopinion"
+                  placeholder="验收意见"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+    <div class="tabs">
+      <div class="tab-box">
+        <div
+          class="tab-item"
+          v-for="(tab, index) of tabs"
+          :key="index"
+          :class="{ active: activeTab == index }"
+          @click="selectTab(index)"
+        >
+          <span
+            class="svg-icon svg-icon-md"
+            :class="activeTab == index ? 'svg-icon-green' : 'svg-icon-write'"
+          >
+            <SvgIcon :svgid="tab.icon"></SvgIcon>
+          </span>
+          <span>{{ tab.text }}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-
 <script>
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
 export default {
-  name: "info-track",
-  props:{id: String}
-
+  components: {
+    SvgIcon,
+  },
+  props: {
+    data: Object,
+  },
+  data() {
+    return {
+      tabs: [
+        {
+          icon: "svg-gis",
+          text: "GIS地貌",
+        },
+        {
+          icon: "svg-jkp",
+          text: "手环监控",
+        },
+        {
+          icon: "svg-jk",
+          text: "监控视频",
+        },
+      ],
+      activeTab: 0,
+      form: {
+        wtId: "",
+        wpId: "",
+        wpName: "",
+        tjyy: "",
+        tjss: null,
+        tjfs: null,
+        bugnum: null,
+        workgroup1: null,
+        findlabornum: null,
+        reportlabornum: null,
+        description: null,
+        departuretime: null,
+        arrivaltime: null,
+        prodtdeptopinion: null,
+        workleader: null,
+        repairedtime: null,
+        repairedcomment: null,
+        unresolvedbug: null,
+        checktime: null,
+        degradebugtype: null,
+        repairdeptbugtype1: null,
+        checkdeptlabornum: null,
+        status: null,
+        gzpc: null,
+        gzjx: null,
+        prodtdepttime: null,
+        checkdeptopinion: null,
+        rwfpsc: 0.0,
+        rwfppjsc: 1066.0,
+        ddxcsc: 0.0,
+        ddxcpjsc: 0.0,
+        qxclsc: 0.0,
+        qxclpjsc: 0.0,
+        yssc: 0.0,
+        yspjsc: 0.0,
+        workHours: null,
+      },
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.form = this.data;
+    });
+  },
+  // 函数
+  methods: {
+    selectTab: function (index) {
+      this.activeTab = index;
+    },
+  },
+  watch: {
+    data(value) {
+      this.form = value;
+      this.form.tjss = value.tjss?new Date(value.tjss).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.prodtdepttime = value.prodtdepttime?new Date(value.prodtdepttime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.departuretime = value.departuretime?new Date(value.departuretime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.arrivaltime = value.arrivaltime?new Date(value.arrivaltime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.repairedtime = value.repairedtime?new Date(value.repairedtime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.checktime = value.checktime?new Date(value.checktime).formatDate("yyyy-MM-dd hh:mm:ss"):"" 
+    },
+  },
 };
 </script>
 
+<style lang="less">
+.track-info {
+  display: flex;
+  .form-info {
+    flex: 0 0 720px;
+    .work-flow {
+      height: 132px;
+      width: 100%;
+      background: fade(@gray, 20);
+      margin-bottom: 8px;
+      padding: 26px 69px;
+      display: flex;
+      position: relative;
+
+      .work-flow-line {
+        position: absolute;
+        width: 600px;
+        height: 4px;
+        left: calc(50% - 300px);
+        top: calc(50% - 11px);
+        background: @green;
+      }
+
+      .work-flow-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        &.active {
+          .work-flow-icon-item {
+            .work-flow-icon-o {
+              border: 1px solid @green;
+              opacity: 0.4;
+            }
+
+            .work-flow-icon-i {
+              border: 2px solid @green;
+              background: linear-gradient(
+                to bottom,
+                #1f2b2b 0%,
+                #1f2b2b 20%,
+                @green 100%
+              );
+            }
+
+            .svg-icon {
+              svg {
+                use {
+                  fill: @green;
+                }
+              }
+            }
+          }
+
+          .work-flow-text {
+            color: @green;
+          }
+        }
+
+        .work-flow-icon-item {
+          width: 60px;
+          height: 60px;
+          position: relative;
+
+          .work-flow-icon-o {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            border: 1px solid #b3bdc0;
+            opacity: 0.4;
+          }
+
+          .work-flow-icon-m {
+            position: absolute;
+            top: 1px;
+            left: 1px;
+            width: 59px;
+            height: 59px;
+            border-radius: 50%;
+            border: 4px solid #212b2b;
+          }
+
+          .work-flow-icon-i {
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            border: 2px solid #606769;
+            background: linear-gradient(
+              to bottom,
+              #1f2b2b 0%,
+              #1f2b2b 20%,
+              #606769 100%
+            );
+          }
+
+          .svg-icon {
+            position: absolute;
+            width: 26px;
+            height: 26px;
+            top: calc(50% - 10px);
+            left: calc(50% - 13px);
+            svg {
+              width: 26px;
+              height: 26px;
+              use {
+                fill: @gray-l;
+              }
+            }
+          }
+        }
+
+        .work-flow-text {
+          color: @gray-l;
+          margin-top: 8px;
+          font-size: @fontsize-s;
+        }
+      }
+    }
+  }
+
+  .evaluate {
+    flex: 0 0 358px;
+    margin-left: 69px;
+
+    .evaluate-item {
+      display: flex;
+      align-items: center;
+      margin-top: 8px;
+
+      .evaluate-label {
+        width: 120px;
+        text-align: right;
+      }
+
+      .evaluate-label,
+      .evaluate-unit {
+        font-size: @fontsize;
+        color: @gray-l;
+      }
+
+      .input-number {
+        display: inline-block;
+        width: 62px;
+        margin: 0 16px;
+      }
+    }
+  }
+
+  .tabs {
+    flex: 0 0 220px;
+    height: 619px;
+    border-left: 1px solid #53626833;
+
+    .tab-box {
+      margin: 1.852vh 2.778vh;
+      display: inline-block;
+      z-index: 2;
+      position: relative;
+      margin: 26px auto;
+
+      .tab-item {
+        display: flex;
+        align-items: center;
+        // justify-content: center;
+        font-size: @fontsize-l;
+        cursor: pointer;
+        // width: 120px;
+        padding: 8px;
+        margin-bottom: 16px;
 
-<style lang="less" scoped>
-.info-track{
-     display: flex;
-     flex-direction: column;
-     
-     .track-map{
-          flex-direction: row;
-          justify-content: flex-end;
-     }
+        &.active {
+          color: @green;
+          position: relative;
+          background-image: @greenLinearTop;
 
-     .track-line{
+          &::after {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 5px;
+            border: 1px solid @green;
+            border-top: 0;
+            left: 0;
+            bottom: 0;
+            box-sizing: border-box;
+          }
+        }
 
-     }
+        .svg-icon {
+          margin-right: 16px;
+        }
+      }
+    }
+  }
 }
 </style>

src/views/HealthControl/infotrack2.vue

@@ -0,0 +1,573 @@
+<template>
+  <div class="track-info">
+    <div class="form-info">
+      <div class="work-flow">
+        <div class="work-flow-line"></div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-warn"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">流程未启动</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-down"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺单已下达</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-hour-hand"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺单处理中</div>
+        </div>
+        <div class="work-flow-item active">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-对"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺完成</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-flag"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺验收</div>
+        </div>
+      </div>
+       <div class="form-body">
+        <el-form ref="form" :model="form" label-width="120px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="风场：">
+                <el-input
+                  v-model="form.wpName"
+                  placeholder="风场名称"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="风机：">
+                <el-input
+                  v-model="form.wtId"
+                  placeholder="风机名称"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="推荐检修时间：">
+                <el-input
+                  v-model="form.tjss"
+                  placeholder="推荐检修时间"
+                ></el-input>
+                <!-- <el-date-picker v-model="form.tjjxsj" type="datetime" placeholder="推荐检修时间" popper-class="date-select"></el-date-picker> -->
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="预计检修风速：">
+                <el-input
+                  v-model="form.tjfs"
+                  placeholder="预计检修风速"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="推荐理由：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.description"
+                  placeholder="推荐理由"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="下单时间：">
+                <el-input
+                  v-model="form.prodtdepttime"
+                  placeholder="下单时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="主要负责人：">
+                <el-input
+                  v-model="form.workleader"
+                  placeholder="主要负责人"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="出发时间：">
+                <el-input
+                  v-model="form.departuretime"
+                  placeholder="出发时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="到达时间：">
+                <el-input
+                  v-model="form.arrivaltime"
+                  placeholder="到达时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="排查方法：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.gzpc"
+                  placeholder="排查方法"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="处理方法：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.repairedcomment"
+                  placeholder="处理方法"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="消缺时间：">
+                <el-input
+                  v-model="form.repairedtime"
+                  placeholder="消缺时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="故障时长：">
+                <el-input
+                  v-model="form.degradebugtype"
+                  placeholder="故障时长"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="验收人：">
+                <el-input
+                  v-model="form.checkdeptlabornum"
+                  placeholder="验收人"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="验收时间：">
+                <el-input
+                  v-model="form.checktime"
+                  placeholder="验收时间"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="验收意见：">
+                <el-input
+                  type="textarea"
+                  :rows="3"
+                  v-model="form.checkdeptopinion"
+                  placeholder="验收意见"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+    <div class="evaluate">
+      <div class="white">评价</div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">任务分配时长</div>
+        <el-input-number class="input-number" v-model="form.rwfpsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">任务分配平均时长</div>
+        <el-input-number class="input-number" v-model="form.rwfppjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">到达现场时长</div>
+        <el-input-number class="input-number" v-model="form.ddxcsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">到达现场平均时长</div>
+        <el-input-number class="input-number" v-model="form.ddxcpjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">缺陷处理时长</div>
+        <el-input-number class="input-number" v-model="form.qxclsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">缺陷处理平均时长</div>
+        <el-input-number class="input-number" v-model="form.qxclpjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">验收时长</div>
+        <el-input-number class="input-number" v-model="form.yssc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">验收平均时长</div>
+        <el-input-number class="input-number" v-model="form.yspjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+    </div>
+    <div class="tabs">
+      <div class="tab-box">
+        <div class="tab-item" v-for="(tab, index) of tabs" :key="index" :class="{ active: activeTab == index }" @click="selectTab(index)">
+          <span class="svg-icon svg-icon-md" :class="activeTab == index ? 'svg-icon-green' : 'svg-icon-write'">
+            <SvgIcon :svgid="tab.icon"></SvgIcon>
+          </span>
+          <span>{{ tab.text }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+export default {
+  components: {
+    SvgIcon
+  },
+   props: {
+    data: Object,
+  },
+  data() {
+    return {
+      tabs: [
+        {
+          icon: "svg-gis",
+          text: "GIS地貌",
+        },
+        {
+          icon: "svg-jkp",
+          text: "手环监控",
+        },
+        {
+          icon: "svg-jk",
+          text: "监控视频",
+        },
+      ],
+      activeTab: 0,
+      form: {
+        wtId: "",
+        wpId: "",
+        wpName: "",
+        tjyy: "",
+        tjss: null,
+        tjfs: null,
+        bugnum: null,
+        workgroup1: null,
+        findlabornum: null,
+        reportlabornum: null,
+        description: null,
+        departuretime: null,
+        arrivaltime: null,
+        prodtdeptopinion: null,
+        workleader: null,
+        repairedtime: null,
+        repairedcomment: null,
+        unresolvedbug: null,
+        checktime: null,
+        degradebugtype: null,
+        repairdeptbugtype1: null,
+        checkdeptlabornum: null,
+        status: null,
+        gzpc: null,
+        gzjx: null,
+        prodtdepttime: null,
+        checkdeptopinion: null,
+        rwfpsc: 0.0,
+        rwfppjsc: 1066.0,
+        ddxcsc: 0.0,
+        ddxcpjsc: 0.0,
+        qxclsc: 0.0,
+        qxclpjsc: 0.0,
+        yssc: 0.0,
+        yspjsc: 0.0,
+        workHours: null,
+        rwfpsc: 0,
+        rwfppjsc: 0,
+        ddxcsc: 0,
+        ddxcpjsc: 0,
+        qxclsc: 0,
+        qxclpjsc: 0,
+        yssc: 0,
+        yspjsc: 0,
+        workHours: 0
+      },
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.form = this.data;
+    });
+  },
+  // 函数
+  methods: {
+    selectTab: function (index) {
+      this.activeTab = index;
+    },
+  },
+  watch: {
+    data(value) {
+      this.form = value;
+      this.form.tjss = value.tjss?new Date(value.tjss).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.prodtdepttime = value.prodtdepttime?new Date(value.prodtdepttime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.departuretime = value.departuretime?new Date(value.departuretime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.arrivaltime = value.arrivaltime?new Date(value.arrivaltime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.repairedtime = value.repairedtime?new Date(value.repairedtime).formatDate("yyyy-MM-dd hh:mm:ss"):""
+      this.form.checktime = value.checktime?new Date(value.checktime).formatDate("yyyy-MM-dd hh:mm:ss"):"" 
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.track-info {
+  display: flex;
+  .form-info {
+    flex: 0 0 720px;
+    .work-flow {
+      height: 132px;
+      width: 100%;
+      background: fade(@gray, 20);
+      margin-bottom: 8px;
+      padding: 26px 69px;
+      display: flex;
+      position: relative;
+
+      .work-flow-line {
+        position: absolute;
+        width: 600px;
+        height: 4px;
+        left: calc(50% - 300px);
+        top: calc(50% - 11px);
+        background: @green;
+      }
+
+      .work-flow-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        &.active {
+          .work-flow-icon-item {
+            .work-flow-icon-o {
+                border: 1px solid @green;
+                opacity: 0.4;
+              }
+
+              .work-flow-icon-i {
+                border: 2px solid @green;
+                background: linear-gradient(to bottom, #1F2B2B 0%,#1F2B2B 20%,@green 100%);
+              }
+
+              .svg-icon {
+                svg {
+                  use {
+                    fill: @green;
+                  }
+                }
+              }
+          }
+
+          .work-flow-text {
+            color: @green;
+          }
+          
+        }
+
+        .work-flow-icon-item {
+          width: 60px;
+          height: 60px;
+          position: relative;
+
+          .work-flow-icon-o {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            border: 1px solid #B3BDC0;
+            opacity: 0.4;
+          }
+
+          .work-flow-icon-m {
+            position: absolute;
+            top: 1px;
+            left: 1px;
+            width: 59px;
+            height: 59px;
+            border-radius: 50%;
+            border: 4px solid #212b2b;
+          }
+
+          .work-flow-icon-i {
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            border: 2px solid #606769;
+            background: linear-gradient(to bottom, #1F2B2B 0%,#1F2B2B 20%,#606769 100%);
+          }
+
+          .svg-icon {
+            position: absolute;
+            width: 26px;
+            height: 26px;
+            top: calc(50% - 10px);
+            left: calc(50% - 13px);
+            svg {
+               width: 26px;
+              height: 26px;
+              use {
+                fill: @gray-l;
+              }
+            }
+          }
+          
+        }
+
+        .work-flow-text {
+            color: @gray-l;
+            margin-top: 8px;
+            font-size: @fontsize-s;
+          }
+      }
+    }
+  }
+
+  .evaluate {
+    flex: 0 0 240px;
+    margin-left: 30px;
+
+    .evaluate-item {
+      display: flex;
+      align-items: center;
+      margin-top: 8px;
+
+      .evaluate-label {
+        width: 120px;
+        text-align: right;
+      }
+
+      .evaluate-label,
+      .evaluate-unit {
+        font-size: @fontsize;
+        color: @gray-l;
+      }
+
+      .input-number {
+        display: inline-block;
+        width: 62px;
+        margin: 0 16px;
+      }
+    }
+
+    
+  }
+
+  .tabs {
+    flex: 0 0 200px;
+    height: 619px;
+    margin-left: 20px;
+    border-left: 1px solid #53626833;
+
+    .tab-box {
+    margin: 1.852vh 2.778vh;
+    display: inline-block;
+    z-index: 2;
+    position: relative;
+    margin: 26px 0 0 20px;
+
+    .tab-item {
+      display: flex;
+      align-items: center;
+      // justify-content: center;
+      font-size: @fontsize-l;
+      cursor: pointer;
+      // width: 120px;
+      padding: 8px;
+      margin-bottom: 16px;
+
+      &.active {
+        color: @green;
+        position: relative;
+        background-image: @greenLinearTop;
+
+        &::after {
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 5px;
+          border: 1px solid @green;
+          border-top: 0;
+          left: 0;
+          bottom: 0;
+          box-sizing: border-box;
+        }
+      }
+
+      .svg-icon {
+        margin-right: 16px;
+      }
+    }
+  }
+  }
+}
+</style>

src/views/HealthControl/ranking-pop.vue

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

src/views/HealthControl/track.vue

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

src/views/Home/Home.vue

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

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

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

src/views/Home/components/map.vue

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

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

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

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

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

src/views/Home/components/weather.vue

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

src/views/Knowledge/Knowledge3.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="knowledge-2">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">查询内容：</div>
+          <div class="search-input">
+            <el-input v-model="content" placeholder="请输入查询内容"></el-input>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions" style="margin-right: 1500px">
+        <button class="btn green" @click="onClickSearch">搜索</button>
+      </div>
+    </div>
+    <div>
+      <ComTable :data="tableData"></ComTable>
+    </div>
+  </div>
+</template>
+
+<script>
+import ComTable from "@com/coms/table/table.vue";
+
+export default {
+  components: { ComTable },
+  data() {
+    return {
+      content: "",
+      tableData: {
+        column: [
+          {
+            name: "序号",
+            field: "id",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "按错内容",
+            field: "safecontent",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "故障按错内容描述",
+            field: "describe",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "负责人",
+            field: "principal",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "添加时间",
+            field: "addtime",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "类型",
+            field: "type",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "其他",
+            field: "other",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        data: [],
+      },
+    };
+  },
+  created() {
+    this.requestSafeList();
+  },
+  methods: {
+    // 搜索按钮
+    onClickSearch() {
+      this.requestSafeList();
+    },
+    // 获取按错内容
+    requestSafeList() {
+      let that = this;
+      this.API.requestData({
+        method: "GET",
+        baseURL: "http://10.155.32.4:8034/",
+        subUrl: "/experienceBase/aqcszs",
+        data: {
+          name: that.content,
+          pageNum: 1,
+          pageSize: 1000,
+        }, // 请求所携带参数，默认为空，可缺省
+        success(res) {
+          if (res.code == 200) {
+            that.tableData.data = [];
+            let data = res.data;
+            for (var i = 0; i < data.length; i++) {
+              let obj = {
+                id: i + 1,
+                safecontent: data[i].safecontent,
+                describe: data[i].describe,
+                principal: data[i].principal,
+                addtime: new Date(data[i].addtime).formatDate("yyyy-MM-dd"),
+                type: data[i].type,
+                other: data[i].other,
+              };
+              that.tableData.data.push(obj);
+            }
+          }
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scope>
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.knowledge-2 {
+  .el-select {
+    width: 200px;
+  }
+  .el-input {
+    width: 200px;
+  }
+}
+</style>

src/views/Knowledge/Knowledge4.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="knowledge-2">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">查询内容：</div>
+          <div class="search-input">
+            <el-input v-model="content" placeholder="请输入查询内容"></el-input>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions" style="margin-right: 1500px">
+        <button class="btn green" @click="onClickSearch">搜索</button>
+      </div>
+    </div>
+    <div>
+      <ComTable :data="tableData"></ComTable>
+    </div>
+  </div>
+</template>
+
+<script>
+import ComTable from "@com/coms/table/table.vue";
+
+export default {
+  components: { ComTable },
+  data() {
+    return {
+      content: "",
+      tableData: {
+        column: [
+          {
+            name: "所属类型",
+            field: "station",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "位置",
+            field: "location",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "工作内容",
+            field: "content",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "描述",
+            field: "describe",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "添加时间",
+            field: "addtime",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "状态",
+            field: "state",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        data: [],
+      },
+    };
+  },
+  created() {
+    this.requestSafeList();
+  },
+  methods: {
+    // 搜索按钮
+    onClickSearch() {
+      this.requestSafeList();
+    },
+    // 获取按错内容
+    requestSafeList() {
+      let that = this;
+      this.API.requestData({
+        method: "GET",
+        baseURL: "http://10.155.32.4:8034/",
+        subUrl: "/experienceBase/zyzdzs",
+        data: {
+          name: that.content,
+          pageNum: 1,
+          pageSize: 1000,
+        }, // 请求所携带参数，默认为空，可缺省
+        success(res) {
+          if (res.code == 200) {
+            that.tableData.data = [];
+             res.data.forEach((item) => {
+              item.addtime = new Date(item.addtime).formatDate("yyyy-MM-dd hh:mm:ss")
+              that.tableData.data.push(item);
+            });
+            that.tableData.data = res.data;
+          }
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scope>
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.knowledge-2 {
+  .el-select {
+    width: 200px;
+  }
+  .el-input {
+    width: 200px;
+  }
+}
+</style>

src/views/Knowledge/Knowledge5.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="knowledge-2">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">查询内容：</div>
+          <div class="search-input">
+            <el-input v-model="content" placeholder="请输入查询内容"></el-input>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions" style="margin-right: 1500px">
+        <button class="btn green" @click="onClickSearch">搜索</button>
+      </div>
+    </div>
+    <div>
+      <ComTable :data="tableData"></ComTable>
+    </div>
+  </div>
+</template>
+
+<script>
+import ComTable from "@com/coms/table/table.vue";
+
+export default {
+  components: { ComTable },
+  data() {
+    return {
+      content: "",
+      tableData: {
+        column: [
+          {
+            name: "设备类型",
+            field: "modelid",
+            is_num: true,
+            is_light: false,
+          },
+          {
+            name: "特征名称",
+            field: "name",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "特征描述",
+            field: "description",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "设备结构",
+            field: "structureid",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "设备结构组成",
+            field: "componentid",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "测点统一编码",
+            field: "uniformcode",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "最小值",
+            field: "minvalue",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "最大值",
+            field: "maxvalue",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "正常范围下限",
+            field: "normalmin",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "正常范围上限",
+            field: "normalmax",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "预警值",
+            field: "prealertvalue",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "报警值",
+            field: "alertvalue",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "是否启用",
+            field: "enable",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        data: [],
+      },
+    };
+  },
+  created() {
+    this.requestSafeList();
+  },
+  methods: {
+    // 搜索按钮
+    onClickSearch() {
+      this.requestSafeList();
+    },
+    // 获取按错内容
+    requestSafeList() {
+      let that = this;
+      this.API.requestData({
+        method: "GET",
+        baseURL: "http://10.155.32.4:8034/",
+        subUrl: "/experienceBase/tzcs",
+        data: {
+          name: that.content,
+          pageNum: 1,
+          pageSize: 1000,
+        }, // 请求所携带参数，默认为空，可缺省
+        success(res) {
+          if (res.code == 200) {
+            that.tableData.data = [];
+            res.data.forEach((item) => {
+              item.enable = "启用";
+              that.tableData.data.push(item);
+            });
+          }
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scope>
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.knowledge-2 {
+  .el-select {
+    width: 200px;
+  }
+  .el-input {
+    width: 200px;
+  }
+}
+</style>

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

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

src/views/layout/Menu.vue

@@ -267,6 +267,21 @@ export default {
               icon: "svg-matrix",
               path: "/knowledge2",
             },
+            {
+              text: "风险辨识知识",
+              icon: "svg-matrix",
+              path: "/knowledge3",
+            },
+            {
+              text: "作业指导知识",
+              icon: "svg-matrix",
+              path: "/knowledge4",
+            },
+            {
+              text: "特征参数",
+              icon: "svg-matrix",
+              path: "/knowledge5",
+            },
           ],
         },
         {