Index: arms/html/analysisResource/modal/content-modal.html =================================================================== diff -u -r76bdf2a3d21da046a0045f84be1194f7fb4d34f5 -rde31e4449cfd905727412cf678574911c0fb84e5 --- arms/html/analysisResource/modal/content-modal.html (.../content-modal.html) (revision 76bdf2a3d21da046a0045f84be1194f7fb4d34f5) +++ arms/html/analysisResource/modal/content-modal.html (.../content-modal.html) (revision de31e4449cfd905727412cf678574911c0fb84e5) @@ -90,6 +90,14 @@ 차트_그리기 +
+ +
@@ -99,7 +107,7 @@ 차트 보기
  • - 목록 보기 + 목록 보기
  • 설정 @@ -116,13 +124,11 @@
    • -
    +
    List Data (Excel)
    @@ -183,7 +189,7 @@ aria-hidden="true" style="border-radius: 10px">
    + style="width: 100%">
    Index: arms/js/analysisResource.js =================================================================== diff -u -r073579fd548d6af80626439ce3204814a00f27b6 -rde31e4449cfd905727412cf678574911c0fb84e5 --- arms/js/analysisResource.js (.../analysisResource.js) (revision 073579fd548d6af80626439ce3204814a00f27b6) +++ arms/js/analysisResource.js (.../analysisResource.js) (revision de31e4449cfd905727412cf678574911c0fb84e5) @@ -67,8 +67,16 @@ "./js/common/chart/eCharts/horizontalBarChart.js", "./js/common/chart/eCharts/simplePie.js" ], - [ + "../reference/jquery-plugins/jspreadsheet-ce-4.13.1/dist/jsuites.js", + "../reference/jquery-plugins/jspreadsheet-ce-4.13.1/dist/jsuites.css", + "../reference/jquery-plugins/jspreadsheet-ce-4.13.1/dist/index.js", + "../reference/jquery-plugins/jspreadsheet-ce-4.13.1/dist/jspreadsheet.css", + // "../reference/jquery-plugins/jspreadsheet-ce-4.13.1/dist/jspreadsheet.datatables.css", + "../reference/jquery-plugins/jspreadsheet-ce-4.13.1/dist/jspreadsheet.theme.css", + "./js/common/jspreadsheet/jspreadsheetApi.js" + ], + [ "../reference/jquery-plugins/dataTables-1.10.16/media/css/jquery.dataTables_lightblue4.css", "../reference/jquery-plugins/dataTables-1.10.16/extensions/Responsive/css/responsive.dataTables_lightblue4.css", "../reference/jquery-plugins/dataTables-1.10.16/extensions/Select/css/select.dataTables_lightblue4.css", @@ -117,7 +125,7 @@ // 전체보기 관련 이벤트 세팅 전체보기_관련_이벤트(); - + //데이터테이블초기화 table = initTable(); @@ -457,6 +465,20 @@ // 전체보기 클릭 및 모달 동작 이벤트 //////////////////////////////////////////////////////////////////////////////////////// function 전체보기_관련_이벤트() { + + window.addEventListener('resize', function() { + var container = document.getElementById("analysis_modal_sankey"); + // Recalculate column widths on window resize + jspreadsheet(container, { + columns: [ + { width: container.clientWidth * 0.3 }, // 30% width + { width: container.clientWidth * 0.2 }, // 20% width + { width: container.clientWidth * 0.5 }, // 50% width + ], + }); + }); + + // 테스트용 $("#btn_modal_sankey").on("click", function() { let serId = 22; @@ -466,6 +488,12 @@ drawProductToManSankeyChart(serId, verListSplit, tarId, 10000); }); + $("#btn_modal_excel").on("click", function() { + let tarId = "modal_excel"; + JspreadsheetAPI.getSheetData(); + JspreadsheetAPI.sheetRender(tarId); + }); + // 모달이 띄워졌을 때 동작. $('#analysis_modal_sankey').on('shown.bs.modal', function () { // let serId = 22; let verList = [33,35,36,37,46,55,59,61,74]; let verListSplit = verList.join(","); @@ -490,6 +518,8 @@ jError("서비스 및 버전을 설정 후 선택해주세요."); } } else if (target === "#excel_data") { + console.log("excel_data"); + $("#btn_modal_excel").click(); } else if (target === "#option_toggle") { $(".option_tab").removeClass("active"); Index: arms/js/common/jspreadsheet/jspreadsheetAPI.js =================================================================== diff -u --- arms/js/common/jspreadsheet/jspreadsheetAPI.js (revision 0) +++ arms/js/common/jspreadsheet/jspreadsheetAPI.js (revision de31e4449cfd905727412cf678574911c0fb84e5) @@ -0,0 +1,425 @@ +var JspreadsheetAPI = ( function() { + "use strict"; + + var sheetData; + + var mock_data = [ + { + "id": "22-product", + "name": "313 SOFT - 요구사항 관리 시스템 - ALM RMS", + "type": "제품", + "parent": "" + }, + { + "id": "33-version", + "name": "BaseVersion", + "type": "버전", + "parent": "" + }, + { + "id": "35-version", + "name": "1.0.0", + "type": "버전", + "parent": "" + }, + { + "id": "36-version", + "name": "1.0.1", + "type": "버전", + "parent": "" + }, + { + "id": "37-version", + "name": "24.01", + "type": "버전", + "parent": "" + }, + { + "id": "46-version", + "name": "24.02", + "type": "버전", + "parent": "" + }, + { + "id": "55-version", + "name": "24.03", + "type": "버전", + "parent": "" + }, + { + "id": "59-version", + "name": "24.04", + "type": "버전", + "parent": "" + }, + { + "id": "61-version", + "name": "24.05", + "type": "버전", + "parent": "" + }, + { + "id": "74-version", + "name": "24.06", + "type": "버전", + "parent": "" + }, + { + "id": "5f18ccb5ce15e800268d224d", + "name": "양형석", + "type": "작업자", + "parent": "37" + }, + { + "id": "626551d434b9b70068796c1e", + "name": "moon", + "type": "작업자", + "parent": "37,35,74" + }, + { + "id": "712020:4fc33a35-859f-4ac8-8956-b22581115623", + "name": "gkfn185", + "type": "작업자", + "parent": "37,36,55" + }, + { + "id": "619ae743b43d5b006adef72c", + "name": "김찬호", + "type": "작업자", + "parent": "37,36,55" + }, + { + "id": "hsyang", + "name": "hsyang", + "type": "작업자", + "parent": "37,33,55,59" + }, + { + "id": "5ffe4999f7ea2a0107f8c6f6", + "name": "최수현", + "type": "작업자", + "parent": "37,36,55" + }, + { + "id": "dumbbelloper", + "name": "dumbbelloper", + "type": "작업자", + "parent": "33,35" + }, + { + "id": "gkfn185", + "name": "gkfn185", + "type": "작업자", + "parent": "33" + }, + { + "id": "1", + "name": "Redmine Admin", + "type": "작업자", + "parent": "55" + }, + { + "id": "admin", + "name": "admin", + "type": "작업자", + "parent": "55" + }, + { + "id": "63b2a039159df2c252e826e9", + "name": "이동민", + "type": "작업자", + "parent": "61" + }, + { + "id": "No-Worker", + "name": "No-Worker", + "type": "No-Worker", + "parent": "" + } + ]; + var modifyData = function() { + let products = {}; + let versions = {}; + let workers = []; + let result = []; + + console.log(mock_data); + mock_data.forEach(item => { + console.log(item); + if (item.type === "제품") { + let itemId = item.id.split("-")[0]; + products[itemId] = { id: itemId, name: item.name }; + //products[item.id] = { id: item.id, name: item.name }; + } else if (item.type === "버전") { + let itemId = item.id.split("-")[0]; + versions[itemId] = { id: itemId, name: item.name, product: products["22"] }; + } else if(item.type ==="작업자") { + item.parent.split(',').forEach(parentId => { + if (versions[parentId]) { + workers.push({ + product: versions[parentId].product, + version: versions[parentId], + worker: { id: item.id, name: item.name } + }); + } + }); + } + }); + + console.log(products); + console.log(versions); + console.log(workers); + workers.forEach(worker => { + result.push({ + "제품(서비스) 키": worker.product.id, + "제품(서비스) 명": worker.product.name, + "버전 키": worker.version.id, + "버전 명": worker.version.name, + "작업자 키": worker.worker.id, + "작업자 명": worker.worker.name + }); + }); + + console.log(result); + setSheetData(result); + return result; + }; + + var setSheetData = function (fetchedData) { + + // 여기서 fetchedData 를 sheetData 로 변경해야힘. + + + sheetData = fetchedData; + }; + var getSheetData = function () { + if (sheetData) { + console.log("getSheetData :: sheetData 존재 :: 목데이터 반환"); + console.log(sheetData); + return sheetData; + } else { + console.log("getSheetData :: sheetData 미존재 :: 목데이터 파싱 및 반환"); + return modifyData(); + } + }; + + + var columnList = [ + { type: "text", title: "제품(서비스) 키", width:100}, + { type: "text", title: "제품(서비스) 명", width:300}, + { type: "text", title: "버전 키", width:100}, + { type: "text", title: "버전 명", width:100}, + { type: "text", title: "작업자 키", width:200}, + { type: "text", title: "작업자", width:100} + ]; + + + + // default options 과 따로 옵션 지정할 수 있게 해야한다. + + var sheetRender = function(targetElementId) { + var spreadsheetElement = document.getElementById(targetElementId); + + if (spreadsheetElement.jexcel) { + spreadsheetElement.jexcel.destroy(); + } + + console.log("sheetRender"); + console.log(sheetData); + //var sheet = jspreadsheet(spreadsheetElement, sheetOptions); + var sheet = jspreadsheet(spreadsheetElement, { + + // allowComments: true, + contextMenu: function(o, x, y, e, items) { + var items = []; + + // Save + items.push({ + title: jSuites.translate('Save as'), + shortcut: 'Ctrl + S', + icon: 'save', + onclick: function () { + o.download(); + } + }); + + return items; + }, + search:true, + pagination:10, + // data: getSheetData(), + data: sheetData, + //columns: columnList, + columns: [ + { type: "text", title: "제품(서비스) 키", width: spreadsheetElement.clientWidth * 0.1}, + { type: "text", title: "제품(서비스) 명", width: spreadsheetElement.clientWidth * 0.25}, + { type: "text", title: "버전 키", width: spreadsheetElement.clientWidth * 0.1}, + { type: "text", title: "버전 명", width: spreadsheetElement.clientWidth * 0.15}, + { type: "text", title: "작업자 키", width: spreadsheetElement.clientWidth * 0.3}, + { type: "text", title: "작업자", width: spreadsheetElement.clientWidth * 0.1} + ], + onbeforechange: function(instance, cell, x, y, value) { + var cellName = jspreadsheet.getColumnNameFromId([x,y]); + console.log('The cell ' + cellName + ' will be changed' + '\n'); + }, + oninsertcolumn: function(instance) { + console.log('Column added' + '\n'); + }, + /*onchange: function(instance, cell, x, y, value) { + var cellName = jspreadsheet.getColumnNameFromId([x,y]); + console.log('onchange :: ' + cell + " :; x :: " + x + " :: y :: " + y +" :: cellName ::" + cellName + ' to: ' + value + '\n'); + if (x == 2) { + var key = instance.jexcel.getValueFromCoords(1, y); + if (!modifiedRows[key]) { + modifiedRows[key] = {}; + } + modifiedRows[key].이름 = instance.jexcel.getValueFromCoords(0, y); + modifiedRows[key].키 = instance.jexcel.getValueFromCoords(1, y); + modifiedRows[key].연봉 = value; + } + },*/ + oninsertrow: function(instance, rowNumber) { + console.log('Row added' + rowNumber); + }, + ondeleterow: function(instance, rowNumber) { + console.log('Row deleted' + rowNumber); + }, + ondeletecolumn: function(instance) { + console.log('Column deleted' +'\n'); + }, + onselection: function(instance, x1, y1, x2, y2, origin) { + var cellName1 = jspreadsheet.getColumnNameFromId([x1, y1]); + var cellName2 = jspreadsheet.getColumnNameFromId([x2, y2]); + console.log('The selection from ' + cellName1 + ' to ' + cellName2 + '' + '\n'); + }, + onsort: function(instance, cellNum, order) { + var order = (order) ? 'desc' : 'asc'; + console.log('The column ' + cellNum + ' sorted by ' + order + '\n'); + }, + onresizerow: function(instance, cell, height) { + console.log('The row ' + cell + ' resized to height ' + height + ' px' + '\n'); + }, + onresizecolumn: function(instance, cell, width) { + console.log('The column ' + cell + ' resized to width ' + width + ' px' + '\n'); + }, + onmoverow: function(instance, from, to) { + console.log('The row ' + from + ' was move to the position of ' + to + ' ' + '\n'); + }, + onmovecolumn: function(instance, from, to) { + console.log('The col ' + from + ' was move to the position of ' + to + ' ' + '\n'); + }, + onload: function(instance) { + console.log('New data is loaded' + '\n'); + }, + onblur: function(instance) { + console.log('The table ' + $(instance).prop('id') + ' is blur' + '\n'); + }, + onfocus: function(instance) { + console.log('The table ' + $(instance).prop('id') + ' is focus' + '\n'); + }, + onpaste: function(data) { + console.log('Paste on the table ' + $(instance).prop('id') + '' + '\n'); + }, + }); + + }; + + + + var sheetOptions = { + // allowComments: true, + contextMenu: function(o, x, y, e, items) { + var items = []; + + // Save + items.push({ + title: jSuites.translate('Save as'), + shortcut: 'Ctrl + S', + icon: 'save', + onclick: function () { + o.download(); + } + }); + + return items; + }, + search:true, + pagination:10, + // data: getSheetData(), + data: sheetData, + columns: columnList, + // columns: [ + // { type: "text", title: "이름", readOnly: true }, + // { type: "text", title: "키", readOnly: true }, + // { type: "text", title: "연봉" } + // ], + onbeforechange: function(instance, cell, x, y, value) { + var cellName = jspreadsheet.getColumnNameFromId([x,y]); + console.log('The cell ' + cellName + ' will be changed' + '\n'); + }, + oninsertcolumn: function(instance) { + console.log('Column added' + '\n'); + }, + /*onchange: function(instance, cell, x, y, value) { + var cellName = jspreadsheet.getColumnNameFromId([x,y]); + console.log('onchange :: ' + cell + " :; x :: " + x + " :: y :: " + y +" :: cellName ::" + cellName + ' to: ' + value + '\n'); + if (x == 2) { + var key = instance.jexcel.getValueFromCoords(1, y); + if (!modifiedRows[key]) { + modifiedRows[key] = {}; + } + modifiedRows[key].이름 = instance.jexcel.getValueFromCoords(0, y); + modifiedRows[key].키 = instance.jexcel.getValueFromCoords(1, y); + modifiedRows[key].연봉 = value; + } + },*/ + oninsertrow: function(instance, rowNumber) { + console.log('Row added' + rowNumber); + }, + ondeleterow: function(instance, rowNumber) { + console.log('Row deleted' + rowNumber); + }, + ondeletecolumn: function(instance) { + console.log('Column deleted' +'\n'); + }, + onselection: function(instance, x1, y1, x2, y2, origin) { + var cellName1 = jspreadsheet.getColumnNameFromId([x1, y1]); + var cellName2 = jspreadsheet.getColumnNameFromId([x2, y2]); + console.log('The selection from ' + cellName1 + ' to ' + cellName2 + '' + '\n'); + }, + onsort: function(instance, cellNum, order) { + var order = (order) ? 'desc' : 'asc'; + console.log('The column ' + cellNum + ' sorted by ' + order + '\n'); + }, + onresizerow: function(instance, cell, height) { + console.log('The row ' + cell + ' resized to height ' + height + ' px' + '\n'); + }, + onresizecolumn: function(instance, cell, width) { + console.log('The column ' + cell + ' resized to width ' + width + ' px' + '\n'); + }, + onmoverow: function(instance, from, to) { + console.log('The row ' + from + ' was move to the position of ' + to + ' ' + '\n'); + }, + onmovecolumn: function(instance, from, to) { + console.log('The col ' + from + ' was move to the position of ' + to + ' ' + '\n'); + }, + onload: function(instance) { + console.log('New data is loaded' + '\n'); + }, + onblur: function(instance) { + console.log('The table ' + $(instance).prop('id') + ' is blur' + '\n'); + }, + onfocus: function(instance) { + console.log('The table ' + $(instance).prop('id') + ' is focus' + '\n'); + }, + onpaste: function(data) { + console.log('Paste on the table ' + $(instance).prop('id') + '' + '\n'); + }, + }; + + return { + setSheetData, + getSheetData, + sheetRender + } +})(); //즉시실행함수 \ No newline at end of file