ERP-node/WebContent/WEB-INF/view/project/projectStatusDashBoard.jsp

448 lines
13 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 src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['TM', 'JS', 'LX2', 'SU2', 'PD']
},
yAxis: {
min: 0,
title: {
text: 'Task 진행건수'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'numeric'
}
},
series: [{
name: '전체',
data: [5, 3, 4, 7, 2]
}, {
name: '완료',
data: [2, 2, 3, 2, 1]
}, {
name: '미결',
data: [3, 4, 4, 2, 5]
}]
});
Highcharts.chart('chart22', {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['TM', 'JS', 'LX2', 'SU2', 'PD']
},
yAxis: {
min: 0,
title: {
text: '문제점 발생건수'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'numeric'
}
},
series: [{
name: '발생',
data: [5, 3, 4, 7, 2]
}, {
name: '조치',
data: [2, 2, 3, 2, 1]
}, {
name: '미결',
data: [3, 4, 4, 2, 5]
}]
});
Highcharts.chart('chart33', {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['설계팀', '선행공법팀', '기술영업팀', '개발팀', '생산기술팀', '신차품질팀', '전략구매팀', '부품구매팀', '보전팀','생산팀','생산관리팀','양산품질팀','원가팀','원자재관리팀']
},
yAxis: {
min: 0,
title: {
text: 'Task 건수'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'numeric'
}
},
series: [{
name: '전체',
data: [5, 3, 4, 7, 2, 6, 7, 8, 10]
}, {
name: '완료',
data: [2, 2, 3, 2, 1, 2, 3, 6, 7]
}, {
name: '미결',
data: [3, 4, 4, 2, 5, 2, 3, 5, 6]
}]
});
Highcharts.chart('chart44', {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['QTR', 'DASH', 'SIDE', 'HOOD', 'C/LAMP', 'HW', 'P/TRAY', 'RR EXTRN', 'CTR FLR']
},
yAxis: {
min: 0,
title: {
text: '이슈 발생건수'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'numeric'
}
},
series: [{
name: '전체',
data: [5, 3, 4, 7, 2, 6, 7, 8, 10]
}, {
name: '미협의',
data: [2, 2, 3, 2, 1, 2, 3, 6, 7]
}, {
name: '협의 완료',
data: [3, 4, 4, 2, 5, 2, 3, 5, 6]
}]
});
});
</script>
</head>
<body style="background:#e9ecf2;">
<form name="form1" action="" method="post">
<div id="">
<div class="plm_menu_name">
<h2>
<span>프로젝트 진척관리</span>
</h2>
</div>
<div class="gate_status_chart_top">
<table class="plm_table gate_status_table" style="width:99%;">
<colgroup>
<col width="2%">
<col width="4%">
<col width="4%">
<col width="6%">
<col width="6%">
<col width="6%">
<col width="6%">
<col width="6%">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
</colgroup>
<thead>
<tr class="plm_thead">
<td rowspan="2">No</td>
<td rowspan="2">고객사</td>
<td rowspan="2">차종</td>
<td rowspan="2">연간생산수량</td>
<td rowspan="2">생산공장</td>
<td rowspan="2">SOP</td>
<td rowspan="2">수주제품</td>
<td rowspan="2">단계(Gate)</td>
<td colspan="2">프로젝트 관리자</td>
<td colspan="5">Task진행현황</td>
<td colspan="4">문제점 발생현황</td>
<td rowspan="2">이슈현황</td>
</tr>
<tr>
<td>팀명</td>
<td>담당자</td>
<td>진행율(%)</td>
<td>전체</td>
<td>완료</td>
<td>미결</td>
<td>예정</td>
<td>조치율(%)</td>
<td>발생</td>
<td>조치</td>
<td>미결</td>
</tr>
</thead>
</table>
<div class="plm_scroll_table" style="width:100%;">
<table class="plm_table gate_status_table">
<colgroup>
<col width="2%">
<col width="4%">
<col width="4%">
<col width="6%">
<col width="6%">
<col width="6%">
<col width="6%">
<col width="6%">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
<col width="*">
</colgroup>
<tbody>
<tr>
<td>1</td>
<td>HMC</td>
<td><a href="#">TM</a></td>
<td class="align_r">82,000&nbsp;&nbsp;</td>
<td>울산 4공장</td>
<td><a>2018-10-31</a></td>
<td><a href="#">5</a></td>
<td><a href="#" class="gateListBtn">Gate 4</a></td>
<td></td>
<td></td>
<td>72%</td>
<td><a href="#">116</a></td>
<td><a href="#">83</a></td>
<td><a href="#">2</a></td>
<td><a href="#"></a></td>
<td>70%</td>
<td><a href="#">30</a></td>
<td><a href="#">17</a></td>
<td><a href="#">13</a></td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>HMC</td>
<td><a href="#">JS</a></td>
<td class="align_r">300,000&nbsp;&nbsp;</td>
<td>울산 5공장</td>
<td><a href="#">2019-03-31</a></td>
<td><a href="#">7</a></td>
<td><a href="#" class="gateListBtn">Gate 3</a></td>
<td></td>
<td></td>
<td>65%</td>
<td><a href="#">116</a></td>
<td><a href="#">83</a></td>
<td><a href="#">2</a></td>
<td><a href="#"></a></td>
<td>70%</td>
<td><a href="#">30</a></td>
<td><a href="#">17</a></td>
<td><a href="#">13</a></td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>HMC</td>
<td><a href="#">LX2</a></td>
<td class="align_r">165,000&nbsp;&nbsp;</td>
<td>울산 5공장</td>
<td><a href="#">2019-10-31</a></td>
<td><a href="#">4</a></td>
<td><a href="#" class="gateListBtn">Gate 2</a></td>
<td></td>
<td></td>
<td>40%</td>
<td><a href="#">116</a></td>
<td><a href="#">83</a></td>
<td><a href="#">2</a></td>
<td><a href="#"></a></td>
<td>70%</td>
<td><a href="#">30</a></td>
<td><a href="#">17</a></td>
<td><a href="#">13</a></td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>BHMC</td>
<td><a href="#">SU2</a></td>
<td class="align_r">200,000&nbsp;&nbsp;</td>
<td>울산 3공장</td>
<td><a href="#">2020-05-31</a></td>
<td><a href="#">6</a></td>
<td><a href="#" class="gateListBtn">Gate 1</a></td>
<td></td>
<td></td>
<td>15%</td>
<td><a href="#">116</a></td>
<td><a href="#">83 </a></td>
<td><a href="#">2 </a></td>
<td><a href="#"></a></td>
<td>70%</td>
<td><a href="#">30</a></td>
<td><a href="#">17</a></td>
<td><a href="#">13</a></td>
<td>5</td>
</tr>
<tr>
<td>5</td>
<td>HMC</td>
<td><a href="#">PD</a></td>
<td class="align_r">200,000&nbsp;&nbsp;</td>
<td>울산 3공장</td>
<td><a href="#">2020-07-31</a></td>
<td><a href="#">5</a></td>
<td><a href="#" class="gateListBtn">Gate 1</a></td>
<td></td>
<td></td>
<td>10%</td>
<td><a href="#">116</a></td>
<td><a href="#">83</a></td>
<td><a href="#">2</a></td>
<td><a href="#"></a></td>
<td>70%</td>
<td><a href="#">30</a></td>
<td><a href="#">17</a></td>
<td><a href="#">13</a></td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</div>
<section class="contents_page_basic_margin">
<div style="width:100%; margin: 0 auto;">
<div class="gate_status_chart">
<div class="title_div">차종별 Task 진행현황</div>
<div class="chart_div">
<div id="container" style="width:80%; height:250px; margin:0 auto;"></div>
</div>
</div>
<div class="gate_status_chart">
<div class="title_div">문제점 발생현황</div>
<div class="chart_div">
<div id="chart22" style="width:80%; height:250px; margin:0 auto;"></div>
</div>
</div>
<div class="gate_status_chart" style="margin-top:20px;">
<div class="title_div">팀별 Task 진행현황</div>
<div class="chart_div">
<div id="chart33" style=" height:250px; margin:0 auto;"></div>
</div>
</div>
<div class="gate_status_chart" style="margin-top:20px;">
<div class="title_div">이슈 발생현황</div>
<div class="chart_div">
<div style="width:90%; margin: 0 auto; border-bottom:2px solid #ccc;">
<table class="plm_table gate_status_table" style="width:98%;">
<thead>
<tr class="plm_thead">
<td>차종</td>
<td>발생건수</td>
<td>완료건수</td>
<td>진행건수</td>
</tr>
</thead>
<tr></tr>
</table>
<div class="plm_scroll_table" style="width:100%; height:230px;">
<table class="plm_table gate_status_table">
<colgroup>
<col width="25%">
<col width="*">
<col width="*">
<col width="*">
</colgroup>
<tr>
<td>TM</td>
<td>100</td>
<td>92</td>
<td>8</td>
</tr>
<tr>
<td>JS</td>
<td>50</td>
<td>35</td>
<td>15</td>
</tr>
<tr>
<td>LX2</td>
<td>25</td>
<td>20</td>
<td>5</td>
</tr>
<tr>
<td>SU2</td>
<td>32</td>
<td>30</td>
<td>2</td>
</tr>
<tr>
<td>PD</td>
<td>15</td>
<td>8</td>
<td>7</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</section>
</div>
</form>
</body>
</html>