Former-commit-id: 58b9d872429ae31048a09845c030e64b9b128cfc
TangShanKaiPing
wanggang 6 years ago
parent 2b9f758e21
commit dc25705aee

@ -59,6 +59,10 @@
right: 0;
}
.ir label input {
display: none;
}
.danger {
color: red;
}
@ -76,10 +80,6 @@
height: 53px;
}
.ir label input {
display: none;
}
.ir td {
width: 11%;
text-align: center;
@ -89,17 +89,6 @@
table-layout: fixed;
}
label.button {
display: inline-block;
padding: 0 10px;
line-height: 30px;
background-color: cadetblue;
color: #FFF;
vertical-align: middle;
border-radius: 15px;
text-align: center;
}
input[type='range'] {
-webkit-appearance: none;
background: cadetblue;

Binary file not shown.

@ -7,48 +7,6 @@
<link rel="stylesheet" href="lib/framework7/css/framework7.bundle.min.css">
<link rel="stylesheet" href="css/framework7-icons.css">
<link rel="stylesheet" href="css/app.css">
<style>
table.ptz {
padding-top: 7px;
}
table.ptz td {
padding: 0 12px;
}
input[type='range'] {
-webkit-appearance: none;
display: inline-block;
width: 100%;
height: 15px;
margin: 10px 0;
}
.hue {
background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,#00F 66.66%, #F0F 83.33%, #F00 100%);
}
.saturation {
background: -webkit-linear-gradient(left, #fff 0%, green 100%);
}
.brightness {
background: -webkit-linear-gradient(left, #000 0%, #fff 100%);
}
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%;
}
.card-header img {
height: 24px;
}
</style>
</head>
<body>
<div class="statusbar"></div>
@ -60,13 +18,111 @@
<a href="nodes.html" slot="nav-left" class="link external"><i class="icon icon-back"></i></a>
</f7-navbar>
<div id="template">
<style>
table.ptz {
padding-top: 7px;
}
table.ptz td {
padding: 0 12px;
}
/*input range*/
input[type='range'] {
-webkit-appearance: none;
background: cadetblue;
display: inline-block;
width: 100%;
height: 15px;
margin: 10px 0;
}
input[type='range'].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'].saturation {
background: -webkit-linear-gradient(left, #fff 0%, green 100%);
}
input[type='range'].brightness {
background: -webkit-linear-gradient(left, #000 0%, #fff 100%);
}
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%;
}
/*input radio*/
input.switch {
display: none;
}
label.switch {
display: inline-block;
width: 60px;
height: 30px;
border-radius: 30px;
}
label.switch.on {
background-color: green;
}
label.switch.off {
background-color: grey;
}
label.switch.on::before {
content: '';
display: block;
width: 30px;
height: 30px;
border-radius: 30px;
background-color: white;
position: absolute;
left: 0;
}
label.switch.off::after {
content: '';
display: block;
width: 30px;
height: 30px;
border-radius: 30px;
background-color: white;
position: absolute;
right: 0;
}
.ir label input {
display: none;
}
.ir label {
margin-top: 8px;
}
label.btn {
display: inline-block;
line-height: 28px;
}
.card-header img {
height: 24px;
}
</style>
<template v-if="model">
<!--场景-->
<div class="card">
<div class="card-header">场景</div>
<div class="card-content card-content-padding">
<div class="row">
<button class="col button button-large button-raised" v-for="scene in model.Scenes" :data-scene-id="scene.Id">{{scene.Name}}</button>
<label class="button button-raised" v-for="scene in model.Scenes" :data-scene-id="scene.Id">{{scene.Name}}</label>
</div>
</div>
</div>
@ -238,19 +294,19 @@
<input type="hidden" name="Method" value="/ColorLight/SetColor" />
<div class="row">
<div class="col-20">
<span class="label1">色调</span>
<label class="btn">色调</label>
</div>
<div class="col-80">
<input type="range" class="hue" name="Hue" min="0" max="255" step="1" :value="GetDataValue(device.Number,'色调')" v-on:change="AjaxSubmit($event,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>
<div class="row">
<div class="col-20">
<span class="label1">饱和度</span>
<label class="btn">饱和度</label>
</div>
<div class="col-80">
<input class="saturation" v-on:change="AjaxSubmit($event,device.Number,'饱和度')" type="range" min="0" step="1" max="254" name="Saturation" :value="GetDataValue(device.Number,'饱和度')" />
<input v-on:change="AjaxSubmit($event,device.Number,'饱和度')" type="range" min="0" step="1" max="254" name="Saturation" class="saturation" :value="GetDataValue(device.Number,'饱和度')" />
</div>
</div>
</form>
@ -259,15 +315,171 @@
<input type="hidden" name="Method" value="/ColorLight/SetBrightness" />
<div class="row">
<div class="col-20">
<span class="label1">亮度</span>
<label class="btn">亮度</label>
</div>
<div class="col-80">
<input class="brightness" v-on:change="AjaxSubmit($event,device.Number,'亮度')" type="range" min="0" step="1" max="254" name="Brightness" :value="GetDataValue(device.Number,'亮度')" />
<input v-on:change="AjaxSubmit($event,device.Number,'亮度')" type="range" min="0" step="1" max="254" name="Brightness" class="brightness" :value="GetDataValue(device.Number,'亮度')" />
</div>
</div>
</form>
</div>
</div>
<!--红外转发器-->
<div class="card" v-for="device in GetDevices('红外转发器')">
<div class="card-header">
{{device.DisplayName||device.Name}}
</div>
<div class="card-content card-content-padding">
<f7-toolbar tabbar bottom>
<f7-link :tab-link="'#tab_1'+device.Number" tab-link-active>空调</f7-link>
<f7-link :tab-link="'#tab_2'+device.Number">电视</f7-link>
<f7-link :tab-link="'#tab_3'+device.Number">图影仪</f7-link>
<f7-link :tab-link="'#tab_4'+device.Number">自定义</f7-link>
</f7-toolbar>
<f7-tabs class="tab-content" style="min-height:176px;">
<f7-tab class="block block-strong" tab-active :id="'tab_1'+device.Number">
<form class="device ir type1" method="get" action="/App/ExecApi">
<input type="hidden" name="Number" :value="device.Number" />
<input type="hidden" name="Method" value="/Ir/Send" />
<input type="hidden" name="Type" value="1" />
<input type="hidden" name="Code" :value="GetDataValue(device.Number,'按键')" />
<div class="row">
<label class="btn">电源</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="power" type="radio" value="2" v-model="getCode1(GetDataValue(device.Number,'按键')).power" /></label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="power" type="radio" value="1" v-model="getCode1(GetDataValue(device.Number,'按键')).power" /></label>
<label class="btn">模式</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="pattern" type="radio" value="0" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" />制冷</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="pattern" type="radio" value="120" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" />自动</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="pattern" type="radio" value="240" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" />制热</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="pattern" type="radio" value="360" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" />抽湿</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="pattern" type="radio" value="480" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" />送风</label>
</div>
<div class="row">
<div class="col-20 row">
<label class="btn">温度</label>
</div>
<div class="col-80">
<input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="temperature" type="range" step="1" min="1" max="15" :value="getCode1(GetDataValue(device.Number,'按键')).temperature" />
</div>
</div>
<div class="row">
<label class="btn">风向</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="direction" type="radio" value="0" v-model="getCode1(GetDataValue(device.Number,'按键')).direction" />任意</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="direction" type="radio" value="60" v-model="getCode1(GetDataValue(device.Number,'按键')).direction" />手动</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="direction" type="radio" value="75" v-model="getCode1(GetDataValue(device.Number,'按键')).direction" />自动</label>
<label class="btn">风量</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="wind" type="radio" value="0" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" />自动</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="wind" type="radio" value="15" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" /></label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="wind" type="radio" value="30" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" /></label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="wind" type="radio" value="45" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" /></label>
</div>
</form>
</f7-tab>
<f7-tab class="block block-strong" :id="'tab_2'+device.Number">
<form class="device ir type2" method="get" action="/App/ExecApi">
<input type="hidden" name="Number" :value="device.Number" />
<input type="hidden" name="Method" value="/Ir/Send" />
<input type="hidden" name="Type" value="2" />
<div class="row">
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="1" />POWR</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="2" />AV</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="3" />1</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="4" />2</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="5" />3</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="6" />4</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="7" />5</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="8" />6</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="9" />7</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="10" />8</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="11" />9</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="12" />0</label>
</div>
<div class="row">
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="13" />返回</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="14" />退出</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="15" />静音</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="16" />菜单</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="17" />音量+</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="18" />音量-</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="19" /></label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="20" /></label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="21" /></label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="22" /></label>
</div>
<div class="row">
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="26" />快退</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="27" />播放</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="28" />快进</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="29" />录像</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="30" />暂停</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="31" />停止</label>
</div>
<div class="row">
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="23" />OK</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="24" />ch+</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="25" />ch-</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="32" />A</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="33" />B</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="34" />C</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="35" />D</label>
</div>
</form>
</f7-tab>
<f7-tab class="block block-strong" :id="'tab_3'+device.Number">
<form class="device ir type3" method="get" action="/App/ExecApi">
<input type="hidden" name="Number" :value="device.Number" />
<input type="hidden" name="Method" value="/Ir/Send" />
<input type="hidden" name="Type" value="3" />
<div class="row">
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="1" />PW-ON</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="2" />PW-OFF</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="3" />1</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="4" />2</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="5" />3</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="6" />4</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="7" />5</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="8" />6</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="9" />7</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="10" />8</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="11" />9</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="12" />0</label>
</div>
<div class="row">
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="13" />CLEAR</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="14" />退出</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="15" />静音</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="16" />菜单</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="17" />音量+</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="18" />音量-</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="19" /></label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="20" /></label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="21" /></label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="22" /></label>
</div>
<div class="row">
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="26" />鼠标L</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="27" />节能</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="28" />鼠标R</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="29" />局部放大+</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="30" />局部放大-</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="31" />冻结</label>
</div>
<div class="row">
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="23" />ENTER</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="24" />page+</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="25" />page-</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="32" />梯形修正</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="33" />图像</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="34" />ID SET</label>
<label class="button button-raised"><input v-on:click="SendCode1($event)" v-on:change="SendCode1($event)" name="Code" type="radio" value="35" />自动调整</label>
</div>
</form>
</f7-tab>
<f7-tab class="block block-strong" :id="'tab_4'+device.Number">
</f7-tab>
</f7-tabs>
</div>
</div>
</template>
</div>
</f7-page>

Binary file not shown.
Loading…
Cancel
Save