bonus-ui/src/views/kitchen/environment/videoMonitoring/history.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="handleNodeClick2"
                    ref="typeTree" node-key="deviceId" highlight-current 
                    ></el-tree> 
                </div>  
                <div class="contant">
                    <div style="display: flex;width: 100%;height: 50px;align-items: center;">
                        <div style="font-weight: bold;margin-right: 10px;margin-left: 20px;">时间范围:</div>
                        <el-date-picker
                            v-model="dateRange"
                            type="datetimerange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd HH:mm:ss" style="width: 400px"
                            :default-time="['00:00:00', '23:59:59']"
                            :picker-options="pickerOptions" >
                        </el-date-picker>
                    </div>
                    <div style="width: 100%;height: 630px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;"> 
                        <iframe src="monitor/iframe.html" ref="videoIframe2" frameborder="0" style="width: 1300px;height: 630px;"></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"
        }, 
        dateRange:this.defaultDateRange(),
        pickerOptions:{                                 
            //禁用当前日期之前的日期
            disabledDate(time) {
            //Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
               return time.getTime() > Date.now() - 8.64e7;
            }
        },
        chosenWinNo:0,
        chosenChannel:null,
        chosenChannel2:null,
    };
}, 
mounted() {
    this.getKitchenDeviceSelect();
    this.videoLogin();  
},
methods:{
    // 门禁设备选项
    getKitchenDeviceSelect(){
        getKitchenDeviceSelectApi({deviceType:1}).then((response) => {
            this.devicesOptions = response.data 
        })
    },
    // 初始化监控列表
    videoLogin(){   
        setTimeout(() => { 
            this.iframeLogin('2')  
        }, 500); 
    }, 
    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;  
        if(domId=='2'){
            var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;   
            oWebVideoCtrl2.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: 1,
                cbInitPluginComplete: function () {
                    oWebVideoCtrl2.I_InsertOBJECTPlugin("divPlugin"); 
                    oWebVideoCtrl2.I_Login(oLiveView.szIP,oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
                        success: function (xmlDoc) {  
                            // console.log(that.formatDateTime(that.dateRange[0]))
                            // console.log(that.formatDateTime(that.dateRange[1]))
                            oWebVideoCtrl2.I_StartPlayback(szDeviceIdentify, {
                                szStartTime:that.formatDateTime(that.dateRange[0]),
                                szEndTime:that.formatDateTime(that.dateRange[1]),
                                iChannelID: that.chosenChannel2,
                                iStreamType: oLiveView.iStreamType, 
                                bZeroChannel: oLiveView.bZeroChannel
                            });   
                        }
                    }); 
                }
            });  
        }
    },
    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=='2'){
            var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;   
            var iRet = oWebVideoCtrl2.I_Logout(szDeviceIdentify);
            var szInfo = ""
            if (0 == iRet) {
                szInfo = "退出成功！";  
            } else {
                szInfo = "退出失败！";
            }
            console.log(szInfo)  
        }
    }, 
    async handleNodeClick2(data) { 
        if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
            let obj = JSON.parse(data.deviceExtendInfo) 
            this.chosenChannel2 = 15 
            this.iframeLoaded2()  
        }else{
            this.$modal.msgError("设备未绑定通道号");
        } 
    },
    iframeLoaded2(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 oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl; 
        var that = this;
        oWebVideoCtrl2.I_Stop({iWndIndex:0}) 
        setTimeout(function () {
            console.log(that.formatDateTime(that.dateRange[0]))
            console.log(that.formatDateTime(that.dateRange[1]))
            oWebVideoCtrl2.I_StartPlayback(szDeviceIdentify, {
                szStartTime:that.formatDateTime(that.dateRange[0]),
                szEndTime:that.formatDateTime(that.dateRange[1]),
                iChannelID: that.chosenChannel2,
                iStreamType: oLiveView.iStreamType, 
                bZeroChannel: oLiveView.bZeroChannel
            });  
        }, 800);
    }, 
    defaultDateRange() {
        const end = new Date(new Date().toLocaleDateString());
        end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
        const start = new Date((new Date().toLocaleDateString()));
        start.setTime(start.getTime()+ 9 * 60 * 60 * 1000 - 1); 
        this.start = parseInt(start.getTime() / 1000)
        this.end = parseInt(end.getTime() / 1000)
        return [start, end]
    }, 
    //日期时间
    formatDateTime(date) {
        // 格式化为 YYYY-MM-DD
        date = new Date(date)
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
        const day = String(date.getDate()).padStart(2, '0');
        const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    } 
   
}
}
</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>