1010 lines
26 KiB
Vue
1010 lines
26 KiB
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> |