diff --git a/dist.zip b/dist.zip
deleted file mode 100644
index a7007f7..0000000
Binary files a/dist.zip and /dev/null differ
diff --git a/src/views/realTimeMonitoring/index.vue b/src/views/realTimeMonitoring/index.vue
index ccb0136..181a1fe 100644
--- a/src/views/realTimeMonitoring/index.vue
+++ b/src/views/realTimeMonitoring/index.vue
@@ -20,7 +20,7 @@
             <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)">
+                    <div class="video-box" width="480" height="270" v-for="i in item.cameras" :key="i.id" @click="showModel(i)">
                         <canvas :class="['video',i.id?'video'+i.id:'']">
 
                         </canvas>
@@ -31,7 +31,7 @@
                 </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">
+                    <div class="video-box" width="480" height="270" v-for="i in item.cameras" :key="i.id">
                         <canvas :class="['video',i.id?'video'+i.id:'']">
 
                         </canvas>
@@ -42,7 +42,7 @@
                 </div>
             </div>
         </div>
-<!--        <canvas class="video-cav" width="400" height="400"></canvas>-->
+<!--        <canvas class="video-cav" width="480" height="270"></canvas>-->
         <Model
             :visible.sync="visible"
             :modelData.sync="modelData"
@@ -99,7 +99,7 @@ export default {
                                 data:{
                                     "sourceUrl":item.rtsp,
                                     "paramBefore": "-y -i",
-                                    "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"
+                                    "paramBehind": "-f mpegts -codec:v 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)
@@ -140,6 +140,7 @@ export default {
             this.player.destroy()
             console.log(item)
             this.visible = true
+            this.modelData=item
             // this.$router.push({path: '/realTimeMonitoring/model', query: {id: "2"}});
         },
         submit(visible){
@@ -191,8 +192,8 @@ export default {
         position: fixed;
         z-index: 999;
         border: solid 1px skyblue;
-        width: 400px;
-        height: 400px;
+        width: 480px;
+        height: 270px;
     }
     .flex-layouts{
         display: flex;
@@ -218,8 +219,8 @@ export default {
                 .video{
                     border: solid 1px #000000;
                     background: #001529;
-                    width: 400px;
-                    height: 300px;
+                    width: 480px;
+                    height: 270px;
                 }
             }
         }
diff --git a/src/views/realTimeMonitoring/model.vue b/src/views/realTimeMonitoring/model.vue
index af5c390..dfd9a17 100644
--- a/src/views/realTimeMonitoring/model.vue
+++ b/src/views/realTimeMonitoring/model.vue
@@ -12,6 +12,7 @@
 
 <!--        </a-modal>-->
         <div class="video-mask">
+            <canvas class="video-canvas"></canvas>
             <div class="video-close" @click="handleCancel">
                 x
             </div>
@@ -39,8 +40,8 @@
                     <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="">
+                    <img src="@/assets/left-icon.png" alt="" @mousedown="leftStart" @mouseup="leftStop">
+                    <img src="@/assets/right-icon.png" alt="" @mousedown="rightStart" @mouseup="rightStop">
                 </div>
                 <div class="direction-item">
                     <img src="@/assets/left-bottom-icon.png" alt="">
@@ -71,13 +72,30 @@ export default {
         modelData: function(newVal){
             // console.log(newVal)
             if(newVal.id){
-                this.mdata=newVal
                 this.id = newVal.id
+                console.log(newVal)
                 // console.log('触发了watch，重新赋值')
                 this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
-                    this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
-                        ip:newVal.ip,
-                        rtsp:newVal.rtsp
+                    console.log(newVal.rtsp)
+                    this.$api.httpApi.getChannel({
+                        data:{
+                            "sourceUrl":newVal.rtsp,
+                            "paramBefore": "-y -i",
+                            "paramBehind": "-f mpegts -codec:v mpeg1video -an -s 1707*960 -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 player = new JSMpeg.Player(url, {
+                            canvas: document.querySelector('.video-canvas'),
+                            audio: false,
+                            pauseWhenHidden: false,
+                            videoBufferSize: 8 * 1024 * 1024,
+                            loop:false,
+                        })
+                        player.play()
+                    }).catch(err => {
+
                     })
                 })
             }
@@ -101,41 +119,46 @@ export default {
         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 => {
+        leftStart(){
+            // console.log(this.id)
+            console.log('左转鼠标按下')
+            this.$axios.post('/camera/control/left/'+this.id, {
+                data: {}
+            }).then(res => {
 
-                            });
-                        }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 => {
+            }).catch(err => {
 
-                            });
-                        }
-                    }
-                });
-                this.confirmLoading = false;
-            }, 500);
+            })
+        },
+        leftStop(){
+            console.log('左转鼠标抬起')
+            this.$axios.post('/camera/control/left/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        rightStart(){
+            console.log('右转鼠标按下')
+            this.$axios.post('/camera/control/right/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
+        },
+        rightStop(){
+            console.log('左转鼠标抬起')
+            this.$axios.post('/camera/control/right/stop/'+this.id, {
+                data: {}
+            }).then(res => {
+
+            }).catch(err => {
+
+            })
         },
         handleCancel() {
             console.log('Clicked cancel button');
@@ -158,6 +181,10 @@ export default {
         right: 0;
         background-color: #001529;
         z-index: 9999;
+        .video-canvas{
+            width: 100vw;
+            height: 100vh;
+        }
         .video-close{
             position: absolute;
             right: 20px;