123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- Partials.HistoryCooler = 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", "=", 1],
- ["year(RunDate)", "=", dateBoxValue().getFullYear()],
- ["month(RunDate)", "=", dateBoxValue().getMonth() + 1],
- ["day(RunDate)", "=", dateBoxValue().getDate()],
- ],
- });
- }
- function load(result) {
- chartDataSource(result);
- $("#graphContainer").dxChart({
- dataSource: result,
- equalBarWidth: {
- width: 15
- },
- animation: {
- enabled: true
- },
- commonSeriesSettings: {
- argumentField: "name",
- type: "rangeBar",
- color: "#70cbed"
- },
- 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,
- },
- customizePoint: function (point) {
- if (point.argument.indexOf('AC') > -1) return {color: '#70cbed' };
- if (point.argument.indexOf("CH") > -1) return { color: '#F6BC21' };
- if (point.argument.indexOf("HC") > -1) return { color: '#edc0cb' };
- },
- 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", "=", 1],
- ["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: "HistoryCooler"
- },
- 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;
- };
|