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

<template>
    <div id="video">
        <div style="width: 100%;"> 
            <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: 100%;height: 700px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;"> 
                        <!-- <div style="width: 100%;height: 100%;position: fixed;"></div> -->
                        <iframe src="monitor/iframe.html" ref="videoIframe1" frameborder="0" style="width: 100%;height:700px;"></iframe> 
                    </div> 
                </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 {
        activeName:'2',
        deviceData:[
        ], 
        titleList:[],
        devicesOptions:[],
        defaultProps: {
          children: "children",
          label: "deviceName",
          id: "deviceId"
        },  
        chosenWinNo:0,
        chosenChannel:null, 
    };
}, 
mounted() {
    this.getKitchenDeviceSelect();
    this.videoLogin();  
},
methods:{
    // 门禁设备选项
    getKitchenDeviceSelect(){
        getKitchenDeviceSelectApi({deviceType:1}).then((response) => {
            this.devicesOptions = response.data 
        })
    },
    // 初始化监控列表
    videoLogin(){  
        setTimeout(() => { 
            this.iframeLogin()  
        }, 1000);  
    }, 
    iframeLogin(domId){
        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
        }
        var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;   
        var that = this; 
        var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;   
        oWebVideoCtrl1.I_InitPlugin(1300,700, {
            bWndFull: true,//<2F>Ƿ<EFBFBD>֧<EFBFBD>ֵ<EFBFBD><D6B5><EFBFBD><EFBFBD><EFBFBD>˫<EFBFBD><CBAB>ȫ<EFBFBD><C8AB><EFBFBD><EFBFBD>Ĭ<EFBFBD><C4AC>֧<EFBFBD><D6A7> true:֧<><D6A7> false:<3A><>֧<EFBFBD><D6A7>
            iWndowType: 2,
            cbInitPluginComplete: function () {
                oWebVideoCtrl1.I_InsertOBJECTPlugin("divPlugin"); 
                oWebVideoCtrl1.I_Login(oLiveView.szIP,oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
                    success: function (xmlDoc) { 
                        setTimeout(function () {
                            oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
                                iRtspPort: oLiveView.szPort,
                                iWndIndex:0,
                                iStreamType: oLiveView.iStreamType,
                                iChannelID: 15,
                                bZeroChannel: oLiveView.bZeroChannel
                            });
                            oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
                                iRtspPort: oLiveView.szPort,
                                iWndIndex:1,
                                iStreamType: oLiveView.iStreamType,
                                iChannelID: 16,
                                bZeroChannel: oLiveView.bZeroChannel
                            });
                            oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
                                iRtspPort: oLiveView.szPort,
                                iWndIndex:2,
                                iStreamType: oLiveView.iStreamType,
                                iChannelID: 21,
                                bZeroChannel: oLiveView.bZeroChannel
                            });
                            oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
                                iRtspPort: oLiveView.szPort,
                                iWndIndex:3,
                                iStreamType: oLiveView.iStreamType,
                                iChannelID: 22,
                                bZeroChannel: oLiveView.bZeroChannel
                            });
                        }, 500);
                    }
                }); 
            },
            cbSelWnd: function (xmlDoc) { 
                let WndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);   
                var szInfo = "当前选择的窗口编号：" + WndIndex;
                that.chosenWinNo = WndIndex;  
            },
        });  
    },
    iframeLogout(domId){
        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
        }
        var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;  
        if(domId=='1'){
            var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;   
            var iRet = oWebVideoCtrl1.I_Logout(szDeviceIdentify);
            var szInfo = ""
            if (0 == iRet) {
                szInfo = "退出成功！"; 
            } else {
                szInfo = "退出失败！";
            }
            console.log(szInfo)
        } 
    },
    async handleNodeClick(data) { 
        if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
            let obj = JSON.parse(data.deviceExtendInfo)  
            this.chosenChannel = 15
            setTimeout(() => { 
                this.iframeLoaded(this.chosenWinNo,this.chosenChannel) 
            }, 500); 
        }else{
            this.$modal.msgError("设备未绑定通道号");
        } 
    },
    iframeLoaded(WinNo,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
        }
        var szDeviceIdentify = oLiveView.szIP; 
        var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl; 
        oWebVideoCtrl1.I_Stop({ 
            iWndIndex:WinNo
        }) 
        setTimeout(function () {
            oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
                iRtspPort: oLiveView.szPort,
                iWndIndex:WinNo,
                iStreamType: oLiveView.iStreamType,
                iChannelID: Channel,
                bZeroChannel: oLiveView.bZeroChannel
            });  
        }, 800);
    },  
   
}
}
</script>
<style lang="scss" scoped>
#video{
    width: 100%;
    height: 100%;
    margin: 0 0.2rem;
    .header{
        display: flex;
        align-items: center;
        color: #000;
        margin-top: 10px;
        span{
            margin-left: 40px;
            font-size: 20px;
            font-weight: bold;
        }
    }
    .contant{
        width: 1350px;
        height: auto;
        // height: 85%;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap; 
    }
}
    
</style>