<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>