583 lines
13 KiB
Vue
583 lines
13 KiB
Vue
<template>
|
||
<view class="device-detail">
|
||
<!-- 自定义导航栏 -->
|
||
<view class="tabback">
|
||
<view class="rtjt" @click="btnback">←</view>
|
||
<view class="name">设置</view>
|
||
<view style="width: 36rpx;"></view>
|
||
</view>
|
||
<view class="" style="width: 100%;height: 204rpx;"></view>
|
||
<view class="onebox">
|
||
<view class="devicename">
|
||
<view class="xi">
|
||
设备名称
|
||
</view>
|
||
<view class="cu">
|
||
集线器1号
|
||
</view>
|
||
</view>
|
||
<view class="room">
|
||
<view class="lt">
|
||
<view class="xi">
|
||
房间
|
||
</view>
|
||
<view class="">
|
||
办公室
|
||
</view>
|
||
</view>
|
||
<view class="rt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uySh70FcAiX0ip7K2fPO" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mcname">
|
||
门磁设置
|
||
</view>
|
||
<view class="mckaiguan">
|
||
<view class="lt">
|
||
门磁状况 左边
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
<view class="mckaiguan" style="margin-top: 0;border-top: 1px solid #D8D8D8;">
|
||
<view class="lt">
|
||
门磁状况 右边
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
<view class="moshi">
|
||
<view class="lt">
|
||
<view class="xi">
|
||
工作模式 (报警要求)
|
||
</view>
|
||
<view class="cu">
|
||
即时报警
|
||
</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">
|
||
保护模式
|
||
</view>
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
<view class="tongzhi">
|
||
<view class="lt">
|
||
通知模式
|
||
</view>
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
<view class="tongzhi" style="border: 0;">
|
||
<view class="lt">
|
||
强制关机
|
||
</view>
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
|
||
<view class="yanchi">
|
||
<view class="top">
|
||
<view class="lt">
|
||
延迟时段
|
||
</view>
|
||
<switch :checked="fwqflag" color="#000000"/>
|
||
</view>
|
||
<view class="bot" v-if="fwqflag">
|
||
<view class="lt">
|
||
<view class="">
|
||
服务器连接失败警报延迟
|
||
</view>
|
||
<view class="" style="margin-top: 12rpx;">
|
||
300秒
|
||
</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="">
|
||
登录延迟模式
|
||
</view>
|
||
<view class="" style="margin-top: 12rpx;">
|
||
300秒
|
||
</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="">
|
||
关闭报警延迟模式
|
||
</view>
|
||
<view class="" style="margin-top: 12rpx;">
|
||
300秒
|
||
</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">加速度器（3-axis） 震动</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">数值越高，加速度器对震动的检测敏感度越高，触发“震动异常”通知的速度就越快</view>
|
||
</view>
|
||
|
||
<view class="accel-card">
|
||
<view class="accel-title">加速度器（3-axis） 角度</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">数值表示允许的最大倾斜角度，超过该角度时，加速度器将 触发 “角度异常” 提醒</view>
|
||
</view>
|
||
|
||
<view class="onebox" style="height: 160rpx;">
|
||
<view class="devicename" style="border: 0;">
|
||
<view class="xi">
|
||
NC接口
|
||
</view>
|
||
<view class="cu" style="color: #B9B9B9;">
|
||
设备名称
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tongzhi" style="margin-top: 32rpx;">
|
||
<view class="lt">
|
||
LED显示
|
||
</view>
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
<view class="tongzhi">
|
||
<view class="lt">
|
||
自动安装新的软件
|
||
</view>
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
<view class="tongzhi">
|
||
<view class="lt">
|
||
LORA发射功率
|
||
</view>
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
<view class="tongzhi" style="border: 0;">
|
||
<view class="lt">
|
||
BLE发射功率
|
||
</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> 使用指南
|
||
</view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uBGHYzuIqjyZXGHiTT8q" mode=""></image>
|
||
</view>
|
||
|
||
<view class="anniu">
|
||
删除设备
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
id:'',
|
||
xqobj:{},
|
||
fwqflag:true,
|
||
accelValue:0,
|
||
accelValues:0,
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.id = option.id
|
||
this.getxq()
|
||
},
|
||
methods: {
|
||
// 进行设备详情请求
|
||
getxq(){
|
||
this.$http.get(`/bst/device/detail?id=${this.id}`).then(res => {
|
||
if(res.code == 200){
|
||
this.xqobj = res.data
|
||
}
|
||
})
|
||
},
|
||
// 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
|
||
},
|
||
// 点击返回上一级
|
||
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;
|
||
}
|
||
.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: 80rpx;
|
||
height: 80rpx;
|
||
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: 186rpx;
|
||
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;
|
||
}
|
||
|
||
</style> |