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

update

Browse Source 
Former-commit-id: 9dfa353004d4d0e8c5bd60d329964f0f68449dfc
TangShanKaiPing
wanggang 6 years ago
parent 8c4f89d19e
commit 82fb7b6f3b
2 changed files with 194 additions and 191 deletions
Show Stats Download Patch File Download Diff File

4
projects/IoTCenter/wwwroot/home.html
Unescape View File

@ -1,4 +1,8 @@
<style>
.content-wrapper {
background-color: lightblue;
}
input.switch {
display: none;
}

381
projects/IoTCenter/wwwroot/node.html
Unescape View File

@ -133,186 +133,57 @@
</div>
</div>
<div class="row" v-if="ViewModel">
<div class="col-md-6" v-if="HasDevices('摄像头')">
<div class="row">
<div class="col-md-12">
<div class="box box-solid">
<select class="form-control" id="camera" @change="CameraSelected">
<option v-for="c in GetCameras()" :value="c.Number">{{c.DisplayName||c.Name}}</option>
</select>
<div style="width:100%;height:186px;margin:0;padding:0;background:#000;">
<video id="flvPlayer" class="video" controls autoplay style="width:100%;max-width:100%;height:100%;"></video>
</div>
</div>
</div>
</div>
<div class="row" v-if="PTZControlSupport()">
<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>
</div>
<div class="col-md-6">
<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;">{{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;">{{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;">{{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;">{{GetDeviceDataValue(device.Number,'PM100','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,'PM100','Value')}}{{ GetDeviceDataValue(device.Number,'PM100','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;">{{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')==='警报'" />
</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>
<template v-if="HasDevices('摄像头')">
<div class="row">
<div class="col-md-12">
<div class="box box-solid">
<select class="form-control" id="camera" @change="CameraSelected">
<option v-for="c in GetCameras()" :value="c.Number">{{c.DisplayName||c.Name}}</option>
</select>
<div style="width:100%;height:186px;margin:0;padding:0;background:#000;">
<video id="flvPlayer" class="video" controls autoplay style="width:100%;max-width:100%;height:100%;"></video>
</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')==='警报'" />
</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 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>
</div>
</div>
</div>
<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="ViewModel.Number">一键开</button>
<button class="btn btn-sm bg-olive ajax NodePowerOff" :data-node-number="ViewModel.Number">一键关</button>
<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 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 ViewModel.Scenes" :data-node-number="ViewModel.Number" :data-scene-name="scene.Name">{{scene.Name}}</button>
</div>
</div>
</div>
</div>
</div>
<template v-for="device in GetDevices('调色灯')">
<div class="col-md-6 control">
</template>
<template v-for="device in GetDevices('调色灯')">
<div class="row">
<div class="col-md-12">
<div class="box box-solid btns">
@ -360,10 +231,8 @@
</div>
</div>
</div>
</div>
</template>
<template v-for="device in GetDevices('红外转发器')">
<div class="col-md-6 control">
</template>
<template v-for="device in GetDevices('红外转发器')">
<div class="row">
<div class="col-md-12">
<div class="nav-tabs-custom">
@ -440,8 +309,139 @@
</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="ViewModel.Number">一键开</button>
<button class="btn btn-sm bg-olive ajax NodePowerOff" :data-node-number="ViewModel.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 ViewModel.Scenes" :data-node-number="ViewModel.Number" :data-scene-name="scene.Name">{{scene.Name}}</button>
</div>
</div>
</div>
</div>
</template>
<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;">{{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;">{{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;">{{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;">{{GetDeviceDataValue(device.Number,'PM100','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,'PM100','Value')}}{{ GetDeviceDataValue(device.Number,'PM100','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;">{{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')==='警报'" />
</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')==='警报'" />
</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">
@ -748,6 +748,13 @@
if (number) {
var device = Enumerable.from(vm.ViewModel.Devices).where(function (o) { return o.Number === number; }).firstOrDefault();
var url = Enumerable.from(device.Data).where(o => o.Name === '主码流flv').firstOrDefault().Value;
var hasPtz = Enumerable.from(device.Data).where(o => o.Name === '缩放支持').firstOrDefault().Value === '是';
if (hasPtz) {
$('#ptz').show();
}
else {
$('#ptz').hide();
}
closePlayer(flvPlayer);
playFlv(document.getElementById("flvPlayer"), url);
}
@ -809,17 +816,19 @@
var vm = new Vue({
el: '#template',
data() {
return { ViewModel: null }
return {
ViewModel: null
}
},
mounted() {
var url = '/Home/GetNode' + '?number=' + new URI().query(true).number;
$.get(url, function (data) {
vm.ViewModel = data;
var wsUrl = '/hub?group=page';
connection = new signalR.HubConnectionBuilder().withUrl(wsUrl).build();
onMessage();
connect();
Vue.nextTick(function () {
var wsUrl = '/hub?group=page';
connection = new signalR.HubConnectionBuilder().withUrl(wsUrl).build();
onMessage();
connect();
UpdateCamera();
//UpdateChart('温度', 'TemperatureChart', 'Temperature');
//UpdateChart('湿度', 'humidityChart', 'Humidity');
@ -859,19 +868,9 @@
.toArray();
},
CameraSelected() {
console.log('camera selected:' + new Date());
UpdateCamera();
},
PTZControlSupport() {
var number = $('#camera').val();
var device = Enumerable.from(vm.ViewModel.Devices).where(function (o) { return o.Number === number; }).firstOrDefault();
if (device) {
var data = Enumerable.from(device.Data).where(o => o.Name === '缩放支持').firstOrDefault();
if (data) {
return data.Value === '是';
}
}
return false;
},
GetDevices(name) {
return Enumerable.from(vm.ViewModel.Devices)
.where(function (o) { return o.Name == name; })

Write Preview
Loading…
Cancel
Save