6155完成部分协议对接

This commit is contained in:
liub
2025-08-15 16:39:00 +08:00
parent 6ef2bb08b9
commit e95b2466e1
10 changed files with 871 additions and 708 deletions

View File

@ -2,17 +2,14 @@
<view class="message-popup" :class="{ 'show': config.show }">
<view class="mask" @click="closeMenu" :class="{ 'show': config.show }"
:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}"
>
:style="{backgroundColor:config.maskBgColor,display:(config.showMask?'':'none')}">
</view>
<view class="bottom-slide-menu" :style="{ backgroundColor: config.bgColor }" :class="{ 'show': config.show }"
@touchmove.stop.prevent>
<view class="menu-header" :class="config.showHeader?'':'displayNone'">
<view class="title" :style="{ color: config.textColor}">{{ config.title }}</view>
<view class="close-icon" @click="closeMenu"
:style="{display:(config.showClose?'':'none')}"
>
<view class="close-icon" @click="closeMenu" :style="{display:(config.showClose?'':'none')}">
<image src="/static/Images/public/close.png" mode="aspectFit"></image>
</view>
</view>
@ -29,7 +26,13 @@
<view class="p100" :style="{backgroundColor:config.activeIndex==index?config.itemBgColor:'',
justifyContent:config.textAlign
}">
<image v-if="item.icon" :src="item.icon" mode="aspectFit"></image>
<view class="imgContent" :style="{
height:config.itemHeight,
width:config.itemHeight
}">
<image v-if="item.icon" :src="item.icon" mode="aspectFit"></image>
</view>
<text>{{ item.text }}</text>
</view>
@ -61,34 +64,34 @@
config: {
type: Object,
default: () => ({
show: false,//是否显示
showHeader: false,//是否显示标头
showMask:true,//是否显示mask
showDivider: false,//是否在两个项之间显示分隔线
showBtn: false,//是否显示底部按钮
showClose:false,//是否显示右上角关闭按钮
maskBgColor:'',//mask的颜色
menuItems: [],//菜单项 包含icon text
activeIndex: -1,//当前已选中的项编号
bgColor: '#2a2a2a',//主体背景
itemBgColor: '#3a3a3a',//各项被选中后的背景
textColor: '#ffffffde',//各项的文字颜色
textAlign: 'flex-start',//各项的文字居中方式
title: '',//header的文字
dividerColor: '#00000000',//分隔线颜色
dividerThickness: '0rpx',//分隔线宽度
dividerMargin: '10rpx',//分隔线距离两边的宽度
itemHeight: '80rpx',//各项的调试
btnBgColor: "#bbe600",//按钮颜色
btnText: "确定",//按钮文字
btnTextColor: "#000000",//按钮文字颜色
show: false, //是否显示
showHeader: false, //是否显示标头
showMask: true, //是否显示mask
showDivider: false, //是否在两个项之间显示分隔线
showBtn: false, //是否显示底部按钮
showClose: false, //是否显示右上角关闭按钮
maskBgColor: '', //mask的颜色
menuItems: [], //菜单项 包含icon text
activeIndex: -1, //当前已选中的项编号
bgColor: '#2a2a2a', //主体背景
itemBgColor: '#3a3a3a', //各项被选中后的背景
textColor: '#ffffffde', //各项的文字颜色
textAlign: 'flex-start', //各项的文字居中方式
title: '', //header的文字
dividerColor: '#00000000', //分隔线颜色
dividerThickness: '0rpx', //分隔线宽度
dividerMargin: '10rpx', //分隔线距离两边的宽度
itemHeight: '80rpx', //各项的调试
btnBgColor: "#bbe600", //按钮颜色
btnText: "确定", //按钮文字
btnTextColor: "#000000", //按钮文字颜色
})
},
},
methods: {
closeMenu() {
@ -100,19 +103,18 @@
this.$emit('itemClick', item, index);
},
btnClick() {
let item = null;
let index = null;
if (this.config.activeIndex > -1) {
item = this.config.menuItems[this.config.activeIndex];
}
index = this.config.activeIndex;
this.$emit('btnClick', item, index);
this.$emit('btnClick', item, index);
}
}
}
</script>
<style>
@ -126,7 +128,7 @@
}
.p100 {
width: 100%;
width: calc(100% - 20rpx);
height: 100%;
border-radius: 8rpx;
display: flex;
@ -136,7 +138,8 @@
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
padding: 0rpx 20rpx;
padding: 0rpx 20rpx 0rpx 0rpx;
margin-left: 20rpx;
}
.displayNone {
@ -151,7 +154,7 @@
z-index: 9999;
transition: transform 0.3s ease-out;
transform: translateY(100%);
border-radius: 16rpx 16rpx 0 0;
border-radius: 32rpx 32rpx 0 0;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}
@ -217,11 +220,24 @@
width: 100%;
box-sizing: border-box;
position: relative;
margin-bottom: 20rpx;
}
.menu-item image {
width: 40rpx;
height: 40rpx;
}
.imgContent {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
background: #4a4a4a;
border-radius: 10rpx;
margin-right: 20rpx;
}

View File

@ -1,149 +1,194 @@
<template>
<view>
<!-- 只创建一个Canvas用于复用 -->
<canvas
type="2d"
canvas-id="reusableCanvas"
:width="currentCanvasWidth"
:height="currentCanvasHeight"
class="offscreen-canvas"
></canvas>
</view>
</template>
<script>
export default {
name: "TextToHex",
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:"#000000"
<template>
<view>
<canvas type="2d" canvas-id="reusableCanvas" :width="currentCanvasWidth" :height="currentCanvasHeight"
class="offscreen-canvas"></canvas>
</view>
</template>
<script>
export default {
name: "TextToHexV1",
props: {
txts: {
type: Array,
default: () => [],
validator: (value) => value.every(item => typeof item === 'string')
},
color:{
type:String,
default:"#FFFFFF"
}
},
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() {
if (this.validTxts.length === 0) {
return [];
}
const result = [];
const ctx = this.ctx;
// 循环处理每行文本
for (let i = 0; i < this.validTxts.length; i++) {
const textLine = this.validTxts[i];
// 1. 动态调整Canvas尺寸
this.currentCanvasWidth = this.calcLineWidth(textLine);
this.currentCanvasHeight = this.fontSize;
// 2. 清空Canvas绘制背景
this.clearCanvas();
// 3. 设置文字样式
ctx.setFillStyle(this.color);
ctx.setTextBaseline('middle');
ctx.setFontSize(this.fontSize);
ctx.font = `${this.fontSize}px SimHei, Microsoft YaHei, Arial, sans-serif`;
// 4. 绘制当前行文本
let currentX = 0;
const currentY = this.fontSize / 2;
for (let j = 0; j < textLine.length; j++) {
const char = textLine[j];
ctx.fillText(char, currentX, currentY);
// 按实际字符宽度计算间距
const 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.push({
line: textLine,
pixelData: res.data,
width: this.currentCanvasWidth,
height: this.currentCanvasHeight
});
resolve();
},
fail: err => {
// console.error(`处理第${i+1}行失败:`, err);
reject(err);
}
});
});
});
}
return result;
}
}
};
</script>
<style >
.offscreen-canvas {
position: fixed;
left: -9999px;
top: -9999px;
visibility: hidden;
}
</style>
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 convertCharToMatrix=function(imageData) {
// console.log("imgData=",imageData)
let matrix = [];
// 逐行处理
for (let y = 0; y < 16; y++) {
let byte1 = 0,
byte2 = 0;
// 每行16个像素分为两个字节
for (let x = 0; x < 16; x++) {
// 计算像素在imageData中的索引 (RGBA格式)
let index = (y * 16 + x) * 4;
let red = imageData[index];
// 黑色像素R值较低视为1白色视为0
let isBlack = red < 128;
if (x < 8) {
// 第一个字节左8位
if (isBlack) {
byte1 |= 0x80 >> x; // 从左到右设置位
}
} else {
// 第二个字节右8位
if (isBlack) {
byte2 |= 0x80 >> (x - 8);
}
}
}
// 将字节转换为两位十六进制字符串
matrix.push('0x' + byte1.toString(16).padStart(2, '0').toUpperCase());
matrix.push('0x' + byte2.toString(16).padStart(2, '0').toUpperCase());
}
return matrix;
}
let drawTxt=async (textLine)=> {
let result = {};
let ctx = this.ctx;
// 1. 动态调整Canvas尺寸
this.currentCanvasWidth = this.calcLineWidth(textLine);
this.currentCanvasHeight = this.fontSize;
// 2. 清空Canvas绘制背景
this.clearCanvas();
// 3. 设置文字样式
ctx.setFillStyle(this.color);
ctx.setTextBaseline('middle');
ctx.setFontSize(this.fontSize);
ctx.font = `${this.fontSize}px "PingFang SC", PingFang SC, Arial, sans-serif`;
// 4. 绘制当前行文本
let currentX = 0;
let currentY = this.fontSize / 2;
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));
}
console.log("hexs=",linePixls.join(","));
arr.push(linePixls);
}
return arr;
}
}
};
</script>
<style>
.offscreen-canvas {
position: fixed;
left: -9999px;
top: -9999px;
visibility: hidden;
}
</style>

View File

@ -23,10 +23,10 @@
return {
visible: false,
dotsCount: 12,
dotColors: ['#CEF231c2'],
dotColors: ['#CEF231'],
text: '请稍候...',//文本文字
textColor: '#FFFFFFde',//文本颜色
radius: 35,//圆的半径
radius: 32,//圆的半径
duration: 1200,//动画的播放速度
colorIndex: 0
}
@ -158,7 +158,7 @@
position: absolute;
top: 50%;
left: 50%;
width: 4rpx;
width: 6rpx;
height: 30rpx;
border-radius: 12rpx;
/* margin-top: -4rpx;

File diff suppressed because it is too large Load Diff

View File

@ -309,6 +309,7 @@
these.formData.deviceName = device.deviceName;
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);
these.setBleFormData();
@ -321,9 +322,7 @@
},
onBackPress(e) {
ble.removeReceiveCallback();
},
computed: {
RSSIRemark: function() {
@ -488,7 +487,8 @@
},
getDevice: function() {
console.log("LinkedList=",ble.data.LinkedList);
console.log("formData=",these.formData);
let f = ble.data.LinkedList.find((v) => {
return v.deviceId == these.formData.deviceId;
});
@ -1112,6 +1112,10 @@
let key = keys[i];
these.Status.Pop[key] = option[key];
}
if (!option.borderColor) {
option.borderColor = '#BBE600';
option.buttonBgColor = '#BBE600';
}
these.Status.Pop.showPop = true;
},
sendUsr: function() {
@ -1126,9 +1130,7 @@
];
showLoading(this, {
text: "请稍候..."
});
let f = this.getDevice();
if (!f) {
these.showPop({
@ -1139,7 +1141,9 @@
});
return;
}
showLoading(this, {
text: "请稍候..."
});
var sendText = function() {

View File

@ -19,13 +19,18 @@
连接
</view>
<global-loading ref="loading" />
</view>
</template>
<script>
import request from '@/utils/request.js';
import bleTool from '@/utils/BleHelper.js'
import {
showLoading,
hideLoading,
updateLoading
} from '@/utils/loading.js'
var these = null;
var eventChannel = null;
var ble=null;
@ -110,9 +115,9 @@
}
these.Statu.bound = null;
these.Statu.boundRemark = "";
uni.showLoading({
mask: true,
title: "连接中..."
showLoading(these,{
text: "连接中..."
})
let promise = request({
url: '/app/device/bind',
@ -142,7 +147,7 @@
these.Statu.bound = false;
these.Statu.boundRemark = '出现了未知的异常,操作失败';
}).finally(() => {
uni.hideLoading();
hideLoading(this);
});
}
}

View File

@ -81,12 +81,20 @@
</view>
</view>
</BottomSlideMenuPlus>
<global-loading ref="loading" />
</view>
</template>
<script>
import bleTool from '@/utils/BleHelper.js';
import request from '@/utils/request.js';
import {
showLoading,
hideLoading,
updateLoading
} from '@/utils/loading.js'
var ble = null;
var these = null;
export default {
@ -131,7 +139,8 @@
},
onBackPress: (e) => {
ble.StopSearch();
ble.removeDeviceFound();
ble.removeReceiveCallback();
},
onLoad() {
these = this;
@ -142,12 +151,15 @@
for (var i = 0; i < arr.length; i++) {
arr[i].linkStatu = false;
if(!arr[i].name){
continue;
}
let f = these.EquipMents.find(function(v) {
return v.deviceId == arr[i].deviceId;
});
if (!f) {
these.EquipMents.push(arr[i]);
} else {
@ -229,9 +241,8 @@
},
Link: function(item, index) {
uni.showLoading({
title: "正在连接",
mask: true
showLoading(this,{
text: "正在连接"
});
setTimeout(() => {
let serviceid=null;
@ -262,7 +273,7 @@
content:"连接失败:"+ex.msg
});
}).finally(()=>{
uni.hideLoading();
hideLoading(this);
});
}, 0);

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -123,18 +123,18 @@ class BleHelper {
}
const currentPage = pages[pages.length - 1];
console.log("currentPage=",currentPage.route);
console.log("currentPage=", currentPage.route);
return currentPage.route;
}
//设置发现新设备的回调
addDeviceFound(callback) {
let key = this.getCurrentPagePath();
if(!key){
key=new Date().getTime();
if (!key) {
key = new Date().getTime();
}
if (key) {
console.log("key="+key);
console.log("key=" + key);
let f = this.cfg.onDeviceFound.findIndex((v) => {
return v.key == key;
});
@ -152,28 +152,28 @@ class BleHelper {
//移除发现新设备的回调
removeDeviceFound() {
let key = this.getCurrentPagePath();
if (key) {
console.log("key="+key);
console.log("key=" + key);
let f = this.cfg.onDeviceFound.findIndex((v) => {
return v.key == key;
});
if (f > -1) {
this.cfg.onDeviceFound.splice(f, 1);
}
}else{
if(this.cfg.onDeviceFound.length>0){
this.cfg.onDeviceFound.splice(this.cfg.onDeviceFound.length-1, 1);
} else {
if (this.cfg.onDeviceFound.length > 0) {
this.cfg.onDeviceFound.splice(this.cfg.onDeviceFound.length - 1, 1);
}
}
}
//添加接收到数据的回调
addReceiveCallback(callback) {
let key = this.getCurrentPagePath();
if(!key){
key=new Date().getTime();
if (!key) {
key = new Date().getTime();
}
if (key) {
let f = this.cfg.receivDataCallback.findIndex((v) => {
@ -196,7 +196,7 @@ class BleHelper {
removeReceiveCallback(ev) {
let key = this.getCurrentPagePath();
if (key) {
console.log("key="+key);
console.log("key=" + key);
let f = this.cfg.receivDataCallback.findIndex((v) => {
return v.key == key;
});
@ -205,10 +205,10 @@ class BleHelper {
this.cfg.receivDataCallback.splice(f, 1);
}
}else{
if(this.cfg.receivDataCallback.length>0){
this.cfg.receivDataCallback.splice(this.cfg.receivDataCallback.length-1, 1);
}
} else {
if (this.cfg.receivDataCallback.length > 0) {
this.cfg.receivDataCallback.splice(this.cfg.receivDataCallback.length - 1, 1);
}
}
}
@ -445,20 +445,35 @@ class BleHelper {
// 将每个字节转换为对应的字符
str += String.fromCharCode(uint8Array[i]);
}
let header="mac address:";
if (str.indexOf(header) == 0) {
let header = "mac address:";
if (str.indexOf(header) == 0) { //650以文本传输mac
this.data.LinkedList.find((v) => {
if (v.deviceId == receive.deviceId) {
v.macAddress = str.replace(header,"");
if (v.deviceId == receive
.deviceId) {
v.macAddress = str.replace(
header, "");
console.log("收到mac地址:", str)
}
});
uni.setStorageSync(this.StorageKey, this.data
.LinkedList);
}
if (bytes[0] == 0xFC) { //6155以0xFC开头代表mac地址
if (arr.length >= 7) {
let mac = arr.slice(1, 7).join(":");
this.data.LinkedList.find((v) => {
if (v.deviceId == receive
.deviceId) {
v.macAddress = mac;
console.log("收到mac地址:", str)
}
});
uni.setStorageSync(this.StorageKey, this
.data.LinkedList);
}
}
} catch (ex) {
////console.log("将数据转文本失败", ex);
}
@ -546,7 +561,7 @@ class BleHelper {
return new Promise((resolve, reject) => {
uni.startBluetoothDevicesDiscovery({
services: [],
allowDuplicatesKey: false,
allowDuplicatesKey: true,
success: (res) => {
//console.log('开始搜索蓝牙设备成功');
resolve(res);
@ -629,8 +644,7 @@ class BleHelper {
}
console.log("c=", c);
let startSubScribe = (id, serviceId, characteristicId) => {
console.log("id, serviceId, characteristicId=" + id + "," + serviceId +
"," + characteristicId);
return new Promise((succ, err) => {
uni.notifyBLECharacteristicValueChange({
deviceId: id,
@ -652,10 +666,7 @@ class BleHelper {
succ();
},
fail: (ex) => {
console.log("deviceId=", id);
console.log("serviceId=", serviceId);
console.log("characteristicId=",
characteristicId);
err(this.getError(ex));
}
});
@ -676,10 +687,10 @@ class BleHelper {
results.forEach((result, index) => {
if (result.status === "fulfilled") {
console.log(`操作${index + 1}成功:`, result.value);
//console.log(`操作${index + 1}成功:`, result.value);
} else {
console.log(`操作${index + 1}失败:`, result.reason
.message);
// console.log(`操作${index + 1}失败:`, result.reason
// .message);
}
});
@ -752,7 +763,7 @@ class BleHelper {
return this.subScribe(id, true);
})
.then((res) => {
console.log('所有操作成功完成', res);
console.log('设备连接成功,初始化完成', res);
console.log("LinkedList=", this.data
.LinkedList);
resolve();
@ -843,7 +854,7 @@ class BleHelper {
}
}
if (writeChar) {
v.writeServiceId = serviceId;
v.wirteCharactId = writeChar.uuid;
@ -874,7 +885,7 @@ class BleHelper {
//连接某个设备
LinkBlue(deviceId, targetServiceId, writeCharId, notifyCharId) {
if (!writeCharId) {
writeCharId = "xxxx"; // "FFE1";
@ -975,7 +986,7 @@ class BleHelper {
}).then((res) => {
////console.log("11111111");
if (res) { //新连接
console.log("开始获取服务",targetServiceId)
console.log("开始获取服务", targetServiceId)
return this.getService(deviceId, targetServiceId, writeCharId,
notifyCharId); //获取服务
} else { //已连接过,直接订阅消息
@ -989,9 +1000,9 @@ class BleHelper {
}).then(() => {
setTimeout(()=>{
setTimeout(() => {
resolve();
},500);
}, 500);
}).catch((ex) => {
////console.log("出现异常", ex);
reject(ex);
@ -1102,7 +1113,7 @@ class BleHelper {
})); //没有找到指定设备
return;
}
console.log("device=",device);
console.log("device=", device);
uni.writeBLECharacteristicValue({
deviceId: device.deviceId,
serviceId: device.writeServiceId,
@ -1156,14 +1167,18 @@ class BleHelper {
} else {
// console.log("先连接蓝牙再发送");
return new Promise((resolve, reject) => {
let f=this.data.LinkedList.find((v)=>{
return v.deviceId==deviceid;
let f = this.data.LinkedList.find((v) => {
return v.deviceId == deviceid;
});
if(!f){
reject({code:'-9',msg:'蓝牙未连接过此设备,请重新使用蓝牙添加该设备'});
if (!f) {
reject({
code: '-9',
msg: '蓝牙未连接过此设备,请重新使用蓝牙添加该设备'
});
retrn;
}
this.LinkBlue(f.deviceId,f.writeServiceId,f.wirteCharactId,f.notifyCharactId).then((res) => {
this.LinkBlue(f.deviceId, f.writeServiceId, f.wirteCharactId, f.notifyCharactId).then((
res) => {
console.log("连接成功");
return sendBuffer();
}).then(() => {
@ -1207,7 +1222,7 @@ export default {
getBleTool: function(found, receive) {
if (!instance) {
instance = new BleHelper();
} else {
////console.log("调用现有实例");
}

View File

@ -8,8 +8,15 @@ export const showLoading = (ev,options) => {
if(!options){
options={a:1};
}
if(!options.text && options.title){
options.text=options.title;
}
ev.$refs.loading.show(options)
if(!options.text){
options.text="请稍候...";
}
ev.$refs.loading.show(options);
}