600 lines
22 KiB
Vue
600 lines
22 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')
|
||
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
|
||
.bindRfidClose({
|
||
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
|
||
.bindRfidClose({
|
||
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>
|