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="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-player
                    v-if="showVideo"
                    @showModel="showModel(item)"
                    :src="item.m3u8">
                </video-player>
            </a-col>
        </a-row>
    </div>
</template>

<script>

import VideoPlayer from "./VideoPlayer";
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.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;
                }
            }).catch(err => {
                console.log(err)
            })
        },
        playVideo(id, rtsp) {
            // 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
            this.$nextTick(() => {
                this.$refs.video.forEach(video=> {
                    video.play();
                })
            })
        },
        tabsChange(key) {
            sessionStorage.setItem('tabKey', key)
            this.reload()
        },
        showModel(item) {
            this.$nextTick(() => {
                this.$router.push({name: "realTimeMonitoringModel", query: {modelData: item}});
            })
        },
    },
};
</script>

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