Vent-App/pages/home/detail/fanmainAnimate/fanmainAnimate.vue

<template>
  <!-- 新的主通机动画 -->
  <view style="width: 100%; height: 100%">
    <div class="pageback">
      <!-- 动画展示 -->
      <div style="z-index: 33; height: 100%">
        <div class="ventilate" id="topPic">
          <!-- 进风箭头 -->
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic1-10'
                    : reverseVal + 'arrowpic1'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic1-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic1-11'
                    : reverseVal + 'arrowpic1-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic1-4'
                  : ''
                : '',
            ]"
            id="arrowpic1"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic2-10'
                    : reverseVal + 'arrowpic2'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic2-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic2-11'
                    : reverseVal + 'arrowpic2-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic2-4'
                  : ''
                : '',
            ]"
            id="arrowpic2"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic3-10'
                    : reverseVal + 'arrowpic3'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic3-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic3-11'
                    : reverseVal + 'arrowpic3-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic3-4'
                  : ''
                : '',
            ]"
            id="arrowpic3"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic4-10'
                    : reverseVal + 'arrowpic4'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic4-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic4-11'
                    : reverseVal + 'arrowpic4-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic4-4'
                  : ''
                : '',
            ]"
            id="arrowpic4"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic5-10'
                    : reverseVal + 'arrowpic5'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic5-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic5-11'
                    : reverseVal + 'arrowpic5-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic5-4'
                  : ''
                : '',
            ]"
            id="arrowpic5"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic6-10'
                    : reverseVal + 'arrowpic6'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic6-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic6-11'
                    : reverseVal + 'arrowpic6-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic6-4'
                  : ''
                : '',
            ]"
            id="arrowpic6"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic7-10'
                    : reverseVal + 'arrowpic7'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic7-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic7-11'
                    : reverseVal + 'arrowpic7-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic7-4'
                  : ''
                : '',
            ]"
            id="arrowpic7"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic8-10'
                    : reverseVal + 'arrowpic8'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic8-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic8-11'
                    : reverseVal + 'arrowpic8-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic8-4'
                  : ''
                : '',
            ]"
            id="arrowpic8"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic9-10'
                    : reverseVal + 'arrowpic9'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic9-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic9-11'
                    : reverseVal + 'arrowpic9-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic9-4'
                  : ''
                : '',
            ]"
            id="arrowpic9"
          ></div>
          <div
            :class="[
              nowfengji == '1'
                ? door1 == 1
                  ? topdoor1 == 1
                    ? reverseVal + 'arrowpic10-10'
                    : reverseVal + 'arrowpic10'
                  : topdoor1 == 1
                  ? reverseVal + 'arrowpic10-3'
                  : ''
                : nowfengji == '2'
                ? door2 == 1
                  ? topdoor2 == 1
                    ? reverseVal + 'arrowpic10-11'
                    : reverseVal + 'arrowpic10-2'
                  : topdoor2 == 1
                  ? reverseVal + 'arrowpic10-4'
                  : ''
                : '',
            ]"
            id="arrowpic10"
          ></div>

          <!-- 风扇动画展示 -->
          <!-- 巷道门阀 -->

          <div
            id="topdoor1"
            class="doordivb"
            style="width: 1%; height: 40%; top: 3%; left: 71%"
          >
            <div id="topdoor" :class="[door1 == 1 ? 'door1' : 'door2']"></div>
          </div>
          <div
            id="bottomdoor1"
            class="doordivb"
            style="width: 1%; height: 46%; top: 54.3%; left: 72%"
          >
            <div
              id="bottomdoor"
              :class="[door2 == 1 ? 'door1' : 'door2']"
            ></div>
          </div>

          <!-- 天窗 -->
          <div
            id="topwindow1"
            class="topwindow"
            style="width: 3%; height: 19%; top: 2%; left: 66.9%; z-index: 10"
          >
            <div
              id="topwindow"
              :class="[
                nowfengji == '1' && topdoor1 == 1 ? 'topwindow1' : 'topwindow2',
              ]"
            ></div>
          </div>
          <div
            id="topwindow2"
            class="topwindow"
            style="width: 3%; height: 19%; top: 53%; left: 67%; z-index: 10"
          >
            <div
              id="topwindow"
              :class="[
                nowfengji == '2' && topdoor2 ? 'topwindow1' : 'topwindow2',
              ]"
            ></div>
          </div>
          <!-- <div class="box-left" style="width:5.5%;height:14%;top: 15%;left: 20%;"></div> -->
          <div
            class="box"
            style="top: 12.2%; left: 30.4%"
            v-if="groupType != 'lh' && groupType !== 'wlyk'"
          >
            <div id="box2" :class="reverseVal ? 'fz' : 'zz'">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <!-- <div class="box-right" style="width:6%;height:14%;top: 15%;left:32%;"> -->
            <!-- 风机旁边阀门 -->
          </div>
          <div
            class="box-s"
            style="top: 12.2%; left: 34.5%"
            :style="
              groupType != 'lh' && groupType !== 'wlyk'
                ? 'top: 12.2%;left: 34.5%;'
                : 'top: 12.2%;left: 32.5%;'
            "
          >
            <div id="box2-s" :class="reverseVal ? 'fz1' : 'zz1'">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
          <!-- <div class="box-left" style="width:5.5%;height:14%;top: 80%;left: 20%;"></div> -->
          <div
            class="box"
            style="bottom: 11.7%; left: 27.8%"
            v-if="groupType != 'lh' && groupType !== 'wlyk'"
          >
            <div id="box1" :class="reverseVal ? 'fz' : 'zz'">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
          <!-- 蝶阀 -->
          <div
            id="topfundoor1"
            class="fundoor"
            style="width: 3%; height: 36%; left: 45.9%; z-index: 10; top: 6.6%"
          >
            <div
              id="topfundoor"
              :class="[
                nowfengji == '1' && fundoor1 == 1 ? 'fundoor1' : 'fundoor2',
              ]"
            ></div>
          </div>
          <div
            id="bottomfundoor1"
            class="fundoor"
            style="width: 3%; height: 36%; left: 44%; z-index: 10; top: 57%"
          >
            <div
              id="bottomfundoor"
              :class="[
                nowfengji == '2' && fundoor2 == 1 ? 'fundoor1' : 'fundoor2',
              ]"
            ></div>
          </div>
          <!-- 风机 -->
          <!-- <div class="box-right" style="width:6%;height:14%;top: 80%;left:32.5%;"> -->
          <div
            class="box-s"
            style="bottom: 11.7%; left: 32.4%"
            :style="
              groupType != 'lh' && groupType !== 'wlyk'
                ? 'bottom: 11.7%;left:32.4%;'
                : 'bottom: 11.7%;left:30.4%;'
            "
          >
            <div id="box1-s" :class="reverseVal ? 'fz1' : 'zz1'">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </div>
      <!-- 文字标识 -->
      <div
        style="
          position: absolute;
          color: #fff;
          top: 20%;
          left: 10%;
          color: #ff0;
        "
      >
        <span>1号电机</span>
      </div>
      <div
        style="
          position: absolute;
          color: #fff;
          top: 20%;
          left: 39%;
          color: #ff0;
        "
      >
        <span>2号电机</span>
      </div>
      <div
        style="
          position: absolute;
          color: #fff;
          color: #ff0;
          bottom: 57%;
          left: 10%;
        "
      >
        <span>1号电机</span>
      </div>
      <div
        style="
          position: absolute;
          color: #fff;
          bottom: 57%;
          left: 38%;
          color: #ff0;
        "
      >
        <span>2号电机</span>
      </div>
      <div style="position: absolute; color: #fff; bottom: -3.7%; left: 28.4%">
        <span v-if="topindex == 2">1#风机</span>
        <span v-if="topindex == 1">2#风机</span>
      </div>
      <div style="position: absolute; color: #fff; bottom: 45.7%; left: 31.4%">
        <span v-if="topindex == 2">2#风机</span>
        <span v-if="topindex == 1">1#风机</span>
      </div>
      <!-- 风筒风速传感器 -->
      <div class="imgF1"></div>
      <div class="imgF2"></div>
    </div>
  </view>
</template>
<script>
export default {
  components: {},
  data: function () {
    return {
      fengliangUp: "", // 风量上限
      fengliangDown: "", // 风量下限
      controTypeName: "变频器频率",
      // 界面风机动画

      // 控制类型 1 变频器频率 2 需风量
      controlType: "1",
      loading: "", // 数据加载
      yMax1: 100,
      yMax2: 10,
      yMax3: 1000,
      topindex: 1,
      textColor: "#000",
      option1: {},
      nowfengji: "",
      reverseVal: "",
    };
  },
  props: [
    "door1",
    "topdoor1",
    "fundoor1",
    "door2",
    "topdoor2",
    "fundoor2",
    "groupType",
    "fanMsStatus",
  ],
  created() {
    // this.myInterval()
  },
  watch: {
    fanMsStatus(val) {
      if (val == false) {
        this.reverseVal = "reverse-";
      } else {
        this.reverseVal = "";
      }
    },
  },
  // 获取第一页实时数据
  beforeMount: function (e) {
    var than = this;
  },
  methods: {
    // 顶部风机序号值
    setTopIndex(val) {
      this.topindex = val;
    },
    // 根据当前运行分机，设置动画
    setQidongfengji(val) {
      if (this.nowfengji != val) {
        this.nowfengji = val;
        this.setFengjiDonghua();
      }
    },
    // 风机动画
    setFengjiDonghua() {
      if (this.nowfengji == "2") {
        if (configUrl.group != "lh") {
          document.getElementById("box1").style.animationPlayState = "running";
          document.getElementById("box1").style.WebkitAnimationPlayState =
            "running";
          document.getElementById("box2").style.animationPlayState = "paused";
          document.getElementById("box2").style.WebkitAnimationPlayState =
            "paused";
        }
        document.getElementById("box1-s").style.animationPlayState = "running";
        document.getElementById("box1-s").style.WebkitAnimationPlayState =
          "running";

        document.getElementById("box2-s").style.animationPlayState = "paused";
        document.getElementById("box2-s").style.WebkitAnimationPlayState =
          "paused";
      } else if (this.nowfengji == "1") {
        if (configUrl.group != "lh") {
          document.getElementById("box2").style.animationPlayState = "running";
          document.getElementById("box2").style.WebkitAnimationPlayState =
            "running";
          document.getElementById("box1").style.animationPlayState = "paused";
          document.getElementById("box1").style.WebkitAnimationPlayState =
            "paused";
        }
        document.getElementById("box2-s").style.animationPlayState = "running";
        document.getElementById("box2-s").style.WebkitAnimationPlayState =
          "running";
        document.getElementById("box1-s").style.animationPlayState = "paused";
        document.getElementById("box1-s").style.WebkitAnimationPlayState =
          "paused";
      } else {
        document.getElementById("box2").style.animationPlayState = "paused";
        document.getElementById("box2").style.WebkitAnimationPlayState =
          "paused";
        document.getElementById("box2-s").style.animationPlayState = "paused";
        document.getElementById("box2-s").style.WebkitAnimationPlayState =
          "paused";
        document.getElementById("box1").style.animationPlayState = "paused";
        document.getElementById("box1").style.WebkitAnimationPlayState =
          "paused";
        document.getElementById("box1-s").style.animationPlayState = "paused";
        document.getElementById("box1-s").style.WebkitAnimationPlayState =
          "paused";
      }
    },
  },
  computed: {},
  mounted() {},
  destroyed() {},
};
</script>

<style scoped>
div.pageback {
  padding-top: 10px;
  margin-top: 12px;
  width: 100vw;
  height: calc(60% - 50px);
  min-height: 350px;
  background-image: url(/static/mainfan/page-back.png);
  background-size: 100% 100%;
}
div.ventilate {
  margin-top: 12px;
  width: calc(100vw - 20px);
  height: calc(60% - 50px);
  min-height: 330px;
  background-image: url(/static/mainfan/main_ventilate_new.png);
  background-size: 100% 100%;
  perspective: 800px;
}
</style>
<style scoped>
@media screen and (max-width: 4096px) {
  .box {
    position: absolute;
    transform: perspective(1000px) rotateY(-23deg);
    width: 1%;
    height: 20%;
    transform-style: preserve-3d;
  }
  .box-s {
    position: absolute;
    transform: perspective(1000px) rotateY(-23deg);
    width: 1%;
    height: 20%;
    transform-style: preserve-3d;
  }
}
@media screen and (min-width: 4096px) {
  .box {
    position: absolute;
    transform: perspective(1000px) rotateY(21deg);
    width: 1%;
    height: 20%;
    transform-style: preserve-3d;
  }
  .box-s {
    position: absolute;
    transform: perspective(1000px) rotateY(21deg);
    width: 1%;
    height: 20%;
    transform-style: preserve-3d;
  }
}
.doordivb {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-image: url(/static/aminfandoor-new-1.png); */
  background-size: 100% 100%;
}
.door1 {
  position: absolute;
  transform: scaleX(0.1) scaleY(0.5);
  width: 100%;
  height: 100%;
  top: -2px;
  left: 0px;
  transition: all 2s ease;
  transform-origin: 100% 100%;
  background-image: url(/static/mainfan/fun-door-new-1.png);
  background-size: 100% 100%;
}
.door2 {
  position: absolute;
  transform: scaleX(1) scaleY(1);
  width: 100%;
  height: 100%;
  top: -2px;
  left: 0px;
  transition: all 2s ease;
  transform-origin: 100% 100%;
  background-image: url(/static/mainfan/fun-door-new-1.png);
  background-size: 100% 100%;
}
.fundoor {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(/static/mainfan/fun-door-new-1.png);
  background-size: 100% 100%;
}
.fundoor1 {
  position: absolute;
  transform: scaleX(0);
  width: 100%;
  height: 100%;
  top: 1px;
  left: 1px;
  transition: all 2s ease;
  background-image: url(/static/mainfan/fun-door-new-2.png);
  background-size: 100% 100%;
}
.fundoor2 {
  position: absolute;
  transform: scaleX(1);
  width: 100%;
  height: 100%;
  top: 1px;
  left: 1px;
  transition: all 2s ease;
  background-image: url(/static/mainfan/fun-door-new-2.png);
  background-size: 100% 100%;
}
.topwindow {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-image: url(../././assets/img/topwindow-1.png); */
  background-size: 100% 100%;
}
.topwindow1 {
  position: absolute;
  transform: scaleY(0.05);
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  transition: all 2s ease;
  transform-origin: 100% 0%;
  background-image: url(/static/mainfan/topwindow-new-2.png);
  background-size: 100% 100%;
}
.topwindow2 {
  position: absolute;
  transform: scaleY(1);
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  transition: all 2s ease;
  transform-origin: 100% 0%;
  background-image: url(/static/mainfan/topwindow-new-2.png);
  background-size: 100% 100%;
}
.box::before,
.box-s::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 50%;
  height: 10px;
  background: #000;
  filter: blur(10px);
  opacity: 0.6;
  transform: rotateX(90deg);
}
.box .zz {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: animate 5s linear infinite;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.box .fz {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: animateFz 5s linear infinite;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.box-s .zz1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: animate2 5s linear infinite;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.box-s .fz1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: animateFz1 5s linear infinite;
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.box div span,
.box-s div span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #f1f1f1, #999, #f1f1f1);
  border-radius: 15px;
}

.box div span:nth-child(1),
.box-s div span:nth-child(1) {
  transform: rotateX(0deg);
}
.box div span:nth-child(2),
.box-s div span:nth-child(2) {
  transform: rotateX(45deg);
}
.box div span:nth-child(3),
.box-s div span:nth-child(3) {
  transform: rotateX(-45deg);
}
.box div span:nth-child(4),
.box-s div span:nth-child(4) {
  transform: rotateX(90deg);
}
div.box-right {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(/static/mainfan/fengji-right2.png);
  background-size: 100% 100%;
}
div.box-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/static/mainfan/fengji-left.png);
  background-size: 100% 100%;
}
@keyframes animate {
  0% {
    transform: perspective(1000px) rotateX(0deg);
  }
  100% {
    transform: perspective(1000px) rotateX(360deg);
  }
}
@keyframes animateFz {
  0% {
    transform: perspective(1000px) rotateX(360deg);
  }
  100% {
    transform: perspective(1000px) rotateX(0deg);
  }
}
@keyframes animate2 {
  0% {
    transform: perspective(1000px) rotateX(360deg);
  }
  100% {
    transform: perspective(1000px) rotateX(0deg);
  }
}

@keyframes animateFz1 {
  0% {
    transform: perspective(1000px) rotateX(0deg);
  }
  100% {
    transform: perspective(1000px) rotateX(360deg);
  }
}
</style>