~

pages/videoLive/videoLive.vue

@@ -12,10 +12,23 @@
 			<view class="skills">
 				<view class="left">
 					<image src="../../static/direction_keys.png" mode=""></image>
-					<image class="left_arrow" src="../../static/left_arrow.png" mode="" @touchstart='ytControl(2)' @touchend='ytControlStop(2)' ></image>
+					<view :class="directionFlag == 0 ? 'arrow_item_act' : 'arrow_item'" class="left_arrow_item" @touchstart='ytControl1(2)' @touchend='ytControlStop(2)'>
-					<image class="right_arrow" src="../../static/right_arrow.png" mode="" @touchstart='ytControl(3)' @touchend='ytControlStop(3)'></image>
+						<image class="left_arrow" src="../../static/left_arrow.png" mode="" v-if="directionFlag != 0"></image>
-					<image class="up_arrow" src="../../static/up_arrow.png" mode="" @touchstart='ytControl(0)' @touchend='ytControlStop(0)'></image>
+						<image class="left_arrow" src="../../static/left_arrow_act.png" mode="" v-else></image>
-					<image class="down_arrow" src="../../static/down_arrow.png" mode="" @touchstart='ytControl(1)' @touchend='ytControlStop(1)'></image>
+					</view>
+					<view :class="directionFlag == 1 ? 'arrow_item_act' : 'arrow_item'" class="right_arrow_item" @touchstart='ytControl2(3)' @touchend='ytControlStop(3)'>
+						<image class="right_arrow" src="../../static/right_arrow.png" mode=""  v-if="directionFlag != 1"></image>
+						<image class="right_arrow" src="../../static/right_arrow_act.png" mode="" v-else></image>
+					</view>
+					<view :class="directionFlag == 2 ? 'arrow_item_act' : 'arrow_item'" class="up_arrow_item" @touchstart='ytControl3(0)' @touchend='ytControlStop(0)'>
+						<image class="up_arrow" src="../../static/up_arrow.png" mode=""  v-if="directionFlag != 2"></image>
+						<image class="up_arrow" src="../../static/up_arrow_act.png" mode="" v-else></image>
+					</view>
+					<view :class="directionFlag == 3 ? 'arrow_item_act' : 'arrow_item'" class="down_arrow_item" @touchstart='ytControl4(1)' @touchend='ytControlStop(1)'>
+						<image class="down_arrow" src="../../static/down_arrow.png" mode=""  v-if="directionFlag != 3"></image>
+						<image class="down_arrow" src="../../static/down_arrow_act.png" mode="" v-else></image>
+					</view>
+					
 				</view>
 				<view class="right">
 					<view class="right_item">
@@ -58,13 +71,15 @@
 				background: {
 					backgroundColor: '#24B383',
 				},
-				
+				directionFlag:5,
 				flag1:true,
 				flag2:true,
 				cameraSerialNumber:'',
 				cameraChannelNumber:'',
 				accesstoken:'',
-				src:''
+				src:'',
+				timer:null,
+				timer1:null
 			};
 		},
 		onLoad(options) {
@@ -93,48 +108,69 @@
 			
 			ytControl(num){
 				let that = this;
-				// console.log("start");
+				clearTimeout(that.timer);
-				uni.request({
+				that.timer = setTimeout(() => {
-				    url: 'https://open.ys7.com/api/lapp/device/ptz/start',
+					uni.request({
-					method: 'POST',
+					    url: 'https://open.ys7.com/api/lapp/device/ptz/start',
-					data:{
+						method: 'POST',
-						accessToken: that.accesstoken,
+						data:{
-						deviceSerial: that.cameraSerialNumber,
+							accessToken: that.accesstoken,
-						channelNo: that.cameraChannelNumber,
+							deviceSerial: that.cameraSerialNumber,
-						direction:num,
+							channelNo: that.cameraChannelNumber,
-						speed: 1,
+							direction:num,
-					},
+							speed: 1,
-					header: {
+						},
-						'Content-Type': 'application/x-www-form-urlencoded',
+						header: {
-					},
+							'Content-Type': 'application/x-www-form-urlencoded',
-				    success: (res) => {
+						},
-				        console.log(res);
+					    success: (res) => {
-				    }
+					        console.log(res);
-				});
+					    }
+					});
+				}, 500);
 			},
 			
 			ytControlStop(num){
 				let that = this;
-				// console.log("stop");
+				clearTimeout(that.timer1);
-				uni.request({
+				that.timer1 = setTimeout(() => {
-					url:'https://open.ys7.com/api/lapp/device/ptz/stop',
+					uni.request({
-					method: 'POST',
+						url:'https://open.ys7.com/api/lapp/device/ptz/stop',
-					data:{
+						method: 'POST',
-						accessToken: that.accesstoken,
+						data:{
-						deviceSerial: that.cameraSerialNumber,
+							accessToken: that.accesstoken,
-						channelNo: that.cameraChannelNumber,
+							deviceSerial: that.cameraSerialNumber,
-						direction:num,
+							channelNo: that.cameraChannelNumber,
-						speed: 1,
+							direction:num,
-					},
+							speed: 1,
-					header: {
+						},
-						'Content-Type': 'application/x-www-form-urlencoded',
+						header: {
-					},
+							'Content-Type': 'application/x-www-form-urlencoded',
-					success: (res) => {
+						},
-					    console.log(res);
+						success: (res) => {
-					}
+						    console.log(res);
-				})
+						}
+					})
+				}, 500);
+				
 			},
 			
+			ytControl1(num){
+				this.directionFlag = 0
+				this.ytControl(num)
+			},
+			ytControl2(num){
+				this.directionFlag = 1
+				this.ytControl(num)
+			},
+			ytControl3(num){
+				this.directionFlag = 2
+				this.ytControl(num)
+			},
+			ytControl4(num){
+				this.directionFlag = 3
+				this.ytControl(num)
+			},
 			
 			// 焦距-放大
 			ytControlFocusAdd(num){
@@ -206,38 +242,63 @@
 				position: relative;
 				margin-right: 60rpx;
 				
-				>image{
-					width: 100%;
-					height: 100%;
-				}
-				
 				.left_arrow,.right_arrow{
 					width: 15rpx;
 					height: 28rpx;
 				}
-				.left_arrow{
+				
-					position: absolute;
-					top: 155rpx;
-					left: 47rpx;
-				}
-				.right_arrow{
-					position: absolute;
-					top: 155rpx;
-					right: 45rpx;
-				}
 				.up_arrow,.down_arrow{
 					width: 27rpx;
 					height: 15rpx;
 				}
-				.up_arrow{
+				
-					position: absolute;
+				.arrow_item{
-					top: 42rpx;
+					width: 51rpx;
-					left: 157rpx;
+					height: 51rpx;
+					border-radius: 50%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					
 				}
-				.down_arrow{
+				
+				.arrow_item_act{
+					width: 51rpx;
+					height: 51rpx;
+					background: #24B383;
+					border-radius: 50%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+				
+				.left_arrow_item{
 					position: absolute;
-					bottom: 40rpx;
+					top: 145rpx;
-					left: 157rpx;
+					left: 29rpx;
+				}
+				
+				.right_arrow_item{
+					position: absolute;
+					top: 145rpx;
+					right: 29rpx;
+				}
+				
+				.up_arrow_item{
+					position: absolute;
+					top: 29rpx;
+					left: 146rpx;
+				}
+				
+				.down_arrow_item{
+					position: absolute;
+					bottom: 28rpx;
+					left: 145rpx;
+				}
+				
+				>image{
+					width: 100%;
+					height: 100%;
 				}
 			}
 		

unpackage/dist/dev/mp-weixin/pages/videoLive/videoLive.js

@@ -216,6 +216,19 @@ exports.default = void 0;
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 var _default = {
   data: function data() {
     return {
@@ -223,12 +236,15 @@ var _default = {
       background: {
         backgroundColor: '#24B383'
       },
+      directionFlag: 5,
       flag1: true,
       flag2: true,
       cameraSerialNumber: '',
       cameraChannelNumber: '',
       accesstoken: '',
-      src: ''
+      src: '',
+      timer: null,
+      timer1: null
     };
   },
   onLoad: function onLoad(options) {
@@ -257,45 +273,65 @@ var _default = {
     },
     ytControl: function ytControl(num) {
       var that = this;
-      // console.log("start");
+      clearTimeout(that.timer);
-      uni.request({
+      that.timer = setTimeout(function () {
-        url: 'https://open.ys7.com/api/lapp/device/ptz/start',
+        uni.request({
-        method: 'POST',
+          url: 'https://open.ys7.com/api/lapp/device/ptz/start',
-        data: {
+          method: 'POST',
-          accessToken: that.accesstoken,
+          data: {
-          deviceSerial: that.cameraSerialNumber,
+            accessToken: that.accesstoken,
-          channelNo: that.cameraChannelNumber,
+            deviceSerial: that.cameraSerialNumber,
-          direction: num,
+            channelNo: that.cameraChannelNumber,
-          speed: 1
+            direction: num,
-        },
+            speed: 1
-        header: {
+          },
-          'Content-Type': 'application/x-www-form-urlencoded'
+          header: {
-        },
+            'Content-Type': 'application/x-www-form-urlencoded'
-        success: function success(res) {
+          },
-          console.log(res);
+          success: function success(res) {
-        }
+            console.log(res);
-      });
+          }
+        });
+      }, 500);
     },
     ytControlStop: function ytControlStop(num) {
       var that = this;
-      // console.log("stop");
+      clearTimeout(that.timer1);
-      uni.request({
+      that.timer1 = setTimeout(function () {
-        url: 'https://open.ys7.com/api/lapp/device/ptz/stop',
+        uni.request({
-        method: 'POST',
+          url: 'https://open.ys7.com/api/lapp/device/ptz/stop',
-        data: {
+          method: 'POST',
-          accessToken: that.accesstoken,
+          data: {
-          deviceSerial: that.cameraSerialNumber,
+            accessToken: that.accesstoken,
-          channelNo: that.cameraChannelNumber,
+            deviceSerial: that.cameraSerialNumber,
-          direction: num,
+            channelNo: that.cameraChannelNumber,
-          speed: 1
+            direction: num,
-        },
+            speed: 1
-        header: {
+          },
-          'Content-Type': 'application/x-www-form-urlencoded'
+          header: {
-        },
+            'Content-Type': 'application/x-www-form-urlencoded'
-        success: function success(res) {
+          },
-          console.log(res);
+          success: function success(res) {
-        }
+            console.log(res);
-      });
+          }
+        });
+      }, 500);
+    },
+    ytControl1: function ytControl1(num) {
+      this.directionFlag = 0;
+      this.ytControl(num);
+    },
+    ytControl2: function ytControl2(num) {
+      this.directionFlag = 1;
+      this.ytControl(num);
+    },
+    ytControl3: function ytControl3(num) {
+      this.directionFlag = 2;
+      this.ytControl(num);
+    },
+    ytControl4: function ytControl4(num) {
+      this.directionFlag = 3;
+      this.ytControl(num);
     },
     // 焦距-放大
     ytControlFocusAdd: function ytControlFocusAdd(num) {

unpackage/dist/dev/mp-weixin/pages/videoLive/videoLive.wxml

@@ -1 +1 @@
-<view class="videoLive data-v-0ceca996"><u-navbar vue-id="deadeba0-1" background="{{background}}" is-back="{{true}}" back-icon-color="#FFFFFF" border-bottom="{{false}}" title="摄像机01" title-color="#FFFFFF" title-bold="{{true}}" title-size="32" class="data-v-0ceca996" bind:__l="__l"></u-navbar><view class="center data-v-0ceca996"><view class="video_live data-v-0ceca996"><video style="width:100%;height:100%;" id="myVideo" src="{{src}}" controls="{{true}}" class="data-v-0ceca996"></video></view><view class="skills data-v-0ceca996"><view class="left data-v-0ceca996"><image src="../../static/direction_keys.png" mode class="data-v-0ceca996"></image><image class="left_arrow data-v-0ceca996" src="../../static/left_arrow.png" mode data-event-opts="{{[['touchstart',[['ytControl',[2]]]],['touchend',[['ytControlStop',[2]]]]]}}" bindtouchstart="__e" bindtouchend="__e"></image><image class="right_arrow data-v-0ceca996" src="../../static/right_arrow.png" mode data-event-opts="{{[['touchstart',[['ytControl',[3]]]],['touchend',[['ytControlStop',[3]]]]]}}" bindtouchstart="__e" bindtouchend="__e"></image><image class="up_arrow data-v-0ceca996" src="../../static/up_arrow.png" mode data-event-opts="{{[['touchstart',[['ytControl',[0]]]],['touchend',[['ytControlStop',[0]]]]]}}" bindtouchstart="__e" bindtouchend="__e"></image><image class="down_arrow data-v-0ceca996" src="../../static/down_arrow.png" mode data-event-opts="{{[['touchstart',[['ytControl',[1]]]],['touchend',[['ytControlStop',[1]]]]]}}" bindtouchstart="__e" bindtouchend="__e"></image></view><view class="right data-v-0ceca996"><view class="right_item data-v-0ceca996"><view data-event-opts="{{[['touchstart',[['ytControlFocusAdd',[10]]]],['touchend',[['ytControlStopFocusAdd',[10]]]]]}}" class="{{['data-v-0ceca996',flag1?'add_act':'add']}}" bindtouchstart="__e" bindtouchend="__e"><block wx:if="{{flag1==true}}"><image src="../../static/add_act.png" mode class="data-v-0ceca996"></image></block><block wx:if="{{flag1==false}}"><image src="../../static/add.png" mode class="data-v-0ceca996"></image></block></view><view class="focus data-v-0ceca996">焦距</view><view data-event-opts="{{[['touchstart',[['ytControlFocusSubtract',[11]]]],['touchend',[['ytControlStopFocusSubtract',[11]]]]]}}" class="{{['data-v-0ceca996',flag1?'subtract':'subtract_act']}}" bindtouchstart="__e" bindtouchend="__e"><block wx:if="{{flag1==true}}"><image src="../../static/subtract.png" mode class="data-v-0ceca996"></image></block><block wx:if="{{flag1==false}}"><image src="../../static/subtract_act.png" mode class="data-v-0ceca996"></image></block></view></view><view class="right_item data-v-0ceca996"><view data-event-opts="{{[['touchstart',[['ytControlScaleAdd',[8]]]],['touchend',[['ytControlStopScaleAdd',[8]]]]]}}" class="{{['data-v-0ceca996',flag2?'add_act':'add']}}" bindtouchstart="__e" bindtouchend="__e"><block wx:if="{{flag2==true}}"><image src="../../static/add_act.png" mode class="data-v-0ceca996"></image></block><block wx:if="{{flag2==false}}"><image src="../../static/add.png" mode class="data-v-0ceca996"></image></block></view><view class="focus data-v-0ceca996">缩放</view><view data-event-opts="{{[['touchstart',[['ytControlScaleSubtract',[9]]]],['touchend',[['ytControlStopScaleSubtract',[9]]]]]}}" class="{{['data-v-0ceca996',flag2?'subtract':'subtract_act']}}" bindtouchstart="__e" bindtouchend="__e"><block wx:if="{{flag2==true}}"><image src="../../static/subtract.png" mode class="data-v-0ceca996"></image></block><block wx:if="{{flag2==false}}"><image src="../../static/subtract_act.png" mode class="data-v-0ceca996"></image></block></view></view></view></view></view></view>
+<view class="videoLive data-v-0ceca996"><u-navbar vue-id="deadeba0-1" background="{{background}}" is-back="{{true}}" back-icon-color="#FFFFFF" border-bottom="{{false}}" title="摄像机01" title-color="#FFFFFF" title-bold="{{true}}" title-size="32" class="data-v-0ceca996" bind:__l="__l"></u-navbar><view class="center data-v-0ceca996"><view class="video_live data-v-0ceca996"><video style="width:100%;height:100%;" id="myVideo" src="{{src}}" controls="{{true}}" class="data-v-0ceca996"></video></view><view class="skills data-v-0ceca996"><view class="left data-v-0ceca996"><image src="../../static/direction_keys.png" mode class="data-v-0ceca996"></image><view data-event-opts="{{[['touchstart',[['ytControl1',[2]]]],['touchend',[['ytControlStop',[2]]]]]}}" class="{{['left_arrow_item','data-v-0ceca996',directionFlag==0?'arrow_item_act':'arrow_item']}}" bindtouchstart="__e" bindtouchend="__e"><block wx:if="{{directionFlag!=0}}"><image class="left_arrow data-v-0ceca996" src="../../static/left_arrow.png" mode></image></block><block wx:else><image class="left_arrow data-v-0ceca996" src="../../static/left_arrow_act.png" mode></image></block></view><view data-event-opts="{{[['touchstart',[['ytControl2',[3]]]],['touchend',[['ytControlStop',[3]]]]]}}" class="{{['right_arrow_item','data-v-0ceca996',directionFlag==1?'arrow_item_act':'arrow_item']}}" bindtouchstart="__e" bindtouchend="__e"><block wx:if="{{directionFlag!=1}}"><image class="right_arrow data-v-0ceca996" src="../../static/right_arrow.png" mode></image></block><block wx:else><image class="right_arrow data-v-0ceca996" src="../../static/right_arrow_act.png" mode></image></block></view><view data-event-opts="{{[['touchstart',[['ytControl3',[0]]]],['touchend',[['ytControlStop',[0]]]]]}}" class="{{['up_arrow_item','data-v-0ceca996',directionFlag==2?'arrow_item_act':'arrow_item']}}" bindtouchstart="__e" bindtouchend="__e"><block wx:if="{{directionFlag!=2}}"><image class="up_arrow data-v-0ceca996" src="../../static/up_arrow.png" mode></image></block><block wx:else><image class="up_arrow data-v-0ceca996" src="../../static/up_arrow_act.png" mode></image></block></view><view data-event-opts="{{[['touchstart',[['ytControl4',[1]]]],['touchend',[['ytControlStop',[1]]]]]}}" class="{{['down_arrow_item','data-v-0ceca996',directionFlag==3?'arrow_item_act':'arrow_item']}}" bindtouchstart="__e" bindtouchend="__e"><block wx:if="{{directionFlag!=3}}"><image class="down_arrow data-v-0ceca996" src="../../static/down_arrow.png" mode></image></block><block wx:else><image class="down_arrow data-v-0ceca996" src="../../static/down_arrow_act.png" mode></image></block></view></view><view class="right data-v-0ceca996"><view class="right_item data-v-0ceca996"><view data-event-opts="{{[['touchstart',[['ytControlFocusAdd',[10]]]],['touchend',[['ytControlStopFocusAdd',[10]]]]]}}" class="{{['data-v-0ceca996',flag1?'add_act':'add']}}" bindtouchstart="__e" bindtouchend="__e"><block wx:if="{{flag1==true}}"><image src="../../static/add_act.png" mode class="data-v-0ceca996"></image></block><block wx:if="{{flag1==false}}"><image src="../../static/add.png" mode class="data-v-0ceca996"></image></block></view><view class="focus data-v-0ceca996">焦距</view><view data-event-opts="{{[['touchstart',[['ytControlFocusSubtract',[11]]]],['touchend',[['ytControlStopFocusSubtract',[11]]]]]}}" class="{{['data-v-0ceca996',flag1?'subtract':'subtract_act']}}" bindtouchstart="__e" bindtouchend="__e"><block wx:if="{{flag1==true}}"><image src="../../static/subtract.png" mode class="data-v-0ceca996"></image></block><block wx:if="{{flag1==false}}"><image src="../../static/subtract_act.png" mode class="data-v-0ceca996"></image></block></view></view><view class="right_item data-v-0ceca996"><view data-event-opts="{{[['touchstart',[['ytControlScaleAdd',[8]]]],['touchend',[['ytControlStopScaleAdd',[8]]]]]}}" class="{{['data-v-0ceca996',flag2?'add_act':'add']}}" bindtouchstart="__e" bindtouchend="__e"><block wx:if="{{flag2==true}}"><image src="../../static/add_act.png" mode class="data-v-0ceca996"></image></block><block wx:if="{{flag2==false}}"><image src="../../static/add.png" mode class="data-v-0ceca996"></image></block></view><view class="focus data-v-0ceca996">缩放</view><view data-event-opts="{{[['touchstart',[['ytControlScaleSubtract',[9]]]],['touchend',[['ytControlStopScaleSubtract',[9]]]]]}}" class="{{['data-v-0ceca996',flag2?'subtract':'subtract_act']}}" bindtouchstart="__e" bindtouchend="__e"><block wx:if="{{flag2==true}}"><image src="../../static/subtract.png" mode class="data-v-0ceca996"></image></block><block wx:if="{{flag2==false}}"><image src="../../static/subtract_act.png" mode class="data-v-0ceca996"></image></block></view></view></view></view></view></view>

unpackage/dist/dev/mp-weixin/pages/videoLive/videoLive.wxss

@@ -49,37 +49,54 @@
   position: relative;
   margin-right: 60rpx;
 }
-.videoLive .center .skills .left > image.data-v-0ceca996 {
-  width: 100%;
-  height: 100%;
-}
 .videoLive .center .skills .left .left_arrow.data-v-0ceca996, .videoLive .center .skills .left .right_arrow.data-v-0ceca996 {
   width: 15rpx;
   height: 28rpx;
 }
-.videoLive .center .skills .left .left_arrow.data-v-0ceca996 {
-  position: absolute;
-  top: 155rpx;
-  left: 47rpx;
-}
-.videoLive .center .skills .left .right_arrow.data-v-0ceca996 {
-  position: absolute;
-  top: 155rpx;
-  right: 45rpx;
-}
 .videoLive .center .skills .left .up_arrow.data-v-0ceca996, .videoLive .center .skills .left .down_arrow.data-v-0ceca996 {
   width: 27rpx;
   height: 15rpx;
 }
-.videoLive .center .skills .left .up_arrow.data-v-0ceca996 {
+.videoLive .center .skills .left .arrow_item.data-v-0ceca996 {
-  position: absolute;
+  width: 51rpx;
-  top: 42rpx;
+  height: 51rpx;
-  left: 157rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.videoLive .center .skills .left .down_arrow.data-v-0ceca996 {
+.videoLive .center .skills .left .arrow_item_act.data-v-0ceca996 {
+  width: 51rpx;
+  height: 51rpx;
+  background: #24B383;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.videoLive .center .skills .left .left_arrow_item.data-v-0ceca996 {
   position: absolute;
-  bottom: 40rpx;
+  top: 145rpx;
-  left: 157rpx;
+  left: 29rpx;
+}
+.videoLive .center .skills .left .right_arrow_item.data-v-0ceca996 {
+  position: absolute;
+  top: 145rpx;
+  right: 29rpx;
+}
+.videoLive .center .skills .left .up_arrow_item.data-v-0ceca996 {
+  position: absolute;
+  top: 29rpx;
+  left: 146rpx;
+}
+.videoLive .center .skills .left .down_arrow_item.data-v-0ceca996 {
+  position: absolute;
+  bottom: 28rpx;
+  left: 145rpx;
+}
+.videoLive .center .skills .left > image.data-v-0ceca996 {
+  width: 100%;
+  height: 100%;
 }
 .videoLive .center .skills .right.data-v-0ceca996 {
   box-sizing: border-box;

unpackage/dist/dev/mp-weixin/project.config.json

@@ -22,7 +22,24 @@
     "libVersion": "3.2.0",
     "appid": "wx05b45a2699f02a2b",
     "projectname": "greenhouse-wisdom-applet",
-    "condition": {},
+    "condition": {
+        "search": {
+            "current": -1,
+            "list": []
+        },
+        "conversation": {
+            "current": -1,
+            "list": []
+        },
+        "game": {
+            "current": -1,
+            "list": []
+        },
+        "miniprogram": {
+            "current": -1,
+            "list": []
+        }
+    },
     "editorSetting": {
         "tabIndent": "insertSpaces",
         "tabSize": 4

unpackage/dist/dev/mp-weixin/project.private.config.json

@@ -3,5 +3,18 @@
     "projectname": "wszhyWx",
     "setting": {
         "compileHotReLoad": true
+    },
+    "condition": {
+        "miniprogram": {
+            "list": [
+                {
+                    "name": "pages/videoLive/videoLive",
+                    "pathName": "pages/videoLive/videoLive",
+                    "query": "cameraSerialNumber=AD6463273&cameraChannelNumber=12",
+                    "launchMode": "default",
+                    "scene": null
+                }
+            ]
+        }
     }
 }