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.
444 lines
24 KiB
444 lines
24 KiB
<template>
|
|
<div id="ir">
|
|
<div class="card" style="box-sizing:border-box;">
|
|
<div class="card-body">
|
|
<div id="air" v-if="type==='空调'">
|
|
<table style="margin: 50px auto;">
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" :value="power.value" @click="changePower($event.target.value)">电源</button>
|
|
</td>
|
|
<td></td>
|
|
<td>{{power.name}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" :value="pattern.value" @click="changePattern($event.target.value)">模式</button>
|
|
</td>
|
|
<td></td>
|
|
<td>{{pattern.name}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" :value="wind.value" @click="changeWind($event.target.value)">风速</button>
|
|
</td>
|
|
<td></td>
|
|
<td>{{wind.name}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" :value="direction.value" @click="changeDirection($event.target.value)">风向</button>
|
|
</td>
|
|
<td></td>
|
|
<td>{{direction.name}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" :value="temperature.value" @click="changeTemperature($event.target.value,-1)">-</button>
|
|
</td>
|
|
<td>
|
|
{{temperature.name}}
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" :value="temperature.value" @click="changeTemperature($event.target.value,1)">+</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="tv" v-else-if="type==='电视'">
|
|
<table style="margin: 20px auto;">
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="1" @click="send($event.target.value,2)">电源</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="2" @click="send($event.target.value,2)">AV</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="15" @click="send($event.target.value,2)">静音</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="1" @click="send($event.target.value,2)">1</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="2" @click="send($event.target.value,2)">2</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="3" @click="send($event.target.value,2)">3</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="4" @click="send($event.target.value,2)">4</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="5" @click="send($event.target.value,2)">5</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="6" @click="send($event.target.value,2)">6</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="7" @click="send($event.target.value,2)">7</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="8" @click="send($event.target.value,2)">8</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="9" @click="send($event.target.value,2)">9</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="13" @click="send($event.target.value,2)">返回</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="0" @click="send($event.target.value,2)">0</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="14" @click="send($event.target.value,2)">退出</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="19" @click="send($event.target.value,2)">上</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="21" @click="send($event.target.value,2)">左</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="23" @click="send($event.target.value,2)">OK</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="22" @click="send($event.target.value,2)">右</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="8" @click="send($event.target.value,2)">下</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="17" @click="send($event.target.value,2)">+</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="24" @click="send($event.target.value,2)">↑</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: center;">
|
|
音量
|
|
</td>
|
|
<td style="text-align: center;">
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="16" @click="send($event.target.value,2)">菜单</button>
|
|
</td>
|
|
<td style="text-align: center;">
|
|
频道
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="18" @click="send($event.target.value,2)">-</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="25" @click="send($event.target.value,2)">↓</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="26" @click="send($event.target.value,2)">快退</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="28" @click="send($event.target.value,2)">播放</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="28" @click="send($event.target.value,2)">快进</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="box" v-else-if="type==='机顶盒'">
|
|
<table style="margin: 20px auto;">
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="1" @click="send($event.target.value,3)">电源</button>
|
|
</td>
|
|
<td></td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="15" @click="send($event.target.value,3)">静音</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="1" @click="send($event.target.value,3)">1</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="2" @click="send($event.target.value,3)">2</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="3" @click="send($event.target.value,3)">3</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="4" @click="send($event.target.value,3)">4</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="5" @click="send($event.target.value,3)">5</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="6" @click="send($event.target.value,3)">6</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="7" @click="send($event.target.value,3)">7</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="8" @click="send($event.target.value,3)">8</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="9" @click="send($event.target.value,3)">9</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="13" @click="send($event.target.value,3)">返回</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="0" @click="send($event.target.value,3)">0</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="14" @click="send($event.target.value,3)">退出</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="19" @click="send($event.target.value,3)">上</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="21" @click="send($event.target.value,3)">左</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="23" @click="send($event.target.value,3)">OK</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="22" @click="send($event.target.value,3)">右</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="8" @click="send($event.target.value,3)">下</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="17" @click="send($event.target.value,3)">+</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="24" @click="send($event.target.value,3)">↑</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
音量
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="16" @click="send($event.target.value,3)">菜单</button>
|
|
</td>
|
|
<td>
|
|
频道
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="18" @click="send($event.target.value,3)">-</button>
|
|
</td>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="25" @click="send($event.target.value,3)">↓</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="26" @click="send($event.target.value,3)">快退</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="28" @click="send($event.target.value,3)">播放</button>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn btn-block btn-default btn-sm" style="padding:0 10px" value="28" @click="send($event.target.value,3)">快进</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div id="diy" v-else>
|
|
<div class="button-sp-area cell" style="width:100%;height:100%;overflow:auto;">
|
|
<button v-for="button in buttons" type="button" class="btn btn-default px-2 m-2 btn-sm" :value="button.value" @click="send($event.target.value,5)">{{button.name}}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'iot-ir-command',
|
|
props: ['type', 'value', 'buttons'],
|
|
data: function () {
|
|
return {
|
|
currentType: this.type,
|
|
code: this.value || 0
|
|
};
|
|
},
|
|
watch: {
|
|
code(val) {
|
|
this.$emit('update:value', val);
|
|
//this.$emit('change', this.name);
|
|
}
|
|
},
|
|
mounted: function () {
|
|
},
|
|
methods: {
|
|
changePattern: function (v) {
|
|
this.change(v, 0, 480, 120);
|
|
},
|
|
changeDirection(v) {
|
|
this.change(v, 0, 60, 60);
|
|
},
|
|
changeWind(v) {
|
|
this.change(v, 0, 45, 15);
|
|
},
|
|
changePower: function (v) {
|
|
var oldValue = parseInt(v);
|
|
if (oldValue === 1) {
|
|
this.send(3);
|
|
//getData(this.device, '按键').value = 3;
|
|
}
|
|
else if (oldValue === 2) {
|
|
this.send(1);
|
|
//getData(this.device, '按键').value = 1;
|
|
}
|
|
},
|
|
changeTemperature: function (v, step) {
|
|
var oldValue = parseInt(v);
|
|
var min = 1;
|
|
var max = 15;
|
|
var newValue = oldValue + step;
|
|
if (step > 0 && newValue > max) {
|
|
newValue = max;
|
|
}
|
|
else if (step < 0 && newValue < min) {
|
|
newValue = min;
|
|
}
|
|
var newCode = this.code - oldValue + newValue;
|
|
this.send(newCode, 1);
|
|
//getData(this.device, '按键').value = newCode;
|
|
},
|
|
change: function (v, min, max, step) {
|
|
var oldValue = parseInt(v);
|
|
var newValue = oldValue + step;
|
|
if (newValue > max) {
|
|
newValue = min;
|
|
}
|
|
var newCode = this.code - oldValue + newValue;
|
|
this.send(newCode);
|
|
//this.getData(this.device, '按键').value = newCode;
|
|
},
|
|
send: function (value, type) {
|
|
this.code = value;
|
|
this.$emit('update:value', value);
|
|
},
|
|
},
|
|
computed: {
|
|
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> |