You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
604 lines
28 KiB
604 lines
28 KiB
<div v-if="ViewModel" class="callout callout-info">
|
|
<h4>{{ViewModel.Name}}</h4>
|
|
</div>
|
|
<div class="row" v-if="ViewModel">
|
|
<div class="col-md-6">
|
|
<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:265px;margin:0;padding:0;background:#000;">
|
|
<video id="flvPlayer" class="video" muted controls autoplay style="width:100%;max-width:100%;height:100%;"></video>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="box box-solid">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<img src="/images/temperature.png" style="width:48px;height:48px;margin:20px;" />
|
|
</div>
|
|
<div class="col-md-4" style="height:88px;">
|
|
<h3 style="line-height:88px;margin:0;">{{GetData('温度','Description')}}</h3>
|
|
</div>
|
|
<div class="col-md-4" style="height:88px;">
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">温度：{{GetData('温度','Value') }} {{GetData('温度','Unit')}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="box box-solid">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<img src="/images/humidity.png" style="width:48px;height:48px;margin:20px;" />
|
|
</div>
|
|
<div class="col-md-4" style="height:88px;">
|
|
<h3 style="line-height:88px;margin:0;">{{GetData('湿度','Description')}}</h3>
|
|
</div>
|
|
<div class="col-md-4" style="height:88px;">
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">湿度：{{GetData('湿度','Value') }} {{GetData('湿度','Unit')}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="box box-solid">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<img src="/images/light.png" style="width:48px;height:48px;margin:20px;" />
|
|
</div>
|
|
<div class="col-md-4" style="height:88px;">
|
|
<h3 style="line-height:88px;margin:0;">{{GetDataByTag('前门','光照度','Description')}}</h3>
|
|
</div>
|
|
<div class="col-md-4" style="height:88px;">
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">前门光照：{{GetDataByTag('前门','光照度','Value') }} {{GetDataByTag('前门','光照度','Unit')}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="box box-solid">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<img src="/images/light.png" style="width:48px;height:48px;margin:20px;" />
|
|
</div>
|
|
<div class="col-md-4" style="height:88px;">
|
|
<h3 style="line-height:88px;margin:0;">{{GetDataByTag('后门','光照度','Description')}}</h3>
|
|
</div>
|
|
<div class="col-md-4" style="height:88px;">
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">后门光照：{{GetDataByTag('后门','光照度','Value') }} {{GetDataByTag('后门','光照度','Unit')}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="box box-solid">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<img src="/images/person.png" style="width:48px;height:48px;margin:20px;" />
|
|
</div>
|
|
<div class="col-md-4" style="height:88px;">
|
|
<img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDataByTag('前门','状态','Value')==='警报'" />
|
|
</div>
|
|
<div class="col-md-4" style="height:88px;">
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">前门人体：{{GetDataByTag('前门','状态','Value') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="box box-solid">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<img src="/images/person.png" style="width:48px;height:48px;margin:20px;" />
|
|
</div>
|
|
<div class="col-md-4" style="height:88px;">
|
|
<img src="/images/warn.png" style="width:36px;height:36px;margin:32px 0 0 0;" v-if="GetDataByTag('后门','状态','Value')==='警报'" />
|
|
</div>
|
|
<div class="col-md-4" style="height:88px;">
|
|
<span style="display:inline-block;position:absolute;right:20px;bottom:5px;white-space: nowrap;">后门人体：{{GetDataByTag('后门','状态','Value') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="ViewModel">
|
|
<div class="col-md-6">
|
|
<div class="box box-solid">
|
|
<table class="ptz" v-if="PTZControlSupport()">
|
|
<tr>
|
|
<td><img class="ajax camera Zoomin" src="/images/zoomin.png" /></td>
|
|
<td></td>
|
|
<td><img class="ajax camera Up" src="/images/up.png" /></td>
|
|
<td></td>
|
|
<td><img class="ajax camera Zoomout" src="/images/zoomout.png" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td></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></td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td><img class="ajax camera Down" src="/images/down.png" /></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
<p v-else>该摄像头不支持云台</p>
|
|
</div>
|
|
<div class="box box-solid">
|
|
<div class="box-body row">
|
|
<div class="col-md-12">
|
|
<canvas id="TemperatureChart" style="width:100%;height:200px;" :data-device-number="GetDeviceNumber('温湿度传感器')"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box box-solid">
|
|
<div class="box-body row">
|
|
<div class="col-md-12">
|
|
<canvas id="humidityChart" style="width:100%;height:200px;" :data-device-number="GetDeviceNumber('温湿度传感器')"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box box-solid">
|
|
<div class="box-body row">
|
|
<div class="col-md-12">
|
|
<canvas id="LightChart1" style="width:100%;height:200px;" :data-device-number="GetDeviceNumber('光强检测器','前门')"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box box-solid">
|
|
<div class="box-body row">
|
|
<div class="col-md-12">
|
|
<canvas id="LightChart2" style="width:100%;height:200px;" :data-device-number="GetDeviceNumber('光强检测器','后门')"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box box-solid">
|
|
<div class="box-body row">
|
|
<div class="col-md-12">
|
|
<canvas id="EnergyChart" style="width:100%;height:200px;" :data-device-number="GetDeviceNumber('智能插座')"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="box box-solid btns">
|
|
<div class="row">
|
|
<div class="col-md-4"><span style="display:inline-block;line-height:70px;">用电:</span></div>
|
|
<div class="col-md-4"><button class="btn btn-block btn-primary ajax NodePowerOn" :data-node-number="ViewModel.Number">一键开</button></div>
|
|
<div class="col-md-4"><button class="btn btn-block btn-primary ajax NodePowerOff" :data-node-number="ViewModel.Number">一键关</button></div>
|
|
</div>
|
|
<hr style="margin: 0;" />
|
|
<div class="row">
|
|
<div class="col-md-3" v-for="scene in ViewModel.Scenes">
|
|
<button class="btn btn-block btn-info ajax Scene" :data-node-number="ViewModel.Number" :data-scene-name="scene.Name">{{scene.Name}}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box box-solid btns">
|
|
<div class="row">
|
|
<div class="col-md-4"><span style="display:inline-block;line-height:70px;">一路开关:</span></div>
|
|
<div class="col-md-4"><button class="btn btn-block btn-primary ajax NodeSwitchOn" :data-node-number="ViewModel.Number">一键开</button></div>
|
|
<div class="col-md-4"><button class="btn btn-block btn-primary ajax NodeSwitchOff" :data-node-number="ViewModel.Number">一键关</button></div>
|
|
</div>
|
|
<hr style="margin: 0;" />
|
|
<div class="row">
|
|
<div class="col-md-3" v-for="device in GetDevices('一路开关')">
|
|
<div class="row" style="background-color:#fff;border:1px solid #eee;border-radius:5px;text-align:center;padding:10px 0;margin:10px 0">
|
|
<img v-if="GetDataValue(device.Number,'状态')=='开'" v-on:click="CallApi(device.Number,'/Socket/Off')" src="/images/on.png" />
|
|
<img v-if="GetDataValue(device.Number,'状态')=='关'" v-on:click="CallApi(device.Number,'/Socket/On')" src="/images/off.png" />
|
|
</div>
|
|
<div class="row" style="text-align:center;">
|
|
{{device.Name||device.DisplayName}}
|
|
</div>
|
|
<br />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box box-solid btns">
|
|
<div class="row">
|
|
<div class="col-md-4"><span style="display:inline-block;line-height:70px;">三路开关:</span></div>
|
|
<div class="col-md-4"><button class="btn btn-block btn-primary ajax NodeSwitch3On" :data-node-number="ViewModel.Number">一键开</button></div>
|
|
<div class="col-md-4"><button class="btn btn-block btn-primary ajax NodeSwitch3Off" :data-node-number="ViewModel.Number">一键关</button></div>
|
|
</div>
|
|
<hr style="margin: 0;" />
|
|
<div class="row">
|
|
<div class="col-md-3" v-for="device in GetDevices('三路开关')">
|
|
<div class="row" style="background-color:#fff;border:1px solid #eee;border-radius:5px;text-align:center;padding:10px 0;margin:10px 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 class="row" style="text-align:center;">
|
|
{{device.Name||device.DisplayName}}
|
|
</div>
|
|
<br />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="box box-solid btns">
|
|
<div class="row">
|
|
<div class="col-md-4"><span style="display:inline-block;line-height:70px;">插座:</span></div>
|
|
<div class="col-md-4"><button class="btn btn-block btn-primary ajax NodeSocketOn" :data-node-number="ViewModel.Number">一键开</button></div>
|
|
<div class="col-md-4"><button class="btn btn-block btn-primary ajax NodeSocketOff" :data-node-number="ViewModel.Number">一键关</button></div>
|
|
</div>
|
|
<hr style="margin: 0;" />
|
|
<div class="row">
|
|
<div class="col-md-3" v-for="device in GetDevices('智能插座')">
|
|
<div class="row" style="background-color:#fff;border:1px solid #eee;border-radius:5px;text-align:center;padding:10px 0;margin:10px 0">
|
|
<img v-if="GetDataValue(device.Number,'状态')=='开'" v-on:click="CallApi(device.Number,'/Socket/Off')" src="/images/on.png" />
|
|
<img v-if="GetDataValue(device.Number,'状态')=='关'" v-on:click="CallApi(device.Number,'/Socket/On')" src="/images/off.png" />
|
|
</div>
|
|
<div class="row" style="text-align:center;">
|
|
{{device.Name||device.DisplayName}}
|
|
</div>
|
|
<br />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var connection;
|
|
var connectionId;
|
|
$.ajaxSetup({
|
|
cache: false,
|
|
timeout: 5000
|
|
});
|
|
function connect() {
|
|
if (connection && connection.connection.connectionState === 1) {
|
|
console.log('has connected');
|
|
}
|
|
else {
|
|
console.log('start connect to server:' + Date());
|
|
connection.start().then(function () {
|
|
console.log('signalR>start');
|
|
}).catch(function (err) {
|
|
console.error(err.toString());
|
|
setTimeout(connect, 10 * 1000);
|
|
});
|
|
}
|
|
}
|
|
function Color16() {//十六进制颜色随机
|
|
var r = Math.floor(Math.random() * 256);
|
|
var g = Math.floor(Math.random() * 256);
|
|
var b = Math.floor(Math.random() * 256);
|
|
var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
|
|
return color;
|
|
}
|
|
function ajax(url, data, type) {
|
|
console.log(url);
|
|
type = type || 'get';
|
|
$('.overlay').show();
|
|
$.ajax({
|
|
type: type,
|
|
url: url,
|
|
data: data,
|
|
success: AjaxCallBack
|
|
}).fail(function (result) {
|
|
console.log('error');
|
|
console.log(result);
|
|
}).always(function () {
|
|
$('.overlay').hide();
|
|
});
|
|
}
|
|
function AjaxCallBack(response) {
|
|
var result = response;
|
|
if (result.code === 0) {
|
|
if (result.type === 0) {
|
|
if (result.format === 1) {
|
|
console.log('format/1/base64 jpeg image');
|
|
$('#callback .page-content').html('<img class="shot" src="' + result.data + '">');
|
|
}
|
|
else {
|
|
console.log('format/0/json object');
|
|
$('#callback .page-content').html(result.data);
|
|
}
|
|
app.popup.open('#callback');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<script>
|
|
function onMessage() {
|
|
connection.on('Connected', function (id) {
|
|
connectionId = id;
|
|
});
|
|
connection.on("UpdateDevice", (message) => {
|
|
var newDevice = JSON.parse(message);
|
|
var update = false;
|
|
for (var i = 0; i < vm.ViewModel.Devices.length; i++) {
|
|
if (vm.ViewModel.Devices[i].Number == newDevice.Number) {
|
|
update = true;
|
|
break;
|
|
}
|
|
}
|
|
if (update) {
|
|
vm.ViewModel.Devices.splice(i, 1, newDevice);
|
|
}
|
|
else {
|
|
vm.ViewModel.Devices.push(newDevice);
|
|
}
|
|
});
|
|
|
|
}
|
|
</script>
|
|
<script>
|
|
function UpdateChart(title, id, key, time) {
|
|
var number = $('#' + id).attr('data-device-number');
|
|
time = time || '30d';
|
|
var url = '/Home/GetChartData?number=' + number + '&key=' + key + '&time=' + time;
|
|
$.get(url, function (response) {
|
|
if (response) {
|
|
var ctx = document.getElementById(id).getContext('2d');
|
|
var data = {
|
|
datasets: [{
|
|
label: title,
|
|
data: response.data,
|
|
backgroundColor: Color16(),
|
|
fill: false
|
|
}],
|
|
labels: response.labels
|
|
};
|
|
var options = {
|
|
responsive: true,
|
|
legend: {
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: title
|
|
},
|
|
animation: {
|
|
duration: 0
|
|
}
|
|
};
|
|
var chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: data,
|
|
options: options
|
|
});
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
<script>
|
|
$('body').on('click', 'button.ajax', function (e) {
|
|
var data = $.map($('.switch:checked').toArray(), function (o) { return $(o).attr('data-node-number'); });
|
|
if ($(this).hasClass('AllPowerOn')) {
|
|
ajax('/App/AllPowerOn', { nodes: data }, 'post');
|
|
} else if ($(this).hasClass('AllPowerOff')) {
|
|
ajax('/App/AllPowerOff', { nodes: data }, 'post');
|
|
} else if ($(this).hasClass('AllSwitchOn')) {
|
|
ajax('/App/AllSwitchOn', { nodes: data }, 'post');
|
|
} else if ($(this).hasClass('AllSwitchOff')) {
|
|
ajax('/App/AllSwitchOff', { nodes: data }, 'post');
|
|
} else if ($(this).hasClass('AllSocketOn')) {
|
|
ajax('/App/AllSocketOn', { nodes: data }, 'post');
|
|
} else if ($(this).hasClass('AllSocketOff')) {
|
|
ajax('/App/AllSocketOff', { nodes: data }, 'post');
|
|
} else if ($(this).hasClass('NodePowerOn')) {
|
|
ajax('/App/NodePowerOn', { node: $(this).attr('data-node-number') }, 'post');
|
|
} else if ($(this).hasClass('NodePowerOff')) {
|
|
ajax('/App/NodePowerOff', { node: $(this).attr('data-node-number') }, 'post');
|
|
} else if ($(this).hasClass('NodeSwitchOn')) {
|
|
ajax('/App/NodeSwitchOn', { node: $(this).attr('data-node-number') }, 'post');
|
|
} else if ($(this).hasClass('NodeSwitchOff')) {
|
|
ajax('/App/NodeSwitchOff', { node: $(this).attr('data-node-number') }, 'post');
|
|
} else if ($(this).hasClass('NodeSwitch3On')) {
|
|
ajax('/App/NodeSwitch3On', { node: $(this).attr('data-node-number') }, 'post');
|
|
} else if ($(this).hasClass('NodeSwitch3Off')) {
|
|
ajax('/App/NodeSwitch3Off', { node: $(this).attr('data-node-number') }, 'post');
|
|
}
|
|
else if ($(this).hasClass('NodeSocketOn')) {
|
|
ajax('/App/NodeSocketOn', { node: $(this).attr('data-node-number') }, 'post');
|
|
} else if ($(this).hasClass('NodeSocketOff')) {
|
|
ajax('/App/NodeSocketOff', { node: $(this).attr('data-node-number') }, 'post');
|
|
} else if ($(this).hasClass('Scene')) {
|
|
ajax('/App/Scene', { node: $(this).attr('data-node-number'), name: $(this).attr('data-scene-name') }, 'post');
|
|
}
|
|
return false;
|
|
});
|
|
$('body').on('mousedown', 'img.camera.ajax', function (e) {
|
|
var number = $('#camera').val();
|
|
if ($(this).hasClass('Zoomin')) {
|
|
ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Zoomin' }, 'post');
|
|
} else if ($(this).hasClass('Zoomout')) {
|
|
ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Zoomout' }, 'post');
|
|
} else if ($(this).hasClass('Left')) {
|
|
ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Left' }, 'post');
|
|
} else if ($(this).hasClass('Right')) {
|
|
ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Right' }, 'post');
|
|
} else if ($(this).hasClass('Up')) {
|
|
ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Up' }, 'post');
|
|
} else if ($(this).hasClass('Down')) {
|
|
ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Down' }, 'post');
|
|
} else if ($(this).hasClass('Stop')) {
|
|
ajax('/App/Exec', { connectionId: connectionId, number: number, method: '/Onvif/Stop' }, 'post');
|
|
}
|
|
return false;
|
|
});
|
|
$('body').on('mouseup', 'img.ajax', function (e) {
|
|
var number = $('#camera').val();
|
|
ajax('/App/Exec', { number: number, method: '/Onvif/Stop' }, 'post');
|
|
return false;
|
|
});
|
|
</script>
|
|
<script>
|
|
var flvPlayer;
|
|
var decodedFrames;
|
|
$('body').on('change', '#camera', function (e) {
|
|
UpdateCamera()
|
|
});
|
|
function UpdateCamera() {
|
|
var number = $('#camera').val();
|
|
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;
|
|
closePlayer(flvPlayer);
|
|
playFlv(document.getElementById("flvPlayer"), url);
|
|
}
|
|
function playFlv(videoElement, url) {
|
|
try {
|
|
var flvPlayer = flvjs.createPlayer({
|
|
type: 'flv',
|
|
url: url,
|
|
isLive: true,
|
|
cors: true
|
|
}, {
|
|
enableWorker: true,
|
|
enableStashBuffer: false,
|
|
stashInitialSize: 1,
|
|
fixAudioTimestampGap: false
|
|
});
|
|
flvPlayer.attachMediaElement(videoElement);
|
|
flvPlayer.load();
|
|
var timer = setInterval(function () {
|
|
console.log('.');
|
|
if (flvPlayer.statisticsInfo.speed == 0) {
|
|
console.log('reload1');
|
|
clearInterval(timer);
|
|
closePlayer(flvPlayer);
|
|
playFlv(videoElement, url);
|
|
}
|
|
else if (decodedFrames && flvPlayer.statisticsInfo.decodedFrames <= decodedFrames) {
|
|
console.log('reload2');
|
|
clearInterval(timer);
|
|
closePlayer(flvPlayer);
|
|
playFlv(videoElement, url);
|
|
}
|
|
else if (flvPlayer.buffered.end(0) - flvPlayer.currentTime > 1) {
|
|
console.log('reset currentTime');
|
|
flvPlayer.currentTime = flvPlayer.buffered.end(0) - 0.001;
|
|
}
|
|
decodedFrames = flvPlayer.statisticsInfo.decodedFrames;
|
|
}, 10 * 1000);
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
function closePlayer(flvPlayer) {
|
|
if (flvPlayer != null) {
|
|
flvPlayer.pause();
|
|
flvPlayer.unload();
|
|
flvPlayer.detachMediaElement();
|
|
flvPlayer.destroy();
|
|
flvPlayer = null;
|
|
}
|
|
}
|
|
</script>
|
|
<script>
|
|
var vm = new Vue({
|
|
el: '#template',
|
|
data() {
|
|
return { ViewModel: null }
|
|
},
|
|
mounted() {
|
|
var url = '/Home/GetNode' + '?number=' + new URI().query(true).number;
|
|
$.get(url, function (data) {
|
|
vm.ViewModel = data;
|
|
Vue.nextTick(function () {
|
|
var wsUrl = '/hub?group=page';
|
|
connection = new signalR.HubConnectionBuilder().withUrl(wsUrl).build();
|
|
onMessage();
|
|
connect();
|
|
UpdateCamera();
|
|
UpdateChart('温度', 'TemperatureChart', 'Temperature');
|
|
UpdateChart('湿度', 'humidityChart', 'Humidity');
|
|
UpdateChart('前门光照', 'LightChart1', 'Light');
|
|
UpdateChart('后门光照', 'LightChart2', 'Light');
|
|
UpdateChart('用电', 'EnergyChart', 'Electricity');
|
|
});
|
|
});
|
|
},
|
|
methods: {
|
|
GetData(name, attr) {
|
|
var data = Enumerable
|
|
.from(vm.ViewModel.Devices)
|
|
.selectMany(function (o) { return o.Data; })
|
|
.where(function (o) { return o.Name === name; })
|
|
.firstOrDefault();
|
|
return data == null ? null : data[attr];
|
|
},
|
|
GetDataByTag(tag, name, attr) {
|
|
var data = Enumerable
|
|
.from(vm.ViewModel.Devices)
|
|
.where(function (o) { return o.Tag === tag; })
|
|
.selectMany(function (o) { return o.Data; })
|
|
.where(function (o) { return o.Name === name; })
|
|
.firstOrDefault();
|
|
return data == null ? null : data[attr];
|
|
},
|
|
GetCameras() {
|
|
return Enumerable
|
|
.from(vm.ViewModel.Devices)
|
|
.where(function (o) { return o.Name === '摄像头' })
|
|
.toArray();
|
|
},
|
|
CameraSelected() {
|
|
UpdateCamera();
|
|
},
|
|
PTZControlSupport() {
|
|
return true;
|
|
var number = $('#camera').val();
|
|
var device = Enumerable.from(vm.ViewModel.Devices).where(function (o) { return o.Number === number; }).firstOrDefault();
|
|
var data = Enumerable.from(device.Data).where(o => o.Name === '缩放支持').firstOrDefault().Value;
|
|
return data === '是';
|
|
},
|
|
GetDevices(name) {
|
|
return Enumerable.from(vm.ViewModel.Devices)
|
|
.where(function (o) { return o.Name == name; })
|
|
.toArray();
|
|
},
|
|
GetDevice(name, tag) {
|
|
var query = Enumerable.from(vm.ViewModel.Devices);
|
|
if (name) {
|
|
query = query.where(function (o) { return o.Name === name; });
|
|
}
|
|
if (tag) {
|
|
query = query.where(function (o) { return o.Tag === tag; });
|
|
}
|
|
return query.firstOrDefault();
|
|
},
|
|
GetDeviceNumber(name, tag) {
|
|
var device = vm.GetDevice(name, tag);
|
|
return device == null ? null : device.Number;
|
|
},
|
|
GetDataValue(number, name) {
|
|
var device = Enumerable.from(vm.ViewModel.Devices)
|
|
.where(function (o) { return o.Number === number; })
|
|
.firstOrDefault();
|
|
if (device != null) {
|
|
var data = Enumerable.from(device.Data)
|
|
.where(function (o) { return o.Name == name })
|
|
.firstOrDefault();
|
|
if (data != null) {
|
|
return data.Value;
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
CallApi(number, method) {
|
|
ajax('/App/Exec', { number: number, method: method }, 'post');
|
|
}
|
|
},
|
|
destroy() {
|
|
closePlayer();
|
|
}
|
|
});
|
|
</script> |