videoApp/src/renderer/components/Admin.vue

<!--管理界面-->
<template>
    <div class="containers">
        <div class="leftblank">
            <img class="avator" src="../assets/images/avatar.jpg" alt="头像">
            <div class="userinfo">
                <p>{{user.username}}</p>
                <el-link type="primary" @click="logout" :underline="false">退出</el-link>
            </div>
        </div>
        <div class="maincontent">
            <div class="title">
                <p>分布式视频管理系统</p>
            </div>
            <div class="screenmanage">
                <div class="pre_planmanage">
                    <h2>预案管理</h2>
                    <el-button type="primary" size="small">添加信号源</el-button>
                    <el-button type="primary" size="small">设置背景</el-button>
                    <el-button type="primary" size="small">新建预案</el-button>
                    <el-button type="primary" size="small">加载预案</el-button>
                    <el-button type="primary" size="small">跑马灯</el-button>
                    <el-button type="primary" size="small">播放器测试</el-button>
                    <el-button type="primary" size="small">send</el-button>
                    <el-button type="primary" size="small">dummy</el-button>
                    <el-button type="primary" size="small">clear device</el-button>
                    <el-button type="primary" size="small">rebuild DB</el-button>
                </div>
                <div class="bigscreen_control">
                    <draggable
                            :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : 'split_screen_four']"
                            element="div"
                            v-model="signalList"
                            :options="dragOptions2"
                            :move="onMove"
                            @start="isDragging=true"
                            @end="isDragging=false"
                    >
                        <div v-for="(item,key) in signalList" :key="key" class="item">
                            {{item.name}}
                        </div>

                        <!--<div class="item">PC1</div>
                        <div class="item">PC2</div>
                        <div class="item">PC3</div>
                        <div class="item">PC4</div>-->
                    </draggable>

                    <!--<div class="split_screen">
                    </div>-->

                    <div class="control_btns">
                        <!--分屏按钮-->
                        <div class="split_btns">
                            <el-button type="success" @click="spiltScreenOperation(0)">自由屏</el-button>
                            <el-button type="success" @click="spiltScreenOperation(1)">四分屏</el-button>
                            <el-button type="success" @click="spiltScreenOperation(2)">九分屏</el-button>
                            <el-button type="success" @click="spiltScreenOperation(3)">十六分屏</el-button>
                            <el-button type="success" @click="clearScreen">清屏</el-button>
                        </div>

                        <!--其他按钮-->
                        <div class="other_btns">

                        </div>
                    </div>
                </div>
                <div class="signal_source">
                    <div class="signal_title">
                        <h2>信号源列表</h2>
                    </div>
                    <draggable
                            class="signal_body"
                            element="div"
                            v-model="deviceList"
                            :options="dragOptions1"
                            :move="onMove"
                            @start="isDragging=true"
                            @end="isDragging=false"
                    >
                        <div class="signal_item" v-for="(item,index) in deviceList" :key="index">
                            <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.name}}</div>
                                </div>
                            </div>
                        </div>
                    </draggable>

                        <!--<div class="signal_item" v-for="(item,index) in deviceList" :key="index">
                            <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.name}}</div>
                                </div>
                            </div>
                        </div>-->
                </div>
            </div>
            <div class="footmenu">

            </div>
        </div>
        <div class="rightblank">

        </div>
    </div>
</template>

<script>
    import '../assets/less/admin.less'
    import storageUtils from "../../utils/storageUtils"
    import {mapState} from 'vuex'
    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable
        },
        data() {
            return {
                user:storageUtils.getUser(),
                signalList:[],  // 被拖到大屏中的信号源列表
                isDragging:false,
                splitScreenStatus:0,// 分屏状态（默认0: 自由屏，1: 4分屏  2：9分屏  3: 16分屏）
            }
        },
        methods: {
            // 退出登录
            logout() {
                this.$router.replace('/login')
                this.$store.dispatch('resetUser')
            },

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

            // 清屏操作
            clearScreen() {
                this.signalList = []
            },

            // 分屏操作
            spiltScreenOperation(status) {
                this.splitScreenStatus = status
                this.signalList = []
            }
        },
        computed: {
            ...mapState(['deviceList']),
            dragOptions1() {
                return {
                    animation: 0,
                    group: {
                        name: "description",
                        pull: 'clone',
                        put: false
                    },
                    ghostClass: "ghost",
                }
            },
            dragOptions2() {
                return {
                    animation: 0,
                    group: "description",
                }
            }
        }
    }
</script>

<style>
    .leftblank {
        display: flex;
    }
    .avator {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding:15px;
        cursor: pointer;
    }
    .userinfo {
        padding-left:4px;
    }
    .userinfo p {
        color:#fff;
        margin-bottom:10px;
    }
</style>