videoApp/src/renderer/components/SignalList.vue

<!--信号源列表组件-->
<template>
    <!--信号源容器-->
    <draggable
            :style="{
                left:signalBorder[0] ? signalBorder[0].Left*bigScale+'px' : '',
                top:signalBorder[0] ? signalBorder[0].Top*bigScale+'px' : '',
                width:signalBorder[0] ? signalBorder[0].Width*bigScale + 'px' : '',
                height:signalBorder[0] ? signalBorder[0].Height*bigScale + 'px' : '',
                zIndex:signalBorder[0] ? signalBorder[0].ZIndex : '',
                fontSize:signalBorder[0] ? signalBorder[0].FontSize*bigScale + 'px' : '',
                color:`#${signalBorder[0] ? signalBorder[0].ForegroundStr.slice(3) : ''}`,
                flexDirection: signalBorder[0] ? (signalBorder[0].Orientation === 0 ? 'column' : 'row') : '',
            }"
            class="signal_body"
            element="div"
            v-model="signalListJson"
            :options="dragOptions1"
            :move="onMove"
            @end="end"
            id="signalContainer"
    >
        <!--信号源列表项-->
        <div
                v-if="signalBorder.length"
                class="signal_item"
                v-for="item in signalListJson"
                :key="item.ID"
                :style="{
                    width: signalBorder[0] ? (signalBorder[0].Orientation === 0 ? (signalBorder[0].Width*bigScale*0.9 + 'px') : '200px') : '',
                    height: signalBorder[0] ? (signalBorder[0].Orientation === 0 ? '132px' : signalBorder[0].Height*bigScale*0.8 + 'px') : '',
                }"
        >
            <div class="signal_item_bg">
                <div class="signal_item_bg_body">
                    <div class="signal_item_bg_body_space">
                        <div v-show="item.preview" :ref="item.ID">
                            <VideoPlayer
                                    :options="videoPlayObj2[item.sourceId]"
                                    :playsinline="true"
                            />
                        </div>
                    </div>
                    <div class="signal_item_bg_body_font">{{item.deviceName}}</div>
                </div>
            </div>
        </div>
    </draggable>
</template>

<script>
    import {mapState} from 'vuex'
    import draggable from 'vuedraggable'
    import {getStaticFile} from "../../utils/tools"
    import VideoPlayer from "./player"

    export default {
        data() {
            return {
                signalBorder: [], // 信号源容器
                videoPlayObj2: {}, // 视频播放配置对象
            }
        },

        components: {
            draggable,
            VideoPlayer
        },

        async beforeCreate() {
            this.signalBorder = await getStaticFile('EnitySignalPreviewList.Data')
        },

        beforeUpdate() {
            const signalList = this.$store.state.signalListJson
            const videoPlayObj2 = {}
            for (const item of signalList) {
                videoPlayObj2[item.sourceId] = {
                    sources: [
                        {
                            "src": item.previewUrl,
                            "type": "rtmp/flv"
                        }
                    ]
                }
            }
            this.videoPlayObj2 = videoPlayObj2
        },

        updated() {
            const flag = this.signalBorder[0] ? (this.signalBorder[0].Orientation === 0 ? 'column' : 'row') : ''
            if (flag === 'column') {
                document.getElementById('signalContainer').style.alignItems = 'center'
            }
        },

        methods: {
            // 移动信号源
            onMove({relatedContext, draggedContext}) {
                // 更新当前操作大屏ID
                this.$store.dispatch('updateCurBigscreenId', relatedContext.component.$el.id)

                const relatedElement = relatedContext.element
                const draggedElement = draggedContext.element
                return (
                    (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
                )
            },

            end: function (evt) {
                const bigscreenObj = this.$store.state.bigScreenObj
                let len = bigscreenObj[evt.to.id] ? bigscreenObj[evt.to.id].signalArr.length : 0
                const count = evt.newIndex + 1 - len > 0 ? evt.newIndex + 1 - len : 1
                // 更新当前拖拽的位置
                this.$store.dispatch('updatePositionNum', count)
            },
        },

        computed: {
            ...mapState(['signalListJson', 'bigScale', 'signalPreList']),
            dragOptions1() {
                return {
                    animation: 0,
                    group: {
                        name: "description",
                        pull: 'clone',
                        put: false
                    },
                    sort: false,
                    ghostClass: "ghost",
                }
            },
            dragOptions2() {
                return {
                    animation: 0,
                    group: "description",
                }
            },
        }
    }
</script>