건설현장 관리 > 건설현장 통계 - 등록현황 그래프를 소속기관, 산하기관 분류하여 표시 요청

main
유지인 2025-12-18 09:48:33 +09:00
parent 7366d26a6a
commit a04f133118
1 changed files with 75 additions and 44 deletions

View File

@ -98,7 +98,19 @@
createInstitutionDetailCharts(data.institutionStats || []); createInstitutionDetailCharts(data.institutionStats || []);
// (4) 하단 전체 기관 등록 건수 차트 갱신 // (4) 하단 전체 기관 등록 건수 차트 갱신
updateInstitutionChart(data.institutionStats || []); // (4)-1 하단 국토부 소속 기관 등록 건수 차트 갱신
var gm01List = data.institutionStats.filter(function(stat) {
return stat.gm === "01";
});
// (4)-2 하단 국토부 산하 기관 등록 건수 차트 갱신
var gm02List = data.institutionStats.filter(function(stat) {
return stat.gm === "02";
});
// 각각 차트 생성
updateInstitutionChart('institutionChart_gm01', gm01List, '지방국토관리청 등록 현황');
updateInstitutionChart('institutionChart_gm02', gm02List, '산하기관 등록 현황');
} }
// [상단] 전체 단계별 차트 // [상단] 전체 단계별 차트
@ -245,45 +257,45 @@
} }
// [하단] 전체 기관별 등록 건수 차트 // [하단] 전체 기관별 등록 건수 차트
function updateInstitutionChart(instStats) { function updateInstitutionChart(canvasId, instStats, title) {
var canvas = document.getElementById('institutionChart'); var canvas = document.getElementById(canvasId);
if(!canvas) return; if(!canvas) return;
if (instChartInstance) instChartInstance.destroy(); var labels = [];
var data = [];
var labels = [];
var data = []; instStats.forEach(function(stat) {
var name = stat.name;
instStats.forEach(function(stat) { if (name === '울산광역시') name = '한국도로공사';
var name = stat.name; labels.push(name);
if (name === '울산광역시') name = '한국도로공사'; data.push(stat.count);
labels.push(name); });
data.push(stat.count);
}); new Chart(canvas, {
type: 'bar',
instChartInstance = new Chart(canvas, { data: {
type: 'bar', labels: labels,
data: { datasets: [{
labels: labels, label: '등록 건수',
datasets: [{ data: data,
label: '등록 건수', backgroundColor: 'rgba(75, 192, 192, 0.5)',
data: data, borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.5)', borderWidth: 1
borderColor: 'rgba(75, 192, 192, 1)', }]
borderWidth: 1 },
}] options: {
}, responsive: true,
options: { maintainAspectRatio: false,
responsive: true, scales: {
maintainAspectRatio: false, y: { beginAtZero: true, ticks: { stepSize: 1 } }
scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }, },
plugins: { plugins: {
legend: { display: false }, legend: { display: false },
title: { display: true, text: '전체 기관별 등록 현황' } title: { display: true, text: title }
} }
} }
}); });
} }
</script> </script>
</head> </head>
@ -293,10 +305,8 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row content"> <div class="row content">
<div class="col-sm-12"> <div class="col-sm-12">
<!-- 전체 기관별 등록 건수 종합 그래프 --> <!-- 전체 기관별 등록 건수 종합 그래프 -->
<div class="row" style="margin-top: 30px;"> <%-- <div class="row" style="margin-top: 30px;">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="well" style="background-color: #fff;"> <div class="well" style="background-color: #fff;">
<p class="fw-bold" style="font-size: 18px; color:#c87202; margin-bottom: 15px;">전체 기관별 등록 건수</p> <p class="fw-bold" style="font-size: 18px; color:#c87202; margin-bottom: 15px;">전체 기관별 등록 건수</p>
@ -305,7 +315,28 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> --%>
<%-- 소속기관 --%>
<div class="row" style="margin-top:30px;">
<div class="col-sm-6">
<div class="well" style="background-color: #fff;">
<p class="fw-bold" style="font-size: 18px; color:#c87202; margin-bottom: 15px;">국토교통부 소속기관 등록 현황</p>
<div style="height:400px;">
<canvas id="institutionChart_gm01"></canvas>
</div>
</div>
</div>
<%-- 산하기관 --%>
<div class="col-sm-6">
<div class="well" style="background-color: #fff;">
<p class="fw-bold" style="font-size: 18px; color:#c87202; margin-bottom: 15px;">국토교통부 산하기관 등록 현황</p>
<div style="height:400px;">
<canvas id="institutionChart_gm02"></canvas>
</div>
</div>
</div>
</div>
<!-- 기관별 상세 통계 그래프 영역 (동적 생성) --> <!-- 기관별 상세 통계 그래프 영역 (동적 생성) -->
<div id="institution-detail-area" style="margin-top: 30px;"> <div id="institution-detail-area" style="margin-top: 30px;">