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.
589 lines
15 KiB
589 lines
15 KiB
//
|
|
var isDebug = isDebug || false;
|
|
var useSignalR = useSignalR || false;
|
|
var isApp = location.href.indexOf('http') !== 0;
|
|
//
|
|
var server = isApp ? localStorage.getItem('server') : null;
|
|
var iotCenter = isApp ? server + '/IoTCenter' : '';
|
|
var wsUrl = iotCenter + '/hub?group=page';
|
|
var templateUrl = templateUrl || null;
|
|
var dataUrl = dataUrl||null;
|
|
var token = isApp ? localStorage.getItem('token') : null;
|
|
//
|
|
var connection = null;
|
|
var connectionId;
|
|
var vm;
|
|
var app;
|
|
//
|
|
var livePlayer;
|
|
var time = '1d';
|
|
var timer;
|
|
var decodedFrames;
|
|
var muted = true;
|
|
var volume = 0.5;
|
|
//
|
|
if (isApp) {
|
|
Framework7.use(Framework7Vue);
|
|
}
|
|
toastr.options.timeOut = 500;
|
|
toastr.options.positionClass = "toast-top-center";
|
|
var f7params = isApp? {
|
|
routes: [],
|
|
name: 'My App',
|
|
id: 'com.myapp.test',
|
|
theme: 'ios',
|
|
}:null;
|
|
//
|
|
//log
|
|
function debug(message) {
|
|
if (isDebug) {
|
|
console.log(message);
|
|
}
|
|
}
|
|
//signalr
|
|
function connect() {
|
|
debug('start connect to server:' + Date());
|
|
if (connection.state === signalR.HubConnectionState.Disconnected) {
|
|
connection.start().then(function () {
|
|
toastr.success('客户端与服务器连接成功！');
|
|
load();
|
|
}).catch(function (err) {
|
|
toastr.error('客户端与服务器连接失败！');
|
|
setTimeout(connect, 15 * 1000);
|
|
});
|
|
}
|
|
}
|
|
function signalRInit() {
|
|
connection.on('Connected', function (id) {
|
|
connectionId = id;
|
|
debug(connectionId);
|
|
});
|
|
connection.onclose(function (err) {
|
|
setTimeout(connect, 15 * 1000);
|
|
});
|
|
connection.on("ServerToClient", function (method, json, to,from) {
|
|
debug(method + ':' + json);
|
|
onMessage(method, json,to, from);
|
|
});
|
|
}
|
|
//加载模板
|
|
function loadTemplate() {
|
|
var formData = new FormData();
|
|
if (isApp) {
|
|
formData.append('token', token);
|
|
}
|
|
axios.post(templateUrl,formData)
|
|
.then(function (response) {
|
|
var html = response.data;
|
|
if (html) {
|
|
$('#template').html(html);
|
|
}
|
|
init();
|
|
})
|
|
.catch(function (error) {
|
|
toastr.error('模板加载失败');
|
|
debug(error);
|
|
});
|
|
}
|
|
//加载数据
|
|
function loadData() {
|
|
var formData = new FormData();
|
|
if (isApp) {
|
|
formData.append('token', token);
|
|
}
|
|
axios.post(dataUrl, formData)
|
|
.then(function (response) {
|
|
debug(response);
|
|
vm.model = response.data;
|
|
toastr.success('数据加载成功！');
|
|
loadDataSuccess();
|
|
})
|
|
.catch(function (error) {
|
|
toastr.error('数据加载失败');
|
|
debug(error);
|
|
});
|
|
}
|
|
//更新数据
|
|
function updateItem(list, item) {
|
|
var update = false;
|
|
for (var i = 0; i < list.length; i++) {
|
|
if (list[i].Id == item.Id) {
|
|
update = true;
|
|
break;
|
|
}
|
|
}
|
|
if (update) {
|
|
list.splice(i, 1, item);
|
|
}
|
|
else {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
//
|
|
//开始
|
|
function start() {
|
|
if (useSignalR) {
|
|
connection = new signalR.HubConnectionBuilder().withUrl(wsUrl).build();
|
|
signalRInit();
|
|
connect();
|
|
}
|
|
else {
|
|
load();
|
|
}
|
|
}
|
|
//
|
|
function load() {
|
|
if (templateUrl) {
|
|
loadTemplate();
|
|
}
|
|
else {
|
|
init();
|
|
}
|
|
}
|
|
//初始化vue
|
|
var data = function () { };
|
|
var mounted = function () { };
|
|
var loadDataSuccess = function () { };
|
|
var methods ={ };
|
|
function init() {
|
|
$('#template style').each(function (i, n) {
|
|
$('head').append(n);
|
|
});
|
|
vm = new Vue({
|
|
el: '#app',
|
|
data: data,
|
|
mounted: function () {
|
|
if (isApp) {
|
|
if (!this.server && location.href.indexOf('config.html') === -1) {
|
|
location.href = "config.html";
|
|
}
|
|
if (!this.token) {
|
|
if (location.href.indexOf('config.html') === -1 && location.href.indexOf('login.html') === -1) {
|
|
location.href = "login.html";
|
|
}
|
|
}
|
|
mounted();
|
|
this.$f7ready((f7) => {
|
|
app = this.$f7;
|
|
$.validator.unobtrusive.parse('form');
|
|
});
|
|
}
|
|
if (dataUrl) {
|
|
loadData();
|
|
}
|
|
},
|
|
methods: methods
|
|
});
|
|
}
|
|
//tools
|
|
//
|
|
function getCode1(code) {
|
|
var pattern = 0;
|
|
var direction = 0;
|
|
var wind = 0;
|
|
var power = 2;
|
|
var temperature = 1;
|
|
if (code > 480 + 2) {
|
|
pattern = 480;
|
|
}
|
|
else if (code > 360 + 2) {
|
|
pattern = 360;
|
|
}
|
|
else if (code > 240 + 2) {
|
|
pattern = 240;
|
|
}
|
|
else if (code > 120 + 2) {
|
|
pattern = 120;
|
|
}
|
|
else {
|
|
pattern = 0;
|
|
}
|
|
code -= pattern;
|
|
if (code > 75 + 2) {
|
|
direction = 75;
|
|
}
|
|
else if (code > 60 + 2) {
|
|
direction = 60;
|
|
}
|
|
else {
|
|
direction = 0;
|
|
}
|
|
code -= direction;
|
|
if (code > 45 + 2) {
|
|
wind = 45;
|
|
}
|
|
else if (code > 30 + 2) {
|
|
wind = 30;
|
|
}
|
|
else if (code > 15 + 2) {
|
|
wind = 15;
|
|
}
|
|
else {
|
|
wind = 0;
|
|
}
|
|
code -= wind;
|
|
if (code === 1) {
|
|
power = 1;
|
|
}
|
|
else {
|
|
power = 2;
|
|
temperature = code - power;
|
|
}
|
|
return {
|
|
pattern: pattern,
|
|
direction: direction,
|
|
wind: wind,
|
|
power: power,
|
|
temperature: temperature
|
|
};
|
|
}
|
|
//
|
|
function hsvToRgb(h, s, v) {
|
|
if (h == "") h = 0;
|
|
if (s == "") s = 0;
|
|
if (v == "") v = 0;
|
|
h = parseFloat(h);
|
|
s = parseFloat(s);
|
|
v = parseFloat(v);
|
|
if (h < 0) h = 0;
|
|
if (s < 0) s = 0;
|
|
if (v < 0) v = 0;
|
|
if (h >= 360) h = 359;
|
|
if (s > 100) s = 100;
|
|
if (v > 100) v = 100;
|
|
s /= 100.0;
|
|
v /= 100.0;
|
|
C = v * s;
|
|
hh = h / 60.0;
|
|
X = C * (1.0 - Math.abs((hh % 2) - 1.0));
|
|
r = g = b = 0;
|
|
if (hh >= 0 && hh < 1) {
|
|
r = C;
|
|
g = X;
|
|
}
|
|
else if (hh >= 1 && hh < 2) {
|
|
r = X;
|
|
g = C;
|
|
}
|
|
else if (hh >= 2 && hh < 3) {
|
|
g = C;
|
|
b = X;
|
|
}
|
|
else if (hh >= 3 && hh < 4) {
|
|
g = X;
|
|
b = C;
|
|
}
|
|
else if (hh >= 4 && hh < 5) {
|
|
r = X;
|
|
b = C;
|
|
}
|
|
else {
|
|
r = C;
|
|
b = X;
|
|
}
|
|
m = v - C;
|
|
r += m;
|
|
g += m;
|
|
b += m;
|
|
r *= 255.0;
|
|
g *= 255.0;
|
|
b *= 255.0;
|
|
r = Math.round(r);
|
|
g = Math.round(g);
|
|
b = Math.round(b);
|
|
hex = r * 65536 + g * 256 + b;
|
|
hex = hex.toString(16, 6);
|
|
len = hex.length;
|
|
if (len < 6)
|
|
for (i = 0; i < 6 - len; i++)
|
|
hex = '0' + hex;
|
|
return '#' + hex;
|
|
}
|
|
//
|
|
function ajax(url, data, type) {
|
|
url = iotCenter + url
|
|
console.log(url);
|
|
type = type || 'get';
|
|
$('.overlay').show();
|
|
$.ajax({
|
|
type: type,
|
|
url: url,
|
|
data: data,
|
|
success: AjaxCallBack
|
|
}).fail(function (result) {
|
|
toastr.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');
|
|
}
|
|
}
|
|
}
|
|
//
|
|
function hsvToRgb(h, s, v) {
|
|
if (h == "") h = 0;
|
|
if (s == "") s = 0;
|
|
if (v == "") v = 0;
|
|
h = parseFloat(h);
|
|
s = parseFloat(s);
|
|
v = parseFloat(v);
|
|
if (h < 0) h = 0;
|
|
if (s < 0) s = 0;
|
|
if (v < 0) v = 0;
|
|
if (h >= 360) h = 359;
|
|
if (s > 100) s = 100;
|
|
if (v > 100) v = 100;
|
|
s /= 100.0;
|
|
v /= 100.0;
|
|
C = v * s;
|
|
hh = h / 60.0;
|
|
X = C * (1.0 - Math.abs((hh % 2) - 1.0));
|
|
r = g = b = 0;
|
|
if (hh >= 0 && hh < 1) {
|
|
r = C;
|
|
g = X;
|
|
}
|
|
else if (hh >= 1 && hh < 2) {
|
|
r = X;
|
|
g = C;
|
|
}
|
|
else if (hh >= 2 && hh < 3) {
|
|
g = C;
|
|
b = X;
|
|
}
|
|
else if (hh >= 3 && hh < 4) {
|
|
g = X;
|
|
b = C;
|
|
}
|
|
else if (hh >= 4 && hh < 5) {
|
|
r = X;
|
|
b = C;
|
|
}
|
|
else {
|
|
r = C;
|
|
b = X;
|
|
}
|
|
m = v - C;
|
|
r += m;
|
|
g += m;
|
|
b += m;
|
|
r *= 255.0;
|
|
g *= 255.0;
|
|
b *= 255.0;
|
|
r = Math.round(r);
|
|
g = Math.round(g);
|
|
b = Math.round(b);
|
|
hex = r * 65536 + g * 256 + b;
|
|
hex = hex.toString(16, 6);
|
|
len = hex.length;
|
|
if (len < 6)
|
|
for (i = 0; i < 6 - len; i++)
|
|
hex = '0' + hex;
|
|
return '#' + hex;
|
|
}
|
|
//
|
|
function changeTime(t) {
|
|
time = t;
|
|
UpdateChart();
|
|
}
|
|
function UpdateChart(deviceNumber) {
|
|
$('canvas.chart').each(function () {
|
|
var canvas = this;
|
|
var number = canvas.id;
|
|
if (!deviceNumber || deviceNumber === number) {
|
|
var device = vm.GetDevice(number);
|
|
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.info('折线图更新成功');
|
|
})
|
|
.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 UpdateCamera() {
|
|
var number = $('#camera').val();
|
|
var video = document.getElementById("liveVideo");
|
|
if (number && video) {
|
|
if (flvjs.isSupported) {
|
|
console.log('flv support');
|
|
playFlv(video);
|
|
}
|
|
else {
|
|
playHls(video);
|
|
}
|
|
}
|
|
}
|
|
function playHls(videoElement) {
|
|
var number = $('#camera').val();
|
|
var device = vm.model.Devices
|
|
? Enumerable.from(vm.model.Devices).where(function (o) { return o.Number === number; }).firstOrDefault()
|
|
: vm.model;
|
|
if (device) {
|
|
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 = vm.model.Devices
|
|
? Enumerable.from(vm.model.Devices).where(function (o) { return o.Number === number; }).firstOrDefault()
|
|
: vm.model;
|
|
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;
|
|
}); |