videoApp/src/renderer/components/BigShow.vue

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

<template>
    <div>
        <draggable
                :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
                v-for="item in bigScreenJson"
                element="div"
                v-model="signalPreList"
                :options="dragOptions2"
                :move="onMove"
                @start="isDragging=true"
                @end="isDragging=false"
                :style="{
                    width:item.Width + 'px',
                    height:item.Height + 'px',
                    left:item.Left+'px',
                    top:item.Top+'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'black' : 'none',
                }"
        >
            <div v-for="(item,key) in signalPreList" :key="key" class="item" ref="signal">
                {{item.showName}}
            </div>
        </draggable>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import draggable from 'vuedraggable'
    import '../assets/less/splitscreen.less'
    import {getElementLeft, getElementTop} from "../../utils/tools"
    import {reqRefreshView} from "../api"

    export default {
        data() {
            return {
                isDragging: false, // 是否可拖动标志
            }
        },

        components: {
            draggable,
        },

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

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

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

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

<style scoped>

</style>