APP/pages/6107/BJQ6107.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/6155/DeviceDetail/battry.png" mode="aspectFit"></image>
					<view class="txt">
						<view class="bigTxt">{{formData.sta_PowerPercent}}%</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.sta_charge?dic.sta_charge[formData.sta_charge+'']:"未充电" }}
						</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">
				<text class="lbl">蓝牙状态</text>
				<text class="value" :class="formData.bleStatu?'green':'red'">{{formData.bleStatu?'已连接':'未连接'}}</text>
			</view>

		</view>




		<view class="lamp">
			<view class="title">
				<text>灯光模式</text>

			</view>
		</view>

		<view class="lampMode">
			<view class="lightMode fleft " v-for="item,index in dic.sta_LightType" :class="{'active':formData.sta_LedType===item.key,
				'marginLeft':index%2===1,
				'displayNone':!item.show
				}" v-on:click.stop="LighSetting(item,index)">
				<view class="h50">
					<view class="lightType ">
						<view class="imgContent center">
							<image class="img" :src="item.img" mode="aspectFit"></image>
						</view>

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

					</view>
				</view>
				<view class="h50">
					<view class="workMode">
						<view class="item" @click.stop="highSpeedSetting(item,index,true)"
							:class="{'active':formData.sta_highSpeed && formData.sta_LedType===item.key}">
							<view class="checkbox"></view>
							<text>强光</text>
						</view>
						<view class="item " @click.stop="highSpeedSetting(item,index,false)"
							:class="{'active':formData.sta_highSpeed===false && formData.sta_LedType===item.key}">
							<view class="checkbox "></view>
							<text>工作光</text>
						</view>
					</view>


				</view>

			</view>

			<view class="mode fleft marginLeft" :class="{'rbActive':formData.SOS}" v-on:click.stop="sosSetting()">
				<view class="leftImg">
					<image class="img" :src="formData.SOS?'/static/images/670/sgActive.png':'/static/images/670/sg.png'"
						mode="aspectFit">
					</image>
				</view>
				<view class="rightTxt">
					<text class="bigTxt">红蓝警示</text>

				</view>
			</view>

			<view class="clear"></view>
		</view>
		<view class="lamp">
			<view class="title">
				<text>语音播报</text>
			</view>
		</view>

		<view class="lampMode">
			<view class="mode fleft " @click.stop="playVolume()" :class="{'active':formData.isPlay}">
				<view class="leftImg">
					<image class="img" :class="{'displayNone':formData.isPlay}" src="/static/images/common/play.png"
						mode="aspectFit"></image>
					<image class="img" :class="{'displayNone':!formData.isPlay}"
						src="/static/images/common/playingActive.png" mode="aspectFit"></image>
				</view>
				<view class="rightTxt">
					<text class="bigTxt">{{formData.isPlay?'正在播放':'播放语音'}}</text>
				</view>
			</view>

			<view class="mode fleft marginLeft" v-on:click.stop="audioManager()">
				<view class="leftImg">
					<image class="img" src="/static/images/common/uploadCloud.png" mode="aspectFit"></image>

				</view>
				<view class="rightTxt">
					<text class="bigTxt">语音管理</text>

				</view>
			</view>

			<view class="mode fleft " v-on:click.stop="showVolmePop()">
				<view class="leftImg">
					<image class="img" src="/static/images/common/uploadCloud.png" mode="aspectFit"></image>

				</view>
				<view class="rightTxt">
					<text class="bigTxt">音量调节</text>

				</view>
			</view>

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

		<view class="usrinfo lamp">
			<view @click="Status.usrToggle=!Status.usrToggle">
				<text class="usrtitle fleft">人员信息登记</text>
				<view class="image fright" :style="{transform:Status.usrToggle?'rotate(0deg)':'rotate(180deg)' }">

					<image class="img" src="/static/images/6155/DeviceDetail/slideToggle.png" mode="aspectFit"></image>

				</view>
				<view class="clear"></view>
			</view>
			<view :class="Status.usrToggle?'':'displayNone'">
				<view style="margin: 20rpx 0rpx;">

					<view class="btnSend fright" v-on:click.stop="sendUsr(null)">发送</view>
					<view class="clear"></view>
				</view>
				<view class="item">
					<text class="lbl">单位：</text>
					<input class="value" v-model="formData.company" placeholder="请输入单位" placeholder-class="usrplace" />
				</view>
				<view class="item">
					<text class="lbl">姓名：</text>
					<input class="value" v-model="formData.usrname" placeholder="请输入姓名" placeholder-class="usrplace" />
				</view>
				<view class="item">
					<text class="lbl">职位：</text>
					<input class="value" v-model="formData.job" placeholder="请输入职位" placeholder-class="usrplace" />
				</view>
				<view class="item">
					<text class="lbl">ID号：</text>
					<input class="value" v-model="formData.usrid" placeholder="请输入ID" placeholder-class="usrplace" />
				</view>
			</view>
		</view>

		<view  style="padding-bottom: 20rpx;">


			<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>


		</view>
		<!-- 弹窗通知 -->
		<MessagePopup v-for="item,key in Msgboxs" :visible="item.showPop" :type="item.popType" :bgColor="item.bgColor"
			:borderColor="item.borderColor" :textColor="item.textColor" :buttonBgColor="item.buttonBgColor"
			:buttonTextColor="item.buttonTextColor" :iconUrl="item.iconUrl" :message="item.message"
			:buttonText="item.buttonText" @buttonClick="item.okCallback(item)" :visiblePrompt="item.visiblePrompt"
			:promptTitle="item.promptTitle" v-model="item.modelValue" @closePop="closePop(item)"
			:buttonCancelText="item.buttonCancelText" :showCancel="item.showCancel" @cancelPop="closePop(item)" />

		<!-- 下方菜单 -->


		<global-loading ref="loading" />

		<view class="mask" v-show="Status.showVolumPop" @click.stop="Status.showVolumPop=false"></view>
		<view class="volPop" v-show="Status.showVolumPop" @click.stop="Status.showVolumPop=false">

			<view class="volContent" @click.stop="">

				<view class="header">
					<uni-icons @click.stop="Status.showVolumPop=false" type="closeempty" size="15"
						color="#FFFFFFde"></uni-icons>
				</view>
				<view class="txtContent">
					<view class="volTxt">
						音量
					</view>
					<view class="volMath">
						{{formData.volumn}}%
					</view>
				</view>
				<view class="slider-container">

					<slider min="0" max="100" step="1" :disabled="false" :value="formData.volumn" activeColor="#bbe600"
						backgroundColor="#686767" block-size="20" block-color="#ffffffde" @change="volumechange"
						@changing="volumechange" class="custom-slider" />


				</view>


			</view>
		</view>

	</view>
</template>

<script>
	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 request, {
		baseURL
	} from '@/utils/request.js'

	import Common from '@/utils/Common.js'
	const pagePath = "/pages/018A/HBY018A";

	var ble = null;
	var these = null;
	var recei = null;

	var instrusionTime = null;
	var volumnTimer = null;


	export default {
		data() {
			return {
				Status: {
					curr: 0,
					total: 0,
					pageHide: false,
					usrToggle: false,
					showVolumPop: false
				},
				formData: {
					img: '/static/images/common/BJQ6107.png',
					sta_PowerPercent: '',
					xuhang: '',
					blename: '',
					deviceId: '',
					deviceName: '',
					RSSI: '',
					bleStatu: false,
					SOS: false, //是否正在报警
					sta_LedType: 'fan', //灯光状态
					sta_highSpeed: true, //是否是强光
					isPlay: false, //是否正在播放
					volumn: 0,
					company: '',
					usrname: '',
					job: '',
					usrid: ''
				},
				dic: {
					sta_LightType: [

						{
							key: 'ju',
							name: '聚光',
							show: true,
							img: '/static/images/6107/ju.png',
							activeImg: '/static/images/100/lightActive.png',
							group: 'sta_LedType'
						},
						{
							key: 'fan',
							name: '泛光',
							show: true,
							img: '/static/images/6107/fan.png',
							activeImg: '/static/images/102/lowFlashActive.png',
							group: 'sta_LedType'
						},
						{
							key: 'jufan',
							name: '聚光/泛光',
							show: true,
							img: '/static/images/6107/fanJu.png',
							activeImg: '/static/images/102/litingActive.png',
							group: 'sta_LedType'
						}

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

				},
				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/650/HBY650",
					showConfirm: false
				},
				Msgboxs: []
			}
		},

		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);


			let eventChannel = this.getOpenerEventChannel();

			eventChannel.on('detailData', function(data) {

				// console.log("收到父页面的参数：" + JSON.stringify(data));
				var 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.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;
				});

				these.setBleFormData();



			});

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


		},
		methods: {
			sendUsr() {
				this.showMsg("敬请期待", "warn");
			},
			showVolmePop() {
				this.Status.showVolumPop = true;
			},
			volumechange(e) {
				let f = this.getDevice();
				// #ifdef  APP-PLUS
				if (!f) {
					this.showBleUnConnect();
					return;
				}
				// #endif
				// #ifdef  H5
				f = {
					deviceId: '12345'
				}
				// #endif
				this.formData.volumn = e.detail.value;

				// 清除之前的定时器
				if (volumnTimer) {
					clearTimeout(volumnTimer);
				}

				// 设置新的定时器，控制发送频率
				volumnTimer = setTimeout(() => {

					// let json = {
					// 	ins_volumn: [e.detail.value]
					// }

					// ble.sendString(f.deviceId, json, f.writeServiceId, f.wirteCharactId, 30).then(res => {
					these.setBleFormData();
					// }).catch(ex => {
					// 	uni.showModal({
					// 		title: '错误',
					// 		content: ex.msg
					// 	})
					// });



				}, 100);
			},
			audioManager() {

				uni.navigateTo({
					url: '/pages/common/audioManager/AudioList',
					events: {
						audioApply: function(id) {
							//应用某个语音时，将数据发送给设备
							console.log("准备发送数据", id);
							showLoading(these, {
								text: '准备发送数据'
							});

							these.audioData.hexs = uni.getStorageSync(Common.pcmStorageKey + "_" + id);
							console.log("hexs.length=", these.audioData.hexs.length)
							these.HoldYouHand();
						}
					},
					success(res) {
						let channel = res.eventChannel;
						let f = these.getDevice();
						channel.emit("deviceData", {
							ble: f,
							device: these.device
						});
					}
				});
			},
			playVolume() {


				let f = this.getDevice();

				// #ifdef  APP-PLUS											
				if (!f) {
					this.showBleUnConnect();
					return;
				}
				// #endif
				// #ifdef  H5
				f = {
					deviceId: '12345'
				}
				// #endif

				let msg = "";
				let buttonText = "";
				if (!this.formData.isPlay) {
					msg = "确定播放设备语音内容?";

				}

				let exec = (item) => {

					this.formData.isPlay = !this.formData.isPlay;

					this.closePop(item);
				}
				if (msg) {
					this.showPop({
						key: Common.guid(),
						message: msg,
						iconUrl: "/static/images/common/playingActive.png",
						borderColor: "#BBE6004d",
						buttonBgColor: "#BBE600",
						okCallback: exec,
						buttonText: '确定',
						buttonCancelText: '取消',
						showCancel: true
					});
				} else {
					exec();
				}
			},
			highSpeedSetting(item, index, flag) { //工作光、强光切换
				if (this.formData.sta_LedType !== item.key) {
					// this.formData.sta_highSpeed=true;
					this.LighSetting(item, index);
					return;
				}
				let f = this.getDevice();

				// #ifdef  APP-PLUS											
				if (!f) {
					this.showBleUnConnect();
					return;
				}
				// #endif
				// #ifdef  H5
				f = {
					deviceId: '12345'
				}
				// #endif
				this.formData.sta_highSpeed = flag;
			},
			LighSetting(item, index) { //灯光模式切换
				
				let val = item.key;
				if (item.key === this.formData.sta_LedType) {
					val = 'led_off';

				}

				let f = this.getDevice();

				// #ifdef  APP-PLUS											
				if (!f) {
					this.showBleUnConnect();
					return;
				}
				// #endif
				// #ifdef  H5
				f = {
					deviceId: '12345'
				}
				// #endif
				this.formData.sta_LedType = val;
				let json = {
					ins_LedType: val
				}
				json = JSON.stringify(json);
				ble.sendString(f.deviceId, json, f.writeServiceId, f.wirteCharactId, 30).then(res => {

					these.setBleFormData();

				}).catch(ex => {
					this.showMsg(ex.msg);
				});
			},


			sosSetting() {



				let f = this.getDevice();

				// #ifdef  APP-PLUS											
				if (!f) {
					this.showBleUnConnect();
					return;
				}
				// #endif
				// #ifdef  H5
				f = {
					deviceId: '12345'
				}
				// #endif





				let val = !this.formData.SOS;
				let msg = "";
				let buttonText = "";
				if (val) {
					msg = "确定开启声光报警模式?";

				} else {
					msg = "确定关闭声光报警模式?";

				}
				let key = Common.guid();
				let sosToggle = (item) => {
					//蓝牙/4g发送的指令

					this.formData.SOS = val;

					this.closePop(item);
					// setTimeout(()=>{
					// 	this.showMsg("操作成功",'succ');
					// },500)
				}

				this.showPop({
					key: key,
					message: msg,
					iconUrl: "/static/images/6155/DeviceDetail/uploadErr.png",
					borderColor: "#e034344d",
					buttonBgColor: "#E03434",
					okCallback: sosToggle,
					buttonText: '确定',
					buttonCancelText: '取消',
					showCancel: true
				});

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

			},
			deviceDispose(res) {
				if (this.Status.pageHide) {
					return;
				}
				if (res.deviceId == these.formData.deviceId) {
					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(() => {
					these.formData.bleStatu = true;
					updateLoading(these, {
						text: '连接成功'
					});
				}).catch(ex => {
					updateLoading(these, {
						text: ex.msg
					})
				}).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 active = -1;
				let f = this.Status.BottomMenu.menuItems.find((item, index) => {

					if (item.value === json.sta_RadarType) {
						active = index;
					}
				});


				let msg = [];
				if (json.sta_PowerPercent <= 20 && (json.sta_charge === 0 || json.sta_charge === '0')) {
					msg.push("设备电量低");
				}




				let keys = Object.keys(json);

				keys.forEach(key => {
					if (key in this.formData) {
						// console.log("key=",key+",value=",json[key]);
						this.formData[key] = json[key];
					}
				});



				if (msg.length > 0) {
					this.showMsg(msg.join(','));
				}
				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;
				});

				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() {

				this.showPop({
					key: Common.guid(),
					message: "蓝牙未连接过该设备,请使用蓝牙重新添加该设备",
					iconUrl: "/static/images/6155/DeviceDetail/uploadErr.png",
					borderColor: "#e034344d",
					buttonBgColor: "#E03434",
					buttonText: '去连接',
					buttonTextColor: '#232323de',
					okCallback: function() {

						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
								})
							},
							fail(ex) {
								console.log("跳转失败", ex);
							}
						})
					}
				});
			},

			proParam: function() {

				uni.navigateTo({
					url: '/pages/common/productDes/index?id=' + this.device.id,
					success(ev) {

					}
				});
			},
			handRemark: function() {
				uni.navigateTo({
					url: '/pages/common/operatingInstruct/index?id=' + this.device.id,
					success(ev) {

					}
				});
			},
			handVideo: function() {
				uni.navigateTo({
					url: '/pages/common/operationVideo/index?id=' + this.device.id,
					success(ev) {

					}
				});
			},


			//关闭某个弹窗，并执行关闭的回调函数
			closePop: function(item) {

				if (item) {
					this.Msgboxs.find((v, i) => {
						if (item.key === v.key) {
							this.Msgboxs.splice(i, 1);
						}
					});

					if (item.cancelCallback) {
						item.cancelCallback();
					}
				} else {
					if (this.Msgboxs.length > 0) {
						this.Msgboxs.splice(this.Msgboxs.length - 1, 1);
					}

				}

			},
			//根据传入的配置，自定义一个弹窗
			showPop: function(option) {
				let def = {
					key: '',
					showPop: true, //是否显示弹窗
					popType: 'custom',
					bgColor: '#383934bd',
					borderColor: '#BBE600',
					textColor: '#ffffffde',
					buttonBgColor: '#BBE600',
					buttonTextColor: '#232323DE',
					iconUrl: '',
					message: '',
					buttonText: '确定',
					clickEvt: '',
					visiblePrompt: false,
					promptTitle: '',
					modelValue: '',
					visibleClose: false,
					okCallback: null,
					showSlot: false,
					buttonCancelText: '',
					showCancel: false,
					cancelCallback: null
				}
				let json = {};
				let keys = Object.keys(def);

				for (let i = 0; i < keys.length; i++) {
					let key = keys[i];

					json[key] = def[key];
				}
				if (option) {
					keys = Object.keys(option);
					for (let i = 0; i < keys.length; i++) {
						let key = keys[i];

						json[key] = option[key];
					}
				}

				if (!json.borderColor) {
					json.borderColor = '#BBE600';
					json.buttonBgColor = '#BBE600';
				}
				json.showPop = true;
				if (!('key' in json)) {
					json.key = Common.guid();
				}
				this.Msgboxs.push(json);
			},
			showMsg(msg, type) {

				let cfg = {
					error: {
						icoUrl: '/static/images/6155/DeviceDetail/uploadErr.png',
						borderColor: "#e034344d",
						buttonBgColor: "#E03434"
					},
					succ: {
						icoUrl: '/static/images/common/success.png',
						borderColor: "#BBE600",
						buttonBgColor: "#BBE600"
					},
					warn: {
						icoUrl: '/static/images/common/warning.png',
						borderColor: "#FFC84E",
						buttonBgColor: "#FFC84E",
					}
				}

				if (!type) {
					type = 'error';
				}
				if (!cfg[type]) {
					type = 'error';
				}


				let guid = Common.guid();
				let options = {
					key: guid,
					message: msg,
					iconUrl: cfg[type].icoUrl,
					borderColor: cfg[type].borderColor,
					buttonBgColor: cfg[type].buttonBgColor,
					buttonText: '确定',
					okCallback: this.closePop
				};
				this.showPop(options);
			}
		}
	}
</script>

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

	.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,
	.lampMode .lightMode {
		width: calc(calc(100% - 34rpx) / 2);
		height: 160rpx;
		border-radius: 8px;
		margin-top: 20rpx;
		background: rgba(26, 26, 26, 1);
		display: flex;
		padding: 20rpx;
		box-sizing: border-box;
		border-width: 1px;
		border-style: solid;
		border-color: #00000000;
	}

	.lampMode .mode {

		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: flex-start;

	}

	.lampMode .lightMode {
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: flex-start;
	}

	.lampMode .mode.active,
	.lampMode .lightMode.active {

		border-color: #aed600 !important;
	}

	.lampMode .mode.active .bigTxt {

		color: #aed600 !important;
	}


	.lampMode .mode.rbActive {

		border-color: #E03434 !important;
	}

	.lampMode .mode.rbActive .bigTxt {

		color: #E03434 !important;
	}


	.lampMode .lightMode .h50 {
		height: 50%;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: flex-start;
	}

	.lampMode .lightMode .lightType {

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: flex-start;
	}

	.lampMode .lightMode .lightType .imgContent {
		width: 24rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.lampMode .lightMode .lightType .imgContent .img {
		width: 100%;
		height: 100%;

	}

	.lampMode .lightMode .workMode {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-around;
	}

	.lampMode .lightMode .workMode .item .checkbox {
		width: 24rpx;
		height: 24rpx;
		box-sizing: border-box;
		border: 1rpx solid #FFFFFF;
		border-radius: 50%;
		margin-right: 10rpx;
	}


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

	.lampMode .lightMode .workMode .item {
		width: 50%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: flex-start;
		align-items: center;


		height: 100%;
		font-family: 'PingFang SC';

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

		letter-spacing: 0.14rpx;

	}

	.lampMode .lightMode .workMode .item.active {
		color: #aed600;
		font-size: 26rpx;
	}

	.lampMode .lightMode .workMode .item.active .checkbox {
		background-color: #aed600;
		border-color: #aed600;
	}

	.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,
	.lightMode {
		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;
	}

	.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-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: #aed600;

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

		letter-spacing: 0.07px;

	}


	.mask {
		position: fixed;
		z-index: 9997;
		width: 100%;
		height: 100%;
		top: 0rpx;
		left: 0rpx;
		background-color: #00000000;
	}

	.volPop {
		position: fixed;
		z-index: 9998;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0rpx;
		left: 0rpx;

		width: 100%;
		height: 100%;
	}

	.volPop .volContent {
		position: relative;
		width: 70%;
		/* min-height: 300rpx; */
		height: auto;
		border-radius: 24rpx;
		padding: 20rpx;
		box-shadow: 0 4px 32rpx rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		z-index: 10;
		margin-top: -100rpx;
		backdrop-filter: blur(28rpx);
		background: #38393466;
	}

	.volPop .header {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: flex-end;

	}

	.volPop .txtContent {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-between;
	}

	.volTxt,
	.volMath {
		font-family: 'PingFang SC';
		font-style: Regular;
		font-size: 26rpx;
		font-weight: 400;

		letter-spacing: 0.14px;
	}

	.txtContent {
		width: 100%;
		padding: 20rpx 20rpx 0rpx 20rpx;
		margin-bottom: 15rpx;
	}

	.volTxt {
		color: rgba(255, 255, 255, 0.87);
	}

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


</style>