BemsWebApplication.FloorStatus = function (params, viewInfo) { "use strict"; var facilityTypeId_fin = 0, facilityCode_fin = 0, propertyId_fin = 0, facilityName_fin = "", controlPoint_fin = "", zoneId_fin = 0, serviceTypeId_fin = 0; var BemsFloorStatusDataSource = BemsWebApplication.db.createDataSource('BemsFloorStatus'), FloorInPopUpForSearch = ko.observableArray(), FloorInPopUp = ko.observableArray(); var imagefileUrl = ko.observable(); var controlIdDataSource = ko.observableArray(); var controlIdforFloor = new Array(); var floorstatus = ko.observableArray(); var visiblePopup = ko.observable(false); var imageArray_prev = new Array(); var markerArray_prev = new Array(); var markerArray_prev_forDelete = new Array(); var markerInfo_prev = new Array(); var endpointSelector = ""; if (BemsWebApplication.config.mode == "production") { endpointSelector = new DevExpress.EndpointSelector(BemsWebApplication.config.endpoints).config.db.production; } else { endpointSelector = new DevExpress.EndpointSelector(BemsWebApplication.config.endpoints).config.db.local; } var treeViewData = [ { id: 0, items: [], text: "온도" }, { id: 1, items: [], text: "습도" }, { id: 2, items: [], text: "CO2" }, { id: 3, items: [], text: "CO" }, { id: 4, items: [], text: "O3" }, { id: 5, items: [], text: "미세먼지" } ]; var mapType = { coordinate: { font: "fill: black; font-weight: bold; font-size: 15px;", fixed: 1 }, temperature: { font: "fill: red; font-weight: bold; font-size: 20px;", fixed: 1 }, humidity: { font: "fill: blue; font-weight: bold; font-size: 20px;", fixed: 0 }, carboneDioxide: { font: "fill: green ; font-weight: bold; font-size: 20px;", fixed: 1 }, concentration: { font: "fill: darkgreen; font-weight: bold; font-size: 20px;", fixed: 1 }, ozone: { font: "fill: purple ; font-weight: bold; font-size: 20px;", fixed: 2 }, dust: { font: "fill: orangered ; font-weight: bold; font-size: 20px;", fixed: 0 } }; function GetSelectData() { treeViewData = [ { id: 0, items: [], text: "온도", value: 100 }, { id: 1, items: [], text: "습도", value: 110 }, { id: 2, items: [], text: "CO2", value: 130 }, { id: 3, items: [], text: "CO", value: 140 }, { id: 4, items: [], text: "O3", value: 150 }, { id: 5, items: [], text: "미세먼지", value: 160 } ]; var dataSource = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/BemsMonitoringPoint", }, requireTotalCount: true, pageSize: 5000, }); dataSource.filter([ ["SiteId", "=", BWA.UserInfo.SiteId()], "and", ["FacilityTypeId", "=", 99] ]); dataSource.load() .done(function (result) { for (var i = 0; i < result.length; i++) { if (result[i].FloorId != null) { if (result[i].ServiceTypeId == 100) { // 온도 treeViewData[0].items.push({ facilityTypeId: result[i].FacilityTypeId, facilityCode: result[i].FacilityCode, propertyId: result[i].PropertyId, text: result[i].Name, floorId: result[i].FloorId, zoneId: result[i].ZoneId, serviceTypeId: result[i].ServiceTypeId }); } else if (result[i].ServiceTypeId == 110) // 습도 treeViewData[1].items.push({ facilityTypeId: result[i].FacilityTypeId, facilityCode: result[i].FacilityCode, propertyId: result[i].PropertyId, text: result[i].Name, floorId: result[i].FloorId, zoneId: result[i].ZoneId, serviceTypeId: result[i].ServiceTypeId }); else if (result[i].ServiceTypeId == 130) // CO2 treeViewData[2].items.push({ facilityTypeId: result[i].FacilityTypeId, facilityCode: result[i].FacilityCode, propertyId: result[i].PropertyId, text: result[i].Name, floorId: result[i].FloorId, zoneId: result[i].ZoneId, serviceTypeId: result[i].ServiceTypeId }); else if (result[i].ServiceTypeId == 140) // CO treeViewData[3].items.push({ facilityTypeId: result[i].FacilityTypeId, facilityCode: result[i].FacilityCode, propertyId: result[i].PropertyId, text: result[i].Name, floorId: result[i].FloorId, zoneId: result[i].ZoneId, serviceTypeId: result[i].ServiceTypeId }); else if (result[i].ServiceTypeId == 150) // O3 treeViewData[4].items.push({ facilityTypeId: result[i].FacilityTypeId, facilityCode: result[i].FacilityCode, propertyId: result[i].PropertyId, text: result[i].Name, floorId: result[i].FloorId, zoneId: result[i].ZoneId, serviceTypeId: result[i].ServiceTypeId }); else if (result[i].ServiceTypeId == 160) // 미세먼지 treeViewData[5].items.push({ facilityTypeId: result[i].FacilityTypeId, facilityCode: result[i].FacilityCode, propertyId: result[i].PropertyId, text: result[i].Name, floorId: result[i].FloorId, zoneId: result[i].ZoneId, serviceTypeId: result[i].ServiceTypeId }); } } }) .fail(function (error) { utils.toast.show(error); }); } function getImageSize(width, height) { var viewIndoor = $('#viewIndoor'); var maxWidth = parseFloat(viewIndoor.css('width')), maxHeight = parseFloat(viewIndoor.css('height')); var widthRatio = width / maxWidth; var heightRatio = height / maxHeight; var maxRatio = max(widthRatio, heightRatio); if (maxRatio > 1) { return { width: width / maxRatio, height: height / maxRatio } } return { width: width, height: height } } function max(x, y) { if (x > y) return x; return y; } function loadImage(imageUrl) { $('#imageContext').find('text').remove(); //var imageUrl = url;//'/Images/Blueprint/' + viewModel.dataModel.FloorId() + '.jpg'; var image = document.getElementById("image"); var newImage = new Image(); newImage.onload = function () { var imageSize = getImageSize(newImage.width, newImage.height); $('#imageContext').css('width', imageSize.width).css('height', imageSize.height).css({ 'border': '3px solid #1E90FF', 'border-radius': '5px', }); $('#image').attr('width', imageSize.width).attr('height', imageSize.height); // 2016 05 30 추가, IE 문제해결, 종화 } newImage.src = imageUrl; image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', imageUrl); } function AddMarker(x, y) { var imageUrl = "https://js.devexpress.com/Demos/RealtorApp/images/map-marker.png"; var image = document.createElementNS("http://www.w3.org/2000/svg", "image"); image.setAttributeNS(null, 'x', x); image.setAttributeNS(null, 'y', y); image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', imageUrl); $('#imageContext').append(image); markerArray_prev.push(image); markerArray_prev_forDelete.push(image); } function addText(x, y, text, style, type) { //************************ if (type == 'coordinate') { var image = document.createElementNS("http://www.w3.org/2000/svg", "text"); image.textContent = text; image.setAttributeNS(null, 'x', x); image.setAttributeNS(null, 'y', y); if (style) { image.setAttributeNS(null, 'style', style); } $('#imageContext').append(image); } else { if (type == 'temperature') var imageUrl = '/Images/Blueprint/object_1.png'; else if (type == 'concentration') var imageUrl = '/Images/Blueprint/object_2.png'; else if (type == 'carboneDioxide') var imageUrl = '/Images/Blueprint/object_3.png'; else if (type == 'humidity') var imageUrl = '/Images/Blueprint/object_4.png'; else if (type == 'dust') var imageUrl = '/Images/Blueprint/object_5.png'; else if (type == 'ozone') var imageUrl = '/Images/Blueprint/object_6.png'; var image = document.createElementNS("http://www.w3.org/2000/svg", "image"); image.setAttributeNS(null, 'x', x); image.setAttributeNS(null, 'y', y); image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', imageUrl); $('#imageContext').append(image); imageArray_prev.push(image); //************************ var image = document.createElementNS("http://www.w3.org/2000/svg", "text"); image.textContent = text; image.setAttributeNS(null, 'x', x + 45); image.setAttributeNS(null, 'y', y + 23); if (style) { image.setAttributeNS(null, 'style', style); } $('#imageContext').append(image); } } function setTextInSVG(values) { $('#imageContext').find('text').remove(); // image 기존 이모티콘 지우기 for (var i = 0; i < imageArray_prev.length; i++) { imageArray_prev[i].parentNode.removeChild(imageArray_prev[i]); } imageArray_prev = new Array(); var floorTextLocationInfo = new Array(); var cnt = 0; BemsFloorStatusDataSource.filter([ ["SiteId", "=", BWA.UserInfo.SiteId()], "and", ["FloorId", "=", viewModel.dataModel.FloorId()] ]); BemsFloorStatusDataSource.load() .done(function (result) { for (var i = 0; i < result.length; i++) { floorTextLocationInfo[i] = { "floorId": 0, "x": 0, "y": 0, "type": "", "property": 0 }; floorTextLocationInfo[i].floorId = result[i].FloorId(); floorTextLocationInfo[i].x = result[i].Xvalue(); floorTextLocationInfo[i].y = result[i].Yvalue(); floorTextLocationInfo[i].property = result[i].PropertyId(); if (result[i].ServiceTypeId() == 100) floorTextLocationInfo[i].type = 'temperature'; else if (result[i].ServiceTypeId() == 110) floorTextLocationInfo[i].type = 'humidity'; else if (result[i].ServiceTypeId() == 130) floorTextLocationInfo[i].type = 'carboneDioxide'; else if (result[i].ServiceTypeId() == 140) floorTextLocationInfo[i].type = 'concentration'; else if (result[i].ServiceTypeId() == 150) floorTextLocationInfo[i].type = 'ozone'; else if (result[i].ServiceTypeId() == 160) floorTextLocationInfo[i].type = 'dust'; cnt++; } var newImage = new Image(); newImage.onload = function () { var imageSize = getImageSize(newImage.width, newImage.height); var type = mapType['coordinate']; var coord_width = Math.round(imageSize.width); var coord_height = Math.round(imageSize.height); var coordination = '(' + coord_width + ',' + coord_height + ')'; var coordination_x = '(' + coord_width + ',' + '0' + ')'; var coordination_y = '(' + '0' + ',' + coord_height + ')'; addText(10, 20, '(0,0)', type.font, 'coordinate'); //(0,0)을 나타내주기위함 addText(coord_width - 80, coord_height - 10, coordination, type.font, 'coordinate'); //(max_x,max_y)을 나타내주기위함 addText(coord_width - 60, 20, coordination_x, type.font, 'coordinate'); //(max_x,0)을 나타내주기위함 addText(10, coord_height - 10, coordination_y, type.font, 'coordinate'); //(0,max_y)을 나타내주기위함 for (var i = 0; i < cnt; i++) { var locationInfo = floorTextLocationInfo[i]; var type = mapType[locationInfo.type]; var value = values[i].toFixed(type.fixed); if (value != -9999) addText(locationInfo.x, locationInfo.y, value, type.font, locationInfo.type); } } newImage.src = imagefileUrl(); }); } function UpdateImage() { var promises = []; promises.push(BemsWebApplication.api.get('BemsMonitoringPointHistory/FloorEachPointValue', { SiteId: BWA.UserInfo.SiteId(), FloorId: viewModel.dataModel.FloorId(), })); $.when.apply(this, promises).done(function (values) { setTextInSVG(values); }).fail(function (error) { visiblePopup(false); }); } function Insert(postData) { var store = new DevExpress.data.ODataStore({ url: endpointSelector + "/BemsFloorStatus", key: ["SiteId", "FloorId", "FloorName", "ImageFileId", "Xvalue", "Yvalue", "PropertyId"], keyType: { SiteId: "Int32", FloorId: "Int32", FloorName: "String", ImageFileId: "Int32", Xvalue: "Int32", Yvalue: "Int32", PropertyId: "Int32" } }); store.insert(postData).done(function (key, result) { utils.toast.show($G('successDatabaseInsertionMsg')); }) .fail(function (error) { utils.toast.show(error); }); } // 등록버튼 클릭 function handlePopupButtonInsert() { var dataViewModel = viewModel.dataModel; var facility_code = $("#FacilityCode").dxSelectBox('instance').option('value'); var control_Id = $("#ControlId").dxSelectBox('instance').option('value'); var x_value = $("#XValue").dxTextBox('instance').option('value'); var y_value = $("#YValue").dxTextBox('instance').option('value'); var newImage = new Image(); newImage.onload = function () { var imageSize = getImageSize(newImage.width, newImage.height); var type = mapType['coordinate']; if (facility_code == null || control_Id == null || x_value == "" || y_value == "") { utils.toast.show("필수 데이터가 부족합니다.", 'error'); return; } else if (isNaN(x_value) || isNaN(y_value)) { utils.toast.show("좌표 값은 숫자형식으로 입력되어야합니다.", 'error'); return; } else if (imageSize.width < 0 || imageSize.width <= x_value || imageSize.height < 0 || imageSize.height <= y_value) { utils.toast.show("좌표 값이 평면도 범위를 벗어납니다.", 'error'); return; } //insert var postViewModel = new BemsWebApplication.BemsFloorStatusViewModel(); postViewModel.SiteId(dataViewModel.SiteId()); postViewModel.FloorId(dataViewModel.FloorId()); postViewModel.FloorName(dataViewModel.Name()); postViewModel.ImageFileId(dataViewModel.ImageFileId()); postViewModel.Xvalue(parseInt(x_value)); postViewModel.Yvalue(parseInt(y_value)); postViewModel.FacilityTypeId(facilityTypeId_fin); postViewModel.FacilityCode(facilityCode_fin); postViewModel.PropertyId(propertyId_fin); postViewModel.ZoneId(zoneId_fin); postViewModel.ServiceTypeId(serviceTypeId_fin); postViewModel.FacilityName(facilityName_fin); var postData = postViewModel.toJS(); Insert(postData); //DB 저장에 시간이 걸리기때문에 딜레이 후 데이터 로드 setTimeout(function () { GetGridInPopup(); InitializeData(); UpdateImage(); }, 100); } newImage.src = imagefileUrl(); } // 삭제버튼 클릭 function handlePopupButtonDelete() { DevExpress.ui.dialog.confirm($G('deleteConfirmMsg'), "삭제").then(function (result) { if (result) { var keys = $("#Observe_Point").dxDataGrid('instance').getSelectedRowKeys(); for (var i = 0; i < keys.length; i++) { var num = 0; var removeData = { SiteId: keys[i].SiteId(), FloorId: keys[i].FloorId(), FloorName: keys[i].FloorName(), ImageFileId: keys[i].ImageFileId(), Xvalue: keys[i].Xvalue(), Yvalue: keys[i].Yvalue(), ZoneId: keys[i].ZoneId(), FacilityTypeId: keys[i].FacilityTypeId(), FacilityCode: keys[i].FacilityCode(), PropertyId: keys[i].PropertyId(), FacilityName: keys[i].FacilityName(), }; BemsWebApplication.db['BemsFloorStatus'].remove(removeData).done(function () { viewModel.refreshList(); utils.toast.show('데이터베이스 항목 삭제 작업이 성공하였습니다.'); }).fail(function () { utils.toast.show('데이터베이스 항목 삭제 작업이 실패하였습니다.', 'error'); }); } } setTimeout(function () { GetGridInPopup(); InitializeData(); UpdateImage(); }, 100); }); } // 닫기버튼 function PopupButtonClose() { viewModel.dataModel.ImageFileId(null); visiblePopup(false); GetGridData(); } function GetGridData() { var gridData = new Array(); var dataSource = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/BemsFloorPlan", }, requireTotalCount: true, pageSize: 9999, }); dataSource.filter([ ["SiteId", "=", BWA.UserInfo.SiteId()] ]); dataSource.sort({ getter: "Name", asc: true }); dataSource.load() .done(function (result) { for (var i = 0; i < result.length; i++) { gridData[i] = { "SiteId": 0, "FloorId": 0, "Name": "", "ImageFileId": 0 }; gridData[i].SiteId = result[i].SiteId; gridData[i].FloorId = result[i].FloorId; gridData[i].Name = result[i].Name; gridData[i].ImageFileId = result[i].ImageFileId; } $("#gridContainer").dxDataGrid("instance").option('dataSource', gridData); //$("#gridContainer").dxDataGrid("instance").refresh(); }) .fail(function (error) { utils.toast.show(error); }); } function GetGridInPopup() { BemsFloorStatusDataSource.filter([ ["FloorId", "=", viewModel.dataModel.FloorId()] ]); BemsFloorStatusDataSource.load() .done(function (FloorStatusResult) { floorstatus(FloorStatusResult); $("#Observe_Point").dxDataGrid("instance").option('dataSource', floorstatus()); }) } function InitializeData() { $("#FacilityCode").dxSelectBox({ placeholder: "설비 이름", dataSource: treeViewData, displayExpr: "text", valueExpr: "id" }); $("#ControlId").dxSelectBox({ placeholder: "관제점 이름", }); $("#XValue").dxTextBox({ placeholder: "X축 값" }); $("#YValue").dxTextBox({ placeholder: "Y축 값" }); $("#FacilityCode").dxSelectBox('instance').option('value', null);// 설비 이름 클리어 $("#ControlId").dxSelectBox('instance').option('value', null);// 관제점 이름 클리어 $("#XValue").dxTextBox('instance').option('value', ""); $("#YValue").dxTextBox('instance').option('value', ""); //select data update BemsFloorStatusDataSource.filter([ ["FloorId", "=", viewModel.dataModel.FloorId()] ]); BemsFloorStatusDataSource.load() .done(function (FloorStatusResult) { $("#FacilityCode").dxSelectBox({ onValueChanged: function () { controlIdforFloor = new Array(); var value = $("#FacilityCode").dxSelectBox('instance').option('value'); if (value != null) { controlIdDataSource = ""; controlIdDataSource = treeViewData[value].items; for (var i = 0; i < controlIdDataSource.length; i++) { var isData = false; for (var j = 0; j < FloorStatusResult.length; j++) { if (FloorStatusResult[j].PropertyId() == controlIdDataSource[i].propertyId && FloorStatusResult[j].ServiceTypeId() == controlIdDataSource[i].serviceTypeId) { isData = true; break; } } if (controlIdDataSource[i].floorId == viewModel.dataModel.FloorId() && !isData) { controlIdforFloor.push(controlIdDataSource[i]); } } $("#ControlId").dxSelectBox('instance').option('value', null);// 텍스트 클리어 $("#ControlId").dxSelectBox({ placeholder: "관제점 이름", dataSource: controlIdforFloor, displayExpr: "text", valueExpr: "propertyId" }); } } }); $("#ControlId").dxSelectBox({ onValueChanged: function () { var value = $("#ControlId").dxSelectBox('instance').option('text'); if (value != null) { for (var i = 0; i < controlIdforFloor.length; i++) { if (controlIdforFloor[i].text == value) { facilityTypeId_fin = controlIdforFloor[i].facilityTypeId; facilityCode_fin = controlIdforFloor[i].facilityCode; propertyId_fin = controlIdforFloor[i].propertyId; facilityName_fin = controlIdforFloor[i].text; zoneId_fin = controlIdforFloor[i].zoneId; serviceTypeId_fin = controlIdforFloor[i].serviceTypeId; break; } } $("#ControlId").dxSelectBox('instance').option('text', controlIdforFloor); } } }); }); } var viewModel = BWA.DataGrid.createViewWithDataGrid(params, viewInfo, 'BemsFloorPlan', { dataSourceOptions: { select: [ 'SiteId', 'FloorId', 'Name', 'ImageFileId' ], filter: [ ['SiteId', '=', BWA.UserInfo.SiteId()] ], extendOptions: { forceOriginalField: true }, }, columns: [ { dataField: 'SiteId', caption: '번호', width: '30%', alignment: 'center' }, { dataField: 'Name', caption: '층 명칭', width: '70%', alignment: 'center' }, ], searchViewItems: [ { id: 'FloorId', dataSource: FloorInPopUpForSearch }, { id: 'Name' } ], //popupWidth: 450, NoSearchView: true, // 2019.07.25 kgpark 검색버튼 삭제 paging: { pageSize: 20, enabled: true }, pager: { }, handleViewShowing: function () { $("#gridContainer").dxDataGrid({ //paging: { // pageSize: 20 //} }); $("#Observe_Point").dxDataGrid({}); setTimeout(function () { GetGridData(); GetSelectData(); }, 100); }, handleDataGridRowClick: function (id, dataGrid, clickRow, popupVisible) { // image 기존 마커 지우기 for (var i = 0; i < markerArray_prev.length; i++) { markerArray_prev[i].parentNode.removeChild(markerArray_prev[i]); } setTimeout(function () { markerArray_prev = new Array(); }, 100); dataGrid.clearSelection(); var data = clickRow.data; var viewDataModel = viewModel.dataModel; viewDataModel.Name(data.Name); viewDataModel.FloorId(data.FloorId); viewDataModel.ImageFileId(data.ImageFileId); viewDataModel.SiteId(data.SiteId); BemsFloorStatusDataSource.filter([ ["SiteId", "=", BWA.UserInfo.SiteId()] ]); BemsFloorStatusDataSource.load() .done(function (FloorStatusResult) { floorstatus(FloorStatusResult); }); if (data.ImageFileId != null) { // 여기서 ViewModel 설정하고 그리드 rowiTem // 갯수만 수정하면 되지 않을까? 만일 수정을 요청하면 말이다. hcLee 2016 01 14 visiblePopup(true); // Detail 모드를 수행하지 않음 // hcL imagefileUrl('{0}/CmFile(SiteId={1},FileId={2})/$value'.formati(BWA.db._url, viewModel.dataModel.SiteId(), viewDataModel.ImageFileId())); loadImage(imagefileUrl()); var SelectedDataArray = new Array(); $("#Observe_Point").dxDataGrid({ //dataSource: floorstatus(), selection: { mode: 'multiple', allowSelectAll: true }, columns: [ //{ dataField: 'FloorName', caption: '층 이름', width: '25%', alignment: 'center' }, { dataField: 'FacilityName', caption: '관제점 이름 (' + viewModel.dataModel.Name() + ')', width: '60%', alignment: 'center' }, { dataField: 'Xvalue', caption: 'x축', width: '20%', alignment: 'center' }, { dataField: 'Yvalue', caption: 'y축', width: '20%', alignment: 'center' }, ], //scrolling: { // mode: 'standard' //} onSelectionChanged: function (selectedItems) { var data = selectedItems.selectedRowsData; if (data.length < markerArray_prev.length) { UpdateImage(); } // image 기존 마커 지우기 for (var i = 0; i < markerArray_prev.length; i++) { markerArray_prev[i].parentNode.removeChild(markerArray_prev[i]); } setTimeout(function () { markerArray_prev = new Array(); for (var i = 0; i < data.length; i++) { AddMarker(data[i].Xvalue(), data[i].Yvalue()); } }, 100); } }); } else { visiblePopup(false); utils.toast.show('해당 층의 평면도가 없습니다.','error'); } }, handleViewShown: function () { }, }); viewModel.imagefileUrl = imagefileUrl; viewModel.FloorInPopUp = FloorInPopUp; viewModel.dataModel.FloorId = ko.observable(); viewModel.handlePopupButtonInsert = handlePopupButtonInsert; viewModel.handlePopupButtonDelete = handlePopupButtonDelete; viewModel.popupOptions = { width: 1500,//1250, height: 750, visible: visiblePopup, dragEnabled: true, shading: true, closeOnOutsideClick: false, shadingColor: 'transparent', showTitle: true, title: "관제점 등록", showCloseButton: true, onShowing: function () { setTimeout(function () { GetGridInPopup(); InitializeData(); UpdateImage(); }, 100); }, onShown: function () { }, onHidden: function () { } } return viewModel; };