bonus-ui/src/views/kitchen/environment/videoMonitoring/history.vue

<template>
    <div id="video">
        <div class="header" @click="getData"><span>历史视频</span></div>
        <div class="contant">
            <div style="width: 80%;height: 400px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;" > 
                <iframe src="monitor/iframe.html" ref="videoIframe1" frameborder="0" style="width: 100%;height: 100%;"></iframe>
                <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span>
            </div>
        </div>
    </div> 
</template>
<script src="./codebase/webVideoCtrl.js"></script>
<script> 
import $ from 'jquery';

export default {
name: 'videoMonitoring',
components: {
},
data() {
    return {
        deviceData:[
        ],
        deviceName1:'监控1',
        deviceName2:'监控2',
        deviceName3:'监控3',
        deviceName4:'监控4',
        titleList:[]
    };
},
created() {
    // monitor.clickLogin()
},
mounted() {
    this.getData();
    // this.iframeLoaded()
    
},
methods:{
    iframeLoaded (domId,channel){
        // console.log(domId)
                if(domId=='0'){
                    var oWebVideoCtrl = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
                    this.iframeLogin(oWebVideoCtrl,channel)
                }
                if(domId=='1'){
                    var oWebVideoCtrl = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
                    this.iframeLogin(oWebVideoCtrl,channel)
                }
                if(domId=='2'){
                    var oWebVideoCtrl = this.$refs.videoIframe3.contentWindow.WebVideoCtrl;
                    this.iframeLogin(oWebVideoCtrl,channel)
                }
                if(domId=='3'){
                    var oWebVideoCtrl = this.$refs.videoIframe4.contentWindow.WebVideoCtrl;
                    this.iframeLogin(oWebVideoCtrl,channel)
                }
    },
    iframeLogin(oWebVideoCtrl,channel){
        var oLiveView = {
                iProtocol: 1,            // protocol 1<><31>http, 2:https
                szIP: "192.168.1.10",    // protocol ip
                szPort: "80",            // protocol port
                szUsername: "admin",     // device username
                szPassword: "hzx12345", // device password
                iStreamType: 2,          // stream 1<><31>main stream  2<><32>sub-stream  3<><33>third stream  4<><34>transcode stream
                iChannelID: 1,           // channel no
                bZeroChannel: false      // zero channel
            };
        oWebVideoCtrl.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
            success: function (xmlDoc) {
                var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                setTimeout(function () {
                    oWebVideoCtrl.I_StartRealPlay(oLiveView.szIP, {
                        iStreamType: oLiveView.iStreamType,
                        iChannelID: channel,
                        bZeroChannel: oLiveView.bZeroChannel
                    });
                }, 1000);
            }
        });
    },
    openVideo(playId){
        // this.$emit('openVideo',true,playId);
        // this.videoVisible = true;
        // monitor.clickStopRealPlay()
        // monitor.clickStartRealPlay(null,'1')
        // this.$refs.vueRef.play();//播放
    },
    getData(){
        setTimeout(() => {
            this.iframeLoaded('0','8')
            this.iframeLoaded('1','16')
            this.iframeLoaded('2','17')
            this.iframeLoaded('3','32')
        }, 1000); 
    },
    changeSize(num){

    }
}
}
</script>
<style lang="scss" scoped>
#video{
    width: 100%;
    height: 100%;
    margin: 0 0.2rem;
    .header{
        display: flex;
        align-items: center;
        color: #000;
        margin-top: 20px;
        span{
            margin-left: 40px;
            font-size: 20px;
            font-weight: bold;
        }
    }
    .contant{
        width: 100%;
        height: auto;
        // height: 85%;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        padding-top: 1%;
    }




}
    
</style>