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

<template>
    <div class="realTime bg-white">
<!--        <div class="realTime-position">-->
<!--            <div class="realTime-position-label">选择位置：</div>-->
<!--            <div class="realTime-position-box">-->
<!--                <div class="realTime-position-box-btns"></div>-->
<!--                <div class="realTime-position-box-control" @click="handleUpDown">-->
<!--                    {{controlLabel ? '收起' : '展开'}}-->
<!--                    <a-icon type="up" :class="{'anticon-rotate': !controlLabel}"></a-icon>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <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()" v-show="tabKey==0? tabKey==0 : tabKey==(index+1).toString()">
                <div  class="video-item" v-for="i in item.cameras" :key="i.id">
<!--                     <canvas :class="['video',i.id?'video'+i.id:'']">-->

<!--                     </canvas>-->
                        <div class="vxgplayer" :id="'video'+i.id"
                             :url="i.rtsp"
                             autostart
                             avsync
                             nmf-src="/video_play_plugins/pnacl/Release/media_player.nmf"
                             nmf-path="media_player.nmf"
                             width="390" height="219"
                             latency="0"
                        >
                        </div>
                     <div class="video-name">
                         {{item.streetName}} {{i.name}}
                     </div>
                    <div class="video-model" @click="showModel(i)">

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

        <Model
            :visible.sync="visible"
            :modelData.sync="modelData"
            @close="closeModel"
        />
<!--        <div class="vxgplayer" id="video"-->
<!--             url="rtsp://admin:admin123@192.168.66.108:554/cam/realmonitor?channel=1&subtype=0"-->
<!--             autostart-->
<!--             controls-->
<!--             avsync-->
<!--             nmf-src="video_play_plugins/pnacl/Release/media_player.nmf"-->
<!--             nmf-path="media_player.nmf"-->
<!--             width="400" height="227"-->
<!--             latency="0"-->
<!--        >-->
<!--        </div>-->

    </div>
</template>

<script>
import Model from "./model.vue"
export default {
    name: "realTimeMonitoring",
    data() {
        return {
            // 收起true  展开false
            controlLabel: true,
            realTimeListData:[],
            url:"722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
            tabKey: "0",
            path:[],
            player:"",
            visible:false,
            modelData:[],
        };
    },
    inject: ['reload'],
    mounted() {
        console.log('index mounted执行了')
        this.getRealTimeList()
        // this.getSdVideos()
    },
    destroyed(){
        console.log('2222222')
    },
    methods: {
        // 展开收起
        // handleUpDown() {
        //     this.controlLabel = !this.controlLabel;
        // },
        getRealTimeList(){
            var that=this
            this.$api.httpApi.getRealTimeList({
                data: {}
            }).then(res => {
                console.log(res.data)
                if(res.code == 200) {
                    this.realTimeListData = res.data
                    console.log('首页getRealTimeList方法执行了')
                    res.data.forEach(function (item) {
                        // console.log(item.cameras)
                        var $that = that
                        console.log('进来第一层循环了')
                        item.cameras.forEach(function (item) {
                            // console.log(item.rtsp)
                            console.log('进来第二层循环了')
                            $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(() => {
                // window.vxgplayer('vxg_media_player1').stop();
                window.vxgplayer(id).src(rtsp);
                window.vxgplayer(id).play();
            })
        },
        tabsChange(key){
            console.log(key)
        },
        showModel(item){
            console.log(11111)
            console.log(item)
            this.visible = true
            this.modelData=item
            console.log(vxgplayer('video'+item.id))
            // vxgplayer('video'+item.id).fullscreen()
        },
        closeModel(visible,data){
            this.visible = visible
            this.modelData=data
            // vxgplayer('video'+data.id).changedFullscreen()
        }
    },
    components:{
        Model
    }
};
</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%;
            position: relative;
            margin: 3px;
            cursor: pointer;
            z-index: 10;
            .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: 10;
            }
            /*.video{*/
            /*    border: solid 1px #000000;*/
            /*    background: #001529;*/
            /*    width: 400px;*/
            /*    height: 225px;*/
            /*}*/
        }
    }
}
</style>