Merge branch 'yx' of http://61.161.152.110:10101/r/electronic-map into yx

src/components/arcgis/MHS_FDC.vue

@@ -0,0 +1,501 @@
+<template>
+  <div style="width: 100%; height: 100%">
+    <arcgis
+      class="arcgis-layer"
+      @when="when"
+      ref="arcgis"
+      :data="arcgisData"
+      @clickMap="clickMap"
+    >
+      <template
+        v-for="(fan, index) of fans"
+        :key="index"
+        v-slot:[fan.attributes.code]
+      >
+        <svg
+          v-if="fan.attributes.code != '升压站'"
+          @click="clickFan(fan.attributes.code)"
+          class="can-click esri-component"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          viewBox="0 0 200 240"
+          enable-background="new 0 0 200 240"
+          xml:space="preserve"
+          width="66"
+          height="66"
+        >
+          <!-- 底座 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][2]"
+              d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
+                            c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z"
+            />
+          </g>
+          <!-- 后面的脑袋 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][0]"
+              d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
+                                c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z"
+            />
+          </g>
+          <!-- 柱 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][0]"
+              d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z"
+            />
+          </g>
+          <!-- 风扇 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][1]"
+              d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][1]"
+              d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
+                            M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z"
+            />
+            <animateTransform
+              v-if="fan.attributes.rotate"
+              attributeName="transform"
+              attributeType="XML"
+              type="rotate"
+              from="0 100 82"
+              to="359 100 82"
+              :dur="fan.attributes.dur + 's'"
+              repeatCount="indefinite"
+            />
+          </g>
+          <!-- 前面的尖 -->
+          <g>
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              :fill="colors[fan.attributes.state][2]"
+              d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
+                            c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z"
+            />
+          </g>
+          <!-- 文字 -->
+          <g>
+            <text
+              x="100"
+              y="240"
+              fill="#ffffff"
+              font-size="40"
+              text-anchor="middle"
+              alignment-baseline="baseline"
+            >
+              {{ fan.attributes.code }}
+            </text>
+          </g>
+        </svg>
+        <div v-if="fan.attributes.code == '升压站'">
+          <div class="syz-img">
+            <img :src="syzImg" />
+          </div>
+          <div class="white font-sm mr-t-8" style="text-align: center">
+            {{ fan.attributes.code }}
+          </div>
+        </div>
+      </template>
+    </arcgis>
+  </div>
+</template>
+
+<script>
+import arcgis from "./arcgis.vue";
+import dataService from "@/helper/data.js";
+
+export default {
+  // 名称
+  name: "Map",
+  // 使用组件
+  components: {
+    arcgis,
+  },
+  props: {
+    wpId: {
+      type: String,
+      default: "",
+    },
+  },
+  // 数据
+  data() {
+    return {
+      wpnumMap: {}, //风机监视数量
+      wpInfoMap: {}, //风机详情
+      fjmap: [], // 风机名
+      sourceId: "",
+      arcgisData: {
+        mode: "2D", // 模式 2D 3D
+        title: "宁夏地图", // 标题
+        center: [107.0391975, 37.31469028], // 初始中心点 106.230909, 38.487193
+        height: 654, // 3D地图初始相机高度
+        tilt: 65, // 俯视角
+        scale: 30000,
+        rotation: -45,
+        ox: -600,
+        oy: -50,
+      },
+      showPopup: false,
+      mapToolIndex: 0,
+      fans: [],
+      colors: {
+        0: ["#05bb4c", "#4ad476", "#9fedb2"],
+        1: ["#4b55ae", "#959dc7", "#d3d6e0"],
+        2: ["#BA3237", "#d4807d", "#eddad8"],
+        3: ["#606769", "#757575", "#AFAFAF"],
+        4: ["#e17e23", "#fabf78", "#ffebcc"],
+        5: ["#c531c7", "#e080dc", "#fadef7"],
+        6: ["#c531c7", "#e080dc", "#fadef7"],
+      },
+      syzImg: require("@assets/png/booster-station.png"),
+    };
+  },
+  created() {
+    let that = this;
+    that.sourceId = this.wpId;
+    that.$nextTick(() => {
+      that.requestData();
+    });
+  },
+  // 函数
+  methods: {
+    select(res) {
+      this.$router.replace({
+        path: `/monitor/windsite/map/${res.code}`,
+      });
+    },
+    // 风机状态监视
+    requestData() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "monitor/findGeneralAppearance",
+        data: {
+          wpId: that.wpId,
+        },
+        success(res) {
+          if (res.code == 200) {
+            that.wpnumMap = res.data.fczbmap.jczbmap;
+            that.wpInfoMap = res.data.wxssmap;
+            that.fjmap = res.data.fjmap[0];
+          }
+        },
+      });
+    },
+    when: function () {
+      let jsonObj = dataService.get("arcgis-nx-fc1");
+      this.fans = jsonObj;
+      jsonObj.forEach((item) => {
+        let obj = this.fjmap.find((t) => {
+          let wtid = t.wtId.replace("01_", "");
+          if (wtid == item.attributes.code) return t;
+        });
+        if (obj) {
+          item.attributes.state = String(obj.fjzt);
+        } else {
+          item.attributes.state = "4";
+        }
+        switch (item.attributes.state) {
+          case "0": //待机
+            item.attributes.rotate = false; // 转
+            item.attributes.dur = 8; // 转一圈时间
+            break;
+          case "1": //运行
+            item.attributes.rotate = true; // 转
+            item.attributes.dur = 2; // 转一圈时间
+            break;
+          case "2": //故障
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          case "3": //中断
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          case "4": //维护
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          case "5": //限电
+            item.attributes.rotate = true; // 转
+            item.attributes.dur = 6;
+            break;
+          case "6": //停机
+            item.attributes.rotate = false; // 不转
+            item.attributes.dur = 8;
+            break;
+          default:
+            item.attributes.rotate = false;
+            item.attributes.dur = 8;
+            break;
+        }
+        this.$refs.arcgis.addHtmlPoint(
+          [item.geometry.x, item.geometry.y],
+          item.attributes.code,
+          33,
+          50,
+          false
+        );
+      });
+      let lineJsonObj = dataService.get("arcgis-nx-fc1-line");
+      this.$refs.arcgis.addFanByJson(jsonObj, lineJsonObj);
+    },
+    clickMap: function (info) {
+      console.log(info);
+    },
+    clickFan: function (code) {
+      let wtId = code.replace("G", "G01_");
+      this.$router.push(`/monitor/windsite/info/${this.wpId}/${wtId}`);
+    },
+    popupBack: function () {
+      this.showPopup = false;
+    },
+    clickMapTool: function (index) {
+      //   this.mapToolIndex = index;
+      this.showPopup = !this.showPopup;
+    },
+  },
+  watch: {
+    wpId(res) {
+      this.sourceId = res;
+      if (res) {
+        this.requestData();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@titleHeight: 40px;
+
+.map-1 {
+  width: 100%;
+  height: calc(100vh - 90px);
+  display: flex;
+  flex-direction: column;
+
+  .btn-group-tabs {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .can-click {
+    cursor: pointer;
+  }
+
+  .syz-img {
+    width: 65px;
+    height: 47px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .panel-title {
+    width: 100%;
+    background-color: fade(@darkgray, 40%);
+    margin-top: 16px;
+    padding: 6px;
+    display: flex;
+    align-items: center;
+
+    .panel-title-name {
+      color: @green;
+      display: flex;
+      align-items: center;
+      line-height: 0;
+      font-size: 0;
+
+      i,
+      span {
+        margin: 0 0 0 16px;
+        line-height: 0;
+        font-size: 13px;
+      }
+    }
+
+    .sub-title-item {
+      display: flex;
+      align-items: center;
+      margin-left: 16px;
+
+      .sub-title {
+        font-size: 13px;
+        margin-left: 6px;
+      }
+
+      .sub-count {
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      img {
+        height: 31px;
+      }
+    }
+  }
+
+  .panel-body {
+    flex-grow: 1;
+    background-color: fade(@darkgray, 20%);
+    padding: 8px;
+    overflow: auto;
+    position: relative;
+
+    .arcgis-layer {
+      z-index: 1;
+    }
+
+    .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;
+          }
+        }
+      }
+    }
+
+    .map-tool {
+      position: absolute;
+      right: 22px;
+      top: 22px;
+      z-index: 2;
+      background: #152221af;
+      padding: 18px 14px;
+
+      .m-btn {
+        width: 124px;
+        height: 44px;
+        background: #152221bf;
+        border: 1px solid #152221bf;
+        color: #ffffff;
+        transition: all 0.3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        &:hover,
+        &.active {
+          background: #05bb4c33;
+          border: 1px solid #05bb4c;
+          color: #05bb4c;
+        }
+
+        + .m-btn {
+          margin-top: 16px;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/arcgis/PL_GDC.vue

@@ -0,0 +1,751 @@
+<template>
+  <div style="width: 100%; height: 100%">
+    <arcgis @when="when" ref="arcgis" :data="arcgisData" @clickMap="clickMap">
+      <template v-slot:content>
+        <div class="panel-box">
+          <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>
+</template>
+
+<script>
+import arcgis from "./arcgis.vue";
+import dataService from "@/helper/data.js";
+
+export default {
+  // 名称
+  name: "Map",
+  // 使用组件
+  components: {
+    arcgis,
+  },
+  props: {
+    wpId: {
+      type: String,
+      default: "",
+    },
+  },
+  // 数据
+  data() {
+    return {
+      wpnumMap: {}, //风机监视数量
+      wpInfoMap: {}, //风机详情
+      fjmap: [], // 风机名
+      sourceId: "",
+      arcgisData: {
+        mode: "2D", // 模式 2D 3D
+        title: "宁夏地图", // 标题
+        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: "" },
+      ],
+    };
+  },
+  created() {
+    let that = this;
+    that.sourceId = this.wpId;
+    that.$nextTick(() => {});
+  },
+  // 函数
+  methods: {
+    when: function () {
+      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;
+    },
+  },
+  watch: {
+    wpId(res) {
+      this.sourceId = res;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+@titleHeight: 40px;
+
+.map-1 {
+  width: 100%;
+  height: calc(100vh - 90px);
+  display: flex;
+  flex-direction: column;
+
+  .btn-group-tabs {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .can-click {
+    cursor: pointer;
+  }
+
+  .syz-img {
+    width: 65px;
+    height: 47px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .panel-title {
+    width: 100%;
+    background-color: fade(@darkgray, 40%);
+    margin-top: 16px;
+    padding: 6px;
+    display: flex;
+    align-items: center;
+
+    .panel-title-name {
+      color: @green;
+      display: flex;
+      align-items: center;
+      line-height: 0;
+      font-size: 0;
+
+      i,
+      span {
+        margin: 0 0 0 16px;
+        line-height: 0;
+        font-size: 13px;
+      }
+    }
+
+    .sub-title-item {
+      display: flex;
+      align-items: center;
+      margin-left: 16px;
+
+      .sub-title {
+        font-size: 13px;
+        margin-left: 6px;
+      }
+
+      .sub-count {
+        font-size: 13px;
+        font-weight: 500;
+      }
+
+      img {
+        height: 31px;
+      }
+    }
+  }
+
+  .panel-body {
+    flex-grow: 1;
+    background-color: fade(@darkgray, 20%);
+    padding: 8px;
+    overflow: auto;
+    position: relative;
+
+    .arcgis-layer {
+      z-index: 1;
+    }
+
+    .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;
+          }
+        }
+      }
+    }
+
+    .map-tool {
+      position: absolute;
+      right: 22px;
+      top: 22px;
+      z-index: 2;
+      background: #152221af;
+      padding: 18px 14px;
+
+      .m-btn {
+        width: 124px;
+        height: 44px;
+        background: #152221bf;
+        border: 1px solid #152221bf;
+        color: #ffffff;
+        transition: all 0.3s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        &:hover,
+        &.active {
+          background: #05bb4c33;
+          border: 1px solid #05bb4c;
+          color: #05bb4c;
+        }
+
+        + .m-btn {
+          margin-top: 16px;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -77,7 +77,7 @@ export default {
     // 颜色
     color: {
       type: Array,
-      default: () => ["#323E6F", "#1DA0D7", "#02BB4C", "#DB5520", "#EDB32F", "#EDEB2F"],
+      default: () => ["#323E6F", "#e17e23", "#ba3237#", "c531c7", "#ffffff", "#EDEB2F"],
     },
     // 每页显示个数
     pageSize: {
@@ -97,16 +97,14 @@ export default {
       return this.bardata.legend;
     },
     end() {
-      var result = 100;
-      if (this.areaData && this.areaData.length > 0) {
+      var result = 20;
+      if (this.areaData) {
         result = parseInt((this.pageSize / this.areaData.length) * 100);
       }
-
       return result;
     },
   },
   methods: {
-    resize() {},
     initChart() {
       let chart = echarts.init(this.$el);
       let option = {
@@ -278,14 +276,7 @@ export default {
           },
         });
       }
-console.log(JSON.stringify(option))
       chart.setOption(option);
-
-      this.resize = function() {
-        chart.resize();
-      };
-
-      window.addEventListener("resize", this.resize);
     },
   },
   created() {
@@ -309,8 +300,11 @@ console.log(JSON.stringify(option))
       this.initChart();
     });
   },
-  unmounted() {
-    window.removeEventListener("resize", this.resize);
+  beforeUpdate(){
+	  this.areaData = this.bardata.area;
+  },
+  beforeUpdate(){
+  	  this.areaData = this.bardata.area;
   },
   watch: {
     bardata(val) {

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

@@ -210,7 +210,6 @@ export default {
   watch: {
     barData: {
       handler(newValue, oldValue) {
-        console.warn(newValue);
         this.newbarData = newValue;
         this.initChart();
       },
@@ -218,7 +217,6 @@ export default {
     },
     lineData : {
       handler(newValue, oldValue) {
-        console.warn(newValue);
         this.newlineData = newValue;
         this.initChart();
       },

src/router/index.js

@@ -88,7 +88,6 @@ const routes = [{
 	},
 	{
 		path: '/decision3db', //单机横向对比
-		name: 'decision3db',
 		component: () => import( /* webpackChunkName: "decision3db" */
 			'../views/Decision/Decision3Db.vue'),
 	},
@@ -112,6 +111,17 @@ const routes = [{
 	]
 },
 {
+	path: '/decision3db', //单机横向对比
+	name: 'decision3db',
+	component: () => import( /* webpackChunkName: "decision3db" */
+		'../views/Decision/Decision3Db.vue'),
+},
+{
+	path: '/windAnalysis/fx', // 风向
+	name: 'fxzstmain',
+	component: () => import('../views/windAnalysis/fxzstmain.vue'),
+},
+{
 	path: '/monitor/lightmatrix', // 光伏明细矩阵
 	name: 'LightMatrix',
 	component: () =>

src/views/Decision/Decision1.vue

@@ -1,473 +1,537 @@
 <template>
-	<div class="decision-page-1">
-		<!-- 查询样式统一处理 样式在 assets/styles/form.less 文件中 -->
-		<div class="query mg-b-8">
-			<div class="query-items">
-				<div class="query-item">
-					<div class="lable">场站：</div>
-					<div class="search-input">
-						<el-select v-model="value1" @change="ChangZhanChange(value1)" clearable placeholder="请选择"
-							popper-class="select">
-							<el-option v-for="item in ChangZhan" :key="item.id" :value="item.id" :label="item.name">
-							</el-option>
-						</el-select>
-					</div>
-				</div>
-				<div class="query-item">
-					<div class="lable">项目：</div>
-					<div class="search-input">
-						<el-select v-model="value2" @change="XiangMuChange(value2)" multiple placeholder="请选择"
-							popper-class="select">
-							<el-option v-for="item in XiangMu" :key="item.id" :value="item.id" :label="item.name">
-							</el-option>
-						</el-select>
-					</div>
-				</div>
-				<div class="query-item">
-					<div class="lable">线路：</div>
-					<div class="search-input">
-						<el-select v-model="value3" @change="XianLuChange(value3)" multiple placeholder="请选择"
-							popper-class="select">
-							<el-option v-for="item in XianLu" :key="item.id" :label="item.name" :value="item.id">
-							</el-option>
-						</el-select>
-					</div>
-				</div>
-				<div class="query-item">
-					<div class="lable">开始日期：</div>
-					<div class="search-input">
-						<el-date-picker v-model="value4" @change="BeginChange(value4)" type="date"
-							value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
-						</el-date-picker>
-					</div>
-				</div>
-				<div class="query-item">
-					<div class="lable">结束日期：</div>
-					<div class="search-input">
-						<el-date-picker v-model="value5" @change="EndChange(value5)" type="date"
-							value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
-						</el-date-picker>
-						<div class="unit svg-icon svg-icon-gray">
-							<svg-icon :svgid="''" />
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="query-actions">
-				<button class="btn green">搜索</button>
-				<button class="btn" @click="mxClick()">明细信息</button>
-				<button class="btn">导出</button>
-			</div>
-		</div>
-		<div class="actions mg-b-8">
-			<button class="btn" :class="TypeClass==1?'green':''" @click="TypeClick(1)">风场</button>
-			<button class="btn" :class="TypeClass==2?'green':''" @click="TypeClick(2)">项目</button>
-			<button class="btn" :class="TypeClass==3?'green':''" @click="TypeClick(3)">集电线路</button>
-		</div>
-		<el-row :type="'flex'" class="content">
-			<el-col :span="12" class="pd-r-8">
-				<toolbar-panel title="风机绩效榜" :showLine="false">
-					<bar-line-chart :height="'calc(100vh - 180px)'" :bardata="bardata" :lineData="lineData"
-						:color="barColor" lineName="理论发电量" />
-				</toolbar-panel>
-			</el-col>
-			<el-col :span="12" class="pd-l-8">
-				<panel :title="'项目列表'" :showLine="false">
-					<div class="project-table">
-						<!-- 分页Table -->
-						<Table :data="tableData"
-							:height="'calc(80vh - 50px)'">
-							<template v-slot:tr v-if="tableData.data.length > 0">
-								<tr>
-									<td style="width: 50px;">
-										{{tableDataEnd.index}}
-									</td>
-									<td>
-										{{tableDataEnd.name}}
-									</td>
-									<td>
-										{{tableDataEnd.llfdl}}
-									</td>
-									<td>
-										{{tableDataEnd.sjfdl}}
-									</td>
-									<td>
-										{{tableDataEnd.speed}}
-									</td>
-									<td>
-										{{tableDataEnd.fjhjx}}
-									</td>
-									<td>
-										{{tableDataEnd.jhjx}}
-									</td>
-									<td>
-										{{tableDataEnd.sl}}
-									</td>
-									<td>
-										{{tableDataEnd.xd}}
-									</td>
-									<td>
-										{{tableDataEnd.xn}}
-									</td>
-									<td>
-										{{tableDataEnd.fnlly}}
-									</td>
-								</tr>
-							</template>
-						</Table>
-						<!-- <Table :data="tableData"></Table> -->
-					</div>
-				</panel>
-			</el-col>
-		</el-row>
-	</div>
+  <div class="decision-page-1">
+    <!-- 查询样式统一处理 样式在 assets/styles/form.less 文件中 -->
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">场站：</div>
+          <div class="search-input">
+            <el-select
+              v-model="value1"
+              @change="ChangZhanChange(value1)"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+            >
+              <el-option
+                v-for="item in ChangZhan"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">项目：</div>
+          <div class="search-input">
+            <el-select
+              v-model="value2"
+              @change="XiangMuChange(value2)"
+              multiple
+              placeholder="请选择"
+              popper-class="select"
+            >
+              <el-option
+                v-for="item in XiangMu"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">线路：</div>
+          <div class="search-input">
+            <el-select
+              v-model="value3"
+              @change="XianLuChange(value3)"
+              multiple
+              placeholder="请选择"
+              popper-class="select"
+            >
+              <el-option
+                v-for="item in XianLu"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">开始日期：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="value4"
+              @change="BeginChange(value4)"
+              type="date"
+              value-format="YYYY-MM-DD"
+              placeholder="选择日期"
+              popper-class="date-select"
+            >
+            </el-date-picker>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">结束日期：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="value5"
+              @change="EndChange(value5)"
+              type="date"
+              value-format="YYYY-MM-DD"
+              placeholder="选择日期"
+              popper-class="date-select"
+            >
+            </el-date-picker>
+            <div class="unit svg-icon svg-icon-gray">
+              <svg-icon :svgid="''" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions">
+        <button class="btn green">搜索</button>
+        <button class="btn" @click="mxClick()">明细信息</button>
+        <button class="btn" @click="exportExcel()">导出</button>
+      </div>
+    </div>
+    <div class="actions mg-b-8">
+      <button
+        class="btn"
+        :class="TypeClass == 1 ? 'green' : ''"
+        @click="TypeClick(1)"
+      >
+        风场
+      </button>
+      <button
+        class="btn"
+        :class="TypeClass == 2 ? 'green' : ''"
+        @click="TypeClick(2)"
+      >
+        项目
+      </button>
+      <button
+        class="btn"
+        :class="TypeClass == 3 ? 'green' : ''"
+        @click="TypeClick(3)"
+      >
+        集电线路
+      </button>
+    </div>
+    <el-row :type="'flex'" class="content">
+      <el-col :span="12" class="pd-r-8">
+        <toolbar-panel title="风机绩效榜" :showLine="false">
+          <bar-line-chart
+            :height="'calc(100vh - 200px)'"
+            :bardata="bardata"
+            :lineData="lineData"
+            :color="barColor"
+            lineName="理论发电量"
+          />
+        </toolbar-panel>
+      </el-col>
+      <el-col :span="12" class="pd-l-8">
+        <panel :title="'项目列表'" :showLine="false">
+          <div class="project-table">
+            <!-- 分页Table -->
+            <Table
+              :data="tableData"
+              :pageSize="20"
+              @onPagging="onChangePage"
+              :height="'calc(100vh - 32vh)'"
+            ></Table>
+            <!-- <Table :data="tableData"></Table> -->
+          </div>
+        </panel>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
-	import BarLineChart from "../../components/chart/combination/bar-line-chart.vue";
-	import Panel from "../../components/coms/panel/panel.vue";
-	import SvgIcon from "../../components/coms/icon/svg-icon.vue";
-	import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
-	import Table from "./table.vue";
-	import partten from "@/helper/partten.js";
-	export default {
-		components: {
-			ToolbarPanel,
-			BarLineChart,
-			Panel,
-			Table,
-			partten,
-			SvgIcon
-		},
-		data() {
-			return {
-				tableData: {
-					column: [{
-							name: "",
-							field: "index",
-							is_num: false,
-							is_light: false,
-							width: "50px",
-						},
-						{
-							name: "名称",
-							field: "name",
-							is_num: false,
-							is_light: false,
-						},
-						{
-							name: "理论发电量",
-							field: "llfdl",
-							is_num: false,
-							is_light: false,
-							sortable: true
-						},
-						{
-							name: "SCADA发电量",
-							field: "sjfdl",
-							is_num: false,
-							is_light: false,
-							sortable: true
-						},
-						{
-							name: "风速",
-							field: "speed",
-							is_num: false,
-							is_light: false,
-							sortable: true
-						},
-						{
-							name: "非计划检修",
-							field: "fjhjx",
-							is_num: false,
-							is_light: false,
-							sortable: true
-						},
-						{
-							name: "计划检修",
-							field: "jhjx",
-							is_num: false,
-							is_light: false,
-							sortable: true
-						},
-						{
-							name: "受累",
-							field: "sl",
-							is_num: false,
-							is_light: false,
-							sortable: true
-						},
-						{
-							name: "限电",
-							field: "xd",
-							is_num: false,
-							is_light: false,
-							sortable: true
-						},
-						{
-							name: "性能",
-							field: "xn",
-							is_num: false,
-							is_light: false,
-							sortable: true
-						},
-						{
-							name: "风能利用率%",
-							field: "fnlly",
-							is_num: false,
-							is_light: false,
-							sortable: true
-						}
-					],
-					data: [],
-				},
-				tableDataEnd: [], //合计
-				ChangZhan: [], //场站
-				XiangMu: [], //项目
-				XianLu: [], //线路
-				value1: [],
-				value2: [],
-				value3: [],
-				value4: "",
-				value5: "",
-				barColor:['#4b55ae','#e17e23','#ba3237','#c531c7','#ffffff','#05bb4c'],
-				TypeClass: 1, //风场，项目，集电线路 的按钮颜色，默认第一个
-				bardata: [],
-				lineData: [],
-			};
-		},
-		created() {
-			this.ChangZhanVal();
-			this.value4 = this.getTime(1);
-			this.value5 = this.getTime(2);
-			this.AjaxCommon();
-		},
-		methods: {
-			ChangZhanVal() {
-				var that = this;
-				that.API.requestData({
-					method: "GET",
-					baseURL: "http://10.155.32.4:9001/",
-					subUrl: "benchmarking/wplist",
-					success(res) {
-						that.ChangZhan = res.data;
-					}
-				});
-			},
-			ChangZhanChange(val) {
-				this.TypeClass = "";
-				this.value1 = val;
-				this.value2 = [];
-				this.value3 = [];
-				this.AjaxCommon();
-				this.XiangMuVal(val);
-			},
-			XiangMuVal(val) {
-				var that = this;
-				that.API.requestData({
-					method: "GET",
-					baseURL: "http://10.155.32.4:9001/",
-					subUrl: "benchmarking/projectList",
-					data: {
-						wpids: val
-					},
-					success(res) {
-						that.XiangMu = res.data;
-					}
-				});
-			},
-			XiangMuChange(val) {
-				this.TypeClass = "";
-				this.value2 = val;
-				this.value3 = [];
-				this.AjaxCommon();
-				this.XianLuVal(val);
-			},
-			XianLuVal(val) {
-				var that = this;
-				that.API.requestData({
-					method: "GET",
-					baseURL: "http://10.155.32.4:9001/",
-					subUrl: "benchmarking/lineList",
-					data: {
-						projects: val
-					},
-					success(res) {
-						that.XianLu = res.data;
-					}
-				});
-			},
-			XianLuChange(val) {
-				this.TypeClass = "";
-				this.value3 = val;
-				this.AjaxCommon();
-			},
-			BeginChange(val) {
-				this.value4 = val;
-				this.AjaxCommon();
-			},
-			EndChange(val) {
-				this.value5 = val;
-				this.AjaxCommon();
-			},
-			TypeClick(val) {
-				this.TypeClass = val;
-				// 重置状态start
-				this.value1 = [];
-				this.value2 = [];
-				this.value3 = [];
-				this.value4 = this.getTime(1);
-				this.value5 = this.getTime(2);
-				this.AjaxCommon();
-				// 重置状态end
-			},
-			getTime(val) { //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
-				var date = new Date();
-				var year = date.getFullYear(),
-					month = date.getMonth() + 1,
-					day = date.getDate();
-				month >= 1 && month <= 9 ? (month = '0' + month) : '';
-				day >= 0 && day <= 9 ? (day = '0' + day) : '';
-				var begin = year + '-' + month + '-01';
-				var end = year + '-' + month + '-' + day;
-				if (val == 1) {
-					return begin;
-				} else if (val == 2) {
-					return end;
-				}
-			},
-			AjaxCommon() {
-				var that = this;
-				that.API.requestData({
-					method: "GET",
-					baseURL: "http://10.155.32.4:9001/",
-					subUrl: "benchmarking/fjjxb",
-					data: {
-						wpids: that.value1,
-						projectids: that.value2,
-						lineids: that.value3,
-						beginDate: that.value4,
-						endDate: that.value5,
-						type: that.TypeClass,
-						target: '',
-						sort: ''
-					},
-					success(res) {
-						console.log(res)
-						var name = [],
-							data = [],
-							llfdl = [],
-							legend = ["实际电量", "计划检修损失", "非计划检修损失", "限电损失", "受累损失", "性能损失"],
-							data2 = []; //项目列表
-						res.data.forEach((item, index) => {
-							name.push(item.name);
-							data.push([item.sjfdl, item.jhjx, item.fjhjx, item.xd, item.sl, item.xn])
-							llfdl.push(item.llfdl);
-							data2.push({
-								index: index + 1,
-								name: item.name,
-								llfdl: item.llfdl,
-								sjfdl: item.sjfdl,
-								speed: item.speed,
-								fjhjx: item.fjhjx,
-								jhjx: item.jhjx,
-								sl: item.sl,
-								xd: item.xd,
-								xn: item.xn,
-								fnlly: item.fnlly,
-								is_light: false
-							})
-						})
-						name.pop();
-						data.pop();
-						llfdl.pop();
-						if (data.length > 0) {
-							let arr1 = [];
-							const length = data[0].length;
-							for (var i = 0; i < length; i++) {
-								let arr2 = [];
-								data.forEach(ele => {
-									arr2.push(ele[i])
-								});
-								arr1.push(arr2);
-							}
-							that.lineData = llfdl;
-							that.bardata = {
-								area: name,
-								legend: legend,
-								data: arr1
-							};
+import BarLineChart from "../../components/chart/combination/bar-line-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
+import Table from "../../components/coms/table/table.vue";
+import partten from "@/helper/partten.js";
+export default {
+  components: {
+    ToolbarPanel,
+    BarLineChart,
+    Panel,
+    Table,
+    partten,
+    SvgIcon,
+  },
+  data() {
+    return {
+      tableData: {
+        column: [
+          {
+            name: "",
+            field: "index",
+            is_num: false,
+            is_light: false,
+            width: "50px",
+          },
+          {
+            name: "名称",
+            field: "name",
+            is_num: false,
+            is_light: false,
+          },
+          {
+            name: "理论发电量",
+            field: "llfdl",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "SCADA发电量",
+            field: "sjfdl",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "风速",
+            field: "speed",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "非计划检修",
+            field: "fjhjx",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "计划检修",
+            field: "jhjx",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "受累",
+            field: "sl",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "限电",
+            field: "xd",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "性能",
+            field: "xn",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "风能利用率%",
+            field: "fnlly",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+        ],
+        data: [],
+      },
+      ChangZhan: [], //场站
+      XiangMu: [], //项目
+      XianLu: [], //线路
+      value1: [],
+      value2: [],
+      value3: [],
+      value4: "",
+      value5: "",
+      barColor: [
+        partten.getColor("purple"),
+        partten.getColor("orange"),
+        partten.getColor("red"),
+        partten.getColor("pink"),
+        partten.getColor("grayl"),
+        partten.getColor("green"),
+      ],
+      TypeClass: 1, //风场，项目，集电线路 的按钮颜色，默认第一个
+      bardata: [],
+      lineData: [],
+    };
+  },
+  created() {
+    this.ChangZhanVal();
+    this.value4 = this.getTime(1);
+    this.value5 = this.getTime(2);
+    this.AjaxCommon();
+  },
+  methods: {
+    ChangZhanVal() {
+      var that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://10.155.32.4:9001/",
+        subUrl: "benchmarking/wplist",
+        success(res) {
+          that.ChangZhan = res.data;
+        },
+      });
+    },
+    ChangZhanChange(val) {
+      this.TypeClass = "";
+      this.value1 = val;
+      this.value2 = [];
+      this.value3 = [];
+      this.AjaxCommon();
+      this.XiangMuVal(val);
+    },
+    XiangMuVal(val) {
+      var that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://10.155.32.4:9001/",
+        subUrl: "benchmarking/projectList",
+        data: {
+          wpids: val,
+        },
+        success(res) {
+          that.XiangMu = res.data;
+        },
+      });
+    },
+    XiangMuChange(val) {
+      this.TypeClass = "";
+      this.value2 = val;
+      this.value3 = [];
+      this.AjaxCommon();
+      this.XianLuVal(val);
+    },
+    XianLuVal(val) {
+      var that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://10.155.32.4:9001/",
+        subUrl: "benchmarking/lineList",
+        data: {
+          projects: val,
+        },
+        success(res) {
+          that.XianLu = res.data;
+        },
+      });
+    },
+    XianLuChange(val) {
+      this.TypeClass = "";
+      this.value3 = val;
+      this.AjaxCommon();
+    },
+    BeginChange(val) {
+      this.value4 = val;
+      this.AjaxCommon();
+    },
+    EndChange(val) {
+      this.value5 = val;
+      this.AjaxCommon();
+    },
+    TypeClick(val) {
+      this.TypeClass = val;
+      // 重置状态start
+      this.value1 = [];
+      this.value2 = [];
+      this.value3 = [];
+      this.value4 = this.getTime(1);
+      this.value5 = this.getTime(2);
+      this.AjaxCommon();
+      // 重置状态end
+    },
+    getTime(val) {
+      //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
+      var date = new Date();
+      var year = date.getFullYear(),
+        month = date.getMonth() + 1,
+        day = date.getDate();
+      month >= 1 && month <= 9 ? (month = "0" + month) : "";
+      day >= 0 && day <= 9 ? (day = "0" + day) : "";
+      var begin = year + "-" + month + "-01";
+      var end = year + "-" + month + "-" + day;
+      if (val == 1) {
+        return begin;
+      } else if (val == 2) {
+        return end;
+      }
+    },
+    AjaxCommon() {
+      var that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://10.155.32.4:9001/",
+        subUrl: "benchmarking/fjjxb",
+        data: {
+          wpids: that.value1,
+          projectids: that.value2,
+          lineids: that.value3,
+          beginDate: that.value4,
+          endDate: that.value5,
+          type: that.TypeClass,
+          target: "",
+          sort: "",
+        },
+        success(res) {
+          var name = [],
+            data = [],
+            llfdl = [],
+            legend = [
+              "实际电量",
+              "计划检修损失",
+              "非计划检修损失",
+              "限电损失",
+              "受累损失",
+              "性能损失",
+            ],
+            data2 = []; //项目列表
+          res.data.forEach((item, index) => {
+            name.push(item.name);
+            data.push([
+              item.sjfdl,
+              item.jhjx,
+              item.fjhjx,
+              item.xd,
+              item.sl,
+              item.xn,
+            ]);
+            llfdl.push(item.llfdl);
+            data2.push({
+              index: index + 1,
+              name: item.name,
+              llfdl: item.llfdl,
+              sjfdl: item.sjfdl,
+              speed: item.speed,
+              fjhjx: item.fjhjx,
+              jhjx: item.jhjx,
+              sl: item.sl,
+              xd: item.xd,
+              xn: item.xn,
+              fnlly: item.fnlly,
+              is_light: false,
+            });
+          });
+          name.pop();
+          data.pop();
+          llfdl.pop();
+          if (data.length > 0) {
+            let arr1 = [];
+            const length = data[0].length;
+            for (var i = 0; i < length; i++) {
+              let arr2 = [];
+              data.forEach((ele) => {
+                arr2.push(ele[i]);
+              });
+              arr1.push(arr2);
+            }
+            that.lineData = llfdl;
+            that.bardata = {
+              area: name,
+              legend: legend,
+              data: arr1,
+            };
+          }
+          that.tableData.data = data2;
+        },
+      });
+    },
+    mxClick() {
+      this.$router.push("/decision/decision1Mx");
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map((v) => filterVal.map((j) => v[j]));
+    },
+    exportExcel() {
+      let that = this;
+      const { export_json_to_excel } = require("@tools/excel/Export2Excel.js"); // 注意这个Export2Excel路径
+      let tHeader = []; // 上面设置Excel的表格第一行的标题
+      let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值
 
-						}
-						that.tableDataEnd = data2[data2.length - 1];
-						data2.pop();
-						that.tableData.data = data2;
-					}
-				});
-			},
-			mxClick() {
-				this.$router.push("/decision/decision1Mx")
-			},
-			onChangePage(params) {
-				console.log(params);
-			},
-		}
-	};
+      that.tableData.column.forEach((ele) => {
+        tHeader.push(ele.name);
+        filterVal.push(ele.field);
+      });
+
+      var list = that.tableData.data
+      const data = that.formatJson(filterVal, list);
+      export_json_to_excel(tHeader, data, "导出的Excel"); // 最后一个是表名字
+    },
+  },
+};
 </script>
 
 <style lang="less">
-	.decision-page-1 {
-		.com-panel .panel-title {
-			line-height: 3.4259vh;
-		}
+.decision-page-1 {
+  .com-panel .panel-title {
+    line-height: 3.4259vh;
+  }
 
-		.tools {
-			display: flex;
-			line-height: 3.4259vh;
+  .tools {
+    display: flex;
+    line-height: 3.4259vh;
 
-			.tool-block {
-				display: flex;
-				align-items: center;
-				margin-left: 0.741vh;
+    .tool-block {
+      display: flex;
+      align-items: center;
+      margin-left: 0.741vh;
 
-				.legend {
-					flex: auto;
-					width: 0.741vh;
-					height: 0.741vh;
-					margin-right: 0.741vh;
+      .legend {
+        flex: auto;
+        width: 0.741vh;
+        height: 0.741vh;
+        margin-right: 0.741vh;
 
-					&.long {
-						width: 2.963vh;
-						height: 0.37vh;
-					}
-				}
+        &.long {
+          width: 2.963vh;
+          height: 0.37vh;
+        }
+      }
 
-				.legend-text {
-					color: @gray-l;
-					font-size: @fontsize-s;
-				}
-			}
-		}
+      .legend-text {
+        color: @gray-l;
+        font-size: @fontsize-s;
+      }
+    }
+  }
 
-		.project-table {
-			overflow: auto;
+  .project-table {
+    overflow: auto;
 
-			tbody {
-				height: calc(100vh - 24.5vh);
-			}
+    tbody {
+      height: calc(100vh - 24.5vh);
+    }
 
-			td {
-				color: #b2bdc0;
-			}
-		}
+    td {
+      color: #b2bdc0;
+    }
+  }
 
-		.contentMx {
-			width: 100%;
-			overflow-x: auto;
-		}
+  .contentMx {
+    width: 100%;
+    overflow-x: auto;
+  }
 
-		.activeMx {
-			width: 150%;
-		}
-	}
+  .activeMx {
+    width: 150%;
+  }
+}
 </style>

src/views/Decision/Decision1Mx.vue

@@ -56,7 +56,7 @@
 			<div class="query-actions">
 				<button class="btn" @click="mxClick()">搜索</button>
 				<button class="btn green">明细信息</button>
-				<button class="btn">导出</button>
+				<button class="btn" @click="exportExcel()">导出</button>
 			</div>
 		</div>
 		<div class="actions mg-b-8">
@@ -483,7 +483,6 @@
 								legend: legend,
 								data: arr1
 							};
-
 						}
 						that.tableDataEnd = data2[data2.length - 1];
 						data2.pop();
@@ -494,9 +493,28 @@
 			mxClick() {
 				this.$router.push("/decision/decision1")
 			},
-			thClick: function(i) {
-				console.log(i) // 当子组件触发按钮时，msg获取值为 哈哈啊哈哈
-			}
+			formatJson (filterVal, jsonData) {
+			  return jsonData.map(v => filterVal.map(j => v[j]));
+			},
+			exportExcel () {
+			  let that = this;
+			  const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      
+			  let tHeader = []; // 上面设置Excel的表格第一行的标题       
+			  let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值
+			
+			  that.tableData.column.forEach(ele => {
+			      tHeader.push(ele.name);
+			      filterVal.push(ele.field);
+			  });
+			
+			  var list = [];
+			  that.tableData.data.forEach((i,index) =>{
+				  list.push(i);
+			  })
+			  list.push(that.tableDataEnd)
+			  const data = that.formatJson(filterVal, list);
+			  export_json_to_excel(tHeader, data, '导出的Excel'); // 最后一个是表名字
+			},
 		}
 	};
 </script>

src/views/Decision/Decision2Xmdb.vue

@@ -53,7 +53,7 @@
 			<toolbar-panel title="项目对标" :showLine="false"></toolbar-panel>
 			<div class="mg-b-16">
 				<div class="project-table">
-					<Table :data="tableData" :canScroll="false" ref="curRef" @onSort="onSort"></Table>
+					<Table :data="tableData" :canScroll="false" ref="curRef"></Table>
 				</div>
 			</div>
 			<el-row class="mg-b-16">
@@ -79,7 +79,7 @@
 			<el-col :span="24" class="pd-l-8">
 				<panel :title="'风机对标列表明细'" :showLine="false">
 					<div class="project-table">
-						<Table :data="tableDataDetail" ref="curRef" @onSort="onSort"></Table>
+						<Table :data="tableDataDetail" ref="curRef"></Table>
 					</div>
 				</panel>
 			</el-col>
@@ -98,7 +98,7 @@
 	import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
 	import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 	import Panel from "../../components/coms/panel/panel.vue";
-	import Table from "./table.vue";
+	import Table from "../../components/coms/table/table.vue";
 	import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
 	import Dayinfo from "./dayinfo.vue";
 	export default {
@@ -355,7 +355,6 @@
 
 											dataTab.push({ //表格
 												index: index + 1,
-												fdl:item.fdl,
 												name: item.name,
 												zhpm: item.zhpm,
 												gzssdl: item.gzssdl,
@@ -399,13 +398,6 @@
 						},
 						{
 							name: "",
-							field: "fdl",
-							is_num: false,
-							is_light: false,
-							display:"none",
-						},
-						{
-							name: "",
 							field: "check",
 							is_num: false,
 							is_light: false,
@@ -597,7 +589,7 @@
 			this.ChangZhanVal();
 			this.value4 = this.getTime(1);
 			this.value5 = this.getTime(2);
-			this.AjaxCommon();
+			// this.AjaxCommon();
 		},
 		methods: {
 			ChangZhanVal() {
@@ -607,7 +599,9 @@
 					baseURL: "http://10.155.32.4:9001/",
 					subUrl: "benchmarking/wplist",
 					success(res) {
+						that.value1.push(res.data[0].id)
 						that.ChangZhan = res.data;
+						that.AjaxCommon();
 					}
 				});
 			},
@@ -938,9 +932,6 @@
 			back() {
 				this.detailShow = 1;
 				this.clearDb();
-			},
-			onSort(){
-				this.clearDb();
 			}
 		}
 	};

src/views/Home/Home.vue

@@ -571,7 +571,7 @@ export default {
             }]
           };
 
-          let glKey = ["value1", "value2", "value3", "value4", "value5", "value6"];
+          let glKey = ["value1", "value2", "value3", "value4", "value5", "value6", "value7"];
           let Powertrend = {
             // 图表所用单位
             units: ["(MW)", "(m/s)"],
@@ -599,6 +599,10 @@ export default {
               title: "平均风速",
               yAxisIndex: 1,
               value: []
+            }, {
+              title: "24小时功率",
+              yAxisIndex: 0,
+              value: []
             }]
           };
 
@@ -614,7 +618,7 @@ export default {
           glKey.forEach((keyEle, keyIndex) => {
             res.data.glvos.forEach(cEle => {
               Powertrend.value[keyIndex].value.push({
-                text: new Date(cEle.time).formatDate("hh:mm:ss"),
+                text: new Date(cEle.time).formatDate("hh:mm"),
                 value: cEle[keyEle]
               });
             });

src/views/Home/components/map.vue

@@ -187,11 +187,11 @@ export default {
   // 使用组件
   components: {
     SvgMapNX,
+    MHSFDC,
     XSFDC,
     NSSFDC,
     QSFDC,
     SBQFDC,
-    MHSFDC,
     SvgIcon,
   },
   props: {

src/views/Home/components/map/NSS_FDC.vue

@@ -206,7 +206,11 @@
       </g>
 
       <g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS01_GC'"
+          @click.stop="clickFj('NSS03_XL', '牛首山3#')"
+        >
           <use xlink:href="#nx-map-line" x="220" y="45" />
           <use xlink:href="#nx-map-circle" x="220" y="45" />
           <rect
@@ -220,10 +224,14 @@
           />
           <text x="250" y="57" fill="#919697" font-size="14">3#集电线</text>
           <text x="370" y="57" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS03_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS01_GC'"
+          @click.stop="clickFj('NSS02_XL', '牛首山2#')"
+        >
           <use xlink:href="#nx-map-line" x="320" y="5" />
           <use xlink:href="#nx-map-circle" x="320" y="5" />
           <rect
@@ -237,10 +245,14 @@
           />
           <text x="350" y="17" fill="#919697" font-size="14">2#集电线</text>
           <text x="470" y="17" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS02_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS01_GC'"
+          @click.stop="clickFj('NSS01_XL', '牛首山1#')"
+        >
           <use xlink:href="#nx-map-line" x="380" y="5" />
           <use xlink:href="#nx-map-circle" x="380" y="5" />
           <rect
@@ -254,10 +266,14 @@
           />
           <text x="415" y="47" fill="#919697" font-size="14">1#集电线</text>
           <text x="535" y="47" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS01_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS03_GC'"
+          @click.stop="clickFj('NSS08_XL', '牛首山8#')"
+        >
           <use xlink:href="#nx-map-line" x="600" y="5" />
           <use xlink:href="#nx-map-circle" x="600" y="5" />
           <rect
@@ -271,10 +287,14 @@
           />
           <text x="630" y="17" fill="#919697" font-size="14">8#集电线</text>
           <text x="750" y="17" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS08_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS03_GC'"
+          @click.stop="clickFj('NSS09_XL', '牛首山9#')"
+        >
           <use xlink:href="#nx-map-line" x="650" y="55" />
           <use xlink:href="#nx-map-circle" x="650" y="55" />
           <rect
@@ -288,10 +308,14 @@
           />
           <text x="680" y="67" fill="#919697" font-size="14">9#集电线</text>
           <text x="800" y="67" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS09_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS02_GC'"
+          @click.stop="clickFj('NSS04_XL', '牛首山4#')"
+        >
           <use xlink:href="#nx-map-line" x="20" y="112" />
           <use xlink:href="#nx-map-circle" x="20" y="112" />
           <rect
@@ -305,10 +329,14 @@
           />
           <text x="50" y="124" fill="#919697" font-size="14">4#集电线</text>
           <text x="170" y="124" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS04_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS02_GC'"
+          @click.stop="clickFj('NSS05_XL', '牛首山5#')"
+        >
           <use xlink:href="#nx-map-line" x="40" y="162" />
           <use xlink:href="#nx-map-circle" x="40" y="162" />
           <rect
@@ -322,10 +350,14 @@
           />
           <text x="70" y="174" fill="#919697" font-size="14">5#集电线</text>
           <text x="190" y="174" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS05_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS03_GC'"
+          @click.stop="clickFj('NSS07_XL', '牛首山7#')"
+        >
           <use xlink:href="#nx-map-line" x="400" y="202" />
           <use xlink:href="#nx-map-circle" x="400" y="202" />
           <rect
@@ -339,10 +371,14 @@
           />
           <text x="430" y="214" fill="#919697" font-size="14">7#集电线</text>
           <text x="550" y="214" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS07_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'NSS02_GC'"
+          @click.stop="clickFj('NSS06_XL', '牛首山6#')"
+        >
           <use xlink:href="#nx-map-line" x="370" y="122" />
           <use xlink:href="#nx-map-circle" x="370" y="122" />
           <rect
@@ -356,7 +392,7 @@
           />
           <text x="400" y="134" fill="#919697" font-size="14">6#集电线</text>
           <text x="520" y="134" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.NSS06_XL_fcgl }}万kw
           </text>
         </g>
 
@@ -369,7 +405,16 @@
           stroke-dasharray="8 4"
           stroke-width="1"
         />
-        <text x="240" y="270" fill="#ffffff" font-size="14">二期</text>
+        <text
+          x="240"
+          y="270"
+          fill="#ffffff"
+          font-size="14"
+          class="curStyle"
+          @click.stop="changeshowType('NSS02_GC', '牛首山二期')"
+        >
+          二期
+        </text>
 
         <line
           x1="480"
@@ -380,7 +425,16 @@
           stroke-dasharray="8 4"
           stroke-width="1"
         />
-        <text x="550" y="40" fill="#ffffff" font-size="14">一期</text>
+        <text
+          x="550"
+          y="40"
+          fill="#ffffff"
+          font-size="14"
+          class="curStyle"
+          @click.stop="changeshowType('NSS01_GC', '牛首山一期')"
+        >
+          一期
+        </text>
 
         <line
           x1="500"
@@ -391,7 +445,16 @@
           stroke-dasharray="8 4"
           stroke-width="1"
         />
-        <text x="610" y="290" fill="#ffffff" font-size="14">三期</text>
+        <text
+          x="610"
+          y="290"
+          fill="#ffffff"
+          font-size="14"
+          class="curStyle"
+          @click.stop="changeshowType('NSS03_GC', '牛首山三期')"
+        >
+          三期
+        </text>
       </g>
     </svg>
   </div>
@@ -404,7 +467,12 @@ export default {
   // 使用组件
   components: {},
   // 传入参数
-  props: {},
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
   // 自定义事件
   emits: {
     changePeriod: null,
@@ -412,7 +480,8 @@ export default {
   // 数据
   data() {
     return {
-      activeId: "",
+      activeId: "all",
+      sourceMap: {},
       c1: false,
       c2: false,
       svgTop: 0,
@@ -423,6 +492,13 @@ export default {
   },
   // 函数
   methods: {
+    changeshowType(id, planBtnName) {
+      this.activeId = id;
+      this.$emit("clickFj", id, planBtnName);
+    },
+    clickFj(id, planBtnName) {
+      this.$emit("clickFj", id, planBtnName);
+    },
     click: function (id) {
       this.activeId = id;
     },
@@ -464,6 +540,7 @@ export default {
   },
   created() {
     // 创建后
+    this.sourceMap = this.data;
     setTimeout(() => {
       this.c1 = true;
       setTimeout(() => {
@@ -491,6 +568,11 @@ export default {
   updated() {
     // 数据更新后
   },
+  watch: {
+    data(res) {
+      this.sourceMap = res;
+    },
+  },
 };
 </script>
 
@@ -500,6 +582,14 @@ export default {
   width: 100%;
   height: 100%;
 
+  .curStyle {
+    cursor: pointer;
+  }
+
+  .item-label {
+    cursor: pointer;
+  }
+
   svg {
     position: absolute;
     left: 0;

src/views/Home/components/map/QS_FDC.vue

@@ -190,7 +190,11 @@
       </g>
 
       <g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS01_GC'"
+          @click.stop="clickFj('QS01_XL', '青山1#')"
+        >
           <use xlink:href="#nx-map-line" x="380" y="0" />
           <use xlink:href="#nx-map-circle" x="380" y="0" />
           <rect
@@ -204,10 +208,14 @@
           />
           <text x="410" y="17" fill="#919697" font-size="14">1#集电线</text>
           <text x="530" y="17" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS01_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS01_GC'"
+          @click.stop="clickFj('QS02_XL', '青山2#')"
+        >
           <use xlink:href="#nx-map-line" x="200" y="0" />
           <use xlink:href="#nx-map-circle" x="200" y="0" />
           <rect
@@ -221,10 +229,14 @@
           />
           <text x="230" y="17" fill="#919697" font-size="14">2#集电线</text>
           <text x="350" y="17" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS02_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS01_GC'"
+          @click.stop="clickFj('QS03_XL', '青山3#')"
+        >
           <use xlink:href="#nx-map-line" x="280" y="45" />
           <use xlink:href="#nx-map-circle" x="280" y="45" />
           <rect
@@ -238,10 +250,14 @@
           />
           <text x="310" y="57" fill="#919697" font-size="14">3#集电线</text>
           <text x="430" y="57" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS03_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS03_GC'"
+          @click.stop="clickFj('QS07_XL', '青山7#')"
+        >
           <use xlink:href="#nx-map-line" x="570" y="62" />
           <use xlink:href="#nx-map-circle" x="570" y="62" />
           <rect
@@ -255,10 +271,14 @@
           />
           <text x="560" y="75" fill="#919697" font-size="14">7#集电线</text>
           <text x="680" y="75" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS07_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS02_GC'"
+          @click.stop="clickFj('QS04_XL', '青山4#')"
+        >
           <use xlink:href="#nx-map-line" x="150" y="30" />
           <use xlink:href="#nx-map-circle" x="150" y="30" />
           <rect
@@ -272,10 +292,14 @@
           />
           <text x="180" y="47" fill="#919697" font-size="14">4#集电线</text>
           <text x="300" y="47" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS04_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS02_GC'"
+          @click.stop="clickFj('QS05_XL', '青山5#')"
+        >
           <use xlink:href="#nx-map-line" x="120" y="112" />
           <use xlink:href="#nx-map-circle" x="120" y="112" />
           <rect
@@ -289,10 +313,14 @@
           />
           <text x="150" y="134" fill="#919697" font-size="14">5#集电线</text>
           <text x="270" y="134" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS05_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS02_GC'"
+          @click.stop="clickFj('QS06_XL', '青山6#')"
+        >
           <use xlink:href="#nx-map-line" x="50" y="50" />
           <use xlink:href="#nx-map-circle" x="50" y="50" />
           <rect
@@ -306,10 +334,14 @@
           />
           <text x="80" y="77" fill="#919697" font-size="14">6#集电线</text>
           <text x="200" y="77" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS06_XL_fcgl }}万kw
           </text>
         </g>
-        <g>
+        <g
+          class="item-label"
+          v-if="activeId === 'all' || activeId === 'QS03_GC'"
+          @click.stop="clickFj('QS08_XL', '青山8#')"
+        >
           <use xlink:href="#nx-map-line" x="440" y="202" />
           <use xlink:href="#nx-map-circle" x="440" y="202" />
           <rect
@@ -323,7 +355,7 @@
           />
           <text x="470" y="214" fill="#919697" font-size="14">8#集电线</text>
           <text x="590" y="214" fill="#05bb4c" font-size="14" text-anchor="end">
-            11台
+            {{ sourceMap.QS08_XL_fcgl }}万kw
           </text>
         </g>
 
@@ -336,7 +368,16 @@
           stroke-dasharray="8 4"
           stroke-width="1"
         />
-        <text x="40" y="220" fill="#ffffff" font-size="14">二期</text>
+        <text
+          x="40"
+          y="220"
+          fill="#ffffff"
+          font-size="14"
+          class="curStyle"
+          @click.stop="changeshowType('QS02_GC', '青山二期')"
+        >
+          二期
+        </text>
 
         <line
           x1="60"
@@ -347,7 +388,16 @@
           stroke-dasharray="8 4"
           stroke-width="1"
         />
-        <text x="60" y="40" fill="#ffffff" font-size="14">一期</text>
+        <text
+          x="60"
+          y="40"
+          fill="#ffffff"
+          font-size="14"
+          class="curStyle"
+          @click.stop="changeshowType('QS01_GC', '青山一期')"
+        >
+          一期
+        </text>
 
         <line
           x1="50"
@@ -358,7 +408,16 @@
           stroke-dasharray="8 4"
           stroke-width="1"
         />
-        <text x="50" y="290" fill="#ffffff" font-size="14">三期</text>
+        <text
+          x="50"
+          y="290"
+          fill="#ffffff"
+          font-size="14"
+          class="curStyle"
+          @click.stop="changeshowType('QS03_GC', '青山三期')"
+        >
+          三期
+        </text>
       </g>
     </svg>
   </div>
@@ -371,7 +430,12 @@ export default {
   // 使用组件
   components: {},
   // 传入参数
-  props: {},
+  props: {
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
   // 自定义事件
   emits: {
     changePeriod: null,
@@ -379,7 +443,8 @@ export default {
   // 数据
   data() {
     return {
-      activeId: "",
+      activeId: "all",
+      sourceMap: {},
       c1: false,
       c2: false,
       svgTop: 0,
@@ -390,6 +455,13 @@ export default {
   },
   // 函数
   methods: {
+    changeshowType(id, planBtnName) {
+      this.activeId = id;
+      this.$emit("clickFj", id, planBtnName);
+    },
+    clickFj(id, planBtnName) {
+      this.$emit("clickFj", id, planBtnName);
+    },
     click: function (id) {
       this.activeId = id;
     },
@@ -431,6 +503,7 @@ export default {
   },
   created() {
     // 创建后
+    this.sourceMap = this.data;
     setTimeout(() => {
       this.c1 = true;
       setTimeout(() => {
@@ -458,6 +531,11 @@ export default {
   updated() {
     // 数据更新后
   },
+  watch: {
+    data(res) {
+      this.sourceMap = res;
+    },
+  },
 };
 </script>
 
@@ -467,6 +545,14 @@ export default {
   width: 100%;
   height: 100%;
 
+  .curStyle {
+    cursor: pointer;
+  }
+
+  .item-label {
+    cursor: pointer;
+  }
+
   svg {
     position: absolute;
     left: 0;

src/views/Home/components/map/XS_FDC.vue

@@ -311,6 +311,7 @@ export default {
   data() {
     return {
       activeId: "all",
+      sourceMap:{},
       c1: false,
       c2: false,
       svgTop: 0,

src/views/LightMatrix3/LightMatrix3.vue

@@ -79,12 +79,6 @@
                   </div>
                 </div>
                 <div class="card-right">
-                   <div class="num">
-                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
-                      <SvgIcon svgid="svg-P"></SvgIcon>
-                    </i>
-                    <span>{{ cItem.fs }}</span>
-                  </div>
                   <div class="num">
                     <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
                       <SvgIcon svgid="svg-W"></SvgIcon>
@@ -97,7 +91,12 @@
                     </i>
                     <span>{{ cItem.fdjzs.toFixed(2) }}</span>
                   </div>
-          
+                  <div class="num">
+                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
+                      <SvgIcon svgid="svg-P"></SvgIcon>
+                    </i>
+                    <span>{{ cItem.fs }}</span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -191,7 +190,7 @@ export default {
           },
           {
             color: "orange",
-            name: "检休",
+            name: "检修",
             nameIcon: "svg-jx-downtime",
             calcStr: ["fcjxtjnum", "fccnsljxnum"],
             numIcon: "svg-field-involved",
@@ -385,18 +384,6 @@ export default {
         },
       });
     },
-	// 查看风机详情
-	goDetails(item) {
-	  if (item.wpId.indexOf("FDC") !== -1) {
-	    this.$router.push({
-	      path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`
-	    });
-	  } else {
-	    // this.$router.push({
-	    //   path: `/info/inverter-info/${item.wpId}/${item.wtId}`
-	    // });
-	  }
-	},
   },
 
   created() {
@@ -420,10 +407,10 @@ export default {
 
 <style lang="less" scoped>
 @panelHeight: 60px;
-@titleHeight: 26px;
+@titleHeight: 3.704vh;
 
 .light-matrix {
-  // width: calc(100% - 1.111vh);
+  width: calc(100% - 1.111vh);
   height: calc(100vh - 7.222vh);
   display: flex;
   flex-direction: column;
@@ -707,16 +694,16 @@ export default {
 
     .panel-title {
       width: 100%;
+      height: @titleHeight;
       line-height: @titleHeight;
       background-color: fade(@darkgray, 40%);
 
       .panel-title-name {
-        font-size: 12px;
+        font-size: @fontsize-s;
         color: @green;
         display: flex;
-        flex-wrap: wrap;
         align-items: center;
-        padding-left: 16px;
+        padding: 0 16px;
 
         i {
           margin-right: 0.7407vh;
@@ -724,7 +711,7 @@ export default {
 
         .sub-title-item {
           display: flex;
-          flex: 0 0 110px;
+          flex: 1;
 
           .sub-title {
             flex: 0 0 auto;
@@ -785,13 +772,13 @@ export default {
 
       .blank {
         margin-right: 4px;
-        flex: 1 0 120px;
+        flex: 1 0 105px;
       }
 
       .card {
         margin-right: 4px;
         margin-top: 4px;
-        flex: 1 0 120px;
+        flex: 1 0 105px;
       }
 
       .card {
@@ -800,7 +787,6 @@ export default {
         .card-panel {
           display: flex;
           flex-grow: row;
-		  cursor: pointer;
 
           .card-left {
             width: 40px;

src/views/NewPages/dj1.vue

@@ -767,7 +767,7 @@ export default {
           recorddate: that.recorddate
         },
         success (res) {
-          const keyArray = ["value1", "value2", "value3", "value4"];
+          const keyArray = ["value1", "value2", "value3"];
 
           let lostChartData = [{
             text: "实发功率",
@@ -781,9 +781,6 @@ export default {
           }, {
             text: "风速",
             value: []
-          }, {
-            text: "状态",
-            value: []
           }];
           const lostChartUnit = ["实发功率", "保证功率", "风速", "状态"];
 
@@ -887,7 +884,7 @@ export default {
             name: "风速",
             unit: "(m/s)",
             data: []
-          }
+          };
 
           keyArray.forEach((keyEle, keyIndex) => {
             res.data.forEach(ele => {
@@ -900,6 +897,7 @@ export default {
           });
           that.powerChartData = powerChartData;
           that.powerChartLineData = powerChartLineData;
+          console.log(1111,powerChartLineData)
         }
       });
     },

src/views/WindSite/components/boosterstation/dwk.vue

@@ -5384,7 +5384,7 @@
 </template>
 
 <script>
-import previewPicture from "./previewPicture.vue";
+import previewPicture from "../previewPicture.vue";
 import { BoosterStation } from "./BoosterStation";
 export default {
   components: {
@@ -5402,7 +5402,7 @@ export default {
     this.boosterStation = new BoosterStation();
 
     this.refreshTPData();
-    this.interval = setInterval(this.refreshTPData, 3000);
+    this.interval = setInterval(this.refreshTPData, 1000);
   },
   methods: {
     closed() {

src/views/WindSite/components/boosterstation/mch.vue

@@ -7643,7 +7643,7 @@
   </div>
 </template>
 <script>
-import previewPicture from "./previewPicture.vue";
+import previewPicture from "../previewPicture.vue";
 import { BoosterStation } from "./BoosterStation";
 export default {
   components: {
@@ -7661,7 +7661,7 @@ export default {
     this.boosterStation = new BoosterStation();
 
     this.refreshTPData();
-    this.interval = setInterval(this.refreshTPData, 3000);
+    this.interval = setInterval(this.refreshTPData, 1000);
   },
   methods: {
     closed() {

src/views/WindSite/components/boosterstation/mhs.vue

@@ -9124,7 +9124,7 @@
   </div>
 </template>
 <script>
-import previewPicture from "./previewPicture.vue";
+import previewPicture from "../previewPicture.vue";
 import { BoosterStation } from "./BoosterStation";
 export default {
   components: {
@@ -9142,7 +9142,7 @@ export default {
     this.boosterStation = new BoosterStation();
 
     this.refreshTPData();
-    this.interval = setInterval(this.refreshTPData, 3000);
+    this.interval = setInterval(this.refreshTPData, 1000);
   },
   methods: {
     closed() {

src/views/WindSite/components/boosterstation/nss.vue

@@ -15428,7 +15428,7 @@
   </div>
 </template>
 <script>
-import previewPicture from "./previewPicture.vue";
+import previewPicture from "../previewPicture.vue";
 import { BoosterStation } from "./BoosterStation";
 export default {
   components: {
@@ -15446,7 +15446,7 @@ export default {
     this.boosterStation = new BoosterStation();
 
     this.refreshTPData();
-    this.interval = setInterval(this.refreshTPData, 3000);
+    this.interval = setInterval(this.refreshTPData, 1000);
   },
   methods: {
     closed() {

src/views/WindSite/components/boosterstation/pl1.vue

@@ -5500,7 +5500,7 @@
   </div>
 </template>
 <script>
-import previewPicture from "./previewPicture.vue";
+import previewPicture from "../previewPicture.vue";
 import { BoosterStation } from "./BoosterStation";
 export default {
   components: {
@@ -5518,7 +5518,7 @@ export default {
     this.boosterStation = new BoosterStation();
 
     this.refreshTPData();
-    this.interval = setInterval(this.refreshTPData, 3000);
+    this.interval = setInterval(this.refreshTPData, 1000);
   },
   methods: {
     closed() {

src/views/WindSite/components/boosterstation/pl2.vue

@@ -11143,7 +11143,7 @@
   </div>
 </template>
 <script>
-import previewPicture from "./previewPicture.vue";
+import previewPicture from "../previewPicture.vue";
 import { BoosterStation } from "./BoosterStation";
 export default {
   components: {
@@ -11161,7 +11161,7 @@ export default {
     this.boosterStation = new BoosterStation();
 
     this.refreshTPData();
-    this.interval = setInterval(this.refreshTPData, 3000);
+    this.interval = setInterval(this.refreshTPData, 1000);
   },
   methods: {
     closed() {

src/views/WindSite/components/boosterstation/qs.vue

@@ -8382,7 +8382,7 @@
   </div>
 </template>
 <script>
-import previewPicture from "./previewPicture.vue";
+import previewPicture from "../previewPicture.vue";
 import { BoosterStation } from "./BoosterStation";
 export default {
   components: {
@@ -8400,7 +8400,7 @@ export default {
     this.boosterStation = new BoosterStation();
 
     this.refreshTPData();
-    this.interval = setInterval(this.refreshTPData, 3000);
+    this.interval = setInterval(this.refreshTPData, 1000);
   },
   methods: {
     closed() {

src/views/WindSite/components/boosterstation/sbdl.vue

@@ -5100,7 +5100,7 @@
   </div>
 </template>
 <script>
-import previewPicture from "./previewPicture.vue";
+import previewPicture from "../previewPicture.vue";
 import { BoosterStation } from "./BoosterStation";
 export default {
   components: {
@@ -5118,7 +5118,7 @@ export default {
     this.boosterStation = new BoosterStation();
 
     this.refreshTPData();
-    this.interval = setInterval(this.refreshTPData, 3000);
+    this.interval = setInterval(this.refreshTPData, 1000);
   },
   methods: {
     closed() {

src/views/WindSite/components/boosterstation/sbq.vue

@@ -16082,7 +16082,7 @@
 </template>
 
 <script>
-import previewPicture from "./previewPicture.vue";
+import previewPicture from "../previewPicture.vue";
 import { BoosterStation } from "./BoosterStation";
 export default {
   components: {
@@ -16100,7 +16100,7 @@ export default {
     this.boosterStation = new BoosterStation();
 
     this.refreshTPData();
-    this.interval = setInterval(this.refreshTPData, 3000);
+    this.interval = setInterval(this.refreshTPData, 1000);
   },
   methods: {
     closed() {

src/views/WindSite/components/boosterstation/xh.vue

@@ -12217,7 +12217,7 @@
   </previewPicture>
 </template>
 <script>
-import previewPicture from "./previewPicture.vue";
+import previewPicture from "../previewPicture.vue";
 import { BoosterStation } from "./BoosterStation";
 export default {
   components: {
@@ -12235,7 +12235,7 @@ export default {
     this.boosterStation = new BoosterStation();
 
     this.refreshTPData();
-    this.interval = setInterval(this.refreshTPData, 3000);
+    this.interval = setInterval(this.refreshTPData, 1000);
   },
   methods: {
     closed() {

src/views/WindSite/components/boosterstation/xs.vue

@@ -10195,7 +10195,7 @@
   </previewPicture>
 </template>
 <script>
-import previewPicture from "./previewPicture.vue";
+import previewPicture from "../previewPicture.vue";
 import { BoosterStation } from "./BoosterStation";
 export default {
   components: {
@@ -10213,7 +10213,7 @@ export default {
     this.boosterStation = new BoosterStation();
 
     this.refreshTPData();
-    this.interval = setInterval(this.refreshTPData, 3000);
+    this.interval = setInterval(this.refreshTPData, 1000);
   },
   methods: {
     closed() {

src/views/WindSite/pages/Map.vue

@@ -52,120 +52,8 @@
       </div>
     </div>
     <div class="panel-body">
-      <arcgis
-        class="arcgis-layer"
-        @when="when"
-        ref="arcgis"
-        :data="arcgisData"
-        @clickMap="clickMap"
-      >
-        <template
-          v-for="(fan, index) of fans"
-          :key="index"
-          v-slot:[fan.attributes.code]
-        >
-          <svg
-            v-if="fan.attributes.code != '升压站'"
-            @click="clickFan(fan.attributes.code)"
-            class="can-click esri-component"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            viewBox="0 0 200 240"
-            enable-background="new 0 0 200 240"
-            xml:space="preserve"
-            width="66"
-            height="66"
-          >
-            <!-- 底座 -->
-            <g>
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                :fill="colors[fan.attributes.state][2]"
-                d="M100.681,156.137c24.579,0,44.505,8.548,44.505,19.094
-                            c0,10.545-19.926,19.093-44.505,19.093c-24.577,0-42.878-8.548-42.878-19.093C57.803,164.685,76.104,156.137,100.681,156.137z"
-              />
-            </g>
-            <!-- 后面的脑袋 -->
-            <g>
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                :fill="colors[fan.attributes.state][0]"
-                d="M92.875,76.372l27.897-18.417c0,0,4.108-0.096,7.891,2.681
-                                c4.305,3.156,1.86,9.235,1.86,9.235l-24.374,23.292L92.875,76.372z"
-              />
-            </g>
-            <!-- 柱 -->
-            <g>
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                :fill="colors[fan.attributes.state][0]"
-                d="M92.152,175.229h18.689l-4.876-94.254H97.84L92.152,175.229z"
-              />
-            </g>
-            <!-- 风扇 -->
-            <g>
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                :fill="colors[fan.attributes.state][1]"
-                d="M109.007,85.525l-16.061,0.268l7.396-83.773L109.007,85.525z"
-              />
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                :fill="colors[fan.attributes.state][1]"
-                d="M95.219,75.597l8.265,13.771l-76.25,35.483L95.219,75.597z
-                            M99.108,89.634l7.795-14.04l68.854,48.291L99.108,89.634z"
-              />
-              <animateTransform
-                v-if="fan.attributes.rotate"
-                attributeName="transform"
-                attributeType="XML"
-                type="rotate"
-                from="0 100 82"
-                to="359 100 82"
-                :dur="fan.attributes.dur + 's'"
-                repeatCount="indefinite"
-              />
-            </g>
-            <!-- 前面的尖 -->
-            <g>
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                :fill="colors[fan.attributes.state][2]"
-                d="M92.863,72.903c0,0,13.912-0.343,17.098,4.352
-                            c2.984,4.397-2.58,15.473-2.58,15.473l-24.376,0.436L92.863,72.903z"
-              />
-            </g>
-            <!-- 文字 -->
-            <g>
-              <text
-                x="100"
-                y="240"
-                fill="#ffffff"
-                font-size="40"
-                text-anchor="middle"
-                alignment-baseline="baseline"
-              >
-                {{ fan.attributes.code }}
-              </text>
-            </g>
-          </svg>
-          <div v-if="fan.attributes.code == '升压站'">
-            <div class="syz-img">
-              <img :src="syzImg" />
-            </div>
-            <div class="white font-sm mr-t-8" style="text-align: center">
-              {{ fan.attributes.code }}
-            </div>
-          </div>
-        </template>
-      </arcgis>
+      <MHSFDC wpId="MHS_FDC" v-if="wpId.indexOf('FDC') !== -1" />
+      <PLGDC wpId="PL_GDC" v-if="wpId.indexOf('GDC') !== -1" />
       <div class="map-popup-panel" v-show="showPopup">
         <!-- <div class="map-popup-panel-header">
           <div class="map-popup-panel-title green">
@@ -275,7 +163,8 @@
 <script>
 import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
 // import SvgIcon from "@com/coms/icon/svg-icon.vue";
-import arcgis from "@com/arcgis/arcgis.vue";
+import MHSFDC from "@com/arcgis/MHS_FDC.vue";
+import PLGDC from "@com/arcgis/PL_GDC.vue";
 import dataService from "@/helper/data.js";
 
 export default {
@@ -284,8 +173,8 @@ export default {
   // 使用组件
   components: {
     BtnGroup2,
-    // SvgIcon,
-    arcgis,
+    MHSFDC,
+    PLGDC
   },
   // 数据
   data() {