xinyi/congming_huose-apk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
master
congming_huose-apk/pages/device/yanganedit.vue

538 lines
11 KiB
Vue
Raw Permalink Normal View History

聪明的房子
2025-11-08 11:30:06 +08:00
<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>
Reference in New Issue Copy Permalink