ProductionLineMonitor/ProductionLineMonitor.Web/Views/ReportForm/Index.cshtml

@{
    ViewData["TitleController"] = "OEE";
    ViewData["TitleAction"] = "";
    ViewData["TitleActionDescription"] = "机台OEE详情";
    ViewData["Title"] = "OEE Machine";
}

@section header {
    <link rel="stylesheet" href="~/lib/zTree.v3/css/zTreeStyle/zTreeStyle.min.css">
    <link rel="stylesheet" href="~/lib/adminlte/bower/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />
    <style>
        table {
            border-right: 1px solid WhiteSmoke;
            border-bottom: 1px solid WhiteSmoke;
            text-align: center;
        }

            table th {
                border-left: 1px solid WhiteSmoke;
                border-top: 1px solid WhiteSmoke;
                text-align: center;
            }

            table td {
                border-left: 1px solid WhiteSmoke;
                border-top: 1px solid WhiteSmoke;
            }
    </style>
}
<div id="app" class="col-md-12">
    <div class="box box-primary">
        <div class="box-body">
            <div class="col-md-2">
                <div class="over">
                    <ul id="productionLineTree" class="ztree"></ul>
                </div>
            </div>
            <div class="col-md-10">
                <div id="form1" class="col-md-12">
                    <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 date" value="@DateTime.Now.AddDays(-7).ToString("yyyy-MM-dd")">
                        <div class="input-group-addon">-</div>
                        <input id="date2" type="text" class="form-control date" value="@DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd")">
                    </div>
                    <div id="devicechoose" class="input-group input-daterange" style="width:300px;float:left;padding-left:15px">
                        <div  class="input-group-addon">设备选择</div>
                        <input id="mutiSelect" class="form-control" v-on:click="showMenu()">
                    </div>
                    <div id="methodchoose" class="input-group input-daterange" style="width:200px;float:left;padding-left:15px">
                        <div class="input-group-addon">By</div>
                        <select id="selectMonth" class="form-control" v-on:change="selected()">
                            <option value="1">Day</option>
                            <option value="2">Week</option>
                            <option value="3">Month</option>
                        </select>
                    </div>
                    <div id="menuContent" style="position:absolute; display:none; z-index:10">
                        <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 200px;"></ul>
                    </div>
                    <div class="col-md-1" style="padding-left:15px">
                        <div class="btn-group">
                            <button type="button" class="btn btn-block btn-default"
                                    v-on:click="getOEES()">
                                <i class="fa fa-search"></i> 查询
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-12" style="padding-top: 20px;">
                    <div class="box-body">
                        <p class="text-center">
                            <strong>稼动曲线</strong>
                        </p>
                        <div id="container1"
                             style="height: 500px;">
                        </div>
                        <div id="container2"
                             class="col-md-6"
                            style="height: 500px;">
                         </div>

                        <div id="tbdata" class="col-md-12" style="padding-top: 10px;">
                            <p class="text-center">
                                {{ outputInfo }}
                            </p>
                            <table id="data" height="500px" style="margin-left: 4px">
                                <thead>
                                    <tr>
                                        <th style="width: 10%">时段</th>
                                        <th style="width: 10%">机种</th>
                                        <th style="width: 10%">运行时间</th>
                                        <th style="width: 10%">报警时间</th>
                                        <th style="width: 10%">待料时间</th>
                                        <th style="width: 10%">换料时间</th>
                                        <th style="width: 10%">产能</th>
                                        <th style="width: 10%">TT</th>
                                        <th style="width: 10%">报警次数</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(output, index) in outputs">
                                        <td>{{ output.period }}</td>
                                        <td>{{ output.moduleType }}</td>
                                        <td>{{ Math.round(output.autoRunTime/60*10)/10 }}</td>
                                        <td>{{ Math.round(output.alarmTime/60*10)/10 }}</td>
                                        <td>{{ Math.round(output.idleTime/60*10)/10 }}</td>
                                        <td>{{ Math.round(output.loadMATTime/60*10)/10 }}</td>
                                        <td>{{ output.outPut }}</td>
                                        <td>{{ output.tt }}</td>
                                        <td>{{ output.alarmSum }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @* <div class="col-md-6" style="padding-top: 10px;">
                    <p class="text-center">
                        日期：{{ outputInfo }}
                    </p>
                    <table id="data" height="300px" style="margin-left: 4px">
                        <thead>
                            <tr>
                                <th style="width: 10%">时段</th>
                                <th style="width: 10%">机种</th>
                                <th style="width: 10%">运行时间</th>
                                <th style="width: 10%">报警时间</th>
                                <th style="width: 10%">待料时间</th>
                                <th style="width: 10%">换料时间</th>
                                <th style="width: 10%">产能</th>
                                <th style="width: 10%">TT</th>
                                <th style="width: 10%">报警次数</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(output, index) in outputs">
                                <td>{{ output.period }}</td>
                                <td>{{ output.moduleType }}</td>
                                <td>{{ Math.round(output.autoRunTime/60*10)/10 }}</td>
                                <td>{{ Math.round(output.alarmTime/60*10)/10 }}</td>
                                <td>{{ Math.round(output.idleTime/60*10)/10 }}</td>
                                <td>{{ Math.round(output.loadMATTime/60*10)/10 }}</td>
                                <td>{{ output.outPut }}</td>
                                <td>{{ output.tt }}</td>
                                <td>{{ output.alarmSum }}</td>
                            </tr>
                        </tbody>
                    </table>
                 </div> *@
            </div>
        </div>
    </div>
</div>

@section footer {
    <script src="/lib/zTree.v3/js/jquery.ztree.core.min.js"></script>
    <script src="~/lib/xlsx/xlsx.full.min.js"></script>
    <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="~/lib/echarts/echarts.min.js"></script>
    <script src="~/js/report-form/report-form-v1.js"></script>
    <script src="~/lib/ztree.v3/js/jquery.ztree.excheck.min.js"></script>
    <script src="~/lib/moment.js/moment-with-locales.min.js"></script>
}