From c5340766eb4840f5b6b8c5900120ec1d3c05ea3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E9=91=AB?= <zhangxin@zhehekeji.com>
Date: Fri, 25 Dec 2020 20:44:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E5=88=86=E4=BB=A3=E7=A0=81=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/checkManage/index.vue        |   3 +
 src/views/realTimeMonitoring/index.vue | 282 ++++++++++++++++---------
 src/views/realTimeMonitoring/model.vue |  28 ++-
 vue.config.js                          |  26 +--
 4 files changed, 222 insertions(+), 117 deletions(-)

diff --git a/src/views/checkManage/index.vue b/src/views/checkManage/index.vue
index 830e0ec..2acc456 100644
--- a/src/views/checkManage/index.vue
+++ b/src/views/checkManage/index.vue
@@ -15,6 +15,9 @@
                 未盘点
             </span>
         </div>
+        <div class="">
+
+        </div>
     </div>
 </template>
 <style lang="scss" scoped>
diff --git a/src/views/realTimeMonitoring/index.vue b/src/views/realTimeMonitoring/index.vue
index 491e030..31eb1a1 100644
--- a/src/views/realTimeMonitoring/index.vue
+++ b/src/views/realTimeMonitoring/index.vue
@@ -10,40 +10,24 @@
 <!--                </div>-->
 <!--            </div>-->
 <!--        </div>-->
-        <a-tabs default-active-key="1" slot="headerContent" v-model="tabKey">
-            <a-tab-pane key="0" tab="全部" >
+        <a-tabs default-active-key="1" slot="headerContent" v-model="tabKey" @change="tabsChange">
+            <a-tab-pane key="0" tab="全部">
             </a-tab-pane>
-            <a-tab-pane :key="index+1" :tab="item.streetName" v-for="(item,index) in realTimeListData">
+            <a-tab-pane :key="(index+1).toString()" :tab="item.streetName" v-for="(item,index) in realTimeListData">
             </a-tab-pane>
         </a-tabs>
         <div class="flex-layouts">
-            <div class="video-list" v-for="(item,index) in realTimeListData" :key="index+1">
-                <!-- 对应全部的-->
-                <div v-if="tabKey == 0" class="video-item">
-                    <div class="video-box" width="400" height="225" v-for="i in item.cameras" :key="i.id" @click="showModel(i)">
-                        <canvas :class="['video',i.id?'video'+i.id:'']">
+            <div class="video-list" v-for="(item,index) in realTimeListData" :key="(index+1).toString()" v-show="tabKey==0? tabKey==0 : tabKey==(index+1).toString()">
+                <div  class="video-item" v-for="i in item.cameras" :key="i.id" @click="showModel(i)">
+                     <canvas :class="['video',i.id?'video'+i.id:'']">
 
-                        </canvas>
-                        <div class="video-name">
-                            {{item.streetName}} {{i.name}}
-                        </div>
-                    </div>
-                </div>
-                <!--对应各个巷道的-->
-                <div v-if="tabKey == index+1" class="video-item">
-                    <div class="video-box" width="400" height="225" v-for="i in item.cameras" :key="i.id" @click="showModel(i)">
-                        <canvas :class="['video',i.id?'video'+i.id:'']">
-
-                        </canvas>
-                        <div class="video-name">
-                            {{item.streetName}} {{i.name}}
-                        </div>
-                    </div>
+                     </canvas>
+                     <div class="video-name">
+                         {{item.streetName}} {{i.name}}
+                     </div>
                 </div>
             </div>
         </div>
-<!--        <h1 style="color: #40a9ff">{{num}}</h1>-->
-<!--        <canvas class="video-cav" width="480" height="270"></canvas>-->
         <Model
             :visible.sync="visible"
             :modelData.sync="modelData"
@@ -61,11 +45,98 @@ export default {
         return {
             // 收起true  展开false
             controlLabel: true,
-            realTimeListData:[],
+            realTimeListData:[{
+                "streetId": 1,
+                "streetName": "巷道1",
+                "cameras": [
+                    {
+                        "id": 13,
+                        "name": "测试球机 不要动11",
+                        "ip": "192.168.1.105",
+                        "port": 37777,
+                        "user": "admin",
+                        "password": "hzleaper123",
+                        "rtsp": "rtsp://admin:hzleaper123@192.168.1.105:554/cam/realmonitor?channel=1&subtype=0",
+                        "position": "222",
+                        "focusing": "123",
+                        "aperture": "123",
+                        "multiple": 111,
+                        "updateTime": "2020-12-25T13:50:32"
+                    },
+                    {
+                        "id": 14,
+                        "name": "测试球机 不要动106",
+                        "ip": "192.168.1.106",
+                        "port": 37777,
+                        "user": "admin",
+                        "password": "hzleaper123",
+                        "rtsp": "rtsp://admin:hzleaper123@192.168.1.106:554/cam/realmonitor?channel=1&subtype=0",
+                        "position": "222",
+                        "focusing": "123",
+                        "aperture": "123",
+                        "multiple": 111,
+                        "updateTime": "2020-12-25T13:50:47"
+                    }
+                ]
+            },
+            {
+                "streetId": 36,
+                "streetName": "巷道2",
+                "cameras": [
+                    {
+                        "id": 15,
+                        "name": "测试球机 不要动107",
+                        "ip": "192.168.1.107",
+                        "port": 37777,
+                        "user": "admin",
+                        "password": "hzleaper123",
+                        "rtsp": "rtsp://admin:hzleaper123@192.168.1.107:554/cam/realmonitor?channel=1&subtype=0",
+                        "position": "222",
+                        "focusing": "123",
+                        "aperture": "123",
+                        "multiple": 111,
+                        "updateTime": "2020-12-25T13:50:55"
+                    },
+                    {
+                        "id": 16,
+                        "name": "测试球机 不要动108",
+                        "ip": "192.168.1.108",
+                        "port": 37777,
+                        "user": "admin",
+                        "password": "hzleaper123",
+                        "rtsp": "rtsp://admin:hzleaper123@192.168.1.108:554/cam/realmonitor?channel=1&subtype=0",
+                        "position": "222",
+                        "focusing": "123",
+                        "aperture": "123",
+                        "multiple": 111,
+                        "updateTime": "2020-12-25T13:51:04"
+                    }
+                ]
+            },
+            {
+                "streetId": 37,
+                "streetName": "gge",
+                "cameras": [
+                    {
+                        "id": 17,
+                        "name": "测试球机 不要动111",
+                        "ip": "192.168.1.111",
+                        "port": 37777,
+                        "user": "admin",
+                        "password": "hzleaper123",
+                        "rtsp": "rtsp://admin:admin123@192.168.1.111:554/cam/realmonitor?channel=1&subtype=0",
+                        "position": "222",
+                        "focusing": "123",
+                        "aperture": "123",
+                        "multiple": 111,
+                        "updateTime": "2020-12-25T13:51:18"
+                    }
+                ]
+            }],
             url:"722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
             tabKey: "0",
             path:[],
-            player:'',
+            player:"",
             visible:false,
             modelData:[],
             timer:'',
@@ -75,7 +146,8 @@ export default {
     inject: ['reload'],
     mounted() {
         this.getRealTimeList()
-        // this.getVideos()
+        console.log('index mounted执行了')
+        // this.getSdVideos()
         this.timerFn()
     },
     destroyed(){
@@ -88,48 +160,72 @@ export default {
         // handleUpDown() {
         //     this.controlLabel = !this.controlLabel;
         // },
+        getSdVideos(channel,id,that){
+            console.log('首页getSdVideos方法执行了')
+            // var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+channel
+            var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+ channel
+            var player = new JSMpeg.Player(url, {
+                canvas: document.querySelector('.video'+id),
+                audio: false,
+                pauseWhenHidden: false,
+                videoBufferSize: 16 * 1024 * 1024,
+                loop:false,
+                onPlay: function() {
+                    //开始播放事件回调
+                    console.log('play')
+                },
+                onEnded: function() {
+                    //播放完成事件回调
+                    console.log('end')
+                },
+                onPause:function(){
+                    //暂停时的回调
+                    console.log('pause')
+                },
+                onVideoDecode:function(){
+                    //–在每个解码和渲染的视频帧之后调用的回调
+                }
+
+            })
+            player.play()
+            return that.player=player
+        },
         getRealTimeList(){
             var that=this
-            this.$api.httpApi.getRealTimeList({
-                data: {}
-            }).then(res => {
-                console.log(res.data)
-                if(res.code == 200){
-                    this.realTimeListData = res.data
-                    res.data.forEach(function(item){
-                        // console.log(item.cameras)
-                        var $that = that
-                        item.cameras.forEach(function(item){
-                            // console.log(item.rtsp)
-                            $that.$api.httpApi.getChannel({
-                                data:{
-                                    "sourceUrl":item.rtsp,
-                                    "paramBefore": "-y -i",
-                                    "paramBehind": "-f mpegts -vcodec mpeg1video -an -s 480*270 -b:v 1000k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
-                                }
-                            }).then(res => {
-                                console.log(res.data)
-                                var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel
-                                // var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+res.data.channel
-                                var player = new JSMpeg.Player(url, {
-                                    canvas: document.querySelector('.video'+item.id),
-                                    audio: false,
-                                    pauseWhenHidden: false,
-                                    videoBufferSize: 8 * 1024 * 1024,
-                                    loop:false,
-                                })
-                                player.play()
-                                return $that.player=player
-                            }).catch(err => {
-
-                            })
-                        })
+            // this.$api.httpApi.getRealTimeList({
+            //     data: {}
+            // }).then(res => {
+            //     console.log(res.data)
+            //     if(res.code == 200){
+            //         this.realTimeListData = res.data
+            console.log('首页getRealTimeList方法执行了')
+            that.realTimeListData.forEach(function(item){
+                // console.log(item.cameras)
+                var $that = that
+                console.log('进来第一层循环了')
+                item.cameras.forEach(function(item){
+                    // console.log(item.rtsp)
+                    console.log('进来第二层循环了')
+                    $that.$api.httpApi.getChannel({
+                        data:{
+                            "clarity":"SD", //标清SD
+                            "sourceUrl":item.rtsp,
+                            "paramBefore": "-y -i",
+                            "paramBehind": "-f mpegts -codec:v mpeg1video -an -s 400*225 -b:v 500k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
+                        }
+                    }).then(res => {
+                        console.log(res.data)
+                        console.log('首页push调用channel执行了')
+                        $that.getSdVideos(res.data.channel,item.id,$that)
+                    }).catch(err => {
+                        console.log(err)
                     })
-                }
-                console.log(this.realTimeListData)
-            }).catch(err => {
+                })
+            })
 
-            });
+            // }).catch(err => {
+            // console.log(err)
+            // })
         },
         timerFn(){
             const that=this
@@ -142,21 +238,14 @@ export default {
                 }
             },1000)
         },
-        // getVideos(){
-        //     var canvas = document.querySelector('.video-cav')
-        //     var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+this.url
-        //     var player = new JSMpeg.Player(url, {
-        //         canvas: canvas,
-        //         audio: false,
-        //         pauseWhenHidden: false,
-        //         videoBufferSize: 8 * 1024 * 1024,
-        //         loop:false
-        //     })
-        // },
+        tabsChange(key){
+            console.log(key)
+        },
         showModel(item){
             console.log(11111)
-            this.player= this.player.destroy()
             clearInterval(this.timer)
+            this.player= this.player.destroy()
+            document.querySelector('.video').remove();
             console.log(item)
             this.visible = true
             this.modelData=item
@@ -218,30 +307,29 @@ export default {
         display: flex;
         width: 1630px;
         flex-wrap: wrap;
+        position: fixed
     }
     .video-list{
         display: flex;
         .video-item{
             display: flex;
             width: 100%;
-            .video-box{
-                position: relative;
-                margin: 3px;
-                cursor: pointer;
-                .video-name{
-                    position: absolute;
-                    top: 10px;
-                    left: 10px;
-                    color: #ffda62;
-                    font-weight: 600;
-                    font-size: 17px;
-                }
-                .video{
-                    border: solid 1px #000000;
-                    background: #001529;
-                    width: 400px;
-                    height: 225px;
-                }
+            position: relative;
+            margin: 3px;
+            cursor: pointer;
+            .video-name{
+                position: absolute;
+                top: 10px;
+                left: 10px;
+                color: #ffda62;
+                font-weight: 600;
+                font-size: 17px;
+            }
+            .video{
+                border: solid 1px #000000;
+                background: #001529;
+                width: 400px;
+                height: 225px;
             }
         }
     }
diff --git a/src/views/realTimeMonitoring/model.vue b/src/views/realTimeMonitoring/model.vue
index 8ada40f..082fb13 100644
--- a/src/views/realTimeMonitoring/model.vue
+++ b/src/views/realTimeMonitoring/model.vue
@@ -78,7 +78,7 @@ export default {
                 console.log('触发了watch，重新赋值')
                 this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
                     console.log(newVal.rtsp)
-                    this.request(newVal)
+                    this.getHdVideos(newVal)
                 })
             }
 
@@ -128,7 +128,7 @@ export default {
         //         this.isRouter = true
         //         console.log(this.mdata)
         //         this.player= this.player.destroy()
-        //         this.request(this.mdata)
+        //         this.getHdVideos(this.mdata)
         //     })
         // },
         handleCancel() {
@@ -140,25 +140,39 @@ export default {
                 that.$emit('close',false,{})
             },500)
         },
-        request(data){
+        getHdVideos(data){
             const that=this
             this.$api.httpApi.getChannel({
                 data:{
+                    "clarity":"HD", //高清HD
                     "sourceUrl":data.rtsp,
                     "paramBefore": "-y -i",
-                    "paramBehind": "-f mpegts -vcodec mpeg1video -an -s 1707*960 -b:v 1000k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
+                    "paramBehind": "-f mpegts -codec:v mpeg1video -an -s 1707*960 -b:v 3000k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
                 }
             }).then(res => {
                 console.log(res.data)
-                var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel
-                // var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+res.data.channel
+                console.log('我是大屏视频回调')
+                // var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel
+                var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+res.data.channel
                 var player = new JSMpeg.Player(url, {
                     canvas: document.querySelector('.video-canvas'),
                     audio: false,
                     pauseWhenHidden: false,
-                    videoBufferSize: 8 * 1024 * 1024,
+                    videoBufferSize: 16 * 1024 * 1024,
                     loop:false,
                 })
+                player.play();
+                // var playvideotimer=setInterval(function(){
+                //     var currentTime=player.currentTime;
+                //     console.log(currentTime);
+                //     if(currentTime>=3){
+                //         clearInterval(playvideotimer)
+                //         player.destroy();
+                //         document.querySelector('.video-canvas').remove();
+                //     }
+                // },60)
+
+
                 return that.player=player
             }).catch(err => {
 
diff --git a/vue.config.js b/vue.config.js
index 574a1d1..2c1d4b3 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -16,17 +16,17 @@ module.exports = {
         },
         port: 8008
     },
-    configureWebpack: config => {
-        // 生产去除日志
-        if (process.env.NODE_ENV === 'production') {
-            config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
-            config.optimization.minimizer[0].options.terserOptions.compress.drop_console =
-                true
-            config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger =
-                true
-            config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = [
-                'console.log'
-            ]
-        }
-    },
+    // configureWebpack: config => {
+    //     // 生产去除日志
+    //     if (process.env.NODE_ENV === 'production') {
+    //         config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
+    //         config.optimization.minimizer[0].options.terserOptions.compress.drop_console =
+    //             true
+    //         config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger =
+    //             true
+    //         config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = [
+    //             'console.log'
+    //         ]
+    //     }
+    // },
 };