yangshi_cloudExbition/src/components/mapsvg/c.vue

<template>
  <svg
    version="1.1"
    id="C_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="c">
      <path
        id="c_x5F_1"
        class="st0"
        d="M345.3,24.6H40.9C18.6,24.6,0.4,41,0.4,61.1v177.6c0,20.1,18.2,36.4,40.5,36.4h304.4V24.6
		L345.3,24.6z"
      />
      <g class="st1">
        <path id="c_x5F_2" class="st2" d="M347.7,274.9V25.1" />
        <path
          class="st3"
          d="M346.1,24.1H121.5c0,0,100.7,61,102.5,229.9c0,11.5,9.3,20.9,20.8,21c43.5,0.3,100,0.5,100,0.5"
        />
      </g>
      <g class="st4">
        <g>
          <rect x="341.4" y="101.2" class="st5" width="3.7" height="16.3" />
          <rect x="341.4" y="52.6" class="st5" width="3.7" height="16.3" />
          <rect x="341.4" y="247.2" class="st5" width="3.7" height="16.3" />
          <rect x="341.4" y="149.8" class="st5" width="3.7" height="16.3" />
          <rect x="341.4" y="198.6" class="st5" width="3.7" height="16.3" />
        </g>
        <g>
          <rect x="267" y="25.1" class="st5" width="16.3" height="3.7" />
          <rect x="306.6" y="25.1" class="st5" width="16.3" height="3.7" />
          <rect x="148" y="25.1" class="st5" width="16.3" height="3.7" />
          <rect x="227.4" y="25.1" class="st5" width="16.3" height="3.7" />
          <rect x="187.7" y="25.1" class="st5" width="16.3" height="3.7" />
        </g>
        <g class="st6">
          <rect x="144.6" y="174.9" class="st7" width="4.4" height="75.5" />
          <polygon
            class="st7"
            points="141,178.6 152.2,178.6 152.4,246.7 141.4,246.7 			"
          />
        </g>
        <g class="st6">
          <rect x="144.6" y="52.3" class="st7" width="4.4" height="75.5" />
          <polygon
            class="st7"
            points="141,56.1 152.2,56 152.4,124.2 141.4,124.3 			"
          />
        </g>
        <g class="st6">
          <rect
            x="41.6"
            y="23.3"
            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -30.3434 48.8428)"
            class="st7"
            width="4.4"
            height="75.5"
          />
          <polygon class="st7" points="15.6,41 23.4,33 71.8,81.1 64.1,88.9 			" />
        </g>
        <g class="st6">
          <rect
            x="6.1"
            y="236.4"
            transform="matrix(0.7071 -0.7071 0.7071 0.7071 -155.8747 100.8918)"
            class="st7"
            width="75.5"
            height="4.4"
          />
          <polygon
            class="st7"
            points="15.6,258.5 23.4,266.4 71.8,218.5 64.1,210.5 			"
          />
        </g>
        <g class="st6">
          <rect x="225.5" y="55.6" class="st7" width="4.4" height="59.5" />
          <polygon
            class="st7"
            points="222.6,69.2 232.8,69.2 232.9,85.1 222.6,85.1 			"
          />
        </g>
        <g class="st6">
          <rect x="287" y="55.6" class="st7" width="4.4" height="59.5" />
          <polygon
            class="st7"
            points="284,69.2 294.3,69.2 294.4,85.1 284.1,85.1 			"
          />
        </g>
        <g class="st6">
          <rect x="225.5" y="179.1" class="st7" width="4.4" height="59.5" />
          <polygon
            class="st7"
            points="222.6,225 232.9,225 233,209.1 222.8,209.1 			"
          />
        </g>
        <g class="st6">
          <rect x="287" y="179.1" class="st7" width="4.4" height="59.5" />
          <polygon
            class="st7"
            points="284.1,225 294.4,225 294.4,209.1 284.3,209.1 			"
          />
        </g>
      </g>
    </g>
    <g id="point" :class="cls" @click="handleClick" @mouseleave="$emit('hoverPano',{})" @mouseover="hoverItem">
      <g  :class="'c-s9' + cls" id="c-s9">
        <circle class="st8" cx="161" cy="39.7" r="7.2" />
        <circle class="st8" cx="161" cy="39.7" r="5.2" />
      </g>
      <g  :class="'c-s10' + cls" id="c-s10">
        <circle class="st8" cx="199.6" cy="39.7" r="7.2" />
        <circle class="st8" cx="199.6" cy="39.7" r="5.2" />
      </g>
      <g  :class="'c-s11' + cls" id="c-s11">
        <circle class="st8" cx="238.2" cy="39.7" r="7.2" />
        <circle class="st8" cx="238.2" cy="39.7" r="5.2" />
      </g>
      <g  :class="'c-s12' + cls" id="c-s12">
        <circle class="st8" cx="277" cy="39.7" r="7.2" />
        <circle class="st8" cx="277" cy="39.7" r="5.2" />
      </g>
      <g  :class="'c-s13' + cls" id="c-s13">
        <circle class="st8" cx="315.6" cy="39.7" r="7.2" />
        <circle class="st8" cx="315.6" cy="39.7" r="5.2" />
      </g>
      <g  :class="'c-s14' + cls" id="c-s14">
        <circle class="st8" cx="328.1" cy="63.9" r="7.2" />
        <circle class="st8" cx="328.1" cy="63.9" r="5.2" />
      </g>
      <g  :class="'c-s26' + cls" id="c-s26">
        <circle class="st8" cx="304.9" cy="76.4" r="7.2" />
        <circle class="st8" cx="304.9" cy="76.4" r="5.2" />
      </g>
      <g  :class="'c-s25' + cls" id="c-s25">
        <ellipse
          transform="matrix(0.4641 -0.8858 0.8858 0.4641 78.9452 283.2633)"
          class="st8"
          cx="273.6"
          cy="76.4"
          rx="7.2"
          ry="7.2"
        />
        <circle class="st8" cx="273.5" cy="76.4" r="5.2" />
      </g>
      <g  :class="'c-s19' + cls" id="c-s19">
        <circle class="st8" cx="304.8" cy="217.1" r="7.2" />
        <circle class="st8" cx="304.8" cy="217.1" r="5.2" />
      </g>
      <g  :class="'c-s20' + cls" id="c-s20">
        <ellipse
          transform="matrix(0.4641 -0.8858 0.8858 0.4641 -45.6486 358.6445)"
          class="st8"
          cx="273.6"
          cy="217"
          rx="7.2"
          ry="7.2"
        />
        <circle class="st8" cx="273.4" cy="217.1" r="5.2" />
      </g>
      <g  :class="'c-s21' + cls" id="c-s21">
        <circle class="st8" cx="243.4" cy="218.8" r="7.2" />
        <circle class="st8" cx="243.4" cy="218.8" r="5.2" />
      </g>
      <g  :class="'c-s22' + cls" id="c-s22">
        <circle class="st8" cx="212.1" cy="218.8" r="7.2" />
        <circle class="st8" cx="212.1" cy="218.8" r="5.2" />
      </g>
      <g  :class="'c-s24' + cls" id="c-s24">
        <circle class="st8" cx="243.5" cy="77.1" r="7.2" />
        <circle class="st8" cx="243.5" cy="77.1" r="5.2" />
      </g>
      <g  :class="'c-s23' + cls" id="c-s23">
        <circle class="st8" cx="212.1" cy="77.1" r="7.2" />
        <circle class="st8" cx="212.1" cy="77.1" r="5.2" />
      </g>
      <g  :class="'c-s7' + cls" id="c-s7">
        <circle class="st8" cx="164.4" cy="76.4" r="7.2" />
        <circle class="st8" cx="164.4" cy="76.4" r="5.2" />
      </g>
      <g  :class="'c-s3' + cls" id="c-s3">
        <circle class="st8" cx="129.2" cy="76.8" r="7.2" />
        <circle class="st8" cx="129.2" cy="76.8" r="5.2" />
      </g>
      <g  :class="'c-s8' + cls" id="c-s8">
        <circle class="st8" cx="163.8" cy="230" r="7.2" />
        <circle class="st8" cx="163.8" cy="230" r="5.2" />
      </g>
      <g  :class="'c-s4' + cls" id="c-s4">
        <circle class="st8" cx="128.7" cy="230.4" r="7.2" />
        <circle class="st8" cx="128.7" cy="230.4" r="5.2" />
      </g>
      <g  :class="'c-s5' + cls" id="c-s5">
        <ellipse
          transform="matrix(0.1356 -0.9908 0.9908 0.1356 -220.1748 271.1569)"
          class="st8"
          cx="45.3"
          cy="261.8"
          rx="7.2"
          ry="7.2"
        />
        <circle class="st8" cx="45.2" cy="261.8" r="5.2" />
      </g>
      <g  :class="'c-s1' + cls" id="c-s1">
        <circle class="st8" cx="20.6" cy="236.7" r="7.2" />
        <circle class="st8" cx="20.6" cy="236.7" r="5.2" />
      </g>
      <g  :class="'c-s2' + cls" id="c-s2">
        <circle class="st8" cx="21.7" cy="65.5" r="7.2" />
        <circle class="st8" cx="21.7" cy="65.5" r="5.2" />
      </g>
      <g  :class="'c-s6' + cls" id="c-s6">
        <circle class="st8" cx="45.7" cy="39.7" r="7.2" />
        <circle class="st8" cx="45.7" cy="39.7" r="5.2" />
      </g>
      <g  :class="'c-s15' + cls" id="c-s15">
        <circle class="st8" cx="328.1" cy="111.8" r="7.2" />
        <circle class="st8" cx="328.1" cy="111.8" r="5.2" />
      </g>
      <g  :class="'c-s16' + cls" id="c-s16">
        <circle class="st8" cx="328.1" cy="159.6" r="7.2" />
        <circle class="st8" cx="328.1" cy="159.6" r="5.2" />
      </g>
      <g  :class="'c-s17' + cls" id="c-s17">
        <circle class="st8" cx="328.1" cy="207.5" r="7.2" />
        <circle class="st8" cx="328.1" cy="207.5" r="5.2" />
      </g>
      <g  :class="'c-s18' + cls" id="c-s18">
        <circle class="st8" cx="328.1" cy="252" r="7.2" />
        <circle class="st8" cx="328.1" cy="252" r="5.2" />
      </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: #ff9700;
.st0 {
  opacity: 0.89;
  fill: #343434;
}
.st1 {
  opacity: 0.4;
}
.st2 {
  opacity: 0.4;
  fill: none;
  stroke: #ffffff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.st3 {
  opacity: 0.4;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.st4 {
  opacity: 0.6;
}
.st5 {
  opacity: 0.7;
  fill: #ffffff;
}
.st6 {
  opacity: 0.8;
}
.st7 {
  fill: #ffffff;
}
.st8 {
  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>