Files
APP/pages/common/send/index.vue

779 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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转换为 px1rpx = 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>