08f564a55739e0f93a6e2f61c5090a378a6e197d.svn-base 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. Partials.Product = function (params) {
  2. var tabs = [{ text: "월" }, { text: "년" }];
  3. var selectedTab = ko.observable(0);
  4. var dateBoxValue = ko.observable(new Date());
  5. var initialized = false;
  6. var dataSource;
  7. var chartDataSource = ko.observable();
  8. function createDaily() {
  9. return new DevExpress.data.DataSource({
  10. store: Partials.odata.ConsumeDaily,
  11. paginate: false,
  12. select: ['Year', 'Month', 'Day', 'Cooler', 'Boiler', 'Goal', 'Product'],
  13. map: function (item) {
  14. item.Consume = item.Cooler + item.Boiler;
  15. item.Alarm1 = item.Goal * 0.9;
  16. item.Alarm2 = item.Goal * 1;
  17. item.RateOfReduce = (1 - (item.Product / item.Goal)) * 100;
  18. return item;
  19. },
  20. filter: [
  21. ["SiteId", "=", 1],
  22. ["BuildingId", "=", 1],
  23. ["Year", "=", dateBoxValue().getFullYear()],
  24. ["Month", "=", dateBoxValue().getMonth() + 1],
  25. ],
  26. sort: 'Day'
  27. });
  28. }
  29. function createMonthly() {
  30. return new DevExpress.data.DataSource({
  31. store: Partials.odata.ConsumeMonthly,
  32. paginate: false,
  33. select: ['Year', 'Month', 'Cooler', 'Boiler', 'Goal', 'Product'],
  34. map: function (item) {
  35. item.Consume = item.Cooler + item.Boiler;
  36. item.Alarm1 = item.Goal * 0.9;
  37. item.Alarm2 = item.Goal * 1;
  38. item.RateOfReduce = (1 - (item.Product / item.Goal)) * 100;
  39. return item;
  40. },
  41. filter: [
  42. ["SiteId", "=", 1],
  43. ["BuildingId", "=", 1],
  44. ["Year", "=", dateBoxValue().getFullYear()]
  45. ],
  46. sort: 'Month'
  47. });
  48. }
  49. function load(result) {
  50. chartDataSource(result);
  51. viewModel.summary.prediction(result.reduce(function (p, c) { return p + c.Consume }, 0));
  52. viewModel.summary.goal(result.reduce(function (p, c) { return p + c.Goal }, 0));
  53. viewModel.summary.product(result.reduce(function (p, c) { return p + c.Product }, 0));
  54. viewModel.summary.rateOfReduce((1 - (viewModel.summary.product() / viewModel.summary.goal())) * 100);
  55. $("#graphContainer").dxChart("instance").option({
  56. dataSource: chartDataSource,
  57. commonSeriesSettings: {
  58. argumentField: ["Day", "Month"][selectedTab()],
  59. type: "stackedBar",
  60. hoverMode: "allArgumentPoints",
  61. selectionMode: "allArgumentPoints",
  62. },
  63. argumentAxis: {
  64. label: {
  65. customizeText: function () {
  66. return this.value + ['일', '월'][selectedTab()];
  67. }
  68. },
  69. type: 'discreate',
  70. axisDivisionFactor: [31, 100][selectedTab()]
  71. },
  72. valueAxis: {
  73. label: {
  74. format: 'fixedPoint thousands',
  75. customizeText: function () {
  76. return this.valueText + ' toe';
  77. }
  78. }
  79. },
  80. series: [
  81. { name: "실적", color: "#b3d199", valueField: "Product", },
  82. { name: "알람", type: "rangeBar", color: "#eabe25", rangeValue1Field: "Alarm1", rangeValue2Field: "Alarm2" },
  83. { name: "예측", type: "line", color: "#427ce6", valueField: "Consume", },
  84. { name: "목표", type: "line", color: "#40923a", valueField: "Goal", },
  85. ],
  86. legend: {
  87. verticalAlignment: "top",
  88. horizontalAlignment: "right",
  89. position: "inside",
  90. border: { visible: true },
  91. orientation: "vertical"
  92. },
  93. onPointClick: function (e) {
  94. e.target.select();
  95. },
  96. tooltip: {
  97. enabled: true,
  98. location: "edge",
  99. format: 'fixedPoint',
  100. customizeText: function () {
  101. return this.seriesName + " : " + this.valueText;
  102. }
  103. }
  104. });
  105. }
  106. dateBoxValue.subscribe(function (e) {
  107. switch (selectedTab()) {
  108. case 0:
  109. dataSource = createDaily();
  110. break;
  111. case 1:
  112. dataSource = createMonthly();
  113. break;
  114. }
  115. handleViewShown();
  116. });
  117. selectedTab.subscribe(function (e) {
  118. switch (selectedTab()) {
  119. case 0:
  120. dataSource = createDaily();
  121. $("#dateBox").dxDateBox({ formatString: "yyyy년 MM월", maxZoomLevel: 'year' });
  122. break;
  123. case 1:
  124. dataSource = createMonthly();
  125. $("#dateBox").dxDateBox({ formatString: "yyyy년", maxZoomLevel: 'decade' });
  126. break;
  127. }
  128. handleViewShown();
  129. });
  130. var handleViewShown = function () {
  131. if (initialized == false) {
  132. switch (selectedTab()) {
  133. case 0:
  134. dataSource = createDaily();
  135. break;
  136. case 1:
  137. dataSource = createMonthly();
  138. break;
  139. }
  140. initialized = true;
  141. }
  142. dataSource.load().done(function (result) {
  143. load(result);
  144. });
  145. };
  146. var dataViewPopup = {
  147. width: 800,
  148. height: 'auto',
  149. showTitle: true,
  150. title: ko.computed({
  151. read: function () {
  152. switch (selectedTab()) {
  153. case 0: return moment(dateBoxValue()).format("YYYY년 MM월");
  154. case 1: return moment(dateBoxValue()).format("YYYY년");
  155. }
  156. }
  157. }),
  158. visible: ko.observable(false),
  159. dragEnabled: false,
  160. closeOnOutsideClick: false,
  161. show: function () {
  162. dataViewPopup.visible(true);
  163. },
  164. shownAction: function () {
  165. var dataGrid = $("#dataGrid").dxDataGrid("instance");
  166. switch (selectedTab()) {
  167. case 0:
  168. dataGrid.option({
  169. "export": {
  170. enabled: true,
  171. fileName: "GoalDaily"
  172. },
  173. columns: [
  174. { dataField: 'Day', caption: '일', width: '10%', },
  175. { dataField: 'Consume', caption: '예측', format: 'fixedPoint' },
  176. { dataField: 'Goal', caption: '목표', format: 'fixedPoint' },
  177. { dataField: 'Product', caption: '실적', format: 'fixedPoint' },
  178. {
  179. dataField: 'RateOfReduce', caption: '절감율 (%)', format: 'fixedPoint', precision: 2, cellTemplate: function (e, v) {
  180. if (v.value > 0) $("<div style='color: green' />").text('+' + v.text).appendTo(e);
  181. else if (v.value < 0) $("<div style='color: red' />").text(v.text).appendTo(e);
  182. else $("<div />").text(v.text).appendTo(e);
  183. }
  184. },
  185. { dataField: 'Alarm1', caption: '1차알람', format: 'fixedPoint' },
  186. { dataField: 'Alarm2', caption: '2차알람', format: 'fixedPoint' },
  187. ]
  188. });
  189. break;
  190. case 1:
  191. dataGrid.option({
  192. "export": {
  193. enabled: true,
  194. fileName: "GoalMonthly"
  195. },
  196. columns: [
  197. { dataField: 'Month', caption: '월', width: '10%', },
  198. { dataField: 'Consume', caption: '예측', format: 'fixedPoint' },
  199. { dataField: 'Goal', caption: '목표', format: 'fixedPoint' },
  200. { dataField: 'Product', caption: '실적', format: 'fixedPoint' },
  201. {
  202. dataField: 'RateOfReduce', caption: '절감율 (%)', format: 'fixedPoint', precision: 2, cellTemplate: function (e, v) {
  203. if (v.value > 0) $("<div style='color: green' />").text('+' + v.text).appendTo(e);
  204. else if (v.value < 0) $("<div style='color: red' />").text(v.text).appendTo(e);
  205. else $("<div />").text(v.text).appendTo(e);
  206. }
  207. },
  208. { dataField: 'Alarm1', caption: '1차알람', format: 'fixedPoint' },
  209. { dataField: 'Alarm2', caption: '2차알람', format: 'fixedPoint' }]
  210. });
  211. break;
  212. }
  213. }
  214. };
  215. var viewModel = {
  216. dateBoxValue: dateBoxValue,
  217. dataSource: chartDataSource,
  218. tabs: tabs,
  219. selectedTab: selectedTab,
  220. summary: {
  221. prediction: ko.observable(),
  222. goal: ko.observable(),
  223. product: ko.observable(),
  224. rateOfReduce: ko.observable()
  225. },
  226. dataViewPopup: dataViewPopup,
  227. viewShown: handleViewShown,
  228. dataViewOption: dataViewPopup,
  229. onPrevious: function (e) {
  230. var date = new Date(dateBoxValue());
  231. (selectedTab() == 0) ? date.setMonth(date.getMonth() - 1) : date.setFullYear(date.getFullYear() - 1)
  232. dateBoxValue(date);
  233. },
  234. onNext: function (e) {
  235. var date = new Date(dateBoxValue());
  236. (selectedTab() == 0) ? date.setMonth(date.getMonth() + 1) : date.setFullYear(date.getFullYear() + 1)
  237. dateBoxValue(date);
  238. }
  239. };
  240. return viewModel;
  241. };