|
|
@model Node
|
|
|
@{
|
|
|
ViewData["IsHomePage"] = true;
|
|
|
}
|
|
|
<div id="template">
|
|
|
<div class="row">
|
|
|
<div class="col-md-12">
|
|
|
<div v-if="model" class="callout callout-success">
|
|
|
<h4>{{model.Name}}</h4>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row" v-if="model">
|
|
|
<div class="col-md-6">
|
|
|
<template v-if="HasDevices('摄像头')">
|
|
|
<div class="row">
|
|
|
<div class="col-md-12">
|
|
|
<div class="box box-solid">
|
|
|
<select class="form-control" id="camera" v-on:change="CameraSelected">
|
|
|
<option v-for="c in GetDevices('摄像头')" :value="c.Number">{{c.DisplayName||c.Name}}</option>
|
|
|
</select>
|
|
|
<div style="width:100%;height:186px;margin:0;padding:0;background:#000;">
|
|
|
<video id="liveVideo" class="video" controls autoplay style="width:100%;max-width:100%;height:100%;"></video>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row" id="ptz">
|
|
|
<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>
|
|
|
</div>
|
|
|
<div class="box-body" style="height:178px;">
|
|
|
<table class="ptz">
|
|
|
<tr>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
<td><img class="ajax camera Up" src="/images/up.png" /></td>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td><img class="ajax camera Zoomin" src="/images/zoomin.png" /></td>
|
|
|
<td><img class="ajax camera Left" src="/images/left.png" /></td>
|
|
|
<td><img class="ajax camera Stop" src="/images/stop.png" /></td>
|
|
|
<td><img class="ajax camera Right" src="/images/right.png" /></td>
|
|
|
<td><img class="ajax camera Zoomout" src="/images/zoomout.png" /></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
<td><img class="ajax camera Down" src="/images/down.png" /></td>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-for="device in GetDevices('色暖灯')">
|
|
|
<div class="row">
|
|
|
<div class="col-md-12">
|
|
|
<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}}</h3>
|
|
|
<div class="box-tools pull-right">
|
|
|
<img v-if="GetDataValue(device.Number,'状态')=='开'" v-on:click="CallApi(device.Number,'/WarmLight/Off')" src="/images/on.png" />
|
|
|
<img v-if="GetDataValue(device.Number,'状态')=='关'" v-on:click="CallApi(device.Number,'/WarmLight/On')" src="/images/off.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<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="/WarmLight/SetBrightness" />
|
|
|
<div class="row">
|
|
|
<div class="col-md-2 col-xs-4">
|
|
|
<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,'亮度')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
<form method="get" action="/App/ExecApi">
|
|
|
<input type="hidden" name="Number" :value="device.Number" />
|
|
|
<input type="hidden" name="Method" value="/WarmLight/SetColor" />
|
|
|
<input type="hidden" name="Saturation" :value="GetDataValue(device.Number,'饱和度')" />
|
|
|
<div class="row">
|
|
|
<div class="col-md-2 col-xs-4">
|
|
|
<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,'色调')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-for="device in GetDevices('调色灯')">
|
|
|
<div class="row">
|
|
|
<div class="col-md-12">
|
|
|
<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>
|
|
|
</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" />
|
|
|
<img v-if="GetDataValue(device.Number,'状态')=='关'" v-on:click="CallApi(device.Number,'/ColorLight/On')" src="/images/off.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<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" />
|
|
|
<div class="row">
|
|
|
<div class="col-md-2 col-xs-4">
|
|
|
<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,'亮度')" />
|
|
|
</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>
|
|
|
</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,'色调')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-md-2 col-xs-4">
|
|
|
<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,'饱和度')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<template v-for="device in GetDevices('红外转发器')">
|
|
|
<div class="row">
|
|
|
<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="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>
|
|
|
<li><a href="#tab_4" data-toggle="tab">自定义</a></li>
|
|
|
</ul>
|
|
|
<div class="tab-content" style="min-height:176px;">
|
|
|
<div class="tab-pane active" id="tab_1">
|
|
|
<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">
|
|
|
<div class="col-md-2 col-xs-4"><lable style="line-height:40px;">电源</lable></div>
|
|
|
<div class="col-md-2 col-xs-8">
|
|
|
<div class="row" style="padding:5px 0">
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="power" type="radio" value="2" v-model="getCode1(GetDataValue(device.Number,'按键')).power" />开</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="power" type="radio" value="1" v-model="getCode1(GetDataValue(device.Number,'按键')).power" />关</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-2 col-xs-4"><lable style="line-height:40px;">模式</lable></div>
|
|
|
<div class="col-md-6 col-xs-8">
|
|
|
<div class="row" style="padding:5px 0">
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="pattern" type="radio" value="0" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" />制冷</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="pattern" type="radio" value="120" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" />自动</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="pattern" type="radio" value="240" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" />制热</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="pattern" type="radio" value="360" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" />抽湿</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="pattern" type="radio" value="480" v-model="getCode1(GetDataValue(device.Number,'按键')).pattern" />送风</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-md-2 col-xs-4"><span class="label1">温度</span></div>
|
|
|
<div class="col-md-10 col-xs-8">
|
|
|
<input 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">
|
|
|
<div class="col-md-2 col-xs-4"><lable style="line-height:40px;">风向</lable></div>
|
|
|
<div class="col-md-4 col-xs-8">
|
|
|
<div class="row" style="padding:5px 0">
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="direction" type="radio" value="0" v-model="getCode1(GetDataValue(device.Number,'按键')).direction" />任意</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="direction" type="radio" value="60" v-model="getCode1(GetDataValue(device.Number,'按键')).direction" />手动</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="direction" type="radio" value="75" v-model="getCode1(GetDataValue(device.Number,'按键')).direction" />自动</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-2 col-xs-4"><lable style="line-height:40px;">风量</lable></div>
|
|
|
<div class="col-md-4 col-xs-8">
|
|
|
<div class="row" style="padding:5px 0">
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="wind" type="radio" value="0" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" />自动</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="wind" type="radio" value="15" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" />高</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="wind" type="radio" value="30" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" />中</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="wind" type="radio" value="45" v-model="getCode1(GetDataValue(device.Number,'按键')).wind" />低</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="tab-pane" id="tab_2">
|
|
|
<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">
|
|
|
<div class="col-md-12 col-xs-12">
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="1" />POWR</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="2" />AV</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="3" />1</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="4" />2</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="5" />3</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="6" />4</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="7" />5</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="8" />6</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="9" />7</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="10" />8</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="11" />9</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="12" />0</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-md-12 col-xs-12">
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="13" />返回</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="14" />退出</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="15" />静音</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="16" />菜单</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="17" />音量+</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="18" />音量-</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="19" />上</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="20" />下</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="21" />左</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="22" />右</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-md-12 col-xs-12">
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="26" />快退</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="27" />播放</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="28" />快进</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="29" />录像</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="30" />暂停</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="31" />停止</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-md-12 col-xs-12">
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="23" />OK</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="24" />ch+</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="25" />ch-</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="32" />A</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="33" />B</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="34" />C</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="35" />D</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="tab-pane" id="tab_3">
|
|
|
<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">
|
|
|
<div class="col-md-12 col-xs-12">
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="1" />PW-ON</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="2" />PW-OFF</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="3" />1</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="4" />2</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="5" />3</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="6" />4</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="7" />5</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="8" />6</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="9" />7</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="10" />8</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="11" />9</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="12" />0</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-md-12 col-xs-12">
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="13" />CLEAR</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="14" />退出</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="15" />静音</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="16" />菜单</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="17" />音量+</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="18" />音量-</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="19" />上</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="20" />下</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="21" />左</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="22" />右</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-md-12 col-xs-12">
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="26" />鼠标L</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="27" />节能</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="28" />鼠标R</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="29" />局部放大+</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="30" />局部放大-</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="31" />冻结</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-md-12 col-xs-12">
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="23" />ENTER</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="24" />page+</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="25" />page-</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="32" />梯形修正</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="33" />图像</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="34" />ID SET</label>
|
|
|
<label class="btn btn-sm bg-olive"><input v-on:change="SendCode1($event)" name="Code" type="radio" value="35" />自动调整</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="tab-pane" id="tab_4">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<div class="row">
|
|
|
<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;" />批量操作</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>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box-body" style="height:178px;">
|
|
|
<button class="btn bg-olive margin ajax SwitchOn">开关开</button>
|
|
|
<button class="btn bg-olive margin ajax SwitchOff">开关关</button>
|
|
|
<button class="btn bg-olive margin ajax SocketOn">插座开</button>
|
|
|
<button class="btn bg-olive margin ajax SocketOff">插座关</button>
|
|
|
<br />
|
|
|
<button class="btn bg-olive margin ajax Scene" v-for="scene in model.Scenes" :data-scene-id="scene.Id">{{scene.Name}}</button>
|
|
|
<br />
|
|
|
<template v-for="device in model.Devices">
|
|
|
<button class="btn bg-olive margin ajax Command" v-for="command in device.Commands" :data-command-id="command.Id">{{command.Name}}</button>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row" v-for="device in GetDevices('粉尘检测器')" :data-device-number="device.Number">
|
|
|
<div class="col-md-6 col-xs-6">
|
|
|
<div class="box box-solid">
|
|
|
<div class="row">
|
|
|
<div class="col-md-4 col-xs-4">
|
|
|
<img src="/images/temperature.png" style="width:48px;height:48px;margin:19px;" />
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'温度','Description')==='适中'?'normal':'danger'">
|
|
|
{{GetDeviceDataValue(device.Number,'温度','Description')}}
|
|
|
</h3>
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">温度：{{GetDeviceDataValue(device.Number,'温度','Value')}}{{ GetDeviceDataValue(device.Number,'温度','Unit')}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-6 col-xs-6">
|
|
|
<div class="box box-solid">
|
|
|
<div class="row">
|
|
|
<div class="col-md-4 col-xs-4">
|
|
|
<img src="/images/humidity.png" style="width:48px;height:48px;margin:19px;" />
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'湿度','Description')==='适中'?'normal':'danger'">
|
|
|
{{GetDeviceDataValue(device.Number,'湿度','Description')}}
|
|
|
</h3>
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">湿度：{{GetDeviceDataValue(device.Number,'湿度','Value')}}{{ GetDeviceDataValue(device.Number,'温度','Unit')}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-6 col-xs-6">
|
|
|
<div class="box box-solid">
|
|
|
<div class="row">
|
|
|
<div class="col-md-4 col-xs-4">
|
|
|
<img src="/images/pm25.png" style="width:48px;height:48px;margin:19px;" />
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'PM2.5','Description')==='污染'?'danger':'normal'">
|
|
|
{{GetDeviceDataValue(device.Number,'PM2.5','Description')}}
|
|
|
</h3>
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">PM2.5：{{GetDeviceDataValue(device.Number,'PM2.5','Value')}}{{ GetDeviceDataValue(device.Number,'PM2.5','Unit')}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-6 col-xs-6">
|
|
|
<div class="box box-solid">
|
|
|
<div class="row">
|
|
|
<div class="col-md-4 col-xs-4">
|
|
|
<img src="/images/pm25.png" style="width:48px;height:48px;margin:19px;" />
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'PM10','Description')==='污染'?'danger':'normal'">
|
|
|
{{GetDeviceDataValue(device.Number,'PM10','Description')}}
|
|
|
</h3>
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">PM10：{{GetDeviceDataValue(device.Number,'PM10','Value')}}{{ GetDeviceDataValue(device.Number,'PM10','Unit')}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-6 col-xs-6" v-for="device in GetDevices('光强检测器')" :data-device-number="device.Number">
|
|
|
<div class="box box-solid">
|
|
|
<div class="row">
|
|
|
<div class="col-md-4 col-xs-4">
|
|
|
<img src="/images/light.png" style="width:48px;height:48px;margin:19px;" />
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'光照度','Description')==='适中'?'normal':'danger'">
|
|
|
{{GetDeviceDataValue(device.Number,'光照度','Description')}}
|
|
|
</h3>
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">{{device.DisplayName||device.Name}} 光照 {{GetDeviceDataValue(device.Number,'光照度','Value')}}{{ GetDeviceDataValue(device.Number,'光照度','Unit')}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-6 col-xs-6" v-for="device in GetDevices('红外感应器')" :data-device-number="device.Number">
|
|
|
<div class="box box-solid">
|
|
|
<div class="row">
|
|
|
<div class="col-md-4 col-xs-4">
|
|
|
<img src="/images/person.png" style="width:48px;height:48px;margin:19px;" />
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
<img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDeviceDataValue(device.Number,'状态','Value')==='警报'" />
|
|
|
<h3 style="line-height:100px;margin:0;" class="normal" v-else>正常</h3>
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">{{device.DisplayName||device.Name}} {{GetDeviceDataValue(device.Number,'状态','Value') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-6 col-xs-6" v-for="device in GetDevices('烟雾传感器')" :data-device-number="device.Number">
|
|
|
<div class="box box-solid">
|
|
|
<div class="row">
|
|
|
<div class="col-md-4 col-xs-4">
|
|
|
<img src="/images/smoke.png" style="width:48px;height:48px;margin:19px;" />
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
<img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDeviceDataValue(device.Number,'状态','Value')==='警报'" />
|
|
|
<h3 style="line-height:100px;margin:0;" class="normal" v-else>正常</h3>
|
|
|
</div>
|
|
|
<div class="col-md-4 col-xs-4" style="height:100px;">
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">{{device.DisplayName||device.Name}} {{GetDeviceDataValue(device.Number,'状态','Value') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<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>
|
|
|
<div class="box-tools pull-right">
|
|
|
{{GetDataValue(device.Number,'状态')}}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box-body">
|
|
|
<div class="row">
|
|
|
<div class="col-md-12">
|
|
|
<div class="row" style="text-align:center;padding:3px 0;">
|
|
|
<img style="height:32px;" v-on:click="CallApi(device.Number,'/Curtain/On')" src="/images/left.png" />
|
|
|
<img style="height:32px;" v-on:click="CallApi(device.Number,'/Curtain/Stop')" src="/images/stop.png" />
|
|
|
<img style="height:32px;" v-on:click="CallApi(device.Number,'/Curtain/Off')" src="/images/right.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<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>
|
|
|
</div>
|
|
|
<div class="box-body">
|
|
|
<div class="row">
|
|
|
<div class="col-md-12">
|
|
|
<div class="row" style="text-align:center;padding:3px 0;">
|
|
|
<img v-if="GetDataValue(device.Number,'L1状态')=='开'" v-on:click="CallApi(device.Number,'/Switch/L1Off')" src="/images/on.png" />
|
|
|
<img v-if="GetDataValue(device.Number,'L1状态')=='关'" v-on:click="CallApi(device.Number,'/Switch/L1On')" src="/images/off.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<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>
|
|
|
<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>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box-body">
|
|
|
<div class="row">
|
|
|
<div class="col-md-12">
|
|
|
<div class="row" style="text-align:center;padding:3px 0;">
|
|
|
<img v-if="GetDataValue(device.Number,'L1状态')=='开'" v-on:click="CallApi(device.Number,'/Switch2/L1Off')" src="/images/on.png" />
|
|
|
<img v-if="GetDataValue(device.Number,'L1状态')=='关'" v-on:click="CallApi(device.Number,'/Switch2/L1On')" src="/images/off.png" />
|
|
|
<img v-if="GetDataValue(device.Number,'L2状态')=='开'" v-on:click="CallApi(device.Number,'/Switch2/L2Off')" src="/images/on.png" />
|
|
|
<img v-if="GetDataValue(device.Number,'L2状态')=='关'" v-on:click="CallApi(device.Number,'/Switch2/L2On')" src="/images/off.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<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>
|
|
|
<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>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box-body">
|
|
|
<div class="row">
|
|
|
<div class="col-md-12">
|
|
|
<div class="row" style="text-align:center;padding:3px 0;">
|
|
|
<img v-if="GetDataValue(device.Number,'L1状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L1Off')" src="/images/on.png" />
|
|
|
<img v-if="GetDataValue(device.Number,'L1状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L1On')" src="/images/off.png" />
|
|
|
<img v-if="GetDataValue(device.Number,'L2状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L2Off')" src="/images/on.png" />
|
|
|
<img v-if="GetDataValue(device.Number,'L2状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L2On')" src="/images/off.png" />
|
|
|
<img v-if="GetDataValue(device.Number,'L3状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L3Off')" src="/images/on.png" />
|
|
|
<img v-if="GetDataValue(device.Number,'L3状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L3On')" src="/images/off.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<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>
|
|
|
<div class="box-tools pull-right">
|
|
|
{{parseFloat(GetDataValue(device.Number,'电量')).toFixed(2)}} kWh
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box-body">
|
|
|
<div class="row">
|
|
|
<div class="col-md-12">
|
|
|
<div class="row" style="text-align:center;padding:3px 0;">
|
|
|
<img v-if="GetDataValue(device.Number,'状态')==='开'" v-on:click="CallApi(device.Number,'/Socket/Off')" src="/images/on.png" :data-status="GetDataValue(device.Number,'状态')" />
|
|
|
<img v-if="GetDataValue(device.Number,'状态')==='关'" v-on:click="CallApi(device.Number,'/Socket/On')" src="/images/off.png" :data-status="GetDataValue(device.Number,'状态')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<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>
|
|
|
</div>
|
|
|
<div class="box-body">
|
|
|
<div class="row">
|
|
|
<div class="col-md-12">
|
|
|
<div class="row" style="text-align:center;padding:3px 0;">
|
|
|
<img v-if="GetDataValue(device.Number,'状态')==='开'" v-on:click="CallApi(device.Number,'/Socket/Off')" src="/images/on.png" :data-status="GetDataValue(device.Number,'状态')" />
|
|
|
<img v-if="GetDataValue(device.Number,'状态')==='关'" v-on:click="CallApi(device.Number,'/Socket/On')" src="/images/off.png" :data-status="GetDataValue(device.Number,'状态')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@section scripts{
|
|
|
<script src="/js/node.js"></script>
|
|
|
<script>
|
|
|
var debug = true;
|
|
|
loadData();
|
|
|
</script>
|
|
|
} |
