237 lines
5.5 KiB
Plaintext
237 lines
5.5 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<%@ page import="com.pms.common.utils.*"%>
|
|
<%@ page import="java.util.*" %>
|
|
<%@include file= "/init.jsp" %>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<title><%=Constants.SYSTEM_NAME%></title>
|
|
<script>
|
|
$(document).ready(function(){
|
|
|
|
Chart1("chart1", null);
|
|
Chart2("chart2", null);
|
|
});
|
|
</script>
|
|
<script>
|
|
//양산이관 pie
|
|
function Chart1(divId, resultMap){
|
|
$('#'+divId).highcharts({
|
|
colors: ['#558ed5', '#ff6d6d'],
|
|
chart: {
|
|
plotBackgroundColor: null,
|
|
plotBorderWidth: null,
|
|
plotShadow: false,
|
|
type: 'pie'
|
|
},
|
|
title: {
|
|
text: 'IK-CAR 제품별 이관현황'
|
|
},
|
|
tooltip: {
|
|
pointFormat: '{series.name}: <b>{point.percentage}%</b>'
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
allowPointSelect: true,
|
|
cursor: 'pointer',
|
|
dataLabels: {
|
|
enabled: true,
|
|
format: '<b>{point.name}</b><br>{point.percentage} %',
|
|
distance: -50,
|
|
filter: {
|
|
property: 'percentage',
|
|
operator: '>',
|
|
value: 4
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Share',
|
|
data: [
|
|
{ name: '이관완료', y: 75 },
|
|
{ name: '이관진행중', y: 25 }
|
|
]
|
|
}]
|
|
});
|
|
|
|
|
|
}
|
|
function Chart2(divId, resultMap){
|
|
// 양산이관 column
|
|
$('#'+divId).highcharts({
|
|
colors: ['#558ed5', '#cc7b38','#aabad7','#15aaa9'],
|
|
chart: {
|
|
type: 'column'
|
|
},
|
|
title: {
|
|
text: 'IK-CAR 항목별 이관율'
|
|
},
|
|
subtitle: {
|
|
text: ''
|
|
},
|
|
xAxis: {
|
|
type: 'category'
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: ''
|
|
},
|
|
min:0,
|
|
max:100
|
|
|
|
},
|
|
legend: {
|
|
enabled: false
|
|
},
|
|
plotOptions: {
|
|
series: {
|
|
borderWidth: 0,
|
|
dataLabels: {
|
|
enabled: true,
|
|
format: '{point.y:.1f}%'
|
|
}
|
|
}
|
|
},
|
|
|
|
tooltip: {
|
|
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
|
|
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
|
|
},
|
|
|
|
"series": [
|
|
{
|
|
"name": "이관율",
|
|
"colorByPoint": true,
|
|
"data": [
|
|
{
|
|
"name": "금형이관",
|
|
"y": 88.3
|
|
},
|
|
{
|
|
"name": "설비이관",
|
|
"y": 100
|
|
},
|
|
{
|
|
"name": "품질이관",
|
|
"y": 85
|
|
},
|
|
{
|
|
"name": "문서이관",
|
|
"y": 100
|
|
}
|
|
]
|
|
}
|
|
]
|
|
});
|
|
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<form name="form1" id="form1" action="" method="post">
|
|
<div style="min-width:1500px;">
|
|
<div class="plm_menu_name">
|
|
<h2>
|
|
<span>양산이관 관리 현황</span>
|
|
</h2>
|
|
</div>
|
|
<div class="contents_page_basic_margin">
|
|
<div class="fourblock" style="width:35%; margin-bottom:30px;">
|
|
<div id="chart1" style="width:85%; height:300px; margin: 30px auto 0;"></div>
|
|
</div>
|
|
<div class="fourblock" style="width:55%; margin-bottom:30px;">
|
|
<div id="chart2" style="width:65%; height:300px; margin: 30px auto;"></div>
|
|
</div>
|
|
<div class="fourblock" style="width:35%; border:0;">
|
|
<div class="plm_table_wrap">
|
|
<div style="overflow-y:scroll;">
|
|
<table class="plm_table" style="width:100%;">
|
|
<thead>
|
|
<tr class="plm_thead">
|
|
<td>제품</td>
|
|
<td>이관여부</td>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
<div class="plm_scroll_table" style="width:100%; height:350px;">
|
|
<table class="plm_table">
|
|
<tbody id="">
|
|
<tr>
|
|
<td>DASH</td>
|
|
<td>진행중</td>
|
|
</tr>
|
|
<tr>
|
|
<td>COWL</td>
|
|
<td>이관완료</td>
|
|
</tr>
|
|
<tr>
|
|
<td>FR PLR</td>
|
|
<td>이관완료</td>
|
|
</tr>
|
|
<tr>
|
|
<td>CTR FLR</td>
|
|
<td>이관완료</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="fourblock" style="width:55%; border:0;">
|
|
<div class="plm_table_wrap">
|
|
<div style="overflow-y:scroll;">
|
|
<table class="plm_table" style="width:100%;">
|
|
<thead>
|
|
<tr class="plm_thead">
|
|
<td></td>
|
|
<td>금형이관율</td>
|
|
<td>설비이관율</td>
|
|
<td>품질이관율</td>
|
|
<td>문서이관율</td>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
<div class="plm_scroll_table" style="width:100%; height:350px;">
|
|
<table class="plm_table">
|
|
<tbody id="">
|
|
<tr style="background:#eee;">
|
|
<td>계</td>
|
|
<td>88.3%</td>
|
|
<td>100%</td>
|
|
<td>85%</td>
|
|
<td>100%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>DASH</td>
|
|
<td>100%</td>
|
|
<td>100%</td>
|
|
<td>85%</td>
|
|
<td>100%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>COWL</td>
|
|
<td>80%</td>
|
|
<td>100%</td>
|
|
<td>90%</td>
|
|
<td>100%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>CTR FLR</td>
|
|
<td>85%</td>
|
|
<td>100%</td>
|
|
<td>80%</td>
|
|
<td>100%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</body>
|
|
</html> |