Partials.Product = 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', 'Product'], map: function (item) { item.Consume = item.Cooler + item.Boiler; item.Alarm1 = item.Goal * 0.9; item.Alarm2 = item.Goal * 1; item.RateOfReduce = (1 - (item.Product / item.Goal)) * 100; return item; }, filter: [ ["SiteId", "=", 1], ["BuildingId", "=", 1], ["Year", "=", dateBoxValue().getFullYear()], ["Month", "=", dateBoxValue().getMonth() + 1], ], sort: 'Day' }); } function createMonthly() { return new DevExpress.data.DataSource({ store: Partials.odata.ConsumeMonthly, paginate: false, select: ['Year', 'Month', 'Cooler', 'Boiler', 'Goal', 'Product'], map: function (item) { item.Consume = item.Cooler + item.Boiler; item.Alarm1 = item.Goal * 0.9; item.Alarm2 = item.Goal * 1; item.RateOfReduce = (1 - (item.Product / item.Goal)) * 100; return item; }, filter: [ ["SiteId", "=", 1], ["BuildingId", "=", 1], ["Year", "=", dateBoxValue().getFullYear()] ], sort: 'Month' }); } function load(result) { chartDataSource(result); viewModel.summary.prediction(result.reduce(function (p, c) { return p + c.Consume }, 0)); viewModel.summary.goal(result.reduce(function (p, c) { return p + c.Goal }, 0)); viewModel.summary.product(result.reduce(function (p, c) { return p + c.Product }, 0)); viewModel.summary.rateOfReduce((1 - (viewModel.summary.product() / viewModel.summary.goal())) * 100); $("#graphContainer").dxChart("instance").option({ dataSource: chartDataSource, commonSeriesSettings: { argumentField: ["Day", "Month"][selectedTab()], type: "stackedBar", 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: "#b3d199", valueField: "Product", }, { name: "알람", type: "rangeBar", color: "#eabe25", rangeValue1Field: "Alarm1", rangeValue2Field: "Alarm2" }, { name: "예측", type: "line", color: "#427ce6", valueField: "Consume", }, { name: "목표", type: "line", color: "#40923a", valueField: "Goal", }, ], legend: { verticalAlignment: "top", horizontalAlignment: "right", position: "inside", border: { visible: true }, orientation: "vertical" }, 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' }); break; case 1: dataSource = createMonthly(); $("#dateBox").dxDateBox({ formatString: "yyyy년", maxZoomLevel: 'decade' }); 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' }, { dataField: 'Product', caption: '실적', format: 'fixedPoint' }, { dataField: 'RateOfReduce', caption: '절감율 (%)', format: 'fixedPoint', precision: 2, cellTemplate: function (e, v) { if (v.value > 0) $("
").text('+' + v.text).appendTo(e); else if (v.value < 0) $("
").text(v.text).appendTo(e); else $("
").text(v.text).appendTo(e); } }, { dataField: 'Alarm1', caption: '1차알람', format: 'fixedPoint' }, { dataField: 'Alarm2', caption: '2차알람', format: 'fixedPoint' }, ] }); 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' }, { dataField: 'Product', caption: '실적', format: 'fixedPoint' }, { dataField: 'RateOfReduce', caption: '절감율 (%)', format: 'fixedPoint', precision: 2, cellTemplate: function (e, v) { if (v.value > 0) $("
").text('+' + v.text).appendTo(e); else if (v.value < 0) $("
").text(v.text).appendTo(e); else $("
").text(v.text).appendTo(e); } }, { dataField: 'Alarm1', caption: '1차알람', format: 'fixedPoint' }, { dataField: 'Alarm2', caption: '2차알람', format: 'fixedPoint' }] }); break; } } }; var viewModel = { dateBoxValue: dateBoxValue, dataSource: chartDataSource, tabs: tabs, selectedTab: selectedTab, summary: { prediction: ko.observable(), goal: ko.observable(), product: ko.observable(), rateOfReduce: ko.observable() }, dataViewPopup: dataViewPopup, viewShown: handleViewShown, dataViewOption: dataViewPopup, 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; };