productLine-app/pages/index/index2.vue

<template>
	<!-- 商品点检 -->
	<view class="container">
		<uni-nav-bar  dark :fixed="true" shadow title="数智化产线AI视觉识别系统" backgroundColor="#007aff" color="#fff" height="60px">
			<view class="nav-bar-view" style="">数智化产线AI视觉识别系统</view>
		</uni-nav-bar>

		<view class="uni-ma-10 " style="text-align: center;font-size: 50rpx;">
			设备({{eqSn}})
			<uni-tag class="uni-ml-10" style="font-size: 40rpx;" size="normal" text="链接中" v-if="webSocketStatus==0" type="warning"></uni-tag>
			<uni-tag class="uni-ml-10" style="font-size: 40rpx;" size="normal"  text="已连接" v-else-if="webSocketStatus==1" type="primary"></uni-tag>
			<uni-tag class="uni-ml-10" style="font-size: 40rpx;" size="normal" text="重连中" v-else-if="webSocketStatus==2" type="success"></uni-tag>
			<uni-tag class="uni-ml-10" style="font-size: 40rpx;" size="normal"  text="已断开" v-else-if="webSocketStatus==-1" type="error"></uni-tag>
			<uni-tag class="uni-ml-10" style="font-size: 40rpx;" size="normal"  text="未知" v-else type="default"></uni-tag>
		</view>
		<uni-row class="demo-uni-row uni-ma-10">
			<uni-col :span="16" class="">
				<view class="img-card uni-mx-5">
					<image style="width: 100%;" mode="widthFix"  v-if="imgUrl"
						:src="imgUrl">
					</image>
					<view class="empty" v-else>
						<uni-icons type="image" size="80"></uni-icons>
					</view>
				</view>
			</uni-col>
			<uni-col :span="8">
				<view class="uni-mr-5">
					<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="150" align="center">商品二维码</uni-th>
							<!-- <uni-th width="100" align="center">图片</uni-th> -->
							<uni-th width="50">状态</uni-th>
							<uni-th align="center">识别结果</uni-th>
							<uni-th align="center">拍照时间</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in tableData" :key="index" @click-row="clickRow(item)">
							<template >
							<uni-td align="center">{{ item.goodsCode }}</uni-td>
							<!-- <uni-td align="center">
								<view style="max-height: 60rpx;"><image style="width: 100rpx;height: 60rpx;":src="item.goodsImage"></image></view>
							</uni-td> -->
							<uni-td align="center">
								<view :class="item.status==1?'uni-success':item.status==2?'uni-error':'uni-warning'">{{ item.status==1?'成功':item.status==2?'失败':'修正成功' }}</view>
							</uni-td>
							<uni-td align="center">{{ item.ocrResult }}</uni-td>
							<uni-td align="center">{{ item.createTime }}</uni-td>
							</template>
						</uni-tr>
					</uni-table>
					<view class="uni-pagination-box"><uni-pagination show-icon :page-size="size" :current="current"
							:total="total" @change="change" /></view>
				</view>
			</uni-col>
		</uni-row>
		
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" fontSizt="30px" :message="messageText" :duration="3000"></uni-popup-message>
		</uni-popup>
		
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff"  :mask-click="false">
			<view class="popup-header">物料详情</view>
			<view class="popup-content" >
				<uni-forms ref="detailsForm" :modelValue="details">
					<uni-forms-item v-for="(item,index) in details" :key="item.id" :label="item.materialName" required :rules="[{'required': true,errorMessage: item.materialName+'必填'}]" :name="index+'.materialCode'">
						<view class="form-item">
							<uni-easyinput v-model="details[index].materialCode" :disabled="true" :placeholder="'请输入或扫描'+item.materialName+'的条码' "@blur="(e)=>detailsForm.id=e.detail.value" />
						</view>
					</uni-forms-item>
				</uni-forms>
				<input class="uni-easyinput__content-input" ref="materialCode" v-model="materialCode"  :focus="true" :placeholder="'请输入或扫描物料条码' " @input="materialCodeInput"/>
				<view class="button-group">
					<button type="default" size="mini" @click="$refs.popup.close()">返回</button>
					<button type="primary" size="mini" @click="submit('detailsForm')">提交</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const websocketModule = uni.requireNativePlugin("kyzone-websocket");
	export default {
		data() {
			return {
				isConnect:false,
				tableData: [],
				// 每页数据量
				size: 10,
				// 当前页
				current: 1,
				// 数据总量
				total: 0,
				loading: false,
				eqSn: this.api.getSn(),
				imgUrl:'',//https://ai.my-123.cn/pic/product-line/upload/20231218/d0dde7a200584e6cdb2e2f02622b9948.jpg
				msgType:'',
				messageText:'',
				webSocketStatus:0,
				detailsForm:{},
				details:[],
				materialCode:'',
			}
		},
		onLoad() {
			if(!this.eqSn){
				let macAddress = that.api.getMacAddress()
				that.api.setSn(macAddress)
			}
			// this.webSocketConfig()
			this.getData(1)
			this.initWebSocket()
		},
		onUnload() {
		    // 页面销毁时执行的操作
		    console.log('页面销毁，onUnload被触发');
		    websocketModule.close()
		},
		methods: {
			initWebSocket(){
				websocketModule.close()
				var that = this
				let url = that.api.wsHost() + that.eqSn +"_"+ new Date().getTime()
				websocketModule.connect({
				     url: url,
				     reconnect: true, // 是否重连
					 headers:[],
				})
				plus.globalEvent.addEventListener('onConnectState', function(e) {
					debugger
					const data = e.data;
					that.webSocketStatus = data
				})
				plus.globalEvent.addEventListener('onErrorMsg', function(e) {
					debugger
					console.log("错误信息:" + e.data);
				})
				plus.globalEvent.addEventListener('onMessage', function(e) {
					debugger
					e.data = e.data.replace(/\"id\": (\d+)/g,'"id":"$1"');
					const data = JSON.parse(e.data);
					console.log("监听接收的信息:" );
					console.log(data);
					
					if(data.eqSn==that.eqSn){
						that.imgUrl = data.goodsImage
						that.msgType = data.status==1?'success':'error'
						that.messageText = data.ocrResult
						that.$refs.message.open()
						that.getData(1)
						if(data.status!=1){
							that.clickRow(data)
						}
						
						let innerAudioContext = uni.createInnerAudioContext();
						innerAudioContext.src = data.status==1?'../../static/cg.mp3':'../../static/sb.mp3';
						innerAudioContext.play();
						innerAudioContext.onPause(function() {
						   uni.$console.info('end');      
						  innerAudioContext.destroy();//音频播放停止后，就销毁实例  
						});
					}
				})
			},
			// 分页触发
			change(e) {
				this.getData(e.current)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				let that = this,
					url = "app/api/inspectionRecordsList",
					params = {
						current: pageCurrent,
						size: that.size,
						eqSn_equal: that.eqSn
					}
				that.api.request(url, params, "get").then((res) => {
					that.tableData = res.records
					that.total = res.total
					that.loading = false
				}).catch((res) => {
					that.loading = false
				})
				// this.request({
				// 	pageSize: this.pageSize,
				// 	pageCurrent: pageCurrent,
				// 	value: value,
				// 	success: res => {
				// 		// console.log('data', res);
				// 		this.tableData = res.data
				// 		this.total = res.total
				// 		this.loading = false
				// 	}
				// })
			},
			clickRow(item){
				let that = this
				this.imgUrl = item.goodsImage
				console.log(item)
				if(item.status==2 && item.goodsId>0){
					this.$refs.popup.open("center")
					this.details=[];
					that.api.request("app/api/getInspectionDetails", {inspectionRecordsId_equal:item.id}, "get").then((res) => {
						that.details = res
						console.log(res)
					}).catch((res) => {
						that.loading = false
					})
				}
			},
			submit(ref) {
				let that = this;
				this.$refs[ref].validate().then(res => {
					console.log("123123")
					that.api.request("app/api/editInspectionDetails",that.details, "post").then((res) => {
						that.$refs.popup.close()
						uni.showToast({
							title: `修改成功`
						})
						that.getData(1)
					}).catch((res) => {
						that.loading = false
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			materialCodeInput(e){
				let that = this;
				let value = e.target.value;
				this.$nextTick(()=>{
					that.materialCode='';
				})
				let count = 0;
				that.details.forEach(function(item, index) {
					if(item.correctMaterialCode == value){
						console.log(index)
						if(!item.materialCode){
							that.$nextTick(()=>{
								that.details[index].materialCode = value
							})
							count++
						}
					}
					if(item.materialCode){
						count++
					}
				})
				if(count >= that.details.length){
					console.log(count)
					that.$nextTick(()=>{
						setTimeout(() => {
							console.log("detailsForm")
							that.submit('detailsForm')
						}, 500)
					})
				}
				return
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}
	.img-card{
		box-shadow: 0 0 5px 1px rgba(0,0,0,.08);
		min-height: 1300rpx;
		text-align: center;
		.empty{
			padding-top: 600rpx;
		}
	}
	.nav-bar-view{
		display: flex;
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		overflow: hidden;
		font-size: 50rpx;
		font-weight: bold;
	}
	.popup-header{
		padding: 20rpx 20rpx;
		font-size: 30rpx;
		border-bottom: 2rpx #bcbcbc solid;
	}
	.popup-content{
		margin: 100rpx;
		.button-group{
			margin-top: 15px;
			display: flex;
			justify-content: space-around;
			button{
				width: 200rpx;
				padding: 10rpx 0;
			}
		}
	}
	.uni-easyinput__content-input {
		color: #333;
		line-height: 35px;
		font-size: 14px;
		height: 35px;
		border: 1px solid $uni-border-1;
		border-radius: 4px;
		padding: 0 15px;
	}
</style>