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.
310 lines
11 KiB
310 lines
11 KiB
function UpdateCamera() {
|
|
var number = $('#camera').val();
|
|
var video = document.getElementById("liveVideo");
|
|
if (number) {
|
|
if (flvjs.isSupported) {
|
|
console.log('flv support');
|
|
playFlv(video);
|
|
}
|
|
else {
|
|
playHls(video);
|
|
}
|
|
}
|
|
}
|
|
function UpdateChart(deviceNumber) {
|
|
$('canvas.chart').each(function () {
|
|
var canvas = this;
|
|
var number = canvas.id;
|
|
if (!deviceNumber || deviceNumber === number) {
|
|
var device = vm.GetDevice(number);
|
|
var time = time || '1d';
|
|
var url = iotCenter + '/App/GetChartData?time=' + time + '+&number=' + number + "&token=" + token + "&connectionId=" + connectionId;
|
|
axios.post(url, { crossDomain: true })
|
|
.then(function (response) {
|
|
var data = response.data;
|
|
UpdateChartInternal(canvas, device.DisplayName, data);
|
|
console.log('折线图更新成功');
|
|
toastr.success('折线图更新成功');
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
toastr.error(error)
|
|
});
|
|
}
|
|
});
|
|
}
|
|
function UpdateChartInternal(canvas, title, data) {
|
|
var chart;
|
|
Chart.helpers.each(Chart.instances, function (instance) {
|
|
if (instance.chart.canvas.id === canvas.id) {
|
|
chart = instance;
|
|
}
|
|
})
|
|
if (chart) {
|
|
chart.data = data;
|
|
chart.update();
|
|
}
|
|
else {
|
|
var ctx = canvas.getContext('2d');
|
|
var options = {
|
|
responsive: true,
|
|
legend: {
|
|
position: 'bottom',
|
|
},
|
|
title: {
|
|
display: false,
|
|
text: title
|
|
},
|
|
animation: {
|
|
duration: 0
|
|
}
|
|
};
|
|
var chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: data,
|
|
options: options
|
|
});
|
|
}
|
|
}
|
|
function playHls(videoElement) {
|
|
var number = $('#camera').val();
|
|
var device = Enumerable.from(vm.model.Devices).where(function (o) { return o.Number === number; }).firstOrDefault();
|
|
var url = Enumerable.from(device.Data).where(o => o.Name === '子码流hls').firstOrDefault().Value;
|
|
var hasPtz = Enumerable.from(device.Data).where(o => o.Name === '缩放支持').firstOrDefault();
|
|
if (hasPtz && hasPtz.Value === '是') {
|
|
$('#ptz').show();
|
|
}
|
|
else {
|
|
$('#ptz').hide();
|
|
}
|
|
video.src = url;
|
|
|
|
}
|
|
function playFlv(videoElement) {
|
|
var number = $('#camera').val();
|
|
if (number) {
|
|
var device = Enumerable.from(vm.model.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();
|
|
if (hasPtz && hasPtz.Value === '是') {
|
|
$('#ptz').show();
|
|
}
|
|
else {
|
|
$('#ptz').hide();
|
|
}
|
|
closePlayer(livePlayer);
|
|
try {
|
|
livePlayer = flvjs.createPlayer({
|
|
type: 'flv',
|
|
url: url,
|
|
isLive: true,
|
|
cors: true
|
|
}, {
|
|
enableWorker: true,
|
|
enableStashBuffer: false,
|
|
stashInitialSize: 1,
|
|
fixAudioTimestampGap: false
|
|
});
|
|
livePlayer.attachMediaElement(videoElement);
|
|
livePlayer.load();
|
|
livePlayer.volume = volume;
|
|
livePlayer.muted = muted;
|
|
timer = setInterval(function () {
|
|
console.log('.');
|
|
if (livePlayer.statisticsInfo.speed == 0) {
|
|
console.log('reload1');
|
|
clearInterval(timer);
|
|
playFlv(videoElement);
|
|
}
|
|
else if (decodedFrames && livePlayer.statisticsInfo.decodedFrames <= decodedFrames) {
|
|
console.log('reload2');
|
|
clearInterval(timer);
|
|
playFlv(videoElement);
|
|
}
|
|
else if (livePlayer.buffered.end(0) - livePlayer.currentTime > 1) {
|
|
console.log('reset currentTime');
|
|
livePlayer.currentTime = livePlayer.buffered.end(0) - 0.001;
|
|
}
|
|
decodedFrames = livePlayer.statisticsInfo.decodedFrames;
|
|
}, 10 * 1000);
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
}
|
|
function closePlayer(livePlayer) {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
}
|
|
if (livePlayer != null) {
|
|
try {
|
|
livePlayer.pause();
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
livePlayer.unload();
|
|
livePlayer.detachMediaElement();
|
|
try {
|
|
livePlayer.destroy();
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
livePlayer = null;
|
|
}
|
|
}
|
|
$(document).on('change', '#camera', function (e) {
|
|
UpdateCamera()
|
|
});
|
|
$(document).on('mousedown touchstart', 'img.camera.ajax', function (e) {
|
|
var number = $('#camera').val();
|
|
var cmd = $(this).attr('data-cmd');
|
|
ajax('/App/ExecApi', { token: token, connectionId: connectionId, number: number, method: '/Onvif/' + cmd }, 'post');
|
|
return false;
|
|
});
|
|
$(document).on('mouseup touchend', 'img.camera.ajax', function (e) {
|
|
var number = $('#camera').val();
|
|
var cmd = $(this).attr('data-cmd');
|
|
if (cmd !== 'Stop') {
|
|
setTimeout(function () {
|
|
ajax('/App/ExecApi', { token: token, connectionId: connectionId, number: number, method: '/Onvif/Stop' }, 'post');
|
|
}, 500);
|
|
}
|
|
return false;
|
|
});
|
|
//
|
|
isDebug = true;
|
|
useSignalR = true;
|
|
templateUrl = iotCenter + '/App/GetTemplate?number=' + new URI().search(true).number;
|
|
dataUrl = iotCenter + '/App/GetNode?number=' + new URI().search(true).number;
|
|
data = function data() {
|
|
return {
|
|
f7params: f7params,
|
|
server: localStorage.getItem('server'),
|
|
token: localStorage.getItem('token'),
|
|
model: null
|
|
};
|
|
}
|
|
loadDataSuccess = function () {
|
|
Vue.nextTick(function () {
|
|
UpdateCamera();
|
|
UpdateChart();
|
|
});
|
|
}
|
|
methods = {
|
|
GetScenes() {
|
|
return Enumerable.from(this.model.Scenes).orderBy('o=>o.DisplayOrder').toArray();
|
|
},
|
|
HasDevices(name) {
|
|
return Enumerable
|
|
.from(this.model.Devices)
|
|
.any(function (o) { return o.Name === name });
|
|
},
|
|
GetDevices(name) {
|
|
return Enumerable.from(this.model.Devices).where(function (o) { return o.Name == name; }).orderBy('o=>o.DisplayOrder').toArray();
|
|
},
|
|
GetDeviceDataAttr(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;
|
|
},
|
|
GetDataValue(number, name) {
|
|
return this.GetDeviceDataAttr(number,name,'Value');
|
|
},
|
|
CameraSelected() {
|
|
console.log('camera selected:' + new Date());
|
|
UpdateCamera();
|
|
},
|
|
VolumeChange(e) {
|
|
muted = e.target.muted;
|
|
volume = e.target.volume;
|
|
},
|
|
CallApi(number, method, query) {
|
|
ajax('/App/ExecApi', { token: token, connectionId: connectionId, number: number, method: method, query: query }, 'post');
|
|
},
|
|
AjaxSubmit(event, deviceNumber, dataName) {
|
|
var device = Enumerable.from(vm.model.Devices)
|
|
.where(function (o) { return o.Number === deviceNumber; })
|
|
.firstOrDefault();
|
|
if (device != null) {
|
|
var data = Enumerable.from(device.Data)
|
|
.where(function (o) { return o.Name == dataName })
|
|
.firstOrDefault();
|
|
if (data != null) {
|
|
data.Value = $(event.target).val();
|
|
}
|
|
}
|
|
var form = $(event.target).parents('form');
|
|
var url = form.attr('action') + '?' + form.serialize() + "&token=" + token + "&connectionId=" + connectionId;
|
|
Vue.nextTick(function () {
|
|
ajax(url, null, 'get');
|
|
});
|
|
},
|
|
SendCode1(event) {
|
|
console.log(event.target + ',' + event.type + ',' + event.target.checked);
|
|
var form = $(event.target).parents('form');
|
|
var url = form.attr('action') + '?' + form.serialize();
|
|
var code = form.find('#Code').val();
|
|
if (form.hasClass('type1')) {
|
|
if (event.target.name == "power" && event.target.value == "1") {
|
|
code = 1;
|
|
}
|
|
else {
|
|
var list = {};
|
|
list['power'] = form.find("[name = 'power']:checked").val();
|
|
list['pattern'] = form.find("[name = 'pattern']:checked").val();
|
|
list['direction'] = form.find("[name = 'direction']:checked").val();
|
|
list['wind'] = form.find("[name = 'wind']:checked").val();
|
|
list['temperature'] = form.find("[name = 'temperature']").val();
|
|
list[event.target.name] = event.target.value;
|
|
code = 0;
|
|
for (var name in list) {
|
|
code += parseInt(list[name]);
|
|
}
|
|
}
|
|
url = new URI(url).setQuery('Code', code).toString()+"&token=" + token + "&connectionId=" + connectionId;
|
|
}
|
|
form.find('#Code').val(code);
|
|
Vue.nextTick(function () {
|
|
ajax(url, null, 'get');
|
|
});
|
|
},
|
|
GetDevice(nameOrNumber) {
|
|
return Enumerable.from(this.model.Devices)
|
|
.where(function (o) { return o.Name === nameOrNumber || o.Number === nameOrNumber; })
|
|
.firstOrDefault();
|
|
},
|
|
GetChartDevices() {
|
|
return Enumerable.from(this.model.Devices)
|
|
.where(function (o) { return o.Name === '温湿度传感器' || o.Name === 'PM2.5感应器' || o.Name === '光强检测器' || o.Name === '智能插座'; })
|
|
.orderBy('o=>o.ProductId')
|
|
.toArray();
|
|
}
|
|
};
|
|
function onMessage(method, json, to, from) {
|
|
debug(method + ':' + json);
|
|
var item = JSON.parse(json);
|
|
console.log(method + ':' + json);
|
|
var item = JSON.parse(json);
|
|
if (method == 'DeviceEntityInserted' ||
|
|
method == 'DeviceEntityUpdated' ||
|
|
method == 'DeviceEntityDeleted') {
|
|
loadData();
|
|
}
|
|
else if (method == 'DataEntityInserted' ||
|
|
method == 'DataEntityUpdated' ||
|
|
method == 'DataEntityDeleted') {
|
|
var device = Enumerable.from(vm.model.Devices).firstOrDefault(function (o) { return o.Id === item.DeviceId; })
|
|
if (device) {
|
|
updateItem(device.Data, item);
|
|
toastr.info(device.DisplayName + '更新');
|
|
if ($('canvas#' + device.Number).length) {
|
|
UpdateChart(device.Number);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
start();
|