videoApp/src/renderer/components/BigShow.vue

<!--大屏显示组件-->

<template>
    <div>
        <draggable
                v-for="item in bigScreenJson"
                element="div"
                :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
                v-model="signalPreList"
                :options="dragOptions2"
                :move="onMove"
                @start="isDragging=true"
                @end="isDragging=false"
                ref="bigscreen"
                :style="{
                    width:item.Width*Scale + 'px',
                    height:item.Height*Scale + 'px',
                    left:item.Left*Scale+'px',
                    top:item.Top*Scale+'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'black' : 'none',
                }"
        >
            <VueDragResize
                    v-for="itemV in signalPreList" :key="itemV.deviceID" class="sitem"
                    :w="item.Width*Scale/(splitScreenStatus+1)" :h="item.Height*Scale/(splitScreenStatus+1)"
                    :parentLimitation="false"
                    @dragstop="dragStop"
                    @resizestop="(obj) => reSizeSignal(obj,itemV)"
            >
                <div ref="signal">
                    <video-player
                            :options="playerOptions"
                    >

                    </video-player>
                </div>
            </VueDragResize>

            <div v-for="(itemD,index) in divArr" :key="index" class="sitem2">
                {{itemD}}
            </div>

        </draggable>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import draggable from 'vuedraggable'
    import VueDragResize from 'vue-drag-resize'
    import 'video.js/dist/video-js.css'
    import { videoPlayer } from 'vue-video-player'

    import '../assets/less/splitscreen.less'
    import {getElementLeft, getElementTop} from "../../utils/tools"
    import {reqRefreshView} from "../api"

    export default {
        data() {
            return {
                isDragging: false, // 是否可拖动标志
                divArr:[],// 默认大屏中盒子的数组
                streamWindows:[], // 传递出去的信号源位置信息
                playerOptions: { // 视频播放配置
                    muted: false,
                    fluid:true,
                    language: 'zh-CN',
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    aspectRatio: '16:9',
                    notSupportedMessage: '此视频暂无法播放，请稍后再试',
                    sources: [
                        {
                            src: 'http://img-ys011.didistatic.com/static/didiglobal/do1_pcUZZjSG7vFlMbdr8fA6',
                            type: 'video/mp4'
                        },
                        /*{
                            src:'rtmp://172.17.20.104:1935/flvplayback/mp4:C201711040/C201711040_15133319919941212.mp4',
                            type:'rtmp/mp4'
                        }*/
                    ],
                    controlBar: {
                        timeDivider: false,
                        durationDisplay: false,
                        remainingTimeDisplay: false,
                        fullscreenToggle: false // 全屏按钮
                    }
                }
            }
        },

        components: {
            draggable,
            VueDragResize,
            videoPlayer,
        },

        mounted() {

        },

        beforeDestroy() {

        },

        methods: {
            // 移动信号源
            onMove({relatedContext, draggedContext}) {
                const relatedElement = relatedContext.element
                const draggedElement = draggedContext.element
                return (
                    (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
                )
            },

            // 大屏开窗
            reqRefreshBigScreen(arr) {
                const Scale = this.$store.state.Scale
                const streamWindows = []
                setTimeout(async () => {
                    const elementArr = this.$refs.signal
                    if(elementArr){
                        elementArr.forEach((item,index) => {
                            // 获取元素绝对位置的横坐标和纵坐标
                            const left = getElementLeft(item)
                            const top = getElementTop(item)
                            streamWindows.push({
                                left,
                                top,
                                width:this.bigScreenJson[0].Width*Scale/(this.splitScreenStatus+1),
                                height:this.bigScreenJson[0].Height*Scale/(this.splitScreenStatus+1),
                                id:0,
                                sourceId:arr[index].sourceId,
                                widthScale:1/(this.splitScreenStatus+1),
                                heightScale:1/(this.splitScreenStatus+1),
                                orginRect:{}
                            })
                        })
                        const data = {
                            bigScreenId:this.bigScreenJson[0].ID,
                            streamWindows
                        }
                        this.streamWindows = streamWindows
                        console.log(data)
                        // 调用大屏开窗接口
                        await reqRefreshView(data)
                    }
                })
            },

            // 拖动结束
            dragStop(obj) {
                const arr = this.$store.state.signalPreList
                this.reqRefreshBigScreen(arr)
            },

            // 放大缩小信号源
            reSizeSignal(obj,itemV) {
                const arr = this.$data.streamWindows
                // 找出当前改动的信号源
                const currentItem = arr.filter(item => item.sourceId === itemV.sourceId)
                currentItem.width = obj.width
                currentItem.height = obj.height
                const otherItems = arr.filter(item => item.sourceId !== itemV.sourceId)
                const newStreamWindows = [...currentItem,...otherItems]
                console.log(newStreamWindows)
            }
        },

        computed: {
            ...mapState(['bigScreenJson','splitScreenStatus','Scale']),

            signalPreList: {
                get() {
                    return this.$store.state.signalPreList
                },
                set(arr) {
                    // const signalArr = [...arr,...this.divArr]
                    this.$store.dispatch('updateSignalPreList',arr)
                }
            },

            dragOptions1() {
                return {
                    animation: 0,
                    group: {
                        name: "description",
                        pull: 'clone',
                        put: false
                    },
                    ghostClass: "ghost",
                }
            },
            dragOptions2() {
                return {
                    animation: 0,
                    group: "description",
                }
            },
        },

        watch: {
            // 监视大屏中的信号源，只要变动，就调用回调函数
            signalPreList: function (arr) {
                this.reqRefreshBigScreen(arr)
            },

            // 监视分屏的状态
            splitScreenStatus: function(num) {
                this.$data.divArr = []

                for (let i=0;i<(num+1)*(num+1);i++){
                    this.$data.divArr.push(i+1)
                }

                const arr = this.$store.state.signalPreList
                this.reqRefreshBigScreen(arr)
            }
        }
    }
</script>

<style scoped>

</style>