BemsWebApplication.UsekindUsageCompare = function (params, viewInfo) { "use strict"; 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 kcalTokWh; var CODE = $Code, FuelType = CODE.g_fuelTypes, FacilityType = CODE.FacilityType, FacilityCode = CODE.FacilityCode, F = CODE.Formula, TIT = CODE.TimeIntervalType; var curMonthData = [{ month: "0", beforeYear: null, curYear: null }]; // 2019.04.16 : 그리드 도표 작업 : 팝업창 추가 ~~~ // 팝업창뷰 보이기 속성 제어용 변수 선언 var DataGridPopup_Visible = ko.observable(false); // 그래프 출력 이후 엑셀출력을 위한 팝업창을 위해 임시 저장용 배열 선언 var dataArrayresult = ko.observableArray(); // ~~~ 2019.04.16 : 그리드 도표 작업 : 팝업창 추가 var energyUsageStatusGet = new BWA.Chart.PointHistoryServiceTypeGet(BWA.UserInfo.SiteId()); var chartDataSource = [{ month: "1", beforeYear: null, curYear: null }, { month: "2", beforeYear: null, curYear: null }, { month: "3", beforeYear: null, curYear: null }, { month: "4", beforeYear: null, curYear: null }, { month: "5", beforeYear: null, curYear: null }, { month: "6", beforeYear: null, curYear: null }, { month: "7", beforeYear: null, curYear: null }, { month: "8", beforeYear: null, curYear: null }, { month: "9", beforeYear: null, curYear: null }, { month: "10", beforeYear: null, curYear: null }, { month: "11", beforeYear: null, curYear: null }, { month: "12", beforeYear: null, curYear: null }]; function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } function GetUsekindSelectData() { var now = new Date(); var selectDate = $("#standardDatePicker").dxDateBox("instance").option("value"); var dataSource = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/CmServiceEnergyCalcMonth" }, requireTotalCount: true, pageSize: 1000 }); dataSource.filter([ ["SiteId", "=", BWA.UserInfo.SiteId()], "and", ["calDate", ">=", new Date(selectDate.getFullYear() - 1, 0, 1)], "and", ["calDate", "<=", new Date(selectDate.getFullYear(), 11, 31)] ]); dataSource.sort({ getter: "calDate", asc: true }); dataSource.load() .done(function (result) { var tmpArray = new Array(); for (var i = 0; i < result.length; i++) { var checkDulp = false; if (tmpArray.length == 0) { tmpArray[0] = new Array("ServiceTypeId","Name"); tmpArray[0].ServiceTypeId = result[i].ServiceTypeId; continue; } for (var j = 0; j < tmpArray.length; j++) { if (result[i].ServiceTypeId == tmpArray[j].ServiceTypeId) checkDulp = true; } if (!checkDulp){ tmpArray[j] = new Array("ServiceTypeId", "Name"); tmpArray[j].ServiceTypeId = result[i].ServiceTypeId; } } var dataSourceServiceType = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/BemsServiceType" }, requireTotalCount: true, pageSize: 100 }); dataSourceServiceType.sort({ getter: "ServiceTypeId", asc: true }); dataSourceServiceType.load() .done(function (resultServiceType) { for (var i = 0; i < tmpArray.length; i++) { for(var j = 0; j < resultServiceType.length; j++){ if (tmpArray[i].ServiceTypeId == resultServiceType[j].ServiceTypeId) { tmpArray[i].Name = resultServiceType[j].Name; } } } $("#usekindSelect").dxSelectBox("instance").option('dataSource', tmpArray); $("#usekindSelect").dxSelectBox("instance").option('displayExpr', "Name"); $("#usekindSelect").dxSelectBox("instance").option('valueExpr', "ServiceTypeId"); if(tmpArray.length > 0) { $("#usekindSelect").dxSelectBox("instance").option('value', tmpArray[0].ServiceTypeId); } }) .fail(function (error) { utils.toast.show(error); }); }) .fail(function (error) { utils.toast.show(error); }); } function GetChartData(serviceTypeId) { var now = new Date(); var selectDate = $("#standardDatePicker").dxDateBox("instance").option("value"); var dataSourceBeforeYear = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/CmServiceEnergyCalcMonth" }, requireTotalCount: true, pageSize: 1000 }); dataSourceBeforeYear.filter([ ["SiteId", "=", BWA.UserInfo.SiteId()], "and", ["calDate", ">=", new Date(selectDate.getFullYear() - 1, 0, 1)], "and", ["calDate", "<=", new Date(selectDate.getFullYear() - 1, 11, 31)], "and", ["ServiceTypeId", "=", serviceTypeId] ]); dataSourceBeforeYear.sort({ getter: "calDate", asc: true }); dataSourceBeforeYear.load() .done(function (resultBeforeYear) { for (var j = 0; j < chartDataSource.length; j++) { chartDataSource[j].beforeYear = null; } for (var i = 0; i < resultBeforeYear.length; i++) { chartDataSource[i].beforeYear = resultBeforeYear[i].Value / kcalTokWh; } var dataSourceCurYear = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/CmServiceEnergyCalcMonth" }, requireTotalCount: true, pageSize: 1000 }); dataSourceCurYear.filter([ ["SiteId", "=", BWA.UserInfo.SiteId()], "and", ["calDate", ">=", new Date(selectDate.getFullYear(), 0, 1)], "and", ["calDate", "<=", new Date(selectDate.getFullYear(), 11, 31)], "and", ["ServiceTypeId", "=", serviceTypeId] ]); dataSourceCurYear.sort({ getter: "calDate", asc: true }); dataSourceCurYear.load() .done(function (resultCurYear) { for (var j = 0; j < chartDataSource.length; j++) { chartDataSource[j].curYear = null; } for (var i = 0; i < resultCurYear.length; i++) { chartDataSource[i].curYear = resultCurYear[i].Value / kcalTokWh; } if (selectDate.getMonth() == now.getMonth()) { for (var i = 0; i < curMonthData[0].length;i++){ if (serviceTypeId == curMonthData[0][i].ServiceType) { chartDataSource[now.getMonth()].curYear = chartDataSource[now.getMonth()].curYear + curMonthData[0][i].Value / kcalTokWh; } } } $("#chartMonth").dxChart("instance").option('dataSource', chartDataSource); }) .fail(function (error) { utils.toast.show(error); }); }) .fail(function (error) { utils.toast.show(error); }); } function GetkcalTokWh() { var dataSource = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/BemsFactorToe" }, requireTotalCount: true, pageSize: 100 }); dataSource.filter([ ["FuelTypeId", "=", 1] ]); dataSource.load() .done(function (result) { kcalTokWh = result[0].kcal; }) .fail(function (error) { utils.toast.show(error); }); } function loadDailyEnergyUsage(year, month) { /* var startDate, endDate; var monthMoment; if (_.isUndefined(month)) { monthMoment = moment(); } else { monthMoment = moment().month(month - 1); } startDate = monthMoment.startOf('month'); endDate = monthMoment.clone().endOf('month'); */ //2016 02 26 var startDate, endDate; var monthMoment; monthMoment = moment(year).month(month - 1); startDate = monthMoment.startOf('month'); endDate = monthMoment.clone().endOf('month'); var commonParameters = { TimeIntervalType: TIT.DAY, StartDate: startDate, EndDate: endDate }; var pointHistoryParameters = { BuildingId: 0, FloorId: null, ZoneId: null, //FuelTypeId: fuelTypeIdForSearch() FuelTypeId: null }; var promises = []; /* _.each(FuelType, function (x) { if (x.FuelTypeId() < 3) { pointHistoryParameters.FuelTypeId = x.FuelTypeId(); promises.push(energyUsageStatusGet.apiGet(_.extend(pointHistoryParameters, commonParameters))); } //promises.push(energyUsageStatusGet.requestGetForEnergyService(x, TIT.DAY,7) //(startDate, endDate)); });*/ pointHistoryParameters.FuelTypeId = -1; promises.push(energyUsageStatusGet.apiGet(_.extend(pointHistoryParameters, commonParameters))); $.when.apply(this, promises).done(function (v) { curMonthData = v; }) .fail(function (error) { utils.toast.show(error); }); } // 2019.04.15 : 그리드 도표 작업 : 팝업창 추가 ~~~ function DataGridPopup_ButtonClick() { // DevExpress.ui.notify("날짜가 일치하지 않는 데이타가 존재합니다", "fail", 1000); DataGridPopup_Visible(true); } function handlePopupShown() { dataArrayresult = chartDataSource; // 데이타소스 업데이트 $("#UsekindUsageCompare_Container").dxDataGrid("instance").option("dataSource", dataArrayresult); // 팝업창 갱신 DataGridPopup_Visible(true); } // ~~~ 2019.04.15 : 그리드 도표 작업 : 팝업창 추가 function handleViewShowing() { GetkcalTokWh(); var now = new Date(); loadDailyEnergyUsage(now.getFullYear().toString(), (now.getMonth() + 1).toString()); } function handleViewShown() { $("#loadIndicator").dxLoadIndicator("instance").option('visible', true); setTimeout(function () { GetUsekindSelectData(); $("#loadIndicator").dxLoadIndicator("instance").option('visible', false); }, 1000); } var searchViewOptions = { }; function handleSearchInSearchView() { } var viewModel = $.extend(BWA.CommonView.create(params, viewInfo, searchViewOptions, ko.observable(null), handleViewShown, null, handleSearchInSearchView), { viewShowing: handleViewShowing, usekindSelect: { //value : 2, onSelectionChanged: function () { var serviceTypeId = $("#usekindSelect").dxSelectBox("instance").option('value'); GetChartData(serviceTypeId); } }, chartMonth: { //dataSource: monthDataSource, commonSeriesSettings: { argumentField: "month", type: "line" }, series: [ { valueField: "beforeYear", name: "전년" }, { valueField: "curYear", name: "금년" }, ], legend: { position: 'outside', verticalAlignment: "top", horizontalAlignment: "center", itemTextPosition: 'bottom' }, valueAxis: { title: { text: "에너지 사용량(kWh)" }, position: "left" }, argumentAxis: { type: "line", position: 'bottom', grid: { visible: true } }, "export": { enabled: true }, /*title: { font: { size: 15 }, text: '전년 대비 금년도 에너지 사용량 비교' },*/ tooltip: { enabled: true, //format: 'largeNumber', customizeTooltip: function (point) { return { text: numberWithCommas(point.value.toFixed(2)) }; } } }, standardDatePicker: { pickerType: "calendar", value: new Date(), formatString: "yyyy년", maxZoomLevel: "decade", width: "8%", onValueChanged: function () { GetUsekindSelectData(); } }, loadIndicator: { visible: false }, // 2019.04.16 : 그리드 도표 작업 : 팝업창 추가 UsekindUsageComparePopup_ButtonClicked: DataGridPopup_ButtonClick // 2019.04.16 : 그리드 도표 작업 : 팝업창 추가 }); // 2019.04.16 : 그리드 도표 작업 : 팝업창 추가 ~~~ // 그래프 도표 팝업창 viewModel.UsekindUsageComparePopupOptions = { width: '480px', height: '750px', // cyim 2017.05.30 : 테스트 결과 Devextreme 버그임. px 로 지정하면 초기 출력시 정확하게 가운데에 있지만, auto 설정시 화면아래에 위치하게 됨 contentTemplate: "content", showTitle: true, title: "도표", visible: DataGridPopup_Visible, dragEnabled: true, closeOnOutsideClick: true, shownAction: handlePopupShown, animation: window.utils.popup.createAnimation() }; // 주석이 너무 없음. 나중에 변경 작업을 진행하는 누군가가 시간 소비를 하지 않기 위해...남김 // 시간 포맷은 그래프에 귀속해야 되므로 포맷은 변경하지 않는 것이 유리함 // 전기,가스,수도 와 같이 선택적으로 변경해야 된다면 아래와 같이 캡션은 고정하지 말것 viewModel.UsekindUsageCompareOptions = { dataSource: dataArrayresult, paging: { pageSize: 17 }, columns: [ { dataField: 'month', caption: "월", width: '10%', alignment: 'center', },// dataType: 'date', format: 'yyyy-MM-dd HH:mm' }, { dataField: 'beforeYear', caption: "전년 에너지 사용량(kWh)", width: '45%', alignment: 'center', format: 'fixedPoint', precision: 2 }, { dataField: 'curYear', caption: "금년 에너지 사용량(kWh)", width: '45%', alignment: 'center', format: 'fixedPoint', precision: 2 } ], // 엑셀 출력 "export": { enabled: true, fileName: '용도별 전년 동월대비 에너지사용량 증감 분석' } }; // ~~~ 2019.04.16 : 그리드 도표 작업 : 팝업창 추가 return viewModel; };