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">
                    <div class="split_screen">

                    </div>

                    <div class="control_btns">
                        <!--分屏按钮-->
                        <div class="split_btns">
                            <el-button type="success">自由屏</el-button>
                            <el-button type="success">四分屏</el-button>
                            <el-button type="success">九分屏</el-button>
                            <el-button type="success">十六分屏</el-button>
                            <el-button type="success">清屏</el-button>
                        </div>

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

                        </div>
                    </div>
                </div>
                <div class="signal_source">
                    <div class="signal_title">
                        <h2>信号源列表</h2>
                    </div>
                    <div class="signal_body">
                        <div class="signal_item" v-for="(item,index) in deviceList" :key="index" v-drag>
                            <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>
            <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'

    export default {
        data() {
            return {
                user:storageUtils.getUser()
            }
        },
        methods: {
            // 退出登录
            logout() {
                this.$router.replace('/login')
                this.$store.dispatch('resetUser')
            },
        },
        computed: {
            ...mapState(['deviceList'])
        },

        // 注册局部指令
        directives: {
            drag: {
                // 指令的定义
                inserted: function (el) {
                    el.onmousedown = function (e) {
                        //获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置
                        let divx = e.clientX - el.offsetLeft
                        let divy = e.clientY - el.offsetTop
                        //包含在onmousedown里，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove
                        document.onmousemove = function (e) {
                            //获取移动后div的位置：鼠标位置-divx/divy
                            let l = e.clientX - divx
                            let t = e.clientY - divy
                            el.style.left = l + 'px'
                            el.style.top = t + 'px'
                            
                            console.log(el)
                        }
                        document.onmouseup = function (e) {
                            document.onmousemove = null
                            document.onmouseup = null
                            
                            console.log(e)
                        }
                    }
                }
            }
        }
    }
</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>