地貌图页面逻辑修改

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/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() {