DX-LargeScreen/src/components3/SpringFrame/index.vue

<template>
    <div class="Spring-frame">
        <transition name="fade">
            <videoPlay v-if="video" :resInfo="item" @close="itemClose"/>
        </transition>
        <transition name="fade">
            <xg v-if="xg" :resInfo="item" @close="itemClose"/>
        </transition>
        <transition name="fade">
            <hy v-if="hy" :resInfo="item" @close="itemClose"/>
        </transition>
        <transition name="fade">
            <dyj v-if="dyj" :resInfo="item" @close="itemClose"/>
        </transition>
        <transition name="fade">
            <canyin v-if="canyin" :resInfo="item" @close="itemClose"/>
        </transition>
        <transition name="fade">
            <gjxx v-if="gjxx" :resInfo="item" @close="itemClose"/>
        </transition>
        <transition name="fade">
            <rqgj v-if="rqgj" :resInfo="item" @close="itemClose"/>
        </transition>
        <transition name="fade">
            <xfgj v-if="xfgj" :resInfo="item" @close="itemClose"/>
        </transition>
   </div>
</template>
<script>
import videoPlay from "@/components2/SpringFrame/videoPlay";
import xg from "@/components2/SpringFrame/xg";
import hy from "@/components2/SpringFrame/hy";
import dyj from "@/components2/SpringFrame/dyj";
import canyin  from "@/components2/SpringFrame/canyin";
import gjxx  from "@/components2/SpringFrame/gjxx";
import rqgj  from "@/components2/SpringFrame/rqgj";
import xfgj  from "@/components2/SpringFrame/xfgj";
export default {
    name:"index",
    props:['resInfo'],
    components: {
        videoPlay,xg,hy,dyj,canyin,gjxx,rqgj,xfgj
    },
    data() {
        return {
            item:{},
            video:false,
            xg:false,
            hy:false,
            dyj:false,
            canyin:false,
            gjxx:undefined,
            rqgj:undefined,
            xfgj:undefined,
        }
    },
    watch: {
        resInfo(){
            this.getData()
        },
    },
    mounted(){
        this.getData()
    },
    methods: {
        getData(){
            if(this.resInfo.video){//视频
                this.video = true
                this.item = this.resInfo.video
            }
            if(this.resInfo.xg){//巡更
                this.xg = true
                this.item = this.resInfo.xg
            }
            if(this.resInfo.hy){//会议室
                this.hy = true
            }
            if(this.resInfo.dyj){//打印机
                this.dyj = true
            }
            if(this.resInfo.canyin){//餐饮
                this.canyin = true
                this.item = this.resInfo
            }
            if(this.resInfo.gjxx){//告警信息
                this.gjxx = true
                this.item = this.resInfo.gjxx
            }
            if(this.resInfo.rqgj){//入侵告警
                this.rqgj = true
                this.item = this.resInfo.rqgj
            }
            if(this.resInfo.xfgj){//消防告警
                this.xfgj = true
                this.item = this.resInfo.xfgj
            }
        },
        itemClose(){
            this.video = false
            this.xg = false
            this.hy = false
            this.dyj = false
            this.canyin = false
            this.gjxx = false
            this.rqgj = false
            this.xfgj = false
            this.item = {}
            this.$emit("close")
        },
  },
};
</script>

<style lang="scss">

.Spring-frame {
    position: absolute;
	width:50%;
	top:20%;
	left:25%;
	margin:0 auto;
    z-index: 1000;

}

</style>