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" @click="showModel(i)">
                     <canvas :class="['video',i.id?'video'+i.id:'']">

                     </canvas>
                     <div class="video-name">
                         {{item.streetName}} {{i.name}}
                     </div>
                </div>
            </div>
        </div>
        <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:[{
                "streetId": 1,
                "streetName": "巷道1",
                "cameras": [
                    {
                        "id": 13,
                        "name": "测试球机 不要动11",
                        "ip": "192.168.1.105",
                        "port": 37777,
                        "user": "admin",
                        "password": "hzleaper123",
                        "rtsp": "rtsp://admin:hzleaper123@192.168.1.105:554/cam/realmonitor?channel=1&subtype=0",
                        "position": "222",
                        "focusing": "123",
                        "aperture": "123",
                        "multiple": 111,
                        "updateTime": "2020-12-25T13:50:32"
                    },
                    {
                        "id": 14,
                        "name": "测试球机 不要动106",
                        "ip": "192.168.1.106",
                        "port": 37777,
                        "user": "admin",
                        "password": "hzleaper123",
                        "rtsp": "rtsp://admin:hzleaper123@192.168.1.106:554/cam/realmonitor?channel=1&subtype=0",
                        "position": "222",
                        "focusing": "123",
                        "aperture": "123",
                        "multiple": 111,
                        "updateTime": "2020-12-25T13:50:47"
                    }
                ]
            },
            {
                "streetId": 36,
                "streetName": "巷道2",
                "cameras": [
                    {
                        "id": 15,
                        "name": "测试球机 不要动107",
                        "ip": "192.168.1.107",
                        "port": 37777,
                        "user": "admin",
                        "password": "hzleaper123",
                        "rtsp": "rtsp://admin:hzleaper123@192.168.1.107:554/cam/realmonitor?channel=1&subtype=0",
                        "position": "222",
                        "focusing": "123",
                        "aperture": "123",
                        "multiple": 111,
                        "updateTime": "2020-12-25T13:50:55"
                    },
                    {
                        "id": 16,
                        "name": "测试球机 不要动108",
                        "ip": "192.168.1.108",
                        "port": 37777,
                        "user": "admin",
                        "password": "hzleaper123",
                        "rtsp": "rtsp://admin:hzleaper123@192.168.1.108:554/cam/realmonitor?channel=1&subtype=0",
                        "position": "222",
                        "focusing": "123",
                        "aperture": "123",
                        "multiple": 111,
                        "updateTime": "2020-12-25T13:51:04"
                    }
                ]
            },
            {
                "streetId": 37,
                "streetName": "gge",
                "cameras": [
                    {
                        "id": 17,
                        "name": "测试球机 不要动111",
                        "ip": "192.168.1.111",
                        "port": 37777,
                        "user": "admin",
                        "password": "hzleaper123",
                        "rtsp": "rtsp://admin:admin123@192.168.1.111:554/cam/realmonitor?channel=1&subtype=0",
                        "position": "222",
                        "focusing": "123",
                        "aperture": "123",
                        "multiple": 111,
                        "updateTime": "2020-12-25T13:51:18"
                    }
                ]
            }],
            url:"722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
            tabKey: "0",
            path:[],
            player:"",
            visible:false,
            modelData:[],
            timer:'',
            num:240
        };
    },
    inject: ['reload'],
    mounted() {
        this.getRealTimeList()
        console.log('index mounted执行了')
        // this.getSdVideos()
        this.timerFn()
    },
    destroyed(){
        console.log('2222222')
        // this.player.destroy()
        clearInterval(this.timer)
    },
    methods: {
        // 展开收起
        // handleUpDown() {
        //     this.controlLabel = !this.controlLabel;
        // },
        getSdVideos(channel,id,that){
            console.log('首页getSdVideos方法执行了')
            // var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+channel
            var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+ channel
            var player = new JSMpeg.Player(url, {
                canvas: document.querySelector('.video'+id),
                audio: false,
                pauseWhenHidden: false,
                videoBufferSize: 16 * 1024 * 1024,
                loop:false,
                onPlay: function() {
                    //开始播放事件回调
                    console.log('play')
                },
                onEnded: function() {
                    //播放完成事件回调
                    console.log('end')
                },
                onPause:function(){
                    //暂停时的回调
                    console.log('pause')
                },
                onVideoDecode:function(){
                    //–在每个解码和渲染的视频帧之后调用的回调
                }

            })
            player.play()
            return that.player=player
        },
        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方法执行了')
            that.realTimeListData.forEach(function(item){
                // console.log(item.cameras)
                var $that = that
                console.log('进来第一层循环了')
                item.cameras.forEach(function(item){
                    // console.log(item.rtsp)
                    console.log('进来第二层循环了')
                    $that.$api.httpApi.getChannel({
                        data:{
                            "clarity":"SD", //标清SD
                            "sourceUrl":item.rtsp,
                            "paramBefore": "-y -i",
                            "paramBehind": "-f mpegts -codec:v mpeg1video -an -s 400*225 -b:v 500k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
                        }
                    }).then(res => {
                        console.log(res.data)
                        console.log('首页push调用channel执行了')
                        $that.getSdVideos(res.data.channel,item.id,$that)
                    }).catch(err => {
                        console.log(err)
                    })
                })
            })

            // }).catch(err => {
            // console.log(err)
            // })
        },
        timerFn(){
            const that=this
            this.timer = setInterval(function () {
                that.num = that.num-1;
                console.log(that.num)
                if(that.num == -1){
                    that.reload() //局部刷新
                    that.num = 240
                }
            },1000)
        },
        tabsChange(key){
            console.log(key)
        },
        showModel(item){
            console.log(11111)
            clearInterval(this.timer)
            this.player= this.player.destroy()
            document.querySelector('.video').remove();
            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: 1630px;
        flex-wrap: wrap;
        position: fixed
    }
    .video-list{
        display: flex;
        .video-item{
            display: flex;
            width: 100%;
            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>