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.
509 lines
19 KiB
509 lines
19 KiB
var RealtimePanel = function (parent) {
|
|
this.Parent = parent;
|
|
this.ResultList = new ResultList(this, '#realtime-result-list');
|
|
|
|
this.TaskInfo = null;
|
|
this.TaskStateCheckTimer = null;
|
|
|
|
this.isDecimal = true;
|
|
|
|
this.PullGroundData = null;
|
|
this.PreValues = {
|
|
Longitude: 0,
|
|
Latitude: 0,
|
|
Height: 0
|
|
};
|
|
|
|
this.Startup = function () {
|
|
this.ResultList.Startup();
|
|
this.InitReleaseTime();
|
|
this.InputChange();
|
|
|
|
this.OnFileOnchange('#param-upload');
|
|
this.OnFileOnchange('#file-input');
|
|
$('#calc-btn').on('click', this.OnCalcButtonClick.bind(this));
|
|
$('#reset-btn').on('click', this.OnResetButtonClick.bind(this));
|
|
$('#add-label').on('click', this.OnAddLabelButtonClick.bind(this));
|
|
$('#control-switch a').on('click', this.OnSwitchButtonClick.bind(this));
|
|
$('.type-select span').on('click', this.OnTypeSelectClick.bind(this));
|
|
};
|
|
|
|
this.InitReleaseTime = function () {
|
|
$('#release-date').datetimebox({
|
|
panelWidth: 190,
|
|
panelHeight: 230,
|
|
panelAlign: 'right',
|
|
showSeconds: false,
|
|
currentText: '现在'
|
|
});
|
|
};
|
|
|
|
this.OnSwitchButtonClick = function (event) {
|
|
if ($(event.target).is('a'))
|
|
$(event.target).parent().toggleClass('control-switch-on');
|
|
else
|
|
$(event.target).toggleClass('control-switch-on');
|
|
|
|
let isPullDown = $("#control-switch").hasClass("control-switch-on");
|
|
this.Parent.Map.IsPullGround(isPullDown);
|
|
};
|
|
|
|
this.SwitchValues = function (isPullDown) {
|
|
let longitude = $('#longitude').val();
|
|
let latitude = $('#latitude').val();
|
|
let height = $('#height').val();
|
|
|
|
if (isPullDown) {
|
|
var data = this.PullGroundData[this.PullGroundData.length - 1];
|
|
$('#longitude').val(data[0]);
|
|
$('#latitude').val(data[1]);
|
|
$('#height').val(data[2]);
|
|
}
|
|
else {
|
|
$('#longitude').val(this.PreValues.Longitude);
|
|
$('#latitude').val(this.PreValues.Latitude);
|
|
$('#height').val(this.PreValues.Height);
|
|
}
|
|
|
|
this.PreValues.Longitude = longitude;
|
|
this.PreValues.Latitude = latitude;
|
|
this.PreValues.Height = height;
|
|
};
|
|
|
|
this.OnFileOnchange = function (id) {
|
|
var uploader = $(id);
|
|
uploader.fileinput({
|
|
language: 'zh',
|
|
uploadUrl: '/Beijing/UploadFile',
|
|
showUpload: false,
|
|
showRemove: false,
|
|
showCancel: false,
|
|
showCaption: false,
|
|
showPreview: false,
|
|
uploadClass: "btn btn-primary"
|
|
});
|
|
|
|
uploader.on('change', function (event) {
|
|
uploader.fileinput("upload");
|
|
$('.kv-upload-progress').hide();
|
|
});
|
|
|
|
if (id === '#param-upload') {
|
|
uploader.on('fileuploaded', function (event, data, previewId, index) {
|
|
this.Parent.Map.ClearLiveLayer('compare-layer');
|
|
|
|
var pullGroundData = [];
|
|
|
|
$(data.response).each(function (index, point) {
|
|
pullGroundData.push([point.Longitude, point.Latitude, point.Height, moment(point.DateTime).format("YYYYMMDD_HHmmss")]);
|
|
}.bind(this));
|
|
|
|
console.log(pullGroundData);
|
|
|
|
this.PullGroundData = pullGroundData;
|
|
var value = this.PullGroundData[this.PullGroundData.length - 1];
|
|
var time = moment(value[3], "YYYYMMDD_HHmmss");
|
|
var type = $('.type-select span.active').attr('type');
|
|
if (type === 'decimal') {
|
|
$('#longitude').val(value[0]);
|
|
$('#latitude').val(value[1]);
|
|
} else {
|
|
$('#lng-degree').val(this.getLngLatDecimal(value[0]).degree);
|
|
$('#lng-minute').val(this.getLngLatDecimal(value[0]).minute);
|
|
$('#lng-second').val(this.getLngLatDecimal(value[0]).second.toFixed(2));
|
|
$('#lat-degree').val(this.getLngLatDecimal(value[1]).degree);
|
|
$('#lat-minute').val(this.getLngLatDecimal(value[1]).minute);
|
|
$('#lat-second').val(this.getLngLatDecimal(value[1]).second.toFixed(2));
|
|
}
|
|
|
|
$('#height').val(value[2]);
|
|
$("#release-date").datetimebox('setValue', moment(time).format('YYYY/MM/DD HH:mm'));
|
|
}.bind(this));
|
|
} else {
|
|
uploader.on('fileuploaded', function (event, data, previewId, index) {
|
|
var marks = [];
|
|
var newArray = [];
|
|
|
|
data.response.forEach(function (item, index) {
|
|
marks.push(item.Longitude, item.Latitude, moment(item.DateTime).format("YYYYMMDD_HHmmss"));
|
|
});
|
|
|
|
$(data.response).each(function (index, point) {
|
|
newArray.push([point.Longitude, point.Latitude, point.Height, moment(point.DateTime).format("YYYYMMDD_HHmmss")]);
|
|
});
|
|
|
|
this.PullGroundData = newArray;
|
|
|
|
this.Parent.Map.LoadRealTimeData('compare-layer', newArray);
|
|
}.bind(this));
|
|
}
|
|
|
|
$('.hidden-xs').text('上传...');
|
|
$('.hidden-xs').addClass('realtime-btn');
|
|
$('.hidden-xs').css({
|
|
'marginLeft': '-2px',
|
|
'position': 'absolute',
|
|
'text-align': 'center',
|
|
'float': 'left'
|
|
});
|
|
$('.file-input').css({
|
|
'width': '86px',
|
|
'float': 'left'
|
|
});
|
|
|
|
$('.live-file .hidden-xs').text('实况数据...');
|
|
};
|
|
|
|
this.OnCalcButtonClick = function () {
|
|
// Close details
|
|
this.ResultList.Reset();
|
|
|
|
// Prepare task info
|
|
this.TaskInfo = {
|
|
Id: this.CreateId(),
|
|
Result: null,
|
|
CreateTime: new Date()
|
|
};
|
|
|
|
// Submit task
|
|
if (Config.InProductionMode)
|
|
this.SubmitTask(this.TaskInfo.Id);
|
|
else
|
|
this.SubmitTest(this.TaskInfo.Id, 39.917, 116.405);
|
|
};
|
|
|
|
this.OnResetButtonClick = function () {
|
|
this.Reboot('success', null);
|
|
};
|
|
|
|
this.OnAddLabelButtonClick = function () {
|
|
var value = $('#label-input').val().trim();
|
|
if (value.length === 0)
|
|
return;
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
dataType: 'json',
|
|
data: {
|
|
userId: parseInt($('#user-info').attr('userid')),
|
|
taskId: this.TaskInfo.Id,
|
|
name: value
|
|
},
|
|
url: '/Beijing/AddTag',
|
|
success: function (result) {
|
|
var label = $('<a href="javascript:;" tagId="{0}">{1}<span class="clear-btn"><i></i></span></a>'.format(result, value));
|
|
label.on('click', this.SetActiveLabel.bind(this));
|
|
label.find('.clear-btn').on('click', this.RemoveLabel.bind(this));
|
|
|
|
$('#realtime-slider').find('.label-list:first').append(label);
|
|
this.Relayout();
|
|
}.bind(this)
|
|
});
|
|
};
|
|
|
|
this.CheckTaskState = function () {
|
|
$.ajax({
|
|
type: "GET",
|
|
dataType: 'json',
|
|
url: this.getCheckUrl(this.TaskInfo.Id),
|
|
success: function (result) {
|
|
this.TaskInfo.Result = result;
|
|
|
|
if (result.code === 200) {
|
|
this.AddTask(this.TaskInfo.Id);
|
|
this.LoadData(result);
|
|
this.TaskStopped();
|
|
}
|
|
else if (this.IsTaskTimeout()) {
|
|
this.Reboot("error", "任务计算已超时，请重新提交计算。");
|
|
this.TaskStopped();
|
|
}
|
|
}.bind(this)
|
|
});
|
|
};
|
|
|
|
this.getCheckUrl = function (taskId) {
|
|
if (Config.InProductionMode)
|
|
return 'http://{0}/bj/check?num={1}'.format(Config.ApiRoot, taskId);
|
|
else
|
|
return '/Content/json/beijing/check.json'.format(taskId);
|
|
};
|
|
|
|
this.getJsonUrl = function (taskId) {
|
|
if (Config.InProductionMode)
|
|
return "http://{0}/bj/getresult/{1}.json".format(Config.ApiRoot, taskId);
|
|
else
|
|
return '/Content/json/beijing/{0}.json'.format(taskId);
|
|
};
|
|
|
|
this.LoadData = function (result) {
|
|
$.getJSON(this.getJsonUrl(result.num), function (data) {
|
|
var param = this.GetTaskParams(this.TaskInfo.Id);
|
|
this.Parent.Map.LoadAverageData('realtime-layer', {
|
|
ReleaseTime: param.releaseTime,
|
|
Longitude: param.longitude,
|
|
Latitude: param.latitude,
|
|
Height: param.height
|
|
}, data);
|
|
|
|
this.Parent.Map.GetTargetPolygon(data);
|
|
this.Parent.Map.SetForecastData(data);
|
|
this.ResultList.SetData('realtime-layer', [param.latitude, param.longitude], data);
|
|
}.bind(this));
|
|
};
|
|
|
|
this.Reboot = function (type, text) {
|
|
$.ajax({
|
|
type: "GET",
|
|
dataType: 'json',
|
|
url: 'http://{0}/bj/reboot'.format(Config.ApiRoot),
|
|
success: function (data) {
|
|
this.MessageBox(type, text !== null ? text : data.info);
|
|
}.bind(this)
|
|
});
|
|
};
|
|
|
|
this.TaskStarted = function (taskId) {
|
|
this.TaskStateCheckTimer = setInterval(this.CheckTaskState.bind(this), 10000);
|
|
$('#task-id-span').text(taskId);
|
|
$('.shade').show();
|
|
};
|
|
|
|
this.TaskStopped = function () {
|
|
clearInterval(this.TaskStateCheckTimer);
|
|
$('.shade').hide();
|
|
};
|
|
|
|
this.CreateId = function () {
|
|
var time = this.GetReleaseTime();
|
|
time = time.replace(new RegExp('-', 'g'), "");
|
|
|
|
var now = new Date();
|
|
return time + now.getMilliseconds();
|
|
};
|
|
|
|
this.IsTaskTimeout = function () {
|
|
var fromTime = this.TaskInfo.CreateTime.getTime();
|
|
var toTime = (new Date).getTime();
|
|
var seconds = (toTime - fromTime) / 1000;
|
|
return seconds > 600;
|
|
};
|
|
|
|
this.GetCalcPramas = function (taskId) {
|
|
var type = $('.type-select span.active').attr('type');
|
|
var lngDegree = $('#lng-degree').val();
|
|
var lngMinute = $('#lng-minute').val();
|
|
var lngSecond = $('#lng-second').val();
|
|
var latDegree = $('#lat-degree').val();
|
|
var latMinute = $('#lat-minute').val();
|
|
var latSecond = $('#lat-second').val();
|
|
|
|
return {
|
|
lon: type === 'decimal' ? $('#longitude').val() : this.getLngLatDegree(lngDegree, lngMinute, lngSecond),
|
|
lat: type === 'decimal' ? $('#latitude').val() : this.getLngLatDegree(latDegree, latMinute, latSecond),
|
|
num: taskId,
|
|
hgt: $('#height').val(),
|
|
rlen: $('#time-length-input').val(),
|
|
tlen: $('#interval-length-input').val(),
|
|
rlen2: $('#spread-length-input').val(),
|
|
tlen2: $('#interval-spread-input').val(),
|
|
tpoint: this.GetReleaseTime(),
|
|
pullGround: $("#control-switch").hasClass("control-switch-on") ? 1 : -1
|
|
};
|
|
};
|
|
|
|
this.getLngLatDegree = function (degree, minute, second) {
|
|
var str = parseFloat(minute) + parseFloat(second / 60);
|
|
var value = parseFloat(str / 60) + parseFloat(degree);
|
|
return value.toFixed(6);
|
|
};
|
|
|
|
this.getLngLatDecimal = function (value) {
|
|
var text = value.split(".");
|
|
var degree = text[0];
|
|
|
|
var temp = "0." + text[1];
|
|
temp = String(temp * 60);
|
|
var str = temp.split(".");
|
|
var minute = str[0];
|
|
|
|
temp = "0." + str[1];
|
|
temp = temp * 60;
|
|
var second = temp;
|
|
return {
|
|
degree: degree,
|
|
minute: minute,
|
|
second: second
|
|
};
|
|
};
|
|
|
|
this.GetTaskParams = function (taskId) {
|
|
var type = $('.type-select span.active').attr('type');
|
|
var lngDegree = $('#lng-degree').val();
|
|
var lngMinute = $('#lng-minute').val();
|
|
var lngSecond = $('#lng-second').val();
|
|
var latDegree = $('#lat-degree').val();
|
|
var latMinute = $('#lat-minute').val();
|
|
var latSecond = $('#lat-second').val();
|
|
|
|
return {
|
|
taskId: taskId,
|
|
region: 'bj',
|
|
longitude: type === 'decimal' ? $('#longitude').val() : this.getLngLatDegree(lngDegree, lngMinute, lngSecond),
|
|
latitude: type === 'decimal' ? $('#latitude').val() : this.getLngLatDegree(latDegree, latMinute, latSecond),
|
|
height: $('#height').val(),
|
|
simulatedDuration: $('#time-length-input').val(),
|
|
simulatedInterval: $('#interval-length-input').val(),
|
|
releaseTime: $("#release-date").datetimebox('getValue'),
|
|
resultState: this.TaskInfo.Result.code,
|
|
resultMessage: this.TaskInfo.Result.code === '200' ? '成功' : this.TaskInfo.Result.info
|
|
};
|
|
};
|
|
|
|
this.GetReleaseTime = function () {
|
|
var time = $('#release-date').datetimebox('getValue');
|
|
return moment(time, 'YYYY/MM/DD HH:mm').format('YYYY-MM-DD-HH-mm');
|
|
};
|
|
|
|
this.SubmitTask = function (taskId) {
|
|
var params = this.GetCalcPramas(taskId);
|
|
var partten = 'http://{0}/bj/{1}?lon={2}&lat={3}&num={4}&hgt={5}&rlen={6}&tlen={7}&tpoint={8}&rlen2={9}&tlen2={10}&fac={11}';
|
|
var url = partten.format(Config.ApiRoot, 'backward', params.lon, params.lat, params.num, params.hgt, params.rlen, params.tlen, params.tpoint, params.rlen2, params.tlen2, params.pullGround);
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
dataType: 'json',
|
|
url: url,
|
|
beforeSend: function () {
|
|
this.Parent.Map.CenterMap(parseFloat(params.lat), parseFloat(params.lon));
|
|
this.TaskStarted(taskId);
|
|
}.bind(this),
|
|
success: function (result) {
|
|
this.TaskStopped();
|
|
this.MessageBox("warning", result.info);
|
|
}.bind(this),
|
|
complete: function () {
|
|
$('.param-label').removeClass('label-shade');
|
|
}.bind(this)
|
|
});
|
|
};
|
|
|
|
this.SubmitTest = function (taskId, lat, lon) {
|
|
$.ajax({
|
|
type: "GET",
|
|
dataType: 'json',
|
|
url: this.getCheckUrl(taskId),
|
|
success: function (result) {
|
|
this.TaskInfo.Id = taskId;
|
|
this.TaskInfo.Result = result;
|
|
|
|
this.Parent.Map.CenterMap(lat, lon);
|
|
this.AddTask(this.TaskInfo.Id);
|
|
this.LoadData(result);
|
|
}.bind(this)
|
|
});
|
|
};
|
|
|
|
this.AddTask = function (taskId) {
|
|
$.ajax({
|
|
type: "POST",
|
|
dataType: 'json',
|
|
url: '/Beijing/AddTask',
|
|
data: this.GetTaskParams(taskId),
|
|
success: function (result) {
|
|
this.Parent.HistoryPanel.InitDateTimes();
|
|
this.Parent.HistoryPanel.ReloadDataGrid();
|
|
}.bind(this)
|
|
});
|
|
};
|
|
|
|
this.MessageBox = function (type, text) {
|
|
swal({
|
|
title: "",
|
|
text: text,
|
|
type: type,
|
|
icon: type,
|
|
showCancelButton: false,
|
|
confirmButtonText: "确定",
|
|
closeOnConfirm: true
|
|
});
|
|
};
|
|
|
|
this.SetActiveLabel = function (event) {
|
|
$(event.target).toggleClass('active');
|
|
};
|
|
|
|
this.RemoveLabel = function (event) {
|
|
if ($(event.target).parent().is('a'))
|
|
$(event.target).parent().remove();
|
|
else
|
|
$(event.target).parents('a').remove();
|
|
this.Relayout();
|
|
};
|
|
|
|
this.Relayout = function () {
|
|
var windowHeight = $(window).height();
|
|
var labelHeight = $('#realtime-slider').find('.label-list:first').height();
|
|
|
|
var resultList = $('#realtime-result-list');
|
|
resultList.find('.calc-list ul').height(windowHeight - labelHeight - (this.isDecimal ? 742 : 790));
|
|
};
|
|
|
|
this.OnTypeSelectClick = function (event) {
|
|
$('.type-select span').removeClass("active");
|
|
$(event.target).addClass("active");
|
|
|
|
if ($(event.target).attr('type') === 'decimal') {
|
|
this.isDecimal = true;
|
|
this.Relayout();
|
|
|
|
$('#lng-decimal').show();
|
|
$('#lat-decimal').show();
|
|
$('#lng-degrees').hide();
|
|
$('#lat-degrees').hide();
|
|
$('.degree-text').hide();
|
|
} else {
|
|
this.isDecimal = false;
|
|
this.Relayout();
|
|
|
|
$('#lng-decimal').hide();
|
|
$('#lat-decimal').hide();
|
|
$('#lng-degrees').show();
|
|
$('#lat-degrees').show();
|
|
$('.degree-text').show();
|
|
}
|
|
};
|
|
|
|
this.InputChange = function () {
|
|
$('#lng-degree').on('change', this.checkInput.bind(this, $('#lng-minute'), $('#lng-second'), 180));
|
|
$('#lng-minute').on('change', this.checkInput.bind(this, $('#lng-degree'), $('#lng-second'), 60));
|
|
$('#lng-second').on('change', this.checkInput.bind(this, $('#lng-degree'), $('#lng-minute'), 60));
|
|
|
|
$('#lat-degree').on('change', this.checkInput.bind(this, $('#lat-minute'), $('#lng-second'), 180));
|
|
$('#lat-minute').on('change', this.checkInput.bind(this, $('#lat-degree'), $('#lng-second'), 60));
|
|
$('#lat-second').on('change', this.checkInput.bind(this, $('#lat-degree'), $('#lng-minute'), 60));
|
|
};
|
|
|
|
this.checkInput = function (value1, value2, maxNumber, event) {
|
|
$('#lng-degree-text').text('');
|
|
$('#lng-degree-text').removeClass('degree-text-error');
|
|
if ($(event.target).val().trim() === '' || value1.val().trim() === '' || value2.val().trim() === '' || $(event.target).val() > maxNumber || $(event.target).val() < 0) {
|
|
$('#lng-degree-text').text('请输入正确的值。');
|
|
$('#lng-degree-text').addClass('degree-text-error');
|
|
return;
|
|
}
|
|
|
|
if ($(event.target).attr('id') === 'lng-degree')
|
|
$('#lng-degree-text').text(this.getLngLatDegree($(event.target).val(), value1.val(), value2.val()));
|
|
else if ($(event.target).attr('id') === 'lng-minute')
|
|
$('#lng-degree-text').text(this.getLngLatDegree(value1.val(), $(event.target).val(), value2.val()));
|
|
else if ($(event.target).attr('id') === 'lng-second')
|
|
$('#lng-degree-text').text(this.getLngLatDegree(value1.val(), value2.val(), $(event.target).val()));
|
|
else if ($(event.target).attr('id') === 'lat-degree')
|
|
$('#lng-degree-text').text(this.getLngLatDegree($(event.target).val(), value1.val(), value2.val()));
|
|
else if ($(event.target).attr('id') === 'lat-minute')
|
|
$('#lng-degree-text').text(this.getLngLatDegree(value1.val(), $(event.target).val(), value2.val()));
|
|
else if ($(event.target).attr('id') === 'lat-second')
|
|
$('#lng-degree-text').text(this.getLngLatDegree(value1.val(), value2.val(), $(event.target).val()));
|
|
}
|
|
};
|