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.
448 lines
24 KiB
448 lines
24 KiB
<template>
|
|
<div class="card" style="box-sizing:border-box;height:600px;margin:10px;">
|
|
<div class="card-header">
|
|
{{device.displayName}}
|
|
<span class="float-right text-success" v-if="device.isOnline"><i class="ion ion-ios-wifi"></i></span>
|
|
<span class="float-right text-danger" v-else><i class="ion ion-ios-wifi"></i></span>
|
|
</div>
|
|
<div class="card-body" style="padding-top:0;">
|
|
<div class="weui-tab">
|
|
<div class="weui-navbar">
|
|
<a href="javascript:;" class="weui-tabbar__item">
|
|
<p class="weui-tabbar__label">空调</p>
|
|
</a>
|
|
<a href="javascript:;" class="weui-tabbar__item">
|
|
<p class="weui-tabbar__label">电视</p>
|
|
</a>
|
|
<a href="javascript:;" class="weui-tabbar__item">
|
|
<p class="weui-tabbar__label">机顶盒</p>
|
|
</a>
|
|
<a href="javascript:;" class="weui-tabbar__item">
|
|
<p class="weui-tabbar__label">自定义</p>
|
|
</a>
|
|
</div>
|
|
<div class="weui-tab__panel media ir">
|
|
<div class="weui-tab__content">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" :value="power.value" v-on:click="changePower($event)">电源</button>
|
|
</td>
|
|
<td></td>
|
|
<td>{{power.name}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" :value="pattern.value" v-on:click="changePattern($event)">模式</button>
|
|
</td>
|
|
<td></td>
|
|
<td>{{pattern.name}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" :value="wind.value" v-on:click="changeWind($event)">风速</button>
|
|
</td>
|
|
<td></td>
|
|
<td>{{wind.name}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" :value="direction.value" v-on:click="changeDirection($event)">风向</button>
|
|
</td>
|
|
<td></td>
|
|
<td>{{direction.name}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" :value="temperature.value" v-on:click="changeTemperature($event,-1)">-</button>
|
|
</td>
|
|
<td>
|
|
{{temperature.name}}
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" :value="temperature.value" v-on:click="changeTemperature($event,1)">+</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="weui-tab__content">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="1" v-on:click="tv($event)">电源</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="2" v-on:click="tv($event)">AV</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="15" v-on:click="tv($event)">静音</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="1" v-on:click="tv($event)">1</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="2" v-on:click="tv($event)">2</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="3" v-on:click="tv($event)">3</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="4" v-on:click="tv($event)">4</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="5" v-on:click="tv($event)">5</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="6" v-on:click="tv($event)">6</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="7" v-on:click="tv($event)">7</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="8" v-on:click="tv($event)">8</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="9" v-on:click="tv($event)">9</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="13" v-on:click="tv($event)">返回</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="0" v-on:click="tv($event)">0</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="14" v-on:click="tv($event)">退出</button>
|
|
</td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="19" v-on:click="tv($event)">上</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="21" v-on:click="tv($event)">左</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="23" v-on:click="tv($event)">OK</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="22" v-on:click="tv($event)">右</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="8" v-on:click="tv($event)">下</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="17" v-on:click="tv($event)">+</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="24" v-on:click="tv($event)">↑</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
音量
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="16" v-on:click="tv($event)">菜单</button>
|
|
</td>
|
|
<td>
|
|
频道
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="18" v-on:click="tv($event)">-</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="25" v-on:click="tv($event)">↓</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="26" v-on:click="tv($event)">快退</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="28" v-on:click="tv($event)">播放</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="28" v-on:click="tv($event)">快进</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="weui-tab__content">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="1" v-on:click="tv($event)">电源</button>
|
|
</td>
|
|
<td></td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="15" v-on:click="tv($event)">静音</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="1" v-on:click="tv($event)">1</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="2" v-on:click="tv($event)">2</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="3" v-on:click="tv($event)">3</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="4" v-on:click="tv($event)">4</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="5" v-on:click="tv($event)">5</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="6" v-on:click="tv($event)">6</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="7" v-on:click="tv($event)">7</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="8" v-on:click="tv($event)">8</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="9" v-on:click="tv($event)">9</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="13" v-on:click="tv($event)">返回</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="0" v-on:click="tv($event)">0</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="14" v-on:click="tv($event)">退出</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="19" v-on:click="tv($event)">上</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="21" v-on:click="tv($event)">左</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="23" v-on:click="tv($event)">OK</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="22" v-on:click="tv($event)">右</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="8" v-on:click="tv($event)">下</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="17" v-on:click="tv($event)">+</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="24" v-on:click="tv($event)">↑</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
音量
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="16" v-on:click="tv($event)">菜单</button>
|
|
</td>
|
|
<td>
|
|
频道
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="18" v-on:click="tv($event)">-</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="25" v-on:click="tv($event)">↓</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="26" v-on:click="tv($event)">快退</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="28" v-on:click="tv($event)">播放</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default" value="28" v-on:click="tv($event)">快进</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="weui-tab__content">
|
|
<button type="button" class="weui-btn weui-btn_mini weui-btn_default m-2">btn</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
({
|
|
props: ['device'],
|
|
mounted: function () {
|
|
weui.tab('.weui-tab');
|
|
},
|
|
methods: {
|
|
changePattern: function (e) {
|
|
this.change(e, 0, 480, 120);
|
|
},
|
|
changeDirection(e) {
|
|
this.change(e, 0, 60, 60);
|
|
},
|
|
changeWind(e) {
|
|
this.change(e, 0, 45, 15);
|
|
},
|
|
changePower: function (e) {
|
|
var oldValue = parseInt(e.target.value);
|
|
if (oldValue === 1) {
|
|
getData(this.device, '按键').value = 3;
|
|
}
|
|
else if (oldValue === 2) {
|
|
getData(this.device, '按键').value = 1;
|
|
}
|
|
},
|
|
changeTemperature: function (e, step) {
|
|
var min = 1;
|
|
var max = 15;
|
|
var oldValue = parseInt(e.target.value);
|
|
var newValue = oldValue + step;
|
|
if (step > 0 && newValue > max) {
|
|
newValue = max;
|
|
}
|
|
else if (step < 0 && newValue < min) {
|
|
newValue = min;
|
|
}
|
|
getData(this.device, '按键').value = this.code - oldValue + newValue;
|
|
},
|
|
change: function (e, min, max, step) {
|
|
var oldValue = parseInt(e.target.value);
|
|
var newValue = oldValue + step;
|
|
if (newValue > max) {
|
|
newValue = min;
|
|
}
|
|
getData(this.device, '按键').value = this.code - oldValue + newValue;
|
|
},
|
|
tv: function (e) {
|
|
alert(e.target.value);
|
|
}
|
|
},
|
|
computed: {
|
|
code: function () {
|
|
return getDeviceDataValue(this.device, '按键');
|
|
},
|
|
pattern: function () {
|
|
var code = this.code;
|
|
var pattern = { name: '制冷', value: 0 };
|
|
if (code > 480+2) {
|
|
pattern = { name: '通风', value: 480 };
|
|
}
|
|
else if (code > 360+2) {
|
|
pattern = { name: '抽湿', value: 360 };
|
|
}
|
|
else if (code > 240+2) {
|
|
pattern = { name: '制热', value: 240 };
|
|
}
|
|
else if (code > 120+2) {
|
|
pattern = { name: '自动', value: 120 };
|
|
}
|
|
return pattern;
|
|
},
|
|
direction: function () {
|
|
var code = this.code - this.pattern.value;
|
|
var direction = { name: '自动', value: 0 };;
|
|
if (code > 60 + 2) {
|
|
direction = { name: '手动', value: 60 };
|
|
}
|
|
return direction;
|
|
},
|
|
wind: function () {
|
|
var code = this.code - this.pattern.value - this.direction.value;
|
|
var wind = { name: '自动', value: 0 };
|
|
if (code > 45 + 2) {
|
|
wind = { name: '低', value: 45 };
|
|
}
|
|
else if (code > 30 + 2) {
|
|
wind = { name: '中', value: 30 };
|
|
}
|
|
else if (code > 15 + 2) {
|
|
wind = { name: '高', value: 15 };
|
|
}
|
|
return wind;
|
|
},
|
|
power: function () {
|
|
var code = this.code - this.pattern.value - this.direction.value - this.wind.value;
|
|
var power = { name: '关', value: 1 };
|
|
if (code > 1) {
|
|
power = { name: '开', value: 2 };
|
|
}
|
|
return power;
|
|
},
|
|
temperature: function () {
|
|
var code = this.code - this.pattern.value - this.direction.value - this.wind.value - this.power.value;
|
|
var temperature = { name: '16℃', value: 1 };
|
|
if (code > 1) {
|
|
temperature = { name: parseInt(code+15) + '℃', value: code };
|
|
}
|
|
return temperature;
|
|
}
|
|
}
|
|
});
|
|
</script> |