1a94420c028f6ba63cfa2069d14366663424dd17.svn-base 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. Partials.Goal = 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'],
  13. map: function (item) {
  14. item.Consume = item.Cooler + item.Boiler;
  15. return item;
  16. },
  17. filter: [
  18. ["SiteId", "=", 1],
  19. ["BuildingId", "=", 1],
  20. ["Year", "=", dateBoxValue().getFullYear()],
  21. ["Month", "=", dateBoxValue().getMonth() + 1],
  22. ]
  23. });
  24. }
  25. function createMonthly() {
  26. return new DevExpress.data.DataSource({
  27. store: Partials.odata.ConsumeMonthly,
  28. paginate: false,
  29. select: ['Year', 'Month', 'Cooler', 'Boiler', 'Goal'],
  30. map: function (item) {
  31. item.Consume = item.Cooler + item.Boiler;
  32. return item;
  33. },
  34. filter: [
  35. ["SiteId", "=", 1],
  36. ["BuildingId", "=", 1],
  37. ["Year", "=", dateBoxValue().getFullYear()]
  38. ]
  39. });
  40. }
  41. function load(result) {
  42. chartDataSource(result);
  43. viewModel.summary.load(result);
  44. $("#graphContainer").dxChart("instance").option({
  45. commonSeriesSettings: {
  46. argumentField: ["Day", "Month"][selectedTab()],
  47. type: "bar",
  48. hoverMode: "allArgumentPoints",
  49. selectionMode: "allArgumentPoints",
  50. },
  51. argumentAxis: {
  52. label: {
  53. customizeText: function () {
  54. return this.value + ['일', '월'][selectedTab()];
  55. }
  56. },
  57. type: 'discreate',
  58. axisDivisionFactor: [31, 100][selectedTab()]
  59. },
  60. valueAxis: {
  61. label: {
  62. format: 'fixedPoint thousands',
  63. customizeText: function () {
  64. return this.valueText + ' toe';
  65. }
  66. }
  67. },
  68. series: [
  69. { name: "예측", color: "#F6BC21", valueField: "Consume", },
  70. { name: "목표", color: "#5EAC40", valueField: "Goal" }
  71. ],
  72. legend: {
  73. verticalAlignment: "top",
  74. horizontalAlignment: "right",
  75. position: "inside",
  76. border: { visible: true }
  77. },
  78. onPointClick: function (e) {
  79. e.target.select();
  80. },
  81. tooltip: {
  82. enabled: true,
  83. location: "edge",
  84. format: 'fixedPoint',
  85. customizeText: function () {
  86. return this.seriesName + " : " + this.valueText;
  87. }
  88. }
  89. });
  90. }
  91. dateBoxValue.subscribe(function (e) {
  92. switch (selectedTab()) {
  93. case 0:
  94. dataSource = createDaily();
  95. break;
  96. case 1:
  97. dataSource = createMonthly();
  98. break;
  99. }
  100. handleViewShown();
  101. });
  102. selectedTab.subscribe(function (e) {
  103. switch (selectedTab()) {
  104. case 0:
  105. dataSource = createDaily();
  106. $("#dateBox").dxDateBox("instance").option({ formatString: "yyyy년 MM월", maxZoomLevel: 'year' });
  107. editGoalPopup.editable(true);
  108. break;
  109. case 1:
  110. dataSource = createMonthly();
  111. $("#dateBox").dxDateBox("instance").option({ formatString: "yyyy년", maxZoomLevel: 'decade' });
  112. editGoalPopup.editable(false);
  113. break;
  114. }
  115. handleViewShown();
  116. });
  117. var handleViewShown = function () {
  118. if (initialized == false) {
  119. switch (selectedTab()) {
  120. case 0:
  121. dataSource = createDaily();
  122. break;
  123. case 1:
  124. dataSource = createMonthly();
  125. break;
  126. }
  127. initialized = true;
  128. }
  129. dataSource.load().done(function (result) {
  130. load(result);
  131. });
  132. };
  133. var dataViewPopup = {
  134. width: 800,
  135. height: 'auto',
  136. showTitle: true,
  137. title: ko.computed({
  138. read: function () {
  139. switch (selectedTab()) {
  140. case 0: return moment(dateBoxValue()).format("YYYY년 MM월");
  141. case 1: return moment(dateBoxValue()).format("YYYY년");
  142. }
  143. }
  144. }),
  145. visible: ko.observable(false),
  146. dragEnabled: false,
  147. closeOnOutsideClick: false,
  148. show: function () {
  149. dataViewPopup.visible(true);
  150. },
  151. shownAction: function () {
  152. var dataGrid = $("#dataGrid").dxDataGrid("instance");
  153. switch (selectedTab()) {
  154. case 0:
  155. dataGrid.option({
  156. "export": {
  157. enabled: true,
  158. fileName: "GoalDaily"
  159. },
  160. columns: [
  161. { dataField: 'Day', caption: '일', width: '10%', },
  162. { dataField: 'Consume', caption: '예측 소비량', format: 'fixedPoint' },
  163. { dataField: 'Goal', caption: '목표 소비량', format: 'fixedPoint' },
  164. { caption: '1차알람', format: 'fixedPoint', calculateCellValue: function (data) { return data.Goal * 0.9; } },
  165. { caption: '2차알람', format: 'fixedPoint', calculateCellValue: function (data) { return data.Goal * 1; } }]
  166. });
  167. break;
  168. case 1:
  169. dataGrid.option({
  170. "export": {
  171. enabled: true,
  172. fileName: "GoalMonthly"
  173. },
  174. columns: [
  175. { dataField: 'Month', caption: '월', width: '10%', },
  176. { dataField: 'Consume', caption: '예측 소비량', format: 'fixedPoint' },
  177. { dataField: 'Goal', caption: '목표 소비량', format: 'fixedPoint' },
  178. { caption: '1차알람', format: 'fixedPoint', calculateCellValue: function (data) { return data.Goal * 0.9; } },
  179. { caption: '2차알람', format: 'fixedPoint', calculateCellValue: function (data) { return data.Goal * 1; } }]
  180. });
  181. break;
  182. }
  183. }
  184. };
  185. var applyPopup = {
  186. width: 360,
  187. height: 220,
  188. showTitle: true,
  189. rateOf: ko.observable(80),
  190. dragEnabled: false,
  191. visible: ko.observable(false),
  192. showCloseButton: false,
  193. show: function () {
  194. applyPopup.visible(true);
  195. },
  196. title: '일괄적용',
  197. buttons: [
  198. {
  199. toolbar: 'bottom', location: 'center', widget: 'button', options: {
  200. text: '확인', clickAction: function () {
  201. var newArray = chartDataSource().map(function (obj) {
  202. obj.Goal = parseInt(obj.Consume * (applyPopup.rateOf() / 100));
  203. var date = moment(new Date(obj.Year, obj.Month - 1, obj.Day)).format('YYYY-MM-DD');
  204. Partials.db.BemsEnergyGoalDaily.update({ SiteId: 1, BuildingId: 1, CreatedDate: date }, { Goal: obj.Goal } );
  205. return obj;
  206. });
  207. chartDataSource(newArray);
  208. applyPopup.visible(false);
  209. }
  210. }
  211. },
  212. { toolbar: 'bottom', location: 'center', widget: 'button', options: { text: '취소', clickAction: function () { applyPopup.visible(false); } } },
  213. ]
  214. };
  215. var editGoalPopup = {
  216. width: 600,
  217. height: 'auto',
  218. showTitle: true,
  219. editable: ko.observable(true),
  220. buttons: [
  221. {
  222. toolbar: 'top', location: 'after', widget: 'button', options: {
  223. text: '일괄적용', clickAction: function () {
  224. applyPopup.show();
  225. }
  226. }
  227. }
  228. ],
  229. title: ko.computed({
  230. read: function () {
  231. switch (selectedTab()) {
  232. case 0: return moment(dateBoxValue()).format("YYYY년 MM월") + ' - 목표량 설정';
  233. case 1: return moment(dateBoxValue()).format("YYYY년") + ' - 목표량 설정';
  234. }
  235. }
  236. }),
  237. visible: ko.observable(false),
  238. dragEnabled: false,
  239. closeOnOutsideClick: false,
  240. show: function () {
  241. if (selectedTab() == 0) {
  242. editGoalPopup.visible(true);
  243. }
  244. },
  245. shownAction: function () {
  246. var dataGrid = $("#editGoalGrid").dxDataGrid("instance");
  247. switch (selectedTab()) {
  248. case 0:
  249. dataGrid.option({
  250. "export": {
  251. enabled: true,
  252. fileName: "SettingGoalDaily"
  253. },
  254. rowUpdating: function (rowInfo) {
  255. rowInfo.newData.Goal = parseInt(rowInfo.newData.Goal);
  256. var date = moment(new Date(rowInfo.key.Year, rowInfo.key.Month - 1, rowInfo.key.Day)).format('YYYY-MM-DD');
  257. Partials.db.BemsEnergyGoalDaily.update({ SiteId: 1, BuildingId: 1, CreatedDate: date }, rowInfo.newData);
  258. },
  259. columns: [
  260. { dataField: 'Day', caption: '일', width: '10%', allowEditing: false},
  261. { dataField: 'Consume', caption: '예측 소비량', format: 'fixedPoint', allowEditing: false },
  262. { dataField: 'Goal', caption: '목표 소비량', format: 'fixedPoint' }]
  263. });
  264. break;
  265. }
  266. }
  267. };
  268. var viewModel = {
  269. dateBoxValue: dateBoxValue,
  270. dataSource: chartDataSource,
  271. tabs: tabs,
  272. selectedTab: selectedTab,
  273. dataViewPopup: dataViewPopup,
  274. editGoalPopup: editGoalPopup,
  275. viewShown: handleViewShown,
  276. dataViewOption: dataViewPopup,
  277. applyPopup: applyPopup,
  278. editGoalOption: {},
  279. summary: {
  280. load: function (data) {
  281. switch (selectedTab()) {
  282. case 0:
  283. viewModel.summary.pred.max(data.reduce(function (p, c) { return p.value > c.Consume ? p : { title: c.Day + '일', value: c.Consume } }));
  284. viewModel.summary.pred.min(data.reduce(function (p, c) { return p.value <= c.Consume ? p : { title: c.Day + '일', value: c.Consume } }));
  285. viewModel.summary.goal.max(data.reduce(function (p, c) { return p.value > c.Goal ? p : { title: c.Day + '일', value: c.Goal } }));
  286. viewModel.summary.goal.min(data.reduce(function (p, c) { return p.value <= c.Goal ? p : { title: c.Day + '일', value: c.Goal } }));
  287. break;
  288. case 1:
  289. viewModel.summary.pred.max(data.reduce(function (p, c) { return p.value > c.Consume ? p : { title: c.Month + '월', value: c.Consume } }));
  290. viewModel.summary.pred.min(data.reduce(function (p, c) { return p.value <= c.Consume ? p : { title: c.Month + '월', value: c.Consume } }));
  291. viewModel.summary.goal.max(data.reduce(function (p, c) { return p.value > c.Goal ? p : { title: c.Month + '월', value: c.Goal } }));
  292. viewModel.summary.goal.min(data.reduce(function (p, c) { return p.value <= c.Goal ? p : { title: c.Month + '월', value: c.Goal } }));
  293. break;
  294. }
  295. },
  296. pred: {
  297. min: ko.observable({title:'', value: Infinity} ),
  298. max: ko.observable({title:'', value: -Infinity} ),
  299. },
  300. goal: {
  301. min: ko.observable({ title: '', value: Infinity }),
  302. max: ko.observable({ title: '', value: -Infinity }),
  303. }
  304. },
  305. onPrevious: function (e) {
  306. var date = new Date(dateBoxValue());
  307. (selectedTab() == 0) ? date.setMonth(date.getMonth() - 1) : date.setFullYear(date.getFullYear() - 1)
  308. dateBoxValue(date);
  309. },
  310. onNext: function (e) {
  311. var date = new Date(dateBoxValue());
  312. (selectedTab() == 0) ? date.setMonth(date.getMonth() + 1) : date.setFullYear(date.getFullYear() + 1)
  313. dateBoxValue(date);
  314. }
  315. };
  316. return viewModel;
  317. };