@layout("/common/_container.html",{js:["/assets/modular/kb/formula/formulaView.js"]}){

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm3 layui-col-md3 layui-col-lg3">
            <div class="layui-card">
                <div class="layui-card-header" style="font-weight: bold">
                    <i class="layui-icon layui-icon-rate-solid"></i>工位配置
                </div>
                <div class="layui-card-body">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <div class="layui-col-md12">
                                <div class="layui-inline">
                                    产 线 编 号:
                                </div>
                                <div class="layui-inline">
                                    <select id="lineCode" lay-verify="lineCode">
                                    </select>
                                </div>
                            </div>
                            <div class="layui-col-md12">
                                <div class="layui-inline">
                                    工 位 编 码:
                                </div>
                                <div class="layui-inline">
                                    <select id="locationCode" lay-verify="locationCode">
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header" style="font-weight: bold">
                    <i class="layui-icon layui-icon-rate-solid"></i>工单信息
                </div>
                <div class="layui-card-body">
                    <div class="orderInfo">
                        <span>工单编号</span>
                        <span class="mySpan" style="float: right" id="workOrder"></span>
                    </div>
                    <div class="orderInfo">
                        <span>订单编号</span>
                        <span class="mySpan" style="float: right" id="salesOrderCode"></span>
                    </div>
                    <div class="orderInfo">
                        <span>产品编号</span>
                        <span class="mySpan" style="float: right" id="productCode"></span>
                    </div>
                    <div class="orderInfo">
                        <span>产品名称</span>
                        <span class="mySpan" style="float: right" id="productName"></span>
                    </div>
                    <div class="orderInfo">
                        <span>计划数量</span>
                        <span class="mySpan" style="float: right" id="planQty"></span>
                    </div>
                    <div class="orderInfo">
                        <span>计划开始时间</span>
                        <span class="mySpan" style="float: right" id="planStartTime"></span>
                    </div>
                    <div class="orderInfo">
                        <span>计划结束时间</span>
                        <span class="mySpan" style="float: right" id="planEndTime"></span>
                    </div>
                    <hr class="layui-border-orange">
<!--                    <span>PLC交互点</span>-->
                    <div class="container">
                        <input type="radio" id="sex1" name="sex1" value="nan1" title="男">
                        <span>系统就绪</span>
                        <input style="margin-left: 150px" type="radio" name="sex" value="nan" title="男">
                        <span>工件到位</span>
                    </div>
                    <div class="container">
                        <input type="radio" name="sex" value="nan" title="男">
                        <span>读取条码</span>
                        <input style="margin-left: 150px" type="radio" name="sex" value="nan" title="男">
                        <span>下发机型</span>
                    </div>
                    <div class="container">
                        <input type="radio" name="sex" value="nan" title="男">
                        <span>允许启动</span>
                        <input style="margin-left: 150px" type="radio" name="sex" value="nan" title="男">
                        <span>不允许启动</span>
                    </div>
                    <div class="container">
                        <input type="radio" name="sex" value="nan" title="男">
                        <span>合格完成</span>
                        <input style="margin-left: 150px" type="radio" name="sex" value="nan" title="男">
                        <span>不合格完成</span>
                    </div>
                    <div class="container">
                        <input type="radio" name="sex" value="nan" title="男">
                        <span>保存完成</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm9 layui-col-md9 layui-col-lg9">
            <div class="layui-card" style="height: 577px">
                <div class="layui-card-header" style="font-weight: bold">
                    <i class="layui-icon layui-icon-rate-solid"></i>操作栏
                </div>
                <div class="layui-card-body">
                    <div class="layui-tab" lay-filter="test">
                        <ul class="layui-tab-title">
                            <li class="layui-this" lay-id="11">首页</li>
                            <li lay-id="22">工序状态</li>
                            <li lay-id="33">装配采集清单</li>
                            <li lay-id="44">工艺参数</li>
                            <li lay-id="55">不合格质量数据</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项
                            </div>
                            <div class="layui-tab-item">内容2</div>
                            <div class="layui-tab-item">内容3</div>
                            <div class="layui-tab-item">内容4</div>
                            <div class="layui-tab-item">内容5</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .orderInfo {
        margin-bottom: 5px;  /* 设置换行后的下边距 */
    }
    .container {
        display: flex; /* 使用 Flex 布局 */
        align-items: center; /* 将子元素垂直居中对齐 */
    }
</style>
@}