e96848bd255ba98b9b12f5e0da62c74526b25630.svn-base 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. $(function() {
  2. "use strict";
  3. var _minRatio = 0,
  4. _maxRatio = 150;
  5. $.widget('custom.cwGauge', {
  6. ratioDiv: null,
  7. valueDiv: null,
  8. unitDiv: null,
  9. options: {
  10. width: '100%',
  11. height: 'auto',
  12. //maxValue: 5000,
  13. maxValue: 0,
  14. colorType: 1,
  15. title: '',
  16. value: 0,
  17. unit: ''
  18. },
  19. _init: function() {
  20. },
  21. _getUnitAccountClass: function() {
  22. switch (this.options.colorType) {
  23. case 1: return 'unit_account'
  24. case 2: return 'unit_account2'
  25. default: return 'unit_account3'
  26. }
  27. },
  28. _create: function() {
  29. this.element.addClass('graph_box_wrap');
  30. var title = $('<div>', {
  31. 'class': 'horizontal_graph_title'
  32. }).text(this.options.title);
  33. var ul = $('<ul>');
  34. this.valueDiv = $('<li>')
  35. .css('margin-top', '10px')
  36. .css('width', '220px')
  37. .css('margin-right', '30px')
  38. //.css('width', '140px')
  39. //.css('margin-right', '3px')
  40. .addClass(this._getUnitAccountClass())
  41. .text(this.options.value)
  42. .appendTo(ul);
  43. //this.unitDiv = $('<li>')
  44. this.unitDiv = $('<div>')
  45. //.css('margin-right', '6px')
  46. //.addClass('unit')
  47. .text(this.options.unit)
  48. .css('margin-top', '-10px')
  49. .css('margin-left', '220px')
  50. .appendTo(ul);
  51. var gaugeDiv = $('<div>', {
  52. 'class': 'horizontal_graph_wrap'
  53. //}).css('position', 'absolute')
  54. }).css('position', 'relative')
  55. .css('bottom', '70px')
  56. //.css('margin-right', '10px');
  57. .css('margin-left', '10px');
  58. this.ratioDiv = $('<div>', {
  59. 'class': 'horizontal_graph_gage'
  60. }).css('left', _minRatio + '%')
  61. .appendTo(gaugeDiv);
  62. this.element
  63. .css('height', this.options.height)
  64. .css('position', 'relative')
  65. .css('display', 'inline-block')
  66. .append(title)
  67. .append(ul)
  68. .append(gaugeDiv);
  69. },
  70. _setValue: function(value) {
  71. var totalRatio = _maxRatio - _minRatio;
  72. //var totalValue = this.options.maxValue - this.options.minValue;
  73. //var v = (value / this.options.maxValue);
  74. //var ratio = v * totalRatio - _minRatio;
  75. var ratio = (value / this.options.maxValue) * 100;
  76. if (ratio < _minRatio) {
  77. ratio = _minRatio;
  78. }
  79. else if (_maxRatio < ratio) {
  80. ratio = _maxRatio;
  81. }
  82. // this.options.value = value;
  83. if (typeof (value) === 'function') {
  84. value = value();
  85. }
  86. //value = String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  87. //this.valueDiv.text(value + ' ' + this.options.unit);
  88. //this.valueDiv.text((value)); // hcLee 2016 03 09 $NumberFormat 추가
  89. this.valueDiv.text($NumberFormat(value));
  90. if (ratio > 150) ratio = 150;
  91. ratio = ratio * 1.33; // 150% 지만 이미지 pixcel크기는 200 이므로 비율을 맞춘다 /hcLee 2016 12 09
  92. ratio -= 10; // 눈금이미지 폭의 반만큼왼쪽으로 이동
  93. this.ratioDiv.css('left', ratio + 'px'); // '%'에서 픽셀로 수정 hcLee 2016 12 09
  94. },
  95. _refresh: function() {
  96. },
  97. _destroy: function() {
  98. },
  99. _setOption: function(key, value) {
  100. switch (key) {
  101. case 'value':
  102. this._setValue(value);
  103. break;
  104. case 'unit':
  105. this.unitDiv.text(value);
  106. //this.unitDiv.text('XX');
  107. //this.unitDiv.css('position', 'absolute')
  108. //this.unitDiv.css('margin-right', '10px');
  109. break;
  110. }
  111. this._super(key, value);
  112. this._refresh();
  113. },
  114. _setOptions: function() {
  115. this._superApply(arguments);
  116. this._refresh();
  117. },
  118. });
  119. function RateGauge(options) {
  120. this.id = '#' + options.id;
  121. $(this.id).cwGauge(options);
  122. };
  123. RateGauge.prototype.setValue2 = function (value,unit) {
  124. $(this.id).cwGauge2(value, unit);
  125. };
  126. RateGauge.prototype.setValue = function(value) {
  127. $(this.id).cwGauge('option', 'value', value);
  128. };
  129. RateGauge.prototype.setMaxValue = function(value) {
  130. $(this.id).cwGauge('option', 'maxValue', value);
  131. };
  132. RateGauge.prototype.setUnit = function(value) {
  133. $(this.id).cwGauge('option', 'unit', value);
  134. };
  135. BWA.Chart = BWA.Chart || {};
  136. BWA.Chart.RateGauge = {};
  137. BWA.Chart.RateGauge.newInstance = function(options) {
  138. return new RateGauge(options);
  139. };
  140. });