版本更新

src/assets/icon/svg/knowledge/knowledge-file.svg

@@ -0,0 +1,4 @@
+<svg t="1625811877282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6341" width="200" height="200">
+    <path d="M537.152 414.72h-288.64a29.44 29.44 0 0 1-26.24-30.72 29.44 29.44 0 0 1 26.24-32h288.64a29.44 29.44 0 0 1 26.24 32 29.44 29.44 0 0 1-26.24 30.72z m209.92 165.76h-498.56a32.64 32.64 0 0 1 0-64h498.56a32.64 32.64 0 0 1 0 64z m0 165.76h-498.56a32.64 32.64 0 0 1 0-64h498.56a32.64 32.64 0 0 1 0 64z" fill="#333333" p-id="6342"></path>
+    <path d="M192.832 0a128 128 0 0 0-128 128v768a128 128 0 0 0 128 128h640a128 128 0 0 0 128-128l7.04-670.72L748.992 0h-556.16z m512 64l192 192h-160.64a31.36 31.36 0 0 1-31.36-31.36V64z m128 896h-640a64 64 0 0 1-64-64V128a64 64 0 0 1 64-64h448v192a64 64 0 0 0 64 64h192v576a64 64 0 0 1-64 64z" fill="#333333" p-id="6343"></path>
+</svg>

src/assets/styles/color.less

@@ -62,6 +62,10 @@
   color: @gray-l;
 }
 
+.gray-l {
+  color: @gray-l;
+}
+
 .pink {
   color: @pink;
 }

src/assets/styles/main.less

@@ -12,4 +12,6 @@
 
 @import "./button.less";
 
-@import "./dialog.less";
+@import "./dialog.less";
+
+@import "./table.less";

src/assets/styles/table.less

@@ -0,0 +1,209 @@
+// 自定义table
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.com-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      th {
+        background-color: fade(@darkBack, 20%);
+        height: 30px;
+        line-height: 30px;
+        color: @titleGray;
+        font-weight: 400;
+        font-size: @fontsize-s;
+        position: sticky;
+        top: 0;
+        cursor: pointer;
+
+        &.light,
+        &.always-light {
+          color: @green;
+        }
+      }
+    }
+  }
+
+  tbody {
+    display: block;
+
+    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;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.light,
+        &.always-light {
+          color: @green !important;
+        }
+
+        &.num {
+          font-family: "Bicubik";
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+
+// el-table
+.main-body {
+  .el-table {
+    background: transparent;
+    border: 0px;
+
+    &.el-table--border::after,
+    &.el-table--group::after,
+    &::before {
+      background-color: transparent;
+    }
+
+    tr {
+      &:hover {
+        td {
+          color: @green;
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    td {
+      border: 0px;
+      padding: 0;
+      height: 27px;
+      line-height: 27px;
+      font-size: 12px;
+    }
+
+    th {
+      border: 0px;
+      padding: 0px;
+      height: 30px;
+      line-height: 30px;
+      font-weight: normal;
+      text-align: center;
+      color: @gray-l;
+
+      &.is-leaf {
+        border: 0px;
+      }
+    }
+
+    th,
+    tr {
+      background-color: transparent;
+      border: 0px;
+    }
+
+    thead {
+      color: @gray-l;
+      font-weight: 500;
+      font-size: @fontsize-s;
+      border: 0px;
+
+      th,
+      &.is-group th {
+        & > .cell {
+        }
+
+        background-color: fade(@gray, 20);
+      }
+    }
+
+    .el-table__body {
+      border: 0px;
+    }
+
+    &.el-table--striped .el-table__body tr.el-table__row--striped {
+      &:hover td {
+        background-color: fade(@gray, 20) !important;
+      }
+
+      td {
+        background-color: fade(@gray, 20);
+      }
+    }
+
+    &.el-table--border,
+    &.el-table--group {
+      border: none;
+    }
+
+    .ascending .sort-caret.ascending {
+      border-bottom-color: @green;
+    }
+
+    .descending .sort-caret.descending {
+      border-top-color: @green;
+    }
+  }
+
+  .el-table__expanded-cell {
+    background: transparent;
+  }
+
+  .el-table__body tr.hover-row.current-row > td,
+  .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
+  .el-table__body tr.hover-row.el-table__row--striped > td,
+  .el-table__body tr.hover-row > td {
+    background: transparent;
+    color: @green;
+  }
+}
+
+// el-pagination
+.main-body {
+  .el-pagination {
+    color: @gray;
+    .el-pagination__total {
+      color: @gray;
+    }
+
+    button {
+      &.btn-next,
+      &.btn-prev {
+        background: center center no-repeat fade(@gray, 20);
+        color: @gray-l;
+      }
+      &:disabled {
+        color: @gray-l;
+        background-color: fade(@gray, 20);
+        cursor: not-allowed;
+      }
+    }
+
+    .el-pager li {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      &.active {
+        color: @green;
+      }
+    }
+
+    .el-input__inner {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      border: 1px solid fade(@gray, 20);
+    }
+  }
+}

src/components/arcgis/arcgis.vue

@@ -1,5 +1,13 @@
 <template>
-    <div class="arcgis"></div>
+    <div class="arcgis">
+        <div id="viewDiv"></div>
+        <div id="marker">
+            <div v-for="(marker, index) of markers" :key="index" v-show="marker.show" 
+                :id="'arcgic-marker-' + marker.slot" class="arcgis-marker" :style="'left: '+marker.x+'px; top: '+marker.y+'px;'">
+                <slot :name="marker.slot"></slot>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -7,12 +15,11 @@
     import Basemap from "@arcgis/core/Basemap";
     import Graphic from "@arcgis/core/Graphic";
     import SpatialReference from "@arcgis/core/geometry/SpatialReference";
-    import PictureMarkerSymbol from "@arcgis/core/symbols/PictureMarkerSymbol";
     import MapView from "@arcgis/core/views/MapView";
     import SceneView from "@arcgis/core/views/SceneView";
     import MapImageLayer from "@arcgis/core/layers/MapImageLayer";
     import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
-    import IdentifyParameters from "@arcgis/core/tasks/support/IdentifyParameters";
+    import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol";
     import "@arcgis/core/assets/esri/themes/light/main.css";
 
     const mapUrl = "http://61.161.152.110:12345/arcgis/rest/services/NX_MAP_15/MapServer"; // ArcMap地址
@@ -24,10 +31,12 @@
     let line_graphicsLayer = null;
     let text_graphicsLayer = null;
     let img_graphicsLayer = null;
+    let html_graphicsLayer = null;
     let point_graphics = [];
     let line_graphics = [];
     let text_graphics = [];
     let img_graphics = [];
+    let html_graphics = [];
 
     export default {
         // 名称
@@ -95,7 +104,7 @@
                     },
                 ],
                 syzImg: require("@assets/temp.png"),
-                tempImg: require("@assets/temp1.png"),
+                markers: [],
             }
         },
         // 函数
@@ -131,14 +140,14 @@
                             },
                             tilt: this.data.tilt,
                         },
-                        container: this.$el,
+                        container: this.$el.querySelector("#viewDiv"),
                     });
                 } else {
                     view = new MapView({
                         // 3D显示图层
                         map: map,
                         center: this.data.center,
-                        container: this.$el,
+                        container: this.$el.querySelector("#viewDiv"),
                     });
                 }
                 view.scale = this.data.scale;
@@ -163,10 +172,14 @@
                 img_graphicsLayer = new GraphicsLayer({
                     graphics: []
                 });
+                html_graphicsLayer = new GraphicsLayer({
+                    graphics: []
+                });
                 map.add(line_graphicsLayer);
                 map.add(point_graphicsLayer);
                 map.add(text_graphicsLayer);
                 map.add(img_graphicsLayer);
+                map.add(html_graphicsLayer);
                 view.on("click", (event) => {
                     view.hitTest(event).then((response) => {
                         let result = null;
@@ -182,7 +195,38 @@
                             this.$emit('clickMap', result);
                         }
                     })
-                })
+                });
+                view.watch("extent", (evt) => {
+                    this.markers.forEach((marker, index) => {
+                        let graphics = html_graphics[index];
+                        let screenPoint = view.toScreen(graphics.geometry);
+                        marker.x = screenPoint.x - marker.ox;
+                        marker.y = screenPoint.y - marker.oy;
+                        if (evt.height < 0.045) { 
+                            if (!marker.show) {
+                                marker.show = true;
+                                graphics.symbol = new SimpleMarkerSymbol({
+                                    color: "transparent",
+                                    outline: {
+                                        color: [255, 255, 255],
+                                        width: 0
+                                    }
+                                });
+                            }
+                        } else {
+                            if (marker.show) {
+                                marker.show = false;
+                                graphics.symbol = new SimpleMarkerSymbol({
+                                    color: [5,187,76,0.75],
+                                    outline: {
+                                        color: [5,187,76],
+                                        width: 2
+                                    }
+                                });
+                            }
+                        }
+                    });
+                });
             },
             // 通过name或code获取img
             getFanImg: function(nameOrState) {
@@ -195,6 +239,42 @@
                     return "";
                 }
             },
+            // 添加html
+            addHtmlPoint: function (point, slot, ox=0, oy=0) {
+                let item = {
+                    geometry: {
+                        type: "point",
+                        spatialReference: SpatialReference.WGS84,
+                        x: point[0],
+                        y: point[1],
+                    },
+                    symbol: {
+                        type: "simple-marker",
+                        color: "transparent",
+                        outline: {
+                            color: [255, 255, 255],
+                            width: 0
+                        }
+                    },
+                    // symbol: null,
+                    attributes: {},
+                    popupTemplate: null
+                };
+                let graphic = new Graphic(item);
+                html_graphics.push(graphic);
+                html_graphicsLayer.add(graphic);
+                let screenPoint = view.toScreen(graphic.geometry);
+                let marker = {
+                    slot: slot,
+                    ox: ox,
+                    oy: oy,
+                    x: screenPoint.x - ox,
+                    y: screenPoint.y - oy,
+                    show: true,
+                };
+                this.markers.push(marker);
+                return marker;
+            },
             // 添加图片点
             addImagePoint: function (point, src, width, height) {
                 let item = {
@@ -215,12 +295,24 @@
                     attributes: {},
                     popupTemplate: null
                 };
+                console.log(item)
                 let graphic = new Graphic(item);
                 img_graphics.push(graphic);
                 img_graphicsLayer.add(graphic);
             },
             // 移除
-            remove: function (type, obj) {},
+            remove: function (type, obj) {
+                if (type == "html") {
+                    let markerIndex = this.markers.findIndex(t => t.slot == obj.slot);
+                    // let marker = this.markers[markerIndex];
+                    this.markers.splice(markerIndex, 1);
+                    let graphic = html_graphics[markerIndex];
+                    html_graphics.splice(markerIndex, 1);
+                    html_graphicsLayer.remove(graphic);
+                } else {
+                    console.info("arcgis: No type:", type)
+                }
+            },
             // 添加图片点
             addImgPoint: function(jsonItem) {
                 let item = JSON.parse(JSON.stringify(jsonItem));
@@ -228,7 +320,7 @@
                 item.geometry.spatialReference = SpatialReference.WGS84;
                 item.symbol = {
                     type: "picture-marker",
-                    url: item.attributes.type == "升压站" ? this.syzImg : this.getFanImg("dj"),
+                    url: item.attributes.type == "升压站" ? this.syzImg : this.getFanImg(item.attributes.state),
                     width: item.attributes.type == "升压站" ? "96px" : "48px",
                     height: item.attributes.type == "升压站" ? "96px" : "48px",
                     xoffset: 0,
@@ -321,5 +413,30 @@
     .arcgis {
         width: 100%;
         height: 100%;
+        position: relative;
+        overflow: hidden;
+
+        #viewDiv {
+            position: absolute;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+        }
+
+        #marker {
+            position: absolute;
+            z-index: 2;
+            width: 0;
+            height: 0;
+            top: 0;
+            left: 0;
+        }
+
+        .arcgis-marker {
+            position: absolute;
+            z-index: 2;
+        }
     }
 </style>

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

@@ -174,7 +174,7 @@ export default {
           name: this.bardata.legend[i],
           type: "bar",
           stack: "总量",
-          barWidth: "16px",
+          barWidth: "10%",
           label: {
             show: false,
             position: "insideRight",

src/components/chart/line/arrow-dash-line-chart.vue

@@ -0,0 +1,262 @@
+<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: "multi-arrow-line-chart",
+  componentName: "multi-arrow-line-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: "功率",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "0m/s",
+              value: 1,
+            },
+            {
+              text: "2m/s",
+              value: 2,
+            },
+            {
+              text: "3m/s",
+              value: 16,
+            },
+            {
+              text: "4m/s",
+              value: 3,
+            },
+            {
+              text: "5m/s",
+              value: 3,
+            },
+            {
+              text: "6m/s",
+              value: 31,
+            },
+            {
+              text: "7m/s",
+              value: 33,
+            },
+            {
+              text: "8m/s",
+              value: 43,
+            },
+            {
+              text: "9m/s",
+              value: 3,
+            },
+            {
+              text: "10m/s",
+              value: 3,
+            },
+            {
+              text: "11m/s",
+              value: 31,
+            },
+            {
+              text: "12m/s",
+              value: 3,
+            },
+            {
+              text: "13m/s",
+              value: 3,
+            },
+          ],
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["()"],
+    },
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#606769"],
+    };
+  },
+  computed: {
+    legend() {
+      return this.list.map((t) => {
+        return t.title;
+      });
+    },
+    xdata() {
+      return this.list[0].value.map((t) => {
+        return t.text;
+      });
+    },
+    yAxis() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        result.push({
+          type: "value",
+          name: value,
+          axisLabel: {
+            formatter: "{value}",
+            fontSize: util.vh(14),
+          },
+          //分格线
+          splitLine: {
+            lineStyle: {
+              color: partten.getColor("gray") + 55,
+              type: "dashed",
+            },
+          },
+        });
+      });
+
+      return result;
+    },
+    series() {
+      let result = [];
+
+      this.list.forEach((value, index) => {
+        var data = value.value.map((t) => {
+          return t.value;
+        });
+
+        var arrowArr = [];
+        data.forEach((dvalue, dindex) => {
+          var item = dvalue;
+          if (dindex < data.length / 2) {
+            arrowArr.push({
+              symbol: "arrow",
+              symbolSize: 12,
+              symbolRotate: -90,
+              value: item,
+            });
+          } else {
+            arrowArr.push({ symbol: "none", value: item });
+          }
+        });
+        result.push({
+          name: value.title,
+          type: "line",
+          smooth: true,
+          zlevel: index,
+          lineStyle: {
+            type: "dotted", //dashed
+          },
+          yAxisIndex: value.yAxisIndex,
+          data: arrowArr,
+        });
+      });
+
+      return result;
+    },
+  },
+  methods: {
+    initChart() {
+      const chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: 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(32),
+          left: util.vh(40),
+          right: util.vh(40),
+          bottom: util.vh(24),
+        },
+        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,
+      };
+
+      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(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  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/double-line-chart.vue

@@ -25,6 +25,7 @@ export default {
       default: () => [
         {
           title: "绿线",
+          smooth: true,
           value: [
             {
               text: "",
@@ -66,6 +67,7 @@ export default {
         },
         {
           title: "黄线",
+          smooth: true,
           value: [
             {
               text: "",
@@ -145,12 +147,12 @@ export default {
     },
     series() {
       let result = [];
-
       this.list.forEach((value, index) => {
+        
         result.push({
           name: value.title,
           type: "line",
-          smooth: true,
+          smooth: value.smooth,
           showSymbol: false,
           zlevel: index,
           lineStyle: {
@@ -227,7 +229,7 @@ export default {
             axisLabel: {
               formatter: "{value}",
               textStyle: {
-                color: partten.getColor('gray'),
+                color: partten.getColor("gray"),
                 fontSize: util.vh(14),
               },
             },

src/components/chart/line/multi-arrow-line-chart.vue

@@ -0,0 +1,269 @@
+<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: "multi-arrow-line-chart",
+  componentName: "multi-arrow-line-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: "功率",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "0m/s",
+              value: 1,
+            },
+            {
+              text: "2m/s",
+              value: 2,
+            },
+            {
+              text: "3m/s",
+              value: 16,
+            },
+            {
+              text: "4m/s",
+              value: 3,
+            },
+            {
+              text: "5m/s",
+              value: 3,
+            },
+            {
+              text: "6m/s",
+              value: 31,
+            },
+            {
+              text: "7m/s",
+              value: 33,
+            },
+            {
+              text: "8m/s",
+              value: 43,
+            },
+            {
+              text: "9m/s",
+              value: 3,
+            },
+            {
+              text: "10m/s",
+              value: 3,
+            },
+            {
+              text: "11m/s",
+              value: 31,
+            },
+            {
+              text: "12m/s",
+              value: 3,
+            },
+            {
+              text: "13m/s",
+              value: 3,
+            },
+          ],
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["()"],
+    },
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    isSingle: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
+    };
+  },
+  computed: {
+    legend() {
+      return this.list.map((t) => {
+        return t.title;
+      });
+    },
+    xdata() {
+      return this.list[0].value.map((t) => {
+        return t.text;
+      });
+    },
+    yAxis() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        result.push({
+          type: "value",
+          name: value,
+          axisLabel: {
+            formatter: "{value}",
+            fontSize: util.vh(14),
+          },
+          //分格线
+          splitLine: {
+            lineStyle: {
+              color: partten.getColor("gray") + 55,
+              type: "dashed",
+            },
+          },
+        });
+      });
+
+      return result;
+    },
+    series() {
+      let result = [];
+      let isSingle = this.isSingle;
+      this.list.forEach((value, index) => {
+        var data = value.value.map((t) => {
+          return t.value;
+        });
+
+        var arrowArr = [];
+        data.forEach((dvalue, dindex) => {
+          var item = dvalue;
+          if (dindex < data.length / 2) {
+            arrowArr.push({
+              symbol: "arrow",
+              symbolSize: 12,
+              symbolRotate: -90,
+              value: item,
+            });
+          } else {
+            arrowArr.push({ symbol: "none", value: item });
+          }
+        });
+        result.push({
+          name: value.title,
+          type: "line",
+          smooth: true,
+          zlevel: index,
+          lineStyle: {
+            normal: {
+              color: this.color[index],
+              width: 1,
+            },
+          },
+          yAxisIndex: value.yAxisIndex,
+          data: arrowArr,
+        });
+      });
+
+      return result;
+    },
+  },
+  methods: {
+    initChart() {
+      const chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: 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(32),
+          left: util.vh(40),
+          right: util.vh(40),
+          bottom: util.vh(24),
+        },
+        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,
+      };
+
+      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(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  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/coms/table/check-table.vue

@@ -209,67 +209,4 @@ export default {
 };
 </script>
 
-<style lang="less">
-@titleGray: #9ca5a8;
-@rowGray: #606769;
-@darkBack: #536268;
-.com-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  thead {
-    tr {
-      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;
-        cursor: pointer;
-
-        &.light,
-        &.always-light {
-          color: @green;
-        }
-      }
-    }
-  }
-
-  tbody {
-    display: block;
-
-    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;
-
-        &.light,
-        &.always-light {
-          color: @green !important;
-        }
-
-        &.num {
-          font-family: "Bicubik";
-          font-weight: 400;
-        }
-      }
-    }
-  }
-}
-</style>
+<style lang="less"></style>

src/components/coms/table/table.vue

@@ -70,6 +70,11 @@ export default {
       type: Boolean,
       default: true,
     },
+    // 列高亮
+    showColHover: {
+      type: Boolean,
+      default: false,
+    },
     canScroll: {
       type: Boolean,
       default: true,
@@ -172,7 +177,7 @@ export default {
     hover(row, col) {
       if (this.showHover) {
         this.hoverRow = row;
-        this.hoverCol = col;
+        if (this.showColHover) this.hoverCol = col;
       }
     },
     leave() {
@@ -208,104 +213,4 @@ export default {
 </script>
 
 <style lang="less">
-@titleGray: #9ca5a8;
-@rowGray: #606769;
-@darkBack: #536268;
-.com-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  thead {
-    tr {
-      display: table;
-      table-layout: fixed;
-      width: 100%;
-
-      th {
-        background-color: fade(@darkBack, 20%);
-        height: 30px;
-        line-height: 30px;
-        color: @titleGray;
-        font-weight: 400;
-        font-size: @fontsize-s;
-        position: sticky;
-        top: 0;
-        cursor: pointer;
-
-        &.light,
-        &.always-light {
-          color: @green;
-        }
-      }
-    }
-  }
-
-  tbody {
-    display: block;
-
-    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,
-        &.always-light {
-          color: @green !important;
-        }
-
-        &.num {
-          font-family: "Bicubik";
-          font-weight: 400;
-        }
-      }
-    }
-  }
-
-  .el-pagination {
-    color: @gray;
-    .el-pagination__total {
-      color: @gray;
-    }
-
-    button {
-      &.btn-next,
-      &.btn-prev {
-        background: center center no-repeat fade(@gray, 20);
-        color: @gray-l;
-      }
-      &:disabled {
-        color: @gray-l;
-        background-color: fade(@gray, 20);
-        cursor: not-allowed;
-      }
-    }
-
-    .el-pager li {
-      color: @gray-l;
-      background: fade(@gray, 20);
-      &.active {
-        color: @green;
-      }
-    }
-
-    .el-input__inner {
-      color: @gray-l;
-      background: fade(@gray, 20);
-      border: 1px solid fade(@gray, 20);
-    }
-  }
-}
 </style>

src/components/coms/table/table2.vue

@@ -0,0 +1,238 @@
+<template>
+  <el-table stripe :data="data.data" :height="height" style="width: 100%" @cell-click="onClick">
+    <el-table-column
+      v-for="col in data.column"
+      :key="col"
+      :prop="col.field"
+      :label="col.name"
+      :width="col.width"
+      :sortable="col.sortable"
+      :show-overflow-tooltip="!col.slot"
+      :fixed="col.fixed"
+      :align="col.align ? col.align : 'center'"
+      :resizable="col.resizable"
+    >
+      <template v-if="col.slot == true" #default="item">
+        <slot :name="col.field" :column="col" :row="item.row" :all="item"></slot>
+      </template>
+    </el-table-column>
+  </el-table>
+  <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total"> </el-pagination>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
+             * {
+                    column: [{
+                        name: "风机名称",
+                        field: "name",
+                        width:'', // 宽度
+                        click:function(){} // 点击事件
+                        sortable:fasle,
+                        slot:false,
+                        fixed:false,
+                        align:'center',
+                        resizable :false,
+                    }],
+                    total:200
+                }
+             */
+    data: Object,
+    height: {
+      type: String,
+      default: "",
+    },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+  },
+  // 自定义事件
+  emits: {
+    // 分页事件
+    onPagging: null,
+  },
+  // 数据
+  data() {
+    return {
+      currentPage: 1,
+    };
+  },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = this.data.data;
+
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
+
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+        return data;
+      }
+    },
+    pageable() {
+      return this.pageSize != 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
+    },
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
+    },
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
+    },
+  },
+  // 函数
+  methods: {
+    onClick(row, column, cell, event) {
+      if (column.rawColumnKey.click) column.rawColumnKey.click(event, row);
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", {
+        pageIndex: this.currentPage,
+        pageSize: this.pageSize,
+        start: this.startRow,
+        end: this.endRow,
+      });
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {},
+  updated() {},
+};
+</script>
+
+<style lang="less">
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.com-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      th {
+        background-color: fade(@darkBack, 20%);
+        height: 30px;
+        line-height: 30px;
+        color: @titleGray;
+        font-weight: 400;
+        font-size: @fontsize-s;
+        position: sticky;
+        top: 0;
+        cursor: pointer;
+
+        &.light,
+        &.always-light {
+          color: @green;
+        }
+      }
+    }
+  }
+
+  tbody {
+    display: block;
+
+    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;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.light,
+        &.always-light {
+          color: @green !important;
+        }
+
+        &.num {
+          font-family: "Bicubik";
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  .el-pagination {
+    color: @gray;
+    .el-pagination__total {
+      color: @gray;
+    }
+
+    button {
+      &.btn-next,
+      &.btn-prev {
+        background: center center no-repeat fade(@gray, 20);
+        color: @gray-l;
+      }
+      &:disabled {
+        color: @gray-l;
+        background-color: fade(@gray, 20);
+        cursor: not-allowed;
+      }
+    }
+
+    .el-pager li {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      &.active {
+        color: @green;
+      }
+    }
+
+    .el-input__inner {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      border: 1px solid fade(@gray, 20);
+    }
+  }
+}
+</style>

src/router/index.js

@@ -331,7 +331,51 @@ const routes = [
     name: "fs",
     component: () => import(/* webpackChunkName: "fs" */ "../views/NewPages/forecast-system.vue"),
   },
-  // 三率管理/复位及时率
+  {
+    path: '/new/ztfx',
+    name: 'ztfx',
+    component: () => import( /* webpackChunkName: "ztfx" */ '../views/NewPages/ztfx.vue'),
+  },
+  {
+    path: '/new/intelligentalarmcenter',
+    name: 'intelligentalarmcenter',
+    component: () => import( /* webpackChunkName: "intelligentalarmcenter" */ '../views/NewPages/intelligent-alarm-center.vue'),
+  },
+  {
+    path: '/new/personnel',
+    name: 'personnel',
+    component: () => import( /* webpackChunkName: "personnel" */ '../views/NewPages/personnel.vue'),
+  },
+  {
+    path: '/new/znzhfx',
+    name: 'znzhfx',
+    component: () => import( /* webpackChunkName: "ztfx" */ '../views/NewPages/znzhfx.vue'),
+  },
+  {
+    path: '/new/alarmcenter',
+    name: 'alarmcenter',
+    component: () => import( /* webpackChunkName: "personnel" */ '../views/NewPages/alarm-center.vue'),
+  },
+  {
+    path: '/new/knowledgebase',
+    name: 'knowledgebase',
+    component: () => import( /* webpackChunkName: "knowledgebase" */ '../views/NewPages/knowledge-base.vue'),
+  },
+  {
+    path: "/new/dj",
+    name: "dj",
+    component: () => import(/* webpackChunkName: "dj" */ "../views/NewPages/dj.vue"),
+  },
+  {
+    path: "/new/dj2",
+    name: "dj2",
+    component: () => import(/* webpackChunkName: "dj2" */ "../views/NewPages/dj2.vue"),
+  },
+  {
+    path: "/new/dialog",
+    name: "dialog",
+    component: () => import(/* webpackChunkName: "dj2" */ "../views/NewPages/dialogs.vue"),
+  },  // 三率管理/复位及时率
   {
     path:'/fwjsl',
     name:'fwjsl',

src/views/Demo.vue

@@ -56,6 +56,9 @@
 
     <h3>折线图：multiple-line-chart</h3>
     <multiple-line-chart :height="'200px'" />
+    
+    <h3>折线图：multi-arrow-line-chart</h3>
+    <multi-arrow-line-chart :height="'200px'" />
 
     <h3>折线图：multiple-line-chart</h3>
     <normal-line-chart />
@@ -179,10 +182,61 @@
   </el-scrollbar>
 
   <el-scrollbar v-if="currTab == 3" style="height:85%;">
+    <h2>07-09更新</h2>
+    <h3>table-2</h3>
+    <h3>组件说明:</h3>
+    <p>与原组件使用方式基本相同 原table组件满足的情况下，不更换新组件也可以</p>
+    <p>新table支持原table所有特性,优化了props及column, 支持更多功能</p>
+    <p>现支持 文本省略及鼠标浮动显示</p>
+    <p>* 原有template 及第三方标签实现方式更改 删除了column 中的 template、type及props</p>
+    <h3>props说明:</h3>
+    <p>height : string 高度 指定列表高度 自动判断是否显示滚动条, 不进行设置则为最大宽度且没有滚动条</p>
+    <p>pageSize : number 分页个数 若不传 pagesize 不进行分页处理</p>
+    <p>@onPagging : method 分页回调</p>
+    <p>data : Object 数据源 { column: [] , data:[] , total: number }</p>
+    <h3>column说明:</h3>
+    <p>
+      { name: "风机名称", field: "name", width:'', click:function(){ } ,sortable:fasle, slot:false, fixed:false, align:"center" }
+    </p>
+    <p>name : string 列名</p>
+    <p>field : string 对应数据项 同时使用于具名插槽的name值</p>
+    <p>width : 列宽 可自定与每列宽度 如果想设置横向滚动条 需手动设置列宽 满足各列宽度和大于屏幕宽度</p>
+    <p>click : 点击事件 与原有table相同</p>
+    <p>sortable : 排序</p>
+    <p>slot: 开启插槽 为true时, 可在HTML中添加 插槽模板 添加自定义内容 为false时, 默认对应显示值, 示例参考代码中template </p>
+    <p>fixed: 固定列</p>
+    <p>align: 默认文本居中 left | center| right</p>
+    <table-2 :data="tableData2" :height="'200px'" :pageSize="10" @onPagging="tableonPagging">
+      <!-- v-slot:[field] 对应列嵌入自定义内容 包括第三方标签 -->
+      <!-- 同时需要在 colum 中设置 slot:true  -->
+      <!-- 如果只设置 slot:true 不写模板 列不存在内容 -->
+      <!-- scope 内容 scope.column 传入的 col 值, scope.row 数据值 -->
+      <template v-slot:lqf="scope"> {{ scope.column.name }}:{{ scope.row.lqf }} </template>
+      <template v-slot:action="scope">
+        <a style="cursor:pointer;color:green;margin-right:8px;" @click="tableAction(scope)"> 点击查看组件点击事件返回信息 </a>
+        <a style="cursor:pointer;color:green;margin-right:8px;"> {{ scope.column.name }}2 </a>
+        <a style="cursor:pointer;color:green;margin-right:8px;"> {{ scope.column.name }}3 </a>
+      </template>
+    </table-2>
+
     <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" />
+
+    <h3>el-table</h3>
+    <el-table :data="eltableData" max-height="200" stripe style="width: 100%" border="false">
+      <el-table-column prop="date" label="日期" width="150"> </el-table-column>
+      <el-table-column label="配送信息">
+        <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
+        <el-table-column label="地址">
+          <el-table-column prop="province" label="省份" width="120"> </el-table-column>
+          <el-table-column prop="city" label="市区" width="120"> </el-table-column>
+          <el-table-column prop="address" label="地址"> </el-table-column>
+          <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
+        </el-table-column>
+      </el-table-column>
+    </el-table>
   </el-scrollbar>
 
   <el-scrollbar v-if="currTab == 4" style="height:85%;">
@@ -209,7 +263,7 @@ import SingleBarChart from "../components/chart/bar/single-bar-chart.vue";
 import Thermometer from "../components/chart/bar/thermometer.vue";
 import AreaBarChart from "../components/chart/combination/area-bar-chart.vue";
 import BarLineChart from "../components/chart/combination/bar-line-chart.vue";
-import MultipleBarLineChart from '../components/chart/combination/multiple-bar-line-chart.vue';
+import MultipleBarLineChart from "../components/chart/combination/multiple-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";
@@ -238,7 +292,9 @@ 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 Table2 from "../components/coms/table/table2.vue";
 import Tab from "../components/coms/tabs/tab.vue";
+import multiArrowLineChart from "../components/chart/line/multi-arrow-line-chart.vue";
 
 export default {
   components: {
@@ -282,6 +338,8 @@ export default {
     NormalScatterChart,
     AreaBarChart,
     MultipleBarLineChart,
+    Table2,
+    multiArrowLineChart
   },
   methods: {
     select(data) {
@@ -334,6 +392,9 @@ export default {
     areaBarChartClick(param) {
       console.log(param);
     },
+    tableAction(param) {
+      console.log(param);
+    },
   },
   data() {
     return {
@@ -370,12 +431,17 @@ export default {
             field: "name",
             is_num: false,
             is_light: false,
+            click: function(event, data) {
+              console.log(event);
+              console.log(data);
+            },
           },
           {
             name: "理论发电量",
             field: "lqf",
             is_num: false,
             is_light: false,
+            slot: true,
           },
           {
             name: "SCADA发电量",
@@ -453,6 +519,107 @@ export default {
         ],
         total: 100,
       },
+      tableData2: {
+        column: [
+          {
+            name: "",
+            field: "index",
+            width: 50,
+            sortable: true,
+          },
+          {
+            name: "名称",
+            field: "name",
+            width: 200,
+            click: function(event, data) {
+              console.log(event);
+              console.log(data);
+            },
+            align: "left",
+            resizable: true,
+          },
+          {
+            name: "理论发电量",
+            width: 200,
+            field: "lqf",
+            slot: true,
+          },
+          {
+            width: 200,
+            name: "SCADA发电量",
+            field: "yggl",
+          },
+          {
+            name: "风速",
+            width: 80,
+            field: "yyy",
+            sortable: true,
+            align: "right",
+          },
+          {
+            name: "非计划检修",
+            field: "pcspp",
+            width: 200,
+          },
+          {
+            name: "计划检修",
+            width: 200,
+            field: "u1",
+          },
+          {
+            name: "受累",
+            width: 200,
+            field: "u2",
+          },
+          {
+            name: "限电",
+            field: "v1",
+            width: 200,
+          },
+          {
+            name: "性能",
+            width: 200,
+            field: "v2",
+          },
+          {
+            name: "风能率用率%",
+            width: 200,
+            field: "w1",
+          },
+          {
+            name: "操作",
+            field: "action",
+            width: 400,
+            slot: true,
+          },
+        ],
+        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: ["新荣区", "平城区", "云冈区", "云州区", "阳高县", "天镇县", "广灵县", "浑源县", "左云县"],
@@ -804,12 +971,210 @@ export default {
           ],
         },
       ],
+      eltableData: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+      ],
     };
   },
   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;
+
+      this.tableData2.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+      this.tableData2.data[i].index = i + 1;
+      this.tableData2.data[i].yyy = i * 0.01 * Math.random();
     }
   },
 };

src/views/HealthControl/Health1.vue

@@ -297,6 +297,7 @@ export default {
     .item {
       flex: 0 0 128px;
       text-align: center;
+      height: 33px;
       line-height: 33px;
       margin-right: 8px;
       color: @font-color;
@@ -328,6 +329,7 @@ export default {
         position: relative;
         flex: 0 0 auto;
         text-align: center;
+        height: 33px;
         line-height: 33px;
         margin-right: 8px;
         color: @gray-l;

src/views/HealthControl/Health2.vue

@@ -245,6 +245,7 @@ export default {
         position: relative;
         flex: 0 0 auto;
         text-align: center;
+        height: 33px;
         line-height: 33px;
         margin-right: 8px;
         color: @gray-l;

src/views/HealthControl/Health3.vue

@@ -279,6 +279,7 @@ export default {
         position: relative;
         flex: 0 0 auto;
         text-align: center;
+        height: 33px;
         line-height: 33px;
         margin-right: 8px;
         color: @gray-l;

src/views/HealthControl/Health6.vue

@@ -312,6 +312,7 @@ export default {
       .item {
         flex: 0 0 80px;
         text-align: center;
+        height: 33px;
         line-height: 33px;
         margin-right: 8px;
         color: @font-color;

src/views/HealthControl/Health7.vue

@@ -190,6 +190,7 @@ export default {
         position: relative;
         flex: 0 0 auto;
         text-align: center;
+        height: 33px;
         line-height: 33px;
         margin-right: 8px;
         color: @gray-l;

src/views/LightMatrix1/LightMatrix1.vue

@@ -581,13 +581,13 @@ export default {
       justify-content: flex-start;
 
       .blank {
-        margin-right: 0.2778vh;
+        margin-right: 2px;
         flex: 1 0 40px;
       }
 
       .card {
-        margin-right: 0.2778vh;
-        margin-top: 0.1852vh;
+        margin-right: 2px;
+        margin-top: 2px;
         flex: 1 0 40px;
       }
 

src/views/NewPages/alarm-center.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="alarm-center">
+    <div class="action-bar">
+      <div class="selections mg-b-16">
+        <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">发电机</div>
+        <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">齿轮箱</div>
+        <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">变桨系统</div>
+        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">液压站</div>
+        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 4 }">风机震动</div>
+        <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 5 }">其他参数</div>
+      </div>
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">风场：</div>
+            <div class="search-input">
+              <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              </el-select>
+            </div>
+          </div>
+        </div>
+        <div class="query-actions">
+          <button class="btn green">搜索</button>
+        </div>
+      </div>
+    </div>
+    <el-scrollbar>
+      <div class="fj">
+        <div class="fj-item" v-for="index in 25" :key="index">
+          <div class="fj-title">风机编号:000</div>
+          <div class="fj-info">
+            <Table :data="tableData"></Table>
+          </div>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import Table from "../../components/coms/table/table.vue";
+export default {
+  components: { Table },
+  data() {
+    return {
+      tableData: {
+        column: [
+          {
+            name: "",
+            field: "name",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "",
+            field: "desc",
+            is_num: false,
+            is_light: false,
+          },
+        ],
+        data: [
+          {
+            name: "发电机绕组U1温度",
+            desc: "1234.56",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    tabSelect(tab) {},
+  },
+  created() {
+    for (let i = 1; i < 7; i++) {
+      this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
+    }
+  },
+};
+</script>
+
+<style lang="less">
+.alarm-center {
+  .action-bar {
+    display: flex;
+
+    .selections {
+      flex: 1 0 auto;
+      display: flex;
+
+      .item {
+        flex: 0 0 164px;
+        text-align: center;
+        height: 33px;
+        line-height: 33px;
+        margin-right: 8px;
+        color: @font-color;
+        font-size: @fontsize-s;
+        background: fade(@gray, 20);
+        border: 1px solid fade(@gray, 20);
+
+        &:hover,
+        &.active {
+          background: fade(@green, 20);
+          border: 1px solid @green;
+          color: @green;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .query {
+      flex: 1 0 0;
+      justify-content: left;
+    }
+  }
+
+  .fj {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    height: calc(100vh - 126px);
+
+    .fj-item {
+      flex: 0 0 calc(100% / 5 - 8px);
+      outline: 1px solid fade(@gray, 50);
+      margin-top: 8px;
+
+      .fj-title {
+        text-align: center;
+        height: 30px;
+        line-height: 30px;
+        background: fade(@gray, 30);
+        font-size: 12px;
+        color: @gray-l;
+      }
+
+      thead {
+        display: none;
+      }
+
+      & + .fj-item {
+        margin-left: 8px;
+      }
+
+      &:nth-child(5n + 1) {
+        margin-left: 0px;
+      }
+    }
+  }
+}
+</style>

src/views/NewPages/dialogs.vue

@@ -0,0 +1,315 @@
+<template>
+  <div class="dialog">
+    <div>
+      <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="showDet">消缺跟踪</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>
+      <el-dialog title="风功率曲线" v-model="dialog3Visible" width="1400px" top="10vh" custom-class="modal" :close-on-click-modal="false">
+        <ranking-pop />
+      </el-dialog>
+      <el-dialog title="故障诊断" v-model="dialog4Visible" width="1400px" top="10vh" custom-class="modal hide-header" :close-on-click-modal="false">
+        <fault-diagnosis />
+      </el-dialog>
+
+      <defect-elimination-tracking ref="det" :show="showDefectEliminationTracking"></defect-elimination-tracking>
+    </div>
+  </div>
+</template>
+
+<script>
+import Dayinfo from "../HealthControl/dayinfo.vue";
+import DefectEliminationTracking from "../HealthControl/defect-elimination-tracking.vue";
+import FaultDiagnosis from "../HealthControl/fault-diagnosis.vue";
+import RankingPop from "../HealthControl/ranking-pop.vue";
+import Track from "../HealthControl/track.vue";
+export default {
+  setup() {},
+  components: {
+    Dayinfo,
+    RankingPop,
+    FaultDiagnosis,
+    Track,
+    DefectEliminationTracking,
+  },
+  data() {
+    return {
+      tabIndex: 0,
+      dialogVisible: false,
+      dialog2Visible: false,
+      dialog3Visible: false,
+      dialog4Visible: false,
+      showDefectEliminationTracking: false,
+    };
+  },
+  methods: {
+    showDet() {
+      this.$refs.det.show();
+    },
+    tabSelect(state) {
+      this.tabIndex = state;
+    },
+    showMessage() {
+      this.$alert("这是一段内容", "标题名称", {
+        confirmButtonText: "确定",
+        callback: (action) => {
+          this.$message({
+            type: "info",
+            message: `action: ${action}`,
+          });
+
+          // this.$message({
+          //   type: "warning",
+          //   message: `action: ${action}`,
+          // });
+
+          // this.$message({
+          //   type: "success",
+          //   message: `action: ${action}`,
+          // });
+
+          // this.$message({
+          //   type: "error",
+          //   message: `action: ${action}`,
+          // });
+        },
+      });
+    },
+    showComfirm() {
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        center: true,
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.health-1 {
+  .selections {
+    display: flex;
+
+    .item {
+      flex: 0 0 128px;
+      text-align: center;
+      height: 33px;
+      line-height: 33px;
+      margin-right: 8px;
+      color: @font-color;
+      font-size: @fontsize-s;
+      background: fade(@gray, 20);
+      border: 1px solid fade(@gray, 20);
+
+      &:hover,
+      &.active {
+        background: fade(@green, 20);
+        border: 1px solid @green;
+        color: @green;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .power-info {
+    display: flex;
+
+    .info-tab {
+      flex: 0 0 156px;
+      display: flex;
+      flex-direction: column;
+      height: 350px;
+      margin-right: 1.4815vh;
+
+      .tab {
+        position: relative;
+        flex: 0 0 auto;
+        text-align: center;
+        height: 33px;
+        line-height: 33px;
+        margin-right: 8px;
+        color: @gray-l;
+        font-size: 12px;
+        background: fade(@gray, 20);
+        border: 1px solid fade(@gray, 20);
+
+        display: flex;
+        align-items: center;
+
+        i {
+          margin: 0 1.4815vh;
+
+          svg use {
+            fill: @gray-l;
+          }
+        }
+
+        &:hover,
+        &.active {
+          background: fade(@green, 20);
+          border: 1px solid @green;
+          color: @green;
+          cursor: pointer;
+
+          i svg use {
+            fill: @green;
+          }
+        }
+
+        &.active::after {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -19px;
+          padding: 0;
+          border-bottom: 9px solid @green;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 10;
+          transform: rotate(90deg);
+        }
+
+        &.active::before {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -17px;
+          padding: 0;
+          border-bottom: 9px solid #063319;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 12;
+          transform: rotate(90deg);
+        }
+
+        & + .tab {
+          margin-top: 0.7407vh;
+        }
+
+        &:last-child {
+          text-align: center;
+          justify-content: center;
+        }
+      }
+
+      .empty {
+        flex: 1 0 auto;
+      }
+    }
+
+    .info-chart {
+      flex: 1 0 auto;
+    }
+  }
+
+  .health-report {
+    // 健康报告 按钮样式
+    .actions {
+      display: flex;
+
+      .item {
+        flex: 0 0 102px;
+        text-align: center;
+        line-height: 33px;
+        margin-right: 8px;
+        color: fade(@white, 75);
+        font-size: @fontsize-s;
+
+        &.green {
+          background: @green;
+        }
+
+        &.purple {
+          background: @purple;
+        }
+
+        &.gray {
+          background: @gray;
+        }
+      }
+    }
+
+    .report-items {
+      display: flex;
+      flex-wrap: wrap;
+      height: calc(100vh - 592px);
+
+      .item {
+        flex: 0 0 calc(100% / 6 - 16px);
+        margin-bottom: 16px;
+
+        & + .item {
+          margin-left: 16px;
+        }
+
+        &:nth-child(6n + 1) {
+          margin-left: 0px;
+        }
+
+        .title {
+          background: fade(@gray, 40);
+          // color: fade(@white, 75);
+          color: @gray-l;
+          line-height: 37px;
+          padding-left: 16px;
+          font-size: @fontsize-s;
+        }
+
+        .info {
+          background: fade(@gray, 20);
+          padding: 16px;
+          font-size: @fontsize-s;
+          color: @font-color;
+          line-height: 1.5;
+
+          p {
+            margin: 0;
+            line-height: 2;
+          }
+
+          .actions {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .success {
+              border-color: #05bb4c;
+              color: #05bb4c;
+              background: rgba(5, 187, 76, 0.2);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/NewPages/dj.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="dj">
+    <el-row>
+      <el-col :span="12">
+        <el-row>
+          <el-col :span="24">
+            <div class="query mg-b-8">
+              <div class="query-items">
+                <div class="query-item selections">
+                  <button class="btn" type="button">风场功率风速排布图</button>
+                  <button class="btn" type="button">
+                    项目功率风速排布图
+                  </button>
+                  <button class="btn" type="button">
+                    线路功率风速排布图
+                  </button>
+                </div>
+                <div class="query-item">
+                  <div class="lable">风场：</div>
+                  <div class="search-input">
+                    <el-select
+                      v-model="value1"
+                      clearable
+                      placeholder="请选择风场"
+                      popper-class="select"
+                    >
+                      <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="query-item">
+                  <div class="lable">日期：</div>
+                  <div class="search-input">
+                    <el-date-picker
+                      v-model="value4"
+                      type="date"
+                      placeholder="选择日期"
+                      popper-class="date-select"
+                    >
+                    </el-date-picker>
+                  </div>
+                </div>
+                <div class="query-item selections">
+                  <button class="btn active" type="button">搜索</button>
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <div class="mg-b-16 arrow-chart">
+      <panel :title="'场站风向24小时走向情况'" :showLine="true">
+        <multi-arrow-line-chart :height="'41.296vh'" />
+      </panel>
+    </div>
+  </div>
+</template>
+
+<script>
+import Panel from "../../components/coms/panel/panel.vue";
+import multiArrowLineChart from "../../components/chart/line/multi-arrow-line-chart.vue";
+
+export default {
+  setup() {},
+  components: {
+    Panel,
+    multiArrowLineChart,
+  },
+  data() {
+    return {
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+    };
+  },
+  created() {},
+};
+</script>
+
+<style lang="less">
+.dj {
+  font-size: 12px;
+  .arrow-chart {
+    margin-top: 20px;
+  }
+}
+</style>

src/views/NewPages/dj2.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="dj">
+    <el-row>
+      <el-col :span="12">
+        <el-row>
+          <el-col :span="24">
+            <div class="query mg-b-8">
+              <div class="query-items">
+                <div class="query-item selections">
+                  <button class="btn" type="button">风向走势图</button>
+                  <button class="btn" type="button">
+                    风资源玫瑰图
+                  </button>
+                </div>
+                <div class="query-item">
+                  <div class="lable">风场：</div>
+                  <div class="search-input">
+                    <el-select
+                      v-model="value1"
+                      clearable
+                      placeholder="请选择风场"
+                      popper-class="select"
+                    >
+                      <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="query-item">
+                  <div class="lable">日期：</div>
+                  <div class="search-input">
+                    <el-date-picker
+                      v-model="value4"
+                      type="date"
+                      placeholder="选择日期"
+                      popper-class="date-select"
+                    >
+                    </el-date-picker>
+                  </div>
+                </div>
+                <div class="query-item selections">
+                  <button class="btn active" type="button">搜索</button>
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+    <div class="mg-b-16 arrow-chart">
+      <panel :title="'场站风向24小时走向情况'" :showLine="true" >
+        <arrow-dash-line-chart :height="'41.296vh'" />
+      </panel>
+    </div>
+  </div>
+</template>
+
+<script>
+import Panel from "../../components/coms/panel/panel.vue";
+import arrowDashLineChart from "../../components/chart/line/arrow-dash-line-chart.vue";
+
+export default {
+  setup() {},
+  components: {
+    Panel,
+    arrowDashLineChart,
+  },
+  data() {
+    return {
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+    };
+  },
+  created() {},
+};
+</script>
+
+<style lang="less">
+.dj {
+  font-size: 12px;
+  .arrow-chart {
+    margin-top: 20px;
+  }
+}
+</style>

src/views/NewPages/intelligent-alarm-center.vue

@@ -0,0 +1,242 @@
+<template>
+    <div class="intelligent-alarm-center">
+        <div class="intelligent-alarm-center-btn">
+            <div @click="clickBtn(index)" class="i-btn" v-for="(btn, index) of btns" :key="index" :class="{ active: index == btnIndex }">{{ btn }}</div>
+        </div>
+        <div class="intelligent-alarm-center-box">
+            <div
+                class="intelligent-alarm-center-item"
+                v-for="(panel, index) of panels"
+                :key="index"
+                :class="{ active: index == panelIndex }"
+                @click="clickItem(index)"
+            >
+                <div class="intelligent-alarm-center-icon">
+                    <span class="i-svg-icon">
+                        <SvgIcon :svgid="panel.icon"></SvgIcon>
+                    </span>
+                </div>
+                <div class="intelligent-alarm-center-num">{{ panel.num }}</div>
+                <div class="intelligent-alarm-center-name">{{ panel.name }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
+export default {
+    // 名称
+    name: "intelligent-alarm-center",
+    // 使用组件
+    components: {
+        SvgIcon,
+    },
+    // 数据
+    data() {
+        return {
+            btns: ["光字牌", "实时报警", "历史报警"],
+            btnIndex: 0,
+            panels: [
+                {
+                    icon: "svg-jkp",
+                    num: "5,916",
+                    name: "智能经营管控系统",
+                },
+                {
+                    icon: "svg-iac-yx",
+                    num: "5,916",
+                    name: "智能营销管控系统",
+                },
+                {
+                    icon: "svg-iac-jc",
+                    num: "5,916",
+                    name: "智能工程管控系统",
+                },
+                {
+                    icon: "svg-iac-dj",
+                    num: "5,916",
+                    name: "智能党建系统",
+                },
+                {
+                    icon: "svg-iac-p",
+                    num: "5,916",
+                    name: "两票系统",
+                },
+                {
+                    icon: "svg-iac-jj",
+                    num: "5,916",
+                    name: "智能经济运行系统",
+                },
+                {
+                    icon: "svg-iac-oa",
+                    num: "5,916",
+                    name: "OA及生产管理系统",
+                },
+                {
+                    icon: "svg-iac-wz",
+                    num: "5,916",
+                    name: "智能物资系统",
+                },
+                {
+                    icon: "svg-iac-aq",
+                    num: "5,916",
+                    name: "智能安全系统",
+                },
+            ],
+            panelIndex: 1,
+        };
+    },
+    // 函数
+    methods: {
+        clickBtn: function(index) {
+            this.btnIndex = index;
+        },
+        clickItem: function(index) {
+            this.panelIndex = index;
+        },
+    },
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+    },
+    beforeUpdate() {
+        // 数据更新前
+    },
+    updated() {
+        // 数据更新后
+    },
+};
+</script>
+
+<style lang="less">
+.intelligent-alarm-center {
+    widows: 100%;
+    height: calc(100vh - 90px);
+    overflow-y: auto;
+
+    .intelligent-alarm-center-btn {
+        display: flex;
+
+        .i-btn {
+            width: 11.296vh;
+            height: 3.056vh;
+            line-height: 3.056vh;
+            background: #53626833;
+            border: 1px solid #53626833;
+            text-align: center;
+            cursor: pointer;
+            font-size: 1.296vh;
+            color: #b3bdc0;
+            transition: all 0.3s;
+
+            + .i-btn {
+                margin-left: 0.926vh;
+            }
+
+            &:hover,
+            &.active {
+                border: 1px solid #05bb4c;
+                background: #05bb4c33;
+                color: #05bb4c;
+            }
+        }
+    }
+
+    .intelligent-alarm-center-box {
+        display: flex;
+        flex-wrap: wrap;
+
+        .intelligent-alarm-center-item {
+            width: 360px;
+            height: 14.259vh;
+            background: #53626833;
+            border: 1px solid #53626833;
+            position: relative;
+            overflow: hidden;
+            margin: 1.481vh 1.481vh 0 0;
+            cursor: pointer;
+            transition: all 0.3s;
+
+            .intelligent-alarm-center-icon {
+                position: absolute;
+                width: 13.889vh;
+                height: 13.889vh;
+                background: #7a909933;
+                border-radius: 50%;
+                right: -2.778vh;
+                bottom: -2.778vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .i-svg-icon {
+                    font-size: 0;
+                    line-height: 0;
+                    svg {
+                        width: 5.093vh;
+                        height: 5.093vh;
+                        use {
+                            fill: #536268;
+                            width: 5.093vh;
+                            height: 5.093vh;
+                        }
+                    }
+                }
+            }
+
+            .intelligent-alarm-center-num {
+                font-size: 3.148vh;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 3.241vh;
+                margin: 3.704vh 0 0 2.407vh;
+            }
+
+            .intelligent-alarm-center-name {
+                font-size: 1.481vh;
+                font-weight: 400;
+                color: #b3bdc0;
+                line-height: 30px;
+                margin: 1.481vh 0 0 2.407vh;
+            }
+
+            &:hover,
+            &.active {
+                background: #05bb4c33;
+                border: 1px solid #05bb4c;
+                margin-top: 0.556vh;
+
+                .intelligent-alarm-center-icon {
+                    background: #07ED5F33;
+
+                    .i-svg-icon {
+                        svg {
+                            use {
+                                fill: #05BB4C;
+                            }
+                        }
+                    }
+                }
+
+                .intelligent-alarm-center-num {
+                    color: #05BB4C;
+                }
+
+                .intelligent-alarm-center-name {
+                    color: #FFFFFF;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/NewPages/knowledge-base.vue

@@ -0,0 +1,383 @@
+<template>
+  <div class="knowledge-base">
+    <el-row class="mg-b-16">
+      <el-col :span="8">
+        <panel class="outline" :title="'故障体系'" :icon="'fa fa-warning'" :subTitle="1234" :showLine="false">
+          <div class="table">
+            <div>
+              <table style="width:100%;" border="0" cellspacing="0">
+                <tbody>
+                  <tr v-for="index of 6" :key="index">
+                    <td style="width:150px;">
+                      MG01_01
+                    </td>
+                    <td class="green num" style="width:105px;">
+                      1234.56
+                    </td>
+                    <td style="width:350px;">
+                      <div class="percent-item">
+                        完成度
+                        <div class="percent-bar" style="">
+                          <div class="percent-value" style="width:80%"></div>
+                        </div>
+                        <span class="perent-num">80%</span>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </panel>
+      </el-col>
+      <el-col :span="8">
+        <panel class="outline" :title="'预警知识'" :icon="'fa fa-warning'" :subTitle="1234" :showLine="false">
+          <div class="warning-item">
+            <div class="sub-item">
+              <div class="text">发电机：</div>
+              <div class="value">1234.56</div>
+            </div>
+            <div class="sub-item">
+              <div class="text">发电机：</div>
+              <div class="value">1234.56</div>
+            </div>
+          </div>
+          <div class="warning-item">
+            <div class="sub-item">
+              <div class="text">发电机：</div>
+              <div class="value">1234.56</div>
+            </div>
+            <div class="sub-item">
+              <div class="text">发电机：</div>
+              <div class="value">1234.56</div>
+            </div>
+          </div>
+          <div class="warning-item">
+            <div class="sub-item">
+              <div class="text">发电机：</div>
+              <div class="value">1234.56</div>
+            </div>
+            <div class="sub-item">
+              <div class="text">发电机：</div>
+              <div class="value">1234.56</div>
+            </div>
+          </div>
+          <div class="warning-item">
+            <div class="sub-item">
+              <div class="text">发电机：</div>
+              <div class="value">1234.56</div>
+            </div>
+            <div class="sub-item">
+              <div class="text">发电机：</div>
+              <div class="value">1234.56</div>
+            </div>
+          </div>
+        </panel>
+      </el-col>
+      <el-col :span="8">
+        <panel class="outline" :title="'特征参数'" :icon="'fa fa-id-card-o'" :subTitle="1234" :showLine="false">
+          <div class="feature-item">
+            <div class="title">
+              <i class="svg-icon svg-icon-sm svg-icon-gray">
+                <svg-icon :svgid="'svg-knowledge-bar'" />
+              </i>
+              基于数据统计
+            </div>
+            <div class="value">123</div>
+          </div>
+          <div class="feature-item">
+            <div class="title">
+              <i class="svg-icon svg-icon-sm svg-icon-gray">
+                <svg-icon :svgid="'svg-knowledge-nerve-net'" />
+              </i>
+              神经网络整理
+            </div>
+            <div class="value">123</div>
+          </div>
+          <div class="feature-item">
+            <div class="title">
+              <i class="svg-icon svg-icon-sm svg-icon-gray">
+                <svg-icon :svgid="'svg-knowledge-file'" />
+              </i>
+              文档整理
+            </div>
+            <div class="value">123</div>
+          </div>
+          <div class="feature-item">
+            <div class="title">
+              <i class="svg-icon svg-icon-sm svg-icon-gray">
+                <svg-icon :svgid="'svg-knowledge-professor'" />
+              </i>
+              专家知识分析
+            </div>
+            <div class="value">123</div>
+          </div>
+        </panel>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="8">
+        <panel class="outline" :title="'故障体系'" :icon="'fa fa-warning'" :subTitle="1234" :showLine="false">
+          <div class="circle-items">
+            <div class="circle-item">
+              <div class="inner">
+                <div class="text">健康评价</div>
+                <div class="value">29</div>
+              </div>
+            </div>
+            <div class="circle-item">
+              <div class="inner">
+                <div class="text">健康评价</div>
+                <div class="value">29</div>
+              </div>
+            </div>
+            <div class="circle-item">
+              <div class="inner">
+                <div class="text">健康评价</div>
+                <div class="value">29</div>
+              </div>
+            </div>
+          </div>
+        </panel>
+      </el-col>
+      <el-col :span="8">
+        <panel class="outline" :title="'预警知识'" :icon="'fa fa-warning'" :subTitle="1234" :showLine="false">
+          <div class="circle-items">
+            <div class="circle-item">
+              <div class="inner">
+                <div class="text">健康评价</div>
+                <div class="value">29</div>
+              </div>
+            </div>
+            <div class="circle-item">
+              <div class="inner">
+                <div class="text">健康评价</div>
+                <div class="value">29</div>
+              </div>
+            </div>
+            <div class="circle-item">
+              <div class="inner">
+                <div class="text">健康评价</div>
+                <div class="value">29</div>
+              </div>
+            </div>
+          </div>
+        </panel>
+      </el-col>
+      <el-col :span="8">
+        <panel class="outline" :title="'特征参数'" :icon="'fa fa-id-card-o'" :subTitle="1234" :showLine="false">
+          <div class="circle-items">
+            <div class="circle-item">
+              <div class="inner">
+                <div class="text">健康评价</div>
+                <div class="value">29</div>
+              </div>
+            </div>
+            <div class="circle-item">
+              <div class="inner">
+                <div class="text">健康评价</div>
+                <div class="value">29</div>
+              </div>
+            </div>
+            <div class="circle-item">
+              <div class="inner">
+                <div class="text">健康评价</div>
+                <div class="value">29</div>
+              </div>
+            </div>
+          </div>
+        </panel>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import panel from "../../components/coms/panel/panel.vue";
+export default {
+  components: { panel, SvgIcon },
+  setup() {},
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="less">
+.knowledge-base {
+  .com-panel .panel-header {
+    margin-bottom: 0px;
+
+    .panel-tools {
+      color: @green;
+      font-family: @font-family-num;
+    }
+  }
+
+  .outline {
+    outline: 1px solid fade(@gray, 50);
+  }
+
+  .warning-item {
+    display: flex;
+    justify-content: space-around;
+
+    height: 54px;
+    line-height: 54px;
+    font-size: 12px;
+
+    &:nth-child(2n) {
+      background-color: fade(@gray, 20%);
+    }
+
+    .title {
+      display: flex;
+      align-items: center;
+      color: @gray;
+
+      i {
+        margin-right: 16px;
+      }
+    }
+
+    .sub-item {
+      display: flex;
+      .text {
+        color: gray;
+        margin-right: 16px;
+      }
+
+      .value {
+        color: @green;
+        font-family: @font-family-num;
+      }
+    }
+  }
+
+  .feature-item {
+    display: flex;
+    justify-content: space-between;
+    height: 54px;
+    line-height: 54px;
+    font-size: 12px;
+    padding: 0 24px;
+
+    &:nth-child(2n) {
+      background-color: fade(@gray, 20%);
+    }
+
+    .title {
+      display: flex;
+      align-items: center;
+      color: @gray;
+
+      i {
+        margin-right: 16px;
+      }
+    }
+
+    .value {
+      color: @green;
+      font-family: @font-family-num;
+    }
+  }
+
+  .circle-items {
+    display: flex;
+    justify-content: space-around;
+    padding: 48px 0;
+
+    .circle-item {
+      display: flex;
+      flex: 0 0 146px;
+      width: 146px;
+      height: 146px;
+      background: fade(@green, 10);
+      border-radius: 50%;
+      justify-content: center;
+      align-items: center;
+
+      .inner {
+        width: 124px;
+        height: 124px;
+        border: 1px solid #05bb4c;
+        border-radius: 50%;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        box-shadow: inset -15px 20px 30px -30px #05bb4c;
+
+        .text {
+          color: @green;
+          font-size: 12px;
+          margin-bottom: 8px;
+        }
+
+        .value {
+          color: @white;
+          font-size: 34px;
+        }
+      }
+    }
+  }
+
+  .table {
+    tbody {
+      tr:nth-child(2n) td {
+        background-color: fade(@gray, 20%);
+
+        &.item {
+          background-color: transparent;
+        }
+      }
+    }
+
+    td {
+      color: @gray;
+      text-align: center;
+      height: 26px;
+      line-height: 26px;
+      font-size: 12px;
+
+      &.green {
+        color: @green;
+      }
+
+      &.num {
+        font-family: @font-family-num;
+      }
+    }
+
+    .percent-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 34px;
+
+      .percent-bar {
+        height: 12px;
+        width: 170px;
+        background: transparent;
+        border: 1px solid @gray;
+        margin-left: 16px;
+
+        .percent-value {
+          height: calc(100% - 4px);
+          background: @green;
+          margin: 2px;
+        }
+      }
+
+      .perent-num {
+        color: @green;
+        margin-left: 16px;
+        font-family: @font-family-num;
+      }
+    }
+  }
+}
+</style>

src/views/NewPages/personnel.vue

@@ -0,0 +1,308 @@
+<template>
+    <div class="personnel">
+        <div class="personnel-btn">
+            <div @click="clickBtn(index)" class="i-btn" v-for="(btn, index) of btns" :key="index" :class="{ active: index == btnIndex }">{{ btn }}</div>
+        </div>
+        <div class="personnel-box">
+            <div class="personnel-box-item" v-for="index of 81" :key="index" @click="dialogVisible = true">
+                <div class="personnel-box-item-h">
+                    <div class="personnel-box-item-header">
+                        <img :src="require('@assets/logo.png')" />
+                    </div>
+                    <div class="personnel-box-item-form">
+                        <div class="personnel-box-item-group">
+                            <div class="personnel-box-item-label">收缩血压：</div>
+                            <div class="personnel-box-item-value">80.00</div>
+                        </div>
+                        <div class="personnel-box-item-group">
+                            <div class="personnel-box-item-label">舒张血压：</div>
+                            <div class="personnel-box-item-value">113.00</div>
+                        </div>
+                        <div class="personnel-box-item-group">
+                            <div class="personnel-box-item-label">心跳频率：</div>
+                            <div class="personnel-box-item-value">87.00</div>
+                        </div>
+                        <div class="personnel-box-item-group">
+                            <div class="personnel-box-item-label">血氧浓度：</div>
+                            <div class="personnel-box-item-value">98.00</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="personnel-box-item-f">
+                    <div class="personnel-box-item-name">白春生</div>
+                    <div class="personnel-box-item-icon">
+                        <i class="el-icon-user-solid"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <el-dialog title="人员信息" v-model="dialogVisible" width="1400px" top="10vh" custom-class="modal hide-header" :close-on-click-modal="false">
+            <div class="info-popup">
+                <div class="query left mg-b-8">
+                    <div class="query-items">
+                        <div class="query-item">
+                            <div class="lable">开始日期：</div>
+                            <div class="search-input">
+                                <el-date-picker v-model="startDate" type="date" placeholder="2021-06-01" popper-class="date-select" class="placeholder-left">
+                                </el-date-picker>
+                            </div>
+                        </div>
+                        <div class="query-item">
+                            <div class="lable">结束日期：</div>
+                            <div class="search-input">
+                                <el-date-picker v-model="endDate" type="date" placeholder="2021-06-01" popper-class="date-select" class="placeholder-left">
+                                </el-date-picker>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="query-actions">
+                        <button class="btn green">查询</button>
+                    </div>
+                </div>
+                <div class="prople-info mg-t-16 mg-b-16">
+                    <div class="prople-info-item">
+                        <div class="font-md gray-l">检修人员</div>
+                        <div class="font-md white">白春生</div>
+                    </div>
+                    <div class="prople-info-item">
+                        <div class="font-md gray-l">疲劳度</div>
+                        <div class="font-md white">55.00</div>
+                    </div><div class="prople-info-item">
+                        <div class="font-md gray-l">步数</div>
+                        <div class="font-md white">55.00</div>
+                    </div><div class="prople-info-item">
+                        <div class="font-md gray-l">收缩血压</div>
+                        <div class="font-md white">55.00</div>
+                    </div>
+                    <div class="prople-info-item">
+                        <div class="font-md gray-l">舒张血压</div>
+                        <div class="font-md white">55.00</div>
+                    </div>
+                    <div class="prople-info-item">
+                        <div class="font-md gray-l">心跳频率</div>
+                        <div class="font-md white">55.00</div>
+                    </div>
+                    <div class="prople-info-item">
+                        <div class="font-md gray-l">血氧浓度</div>
+                        <div class="font-md white">55.00</div>
+                    </div>
+                </div>
+                <div class="white font-md mg-t-16 mg-b-16">检测人员健康情况</div>
+                <normal-line-chart class="people-chart" height="45vh" :showLegend="true" :units="['半小时检测值']" />
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import NormalLineChart from "@com/chart/line/normal-line-chart.vue";
+export default {
+    // 名称
+    name: "personnel",
+    // 使用组件
+    components: {
+        NormalLineChart
+    },
+    // 数据
+    data() {
+        return {
+            btns: ["全部", "麻黄山", "牛首山", "青山", "石板泉", "香山"],
+            btnIndex: 2,
+            dialogVisible: false,
+            startDate: "",
+            endDate: "",
+        };
+    },
+    // 函数
+    methods: {
+        clickBtn: function(index) {
+            this.btnIndex = index;
+        },
+        clickItem: function(index) {
+            this.panelIndex = index;
+        },
+    },
+    // 生命周期钩子
+    beforeCreate() {
+        // 创建前
+    },
+    created() {
+        // 创建后
+    },
+    beforeMount() {
+        // 渲染前
+    },
+    mounted() {
+        // 渲染后
+    },
+    beforeUpdate() {
+        // 数据更新前
+    },
+    updated() {
+        // 数据更新后
+    },
+};
+</script>
+
+<style lang="less">
+.personnel {
+    widows: 100%;
+    height: calc(100vh - 90px);
+    overflow-y: auto;
+
+    .personnel-btn {
+        display: flex;
+
+        .i-btn {
+            width: 11.296vh;
+            height: 3.056vh;
+            line-height: 3.056vh;
+            background: #53626833;
+            border: 1px solid #53626833;
+            text-align: center;
+            cursor: pointer;
+            font-size: 1.296vh;
+            color: #b3bdc0;
+            transition: all 0.3s;
+
+            + .i-btn {
+                margin-left: 0.926vh;
+            }
+
+            &:hover,
+            &.active {
+                border: 1px solid #05bb4c;
+                background: #05bb4c33;
+                color: #05bb4c;
+            }
+        }
+    }
+
+    .personnel-box {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 6px;
+
+        .personnel-box-item {
+            width: 198px;
+            height: 105px;
+            background: #53626833;
+            border: 1px solid #53626833;
+            margin: 10px 10px 0 0;
+            cursor: pointer;
+            transition: all 0.3s;
+            padding: 6px;
+            display: flex;
+            flex-direction: column;
+
+            .personnel-box-item-h {
+                height: 74px;
+                display: flex;
+
+                .personnel-box-item-header {
+                    height: 100%;
+                    width: 52px;
+                    margin-right: 12px;
+                    background: #848b8a;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    img {
+                        width: 100%;
+                        // height: 100%;
+                    }
+                }
+                .personnel-box-item-form {
+                    flex-grow: 1;
+
+                    .personnel-box-item-group {
+                        font-size: 12px;
+                        display: flex;
+                        line-height: 1.5;
+
+                        .personnel-box-item-label {
+                            width: 60px;
+                            text-align: right;
+                            color: #b3bdc0;
+                        }
+
+                        .personnel-box-item-value {
+                            color: #b3bdc0;
+                        }
+                    }
+                }
+            }
+
+            .personnel-box-item-f {
+                flex-grow: 1;
+                display: flex;
+                line-height: 1;
+                margin-top: 7px;
+                font-size: 12px;
+
+                .personnel-box-item-name {
+                    width: 52px;
+                    margin-right: 12px;
+                    text-align: center;
+                    color: #ffffff;
+                }
+
+                .personnel-box-item-icon {
+                    flex-grow: 1;
+                    color: #b3bdc0;
+                }
+            }
+
+            &:hover {
+                border: 1px solid #05bb4c;
+                background: #05bb4c33;
+
+                .personnel-box-item-h {
+                    .personnel-box-item-form {
+                        .personnel-box-item-group {
+                            .personnel-box-item-label {
+                                color: #ffffff;
+                            }
+
+                            .personnel-box-item-value {
+                                color: #05bb4c;
+                            }
+                        }
+                    }
+                }
+
+                .personnel-box-item-f {
+                    .personnel-box-item-name {
+                        color: #05bb4c;
+                    }
+
+                    .personnel-box-item-icon {
+                        color: #ffffff;
+                    }
+                }
+            }
+        }
+    }
+
+    .prople-info {
+        width: 100%;
+        height: 76px;
+        background: #53626833;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .prople-info-item {
+            flex: 1;
+            text-align: center;
+            line-height: 2;
+        }
+    }
+
+    .people-chart {
+        width: 100%;
+        height: 45vh;
+    }
+}
+</style>

src/views/NewPages/znzhfx.vue

@@ -0,0 +1,541 @@
+<template>
+  <div class="znzhfx">
+    <el-scrollbar height="1022px">
+      <el-row>
+        <el-col :span="12">
+          <el-row>
+            <el-col :span="24">
+              <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="value1"
+                        clearable
+                        placeholder="请选择风场"
+                        popper-class="select"
+                      >
+                        <el-option
+                          v-for="item in options"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                        >
+                        </el-option>
+                      </el-select>
+                    </div>
+                  </div>
+                  <div class="query-item">
+                    <div class="lable">日期：</div>
+                    <div class="search-input">
+                      <el-date-picker
+                        v-model="value4"
+                        type="date"
+                        placeholder="选择日期"
+                        popper-class="date-select"
+                      >
+                      </el-date-picker>
+                    </div>
+                  </div>
+                  <div class="query-item">
+                    <button class="btn" type="button">
+                      <span>计算</span>
+                    </button>
+                    <button class="btn" type="button">
+                      <span>导出</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="table-panel">
+        <el-col :span="24">
+          <div class="table-title">
+            麻黄山风电场年05月单台机组运行指标性能分析
+          </div>
+          <Table :data="tableData1" :canScroll="false" />
+          <div class="back">
+            <button class="btn" type="button">
+              <span>返回</span>
+            </button>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" class="table-panel">
+        <el-col :span="24">
+          <div class="table-title">
+            麻黄山01号风机2021年05月运行指标性能分析
+          </div>
+          <Table :data="tableData2" :canScroll="false" />
+        </el-col>
+      </el-row>
+      <div class="mg-b-16 anliz-des">
+        <div>
+          麻黄山01号风机2021年05月运行指标性能分析内容内容内容内容内容内容，麻黄山01号风机2021年05月运行指标性能分析内容内容内容内容内容内容。
+        </div>
+        <div>
+          麻黄山01号风机2021年05月运行指标性能分析内容内容内容内容内容内容，麻黄山01号风机2021年05月运行指标性能分析内容内容内容内容内容内容麻黄山01号风机2021年05月运行指标性能分析内容内容内容内容内容内容，麻黄山01号风机2021年05
+          月运行指标性能分析内容内容内容内容内容内容麻黄山01号风机2021年05月运行指标性能分析内容内容内容内容内容内容，麻黄山01号风机2021年05月运行指标性能分析内容内容内容内容内容内容麻黄山01号风机2021年05月运行指标性能分析内容内
+          容内容内容内容内容，麻黄山01号风机2021年05月运行指标性能分析内容内容内容内容内容内容。
+        </div>
+      </div>
+      <div class="mg-b-16">
+        <panel :title="'损失电量分析'" :showLine="true">
+          <multiple-bar-line-chart :height="'21.296vh'" :barData="bar1Data" />
+        </panel>
+      </div>
+      <div class="mg-b-16">
+        <panel :title="'损失电量分析'" :showLine="true">
+          <vertival-bar-line-chart :height="'21.296vh'" :bardata="bar2data" />
+        </panel>
+      </div>
+      <div class="mg-b-16">
+        <panel :title="'损失电量分析'" :showLine="true" :list="list">
+          <double-line-chart :height="'21.296vh'" />
+        </panel>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import Panel from "../../components/coms/panel/panel.vue";
+import Table from "../../components/coms/table/table.vue";
+import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
+import DoubleLineChart from "../../components/chart/line/double-line-chart.vue";
+
+export default {
+  setup() {},
+  components: {
+    Panel,
+    Table,
+    VertivalBarLineChart,
+    MultipleBarLineChart,
+    DoubleLineChart,
+  },
+  data() {
+    return {
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      tableData1: {
+        column: [
+          {
+            name: " ",
+            field: "name",
+            width: "3%",
+          },
+          {
+            name: "实际发电量（万kWh）",
+            field: "v1",
+          },
+          {
+            name: "理论发电量（万kWh）",
+            field: "v2",
+          },
+          {
+            name: "设备利用小时数（h）",
+            field: "v3",
+          },
+          {
+            name: "设备科利用率（%）",
+            field: "v4",
+          },
+          {
+            name: "等效可用系数（%）",
+            field: "v5",
+          },
+          {
+            name: "平均风速（m/s）",
+            field: "v6",
+          },
+          {
+            name: "小风切入风速（m/s）",
+            field: "v7",
+          },
+        ],
+        data: [
+          {
+            name: "1",
+            v1: "麻黄山01号风机",
+            v2: "174785",
+            v3: "174789.01",
+            v4: "100",
+            v5: "100",
+            v6: "3.46",
+            v7: "3.78",
+          },
+          {
+            name: "2",
+            v1: "麻黄山01号风机",
+            v2: "174785",
+            v3: "174789.01",
+            v4: "100",
+            v5: "100",
+            v6: "3.46",
+            v7: "3.78",
+          },
+          {
+            name: "3",
+            v1: "麻黄山01号风机",
+            v2: "174785",
+            v3: "174789.01",
+            v4: "100",
+            v5: "100",
+            v6: "3.46",
+            v7: "3.78",
+          },
+          {
+            name: "4",
+            v1: "麻黄山01号风机",
+            v2: "174785",
+            v3: "174789.01",
+            v4: "100",
+            v5: "100",
+            v6: "3.46",
+            v7: "3.78",
+          },
+          {
+            name: "5",
+            v1: "麻黄山01号风机",
+            v2: "174785",
+            v3: "174789.01",
+            v4: "100",
+            v5: "100",
+            v6: "3.46",
+            v7: "3.78",
+          },
+          {
+            name: "6",
+            v1: "麻黄山01号风机",
+            v2: "174785",
+            v3: "174789.01",
+            v4: "100",
+            v5: "100",
+            v6: "3.46",
+            v7: "3.78",
+          },
+          {
+            name: "7",
+            v1: "麻黄山01号风机",
+            v2: "174785",
+            v3: "174789.01",
+            v4: "100",
+            v5: "100",
+            v6: "3.46",
+            v7: "3.78",
+          },
+          {
+            name: "8",
+            v1: "麻黄山01号风机",
+            v2: "174785",
+            v3: "174789.01",
+            v4: "100",
+            v5: "100",
+            v6: "3.46",
+            v7: "3.78",
+          },
+        ],
+      },
+      tableData2: {
+        column: [
+          {
+            name: "指标名称",
+            field: "name",
+          },
+          {
+            name: "本月值",
+            field: "v1",
+          },
+          {
+            name: "去年同期",
+            field: "v2",
+          },
+          {
+            name: "同比增长率（%）",
+            field: "v3",
+          },
+          {
+            name: "环比",
+            field: "v4",
+          },
+          {
+            name: "环比端值（%）",
+            field: "v5",
+          },
+        ],
+        data: [
+          {
+            name: "实际发电量（万kWh）",
+            v1: "174785",
+            v2: "317885",
+            v3: "-45",
+            v4: "22322",
+            v5: "-36",
+          },
+          {
+            name: "实际发电量（万kWh）",
+            v1: "174785",
+            v2: "317885",
+            v3: "-45",
+            v4: "22322",
+            v5: "-36",
+          },
+          {
+            name: "实际发电量（万kWh）",
+            v1: "174785",
+            v2: "317885",
+            v3: "-45",
+            v4: "22322",
+            v5: "-36",
+          },
+          {
+            name: "实际发电量（万kWh）",
+            v1: "174785",
+            v2: "317885",
+            v3: "-45",
+            v4: "22322",
+            v5: "-36",
+          },
+          {
+            name: "实际发电量（万kWh）",
+            v1: "174785",
+            v2: "317885",
+            v3: "-45",
+            v4: "22322",
+            v5: "-36",
+          },
+          {
+            name: "实际发电量（万kWh）",
+            v1: "174785",
+            v2: "317885",
+            v3: "-45",
+            v4: "22322",
+            v5: "-36",
+          },
+          {
+            name: "实际发电量（万kWh）",
+            v1: "174785",
+            v2: "317885",
+            v3: "-45",
+            v4: "22322",
+            v5: "-36",
+          },
+          {
+            name: "实际发电量（万kWh）",
+            v1: "174785",
+            v2: "317885",
+            v3: "-45",
+            v4: "22322",
+            v5: "-36",
+          },
+        ],
+      },
+      bar1Data: [
+        {
+          title: "日发电量",
+          value: [
+            {
+              text: "05-01",
+              value: 1,
+            },
+            {
+              text: "05-01",
+              value: 2,
+            },
+            {
+              text: "05-01",
+              value: 1,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+          ],
+        },
+      ],
+      bar2data: {
+        area: [
+          "05-01",
+          "05-01",
+          "05-01",
+          "05-01",
+          "05-01",
+          "05-01",
+          "05-01",
+          "05-01",
+          "05-01",
+        ],
+        legend: [
+          "限电损失电量",
+          "性能未达标损失电量",
+          "检修损失电量",
+          "故障损失电量",
+          "受累损失电量",
+          "性能损失",
+        ],
+        data: [
+          [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+        ],
+      },
+      list: [
+        {
+          title: "绿123线",
+          smooth: false,
+          value: [
+            {
+              text: "",
+              value: 0,
+            },
+            {
+              text: "0:00",
+              value: 20,
+            },
+            {
+              text: "10:00",
+              value: 1,
+            },
+            {
+              text: "11:00",
+              value: 40,
+            },
+            {
+              text: "12:00",
+              value: 10,
+            },
+            {
+              text: "13:00",
+              value: 15,
+            },
+            {
+              text: "14:00",
+              value: 30,
+            },
+            {
+              text: "15:00",
+              value: 40,
+            },
+            {
+              text: "",
+              value: 10,
+            },
+          ],
+        },
+        {
+          title: "黄线",
+          smooth: false,
+          value: [
+            {
+              text: "",
+              value: 0,
+            },
+            {
+              text: "0:00",
+              value: 40,
+            },
+            {
+              text: "10:00",
+              value: 20,
+            },
+            {
+              text: "11:00",
+              value: 20,
+            },
+            {
+              text: "12:00",
+              value: 10,
+            },
+            {
+              text: "13:00",
+              value: 40,
+            },
+            {
+              text: "14:00",
+              value: 50,
+            },
+            {
+              text: "15:00",
+              value: 40,
+            },
+            {
+              text: "",
+              value: 10,
+            },
+          ],
+        },
+      ],
+    };
+  },
+  created() {},
+};
+</script>
+
+<style lang="less">
+.znzhfx {
+  font-size: 12px;
+  .anliz-des {
+    font-size: 16px;
+    color: #b3bdc0;
+    margin-top: 1.4993vh;
+    margin-bottom: 44px;
+  }
+  .table-panel {
+    .table-title {
+      font-size: 16px;
+      text-align: center;
+      color: #FEFEFE;
+      height: 4.6972vh;
+      line-height: 4.6972vh;
+    }
+    .back {
+      margin: 2.3988vh 0px 0px 0px;
+    }
+  }
+  .com-table {
+    border: 1px solid #6067697d;
+  }
+}
+</style>

src/views/NewPages/ztfx.vue

@@ -0,0 +1,719 @@
+<template>
+  <div class="ztfx">
+    <div class="action-bar">
+      <div class="query mg-b-16">
+        <div class="query-items">
+          <div class="query-item">
+            <div class="lable">日期：</div>
+            <div class="search-input">
+              <el-date-picker
+                v-model="value4"
+                type="date"
+                placeholder="选择日期"
+                popper-class="date-select"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <div class="query-item">
+            <div class="search-input select-btn">
+              <el-select
+                v-model="value2"
+                multiple
+                placeholder="计算"
+                popper-class="select"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-row :gutter="20" class="table-panel">
+      <el-col :span="12">
+        <panel :title="'月度'" :showLine="false">
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:5vh;"></th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                </tr>
+              </thead>
+            </table>
+            <el-scrollbar>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr>
+                      <td style="width:5vh;">
+                        本期
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                        <span class="svg-icon svg-icon-green">
+                          <svg-icon svgid="svg-arrow-up-1" />
+                        </span>
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                    </tr>
+                    <tr>
+                      <td style="width:5vh;">
+                        当期
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                        <span class="svg-icon svg-icon-yellow">
+                          <svg-icon svgid="svg-arrow-dpwn-1" />
+                        </span>
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </el-scrollbar>
+          </div>
+        </panel>
+      </el-col>
+      <el-col :span="12">
+        <panel :title="'年度'" :showLine="false">
+          <div class="table">
+            <table style="width:100%;" border="0" cellspacing="0">
+              <thead>
+                <tr>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                  <th rowspan="2" class="type1" style="width:6vh;">
+                    故障损失电量
+                  </th>
+                </tr>
+              </thead>
+            </table>
+            <el-scrollbar>
+              <div style=" ">
+                <table
+                  style="width:100%;text-align:center;"
+                  border="0"
+                  cellspacing="0"
+                >
+                  <tbody>
+                    <tr v-for="index of 2" :key="index">
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                        <span class="svg-icon svg-icon-yellow">
+                          <svg-icon svgid="svg-arrow-dpwn-1" />
+                        </span>
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                      <td class="td-item">
+                        0.59
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </el-scrollbar>
+          </div>
+        </panel>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="table-complex">
+      <el-col :span="12">
+        <div class="table">
+          <table style="width:100%;" border="0" cellspacing="0">
+            <thead>
+              <tr>
+                <th rowspan="2" class="type1" style="width:50px;"></th>
+                <th colspan="2" class="type1" style="width:205px;">麻黄山</th>
+                <th colspan="2" class="type1" style="width:205px;">牛首山</th>
+                <th colspan="2" class="type1" style="width:205px;">青山</th>
+                <th colspan="2" class="type1" style="width:205px;">石板泉</th>
+                <th colspan="2" class="type1" style="width:205px;">香山</th>
+              </tr>
+              <tr>
+                <th style="width:105px;">当月</th>
+                <th style="width:105px;">同期</th>
+                <th style="width:105px;">当月</th>
+                <th style="width:105px;">同期</th>
+                <th style="width:105px;">当月</th>
+                <th style="width:105px;">同期</th>
+                <th style="width:105px;">当月</th>
+                <th style="width:105px;">同期</th>
+                <th style="width:105px;">当月</th>
+                <th style="width:105px;">同期</th>
+              </tr>
+            </thead>
+          </table>
+          <el-scrollbar>
+            <div style=" ">
+              <table
+                style="width:100%;text-align:center;"
+                border="0"
+                cellspacing="0"
+              >
+                <tbody>
+                  <tr v-for="index of 5" :key="index">
+                    <td style="width:50px;">
+                      NTEF
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                      <span class="svg-icon svg-icon-yellow">
+                        <svg-icon svgid="svg-arrow-dpwn-1" />
+                      </span>
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                      <span class="svg-icon svg-icon-green">
+                        <svg-icon svgid="svg-arrow-up-1" />
+                      </span>
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                      <span class="svg-icon svg-icon-yellow">
+                        <svg-icon svgid="svg-arrow-dpwn-1" />
+                      </span>
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                      <span class="svg-icon svg-icon-green">
+                        <svg-icon svgid="svg-arrow-up-1" />
+                      </span>
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                      <span class="svg-icon svg-icon-yellow">
+                        <svg-icon svgid="svg-arrow-dpwn-1" />
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </el-scrollbar>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="table">
+          <table style="width:100%;" border="0" cellspacing="0">
+            <thead>
+              <tr>
+                <th rowspan="2" class="type1" style="width:50px;"></th>
+                <th colspan="2" class="type1" style="width:205px;">麻黄山</th>
+                <th colspan="2" class="type1" style="width:205px;">牛首山</th>
+                <th colspan="2" class="type1" style="width:205px;">青山</th>
+                <th colspan="2" class="type1" style="width:205px;">石板泉</th>
+                <th colspan="2" class="type1" style="width:205px;">香山</th>
+              </tr>
+              <tr>
+                <th style="width:105px;">当月</th>
+                <th style="width:105px;">同期</th>
+                <th style="width:105px;">当月</th>
+                <th style="width:105px;">同期</th>
+                <th style="width:105px;">当月</th>
+                <th style="width:105px;">同期</th>
+                <th style="width:105px;">当月</th>
+                <th style="width:105px;">同期</th>
+                <th style="width:105px;">当月</th>
+                <th style="width:105px;">同期</th>
+              </tr>
+            </thead>
+          </table>
+          <el-scrollbar>
+            <div style=" ">
+              <table
+                style="width:100%;text-align:center;"
+                border="0"
+                cellspacing="0"
+              >
+                <tbody>
+                  <tr v-for="index of 5" :key="index">
+                    <td style="width:50px;">
+                      NTEF
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                      <span class="svg-icon svg-icon-yellow">
+                        <svg-icon svgid="svg-arrow-dpwn-1" />
+                      </span>
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                      <span class="svg-icon svg-icon-green">
+                        <svg-icon svgid="svg-arrow-up-1" />
+                      </span>
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                      <span class="svg-icon svg-icon-yellow">
+                        <svg-icon svgid="svg-arrow-dpwn-1" />
+                      </span>
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                      <span class="svg-icon svg-icon-green">
+                        <svg-icon svgid="svg-arrow-up-1" />
+                      </span>
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                    </td>
+                    <td style="width:105px;">
+                      0.59
+                      <span class="svg-icon svg-icon-yellow">
+                        <svg-icon svgid="svg-arrow-dpwn-1" />
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </el-scrollbar></div
+      ></el-col>
+    </el-row>
+    <el-row :gutter="20" class="pie-chart-panel">
+      <el-col :span="6">
+        <panel title="当月理论平衡分析">
+          <dual-pie-chart height="27.296vh" />
+        </panel>
+      </el-col>
+      <el-col :span="6">
+        <panel title="当月理论平衡分析">
+          <dual-pie-chart height="27.296vh" />
+        </panel>
+      </el-col>
+      <el-col :span="6">
+        <panel title="当月理论平衡分析">
+          <dual-pie-chart height="27.296vh" />
+        </panel>
+      </el-col>
+      <el-col :span="6">
+        <panel title="当月理论平衡分析">
+          <dual-pie-chart height="27.296vh" />
+        </panel>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Panel from "../../components/coms/panel/panel.vue";
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+
+export default {
+  setup() {},
+  components: {
+    Panel,
+    DualPieChart,
+    SvgIcon,
+  },
+  data() {
+    return {
+      tableData2: {
+        column: [
+          {
+            name: " ",
+            field: "name",
+            width: "10%",
+          },
+          {
+            name: "故障损失电量",
+            field: "v1",
+          },
+          {
+            name: "故障损失电量",
+            field: "v2",
+            template: function(data) {
+              return data;
+            },
+          },
+          {
+            name: "故障损失电量",
+            field: "v3",
+          },
+          {
+            name: "故障损失电量",
+            field: "v4",
+          },
+          {
+            name: "故障损失电量",
+            field: "v5",
+          },
+          {
+            name: "故障损失电量",
+            field: "v6",
+          },
+          {
+            name: "故障损失电量",
+            field: "v7",
+          },
+          {
+            name: "故障损失电量",
+            field: "v8",
+          },
+          {
+            name: "故障损失电量",
+            field: "v9",
+          },
+          {
+            name: "故障损失电量",
+            field: "v10",
+          },
+          {
+            name: "故障损失电量",
+            field: "v11",
+          },
+          {
+            name: "故障损失电量",
+            field: "v12",
+          },
+        ],
+        data: [
+          {
+            name: "本期",
+            v1: "0.59",
+            v2: "0.59",
+            v3: "0.59",
+            v4: "0.59",
+            v5: "0.59",
+            v6: "0.59",
+            v7: "0.59",
+            v8: "0.59",
+            v9: "0.59",
+            v10: "0.59",
+            v11: "0.59",
+            v12: "0.59",
+          },
+          {
+            name: "同期",
+            v1: "0.59",
+            v2: "0.59",
+            v3: "0.59",
+            v4: "0.59",
+            v5: "0.59",
+            v6: "0.59",
+            v7: "0.59",
+            v8: "0.59",
+            v9: "0.59",
+            v10: "0.59",
+            v11: "0.59",
+            v12: "0.59",
+          },
+        ],
+      },
+    };
+  },
+  created() {},
+};
+</script>
+
+<style lang="less">
+.ztfx {
+  font-size: 12px;
+  .select-btn {
+    width: 92px;
+  }
+  .com-panel {
+    border: 1px solid #6067697d;
+  }
+  .table-complex {
+    margin-top: 10px;
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .table-panel {
+    margin-top: 10px;
+    .panel-header {
+      text-align: center;
+    }
+    .table {
+      border: 1px solid #6067697d;
+      tbody {
+        tr:nth-child(2n) td {
+          background-color: fade(@gray, 20%);
+
+          &.item {
+            background-color: transparent;
+          }
+        }
+      }
+      .td-item {
+        width: 6vh;
+      }
+      th {
+        background: fade(@gray, 40);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        color: @gray-l;
+
+        &.type1 {
+          border-left: 0;
+          border-right: 0;
+          height: 4vh;
+        }
+      }
+      td {
+        color: @gray-l;
+        text-align: center;
+        height: 26px;
+        line-height: 26px;
+
+        &.item {
+          width: 100px;
+        }
+      }
+      svg {
+        height: 1.222vh;
+      }
+    }
+  }
+  .pie-chart-panel {
+    margin-top: 10px;
+    .line{
+      border:none;
+    }
+  }
+}
+</style>

src/views/SandTable/component/ThreeModel.vue

@@ -1,11 +1,19 @@
 <template>
-    <div class="three-model" @click="clickEvent">
+    <div class="three-model" :style="'cursor: ' + (pointer ? 'pointer' : 'auto') + ';'" @click="clickEvent">
         <loading ref="pageLoading"></loading>
+        <div class="three-html-layer">
+            <div
+                class="three-html-dom fan-info"
+                :id="htmlLayer[0].id"
+                v-show="htmlLayer[0].show"
+                :style="'left: ' + htmlLayer[0].x + 'px; top: ' + htmlLayer[0].y + 'px;'"
+            ></div>
+        </div>
     </div>
 </template>
 
 <script>
-import loading from '@com/coms/loading/loading.vue';
+import loading from "@com/coms/loading/loading.vue";
 import * as THREE from "three";
 import { GLTFLoader } from "@node/three/examples/jsm/loaders/GLTFLoader.js";
 import { OrbitControls } from "@node/three/examples/jsm/controls/OrbitControls.js";
@@ -18,7 +26,7 @@ export default {
     name: "ThreeModel",
     // 使用组件
     components: {
-        loading
+        loading,
     },
     // 传入参数
     props: {},
@@ -29,169 +37,267 @@ export default {
     // 数据
     data() {
         return {
-            // 场景
-            initScene: function () {
-                scene = new THREE.Scene();
-                // scene.background = new THREE.Color(0xa0a0a0);
-            },
-            // 相机
-            initCamera: function () {
-                camera = new THREE.PerspectiveCamera(45, this.$el.scrollWidth / this.$el.scrollHeight, 0.1, 10000);
-                camera.position.set(50, 60, 50);
-            },
-            // 坐标轴
-            initAxesHelper: function () {
-                const axesHelper = new THREE.AxesHelper(150);
-                scene.add(axesHelper);
-                axesHelper.position.set(0, 0, 0);
-            },
-            // 渲染器
-            initRender: function () {
-                renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
-                // renderer.setClearAlpha(0);
-                renderer.setSize(this.$el.scrollWidth, this.$el.scrollHeight);
-                this.$el.append(renderer.domElement);
-            },
-            // 灯光
-            initLight: function () {
-                // let light = new THREE.PointLight(0xffffff, 2);
-                let light = new THREE.AmbientLight(0xffffff, 4);
-                // light.position.set(50, 50, 50);
-                scene.add(light);
-            },
-            // 控制器
-            initControls: function () {
-                controls = new OrbitControls(camera, renderer.domElement);
-            },
-            // 初始化一个风机动画
-            initFanAnimate: function (fan1, fan2, fan3) {
-                let fanAnimateObj = {
-                    speed: 0.05,
-                    fan1: fan1,
-                    fan2: fan2,
-                    fan3: fan3,
-                };
-                let fanAnimateFunction = function () {
-                    fanAnimateObj.fan1.rotateZ(fanAnimateObj.speed);
-                    fanAnimateObj.fan2.rotateZ(fanAnimateObj.speed);
-                    fanAnimateObj.fan3.rotateZ(fanAnimateObj.speed);
-                    fanAnimateObj.animateId = window.requestAnimationFrame(fanAnimateFunction);
-                }
-                fanAnimateObj.stop = function () {
-                    window.cancelAnimationFrame(fanAnimateObj.animateId);
-                };
-                fanAnimateObj.start = function () {
-                    fanAnimateFunction();
-                };
+            pointer: false,
+            htmlLayer: [
+                {
+                    id: "fan-info",
+                    x: 0,
+                    y: 0,
+                    show: false,
+                    ox: 50,
+                    oy: -50,
+                    position: null,
+                },
+            ],
+        };
+    },
+    // 函数
+    methods: {
+        // Vector3 to screen
+        vector3ToScreen: function(position) {
+            const centerX = this.$el.scrollWidth / 2;
+            const centerY = this.$el.scrollHeight / 2;
+            const v3 = new THREE.Vector3(position.x, position.y, position.z);
+            const standardVec = v3.project(camera);
+            const screenX = Math.round(centerX * standardVec.x + centerX);
+            const screenY = Math.round(-centerY * standardVec.y + centerY);
+            return { x: screenX, y: screenY };
+        },
+        // 场景
+        initScene: function() {
+            scene = new THREE.Scene();
+            // scene.background = new THREE.Color(0xa0a0a0);
+        },
+        // 相机
+        initCamera: function() {
+            camera = new THREE.PerspectiveCamera(45, this.$el.scrollWidth / this.$el.scrollHeight, 0.1, 10000);
+            camera.position.set(50, 60, 50);
+        },
+        // 坐标轴
+        initAxesHelper: function() {
+            const axesHelper = new THREE.AxesHelper(150);
+            scene.add(axesHelper);
+            axesHelper.position.set(0, 0, 0);
+        },
+        // 渲染器
+        initRender: function() {
+            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+            // renderer.setClearAlpha(0);
+            renderer.setSize(this.$el.scrollWidth, this.$el.scrollHeight);
+            this.$el.append(renderer.domElement);
+        },
+        // 灯光
+        initLight: function() {
+            // let light = new THREE.PointLight(0xffffff, 2);
+            let light = new THREE.AmbientLight(0xffffff, 4);
+            // light.position.set(50, 50, 50);
+            scene.add(light);
+        },
+        // 控制器
+        initControls: function() {
+            controls = new OrbitControls(camera, renderer.domElement);
+            controls.addEventListener("change", () => {
+                this.setEveryHTML();
+            });
+        },
+        // 初始化一个风机动画
+        initFanAnimate: function(fan1, fan2, fan3) {
+            let fanAnimateObj = {
+                speed: 0.05,
+                fan1: fan1,
+                fan2: fan2,
+                fan3: fan3,
+            };
+            let fanAnimateFunction = function() {
+                fanAnimateObj.fan1.rotateZ(fanAnimateObj.speed);
+                fanAnimateObj.fan2.rotateZ(fanAnimateObj.speed);
+                fanAnimateObj.fan3.rotateZ(fanAnimateObj.speed);
+                fanAnimateObj.animateId = window.requestAnimationFrame(fanAnimateFunction);
+            };
+            fanAnimateObj.stop = function() {
+                window.cancelAnimationFrame(fanAnimateObj.animateId);
+            };
+            fanAnimateObj.start = function() {
                 fanAnimateFunction();
-                fanAnimates.push(fanAnimateObj);
-                return fanAnimateObj;
-            },
-            // 清空风机动画
-            clearFanAnimate: function () {
-                while (fanAnimates.length > 0) {
-                    let fanAnimateObj = fanAnimates.shift();
-                    fanAnimateObj.stop();
-                }
-            },
-            // 内容
-            initContent: function () {
-                // 加载3D地面
-                let loaderGround = new GLTFLoader();/*实例化加载器*/
-                loaderGround.load("static/3d/group/ng.gltf", (gltf) => {
+            };
+            fanAnimateFunction();
+            fanAnimates.push(fanAnimateObj);
+            return fanAnimateObj;
+        },
+        // 清空风机动画
+        clearFanAnimate: function() {
+            while (fanAnimates.length > 0) {
+                let fanAnimateObj = fanAnimates.shift();
+                fanAnimateObj.stop();
+            }
+        },
+        // 内容
+        initContent: function() {
+            // 加载3D地面
+            let loaderGround = new GLTFLoader(); /*实例化加载器*/
+            loaderGround.load(
+                "static/3d/group/ng.gltf",
+                (gltf) => {
                     gltf.scene.position.set(5, 10, 0);
                     scene.add(gltf.scene);
                     // 找到一个大风扇的 Object3D
                     let fanBig1_1 = gltf.scene.children[0].getObjectByName("Box707");
                     let fanBig1_2 = gltf.scene.children[0].getObjectByName("Box708");
-                    let fanBig1_3 = gltf.scene.children[0].getObjectByName("Box709");
+                    let fanBig1_3 = gltf.scene.children[0].getObjectByName("Box709"); // 组840
                     let fanBig2_1 = gltf.scene.children[0].getObjectByName("Box719");
                     let fanBig2_2 = gltf.scene.children[0].getObjectByName("Box720");
-                    let fanBig2_3 = gltf.scene.children[0].getObjectByName("Box721");
+                    let fanBig2_3 = gltf.scene.children[0].getObjectByName("Box721"); // 组857
                     let fanBig3_1 = gltf.scene.children[0].getObjectByName("Box699");
                     let fanBig3_2 = gltf.scene.children[0].getObjectByName("Box701");
-                    let fanBig3_3 = gltf.scene.children[0].getObjectByName("Box702");
+                    let fanBig3_3 = gltf.scene.children[0].getObjectByName("Box702"); // 组838
                     this.initFanAnimate(fanBig1_1, fanBig1_2, fanBig1_3);
                     this.initFanAnimate(fanBig2_1, fanBig2_2, fanBig2_3);
                     this.initFanAnimate(fanBig3_1, fanBig3_2, fanBig3_3);
-                    let mixer = new THREE.AnimationMixer(gltf.scene.children[0]); 
-                    mixer.clipAction(gltf.animations[0]).setDuration(3).play();
+                    let mixer = new THREE.AnimationMixer(gltf.scene.children[0]);
+                    mixer
+                        .clipAction(gltf.animations[0])
+                        .setDuration(3)
+                        .play();
                     mixers.push(mixer);
-                    console.log(gltf)
-                }, (xhr) => {
+                    console.log(gltf);
+                },
+                (xhr) => {
                     if (xhr.loaded == xhr.total) {
                         this.$emit("when");
                         setTimeout(() => {
                             this.$refs.pageLoading.hide();
                         }, 3000);
                     }
-                }, function (error) {
-                    console.error('load error!'+error.getWebGLErrorMessage());
-                })
-            },
-            // 创建一个圆柱
-            initCylinderGeometry: function () {
-                let geometry = new THREE.CylinderGeometry(4, 4, 4, 64);
-                let materials = [
+                },
+                function(error) {
+                    console.error("load error!" + error.getWebGLErrorMessage());
+                }
+            );
+        },
+        // 创建一个圆柱
+        initCylinderGeometry: function(position) {
+            let geometry = new THREE.CylinderGeometry(2, 2, 7, 64);
+            //加载纹理
+            let texture = new THREE.TextureLoader().load("static/3d/beam-texture.png");
+            texture.wrapS = texture.wrapT = THREE.RepeatWrapping; //每个都重复
+            texture.repeat.set(1, 1);
+            texture.needsUpdate = true;
+            let materials = [
                 //圆柱侧面材质，使用纹理贴图
                 new THREE.MeshBasicMaterial({
-                    color: 0xffff00,
+                    map: texture,
                     side: THREE.DoubleSide,
-                    transparent: true
+                    transparent: true,
                 }),
                 //圆柱顶材质
                 new THREE.MeshBasicMaterial({
                     transparent: true,
                     opacity: 0,
-                    side: THREE.DoubleSide
+                    side: THREE.DoubleSide,
                 }),
                 //圆柱底材质
                 new THREE.MeshBasicMaterial({
                     transparent: true,
                     opacity: 0,
-                    side: THREE.DoubleSide
-                })
-                ];
-                let cylinder = new THREE.Mesh(geometry, materials);
-                scene.add(cylinder);
-            },
-            // 点击事件
-            clickEvent: function (event) {
-                event.preventDefault();
-                let vector = new THREE.Vector3(
-                    (event.clientX / window.innerWidth) * 2 - 1,
-                    -(event.clientY / window.innerHeight) * 2 + 1,
-                    0.5
-                );
-                vector = vector.unproject(camera);
-                let raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
-                let intersects = raycaster.intersectObjects(scene.children,true);
-                console.log(intersects)
-                // this.initCylinderGeometry();
-            },
-            // 初始化
-            initThree: function () {
-                this.initScene();
-                // this.initAxesHelper();
-                this.initCamera();
-                this.initRender();
-                this.initLight();
-                this.initControls();
-                this.initContent();
-                renderer.setAnimationLoop(this.animate);
-            },
-            // 动画
-            animate: function () {
-                var delta = clock.getDelta();
-                for ( var i = 0; i < mixers.length; i ++ ) { // 重复播放动画
-                    mixers[ i ].update( delta );
+                    side: THREE.DoubleSide,
+                }),
+            ];
+            let cylinder = new THREE.Mesh(geometry, materials);
+            cylinder.position.set(position.x + 5.75, position.y + 8, position.z);
+            scene.add(cylinder);
+        },
+        // 判断时候是可点击对象 返回null 或object
+        getClickObject: function(intersects) {
+            const names = ["组840", "组857", "组838"];
+            const x = true;
+            let obj = null;
+            for (let intersect of intersects) {
+                let temObj = intersect.object;
+                while (x) {
+                    if (names.indexOf(temObj.name) >= 0) {
+                        obj = temObj;
+                        break;
+                    }
+                    if (temObj.parent) {
+                        temObj = temObj.parent;
+                        continue;
+                    }
+                    break;
                 }
-                renderer.render(scene, camera);
-            },
-        };
+            }
+            return obj;
+        },
+        // 鼠标浮动事件 // 这招不太行 鼠标每次移动都会发射射线 导致动画卡顿
+        mοusemοveEvent: function(event) {
+            event.preventDefault();
+            let vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
+            vector = vector.unproject(camera);
+            let raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
+            let intersects = raycaster.intersectObjects(scene.children, true);
+            let obj = this.getClickObject(intersects);
+            if (obj) {
+                this.pointer = true;
+            } else {
+                this.pointer = false;
+            }
+        },
+        // 设置每一个html的位置
+        setEveryHTML: function() {
+            this.htmlLayer.forEach(value => {
+                if (value.show && value.position) {
+                    const screen = this.vector3ToScreen(value.position);
+                    value.x = screen.x + value.ox;
+                    value.y = screen.y + value.oy;
+                }
+            });
+        },
+        // 显示风机弹出层
+        showFanInfo: function(position) {
+            this.htmlLayer[0].position = {
+                x: position.x,
+                y: position.y,
+                z: position.z,
+            };
+            this.htmlLayer[0].show = true;
+            this.setEveryHTML();
+        },
+        // 点击事件
+        clickEvent: function(event) {
+            event.preventDefault();
+            let vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
+            vector = vector.unproject(camera);
+            let raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
+            let intersects = raycaster.intersectObjects(scene.children, true);
+            console.log(intersects);
+            // 找是否是可点击对象
+            let obj = this.getClickObject(intersects);
+            if (obj) {
+                console.log(obj);
+                this.initCylinderGeometry(obj.position);
+                this.showFanInfo(obj.position);
+            }
+        },
+        // 初始化
+        initThree: function() {
+            this.initScene();
+            // this.initAxesHelper();
+            this.initCamera();
+            this.initRender();
+            this.initLight();
+            this.initControls();
+            this.initContent();
+            renderer.setAnimationLoop(this.animate);
+        },
+        // 动画
+        animate: function() {
+            var delta = clock.getDelta();
+            for (var i = 0; i < mixers.length; i++) {
+                // 重复播放动画
+                mixers[i].update(delta);
+            }
+            renderer.render(scene, camera);
+        },
     },
-    // 函数
-    methods: {},
     // 生命周期钩子
     beforeCreate() {
         // 创建前
@@ -224,5 +330,26 @@ export default {
 
 <style lang="less" scoped>
 .three-model {
+    position: relative;
+
+    .three-html-layer {
+        position: absolute;
+        width: 0;
+        height: 0;
+        top: 0;
+        left: 0;
+
+        .three-html-dom {
+            position: absolute;
+        }
+
+        .fan-info {
+            width: 149px;
+            height: 288px;
+            background: #1a1f2fd8;
+            border: 1px solid #05bb4c;
+            box-shadow: 0px 8px 17px 1px #05bb4c66;
+        }
+    }
 }
 </style>

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

@@ -738,7 +738,7 @@ export default {
 
         .value {
           font-size: 12px;
-          padding-right: 0.741vh;
+          padding-right: 16px;
         }
       }
 

src/views/WindSite/pages/Map.vue

@@ -218,6 +218,9 @@ export default {
   methods: {
     when: function() {
       let jsonObj = dataService.get("arcgis-nx-fc1");
+      jsonObj.forEach(item => {
+        item.attributes.state = "dj";
+      });
       let lineJsonObj = dataService.get("arcgis-nx-fc1-line");
       this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
     },

src/views/WindSite/pages/Map1.vue

@@ -57,7 +57,11 @@
             </div>
         </div>
         <div class="panel-body">
-            <arcgis @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap"></arcgis>
+            <arcgis @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap">
+                <template v-slot:test>
+                    <img :src="tempImg" style="width: 800px; height: 700px;">
+                </template>
+            </arcgis>
         </div>
     </div>
 </template>
@@ -135,12 +139,14 @@ export default {
                 tilt: 65, // 俯视角
                 scale: 15000,
             },
+            tempImg: require("@assets/temp1.png"),
         };
     },
     // 函数
     methods: {
         when: function () {
-           this.$refs.arcgis.addImagePoint([106.60768412800003, 37.806672373000006], "@assets/temp1.png", "830px", "707px");
+        //    this.$refs.arcgis.addImagePoint([106.60768412800003, 37.806672373000006], "@assets/temp1.png", "160px", "140px");
+           this.$refs.arcgis.addHtmlPoint([106.60768412800003, 37.806672373000006], "test",  400, 350);
         },
         clickMap: function (info) {
             console.log(info)

src/views/layout/Menu.vue

@@ -17,7 +17,7 @@
       </li>
     </ul>
   </div>
-  <div class="sub-menu" v-show="isShowSubMenu">
+  <div class="sub-menu" v-show="isShowSubMenu" @mouseleave="subMenuHide">
     <ul class="menu-list">
       <li class="menu-item" v-for="(menu, index) of subMenu" @click="subclick(index)" :key="menu" :class="{ active: subIndex == index }">
         <router-link :to="menu.path">
@@ -396,6 +396,11 @@ export default {
       }
       this.subMenu = children;
     },
+    subMenuHide() {
+      this.isShowSubMenu = false;
+      this.parentIndex = null;
+      this.subMenu = [];
+    },
     subclick(index) {
       this.activeIndex = this.parentIndex;
       this.subIndex = index;