|
|
<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" v-if="hasDevicePermission()">
|
|
|
<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%)';
|
|
|
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 + '%)';
|
|
|
return result;
|
|
|
},
|
|
|
color: function () {
|
|
|
var h = Math.round(parseInt(this.hue || 128) * 360 / 254);
|
|
|
return 'hsl(' + h + ',100%,0%)';
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script> |
