congming_huose-apk/pages/device/mcygedit.vue

<template>
	<view class="device-detail">
		<app-top-push-notice />
		<!-- 自定义导航栏 -->
		<view class="tabback">
            <view class="rtjt" @click="btnback">←</view>
            <view class="name">{{ $i18n.t('setuptitle') }}</view>
			<view style="width: 36rpx;"></view>
		</view>
		<view class="" style="width: 100%;height: 204rpx"></view>
		<view class="onebox">
			<view class="devicename" @tap="onDeviceNameRowTap">
				<view class="xi">
					{{ $i18n.t('deviceName') }}
				</view>
				<view class="cu">
					{{ deviceNameDisplayText }}
				</view>
			</view>
			<view class="room" @tap="onDeviceRoomRowTap">
				<view class="lt">
					<view class="xi">
						{{ $i18n.t('room') }}
					</view>
					<view class="">
						{{ deviceRoomDisplayName }}
					</view>
				</view>
				<view class="rt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uySh70FcAiX0ip7K2fPO" mode=""></image>
				</view>
			</view>
		</view>
		<view class="mcname">
			{{ $i18n.t('magneticContactSettings') }}
		</view>
		<view class="mckaiguan">
			<view class="lt">
				{{ $i18n.t('magneticContactStatusLeft') }}
			</view>
			<view class="rt">
				<switch :checked="statusLeftEnabled" color="#000000" @change="onStatusLeftChange" />
			</view>
		</view>
		<view class="mckaiguan" style="margin-top: 0;border-top: 1px solid #D8D8D8;">
			<view class="lt">
				{{ $i18n.t('magneticContactStatusRight') }}
			</view>
			<view class="rt">
				<switch :checked="statusRightEnabled" color="#000000" @change="onStatusRightChange" />
			</view>
		</view>
		<view class="door-setting-card">
			<view class="door-setting-card-title">{{ $i18n.t('magneticFieldRangeTitle') }}</view>
			<view class="door-mag-range-row">
				<view class="door-mag-item">
					<text class="door-mag-label">{{ $i18n.t('magneticFieldMin') }}</text>
					<input
						class="door-mag-input"
						type="digit"
						:value="magneticMin"
						:placeholder="$i18n.t('inputPlaceholderPleaseEnter')"
						placeholder-style="color:#BFBFBF"
						confirm-type="done"
						@input="onMagneticMinInput"
						@confirm="commitMagneticMin"
						@blur="commitMagneticMin"
					/>
				</view>
				<text class="door-mag-sep">~</text>
				<view class="door-mag-item">
					<text class="door-mag-label">{{ $i18n.t('magneticFieldMax') }}</text>
					<input
						class="door-mag-input"
						type="digit"
						:value="magneticMax"
						:placeholder="$i18n.t('inputPlaceholderPleaseEnter')"
						placeholder-style="color:#BFBFBF"
						confirm-type="done"
						@input="onMagneticMaxInput"
						@confirm="commitMagneticMax"
						@blur="commitMagneticMax"
					/>
				</view>
			</view>
		</view>
		<view class="door-angle-section">
			<view class="mckaiguan door-angle-section-hd">
				<view class="lt">
					{{ $i18n.t('doorOpenAngleAnomalyAlert') }}
				</view>
				<view class="rt">
					<switch :checked="angleEnabled" color="#000000" @change="onAngleEnabledChange" />
				</view>
			</view>
			<view v-if="angleEnabled" class="door-angle-section-body">
				<view class="door-setting-card door-setting-card--nested">
					<view class="door-threshold-row">
						<view class="door-threshold-lt">
							<view class="door-setting-card-title" style="margin-bottom:0;">{{ $i18n.t('angleSwingThresholdDeg') }}</view>
							<view class="door-threshold-input-wrap">
								<input
									class="door-threshold-input"
									type="digit"
									:value="angleThreshold"
									:placeholder="$i18n.t('inputPlaceholderPleaseEnter')"
									placeholder-style="color:#BFBFBF"
									confirm-type="done"
									@input="onAngleThresholdInput"
									@confirm="commitAngleThreshold"
									@blur="commitAngleThreshold"
								/>
								<text class="door-deg-suffix">{{ $i18n.t('degreesUnit') }}</text>
							</view>
						</view>
					</view>
					<view class="door-threshold-hint">{{ $i18n.t('angleThresholdDoorHint') }}</view>
				</view>
				<view
					class="door-init-angle-btn door-init-angle-btn--in-body"
					:class="{ 'door-init-angle-btn--loading': initAngleRequesting }"
					@tap="onSetDoorInitAngle"
				>
					{{ $i18n.t('doorSetClosedAngleBaseline') }}
				</view>
			</view>
		</view>
		<!-- 11111111111111111111111111111 --> 
		<!-- <view class="moshi">
			<view class="lt">
				<view class="xi">
					{{ $i18n.t('positionCalibration') }}
				</view>
				<view class="cu">
					{{ $i18n.t('instantAlarm') }}
				</view>
			</view>
			<view class="rt">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uySh70FcAiX0ip7K2fPO" mode=""></image>
			</view>
		</view>
		<view class="tongzhi" style="margin-top: 32rpx;">
			<view class="lt">
				{{ $i18n.t('protectionMode') }}
			</view>
			<switch checked="true" color="#000000"/>
		</view>
		<view class="tongzhi">
			<view class="lt">
				{{ $i18n.t('notificationMode') }}
			</view>
			<switch checked="true" color="#000000"/>
		</view>
		<view class="tongzhi" style="border: 0;">
			<view class="lt">
				{{ $i18n.t('forceShutdown') }}
			</view>
			<switch checked="true" color="#000000"/>
		</view>
		
		<view class="yanchi">
			<view class="top">
				<view class="lt">
					{{ $i18n.t('delayPeriod') }}
				</view>
				<switch :checked="fwqflag" color="#000000"/>
			</view>
			<view class="bot" v-if="fwqflag">
				<view class="lt">
					<view class="">
						{{ $i18n.t('serverConnectionFailAlarmDelay') }}
					</view>
					<view class="" style="margin-top: 12rpx;">
						300{{ $i18n.t('seconds') }}
					</view>
				</view>
				<view class="rt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uBGHYzuIqjyZXGHiTT8q" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="dlyanchi">
			<view class="lt">
				<view class="">
					{{ $i18n.t('loginDelayMode') }}
				</view>
				<view class="" style="margin-top: 12rpx;">
					300{{ $i18n.t('seconds') }}
				</view>
			</view>
			<view class="rt">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uBGHYzuIqjyZXGHiTT8q" mode=""></image>
			</view>
		</view>
		
		<view class="dlyanchi">
			<view class="lt">
				<view class="">
					{{ $i18n.t('closeAlarmDelayMode') }}
				</view>
				<view class="" style="margin-top: 12rpx;">
					300{{ $i18n.t('seconds') }}
				</view>
			</view>
			<view class="rt">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uBGHYzuIqjyZXGHiTT8q" mode=""></image>
			</view>
		</view>
		
		<view class="accel-card">
			<view class="accel-title">{{ $i18n.t('accelerometer3AxisVibration') }}</view>
			<view class="accel-slider-wrap">
				<view class="accel-cap left" @click="decAccel">－</view>
				<view class="accel-track">
					<view class="accel-indicator" :style="{ left: `${accelValue}%` }">{{accelValue}}</view>
					<slider class="accel-slider" min="0" max="100" step="1" :value="accelValue" activeColor="#3D3D3D" backgroundColor="#D8D8D8" block-size="36" @changing="accelChanging" @change="accelChange"/>
				</view>
				<view class="accel-cap right" @click="incAccel">＋</view>
				<view class="accel-scale l">0</view>
				<view class="accel-scale r">100</view>
			</view>
			<view class="accel-desc">{{ $i18n.t('accelerometerVibrationDesc') }}</view>
		</view>
		
		<view class="accel-card">
			<view class="accel-title">{{ $i18n.t('accelerometer3AxisAngle') }}</view>
			<view class="accel-slider-wrap">
				<view class="accel-cap left" @click="decAccels">－</view>
				<view class="accel-track">
					<view class="accel-indicator" :style="{ left: `${accelValues}%` }">{{accelValues}}</view>
					<slider class="accel-slider" min="0" max="100" step="1" :value="accelValues" activeColor="#3D3D3D" backgroundColor="#D8D8D8" block-size="36" @changing="accelChangings" @change="accelChanges"/>
				</view>
				<view class="accel-cap right" @click="incAccels">＋</view>
				<view class="accel-scale l">0</view>
				<view class="accel-scale r">100</view>
			</view>
			<view class="accel-desc">{{ $i18n.t('accelerometerAngleDesc') }}</view>
		</view>
		
		<view class="onebox" style="height: 160rpx;">
			<view class="devicename" style="border: 0;">
				<view class="xi">
					{{ $i18n.t('ncInterface') }}
				</view>
				<view class="cu" style="color: #B9B9B9;">
					{{ $i18n.t('deviceName') }}
				</view>
			</view>
		</view>
		
		<view class="tongzhi" style="margin-top: 32rpx;">
			<view class="lt">
				{{ $i18n.t('ledDisplay') }}
			</view>
			<switch checked="true" color="#000000"/>
		</view>
		<view class="tongzhi">
			<view class="lt">
				{{ $i18n.t('autoInstallSoftware') }}
			</view>
			<switch checked="true" color="#000000"/>
		</view>
		<view class="tongzhi">
			<view class="lt">
				{{ $i18n.t('loraTransmitPower') }}
			</view>
			<switch checked="true" color="#000000"/>
		</view>
		<view class="tongzhi" style="border: 0;">
			<view class="lt">
				{{ $i18n.t('bleTransmitPower') }}
			</view>
			<switch checked="true" color="#000000"/>
		</view> -->
		
		<view class="shuom">
			<view class="lt">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uYaNZmHzfJpDCDPkwIen" mode=""></image> {{ $i18n.t('userGuide') }}
			</view>
			<image src="https://api.ccttiot.com/smartmeter/img/static/uBGHYzuIqjyZXGHiTT8q" mode=""></image>
		</view>
		
		<view class="anniu" @click="btnjb">
			{{ $i18n.t('deldev') }}
		</view>
		<DeviceRoomPicker
			:visible="deviceRoomPickerVisible"
			:list="deviceRoomPickerList"
			:loading="deviceRoomPickerLoading"
			:current-room-id="xqobj.roomId"
			@close="closeDeviceRoomPicker"
			@select="confirmDeviceRoomChange"
		/>
		<DeviceNameEditModal
			:visible="deviceNameModalVisible"
			:value="deviceNameDraft"
			:title="$i18n.t('deviceName')"
			:placeholder="$i18n.t('deviceNamePlaceholder')"
			:cancel-text="$i18n.t('cancel')"
			:confirm-text="$i18n.t('confirm')"
			@close="closeDeviceNameModal"
			@confirm="onDeviceNameModalConfirm"
		/>
	</view>
</template>

<script>
	import deviceSettingsRoom from '@/common/mixins/deviceSettingsRoom.js'
	import deviceSettingsName from '@/common/mixins/deviceSettingsName.js'
	import DeviceRoomPicker from '@/common/components/DeviceRoomPicker.vue'
	import DeviceNameEditModal from '@/common/components/DeviceNameEditModal.vue'
	export default {
		components: { DeviceRoomPicker, DeviceNameEditModal },
		mixins: [deviceSettingsRoom, deviceSettingsName],
		data() {
			return {
				id:'',
				xqobj:{},
				fwqflag:true,
				accelValue:0,
				accelValues:0,
				initAngleRequesting: false,
				// 与后端 Bst 门磁 key 一致；/bst/deviceSetting/save 入参: deviceId + settingKey + settingValue(字符串)
				_lastInputSaveSig: '',
				_lastInputSaveAt: 0,
				statusLeftEnabled: true,
				statusRightEnabled: true,
				magneticMin: '',
				magneticMax: '',
				angleEnabled: true,
				angleThreshold: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getxq()
		},
		methods: {
			btnjb(){
				// 显示确认解绑弹窗
				uni.showModal({
					title: '提示',
					content: `您确定要删除当前设备吗？`,
					confirmText: this.$i18n.t('confirm'),
					cancelText: this.$i18n.t('cancel'),
					success: (res) => {
						if (res.confirm) {
							// 用户确认删除，执行删除操作
							this.performDelete();
						}
					}
				})
			},
			// 执行解绑设备
			performDelete(){
				let data = {
					deviceId:this.id
				}
				this.$http.put(`/bst/device/unbind`,data).then(res => {
					if(res.code == 200){
						uni.showToast({
							title: res.msg,
							icon: 'success',
							duration:5000
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/index/index'
							})
						},1000)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:5000
						})
					}
				})
			},
			// 进行设备详情请求
			getxq(){
				this.$http.get(`/bst/device/detail?id=${this.id}`).then(res => {
					if(res.code == 200){
						this.xqobj = res.data
						this.applyDoorSettingsFromSource(res.data)
						this.afterDeviceDetailLoaded()
					}
				})
			},
			/**
			 * 从设备详情/setting 回显。兼容 deviceSetting、settingValue 为 JSON 字符串或对象。
			 */
			/**
			 * 磁强/摆角数值类字段：空或异常布尔不要把 true/false 显示在输入框里
			 */
			_sanitizeNumericSettingText(v) {
				if (v == null) return ''
				if (typeof v === 'boolean') return ''
				const s = String(v).trim()
				if (s === '') return ''
				if (/^true$/i.test(s) || /^false$/i.test(s)) return ''
				return s
			},
			applyDoorSettingsFromSource(d) {
				if (!d || typeof d !== 'object') return
				let map = null
				const tryParse = (s) => {
					if (s == null || s === '') return null
					if (typeof s === 'object' && !Array.isArray(s)) return s
					if (typeof s === 'string') {
						try {
							return JSON.parse(s)
						} catch (e) {
							return null
						}
					}
					return null
				}
				map =
					tryParse(d.deviceSetting) ||
					tryParse(d.settingValue) ||
					tryParse(d.doorDeviceSetting) ||
					(d.doorSettings && typeof d.doorSettings === 'object' ? d.doorSettings : null) ||
					(d.settings && typeof d.settings === 'object' ? d.settings : null)
				if (!map || typeof map !== 'object') return
				const b = (v) => v === true || v === 1 || v === '1' || v === 'true' || v === 'TRUE'
				if (map.statusLeftEnabled != null) this.statusLeftEnabled = b(map.statusLeftEnabled)
				if (map.statusRightEnabled != null) this.statusRightEnabled = b(map.statusRightEnabled)
				if (map.magneticMin != null) {
					this.magneticMin = this._sanitizeNumericSettingText(map.magneticMin)
				}
				if (map.magneticMax != null) {
					this.magneticMax = this._sanitizeNumericSettingText(map.magneticMax)
				}
				if (map.angleEnabled != null) this.angleEnabled = b(map.angleEnabled)
				const th = map.angleThreshold != null ? map.angleThreshold : map.angleMax
				if (th != null) {
					this.angleThreshold = this._sanitizeNumericSettingText(th)
				}
			},
			/**
			 * 单键保存：{ deviceId: number, settingKey, settingValue: 字符串，开关为 "true" | "false" }
			 */
			persistSingleSetting(settingKey, settingValue) {
				const deviceId = Number(this.id)
				if (!deviceId || !settingKey) return
				this.$http
					.post('/bst/deviceSetting/save', {
						deviceId,
						settingKey,
						settingValue: String(settingValue)
					})
					.then((res) => {
						if (!res || res.code != 200) {
							uni.showToast({
								title: (res && res.msg) || this.$i18n.t('requestFailed'),
								icon: 'none',
								duration: 2500
							})
						}
					})
					.catch(() => {
						uni.showToast({ title: this.$i18n.t('requestFailed'), icon: 'none', duration: 2000 })
					})
			},
			_shouldDedupInputSave(settingKey, valueStr) {
				const sig = settingKey + '::' + valueStr
				const now = Date.now()
				if (this._lastInputSaveSig === sig && now - this._lastInputSaveAt < 500) {
					return true
				}
				this._lastInputSaveSig = sig
				this._lastInputSaveAt = now
				return false
			},
			commitMagneticMin() {
				this.magneticMin = this._sanitizeNumericSettingText(this.magneticMin)
				const v = this.magneticMin
				if (this._shouldDedupInputSave('magneticMin', v)) return
				this.persistSingleSetting('magneticMin', v)
			},
			commitMagneticMax() {
				this.magneticMax = this._sanitizeNumericSettingText(this.magneticMax)
				const v = this.magneticMax
				if (this._shouldDedupInputSave('magneticMax', v)) return
				this.persistSingleSetting('magneticMax', v)
			},
			commitAngleThreshold() {
				this.angleThreshold = this._sanitizeNumericSettingText(this.angleThreshold)
				const v = this.angleThreshold
				if (this._shouldDedupInputSave('angleThreshold', v)) return
				this.persistSingleSetting('angleThreshold', v)
			},
			onStatusLeftChange(e) {
				const v = !!(e && e.detail && e.detail.value)
				this.statusLeftEnabled = v
				this.persistSingleSetting('statusLeftEnabled', v ? 'true' : 'false')
			},
			onStatusRightChange(e) {
				const v = !!(e && e.detail && e.detail.value)
				this.statusRightEnabled = v
				this.persistSingleSetting('statusRightEnabled', v ? 'true' : 'false')
			},
			onAngleEnabledChange(e) {
				const v = !!(e && e.detail && e.detail.value)
				this.angleEnabled = v
				this.persistSingleSetting('angleEnabled', v ? 'true' : 'false')
			},
			onMagneticMinInput(e) {
				const raw = (e && e.detail && e.detail.value) != null ? String(e.detail.value) : ''
				this.magneticMin = this._sanitizeNumericSettingText(raw)
			},
			onMagneticMaxInput(e) {
				const raw = (e && e.detail && e.detail.value) != null ? String(e.detail.value) : ''
				this.magneticMax = this._sanitizeNumericSettingText(raw)
			},
			onAngleThresholdInput(e) {
				const raw = (e && e.detail && e.detail.value) != null ? String(e.detail.value) : ''
				this.angleThreshold = this._sanitizeNumericSettingText(raw)
			},
			// one one one one one one one one one one one one one one one one
			accelChanging(e){
				this.accelValue = e.detail.value
			},
			accelChange(e){
				this.accelValue = e.detail.value
			},
			incAccel(){
				const next = this.accelValue + 1
				this.accelValue = next > 100 ? 100 : next
			},
			decAccel(){
				const next = this.accelValue - 1
				this.accelValue = next < 0 ? 0 : next
			},
			// two two two two two two two two two two two two two two two two two
			accelChangings(e){
				this.accelValues = e.detail.value
			},
			accelChanges(e){
				this.accelValues = e.detail.value
			},
			incAccels(){
				const next = this.accelValues + 1
				this.accelValues = next > 100 ? 100 : next
			},
			decAccels(){
				const next = this.accelValues - 1
				this.accelValues = next < 0 ? 0 : next
			},
			/** 将设备当前三轴角设为关门基准角 */
			onSetDoorInitAngle() {
				if (!this.id || this.initAngleRequesting) return
				this.initAngleRequesting = true
				this.$http
					.post('/bst/device/door/initAngle', { deviceId: this.id })
					.then((res) => {
						if (res && res.code == 200) {
							uni.showToast({
								title: res.msg || this.$i18n.t('doorClosedAngleBaselineSetSuccess'),
								icon: 'success',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: (res && res.msg) || this.$i18n.t('requestFailed'),
								icon: 'none',
								duration: 2500
							})
						}
					})
					.catch(() => {
						uni.showToast({
							title: this.$i18n.t('requestFailed') || 'request failed',
							icon: 'none',
							duration: 2000
						})
					})
					.finally(() => {
						this.initAngleRequesting = false
					})
			},
            // 点击返回上一级
			btnback(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="less">
	.anniu{
		width: 750rpx;
		height: 118rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-size: 36rpx;
		color: #FF5353;
		text-align: center;
		line-height: 118rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		box-shadow: 0rpx 20rpx 26rpx 4rpx #000;
	}
	.door-setting-card{
		width: 750rpx;
		background: #ffffff;
		margin-top: 16rpx;
		padding: 28rpx 32rpx 32rpx;
		box-sizing: border-box;
	}
	.door-setting-card-title{
		font-size: 28rpx;
		color: #7f7f7f;
		margin-bottom: 24rpx;
	}
	.door-mag-range-row{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}
	.door-mag-item{
		flex: 1;
		min-width: 0;
	}
	.door-mag-label{
		display: block;
		font-size: 24rpx;
		color: #7f7f7f;
		margin-bottom: 12rpx;
	}
	.door-mag-input{
		width: 100%;
		height: 72rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #f5f5f5;
		border-radius: 8rpx;
		font-size: 30rpx;
		color: #3d3d3d;
	}
	.door-mag-sep{
		padding: 0 16rpx 12rpx;
		font-size: 28rpx;
		color: #7f7f7f;
	}
	.door-threshold-row{
		width: 100%;
	}
	.door-threshold-input-wrap{
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	.door-threshold-input{
		flex: 1;
		height: 72rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #f5f5f5;
		border-radius: 8rpx;
		font-size: 30rpx;
		color: #3d3d3d;
	}
	.door-deg-suffix{
		margin-left: 16rpx;
		font-size: 28rpx;
		color: #3d3d3d;
	}
	.door-threshold-hint{
		margin-top: 20rpx;
		font-size: 22rpx;
		color: #7f7f7f;
		line-height: 36rpx;
	}
	.door-angle-section{
		width: 750rpx;
		background: #ffffff;
		margin-top: 16rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
	.door-angle-section-hd{
		margin-top: 0 !important;
	}
	.door-angle-section-body{
		padding: 0 32rpx 32rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #D8D8D8;
	}
	.door-setting-card--nested{
		margin-top: 0 !important;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		padding: 24rpx 0 0;
		background: transparent;
	}
	.door-init-angle-btn--in-body{
		margin-top: 24rpx;
	}
	.shuom{
		width: 750rpx;
		height: 128rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 32rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		.lt{
			display: flex;
			align-items: center;
			image{
				width: 64rpx;
				height: 64rpx;
				margin-right: 40rpx;
			}
		}
		image{
			width: 56rpx;
			height: 56rpx;
		}
	}
	.dlyanchi{
		width: 750rpx;
		height: 164rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-top: 32rpx;
		.lt{
			view{
				font-size: 26rpx;
				color: #7F7F7F;
			}
		}
		.rt{
			image{
				width: 56rpx;
				height: 56rpx;
			}
		}
	}
	.yanchi{
		width: 750rpx;
		height: 262rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		.top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 36rpx 32rpx;
			box-sizing: border-box;
			margin-top: 32rpx;
			.lt{
				font-size: 30rpx;
				color: #3D3D3D;
			}
		}
		.bot{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			box-sizing: border-box;
			.lt{
				view{
					font-size: 26rpx;
					color: #7F7F7F;
				}
			}
			.rt{
				image{
					width: 56rpx;
					height: 56rpx;
				}
			}
		}
	}
	.tongzhi{
		width: 750rpx;
		height: 122rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #D8D8D8;
		.lt{
			font-size: 30rpx;
			color: #3D3D3D;
		}
	}
	.moshi{
		width: 750rpx;
		height: 164rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 32rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		.lt{
			.xi{
				font-size: 26rpx;
				color: #7F7F7F;
			}
			.cu{
				font-size: 30rpx;
				color: #3D3D3D;
				margin-top: 12rpx;
			}
		}
		.rt{
			image{
				width: 28rpx;
				height: 42rpx;
			}
		}
	}
	.mckaiguan{
		width: 750rpx;
		height: 116rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		box-sizing: border-box;
		.lt{
			font-size: 30rpx;
			color: #3D3D3D;
		}
	}
	.mcname{
		font-size: 32rpx;
		color: #7F7F7F;
		margin-top: 68rpx;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
	}
	.onebox{
		width: 750rpx;
		height: 288rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 32rpx;
		.devicename{
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #D8D8D8;
			.xi{
				font-size: 28rpx;
				color: #7F7F7F;
			}
			.cu{
				font-size: 32rpx;
				color: #3D3D3D;
				margin-top: 10rpx;
				// border-bottom: 1px solid #D8D8D8;
				// padding-bottom: 18rpx;
				box-sizing: border-box;
			}
		}
		.room{
			padding: 18rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 18rpx;
			.lt{
				.xi{
					font-size: 28rpx;
					color: #7F7F7F;
				}
				.cu{
					font-size: 32rpx;
					color: #3D3D3D;
					margin-top: 10rpx;
				}
			}
			.rt{
				image{
					width: 28rpx;
					height: 42rpx;
				}
			}
		}
	}
	.tabback{
		width: 750rpx;
		height: 204rpx;
		background: #FCFCFC;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 28rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #D8D8D8;
		padding-top: 52rpx;
		z-index: 999;
		.name{
			font-size: 36rpx;
			color: #3D3D3D;
		}
		.rtjt {
			font-size: 36rpx;
		}
	}
	.device-detail{
		background-color: #F3F5F6;
		height: 100vh;
		overflow: scroll;
		padding-bottom: calc(186rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}
	.accel-card{
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 32rpx;
		padding: 28rpx 32rpx 36rpx 32rpx;
		box-sizing: border-box;
	}
	.accel-title{
		font-size: 30rpx;
		color: #3D3D3D;
		margin-bottom: 50rpx;
	}
	.accel-slider-wrap{
		position: relative;
		display: flex;
		align-items: center;
	}
	.accel-track{ flex: 1; position: relative; }
	.accel-slider{}
	.accel-cap{
		width: 44rpx;
		height: 44rpx;
		border: 2rpx solid #D8D8D8;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #3D3D3D;
		background: #FFFFFF;
	}
	.accel-cap.left{ margin-right: 18rpx; }
	.accel-cap.right{ margin-left: 18rpx; }
	.accel-indicator{
		position: absolute;
		top: -34rpx;
		transform: translateX(-50%);
		font-size: 22rpx;
		color: #3D3D3D;
	}
	.accel-scale{
		position: absolute;
		bottom: -26rpx;
		font-size: 20rpx;
		color: #7F7F7F;
	}
	/* 与左右按钮中心对齐：按钮宽 44rpx，因此取 22rpx 并用 translate 居中 */
	.accel-scale.l{ left: 22rpx; transform: translateX(-50%); }
	.accel-scale.r{ right: 22rpx; transform: translateX(50%); }
	.accel-desc{
		margin-top: 40rpx;
		font-size: 24rpx;
		color: #7F7F7F;
		line-height: 38rpx;
	}
	.door-init-angle-btn{
		margin-top: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		background: #0F0F0F;
		border-radius: 12rpx;
	}
	.door-init-angle-btn--loading{
		opacity: 0.6;
	}
	
</style>