You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
494 lines
17 KiB
494 lines
17 KiB
<template>
|
|
<view class="air-conditioner-detail">
|
|
<view class="acd-tit">{{ airName || '-' }}</view>
|
|
<view class="acd-panel">
|
|
<view class="ap-top-info">
|
|
<view class="ati-box ati-temp">
|
|
<view class="ab-tit">温度</view>
|
|
<view class="at-info">
|
|
<view class="ai-btn">
|
|
<image mode="aspectFit" :src="getIconPath('temp_add')" @click="tempBtn('add')"></image>
|
|
</view>
|
|
<view class="ai-temp">
|
|
<view class="at-num">{{ pageInfo.temperature || 0 }}</view>
|
|
<view class="at-unit">℃</view>
|
|
</view>
|
|
<view class="ai-btn">
|
|
<image mode="aspectFit" :src="getIconPath('temp_reduce')" @click="tempBtn('reduce')"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ati-box ati-wind">
|
|
<view class="ab-tit">风速</view>
|
|
<!-- 1: 低速， 2：中，3：高，4：自动 -->
|
|
<view class="aw-txt">{{ getSpeedName(pageInfo.speed || 0) }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="ap-btns">
|
|
<view class="ab-item" @click="operateBtn({ op: 'on' })">
|
|
<image mode="aspectFit" :src="getIconPath('nw_open')"></image>
|
|
<view>开</view>
|
|
</view>
|
|
<view class="ab-item" @click="operateBtn({ op: 'off' })">
|
|
<image mode="aspectFit" :src="getIconPath('nw_close')"></image>
|
|
<view>关</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="acd-btn-ls">
|
|
<view class="abl-tit">模式</view>
|
|
<view class="abl-ls">
|
|
<view class="al-item" hover-class="acd-hover-active" v-for="(e, i) in modelLs" :key="i" @click="operateBtn({ op: 'mode', ext: e.mode })">
|
|
<view class="ai-icon" :class="[e.mode == pageInfo.mode? 'active': '']">
|
|
<image mode="aspectFit" :src="getIconPath(e.icon)"></image>
|
|
</view>
|
|
<view class="ai-txt">{{ e.name || '-' }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="acd-btn-ls">
|
|
<view class="abl-tit">风速</view>
|
|
<view class="abl-ls">
|
|
<view class="al-item" hover-class="acd-hover-active" v-for="(e, i) in airSpeedLs" :key="i" @click="operateBtn({ op: 'speed', ext: e.speed })">
|
|
<view class="ai-icon" :class="[e.speed == pageInfo.speed? 'active': '']">
|
|
<image mode="aspectFit" :src="getIconPath(e.icon)"></image>
|
|
</view>
|
|
<view class="ai-txt">{{ e.name || '-' }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 后台：水阀的不管 隐藏掉 -->
|
|
<!-- <view class="acd-btn-ls">
|
|
<view class="abl-tit">水阀</view>
|
|
<view class="abl-ls">
|
|
<view class="al-item" v-for="(e, i) in hydrovalveLs" :key="i">
|
|
<view class="ai-icon">
|
|
<image mode="aspectFit" :src="getIconPath(e.icon)"></image>
|
|
</view>
|
|
<view class="ai-txt">{{ e.name || '-' }}</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="acd-btn-ls">
|
|
<view class="abl-tit">允许使用按钮</view>
|
|
<view class="abl-ls">
|
|
<view class="al-item" hover-class="acd-hover-active" v-for="(e, i) in allowLs" :key="i" @click="operateBtn({ op: e.op })">
|
|
<view class="ai-icon">
|
|
<image mode="aspectFit" :src="getIconPath(e.icon)"></image>
|
|
</view>
|
|
<view class="ai-txt">{{ e.name || '-' }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import deviceServer from '../../../js/device_server';
|
|
import deviceApi from '../../../js/device_api';
|
|
import util from '../../../../../utils/util';
|
|
|
|
/*
|
|
+ info 获取信息状态
|
|
+ st 设置温度(value:{op:"st",ext:"24"}) 10 - 50
|
|
+ mode 模式设置(value:{op:"mode",ext:"1"}) // 0：内机制热， 1：内机地暖同时制热(默认)， 2：地暖制热，3：制冷模式，9：通风模式
|
|
+ speed 风速设置(value:{op:"speed",ext:"1"}) // 1: 低速， 2：中，3：高，4：自动
|
|
+ lock 锁
|
|
+ unlock 解锁
|
|
+ on 开
|
|
+ off 关
|
|
*/
|
|
export default {
|
|
computed: {
|
|
modelLs(){
|
|
return ([
|
|
{
|
|
id: 1,
|
|
name: '内机制热',
|
|
icon: 'heating',
|
|
mode: 0,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '内机地暖 制热',
|
|
icon: 'in_under_heating',
|
|
mode: 1,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '地暖制热',
|
|
icon: 'under_heating',
|
|
mode: 2,
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '制冷',
|
|
icon: 'refrigeration',
|
|
mode: 3,
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '通风',
|
|
icon: 'ventilate',
|
|
mode: 9,
|
|
},
|
|
])
|
|
},
|
|
airSpeedLs(){
|
|
return ([
|
|
{
|
|
id: 1,
|
|
name: '高',
|
|
icon: 'wind_3',
|
|
speed: 3,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '中',
|
|
icon: 'wind_2',
|
|
speed: 2,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '低',
|
|
icon: 'wind_1',
|
|
speed: 1,
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '自动',
|
|
icon: 'wind_0',
|
|
speed: 4,
|
|
},
|
|
])
|
|
},
|
|
hydrovalveLs(){
|
|
return ([
|
|
{
|
|
id: 1,
|
|
name: '开',
|
|
icon: 'open'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '关',
|
|
icon: 'close'
|
|
},
|
|
])
|
|
},
|
|
allowLs(){
|
|
return ([
|
|
|
|
{
|
|
id: 2,
|
|
name: '开机',
|
|
icon: 'switch',
|
|
op: 'on',
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '关机',
|
|
icon: 'close',
|
|
op: 'off',
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '解锁',
|
|
icon: 'normal',
|
|
op: 'unlock',
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '全锁',
|
|
icon: 'lock',
|
|
op: 'lock',
|
|
},
|
|
])
|
|
},
|
|
},
|
|
data(){
|
|
return {
|
|
subpackInfo: {},
|
|
pageInfo: {},
|
|
airName: ''
|
|
}
|
|
},
|
|
onLoad(options){
|
|
console.warn('qrstr', options.qrstr);
|
|
if(options.name)this.airName = options.name;
|
|
let _qyObj = null;
|
|
try{
|
|
_qyObj = util.jsonPar(options.qrstr);
|
|
}catch(err){
|
|
console.warn('json ERR', err);
|
|
}
|
|
if(!_qyObj)return;
|
|
console.warn('_qyObj', _qyObj);
|
|
_qyObj = this.setExt({ query: _qyObj, value: '', });
|
|
this.subpackInfo = _qyObj;
|
|
console.log(11111,_qyObj);
|
|
this.operateReq({ data: _qyObj, isTip: false });
|
|
},
|
|
methods: {
|
|
tempBtn: util.debounce(function(type){
|
|
let { pageInfo } = this;
|
|
let _num = pageInfo.temperature || 0;
|
|
_num = type == 'add' ? ++_num : type == 'reduce' ? --_num : _num;
|
|
this.operateReq({ data: this.getOperateData({ op: 'st', ext: _num }), isTip: false });
|
|
|
|
}, 300, true),
|
|
|
|
operateBtn: util.debounce(function({ op='', ext='' }){
|
|
let { subpackInfo } = this;
|
|
this.operateReq({
|
|
data: this.getOperateData({ op, ext })
|
|
})
|
|
.then(res=>{
|
|
if(res == 'success'){
|
|
setTimeout(_=>{
|
|
this.operateReq({ data: this.getOperateData({ op: 'st', }), isTip: false });
|
|
}, 1200)
|
|
}
|
|
})
|
|
}, 300, true),
|
|
getOperateData({ op='', ext='' }){
|
|
let { subpackInfo } = this;
|
|
let _obj = null;
|
|
_obj = this.setOp({ query: subpackInfo, value: op, });
|
|
_obj = this.setExt({ query: subpackInfo, value: ext, });
|
|
return _obj;
|
|
},
|
|
getSpeedName(speed){
|
|
switch(+speed){
|
|
case 1:
|
|
return '低速'
|
|
case 2:
|
|
return '中速'
|
|
case 3:
|
|
return '高速'
|
|
case 4:
|
|
return '自动'
|
|
default:
|
|
return '-'
|
|
}
|
|
},
|
|
setExt({query, value}){
|
|
if(query.data.toString() !== '[object Object]')query.data = {};
|
|
if(query.data.value.toString() !== '[object Object]')query.data.value = {};
|
|
query.data&&query.data.value&&(query.data.value.ext = value + '');
|
|
return query;
|
|
},
|
|
setOp({query, value}){
|
|
if(query.data.toString() !== '[object Object]')query.data = {};
|
|
if(query.data.value.toString() !== '[object Object]')query.data.value = {};
|
|
query.data&&query.data.value&&(query.data.value.op = value);
|
|
return query;
|
|
},
|
|
getIconPath(iconName){
|
|
if(!iconName)return '';
|
|
return `/subpackage/device/static/images/air_conditioner/${iconName}.png`
|
|
},
|
|
// 操作接口请求
|
|
operateReq({data, isTip=true, isLoad=true}){
|
|
if(isLoad)util.showLoad();
|
|
return deviceServer.post({
|
|
url: deviceApi.ouxuanac,
|
|
data: data,
|
|
isDefaultGet: false,
|
|
})
|
|
.then(res=>{
|
|
if(isLoad)util.hideLoad();
|
|
if(res.data.code == 0){
|
|
if(isTip)util.showNone(res.data.message || '操作成功！');
|
|
if(data.data&&data.data.value&&data.data.value.op === 'info')this.pageInfo = res.data.data || {};
|
|
return 'success'
|
|
}else{
|
|
if(isTip)util.showNone(res.data.message || '操作失败！');
|
|
return 'fail';
|
|
}
|
|
})
|
|
.catch(err=>{if(isLoad)util.hideLoad()})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~style/public.scss';
|
|
page{
|
|
&::after{
|
|
content: '';
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url(../../../static/images/page_bg.jpg) repeat-y;
|
|
background-size: 100%;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
.air-conditioner-detail{
|
|
padding: 40upx;
|
|
.acd-tit{
|
|
margin-bottom: 40upx;
|
|
font-size: 44upx;
|
|
font-weight: 500;
|
|
color: #1A1A1A;
|
|
}
|
|
.acd-panel{
|
|
margin-bottom: 60upx;
|
|
padding: 24upx 14upx 50upx;
|
|
border-radius: 10upx;
|
|
border: .5px solid #fff;
|
|
box-shadow: 0 4upx 12upx 0 #00987454, inset 0 0 40upx 0 #ffffff80;
|
|
background-image: linear-gradient(180deg, #eff6f44d 0%, #FFFFFF 100%);
|
|
.ap-top-info{
|
|
margin-bottom: 64upx;
|
|
flex-wrap: nowrap;
|
|
@include centerFlex(center);
|
|
.ati-box{
|
|
flex-shrink: 0;
|
|
max-width: 50%;
|
|
margin: 0 10upx;
|
|
padding: 12upx 20upx;
|
|
flex-grow: 1;
|
|
height: 178upx;
|
|
border-radius: 4upx;
|
|
background-color: #f2f2f7;
|
|
.ab-tit{
|
|
font-size: 28upx;
|
|
line-height: 40upx;
|
|
color: #9c9c9f;
|
|
}
|
|
}
|
|
.ati-temp{
|
|
.at-info{
|
|
@include centerFlex(space-between);
|
|
.ai-btn{
|
|
flex-shrink: 0;
|
|
width: 24upx;
|
|
height: 24upx;
|
|
>image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.ai-temp{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.at-num{
|
|
line-height: 112upx;
|
|
font-weight: 500;
|
|
font-size: 80upx;
|
|
color: $themeColor;
|
|
@include textHide(1);
|
|
}
|
|
.at-unit{
|
|
flex-shrink: 0;
|
|
padding-top: 10upx;
|
|
align-self: flex-start;
|
|
font-size: 28upx;
|
|
line-height: 40upx;
|
|
color: $themeColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ati-wind{
|
|
.aw-txt{
|
|
line-height: 90upx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 64upx;
|
|
color: $themeColor;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.ap-btns{
|
|
@include centerFlex(center);
|
|
.ab-item{
|
|
margin: 0 60upx;
|
|
>image{
|
|
margin: 0 auto 20upx;
|
|
display: block;
|
|
width: 100upx;
|
|
height: 100upx;
|
|
}
|
|
>view{
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
font-size: 24upx;
|
|
line-height: 34upx;
|
|
color: #9a9a9d;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.acd-btn-ls{
|
|
width: 100%;
|
|
margin-bottom: 50upx;
|
|
.abl-tit{
|
|
margin-bottom: 28upx;
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #fff;
|
|
}
|
|
.abl-ls{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.al-item{
|
|
margin-bottom: 24upx;
|
|
width: 116upx;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
&:not(:nth-child(5n)){
|
|
margin-right: 20upx;
|
|
}
|
|
&.acd-hover-active{
|
|
.ai-icon{
|
|
&::after{
|
|
position: absolute;
|
|
content: '';
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba($color: #000000, $alpha: .3);
|
|
}
|
|
}
|
|
}
|
|
.ai-icon{
|
|
position: relative;
|
|
margin: 0 auto 14upx;
|
|
width: 116upx;
|
|
height: 116upx;
|
|
border-radius: 10upx;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
@include centerFlex(center);
|
|
>image{
|
|
width: 60upx;
|
|
height: 60upx;
|
|
}
|
|
&.active{
|
|
border: 2upx solid $themeColor;
|
|
}
|
|
}
|
|
.ai-txt{
|
|
text-align: center;
|
|
text-align: center;
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #1a1a1a;
|
|
@include textHide(2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|