Vent-App/pages/home/detail/fanlocalAnimate/fanlocalAnimate2.vue

<template>
  <view style="width: 100%; height: 100%">
    <div class="ventilate" id="topPic">
      <!-- 进风箭头 -->
      <div
        :class="
          nowfengji == '2' ? 'arrow1' : nowfengji == '1' ? 'arrow1-fan1' : ''
        "
        id="arrow1"
      ></div>
      <div
        :class="
          nowfengji == '2' ? 'arrow2' : nowfengji == '1' ? 'arrow2-fan1' : ''
        "
        id="arrow2"
      ></div>
      <div
        :class="
          nowfengji == '2' ? 'arrow3' : nowfengji == '1' ? 'arrow3-fan1' : ''
        "
        id="arrow3"
      ></div>
      <div
        :class="
          nowfengji == '2' ? 'arrow4' : nowfengji == '1' ? 'arrow4-fan1' : ''
        "
        id="arrow4"
      ></div>
      <div
        :class="
          nowfengji == '2' ? 'arrow5' : nowfengji == '1' ? 'arrow5-fan1' : ''
        "
        id="arrow5"
      ></div>
      <div
        :class="
          nowfengji == '2' ? 'arrow6' : nowfengji == '1' ? 'arrow6-fan1' : ''
        "
        id="arrow6"
      ></div>
      <div
        :class="
          nowfengji == '2' ? 'arrow7' : nowfengji == '1' ? 'arrow7-fan1' : ''
        "
        id="arrow7"
      ></div>
      <div
        :class="
          nowfengji == '2' ? 'arrow8' : nowfengji == '1' ? 'arrow8-fan1' : ''
        "
        id="arrow8"
      ></div>
      <div
        :class="
          nowfengji == '2' ? 'arrow9' : nowfengji == '1' ? 'arrow9-fan1' : ''
        "
        id="arrow9"
      ></div>
      <div
        :class="
          nowfengji == '2' ? 'arrow10' : nowfengji == '1' ? 'arrow10-fan1' : ''
        "
        id="arrow10"
      ></div>

      <div
        style="top: 14%; left: 18%"
        v-if="nowfengji == '1'"
        class="devfan1"
      ></div>
      <div
        style="top: 14%; left: 27.5%"
        v-if="nowfengji == '1'"
        class="devfan1"
      ></div>
      <div
        style="bottom: 13%; left: 18%"
        v-if="nowfengji == '2'"
        class="devfan1"
      ></div>
      <div
        style="bottom: 13%; left: 27.5%"
        v-if="nowfengji == '2'"
        class="devfan1"
      ></div>

      <div style="top: 3%; left: 9%" class="state1" v-if="nowfengji == '1'">
        运行
      </div>
      <div style="top: 3%; left: 9%" class="state2" v-else>停止</div>

      <div style="top: 3%; left: 34%" class="state1" v-if="nowfengji == '1'">
        运行
      </div>
      <div style="top: 3%; left: 34%" class="state2" v-else>停止</div>

      <div style="bottom: 25%; left: 9%" class="state1" v-if="nowfengji == '2'">
        运行
      </div>
      <div style="bottom: 25%; left: 9%" class="state2" v-else>停止</div>

      <div
        style="bottom: 25%; left: 34%"
        class="state1"
        v-if="nowfengji == '2'"
      >
        运行
      </div>
      <div style="bottom: 25%; left: 34%" class="state2" v-else>停止</div>

      <div style="top: 17%; right: 41%" class="textshow">主风机</div>
      <div style="bottom: 15%; right: 41%" class="textshow">备风机</div>

      <div style="top: 32%; left: 6%" class="textshow2">前级电机</div>
      <div style="top: 32%; left: 34%" class="textshow2">后级电机</div>
      <div style="bottom: -2%; left: 6%" class="textshow2">前级电机</div>
      <div style="bottom: -2%; left: 34%" class="textshow2">后级风机</div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nowfengji: "",
    };
  },
  props: {
    mainFanText: {
      type: String,
      default: "主风机",
    },
    subFanText: {
      type: String,
      default: "备风机",
    },
    fan1State: {
      type: String,
      default: "",
    },
    fan2State: {
      type: String,
      default: "",
    },
  },
  methods: {
    setnowfengji(val) {
      if (this.nowfengji != val) {
        this.nowfengji = val;
        this.setFengjiDonghua();
      }
    },
    setFengjiDonghua() {
      if (this.nowfengji == "2") {
      } else if (this.nowfengji == "1") {
      } else {
      }
    },
    setNowStart() {
      if (this.fan1State == "1") {
        this.nowfengji = "1";
      } else if (this.fan2State == "1") {
        this.nowfengji = "2";
      } else {
        this.nowfengji = "";
      }
    },
  },
  watch: {
    fan1State(val) {
      this.setNowStart();
    },
    fan2State(val) {
      this.setNowStart();
    },
  },
  onLoad(query) {
    this.setFengjiDonghua();
  },
};
</script>

<style scoped>
div.ventilate {
  width: 100%;
  height: 200px;
  min-height: 200px;
  min-width: 300px;
  background-image: url(/static/fan/fan.png);
  background-size: 100% 100%;
  perspective: 800px;
}
.state1 {
  position: absolute;
  z-index: 2;
  width: 8%;
  height: 14px;
  padding-bottom: 5px;
  padding-left: 3px;
  background-color: rgba(78, 155, 1, 0.438);
  border: none;
  color: rgb(255, 255, 255);
  font-size: 12px;
}
.state2 {
  position: absolute;
  z-index: 2;
  width: 8%;
  height: 14px;
  padding-bottom: 5px;
  padding-left: 3px;
  background-color: rgba(167, 42, 11, 0.5);
  border: none;
  color: rgb(206, 206, 212);
  font-size: 12px;
}
.textshow {
  position: absolute;
  z-index: 2;
  color: rgb(20, 19, 19);
  font-size: 16px;
}
.textshow2 {
  position: absolute;
  z-index: 2;
  color: rgb(100, 106, 136);
  font-size: 14px;
}
.devfan1,
.devfan2 {
  position: absolute !important;
  z-index: 2;
  min-width: 20px;
  min-height: 20px;
  height: 22px;
  width: 22px;
  background-image: url(/static/fan/devFan.png);
  background-size: 100% 100%;
}

.devfan1 {
  position: relative;
  animation: rotate1 3s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: rotate1 3s infinite linear;
}

@keyframes rotate1 {
  0% {
    -webkit-transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(360deg);
    opacity: 1;
  }
}
div.arrow1,
div.arrow2,
div.arrow3,
div.arrow4,
div.arrow5,
div.arrow6,
div.arrow7,
div.arrow8,
div.arrow9,
div.arrow10,
div.arrow1-fan1,
div.arrow2-fan1,
div.arrow3-fan1,
div.arrow4-fan1,
div.arrow5-fan1,
div.arrow6-fan1,
div.arrow7-fan1,
div.arrow8-fan1,
div.arrow9-fan1,
div.arrow10-fan1 {
  position: absolute;
  right: 40px;
  opacity: 0;
  top: 96px;
  width: 30px;
  height: 15px;
  box-sizing: border-box;
  float: right;
  z-index: 1;
  transition: all 2s ease;
  background-image: url(/static/fan/arrow-in.png);
  background-size: 100% 100%;
}
</style>
<style scoped>
.arrow1 {
  position: relative;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
}

@keyframes myfirst1 {
  0% {
    left: -5%;
    top: 80%;
    -webkit-transform: rotate(180deg);
    opacity: 0;
  }
  3% {
    left: 0%;
    top: 80%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  71% {
    left: 75%;
    top: 80%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  72% {
    left: 76%;
    top: 78%;
    -webkit-transform: rotate(135deg);
    opacity: 1;
  }
  85% {
    left: 85%;
    top: 53%;
    -webkit-transform: rotate(135deg);
    opacity: 1;
  }
  86% {
    left: 86%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  99% {
    left: 99%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    left: 100%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirst1 /* Safari 和 Chrome */ {
  0% {
    left: -5%;
    top: 80%;
    -webkit-transform: rotate(180deg);
    opacity: 0;
  }
  3% {
    left: 0%;
    top: 80%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  71% {
    left: 75%;
    top: 80%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  72% {
    left: 76%;
    top: 78%;
    -webkit-transform: rotate(135deg);
    opacity: 1;
  }
  85% {
    left: 85%;
    top: 53%;
    -webkit-transform: rotate(135deg);
    opacity: 1;
  }
  86% {
    left: 86%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  99% {
    left: 99%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    left: 100%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 0;
  }
}

.arrow2 {
  position: relative;
  animation-delay: -18s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -18s;
}

.arrow3 {
  position: relative;
  animation-delay: -16s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -16s;
}

.arrow4 {
  position: relative;
  animation-delay: -14s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -14s;
}

.arrow5 {
  position: relative;
  animation-delay: -12s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -12s;
}

.arrow6 {
  position: relative;
  animation-delay: -10s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -10s;
}

.arrow7 {
  position: relative;
  animation-delay: -8s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -8s;
}

.arrow8 {
  position: relative;
  animation-delay: -6s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -6s;
}

.arrow9 {
  position: relative;
  animation-delay: -4s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -4s;
}

.arrow10 {
  position: relative;
  animation-delay: -2s;
  animation: myfirst1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1 20s infinite linear;
  -webkit-animation-delay: -2s;
}
</style>

<style scoped>
.arrow1-fan1 {
  position: relative;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
}

@keyframes myfirst1-fan1 {
  0% {
    left: -5%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 0;
  }
  3% {
    left: 0%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  71% {
    left: 75%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  72% {
    left: 76%;
    top: 22%;
    -webkit-transform: rotate(225deg);
    opacity: 1;
  }
  85% {
    left: 85%;
    top: 47%;
    -webkit-transform: rotate(225deg);
    opacity: 1;
  }
  86% {
    left: 86%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  99% {
    left: 99%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    left: 100%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 0;
  }
}

@-webkit-keyframes myfirst1-fan1 /* Safari 和 Chrome */ {
  0% {
    left: -5%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 0;
  }
  3% {
    left: 0%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  71% {
    left: 75%;
    top: 20%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  72% {
    left: 76%;
    top: 22%;
    -webkit-transform: rotate(225deg);
    opacity: 1;
  }
  85% {
    left: 85%;
    top: 47%;
    -webkit-transform: rotate(225deg);
    opacity: 1;
  }
  86% {
    left: 86%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  99% {
    left: 99%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    left: 100%;
    top: 50%;
    -webkit-transform: rotate(180deg);
    opacity: 0;
  }
}

.arrow2-fan1 {
  position: relative;
  animation-delay: -18s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -18s;
}

.arrow3-fan1 {
  position: relative;
  animation-delay: -16s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -16s;
}

.arrow4-fan1 {
  position: relative;
  animation-delay: -14s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -14s;
}

.arrow5-fan1 {
  position: relative;
  animation-delay: -12s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -12s;
}

.arrow6-fan1 {
  position: relative;
  animation-delay: -10s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -10s;
}

.arrow7-fan1 {
  position: relative;
  animation-delay: -8s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -8s;
}

.arrow8-fan1 {
  position: relative;
  animation-delay: -6s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -6s;
}

.arrow9-fan1 {
  position: relative;
  animation-delay: -4s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -4s;
}

.arrow10-fan1 {
  position: relative;
  animation-delay: -2s;
  animation: myfirst1-fan1 20s infinite linear;
  /* Safari 和 Chrome */
  -webkit-animation: myfirst1-fan1 20s infinite linear;
  -webkit-animation-delay: -2s;
}
</style>