|
|
|
@ -5,7 +5,8 @@
|
|
|
|
|
<div id="template">
|
|
|
|
|
<style>
|
|
|
|
|
h3 img {
|
|
|
|
|
height: 16px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
margin: -8px 8px -8px -8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-tools img, .box-body img {
|
|
|
|
@ -106,37 +107,34 @@
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type=range] {
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
input[type='range'] {
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
height: 50px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 15px;
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type=range]::-webkit-slider-runnable-track {
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: 5px;
|
|
|
|
|
background: #ddd;
|
|
|
|
|
border: none;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
.hue {
|
|
|
|
|
background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,#00F 66.66%, #F0F 83.33%, #F00 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type=range]::-webkit-slider-thumb {
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
border: none;
|
|
|
|
|
height: 20px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
border-radius: 30%;
|
|
|
|
|
background-color: #3d9970 !important;
|
|
|
|
|
margin-top: -6px;
|
|
|
|
|
}
|
|
|
|
|
.saturation {
|
|
|
|
|
background: -webkit-linear-gradient(left, #fff 0%, green 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type=range]:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
.brightness {
|
|
|
|
|
background: -webkit-linear-gradient(left, #000 0%, #fff 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type=range]:focus::-webkit-slider-runnable-track {
|
|
|
|
|
background: #ccc;
|
|
|
|
|
}
|
|
|
|
|
input[type='range']::-webkit-slider-thumb {
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
height: 30px;
|
|
|
|
|
width: 30px;
|
|
|
|
|
border: 15px solid rgba(230,230,230,0.8);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
canvas {
|
|
|
|
|
width: 100%;
|
|
|
|
@ -153,7 +151,7 @@
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title"><img src="/images/batch.png" style="height:16px;margin-right:10px;" />{{model.Name}}</h3>
|
|
|
|
|
<h3 class="box-title"><img src="/images/batch.png" />{{model.Name}}</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-body">
|
|
|
|
|
<button class="btn bg-olive margin ajax Scene" v-for="scene in model.Scenes" :data-scene-id="scene.Id">{{scene.Name}}</button>
|
|
|
|
@ -291,28 +289,28 @@
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title"><img src="/images/ptz.png" style="height:16px;margin-right:10px;" />云台操作</h3>
|
|
|
|
|
<h3 class="box-title"><img src="/images/ptz.png" />云台操作</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-body" style="height:178px;">
|
|
|
|
|
<table class="ptz" style="width:100%;">
|
|
|
|
|
<tr>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td><img class="ajax camera" data-cmd="Up" :src="server+'/IoTCenter/images/up.png'" /></td>
|
|
|
|
|
<td><img class="ajax camera" data-cmd="Up" :src="iotCenter+'/images/up.png'" /></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><img class="ajax camera" data-cmd="Zoomin" :src="server+'/IoTCenter/images/zoomin.png'" /></td>
|
|
|
|
|
<td><img class="ajax camera" data-cmd="Left" :src="server+'/IoTCenter/images/left.png'" /></td>
|
|
|
|
|
<td><img class="ajax camera" data-cmd="Stop" :src="server+'/IoTCenter/images/stop.png'" /></td>
|
|
|
|
|
<td><img class="ajax camera" data-cmd="Right" :src="server+'/IoTCenter/images/right.png'" /></td>
|
|
|
|
|
<td><img class="ajax camera" data-cmd="Zoomout" :src="server+'/IoTCenter/images/zoomout.png'" /></td>
|
|
|
|
|
<td><img class="ajax camera" data-cmd="Zoomin" :src="iotCenter+'/images/zoomin.png'" /></td>
|
|
|
|
|
<td><img class="ajax camera" data-cmd="Left" :src="iotCenter+'/images/left.png'" /></td>
|
|
|
|
|
<td><img class="ajax camera" data-cmd="Stop" :src="iotCenter+'/images/stop.png'" /></td>
|
|
|
|
|
<td><img class="ajax camera" data-cmd="Right" :src="iotCenter+'/images/right.png'" /></td>
|
|
|
|
|
<td><img class="ajax camera" data-cmd="Zoomout" :src="iotCenter+'/images/zoomout.png'" /></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td><img class="ajax camera" data-cmd="Down" :src="server+'/IoTCenter/images/down.png'" /></td>
|
|
|
|
|
<td><img class="ajax camera" data-cmd="Down" :src="iotCenter+'/images/down.png'" /></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
</tr>
|
|
|
|
@ -330,10 +328,7 @@
|
|
|
|
|
<div class="box box-solid btns">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title">
|
|
|
|
|
<img src="/images/light2.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}<span :style="{
|
|
|
|
|
display:'inline-block',
|
|
|
|
|
color:'#eee',
|
|
|
|
|
backgroundColor:getLightColor(GetDataValue(device.Number,'色调'),GetDataValue(device.Number,'饱和度'),GetDataValue(device.Number,'亮度'))}">{{getLightColor(GetDataValue(device.Number,'色调'),GetDataValue(device.Number,'饱和度'),GetDataValue(device.Number,'亮度'))}}</span>
|
|
|
|
|
<img src="/images/light.png" />{{device.DisplayName||device.Name}}
|
|
|
|
|
</h3>
|
|
|
|
|
<div class="box-tools pull-right">
|
|
|
|
|
<img v-if="GetDataValue(device.Number,'状态')=='开'" v-on:click="CallApi(device.Number,'/ColorLight/Off')" src="/images/on.png" />
|
|
|
|
@ -343,33 +338,33 @@
|
|
|
|
|
<div class="box-body" style="height:178px;">
|
|
|
|
|
<form method="get" action="/App/ExecApi">
|
|
|
|
|
<input type="hidden" name="Number" :value="device.Number" />
|
|
|
|
|
<input type="hidden" name="Method" value="/ColorLight/SetBrightness" />
|
|
|
|
|
<input type="hidden" name="Method" value="/ColorLight/SetColor" />
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-2 col-xs-4">
|
|
|
|
|
<span class="label1">亮度</span>
|
|
|
|
|
<span class="label1">色调</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-10 col-xs-8">
|
|
|
|
|
<input v-on:change="AjaxSubmit($event,device.Number,'亮度')" type="range" min="0" step="1" max="255" name="Brightness" :value="GetDataValue(device.Number,'亮度')" />
|
|
|
|
|
<input v-on:change="AjaxSubmit($event,device.Number,'色调')" type="range" min="0" step="1" max="255" name="Hue" class="hue" :value="GetDataValue(device.Number,'色调')" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
<form method="get" action="/App/ExecApi">
|
|
|
|
|
<input type="hidden" name="Number" :value="device.Number" />
|
|
|
|
|
<input type="hidden" name="Method" value="/ColorLight/SetColor" />
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-2 col-xs-4">
|
|
|
|
|
<span class="label1">色调</span>
|
|
|
|
|
<span class="label1">饱和度</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-10 col-xs-8">
|
|
|
|
|
<input v-on:change="AjaxSubmit($event,device.Number,'色调')" type="range" min="0" step="1" max="255" name="Hue" :value="GetDataValue(device.Number,'色调')" />
|
|
|
|
|
<input v-on:change="AjaxSubmit($event,device.Number,'饱和度')" type="range" min="0" step="1" max="255" name="Saturation" class="saturation" :value="GetDataValue(device.Number,'饱和度')" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
<form method="get" action="/App/ExecApi">
|
|
|
|
|
<input type="hidden" name="Number" :value="device.Number" />
|
|
|
|
|
<input type="hidden" name="Method" value="/ColorLight/SetBrightness" />
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-2 col-xs-4">
|
|
|
|
|
<span class="label1">饱和度</span>
|
|
|
|
|
<span class="label1">亮度</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-10 col-xs-8">
|
|
|
|
|
<input v-on:change="AjaxSubmit($event,device.Number,'饱和度')" type="range" min="0" step="1" max="255" name="Saturation" :value="GetDataValue(device.Number,'饱和度')" />
|
|
|
|
|
<input v-on:change="AjaxSubmit($event,device.Number,'亮度')" type="range" min="0" step="1" max="255" name="Brightness" class="brightness" :value="GetDataValue(device.Number,'亮度')" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
@ -384,7 +379,7 @@
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
<div class="nav-tabs-custom">
|
|
|
|
|
<ul class="nav nav-tabs">
|
|
|
|
|
<li class="header"><img src="/images/control.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</li>
|
|
|
|
|
<li class="header"><img src="/images/control.png" style="height:32px;margin-right:10px;" />{{device.DisplayName||device.Name}}</li>
|
|
|
|
|
<li class="active"><a href="#tab_1" data-toggle="tab">空调</a></li>
|
|
|
|
|
<li><a href="#tab_2" data-toggle="tab">电视</a></li>
|
|
|
|
|
<li><a href="#tab_3" data-toggle="tab">图影仪</a></li>
|
|
|
|
@ -572,7 +567,7 @@
|
|
|
|
|
<div class="col-md-12" v-if="model.Scenes&&model.Scenes.length>0">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title"><img src="/images/batch.png" style="height:16px;margin-right:10px;" />批量操作</h3>
|
|
|
|
|
<h3 class="box-title"><img src="/images/batch.png" />批量操作</h3>
|
|
|
|
|
<div class="box-tools pull-right">
|
|
|
|
|
<button class="btn btn-sm bg-olive ajax NodePowerOn" :data-node-number="model.Number">一键开</button>
|
|
|
|
|
<button class="btn btn-sm bg-olive ajax NodePowerOff" :data-node-number="model.Number">一键关</button>
|
|
|
|
@ -592,7 +587,7 @@
|
|
|
|
|
<div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('一路开关')" :data-device-number="device.Number">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title"><img src="/images/switch.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<h3 class="box-title"><img src="/images/switch.png" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-body">
|
|
|
|
|
<div class="row">
|
|
|
|
@ -609,7 +604,7 @@
|
|
|
|
|
<div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('二路开关')" :data-device-number="device.Number">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title"><img src="/images/switch.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<h3 class="box-title"><img src="/images/switch.png" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<div class="box-tools pull-right">
|
|
|
|
|
<button class="btn btn-sm bg-olive" v-on:click="CallApi(device.Number,'/Switch3/On')" :data-node-number="model.Number">一键开</button>
|
|
|
|
|
<button class="btn btn-sm bg-olive" v-on:click="CallApi(device.Number,'/Switch3/Off')" :data-node-number="model.Number">一键关</button>
|
|
|
|
@ -632,7 +627,7 @@
|
|
|
|
|
<div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('三路开关')" :data-device-number="device.Number">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title"><img src="/images/switch2.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<h3 class="box-title"><img src="/images/switch2.png" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<div class="box-tools pull-right">
|
|
|
|
|
<button class="btn btn-sm bg-olive" v-on:click="CallApi(device.Number,'/Switch3/On')" :data-node-number="model.Number">一键开</button>
|
|
|
|
|
<button class="btn btn-sm bg-olive" v-on:click="CallApi(device.Number,'/Switch3/Off')" :data-node-number="model.Number">一键关</button>
|
|
|
|
@ -657,7 +652,7 @@
|
|
|
|
|
<div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('插座')" :data-device-number="device.Number">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title"><img src="/images/socket.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<h3 class="box-title"><img src="/images/socket.png" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-body">
|
|
|
|
|
<div class="row">
|
|
|
|
@ -674,7 +669,7 @@
|
|
|
|
|
<div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('智能插座')" :data-device-number="device.Number">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title"><img src="/images/socket.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<h3 class="box-title"><img src="/images/socket.png" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<div class="box-tools pull-right">
|
|
|
|
|
{{parseFloat(GetDataValue(device.Number,'电量')).toFixed(2)}} kWh
|
|
|
|
|
</div>
|
|
|
|
@ -694,7 +689,7 @@
|
|
|
|
|
<div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('窗帘')" :data-device-number="device.Number">
|
|
|
|
|
<div class="box box-solid">
|
|
|
|
|
<div class="box-header with-border">
|
|
|
|
|
<h3 class="box-title"><img src="/images/curtain.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<h3 class="box-title"><img src="/images/curtain.png" />{{device.DisplayName||device.Name}}</h3>
|
|
|
|
|
<div class="box-tools pull-right">
|
|
|
|
|
{{GetDataValue(device.Number,'状态')}}
|
|
|
|
|
</div>
|
|
|
|
|