<div data-options="dxView : { name: 'PlanEstablishment', title: '에너지 목표 대비 사용량 분석', pane: 'master' } "> <div data-options="dxContent : { targetPlaceholder: 'content' } "> <div data-options="dxViewPlaceholder: { viewName: 'SideMenu' }"></div> <div data-options="dxViewPlaceholder: { viewName: 'PlanEstablishmentPopup' }"></div> <!--<div data-options="dxViewPlaceholder: { viewName: 'PlanEstablishmentSearchConditionView' }"></div>--> <div id="LoadPanel"></div> <p class="body_sub_title">에너지 목표 대비 사용량 분석</p> <!--상단 차트 레이아웃--> <div class="chart_wrap_box" style="width: 100%;"> <!--년월선택 버튼--> <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> <div id="yearBtn" class="fl" style="margin-right: 10px;" data-bind="dxButton: {text: '년', onClick: yearButtonClicked}"></div> <!--시작,종료 데이트 픽커--> <div id="startDatePicker" class="fl" data-bind="dxDateBox: startDatePicker"></div> <!-- <div id="modGoalBtn" class="fl" style="margin-left:10px;" data-bind="dxButton: {text: '목표치 수정', onClick: modGoalButtonClicked}"></div>--> <!--<p class="fl" style="line-height:200%;"> ~ </p><div id="endDatePicker" class="fl" data-bind="dxDateBox: endDatePicker"></div>--> <!--에너지원 버튼--> <div id="waterBtn" class="fr" style="margin-right:10px;" data-bind="dxButton: {text: '수도', onClick: waterButtonClicked}"></div> <div id="gaskWhBtn" class="fr" style="margin-right:10px;" data-bind="dxButton: {text: '가스kWh환산', onClick: gaskWhButtonClicked}"></div> <div id="gasm3Btn" class="fr" style="margin-right:10px;" data-bind="dxButton: {text: '가스m3', onClick: gasm3ButtonClicked}"></div> <div id="powerBtn" class="fr" style="margin-right:10px;" data-bind="dxButton: {text: '전력', onClick: powerButtonClicked}"></div> <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> <!--통합 버튼 툴팁--> <div data-bind="dxTooltip:{target: '#allBtn', visible: tooltipVisible}"> <div data-options="dxTemplate:{ name: 'content' }"> <p>전력, 가스 합산 수치 입니다.</p> </div> </div> <!--막대그래프 차트--> <div id="sideBarChart" style="height: 544px; width: 100%;" data-bind="dxChart: chartOptions"></div> <!--<div id="chartU2" style="height: 544px; width: 100%;" />--> </div> <!--하단 수치값 레이아웃--> <div class="clear"></div> <div class="fl chart_wrap_box" style="width: 100%; height: 120px;text-align:center;margin-top:10px"> <div class="fl" style="width:20%; margin-top:7px"> <div id="unitPrediction">금월 목표 사용량(kWh)</div> <div id="textPrediction" style="height: 100%; width: 100%; font-size: 18px; font-weight: bold" /> </div> <div class="fl" style="width:20%;margin-top:7px"> <div id="unitPrediction2">금일까지 목표 사용량(kWh)</div> <div id="textPrediction2" style="height: 100%; width: 100%; font-size: 18px; font-weight: bold" /> <div id="textPredictionStandard" style="font-size: 15px;"></div> </div> <div class="fl" style="width:20%;margin-top:7px"> <div id="unitPerform">금월 사용량(kWh)</div> <div id="textPerform" style="height: 100%;font-size: 18px; font-weight: bold"></div> <div id="textPerformStandard" style="font-size: 15px;"></div> </div> <div class="fl" style="width:20%;margin-top:7px"> <div id="unitResult">목표 대비 사용량</div> <div id="textResult" style="height: 100%;font-size: 18px; font-weight: bold;"></div> <div id="textResultStandard" style="font-size: 15px;"></div> </div> <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> </div> </div> </div>