reduce.dxview 2.5 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <div data-options="dxView: { name: 'Reduce', title: 'Reduce' }">
  2. <div data-options="dxContent: { targetPlaceholder: 'content' }">
  3. <div style="position: absolute; top: 0px; left: 0px">
  4. <div class="clear" data-bind="dxButton: { icon: 'chevronleft', clickAction:onPrevious }" style="float:left;"></div>
  5. <div id="dateBox" class="clear" data-bind="dxDateBox: { value: dateBoxValue, fieldEditEnabled: false, format: 'date', formatString: 'yyyy년', maxZoomLevel: 'decade' }" style="float: left;"></div>
  6. <div class="clear" data-bind="dxButton: { icon: 'chevronright', clickAction:onNext }" style="float: left;"></div>
  7. </div>
  8. <!--
  9. <div class="segmented" data-bind="dxTabs: { dataSource: tabs, selectedIndex: selectedTab }" style="width: 20%; "></div>
  10. <div style="position:absolute; top:0px;right:0px">
  11. <div data-bind="dxSelectBox: { dataSource:['전체', '냉방', '난방'], value:'전체', width:100 }"></div>
  12. </div>
  13. -->
  14. <div class="clear">
  15. <div id="gridContainer" data-bind="dxDataGrid: {dataSource:dataSource, paging: { enabled: false }, showColumnLines:false, showRowLines:true, hoverStateEnabled:true, sorting: { mode: 'none' },}" style="height: 500px; width: 100%;;margin-top:40px"></div>
  16. </div>
  17. <p style="margin:2px">&nbsp;</p>
  18. <div data-bind="dxBox: { direction: 'row', width: '36%', height: 120 }" style="float:right">
  19. <div data-options="dxItem: {ratio: 1}">
  20. <div>
  21. <div class="dx-field-label" style="width:60%;text-align:right;"><div id="gaugeContainer" style="height:140px; margin:0;padding:0"></div> </div>
  22. <div class="dx-field-label" style="float:right;width:40%">
  23. <p style="font-size:14px; text-align: right;">평가년도대비</p>
  24. <p style="font-size: 14px; text-align: right;">소비 절감량</p>
  25. <p style="font-size: 20px; text-align: right; font-weight: bold;" data-bind="{text: Globalize.format($root.summary.reduce().amount, 'n0') + ' kWh' }"></p>
  26. <div style="font-size: 26px; text-align: right; margin-top: 10px; font-weight: bold;">
  27. <p data-bind="{ text: Globalize.format(Math.abs($root.summary.reduce().rate), 'n2') + '%' }"></p>
  28. <p data-bind="{ text: $root.rateText }"></p>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </div>