videoApp/src/renderer/components/Admin.vue

<!--管理界面-->
<template>
    <div class="containers">
        <!--主页-->
        <div
                :style="{
                position: 'relative',
                left:windowJson[0].Left+'px',
                top:windowJson[0].Top+'px',
                width:windowJson[0].Width + 'px',
                height:windowJson[0].Height + 'px',
                zIndex:windowJson[0].ZIndex,
                display:windowJson[0].IsVisibility ? 'black' : 'none',
                backgroundImage:windowJson[0].BackIcon ? 'url('+require(`../../../static/images/${windowJson[0].BackIcon}`)+')' : null,
                backgroundRepeat:'no-repeat',
                backgroundSize:'100% 100%',
                backgroundColor:`#${windowJson[0].BrackgroupStr.slice(3)}`,
                margin:'0 auto',
            }"
        >
            <!--按钮-->
            <div v-for="item in buttonJson"
                 :style="{
                    position:'absolute',
                    left:item.Left+'px',
                    top:item.Top+'px',
                    width:item.Width + 'px',
                    height:item.Height + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'black' : 'none',
                    fontSize:item.FontSize + 'px',
                    backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
                    backgroundSize:'100% 100%',
                    backgroundRepeat:'no-repeat',
                    color:`#${item.ForegroundStr.slice(3)}`,
                    textAlign:'center',
                    lineHeight:item.Height + 'px',
                    cursor:'default'
                }"
                 :ref="item.ID"
                 @click="clickBtn(item)"
                 @mousedown="mouseDown(item)"
                 @mouseup="mouseUp(item)"
            >
                {{item.Text}}
            </div>

            <!--大屏显示-->
            <draggable
                    :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
                    v-for="item in bigScreenJson"
                    element="div"
                    v-model="signalPreList"
                    :options="dragOptions2"
                    :move="onMove"
                    @start="isDragging=true"
                    @end="isDragging=false"
                    :style="{
                    left:item.Left+'px',
                    top:item.Top+'px',
                    width:item.Width + 'px',
                    height:item.Height + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'black' : 'none',
                }"
            >
                <div v-for="(item,key) in signalPreList" :key="key" class="item">
                    {{item.ShowName}}
                </div>
            </draggable>

            <!--label标签-->
            <label v-for="item in labelJson"
                   :style="{
                 fontSize:item.FontSize + 'px',
                 position:'absolute',
                 left:item.Left+'px',
                 top:item.Top+'px',
                 width:item.Width + 'px',
                 height:item.Height + 'px',
                 zIndex:item.ZIndex,
                 display:item.IsVisibility ? 'black' : 'none',
                 color:`#${item.ForegroundStr.slice(3)}`,
                 textAlign:'center',
                 lineHeight:item.Height + 'px',
            }">
                {{item.Text}}
            </label>

            <!--图片-->
            <div v-for="item in imageJson"
                 :style="{
                    position:'absolute',
                    left:item.Left+'px',
                    top:item.Top+'px',
                    width:item.Width + 'px',
                    height:item.Height + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'black' : 'none',
                    backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
                    backgroundRepeat:'no-repeat',
                    backgroundSize:'100% 100%',
                }"
            >
            </div>

            <!--信号源列表-->
            <draggable
                    :style="{
                    left:signalList[0].Left+'px',
                    top:signalList[0].Top+'px',
                    width:signalList[0].Width + 'px',
                    height:signalList[0].Height + 'px',
                    zIndex:signalList[0].ZIndex,
                    display:signalList[0].IsVisibility ? 'black' : 'none',
                    fontSize:signalList[0].FontSize + 'px',
                    color:`#${signalList[0].ForegroundStr.slice(3)}`,
                    position:'absolute',
                    overflow:'auto',
                    }"
                    class="signal_body"
                    element="div"
                    v-model="signalList[0].PreviewList"
                    :options="dragOptions1"
                    :move="onMove"
                    @start="isDragging=true"
                    @end="isDragging=false"

            >
                <!--列表项-->
                <div class="signal_item" v-for="item in signalList[0].PreviewList" :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.ShowName}}</div>
                        </div>
                    </div>
                </div>
            </draggable>

            <!--滑块-->
            <div v-for="item in sliderJson"
                 :style="{
                    position:'absolute',
                    left:item.Left+'px',
                    top:item.Top+'px',
                    width:item.Width + 'px',
                    height:item.Height + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'black' : 'none',
                    backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
                    backgroundRepeat:'no-repeat',
                    backgroundSize:'100% 100%',
                }"
            >
                <div
                        :style="{
                           width:item.imgBgWidth + 'px',
                           height:item.imgBgHeight + 'px',
                        }"
                >
                    <div
                        :style="{
                            width:item.imgSliderWidth + 'px',
                            height:item.imgSliderHeight + 'px',
                            backgroundImage:'url('+require(`../../../static/images/${item.SliderIcon}`)+')',
                            backgroundRepeat:'no-repeat',
                            marginLeft:'24px'
                        }"
                    >

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

            <!--主要页面配置-->
            <!--<div v-for="item in windowJson"
                 :style="{
                    left:item.Left+'px',
                    top:item.Top+'px',
                    width:item.Width + 'px',
                    height:item.Height + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'black' : 'none',
                    backgroundImage:item.BackIcon ? 'url('+require(`../../../static/images/${item.BackIcon}`)+')' : null,
                    backgroundRepeat:'no-repeat',
                    backgroundSize:'100% 100%',
                    margin:'0 auto',
                }"
            >
            </div>-->
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import draggable from 'vuedraggable'
    import labelJson from '../../../static/EnityLable'
    import bigScreenJson from '../../../static/EnityBigScreen'
    import buttonJson from '../../../static/EnityButton'
    import signalList from '../../../static/EnitySignalPreviewList'
    import sliderJson from '../../../static/EnitySlider'
    import imageJson from '../../../static/EnityImage'
    import windowJson from '../../../static/EnityWindow'
    import storageUtils from "../../utils/storageUtils"
    import '../assets/less/splitscreen.less'

    export default {
        components: {
            draggable
        },
        data() {
            return {
                user: storageUtils.getUser(), // 本地存储的用户
                signalPreList: [],  // 被拖到大屏中的信号源列表
                isDragging: false,
                splitScreenStatus: 0,// 分屏状态（默认0: 自由屏，1: 4分屏  2：9分屏  3: 16分屏）
                labelJson, // label标签配置
                bigScreenJson,// 大屏显示配置
                buttonJson, // button按钮配置
                signalList, // 信号源列表配置
                sliderJson, // 滑块配置
                imageJson, // 图片配置
                windowJson, // 主要页面配置
                count: 0,// 音量计数器
                count2: 0, // 预案管理模块计数器
                count3: 0, // 管理控制按钮计数器
                count4: 0, // 3个视频按钮计数器
                count5: 0, // 安卓分布式按钮
                systemStatus: false,// 系统开关状态，默认为关
                /*arr: [],// 分屏按钮数组
                funcBtnArr: [],// 功能按钮数组
                funcLabArr: [],// 功能label数组
                sliderArr: [],// 音量滑块数组*/
            }
        },
        mounted() {
            // 获取分屏按钮数组
            const arr = this.buttonJson.filter(item => (item.WindowID === '9a0dff23-8633-4e7f-89bf-cc4f68ec88e1' || item.WindowID === '08208721-41cc-4f1e-937b-3a1627389049' || item.WindowID === 'ab842585-0c91-4e65-bfed-a219bcaaeb43'))
            const arr2 = this.buttonJson.filter(item => !(item.WindowID === '9a0dff23-8633-4e7f-89bf-cc4f68ec88e1' || item.WindowID === '08208721-41cc-4f1e-937b-3a1627389049' || item.WindowID === 'ab842585-0c91-4e65-bfed-a219bcaaeb43'))
            this.arr = arr
            this.arr2 = arr2

            // 获取功能按钮涉及到的按钮和label
            // 1.电源管理
            const curSourceBtnArr = this.buttonJson.filter(item => item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5')
            const curSourceLabArr = this.labelJson.filter(item => item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5')
            // 2.音频管理
            const audioBtnArr = this.buttonJson.filter(item => item.WindowID === 'cb2687fd-931a-4b38-a76d-9c3ea171b8d8')
            const audioLabArr = this.labelJson.filter(item => item.WindowID === 'cb2687fd-931a-4b38-a76d-9c3ea171b8d8')
            // 3.视频管理
            const vedioBtnArr = this.buttonJson.filter(item => item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b')
            const vedioLabArr = this.labelJson.filter(item => item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b')
            // 4.环境控制
            const envirControlBtnArr = this.buttonJson.filter(item => item.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d')
            const envirControlLabArr = this.labelJson.filter(item => item.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d')
            // 5.电脑控制
            const compControlBtnArr = this.buttonJson.filter(item => item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5')
            const compControlLabArr = this.labelJson.filter(item => item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5')

            const funcBtnArr = [...curSourceBtnArr, ...audioBtnArr, ...vedioBtnArr, ...envirControlBtnArr, ...compControlBtnArr]
            const funcLabArr = [...curSourceLabArr, ...audioLabArr, ...vedioLabArr, ...envirControlLabArr, ...compControlLabArr]
            const sliderArr = [...this.sliderJson]
            this.funcBtnArr = funcBtnArr
            this.funcLabArr = funcLabArr
            this.sliderArr = sliderArr
        },
        methods: {
            // 移动信号源
            onMove({relatedContext, draggedContext}) {
                const relatedElement = relatedContext.element
                const draggedElement = draggedContext.element
                return (
                    (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
                )
            },

            // 分屏操作
            spliceScreen(value) {
                this.splitScreenStatus = value
            },

            // 点击按钮
            clickBtn(e) {
                console.log(e)

                // 切换屏幕
                if (e.Text === 'LCD屏' || e.Text === 'LED屏' || e.Text === '投影机') {
                    // 首先清屏
                    this.signalPreList = []
                    this.arr.forEach((item, index) => {
                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                            item.IsVisibility = true
                        } else {
                            item.IsVisibility = false
                        }
                    })
                    this.buttonJson = [...this.buttonJson, ...this.arr]
                }

                // 声音开关按钮处理
                if (e.ID === '355d3c32-1502-40b4-9ddd-663d5b8469e7') {
                    if (this.count % 2 === 0) {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                        ++this.count
                    } else {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
                        ++this.count
                    }
                    return
                }

                // 预案管理按钮处理
                if (e.Name.includes('V0') && e.Name.slice(7) * 1 > 62 && e.Name.slice(7) * 1 < 72) {
                    if (this.count2 === 0) {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                        ++this.count2
                    } else {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                        this.lastBtn.style.backgroundImage = 'url(' + require(`../../../static/images/${this.lastData.BackIcon}`) + ')'
                    }
                    // 保存点过的这个按钮和按钮数据
                    this.lastBtn = this.$refs[e.ID][0]
                    this.lastData = e
                    return
                }

                // 3个屏控制按钮处理
                if (e.Text.includes('投影机') || e.Text.includes('LCD屏') || e.Text.includes('LED屏')) {
                    if (this.count4 === 0) {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                        ++this.count4
                    } else {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                        this.lastBtn4.style.backgroundImage = 'url(' + require(`../../../static/images/${this.lastData4.BackIcon}`) + ')'
                    }
                    // 保存点过的这个按钮和按钮数据
                    this.lastBtn4 = this.$refs[e.ID][0]
                    this.lastData4 = e
                    return
                }

                // 5个管理控制按钮处理
                if (e.Name.includes('V0--Btn6') || e.Name.includes('V0--Btn61') || e.Name.includes('V0--Btn12') || e.Name.includes('V0--Btn58') || e.Name.includes('V0--Btn77')) {
                    // （1）背景切换
                    if (this.count3 === 0) {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                        ++this.count3
                    } else {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                        this.lastBtn3.style.backgroundImage = 'url(' + require(`../../../static/images/${this.lastData3.BackIcon}`) + ')'
                    }
                    // 保存点过的这个按钮和按钮数据
                    this.lastBtn3 = this.$refs[e.ID][0]
                    this.lastData3 = e

                    // （2）界面切换
                    this.funcBtnArr.forEach((item, index) => {
                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                            item.IsVisibility = true
                        } else {
                            item.IsVisibility = false
                        }
                    })
                    this.funcLabArr.forEach((item, index) => {
                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                            item.IsVisibility = true
                        } else {
                            item.IsVisibility = false
                        }
                    })
                    this.sliderArr.forEach((item, index) => {
                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                            item.IsVisibility = true
                        } else {
                            item.IsVisibility = false
                        }
                    })
                    this.buttonJson = [...this.buttonJson, ...this.funcBtnArr]
                    this.labelJson = [...this.labelJson, ...this.funcLabArr]
                    this.sliderJson = [...this.sliderJson, ...this.sliderArr]
                    return
                }

                // LED屏分屏和清屏操作
                if (e.ID === '7775e508-c6a5-4044-8264-24772a24fa97') {
                    this.signalPreList = []
                    return
                } else if (e.ID === '49653a62-99cb-40e1-a513-60e42893adb7') {
                    // 自由屏
                    this.spliceScreen(0)
                    return
                } else if (e.ID === '52de9a2e-d171-423d-860f-3fe2750ec757') {
                    // 四分屏
                    this.spliceScreen(1)
                    return
                } else if (e.ID === 'ac0cc31c-a9b8-4bdf-88cf-928964b93ac5') {
                    // 九分屏
                    this.spliceScreen(2)
                    return
                }

                // LCD屏分屏和清屏操作
                if (e.ID === '95c5d676-46a5-4c46-b550-9bc013a59937') {
                    this.signalPreList = []
                    return
                } else if (e.ID === 'd55c81a8-54d7-4d90-aad7-4f34c3ba3950') {
                    // 自由屏
                    this.spliceScreen(0)
                    return
                } else if (e.ID === '0cabb1ba-bcae-45d9-b019-2b45486f98e3') {
                    // 四分屏
                    this.spliceScreen(1)
                    return
                } else if (e.ID === '201e4bb0-c039-46c7-a55a-049d00de4769') {
                    // 九分屏
                    this.spliceScreen(2)
                    return
                } else if (e.ID === '2d4c49bc-905b-4f96-a65c-9b0a3e057b3f') {
                    // 16分屏
                    this.spliceScreen(3)
                    return
                }

                // 投影机分屏和清屏操作
                if (e.ID === 'f47e84bb-c878-4b22-a9d6-eb2e307283bc') {
                    this.signalPreList = []
                    return
                } else if (e.ID === '4142ab5b-ce52-4655-a28d-724bfabb24f0') {
                    // 自由屏
                    this.spliceScreen(0)
                    return
                } else if (e.ID === '9bb5b3e3-9e21-4716-8059-f5b35b24e3fa') {
                    // 四分屏
                    this.spliceScreen(1)
                    return
                }

                // 安卓和分布式按钮
                if (e.Text === '安卓' || e.Text === '分布式') {
                    if (this.count5 === 0) {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                        ++this.count5
                    } else {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                        this.lastBtn5.style.backgroundImage = 'url(' + require(`../../../static/images/${this.lastData5.BackIcon}`) + ')'
                    }
                    // 保存点过的这个按钮和按钮数据
                    this.lastBtn5 = this.$refs[e.ID][0]
                    this.lastData5 = e
                    return
                }

                // 系统开关按钮
                if (e.ID === 'aea34c76-4216-469b-9610-9889a2d42d06') {
                    this.systemStatus = !this.systemStatus
                    if (this.systemStatus) { // 开启,同时开启LCD屏和坐席电源
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                        this.$refs['f5361d60-6868-4c59-806b-22b85e7c9e3e'][0].style.backgroundImage = 'url(' + require(`../../../static/images/73.png`) + ')'
                        this.$refs['4d3266e8-64b5-4765-a36d-7e271eb3c8e8'][0].style.backgroundImage = 'url(' + require(`../../../static/images/73.png`) + ')'
                    } else { // 关闭
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
                        this.$refs['f5361d60-6868-4c59-806b-22b85e7c9e3e'][0].style.backgroundImage = 'url(' + require(`../../../static/images/75.png`) + ')'
                        this.$refs['4d3266e8-64b5-4765-a36d-7e271eb3c8e8'][0].style.backgroundImage = 'url(' + require(`../../../static/images/75.png`) + ')'
                    }
                    return false
                }
            },

            // 鼠标按下事件
            mouseDown(e) {
                if (this.arr.some(item => e === item)) {
                    console.log(e, '鼠标按下了')
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                }
                return
            },

            // 鼠标松开事件
            mouseUp(e) {
                if (this.arr.some(item => e === item)) {
                    console.log(e, '鼠标抬起了')
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
                }
                return
            },
        },
        computed: {
            ...mapState(['deviceList']),
            dragOptions1() {
                return {
                    animation: 0,
                    group: {
                        name: "description",
                        pull: 'clone',
                        put: false
                    },
                    ghostClass: "ghost",
                }
            },
            dragOptions2() {
                return {
                    animation: 0,
                    group: "description",
                }
            },
        }
    }
</script>

<style lang="less">
    // 容器样式
    .containers {
        width: 100%;
        height: 981px;
        background-color: #333;

        // 列表项样式
        .signal_item {
            width: 100%;
            height: 132px;
            display: flex;
            justify-content: center;
            align-items: center;

            /*背景*/

            .signal_item_bg {
                width: 90%;
                height: 130px;
                display: flex;
                justify-content: center;
                align-items: center;

                &:hover {
                    background-color: rgba(113, 113, 113, 0.3);
                }

                /*主体*/

                .signal_item_bg_body {
                    width: 96%;
                    height: 96%;
                    background-color: rgba(127, 127, 127, 0.5);
                    border-radius: 2px;

                    /*空间*/

                    .signal_item_bg_body_space {
                        width: 94%;
                        height: 80%;
                        background-color: green;
                        margin: 6px auto 2px;
                    }

                    /*文字*/

                    .signal_item_bg_body_font {
                        width: 100%;
                        height: 15%;
                        text-align: center;
                        margin: 0 auto;
                        font-size: 16px;
                        color: #fff;
                        font-family: "Gill Sans", sans-serif;
                    }
                }
            }
        }

        // 滚动条样式
        /*定义滚动条高宽及背景高宽:分别对应横竖滚动条的尺寸*/

        ::-webkit-scrollbar {
            width: 4px;
            background-color: rgba(10, 66, 125, 0.65);
        }

        /*定义滚动条轨道:内阴影+圆角*/

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(10, 66, 125, 0.3);
            border-radius: 10px;
            background-color: rgba(10, 66, 125, 0.65);
        }

        /*定义滑块:内阴影+圆角*/

        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(10, 66, 125, .3);
            background-color: #666;
        }
    }
</style>