src/api/index.js

@@ -379,7 +379,14 @@ selFsTime(data) {
 loadHistorydata(data) {
   return sendPostRequest(`/load/historydata`, data)
 },
-
+//摄像头操作开始
+cameraStart(cameraSerialNumber,cameraChannelNumber,num) {
+  return sendPostRequest(`/camera/start?cameraid=${cameraSerialNumber}&channelid=${cameraChannelNumber}&direction=${num}`)
+},
+//摄像头操作结束
+cameraStop(cameraSerialNumber,cameraChannelNumber,num) {
+  return sendPostRequest(`/camera/stop?cameraid=${cameraSerialNumber}&channelid=${cameraChannelNumber}&direction=${num}`)
+},
   //二维码溯源
   //查看农事作物信息
   getAgriculturalInformation(data) {

src/assets/css/main.css

@@ -1978,13 +1978,118 @@
 .realTime .page-content .realTime-bottom .left-view > div {
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
 }
 
 .realTime .page-content .realTime-bottom .left-view > div .video-js {
-  width: 100%;
+  width: calc(100% - 400px);
   height: 100%;
 }
 
+.realTime .page-content .realTime-bottom .left-view > div .video-control {
+  width: 400px;
+  display: flex;
+  height: 100%;
+  padding: 60px 0;
+  flex-direction: column;
+  align-items: center;
+}
+
+.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big {
+  width: 230px;
+  height: 230px;
+  background: url(../img/video-control.png) no-repeat center;
+  background-size: 100% 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big > div {
+  width: 230px;
+  height: 230px;
+  position: relative;
+}
+
+.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big > div:active .arrow {
+  background: url(../img/control-arrow-active.png) no-repeat center;
+  background-size: 100% 100%;
+}
+
+.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big > div .arrow {
+  width: 43px;
+  height: 26px;
+  transform: rotate(135deg);
+  background: url(../img/control-arrow.png) no-repeat center;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 16px;
+  left: 7px;
+}
+
+.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big .top {
+  transform: rotate(-135deg);
+  position: absolute;
+  bottom: 70.5%;
+}
+
+.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big .bottom {
+  transform: rotate(45deg);
+  position: absolute;
+  top: 71%;
+}
+
+.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big .left {
+  transform: rotate(135deg);
+  position: absolute;
+  right: 70.5%;
+}
+
+.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn-big .right {
+  transform: rotate(-45deg);
+  position: absolute;
+  left: 70.5%;
+}
+
+.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-row-gap: 30px;
+  grid-column-gap: 30px;
+  margin-top: 41px;
+  width: 310px;
+}
+
+.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn > div {
+  width: 140px;
+  height: 40px;
+  background: #0294E2;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #FFFFFF;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn > div:active {
+  background: #22B2FF;
+}
+
+.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn > div > img {
+  margin-right: 12px;
+  width: 22px;
+  height: auto;
+}
+
+.realTime .page-content .realTime-bottom .left-view > div .video-control .video-btn > div > div {
+  white-space: nowrap;
+  width: 40px;
+}
+
 .realTime .page-content .realTime-bottom .right {
   width: calc(100% - 35%);
   min-width: 230px;
@@ -3532,7 +3637,8 @@
   color: #606266;
 }
 
-.el-button--primary.el-button span, .el-button--success.el-button span {
+.el-button--primary.el-button span,
+.el-button--success.el-button span {
   color: #fff;
 }
 
@@ -3557,7 +3663,8 @@
   margin-top: 20px;
 }
 
-.el-pagination .btn-prev .el-icon, .el-pagination .btn-next .el-icon {
+.el-pagination .btn-prev .el-icon,
+.el-pagination .btn-next .el-icon {
   color: #333;
 }
 
@@ -3574,7 +3681,8 @@
   font-weight: 700;
 }
 
-.el-pagination__total, .el-pagination__jump {
+.el-pagination__total,
+.el-pagination__jump {
   color: #fff;
 }
 

src/views/page/videoMonitoring.vue

@@ -1,36 +1,80 @@
 <template>
-    <div class="formula realTime videoMonitoring">
+    <div class="formula realTime videoMonitoring" @mouseup="upEnd()">
         <div class="page-content new-data">
             <div class="table-title">
                 <img src="../../assets/image/real-time.png" alt="" />
-                {{deviceTypeName}}—视频监控<span class="outline" v-if="deviceState == 0">(设备离线)</span>
+                {{ deviceTypeName }}—视频监控<span class="outline" v-if="deviceState == 0">(设备离线)</span>
             </div>
             <div class="flex-list realTime-bottom videoMonitoring-monitor">
                 <div class="left-view" v-if="deviceName != 30">
                     <div ref="monitor" class="monitor" id="monitor">
                         <!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
                         <div ref="videoPlayer" class="video-js" id="video-js"></div>
+                        <div class="video-control">
+                            <div class="video-btn-big">
+                                <div class="top" @mousedown="downStart(0)">
+                                    <div class="arrow"></div>
+                                </div>
+                                <div class="bottom" @mousedown="downStart(1)">
+                                    <div class="arrow"></div>
+                                </div>
+                                <div class="left" @mousedown="downStart(2)">
+                                    <div class="arrow"></div>
+                                </div>
+                                <div class="right" @mousedown="downStart(3)">
+                                    <div class="arrow"></div>
+                                </div>
+                            </div>
+                            <div class="video-btn">
+                                <div @mousedown="downStart(4)"><img src="../../assets/img/video-icon0.png" alt="">
+                                    <div>左上 </div>
+                                </div>
+                                <div @mousedown="downStart(6)"><img src="../../assets/img/video-icon1.png" alt="">
+                                    <div>右上 </div>
+                                </div>
+                                <div @mousedown="downStart(5)"><img src="../../assets/img/video-icon2.png" alt="">
+                                    <div>左下 </div>
+                                </div>
+                                <div @mousedown="downStart(7)"><img src="../../assets/img/video-icon3.png" alt="">
+                                    <div>右下 </div>
+                                </div>
+                                <div @mousedown="downStart(8)"><img src="../../assets/img/video-icon4.png" alt="">
+                                    <div>放大+</div>
+                                </div>
+                                <div @mousedown="downStart(9)"><img src="../../assets/img/video-icon5.png" alt="">
+                                    <div>缩小-</div>
+                                </div>
+                                <div @mousedown="downStart(10)"><img src="../../assets/img/video-icon6.png" alt="">
+                                    <div>近焦距</div>
+                                </div>
+                                <div @mousedown="downStart(11)"><img src="../../assets/img/video-icon7.png" alt="">
+                                    <div>远焦距</div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                   
+
                 </div>
                 <div></div>
             </div>
         </div>
     </div>
-  </template>
-  <script>
-  import EZUIKit from 'ezuikit-js';
-  import videojs from 'video.js';
+</template>
+<script>
+import EZUIKit from 'ezuikit-js';
+import videojs from 'video.js';
 import video_zhCN from 'video.js/dist/lang/zh-CN.json'
-  export default {
-    data(){
+import axios from 'axios';
+export default {
+    data() {
         return {
-            deviceTypeName:'',
-            deviceName:'',
-            deviceState:1,
+            deviceTypeName: '',
+            deviceName: '',
+            deviceState: 1,
             statusInterval: null,//status状态的Interval
             player: null,
             url: '',
+            nowNum: -1,
         }
     },
     watch: {
@@ -66,22 +110,81 @@ import video_zhCN from 'video.js/dist/lang/zh-CN.json'
         }
         clearInterval(this.statusInterval) && this.statusInterval
     },
-    mounted(){
+    mounted() {
         const that = this;
         const store = this.$store.state
         this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
         this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
         this.deviceName = store.equipmentList[this.indexs - 1].deviceName
-            this.deviceState = store.equipmentList[this.indexs - 1].deviceState
-    setTimeout(() => {
-        that.dataInit();
-    }, 0);
+        this.deviceState = store.equipmentList[this.indexs - 1].deviceState
+        setTimeout(() => {
+            that.dataInit();
+        }, 0);
+    },
+    methods: {
+        downStart(num) {
+            const store = this.$store.state
+            const that = this
+            console.log('start');
+            this.nowNum = num
+            var nowDevice = store.equipmentList[this.indexs - 1]
+            // var data = {
+            //     accessToken: this.accesstoken,
+            //     deviceSerial: nowDevice.cameraSerialNumber,
+            //     channelNo: nowDevice.cameraChannelNumber,
+            //     direction: num,
+            //     speed: 1,
+            // }
+            // var header={
+            //     'Content-Type': 'application/x-www-form-urlencoded',
+            // }
+            // axios.post('https://open.ys7.com/api/lapp/device/ptz/start',data,header)
+            //     .then(response => {
+            //         console.log(response.data);
+            //     })
+            //     .catch(error => {
+            //         console.error(error);
+            //     });
+            this.api.cameraStart(nowDevice.cameraSerialNumber,nowDevice.cameraChannelNumber,num).then(res => {
+                setTimeout(() => {
+                    that.upEnd()
+                }, 10000);
+                })
+        },
+        upEnd() {
+            const store = this.$store.state
+            const that = this
+            var num = this.nowNum
+            var nowDevice = store.equipmentList[this.indexs - 1]
+            console.log('end');
+            // var data = {
+            //     accessToken: this.accesstoken,
+            //     deviceSerial: nowDevice.cameraSerialNumber,
+            //     channelNo: nowDevice.cameraChannelNumber,
+            //     direction: num,
+            //     speed: 1,
+            // }
+            // var header={
+            //     'Content-Type': 'application/x-www-form-urlencoded',
+            // }
+            // axios.post('https://open.ys7.com/api/lapp/device/ptz/stop',data,header)
+            //     .then(response => {
+            //         console.log(response.data);
+            //     })
+            //     .catch(error => {
+            //         console.error(error);
+            //     });
+            if (num != -1) {
+                this.api.cameraStop(nowDevice.cameraSerialNumber, nowDevice.cameraChannelNumber, num).then(res => {
+                    this.nowNum=-1
+                })
+            }
+
         },
-    methods:{
         createVideoNew(accessToken) {
             // divW和divH是获取了父级宽高 使播放容器能铺满div
-            let divW = this.$refs.monitor.clientWidth
-            let divH = this.$refs.monitor.clientHeight
+            let divW = this.$refs.videoPlayer.clientWidth
+            let divH = this.$refs.videoPlayer.clientHeight
             this.player = new EZUIKit.EZUIKitPlayer({
                 id: 'video-js', // 视频容器ID
                 accessToken: accessToken,
@@ -95,29 +198,28 @@ import video_zhCN from 'video.js/dist/lang/zh-CN.json'
                 height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
             })
         },
-        dataInit(){
+        dataInit() {
             const store = this.$store.state
             var nowDevice = store.equipmentList[this.indexs - 1]
             var data2 = {
-                    cameraid: nowDevice.cameraSerialNumber,
-                    channelid: nowDevice.cameraChannelNumber
-                }
+                cameraid: nowDevice.cameraSerialNumber,
+                channelid: nowDevice.cameraChannelNumber
+            }
             if (!this.player) {
-                    this.api.getGethls(data2).then(res => {
-                        // console.log(res.data, 11);
-                        if (res.data.code == 200) {
-                            this.url = res.data.data.ezopen
-                            this.createVideoNew(res.data.data.accesstoken)
-                        }
-                    })
-                }    
+                this.api.getGethls(data2).then(res => {
+                    // console.log(res.data, 11);
+                    if (res.data.code == 200) {
+                        this.url = res.data.data.ezopen
+                        this.accesstoken = res.data.data.accesstoken
+                        this.createVideoNew(res.data.data.accesstoken)
+                    }
+                })
+            }
         },
     },
-  
-  }
-  </script>
-  <style lang="scss">
-  
-  </style>
+
+}
+</script>
+<style lang="scss"></style>