添加语音识别前端

cloudTrain/components/voice-recognition/recording.vue

+<template>
+	<div class="recording">
+		<h6 class="recording-title">长按进行输入</h6>
+		<div class="recording-box">
+			<canvas canvas-id="canvas" style="width:100px;height:100px;">
+				<span class="recording-button" @touchstart="start" @touchmove="move" @touchend="end"></span>
+			</canvas>
+		</div>
+	</div>
+</template>
+
+<script>
+	const recorderManager = uni.getRecorderManager();
+	export default {
+		props:{
+			requestURL:{
+				type:String
+			}
+		},
+		data() {
+			return {
+				max: 10000, // 录音最大时长，单位毫秒
+				frame: 50, // 执行绘画的频率，单位毫秒
+				longTag: false, // 判定长按和点击的标识
+				maxTiming: false, // 最长录音时间的定时器
+				draw: undefined,
+				seconds: '00',
+				ms: '00'
+			}
+		},
+		created() {
+			// 录音结束的事件监听
+			let self = this;
+			recorderManager.onStop(function(res) {
+				console.log('recorder stop' + JSON.stringify(res));
+				self.voicePath = res.tempFilePath;
+				self.uploadVoice();
+			});
+		},
+		methods: {
+			start: function() {
+				this.longTag = setTimeout(this.recording, 200); // 定义超过500ms即为长按，可自行修改
+			},
+			move: function() {
+				// console.log("move")
+				// clearTimeout(this.longTag);
+				// clearTimeout(this.maxTiming);
+				// clearInterval(this.draw);
+				// this.longTag = false;
+			},
+			end: function() {
+				clearTimeout(this.longTag);
+				clearTimeout(this.maxTiming);
+				clearInterval(this.draw);
+				if (this.longTag) { // timeout不是false证明没有触发recording或者touchmove事件
+					console.log('点击事件');
+				}
+				this.longTag = false;
+				this.draw = false;
+				let angle = -0.5;
+				let context = uni.createCanvasContext('canvas');
+				context.beginPath();
+				context.setStrokeStyle("#1296db");
+				context.setLineWidth(3);
+				context.arc(50, 50, 25, -0.5 * Math.PI, (angle += 2 / (this.max / this.frame)) * Math.PI, false);
+				context.stroke();
+				context.draw();
+				// 语音转换
+				this.send();
+			},
+			recording: function() {
+				let self = this;
+
+				// 开始录音
+				this.longTag = false;
+				recorderManager.start();
+				console.log('录音开始');
+
+				// 最大录音时间10秒
+				this.maxTiming = setTimeout(function() {
+					clearInterval(this.draw);
+					console.log('时间到');
+
+					// 语音转换
+					// self.send();
+				}, self.max);
+
+				// 录音过程圆圈动画
+				let angle = -0.5;
+				let context = uni.createCanvasContext('canvas');
+				this.draw = setInterval(function() {
+					context.beginPath();
+					context.setStrokeStyle("#1296db");
+					context.setLineWidth(3);
+					context.arc(50, 50, 25, -0.5 * Math.PI, (angle += 2 / (self.max / self.frame)) * Math.PI, false);
+					context.stroke();
+					context.draw();
+				}, self.frame);
+			},
+			send: function() {
+				
+				 recorderManager.stop();
+			},
+			timing: function() {
+				let self = this;
+
+			},
+			reset: function() {
+				this.seconds = '00';
+				this.ms = '00';
+			},
+			uploadVoice:function(){
+				var belongId = this.GLOBALUTIL.guid2();
+				var datas = []
+				datas.push({
+					name: "file",
+					uri: this.voicePath  
+				})
+				uni.uploadFile({
+					url: this.requestURL, 
+					files:datas,
+					filePath:this.voicePath,
+					name:"file",
+					formData: {
+						'belongId': belongId
+					},
+					header:{
+						"x-auth-token":this.GLOBALUTIL.commonHeader["x-auth-token"],
+					},
+				    success: (res) => {
+						console.log(JSON.stringify(res))
+						uni.$emit("voice-recognition",[])
+				    }
+				})
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	.recording {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		background: #E7E7E7;
+	}
+
+	.recording-content {
+		flex-grow: 1;
+		padding: 10upx;
+		font-size: 32upx;
+		color: #1296DB;
+		background: #fff;
+	}
+
+	.recording-title {
+		padding: 20upx;
+		text-align: center;
+		font-size: 32upx;
+		color: #1296DB;
+	}
+
+	.recording-box {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+	}
+
+	#canvas {
+		position: relative;
+		width: 200upx;
+		height: 200upx;
+		z-index: 10;
+	}
+
+	.recording-button {
+		position: absolute;
+		box-sizing: border-box;
+		top: 50upx;
+		left: 50upx;
+		display: inline-block;
+		width: 100upx;
+		height: 100upx;
+		border: 1px dashed #1296DB;
+		border-radius: 100upx;
+		background: url(../../static/voice-recognition/recording.png) no-repeat 50% 50%;
+		background-size: 50% 50%;
+		z-index: 100;
+	}
+
+	.recording-time {
+		text-align: center;
+		font-size: 40upx;
+		color: #1296db;
+	}
+</style>

cloudTrain/pages.json

@@ -321,6 +321,12 @@
 					}  
 				}
 			}
+		},
+		{
+			"path": "pages/Voice/index",
+			"style": {
+				"navigationBarTitleText": "语音"
+			}
 		}
     ],
 	"tabBar": {

cloudTrain/pages/Intelligent-Access/scanCode.vue

@@ -6,6 +6,15 @@
 		<view class="scanButton" hover-class="hover" @click="getEqStatus">
 			<text>获取锁</text>
 		</view>
+		<view class="scanButton" hover-class="hover" @click="print">
+			<text>打印</text>
+		</view>
+		<view class="scanButton" hover-class="hover" @click="startVoice">
+			<text>开始录音</text>
+		</view>
+		<view class="scanButton" hover-class="hover" @click="endVoice">
+			<text>结束录音</text>
+		</view>
 		<view v-if ="showCardStatus" v-for="news in deviceinfo" :key="news.deviceNo" class="scanButton" hover-class="hover" >
 			<text>班牌编码:{{news.deviceNo}}</text>
 			<text>班牌状态{{news.statusName}}</text>
@@ -34,7 +43,9 @@
 	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
 	import FormAlert from  "@/components/form-alert/h-form-alert.vue"
 	import PopUp from "@/components/popup/popup.vue"
-	import WebSkt from "./view-websocket.js"
+	import WebSkt from "./view-websocket.js"
+	import Print from "./blueToothPrint.js"
+	const recorderManager = uni.getRecorderManager();
 	export default {
 		mixins: [MescrollMixin],
 		data() {
@@ -54,7 +65,8 @@
 				showVideo:false,
 				cameraName:"",
 				deviceinfo:[],
-				previewSrc:""
+				previewSrc:"",
+				voicePath:""
 			}
 		},
 		methods: {
@@ -71,7 +83,25 @@
 						{"deviceNo":"301F9A601DB7"}
 					];
 					WebSkt.getEquipmentStatus(datas);
-				},1000)
+				},1000)
+				recorderManager.onStop(function (res) {
+					console.log('recorder stop' + JSON.stringify(res));
+					that.voicePath = res.tempFilePath;
+					that.uploadVoice();
+				});
+			},
+			print(){
+				var printerxmlSet = [];
+				var printerxmlSetString = '';
+				var printerxml = '<Print><Type>1001</Type><Code>'+ "abc" +'</Code><Text>'+ "def" +'</Text><Text>名称：'+ "gkh" +'</Text><Text>编号：'+ "ppp" +'</Text><Text>部门：'+ "ccc" +'</Text></Print>'
+				printerxmlSet.splice(printerxmlSet.length,0,printerxml);
+				printerxmlSetString = printerxmlSet.join('');
+				const printer = uni.requireNativePlugin('Wewin-PrintPlugin');
+				printer.asyncPrint({
+					xml: '<?xml version=\"1.0\" encoding=\"utf-8\" ?><Data>'+ printerxmlSetString +'</Data>'
+				}, result => {
+					console.log(result);
+				})
 			},
 			getEqStatus(){
 				var datas = [
@@ -135,6 +165,36 @@
 				    },
 				});
 			},
+			startVoice(){
+				 recorderManager.start();
+			},
+			endVoice(){
+				 recorderManager.stop();
+			},
+			uploadVoice(){
+				var belongId = this.GLOBALUTIL.guid2();
+				var imgs = []
+				imgs.push({
+					name: "file",
+					uri: this.voicePath  
+				})
+				uni.uploadFile({
+					url: this.GLOBALUTIL.url+'/basis/attachments/files', 
+					files:imgs,
+					filePath:this.voicePath,
+					name:"file",
+					formData: {
+						'belongId': belongId
+					},
+					header:{
+						"x-auth-token":this.GLOBALUTIL.commonHeader["x-auth-token"],
+						// 'Content-Type': 'multipart/form-data',
+					},
+				    success: (res) => {
+						console.log(JSON.stringify(res))
+				    }
+				})
+			},
 			getEuqipmentStatus(){
 				var deviceInfo =  WebSkt.getDeviceInfo();
 				console.log(deviceInfo)

cloudTrain/pages/Security-Check/index.vue

@@ -231,10 +231,18 @@ import uniNavBar from "@/components/uni-header/uni-nav-bar/uni-nav-bar.vue"
 				    success: (res) => {
 						// var uri = JSON.parse(res.data).data;
 					    console.log(res)
-						console.log(JSON.stringify(res))
-						imgPath.map((opt)=>{
-							that.images.push(opt)
-						})
+						if(res.statusCode == 200){
+							imgPath.map((opt)=>{
+								that.images.push(opt)
+							})
+						}else{
+							this.$refs.popup.open({
+								type:'err',
+								content:'图片上传失败',
+								timeout:1000,
+								isClick:false
+							}); 
+						}
 				    }
 				})
 			},

cloudTrain/pages/Voice/index.vue

+<template>
+	<view >
+		<Voice requestURL="hpts">
+			
+		</Voice>
+	</view>
+</template>
+
+<script>
+	import Voice from "../../components/voice-recognition/recording.vue"
+
+	export default {
+		onLoad() {
+			console.log('?d')
+		},
+		methods:{
+			
+		},
+		components:{
+			Voice
+		}
+	}
+</script>
+
+<style>
+
+</style>

cloudTrain/pages/main/main.vue

@@ -37,6 +37,9 @@
 			<button hover-class="submithover"  @click="scanCodeOpenDoor" class="submit-button">
 				<text class="submittext">扫码开门</text>
 			</button>
+			<button hover-class="submithover"  @click="voiceRecognition" class="submit-button">
+				<text class="submittext">语音</text>
+			</button>
 		</view>
 	</view>
 </template>
@@ -114,6 +117,11 @@
 				uni.navigateTo({
 					url:"../Approval/list"
 				})
+			},
+			voiceRecognition(){
+				uni.navigateTo({
+					url:"../Voice/index"
+				})
 			}
 		}
 	}