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

<template>
    <div id="video">
        <div style="width: 100%;">
            <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
                <el-tab-pane label="视频监控" name="1">
                    <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?type=1" ref="videoIframe1" frameborder="0" style="width: 100%;height: 700px;"></iframe>
                                <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="历史视频" name="2">
                    <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="handleNodeClick2"
                            ref="typeTree" node-key="deviceId" highlight-current 
                            ></el-tree> 
                        </div>  
                        <div class="contant">
                            <div style="width: 100%;height: 600px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
                                <div style="width: 100%;height: 100%;position: fixed;"></div>
                                <iframe src="monitor/iframe.html?type=2" ref="videoIframe5" frameborder="0" style="width: 100%;height: 600px;"></iframe>
                                <span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span>
                            </div> 
                        </div>
                    </div>

                </el-tab-pane> 
            </el-tabs>
        </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:'1',
        deviceData:[
        ],
        deviceName1:'监控1',
        deviceName2:'监控2',
        deviceName3:'监控3',
        deviceName4:'监控4',
        titleList:[],
        devicesOptions:[],
        defaultProps: {
          children: "children",
          label: "deviceName",
          id: "deviceId"
        },
        chosenWinNo:0,
        chosenChannel:null
    };
},
created() {
    // monitor.clickLogin()
},
mounted() {
    this.getKitchenDeviceSelect();
    this.videoLogin();  
},
methods:{
    // 门禁设备选项
    getKitchenDeviceSelect(){
        getKitchenDeviceSelectApi({deviceType:1}).then((response) => {
            this.devicesOptions = response.data 
        })
    },
    // 初始化监控列表
    videoLogin(){ 
        setTimeout(() => {
            this.iframeLogin()
        }, 1000); 
    },
    //点击设备
    handleTabClick(tab){ 
        console.log(this.activeName)
        if(this.activeName=='1'){

        } 
        if(this.activeName=='2'){

        } 
    }, 
    handleNodeClick(data, node) {
        // if(this.chosenWinNo==3){
        //     this.chosenWinNo=0
        // }else{
        //     this.chosenWinNo = this.chosenWinNo+1
        // } 
        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 oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;   
        var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort; 
        oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
            iWndIndex:2,
            iStreamType: oLiveView.iStreamType,
            iChannelID: 11,
            bZeroChannel: oLiveView.bZeroChannel
        }); 
        // if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
        //     let obj = JSON.parse(data.deviceExtendInfo)
        //     console.log(obj)
        //     this.chosenChannel = 11 
           
        // }else{
        //     this.$modal.msgError("设备未绑定通道号");
        // } 
    },
    async handleNodeClick2(data, node) {
        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 oWebVideoCtrl5 = this.$refs.videoIframe5.contentWindow.WebVideoCtrl;   
        // var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
        if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
            let obj = JSON.parse(data.deviceExtendInfo)
            console.log(obj)
            this.chosenChannel = '28'
            setTimeout(() => {
                //  oWebVideoCtrl5.I_StartRealPlay(szDeviceIdentify, {
                //     iWndIndex:0,
                //     iStreamType: oLiveView.iStreamType,
                //     iChannelID: this.chosenChannel,
                //     bZeroChannel: oLiveView.bZeroChannel
                // });
            }, 500); 
        }else{
            this.$modal.msgError("设备未绑定通道号");
        } 
    }, 
    iframeLogin(){
        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 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(()=>{
                    oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
                        iWndIndex:0,
                        iStreamType: oLiveView.iStreamType,
                        iChannelID: 11,
                        bZeroChannel: oLiveView.bZeroChannel
                    });
                    oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
                        iWndIndex:1,
                        iStreamType: oLiveView.iStreamType,
                        iChannelID: 12,
                        bZeroChannel: oLiveView.bZeroChannel
                    });
                    oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
                        iWndIndex:2,
                        iStreamType: oLiveView.iStreamType,
                        iChannelID: 23,
                        bZeroChannel: oLiveView.bZeroChannel
                    });
                    oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
                        iWndIndex:3,
                        iStreamType: oLiveView.iStreamType,
                        iChannelID: 24,
                        bZeroChannel: oLiveView.bZeroChannel
                    });
                },500);
            }
        });   
        // var oWebVideoCtrl5 = this.$refs.videoIframe5.contentWindow.WebVideoCtrl; 
        // oWebVideoCtrl5.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
        //     success: function (xmlDoc) {
        //         var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
        //         setTimeout(()=>{
        //             oWebVideoCtrl5.I_StartRealPlay(szDeviceIdentify, {
        //                 iWndIndex:0,
        //                 iStreamType: oLiveView.iStreamType,
        //                 iChannelID: 22,
        //                 bZeroChannel: oLiveView.bZeroChannel
        //             }); 
        //         },500);
        //     }
        // });   
    },
    openVideo(playId){
        // this.$emit('openVideo',true,playId);
        // this.videoVisible = true;
        // monitor.clickStopRealPlay()
        // monitor.clickStartRealPlay(null,'1')
        // this.$refs.vueRef.play();//播放
    },
   
}
}
</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; 
    }
}
    
</style>