ba8e0fe4361406985e2d15d15c8a83e1dc124c02.svn-base 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <div data-options="dxView : { name: 'MainDashboard', title: '@viewMainDashboard', pane: 'master' } ">
  2. <div data-options="dxContent : { targetPlaceholder: 'content' } ">
  3. <div data-options="dxViewPlaceholder: { viewName: 'SideMenu' }"></div>
  4. <div class="fr chart_wrap_box2" style="width: 180px; margin-top: -20px;">
  5. <!--<div class="fl">@energy</div>-->
  6. <div class="fr dx-field-value" data-bind="dxSelectBox: {
  7. dataSource: fuelTypes,
  8. displayExpr: 'Name' ,
  9. valueExpr: 'FuelTypeId' ,
  10. value: fuelTypeId }">
  11. </div>
  12. </div>
  13. <div class="fl width_100per" style="margin-top: 2px;">
  14. <!-- <div class="fl width_30per height_50per margin_bottom30px" id="test" data-bind="css: {'dx-state-invisible': false }">-->
  15. <div class="fl width_30per height_50per margin_bottom30px" >
  16. <p class="body_sub_title">@dayEnergyUsageStatus </p>
  17. <div class="chart_wrap_box2 width_100per height_90per">
  18. <ul class="energy_use_data_date" style="margin: 0 auto;">
  19. <li style="width: 26%;">
  20. <span style="float: left;" data-bind="dxCheckBox: { value: todayCheck }" />
  21. <span style="margin-top: 5px;" class="date_type">@today</span>
  22. <span class="energy_unit" data-bind="text: todayValue">4.124/kWh</span>
  23. </li>
  24. <li style="width: 26%;">
  25. <span style="float: left;" data-bind="dxCheckBox: { value: yesterdayCheck }" />
  26. <span style="margin-top: 5px;" class="date_type">@yesterday</span>
  27. <span class="energy_unit" data-bind="text: yesterdayValue">4.124/kWh</span>
  28. </li>
  29. <li style="width: 26%;">
  30. <span style="float: left;" data-bind="dxCheckBox: { value: lastWeekCheck }" />
  31. <span style="margin-top: 5px;" class="date_type">@lastWeek</span>
  32. <span class="energy_unit" data-bind="text: lastWeekValue">4.124/kWh</span>
  33. </li>
  34. </ul>
  35. <div style="clear:both"></div>
  36. <div id="dayEnergyUsageChart" style="margin-top: 15px; width: 100%; height: 215px;"></div>
  37. </div>
  38. </div>
  39. <div class="fl width_30per height_50per margin_bottom30px margin_left15px" style="margin-bottom: 27px;">
  40. <p class="body_sub_title">@monthEnergyUsageStatus</p>
  41. <div class="chart_wrap_box2 width_100per height_90per">
  42. <ul class="energy_use_data_date">
  43. <li style="width: 26%;">
  44. <span style="float: left;" data-bind="dxCheckBox: { value: thisMonthCheck }" />
  45. <span style="margin-top: 5px;" class="date_type">@thisMonth</span>
  46. <span class="energy_unit" data-bind="text: thisMonthValue">4.124/kWh</span>
  47. </li>
  48. <li style="width: 26%;">
  49. <span style="float: left;" data-bind="dxCheckBox: { value: lastMonthCheck }" />
  50. <span style="margin-top: 5px;" class="date_type">@lastMonth</span>
  51. <span class="energy_unit" data-bind="text: lastMonthValue">4.124/kWh</span>
  52. </li>
  53. <li style="width: 26%;">
  54. <span style="float: left;" data-bind="dxCheckBox: { value: lastYearCheck }" />
  55. <span style="margin-top: 5px;" class="date_type">@lastYear</span>
  56. <span class="energy_unit" data-bind="text: lastYearValue">4.124/kWh</span>
  57. </li>
  58. </ul>
  59. <div style="clear:both"></div>
  60. <div id="monthEnergyUsageChart" style="margin-top: 15px; width: 100%; height: 215px;"></div>
  61. </div>
  62. </div>
  63. <!-- <div class="fl margin_left15px height_50per" style=\"margin-bottom: 27px; width:530px">-->
  64. <div class="fl margin_left15px height_50per" style="width:530px">
  65. <p class="body_sub_title">에너지 사용현황</p>
  66. <div class="chart_wrap_box2 width_100per height_90per">
  67. <div id="dayEnergyUsage" style="width:100%; margin-top:4px"></div>
  68. <div style="clear:both"></div>
  69. <div id="monthEnergyUsage" style="width:100%; margin-top:8px"></div>
  70. <div style="clear:both"></div>
  71. <div id="yearEnergyUsage" style="width:100%; margin-top:8px"></div>
  72. </div>
  73. </div>
  74. <div style="clear:both"></div>
  75. <div class="fl width_30per height_50per">
  76. <p class="body_sub_title">@yearEnergyUsageRateByGoal</p>
  77. <div class="chart_wrap_box2 width_100per height_90per">
  78. <div id="yearEnergyUsageGauge" style="float: left; width: 50%; height: 160px;"></div>
  79. <div id="yearElectricityUsageGauge" style="float: left; width: 50%; height: 160px;"></div>
  80. <div id="yearGasUsageGauge" style="margin-top: 5px; float: left; width: 50%; height: 160px;"></div>
  81. <div id="yearWaterUsageGauge" style="margin-top: 5px; float: left; width: 50%; height: 160px;"></div>
  82. </div>
  83. </div>
  84. <div class="fl width_30per height_50per margin_left15px">
  85. <p class="body_sub_title">@fuelTypeUsageRatio</p>
  86. <div class="chart_wrap_box2 width_100per height_90per">
  87. <div id="energyUsageRatioPieChart" style="width: 100%; height: 325px;"></div>
  88. </div>
  89. </div>
  90. <div class="fl margin_left15px height_35per" style="width:530px; ">
  91. <p class="body_sub_title">전체 CO2 발생현황</p>
  92. <div class="chart_wrap_box2 width_100per " style="height: 200px">
  93. <!-- <div id="dayCo2Usage" style="width:100%; margin-top:12px"></div>
  94. <div style="clear:both"></div>-->
  95. <div id="monthCo2Usage" style="width:100%; margin-top:4px"></div>
  96. <div style="clear:both"></div>
  97. <div id="yearCo2Usage" style="width:100%; margin-top:8px"></div>
  98. </div>
  99. </div>
  100. <div class="fl " style="width:530px; margin-top: 15px; margin-left: 15px; ">
  101. <p class="body_sub_title">외기 온습도</p>
  102. <div class="chart_wrap_box2 width_100per " style="height: 92px">
  103. <div class="unit_account" data-bind="text: currentTemp" style="margin-top:18px; margin-left:20px; width:220px"></div>
  104. <div class="unit_account" data-bind="text: currentHumi" style="margin-top:-44px; margin-left:270px; width:220px;"></div>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. </div>