SmartStorage/pages/rfidBinding/rfidBinding.vue

<template>
	<view class="hole-page">
		<view class="upper-bgd">
			<h4 style="font-size: 16px; font-weight: normal;">RFID标签绑定</h4>
			<!-- <uni-data-select v-model="powerVal" :localdata="powerRange" placeholder="请选择功率" @change="powerChange"
				:clear="false"></uni-data-select> -->
		</view>
		<view class="lower-rfid" v-show="showStats">
			<view class="stat-cont">
				<view class="cont-upper">
					<h4 style="font-size: 14px;">识别数据</h4>
					<view style="color: #3198FF; font-size: 12px;" @click="clearStat">
						<uni-icons type="trash" size="12" style="color: #3198FF;"></uni-icons>
						清空数据
					</view>
				</view>
				<view class="cont-lower">
					<view>
						<h4>物资名称</h4>
						<span>{{ bindStats.typeName }}</span>
					</view>
					<view>
						<h4>物资规格</h4>
						<span>{{ bindStats.typeCode }}</span>
					</view>
					<view>
						<h4>物资编号</h4>
						<span>{{ bindStats.maCode }}</span>
					</view>
					<view>
						<h4>物资状态</h4>
						<span>{{ bindStats.sdStatus }}</span>
					</view>
					<!-- <view>
						<h4>本次维修时间</h4>
						<span>5</span>
					</view>
					<view>
						<h4>下次维修时间</h4>
						<span>6</span>
					</view>
					<view>
						<h4>所属工程名称</h4>
						<span>7</span>
					</view>
					<view>
						<h4>领料单位名称</h4>
						<span>8</span>
					</view> -->
				</view>
			</view>
		</view>

		<view v-show="showDev">
			<uni-forms ref="qrForm" :modelValue="qrFormData" label-position="top" :rules="rules" class="qr-stats">
				<uni-forms-item name="typeVal" required label="设备类型">
					<zxz-uni-data-select v-model="qrFormData.typeVal" :localdata="typeRange" @change="typeChange"
						filterable>
					</zxz-uni-data-select>
				</uni-forms-item>
				<uni-forms-item name="specVal" required label="规格型号">
					<uni-data-select v-model="qrFormData.specVal" :localdata="specRange"
						@change="specChange"></uni-data-select>
				</uni-forms-item>
				<view class="middle">
					<h4 style="font-weight: normal; margin-bottom: 15rpx;">标签编号：</h4>
					<span>{{ qrcode }}</span>
				</view>
				<uni-forms-item name="deviceCode" required label="设备编号">
					<uni-easyinput v-model="qrFormData.deviceCode"></uni-easyinput>
				</uni-forms-item>

				<view>
					<view>RFID:</view>
					<input class="uni-input" readonly v-model="rfid" />
				</view>
			</uni-forms>
			<u-loading-page :loading="showLoading" color="#000" loading-text="加载中,请稍后..."></u-loading-page>
		</view>

		<!-- <div v-if="showPrompt" class="prompt">{{ promptMessage }}</div> -->
		<!-- 添加新的加载效果 -->
		<div v-if="showPrompt" class="custom-loading-overlay">
			<div class="custom-loading-content">
				<div class="custom-spinner"></div>
				<p>{{ promptMessage }}</p>
			</div>
		</div>

		<view class="btns-area">
			<view @click="startVeri">开始识别</view>
			<view @click="toggleBind" v-show="showBid">绑定</view>
			<view @click="toggleBinds" v-show="showDev">绑定</view>
		</view>
	</view>
</template>

<script>
	// const rfidMod = uni.requireNativePlugin('BNS-RfidRed')
	var rfidModule = uni.requireNativePlugin("DeviceModule_RFID");
	export default {
		data() {
			return {
				showStats: false,
				showDev: false,
				showBid: true,
				rfidCode: '',
				maId: '',
				maCode: '',
				powerVal: 0,
				powerRange: [

				],
				bindStats: {},
				showLoading: false,
				qrFormData: {
					typeVal: '',
					specVal: '',
					deviceCode: ''
				},
				rules: {
					typeVal: {
						rules: [{
							required: true,
							errorMessage: '请输设备类型！'
						}]
					},
					specVal: {
						rules: [{
							required: true,
							errorMessage: '请输规格型号！'
						}]
					},
					deviceCode: {
						rules: [{
							required: true,
							errorMessage: '请输设备编号！'
						}]
					},
				},

				qrcode: '',
				typeRange: [],
				specRange: [],
				rfid: '',

				showPrompt: false, // 控制提示框的显示状态
				promptMessage: '' // 存储提示信息
			}
		},
		methods: {
			startVeri() {
				let that = this
				that.showPrompt = true;
				that.promptMessage = '识别中，请稍候...';
				// 延迟关闭提示，显示Toast
				setTimeout(() => {
					let jsonData = {
						"bank": 1,
						"ptr": 2,
						"cnt": 6,
						"accessPwd": "00000000"
					}
					let goVeri = rfidModule.readData(jsonData)
					// let goVeri = rfidMod.redTag()
					// console.log(goVeri);
					if (goVeri.code == 0) {
						that.showPrompt = false; // 关闭提示
						that.rfidCode = goVeri.data
						uni.showToast({
							icon: 'none',
							title: '识别成功',
							success: () => {
								// 调用编码获取设备信息
								that.$api.fetchMaterialOutStore.searchRfid({
									rfidCode: goVeri.data
								}).then(res => {
									console.log(res);
									console.log(res.data.data[0]);

									if (res.data.data.length > 0) {
										that.bindStats = res.data.data[0]
										that.maCode = res.data.data[0].maCode
										that.maId = res.data.data[0].maId
										that.showStats = true
										that.showDev = false
										that.showBid = true
									} else {
										that.showDev = true
										that.showBid = false
										that.showStats = false
										that.rfid = that.rfidCode
									}
								}).catch(err => {
									console.log(err);
								})
							}
						})
					} else if (goVeri.code == 1000) {
						that.showPrompt = false; // 关闭提示
						that.showLoading = false
						uni.showToast({
							icon: 'none',
							title: '获取设备信息失败，请重新扫描！'
						})
					}
				}, 1000)
			},
			toggleBind() {
				let that = this
				this.showPrompt = true;
				this.promptMessage = '正在绑定，请稍候...';
				// 延迟关闭提示，显示Toast
				setTimeout(() => {

					if (that.maCode == '' || that.maId == '') {
						this.showPrompt = false; // 关闭提示
						uni.showToast({
							icon: 'none',
							title: '未识别到绑定设备！'
						})
					} else {
						that.$api.rfidBinding.bindRfid({
							rfidCode: that.rfidCode,
							maId: that.maId,
							maCode: that.maCode,
						}).then(res => {
							this.showPrompt = false; // 关闭提示
							console.log(res);
							if (res.data.code == 200) {
								uni.showToast({
									icon: 'none',
									title: res.data.msg,
									success: () => {
										uni.switchTab({
											url: '/pages/workSpace/workSpace'
										})
									}
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								})
							}
						}).catch(err => {
							this.showPrompt = false; // 关闭提示
							console.log(err);
						})
					}
				}, 1000)
			},
			clearStat() {
				let that = this
				that.rfidCode = ''
				that.maCode = ''
				that.maId = ''
				that.showStats = false
			},
			// powerChange(e) {
			// 	console.log(e);
			// 	const ctrlPower = rfidMod.setPower(e)
			// 	console.log(ctrlPower);
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: ctrlPower.res
			// 	})
			// },
			// 根据设备类型获取规格类型
			typeChange(e) {
				let that = this
				console.log(e);
				// 根据设备类型获取规格类型
				that.$api.qrcodeBinding.fetchDeviceSpec({
					level: '4',
					parentId: String(e.value)
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						that.specRange = res.data.data.map(item => {
							return {
								text: item['typeName'],
								value: item['typeId'],
								code: item['code'],
								modelCode: item['modelCode']
							}
						})
					}
				}).catch(err => {
					console.log(err);
				})
			},

			specChange(e) {
				let that = this
				console.log(e, that.specRange);
				const confirmedRange = that.specRange.filter(item => {
					return item.value == e
				})
				console.log(confirmedRange);
				if (confirmedRange[0].code && confirmedRange[0].modelCode) {
					that.qrFormData.deviceCode = `NS${confirmedRange[0].code}${confirmedRange[0].modelCode}`
				} else {
					that.qrFormData.deviceCode = ''
				}

			},
			toggleBinds() {
				let that = this

				this.showPrompt = true;
				this.promptMessage = '正在绑定，请稍候...';
				// 延迟关闭提示，显示Toast
				setTimeout(() => {
					that.$refs.qrForm.validate().then(formData => {
						that.showLoading = true
						console.log(formData);
						that.$api.rfidBinding.bindRfid({
							rfidCode: that.rfidCode,
							maCode: formData.deviceCode,
						}).then(res => {
							this.showPrompt = false; // 关闭提示
							console.log(res);
							if (res.data.code == 200) {
								that.showLoading = false
								uni.showToast({
									icon: 'none',
									title: res.data.msg,
									success: () => {
										uni.switchTab({
											url: '/pages/workSpace/workSpace'
										})
									}
								})
							} else {
								that.showLoading = false
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								})
							}
						}).catch(err => {
							this.showPrompt = false; // 关闭提示
							console.log(err);
						})
					}).catch(validationError => {
						// 验证失败的情况
						this.showPrompt = false;
						uni.showToast({
							icon: 'none',
							title: '表单验证失败，请检查输入'
						});
						console.error('Validation error:', validationError);
					});
				}, 1000)
			}

		},
		onLoad() {

			// 使用模块前必须先初始化RDIF模块
			let res = rfidModule.init();
			console.log(res)
			// log(JSON.stringify(res));
			if (res.code == 0) {
				// this.isLoading = false;
			} else if (res.code == -1) {
				uni.showToast({
					title: 'RFID模块加载失败'
				})
			}
			// 初始化rfid识别
			// const obj = rfidMod.initUHF()
			// console.log(obj);
			// 筛入频率
			for (let i = 5; i <= 30; i++) {
				this.powerRange.push({
					value: i,
					text: String(i)
				})
			}

			let that = this
			// 获取机具设备类型
			that.$api.qrcodeBinding.fetchDeviceType({
				level: '3'
			}).then(res => {
				console.log(res);
				if (res.data.code == 200) {
					that.typeRange = res.data.data.map(item => {
						return {
							text: item['typeName'],
							value: item['typeId']
						}
					})
				}
			}).catch(err => {
				console.log(err);
			})
		},
		// mounted() {
		//     setTimeout(() => {
		//         // 使用模块前必须先初始化RDIF模块
		//         let res = rfidModule.init();
		//         // log(JSON.stringify(res));
		//         if (res.code == 0) {
		//             this.isLoading = false;
		//         } else if (res.code == -1) {
		//             uni.showToast({
		//                 title: 'RFID模块加载失败'
		//             })
		//         }
		//     }, 400);

		// },
		// beforeDestroy() {
		//     // 移除按键事件
		//     plus.key.removeEventListener('keydown', this.keyListener)
		//     // 使用完毕必须释放RDIF模块
		//     let res = rfidModule.free();
		// 	console.log("使用完毕必须释放RDIF模块",res)
		//     // log("free: " + JSON.stringify(res))
		// },
	}
</script>

<style lang="scss">
	.hole-page {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: url('/static/workspace-bgd.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;

		.upper-bgd {
			width: 100%;
			height: 20%;
			box-sizing: border-box;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			h4 {
				color: #fff;
			}

			.uni-select[data-v-6b64008e] {
				background-color: #fff;
			}
		}

		.lower-rfid {
			flex: 1;
			margin-top: -3%;
			border-radius: 25rpx;
			box-sizing: border-box;
			padding: 0 25rpx;

			.stat-cont {
				width: 100%;
				box-sizing: border-box;
				padding: 15rpx;

				.cont-upper {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
				}

				.cont-lower {
					width: 100%;
					display: flex;
					flex-direction: column;

					view {
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;

						h4 {
							width: 35%;
							font-weight: normal;
							font-size: 14px;
							color: #929292;
						}

						span {
							font-size: 14px;
						}
					}
				}
			}
		}

		.btns-area {
			position: absolute;
			width: 70%;
			left: 15%;
			bottom: 5%;
			height: 15%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			view {
				width: 100%;
				box-sizing: border-box;
				padding: 15rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #3888FF;
				color: #fff;
				font-size: 14px;
				border-radius: 25rpx;
			}
		}
	}

	// 添加新的加载效果样式
	.custom-loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.custom-loading-content {
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.custom-spinner {
		width: 40px;
		height: 40px;
		border: 4px solid #f3f3f3;
		border-top: 4px solid #3498db;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 10px;
	}
</style>