videoApp/src/renderer/components/Button.vue

<!--button按钮组件-->

<template>
    <div>
        <div v-for="item in buttonJson"
             :style="{
                    position:'absolute',
                    left:item.Left*Scale+'px',
                    top:item.Top*Scale+'px',
                    width:item.Width*Scale + 'px',
                    height:item.Height*Scale + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'block' : 'none',
                    fontSize:item.FontSize*Scale + 'px',
                    backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
                    backgroundSize:'100% 100%',
                    backgroundRepeat:'no-repeat',
                    color:`#${item.ForegroundStr.slice(3)}`,
                    textAlign:'center',
                    lineHeight:item.Height*Scale + 'px',
                    cursor:'default'
                }"
             :ref="item.ID"
             @click="clickBtn(item)"
             @mousedown="mouseDown(item)"
             @mouseup="mouseUp(item)"
        >
            {{item.Text}}
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        data() {
            return {
                count: 0,   // 音量计数器
                count2: 0, // 预案管理模块计数器
                count3: 0, // 管理控制按钮计数器
                count4: 0, // 3个视频按钮计数器
                count5: 0, // 安卓分布式按钮
            }
        },

        mounted() {
            // 获取分屏按钮数组(将分屏按钮和其他按钮区分开)
            this.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'))

            // 获取功能按钮涉及到的按钮和label
            // 1.电源管理  2.音频管理  3.视频管理  4.环境控制  5.电脑控制
            const funcBtnArr = this.buttonJson.filter(item => (item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5' || item.WindowID === 'cb2687fd-931a-4b38-a76d-9c3ea171b8d8' || item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b' || item.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d' || item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5'))
            const funcLabArr = this.labelJson.filter(item => (item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5' || item.WindowID === 'cb2687fd-931a-4b38-a76d-9c3ea171b8d8' || item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b' || item.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d' || item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5'))
            this.funcObj = {
                funcBtnArr,
                funcLabArr,
                funSliderArr:this.sliderJson
            }

            // 获取电源管理和电脑控制按钮
            this.powerAndCompBtns = this.buttonJson.filter(item => (item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5' || item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5') && item.ID !== '19554440-98bc-4644-83a0-d9cefd69153e')
        },

        computed: {
            ...mapState(['buttonJson','labelJson','sliderJson','Scale']),
        },

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

                // 预案管理声音开关
                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.Text === 'LCD屏' || e.Text === 'LED屏' || e.Text === '投影机') {
                    if (this.count4 === 0) {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                        ++this.count4
                    } else if(e !== this.lastData4) {
                        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

                    // 首先清屏
                    this.$store.dispatch('clearScreen')
                    this.arr.forEach(item => {
                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                            item.IsVisibility = true
                        } else {
                            item.IsVisibility = false
                        }
                    })
                    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 if(e !== this.lastData) {
                        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
                }

                // 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 if(e !== this.lastData3) {
                        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.funcObj.funcBtnArr.forEach((item, index) => {
                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                            item.IsVisibility = true
                        } else {
                            item.IsVisibility = false
                        }
                    })

                    // 标签
                    this.funcObj.funcLabArr.forEach((item, index) => {
                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                            item.IsVisibility = true
                        } else {
                            item.IsVisibility = false
                        }
                    })

                    // 滑块
                    this.funcObj.funSliderArr.forEach((item, index) => {
                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                            item.IsVisibility = true
                        } else {
                            item.IsVisibility = false
                        }
                    })
                    return
                }

                // 分屏和清屏操作
                if (e.ID === '7775e508-c6a5-4044-8264-24772a24fa97' || e.ID === '95c5d676-46a5-4c46-b550-9bc013a59937' || e.ID === 'f47e84bb-c878-4b22-a9d6-eb2e307283bc') {
                    // 清屏
                    this.$store.dispatch('clearScreen')
                    return
                } else if (e.ID === '49653a62-99cb-40e1-a513-60e42893adb7' || e.ID === 'd55c81a8-54d7-4d90-aad7-4f34c3ba3950' || e.ID === '4142ab5b-ce52-4655-a28d-724bfabb24f0') {
                    // 自由屏
                    this.$store.dispatch('splitScreen',0)
                    return
                } else if (e.ID === '52de9a2e-d171-423d-860f-3fe2750ec757' || e.ID === '0cabb1ba-bcae-45d9-b019-2b45486f98e3' || e.ID === '9bb5b3e3-9e21-4716-8059-f5b35b24e3fa') {
                    // 四分屏
                    this.$store.dispatch('splitScreen',1)
                    return
                } else if (e.ID === 'ac0cc31c-a9b8-4bdf-88cf-928964b93ac5' || e.ID === '201e4bb0-c039-46c7-a55a-049d00de4769') {
                    // 九分屏
                    this.$store.dispatch('splitScreen',2)
                    return
                } else if (e.ID === '2d4c49bc-905b-4f96-a65c-9b0a3e057b3f') {
                    // 16分屏
                    this.$store.dispatch('splitScreen',3)
                    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 if(e !== this.lastData5){
                        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(this.powerAndCompBtns.some(item => item.ID === e.ID)){
                    if(e.ActionType === 2){
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                        e.ActionType = -2
                    }else {
                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
                        e.ActionType = 2
                    }
                }
                return
            },

            // 鼠标按下事件
            mouseDown(e) {
                if (this.arr.some(item => e === item) && e.Text !== '安卓' && e.Text !== '分布式') { // 分屏控制按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                }else if(e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                }else if(e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                }else if(e.ID === '19554440-98bc-4644-83a0-d9cefd69153e'){ // 电脑控制All按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                }
                return
            },

            // 鼠标松开事件
            mouseUp(e) {
                if (this.arr.some(item => e === item) && e.Text !== '安卓' && e.Text !== '分布式') { // 分屏控制按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
                }else if(e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
                }else if(e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
                }if(e.ID === '19554440-98bc-4644-83a0-d9cefd69153e'){ // 电脑控制All按钮
                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
                }
                return
            },
        }
    }
</script>

<style scoped>

</style>