Partials.HistoryBoiler = function (params) { var dateBoxValue = ko.observable(new Date()); var initialized = false; var chartDataSource = ko.observable(); function createDataSource() { return new DevExpress.data.DataSource({ store: Partials.db.BemsDeviceRunHistory, paginate: false, select: ['DeviceId', 'RunDate', 'Duration', 'BemsDevice'], expand: ["BemsDevice", "BemsDevice/BemsDeviceType"], map: function (item) { item.aVal1 = item.RunDate.getHours(); item.aVal2 = item.RunDate.getHours() + item.Duration; item.name = item.BemsDevice.Name; return item; }, filter: [ ["SiteId", "=", 1], ["BuildingId", "=", 1], ["ServiceTypeId", "=", 2], ["year(RunDate)", "=", dateBoxValue().getFullYear()], ["month(RunDate)", "=", dateBoxValue().getMonth() + 1], ["day(RunDate)", "=", dateBoxValue().getDate()], ], }); } function load(result) { chartDataSource(result); $("#graphContainer").dxChart("instance").option({ dataSource:result, equalBarWidth: { width: 15 }, animation: { enabled: true }, commonSeriesSettings: { argumentField: "name", type: "rangeBar", color: "#ff7c7c" }, series: [ { rangeValue1Field: "aVal1", rangeValue2Field: "aVal2", }, ], valueAxis: { position: 'top', max: 24, min: 0, tickInterval: 1, label: { customizeText: function () { return this.valueText + '시'; } } }, argumentAxis: { grid: { visible: false }, inverted: true, label: { customizeText: function () { return (this.valueText.indexOf('_N') > -1) ? ' ' : this.valueText; } } }, rotated: true, legend: { visible: false }, tooltip: { enabled: true, customizeTooltip: function (point) { return { text: '가동시간: ' + point.rangeValue1 + '시 ~ ' + point.rangeValue2 + '시' } } } }); } dateBoxValue.subscribeChanged(function (latestValue, previousValue) { if (latestValue.getFullYear() === previousValue.getFullYear()) { if (latestValue.getMonth() === previousValue.getMonth()) { if (latestValue.getDate() !== previousValue.getDate()) { var dataSource = createDataSource(); dataSource.load().done(function (result) { load(result); }); } return; } } handleViewShown(); }); var handleViewShown = function () { var list = $("#listDays").dxList({ dataSource: new DevExpress.data.DataSource({ store: Partials.odata.DeviceRunHistoryGroup, paginate: false, select: ["Year", "Month", "Day"], map: function (item) { item.RunDate = new Date(item.Year, item.Month - 1, item.Day); return item; }, filter: [ ["SiteId", "=", 1], ["BuildingId", "=", 1], ["ServiceTypeId", "=", 2], ["Year", "=", dateBoxValue().getFullYear()], ["Month", "=", dateBoxValue().getMonth() + 1], ], sort: [{ getter: 'Day', desc: true }] }), selectionMode: 'single', itemTemplate: function (data) { return $("
").text(Globalize.format(data.RunDate, 'dd일 (ddd)')); }, onSelectionChanged: function (args) { if (args.addedItems.length > 0) dateBoxValue(args.addedItems[0].RunDate); }, onContentReady: function (e) { var dataSource = createDataSource(); dataSource.load().done(function (result) { $("#listDays").dxList("instance").selectItem(0); load(result); }); } }).dxList("instance"); }; var groupBy = function (data) { var other = []; $.each(data, function (i, value) { var key = data[i].DeviceId; var item = data[i]; var duration = Globalize.format(item.aVal1, 'd2') + '시 ~ ' + (Globalize.format(item.aVal2, 'd2')) + '시'; if (other[key]) { other[key].Run.push(duration); } else { other[key] = { DeviceTypeName: item.BemsDevice.BemsDeviceType.Name, DeviceName: item.BemsDevice.Name, Run: [duration] }; } }) return other; }; var dataViewPopup = { width: 700, height: 'auto', showTitle: true, title: ko.computed({ read: function () { return Globalize.format(dateBoxValue(), 'yyyy년 MM월 dd일 (dddd)'); } }), visible: ko.observable(false), dragEnabled: false, closeOnOutsideClick: false, show: function () { dataViewPopup.visible(true); }, shownAction: function () { var dataGrid = $("#dataGrid").dxDataGrid("instance"); dataGrid.option({ dataSource: groupBy(chartDataSource()), "export": { enabled: true, fileName: "HistoryBoiler" }, columns: [ { dataField: 'DeviceTypeName', caption: '타입', }, { dataField: 'DeviceName', caption: '보일러명', }, { dataField: 'Run.0', caption: '운전 #1', alignment: 'center' }, { dataField: 'Run.1', caption: '운전 #2', alignment: 'center' }, { dataField: 'Run.2', caption: '운전 #3', alignment: 'center' }, ], }); } }; var viewModel = { dateBoxValue: dateBoxValue, dataSource: chartDataSource, dataViewPopup: dataViewPopup, viewShown: handleViewShown, onPrevious: function (e) { var date = new Date(dateBoxValue()); date.prevMonth(); dateBoxValue(date); }, onNext: function (e) { var date = new Date(dateBoxValue()); date.nextMonth(); dateBoxValue(date); } }; return viewModel; };