视频页面布局

guanqb

2022-12-08 a8f5eb15a6357043f1451ed3f0fd035022b197dc

视频页面布局

 src/views/video/region.vue

@@ -87,11 +87,11 @@
        </div>
        <div class="right-container">
            <div class="item">
                <div class="select">
                <div class="select" v-show="isShowSelect.video1" @mouseenter="enterSelectBox(1)">
                    <el-select
                        size="small"
                        v-model="monitorType1"
                        @change="navClick1"
                        @change="((val)=>{navClick(val,1)})"
                        placeholder="请选择"
                    >
                        <el-option
@@ -102,7 +102,7 @@
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                <div class="video" @mouseenter="enterVideoBox(1)" @mouseleave="leaveVideoBox(1)">
                    <video
                        id="videoElement1"
                        autoplay
@@ -113,12 +113,12 @@
                    ></video>
                </div>
            </div>
            <div class="item">
                <div class="select">
            <div class="item b-c-left">
                <div class="select" v-show="isShowSelect.video2" @mouseenter="enterSelectBox(2)">
                    <el-select
                        size="small"
                        v-model="monitorType2"
                        @change="navClick2"
                        @change="((val)=>{navClick(val,2)})"
                        placeholder="请选择"
                    >
                        <el-option
@@ -129,7 +129,7 @@
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                <div class="video" @mouseenter="enterVideoBox(2)" @mouseleave="leaveVideoBox(2)">
                    <video
                        id="videoElement2"
                        autoplay
@@ -140,12 +140,12 @@
                    ></video>
                </div>
            </div>
            <div class="item">
                <div class="select">
            <div class="item b-c-right">
                <div class="select" v-show="isShowSelect.video3" @mouseenter="enterSelectBox(3)">
                    <el-select
                        size="small"
                        v-model="monitorType3"
                        @change="navClick3"
                        @change="((val)=>{navClick(val,3)})"
                        placeholder="请选择"
                    >
                        <el-option
@@ -156,7 +156,7 @@
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                <div class="video" @mouseenter="enterVideoBox(3)" @mouseleave="leaveVideoBox(3)">
                    <video
                        id="videoElement3"
                        autoplay
@@ -168,11 +168,11 @@
                </div>
            </div>
            <div class="item">
                <div class="select">
                <div class="select" v-show="isShowSelect.video4" @mouseenter="enterSelectBox(4)">
                    <el-select
                        size="small"
                        v-model="monitorType4"
                        @change="navClick4"
                        @change="((val)=>{navClick(val,4)})"
                        placeholder="请选择"
                    >
                        <el-option
@@ -183,7 +183,7 @@
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                <div class="video" @mouseenter="enterVideoBox(4)" @mouseleave="leaveVideoBox(4)">
                    <video
                        id="videoElement4"
                        autoplay
@@ -194,12 +194,12 @@
                    ></video>
                </div>
            </div>
            <div class="item t-left">
                <div class="select">
            <div class="item c-left">
                <div class="select" v-show="isShowSelect.video5" @mouseenter="enterSelectBox(5)">
                    <el-select
                        size="small"
                        v-model="monitorType5"
                        @change="navClick5"
                        @change="((val)=>{navClick(val,5)})"
                        placeholder="请选择"
                    >
                        <el-option
@@ -210,7 +210,7 @@
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                <div class="video" @mouseenter="enterVideoBox(5)" @mouseleave="leaveVideoBox(5)">
                    <video
                        id="videoElement5"
                        autoplay
@@ -221,12 +221,12 @@
                    ></video>
                </div>
            </div>
            <div class="item t-right">
                <div class="select">
            <div class="item c-right">
                <div class="select" v-show="isShowSelect.video6" @mouseenter="enterSelectBox(6)">
                    <el-select
                        size="small"
                        v-model="monitorType6"
                        @change="navClick6"
                        @change="((val)=>{navClick(val,6)})"
                        placeholder="请选择"
                    >
                        <el-option
@@ -237,9 +237,63 @@
                        ></el-option>
                    </el-select>
                </div>
                <div class="video">
                <div class="video" @mouseenter="enterVideoBox(6)" @mouseleave="leaveVideoBox(6)">
                    <video
                        id="videoElement6"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            </div>
            <div class="item t-left">
                <div class="select" v-show="isShowSelect.video7" @mouseenter="enterSelectBox(7)">
                    <el-select
                        size="small"
                        v-model="monitorType7"
                        @change="((val)=>{navClick(val,7)})"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video" @mouseenter="enterVideoBox(7)" @mouseleave="leaveVideoBox(7)">
                    <video
                        id="videoElement7"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            </div>
            <div class="item t-right">
                <div class="select" v-show="isShowSelect.video8" @mouseenter="enterSelectBox(8)">
                    <el-select
                        size="small"
                        v-model="monitorType8"
                        @change="((val)=>{navClick(val,8)})"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video" @mouseenter="enterVideoBox(8)" @mouseleave="leaveVideoBox(8)">
                    <video
                        id="videoElement8"
                        autoplay
                        controls
                        width="100%"
@@ -298,6 +352,8 @@
                flvPlayer4: null,
                flvPlayer5: null,
                flvPlayer6: null,
                flvPlayer7: null,
                flvPlayer8: null,
            },
            saveRangeList: [],
            monitorOption: [],
@@ -307,6 +363,18 @@
            monitorType4: '',
            monitorType5: '',
            monitorType6: '',
            monitorType7: '',
            monitorType8: '',
            isShowSelect: {
                video1: false,
                video2: false,
                video3: false,
                video4: false,
                video5: false,
                video6: false,
                video7: false,
                video8: false,
            },
        }
    },

@@ -398,34 +466,9 @@
            }
        },

        navClick1 (value) {
            this.playVideoList('flvPlayer1', `${this.monitorOption[value].flvUrl}`, 'videoElement1')

        },

        navClick2 (value) {
            this.playVideoList('flvPlayer2', `${this.monitorOption[value].flvUrl}`, 'videoElement2')

        },

        navClick3 (value) {
            this.playVideoList('flvPlayer3', `${this.monitorOption[value].flvUrl}`, 'videoElement3')

        },

        navClick4 (value) {
            this.playVideoList('flvPlayer4', `${this.monitorOption[value].flvUrl}`, 'videoElement4')

        },

        navClick5 (value) {
            this.playVideoList('flvPlayer5', `${this.monitorOption[value].flvUrl}`, 'videoElement5')

        },

        navClick6 (value) {
            this.playVideoList('flvPlayer6', `${this.monitorOption[value].flvUrl}`, 'videoElement6')

        navClick (val, args) {
            this.playVideoList(`flvPlayer${args}`, `${this.monitorOption[val].flvUrl}`, `videoElement${args}`)
            console.log(val, args)
        },

        getRegionSaveList (name) {
@@ -600,7 +643,20 @@
        // 大小重置
        boxResize (val) {
            this.boxShow = val
        }
        },

        enterVideoBox (num) {
            this.isShowSelect[`video${num}`] = true
        },

        leaveVideoBox (num) {
            this.isShowSelect[`video${num}`] = false
        },

        enterSelectBox (num) {
            this.isShowSelect[`video${num}`] = true
        },

    },

    destroyed () {
@@ -760,36 +816,66 @@
        z-index: 98;
        display: flex;
        flex-wrap: wrap;
        height: 50%;
        height: 33.33%;
        left: 400px;

        .item {
            width: 25%;
            height: 100%;
            background-color: $bg-color;
            position: relative;

            .select {
                position: absolute;
                top: 6%;
                height: 16%;
                padding-top: 6%;
                width: 100%;
                z-index: 999;
            }

            .video {
                height: 75%;
                padding: 0 10px;
                height: 100%;
                padding: 1%;
            }
        }

        .t-left {
        .c-left {
            position: absolute;
            bottom: 100%;
            left: 0;
        }

        .t-right {
        .c-right {
            position: absolute;
            bottom: 100%;
            right: 0;
        }
        .t-left {
            position: absolute;
            bottom: 200%;
            left: 0;
        }

        .t-right {
            position: absolute;
            bottom: 200%;
            right: 0;
        }

        .c-left,
        .c-right,
        .t-left,
        .t-right {
            .video {
                padding-bottom: 0;
            }
        }
        .b-c-left .video {
            padding: 1% 0;
        }
        .b-c-right .video {
            padding: 1% 0 1% 1%;
        }
    }
}
</style>