1421 lines
38 KiB
JavaScript
1421 lines
38 KiB
JavaScript
// yasi start map js
|
||
var map;
|
||
var projectMap;
|
||
var bounds = [
|
||
[42.9130026312, 75.6166317076],
|
||
[20.5782370061, 30.5092252948],
|
||
];
|
||
var showbounds = [32.4279, 53.688];
|
||
var iranGeoJSON = JSON.parse(PROVICES_GEOJSON);
|
||
var iranMapGeo;
|
||
var iranMapGeoProject;
|
||
var keepMapFeatureColor = null;
|
||
var keepMapFeatureColorProject = null;
|
||
var iranArrayCount = 0;
|
||
var iranArrayCountProject = 0;
|
||
var diagramData = [];
|
||
var diagramDataProject = [];
|
||
var provinceLatlng = [];
|
||
var dataItem=[];
|
||
var rmsItemLayerCluster=null;
|
||
var markerItemList = [];
|
||
var itemIcon = L.divIcon({
|
||
className: "custom-div-icon",
|
||
html: "<span class='beacon beacon-red'></span>",
|
||
iconSize: [30, 42],
|
||
});
|
||
// yasi end map js
|
||
(() => {
|
||
$(".from_date").text(
|
||
moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")
|
||
);
|
||
$(".to_date").text(moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD"));
|
||
|
||
$('title').text(`گزارش سامانه جامع راهداری کل کشور از تاریخ ${moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")} تا ${moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD")}`)
|
||
|
||
Chart.defaults.font.family = "IRANSansFaNum";
|
||
Chart.defaults.font.size = 10;
|
||
|
||
provinceLatlng = jsonServer.data.provinces;
|
||
// yasi start map js
|
||
diagramData=jsonServer.data.road_item_group_by_province.data;
|
||
diagramDataProject=jsonServer.data.contracts.progress_avrage_according_province;
|
||
dataItem=jsonServer.data.road_item_cluster;
|
||
rmsItemLayerCluster = L.markerClusterGroup({
|
||
showCoverageOnHover: true,
|
||
});
|
||
//clustermap
|
||
map = L.map("map", {
|
||
maxBounds: bounds,
|
||
dragging: false,
|
||
zoomControl: false,
|
||
attributionControl: false,
|
||
scrollWheelZoom: false,
|
||
minZoom: 5,
|
||
maxZoom: 16,
|
||
markerZoomAnimation: true,
|
||
}).setView(showbounds, 5);
|
||
|
||
showLegendOnMap(diagramDataProject);
|
||
|
||
|
||
keepMapFeatureColor = null;
|
||
iranArrayCount = 0;
|
||
iranMapGeo = L.geoJSON(iranGeoJSON, {
|
||
style: initStyleMapFeatures,
|
||
});
|
||
iranMapGeo.addTo(map);
|
||
for (let i = 0; i < dataItem.length; i++) {
|
||
let marker = L.marker([dataItem[i][0], dataItem[i][1]], {
|
||
icon: itemIcon,
|
||
})
|
||
markerItemList.push(marker);
|
||
}
|
||
rmsItemLayerCluster.addLayers(markerItemList);
|
||
map.addLayer(rmsItemLayerCluster);
|
||
//clustermap
|
||
// yasi end map js
|
||
//projectMap
|
||
projectMap = L.map("project_map", {
|
||
maxBounds: bounds,
|
||
zoomControl: false,
|
||
scrollWheelZoom: false,
|
||
attributionControl: false,
|
||
dragging: false,
|
||
}).setView(showbounds, 5);
|
||
keepMapFeatureColorProject = null;
|
||
iranArrayCountProject = 0;
|
||
iranMapGeoProject = L.geoJSON(iranGeoJSON, {
|
||
style: initStyleMapFeaturesProject,
|
||
});
|
||
iranMapGeoProject.addTo(projectMap);
|
||
//projectMap
|
||
|
||
const activityLable = [];
|
||
|
||
const quantitativeActivityCount = [];
|
||
const quantitativeActivityData = jsonServer.data.quantitative_activity_chart;
|
||
|
||
const hourly_activity_chartCount = [];
|
||
const hourly_activity_chartData = jsonServer.data.hourly_activity_chart;
|
||
|
||
for (var i = 0; i < hourly_activity_chartData.length; i++) {
|
||
hourly_activity_chartCount.push(hourly_activity_chartData[i].majmoe);
|
||
activityLable.push(
|
||
moment(hourly_activity_chartData[i].created_at).format("jYYYY/jMM/jDD")
|
||
);
|
||
}
|
||
for (var i = 0; i < quantitativeActivityData.length; i++) {
|
||
quantitativeActivityCount.push(quantitativeActivityData[i].quantity);
|
||
}
|
||
|
||
const ActivityChartData = {
|
||
datasets: [
|
||
{
|
||
backgroundColor: "#277da1",
|
||
borderColor: "#277da1",
|
||
fill: false,
|
||
data: quantitativeActivityCount,
|
||
id: "hours",
|
||
label: "ساعت فعالیت در سامانه",
|
||
yAxisID: "hours",
|
||
datalabels: {
|
||
align: "end",
|
||
anchor: "end",
|
||
},
|
||
},
|
||
{
|
||
backgroundColor: "#db504a",
|
||
borderColor: "#db504a",
|
||
fill: false,
|
||
data: hourly_activity_chartCount,
|
||
id: "counts",
|
||
label: "تعداد فعالیت در سامانه",
|
||
yAxisID: "counts",
|
||
datalabels: {
|
||
align: "start",
|
||
anchor: "start",
|
||
},
|
||
},
|
||
],
|
||
labels: activityLable,
|
||
};
|
||
|
||
const ActivityChartOptions = {
|
||
scales: {
|
||
hours: {
|
||
grid: {
|
||
display: false
|
||
},
|
||
position: 'right',
|
||
title: {
|
||
display: true,
|
||
text: 'ساعت',
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 11,
|
||
weight: 'bold'
|
||
}
|
||
}
|
||
},
|
||
counts: {
|
||
grid: {
|
||
display: false
|
||
},
|
||
position: 'left',
|
||
title: {
|
||
display: true,
|
||
text: 'تعداد',
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 11,
|
||
weight: 'bold'
|
||
}
|
||
}
|
||
},
|
||
xAxis: {
|
||
grid: {
|
||
display: false
|
||
},
|
||
title: {
|
||
display: true,
|
||
text: 'تاریخ',
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 11,
|
||
weight: 'bold'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
plugins: {
|
||
legend: {
|
||
title: {
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 11,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
labels: {
|
||
usePointStyle: true,
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
$("#users_activity_chart").attr(
|
||
"width",
|
||
$("#users_activity_chart").closest(".chart-box").width()
|
||
);
|
||
$("#users_activity_chart").attr(
|
||
"height",
|
||
$("#users_activity_chart").closest(".chart-box").height()
|
||
);
|
||
|
||
const activityChart = new Chart(
|
||
document.getElementById("users_activity_chart").getContext("2d"),
|
||
{
|
||
type: "line",
|
||
data: ActivityChartData,
|
||
options: ActivityChartOptions
|
||
}
|
||
);
|
||
|
||
|
||
const fastReactStatusChartCount = [];
|
||
const fastReactStatusData = jsonServer.data.fast_react_chart;
|
||
|
||
if(fastReactStatusData[0].st == 0) fastReactStatusChartCount.push(Math.floor(fastReactStatusData[0].percent));
|
||
if(fastReactStatusData[1].st == 1) fastReactStatusChartCount.push(Math.ceil(fastReactStatusData[1].percent));
|
||
|
||
const fastReactStatusChartData = {
|
||
labels: [
|
||
'در حال بررسی',
|
||
'رسیدگی شده',
|
||
],
|
||
datasets: [{
|
||
label: '',
|
||
data: fastReactStatusChartCount,
|
||
backgroundColor: [
|
||
'#db504a',
|
||
'#43aa8b'
|
||
],
|
||
}]
|
||
};
|
||
|
||
|
||
var fastReactStatusChartRatio =
|
||
(+$("#fast_react_status_chart").closest(".chart-box").width() + 2) / (+$("#fast_react_status_chart").closest(".chart-box").height() + 2);
|
||
|
||
const fastReactStatusChartOptions = {
|
||
aspectRatio: fastReactStatusChartRatio,
|
||
layout: {
|
||
padding: {
|
||
bottom: 5
|
||
}
|
||
},
|
||
plugins: {
|
||
datalabels: {
|
||
backgroundColor: '#00000066',
|
||
textAlign: "center",
|
||
font: {
|
||
weight: 'bold',
|
||
size: 14
|
||
},
|
||
borderRadius: 8,
|
||
padding: {
|
||
top: 5,
|
||
right: 8,
|
||
bottom: 2,
|
||
left: 8,
|
||
},
|
||
color:'#fff',
|
||
formatter: function(value, context) {
|
||
return value + '%';
|
||
}
|
||
},
|
||
title: {
|
||
display: true,
|
||
text: "وضعیت شکایت های واصل شده",
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 14,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
subtitle: {
|
||
display: true,
|
||
text: `از تاریخ ${moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")} تا ${moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD")}`,
|
||
padding: {
|
||
bottom: 10
|
||
}
|
||
},
|
||
legend: {
|
||
position: 'right',
|
||
title: {
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 14,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
labels: {
|
||
usePointStyle: true,
|
||
font: {
|
||
weight: 'bold',
|
||
size: 12
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const fastReactStatusChart = new Chart(
|
||
document.getElementById("fast_react_status_chart").getContext("2d"),
|
||
{
|
||
type: 'pie',
|
||
data: fastReactStatusChartData,
|
||
plugins: [ChartDataLabels],
|
||
options: fastReactStatusChartOptions
|
||
}
|
||
);
|
||
|
||
|
||
//amir
|
||
const fastReactTopsPercentageData = jsonServer.data.top_5_province_at_road_observation_according_to_progress_percent;
|
||
const fastReactTopsPercentageCount = []
|
||
const fastReactTopsPercentageLabel = []
|
||
|
||
for (var i = 0; i < fastReactTopsPercentageData.length; i++) {
|
||
fastReactTopsPercentageCount.push(Math.floor(fastReactTopsPercentageData[i].progress_percent));
|
||
fastReactTopsPercentageLabel.push(fastReactTopsPercentageData[i].ProvinceName);
|
||
}
|
||
|
||
const fastReactTopsPercentageChartData = {
|
||
labels: ['',...fastReactTopsPercentageLabel,''],
|
||
datasets: [{
|
||
data: [null,...fastReactTopsPercentageCount,null],
|
||
backgroundColor: [
|
||
'#577590'
|
||
],
|
||
borderColor: '#577590',
|
||
borderWidth: 3,
|
||
}]
|
||
};
|
||
|
||
minFastReactTopsPercentageChart = Math.round(Math.min(...fastReactTopsPercentageCount) - ((Math.max(...fastReactTopsPercentageCount) - Math.min(...fastReactTopsPercentageCount)) / fastReactTopsPercentageCount.length))
|
||
|
||
maxFastReactTopsPercentageChart = Math.round(Math.max(...fastReactTopsPercentageCount) + ((Math.max(...fastReactTopsPercentageCount) - Math.min(...fastReactTopsPercentageCount)) / fastReactTopsPercentageCount.length))
|
||
|
||
const fastReactTopsPercentageChartOptions = {
|
||
plugins: {
|
||
datalabels: {
|
||
align: 'start',
|
||
anchor: 'start',
|
||
font: {
|
||
weight: 'bold'
|
||
},
|
||
color:'#577590',
|
||
formatter: function(value, context) {
|
||
return value + '%';
|
||
}
|
||
},
|
||
title: {
|
||
position: 'bottom',
|
||
display: true,
|
||
color:'#577590',
|
||
text: "رتبه بندی ادارات کل برتر (برحسب درصد رسیدگی به شکایات)",
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 13,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
subtitle: {
|
||
display: true,
|
||
color:'#577590',
|
||
text: `از تاریخ ${moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")} تا ${moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD")}`,
|
||
padding: {
|
||
bottom: 10
|
||
}
|
||
},
|
||
legend: {
|
||
display: false
|
||
}
|
||
},
|
||
scales: {
|
||
x: {
|
||
ticks: {
|
||
color:'#577590',
|
||
font: {
|
||
weight: 'bold'
|
||
}
|
||
}
|
||
},
|
||
y: {
|
||
grid: {
|
||
display: false
|
||
},
|
||
min: minFastReactTopsPercentageChart == Math.min(...fastReactTopsPercentageCount) ? (Math.min(...fastReactTopsPercentageCount) - 5) : minFastReactTopsPercentageChart,
|
||
max: maxFastReactTopsPercentageChart == Math.max(...fastReactTopsPercentageCount) ? (Math.max(...fastReactTopsPercentageCount) + 5) : maxFastReactTopsPercentageChart,
|
||
ticks: {
|
||
display: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
$("#fast_react_tops_percentage_chart").attr(
|
||
"width",
|
||
$("#fast_react_tops_percentage_chart").closest(".chart-box").width()
|
||
);
|
||
$("#fast_react_tops_percentage_chart").attr(
|
||
"height",
|
||
$("#fast_react_tops_percentage_chart").closest(".chart-box").height()
|
||
);
|
||
|
||
const fastReactTopsPercentageChart = new Chart(
|
||
document.getElementById("fast_react_tops_percentage_chart").getContext("2d"),
|
||
{
|
||
type: 'line',
|
||
data: fastReactTopsPercentageChartData,
|
||
plugins: [ChartDataLabels],
|
||
options: fastReactTopsPercentageChartOptions
|
||
}
|
||
);
|
||
|
||
|
||
|
||
const fastReactTopsCountData = jsonServer.data.top_5_province_at_road_observation_according_to_quantity;
|
||
const fastReactTopsCountCount = []
|
||
const fastReactTopsCountLabel = []
|
||
|
||
for (var i = 0; i < fastReactTopsCountData.length; i++) {
|
||
fastReactTopsCountCount.push(fastReactTopsCountData[i].count_number);
|
||
fastReactTopsCountLabel.push(fastReactTopsCountData[i].ProvinceName);
|
||
}
|
||
|
||
|
||
const fastReactTopsCountChartData = {
|
||
labels: ['',...fastReactTopsCountLabel,''],
|
||
datasets: [{
|
||
data: [null,...fastReactTopsCountCount,null],
|
||
backgroundColor: [
|
||
'#43aa8b'
|
||
],
|
||
borderColor: '#43aa8b',
|
||
borderWidth: 3,
|
||
}]
|
||
};
|
||
|
||
const fastReactTopsCountChartOptions = {
|
||
plugins: {
|
||
datalabels: {
|
||
align: 'start',
|
||
anchor: 'start',
|
||
offset : 4,
|
||
font: {
|
||
weight: 'bold'
|
||
},
|
||
color:'#43aa8b',
|
||
formatter: function(value, context) {
|
||
return (+value).toLocaleString('en');
|
||
}
|
||
},
|
||
title: {
|
||
position: 'bottom',
|
||
display: true,
|
||
color:'#43aa8b',
|
||
text: "رتبه بندی ادارات کل برتر (برحسب تعداد رسیدگی به شکایات)",
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 13,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
subtitle: {
|
||
display: true,
|
||
color:'#43aa8b',
|
||
text: `از تاریخ ${moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")} تا ${moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD")}`,
|
||
padding: {
|
||
bottom: 10
|
||
}
|
||
},
|
||
legend: {
|
||
display: false
|
||
}
|
||
},
|
||
scales: {
|
||
x: {
|
||
ticks: {
|
||
color:'#43aa8b',
|
||
font: {
|
||
weight: 'bold'
|
||
}
|
||
}
|
||
},
|
||
y: {
|
||
grid: {
|
||
display: false
|
||
},
|
||
min: Math.round(Math.min(...fastReactTopsCountCount) - ((Math.max(...fastReactTopsCountCount) - Math.min(...fastReactTopsCountCount)) / fastReactTopsCountCount.length),1),
|
||
max: Math.round(Math.max(...fastReactTopsCountCount) + ((Math.max(...fastReactTopsCountCount) - Math.min(...fastReactTopsCountCount)) / fastReactTopsCountCount.length)),
|
||
ticks: {
|
||
display: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
$("#fast_react_tops_count_chart").attr(
|
||
"width",
|
||
$("#fast_react_tops_count_chart").closest(".chart-box").width()
|
||
);
|
||
$("#fast_react_tops_count_chart").attr(
|
||
"height",
|
||
$("#fast_react_tops_count_chart").closest(".chart-box").height()
|
||
);
|
||
|
||
const fastReactTopsCountChart = new Chart(
|
||
document.getElementById("fast_react_tops_count_chart").getContext("2d"),
|
||
{
|
||
type: 'line',
|
||
data: fastReactTopsCountChartData,
|
||
plugins: [ChartDataLabels],
|
||
options: fastReactTopsCountChartOptions
|
||
}
|
||
);
|
||
|
||
|
||
|
||
const roadItemsData = jsonServer.data.road_items_chart;
|
||
const roadItemsCount = []
|
||
const roadItemsLabel = []
|
||
|
||
for (var i = 0; i < roadItemsData.length; i++) {
|
||
roadItemsCount.push(roadItemsData[i].count_number);
|
||
roadItemsLabel.push(roadItemsData[i].sub_item_fa);
|
||
}
|
||
|
||
const roadItemsChartData = {
|
||
labels: roadItemsLabel,
|
||
datasets: [{
|
||
data: roadItemsCount,
|
||
borderRadius: {
|
||
topRight: 16,
|
||
topLeft: 16
|
||
},
|
||
backgroundColor: [
|
||
'#43aa8b',
|
||
'#db504a',
|
||
'#f3722c',
|
||
'#67bd50',
|
||
'#277da1',
|
||
],
|
||
}]
|
||
};
|
||
|
||
const roadItemsChartOptions = {
|
||
layout: {
|
||
padding: {
|
||
bottom: 15
|
||
},
|
||
},
|
||
scales: {
|
||
yAxis: {
|
||
display:false,
|
||
},
|
||
x: {
|
||
ticks: {
|
||
font: {
|
||
weight: 'bold'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
plugins: {
|
||
datalabels: {
|
||
anchor: 'start',
|
||
textAlign: "center",
|
||
font:{
|
||
size: 14
|
||
},
|
||
padding : {
|
||
top: 5,
|
||
right: 4,
|
||
left: 4,
|
||
bottom: 2
|
||
},
|
||
borderRadius: 16,
|
||
offset: 20,
|
||
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];
|
||
},
|
||
rotation: 270,
|
||
formatter: function(value, context) {
|
||
return (+value).toLocaleString('en');
|
||
}
|
||
},
|
||
title: {
|
||
display: true,
|
||
color:'#666',
|
||
text: "پنج فعالیت پرتکرار (تعداد)",
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 13,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
subtitle: {
|
||
display: true,
|
||
color:'#666',
|
||
text: `از تاریخ ${moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")} تا ${moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD")}`,
|
||
padding: {
|
||
bottom: 10
|
||
}
|
||
},
|
||
legend: {
|
||
display: false
|
||
}
|
||
},
|
||
}
|
||
|
||
|
||
$("#road_items_chart").attr(
|
||
"width",
|
||
$("#road_items_chart").closest(".chart-box").width()
|
||
);
|
||
$("#road_items_chart").attr(
|
||
"height",
|
||
$("#road_items_chart").closest(".chart-box").height()
|
||
);
|
||
|
||
const roadItemsChart = new Chart(
|
||
document.getElementById("road_items_chart").getContext("2d"),
|
||
{
|
||
type: 'bar',
|
||
data: roadItemsChartData,
|
||
plugins: [ChartDataLabels],
|
||
options: roadItemsChartOptions
|
||
}
|
||
);
|
||
|
||
|
||
const roadItemBarData = jsonServer.data.road_item_group_province_chunk
|
||
const maxOfDataRoadItemBar = +roadItemBarData[0].cnt
|
||
const minOfDataRoadItemBar = +roadItemBarData[34].cnt
|
||
const quarterRoadItemBar = (maxOfDataRoadItemBar - minOfDataRoadItemBar) / 5;
|
||
|
||
let arrayRoadItemBar = {
|
||
0 : [],
|
||
1 : [],
|
||
2 : [],
|
||
3 : [],
|
||
4 : [],
|
||
}
|
||
|
||
const arrayTopRoadBar = [
|
||
roadItemBarData[0].province_fa,
|
||
roadItemBarData[1].province_fa,
|
||
roadItemBarData[2].province_fa,
|
||
roadItemBarData[3].province_fa,
|
||
roadItemBarData[4].province_fa,
|
||
]
|
||
|
||
$('#top_road_bar').text(arrayTopRoadBar.join('، '))
|
||
|
||
const arrayBottomRoadBar = [
|
||
roadItemBarData[34].province_fa,
|
||
roadItemBarData[33].province_fa,
|
||
roadItemBarData[32].province_fa,
|
||
roadItemBarData[31].province_fa,
|
||
roadItemBarData[30].province_fa,
|
||
]
|
||
|
||
$('#bottom_road_bar').text(arrayBottomRoadBar.join('، '))
|
||
|
||
|
||
for (var i = 0; i < roadItemBarData.length; i++) {
|
||
if (roadItemBarData[i].cnt <= minOfDataRoadItemBar + quarterRoadItemBar) { // part 1
|
||
arrayRoadItemBar[0].push(roadItemBarData[i].cnt)
|
||
}
|
||
else if (roadItemBarData[i].cnt > minOfDataRoadItemBar + quarterRoadItemBar && roadItemBarData[i].cnt <= minOfDataRoadItemBar + (quarterRoadItemBar * 2)) { // part 2
|
||
arrayRoadItemBar[1].push(roadItemBarData[i].cnt)
|
||
}
|
||
else if (roadItemBarData[i].cnt <= minOfDataRoadItemBar + (quarterRoadItemBar * 3) && roadItemBarData[i].cnt > minOfDataRoadItemBar + (quarterRoadItemBar * 2)) { /// part 3
|
||
arrayRoadItemBar[2].push(roadItemBarData[i].cnt)
|
||
}
|
||
else if(roadItemBarData[i].cnt > minOfDataRoadItemBar + (quarterRoadItemBar * 3) && roadItemBarData[i].cnt <= minOfDataRoadItemBar + (quarterRoadItemBar * 4)) {// part 4
|
||
arrayRoadItemBar[3].push(roadItemBarData[i].cnt)
|
||
}
|
||
else {
|
||
arrayRoadItemBar[4].push(roadItemBarData[i].cnt)
|
||
}
|
||
}
|
||
|
||
$('.bar-road-items-count-1').text(Math.round(minOfDataRoadItemBar))
|
||
$('.bar-road-items-count-2').text(Math.round(minOfDataRoadItemBar + quarterRoadItemBar))
|
||
$('.bar-road-items-count-3').text(Math.round(minOfDataRoadItemBar + (quarterRoadItemBar * 2)))
|
||
$('.bar-road-items-count-4').text(Math.round(minOfDataRoadItemBar + (quarterRoadItemBar * 3)))
|
||
$('.bar-road-items-count-5').text(Math.round(minOfDataRoadItemBar + (quarterRoadItemBar * 4)))
|
||
$('.bar-road-items-count-6').text(Math.round(maxOfDataRoadItemBar))
|
||
|
||
var temporary = new ProgressBar.Circle(temporary_bar, {
|
||
color: '#666',
|
||
// This has to be the same size as the maximum width to
|
||
// prevent clipping
|
||
strokeWidth: 8,
|
||
trailWidth: 2,
|
||
easing: 'easeInOut',
|
||
duration: 1400,
|
||
text: {
|
||
autoStyleContainer: false
|
||
},
|
||
from: { color: '#db504a',},
|
||
to: { color: '#43aa8b',},
|
||
// Set default step function for all animate calls
|
||
step: function(state, circle) {
|
||
circle.path.setAttribute('stroke', state.color);
|
||
|
||
var value = Math.round(circle.value() * 100);
|
||
if (value === 0) {
|
||
circle.setText('');
|
||
} else {
|
||
circle.setText(`${value}%`);
|
||
}
|
||
|
||
}
|
||
});
|
||
temporary.text.style.fontFamily = 'IRANSansFaNum';
|
||
temporary.text.style.fontSize = '25px';
|
||
temporary.animate(+jsonServer.data.road_tollhouse_count_type);
|
||
|
||
var inactive = new ProgressBar.Circle(inactive_bar, {
|
||
color: '#666',
|
||
// This has to be the same size as the maximum width to
|
||
// prevent clipping
|
||
strokeWidth: 8,
|
||
trailWidth: 2,
|
||
easing: 'easeInOut',
|
||
duration: 1400,
|
||
text: {
|
||
autoStyleContainer: false
|
||
},
|
||
from: { color: '#db504a',},
|
||
to: { color: '#43aa8b',},
|
||
// Set default step function for all animate calls
|
||
step: function(state, circle) {
|
||
circle.path.setAttribute('stroke', state.color);
|
||
|
||
var value = Math.round(circle.value() * 100);
|
||
if (value === 0) {
|
||
circle.setText('');
|
||
} else {
|
||
circle.setText(`${Math.floor(value)}%`);
|
||
}
|
||
|
||
}
|
||
});
|
||
inactive.text.style.fontFamily = 'IRANSansFaNum';
|
||
inactive.text.style.fontSize = '25px';
|
||
inactive.animate(+jsonServer.data.road_tollhouse_count_status[0].percent);
|
||
|
||
var active = new ProgressBar.Circle(active_bar, {
|
||
color: '#666',
|
||
|
||
strokeWidth: 8,
|
||
trailWidth: 2,
|
||
easing: 'easeInOut',
|
||
duration: 1400,
|
||
text: {
|
||
autoStyleContainer: false
|
||
},
|
||
from: { color: '#db504a',},
|
||
to: { color: '#43aa8b',},
|
||
step: function(state, circle) {
|
||
circle.path.setAttribute('stroke', state.color);
|
||
|
||
var value = Math.round(circle.value() * 100);
|
||
if (value === 0) {
|
||
circle.setText('');
|
||
} else {
|
||
circle.setText(`${Math.ceil(value)}%`);
|
||
}
|
||
|
||
}
|
||
});
|
||
active.text.style.fontFamily = 'IRANSansFaNum';
|
||
active.text.style.fontSize = '25px';
|
||
active.animate(+jsonServer.data.road_tollhouse_count_status[1].percent);
|
||
|
||
|
||
|
||
|
||
$("#contracts_done_data_1").css(
|
||
"width",
|
||
$("#contracts_done_data_1")
|
||
.closest(".canvas-box")
|
||
.width() + "px"
|
||
);
|
||
$("#contracts_done_data_1").css(
|
||
"height",
|
||
$("#contracts_done_data_1")
|
||
.closest(".canvas-box")
|
||
.height() + "px"
|
||
);
|
||
|
||
var contracts_done_data_1_progress_bar = new ProgressBar.Circle(contracts_done_data_1, {
|
||
color: '#666',
|
||
// This has to be the same size as the maximum width to
|
||
// prevent clipping
|
||
strokeWidth: 10,
|
||
trailWidth: 4,
|
||
easing: 'easeInOut',
|
||
duration: 1400,
|
||
svgStyle: {
|
||
display: "block",
|
||
width:
|
||
$("#contracts_done_data_1")
|
||
.closest(".canvas-box")
|
||
.width() + "px",
|
||
height:
|
||
$("#contracts_done_data_1")
|
||
.closest(".canvas-box")
|
||
.height() + "px",
|
||
},
|
||
text: {
|
||
autoStyleContainer: false
|
||
},
|
||
from: { color: '#db504a',},
|
||
to: { color: '#43aa8b',},
|
||
// Set default step function for all animate calls
|
||
step: function(state, circle) {
|
||
circle.path.setAttribute('stroke', state.color);
|
||
|
||
var value = Math.round(circle.value() * 100);
|
||
if (value === 0) {
|
||
circle.setText(`0%`);
|
||
} else {
|
||
circle.setText(`${Math.ceil(value)}%`);
|
||
}
|
||
|
||
}
|
||
});
|
||
contracts_done_data_1_progress_bar.text.style.fontFamily = 'IRANSansFaNum';
|
||
contracts_done_data_1_progress_bar.text.style.fontSize = '30px';
|
||
contracts_done_data_1_progress_bar.animate(+jsonServer.data.contracts['done_and_in_progress'][1].percent);
|
||
$('#contracts_done_title_1').text(jsonServer.data.contracts['done_and_in_progress'][1].fa)
|
||
|
||
|
||
$("#contracts_done_data_2").css(
|
||
"width",
|
||
$("#contracts_done_data_2")
|
||
.closest(".canvas-box")
|
||
.width() + "px"
|
||
);
|
||
$("#contracts_done_data_2").css(
|
||
"height",
|
||
$("#contracts_done_data_2")
|
||
.closest(".canvas-box")
|
||
.height() + "px"
|
||
);
|
||
|
||
var contracts_done_data_2_progress_bar = new ProgressBar.Circle(contracts_done_data_2, {
|
||
color: '#666',
|
||
// This has to be the same size as the maximum width to
|
||
// prevent clipping
|
||
strokeWidth: 10,
|
||
trailWidth: 4,
|
||
easing: 'easeInOut',
|
||
duration: 1400,
|
||
svgStyle: {
|
||
display: "block",
|
||
width:
|
||
$("#contracts_done_data_2")
|
||
.closest(".canvas-box")
|
||
.width() + "px",
|
||
height:
|
||
$("#contracts_done_data_2")
|
||
.closest(".canvas-box")
|
||
.height() + "px",
|
||
},
|
||
text: {
|
||
autoStyleContainer: false
|
||
},
|
||
from: { color: '#db504a',},
|
||
to: { color: '#43aa8b',},
|
||
// Set default step function for all animate calls
|
||
step: function(state, circle) {
|
||
circle.path.setAttribute('stroke', state.color);
|
||
|
||
var value = Math.round(circle.value() * 100);
|
||
if (value === 0) {
|
||
circle.setText(`0%`);
|
||
} else {
|
||
circle.setText(`${Math.ceil(value)}%`);
|
||
}
|
||
|
||
}
|
||
});
|
||
contracts_done_data_2_progress_bar.text.style.fontFamily = 'IRANSansFaNum';
|
||
contracts_done_data_2_progress_bar.text.style.fontSize = '30px';
|
||
contracts_done_data_2_progress_bar.animate(+jsonServer.data.contracts['done_and_in_progress'][2].percent);
|
||
$('#contracts_done_title_2').text(jsonServer.data.contracts['done_and_in_progress'][2].fa)
|
||
|
||
|
||
$("#contracts_done_data_3").css(
|
||
"width",
|
||
$("#contracts_done_data_3")
|
||
.closest(".canvas-box")
|
||
.width() + "px"
|
||
);
|
||
$("#contracts_done_data_3").css(
|
||
"height",
|
||
$("#contracts_done_data_3")
|
||
.closest(".canvas-box")
|
||
.height() + "px"
|
||
);
|
||
|
||
var contracts_done_data_3_progress_bar = new ProgressBar.Circle(contracts_done_data_3, {
|
||
color: '#666',
|
||
// This has to be the same size as the maximum width to
|
||
// prevent clipping
|
||
strokeWidth: 10,
|
||
trailWidth: 4,
|
||
easing: 'easeInOut',
|
||
duration: 1400,
|
||
svgStyle: {
|
||
display: "block",
|
||
width:
|
||
$("#contracts_done_data_3")
|
||
.closest(".canvas-box")
|
||
.width() + "px",
|
||
height:
|
||
$("#contracts_done_data_3")
|
||
.closest(".canvas-box")
|
||
.height() + "px",
|
||
},
|
||
text: {
|
||
autoStyleContainer: false
|
||
},
|
||
from: { color: '#db504a',},
|
||
to: { color: '#43aa8b',},
|
||
// Set default step function for all animate calls
|
||
step: function(state, circle) {
|
||
circle.path.setAttribute('stroke', state.color);
|
||
|
||
var value = Math.round(circle.value() * 100);
|
||
if (value === 0) {
|
||
circle.setText(`0%`);
|
||
} else {
|
||
circle.setText(`${Math.ceil(value)}%`);
|
||
}
|
||
|
||
}
|
||
});
|
||
contracts_done_data_3_progress_bar.text.style.fontFamily = 'IRANSansFaNum';
|
||
contracts_done_data_3_progress_bar.text.style.fontSize = '30px';
|
||
contracts_done_data_3_progress_bar.animate(+jsonServer.data.contracts['done_and_in_progress'][3].percent);
|
||
$('#contracts_done_title_3').text(jsonServer.data.contracts['done_and_in_progress'][3].fa)
|
||
|
||
|
||
$("#contracts_done_data_4").css(
|
||
"width",
|
||
$("#contracts_done_data_4")
|
||
.closest(".canvas-box")
|
||
.width() + "px"
|
||
);
|
||
$("#contracts_done_data_4").css(
|
||
"height",
|
||
$("#contracts_done_data_4")
|
||
.closest(".canvas-box")
|
||
.height() + "px"
|
||
);
|
||
|
||
var contracts_done_data_4_progress_bar = new ProgressBar.Circle(contracts_done_data_4, {
|
||
color: '#666',
|
||
// This has to be the same size as the maximum width to
|
||
// prevent clipping
|
||
strokeWidth: 10,
|
||
trailWidth: 4,
|
||
easing: 'easeInOut',
|
||
duration: 1400,
|
||
svgStyle: {
|
||
display: "block",
|
||
width:
|
||
$("#contracts_done_data_4")
|
||
.closest(".canvas-box")
|
||
.width() + "px",
|
||
height:
|
||
$("#contracts_done_data_4")
|
||
.closest(".canvas-box")
|
||
.height() + "px",
|
||
},
|
||
text: {
|
||
autoStyleContainer: false
|
||
},
|
||
from: { color: '#db504a',},
|
||
to: { color: '#43aa8b',},
|
||
// Set default step function for all animate calls
|
||
step: function(state, circle) {
|
||
circle.path.setAttribute('stroke', state.color);
|
||
|
||
var value = Math.round(circle.value() * 100);
|
||
if (value === 0) {
|
||
circle.setText(`0%`);
|
||
} else {
|
||
circle.setText(`${Math.ceil(value)}%`);
|
||
}
|
||
|
||
}
|
||
});
|
||
contracts_done_data_4_progress_bar.text.style.fontFamily = 'IRANSansFaNum';
|
||
contracts_done_data_4_progress_bar.text.style.fontSize = '30px';
|
||
contracts_done_data_4_progress_bar.animate(+jsonServer.data.contracts['done_and_in_progress'][4].percent);
|
||
$('#contracts_done_title_4').text(jsonServer.data.contracts['done_and_in_progress'][4].fa)
|
||
|
||
const top5ProjectsData = jsonServer.data.contracts['top_5_progress_avrage_according_province'];
|
||
const top5ProjectsCount = []
|
||
const top5ProjectsLabel = []
|
||
|
||
for (var i = 0; i < top5ProjectsData.length; i++) {
|
||
if(top5ProjectsData[i].progress_project > 0) {
|
||
top5ProjectsCount.push(top5ProjectsData[i].progress_project);
|
||
top5ProjectsLabel.push(top5ProjectsData[i].province_fa);
|
||
}
|
||
}
|
||
|
||
const top5ProjectsChartData = {
|
||
labels: top5ProjectsLabel,
|
||
datasets: [{
|
||
data: top5ProjectsCount,
|
||
borderRadius: {
|
||
topRight: 24,
|
||
bottomRight: 24
|
||
},
|
||
backgroundColor: [
|
||
'#43aa8b',
|
||
'#db504a',
|
||
'#f3722c',
|
||
'#67bd50',
|
||
'#277da1',
|
||
],
|
||
}]
|
||
};
|
||
|
||
const top5ProjectsChartOptions = {
|
||
indexAxis: 'y',
|
||
layout: {
|
||
padding: 15
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
color:'#666',
|
||
text: "ادارات کل برتر برحسب درصد رشد در پیشرفت پروژه",
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 13,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
subtitle: {
|
||
display: true,
|
||
color:'#666',
|
||
text: `از تاریخ ${moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")} تا ${moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD")}`,
|
||
padding: {
|
||
bottom: 10
|
||
}
|
||
},
|
||
legend: {
|
||
display: false
|
||
},
|
||
datalabels: {
|
||
anchor: 'start',
|
||
textAlign: "center",
|
||
font:{
|
||
size: 14
|
||
},
|
||
padding : {
|
||
top: 5,
|
||
right: 8,
|
||
left: 8,
|
||
bottom: 2
|
||
},
|
||
offset: 20,
|
||
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];
|
||
},
|
||
formatter: function(value, context) {
|
||
return value + '%';
|
||
}
|
||
},
|
||
},
|
||
scales: {
|
||
y: {
|
||
ticks: {
|
||
color:'#666',
|
||
font: {
|
||
size: 12,
|
||
weight: 'bold'
|
||
}
|
||
}
|
||
},
|
||
x: {
|
||
grid: {
|
||
display: false
|
||
},
|
||
ticks: {
|
||
display: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
$("#top_5_projects_chart").attr(
|
||
"width",
|
||
$("#top_5_projects_chart").closest(".chart-box").width()
|
||
);
|
||
$("#top_5_projects_chart").attr(
|
||
"height",
|
||
$("#top_5_projects_chart").closest(".chart-box").height()
|
||
);
|
||
|
||
const top5ProjectsChart = new Chart(
|
||
document.getElementById("top_5_projects_chart").getContext("2d"),
|
||
{
|
||
type: 'bar',
|
||
data: top5ProjectsChartData,
|
||
plugins: [ChartDataLabels],
|
||
options: top5ProjectsChartOptions
|
||
}
|
||
);
|
||
|
||
|
||
|
||
const allProjectsByTypeData = jsonServer.data.contract_subs_group_by_items;
|
||
const allProjectsByTypeCount = []
|
||
const allProjectsByTypeLabel = []
|
||
|
||
for (var i = 0; i < allProjectsByTypeData.length; i++) {
|
||
allProjectsByTypeCount.push(allProjectsByTypeData[i].count_number);
|
||
allProjectsByTypeLabel.push(allProjectsByTypeData[i].project_type_fa);
|
||
}
|
||
|
||
const allProjectsByTypeChartData = {
|
||
labels: allProjectsByTypeLabel,
|
||
datasets: [{
|
||
label: '',
|
||
data: allProjectsByTypeCount,
|
||
backgroundColor: [
|
||
'#43aa8b',
|
||
'#db504a',
|
||
'#f3722c',
|
||
'#67bd50',
|
||
'#277da1',
|
||
'#577590',
|
||
],
|
||
}]
|
||
};
|
||
|
||
var allProjectsByTypeChartRatio =
|
||
(+$("#all_projects_by_type_chart").closest(".chart-box").width() + 2) / (+$("#all_projects_by_type_chart").closest(".chart-box").height() + 2);
|
||
|
||
const allProjectsByTypeChartOptions = {
|
||
aspectRatio: allProjectsByTypeChartRatio,
|
||
layout: {
|
||
padding: 15
|
||
},
|
||
plugins: {
|
||
datalabels: {
|
||
backgroundColor: '#00000066',
|
||
textAlign: "center",
|
||
font: {
|
||
weight: 'bold',
|
||
size: 14
|
||
},
|
||
borderRadius: 8,
|
||
padding: {
|
||
top: 5,
|
||
right: 8,
|
||
bottom: 2,
|
||
left: 8,
|
||
},
|
||
color:'#fff',
|
||
formatter: function(value, context) {
|
||
return (+value).toLocaleString('en');
|
||
}
|
||
},
|
||
title: {
|
||
display: true,
|
||
text: "پروژه ها به تفکیک ماهیت پروژه",
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 14,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
subtitle: {
|
||
display: true,
|
||
text: `از تاریخ ${moment(jsonServer.data.fromDate).format("jYYYY/jMM/jDD")} تا ${moment(jsonServer.data.toDate).format("jYYYY/jMM/jDD")}`,
|
||
padding: {
|
||
bottom: 10
|
||
}
|
||
},
|
||
legend: {
|
||
position: 'right',
|
||
labels: {
|
||
font: {
|
||
family: "IRANSansFaNum",
|
||
size: 13,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
labels: {
|
||
usePointStyle: true,
|
||
font: {
|
||
weight: 'bold',
|
||
size: 12
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const allProjectsByTypeChart = new Chart(
|
||
document.getElementById("all_projects_by_type_chart").getContext("2d"),
|
||
{
|
||
type: 'doughnut',
|
||
data: allProjectsByTypeChartData,
|
||
plugins: [ChartDataLabels],
|
||
options: allProjectsByTypeChartOptions
|
||
}
|
||
);
|
||
|
||
})()
|
||
|
||
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 fillColorMap(featureRow, diagramData) {
|
||
for (let i = 0; i < diagramData.length; i++) {
|
||
if (i == featureRow) {
|
||
return diagramData[i];
|
||
}
|
||
}
|
||
}
|
||
function getForArrayFeatureColor(arrayNum) {
|
||
if (keepMapFeatureColor) {
|
||
return {
|
||
num: -1,
|
||
color: keepMapFeatureColor,
|
||
};
|
||
} else {
|
||
var colors = {};
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#B2B1B9",
|
||
};
|
||
return colors;
|
||
}
|
||
}
|
||
// yasi end map js
|
||
//project map
|
||
function initStyleMapFeaturesProject() {
|
||
let randomchoose = null;
|
||
randomchoose = getForArrayFeatureColorProject(
|
||
fillColorMapProject(iranArrayCountProject, diagramDataProject)
|
||
);
|
||
let StyleMap = {
|
||
fillColor: randomchoose.color,
|
||
weight: 2,
|
||
opacity: 1,
|
||
color: "white",
|
||
fillOpacity: 1,
|
||
};
|
||
if (randomchoose.num != -2) {
|
||
if (iranArrayCountProject == 35) {
|
||
iranArrayCountProject = 0;
|
||
}
|
||
iranArrayCountProject++;
|
||
}
|
||
return StyleMap;
|
||
}
|
||
function fillColorMapProject(featureRow, diagramDataProject) {
|
||
for (let i = 0; i < diagramDataProject.length; i++) {
|
||
if (i == featureRow) {
|
||
return diagramDataProject[i];
|
||
}
|
||
}
|
||
}
|
||
function getForArrayFeatureColorProject(arrayNum) {
|
||
if (keepMapFeatureColorProject) {
|
||
return {
|
||
num: -1,
|
||
color: keepMapFeatureColorProject,
|
||
};
|
||
} else {
|
||
var colors = {};
|
||
var minOfData = 1;
|
||
var maxOfData = Math.max(...diagramDataProject);
|
||
var quarter = Math.round((maxOfData - minOfData) / 3);
|
||
if (arrayNum == 0 || arrayNum == null) {
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#e0e0e0",
|
||
};
|
||
} else if (arrayNum <= minOfData + quarter)
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#f94144",
|
||
};
|
||
else if (arrayNum < maxOfData - quarter)
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#f9c74f",
|
||
};
|
||
else
|
||
colors = {
|
||
num: arrayNum,
|
||
color: "#43aa8b",
|
||
};
|
||
|
||
return colors;
|
||
}
|
||
}
|
||
|
||
function showLegendOnMap(data) {
|
||
var minNum;
|
||
var maxNum;
|
||
var quarter;
|
||
var firstQuarter;
|
||
var secondQuarter;
|
||
$(".map-guid").empty();
|
||
minNum = 1;
|
||
maxNum = Math.max(...data);
|
||
quarter = Math.round((maxNum - minNum) / 3);
|
||
firstQuarter = minNum + quarter;
|
||
secondQuarter = maxNum - quarter;
|
||
$(".map-guid").append(`<p class="text-center pb-1">راهنمای نقشه</p>
|
||
<p>
|
||
<i class="fa fa-circle" aria-hidden="true" style="color: #e0e0e0;"></i>
|
||
<span class="pr-1">
|
||
<span>0</span>
|
||
</span>
|
||
</p>
|
||
<p>
|
||
<i class="fa fa-circle" aria-hidden="true" style="color: #f94144;"></i>
|
||
<span class="pr-1">
|
||
<span>${minNum}</span>
|
||
<span>تا</span>
|
||
<span>${firstQuarter}</span>
|
||
</span>
|
||
</p>
|
||
<p>
|
||
<i class="fa fa-circle" aria-hidden="true" style="color: #f9c74f;"></i>
|
||
<span class="pr-1">
|
||
<span>${firstQuarter}</span>
|
||
<span>تا</span>
|
||
<span>${secondQuarter}</span>
|
||
</span>
|
||
</p>
|
||
<p>
|
||
<i class="fa fa-circle" aria-hidden="true" style="color: #43aa8b;"></i>
|
||
<span class="pr-1">
|
||
<span>${secondQuarter}</span>
|
||
<span>تا</span>
|
||
<span>${maxNum}</span>
|
||
</span>
|
||
</p>`);
|
||
} |