jn_sis_zhfx/src/components/arcgis/DWK_GDC.vue

<template>
  <div class="map-1" 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="365"
                  y="220"
                  fill="#ffffff"
                  font-size="150"
                  text-anchor="middle"
                >
                  {{ 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"
                >
                  {{ 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.2953, 38.58533], // 初始中心点
        height: 654, // 3D地图初始相机高度
        tilt: 65, // 俯视角
        scale: 15000,
        rotation: 180,
      },
      tempImg: require("@assets/temp1.png"),
      syzImg: require("@assets/png/booster-station.png"),
      showPopup: true,
      panels: 
	  [{"id":"00","type":"top","code":1,"state":"deepblue","line":"top left"},
	  {"id":"01","type":"top","code":2,"state":"deepblue","line":"top right"},
	  {"id":"02","type":"top","code":3,"state":"deepblue","line":"top"},
	  {"id":"03","type":"top","code":4,"state":"deepblue","line":"top right"},
	  {"id":"04","type":"top","code":5,"state":"deepblue","line":"top"},
	  {"id":"05","type":"top","code":6,"state":"deepblue","line":"top right"},
	  {"id":"06","type":"top","code":7,"state":"deepblue","line":"top"},
	  {"id":"07","type":"top","code":8,"state":"deepblue","line":"top right"},
	  {"id":"08","type":"top","code":9,"state":"deepblue","line":"top"},
	  {"id":"09","type":"top","code":10,"state":"deepblue","line":"top right"},
	  {"id":"10","type":"top","code":11,"state":"deepblue","line":"top left"},
	  {"id":"11","type":"top","code":12,"state":"deepblue","line":"top right"},
	  {"id":"12","type":"top","code":13,"state":"deepblue","line":"top"},
	  {"id":"13","type":"top","code":14,"state":"deepblue","line":"top right"},
	  {"id":"14","type":"top","code":15,"state":"deepblue","line":"top"},
	  {"id":"15","type":"top","code":16,"state":"deepblue","line":"top right"},
	  {"id":"16","type":"top","code":17,"state":"deepblue","line":"top"},
	  {"id":"17","type":"top","code":18,"state":"deepblue","line":"top right"},
	  {"id":"18","type":"top","code":19,"state":"deepblue","line":"top"},
	  {"id":"19","type":"top","code":20,"state":"deepblue","line":"top right"}]
    };
  },
  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);
    },
    clickEl: function (item) {
		let wpId = this.$route.path.split('/').pop(),
			wtId = wpId.split('_')[0] +'01_'+ item.id;
		this.$router.push({
		  path: `/monitor/windsite/inverter-info/`+wpId+`/`+wtId,
		});
    },
  },
  watch: {
    wpId(res) {
      this.sourceId = res;
    },
  },
};
</script>

<style lang="less">
@titleHeight: 40px;

.map-1 {
  width: 100%;
  height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;

  .btn-group-tabs {
    display: flex;
    flex-direction: row;
  }

    .panel-box {
        width: 840px;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        background: #536268B8;

        .panel-item {
            width: 80px;
            height: 80px;
            position: relative;
            
            // margin-top: -20px;
            // margin-left: -20px;

            &.top {
                &::after {
                    top: -3px;
                    opacity: 1;
                }
            }

            &.bottom {
                &::after {
                    bottom: -3px;
                    opacity: 1;
                }
            }

            &.left {
                &::before {
                    left: -3px;
                    opacity: 1;
                }
            }

            &.right {
                &::before {
                    right: -3px;
                    opacity: 1;
                }
            }

            &::after {
                content: '';
                width: 100%;
                height: 6px;
                position: absolute;
                left: 0;
                background: @green;
                opacity: 0;
            }

            &::before {
                content: '';
                width: 6px;
                height: 100%;
                position: absolute;
                top: 0;
                background: @green;
                opacity: 0;
            }

            svg {
                width: 80px;
                height: 80px;
            }

            .panel-syz {
                width: 100%;
                height: 100%;
                position: relative;

                .syz-img {
                    position: absolute;
                    height: 70px;
                    top: -35px;
                    left: -10px;
                }

                .syz-text {
                    position: absolute;
                    color: @green;
                    font-size: @fontsize-l;
                    width: 100%;
                    text-align: center;
                    left: 0;
                    top: -55px;
                    font-weight: bold;
                }
            }
        }

    }

  .can-click {
    cursor: pointer;
  }

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