ProductionLineMonitor/ProductionLineMonitor.Web/Views/Line/Index.cshtml

@{
    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">

    <style>
        .radio_type {
            width: 20px;
            height: 20px;
            appearance: none;
            position: relative;
        }

            .radio_type:before {
                content: '';
                width: 20px;
                height: 20px;
                border: 2px solid #777;
                display: inline-block;
                border-radius: 50%;
                vertical-align: middle;
            }

            .radio_type:checked:before {
                content: '';
                width: 20px;
                height: 20px;
                border: 2px solid green;
                display: inline-block;
                border-radius: 50%;
                vertical-align: middle;
                top: 3px;
                left: 3px;
            }

            .radio_type:checked:after {
                content: '';
                width: 14px;
                height: 14px;
                text-align: center;
                border: 2px solid green;
                background: green;
                border-radius: 50%;
                position: absolute;
                top: 4px;
                left: 3px;
            }
    </style>
}

<div id="app">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-body">
                <div style="top: 50px; position: fixed; z-index: 8000; padding-top: 10px; height: 110px; background-color: #001529">
                    <div class="col-sm-1" v-if="isLine">      
                        <button type="button" class="btn btn-default form-control" v-on:click="returnOverview()"
                                style="background-color:#0b9afa; color: white; border: 0px">
                            <span class="glyphicon glyphicon-arrow-left">
                            </span>
                            返回
                        </button>
                    </div>
                    <div class="col-sm-3">
                        <select style="font-size: 16px"
                                id="Line" name="Line" data-msg-required="必须选择线别" v-on:change="select($event)"
                            data-rule-required="true" class="form-control">
                            <option v-for="line in lines" :value="line.id">{{ line.name }}</option>
                        </select>
                    </div>
                    <div class="col-sm-3">
                        <div class="input-group date">
                            <div class="input-group-addon">日期</div>
                            <input
                                id="date" type="text" class="form-control"
                                   v-on:change="selectDatepicker($event)"
                                value="@DateTime.Now.ToString("yyyy-MM-dd")">
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <button type="button" class="btn btn-default" v-on:click="lastDay()">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                        </button>
                        <button type="button" class="btn btn-default" v-on:click="nextDay()">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                        </button>
                        
                    </div>
                    <div class="col-sm-3">
                        <a class="btn btn-default" v-on:click="jumpEyz()">
                            导航首页
                        </a>
                    </div>
                    <div class="col-sm-12">
                        <div class="col-sm-10">
                            <h3>
                                <span class="glyphicon glyphicon-file"></span>
                                &nbsp;
                                {{ lineName }}
                                &nbsp;
                                {{ date }}
                                <span v-if="isLine">
                                    &nbsp; {{ moduleType }}
                                </span>
                            </h3>
                        </div>
                        <div class="col-sm-2">
                            <div style="padding-top: 20px" v-if="isLine">
                                <button class="btn btn-default" v-on:click="jumpTheSameDay()">当月排程</button>
                                <button class="btn btn-default" v-on:click="jumpNextMonth()">次月排程</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-content" style="padding-top: 85px;">
                    <div class="tab-pane active" id="overview">
                        <div id="homeTable1" style="padding-top: 10px; position: fixed; z-index: 8000; width: 1300px; height:60px; background-color: #001529">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th style="width: 6%">楼层</th>
                                        <th style="width: 10%">线别</th>
                                        <th style="width: 15%">机种</th>
                                        <th style="width: 15%">Capa</th>
                                        <th style="width: 6%">白班</th>
                                        <th style="width: 10%">白班排程</th>
                                        <th style="width: 6%">夜班</th>
                                        <th style="width: 10%">夜班排程</th>
                                        <th style="width: 10%">实际</th>
                                        <th style="width: 12%">
                                            达成率
                                            <button class="btn btn-default btn-sm" v-on:click="sort()">
                                                <span id="sortSpan" class="glyphicon glyphicon-sort-by-alphabet"></span>
                                            </button>
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div id="homeTable2" style="padding-top: 10px; width: 1300px">
                            <table id="2f" class="table table-hover">
                                <thead>
                                    <tr>
                                        <th style="width: 6%">楼层</th>
                                        <th style="width: 10%">线别</th>
                                        <th style="width: 15%">机种</th>
                                        <th style="width: 15%">Capa</th>
                                        <th style="width: 6%">白班</th>
                                        <th style="width: 10%">白班排程</th>
                                        <th style="width: 6%">夜班</th>
                                        <th style="width: 10%">夜班排程</th>
                                        <th style="width: 10%">实际</th>
                                        <th style="width: 12%">
                                            达成率
                                            <button class="btn btn-default btn-sm">
                                                <span id="sortSpan" class="glyphicon glyphicon-sort-by-alphabet"></span>
                                            </button>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(lineOverview, index) in lineOverViews" v-on:click="onClickCell(lineOverview.lineId, lineOverview.moduleType)">
                                        <td>{{ lineOverview.floor }}F</td>
                                        <td>
                                            @* <span v-if="lineOverview.floor === 1 && lineOverview.line === 7">实验线</span>
                                            <span v-else-if="lineOverview.floor === 1 && lineOverview.line === 6">Signage</span>
                                            <span v-else-if="lineOverview.floor === 1 && lineOverview.line === 8">Print 1</span>
                                            <span v-else-if="lineOverview.floor === 1 && lineOverview.line === 9">Print 3</span>
                                            <span v-else-if="lineOverview.floor === 1 && lineOverview.line === 10">Print 4</span>
                                            <span v-else-if="lineOverview.floor === 1 && lineOverview.line === 11">Print 6</span>
                                            <span v-else-if="lineOverview.floor === 1 && lineOverview.line === 12">Print 7</span>
                                            <span v-else-if="lineOverview.floor === 1 && lineOverview.line === 13">Print 8</span>
                                            <span v-else>{{ lineOverview.line }}</span> *@
                                            {{ lineOverview.lineName }}
                                        </td>
                                        <td>{{ lineOverview.moduleType }}</td>
                                        <td>{{ lineOverview.capa }}</td>
                                        <td>
                                            <div :class="[lineOverview.morningShiftState===true?'state-true':'state']"></div>
                                        </td>
                                        <td>{{ lineOverview.planMorningShiftCapacity }}</td>
                                        <td>
                                            <div :class="[lineOverview.nightShiftState===true?'state-true':'state']"></div>
                                        </td>
                                        <td>{{ lineOverview.planNightShiftCapacity }}</td>
                                        <td>{{ lineOverview.capacity }}</td>
                                        <td v-if="lineOverview.planMorningShiftCapacity+lineOverview.planNightShiftCapacity===0">
                                            -
                                        </td>
                                        <td v-else>
                                            {{ lineOverview.achievementRate }} %
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane" id="line">
                        <div class="col-lg-12" style="padding-top: 10px;">
                            <div class="col-lg-12">
                                <div class="echart-dev">
                                    <div class="title">
                                        <h3>月产能趋势 ( {{ monthTitle }} ) </h3>
                                    </div>
                                    <div class="echart-statistic">
                                        <div style="text-align:left; padding-left: 15px; height: 100px">
                                            <div class="col-sm-9">
                                                <div class="col-sm-3">
                                                    <div>
                                                        <label>
                                                            <input class="radio_type" type="radio" name="optionsRadios" value="ALL" v-on:click="onClickOptionsRadios()">
                                                            全部机种
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-sm-3" v-for="moduleType1 in moduleTypes">
                                                    <div>
                                                        <label>
                                                            <input class="radio_type" type="radio" name="optionsRadios" :value=moduleType1 v-on:click="onClickOptionsRadios()">
                                                            {{ moduleType1 }}
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div :style="{'color': (accumulatedDifference >= 0 ? '#fff' : '#ff6e76'), 'text-align':'right','padding': '15px', 'font-size': '1.2em' }">
                                        累计差异：{{ accumulatedDifference }} pcs
                                    </div>
                                    <div id="container2" style="height: 350px; width: 100%;">
                                    </div>
                                    <div id="container3" style="height: 150px; width: 100%;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12" style="padding-top: 10px;">
                            <div class="col-lg-12">
                                <div class="echart-dev">
                                    <div class="title">
                                        <h3>日产能详情 ( {{ date }} ) </h3>
                                    </div>
                                    <div class="echart-statistic">
                                        <span style="font-size: 1.2em">早班产能：{{ MorningCapacity }} pcs</span>
                                        <span style="font-size: 1.2em">夜班产能：{{ NightCapacity }} pcs</span>
                                        <span style="font-size: 1.2em">合计：{{ TotalCapacity }} pcs</span>
                                    </div>
                                    <div id="container1" style="height: 350px; width: 100%;">
                                    </div>
                                    <div style="padding-left: 10%">
                                        <ul v-for="(keyinfo, index) in lineData.keyInInfos" v-if="keyinfo.keyInType != 8" class="echarts-keyinfo">
                                            <li>
                                                {{ keyinfo.keyInTypeName }} &nbsp;&nbsp; {{ keyinfo.description }} &nbsp;&nbsp;
                                                {{ keyinfo.startTime | dataTimeFormatV2 }} ~ {{ keyinfo.endTime | dataTimeFormatV2 }} &nbsp;&nbsp;
                                                Total: {{ keyinfo.affectTime.toFixed(0) }} min
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12" style="padding-top: 10px;">
                            <div class="col-lg-12">
                                <div>
                                    <table id="table1" class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>机种</th>
                                                <th>计划<br /><small>(pcs)</small></th>
                                                <th>Capa<br /><small>(pcs)</small></th>
                                                <th>TT</th>
                                                <th>产能<br /><small>(pcs)</small></th>
                                                <th>差异<br /><small>(pcs)</small></th>
                                                <th>运行<br /><small>(min)</small></th>
                                                <th>换料<br /><small>(min)</small></th>
                                                <th>宕机<br /><small>(min)</small></th>
                                                <th>负荷<br /><small>(min)</small></th>
                                                <th>时间<br /><small>稼动(%)</small></th>
                                                <th>性能<br /><small>稼动(%)</small></th>
                                                <th>OEE<br /><small>(%)</small></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(statistic, index) in lineData.statistics">
                                                <td><b>{{ statistic.moduleType }}</b></td>
                                                <td><b>{{ statistic.planCapacity }}</b></td>
                                                <td><b>{{ statistic.capa }}</b></td>
                                                <td><b>{{ statistic.tt }}</b></td>
                                                <td><b>{{ statistic.capacity }}</b></td>
                                                <td><b>{{ statistic.capacity - statistic.planCapacity }}</b></td>
                                                <td>{{ statistic.runTime }}</td>
                                                <td>{{ statistic.reload }}</td>
                                                <td>{{ statistic.downTime }}</td>
                                                <td>{{ statistic.loadTime }}</td>
                                                <td>{{ (statistic.availability * 100).toFixed(0) }}</td>
                                                <td>{{ (statistic.performance * 100).toFixed(0) }}</td>
                                                <td><b>{{ (statistic.oee * 100).toFixed(0) }}</b></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>       
                        <div class="col-lg-12" style="padding-top: 10px;">
                            <div class="col-lg-6">
                                <div style="padding-top: 30px">
                                    <div class="title">
                                        <h3>早班换耗材统计</h3>
                                        <span><b>标准：{{ (lineData.theoryRefueledTime / 2).toFixed(0) }} min</b></span>
                                        <span> / </span>
                                        <span><b>换耗材合计：{{ getKeyInInfoAffectTime_8_morning }} min</b></span>
                                    </div>
                                    <table id="table2" class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th width="10%">No</th>
                                                <th>类别</th>
                                                <th width="15%">次数</th>
                                                <th width="20%">耗时<small>(min)</small></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(replace, index) in lineData.morningReplaceConsumables">
                                                <td>{{ index + 1 }}</td>
                                                <td>{{ replace.name }}</td>
                                                <td>{{ replace.count }}</td>
                                                <td>{{ replace.accumulativeTime }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div style="padding-top: 30px">
                                    <div class="title">
                                        <h3>夜班换耗材统计</h3>
                                        <span><b>标准：{{ (lineData.theoryRefueledTime / 2).toFixed(0) }} min</b></span>
                                        <span> / </span>
                                        <span><b>换耗材合计：{{ getKeyInInfoAffectTime_8_night }} min</b></span>
                                    </div>
                                    <table id="table2" class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th width="10%">No</th>
                                                <th>类别</th>
                                                <th width="15%">次数</th>
                                                <th width="20%">耗时<small>(min)</small></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(replace, index) in lineData.nightReplaceConsumables">
                                                <td>{{ index + 1 }}</td>
                                                <td>{{ replace.name }}</td>
                                                <td>{{ replace.count }}</td>
                                                <td>{{ replace.accumulativeTime }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12" style="padding-top: 10px;">
                            <div class="col-lg-6">
                                <div class="title">
                                    <h3>
                                        早班故障 TOP 10
                                        &nbsp;&nbsp;<button class="btn btn-default" v-on:click="ExportineAccumulatedFaultByMorning()">查看详情</button>
                                    </h3>
                                </div>
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th width="5%">No</th>
                                            <th width="20%">设备</th>
                                            <th width="13%">数据<br />来源</th>
                                            <th>故障详情</th>
                                            <th width="13%">累计次数</th>
                                            <th width="15%">累计时间<small>(min)</small></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(fault, index) in lineMorningAccumulatedFault">
                                            <td>{{ index + 1 }}</td>
                                            <td>{{ fault.machineType }}</td>
                                            <td>{{ fault.dataSource == 0 ? "自动上抛" : "人工录入" }}</td>
                                            <td>{{ fault.faultInfo }}</td>
                                            <td>{{ fault.accumulativeTotal }}</td>
                                            <td>{{ fault.accumulativeTime.toFixed(0) }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-lg-6">
                                <div class="title">
                                    <h3>
                                        夜班故障 TOP 10
                                        &nbsp;&nbsp;<button class="btn btn-default" v-on:click="ExportineAccumulatedFaultByNight()">查看详情</button>
                                    </h3>
                                </div>
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th width="5%">No</th>
                                            <th width="20%">设备</th>
                                            <th width="13%">数据<br />来源</th>
                                            <th>故障详情</th>
                                            <th width="13%">累计次数</th>
                                            <th width="15%">累计时间<small>(min)</small></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(fault, index) in lineNightAccumulatedFault">
                                            <td>{{ index + 1 }}</td>
                                            <td>{{ fault.machineType }}</td>
                                            <td>{{ fault.dataSource == 0 ? "自动上抛" : "人工录入" }}</td>
                                            <td>{{ fault.faultInfo }}</td>
                                            <td>{{ fault.accumulativeTotal }}</td>
                                            <td>{{ fault.accumulativeTime.toFixed(0) }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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="~/lib/echarts/echarts.min.js"></script>

    <script src="~/js/Line/line.js" asp-append-version="true"></script>
}