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"
            id="signalContainer"
    >
        <!--信号源列表项-->
        <div
                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>
                    <div class="signal_item_bg_body_font">{{item.deviceID}}</div>
                </div>
            </div>
        </div>
    </draggable>
</template>

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

    export default {
        data() {
            return {
                signalBorder:[]
            }
        },

        components: {
            draggable
        },

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

        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}) {
                const signalLength = this.$store.state.signalPreList.length

                this.$store.dispatch('updatePositionNum',relatedContext.index-signalLength)

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

        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>