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

<template>
    <div id="video">
        <div class="header"><span>视频监控</span></div>
        <div style="width: 100%;display: flex;justify-content: space-between;">
            <div style="width: 20%;">
                <el-tree style="height: 700px; overflow: scroll"
                :data="devicesOptions" :props="defaultProps"
                :default-expand-all="true"
                :expand-on-click-node="false" @node-click="handleNodeClick"
                ref="typeTree" node-key="deviceId" highlight-current 
                ></el-tree> 
            </div>  
            <div class="contant">
                <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;" @click="chosenWindow(1)">
                    <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('1')"></div>
                    <iframe src="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 style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px" @click="chosenWindow(2)">
                    <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('2')"></div>
                    <iframe src="iframe.html" ref="videoIframe2" frameborder="0" style="width: 100%;height: 100%;"></iframe>
                    <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName2}}</span>
                </div>
                <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px" @click="chosenWindow(3)">
                    <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('3')"></div>
                    <iframe src="iframe.html" ref="videoIframe3" frameborder="0" style="width: 100%;height: 100%;"></iframe>
                    <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName3}}</span>
                </div>
                <div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px" @click="chosenWindow(4)">
                    <div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('4')"></div>
                    <iframe src="iframe.html" ref="videoIframe4" frameborder="0" style="width: 100%;height: 100%;"></iframe>
                    <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName4}}</span>
                </div>
            </div>
        </div>
        
    </div> 
</template>
<script src="./codebase/webVideoCtrl.js"></script>
<script> 
import $ from 'jquery';
import { getKitchenDeviceSelectApi } from "@/api/kitchen/devices"; 
export default {
name: 'videoMonitoring',
components: {
},
data() {
    return {
        deviceData:[
        ],
        deviceName1:'监控1',
        deviceName2:'监控2',
        deviceName3:'监控3',
        deviceName4:'监控4',
        titleList:[],
        devicesOptions:[],
        defaultProps: {
          children: "children",
          label: "deviceName",
          id: "deviceId"
        },
        chosenWinNo:1,
        chosenChannel:null
    };
},
created() {
    // monitor.clickLogin()
},
mounted() {
    this.getKitchenDeviceSelect();
    this.videoLogin(); 
    
},
methods:{
    // 门禁设备选项
    getKitchenDeviceSelect(){
        getKitchenDeviceSelectApi({deviceType:1}).then((response) => {
            this.devicesOptions = response.data 
        })
    },
    chosenWindow(num){
        this.chosenWinNo = num;
        setTimeout(() => {
            this.iframeLoaded(this.chosenWinNo,this.chosenChannel) 
        }, 500); 
    },
    async handleNodeClick(data, node) {
        console.log(data)
        if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
            let obj = JSON.parse(data.deviceExtendInfo)
            console.log(obj)
            this.chosenChannel = '28'
            setTimeout(() => {
                this.iframeLogin(this.chosenWinNo,this.chosenChannel) 
            }, 500); 
        }else{
            this.$modal.msgError("设备未绑定通道号");
        } 
      },
    iframeLoaded(domId,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
        };
        if(domId=='1'){
            var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl; 
            setTimeout(function () { 
                var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
                    iStreamType: oLiveView.iStreamType,
                    iChannelID: channel,
                    bZeroChannel: oLiveView.bZeroChannel
                });
            }, 500);
        }
        if(domId=='2'){
            var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl; 
            setTimeout(function () { 
                var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                oWebVideoCtrl2.I_StartRealPlay(szDeviceIdentify, {
                    iStreamType: oLiveView.iStreamType,
                    iChannelID: channel,
                    bZeroChannel: oLiveView.bZeroChannel
                });
            }, 500);
        }
        if(domId=='3'){
            var oWebVideoCtrl3 = this.$refs.videoIframe3.contentWindow.WebVideoCtrl;
            setTimeout(function () { 
                var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                oWebVideoCtrl3.I_StartRealPlay(szDeviceIdentify, {
                    iStreamType: oLiveView.iStreamType,
                    iChannelID: channel,
                    bZeroChannel: oLiveView.bZeroChannel
                });
            }, 500);
        }
        if(domId=='4'){
            var oWebVideoCtrl4 = this.$refs.videoIframe4.contentWindow.WebVideoCtrl;
            setTimeout(function () { 
                var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                oWebVideoCtrl4.I_StartRealPlay(szDeviceIdentify, {
                    iStreamType: oLiveView.iStreamType,
                    iChannelID: channel,
                    bZeroChannel: oLiveView.bZeroChannel
                });
            }, 500);
        }
    },
    iframeLogin(domId,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
        };
        if(domId=='1'){
            var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl; 
            oWebVideoCtrl1.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
                success: function (xmlDoc) {
                    var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                    setTimeout(function () {
                        oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
                            iStreamType: oLiveView.iStreamType,
                            iChannelID: channel,
                            bZeroChannel: oLiveView.bZeroChannel
                        });
                    }, 500);
                }
            }); 
        }
        if(domId=='2'){
            var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl; 
            oWebVideoCtrl2.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
                success: function (xmlDoc) {
                    var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                    setTimeout(function () {
                        oWebVideoCtrl2.I_StartRealPlay(szDeviceIdentify, {
                            iStreamType: oLiveView.iStreamType,
                            iChannelID: channel,
                            bZeroChannel: oLiveView.bZeroChannel
                        });
                    }, 500);
                }
            }); 
        }
        if(domId=='3'){
            var oWebVideoCtrl3 = this.$refs.videoIframe3.contentWindow.WebVideoCtrl; 
            oWebVideoCtrl3.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
                success: function (xmlDoc) {
                    var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                    setTimeout(function () {
                        oWebVideoCtrl3.I_StartRealPlay(szDeviceIdentify, {
                            iStreamType: oLiveView.iStreamType,
                            iChannelID: channel,
                            bZeroChannel: oLiveView.bZeroChannel
                        });
                    }, 500);
                }
            }); 
        }
        if(domId=='4'){
            var oWebVideoCtrl4 = this.$refs.videoIframe4.contentWindow.WebVideoCtrl; 
            oWebVideoCtrl4.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
                success: function (xmlDoc) {
                    var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                    setTimeout(function () {
                        oWebVideoCtrl4.I_StartRealPlay(szDeviceIdentify, {
                            iStreamType: oLiveView.iStreamType,
                            iChannelID: channel,
                            bZeroChannel: oLiveView.bZeroChannel
                        });
                    }, 500);
                }
            }); 
        } 
    },
    openVideo(playId){
        // this.$emit('openVideo',true,playId);
        // this.videoVisible = true;
        // monitor.clickStopRealPlay()
        // monitor.clickStartRealPlay(null,'1')
        // this.$refs.vueRef.play();//播放
    },
    videoLogin(){ 
        setTimeout(() => {
            this.iframeLogin('1','11')
            this.iframeLogin('2','12')
            this.iframeLogin('3','27')
            this.iframeLogin('4','28')
        }, 1000); 
    },
}
}
</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: 80%;
        height: auto;
        // height: 85%;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        padding-top: 1%;
    }
}
    
</style>