66354ae2a788810ac5ae29c08946ce66ebdf894c.svn-base 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. Partials.HistoryCooler = function (params) {
  2. var dateBoxValue = ko.observable(new Date());
  3. var initialized = false;
  4. var chartDataSource = ko.observable();
  5. function createDataSource() {
  6. return new DevExpress.data.DataSource({
  7. store: Partials.db.BemsDeviceRunHistory,
  8. paginate: false,
  9. select: ['DeviceId', 'RunDate', 'Duration', 'BemsDevice',],
  10. expand: ["BemsDevice", "BemsDevice/BemsDeviceType"],
  11. map: function (item) {
  12. item.aVal1 = item.RunDate.getHours();
  13. item.aVal2 = item.RunDate.getHours() + item.Duration;
  14. item.name = item.BemsDevice.Name;
  15. return item;
  16. },
  17. filter: [
  18. ["SiteId", "=", 1],
  19. ["BuildingId", "=", 1],
  20. ["ServiceTypeId", "=", 1],
  21. ["year(RunDate)", "=", dateBoxValue().getFullYear()],
  22. ["month(RunDate)", "=", dateBoxValue().getMonth() + 1],
  23. ["day(RunDate)", "=", dateBoxValue().getDate()],
  24. ],
  25. });
  26. }
  27. function load(result) {
  28. chartDataSource(result);
  29. $("#graphContainer").dxChart({
  30. dataSource: result,
  31. equalBarWidth: {
  32. width: 15
  33. },
  34. animation: {
  35. enabled: true
  36. },
  37. commonSeriesSettings: {
  38. argumentField: "name",
  39. type: "rangeBar",
  40. color: "#70cbed"
  41. },
  42. series: [
  43. {
  44. rangeValue1Field: "aVal1",
  45. rangeValue2Field: "aVal2",
  46. }
  47. ],
  48. valueAxis: {
  49. position: 'top',
  50. max: 24,
  51. min: 0,
  52. tickInterval: 1,
  53. label: {
  54. customizeText: function () {
  55. return this.valueText + '시';
  56. }
  57. }
  58. },
  59. argumentAxis: {
  60. grid: { visible: false },
  61. inverted: true,
  62. },
  63. customizePoint: function (point) {
  64. if (point.argument.indexOf('AC') > -1) return {color: '#70cbed' };
  65. if (point.argument.indexOf("CH") > -1) return { color: '#F6BC21' };
  66. if (point.argument.indexOf("HC") > -1) return { color: '#edc0cb' };
  67. },
  68. rotated: true,
  69. legend: { visible: false },
  70. tooltip: {
  71. enabled: true,
  72. customizeTooltip: function (point) {
  73. return { text: '가동시간: ' + point.rangeValue1 + '시 ~ ' + point.rangeValue2 + '시' }
  74. }
  75. }
  76. });
  77. }
  78. dateBoxValue.subscribeChanged(function (latestValue, previousValue) {
  79. if (latestValue.getFullYear() === previousValue.getFullYear()) {
  80. if (latestValue.getMonth() === previousValue.getMonth()) {
  81. if (latestValue.getDate() !== previousValue.getDate()) {
  82. var dataSource = createDataSource();
  83. dataSource.load().done(function (result) {
  84. load(result);
  85. });
  86. }
  87. return;
  88. }
  89. }
  90. handleViewShown();
  91. });
  92. var handleViewShown = function () {
  93. var list = $("#listDays").dxList({
  94. dataSource: new DevExpress.data.DataSource({
  95. store: Partials.odata.DeviceRunHistoryGroup,
  96. paginate: false,
  97. select: ["Year", "Month", "Day"],
  98. map: function (item) {
  99. item.RunDate = new Date(item.Year, item.Month - 1, item.Day);
  100. return item;
  101. },
  102. filter: [
  103. ["SiteId", "=", 1],
  104. ["BuildingId", "=", 1],
  105. ["ServiceTypeId", "=", 1],
  106. ["Year", "=", dateBoxValue().getFullYear()],
  107. ["Month", "=", dateBoxValue().getMonth() + 1],
  108. ],
  109. sort: [{getter: 'Day', desc: true}]
  110. }),
  111. selectionMode: 'single',
  112. itemTemplate: function (data) {
  113. return $("<div>").text(Globalize.format(data.RunDate, 'dd일 (ddd)'));
  114. },
  115. onSelectionChanged: function (args) {
  116. if (args.addedItems.length > 0) dateBoxValue(args.addedItems[0].RunDate);
  117. },
  118. onContentReady: function (e) {
  119. var dataSource = createDataSource();
  120. dataSource.load().done(function (result) {
  121. $("#listDays").dxList("instance").selectItem(0);
  122. load(result);
  123. });
  124. }
  125. }).dxList("instance");
  126. };
  127. var groupBy = function (data) {
  128. var other = [];
  129. $.each(data, function (i, value) {
  130. var key = data[i].DeviceId;
  131. var item = data[i];
  132. var duration = Globalize.format(item.aVal1, 'd2') + '시 ~ ' + (Globalize.format(item.aVal2, 'd2')) + '시';
  133. if (other[key]) {
  134. other[key].Run.push(duration);
  135. } else {
  136. other[key] = {
  137. DeviceTypeName: item.BemsDevice.BemsDeviceType.Name,
  138. DeviceName: item.BemsDevice.Name,
  139. Run: [duration]
  140. };
  141. }
  142. })
  143. return other;
  144. };
  145. var dataViewPopup = {
  146. width: 700,
  147. height: 'auto',
  148. showTitle: true,
  149. title: ko.computed({
  150. read: function () {
  151. return Globalize.format(dateBoxValue(), 'yyyy년 MM월 dd일 (dddd)');
  152. }
  153. }),
  154. visible: ko.observable(false),
  155. dragEnabled: false,
  156. closeOnOutsideClick: false,
  157. show: function () {
  158. dataViewPopup.visible(true);
  159. },
  160. shownAction: function () {
  161. var dataGrid = $("#dataGrid").dxDataGrid("instance");
  162. dataGrid.option({
  163. dataSource: groupBy(chartDataSource()),
  164. "export": {
  165. enabled: true,
  166. fileName: "HistoryCooler"
  167. },
  168. columns: [
  169. { dataField: 'DeviceTypeName', caption: '타입', },
  170. { dataField: 'DeviceName', caption: '냉동기명', },
  171. { dataField: 'Run.0', caption: '운전 #1', alignment: 'center' },
  172. { dataField: 'Run.1', caption: '운전 #2', alignment: 'center' },
  173. { dataField: 'Run.2', caption: '운전 #3', alignment: 'center' }
  174. ]
  175. });
  176. }
  177. };
  178. var viewModel = {
  179. dateBoxValue: dateBoxValue,
  180. dataSource: chartDataSource,
  181. dataViewPopup: dataViewPopup,
  182. viewShown: handleViewShown,
  183. onPrevious: function (e) {
  184. var date = new Date(dateBoxValue());
  185. date.prevMonth();
  186. dateBoxValue(date);
  187. },
  188. onNext: function (e) {
  189. var date = new Date(dateBoxValue());
  190. date.nextMonth();
  191. dateBoxValue(date);
  192. }
  193. };
  194. return viewModel;
  195. };