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.

104 lines
5.2 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="card device-component">
<div class="card-header">
<h3 class="card-title">
{{device.displayName}}
<i v-if="device.isOnline" class="text-success ion ion-ios-wifi"></i>
<i v-else class="text-danger ion ion-ios-wifi"></i>
</h3>
<div class="card-tools">
<span @click="visible = true" title="操作"><i class="ion ion-md-settings"></i></span>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-4 align-self-center">
<div :style="'width:48px;height:48px;border-radius: 24px;background:'+hsl+';'"></div>
</div>
<div class="col-8 align-self-center">
<div class="row">
<span>
状态:{{status}}
</span>
</div>
</div>
</div>
</div>
<a-modal v-model="visible" :title="device.displayName" :footer="null">
<div class="row text-center">
<img style="height:32px;margin:0 auto;" v-if="status==='开'" v-on:click="execApi(device.number,'/Socket/Off')" src="/platform/images/on.svg" />
<img style="height:32px;margin:0 auto;" v-else v-on:click="execApi(device.number,'/Socket/On')" src="/platform/images/off.svg" />
</div>
<div class="row text-center">
<table style="width:70%;margin:0 auto;">
<tr>
<td style="text-align:right;">色调:</td>
<td><input @change="changeHue($event.target.value)" type="range" min="0" step="1" max="255" name="hue" :value="hue" style="outline:none;height: 5px; margin: 5px auto; -webkit-appearance: none; background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,#00F 66.66%, #F0F 83.33%, #F00 100%);" /></td>
</tr>
<tr>
<td style="text-align:right;">饱和度:</td>
<td><input @change="changeSaturation($event.target.value)" type="range" min="0" step="1" max="254" name="saturation" :value="saturation" :style="'outline:none;height:5px;margin:5px auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #fff 0%, '+color+' 100%);'" /></td>
</tr>
<tr>
<td style="text-align:right;"></td>
<td><input @change="changeBrightness($event.target.value)" type="range" min="0" step="1" max="254" name="brightness" :value="brightness" style="outline: none; height: 5px; margin: 5px auto; -webkit-appearance: none; background: -webkit-linear-gradient(left, #000 0%, #fff 100%);" /></td>
</tr>
</table>
</div>
</a-modal>
</div>
</template>
<script>
export default {
props: ['device'],
data: function () {
return {
visible: false
}
},
methods: {
changeHue: function (hue) {
execApi(this.device.number, '/ColorLight/Change', 'hue=' + hue + '&saturation=' + 254 + '&brightness=' + this.brightness);
},
changeSaturation: function (saturation) {
execApi(this.device.number, '/ColorLight/Change', 'hue=' + this.hue + '&saturation=' + saturation + '&brightness=' + this.brightness);
},
changeBrightness: function (brightness) {
execApi(this.device.number, '/ColorLight/Change', 'hue=' + this.hue + '&saturation=' + this.saturation + '&brightness=' + brightness);
}
},
computed: {
status: function () {
return getIoTDataValue(this.device, '状态') === '1' ? '开' : '关';
},
hue: function () {
return getIoTDataValue(this.device, '色调');
},
saturation: function () {
return getIoTDataValue(this.device, '饱和度');
},
brightness: function () {
return getIoTDataValue(this.device, '亮度');
},
color: function () {
var h = Math.round(parseInt(this.hue || 128) * 360 / 255);
var result = 'hsl(' + h + ',100%,50%)';
console.log('color:' + result);
return result;
},
hsl: function () {
var h = Math.round(parseInt(this.hue || 128) * 360 / 254);
var s = Math.round(parseInt(this.saturation || 128) * 100 / 254);
var l = Math.round(parseInt(this.brightness || 128) * 100 / 254);
var result = 'hsl(' + h + ',' + s + '%,' + l + '%)';
console.warn('raw:'+this.hue+' '+this.saturation+' '+this.brightness);
console.warn('hsl:' + result);
return result;
},
color: function () {
var h = Math.round(parseInt(this.hue || 128) * 360 / 254);
return 'hsl(' + h + ',100%,0%)';
}
}
};
</script>