a803c263645271af4490e80262d610a3bcd6c7d7.svn-base 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. Partials.Consume = function (params) {
  2. var tabs = [ { text: "월" }, { text: "년" } ];
  3. var selectedTab = ko.observable(0);
  4. var dataViewPopup = ko.observable(false);
  5. var dateBoxValue = ko.observable(new Date());
  6. var initialized = false;
  7. var dataSource;
  8. var chartDataSource = ko.observable();
  9. function createDaily() {
  10. return new DevExpress.data.DataSource({
  11. store: Partials.odata.ConsumeDaily,
  12. select: ['Year', 'Month', 'Day', 'Cooler', 'Boiler'],
  13. paginate: false,
  14. map: function (item) {
  15. item.Total = item.Cooler + item.Boiler;
  16. return item;
  17. },
  18. filter: [
  19. ["SiteId", "=", 1],
  20. ["BuildingId", "=", 1],
  21. ["Year", "=", dateBoxValue().getFullYear()],
  22. ["Month", "=", dateBoxValue().getMonth() + 1],
  23. ]
  24. });
  25. }
  26. function createMonthly() {
  27. return new DevExpress.data.DataSource({
  28. store: Partials.odata.ConsumeMonthly,
  29. select: ['Year', 'Month', 'Cooler', 'Boiler'],
  30. paginate: false,
  31. map: function (item) {
  32. item.Total = item.Cooler + item.Boiler;
  33. return item;
  34. },
  35. filter: [
  36. ["SiteId", "=", 1],
  37. ["BuildingId", "=", 1],
  38. ["Year", "=", dateBoxValue().getFullYear()]
  39. ]
  40. });
  41. }
  42. function load(result) {
  43. chartDataSource (result);
  44. viewModel.summary.load(result);
  45. $("#graphContainer").dxChart("instance").option({
  46. dataSource: chartDataSource,
  47. commonSeriesSettings: {
  48. argumentField: ["Day", "Month"][selectedTab()],
  49. type: "bar",
  50. hoverMode: "allArgumentPoints",
  51. selectionMode: "allArgumentPoints",
  52. },
  53. argumentAxis: {
  54. label: {
  55. customizeText: function() {
  56. return this.value + ['일', '월'][selectedTab()];
  57. }
  58. },
  59. type: 'discreate',
  60. axisDivisionFactor: [31, 100][selectedTab()]
  61. },
  62. valueAxis: {
  63. label: {
  64. format: 'fixedPoint thousands',
  65. customizeText: function () {
  66. return this.valueText + ' toe';
  67. }
  68. }
  69. },
  70. series: [
  71. { name: "냉방", color: "#70cbed", valueField: "Cooler", },
  72. { name: "난방", color: "#ff7c7c", valueField: "Boiler" },
  73. { name: "전체", type: "line", color: "#9da5ad", valueField: "Total" },
  74. ],
  75. legend: {
  76. verticalAlignment: "top",
  77. horizontalAlignment: "right",
  78. position: "inside",
  79. border: { visible: true }
  80. },
  81. onPointClick: function (e) {
  82. e.target.select();
  83. },
  84. tooltip: {
  85. enabled: true,
  86. location: "edge",
  87. format: 'fixedPoint',
  88. customizeText: function () {
  89. return this.seriesName + " : " + this.valueText;
  90. }
  91. }
  92. });
  93. }
  94. dateBoxValue.subscribe(function (e) {
  95. switch (selectedTab()) {
  96. case 0:
  97. dataSource = createDaily();
  98. break;
  99. case 1:
  100. dataSource = createMonthly();
  101. break;
  102. }
  103. handleViewShown();
  104. });
  105. selectedTab.subscribe(function (e) {
  106. switch (selectedTab()) {
  107. case 0:
  108. dataSource = createDaily();
  109. $("#dateBox").dxDateBox({ formatString: "yyyy년 MM월", maxZoomLevel: 'year' });
  110. viewModel.summary.previous.name('전월 소비량');
  111. break;
  112. case 1:
  113. dataSource = createMonthly();
  114. $("#dateBox").dxDateBox({ formatString: "yyyy년", maxZoomLevel: 'decade' });
  115. viewModel.summary.previous.name('전년 소비량');
  116. break;
  117. }
  118. handleViewShown();
  119. });
  120. var handleViewShown = function () {
  121. if (initialized == false) {
  122. switch (selectedTab()) {
  123. case 0:
  124. dataSource = createDaily();
  125. break;
  126. case 1:
  127. dataSource = createMonthly();
  128. break;
  129. }
  130. initialized = true;
  131. }
  132. dataSource.load().done( function (result)
  133. {
  134. load(result);
  135. });
  136. };
  137. var dataViewPopup = {
  138. width: 800,
  139. height: 'auto',
  140. showTitle: true,
  141. title: ko.computed({
  142. read: function () {
  143. switch (selectedTab()) {
  144. case 0: return moment(dateBoxValue()).format("YYYY년 MM월");
  145. case 1: return moment(dateBoxValue()).format("YYYY년");
  146. }
  147. }
  148. }),
  149. visible: ko.observable(false),
  150. dragEnabled: false,
  151. closeOnOutsideClick: false,
  152. show: function () {
  153. dataViewPopup.visible(true);
  154. },
  155. shownAction: function () {
  156. var dataGrid = $("#dataGrid").dxDataGrid("instance");
  157. switch (selectedTab()) {
  158. case 0:
  159. dataGrid.option({
  160. "export": {
  161. enabled: true,
  162. fileName: "ConsumeDaily"
  163. },
  164. columns: [
  165. { dataField: 'Day', caption: '일', width: '10%', },
  166. { dataField: 'Cooler', caption: '냉방', format: 'fixedPoint' },
  167. { dataField: 'Boiler', caption: '난방', format: 'fixedPoint' },
  168. { dataField: 'Total', caption: '전체', format: 'fixedPoint' }]
  169. });
  170. break;
  171. case 1:
  172. dataGrid.option({
  173. "export": {
  174. enabled: true,
  175. fileName: "ConsumeMonthly"
  176. },
  177. columns: [
  178. { dataField: 'Month', caption: '월', width: '10%', },
  179. { dataField: 'Cooler', caption: '냉방', format: 'fixedPoint' },
  180. { dataField: 'Boiler', caption: '난방', format: 'fixedPoint' },
  181. { dataField: 'Total', caption: '전체', format: 'fixedPoint' }]
  182. });
  183. break;
  184. }
  185. }
  186. };
  187. var viewModel = {
  188. dateBoxValue: dateBoxValue,
  189. dataSource: chartDataSource,
  190. tabs: tabs,
  191. selectedTab: selectedTab,
  192. dataViewPopup: dataViewPopup,
  193. viewShown: handleViewShown,
  194. summary: {
  195. load: function (result) {
  196. viewModel.summary.pred.max({ title: '', value: 0 });
  197. viewModel.summary.pred.min({ title: '', value: 0 });
  198. viewModel.summary.previous.max({ title: '', value: 0 });
  199. viewModel.summary.previous.min({ title: '', value: 0 });
  200. switch (selectedTab()) {
  201. case 0:
  202. this.pred.max(result.reduce(function (p, c) { return p.value > c.Total ? p : { title: c.Day + '일', value: c.Total } }));
  203. this.pred.min(result.reduce(function (p, c) { return p.value <= c.Total ? p : { title: c.Day + '일', value: c.Total } }));
  204. var date = new Date(dateBoxValue());
  205. date.setMonth(date.getMonth() - 1);
  206. previousDataSource = new DevExpress.data.DataSource({
  207. store: Partials.odata.ConsumeDaily,
  208. select: ['Year', 'Month', 'Day', 'Cooler', 'Boiler'],
  209. paginate: false,
  210. map: function (item) {
  211. item.Consume = item.Cooler + item.Boiler;
  212. return item;
  213. },
  214. filter: [
  215. ["SiteId", "=", 1],
  216. ["BuildingId", "=", 1],
  217. ["Year", "=", date.getFullYear()],
  218. ["Month", "=", date.getMonth() + 1],
  219. ]
  220. });
  221. previousDataSource.load().done(function (data) {
  222. viewModel.summary.previous.max(data.reduce(function (p, c) { return p.value > c.Consume ? p : { title: c.Day + '일', value: c.Consume } }));
  223. viewModel.summary.previous.min(data.reduce(function (p, c) { return p.value <= c.Consume ? p : { title: c.Day + '일', value: c.Consume } }));
  224. });
  225. break;
  226. case 1:
  227. this.pred.max(result.reduce(function (p, c) { return p.value > c.Total ? p : { title: c.Month + '월', value: c.Total } }));
  228. this.pred.min(result.reduce(function (p, c) { return p.value <= c.Total ? p : { title: c.Month + '월', value: c.Total } }));
  229. var date = new Date(dateBoxValue());
  230. date.setFullYear(date.getFullYear() - 1);
  231. previousDataSource = new DevExpress.data.DataSource({
  232. store: Partials.odata.ConsumeMonthly,
  233. select: ['Year', 'Month', 'Cooler', 'Boiler'],
  234. paginate: false,
  235. map: function (item) {
  236. item.Consume = item.Cooler + item.Boiler;
  237. return item;
  238. },
  239. filter: [
  240. ["SiteId", "=", 1],
  241. ["BuildingId", "=", 1],
  242. ["Year", "=", date.getFullYear()]
  243. ]
  244. });
  245. previousDataSource.load().done(function (data) {
  246. viewModel.summary.previous.max(data.reduce(function (p, c) { return p.value > c.Consume ? p : { title: c.Month + '월', value: c.Consume } }));
  247. viewModel.summary.previous.min(data.reduce(function (p, c) { return p.value <= c.Consume ? p : { title: c.Month + '월', value: c.Consume } }));
  248. });
  249. break;
  250. }
  251. },
  252. previous: {
  253. name: ko.observable('전월 소비량'),
  254. min: ko.observable({ title: '', value: 0 }),
  255. max: ko.observable({ title: '', value: 0 }),
  256. },
  257. pred: {
  258. min: ko.observable({ title: '', value: 0 }),
  259. max: ko.observable({ title: '', value: 0 }),
  260. }
  261. },
  262. onPrevious: function (e) {
  263. var date = new Date(dateBoxValue());
  264. (selectedTab() == 0) ? date.setMonth(date.getMonth() - 1) : date.setFullYear(date.getFullYear() - 1)
  265. dateBoxValue(date);
  266. },
  267. onNext: function (e) {
  268. var date = new Date(dateBoxValue());
  269. (selectedTab() == 0) ? date.setMonth(date.getMonth() + 1) : date.setFullYear(date.getFullYear() + 1)
  270. dateBoxValue(date);
  271. }
  272. };
  273. return viewModel;
  274. };