APP/pages/018A/HBY018A.vue

<template>
	<view class="content contentBg">
		<view class="eq">
			<view class="leftImg" @click.stop="previewImg(device.devicePic?device.devicePic:formData.img)">
				<image class="img" :src="device.devicePic?device.devicePic:formData.img" mode="aspectFit"></image>

			</view>
			<view class="rightTxt">
				<view class="row">
					<image class="img" src="/static/images/common/battry.png" mode="aspectFit"></image>
					<view class="txt">
						<view class="bigTxt">{{formData.sta_PowerPercent}}%</view>
						<view class="smallTxt">电量</view>
					</view>
				</view>

			</view>
		</view>
		<view class="eqinfo">

			<view class="item">
				<text class="lbl">设备名称</text>
				<text class="value">{{device.deviceName}}</text>
			</view>
			<view class="item">
				<text class="lbl">Mac地址</text>
				<text class="value">{{device.deviceMac}}</text>
			</view>
			<view class="item">
				<text class="lbl">蓝牙名称</text>
				<text class="value">{{device.bluetoothName}}</text>
			</view>
			<view class="item" @click.top="bleStatuToggle">
				<text class="lbl">蓝牙状态</text>
				<text class="value" :class="formData.bleStatu?'green':'red'">{{getbleStatu}}</text>
			</view>
			<view class="item">
				<text class="lbl">设备状态</text>
				<text class="value">{{formData.sta_charge?dic.sta_charge[formData.sta_charge+'']:"未充电" }}</text>
			</view>
			<view class="item">
				<text class="lbl">定位信息</text>
				<view class="multiValue" @click.stop="gotoMap()">
					<view class="valueItem valueFont">
						{{formData.sta_longitude}}

					</view>
					<view class="valueItem valueFont">

						{{formData.sta_latitude}}

					</view>
					<view class="valueItem">

						<view style="width:80%;float: right;text-align: right;" class="valueFont">
							<uni-icons type="location" size="17" color="rgba(255, 255, 255, 0.8)"
								style="vertical-align: bottom;" />
							{{formData.address}}
						</view>
						<view class="clear"></view>
					</view>
				</view>


			</view>
		</view>

		<view class="warnnig" v-show="formData.sta_ShakeBit!='' && formData.sta_ShakeBit!='0'">
			<view>{{ShakeBit}}</view>
		</view>


		<view class="lampMode">
			<view class="sosContent">
				<view class="btnSos openSos center"
					:class="{active:formData.sta_ShakeBit=='1'||formData.sta_ShakeBit==1}" @click="sosToggle(1)">
					{{formData.sta_ShakeBit==='1'?'报警中':'强制报警'}}
				</view>
				<view class="btnSos closeSos center" @click="sosToggle(0)">解除</view>

			</view>

		</view>

		<view class="lamp">
			<view class="title">
				<text>警示灯</text>

			</view>
		</view>

		<view class="lampMode">
			<view class="mode fleft " v-for="item,index in dic.sta_Side_Light" :class="{'active':formData.sta_Side_Light==item.key,'marginLeft':index%2===1
				}" @click.stop="LighSetting(item,index)">
				<view class="leftImg">
					<image class="img" :src="formData.sta_Side_Light==item.key?item.activeImg:item.img"
						mode="aspectFit">
					</image>

				</view>
				<view class="rightTxt">
					<text class="bigTxt">{{item.name}}</text>

				</view>
			</view>

			<view class="mode fleft marginLeft" @click.stop="gotoPage('TxtMsgSetting')">
				<view class="leftImg">
					<image class="img" src="/static/images/common/shortMsg.png" mode="aspectFit">
					</image>

				</view>
				<view class="rightTxt">
					<text class="bigTxt">短信设置</text>

				</view>
			</view>

			<view class="mode fleft " @click.stop="gotoPage('LinkManSetting')">
				<view class="leftImg">
					<image class="img" src="/static/images/common/linkMan.png" mode="aspectFit">
					</image>

				</view>
				<view class="rightTxt">
					<text class="bigTxt">紧急联系人</text>

				</view>
			</view>



			<view class="clear"></view>
		</view>

		<ProParams :id="device.id"></ProParams>


		<global-loading ref="loading" />

		<MsgBox ref="msgPop" />
	</view>
</template>

<script>
	import api from '@/api/670/HBY670.js';
	import gbk from '@/utils/gbk.js'
	import BleTool from '@/utils/BleHelper.js'
	import BleReceive from '@/utils/BleReceive';
	import {
		showLoading,
		hideLoading,
		updateLoading
	} from '@/utils/loading.js';
	import {
		MsgSuccess,
		MsgError,
		MsgClose,
		MsgWarning,
		showPop,
		MsgInfo,
		MsgClear
	} from '@/utils/MsgPops.js'
	import request, {
		baseURL
	} from '@/utils/request.js'
	import lnglatConvert from '@/utils/wgs84_to_gcj02.js';

	import Common from '@/utils/Common.js';
	import MqttClient from '@/utils/mqtt.js';

	const pagePath = "/pages/018A/HBY018A";

	var ble = null;
	var these = null;
	var recei = null;
	var mq = null;
	var instrusionTime = null;
	var reGeoTime = null;


	export default {
		data() {
			return {
				Status: {
					curr: 0,
					total: 0,
					pageHide: false,


					usrToggle: false,
				},
				formData: {
					img: '/static/images/common/HBY018A.png',
					deviceId: '',
					address: '湖北省武汉市洪山区关山街道宏宇楼',
					sta_longitude: "114.409500",
					sta_latitude: "30.495455",
					sta_PowerPercent: '', //电量
					sta_Side_Light: 0, //灯光状态
					sta_ShakeBit: 0, //报警状态
					sta_system: '', //0关机  1关机充电  2开机未充电  3开机充电
					bleStatu: '',
				},
				dic: {
					sta_Side_Light: [

						{
							key: 1,
							name: '红色慢闪',
							show: true,
							img: '/static/images/102/lowFlash.png',
							activeImg: '/static/images/102/lowFlashActive.png',
							group: 'sta_Side_Light'
						},
						{
							key: 3,
							name: '红色快闪',
							show: true,
							img: '/static/images/100/light.png',
							activeImg: '/static/images/100/lightActive.png',
							group: 'sta_Side_Light'
						},
						{
							key: 2,
							name: '红色常亮',
							show: true,
							img: '/static/images/102/liting.png',
							activeImg: '/static/images/102/litingActive.png',
							group: 'sta_Side_Light'
						}


					],
					sta_charge: {
						"0": '未充电',
						"1": '充电中'
					}

				},
				device: {
					id: "",
					deviceName: "",
					deviceImei: "",
					deviceMac: "",
					communicationMode: 0,
					devicePic: "",
					typeName: "",
					bluetoothName: null,
					deviceStatus: null,
					bindingTime: "",
					onlineStatus: 0,
					battery: "0",
					latitude: '30.495455',
					longitude: '114.409500',
					alarmStatus: null,
					detailPageUrl: "/pages/018A/HBY018A",
					showConfirm: false,
					contact1Phone: "",
					contact2Phone: "",
					sosSmsMsg: ""
				}
			}
		},

		onUnload() {
			console.log("页面卸载,释放资源");
			ble.removeAllCallback(pagePath);
			clearInterval(instrusionTime);
			instrusionTime = 0;
		},
		onLoad: function() {
			these = this;
			recei = BleReceive.getBleReceive();
			ble = BleTool.getBleTool();


			ble.addReceiveCallback(this.bleValueNotify, pagePath);
			ble.addStateBreakCallback(this.bleStateBreak, pagePath);
			ble.addStateRecoveryCallback(this.bleStateRecovry, pagePath);
			ble.addDisposeCallback(this.deviceDispose, pagePath);
			ble.addRecoveryCallback(this.deviceRecovry, pagePath);

			this.initWatch();


			let eventChannel = this.getOpenerEventChannel();

			eventChannel.on('detailData', (data) => {

				// console.log("收到父页面的参数：" + JSON.stringify(data));
				var device = data.data;
				these.device = device;

				this.getDeviceDetail();
				let f = these.getDevice();
				if (!f) {
					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.bleStatu = false;
				these.formData.deviceId = f.deviceId;
				ble.LinkBlue(f.deviceId, f.writeServiceId, f.wirteCharactId, f.notifyCharactId).then(res => {
					these.formData.bleStatu = true;
				}).catch(ex => {
					these.formData.bleStatu = 'err';
					MsgError("连接错误:" + ex.msg, "确定", these);
				});;
				these.formData.sta_IntrusTime = 0;
				these.formData.sta_sosadd = "";
				these.setBleFormData();



			});

		},
		onHide: function() {
			this.Status.pageHide = true;
		},
		onShow() {
			this.Status.pageHide = false;

			let f = this.getDevice();
			if (f) {
				these.formData.bleStatu = 'connecting';
				ble.LinkBlue(f.deviceId, f.writeServiceId, f.wirteCharactId, f.notifyCharactId).then(res => {
					these.formData.bleStatu = true;
				}).catch(ex => {
					these.formData.bleStatu = 'err';
					MsgError("连接错误:" + ex.msg, "确定", these);
				});
			}
		},
		computed: {

			getbleStatu() {

				if (this.formData.bleStatu === true) {
					return '已连接';
				}
				if (this.formData.bleStatu === 'connecting') {
					return '连接中';
				}
				if (this.formData.bleStatu === 'dicconnect') {
					return '正在断开';
				}
				if (this.formData.bleStatu === 'err') {
					return '连接异常';
				}
				return '未连接';
			},
			ShakeBit() {
				let dic = {
					"1": "设备SOS求救中",
					"2": "设备静止报警中",
					"6": "设备遇水报警中"
				};
				let keys = Object.keys(dic);
				let f = keys.find(key => {
					if (key == this.formData.sta_ShakeBit) {
						return true;
					}
				});
				if (f) {
					return dic[f];
				}
				return "";

			}

		},
		methods: {
			getDeviceDetail() {
				api.getDetail(this.device.id).then(res => {

					if (res && res.code == 200) {
						let data = res.data;
						let keys = Object.keys(data);
						let dKeys=Object.keys(this.device);
						for (let i = 0; i < keys.length; i++) {
							let key = keys[i];
							
							let dk=dKeys.find(k=>{
								return key.toLowerCase()==k.toLowerCase();
							});
							if(dk){
							this.$set(this.device,dk,data[key]);
							}else{
								this.$set(this.device,key,data[key]);
							}
						}
					}
				});
			},
			bleStatuToggle() {
				let f = this.getDevice();
				if (!f) {
					this.showBleUnConnect();
					return;
				}
				if (this.formData.bleStatu === true) {
					this.formData.bleStatu = 'dicconnect';
					ble.disconnectDevice(f.deviceId).finally(r => {
						this.formData.bleStatu = false;
					});
					return;
				}

				if (this.formData.bleStatu === false || this.formData.bleStatu === 'err') {
					this.formData.bleStatu = 'connecting';
					ble.LinkBlue(f.deviceId, f.writeServiceId, f.wirteCharactId, f.notifyCharactId).then(res => {

					}).catch(ex => {
						these.formData.bleStatu = 'err';
						MsgError("连接错误:" + ex.msg, "确定", these);
					});
					return;
				}


			},
			initWatch() {
				this.$watch("formData.sta_PowerPercent", (newVal, oldVal) => {
					console.log("电量发生变化");
					if (newVal <= 20 && (this.formData.sta_system === 2 || this.formData.sta_system === 0)) {
						MsgError("设备电量低于20%,请充电", '', these);
					}
				});
				this.$watch("device.deviceImei", (newVal, oldVal) => {

					if (newVal) {
						these.initMQ();
					}
				});

				this.$watch("formData.sta_longitude", (newVal, oldVal) => {
					if (newVal) {
						this.reGeo();
					}

				});

				this.$watch("formData.sta_latitude", (newVal, oldVal) => {
					if (newVal) {
						this.reGeo();
					}
				});

			},
			reGeo() {
				console.log("经纬度发生变化,执行逆地理")
				let task = () => {
					if (this.formData.sta_longitude && this.formData.sta_latitude) {
						let promise = lnglatConvert.wgs84_to_gcj02(this.formData.sta_longitude, this.formData
							.sta_latitude);
						promise.then(lnglat => {

							this.device.longitude = lnglat[0];
							this.device.latitude = lnglat[1];

							Common.regeo(lnglat[0], lnglat[1]).then(res => {
								this.formData.address = res.regeocode.formatted_address
							}).catch(ex => {
								console.error("逆地理失败了")
							})
						}).catch(err => {
							console.error("坐标转换失败了");
						});
					} else {
						console.error("经纬度缺失");
					}

				}

				clearTimeout(reGeoTime);
				reGeoTime = setTimeout(task, 500);
			},
			gotoPage(page) {
				uni.navigateTo({
					url: '/pages/common/sosSet/' + page,
					success(res) {
						res.eventChannel.emit('device', these.device);
					},
					events:{
						linkManOver:(data)=>{
							this.device.contact1Phone=data[0];
							this.device.contact2Phone=data[1];
						},
						MsgOver:(data)=>{
							this.device.sosSmsMsg=data;
						}
					}
				});
			},
			showUnWarning() {
				MsgError("设备正在报警中", "", these);
			},
			sendCallback(json) {
				let keys = Object.keys(json);
				for (let i = 0; i < keys.length; i++) {
					let key = keys[i].replace('ins_', 'sta_');
					console.log("key=", key);
					this.formData[key] = json[keys[i]];
					console.log("this.formData[key] =", this.formData[key]);
				}
			},
			bleSend(json, validWarn = true) {
				return new Promise((resolve, reject) => {
					if (this.formData.sta_ShakeBit != '' && this.formData.sta_ShakeBit != '0' && validWarn) {
						reject({
							code: -1
						});
						this.showUnWarning();
						return;
					}
					let f = this.getDevice();
					if (!f) {
						reject({
							code: -1
						});

						this.showBleUnConnect();

						return;
					}

					let str = "";
					if (json instanceof Object) {
						str = JSON.stringify(json);
					} else {
						str = json;
					}

					ble.sendString(f.deviceId, str).then(() => {
						console.log("发送数据成功,", json);
						this.sendCallback(json);
						resolve();
					}).catch((ex) => {
						reject(ex);
					});

				});
			},
			mqSend(json, validWarn = true) {
				return new Promise((resolve, reject) => {
					if (this.formData.sta_ShakeBit != '' && this.formData.sta_ShakeBit != '0' && validWarn) {
						reject({
							code: -1
						});
						this.showUnWarning();
						return;
					}
					if (!mq) {
						reject({
							code: -2,
							msg: '消息队列未初始化'
						});

						return;
					}
					let str = "";
					if (json instanceof Object) {
						str = JSON.stringify(json);
					} else {
						str = json;
					}
					let flag = mq.publish("B/" + this.device.deviceImei, str);
					if (flag) {
						console.log("mq发送成功，", str)
						this.sendCallback(json);
						resolve(true);
						return;
					}

					reject({
						code: 500,
						msg: '网络连接失败'
					});

				});
			},
			initMQ() {


				return new Promise((resolve, reject) => {
					if (mq) {

						resolve();
						return;
					}

					console.log("正在初始化MQtt")
					mq = new MqttClient();
					mq.connect(() => {
						console.log("MQTT连接成功，开始订阅消息")
						// 订阅来自设备的状态更新
						const statusTopic = `A/${this.device.deviceImei}`;
						mq.subscribe(statusTopic, (payload, receive) => {
							console.log("mq收到消息", payload)
							let json = JSON.parse(payload);
							this.receivData(json);
						});
						resolve();
					});
				});

			},
			gotoMap() {
				if (!this.formData.sta_longitude || !this.formData.sta_latitude) {
					MsgError("获取设备位置异常", '', these);
					return;
				}
				let promise = lnglatConvert.wgs84_to_gcj02(this.formData.sta_longitude, this.formData.sta_latitude);
				promise.then(lnglat => {

					this.detailData.longitude = lnglat[0];
					this.detailData.latitude = lnglat[1];
					uni.navigateTo({
						url: '/pages/common/map/index',
						events: {
							ack: function(data) {}
						},
						success: (res) => {
							res.eventChannel.emit('Map', {
								data: this.detailData
							});
						}
					})
				});

			},
			LighSetting(item, index) {
				let val = item.key;
				if (item.key === this.formData.sta_Side_Light) {
					val = 0;

				}


				let json = {
					ins_Side_Light: val
				}
				this.bleSend(json, true).then(() => {}).catch(ex => {
					if (ex.code == -1) {
						return;
					}
					console.log("蓝牙发送失败，尝试用mq发送");
					this.mqSend(json, true).catch(err => {
						if (err.code == -1) {
							return;
						}
						console.error("mq发送失败", err);
						MsgError(err.msg, '', these);
					})
				})
			},


			sosToggle(type) {


				if (this.formData.sta_ShakeBit != 1 && this.formData.sta_ShakeBit != 0) {
					MsgError("设备正在报警中", '', these);
					return;
				}
				if (this.formData.sta_ShakeBit == type) {
					return;
				}
				let msg = type == 1 ? "确定开启强制报警" : '确定解除强制报警';

				showPop({

					message: msg,
					iconUrl: "/static/images/common/sgActive.png",
					borderColor: "#e034344d",
					buttonBgColor: "#E03434",
					buttonText: '确定',
					buttonTextColor: '#232323de',
					showCancel: true,
					buttonCancelText: "取消",
					cancelCallback: () => {

						MsgClear(these);
					},
					okCallback: () => {
						let json = {
							ins_ShakeBit: type
						};

						this.bleSend(json, false).catch(ex => {
							if (ex.code == -1) {
								return;
							}

							this.mqSend(json, false).catch(err => {
								if (err.code == -1) {
									return;
								}
								MsgError(err.msg, '', these);
							})
						});

					}

				}, these, false);


			},
			deviceRecovry(res) {
				console.log("蓝牙连接成功", these.formData);
				console.log("蓝牙连接成功", res);
				if (res.deviceId == these.formData.deviceId) {
					this.formData.bleStatu = true;
					setTimeout(() => {
						hideLoading(these, 1000);
					});
					uni.showToast({
						icon: 'success',
						title: '蓝牙连接成功'
					});
				}

			},
			deviceDispose(res) {
				if (res.deviceId == these.formData.deviceId) {
					if (res.device) {
						these.formData.bleStatu = 'connecting';
					} else {
						this.formData.bleStatu = false;
					}
					setTimeout(() => {
						hideLoading(these, 1000);
					});
					uni.showToast({
						icon: 'fail',
						title: '蓝牙连接已断开'
					});
				}

			},
			bleStateBreak() {
				if (this.Status.pageHide) {
					return;
				}
				//蓝牙适配器不可用
				this.formData.bleStatu = false;
				uni.showToast({
					icon: 'fail',
					title: '蓝牙已不可用'
				})
				hideLoading(this);
			},
			bleStateRecovry() {
				console.log("蓝牙可用");
				if (this.Status.pageHide) {
					return;
				}
				console.log("蓝牙可用");
				//蓝牙适配器再次可用,尝试恢复连接
				showLoading(this, {
					text: "蓝牙恢复可用,正在连接设备"
				});
				ble.LinkBlue(these.formData.deviceId).then(() => {

					updateLoading(these, {
						text: '连接成功'
					});
				}).catch(ex => {
					updateLoading(these, {
						text: ex.msg
					});
					these.formData.bleStatu = 'err';
				}).finally(() => {
					setTimeout(() => {
						hideLoading(these);
					}, 1000);

				});
			},
			previewImg(img) {
				if (!img) {
					return;
				}

				uni.previewImage({
					urls: [img]
				})
			},

			bleValueNotify(receive, device, path, recArr) { //订阅消息
				if (receive.deviceId !== this.formData.deviceId) {
					return;
				}
				if (this.Status.pageHide) {
					return;
				}

				let json = recei.ReceiveData(receive, device, pagePath, recArr);

				console.log("json=", json)

				let msg = [];
				if (json.sta_PowerPercent <= 20 && (json.sta_system != 1 || json.sta_system != 3)) {
					msg.push("设备电量低");
				}

				let keys = Object.keys(json);

				keys.forEach(key => {
					if (key in this.formData) {
						this.formData[key] = json[key];
					}
				});

				if (msg.length > 0) {
					MsgError(msg.join(','), '', these);
				}

				these.setBleFormData();

			},
			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;
				});
				if (f) {
					this.formData.deviceId = f.deviceId;
				}
				return f;
			},


			setBleFormData() {
				ble.data.LinkedList.find((v) => {
					if (v.deviceId == these.formData.deviceId) {
						v.formData = these.formData;

						return true;
					}
					return false;
				});

				uni.setStorageSync(ble.StorageKey, ble.data.LinkedList);
			},
			showBleUnConnect() {
				MsgError("蓝牙未连接过该设备,请使用蓝牙重新添加该设备", "", these, () => {
					uni.navigateTo({
						url: "/pages/common/addBLE/addEquip",
						events: {
							// BindOver: function(data) {
							// 	console.log(data)
							// 	these.formData.bleStatu = true;
							// }
						},
						success: function(res) {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('detailData', {
								data: these.device
							})
						}
					})
				});

			}
		}
	}
</script>

<style>
	.eqinfo .valueFont {
		font-family: 'PingFang SC';
		font-size: 28rpx !important;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.6);
	}

	.eqinfo .valueItem {
		height: auto;
		line-height: 40rpx;
		color: rgba(255, 255, 255, 0.6);
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 0.07px;
	}

	.eqinfo .multiValue {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: flex-end;
		align-items: flex-end;
		justify-content: flex-start;
		width: calc(100% - 140rpx)
	}

	.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: auto;
		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;
	}

	.lamp.noPadding .title,
	.lamp.noPadding .smlltitle {
		padding: 0rpx 0rpx !important;
	}

	.lamp .smlltitle {
		width: 100%;

		line-height: 15rpx;
		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: 26rpx;
		color: rgba(255, 255, 255, 0.6);


	}


	.lamp .title .img {
		width: 32rpx;
		height: 32rpx;
		margin-top: 20rpx;
	}

	.lampMode {

		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;
		border-width: 1px;
		border-style: solid;
		border-color: #00000000;
	}

	.lampMode .mode.active {

		border-color: #aed600 !important;
	}

	.lampMode .mode.active .bigTxt {

		color: #aed600 !important;
	}

	.mode.marginLeft {
		margin-left: 34rpx !important;
	}

	.mode .leftImg {
		width: 70rpx;
		height: 70rpx;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.06);
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
	}

	.mode.active .leftImg {
		background: rgba(255, 255, 255, 0.06);
	}

	.mode .leftImg .img {
		width: 40rpx;
		height: 40rpx;
	}

	.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: 24rpx;
		font-weight: 400;
		letter-spacing: 0.15rpx;
		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%;

		font-size: 28rpx;
		font-weight: 400;

		letter-spacing: 0.07px;
		text-align: left;

	}

	.usrinfo .value .uni-input-input {
		color: rgba(255, 255, 255, 0.87);
		font-family: PingFang SC;

	}


	.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;
	}



	.slider-container {
		padding: 0px;
	}




	.addIco {
		width: 100%;
		height: 360rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		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;
	}

	.arrowContent {
		border-radius: 16rpx;
		background: rgba(26, 26, 26, 1);
		width: 100%;
		padding: 30rpx 0rpx;
	}

	.modeSetting {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		justify-content: flex-start;

	}

	.modeSetting .arrow {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
		width: calc(100% / 3);
		margin-bottom: 25rpx;
	}

	.modeSetting .arrow .text {

		color: rgba(255, 255, 255, 0.6);
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;

		letter-spacing: 0.14rpx;

	}

	.modeSetting .arrow.active .text {
		color: rgba(35, 35, 35, 0.87);

	}

	.modeSetting .arrow .outCircle {
		width: 130rpx;
		height: 130rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
		border: 4rpx solid #00000000;
		border-radius: 50%;
		background: rgba(42, 42, 42, 1);
	}

	.modeSetting .arrow .item {
		width: 100%;
		height: 100%;

		border-radius: 50%;


		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
	}

	.modeSetting .arrow.active .outCircle {
		border: 4rpx solid rgba(174, 214, 0, 1);
		padding: 4rpx;
	}

	.modeSetting .item.active .p100 {
		background: rgba(174, 214, 0, 1);
		border-radius: 50%;

	}

	.modeSetting .item .img {
		width: 52rpx;
		height: 56rpx;
	}

	.modeSetting .item .img.translate {
		transform: rotate(180deg);
	}

	.modeSetting .arrow .activity {
		display: none;
	}

	.modeSetting .arrow.active .nomal {
		display: none;
	}

	.modeSetting .arrow.active .item {
		background: rgba(174, 214, 0, 1);
	}

	.modeSetting .arrow.active .activity {
		display: block !important;
	}

	.usrinfo .image {
		width: 30rpx;
		height: 40rpx;
	}

	.usrinfo .img {
		width: 30rpx;
		height: 40rpx;
	}

	.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;
	}

	.warnnig {
		border-radius: 16rpx;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		background: rgba(224, 52, 52, 1);
		box-sizing: border-box;
		padding: 0rpx 30rpx;
		margin-top: 20rpx;
		color: rgba(255, 255, 255, 0.87);
		font-family: 'PingFang SC';
		font-size: 28rpx;
		font-weight: 400;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: center;
	}

	.netContent {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: flex-end;
		justify-content: space-around;
		align-items: flex-end;
		width: 50rpx;
	}


	.marginTop10 {
		margin-top: 20rpx;
	}

	.warnnig {
		border-radius: 16rpx;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		background: rgba(224, 52, 52, 1);
		box-sizing: border-box;
		padding: 0rpx 30rpx;
		margin-top: 20rpx;
		color: rgba(255, 255, 255, 0.87);
		font-family: 'PingFang SC';
		font-size: 28rpx;
		font-weight: 400;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: center;
	}

	.sosContent {
		width: 100%;
		height: 110rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding-top: 24rpx;
	}

	.btnSos {
		border-radius: 92rpx;
		height: 100%;
		color: rgba(255, 255, 255, 0.87);
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 110rpx;
		letter-spacing: 0.014rpx;
		text-align: center;

	}

	.openSos {
		width: 62%;
		background: #1a1a1a;
		color: #e03434;
		box-sizing: border-box;
		border: 1rpx solid #e03434;
	}

	.openSos.active {
		background: #e03434 !important;
		color: rgba(255, 255, 255, 0.87) !important;
	}


	.closeSos {
		width: 32%;
		background: #1a1a1a;
	}

	.warn {
		border-radius: 16rpx;
		background: #1a1a1a;
		width: 100%;
		box-sizing: border-box;
		margin-top: 25rpx;
	}

	.warn .header {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 25rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-between;

	}

	.paddingTop0 {
		padding: 0rpx 25rpx !important;
	}

	.line {
		width: calc(100% - 50rpx);
		height: 0rpx;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.06);
		margin: 30rpx 25rpx
	}

	.sliderTxt {
		color: rgba(255, 255, 255, 0.6);

		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;

		letter-spacing: 0.07px;

	}

	.sliderVal {
		color: rgba(174, 214, 0, 1);

		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;

		letter-spacing: 0.07px;

	}
</style>