|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
<link rel="stylesheet" href="lib/framework7/css/framework7.bundle.min.css">
|
|
|
<link rel="stylesheet" href="css/framework7-icons.css">
|
|
|
<link rel="stylesheet" href="lib/toastr/toastr.min.css">
|
|
|
<link rel="stylesheet" href="css/app.css">
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="statusbar"></div>
|
|
|
<div id="app">
|
|
|
<f7-app :params="$root.f7params">
|
|
|
<f7-view main>
|
|
|
<f7-col>
|
|
|
<f7-preloader></f7-preloader>
|
|
|
</f7-col>
|
|
|
<f7-page>
|
|
|
<f7-navbar :title="model?model.Name:'节点'">
|
|
|
<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;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
|
|
|
.card-content img {
|
|
|
width: 32px;
|
|
|
}
|
|
|
</style>
|
|
|
<template v-if="model">
|
|
|
<!--场景-->
|
|
|
<div class="card">
|
|
|
<div class="card-header">场景</div>
|
|
|
<div class="card-content card-content-padding">
|
|
|
<div class="row">
|
|
|
<label class="button button-raised" v-for="scene in GetScenes()" v-on:click="CallScene(scene.Id)">{{scene.Name}}</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--环境-->
|
|
|
<div class="row">
|
|
|
<!--温湿度传感器-->
|
|
|
<template class="row" v-for="device in GetDevices('温湿度传感器')">
|
|
|
<div class="col-50">
|
|
|
<div class="card">
|
|
|
<div class="card-content card-content-padding">
|
|
|
<div class="row">
|
|
|
<div class="col-40" style="text-align:center;">
|
|
|
<img :src="iotCenter+'/images/temperature.png'" style="max-width:48px;margin-top:19px;" />
|
|
|
</div>
|
|
|
<div class="col-60" style="height:100px;">
|
|
|
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataAttr(device.Number,'温度','Description')==='适中'?'normal':'danger'">
|
|
|
{{GetDeviceDataAttr(device.Number,'温度','Description')}}
|
|
|
</h3>
|
|
|
</div>
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">温度：{{GetDeviceDataAttr(device.Number,'温度','Value')}}{{ GetDeviceDataAttr(device.Number,'温度','Unit')}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-50">
|
|
|
<div class="card">
|
|
|
<div class="card-content card-content-padding">
|
|
|
<div class="row">
|
|
|
<div class="col-40" style="text-align:center;">
|
|
|
<img :src="iotCenter+'/images/humidity.png'" style="max-width:48px;margin-top:19px;" />
|
|
|
</div>
|
|
|
<div class="col-60" style="height:100px;">
|
|
|
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataAttr(device.Number,'湿度','Description')==='适中'?'normal':'danger'">
|
|
|
{{GetDeviceDataAttr(device.Number,'湿度','Description')}}
|
|
|
</h3>
|
|
|
</div>
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">湿度：{{GetDeviceDataAttr(device.Number,'湿度','Value')}}{{ GetDeviceDataAttr(device.Number,'温度','Unit')}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<!--PM2.5感应器-->
|
|
|
<div class="col-50" v-for="device in GetDevices('PM2.5感应器')">
|
|
|
<div class="card">
|
|
|
<div class="card-content card-content-padding">
|
|
|
<div class="row">
|
|
|
<div class="col-40" style="text-align:center;">
|
|
|
<img :src="iotCenter+'/images/pm25.png'" style="max-width:48px;margin-top:19px;" />
|
|
|
</div>
|
|
|
<div class="col-60" style="height:100px;">
|
|
|
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataAttr(device.Number,'PM2.5','Description')==='污染'?'danger':'normal'">
|
|
|
{{GetDeviceDataAttr(device.Number,'PM2.5','Description')}}
|
|
|
</h3>
|
|
|
</div>
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">PM2.5：{{GetDeviceDataAttr(device.Number,'PM2.5','Value')}}{{ GetDeviceDataAttr(device.Number,'PM2.5','Unit')}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--光强检测器-->
|
|
|
<div class="col-50" v-for="device in GetDevices('光强检测器')">
|
|
|
<div class="card">
|
|
|
<div class="card-content card-content-padding">
|
|
|
<div class="row">
|
|
|
<div class="col-40" style="text-align:center;">
|
|
|
<img :src="iotCenter+'/images/light.png'" style="max-width:48px;margin-top:19px;" />
|
|
|
</div>
|
|
|
<div class="col-60" style="height:100px;">
|
|
|
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataAttr(device.Number,'光照度','Description')==='适中'?'normal':'danger'">
|
|
|
{{GetDeviceDataAttr(device.Number,'光照度','Description')}}
|
|
|
</h3>
|
|
|
</div>
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">光照 {{GetDeviceDataAttr(device.Number,'光照度','Value')}}{{ GetDeviceDataAttr(device.Number,'光照度','Unit')}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--人体感应器-->
|
|
|
<div class="col-50" v-for="device in GetDevices('人体感应器')">
|
|
|
<div class="card">
|
|
|
<div class="card-content card-content-padding">
|
|
|
<div class="row">
|
|
|
<div class="col-40" style="text-align:center;">
|
|
|
<img :src="iotCenter+'/images/person.png'" style="max-width:48px;margin-top:19px;" />
|
|
|
</div>
|
|
|
<div class="col-60" style="height:100px;">
|
|
|
<img :src="iotCenter+'/images/warn.png'" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDeviceDataAttr(device.Number,'状态','Value')==='警报'" />
|
|
|
<h3 style="line-height:100px;margin:0;" class="normal" v-else>正常</h3>
|
|
|
</div>
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">红外 {{GetDeviceDataAttr(device.Number,'状态','Value') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--烟雾报警器-->
|
|
|
<div class="col-50" v-for="device in GetDevices('烟雾报警器')">
|
|
|
<div class="card">
|
|
|
<div class="card-content card-content-padding">
|
|
|
<div class="row">
|
|
|
<div class="col-40" style="text-align:center;">
|
|
|
<img :src="iotCenter+'/images/smoke.png'" style="max-width:48px;margin-top:19px;" />
|
|
|
</div>
|
|
|
<div class="col-60" style="height:100px;">
|
|
|
<img :src="iotCenter+'/images/warn.png'" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDeviceDataAttr(device.Number,'状态','Value')==='警报'" />
|
|
|
<h3 style="line-height:100px;margin:0;" class="normal" v-else>正常</h3>
|
|
|
</div>
|
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">烟雾 {{GetDeviceDataAttr(device.Number,'状态','Value') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--摄像头-->
|
|
|
<template v-if="HasDevices('摄像头')">
|
|
|
<div class="card">
|
|
|
<div class="card-content">
|
|
|
<f7-list>
|
|
|
<f7-list-item title="摄像头" smart-select :smart-select-params="{openIn: 'sheet'}">
|
|
|
<select id="camera" @change="CameraSelected" style="width:100%;">
|
|
|
<option v-for="c in GetDevices('摄像头')" :value="c.Number">{{c.DisplayName||c.Name}}</option>
|
|
|
</select>
|
|
|
</f7-list-item>
|
|
|
</f7-list>
|
|
|
<div style="width:100%;margin:0;padding:0;background:#000;text-align:center;">
|
|
|
<video id="liveVideo" class="video" controls autoplay muted style="width:50vw;max-width:100%;height:100%;" v-on:volumechange="VolumeChange($event)"></video>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card" id="ptz">
|
|
|
<div class="card-header with-border">云台</div>
|
|
|
<div class="card-content" style="height:178px;text-align:center;">
|
|
|
<table class="ptz" style="margin:0 auto;">
|
|
|
<tr>
|
|
|
<td></td>
|
|
|
<td></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="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="iotCenter+'/images/down.png'" /></td>
|
|
|
<td></td>
|
|
|
<td></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<!--调色灯-->
|
|
|
<div class="card" v-for="device in GetDevices('调色灯')">
|
|
|
<div class="card-header">
|
|
|
{{device.DisplayName||device.Name}}
|
|
|
<img v-if="GetDataValue(device.Number,'状态')=='开'" v-on:click="CallApi(device.Number,'/ColorLight/Off')" :src="iotCenter+'/images/on.png'" />
|
|
|
<img v-if="GetDataValue(device.Number,'状态')=='关'" v-on:click="CallApi(device.Number,'/ColorLight/On')" :src="iotCenter+'/images/off.png'" />
|
|
|
</div>
|
|
|
<div class="card-content card-content-padding">
|
|
|
<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-20">
|
|
|
<label class="btn">色调</label>
|
|
|
</div>
|
|
|
|
|
|
<div class="col-80">
|
|
|
<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">
|
|
|
<label class="btn">饱和度</label>
|
|
|
</div>
|
|
|
<div class="col-80">
|
|
|
<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>
|
|
|
<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-20">
|
|
|
<label class="btn">亮度</label>
|
|
|
</div>
|
|
|
<div class="col-80">
|
|
|
<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)" 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)" 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)" 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)" 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)" 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)" 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)" 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">温度:{{getCode1(GetDataValue(device.Number,'按键')).temperature+15}}℃</label>
|
|
|
</div>
|
|
|
<div class="col-80">
|
|
|
<input v-on:click="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)" 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)" 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)" 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)" 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)" 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)" 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)" 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)" name="Code" type="radio" value="1" />POWR</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="2" />AV</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="3" />1</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="4" />2</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="5" />3</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="6" />4</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="7" />5</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="8" />6</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="9" />7</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="10" />8</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="11" />9</label>
|
|
|
<label class="button button-raised"><input v-on:click="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)" name="Code" type="radio" value="13" />返回</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="14" />退出</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="15" />静音</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="16" />菜单</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="17" />音量+</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="18" />音量-</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="19" />上</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="20" />下</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="21" />左</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="22" />右</label>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="26" />快退</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="27" />播放</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="28" />快进</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="29" />录像</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="30" />暂停</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="31" />停止</label>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="23" />OK</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="24" />ch+</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="25" />ch-</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="32" />A</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="33" />B</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="34" />C</label>
|
|
|
<label class="button button-raised"><input v-on:click="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)" name="Code" type="radio" value="1" />PW-ON</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="2" />PW-OFF</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="3" />1</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="4" />2</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="5" />3</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="6" />4</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="7" />5</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="8" />6</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="9" />7</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="10" />8</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="11" />9</label>
|
|
|
<label class="button button-raised"><input v-on:click="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)" name="Code" type="radio" value="13" />CLEAR</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="14" />退出</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="15" />静音</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="16" />菜单</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="17" />音量+</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="18" />音量-</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="19" />上</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="20" />下</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="21" />左</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="22" />右</label>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="26" />鼠标L</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="27" />节能</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="28" />鼠标R</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="29" />局部放大+</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="30" />局部放大-</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="31" />冻结</label>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="23" />ENTER</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="24" />page+</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="25" />page-</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="32" />梯形修正</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="33" />图像</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="34" />ID SET</label>
|
|
|
<label class="button button-raised"><input v-on:click="SendCode1($event)" name="Code" type="radio" value="35" />自动调整</label>
|
|
|
</div>
|
|
|
</form>
|
|
|
</f7-tab>
|
|
|
<f7-tab class="block block-strong" :id="'tab_4'+device.Number">
|
|
|
<form class="device ir type4" 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="5" />
|
|
|
<div class="row">
|
|
|
<label class="button button-raised" v-for="btn in GetButtons(device.Number)"><input v-on:click="SendCode1($event)" name="Code" type="radio" :value="btn.Value" />{{btn.Name}}</label>
|
|
|
</div>
|
|
|
</form>
|
|
|
</f7-tab>
|
|
|
</f7-tabs>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--电器-->
|
|
|
<div class="row">
|
|
|
<div class="col-50" v-for="device in GetDevices('一路开关')" :data-device-number="device.Number">
|
|
|
<div class="card">
|
|
|
<div>
|
|
|
<img :src="iotCenter+'/images/switch.png'" />
|
|
|
<label>{{device.DisplayName||device.Name}}</label>
|
|
|
</div>
|
|
|
<div class="card-content card-content-padding">
|
|
|
<img v-if="GetDataValue(device.Number,'L1状态')=='开'" v-on:click="CallApi(device.Number,'/Switch/L1Off')" :src="iotCenter+'/images/on.png'" />
|
|
|
<img v-if="GetDataValue(device.Number,'L1状态')=='关'" v-on:click="CallApi(device.Number,'/Switch/L1On')" :src="iotCenter+'/images/off.png'" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-50" v-for="device in GetDevices('二路开关')" :data-device-number="device.Number">
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
<div>
|
|
|
<img :src="iotCenter+'/images/switch2.png'" />
|
|
|
<label>{{device.DisplayName||device.Name}}</label>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<button class="button button-raised" v-on:click="CallApi(device.Number,'/Switch2/On')" :data-node-number="model.Number">一键开</button>
|
|
|
<button class="button button-raised" v-on:click="CallApi(device.Number,'/Switch2/Off')" :data-node-number="model.Number">一键关</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-content card-content-padding text-align-center">
|
|
|
<img v-if="GetDataValue(device.Number,'L1状态')=='开'" v-on:click="CallApi(device.Number,'/Switch2/L1Off')" :src="iotCenter+'/images/on.png'" />
|
|
|
<img v-if="GetDataValue(device.Number,'L1状态')=='关'" v-on:click="CallApi(device.Number,'/Switch2/L1On')" :src="iotCenter+'/images/off.png'" />
|
|
|
<img v-if="GetDataValue(device.Number,'L2状态')=='开'" v-on:click="CallApi(device.Number,'/Switch2/L2Off')" :src="iotCenter+'/images/on.png'" />
|
|
|
<img v-if="GetDataValue(device.Number,'L2状态')=='关'" v-on:click="CallApi(device.Number,'/Switch2/L2On')" :src="iotCenter+'/images/off.png'" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-50" v-for="device in GetDevices('三路开关')" :data-device-number="device.Number">
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
<div>
|
|
|
<img :src="iotCenter+'/images/switch3.png'" />
|
|
|
<label>{{device.DisplayName||device.Name}}</label>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<label class="button button-raised" v-on:click="CallApi(device.Number,'/Switch3/On')" :data-node-number="model.Number">一键开</label>
|
|
|
<label class="button button-raised" v-on:click="CallApi(device.Number,'/Switch3/Off')" :data-node-number="model.Number">一键关</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-content card-content-padding text-align-center">
|
|
|
<img v-if="GetDataValue(device.Number,'L1状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L1Off')" :src="iotCenter+'/images/on.png'" />
|
|
|
<img v-if="GetDataValue(device.Number,'L1状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L1On')" :src="iotCenter+'/images/off.png'" />
|
|
|
<img v-if="GetDataValue(device.Number,'L2状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L2Off')" :src="iotCenter+'/images/on.png'" />
|
|
|
<img v-if="GetDataValue(device.Number,'L2状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L2On')" :src="iotCenter+'/images/off.png'" />
|
|
|
<img v-if="GetDataValue(device.Number,'L3状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L3Off')" :src="iotCenter+'/images/on.png'" />
|
|
|
<img v-if="GetDataValue(device.Number,'L3状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L3On')" :src="iotCenter+'/images/off.png'" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-50" v-for="device in GetDevices('插座')" :data-device-number="device.Number">
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
<div><img :src="iotCenter+'/images/socket.png'" /><label>{{device.DisplayName||device.Name}}</label></div>
|
|
|
</div>
|
|
|
<div class="card-content card-content-padding text-align-center">
|
|
|
<img v-if="GetDataValue(device.Number,'状态')==='开'" v-on:click="CallApi(device.Number,'/Socket/Off')" :src="iotCenter+'/images/on.png'" :data-status="GetDataValue(device.Number,'状态')" />
|
|
|
<img v-if="GetDataValue(device.Number,'状态')==='关'" v-on:click="CallApi(device.Number,'/Socket/On')" :src="iotCenter+'/images/off.png'" :data-status="GetDataValue(device.Number,'状态')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-50" v-for="device in GetDevices('智能插座')" :data-device-number="device.Number">
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
<div><img :src="iotCenter+'/images/socket.png'" /><label>{{device.DisplayName||device.Name}}</label></div>
|
|
|
<div class="row">
|
|
|
{{parseFloat(GetDataValue(device.Number,'电量')).toFixed(2)}} kWh
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-content card-content-padding text-align-center">
|
|
|
<img v-if="GetDataValue(device.Number,'状态')==='开'" v-on:click="CallApi(device.Number,'/Socket/Off')" :src="iotCenter+'/images/on.png'" :data-status="GetDataValue(device.Number,'状态')" />
|
|
|
<img v-if="GetDataValue(device.Number,'状态')==='关'" v-on:click="CallApi(device.Number,'/Socket/On')" :src="iotCenter+'/images/off.png'" :data-status="GetDataValue(device.Number,'状态')" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-50" v-for="device in GetDevices('窗帘电机')" :data-device-number="device.Number">
|
|
|
<div class="card">
|
|
|
<div class="card-header">
|
|
|
<div><img :src="iotCenter+'/images/curtain.png'" /><label>{{device.DisplayName||device.Name}}</label></div>
|
|
|
<div class="row">
|
|
|
{{GetDataValue(device.Number,'状态')}}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-content card-content-padding text-align-center">
|
|
|
<img v-on:click="CallApi(device.Number,'/Curtain/On')" :src="iotCenter+'/images/left.png'" />
|
|
|
<img v-on:click="CallApi(device.Number,'/Curtain/Stop')" :src="iotCenter+'/images/stop.png'" />
|
|
|
<img v-on:click="CallApi(device.Number,'/Curtain/Off')" :src="iotCenter+'/images/right.png'" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-50" v-for="device in GetChartDevices()">
|
|
|
<div class="card" style="height:auto;">
|
|
|
<div class="card-header">
|
|
|
<div class="card-title">
|
|
|
{{device.DisplayName}}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<canvas class="chart" :id="device.Number"></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
</f7-page>
|
|
|
</f7-view>
|
|
|
</f7-app>
|
|
|
</div>
|
|
|
<script type="text/javascript" src="lib/signalr/signalr.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/axios/axios.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/urijs/URI.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/linq/linq.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/jquery-validation/jquery.validate.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/vue/vue.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/framework7/js/framework7.bundle.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/framework7/js/framework7-vue.bundle.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/flv.js/flv.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/chart.js/Chart.bundle.min.js"></script>
|
|
|
<script type="text/javascript" src="lib/toastr/toastr.min.js"></script>
|
|
|
<script type="text/javascript" src="js/page.js"></script>
|
|
|
<script type="text/javascript" src="js/node.js"></script>
|
|
|
</body>
|
|
|
</html> |
