@{
    ViewData["TitleController"] = "能耗管理";
    ViewData["TitleAction"] = "能耗报表";
    ViewData["TitleActionDescription"] = "设备能耗统计报表";
    ViewData["Title"] = "能耗报表";
}

@section header{
    <link rel="stylesheet" href="~/lib/adminlte/bower/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />
}

<div id="app">
    <div id="homeTop" style="top: 50px; height: 80px;position: fixed; z-index: 8001; width: 1300px;background-color: #001529;">
        <div class="col-md-12" style="padding-top: 25px;" >
            <div class="input-group input-daterange" style="width:400px;float:left;padding:0px">
                <div class="input-group-addon">起止日期</div>
                <input id="date1" type="text" class="form-control" value="@DateTime.Now.AddDays(-2).ToString("yyyy-MM-dd")">
                <div class="input-group-addon">-</div>
                <input id="date2" type="text" class="form-control" value="@DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd")">
            </div>
            <div class="col-md-1">
                <div class="btn-group">
                    <button type="button" class="btn btn-block btn-default" v-on:click="getEnergyConsumptionReport()">
                        <i class="fa fa-search"></i> 查询
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div id="homeTable1" style="top: 130px; position: fixed; z-index: 8000; height: 60px; width: 1300px;background-color: #001529;">
        <table id="table1" class="table table-hover">
            <thead>
                <tr>
                    <th width="5%">No</th>
                    <th width="10%">Line</th>
                    <th width="10%">Total<br />（kW·h）</th>
                    <th width="10%">FPL<br />（kW·h）</th>
                    <th width="10%">COG<br />（kW·h）</th>
                    <th width="10%">FOG<br />（kW·h）</th>
                    <th width="10%">BT<br />（kW·h）</th>
                    <th width="10%">PS<br />（kW·h）</th>
                    <th width="10%">TP<br />（kW·h）</th>
                    <th width="10%">EC<br />（kW·h）</th>
                </tr>
            </thead>
        </table>
    </div>
    <div id="homeTable2" style="padding-top: 60px; width: 1300px; color:#FCC439">
        <table id="table1" class="table table-hover">
            <thead>
                <tr>
                    <th width="5%">No</th>
                    <th width="10%">Line</th>
                    <th width="10%">Total<br />（kW·h）</th>
                    <th width="10%">FPL<br />（kW·h）</th>
                    <th width="10%">COG<br />（kW·h）</th>
                    <th width="10%">FOG<br />（kW·h）</th>
                    <th width="10%">BT<br />（kW·h）</th>
                    <th width="10%">PS<br />（kW·h）</th>
                    <th width="10%">TP<br />（kW·h）</th>
                    <th width="10%">EC<br />（kW·h）</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(line, index) in lineDtos">
                    <td>{{ index + 1 }}</td>
                    <td>{{ line.lineName }}</td>
                    <td>{{ line.electricEnergiy }}</td>
                    <td>{{ line.machineElectricEnergiy[0] }}</td>
                    <td>{{ line.machineElectricEnergiy[1] }}</td>
                    <td>{{ line.machineElectricEnergiy[2] }}</td>
                    <td>{{ line.machineElectricEnergiy[3] }}</td>
                    <td>{{ line.machineElectricEnergiy[4] }}</td>
                    <td>{{ line.machineElectricEnergiy[5] }}</td>
                    <td>{{ line.machineElectricEnergiy[6] }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

@section footer{
    <script src="~/lib/adminlte/bower/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="~/lib/adminlte/bower/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-cn.js"></script>
    <script src="~/js/energy-consumption/energyConsumptionReport.js" asp-append-version="true"></script>
}