509 lines
12 KiB
Vue
509 lines
12 KiB
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')
|
||
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 goVeri = rfidMod.redTag()
|
||
console.log(goVeri);
|
||
if (goVeri.code == 1001) {
|
||
that.showPrompt = false; // 关闭提示
|
||
that.rfidCode = goVeri.res
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '识别成功',
|
||
success: () => {
|
||
// 调用编码获取设备信息
|
||
that.$api.fetchMaterialOutStore.searchRfid({
|
||
rfidCode: goVeri.res
|
||
}).then(res => {
|
||
console.log(res);
|
||
if (res.data.code == 200) {
|
||
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(() => {
|
||
console.log(that);
|
||
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);
|
||
})
|
||
})
|
||
}, 1000)
|
||
}
|
||
|
||
},
|
||
onLoad() {
|
||
// 初始化rfid识别
|
||
rfidMod.initUHF()
|
||
|
||
// 筛入频率
|
||
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);
|
||
})
|
||
}
|
||
}
|
||
</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> |