diff --git a/src/main/webapp/WEB-INF/jsp/include/dashboard.jsp b/src/main/webapp/WEB-INF/jsp/include/dashboard.jsp index fb401d0c..d68b51ce 100644 --- a/src/main/webapp/WEB-INF/jsp/include/dashboard.jsp +++ b/src/main/webapp/WEB-INF/jsp/include/dashboard.jsp @@ -5,19 +5,19 @@
-

2/10

+

?/?

-

2/3

+

?/?

-

2/3

+

?/?

-

10/10

+

?/?

@@ -29,11 +29,11 @@
-

2/10

+

?/?

-

2/3

+

?/?

@@ -45,15 +45,15 @@
-

2/10

+

?/?

-

2/3

+

?/?

-

2/3

+

?/?

@@ -65,15 +65,15 @@
-

2/10

+

?/?

-

2/3

+

?/?

-

2/3

+

?/?

@@ -138,13 +138,13 @@ -var falseLineChart = ` `; -var falseDoughnutChart = ` @@ -154,11 +154,6 @@ fnMakeSkeleton(); sleep(3000).then(() => fnLoadStatisticsData()); -//지연 -function sleep(ms) { - return new Promise((r) => setTimeout(r, ms)); -} - //데이터 로딩 전 이미지 표시 function fnMakeSkeleton(){ @@ -179,299 +174,321 @@ function fnLoadStatisticsData(){ //TODO : ajax var data = {}; - fnRenderDashboardContents(data); + + data = { + statItems : [ + { itemName : "고정형CCTV", completeCnt : 2, totalCnt : 10, itemCursor : "card1-1"}, + { itemName : "도보단속", completeCnt : 2, totalCnt : 3, itemCursor : "card1-2"}, + { itemName : "이동형CCTV", completeCnt : 2, totalCnt : 3, itemCursor : "card1-3"}, + { itemName : "민원(즉시단속)", completeCnt : 10, totalCnt : 10, itemCursor : "card1-4"} + ] + }; + fnRenderDashboardContents(data, "card1" , "progressAndTotal"); + + data = { + statItems : [ + { itemName : "등록대상", completeCnt : 45, totalCnt : 50, itemCursor : "card2-1"}, + { itemName : "이첩대상", completeCnt : 35, totalCnt : 40, itemCursor : "card2-2"} + ] + }; + fnRenderDashboardContents(data, "card2" , "progressAndTotal"); + + data = { + statItems : [ + { itemName : "계도장", completeCnt : 4, totalCnt : 10, itemCursor : "card3-1"}, + { itemName : "사전통보", completeCnt : 5, totalCnt : 11, itemCursor : "card3-2"}, + { itemName : "고지서", completeCnt : 6, totalCnt : 12, itemCursor : "card3-3"} + ] + }; + fnRenderDashboardContents(data, "card3" , "progressAndTotal"); + + data = { + statItems : [ + { itemName : "접수", completeCnt : 49, totalCnt : 100, itemCursor : "card4-1"}, + { itemName : "수용/미수용", completeCnt : 50, totalCnt : 98, itemCursor : "card4-2"}, + { itemName : "자진취하", completeCnt : 51, totalCnt : 97, itemCursor : "card4-3"} + ] + }; + fnRenderDashboardContents(data, "card4" , "progressAndTotal"); + + data = { + statItems : [ + { itemName : "고정형", valueByTime : [80, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 360, 375] }, + { itemName : "도보", valueByTime : [80, 125, 105, 130, 215, 195, 140, 160, 230, 300, 220, 170, 210, 200, 280] }, + { itemName : "민원", valueByTime : [80, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 140, 130, 180] } + ] + }; + fnRenderDashboardContents(data, "lineChart" , "line"); + + data = { + statItems : [ + { itemName : "단속", value : 15 }, + { itemName : "계고", value : 15 }, + { itemName : "서손", value : 70 } + ] + }; + fnRenderDashboardContents(data, "doughnutChart1", "doughnut"); + + data = { + statItems : [ + { itemName : "계고장", value : 10 }, + { itemName : "사전통보", value : 10 }, + { itemName : "고지서", value : 80 } + ] + }; + fnRenderDashboardContents(data, "doughnutChart2", "doughnut"); + + data = { + statItems : [ + { itemName : "수용", value : 33 }, + { itemName : "미수용", value : 33 }, + { itemName : "자진취하", value : 34 } + ] + }; + fnRenderDashboardContents(data, "doughnutChart3", "doughnut"); } -//콘텐츠(차트) 표시 -function fnRenderDashboardContents(data){ +//대시보드 콘텐츠 표시 +function fnRenderDashboardContents(returnData, cursor, statType){ + + if(statType == "progressAndTotal"){ + fnRenderProgressAndTotal(returnData, cursor); + return; + } + + if(statType == "line"){ + fnRenderLine(returnData, cursor); + return; + } + if(statType == "doughnut"){ + fnRenderDoughnut(returnData, cursor); + return; + } + +} + +//진행건수,전체건수 표시 +function fnRenderProgressAndTotal(returnData, cursor){ + + for(var i=0; i < returnData.statItems.length; i++){ + $("#"+returnData.statItems[i].itemCursor).html(returnData.statItems[i].completeCnt + "/" + returnData.statItems[i].totalCnt); + } + + if(cursor == "card1"){ mappingButtonAndMenu("btnGoToCrdn","단속 관리"); + return; + } + + if(cursor == "card2"){ mappingButtonAndMenu("btnGoToOpnn","의견제출 관리"); + return; + } +} + +//라인차트 표시 +function fnRenderLine(returnData, cursor){ + var yellowColor = '#ffe800'; + var cyanColor = '#28dac6'; + var orangeLightColor = '#FDAC34'; - $("#lineChartCardBody svg").remove(); - $("#doughnutChart1CardBody svg").remove(); - $("#doughnutChart2CardBody svg").remove(); - $("#doughnutChart3CardBody svg").remove(); + var borderColor = '#f0f0f0'; + var gridColor = '#f0f0f0'; + var tickColor = 'rgba(0, 0, 0, 0.75)'; // x & y axis tick color + + $("#"+cursor).siblings("svg").remove(); + + $("#"+cursor).show(); - $("#lineChart").show(); - $("#doughnutChart1").show(); - $("#doughnutChart2").show(); - $("#doughnutChart3").show(); + var datasets = []; + for(var i=0; i < returnData.statItems.length; i++){ + var defaultObject = { + tension: 0.5, + pointStyle: 'circle', + fill: false, + pointRadius: 1, + pointHoverRadius: 5, + pointHoverBorderWidth: 5, + pointBorderColor: 'transparent', + pointHoverBorderColor: config.colors.cardColor + }; + + defaultObject.label = returnData.statItems[i].itemName; + + defaultObject.data = returnData.statItems[i].valueByTime; - // Color Variables - const yellowColor = '#ffe800'; - let borderColor, gridColor, tickColor; + if(i % 3 == 0){ + defaultObject.backgroundColor = config.colors.danger; + defaultObject.pointHoverBackgroundColor = config.colors.danger; + defaultObject.borderColor = config.colors.danger + } + if(i % 3 == 1){ + defaultObject.backgroundColor = config.colors.primary; + defaultObject.pointHoverBackgroundColor = config.colors.primary; + defaultObject.borderColor = config.colors.primary; + } + if(i % 3 == 2){ + defaultObject.backgroundColor = yellowColor; + defaultObject.pointHoverBackgroundColor = yellowColor; + defaultObject.borderColor = yellowColor; + } + + datasets.push(defaultObject); + } + + var lineChart = document.getElementById(cursor); + if (lineChart) { + var lineChartVar = new Chart(lineChart, { + type: 'line', + data: { + labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], + datasets: datasets + }, + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + x: { + grid: { + color: borderColor, + drawBorder: false, + borderColor: borderColor + }, + ticks: { + color: "black" + } + }, + y: { + scaleLabel: { + display: true + }, + min: 0, + max: 400, + ticks: { + color: "black", + stepSize: 100 + }, + grid: { + color: borderColor, + drawBorder: false, + borderColor: borderColor + } + } + }, + plugins: { + tooltip: { + rtl: true, + backgroundColor: config.colors.cardColor, + titleColor: config.colors.headingColor, + bodyColor: config.colors.bodyColor, + borderWidth: 1, + borderColor: borderColor + }, + legend: { + position: 'left', + align: 'stretch', + rtl: true, + labels: { + usePointStyle: true, + padding: 6, + boxWidth: 12, + boxHeight: 30, + color: "black" + } + } + } + } + }); + } + return; + +} - borderColor = '#f0f0f0'; - gridColor = '#f0f0f0'; - tickColor = 'rgba(0, 0, 0, 0.75)'; // x & y axis tick color +//도넛차트 표시 +function fnRenderDoughnut(returnData, cursor){ + var yellowColor = '#ffe800'; + var cyanColor = '#28dac6'; + var orangeLightColor = '#FDAC34'; + + var borderColor = '#f0f0f0'; + var gridColor = '#f0f0f0'; + var tickColor = 'rgba(0, 0, 0, 0.75)'; // x & y axis tick color - const lineChart = document.getElementById('lineChart'); - if (lineChart) { - const lineChartVar = new Chart(lineChart, { - type: 'line', - data: { - labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], - datasets: [ - { - data: [80, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 360, 375], - label: '고정형', - borderColor: config.colors.danger, - tension: 0.5, - pointStyle: 'circle', - backgroundColor: config.colors.danger, - fill: false, - pointRadius: 1, - pointHoverRadius: 5, - pointHoverBorderWidth: 5, - pointBorderColor: 'transparent', - pointHoverBorderColor: config.colors.cardColor, - pointHoverBackgroundColor: config.colors.danger - }, - { - data: [80, 125, 105, 130, 215, 195, 140, 160, 230, 300, 220, 170, 210, 200, 280], - label: '도보', - borderColor: config.colors.primary, - tension: 0.5, - pointStyle: 'circle', - backgroundColor: config.colors.primary, - fill: false, - pointRadius: 1, - pointHoverRadius: 5, - pointHoverBorderWidth: 5, - pointBorderColor: 'transparent', - pointHoverBorderColor: config.colors.cardColor, - pointHoverBackgroundColor: config.colors.primary - }, - { - data: [80, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 140, 130, 180], - label: '민원', - borderColor: yellowColor, - tension: 0.5, - pointStyle: 'circle', - backgroundColor: yellowColor, - fill: false, - pointRadius: 1, - pointHoverRadius: 5, - pointHoverBorderWidth: 5, - pointBorderColor: 'transparent', - pointHoverBorderColor: config.colors.cardColor, - pointHoverBackgroundColor: yellowColor - } - ] - }, - options: { - responsive: true, - maintainAspectRatio: false, - scales: { - x: { - grid: { - color: borderColor, - drawBorder: false, - borderColor: borderColor - }, - ticks: { - color: "black" - } - }, - y: { - scaleLabel: { - display: true - }, - min: 0, - max: 400, - ticks: { - color: "black", - stepSize: 100 - }, - grid: { - color: borderColor, - drawBorder: false, - borderColor: borderColor - } - } - }, - plugins: { - tooltip: { - rtl: true, - backgroundColor: config.colors.cardColor, - titleColor: config.colors.headingColor, - bodyColor: config.colors.bodyColor, - borderWidth: 1, - borderColor: borderColor - }, - legend: { - position: 'left', - align: 'stretch', - rtl: true, - labels: { - usePointStyle: true, - padding: 6, - boxWidth: 12, - boxHeight: 30, - color: "black" - } - } - } - } - }); - } + var cardColor = config.colors.cardColor; + var headingColor = config.colors.headingColor; + var labelColor = config.colors.textMuted; + var legendColor = config.colors.bodyColor; + + $("#"+cursor).siblings("svg").remove(); + $("#"+cursor).show(); - // Color Variables - const cyanColor = '#28dac6', - orangeLightColor = '#FDAC34'; - let cardColor, headingColor, labelColor, legendColor; + var lebels = []; + var datas = []; + var colors = []; + for(var i=0; i < returnData.statItems.length; i++){ + lebels.push(returnData.statItems[i].itemName); + datas.push(returnData.statItems[i].value); + if(i % 3 == 0){ colors.push(cyanColor); } + if(i % 3 == 1){ colors.push(orangeLightColor); } + if(i % 3 == 2){ colors.push(config.colors.primary); } + } - cardColor = config.colors.cardColor; - headingColor = config.colors.headingColor; - labelColor = config.colors.textMuted; - legendColor = config.colors.bodyColor; + + var doughnutChart = document.getElementById(cursor); + if (doughnutChart) { + var doughnutChartVar = new Chart(doughnutChart, { + type: 'doughnut', + data: { + labels: lebels, + datasets: [ + { + data: datas, + backgroundColor: colors, + borderWidth: 1, + pointStyle: 'rectRounded' + } + ] + }, + options: { + responsive: true, + animation: { + duration: 500 + }, + cutout: '68%', + plugins: { + legend: { + display: true, + position : 'left' + }, + tooltip: { + callbacks: { + label: function (context) { + const label = context.label || ''; + const value = context.parsed; + const output = ' ' + label + ' : ' + value + ' %'; + return output; + } + }, + // Updated default tooltip UI + rtl: true, + backgroundColor: cardColor, + titleColor: headingColor, + bodyColor: legendColor, + borderWidth: 1, + borderColor: borderColor + } + } + } + }); + } + return; + + +} - const doughnutChart1 = document.getElementById('doughnutChart1'); - if (doughnutChart1) { - const doughnutChartVar = new Chart(doughnutChart1, { - type: 'doughnut', - data: { - labels: ['단속', '계고', '서손'], - datasets: [ - { - data: [10, 10, 80], - backgroundColor: [cyanColor, orangeLightColor, config.colors.primary], - borderWidth: 0, - pointStyle: 'rectRounded' - } - ] - }, - options: { - responsive: true, - animation: { - duration: 500 - }, - cutout: '68%', - plugins: { - legend: { - display: true, - position : 'left' - }, - tooltip: { - callbacks: { - label: function (context) { - const label = context.label || ''; - const value = context.parsed; - const output = ' ' + label + ' : ' + value + ' %'; - return output; - } - }, - // Updated default tooltip UI - rtl: true, - backgroundColor: cardColor, - titleColor: headingColor, - bodyColor: legendColor, - borderWidth: 1, - borderColor: borderColor - } - } - } - }); - } - const doughnutChart2 = document.getElementById('doughnutChart2'); - if (doughnutChart2) { - const doughnutChartVar = new Chart(doughnutChart2, { - type: 'doughnut', - data: { - labels: ['계고장', '사전통보', '고지서'], - datasets: [ - { - data: [10, 10, 80], - backgroundColor: [cyanColor, orangeLightColor, config.colors.primary], - borderWidth: 0, - pointStyle: 'rectRounded' - } - ] - }, - options: { - responsive: true, - animation: { - duration: 500 - }, - cutout: '68%', - plugins: { - legend: { - display: true, - position : 'left' - }, - tooltip: { - callbacks: { - label: function (context) { - const label = context.label || ''; - const value = context.parsed; - const output = ' ' + label + ' : ' + value + ' %'; - return output; - } - }, - // Updated default tooltip UI - rtl: true, - backgroundColor: cardColor, - titleColor: headingColor, - bodyColor: legendColor, - borderWidth: 1, - borderColor: borderColor - } - } - } - }); - } - const doughnutChart3 = document.getElementById('doughnutChart3'); - if (doughnutChart3) { - const doughnutChartVar = new Chart(doughnutChart3, { - type: 'doughnut', - data: { - labels: ['수용', '미수용', '자진취하'], - datasets: [ - { - data: [10, 10, 80], - backgroundColor: [cyanColor, orangeLightColor, config.colors.primary], - borderWidth: 0, - pointStyle: 'rectRounded' - } - ] - }, - options: { - responsive: true, - animation: { - duration: 500 - }, - cutout: '68%', - plugins: { - legend: { - display: true, - position : 'left' - }, - tooltip: { - callbacks: { - label: function (context) { - const label = context.label || ''; - const value = context.parsed; - const output = ' ' + label + ' : ' + value + ' %'; - return output; - } - }, - // Updated default tooltip UI - rtl: true, - backgroundColor: cardColor, - titleColor: headingColor, - bodyColor: legendColor, - borderWidth: 1, - borderColor: borderColor - } - } - } - }); - } -} \ No newline at end of file diff --git a/src/main/webapp/resources/js/fims/framework/cmm/cmmUtil.js b/src/main/webapp/resources/js/fims/framework/cmm/cmmUtil.js index a0ff2c9c..ea4bc1e7 100644 --- a/src/main/webapp/resources/js/fims/framework/cmm/cmmUtil.js +++ b/src/main/webapp/resources/js/fims/framework/cmm/cmmUtil.js @@ -1,3 +1,8 @@ +//지연 +function sleep(ms) { + return new Promise((r) => setTimeout(r, ms)); +} + /************************************************************************** * validation **************************************************************************/