视频监控2

2025-06-26 18:05:31 +08:00 · 2025-06-26 18:05:31 +08:00 · cd780e7a7e
parent 988d7eaa76
commit cd780e7a7e
1 changed files with 136 additions and 0 deletions
--- a/src/views/kitchen/environment/videoMonitoring/history.vue
+++ b/src/views/kitchen/environment/videoMonitoring/history.vue
@ -0,0 +1,136 @@
+<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="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<EFBFBD><EFBFBD>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<EFBFBD><EFBFBD>main stream  2<EFBFBD><EFBFBD>sub-stream  3<EFBFBD><EFBFBD>third stream  4<EFBFBD><EFBFBD>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>