ERP-node/WebContent/WEB-INF/view/transfer/facilitiesTransferList.jsp

695 lines
20 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(){
//고객사 목록 조회
fn_setOEMList();
//고객사별 차종 목록 조회
$("#search_oemObjId").change(function(){
var oemObjId = $(this).val();
fn_setCarTypeList(oemObjId);
});
//등록팝업
$(".facilitiesTransferEnrollBtn").click(function(){
window.open("/transfer/facilitiesTransferFormPopup.do", "", "width=500, height=440");
});
//설비이관 관리리스트 선택 시 팝업
$(".btnFacilitiesTransferPartDetailPopup").click(function(){
var objId = $(this).attr("data-OBJID");
window.open("/transfer/facilitiesTransferTypeOfCarPopup.do?objId="+objId, "", "width=1700, height=885");
});
//인수자의견 팝업
$(".facilitiesOpinionBtn").click(function(){
window.open("/transfer/facilitiesOinionFormPopup.do", "", "width=1000, height=455");
});
//수주품목 팝업
$(".btnProdCnt").click(function(){
var objId = $(this).attr("data-OBJID");
window.open("/project/projectOrderItemListPopup.do?objId="+objId, "", "width=620, height=342");
});
//설비이관 관리리스트의 차종버튼 클릭시
$(".btnRadio").click(function(){
var objId = $(this).val();
var oemObjId = $(this).attr("data-OEM_OBJID");
var carObjId = $(this).attr("data-CAR_OBJID");
fn_getFacilitiesAssyPartList(carObjId);
fn_getFacilityTransferStatusPieChart(objId);
fn_getFacilityTransferProductCompleteRatioColumnChart(objId);
});
//PART 상세
$(document).on("click", ".btnDetailPart", function(){
var partNo = $(this).attr("data-PART_NO");
fnc_openPartDetailPopup("${connectUserId}", partNo);
});
});
</script>
<script>
//첨부파일 미리보기
function openImagePopUp(url){
var img=new Image();
img.src=url;
var img_width=img.width;
var img_height=img.height;
var win_width=img.width+25;
var height=img.height+30;
window.open(url,"facilitiesTransferTypeImgPopUp","width="+img_width+",height="+height+", menubars=no, scrollbars=yes'");
}
//oem 목록 조회
function fn_setOEMList(){
$.ajax({
url:"/common/getOEMList.do",
type:"POST",
data:{"isJson":true},
dataType:"json",
success:function(data){
var appendCode = "";
$.each(data, function(i){
appendCode += "<option value='"+data[i].OBJID+"'>"+data[i].OEM_NAME+"("+data[i].OEM_CODE+")</option>";
});
$("#search_oemObjId").append(appendCode);
var paramValue = "${param.search_oemObjId}";
if(paramValue != ""){
$("#search_oemObjId > option[value="+paramValue+"]").attr("selected", "true");
$("#search_oemObjId").trigger("change");
}
},
error: function(jqxhr, status, error){
}
});
}
//car 목록 조회
function fn_setCarTypeList(oemObjId){
if(oemObjId !=""){
$.ajax({
url:"/common/getCarTypeList.do",
type:"POST",
data:{"isJson":true, "search_oemObjId":oemObjId},
dataType:"json",
success:function(data){
var appendCode = "";
appendCode += "<option value=''>선택</option>";
$.each(data, function(i){
appendCode += "<option value='"+data[i].OBJID+"'>"+data[i].CAR_CODE+"("+data[i].CAR_NAME+")</option>";
});
$("#search_carObjId").children().remove();
$("#search_carObjId").append(appendCode);
var paramValue = "${param.search_carObjId}";
if(paramValue != ""){
$("#search_carObjId > option[value="+paramValue+"]").attr("selected", "true");
}
},
error: function(jqxhr, status, error){
}
});
}else{
$("#search_carObjId").children().remove();
$("#search_carObjId").append("<option value=''>선택</option>");
}
}
//설비 차종별 Assy Part 목록 조회
function fn_getFacilitiesAssyPartList(carObjId){
$.ajax({
url:"/transfer/getTransferFacilitiesAssyList_byCar.do",
type:"POST",
data:{"carObjId":carObjId},
dataType:"json",
success:function(data){
var appendCode = "";
if(data.length > 0){
$.each(data, function(i){
appendCode += "<tr>";
appendCode += "<td>"+data[i].PROD_GROUP_NAME+"</td>";
appendCode += "<td><a href='#' class='btnDetailPart' data-PART_NO='"+data[i].PART_NO+"'>"+data[i].PART_NO+"</a></td>";
appendCode += "<td><a href='#' class='btnDetailPart' data-PART_NO='"+data[i].PART_NO+"'>"+data[i].PART_NAME+"</a></td>";
/*형상 START*/
appendCode += "<td>";
var fileName = fnc_checkNull(data[i].PART_IMAGE_REAL_FILE_NAME);
if(fileName == null || fileName == ""){
appendCode += "<div class='no_img_icon'></div>"
}else{
var srcLocation = encodeURI("/common/viewImage.do?realFileName="+fnc_checkNull(data[i].PART_IMAGE_REAL_FILE_NAME)+"&savedFileName="+fnc_checkNull(data[i].PART_IMAGE_SAVED_FILE_NAME)+"&attDir="+fnc_checkNull(data[i].PART_IMAGE_FILE_PATH));
appendCode += "<img src='"+srcLocation+"' height='68px' width='auto' onclick='openImagePopUp(this.src)' style='cursor:pointer;'/>";
}
appendCode += "</td>";
/*형상 END*/
/*조치율 START*/
var problemAllCnt = fnc_checkNullDefaultValue(data[i].PROBLEM_ALL_CNT,0);
var problemCompleteCnt = fnc_checkNullDefaultValue(data[i].PROBLEM_COMPLETE_CNT,0);
var problemRatio = 0;
if(isNaN(eval(problemCompleteCnt / problemAllCnt) * 100)) problemRatio = 0;
var docAllCnt = 0;
var docCompleteCnt = 0;
var docRatio = 0;
var totalRatio = (problemRatio + docRatio) / 2;
/*조치율 END*/
appendCode += "<td>"+totalRatio+"%</td>";
appendCode += "<td>"+problemRatio+"%</td>";
appendCode += "<td>"+docRatio+"%</td>";
appendCode += "</tr>";
});
$("#assyPartList").empty();
$("#assyPartList").append(appendCode);
}else{
appendCode += "<tr>";
appendCode += " <td colspan='7'>조회된 내용이 없습니다.</td>";
appendCode += "</tr>";
$("#assyPartList").empty();
$("#assyPartList").append(appendCode);
}
},
error: function(jqxhr, status, error){
}
});
}
function fn_refresh(){
Swal.fire(document.location.href);
document.location.href = document.location.href;
}
//설비이관 차종별 상태현황 정보를 가져온다.
function fn_getFacilityTransferStatusPieChart(objId){
$("#chart1").empty();
var prodArr = [];
if(objId != ""){
$.ajax({
url:"/dashboard/getFacilityTransferStatusPieChart.do",
type:"POST",
data:{"objId":objId},
dataType:"json",
async:false,
success:function(data){
if(data != null){
prodArr = fn_getFacilityTransferProductStatusDrilldownChart(objId);
fn_drawChart1("chart1",data,prodArr);
}else{
var noData = "<div id=\"chart3MessageArea\" style=\"width:100%;height:50%;padding-top:10%;text-align:center;\">조회된 정보가 없습니다.</div>";
$("#chart1").append(noData);
}
},
error: function(jqxhr, status, error){
}
});
}else{
var noData = "<div id=\"chart3MessageArea\" style=\"width:100%;height:50%;padding-top:10%;text-align:center;\">조회된 정보가 없습니다.</div>";
$("#chart1").append(noData);
$("#chart2").append(noData);
}
}
//설비이관 차종별 상태현황 정보를 가져온다.
function fn_getFacilityTransferProductStatusDrilldownChart(objId){
var prodArr = [];
if(objId != ""){
$.ajax({
url:"/dashboard/getFacilityTransferProductStatusDrillDownChart.do",
type:"POST",
data:{"objId":objId},
dataType:"json",
async:false,
success:function(data){
if(data.length > 0){
prodArr = data;
}
},
error: function(jqxhr, status, error){
}
});
}
return prodArr;
}
//chart1 영역에 Chart를 그려준다.
function fn_drawChart1(areaId,data,prodArr){
console.log("data:"+data);
var okArr = [];
var noConfirmArr = [];
var noInputArr = [];
var reviewArr = [];
$.each(prodArr,function(i){
okArr.push(
[fnc_checkNull(prodArr[i].PRODUCT_GROUP_NAME),Number(fnc_checkNullDefaultValue(prodArr[i].APPLY_CNT,0))]
);
noConfirmArr.push(
[fnc_checkNull(prodArr[i].PRODUCT_GROUP_NAME),Number(fnc_checkNullDefaultValue(prodArr[i].REJECT_CNT,0))]
);
noInputArr.push(
[fnc_checkNull(prodArr[i].PRODUCT_GROUP_NAME),Number(fnc_checkNullDefaultValue(prodArr[i].NO_INPUT_CNT,0))]
);
reviewArr.push(
[fnc_checkNull(prodArr[i].PRODUCT_GROUP_NAME),Number(fnc_checkNullDefaultValue(prodArr[i].REVIEW_CNT,0))]
);
});
$('#'+areaId).highcharts({
colors: ['#558ed5', '#7dace8', '#a0c2eb','#e6e9ee','#d3e3f6','#73bbae','#ddd475','#e6c15d','#b9d5ea'],
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y} 건</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y} 건',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [
{
name:"건수",
colorByPoint:true,
data:[
{
name: "승인",
y: Number(fnc_checkNullDefaultValue(data.APPLY_CNT, 0)),
drilldown: "ok"
},
{
name: "미승인",
y: Number(fnc_checkNullDefaultValue(data.REJECT_CNT, 0)),
drilldown:"noConfirm"
},
{
name: "미입력",
y: Number(fnc_checkNullDefaultValue(data.NO_INPUT_CNT, 0)),
drilldown:"noInput"
},
{
name: "검토중",
y: Number(fnc_checkNullDefaultValue(data.REVIEW_CNT, 0)),
drilldown:"review"
}
]
}
],
drilldown:{
series:[
{
name:"승인",
id:"ok",
data:okArr
},
{
name:"미승인",
id:"noConfirm",
data:noConfirmArr
},
{
name:"미입력",
id:"noInput",
data:noInputArr
},
{
name:"검토중",
id:"review",
data:reviewArr
}
]
}
});
}
//설비이관 차종,제품별 문제점,문서이관율 현황 Column Chart
function fn_getFacilityTransferProductCompleteRatioColumnChart(objId){
if(objId != ""){
$.ajax({
url:"/dashboard/getFacilityTransferProductCompleteRatioColumnChart.do",
type:"POST",
data:{"objId":objId},
dataType:"json",
async:false,
success:function(data){
setChart2("chart2", data);
},
error: function(jqxhr, status, error){
}
});
}
}
function setChart2(divId, productInfo){
var totalArr = [];
var productArr = [];
var problemArr = [];
var docTransferArr = [];
$.each(productInfo, function(i){
console.log(productInfo[i]);
totalArr.push(Number(100));
productArr.push(fnc_checkNull(productInfo[i].PROD_NAME));
problemArr.push(Number(fnc_checkNullDefaultValue(productInfo[i].PROBLEM_COMPLETE_RATIO,0)));
docTransferArr.push(Number(fnc_checkNullDefaultValue(productInfo[i].DOC_COMPLETE_RATIO,0)));
});
$('#'+divId).highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: productArr
},
yAxis: [{
max: 100,
min: 0,
startOnTick: false,
endOnTick: false,
title: {
text: ''
}
}, {
max: 100,
min: 0,
startOnTick: false,
endOnTick: false,
title: {
text: ''
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
},
series: {
cursor:'pointer',
point:{
events:{
click:function(){
console.log(this);
fn_openEOList(this);
}
}
}
}
},
series: [{
name: '전체',
color: '#eee',
data: totalArr,
tooltip: {
valuePrefix: '',
valueSuffix: '%'
},
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: '문제점 조치율',
color: '#e8ce62',
data: problemArr,
tooltip: {
valuePrefix: '',
valueSuffix: '%'
},
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: '전체',
color: '#eee',
data: totalArr,
tooltip: {
valuePrefix: '',
valueSuffix: '%'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: '문서 이관율',
color: '#79ad86',
data: docTransferArr,
tooltip: {
valuePrefix: '',
valueSuffix: '%'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]
});
}
</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 id="plmSearchZon">
<table class="short_search">
<tr>
<td><label for="">고객사</label></td>
<td>
<select name="search_oemObjId" id="search_oemObjId">
<option value="">선택</option>
</select>
</td>
<td><label for="">차종</label></td>
<td>
<select name="search_carObjId" id="search_carObjId">
<option value="">선택</option>
</select>
</td>
<td><label for="">이관상태</label></td>
<td>
<select name="" id="">
<option value="">선택</option>
</select>
</td>
<td><label for="">이관기간</label></td>
<td>
<select name="" id="">
<option value="">선택</option>
</select>~
<select name="" id="">
<option value="">선택</option>
</select>
</td>
</tr>
</table>
</div>
<div class="btn_wrap" style="float:right; width:38.3%; height:40px; box-shadow: 5px 7px 10px 0px #ccc;">
<div class="plm_btn_wrap" style="margin-right:22px;">
<input type="button" value="조회" class="btnSearch plm_btns">
<input type="button" value="등록" class="plm_btns facilitiesTransferEnrollBtn">
<input type="button" value="이관승인요청" class="plm_btns">
<input type="button" value="문제점 발생/조치현황" class="plm_btns">
<input type="button" value="Task Link" class="plm_btns">
<input type="button" value="Excel Export" class="plm_btns">
</div>
</div>
<div class="contents_page_basic_margin">
<div class="fourblock" style="width:60%; margin: 45px 0 15px 0; float:left; border:0; height:300px; border-radius: 10px 0 10px 10px; padding: 38px 20px 0 13px; box-shadow: 5px 7px 10px 0px #ccc;">
<div class="title_div" style="margin-top:-20px;line-height: 13px;">설비이관 관리리스트</div>
<div class="plm_table_wrap">
<div style="overflow-y:scroll;">
<table class="plm_table" style="width:100%;">
<colgroup>
<col width="5%" />
<col width="5%" />
<col width="*" />
<col width="*" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
</colgroup>
<thead style="border-bottom: 2px solid #6c93a7;">
<tr class="plm_thead" style="background-image: linear-gradient(#86b3cb, #75a0b6);">
<td></td>
<td>No</td>
<td>고객사</td>
<td>차종</td>
<td>개발품목</td>
<td>이관율(%)</td>
<td>이관상태</td>
<td>양산일자</td>
<td>이관완료일자</td>
</tr>
</thead>
</table>
</div>
<div class="plm_scroll_table" style="width:100%; height:250px;">
<table class="plm_table">
<colgroup>
<col width="5%" />
<col width="5%" />
<col width="*" />
<col width="*" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
</colgroup>
<tbody id="mainList">
<c:choose>
<c:when test="${!empty LIST}">
<c:forEach var="info" items="${LIST}" varStatus="status">
<tr>
<td><input type="radio" name="btnRadio" class="btnRadio" value="${info.OBJID}" data-OEM_OBJID="${info.OEM_OBJID}" data-CAR_OBJID="${info.CAR_OBJID}" data-WRITER="${info.WRITER}"></td>
<td>${info.RNUM}</td>
<td>${info.OEM_NAME}</td>
<td>${info.CAR_CODE}</td>
<td><a href="#" class="btnProdCnt" data-OBJID="${info.PROJECT_OBJID}">${info.PROD_CNT}</a></td>
<td>${info.TAKE_OVER_RATIO}%</td>
<td><a href="#" class="btnFacilitiesTransferPartDetailPopup" data-OBJID="${info.OBJID}">${info.TAKE_OVER_STATUS eq 'complete'?'이관완료':'진행중'}</a></td>
<td>${info.SOP}</td>
<td>${info.TAKE_OVER_DATE}</td>
</tr>
</c:forEach>
</c:when>
<c:otherwise>
<tr>
<td align="center" colspan="9">조회된 정보가 없습니다.</td>
</tr>
</c:otherwise>
</c:choose>
</tbody>
</table>
</div>
</div>
</div>
<div class="fourblock" style="width:35%; margin-bottom:15px; margin:42px 0 0 0; float:right; height:300px;">
<div class="title_div" style="margin-top:-20px;line-height: 13px;">차종 설비이관 진행현황</div>
<div id="chart1" style="width:80%; height:300px; margin: 30px auto 0;">
<div id="chart3MessageArea" style="width:100%;height:50%;padding-top:10%;text-align:center;">조회된 정보가 없습니다.</div>
</div>
</div>
<div class="fourblock" style="width:60%; float:left; height:300px; margin-left:14px; border:0;">
<div class="title_div" style="margin-top:-20px;line-height: 13px;">설비 Assy Part목록</div>
<div class="plm_table_wrap">
<div style="overflow-y:scroll;">
<table class="plm_table" style="width:100%;">
<colgroup>
<col width="10%" />
<col width="10%" />
<col width="*" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
</colgroup>
<thead>
<tr class="plm_thead">
<td>제품군</td>
<td>Part No</td>
<td>Part Name</td>
<td>형상</td>
<td>제품별<br>종합 이관율(%)</td>
<td>문제점<br>조치율(%)</td>
<td>설비 양산서류<br>이관율(%)</td>
</tr>
</thead>
</table>
</div>
<div class="plm_scroll_table" style="width:100%; height:285px;">
<table class="plm_table">
<colgroup>
<col width="10%" />
<col width="10%" />
<col width="*" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
<col width="10%" />
</colgroup>
<tbody id="assyPartList">
<tr>
<td colspan="7" align="center">조회된 정보가 없습니다.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="fourblock" style="width:35%; margin-right: 0; float:right; height:300px;">
<div class="title_div" style="margin-top:-20px;line-height: 13px;">제품별 이관현황</div>
<div id="chart2" style="width:80%; height:300px; margin: 30px auto 0;">
<div id="chart3MessageArea" style="width:100%;height:50%;padding-top:10%;text-align:center;">조회된 정보가 없습니다.</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>