2068 lines
56 KiB
JavaScript
2068 lines
56 KiB
JavaScript
var markerList = [];
|
|
var markerLayers = null;
|
|
|
|
var marker141List = [];
|
|
var marker141Layers = null;
|
|
|
|
var keepChartNum = null;
|
|
|
|
const API_ENDPOINT = 'https://141.ir/api';
|
|
const MAP_ENDPOINT = 'https://testmap.141.ir';
|
|
const MAP_MIN_ZOOM = 6;
|
|
|
|
// IRAN bounds, by this order:
|
|
// [North, East]
|
|
// [South, West]
|
|
var bounds = [
|
|
[42.9130026312, 75.6166317076],
|
|
[20.5782370061, 30.5092252948]
|
|
];
|
|
|
|
// Create leaflet map client
|
|
var map = L.map('map', {
|
|
maxBounds: bounds,
|
|
minZoom: MAP_MIN_ZOOM,
|
|
zoomControl: false
|
|
}).setView([32.62, 53.25], 6);
|
|
|
|
// Create map tile layer
|
|
L.tileLayer(MAP_ENDPOINT + '/141map/{z}/{x}/{y}.png', {}).addTo(map);
|
|
|
|
fisheyeMenu({
|
|
growRatio: 1.7,
|
|
verticalLimit: 10,
|
|
horizontalLimit: 1.8
|
|
});
|
|
|
|
function fisheyeMenu(options) {
|
|
// get all items from fisheye-menu
|
|
var items = Array.prototype.slice.call(document.querySelectorAll('.fisheye-menu button.layerButton'));
|
|
var item = items[0];
|
|
//get horizontal center point of each item
|
|
var itemsMiddle = items.map(function (item) { return item.offsetLeft + (item.offsetWidth / 2); });
|
|
//get vertical center point of each item
|
|
var itemsVertMiddle = items.map(function (item) { return item.offsetTop + (item.offsetHeight / 2); });
|
|
|
|
var itemWidth = item.offsetWidth;
|
|
// vertical limits of function running
|
|
var topLimit = item.offsetParent.offsetTop - (options.verticalLimit || 10);
|
|
var bottomLimit = item.offsetParent.offsetTop + item.offsetHeight + (options.verticalLimit || 10);
|
|
// ratio of new size to default
|
|
var growRatio = options.growRatio || 1.8;
|
|
// horizontal limit of grow reaction for single item
|
|
var limit = item.offsetWidth * (options.horizontalLimit || 1.5);
|
|
|
|
var sizeDiff = Math.round(itemWidth * (growRatio - 1));
|
|
|
|
var removeGoDown = function (evt) {
|
|
evt.target.parentNode.classList.remove('go-down');
|
|
};
|
|
var setListeners = function () {
|
|
items.forEach(function (itm, index) {
|
|
itm.addEventListener("transitionend", removeGoDown);
|
|
});
|
|
}();
|
|
|
|
var makeItemBigger = function (x, y) {
|
|
var verticallyCorrect = (y > topLimit && y < bottomLimit) ? true : false;
|
|
//console.log(item.offsetParent.offsetTop);
|
|
|
|
|
|
// if mouse out from vertically cirrect area make items small with transition
|
|
if (!verticallyCorrect && !item.parentNode.classList.contains('go-down')) {
|
|
item.parentNode.classList.add('go-down');
|
|
}
|
|
|
|
// if (verticallyCorrect) {
|
|
// let menuWidth = $('.menu_vertical').css('width');
|
|
// $('.menu_vertical').css('width', 'calc(' + menuWidth + ' + 50px')
|
|
// }
|
|
|
|
items.forEach(function (item, index) {
|
|
var middlePoint = itemsMiddle[index];
|
|
// horizontal distance from center point to cursor
|
|
var dist = Math.abs(x - middlePoint);
|
|
|
|
// if distance is bigger than limit in any direction
|
|
// ratio is equal to 1 (item size not changed)
|
|
var ratio = (dist > limit) ? 1 : (dist / limit);
|
|
|
|
ratio = verticallyCorrect ? ratio : 1;
|
|
|
|
var newSize = itemWidth + ((1 - ratio) * sizeDiff);
|
|
// add negative top margin to item equal to half size difference
|
|
// to stay item vertical centered
|
|
var newMarginTop = -((1 - ratio) * (sizeDiff / 2));
|
|
item.style.width = newSize + 'px';
|
|
item.style.height = newSize + 'px';
|
|
item.style.marginTop = newMarginTop + 'px';
|
|
});
|
|
};
|
|
|
|
document.body.addEventListener('mousemove', function (e) {
|
|
// position of cursor
|
|
var pointerX = e.pageX;
|
|
var pointerY = e.pageY;
|
|
makeItemBigger(pointerX, pointerY);
|
|
});
|
|
};
|
|
|
|
$('.right-menu-toggle').on('click', function () {
|
|
if ($(this).css('right') == '0px') {
|
|
$('.right-menu-charts').css('right', '-60px');
|
|
$(this).css('right', '60px');
|
|
$(this).addClass('hide-menu-toggle');
|
|
$(this).find('i').addClass('fa-arrow-alt-circle-left').removeClass('fa-arrow-alt-circle-right');
|
|
} else {
|
|
$('.right-menu-charts').css('right', '30px');
|
|
$(this).css('right', '0px');
|
|
$(this).removeClass('hide-menu-toggle');
|
|
$(this).find('i').addClass('fa-arrow-alt-circle-right').removeClass('fa-arrow-alt-circle-left');
|
|
}
|
|
});
|
|
|
|
$('.item-menu-chart').on('click', function () {
|
|
let num = parseInt($(this).attr('chartId'));
|
|
|
|
keepChartNum = num;
|
|
|
|
if (!$(this).hasClass('item-menu-chart-disabled')) {
|
|
if ($(this).hasClass('item-menu-active')) {
|
|
handleChartButtonClick(0);
|
|
removeFeaturesFromMap();
|
|
} else {
|
|
remove141Layer();
|
|
if ($('.item-menu-chart.item-menu-active').length > 0) {
|
|
handleChartButtonClick(0, this);
|
|
removeFeaturesFromMap();
|
|
setTimeout(function () {
|
|
updateChartBox(num);
|
|
handleChartButtonClick(1);
|
|
addFeaturesToMap();
|
|
addTopFeatureToStat();
|
|
}, 500);
|
|
} else {
|
|
updateChartBox(num);
|
|
handleChartButtonClick(1, this);
|
|
addFeaturesToMap();
|
|
addTopFeatureToStat();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
$('.menu-map-toggle').on('click', function () {
|
|
if ($(this).parent().css('width') == '500px') {
|
|
$(this).parent().animate({
|
|
width: "50",
|
|
height: "50"
|
|
}, 500, function () {
|
|
$(this).find('.map-svg-box').removeClass('map-svg-box-open');
|
|
$(this).css('z-index', '12');
|
|
$('.left-menu-141').css('left', '30px');
|
|
$(this).find('.menu-map-close').hide();
|
|
});
|
|
} else {
|
|
$(this).parent().css('z-index', '15');
|
|
$('.left-menu-141').css('left', '-80px');
|
|
$(this).parent().animate({
|
|
width: "500",
|
|
height: "480"
|
|
}, 500, function () {
|
|
$(this).find('.map-svg-box').addClass('map-svg-box-open');
|
|
$(this).find('.menu-map-close').show();
|
|
});
|
|
}
|
|
});
|
|
|
|
$('.left-menu-map > .menu-map-close').on('click', function () {
|
|
if ($(this).parent().css('width') == '500px') {
|
|
$(this).parent().animate({
|
|
width: "50",
|
|
height: "50"
|
|
}, 500, function () {
|
|
$(this).find('.map-svg-box').removeClass('map-svg-box-open');
|
|
$(this).css('z-index', '12');
|
|
$('.left-menu-141').css('left', '30px');
|
|
$(this).find('.menu-map-close').hide();
|
|
});
|
|
}
|
|
});
|
|
|
|
$('.left-menu-view-chart .chart-tools-item.chart-sync-icon').on('click', function () {
|
|
handleChartButtonClick(0, $('.item-menu-chart.item-menu-active'));
|
|
removeFeaturesFromMap();
|
|
setTimeout(function () {
|
|
updateChartBox(keepChartNum);
|
|
handleChartButtonClick(1);
|
|
addFeaturesToMap();
|
|
addTopFeatureToStat();
|
|
}, 500);
|
|
});
|
|
|
|
$('.left-menu-view-chart .chart-tools-item.chart-filter-icon').on('click', function () {
|
|
$('.left-menu-view-chart > .chart-filter-box input[name=chartFilterToDate]').prop('disabled', 'disabled');
|
|
$('.left-menu-view-chart > .chart-view-box').fadeOut(300, function () {
|
|
$('.left-menu-view-chart > .chart-filter-box').fadeIn(300);
|
|
});
|
|
|
|
let fromDate, toDate;
|
|
fromDate = $('.left-menu-view-chart > .chart-filter-box input[name=chartFilterFromDate]').persianDatepicker({
|
|
format: 'YYYY/MM/DD',
|
|
autoClose: true,
|
|
onSelect: function (unix) {
|
|
fromDate.touched = true;
|
|
$('.left-menu-view-chart > .chart-filter-box input[name=chartFilterToDate]').prop('disabled', '');
|
|
if (fromDate.getState().selected.unixDate >= toDate.getState().selected.unixDate) {
|
|
toDate.setDate(fromDate.getState().selected.unixDate);
|
|
}
|
|
if (toDate && toDate.options && toDate.options.minDate != unix) {
|
|
let cachedValue = toDate.getState().selected.unixDate;
|
|
toDate.options = { minDate: unix };
|
|
if (toDate.touched) {
|
|
toDate.setDate(cachedValue);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
toDate = $('.left-menu-view-chart > .chart-filter-box input[name=chartFilterToDate]').persianDatepicker({
|
|
format: 'YYYY/MM/DD',
|
|
autoClose: true,
|
|
onSelect: function (unix) {
|
|
toDate.touched = true;
|
|
/*if (fromDate && fromDate.options && fromDate.options.maxDate != unix) {
|
|
let cachedValue = fromDate.getState().selected.unixDate;
|
|
fromDate.options = { maxDate: unix };
|
|
if (fromDate.touched) {
|
|
fromDate.setDate(cachedValue);
|
|
}
|
|
}*/
|
|
}
|
|
});
|
|
});
|
|
|
|
$('.left-menu-view-chart .filter-box-submit > .submit-cancel').on('click', function () {
|
|
$('.left-menu-view-chart > .chart-filter-box').fadeOut(300, function () {
|
|
$('.left-menu-view-chart > .chart-view-box').fadeIn(300);
|
|
});
|
|
});
|
|
|
|
$('.left-menu-view-chart .filter-box-submit > .submit-send').on('click', function () {
|
|
handleChartButtonClick(0, $('.item-menu-chart.item-menu-active'));
|
|
removeFeaturesFromMap();
|
|
setTimeout(function () {
|
|
updateChartBox(keepChartNum);
|
|
handleChartButtonClick(1);
|
|
addFeaturesToMap();
|
|
addTopFeatureToStat();
|
|
}, 500);
|
|
});
|
|
|
|
$('.left-menu-view-chart .chart-tools-item.chart-close-icon').on('click', function () {
|
|
handleChartButtonClick(0);
|
|
removeFeaturesFromMap();
|
|
});
|
|
|
|
$('.right-menu-stat-chart > .menu-stat-close').on('click', function () {
|
|
handleChartButtonClick(0);
|
|
removeFeaturesFromMap();
|
|
});
|
|
|
|
function handleChartButtonClick(openChart = 1, element = null) {
|
|
if (openChart) {
|
|
if ($('.left-menu-map').css('width') == '500px') {
|
|
$('.left-menu-map').animate({
|
|
width: "50",
|
|
height: "50"
|
|
}, 500, function () {
|
|
$(this).find('.map-svg-box').removeClass('map-svg-box-open');
|
|
$(this).css('z-index', '12');
|
|
$('.left-menu-141').css('left', '30px');
|
|
$(this).find('.menu-map-close').hide();
|
|
if (element) {
|
|
$('.left-menu-view-chart').css('left', '30px');
|
|
$('.right-menu-stat-chart').css('top', '88px');
|
|
$('.left-menu-view-chart').css('z-index', '16');
|
|
$('.left-menu-map').css('left', '-80px');
|
|
$('.left-menu-141').css('left', '-80px');
|
|
$(element).addClass('item-menu-active');
|
|
} else {
|
|
$('.left-menu-view-chart').css('left', '30px');
|
|
$('.right-menu-stat-chart').css('top', '88px');
|
|
}
|
|
});
|
|
} else {
|
|
if (element) {
|
|
$('.left-menu-view-chart').css('left', '30px');
|
|
$('.right-menu-stat-chart').css('top', '88px');
|
|
$('.left-menu-view-chart').css('z-index', '16');
|
|
$('.left-menu-map').css('left', '-80px');
|
|
$('.left-menu-141').css('left', '-80px');
|
|
$(element).addClass('item-menu-active');
|
|
} else {
|
|
$('.left-menu-view-chart').css('left', '30px');
|
|
$('.right-menu-stat-chart').css('top', '88px');
|
|
}
|
|
}
|
|
} else {
|
|
if (element) {
|
|
$('.left-menu-view-chart').css('left', '-530px');
|
|
$('.right-menu-stat-chart').css('top', '-858px');
|
|
emptyStatItems();
|
|
$('.item-menu-chart.item-menu-active').removeClass('item-menu-active');
|
|
$(element).addClass('item-menu-active');
|
|
} else {
|
|
$('.left-menu-view-chart').css('left', '-530px');
|
|
$('.left-menu-map').css('left', '30px');
|
|
$('.left-menu-141').css('left', '30px');
|
|
$('.left-menu-view-chart').css('z-index', '12');
|
|
$('.right-menu-stat-chart').css('top', '-858px');
|
|
emptyStatItems();
|
|
$('.item-menu-chart.item-menu-active').removeClass('item-menu-active');
|
|
}
|
|
setTimeout(function () {
|
|
$('.left-menu-view-chart > .chart-filter-box').hide();
|
|
$('.left-menu-view-chart > .chart-view-box').show();
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
function emptyStatItems() {
|
|
setTimeout(function () {
|
|
$('.menu-stat-list > .stat-list').empty();
|
|
}, 500);
|
|
}
|
|
|
|
$('.left-menu-141 > .item-menu-141').on('click', function () {
|
|
let get141Id = parseInt($(this).attr('id141'));
|
|
|
|
if (get141Id < 13) {
|
|
if (!$(this).hasClass('item-141-active')) {
|
|
$('.left-menu-141 > .item-menu-141.item-141-active').removeClass('item-141-active');
|
|
$(this).addClass('item-141-active');
|
|
show141Layer(get141Id);
|
|
} else {
|
|
$(this).removeClass('item-141-active');
|
|
remove141Layer();
|
|
}
|
|
} else {
|
|
if (!$(this).hasClass('item-141-active')) {
|
|
$('.left-menu-141 > .item-menu-141.item-141-active').removeClass('item-141-active');
|
|
$(this).addClass('item-141-active');
|
|
showRoadAccidentLayer();
|
|
} else {
|
|
$(this).removeClass('item-141-active');
|
|
remove141Layer();
|
|
}
|
|
}
|
|
});
|
|
|
|
function showRoadAccidentLayer() {
|
|
if (marker141Layers != null) {
|
|
marker141List = [];
|
|
map.removeLayer(marker141Layers);
|
|
}
|
|
|
|
showLoaderScreen();
|
|
|
|
$.post(API_ENDPOINT + '/roadaccidentvillage', function (data) {
|
|
let roadAccidentPoints = JSON.parse(data);
|
|
|
|
marker141Layers = L.markerClusterGroup();
|
|
|
|
for (let i = 0; i < roadAccidentPoints.length; i++) {
|
|
try {
|
|
let marker = L.marker(
|
|
[roadAccidentPoints[i].lat, roadAccidentPoints[i].long],
|
|
{ icon: blueIcon }
|
|
).bindPopup('نقطه پرحاثه: ' + roadAccidentPoints[i].axisName);
|
|
marker141List.push(marker);
|
|
}
|
|
catch (e) {
|
|
//
|
|
}
|
|
}
|
|
marker141Layers.addLayers(marker141List);
|
|
map.addLayer(marker141Layers);
|
|
hideLoaderScreen();
|
|
});
|
|
}
|
|
|
|
$('.chart-province-item').on('click', function () {
|
|
let provinceId = $(this).attr('provinceId');
|
|
|
|
showProvinceChartBox(this, provinceId);
|
|
});
|
|
|
|
function handleTopMenuClick(num) {
|
|
switch (num) {
|
|
case 1: {
|
|
window.open('rmto', '_self');
|
|
break;
|
|
}
|
|
case 2: {
|
|
$('#reportModal').modal('show');
|
|
break;
|
|
}
|
|
case 3: {
|
|
window.open('rmto', '_self');
|
|
break;
|
|
}
|
|
case 4: {
|
|
window.open('rmto', '_self');
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
// --------------------------------------------------------------
|
|
|
|
Chart.defaults.global.defaultFontFamily = 'IRANSansFaNum';
|
|
|
|
var chartItemCanvas = $('#myChart');
|
|
var chartItem = null;
|
|
var chartProvinceItemsCanvas = [];
|
|
var chartProvinceItems = [];
|
|
var chartColors = [
|
|
'rgba(255, 99, 132, 0.6)',
|
|
'rgba(54, 162, 235, 0.6)',
|
|
'rgba(255, 206, 86, 0.6)',
|
|
'rgba(75, 192, 192, 0.6)',
|
|
'rgba(153, 102, 255, 0.6)',
|
|
'rgba(255, 159, 64, 0.6)',
|
|
'rgba(255, 64, 159, 0.6)',
|
|
'rgba(159, 255, 64, 0.6)',
|
|
'rgba(255, 64, 255, 0.6)',
|
|
'rgba(159, 159, 64, 0.6)',
|
|
];
|
|
|
|
function randomScalingFactor() {
|
|
return Math.round(Math.random() * 100);
|
|
};
|
|
|
|
function changeChartBoxTitle(str, area = 'کل کشور', changeTitle = 1) {
|
|
if (changeTitle) {
|
|
$('.chart-title').text(str + ' (' + area + ')');
|
|
} else {
|
|
let boxTitle = $('.chart-title').text();
|
|
boxTitle = boxTitle.substr(0, boxTitle.indexOf('('));
|
|
$('.chart-title').text(boxTitle + '(' + area + ')');
|
|
}
|
|
}
|
|
|
|
function makeConfigChart(num, showDetails) {
|
|
let config = null;
|
|
|
|
switch (num) {
|
|
case 1: {
|
|
config = {
|
|
type: 'pie',
|
|
data: {
|
|
datasets: [{
|
|
data: [
|
|
randomScalingFactor(),
|
|
randomScalingFactor()
|
|
],
|
|
backgroundColor: [
|
|
chartColors[0],
|
|
chartColors[1],
|
|
],
|
|
label: 'Dataset 1'
|
|
}],
|
|
labels: [
|
|
'احداث',
|
|
'نگه داری'
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
display: showDetails
|
|
},
|
|
title: {
|
|
display: showDetails,
|
|
text: 'تفکیک پروژه های راه روستایی',
|
|
position: 'bottom'
|
|
},
|
|
tooltips: {
|
|
enabled: showDetails
|
|
}
|
|
}
|
|
};
|
|
changeChartBoxTitle('تفکیک پروژه های راه روستایی');
|
|
break;
|
|
}
|
|
case 2: {
|
|
config = {
|
|
data: {
|
|
datasets: [{
|
|
data: [
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor()
|
|
],
|
|
backgroundColor: [
|
|
chartColors[0],
|
|
chartColors[1],
|
|
chartColors[2],
|
|
chartColors[3],
|
|
chartColors[4],
|
|
],
|
|
label: 'تفکیک پروژه های راه روستایی'
|
|
}],
|
|
labels: [
|
|
'شریانی',
|
|
'غیرشریانی',
|
|
'فرعی',
|
|
'اصلی',
|
|
'شریانی-اصلی'
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
display: showDetails,
|
|
position: 'right',
|
|
},
|
|
title: {
|
|
display: showDetails,
|
|
text: 'تفکیک پروژه های راه روستایی',
|
|
position: 'bottom'
|
|
},
|
|
scale: {
|
|
ticks: {
|
|
display: showDetails,
|
|
beginAtZero: true
|
|
},
|
|
reverse: false
|
|
},
|
|
animation: {
|
|
animateRotate: false,
|
|
animateScale: true
|
|
},
|
|
tooltips: {
|
|
enabled: showDetails
|
|
}
|
|
}
|
|
};
|
|
changeChartBoxTitle('تفکیک پروژه های راه روستایی');
|
|
break;
|
|
}
|
|
case 3: {
|
|
config = {
|
|
type: 'doughnut',
|
|
data: {
|
|
datasets: [{
|
|
data: [
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor()
|
|
|
|
],
|
|
backgroundColor: [
|
|
chartColors[0],
|
|
chartColors[1],
|
|
chartColors[2],
|
|
chartColors[3],
|
|
chartColors[4],
|
|
chartColors[5],
|
|
chartColors[6],
|
|
chartColors[7]
|
|
|
|
],
|
|
label: 'تفکیک پروژه های راهداری'
|
|
}],
|
|
labels: [
|
|
'پاکسازی',
|
|
'علایم',
|
|
'رنگ آمیزی',
|
|
'حریم',
|
|
'ایمن سازی',
|
|
'راهدار خانه',
|
|
'اضطراری',
|
|
'شستشو'
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
display: showDetails,
|
|
position: 'left',
|
|
},
|
|
title: {
|
|
display: showDetails,
|
|
text: 'تفکیک پروژه های راهداری',
|
|
position: 'bottom'
|
|
},
|
|
tooltips: {
|
|
enabled: showDetails
|
|
}
|
|
}
|
|
};
|
|
changeChartBoxTitle('تفکیک پروژه های راهداری');
|
|
break;
|
|
}
|
|
case 4: {
|
|
config = {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور'],
|
|
datasets: [{
|
|
label: 'پیشرفت فیزیکی',
|
|
backgroundColor: chartColors[0],
|
|
borderColor: chartColors[0],
|
|
data: [
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor()
|
|
],
|
|
fill: false,
|
|
}, {
|
|
label: 'پیشرفت ریالی',
|
|
fill: false,
|
|
backgroundColor: chartColors[1],
|
|
borderColor: chartColors[1],
|
|
data: [
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor()
|
|
],
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
display: showDetails,
|
|
},
|
|
title: {
|
|
display: showDetails,
|
|
text: 'نسبت پیشرفت فیزیکی به ریالی',
|
|
position: 'bottom'
|
|
},
|
|
tooltips: {
|
|
enabled: showDetails,
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
hover: {
|
|
mode: 'nearest',
|
|
intersect: true
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: showDetails,
|
|
scaleLabel: {
|
|
display: showDetails,
|
|
labelString: 'ماه'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
display: showDetails,
|
|
scaleLabel: {
|
|
display: showDetails,
|
|
labelString: 'مقدار'
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
};
|
|
changeChartBoxTitle('نسبت پیشرفت فیزیکی به ریالی');
|
|
break;
|
|
}
|
|
case 5: {
|
|
config = {
|
|
type: 'bar',
|
|
data:
|
|
{
|
|
labels: ['مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
|
|
datasets: [{
|
|
label: 'راه روستایی',
|
|
backgroundColor: chartColors[0],
|
|
borderColor: chartColors[0],
|
|
borderWidth: 1,
|
|
data: [
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor()
|
|
]
|
|
}, {
|
|
label: 'راهداری',
|
|
backgroundColor: chartColors[1],
|
|
borderColor: chartColors[1],
|
|
borderWidth: 1,
|
|
data: [
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor(),
|
|
randomScalingFactor()
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
display: showDetails,
|
|
position: 'top',
|
|
},
|
|
title: {
|
|
display: showDetails,
|
|
text: 'تفکیک پروژه های انجام شده تاکنون',
|
|
position: 'bottom'
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: showDetails,
|
|
}],
|
|
yAxes: [{
|
|
display: showDetails,
|
|
}]
|
|
},
|
|
tooltips: {
|
|
enabled: showDetails
|
|
}
|
|
}
|
|
};
|
|
changeChartBoxTitle('تفکیک پروژه های انجام شده تاکنون');
|
|
break;
|
|
}
|
|
case 6: {
|
|
break;
|
|
}
|
|
case 7: {
|
|
break;
|
|
}
|
|
case 8: {
|
|
break;
|
|
}
|
|
case 9: {
|
|
break;
|
|
}
|
|
case 10: {
|
|
break;
|
|
}
|
|
}
|
|
|
|
return config;
|
|
}
|
|
|
|
function updateChartBox(num) {
|
|
if (chartItem) {
|
|
chartItem.destroy();
|
|
}
|
|
|
|
if (num == 2) {
|
|
chartItem = new Chart.PolarArea(chartItemCanvas, makeConfigChart(num, true));
|
|
} else {
|
|
chartItem = new Chart(chartItemCanvas, makeConfigChart(num, true));
|
|
}
|
|
|
|
for (let i = 1; i <= 36; i++) {
|
|
if (chartProvinceItems[i]) {
|
|
chartProvinceItems[i].destroy();
|
|
}
|
|
|
|
if (num == 2) {
|
|
chartProvinceItems[i] = new Chart.PolarArea(chartProvinceItemsCanvas[i], makeConfigChart(num, false));
|
|
} else {
|
|
chartProvinceItems[i] = new Chart(chartProvinceItemsCanvas[i], makeConfigChart(num, false));
|
|
}
|
|
}
|
|
}
|
|
|
|
function showProvinceChartBox(element, id) {
|
|
let mainChartDataLength = chartItem.data.datasets[0].data.length;
|
|
let provinceChartData = chartProvinceItems[id].data;
|
|
let countDataset = 0;
|
|
|
|
for (let i = 0; i < mainChartDataLength; i++) {
|
|
chartRemoveData(chartItem);
|
|
}
|
|
|
|
provinceChartData.datasets.forEach((dataset) => {
|
|
for (let i = 0; i < dataset.data.length; i++) {
|
|
chartAddData(chartItem, countDataset, dataset.data[i]);
|
|
}
|
|
countDataset++;
|
|
});
|
|
|
|
changeChartBoxTitle('', $(element).find('.chart-province-item-title').text(), 0);
|
|
}
|
|
|
|
function chartAddData(chart, count, data, label) {
|
|
//chart.data.labels.push(label);
|
|
chart.data.datasets[count].data.push(data);
|
|
chart.update();
|
|
}
|
|
|
|
function chartRemoveData(chart) {
|
|
//chart.data.labels.pop();
|
|
chart.data.datasets.forEach((dataset) => {
|
|
dataset.data.pop();
|
|
});
|
|
chart.update();
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
for (let i = 1; i <= 36; i++) {
|
|
chartProvinceItemsCanvas[i] = $('#myChart' + i);
|
|
}
|
|
|
|
initIranGeoJson();
|
|
});
|
|
|
|
// -----------------------------------------
|
|
|
|
var iranGeoJSON = null;
|
|
var iranMapGeo = null;
|
|
var iranNameArray = [];
|
|
var iranArrayCount = 0;
|
|
var keepMapFeatureColor = null;
|
|
|
|
function getRandomFeatureColor() {
|
|
if (keepMapFeatureColor) {
|
|
return { num: -1, color: keepMapFeatureColor };
|
|
} else {
|
|
let randomNum = Math.floor(Math.random() * 101);
|
|
|
|
return randomNum >= 75 ? { num: randomNum, color: '#66cc66' } :
|
|
randomNum >= 50 ? { num: randomNum, color: '#80b3ff' } :
|
|
randomNum >= 25 ? { num: randomNum, color: '#ffeda0' } :
|
|
{ num: randomNum, color: '#ff704d' };
|
|
}
|
|
}
|
|
|
|
function initStyleMapFeatures(feature) {
|
|
let getRandom = getRandomFeatureColor();
|
|
let makeStyle = {
|
|
fillColor: getRandom.color,
|
|
weight: 2,
|
|
opacity: 1,
|
|
color: 'white',
|
|
fillOpacity: 0.5
|
|
};
|
|
|
|
if (getRandom.num != -1) {
|
|
if (iranArrayCount == 31) {
|
|
iranArrayCount = 0;
|
|
}
|
|
|
|
iranNameArray[iranArrayCount] = {
|
|
name: feature.name,
|
|
random: getRandom.num
|
|
};
|
|
|
|
iranArrayCount++;
|
|
}
|
|
|
|
return makeStyle;
|
|
}
|
|
|
|
function highlightMapFeature(e) {
|
|
let featureLayer = e.target;
|
|
|
|
keepMapFeatureColor = featureLayer.options.fillColor;
|
|
|
|
featureLayer.setStyle({
|
|
weight: 4,
|
|
color: '#666',
|
|
fillOpacity: 0.8
|
|
});
|
|
|
|
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
|
|
featureLayer.bringToFront();
|
|
}
|
|
}
|
|
|
|
function resetMapFeatureHighlight(e) {
|
|
iranMapGeo.resetStyle(e.target);
|
|
keepMapFeatureColor = null;
|
|
}
|
|
|
|
function zoomMapToFeature(e) {
|
|
map.fitBounds(e.target.getBounds());
|
|
}
|
|
|
|
function onEachFeature(feature, featureLayer) {
|
|
featureLayer.on({
|
|
mouseover: highlightMapFeature,
|
|
mouseout: resetMapFeatureHighlight,
|
|
click: zoomMapToFeature
|
|
});
|
|
}
|
|
|
|
function addTopFeatureToStat() {
|
|
let statItem = null;
|
|
|
|
iranNameArray.sort(function (itemA, itemB) {
|
|
return itemB.random - itemA.random;
|
|
});
|
|
|
|
let statMenu = $('.menu-stat-list > .stat-list');
|
|
|
|
if (iranNameArray.length > 0) {
|
|
for (let i = 0; i < 31; i++) {
|
|
statItemList = $('<li class="stat-list-li"></li>');
|
|
statItem = $('<div class="stat-list-item"></div>');
|
|
// statItem.append('<span class="item-rate">' + (i + 1) + '</span>');
|
|
statItem.append('<span class="item-title">' + iranNameArray[i].name + '</span>');
|
|
statItem.append('<span class="item-stat">' + iranNameArray[i].random + '٪' + '</span>');
|
|
if (iranNameArray[i].random >= 75) {
|
|
statItem.addClass('stat-item-top-1');
|
|
} else if (iranNameArray[i].random >= 50) {
|
|
statItem.addClass('stat-item-top-2');
|
|
} else if (iranNameArray[i].random >= 25) {
|
|
statItem.addClass('stat-item-top-3');
|
|
} else {
|
|
statItem.addClass('stat-item-top-4');
|
|
}
|
|
statItem.css('width', iranNameArray[i].random + '%');
|
|
statMenu.append(statItemList.append(statItem));
|
|
}
|
|
} else {
|
|
setTimeout(function () {
|
|
for (let i = 0; i < 31; i++) {
|
|
statItemList = $('<li class="stat-list-li"></li>');
|
|
statItem = $('<div class="stat-list-item"></div>');
|
|
// statItem.append('<span class="item-rate">' + (i + 1) + '</span>');
|
|
statItem.append('<span class="item-title">' + iranNameArray[i].name + '</span>');
|
|
statItem.append('<span class="item-stat">' + iranNameArray[i].random + '٪' + '</span>');
|
|
if (iranNameArray[i].random >= 75) {
|
|
statItem.addClass('stat-item-top-1');
|
|
} else if (iranNameArray[i].random >= 50) {
|
|
statItem.addClass('stat-item-top-2');
|
|
} else if (iranNameArray[i].random >= 25) {
|
|
statItem.addClass('stat-item-top-3');
|
|
} else {
|
|
statItem.addClass('stat-item-top-4');
|
|
}
|
|
statItem.css('width', iranNameArray[i].random + '%');
|
|
statMenu.append(statItemList.append(statItem));
|
|
}
|
|
}, 2000);
|
|
}
|
|
}
|
|
|
|
function addFeaturesToMap() {
|
|
if (iranGeoJSON) {
|
|
iranMapGeo = L.geoJson(iranGeoJSON, {
|
|
style: initStyleMapFeatures,
|
|
onEachFeature: onEachFeature
|
|
});
|
|
iranMapGeo.addTo(map);
|
|
} else {
|
|
setTimeout(function () {
|
|
iranMapGeo = L.geoJson(iranGeoJSON, {
|
|
style: initStyleMapFeatures,
|
|
onEachFeature: onEachFeature
|
|
});
|
|
iranMapGeo.addTo(map);
|
|
}, 2000);
|
|
}
|
|
}
|
|
|
|
function removeFeaturesFromMap() {
|
|
if (iranMapGeo) {
|
|
map.removeLayer(iranMapGeo);
|
|
iranMapGeo = null;
|
|
}
|
|
}
|
|
|
|
function loadIranGeoJson(callback) {
|
|
showLoaderScreen();
|
|
var xobj = new XMLHttpRequest();
|
|
xobj.overrideMimeType("application/json");
|
|
xobj.open('POST', 'https://141.ir/api/geojson', true);
|
|
xobj.onreadystatechange = function () {
|
|
if (xobj.readyState == 4 && xobj.status == "200") {
|
|
hideLoaderScreen();
|
|
callback(xobj.responseText);
|
|
}
|
|
};
|
|
xobj.send(null);
|
|
}
|
|
|
|
function initIranGeoJson() {
|
|
loadIranGeoJson(function (response) {
|
|
iranGeoJSON = JSON.parse(response);
|
|
});
|
|
}
|
|
|
|
// ------------- Ali ------------------------
|
|
|
|
var provinces = [
|
|
{
|
|
id: 1,
|
|
name: 'آذربایجان شرقی',
|
|
lat: 37.9211202,
|
|
lng: 46.6821517
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'آذربایجان غربی',
|
|
lat: 37.7416484,
|
|
lng: 45.0207638
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'اردبیل',
|
|
lat: 38.4583983,
|
|
lng: 47.9313001
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'اصفهان',
|
|
lat: 33.196733,
|
|
lng: 50.7884216,
|
|
projectCoordinates: [
|
|
{
|
|
id: 1,
|
|
type: 1,
|
|
lat: 33.096733,
|
|
lng: 50.7884216,
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 1,
|
|
lat: 33.396733,
|
|
lng: 50.7884216
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 2,
|
|
lat: 33.196733,
|
|
lng: 50.4884216
|
|
},
|
|
{
|
|
id: 4,
|
|
type: 2,
|
|
lat: 33.196733,
|
|
lng: 50.8884216
|
|
},
|
|
{
|
|
id: 5,
|
|
type: 3,
|
|
lat: 33.196733,
|
|
lng: 51.1884216
|
|
},
|
|
{
|
|
id: 6,
|
|
type: 4,
|
|
lat: 33.496733,
|
|
lng: 50.9884216
|
|
},
|
|
{
|
|
id: 7,
|
|
type: 2,
|
|
lat: 33.696733,
|
|
lng: 50.1884216
|
|
},
|
|
{
|
|
id: 8,
|
|
type: 3,
|
|
lat: 33.296733,
|
|
lng: 51.4884216
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 32,
|
|
name: 'البرز',
|
|
lat: 35.9960,
|
|
lng: 50.9289
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'ایلام',
|
|
lat: 33.1545696,
|
|
lng: 46.7576343
|
|
},
|
|
{
|
|
id: 6,
|
|
name: 'بوشهر',
|
|
lat: 28.8936645,
|
|
lng: 51.3204877
|
|
},
|
|
{
|
|
id: 7,
|
|
name: 'تهران',
|
|
lat: 35.5021945,
|
|
lng: 51.3269098
|
|
},
|
|
{
|
|
id: 8,
|
|
name: 'چهارمحال و بختیاری',
|
|
lat: 32.0163307,
|
|
lng: 50.685709
|
|
},
|
|
{
|
|
id: 29,
|
|
name: 'خراسان جنوبی',
|
|
lat: 33.0006776,
|
|
lng: 58.3262335
|
|
},
|
|
{
|
|
id: 30,
|
|
name: 'خراسان رضوی',
|
|
lat: 35.756361,
|
|
lng: 59.1280992,
|
|
projectCoordinates: [
|
|
{
|
|
id: 1,
|
|
type: 1,
|
|
lat: 35.756361,
|
|
lng: 59.1280992
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 1,
|
|
lat: 36.756361,
|
|
lng: 59.3280992
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 1,
|
|
lat: 35.456361,
|
|
lng: 60.1280992
|
|
},
|
|
{
|
|
id: 4,
|
|
type: 2,
|
|
lat: 35.956361,
|
|
lng: 60.5280992
|
|
},
|
|
{
|
|
id: 5,
|
|
type: 3,
|
|
lat: 34.156361,
|
|
lng: 60.5280992
|
|
},
|
|
{
|
|
id: 6,
|
|
type: 4,
|
|
lat: 34.756361,
|
|
lng: 59.6280992
|
|
},
|
|
{
|
|
id: 7,
|
|
type: 1,
|
|
lat: 34.156361,
|
|
lng: 58.6280992
|
|
},
|
|
{
|
|
id: 8,
|
|
type: 2,
|
|
lat: 35.156361,
|
|
lng: 58.4280992
|
|
},
|
|
{
|
|
id: 9,
|
|
type: 2,
|
|
lat: 36.056361,
|
|
lng: 58.1280992
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 31,
|
|
name: 'خراسان شمالی',
|
|
lat: 37.5378855,
|
|
lng: 56.9526137
|
|
},
|
|
{
|
|
id: 10,
|
|
name: 'خوزستان',
|
|
lat: 31.5535141,
|
|
lng: 49.0077168
|
|
},
|
|
{
|
|
id: 11,
|
|
name: 'زنجان',
|
|
lat: 36.515854,
|
|
lng: 48.4777616,
|
|
projectCoordinates: [
|
|
{
|
|
id: 1,
|
|
type: 1,
|
|
lat: 36.515854,
|
|
lng: 48.4777616
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 1,
|
|
lat: 35.415854,
|
|
lng: 47.5777616
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 2,
|
|
lat: 37.315854,
|
|
lng: 48.3777616
|
|
},
|
|
{
|
|
id: 4,
|
|
type: 4,
|
|
lat: 36.915854,
|
|
lng: 48.5777616
|
|
},
|
|
{
|
|
id: 5,
|
|
type: 2,
|
|
lat: 37.115854,
|
|
lng: 49.4777616
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 12,
|
|
name: 'سمنان',
|
|
lat: 35.4380386,
|
|
lng: 54.8626294
|
|
},
|
|
{
|
|
id: 13,
|
|
name: 'سیستان و بلوچستان',
|
|
lat: 28.1292481,
|
|
lng: 60.8236848,
|
|
projectCoordinates: [
|
|
{
|
|
id: 1,
|
|
type: 1,
|
|
lat: 29.1292481,
|
|
lng: 60.8236848
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 1,
|
|
lat: 28.1292481,
|
|
lng: 61.8236848
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 1,
|
|
lat: 27.1292481,
|
|
lng: 61.8236848
|
|
},
|
|
{
|
|
id: 4,
|
|
type: 2,
|
|
lat: 28.1292481,
|
|
lng: 59.8236848
|
|
},
|
|
{
|
|
id: 5,
|
|
type: 3,
|
|
lat: 30.1292481,
|
|
lng: 60.4236848
|
|
},
|
|
{
|
|
id: 6,
|
|
type: 4,
|
|
lat: 31.1292481,
|
|
lng: 61.4236848
|
|
},
|
|
{
|
|
id: 7,
|
|
type: 4,
|
|
lat: 27.7292481,
|
|
lng: 60.8236848
|
|
},
|
|
{
|
|
id: 8,
|
|
type: 2,
|
|
lat: 27.1292481,
|
|
lng: 59.2236848
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 14,
|
|
name: 'فارس',
|
|
lat: 29.299051,
|
|
lng: 53.218456
|
|
},
|
|
{
|
|
id: 28,
|
|
name: 'قزوین',
|
|
lat: 36.0156291,
|
|
lng: 49.8398161
|
|
},
|
|
{
|
|
id: 26,
|
|
name: 'قم',
|
|
lat: 34.7191915,
|
|
lng: 51.0122844
|
|
},
|
|
{
|
|
id: 16,
|
|
name: 'کردستان',
|
|
lat: 35.672803,
|
|
lng: 47.0124376
|
|
},
|
|
{
|
|
id: 15,
|
|
name: 'کرمان',
|
|
lat: 29.571858,
|
|
lng: 57.301047
|
|
},
|
|
{
|
|
id: 17,
|
|
name: 'کرمانشاه',
|
|
lat: 34.3789744,
|
|
lng: 46.7010122
|
|
},
|
|
{
|
|
id: 18,
|
|
name: 'کهگیلویه و بویراحمد',
|
|
lat: 30.8143476,
|
|
lng: 50.8661454
|
|
},
|
|
{
|
|
id: 27,
|
|
name: 'گلستان',
|
|
lat: 37.1984436,
|
|
lng: 55.070672
|
|
},
|
|
{
|
|
id: 19,
|
|
name: 'گیلان',
|
|
lat: 37.5115476,
|
|
lng: 49.3554429
|
|
},
|
|
{
|
|
id: 20,
|
|
name: 'لرستان',
|
|
lat: 33.5372643,
|
|
lng: 48.2435197
|
|
},
|
|
{
|
|
id: 21,
|
|
name: 'مازندران',
|
|
lat: 36.3159159,
|
|
lng: 51.8968597
|
|
},
|
|
{
|
|
id: 22,
|
|
name: 'مرکزی',
|
|
lat: 34.5302705,
|
|
lng: 49.7864561
|
|
},
|
|
{
|
|
id: 23,
|
|
name: 'هرمزگان',
|
|
lat: 27.7198095,
|
|
lng: 56.335807
|
|
},
|
|
{
|
|
id: 24,
|
|
name: 'همدان',
|
|
lat: 34.973321,
|
|
lng: 48.6555779
|
|
},
|
|
{
|
|
id: 25,
|
|
name: 'یزد',
|
|
lat: 32.2452686,
|
|
lng: 55.105172,
|
|
projectCoordinates: [
|
|
{
|
|
id: 1,
|
|
type: 1,
|
|
lat: 32.1452686,
|
|
lng: 55.205172,
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 1,
|
|
lat: 31.8452686,
|
|
lng: 55.205172,
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 1,
|
|
lat: 31.8452686,
|
|
lng: 55.405172,
|
|
},
|
|
{
|
|
id: 4,
|
|
type: 2,
|
|
lat: 31.6452686,
|
|
lng: 55.605172,
|
|
},
|
|
{
|
|
id: 5,
|
|
type: 2,
|
|
lat: 32.3452686,
|
|
lng: 55.205172,
|
|
},
|
|
{
|
|
id: 6,
|
|
type: 3,
|
|
lat: 32.9452686,
|
|
lng: 55.105172,
|
|
},
|
|
{
|
|
id: 7,
|
|
type: 3,
|
|
lat: 33.2452686,
|
|
lng: 55.905172,
|
|
},
|
|
]
|
|
},
|
|
];
|
|
|
|
$('svg #iran polygon').on('click', function () {
|
|
// console.log(this.id);
|
|
// console.log(provinces.find(entry => entry.id == parseInt(this.id.substring(3))));
|
|
if ($('.left-menu-map').css('width') == '500px') {
|
|
let selectedProvince = provinces.find(entry => entry.id == parseInt(this.id.substring(3)));
|
|
|
|
// areaChart = new Chart(areaChartCanvas, {
|
|
// type: 'line',
|
|
// data: areaChartData2,
|
|
// options: areaChartOptions
|
|
// });
|
|
|
|
// let numberOfProjects = $('.numberOfProjects');
|
|
// let numberOfActiveProjects = $('#numberOfActiveProjects');
|
|
// let numberOfOpenedProjects = $('#numberOfOpenedProjects');
|
|
// let numberOfFinishedProjects = $('#numberOfFinishedProjects');
|
|
// let numberOfStoppedProjects = $('#numberOfStoppedProjects');
|
|
|
|
// jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 700 }, {
|
|
// duration: 1000,
|
|
// easing: 'swing',
|
|
// step: function () {
|
|
// numberOfProjects.text(Math.ceil(this.Counter));
|
|
// }
|
|
// });
|
|
// jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 400 }, {
|
|
// duration: 1000,
|
|
// easing: 'swing',
|
|
// step: function () {
|
|
// numberOfActiveProjects.text(Math.ceil(this.Counter));
|
|
// }
|
|
// });
|
|
// jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 250 }, {
|
|
// duration: 1000,
|
|
// easing: 'swing',
|
|
// step: function () {
|
|
// numberOfOpenedProjects.text(Math.ceil(this.Counter));
|
|
// }
|
|
// });
|
|
// jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 100 }, {
|
|
// duration: 1000,
|
|
// easing: 'swing',
|
|
// step: function () {
|
|
// numberOfFinishedProjects.text(Math.ceil(this.Counter));
|
|
// }
|
|
// });
|
|
// jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 50) }, {
|
|
// duration: 1000,
|
|
// easing: 'swing',
|
|
// step: function () {
|
|
// numberOfStoppedProjects.text(Math.ceil(this.Counter));
|
|
// }
|
|
// });
|
|
|
|
map.removeLayer(markerLayers);
|
|
|
|
map.flyTo([selectedProvince.lat, selectedProvince.lng], 9);
|
|
|
|
for (let index = 0; index < selectedProvince.projectCoordinates.length; index++) {
|
|
switch (selectedProvince.projectCoordinates[index].type) {
|
|
case 1: {
|
|
L.marker(
|
|
[selectedProvince.projectCoordinates[index].lat, selectedProvince.projectCoordinates[index].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup(getCustomPopupContent(selectedProvince.name, 2), { 'className': 'customPopupStyle' })
|
|
.addTo(map);
|
|
break;
|
|
}
|
|
case 2: {
|
|
L.marker(
|
|
[selectedProvince.projectCoordinates[index].lat, selectedProvince.projectCoordinates[index].lng],
|
|
{ icon: greenIcon }
|
|
).bindPopup(getCustomPopupContent(selectedProvince.name, 2), { 'className': 'customPopupStyle' })
|
|
.addTo(map);
|
|
break;
|
|
}
|
|
case 3: {
|
|
L.marker(
|
|
[selectedProvince.projectCoordinates[index].lat, selectedProvince.projectCoordinates[index].lng],
|
|
{ icon: yellowIcon }
|
|
).bindPopup(getCustomPopupContent(selectedProvince.name, 2), { 'className': 'customPopupStyle' })
|
|
.addTo(map);
|
|
break;
|
|
}
|
|
case 4: {
|
|
L.marker(
|
|
[selectedProvince.projectCoordinates[index].lat, selectedProvince.projectCoordinates[index].lng],
|
|
{ icon: redIcon }
|
|
).bindPopup(getCustomPopupContent(selectedProvince.name, 2), { 'className': 'customPopupStyle' })
|
|
.addTo(map);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Project icons
|
|
var blueIcon = L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: "<span class='beacon beacon-blue'></span>",
|
|
iconSize: [30, 42],
|
|
// iconAnchor: [15, 42]
|
|
});
|
|
var greenIcon = L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: "<span class='beacon beacon-green'></span>",
|
|
iconSize: [30, 42],
|
|
// iconAnchor: [15, 42]
|
|
});
|
|
var yellowIcon = L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: "<span class='beacon beacon-yellow'></span>",
|
|
iconSize: [30, 42],
|
|
// iconAnchor: [15, 42]
|
|
});
|
|
var redIcon = L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: "<span class='beacon beacon-red'></span>",
|
|
iconSize: [30, 42],
|
|
// iconAnchor: [15, 42]
|
|
});
|
|
|
|
function getPopupContent(type) {
|
|
// switch (type) {
|
|
// case 1: {
|
|
// // Active
|
|
// break;
|
|
// }
|
|
// case 2: {
|
|
// // Opened
|
|
// break;
|
|
// }
|
|
// case 3: {
|
|
// // Finished
|
|
// break;
|
|
// }
|
|
// case 4: {
|
|
// // Stopped
|
|
// break;
|
|
// }
|
|
// }
|
|
|
|
return "\
|
|
<div class=\"popup\">\
|
|
<div class=\"popupTitle\">\
|
|
<img src=\"dist/images/road.svg\" alt=\"\">\
|
|
<span class=\"popupHeader\">پهنه بندی جاده های روستایی</span>\
|
|
</div>\
|
|
<div class=\"popupContent\">\
|
|
<div class=\"popUpBox\" style=\"width:75px\"><span>نوع عملیات</span><div class=\"popUpBoxContent\">"+ operationType + "</div></div>\
|
|
<div class=\"popUpBox\" style=\"width:75px\"><span>وضعیت فعلی پروژه</span><div class=\"popUpBoxContent\">"+ getProjectStatus(type) + "</div></div>\
|
|
<div class=\"popUpBox\" style=\"width:75px\"><span>اداره کل</span><div class=\"popUpBoxContent\">" + selectedProvince + "</div> </div>\
|
|
<div class=\"popUpBox\" style=\"width:75px\"><span>درصد پیشرفت فیزیکی</span><div class=\"popUpBoxContent\">" + getProjectProgress() + "%</div></div>\
|
|
</div>";
|
|
}
|
|
|
|
function getProjectStatus(type) {
|
|
switch (type) {
|
|
case 1:
|
|
return 'فعال';
|
|
case 2:
|
|
return 'افتتاح شده';
|
|
case 3:
|
|
return 'خاتمه یافته';
|
|
case 4:
|
|
return 'متوقف شده';
|
|
}
|
|
}
|
|
|
|
function getProjectProgress() {
|
|
let percentage = Math.floor(Math.random() * 100) + 1; // returns a random integer from 0 to 99 + 1
|
|
return percentage;
|
|
}
|
|
|
|
function getParameterByName(name) {
|
|
let url = window.location.href;
|
|
name = name.replace(/[\[\]]/g, '\\$&');
|
|
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
|
|
results = regex.exec(url);
|
|
if (!results) return null;
|
|
if (!results[2]) return '';
|
|
return decodeURIComponent(results[2].replace(/\+/g, ' '));
|
|
}
|
|
|
|
if (getParameterByName('operationType')) {
|
|
var operationType = getParameterByName('operationType');
|
|
var projectStatus = getParameterByName('projectStatus');
|
|
var selectedProvince = getParameterByName('selectedProvince');
|
|
var selectedTown = getParameterByName('selectedTown');
|
|
var sourceLat = getParameterByName('sourceLat');
|
|
var sourceLng = getParameterByName('sourceLng');
|
|
|
|
L.marker(
|
|
[sourceLat, sourceLng],
|
|
{ icon: greenIcon }
|
|
).bindPopup(getPopupContent(returnOperationType(projectStatus)), { 'className': 'customPopupStyle' })
|
|
.addTo(map);
|
|
}
|
|
|
|
function returnOperationType(status) {
|
|
switch (status) {
|
|
case 'فعال': {
|
|
return 1;
|
|
}
|
|
case 'متوقف': {
|
|
return 4;
|
|
}
|
|
case 'خاتمهیافته': {
|
|
return 3;
|
|
}
|
|
}
|
|
}
|
|
|
|
// console.log(operationType);
|
|
// console.log(projectStatus);
|
|
// console.log(selectedProvince);
|
|
// console.log(selectedTown);
|
|
// console.log(sourceLat);
|
|
// console.log(sourceLng);
|
|
|
|
function getCustomPopupContent(data, type) {
|
|
if (type == 1) {
|
|
return "\
|
|
<div class=\"popup\">\
|
|
<div class=\"popupTitle\">\
|
|
<img src=\"dist/images/road.svg\" alt=\"\">\
|
|
<span class=\"popupHeader\">پهنه بندی جاده های روستایی</span>\
|
|
</div>\
|
|
<div class=\"popupContent\">\
|
|
<div class=\"popUpBox\" style=\"width:75px\"><span>نوع عملیات</span><div class=\"popUpBoxContent\">"+ generateRandom(1) + "</div></div>\
|
|
<div class=\"popUpBox\" style=\"width:75px\"><span>وضعیت فعلی پروژه</span><div class=\"popUpBoxContent\">"+ generateRandom(2) + "</div></div>\
|
|
<div class=\"popUpBox\" style=\"width:75px\"><span>اداره کل</span><div class=\"popUpBoxContent\">" + returnProvinceString(data.ProvinceID) + "</div> </div>\
|
|
<div class=\"popUpBox\" style=\"width:75px\"><span>درصد پیشرفت فیزیکی</span><div class=\"popUpBoxContent\">" + getProjectProgress() + "%</div></div>\
|
|
</div>";
|
|
} else {
|
|
return "\
|
|
<div class=\"popup\">\
|
|
<div class=\"popupTitle\">\
|
|
<img src=\"dist/images/road.svg\" alt=\"\">\
|
|
<span class=\"popupHeader\">پهنه بندی جاده های روستایی</span>\
|
|
</div>\
|
|
<div class=\"popupContent\">\
|
|
<div class=\"popUpBox\" style=\"width:75px\"><span>نوع عملیات</span><div class=\"popUpBoxContent\">"+ generateRandom(1) + "</div></div>\
|
|
<div class=\"popUpBox\" style=\"width:75px\"><span>وضعیت فعلی پروژه</span><div class=\"popUpBoxContent\">"+ generateRandom(2) + "</div></div>\
|
|
<div class=\"popUpBox\" style=\"width:75px\"><span>اداره کل</span><div class=\"popUpBoxContent\">" + data + "</div> </div>\
|
|
<div class=\"popUpBox\" style=\"width:75px\"><span>درصد پیشرفت فیزیکی</span><div class=\"popUpBoxContent\">" + getProjectProgress() + "%</div></div>\
|
|
</div>";
|
|
}
|
|
}
|
|
|
|
function generateRandom(index) {
|
|
switch (index) {
|
|
case 1: {
|
|
// Operation Type
|
|
let randomNumber = Math.floor(Math.random() * 2) + 1; // 1 or 2
|
|
if (randomNumber == 1) return 'احداث'
|
|
else return 'نگهداری';
|
|
}
|
|
case 2: {
|
|
// Project Status
|
|
let randomNumber = Math.floor(Math.random() * 3) + 1; // 1, 2, or 3
|
|
switch (randomNumber) {
|
|
case 1: return 'فعال';
|
|
case 2: return 'متوقف';
|
|
case 3: return 'خاتمه یافته';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function returnProvinceString(provinceId) {
|
|
switch (provinceId) {
|
|
case '1': return 'مازندران';
|
|
case '2': return 'تهران';
|
|
case '3': return 'فارس';
|
|
case '4': return 'خراسان رضوی';
|
|
case '5': return 'آذربایجان غربی';
|
|
case '6': return 'آذربایجان شرقی';
|
|
case '7': return 'اردبیل';
|
|
case '8': return 'گیلان';
|
|
case '9': return 'زنجان';
|
|
case '10': return 'کردستان';
|
|
case '11': return 'کرمانشاه';
|
|
case '12': return 'همدان';
|
|
case '13': return 'قزوین';
|
|
case '14': return 'البرز';
|
|
case '15': return 'گلستان';
|
|
case '16': return 'خراسان شمالی';
|
|
case '17': return 'سمنان';
|
|
case '18': return 'قم';
|
|
case '19': return 'مرکزی';
|
|
case '20': return 'لرستان';
|
|
case '21': return 'ایلام';
|
|
case '22': return 'اصفهان';
|
|
case '23': return 'یزد';
|
|
case '24': return 'خراسان جنوبی';
|
|
case '25': return 'چهارمحال و بختیاری';
|
|
case '26': return 'خوزستان';
|
|
case '27': return 'کهگیلویه و بویر احمد';
|
|
case '28': return 'بوشهر';
|
|
case '29': return 'کرمان';
|
|
case '30': return 'سیستان و بلوچستان';
|
|
case '31': return 'هرمزگان';
|
|
}
|
|
}
|
|
|
|
function showLayer(index) {
|
|
if (markerLayers != null) {
|
|
map.removeLayer(markerLayers);
|
|
}
|
|
|
|
switch (index) {
|
|
case 0: {
|
|
$.post('https://141.ir/api/camera', function (data) {
|
|
markerLayers = L.markerClusterGroup();
|
|
|
|
for (let index = 0; index < data.length; index++) {
|
|
let marker = L.marker(
|
|
[data[index].lat, data[index].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup(getCustomPopupContent(data[index], 1), { 'className': 'customPopupStyle' });
|
|
markerList.push(marker);
|
|
}
|
|
markerLayers.addLayers(markerList);
|
|
map.addLayer(markerLayers);
|
|
});
|
|
break;
|
|
}
|
|
case 1: {
|
|
$.post('https://141.ir/api/roadoperation', function (data) {
|
|
markerLayers = L.markerClusterGroup({ disableClusteringAtZoom: 5 });
|
|
|
|
for (let index = 0; index < data.length; index++) {
|
|
let marker = L.marker(
|
|
[data[index].lat, data[index].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup(getCustomPopupContent(data[index], 1), { 'className': 'customPopupStyle' });
|
|
markerList.push(marker);
|
|
}
|
|
markerLayers.addLayers(markerList);
|
|
map.addLayer(markerLayers);
|
|
});
|
|
break;
|
|
}
|
|
case 2: {
|
|
$.post('https://141.ir/api/roadaccident', function (data) {
|
|
markerLayers = L.markerClusterGroup({ disableClusteringAtZoom: 5 });
|
|
|
|
for (let index = 0; index < data.length; index++) {
|
|
let marker = L.marker(
|
|
[data[index].lat, data[index].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup(getCustomPopupContent(data[index], 1), { 'className': 'customPopupStyle' });
|
|
markerList.push(marker);
|
|
}
|
|
markerLayers.addLayers(markerList);
|
|
map.addLayer(markerLayers);
|
|
});
|
|
break;
|
|
}
|
|
case 3: {
|
|
$.post('https://141.ir/api/weather', function (data) {
|
|
markerLayers = L.markerClusterGroup();
|
|
|
|
for (let index = 0; index < data.length; index++) {
|
|
let marker = L.marker(
|
|
[data[index].lat, data[index].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup(getCustomPopupContent(data[index], 1), { 'className': 'customPopupStyle' });
|
|
markerList.push(marker);
|
|
}
|
|
markerLayers.addLayers(markerList);
|
|
map.addLayer(markerLayers);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// ------------- Ali End ------------------------
|
|
|
|
function showLoaderScreen() {
|
|
$('.starter-loader-container').css('display', 'flex').hide().fadeIn();
|
|
}
|
|
|
|
function hideLoaderScreen() {
|
|
$('.starter-loader-container').fadeOut();
|
|
}
|
|
|
|
function show141Layer(index) {
|
|
if (marker141Layers != null) {
|
|
marker141List = [];
|
|
map.removeLayer(marker141Layers);
|
|
}
|
|
|
|
showLoaderScreen();
|
|
|
|
switch (index) {
|
|
case 0: {
|
|
$.post(API_ENDPOINT + '/camera', function (data) {
|
|
marker141Layers = L.markerClusterGroup();
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
let marker = L.marker(
|
|
[data[i].lat, data[i].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup('دوربین: ' + data[i].Title);
|
|
marker141List.push(marker);
|
|
}
|
|
marker141Layers.addLayers(marker141List);
|
|
map.addLayer(marker141Layers);
|
|
hideLoaderScreen();
|
|
});
|
|
break;
|
|
}
|
|
case 1: {
|
|
$.post(API_ENDPOINT + '/otfapi', function (data) {
|
|
marker141Layers = L.markerClusterGroup();
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
let marker = L.marker(
|
|
[data[i].lat, data[i].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup('ترددشمار: ' + data[i].m_n);
|
|
marker141List.push(marker);
|
|
}
|
|
marker141Layers.addLayers(marker141List);
|
|
map.addLayer(marker141Layers);
|
|
hideLoaderScreen();
|
|
});
|
|
break;
|
|
}
|
|
case 2: {
|
|
$.post(API_ENDPOINT + '/roadoperation', function (data) {
|
|
marker141Layers = L.markerClusterGroup();
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
let marker = L.marker(
|
|
[data[i].lat, data[i].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup('کارگاه: ' + data[i].OperationName);
|
|
marker141List.push(marker);
|
|
}
|
|
marker141Layers.addLayers(marker141List);
|
|
map.addLayer(marker141Layers);
|
|
hideLoaderScreen();
|
|
});
|
|
break;
|
|
}
|
|
case 3: {
|
|
$.post(API_ENDPOINT + '/roadblock', function (data) {
|
|
marker141Layers = L.markerClusterGroup();
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
let marker = L.marker(
|
|
[data[i].lat, data[i].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup('انسداد: ' + data[i].Title);
|
|
marker141List.push(marker);
|
|
}
|
|
marker141Layers.addLayers(marker141List);
|
|
map.addLayer(marker141Layers);
|
|
hideLoaderScreen();
|
|
});
|
|
break;
|
|
}
|
|
case 4: {
|
|
$.post(API_ENDPOINT + '/emdad', function (data) {
|
|
marker141Layers = L.markerClusterGroup();
|
|
|
|
for (let i = 0; i < data.ikco.length; i++) {
|
|
let marker = L.marker(
|
|
[data.ikco[i].lat, data.ikco[i].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup('امداد فنی: ' + data.ikco[i].onvan);
|
|
marker141List.push(marker);
|
|
}
|
|
for (let i = 0; i < data.saipa.length; i++) {
|
|
let marker = L.marker(
|
|
[data.saipa[i].lat, data.saipa[i].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup('امداد فنی');
|
|
marker141List.push(marker);
|
|
}
|
|
marker141Layers.addLayers(marker141List);
|
|
map.addLayer(marker141Layers);
|
|
hideLoaderScreen();
|
|
});
|
|
break;
|
|
}
|
|
case 5: {
|
|
$.post(API_ENDPOINT + '/weather', function (data) {
|
|
marker141Layers = L.markerClusterGroup();
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
let marker = L.marker(
|
|
[data[i].lat, data[i].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup('آب و هوا: ' + data[i].Station_Name);
|
|
marker141List.push(marker);
|
|
}
|
|
marker141Layers.addLayers(marker141List);
|
|
map.addLayer(marker141Layers);
|
|
hideLoaderScreen();
|
|
});
|
|
break;
|
|
}
|
|
case 6: {
|
|
$.post(API_ENDPOINT + '/gasstation', function (data) {
|
|
marker141Layers = L.markerClusterGroup();
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
let marker = L.marker(
|
|
[data[i].lat, data[i].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup('جایگاه سوخت: ' + data[i].station_name);
|
|
marker141List.push(marker);
|
|
}
|
|
marker141Layers.addLayers(marker141List);
|
|
map.addLayer(marker141Layers);
|
|
hideLoaderScreen();
|
|
});
|
|
break;
|
|
}
|
|
case 7: {
|
|
$.post(API_ENDPOINT + '/complex', function (data) {
|
|
marker141Layers = L.markerClusterGroup();
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
let marker = L.marker(
|
|
[data[i].lat, data[i].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup('خدمات رفاهی: ' + data[i].complex_name);
|
|
marker141List.push(marker);
|
|
}
|
|
marker141Layers.addLayers(marker141List);
|
|
map.addLayer(marker141Layers);
|
|
hideLoaderScreen();
|
|
});
|
|
break;
|
|
}
|
|
case 8: {
|
|
$.post(API_ENDPOINT + '/mosque', function (data) {
|
|
marker141Layers = L.markerClusterGroup();
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
let marker = L.marker(
|
|
[data[i].lat, data[i].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup('نمازخانه: ' + data[i].mosque_name);
|
|
marker141List.push(marker);
|
|
}
|
|
marker141Layers.addLayers(marker141List);
|
|
map.addLayer(marker141Layers);
|
|
hideLoaderScreen();
|
|
});
|
|
break;
|
|
}
|
|
case 9: {
|
|
$.post(API_ENDPOINT + '/roadaccident', function (data) {
|
|
marker141Layers = L.markerClusterGroup();
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
let marker = L.marker(
|
|
[data[i].lat, data[i].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup('تصادفات: ' + data[i].CollisionTypeTitle);
|
|
marker141List.push(marker);
|
|
}
|
|
marker141Layers.addLayers(marker141List);
|
|
map.addLayer(marker141Layers);
|
|
hideLoaderScreen();
|
|
});
|
|
break;
|
|
}
|
|
case 10: {
|
|
$.post(API_ENDPOINT + '/tollhouse', function (data) {
|
|
marker141Layers = L.markerClusterGroup();
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
let marker = L.marker(
|
|
[data[i].lat, data[i].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup('راهدارخانه: ' + data[i].toll_name);
|
|
marker141List.push(marker);
|
|
}
|
|
marker141Layers.addLayers(marker141List);
|
|
map.addLayer(marker141Layers);
|
|
hideLoaderScreen();
|
|
});
|
|
break;
|
|
}
|
|
case 11: {
|
|
$.post(API_ENDPOINT + '/hospital', function (data) {
|
|
marker141Layers = L.markerClusterGroup();
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
let marker = L.marker(
|
|
[data[i].lat, data[i].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup('خدمات درمانی: ' + data[i].hos_name);
|
|
marker141List.push(marker);
|
|
}
|
|
marker141Layers.addLayers(marker141List);
|
|
map.addLayer(marker141Layers);
|
|
hideLoaderScreen();
|
|
});
|
|
break;
|
|
}
|
|
case 12: {
|
|
$.post(API_ENDPOINT + '/repair', function (data) {
|
|
marker141Layers = L.markerClusterGroup();
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
let marker = L.marker(
|
|
[data[i].lat, data[i].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup('تعمیرگاه: ' + data[i].repair_name);
|
|
marker141List.push(marker);
|
|
}
|
|
marker141Layers.addLayers(marker141List);
|
|
map.addLayer(marker141Layers);
|
|
hideLoaderScreen();
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function remove141Layer() {
|
|
if (marker141Layers != null) {
|
|
marker141List = [];
|
|
map.removeLayer(marker141Layers);
|
|
|
|
$('.left-menu-141 > .item-menu-141.item-141-active').removeClass('item-141-active');
|
|
}
|
|
}
|