3629 lines
98 KiB
JavaScript
3629 lines
98 KiB
JavaScript
//default variables
|
||
DEFAULT_ACTION_ID = 1;
|
||
DEFALUT_YEAR = moment().format('jYYYY');
|
||
DEFAULT_TIMER = 300;
|
||
DEFAULT_URL = "/";
|
||
DEFAULT_API = "api/bi/";
|
||
DEFAULT_WEB = "bi/";
|
||
|
||
MAP_ENDPOINT = "https://rmsmap.rmto.ir";
|
||
MAP_MIN_ZOOM = 5;
|
||
MAP_MAX_ZOOM = 10;
|
||
|
||
RAHDARI_PROJECTS_ID = 1;
|
||
RAHDARI_CURRENT_ACTIVITYS_ID = 2;
|
||
RAHDARI_MISSIONS_ID = 3;
|
||
HANDLED_COMPLAINTS_ID = 4;
|
||
DANGER_POINTS_ID = 5;
|
||
ACCIDENT_POINTS_ID = 6;
|
||
DAMAGE_AXES_ID = 7;
|
||
|
||
//charts variables
|
||
var StatusChart = null;
|
||
var StatusChartPrint = null;
|
||
var charts = {
|
||
action1Chart1: null,
|
||
action1Chart2: null,
|
||
action1Chart3: null,
|
||
action1Chart4: null,
|
||
action2Chart1: null,
|
||
action2Chart2: null,
|
||
action4Chart1: null,
|
||
action4Chart2: null,
|
||
action5Chart1: null,
|
||
action5Chart2: null,
|
||
action7Chart1: null,
|
||
action7Chart2: null,
|
||
action1Chart1Print: null,
|
||
action1Chart2Print: null,
|
||
action1Chart3Print: null,
|
||
action1Chart4Print: null,
|
||
action2Chart1Print: null,
|
||
action2Chart2Print: null,
|
||
action4Chart1Print: null,
|
||
action4Chart2Print: null,
|
||
action5Chart1Print: null,
|
||
action5Chart2Print: null,
|
||
action7Chart1Print: null,
|
||
action7Chart2Print: null,
|
||
};
|
||
|
||
//current variables
|
||
var currentActionId;
|
||
var currentRoadInfrastructureDetails;
|
||
var currentTimer;
|
||
var currentDate = {};
|
||
|
||
//current filter variables
|
||
var currentFilterProvince;
|
||
var currentFilterCity;
|
||
var currentFilterYear;
|
||
var currentFilterMonth;
|
||
var currentFilterFromDate;
|
||
var currentFilterToDate;
|
||
var currentFilterQuery;
|
||
var currentFilterRahdariActivity;
|
||
var currentFilterRoadInfrastructure;
|
||
|
||
//variables
|
||
var timer;
|
||
var dateFrom;
|
||
var dateTo;
|
||
var provinces;
|
||
var cities;
|
||
var loadChart = [];
|
||
var loadProgressBar = [];
|
||
var disabledButtonMap = {};
|
||
|
||
var MapBi;
|
||
var bounds = [
|
||
[42.9130026312, 75.6166317076],
|
||
[20.5782370061, 30.5092252948],
|
||
];
|
||
var showbounds = [32.4279, 53.688];
|
||
var pahneArray = [];
|
||
var iranGeoJSON = JSON.parse(PROVICES_GEOJSON);
|
||
var iranMapGeo;
|
||
var iranArrayCount = 0;
|
||
var iranCityCount = 0;
|
||
var keepMapFeatureColor = null;
|
||
var fullCityGeoJSONTemp = new Object();
|
||
var fullCityGeoJSON = JSON.parse(CITIES_GEOJSON);
|
||
var iranCityMapGeo;
|
||
var iranAllCityMapGeo;
|
||
var flagProvince = 0;
|
||
var eachfeature = [];
|
||
var diagramData = [];
|
||
var choosenProvince;
|
||
var cityArray = [];
|
||
var currentChoosenCity = -1;
|
||
var currentTarget = new Object();
|
||
var currentCityDiagram = new Object();
|
||
var curentCityArray = [];
|
||
var curentValueCity = [];
|
||
var AllCityDiagram = new Object();
|
||
var AllcityArray = [];
|
||
var AllValueCity = [];
|
||
var curentValueAllCity = [];
|
||
var allCityGeoTemp = new Object();
|
||
var allCityCount = 0;
|
||
var allCityFlag = 0;
|
||
var CityArraySelected = [];
|
||
var AllCityArrayPopUp = [];
|
||
let popup = L.popup();
|
||
|
||
$(document).ready(function () {
|
||
timer = setInterval(function () {}, currentTimer * 1000);
|
||
initPage();
|
||
});
|
||
|
||
async function initPage() {
|
||
await showLoader(false);
|
||
|
||
$("#filter-year").append(`<option value="0">تمامی سال ها</option>`);
|
||
|
||
for (let index = +DEFALUT_YEAR ; index >= 1393; index--) {
|
||
$("#filter-year").append(`<option value="${index}">${index}</option>`);
|
||
}
|
||
|
||
//init filter provinces
|
||
let isSuccessProvinceAjax = false;
|
||
$.ajax({
|
||
url: DEFAULT_URL + "public/contents/provinces",
|
||
method: "GET",
|
||
async: false,
|
||
success: function ({ data }) {
|
||
provinces = data;
|
||
data.map((element) => {
|
||
$('select[name="filter-province"]').append(
|
||
`<option value="${element.id}">${element.name_fa}</option>`
|
||
);
|
||
});
|
||
isSuccessProvinceAjax = true;
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات استان",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
if (!isSuccessProvinceAjax) return false;
|
||
|
||
//init filter rahradi activity items
|
||
isSuccessRahdariActivityAjax = false;
|
||
$.ajax({
|
||
url: DEFAULT_URL + DEFAULT_API + "rahdari-activity",
|
||
method: "GET",
|
||
async: false,
|
||
success: function ({ data }) {
|
||
data.map((element) => {
|
||
$('select[name="rahradi-activity-items"]').append(
|
||
`<option value="${element.id}">${element.item_str}</option>`
|
||
);
|
||
});
|
||
currentFilterRahdariActivity = $(
|
||
'select[name="rahradi-activity-items"]'
|
||
).val();
|
||
isSuccessRahdariActivityAjax = true;
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات ریزآیتم های فعالیت جاری",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
if (!isSuccessRahdariActivityAjax) return false;
|
||
|
||
//init filter year
|
||
$('select[name="filter-year"]').val(DEFALUT_YEAR);
|
||
|
||
// init datapickers
|
||
dateFrom = $("input[name=filter-date-from]").persianDatepicker({
|
||
format: "YYYY/MM/DD",
|
||
initialValue: false,
|
||
autoClose: true,
|
||
initialValueType: "persian",
|
||
toolbox: {
|
||
calendarSwitch: {
|
||
enabled: false,
|
||
},
|
||
},
|
||
onSelect: function (unix) {
|
||
dateFrom.touched = true;
|
||
if (
|
||
dateFrom.getState().selected.unixDate >=
|
||
dateTo.getState().selected.unixDate
|
||
) {
|
||
dateTo.setDate(dateFrom.getState().selected.unixDate);
|
||
}
|
||
|
||
if (dateTo && dateTo.options && dateTo.options.minDate != unix) {
|
||
let cachedValue = dateTo.getState().selected.unixDate;
|
||
|
||
dateTo.options = {
|
||
minDate: unix,
|
||
};
|
||
|
||
if (dateTo.touched) {
|
||
dateTo.setDate(cachedValue);
|
||
}
|
||
}
|
||
hasChangeFilter();
|
||
},
|
||
});
|
||
|
||
dateTo = $("input[name=filter-date-to]").persianDatepicker({
|
||
format: "YYYY/MM/DD",
|
||
initialValue: false,
|
||
autoClose: true,
|
||
initialValueType: "persian",
|
||
toolbox: {
|
||
calendarSwitch: {
|
||
enabled: false,
|
||
},
|
||
},
|
||
onSelect: function (unix) {
|
||
hasChangeFilter();
|
||
},
|
||
});
|
||
|
||
Chart.defaults.font.family = "IRANSansFaNum";
|
||
Chart.register(ChartDataLabels);
|
||
MapBi = L.map("map", {
|
||
maxBounds: bounds,
|
||
minZoom: MAP_MIN_ZOOM,
|
||
zoomControl: false,
|
||
}).setView(showbounds, 5);
|
||
L.tileLayer(MAP_ENDPOINT + "/141map/{z}/{x}/{y}.png", {}).addTo(MapBi);
|
||
|
||
// custom zoom bar control that includes a Zoom Home function
|
||
L.Control.mapButtons = L.Control.extend({
|
||
options: {
|
||
position: "topright",
|
||
zoomInText: "+",
|
||
zoomInTitle: "بزرگنمایی",
|
||
zoomOutText: "-",
|
||
zoomOutTitle: "کوچکنمایی",
|
||
homeText: '<i class="fa fa-home" style="line-height:1.65;"></i>',
|
||
homeTitle: "پیشفرض",
|
||
backText: '<i class="fa fa-arrow-left" style="line-height:1.65;"></i>',
|
||
backTitle: "بازگشت",
|
||
cityText: '<i class="fa fa-sign" style="line-height:1.65;"></i>',
|
||
cityTitle: "شهرستان ها",
|
||
},
|
||
|
||
onAdd: function (map) {
|
||
var controlName = "gin-control-zoom",
|
||
container = L.DomUtil.create("div", controlName + " leaflet-bar"),
|
||
options = this.options;
|
||
|
||
this._zoomInButton = this._createButton(
|
||
options.zoomInText,
|
||
options.zoomInTitle,
|
||
controlName + "-in",
|
||
container,
|
||
this._zoomIn
|
||
);
|
||
this._zoomOutButton = this._createButton(
|
||
options.zoomOutText,
|
||
options.zoomOutTitle,
|
||
controlName + "-out",
|
||
container,
|
||
this._zoomOut
|
||
);
|
||
this._homeButton = this._createButton(
|
||
options.homeText,
|
||
options.homeTitle,
|
||
controlName + "-home",
|
||
container,
|
||
this._home
|
||
);
|
||
this._backButton = this._createButton(
|
||
options.backText,
|
||
options.backTitle,
|
||
controlName + "-back",
|
||
container,
|
||
this._back
|
||
);
|
||
this._cityButton = this._createButton(
|
||
options.cityText,
|
||
options.cityTitle,
|
||
controlName + "-city",
|
||
container,
|
||
this._city
|
||
);
|
||
|
||
this._updateDisabled();
|
||
map.on("zoomend zoomlevelschange", this._updateDisabled, this);
|
||
|
||
return container;
|
||
},
|
||
|
||
onRemove: function (map) {
|
||
map.off("zoomend zoomlevelschange", this._updateDisabled, this);
|
||
},
|
||
|
||
_zoomIn: function (e) {
|
||
this._map.zoomIn(e.shiftKey ? 3 : 1);
|
||
},
|
||
|
||
_zoomOut: function (e) {
|
||
this._map.zoomOut(e.shiftKey ? 3 : 1);
|
||
},
|
||
|
||
_home: function (e) {
|
||
returnToHomeOnMap();
|
||
},
|
||
|
||
_back: function (e) {
|
||
returnToProvinceOnMap();
|
||
},
|
||
|
||
_city: function (e) {
|
||
if (disabledButtonMap.city) return false;
|
||
|
||
allCityFlag = 1;
|
||
currentFilterProvince = 0;
|
||
|
||
lifeCycle({
|
||
sync: false,
|
||
});
|
||
},
|
||
|
||
_createButton: function (html, title, className, container, fn) {
|
||
var link = L.DomUtil.create("a", className, container);
|
||
link.innerHTML = html;
|
||
link.href = "#";
|
||
link.title = title;
|
||
|
||
L.DomEvent.on(link, "mousedown dblclick", L.DomEvent.stopPropagation)
|
||
.on(link, "click", L.DomEvent.stop)
|
||
.on(link, "click", fn, this)
|
||
.on(link, "click", this._refocusOnMap, this);
|
||
|
||
return link;
|
||
},
|
||
|
||
_updateDisabled: function () {
|
||
var map = this._map,
|
||
className = "leaflet-disabled";
|
||
|
||
L.DomUtil.removeClass(this._zoomInButton, className);
|
||
L.DomUtil.removeClass(this._zoomOutButton, className);
|
||
|
||
if (map._zoom === map.getMinZoom()) {
|
||
L.DomUtil.addClass(this._zoomOutButton, className);
|
||
}
|
||
if (map._zoom === map.getMaxZoom()) {
|
||
L.DomUtil.addClass(this._zoomInButton, className);
|
||
}
|
||
},
|
||
});
|
||
// add the new control to the map
|
||
var mapButtons = new L.Control.mapButtons();
|
||
mapButtons.addTo(MapBi);
|
||
|
||
defaultPage();
|
||
}
|
||
|
||
function defaultPage() {
|
||
//update current variables
|
||
currentActionId = DEFAULT_ACTION_ID;
|
||
currentRoadInfrastructureDetails = $(
|
||
'select[name="road-infrastructure-details"]'
|
||
).val();
|
||
|
||
//clear buttonActions
|
||
$(".btn-action-box").removeClass("active");
|
||
|
||
//update this button
|
||
$('.btn-action-box[data-action-id="' + currentActionId + '"]').addClass(
|
||
"active"
|
||
);
|
||
|
||
//check disabled filter
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('select[name="filter-province"]').data("disable")
|
||
) != -1
|
||
)
|
||
$('select[name="filter-province"]').val(0).attr("disabled", "disabled");
|
||
else $('select[name="filter-province"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('select[name="filter-city"]').data("disable")
|
||
) != -1
|
||
)
|
||
$('select[name="filter-city"]').val(0).attr("disabled", "disabled");
|
||
else $('select[name="filter-city"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('select[name="filter-year"]').data("disable")
|
||
) != -1
|
||
) {
|
||
$('select[name="filter-year"]').attr("disabled", "disabled");
|
||
$('.btn-action-box[data-reset-year="true"]').data(
|
||
"defaultYear",
|
||
DEFALUT_YEAR
|
||
);
|
||
} else $('select[name="filter-year"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('select[name="filter-month"]').data("disable")
|
||
) != -1
|
||
)
|
||
$('select[name="filter-month"]').val(0).attr("disabled", "disabled");
|
||
else $('select[name="filter-month"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('input[name="filter-date-from"]').data("disable")
|
||
) != -1
|
||
)
|
||
$('input[name="filter-date-from"]').val("").attr("disabled", "disabled");
|
||
else $('input[name="filter-date-from"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('input[name="filter-date-to"]').data("disable")
|
||
) != -1
|
||
)
|
||
$('input[name="filter-date-to"]').val("").attr("disabled", "disabled");
|
||
else $('input[name="filter-date-to"]').removeAttr("disabled");
|
||
|
||
//update current filter variables
|
||
currentFilterProvince = $('select[name="filter-province"]').val();
|
||
currentFilterCity = $('select[name="filter-city"]').val();
|
||
currentFilterYear = $('select[name="filter-year"]').val();
|
||
currentFilterMonth = $('select[name="filter-month"]').val();
|
||
currentFilterFromDate = $('input[name="filter-date-from"]').val();
|
||
currentFilterToDate = $('input[name="filter-date-to"]').val();
|
||
currentFilterRoadInfrastructure = $(
|
||
'select[name="road-infrastructure-details"]'
|
||
).val();
|
||
|
||
//create map
|
||
|
||
//create chart daily status
|
||
$("#StatusChart").attr(
|
||
"width",
|
||
$("#StatusChart").closest(".canvas-box").width()
|
||
);
|
||
$("#StatusChart").attr("height", 1200);
|
||
var StatusContent = document.getElementById("StatusChart").getContext("2d");
|
||
StatusChart = new Chart(StatusContent, {
|
||
type: "bar",
|
||
data: {
|
||
labels: [],
|
||
datasets: [
|
||
{
|
||
data: [],
|
||
backgroundColor: [],
|
||
label: "",
|
||
datalabels: {
|
||
anchor: "end",
|
||
align: "end",
|
||
},
|
||
},
|
||
],
|
||
},
|
||
options: {
|
||
indexAxis: "y",
|
||
plugins: {
|
||
legend: {
|
||
display: false,
|
||
},
|
||
datalabels: {
|
||
anchor: "start",
|
||
align: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return "center";
|
||
}
|
||
return "end";
|
||
},
|
||
color: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return "#000";
|
||
}
|
||
return "#fff";
|
||
},
|
||
backgroundColor: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return null;
|
||
}
|
||
return context.dataset.backgroundColor[context.dataIndex];
|
||
},
|
||
textAlign: "center",
|
||
},
|
||
},
|
||
scales: {
|
||
y: {
|
||
ticks: {
|
||
font: {
|
||
size: 11,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
},
|
||
});
|
||
|
||
$("#StatusChartPrint").attr("width", 1000);
|
||
$("#StatusChartPrint").attr("height", 700);
|
||
var StatusPrintContent = document
|
||
.getElementById("StatusChartPrint")
|
||
.getContext("2d");
|
||
StatusChartPrint = new Chart(StatusPrintContent, {
|
||
type: "bar",
|
||
data: {
|
||
labels: [],
|
||
datasets: [
|
||
{
|
||
data: [],
|
||
backgroundColor: [],
|
||
label: "",
|
||
datalabels: {
|
||
anchor: "end",
|
||
align: "end",
|
||
},
|
||
},
|
||
],
|
||
},
|
||
options: {
|
||
layout: {
|
||
padding: {
|
||
left: 10,
|
||
right: 10,
|
||
top: 5,
|
||
bottom: 10,
|
||
},
|
||
},
|
||
indexAxis: "x",
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
padding: 15,
|
||
position: "top",
|
||
align: "center",
|
||
font: {
|
||
size: 20,
|
||
weight: "bold",
|
||
},
|
||
},
|
||
subtitle: {
|
||
display: true,
|
||
padding: 15,
|
||
position: "top",
|
||
align: "center",
|
||
font: {
|
||
size: 24,
|
||
weight: "bold",
|
||
},
|
||
},
|
||
legend: {
|
||
display: false,
|
||
},
|
||
datalabels: {
|
||
rotation: -90,
|
||
font: {
|
||
size: 18,
|
||
},
|
||
anchor: "start",
|
||
align: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return "center";
|
||
}
|
||
return "end";
|
||
},
|
||
color: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return "#000";
|
||
}
|
||
return "#fff";
|
||
},
|
||
backgroundColor: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return null;
|
||
}
|
||
return context.dataset.backgroundColor[context.dataIndex];
|
||
},
|
||
textAlign: "center",
|
||
},
|
||
},
|
||
scales: {
|
||
x: {
|
||
ticks: {
|
||
font: {
|
||
size: 20,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
},
|
||
});
|
||
|
||
//clear charts box
|
||
$(".charts-box").attr("aria-display", "hide");
|
||
|
||
//show current charts box
|
||
$('.charts-box[data-action-id="' + currentActionId + '"]').attr(
|
||
"aria-display",
|
||
"show"
|
||
);
|
||
|
||
$('.charts-box[data-action-id="' + currentActionId + '"] .chart-box').each(
|
||
function () {
|
||
var chartType = $(this).find(".canvas-container").data("chartType");
|
||
var actionId = $(this).find(".canvas-container").attr("id");
|
||
var datasetCount = $(this)
|
||
.find(".canvas-container")
|
||
.data("chartDatasetCount");
|
||
var chartLegend = $(this).find(".canvas-container").data("chartLegend");
|
||
// create charts
|
||
if (charts[String(actionId)] == null && chartType == "bar") {
|
||
$("#" + actionId).attr(
|
||
"width",
|
||
$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.width()
|
||
);
|
||
$("#" + actionId).attr(
|
||
"height",
|
||
$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.height()
|
||
);
|
||
|
||
var datasets = [];
|
||
for (let i = 0; i < datasetCount; i++) {
|
||
datasets[i] = {
|
||
data: [],
|
||
backgroundColor: [],
|
||
label: "",
|
||
};
|
||
}
|
||
|
||
var defaultData = {
|
||
labels: [],
|
||
datasets: datasets,
|
||
};
|
||
|
||
//for print
|
||
var contentPrint = document
|
||
.getElementById(actionId + "Print")
|
||
.getContext("2d");
|
||
charts[String(actionId) + "Print"] = new Chart(contentPrint, {
|
||
type: chartType,
|
||
data: defaultData,
|
||
options: {
|
||
layout: {
|
||
padding: {
|
||
left: 10,
|
||
right: 10,
|
||
top: 5,
|
||
bottom: 10,
|
||
},
|
||
},
|
||
scales: {
|
||
x: {
|
||
ticks: {
|
||
font: {
|
||
size: 20,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
padding: 15,
|
||
position: "top",
|
||
align: "center",
|
||
font: {
|
||
size: 20,
|
||
weight: "bold",
|
||
},
|
||
},
|
||
subtitle: {
|
||
display: true,
|
||
padding: 15,
|
||
position: "top",
|
||
align: "center",
|
||
font: {
|
||
size: 24,
|
||
weight: "bold",
|
||
},
|
||
},
|
||
legend: {
|
||
display: chartLegend,
|
||
labels: {
|
||
font: {
|
||
size: 16,
|
||
},
|
||
},
|
||
},
|
||
datalabels: {
|
||
font: {
|
||
size: 18,
|
||
},
|
||
anchor: "start",
|
||
align: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return "center";
|
||
}
|
||
return "end";
|
||
},
|
||
color: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return "#000";
|
||
}
|
||
return "#fff";
|
||
},
|
||
backgroundColor: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return null;
|
||
}
|
||
if (typeof context.dataset.backgroundColor == "string") {
|
||
return context.dataset.backgroundColor;
|
||
}
|
||
return context.dataset.backgroundColor[context.dataIndex];
|
||
},
|
||
textAlign: "center",
|
||
},
|
||
},
|
||
},
|
||
});
|
||
|
||
var content = document.getElementById(actionId).getContext("2d");
|
||
charts[String(actionId)] = new Chart(content, {
|
||
type: chartType,
|
||
data: defaultData,
|
||
options: {
|
||
layout: {
|
||
padding: {
|
||
left: 10,
|
||
right: 10,
|
||
top: 5,
|
||
bottom: 10,
|
||
},
|
||
},
|
||
scales: {
|
||
x: {
|
||
ticks: {
|
||
font: {
|
||
size: 11,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
plugins: {
|
||
legend: {
|
||
display: chartLegend,
|
||
},
|
||
datalabels: {
|
||
anchor: "start",
|
||
align: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return "center";
|
||
}
|
||
return "end";
|
||
},
|
||
color: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return "#000";
|
||
}
|
||
return "#fff";
|
||
},
|
||
backgroundColor: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return null;
|
||
}
|
||
if (typeof context.dataset.backgroundColor == "string") {
|
||
return context.dataset.backgroundColor;
|
||
}
|
||
return context.dataset.backgroundColor[context.dataIndex];
|
||
},
|
||
textAlign: "center",
|
||
},
|
||
},
|
||
},
|
||
});
|
||
} else if (charts[String(actionId)] == null && chartType == "doughnut") {
|
||
var ratio =
|
||
+$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.width() /
|
||
$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.height();
|
||
|
||
var content = document.getElementById(actionId).getContext("2d");
|
||
charts[String(actionId)] = new Chart(content, {
|
||
type: chartType,
|
||
data: {},
|
||
options: {
|
||
aspectRatio: ratio,
|
||
layout: {
|
||
padding: {
|
||
left: 10,
|
||
right: 10,
|
||
top: 10,
|
||
bottom: 10,
|
||
},
|
||
},
|
||
plugins: {
|
||
legend: {
|
||
display: true,
|
||
position: "left",
|
||
labels: {
|
||
font: {
|
||
size: 11,
|
||
},
|
||
},
|
||
},
|
||
datalabels: {
|
||
color: "#fff",
|
||
textAlign: "center",
|
||
},
|
||
},
|
||
},
|
||
});
|
||
|
||
//for print
|
||
|
||
var ratio =
|
||
+$("#" + actionId + "Print")
|
||
.closest(".canvas-box")
|
||
.width() /
|
||
$("#" + actionId + "Print")
|
||
.closest(".canvas-box")
|
||
.height();
|
||
var contentPrint = document
|
||
.getElementById(actionId + "Print")
|
||
.getContext("2d");
|
||
charts[String(actionId) + "Print"] = new Chart(contentPrint, {
|
||
type: chartType,
|
||
data: {},
|
||
options: {
|
||
aspectRatio: ratio,
|
||
layout: {
|
||
padding: {
|
||
left: 10,
|
||
right: 10,
|
||
top: 5,
|
||
bottom: 10,
|
||
},
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
padding: 15,
|
||
position: "top",
|
||
align: "center",
|
||
font: {
|
||
size: 20,
|
||
weight: "bold",
|
||
},
|
||
},
|
||
subtitle: {
|
||
display: true,
|
||
padding: 15,
|
||
position: "top",
|
||
align: "center",
|
||
font: {
|
||
size: 24,
|
||
weight: "bold",
|
||
},
|
||
},
|
||
legend: {
|
||
display: true,
|
||
position: "bottom",
|
||
labels: {
|
||
padding: 15,
|
||
font: {
|
||
size: 16,
|
||
},
|
||
},
|
||
},
|
||
datalabels: {
|
||
font: {
|
||
size: 18,
|
||
},
|
||
color: "#fff",
|
||
textAlign: "center",
|
||
},
|
||
},
|
||
},
|
||
});
|
||
} else if (
|
||
charts[String(actionId)] == null &&
|
||
chartType == "progressBar"
|
||
) {
|
||
$("#" + actionId).css(
|
||
"width",
|
||
$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.width() + "px"
|
||
);
|
||
$("#" + actionId).css(
|
||
"height",
|
||
$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.height() + "px"
|
||
);
|
||
var content = document.getElementById(actionId);
|
||
charts[String(actionId)] = new ProgressBar.SemiCircle(content, {
|
||
color: "#343a40",
|
||
strokeWidth: 12,
|
||
trailWidth: 12,
|
||
svgStyle: {
|
||
display: "block",
|
||
width:
|
||
$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.width() + "px",
|
||
height:
|
||
$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.height() + "px",
|
||
},
|
||
text: {
|
||
value: "",
|
||
},
|
||
from: {
|
||
color: "#ED1C24",
|
||
},
|
||
to: {
|
||
color: "#39B54A",
|
||
},
|
||
step: function (state, circle, attachment) {
|
||
circle.path.setAttribute("stroke", state.color);
|
||
},
|
||
});
|
||
|
||
charts[String(actionId)].text.style.fontFamily = "IRANSansFaNum";
|
||
charts[String(actionId)].text.style.fontSize = "30px";
|
||
}
|
||
}
|
||
);
|
||
|
||
//call lifeCycle
|
||
lifeCycle({
|
||
sync: false,
|
||
});
|
||
}
|
||
|
||
$(document).on("click", ".btn-action-box", function () {
|
||
//clear buttonActions
|
||
$(".btn-action-box").removeClass("active");
|
||
|
||
//update this button
|
||
$(this).addClass("active");
|
||
|
||
//update previous variables
|
||
var previousActionId = currentActionId;
|
||
|
||
//update current variables
|
||
currentActionId = $(this).data("actionId");
|
||
|
||
//check disabled map button
|
||
if (currentActionId == DANGER_POINTS_ID) {
|
||
$(".gin-control-zoom-city").addClass("leaflet-disabled");
|
||
disabledButtonMap.city = true;
|
||
allCityFlag = 0;
|
||
} else {
|
||
$(".gin-control-zoom-city").removeClass("leaflet-disabled");
|
||
disabledButtonMap.city = false;
|
||
}
|
||
|
||
//check disabled filter
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('select[name="filter-province"]').data("disable")
|
||
) != -1
|
||
) {
|
||
$('select[name="filter-province"]').val(0).attr("disabled", "disabled");
|
||
currentFilterProvince = $('select[name="filter-province"]').val();
|
||
} else $('select[name="filter-province"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('select[name="filter-city"]').data("disable")
|
||
) != -1
|
||
) {
|
||
$('select[name="filter-city"]').val(0).attr("disabled", "disabled");
|
||
currentFilterCity = $('select[name="filter-city"]').val();
|
||
} else $('select[name="filter-city"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('select[name="filter-year"]').data("disable")
|
||
) != -1
|
||
) {
|
||
$('select[name="filter-year"]').attr("disabled", "disabled");
|
||
$('.btn-action-box[data-reset-year="true"]').data(
|
||
"defaultYear",
|
||
DEFALUT_YEAR
|
||
);
|
||
} else $('select[name="filter-year"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('select[name="filter-month"]').data("disable")
|
||
) != -1
|
||
) {
|
||
$('select[name="filter-month"]').val(0).attr("disabled", "disabled");
|
||
currentFilterMonth = $('select[name="filter-month"]').val();
|
||
} else $('select[name="filter-month"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('input[name="filter-date-from"]').data("disable")
|
||
) != -1
|
||
) {
|
||
$('input[name="filter-date-from"]').val("").attr("disabled", "disabled");
|
||
currentFilterFromDate = $('input[name="filter-date-from"]').val();
|
||
} else $('input[name="filter-date-from"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('input[name="filter-date-to"]').data("disable")
|
||
) != -1
|
||
) {
|
||
$('input[name="filter-date-to"]').val("").attr("disabled", "disabled");
|
||
currentFilterToDate = $('input[name="filter-date-to"]').val();
|
||
} else $('input[name="filter-date-to"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$('.btn-action-box[data-action-id="' + previousActionId + '"]').data(
|
||
"resetYear"
|
||
) == false ||
|
||
$('.btn-action-box[data-action-id="' + currentActionId + '"]').data(
|
||
"resetYear"
|
||
) == false
|
||
) {
|
||
$('select[name="filter-year"]').val(
|
||
$('.btn-action-box[data-action-id="' + currentActionId + '"]').data(
|
||
"defaultYear"
|
||
)
|
||
);
|
||
currentFilterYear = $('select[name="filter-year"]').val();
|
||
}
|
||
|
||
//clear charts box
|
||
$(".charts-box").attr("aria-display", "hide");
|
||
|
||
//show current charts box
|
||
$('.charts-box[data-action-id="' + currentActionId + '"]').attr(
|
||
"aria-display",
|
||
"show"
|
||
);
|
||
|
||
// create charts
|
||
$('.charts-box[data-action-id="' + currentActionId + '"] .chart-box').each(
|
||
function () {
|
||
var chartType = $(this).find(".canvas-container").data("chartType");
|
||
var actionId = $(this).find(".canvas-container").attr("id");
|
||
var datasetCount = $(this)
|
||
.find(".canvas-container")
|
||
.data("chartDatasetCount");
|
||
var chartLegend = $(this).find(".canvas-container").data("chartLegend");
|
||
// create charts
|
||
if (charts[String(actionId)] == null && chartType == "bar") {
|
||
$("#" + actionId).attr(
|
||
"width",
|
||
$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.width()
|
||
);
|
||
$("#" + actionId).attr(
|
||
"height",
|
||
$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.height()
|
||
);
|
||
|
||
var datasets = [];
|
||
for (let i = 0; i < datasetCount; i++) {
|
||
datasets[i] = {
|
||
data: [],
|
||
backgroundColor: [],
|
||
label: "",
|
||
};
|
||
}
|
||
|
||
var defaultData = {
|
||
labels: [],
|
||
datasets: datasets,
|
||
};
|
||
|
||
//for print
|
||
|
||
var contentPrint = document
|
||
.getElementById(actionId + "Print")
|
||
.getContext("2d");
|
||
charts[String(actionId) + "Print"] = new Chart(contentPrint, {
|
||
type: chartType,
|
||
data: defaultData,
|
||
options: {
|
||
layout: {
|
||
padding: {
|
||
left: 10,
|
||
right: 10,
|
||
top: 5,
|
||
bottom: 10,
|
||
},
|
||
},
|
||
scales: {
|
||
x: {
|
||
ticks: {
|
||
font: {
|
||
size: 20,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
padding: 15,
|
||
position: "top",
|
||
align: "center",
|
||
font: {
|
||
size: 20,
|
||
weight: "bold",
|
||
},
|
||
},
|
||
subtitle: {
|
||
display: true,
|
||
padding: 15,
|
||
position: "top",
|
||
align: "center",
|
||
font: {
|
||
size: 24,
|
||
weight: "bold",
|
||
},
|
||
},
|
||
legend: {
|
||
display: chartLegend,
|
||
labels: {
|
||
font: {
|
||
size: 16,
|
||
},
|
||
},
|
||
},
|
||
datalabels: {
|
||
font: {
|
||
size: 18,
|
||
},
|
||
anchor: "start",
|
||
align: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return "center";
|
||
}
|
||
return "end";
|
||
},
|
||
color: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return "#000";
|
||
}
|
||
return "#fff";
|
||
},
|
||
backgroundColor: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return null;
|
||
}
|
||
if (typeof context.dataset.backgroundColor == "string") {
|
||
return context.dataset.backgroundColor;
|
||
}
|
||
return context.dataset.backgroundColor[context.dataIndex];
|
||
},
|
||
textAlign: "center",
|
||
},
|
||
},
|
||
},
|
||
});
|
||
|
||
var content = document.getElementById(actionId).getContext("2d");
|
||
charts[String(actionId)] = new Chart(content, {
|
||
type: chartType,
|
||
data: defaultData,
|
||
options: {
|
||
layout: {
|
||
padding: {
|
||
left: 10,
|
||
right: 10,
|
||
top: 5,
|
||
bottom: 10,
|
||
},
|
||
},
|
||
scales: {
|
||
x: {
|
||
ticks: {
|
||
font: {
|
||
size: 11,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
plugins: {
|
||
legend: {
|
||
display: chartLegend,
|
||
},
|
||
datalabels: {
|
||
anchor: "start",
|
||
align: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return "center";
|
||
}
|
||
return "end";
|
||
},
|
||
color: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return "#000";
|
||
}
|
||
return "#fff";
|
||
},
|
||
backgroundColor: function (context) {
|
||
if (context.dataset.data[context.dataIndex] == 0) {
|
||
return null;
|
||
}
|
||
if (typeof context.dataset.backgroundColor == "string") {
|
||
return context.dataset.backgroundColor;
|
||
}
|
||
return context.dataset.backgroundColor[context.dataIndex];
|
||
},
|
||
textAlign: "center",
|
||
},
|
||
},
|
||
},
|
||
});
|
||
} else if (charts[String(actionId)] == null && chartType == "doughnut") {
|
||
var ratio =
|
||
+$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.width() /
|
||
$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.height();
|
||
|
||
var content = document.getElementById(actionId).getContext("2d");
|
||
charts[String(actionId)] = new Chart(content, {
|
||
type: chartType,
|
||
data: {},
|
||
options: {
|
||
aspectRatio: ratio,
|
||
layout: {
|
||
padding: {
|
||
left: 10,
|
||
right: 10,
|
||
top: 10,
|
||
bottom: 10,
|
||
},
|
||
},
|
||
plugins: {
|
||
legend: {
|
||
display: true,
|
||
position: "left",
|
||
labels: {
|
||
font: {
|
||
size: 11,
|
||
},
|
||
},
|
||
},
|
||
datalabels: {
|
||
color: "#fff",
|
||
textAlign: "center",
|
||
},
|
||
},
|
||
},
|
||
});
|
||
|
||
//for print
|
||
|
||
var ratio =
|
||
+$("#" + actionId + "Print")
|
||
.closest(".canvas-box")
|
||
.width() /
|
||
$("#" + actionId + "Print")
|
||
.closest(".canvas-box")
|
||
.height();
|
||
|
||
var contentPrint = document
|
||
.getElementById(actionId + "Print")
|
||
.getContext("2d");
|
||
charts[String(actionId) + "Print"] = new Chart(contentPrint, {
|
||
type: chartType,
|
||
data: {},
|
||
options: {
|
||
aspectRatio: ratio,
|
||
layout: {
|
||
padding: {
|
||
left: 10,
|
||
right: 10,
|
||
top: 5,
|
||
bottom: 10,
|
||
},
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
padding: 15,
|
||
position: "top",
|
||
align: "center",
|
||
font: {
|
||
size: 20,
|
||
weight: "bold",
|
||
},
|
||
},
|
||
subtitle: {
|
||
display: true,
|
||
padding: 15,
|
||
position: "top",
|
||
align: "center",
|
||
font: {
|
||
size: 24,
|
||
weight: "bold",
|
||
},
|
||
},
|
||
legend: {
|
||
display: true,
|
||
position: "bottom",
|
||
labels: {
|
||
padding: 15,
|
||
font: {
|
||
size: 16,
|
||
},
|
||
},
|
||
},
|
||
datalabels: {
|
||
font: {
|
||
size: 18,
|
||
},
|
||
color: "#fff",
|
||
textAlign: "center",
|
||
},
|
||
},
|
||
},
|
||
});
|
||
} else if (
|
||
charts[String(actionId)] == null &&
|
||
chartType == "progressBar"
|
||
) {
|
||
$("#" + actionId).css(
|
||
"width",
|
||
$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.width() + "px"
|
||
);
|
||
$("#" + actionId).css(
|
||
"height",
|
||
$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.height() + "px"
|
||
);
|
||
var content = document.getElementById(actionId);
|
||
charts[String(actionId)] = new ProgressBar.SemiCircle(content, {
|
||
color: "#343a40",
|
||
strokeWidth: 12,
|
||
trailWidth: 12,
|
||
svgStyle: {
|
||
display: "block",
|
||
width:
|
||
$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.width() + "px",
|
||
height:
|
||
$("#" + actionId)
|
||
.closest(".canvas-box")
|
||
.height() + "px",
|
||
},
|
||
text: {
|
||
value: "",
|
||
},
|
||
from: {
|
||
color: "#ED1C24",
|
||
},
|
||
to: {
|
||
color: "#39B54A",
|
||
},
|
||
step: function (state, circle, attachment) {
|
||
circle.path.setAttribute("stroke", state.color);
|
||
},
|
||
});
|
||
|
||
charts[String(actionId)].text.style.fontFamily = "IRANSansFaNum";
|
||
charts[String(actionId)].text.style.fontSize = "30px";
|
||
}
|
||
}
|
||
);
|
||
|
||
//call lifeCycle
|
||
lifeCycle({
|
||
sync: false,
|
||
});
|
||
});
|
||
|
||
$(document).on("click", ".btn-sync-data", function () {
|
||
//update current filter variables
|
||
currentFilterProvince = $('select[name="filter-province"]').val();
|
||
currentFilterCity = $('select[name="filter-city"]').val();
|
||
currentFilterYear = $('select[name="filter-year"]').val();
|
||
currentFilterMonth = $('select[name="filter-month"]').val();
|
||
currentFilterFromDate = $('input[name="filter-date-from"]').val();
|
||
currentFilterToDate = $('input[name="filter-date-to"]').val();
|
||
|
||
allCityFlag = 0;
|
||
|
||
//call lifeCycle
|
||
lifeCycle({
|
||
sync: false,
|
||
});
|
||
});
|
||
|
||
$(document).on("click", ".btn-filter-reset", function () {
|
||
allCityFlag = 0;
|
||
//clear filters
|
||
$('select[name="filter-province"]').val(0);
|
||
$('select[name="filter-city"]').empty();
|
||
$('select[name="filter-city"]').append(
|
||
`<option value="0">انتخاب شهرستان</option>`
|
||
);
|
||
$('select[name="filter-city"]').val(0);
|
||
$('select[name="filter-year"]').val(
|
||
$('.btn-action-box[data-action-id="' + currentActionId + '"]').data(
|
||
"resetYear"
|
||
)
|
||
? DEFALUT_YEAR
|
||
: $('.btn-action-box[data-action-id="' + currentActionId + '"]').data(
|
||
"defaultYear"
|
||
)
|
||
);
|
||
$('select[name="filter-month"]').val(0);
|
||
$('input[name="filter-date-from"]').val("");
|
||
$('input[name="filter-date-to"]').val("");
|
||
|
||
//update current filter variables
|
||
currentFilterProvince = $('select[name="filter-province"]').val();
|
||
currentFilterCity = $('select[name="filter-city"]').val();
|
||
currentFilterYear = $('select[name="filter-year"]').val();
|
||
currentFilterMonth = $('select[name="filter-month"]').val();
|
||
currentFilterFromDate = $('input[name="filter-date-from"]').val();
|
||
currentFilterToDate = $('input[name="filter-date-to"]').val();
|
||
|
||
$('.btn-action-box[data-reset-year="true"]').data(
|
||
"defaultYear",
|
||
DEFALUT_YEAR
|
||
);
|
||
|
||
//call lifeCycle
|
||
lifeCycle({
|
||
sync: false,
|
||
});
|
||
|
||
hasChangeFilter();
|
||
});
|
||
|
||
$(document).on("click", ".btn-filter-send", function () {
|
||
if (
|
||
($('input[name="filter-date-from"]').val() != "") ^
|
||
($('input[name="filter-date-to"]').val() != "")
|
||
) {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا",
|
||
text: "لطفا تاریخ شروع و پایان را وارد کنید",
|
||
showCancelButton: true,
|
||
showConfirmButton: false,
|
||
cancelButtonText: "بستن",
|
||
});
|
||
return false;
|
||
}
|
||
|
||
//update current filter variables
|
||
currentFilterProvince = $('select[name="filter-province"]').val();
|
||
currentFilterCity = $('select[name="filter-city"]').val();
|
||
currentFilterYear = $('select[name="filter-year"]').val();
|
||
currentFilterMonth = $('select[name="filter-month"]').val();
|
||
currentFilterFromDate = $('input[name="filter-date-from"]').val();
|
||
currentFilterToDate = $('input[name="filter-date-to"]').val();
|
||
if (currentFilterProvince != 0) {
|
||
allCityFlag = 0;
|
||
}
|
||
//call lifeCycle
|
||
lifeCycle({
|
||
sync: false,
|
||
});
|
||
|
||
hasChangeFilter();
|
||
});
|
||
|
||
$(document).on("change", 'select[name="filter-year"]', function () {
|
||
$('.btn-action-box[data-reset-year="true"]').data(
|
||
"defaultYear",
|
||
$(this).val()
|
||
);
|
||
});
|
||
|
||
$(document).on(
|
||
"change",
|
||
'select[name="rahradi-activity-items"]',
|
||
async function () {
|
||
currentFilterRahdariActivity = $(this).val();
|
||
await showLoader(false);
|
||
$.when(roadItemProjectItemSync(false)).then(() => {
|
||
hideLoader(false);
|
||
updateChartsData(loadChart);
|
||
});
|
||
}
|
||
);
|
||
|
||
$(document).on(
|
||
"change",
|
||
'select[name="road-infrastructure-details"]',
|
||
async function () {
|
||
currentFilterRoadInfrastructure = $(this).val();
|
||
await showLoader(false);
|
||
$.when(roadInfrastructureSync(false)).then(() => {
|
||
hideLoader(false);
|
||
});
|
||
}
|
||
);
|
||
|
||
$(document).on("click", ".chart-print", async function () {
|
||
let chart = null;
|
||
let chartId = $(this).parents(".chart-box").find("canvas").attr("id");
|
||
let title = $(this).parents(".chart-box").find(".title-print").text();
|
||
if (chartId == "StatusChart") {
|
||
chart = StatusChartPrint;
|
||
} else {
|
||
chart = charts[String(chartId) + "Print"];
|
||
}
|
||
await updateBeforePrint(chart, title);
|
||
let link = document.createElement("a");
|
||
link.href = chart.toBase64Image();
|
||
link.download = title;
|
||
link.click();
|
||
chart.options.animation.duration = 1000;
|
||
chart.update();
|
||
});
|
||
|
||
$(document).on("change", 'select[name="filter-province"]', function () {
|
||
getCitiesByProvince($(this).val());
|
||
});
|
||
|
||
$(document).on("change", "select.filter-control", function () {
|
||
hasChangeFilter();
|
||
});
|
||
|
||
$(document).on("input", "input.filter-control", function () {
|
||
hasChangeFilter();
|
||
});
|
||
|
||
async function updateBeforePrint(chart, title) {
|
||
chart.options.plugins.title.text =
|
||
"گزارش سامانه جامع راهداری ( مورخ : " +
|
||
moment().format("HH:mm jYYYY/jMM/jDD") +
|
||
" )";
|
||
chart.options.plugins.subtitle.text = title;
|
||
chart.options.animation.duration = 0;
|
||
chart.update();
|
||
return new Promise((resolve) => setTimeout(resolve, 100));
|
||
}
|
||
|
||
function hasChangeFilter() {
|
||
let hasChange = false;
|
||
|
||
if (currentFilterProvince != $('select[name="filter-province"]').val())
|
||
hasChange = true;
|
||
else if (currentFilterCity != $('select[name="filter-city"]').val())
|
||
hasChange = true;
|
||
else if (currentFilterYear != $('select[name="filter-year"]').val())
|
||
hasChange = true;
|
||
else if (currentFilterMonth != $('select[name="filter-month"]').val())
|
||
hasChange = true;
|
||
else if (currentFilterFromDate != $('input[name="filter-date-from"]').val())
|
||
hasChange = true;
|
||
else if (currentFilterToDate != $('input[name="filter-date-to"]').val())
|
||
hasChange = true;
|
||
|
||
if (hasChange) {
|
||
$(".btn-filter-send").prop("disabled", false);
|
||
$(".btn-filter-send .btn-filter-send-chenge").attr("aria-display", "show");
|
||
$(".btn-filter-send .btn-filter-send-ok").attr("aria-display", "hide");
|
||
} else {
|
||
$(".btn-filter-send").prop("disabled", true);
|
||
$(".btn-filter-send .btn-filter-send-chenge").attr("aria-display", "hide");
|
||
$(".btn-filter-send .btn-filter-send-ok").attr("aria-display", "show");
|
||
}
|
||
}
|
||
|
||
function subHexColor(c1, c2) {
|
||
var hexStr = (parseInt(c1, 16) - parseInt(c2, 16)).toString(16);
|
||
while (hexStr.length < 6) {
|
||
hexStr = "0" + hexStr;
|
||
}
|
||
return hexStr;
|
||
}
|
||
|
||
function getCitiesByProvince(provinceId) {
|
||
//amir
|
||
$('select[name="filter-city"]').empty();
|
||
$('select[name="filter-city"]').append(
|
||
`<option value="0">انتخاب شهرستان</option>`
|
||
);
|
||
if (provinceId == 0) return false;
|
||
|
||
$.ajax({
|
||
url: DEFAULT_URL + "public/contents/provinces/" + provinceId,
|
||
method: "GET",
|
||
async: true,
|
||
beforeSend: function () {
|
||
$('select[name="filter-city"]').empty();
|
||
$('select[name="filter-city"]').append(
|
||
`<option value="0">درحال دریافت شهرستان ها</option>`
|
||
);
|
||
},
|
||
success: function ({ data }) {
|
||
$('select[name="filter-city"]').empty();
|
||
$('select[name="filter-city"]').append(
|
||
`<option value="0">انتخاب شهرستان</option>`
|
||
);
|
||
cities = data;
|
||
data.map((element) => {
|
||
$('select[name="filter-city"]').append(
|
||
`<option value="${element.id}">${element.name_fa}</option>`
|
||
);
|
||
});
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات شهرستان",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
|
||
function createQuarterColors(data) {
|
||
var colors = [];
|
||
if (currentActionId == RAHDARI_PROJECTS_ID) {
|
||
for (let i = 0; i < data.length; i++) {
|
||
if (data[i] == 0) colors[i] = "#000";
|
||
else {
|
||
if (data[i] <= 40) colors[i] = "#FF0000";
|
||
else if (data[i] < 70) colors[i] = "#FFCC00";
|
||
else colors[i] = "#13BB51";
|
||
}
|
||
}
|
||
} else {
|
||
var minOfData = Math.min(...data);
|
||
var maxOfData = Math.max(...data);
|
||
var quarter = Math.round((maxOfData - minOfData) / 3);
|
||
for (let i = 0; i < data.length; i++) {
|
||
if (data[i] == 0) colors[i] = "#000";
|
||
else {
|
||
if (data[i] <= minOfData + quarter) colors[i] = "#FF0000";
|
||
else if (data[i] < maxOfData - quarter) colors[i] = "#FFCC00";
|
||
else colors[i] = "#13BB51";
|
||
}
|
||
}
|
||
}
|
||
return colors;
|
||
}
|
||
|
||
function createColors(count) {
|
||
var point = 280 / (count - 1);
|
||
var step = 0;
|
||
var colors = [];
|
||
for (let i = 0; i < count; i++) {
|
||
var hsv = {
|
||
h: Math.floor(step),
|
||
s: 90,
|
||
v: 71,
|
||
};
|
||
colors[i] = Color(hsv).toCSS();
|
||
step += point;
|
||
}
|
||
return colors;
|
||
}
|
||
|
||
function createOneColor(array, colors) {
|
||
var finalColors = new Array(array.length);
|
||
for (let i = 0; i < array.length; i++) {
|
||
finalColors[i] = new Array(array[i].data.length);
|
||
for (let j = 0; j < array[i].data.length; j++) {
|
||
finalColors[i][j] = colors[i];
|
||
}
|
||
}
|
||
return colors;
|
||
}
|
||
|
||
async function showLoader(sync) {
|
||
if (sync) $(".sync-text").attr("aria-display", "show");
|
||
else $(".bi-loader").attr("aria-display", "show");
|
||
|
||
return new Promise((resolve) => setTimeout(resolve, 100));
|
||
}
|
||
|
||
function hideLoader(sync) {
|
||
if (sync) $(".sync-text").attr("aria-display", "hide");
|
||
else $(".bi-loader").attr("aria-display", "hide");
|
||
}
|
||
|
||
function updateSyncDate() {
|
||
$(".date-chenged").text(moment().format("HH:mm:ss jYYYY/jMM/jDD"));
|
||
}
|
||
|
||
function updateLabelBoxes() {
|
||
let staticLabel = [];
|
||
let statusChart = [];
|
||
let map = [];
|
||
let charts = [];
|
||
|
||
const province = $(
|
||
'select[name="filter-province"] option[value="' +
|
||
currentFilterProvince +
|
||
'"]'
|
||
).text();
|
||
const city = $(
|
||
'select[name="filter-city"] option[value="' + currentFilterCity + '"]'
|
||
).text();
|
||
|
||
statusChart.push(
|
||
$('.btn-action-box[data-action-id="' + currentActionId + '"]').attr(
|
||
"aria-label-status-chart"
|
||
)
|
||
);
|
||
statusChart.push(province);
|
||
|
||
map.push(
|
||
$('.btn-action-box[data-action-id="' + currentActionId + '"]').attr(
|
||
"aria-label-map"
|
||
)
|
||
);
|
||
map.push(province);
|
||
map.push(currentFilterCity != 0 ? ` - ${city}` : "");
|
||
|
||
charts.push(province);
|
||
charts.push(currentFilterCity != 0 ? ` - ${city}` : "");
|
||
|
||
staticLabel.push("از");
|
||
staticLabel.push(currentDate.from.format("jYYYY/jMM/jDD"));
|
||
staticLabel.push("تا");
|
||
staticLabel.push(currentDate.to.format("jYYYY/jMM/jDD"));
|
||
|
||
$(".status-chart-title").text(
|
||
`${statusChart.join(" ")} ( ${staticLabel.join(" ")} )`
|
||
);
|
||
$(".map-title").text(`${map.join(" ")} ( ${staticLabel.join(" ")} )`);
|
||
|
||
$(".text-current-chart-filter").text(
|
||
` ${charts.join(" ")} ( ${staticLabel.join(" ")} )`
|
||
);
|
||
}
|
||
|
||
function updateChartsData(charts) {
|
||
for (let i = 0; i < charts.length; i++) {
|
||
const { chart, labels, datasets, colors } = charts[i];
|
||
|
||
chart.data.labels = labels;
|
||
if (datasets.length == 1) {
|
||
const dataset = {
|
||
backgroundColor: colors[0],
|
||
data: datasets[0].data,
|
||
};
|
||
chart.data.datasets[0] = dataset;
|
||
chart.update();
|
||
} else {
|
||
for (let k = 0; k < datasets.length; k++) {
|
||
const dataset = {
|
||
backgroundColor: colors[k],
|
||
data: datasets[k].data,
|
||
label: datasets[k].label,
|
||
};
|
||
chart.data.datasets[k] = dataset;
|
||
chart.update();
|
||
}
|
||
}
|
||
}
|
||
loadChart = [];
|
||
}
|
||
|
||
function updateProgressBarData(progressBars) {
|
||
for (let i = 0; i < progressBars.length; i++) {
|
||
const { progressBarId, animate, text } = progressBars[i];
|
||
charts[progressBarId].animate(animate);
|
||
charts[progressBarId].setText(text);
|
||
}
|
||
loadProgressBar = [];
|
||
}
|
||
|
||
async function lifeCycle({ sync, event, target }) {
|
||
// reset timer
|
||
clearInterval(timer);
|
||
timer = setInterval(function () {
|
||
lifeCycle({
|
||
sync: true,
|
||
});
|
||
}, DEFAULT_TIMER * 1000);
|
||
//create filter query
|
||
currentFilterQuery = `?subject_id=${currentActionId}`;
|
||
currentFilterQuery +=
|
||
currentFilterProvince != 0 ? `&province_id=${currentFilterProvince}` : ``;
|
||
currentFilterQuery +=
|
||
currentFilterCity != 0 ? `&city_id=${currentFilterCity}` : ``;
|
||
|
||
if (currentFilterFromDate != "" && currentFilterToDate != "") {
|
||
currentDate.from = moment(
|
||
dateFrom.getState().selected.year +
|
||
"/" +
|
||
dateFrom.getState().selected.month +
|
||
"/" +
|
||
dateFrom.getState().selected.date,
|
||
"jYYYY/jM/jD"
|
||
);
|
||
currentFilterQuery += `&from_date=${currentDate.from.format("YYYY-MM-DD")}`;
|
||
currentDate.to = moment(
|
||
dateTo.getState().selected.year +
|
||
"/" +
|
||
dateTo.getState().selected.month +
|
||
"/" +
|
||
dateTo.getState().selected.date,
|
||
"jYYYY/jM/jD"
|
||
);
|
||
currentFilterQuery += `&to_date=${currentDate.to.format("YYYY-MM-DD")}`;
|
||
} else {
|
||
if (currentFilterMonth != 0) {
|
||
currentDate.from = moment(
|
||
currentFilterYear + currentFilterMonth,
|
||
"jYYYYjM"
|
||
);
|
||
currentDate.from.locale("fa");
|
||
currentFilterQuery += `&from_date=${currentDate.from
|
||
.locale("en")
|
||
.format("YYYY-MM-DD")}`;
|
||
currentDate.to = moment(
|
||
currentFilterYear + currentFilterMonth,
|
||
"jYYYYjM"
|
||
);
|
||
currentDate.to.locale("fa");
|
||
currentDate.to.add(1, "month");
|
||
currentFilterQuery += `&to_date=${currentDate.to
|
||
.locale("en")
|
||
.format("YYYY-MM-DD")}`;
|
||
} else {
|
||
if(currentFilterYear != '0'){
|
||
currentDate.from = moment(currentFilterYear, "jYYYY");
|
||
currentDate.from.locale("fa");
|
||
currentFilterQuery += `&from_date=${currentDate.from
|
||
.locale("en")
|
||
.format("YYYY-MM-DD")}`;
|
||
currentDate.to = moment(currentFilterYear, "jYYYY");
|
||
currentDate.to.locale("fa");
|
||
currentDate.to.add(1, "year");
|
||
currentFilterQuery += `&to_date=${currentDate.to
|
||
.locale("en")
|
||
.format("YYYY-MM-DD")}`;
|
||
}else{
|
||
console.log(currentFilterYear);
|
||
|
||
currentDate.from = moment('1393', "jYYYY");
|
||
currentDate.from.locale("fa");
|
||
currentFilterQuery += `&from_date=${currentDate.from
|
||
.locale("en")
|
||
.format("YYYY-MM-DD")}`;
|
||
currentDate.to = moment(DEFALUT_YEAR, "jYYYY");
|
||
currentDate.to.locale("fa");
|
||
currentDate.to.add(1, "year");
|
||
currentFilterQuery += `&to_date=${currentDate.to
|
||
.locale("en")
|
||
.format("YYYY-MM-DD")}`;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
await showLoader(sync);
|
||
$.when(
|
||
roadInfrastructureSync(sync),
|
||
countActionsSync(sync),
|
||
statusDiagramSync(sync, event),
|
||
averageProgressRahdariProjectsSync(sync),
|
||
separationProjectTypeRahdariProjectsSync(sync),
|
||
separationLastStatusRahdariProjectsSync(sync),
|
||
separationAxisTypeRahdariProjectsSync(sync),
|
||
roadItemProjectItemSync(sync),
|
||
separationActivityTypeRahdariActivitiesSync(sync),
|
||
percentComplaintsHandledSync(sync),
|
||
separationComplainTypeRahdariComplainsSync(sync),
|
||
countAccidentPointsSync(sync),
|
||
countNumbersAccidentPointsSync(sync),
|
||
totalLengthDamagedAxesSync(sync),
|
||
primaryEstimatesDamagesSync(sync),
|
||
cityArraySync(sync, event),
|
||
diagramTileMapSync(sync, event),
|
||
diagramAllCity(sync)
|
||
).then(() => {
|
||
hideLoader(sync);
|
||
if (!sync) {
|
||
if (event == "onClickMap") {
|
||
showCitiesTileOnMap(target);
|
||
} else {
|
||
showProvinceTileOnMap();
|
||
}
|
||
updateChartsData(loadChart);
|
||
updateProgressBarData(loadProgressBar);
|
||
}
|
||
updateSyncDate();
|
||
updateLabelBoxes();
|
||
});
|
||
}
|
||
|
||
function countActionsSync(sync) {
|
||
$.ajax({
|
||
url: DEFAULT_URL + DEFAULT_WEB + "subtitleCounts" + currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
data.subjects.map((subject) => {
|
||
$('.btn-action-box[data-action-id="' + subject.action_id + '"]')
|
||
.find(".action-counter")
|
||
.text(subject.count);
|
||
});
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات تعدادها",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
|
||
function roadInfrastructureSync(sync) {
|
||
$.ajax({
|
||
url:
|
||
DEFAULT_URL +
|
||
DEFAULT_API +
|
||
"road-infrastructure" +
|
||
currentFilterQuery +
|
||
"&type=" +
|
||
currentFilterRoadInfrastructure,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
$(".road-infrastructure-counter").text(data);
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات مشخصات زیرساختی راه",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
|
||
function statusDiagramSync(sync, event) {
|
||
$.ajax({
|
||
url: DEFAULT_URL + DEFAULT_API + "status-diagram" + currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data, geojson }) {
|
||
if (sync) {
|
||
updateChartsData([
|
||
{
|
||
chart: StatusChartPrint,
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createQuarterColors(data.datasets[0].data)],
|
||
},
|
||
]);
|
||
updateChartsData([
|
||
{
|
||
chart: StatusChart,
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createQuarterColors(data.datasets[0].data)],
|
||
},
|
||
]);
|
||
diagramData = geojson;
|
||
if (event != "onClickMap") {
|
||
showProvinceTileOnMap();
|
||
}
|
||
} else {
|
||
loadChart.push({
|
||
chart: StatusChartPrint,
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createQuarterColors(data.datasets[0].data)],
|
||
});
|
||
loadChart.push({
|
||
chart: StatusChart,
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createQuarterColors(data.datasets[0].data)],
|
||
});
|
||
|
||
diagramData = geojson;
|
||
}
|
||
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات نمودار وضعیت",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
|
||
//RAHDARI PROJECTS CHARTS
|
||
|
||
function averageProgressRahdariProjectsSync(sync) {
|
||
if (currentActionId == RAHDARI_PROJECTS_ID) {
|
||
$.ajax({
|
||
url:
|
||
DEFAULT_URL +
|
||
DEFAULT_API +
|
||
"average-progress-rahdari-projects" +
|
||
currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
if (sync) {
|
||
updateProgressBarData([
|
||
{
|
||
progressBarId: "action1Chart4",
|
||
animate: data / 100,
|
||
text: "%" + data,
|
||
},
|
||
]);
|
||
} else {
|
||
loadProgressBar.push({
|
||
progressBarId: "action1Chart4",
|
||
animate: data / 100,
|
||
text: "%" + data,
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات میانگین پیشرفت پروژه های راهداری",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
function separationProjectTypeRahdariProjectsSync(sync) {
|
||
if (currentActionId == RAHDARI_PROJECTS_ID) {
|
||
$.ajax({
|
||
url:
|
||
DEFAULT_URL +
|
||
DEFAULT_API +
|
||
"separation-project-type-rahdari-projects" +
|
||
currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
if (sync) {
|
||
updateChartsData([
|
||
{
|
||
chart: charts["action1Chart3Print"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
},
|
||
]);
|
||
updateChartsData([
|
||
{
|
||
chart: charts["action1Chart3"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
},
|
||
]);
|
||
} else {
|
||
loadChart.push({
|
||
chart: charts["action1Chart3Print"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
});
|
||
loadChart.push({
|
||
chart: charts["action1Chart3"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات پروژه ها به تفکیک نوع پروژه",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
function separationLastStatusRahdariProjectsSync(sync) {
|
||
if (currentActionId == RAHDARI_PROJECTS_ID) {
|
||
$.ajax({
|
||
url:
|
||
DEFAULT_URL +
|
||
DEFAULT_API +
|
||
"separation-last-status-rahdari-projects" +
|
||
currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
if (sync) {
|
||
updateChartsData([
|
||
{
|
||
chart: charts["action1Chart2Print"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
},
|
||
]);
|
||
updateChartsData([
|
||
{
|
||
chart: charts["action1Chart2"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
},
|
||
]);
|
||
} else {
|
||
loadChart.push({
|
||
chart: charts["action1Chart2Print"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
});
|
||
loadChart.push({
|
||
chart: charts["action1Chart2"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات پروژه ها به تفکیک آخرین وضعیت",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
function separationAxisTypeRahdariProjectsSync(sync) {
|
||
if (currentActionId == RAHDARI_PROJECTS_ID) {
|
||
$.ajax({
|
||
url:
|
||
DEFAULT_URL +
|
||
DEFAULT_API +
|
||
"separation-axis-type-rahdari-projects" +
|
||
currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
if (sync) {
|
||
updateChartsData([
|
||
{
|
||
chart: charts["action1Chart1Print"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
},
|
||
]);
|
||
updateChartsData([
|
||
{
|
||
chart: charts["action1Chart1"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
},
|
||
]);
|
||
} else {
|
||
loadChart.push({
|
||
chart: charts["action1Chart1Print"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
});
|
||
loadChart.push({
|
||
chart: charts["action1Chart1"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات پروژه ها به تفکیک نوع محور",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
//RAHDARI CURRENT ACTIVITYS CHARTS
|
||
|
||
function roadItemProjectItemSync(sync) {
|
||
if (currentActionId == RAHDARI_CURRENT_ACTIVITYS_ID) {
|
||
$.ajax({
|
||
url:
|
||
DEFAULT_URL +
|
||
DEFAULT_API +
|
||
"road-item-project-item" +
|
||
currentFilterQuery +
|
||
"&item_id=" +
|
||
currentFilterRahdariActivity,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
if (sync) {
|
||
updateChartsData([
|
||
{
|
||
chart: charts["action2Chart2Print"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
},
|
||
]);
|
||
updateChartsData([
|
||
{
|
||
chart: charts["action2Chart2"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
},
|
||
]);
|
||
} else {
|
||
loadChart.push({
|
||
chart: charts["action2Chart2Print"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
});
|
||
loadChart.push({
|
||
chart: charts["action2Chart2"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات فعالیت ها به تفکیک ریزآیتم",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
function separationActivityTypeRahdariActivitiesSync(sync) {
|
||
if (currentActionId == RAHDARI_CURRENT_ACTIVITYS_ID) {
|
||
$.ajax({
|
||
url:
|
||
DEFAULT_URL +
|
||
DEFAULT_API +
|
||
"separation-activity-type-rahdari-activities" +
|
||
currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
if (sync) {
|
||
updateChartsData([
|
||
{
|
||
chart: charts["action2Chart1Print"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
},
|
||
]);
|
||
updateChartsData([
|
||
{
|
||
chart: charts["action2Chart1"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
},
|
||
]);
|
||
} else {
|
||
loadChart.push({
|
||
chart: charts["action2Chart1Print"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
});
|
||
loadChart.push({
|
||
chart: charts["action2Chart1"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات فعالیت ها به تفکیک نوع فعالیت",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
//HANDLED COMPLAINTS CHARTS
|
||
|
||
function percentComplaintsHandledSync(sync) {
|
||
if (currentActionId == HANDLED_COMPLAINTS_ID) {
|
||
$.ajax({
|
||
url:
|
||
DEFAULT_URL +
|
||
DEFAULT_API +
|
||
"percent-complaints-handled" +
|
||
currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
if (sync) {
|
||
updateProgressBarData([
|
||
{
|
||
progressBarId: "action4Chart2",
|
||
animate: data / 100,
|
||
text: "%" + data,
|
||
},
|
||
]);
|
||
} else {
|
||
loadProgressBar.push({
|
||
progressBarId: "action4Chart2",
|
||
animate: data / 100,
|
||
text: "%" + data,
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات شکایات رسیدگی شده",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
function separationComplainTypeRahdariComplainsSync(sync) {
|
||
if (currentActionId == HANDLED_COMPLAINTS_ID) {
|
||
$.ajax({
|
||
url:
|
||
DEFAULT_URL +
|
||
DEFAULT_API +
|
||
"separation-complain-type-rahdari-complains" +
|
||
currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
var colors = ["#39B54A", "#F26522"];
|
||
if (sync) {
|
||
updateChartsData([
|
||
{
|
||
chart: charts["action4Chart1Print"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: colors,
|
||
},
|
||
]);
|
||
updateChartsData([
|
||
{
|
||
chart: charts["action4Chart1"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: colors,
|
||
},
|
||
]);
|
||
} else {
|
||
loadChart.push({
|
||
chart: charts["action4Chart1Print"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: colors,
|
||
});
|
||
loadChart.push({
|
||
chart: charts["action4Chart1"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: colors,
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات شکایات به تفکیک نوع شکایات",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
//DANGER POINTS CHARTS
|
||
|
||
function countAccidentPointsSync(sync) {
|
||
if (currentActionId == DANGER_POINTS_ID) {
|
||
$.ajax({
|
||
url:
|
||
DEFAULT_URL +
|
||
DEFAULT_API +
|
||
"count-accident-points" +
|
||
currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
if (sync) {
|
||
updateProgressBarData([
|
||
{
|
||
progressBarId: "action5Chart2",
|
||
animate: data / 100,
|
||
text: "%" + data,
|
||
},
|
||
]);
|
||
} else {
|
||
loadProgressBar.push({
|
||
progressBarId: "action5Chart2",
|
||
animate: data / 100,
|
||
text: "%" + data,
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات نقاط رفع شده 1395",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
function countNumbersAccidentPointsSync(sync) {
|
||
if (currentActionId == DANGER_POINTS_ID) {
|
||
$.ajax({
|
||
url:
|
||
DEFAULT_URL +
|
||
DEFAULT_API +
|
||
"count-numbers-accident-points" +
|
||
currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
if (sync) {
|
||
updateChartsData([
|
||
{
|
||
chart: charts["action5Chart1Print"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
},
|
||
]);
|
||
updateChartsData([
|
||
{
|
||
chart: charts["action5Chart1"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
},
|
||
]);
|
||
} else {
|
||
loadChart.push({
|
||
chart: charts["action5Chart1Print"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
});
|
||
loadChart.push({
|
||
chart: charts["action5Chart1"],
|
||
labels: data.labels,
|
||
datasets: data.datasets,
|
||
colors: [createColors(data.datasets[0].data.length)],
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات نقاط به تفکیک هندسی 1395",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
//DAMAGE AXES CHARS
|
||
|
||
function totalLengthDamagedAxesSync(sync) {
|
||
if (currentActionId == DAMAGE_AXES_ID) {
|
||
$.ajax({
|
||
url:
|
||
DEFAULT_URL +
|
||
DEFAULT_API +
|
||
"total-length-damaged-axes" +
|
||
currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
if (sync) {
|
||
updateProgressBarData([
|
||
{
|
||
progressBarId: "action7Chart2",
|
||
animate: 1,
|
||
text: data + " کیلومتر",
|
||
},
|
||
]);
|
||
} else {
|
||
loadProgressBar.push({
|
||
progressBarId: "action7Chart2",
|
||
animate: 1,
|
||
text: data + " کیلومتر",
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات مجموع طول محور های آسیب دیده",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
function primaryEstimatesDamagesSync(sync) {
|
||
if (currentActionId == DAMAGE_AXES_ID) {
|
||
$.ajax({
|
||
url:
|
||
DEFAULT_URL +
|
||
DEFAULT_API +
|
||
"primary-estimates-damages" +
|
||
currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
if (sync) {
|
||
updateProgressBarData([
|
||
{
|
||
progressBarId: "action7Chart1",
|
||
animate: 1,
|
||
text: data.toLocaleString("en"),
|
||
},
|
||
]);
|
||
} else {
|
||
loadProgressBar.push({
|
||
progressBarId: "action7Chart1",
|
||
animate: 1,
|
||
text: data.toLocaleString("en"),
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات برآورد اولیه خسارات",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
//functions for ajax map
|
||
function cityArraySync(sync, event) {
|
||
if (event == "onClickMap") {
|
||
$.ajax({
|
||
url: DEFAULT_URL + "public/contents/provinces/" + currentFilterProvince,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
cityArray = data;
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات شهرستان",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
function diagramTileMapSync(sync, event) {
|
||
if (currentFilterProvince != 0) {
|
||
$.ajax({
|
||
url: DEFAULT_URL + "api/bi/status-diagram-tile" + currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
curentCityArray = [];
|
||
currentCityDiagram = data.data;
|
||
var this_row = {};
|
||
$.each(currentCityDiagram, function (key, value) {
|
||
if (key != "") {
|
||
this_row = {
|
||
namevalue: key,
|
||
keyvalue: value,
|
||
};
|
||
curentCityArray.push(this_row);
|
||
}
|
||
});
|
||
curentValueCity = $.map(currentCityDiagram, function (value, index) {
|
||
if (index != "") {
|
||
return [value];
|
||
}
|
||
});
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات شهرستان",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
// function for show All city tile
|
||
function diagramAllCity(sync) {
|
||
if (allCityFlag == 1) {
|
||
$.ajax({
|
||
url: DEFAULT_URL + "api/bi/status-diagram-tile" + currentFilterQuery,
|
||
method: "GET",
|
||
async: sync,
|
||
success: function ({ data }) {
|
||
AllCityDiagram = data.data;
|
||
var this_row = {};
|
||
AllcityArray.length = 0;
|
||
$.each(AllCityDiagram, function (key, value) {
|
||
if (key != "") {
|
||
this_row = {
|
||
namevalue: key,
|
||
keyvalue: value,
|
||
};
|
||
AllcityArray.push(this_row);
|
||
}
|
||
});
|
||
curentValueAllCity = $.map(AllCityDiagram, function (value, index) {
|
||
if (index != "") {
|
||
return [value];
|
||
}
|
||
});
|
||
},
|
||
error: function () {
|
||
Swal.fire({
|
||
icon: "error",
|
||
title: "خطا سرور",
|
||
text: "مشکل در دریافت اطلاعات شهرستان",
|
||
confirmButtonText: "بارگذاری مجدد",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
location.reload(true);
|
||
return true;
|
||
}
|
||
});
|
||
},
|
||
});
|
||
}
|
||
}
|
||
//function for tile map
|
||
function showProvinceTileOnMap() {
|
||
if (currentFilterProvince == 0) {
|
||
MapBi.setView(showbounds, 5);
|
||
if (allCityFlag == 1) {
|
||
removeFeaturesFromMap();
|
||
showAllCityTileOnMap();
|
||
} else {
|
||
showLegendOnMap(diagramData);
|
||
keepMapFeatureColor = null;
|
||
removeFeaturesFromMap();
|
||
removeFeaturesCity();
|
||
removeFeautureAllCity();
|
||
iranArrayCount = 0;
|
||
iranMapGeo = L.geoJson(iranGeoJSON, {
|
||
style: initStyleMapFeatures,
|
||
onEachFeature: onEachFeature,
|
||
});
|
||
iranMapGeo.addTo(MapBi);
|
||
}
|
||
} else {
|
||
removeFeaturesFromMap();
|
||
removeFeautureAllCity();
|
||
zoomMapToFeature(eachfeature[currentFilterProvince - 1]);
|
||
}
|
||
}
|
||
|
||
function initStyleMapFeatures() {
|
||
let randomchoose = null;
|
||
randomchoose = getForArrayFeatureColor(
|
||
fillColorMap(iranArrayCount, diagramData)
|
||
);
|
||
let StyleMap = {
|
||
fillColor: randomchoose.color,
|
||
weight: 2,
|
||
opacity: 1,
|
||
color: "white",
|
||
fillOpacity: 0.5,
|
||
};
|
||
if (randomchoose.num != -2) {
|
||
if (iranArrayCount == 35) {
|
||
iranArrayCount = 0;
|
||
}
|
||
iranArrayCount++;
|
||
}
|
||
return StyleMap;
|
||
}
|
||
|
||
function getForArrayFeatureColor(arrayNum) {
|
||
if (keepMapFeatureColor) {
|
||
return {
|
||
num: -1,
|
||
color: keepMapFeatureColor,
|
||
};
|
||
} else {
|
||
var colors = {};
|
||
if (currentActionId == RAHDARI_PROJECTS_ID) {
|
||
if (arrayNum == null) {
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#B2B1B9",
|
||
};
|
||
} else if (arrayNum <= 40)
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#FF0000",
|
||
};
|
||
else if (arrayNum < 70)
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#FFCC00",
|
||
};
|
||
else {
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#13BB51",
|
||
};
|
||
}
|
||
} else {
|
||
var minOfData = Math.min(...diagramData);
|
||
var maxOfData = Math.max(...diagramData);
|
||
var quarter = Math.round((maxOfData - minOfData) / 3);
|
||
if (arrayNum == null) {
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#B2B1B9",
|
||
};
|
||
} else if (arrayNum <= minOfData + quarter)
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#FF0000",
|
||
};
|
||
else if (arrayNum < maxOfData - quarter)
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#FFCC00",
|
||
};
|
||
else
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#13BB51",
|
||
};
|
||
}
|
||
return colors;
|
||
}
|
||
}
|
||
|
||
function fillColorMap(featureRow, diagramData) {
|
||
for (let i = 0; i < diagramData.length; i++) {
|
||
if (i == featureRow) {
|
||
return diagramData[i];
|
||
}
|
||
}
|
||
}
|
||
|
||
function onEachFeature(feature, featureLayer) {
|
||
//yasiu
|
||
eachfeature.push(featureLayer);
|
||
if (currentActionId == DANGER_POINTS_ID) {
|
||
featureLayer.on({
|
||
mouseover: highlightMapFeature,
|
||
mouseout: resetMapFeatureHighlight,
|
||
});
|
||
} else {
|
||
featureLayer.on({
|
||
mouseover: highlightMapFeature,
|
||
mouseout: resetMapFeatureHighlight,
|
||
click: zoomMapToFeatureByClick,
|
||
});
|
||
}
|
||
}
|
||
async function zoomMapToFeature(e) {
|
||
removeFeaturesCity();
|
||
let featureLayer = e.target ?? e;
|
||
let featuresLayerCity = [];
|
||
|
||
MapBi.flyToBounds(featureLayer.getBounds());
|
||
removeFeaturesFromMap();
|
||
fullCityGeoJSONTemp.type = "FeatureCollection";
|
||
$.each(fullCityGeoJSON.features, function (key, value) {
|
||
if (
|
||
value &&
|
||
featureLayer.feature.properties.province_id ===
|
||
value.properties.province_id
|
||
) {
|
||
featuresLayerCity.push(value);
|
||
} else {
|
||
//
|
||
}
|
||
});
|
||
fullCityGeoJSONTemp.features = featuresLayerCity;
|
||
|
||
addCityFeaturesToMap(fullCityGeoJSONTemp);
|
||
|
||
flagProvince = 1;
|
||
iranCityCount = 0;
|
||
}
|
||
|
||
async function zoomMapToFeatureByClick(e) {
|
||
currentFilterProvince = e.target.feature.properties.province_id;
|
||
$("#filter-province").val(currentFilterProvince);
|
||
|
||
getCitiesByProvince(currentFilterProvince);
|
||
|
||
//call lifeCycle
|
||
lifeCycle({
|
||
sync: false,
|
||
event: "onClickMap",
|
||
target: e.target ?? target,
|
||
});
|
||
}
|
||
|
||
function showCitiesTileOnMap(target) {
|
||
removeFeaturesCity();
|
||
let featureLayer = target;
|
||
let featuresLayerCity = [];
|
||
|
||
MapBi.flyToBounds(featureLayer.getBounds());
|
||
removeFeaturesFromMap();
|
||
fullCityGeoJSONTemp.type = "FeatureCollection";
|
||
$.each(fullCityGeoJSON.features, function (key, value) {
|
||
if (
|
||
value &&
|
||
featureLayer.feature.properties.province_id ===
|
||
value.properties.province_id
|
||
) {
|
||
featuresLayerCity.push(value);
|
||
} else {
|
||
//
|
||
}
|
||
});
|
||
fullCityGeoJSONTemp.features = featuresLayerCity;
|
||
addCityFeaturesToMap();
|
||
|
||
flagProvince = 1;
|
||
iranCityCount = 0;
|
||
}
|
||
|
||
function addCityFeaturesToMap() {
|
||
showLegendOnMap(curentValueCity);
|
||
keepMapFeatureColor = null;
|
||
|
||
if (fullCityGeoJSONTemp) {
|
||
iranCityMapGeo = L.geoJson(fullCityGeoJSONTemp, {
|
||
style: initStyleCityMapFeatures,
|
||
onEachFeature: onEachCityFeature,
|
||
});
|
||
iranCityMapGeo.addTo(MapBi);
|
||
}
|
||
}
|
||
|
||
function initStyleCityMapFeatures(feature) {
|
||
let getRandom = getRandomFeatureColor(fillcolorCity(iranCityCount));
|
||
let makeStyle = {
|
||
fillColor: getRandom.color,
|
||
weight: 2,
|
||
opacity: 1,
|
||
color: "white",
|
||
fillOpacity: 0.5,
|
||
};
|
||
if (iranCityCount == fullCityGeoJSONTemp.features.length) {
|
||
iranCityCount = 0;
|
||
}
|
||
iranCityCount++;
|
||
return makeStyle;
|
||
}
|
||
|
||
function getRandomFeatureColor(arrayNum) {
|
||
if (keepMapFeatureColor) {
|
||
return {
|
||
num: -1,
|
||
color: keepMapFeatureColor,
|
||
};
|
||
} else {
|
||
var colors = {};
|
||
if (currentActionId == RAHDARI_PROJECTS_ID) {
|
||
if (arrayNum.keyvalue == null) {
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#B2B1B9",
|
||
};
|
||
} else if (arrayNum.keyvalue <= 40)
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#FF0000",
|
||
};
|
||
else if (arrayNum.keyvalue < 70)
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#FFCC00",
|
||
};
|
||
else
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#13BB51",
|
||
};
|
||
} else {
|
||
var minOfData = Math.min(...curentValueCity);
|
||
var maxOfData = Math.max(...curentValueCity);
|
||
var quarter = Math.round((maxOfData - minOfData) / 3);
|
||
if (arrayNum.keyvalue == null) {
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#B2B1B9",
|
||
};
|
||
} else if (arrayNum.keyvalue <= minOfData + quarter)
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#FF0000",
|
||
};
|
||
else if (arrayNum.keyvalue < maxOfData - quarter)
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#FFCC00",
|
||
};
|
||
else
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#13BB51",
|
||
};
|
||
}
|
||
return colors;
|
||
}
|
||
}
|
||
|
||
function fillcolorCity(featureRow) {
|
||
for (let i = 0; i < fullCityGeoJSONTemp.features.length; i++) {
|
||
if (i == featureRow) {
|
||
for (let j = 0; j < curentCityArray.length; j++) {
|
||
if (
|
||
curentCityArray[j].namevalue ==
|
||
fullCityGeoJSONTemp.features[i].properties.city_id
|
||
) {
|
||
CityArraySelected.push(curentCityArray[j]);
|
||
return curentCityArray[j];
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function onEachCityFeature(feature, featureLayer) {
|
||
featureLayer.on({
|
||
mouseover: highlightMapFeature,
|
||
mouseout: resetMapFeatureHighlight,
|
||
});
|
||
}
|
||
|
||
function highlightMapFeature(e) {
|
||
let targetAtt = e.target.feature.properties;
|
||
let featureLayer = null;
|
||
if (e.target) {
|
||
featureLayer = e.target;
|
||
} else {
|
||
featureLayer = e;
|
||
}
|
||
keepMapFeatureColor = featureLayer.options.fillColor;
|
||
featureLayer.setStyle({
|
||
weight: 4,
|
||
color: "#666",
|
||
fillOpacity: 0.5,
|
||
});
|
||
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
|
||
featureLayer.bringToFront();
|
||
}
|
||
if (currentFilterProvince == 0 && allCityFlag == 0) {
|
||
for (let i = 0; i < provinces.length; i++) {
|
||
if (targetAtt.province_id == provinces[i].id) {
|
||
var value =
|
||
currentActionId == RAHDARI_PROJECTS_ID
|
||
? `%${diagramData[i]}`
|
||
: diagramData[i];
|
||
if (diagramData[i] != null) {
|
||
popup
|
||
.setLatLng([provinces[i].center_lat, provinces[i].center_long])
|
||
.setContent(
|
||
`<div class="parent-popup-enjoyment text-center">
|
||
<div class="d-flex flex-column ">
|
||
<span class="font-weight-bold">${provinces[i].name_fa}</span>
|
||
<div class="d-flex justify-content-center mt-1">
|
||
<span>${value}</span>
|
||
</div>
|
||
</div>
|
||
<div class="line-popup"></div>
|
||
</div>
|
||
`
|
||
)
|
||
.openOn(MapBi);
|
||
} else {
|
||
popup
|
||
.setLatLng([provinces[i].center_lat, provinces[i].center_long])
|
||
.setContent(
|
||
`<div class="parent-popup-enjoyment text-center">
|
||
<div class="d-flex flex-column ">
|
||
<span class="font-weight-bold">${provinces[i].name_fa}</span>
|
||
<div class="d-flex justify-content-center mt-1">
|
||
</div>
|
||
</div>
|
||
<div class="line-popup"></div>
|
||
</div>
|
||
`
|
||
)
|
||
.openOn(MapBi);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (allCityFlag == 1) {
|
||
for (let i = 0; i < AllCityArrayPopUp.length; i++) {
|
||
if (targetAtt.city_id == AllCityArrayPopUp[i].namevalue) {
|
||
var value =
|
||
currentActionId == RAHDARI_PROJECTS_ID
|
||
? `%${AllCityArrayPopUp[i].keyvalue}`
|
||
: AllCityArrayPopUp[i].keyvalue;
|
||
if (AllCityArrayPopUp[i].keyvalue != null) {
|
||
popup
|
||
.setLatLng([targetAtt.center_lat, targetAtt.center_lng])
|
||
.setContent(
|
||
`<div class="parent-popup-enjoyment text-center">
|
||
<div class="d-flex flex-column ">
|
||
<span class="font-weight-bold">${targetAtt.city_name}</span>
|
||
<div class="d-flex justify-content-center mt-1">
|
||
<span>${value}</span>
|
||
</div>
|
||
</div>
|
||
<div class="line-popup"></div>
|
||
</div>
|
||
`
|
||
)
|
||
.openOn(MapBi);
|
||
} else {
|
||
popup
|
||
.setLatLng([targetAtt.center_lat, targetAtt.center_lng])
|
||
.setContent(
|
||
`<div class="parent-popup-enjoyment text-center">
|
||
<div class="d-flex flex-column ">
|
||
<span class="font-weight-bold">${targetAtt.city_name}</span>
|
||
<div class="d-flex justify-content-center mt-1">
|
||
</div>
|
||
</div>
|
||
<div class="line-popup"></div>
|
||
</div>
|
||
`
|
||
)
|
||
.openOn(MapBi);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (currentFilterProvince != 0) {
|
||
for (let i = 0; i < CityArraySelected.length; i++) {
|
||
if (targetAtt.city_id == CityArraySelected[i].namevalue) {
|
||
var value =
|
||
currentActionId == RAHDARI_PROJECTS_ID
|
||
? `%${CityArraySelected[i].keyvalue}`
|
||
: CityArraySelected[i].keyvalue;
|
||
if (CityArraySelected[i].keyvalue != null) {
|
||
popup
|
||
.setLatLng([targetAtt.center_lat, targetAtt.center_lng])
|
||
.setContent(
|
||
`<div class="parent-popup-enjoyment text-center">
|
||
<div class="d-flex flex-column ">
|
||
<span class="font-weight-bold">${targetAtt.city_name}</span>
|
||
<div class="d-flex justify-content-center mt-1">
|
||
<span>${value}</span>
|
||
</div>
|
||
</div>
|
||
<div class="line-popup"></div>
|
||
</div>
|
||
`
|
||
)
|
||
.openOn(MapBi);
|
||
} else {
|
||
popup
|
||
.setLatLng([targetAtt.center_lat, targetAtt.center_lng])
|
||
.setContent(
|
||
`<div class="parent-popup-enjoyment text-center">
|
||
<div class="d-flex flex-column ">
|
||
<span class="font-weight-bold">${targetAtt.city_name}</span>
|
||
<div class="d-flex justify-content-center mt-1">
|
||
</div>
|
||
</div>
|
||
<div class="line-popup"></div>
|
||
</div>
|
||
`
|
||
)
|
||
.openOn(MapBi);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function resetMapFeatureHighlight(e) {
|
||
let targetAtt = e.target.feature.properties;
|
||
let featureLayer = null;
|
||
if (e.target) {
|
||
featureLayer = e.target;
|
||
} else {
|
||
featureLayer = e;
|
||
}
|
||
iranMapGeo.resetStyle(featureLayer);
|
||
keepMapFeatureColor = null;
|
||
popup.remove();
|
||
}
|
||
|
||
function removeFeaturesFromMap() {
|
||
if (iranMapGeo) {
|
||
MapBi.removeLayer(iranMapGeo);
|
||
}
|
||
}
|
||
|
||
function removeFeaturesCity() {
|
||
if (fullCityGeoJSONTemp.features) {
|
||
MapBi.removeLayer(iranCityMapGeo);
|
||
}
|
||
}
|
||
|
||
function removeFeautureAllCity() {
|
||
if (allCityGeoTemp.features) {
|
||
MapBi.removeLayer(iranAllCityMapGeo);
|
||
}
|
||
}
|
||
async function showAllCityTileOnMap() {
|
||
//clear filters
|
||
$('select[name="filter-province"]').val(0);
|
||
$('select[name="filter-city"]').empty();
|
||
$('select[name="filter-city"]').append(
|
||
`<option value="0">انتخاب شهرستان</option>`
|
||
);
|
||
$('select[name="filter-city"]').val(0);
|
||
|
||
removeFeaturesCity();
|
||
removeFeautureAllCity();
|
||
removeFeaturesFromMap();
|
||
let AllCityOnMap = [];
|
||
allCityGeoTemp.type = "FeatureCollection";
|
||
$.each(fullCityGeoJSON.features, function (key, value) {
|
||
AllCityOnMap.push(value);
|
||
});
|
||
allCityGeoTemp.features = AllCityOnMap;
|
||
addAllCityToMap();
|
||
allCityCount = 0;
|
||
}
|
||
|
||
function addAllCityToMap() {
|
||
showLegendOnMap(curentValueAllCity);
|
||
keepMapFeatureColor = null;
|
||
if (allCityGeoTemp) {
|
||
iranAllCityMapGeo = L.geoJson(allCityGeoTemp, {
|
||
style: initStyleAllCityMapFeatures,
|
||
onEachFeature: onEachAllCityFeature,
|
||
});
|
||
iranAllCityMapGeo.addTo(MapBi);
|
||
}
|
||
}
|
||
|
||
function initStyleAllCityMapFeatures() {
|
||
let getRandom = getrandomALlColor(fillColorAllCity(allCityCount));
|
||
let makeStyle = {
|
||
fillColor: getRandom.color,
|
||
weight: 2,
|
||
opacity: 1,
|
||
color: "white",
|
||
fillOpacity: 0.5,
|
||
};
|
||
if (allCityCount == allCityGeoTemp.features.length) {
|
||
allCityCount = 0;
|
||
}
|
||
allCityCount++;
|
||
return makeStyle;
|
||
}
|
||
|
||
function getrandomALlColor(arrayNum) {
|
||
if (keepMapFeatureColor) {
|
||
return {
|
||
num: -1,
|
||
color: keepMapFeatureColor,
|
||
};
|
||
} else {
|
||
var colors = {};
|
||
if (currentActionId == RAHDARI_PROJECTS_ID) {
|
||
if (arrayNum.keyvalue == null) {
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#B2B1B9",
|
||
};
|
||
} else if (arrayNum.keyvalue <= 40)
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#FF0000",
|
||
};
|
||
else if (arrayNum.keyvalue < 70)
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#FFCC00",
|
||
};
|
||
else
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#13BB51",
|
||
};
|
||
} else {
|
||
var minOfData = Math.min(...AllValueCity);
|
||
var maxOfData = Math.max(...AllValueCity);
|
||
var quarter = Math.round((maxOfData - minOfData) / 3);
|
||
if (arrayNum.keyvalue == null) {
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#B2B1B9",
|
||
};
|
||
} else if (arrayNum.keyvalue <= minOfData + quarter)
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#FF0000",
|
||
};
|
||
else if (arrayNum.keyvalue < maxOfData - quarter)
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#FFCC00",
|
||
};
|
||
else
|
||
colors = {
|
||
num: arrayNum.keyvalue,
|
||
color: "#13BB51",
|
||
};
|
||
}
|
||
return colors;
|
||
}
|
||
}
|
||
|
||
function fillColorAllCity(featureRow) {
|
||
for (let i = 0; i < allCityGeoTemp.features.length; i++) {
|
||
if (i == featureRow) {
|
||
for (let j = 0; j < AllcityArray.length; j++) {
|
||
if (
|
||
AllcityArray[j].namevalue ==
|
||
allCityGeoTemp.features[i].properties.city_id
|
||
) {
|
||
AllValueCity.push(AllcityArray[j].keyvalue);
|
||
AllCityArrayPopUp.push(AllcityArray[j]);
|
||
return AllcityArray[j];
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function onEachAllCityFeature(feature, featureLayer) {
|
||
featureLayer.on({
|
||
mouseover: highlightMapFeature,
|
||
mouseout: resetMapFeatureHighlight,
|
||
});
|
||
}
|
||
|
||
function returnToHomeOnMap() {
|
||
allCityFlag = 0;
|
||
currentActionId = DEFAULT_ACTION_ID;
|
||
|
||
//clear buttonActions
|
||
$(".btn-action-box").removeClass("active");
|
||
|
||
//update this button
|
||
$('.btn-action-box[data-action-id="' + currentActionId + '"]').addClass(
|
||
"active"
|
||
);
|
||
//clear filters
|
||
$('select[name="filter-province"]').val(0);
|
||
$('select[name="filter-city"]').empty();
|
||
$('select[name="filter-city"]').append(
|
||
`<option value="0">انتخاب شهرستان</option>`
|
||
);
|
||
$('select[name="filter-city"]').val(0);
|
||
$('select[name="filter-year"]').val(
|
||
$('.btn-action-box[data-action-id="' + currentActionId + '"]').data(
|
||
"resetYear"
|
||
)
|
||
? DEFALUT_YEAR
|
||
: $('.btn-action-box[data-action-id="' + currentActionId + '"]').data(
|
||
"defaultYear"
|
||
)
|
||
);
|
||
$('select[name="filter-month"]').val(0);
|
||
$('input[name="filter-date-from"]').val("");
|
||
$('input[name="filter-date-to"]').val("");
|
||
|
||
//check disabled filter
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('select[name="filter-province"]').data("disable")
|
||
) != -1
|
||
)
|
||
$('select[name="filter-province"]').val(0).attr("disabled", "disabled");
|
||
else $('select[name="filter-province"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('select[name="filter-city"]').data("disable")
|
||
) != -1
|
||
)
|
||
$('select[name="filter-city"]').val(0).attr("disabled", "disabled");
|
||
else $('select[name="filter-city"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('select[name="filter-year"]').data("disable")
|
||
) != -1
|
||
) {
|
||
$('select[name="filter-year"]').attr("disabled", "disabled");
|
||
$('.btn-action-box[data-reset-year="true"]').data(
|
||
"defaultYear",
|
||
DEFALUT_YEAR
|
||
);
|
||
} else $('select[name="filter-year"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('select[name="filter-month"]').data("disable")
|
||
) != -1
|
||
)
|
||
$('select[name="filter-month"]').val(0).attr("disabled", "disabled");
|
||
else $('select[name="filter-month"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('input[name="filter-date-from"]').data("disable")
|
||
) != -1
|
||
)
|
||
$('input[name="filter-date-from"]').val("").attr("disabled", "disabled");
|
||
else $('input[name="filter-date-from"]').removeAttr("disabled");
|
||
|
||
if (
|
||
$.inArray(
|
||
currentActionId,
|
||
$('input[name="filter-date-to"]').data("disable")
|
||
) != -1
|
||
)
|
||
$('input[name="filter-date-to"]').val("").attr("disabled", "disabled");
|
||
else $('input[name="filter-date-to"]').removeAttr("disabled");
|
||
|
||
//update current filter variables
|
||
currentFilterProvince = $('select[name="filter-province"]').val();
|
||
currentFilterCity = $('select[name="filter-city"]').val();
|
||
currentFilterYear = $('select[name="filter-year"]').val();
|
||
currentFilterMonth = $('select[name="filter-month"]').val();
|
||
currentFilterFromDate = $('input[name="filter-date-from"]').val();
|
||
currentFilterToDate = $('input[name="filter-date-to"]').val();
|
||
|
||
$('.btn-action-box[data-reset-year="true"]').data(
|
||
"defaultYear",
|
||
DEFALUT_YEAR
|
||
);
|
||
|
||
//clear charts box
|
||
$(".charts-box").attr("aria-display", "hide");
|
||
|
||
//show current charts box
|
||
$('.charts-box[data-action-id="' + currentActionId + '"]').attr(
|
||
"aria-display",
|
||
"show"
|
||
);
|
||
|
||
//call lifeCycle
|
||
lifeCycle({
|
||
sync: false,
|
||
});
|
||
}
|
||
|
||
function returnToProvinceOnMap() {
|
||
allCityFlag = 0;
|
||
//clear filters
|
||
$('select[name="filter-province"]').val(0);
|
||
$('select[name="filter-city"]').empty();
|
||
$('select[name="filter-city"]').append(
|
||
`<option value="0">انتخاب شهرستان</option>`
|
||
);
|
||
$('select[name="filter-city"]').val(0);
|
||
|
||
//update current filter variables
|
||
currentFilterProvince = $('select[name="filter-province"]').val();
|
||
currentFilterCity = $('select[name="filter-city"]').val();
|
||
|
||
//call lifeCycle
|
||
lifeCycle({
|
||
sync: false,
|
||
});
|
||
}
|
||
function showLegendOnMap(data) {
|
||
var minNum;
|
||
var maxNum;
|
||
var quarter;
|
||
var firstQuarter;
|
||
var secondQuarter;
|
||
$(".map-guid").empty();
|
||
if (currentActionId == 1) {
|
||
minNum = 0;
|
||
maxNum = 100;
|
||
firstQuarter = 40;
|
||
secondQuarter = 70;
|
||
} else {
|
||
minNum = Math.min(...data);
|
||
maxNum = Math.max(...data);
|
||
quarter = Math.round((maxNum - minNum) / 3);
|
||
firstQuarter = minNum + quarter;
|
||
secondQuarter = maxNum - quarter;
|
||
}
|
||
$(".map-guid").append(`<p class="text-center">راهنمای نقشه</p>
|
||
<p>
|
||
<i class="fa fa-circle" aria-hidden="true" style="color: #FF0000;"></i>
|
||
${minNum} تا ${firstQuarter}
|
||
</p>
|
||
<p>
|
||
<i class="fa fa-circle" aria-hidden="true" style="color: #FFCC00;"></i>
|
||
${firstQuarter} تا ${secondQuarter}
|
||
</p>
|
||
<p>
|
||
<i class="fa fa-circle" aria-hidden="true" style="color: #13BB51;"></i>
|
||
${secondQuarter} تا ${maxNum}
|
||
</p>`);
|
||
}
|