538 lines
11 KiB
Vue
538 lines
11 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">
|
||
烟感
|
||
</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="namesz">
|
||
烟感设置
|
||
</view>
|
||
<view class="mckaiguan">
|
||
<view class="lt">
|
||
保护模式
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
<view class="mckaiguan">
|
||
<view class="lt">
|
||
通知模式
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
<view class="mckaiguan">
|
||
<view class="lt">
|
||
烟感状况
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
<view class="mckaiguan">
|
||
<view class="lt">
|
||
温度（火）
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
<view class="mckaiguan">
|
||
<view class="lt">
|
||
CO ppm
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
<view class="mckaiguan">
|
||
<view class="lt">
|
||
VOC
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
<view class="mckaiguan">
|
||
<view class="lt">
|
||
喇叭
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
<view class="mckaiguan">
|
||
<view class="lt">
|
||
环境温度
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="" style="width: 100%;background-color: #fff;margin-top: 32rpx;padding: 36rpx 32rpx;box-sizing: border-box;color: #3d3d3d;font-size: 30rpx;padding-bottom: 0;">
|
||
温度条件
|
||
</view>
|
||
<view class="dlyanchi">
|
||
<view class="lt">
|
||
<view class="">
|
||
时间
|
||
</view>
|
||
<view class="" style="margin-top: 12rpx;">
|
||
12:00
|
||
</view>
|
||
</view>
|
||
<view class="rt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uBGHYzuIqjyZXGHiTT8q" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="dlyanchi" style="border-top: 1px solid #d8d8d8;">
|
||
<view class="lt">
|
||
<view class="">
|
||
温度
|
||
</view>
|
||
<view class="" style="margin-top: 12rpx;">
|
||
80℃
|
||
</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">温度（火）</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">当实际温度达到该数值（如 80°）时，触发 “温度异常” 警报</view>
|
||
</view>
|
||
|
||
<view class="mckaiguan" style="margin-top: 68rpx;">
|
||
<view class="lt">
|
||
独立的模式（不接HUB）
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="onebox" style="max-height: 152rpx;">
|
||
<view class="devicename">
|
||
<view class="xi">
|
||
设备名称
|
||
</view>
|
||
<view class="cu">
|
||
烟感
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mckaiguan" style="margin-top: 32rpx;">
|
||
<view class="lt">
|
||
LED显示
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
<view class="mckaiguan">
|
||
<view class="lt">
|
||
自动安装新的软件
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
<view class="mckaiguan">
|
||
<view class="lt">
|
||
LORA发射功率
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
<view class="mckaiguan">
|
||
<view class="lt">
|
||
BLE发射功率
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</view>
|
||
<view class="mckaiguan">
|
||
<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="mckaiguan" style="margin-top: 32rpx;">
|
||
<view class="lt">
|
||
节能电池模式
|
||
</view>
|
||
<view class="rt">
|
||
<switch checked="true" color="#000000"/>
|
||
</view>
|
||
</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:{},
|
||
accelValues:0,
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
|
||
},
|
||
methods: {
|
||
// 进行设备详情请求
|
||
getxq(){
|
||
this.$http.get(`/bst/device/detail?id=${this.id}`).then(res => {
|
||
if(res.code == 200){
|
||
this.xqobj = res.data
|
||
}
|
||
})
|
||
},
|
||
// 点击返回上一级
|
||
btnback(){
|
||
uni.navigateBack()
|
||
},
|
||
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
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.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;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
.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;
|
||
.lt{
|
||
view{
|
||
font-size: 26rpx;
|
||
color: #7F7F7F;
|
||
}
|
||
}
|
||
.rt{
|
||
image{
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
}
|
||
}
|
||
}
|
||
.namesz{
|
||
font-size: 32rpx;
|
||
color: #7F7F7F;
|
||
margin-top: 68rpx;
|
||
width: 100%;
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.mckaiguan{
|
||
width: 750rpx;
|
||
height: 116rpx;
|
||
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-top: 1px solid #D8D8D8;
|
||
.lt{
|
||
font-size: 30rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
.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;
|
||
}
|
||
|
||
</style> |