duoji-frontend/src/views/realTimeMonitoring/index.vue

<template>
    <div class="realTime bg-white">
        <a-tabs default-active-key="1" slot="headerContent" v-model="tabKey" @change="tabsChange">
            <a-tab-pane key="0" tab="全部">
            </a-tab-pane>
            <a-tab-pane :key="(index+1).toString()" :tab="item.streetName" v-for="(item,index) in realTimeListData">
            </a-tab-pane>
        </a-tabs>
        <div class="flex-layouts">
            <div class="video-list" v-for="(item,index) in realTimeListData" :key="(index+1).toString()">
                <div class="video-item" v-for="i in item.cameras" :key="i.id">
                    <template v-if="tabKey==0? tabKey==0 : tabKey==(index+1).toString()">
                        <object style="width:390px;height:219px" class="video-obj" :id="'video'+i.id"
                                type='application/x-vlc-plugin' events='True' width="100%" height="100%"
                                ref="vlc"
                                pluginspage="http://www.videolan.org"
                                codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
                            <param name='controls' value='false'/>
                            <param name='text' value='正在加载视频中...'/>
                            <param name='branding' value='false'/>
                            <param name="windowless" value="true">
                            <param name='fullscreen' value='false'/>
                            <param name='mrl' :value='i.rtsp'/>
                            <param name='autoplay' value='yes'/>
                            <embed type="application/x-google-vlc-plugin"/>
                        </object>
                        <div class="video-name">
                            <iframe class="vlcIframe"
                                    style=" position:absolute;visibility:inherit; top:0px;left:0px;height:100%;width:100%; z-Index:-1; ">
                            </iframe>
                            {{item.streetName}} {{i.name}}
                        </div>
                        <div class="video-model">
                            <iframe class="vlcIframe"
                                    style=" position:absolute;visibility:inherit; top:0px;left:0px;height:100%;width:100%; z-Index:-1; ">
                            </iframe>
                            <div style="width: 100%;height: 100%" @click="showModel(i)">

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

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

<script>

export default {
    name: "historyMonitoring",
    data() {
        return {
            realTimeListData: [],
            url: "722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
            tabKey: "0",
            path: [],
            player: "",
            visible: false,
            modelData: []
        };
    },
    inject: ['reload'],
    mounted() {
        console.log('index mounted执行了')
        this.getRealTimeList()
        if (sessionStorage.getItem('tabKey') == null) {
            sessionStorage.setItem('tabKey', 0)
        }
        this.tabKey = sessionStorage.getItem('tabKey')
    },
    destroyed(){
        if (this.$refs.vlc) {
            for (var i = 0; i < this.$refs.vlc.length; i++) {
                this.$refs.vlc[i].playlist.stop();
            }
        }
    },
    beforeRouteLeave(to,form,next) {
        // console.log(11111111111111)
        console.log(this.$refs.vlc)
        this.$nextTick(() => {
            if (this.$refs.vlc) {
                for (var i = 0; i < this.$refs.vlc.length; i++) {
                    this.$refs.vlc[i].playlist.stop();
                }
                next(true)
            } else {
                next(true)
            }
        })
        console.log('beforeRouteLeave')
    },
    methods: {
        getRealTimeList(){
            var that=this
            this.$api.httpApi.getRealTimeList({
                data: {}
            }).then(res => {
                console.log(res.data)
                if(res.code == 200) {
                    this.realTimeListData = res.data
                    res.data.forEach(function (item) {
                        // console.log(item.cameras)
                        var $that = that
                        item.cameras.forEach(function (item) {
                            // console.log(item.rtsp)
                            $that.playVideo('video' + item.id, item.rtsp)
                        })
                    })
                }
            }).catch(err => {
                console.log(err)
            })
        },
        playVideo(id, rtsp) {
            // 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
            this.$nextTick(() => {
                setTimeout(function () {
                    var vlc = document.getElementById(`${id}`);
                    var options = new Array(":network-caching=100");//减少延迟
                    var vlcItem = vlc.playlist.add(`${rtsp}`, `${id}`, options);
                    // vlc.playlist.play()
                    vlc.playlist.playItem(vlcItem);
                    console.log(22222222222222)
                    console.log(vlc)
                }, 500)

            })
        },
        tabsChange(key) {
            console.log(key)
            sessionStorage.setItem('tabKey', key)
            this.reload()
        },
        showModel(item) {
            console.log(item)
            this.$nextTick(() => {
                this.$router.push({name: "realTimeMonitoringModel", query: {modelData: item}});
            })
        },
    },
};
</script>

<style lang='scss'>
.vxgplayer{
    margin:0!important;
}
.realTime {
    padding: 24px;
    &-position {
        display: flex;
        justify-content: space-between;
        &-box {
            flex: 1;
            display: flex;
            justify-content: space-between;
            &-btns {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
            }
            &-control {
                text-align: right;
                cursor: pointer;
                color: #55a4ff;
                .anticon {
                    transform: rotate(0deg);
                    transform-origin: center;
                    transition: all 0.2s linear;
                }

                .anticon-rotate {
                    transform: rotate(180deg);
                }
            }
        }
    }

    /*#video-cav{*/
    /*    position: fixed;*/
    /*    z-index: 999;*/
    /*    border: solid 1px skyblue;*/
    /*    width: 390px;*/
    /*    height: 219px;*/
    /*}*/
    .flex-layouts {
        display: flex;
        width: 1630px;
        flex-wrap: wrap;
    }

    .video-list {
        display: flex;

        .video-item {
            display: flex;
            width: 100%;
            height: 219px;
            position: relative;
            margin: 3px;
            cursor: pointer;
            z-index: 10;
            /*.video-obj{*/

            /*}*/
            .video-name {
                position: absolute;
                top: 15px;
                left: 15px;
                color: #ffda62;
                font-weight: 600;
                font-size: 16px;
                z-index: 10;
            }

            .video-model {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 20;
            }
        }
    }
}
</style>