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

<template>
  <view style="width: 100%; height: 100%">
    <div class="door-container">
      <div style="display: flex" v-show="doorcount == 1">
        <div class="door1" v-show="doorcount == 1" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor1"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor1"
          ></div>
        </div>
        <div>
          <video
            v-if="item.type == 'flv'"
            :id="'cameraElement' + item.id"
            muted
            autoplay
            controls
            width="100%"
            height="100%"
            style="width: 100%"
          ></video>
        </div>
      </div>
      <div style="" v-show="doorcount == 2">
        <div class="door2" v-show="doorcount == 2" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor2"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor2"
          ></div>
        </div>
        <div class="door2" v-show="doorcount == 2" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor3"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor3"
          ></div>
        </div>
        <div>
          <video
            v-if="item.type == 'flv'"
            :id="'cameraElement' + item.id"
            muted
            autoplay
            controls
            width="100%"
            height="100%"
            style="width: 100%"
          ></video>
        </div>
      </div>
      <div style="" v-show="doorcount == 3">
        <div class="door3" v-show="doorcount == 3" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor4"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor4"
          ></div>
        </div>
        <div class="door3" v-show="doorcount == 3" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor5"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor5"
          ></div>
        </div>
        <div class="door3" v-show="doorcount == 3" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate3 == '1' ||
              gatestate3 == '开启' ||
              gatestate3 == '打开' ||
              gatestate3 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor6"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate3 == '1' ||
              gatestate3 == '开启' ||
              gatestate3 == '打开' ||
              gatestate3 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor6"
          ></div>
        </div>
        <div>
          <video
            v-if="item.type == 'flv'"
            :id="'cameraElement' + item.id"
            muted
            autoplay
            controls
            width="100%"
            height="100%"
            style="width: 100%"
          ></video>
        </div>
      </div>
      <div style="" v-show="doorcount == 4">
        <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor7"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate1 == '1' ||
              gatestate1 == '开启' ||
              gatestate1 == '打开' ||
              gatestate1 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor7"
          ></div>
        </div>
        <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor8"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate2 == '1' ||
              gatestate2 == '开启' ||
              gatestate2 == '打开' ||
              gatestate2 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor8"
          ></div>
        </div>
        <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate3 == '1' ||
              gatestate3 == '开启' ||
              gatestate3 == '打开' ||
              gatestate3 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor9"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate3 == '1' ||
              gatestate3 == '开启' ||
              gatestate3 == '打开' ||
              gatestate3 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor9"
          ></div>
        </div>
        <div class="door4" v-show="doorcount == 4" :style="{ height: height }">
          <div
            class="left_door"
            v-bind:class="
              gatestate4 == '1' ||
              gatestate4 == '开启' ||
              gatestate4 == '打开' ||
              gatestate4 == 'true'
                ? 'open_left'
                : 'close_left'
            "
            id="leftdoor10"
          ></div>
          <div
            class="right_door"
            v-bind:class="
              gatestate4 == '1' ||
              gatestate4 == '开启' ||
              gatestate4 == '打开' ||
              gatestate4 == 'true'
                ? 'open_right'
                : 'close_right'
            "
            id="rightdoor10"
          ></div>
        </div>
        <div>
          <video
            v-if="item.type == 'flv'"
            :id="'cameraElement' + item.id"
            muted
            autoplay
            controls
            width="100%"
            height="100%"
            style="width: 100%"
          ></video>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
import flvjs from "flv.js";
export default {
  data() {
    return {
      height: "200px",
      flvPlayer: [], // flv 播放地址
    };
  },
  props: [
    "gatestate1",
    "gatestate2",
    "gatestate3",
    "gatestate4",
    "doorcount",
    "cameralist",
  ],
  methods: {
    initData() {
      if (this.cameralist.devicekind == "flv") {
        // 根据id设置每个播放摄像头的地址
        this.setVideoUrl(this.cameralist.addr, this.cameralist.deviceid);
      }
    },
    setVideoUrl(url, id) {
      if (flvjs.isSupported()) {
        this.flvPlayer = [];
        var videoElement = document.getElementById("cameraElement" + id);
        // 控件设置地址信息
        var vdo = flvjs.createPlayer({
          type: "flv",
          url: url,
        });
        // 控件绑定
        vdo.attachMediaElement(videoElement);
        vdo.load();
        // 播放
        vdo.play();
        this.flvPlayer.push(vdo);
      }
    },
  },
  watch: {
    doorcount(val) {
      if (val == 1) {
        this.height = "180px";
      }
      if (val == 2) {
        this.height = "180px";
      }
      if (val == 3) {
        this.height = "110px";
      }
      if (val == 4) {
        this.height = "180px";
      }
    },
    cameralist(val) {
      this.initData();
    },
  },
  onUnload() {
    this.flvPlayer.forEach((element) => {
      element.pause();
      element.unload();
      element.detachMediaElement();
      element.destroy();
      element = null;
    });
  },
};
</script>

<style scoped>
/*门里面*/
div.door1 {
  width: 50%;
  float: left;
  margin-left: 20%;
  background-image: url(/static/door.png);
  background-size: 100% 100%;
  perspective: 800px;
}
div.door2 {
  width: 50%;
  float: left;
  background-image: url(/static/door.png);
  background-size: 100% 100%;
  perspective: 800px;
}
div.door3 {
  width: 33.3%;
  float: left;
  background-image: url(/static/door.png);
  background-size: 100% 100%;
  perspective: 400px;
}
div.door4 {
  width: 50%;
  float: left;
  background-image: url(/static/door.png);
  background-size: 100% 100%;
  perspective: 800px;
}
/*左门/右门*/

div.left_door {
  top: 12%;
  left: 10%;
  width: 40.5%;
  height: 78%;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  position: absolute;
  transition: all 2s ease;
  background-image: url(/static/left.png);
  background-size: 100% 100%;
}
div.right_door {
  top: 12%;
  right: 10%;
  width: 40.2%;
  height: 78%;
  box-sizing: border-box;
  float: left;
  z-index: 1;
  position: absolute;
  transition: all 2s ease;
  background-image: url(/static/left.png);
  background-size: 100% 100%;
}
div.left_door {
  transform-origin: left center;
  border-right: 1px solid rgb(8, 8, 8);
}
div.right_door {
  transform-origin: right center;
  border-left: 1px solid rgb(8, 8, 8);
}
.open_left {
  transform: rotateY(100deg);
}
.open_right {
  transform: rotateY(-100deg);
}
.close_left {
  transform: rotateY(0);
}
.close_right {
  transform: rotateY(0deg);
}
/*使用css变形功能

    div.door:hover div.left_door{
        transform:rotateY(100deg);
    }

    div.door:hover div.right_door{
        transform:rotateY(-100deg);
    }*/
</style>