xit-app
/
fims-web-all
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

대시보드 수정

Browse Source
main
이범준 1 year ago
parent 6d6771976f
commit 19c40e94b9
2 changed files with 318 additions and 296 deletions
Show Stats Download Patch File Download Diff File

609
src/main/webapp/WEB-INF/jsp/include/dashboard.jsp
Unescape Escape View File

@ -5,19 +5,19 @@
<div class="card dashboard-total">
<div class="card-body row">
<div class="col px-4 card-separator d-flex flex-column align-items-center">
<p class="mb-1">2/10</p>
<p class="mb-1" id="card1-1">?/?</p>
<i class="svg-cctv-fixed w-px-30 d-block" title="고정형CCTV"></i>
</div>
<div class="col px-4 card-separator d-flex flex-column align-items-center">
<p class="mb-1">2/3</p>
<p class="mb-1" id="card1-2">?/?</p>
<i class="svg-crackdown-road w-px-30 d-block" title="도보단속"></i>
</div>
<div class="col px-4 card-separator d-flex flex-column align-items-center">
<p class="mb-1">2/3</p>
<p class="mb-1" id="card1-3">?/?</p>
<i class="svg-cctv-drive w-px-30 d-block" title="이동형CCTV"></i>
</div>
<div class="col px-4 d-flex flex-column align-items-center">
<p class="mb-1">10/10</p>
<p class="mb-1" id="card1-4">?/?</p>
<i class="svg-crackdown-minwon w-px-30 d-block" title="민원(즉시단속)"></i>
</div>
</div>
@ -29,11 +29,11 @@
<div class="card dashboard-total">
<div class="card-body row">
<div class="col px-4 card-separator d-flex flex-column align-items-center">
<p class="mb-1">2/10</p>
<p class="mb-1" id="card2-1">?/?</p>
<i class="svg-target-lvy w-px-30 d-block" title="등록대상"></i>
</div>
<div class="col px-4 d-flex flex-column align-items-center">
<p class="mb-1">2/3</p>
<p class="mb-1" id="card2-2">?/?</p>
<i class="svg-target-transfer w-px-30 d-block" title="이첩대상"></i>
</div>
</div>
@ -45,15 +45,15 @@
<div class="card dashboard-total">
<div class="card-body row">
<div class="col px-4 card-separator d-flex flex-column align-items-center">
<p class="mb-1">2/10</p>
<p class="mb-1" id="card3-1">?/?</p>
<i class="svg-sendstat-guide w-px-30 d-block" title="계도장 발송현황"></i>
</div>
<div class="col px-4 card-separator d-flex flex-column align-items-center">
<p class="mb-1">2/3</p>
<p class="mb-1" id="card3-2">?/?</p>
<i class="svg-sendstat-before w-px-30 d-block" title="사전통보 발송현황"></i>
</div>
<div class="col px-4 d-flex flex-column align-items-center">
<p class="mb-1">2/3</p>
<p class="mb-1" id="card3-3">?/?</p>
<i class="svg-sendstat-nop w-px-30 d-block" title="고지서 발송현황"></i>
</div>
</div>
@ -65,15 +65,15 @@
<div class="card dashboard-total">
<div class="card-body row">
<div class="col px-4 card-separator d-flex flex-column align-items-center">
<p class="mb-1">2/10</p>
<p class="mb-1" id="card4-1">?/?</p>
<i class="svg-opn-rcp w-px-30 d-block" title="접수"></i>
</div>
<div class="col px-4 card-separator d-flex flex-column align-items-center">
<p class="mb-1">2/3</p>
<p class="mb-1" id="card4-2">?/?</p>
<i class="svg-opn-decision w-px-30 d-block" title="수용/미수용"></i>
</div>
<div class="col px-4 d-flex flex-column align-items-center">
<p class="mb-1">2/3</p>
<p class="mb-1" id="card4-3">?/?</p>
<i class="svg-opn-selfdrop w-px-30 d-block" title="자진취하"></i>
</div>
</div>
@ -138,13 +138,13 @@
<c:set var="dashboardScript" scope="request">
var falseLineChart = `<svg xmlns="http://www.w3.org/2000/svg"
var falseLineChart = `<svg xmlns="http://www.w3.org/2000/svg" class="skeleton"
height="250" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;">
<path class="skeleton" d="M3 3v17a1 1 0 0 0 1 1h17v-2H5V3H3z"></path>
<path class="skeleton" d="M15.293 14.707a.999.999 0 0 0 1.414 0l5-5-1.414-1.414L16 12.586l-2.293-2.293a.999.999 0 0 0-1.414 0l-5 5 1.414 1.414L13 12.414l2.293 2.293z"></path>
</svg>`;
var falseDoughnutChart = `<svg xmlns="http://www.w3.org/2000/svg"
var falseDoughnutChart = `<svg xmlns="http://www.w3.org/2000/svg" class="skeleton"
height="250" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;">
<path class="skeleton" d="M13 6c2.507.423 4.577 2.493 5 5h4c-.471-4.717-4.283-8.529-9-9v4z"></path>
<path class="skeleton" d="M18 13c-.478 2.833-2.982 4.949-5.949 4.949-3.309 0-6-2.691-6-6C6.051 8.982 8.167 6.478 11 6V2c-5.046.504-8.949 4.773-8.949 9.949 0 5.514 4.486 10 10 10 5.176 0 9.445-3.903 9.949-8.949h-4z"></path>
@ -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
}
}
}
});
}
}
</c:set>

5
src/main/webapp/resources/js/fims/framework/cmm/cmmUtil.js
Unescape Escape View File

@ -1,3 +1,8 @@
//지연
function sleep(ms) {
return new Promise((r) => setTimeout(r, ms));
}
/**************************************************************************
* validation
**************************************************************************/

Write Preview
Loading…
Cancel
Save