bonus-checkVerify-app/pages/verify/deviceOcrScan.nvue

<template>
	<view class="page">
		<!-- <Navbar title="保护装置识别" :showRightText="false" :isBack="false" :goTo="`/pages/verify/checkingDetails?params=${JSON.stringify(queryParams)}`"/> -->
		<view class="page-container">
			<view style="width: 100%;height: 100%;">
				<live-pusher v-once id="livePusher" ref="livePusher" class="livePusher" mode="FHD" beauty="0" whiteness="0"
					device-position="back" :auto-focus="false" :muted="true" :enable-camera="true" :enable-mic="true"
					:zoom="true" :style="[{height: '400px' ,width:'100%'}]">
				</live-pusher>
			</view>
		</view>
		<view class="table-list-item">
		    <view class="scan-btn" @click="handleInstruct('shutter')">
				<text style="color: #FFF;">拍照识别</text> 
			</view> 
			<view class="scan-btn" @click="handleConfirm">
				<text style="color: #FFF;">确认提交</text> 
			</view> 
			<view class="scan-btn" @click="handleChooseImage">
				<text style="color: #FFF;">相册选择</text> 
			</view> 
		</view>
		<scroll-view class="scan-list-view" scroll-y="true">
			<view class="scan-list-item" v-for="item in scanResultList">
				<view class="item-view">
					<view style="width: 50%;word-break: break-all;" v-if="item.state==1">序号：{{item.num}}</view>
					<view style="width: 50%;word-break: break-all;"v-if="item.state==0">识别结果：不一致</view>
					<view style="width: 50%;word-break: break-all;"v-if="item.state==1">识别结果：一致</view>
				</view>
				<view class="item-view">
					<view style="width: 100%;word-break: break-all;">定值类型：{{item.typeName}}</view>
				</view>
				<view class="item-view">
					<view style="width: 100%;word-break: break-all;">定值名称：{{item.checkName}}</view>
				</view>
				<view class="item-view">
					<view style="width: 50%;word-break: break-all;">解析值：{{item.attributeValue}}</view>
					<view style="width: 50%;word-break: break-all;">识别值：{{item.checkValue}}</view>
				</view>
			</view> 
		</scroll-view>
	</view> 
</template>

<script>
	import config from '@/config'
	import { protectionAnalysisCheckApi,protectionAnalysisCheckResultApi,confirmAnalysisResultApi } from '@/api/protection/index.js'
	import { getToken } from '@/utils/auth'
	export default {
		data() {
			return {
				livePusher: null,
				ready: true,
				isTakePhoto:false,
				cameraHeight: '', //相机画面宽度  
				paramsData:{},
				protectionId:"",
				analysisId:"",
				subId:"",
				scanResultList: [],//页面图片数组（手机图片路径）  
			}
		},
		onShow() {
			
		},
		onLoad(options) {
			console.log(options)
			this.protectionId = options.protectionId
			this.paramsData = JSON.parse(options.params) 
			console.log(this.protectionId)
			console.log(this.paramsData)
		},
		onReady() { 
			this.cameraHeight = uni.getSystemInfoSync().screenHeight * 0.5
			console.log(this.cameraHeight)  
			this.init() 
		},
		methods: {
			//初始化相机
			init() { 
				this.livePusher = uni.createLivePusherContext('livePusher', this);
				console.log(this.livePusher)
				setTimeout(() => {
					this.startPreview()
				}, 1000)
			},
			// 开始相机
			startPreview() {
				this.livePusher.startPreview({
					success: () => {
						console.log('相机初始化成功');
						switch (plus.os.name) {
							case 'Android':
								break;
							case 'iOS':
								this.livePusher.switchCamera()
								break
						}
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			//截屏
			handleInstruct(instruct) {
				if (this.ready&&!this.isTakePhoto) {
					this.ready = false
					this.isTakePhoto = true;//拍照开始
					this.livePusher.snapshot({
						success: (res) => { 
							this.ready = true;   
							uni.uploadFile({
									url:  config.baseUrl+`/file/upload`, //服务器地址
									fileType:"dishes",//ZFB必填,不然报错
									filePath: res.message.tempImagePath,//这个就是我们上面拍照返回或者先中照片返回的数组
									name: "file",
									formData: {
										fileType:'dishes',
									},
									header: {
										'Authorization': 'Bearer ' + getToken(), 
									},
									success: (uploadFileRes) => {
										let uploadRes = JSON.parse(uploadFileRes.data)
										console.log(uploadRes)
										if(uploadRes.code==200){ 
											uni.showToast({
												title: '识别解析中...',
												icon: 'success', // 可以是 'success', 'loading', 'none' 等
												duration: 5000 // 显示时间，单位为毫秒
											});
											this.handleUploadScan(uploadRes.data.url)
										}else{
											this.isTakePhoto=false;
											uni.$u.toast('上传图片失败！');
										} 
									},
									fail: err => {
										this.isTakePhoto=false;
										uni.$u.toast('上传图片失败！');
										console.log(err)
									}
							});
							// this.$emit('getImage', res.message.tempImagePath)
						},
						fail: err => {
							this.isTakePhoto=false;
							uni.$u.toast('相机获取失败');
							console.log(err)
						}
					})
				}
			},
			handleChooseImage() {
				uni.chooseImage({ 
					count: 1,
					sourceType: ['album'],
					success: resImage => {
						console.log(resImage) 
						uni.uploadFile({
								url:  config.baseUrl+`/file/upload`, //服务器地址
								fileType:"dishes",//ZFB必填,不然报错
								filePath: resImage.tempFilePaths[0],//这个就是我们上面拍照返回或者先中照片返回的数组
								name: "file",
								formData: {
									fileType:'dishes',
								},
								header: {
									'Authorization': 'Bearer ' + getToken(), 
								},
								success: (uploadFileRes) => {
									let uploadRes = JSON.parse(uploadFileRes.data)
									console.log(uploadRes)
									if(uploadRes.code==200){ 
										this.handleUploadScan(uploadRes.data.url)
									}else{
										uni.$u.toast('上传失败');
									} 
								},
								fail: err => {
									uni.$u.toast('上传失败');
									console.log(err)
								}
						});
					}
				});
			}, 
			//上传扫描识别
			async handleUploadScan(uploadUrl) {
				try {
					let params = {
						protectionId:this.protectionId,
						checkUrlList:[uploadUrl],   
					} 
					if(this.analysisId&&this.analysisId!=""){
						params.analysisId = this.analysisId
					}
					const res = await protectionAnalysisCheckApi(params) 
					console.log('?? ~ 图片识别 ~ res:', res)
					if(res.code==200){ 
						uni.showToast({
							title: '识别解析完成',
							icon: 'success', // 可以是 'success', 'loading', 'none' 等
							duration: 1000 // 显示时间，单位为毫秒
						});
						this.analysisId=res.data.analysisId;
						this.subId = res.data.subId;
						this.getScanResult(res.data)
					}else{
						this.isTakePhoto=false;
						uni.showToast({
							title: '识别解析失败',
							icon: 'success', // 可以是 'success', 'loading', 'none' 等
							duration: 2000 // 显示时间，单位为毫秒
						});
					} 
				} catch (error) {
					console.log(error)
					this.isTakePhoto=false;
					uni.showToast({
						title: '解析算法失败',
						icon: 'success', // 可以是 'success', 'loading', 'none' 等
						duration: 2000 // 显示时间，单位为毫秒
					});
				}  
			},   
			//获取当次扫描结果
			async getScanResult(result) {
				console.log(result)
				// if(result){
					try {
						let params = {
							protectionId:result.protectionId,
							analysisId:result.analysisId,
							subId:result.subId
						}
						console.log(params)
						const res = await protectionAnalysisCheckResultApi(params) 
						console.log('?? ~ getList ~ res:', res)
						this.isTakePhoto=false;
						this.scanResultList=[]
						this.scanResultList = res.data;
					} catch (error) {
						console.log(error)
					}
				// }else{
				// 	uni.showToast({
				// 		title: '未查询到识别结果！',
				// 		icon: 'none',
				// 	}) 
				// }
			},
			async handleConfirm() {
				try { 
					let params = {  
						subId:this.subId
					}
					console.log(params)
					const res = await confirmAnalysisResultApi(params) 
					console.log('?? ~ getList ~ res:', res)
					if(res.code==200){
						this.isTakePhoto=false;
					 	uni.showToast({
					 		title: '提交成功',
					 		icon: 'success', // 可以是 'success', 'loading', 'none' 等 
					 	}); 
						uni.redirectTo({
						  url: `/pages/verify/checkingDetails?params=${JSON.stringify(this.paramsData)}&analysisId=${this.analysisId}`
						})
					}else{
					 	this.isTakePhoto=false;
					 	uni.showToast({
					 		title: '提交失败',
					 		icon: 'success', // 可以是 'success', 'loading', 'none' 等
					 		duration: 2000 // 显示时间，单位为毫秒
					 	});
					} 
				} catch (error) {
					console.log(error)
				}
			},
		}
	}
</script>

<style>
	.page {  
	  height: 750px; 
	}  
	.page-container { 
	    display: flex; 
	    height: 320px;
	    flex-direction: column;
	    background: #FFF;
	    padding: 20rpx;
		margin-bottom: 20rpx;  
	}
	.table-list-item {   
	    background: #fff;
	    padding: 20rpx;
	    margin-bottom: 20rpx;  
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	} 
	.scan-btn {
	    width: 160rpx;
	    height: 60rpx; 
	    background: #4b8eff;
		display: flex;
		justify-content: center;
		align-items: center;  
	    border-radius: 12rpx;
	    font-size: 24px;
	}  
	
	.scan-list-view{ 
		height: 340px;
		margin: 0 10px; 
		background: #FFF;
		padding: 10rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);  
		overflow-y: scroll; 
	}
	.scan-list-item{
		margin: 10px;
		background: #FFF;
		padding: 10rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);  
	}
	.item-view{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	
</style>