videoApp/src/renderer/components/Window.vue

<!--除主页意外的其他窗口-->
<template>
    <div>
        <div v-for="item in windows"
             :style="{
                position: 'absolute',
                left:item ? item.Left*bigScale+'px' : '',
                top:item ? item.Top*bigScale+'px' : '',
                width:item ? item.Width*bigScale + 'px' : '',
                height:item ? item.Height*bigScale + 'px' : '',
                zIndex:item ? item.ZIndex : '',
                display:item ? (item.IsVisibility ? 'block' : 'none') : '',
                backgroundRepeat:'no-repeat',
                backgroundSize:'100% 100%',
             }"
             :ref="item.ID"
        >
            <Button :window="item"/>
            <Label :window="item"/>
            <Img :window="item"/>
            <BigShow :window="item"/>
        </div>
    </div>
</template>

<script>
    import {mapState} from "vuex"
    import {getNeedMoutedEleArr, getStaticFile} from "../../utils/tools"
    import PubSub from 'pubsub-js'

    import Button from "./Button"
    import Label from './Label'
    import Img from './Image'
    import BigShow from './BigShow'
    import {OPEN_WINDOWS} from "../../utils/constant"

    export default {
        components: {
            Button,
            Label,
            Img,
            BigShow
        },

        data() {
            return {
                windows:[],
                eleObj:{},
                staticUrl:this.$store.state.staticUrl, // 静态资源路径
            }
        },

        async beforeCreate() {
            const eleObj = {}
            this.windows = await getStaticFile('EnityWindow.Data')
            for(const item of this.windows){
                eleObj[item.ID] = await getNeedMoutedEleArr(item.ID)
            }
            this.eleObj = eleObj
        },

        mounted() {
            this.open_windows = PubSub.subscribe(OPEN_WINDOWS,(msg,data) => {
                // 需要显示的window
                let showWindows = []
                for(const item of this.windows){
                    data.forEach(item2 => {
                        if(item.ID === item2){
                            item.IsVisibility = true
                            showWindows.push(item)
                        }
                    })
                }
                // 需要隐藏的window
                for(const item of this.windows){
                    showWindows.forEach(item2 => {
                        if(item2.GroupNumber === item.GroupNumber && item2.ID !== item.ID){
                            item.IsVisibility = false
                        }
                    })
                }
            })
        },

        updated() {
            // 设置背景图片
            const keyArr = Object.keys(this.$refs)
            keyArr.forEach(item => {
                if(this.eleObj[item]){
                    const arr = this.eleObj[item].filter(item => item.BackIcon)
                    for(const a of arr){
                        this.$refs[a.ID] ? this.$refs[a.ID][0].style.backgroundImage = a.BackIcon ? 'url('+`${this.staticUrl}/Data/${a.BackIcon}`+')' : null : ''
                    }
                }
            })
        },

        beforeDestroy() {
          PubSub.unsubscribe(this.open_windows)
        },

        computed: {
            ...mapState(['bigScale'])
        }
    }
</script>