comm.vue

<template>
    <view>
        <!-- pages/comm/comm.wxml -->
        <text id="v5" class="devices_summary">{{ deviceadd }}</text>
        <!-- 横向均分 -->
        <view class="layout_horizontal" id="v1">
            <button class="button_sp" hover-class="button_sp2" style="flex: 1" @tap="goclear">清屏</button>
            <button class="button_sp" style="flex: 1">{{ connectState }}</button>
            <button class="button_sp" hover-class="button_sp2" style="flex: 1" @tap="gotoback">返回</button>
			<button class="button_sp" hover-class="button_sp2" style="flex: 1" @tap="gotohome">返回首页</button>
        </view>

        <view class="layout_horizontal" id="v2">
           <!-- <checkbox-group style="flex: 1.45; display: flex" @change="hexsend">
                <checkbox class="flex-wrp2" value="send">十六进制发送</checkbox>
            </checkbox-group>
            <checkbox-group style="flex: 1.45; display: flex" @change="hexrec">
                <checkbox class="flex-wrp2" value="rec">十六进制接收</checkbox>
            </checkbox-group> -->
            <button class="button_sp" hover-class="button_sp2" style="flex: 1" @tap="godisconnect">{{ reconnect }}</button>
        </view>

      <!--  <view class="layout_horizontal" id="v3">
            <view class="vcon" hover-class="vcon2" @tap="settime" style="flex: 1; display: flex; flex-direction: column">
                <view class="flex-view-item">自动发送周期</view>
                <view class="flex-view-item">{{ autoSendInv }}ms</view>
            </view>
            <view class="vcon" style="flex: 1; display: flex; flex-direction: column">
                <view class="flex-view-item">RX:{{ rxRate }}B/S</view>
                <view class="flex-view-item">TX:{{ txRate }}B/S</view>
            </view>
            <view class="vcon" style="flex: 1; display: flex; flex-direction: column">
                <view class="flex-view-item">RX:{{ rxCount }}</view>
                <view class="flex-view-item">TX:{{ txCount }}</view>
            </view>
        </view> -->
		<view class="">
			<p>length：{{konglength}}   angel{{angel}}</p>
		</view>
        <scroll-view class="container" :style="'height: ' + scrollViewHeight + 'px'" :scroll-y="true">
            <view style="display: flex">
                <view class="note_itemtext">{{ recdata }}</view>
            </view>
        </scroll-view>

        <view class="layout_horizontal" id="v4">
            <input class="inputView" @input="voteTitle" :adjust-position="true" style="flex: 1; font-size: 16px; margin-left: 5px" placeholder="写入数据" :value="sendText" />

            <!-- <button class="button_sp" hover-class="button_sp2" @tap="goautosend">{{ autosendText }}</button> -->
            <button class="button_sp" hover-class="button_sp2" @tap="gosend">发送</button>
        </view>

        <!-- 弹窗设置时间 -->
        <!-- <view class="modal-mask" @tap="hideModal" @touchmove.stop.prevent="preventTouchMove" v-if="showModal"></view>
        <view class="modal-dialog" v-if="showModal">
            <view class="modal-title">自动发送周期[ms]</view>
            <view class="modal-content">
                <view class="modal-input">
                    <input placeholder-class="input-holder" type="number" maxlength="5" @input="timeinputChange" class="input" placeholder="时间ms" :value="autoSendInv" />
                </view>
            </view>
            <view class="modal-footer">
                <view class="btn-cancel" @tap="onCancel" data-status="cancel">取消</view>
                <view class="btn-confirm" @tap="onConfirm" data-status="confirm">确定</view>
            </view>
        </view> -->
        <!-- 弹出定时发送设置 -->

        <!-- 弹出提示框 start -->
        <view class="dialog_screen" @tap="hideModalTips" v-if="showModalStatus"></view>
        <view :animation="animationData" class="dialog_attr_box" v-if="showModalStatus">
            <view style="background: white; position: relative; overflow: hidden">
                <view class="dialog_title">{{ showTips }}</view>
            </view>
        </view>
        <!-- 弹出提示框 end -->
    </view>
</template>

<script>
// pages/comm/comm.js
var app = getApp();
var timer;
var autoTimer;
// ArrayBuffer转16进度字符串示例
function ab2hex(buffer) {
    var hexArr = Array.prototype.map.call(new Uint8Array(buffer), function (bit) {
        return ('00' + bit.toString(16)).slice(-2) + ' ';
    });
    return hexArr.join('').toUpperCase();
}
function ab2Str(arrayBuffer) {
    let unit8Arr = new Uint8Array(arrayBuffer);
    let encodedString = String.fromCharCode.apply(null, unit8Arr);
    //var decodedString = decodeURIComponent(mencode.encodeURIComponent((encodedString)));//没有这一步中文会乱码
    //var decodedString = mencode.encodeURIComponent((encodedString));
    //console.log(decodedString);
    //return decodedString
    return encodedString;
}
function stringToBytes(str) {
    var ch;
    var st;
    var re = [];
    for (var i = 0; i < str.length; i++) {
        ch = str.charCodeAt(i); // get char
        st = []; // set up "stack"
        do {
            st.push(ch & 255); // push byte to stack
            ch = ch >> 8; // shift value down by 1 byte
        } while (ch);
        // add stack contents to result
        // done because chars have "wrong" endianness
        re = re.concat(st.reverse());
    }
    // return an array of bytes
    return re;
}
export default {
    data() {
        return {
			konglength: 0,
			angel: 0,
			
            device: null,
            connected: false,
            readyRec: false,
            hexSend: false,
            hexRec: false,
            chs: [],
            deviceadd: '  ',
            windowHeight: 0,

            // 页面总高度将会放在这里
            navbarHeight: 0,

            // navbar的高度
            headerHeight: 0,

            // header的高度
            scrollViewHeight: 300,

            // scroll-view的高度
            recdata: '',

            rxCount: 0,
            txCount: 0,
            rxRate: 0,
            txRate: 0,
            connectState: '正在连接',
            reconnect: '连接中...',
            timRX: 0,
            timTX: 0,
            sendText: 'POWER',
            autoSendInv: 10,
            autosendEn: false,
            autosendText: '自动发送',
            showModal: false,
            showModalStatus: false,
            showTips: '',
            name: '',
            deviceId: '',
            canWrite: false,
            animationData: ''
        };
    }
    /**
     * 生命周期函数--监听页面隐藏
     */,
    onHide: function () {
        console.warn('onHide goto disconnect');
        if (this.connected) {
            uni.closeBLEConnection({
                deviceId: this.deviceId
            });
            this.setData({
                connected: false,
                reconnect: '重新连接',
                connectState: '已断开'
            });
            uni.setNavigationBarTitle({
                title: '已断开 ' + this.device.name
            });
            console.warn('DisConnect ', this.deviceId);
        }
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        app.globalData.saveSetting(this.autoSendInv, this.sendText);
        if (this.connected) {
            uni.closeBLEConnection({
                deviceId: this.deviceId
            });
            console.warn('DisConnect ', this.deviceId);
            this.connected = false;
        }
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
		console.log('common页面接收全局options', options)
        //app.readSetting()
        // this.device = app.globalData.ble_device;
		this.device = {
			deviceId: options.deviceId,
			name: options.name
		}
		// console.log('onload -> createBLEConnection', this.device)
        this.readyRec = false;
        // this.setData({
        //     autoSendInv: app.globalData.mautoSendInv,
        //     sendText: app.globalData.msendText
        // });
        // console.log("start ", this.data.autoSendInv, this.data.sendText)
        // this.Countdown();
        //this.showModalTips("开始连接设备....")
        // if (this.device == null) {
        //     this.calScrolHigh();
        //     return;
        // }
        const deviceId = this.device.deviceId;
        this.setData({
            deviceadd: 'MAC ' + deviceId
        });
        // this.calScrolHigh();
        const name = this.device.name;
        console.log('device = ', this.device);
        this.serviceu = '0000FFE0-0000-1000-8000-00805F9B34FB'.toUpperCase();
        this.txdu = '0000FFE1-0000-1000-8000-00805F9B34FB'.toUpperCase();
        this.rxdu =  '0000FFE1-0000-1000-8000-00805F9B34FB'.toUpperCase();
		
		
        console.log('target uuids = ', this.serviceu, this.txdu, this.rxdu);
        uni.setNavigationBarTitle({
            title: '正在连接 ' + this.device.name
        });
		setTimeout(()=>{
			
		
        uni.createBLEConnection({
            deviceId,
            success: (res) => {
				console.log('onload -> createBLEConnection', deviceId,res)
                this.setData({
                    connected: true,
                    name,
                    deviceId,
                    connectState: '读取服务',
                    reconnect: '断开连接'
                });
                uni.setNavigationBarTitle({
                    title: '已连接 ' + this.device.name
                });
                //this.showModalTips("读取BLE所有服务")
                this.getBLEDeviceServices(deviceId);
            },
			fail(res) {
					console.log('createBLEConnection', res)
			}
        });
		}, 2000)
    },
    methods: {
		setData(obj){
			for(var key in obj){
				this[key] = obj[key]
			}
		},
		gotohome(){
			uni.navigateTo({
				url: '/pages/tabBar/component/component111'
			})
		},
        goclear() {
            this.setData({
                recdata: '',
                rxCount: 0,
                txCount: 0
            });
        },

        Countdown() {
            var that = this;
            timer = setTimeout(function () {
                //console.log("----Countdown----");
                that.setData({
                    rxRate: that.timRX * 2,
                    txRate: that.timTX * 2
                });
                that.setData({
                    timRX: 0,
                    timTX: 0
                });
                that.Countdown();
            }, 500);
        },

        // autoSend() {
        //     //定时发送
        //     var that = this;
        //     if (this.connected) {
        //         this.autosendEn = true;
        //         autoTimer = setTimeout(function () {
        //             that.autoSend();
        //             that.gosend();
        //         }, this.autoSendInv);
        //     } else {
        //         //已经断开了连接  禁止自动 发送
        //         this.autosendEn = false;
        //         clearTimeout(autoTimer);
        //         this.setData({
        //             autosendText: '自动发送'
        //         });
        //     }
        // },

        preventTouchMove: function () {},

        // goautosend() {
        //     if (!this.connected) {
        //         this.showModalTips('请先连接BLE设备...');
        //         return;
        //     }
        //     if (!this.autosendEn) {
        //         this.autoSend();
        //         this.setData({
        //             autosendText: '停止发送'
        //         });
        //     } else {
        //         this.autosendEn = false;
        //         clearTimeout(autoTimer);
        //         this.setData({
        //             autosendText: '自动发送'
        //         });
        //     }
        // },

        voteTitle: function (e) {
            this.sendText = e.detail.value;
        },

        // calScrolHigh() {
        //     var that = this;
        //     // 先取出页面高度 windowHeight
        //     uni.getSystemInfo({
        //         success: function (res) {
        //             that.setData({
        //                 windowHeight: res.windowHeight
        //             });
        //         }
        //     });
        //     // 然后取出navbar和header的高度
        //     // 根据文档，先创建一个SelectorQuery对象实例
        //     let query = uni.createSelectorQuery().in(this);
        //     // 然后逐个取出navbar和header的节点信息
        //     // 选择器的语法与jQuery语法相同
        //     query.select('#v1').boundingClientRect();
        //     query.select('#v2').boundingClientRect();
        //     query.select('#v3').boundingClientRect();
        //     query.select('#v4').boundingClientRect();
        //     query.select('#v5').boundingClientRect();
        //     // 执行上面所指定的请求，结果会按照顺序存放于一个数组中，在callback的第一个参数中返回
        //     query.exec((res) => {
        //         // 分别取出navbar和header的高度
        //         let navbarHeight = res[0].height + res[4].height;
        //         let headerHeight = res[1].height + res[2].height + res[3].height + 15;
        //         // 然后就是做个减法
        //         let scrollViewHeight = this.windowHeight - navbarHeight - headerHeight;
        //         // 算出来之后存到data对象里面
        //         this.setData({
        //             scrollViewHeight: scrollViewHeight
        //         });
        //     });
        // },

        getBLEDeviceServices(deviceId) {
			console.log('***-getBLEDeviceServices--deviceId----****', deviceId)
            var that = this;
            this.readyRec = false;
			setTimeout(()=>{
				uni.getBLEDeviceServices({
					deviceId,
					success: (res) => {
						var isService = false;
						 console.log('***-getBLEDeviceServices--services----****', res.services)
						console.log('service size = ', res.services.length);
						for (let i = 0; i < res.services.length; i++) {
							// if (res.services[i].isPrimary) {
							if (this.serviceu == res.services[i].uuid) {
								//this.showModalTips(this.serviceu+"\r找到服务UUID，正在读取所有特征值")
								isService = true;
								this.getBLEDeviceCharacteristics(deviceId, res.services[i].uuid);
								this.setData({
									connectState: '获取特征值'
								});
							}
						}
						if (!isService) {
							//没有找到服务
							this.setData({
								connectState: 'UUID错误'
							});
							this.showModalTips(this.serviceu + '\r找不到目标服务UUID  请确认UUID是否设置正确或重新连接');
						}
					}
				});
			}, 2000)
        },

        getBLEDeviceCharacteristics(deviceId, serviceId) {
            const that = this;
            uni.getBLEDeviceCharacteristics({
                deviceId,
                serviceId,
                success: (res) => {
                    var ismy_service = false;
                    console.log('compute ', serviceId, this.serviceu);
                    if (serviceId == this.serviceu) {
                        ismy_service = true;
                        console.warn('this is my service ');
                    }
                    console.log('getBLEDeviceCharacteristics success', res.characteristics);
                    for (let i = 0; i < res.characteristics.length; i++) {
                        let item = res.characteristics[i];
                        if (ismy_service) {
                            console.log('-----------------------');
                        }
                        console.log('this properties = ', item.properties);
                        if (item.properties.read) {
                            console.log('[Read]', item.uuid);
                            uni.readBLECharacteristicValue({
                                deviceId,
                                serviceId,
                                characteristicId: item.uuid
                            });
                        }
                        if (item.properties.write) {
                            this.setData({
                                canWrite: true
                            });
                            console.log('[Write]', item.uuid);
                            this._deviceId = deviceId;
                            if (ismy_service && this.txdu == item.uuid) {
                                console.warn('find write uuid  ready to ', item.uuid);
                                this._characteristicId = item.uuid;
                                this._serviceId = serviceId;
                                // this.showModalTips(this.txdu+ "\r找到发送特征值")
                            }
                            //this.writeBLECharacteristicValue()
                        }

                        if (item.properties.notify || item.properties.indicate) {
                            console.log('[Notify]', item.uuid);
                            if (ismy_service && this.rxdu == item.uuid) {
                                console.warn('find notity uuid try enablec....', item.uuid);
                                // this.showModalTips(this.rxdu + "\r正在开启通知...")
                                uni.notifyBLECharacteristicValueChange({
                                    //开启通知
                                    deviceId,
                                    serviceId,
                                    characteristicId: item.uuid,
                                    state: true,
                                    success(res) {
                                        console.warn('notifyBLECharacteristicValueChange success', res.errMsg);
                                        that.setData({
                                            connectState: '连接成功'
                                        });
                                        // that.showModalTips(that.rxdu + "\r开启通知成功")
                                        that.readyRec = true;
                                    }
                                });
                            }
                        }
                    }
                },
                fail(res) {
                    console.error('getBLEDeviceCharacteristics', res);
                }
            });
            // 操作之前先监听，保证第一时间获取数据
            uni.onBLECharacteristicValueChange((characteristic) => {
                var buf = new Uint8Array(characteristic.value);
                var nowrecHEX = ab2hex(characteristic.value);
                console.warn('rec: ', nowrecHEX, characteristic.characteristicId);
                var recStr = ab2Str(characteristic.value);
                console.warn('recstr: ', recStr, characteristic.characteristicId);
                if (this.rxdu != characteristic.characteristicId) {
                    console.error('no same : ', this.rxdu, characteristic.characteristicId);
                    return;
                }
                if (!this.readyRec) {
                    return;
                }
                var mrecstr;
                if (this.hexRec) {
                    mrecstr = nowrecHEX;
                } else {
                    mrecstr = recStr;
                }
                if (this.recdata.length > 3000) {
                    this.recdata = this.recdata.substring(mrecstr.length, this.recdata.length);
                }
                console.warn('RXlen: ', buf.length);
                this.setData({
                    recdata: this.recdata + mrecstr,
                    rxCount: this.rxCount + buf.length,
                    timRX: this.timRX + buf.length
                });
				
				// 设置测试值：
				const recBlueResData = JSON.parse(recStr)
				console.log('设备检测值：', recBlueResData)
				this.angel = recBlueResData.angle+1
				this.konglength = recBlueResData.lenth+1
				
            });
        },

        writeBLECharacteristicValue() {
            // 向蓝牙设备发送一个0x00的16进制数据
            let buffer = new ArrayBuffer(1);
            let dataView = new DataView(buffer);
            dataView.setUint8(0, (Math.random() * 255) | 0);
            uni.writeBLECharacteristicValue({
                deviceId: this._deviceId,
                serviceId: this._deviceId,
                characteristicId: this._characteristicId,
                value: buffer
            });
        },

        gotoback: function () {
            if (this.device == null) {
                uni.navigateTo({
                    url: '/pages/index/index'
                });
                return;
            }
            clearTimeout(timer);
            uni.closeBLEConnection({
                deviceId: this.deviceId
            });
            this.setData({
                connected: false,
                chs: []
            });
            uni.navigateBack({
                delta: 1
            });
        },

        gosend() {
            if (!this.connected) {
                this.showModalTips('请先连接BLE设备...');
                return;
            }
            var that = this;
            var hex = this.sendText; //要发送的数据
            var buffer1;
            if (this.hexSend) {
                //十六进制发送

                var typedArray = new Uint8Array(
                    hex.match(/[\da-f]{2}/gi).map(function (h) {
                        return parseInt(h, 16);
                    })
                );
                console.log('hextobyte ', typedArray);
                buffer1 = typedArray.buffer;
            } else {
                //string发送
                var strbuf = new Uint8Array(stringToBytes(hex));
                console.log('strtobyte ', strbuf);
                buffer1 = strbuf.buffer;
            }
            console.log('Txbuf = ', buffer1);
            if (buffer1 == null) {
                return;
            }
            const txlen = buffer1.byteLength;
            uni.writeBLECharacteristicValue({
                deviceId: that._deviceId,
                serviceId: that._serviceId,
                characteristicId: that._characteristicId,
                value: buffer1,
                success: function (res) {
                    // success
                    that.setData({
                        txCount: that.txCount + txlen,
                        timTX: that.timTX + txlen
                    });
                    console.log('success  指令发送成功');
                    console.log(res);
                },
                fail: function (res) {
                    // fail
                    console.log(res);
                },
                complete: function (res) {
                    // complete
                }
            });
        },

        // hexsend: function (e) {
        //     console.log('checking ', e.detail.value);
        //     var selected; //= e.target.dataset.checks ? false : true;
        //     if (e.detail.value.length == 0) {
        //         selected = false;
        //     } else {
        //         selected = true;
        //     }
        //     this.setData({
        //         hexSend: selected
        //     });
        //     console.log('hexsend ', this.hexSend);
        // },

        // hexrec: function (e) {
        //     console.log('checking ');
        //     var selected; //= e.target.dataset.checks ? false : true;
        //     if (e.detail.value.length == 0) {
        //         selected = false;
        //     } else {
        //         selected = true;
        //     }
        //     this.setData({
        //         hexRec: selected
        //     });
        //     console.log('hexRec = ', this.hexRec);
        // },

        godisconnect() {
			console.log('godisconnect****closeBLEConnection***')
            if (this.connected) {
                uni.closeBLEConnection({
                    deviceId: this.deviceId
                });
                this.setData({
                    connected: false,
                    reconnect: '重新连接',
                    connectState: '已断开'
                });
                uni.setNavigationBarTitle({
                    title: '已断开 ' + this.device.name
                });
                this.showModalTips(this.device.name + '已断开连接...');
            } else {
                uni.setNavigationBarTitle({
                    title: '正在连接 ' + this.device.name
                });
                this.setData({
                    connectState: '正在连接',
                    reconnect: '连接中...'
                });
                uni.createBLEConnection({
                    deviceId: this.deviceId,
                    success: (res) => {
                        this.setData({
                            connected: true,
                            connectState: '读取服务',
                            reconnect: '断开连接',
                            recdata: '',
                            rxCount: 0,
                            txCount: 0
                        });
                        uni.setNavigationBarTitle({
                            title: '已连接 ' + this.device.name
                        });
						
                        this.getBLEDeviceServices(this.deviceId);
                    }
                });
            }
        },

        // settime() {
        //     console.log('Click Time set');
        //     this.autoC = false;
        //     this.inputinv = '' + this.autoSendInv;
        //     if (this.autosendEn) {
        //         //正在自动发送，停止它
        //         this.autosendEn = false;
        //         clearTimeout(autoTimer);
        //         this.setData({
        //             autosendText: '自动发送'
        //         });
        //     }
        //     this.setData({
        //         showModal: true
        //     });
        // },

        // timeinputChange: function (e) {
        //     this.autoC = true;
        //     this.inputinv = e.detail.value;
        //     console.log('minputC', this.inputinv);
        // },

        hideModal: function () {
            this.setData({
                showModal: false
            });
        },

        // onCancel: function () {
        //     this.hideModal();
        // },

        // onConfirm: function () {
        //     this.hideModal();
        //     if (this.autoC) {
        //         //this.data.autoSendInv = new Number(this.inputinv)
        //         this.setData({
        //             autoSendInv: parseInt(this.inputinv)
        //         });
        //         console.log('time change');
        //     }
        //     console.log('minputOK', this.inputinv, this.autoSendInv);
        // },

        showModalTips: function (str) {
            var that = this;
            this.setData({
                showTips: str
            });
            // 显示遮罩层
            var animation = uni.createAnimation({
                duration: 200,
                timingFunction: 'linear',
                delay: 0
            });
            this.animation = animation;
            animation.translateY(300).step();
            this.setData({
                animationData: animation.export(),
                showModalStatus: true
            });
            setTimeout(
                function () {
                    animation.translateY(0).step();
                    this.setData({
                        animationData: animation.export()
                    });
                }.bind(this),
                200
            );
            setTimeout(function () {
                that.hideModalTips();
            }, 2000);
        },

        hideModalTips: function () {
            // 隐藏遮罩层
            var animation = uni.createAnimation({
                duration: 200,
                timingFunction: 'linear',
                delay: 0
            });
            this.animation = animation;
            animation.translateY(300).step();
            this.setData({
                animationData: animation.export()
            });
            setTimeout(
                function () {
                    animation.translateY(0).step();
                    this.setData({
                        animationData: animation.export(),
                        showModalStatus: false
                    });
                }.bind(this),
                200
            );
        }
    }
};
</script>
<style>
/* pages/comm/comm.wxss */
page {
    color: #333;
}
.button_sp {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    background-color: #10b7ff;
    color: #fff;
    font-size: 15px;
}
.button_sp2 {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    background-color: #757575;
    color: #fff;
}
.flex-wrp {
    height: auto;
    display: flex;
    background-color: #ffffff;
}
.flex-wrp2 {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 8px;
    font-size: 12px;
}
/*横向布局  */
.layout_horizontal {
    display: flex;
    /*row 横向  column 列表  */
    flex-direction: row;
}
/*纵向布局  */
.layout_vertical {
    height: 100rpx;
    display: flex;
    /*row 横向  column 列表  */
    flex-direction: column;
}
/*划线  */
.line {
    background-color: blue;
    height: 5px;
    width: 100%;
}
.div {
    background-color: white;
    height: 10px;
    width: 10px;
}
.checkbox-hidden {
    position: absolute;
    left: -9999px;
}
.checkbox-icon-group {
    position: absolute;
    left: 3px;
    margin-top: 14px;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid #d1d1d1;
    background-color: #fff;
    border-radius: 3px;
    width: 13px;
    height: 13px;
}
.checkbox-icon {
    position: absolute;
    top: 1px;
    left: 1px;
}
.vcon {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #35373a;
    border-radius: 3px;
}
.vcon2 {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #666666;
    border-radius: 3px;
}
.flex-view-item {
    color: #eee;
    margin-left: 5px;
    margin-top: 1px;
    margin-bottom: 1px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container {
    background-color: #fff;
    background-size: cover;
    width: 98%;
    margin-left: 0.7%;
    justify-content: center;
    border-radius: 3px;
    border: 1px solid #111;
    white-space: normal;
}
.inputView {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 5px;
    margin-top: auto;
}
.txt-light {
    color: #0b0d0d;
    font-size: 13px;
    margin-left: 3px;
    white-space: pre-line;
    display: block;
    width: 100%;
}
.note_itemtext {
    display: -webkit-box;
    font-size: 26rpx;
    color: #000000;
    line-height: 40rpx;
    word-break: break-all;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.blank {
    height: 150rpx;
}
.devices_summary {
    margin-top: 5px;
    font-size: 16px;
    color: #222;
    align-items: center;
    justify-content: center;
    display: flex;
}
.show-btn {
    margin-top: 100rpx;
    color: #22cc22;
}

.modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
    z-index: 9000;
    color: #fff;
}

.modal-dialog {
    width: 540rpx;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 9999;
    background: #f9f9f9;
    margin: -180rpx 105rpx;
    border-radius: 36rpx;
}

.modal-title {
    padding-top: 50rpx;
    font-size: 36rpx;
    color: #030303;
    text-align: center;
}
.modal-content {
    padding: 50rpx 32rpx;
}
.modal-input {
    display: flex;
    background: #fff;
    border: 2rpx solid #ddd;
    border-radius: 4rpx;
    font-size: 28rpx;
}
.input {
    width: 100%;
    height: 82rpx;
    font-size: 28rpx;
    line-height: 28rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    color: #333;
}
input-holder {
    color: #666;
    font-size: 28rpx;
}

.modal-footer {
    display: flex;
    flex-direction: row;
    height: 86rpx;
    border-top: 1px solid #dedede;
    font-size: 34rpx;
    line-height: 86rpx;
}
.btn-cancel {
    width: 50%;
    color: #333;
    text-align: center;
    border-right: 1px solid #dedede;
}
.btn-confirm {
    width: 50%;
    color: #10b7ff;
    text-align: center;
}
.dialog_screen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.2;
    overflow: hidden;
    z-index: 1000;
    color: #fff;
}
.dialog_attr_box {
    width: 100%;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background: #fff;
    padding-top: 1px;
}
.dialog_title {
    font-size: 16px;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 10px;
    background: #10b7ff;
    color: white;
    justify-content: center;
    display: -webkit-box;
    line-height: 40rpx;
    word-break: break-all;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dialog_content {
    position: relative;
    float: left;
    padding: 10px 10px;
    width: 25%;
    box-sizing: border-box;
}
</style>