851 lines
31 KiB
JavaScript
851 lines
31 KiB
JavaScript
//Список автомобилей
|
||
class TObjects
|
||
{
|
||
constructor(map)
|
||
{
|
||
this.objects = [];
|
||
this.map=map;
|
||
|
||
//Запускаю таймер для обновления объектов раз в 10 секунд
|
||
setInterval(function(thiz){ return function(){thiz.updateData();}; }(this), 10000);
|
||
//Запускаю функцию для перемещения объектов по прогнозному маршруту
|
||
setInterval(function(thiz){ return function(){thiz.updateForecastLonLat();};}(this), 500);
|
||
}
|
||
|
||
//Фильтруем объекты для заполнения в таблицу
|
||
filtering()
|
||
{
|
||
showProgressBar(document.getElementById('div_tbl_monitoring'));
|
||
|
||
let company_id=document.getElementById("company_id_m");
|
||
if(company_id==null)
|
||
{
|
||
company_id=g_user.company_id;
|
||
}else
|
||
{
|
||
company_id=company_id.value;
|
||
}
|
||
|
||
let data = {
|
||
company_id: company_id,
|
||
cnumber: document.getElementById("cnumber_m").value
|
||
};
|
||
|
||
$.ajax({
|
||
url: '/monitoring/pscripts/objects.php',
|
||
data: JSON.stringify(data),
|
||
contentType: 'application/json; charset=utf-8',
|
||
type: "POST",
|
||
dataType: "json",
|
||
success: function(thiz){return function(data,status){
|
||
if(status=='success')
|
||
{
|
||
thiz.objects = []; //Удаляю старые объекты
|
||
|
||
//Приходит JSON уже в объектах
|
||
let features = [];
|
||
for(let i=0;i<data.length;i++)
|
||
{
|
||
let feature=null;
|
||
let lon=parseFloat(data[i].lon);
|
||
let lat=parseFloat(data[i].lat);
|
||
if(!isNaN(lat) && !isNaN(lon))
|
||
{
|
||
let point = new ol.geom.Point(ol.proj.transform([lon,lat], 'EPSG:4326','EPSG:3857'));
|
||
|
||
feature = new ol.Feature({geometry: point,name: data[i].name,icon_name: data[i].icon_name});
|
||
feature.setStyle(createFatypeStyleDel(feature,false));
|
||
|
||
feature.userType="TObject";
|
||
feature.userID=data[i].id;
|
||
|
||
features.push(feature);
|
||
}
|
||
|
||
var obj = new TObject();
|
||
obj.feature=feature;
|
||
|
||
obj.id=data[i].id;
|
||
obj.seq=data[i].seq;
|
||
obj.active=data[i].active; //Активная или нет перевозка
|
||
obj.name=data[i].name;
|
||
obj.terminal_name=data[i].terminal_name;
|
||
obj.declaration=data[i].declaration;
|
||
obj.icon_name=data[i].icon_name;
|
||
obj.lon=parseFloat(data[i].lon);
|
||
obj.lat=parseFloat(data[i].lat);
|
||
obj.alt=parseFloat(data[i].alt);
|
||
obj.utime=parseInt(data[i].utime);
|
||
obj.speed=data[i].speed;
|
||
obj.date=data[i].date;
|
||
obj.geofences=data[i].geofences;
|
||
|
||
obj.bat=parseFloat(data[i].bat);
|
||
obj.bat_date=data[i].bat_date;
|
||
obj.tros=parseFloat(data[i].tros);
|
||
obj.tros_date=data[i].tros_date;
|
||
obj.box=parseFloat(data[i].box);
|
||
obj.box_date=data[i].box_date;
|
||
|
||
obj.sensors=data[i].sensors;
|
||
//alert("obj.box = "+obj.box+" obj.box_date = "+obj.box_date);
|
||
|
||
thiz.objects.push(obj);
|
||
}
|
||
|
||
g_vectorSource.clear(false);
|
||
g_vectorSource.addFeatures(features);
|
||
|
||
|
||
thiz.fillRezDiv();
|
||
}else
|
||
{
|
||
alert(status);
|
||
}
|
||
hideProgressBar(document.getElementById('div_tbl_monitoring'));
|
||
}}(this)
|
||
});
|
||
}
|
||
|
||
//Заполнить результатом выборки DIV в виде таблицы
|
||
fillRezDiv()
|
||
{
|
||
let div=document.getElementById("div_tbl_monitoring");
|
||
delChild(div);
|
||
div.innerHTML='<table id="thetable" border="0" style="width:100%;" class="SShow"><thead><tr style="background-color: rgb(218, 218, 218);"><th style="width:24px;"></th><th id="object_ch_M" style="width:36px;text-decoration:underline;cursor: pointer;">'+trt('View')+'.</th><th></th><th>'+trt('Object_of_observation')+'</th><th style="width:70px;">'+trt('Speed')+'</th><th style="width:75px;white-space:nowrap;" valign="middle"><img src="/resources/images/clock.png" alt="">'+trt('Date')+'</th></tr></thead><tbody></tbody></table>';
|
||
|
||
var theTable = document.getElementById('thetable');
|
||
|
||
for(i=0;i<this.objects.length;i++)
|
||
{
|
||
let tr = document.createElement('tr');
|
||
let bgColor='';
|
||
if (i%2==0) bgColor='var(--row-color-1)'; else bgColor='var(--row-color-2)';
|
||
tr.style.backgroundColor=bgColor;
|
||
tr.onmouseover=function(){this.style.backgroundColor='var(--btn-color2)';};
|
||
tr.onmouseout=function(val1,val2){return function(){val1.style.backgroundColor=val2;}}(tr,bgColor);
|
||
|
||
let td;
|
||
td = document.createElement('td');
|
||
td.style.cssText="width:24px;text-align:center;vertical-align:top;";
|
||
td.innerHTML='<img id="object_down_btn_'+this.objects[i].id+'" src="/resources/images/right.png" alt="" style="cursor: pointer;">';
|
||
tr.appendChild(td);
|
||
|
||
td = document.createElement('td');
|
||
td.style.cssText="text-align: center;";
|
||
td.innerHTML='<input id="object_ch_'+this.objects[i].uid+'" type="checkbox" checked/>';
|
||
tr.appendChild(td);
|
||
|
||
td = document.createElement('td');
|
||
td.style.cssText="text-align: center; width:30px;";
|
||
td.innerHTML='<img src="../resources/data/icons/'+this.objects[i].icon_name+'" alt="">';
|
||
tr.appendChild(td);
|
||
|
||
td = document.createElement('td');
|
||
td.style.cursor='pointer';
|
||
td.innerHTML=this.objects[i].name;
|
||
td.onclick=function(object){return function(){object.goToCenter();}}(this.objects[i]);
|
||
tr.appendChild(td);
|
||
|
||
td = document.createElement('td');
|
||
td.style.cssText="white-space:nowrap;";
|
||
td.style.cursor='pointer';
|
||
if(this.objects[i].speed!=null)
|
||
td.innerHTML=this.objects[i].speed+' '+trt('km_h');
|
||
td.onclick=function(object){return function(){object.goToCenter();}}(this.objects[i]);
|
||
tr.appendChild(td);
|
||
|
||
td = document.createElement('td');
|
||
td.id='date_'+this.objects[i].uid;
|
||
td.style.cursor='pointer';
|
||
td.innerHTML=this.objects[i].date;
|
||
td.onclick=function(object){return function(){object.goToCenter();}}(this.objects[i]);
|
||
tr.appendChild(td);
|
||
|
||
/*td = document.createElement('td');
|
||
var tros='-';
|
||
if(!isNaN(this.objects[i].tros))
|
||
tros=this.objects[i].tros +' '+ trt('Flag');
|
||
|
||
var tros_date='-';
|
||
if (typeof this.objects[i].tros_date != 'undefined')
|
||
tros_date=this.objects[i].tros_date;
|
||
|
||
var bat='-';
|
||
if(!isNaN(this.objects[i].bat)) bat= this.objects[i].bat+'%';
|
||
|
||
var bat_date='-';
|
||
if (typeof this.objects[i].bat_date != 'undefined')
|
||
bat_date=this.objects[i].bat_date;
|
||
|
||
var box='-';
|
||
if(!isNaN(this.objects[i].box))
|
||
box=this.objects[i].box +' '+ trt('Flag');
|
||
|
||
var box_date='-';
|
||
if (typeof this.objects[i].box_date != 'undefined')
|
||
box_date=this.objects[i].box_date;
|
||
|
||
td.innerHTML='<table border="0" style="width:100%;">\
|
||
<tr id="cell_'+this.objects[i].id+'" style="cursor: pointer;"><td style="width:30px;"></td><td></td><td style="width:20px;"><img src="/resources/images/clock.png" alt=""></td><td style="width:145px;"></td></tr>\
|
||
<tr style="background-color: #ffffff;"><td colspan="4" id="cell_data_'+this.objects[i].id+'" style="display: none;">\
|
||
<table border="0" style="width:100%;">\
|
||
<tr><td style="width:30px;"> </td><td style="border-bottom: 1px solid #7a7a7a;" colspan="4">\
|
||
<table>\
|
||
<tr>\
|
||
<td style="padding: 1px; width: 100%;">\
|
||
<table style="width: 100%;" border="0">\
|
||
<tr>\
|
||
<td style="width: 10px; padding: 1px; white-space: nowrap;">Маршрут, </td>\
|
||
<td style="width: 10px; padding: 1px;">c</td>\
|
||
<td style="width: 40%; padding: 1px;">\
|
||
<table style="width: 100%; table-layout: fixed; border-spacing: 0px; border-collapse: collapse;" border="0">\
|
||
<tr>\
|
||
<td style="width: 100%;"><input style="width: 100%;" name="date_start" value="" id="filter_date_route_start_'+this.objects[i].id+'" type="text"></td>\
|
||
<td style="width: 25px;"><img id="filter_date_route_start_trigger_'+this.objects[i].id+'" src="../resources/images/datepicker.jpg" style="margin-left: 1px; cursor: pointer;"></td>\
|
||
</tr>\
|
||
</table>\
|
||
</td>\
|
||
<td style="width: 10px; padding: 1px; white-space: nowrap;" width="1%">по</td>\
|
||
<td style="width: 40%; padding: 1px;">\
|
||
<table style="width: 100%; table-layout: fixed; border-spacing: 0px; border-collapse: collapse;" border="0">\
|
||
<tr>\
|
||
<td style="width: 100%;"><input style="width: 100%;" name="date_end" value="" id="filter_date_route_end_'+this.objects[i].id+'" type="text"></td>\
|
||
<td style="width: 25px;"><img id="filter_date_route_end_trigger_'+this.objects[i].id+'" src="../resources/images/datepicker.jpg" style="cursor: pointer; margin-left: 1px;"></td>\
|
||
</tr>\
|
||
</table>\
|
||
</td>\
|
||
</tr>\
|
||
</table>\
|
||
</td>\
|
||
</tr>\
|
||
<tr>\
|
||
<td style="padding: 1px; width: 100%;">\
|
||
<table style="width: 100%;" border="0">\
|
||
<tr>\
|
||
<td style="padding: 1px; white-space: nowrap;text-align:left;"><button onclick="g_objects.getObjectByID('+this.objects[i].id+').showDetailedInformation();">'+trt('Detailed_information')+'</button></td><td><td style="padding: 1px; white-space: nowrap;text-align:right;" width="1%" colspan="3"><button onclick="g_objects.getObjectByID('+this.objects[i].id+').getObjectTrack();">Отобразить маршрут</button><button onclick="g_objects.getObjectByID('+this.objects[i].id+').hideObjectTrack();">Скрыть</button></td>\
|
||
</tr>\
|
||
</table>\
|
||
</td>\
|
||
</tr>\
|
||
</table>\
|
||
</td></tr>\
|
||
</table>\
|
||
</td></tr></table>';
|
||
|
||
|
||
tr.appendChild(td);*/
|
||
theTable.tBodies[0].appendChild(tr);
|
||
|
||
|
||
//Формирую раскрывающийся список
|
||
tr = document.createElement('tr');
|
||
tr.id=this.objects[i].id;
|
||
tr.style.cssText="background-color:var(--back-color-3);display:none";
|
||
td = document.createElement('td');
|
||
td.colSpan=6;
|
||
|
||
let html='';
|
||
|
||
html+='<b>'+trt('Geofence_groups')+':</b> <img id="object_edit4_'+this.objects[i].uid+'" src="/resources/images/edit16.png" alt="'+trt('Edit')+'" title="'+trt('Edit')+'" style="cursor:pointer;"> '+this.objects[i].geofences+'<br>';
|
||
|
||
html+=' <table border="0" style="width:100%; border:none;">\
|
||
<tr><td style="width:30px;border:none;"> </td><td style="width: 50%;border:none;border-bottom: 1px solid #7a7a7a;">'+trt('Terminal')+'</td><td colspan="4" style="border:none;border-bottom: 1px solid #7a7a7a;">'+this.objects[i].terminal_name+'</td></tr>';
|
||
for(let j=0;j<this.objects[i].sensors.length;j++)
|
||
{
|
||
html+='<tr><td style="width:30px;border:none;"> </td><td style="width: 50%;border:none;border-bottom: 1px solid #7a7a7a;">'+trt(this.objects[i].sensors[j].name)+'</td><td id="svalue_'+this.objects[i].sensors[j].id+'_'+this.objects[i].uid+'" style="border:none;border-bottom: 1px solid #7a7a7a;">'+this.objects[i].sensors[j].value+'</td><td>'+this.objects[i].sensors[j].type_name+'</td><td style="width:20px;border:none;border-bottom: 1px solid #7a7a7a;"><img src="/resources/images/clock.png" alt=""></td><td id="sdate_'+this.objects[i].sensors[j].id+'_'+this.objects[i].uid+'" style="width:145px;border:none;border-bottom: 1px solid #7a7a7a;">'+this.objects[i].sensors[j].date+'</td></tr>';
|
||
}
|
||
html+='\
|
||
<tr style="width: 100%;"><td style="border:none; text-align: right; width: 100%;" colspan="6">\
|
||
<table>\
|
||
<tr>\
|
||
<td style="padding: 1px; width: 100%; border:none;">\
|
||
<table style="width: 100%;" border="0">\
|
||
<tr>\
|
||
<td style="width: 10px; padding: 1px; white-space: nowrap; border:none;">'+trt('Route')+', </td>\
|
||
<td style="width: 10px; padding: 1px;border:none;">c</td>\
|
||
<td style="width: 40%; padding: 1px;border:none;">\
|
||
<table style="width: 100%; table-layout: fixed; border-spacing: 0px; border-collapse: collapse;" border="0">\
|
||
<tr>\
|
||
<td style="width: 100%;border:none;"><input style="width: 100%;" name="date_start" value="" id="filter_date_route_start_'+this.objects[i].id+'" type="text"></td>\
|
||
<td style="width: 25px;border:none;"><img id="filter_date_route_start_trigger_'+this.objects[i].id+'" src="../resources/images/datepicker.jpg" style="margin-left: 1px; cursor: pointer;"></td>\
|
||
</tr>\
|
||
</table>\
|
||
</td>\
|
||
<td style="width: 10px; padding: 1px; white-space: nowrap;border:none;" width="1%">по</td>\
|
||
<td style="width: 40%; padding: 1px;border:none;">\
|
||
<table style="width: 100%; table-layout: fixed; border-spacing: 0px; border-collapse: collapse;" border="0">\
|
||
<tr>\
|
||
<td style="width: 100%;border:none;"><input style="width: 100%;" name="date_end" value="" id="filter_date_route_end_'+this.objects[i].id+'" type="text"></td>\
|
||
<td style="width: 25px;border:none;"><img id="filter_date_route_end_trigger_'+this.objects[i].id+'" src="../resources/images/datepicker.jpg" style="cursor: pointer; margin-left: 1px;"></td>\
|
||
</tr>\
|
||
</table>\
|
||
</td>\
|
||
</tr>\
|
||
</table>\
|
||
</td>\
|
||
</tr>\
|
||
<tr>\
|
||
<td style="padding: 1px; width: 100%;border:none;">\
|
||
<table style="width: 100%;" border="0">\
|
||
<tr>\
|
||
<td style="padding: 1px; white-space: nowrap;text-align:left;border:none;"><button class="button-secondary" onclick="g_objects.getObjectByID('+this.objects[i].id+').showDetailedInformation();">'+trt('Detailed_information')+'</button></td><td style="padding: 1px; white-space: nowrap;text-align:right;border:none;" width="1%" colspan="3"><button class="button-secondary" onclick="g_objects.getObjectByID('+this.objects[i].id+').getObjectTrack();">'+trt('Show_route')+'</button><button class="button-secondary" onclick="g_objects.getObjectByID('+this.objects[i].id+').hideObjectTrack();">'+trt('Hide')+'</button></td>\
|
||
</tr>\
|
||
</table>\
|
||
</td>\
|
||
</tr>\
|
||
</table>\
|
||
</td></tr>\
|
||
</table>';
|
||
|
||
td.innerHTML=html;
|
||
|
||
tr.appendChild(td);
|
||
theTable.tBodies[0].appendChild(tr);
|
||
|
||
//Кнопка редактировать грепп геозон объекта
|
||
btn=document.getElementById('object_edit4_'+this.objects[i].uid)
|
||
btn.onclick=function(thiz,id){ return function(){
|
||
var settings='<type n="ObjectsGeofences"><objects-list><filter><column n="object_id"><![CDATA['+id+']]></column></filter></objects-list></type>';
|
||
myFunction('ObjectsGeofences',settings);
|
||
}; }(this,this.objects[i].id);
|
||
|
||
//Чекбукс скрыть показать
|
||
var cell=document.getElementById("object_ch_"+this.objects[i].uid);
|
||
cell.onclick=function(object){
|
||
return function(){
|
||
var chb=document.getElementById("object_ch_"+object.uid);
|
||
object.setVisibility(chb.checked);
|
||
}
|
||
}(this.objects[i]);
|
||
|
||
//Кнопка разсрыть список
|
||
var btn=document.getElementById('object_down_btn_'+this.objects[i].id);
|
||
btn.onclick=function(tr,thiz,id){ return function(){
|
||
var btn=document.getElementById('object_down_btn_'+id);
|
||
if(btn.src.indexOf("right.png")!=-1)
|
||
{
|
||
btn.src = '/resources/images/down.png';
|
||
tr.style.display = 'table-row';
|
||
}else if(btn.src.indexOf("down.png")!=-1)
|
||
{
|
||
btn.src = '/resources/images/right.png';
|
||
tr.style.display = 'none';
|
||
}
|
||
};
|
||
}(tr,this,this.objects[i].id);
|
||
/*
|
||
//При щелчке на ячейку открываем содержимое и перемещаем карту на точку
|
||
var cell=document.getElementById("cell_"+this.objects[i].id);
|
||
cell.onclick=function(object){
|
||
return function(){
|
||
|
||
var cell=document.getElementById("cell_data_"+object.id);
|
||
if(cell.style.display=="none")
|
||
{
|
||
cell.style.display="table-cell";
|
||
}else{
|
||
cell.style.display="none";
|
||
}
|
||
//Пытаемся переместиться на точку на карте
|
||
if(!isNaN(parseFloat(object.lon)))
|
||
{
|
||
g_map.getView().setCenter(ol.proj.transform([object.lon,object.lat], 'EPSG:4326','EPSG:3857'));
|
||
if(g_map.getView().getZoom()<9)
|
||
g_map.getView().setZoom(9);
|
||
}
|
||
}
|
||
}(this.objects[i]);
|
||
*/
|
||
//При щелчке по иконке календаря отображаем календарь выбора
|
||
setCalendar("filter_date_route_start_"+this.objects[i].id,"filter_date_route_start_trigger_"+this.objects[i].id,-2);
|
||
setCalendar("filter_date_route_end_"+this.objects[i].id,"filter_date_route_end_trigger_"+this.objects[i].id);
|
||
}
|
||
|
||
//Количество элементов в дереве
|
||
var divCnt = document.getElementById("count_m");
|
||
delChild(divCnt);
|
||
divCnt.appendChild(document.createTextNode(this.objects.length));
|
||
|
||
//По нажатию на заголовок инвертируем чекбуксы
|
||
divCnt = document.getElementById("object_ch_M");
|
||
divCnt.onclick=function(thiz){
|
||
return function(){
|
||
thiz.hide();
|
||
}
|
||
}(this);
|
||
}
|
||
|
||
getObjectByID(id)
|
||
{
|
||
var obj=null;
|
||
for(var i=0;i<this.objects.length;i++)
|
||
{
|
||
if(this.objects[i].id==id)
|
||
{
|
||
obj = this.objects[i];
|
||
}
|
||
}
|
||
return obj;
|
||
}
|
||
|
||
//Обновляю дату и коордионаты для выбраного списка (вызывается раз в 10 секунд)
|
||
updateData()
|
||
{
|
||
//console.log("updateData len="+this.objects.length);
|
||
|
||
if(this.objects.length==0) return true;
|
||
//Пересылаю список идентификаторов для которых хотим получить обновления
|
||
var data = [];
|
||
for(i=0;i<this.objects.length;i++)
|
||
{
|
||
data.push(parseInt(this.objects[i].id));
|
||
}
|
||
|
||
$.ajax({
|
||
url: '/monitoring/pscripts/objects.php?fn=1',
|
||
data: JSON.stringify(data),
|
||
contentType: 'application/json; charset=utf-8',
|
||
type: "POST",
|
||
dataType: "json",
|
||
success: function(thiz){return function(data,status){
|
||
if(status=='success')
|
||
{
|
||
//console.log("data1 = "+JSON.stringify(data));
|
||
|
||
//Перебираю элементы и обновляю соответствующие поля
|
||
for(var i=0;i<data.length;i++)
|
||
{
|
||
//console.log("data[i].id = "+data[i].id);
|
||
//console.log("data[i].date = "+data[i].date);
|
||
|
||
var obj=thiz.getObjectByID(data[i].id);
|
||
if(obj!=null)
|
||
{
|
||
obj.date=data[i].date;
|
||
obj.setLonLat(data[i].lon,data[i].lat);
|
||
for(let j=0;j<data[i].sensors.length;j++)
|
||
{
|
||
let sns=obj.getSensorByID(data[i].sensors[j].id);
|
||
if(sns!=null)
|
||
{
|
||
sns.value=data[i].sensors[j].value;
|
||
sns.date=data[i].sensors[j].date;
|
||
}
|
||
}
|
||
obj.updateGUI();
|
||
}
|
||
}
|
||
}else
|
||
{
|
||
alert(status);
|
||
}
|
||
|
||
}}(this)
|
||
});
|
||
|
||
}
|
||
|
||
//Инвертировать видимость маршрутов
|
||
hide()
|
||
{
|
||
for(var i=0;i<this.objects.length;i++)
|
||
{
|
||
this.objects[i].setVisibility(!this.objects[i].getVisibility());
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
//Конкретный автомобиль (объект, установка)
|
||
class TObject
|
||
{
|
||
constructor(){
|
||
this.uid=getUID(); //Уникальный идентификатор
|
||
this.active=1; //1 - пломба активная, 0 - пломба не активная
|
||
this.name=''; //Гос номер автомобиля
|
||
this.id=0; //Идентификатор записи (установки)
|
||
this.lon=0; //Долгота
|
||
this.lat=0; //Широта
|
||
this.alt=0; //Высота в метрах
|
||
this.icon_name="testicon";
|
||
this.sensors=null;
|
||
|
||
//Трос
|
||
//Аккумулятор
|
||
//Датчик вскрытия
|
||
|
||
this.feature=null; //Объект который отображается на карте
|
||
|
||
this.visible=true; //По умолчанию всё видим
|
||
}
|
||
|
||
getVisibility()
|
||
{
|
||
return this.visible;
|
||
}
|
||
|
||
//Отобразить объект на карте
|
||
setVisibility(val)
|
||
{
|
||
var chb=document.getElementById("object_ch_"+this.uid);
|
||
if(val)
|
||
{
|
||
if(!chb.checked) chb.checked=true;
|
||
if(this.feature==null)
|
||
{
|
||
//this.getGeoJSON(); //Подгружаем объект с сервера
|
||
}else
|
||
{
|
||
//Проверяю чтобы заново не добавить
|
||
var exists=false;
|
||
var features=g_vectorSource.getFeatures();
|
||
for(var i=0;i<features.length;i++)
|
||
{
|
||
if(features[i]==this.feature)
|
||
{
|
||
exists=true;
|
||
break;
|
||
}
|
||
}
|
||
if(!exists)
|
||
g_vectorSource.addFeature(this.feature);
|
||
}
|
||
}else{
|
||
if(chb!=null && chb.checked) chb.checked=false;
|
||
if(this.feature!=null)
|
||
{
|
||
g_vectorSource.removeFeature(this.feature);
|
||
//this.showPoints(false);
|
||
}
|
||
}
|
||
this.visible=val;
|
||
}
|
||
//Запрашиваем трек автомобиля (объект, установка)
|
||
getObjectTrack()
|
||
{
|
||
|
||
var dStart=new Date(document.getElementById("filter_date_route_start_"+this.id).value).getTime() / 1000;
|
||
var dEnd=new Date(document.getElementById("filter_date_route_end_"+this.id).value).getTime() / 1000;
|
||
if(isNaN(dStart)) dStart='';
|
||
if(isNaN(dEnd)) dEnd='';
|
||
|
||
//alert('dStart = '+dStart+' dEnd = ' + dEnd);
|
||
|
||
var data = {
|
||
object_id: this.id, //Идентификатор объекта
|
||
date_start: dStart, //Начало выборки UNIX время
|
||
date_end: dEnd //Конец выборки UNIX время
|
||
};
|
||
|
||
var req=createRequestObject();
|
||
req.onreadystatechange = function(thiz)
|
||
{
|
||
return function(){
|
||
if(req.readyState === 4){
|
||
var data=null;
|
||
try {
|
||
data = JSON.parse(req.responseText);
|
||
} catch (e) {
|
||
alert(e.message);
|
||
}
|
||
if(data!=null)
|
||
{
|
||
//alert('data.length = '+data.length);
|
||
|
||
if(data.length>=2) //Если количество точек >2
|
||
{
|
||
//Создаю массив точек
|
||
var points=[];
|
||
for(i=0;i<data.length;i++)
|
||
{
|
||
var point=[parseFloat(data[i].lon),parseFloat(data[i].lat)];
|
||
point = ol.proj.transform(point, 'EPSG:4326', 'EPSG:3857');
|
||
points.push(point);
|
||
}
|
||
var line = new ol.geom.LineString(points)
|
||
|
||
let featureL = new ol.Feature({
|
||
geometry: line
|
||
});
|
||
featureL.userID=thiz.id;
|
||
|
||
var style=new ol.style.Style(
|
||
{
|
||
fill: new ol.style.Fill({ color: '#6363fc', weight: 4 }),
|
||
stroke: new ol.style.Stroke({ color: '#6363fc', width: 3 })
|
||
});
|
||
featureL.setStyle(style);
|
||
|
||
g_vectorSource.addFeature(featureL);
|
||
|
||
//Создаю точки для отображения подробной информации
|
||
for(let i=0;i<data.length;i++)
|
||
{
|
||
var lon=parseFloat(data[i].lon);
|
||
var lat=parseFloat(data[i].lat);
|
||
if(!isNaN(lat) && !isNaN(lon))
|
||
{
|
||
let feature = new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([parseFloat(data[i].lon),parseFloat(data[i].lat)], 'EPSG:4326','EPSG:3857'))});
|
||
feature.userID=thiz.id;
|
||
|
||
let style = new ol.style.Style({
|
||
image: new ol.style.Icon(({
|
||
anchor: [0.5, 0.5],
|
||
anchorXUnits: 'fraction',
|
||
anchorYUnits: 'fraction',
|
||
src: '../resources/images/point.png'
|
||
}))
|
||
});
|
||
feature.setStyle(style);
|
||
feature.userType='TTrackPoint';
|
||
feature.userHTML='<b>'+trt('Date')+'</b>: '+(new Date(data[i].udate*1000))+'<br>';
|
||
feature.userHTML+='<b>'+trt('Latitude')+'</b>: '+data[i].lat+' <b>'+trt('Longitude')+'</b>: '+data[i].lon+'<br>';
|
||
feature.userHTML+='<b>'+trt('Speed')+'</b>: '+data[i].speed+' '+trt('km_h')+" (GPS: "+data[i].velocity+trt('km_h')+')<br>';
|
||
|
||
g_vectorSource.addFeature(feature);
|
||
}
|
||
}
|
||
|
||
var pointS=featureL.getGeometry().getCoordinates()[0]; //Коордионаты первой точки в треке
|
||
var pointE=featureL.getGeometry().getCoordinates()[featureL.getGeometry().getCoordinates().length-1]; //Координаты последней точки
|
||
|
||
//Также создаю иконки старта трека и окончания трека
|
||
let featureS = new ol.Feature({geometry: new ol.geom.Point(pointS)});
|
||
featureS.userID=thiz.id;
|
||
featureS.setStyle(new ol.style.Style({
|
||
image: new ol.style.Icon(({
|
||
anchor: [0.5, 37],
|
||
anchorXUnits: 'fraction',
|
||
anchorYUnits: 'pixels',
|
||
opacity: 0.75,
|
||
src: '../resources/images/istart.png'
|
||
}))
|
||
}));
|
||
g_vectorSource.addFeature(featureS);
|
||
|
||
//Также создаю иконку окончания трека
|
||
let featureE = new ol.Feature({geometry: new ol.geom.Point(pointE)});
|
||
featureE.userID=thiz.id;
|
||
featureE.setStyle(new ol.style.Style({
|
||
image: new ol.style.Icon(({
|
||
anchor: [0.5, 37],
|
||
anchorXUnits: 'fraction',
|
||
anchorYUnits: 'pixels',
|
||
opacity: 0.75,
|
||
src: '../resources/images/istop.png'
|
||
}))
|
||
}));
|
||
g_vectorSource.addFeature(featureE);
|
||
|
||
//Перемещаемся на первую точку маршрута
|
||
g_map.getView().setCenter(pointS);
|
||
if(g_map.getView().getZoom()<9)
|
||
g_map.getView().setZoom(9);
|
||
}else
|
||
{
|
||
thiz.hideObjectTrack(); //Пытаемся спрятать если 0 точек
|
||
}
|
||
//Востанавливаю курсор
|
||
hideProgressBarIco();
|
||
}
|
||
}
|
||
};
|
||
}(this);
|
||
|
||
req.open("POST", '/monitoring/pscripts/track.php', true);
|
||
req.setRequestHeader("Content-type", "text/plain");
|
||
req.send(JSON.stringify(data));
|
||
|
||
//Курсор ожидание со стрелочкой
|
||
showProgressBarIco();
|
||
}
|
||
|
||
hideObjectTrack()
|
||
{
|
||
let delList = [];
|
||
let features=g_vectorSource.getFeatures();
|
||
for(let i=0;i<features.length;i++)
|
||
{
|
||
if(features[i].userID==this.id)
|
||
{
|
||
delList.push(features[i]);
|
||
}
|
||
}
|
||
for(let i=0;i<delList.length;i++)
|
||
{
|
||
g_vectorSource.removeFeature(delList[i]);
|
||
}
|
||
}
|
||
|
||
goToCenter()
|
||
{
|
||
//Пытаемся переместиться на точку на карте
|
||
if(!isNaN(parseFloat(this.lon)))
|
||
{
|
||
g_map.getView().setCenter(ol.proj.transform([this.lon,this.lat], 'EPSG:4326','EPSG:3857'));
|
||
if(g_map.getView().getZoom()<9)
|
||
g_map.getView().setZoom(9);
|
||
}
|
||
}
|
||
|
||
//Отобразить окно с детальной информацией о установке
|
||
showDetailedInformation()
|
||
{
|
||
//Запрашиваем информацию о объекте и отображаем в отдельном всплывающем окне
|
||
if(m_winPP!=null) m_winPP.Close();
|
||
m_winPP=new TWin();
|
||
m_winPP.BuildGUI(pageX-100,pageY-100);
|
||
m_winPP.setSize(500,100);
|
||
m_winPP.setCaption(this.name);
|
||
m_winPP.showProgressBar();
|
||
m_winPP.setCenter();
|
||
|
||
m_winPP.setContent('<table style="width:100%;height:100%;"><tr><td id="winPP_m"></td></tr><tr><td style="padding-top:5px;"></td></tr></table>');
|
||
//<button id="winPP_mm">Деактивировать ЭЗПУ</button>
|
||
/*var obj=document.getElementById("winPP_mm");
|
||
if(this.active==1)
|
||
{
|
||
obj.onclick = function(thiz){ return function(){ thiz.deactivation(); }; }(this);
|
||
}else
|
||
{
|
||
obj.style.display="none";
|
||
}*/
|
||
|
||
//alert('/monitoring/pscripts/object.php?object_id='+this.id);
|
||
|
||
$.ajax({
|
||
url: '/monitoring/pscripts/object.php?object_id='+this.id,
|
||
type: "POST",
|
||
dataType: "text",
|
||
success: function(thiz){return function(data,status){
|
||
if(status=='success')
|
||
{
|
||
m_winPP.hideProgressBar();
|
||
//m_winPP.setContent(data);
|
||
var obj=document.getElementById("winPP_m");
|
||
if(obj!=null)
|
||
{
|
||
obj.innerHTML=data;
|
||
}
|
||
m_winPP.setCenter();
|
||
}else
|
||
{
|
||
alert(status);
|
||
}
|
||
|
||
}}(this)
|
||
});
|
||
|
||
}
|
||
|
||
//Обновить графические элементы (дата если она отображается пользователю)
|
||
updateGUI()
|
||
{
|
||
var obj=document.getElementById('date_'+this.uid);
|
||
if(obj!=null){
|
||
obj.innerHTML=this.date;
|
||
}
|
||
if(this.sensors!=null)
|
||
{
|
||
for(let i=0;i<this.sensors.length;i++)
|
||
{
|
||
let obj=document.getElementById('svalue_'+this.sensors[i].id+'_'+this.uid);
|
||
if(obj!=null) obj.innerHTML=this.sensors[i].value;
|
||
obj=document.getElementById('sdate_'+this.sensors[i].id+'_'+this.uid);
|
||
if(obj!=null) obj.innerHTML=this.sensors[i].date;
|
||
}
|
||
}
|
||
}
|
||
|
||
//Переместить точку автомобиля в прогнозную точку
|
||
goToForecast(){
|
||
//if(this.name=='VIRTUAL') {
|
||
|
||
//Отдаляем последнюю точку ещё дальше
|
||
if (this.time != 0 && this.time_p != 0 && this.time != this.time_p && this.lon_p != this.lon && this.lat_p != this.lat) { //Чтобы не поделить на 0
|
||
|
||
//console.log('Object = ' + this.id+') '+this.name + ' предпоследний = ' + this.time + ' последний = ' + this.time_p);
|
||
let p = ((new Date()).getTime() - this.time) / (this.time - this.time_p);
|
||
p=p/1.2; //замедление 80%
|
||
//console.log('p = ' + p); //Процент от 0 до 1
|
||
|
||
if (p <= 1) {
|
||
|
||
let lat_c=this.lat+(this.lat-this.lat_p);
|
||
let lon_c=this.lon+(this.lon-this.lon_p);
|
||
|
||
this.lat_f = this.lat * (1 - p) + lat_c * p;
|
||
this.lon_f = this.lon * (1 - p) + lon_c * p;
|
||
|
||
//console.log('p = ' + p+' this.lat_f = '+this.lat_f+' this.lon_f = '+this.lon_f); //Процент от 0 до 1
|
||
|
||
this.setMarkerPosition(this.lon_f, this.lat_f);
|
||
|
||
//console.log('p = ' + p); //Процент от 0 до 1
|
||
}
|
||
}
|
||
//}
|
||
}
|
||
|
||
//Обновить коордионаты и иконку на карте
|
||
setLonLat(lon,lat)
|
||
{
|
||
lon = parseFloat(lon); //Долгота
|
||
lat = parseFloat(lat); //Широта
|
||
|
||
//Сохраняю предыдущее значение
|
||
if(this.time!=this.time_p){
|
||
this.time_p=this.time;
|
||
this.lon_p=this.lon;
|
||
this.lat_p=this.lat;
|
||
|
||
}
|
||
|
||
this.time=(new Date()).getTime(); //Текущее время для прогноза
|
||
this.lon=lon; //Долгота
|
||
this.lat=lat; //Широта
|
||
|
||
this.setMarkerPosition(lon,lat);
|
||
}
|
||
|
||
//Задать позицию маркера
|
||
setMarkerPosition(lon,lat){
|
||
if(!isNaN(lat) && !isNaN(lon))
|
||
{
|
||
let point = new ol.geom.Point(ol.proj.transform([lon,lat], 'EPSG:4326','EPSG:3857'));
|
||
if(this.feature==null)
|
||
{
|
||
let features = [];
|
||
this.feature = new ol.Feature({geometry: point,name: this.name,icon_name: this.icon_name});
|
||
this.feature.setStyle(createFatypeStyleDel(this.feature,false));
|
||
|
||
this.feature.userType="TObject";
|
||
//feature.userName='terrain';
|
||
this.feature.userID=this.id;
|
||
|
||
features.push(this.feature);
|
||
g_vectorSource.addFeatures(features);
|
||
}
|
||
this.feature.set('geometry', point);
|
||
}
|
||
}
|
||
|
||
getSensorByID(id)
|
||
{
|
||
let result=null;
|
||
if(this.sensors!=null)
|
||
{
|
||
for(let i=0;i<this.sensors.length;i++)
|
||
{
|
||
if(this.sensors[i].id==id)
|
||
{
|
||
result=this.sensors[i];
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
return result;
|
||
}
|
||
}
|