1
0
forked from dyf/APP
Files
APP/pages/6155/deviceDetail.vue

1747 lines
42 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="content contentBg">
<view class="eq">
<view class="leftImg">
<image class="img" :src="formData.img" mode="aspectFit"></image>
</view>
<view class="rightTxt">
<view class="row">
<image class="img" src="/static/images/6155/DeviceDetail/battry.png" mode="aspectFit"></image>
<view class="txt">
<view class="bigTxt">{{formData.battary}}%</view>
<view class="smallTxt">电量</view>
</view>
</view>
<view class="row">
<image class="img" src="/static/images/6155/DeviceDetail/time.png" mode="aspectFit"></image>
<view class="txt">
<view class="bigTxt">{{formData.xuhang}}</view>
<view class="smallTxt">续航时间</view>
</view>
</view>
</view>
</view>
<view class="eqinfo">
<view class="item">
<text class="lbl">蓝牙名称</text>
<text class="value">{{formData.blename}}</text>
</view>
<view class="item">
<text class="lbl">设备名称</text>
<text class="value">{{formData.deviceName}}</text>
</view>
<view class="item">
<text class="lbl">充电状态</text>
<text class="value">{{formData.statu}}</text>
</view>
</view>
<view class="lamp">
<view class="title">
<text>灯光亮度</text>
<text>{{formData.liangDu}}%</text>
</view>
<view class="slider-container">
<slider min="1" max="100" step="1" :disabled="false" :value="formData.liangDu" activeColor="#bbe600"
backgroundColor="#00000000" block-size="20" block-color="#ffffffde" @change="sliderChange"
@changing="sliderChange" class="custom-slider" />
</view>
</view>
<view class="lampMode">
<view class="mode fleft" v-on:click.stop="ModeSetting('main')">
<view class="leftImg">
<image class="img" src="/static/images/6155/DeviceDetail/mainLamp.png" mode="aspectFit"></image>
</view>
<view class="rightTxt">
<text class="bigTxt">主灯模式</text>
<text class="smallTxt">{{getMode}}</text>
</view>
</view>
<view class="mode marginLeft fleft" v-on:click.stop="ModeSetting('fu')">
<view class="leftImg">
<image class="img" src="/static/images/6155/DeviceDetail/fuLamp.png" mode="aspectFit"></image>
</view>
<view class="rightTxt">
<text class="bigTxt">辅灯模式</text>
<text class="smallTxt">泛光模式</text>
</view>
</view>
<view class="mode fleft" v-on:click.stop="UploadOpenImg()">
<view class="leftImg">
<image class="img" src="/static/images/6155/DeviceDetail/open.png" mode="aspectFit"></image>
</view>
<view class="rightTxt">
<text class="bigTxt">开机画面</text>
<text class="smallTxt">上传</text>
</view>
</view>
<view class="clear"></view>
</view>
<view class="usrinfo">
<view>
<text class="usrtitle fleft">人员信息登记</text>
<view class="btnSend fright" v-on:click.stop="sendUsr">发送</view>
<view class="clear"></view>
<TextToHexV1 class="TextToHex" ref="textToHex" :txts="formData.textLines" :bgColor="'#FFFFFF'"
:color="'#000000'" :fontSize="14" />
</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>
<!-- 弹窗通知 -->
<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 TextToHexV1 from '@/components/TextToHex/TextToHexV1.vue';
import bleTool from '@/utils/BleHelper.js';
import usrApi from '@/api/670/HBY670.js'
import {
showLoading,
hideLoading,
updateLoading
} from '@/utils/loading.js'
import BleReceive from '@/utils/BleReceive';
var ble = null;
var these = null;
var BrighInteval = null;
var recei = null;
export default {
components: {
TextToHexV1
},
data() {
return {
Status: {
Pop: {
showPop: false, //是否显示弹窗
popType: 'custom',
textColor: '#ffffffde',
bgColor: '#383934bd',
borderColor: '#BBE600',
buttonBgColor: '#BBE600',
buttonTextColor: '#232323DE',
iconUrl: '',
message: '您确定要这样做吗?',
buttonText: '确定',
clickEvt: '',
visiblePrompt: false,
promptTitle: '设备名称',
modelValue: '',
visibleClose: false,
okCallback:null
},
BottomMenu: {
show: false,
showHeader: true,
menuItems: [{
text: '强光',
icon: '/static/images/6155/DeviceDetail/qiang.png'
},
{
text: '弱光',
icon: '/static/images/6155/DeviceDetail/ruo.png'
},
{
text: '爆闪',
icon: '/static/images/6155/DeviceDetail/shan.png'
}
],
activeIndex: -1,
bgColor: '#2a2a2a',
itemBgColor: '#3a3a3a',
textColor: '#ffffffde',
textAlign: 'flex-start',
title: '主灯模式',
showDivider: false,
dividerColor: '#00000000',
dividerThickness: '0rpx',
dividerMargin: '10rpx',
itemHeight: '80rpx',
type: '',
showBtn: true,
btnBgColor: "#bbe600",
btnText: "确定",
btnTextColor: "#232323de",
showMask: true,
maskBgColor: '#00000066',
showClose: false
}
},
formData: {
img: '',
battary: '',
xuhang: '',
deviceName: '',
RSSI: '',
statu: '正常',
liangDu: '100',
id: '',
deviceId: '',
textLines: ['', '', ''],
mode: ''
},
inteval: 200,
device: {
id: "",
deviceName: "",
deviceImei: "",
deviceMac: "",
communicationMode: 0,
devicePic: "",
typeName: "",
bluetoothName: null,
deviceStatus: null,
bindingTime: "",
onlineStatus: 0,
battery: "0",
latitude: null,
longitude: null,
alarmStatus: null,
detailPageUrl: "/pages/6155/deviceDetail",
showConfirm: false
}
}
},
onUnload() {
ble.removeReceiveCallback(this);
},
onLoad: function() {
these = this;
recei = BleReceive.getBleReceive();
ble = bleTool.getBleTool();
// let bleName = 'FB_Site_UART'; //JQZM-EF4651 FB_Site_UART
// let f = ble.data.LinkedList.find((v) => {
// if (v.name == bleName) {
// console.log("找到设备了", v);
// these.formData.deviceId = v.deviceId;
// return true;
// }
// return false;
// });
// let link = () => {
// if (bleName == 'FB_Site_UART') {
// ble.LinkBlue(f.deviceId, '0000AE30-0000-1000-8000-00805F9B34FB',
// '0000AE03-0000-1000-8000-00805F9B34FB', '0000AE02-0000-1000-8000-00805F9B34FB');
// } else {
// ble.LinkBlue(f.deviceId, '0000FFE0-0000-1000-8000-00805F9B34FB',
// '0000FFE1-0000-1000-8000-00805F9B34FB', '0000FFE2-0000-1000-8000-00805F9B34FB');
// }
// }
// if (!f) {
// ble.addDeviceFound((res) => {
// // console.log("发现新设备", res);
// f = res.devices.find((v) => {
// return v.name == bleName;
// });
// if (f) {
// console.log("找到目标设备了", f);
// these.formData.deviceId = f.deviceId;
// link();
// ble.StopSearch();
// }
// });
// ble.StartSearch();
// } else {
// link();
// }
console.log("6155");
ble.addReceiveCallback(these.bleValueNotify);
let eventChannel = this.getOpenerEventChannel();
eventChannel.on('detailData', function(data) {
let device = data.data;
these.device = device;
let f = ble.data.LinkedList.find((v) => {
if (v.macAddress == device.deviceMac) {
console.log("找到设备了", v);
these.formData.deviceId = v.deviceId;
return true;
}
return false;
});
if (!f) {
these.getDetail();
these.showBleUnConnect();
return;
}
let form = f.formData;
if (form) {
let keys = Object.keys(form);
for (var i = keys.length; i >= 0; i--) {
let key = keys[i];
these.formData[key] = form[key];
}
}
these.formData.blename = f.name ? f.name : "Unname";
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();
these.getDetail();
});
},
onHide: function() {
},
onBackPress(e) {
ble.removeReceiveCallback();
},
computed: {
RSSIRemark: function() {
let remark = '极弱';
if (this.formData.RSSI <= 0 && this.formData.RSSI >= -30) {
remark = '强';
}
if (this.formData.RSSI < -30 && this.formData.RSSI >= -60) {
remark = '一般';
}
if (this.formData.RSSI < -60 && this.formData.RSSI >= -85) {
remark = '弱';
}
if (this.formData.RSSI < -85 && this.formData.RSSI >= -100) {
remark = '微弱';
}
},
getMode() {
let txt = "关闭";
if (this.Status.BottomMenu.type == 'fu') {
return txt;
}
switch (this.formData.mode) {
case 0:
txt = "强光模式";
break;
case 1:
txt = "弱光模式";
break;
case 2:
txt = "爆闪模式";
break;
case 3:
txt = "关闭";
break;
default:
txt = "关闭";
break;
}
return txt;
}
},
methods: {
getDevice: function() {
// console.log("LinkedList=", ble.data.LinkedList);
// console.log("formData=", these.formData);
let f = ble.data.LinkedList.find((v) => {
return v.macAddress == these.device.deviceMac;
});
return f;
},
bleValueNotify: function(receive, device, path) {
let str = recei.ReceiveData(receive, device, path);
console.log("处理接收到的数据:" + str);
return;
let data = recei.ReceiveData(receive, device, path);
let bytes = receive.bytes;
if (bytes[0] == 0xFB && bytes[1] == 0x64 && bytes.length >= 8) {
try {
let staticLevelByte = bytes[2];
let getName = function(type) {
let name = "";
switch (type) {
case 0x02:
name = '弱光';
break;
case 0x04:
name = '工作光';
break;
case 0x01:
name = '强光';
break;
case 0x03:
name = '爆闪';
break;
case 0x00:
name = '关闭';
break;
}
return name;
}
let staticLevelText = getName(staticLevelByte);
// 解析照明档位
let lightingLevelByte = bytes[3];
let lightingLevelText = getName(lightingLevelByte);
// 解析剩余电量
let batteryLevelByte = bytes[4];
// 电量百分比范围检查
let batteryLevel = Math.max(0, Math.min(100, batteryLevelByte));
//充电状态
let warn = bytes[5];
if (warn == 0x00) {
warn = '未充电';
} else if (warn == 0x01) {
warn = '充电中';
}
// 解析剩余照明时间(第三和第四字节,小端序)
let lightingTime = "";
let HH = Math.max(0, Math.min(100, bytes[6]));
let mm = Math.max(0, Math.min(100, bytes[7]));
lightingTime = HH + "小时" + mm + "分钟";
this.formData.mode = staticLevelText;
this.formData.fuMode = lightingLevelText;
this.formData.battary = batteryLevel;
this.formData.statu = warn;
this.formData.xuhang = lightingTime;
if (batteryLevel <= 20) {
this.showPop({
message: "设备电量低",
iconUrl: "/static/images/6155/DeviceDetail/uploadErr.png",
borderColor: "#e034344d",
buttonBgColor: "#E03434",
});
}
this.setBleFormData();
} catch (error) {
console.log('数据解析错误:', error);
}
}
},
proParam: function() {
uni.navigateTo({
url: '/pages/common/productDes/index?id=' + this.formData.id,
success(ev) {
}
});
},
handRemark: function() {
uni.navigateTo({
url: '/pages/common/operatingInstruct/index?id=' + this.formData.id,
success(ev) {
}
});
},
handVideo: function() {
uni.navigateTo({
url: '/pages/common/operationVideo/index?id=' + this.formData.id,
success(ev) {
}
});
},
showBleUnConnect() {
this.showPop({
message: "蓝牙未连接过该设备,请使用蓝牙重新添加该设备",
iconUrl: "/static/images/6155/DeviceDetail/uploadErr.png",
borderColor: "#e034344d",
buttonBgColor: "#E03434",
buttonText: '去连接',
okCallback: function() {
// console.log("1111");
uni.navigateTo({
url: "/pages/common/addBLE/addEquip",
events: {
BindOver: function(data) {
console.log(data)
}
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('detailData', {
data: these.device
})
},
fail(ex) {
console.log("跳转失败", ex);
}
})
}
});
},
checkImgUpload: function() {
let f = these.getDevice();
if (!f) {
these.showBleUnConnect();
return;
}
// 处理像素数据并发送
var processAndSendImageData = function(pixels) {
return new Promise((resolve, reject) => {
// 创建RGB565格式的像素数据
const arr = ble.convertToRGB565(pixels, 'bgr');
var list = [];
let index = 0; // 用于追踪arr的当前位置
let packetSize = 2048;
let cSize = 248;
// 外层循环7个主要元素i从1到7
for (let i = 1; i < 8; i++) {
let secondLevel = [];
let secondCnt = 0;
// 中层循环每个主要元素包含9个子数组j从1到9
for (let j = 1; j < 10; j++) {
// 确定当前子数组的长度前8个是254第9个是64
let thirdLevel = [];
// 从arr中提取相应数量的元素
for (let k = 0; k < cSize && index < arr.length; k++) {
if (secondCnt == packetSize) {
break;
}
thirdLevel.push(arr[index]);
secondCnt++;
index++;
}
secondLevel.push(thirdLevel);
}
list.push(secondLevel);
}
console.log("list=", list);
let length = 0;
for (let i = 0; i < list.length; i++) {
const item = list[i];
let clength = 0;
for (let j = 0; j < item.length; j++) {
const element = item[j];
console.log("第" + i + "包,第" + j + "小包,长度:" + element.length)
length += element.length;
clength += element.length;
}
}
// 分包发送
sendImagePackets(list).then(resolve).catch(reject);
});
}
// 分包发送图片数据
var sendImagePackets = function(imageData) {
return new Promise((resolve, reject) => {
// 总数据包数
const totalPackets = 7;
let currentPacket = 1;
let childPacket = 1;
let totalChildPacket = 9;
// 发送单个数据包
const sendNextPacket = () => {
if (currentPacket > totalPackets) {
setTimeout(() => {
hideLoading(these);
these.Status.BottomMenu.show = false;
these.showPop({
message: "上传成功",
iconUrl: "/static/images/6155/DeviceDetail/uploadSuccess.png",
borderColor: '#BBE600',
buttonBgColor: '#BBE600'
});
resolve();
}, 20000)
return;
}
var packetData = imageData[currentPacket - 1][childPacket - 1];
// if (packetData.length == 0) {
// hideLoading(these);
// these.Status.BottomMenu.show = false;
// these.showPop({
// message: "上传成功",
// iconUrl: "/static/images/6155/DeviceDetail/uploadSuccess.png"
// });
// resolve();
// return;
// }
let start = 0;
let bufferSize = packetData.length * 2;
if (currentPacket == 7) {
if (childPacket > 2 && childPacket < 9) {
bufferSize = 496;
} else if (childPacket == 9) {
bufferSize = 128;
}
}
if (childPacket == 1) {
bufferSize = bufferSize + 8
start = 8;
}
if (childPacket == 9) { //|| (currentPacket==7 && childPacket==3
bufferSize = bufferSize + 1
}
//FA 09 10 04 FC 09 [00] [01] + 4096字节+FF 数据格式
var buffer = new ArrayBuffer(bufferSize);
var dataView = new DataView(buffer);
if (childPacket == 1) {
dataView.setUint8(0, 0xFA); // 帧头
dataView.setUint8(1, 0x09); // 帧头
dataView.setUint8(2, 0x10); // 帧头
dataView.setUint8(3, 0x04); // 帧头
dataView.setUint8(4, 0xFC); // 帧头
dataView.setUint8(5, 0x09); // 帧头
dataView.setUint8(6, 0x00); // 图序号,图片固定0视频的话要写序号
dataView.setUint8(7, currentPacket); //子包序号
}
for (let i = 0; i < packetData.length; i++) {
dataView.setUint16(start + i * 2, packetData[i], false); //本包数据,大端字节序
}
console.log("packetData.length=", packetData.length);
console.log("bufferSize=", bufferSize)
if (childPacket == 9) { // || (currentPacket==7 && childPacket==3
dataView.setUint8(bufferSize - 1, 0xFF);
}
//发送数据包
ble.sendData(f.deviceId, buffer, f.writeServiceId, f.wirteCharactId,
30)
.then(() => {
let curr = childPacket + (currentPacket - 1) *
totalChildPacket;
console.log("第" + currentPacket + "大包,第" + childPacket +
"小包发送完成,总计:" + curr);
updateLoading(these, {
text: "正在发送" + curr + "/63"
})
if (childPacket == 9) {
currentPacket++;
childPacket = 1;
} else {
childPacket++;
}
setTimeout(sendNextPacket, 100);
}).catch(err => {
if (err.code == 10007) {
setTimeout(sendNextPacket, 100);
return;
}
console.log("发送数据包失败了", err);
these.Status.BottomMenu.show = false;
these.showPop({
message: "发送数据包失败了" + err.msg,
iconUrl: "/static/images/6155/DeviceDetail/uploadErr.png",
borderColor: "#e034344d",
buttonBgColor: "#E03434",
});
hideLoading(these);
reject(err);
});
}
// 开始发送数据
sendNextPacket();
});
}
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success: function(res) {
uni.navigateTo({
url: "/pages/6155/ImgCrop",
events: {
ImgCutOver: function(data) {
showLoading(these, {
text: "正在发送0/52"
});
these.Status.BottomMenu.show = false;
setTimeout(function() {
processAndSendImageData(data.piexls).catch((
ex) => {
console.log("出现异常", ex);
});
}, 0)
}
},
success(ev) {
ev.eventChannel.emit('checkImg', {
data: res.tempFiles[0].path
})
},
fail(ex) {
console.log("跳转页面失败" + JSON.stringify(ex));
}
});
}
});
},
UploadOpenImg: function() {
//上传开机画面
this.Status.BottomMenu.menuItems = [];
this.Status.BottomMenu.title = "上传开机画面";
this.Status.BottomMenu.type = "checkImg";
this.Status.BottomMenu.show = true;
},
ModeSetting: function(type) {
this.formData.mode = type;
let items = [];
let title = '';
switch (type) {
case "main":
title = '主灯模式';
items = [{
text: '强光',
icon: '/static/images/6155/DeviceDetail/qiang.png'
},
// {
// text: '工作光',
// icon: '/static/images/6155/DeviceDetail/fan.png'
// },
{
text: '弱光',
icon: '/static/images/6155/DeviceDetail/ruo.png'
},
{
text: '爆闪',
icon: '/static/images/6155/DeviceDetail/shan.png'
},
{
text: '关闭',
icon: '/static/images/6155/DeviceDetail/close.png'
}
];
break;
case "fu":
title = '辅灯模式';
items = [{
text: '泛光',
icon: '/static/images/6155/DeviceDetail/fan.png'
}];
break;
}
this.Status.BottomMenu.menuItems = items;
this.Status.BottomMenu.title = title;
this.Status.BottomMenu.type = type;
this.Status.BottomMenu.show = true;
},
showMenu(flag) {
this.Status.BottomMenu.show = true;
},
closeMenu() {
this.Status.BottomMenu.show = false;
},
btnClick(item, index) {
if (this.Status.BottomMenu.activeIndex == -1) {
this.showToast('请选择模式');
return;
}
//发送指令给设备
switch (this.Status.BottomMenu.type) {
case "main":
this.setMode(this.Status.BottomMenu.activeIndex, this.Status.BottomMenu.type);
break;
case "fu":
this.setMode(this.Status.BottomMenu.activeIndex, this.Status.BottomMenu.type);
break;
}
this.closeMenu();
},
setMode(mode, type) {
let dataValue = 0;
switch (mode) {
case 0:
if (type == 'main') {
dataValue = 0x01;
} else if (type == 'fu') {
dataValue = 0x04;
}
break;
case 1:
dataValue = 0x02;
break;
// case 2:
// dataValue = 0x02;
// break;
case 2:
dataValue = 0x03;
break;
case 3:
dataValue = 0x0B;
break;
}
// console.log("dataValue=", dataValue)
// 构建数据包
var buffer = new ArrayBuffer(6);
var dataView = new DataView(buffer);
dataView.setUint8(0, 0xFA); // 帧头
dataView.setUint8(1, dataValue); // 帧类型
dataView.setUint8(2, 0x00); // 数据
dataView.setUint8(3, 0x01); // 数据
dataView.setUint8(4, 0x00); // 数据
dataView.setUint8(5, 0xFF); // 数据
let f = this.getDevice();
// 发送数据
if (!f) {
these.showBleUnConnect();
return;
}
showLoading(these, {
text: "请稍候..."
});
ble.sendData(f.deviceId, buffer, f.writeServiceId, f.wirteCharactId, 30).then(() => {
this.formData.mode = mode;
this.setBleFormData();
}).catch((ex) => {
these.showPop({
message: "发送失败," + ex.msg,
iconUrl: "/static/images/6155/DeviceDetail/uploadErr.png",
borderColor: "#e034344d",
buttonBgColor: "#E03434",
});
}).finally(() => {
hideLoading(these);
});
},
handleItemClick(item, index) {
switch (this.Status.BottomMenu.type) {
case "main":
break;
case "fu":
break;
}
this.Status.BottomMenu.activeIndex = index;
},
setBleFormData() {
ble.data.LinkedList.find((v) => {
if (v.deviceId == these.formData.deviceId) {
v.formData = these.formData;
return true;
}
return false;
});
uni.setStorage({
key: ble.StorageKey,
data: ble.data.LinkedList
})
},
closePop: function() {
this.Status.Pop.showPop = false;
if (this.Status.Pop.cancelCallback) {
this.Status.Pop.cancelCallback();
}
},
HidePop: function() {
// console.log("1111");
if (this.Status.Pop.clickEvt == 'SendUsr') {
}
if (this.Status.Pop.okCallback) {
this.Status.Pop.okCallback();
}
this.Status.Pop.showPop = false;
},
showPop: function(option) {
hideLoading(this);
let defaultCfg = {
showHeader: false,
headerTxt: "",
showHeader: false,
showCancel: false,
borderColor: '#BBE600',
buttonBgColor: '#BBE600',
okCallback: null,
cancelCallback: null,
popType: 'custom',
buttonText: '确定',
clickEvt: ''
};
if (!option) {
}
let keys = Object.keys(option);
for (var i = 0; i < keys.length; i++) {
let key = keys[i];
this.Status.Pop[key] = option[key];
}
keys = Object.keys(defaultCfg);
for (var i = 0; i < keys.length; i++) {
let key = keys[i];
if (key in option) {
continue;
}
this.Status.Pop[key] = defaultCfg[key];
}
this.Status.Pop.showPop = true;
},
sendUsr() {
let f = this.getDevice();
if (!f) {
these.showBleUnConnect()
return;
}
showLoading(these, {
text: "请稍候..."
});
this.setBleFormData();
let task = async () => {
var sendTxtPackge = (rgbdata, type, str) => {
var promise = new Promise((resolve, reject) => {
try {
let packetSize = rgbdata.length; //每包均分的数量
let mode = rgbdata.length % packetSize; //最后一包的数量
let cnt =
1; // parseInt(rgbdata.length / packetSize) + (mode > 0 ? 1 :0); //总包数量
let curr = 1; //当前包序号
let sendNext = () => {
if (curr > cnt) {
resolve();
return;
}
let bufferSize = 261;
console.log("bufferSize=", bufferSize)
let buffer = new ArrayBuffer(bufferSize);
let dataView = new DataView(buffer);
let startIndex = (curr - 1) * packetSize;
let endIndex = Math.min(startIndex + packetSize, rgbdata
.length);
if (startIndex > endIndex) {
return;
}
let packetData = rgbdata.slice(startIndex,
endIndex); //取一片数据发送
console.log("packetData.length=", packetData.length);
let start = 0;
if (curr == 1) {
dataView.setUint8(0, 0xFA);
dataView.setUint8(1, type);
dataView.setUint8(2, 0x01);
dataView.setUint8(3, 0x00);
start = 4;
}
for (let i = 0; i < packetData.length; i++) {
dataView.setUint8(start + i, packetData[i]);
}
dataView.setUint8(bufferSize - 1, 0xFF);
let inteval = parseInt(this.inteval ? this.inteval : 50);
console.log("inteval=", inteval)
ble.sendData(f.deviceId, buffer, f.writeServiceId, f
.wirteCharactId, 30).then(() => {
curr++;
setTimeout(sendNext, inteval);
}).catch(err => {
if (err.code == '10007') {
setTimeout(sendNext, inteval);
} else {
reject(err);
}
});
}
sendNext();
} catch (ex) {
console.log("ex=", ex);
reject(ex);
}
});
return promise;
}
console.log("11111");
var result = null;
try {
console.log("this.$refs.textToHex=", this.$refs.textToHex);
result = await this.$refs.textToHex.drawAndGetPixels();
} catch (ex) {
console.log("ex=", ex);
}
if (!result) {
hideLoading(this);
return;
}
console.log("result=", result);
result = result.map(level1 => {
return level1.flat(Infinity);
});
console.log("result=", result);
// var str1="FA 06 01 00 FF FF F7 9F EF 6F EC F7 EA 09 CF FF AF FB EF EB EF EB EC 6B EF EB EC 6B EF EB EF FB EE 63 FF FF FF FF F7 9F EF 6F EC F7 EA 09 CF FF AF FB EF EB EF EB EC 6B EF EB EC 6B EF EB EF FB EE 63 FF FF FF FF F7 FF 81 03 ED BB DD B7 CB CF F3 C7 CD 39 BE FF FE FF C0 03 FE FB FD FB F3 F7 8F 87 FF FF FF FF FE FF FE FF FE FF C0 03 FF FB FD FB FD FB FD FB FD FB FB FB FB FF F7 F7 EF F7 9F 8F FF FF 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 FF"
// var str2="FA 07 01 00 FF FF EE DD EE DF EF 5B AB DF AA 03 AE FF AE FF EE 03 EE FF EE FF EE 03 EE FF EE FF EE E3 FF FF FF FF EE DD EE DF EF 5B AB DF AA 03 AE FF AE FF EE 03 EE FF EE FF EE 03 EE FF EE FF EE E3 FF FF FF FF EF 77 EF 73 EF 7F 80 01 EF 7F EF 7F EF 03 E7 3B 8E BB EE D7 EE EF ED E7 ED 9B 8B 7D FF FF FF FF FF FF F7 EF F7 F7 EF F7 DF FB FF FF FF FF FE FF 80 01 FE 7F FD BF FB DF F7 E7 9F F9 FF FF 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 FF"
// var str3="FA 08 01 00 FF FF EF DF EC 01 EF FF AB FF AA 03 AA FB AE FB EE 03 EF DF EF DF EE DB ED DF ED DD EF 1F FF FF FF FF EF BF EF 87 81 77 EE F7 EC 03 81 7F EF 7F EF 7F EF 03 81 7F EF 7F EF 7D EF 7D EF 03 FF FF FF FF F9 F1 CF BF DF FF DF FF C1 FF DD 81 DD F7 DD F7 C1 F7 DF 77 FF 77 BF 77 BF 77 FF F7 FF FF FF FF FD FF FD FF FB FF FB FF F0 07 E7 F7 EF F7 D8 07 BF F7 FF F7 F8 07 FF F7 FF F7 FF C7 FF FF FF FF FF FF FF FF FF FF FE FF FE 7F FE 7F FE FF FD BF FD FF FB DF F7 EF EF F7 DF FB BF FD FF FF 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 FF"
// let arr1=('0x'+(str1.split(' ').join(",0x"))).split(',');
// let arr2=('0x'+(str2.split(' ').join(",0x"))).split(',');
// let arr3=('0x'+(str3.split(' ').join(",0x"))).split(',');
// result=[arr1,arr2,arr3];
// console.log("result=",result);
let h3dic = [0x06, 0x07, 0x08];
let pros = [];
let flag = true;
for (var i = 0; i < result.length; i++) {
let str = this.formData.textLines[i];
if (str.length > 0) {
let width = str.length * 16;
var rgb = result[i];
try {
// console.log("1111");
await sendTxtPackge(rgb, h3dic[i], str);
// console.log("222222");
} catch (ex) {
flag = false;
console.log("33333");
break;
}
}
}
hideLoading(these);
if (flag) {
console.log("发送成功");
this.showPop({
message: "发送成功",
iconUrl: "/static/images/6155/DeviceDetail/uploadSuccess.png",
borderColor: '#BBE600',
buttonBgColor: '#BBE600'
});
let json = {
deviceId: these.device.id,
name: these.formData.textLines[1],
position: these.formData.textLines[0],
unitName: these.formData.textLines[2],
code: ""
};
usrApi.sendUsr(json)
} else {
this.showPop({
message: "出现异常发送失败",
iconUrl: "/static/images/6155/DeviceDetail/uploadErr.png",
borderColor: "#e034344d",
buttonBgColor: "#E03434",
});
}
}
setTimeout(task, 0);
},
getDetail() {
var that = this;
usrApi.getDetail(this.device.id).then(res => {
if (res && res.code == 200) {
res = res.data;
let personnelInfo = res.personnelInfo;
if (personnelInfo) {
these.formData.textLines[2] = personnelInfo.unitName;
these.formData.textLines[1] = personnelInfo.name;
these.formData.textLines[0] = personnelInfo.position;
}
}
});
},
ack: function() {
let eventChannel = this.getOpenerEventChannel();
eventChannel.emit('ack', {
data: '我已收到了您的消息,谢谢。'
});
},
sliderChange: function(evt) {
this.formData.liangDu = evt.detail.value;
clearTimeout(BrighInteval)
//给蓝牙设备发送信号更新亮度
BrighInteval = setTimeout(() => {
this.sendBrightness();
this.setBleFormData();
}, 100);
},
sendBrightness: function() {
const buffer = new ArrayBuffer(6);
const dataView = new DataView(buffer);
let data = '0x' + parseInt(this.formData.liangDu).toString(16);
console.log("亮度:" + this.formData.liangDu + ',16进制:' + data);
dataView.setUint8(0, 0xFA); // 帧头
dataView.setUint8(1, 0x05); // 帧类型:亮度调节
dataView.setUint8(2, 0x00); // 包序号
dataView.setUint8(3, 0x01); // 包序号
dataView.setUint8(4, data); // 数据长度
dataView.setUint8(5, 0xFF); // 数据长度
let f = this.getDevice();
if (f) {
// 发送数据
ble.sendData(f.deviceId, buffer, f.writeServiceId, f.wirteCharactId, 30);
}
},
//获取当前设备状态
GetDeviceStatu: function() {
//数据头 命令码 数据 校验码
//JQOC 0B 00 9C41
//硬件响应
//数据头 命令码 主灯模式 副灯模式 亮度(%) 电量(%) 充电状态 校验码
//JQOC 0B 01 01 64 85 01 9C41
this.sendCmd('0x0B');
},
//设备重启
DeviceReStart: function() {
//数据头 命令码 数据 校验码
//JQOC 0C 01 9C412
this.sendCmd('0x0C');
},
//恢复出厂设置
DeviceReSet: function() {
//数据头 命令码 数据 校验码
//JQOC 0D 01 9C412
this.sendCmd('0x0D');
},
sendCmd: function(type, callback) {
//数据头 命令码 数据 校验码
const buffer = new ArrayBuffer(7);
const dataView = new DataView(buffer);
let data = '0x' + parseInt(this.formData.liangDu).toString(16);
console.log("亮度:" + this.formData.liangDu + ',16进制:' + data);
dataView.setUint8(0, 'JQOC'); // 帧头
dataView.setUint8(1, type); // 帧类型:亮度调节
dataView.setUint8(2, '0x01'); // 包序号
dataView.setUint8(3, '9C41'); // 数据长度
let f = this.getDevice();
if (f) {
// 发送数据
ble.sendData(f.deviceId, buffer, f.writeServiceId, f.wirteCharactId, 30);
}
}
}
}
</script>
<style>
.content {
box-sizing: border-box;
width: 100%;
min-height: 100vh;
height: auto;
}
.contentBg {
background-color: #121212;
color: #ffffffde;
}
.fleft {
float: left;
}
.fright {
float: right;
}
.clear {
clear: both;
}
.displayNone {
display: none !important;
}
.p100 {
width: 100%;
height: 100%;
}
.center {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.centerLeft {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
}
.content {
padding: 30rpx;
box-sizing: border-box;
}
.eq {
width: 100%;
height: 250rpx;
border-radius: 8px;
background: rgba(26, 26, 26, 1);
box-sizing: border-box;
padding: 24rpx 28rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
margin-bottom: 24rpx;
}
.eq .leftImg {
box-sizing: border-box;
padding: 36rpx;
border-radius: 16rpx;
background: rgba(42, 42, 42, 0.5);
}
.eq .leftImg,
.eq .rightTxt {
width: 50%;
height: 100%;
}
.eq .rightTxt {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: space-evenly;
align-items: flex-start;
}
.eq .leftImg .img {
width: 100%;
height: 100%;
}
.eq .rightTxt .img {
width: 52rpx;
height: 52rpx;
}
.eq .rightTxt .row {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
padding-left: 50rpx;
}
.eq .rightTxt .row .txt {
padding-left: 20rpx;
}
.eq .bigTxt {
color: rgba(255, 255, 255, 0.87);
font-family: "PingFang SC";
font-size: 28rpx;
font-weight: 400;
}
.eq .smallTxt {
color: rgba(255, 255, 255, 0.6);
font-family: "PingFang SC";
font-size: 24rpx;
font-weight: 400;
}
.eqinfo {
border-radius: 16rpx;
background: rgba(26, 26, 26, 1);
box-sizing: border-box;
padding: 14rpx 0rpx;
}
.eqinfo .item {
width: 100%;
height: 60rpx;
line-height: 60rpx;
padding: 0rpx 28rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
}
.eqinfo .lbl {
color: rgba(255, 255, 255, 0.87);
font-family: "PingFang SC";
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0.07px;
text-align: left;
}
.eqinfo .value {
color: rgba(255, 255, 255, 0.6);
font-family: "PingFang SC";
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0.07px;
text-align: left;
}
.lamp {
margin-top: 24rpx;
}
.lamp .title {
width: 100%;
height: 60rpx;
line-height: 60rpx;
padding: 0rpx 28rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
}
.lampMode {
padding: 30rpx 0rpx;
width: 100%;
box-sizing: border-box;
}
.lampMode .mode {
width: calc(calc(100% - 34rpx) / 2);
border-radius: 8px;
margin-top: 20rpx;
background: rgba(26, 26, 26, 1);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: flex-start;
padding: 30rpx;
box-sizing: border-box;
}
.mode.marginLeft {
margin-left: 34rpx !important;
}
.mode .leftImg .img {
width: 70rpx;
height: 70rpx;
}
.mode .rightTxt {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: center;
align-items: flex-start;
padding-left: 20rpx;
}
.mode .bigTxt {
color: rgba(255, 255, 255, 0.87);
font-family: "PingFang SC";
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0.07px;
}
.mode .smallTxt {
color: rgba(255, 255, 255, 0.6);
font-family: "PingFang SC";
font-size: 24rpx;
font-weight: 400;
letter-spacing: 0.07px;
}
.usrinfo {
border-radius: 8px;
width: 100%;
box-sizing: border-box;
padding: 24rpx 28rpx;
background: rgba(26, 26, 26, 1);
}
.usrtitle {
color: rgba(255, 255, 255, 0.87);
font-family: "PingFang SC";
font-size: 28rpx;
font-weight: 400;
height: 40rpx;
line-height: 40rpx;
letter-spacing: 0.07px;
}
.usrinfo .btnSend {
line-height: 65rpx;
border-radius: 8px;
width: 120rpx;
height: 65rpx;
color: rgba(35, 35, 35, 0.87);
font-family: "PingFang SC";
font-size: 20rpx;
font-weight: 400;
letter-spacing: 0.07px;
text-align: center;
background-color: #BBE600;
}
.usrinfo .item {
border-radius: 8px;
width: 100%;
box-sizing: border-box;
line-height: 90rpx;
height: 90rpx;
background: rgba(42, 42, 42, 1);
margin-top: 24rpx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
}
.usrinfo .lbl {
width: 120rpx;
height: 100%;
padding-left: 24rpx;
box-sizing: border-box;
text-align: right;
color: rgba(255, 255, 255, 0.87);
font-family: "PingFang SC";
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0.07px;
}
.usrinfo .value {
width: calc(100% - 120rpx);
height: 100%;
}
.usrinfo .value .uni-input-input {
color: rgba(255, 255, 255, 0.87);
font-family: "PingFang SC";
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0.07px;
text-align: left;
}
.usrplace {
color: rgba(255, 255, 255, 0.4);
font-family: "PingFang SC";
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0.07px;
text-align: left;
}
.proinfo .itemcontent {
display: flex;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-evenly;
}
.proinfo .item {
width: 180rpx;
height: 180rpx;
box-sizing: border-box;
padding: 40rpx;
border-radius: 16rpx;
background: rgba(26, 26, 26, 1);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.proinfo .item .img {
width: 50rpx;
height: 50rpx;
}
.proinfo .item .txt {
color: rgba(255, 255, 255, 0.6);
font-family: "PingFang SC";
font-size: 24rpx;
font-weight: 400;
margin-top: 20rpx;
letter-spacing: 0.07px;
text-align: left;
}
.slider-container {
padding: 0px;
}
.addIco {
width: 100%;
height: 360rpx;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-content: center;
justify-content: center;
align-items: center;
}
.icoContent {
width: 240rpx;
height: 240rpx;
border-radius: 8rpx;
background: rgba(58, 58, 58, 1);
}
.icoContent .img {
width: 70rpx;
height: 70rpx;
}
.TextToHex {
position: fixed;
top: -99999rpx;
left: -99999rpx;
visibility: hidden;
}
</style>