BemsWebApplication.PlanConsumeGoal = 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; } ////// 전역 변수 설정 부 // 2019.04.17 : 그리드 도표 작업 : 팝업창 추가 ~~~ // 팝업창뷰 보이기 속성 제어용 변수 선언 var DataGridPopup_Visible = ko.observable(false); // 그래프 출력 이후 엑셀출력을 위한 팝업창을 위해 임시 저장용 배열 선언 var dataArrayresult = ko.observableArray(); // ~~~ 2019.04.17 : 그리드 도표 작업 : 팝업창 추가 var m3calValue; var applyonoff = false; var SiteId = BWA.UserInfo.SiteId(); var ServiceTypeId = 1; var visiblePopup = ko.observable(false); var dataSource = [{ dateTime: "1", Prediction: 0, //예측 Goal: 0 //목표 }, { dateTime: "2", Prediction: 0, Goal: 0 }, { dateTime: "3", Prediction: 0, Goal: 0 }, { dateTime: "4", Prediction: 0, Goal: 0 }, { dateTime: "5", Prediction: 0, Goal: 0 }, { dateTime: "6", Prediction: 0, Goal: 0 }, { dateTime: "7", Prediction: 0, Goal: 0 }, { dateTime: "8", Prediction: 0, Goal: 0 }, { dateTime: "9", Prediction: 0, Goal: 0 }, { dateTime: "10", Prediction: 0, Goal: 0 }, { dateTime: "11", Prediction: 0, Goal: 0 }, { dateTime: "12", Prediction: 0, Goal: 0 }, { dateTime: "13", Prediction: 0, Goal: 0 }, { dateTime: "14", Prediction: 0, Goal: 0 }, { dateTime: "15", Prediction: 0, Goal: 0 }, { dateTime: "16", Prediction: 0, Goal: 0 }, { dateTime: "17", Prediction: 0, Goal: 0 }, { dateTime: "18", Prediction: 0, Goal: 0 }, { dateTime: "19", Prediction: 0, Goal: 0 }, { dateTime: "20", Prediction: 0, Goal: 0 }, { dateTime: "21", Prediction: 0, Goal: 0 }, { dateTime: "22", Prediction: 0, Goal: 0 }, { dateTime: "23", Prediction: 0, Goal: 0 }, { dateTime: "24", Prediction: 0, Goal: 0 }, { dateTime: "25", Prediction: 0, Goal: 0 }, { dateTime: "26", Prediction: 0, Goal: 0 }, { dateTime: "27", Prediction: 0, Goal: 0 }, { dateTime: "28", Prediction: 0, Goal: 0 }, { dateTime: "29", Prediction: 0, Goal: 0 }, { dateTime: "30", Prediction: 0, Goal: 0 }, { dateTime: "31", Prediction: 0, Goal: 0 }]; var FuelID = [ { id: 1, fuel: "전기" }, { id: 2, fuel: "가스" }, { id: 3, fuel: "수도" } ]; var energySelectButton = 1; var yearSelectButton = "Month"; var TodayAdd = new Date(); var SelectedYear = 0; // 사용자가 선택한 연도 var SelectedMonth = 0; // 사용자가 선택한 월 ////// 전역 변수 설정 부 function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } // 2019.04.17 : 해당월의 일수 구하기 ~~~ function LastDayOfMonth(year, month) { var _firstDayOfMonth = [year, month, 1].join('-'); var _firstDayOfMonthDate = new Date(_firstDayOfMonth); _firstDayOfMonthDate.setMonth(_firstDayOfMonthDate.getMonth() + 1); _firstDayOfMonthDate.setDate(_firstDayOfMonthDate.getDate() - 1); return _firstDayOfMonthDate.getDate(); } // 2019.04.17 : 해당월의 일수 구하기 ~~~ // 2019.04.17 : 그리드 도표 작업 : 팝업창 추가 ~~~ function DataGridPopup_ButtonClick() { // DevExpress.ui.notify("날짜가 일치하지 않는 데이타가 존재합니다", "fail", 1000); DataGridPopup_Visible(true); } function handlePopupShown() { var ArraySize; //해당 월의 길이 dataArrayresult = dataSource.slice();// 데이타소스 복제 if (yearSelectButton == "Month") { ArraySize = LastDayOfMonth(SelectedYear, SelectedMonth); viewModel.PlanGoalOptions.columns[0].caption = "일"; } else { ArraySize = 12; viewModel.PlanGoalOptions.columns[0].caption = "월"; } dataArrayresult.splice(ArraySize, 31 - ArraySize); // 불필요 데이터 삭제 energySelectButton = $("#energySelect").dxSelectBox("instance").option('value'); if (energySelectButton == 1) { viewModel.PlanGoalOptions.columns[1].caption = "예측 전력(kWh)"; viewModel.PlanGoalOptions.columns[2].caption = "목표 전력(kWh)"; } else if (energySelectButton == 2) { viewModel.PlanGoalOptions.columns[1].caption = "예측 가스(m3)"; viewModel.PlanGoalOptions.columns[2].caption = "목표 가스(m3)"; } else { viewModel.PlanGoalOptions.columns[1].caption = "예측 수도(m3)"; viewModel.PlanGoalOptions.columns[2].caption = "목표 수도(m3)"; } $("#PlanGoal_Container").dxDataGrid("instance").option("dataSource", dataArrayresult); // 팝업창 갱신 DataGridPopup_Visible(true); } // ~~~ 2019.04.17 : 그리드 도표 작업 : 팝업창 추가 function handleViewShowing() { var getTOEDataSource = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/BemsFactorToe" }, requireTotalCount: true, pageSize: 3 }); getTOEDataSource.load() .done(function (Result) { var powertoe, gastoe; if (Result.length != 0) { for (var i = 0; i < Result.length; i++) { if (Result[i].FuelTypeId == 1) { powertoe = Result[i].TotalFactor; } if (Result[i].FuelTypeId == 2) { gastoe = Result[i].TotalFactor; } } if (powertoe != null && gastoe != null) m3calValue = gastoe / powertoe; } else { utils.toast.show("[BemsFactorToe] 데이터가 없습니다."); } }) .fail(function (error) { utils.toast.show("[BemsFactorToe] 데이터를 불러오는데 실패 하였습니다."); }); } function getAllData() { for (var i = 0; i < dataSource.length; i++) { dataSource[i].dateTime = i + 1; dataSource[i].Prediction = 0; dataSource[i].Goal = 0; } var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value'); $("#sideBarChart").dxChart("instance").option('commonSeriesSettings').type = "stackedBar"; var poweropt = [ { valueField: "Prediction", name: "예측 전력", stack: "prediction", color: '#007994' }, { valueField: "Goal", name: "목표 전력", stack: "goal", color: '#5F8B95' }]; var gasopt = [ { valueField: "Prediction", name: "예측 가스", stack: "prediction", color: '#007994' }, { valueField: "Goal", name: "목표 가스", stack: "goal", color: '#5F8B95' }]; var wateropt = [ { valueField: "Prediction", name: "예측 수도", stack: "prediction", color: '#007994' }, { valueField: "Goal", name: "목표 수도", stack: "goal", color: '#5F8B95' }]; if (energySelectButton == 1) { $("#sideBarChart").dxChart("instance").option('series', poweropt); } else if (energySelectButton == 2) { $("#sideBarChart").dxChart("instance").option('series', gasopt); } else { $("#sideBarChart").dxChart("instance").option('series', wateropt); } // 2019.04.17 사용자가 선택한 연도, 월 업데이트 ~~~ SelectedYear = tmpDate.getFullYear(); SelectedMonth = tmpDate.getMonth() + 1; // ~~~ 2019.04.17 사용자가 선택한 연도, 월 업데이트 var DataSource = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/BemsEnergyDaily" }, requireTotalCount: true, pageSize: 400 }); if (yearSelectButton == "Month") { DataSource.filter([ ["SiteId", "=", SiteId], "and", ["ServiceTypeId", "=", ServiceTypeId], "and", ["FuelTypeId", "=", energySelectButton], //전력 시설ID "and", ["CreatedDate", ">=", new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 1, 0, 0)], "and", ["CreatedDate", "<", new Date(tmpDate.getFullYear(), tmpDate.getMonth() + 1, 1, 0, 0)] ]); } else { DataSource.filter([ ["SiteId", "=", SiteId], "and", ["ServiceTypeId", "=", ServiceTypeId], "and", ["FuelTypeId", "=", energySelectButton], //전력 시설ID "and", ["CreatedDate", ">=", new Date(tmpDate.getFullYear(), 0, 1, 0, 0)], "and", ["CreatedDate", "<", new Date(tmpDate.getFullYear() + 1, 0, 1, 0, 0)] ]); } DataSource.sort({ getter: "CreatedDate", asc: true }); DataSource.load() .done(function (Result) { if (Result.length != 0) { if (yearSelectButton == "Month") { for (var i = 0; i < Result.length; i++) { if (Result[i].Prediction != null) { if (energySelectButton != 2) { dataSource[i].Prediction = Result[i].Prediction; } else { dataSource[i].Prediction = Result[i].Prediction / m3calValue; } } else dataSource[i].Prediction = 0; if (Result[i].Goal != null) { if (energySelectButton != 2) { dataSource[i].Goal = Result[i].Goal; } else { dataSource[i].Goal = Result[i].Goal / m3calValue; } } else dataSource[i].Goal = 0; } } else { for (var i = 0; i < Result.length; i++) { switch (Result[i].CreatedDate.getMonth()) { case 0: { if (Result[i].Prediction != null) { if (energySelectButton != 2) { dataSource[0].Prediction += Result[i].Prediction; } else { dataSource[0].Prediction += Result[i].Prediction / m3calValue; } } if (Result[i].Goal != null) { if (energySelectButton != 2) { dataSource[0].Goal += Result[i].Goal; } else { dataSource[0].Goal += Result[i].Goal / m3calValue; } } break; } case 1: { if (Result[i].Prediction != null) { if (energySelectButton != 2) { dataSource[1].Prediction += Result[i].Prediction; } else { dataSource[1].Prediction += Result[i].Prediction / m3calValue; } } if (Result[i].Goal != null) { if (energySelectButton != 2) { dataSource[1].Goal += Result[i].Goal; } else { dataSource[1].Goal += Result[i].Goal / m3calValue; } } break; } case 2: { if (Result[i].Prediction != null) { if (energySelectButton != 2) { dataSource[2].Prediction += Result[i].Prediction; } else { dataSource[2].Prediction += Result[i].Prediction / m3calValue; } } if (Result[i].Goal != null) { if (energySelectButton != 2) { dataSource[2].Goal += Result[i].Goal; } else { dataSource[2].Goal += Result[i].Goal / m3calValue; } } break; } case 3: { if (Result[i].Prediction != null) { if (energySelectButton != 2) { dataSource[3].Prediction += Result[i].Prediction; } else { dataSource[3].Prediction += Result[i].Prediction / m3calValue; } } if (Result[i].Goal != null) { if (energySelectButton != 2) { dataSource[3].Goal += Result[i].Goal; } else { dataSource[3].Goal += Result[i].Goal / m3calValue; } } break; } case 4: { if (Result[i].Prediction != null) { if (energySelectButton != 2) { dataSource[4].Prediction += Result[i].Prediction; } else { dataSource[4].Prediction += Result[i].Prediction / m3calValue; } } if (Result[i].Goal != null) { if (energySelectButton != 2) { dataSource[4].Goal += Result[i].Goal; } else { dataSource[4].Goal += Result[i].Goal / m3calValue; } } break; } case 5: { if (Result[i].Prediction != null) { if (energySelectButton != 2) { dataSource[5].Prediction += Result[i].Prediction; } else { dataSource[5].Prediction += Result[i].Prediction / m3calValue; } } if (Result[i].Goal != null) { if (energySelectButton != 2) { dataSource[5].Goal += Result[i].Goal; } else { dataSource[5].Goal += Result[i].Goal / m3calValue; } } break; } case 6: { if (Result[i].Prediction != null) { if (energySelectButton != 2) { dataSource[6].Prediction += Result[i].Prediction; } else { dataSource[6].Prediction += Result[i].Prediction / m3calValue; } } if (Result[i].Goal != null) { if (energySelectButton != 2) { dataSource[6].Goal += Result[i].Goal; } else { dataSource[6].Goal += Result[i].Goal / m3calValue; } } break; } case 7: { if (Result[i].Prediction != null) { if (energySelectButton != 2) { dataSource[7].Prediction += Result[i].Prediction; } else { dataSource[7].Prediction += Result[i].Prediction / m3calValue; } } if (Result[i].Goal != null) { if (energySelectButton != 2) { dataSource[7].Goal += Result[i].Goal; } else { dataSource[7].Goal += Result[i].Goal / m3calValue; } } break; } case 8: { if (Result[i].Prediction != null) { if (energySelectButton != 2) { dataSource[8].Prediction += Result[i].Prediction; } else { dataSource[8].Prediction += Result[i].Prediction / m3calValue; } } if (Result[i].Goal != null) { if (energySelectButton != 2) { dataSource[8].Goal += Result[i].Goal; } else { dataSource[8].Goal += Result[i].Goal / m3calValue; } } break; } case 9: { if (Result[i].Prediction != null) { if (energySelectButton != 2) { dataSource[9].Prediction += Result[i].Prediction; } else { dataSource[9].Prediction += Result[i].Prediction / m3calValue; } } if (Result[i].Goal != null) { if (energySelectButton != 2) { dataSource[9].Goal += Result[i].Goal; } else { dataSource[9].Goal += Result[i].Goal / m3calValue; } } break; } case 10: { if (Result[i].Prediction != null) { if (energySelectButton != 2) { dataSource[10].Prediction += Result[i].Prediction; } else { dataSource[10].Prediction += Result[i].Prediction / m3calValue; } } if (Result[i].Goal != null) { if (energySelectButton != 2) { dataSource[10].Goal += Result[i].Goal; } else { dataSource[10].Goal += Result[i].Goal / m3calValue; } } break; } case 11: { if (Result[i].Prediction != null) { if (energySelectButton != 2) { dataSource[11].Prediction += Result[i].Prediction; } else { dataSource[11].Prediction += Result[i].Prediction / m3calValue; } } if (Result[i].Goal != null) { if (energySelectButton != 2) { dataSource[11].Goal += Result[i].Goal; } else { dataSource[11].Goal += Result[i].Goal / m3calValue; // 2019.04.23 오류수정 } } break; } } } } $("#LoadPanel").dxLoadPanel('instance').option('visible', false); $("#sideBarChart").dxChart("instance").option('dataSource', dataSource); } else { utils.toast.show("[BemsEnergyDaily]데이터가 없습니다."); $("#LoadPanel").dxLoadPanel('instance').option('visible', false); } }) .fail(function (error) { utils.toast.show("데이터를 불러오는데 실패 하였습니다."); $("#LoadPanel").dxLoadPanel('instance').option('visible', false); }); } function handleViewShown() { $("#LoadPanel").dxLoadPanel({ message: '로딩 중...', showIndicator: true, visible: false }); $("#monthBtn").dxButton({ text: "월", onClick: function () { $("#LoadPanel").dxLoadPanel('instance').option('visible', true); yearSelectButton = "Month"; energySelectButton = $("#energySelect").dxSelectBox("instance").option('value'); $("#startDatePicker").dxDateBox("instance").option("formatString", "yyyy년 MM월"); $("#startDatePicker").dxDateBox("instance").option("maxZoomLevel", "year"); $("#monthBtn").css("background-image", "linear-gradient(180deg,#9babc3 0%,#41618c 100%)"); $("#yearBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)"); $("#startDatePicker").dxDateBox("instance").option("width", "140px"); var argAxis = $("#sideBarChart").dxChart("instance").option('argumentAxis'); var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value'); argAxis.max = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate(); var labelObj = { customizeText: function () { return this.value + '일'; } }; argAxis.label = labelObj; $("#sideBarChart").dxChart("instance").option('argumentAxis', argAxis); if (energySelectButton == 1) { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 15000; //valAxis.tickInterval = 1000; var labelObj = { customizeText: function () { if (this.value >= 1000 && this.value < 10000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else if (this.value >= 10000) { this.value = this.value.toString().substring(0, 2) + 'K'; } else { this.value = this.value; } return this.value + ' kWh'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } else if (energySelectButton == 2) { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 15000; //valAxis.tickInterval = 200; var labelObj = { customizeText: function () { if (this.value >= 1000 && this.value < 10000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else if (this.value >= 10000) { this.value = this.value.toString().substring(0, 2) + 'K'; } else { this.value = this.value; } return this.value + ' m3'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } else { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 100; //valAxis.tickInterval = 10; var labelObj = { customizeText: function () { if (this.value >= 1000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else { this.value = this.value; } return this.value + ' m3'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } getAllData(); } }); $("#yearBtn").dxButton({ text: "년", onClick: function () { $("#LoadPanel").dxLoadPanel('instance').option('visible', true); yearSelectButton = "Year"; energySelectButton = $("#energySelect").dxSelectBox("instance").option('value'); $("#startDatePicker").dxDateBox("instance").option("formatString", "yyyy년"); $("#startDatePicker").dxDateBox("instance").option("maxZoomLevel", "decade"); $("#yearBtn").css("background-image", "linear-gradient(180deg,#9babc3 0%,#41618c 100%)"); $("#monthBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)"); $("#startDatePicker").dxDateBox("instance").option("width", "100px"); var argAxis = $("#sideBarChart").dxChart("instance").option('argumentAxis'); argAxis.max = 12; var labelObj = { customizeText: function () { return this.value + '월'; } }; argAxis.label = labelObj; $("#sideBarChart").dxChart("instance").option('argumentAxis', argAxis); if (energySelectButton == 1) { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 400000; //valAxis.tickInterval = 50000; var labelObj = { customizeText: function () { if (this.value >= 1000 && this.value < 10000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else if (this.value >= 10000 && this.value < 100000) { this.value = this.value.toString().substring(0, 2) + 'K'; } else if (this.value >= 100000) { this.value = this.value.toString().substring(0, 3) + 'K'; } else { this.value = this.value; } return this.value + ' kWh'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } else if (energySelectButton == 2) { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 400000; //valAxis.tickInterval = 40000; var labelObj = { customizeText: function () { if (this.value >= 1000 && this.value < 10000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else if (this.value >= 10000 && this.value < 100000) { this.value = this.value.toString().substring(0, 2) + 'K'; } else if (this.value >= 100000 && this.value < 1000000) { this.value = this.value.toString().substring(0, 3) + 'K'; } else if (this.value >= 1000000 && this.value < 10000000) { this.value = this.value.toString().substring(0, 1) + 'M'; } else if (this.value >= 10000000 && this.value < 100000000) { this.value = this.value.toString().substring(0, 2) + 'M'; } else if (this.value >= 100000000 && this.value < 1000000000) { this.value = this.value.toString().substring(0, 3) + 'M'; } else if (this.value >= 1000000000) { this.value = this.value.toString().substring(0, 4) + 'M'; } else { this.value = this.value; } return this.value + ' m3'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } else { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 2500; //valAxis.tickInterval = 250; var labelObj = { customizeText: function () { //if (this.value >= 1000 && this.value < 10000) { // this.value = this.value.toString().substring(0, 1) + 'K'; //} else if (this.value >= 10000) { // this.value = this.value.toString().substring(0, 2) + 'K'; //} else { // this.value = this.value; //} return this.value + ' m3'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } getAllData(); } }); $("#startDatePicker").dxDateBox({ value: TodayAdd, maxZoomLevel: 'year', formatString: "yyyy년 MM월", onValueChanged: function (data) { var tmpDate = data.value; $("#LoadPanel").dxLoadPanel('instance').option('visible', true); if (yearSelectButton == "Month") { argAxis.max = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate(); var labelObj = { customizeText: function () { return this.value + '일'; } }; } else { argAxis.max = 12; var labelObj = { customizeText: function () { return this.value + '월'; } }; } argAxis.label = labelObj; $("#sideBarChart").dxChart("instance").option('argumentAxis', argAxis); if (yearSelectButton == "Month") { if (energySelectButton == 1) { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 15000; //valAxis.tickInterval = 1000; var labelObj = { customizeText: function () { if (this.value >= 1000 && this.value < 10000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else if (this.value >= 10000) { this.value = this.value.toString().substring(0, 2) + 'K'; } else { this.value = this.value; } return this.value + ' kWh'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } else if (energySelectButton == 2) { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 15000; //valAxis.tickInterval = 500; var labelObj = { customizeText: function () { if (this.value >= 1000 && this.value < 10000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else if (this.value >= 10000) { this.value = this.value.toString().substring(0, 2) + 'K'; } else { this.value = this.value; } return this.value + ' m3'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } else { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 100; //valAxis.tickInterval = 10; var labelObj = { customizeText: function () { if (this.value >= 1000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else { this.value = this.value; } return this.value + ' m3'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } } else { if (energySelectButton == 1) { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 400000; //valAxis.tickInterval = 50000; var labelObj = { customizeText: function () { if (this.value >= 1000 && this.value < 10000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else if (this.value >= 10000 && this.value < 100000) { this.value = this.value.toString().substring(0, 2) + 'K'; } else if (this.value >= 100000) { this.value = this.value.toString().substring(0, 3) + 'K'; } else { this.value = this.value; } return this.value + ' kWh'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } else if (energySelectButton == 2) { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 400000; //valAxis.tickInterval = 40000; var labelObj = { customizeText: function () { if (this.value >= 1000 && this.value < 10000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else if (this.value >= 10000 && this.value < 100000) { this.value = this.value.toString().substring(0, 2) + 'K'; } else if (this.value >= 100000 && this.value < 1000000) { this.value = this.value.toString().substring(0, 3) + 'K'; } else if (this.value >= 1000000 && this.value < 10000000) { this.value = this.value.toString().substring(0, 1) + 'M'; } else if (this.value >= 10000000 && this.value < 100000000) { this.value = this.value.toString().substring(0, 2) + 'M'; } else if (this.value >= 100000000 && this.value < 1000000000) { this.value = this.value.toString().substring(0, 3) + 'M'; } else if (this.value >= 1000000000) { this.value = this.value.toString().substring(0, 4) + 'M'; } else { this.value = this.value; } return this.value + ' m3'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } else { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 2500; //valAxis.tickInterval = 250; var labelObj = { customizeText: function () { //if (this.value >= 1000 && this.value < 10000) { // this.value = this.value.toString().substring(0, 1) + 'K'; //} else if (this.value >= 10000) { // this.value = this.value.toString().substring(0, 2) + 'K'; //} else { // this.value = this.value; //} return this.value + ' m3'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } } getAllData(); } }); $("#energySelect").dxSelectBox({ dataSource: FuelID, displayExpr: "fuel", valueExpr: "id", value: energySelectButton, onValueChanged: function (data) { $("#LoadPanel").dxLoadPanel('instance').option('visible', true); var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value'); energySelectButton = data.value; if (yearSelectButton == "Month") { argAxis.max = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate(); var labelObj = { customizeText: function () { return this.value + '일'; } }; } else { argAxis.max = 12; var labelObj = { customizeText: function () { return this.value + '월'; } }; } argAxis.label = labelObj; $("#sideBarChart").dxChart("instance").option('argumentAxis', argAxis); if (yearSelectButton == "Month") { if (energySelectButton == 1) { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 15000; //valAxis.tickInterval = 1000; var labelObj = { customizeText: function () { if (this.value >= 1000 && this.value < 10000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else if (this.value >= 10000) { this.value = this.value.toString().substring(0, 2) + 'K'; } else { this.value = this.value; } return this.value + ' kWh'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } else if (energySelectButton == 2) { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 15000; //valAxis.tickInterval = 500; var labelObj = { customizeText: function () { if (this.value >= 1000 && this.value < 10000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else if (this.value >= 10000) { this.value = this.value.toString().substring(0, 2) + 'K'; } else { this.value = this.value; } return this.value + ' m3'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } else { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 100; //valAxis.tickInterval = 10; var labelObj = { customizeText: function () { if (this.value >= 1000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else { this.value = this.value; } return this.value + ' m3'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } } else { if (energySelectButton == 1) { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 400000; //valAxis.tickInterval = 50000; var labelObj = { customizeText: function () { if (this.value >= 1000 && this.value < 10000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else if (this.value >= 10000 && this.value < 100000) { this.value = this.value.toString().substring(0, 2) + 'K'; } else if (this.value >= 100000) { this.value = this.value.toString().substring(0, 3) + 'K'; } else { this.value = this.value; } return this.value + ' kWh'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } else if (energySelectButton == 2) { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 400000; //valAxis.tickInterval = 40000; var labelObj = { customizeText: function () { if (this.value >= 1000 && this.value < 10000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else if (this.value >= 10000 && this.value < 100000) { this.value = this.value.toString().substring(0, 2) + 'K'; } else if (this.value >= 100000 && this.value < 1000000) { this.value = this.value.toString().substring(0, 3) + 'K'; } else if (this.value >= 1000000 && this.value < 10000000) { this.value = this.value.toString().substring(0, 1) + 'M'; } else if (this.value >= 10000000 && this.value < 100000000) { this.value = this.value.toString().substring(0, 2) + 'M'; } else if (this.value >= 100000000 && this.value < 1000000000) { this.value = this.value.toString().substring(0, 3) + 'M'; } else if (this.value >= 1000000000) { this.value = this.value.toString().substring(0, 4) + 'M'; } else { this.value = this.value; } return this.value + ' m3'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } else { var valAxis = this.chartOptions.valueAxis(); valAxis.min = 0; //valAxis.max = 2500; //valAxis.tickInterval = 250; var labelObj = { customizeText: function () { //if (this.value >= 1000 && this.value < 10000) { // this.value = this.value.toString().substring(0, 1) + 'K'; //} else if (this.value >= 10000) { // this.value = this.value.toString().substring(0, 2) + 'K'; //} else { // this.value = this.value; //} return this.value + ' m3'; } }; valAxis.label = labelObj; this.chartOptions.valueAxis(valAxis); } } getAllData(); } }); $("#goalBtn").dxButton({ text: "에너지원별 목표 설정(예측 대비)", onClick: function () { visiblePopup(true); applyonoff = false; } }); $("#LoadPanel").dxLoadPanel('instance').option('visible', true); $("#monthBtn").css("background-image", "linear-gradient(180deg,#9babc3 0%,#41618c 100%)"); $("#yearBtn").css("background-image", "linear-gradient(rgb(56,88,130) 0%, rgb(44,68,101)100%)"); energySelectButton = 1; yearSelectButton = "Month"; var argAxis = $("#sideBarChart").dxChart("instance").option('argumentAxis'); var tmpDate = $("#startDatePicker").dxDateBox("instance").option('value'); if (yearSelectButton == "Month") { argAxis.max = 32 - new Date(tmpDate.getFullYear(), tmpDate.getMonth(), 32).getDate(); var labelObj = { customizeText: function () { return this.value + '일'; } }; } else { argAxis.max = 12; var labelObj = { customizeText: function () { return this.value + '월'; } }; } argAxis.label = labelObj; $("#sideBarChart").dxChart("instance").option('argumentAxis', argAxis); $('#monthBtn').trigger('click'); } var searchViewOptions = { } function handleSearchInSearchView() { } function getpredictiondata() { var applyyear = ($("#Apply_Year").dxDateBox("instance").option('value')).getFullYear(); var power = 0, gas = 0, water = 0; $("#LoadPanel").dxLoadPanel('instance').option('visible', true); var GridSource = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/BemsEnergyDaily" }, requireTotalCount: true, pageSize: 1100 }); GridSource.filter([ ["SiteId", "=", SiteId], //사이트 아이디 "and", ["ServiceTypeId", "=", 1], "and", ["CreatedDate", ">=", new Date(applyyear, 0, 1, 0, 0, 0)], "and", ["CreatedDate", "<=", new Date(applyyear, 11, 31, 23, 59, 59)] ]); GridSource.sort({ getter: "CreatedDate", desc: true }, { getter: "FuelTypeId", ASC: true }); GridSource.load() .done(function (result) { if (result.length != 0) { var savecnt = 0; var YearDayCnt = ((((((new Date(applyyear + 1, 0, 1).getTime()) - (new Date(applyyear, 0, 1).getTime())) / 1000) / 60) / 60) / 24); for (var i = 0; i < result.length; i++) { var temp_fuel = result[i].FuelTypeId; var temp_date = new Date(result[i].CreatedDate); var temp_UTC = Date.UTC(temp_date.getFullYear(), temp_date.getMonth(), temp_date.getDate(), 0, 0, 0); var temp_date_UTC = new Date(temp_UTC); if (temp_fuel == 1) { power += result[i].Prediction; } else if (temp_fuel == 2) { gas += result[i].Prediction; } else { water += result[i].Prediction; } } $("#Prediction_Power").dxTextBox("instance").option('value', parseFloat(power.toFixed(2))); $("#Prediction_Gas").dxTextBox("instance").option('value', parseFloat(gas.toFixed(2))); $("#Prediction_Water").dxTextBox("instance").option('value', parseFloat(water.toFixed(2))); $("#LoadPanel").dxLoadPanel('instance').option('visible', false); } else { $("#Prediction_Power").dxTextBox("instance").option('value', null); $("#Prediction_Gas").dxTextBox("instance").option('value', null); $("#Prediction_Water").dxTextBox("instance").option('value', null); $("#LoadPanel").dxLoadPanel('instance').option('visible', false); utils.toast.show("[BemsEnergyDaily] 예측값이 없습니다."); } }) .fail(function (error) { $("#LoadPanel").dxLoadPanel('instance').option('visible', false); utils.toast.show(error); }); } var viewModel = $.extend(BWA.CommonView.create(params, viewInfo, searchViewOptions, ko.observable(null), handleViewShown, null, handleSearchInSearchView), { viewShowing: handleViewShowing, chartOptions: { dataSource: dataSource, barWidth: 0.5, size: { height: 600 }, commonSeriesSettings: { argumentField: "dateTime", type: "bar" }, series: [ { valueField: "Prediction", name: "예측", color: '#007994' }, { valueField: "Goal", name: "목표", color: '#5F8B95' } ], legend: { verticalAlignment: "top", horizontalAlignment: "center", position: "outside", border: { visible: false } }, valueAxis: ko.observable({ visible: true, label: { customizeText: function () { if (this.value >= 1000 && this.value < 10000) { this.value = this.value.toString().substring(0, 1) + 'K'; } else if (this.value >= 10000) { this.value = this.value.toString().substring(0, 2) + 'K'; } else { this.value = this.value; } return this.value + ' kWh'; } }, min: 0, //max: 11000, valueType: 'numeric', //tickInterval: 1000 }), argumentAxis: ko.observable({ visible: true, label: { customizeText: function () { return this.value + '일'; } }, min: 1, max: 32 - new Date(TodayAdd.getFullYear, TodayAdd.getMonth, 32).getDate(), valueType: 'numeric', tickInterval: 1 }), "export": { enabled: true }, tooltip: { enabled: true, customizeTooltip: function (point) { return { text: numberWithCommas(point.value.toFixed(2)) }; } } }, // 2019.04.17 : 그리드 도표 작업 : 팝업창 추가 PlanGoalPopup_ButtonClicked: DataGridPopup_ButtonClick // 2019.04.17 : 그리드 도표 작업 : 팝업창 추가 }); viewModel.popupOptions = { width: 600, height: 300, visible: visiblePopup, dragEnabled: true, shading: true, closeOnOutsideClick: true, shadingColor: 'transparent', showTitle: true, title: "에너지원 별 목표 설정", showCloseButton: true, onShowing: function () { }, onShown: function (t, tt) { $("#Apply_Year").dxDateBox({ value: TodayAdd, maxZoomLevel: 'decade', formatString: "yyyy년", onValueChanged: function (data) { var tmpDate = data.value; if (tmpDate.getFullYear() > (TodayAdd.getFullYear() + 1)) { utils.toast.show("선택 연도가 내년보다 클 수 없습니다."); $("#Apply_Year").dxDateBox("instance").option('value', TodayAdd); return; } $("#Prediction_Power").dxTextBox("instance").option('value', null); $("#Prediction_Gas").dxTextBox("instance").option('value', null); $("#Prediction_Water").dxTextBox("instance").option('value', null); $("#Apply_Power").dxTextBox("instance").option('value', null); $("#Apply_Gas").dxTextBox("instance").option('value', null); $("#Apply_Water").dxTextBox("instance").option('value', null); $("#Goal_Power").dxTextBox("instance").option('value', null); $("#Goal_Gas").dxTextBox("instance").option('value', null); $("#Goal_Water").dxTextBox("instance").option('value', null); getpredictiondata(); } }); $("#Goal_Power").dxTextBox({ readOnly: true }); $("#Goal_Gas").dxTextBox({ readOnly: true }); $("#Goal_Water").dxTextBox({ readOnly: true }); $("#Apply_Power").dxTextBox({ }); $("#Apply_Gas").dxTextBox({ }); $("#Apply_Water").dxTextBox({ }); $("#Prediction_Power").dxTextBox({ }); $("#Prediction_Gas").dxTextBox({ }); $("#Prediction_Water").dxTextBox({ }); $("#Apply_Btn").dxButton({ text: "적용", onClick: function () { var applyyear = ($("#Apply_Year").dxDateBox("instance").option('value')).getFullYear(); var applypower = $("#Apply_Power").dxTextBox("instance").option('value'); if (applypower != "") { if (applypower != null) applypower = parseFloat(applypower); else { utils.toast.show("전력 절감량 정보가 잘못되었습니다."); return; } } else { utils.toast.show("전력 절감량 정보가 잘못되었습니다."); return; } var applygas = $("#Apply_Gas").dxTextBox("instance").option('value'); if (applygas != "") { if (applygas != null) applygas = parseFloat(applygas); else { utils.toast.show("가스 절감량 정보가 잘못되었습니다."); return; } } else { utils.toast.show("가스 절감량 정보가 잘못되었습니다."); return; } var applywater = $("#Apply_Water").dxTextBox("instance").option('value'); if (applywater != "") { if (applywater != null) applywater = parseFloat(applywater); else { utils.toast.show("수도 절감량 정보가 잘못되었습니다."); return; } } else { utils.toast.show("수도 절감량 정보가 잘못되었습니다."); return; } var temp_power = 0, temp_gas = 0, temp_water = 0; $("#LoadPanel").dxLoadPanel('instance').option('visible', true); var GridSource = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/BemsEnergyDaily" }, requireTotalCount: true, pageSize: 1100 }); GridSource.filter([ ["SiteId", "=", SiteId], //사이트 아이디 "and", ["ServiceTypeId", "=", 1], "and", ["CreatedDate", ">=", new Date(applyyear, 0, 1, 0, 0, 0)], "and", ["CreatedDate", "<=", new Date(applyyear, 11, 31, 23, 59, 59)] ]); GridSource.sort({ getter: "CreatedDate", desc: true }, { getter: "FuelTypeId", ASC: true }); GridSource.load() .done(function (result) { if (result.length != 0) { var savecnt = 0; var YearDayCnt = ((((((new Date(applyyear + 1, 0, 1).getTime()) - (new Date(applyyear, 0, 1).getTime())) / 1000) / 60) / 60) / 24); for (var i = 0; i < result.length; i++) { var temp_fuel = result[i].FuelTypeId; var temp_date = new Date(result[i].CreatedDate); var temp_UTC = Date.UTC(temp_date.getFullYear(), temp_date.getMonth(), temp_date.getDate(), 0, 0, 0); var temp_date_UTC = new Date(temp_UTC); var temp_Prediction = result[i].Prediction; if (temp_fuel == 1) { temp_power += parseFloat(((result[i].Prediction * (100 - applypower)) / 100).toFixed(2)); } else if (temp_fuel == 2) { temp_gas += parseFloat(((result[i].Prediction * (100 - applygas)) / 100).toFixed(2)); } else { temp_water += parseFloat(((result[i].Prediction * (100 - applywater)) / 100).toFixed(2)); } } $("#Goal_Power").dxTextBox("instance").option('value', parseFloat(temp_power.toFixed(2))); $("#Goal_Gas").dxTextBox("instance").option('value', parseFloat(temp_gas.toFixed(2))); $("#Goal_Water").dxTextBox("instance").option('value', parseFloat(temp_water.toFixed(2))); applyonoff = true; $("#LoadPanel").dxLoadPanel('instance').option('visible', false); } else { applyonoff = false; $("#LoadPanel").dxLoadPanel('instance').option('visible', false); utils.toast.show("[BemsEnergyDaily] 예측값이 없습니다."); } }) .fail(function (error) { $("#LoadPanel").dxLoadPanel('instance').option('visible', false); utils.toast.show(error); }); } }); $("#Save_Btn").dxButton({ text: "저장", onClick: function () { if (applyonoff) { var applyyear = ($("#Apply_Year").dxDateBox("instance").option('value')).getFullYear(); var applypower = $("#Apply_Power").dxTextBox("instance").option('value'); if (applypower != "") applypower = parseFloat(applypower); var applygas = $("#Apply_Gas").dxTextBox("instance").option('value'); if (applygas != "") applygas = parseFloat(applygas); var applywater = $("#Apply_Water").dxTextBox("instance").option('value'); if (applywater != "") applywater = parseFloat(applywater); if (applypower == "" || applygas == "" || applywater == "") { utils.toast.show("입력 데이터가 잘못되었습니다."); return; } $("#LoadPanel").dxLoadPanel('instance').option('visible', true); var GridSource = new DevExpress.data.DataSource({ store: { type: "odata", url: endpointSelector + "/BemsEnergyDaily" }, requireTotalCount: true, pageSize: 1100 }); GridSource.filter([ ["SiteId", "=", SiteId], //사이트 아이디 "and", ["ServiceTypeId", "=", 1], "and", ["CreatedDate", ">=", new Date(applyyear, 0, 1, 0, 0, 0)], "and", ["CreatedDate", "<=", new Date(applyyear, 11, 31, 23, 59, 59)] ]); GridSource.sort({ getter: "CreatedDate", desc: true }, { getter: "FuelTypeId", ASC: true }); GridSource.load() .done(function (result) { if (result.length != 0) { var savecnt = 0; var YearDayCnt = ((((((new Date(applyyear + 1, 0, 1).getTime()) - (new Date(applyyear, 0, 1).getTime())) / 1000) / 60) / 60) / 24); for (var i = 0; i < result.length; i++) { var temp_fuel = result[i].FuelTypeId; var temp_date = new Date(result[i].CreatedDate); var temp_UTC = Date.UTC(temp_date.getFullYear(), temp_date.getMonth(), temp_date.getDate(), 0, 0, 0); var temp_date_UTC = new Date(temp_UTC); var temp_Prediction = result[i].Prediction; if (temp_fuel == 1) { var temp_Goal = parseFloat(((result[i].Prediction * (100 - applypower)) / 100).toFixed(2)); } else if (temp_fuel == 2) { var temp_Goal = parseFloat(((result[i].Prediction * (100 - applygas)) / 100).toFixed(2)); } else { var temp_Goal = parseFloat(((result[i].Prediction * (100 - applywater)) / 100).toFixed(2)); } BWA.api.post('BemsEnergyDaily/UpdatePart2', { //UpdatePart SiteId: SiteId, BuildingId: 1, ServiceTypeId: 1, FuelTypeId: temp_fuel, CreatedDate: temp_date_UTC, Prediction: temp_Prediction, Goal: temp_Goal }).done(function () { savecnt++; if (savecnt == YearDayCnt * 3) { applyonoff = false; utils.toast.show("DB에 저장이 되었습니다."); $("#LoadPanel").dxLoadPanel('instance').option('visible', false); if (yearSelectButton == "Month") $('#monthBtn').trigger('click'); else $('#yearBtn').trigger('click'); } }).fail(function (error) { $("#LoadPanel").dxLoadPanel('instance').option('visible', false); utils.toast.show("DB에 저장이 실패하였습니다."); }); } } else { $("#LoadPanel").dxLoadPanel('instance').option('visible', false); utils.toast.show("[BemsEnergyDaily] 예측값이 없습니다."); } }) .fail(function (error) { $("#LoadPanel").dxLoadPanel('instance').option('visible', false); utils.toast.show(error); }); } else { $("#LoadPanel").dxLoadPanel('instance').option('visible', false); utils.toast.show("적용버튼을 먼저 눌러주시기 바랍니다."); } } }); $("#Prediction_Power").dxTextBox("instance").option('value', null); $("#Prediction_Gas").dxTextBox("instance").option('value', null); $("#Prediction_Water").dxTextBox("instance").option('value', null); $("#Apply_Power").dxTextBox("instance").option('value', null); $("#Apply_Gas").dxTextBox("instance").option('value', null); $("#Apply_Water").dxTextBox("instance").option('value', null); $("#Goal_Power").dxTextBox("instance").option('value', null); $("#Goal_Gas").dxTextBox("instance").option('value', null); $("#Goal_Water").dxTextBox("instance").option('value', null); getpredictiondata(); }, onHidden: function () { } }; // 2019.04.17 : 그리드 도표 작업 : 팝업창 추가 ~~~ // 그래프 도표 팝업창 viewModel.PlanGoalPopupOptions = { 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.PlanGoalOptions = { dataSource: dataArrayresult, paging: { pageSize: 17 }, columns: [ { dataField: 'dateTime', width: '20%', alignment: 'center', },// dataType: 'date', format: 'yyyy-MM-dd HH:mm' }, { dataField: 'Prediction', width: '40%', alignment: 'center', format: 'fixedPoint', precision: 2 }, { dataField: 'Goal', width: '40%', alignment: 'center', format: 'fixedPoint', precision: 2 } ], // 엑셀 출력 "export": { enabled: true, fileName: '에너지원별 에너지 사용량 및 목표설정 값' } }; // ~~~ 2019.04.17 : 그리드 도표 작업 : 팝업창 추가 return viewModel; };