<div data-options="dxView : { name: 'MainDashboard', title: '@viewMainDashboard', pane: 'master' } "> <div data-options="dxContent : { targetPlaceholder: 'content' } "> <div data-options="dxViewPlaceholder: { viewName: 'SideMenu' }"></div> <div class="fr chart_wrap_box2" style="width: 180px; margin-top: -20px;"> <!--<div class="fl">@energy</div>--> <div class="fr dx-field-value" data-bind="dxSelectBox: { dataSource: fuelTypes, displayExpr: 'Name' , valueExpr: 'FuelTypeId' , value: fuelTypeId }"> </div> </div> <div class="fl width_100per" style="margin-top: 2px;"> <!-- <div class="fl width_30per height_50per margin_bottom30px" id="test" data-bind="css: {'dx-state-invisible': false }">--> <div class="fl width_30per height_50per margin_bottom30px" > <p class="body_sub_title">@dayEnergyUsageStatus </p> <div class="chart_wrap_box2 width_100per height_90per"> <ul class="energy_use_data_date" style="margin: 0 auto;"> <li style="width: 26%;"> <span style="float: left;" data-bind="dxCheckBox: { value: todayCheck }" /> <span style="margin-top: 5px;" class="date_type">@today</span> <span class="energy_unit" data-bind="text: todayValue">4.124/kWh</span> </li> <li style="width: 26%;"> <span style="float: left;" data-bind="dxCheckBox: { value: yesterdayCheck }" /> <span style="margin-top: 5px;" class="date_type">@yesterday</span> <span class="energy_unit" data-bind="text: yesterdayValue">4.124/kWh</span> </li> <li style="width: 26%;"> <span style="float: left;" data-bind="dxCheckBox: { value: lastWeekCheck }" /> <span style="margin-top: 5px;" class="date_type">@lastWeek</span> <span class="energy_unit" data-bind="text: lastWeekValue">4.124/kWh</span> </li> </ul> <div style="clear:both"></div> <div id="dayEnergyUsageChart" style="margin-top: 15px; width: 100%; height: 215px;"></div> </div> </div> <div class="fl width_30per height_50per margin_bottom30px margin_left15px" style="margin-bottom: 27px;"> <p class="body_sub_title">@monthEnergyUsageStatus</p> <div class="chart_wrap_box2 width_100per height_90per"> <ul class="energy_use_data_date"> <li style="width: 26%;"> <span style="float: left;" data-bind="dxCheckBox: { value: thisMonthCheck }" /> <span style="margin-top: 5px;" class="date_type">@thisMonth</span> <span class="energy_unit" data-bind="text: thisMonthValue">4.124/kWh</span> </li> <li style="width: 26%;"> <span style="float: left;" data-bind="dxCheckBox: { value: lastMonthCheck }" /> <span style="margin-top: 5px;" class="date_type">@lastMonth</span> <span class="energy_unit" data-bind="text: lastMonthValue">4.124/kWh</span> </li> <li style="width: 26%;"> <span style="float: left;" data-bind="dxCheckBox: { value: lastYearCheck }" /> <span style="margin-top: 5px;" class="date_type">@lastYear</span> <span class="energy_unit" data-bind="text: lastYearValue">4.124/kWh</span> </li> </ul> <div style="clear:both"></div> <div id="monthEnergyUsageChart" style="margin-top: 15px; width: 100%; height: 215px;"></div> </div> </div> <!-- <div class="fl margin_left15px height_50per" style=\"margin-bottom: 27px; width:530px">--> <div class="fl margin_left15px height_50per" style="width:530px"> <p class="body_sub_title">에너지 사용현황</p> <div class="chart_wrap_box2 width_100per height_90per"> <div id="dayEnergyUsage" style="width:100%; margin-top:4px"></div> <div style="clear:both"></div> <div id="monthEnergyUsage" style="width:100%; margin-top:8px"></div> <div style="clear:both"></div> <div id="yearEnergyUsage" style="width:100%; margin-top:8px"></div> </div> </div> <div style="clear:both"></div> <div class="fl width_30per height_50per"> <p class="body_sub_title">@yearEnergyUsageRateByGoal</p> <div class="chart_wrap_box2 width_100per height_90per"> <div id="yearEnergyUsageGauge" style="float: left; width: 50%; height: 160px;"></div> <div id="yearElectricityUsageGauge" style="float: left; width: 50%; height: 160px;"></div> <div id="yearGasUsageGauge" style="margin-top: 5px; float: left; width: 50%; height: 160px;"></div> <div id="yearWaterUsageGauge" style="margin-top: 5px; float: left; width: 50%; height: 160px;"></div> </div> </div> <div class="fl width_30per height_50per margin_left15px"> <p class="body_sub_title">@fuelTypeUsageRatio</p> <div class="chart_wrap_box2 width_100per height_90per"> <div id="energyUsageRatioPieChart" style="width: 100%; height: 325px;"></div> </div> </div> <div class="fl margin_left15px height_35per" style="width:530px; "> <p class="body_sub_title">전체 CO2 발생현황</p> <div class="chart_wrap_box2 width_100per " style="height: 200px"> <!-- <div id="dayCo2Usage" style="width:100%; margin-top:12px"></div> <div style="clear:both"></div>--> <div id="monthCo2Usage" style="width:100%; margin-top:4px"></div> <div style="clear:both"></div> <div id="yearCo2Usage" style="width:100%; margin-top:8px"></div> </div> </div> <div class="fl " style="width:530px; margin-top: 15px; margin-left: 15px; "> <p class="body_sub_title">외기 온습도</p> <div class="chart_wrap_box2 width_100per " style="height: 92px"> <div class="unit_account" data-bind="text: currentTemp" style="margin-top:18px; margin-left:20px; width:220px"></div> <div class="unit_account" data-bind="text: currentHumi" style="margin-top:-44px; margin-left:270px; width:220px;"></div> </div> </div> </div> </div> </div>