hb_sis_zhfx/src/components/arcgis/PL_GDC.vue

<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>