File name
Commit message
Commit date
16 hours ago
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<%--
Class Name : selectSiteIpList.jsp
Description : selectSiteIpList 화면
Modification Information
수정일 수정자 수정내용
------- -------- ---------------------------
2009.02.01 lee.m.j 최초 생성
2011.08.31 JJY 경량환경 버전 생성
author : 공통서비스 개발팀 lee.m.j
since : 2009.02.01
--%>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page import="kcc.com.cmm.LoginVO"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="ko" >
<title>로그인정책 목록조회</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<script type="text/javaScript" language="javascript" defer="defer">
function fn_select(pageNo){
linkPage(1);
}
function fn_insert() {
document.modiForm.action = "<c:url value='/sym/site/siteIpModifyView.do'/>";
document.modiForm.submit();
}
/* 수정 */
function fn_modify(comId){
var modiForm = document.modiForm;
modiForm.comId.value = comId;
modiForm.pageType.value = "Modify";
modiForm.action = "<c:url value='/sym/site/siteIpModifyView.do'/>";
modiForm.submit();
}
function linkPage(pageNo){
var searchForm = document.searchForm ;
searchForm.pageIndex.value = pageNo ;
searchForm.searchKeyword.value = $('#searchKeyword').val();
searchForm.searchCondition.value = $('#searchCondition').val();
if($('#searchConditionSite').length != 0){
searchForm.searchConditionSite.value = $('#searchConditionSite').val();
}
if($('#searchConditionUse').length != 0){
searchForm.searchConditionUse.value = $('#searchConditionUse').val();
}
searchForm.action = "<c:url value='/sym/site/selectSiteIpList.do'/>";
searchForm.submit();
}
/* 체크된 목록 삭제 */
function fn_delete(){
if($("input[name=del]:checked").length == 0){
alert("선택된 항목이 없습니다.");
return;
}
if (confirm("삭제하시겠습니까?")){
frm = document.listForm;
frm.action = "<c:url value='/sym/site/deleteSiteIp.do' />";
frm.submit();
}
}
function fnCheckAll(){
if( $("#checkAll").is(':checked') ){
$("input[name=del]").prop("checked", true);
}else{
$("input[name=del]").prop("checked", false);
}
}
</script>
</head>
<body>
<noscript>자바스크립트를 지원하지 않는 브라우저에서는 일부 기능을 사용하실 수 없습니다.</noscript>
<div class="contWrap">
<div class="pageTitle">
<div class="pageIcon"><img src="/pb/img/pageTitIcon4.png" alt=""></div>
<h2 class="titType1 c_222222 fwBold">아이피관리</h2>
<p class="tType6 c_999999">아이피 구성 및 사용량, 할당 현황을 알아볼 수 있습니다.</p>
</div>
<div class="pageNav">
<img src="/pb/img/common/homeIcon.png" alt="홈이미지"> > <p class="topDepth">아이피관리</p> > <p class="subDepth">아이피현황</p>
</div>
<div class="pageCont ipStatus">
<div class=contBox>
<span class="tbTit">전체 IP 구성도</span>
<div class="boxWrap">
<div class="chartArea">
<img src="/pb/img/orgChart1.png" alt=""><!-- 차트 추가 후 이미지 삭제 -->
</div>
</div>
</div>
<div class="contBox lastBox">
<span class="tbTit">사용량 현황</span>
<div class="boxWrap">
<div class="chartArea">
<canvas id="myChart" width="283px" height="283px"></canvas>
</div>
<%-- <canvas id="myChart1" width="283px" height="283px"></canvas> --%>
<script>
/* new Chart(
document.getElementById("myChart1")
,{
"type":"doughnut"
, "data":{ "labels":["사용", "미사용"]
,"datasets":[
{"label":"My First Dataset"
,"data":['<c:out value='${useSumCnt[0].useSumCnt}' />', '<c:out value='${useSumCnt[1].useSumCnt}' />']
,"backgroundColor":["rgb(109, 129, 245)","rgb(28, 202, 184)"]
}
]
}
}); */
Chart.defaults.doughnutLabels = Chart.helpers.clone(Chart.defaults.doughnut);
var helpers = Chart.helpers;
var defaults = Chart.defaults;
Chart.controllers.doughnutLabels = Chart.controllers.doughnut.extend({
updateElement: function(arc, index, reset) {
var _this = this;
var chart = _this.chart,
chartArea = chart.chartArea,
opts = chart.options,
animationOpts = opts.animation,
arcOpts = opts.elements.arc,
centerX = (chartArea.left + chartArea.right) / 2,
centerY = (chartArea.top + chartArea.bottom) / 2,
startAngle = opts.rotation, // non reset case handled later
endAngle = opts.rotation, // non reset case handled later
dataset = _this.getDataset(),
circumference = reset && animationOpts.animateRotate ? 0 : arc.hidden ? 0 : _this.calculateCircumference(dataset.data[index]) * (opts.circumference / (2.0 * Math.PI)),
innerRadius = reset && animationOpts.animateScale ? 0 : _this.innerRadius,
outerRadius = reset && animationOpts.animateScale ? 0 : _this.outerRadius,
custom = arc.custom || {},
valueAtIndexOrDefault = helpers.getValueAtIndexOrDefault;
helpers.extend(arc, {
// Utility
_datasetIndex: _this.index,
_index: index,
// Desired view properties
_model: {
x: centerX + chart.offsetX,
y: centerY + chart.offsetY,
startAngle: startAngle,
endAngle: endAngle,
circumference: circumference,
outerRadius: outerRadius,
innerRadius: innerRadius,
label: valueAtIndexOrDefault(dataset.label, index, chart.data.labels[index])
},
draw: function () {
var ctx = this._chart.ctx,
vm = this._view,
sA = vm.startAngle,
eA = vm.endAngle,
opts = this._chart.config.options;
var labelPos = this.tooltipPosition();
var segmentLabel = vm.circumference / opts.circumference * 100;
ctx.beginPath();
ctx.arc(vm.x, vm.y, vm.outerRadius, sA, eA);
ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true);
ctx.closePath();
ctx.strokeStyle = vm.borderColor;
ctx.lineWidth = vm.borderWidth;
ctx.fillStyle = vm.backgroundColor;
ctx.fill();
ctx.lineJoin = 'bevel';
if (vm.borderWidth) {
ctx.stroke();
}
if (vm.circumference > 0.15) { // Trying to hide label when it doesn't fit in segment
ctx.beginPath();
ctx.font = helpers.fontString(opts.defaultFontSize, opts.defaultFontStyle, opts.defaultFontFamily);
ctx.fillStyle = "#fff";
ctx.textBaseline = "top";
ctx.textAlign = "center";
// Round percentage in a way that it always adds up to 100%
ctx.fillText(segmentLabel.toFixed(0) + "%", labelPos.x, labelPos.y);
}
}
});
var model = arc._model;
model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : valueAtIndexOrDefault(dataset.backgroundColor, index, arcOpts.backgroundColor);
model.hoverBackgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : valueAtIndexOrDefault(dataset.hoverBackgroundColor, index, arcOpts.hoverBackgroundColor);
model.borderWidth = custom.borderWidth ? custom.borderWidth : valueAtIndexOrDefault(dataset.borderWidth, index, arcOpts.borderWidth);
model.borderColor = custom.borderColor ? custom.borderColor : valueAtIndexOrDefault(dataset.borderColor, index, arcOpts.borderColor);
// Set correct angles if not resetting
if (!reset || !animationOpts.animateRotate) {
if (index === 0) {
model.startAngle = opts.rotation;
} else {
model.startAngle = _this.getMeta().data[index - 1]._model.endAngle;
}
model.endAngle = model.startAngle + model.circumference;
}
arc.pivot();
}
});
var config = {
type: 'doughnutLabels',
data: {
datasets: [{
data: [
"<c:out value='${useSumCnt[0].useSumCnt}' />",
"<c:out value='${useSumCnt[1].useSumCnt}' />"
],
backgroundColor: [
"rgb(109, 129, 245)",
"rgb(28, 202, 184)"
],
}],
labels: [
"사용",
"미사용"
]
},
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
</script>
<div class="ip_cont_2_cont_list">
<ul>
<li>
<div class="ip_list_bg"></div>사용
</li>
<li>
<div class="ip_list_bg"></div>미사용
</li>
</ul>
</div>
</div>
</div>
<div class="tbWrap">
<span class="tbTit">부서별 IP 할당 현황</span>
<div class="tableWrap">
<table class="tbType3">
<colgroup>
<col style="width: 12%">
<col style="width: 12%">
<col style="width: 12%">
<col style="width: 12%">
<col style="width: 12%">
<col style="width: 12%">
<col style="width: 12%">
<col style="width: 12%">
</colgroup>
<thead>
<tr>
<th>사용여부</th>
<c:forEach var="codeResult" items="${teamList}" varStatus="status">
<th><c:out value='${codeResult.codeNm}' /></th>
</c:forEach>
<th>합계</th>
</tr>
</thead>
<tbody>
<tr>
<th><span class="chartBg"></span>사용</th>
<c:forEach var="codeResult" items="${teamList}" varStatus="status">
<c:forEach var="basicResult" items="${basicUseSumCnt}" varStatus="status">
<c:if test="${codeResult.codeId eq basicResult.team
and codeResult.code eq basicResult.department
and 'Y' eq basicResult.useYn }">
<td><c:out value='${basicResult.useSumCnt}' /></td>
</c:if>
</c:forEach>
</c:forEach>
<td>
<span class="chartColor"><c:out value='${useSumCnt[0].useSumCnt}' />
<c:if test="${useSumCnt[0].useSumCnt == null}"><c:out value="0" /></c:if>
</span>
</td>
</tr>
<tr>
<th><span class="chartBg"></span>미사용</th>
<c:forEach var="codeResult" items="${teamList}" varStatus="status">
<c:forEach var="basicResult" items="${basicUseSumCnt}" varStatus="status">
<c:if test="${codeResult.codeId eq basicResult.team
and codeResult.code eq basicResult.department
and 'N' eq basicResult.useYn }">
<td><c:out value='${basicResult.useSumCnt}' /></td>
</c:if>
</c:forEach>
</c:forEach>
<td>
<span class="chartColor"><c:out value='${useSumCnt[1].useSumCnt}' />
<c:if test="${useSumCnt[1].useSumCnt == null}"><c:out value="0" /></c:if>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>