import { TMapMngr, TFclt } from "/js/vworld/map-mngr.js"; import { LayerType, LayerIndex } from "/js/vworld/map-const.js"; let _mapManager = null; let _selectFcltNmbr = null; const _lyrIdx = LayerIndex.Cctv; //우측 섹션 관련 let _managerData = []; let _managerTable = null; let _idArr = []; let cctvNo = null; let cctvNm = null; let cctvId = null; let cctvX = null; let cctvY = null; let ctrlIp = null; let ctlrPort = null; let strmSvrIp = null; let strmSvrPort = null; let lctnNm = null; let strmSesnNm = null; let camNo = null; let outRstp = null; let intrHttp = null; let outHttp = null; let webRtcId = null; let webRtcIp = null; let webRtcPort = null; let rtcId = null; let rtcIp = null; let rtcPort = null; let saveBtn = null; let cancleBtn = null; let addBtn = null; let delBtn = null; let editBtn = null; let addNum = 0; let nmbrCheck = null; let homepageYn = null; let cctvCaptIp = null; const ipExpr = /^[0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}$/; const _updateColumns = { altt_imag_dspl_yn: "N", altt_imag_nmbr: 0, cctv_area_dvsn: "1", cctv_capt_ip : null, cctv_capt_port: null, cctv_ctlr_id: null, cctv_ctlr_ip: null, cctv_ctlr_local_no: 0, cctv_ctlr_nmbr: null, cctv_ctlr_port: null, cctv_id: null, cctv_nm: null, cctv_type_cd : null, fan_off_tmpr : 25, fan_on_tmpr : 30, hetr_off_tmpr : 10, hetr_on_tmpr : 5, del_yn : "N", intr_http_addr: null, istl_lctn_addr: null, istl_lctn_nm: null, link_id: null, node_id: null, strm_rtsp_addr: null, strm_http_addr: null, strm_sesn_nm: null, strm_svr_ip : null, strm_svr_port : null, syop_cntl_yn: "N", use_yn : "Y", rtc_id : null, rtc_svr_ip : null, rtc_svr_port: 0, x_crdn: 0, y_crdn: 0, homepage_yn: null, }; //공통 let commonUri = "/api/cctv/manager/info"; const _pageName = 'CCTV 기본정보 관리'; const pageMsg = "CCTV"; const inputArr = [ (cctvNo = { box : null, option : 80, disabled : true, label : "CCTV 관리번호", column : "cctv_ctlr_nmbr", max : 10, must : true, }), (cctvId = { box : null, option : 120, disabled : false, label : "제어기 ID", column : "cctv_ctlr_id", id : true, max : 10, must : true, }), (camNo = { box : null, option : 60, disabled : false, label : "카메라 번호", column : "cctv_ctlr_local_no", number : true, max : 5, must : true, }), (cctvNm = { box : null, option : 255, disabled : false, label : "CCTV 명칭", column : "cctv_nm", max : 40, must : true, }), (lctnNm = { box : null, option : 255, label : "위치명", must : true, disabled : false, column : "istl_lctn_nm", max : 40, }), (ctrlIp = { box : null, option : 140, label : "제어기 IP", disabled : false, must : true, expr : ipExpr, column : "cctv_ctlr_ip", max : 20, }), (ctlrPort = { box : null, option : 80, label : "제어기 PORT", disabled : false, must : true, number : true, column : "cctv_ctlr_port", max : 5, }), (cctvCaptIp = { box : null, option : 255, label : "카메라 IP", disabled : false, must : false, number : false, column : "cctv_capt_ip", max : 20, }), (cctvX = { box : null, option : 110, label : "X좌표", disabled : false, must : true, value : "0.00000000", method: function (e) { crdnChanges(e, 3); }, column: "x_crdn", max: 12, }), (cctvY = { box : null, option : 110, disabled : false, label : "Y좌표", must : true, value : "0.00000000", method: function (e) { crdnChanges(e, 2); }, column: "y_crdn", max: 11, }), (strmSvrIp = { box : null, option : 140, label : "분배서버 IP", disabled : false, must : true, expr : ipExpr, column : "strm_svr_ip", max : 20, }), (strmSvrPort = { box : null, option : 80, label : "분배서버 PORT", disabled : false, must : true, number : true, column : "strm_svr_port", max : 5, }), (strmSesnNm = { box : null, option : 255, label : "스트리밍 세션명", disabled : false, column : "strm_sesn_nm", max : 200, }), (outRstp = { class : "out-rstp", box : null, option : 255, label : "스트리밍 RSTP 주소", disabled : false, column : "strm_rtsp_addr", max : 200, }), // (intrHttp = { // box : null, // option : 255, // label : "인터넷 HLS 주소", // disabled : false, // column : "intr_http_addr", // max : 200, // }), // (outHttp = { // box : null, // option : 255, // label : "스트리밍 HTTP 주소", // disabled : false, // column : "strm_http_addr", // max : 200, // }), (webRtcId = { box : null, option : 255, label : "WEB RTC ID", disabled : false, column : "rtc_id", max : 56, }), (webRtcIp = { box : null, option : 140, label : "WEB RTC IP", disabled : false, column : "web_rtc_svr_ip", // expr : ipExpr, max : 30, }), (webRtcPort = { box : null, option : 80, label : "WEB RTC PORT", number : true, disabled : false, column : "web_rtc_svr_port", max : 5, }), (rtcId = { box : null, option : 255, label : "RTC ID", disabled : false, column : "web_rtc_id", max : 56, }), (rtcIp = { box : null, option : 140, label : "RTC IP", disabled : false, column : "rtc_svr_ip", expr : ipExpr, max : 20, }), (rtcPort = { box : null, option : 80, label : "RTC PORT", number : true, disabled : false, column : "rtc_svr_port", max : 5, }), (homepageYn = { box : null, option : 80, label : "홈페이지 영상표출", select : true, dataSource: ['Y', 'N'], disabled : false, column : 'homepage_yn' }) ]; const btnArr = [ (editBtn = { class: "edit-btn", box: null, option: 80, visible: true, disabled: true, dbdsb: false, edit: { click: { visible: false, disabled: false, }, cancle: { visible: true, disabled: false, }, }, add: { click: { visible: false, disabled: false, }, selected: { visible: true, disabled: false, }, unSelected: { visible: true, disabled: true, }, }, addvsb: false, icon: "edit", text: "편집", method: function () { editEvent(); }, }), (cancleBtn = { class: "cancle-btn", box: null, option: 80, visible: false, disabled: false, dbdsb: false, edit: { click: { visible: true, disabled: false, }, cancle: { visible: false, disabled: false, }, }, add: { click: { visible: true, disabled: false, }, selected: { visible: false, disabled: false, }, unSelected: { visible: false, disabled: false, }, }, addvsb: true, icon: "close", text: "취소", }), (addBtn = { class: "add-btn", box: null, option: 80, disabled: false, visible: true, edit: { click: { visible: true, disabled: true, }, cancle: { visible: true, disabled: false, }, }, add: { click: { visible: true, disabled: true, }, selected: { visible: true, disabled: false, }, unSelected: { visible: true, disabled: false, }, }, dbdsb: false, adddsb: true, icon: "plus", text: "추가", method: function () { addEvent(); }, }), (delBtn = { class: "del-btn", box: null, option: 80, disabled: true, visible: true, edit: { click: { visible: true, disabled: true, }, cancle: { visible: true, disabled: false, }, }, add: { click: { visible: true, disabled: true, }, selected: { visible: true, disabled: false, }, unSelected: { visible: true, disabled: true, }, }, dbdsb: false, adddsb: true, icon: "minus", text: "삭제", method: function () { const cctvCtlrNmbr = _managerTable.getSelectedRowsData()[0].cctv_ctlr_nmbr; confirmMessage(pageMsg + "번호 : " + cctvCtlrNmbr + "
선택하신 " + pageMsg + " 정보를 삭제하시겠습니까?").done((yes)=>{ if (yes === true) { const result = deleteData(commonUri, cctvCtlrNmbr); if (result > 0) { delResultMsg(pageMsg); boxInit(); buttonReset("add", "unSelected"); _managerTable.option("focusedRowKey", null); _managerData = []; getData(commonUri, _managerData); dataSorting(_managerData[0], 'cctv_ctlr_id'); _managerTable.option('dataSource', _managerData[0]); deleteFcltObject(cctvCtlrNmbr); } } }); }, }), (saveBtn = { class: "save-btn", box: null, option: 80, disabled: true, dbdsb: true, edit: { click: { visible: true, disabled: false, }, cancle: { visible: true, disabled: true, }, }, add: { click: { visible: true, disabled: false, }, selected: { visible: true, disabled: true, }, unSelected: { visible: true, disabled: true, }, }, adddsb: false, visible: true, icon: "save", text: "저장", }), ]; let typeCd = null; //let useYn = null; $(() => { typeCd = new dxSelect($('.cctv_type_cd'), 'outlined', 140, 27, 'cctv_type_cd_desc', 'cctv_type_cd', true, 'cctv_type_cd', 'CCTV 유형코드'); //상단 닫기 버튼 $(".cancle-button") .dxButton({ text: "닫기", icon: "close", height: "30px", width: "80px", stylingMode: "outlined", onClick() { window.close(); }, }) .dxButton("instance"); inputArr.map((item) => { if (item.select) { item.box = $("." + item.column) .dxSelectBox({ width: item.option, stylingMode: "outlined", readOnly: true, height: 27, dataSource: item.dataSource, }) .dxSelectBox("instance"); } else { item.box = $("." + item.column) .dxTextBox({ width: item.option, stylingMode: "outlined", readOnly: true, maxLength: item.max, height: 27, }) .dxTextBox("instance"); } if (item.value) { item.box.option("value", item.value); } if (item.method) { item.box.on("valueChanged", item.method); } }); btnArr.map((item) => { item.box = $("." + item.class) .dxButton({ icon: item.icon, width: item.option, text: item.text, visible: item.visible, disabled: item.disabled, focusStateEnabled: false, stylingMode: "outlined", onClick() { if (item.method) { item.method(); } }, }) .dxButton("instance"); }); // 지도객체 생성 doMap(); // 시설물 정보를 읽어 온다. getData(commonUri, _managerData); if (_managerData[0].length > 0) { dataSorting(_managerData[0], 'cctv_ctlr_id'); } updateIcon(); //CCTV 제어기 목록 let columns = [ { dataField: "cctv_ctlr_id", caption: "CCTV ID", width: 120, alignment: "center", }, { dataField: "istl_lctn_nm", caption: "설치 위치", alignment: "center", cellTemplate(c, e) { c.css("text-align", "left"); return c.text(e.displayValue); }, }, ]; _managerTable = initializedGrid($(".manager-table"), '100%', '100%', columns, _managerData[0], 'single', 'standard', 'cctv_ctlr_nmbr', false, true, false, 1000, false, false, false, '', true, '', null) .dxDataGrid("instance"); _managerTable.on('rowDblClick', (e) => listDblClick(e)); fetchTypeData(); }); /** * CCTV 유형 데이터 수신 */ function fetchTypeData(){ getDataAsync(_codeUrl + '/CCTVT',(jsonData)=>{ let typeCdData = []; jsonData.map((item)=>{ typeCdData.push({ cctv_type_cd : item.cmmn_cd, cctv_type_cd_desc : '[ ' + item.cmmn_cd +' ] ' + item.cmmn_cd_kor_nm, }); }) typeCd.setDataSource(typeCdData); typeCd.setValue(jsonData[0].cmmn_cd); }); } /** * CCTV 목록 더블클릭 * @param e 더블클릭 로우 정보 */ function listDblClick(e){ _selectFcltNmbr = e.data.cctv_ctlr_nmbr; selectFcltObject(_selectFcltNmbr); inputArr.map((item) => { if (item.box) { item.box.option("value", e.data[item.column]); } }); typeCd.setValue(e.data[typeCd.column]); btnArr.map((item) => { if (item.box) { item.box.option("disabled", item.dbdsb); } }); } /** * 이벤트 활성화 */ function editEvent() { editFcltObject(_selectFcltNmbr, true); cancleBtn.box.off("click"); cancleBtn.box.on("click", () => editCancel()); eventOn(); cctvId.box.option('readOnly', true); btnArr.map((item) => { if (item.box) { item.box.option("visible", item.edit.click.visible); item.box.option("disabled", item.edit.click.disabled); } }); saveBtn.box.off('click'); saveBtn.box.on('click', () => saveEvent('edit')); } /** * 이벤트 비활성화 */ function editCancel() { updateIcon(); eventCancel(); boxPull(); buttonReset("edit", "cancle"); } /** * CCTV ID 전체 값 * @returns {*[]} CCTV ID 배열 */ function getIdArr(){ let idArr = []; if (_managerData[0].length > 0) { _managerData[0].map((obj)=>{ if(obj.cctv_ctlr_id)idArr.push(obj.cctv_ctlr_id); }) } return idArr; } /** * 저장 버튼 클릭 * @param type 편집 유형 * @returns {boolean|*} */ function saveEvent(type) { _idArr = getIdArr(); for (let input of inputArr) { const box = input.box; if (box) { const value = getValue(box) === "" ? null : getValue(box); const max = input.max; const label = input.label; if (!nullChecker(value)) { if (input.must) { return alertWarning( "필수 항목을 입력해주세요. [ " + label +" ]", null, box); } } else { if (max && getByteLength(value) > max) { return alertWarning( max + " 바이트 이내로 입력해주세요. [ " + label +" ]", null, box); } if (input.expr && !input.expr.test(value)) { return alertWarning("IP 형식에 맞게 입력해주세요. [ " + label +" ]", null, box); } if (input.number && isNaN(value)) { return alertWarning("해당 항목은 숫자만 입력이 가능합니다. [ " + label + " ]", null, box); } if (input.id && _idArr.includes(value) && type === "add") { return alertWarning( "제어기 ID : " + value + "
이미 사용중인 제어기 ID 입니다.", null, box); } } } } let updateData = {..._updateColumns}; if (type === 'edit') { // 수정모드일 경우에는.... const rowData = _managerTable.getSelectedRowsData()[0]; for (let key in updateData) { updateData[key] = rowData[key]; } console.log('edit mode...') } // 수정모드인 경우와 추가 모드 비교해야함... inputArr.map((item) => { if (item.column && item.box) { const value = item.box.option("value"); updateData[item.column] = value === "" ? null : value; } }); updateData.cctv_type_cd = typeCd.getValue(); //updateData.use_yn = useYn.getValue() ? "Y" : "N"; //ctrlIpNum let result = postInsertUpdate(commonUri + "/" + updateData.cctv_ctlr_nmbr, updateData); if (result > 0) { insResultMsg(pageMsg); _managerData = []; getData(commonUri, _managerData); dataSorting(_managerData[0], 'cctv_ctlr_id'); _managerTable.option('dataSource', _managerData[0]); _managerTable.clearSelection(); _managerTable.refresh().done(function () { _managerTable.selectRows(updateData.cctv_ctlr_nmbr, true).done(()=>{ _managerTable.option("focusedRowKey", updateData.cctv_ctlr_nmbr); boxPull(); buttonReset("add", "selected"); updateIcon(); eventCancel(); }); }); } } /** * 추가버튼 클릭 후 취소 */ function addCancel() { updateIcon(); eventCancel(); if (_managerTable.getSelectedRowsData().length > 0) { boxPull(); buttonReset("add", "selected"); return; } boxInit(); buttonReset("add", "unSelected"); } /** * 추가 버튼 클릭 */ function addEvent() { eventOn(); boxInit(); let center = _mapManager.getCenter(); cancleBtn.box.off("click"); cancleBtn.box.on("click", () => addCancel()); cctvX.box.option("value", center[0].toFixed(8)); cctvY.box.option("value", center[1].toFixed(8)); addNum = getNewNmbr(); const lastData = _managerData[0][_managerData[0].length - 1] setValue(camNo.box, lastData.cctv_ctlr_local_no + 1); setValue(homepageYn.box, "Y"); let idVal = lastData.cctv_ctlr_id; if (idVal.length){ let idNo = idVal.substring(idVal.indexOf('V') + 1, idVal.length); if (!isNaN(idNo)) { let cctvIdVal = 'CCTV' + (Number(idNo) + 10); setValue(cctvId.box, cctvIdVal); } } addFcltObject(addNum); cctvNo.box.option("value", addNum); btnArr.map((item) => { item.box.option("visible", item.add.click.visible); item.box.option("disabled", item.add.click.disabled); }); saveBtn.box.off('click'); saveBtn.box.on('click', () => saveEvent('add')); } /** * input 데이터 값 넣기 */ function boxPull() { let selectedRow = _managerTable.getSelectedRowsData()[0]; inputArr.map((item) => { if (item.box) { item.box.option("value", selectedRow[item.column]); } }); typeCd.setValue(selectedRow[typeCd.valueExpr]); } /** * input 데이터 값 초기화 */ function boxInit() { inputArr.map((item) => { if (item.value) return item.box.option("value", item.value); if (item.box) { item.box.option("value", null); } }); //useYn.setValue(false); typeCd.setValue(typeCd.getDataSource()[0][typeCd.valueExpr]) } /** * 버튼 상태 초기화 * @param eventName 이벤트 명 * @param option 옵션 */ function buttonReset(eventName, option) { btnArr.map((item) => { item.box.option("visible", item[eventName][option].visible); item.box.option("disabled", item[eventName][option].disabled); }); } /** * 이벤트 취소 */ function eventCancel() { dsblOffBtn(_managerTable); inputArr.map((item) => { if (item.box) { item.box.option("readOnly", true); } }); typeCd.setReadOnly(true); //useYn.setReadOnly(true); if(_managerTable.getSelectedRowsData().length > 0){ _selectFcltNmbr = _managerTable.getSelectedRowsData()[0].cctv_ctlr_nmbr; selectFcltObject(_selectFcltNmbr); } } /** * 이벤트 활성화 */ function eventOn() { dsblOnBtn(_managerTable); typeCd.setReadOnly(false); //useYn.setReadOnly(false); inputArr.map((item) => { if (item.box) { item.box.option("readOnly", item.disabled); } }); } /** * 제어기 신규 ID 조회 */ function getNewNmbr() { let newId = []; getData(commonUri + "/new-id", newId); _selectFcltNmbr = newId[0].new_id; return _selectFcltNmbr; } /** * 지도 인터페이스 함수........ */ function doMap() { _mapManager = new TMapMngr("traf-hs-map", "tooltip"); _mapManager.setEditMode(_lyrIdx, true); _mapManager.showLayer(_lyrIdx, true); _mapManager.onFcltDragEndFunc = onFcltDragEndFunc; // 객체(시설물) 편집시 객체 이동후 좌표 반환 _mapManager.onMouseClickFunc = onMouseClickFunc; // 객체 마우스 클릭 이벤트 반환 _mapManager.checkFcltEditMode(_lyrIdx); _mapManager.showFcltObjectText(_lyrIdx, true); fetchMapIconBar($('.map-bar'), _mapManager, _pageName, fcltObjectTextOnOff, null); } function fcltObjectTextOnOff(e){ _mapManager.showFcltObjectText(_lyrIdx, e.value); _mapManager.refreshLayer(_lyrIdx); } function onFcltDragEndFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY) { if (ALyrIdx != _lyrIdx) { return; } if (ANmbr === _selectFcltNmbr) { cctvX.box.option("value", ACoordX.toFixed(8)); cctvY.box.option("value", ACoordY.toFixed(8)); } console.log(`onFcltDragEndFunc, ${ALyrIdx}, ${ALyrName}, ${ANmbr}, ${ACoordX}, ${ACoordY}`); } function onMouseClickFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY, X, Y) { if (ALyrIdx != _lyrIdx) { return; } // console.log(`onMouseClickFunc, ${ALyrIdx}, ${ALyrName}, ${ANmbr}, ${ACoordX}, ${ACoordY}, ${X}, ${Y}`); const obj = _mapManager.findLayerObject(ALyrIdx, ANmbr); if (!obj) { return; } else { if (_selectFcltNmbr === ANmbr) { return; } if (!editBtn.box.option('visible')) { return; } _selectFcltNmbr = ANmbr; selectFcltObject(_selectFcltNmbr); _managerTable.selectRows(ANmbr).done(()=>{ _managerTable.option('focusedRowKey',ANmbr); const selectedData = _managerTable.getSelectedRowsData()[0]; inputArr.map((item) => { if (item.box) { item.box.option("value", selectedData[item.column]); } }); typeCd.setValue(selectedData[typeCd.column]); btnArr.map((item) => { item.box.option("disabled", item.dbdsb); }); }); } } /** * 지도에 시설물 객체 정보를 그린다. */ function updateIcon() { // 기존 객체를 모두 삭제한다. _mapManager.removeLayerObject(_lyrIdx); if (_managerData[0] && _managerData[0].length > 0) { // 시설물 객체를 지도에 그린다. const objs = new Array(); _managerData[0].forEach((obj) => { const item = new TFclt(obj.cctv_ctlr_nmbr, obj.istl_lctn_nm, obj.x_crdn, obj.y_crdn); objs.push(item); }); _mapManager.initFcltObject(_lyrIdx, objs); } } function selectFcltObject(ANmbr) { _mapManager.selectLayerObject(_lyrIdx, ANmbr); } function editFcltObject(ANmbr, AIsEdit) { _mapManager.editFcltObject(_lyrIdx, ANmbr, AIsEdit, AIsEdit ? "1" : "0"); } function deleteFcltObject(ANmbr) { _mapManager.deleteFcltObject(_lyrIdx, ANmbr); _selectFcltNmbr = null; } function addFcltObject(ANmbr) { _mapManager.createFcltObject(_lyrIdx, ANmbr, "New", "New", "1" /*아이콘색결정,시설물유형_N.png*/ /*, x_crdn, y_crdn*/); }