yangshi_cloudExbition/src/components/mapsvg/xuting.vue

<template>
  <svg
    version="1.1"
    id="XT"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    viewBox="0 0 300 300"
    xml:space="preserve"
  >
    <g id="xt_1_">
      <circle id="xt_x5F_2" class="st0" cx="150.5" cy="150.6" r="147.9" />
      <circle id="xt_x5F_1" class="st0" cx="141.1" cy="133.4" r="99.4" />
      <g class="st1">
        <path
          class="st2"
          d="M213,284.3c60.5-28.4,95.9-95.6,81.7-163.9C281.5,56.4,229,10.9,167.5,3.5"
        />
        <path
          class="st2"
          d="M58.8,33.9C16,67.4-6.7,123.5,5.1,180.4c5.5,26.3,25.8,66.2,51.5,84.7"
        />
        <circle class="st3" cx="141.1" cy="132.9" r="99.4" />
        <path
          class="st4"
          d="M240.4,132.9c0,54.9-44.5,99.4-99.4,99.4c-39.3,0-73.3-22.9-89.5-55.9"
        />
        <circle class="st3" cx="150.4" cy="151.3" r="147.7" />
      </g>
      <g class="st5">
        <rect
          x="239.4"
          y="31.3"
          transform="matrix(0.6343 -0.7731 0.7731 0.6343 58.6197 199.8735)"
          class="st6"
          width="2.4"
          height="13.4"
        />

        <rect
          x="200.7"
          y="8.7"
          transform="matrix(0.3523 -0.9359 0.9359 0.3523 116.3282 198.9834)"
          class="st6"
          width="2.4"
          height="13.4"
        />

        <rect
          x="264.8"
          y="57.4"
          transform="matrix(0.8069 -0.5906 0.5906 0.8069 13.5263 169.4816)"
          class="st6"
          width="2.4"
          height="13.4"
        />

        <rect
          x="283"
          y="89.9"
          transform="matrix(0.9309 -0.3652 0.3652 0.9309 -15.6331 110.4542)"
          class="st6"
          width="2.4"
          height="13.4"
        />

        <rect
          x="291.8"
          y="124.1"
          transform="matrix(0.9917 -0.1285 0.1285 0.9917 -14.3734 38.7172)"
          class="st6"
          width="2.4"
          height="13.4"
        />

        <rect
          x="286.7"
          y="166.3"
          transform="matrix(0.1134 -0.9936 0.9936 0.1134 93.7222 439.9645)"
          class="st6"
          width="13.4"
          height="2.4"
        />

        <rect
          x="278.9"
          y="198.8"
          transform="matrix(0.3469 -0.9379 0.9379 0.3469 -1.0262 398.4525)"
          class="st6"
          width="13.4"
          height="2.4"
        />

        <rect
          x="261.5"
          y="233"
          transform="matrix(0.5784 -0.8158 0.8158 0.5784 -77.9707 317.5801)"
          class="st6"
          width="13.4"
          height="2.4"
        />
      </g>
    </g>
    <g id="point" :class="cls" @click="handleClick" @mouseleave="$emit('hoverPano',{})" @mouseover="hoverItem">
      <g :class="'xt-s1' + cls" id="xt-s1">
        <circle class="st7" cx="230.4" cy="48" r="7.7" />
        <circle class="st7" cx="230.4" cy="48" r="5.5" />
      </g>
      <g :class="'xt-s12' + cls" id="xt-s12">
        <circle class="st7" cx="197.7" cy="30.6" r="7.7" />
        <circle class="st7" cx="197.7" cy="30.6" r="5.5" />
      </g>
      <g :class="'xt-s2' + cls" id="xt-s2">
        <circle class="st7" cx="253.8" cy="73.1" r="7.7" />
        <circle class="st7" cx="253.8" cy="73.1" r="5.5" />
      </g>
      <g :class="'xt-s3' + cls" id="xt-s3">
        <ellipse
          transform="matrix(0.4641 -0.8858 0.8858 0.4641 53.577 294.2482)"
          class="st7"
          cx="270"
          cy="102.8"
          rx="7.7"
          ry="7.7"
        />
        <circle class="st7" cx="270" cy="102.9" r="5.5" />
      </g>
      <g :class="'xt-s9' + cls" id="xt-s9">
        <circle class="st7" cx="97" cy="186" r="7.7" />
        <circle class="st7" cx="97" cy="186" r="5.5" />
      </g>
      <g :class="'xt-s10' + cls" id="xt-s10">
        <circle class="st7" cx="162.1" cy="196.9" r="7.7" />
        <circle class="st7" cx="162.1" cy="196.9" r="5.5" />
      </g>
      <g :class="'xt-s11' + cls" id="xt-s11">
        <circle class="st7" cx="208.7" cy="158.1" r="7.7" />
        <circle class="st7" cx="208.7" cy="158.1" r="5.5" />
      </g>
      <g :class="'xt-s4' + cls" id="xt-s4">
        <circle class="st7" cx="277.1" cy="134.7" r="7.7" />
        <ellipse class="st7" cx="277.2" cy="134.6" rx="5.5" ry="5.5" />
      </g>
      <g :class="'xt-s5' + cls" id="xt-s5">
        <ellipse
          transform="matrix(0.6 -0.8 0.8 0.6 -21.7909 288.1162)"
          class="st7"
          cx="277.2"
          cy="165.8"
          rx="7.7"
          ry="7.7"
        />
        <circle class="st7" cx="277.2" cy="165.9" r="5.5" />
      </g>
      <g :class="'xt-s6' + cls" id="xt-s6">
        <circle class="st7" cx="270.6" cy="194.8" r="7.7" />
        <circle class="st7" cx="270.6" cy="194.8" r="5.5" />
      </g>
      <g :class="'xt-s7' + cls" id="xt-s7">
        <circle class="st7" cx="253.2" cy="223.2" r="7.7" />

        <ellipse
          transform="matrix(0.4641 -0.8858 0.8858 0.4641 -62.0468 343.9185)"
          class="st7"
          cx="253.2"
          cy="223.2"
          rx="5.5"
          ry="5.5"
        />
      </g>
      <g :class="'xt-s8' + cls" id="xt-s8">
        <circle class="st7" cx="31.5" cy="99.7" r="7.7" />
        <circle class="st7" cx="31.5" cy="99.7" r="5.5" />
      </g>
    </g>
  </svg>
</template>

<script>
export default {
  props: ["data", "currentPanoid", "cls"],
  data() {
    let keysData = Object.keys(this.data);
    return {
      keysData,
    };
  },
  methods: {
    hoverItem(e){
      let target = e.target.parentElement;
      console.dir(target);
      let tt = this.data[target.id];
      this.$emit('hoverPano',tt||{})
    },
    handleClick(e) {
      let target = e.target.parentElement;
      let tt = this.data[target.id];
      if (tt) {
        this.$bus.$emit('ifrMessage',{
          events:'flyToPano',
          data:tt
        })
      }
    },
  },
  watch: {
    currentPanoid: {
      deep: true,
      immediate: true,
      handler: function(newVal) {
        let kk = this.keysData.find((item) => {
          let key = this.data[item].id;
          return key == newVal;
        });

        this.$emit('currentPano',this.data[kk]||{})
        document.querySelector("." + this.cls) &&
          Array.from(document.querySelector("." + this.cls).childNodes).forEach(
            (item) => {
              item.classList.remove("active");
            }
          );
        if (kk) {
          document.querySelector("." + kk + this.cls).classList.add("active");
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
@color: #b1302e;
.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;
  stroke-miterlimit: 10;
}
.st3 {
  opacity: 0.89;
  fill: none;
  stroke: #a0a0a0;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.st4 {
  opacity: 0.89;
  fill: none;
  stroke: #a0a0a0;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.st5 {
  opacity: 0.6;
}
.st6 {
  opacity: 0.89;
  fill: #ffffff;
}
.st7 {
  opacity: 0.6;
  fill: #ffffff;
}

#XT {
  width: 51%;
}
#point {
  > g {
    cursor: pointer;
    &.active {
      ellipse,
      circle:last-of-type {
        fill: @color;
        opacity: 1!important;
      }
      circle:first-of-type {
        opacity: 1!important;
      }
    }
    
    &:hover{
      ellipse,
      circle:last-of-type {
        fill: #fff;
        opacity: 1!important;
      }
      circle:first-of-type {
        opacity: 1!important;
        fill: @color;
      }
    }
  }
}
</style>