|
|
@ -1,4 +1,4 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="card color-light" style="box-sizing:border-box;height:150px;margin-top:10px;">
|
|
|
|
<div class="card color-light" style="box-sizing:border-box;height:150px;margin-top:10px;">
|
|
|
|
<div class="card-header">
|
|
|
|
<div class="card-header">
|
|
|
|
{{device.displayName}}
|
|
|
|
{{device.displayName}}
|
|
|
@ -13,13 +13,13 @@
|
|
|
|
<div class="col-8 align-self-center">
|
|
|
|
<div class="col-8 align-self-center">
|
|
|
|
<div class="row" style="height:58px;">
|
|
|
|
<div class="row" style="height:58px;">
|
|
|
|
<input v-on:change="changeHue($event.target.value)" type="range" min="0" step="1" max="255" name="hue" :value="hue" style="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%);" />
|
|
|
|
<input v-on:change="changeHue($event.target.value)" type="range" min="0" step="1" max="255" name="hue" :value="hue" style="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%);" />
|
|
|
|
<input v-on:change="changeSaturation($event.target.value)" type="range" min="0" step="1" max="254" name="saturation" :value="saturation" :style="'height:5px;margin:5px auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #fff 0%, '+color+' 100%);'"/>
|
|
|
|
<input v-on:change="changeSaturation($event.target.value)" type="range" min="0" step="1" max="254" name="saturation" :value="saturation" :style="'height:5px;margin:5px auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #fff 0%, '+color+' 100%);'" />
|
|
|
|
<input v-on:change="changeBrightness($event.target.value)" type="range" min="0" step="1" max="254" name="brightness" :value="brightness" style="height:5px;margin:5px auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #000 0%, #fff 100%);"/>
|
|
|
|
<input v-on:change="changeBrightness($event.target.value)" type="range" min="0" step="1" max="254" name="brightness" :value="brightness" style="height:5px;margin:5px auto;-webkit-appearance:none;background: -webkit-linear-gradient(left, #000 0%, #fff 100%);" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-2 align-self-center text-center">
|
|
|
|
<div class="col-2 align-self-center text-center">
|
|
|
|
<img style="height:32px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" src="config.apigateway+'/IoTCenter/images/on.png'" />
|
|
|
|
<img style="height:32px;" v-if="getDeviceDataValue(device,'状态')==='开'" v-on:click="execApi(device.number,'/Socket/Off')" :src="config.apigateway+'/IoTCenter/images/on.svg'" />
|
|
|
|
<img style="height:32px;" v-else="getDeviceDataValue(device,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" src="config.apigateway+'/IoTCenter/images/off.png'" />
|
|
|
|
<img style="height:32px;" v-else="getDeviceDataValue(device,'状态')==='关'" v-on:click="execApi(device.number,'/Socket/On')" :src="config.apigateway+'/IoTCenter/images/off.svg'" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|