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

대시보드 화면 추가

Browse Source
main
이범준 1 year ago
parent db53dfb2c1
commit 1b95371ed8
5 changed files with 459 additions and 17 deletions
Show Stats Download Patch File Download Diff File

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

@ -0,0 +1,148 @@
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<div class="wrapper-dashboard">
<div class="card dashboard-item-2-1">
<div class="card-body row">
<div class="col px-1 card-separator">
<p class="mb-1">2/10</p>
<i class="svg-cctv-fixed"></i>
<p class="mb-1">고정형CCTV</p>
</div>
<div class="col px-1 card-separator">
<p class="mb-1">2/3</p>
<i class="svg-crackdown-road"></i>
<p class="mb-1">도보단속</p>
</div>
<div class="col px-1 card-separator">
<p class="mb-1">2/3</p>
<i class="svg-cctv-drive"></i>
<p class="mb-1">이동형CCTV</p>
</div>
<div class="col px-1">
<p class="mb-1">10/10</p>
<i class="svg-crackdown-minwon"></i>
<p class="mb-1">민원<br/>(즉시단속)</p>
</div>
</div>
<div class="card-footer ms-auto">
단속관리 바로가기 >
</div>
</div>
<div class="card dashboard-item-2-1">
<div class="card-body row">
<div class="col px-1 card-separator">
<p class="mb-1">2/10</p>
<i class="svg-target-lvy"></i>
<p class="mb-1">등록대상</p>
</div>
<div class="col px-1">
<p class="mb-1">2/3</p>
<i class="svg-target-transfer"></i>
<p class="mb-1">이첩대상</p>
</div>
</div>
<div class="card-footer ms-auto">
부과관리 바로가기 >
</div>
</div>
<div class="card dashboard-item-2-1">
<div class="card-body row">
<div class="col px-1 card-separator">
<p class="mb-1">2/10</p>
<i class="svg-sendstat-guide"></i>
<p class="mb-1">계도장<br/>발송현황</p>
</div>
<div class="col px-1 card-separator">
<p class="mb-1">2/3</p>
<i class="svg-sendstat-before"></i>
<p class="mb-1">사전통보<br/>발송현황</p>
</div>
<div class="col px-1">
<p class="mb-1">2/3</p>
<i class="svg-sendstat-nop"></i>
<p class="mb-1">고지서<br/>발송현황</p>
</div>
</div>
<div class="card-footer ms-auto">
발송관리 바로가기 >
</div>
</div>
<div class="card dashboard-item-2-1">
<div class="card-body row">
<div class="col px-1 card-separator">
<p class="mb-1">2/10</p>
<i class="svg-opn-rcp"></i>
<p class="mb-1">접수</p>
</div>
<div class="col px-1 card-separator">
<p class="mb-1">2/3</p>
<i class="svg-opn-decision"></i>
<p class="mb-1">수용/미수용</p>
</div>
<div class="col px-1">
<p class="mb-1">2/3</p>
<i class="svg-opn-selfdrop"></i>
<p class="mb-1">자진취하</p>
</div>
</div>
<div class="card-footer ms-auto">
의견진술관리 바로가기 >
</div>
</div>
<div class="card dashboard-item-4-3">
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="card-title m-0 me-2">단속 자료 통계(유형별)</h5>
<div>건수(최근 n일)</div>
</div>
<div class="card-body">
<canvas id="lineChart" class="chartjs" data-height="500" style="max-height: 300px;"></canvas>
</div>
<div class="card-footer ms-auto">
통계현황 바로가기 >
</div>
</div>
<div class="card dashboard-item-4-3">
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="card-title m-0 me-2">단속통계</h5>
<div>처리유형별(일별)</div>
</div>
<div class="card-body">
<canvas id="doughnutChart1" class="chartjs" data-height="350" style="max-height: 300px;"></canvas>
</div>
<div class="card-footer ms-auto">
통계현황 바로가기 >
</div>
</div>
<div class="card dashboard-item-4-3">
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="card-title m-0 me-2">발송통계</h5>
<div>발송유형별(일별)</div>
</div>
<div class="card-body">
<canvas id="doughnutChart2" class="chartjs" data-height="350" style="max-height: 300px;"></canvas>
</div>
<div class="card-footer ms-auto">
통계현황 바로가기 >
</div>
</div>
<div class="card dashboard-item-4-3">
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="card-title m-0 me-2">의견진술통계</h5>
<div>처리유형별(일별)</div>
</div>
<div class="card-body">
<canvas id="doughnutChart3" class="chartjs" data-height="350" style="max-height: 300px;"></canvas>
</div>
<div class="card-footer ms-auto">
통계현황 바로가기 >
</div>
</div>
</div>

6
src/main/webapp/WEB-INF/jsp/include/head.jsp
Unescape Escape View File

@ -37,10 +37,10 @@
<link rel="stylesheet" href="<c:url value="/resources/css/fims/framework/common/common.css"/>"/>
<link rel="stylesheet" href="<c:url value="/resources/3rd-party/jquery-ui/1.13.2/themes/redmond/jquery-ui.css"/>" />
<link rel="stylesheet" href="<c:url value="/resources/lib/fims/framework/datepicker/datepicker.css"/>" />
<link rel="stylesheet" href="<c:url value="/resources/3rd-party/tui/grid/4.21.5/tui-grid/tui-grid.css"/>" />
<%-- <link rel="stylesheet" href="<c:url value="/resources/lib/fims/framework/datepicker/datepicker.css"/>" /> --%>
<%-- <link rel="stylesheet" href="<c:url value="/resources/3rd-party/tui/grid/4.21.5/tui-grid/tui-grid.css"/>" /> --%>
<link rel="stylesheet" href="<c:url value="/resources/css/fims/framework/common/xit-tui-grid.css"/>" />
<link rel="stylesheet" href="<c:url value="/resources/3rd-party/tui/grid/4.21.5/tui-pagination/tui-pagination.css"/>" />
<%-- <link rel="stylesheet" href="<c:url value="/resources/3rd-party/tui/grid/4.21.5/tui-pagination/tui-pagination.css"/>" /> --%>

8
src/main/webapp/WEB-INF/jsp/include/tail.jsp
Unescape Escape View File

@ -8,7 +8,7 @@
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
<script src="<c:url value="/resources/3rd-party/sneat/js/template-customizer.js"/>"></script>
<%-- <script src="<c:url value="/resources/3rd-party/sneat/js/template-customizer.js"/>"></script> --%>
<%--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
<script src="../../assets/js/config.js"></script--%>
@ -22,10 +22,16 @@
<script src="<c:url value="/resources/3rd-party/sneat/libs/hammer/hammer.js"/>"></script>
<script src="<c:url value="/resources/3rd-party/sneat/libs/i18n/i18n.js"/>"></script>
<script src="<c:url value="/resources/3rd-party/sneat/js/menu.js"/>"></script>
<script src="<c:url value='/resources/3rd-party/sneat/js/config.js'/>"></script>
<script src="<c:url value='/resources/3rd-party/sneat/libs/chartjs/chartjs.js'/>"></script>
<script src="<c:url value="/resources/js/base/base.js?${ver}"/>"></script>
<script src="<c:url value="/resources/js/base/dataset.js?${ver}"/>"></script>
<script src="<c:url value="/resources/js/base/menu-support.js?${ver}"/>"></script>
<script src="<c:url value="/resources/js/base/menu-support-fims.js?${ver}"/>"></script>
<!-- endbuild -->
<c:set var="functions" scope="request">
wctx.path = "${pageContext.request.contextPath}";

300
src/main/webapp/WEB-INF/jsp/index.jsp
Unescape Escape View File

@ -9,14 +9,29 @@
<jsp:include page="/WEB-INF/jsp/include/top.jsp" />
<div id="tabsForInnerPage" class="nav-align-top mt-3">
<ul class="nav nav-tabs nav-tabs-ifr"></ul>
<ul class="nav nav-tabs nav-tabs-ifr">
<li id="li-dashboard" class="nav-item" role="presentation">
<button type="button" data-bs-toggle="tab" data-bs-target="#tab-dashboard"
class="nav-link nav-link-closeable active" aria-selected="true" role="tab">
대시보드
</button>
</li>
</ul>
</div>
<div id="innerPageTabContents" class="tab-content">
<div id="tab-dashboard" class="tab-pane active show" role="tabpanel">
<div id="divdashboard" title="대시보드">
<div class="content-wrapper">
<div class="container-xxl flex-grow-1 container-p-y">
<jsp:include page="/WEB-INF/jsp/include/dashboard.jsp" />
</div>
</div>
</div>
</div>
</div>
<div id="innerPageTabContents" class="tab-content"></div>
</div>
</div>
</div>
<jsp:include page="/WEB-INF/jsp/include/tail.jsp" />
<script >
@ -25,7 +40,284 @@
$(function(){
${onload}
});
</script>
<script>
// Color Variables
const yellowColor = '#ffe800';
let borderColor, gridColor, tickColor;
borderColor = '#f0f0f0';
gridColor = '#f0f0f0';
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: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140],
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"
}
}
}
}
});
}
</script>
<script>
// Color Variables
const cyanColor = '#28dac6',
orangeLightColor = '#FDAC34';
let cardColor, headingColor, labelColor, legendColor;
cardColor = config.colors.cardColor;
headingColor = config.colors.headingColor;
labelColor = config.colors.textMuted;
legendColor = config.colors.bodyColor;
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
},
tooltip: {
callbacks: {
label: function (context) {
const label = context.labels || '',
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
}
}
}
});
}
</script>
<script>
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
},
tooltip: {
callbacks: {
label: function (context) {
const label = context.labels || '',
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
}
}
}
});
}
</script>
<script>
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
},
tooltip: {
callbacks: {
label: function (context) {
const label = context.labels || '',
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
}
}
}
});
}
</script>
</body>
</html>

12
src/main/webapp/resources/js/base/menu-support-fims.js
Unescape Escape View File

@ -45,25 +45,22 @@ function openMenu(obj, params) {
$(data).trigger("click");
}
});
let innerPageObj = document.getElementById("div"+dataKey);
return innerPageObj;
return;
}
if(OPEN_TAB_CNT === openMax){
alert(`메뉴는 최대 ${openMax -1}까지만 열 수 있습니다.`)
return null;
}
const num_tabs = OPEN_TAB_CNT + 1;
let liEl = '<li id="li-'+ dataKey +'" class="nav-item">';
let linkClass = 'nav-link';
if(dataKey != "main"){
if(dataKey != "dashboard"){
linkClass += ' nav-link-closeable';
}
liEl +='<button type="button" data-bs-toggle="tab" data-bs-target="#tab-'+ dataKey + '" class="' + linkClass + '">' + menuNm + '</button>';
if(dataKey != "main"){
if(dataKey != "dashboard"){
liEl += '<button type="button" title="닫기" class="btn btn-close" onclick="closeTab('+ dataKey + ')"></button>'
}
liEl += '</li>';
@ -78,7 +75,6 @@ function openMenu(obj, params) {
let dynamicPage = document.createElement("div");
dynamicPage.setAttribute("id","div"+dataKey);
dynamicPage.setAttribute("name","div"+dataKey);
dynamicPage.setAttribute("title",menuNm);
// .attr("frameborder" , "0")

Write Preview
Loading…
Cancel
Save