实时监控操作页面构图

src/App.vue

@@ -37,7 +37,7 @@ export default {
     }
 };
 </script>
-
+<script type="text/javascript" src="./utils/jsmpeg.min.js"></script>
 <style lang="scss">
 @import "style/common/reset.css";
 @import "style/common/layout";

src/api/http/http-api.js

@@ -44,6 +44,11 @@ export default  {
         url: "/camera",
         name: "编辑球机"
     },
+    getChannel: {
+        method: "POST",
+        url: "/lychee/stream/push",
+        name: "获取channel字符集"
+    },
     queryList: {
         url: '/order/list',
         name: '查询',

src/layouts/AsideMenu.vue

@@ -62,7 +62,7 @@ export default {
                 parents = this.$router.options.routes[0].children.filter(ele => {
                     if (
                         this.userInfo.permissionList.some(item => {
-                            return item.rights === ele.name && ele.name.indexOf("center") < 0;
+                            return item.rights === ele.name && ele.name.indexOf("center") < 0 && item.rights === ele.name && ele.name.indexOf("camodel") < 0;
                         })
                     ) {
                         return ele;
@@ -83,7 +83,7 @@ export default {
                 recursionRoute(parents);
             } else {
                 parents = this.$router.options.routes[0].children.filter(item => {
-                    return !item.name.startsWith("center");
+                    return !item.name.startsWith("center") && !item.name.startsWith("camodel");
                 });
             }
             this.routes = parents;

src/plugins/axios/axios.js

@@ -27,9 +27,9 @@ instance.interceptors.request.use((config) => {
 instance.interceptors.response.use((response) => {
     const res = response.data;
     // 对响应数据做点什么
-    if (res.code !== 200) {
+    if (res.code !== 200 && res.code!==0) {
         console.log(res);
-        Vue.prototype.$message.error(res.message);
+        Vue.prototype.$message.error(res.msg);
         // 未认证
         if (res.code === 401) {
             // 未登录

src/router/index.js

@@ -36,8 +36,17 @@ const routes = [{
                 icon: 'desktop',
                 name: '实时监控'
             },
-            component: () => import('@/views/realTimeMonitoring/index')
+            component: () => import('@/views/realTimeMonitoring/index'),
+
         },
+        // {
+        //     path: 'realTimeMonitoring/model',
+        //     name: 'camodel',
+        //     meta: {
+        //         name: '球机操作'
+        //     },
+        //     component: () => import('@/views/realTimeMonitoring/model')
+        // },
         {
             path: 'historyMonitoring',
             name: 'historyMonitoring',

src/views/realTimeMonitoring/index.vue

@@ -10,12 +10,50 @@
 <!--                </div>-->
 <!--            </div>-->
 <!--        </div>-->
-        <div>实时画面：</div>
+        <a-tabs default-active-key="1" slot="headerContent" v-model="tabKey">
-        <canvas id="video-cav" width="400" height="400"></canvas>
+            <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>
+        </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="300" 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="300" v-for="i in item.cameras" :key="i.id">
+                        <canvas :class="['video',i.id?'video'+i.id:'']">
+
+                        </canvas>
+                        <div class="video-name">
+                            {{item.streetName}} {{i.name}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+<!--        <canvas class="video-cav" width="400" height="400"></canvas>-->
+        <Model
+            :visible.sync="visible"
+            :modelData.sync="modelData"
+            @sure="submit"
+            @close="closeModel"
+        />
     </div>
 </template>
 
 <script>
+import Model from "./model.vue"
 export default {
     name: "realTimeMonitoring",
     data() {
@@ -23,15 +61,22 @@ export default {
             // 收起true  展开false
             controlLabel: true,
             realTimeListData:[],
-            url:'722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68',
+            url:"722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
-            path:[]
+            tabKey: "0",
+            path:[],
+            player:'',
+            visible:false,
+            modelData:[]
         };
     },
     mounted() {
         this.getRealTimeList()
-        // this.realTimeLychee()
         this.getVideos()
     },
+    destroyed(){
+        console.log('2222222')
+        this.player.destroy()
+    },
     methods: {
         // 展开收起
         handleUpDown() {
@@ -45,34 +90,68 @@ export default {
                 console.log(res.data)
                 if(res.code == 200){
                     this.realTimeListData = res.data
-                    res.data.map(function(item){
+                    res.data.forEach(function(item){
                         // console.log(item.cameras)
                         var $that = that
-                        item.cameras.map(function(item){
+                        item.cameras.forEach(function(item){
-                            console.log(item.rtsp)
+                            // console.log(item.rtsp)
-                            $that.$axios.post('/lychee/stream/push', {
+                            $that.$api.httpApi.getChannel({
+                                data:{
                                     "sourceUrl":item.rtsp,
-                                "paramBefore": "-i",
+                                    "paramBefore": "-y -i",
-                                "paramBehind": "-f mpegts -codec:v mpeg1video -s 1080*780 -b:v 1500k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
+                                    "paramBehind": "-f mpegts -codec:v mpeg1video -an -s 720*480 -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(this.path)
+                                var url = 'ws://192.168.66.56: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 => {
 
                             })
                         })
                     })
                 }
-                console.log(this.path)
+                console.log(this.realTimeListData)
             }).catch(err => {
 
             });
         },
         getVideos(){
-            var canvas = document.getElementById('video-cav')
+            // var canvas = document.querySelector('.video-cav')
-            var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+this.url
+            // var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+this.url
-            var player = new JSMpeg.Player(url, {canvas: canvas}) // eslint-disable-line no-unused-vars
+            // var player = new JSMpeg.Player(url, {
-        }
+            //     canvas: canvas,
+            //     audio: false,
+            //     pauseWhenHidden: false,
+            //     videoBufferSize: 8 * 1024 * 1024,
+            //     loop:false
+            // })
+        },
+        showModel(item){
+            console.log(11111)
+            // this.player.destroy()
+            console.log(item)
+            this.visible = true
+            // this.$router.push({path: '/realTimeMonitoring/model', query: {id: "2"}});
+        },
+        submit(visible){
+            this.visible = visible
+        },
+        closeModel(visible,data){
+            this.visible = visible
+            this.modelData=data
+        },
+    },
+    components:{
+        Model
     }
 };
 </script>
@@ -115,5 +194,35 @@ export default {
         width: 400px;
         height: 400px;
     }
+    .flex-layouts{
+        display: flex;
+        width: 1650px;
+        flex-wrap: wrap;
+    }
+    .video-list{
+        display: flex;
+        .video-item{
+            display: flex;
+            width: 100%;
+            .video-box{
+                position: relative;
+                margin: 3px;
+                .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: 300px;
+                }
+            }
+        }
+    }
 }
 </style>

src/views/realTimeMonitoring/model.vue

@@ -0,0 +1,198 @@
+<template>
+    <div v-if="isShow">
+<!--        <a-modal-->
+<!--            v-model="isShow"-->
+<!--            :title="title"-->
+<!--            @ok="handleOk"-->
+<!--            @cancel="handleCancel"-->
+<!--            ok-text="确认"-->
+<!--            cancel-text="取消"-->
+<!--            class="p-model"-->
+<!--        >-->
+
+<!--        </a-modal>-->
+        <div class="video-mask">
+            <div class="video-close" @click="handleCancel">
+                x
+            </div>
+            <div class="operation-list">
+                <div class="operation-item">
+                    <img src="@/assets/sub-icon.png" alt="">
+                    <span>变倍</span>
+                    <img src="@/assets/add-icon.png" alt="">
+                </div>
+                <div class="operation-item">
+                    <img src="@/assets/sub-icon.png" alt="">
+                    <span>变焦</span>
+                    <img src="@/assets/add-icon.png" alt="">
+                </div>
+                <div class="operation-item">
+                    <img src="@/assets/sub-icon.png" alt="">
+                    <span>光圈</span>
+                    <img src="@/assets/add-icon.png" alt="">
+                </div>
+            </div>
+            <div class="direction-list">
+                <div class="direction-item">
+                    <img src="@/assets/left-top-icon.png" alt="">
+                    <img src="@/assets/top-icon.png" alt="">
+                    <img src="@/assets/right-top-icon.png" alt="">
+                </div>
+                <div class="direction-item">
+                    <img src="@/assets/left-icon.png" alt="">
+                    <img src="@/assets/right-icon.png" alt="">
+                </div>
+                <div class="direction-item">
+                    <img src="@/assets/left-bottom-icon.png" alt="">
+                    <img src="@/assets/bottom-icon.png" alt="">
+                    <img src="@/assets/right-bottom-icon.png" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
+    labelCol: { span: 8 },    //lable长度
+    wrapperCol: { span: 14 },  //input长度
+};
+var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
+    labelCol: { span: 4 },
+    wrapperCol: { span: 8, offset: 4 },
+};
+export default {
+    props:[ 'visible', 'modelData'],
+    watch: {
+        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
+        visible: function(newVal){
+            this.isShow = newVal;  //newVal即是visible
+            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
+        },
+        modelData: function(newVal){
+            // console.log(newVal)
+            if(newVal.id){
+                this.mdata=newVal
+                this.id = newVal.id
+                // console.log('触发了watch，重新赋值')
+                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
+                    this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
+                        ip:newVal.ip,
+                        rtsp:newVal.rtsp
+                    })
+                })
+            }
+
+        },
+    },
+    data() {
+        return {
+            isShow:false,
+            title:'',
+            closable:false,//取消model模态框右上角的X号
+            formItemAcrossLayout,
+            formItemVerticalLayout,
+            confirmLoading: false,
+            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
+            id:'',
+            mdata:[]
+        };
+    },
+    mounted() {
+        console.log('mounted执行了')
+    },
+    methods: {
+        handleOk() {
+            this.confirmLoading = true;
+            setTimeout(() => {
+                this.form.validateFields((err, values) => {
+                    console.log(values)
+                    if (!err) {
+                        console.log(this.title)
+                        if(this.title=='新增球机'){
+                            this.$api.httpApi.addCamera({
+                                data:values
+                            }).then(res => {
+                                if(res.code==200){
+                                    this.$emit('sure',false)
+                                    this.$message.success('新增球机成功');
+                                }
+                            }).catch(err => {
+
+                            });
+                        }else if(this.title=='编辑球机'){
+                            values.id = this.id
+                            this.$api.httpApi.editCamera({
+                                data:values
+                            }).then(res => {
+                                if(res.code==200){
+                                    this.$emit('sure',false)
+                                    this.$message.success('编辑球机成功');
+                                }
+                            }).catch(err => {
+
+                            });
+                        }
+                    }
+                });
+                this.confirmLoading = false;
+            }, 500);
+        },
+        handleCancel() {
+            console.log('Clicked cancel button');
+            console.log(this.title);
+            this.$emit('close',false,{})
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+    .video-mask{
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: #001529;
+        z-index: 9999;
+        .video-close{
+            position: absolute;
+            right: 20px;
+            top: 20px;
+            color: #ffffff;
+            font-size: 24px;
+        }
+        .operation-list{
+            position: absolute;
+            right: 200px;
+            bottom: 20px;
+            /*width: 150px;*/
+            /*border: solid 1px blue;*/
+            .operation-item{
+                img{
+                    width: 42px;
+                }
+                span{
+                    padding: 5px 10px;
+                    background: rgba(0,0,0,0.5);
+                    font-size: 18px;
+                    color: #ffffff;
+                }
+            }
+        }
+        .direction-list{
+            position: absolute;
+            right: 30px;
+            bottom: 20px;
+            width: 150px;
+            /*border: solid 1px blue;*/
+            .direction-item{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                img{
+                    width: 42px;
+                }
+            }
+        }
+    }
+</style>