APP/pages/common/send/index.vue

<template>
	<view class="container">
		<!-- 设备列表 -->
		<!-- <scroll-view class="device-list" scroll-y> -->
		<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			:down="downOption" :fixed="false" :style="{ height: mescrollHeight + 'px' }">
			<view class="device-card" v-for="(item, index) in deviceList" :key="index" @click="toggleSelect(index)">
				<!-- 复选框 -->
				<view class="checkbox" :class="{ checked: item.checked }">
					<uni-icons v-if="item.checked" type="checkmarkempty" size="18" color="rgb(0, 0, 0)"></uni-icons>
				</view>
				<!-- 设备信息 -->
				<view class="device-content">
					<view class="device-header">
						<view class="deviceIMG">
							<image :src="item.devicePic" class="IMG" mode="aspectFit"></image>
						</view>
						<view class="device-name">
							<view>设备:{{ item.deviceName }}</view>
							<view class="ID">
								<view class="ID">ID:{{ item.deviceImei }}</view>
								<view class="onlines" v-if="item.onlineStatus == 1">在线</view>
								<!-- 离线状态 -->
								<view class="unlines" v-if="item.onlineStatus == 0">离线</view>
								<view>电量：{{ item.battery || '0' }}%</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<!-- </scroll-view> -->

		<view class="editInfmation">
			<view class="ql-editor">编辑信息</view>
			<view class="ql-input">
				<textarea placeholder-style="color:rgba(255, 255, 255, 0.4)" placeholder="请输入内容" class="textarea"
					v-model="messageToSend" :maxlength="20" />
					<TextToHexV1 class="TextToHex" ref="textToHex" :txts="textLines" :bgColor="'#FFFFFF'"
						:color="'#000000'" :fontSize="16" />
			</view>
			<button class="login-btn" @click.stop="sendTextMessage">发送</button>
		</view>
		<!-- 成功提示弹框 -->
		<CustomPopup :show="showPopupFlag" :title="popupTitle" :message="popupMessage"
			icon="/static/images/common/sendSucc.png" :confirm-text="popupConfirmText" :show-cancel="false"
			@confirm="onPopupConfirm" />
			
			<MsgBox ref="msgPop" />
			<global-loading ref="loading" />
			
	</view>
</template>

<script>
	import CustomPopup from '@/components/CustomPopup/CustomPopup.vue'
	import {
		deviceInfo,
	} from '@/api/common/index.js'
	import {
		deviceSendMessage,
		deviceRealTimeStatus //设备状态
	} from '@/api/6170/deviceControl.js'
	import {
		generateShortId,
		getdeviceSTatus
	} from '@/utils/function.js';
	import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue';
	import MqTool from '@/utils/MqHelper.js';
	import gbk from '@/utils/gbk.js';
	import TextToHexV1 from '@/components/TextToHex/TextToHexV1.vue';
	import {
		showLoading,
		hideLoading,
		updateLoading
	} from '@/utils/loading.js';
	import {
		MsgSuccess,
		MsgError,
		MsgClose,
		MsgWarning,
		showPop
	} from '@/utils/MsgPops.js';
	
	var mq = null;
	var timer = null;
	var these = null;
	export default {
		components: {
			CustomPopup,
			MescrollUni,
			TextToHexV1
		},
		data() {
			return {
				deviceList: [],
				messageToSend: '', //发送信息
				showPopupFlag: false,
				popupTitle: '',
				popupMessage: '信息发送成功！',
				popupConfirmText: '确认',
				isSending: false,
				sendInfo: {},
				mescroll: null,
				downOption: {
					auto: true,
					autoShowLoading: false,
				},
				upOption: {
					auto: false,
					noMoreSize: 0,
					offset: 50,
					isLock: false,
					empty: {
						tip: '暂无数据',
						hideScroll: false
					},
					textNoMore: '没有更多数据了'
				},
				mescrollHeight: 0,
				textLines:[]
			}
		},
		methods: {
			getSystemInfoSyncH() {

				let sysInfo = uni.getSystemInfoSync();

				// 底部 footer 高度约 220rpx + 120rpx = 340rpx，转换为 px（1rpx = sysInfo.pixelRatio / 750 * 屏幕宽度？不，直接用 rpx 转 px 公式）
				let footerHeight = 500 * (sysInfo.screenWidth / 750); // rpx 转 px

				// console.log("footerHeight=", footerHeight);
				this.mescrollHeight = sysInfo.screenHeight - footerHeight;
				// console.log("mescrollHeight=", this.mescrollHeight);
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新
			downCallback() {

				console.log("触发下拉刷新");
				if (this.mescroll) {
					this.mescroll.resetUpScroll(false);
					this.mescroll.scrollTo(0, 0);
				}
				this.getData(this.sendInfo.id);


			},
			// 上拉加载 
			upCallback() {
				console.log("触发上拉加载");


				this.getData(this.sendInfo.id);
			},
			// onPullDownRefresh() {
			// 	// 执行下拉刷新时的操作，比如重新获取数据
			// 	this.getData();
			// },
			toggleSelect(index) {
				this.deviceList[index].checked = !this.deviceList[index].checked
				this.$forceUpdate()
			},
			// 获取设备列表
			getData(deviceType) {
				clearTimeout(timer);
				timer = setTimeout(() => {
					console.log("开始加载第" + (this.mescroll ? this.mescroll.num : 1) + '页数据')
					this.loading = true;
					let data = {
						pageNum: this.mescroll ? this.mescroll.num : 1,
						pageSize: 50,
						deviceType: deviceType
					}
					deviceInfo(data).then((res) => {
						if (res.code == 200) {
							const newDevices = res.rows.map(device => ({
								...device,
								showConfirm: false,
								checked: false
							}));
							this.total = res.total;
							if (data.pageNum === 1) {
								this.deviceList = newDevices;
							} else {
								this.deviceList = this.deviceList.concat(newDevices);
							}


							this.total = res.total;
							// 判断是否加载完成
							let hasNext = true;
							if (res.rows.length < data.pageSize || this.deviceList.length >= this.total) {
								hasNext = false;
							} else {
								hasNext = true;
							}
							this.mescroll.endSuccess(res.rows.length, hasNext);
						} else {
							this.mescroll.endSuccess(0, false);
						}
					}).finally(() => {
						this.loading = false;
					}).catch(ex => {

						this.mescroll.endSuccess(0, false);

					});

				}, 200);

			},
			// 发送文本消息
			sendTextMessage() {
				// 防重复提交
				if (this.isSending) return;
				const selectedDevices = this.deviceList.filter(item => item.checked)
				const deviceIds = selectedDevices.map(item => item.id);
				const deviceImeiList = selectedDevices.map(item => item.deviceImei);
				if (selectedDevices.length === 0) {
					uni.showToast({
						title: '请选择一个设备',
						icon: 'none'
					});
					return;
				}
				if (!this.messageToSend) {
					uni.showToast({
						title: '请输入要发送的文字',
						icon: 'none'
					});
					return;
				}
				this.isSending = true;
				//FYS的方法
				let FYSSend = async () => {


					try {
						showLoading(these,{
							text: '发送中...',
							mask: true
						});

						// 2. 准备请求数据
						const batchId = generateShortId();
						const data = {
							sendMsg: this.messageToSend,
							deviceIds: deviceIds,
							batchId: batchId,
							typeName: this.sendInfo.typeName,
							batchId: batchId,
							deviceImeiList: deviceImeiList
						};
						// 3.人员信息
						const registerRes = await deviceSendMessage(data);
						if (registerRes.code !== 200) {
							uni.showToast({
								title: registerRes.msg,
								icon: 'none'
							})
							return
						}
						// 4. 获取设备状态
						let deviceImei = this.sendInfo.deviceImei
						let typeName = this.sendInfo.typeName
						const statusRes = await getdeviceSTatus({
								functionMode: 2,
								batchId,
								typeName: 'FunctionAccessBatchStatusRule',
								deviceImei,
								interval: 500
							},
							deviceRealTimeStatus
						);
						if (statusRes.data.functionAccess === 'OK') {
							// 5. 显示成功弹窗
							this.showPopupFlag = true
						}
					} catch (error) {						
						MsgError(error.message,null,these);
					} finally {
						hideLoading(these);
						this.isSending = false;
					}
				}
				//XS的方法
				let XSSend = () => {


					try {


						let text = this.messageToSend.padEnd(16,'').substring(0,16);						
						let arr = gbk.encode(text)						
						let gbkData = gbk.arr2hex(arr);																
						let len=gbkData.length;
						let list = [];
						console.log("gbkData=",gbkData);
						let rec = function(payload, receive) {
							debugger;
							
							console.log("收到消息,imei=" + mei + ",消息内容,", payload);
							let json =JSON.parse(payload.payload);
							let mei=payload.receive.topic.replace('A/','');
						
							let childData=null;
							let childIndex=null;
							if (json.sta_BreakNews === 1) {
								childIndex=1;
								childData=gbkData.slice(0,len/2);
							}
							else if (json.sta_BreakNews === 2) {
								childIndex=2;
								childData=gbkData.slice(len/2,len);
							}
							else if (json.sta_BreakNews === 'cover!') {
								mq.unSubscribes({topic:"A/" + mei});
								return;
							}
							if(childData){
								console.log("childData=",childData)
								let buffer={ins_BreakNews:[childIndex]};
								for (var i = 0; i < childData.length; i += 2) {
									let value = parseInt(childData[i] + "" + childData[i + 1], 16);
								
									buffer.ins_BreakNews.push(value);
								}
								
								let msg=JSON.stringify(buffer);
								mq.sendData("B/" + mei, msg, false);
							}

						};
						let msg = JSON.stringify({
							ins_BreakNews: [0]
						});
						for (let i = 0; i < deviceImeiList.length; i++) {
							
							list.push({
								imie: deviceImeiList[i],
								topic: 'A/' + deviceImeiList[i],
								callback: rec
							});

							mq.sendData("B/" + deviceImeiList[i], msg, false);

						}



						mq.subscribes(list);

						this.showPopupFlag = true;
					} catch (error) {

					} finally {

						this.isSending = false;
					}
				}
				//FS的方法
				let FSSend = () => {
					
					this.messageToSend.padEnd(16, ' ').slice(0,16);
					
					this.textLines = [this.messageToSend.slice(0, 8), this.messageToSend.slice(8, 16)];
					
					
					
					showLoading(this, {
						text: "发送中"
					});
					//握手
					let holdHand = (hexs, time) => {
						return new Promise((resolve, reject) => {
							setTimeout(() => {
								resolve(true)
							}, time);
						});
					}
					//画图
					let drawText = () => {
						return new Promise((resolve, reject) => {
							this.$refs.textToHex.drawAndGetPixels().then(allPixels => {
								if (!allPixels) {
									reject("文本初始化失败");
									return;
								}
								console.log("画图成功");
								
								resolve(allPixels)
							}).catch(compEx => {
								reject(compEx);
							});
					
						});
					}
					//发送3个分包的数据
					let task = (allPixels,imei) => {
						try {
							let combinedData = [];
							for (let i = 0; i < 2; i++) {
								let linePixels = (allPixels[i] || []).flat(Infinity).map(item =>
					
									item.replace('0x', '')
								);
					
								for (var j = linePixels.length; j < 256; j++) {
									linePixels.push("00");
					
								}
					
					
								combinedData.push(['0' + (i + 1), '01'].concat(linePixels.slice(0, 128)));
								combinedData.push(['0' + (i + 1), '02'].concat(linePixels.slice(128, 256)));
							}
					
					
							let curr = 1;
							let len = combinedData.length;
					
					
							console.log("包数量", len)
							//分包发送
							let sendPacket = () => {
					
								if (combinedData.length === curr - 1) {
					
					
									holdHand('transmit complete', 200).then(res => {
					
					
									});
									
									return;
								}
					
								let array = combinedData[curr - 1];
					
								let json =JSON.stringify( {
									ins_msg: array.join("")
								});
								mq.sendData("B/" + imei, json, false).then(
									res => {
										curr++;
										console.log("发送成功", curr)
										setTimeout(sendPacket, 500);
									}).catch(err => {
									if (err.code == '10007') {
					
										setTimeout(sendPacket, 500);
									} else {
										console.log("err:", err);
										MsgError('发送失败' + (err.msg || err.code), '确定', these);
									}
					
								});
							}
					
							setTimeout(sendPacket, 40);
							// 5. 发送成功处理
					
					
						} catch (ex) {
							uni.showModal({
								title: '提示',
								content: '发送失败' + (ex.msg || ex.code)
							})
						}
					
					
					}
					
					setTimeout(()=>{
						drawText().then(pixels=>{
							for (let i = 0; i < deviceImeiList.length; i++) {
								let imei = deviceImeiList[i];									
								task(pixels,imei);
							}
							
							setTimeout(()=>{
								hideLoading(these);
								MsgSuccess("发送成功",null,these);
							},800);
						})
					}, 10);

					
				}


				let device = selectedDevices[0];
				let sendDic = [{
						urls: ['/pages/6170/deviceControl/index', '/pages/210/HBY210', '/pages/6075/BJQ6075',
							'/pages/100J/HBY100-J'
						],
						send: FYSSend,
					},
					{
						urls: ['/pages/670/HBY670'],
						send: XSSend
					},
					{
						urls: ['/pages/6075J/BJQ6075J'],
						send: FSSend
					}


				];

				let f = sendDic.find(v => {
					return v.urls.indexOf(device.detailPageUrl) > -1;
				});

				if (f) {
					f.send();
				} else {
					FYSSend();
				}

			},
			onPopupConfirm() {
				this.showPopupFlag = false
				uni.navigateBack()
				console.log('用户点击了确定')
				// 处理确认逻辑
			},
		},
		onLoad(options) {
			these = this;
			mq = MqTool.getMqTool();
			if(mq){
				mq.init();
			}
			const eventChannel = this.getOpenerEventChannel();
			// 监听 'deviceSend' 事件，获取传过来的数据
			eventChannel.on('deviceSend', (data) => {
				console.log('Received detail data:', data);

				this.sendInfo = data.data
				this.downCallback();
			});
			// 如果需要向调用页面返回数据，可以触发 'ack' 事件
			eventChannel.emit('ack', {});

			this.getSystemInfoSyncH();
		},
		onUnload() {
			clearTimeout(timer);
			if (mq) {
				mq.disconnect();
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: rgb(18, 18, 18);
		box-sizing: border-box;
		overflow-x: hidden;

	}

	.device-list {
		flex: 1;
		padding: 0 20rpx;

	}

	.device-card {
		position: relative;
		display: flex;
		align-items: center;
		width: 95%;
		margin-bottom: 20rpx;
	}

	.checkbox {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.5);
		margin-right: 20rpx;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.checkbox.checked {
		background-color: rgb(187, 230, 0);
		border-color: rgb(187, 230, 0);
	}

	.device-content {
		background-color: rgb(26, 26, 26);
		border-radius: 16rpx;
		position: relative;
		/* display: flex; */
		align-items: center;
		padding: 20rpx;
		width: 95%;
	}

	.device-header {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.device-name {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.87);
		margin-left: 12rpx;
		line-height: 50rpx;
		width: 83%;
		white-space: nowrap;
	}

	.ID {
		color: rgba(255, 255, 255, 0.6);
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.device-status {
		width: 122rpx;
		height: 52rpx;
		font-size: 26rpx;
		border-radius: 0px 8px 0px 8px;
		background-color: rgb(42, 42, 42);
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		text-align: center;
		line-height: 52rpx;
	}

	.online {
		color: rgb(187, 230, 0);
	}

	.unline {
		color: rgba(255, 255, 255, 0.4);
	}

	.device-info {
		display: flex;
		justify-content: space-evenly;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.87);
		padding-top: 10rpx;
		position: relative;
	}

	.deviceIMG {
		width: 100rpx;
		height: 100rpx;
		border-radius: 16rpx;
		position: relative;
		background-color: rgba(42, 42, 42, 0.6);
		display: flex;
		align-items: center;
	}

	.IMG {
		width: 68rpx;
		height: 50rpx;
		margin-left: 17%;
	}

	.onlines {
		position: relative;
	}

	.onlines::before {
		content: '';
		position: absolute;
		width: 15rpx;
		height: 15rpx;
		background: rgb(0, 171, 103);
		border-radius: 50%;
		top: 20rpx;
		left: -20rpx
	}

	.unlines {
		position: relative;
	}

	.unlines::before {
		content: '';
		position: absolute;
		width: 15rpx;
		height: 15rpx;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 50%;
		top: 20rpx;
		left: -20rpx
	}

	.line {
		width: 2rpx;
		height: 24rpx;
		background: linear-gradient(90deg,
				rgba(0, 0, 0, 0) 0%,
				rgb(255, 255, 255) 50%,
				rgba(255, 255, 255, 0) 100%);
		margin-top: 12rpx;
	}

	.ql-editor {
		color: rgba(255, 255, 255, 0.6);
		font-size: 30rpx;
	}

	.ql-input {
		width: 95.9%;
		height: 200rpx;
		margin-top: 30rpx;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 16rpx;
		background: rgb(26, 26, 26);
	}

	.textarea {
		color: rgba(255, 255, 255, 0.8);
		background: rgba(42, 42, 42, 1);
		border-radius: 16rpx;
		padding: 10rpx;
		height: 150rpx;
		width: 100%;
	}

	.editInfmation {
		padding: 20rpx;
		border-radius: 40rpx 40rpx 0px 0px;
		background: rgba(28, 28, 28, 1);
		position: fixed;
		bottom: 20rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.login-btn {
		margin-top: 30rpx;
		background-color: rgb(187, 230, 0);
		color: rgb(35, 35, 35);
		border-radius: 50rpx;
		width: 90%;
	}

	.checkbox.disabled {
		opacity: 0.5;
		background-color: rgba(255, 255, 255, 0.1) !important;
		border-color: rgba(255, 255, 255, 0.2) !important;
		pointer-events: none;
		/* 阻止点击事件 */
	}

	/* 可选：离线设备的卡片整体置灰 */
	.device-card[data-offline="true"] {
		opacity: 0.6;
	}
	
	.TextToHex {
		position: fixed;
		top: -99999rpx;
		left: -99999rpx;
		visibility: hidden;
	}
</style>