liubiao/APP
1
0
Fork 0
forked from dyf/APP
Code Pull Requests Activity

修复蓝牙设备6155/7305全局弹窗与详情弹窗重复出现的问题

Browse Source 
# Conflicts:
#	pages/7305/BJQ7305.vue
This commit is contained in:
liub
2025-10-24 11:08:32 +08:00
parent a5c6faa9da fa64e7f1fc
commit 1d8b3b4a9a
3 changed files with 330 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
components/TextToHex/textToDotMatrixFor7305.vue Normal file
View File

@ -0,0 +1,205 @@
<template>
<view>
<canvas type="2d" canvas-id="reusableCanvas" :width="currentCanvasWidth" :height="currentCanvasHeight"
class="offscreen-canvas"></canvas>
</view>
</template>
<script>
export default {
name: "textToDotMatrix",
props: {
txts: {
type: Array,
default: () => [],
validator: (value) => value.every(item => typeof item === 'string')
},
fontSize: {
type: Number,
default: 16,
validator: (value) => value > 0 && value <= 100
},
bgColor: {
type: String,
default: "#ffffff"
},
color: {
type: String,
default: "#000000"
}
},
data() {
return {
// 当前Canvas的宽高（动态调整）
currentCanvasWidth: 0,
currentCanvasHeight: 0,
// Canvas上下文（复用）
ctx: null
};
},
computed: {
validTxts() {
return this.txts.filter(line => line.trim() !== '');
}
},
mounted() {
// 初始化Canvas上下文（只创建一次）
this.ctx = uni.createCanvasContext('reusableCanvas', this);
},
methods: {
/**
* 估算单行文本所需的Canvas宽度
*/
calcLineWidth(textLine) {
return textLine.length * this.fontSize;
},
/**
* 清除Canvas内容
*/
clearCanvas() {
this.ctx.setFillStyle(this.bgColor);
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
},
/**
* 复用单个Canvas处理所有文本行
*/
async drawAndGetPixels() {
let binaryToHex = (binaryArray) => {
if (!Array.isArray(binaryArray) || binaryArray.length !== 8) {
throw new Error("输入必须是包含8个元素的二进制数组");
}
// 检查每个元素是否为0或1
if (!binaryArray.every(bit => bit === 0 || bit === 1)) {
throw new Error("数组元素必须只能是0或1");
}
// 将二进制数组转换为十进制数
let decimalValue = 0;
for (let i = 0; i < 8; i++) {
// 计算每个位的权重并累加
decimalValue += binaryArray[i] * Math.pow(2, 7 - i);
}
// 将十进制转换为十六进制字符串，并添加0x前缀
const hexString = "0x" + decimalValue.toString(16).padStart(2, '0').toUpperCase();
return hexString;
}
let convertCharToMatrix = (imageData, item) => {
const charWidth = 13;
const charHeight = 12;
const pixels = [];
for (let i = 0; i < imageData.length; i += 4) {
const R = imageData[i];
pixels.push(R < 128 ? 1 : 0);
}
const lowBytes = new Array(charWidth).fill(0);
const highBytes = new Array(charWidth).fill(0);
for (let col = 0; col < charWidth; col++) {
for (let row = 0; row < charHeight; row++) {
const pixel = pixels[row * charWidth + col];
if (pixel === 1) {
if (row < 8) {
lowBytes[col] |= (1 << row);
} else {
highBytes[col] |= (1 << (row - 8));
}
}
}
}
return [...lowBytes, ...highBytes];
}
let drawTxt = async (textLine) => {
let result = {};
let ctx = this.ctx;
// 1. 动态调整Canvas尺寸
this.currentCanvasWidth = 13;
this.currentCanvasHeight = 12;
// 2. 清空Canvas（绘制背景）
this.clearCanvas();
// 3. 设置文字样式
ctx.setFillStyle(this.color);
ctx.setTextBaseline('middle');
// ctx.setTextAlign('center')
ctx.setFontSize(this.fontSize);
ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
// 4. 绘制当前行文本
let currentX = 0;
let currentY = this.fontSize / 2 + 1;
for (let j = 0; j < textLine.length; j++) {
let char = textLine[j];
ctx.fillText(char, currentX, currentY);
// 按实际字符宽度计算间距
let charWidth = ctx.measureText(char).width;
currentX += charWidth;
}
// 5. 异步绘制并获取像素数据（串行处理避免冲突）
await new Promise((resolve, reject) => {
ctx.draw(false, () => {
uni.canvasGetImageData({
canvasId: 'reusableCanvas',
x: 0,
y: 0,
width: this.currentCanvasWidth,
height: this.currentCanvasHeight,
success: res => {
result = {
line: textLine,
pixelData: res.data,
width: this.currentCanvasWidth,
height: this.currentCanvasHeight
};
resolve();
},
fail: err => {
// console.error(`处理第${i+1}行失败:`, err);
reject(err)
}
});
});
});
return result;
}
let arr = [];
// 循环处理每行文本
for (let i = 0; i < this.validTxts.length; i++) {
let linePixls = [];
let item = this.validTxts[i];
// console.log("item=", item);
for (var j = 0; j < item.length; j++) {
let result = await drawTxt(item[j]);
linePixls.push(convertCharToMatrix(result.pixelData, item));
}
// console.log("hexs=", linePixls.join(","));
arr.push(linePixls);
}
return arr;
}
}
};
</script>
<style>
.offscreen-canvas {
position: fixed;
left: -9999px;
top: -9999px;
visibility: hidden;
}
</style>

230
pages/7305/BJQ7305.vue
View File

@ -87,67 +87,69 @@
<text class="usrtitle fleft">人员信息登记</text>
<view class="btnSend fright" v-on:click.stop="sendUsr">发送</view>
<view class="clear"></view>
<textToDotMatrixV1 class="TextToHex" ref="textToHex" :txts="formData.textLines" :bgColor="'#FFFFFF'"
:color="'#000000'" :fontSize="13" />
<textToDotMatrixFor7305 class="TextToHex" ref="textToHex" :txts="formData.textLines"
:bgColor="'#FFFFFF'" :color="'#000000'" :fontSize="11" / </view>
<view class="item">
<text class="lbl">单位：</text>
<input class="value" v-model="formData.textLines[0]" placeholder="请输入单位"
placeholder-class="usrplace" />
</view>
<view class="item">
<text class="lbl">部门：</text>
<input class="value" v-model="formData.textLines[1]" placeholder="请输入姓名"
placeholder-class="usrplace" />
</view>
<view class="item">
<text class="lbl">姓名：</text>
<input class="value" v-model="formData.textLines[2]" placeholder="请输入职位"
placeholder-class="usrplace" />
</view>
</view>
<view class="proinfo lamp">
<text class="title">产品信息</text>
<view class="itemcontent">
<view class="item" @click="proParam()">
<image class="img" src="/static/images/6155/DeviceDetail/param.png" mode="aspectFit"></image>
<text class="txt">产品参数</text>
</view>
<view class="item" @click="handRemark()">
<image class="img" src="/static/images/6155/DeviceDetail/remark.png" mode="aspectFit"></image>
<text class="txt">操作说明</text>
</view>
<view class="item" @click="handVideo()">
<image class="img" src="/static/images/6155/DeviceDetail/video.png" mode="aspectFit"></image>
<text class="txt">操作视频</text>
</view>
</view>
</view>
<view class="item">
<text class="lbl">单位：</text>
<input class="value" v-model="formData.textLines[0]" placeholder="请输入单位" placeholder-class="usrplace" />
</view>
<view class="item">
<text class="lbl">部门：</text>
<input class="value" v-model="formData.textLines[1]" placeholder="请输入姓名" placeholder-class="usrplace" />
</view>
<view class="item">
<text class="lbl">姓名：</text>
<input class="value" v-model="formData.textLines[2]" placeholder="请输入职位" placeholder-class="usrplace" />
</view>
<!-- 弹窗通知 -->
<MessagePopup :visible="Status.Pop.showPop" :type="Status.Pop.popType" :bgColor="Status.Pop.bgColor"
:borderColor="Status.Pop.borderColor" :textColor="Status.Pop.textColor"
:buttonBgColor="Status.Pop.buttonBgColor" :buttonTextColor="Status.Pop.buttonTextColor"
:iconUrl="Status.Pop.iconUrl" :message="Status.Pop.message" :buttonText="Status.Pop.buttonText"
@buttonClick="HidePop" @closePop="closePop" :visiblePrompt="Status.Pop.visiblePrompt"
:promptTitle="Status.Pop.promptTitle" v-model="Status.Pop.modelValue" />
<!-- 下方菜单 -->
<BottomSlideMenuPlus :config="Status.BottomMenu" @close="closeMenu" @itemClick="handleItemClick"
@btnClick="btnClick">
<view class="addIco">
<view class="icoContent center" v-on:click.stop="checkImgUpload()">
<image mode="aspectFit" class="img" src="/static/images/6155/DeviceDetail/add.png"></image>
</view>
</view>
</BottomSlideMenuPlus>
<global-loading ref="loading" />
</view>
<view class="proinfo lamp">
<text class="title">产品信息</text>
<view class="itemcontent">
<view class="item" @click="proParam()">
<image class="img" src="/static/images/6155/DeviceDetail/param.png" mode="aspectFit"></image>
<text class="txt">产品参数</text>
</view>
<view class="item" @click="handRemark()">
<image class="img" src="/static/images/6155/DeviceDetail/remark.png" mode="aspectFit"></image>
<text class="txt">操作说明</text>
</view>
<view class="item" @click="handVideo()">
<image class="img" src="/static/images/6155/DeviceDetail/video.png" mode="aspectFit"></image>
<text class="txt">操作视频</text>
</view>
</view>
</view>
<!-- 弹窗通知 -->
<MessagePopup :visible="Status.Pop.showPop" :type="Status.Pop.popType" :bgColor="Status.Pop.bgColor"
:borderColor="Status.Pop.borderColor" :textColor="Status.Pop.textColor"
:buttonBgColor="Status.Pop.buttonBgColor" :buttonTextColor="Status.Pop.buttonTextColor"
:iconUrl="Status.Pop.iconUrl" :message="Status.Pop.message" :buttonText="Status.Pop.buttonText"
@buttonClick="HidePop" @closePop="closePop" :visiblePrompt="Status.Pop.visiblePrompt"
:promptTitle="Status.Pop.promptTitle" v-model="Status.Pop.modelValue" />
<!-- 下方菜单 -->
<BottomSlideMenuPlus :config="Status.BottomMenu" @close="closeMenu" @itemClick="handleItemClick"
@btnClick="btnClick">
<view class="addIco">
<view class="icoContent center" v-on:click.stop="checkImgUpload()">
<image mode="aspectFit" class="img" src="/static/images/6155/DeviceDetail/add.png"></image>
</view>
</view>
</BottomSlideMenuPlus>
<global-loading ref="loading" />
</view>
</template>
<script>
import textToDotMatrixV1 from '@/components/TextToHex/textToDotMatrixV1.vue';
import textToDotMatrixFor7305 from '@/components/TextToHex/textToDotMatrixFor7305.vue';
import bleTool from '@/utils/BleHelper.js';
import usrApi from '@/api/670/HBY670.js'
import {
@ -165,7 +167,7 @@
var pagePath = "/pages/7305/BJQ7305";
export default {
components: {
textToDotMatrixV1
textToDotMatrixFor7305
},
data() {
return {
@ -273,9 +275,9 @@
ble.addReceiveCallback(these.bleValueNotify, pagePath);
ble.addStateBreakCallback(these.bleStateBreak, pagePath);
ble.addStateRecoveryCallback(these.bleStateRecovry,pagePath);
ble.addDisposeCallback(these.deviceDispose,pagePath);
ble.addRecoveryCallback(these.deviceRecovry,pagePath);
ble.addStateRecoveryCallback(these.bleStateRecovry, pagePath);
ble.addDisposeCallback(these.deviceDispose, pagePath);
ble.addRecoveryCallback(these.deviceRecovry, pagePath);
let eventChannel = this.getOpenerEventChannel();
eventChannel.on('detailData', function(data) {
@ -311,9 +313,9 @@
these.formData.img = device.devicePic;
these.formData.id = device.id;
these.formData.deviceId = f.deviceId;
ble.LinkBlue(f.deviceId, f.writeServiceId, f.wirteCharactId, f.notifyCharactId).then(res=>{
ble.LinkBlue(f.deviceId, f.writeServiceId, f.wirteCharactId, f.notifyCharactId).then(res => {
console.log("连接成功")
these.formData.bleStatu=true;
these.formData.bleStatu = true;
});
these.setBleFormData();
these.getDetail();
@ -377,40 +379,40 @@
}
},
methods: {
deviceRecovry(res){
if(this.Status.pageHide){
deviceRecovry(res) {
if (this.Status.pageHide) {
return;
}
if(res.deviceId==these.formData.deviceId){
this.formData.bleStatu=true;
setTimeout(()=>{
hideLoading(these,1000);
if (res.deviceId == these.formData.deviceId) {
this.formData.bleStatu = true;
setTimeout(() => {
hideLoading(these, 1000);
});
uni.showToast({
icon:'success',
title:'蓝牙连接成功'
icon: 'success',
title: '蓝牙连接成功'
});
}
},
deviceDispose(res){
if(this.Status.pageHide){
deviceDispose(res) {
if (this.Status.pageHide) {
return;
}
if(res.deviceId==these.formData.deviceId){
this.formData.bleStatu=false;
setTimeout(()=>{
hideLoading(these,1000);
if (res.deviceId == these.formData.deviceId) {
this.formData.bleStatu = false;
setTimeout(() => {
hideLoading(these, 1000);
});
uni.showToast({
icon:'fail',
title:'蓝牙连接已断开'
icon: 'fail',
title: '蓝牙连接已断开'
});
}
},
bleStateBreak() {
if(this.Status.pageHide){
if (this.Status.pageHide) {
return;
}
//蓝牙适配器不可用
@ -423,18 +425,18 @@
},
bleStateRecovry() {
console.log("蓝牙可用");
if(this.Status.pageHide){
if (this.Status.pageHide) {
return;
}
console.log("蓝牙可用");
console.log("蓝牙可用");
//蓝牙适配器再次可用,尝试恢复连接
showLoading(this, {
text: "蓝牙恢复可用,正在连接设备"
});
ble.LinkBlue(these.formData.deviceId).then(() => {
these.formData.bleStatu = true;
updateLoading(these,{
text:'连接成功'
updateLoading(these, {
text: '连接成功'
});
}).catch(ex => {
updateLoading(these, {
@ -465,13 +467,13 @@
return f;
},
bleValueNotify: function(receive, device, path,recArr) {
bleValueNotify: function(receive, device, path, recArr) {
if (this.Status.pageHide) {
return;
}
let json = recei.ReceiveData(receive, device, path,recArr);
let json = recei.ReceiveData(receive, device, path, recArr);
if (!json) {
return;
}
@ -538,7 +540,7 @@
events: {
BindOver: function(data) {
console.log(data)
these.formData.bleStatu=true;
these.formData.bleStatu = true;
}
},
success: function(res) {
@ -574,13 +576,15 @@
const header = [0xFA, 0x09, 0x04, 0x00];
const footer = [0xFF];
const imageData = packetData.map(hex => parseInt(hex, 16));
// 确保图像数据为1024字节，不足则补0
while (imageData.length < 1024) {
imageData.push(0x00);
}
const fullPacket = new Uint8Array([...header, ...imageData.slice(0, 1024), ...footer]);
const fullPacket = new Uint8Array([...header, ...imageData.slice(0, 1024), ...
footer
]);
const fullBuffer = fullPacket.buffer;
// 2. 将完整数据包切片成20字节的小块进行发送
@ -607,22 +611,25 @@
const start = chunkIndex * chunkSize;
const end = Math.min(start + chunkSize, fullBuffer.byteLength);
const chunk = fullBuffer.slice(start, end);
const hexArray = Array.from(new Uint8Array(chunk)).map(b => b.toString(16).padStart(2, '0'));
console.log(`发送图片数据块 ${chunkIndex + 1}/${numChunks}:`, hexArray.join(' '));
const hexArray = Array.from(new Uint8Array(chunk)).map(b => b.toString(
16).padStart(2, '0'));
console.log(`发送图片数据块 ${chunkIndex + 1}/${numChunks}:`, hexArray.join(
' '));
updateLoading(these, {
text: "正在发送 " + (chunkIndex + 1) + "/" + numChunks
});
ble.sendData(f.deviceId, chunk, f.writeServiceId, f.wirteCharactId, 100)
ble.sendData(f.deviceId, chunk, f.writeServiceId, f.wirteCharactId,
100)
.then(() => {
chunkIndex++;
setTimeout(sendNextChunk, 30); // 每个小包之间延时30ms
setTimeout(sendNextChunk, 20); // 每个小包之间延时20ms
})
.catch(err => {
if (err.code == 10007 || err.code == -1) {
setTimeout(sendNextChunk, 30);
setTimeout(sendNextChunk, 20);
return;
}
@ -1024,16 +1031,16 @@
these.showBleUnConnect()
return;
}
let err=false;
this.formData.textLines.find((txt)=>{
if(txt.length===0 || txt.length>5){
console.log("txt=",txt);
err=true;
let err = false;
this.formData.textLines.find((txt) => {
if (txt.length === 0 || txt.length > 5) {
console.log("txt=", txt);
err = true;
return true;
}
return false;
})
if(err){
if (err) {
this.showPop({
message: "单位、部门、姓名必须填写且最多5字",
iconUrl: "/static/images/6155/DeviceDetail/uploadErr.png",
@ -1085,11 +1092,14 @@
const start = chunkIndex * chunkSize;
const end = Math.min(start + chunkSize, fullBuffer.byteLength);
const chunk = fullBuffer.slice(start, end);
const hexArray = Array.from(new Uint8Array(chunk)).map(b => b.toString(16).padStart(2, '0'));
console.log(`发送数据块 ${chunkIndex + 1}/${numChunks}:`, hexArray.join(' '));
ble.sendData(f.deviceId, chunk, f.writeServiceId, f.wirteCharactId, 100).then(() => {
const hexArray = Array.from(new Uint8Array(chunk)).map(b => b
.toString(16).padStart(2, '0'));
console.log(`发送数据块 ${chunkIndex + 1}/${numChunks}:`, hexArray
.join(' '));
ble.sendData(f.deviceId, chunk, f.writeServiceId, f
.wirteCharactId, 100).then(() => {
chunkIndex++;
setTimeout(sendNextChunk, 30); // 每个小包之间延时30ms
}).catch(err => {
@ -1239,7 +1249,7 @@
if (f) {
// 发送数据
ble.sendData(f.deviceId, buffer, f.writeServiceId, f.wirteCharactId, 100).catch(ex=>{
ble.sendData(f.deviceId, buffer, f.writeServiceId, f.wirteCharactId, 100).catch(ex => {
these.showPop({
message: "发送失败," + ex.msg,
iconUrl: "/static/images/6155/DeviceDetail/uploadErr.png",
@ -1288,7 +1298,7 @@
if (f) {
// 发送数据
ble.sendData(f.deviceId, buffer, f.writeServiceId, f.wirteCharactId, 100).catch(ex=>{
ble.sendData(f.deviceId, buffer, f.writeServiceId, f.wirteCharactId, 100).catch(ex => {
these.showPop({
message: "发送失败," + ex.msg,
iconUrl: "/static/images/6155/DeviceDetail/uploadErr.png",
@ -1483,7 +1493,7 @@
letter-spacing: 0.07px;
text-align: left;
}
.lamp {
margin-top: 24rpx;

8
utils/BleHelper.js
View File

@ -33,9 +33,11 @@ class BleHelper {
if (linkedDevices && linkedDevices.length && linkedDevices.length > 0) {
// console.log("111111", linkedDevices);
linkedDevices = linkedDevices.filter((v) => {
v.Linked = false;
v.notifyState = false;
return true;
if(v){
v.Linked = false;
v.notifyState = false;
}
return v?true:false;
});
}