@model AMESCoreStudio.WebApi.DTO.AMES.RPT001ViewDto

@{
    ViewData["Title"] = "生產即時看板";
    Layout = "~/Views/Shared/_AMESLayout.cshtml";
}

<style>
    .spanUnitClass {
        font-size: 12pt;
        display: inline;
    }

    .spanMasterTitleClass {
        color: #11E1DF;
        background-color: #000000;
        font-size: 7vmin;
        font-weight: bold;
        padding: 5px;
    }

    .spanDetailTitleClass {
        font-size: 4vmin;
        font-weight: bold;
        padding: 10px;
        margin: 5px 0px;
    }

    .spanDetailNumberClass {
        font-size: 9vmin;
        font-weight: bold;
        padding: 10px;
        margin: 10px 0px;
    }

    .DetailRow {
        text-align: center;
        margin: 10px 0px;
    }

    .ColTitle {
        color: #FFFFFF;
        margin-top: -5%;
    }

    .ColRight {
        margin-right: 5px;
        background-color: #262626
    }

    .ColLeft {
        margin-left: 5px;
        background-color: #262626
    }

    .Link-bottom {
        margin: 10px;
        border-bottom: solid #FFFFFF 1px;
    }

    .Link-right {
        border-right: solid #FFFFFF 1px;
        margin-bottom: 10px;
    }
</style>

<div class="layui-card">
    <form  enctype="multipart/form-data" method="post" asp-action="RPT001" class="layui-form">
        <div class="layui-card-header" style="background-color:#404040">
            <div class="layui-form">
                <div class="layui-form-item" style="color:#FFFFFF">
                    <div class="layui-inline"><i class="fa fa-file-text-o fa-fw"></i> @ViewBag.Title</div>
                </div>
                <div class="layui-form-item layui-layout-left">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="color:#FFFFFF">查詢月份</label>
                        <div class="layui-input-inline" style="width:90px">
                            <input name="SerachData" id="SerachData" style="width:90px" class="layui-input" readonly="" value="@DateTime.Now.ToString("yyyy/MM")" />
                        </div>
                    </div>
                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit lay-filter="querysubmit">
                            <i class="layui-icon layui-icon-sm">&#xe615;</i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="layui-card-body" style="background-color:#404040">
        <div class="layui-row" style="text-align: center;">
            <div class="layui-col-md12 spanMasterTitleClass">
                <div style=" margin-top: 15px;">生產即時看板</div>
                <div style="text-align:right; font-size: 12pt;color: #FFFFFF;margin-top:-10px;">系統顯示時間:@DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss")</div>
            </div>
        </div>
        <div class="layui-row DetailRow">
            <div class="layui-col-md6">
                <div class="layui-row ColRight">
                    <div class="layui-col-md12">
                        <div class="grid-demo spanDetailTitleClass" style="color: #FDFD00;">
                            生產指標
                            <div class="Link-bottom"></div>
                        </div>
                    </div>
                    <div class="layui-col-md6 Link-right">
                        <div class="layui-col-md12 spanDetailTitleClass ColTitle">生產力</div>
                        <div class="layui-col-md12 spanDetailNumberClass" style="color: #A84CA8">
                            @Model.productiveForces
                            <p class="spanUnitClass">%</p>
                        </div>
                    </div>

                    <div class="layui-col-md6">
                        <div class="layui-col-md12 spanDetailTitleClass ColTitle">生產效率</div>
                        <div class="layui-col-md12 spanDetailNumberClass" style="color: #F4A446">
                            @Model.productivity
                            <p class="spanUnitClass">%</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-row ColLeft">
                    <div class="layui-col-md12">
                        <div class="grid-demo spanDetailTitleClass" style="color: #FDFD00;">
                            生產品質
                            <div class="Link-bottom"></div>
                        </div>
                    </div>
                    <div class="layui-col-md4 Link-right">
                        <div class="layui-col-md12 spanDetailTitleClass ColTitle">IPQC合格率</div>
                        <div class="layui-col-md12 spanDetailNumberClass" style="color: #92D050">
                            @Model.ipqc
                            <p class="spanUnitClass">%</p>
                        </div>
                    </div>
                    <div class="layui-col-md4 Link-right">
                        <div class="layui-col-md12 spanDetailTitleClass ColTitle">測試直通率</div>
                        <div class="layui-col-md12 spanDetailNumberClass" style="color: #F4A446">
                            @Model.test
                            <p class="spanUnitClass">%</p>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-col-md12 spanDetailTitleClass ColTitle">FQC合格率</div>
                        <div class="layui-col-md12 spanDetailNumberClass" style="color: #F4A446">
                            @Model.fqc
                            <p class="spanUnitClass">%</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row DetailRow">
            <div class="layui-col-md6">
                <div class="layui-row ColRight">
                    <div class="layui-col-md12">
                        <div class="grid-demo spanDetailTitleClass" style="color: #9DC3E6">
                            生產資源
                            <div class="Link-bottom"></div>
                        </div>
                    </div>
                    <div class="layui-col-md4 Link-right">
                        <div class="layui-col-md12 spanDetailTitleClass ColTitle">出勤率</div>
                        <div class="layui-col-md12 spanDetailNumberClass" style="color: #F4A446">
                            @Model.attendance
                            <p class="spanUnitClass">%</p>
                        </div>
                    </div>
                    <div class="layui-col-md4 Link-right">
                        <div class="layui-col-md12 spanDetailTitleClass ColTitle">加班工時</div>
                        <div class="layui-col-md12 spanDetailNumberClass" style="color: #FFFFFF">
                            @Model.overtime
                            <p class="spanUnitClass">H</p>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-col-md12 spanDetailTitleClass ColTitle">無效工時</div>
                        <div class="layui-col-md12 spanDetailNumberClass" style="color: #A84CA8">
                            @Model.invalidHours
                            <p class="spanUnitClass">H</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-row ColLeft">
                    <div class="layui-col-md12">
                        <div class="grid-demo spanDetailTitleClass" style="color: #9DC3E6">
                            線上資訊
                            <div class="Link-bottom"></div>
                        </div>
                    </div>
                    <div class="layui-col-md4 Link-right">
                        <div class="layui-col-md12 spanDetailTitleClass ColTitle">未結工單數</div>
                        <div class="layui-col-md12 spanDetailNumberClass" style="color: #FFFFFF">
                            @Model.openOrderWipQty
                            <p class="spanUnitClass">張</p>
                        </div>
                    </div>
                    <div class="layui-col-md4 Link-right">
                        <div class="layui-col-md12 spanDetailTitleClass ColTitle">完工入庫數</div>
                        <div class="layui-col-md12 spanDetailNumberClass" style="color: #FFFFFF">
                            @Model.finishedProducts
                            <p class="spanUnitClass">pcs</p>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-col-md12 spanDetailTitleClass ColTitle">異常工時</div>
                        <div class="layui-col-md12 spanDetailNumberClass" style="color: #92D050">
                            @Model.abnormalTime
                            <p class="spanUnitClass">H</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@section Scripts {
    <script type="text/javascript">
        layui.use(['form', 'laydate'], function () {
            var form = layui.form,
                laydate = layui.laydate

            laydate.render({
                elem: '#SerachData'
                , trigger: 'click'
                , format: 'yyyy/MM'
                , theme: 'grid'
            });
        });
    </script>
}