Partials.Consume = function (params) { var tabs = [ { text: "월" }, { text: "년" } ]; var selectedTab = ko.observable(0); var dataViewPopup = ko.observable(false); 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, select: ['Year', 'Month', 'Day', 'Cooler', 'Boiler'], paginate: false, map: function (item) { item.Total = 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, select: ['Year', 'Month', 'Cooler', 'Boiler'], paginate: false, map: function (item) { item.Total = 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({ dataSource: chartDataSource, 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: "#70cbed", valueField: "Cooler", }, { name: "난방", color: "#ff7c7c", valueField: "Boiler" }, { name: "전체", type: "line", color: "#9da5ad", valueField: "Total" }, ], 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({ formatString: "yyyy년 MM월", maxZoomLevel: 'year' }); viewModel.summary.previous.name('전월 소비량'); break; case 1: dataSource = createMonthly(); $("#dateBox").dxDateBox({ formatString: "yyyy년", maxZoomLevel: 'decade' }); viewModel.summary.previous.name('전년 소비량'); 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: "ConsumeDaily" }, columns: [ { dataField: 'Day', caption: '일', width: '10%', }, { dataField: 'Cooler', caption: '냉방', format: 'fixedPoint' }, { dataField: 'Boiler', caption: '난방', format: 'fixedPoint' }, { dataField: 'Total', caption: '전체', format: 'fixedPoint' }] }); break; case 1: dataGrid.option({ "export": { enabled: true, fileName: "ConsumeMonthly" }, columns: [ { dataField: 'Month', caption: '월', width: '10%', }, { dataField: 'Cooler', caption: '냉방', format: 'fixedPoint' }, { dataField: 'Boiler', caption: '난방', format: 'fixedPoint' }, { dataField: 'Total', caption: '전체', format: 'fixedPoint' }] }); break; } } }; var viewModel = { dateBoxValue: dateBoxValue, dataSource: chartDataSource, tabs: tabs, selectedTab: selectedTab, dataViewPopup: dataViewPopup, viewShown: handleViewShown, summary: { load: function (result) { viewModel.summary.pred.max({ title: '', value: 0 }); viewModel.summary.pred.min({ title: '', value: 0 }); viewModel.summary.previous.max({ title: '', value: 0 }); viewModel.summary.previous.min({ title: '', value: 0 }); switch (selectedTab()) { case 0: this.pred.max(result.reduce(function (p, c) { return p.value > c.Total ? p : { title: c.Day + '일', value: c.Total } })); this.pred.min(result.reduce(function (p, c) { return p.value <= c.Total ? p : { title: c.Day + '일', value: c.Total } })); var date = new Date(dateBoxValue()); date.setMonth(date.getMonth() - 1); previousDataSource = new DevExpress.data.DataSource({ store: Partials.odata.ConsumeDaily, select: ['Year', 'Month', 'Day', 'Cooler', 'Boiler'], paginate: false, map: function (item) { item.Consume = item.Cooler + item.Boiler; return item; }, filter: [ ["SiteId", "=", 1], ["BuildingId", "=", 1], ["Year", "=", date.getFullYear()], ["Month", "=", date.getMonth() + 1], ] }); previousDataSource.load().done(function (data) { viewModel.summary.previous.max(data.reduce(function (p, c) { return p.value > c.Consume ? p : { title: c.Day + '일', value: c.Consume } })); viewModel.summary.previous.min(data.reduce(function (p, c) { return p.value <= c.Consume ? p : { title: c.Day + '일', value: c.Consume } })); }); break; case 1: this.pred.max(result.reduce(function (p, c) { return p.value > c.Total ? p : { title: c.Month + '월', value: c.Total } })); this.pred.min(result.reduce(function (p, c) { return p.value <= c.Total ? p : { title: c.Month + '월', value: c.Total } })); var date = new Date(dateBoxValue()); date.setFullYear(date.getFullYear() - 1); previousDataSource = new DevExpress.data.DataSource({ store: Partials.odata.ConsumeMonthly, select: ['Year', 'Month', 'Cooler', 'Boiler'], paginate: false, map: function (item) { item.Consume = item.Cooler + item.Boiler; return item; }, filter: [ ["SiteId", "=", 1], ["BuildingId", "=", 1], ["Year", "=", date.getFullYear()] ] }); previousDataSource.load().done(function (data) { viewModel.summary.previous.max(data.reduce(function (p, c) { return p.value > c.Consume ? p : { title: c.Month + '월', value: c.Consume } })); viewModel.summary.previous.min(data.reduce(function (p, c) { return p.value <= c.Consume ? p : { title: c.Month + '월', value: c.Consume } })); }); break; } }, previous: { name: ko.observable('전월 소비량'), min: ko.observable({ title: '', value: 0 }), max: ko.observable({ title: '', value: 0 }), }, pred: { min: ko.observable({ title: '', value: 0 }), max: ko.observable({ title: '', value: 0 }), } }, 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; };