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,
                    }"
                style="width: 100%;object-fit: cover;"
                :id="`camera${item.id}`" 
                autoplay muted ></video>
            </a-col>
        </a-row>
    </div>
</template>

<script>

import WebRtcPlayer from "./webrtcplayer"
export default {
    name: "historyMonitoring",
    components: {
        //VideoPlayer
    },
    data() {
        return {
            realTimeListData: [],
            url: "722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
            tabKey: "0",
            path: [],
            player: "",
            visible: false,
            modelData: [],
            clientHeight: 0,
            showVideo: false,
        };
    },
    computed: {
        selectTab() {
            return (this.realTimeListData.filter(item=> item.streetId == this.tabKey)[0] || {})
        },
        cameras() {
            return this.selectTab.cameras || [];
        },
        videoHeight() {
            return (( this.clientHeight - this.selectTab.videoStyleRow * 20 )/ this.selectTab.videoStyleRow ) + 'px'
        },
    },
    inject: ['reload'],
    mounted() {
        this.setVideoServer()
        this.getRealTimeList()
        if (sessionStorage.getItem('tabKey') == null) {
            sessionStorage.setItem('tabKey', 0)
        }
        this.tabKey = sessionStorage.getItem('tabKey');
        this.getClientHeight();
        
        // 监听界面尺寸变化
        // window.onresize = () => {
        //     this.getClientHeight();
        // }
    },
    destroyed() {
        // window.onresize = null;
    },
    methods: {
        getClientHeight() {
            this.clientHeight = this.$el.clientHeight - 80;
        },
        getRealTimeList(){
            this.showVideo = false;
            this.$api.httpApi.getRealTimeList({
                data: {}
            }).then(res => {
                if(res.code == 200) {
                    this.realTimeListData = res.data.reverse();
                    this.showVideo = true;
                    this.$nextTick(() => {
                        this.autoPlay()
                    })
                }
                
            }).catch(err => {
                console.log(err)
            })
        },
        
        tabsChange(key) {
            sessionStorage.setItem('tabKey', key)
            this.autoPlay()
        },
        showModel(item) {
            this.$nextTick(() => {
                this.$router.push({name: "realTimeMonitoringModel", query: {modelData: item}});
            })
        },
        autoPlay(){
            for(var a of this.realTimeListData){
                for (let b of a.cameras){
                    let video = document.getElementById('camera'+b.id);
                    if(video){
                        let player = new WebRtcPlayer(video,'camera'+b.id);
                        player.load('camera'+b.id);
                    }
                    
                }
                
            }
        
        },
        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>