332 lines
14 KiB
JavaScript
332 lines
14 KiB
JavaScript
// Map variables
|
|
var sourceLat = "",
|
|
sourceLng = "",
|
|
destLat = "",
|
|
destLng = "";
|
|
var saveTotalDistance = null;
|
|
var sourceMarker, destMarker;
|
|
var routeControls = [];
|
|
var popupArrays = [];
|
|
var routeControlsPath = [];
|
|
var polylinePath = null;
|
|
var bounds = [
|
|
[46.9130026312, 77.6166317076],
|
|
[17.5782370061, 32.5092252948],
|
|
];
|
|
|
|
// Form Input
|
|
var selectedItem = 0;
|
|
var previousSelectedItem = 0;
|
|
var selectedSubItems = "";
|
|
var slideIndexlayer = 1;
|
|
var subItemsData = {};
|
|
var submitFormInput = [];
|
|
var mountslider
|
|
var contract_credit
|
|
var project_distance = {}
|
|
var files = []
|
|
var titlemodal = "";
|
|
var hasSubItemGotValue = true;
|
|
var projectType = 0;
|
|
var itemsData = null;
|
|
var requestId = null;
|
|
var startAbrarMarker = null;
|
|
var isSetStartAbrarMarker = false;
|
|
var endAbrarMarker = null;
|
|
var isSetEndAbrarMarker = false;
|
|
var map = null
|
|
var filesimage = []
|
|
var idAsli
|
|
var startAbrarDivIcon = L.divIcon({
|
|
html: `
|
|
<div id="pin-marker-start" class="pin-marker">
|
|
<div class="map-pin-marker">
|
|
<div class="pin-main-circle"></div>
|
|
<div class="pin-white-circle"></div>
|
|
<div class="pin-title-circle">
|
|
<span class="title-circle-text">شروع</span>
|
|
</div>
|
|
<div class="pin-main-line"></div>
|
|
</div>
|
|
<div class="pin-main-shadow">
|
|
<div class="shadow-dot">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
iconSize: [55, 75],
|
|
iconAnchor: [33, 64],
|
|
});
|
|
|
|
var endAbrarDivIcon = L.divIcon({
|
|
html: `
|
|
<div id="pin-marker-end" class="pin-marker">
|
|
<div class="map-pin-marker">
|
|
<div class="pin-main-circle"></div>
|
|
<div class="pin-white-circle"></div>
|
|
<div class="pin-title-circle">
|
|
<span class="title-circle-text">پایان</span>
|
|
</div>
|
|
<div class="pin-main-line"></div>
|
|
</div>
|
|
<div class="pin-main-shadow">
|
|
<div class="shadow-dot">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
iconSize: [55, 75],
|
|
iconAnchor: [33, 64],
|
|
});
|
|
function getLastURLPart(url) {
|
|
var part = url.match(/.*\/(.+)/);
|
|
if (!part) {
|
|
return null;
|
|
}
|
|
return part[1];
|
|
}
|
|
(() => {
|
|
const heightHeader = $('.header').height()
|
|
|
|
document.getElementById('map').style.setProperty('height', `calc(100vh - ${heightHeader}px)`)
|
|
})()
|
|
$(document).ready(function () {
|
|
var url = window.location.href;
|
|
idAsli = getLastURLPart(url)
|
|
let formData = new FormData();
|
|
formData.append("id", idAsli);
|
|
$.ajax({
|
|
url: "/camp/get",
|
|
type: "POST",
|
|
headers: {
|
|
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
|
|
},
|
|
data: formData,
|
|
cache: false,
|
|
contentType: false,
|
|
processData: false,
|
|
success: function (result) {
|
|
showsubmit(result.data)
|
|
},
|
|
});
|
|
});
|
|
function showsubmit(data) {
|
|
console.log(data)
|
|
filesimage = data.files
|
|
map = L.map("map", {
|
|
maxBounds: bounds,
|
|
minZoom: 6,
|
|
}).setView([data.start_latlng[0], data.start_latlng[1]], 9);
|
|
|
|
L.tileLayer("https://rmsmap.rmto.ir/141map/{z}/{x}/{y}.png", {}).addTo(map);
|
|
startAbrarMarker = new L.marker(L.latLng(data.start_latlng[0], data.start_latlng[1]), {
|
|
icon: startAbrarDivIcon,
|
|
}).bindPopup(getPopupContentAccidentstart(data),
|
|
{ className: "customPopupStyle" })
|
|
.addTo(map);
|
|
|
|
endAbrarMarker = new L.marker(L.latLng(data.end_latlng[0], data.end_latlng[1]), {
|
|
icon: endAbrarDivIcon,
|
|
}).bindPopup(getPopupContentAccidentend(data),
|
|
{ className: "customPopupStyle" })
|
|
.addTo(map);
|
|
|
|
map.flyToBounds([[data.start_latlng[0], data.start_latlng[1]], [data.end_latlng[0], data.end_latlng[1]]])
|
|
drawPath(data.start_latlng, data.end_latlng)
|
|
$("#pin-marker-start").removeClass("pin-move").addClass("pin-set");
|
|
$("#pin-marker-end").removeClass("pin-move").addClass("pin-set");
|
|
|
|
}
|
|
|
|
function drawPath(start, end) {
|
|
if (routeControls.length) {
|
|
$(routeControls).each(function (index, control) {
|
|
map.removeControl(control);
|
|
routeControls.splice(routeControls.indexOf(index), 1);
|
|
});
|
|
}
|
|
// $.get(`https://rmsmap.rmto.ir/route/v1/driving/${sourceLng},${sourceLat};${destLng},${destLat}?overview=false&alternatives=true&steps=true`,
|
|
// function (data) {
|
|
routeControls.push(
|
|
L.Routing.control({
|
|
waypoints: [
|
|
L.latLng(parseFloat(start[0]), parseFloat(start[1])),
|
|
L.latLng(parseFloat(end[0]), parseFloat(end[1])),
|
|
],
|
|
fitSelectedRoutes: false,
|
|
draggableWaypoints: true,
|
|
createMarker: function () {
|
|
return null;
|
|
},
|
|
lineOptions: {
|
|
addWaypoints: false,
|
|
styles: [
|
|
{
|
|
color: "#28a745",
|
|
opacity: 0.8,
|
|
weight: 5,
|
|
},
|
|
],
|
|
},
|
|
})
|
|
.on("routesfound", function (e) {
|
|
var divideBy = 2;
|
|
|
|
for (let index = 0; index < popupArrays.length; index++) {
|
|
map.removeLayer(popupArrays[index]);
|
|
}
|
|
|
|
var customOptions = {
|
|
maxWidth: "300",
|
|
maxHeight: "150",
|
|
className: "customRouteEstimate",
|
|
};
|
|
var popup = new L.Popup(customOptions);
|
|
|
|
var popupLocation = new L.LatLng(
|
|
e.routes[0].coordinates[
|
|
parseInt(e.routes[0].coordinates.length / divideBy)
|
|
].lat,
|
|
e.routes[0].coordinates[
|
|
parseInt(e.routes[0].coordinates.length / divideBy)
|
|
].lng
|
|
);
|
|
|
|
var popupContent =
|
|
'<span style="color:#FF5630; font-size:11px; font-family: IRANSansFaNum;">مسافت: </span>' +
|
|
parseFloat(e.routes[0].summary.totalDistance / 1000.0).toFixed(2) +
|
|
" کیلومتر";
|
|
|
|
saveTotalDistance = parseFloat(
|
|
parseFloat(e.routes[0].summary.totalDistance / 1000.0).toFixed(2)
|
|
);
|
|
|
|
popup.setLatLng(popupLocation);
|
|
popup.setContent(popupContent);
|
|
|
|
popupArrays.push(popup);
|
|
map.addLayer(popup);
|
|
|
|
|
|
})
|
|
.addTo(map)
|
|
);
|
|
// });
|
|
|
|
$(".leaflet-control-container").css("display", "none");
|
|
$(".leaflet-routing-container-hide").css("display", "none");
|
|
}
|
|
function getPopupContentAccidentstart(data) {
|
|
var data =
|
|
'\
|
|
<div class="popup">\
|
|
<div class="popupTitle">\
|
|
<img src="../../dist/images/icons/tollHouse.svg" alt="">\
|
|
<span class="popupHeader"> ثبت محور دارای انسداد (' +
|
|
data.province_fa +
|
|
') </span>\
|
|
</div>\
|
|
<div class="popupHeaderContent"><div class="popUpBanner">اداره کل ' +
|
|
data.province_fa +
|
|
"، شهرستان: " +
|
|
data.city_1_fa +
|
|
'</div>\
|
|
<div class="popupContent row col-12">\
|
|
<div class="col-6" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> نام محور </span><div class="popUpBoxContent">' +
|
|
data.axis_name +
|
|
'</div></div>\
|
|
<div class="col-6" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> نوع محور </span><div class="popUpBoxContent">' +
|
|
data.axis_type_fa +
|
|
'</div></div>\
|
|
<div class="col-12" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> علت انسداد </span><div class="popUpBoxContent">' +
|
|
data.blockage_cause_fa +
|
|
'</div></div>\
|
|
<div class=" col-6" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> پیش بینی تاریخ بازگشایی </span><div class="popUpBoxContent">' +
|
|
data.prediction_time_fa +
|
|
'</div></div>\
|
|
<div class=" col-6" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> طول راه آسیب دیده </span><div class="popUpBoxContent">' +
|
|
data.blockage_length +
|
|
'</div></div>\
|
|
<div class=" col-6" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> برآورد اولیه خسارت </span><div class="popUpBoxContent">' +
|
|
data.blockage_damage_money +
|
|
'</div></div>\
|
|
<div class=" col-6" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد پل های اسیب دیده (دهانه بزرگتر از 6 متر ) </span><div class="popUpBoxContent">' +
|
|
data.blockage_damage_higher_6_count +
|
|
'</div></div>\
|
|
<div class="col-4" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد پل های اسیب دیده (دهانه کوچکتر از 6 متر ) </span><div class="popUpBoxContent">' +
|
|
data.blockage_damage_lower_6_count +
|
|
'</div></div>\
|
|
<div class="col-4" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> سایر ابنیه فنی آسیب دیده </span><div class="popUpBoxContent">' +
|
|
data.blockage_damage_count +
|
|
'</div></div>\
|
|
<div class="col-4" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد ماشین آلات فعال در محور </span><div class="popUpBoxContent">' +
|
|
data.active_cars_count +
|
|
'</div></div>\
|
|
<div class=" col-6" style="border-left:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد عوامل راهدار فعال در محور </span><div class="popUpBoxContent">' +
|
|
data.active_rahdar_count +
|
|
'</div></div>\
|
|
<div class=" col-6" style="text-align:center;"><span class="header-popupcontent-allpoints"> توضیحات</span><div class="popUpBoxContent">' +
|
|
data.block_axis_desc +
|
|
'</div></div>\
|
|
</div>\
|
|
</div>'
|
|
return data
|
|
}
|
|
|
|
function getPopupContentAccidentend(data) {
|
|
var data =
|
|
'\
|
|
<div class="popup">\
|
|
<div class="popupTitle">\
|
|
<img src="../../dist/images/icons/tollHouse.svg" alt="">\
|
|
<span class="popupHeader"> ثبت محور دارای انسداد (' +
|
|
data.province_fa +
|
|
') </span>\
|
|
</div>\
|
|
<div class="popupHeaderContent"><div class="popUpBanner">اداره کل ' +
|
|
data.province_fa +
|
|
"، شهرستان: " +
|
|
data.city_1_fa +
|
|
'</div>\
|
|
<div class="popupContent row col-12">\
|
|
<div class="col-6" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> نام محور </span><div class="popUpBoxContent">' +
|
|
data.axis_name +
|
|
'</div></div>\
|
|
<div class="col-6" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> نوع محور </span><div class="popUpBoxContent">' +
|
|
data.axis_type_fa +
|
|
'</div></div>\
|
|
<div class="col-12" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> علت انسداد </span><div class="popUpBoxContent">' +
|
|
data.blockage_cause_fa +
|
|
'</div></div>\
|
|
<div class=" col-6" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> پیش بینی تاریخ بازگشایی </span><div class="popUpBoxContent">' +
|
|
data.prediction_time_fa +
|
|
'</div></div>\
|
|
<div class=" col-6" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> طول راه آسیب دیده </span><div class="popUpBoxContent">' +
|
|
data.blockage_length +
|
|
'</div></div>\
|
|
<div class=" col-6" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> برآورد اولیه خسارت </span><div class="popUpBoxContent">' +
|
|
data.blockage_damage_money +
|
|
'</div></div>\
|
|
<div class=" col-6" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد پل های اسیب دیده (دهانه بزرگتر از 6 متر ) </span><div class="popUpBoxContent">' +
|
|
data.blockage_damage_higher_6_count +
|
|
'</div></div>\
|
|
<div class="col-4" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد پل های اسیب دیده (دهانه کوچکتر از 6 متر ) </span><div class="popUpBoxContent">' +
|
|
data.blockage_damage_lower_6_count +
|
|
'</div></div>\
|
|
<div class="col-4" style="border-left:2px solid #ff5c0f; border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> سایر ابنیه فنی آسیب دیده </span><div class="popUpBoxContent">' +
|
|
data.blockage_damage_count +
|
|
'</div></div>\
|
|
<div class="col-4" style="border-bottom:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد ماشین آلات فعال در محور </span><div class="popUpBoxContent">' +
|
|
data.active_cars_count +
|
|
'</div></div>\
|
|
<div class=" col-6" style="border-left:2px solid #ff5c0f; text-align:center;"><span class="header-popupcontent-allpoints"> تعداد عوامل راهدار فعال در محور </span><div class="popUpBoxContent">' +
|
|
data.active_rahdar_count +
|
|
'</div></div>\
|
|
<div class=" col-6" style="text-align:center;"><span class="header-popupcontent-allpoints"> توضیحات</span><div class="popUpBoxContent">' +
|
|
data.block_axis_desc +
|
|
'</div></div>\
|
|
</div>\
|
|
</div>'
|
|
return data
|
|
}
|