yangshi_cloudExbition/src/components/mapsvg/e.vue

<template>
  <svg
    version="1.1"
    id="E_1_"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    viewBox="0 0 350 300"
    xml:space="preserve"
  >
    <g id="e">
      <path
        id="e_x5F_1"
        class="st0"
        d="M4.2,3.7h300.5c22,0,40,16,40,35.8v255.6H4.3L4.2,3.7C4.3,3.7,4.2,3.7,4.2,3.7z"
      />
      <g class="st1">
        <rect x="4.6" y="26.7" class="st2" width="3.6" height="16" />
        <rect x="4.6" y="70.9" class="st2" width="3.6" height="16" />
        <g>
          <rect x="4.6" y="251.7" class="st2" width="3.6" height="16" />
          <rect x="4.6" y="172.5" class="st2" width="3.6" height="16" />
          <rect x="4.6" y="212.1" class="st2" width="3.6" height="16" />
        </g>
        <g>
          <rect x="33.9" y="291.7" class="st2" width="16" height="3.6" />
          <rect x="189.3" y="291.7" class="st2" width="16" height="3.6" />
          <rect x="228" y="291.7" class="st2" width="16" height="3.6" />
          <rect x="266.9" y="291.7" class="st2" width="16" height="3.6" />
          <rect x="305.7" y="291.7" class="st2" width="16" height="3.6" />
          <rect x="72.8" y="291.7" class="st2" width="16" height="3.6" />
          <rect x="111.7" y="291.7" class="st2" width="16" height="3.6" />
          <rect x="150.4" y="291.7" class="st2" width="16" height="3.6" />
        </g>
        <g>
          <g class="st3">
            <rect x="60.1" y="4.2" class="st4" width="4.3" height="46.1" />

            <rect
              x="57.1"
              y="10.4"
              transform="matrix(1 -6.120315e-03 6.120315e-03 1 -9.982308e-02 0.3807)"
              class="st4"
              width="10.1"
              height="12.2"
            />
          </g>
          <g class="st3">
            <rect
              x="72.9"
              y="201.2"
              transform="matrix(0.7071 -0.7071 0.7071 0.7071 -136.5905 118.7492)"
              class="st4"
              width="4.3"
              height="46.1"
            />

            <rect
              x="62.3"
              y="210.9"
              transform="matrix(0.7028 -0.7114 0.7114 0.7028 -134.356 112.3968)"
              class="st4"
              width="10.1"
              height="12.2"
            />
          </g>
          <g class="st3">
            <rect x="297.1" y="166" class="st4" width="46.1" height="4.3" />

            <rect
              x="324.9"
              y="162.8"
              transform="matrix(1 -6.120315e-03 6.120315e-03 1 -1.0211 2.029)"
              class="st4"
              width="12.2"
              height="10.1"
            />
          </g>
          <g class="st3">
            <rect x="297.1" y="230.9" class="st4" width="46.1" height="4.3" />

            <rect
              x="324.9"
              y="227.9"
              transform="matrix(1 -6.120315e-03 6.120315e-03 1 -1.4196 2.0302)"
              class="st4"
              width="12.2"
              height="10.1"
            />
          </g>
          <g class="st3">
            <rect x="144.9" y="6.1" class="st4" width="4.6" height="63.4" />
            <polygon
              class="st4"
              points="140.9,11.1 153.2,11 153.5,64.7 141.1,64.8 				"
            />
          </g>
          <g class="st3">
            <rect
              x="230.1"
              y="7.3"
              transform="matrix(0.6847 -0.7288 0.7288 0.6847 44.851 181.6601)"
              class="st4"
              width="4.6"
              height="63.4"
            />
            <polygon
              class="st4"
              points="208.5,25.2 216.7,16.2 256,52.8 247.7,61.8 				"
            />
          </g>
          <g class="st3">
            <rect
              x="298.1"
              y="71.6"
              transform="matrix(0.6847 -0.7288 0.7288 0.6847 19.4187 251.5034)"
              class="st4"
              width="4.6"
              height="63.4"
            />
            <polygon
              class="st4"
              points="276.5,89.5 284.8,80.5 324,117.1 315.7,126.1 				"
            />
          </g>
          <g class="st3">
            <rect
              x="205.4"
              y="79.7"
              transform="matrix(0.7071 -0.7072 0.7072 0.7071 -17.9284 179.5215)"
              class="st4"
              width="4.6"
              height="63.4"
            />
            <polygon
              class="st4"
              points="184.4,96.7 193,87.9 231.1,125.8 222.5,134.5 				"
            />
          </g>
          <g class="st3">
            <circle class="st5" cx="140.8" cy="170.8" r="26.8" />

            <rect
              x="123.3"
              y="153.5"
              transform="matrix(0.7071 -0.7071 0.7071 0.7071 -79.6345 149.5454)"
              class="st4"
              width="34.8"
              height="34.8"
            />
          </g>
          <g class="st3">
            <circle class="st5" cx="79.7" cy="109.8" r="23" />
            <circle class="st4" cx="79.7" cy="109.8" r="17.7" />
          </g>
          <g class="st3">
            <circle class="st5" cx="201.8" cy="232" r="23" />
            <circle class="st4" cx="201.8" cy="232" r="17.7" />
          </g>
        </g>
      </g>
      <g class="st6">
        <path id="e_x5F_2" class="st7" d="M346.3,297.5H2.1V2.1" />
        <path
          class="st8"
          d="M4.5,3.7h165.3c13,0,25.5,4.6,34.7,12.9c25.2,30.5,96.7,98.8,125.8,117.4c9.3,8.2,14.3,19.4,14.3,31.1v130.1"
        />
      </g>
    </g>
    <g id="point" :class="cls" @click="handleClick" @mouseleave="$emit('hoverPano',{})" @mouseover="hoverItem">
      <g  :class="'e-s25' + cls" id="e-s25">
        <circle class="st9" cx="21.2" cy="34" r="7.1" />
        <circle class="st9" cx="21.2" cy="34" r="5.1" />
      </g>
      <g  :class="'e-s24' + cls" id="e-s24">
        <circle class="st9" cx="21.2" cy="73.2" r="7.1" />
        <circle class="st9" cx="21.2" cy="73.2" r="5.1" />
      </g>
      <g  :class="'e-s26' + cls" id="e-s26">
        <circle class="st9" cx="44.6" cy="18.6" r="7.1" />
        <circle class="st9" cx="44.6" cy="18.6" r="5.1" />
      </g>
      <g  :class="'e-s27' + cls" id="e-s27">
        <circle class="st9" cx="79.9" cy="18.6" r="7.1" />
        <circle class="st9" cx="79.9" cy="18.6" r="5.1" />
      </g>
      <g  :class="'e-s23' + cls" id="e-s23">
        <circle class="st9" cx="21.2" cy="180.9" r="7.1" />
        <circle class="st9" cx="21.2" cy="180.9" r="5.1" />
      </g>
      <g  :class="'e-s22' + cls" id="e-s22">
        <circle class="st9" cx="21.2" cy="220.1" r="7.1" />
        <circle class="st9" cx="21.2" cy="220.1" r="5.1" />
      </g>
      <g  :class="'e-s21' + cls" id="e-s21">
        <circle class="st9" cx="21.2" cy="259.4" r="7.1" />
        <circle class="st9" cx="21.2" cy="259.4" r="5.1" />
      </g>
      <g  :class="'e-s20' + cls" id="e-s20">
        <circle class="st9" cx="45.6" cy="277.3" r="7.1" />
        <circle class="st9" cx="45.6" cy="277.3" r="5.1" />
      </g>
      <g  :class="'e-s19' + cls" id="e-s19">
        <circle class="st9" cx="83.7" cy="277.3" r="7.1" />
        <circle class="st9" cx="83.7" cy="277.3" r="5.1" />
      </g>
      <g  :class="'e-s28' + cls" id="e-s28">
        <circle class="st9" cx="54.1" cy="229.8" r="7.1" />
        <circle class="st9" cx="54.1" cy="229.8" r="5.1" />
      </g>
      <g  :class="'e-s29' + cls" id="e-s29">
        <circle class="st9" cx="80.5" cy="204.1" r="7.1" />
        <circle class="st9" cx="80.5" cy="204.1" r="5.1" />
      </g>
      <g  :class="'e-s31' + cls" id="e-s31">
        <circle class="st9" cx="121.7" cy="150" r="7.1" />
        <circle class="st9" cx="121.7" cy="150" r="5.1" />
      </g>
      <g  :class="'e-s33' + cls" id="e-s33">
        <circle class="st9" cx="161.5" cy="190.5" r="7.1" />
        <circle class="st9" cx="161.5" cy="190.5" r="5.1" />
      </g>
      <g  :class="'e-s30' + cls" id="e-s30">
        <circle class="st9" cx="121.4" cy="190.1" r="7.1" />
        <circle class="st9" cx="121.4" cy="190.1" r="5.1" />
      </g>
      <g  :class="'e-s32' + cls" id="e-s32">
        <circle class="st9" cx="161.9" cy="150.4" r="7.1" />
        <circle class="st9" cx="161.9" cy="150.4" r="5.1" />
      </g>
      <g  :class="'e-s6' + cls" id="e-s6">
        <circle class="st9" cx="204.7" cy="136.5" r="7.1" />
        <circle class="st9" cx="204.7" cy="136.5" r="5.1" />
      </g>
      <g  :class="'e-s9' + cls" id="e-s9">
        <circle class="st9" cx="331.2" cy="152.9" r="7.1" />
        <circle class="st9" cx="331.2" cy="152.9" r="5.1" />
      </g>
      <g  :class="'e-s10' + cls" id="e-s10">
        <circle class="st9" cx="331.2" cy="183.4" r="7.1" />
        <circle class="st9" cx="331.2" cy="183.4" r="5.1" />
      </g>
      <g  :class="'e-s11' + cls" id="e-s11">
        <circle class="st9" cx="331.2" cy="215.8" r="7.1" />
        <circle class="st9" cx="331.2" cy="215.8" r="5.1" />
      </g>
      <g  :class="'e-s12' + cls" id="e-s12">
        <circle class="st9" cx="331.2" cy="250.4" r="7.1" />
        <circle class="st9" cx="331.2" cy="250.4" r="5.1" />
      </g>
      <g  :class="'e-s3' + cls" id="e-s3">
        <circle class="st9" cx="232.5" cy="109.6" r="7.1" />
        <circle class="st9" cx="232.5" cy="109.6" r="5.1" />
      </g>
      <g  :class="'e-s5' + cls" id="e-s5">
        <circle class="st9" cx="127.8" cy="22.6" r="7.1" />
        <circle class="st9" cx="127.8" cy="22.6" r="5.1" />
      </g>
      <g  :class="'e-s4' + cls" id="e-s4">
        <circle class="st9" cx="166.6" cy="22.6" r="7.1" />
        <circle class="st9" cx="166.6" cy="22.6" r="5.1" />
      </g>
      <g  :class="'e-s7' + cls" id="e-s7">
        <circle class="st9" cx="206.9" cy="41" r="7.1" />
        <circle class="st9" cx="206.9" cy="41" r="5.1" />
      </g>
      <g  :class="'e-s8' + cls" id="e-s8">
        <circle class="st9" cx="297.7" cy="126.4" r="7.1" />
        <circle class="st9" cx="297.7" cy="126.4" r="5.1" />
      </g>
      <g  :class="'e-s2' + cls" id="e-s2">
        <circle class="st9" cx="321.7" cy="99.1" r="7.1" />

        <ellipse
          transform="matrix(0.999 -4.540350e-02 4.540350e-02 0.999 -4.1696 14.7083)"
          class="st9"
          cx="321.7"
          cy="99.1"
          rx="5.1"
          ry="5.1"
        />
      </g>
      <g  :class="'e-s1' + cls" id="e-s1">
        <circle class="st9" cx="235.1" cy="16.7" r="7.1" />
        <circle class="st9" cx="235.1" cy="16.7" r="5.1" />
      </g>
      <g  :class="'e-s18' + cls" id="e-s18">
        <circle class="st9" cx="121.7" cy="277.3" r="7.1" />
        <circle class="st9" cx="121.7" cy="277.3" r="5.1" />
      </g>
      <g  :class="'e-s17' + cls" id="e-s17">
        <circle class="st9" cx="159.8" cy="277.3" r="7.1" />
        <circle class="st9" cx="159.8" cy="277.3" r="5.1" />
      </g>
      <g  :class="'e-s16' + cls" id="e-s16">
        <circle class="st9" cx="197.8" cy="277.3" r="7.1" />
        <circle class="st9" cx="197.8" cy="277.3" r="5.1" />
      </g>
      <g  :class="'e-s15' + cls" id="e-s15">
        <circle class="st9" cx="235.9" cy="277.3" r="7.1" />
        <circle class="st9" cx="235.9" cy="277.3" r="5.1" />
      </g>
      <g  :class="'e-s14' + cls" id="e-s14">
        <circle class="st9" cx="273.9" cy="277.3" r="7.1" />
        <circle class="st9" cx="273.9" cy="277.3" r="5.1" />
      </g>
      <g  :class="'e-s13' + cls" id="e-s13">
        <circle class="st9" cx="312" cy="277.3" r="7.1" />
        <circle class="st9" cx="312" cy="277.3" r="5.1" />
      </g>
    </g>
  </svg>
</template>
<script>
export default {
  props: ["data", "currentPanoid", "currentPano", "cls"],
  data() {
    return { };
  },
  methods: {
    hoverItem(e){
      let target = e.target.parentElement;
      let tt = this.data.find(item=>item.mapId == target.id)
      this.$emit('hoverPano',tt||{})
    },
    handleClick(e) {
      let target = e.target.parentElement;
      let tt = this.data.find(item=>item.mapId == target.id)
      if (tt) {
        this.$bus.$emit('ifrMessage',{
          events:'flyToPano',
          data:tt
        })
      }
    },
  },
  watch: {
    currentPano: {
      deep: true,
      immediate: true,
      handler: function(newVal) {
        document.querySelector("." + this.cls) &&
        Array.from(document.querySelector("." + this.cls).childNodes).forEach(
          (item) => {
            item&&item.classList.remove("active");
          }
        );
        if (newVal) {
          let ele = document.querySelector("." + newVal.mapId + this.cls)
          ele&&ele.classList.add("active");
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
@color: #961319;
.st0 {
  opacity: 0.89;
  fill: #343434;
}
.st1 {
  opacity: 0.6;
}
.st2 {
  opacity: 0.7;
  fill: #ffffff;
}
.st3 {
  opacity: 0.8;
}
.st4 {
  fill: #ffffff;
}
.st5 {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-miterlimit: 10;
}
.st6 {
  opacity: 0.4;
}
.st7 {
  opacity: 0.4;
  fill: none;
  stroke: #ffffff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.st8 {
  opacity: 0.4;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.st9 {
  opacity: 0.6;
  fill: #ffffff;
}
svg {
  width: 60%;
}

#point {
  > g {
    cursor: pointer;
    &.active {
      circle:nth-child(even) {
        fill: @color;
        opacity: 1!important;
      }
      circle:nth-child(odd) {
        opacity: 1!important;
      }

      ellipse:nth-child(even) {
        fill: @color;
        opacity: 1!important;
      }
      ellipse:nth-child(odd) {
        opacity: 1!important;
      }
    }
    
    &:hover{
      circle:nth-child(even) {
        fill: #fff;
        opacity: 1!important;
      }
      circle:nth-child(odd) {
        opacity: 1!important;
        fill: @color;
      }

      ellipse:nth-child(even) {
        fill: #fff;
        opacity: 1!important;

      }
      ellipse:nth-child(odd) {
        opacity: 1!important;
        fill: @color;
      }

    }
  }
}
</style>