-
2src/manifest.json
-
6src/pages.json
-
459src/subpackage/device/pages/air_conditioner/detail/detail.vue
-
191src/subpackage/device/pages/switch_manage/switch_manage.vue
-
BINsrc/subpackage/device/static/images/air_conditioner/close.png
-
BINsrc/subpackage/device/static/images/air_conditioner/heating.png
-
BINsrc/subpackage/device/static/images/air_conditioner/in_under_heating.png
-
BINsrc/subpackage/device/static/images/air_conditioner/lock.png
-
BINsrc/subpackage/device/static/images/air_conditioner/normal.png
-
BINsrc/subpackage/device/static/images/air_conditioner/open.png
-
BINsrc/subpackage/device/static/images/air_conditioner/refrigeration.png
-
BINsrc/subpackage/device/static/images/air_conditioner/switch.png
-
BINsrc/subpackage/device/static/images/air_conditioner/temp_add.png
-
BINsrc/subpackage/device/static/images/air_conditioner/temp_reduce.png
-
BINsrc/subpackage/device/static/images/air_conditioner/under_heating.png
-
BINsrc/subpackage/device/static/images/air_conditioner/ventilate.png
-
BINsrc/subpackage/device/static/images/air_conditioner/wind_0.png
-
BINsrc/subpackage/device/static/images/air_conditioner/wind_1.png
-
BINsrc/subpackage/device/static/images/air_conditioner/wind_2.png
-
BINsrc/subpackage/device/static/images/air_conditioner/wind_3.png
@ -0,0 +1,459 @@ |
|||
<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('open')"></image> |
|||
<view>开</view> |
|||
</view> |
|||
<view class="ab-item" @click="operateBtn({ op: 'off' })"> |
|||
<image mode="aspectFit" :src="getIconPath('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" v-for="(e, i) in modelLs" :key="i" @click="operateBtn({ op: 'mode', ext: e.mode })"> |
|||
<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" v-for="(e, i) in airSpeedLs" :key="i" @click="operateBtn({ op: 'speed', ext: e.speed })"> |
|||
<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" 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" 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; |
|||
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'; |
|||
.air-conditioner-detail{ |
|||
padding: 40upx; |
|||
.acd-tit{ |
|||
margin-bottom: 40upx; |
|||
font-size: 44upx; |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
.acd-panel{ |
|||
margin-bottom: 60upx; |
|||
padding: 24upx 14upx 50upx; |
|||
border-radius: 10upx; |
|||
background-color: #fff; |
|||
.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: #9c9c9f; |
|||
} |
|||
.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; |
|||
} |
|||
.ai-icon{ |
|||
margin: 0 auto 14upx; |
|||
width: 116upx; |
|||
height: 116upx; |
|||
border-radius: 10upx; |
|||
background-color: #fff; |
|||
@include centerFlex(center); |
|||
>image{ |
|||
width: 60upx; |
|||
height: 60upx; |
|||
} |
|||
} |
|||
.ai-txt{ |
|||
text-align: center; |
|||
text-align: center; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
@include textHide(2); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 200 | Height: 200 | Size: 4.2 KiB |
|
After Width: 120 | Height: 120 | Size: 1.8 KiB |
|
After Width: 120 | Height: 120 | Size: 2.1 KiB |
|
After Width: 120 | Height: 120 | Size: 1.1 KiB |
|
After Width: 120 | Height: 120 | Size: 2.4 KiB |
|
After Width: 200 | Height: 200 | Size: 3.1 KiB |
|
After Width: 120 | Height: 120 | Size: 1.4 KiB |
|
After Width: 120 | Height: 120 | Size: 1.1 KiB |
|
After Width: 56 | Height: 56 | Size: 291 B |
|
After Width: 48 | Height: 48 | Size: 193 B |
|
After Width: 120 | Height: 120 | Size: 920 B |
|
After Width: 120 | Height: 120 | Size: 940 B |
|
After Width: 120 | Height: 120 | Size: 719 B |
|
After Width: 120 | Height: 120 | Size: 656 B |
|
After Width: 120 | Height: 120 | Size: 795 B |
|
After Width: 120 | Height: 120 | Size: 691 B |