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" padding:10px>
            <a-tab-pane :key="item.streetId.toString()" :tab="item.streetName" v-for="item in realTimeListData"></a-tab-pane>
        </a-tabs>
<!--        {{cameras.length}} {{ selectTab.videoStyleRow }} * {{ selectTab.videoStyleColumn }}-->
        <a-row :gutter="20">
            <a-col
                v-for="(item, index) in cameras.slice(0, selectTab.videoStyleRow * selectTab.videoStyleColumn)"
                :span="24 / selectTab.videoStyleColumn"
                :key="index"
                :style="{
                        height: videoHeight,
                        
                        marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
                    }"
            >
                <video 
                :style="{
                        height: videoHeight,
                    }"
                
                :id="`camera${item.id}`" 
                autoplay muted ></video>
            </a-col>
        </a-row>
    </div>
</template>

<script>

import WebRtcPlayer from "../../../public/static/webrtcplayer"
export default {
    name: "realTimeMonitoring",
    components: {
        //VideoPlayer
    },
    data() {
        return {
            realTimeListData: [],
            url: "722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
            tabKey: "0",
            path: [],
            player: "",
            visible: false,
            modelData: [],
            clientHeight: 0,
            
            players: []
        };
    },
    computed: {
        selectTab() {
            return (this.realTimeListData.filter(item=> item.streetId == this.tabKey)[0] || {})
        },
        cameras() {
            return this.selectTab.cameras || [];
        },
        videoHeight() {
            return (( this.clientHeight)/ this.selectTab.videoStyleRow ) + 'px'
        },
    },
    //inject: ['reload'],
    mounted() {
        this.getClientHeight()
        this.setVideoServer()
        this.getRealTimeList()
        
        this.tabKey = sessionStorage.getItem('tabKey');

    },
    destroyed() {
        this.destory()
    },
    methods: {
        getClientHeight() {
            this.clientHeight = this.$el.clientHeight - 80;
        },
        getRealTimeList(){
            
            this.$api.httpApi.getRealTimeList({
                data: {}
            }).then(res => {
                if(res.code == 200) {
                    this.realTimeListData = res.data.reverse();
                    if (sessionStorage.getItem('tabKey') == null) {
                        console.log("tabKey"+this.realTimeListData[0].id)
                        sessionStorage.setItem('tabKey', this.realTimeListData[0].streetId)
                        this.tabKey = sessionStorage.getItem('tabKey');
                    }
                    this.$nextTick(() => {
                        this.autoPlay()
                    })
                }
                
            }).catch(err => {
                console.log(err)
            })
        },
        
        tabsChange(key) {
            sessionStorage.setItem('tabKey', key)
            this.destory()
            this.$nextTick(() => {
                this.autoPlay()
            })
            
        },
        
        autoPlay(){
            this.players = []
            for(var a of this.realTimeListData){
                for (let b of a.cameras){
                    let video = document.getElementById('camera'+b.id);
                    if(video){
                        console.log("play:"+b.id)
                        let player = new WebRtcPlayer(video,'camera'+b.id);
                        //player.play('camera'+b.id);
                        this.players.push(player)
                    }
                    
                }
                
            }
        
        },
        destory(){
            for(let player of this.players){
                console.log("stop")
                player.destroy()
            }
        },
        setVideoServer(){
            this.$api.httpApi.getVideoServer({
                data: {}
            }).then(res => {
                if(res.code == 200) {
                    WebRtcPlayer.setServer(res.data.toString());
                }
                
            }).catch(err => {
                console.log(err)
            })
        }
  
    },
};
</script>

<style lang='scss' scoped>
.realTime {
    padding: 10px;
}
</style>