yangshi_cloudExbition/src/components/mapsvg/a.vue

<template>
  <svg
    version="1.1"
    id="A_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="a">
      <path
        id="a_x5F_1"
        class="st0"
        d="M3.2,25.7h345.1v213.6c0,20.2-17.5,36.7-38.9,36.7H3.2V25.7z"
      />
      <g class="st1">
        <g class="st2">
          <rect x="80.1" y="215.5" class="st3" width="4.4" height="59.9" />
          <polygon
            class="st3"
            points="78.4,245.7 86.4,245.7 86.3,261.7 78.3,261.7 			"
          />
        </g>
        <g class="st2">
          <rect x="151.1" y="215.5" class="st3" width="4.4" height="59.9" />
          <polygon
            class="st3"
            points="149.4,245.7 157.4,245.7 157.4,261.7 149.3,261.7 			"
          />
        </g>
        <path
          class="st4"
          d="M176.7,110l-26.5-26.1L113,84.1l-26.1,26.5l0.2,37.2l26.5,26.1l37.2-0.2l26.1-26.5L176.7,110z M139.6,96.4
			h5.6l19.2,19v6H146v-6.6h-6.6L139.6,96.4C139.4,96.4,139.6,96.4,139.6,96.4z M143.3,117.6v22.9h-22.9v-22.9H143.3z M99.2,115.8
			l19-19.2h6v18.3h-6.6v6.6H99.2V115.8z M124.2,161.6h-5.6l-19.2-19v-6h18.3v6.6h6.6L124.2,161.6L124.2,161.6z M145.6,161.5h-6
			v-18.3h6.6v-6.6h18.4v5.6L145.6,161.5z"
        />
        <g class="st2">
          <circle class="st3" cx="249.1" cy="249.9" r="8.2" />
          <ellipse class="st5" cx="249.1" cy="249.8" rx="9.5" ry="9.5" />
          <polygon
            class="st3"
            points="243.9,233.3 254.2,233.4 254.2,213.3 244,213.2 			"
          />
          <g>
            <path
              class="st3"
              d="M246.7,259.1v6.2h4.3v-6.2c-0.7,0.1-1.4,0.2-2.1,0.2S247.5,259.2,246.7,259.1z"
            />
            <path
              class="st3"
              d="M251.2,240.7l0.2-49.4h-4.3l-0.2,49.4c0.7-0.1,1.4-0.2,2.1-0.2C249.8,240.5,250.5,240.6,251.2,240.7z"
            />
          </g>
        </g>
        <g class="st2">
          <ellipse
            transform="matrix(0.6423 -0.7664 0.7664 0.6423 35.0868 216.1305)"
            class="st3"
            cx="249.1"
            cy="70.5"
            rx="8.2"
            ry="8.2"
          />
          <ellipse class="st6" cx="249.1" cy="70.5" rx="9.5" ry="9.5" />
          <polygon
            class="st3"
            points="243.9,86.9 254.2,86.9 254.2,106.9 244,107 			"
          />
          <g>
            <path
              class="st3"
              d="M246.7,61.2V55h4.3v6.2c-0.7-0.1-1.4-0.2-2.1-0.2S247.5,61.1,246.7,61.2z"
            />
            <path
              class="st3"
              d="M251.2,79.6l0.2,49.4h-4.3l-0.2-49.4c0.7,0.1,1.4,0.2,2.1,0.2C249.8,79.9,250.5,79.7,251.2,79.6z"
            />
          </g>
        </g>
        <g class="st2">
          <circle class="st3" cx="329.2" cy="71.4" r="8.2" />
          <ellipse class="st7" cx="329.2" cy="71.4" rx="9.5" ry="9.5" />
          <polygon
            class="st3"
            points="314,79.5 321.3,86.7 307.1,100.9 299.9,93.7 			"
          />
          <g>
            <path
              class="st3"
              d="M334.1,63.2l4.4-4.4l3,3l-4.4,4.4c-0.5-0.6-0.8-1.2-1.3-1.6C335.4,64.1,334.8,63.8,334.1,63.2z"
            />
            <path
              class="st3"
              d="M324.4,79.4l-34.8,35l-3-3l34.8-35c0.5,0.6,0.8,1.2,1.3,1.6C323.2,78.6,323.8,79.1,324.4,79.4z"
            />
          </g>
        </g>
        <g class="st2">
          <circle class="st3" cx="329.2" cy="243.7" r="8.2" />
          <ellipse class="st7" cx="329.2" cy="243.7" rx="9.5" ry="9.5" />
          <polygon
            class="st3"
            points="314,235.8 321.3,228.6 307.1,214.2 299.9,221.4 			"
          />
          <g>
            <path
              class="st3"
              d="M334.1,251.9l4.4,4.4l3-3l-4.4-4.4c-0.5,0.6-0.8,1.2-1.3,1.6C335.4,251,334.8,251.5,334.1,251.9z"
            />
            <path
              class="st3"
              d="M324.4,235.8l-34.8-35l-3,3l34.8,35c0.5-0.6,0.8-1.2,1.3-1.6C323.2,236.6,323.8,236.2,324.4,235.8z"
            />
          </g>
        </g>
        <g>
          <rect x="3.1" y="50.7" class="st8" width="3.7" height="16.4" />
          <rect x="3.1" y="231.6" class="st8" width="3.7" height="16.4" />
          <rect x="3.1" y="95.9" class="st8" width="3.7" height="16.4" />
          <rect x="3.1" y="141.2" class="st8" width="3.7" height="16.4" />
          <rect x="3.1" y="186.4" class="st8" width="3.7" height="16.4" />
        </g>
        <g>
          <rect x="15.9" y="25.7" class="st8" width="16.4" height="3.7" />
          <rect x="135.1" y="25.7" class="st8" width="16.4" height="3.7" />
          <rect x="180" y="25.7" class="st8" width="16.4" height="3.7" />
          <rect x="221.1" y="25.7" class="st8" width="16.4" height="3.7" />
          <rect x="259.3" y="25.7" class="st8" width="16.4" height="3.7" />
          <rect x="294" y="25.7" class="st8" width="16.4" height="3.7" />
          <rect x="50.7" y="25.7" class="st8" width="16.4" height="3.7" />
          <rect x="85.4" y="25.7" class="st8" width="16.4" height="3.7" />
        </g>
      </g>
      <g class="st9">
        <polyline
          id="a_x5F_3"
          class="st10"
          points="2.1,275.4 2.1,23.3 348,23.3 		"
        />
        <path
          id="a_x5F_2"
          class="st11"
          d="M348,24.5v214.6c0,20.7-17.7,37.5-39.6,37.5H4.9"
        />
      </g>
    </g>
    <g id="point" :class="cls" @click="handleClick" @mouseleave="$emit('hoverPano',{})" @mouseover="hoverItem">
      <g :class="'a-s17' + cls" id="a-s17">
        <circle class="st12" cx="23.2" cy="76.6" r="7.3" />
        <circle class="st12" cx="23.2" cy="76.6" r="5.2" />
      </g>
      <g :class="'a-s16' + cls" id="a-s16">
        <circle class="st12" cx="23.2" cy="120" r="7.3" />
        <circle class="st12" cx="23.2" cy="120" r="5.2" />
      </g>
      <g :class="'a-s27' + cls" id="a-s27">
        <circle class="st12" cx="93.6" cy="129.1" r="7.3" />
        <circle class="st12" cx="93.6" cy="129.1" r="5.2" />
      </g>
      <g :class="'a-s11' + cls" id="a-s11">
        <circle class="st12" cx="101.2" cy="251.9" r="7.3" />
        <circle class="st12" cx="101.2" cy="251.9" r="5.2" />
      </g>
      <g :class="'a-s12' + cls" id="a-s12">
        <circle class="st12" cx="64.1" cy="251.9" r="7.3" />
        <circle class="st12" cx="64.1" cy="251.9" r="5.2" />
      </g>
      <g :class="'a-s9' + cls" id="a-s9">
        <circle class="st12" cx="170.2" cy="252.6" r="7.3" />
        <circle class="st12" cx="170.2" cy="252.6" r="5.2" />
      </g>
      <g :class="'a-s3' + cls" id="a-s3">
        <ellipse
          transform="matrix(0.4641 -0.8858 0.8858 0.4641 -53.4911 358.1846)"
          class="st12"
          cx="269.3"
          cy="223.3"
          rx="7.3"
          ry="7.3"
        />
        <circle class="st12" cx="269.1" cy="223.3" r="5.2" />
      </g>
      <g :class="'a-s7' + cls" id="a-s7">
        <circle class="st12" cx="228.4" cy="223.3" r="7.3" />
        <circle class="st12" cx="228.4" cy="223.3" r="5.2" />
      </g>
      <g :class="'a-s4' + cls" id="a-s4">
        <ellipse
          transform="matrix(0.4641 -0.8858 0.8858 0.4641 58.0355 290.9234)"
          class="st12"
          cx="269.4"
          cy="97.5"
          rx="7.3"
          ry="7.3"
        />
        <circle class="st12" cx="269.5" cy="97.5" r="5.2" />
      </g>
      <g :class="'a-s5' + cls" id="a-s5">
        <circle class="st12" cx="296.5" cy="79.5" r="7.3" />
        <circle class="st12" cx="296.5" cy="79.5" r="5.2" />
      </g>
      <g :class="'a-s1' + cls" id="a-s1">
        <circle class="st12" cx="324.4" cy="102.7" r="7.3" />
        <circle class="st12" cx="324.4" cy="102.7" r="5.2" />
      </g>
      <g :class="'a-s6' + cls" id="a-s6">
        <circle class="st12" cx="298.6" cy="238.8" r="7.3" />
        <circle class="st12" cx="298.6" cy="238.8" r="5.2" />
      </g>
      <g :class="'a-s2' + cls" id="a-s2">
        <circle class="st12" cx="325.1" cy="213.2" r="7.3" />
        <circle class="st12" cx="325.1" cy="213.2" r="5.2" />
      </g>
      <g :class="'a-s8' + cls" id="a-s8">
        <circle class="st12" cx="228.3" cy="97.5" r="7.3" />
        <circle class="st12" cx="228.3" cy="97.5" r="5.2" />
      </g>
      <g :class="'a-s10' + cls" id="a-s10">
        <circle class="st12" cx="136.3" cy="252.6" r="7.3" />
        <circle class="st12" cx="136.3" cy="252.6" r="5.2" />
      </g>
      <g :class="'a-s29' + cls" id="a-s29">
        <circle class="st12" cx="170.2" cy="129.1" r="7.3" />
        <circle class="st12" cx="170.2" cy="129.1" r="5.2" />
      </g>
      <g :class="'a-s28' + cls" id="a-s28">
        <circle class="st12" cx="131.9" cy="92.3" r="7.3" />
        <circle class="st12" cx="131.9" cy="92.3" r="5.2" />
      </g>
      <g :class="'a-s26' + cls" id="a-s26">
        <circle class="st12" cx="131.9" cy="164.9" r="7.3" />
        <circle class="st12" cx="131.9" cy="164.9" r="5.2" />
      </g>
      <g :class="'a-s15' + cls" id="a-s15">
        <circle class="st12" cx="23.2" cy="164.9" r="7.3" />
        <circle class="st12" cx="23.2" cy="164.9" r="5.2" />
      </g>
      <g :class="'a-s14' + cls" id="a-s14">
        <circle class="st12" cx="23.2" cy="209.2" r="7.3" />
        <circle class="st12" cx="23.2" cy="209.2" r="5.2" />
      </g>
      <g :class="'a-s13' + cls" id="a-s13">
        <ellipse
          transform="matrix(0.9982 -6.054976e-02 6.054976e-02 0.9982 -15.61 1.8791)"
          class="st12"
          cx="23.2"
          cy="258.5"
          rx="7.3"
          ry="7.3"
        />
        <circle class="st12" cx="23.2" cy="258.5" r="5.2" />
      </g>
      <g :class="'a-s18' + cls" id="a-s18">
        <circle class="st12" cx="32.3" cy="44.3" r="7.3" />
        <circle class="st12" cx="32.3" cy="44.3" r="5.2" />
      </g>
      <g :class="'a-s19' + cls" id="a-s19">
        <circle class="st12" cx="64.1" cy="44.3" r="7.3" />
        <circle class="st12" cx="64.1" cy="44.3" r="5.2" />
      </g>
      <g :class="'a-s20' + cls" id="a-s20">
        <circle class="st12" cx="96" cy="44.3" r="7.3" />
        <circle class="st12" cx="96" cy="44.3" r="5.2" />
      </g>
      <g :class="'a-s21' + cls" id="a-s21">
        <circle class="st12" cx="141.5" cy="44.3" r="7.3" />
        <circle class="st12" cx="141.5" cy="44.3" r="5.2" />
      </g>
      <g :class="'a-s22' + cls" id="a-s22">
        <circle class="st12" cx="187.3" cy="44.3" r="7.3" />
        <circle class="st12" cx="187.3" cy="44.3" r="5.2" />
      </g>
      <g :class="'a-s23' + cls" id="a-s23">
        <ellipse
          transform="matrix(0.8 -0.5999 0.5999 0.8 19.1046 145.8987)"
          class="st12"
          cx="228.4"
          cy="44.3"
          rx="7.3"
          ry="7.3"
        />
        <circle class="st12" cx="228.4" cy="44.3" r="5.2" />
      </g>
      <g :class="'a-s24' + cls" id="a-s24">
        <ellipse
          transform="matrix(0.3162 -0.9487 0.9487 0.3162 140.8987 284.0616)"
          class="st12"
          cx="267.5"
          cy="44.3"
          rx="7.3"
          ry="7.3"
        />
        <circle class="st12" cx="267.6" cy="44.3" r="5.2" />
      </g>
      <g :class="'a-s25' + cls" id="a-s25">
        <circle class="st12" cx="302.2" cy="44.3" r="7.3" />
        <circle class="st12" cx="302.2" cy="44.3" r="5.2" />
      </g>
    </g>
  </svg>
</template>

<script>
export default {
  props: ["data", "currentPano", "cls"],
  data() {
    return {
      currentId: "",
    };
  },
  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);
      this.currentId = target.id;
      if (tt) {
        this.$bus.$emit("ifrMessage", {
          events: "flyToPano",
          data: tt,
        });
      }
    },
  },
  watch: {
    currentPano: {
      deep: true,
      immediate: true,
      handler: function(newVal) {
        if (!this.currentId) {
          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");
          }
        }
      },
    },
    currentId: {
      deep: true,
      handler: function(newVal) {
        if (newVal) {
          console.log(newVal, 111111);
          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 + this.cls);
            ele && ele.classList.add("active");
          }
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
@color: #6cac2f;
.st0 {
  opacity: 0.89;
  fill: #343434;
}
.st1 {
  opacity: 0.6;
}
.st2 {
  opacity: 0.8;
}
.st3 {
  fill: #ffffff;
}
.st4 {
  opacity: 0.8;
  fill: #ffffff;
}
.st5 {
  fill: none;
  stroke: #ffffff;
  stroke-width: 0.5;
  stroke-miterlimit: 9.9985;
}
.st6 {
  fill: none;
  stroke: #ffffff;
  stroke-width: 0.5;
  stroke-miterlimit: 9.9995;
}
.st7 {
  fill: none;
  stroke: #ffffff;
  stroke-width: 0.5;
  stroke-miterlimit: 9.9999;
}
.st8 {
  opacity: 0.7;
  fill: #ffffff;
}
.st9 {
  opacity: 0.4;
}

.st10 {
  opacity: 0.4;
  fill: none;
  stroke: #ffffff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.st11 {
  opacity: 0.4;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.st12 {
  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>