V1.0.14版本更新

src/assets/styles/el-override/el-input.less

@@ -1,6 +1,6 @@
 @picker-bg-color: fade(#121d1c, 95);
 
-.main-body {
+body {
   .el-input__inner {
     background: fade(@gray, 20);
     color: @gray-l;
@@ -98,6 +98,42 @@
     }
   }
 
+  .el-checkbox {
+    height: 33px;
+    line-height: 33px;
+    color: @gray-l;
+
+    &.is-bordered {
+      height: 33px;
+      line-height: 33px;
+      padding: 0px 20px;
+      border-color: @gray;
+
+      &.is-checked {
+        border-color: @green;
+      }
+    }
+
+    .el-checkbox__inner {
+      background: fade(@gray, 20);
+      border-color: fade(@gray, 40);
+    }
+
+    .el-checkbox__input.is-checked + .el-checkbox__label {
+      color: @green;
+    }
+
+    .el-checkbox__input.is-checked .el-checkbox__inner,
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+      background-color: @green;
+      border-color: @green;
+    }
+
+    .el-checkbox__input.is-focus .el-checkbox__inner {
+      border-color: @green;
+    }
+  }
+
   // 树组件
   .el-tree {
     color: @gray-l;
@@ -108,6 +144,10 @@
       border-color: @gray;
     }
 
+    .el-tree-node:focus > .el-tree-node__content {
+      background: transparent;
+    }
+
     .el-checkbox__input.is-disabled .el-checkbox__inner {
       background: @gray;
       border-color: @gray;

src/components/arcgis/arcgis.vue

@@ -1,12 +1,15 @@
 <template>
     <div class="arcgis" :class="{'pointer': pointer}">
         <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>
+        <teleport to=".esri-ui" v-if="teleport">
+            <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; transform: scale('+marker.scale+')'">
+                    <slot :name="marker.slot"></slot>
+                </div>
             </div>
-        </div>
+        </teleport>
+        
     </div>
 </template>
 
@@ -106,9 +109,10 @@
                         img: require("@assets/map/fan/white.png")
                     },
                 ],
-                syzImg: require("@assets/temp.png"),
+                syzImg: require("@assets/png/booster-station.png"),
                 markers: [],
                 pointer: false,
+                teleport: false, // 是否进行传送
             }
         },
         // 函数
@@ -179,6 +183,7 @@
             },
             when: function() {
                 // 当地图加载完成
+                this.teleport = true; // 传送
                 point_graphicsLayer = new GraphicsLayer({
                     graphics: []
                 });
@@ -239,7 +244,9 @@
                         let screenPoint = view.toScreen(graphics.geometry);
                         marker.x = screenPoint.x - marker.ox;
                         marker.y = screenPoint.y - marker.oy;
-                        if (evt.height < 0.045) { 
+                        marker.scale =  0.0272 / evt.height;
+                        // console.log(evt.height)
+                        if (evt.height < 0.295) { 
                             if (!marker.show) {
                                 marker.show = true;
                                 graphics.symbol = new SimpleMarkerSymbol({
@@ -307,6 +314,7 @@
                     oy: oy,
                     x: screenPoint.x - ox,
                     y: screenPoint.y - oy,
+                    scale: 1,
                     show: true,
                 };
                 this.markers.push(marker);

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

@@ -88,23 +88,23 @@ export default {
       default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
     },
   },
-  data () {
+  data() {
     return {
       id: "",
       chart: null,
     };
   },
   computed: {
-    legend () {
+    legend() {
       let data = this.bardata.legend;
       data.push(this.units[0]);
       return data;
     },
-    areaChartData () {
+    areaChartData() {
       let data = [];
       for (var i = 0; i < this.areaData.length; i++) {
         let item = this.areaData[i];
-        var color = (item.color ? item.color : partten.getColor(item.state));
+        var color = item.color ? item.color : partten.getColor(item.state);
         data.push({
           name: item.name,
           value: [item.start, item.end, item.end - item.start],
@@ -120,7 +120,7 @@ export default {
     },
   },
   methods: {
-    renderItem (params, api) {
+    renderItem(params, api) {
       var start = api.coord([api.value(0)]);
       var end = api.coord([api.value(1)]);
       var height = api.size([0, 1])[1];
@@ -149,7 +149,7 @@ export default {
         }
       );
     },
-    initChart () {
+    initChart() {
       let that = this;
       let chart = echarts.init(this.$el);
 
@@ -203,7 +203,7 @@ export default {
             min: 0,
             axisLabel: {
               show: false,
-              formatter: function (val) {
+              formatter: function(val) {
                 return Math.max(0, val - 0) + " ms";
               },
             },
@@ -254,7 +254,7 @@ export default {
             },
           },
           {
-            data: [(this.areaData && this.areaData[0] && this.areaData[0].name || "")],
+            data: [(this.areaData && this.areaData[0] && this.areaData[0].name) || ""],
             axisLabel: { show: false },
           },
         ],
@@ -271,11 +271,11 @@ export default {
             smooth: true, //平滑展示
             yAxisIndex: 0,
             lineStyle: {
-              color: this.color[index]
+              color: this.color[index],
             },
             itemStyle: {
-              color: this.color[index]
-            }
+              color: this.color[index],
+            },
           });
         });
       }
@@ -308,7 +308,7 @@ export default {
           },
           tooltip: {
             show: true,
-            formatter: function (params) {
+            formatter: function(params) {
               return params.marker + params.name + ": " + params.value[2] + "s";
             },
           },
@@ -322,7 +322,7 @@ export default {
 
       chart.setOption(option);
 
-      chart.on("click", function (e, p) {
+      chart.on("click", function(e, p) {
         if (e.seriesType == "custom") {
           that.$emit("areaClick", { data: e.data.exData });
         }
@@ -332,17 +332,17 @@ export default {
   emits: {
     areaClick: null,
   },
-  created () {
+  created() {
     this.id = "pie-chart-" + util.newGUID();
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
       this.initChart();
     });
   },
-  updated () {
+  updated() {
     this.$nextTick(() => {
       this.initChart();
     });

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

@@ -0,0 +1,468 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "multiple-bar-chart",
+  componentName: "multiple-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "800px",
+    },
+    lineData: {
+      type: Array,
+      default: () => [
+        {
+          text: "日发电量",
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+            {
+              text: "5",
+              value: 3,
+            },
+            {
+              text: "6",
+              value: 3,
+            },
+            {
+              text: "7",
+              value: 3,
+            },
+            {
+              text: "8",
+              value: 3,
+            },
+            {
+              text: "9",
+              value: 3,
+            },
+            {
+              text: "10",
+              value: 3,
+            },
+            {
+              text: "11",
+              value: 3,
+            },
+            {
+              text: "12",
+              value: 3,
+            },
+            {
+              text: "13",
+              value: 3,
+            },
+            {
+              text: "14",
+              value: 3,
+            },
+            {
+              text: "15",
+              value: 3,
+            },
+            {
+              text: "16",
+              value: 3,
+            },
+          ],
+        },
+        {
+          text: "上网电量",
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+            {
+              text: "5",
+              value: 4,
+            },
+            {
+              text: "6",
+              value: 5,
+            },
+            {
+              text: "7",
+              value: 6,
+            },
+            {
+              text: "8",
+              value: 7,
+            },
+            {
+              text: "9",
+              value: 8,
+            },
+            {
+              text: "10",
+              value: 7,
+            },
+            {
+              text: "11",
+              value: 9,
+            },
+            {
+              text: "12",
+              value: 2,
+            },
+            {
+              text: "13",
+              value: 3,
+            },
+            {
+              text: "14",
+              value: 5,
+            },
+            {
+              text: "15",
+              value: 12,
+            },
+            {
+              text: "16",
+              value: 11,
+            },
+          ],
+        },
+      ],
+    },
+    areaData: {
+      type: Array,
+      default: () => [
+        {
+          name: "1",
+          start: 0,
+          end: 100,
+          state: "green",
+        },
+        {
+          name: "1",
+          start: 100,
+          end: 200,
+          state: "red",
+        },
+        {
+          name: "1",
+          start: 200,
+          end: 300,
+          state: "yellow",
+        },
+        {
+          name: "2",
+          start: 300,
+          end: 800,
+          state: "green",
+        },
+        {
+          name: "3",
+          start: 800,
+          end: 9000,
+          state: "green",
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["健康趋势", "风机健康状态数量"],
+    },
+    // 显示 legend
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {
+    legend() {
+      let data = [];
+      this.lineData.forEach((value, index) => {
+        data.push(value.text);
+      });
+      return data;
+    },
+    xAxisData() {
+      let data = [];
+      if (this.lineData.length > 0)
+        this.lineData[0].value.forEach((value, index) => {
+          data.push(value.text);
+        });
+      return data;
+    },
+    areaChartData() {
+      let data = [];
+      for (var i = 0; i < this.areaData.length; i++) {
+        let item = this.areaData[i];
+        var color = item.state;
+        data.push({
+          name: item.name,
+          value: [item.start, item.end, item.end - item.start],
+          itemStyle: {
+            normal: {
+              color: color,
+            },
+          },
+          exData: item,
+        });
+      }
+      return data;
+    },
+    areaMax() {
+      let max = 0;
+      this.areaData.forEach((value) => {
+        if (max < value.end) max = value.end;
+      });
+      return max;
+    },
+  },
+  methods: {
+    renderItem(params, api) {
+      var start = api.coord([api.value(0)]);
+      var end = api.coord([api.value(1)]);
+      var height = api.size([0, 1])[1];
+
+      var rectShape = echarts.graphic.clipRectByRect(
+        {
+          x: start[0],
+          y: start[1] - height / 2,
+          width: end[0] - start[0],
+          height: height,
+        },
+        {
+          x: params.coordSys.x,
+          y: params.coordSys.y,
+          width: params.coordSys.width,
+          height: params.coordSys.height,
+        }
+      );
+
+      return (
+        rectShape && {
+          type: "rect",
+          transition: ["shape"],
+          shape: rectShape,
+          style: api.style(),
+        }
+      );
+    },
+    initChart() {
+      let that = this;
+      let chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        grid: {
+          left: 40,
+          right: 40,
+          bottom: 40,
+          top: 32,
+          containLabel: true,
+        },
+        tooltip: {
+          show: true,
+          trigger: "item",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 120,
+          icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              color: partten.getColor("gray"),
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            data: this.xAxisData,
+          },
+          {
+            min: 0,
+            max: this.areaMax,
+            axisLabel: {
+              show: false,
+              formatter: function(val) {
+                return Math.max(0, val - 0) + " ms";
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: this.units[0],
+            axisLabel: {
+              formatter: "{value} ",
+              color: partten.getColor("gray"),
+            },
+            axisLine: {
+              type: "dashed",
+              lineStyle: {
+                color: partten.getColor("gray"),
+              },
+              width: 5,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                dashOffset: 10,
+                color: partten.getColor("gray") + 80,
+              },
+            },
+          },
+          {
+            data: [this.areaData[0].name],
+            axisLabel: { show: false },
+          },
+        ],
+        series: [],
+      };
+
+      // line data
+      if (this.lineData.length > 0) {
+        this.lineData.forEach((value, index) => {
+          option.series.push({
+            name: value.text,
+            type: "line",
+            data: value.value,
+            smooth: true, //平滑展示
+            yAxisIndex: 0,
+            // lineStyle: {
+            //   color: partten.getColor("green"),
+            // },
+            // itemStyle: {
+            //   color: partten.getColor("green"),
+            // },
+          });
+        });
+      }
+
+      // 区域
+      if (this.areaData && this.areaData.length > 0) {
+        option.series.push({
+          type: "custom",
+          renderItem: this.renderItem,
+          yAxisIndex: 1,
+          xAxisIndex: 1,
+          itemStyle: {
+            opacity: 0.2,
+          },
+          tooltip: {
+            show: true,
+            formatter: function(params) {
+              return params.marker + params.name + ": " + params.value[2] + "s";
+            },
+          },
+          encode: {
+            x: [1, 2],
+            y: 0,
+          },
+          data: this.areaChartData,
+        });
+      }
+
+      chart.setOption(option);
+
+      chart.on("click", function(e, p) {
+        if (e.seriesType == "custom") {
+          that.$emit("areaClick", { data: e.data.exData });
+        }
+      });
+    },
+  },
+  emits: {
+    areaClick: null,
+  },
+  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();
+    });
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

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

@@ -160,40 +160,40 @@ export default {
               width: 1,
             },
           },
-          markPoint:{},
-            // index == 0
-            //   ? {
-            //       data: [
-            //         {
-            //           type: "average",
-            //           name: "保证功率",
-            //           symbolSize: 0,
-            //           label: {
-            //             offset: [0, -40],
-            //             formatter: function(param) {
-            //               return `{title|${param.name}}` + "\n" + `{value| ${param.value}${that.unit}}`;
-            //             },
-            //             backgroundColor: partten.getColor("green") + 33,
-            //             borderColor: partten.getColor("green"),
-            //             borderWidth: 0.5,
-            //             borderRadius: 2,
-            //             padding: 8,
-            //             rich: {
-            //               title: {
-            //                 color: partten.getColor("green"),
-            //                 fontSize: 12,
-            //               },
-            //               value: {
-            //                 color: "#fff",
-            //                 fontSize: 16,
-            //                 padding: [12, 0, 0, -4],
-            //               },
-            //             },
-            //           },
-            //         },
-            //       ],
-            //     }
-            //   : {},
+          markPoint: {},
+          // index == 0
+          //   ? {
+          //       data: [
+          //         {
+          //           type: "average",
+          //           name: "保证功率",
+          //           symbolSize: 0,
+          //           label: {
+          //             offset: [0, -40],
+          //             formatter: function(param) {
+          //               return `{title|${param.name}}` + "\n" + `{value| ${param.value}${that.unit}}`;
+          //             },
+          //             backgroundColor: partten.getColor("green") + 33,
+          //             borderColor: partten.getColor("green"),
+          //             borderWidth: 0.5,
+          //             borderRadius: 2,
+          //             padding: 8,
+          //             rich: {
+          //               title: {
+          //                 color: partten.getColor("green"),
+          //                 fontSize: 12,
+          //               },
+          //               value: {
+          //                 color: "#fff",
+          //                 fontSize: 16,
+          //                 padding: [12, 0, 0, -4],
+          //               },
+          //             },
+          //           },
+          //         },
+          //       ],
+          //     }
+          //   : {},
           yAxisIndex: value.yAxisIndex,
           data: value.value.map((t) => {
             return t.value;

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

@@ -0,0 +1,328 @@
+<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: "normal-line-chart",
+  componentName: "normal-line-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+            {
+              text: "5",
+              value: 3,
+            },
+            {
+              text: "6",
+              value: 3,
+            },
+            {
+              text: "7",
+              value: 3,
+            },
+            {
+              text: "8",
+              value: 3,
+            },
+            {
+              text: "9",
+              value: 3,
+            },
+            {
+              text: "10",
+              value: 3,
+            },
+            {
+              text: "11",
+              value: 3,
+            },
+            {
+              text: "12",
+              value: 3,
+            },
+            {
+              text: "13",
+              value: 3,
+            },
+            {
+              text: "14",
+              value: 3,
+            },
+            {
+              text: "15",
+              value: 3,
+            },
+            {
+              text: "16",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+          ],
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(MW)"],
+    },
+    showLegend: {
+      type: Boolean,
+      default: false,
+    },
+    smooth: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  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 = [];
+
+      this.list.forEach((value, index) => {
+        result.push({
+          name: value.title,
+          type: "line",
+          smooth: this.smooth,
+          zlevel: index,
+          lineStyle: {
+            normal: {
+              color: this.color[index],
+              width: 1,
+            },
+          },
+          yAxisIndex: value.yAxisIndex,
+          data: value.value.map((t) => {
+            return t.value;
+          }),
+        });
+      });
+
+      return result;
+    },
+  },
+  methods: {
+    initChart() {
+      const chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "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: 32,
+          left: 40,
+          right: 40,
+          bottom: 80,
+        },
+        dataZoom: [
+          {
+            type: "inside",
+            start: 0,
+            end: 100,
+          },
+          {
+            start: 0,
+            end: 100,
+            height: 40,
+            bottom: 8,
+            backgroundColor: "transparent",
+            // handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
+            handleStyle: {
+              color: partten.getColor("yellow"),
+            },
+            moveHandleSize: 0,
+            dataBackground: {
+              lineStyle: {
+                color: partten.getColor("gray"),
+              },
+              areaStyle: {
+                color: partten.getColor("gray"),
+              },
+            },
+            selectedDataBackground: {
+              lineStyle: {
+                color: partten.getColor("yellow"),
+              },
+              areaStyle: {
+                color: partten.getColor("yellow"),
+              },
+            },
+            fillerColor: "transparent",
+            textStyle: {
+              color: partten.getColor("grayl"),
+            },
+            borderColor: partten.getColor("gray"),
+            brushSelect: false,
+          },
+        ],
+        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/radar/normal-radar-chart.vue

@@ -82,22 +82,27 @@ export default {
   methods: {
     initChart() {
       let chart = echarts.init(this.$el);
+
       let maxValue = -1;
-      this.value[0].data.forEach((item, index) => {
-        item.value.forEach((value) => {
-          if (value > maxValue) {
-            maxValue = value;
-          }
+
+      if (this.value.length > 0)
+        this.value[0].data.forEach((item, index) => {
+          item.value.forEach((value) => {
+            if (value > maxValue) {
+              maxValue = value;
+            }
+          });
+          item.areaStyle = this.lineStyles[index % this.lineStyles.length].areaStyle;
+          item.lineStyle = this.lineStyles[index % this.lineStyles.length].lineStyle;
+          item.itemStyle = this.lineStyles[index % this.lineStyles.length].itemStyle;
         });
-        item.areaStyle = this.lineStyles[index % this.lineStyles.length].areaStyle;
-        item.lineStyle = this.lineStyles[index % this.lineStyles.length].lineStyle;
-        item.itemStyle = this.lineStyles[index % this.lineStyles.length].itemStyle;
-      });
       maxValue *= 1.5;
+
       let indicator = [];
-      this.value[0].indicator.forEach((item) => {
-        indicator.push({ name: item, max: maxValue });
-      });
+      if (this.value.length > 0)
+        this.value[0].indicator.forEach((item) => {
+          indicator.push({ name: item, max: maxValue });
+        });
 
       let option = {
         grid: {

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

@@ -69,21 +69,24 @@ export default {
       let chart = echarts.init(this.$el);
 
       let maxValue = -1;
-      this.value.data.forEach((item, index) => {
-        item.value.forEach((value) => {
-          if (value > maxValue) {
-            maxValue = value;
-          }
+      if (this.value.data)
+        this.value.data.forEach((item, index) => {
+          item.value.forEach((value) => {
+            if (value > maxValue) {
+              maxValue = value;
+            }
+          });
+          item.areaStyle = this.lineStyles[index % this.lineStyles.length].areaStyle;
+          item.lineStyle = this.lineStyles[index % this.lineStyles.length].lineStyle;
+          item.itemStyle = this.lineStyles[index % this.lineStyles.length].itemStyle;
         });
-        item.areaStyle = this.lineStyles[index % this.lineStyles.length].areaStyle;
-        item.lineStyle = this.lineStyles[index % this.lineStyles.length].lineStyle;
-        item.itemStyle = this.lineStyles[index % this.lineStyles.length].itemStyle;
-      });
       maxValue *= 1.5;
+
       let indicator = [];
-      this.value.indicator.forEach((item) => {
-        indicator.push({ name: item, max: maxValue });
-      });
+      if (this.value.indicator)
+        this.value.indicator.forEach((item) => {
+          indicator.push({ name: item, max: maxValue });
+        });
 
       let option = {
         grid: {
@@ -92,6 +95,15 @@ export default {
           bottom: 0,
           top: 0,
         },
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+        },
         radar: [
           // 最低层 90
           {
@@ -100,7 +112,6 @@ export default {
             splitNumber: 1,
             nameGap: "10",
             name: {
-              show: false,
               textStyle: {
                 color: partten.getColor("gray") + 99,
                 fontSize: 12,

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

@@ -122,15 +122,14 @@ export default {
     a {
       text-decoration: none;
       color: @gray;
-      margin-right: 0.278vh;
-      border: 0.093vh solid @darkgray;
-      border-radius: 0.185vh;
-      width: 12.5vh;
-      // height: 2.13vh;
-      // line-height: 2.13vh;
-      padding: 0.3704vh 0;
+      width: 105px;
+      height: 23px;
+      line-height: 23px;
+      font-size: 12px;
       text-align: center;
-      font-size: @fontsize-s;
+      margin-right: 4px;
+      border: 1px solid @darkgray;
+      border-radius: 2px;
 
       &:last-child {
         margin-right: 0;

src/components/coms/table/table.vue

@@ -141,14 +141,14 @@ export default {
   },
   // 函数
   methods: {
-    clearCheckBox(time){
-      this.$nextTick(()=>{
-        setTimeout(()=>{
+    clearCheckBox(time) {
+      this.$nextTick(() => {
+        setTimeout(() => {
           const domArray = document.querySelectorAll(".curCheckBox");
-          for(let i=0;i<domArray.length;i++){
-            domArray[i].checked=false;
+          for (let i = 0; i < domArray.length; i++) {
+            domArray[i].checked = false;
           }
-        },(time || 300));
+        }, time || 300);
       });
     },
     onClick(col, data) {
@@ -212,5 +212,4 @@ export default {
 };
 </script>
 
-<style lang="less">
-</style>
+<style lang="less"></style>

src/views/Demo.vue

@@ -4,6 +4,12 @@
   <!-- 图表 -->
   <el-scrollbar v-if="currTab == 1" style="height:85%;">
     <h2>图表</h2>
+    <h2>07-12新增</h2>
+    <h3>折现:  zoom-line-chart</h3>
+    <zoom-line-chart :height="'250px'" :smooth="false" :showLegend="true" />
+
+    <h3>组合:  area-line-chart</h3>
+    <area-line-chart @areaClick="areaBarChartClick" :showLegend="true" />
 
     <h2>07-08新增</h2>
     <h3>组合: 时间区域 area-bar-chart</h3>
@@ -181,6 +187,7 @@
     </div>
   </el-scrollbar>
 
+  <!-- Table 组件 -->
   <el-scrollbar v-if="currTab == 3" style="height:85%;">
     <h2>07-09更新</h2>
     <h3>table-2</h3>
@@ -239,6 +246,7 @@
     </el-table>
   </el-scrollbar>
 
+  <!--  icon -->
   <el-scrollbar v-if="currTab == 4" style="height:85%;">
     <i class="svg-icon svg-icon-sm mg-r-16">
       <svg-icon :svgid="'svg-wind-site'" />
@@ -250,6 +258,17 @@
       <svg-icon :svgid="'svg-wind-site'" />
     </i>
   </el-scrollbar>
+
+  <!-- el-compoments -->
+
+  <el-scrollbar v-if="currTab == 5" style="height:85%;">
+    <el-button type="text" @click="dialogTableVisible = true">打开 Dialog</el-button>
+    <el-tree :data="elTreeData.data" :props="elTreeData.defaultProps" @node-click="handleNodeClick"></el-tree>
+  </el-scrollbar>
+
+  <el-dialog custom-class="modal" title="收货地址" v-model="dialogTableVisible">
+    <el-tree :data="elTreeData.data" :props="elTreeData.defaultProps" @node-click="handleNodeClick"></el-tree>
+  </el-dialog>
 </template>
 
 <script>
@@ -295,6 +314,8 @@ 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";
+import ZoomLineChart from "../components/chart/line/zoom-line-chart.vue";
+import AreaLineChart from '../components/chart/combination/area-line-chart.vue';
 
 export default {
   components: {
@@ -340,6 +361,8 @@ export default {
     MultipleBarLineChart,
     Table2,
     multiArrowLineChart,
+    ZoomLineChart,
+    AreaLineChart,
   },
   methods: {
     select(data) {
@@ -416,6 +439,10 @@ export default {
           id: "4",
           text: "图标",
         },
+        {
+          id: "5",
+          text: "element 组件",
+        },
       ],
       tableData: {
         column: [
@@ -1167,6 +1194,70 @@ export default {
           zip: 200333,
         },
       ],
+      elTreeData: {
+        data: [
+          {
+            label: "一级 1",
+            children: [
+              {
+                label: "二级 1-1",
+                children: [
+                  {
+                    label: "三级 1-1-1",
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            label: "一级 2",
+            children: [
+              {
+                label: "二级 2-1",
+                children: [
+                  {
+                    label: "三级 2-1-1",
+                  },
+                ],
+              },
+              {
+                label: "二级 2-2",
+                children: [
+                  {
+                    label: "三级 2-2-1",
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            label: "一级 3",
+            children: [
+              {
+                label: "二级 3-1",
+                children: [
+                  {
+                    label: "三级 3-1-1",
+                  },
+                ],
+              },
+              {
+                label: "二级 3-2",
+                children: [
+                  {
+                    label: "三级 3-2-1",
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        defaultProps: {
+          children: "children",
+          label: "label",
+        },
+      },
+      dialogTableVisible: false,
     };
   },
   created() {

src/views/HealthControl/Health10.vue

@@ -85,31 +85,30 @@
     </el-row>
     <div class="fc-info mg-b-16">
       <panel :title="'曲线'" :showLine="false">
-        <normal-line-chart height="19vh" :list="line1.value" :units="line1.units" />
-        <stright-line-chart height="15vh" :list="line2.value" :units="line2.units" />
+        <zoom-line-chart height="35vh" :list="line1.value" :units="line1.units" />
       </panel>
     </div>
   </div>
 </template>
 
 <script>
-import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
+// import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
 // import SvgIcon from "../../components/coms/icon/svg-icon.vue";SvgIcon,
 import Panel from "../../components/coms/panel/panel.vue";
 import Table from "../../components/coms/table/table.vue";
 import TableLineChart from "../../components/chart/line/table-line-chart.vue";
-import StrightLineChart from "../../components/chart/line/stright-line-chart.vue";
+// import StrightLineChart from "../../components/chart/line/stright-line-chart.vue";
 import ImgLineChart from "../../components/chart/line/img-line-chart.vue";
+import ZoomLineChart from '../../components/chart/line/zoom-line-chart.vue';
 
 export default {
   setup() {},
   components: {
-    NormalLineChart,
     Panel,
     Table,
     TableLineChart,
-    StrightLineChart,
     ImgLineChart,
+    ZoomLineChart,
   },
   data() {
     return {

src/views/LightMatrix3/LightMatrix3.vue

@@ -5,50 +5,52 @@
       <div class="dot left bottom"></div>
       <div class="dot right top"></div>
       <div class="dot right bottom"></div>
-      <Row>
-        <Col :span="3">
-          <div class="panel-item-gf">
-            <div class="panel-item-gf-left">
-              <span class="svg-icon svg-icon-write svg-icon-md">
-                <SvgIcon :svgid="panelData.first.icon"></SvgIcon>
-              </span>
-            </div>
-            <div class="panel-item-gf-right">
-              <div class="panel-item-gf-up">{{ panelData.first.text }}</div>
-              <div class="panel-item-gf-down">{{ sourceMap[panelData.first.key] || "---" }}</div>
-            </div>
+      <div class="page-header">
+        <div class="panel-item-gf">
+          <div class="panel-item-gf-left">
+            <div class="loop"></div>
+            <span class="svg-icon svg-icon-gray svg-icon-md">
+              <SvgIcon svgid="svg-wind-site"></SvgIcon>
+            </span>
+          </div>
+          <div class="panel-item-gf-right">
+              <div class="panel-item-gf-up">{{ panelData.first.text  }}</div>
+              <div class="panel-item-gf-down">{{  sourceMap[panelData.first.key] || "---" }}</div>
           </div>
-        </Col>
-        <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
-          <div class="panel-item" :class="data.color">
+        </div>
+        <div class="header-info">
+          <div class="panel-item" v-for="(data, index) of panelData.datas" :key="index" :class="data.color">
             <div class="panel-item-left">
               <div class="panel-item-li">
                 <span>{{ data.name }}</span>
-                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
-                  <SvgIcon :svgid="data.nameIcon"></SvgIcon>
-                </span>
               </div>
               <div class="panel-item-li">
                 <span v-if="data.calcStr && sourceMap">{{ calcGfStr(data.calcStr) || "---" }}</span>
                 <span v-else>{{ sourceMap[data.key] || "---" }}</span>
-                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
-                  <SvgIcon :svgid="data.numIcon"></SvgIcon>
-                </span>
               </div>
             </div>
             <div class="panel-item-right">
               <div class="panel-item-ri">
-                <span>{{ data.text1 }}</span>
+                <span>
+                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
+                    <SvgIcon :svgid="data.nameIcon"></SvgIcon>
+                  </i>
+                  {{ data.text1 }}</span>
                 <span>{{ sourceMap[data.key1] || "---" }}</span>
               </div>
               <div class="panel-item-ri">
-                <span>{{ data.text2 }}</span>
+                <span>
+                  <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
+                    <SvgIcon :svgid="data.numIcon"></SvgIcon>
+                  </i>
+                {{ data.text2 }}
+                </span>
                 <span>{{ sourceMap[data.key2] || "---" }}</span>
               </div>
             </div>
           </div>
-        </Col>
-      </Row>
+        </div>
+      </div>
     </div>
     <el-scrollbar>
       <div class="panel-box">
@@ -108,8 +110,6 @@
 </template>
 
 <script>
-import Row from "@/components/coms/grid/row.vue";
-import Col from "@/components/coms/grid/col.vue";
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
 import util from "@/helper/util.js";
 
@@ -120,8 +120,6 @@ export default {
   name: "LightMatrix3",
   // 使用组件
   components: {
-    Row,
-    Col,
     SvgIcon,
   },
 
@@ -408,7 +406,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@panelHeight: 6.481vh;
+@panelHeight: 60px;
 @titleHeight: 3.704vh;
 
 .light-matrix {
@@ -419,9 +417,10 @@ export default {
 
   .panel {
     width: 100%;
-    border: 0.093vh solid @darkgray;
+    height: 80px;
+    border: 1px solid @darkgray;
     position: relative;
-    padding: 1.111vh 2.222vh;
+    padding: 10px 20px;
     background-color: fade(@darkgray, 20%);
 
     .dot {
@@ -448,45 +447,58 @@ export default {
       }
     }
 
+    .page-header {
+      display: flex;
+
+      .header-info {
+        display: flex;
+        flex: 1 0 auto;
+      }
+    }
+
     .panel-item-gf {
-      width: 100%;
-      background-color: fade(@darkgray, 20%);
+      flex: 0 0 auto;
+      margin-right: 16px;
       display: flex;
       height: @panelHeight;
 
       .panel-item-gf-left {
         width: @panelHeight;
         height: @panelHeight;
-        background-color: fade(@darkgray, 40%);
         display: flex;
         align-items: center;
         justify-content: center;
-
-        i {
-          font-size: 2.778vh;
-          color: @write;
+        position: relative;
+
+        .loop {
+          position: absolute;
+          width: 4.444vh;
+          height: 4.444vh;
+          border-radius: 50%;
+          border: 0.093vh solid @darkgray;
+          background-color: fade(@darkgray, 20);
+          left: calc(50% - 2.222vh);
+          top: calc(50% - 2.222vh);
         }
       }
 
       .panel-item-gf-right {
-        flex-grow: 1;
         color: @write;
         text-align: right;
+        margin-left: 24px;
 
         .panel-item-gf-up {
+          color: @gray;
           height: @panelHeight / 2;
-          border-bottom: 0.093vh solid fade(@darkgray, 40%);
           line-height: @panelHeight / 2;
-          padding-right: 1.111vh;
-          font-size: @fontsize;
+          font-size: 14px;
         }
 
         .panel-item-gf-down {
           height: @panelHeight / 2;
           line-height: @panelHeight / 2;
-          padding-right: 1.111vh;
           font-weight: 600;
-          font-size: @fontsize;
+          font-size: 16px;
         }
       }
     }
@@ -494,44 +506,57 @@ export default {
     .panel-item {
       width: 100%;
       height: @panelHeight;
-      display: flex;
-      font-size: @fontsize-s;
+      font-size: 12px;
+      margin-left: 8px;
 
       .panel-item-left {
-        width: @panelHeight;
-        height: @panelHeight;
+        display: flex;
 
         .panel-item-li {
-          width: 100%;
           height: @panelHeight / 2;
           line-height: @panelHeight / 2;
+          flex: 1 0 auto;
           padding: 0 1.111vh;
-          display: flex;
           align-items: center;
-          font-size: @fontsize-s;
+          font-size: 14px;
 
           .svg-icon {
             margin-left: auto;
           }
+
+          &.value {
+            text-align: right;
+            flex: 0;
+            font-size: 16px;
+            color: #fff;
+          }
         }
       }
 
       .panel-item-right {
+        display: flex;
         flex-grow: 1;
         height: @panelHeight;
 
         .panel-item-ri {
           height: @panelHeight / 2;
           line-height: @panelHeight / 2;
-          padding: 0 1.111vh;
+          padding: 0 8px;
+          flex: 1;
 
           &:first-child {
-            border-bottom: 0.093vh solid;
+            border-right: 1px solid;
           }
 
-          span {
+          & > span {
             &:first-child {
               float: left;
+              display: flex;
+              align-items: center;
+
+              i {
+                margin-right: 4px;
+              }
             }
 
             &:last-child {

src/views/NewPages/alarm-center.vue

@@ -2,7 +2,7 @@
   <div class="alarm-center">
     <div class="action-bar">
       <div class="selections mg-b-16">
-        <div v-for="(tabItem, tabIndex) in tabLists" :key="tabItem.type" class="item" :class="{ active: tabIndex == cureent }" @click="tabSelect(tabItem.type, tabIndex)" >
+        <div v-for="(tabItem, tabIndex) in tabLists" :key="tabItem.type" class="item" :class="{ active: tabIndex == cureent }" @click="tabSelect(tabItem.type, tabIndex)">
           {{ tabItem.name }}
         </div>
         <!-- <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">发电机</div>
@@ -31,7 +31,7 @@
     <el-scrollbar>
       <div class="fj">
         <div class="fj-item" v-for="(item, index) in tableLists" :key="index">
-          <div class="fj-title">风机编号:{{item[0].wtId}}</div>
+          <div class="fj-title">风机编号:{{ item[0].wtId }}</div>
           <div class="fj-info">
             <Table :data="handleTable(item)"></Table>
           </div>
@@ -56,32 +56,32 @@ export default {
   data() {
     return {
       cureent: 0,
-      optSelectValue: '',
+      optSelectValue: "",
       tabLists: [
         {
-          type: 'fdj',
-          name: '发电机'
+          type: "fdj",
+          name: "发电机",
         },
         {
-          type: 'clx',
-          name: '齿轮箱'
+          type: "clx",
+          name: "齿轮箱",
         },
         {
-          type: 'bj',
-          name: '变桨系统'
+          type: "bj",
+          name: "变桨系统",
         },
         {
-          type: 'yyz',
-          name: '液压站'
+          type: "yyz",
+          name: "液压站",
         },
         {
-          type: 'zd',
-          name: '风机震动'
+          type: "zd",
+          name: "风机震动",
         },
         {
-          type: 'qt',
-          name: '其他参数'
-        }
+          type: "qt",
+          name: "其他参数",
+        },
       ],
       // tableData: {
       //   column: [
@@ -107,15 +107,15 @@ export default {
       // },
       tableLists: [],
       options: [],
-      type: '',
+      type: "",
       timmer: null, // 遮罩开关
     };
   },
   methods: {
     tabSelect(type, index) {
-      this.cureent = index
-      this.type = type
-      this.getList(true)
+      this.cureent = index;
+      this.type = type;
+      this.getList(true);
     },
     handleTable(item) {
       let tableData = {
@@ -133,56 +133,56 @@ export default {
             is_light: false,
           },
         ],
-        data: item
-      }
-      return tableData
+        data: item,
+      };
+      return tableData;
     },
     handelSelectChange() {
-      this.getList(true)
+      this.getList(true);
     },
     getList(showLoading) {
-      let _this = this
+      let _this = this;
       _this.API.requestData({
-          showLoading,
-          method: "POST",
-          subUrl: "/temperature/getTemperatureList",
-          data:{
-            type: this.type,
-            wpId: this.optSelectValue
-          },
-          success(res) {
-            _this.tableLists = res.data
-            // this.tableData.data = res.data
-            // debugger
-            console.log(res)
-          }
-      })
+        showLoading,
+        method: "POST",
+        subUrl: "/temperature/getTemperatureList",
+        data: {
+          type: this.type,
+          wpId: this.optSelectValue,
+        },
+        success(res) {
+          _this.tableLists = res.data;
+          // this.tableData.data = res.data
+          // debugger
+          console.log(res);
+        },
+      });
     },
 
     getSelectLists(showLoading) {
-      let _this = this
+      let _this = this;
       _this.API.requestData({
-          showLoading,
-          method: "GET",
-          subUrl: "/powercompare/windfarmAjax",
-          success(res) {
-            _this.options = res.data
-            _this.optSelectValue = res.data[0].id
-            _this.$nextTick(() => {
+        showLoading,
+        method: "GET",
+        subUrl: "/powercompare/windfarmAjax",
+        success(res) {
+          _this.options = res.data;
+          _this.optSelectValue = res.data[0].id;
+          _this.$nextTick(() => {
+            _this.getList(false);
+            _this.timmer = setInterval(() => {
               _this.getList(false);
-              _this.timmer = setInterval(() => {
-                _this.getList(false)
-              }, _this.$store.state.websocketTimeSec);
-            });
-          }
-      })
-    }
+            }, _this.$store.state.websocketTimeSec);
+          });
+        },
+      });
+    },
   },
   created() {
     // for (let i = 1; i < 7; i++) {
     //   this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
     // }
-    this.type = this.tabLists[0].type
+    this.type = this.tabLists[0].type;
     this.getSelectLists(false);
 
     // this.getList()

src/views/NewPages/history-search.vue

@@ -15,6 +15,12 @@
           </div>
         </div>
         <div class="query-item">
+          <div class="lable">间隔：</div>
+          <div class="search-input">
+            <el-checkbox v-model="form.autoReq" label="刷新" :border="true"></el-checkbox>
+          </div>
+        </div>
+        <div class="query-item">
           <div class="lable"></div>
           <div class="search-input">
             <transition name="el-zoom-in-center">
@@ -508,8 +514,6 @@ export default {
         height: 160px;
         margin-top: 10px;
         overflow-y: scroll;
-
-      
       }
     }
   }
@@ -519,8 +523,6 @@ export default {
   .el-select {
     max-height: 150px;
     overflow-y: scroll;
-
-   
   }
 }
 

src/views/NewPages/knowledge-base.vue

@@ -216,7 +216,6 @@
                 <div class="value">3913</div>
               </div>
             </div>
-            
           </div>
         </panel>
       </el-col>
@@ -259,7 +258,6 @@
                 <div class="value">7</div>
               </div>
             </div>
-            
           </div>
         </panel>
       </el-col>
@@ -277,37 +275,36 @@ export default {
     return {
       gztx: [
         {
-          "id": "UP77",
-          "name": "409",
-          "wsd": "12%"
+          id: "UP77",
+          name: "409",
+          wsd: "12%",
         },
         {
-          "id": "UP82",
-          "name": "409",
-          "wsd": "12%"
+          id: "UP82",
+          name: "409",
+          wsd: "12%",
         },
         {
-          "id": "UP86",
-          "name": "0",
-          "wsd": "0%"
+          id: "UP86",
+          name: "0",
+          wsd: "0%",
         },
         {
-          "id": "UP97",
-          "name": "0",
-          "wsd": "0%"
+          id: "UP97",
+          name: "0",
+          wsd: "0%",
         },
         {
-          "id": "UP105",
-          "name": "0",
-          "wsd": "0%"
+          id: "UP105",
+          name: "0",
+          wsd: "0%",
         },
         {
-          "id": "华创",
-          "name": "2529",
-          "wsd": "76%"
-        }
-        
-      ]
+          id: "华创",
+          name: "2529",
+          wsd: "76%",
+        },
+      ],
     };
   },
 };

src/views/WindSite/components/gax6.vue

@@ -67,21 +67,21 @@ export default {
                 direction: "top"
             },{
                 id: "315",
-                x: 868,
+                x: 803,
                 y: 497,
                 type: "switch",
                 state: 0,
                 direction: "top"
             },{
                 id: "323",
-                x: 958,
+                x: 868,
                 y: 497,
                 type: "switch",
                 state: 1,
                 direction: "top"
             },{
                 id: "322",
-                x: 1088,
+                x: 1023,
                 y: 497,
                 type: "switch",
                 state: 0,
@@ -150,19 +150,19 @@ export default {
             },{
                 id: "L315",
                 shape: "simple-text-r",
-                x: 855,
+                x: 790,
                 y: 470,
                 label: "315",
             },{
                 id: "L323",
                 shape: "simple-text-r",
-                x: 940,
+                x: 850,
                 y: 470,
                 label: "323",
             },{
                 id: "L322",
                 shape: "simple-text-r",
-                x: 1070,
+                x: 1005,
                 y: 470,
                 label: "322",
             },{
@@ -188,7 +188,7 @@ export default {
                 shape: "tag-text",
                 x: 1640,
                 y: 555,
-                label: "#3集电线路",
+                label: "#4集电线路",
             },{
                 id: "jddl_2",
                 shape: "tag-text",
@@ -199,8 +199,8 @@ export default {
                 id: "jddl_4",
                 shape: "tag-text",
                 x: 1640,
-                y: 685,
-                label: "#4集电线路",
+                y: 815,
+                label: "#3集电线路",
             }],
             fans: [{
                 id: "fanA01",
@@ -424,67 +424,67 @@ export default {
                 label: "A01",
             },
             
-            {
-                id: "fanA23-m",
-                shape: "fan-green",
-                x: 1150,
-                y: 640,
-                label: "A01",
-            },{
-                id: "fanA24-m",
-                shape: "fan-green",
-                x: 1200,
-                y: 640,
-                label: "A01",
-            },{
-                id: "fanA25-m",
-                shape: "fan-green",
-                x: 1250,
-                y: 640,
-                label: "A01",
-            },{
-                id: "fanA26-m",
-                shape: "fan-green",
-                x: 1300,
-                y: 640,
-                label: "A01",
-            },{
-                id: "fanA27-m",
-                shape: "fan-green",
-                x: 1350,
-                y: 640,
-                label: "A01",
-            },{
-                id: "fanA28-m",
-                shape: "fan-green",
-                x: 1400,
-                y: 640,
-                label: "A01",
-            },{
-                id: "fanA29-m",
-                shape: "fan-green",
-                x: 1450,
-                y: 640,
-                label: "A01",
-            },{
-                id: "fanA31-m",
-                shape: "fan-green",
-                x: 1600,
-                y: 640,
-                label: "A01",
-            },{
-                id: "fanA32-m",
-                shape: "fan-green",
-                x: 1650,
-                y: 640,
-                label: "A01",
-            },{
-                id: "fanA33-m",
-                shape: "fan-green",
-                x: 1700,
-                y: 640,
-                label: "A01",
-            },
+            // {
+            //     id: "fanA23-m",
+            //     shape: "fan-green",
+            //     x: 1150,
+            //     y: 640,
+            //     label: "A01",
+            // },{
+            //     id: "fanA24-m",
+            //     shape: "fan-green",
+            //     x: 1200,
+            //     y: 640,
+            //     label: "A01",
+            // },{
+            //     id: "fanA25-m",
+            //     shape: "fan-green",
+            //     x: 1250,
+            //     y: 640,
+            //     label: "A01",
+            // },{
+            //     id: "fanA26-m",
+            //     shape: "fan-green",
+            //     x: 1300,
+            //     y: 640,
+            //     label: "A01",
+            // },{
+            //     id: "fanA27-m",
+            //     shape: "fan-green",
+            //     x: 1350,
+            //     y: 640,
+            //     label: "A01",
+            // },{
+            //     id: "fanA28-m",
+            //     shape: "fan-green",
+            //     x: 1400,
+            //     y: 640,
+            //     label: "A01",
+            // },{
+            //     id: "fanA29-m",
+            //     shape: "fan-green",
+            //     x: 1450,
+            //     y: 640,
+            //     label: "A01",
+            // },{
+            //     id: "fanA31-m",
+            //     shape: "fan-green",
+            //     x: 1600,
+            //     y: 640,
+            //     label: "A01",
+            // },{
+            //     id: "fanA32-m",
+            //     shape: "fan-green",
+            //     x: 1650,
+            //     y: 640,
+            //     label: "A01",
+            // },{
+            //     id: "fanA33-m",
+            //     shape: "fan-green",
+            //     x: 1700,
+            //     y: 640,
+            //     label: "A01",
+            // },
 
             {
                 id: "fanA23-2",
@@ -585,7 +585,7 @@ export default {
                 },
                 interacting: false,
             });
-            // this.graph.zoomTo(0.8);
+            this.graph.zoomTo(0.8);
         },
         initData: function () {
             const data = { 
@@ -596,18 +596,18 @@ export default {
                     shape: "path",
                     attrs: {
                         body: {
-                            d: `M1007.9,99.76V273.33h473V172.08H1045.63V143.15H1672.5
-                                M878,99.76V400.3c1.81,1.53,3.69,1.21,5.49,1.21H1666c6.49,0,6.49,0,6.49-6.48V279.81c0-5.9,0-6-6-6q-22.5,0-45,0H1513.1
-                                M788,99.76V401.51H1
+                            d: `M942.9,99.76v44.39H1666
+                                M788,99.76V400.3c1.81,1.53,3.69,1.21,5.49,1.21H1666
+                                M723,99.76V401.51H1
                                 M658.11,99.76v44.39H1
                                 M803.52,34.42H643.62
                                 M1023.39,34.42H863.49
                                 M723.07,-19V33.42
                                 M942.94,-19V33.42
                                 M658.11,35.91V66.84
+                                M723,35.91V66.84
                                 M788,35.91V66.84
-                                M878,35.91V66.84
-                                M1007.9,35.91V66.84`,
+                                M942.9,35.91V66.84`,
                             fill: "transparent",
                             stroke: "#cbaa07",
                             "stroke-width": 3,

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

@@ -185,8 +185,7 @@
         </div>
         <div class="mg-l-16" style="flex:1 1 auto;" ref="lineChart">
           <panel title="4小时功率曲线图">
-            <multiple-line-chart height="18.519vh" v-if="Powertrend" :list="Powertrend.value" :units="Powertrend.units"
-              :showLegend="true" />
+            <multiple-line-chart height="18.519vh" v-if="Powertrend" :list="Powertrend.value" :units="Powertrend.units" :showLegend="true" />
           </panel>
         </div>
         <div class="mg-l-16" style="flex:0 0 400px;">
@@ -197,37 +196,36 @@
       </div>
       <row>
         <Col :span="8">
-        <panel title="日度损失电量分析">
-          <dual-pie-chart :innerData="pieChartData.dayData" :outerData="pieChartData.dayData" height="21.296vh" />
-        </panel>
+          <panel title="日度损失电量分析">
+            <dual-pie-chart :innerData="pieChartData.dayData" :outerData="pieChartData.dayData" height="21.296vh" />
+          </panel>
         </Col>
         <Col :span="8">
-        <panel title="月度损失电量分析">
-          <dual-pie-chart :innerData="pieChartData.monthData" :outerData="pieChartData.monthData" height="21.296vh" />
-        </panel>
+          <panel title="月度损失电量分析">
+            <dual-pie-chart :innerData="pieChartData.monthData" :outerData="pieChartData.monthData" height="21.296vh" />
+          </panel>
         </Col>
         <Col :span="8">
-        <panel title="年度损失电量分析">
-          <dual-pie-chart :innerData="pieChartData.yearData" :outerData="pieChartData.yearData" height="21.296vh" />
-        </panel>
+          <panel title="年度损失电量分析">
+            <dual-pie-chart :innerData="pieChartData.yearData" :outerData="pieChartData.yearData" height="21.296vh" />
+          </panel>
         </Col>
       </row>
       <row>
         <Col :span="8">
-        <panel title="日度损失电量分析">
-          <hover-bar-chart :list="dayLost" height="21.296vh" />
-        </panel>
+          <panel title="日度损失电量分析">
+            <hover-bar-chart :list="dayLost" height="21.296vh" />
+          </panel>
         </Col>
         <Col :span="8">
-        <panel title="日发电量对比">
-          <multiple-bar-chart height="21.296vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units"
-            :showLegend="true" />
-        </panel>
+          <panel title="日发电量对比">
+            <multiple-bar-chart height="21.296vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units" :showLegend="true" />
+          </panel>
         </Col>
         <Col :span="8">
-        <panel title="月发电量对比">
-          <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
-        </panel>
+          <panel title="月发电量对比">
+            <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
+          </panel>
         </Col>
       </row>
     </div>
@@ -258,7 +256,7 @@ export default {
   // 使用组件
   components: { BtnGroup2, WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix, BtnGroupDouble, Station },
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 计时器
       timmer2: null,
@@ -353,45 +351,45 @@ export default {
   },
   // 函数
   methods: {
-
-
-    getWp () {
+    getWp() {
       let that = this;
       that.API.requestData({
         method: "GET",
         subUrl: "powercompare/windfarmAllAjax",
-        success (res) {
+        success(res) {
           console.warn(res);
-          let btnGroups = [{
-            icon: "svg-wind-site",
-            btns: []
-          }, {
-            icon: "svg-photovoltaic",
-            btns: []
-          }];
+          let btnGroups = [
+            {
+              icon: "svg-wind-site",
+              btns: [],
+            },
+            {
+              icon: "svg-photovoltaic",
+              btns: [],
+            },
+          ];
 
           res.data.forEach((ele, index) => {
             if (ele.id.indexOf("FDC") !== -1) {
               btnGroups[0].btns.push({
                 text: ele.name,
-                code: ele.id
+                code: ele.id,
               });
             } else {
               btnGroups[1].btns.push({
                 text: ele.name,
-                code: ele.id
+                code: ele.id,
               });
             }
           });
 
           that.btnGroupsss = btnGroups;
           that.renderBtnActiveIndex();
-
         },
       });
     },
 
-    renderBtnActiveIndex () {
+    renderBtnActiveIndex() {
       this.btnGroupsss.forEach((pEle, pIndex) => {
         pEle.btns.forEach((cEle, cIndex) => {
           if (cEle.code === this.wpId) {
@@ -402,13 +400,13 @@ export default {
       });
     },
 
-    select (res) {
+    select(res) {
       this.$router.replace({
-        path: `/monitor/windsite/home/${res.code}`
+        path: `/monitor/windsite/home/${res.code}`,
       });
     },
     // 根据风机状态码返回对应 class
-    getColor (fjzt) {
+    getColor(fjzt) {
       switch (fjzt) {
         case 0:
           return "green";
@@ -427,7 +425,7 @@ export default {
       }
     },
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       this.requestWpInfo(showLoading);
       this.requestLoss(showLoading);
       this.requestPower(showLoading);
@@ -435,7 +433,7 @@ export default {
     },
 
     // 获取场站监视数据
-    requestWpInfo (showLoading) {
+    requestWpInfo(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
@@ -444,8 +442,8 @@ export default {
         data: {
           wpId: that.wpId,
         },
-        success (res) {
-          console.log(123,res);
+        success(res) {
+          console.log(123, res);
           if (res.data) {
             that.tqmap = res.data.tqmap;
             let fjmap = [];
@@ -590,7 +588,7 @@ export default {
     },
 
     // 获取日度损失电量分析
-    requestLoss (showLoading) {
+    requestLoss(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
@@ -599,7 +597,7 @@ export default {
         data: {
           wpId: that.wpId,
         },
-        success (res) {
+        success(res) {
           let dayLost = [];
           res.data.forEach((ele) => {
             dayLost.push({
@@ -613,7 +611,7 @@ export default {
     },
 
     // 获取完成电量
-    requestPower (showLoading) {
+    requestPower(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
@@ -622,7 +620,7 @@ export default {
         data: {
           wpId: that.wpId,
         },
-        success (res) {
+        success(res) {
           let data = [
             {
               title: "发电量",
@@ -653,7 +651,7 @@ export default {
     },
 
     // 获取月发电量对比
-    requestMonthPower (showLoading) {
+    requestMonthPower(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
@@ -662,7 +660,7 @@ export default {
         data: {
           wpId: that.wpId,
         },
-        success (res) {
+        success(res) {
           let data = [
             {
               title: "月发电量",
@@ -693,7 +691,7 @@ export default {
     },
   },
 
-  created () {
+  created() {
     let that = this;
     that.wpId = that.$route.params.wpId;
     that.$nextTick(() => {
@@ -708,24 +706,23 @@ export default {
     });
   },
 
-  mounted () { },
+  mounted() {},
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     clearInterval(this.timmer2);
     this.timmer = null;
     this.timmer2 = null;
   },
   watch: {
-    "$route" (res) {
-      console.warn('router变化');
+    $route(res) {
+      console.warn("router变化");
       this.wpId = res.params.wpId;
       this.requestData(false);
       this.renderBtnActiveIndex();
-    }
-  }
+    },
+  },
 };
-
 </script>
 
 <style lang="less">

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

@@ -222,12 +222,14 @@ export default {
           text-align: center;
           border: 1px solid @darkgray;
           margin-right: 0.37vh;
+          height: 28px;
           line-height: 28px;
         }
 
         .text {
           flex: 1 0 auto;
           border: 1px solid @darkgray;
+          height: 28px;
           line-height: 28px;
           padding: 0 8px;
         }
@@ -270,12 +272,12 @@ export default {
     }
 
     thead tr th {
-      padding: 8px 0;
-      font-size: 14px;
+      padding: 0;
+      font-size: 12px;
     }
 
     tbody {
-      height: 54vh;
+      height: 56vh;
     }
   }
 }

src/views/WindSite/pages/Map1.vue

@@ -58,13 +58,144 @@
         </div>
         <div class="panel-body">
             <arcgis @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap">
-                <template v-slot:test>
+                <template v-slot:content>
                     <div class="panel-box">
-                        <!-- <div class="panel-item" v-for="index of 80" :key="index"></div> -->
-                        <img :src="tempImg" style="width: 800px; height: 700px;">
+                        <div class="panel-item" :class="panel.line" v-for="(panel, index) of panels" :key="index">
+                            <svg v-show="panel.type != 'none' && panel.type != 'syz'" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                                xml:space="preserve">
+                                <defs>
+                                    <rect id="fill-rect" x="5" y="5" rx="8" ry="8" width="90" height="340" fill="#303B6F" />
+                                    <rect id="none-rect" x="5" y="5" rx="8" ry="8" width="90" height="120" fill="#303B6F" />
+                                    <g id="panel-deepblue">
+                                        <polygon fill="#FFFFFF"
+                                            points="300 13.73 60.07 13.73 60.07 13.73 22.48 13.73 0 109.84 0 109.84 0 109.84 0 109.84 0 109.84 22.48 205.95 272.88 205.95 272.88 205.61 300 205.61 300 13.73" />
+                                        <polygon fill="#5C9BAF" 
+                                            points="250.4 109.84 3.26 109.84 29 0 276.14 0 250.4 109.84" />
+                                        <polygon fill="#00486B"
+                                            points="29 219.68 276.14 219.68 250.4 109.84 3.26 109.84 29 219.68" />
+                                    </g>
+                                    <g id="panel-blue">
+                                        <polygon fill="#FFFFFF"
+                                            points="300 13.73 60.07 13.73 60.07 13.73 22.48 13.73 0 109.84 0 109.84 0 109.84 0 109.84 0 109.84 22.48 205.95 272.88 205.95 272.88 205.61 300 205.61 300 13.73" />
+                                        <polygon fill="#23ABFF" 
+                                            points="250.4 109.84 3.26 109.84 29 0 276.14 0 250.4 109.84" />
+                                        <polygon fill="#0E6BBB"
+                                            points="29 219.68 276.14 219.68 250.4 109.84 3.26 109.84 29 219.68" />
+                                    </g>
+                                    <g id="panel-red">
+                                        <polygon fill="#FFFFFF"
+                                            points="290 13.27 58.07 13.27 58.07 13.27 21.73 13.27 0 106.18 0 106.18 0 106.18 0 106.18 0 106.18 21.73 199.09 263.79 199.09 263.79 198.75 290 198.75 290 13.27" />
+                                        <polygon fill="#EC1208" 
+                                            points="242.05 106.18 3.15 106.18 28.04 0 266.94 0 242.05 106.18" />
+                                        <polygon fill="#AA0607"
+                                            points="28.04 212.36 266.94 212.36 242.05 106.18 3.15 106.18 28.04 212.36" />
+                                    </g>
+                                </defs>
+                                <!-- 底图 左右两列矩形 -->
+                                <g>
+                                    <use xlink:href="#fill-rect" x="50" y="50" />
+                                    <use xlink:href="#fill-rect" x="150" y="50" />
+                                    <use xlink:href="#fill-rect" x="550" y="50" />
+                                    <use xlink:href="#fill-rect" x="650" y="50" />
+                                    <use xlink:href="#fill-rect" x="50" y="400" />
+                                    <use xlink:href="#fill-rect" x="150" y="400" />
+                                    <use xlink:href="#fill-rect" x="550" y="400" />
+                                    <use xlink:href="#fill-rect" x="650" y="400" />
+                                </g>
+
+                                <!-- 中间上矩形 全部 -->
+                                <g :style="'display: ' + (panel.type == 'fill' || panel.type == 'bottom' ? 'block' : 'none')">
+                                    <use xlink:href="#fill-rect" x="250" y="50" />
+                                    <use xlink:href="#fill-rect" x="350" y="50" />
+                                    <use xlink:href="#fill-rect" x="450" y="50" />
+                                </g>
+
+                                <!-- 中间上矩形 一半 -->
+                                <g :style="'display: ' + (panel.type == 'top' ? 'block' : 'none')">
+                                    <use xlink:href="#none-rect" x="250" y="270" />
+                                    <use xlink:href="#none-rect" x="350" y="270" />
+                                    <use xlink:href="#none-rect" x="450" y="270" />
+                                </g>
+
+                                <!-- 中间上逆变器 深蓝色 -->
+                                <g :style="'display: ' + (panel.type == 'top' && panel.state == 'deepblue' ? 'block' : 'none')" class="can-click esri-component" @click.prevent="clickEl(panel)">
+                                    <use xlink:href="#panel-deepblue" x="250" y="50" />
+                                </g>
+
+                                <!-- 中间上逆变器 蓝色 -->
+                                <g :style="'display: ' + (panel.type == 'top' && panel.state == 'blue' ? 'block' : 'none')" class="can-click esri-component" @click.prevent="clickEl(panel)">
+                                    <use xlink:href="#panel-blue" x="250" y="50" />
+                                </g>
+
+                                <!-- 中间上逆变器 红色 -->
+                                <g :style="'display: ' + (panel.type == 'top' && panel.state == 'red' ? 'block' : 'none')" class="can-click esri-component" @click.prevent="clickEl(panel)">
+                                    <use xlink:href="#panel-red" x="250" y="50" />
+                                </g>
+
+                                <!-- 中间上文字 -->
+                                <g :style="'display: ' + (panel.type == 'top' ? 'block' : 'none')" class="can-click esri-component" @click.prevent="clickEl(panel)">
+                                    <text x="420" y="220" fill="#ffffff" font-size="150" text-anchor="middle" transform="rotate(-90 400 180)">{{panel.code}}</text>
+                                </g>
+
+                                <!-- 中间下矩形 全部 -->
+                                <g :style="'display: ' + (panel.type == 'fill' || panel.type == 'top' ? 'block' : 'none')">
+                                    <use xlink:href="#fill-rect" x="250" y="400" />
+                                    <use xlink:href="#fill-rect" x="350" y="400" />
+                                    <use xlink:href="#fill-rect" x="450" y="400" />
+                                </g>
+
+                                <!-- 中间下矩形 一半 -->
+                                <g :style="'display: ' + (panel.type == 'bottom' ? 'block' : 'none')">
+                                    <use xlink:href="#none-rect" x="250" y="400" />
+                                    <use xlink:href="#none-rect" x="350" y="400" />
+                                    <use xlink:href="#none-rect" x="450" y="400" />
+                                </g>
+
+                                <!-- 中间下逆变器 深蓝色 -->
+                                <g :style="'display: ' + (panel.type == 'bottom' && panel.state == 'deepblue' ? 'block' : 'none')" class="can-click esri-component" @click.prevent="clickEl(panel)">
+                                    <use xlink:href="#panel-deepblue" x="250" y="530" />
+                                </g>
+
+                                <!-- 中间下逆变器 蓝色 -->
+                                <g :style="'display: ' + (panel.type == 'bottom' && panel.state == 'blue' ? 'block' : 'none')" class="can-click esri-component" @click.prevent="clickEl(panel)">
+                                    <use xlink:href="#panel-blue" x="250" y="530" />
+                                </g>
+
+                                <!-- 中间下逆变器 红色 -->
+                                <g :style="'display: ' + (panel.type == 'bottom' && panel.state == 'red' ? 'block' : 'none')" class="can-click esri-component" @click.prevent="clickEl(panel)">
+                                    <use xlink:href="#panel-red" x="250" y="530" />
+                                </g>
+
+                                <!-- 中间下文字 -->
+                                <g :style="'display: ' + (panel.type == 'bottom' ? 'block' : 'none')" class="can-click" @click.prevent="clickEl(panel)">
+                                    <text x="460" y="740" fill="#ffffff" font-size="150" text-anchor="middle"  transform="rotate(-90 400 700)">{{panel.code}}</text>
+                                </g>
+                            </svg>
+                            <div v-show="panel.type == 'syz'" class="panel-syz">
+                                <img :src="syzImg" class="syz-img">
+                                <div class="syz-text">升压站</div>
+                            </div>
+                        </div>
+                        <!-- <img :src="tempImg" style="width: 800px; height: 700px;"> -->
                     </div>
                 </template>
             </arcgis>
+            <div class="map-popup-panel" v-show="showPopup">
+                <div class="map-popup-panel-header">
+                    <div class="map-popup-panel-title green">
+                        某某风电场总貌<span></span>
+                    </div>
+                    <div class="map-popup-panel-date gray">2020年5月10日</div>
+                    <div class="map-popup-panel-back" @click="popupBack">
+                        <span class="svg-icon svg-icon-white svg-icon-sm">
+                            <SvgIcon svgid="svg-arrow-dpwn-1"></SvgIcon>
+                        </span>
+                    </div>
+                </div>
+                <div class="map-popup-panel-body">
+                    
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -137,23 +268,122 @@ export default {
             arcgisData: {
                 mode: "2D", // 模式 2D 3D
                 title: "宁夏地图", // 标题
-                center: [106.60768412800003, 37.806672373000006], // 初始中心点
+                center: [106.48638888888888, 38.924166666666665], // 初始中心点
                 height: 654, // 3D地图初始相机高度
                 tilt: 65, // 俯视角
                 scale: 15000,
+                rotation: 180,
             },
             tempImg: require("@assets/temp1.png"),
+            syzImg: require("@assets/png/booster-station.png"),
+            showPopup: true,
+            panels: [ // fill top bottom none syz // red blue deepblue
+                { id: "00", type: "fill", code: "", state: "", line: "" },
+                { id: "01", type: "fill", code: "", state: "", line: "" },
+                { id: "02", type: "fill", code: "", state: "", line: "" },
+                { id: "03", type: "fill", code: "", state: "", line: "" },
+                { id: "04", type: "fill", code: "", state: "", line: "" },
+                { id: "05", type: "fill", code: "", state: "", line: "" },
+                { id: "06", type: "bottom", code: "12", state: "deepblue", line: "bottom" },
+                { id: "07", type: "none", code: "", state: "", line: "bottom" },
+                { id: "08", type: "fill", code: "", state: "", line: "" },
+                { id: "09", type: "fill", code: "", state: "", line: "" },
+
+                { id: "10", type: "top", code: "36", state: "deepblue", line: "top left" },
+                { id: "11", type: "top", code: "32", state: "deepblue", line: "top left" },
+                { id: "12", type: "top", code: "28", state: "deepblue", line: "top" },
+                { id: "13", type: "top", code: "24", state: "deepblue", line: "top" },
+                { id: "14", type: "top", code: "20", state: "deepblue", line: "top" },
+                { id: "15", type: "top", code: "16", state: "deepblue", line: "top right" },
+                { id: "16", type: "fill", code: "", state: "", line: "bottom right" },
+                { id: "17", type: "syz", code: "", state: "", line: "bottom right" },
+                { id: "18", type: "top", code: "5", state: "deepblue", line: "top" },
+                { id: "19", type: "top", code: "4", state: "deepblue", line: "top right" },
+
+                { id: "20", type: "bottom", code: "37", state: "deepblue", line: "bottom left" },
+                { id: "21", type: "fill", code: "", state: "deepblue", line: "left" },
+                { id: "22", type: "fill", code: "", state: "deepblue", line: "" },
+                { id: "23", type: "fill", code: "", state: "deepblue", line: "" },
+                { id: "24", type: "fill", code: "", state: "deepblue", line: "" },
+                { id: "25", type: "fill", code: "", state: "deepblue", line: "" },
+                { id: "26", type: "bottom", code: "13", state: "deepblue", line: "bottom" },
+                { id: "27", type: "fill", code: "", state: "", line: "" },
+                { id: "28", type: "fill", code: "", state: "deepblue", line: "" },
+                { id: "29", type: "fill", code: "", state: "deepblue", line: "right" },
+
+                { id: "30", type: "none", code: "", state: "", line: "" },
+                { id: "31", type: "top", code: "33", state: "deepblue", line: "top" },
+                { id: "32", type: "top", code: "29", state: "deepblue", line: "top" },
+                { id: "33", type: "top", code: "25", state: "deepblue", line: "top" },
+                { id: "34", type: "top", code: "21", state: "deepblue", line: "top" },
+                { id: "35", type: "top", code: "17", state: "deepblue", line: "top right" },
+                { id: "36", type: "fill", code: "", state: "deepblue", line: "" },
+                { id: "37", type: "top", code: "1", state: "deepblue", line: "top" },
+                { id: "38", type: "top", code: "2", state: "deepblue", line: "top" },
+                { id: "39", type: "top", code: "3", state: "deepblue", line: "top" },
+
+                { id: "40", type: "none", code: "", state: "", line: "" },
+                { id: "41", type: "fill", code: "", state: "", line: "" },
+                { id: "42", type: "fill", code: "", state: "", line: "" },
+                { id: "43", type: "fill", code: "", state: "", line: "" },
+                { id: "44", type: "fill", code: "", state: "", line: "" },
+                { id: "45", type: "fill", code: "", state: "", line: "" },
+                { id: "46", type: "bottom", code: "14", state: "deepblue", line: "bottom left" },
+                { id: "47", type: "bottom", code: "10", state: "deepblue", line: "bottom" },
+                { id: "48", type: "bottom", code: "8", state: "deepblue", line: "bottom" },
+                { id: "49", type: "bottom", code: "6", state: "deepblue", line: "bottom" },
+
+                { id: "50", type: "none", code: "", state: "", line: "" },
+                { id: "51", type: "top", code: "34", state: "red", line: "top left" },
+                { id: "52", type: "top", code: "30", state: "deepblue", line: "top" },
+                { id: "53", type: "top", code: "26", state: "deepblue", line: "top" },
+                { id: "54", type: "top", code: "22", state: "deepblue", line: "top" },
+                { id: "55", type: "top", code: "18", state: "deepblue", line: "top" },
+                { id: "56", type: "fill", code: "", state: "", line: "" },
+                { id: "57", type: "fill", code: "", state: "", line: "" },
+                { id: "58", type: "fill", code: "", state: "", line: "" },
+                { id: "59", type: "fill", code: "", state: "", line: "right" },
+
+                { id: "60", type: "none", code: "", state: "", line: "" },
+                { id: "61", type: "fill", code: "", state: "", line: "left" },
+                { id: "62", type: "fill", code: "", state: "", line: "" },
+                { id: "63", type: "fill", code: "", state: "", line: "" },
+                { id: "64", type: "fill", code: "", state: "", line: "" },
+                { id: "65", type: "fill", code: "", state: "", line: "" },
+                { id: "66", type: "bottom", code: "15", state: "deepblue", line: "bottom" },
+                { id: "67", type: "bottom", code: "11", state: "deepblue", line: "bottom" },
+                { id: "68", type: "bottom", code: "9", state: "deepblue", line: "bottom" },
+                { id: "69", type: "bottom", code: "7", state: "deepblue", line: "bottom right" },
+
+                { id: "70", type: "none", code: "", state: "", line: "" },
+                { id: "71", type: "top", code: "35", state: "blue", line: "top" },
+                { id: "72", type: "top", code: "31", state: "deepblue", line: "top" },
+                { id: "73", type: "top", code: "27", state: "deepblue", line: "top" },
+                { id: "74", type: "top", code: "23", state: "deepblue", line: "top" },
+                { id: "75", type: "top", code: "19", state: "deepblue", line: "top" },
+                { id: "76", type: "fill", code: "", state: "", line: "" },
+                { id: "77", type: "fill", code: "", state: "", line: "" },
+                { id: "78", type: "fill", code: "", state: "", line: "" },
+                { id: "79", type: "fill", code: "", state: "", line: "" },
+            ],
         };
     },
     // 函数
     methods: {
         when: function () {
         //    this.$refs.arcgis.addImagePoint([106.60768412800003, 37.806672373000006], "@assets/temp1.png", "160px", "140px");
-           this.$refs.arcgis.addHtmlPoint([106.60768412800003, 37.806672373000006], "test",  400, 350);
+           this.$refs.arcgis.addHtmlPoint([106.48638888888888, 38.924166666666665], "content",  400, 350);
         },
         clickMap: function (info) {
             console.log(info)
         },
+        popupBack: function () {
+            this.showPopup = false;
+        },
+        clickEl: function (item) {
+            console.log(item);
+            this.showPopup = true;
+        },
     },
     // 生命周期钩子
     beforeCreate() {
@@ -177,7 +407,7 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 @titleHeight: 3.704vh;
 
 .map-1 {
@@ -341,19 +571,200 @@ export default {
     }
 
     .panel-box {
-        width: 800px;
+        width: 840px;
+        padding: 20px;
         display: flex;
         flex-wrap: wrap;
+        background: #536268B8;
 
         .panel-item {
-            width: 100px;
-            height: 100px;
-            padding: 20px;
-            background: #536268B8;
-            margin-top: -20px;
-            margin-left: -20px;
+            width: 80px;
+            height: 80px;
+            position: relative;
+            
+            // margin-top: -20px;
+            // margin-left: -20px;
+
+            &.top {
+                &::after {
+                    top: -3px;
+                    opacity: 1;
+                }
+            }
+
+            &.bottom {
+                &::after {
+                    bottom: -3px;
+                    opacity: 1;
+                }
+            }
+
+            &.left {
+                &::before {
+                    left: -3px;
+                    opacity: 1;
+                }
+            }
+
+            &.right {
+                &::before {
+                    right: -3px;
+                    opacity: 1;
+                }
+            }
+
+            &::after {
+                content: '';
+                width: 100%;
+                height: 6px;
+                position: absolute;
+                left: 0;
+                background: @green;
+                opacity: 0;
+            }
+
+            &::before {
+                content: '';
+                width: 6px;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                background: @green;
+                opacity: 0;
+            }
+
+            svg {
+                width: 80px;
+                height: 80px;
+            }
+
+            .panel-syz {
+                width: 100%;
+                height: 100%;
+                position: relative;
+
+                .syz-img {
+                    position: absolute;
+                    height: 70px;
+                    top: -35px;
+                    left: -10px;
+                }
+
+                .syz-text {
+                    position: absolute;
+                    color: @green;
+                    font-size: @fontsize-l;
+                    width: 100%;
+                    text-align: center;
+                    left: 0;
+                    top: -55px;
+                    font-weight: bold;
+                }
+            }
+        }
+
+    }
+
+    .can-click {
+        cursor: pointer;
+    }
+
+    .map-popup-panel {
+        width: 760px;
+        position: absolute;
+        left: 71px;
+        top: 22px;
+        z-index: 2;
+
+        .map-popup-panel-header {
+            width: 100%;
+            background: fade(#152221, 90%);
+            display: flex;
+
+            .map-popup-panel-title {
+                padding: 17px 24px;
+                font-size: @fontsize-s;
+                position: relative;
+
+                &::before,
+                &::after {
+                    position: absolute;
+                    width: calc(50% - 6px);
+                    bottom: 0;
+                    border-bottom: 2px solid @green;
+                }
+
+                &::before {
+                    content: "";
+                    left: 0;
+                }
+
+                &::after {
+                    content: "";
+                    right: 0;
+                }
+
+                span {
+                    position: absolute;
+                    width: 11.3px;
+                    height: 11.3px;
+                    border-left: 2px solid @green;
+                    border-top: 2px solid @green;
+                    left: calc(50% - 5.65px);
+                    bottom: -3px;
+                    transform: rotate(45deg);
+                }
+            }
+
+            .map-popup-panel-date {
+                flex-grow: 1;
+                padding: 17px 24px;
+                font-size: @fontsize-s;
+                text-align: right;
+                border-bottom: 2px solid @green;
+            }
+
+            .map-popup-panel-back {
+                margin-left: auto;
+                width: 54px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: relative;
+                cursor: pointer;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    left: 0;
+                    height: 50%;
+                    border-left: 1px solid @gray;
+                    top: 25%;
+                }
+            }
         }
 
+        .map-popup-panel-body {
+            background: fade(#152221, 75%);
+            border: 1px solid fade(@darkgray, 40);
+            border-top: 0px;
+
+            .table-form {
+                .text,
+                .unit {
+                    font-weight: 400;
+                }
+
+                .unit {
+                    min-width: auto;
+                }
+
+                .value,
+                .unit {
+                    text-align: left;
+                }
+            }
+        }
     }
 }
 </style>

src/views/WindSite/pages/Matrix.vue

@@ -48,10 +48,10 @@ export default {
   // 使用组件
   components: {
     BtnGroup2,
-    SvgIcon
+    SvgIcon,
   },
 
-  data () {
+  data() {
     return {
       timmer: null, // 计时器
       wpId: "",
@@ -98,7 +98,7 @@ export default {
   },
 
   methods: {
-    getColor (fjzt) {
+    getColor(fjzt) {
       switch (fjzt) {
         case 0:
           return "green";
@@ -125,7 +125,7 @@ export default {
     },
 
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
@@ -134,7 +134,7 @@ export default {
         data: {
           wpId: that.wpId,
         },
-        success (res) {
+        success(res) {
           if (res.data) {
             let sourceMap = res.data;
             for (let key in sourceMap) {
@@ -157,43 +157,44 @@ export default {
       });
     },
 
-    getWp () {
+    getWp() {
       let that = this;
       that.API.requestData({
         method: "GET",
         subUrl: "powercompare/windfarmAllAjax",
-        success (res) {
-
-          let btnGroups = [{
-            icon: "fa fa-fire",
-            btns: []
-          }, {
-            icon: "fa fa-fire-extinguisher",
-            btns: []
-          }];
+        success(res) {
+          let btnGroups = [
+            {
+              icon: "fa fa-fire",
+              btns: [],
+            },
+            {
+              icon: "fa fa-fire-extinguisher",
+              btns: [],
+            },
+          ];
 
           res.data.forEach((ele, index) => {
             if (ele.id.indexOf("FDC") !== -1) {
               btnGroups[0].btns.push({
                 text: ele.name,
-                code: ele.id
+                code: ele.id,
               });
             } else {
               btnGroups[1].btns.push({
                 text: ele.name,
-                code: ele.id
+                code: ele.id,
               });
             }
           });
 
           that.btnGroups = btnGroups;
           that.renderBtnActiveIndex();
-
         },
       });
     },
 
-    renderBtnActiveIndex () {
+    renderBtnActiveIndex() {
       this.btnGroups.forEach((pEle, pIndex) => {
         pEle.btns.forEach((cEle, cIndex) => {
           if (cEle.code === this.wpId) {
@@ -204,14 +205,14 @@ export default {
       });
     },
 
-    select (res) {
+    select(res) {
       this.$router.replace({
-        path: `/monitor/windsite/matrix/${res.code}`
+        path: `/monitor/windsite/matrix/${res.code}`,
       });
     },
   },
 
-  created () {
+  created() {
     let that = this;
     that.wpId = that.$route.params.wpId;
     that.$nextTick(() => {
@@ -223,20 +224,20 @@ export default {
     });
   },
 
-  mounted () { },
+  mounted() {},
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     this.timmer = null;
   },
 
   watch: {
-    "$route" (res) {
+    $route(res) {
       this.wpId = res.params.wpId;
       this.requestData(false);
       this.renderBtnActiveIndex();
-    }
-  }
+    },
+  },
 };
 </script>
 

src/views/layout/Header.vue

@@ -20,7 +20,7 @@
 </template>
 <script>
 export default {
-  data () {
+  data() {
     return {
       menus: [
         {
@@ -85,25 +85,25 @@ export default {
     };
   },
   methods: {
-    click (index, data) {
+    click(index, data) {
       this.activeIndex = index;
       this.$router.push(data.path);
     },
-    clickSubMenu (index, code) {
+    clickSubMenu(index, code) {
       console.log(index, code);
     },
-    clickMenu () {
+    clickMenu() {
       this.dropdown = !this.dropdown;
     },
   },
   computed: {
-    activeClass (data) {
+    activeClass(data) {
       return data.isActive ? "active" : "";
     },
   },
   watch: {
     $route: {
-      handler: function (val, oldVal) {
+      handler: function(val, oldVal) {
         this.menus.some((t, index) => {
           if (val.path.includes(t.id)) {
             this.activeIndex = index;
@@ -151,7 +151,7 @@ export default {
         transition: color 0.2s ease-in-out;
 
         &::after {
-          content: '';
+          content: "";
           position: absolute;
           width: 100%;
           height: 0.463vh;
@@ -208,7 +208,7 @@ export default {
         background-color: fade(@write, 5%);
 
         &::after {
-          content: '';
+          content: "";
           position: absolute;
           width: 100%;
           height: 0.463vh;

src/views/layout/Menu.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="menu">
     <ul class="menu-list">
-      <li class="menu-item" v-for="(menu, index) of currentMenu" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }"
-        @mouseenter="subMenuShow(menu.children, index)">
+      <li class="menu-item" v-for="(menu, index) of currentMenu" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }" @mouseenter="subMenuShow(menu.children, index)">
         <router-link v-if="!menu.children" :to="menu.path">
           <el-tooltip class="item" effect="dark" :content="menu.text" placement="right" :show-after="500">
             <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
@@ -38,7 +37,7 @@ export default {
     SvgIcon,
   },
   props: {},
-  data () {
+  data() {
     return {
       currRoot: "monitor",
       menuData: [
@@ -100,14 +99,14 @@ export default {
                 {
                   text: "测点数据查询",
                   icon: "svg-wind-site",
-                  path: "/realSearch"
+                  path: "/realSearch",
                 },
                 {
                   text: "测点历史数据查询",
                   icon: "svg-wind-site",
-                  path: "/historySearch"
-                }
-              ]
+                  path: "/historySearch",
+                },
+              ],
             },
             {
               text: "预警记录",
@@ -117,10 +116,10 @@ export default {
                 {
                   text: "预警管理",
                   icon: "svg-wind-site",
-                  path: "/new/alarmcenter"
-                }
-              ]
-            }
+                  path: "/new/alarmcenter",
+                },
+              ],
+            },
           ],
         },
         {
@@ -166,8 +165,8 @@ export default {
                   text: "单机饱和度",
                   icon: "svg-wind-site",
                   path: "/wtSaturability",
-                }
-              ]
+                },
+              ],
             },
             {
               text: "风光资源分析",
@@ -178,8 +177,8 @@ export default {
                   text: "风资源分析",
                   icon: "svg-wind-site",
                   path: "/windAnalysis",
-                }
-              ]
+                },
+              ],
             },
             // {
             //   text: "单机分析",
@@ -246,7 +245,6 @@ export default {
                 },
               ],
             },
-
           ],
         },
         {
@@ -312,32 +310,32 @@ export default {
                   text: "报警排行",
                   icon: "svg-wind-site",
                   path: "/warningRank",
-                }
-              ]
+                },
+              ],
             },
             // 三率管理
             {
-              text: '三率管理',
-              icon: 'svg-matrix',
-              path: '/slgl',
+              text: "三率管理",
+              icon: "svg-matrix",
+              path: "/slgl",
               children: [
                 {
-                  text: '复位及时率',
-                  icon: 'svg-wind-site',
-                  path: '/fwjsl'
+                  text: "复位及时率",
+                  icon: "svg-wind-site",
+                  path: "/fwjsl",
                 },
                 {
-                  text: '状态转换率',
-                  icon: 'svg-wind-site',
-                  path: '/ztzhl'
+                  text: "状态转换率",
+                  icon: "svg-wind-site",
+                  path: "/ztzhl",
                 },
                 {
-                  text: '消缺及时率',
-                  icon: 'svg-wind-site',
-                  path: '/xqjsl'
-                }
-              ]
-            }
+                  text: "消缺及时率",
+                  icon: "svg-wind-site",
+                  path: "/xqjsl",
+                },
+              ],
+            },
           ],
         },
         {
@@ -378,7 +376,7 @@ export default {
               text: "作业指导知识",
               icon: "svg-matrix",
               path: "/knowledge4",
-            }
+            },
           ],
         },
         {
@@ -395,11 +393,11 @@ export default {
     };
   },
   methods: {
-    click (index) {
+    click(index) {
       this.activeIndex = index;
       this.subIndex = null;
     },
-    subMenuShow (children, index) {
+    subMenuShow(children, index) {
       if (children) {
         this.isShowSubMenu = true;
         this.parentIndex = index;
@@ -409,18 +407,18 @@ export default {
       }
       this.subMenu = children;
     },
-    subMenuHide () {
+    subMenuHide() {
       this.isShowSubMenu = false;
       this.parentIndex = null;
       this.subMenu = [];
     },
-    subclick (index) {
+    subclick(index) {
       this.activeIndex = this.parentIndex;
       this.subIndex = index;
     },
   },
   computed: {
-    currentMenu () {
+    currentMenu() {
       let data = this.menuData.filter((t) => {
         return t.id == this.currRoot;
       })[0].data;
@@ -430,7 +428,7 @@ export default {
   watch: {
     // 监听路由
     $route: {
-      handler: function (val, oldVal) {
+      handler: function(val, oldVal) {
         this.menuData.some((element, index) => {
           if (val.path.includes(element.id)) {
             this.currRoot = element.id;