videoApp/src/renderer/components/SignalList.vue

<!--信号源列表组件-->

<template>
    <draggable
            :style="{
                position:'absolute',
                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 : '',
                display:signalBorder[0] ? (signalBorder[0].IsVisibility ? 'block' : 'none') : '',
                fontSize:signalBorder[0] ? signalBorder[0].FontSize*bigScale + 'px' : '',
                color:`#${signalBorder[0] ? signalBorder[0].ForegroundStr.slice(3) : ''}`,
            }"
            class="signal_body"
            element="div"
            v-model="signalListJson"
            :options="dragOptions1"
            :move="onMove"
    >
        <!--列表项-->
        <div class="signal_item" v-for="item in signalListJson" :key="item.ID">
            <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')
        },

        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
                    },
                    ghostClass: "ghost",
                }
            },
            dragOptions2() {
                return {
                    animation: 0,
                    group: "description",
                }
            },
        }
    }
</script>