productLine-app/pages/index/index1.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,index)">
							<template @click="clickRow(item)">
							<uni-td align="center">{{ item.qrCode }}</uni-td>
							<!-- <uni-td align="center">
								<view style="max-height: 60rpx;"><image style="width: 100rpx;height: 60rpx;":src="item.productImage"></image></view>
							</uni-td> -->
							<uni-td align="center">
								<view :class="item.status==1?'uni-success':'uni-error'">{{ item.status==1?'成功':'失败' }}
								</view>
							</uni-td>
							<uni-td align="center">{{ item.message }}</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="76rpx" :message="messageText" :duration="3000"></uni-popup-message>
		</uni-popup>
		
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" type="center"  background-color="#fff" :mask-click="false" >
			<view class="popup-content popup-height" >
				<view style="margin: 100rpx 400rpx 200rpx; 400rpx;">
					<view style="margin: 200rpx 0;font-size:76rpx;">产品000020009528-010010142308AI检测为NG，请确认</view>
					<view style="margin-bottom: 200rpx;">
						<uni-row :gutter="100">
							<uni-col :span="12">
								<button class="mini-btn" type="default" style="font-size: 60rpx;" @click="productOkOrNg(0)" :loading="btnLoad" :disabled="btnLoad">AI误判</button>
							</uni-col>
							<uni-col :span="12">
								<button class="mini-btn" type="primary" style="font-size: 60rpx;" @click="productOkOrNg(1)" :loading="btnLoad" :disabled="btnLoad">发起维修</button>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	var socketTaskChat //全局定义websocket创建的实例名称
	var interVal //全局定义定时执行心跳监测定时器ID，用于清除定时器
	var reconnectTimer //全局定义定时执行一次重连定时器ID，用于清除定时器

	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:'',
				contentText:'',
				productId:'',
				btnLoad:false,
				webSocketStatus:0,
			}
		},
		onLoad() {
			if(!this.eqSn){
				let macAddress = that.api.getMacAddress()
				that.api.setSn(macAddress)
			}
			this.initWebSocket()
			this.getData(1)
		},
		methods: {
			initWebSocket(){
				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
					const data = JSON.parse(e.data.replace(/\"productId\":(\d+)/, '"productId": "$1"'));
					console.log("监听接收的信息:" + e.data);
					console.log( data);
					
					if(data.eqSn==that.eqSn){
						that.productInfoClean();
						if(data.productId){
							that.productId = data.productId
							console.log("产品ID:"+that.productId)
						}
						that.imgUrl = data.productAiImage?data.productAiImage:data.productImage
						that.msgType = data.status==1?'success':'error'
						that.messageText = data.message
						that.$refs.message.open()
						if(data.isNg==1){
							that.contentText = "产品"+data.qrCode+"AI检测为NG，请确认"
							that.$refs.popup.open('center')
						}else{
							that.$refs.popup.close()
						}
						that.getData(1)
						
						let innerAudioContext = uni.createInnerAudioContext();
						innerAudioContext.src = data.status==1?'../../static/cg.mp3':'../../static/sb.mp3';
						innerAudioContext.play();
						innerAudioContext.onPause(function() {
						  innerAudioContext.destroy();//音频播放停止后，就销毁实例  
						});
					}
				})
			},
			// 分页触发
			change(e) {
				this.getData(e.current)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				let that = this,
					url = "app/api/productImgList",
					params = {
						current: pageCurrent,
						size: that.size,
						eqSn_equal: that.eqSn
					}
				that.api.request(url, params, "get").then((res) => {
					// console.log(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,index){
				this.imgUrl = item.productAiImage?item.productAiImage:item.productImage
			},
			productOkOrNg(isNg){
				this.btnLoad = true;
				let that = this,
				url = "app/api/productOkOrNg",
				params = {
					productId:that.productId,
					aiImg:that.imgUrl,
					isNg:isNg,
				}
				that.api.request(url, params, "get").then((res) => {
					// uni.showToast({
					// 	title: '操作成功',
					// 	duration: 2000
					// });
					that.productInfoClean();
					this.$refs.popup.close()
				}).catch((res) => {
					that.btnLoad = false;
				})
			},
			productInfoClean(){
				this.productId='';
				this.btnLoad = false;
			},
		}
	}
</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;
	}
</style>