6256d208cd3961f43f478607c13d993e4cd72895.svn-base 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <div data-options="dxView : { name: 'PlanEstablishment', title: '에너지 목표 대비 사용량 분석', pane: 'master' } ">
  2. <div data-options="dxContent : { targetPlaceholder: 'content' } ">
  3. <div data-options="dxViewPlaceholder: { viewName: 'SideMenu' }"></div>
  4. <div data-options="dxViewPlaceholder: { viewName: 'PlanEstablishmentPopup' }"></div>
  5. <!--<div data-options="dxViewPlaceholder: { viewName: 'PlanEstablishmentSearchConditionView' }"></div>-->
  6. <div id="LoadPanel"></div>
  7. <p class="body_sub_title">에너지 목표 대비 사용량 분석</p>
  8. <!--상단 차트 레이아웃-->
  9. <div class="chart_wrap_box" style="width: 100%;">
  10. <!--년월선택 버튼-->
  11. <div id="monthBtn" class="fl" style="background-image: linear-gradient(180deg,#9babc3 0%,#41618c 100%);margin-right:10px;" data-bind="dxButton: {text: '월', onClick: monthButtonClicked}"></div>
  12. <div id="yearBtn" class="fl" style="margin-right: 10px;" data-bind="dxButton: {text: '년', onClick: yearButtonClicked}"></div>
  13. <!--시작,종료 데이트 픽커-->
  14. <div id="startDatePicker" class="fl" data-bind="dxDateBox: startDatePicker"></div>
  15. <!-- <div id="modGoalBtn" class="fl" style="margin-left:10px;" data-bind="dxButton: {text: '목표치 수정', onClick: modGoalButtonClicked}"></div>-->
  16. <!--<p class="fl" style="line-height:200%;">&nbsp;~&nbsp;</p><div id="endDatePicker" class="fl" data-bind="dxDateBox: endDatePicker"></div>-->
  17. <!--에너지원 버튼-->
  18. <div id="waterBtn" class="fr" style="margin-right:10px;" data-bind="dxButton: {text: '수도', onClick: waterButtonClicked}"></div>
  19. <div id="gaskWhBtn" class="fr" style="margin-right:10px;" data-bind="dxButton: {text: '가스kWh환산', onClick: gaskWhButtonClicked}"></div>
  20. <div id="gasm3Btn" class="fr" style="margin-right:10px;" data-bind="dxButton: {text: '가스m3', onClick: gasm3ButtonClicked}"></div>
  21. <div id="powerBtn" class="fr" style="margin-right:10px;" data-bind="dxButton: {text: '전력', onClick: powerButtonClicked}"></div>
  22. <div id="allBtn" class="fr" style="margin-right: 10px; background-image: linear-gradient(180deg,#9babc3 0%,#41618c 100%);" data-bind="dxButton: {text: '통합', onClick: allButtonClicked}, event: { mouseover: toggleTooltip, mouseout: toggleTooltip }"></div>
  23. <!--통합 버튼 툴팁-->
  24. <div data-bind="dxTooltip:{target: '#allBtn', visible: tooltipVisible}">
  25. <div data-options="dxTemplate:{ name: 'content' }">
  26. <p>전력, 가스 합산 수치 입니다.</p>
  27. </div>
  28. </div>
  29. <!--막대그래프 차트-->
  30. <div id="sideBarChart" style="height: 544px; width: 100%;" data-bind="dxChart: chartOptions"></div>
  31. <!--<div id="chartU2" style="height: 544px; width: 100%;" />-->
  32. </div>
  33. <!--하단 수치값 레이아웃-->
  34. <div class="clear"></div>
  35. <div class="fl chart_wrap_box" style="width: 100%; height: 120px;text-align:center;margin-top:10px">
  36. <div class="fl" style="width:20%; margin-top:7px">
  37. <div id="unitPrediction">금월 목표 사용량(kWh)</div>
  38. <div id="textPrediction" style="height: 100%; width: 100%; font-size: 18px; font-weight: bold" />
  39. </div>
  40. <div class="fl" style="width:20%;margin-top:7px">
  41. <div id="unitPrediction2">금일까지 목표 사용량(kWh)</div>
  42. <div id="textPrediction2" style="height: 100%; width: 100%; font-size: 18px; font-weight: bold" />
  43. <div id="textPredictionStandard" style="font-size: 15px;"></div>
  44. </div>
  45. <div class="fl" style="width:20%;margin-top:7px">
  46. <div id="unitPerform">금월 사용량(kWh)</div>
  47. <div id="textPerform" style="height: 100%;font-size: 18px; font-weight: bold"></div>
  48. <div id="textPerformStandard" style="font-size: 15px;"></div>
  49. </div>
  50. <div class="fl" style="width:20%;margin-top:7px">
  51. <div id="unitResult">목표 대비 사용량</div>
  52. <div id="textResult" style="height: 100%;font-size: 18px; font-weight: bold;"></div>
  53. <div id="textResultStandard" style="font-size: 15px;"></div>
  54. </div>
  55. <div id="dxCircularGauge" class="fl" style="width:20%;height:100%;margin-top:0px;padding-top:0px;margin-right:0px;padding-right:0px;" data-bind="dxCircularGauge: dxCircularGauge"></div>
  56. </div>
  57. </div>
  58. </div>