Partials.Goal = function (params) { var tabs = [{ text: "월" }, { text: "년" }]; var selectedTab = ko.observable(0); var dateBoxValue = ko.observable(new Date()); var initialized = false; var dataSource; var chartDataSource = ko.observable(); function createDaily() { return new DevExpress.data.DataSource({ store: Partials.odata.ConsumeDaily, paginate: false, select: ['Year', 'Month', 'Day', 'Cooler', 'Boiler', 'Goal'], map: function (item) { item.Consume = item.Cooler + item.Boiler; return item; }, filter: [ ["SiteId", "=", 1], ["BuildingId", "=", 1], ["Year", "=", dateBoxValue().getFullYear()], ["Month", "=", dateBoxValue().getMonth() + 1], ] }); } function createMonthly() { return new DevExpress.data.DataSource({ store: Partials.odata.ConsumeMonthly, paginate: false, select: ['Year', 'Month', 'Cooler', 'Boiler', 'Goal'], map: function (item) { item.Consume = item.Cooler + item.Boiler; return item; }, filter: [ ["SiteId", "=", 1], ["BuildingId", "=", 1], ["Year", "=", dateBoxValue().getFullYear()] ] }); } function load(result) { chartDataSource(result); viewModel.summary.load(result); $("#graphContainer").dxChart("instance").option({ commonSeriesSettings: { argumentField: ["Day", "Month"][selectedTab()], type: "bar", hoverMode: "allArgumentPoints", selectionMode: "allArgumentPoints", }, argumentAxis: { label: { customizeText: function () { return this.value + ['일', '월'][selectedTab()]; } }, type: 'discreate', axisDivisionFactor: [31, 100][selectedTab()] }, valueAxis: { label: { format: 'fixedPoint thousands', customizeText: function () { return this.valueText + ' toe'; } } }, series: [ { name: "예측", color: "#F6BC21", valueField: "Consume", }, { name: "목표", color: "#5EAC40", valueField: "Goal" } ], legend: { verticalAlignment: "top", horizontalAlignment: "right", position: "inside", border: { visible: true } }, onPointClick: function (e) { e.target.select(); }, tooltip: { enabled: true, location: "edge", format: 'fixedPoint', customizeText: function () { return this.seriesName + " : " + this.valueText; } } }); } dateBoxValue.subscribe(function (e) { switch (selectedTab()) { case 0: dataSource = createDaily(); break; case 1: dataSource = createMonthly(); break; } handleViewShown(); }); selectedTab.subscribe(function (e) { switch (selectedTab()) { case 0: dataSource = createDaily(); $("#dateBox").dxDateBox("instance").option({ formatString: "yyyy년 MM월", maxZoomLevel: 'year' }); editGoalPopup.editable(true); break; case 1: dataSource = createMonthly(); $("#dateBox").dxDateBox("instance").option({ formatString: "yyyy년", maxZoomLevel: 'decade' }); editGoalPopup.editable(false); break; } handleViewShown(); }); var handleViewShown = function () { if (initialized == false) { switch (selectedTab()) { case 0: dataSource = createDaily(); break; case 1: dataSource = createMonthly(); break; } initialized = true; } dataSource.load().done(function (result) { load(result); }); }; var dataViewPopup = { width: 800, height: 'auto', showTitle: true, title: ko.computed({ read: function () { switch (selectedTab()) { case 0: return moment(dateBoxValue()).format("YYYY년 MM월"); case 1: return moment(dateBoxValue()).format("YYYY년"); } } }), visible: ko.observable(false), dragEnabled: false, closeOnOutsideClick: false, show: function () { dataViewPopup.visible(true); }, shownAction: function () { var dataGrid = $("#dataGrid").dxDataGrid("instance"); switch (selectedTab()) { case 0: dataGrid.option({ "export": { enabled: true, fileName: "GoalDaily" }, columns: [ { dataField: 'Day', caption: '일', width: '10%', }, { dataField: 'Consume', caption: '예측 소비량', format: 'fixedPoint' }, { dataField: 'Goal', caption: '목표 소비량', format: 'fixedPoint' }, { caption: '1차알람', format: 'fixedPoint', calculateCellValue: function (data) { return data.Goal * 0.9; } }, { caption: '2차알람', format: 'fixedPoint', calculateCellValue: function (data) { return data.Goal * 1; } }] }); break; case 1: dataGrid.option({ "export": { enabled: true, fileName: "GoalMonthly" }, columns: [ { dataField: 'Month', caption: '월', width: '10%', }, { dataField: 'Consume', caption: '예측 소비량', format: 'fixedPoint' }, { dataField: 'Goal', caption: '목표 소비량', format: 'fixedPoint' }, { caption: '1차알람', format: 'fixedPoint', calculateCellValue: function (data) { return data.Goal * 0.9; } }, { caption: '2차알람', format: 'fixedPoint', calculateCellValue: function (data) { return data.Goal * 1; } }] }); break; } } }; var applyPopup = { width: 360, height: 220, showTitle: true, rateOf: ko.observable(80), dragEnabled: false, visible: ko.observable(false), showCloseButton: false, show: function () { applyPopup.visible(true); }, title: '일괄적용', buttons: [ { toolbar: 'bottom', location: 'center', widget: 'button', options: { text: '확인', clickAction: function () { var newArray = chartDataSource().map(function (obj) { obj.Goal = parseInt(obj.Consume * (applyPopup.rateOf() / 100)); var date = moment(new Date(obj.Year, obj.Month - 1, obj.Day)).format('YYYY-MM-DD'); Partials.db.BemsEnergyGoalDaily.update({ SiteId: 1, BuildingId: 1, CreatedDate: date }, { Goal: obj.Goal } ); return obj; }); chartDataSource(newArray); applyPopup.visible(false); } } }, { toolbar: 'bottom', location: 'center', widget: 'button', options: { text: '취소', clickAction: function () { applyPopup.visible(false); } } }, ] }; var editGoalPopup = { width: 600, height: 'auto', showTitle: true, editable: ko.observable(true), buttons: [ { toolbar: 'top', location: 'after', widget: 'button', options: { text: '일괄적용', clickAction: function () { applyPopup.show(); } } } ], title: ko.computed({ read: function () { switch (selectedTab()) { case 0: return moment(dateBoxValue()).format("YYYY년 MM월") + ' - 목표량 설정'; case 1: return moment(dateBoxValue()).format("YYYY년") + ' - 목표량 설정'; } } }), visible: ko.observable(false), dragEnabled: false, closeOnOutsideClick: false, show: function () { if (selectedTab() == 0) { editGoalPopup.visible(true); } }, shownAction: function () { var dataGrid = $("#editGoalGrid").dxDataGrid("instance"); switch (selectedTab()) { case 0: dataGrid.option({ "export": { enabled: true, fileName: "SettingGoalDaily" }, rowUpdating: function (rowInfo) { rowInfo.newData.Goal = parseInt(rowInfo.newData.Goal); var date = moment(new Date(rowInfo.key.Year, rowInfo.key.Month - 1, rowInfo.key.Day)).format('YYYY-MM-DD'); Partials.db.BemsEnergyGoalDaily.update({ SiteId: 1, BuildingId: 1, CreatedDate: date }, rowInfo.newData); }, columns: [ { dataField: 'Day', caption: '일', width: '10%', allowEditing: false}, { dataField: 'Consume', caption: '예측 소비량', format: 'fixedPoint', allowEditing: false }, { dataField: 'Goal', caption: '목표 소비량', format: 'fixedPoint' }] }); break; } } }; var viewModel = { dateBoxValue: dateBoxValue, dataSource: chartDataSource, tabs: tabs, selectedTab: selectedTab, dataViewPopup: dataViewPopup, editGoalPopup: editGoalPopup, viewShown: handleViewShown, dataViewOption: dataViewPopup, applyPopup: applyPopup, editGoalOption: {}, summary: { load: function (data) { switch (selectedTab()) { case 0: viewModel.summary.pred.max(data.reduce(function (p, c) { return p.value > c.Consume ? p : { title: c.Day + '일', value: c.Consume } })); viewModel.summary.pred.min(data.reduce(function (p, c) { return p.value <= c.Consume ? p : { title: c.Day + '일', value: c.Consume } })); viewModel.summary.goal.max(data.reduce(function (p, c) { return p.value > c.Goal ? p : { title: c.Day + '일', value: c.Goal } })); viewModel.summary.goal.min(data.reduce(function (p, c) { return p.value <= c.Goal ? p : { title: c.Day + '일', value: c.Goal } })); break; case 1: viewModel.summary.pred.max(data.reduce(function (p, c) { return p.value > c.Consume ? p : { title: c.Month + '월', value: c.Consume } })); viewModel.summary.pred.min(data.reduce(function (p, c) { return p.value <= c.Consume ? p : { title: c.Month + '월', value: c.Consume } })); viewModel.summary.goal.max(data.reduce(function (p, c) { return p.value > c.Goal ? p : { title: c.Month + '월', value: c.Goal } })); viewModel.summary.goal.min(data.reduce(function (p, c) { return p.value <= c.Goal ? p : { title: c.Month + '월', value: c.Goal } })); break; } }, pred: { min: ko.observable({title:'', value: Infinity} ), max: ko.observable({title:'', value: -Infinity} ), }, goal: { min: ko.observable({ title: '', value: Infinity }), max: ko.observable({ title: '', value: -Infinity }), } }, onPrevious: function (e) { var date = new Date(dateBoxValue()); (selectedTab() == 0) ? date.setMonth(date.getMonth() - 1) : date.setFullYear(date.getFullYear() - 1) dateBoxValue(date); }, onNext: function (e) { var date = new Date(dateBoxValue()); (selectedTab() == 0) ? date.setMonth(date.getMonth() + 1) : date.setFullYear(date.getFullYear() + 1) dateBoxValue(date); } }; return viewModel; };