2203_bluetooth/ecg/index.js

import {
	hrDataArray
} from './hrdata.js'
const SendCommandUtil = require('../utils/SendCommandUtil.js'); // 引用 发送指令工具类
Page({
	data: {
		// 渲染物品的动态CSS,
		xuanranCss:{
			width:'0',
			height:'0'
		},
		arrList: [],
		totalReceivedNodes: 0, // 记录设备推送的总节点数
		totalConsumedNodes: 0, // 记录消费的总节点数
		setInter: null,
		getDataIndex: 0,
		heartRateData: [], // 当前绘制的数据
		windowSize: 1800, // 可视窗口大小
		canvasWidth: 800,
		canvasHeight: 200,
		maxLevel: 2000, // 最大电平值
		minLevel: -2000, // 最小电平值
		isNotifyBLEC: false, //是否订阅
		dataQueue: [], // 缓存接收到的长数组数据
		isDrawing: false, // 绘制状态标志，避免重复触发
		// deviceId: "66:3A:12:88:01:20",
		deviceId: "66:3A:12:88:01:20",
		serviceId: "000001FF-3C17-D293-8E48-14FE2E4DA212",
		ecgCharacteristicId: "0000FF0A-0000-1000-8000-00805F9B34FB",
		canvasList: [], // Canvas 列表，用于动态生成 Canvas
		pointsPerCanvas: 1800, // 每个 Canvas 绘制的点数
	},
	onReady() {
		// 初始化画布
		this.ctx = wx.createCanvasContext('ecgCanvas');
		// this.startDrawing();
		this.notifyBLEC();
	},

	// 滑动窗口更新数据
	pushHeartRate(newData) {
		let heartRateData = this.data.heartRateData;

		// 添加新数据
		heartRateData.push(...newData);

		// 如果数据超过窗口大小，移除最早的数据
		if (heartRateData.length > this.data.windowSize) {
			heartRateData.splice(0, heartRateData.length - this.data.windowSize);
		}

		// 动态计算最大值和最小值
		// const maxLevel = Math.max(...heartRateData);
		// const minLevel = Math.min(...heartRateData);

		this.setData({
			heartRateData,
			// maxLevel,
			// minLevel
		});
	},

	// 绘制 ECG 曲线
	drawECG() {
		const ctx = this.ctx;
		const {
			heartRateData,
			canvasHeight,
			maxLevel,
			minLevel,
			canvasWidth,
			windowSize
		} = this.data;

		// 清空画布
		ctx.clearRect(0, 0, canvasWidth, canvasHeight);

		// 绘制网格
		this.drawGrid(ctx);

		// 计算缩放比例
		const scaleY = canvasHeight / (maxLevel - minLevel); // 数据缩放到画布高度范围
		const step = canvasWidth / (windowSize - 1); // 每点的水平间隔

		// 绘制心电图
		ctx.beginPath();
		heartRateData.forEach((value, index) => {
			const x = index * step;
			const y = canvasHeight - (value - minLevel) * scaleY;
			if (index === 0) {
				ctx.moveTo(x, y);
			} else {
				const prevX = (index - 1) * step;
				const prevY = canvasHeight - (heartRateData[index - 1] - minLevel) * scaleY;
				// 使用二次贝塞尔曲线平滑点之间的连接
				const midX = (prevX + x) / 2;
				const midY = (prevY + y) / 2;
				ctx.quadraticCurveTo(prevX, prevY, midX, midY);
			}
		});
		ctx.setStrokeStyle('red');
		ctx.setLineWidth(0.5);
		ctx.stroke();
		ctx.draw();

	},

	// 绘制网格
	drawGrid(ctx) {
		const {
			canvasWidth,
			canvasHeight,
		} = this.data;
		var width = canvasWidth
		var height = canvasHeight
		var gridWidth = 5
		const hLineNum = parseInt(height / gridWidth);
		const vLineNum = parseInt(width / gridWidth);
		console.log(hLineNum, vLineNum)
		ctx.setLineWidth(1);
		ctx.setStrokeStyle("#ccc");

		// 横线
		for (let i = 0; i < hLineNum; i++) {
			if (i === 0 || i % 5 !== 0) {
				ctx.beginPath();
				ctx.moveTo(0, i * gridWidth);
				ctx.lineTo(width, i * gridWidth);
				ctx.stroke();
			}
		}

		// 竖线
		for (let i = 0; i < vLineNum; i++) {
			if (i === 0 || i % 5 !== 0) {
				ctx.beginPath();
				ctx.moveTo(i * gridWidth, 0);
				ctx.lineTo(i * gridWidth, height);
				ctx.stroke();
			}
		}

		// 粗线
		ctx.setStrokeStyle("#9B9B9B");
		for (let i = 5; i <= vLineNum; i += 5) {
			ctx.beginPath();
			ctx.moveTo(i * gridWidth, 0);
			ctx.lineTo(i * gridWidth, height);
			ctx.stroke();
		}
		for (let i = 5; i <= hLineNum; i += 5) {
			ctx.beginPath();
			ctx.moveTo(0, i * gridWidth);
			ctx.lineTo(width, i * gridWidth);
			ctx.stroke();
		}
	},



	// 启动绘制逻辑
	startDrawing() {
		if (this.data.isDrawing) return; // 避免重复启动
		this.setData({
			isDrawing: true
		});

		const pointsPerRender = 50; // 每次绘制的点数，控制绘制速度
		const interval = 100; // 绘制间隔（ms）

		const drawInterval = setInterval(() => {
			const {
				dataQueue,
				heartRateData,
				windowSize
			} = this.data;

			// 如果队列为空，停止绘制
			if (dataQueue.length === 0) {
				clearInterval(drawInterval);
				this.setData({
					isDrawing: false
				});
				return;
			}

			// 从队列中取出一批数据
			const newData = dataQueue.splice(0, pointsPerRender);
			// 更新消费的总节点数
			this.setData({
				totalConsumedNodes: this.data.totalConsumedNodes + newData.length
			});
			// 更新心率数据（保持滑动窗口）
			const updatedData = heartRateData.concat(newData);
			if (updatedData.length > windowSize) {
				updatedData.splice(0, updatedData.length - windowSize);
			}

			this.setData({
				heartRateData: updatedData,
				dataQueue
			});
			this.drawECG(); // 绘制心电图
		}, interval);
	},
	stopECG() {
		clearInterval(this.data.setInter)
	},
	startECG() {
		// this.startDrawing()
		SendCommandUtil.getECGData(this.data.deviceId)
	},
	notifyBLEC() {
		wx.notifyBLECharacteristicValueChange({
			deviceId: this.data.deviceId, // 蓝牙设备 ID
			serviceId: this.data.serviceId, // 蓝牙服务 UUID
			characteristicId: this.data.ecgCharacteristicId, // 心电
			state: true,
			success: (res) => {
				console.log('心电特征订阅成功', res);
				this.setData({
					isNotifyBLEC: true
				})
				this.subscribeAndReceiveData();
			},
			fail: (err) => {
				console.error('特征订阅失败', err);
			},
		});
	},
	// QRS滤波器处理函数
	applyQRSFilter(rawData) {
		const filteredData = [];

		// 高通滤波器移除基线漂移
		const highPassData = rawData.map((value, index, arr) => {
			if (index === 0) return value;
			return value - arr[index - 1] + 0.95 * (arr[index - 1] || 0);
		});

		// 微分滤波器增强信号
		const diffData = highPassData.map((value, index, arr) => {
			if (index < 4) return 0; // 前几个点无法计算微分
			return (
				(2 * arr[index] +
					arr[index - 1] -
					arr[index - 3] -
					2 * arr[index - 4]) /
				8
			);
		});

		// 平滑滤波器减少噪声
		const smoothData = diffData.map((value, index, arr) => {
			if (index < 5) return 0; // 前几个点无法平滑
			return (
				(arr[index] +
					arr[index - 1] +
					arr[index - 2] +
					arr[index - 3] +
					arr[index - 4]) /
				5
			);
		});

		// 阈值处理检测QRS波
		const threshold = 0.6; // 自定义阈值（需要根据实际情况调整）
		smoothData.forEach((value, index) => {
			if (Math.abs(value) > threshold) {
				filteredData.push(value); // 保留QRS特征
			} else {
				filteredData.push(0); // 非特征部分置零
			}
		});

		return filteredData;
	},
	subscribeAndReceiveData() {
		if (this.data.isNotifyBLEC) {
			// 监听数据特征值变化
			wx.onBLECharacteristicValueChange((res) => {
				// console.log('------------------------', res)
				if (res.characteristicId === this.data.ecgCharacteristicId) {
					const dataView = new DataView(res.value);
					const hexStr = this.uint8ArrayToHex(new Uint8Array(res.value))
					//   console.log("心电报文：", hexStr);
					//   console.log("心电报文View：", dataView);
					// 获取下标 9-10 的字节 (dataType)
					let cmdType = dataView.getUint16(8);
					if (cmdType == 0x01) {
						// console.log("心电指令,ECG数据返回：", cmdType);
					}
					let dataType = dataView.getUint8(10);
					// console.log("dataType：", dataType);
					switch (dataType) {
						case 0x00:
							// console.log(this.data.arrList.join(','))
							//   console.log("ECG 测试结束:");
							break;
						case 0x01:
							//   console.log("ECG 测试开始:");
							break;
						case 0x02:
							var bodyData = this.uint8ArrayToHex(new Uint8Array(res.value))
							var bodyFor = []
							for (let i = 0; i <= bodyData.length; i++) {
								if (bodyData[i] == ' ') {
									bodyFor.push(',')
								} else {
									bodyFor.push(bodyData[i])
								}
							}
							bodyData = bodyFor.join('').split(',').splice(-8)
							var BPM = parseInt(bodyData[0], 16);
							var EcgProgress = parseInt(bodyData[7], 16)
							// console.log("ECG 参数同步:", BPM, EcgProgress)
							break;
						case 0x03:
							const rawData = new Uint8Array(res.value);							
							console.log("原始数据:",rawData)							
							let filterSigns = [];
							if (rawData.length >= 50) {
								for (let i = 0; i < 25; i++) {
									let filter = ((rawData[i * 2 + 1] & 0xff) << 8) | (rawData[i * 2 + 2] & 0xff);
									if (filter > 32767) {
										filter = filter - 65536;
									}
									filterSigns.push(filter);
								}
							}
							console.log('处理后的数据:',filterSigns)
							filterSigns = filterSigns.splice(5)
							this.setData({
								arrList: [...this.data.arrList, ...filterSigns],
								dataQueue: this.data.dataQueue.concat(filterSigns),
								totalReceivedNodes: this.data.totalReceivedNodes + filterSigns.length,
							});

							this.startDrawing();
							break;
						case 0x04:
							//   console.log("ECG 测试状态返回:");
							break;
						default:
							//   console.warn('未知数据类型', dataType);
							break;
					}
				}
			});
		} else {
			this.notifyBLEC();
			wx.showLoading({
				title: '等待订阅中',
			})
			setTimeout(() => {
				wx.hideLoading()
				this.subscribeAndReceiveData()
			}, 5000);
		}
	},
	uint8ArrayToHex(array) {
		return Array.from(array)
			.map(byte => byte.toString(16).padStart(2, '0')) // 转换每个字节为 2 位的 16 进制，并补零
			.join(' '); // 用空格连接所有字节
	},
	/**
	 * 将十六进制字符串转换为十进制数组
	 * @param {string} hexString - 输入的十六进制字符串，每两个字符代表一个字节
	 * @returns {number[]} - 转换后的十进制数组
	 */
	hexStringToDecimalArray(hexString) {
		if (!hexString || typeof hexString !== "string") {
			throw new Error("输入必须是有效的十六进制字符串！");
		}

		// 确保字符串长度是偶数
		if (hexString.length % 2 !== 0) {
			throw new Error("十六进制字符串长度必须为偶数！");
		}

		const decimalArray = [];
		for (let i = 0; i < hexString.length; i += 2) {
			// 截取每两个字符并转换为十进制
			const hexByte = hexString.substr(i, 2);
			const decimalValue = parseInt(hexByte, 16);

			// 检查转换结果是否有效
			if (isNaN(decimalValue)) {
				throw new Error(`无效的十六进制字节：${hexByte}`);
			}

			decimalArray.push(decimalValue);
		}

		return decimalArray;
	},
	// 将两个字节合并成一个有符号的 16 位整数
	// 将每两个字节解析为一个有符号的 16 位整数
	hexStringToSignedDecimalArray(hexString) {
		if (!hexString || typeof hexString !== "string") {
			throw new Error("输入必须是有效的十六进制字符串！");
		}

		// 确保字符串长度是偶数
		if (hexString.length % 2 !== 0) {
			throw new Error("十六进制字符串的长度必须是偶数！");
		}

		const signedDecimalArray = [];
		for (let i = 0; i < hexString.length; i += 4) { // 每次处理两个字节
			// 取出两个字节，拼接为一个 16 位整数（16 进制）
			const hexByte1 = hexString.substr(i, 2); // 第一个字节
			const hexByte2 = hexString.substr(i + 2, 2); // 第二个字节

			// 将这两个字节转为十进制数
			const int16 = (parseInt(hexByte2, 16) << 8) | parseInt(hexByte1, 16);

			// 检查是否需要转换为负数
			if (int16 >= 0x8000) {
				// 转换为负数（补码转换）
				signedDecimalArray.push(int16 - 0x10000);
			} else {
				signedDecimalArray.push(int16);
			}
		}

		return signedDecimalArray;
	},
	// =============================
	drawGridNews(ctx) {
		const {
			canvasWidth,
			canvasHeight,
		} = this.data;
		var width = 1000
		var height = canvasHeight
		var gridWidth = 5
		const hLineNum = parseInt(height / gridWidth);
		const vLineNum = parseInt(width / gridWidth);
		// console.log(hLineNum, vLineNum)
		ctx.setLineWidth(1);
		ctx.setStrokeStyle("#ccc");

		// 横线
		for (let i = 0; i < hLineNum; i++) {
			if (i === 0 || i % 5 !== 0) {
				ctx.beginPath();
				ctx.moveTo(0, i * gridWidth);
				ctx.lineTo(width, i * gridWidth);
				ctx.stroke();
			}
		}

		// 竖线
		for (let i = 0; i < vLineNum; i++) {
			if (i === 0 || i % 5 !== 0) {
				ctx.beginPath();
				ctx.moveTo(i * gridWidth, 0);
				ctx.lineTo(i * gridWidth, height);
				ctx.stroke();
			}
		}

		// 粗线
		ctx.setStrokeStyle("#9B9B9B");
		for (let i = 5; i <= vLineNum; i += 5) {
			ctx.beginPath();
			ctx.moveTo(i * gridWidth, 0);
			ctx.lineTo(i * gridWidth, height);
			ctx.stroke();
		}
		for (let i = 5; i <= hLineNum; i += 5) {
			ctx.beginPath();
			ctx.moveTo(0, i * gridWidth);
			ctx.lineTo(width, i * gridWidth);
			ctx.stroke();
		}
	},
	drawEcgSegment(canvasId, index) {
		const {
			arrList,           // 原始数据
			pointsPerCanvas,   // 每个 Canvas 显示的点数
			canvasHeight,      // 画布高度
			maxLevel,          // 最大电平值
			minLevel           // 最小电平值
		} = this.data;
	
		// 确定当前分片的起始和结束索引
		const startIndex = index * pointsPerCanvas; 
		const endIndex = Math.min(startIndex + pointsPerCanvas, arrList.length);
		const segmentData = arrList.slice(startIndex, endIndex); // 取当前分片的数据
	
		// 水平缩放比例 (每点的水平间隔)
		const step = this.data.canvasWidth / pointsPerCanvas;
	
		// 垂直缩放比例
		const scaleY = canvasHeight / (maxLevel - minLevel);
	
		// 获取 Canvas Context
		const ctx = wx.createCanvasContext(canvasId, this);
	
		// 清空画布
		ctx.clearRect(0, 0, this.data.canvasWidth, canvasHeight);
	
		// 绘制网格
		this.drawGridNews(ctx);
	
		// 绘制心电图
		ctx.setStrokeStyle('red');
		ctx.setLineWidth(1);
		ctx.beginPath();
	
		segmentData.forEach((value, i) => {
			const x = i * step;
			const y = canvasHeight - (value - minLevel) * scaleY;
	
			if (i === 0) {
				ctx.moveTo(x, y);
			} else {
				const prevX = (i - 1) * step;
				const prevY = canvasHeight - (segmentData[i - 1] - minLevel) * scaleY;
	
				// 使用二次贝塞尔曲线平滑连接点
				const midX = (prevX + x) / 2;
				const midY = (prevY + y) / 2;
				ctx.quadraticCurveTo(prevX, prevY, midX, midY);
			}
		});
	
		ctx.stroke();
		ctx.draw();
	},	
	drawFullECG() {
		const {
			arrList,
			pointsPerCanvas
		} = this.data;
		const totalLength = arrList.length;
		const canvasCount = Math.ceil(totalLength / pointsPerCanvas); // 计算需要的 Canvas 数量

		// 生成 Canvas 列表
		const canvasList = Array.from({
			length: canvasCount
		}, (_, index) => ({
			canvasId: `ecgCanvas-${index}`,
		}));
		this.setData({
			canvasList
		}, () => {
			// // 循环绘制每个 Canvas
			canvasList.forEach((item, index) => {
				this.drawEcgSegment(item.canvasId, index);
			});
		});










	},
	// ===============================================
	// 绘制并保存 canvas 为图片
	saveCanvasAsImage() {
		const that = this;
		const {
			canvasList,
			canvasWidth,
			canvasHeight
		} = that.data;

		// 创建一个目标 canvas
		const targetCanvas = wx.createCanvasContext('targetCanvas', this);

		// 设置目标 canvas 宽度和高度
		const targetWidth = canvasList.length * 1000;
		const targetHeight = 200; // 假设每个 canvas 高度一致

		// 将目标 canvas 的宽高设置好
		console.log(targetCanvas,'-------------------')
		// targetCanvas.canvas.width = targetWidth;
		// targetCanvas.canvas.height = targetHeight;
		this.setData({
			xuanranCss:{
				width:targetWidth,
				height:targetHeight
			}
		})

		// 循环通过每个 canvas 将图像拼接到目标 canvas
		canvasList.forEach((item, index) => {
			// 获取每个 canvas 的上下文并将其转为图片
			wx.canvasToTempFilePath({
				canvasId: item.canvasId,
				success(res) {
					// 每次拿到一个 canvas 的图片路径后，画到目标 canvas 上
					targetCanvas.drawImage(res.tempFilePath, index * canvasWidth, 0, canvasWidth, canvasHeight);

					// 如果是最后一个 canvas，就绘制完毕并导出图片
					if (index === canvasList.length - 1) {
						targetCanvas.draw(false, () => {
							// 合成完成后导出最终拼接的图像
							wx.canvasToTempFilePath({
								canvasId: 'targetCanvas',
								success(res) {
									// 这里可以获取到拼接后的图片路径
									console.log('拼接后的图片路径:', res.tempFilePath);
									// 可以在页面中展示拼接后的图片
									that.setData({
										combinedImagePath: res.tempFilePath
									});
									const tempFilePath = res.tempFilePath;

									// 选择保存到相册
									wx.saveImageToPhotosAlbum({
										filePath: tempFilePath,
										success: (saveRes) => {
											wx.showToast({
												title: '保存成功',
												icon: 'success',
											});
										},
										fail: (saveErr) => {
											wx.showToast({
												title: '保存失败',
												icon: 'none',
											});
											console.error('保存失败', saveErr);
										},
									});
								},
								fail(error) {
									console.log('导出拼接图失败', error);
								}
							});
						});
					}
				},
				fail(error) {
					console.log('转换 canvas 为临时文件失败', error);
				}
			});
		});

	},

});