| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 | 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 $("<div>").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;};
 |