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="{
                    left:item.Left+'px',
                    top:item.Top+'px',
                    width:item.Width + 'px',
                    height:item.Height + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'black' : 'none',
                }"
        >
            <div v-for="(item,key) in signalPreList" :key="key" class="item">
                {{item.ShowName}}
            </div>
        </draggable>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import draggable from 'vuedraggable'
    import '../assets/less/splitscreen.less'

    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) {
                    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>