videoApp/src/renderer/components/BigShow.vue

<!--大屏显示组件-->
<template>
    <div>
        <draggable
                v-for="item in currentBigshow"
                element="div"
                v-model="signalPreList"
                :options="dragOptions2"
                :class="['split_screen',
                bigScreenObj[item.ID].splitStatus === 0 ? 'split_screen_one' :
                bigScreenObj[item.ID].splitStatus === 1 ? 'split_screen_four' :
                bigScreenObj[item.ID].splitStatus === 2 ? 'split_screen_nine' :
                bigScreenObj[item.ID].splitStatus === 3 ? 'split_screen_sixteen' : '']"
                :style="{
                    float:'left',
                    width:item.Width*bigScale + 'px',
                    height:item.Height*bigScale + 'px',
                    left:(item.Left-window.Left)*bigScale+'px',
                    top:(item.Top-window.Top)*bigScale+'px',
                    zIndex:item.ZIndex,
                }"
                :id="item.ID"
        >
            <VueDragResize
                    v-for="itemV in bigScreenObj[item.ID] ? bigScreenObj[item.ID].signalArr : []" :key="itemV.Id" class="sitem"
                    :w="itemV.width" :h="itemV.height" :parentLimitation="false"
                    :x="itemV.left" :y="itemV.top"
                    @dragstop="(position) => dragStop(position,itemV,bigScreenObj,curOpeBigscreenId)"
                    @resizestop="(size) => resizeSignal(size,itemV,bigScreenObj,curOpeBigscreenId)"
            >
                <div ref="signal" :id="itemV.ID" style="width:100%;height:100%;overflow: hidden">
                    <VideoPlayer
                        ref="videoPlayer"
                        :options="videoPlayObj[itemV.sourceId]"
                        :playsinline="true"
                        :style="scaleFun(itemV)"
                    />
                    <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
                </div>
            </VueDragResize>

            <div v-for="itemD in bigScreenObj[item.ID] ? bigScreenObj[item.ID].bindList : []" class="sitem2">
                {{itemD}}
            </div>
        </draggable>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import draggable from 'vuedraggable'
    import VueDragResize from 'vue-drag-resize'
    import PubSub from 'pubsub-js'

    import '../assets/less/splitscreen.less'
    import {elePosition, getElementLeft, getElementTop, getStaticFile, guId} from "../../utils/tools"
    import {reqPreviewSourceList, reqRefreshView} from "../api"
    import VideoPlayer from "./player.vue"

    export default {
        data() {
            return {
                streamWindows:[], // 传递出去的信号源位置信息
                currentBigshow:[], // 当前显示的大屏
                playerOptions: { // rtmp视频流配置
                    sources: [
                        {
                            "src": "rtmp://58.200.131.2:1935/livetv/hunantv",
                            "type": "rtmp/flv"
                        },/*{
                            "src": "rtmp://58.200.131.2:1935/livetv/cctv1",
                            "type": "rtmp/flv"
                        }*/,
                    ],
                    aspectRatio: '482:224',
                    techOrder: ['flash'],
                    autoplay: true,
                    controls: false,
                    fluid:true,
                    preload: 'auto',
                    notSupportedMessage: '此视频暂无法播放，请稍后再试',
                },
                screenPosition:{}, // 大屏在视口中的位置
                videoPlayObj:{}, // 视频播放配置对象
                savePreWh:{}, // 保存旧的开窗宽高
                window:this.$attrs.window
            }
        },

        components: {
            draggable,
            VueDragResize,
            VideoPlayer
        },

        created() {
            this.initBigScreen()
        },

        updated() {
            // 获取大屏在视口中的位置
            this.currentBigshow.forEach(item => {
                const screenDiv = document.getElementById(item.ID)
                this.screenPosition[item.ID] = {
                    top:getElementTop(screenDiv),
                    left:getElementLeft(screenDiv)
                }
            })
        },
        
        beforeDestroy() {
          PubSub.unsubscribe(this.update_screenobj)  
        },

        methods: {
            // 大屏开窗接口提交
            async refreshBigScreen(obj,Id) {
                if(Id){
                    const signals = obj[Id].signalArr
                    const streamWindows = signals.map((item,index) => ({
                        left:item.left,
                        top:item.top,
                        width:item.width,
                        height:item.height,
                        id:index,
                        sourceId:item.sourceId,
                        widthScale:item.widthScale,
                        heightScale:item.heightScale,
                        orginRect:{}
                    }))
                    await reqRefreshView({
                        bigScreenId:Id,
                        streamWindows
                    })
                }
            },

            // 拖动结束
            dragStop(positon,item,obj,Id) {
                // 深度克隆对象
                const newObj = JSON.parse(JSON.stringify(obj))
                item.left = positon.left
                item.top = positon.top
                const arr = newObj[Id].signalArr.filter(s => s.Id !== item.Id)
                newObj[Id].signalArr = [...arr,item]
                this.refreshBigScreen(newObj,Id)
            },

            // 缩放结束
            resizeSignal(size,item,obj,Id) {
                const bigScale = this.$store.state.bigScale
                // 深度克隆对象
                const newObj = JSON.parse(JSON.stringify(obj))
                item.width = size.width
                item.height = size.height
                item.left = size.left
                item.top = size.top
                item.widthScale = item.width/(newObj[Id].width*bigScale)
                item.heightScale = item.height/(newObj[Id].height*bigScale)
                const arr = newObj[Id].signalArr.filter(s => s.Id !== item.Id)
                newObj[Id].signalArr = [...arr,item]
                this.refreshBigScreen(newObj,Id)
            },

            // 关闭信号源
            closeSignal(signal) {
                const bigscreenId = signal.bigscreenId
                const bigScreenObj = this.$store.state.bigScreenObj
                // 1.找出是哪个大屏下的信号源发生了改变,过滤掉删除的那个
                const newSignalPreList = this.bigScreenObj[bigscreenId].signalArr.filter(item => item.Id !== signal.Id)
                // 2.重新赋值
                bigScreenObj[bigscreenId].signalArr = newSignalPreList
                this.refreshBigScreen(bigScreenObj,bigscreenId)
            },

            // 设置视频变形
            scaleFun:function (itemV) {
                // 1.算出当前视频的高度
                let videoHeight = itemV.width*9/16

                // 2.如果盒子的高度大于视频的高度，则视频的高度需要拉伸
                if(itemV.height>videoHeight){
                    return `transform-origin: 0px 0px;transform:scaleY(${(itemV.height-videoHeight)/videoHeight+1})`
                }
            },

            // 大屏初始化
            async initBigScreen() {
                // 加载大屏json文件
                const bigScreenJson = await getStaticFile('EnityBigScreen.Data')
                // 过滤出显示的大屏
                this.currentBigshow = bigScreenJson.filter(item => item.WindowID === this.window.ID)
                if(this.currentBigshow.length){
                    // 给大屏对象进行初始化显示
                    const obj = {}
                    bigScreenJson.forEach(item => {
                        obj[item.ID] = {
                            bindList:[],
                            splitStatus:0,
                            signalArr:[],
                            width:item.Width,
                            height:item.Height
                        }
                        const num = item.BindList.filter(item => item.DeviceID).length
                        // 拼接屏数量
                        for(let i=0;i<num;i++){
                            obj[item.ID].bindList.push(i+1)
                        }
                        // 根据拼接屏数量得到分屏状态
                        obj[item.ID].splitStatus = Math.floor(Math.sqrt(num)-1)
                    })
                    this.$store.dispatch('updateBigscreenObj',obj)

                    // 获取视频播放的配置对象
                    const preSingleList = await reqPreviewSourceList()
                    const videoPlayObj = {}
                    for(const item of preSingleList){
                        videoPlayObj[item.sourceId] = {
                            sources: [
                                {
                                    "src": item.previewUrl,
                                    "type": "rtmp/flv"
                                }
                            ],
                            techOrder: ['flash'],
                            autoplay: true,
                            controls: false,
                            fluid:true,
                            preload: 'auto',
                            notSupportedMessage: '此视频暂无法播放，请稍后再试',
                        }
                    }
                    this.videoPlayObj = videoPlayObj
                }
            }
        },

        computed: {
            ...mapState(['splitScreenStatus', 'bigScale','positionNum','curOpeBigscreenId','bigScreenObj','signalListJson','bigshowJson']),
            
            // 当前变动的信号源数组监控
            signalPreList: {
                get() {
                    return this.$store.getters.currentSignalArr
                },

                set(arr) {
                    setTimeout(() => {
                        const bigscreenId = this.$store.state.curOpeBigscreenId
                        const bigScreenObj = this.$store.state.bigScreenObj
                        const bigScale = this.$store.state.bigScale
                        const positionNum = this.$store.state.positionNum
                        
                        const arr2 = []
                        arr.forEach(item => {
                            arr2.push(JSON.parse(JSON.stringify(item)))
                        })

                        const newObj = arr2.filter(item => !item.Id)
                        const otherSignals = arr2.filter(item => item.Id)
                        newObj[0].Id = guId()
                        newObj[0].bigscreenId = bigscreenId
                        if(bigScreenObj[bigscreenId]){
                            newObj[0].splitScreenStatus = bigScreenObj[bigscreenId].splitStatus + 1
                            newObj[0].width = bigScreenObj[bigscreenId].width * bigScale / newObj[0].splitScreenStatus
                            newObj[0].height = bigScreenObj[bigscreenId].height * bigScale / newObj[0].splitScreenStatus
                            newObj[0].widthScale = newObj[0].width / (bigScreenObj[bigscreenId].width * bigScale)
                            newObj[0].heightScale = newObj[0].height / (bigScreenObj[bigscreenId].height * bigScale)
                            const positionInfo = elePosition(newObj[0].width,newObj[0].height,positionNum,this.screenPosition[bigscreenId].top,this.screenPosition[bigscreenId].left,bigScreenObj[bigscreenId].splitStatus+1)
                            newObj[0].top = positionInfo.top - this.screenPosition[bigscreenId].top
                            newObj[0].left = positionInfo.left - this.screenPosition[bigscreenId].left
                            bigScreenObj[bigscreenId].signalArr = [...otherSignals,...newObj]
                            this.refreshBigScreen(bigScreenObj,bigscreenId)
                        }
                    })
                }
            },
            
            // 拖拽选项配置
            dragOptions1() {
                return {
                    animation: 0,
                    group: {
                        name: "description",
                        pull: 'clone',
                        put: false
                    },
                    ghostClass: "ghost",
                }
            },
            dragOptions2() {
                return {
                    animation: 0,
                    group: "description",
                    disabled:false,
                    sort:false,
                }
            },

            player() {
                return this.$refs.videoPlayer.player
            },
        },

        watch: {
            window: {
                handler (newV, oldV) {
                    if(newV.ID !== oldV){
                        // 更新大屏对象
                        this.initBigScreen()
                    }
                },
                deep:true
            }
        }
    }
</script>