jn_sis_zhfx/src/views/WindSite/pages/Info/StandAloneImg.vue

<template>
  <svg
    class="stand-alone-img"
    viewBox="0 0 1570 1070"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xml:space="preserve"
    :width="svgWidth"
    :height="svgHeight"
  >
    <defs>
      <!-- 变桨 -->
      <path
        class="stand-alone-img-path"
        id="pitch"
        fill="#BA3237"
        opacity="0.6"
        stroke="#05BB4C"
        stroke-width="6"
        d="M27.62,60.304l160.03,48.361l3.518,29.016L3,84.044c0,0,2.227-9.026,8.605-15.174C17.522,63.166,27.62,60.304,27.62,60.304z"
      />
      <!-- 机舱 -->
      <path
        class="stand-alone-img-path"
        id="engine-room"
        fill="#BA3237"
        opacity="0.6"
        stroke="#05BB4C"
        stroke-width="6"
        d="M295.172,87.062c-3.13-13.486-14.851-16.73-14.851-16.73L-468.878-79.698l-16.143-12.344l-63.62-24.688l-11.395,5.697l-126.291-47.478c0,0-35.843,9.664-58.729,35.366c-35.833,40.244-64.713,103.269-64.713,103.269l-0.949,24.688L79.016,185.228c0,0,12.043,3.038,24.665,4.067c10.436,0.853,21.862-0.27,21.862-0.27l167.122-65.519C292.665,123.507,298.214,100.157,295.172,87.062z"
      />
      <!-- 齿轮箱 -->
      <path
        class="stand-alone-img-path"
        id="gear-box"
        fill="#BA3237"
        opacity="0.6"
        stroke="#05BB4C"
        stroke-width="6"
        d="M177.396,18.822L86.052,2.504L11.984,177.197l88.787,16.317l43.275-98.657l31.637,6.959l4.997-19.08l-27.789-6.13L177.396,18.822z"
      />
      <!-- 发电机 -->
      <path
        class="stand-alone-img-path"
        id="alternator"
        fill="#BA3237"
        opacity="0.6"
        stroke="#05BB4C"
        stroke-width="6"
        d="M14.016,175.068L118.433,198.6l30.883-99.516l18.095-54.753l12.79-13.878L39.996,2.021L22.838,55.454L14.016,175.068z"
      />
      <!-- 偏航 -->
      <path
        class="stand-alone-img-path"
        id="yaw"
        fill="#BA3237"
        opacity="0.6"
        stroke="#05BB4C"
        stroke-width="6"
        d="M210.152,130.465l-68.025-12.017c0,0-75.83,0.199-135.799-12.484c-67.41-14.257-97.892-41.659-97.892-41.659s-11.844,12.318,2.256,25.502c20.491,19.159,98.496,43.978,176.047,51.625c97.358,9.599,181.853,1.301,181.853,1.301l1.241-10.201L210.152,130.465z"
      />
      <!-- 液压 -->
      <path
        class="stand-alone-img-path"
        id="hydraulic-pressure"
        fill="#BA3237"
        opacity="0.6"
        stroke="#05BB4C"
        stroke-width="6"
        d="M82.965,111.483l7.241-72.311l-56.954-8.682L3,181.489l44.656,0.79c0.946,1.133,82.424,16.771,82.424,16.771l7.024-83.744L82.965,111.483z"
      />
      <!-- 圆圈圈 -->
      <g id="stand-alone-circle-bj">
        <circle
          :class="{
            'stand-alone-circle1': StandAloneCircle1 && hover == 3,
          }"
          cx="0"
          cy="0"
          r="10"
          fill="#edbf03"
        />
        <circle
          :class="{
            'stand-alone-circle2': StandAloneCircle2 && hover == 3,
          }"
          cx="0"
          cy="0"
          r="20"
          fill="none"
          stroke="#edbf03"
          stroke-width="2"
        />
        <circle
          :class="{
            'stand-alone-circle3': StandAloneCircle3 && hover == 3,
          }"
          cx="0"
          cy="0"
          r="30"
          fill="none"
          stroke="#edbf03"
          stroke-width="1"
        />
        <circle
          :class="{
            'stand-alone-circle4': StandAloneCircle4 && hover == 3,
          }"
          cx="0"
          cy="0"
          r="45"
          fill="none"
          stroke="#edbf03"
          stroke-width="1"
        />
      </g>
      <g id="stand-alone-circle-jc">
        <circle
          :class="{
            'stand-alone-circle1': StandAloneCircle1 && hover == 6,
          }"
          cx="0"
          cy="0"
          r="10"
          fill="#edbf03"
        />
        <circle
          :class="{
            'stand-alone-circle2': StandAloneCircle2 && hover == 6,
          }"
          cx="0"
          cy="0"
          r="20"
          fill="none"
          stroke="#edbf03"
          stroke-width="2"
        />
        <circle
          :class="{
            'stand-alone-circle3': StandAloneCircle3 && hover == 6,
          }"
          cx="0"
          cy="0"
          r="30"
          fill="none"
          stroke="#edbf03"
          stroke-width="1"
        />
        <circle
          :class="{
            'stand-alone-circle4': StandAloneCircle4 && hover == 6,
          }"
          cx="0"
          cy="0"
          r="45"
          fill="none"
          stroke="#edbf03"
          stroke-width="1"
        />
      </g>
      <g id="stand-alone-circle-clx">
        <circle
          :class="{
            'stand-alone-circle1': StandAloneCircle1 && hover == 2,
          }"
          cx="0"
          cy="0"
          r="10"
          fill="#edbf03"
        />
        <circle
          :class="{
            'stand-alone-circle2': StandAloneCircle2 && hover == 2,
          }"
          cx="0"
          cy="0"
          r="20"
          fill="none"
          stroke="#edbf03"
          stroke-width="2"
        />
        <circle
          :class="{
            'stand-alone-circle3': StandAloneCircle3 && hover == 2,
          }"
          cx="0"
          cy="0"
          r="30"
          fill="none"
          stroke="#edbf03"
          stroke-width="1"
        />
        <circle
          :class="{
            'stand-alone-circle4': StandAloneCircle4 && hover == 2,
          }"
          cx="0"
          cy="0"
          r="45"
          fill="none"
          stroke="#edbf03"
          stroke-width="1"
        />
      </g>
      <g id="stand-alone-circle-fdj">
        <circle
          :class="{
            'stand-alone-circle1': StandAloneCircle1 && hover == 1,
          }"
          cx="0"
          cy="0"
          r="10"
          fill="#edbf03"
        />
        <circle
          :class="{
            'stand-alone-circle2': StandAloneCircle2 && hover == 1,
          }"
          cx="0"
          cy="0"
          r="20"
          fill="none"
          stroke="#edbf03"
          stroke-width="2"
        />
        <circle
          :class="{
            'stand-alone-circle3': StandAloneCircle3 && hover == 1,
          }"
          cx="0"
          cy="0"
          r="30"
          fill="none"
          stroke="#edbf03"
          stroke-width="1"
        />
        <circle
          :class="{
            'stand-alone-circle4': StandAloneCircle4 && hover == 1,
          }"
          cx="0"
          cy="0"
          r="45"
          fill="none"
          stroke="#edbf03"
          stroke-width="1"
        />
      </g>
      <g id="stand-alone-circle-ph">
        <circle
          :class="{
            'stand-alone-circle1': StandAloneCircle1 && hover == 4,
          }"
          cx="0"
          cy="0"
          r="10"
          fill="#edbf03"
        />
        <circle
          :class="{
            'stand-alone-circle2': StandAloneCircle2 && hover == 4,
          }"
          cx="0"
          cy="0"
          r="20"
          fill="none"
          stroke="#edbf03"
          stroke-width="2"
        />
        <circle
          :class="{
            'stand-alone-circle3': StandAloneCircle3 && hover == 4,
          }"
          cx="0"
          cy="0"
          r="30"
          fill="none"
          stroke="#edbf03"
          stroke-width="1"
        />
        <circle
          :class="{
            'stand-alone-circle4': StandAloneCircle4 && hover == 4,
          }"
          cx="0"
          cy="0"
          r="45"
          fill="none"
          stroke="#edbf03"
          stroke-width="1"
        />
      </g>
      <g id="stand-alone-circle-yy">
        <circle
          :class="{
            'stand-alone-circle1': StandAloneCircle1 && hover == 5,
          }"
          cx="0"
          cy="0"
          r="10"
          fill="#edbf03"
        />
        <circle
          :class="{
            'stand-alone-circle2': StandAloneCircle2 && hover == 5,
          }"
          cx="0"
          cy="0"
          r="20"
          fill="none"
          stroke="#edbf03"
          stroke-width="2"
        />
        <circle
          :class="{
            'stand-alone-circle3': StandAloneCircle3 && hover == 5,
          }"
          cx="0"
          cy="0"
          r="30"
          fill="none"
          stroke="#edbf03"
          stroke-width="1"
        />
        <circle
          :class="{
            'stand-alone-circle4': StandAloneCircle4 && hover == 5,
          }"
          cx="0"
          cy="0"
          r="45"
          fill="none"
          stroke="#edbf03"
          stroke-width="1"
        />
      </g>
    </defs>
    <!-- 背景图片 -->
    <image
      :style="`transform: translate(${getTransformPositionX()}px, 0)`"
      x="0"
      y="90"
      height="787"
      width="1570"
      v-show="$store.state.themeName === 'dark'"
      href="./standAloneImg-green.png"
    />
    <image
      :style="`transform: translate(${getTransformPositionX()}px, 0)`"
      x="0"
      y="90"
      height="787"
      width="1570"
      v-show="$store.state.themeName === 'light'"
      href="./standAloneImg-white.png"
    />
    <!-- 变桨 -->
    <g
      class="stand-alone-img-g"
      :class="{ active: activeIndex == 3 }"
      @mouseover="mouseover(3)"
      @mouseout="mouseout"
      @click="click(3)"
    >
      <use
        :transform="`translate(${getTransformPositionX(100)}, 190) scale(0.7)`"
        class="stand-alone-img-item"
        xlink:href="#pitch"
        x="214"
        y="110"
      />
      <use
        class="stand-alone-img-item-circle"
        xlink:href="#stand-alone-circle-bj"
        :x="getTransformPositionX(320)"
        y="330"
      />
      <line
        :class="{ 'stand-alone-line': line && hover == 3 }"
        :x1="getTransformPositionX(320)"
        y1="330"
        :x2="getTransformPositionX(620)"
        y2="50"
        stroke="#edbf03"
        stroke-width="2"
      />
      <circle
        :class="{ 'stand-alone-circle': circle && hover == 3 }"
        :cx="getTransformPositionX(620)"
        cy="50"
        r="5"
        fill="#edbf03"
      />
      <text
        :class="{ 'stand-alone-text': text && hover == 3 }"
        :x="getTransformPositionX(630)"
        y="60"
        fill="#fcaf17"
        font-size="50"
      >
        变桨
      </text>
    </g>
    <!-- 机舱 -->
    <g
      class="stand-alone-img-g"
      :class="{ active: activeIndex == 6 }"
      @mouseover="mouseover(6)"
      @mouseout="mouseout"
      @click="click(6)"
    >
      <use
        :style="`transform: translate(${getTransformPositionX()}px, 0)`"
        class="stand-alone-img-item"
        xlink:href="#engine-room"
        x="1270"
        y="395"
      />
      <use
        class="stand-alone-img-item-circle"
        xlink:href="#stand-alone-circle-jc"
        :x="getTransformPositionX(750)"
        y="380"
      />
      <line
        :class="{ 'stand-alone-line': line && hover == 6 }"
        :x1="getTransformPositionX(750)"
        y1="380"
        :x2="getTransformPositionX(1050)"
        y2="90"
        stroke="#edbf03"
        stroke-width="2"
      />
      <circle
        :class="{ 'stand-alone-circle': circle && hover == 6 }"
        :cx="getTransformPositionX(1050)"
        cy="90"
        r="5"
        fill="#edbf03"
      />
      <text
        :class="{ 'stand-alone-text': text && hover == 6 }"
        :x="getTransformPositionX(1060)"
        y="100"
        fill="#fcaf17"
        font-size="50"
      >
        机舱
      </text>
    </g>
    <!-- 齿轮箱 -->
    <g
      class="stand-alone-img-g"
      :class="{ active: activeIndex == 2 }"
      @mouseover="mouseover(2)"
      @mouseout="mouseout"
      @click="click(2)"
    >
      <use
        class="stand-alone-img-item"
        xlink:href="#gear-box"
        x="730"
        y="335"
        :transform="`translate(${getTransformPositionX(220)}, 280) scale(0.7)`"
      />
      <use
        class="stand-alone-img-item-circle"
        xlink:href="#stand-alone-circle-clx"
        :x="getTransformPositionX(800)"
        y="550"
      />
      <line
        :class="{ 'stand-alone-line': line && hover == 2 }"
        :x1="getTransformPositionX(800)"
        y1="550"
        :x2="getTransformPositionX(1100)"
        y2="250"
        stroke="#edbf03"
        stroke-width="2"
      />
      <circle
        :class="{ 'stand-alone-circle': circle && hover == 2 }"
        :cx="getTransformPositionX(1100)"
        cy="250"
        r="5"
        fill="#edbf03"
      />
      <text
        :class="{ 'stand-alone-text': text && hover == 2 }"
        :x="getTransformPositionX(1110)"
        y="250"
        fill="#fcaf17"
        font-size="50"
      >
        齿轮箱
      </text>
    </g>
    <!-- 发电机 -->
    <g
      class="stand-alone-img-g"
      :class="{ active: activeIndex == 1 }"
      @mouseover="mouseover(1)"
      @mouseout="mouseout"
      @click="click(1)"
    >
      <use
        class="stand-alone-img-item"
        xlink:href="#alternator"
        x="900"
        y="385"
        :transform="`translate(${getTransformPositionX(300)}, 260) scale(0.7)`"
      />
      <use
        class="stand-alone-img-item-circle"
        xlink:href="#stand-alone-circle-fdj"
        :x="getTransformPositionX(990)"
        y="580"
      />
      <line
        :class="{ 'stand-alone-line': line && hover == 1 }"
        :x1="getTransformPositionX(990)"
        y1="580"
        :x2="getTransformPositionX(1290)"
        y2="880"
        stroke="#edbf03"
        stroke-width="2"
      />
      <circle
        :class="{ 'stand-alone-circle': circle && hover == 1 }"
        :cx="getTransformPositionX(1290)"
        cy="880"
        r="5"
        fill="#edbf03"
      />
      <text
        :class="{ 'stand-alone-text': text && hover == 1 }"
        :x="getTransformPositionX(1300)"
        y="920"
        fill="#fcaf17"
        font-size="50"
      >
        发电机
      </text>
    </g>
    <!-- 偏航 -->
    <g
      class="stand-alone-img-g"
      :class="{ active: activeIndex == 4 }"
      @mouseover="mouseover(4)"
      @mouseout="mouseout"
      @click="click(4)"
    >
      <use
        class="stand-alone-img-item"
        xlink:href="#yaw"
        :x="getTransformPositionX(675)"
        y="645"
      />
      <use
        class="stand-alone-img-item-circle"
        xlink:href="#stand-alone-circle-ph"
        :x="getTransformPositionX(650)"
        y="750"
      />
      <line
        :class="{ 'stand-alone-line': line && hover == 4 }"
        :x1="getTransformPositionX(650)"
        y1="750"
        :x2="getTransformPositionX(950)"
        y2="1050"
        stroke="#edbf03"
        stroke-width="2"
      />
      <circle
        :class="{ 'stand-alone-circle': circle && hover == 4 }"
        :cx="getTransformPositionX(950)"
        cy="1050"
        r="5"
        fill="#edbf03"
      />
      <text
        :class="{ 'stand-alone-text': text && hover == 4 }"
        :x="getTransformPositionX(960)"
        y="1050"
        fill="#fcaf17"
        font-size="50"
      >
        偏航
      </text>
    </g>
    <!-- 液压 -->
    <g
      class="stand-alone-img-g"
      :class="{ active: activeIndex == 5 }"
      @mouseover="mouseover(5)"
      @mouseout="mouseout"
      @click="click(5)"
    >
      <use
        class="stand-alone-img-item"
        xlink:href="#hydraulic-pressure"
        x="775"
        y="455"
        :transform="`translate(${getTransformPositionX(260)}, 310) scale(0.7)`"
      />
      <use
        class="stand-alone-img-item-circle"
        xlink:href="#stand-alone-circle-yy"
        :x="getTransformPositionX(850)"
        y="730"
      />
      <line
        :class="{ 'stand-alone-line': line && hover == 5 }"
        :x1="getTransformPositionX(850)"
        y1="730"
        :x2="getTransformPositionX(1150)"
        y2="1030"
        stroke="#edbf03"
        stroke-width="2"
      />
      <circle
        :class="{ 'stand-alone-circle': circle && hover == 5 }"
        :cx="getTransformPositionX(1150)"
        cy="1030"
        r="5"
        fill="#edbf03"
      />
      <text
        :class="{ 'stand-alone-text': text && hover == 5 }"
        :x="getTransformPositionX(1160)"
        y="1030"
        fill="#fcaf17"
        font-size="50"
      >
        液压
      </text>
    </g>
  </svg>
</template>

<script>
export default {
  // 名称
  name: "StandAloneImg",
  // 使用组件
  components: {},
  // 数据
  data() {
    return {
      StandAloneCircle1: false,
      StandAloneCircle2: false,
      StandAloneCircle3: false,
      StandAloneCircle4: false,
      line: false,
      circle: false,
      text: false,
      hover: 0,
      svgWidth: 0,
      svgHeight: 400,
      // SVG 整体横向位移值，正数向左位移，负数向右位移，连同内部高亮区域与其他元素会一并位移
      transformPositionX: 480,
    };
  },
  props: {
    activeIndex: {
      type: Number,
      default: 0,
    },
  },
  emits: {
    // 选中事件
    selectSvg: null,
  },
  // 函数
  methods: {
    mouseover: function (hIndex) {
      this.StandAloneCircle1 = false;
      this.StandAloneCircle2 = false;
      this.StandAloneCircle3 = false;
      this.StandAloneCircle4 = false;
      this.line = false;
      this.circle = false;
      this.text = false;
      this.StandAloneCircle1 = true;
      this.StandAloneCircle2 = true;
      this.StandAloneCircle3 = true;
      this.StandAloneCircle4 = true;
      this.line = true;
      this.circle = true;
      this.text = true;
      // this.hover = hIndex;
      this.hover = this.activeIndex;
    },
    mouseout: function () {
      this.StandAloneCircle1 = false;
      this.StandAloneCircle2 = false;
      this.StandAloneCircle3 = false;
      this.StandAloneCircle4 = false;
      this.line = false;
      this.circle = false;
      this.text = false;
      this.hover = 0;
    },
    click: function (index) {
      this.$emit("selectSvg", index);
    },

    getTransformPositionX(posValue = 0) {
      return posValue - this.transformPositionX;
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    this.svgWidth = document.documentElement.clientWidth * 0.75 - 60 || 1385;
    // 渲染后
    let isShow = setInterval(() => {
      if (this.$el.style.display != "none") {
        if (this.$el.scrollWidth == this.svgWidth) {
          let height = this.$el.scrollHeight.toFixed(0);
          let width = (
            (height / (this.svgHeight + 50)) *
            this.svgWidth
          ).toFixed(0);
          this.svgWidth = width;
          this.svgHeight = height;
          clearInterval(isShow);
        } else {
          let width = this.$el.scrollWidth.toFixed(0);
          let height = ((width / this.svgWidth) * this.svgHeight).toFixed(0);
          this.svgWidth = width;
          this.svgHeight = height;
          clearInterval(isShow);
        }
      }
    }, 200);
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.stand-alone-img {
  .stand-alone-img-path {
    -webkit-filter: drop-shadow(0 0 5px @green);
  }

  .stand-alone-img-g {
    .stand-alone-img-item {
      opacity: 0;
      cursor: pointer;
      transition: all 0.3s;
    }

    .stand-alone-img-item-circle,
    line,
    circle,
    text {
      opacity: 0;
    }

    text {
      display: none;
    }

    &:hover,
    &.active {
      .stand-alone-img-item,
      .stand-alone-img-item-circle,
      line,
      circle,
      text {
        opacity: 1;
      }

      text {
        display: block;
      }
    }
  }

  .stand-alone-circle1 {
    animation: StandAloneCircle1 0.1s linear;
  }

  .stand-alone-circle2 {
    animation: StandAloneCircle2 0.2s linear;
  }

  .stand-alone-circle3 {
    animation: StandAloneCircle3 0.3s linear;
  }

  .stand-alone-circle4 {
    animation: StandAloneCircle4 0.45s linear;
  }

  .stand-alone-line {
    stroke-dasharray: 430, 450;
    animation: line 0.45s linear;
  }

  .stand-alone-circle {
    animation: circle 0.5s linear;
  }

  .stand-alone-text {
    animation: text 0.5s linear;
  }
}

@keyframes line {
  from {
    stroke-dashoffset: 430;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes circle {
  0% {
    r: 0;
  }

  90% {
    r: 0;
  }

  100% {
    r: 5;
  }
}

@keyframes text {
  0% {
    opacity: 0;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes StandAloneCircle1 {
  from {
    r: 0;
  }

  to {
    r: 10;
  }
}

@keyframes StandAloneCircle2 {
  from {
    r: 0;
  }

  to {
    r: 20;
  }
}

@keyframes StandAloneCircle3 {
  from {
    r: 0;
  }

  to {
    r: 30;
  }
}

@keyframes StandAloneCircle4 {
  from {
    r: 0;
  }

  to {
    r: 45;
  }
}
</style>