|
@@ -91,22 +91,22 @@ export function doMap() {
|
|
|
// 지도객체 먼저 생성 하여야 함
|
|
|
_mapManager = new TMapMngr("map", "tooltip");
|
|
|
websocketConnect("op");
|
|
|
- _mapManager.onMapMoveEndFunc = onMapMoveEndFunc; // 지도 이동/줌 변경 이벤트 반환
|
|
|
- _mapManager.onMouseClickFunc = onMouseClickFunc; // 객체 마우스 클릭 이벤트 반환
|
|
|
- _mapManager.onContextMenuFunc = onContextMenuFunc; // 객체 컨텍스트 이벤트 반환
|
|
|
+ _mapManager.onMapMoveEndFunc = onMapMoveEndFunc; // 지도 이동/줌 변경 이벤트 반환
|
|
|
+ _mapManager.onMouseClickFunc = onMouseClickFunc; // 객체 마우스 클릭 이벤트 반환
|
|
|
+ _mapManager.onContextMenuFunc = onContextMenuFunc; // 객체 컨텍스트 이벤트 반환
|
|
|
//_mapManager.onSelectObjFunc = onSelectObjFunc; // 객체 선택 이벤트 반환
|
|
|
//_mapManager.onFcltDragEndFunc = onFcltDragEndFunc; // 객체(시설물) 편집시 객체 이동후 좌표 반환
|
|
|
}
|
|
|
function onMapMoveEndFunc(AZoom, ACenterX, ACenterY, ALeft, ABottom, ARight, ATop) {
|
|
|
console.log(`${currDt()}: onMapMoveEndFunc, ${AZoom}, ${ACenterX}, ${ACenterY}, ${ALeft}, ${ABottom}, ${ARight}, ${ATop}`);
|
|
|
- $('.cctv-right-btn-click').remove();
|
|
|
- $('.vms-right-btn-click').remove();
|
|
|
+ $(".cctv-right-btn-click").remove();
|
|
|
+ $(".vms-right-btn-click").remove();
|
|
|
}
|
|
|
function onMouseClickFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY, X, Y) {
|
|
|
console.log(`${currDt()}: onMouseClickFunc, ${ALyrIdx}, ${ALyrName}, ${ANmbr}, ${ACoordX}, ${ACoordY}, ${X}, ${Y}`);
|
|
|
if (ALyrIdx === -1) {
|
|
|
- $('.cctv-right-btn-click').remove();
|
|
|
- $('.vms-right-btn-click').remove();
|
|
|
+ $(".cctv-right-btn-click").remove();
|
|
|
+ $(".vms-right-btn-click").remove();
|
|
|
}
|
|
|
// const obj = _mapManager.findLayerObject(ALyrIdx, ANmbr);
|
|
|
// if (!obj) {
|
|
@@ -118,23 +118,21 @@ function onMouseClickFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY, X, Y) {
|
|
|
} else if (ALyrName === "BIT") {
|
|
|
}
|
|
|
|
|
|
- let option = 'width = 575, height = 550, top = 200, left = 674, resizable=no, scrollbars=no';
|
|
|
+ let option = "width = 575, height = 550, top = 200, left = 674, resizable=no, scrollbars=no";
|
|
|
if (ALyrIdx >= LayerIndex.Link1 && ALyrIdx <= LayerIndex.Link5) {
|
|
|
- window.open('./detail-traffic-pop-up.html?id=' + ANmbr + '&type=link', '구간선택', option);
|
|
|
- }
|
|
|
- else if (ALyrIdx >= LayerIndex.Ifsc1 && ALyrIdx <= LayerIndex.Ifsc5) {
|
|
|
+ window.open("./detail-traffic-pop-up.html?id=" + ANmbr + "&type=link", "구간선택", option);
|
|
|
+ } else if (ALyrIdx >= LayerIndex.Ifsc1 && ALyrIdx <= LayerIndex.Ifsc5) {
|
|
|
console.log("IFSC, ", ANmbr);
|
|
|
- window.open('./detail-traffic-pop-up.html?id=' + ANmbr + '&type=ifsc', '구간선택', option);
|
|
|
- }
|
|
|
- else if (ALyrIdx >= LayerIndex.Road1 && ALyrIdx <= LayerIndex.Road5) {
|
|
|
+ window.open("./detail-traffic-pop-up.html?id=" + ANmbr + "&type=ifsc", "구간선택", option);
|
|
|
+ } else if (ALyrIdx >= LayerIndex.Road1 && ALyrIdx <= LayerIndex.Road5) {
|
|
|
console.log("ROAD, ", ANmbr);
|
|
|
- window.open('./detail-traffic-pop-up.html?id=' + ANmbr + '&type=road', '구간선택', option);
|
|
|
+ window.open("./detail-traffic-pop-up.html?id=" + ANmbr + "&type=road", "구간선택", option);
|
|
|
}
|
|
|
}
|
|
|
function onContextMenuFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY, X, Y) {
|
|
|
console.log(`${currDt()}: onContextMenuFunc, ${ALyrIdx}, ${ALyrName}, ${ANmbr}, ${ACoordX}, ${ACoordY}, ${X}, ${Y}`);
|
|
|
- $('.cctv-right-btn-click').remove();
|
|
|
- $('.vms-right-btn-click').remove();
|
|
|
+ $(".cctv-right-btn-click").remove();
|
|
|
+ $(".vms-right-btn-click").remove();
|
|
|
|
|
|
//cctv 우클릭 이벤트
|
|
|
if (ALyrIdx === LayerIndex.Cctv) {
|
|
@@ -147,19 +145,24 @@ function onContextMenuFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY, X, Y) {
|
|
|
<div>카메라 영상</div>
|
|
|
</div>
|
|
|
</div>`);
|
|
|
- $('body').append(div);
|
|
|
- div.css('left', X);
|
|
|
- div.css('top', Y);
|
|
|
-
|
|
|
- if (!_cctvMap.get(cctvObj.ID)){
|
|
|
+ $("body").append(div);
|
|
|
+ div.css("left", X);
|
|
|
+ div.css("top", Y);
|
|
|
+
|
|
|
+ if (!_cctvMap.get(cctvObj.ID)) {
|
|
|
_cctvMap.set(cctvObj.ID, new Map());
|
|
|
}
|
|
|
|
|
|
- $(div).children().eq(0).children().eq(1).on('click',function(e){
|
|
|
- $('.cctv-right-btn-click').remove();
|
|
|
- let src = cctvObj.strmHttpAddr;
|
|
|
- camCtrl(_cctvMap, createVideoDiv, cctvObj, src, X, Y);
|
|
|
- })
|
|
|
+ $(div)
|
|
|
+ .children()
|
|
|
+ .eq(0)
|
|
|
+ .children()
|
|
|
+ .eq(1)
|
|
|
+ .on("click", function (e) {
|
|
|
+ $(".cctv-right-btn-click").remove();
|
|
|
+ let src = cctvObj.strmHttpAddr;
|
|
|
+ camCtrl(_cctvMap, createVideoDiv, cctvObj, src, X, Y);
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
//vms 우클릭 이벤트
|
|
@@ -174,35 +177,44 @@ function onContextMenuFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY, X, Y) {
|
|
|
<div>표출메시지</div>
|
|
|
</div>
|
|
|
</div>`);
|
|
|
- $('body').append(div);
|
|
|
- div.css('left', X);
|
|
|
- div.css('top', Y);
|
|
|
- if (!_cctvMap.get(vmsObj.ID)){
|
|
|
+ $("body").append(div);
|
|
|
+ div.css("left", X);
|
|
|
+ div.css("top", Y);
|
|
|
+ if (!_cctvMap.get(vmsObj.ID)) {
|
|
|
_cctvMap.set(vmsObj.ID, new Map());
|
|
|
}
|
|
|
- if (!_vmsMap.get(vmsObj.ID)){
|
|
|
+ if (!_vmsMap.get(vmsObj.ID)) {
|
|
|
_vmsMap.set(vmsObj.ID, new Map());
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 카메라 영상 클릭 이벤트
|
|
|
- $(div).children().eq(0).children().eq(1).on('click',function(){
|
|
|
- $('.vms-right-btn-click').remove();
|
|
|
- let src = vmsObj.strmSesnNm;
|
|
|
- camCtrl(_cctvMap, createVideoDiv, vmsObj, src, X, Y)
|
|
|
- });
|
|
|
+ $(div)
|
|
|
+ .children()
|
|
|
+ .eq(0)
|
|
|
+ .children()
|
|
|
+ .eq(1)
|
|
|
+ .on("click", function () {
|
|
|
+ $(".vms-right-btn-click").remove();
|
|
|
+ let src = vmsObj.strmSesnNm;
|
|
|
+ camCtrl(_cctvMap, createVideoDiv, vmsObj, src, X, Y);
|
|
|
+ });
|
|
|
|
|
|
//표출메시지 클릭 이벤트
|
|
|
- $(div).children().eq(0).children().eq(2).on('click',function(){
|
|
|
- $('.vms-right-btn-click').remove();
|
|
|
-
|
|
|
- if(!_vmsMap.get(vmsObj.ID).get('div')){
|
|
|
- vmsMessageCtrl(vmsObj,X, Y);
|
|
|
+ $(div)
|
|
|
+ .children()
|
|
|
+ .eq(0)
|
|
|
+ .children()
|
|
|
+ .eq(2)
|
|
|
+ .on("click", function () {
|
|
|
+ $(".vms-right-btn-click").remove();
|
|
|
+
|
|
|
+ if (!_vmsMap.get(vmsObj.ID).get("div")) {
|
|
|
+ vmsMessageCtrl(vmsObj, X, Y);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-}
|
|
|
+}
|
|
|
|
|
|
/**
|
|
|
* 표출메시지 이벤트
|
|
@@ -210,12 +222,11 @@ function onContextMenuFunc(ALyrIdx, ALyrName, ANmbr, ACoordX, ACoordY, X, Y) {
|
|
|
* @param {*} X 마우스 X 좌표
|
|
|
* @param {*} Y 마우스 Y 좌표
|
|
|
*/
|
|
|
-export function vmsMessageCtrl(obj, X, Y){
|
|
|
+export function vmsMessageCtrl(obj, X, Y) {
|
|
|
let vmsData = [];
|
|
|
//vms 데이터 수신
|
|
|
- getData('/api/vms/common/vms-form/dspl-prst', vmsData, {id:obj.NMBR});
|
|
|
- if(vmsData[0]){
|
|
|
-
|
|
|
+ getData("/api/vms/common/vms-form/dspl-prst", vmsData, { id: obj.NMBR });
|
|
|
+ if (vmsData[0]) {
|
|
|
vmsData = vmsData[0];
|
|
|
//vms 이미지 데이터
|
|
|
let msgs = vmsData[0].msgs;
|
|
@@ -229,27 +240,32 @@ export function vmsMessageCtrl(obj, X, Y){
|
|
|
let width = vmsData[0].vms_wdth + 20;
|
|
|
//vms div 생성
|
|
|
let vmsDiv = createMessageDiv(obj, now);
|
|
|
-
|
|
|
- $('body').append(vmsDiv);
|
|
|
- vmsDiv.children().eq(1).css('height', imgBoxHeight);
|
|
|
- vmsDiv.children().eq(1).children().eq(0).css({height: imgBoxHeight, width: width - 20});
|
|
|
- vmsDiv.css({left:X, top:Y, width:width, height: height});
|
|
|
- let imgPosition = vmsDiv.children().eq(1).children().eq(0);
|
|
|
- let phaseNumPosition = vmsDiv.children().eq(2).children().eq(0);
|
|
|
+
|
|
|
+ $("body").append(vmsDiv);
|
|
|
+ vmsDiv.children().eq(1).css("height", imgBoxHeight);
|
|
|
+ vmsDiv
|
|
|
+ .children()
|
|
|
+ .eq(1)
|
|
|
+ .children()
|
|
|
+ .eq(0)
|
|
|
+ .css({ height: imgBoxHeight, width: width - 20 });
|
|
|
+ vmsDiv.css({ left: X, top: Y, width: width, height: height });
|
|
|
+ let imgPosition = vmsDiv.children().eq(1).children().eq(0);
|
|
|
+ let phaseNumPosition = vmsDiv.children().eq(2).children().eq(0);
|
|
|
let intervalNumPosition = vmsDiv.children().eq(2).children().eq(1);
|
|
|
- let closePosition = vmsDiv.children().eq(0).children().eq(0);
|
|
|
- let intervalArr = setVmsInterval(msgs, imgPosition, phaseNumPosition, intervalNumPosition);
|
|
|
+ let closePosition = vmsDiv.children().eq(0).children().eq(0);
|
|
|
+ let intervalArr = setVmsInterval(msgs, imgPosition, phaseNumPosition, intervalNumPosition);
|
|
|
let vmsInfo = _vmsMap.get(obj.ID);
|
|
|
- vmsInfo.set('div', vmsDiv);
|
|
|
- vmsInfo.set('intervalArr', intervalArr);
|
|
|
-
|
|
|
- dragEvent(vmsDiv, 'vms-box');
|
|
|
-
|
|
|
- closePosition.on('click', function(){
|
|
|
- clearInterval(vmsInfo.get('intervalArr')[0]);
|
|
|
- clearInterval(vmsInfo.get('intervalArr')[1]);
|
|
|
- vmsInfo.get('div').remove();
|
|
|
- vmsInfo.delete('div');
|
|
|
+ vmsInfo.set("div", vmsDiv);
|
|
|
+ vmsInfo.set("intervalArr", intervalArr);
|
|
|
+
|
|
|
+ dragEvent(vmsDiv, "vms-box");
|
|
|
+
|
|
|
+ closePosition.on("click", function () {
|
|
|
+ clearInterval(vmsInfo.get("intervalArr")[0]);
|
|
|
+ clearInterval(vmsInfo.get("intervalArr")[1]);
|
|
|
+ vmsInfo.get("div").remove();
|
|
|
+ vmsInfo.delete("div");
|
|
|
});
|
|
|
}
|
|
|
}
|
|
@@ -262,32 +278,32 @@ export function vmsMessageCtrl(obj, X, Y){
|
|
|
* @param {*} num 카운트 텍스트 위치
|
|
|
* @returns 인터벌 배열
|
|
|
*/
|
|
|
-export function setVmsInterval(data, position, phase, num){
|
|
|
+export function setVmsInterval(data, position, phase, num) {
|
|
|
let idx = 1;
|
|
|
let intervalNum = 4;
|
|
|
- $(position).prop('src', 'data:image/png;base64,'+ data[0].vms_dspl_msg_imag);
|
|
|
+ $(position).prop("src", "data:image/png;base64," + data[0].vms_dspl_msg_imag);
|
|
|
$(phase).text(`1/${data.length}`);
|
|
|
$(num).text(intervalNum--);
|
|
|
-
|
|
|
+
|
|
|
//카운트 표시 인터벌
|
|
|
- let timeInterval = setInterval(()=>{
|
|
|
+ let timeInterval = setInterval(() => {
|
|
|
$(num).text(intervalNum--);
|
|
|
- if(intervalNum === 0){
|
|
|
+ if (intervalNum === 0) {
|
|
|
intervalNum = 4;
|
|
|
- };
|
|
|
+ }
|
|
|
}, 1000);
|
|
|
|
|
|
//4초마다 이미지 변경 인터벌
|
|
|
let interval = setInterval(() => {
|
|
|
- if(data[1]){
|
|
|
- $(position).prop('src', 'data:image/png;base64,'+ data[idx++].vms_dspl_msg_imag);
|
|
|
+ if (data[1]) {
|
|
|
+ $(position).prop("src", "data:image/png;base64," + data[idx++].vms_dspl_msg_imag);
|
|
|
$(phase).text(`${idx}/${data.length}`);
|
|
|
- if(idx === data.length){
|
|
|
+ if (idx === data.length) {
|
|
|
idx = 0;
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
}, 4000);
|
|
|
-
|
|
|
+
|
|
|
return [interval, timeInterval];
|
|
|
}
|
|
|
/**
|
|
@@ -298,52 +314,53 @@ export function setVmsInterval(data, position, phase, num){
|
|
|
* @param {*} X X좌표
|
|
|
* @param {*} Y Y좌표
|
|
|
*/
|
|
|
- export function camCtrl(map, method, obj, src, X, Y){
|
|
|
- if (!map.get(obj.ID).get('video')){
|
|
|
+export function camCtrl(map, method, obj, src, X, Y) {
|
|
|
+ if (!map.get(obj.ID).get("video")) {
|
|
|
let cctvBox = method(obj);
|
|
|
$("body").append(cctvBox);
|
|
|
- cctvBox.css({left:X,top:Y});
|
|
|
+ cctvBox.css({ left: X, top: Y });
|
|
|
|
|
|
let cctvInfo = map.get(obj.ID);
|
|
|
- cctvInfo.set('div', cctvBox);
|
|
|
-
|
|
|
- //cctv 객체 생성
|
|
|
- let player = videojs('video' + obj.ID, {
|
|
|
- sources : [
|
|
|
- { src : src, type : "application/x-mpegURL"}
|
|
|
- ],
|
|
|
- controls : true,
|
|
|
- playsinline : true,
|
|
|
- muted : true,
|
|
|
- preload : "none",
|
|
|
- controlBar: {
|
|
|
- 'liveDisplay': false,
|
|
|
- 'pictureInPictureToggle': false
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
+ cctvInfo.set("div", cctvBox);
|
|
|
|
|
|
- player.play();
|
|
|
- cctvInfo.set('video', player);
|
|
|
-
|
|
|
- cctvBox.children().eq(0).children().eq(0).on('click',function(){
|
|
|
- cctvBox.css('display','none');
|
|
|
- cctvInfo.get('video').pause();
|
|
|
+ //cctv 객체 생성
|
|
|
+ let player = videojs("video" + obj.ID, {
|
|
|
+ sources: [{ src: src, type: "application/x-mpegURL" }],
|
|
|
+ controls: true,
|
|
|
+ playsinline: true,
|
|
|
+ muted: true,
|
|
|
+ preload: "none",
|
|
|
+ controlBar: {
|
|
|
+ liveDisplay: false,
|
|
|
+ pictureInPictureToggle: false,
|
|
|
+ },
|
|
|
});
|
|
|
|
|
|
- dragEvent(cctvBox, 'cctv-box');
|
|
|
+ player.play();
|
|
|
+ cctvInfo.set("video", player);
|
|
|
+
|
|
|
+ cctvBox
|
|
|
+ .children()
|
|
|
+ .eq(0)
|
|
|
+ .children()
|
|
|
+ .eq(0)
|
|
|
+ .on("click", function () {
|
|
|
+ cctvBox.css("display", "none");
|
|
|
+ cctvInfo.get("video").pause();
|
|
|
+ });
|
|
|
|
|
|
+ dragEvent(cctvBox, "cctv-box");
|
|
|
} else {
|
|
|
let cctvInfo = map.get(obj.ID);
|
|
|
- if(cctvInfo.get('div').css('display') === 'none'){
|
|
|
- cctvInfo.get('video').src([
|
|
|
+ if (cctvInfo.get("div").css("display") === "none") {
|
|
|
+ cctvInfo.get("video").src([
|
|
|
{
|
|
|
src: src,
|
|
|
- }
|
|
|
+ },
|
|
|
]);
|
|
|
- cctvInfo.get('video').play();
|
|
|
- cctvInfo.get('div').css({left:X,top:Y});;
|
|
|
- cctvInfo.get('div').css('display','block');
|
|
|
+ cctvInfo.get("video").play();
|
|
|
+ cctvInfo.get("div").css({ left: X, top: Y });
|
|
|
+ cctvInfo.get("div").css("display", "block");
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -353,7 +370,7 @@ export function setVmsInterval(data, position, phase, num){
|
|
|
* @param {*} obj 데이터 객체
|
|
|
* @returns 생성 div
|
|
|
*/
|
|
|
- export function createVideoDiv(obj){
|
|
|
+export function createVideoDiv(obj) {
|
|
|
let div = $(`<div class="cctv-box" id=${obj.ID} draggable="true">
|
|
|
<div>${obj.ID} - ${obj.NAME} <span class="b0" title="닫기">X</span></div>
|
|
|
<div>
|
|
@@ -369,7 +386,7 @@ export function setVmsInterval(data, position, phase, num){
|
|
|
* @param {*} now 현재 시각
|
|
|
* @returns 생성 div
|
|
|
*/
|
|
|
- export function createMessageDiv(obj, now){
|
|
|
+export function createMessageDiv(obj, now) {
|
|
|
let div = $(`<div draggable="true" class="vms-box">
|
|
|
<div>${obj.ID} - ${obj.NAME} <span class="b0" title="닫기">X</span></div>
|
|
|
<div>
|
|
@@ -381,31 +398,31 @@ export function setVmsInterval(data, position, phase, num){
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
- * 드래그 이벤트
|
|
|
+ * 드래그 이벤트
|
|
|
* @param {*} position 드래그 상자 위치
|
|
|
*/
|
|
|
-export function dragEvent(position, classNm){
|
|
|
- $(position).on('mousedown', function(){
|
|
|
- for (let ii = 0; ii < $('.' + classNm).length; ii++ ){
|
|
|
- $($('.' + classNm)[ii]).css('z-index', '100');
|
|
|
- };
|
|
|
- $(position).css('z-index', '101');
|
|
|
- })
|
|
|
-
|
|
|
- position.on("dragstart", function(ev){
|
|
|
+export function dragEvent(position, classNm) {
|
|
|
+ $(position).on("mousedown", function () {
|
|
|
+ for (let ii = 0; ii < $("." + classNm).length; ii++) {
|
|
|
+ $($("." + classNm)[ii]).css("z-index", "100");
|
|
|
+ }
|
|
|
+ $(position).css("z-index", "101");
|
|
|
+ });
|
|
|
+
|
|
|
+ position.on("dragstart", function (ev) {
|
|
|
let offsetX = ev.offsetX;
|
|
|
let offsetY = ev.offsetY;
|
|
|
- $('#drawer').off('drop');
|
|
|
- $('#drawer').off('dragover');
|
|
|
-
|
|
|
- $('#drawer').on('dragover', function(ev){
|
|
|
+ $("#drawer").off("drop");
|
|
|
+ $("#drawer").off("dragover");
|
|
|
+
|
|
|
+ $("#drawer").on("dragover", function (ev) {
|
|
|
ev.preventDefault();
|
|
|
- })
|
|
|
-
|
|
|
- $('#drawer').on('drop',function(ev){
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#drawer").on("drop", function (ev) {
|
|
|
ev.preventDefault();
|
|
|
- $(position).css({left : ev.clientX - offsetX, top : ev.clientY - offsetY});
|
|
|
- })
|
|
|
+ $(position).css({ left: ev.clientX - offsetX, top: ev.clientY - offsetY });
|
|
|
+ });
|
|
|
});
|
|
|
}
|
|
|
|
|
@@ -592,6 +609,9 @@ function updateFcltStts(jsonData) {
|
|
|
jsonData.fclt_list.forEach((el) => {
|
|
|
let lyrInfo = null;
|
|
|
const stts = _sttsMap.get(el.fclt_type);
|
|
|
+ if (!stts) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
let toNumber = false;
|
|
|
if (el.fclt_type === "CCTV") {
|
|
|
lyrInfo = _mapManager.getLayer(LayerIndex.Cctv);
|
|
@@ -680,7 +700,7 @@ function recvIncdData(jsonData) {
|
|
|
}
|
|
|
// 돌발정보 수신
|
|
|
function recvAutoIncd(jsonData) {
|
|
|
- console.log( `${ currDt() }: recvAutoIncd: ${ jsonData.length } EA.` );
|
|
|
+ console.log(`${currDt()}: recvAutoIncd: ${jsonData.length} EA.`);
|
|
|
MAIN.updateAutoIncd(jsonData);
|
|
|
}
|
|
|
// 돌발정보요청
|