276 lines
8.5 KiB
Plaintext
276 lines
8.5 KiB
Plaintext
<!DOCTYPE html>
|
|
<%
|
|
/**
|
|
* @Class Name : MyResouceTotalStat.jsp
|
|
* @Description : SR 처리현황 포틀릿
|
|
* @Modification Information
|
|
* @
|
|
* @ 수정일 수정자 수정내용
|
|
* @ ------- -------- ---------------------------
|
|
* @ 2025.11.13 나혁제 최초 생성
|
|
*
|
|
* @author urp 인프라본부 나혁제
|
|
* @since 2025.11.13
|
|
* @version 1.0
|
|
* @see
|
|
*
|
|
*/
|
|
%>
|
|
<%@ page contentType="text/html; charset=utf-8"%>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
|
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
|
|
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
|
|
|
|
<link rel="stylesheet" href="${ctx}/js/js-calendar/calendar-jquery-ui.css">
|
|
<script type="text/javascript" src="${ctx}/js/jquery-2.2.4.min.js"></script>
|
|
<script type="text/javascript" src="${ctx}/js/js-calendar/jquery.js"></script>
|
|
<script type="text/javascript" src="${ctx}/js/js-calendar/jquery-ui.js"></script>
|
|
<script type="text/javascript" src="${ctx}/js/js-calendar/calendar.js"></script>
|
|
<script type="text/javascript" src="${ctx}/js/js-calendar/jquery.ui.monthpicker.js"></script>
|
|
|
|
<!-- Resources -->
|
|
<script type="text/javascript" src="${ctx}/js/amcharts5/index.js"></script>
|
|
<script type="text/javascript" src="${ctx}/js/amcharts5/xy.js"></script>
|
|
<script type="text/javascript" src="${ctx}/js/amcharts5/percent.js"></script>
|
|
<script type="text/javascript" src="${ctx}/js/amcharts5/themes/Animated.js"></script>
|
|
|
|
<!-- Styles -->
|
|
<style>
|
|
#chartdiv_sr {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javaScript" language="javascript" defer="defer">
|
|
|
|
|
|
/*********************************************************
|
|
* 초기화
|
|
******************************************************** */
|
|
$(document).ready(function ()
|
|
{
|
|
// Month Setting
|
|
$("#dtSearchMon_sr").monthpicker({
|
|
monthNames: ['1월(JAN)', '2월(FEB)', '3월(MAR)', '4월(APR)', '5월(MAY)', '6월(JUN)',
|
|
'7월(JUL)', '8월(AUG)', '9월(SEP)', '10월(OCT)', '11월(NOV)', '12월(DEC)']
|
|
, monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
|
|
//showOn: "button",
|
|
// buttonImage: "../../Images/Goods/calendar.jpg",
|
|
, showButtonPanel: true
|
|
// buttonImageOnly: true,
|
|
, changeYear: false
|
|
, yearRange: 'c-2:c+2'
|
|
, dateFormat: 'yy-mm'
|
|
});
|
|
|
|
am5.addLicense("AM5C123456789"); // 임시적 방법
|
|
|
|
searchMon_change_sr();
|
|
});
|
|
|
|
//----------------------------------------
|
|
// chart 세팅
|
|
// ----------------------------------------
|
|
function amChart_setting_sr(data)
|
|
{
|
|
// 기존 차트 초기화 Start
|
|
var existing = am5.registry.rootElements.filter(function(root) {
|
|
return root.dom && root.dom.id === "chartdiv_sr";
|
|
});
|
|
|
|
existing.forEach(function(root) {
|
|
root.dispose();
|
|
});
|
|
|
|
$("#chartdiv_sr").empty();
|
|
// 기존 차트 초기화 End
|
|
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
var root = am5.Root.new("chartdiv_sr");
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([
|
|
am5themes_Animated.new(root)
|
|
]);
|
|
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/
|
|
var chart = root.container.children.push(am5xy.XYChart.new(root, {
|
|
panX: false,
|
|
panY: false,
|
|
paddingLeft: 0,
|
|
// zoom 기능 하지 않음
|
|
// wheelX: "panX",
|
|
// wheelY: "zoomX",
|
|
wheelX: "none",
|
|
wheelY: "none",
|
|
layout: root.verticalLayout
|
|
}));
|
|
|
|
|
|
// Add legend
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
|
|
var legend = chart.children.push(
|
|
am5.Legend.new(root, {
|
|
centerX: am5.p50,
|
|
x: am5.p50
|
|
})
|
|
);
|
|
|
|
// Create axes
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
|
|
var xRenderer = am5xy.AxisRendererX.new(root, {
|
|
cellStartLocation: 0.1,
|
|
cellEndLocation: 0.9,
|
|
minorGridEnabled: true
|
|
})
|
|
|
|
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
|
|
// categoryField: "year",
|
|
categoryField: "status",
|
|
renderer: xRenderer,
|
|
tooltip: am5.Tooltip.new(root, {})
|
|
}));
|
|
|
|
//
|
|
xRenderer.labels.template.setAll({
|
|
minPositionGap: 0, // 간격이 부족해도 숨기지 않음
|
|
forceShow: true, // 무조건 표시
|
|
oversizedBehavior: "none",
|
|
rotation: 0 // 겹침 방지 위해 회전 (원하면 0으로)
|
|
});
|
|
|
|
// 혹시 label 크기도 줄이면 더 잘 보임
|
|
// xRenderer.labels.template.set("fontSize", 11);
|
|
|
|
xRenderer.set("minGridDistance", 1);
|
|
xRenderer.labels.template.set("forceHidden", false);
|
|
|
|
xRenderer.grid.template.setAll({
|
|
location: 1
|
|
})
|
|
|
|
xAxis.data.setAll(data);
|
|
|
|
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
|
|
renderer: am5xy.AxisRendererY.new(root, {
|
|
strokeOpacity: 0.1
|
|
})
|
|
}));
|
|
|
|
// Add series
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
|
|
function makeSeries(name, fieldName) {
|
|
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
|
|
name: name,
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
valueYField: fieldName,
|
|
// categoryXField: "year"
|
|
categoryXField: "status"
|
|
}));
|
|
|
|
series.columns.template.setAll({
|
|
tooltipText: "{name}, {categoryX}:{valueY}",
|
|
width: am5.percent(90),
|
|
tooltipY: 0,
|
|
strokeOpacity: 0
|
|
});
|
|
|
|
series.data.setAll(data);
|
|
|
|
// Make stuff animate on load
|
|
// https://www.amcharts.com/docs/v5/concepts/animations/
|
|
series.appear();
|
|
|
|
series.bullets.push(function () {
|
|
return am5.Bullet.new(root, {
|
|
locationY: 0,
|
|
sprite: am5.Label.new(root, {
|
|
text: "{valueY}",
|
|
fill: root.interfaceColors.get("alternativeText"),
|
|
centerY: 0,
|
|
centerX: am5.p50,
|
|
populateText: true
|
|
})
|
|
});
|
|
});
|
|
|
|
legend.data.push(series);
|
|
}
|
|
|
|
/*
|
|
makeSeries("Europe", "europe");
|
|
makeSeries("North America", "namerica");
|
|
makeSeries("Asia", "asia");
|
|
makeSeries("Latin America", "lamerica");
|
|
makeSeries("Middle East", "meast");
|
|
makeSeries("Africa", "africa");
|
|
*/
|
|
|
|
makeSeries("미처리" , "cnt0");
|
|
makeSeries("처리완료" , "cnt1");
|
|
|
|
|
|
// Make stuff animate on load
|
|
// https://www.amcharts.com/docs/v5/concepts/animations/
|
|
chart.appear(1000, 100);
|
|
}
|
|
|
|
|
|
//----------------------------------------
|
|
// 조회월 변경시 조회처리
|
|
// ----------------------------------------
|
|
function searchMon_change_sr()
|
|
{
|
|
var inData = {"strSearchMon":$("#dtSearchMon_sr").val() };
|
|
|
|
$.ajax({
|
|
url: '/potl/getIncidentMonStatus.do'
|
|
, type: 'post'
|
|
, data: JSON.stringify(inData)
|
|
, dataType: 'json'
|
|
, contentType: 'application/json'
|
|
, async: false
|
|
, success: function(data)
|
|
{
|
|
amChart_setting_sr(data.resultList);
|
|
|
|
},
|
|
error: function(errorThrown)
|
|
{
|
|
alert("실패");
|
|
}
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
<div class="week_news" style="width:${potlWidth}px; height:${potlHeight}px;">
|
|
<h1>SR 처리현황<a href="javascript:goAddPortletPage('3000000', '3010100');" class="btn_more" title="자산목록">더보기</a>
|
|
<div class="delBtn" style="position:relative; z-index:501;" onclick="DelBtn('${potlId}')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
|
|
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"/>
|
|
</svg>
|
|
|
|
</div>
|
|
</h1>
|
|
|
|
<ul class="news_list">
|
|
<div>
|
|
<input type="text" class="btn_calendar" name="dtSearchMon_sr" id="dtSearchMon_sr"
|
|
maxlength="10" value="${dtCurMonth}" title="조회월" readonly onchange="searchMon_change_sr()" style="width:200px;" />
|
|
</div>
|
|
|
|
<div id="chartdiv_sr"></div>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|