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">
            <a-tab-pane key="0" tab="全部" >
            </a-tab-pane>
            <a-tab-pane :key="index+1" :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">
                <!-- 对应全部的-->
                <div v-if="tabKey == 0" class="video-item">
                    <div class="video-box" width="400" height="225" v-for="i in item.cameras" :key="i.id" @click="showModel(i)">
                        <canvas :class="['video',i.id?'video'+i.id:'']">

                        </canvas>
                        <div class="video-name">
                            {{item.streetName}} {{i.name}}
                        </div>
                    </div>
                </div>
                <!--对应各个巷道的-->
                <div v-if="tabKey == index+1" class="video-item">
                    <div class="video-box" width="400" height="225" v-for="i in item.cameras" :key="i.id" @click="showModel(i)">
                        <canvas :class="['video',i.id?'video'+i.id:'']">

                        </canvas>
                        <div class="video-name">
                            {{item.streetName}} {{i.name}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!--        <canvas class="video-cav" width="480" height="270"></canvas>-->
        <Model
            :visible.sync="visible"
            :modelData.sync="modelData"
            @sure="submit"
            @close="closeModel"
        />
    </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:[]
        };
    },
    mounted() {
        this.getRealTimeList()
        this.getVideos()
    },
    destroyed(){
        console.log('2222222')
        this.player.destroy()
    },
    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
                    res.data.forEach(function(item){
                        // console.log(item.cameras)
                        var $that = that
                        item.cameras.forEach(function(item){
                            // console.log(item.rtsp)
                            $that.$api.httpApi.getChannel({
                                data:{
                                    "sourceUrl":item.rtsp,
                                    "paramBefore": "-y -i",
                                    "paramBehind": "-f mpegts -codec:v mpeg1video -an -s 480*270 -b:v 1000k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
                                }
                            }).then(res => {
                                console.log(res.data)
                                var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel
                                var player = new JSMpeg.Player(url, {
                                    canvas: document.querySelector('.video'+item.id),
                                    audio: false,
                                    pauseWhenHidden: false,
                                    videoBufferSize: 8 * 1024 * 1024,
                                    loop:false,
                                })
                                player.play()
                                return $that.player=player
                            }).catch(err => {

                            })
                        })
                    })
                }
                console.log(this.realTimeListData)
            }).catch(err => {

            });
        },
        getVideos(){
            // var canvas = document.querySelector('.video-cav')
            // var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+this.url
            // var player = new JSMpeg.Player(url, {
            //     canvas: canvas,
            //     audio: false,
            //     pauseWhenHidden: false,
            //     videoBufferSize: 8 * 1024 * 1024,
            //     loop:false
            // })
        },
        showModel(item){
            console.log(11111)
            this.player.destroy()
            console.log(item)
            this.visible = true
            this.modelData=item
            // this.$router.push({path: '/realTimeMonitoring/model', query: {id: "2"}});
        },
        submit(visible){
            this.visible = visible
        },
        closeModel(visible,data){
            this.visible = visible
            this.modelData=data
        },
    },
    components:{
        Model
    }
};
</script>

<style lang='scss'>
.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: 400px;
        height: 225px;
    }
    .flex-layouts{
        display: flex;
        width: 1550px;
        flex-wrap: wrap;
    }
    .video-list{
        display: flex;
        .video-item{
            display: flex;
            width: 100%;
            .video-box{
                position: relative;
                margin: 3px;
                cursor: pointer;
                .video-name{
                    position: absolute;
                    top: 10px;
                    left: 10px;
                    color: #ffda62;
                    font-weight: 600;
                    font-size: 17px;
                }
                .video{
                    border: solid 1px #000000;
                    background: #001529;
                    width: 400px;
                    height: 225px;
                }
            }
        }
    }
}
</style>