ERP-node/WebContent/WEB-INF/view/project/gate/gateStatusDashboard.jsp

714 lines
21 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_setOEMList1();
fn_setOEMList2();
//chart1 초기세팅
fn_setChart1Data();
//chart3 초기세팅
fn_setChart3Data();
//고객사별 차종 목록 조회
$("#search_oemObjId1").change(function(){
var oemObjId = $(this).val();
fn_setCarTypeList1(oemObjId);
});
//고객사별 차종 목록 조회
$("#search_oemObjId2").change(function(){
var oemObjId = $(this).val();
fn_setCarTypeList2(oemObjId);
});
//chart1
$("#btnSearchChart1").click(function(){
var oemObjId = fnc_checkNull($("#search_oemObjId1").val());
if(oemObjId == ""){
Swal.fire("고객사를 선택해주시기 바랍니다.");
$("#search_oemObjId1").focus();
return;
}
fn_setChart1Data();
});
//chart2
var chart2List = ${empty chart2?'[]':chart2};
if(chart2List != null){
setChart2("chart2", chart2List);
}else{
var noData = "<div id=\"problemStatusMessageArea\" style=\"width:100%;height:50%;padding-top:10%;text-align:center;\">조회된 정보가 없습니다.</div>";
$("#chart2").html(noData);
}
//chart3
$("#btnSearchChart2").click(function(){
var oemObjId = fnc_checkNull($("#search_oemObjId2").val());
if(oemObjId == ""){
Swal.fire("고객사를 선택해주시기 바랍니다.");
$("#search_oemObjId2").focus();
return;
}
fn_setChart3Data();
});
//이슈 팝업
$(".btnOpenIssue").click(function(){
var oemObjId = $(this).attr("data-OEM_OBJID");
var carObjId = $(this).attr("data-CAR_OBJID");
var status = $(this).attr("data-STATUS");
var params = "?search_oem="+oemObjId+"&search_carType="+carObjId+"&search_status="+status;
//location.href="/project/gate/issueList.do"+params;
window.open("/project/gate/issueList.do"+params, "issuePopup", "width=1700, height=800");
//Swal.fire("oemObjId : "+oemObjId+", carObjId : "+carObjId);
});
});
</script>
<script>
//Task 진행현황 Popup을 호출한다.
function fn_openTaskList(obj){
var userName = obj.options.name;
var oemObjId = $("#search_oemObjId1").val();
var carObjId = $("#search_carObjId1").val();
var status = "";
if(userName == "완료") status = "complete";
if(userName == "계획") status = "plan";
if(userName == "진행") status = "ongoing";
if(userName == "지연") status = "delay";
var params = "?search_oem="+oemObjId+"&search_carType="+carObjId+"&search_status_type="+status;
window.open("/project/taskList.do"+params, "", "width=1700, height=800");
}
// 팀별 Task 진행률 Popup을 호출한다.
function fn_openTaskList2(obj){
var userName = obj.options.name;
var oemObjId = $("#search_oemObjId2").val();
var carObjId = $("#search_carObjId2").val();
var params = "?search_oem="+oemObjId+"&search_carType="+carObjId+"&search_userName="+userName;
window.open("/project/taskList.do"+params, "", "width=1700, height=800");
}
//oem1 목록 조회
function fn_setOEMList1(){
$.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_oemObjId1").append(appendCode);
var paramValue = "${empty param.search_oemObjId1?farthestSOPCarInfo.OEM_OBJID:param.search_oemObjId1}";
if(paramValue != ""){
$("#search_oemObjId1 > option[value="+paramValue+"]").attr("selected", "true");
$("#search_oemObjId1").trigger("change");
}
},
error: function(jqxhr, status, error){
}
});
}
//oem2 목록 조회
function fn_setOEMList2(){
$.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_oemObjId2").append(appendCode);
var paramValue = "${empty param.search_oemObjId2?farthestSOPCarInfo.OEM_OBJID:param.search_oemObjId2}";
if(paramValue != ""){
$("#search_oemObjId2 > option[value="+paramValue+"]").attr("selected", "true");
$("#search_oemObjId2").trigger("change");
}
},
error: function(jqxhr, status, error){
}
});
}
//car 목록 조회
function fn_setCarTypeList1(oemObjId){
if(oemObjId !=""){
$.ajax({
url:"/common/getCarTypeList.do",
type:"POST",
data:{"isJson":true, "search_oemObjId":oemObjId},
dataType:"json",
success:function(data){
var appendCode = "";
appendCode += "";
$.each(data, function(i){
appendCode += "<option value='"+data[i].OBJID+"'>"+data[i].CAR_CODE+"("+data[i].CAR_NAME+")</option>";
});
$("#search_carObjId1").children().remove();
$("#search_carObjId1").append(appendCode);
var paramValue = "${empty param.search_carObjId1?farthestSOPCarInfo.CAR_OBJID:param.search_carObjId1}";
if(paramValue != ""){
$("#search_carObjId1 > option[value="+paramValue+"]").attr("selected", "true");
}
},
error: function(jqxhr, status, error){
}
});
}else{
$("#search_carObjId1").children().remove();
$("#search_carObjId1").append("<option value=''>선택</option>");
}
}
//car 목록 조회
function fn_setCarTypeList2(oemObjId){
if(oemObjId !=""){
$.ajax({
url:"/common/getCarTypeList.do",
type:"POST",
data:{"isJson":true, "search_oemObjId":oemObjId},
dataType:"json",
success:function(data){
var appendCode = "";
appendCode += "";
$.each(data, function(i){
appendCode += "<option value='"+data[i].OBJID+"'>"+data[i].CAR_CODE+"("+data[i].CAR_NAME+")</option>";
});
$("#search_carObjId2").children().remove();
$("#search_carObjId2").append(appendCode);
var paramValue = "${empty param.search_carObjId2?farthestSOPCarInfo.CAR_OBJID:param.search_carObjId2}";
if(paramValue != ""){
$("#search_carObjId2 > option[value="+paramValue+"]").attr("selected", "true");
}
},
error: function(jqxhr, status, error){
}
});
}else{
$("#search_carObjId2").children().remove();
$("#search_carObjId2").append("<option value=''>선택</option>");
}
}
//chart1
function fn_setChart1Data(){
var oemObjId = $("#search_oemObjId1").val();
var carObjId = $("#search_carObjId1").val();
$.ajax({
url:"/dashboard/getGateStatusDashboard_chart1Data.do",
type:"POST",
data:{"search_carObjId":carObjId},
dataType:"json",
success:function(data){
//set chart
var name = fnc_checkNull(data.CAR_CODE);
var completeCnt = Number(fnc_checkNullDefaultValue(data.COMPLETE_CNT, 0));
var planCnt = Number(fnc_checkNullDefaultValue(data.PLAN_CNT, 0));
var ongoingCnt = Number(fnc_checkNullDefaultValue(data.ONGOING_CNT, 0));
var delayCnt = Number(fnc_checkNullDefaultValue(data.DELAY_CNT, 0));
var sum = completeCnt + planCnt + ongoingCnt + delayCnt;
if(sum == 0){
var noData = "<div id=\"chart1MessageArea\" style=\"width:100%;height:50%;padding-top:10%;text-align:center;\">조회된 정보가 없습니다.</div>";
$("#chart1").html(noData);
}else{
setChart1("chart1", data);
}
},
error: function(jqxhr, status, error){
Swal.fire("error");
}
});
}
//chart1
function setChart1(divId, resultMap){
var name = fnc_checkNull(resultMap.CAR_CODE);
var oemObjId = fnc_checkNull(resultMap.OEM_OBJID);
var carObjId = fnc_checkNull(resultMap.CAR_OBJID);
var completeCnt = Number(fnc_checkNullDefaultValue(resultMap.COMPLETE_CNT, 0));
var planCnt = Number(fnc_checkNullDefaultValue(resultMap.PLAN_CNT, 0));
var ongoingCnt = Number(fnc_checkNullDefaultValue(resultMap.ONGOING_CNT, 0));
var delayCnt = Number(fnc_checkNullDefaultValue(resultMap.DELAY_CNT, 0));
//Swal.fire("name : "+name+", completeCnt : "+completeCnt+", planCnt : "+planCnt+", ongoingCnt : "+ongoingCnt+", delayCnt : "+delayCnt);
$('#'+divId).highcharts({
colors: ['#558ed5', '#b6a6ca', '#90ff7d','#ff6d6d', '#b6a6ca', '#bfbfbf','#cc7b38', '#383838', '#00cc99','#9bbb59', '#40e1f2', '#6155f9','#9c4f30', '#aabad7', '#d9aaa9'],
chart: {
type : 'pie'
},
title: {
text: ''
},
plotOptions:{
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}건'
},
cursor:'pointer',
point:{
events:{
click:function(){
console.log(this);
fn_openTaskList(this);
}
}
}
}
},
"series": [
{
name: name
, data : [
{
'name' : '완료',
'y' : completeCnt
, oemObjId : oemObjId
, carObjId : carObjId
, taskType : 'complete'
},
{
'name' : '계획',
'y' : planCnt
, oemObjId : oemObjId
, carObjId : carObjId
, taskType : 'plan'
},
{
'name' : '진행',
'y' : ongoingCnt
, oemObjId : oemObjId
, carObjId : carObjId
, taskType : 'ongoing'
},
{
'name' : '지연',
'y' : delayCnt
, oemObjId : oemObjId
, carObjId : carObjId
, taskType : 'delay'
}
]
}
]
});
}
//chart2
function setChart2(divId, resultList){
var name = [];
var allCnt = [];
var completeCnt = [];
var ongoingCnt = [];
var oemObjId = [];
var carObjId = [];
$.each(resultList , function(i){
name[i] = resultList[i].CAR_CODE;
allCnt[i] = Number(fnc_checkNullDefaultValue(resultList[i].ALL_CNT, 0));
completeCnt[i] = Number(fnc_checkNullDefaultValue(resultList[i].COMPLETE_CNT, 0));
ongoingCnt[i] = Number(fnc_checkNullDefaultValue(resultList[i].ONGOING_CNT, 0));
oemObjId[i] = Number(fnc_checkNullDefaultValue(resultList[i].OEM_OBJID, 0));
carObjId[i] = Number(fnc_checkNullDefaultValue(resultList[i].CAR_OBJID, 0));
//Swal.fire("name["+i+"] : "+name[i]+", cnt["+i+"] : "+cnt[i]);
});
//Swal.fire("name : "+name+", allCnt : "+allCnt+", completeCnt : "+completeCnt);
$('#'+divId).highcharts({
colors: ['#558ed5','#90ff7d'],
chart: {
zoomType: 'xy'
, type : 'column'
},
title: {
text: ''
},
xAxis: [{
categories: name
}],
yAxis: [{ // Primary yAxis
min : 0
, labels: {
format: '{value}'
}
, stackLabels: {
enabled : true
}
, title : ''
}],
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}',
useHTML: true
},
legend: {
align: 'right',
verticalAlign: 'top',
floating: true,
y:15
},
series: [
/* {
name: '전체'
, data: allCnt
}, */
{
name: '완료'
, data : completeCnt
, oemObjId:oemObjId
, carObjId:carObjId
},{
name: '미결'
, data : ongoingCnt
, oemObjId:oemObjId
, carObjId:carObjId
}
],
plotOptions:{
column : {
stacking : 'normal'
, dataLabels : {
enabled : true
}
}
, series:{
cursor:'pointer',
point:{
events:{
click:function(){
fn_openProblemList_byCar(this);
}
}
}
}
}
});
}
//chart3
function fn_setChart3Data(){
var oemObjId = $("#search_oemObjId2").val();
var carObjId = $("#search_carObjId2").val();
var chart3List = [];
var chart3SubdataList = [];
$.ajax({
url:"/dashboard/getGateStatusDashboard_chart3Data.do",
type:"POST",
data:{"search_carObjId":carObjId},
dataType:"json",
async:false,
success:function(data){
//set chart data
chart3List = data;
//setChart3("chart3", chart3);
},
complete:function(data){
//Swal.fire(data.length);
},
error: function(jqxhr, status, error){
/*
Swal.fire(jqxhr.statusText + ", " + status + ", " + error);
Swal.fire(jqxhr.status);
Swal.fire(jqxhr.responseText);
*/
//$("#chart3").text(jqxhr.responseText);
}
});
$.ajax({
url:"/dashboard/getGateStatusDashboard_chart3SubData.do",
type:"POST",
data:{"search_carObjId":carObjId},
dataType:"json",
async:false,
success:function(data){
//set chart data
chart3SubdataList = data;
//setChart3("chart3", chart3);
},
complete:function(data){
//Swal.fire(data.length);
},
error: function(jqxhr, status, error){
/*
Swal.fire(jqxhr.statusText + ", " + status + ", " + error);
Swal.fire(jqxhr.status);
Swal.fire(jqxhr.responseText);
*/
//$("#chart3").text(jqxhr.responseText);
}
});
if(chart3List == "" && chart3SubdataList == ""){
var noData = "<div id=\"chart3MessageArea\" style=\"width:100%;height:50%;padding-top:10%;text-align:center;\">조회된 정보가 없습니다.</div>";
$("#chart3").html(noData);
}else{
setChart3("chart3", chart3List, chart3SubdataList);
}
}
//chart3
function setChart3(divId, resultList, drilldownList){
//series
var deptName = [];
var deptCode = [];
var completeRatio = [];
//drilldown
var userId =[];
var userName = [];
var ratio = [];
var taskDeptCode = [];
//chart
var deptData = [];
var drilldownArr = [];
//Swal.fire("divId : "+divId+", resultList.length : "+resultList.length);
$.each(resultList , function(i){
var drilldownData = [];
deptName[i] = resultList[i].TASK_DEPT_NAME;
deptCode[i] = resultList[i].TASK_DEPT;
completeRatio[i] = Number(fnc_checkNullDefaultValue(resultList[i].COMPLETE_RATIO, 0));
//Swal.fire("deptName["+i+"] : "+deptName[i]+", deptCode["+i+"] : "+deptCode[i]+", completeRatio : "+completeRatio[i]);
$.each(drilldownList, function(j){
userId[j] = drilldownList[j].TASK_CHARGER_ID;
userName[j] = drilldownList[j].TASK_CHARGER_NAME;
ratio[j] = Number(fnc_checkNullDefaultValue(drilldownList[j].COMPLETE_RATIO, 0));
taskDeptCode[j] = drilldownList[j].DEPT_CODE;
//Swal.fire("userName["+j+"] : "+userName+", ratio["+j+"] : "+ratio[j])
if(deptCode[i] == taskDeptCode[j]){
//Swal.fire("deptCode["+i+"] : "+deptCode[i]+", taskDeptCode["+j+"] : "+taskDeptCode[j]+", deptName["+i+"] : "+deptName[i]+", userName["+j+"] : "+userName[j])
drilldownData.push([userName[j], ratio[j]]);
}
});
deptData.push({
name:deptName[i],
y:completeRatio[i],
drilldown:deptCode[i]
});
drilldownArr.push({
name:'진행률',
id:deptCode[i],
data:drilldownData
});
});
/*
[
{name:'aaa',id:'aaa',data:[["key", "value"],["key", "value"],["key", "value"]]}
, {name:'aaa',id:'aaa',data:[["key", "value"],["key", "value"],["key", "value"]]}
, {name:'aaa',id:'aaa',data:[["key", "value"],["key", "value"],["key", "value"]]}
]
*/
$('#'+divId).highcharts({
chart: {
zoomType: 'xy'
, type : 'column'
},
title: {
text: ''
},
xAxis: [{
type:'category'
}],
yAxis: [{ // Primary yAxis
min : 0
, max : 100
, labels: {
format: '{value:.1f}%'
}
, stackLabels: {
enabled : true
}
, title : ''
}],
tooltip: {
headerFormat: '',
pointFormat: '{series.name}: {point.y:.1f}%<br/>Total: 100%',
useHTML: true
},
legend: {
enabled : false
},
series: [{
name : '진행률'
, data : deptData
, userName : userName
}],
drilldown:{
series : drilldownArr
},
plotOptions:{
column : {
dataLabels : {
enabled : true,
format : '{point.y:.1f}%'
},
cursor:'pointer',
point:{
events:{
click:function(){
console.log(this);
if(this.category != null){
fn_openTaskList2(this);
}
}
}
}
}
, series:{
}
}
});
}
</script>
</head>
<body>
<form name="form1" action="" method="post">
<div style="min-width:1600px; height:100%; position:relative;">
<div style="position:absolute; top:0; left:51%; width:1px; height:100%; background:#eee; z-index:996;"></div>
<div style="position:absolute; top:450px; left:0%; width:100%; height:1px; background:#eee; z-index:99;"></div>
<div class="plm_menu_name" style="z-index:999 !important; position:absolute;">
<h2>
<span>Gate 관리</span>
</h2>
</div>
<div class="contents_page_basic_margin" style="padding-top:30px;">
<div class="fourblock" style="margin-top:42px;">
<div class="title_div" style="margin-top:-20px;line-height: 13px;">Task 진행현황</div>
<div class="fourblock_search">
<table>
<tr>
<td rowspan="2">&nbsp;&nbsp;&nbsp;&nbsp;검색조건&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><lable for="" class="orangeTitleDot" style="font-weight:300; font-size:13px;">고객사</lable></td>
<td>
<select name="search_oemObjId1" id="search_oemObjId1" style="width:100px;">
<option value="">선택</option>
</select>
</td>
<td>
<lable for="" class="orangeTitleDot" style="font-weight:300; font-size:13px;">차종</lable>
</td>
<td>
<select name="search_carObjId1" id="search_carObjId1" style="width:180px;">
<option value="">선택</option>
</select>
</td>
<td><input type="button" id="btnSearchChart1" value="조회" class="btnSearch blue_btn" style="float:none;"></td>
</tr>
</table>
</div>
<div id="chart1" style="width:50%; height:280px;margin: 0 auto;"></div>
</div>
<div class="fourblock" style="margin-top:42px;">
<div class="title_div" style="margin-top:-20px;line-height: 13px;">문제점 발생/조치 현황</div>
<div id="chart2" style="width:85%; height:260px; margin:50px auto 0;"></div>
</div>
<div class="fourblock" style="height:380px; margin-top:60px;">
<div class="title_div" style="margin-top:-20px;line-height: 13px;">팀별 Task 진행률</div>
<div class="fourblock_search">
<table>
<tr>
<td rowspan="2">&nbsp;&nbsp;&nbsp;&nbsp;검색조건&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><lable for="" class="orangeTitleDot" style="font-weight:300; font-size:13px;">고객사</lable></td>
<td>
<select name="search_oemObjId2" id="search_oemObjId2" style="width:100px;">
<option value="">선택</option>
</select>
</td>
<td><lable for="" class="orangeTitleDot" style="font-weight:300; font-size:13px;">차종</lable></td>
<td>
<select name="search_carObjId2" id="search_carObjId2" style="width:180px;">
<option value="">선택</option>
</select>
</td>
<td><input type="button" id="btnSearchChart2" value="조회" class="btnSearch blue_btn" style="float:none;"></td>
</tr>
</table>
</div>
<div id="chart3" style="width:85%; height:260px; margin: 50px auto 0;"></div>
</div>
<div class="fourblock" style="border:0; height:380px; margin-top:60px;" id="chart4">
<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%;">
<thead>
<tr class="plm_thead">
<td>차종</td>
<td>발생건수</td>
<td>완료건수</td>
<td>진행건수</td>
</tr>
</thead>
</table>
</div>
<div class="plm_scroll_table" style="width:100%; height:340px;">
<table class="plm_table">
<c:choose>
<c:when test="${!empty chart4}">
<c:forEach var="info" items="${chart4}" varStatus="status">
<tr>
<td title="${info.CAR_CODE}">${info.CAR_CODE}</td>
<td title="${info.ALL_CNT}"><a href="#" class="btnOpenIssue" data-OEM_OBJID="${info.OEM_OBJID}" data-CAR_OBJID="${info.CAR_OBJID}" data-STATUS="">${info.ALL_CNT}</a></td>
<td title="${info.COMPLETE_CNT}"><a href="#" class="btnOpenIssue" data-OEM_OBJID="${info.OEM_OBJID}" data-CAR_OBJID="${info.CAR_OBJID}" data-STATUS="완료">${info.COMPLETE_CNT}</a></td>
<td title="${info.ONGOING_CNT}"><a href="#" class="btnOpenIssue" data-OEM_OBJID="${info.OEM_OBJID}" data-CAR_OBJID="${info.CAR_OBJID}" data-STATUS="진행중">${info.ONGOING_CNT}</a></td>
</tr>
</c:forEach>
</c:when>
<c:otherwise>
<tr>
<td colspan="4" align="center">조회된 정보가 없습니다.</td>
</tr>
</c:otherwise>
</c:choose>
</table>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>