|
@@ -52,6 +52,12 @@ let _vmsFormBgCdData = null;
|
|
|
let _vmsObjFormNm = null;
|
|
|
let _vmsFormFontData = null;
|
|
|
let _vmsInputMap = new Map();
|
|
|
+let _objDelBtn = null;
|
|
|
+let _objAddBtn = null;
|
|
|
+let _objmoveUpBtn = null;
|
|
|
+let _objmoveDnBtn = null;
|
|
|
+let _modalList = null;
|
|
|
+
|
|
|
const _selectedColor = 'rgb(125, 116, 116)';
|
|
|
const alignDataSource = [
|
|
|
{
|
|
@@ -72,6 +78,7 @@ let formInfoDiv = $(`<div class="form-info-edit-sect b0">
|
|
|
<div class="img-box">
|
|
|
<img class="vms-img">
|
|
|
<div class="b0 img-text">폼 미리보기</div>
|
|
|
+ <a class='download' download=''></a>
|
|
|
</div>
|
|
|
<div class="ml-5">
|
|
|
<div class="img-save-btn"></div>
|
|
@@ -376,7 +383,30 @@ let formViewBtn = second.children().eq(1).children().eq(0);
|
|
|
let formApplyBtn = second.children().eq(2).children().eq(0);
|
|
|
|
|
|
$(()=>{
|
|
|
-
|
|
|
+ //모달 div form-type-select-btn
|
|
|
+ const modalDiv = $(
|
|
|
+ `<div class='modal-background'>
|
|
|
+ <div class='modal-screen b0'>
|
|
|
+ <div class='serve-title color modal-title'>
|
|
|
+ <div>VMS 폼 유형 선택</div>
|
|
|
+ <div class='modal-x-btn'></div>
|
|
|
+ </div>
|
|
|
+ <div class='modal-container'>
|
|
|
+ <div class='b0'>
|
|
|
+ <div class='serve-title'>폼 유형 목록</div>
|
|
|
+ <div class='modal-table-box b2'>
|
|
|
+ <div class='modal-list'></div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class='form-type-select-btn'></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>`
|
|
|
+ );
|
|
|
+ $('body').append(modalDiv);
|
|
|
+
|
|
|
//소통정보 이력분석 테이블
|
|
|
_listTable = $(".list-table").width('100%').height('100%').dxDataGrid({
|
|
|
dataSource : null,
|
|
@@ -460,6 +490,7 @@ $(()=>{
|
|
|
rowAlternationEnabled : true,
|
|
|
columnAutoWidth : true,
|
|
|
focusedRowEnabled : true,
|
|
|
+ disabled : true,
|
|
|
keyExpr : 'form_object_id',
|
|
|
noDataText : '등록되어 있는 객체 정보가 없습니다.',
|
|
|
scrolling : {
|
|
@@ -575,11 +606,12 @@ $(()=>{
|
|
|
box : directDiv,
|
|
|
},
|
|
|
],
|
|
|
- selectIndex:0,
|
|
|
- loop:false,
|
|
|
- animationEnabled: true,
|
|
|
- swipeEnabled: false,
|
|
|
- itemTitleTemplate: function(e){
|
|
|
+ disabled : true,
|
|
|
+ selectIndex : 0,
|
|
|
+ loop : false,
|
|
|
+ animationEnabled : true,
|
|
|
+ swipeEnabled : false,
|
|
|
+ itemTitleTemplate : function(e){
|
|
|
return $('<div style="height:29px; line-height:29px;">'+e.name+'</div>')
|
|
|
},
|
|
|
itemTemplate: function(e){
|
|
@@ -605,6 +637,53 @@ $(()=>{
|
|
|
}
|
|
|
}).dxSelectBox('instance');
|
|
|
|
|
|
+ _modalList = $('.modal-list').dxDataGrid({
|
|
|
+ dataSource : null,
|
|
|
+ allowColumnReordering : true,
|
|
|
+ showColumnLines : true,
|
|
|
+ showBorders : true,
|
|
|
+ allowColumnResizing : true,
|
|
|
+ rowAlternationEnabled : true,
|
|
|
+ columnAutoWidth : true,
|
|
|
+ focusedRowEnabled : true,
|
|
|
+ keyExpr : 'vms_form_type_cd',
|
|
|
+ noDataText : '폼 유형 정보가 없습니다.',
|
|
|
+ scrolling : {
|
|
|
+ mode : 'standard',
|
|
|
+ },
|
|
|
+ selection: {
|
|
|
+ mode: 'single',
|
|
|
+ },
|
|
|
+ paging: {
|
|
|
+ enabled: true,
|
|
|
+ pageSize: 1000,
|
|
|
+ },
|
|
|
+ sorting : {
|
|
|
+ showSortIndexes : false,
|
|
|
+ mode : 'none',
|
|
|
+ },
|
|
|
+ columns:[
|
|
|
+ {
|
|
|
+ dataField : "vms_form_type_cd",
|
|
|
+ caption : "코드",
|
|
|
+ alignment : "center",
|
|
|
+ cssClass : 'no-padding',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dataField : "vms_form_type_nm",
|
|
|
+ caption : "VMS 폼 유형",
|
|
|
+ alignment : "center",
|
|
|
+ cssClass : 'no-padding',
|
|
|
+ cellTemplate(c,e){
|
|
|
+ c.css('text-align','left');
|
|
|
+ c.text(e.displayValue);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }).dxDataGrid('instance');
|
|
|
+
|
|
|
+ creatBtn($('.modal-x-btn'), 'close', null, '닫기', 'text', modalClose);
|
|
|
+ creatBtn($('.form-type-select-btn'), 'check', '폼 유형 선택', '폼 유형 선택', 'outlined', formTypeSelect);
|
|
|
/**
|
|
|
* vms 폼 정보
|
|
|
*/
|
|
@@ -622,7 +701,7 @@ $(()=>{
|
|
|
_vmsFormObjBgCd = inputBox( 'form', formBgColor, 'vms_form_bckg_hue_cd', 'select', 100, null, 'color', 'vms_font_colr_cd' );
|
|
|
_vmsFormObjTypeCd = inputBox( null, objTypeCd, 'vms_form_object_type_cd', 'select', 240, null, 'vms_form_object_type_desc', 'vms_form_object_type_cd' );
|
|
|
//vms 폼 이미지 저장 버튼
|
|
|
- _imgSaveBtn = creatBtn($('.img-save-btn'), 'save', '폼 이미지 저장', '폼 이미지 저장', 'outlined', formImgSave, null, true, true, 30);
|
|
|
+ _imgSaveBtn = creatBtn($('.img-save-btn'), 'save', '폼 이미지 저장', '폼 이미지 저장', 'outlined', null, null, true, true, 30);
|
|
|
|
|
|
|
|
|
/**
|
|
@@ -640,19 +719,13 @@ $(()=>{
|
|
|
_editTextColor = inputBox( 'obj', textColor, 'vms_font_hue_cd', 'select', 100, null, 'color', 'vms_font_colr_cd' );
|
|
|
_editTextSize = inputBox( 'obj', textSize, 'vms_font_size', 'number', 80 );
|
|
|
_editTextAlign = inputBox( 'obj', textAlign, 'vms_font_align', 'select', 80, null, 'vms_font_align_desc', 'vms_font_align' );
|
|
|
-
|
|
|
- _editTextInfo.box.on('input',function(e){
|
|
|
- const rowData = _objList.getSelectedRowsData();
|
|
|
- console.log(rowData);
|
|
|
- let html = canvas.children('#'+rowData[0].form_object_id).html();
|
|
|
- console.log(e.event.originalEvent.data, html);
|
|
|
- });
|
|
|
- //객체 목록 버튼
|
|
|
- creatBtn( objDel, null, '객체삭제', '객체삭제', 'outlined', objDelEvent, null, false, true, 26);
|
|
|
- creatBtn( objAdd, null, '객체추가', '객체추가', 'outlined', objAddEvent, null, false, true, 26);
|
|
|
- creatBtn( objMoveUp, 'chevronup', null, '위로', 'contained', () => listMove(-1), null, false, true, 26);
|
|
|
- creatBtn( objMoveDown, 'chevrondown', null, '아래로', 'contained', () => listMove(1), null, false, true, 26);
|
|
|
|
|
|
+ //객체 목록 버튼
|
|
|
+ _objDelBtn = creatBtn( objDel, null, '객체삭제', '객체삭제', 'outlined', objDelEvent, null, true, true, 26);
|
|
|
+ _objAddBtn = creatBtn( objAdd, null, '객체추가', '객체추가', 'outlined', objAddEvent, null, true, true, 26);
|
|
|
+ _objmoveUpBtn = creatBtn( objMoveUp, 'chevronup', null, '위로', 'text', () => listMove(-1), null, true, true, 26);
|
|
|
+ _objmoveDnBtn = creatBtn( objMoveDown, 'chevrondown', null, '아래로', 'text', () => listMove(1), null, true, true, 26);
|
|
|
+
|
|
|
//폼 객체 편집 버튼
|
|
|
creatBtn( objMoveUp, 'chevronup', null, '위로', 'contained', () => listMove(-1), null, false, true, 26);
|
|
|
creatBtn( objMoveDown, 'chevrondown', null, '아래로', 'contained', () => listMove(1), null, false, true, 26);
|
|
@@ -835,7 +908,8 @@ function recvVmsFormTypeFunc(jsonData){
|
|
|
_vmsFormTypeCd.data = _vmsFormTypeCdData;
|
|
|
_vmsFormTypeCd.box.option('dataSource', _vmsFormTypeCdData);
|
|
|
setValue(_vmsFormTypeCd.box, _vmsFormTypeCdData[0].vms_form_type_cd);
|
|
|
-
|
|
|
+ console.log(jsonData);
|
|
|
+ _modalList.option('dataSource', jsonData);
|
|
|
}
|
|
|
|
|
|
//VMS TYPE 콤보박스 선택 이벤트
|
|
@@ -891,8 +965,12 @@ function listTableClick(formId) {
|
|
|
dsblOffBtn(_delBtn);
|
|
|
dsblOffBtn(_formCopyBtn);
|
|
|
dsblOffBtn(_imgSaveBtn);
|
|
|
+ _imgSaveBtn.off('click');
|
|
|
+ _imgSaveBtn.on('click', ()=> formImgSave('data:image/png;base64,' + data.form.vms_form_imag, formId));
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
/**
|
|
|
* 객체 목록 더블 클릭 함수
|
|
|
* @param {*} info 테이블 정보
|
|
@@ -902,26 +980,46 @@ function objListDblClick(info){
|
|
|
const rowData = info.data;
|
|
|
const rowIndex = info.rowIndex;
|
|
|
let dataSource = _objList.option('dataSource');
|
|
|
- for (let ii = 0; ii < canvas.children().length; ii++) {
|
|
|
- if(canvas.children().eq(ii).css('background-color') === _selectedColor){
|
|
|
- dataSource.filter((item)=>{
|
|
|
-
|
|
|
- })
|
|
|
- canvas.children().eq(ii).css('background-color', 'rgb(0,0,0)');
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ dataSource.map((obj)=>{
|
|
|
+ _vmsFormFontColrData.filter((color)=>{
|
|
|
+ if(obj.vms_dspl_bkcolor === color.vms_font_colr_cd){
|
|
|
+ $('#' + obj.form_object_id).css('background-color', color.color);
|
|
|
+ $('#' + obj.form_object_id).css('border-bottom','');
|
|
|
+ $('#' + obj.form_object_id).css('border-right', '');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
canvas.children().eq(rowIndex).css('background-color', _selectedColor);
|
|
|
+ canvas.children().eq(rowIndex).css('border-bottom', '1px solid ' + _selectedColor);
|
|
|
+ canvas.children().eq(rowIndex).css('border-right', '1px solid ' + _selectedColor);
|
|
|
setObjData(info.data);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+function setObjData(data){
|
|
|
+ _vmsInputMap.get('obj').forEach((info)=>{
|
|
|
+ if (info.type === 'check'){
|
|
|
+ let check = data[info.column] === 1 ? true: false;
|
|
|
+ setValue(info.box, check);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ setValue(info.box, data[info.column]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ setValue(_editObjTypeCd.box, data[_editObjTypeCd.column]);
|
|
|
+}
|
|
|
+
|
|
|
function eventOn(){
|
|
|
hideBtn(_editBtn);
|
|
|
showBtn(_cancelBtn);
|
|
|
dsblOnBtn(_delBtn);
|
|
|
dsblOnBtn(_formCopyBtn);
|
|
|
- dsblOnBtn(_imgSaveBtn);
|
|
|
dsblOffBtn(_saveBtn);
|
|
|
+ dsblOffBtn(_objDelBtn);
|
|
|
+ dsblOffBtn(_objAddBtn);
|
|
|
+ _formTab.option('selectedIndex', 1);
|
|
|
_vmsMsgDsplMthdCd.box.option('readOnly', false);
|
|
|
_vmsMsgDsplDrctCd.box.option('readOnly', false);
|
|
|
_vmsObjFormNm .box.option('readOnly', false);
|
|
@@ -930,15 +1028,43 @@ function eventOn(){
|
|
|
_vmsFormObjTypeCd.box.option('readOnly', false);
|
|
|
_vmsInputMap.get('obj').forEach((obj)=>{
|
|
|
obj.box.option('readOnly', false);
|
|
|
+ });
|
|
|
+ _editTextInfo.box.off('keyUp');
|
|
|
+ _editTextInfo.box.on('keyUp', function(e){
|
|
|
+ const rowData = _objList.getSelectedRowsData()[0];
|
|
|
+ canvas.children('#' + rowData.form_object_id).html(window.event.target.value.replaceAll(" ", " "));
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function eventOff(){
|
|
|
+ showBtn(_editBtn);
|
|
|
+ hideBtn(_cancelBtn);
|
|
|
+ dsblOffBtn(_delBtn);
|
|
|
+ dsblOffBtn(_formCopyBtn);
|
|
|
+ dsblOffBtn(_imgSaveBtn);
|
|
|
+ dsblOnBtn(_saveBtn);
|
|
|
+ _editTextInfo.box.off('change');
|
|
|
+ _vmsMsgDsplMthdCd.box.option('readOnly', true);
|
|
|
+ _vmsMsgDsplDrctCd.box.option('readOnly', true);
|
|
|
+ _vmsObjFormNm .box.option('readOnly', true);
|
|
|
+ _vmsObjFormExpl .box.option('readOnly', true);
|
|
|
+ _vmsFormObjBgCd .box.option('readOnly', true);
|
|
|
+ _vmsFormObjTypeCd.box.option('readOnly', true);
|
|
|
+ _vmsInputMap.get('obj').forEach((obj)=>{
|
|
|
+ obj.box.option('readOnly', true);
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-function formImgSave(){
|
|
|
|
|
|
+//폼이미지 저장 함수
|
|
|
+function formImgSave(image, formId){
|
|
|
+ $('.download').prop('href', image);
|
|
|
+ $('.download').prop('download', formId + '.bmp');
|
|
|
+ $('.download')[0].click();
|
|
|
}
|
|
|
|
|
|
function addEvent(){
|
|
|
- eventOn();
|
|
|
+ $('.modal-background').css('display', 'flex');
|
|
|
}
|
|
|
|
|
|
function editEvent(){
|
|
@@ -950,7 +1076,7 @@ function delEvent(){
|
|
|
}
|
|
|
|
|
|
function cancelEvent(){
|
|
|
-
|
|
|
+ eventOff();
|
|
|
}
|
|
|
|
|
|
function formCopy(){
|
|
@@ -969,24 +1095,28 @@ function objAddEvent(){
|
|
|
|
|
|
}
|
|
|
|
|
|
+function formTypeSelect(){
|
|
|
+ eventOn();
|
|
|
+}
|
|
|
+
|
|
|
let isMove = true;
|
|
|
function listMove(changeNum){
|
|
|
+ if(_editBtn.option('visible')) return false;
|
|
|
if (!isMove) {
|
|
|
console.log("dup click. move dn");
|
|
|
return;
|
|
|
}
|
|
|
- const selRowKeys = montPrpcTable.getSelectedRowKeys();
|
|
|
+ const selRowKeys = _objList.getSelectedRowKeys();
|
|
|
if (selRowKeys == 0) {
|
|
|
- console.log("unselected: ", montPrpcTable.getSelectedRowsData().length);
|
|
|
+ console.log("unselected: ", _objList.getSelectedRowsData().length);
|
|
|
return;
|
|
|
}
|
|
|
const selectKey = selRowKeys[0];
|
|
|
- const selectRow = montPrpcTable.getRowIndexByKey(selectKey);
|
|
|
+ const selectRow = _objList.getRowIndexByKey(selectKey);
|
|
|
const changeRow = selectRow + changeNum;
|
|
|
let result = false;
|
|
|
- console.log(montPrpcTable.option('dataSource'));
|
|
|
if(changeNum === 1){
|
|
|
- result = changeRow < montPrpcTable.option('dataSource').length ? true : false;
|
|
|
+ result = changeRow < _objList.option('dataSource').length ? true : false;
|
|
|
}
|
|
|
else{
|
|
|
result = changeRow >= 0 ? true : false;
|
|
@@ -994,25 +1124,61 @@ function listMove(changeNum){
|
|
|
|
|
|
if (result) {
|
|
|
isMove = false;
|
|
|
- const dataSource = [...montPrpcTable.option('dataSource')];
|
|
|
+ const dataSource = [..._objList.option('dataSource')];
|
|
|
dataSource.sort(function(a,b){
|
|
|
- return a['monitoring_seq'] - b['monitoring_seq'];
|
|
|
+ return a['form_object_id'] - b['form_object_id'];
|
|
|
})
|
|
|
+
|
|
|
+ const columns = [
|
|
|
+ 'imag_data',
|
|
|
+ 'symb_expl',
|
|
|
+ 'symb_lib_nmbr',
|
|
|
+ 'trfc_fill_cd',
|
|
|
+ 'trfc_fill_desc',
|
|
|
+ 'vms_dspl_bkcolor',
|
|
|
+ 'vms_dspl_blinking',
|
|
|
+ 'vms_dspl_figr',
|
|
|
+ 'vms_dspl_height',
|
|
|
+ 'vms_dspl_size',
|
|
|
+ 'vms_dspl_txt',
|
|
|
+ 'vms_dspl_width',
|
|
|
+ 'vms_dspl_xcrdn',
|
|
|
+ 'vms_dspl_ycrdn',
|
|
|
+ 'vms_font_align',
|
|
|
+ 'vms_font_hue_cd',
|
|
|
+ 'vms_font_hue_desc',
|
|
|
+ 'vms_font_shpe_nm',
|
|
|
+ 'vms_font_size',
|
|
|
+ 'vms_font_styl_cd',
|
|
|
+ 'vms_font_styl_desc',
|
|
|
+ 'vms_font_type_cd',
|
|
|
+ 'vms_font_type_desc',
|
|
|
+ 'vms_form_bckg_hue_cd',
|
|
|
+ 'vms_form_dspl_clmn',
|
|
|
+ 'vms_form_dspl_row',
|
|
|
+ 'vms_form_id',
|
|
|
+ 'vms_form_nm',
|
|
|
+ 'vms_form_object_type_cd',
|
|
|
+ 'vms_form_object_type_desc',
|
|
|
+ 'vms_form_type_cd',
|
|
|
+ 'vms_ifsc_id',
|
|
|
+ 'vms_type_cd',
|
|
|
+ ];
|
|
|
+
|
|
|
const selectData = {...dataSource[selectRow]};
|
|
|
const changeData = {...dataSource[changeRow]};
|
|
|
|
|
|
- const columns = ['cctv_ctlr_nmbr', 'strmrtmpaddr','istl_lctn_nm','cctv_ctlr_id','strm_http_addr','monitoring_nm','monitoring_type'];
|
|
|
columns.forEach((column) => {
|
|
|
dataSource[selectRow][column] = changeData[column];
|
|
|
dataSource[changeRow][column] = selectData[column];
|
|
|
});
|
|
|
|
|
|
- montPrpcTable.option('dataSource', dataSource);
|
|
|
+ _objList.option('dataSource', dataSource);
|
|
|
|
|
|
- montPrpcTable.refresh().done(()=>{
|
|
|
- montPrpcTable.clearSelection();
|
|
|
- montPrpcTable.selectRowsByIndexes(changeRow);
|
|
|
- montPrpcTable.option('focusedRowIndex', changeRow);
|
|
|
+ _objList.refresh().done(()=>{
|
|
|
+ _objList.clearSelection();
|
|
|
+ _objList.selectRowsByIndexes(changeRow);
|
|
|
+ _objList.option('focusedRowIndex', changeRow);
|
|
|
|
|
|
isMove = true;
|
|
|
});
|
|
@@ -1035,6 +1201,12 @@ function fontWeight(){
|
|
|
|
|
|
}
|
|
|
|
|
|
+function modalClose(){
|
|
|
+ _modalList.clearSelection();
|
|
|
+ _modalList.option('focusedRowIndex', -1);
|
|
|
+ $('.modal-background').css('display', 'none');
|
|
|
+}
|
|
|
+
|
|
|
/**
|
|
|
* input 생성 함수
|
|
|
* @param {*} postion 생성 위치
|
|
@@ -1148,7 +1320,7 @@ function setData(data){
|
|
|
|
|
|
const lookupData = _objList.option('columns[1].lookup.dataSource');
|
|
|
//오브젝트 데이터
|
|
|
- if(lookupData !== dataSource){
|
|
|
+ if (lookupData !== dataSource){
|
|
|
_objList.option('columns[1].lookup.dataSource', dataSource);
|
|
|
}
|
|
|
_vmsInputMap.get('obj').forEach((info)=>{
|
|
@@ -1165,7 +1337,6 @@ function setData(data){
|
|
|
|
|
|
_editObjTypeCd.box.option('dataSource', dataSource);
|
|
|
_vmsFormObjTypeCd.box.option('dataSource', dataSource);
|
|
|
-
|
|
|
setValue(_vmsFormObjTypeCd.box, dataSource[0][_vmsFormObjTypeCd.column]);
|
|
|
setValue(_editObjTypeCd.box, dataSource[0][_editObjTypeCd.column]);
|
|
|
_objList.refresh().then(()=>{
|