wanggang
/
iot
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source 
Former-commit-id: 70aff9c0ca83d94c4f9a3735a2c4699be017d3d4
TangShanKaiPing
wanggang 6 years ago
parent 5f44350bce
commit fb56ce6edd
4 changed files with 440 additions and 319 deletions
Show Stats Download Patch File Download Diff File

727
projects/IoTCenter/Views/Home/Node.cshtml
Unescape View File

@ -7,114 +7,336 @@
h3 img { h3 img {
height: 16px; height: 16px;
} }
</style>
<style>
.box-tools img, .box-body img { .box-tools img, .box-body img {
height: 32px; height: 32px;
cursor: pointer; cursor: pointer;
} }
.content-wrapper {
background-color: lightblue;
}
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;
}
.danger {
color: red;
}
.normal {
color: green;
}
.ptz {
width: 100%;
}
.ptz td {
text-align: center;
height: 53px;
}
form .label1 {
display: inline-block;
padding-right: 5px;
line-height: 50px;
vertical-align: middle;
}
.ir label input {
display: none;
}
.ir td {
width: 11%;
text-align: center;
}
.keyboard {
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] {
padding: 0 10px;
-webkit-appearance: none;
height: 50px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 20px;
width: 20px;
border-radius: 30%;
background-color: #3d9970 !important;
margin-top: -6px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
canvas {
width: 100%;
height: 215px;
}
.ir label {
margin: 5px 0;
}
</style> </style>
<div class="row"> <template v-if="model">
<div class="col-md-12"> <div class="row">
<div v-if="model" class="callout callout-success"> <!--场景-->
<h4>{{model.Name}}</h4> <div class="col-md-12">
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title"><img src="/images/batch.png" style="height:16px;margin-right:10px;" />{{model.Name}}</h3>
</div>
<div class="box-body">
<button class="btn bg-olive margin ajax Scene" v-for="scene in model.Scenes" :data-scene-id="scene.Id">{{scene.Name}}</button>
</div>
</div>
</div> </div>
</div> <!--环境-->
</div> <template v-for="device in GetDevices('温湿度传感器')">
<div class="row" v-if="model"> <div class="col-md-3 col-xs-6">
<div class="col-md-6"> <div class="box box-solid">
<template v-if="HasDevices('摄像头')"> <div class="row">
<div class="row"> <div class="col-md-4 col-xs-4" style="text-align:center;">
<div class="col-md-12"> <img src="/images/temperature.png" style="max-width:48px;margin-top:19px;" />
<div class="box box-solid"> </div>
<select class="form-control" id="camera" v-on:change="CameraSelected"> <div class="col-md-8 col-xs-8" style="height:100px;">
<option v-for="c in GetDevices('摄像头')" :value="c.Number">{{c.DisplayName||c.Name}}</option> <h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'温度','Description')==='适中'?'normal':'danger'">
</select> {{GetDeviceDataValue(device.Number,'温度','Description')}}
<div style="width:100%;height:186px;margin:0;padding:0;background:#000;"> </h3>
<video id="liveVideo" class="video" controls autoplay style="width:100%;max-width:100%;height:100%;"></video>
</div> </div>
</div> </div>
<div class="row">
<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>
<div class="row" id="ptz"> <div class="col-md-3 col-xs-6">
<div class="col-md-12"> <div class="box box-solid">
<div class="box box-solid"> <div class="row">
<div class="box-header with-border"> <div class="col-md-4 col-xs-4" style="text-align:center;">
<h3 class="box-title"><img src="/images/ptz.png" style="height:16px;margin-right:10px;" />云台操作</h3> <img src="/images/humidity.png" style="max-width:48px;margin-top:19px;" />
</div> </div>
<div class="box-body" style="height:178px;"> <div class="col-md-8 col-xs-8" style="height:100px;">
<table class="ptz" style="width:100%;"> <h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'湿度','Description')==='适中'?'normal':'danger'">
<tr> {{GetDeviceDataValue(device.Number,'湿度','Description')}}
<td></td> </h3>
<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>
<div class="row">
<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>
</template> </template>
<template v-for="device in GetDevices('色暖灯')"> <template v-for="device in GetDevices('光强检测器')">
<div class="row"> <div class="col-md-3 col-xs-6">
<div class="col-md-12"> <div class="box box-solid">
<div class="box box-solid btns"> <div class="row">
<div class="box-header with-border"> <div class="col-md-4 col-xs-4" style="text-align:center;">
<h3 class="box-title"><img src="/images/light2.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3> <img src="/images/pm25.png" style="max-width:48px;margin-top:19px;" />
<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>
<div class="box-body" style="height:178px;"> <div class="col-md-8 col-xs-8" style="height:100px;">
<form method="get" action="/App/ExecApi"> <h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'PM2.5','Description')==='污染'?'danger':'normal'">
<input type="hidden" name="Number" :value="device.Number" /> {{GetDeviceDataValue(device.Number,'PM2.5','Description')}}
<input type="hidden" name="Method" value="/WarmLight/SetBrightness" /> </h3>
<div class="row"> </div>
<div class="col-md-2 col-xs-4"> </div>
<span class="label1">亮度</span> <div class="row">
</div> <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 class="col-md-10 col-xs-8"> </div>
<input v-on:change="AjaxSubmit($event,device.Number,'亮度')" type="range" min="0" step="1" max="255" name="Brightness" :value="GetDataValue(device.Number,'亮度')" /> </div>
</div> </div>
</div> <div class="col-md-3 col-xs-6">
</form> <div class="box box-solid">
<form method="get" action="/App/ExecApi"> <div class="row">
<input type="hidden" name="Number" :value="device.Number" /> <div class="col-md-4 col-xs-4" style="text-align:center;">
<input type="hidden" name="Method" value="/WarmLight/SetColor" /> <img src="/images/pm25.png" style="max-width:48px;margin-top:19px;" />
<input type="hidden" name="Saturation" :value="GetDataValue(device.Number,'饱和度')" /> </div>
<div class="row"> <div class="col-md-8 col-xs-8" style="height:100px;">
<div class="col-md-2 col-xs-4"> <h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'PM10','Description')==='污染'?'danger':'normal'">
<span class="label1">色调</span> {{GetDeviceDataValue(device.Number,'PM10','Description')}}
</div> </h3>
<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>
<div class="row">
<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>
</template> </template>
<div class="col-md-3 col-xs-6" v-for="device in GetDevices('光强检测器')" :data-device-number="device.Number">
<template v-for="device in GetDevices('调色灯')"> <div class="box box-solid">
<div class="row">
<div class="col-md-4 col-xs-4" style="text-align:center;">
<img src="/images/light.png" style="max-width:48px;margin-top:19px;" />
</div>
<div class="col-md-8 col-xs-8" style="height:100px;">
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'光照度','Description')==='适中'?'normal':'danger'">
{{GetDeviceDataValue(device.Number,'光照度','Description')}}
</h3>
</div>
</div>
<div class="row">
<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 class="col-md-3 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" style="text-align:center;">
<img src="/images/person.png" style="max-width:48px;margin-top:19px;" />
</div>
<div class="col-md-8 col-xs-8" 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>
<div class="row">
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">红外 {{GetDeviceDataValue(device.Number,'状态','Value') }}</span>
</div>
</div>
</div>
<div class="col-md-3 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" style="text-align:center;">
<img src="/images/smoke.png" style="max-width:48px;margin-top:19px;" />
</div>
<div class="col-md-8 col-xs-8" 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>
<div class="row">
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">烟雾 {{GetDeviceDataValue(device.Number,'状态','Value') }}</span>
</div>
</div>
</div>
</div>
<div class="row">
<!--摄像头-->
<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" style="width:100%;">
<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>
</div>
<!--调色灯-->
<div class="col-md-6" v-for="device in GetDevices('调色灯')">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="box box-solid btns"> <div class="box box-solid btns">
@ -167,9 +389,9 @@
</div> </div>
</div> </div>
</div> </div>
</template> </div>
<!--红外转发器-->
<template v-for="device in GetDevices('红外转发器')"> <div class="col-md-6" v-for="device in GetDevices('红外转发器')">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="nav-tabs-custom"> <div class="nav-tabs-custom">
@ -355,278 +577,155 @@
</div> </div>
</div> </div>
</div> </div>
</template> </div>
</div> </div>
<div class="col-md-6"> <div class="row">
<div class="row"> <!--批量操作-->
<div class="col-md-12"> <div class="col-md-12" v-if="model.Scenes&&model.Scenes.length>0">
<div class="box box-solid"> <div class="box box-solid">
<div class="box-header with-border"> <div class="box-header with-border">
<h3 class="box-title"><img src="/images/batch.png" style="height:16px;margin-right:10px;" />批量操作</h3> <h3 class="box-title"><img src="/images/batch.png" style="height:16px;margin-right:10px;" />批量操作</h3>
<div class="box-tools pull-right"> <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 NodePowerOn" :data-node-number="model.Number">一键开</button>
<button class="btn btn-sm bg-olive ajax NodePowerOff" :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> <div class="box-body">
</div> <button class="btn bg-olive margin ajax SwitchOn">开灯</button>
<div class="row" v-for="device in GetDevices('粉尘检测器')" :data-device-number="device.Number"> <button class="btn bg-olive margin ajax SwitchOff">关灯</button>
<div class="col-md-6 col-xs-6"> <button class="btn bg-olive margin ajax SwitchOn">开关开</button>
<div class="box box-solid"> <button class="btn bg-olive margin ajax SwitchOff">开关关</button>
<div class="row"> <button class="btn bg-olive margin ajax SocketOn">插座开</button>
<div class="col-md-4 col-xs-4"> <button class="btn bg-olive margin ajax SocketOff">插座关</button>
<img src="/images/temperature.png" style="width:48px;height:48px;margin:19px;" /> <br />
</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> </div>
<div class="col-md-6 col-xs-6"> </div>
<div class="box box-solid"> <div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('一路开关')" :data-device-number="device.Number">
<div class="row"> <div class="box box-solid">
<div class="col-md-4 col-xs-4"> <div class="box-header with-border">
<img src="/images/humidity.png" style="width:48px;height:48px;margin:19px;" /> <h3 class="box-title"><img src="/images/switch.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
</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> <div class="box-body">
<div class="col-md-6 col-xs-6">
<div class="box box-solid">
<div class="row"> <div class="row">
<div class="col-md-4 col-xs-4"> <div class="col-md-12">
<img src="/images/pm25.png" style="width:48px;height:48px;margin:19px;" /> <div class="row" style="text-align:center;padding:3px 0;">
</div> <img v-if="GetDataValue(device.Number,'L1状态')=='开'" v-on:click="CallApi(device.Number,'/Switch/L1Off')" src="/images/on.png" />
<div class="col-md-4 col-xs-4" style="height:100px;"> <img v-if="GetDataValue(device.Number,'L1状态')=='关'" v-on:click="CallApi(device.Number,'/Switch/L1On')" src="/images/off.png" />
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'PM2.5','Description')==='污染'?'danger':'normal'"> </div>
{{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> </div>
</div> </div>
<div class="col-md-6 col-xs-6"> </div>
<div class="box box-solid"> <div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('二路开关')" :data-device-number="device.Number">
<div class="row"> <div class="box box-solid">
<div class="col-md-4 col-xs-4"> <div class="box-header with-border">
<img src="/images/pm25.png" style="width:48px;height:48px;margin:19px;" /> <h3 class="box-title"><img src="/images/switch.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
</div> <div class="box-tools pull-right">
<div class="col-md-4 col-xs-4" style="height:100px;"> <button class="btn btn-sm bg-olive" v-on:click="CallApi(device.Number,'/Switch3/On')" :data-node-number="model.Number">一键开</button>
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'PM10','Description')==='污染'?'danger':'normal'"> <button class="btn btn-sm bg-olive" v-on:click="CallApi(device.Number,'/Switch3/Off')" :data-node-number="model.Number">一键关</button>
{{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>
</div> <div class="box-body">
<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="row">
<div class="col-md-4 col-xs-4"> <div class="col-md-12">
<img src="/images/light.png" style="width:48px;height:48px;margin:19px;" /> <div class="row" style="text-align:center;padding:3px 0;">
</div> <img v-if="GetDataValue(device.Number,'L1状态')=='开'" v-on:click="CallApi(device.Number,'/Switch2/L1Off')" src="/images/on.png" />
<div class="col-md-4 col-xs-4" style="height:100px;"> <img v-if="GetDataValue(device.Number,'L1状态')=='关'" v-on:click="CallApi(device.Number,'/Switch2/L1On')" src="/images/off.png" />
<h3 style="line-height:100px;margin:0;" :class="GetDeviceDataValue(device.Number,'光照度','Description')==='适中'?'normal':'danger'"> <img v-if="GetDataValue(device.Number,'L2状态')=='开'" v-on:click="CallApi(device.Number,'/Switch2/L2Off')" src="/images/on.png" />
{{GetDeviceDataValue(device.Number,'光照度','Description')}} <img v-if="GetDataValue(device.Number,'L2状态')=='关'" v-on:click="CallApi(device.Number,'/Switch2/L2On')" src="/images/off.png" />
</h3> </div>
</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> </div>
</div> </div>
<div class="col-md-6 col-xs-6" v-for="device in GetDevices('红外感应器')" :data-device-number="device.Number"> </div>
<div class="box box-solid"> <div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('三路开关')" :data-device-number="device.Number">
<div class="row"> <div class="box box-solid">
<div class="col-md-4 col-xs-4"> <div class="box-header with-border">
<img src="/images/person.png" style="width:48px;height:48px;margin:19px;" /> <h3 class="box-title"><img src="/images/switch2.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
</div> <div class="box-tools pull-right">
<div class="col-md-4 col-xs-4" style="height:100px;"> <button class="btn btn-sm bg-olive" v-on:click="CallApi(device.Number,'/Switch3/On')" :data-node-number="model.Number">一键开</button>
<img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDeviceDataValue(device.Number,'状态','Value')==='警报'" /> <button class="btn btn-sm bg-olive" v-on:click="CallApi(device.Number,'/Switch3/Off')" :data-node-number="model.Number">一键关</button>
<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="box-body">
<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="row">
<div class="col-md-4 col-xs-4"> <div class="col-md-12">
<img src="/images/smoke.png" style="width:48px;height:48px;margin:19px;" /> <div class="row" style="text-align:center;padding:3px 0;">
</div> <img v-if="GetDataValue(device.Number,'L1状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L1Off')" src="/images/on.png" />
<div class="col-md-4 col-xs-4" style="height:100px;"> <img v-if="GetDataValue(device.Number,'L1状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L1On')" src="/images/off.png" />
<img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDeviceDataValue(device.Number,'状态','Value')==='警报'" /> <img v-if="GetDataValue(device.Number,'L2状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L2Off')" src="/images/on.png" />
<h3 style="line-height:100px;margin:0;" class="normal" v-else>正常</h3> <img v-if="GetDataValue(device.Number,'L2状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L2On')" src="/images/off.png" />
</div> <img v-if="GetDataValue(device.Number,'L3状态')=='开'" v-on:click="CallApi(device.Number,'/Switch3/L3Off')" src="/images/on.png" />
<div class="col-md-4 col-xs-4" style="height:100px;"> <img v-if="GetDataValue(device.Number,'L3状态')=='关'" v-on:click="CallApi(device.Number,'/Switch3/L3On')" src="/images/off.png" />
<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>
</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="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 box-solid"> <div class="box-header with-border">
<div class="box-header with-border"> <h3 class="box-title"><img src="/images/socket.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
<h3 class="box-title"><img src="/images/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 class="box-body">
</div> <div class="row">
</div> <div class="col-md-12">
<div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('一路开关')" :data-device-number="device.Number"> <div class="row" style="text-align:center;padding:3px 0;">
<div class="box box-solid"> <img v-if="GetDataValue(device.Number,'状态')==='开'" v-on:click="CallApi(device.Number,'/Socket/Off')" src="/images/on.png" :data-status="GetDataValue(device.Number,'状态')" />
<div class="box-header with-border"> <img v-if="GetDataValue(device.Number,'状态')==='关'" v-on:click="CallApi(device.Number,'/Socket/On')" src="/images/off.png" :data-status="GetDataValue(device.Number,'状态')" />
<h3 class="box-title"><img src="/images/switch.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3> </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,'/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> </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="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 box-solid"> <div class="box-header with-border">
<div class="box-header with-border"> <h3 class="box-title"><img src="/images/socket.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
<h3 class="box-title"><img src="/images/switch.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3> <div class="box-tools pull-right">
<div class="box-tools pull-right"> {{parseFloat(GetDataValue(device.Number,'电量')).toFixed(2)}} kWh
<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="box-body">
</div> <div class="row">
</div> <div class="col-md-12">
<div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('三路开关')" :data-device-number="device.Number"> <div class="row" style="text-align:center;padding:3px 0;">
<div class="box box-solid"> <img v-if="GetDataValue(device.Number,'状态')==='开'" v-on:click="CallApi(device.Number,'/Socket/Off')" src="/images/on.png" :data-status="GetDataValue(device.Number,'状态')" />
<div class="box-header with-border"> <img v-if="GetDataValue(device.Number,'状态')==='关'" v-on:click="CallApi(device.Number,'/Socket/On')" src="/images/off.png" :data-status="GetDataValue(device.Number,'状态')" />
<h3 class="box-title"><img src="/images/switch2.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3> </div>
<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> </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="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 box-solid"> <div class="box-header with-border">
<div class="box-header with-border"> <h3 class="box-title"><img src="/images/curtain.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3>
<h3 class="box-title"><img src="/images/socket.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3> <div class="box-tools pull-right">
<div class="box-tools pull-right"> {{GetDataValue(device.Number,'状态')}}
{{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="box-body">
</div> <div class="row">
</div> <div class="col-md-12">
<div class="col-md-3 col-xs-6 control" v-for="device in GetDevices('插座')" :data-device-number="device.Number"> <div class="row" style="text-align:center;padding:3px 0;">
<div class="box box-solid"> <img style="height:32px;" v-on:click="CallApi(device.Number,'/Curtain/On')" src="/images/left.png" />
<div class="box-header with-border"> <img style="height:32px;" v-on:click="CallApi(device.Number,'/Curtain/Stop')" src="/images/stop.png" />
<h3 class="box-title"><img src="/images/socket.png" style="height:16px;margin-right:10px;" />{{device.DisplayName||device.Name}}</h3> <img style="height:32px;" v-on:click="CallApi(device.Number,'/Curtain/Off')" src="/images/right.png" />
</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> </div>
</div> </div>
</div> </div>
</div> </template>
</div> </div>
@section scripts{ @section scripts{
<script src="/js/node.js"></script> <script src="/js/node.js"></script>

BIN
projects/IoTCenter/iotcenter.db
View File

Binary file not shown.

32
projects/IoTClient/Assets/StreamingAssets/wwwroot/js/node.js
Unescape View File

@ -211,6 +211,14 @@ function updateItem(list, item) {
list.push(item); list.push(item);
} }
} }
function deleteItem(list, item) {
for (var i = 0; i < list.length; i++) {
if (list[i].Id == item.Id) {
list.splice(i, 1);
break;
}
}
}
/*event*/ /*event*/
$(document).on('change', '#camera', function (e) { $(document).on('change', '#camera', function (e) {
UpdateCamera() UpdateCamera()
@ -258,14 +266,20 @@ connection.on("ServerToClient", function (method, json, from) {
onMessage(method, json, from); onMessage(method, json, from);
}); });
function onMessage(method, json, from) { function onMessage(method, json, from) {
if (method == 'DataEntityInserted' || var item = JSON.parse(json);
method == 'DataEntityUpdated') { if (method == 'DataEntityInserted' || method == 'DataEntityUpdated') {
var data = JSON.parse(json); var device = Enumerable.from(vm.model.Devices).firstOrDefault(function (o) { return o.Id === item.DeviceId; })
var device = Enumerable.from(vm.model.Devices).firstOrDefault(function (o) { return o.Id === data.DeviceId; })
if (device) { if (device) {
updateItem(device.Data, data); updateItem(device.Data, item);
} }
} }
else if (method == 'SceneEntityInserted' ||method == 'SceneEntityUpdated') {
updateItem(vm.model.Scenes, item);
}
else if (method == 'SceneEntityDeleted') {
deleteItem(vm.model.Scenes, item);
}
} }
/*vue*/ /*vue*/
function init() { function init() {
@ -327,6 +341,14 @@ function init() {
} }
return null; return null;
}, },
GetDeviceDataValue(number, name, attr) {
var device = Enumerable.from(this.model.Devices).where(function (o) { return o.Number === number; }).firstOrDefault();
var data = Enumerable.from(device.Data).where(o => o.Name === name).firstOrDefault();
if (data != null) {
return data[attr];
}
return null;
},
CameraSelected() { CameraSelected() {
console.log('camera selected:' + new Date()); console.log('camera selected:' + new Date());
UpdateCamera(); UpdateCamera();

BIN
projects/IoTNode/iotnode.db
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save