<template> 
 | 
    <div class="bg"> 
 | 
        <div class="bg_plan" @click="selectPlan"> 
 | 
            <div class="bg_plan_label" v-if="!from.processPlan"> 
 | 
                <span><b>*</b>工序生产计划</span> 
 | 
            </div> 
 | 
            <div class="bg_plan_nr" v-else> 
 | 
                <span>{{ from.processPlan.materialName }} | {{ from.processPlan.materialCode }} | {{ from.processPlan.produceName }}</span> 
 | 
                <span>{{ from.processPlan.batch }}{{ from.processPlan.salesOrder ? ` / ${from.processPlan.salesOrder}` : '' }}</span> 
 | 
                <span>计划时间:{{ from.processPlan.workPlanStartDate }} ~ {{ from.processPlan.workPlanEndDate }}</span> 
 | 
                <span>计划进度:{{from.processPlan.num}}/{{from.processPlan.workorderDistributNum}}{{ from.processPlan.unitName }}</span> 
 | 
            </div> 
 | 
            <div class="bg_plan_label_val"> 
 | 
                <span v-if="!from.processPlan">请选择</span> 
 | 
                <img src="@/assets/icon/ic_ar@2x.png" alt="" /> 
 | 
            </div> 
 | 
        </div> 
 | 
        <div class="bg_list"> 
 | 
            <div class="bg_list_item"> 
 | 
                <div class="bg_list_item_top"> 
 | 
                    <div class="bg_list_item_top_left"> 
 | 
                        <div class="bg_list_item_top_left_x"></div> 
 | 
                        <span>生产信息</span> 
 | 
                    </div> 
 | 
                </div> 
 | 
                <div class="bg_list_item_h"> 
 | 
                    <div class="bg_list_item_num" @click="openDev"> 
 | 
                        <div class="bg_list_item_num_item"> 
 | 
                            <span>生产设备</span> 
 | 
                            <div class="bg_list_item_num_item_sr"> 
 | 
                                <span :style="{color: from.deviceName ? '#333' : ''}">{{from.deviceName ? from.deviceName : '请选择'}}</span> 
 | 
                                <img src="@/assets/icon/ic_ar@2x.png" alt="" /> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                    <div class="bg_list_item_num" @click="userShow = true"> 
 | 
                        <div class="bg_list_item_num_item"> 
 | 
                            <span>生产人员</span> 
 | 
                            <div class="bg_list_item_num_item_sr"> 
 | 
                                <span :style="{color: from.userName ? '#333' : ''}">{{from.userName ? from.userName : '请选择'}}</span> 
 | 
                                <img src="@/assets/icon/ic_ar@2x.png" alt="" /> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                </div> 
 | 
            </div> 
 | 
            <div class="bg_list_item"> 
 | 
                <div class="bg_list_item_top"> 
 | 
                    <div class="bg_list_item_top_left"> 
 | 
                        <div class="bg_list_item_top_left_x"></div> 
 | 
                        <span>生产信息</span> 
 | 
                    </div> 
 | 
                    <div class="bg_list_item_top_right" @click="openMaterial" v-if="(hasBom == 1 && bomType != 1) || hasBom == 0"> 
 | 
                        <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" /> 
 | 
                        <span>新增投料</span> 
 | 
                    </div> 
 | 
                </div> 
 | 
                <template v-if="wuList.length > 0 && !(hasBom == 1 && bomType == 1)"> 
 | 
                    <van-swipe-cell v-for="(item, index) in wuList" :key="index"> 
 | 
                        <div class="bg_list_item_h"> 
 | 
                            <div class="bg_list_item_num"> 
 | 
                                <div class="bg_list_item_num_item"> 
 | 
                                    <div class="bg_list_item_num_item_wl"> 
 | 
                                        <span>{{ item.materialName }}{{ item.procedureName ? ` | ${item.procedureName}` : '' }}</span> 
 | 
                                        <div class="bg_list_item_num_item_wl_lx"> 
 | 
                                            <span class="green" v-if="item.qualityType == 0">合格 / </span> 
 | 
                                            <span class="yellow" v-if="item.qualityType == 1">不良 / </span> 
 | 
                                            <span class="red" v-if="item.qualityType == 2">报废 / </span> 
 | 
                                            <span>{{ item.locationName }} / </span> 
 | 
                                            <span>{{ item.batch }}</span> 
 | 
                                        </div> 
 | 
                                    </div> 
 | 
                                    <div class="bg_list_item_num_item_sr"> 
 | 
                                        <input type="number" v-model="item.num" @input="inputwl(index)" /> 
 | 
                                        <span>{{ item.unitName }}</span> 
 | 
                                    </div> 
 | 
                                </div> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                        <template #right> 
 | 
                            <van-button style="height: 100%;" @click="deleItem(index)" square text="删除" type="danger" /> 
 | 
                        </template> 
 | 
                    </van-swipe-cell> 
 | 
                </template> 
 | 
                <template v-else-if="wuList.length == 0 && !(hasBom == 1 && bomType == 1)"> 
 | 
                    <div class="kong"> 
 | 
                        <span>暂无数据</span> 
 | 
                    </div> 
 | 
                </template> 
 | 
                <div class="kong" v-if="hasBom == 1 && bomType == 1"> 
 | 
                    <span>当前工序无需投料</span> 
 | 
                </div> 
 | 
            </div> 
 | 
            <div class="bg_list_item bottomval"> 
 | 
                <div class="bg_list_item_top"> 
 | 
                    <div class="bg_list_item_top_left"> 
 | 
                        <div class="bg_list_item_top_left_x"></div> 
 | 
                        <span>产出明细</span> 
 | 
                    </div> 
 | 
                </div> 
 | 
                <div class="bg_list_item_h"> 
 | 
                    <div class="bg_list_item_num"> 
 | 
                        <div class="bg_list_item_num_item"> 
 | 
                            <span><b>*</b>良品数</span> 
 | 
                            <div class="bg_list_item_num_item_sr"> 
 | 
                                <input type="number" v-model="from.qualified" @input="changeNum(1)" placeholder="请输入" /> 
 | 
                                <span v-if="from.processPlan">{{from.processPlan.unitName}}</span> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                    <div class="bg_list_item_num"> 
 | 
                        <div class="bg_list_item_num_item"> 
 | 
                            <span>不良数</span> 
 | 
                            <div class="bg_list_item_num_item_sr"> 
 | 
                                <input type="number" v-model="from.undesirable" @input="changeNum(2)" placeholder="请输入" /> 
 | 
                                <span v-if="from.processPlan">{{from.processPlan.unitName}}</span> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                    <div class="bg_list_item_num" v-if="from.undesirable > 0"> 
 | 
                        <div class="bg_list_item_num_item" @click="openBL"> 
 | 
                            <span><b>*</b>不良项</span> 
 | 
                            <div class="bg_list_item_num_item_sr"> 
 | 
                                <span class="wulll" :style="{color: from.defectiveName ? '#305ED5' : ''}">{{from.defectiveName ? from.defectiveName : '设置'}}</span> 
 | 
                                <img src="@/assets/icon/ic_ar@2x.png" alt="" /> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                </div> 
 | 
            </div> 
 | 
            <div class="bg_plan" @click="TimeShow = true"> 
 | 
                <div class="bg_plan_label"> 
 | 
                    <span>报工时长</span> 
 | 
                </div> 
 | 
                <div class="bg_plan_label_val"> 
 | 
                    <span :style="{color: from.durationName ? '#333' : ''}">{{from.durationName ? from.durationName : '请选择'}}</span> 
 | 
                    <img src="@/assets/icon/ic_ar@2x.png" alt="" /> 
 | 
                </div> 
 | 
            </div> 
 | 
            <div class="bg_list_item" v-if="arrType && arrType.length > 0"> 
 | 
                <div class="bg_list_item_top"> 
 | 
                    <div class="bg_list_item_top_left"> 
 | 
                        <div class="bg_list_item_top_left_x"></div> 
 | 
                        <span>工资绩效</span> 
 | 
                    </div> 
 | 
                </div> 
 | 
                <div class="bg_list_item_h"> 
 | 
                    <div class="bg_list_item_num"> 
 | 
                        <div class="bg_list_item_num_item"> 
 | 
                            <span>计件方式</span> 
 | 
                            <div class="bg_list_item_num_item_list"> 
 | 
                                <div :class="item.active ? 'bg_list_item_num_item_list_item active' : 'bg_list_item_num_item_list_item'" v-for="(item, index) in arrType" :key="index" @click="clickPerformanceType(index)">{{ item.name }}</div> 
 | 
                                <!-- <div class="bg_list_item_num_item_list_item active" v-if="infoBox.type == 0">计件</div> 
 | 
                                <div class="bg_list_item_num_item_list_item active" v-if="infoBox.type == 1">计时</div> --> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                    <div class="bg_list_item_num"> 
 | 
                        <div class="bg_list_item_num_item"> 
 | 
                            <span>工资单价</span> 
 | 
                            <div class="bg_list_item_num_item_sr"> 
 | 
                                <span class="color1">{{(arrType[from.index].salary / 10 / 10).toFixed(2)}}元/{{arrType[from.index].type == 0 ? '件' : '时'}}</span> 
 | 
                                <!-- <span class="color1">{{(infoBox.salary / 10 / 10).toFixed(2)}}元/{{infoBox.type == 0 ? '件' : '时'}}</span> --> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                    <div class="bg_list_item_num"> 
 | 
                        <div class="bg_list_item_num_item"> 
 | 
                            <span>预计工资</span> 
 | 
                            <div class="bg_list_item_num_item_sr"> 
 | 
                                <span class="color1">{{expectedSalary}}元</span> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                    <div class="bg_list_item_num"> 
 | 
                        <div class="bg_list_item_num_item"> 
 | 
                            <span>达标率</span> 
 | 
                            <div class="bg_list_item_num_item_sr"> 
 | 
                                <span class="color1">{{complianceRate}}%</span> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                </div> 
 | 
            </div> 
 | 
        </div> 
 | 
        <!--  报工按钮  --> 
 | 
        <div class="bh_zw"></div> 
 | 
        <div class="bg_footer"> 
 | 
            <div class="bg_footer_submit1" @click="continueSubmit">继续报工</div> 
 | 
            <div class="bg_footer_submit" @click="submit">提交</div> 
 | 
        </div> 
 | 
        <!-- 选择不良项 --> 
 | 
        <van-popup v-model:show="show" round position="bottom"> 
 | 
            <div class="bl"> 
 | 
                <div class="bl_head"> 
 | 
                    <img src="@/assets/icon/ic_close@2x.png" style="opacity: 0;" alt="" /> 
 | 
                    <span>不良项</span> 
 | 
                    <!-- <span>确认</span> --> 
 | 
                    <img src="@/assets/icon/ic_close@2x.png" @click="show = false" alt="" /> 
 | 
                </div> 
 | 
                <div class="bl_list"> 
 | 
                    <div class="bl_list_item" v-for="(item, i) in cateList" :key="i" @click="changeChecked(i)"> 
 | 
                        <div class="bl_list_item_left"> 
 | 
                            <input type="checkbox" :checked="item.active" /> 
 | 
                            <span>{{ item.name }}</span> 
 | 
                        </div> 
 | 
                        <div class="bl_list_item_right"> 
 | 
                            <input type="number" @click.stop v-model="item.num" placeholder="0" /> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                </div> 
 | 
                <div class="bl_footer" @click="onConfirm3">确认</div> 
 | 
            </div> 
 | 
        </van-popup> 
 | 
        <!--  入库物料  --> 
 | 
        <MaterialY :show="show1" :plansId="String(plansId)" :ids="ids" :deviceId="String(deviceId)" @close="close" @value="getValue" /> 
 | 
        <!-- 设备 --> 
 | 
        <van-popup v-model:show="deviceShow" round position="bottom" :style="{ height: '50%' }"> 
 | 
            <van-picker 
 | 
                :columns="deviceList" 
 | 
                @confirm="onConfirm" 
 | 
                @cancel="onCancel" 
 | 
                :columns-field-names="customFieldName" 
 | 
            /> 
 | 
        </van-popup> 
 | 
        <!-- 人员 --> 
 | 
        <user :show="userShow" @close="onCancel1" @value="onConfirm1" /> 
 | 
        <!-- 时间 --> 
 | 
        <van-popup v-model:show="TimeShow" round position="bottom" :style="{ height: '50%' }"> 
 | 
            <van-datetime-picker 
 | 
                v-model="from.time" 
 | 
                type="time" 
 | 
                title="选择时间" 
 | 
                @confirm="onConfirm2" 
 | 
                @cancel="onCancel2" 
 | 
            /> 
 | 
        </van-popup> 
 | 
    </div> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
    import { onMounted, ref, reactive, getCurrentInstance, computed } from 'vue' 
 | 
    import { useRouter } from 'vue-router' 
 | 
    import { useStore } from 'vuex' 
 | 
    import { getDeviceByCondition, getFindAll, queryOne, queryList, autoWorkReport, getIdPlansExt, categoryExtList } from '@/apis/PlanningAPI' 
 | 
    import MaterialY from '@/components/newCom/MaterialY.vue' 
 | 
    import user from '@/components/newCom/user.vue' 
 | 
    import { Toast } from 'vant' 
 | 
  
 | 
    const {$Bus} = getCurrentInstance().appContext.config.globalProperties  
 | 
    const router = useRouter() 
 | 
    const store = useStore() 
 | 
    let show = ref(false) 
 | 
    let show1 = ref(false) 
 | 
    let TimeShow = ref(false) 
 | 
    let deviceId = ref('') 
 | 
    let plansId = ref('') 
 | 
    let ids = ref('') 
 | 
    let total: any = ref('')    // 可投数量 
 | 
  
 | 
    let from: any = reactive({ 
 | 
        processPlan: null, 
 | 
        deviceId: '', 
 | 
        deviceName: '', 
 | 
        userId: store.state.userInfo.id, 
 | 
        userName: store.state.userInfo.companyUser.name, 
 | 
        qualified: '',  // 良品数 
 | 
        undesirable: '', // 不良数 
 | 
        duration: '', 
 | 
        durationName: '0小时0分钟', 
 | 
        time: '', 
 | 
        defective: [], 
 | 
        defectiveName: '', 
 | 
        type: '',    // 绩效类型 
 | 
        index: 0 
 | 
    }) 
 | 
  
 | 
    // { name: '计件', active: false, id: 0 }, { name: '计时', active: false, id: 1 }  
 | 
    let arrType: any = ref([]) 
 | 
  
 | 
    let infoBox: any = ref(null)     // 工资绩效 
 | 
  
 | 
    let bomType: any = ref('') 
 | 
    let hasBom: any = ref('') 
 | 
    let deviceShow = ref(false) 
 | 
    let deviceList = ref([]) 
 | 
    let cateList:any = ref([]) 
 | 
    const customFieldName = { 
 | 
        text: 'name' 
 | 
    }; 
 | 
    let userShow = ref(false) 
 | 
    let wuList = ref<Array<any>>([]) 
 | 
  
 | 
    const openBL = () => { 
 | 
        cateList.value.forEach((item: any) => { 
 | 
            if (!item.active) { 
 | 
                item.num = '' 
 | 
            } 
 | 
            if (item.active && item.num <= 0) { 
 | 
                item.active = false 
 | 
            } 
 | 
        }) 
 | 
        show.value = true 
 | 
    } 
 | 
  
 | 
    // 切换绩效类型 
 | 
    const clickPerformanceType = (i: number) => { 
 | 
        from.index = i 
 | 
        arrType.value.forEach((item: any, index: number) => { 
 | 
            if (i === index) { 
 | 
                from.type = item.id 
 | 
            } 
 | 
            item.active = index === i 
 | 
        }) 
 | 
    } 
 | 
  
 | 
    // 产出数量验证 
 | 
    const changeNum = (type: number) => { 
 | 
        let num = total.value - (Number(from.qualified) + Number(from.undesirable)) 
 | 
        if (type == 2) { 
 | 
            from.defective = [] 
 | 
            from.defectiveName = '' 
 | 
        } 
 | 
        if (num < 0) { 
 | 
            Toast('产出数量不能大于可产出数量!') 
 | 
            if (type == 1) { 
 | 
                from.qualified = '' 
 | 
            } else { 
 | 
                from.undesirable = '' 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
  
 | 
    // 验证物料数量 
 | 
    const inputwl = (i: number) => { 
 | 
        if (wuList.value[i].num > wuList.value[i].total) { 
 | 
            wuList.value[i].num = '' 
 | 
            Toast('投料数量不能大于库存数量') 
 | 
        } 
 | 
    } 
 | 
  
 | 
    const changeChecked = (i: number) => { 
 | 
        cateList.value[i].active = !cateList.value[i].active 
 | 
    } 
 | 
  
 | 
    const onConfirm3 = () => { 
 | 
        let isOpen = false 
 | 
        cateList.value.forEach((item: any, index: number) => { 
 | 
            if (item.active) { 
 | 
                isOpen = true 
 | 
            } 
 | 
        }) 
 | 
        if (!isOpen) return Toast('请选择不良项') 
 | 
        let arr: any = [] 
 | 
        let total: any = 0 
 | 
        let name: any = '' 
 | 
        for (let i = 0; i < cateList.value.length; i++) { 
 | 
            if (cateList.value[i].active) { 
 | 
                if (cateList.value[i].num <= 0) { 
 | 
                    return Toast('不良数量必须大于0') 
 | 
                } 
 | 
                total = total += cateList.value[i].num 
 | 
                arr.push(cateList.value[i]) 
 | 
                name += cateList.value[i].name + cateList.value[i].num + ';' 
 | 
            } 
 | 
        } 
 | 
        // cateList.value.forEach((item: any, index: number) => { 
 | 
        //     if (item.active) { 
 | 
        //         if (item.num <= 0) { 
 | 
        //             return Toast('不良数量必须大于0') 
 | 
        //         } 
 | 
        //         total = total += item.num 
 | 
        //         arr.push(item) 
 | 
        //         name += item.name + item.num + ';' 
 | 
        //     } 
 | 
        // }) 
 | 
        if (total !== from.undesirable) return Toast('不良数必须等于产出不良数') 
 | 
        from.defective = arr 
 | 
        from.defectiveName = name 
 | 
        show.value = false 
 | 
    } 
 | 
  
 | 
    const continueSubmit = () => { 
 | 
        if (!from.processPlan) return Toast('计划不能为空') 
 | 
        if (!from.deviceId) return Toast('设备不能为空') 
 | 
        if (!from.userId) return Toast('生产人员不能为空') 
 | 
        if (hasBom.value == 1 && bomType.value == 1) { 
 | 
            console.log('不需要投料') 
 | 
        } else { 
 | 
            if (!wuList.value.length === 0) return Toast('投料不能为空') 
 | 
        } 
 | 
        if (!from.qualified && !from.undesirable) { 
 | 
            return Toast('良品数与不良数不能同时为空') 
 | 
        } 
 | 
        if (from.qualified && from.qualified <= 0) { 
 | 
            return Toast('良品数必须大于0') 
 | 
        } 
 | 
        if (from.undesirable && from.undesirable <= 0) { 
 | 
            return Toast('不良品数必须大于0') 
 | 
        } 
 | 
        // if (!from.qualified) return Toast('良品数不能为空') 
 | 
        // 有不良数 
 | 
        if (from.undesirable > 0) { 
 | 
            if (from.defective.length === 0) return Toast('不良项不能为空') 
 | 
        } 
 | 
        // if (!from.duration) return Toast('报工时长不能为空') 
 | 
        let type = '' 
 | 
        arrType.value.forEach((item: any) => { 
 | 
            if (item.active) { 
 | 
                type = item.id 
 | 
            } 
 | 
        }) 
 | 
        autoWorkReport({ 
 | 
            createWorkorderRecordDTO: { 
 | 
                type, 
 | 
                duration: from.duration, 
 | 
                qualifiedNum: from.qualified ? from.qualified : 0, 
 | 
                unQualifiedNum: from.undesirable ? from.undesirable : 0 
 | 
            }, 
 | 
            plansId: from.processPlan.id, 
 | 
            proGroupId: deviceId.value, 
 | 
            proUserList: [from.userId], 
 | 
            recordList: wuList.value.map((item: any) => { 
 | 
                return { 
 | 
                    wstockId: item.id, 
 | 
                    num: item.num 
 | 
                } 
 | 
            }), 
 | 
            createUnqualifiedDTOList: from.defective.map((item: any) => { 
 | 
                return { 
 | 
                    categoryId: item.id, 
 | 
                    unQualifiedNum: item.num 
 | 
                } 
 | 
            }) 
 | 
        }).then(res => { 
 | 
            if (res.code === 200) { 
 | 
                Toast.success({message: '报工成功!'}) 
 | 
                from.processPlan = null 
 | 
                from.deviceId = '' 
 | 
                from.deviceName = '' 
 | 
                from.userId = '' 
 | 
                from.userName = '' 
 | 
                from.qualified = '' 
 | 
                from.undesirable = '' 
 | 
                from.duration = '' 
 | 
                from.durationName = '0小时0分钟' 
 | 
                from.time = '' 
 | 
                from.defective = [] 
 | 
                from.defectiveName = '' 
 | 
                wuList.value = [] 
 | 
                deviceId.value = '' 
 | 
                plansId.value = '' 
 | 
                ids.value = '' 
 | 
                total.value = '' 
 | 
            } 
 | 
        }) 
 | 
    } 
 | 
  
 | 
    const submit = () => { 
 | 
        if (!from.processPlan) return Toast('计划不能为空') 
 | 
        if (!from.deviceId) return Toast('设备不能为空') 
 | 
        if (!from.userId) return Toast('生产人员不能为空') 
 | 
        if (hasBom.value == 1 && bomType.value == 1) { 
 | 
            console.log('不需要投料') 
 | 
        } else { 
 | 
            if (!wuList.value.length === 0) return Toast('投料不能为空') 
 | 
        } 
 | 
        if (!from.qualified && !from.undesirable) { 
 | 
            return Toast('良品数与不良数不能同时为空') 
 | 
        } 
 | 
        // if (!from.qualified) return Toast('良品数不能为空') 
 | 
        // 有不良数 
 | 
        if (from.undesirable > 0) { 
 | 
            if (from.defective.length === 0) return Toast('不良项不能为空') 
 | 
        } 
 | 
        // if (!from.duration) return Toast('报工时长不能为空') 
 | 
        let type = '' 
 | 
        arrType.value.forEach((item: any) => { 
 | 
            if (item.active) { 
 | 
                type = item.id 
 | 
            } 
 | 
        }) 
 | 
        autoWorkReport({ 
 | 
            createWorkorderRecordDTO: { 
 | 
                type, 
 | 
                duration: from.duration, 
 | 
                qualifiedNum: from.qualified ? from.qualified : 0, 
 | 
                unQualifiedNum: from.undesirable ? from.undesirable : 0 
 | 
            }, 
 | 
            plansId: from.processPlan.id, 
 | 
            proGroupId: deviceId.value, 
 | 
            proUserList: [from.userId], 
 | 
            recordList: wuList.value.map((item: any) => { 
 | 
                return { 
 | 
                    wstockId: item.id, 
 | 
                    num: item.num 
 | 
                } 
 | 
            }), 
 | 
            createUnqualifiedDTOList: from.defective.map((item: any) => { 
 | 
                return { 
 | 
                    categoryId: item.id, 
 | 
                    unQualifiedNum: item.num 
 | 
                } 
 | 
            }) 
 | 
        }).then(res => { 
 | 
            if (res.code === 200) { 
 | 
                Toast.success({message: '报工成功!'}) 
 | 
                setTimeout(() => { 
 | 
                    router.go(-1) 
 | 
                }, 2000); 
 | 
            } 
 | 
        }) 
 | 
    } 
 | 
  
 | 
    // 预计工资 
 | 
    const expectedSalary = computed(() => { 
 | 
        if (arrType.value.length === 0) return 0; 
 | 
        if (arrType.value[from.index].type == 0) { 
 | 
            if (!from.qualified) return 0 
 | 
            if (arrType.value[from.index].unqualified == 1) {   // 是否计入不良品 
 | 
                let total = Number(from.qualified) + Number(from.undesirable) 
 | 
                return (total * (arrType.value[from.index].salary / 10 / 10)).toFixed(2) 
 | 
            } else { 
 | 
                return (Number(from.qualified) * (arrType.value[from.index].salary / 10 / 10)).toFixed(2) 
 | 
            } 
 | 
        } else { 
 | 
            if (!from.duration) return 0; 
 | 
            let h = (from.duration / 60 / 60).toFixed(2) 
 | 
            return (Number(h) * (arrType.value[from.index].salary / 10 / 10)).toFixed(2) 
 | 
        } 
 | 
        // if (!infoBox.value) return 0; 
 | 
        // 按件计算 
 | 
        // if (infoBox.value.type == 0) { 
 | 
        //     if (!from.qualified) return 0 
 | 
        //     if (infoBox.value.unqualified == 1) {   // 是否计入不良品 
 | 
        //         let total = Number(from.qualified) + Number(from.undesirable) 
 | 
        //         return (total * (infoBox.value.salary / 10 / 10)).toFixed(2) 
 | 
        //     } else { 
 | 
        //         return (Number(from.qualified) * (infoBox.value.salary / 10 / 10)).toFixed(2) 
 | 
        //     } 
 | 
        // } else { 
 | 
        //     if (!from.duration) return 0; 
 | 
        //     let h = (from.duration / 60 / 60).toFixed(2) 
 | 
        //     return (Number(h) * (infoBox.value.salary / 10 / 10)).toFixed(2) 
 | 
        // } 
 | 
    }) 
 | 
  
 | 
    // 达标率 
 | 
    const complianceRate = computed(() => { 
 | 
        if (arrType.value.length === 0) return 0; 
 | 
        if (!from.qualified && !from.undesirable) return 0; 
 | 
        if (!from.duration) return 0; 
 | 
        if (!arrType.value[from.index].num) return 0; 
 | 
        // 按件计算 
 | 
        // if (infoBox.value.type == 0) { 
 | 
            if (arrType.value[from.index].unqualified == 1) {   // 是否计入不良品 
 | 
                let a = ((Number(from.qualified) + Number(from.undesirable)) / (from.duration / 3600)).toFixed(2) 
 | 
                let b = (arrType.value[from.index].num / (arrType.value[from.index].times / 3600)).toFixed(2) 
 | 
                console.log(a) 
 | 
                console.log(b) 
 | 
                return ((Number(a) / Number(b)) * 100).toFixed(2) 
 | 
                // let total = (Number(from.qualified) + Number(from.undesirable)) / ((from.duration * 60 * 60) * infoBox.value.num / ) 
 | 
                // return total * infoBox.value.salary; 
 | 
            } else { 
 | 
                let a = (from.qualified / (from.duration / 3600)).toFixed(2) 
 | 
                let b = (arrType.value[from.index].num / (arrType.value[from.index].times / 3600)).toFixed(2) 
 | 
                console.log(a) 
 | 
                console.log(b) 
 | 
                return ((Number(a) / Number(b)) * 100).toFixed(2) 
 | 
                // return Number(from.qualified) * infoBox.value.salary; 
 | 
            } 
 | 
  
 | 
        // if (!infoBox.value) return 0; 
 | 
        // if (!from.qualified && !from.undesirable) return 0; 
 | 
        // if (!from.duration) return 0; 
 | 
        // if (!infoBox.value.num) return 0; 
 | 
        // // 按件计算 
 | 
        // // if (infoBox.value.type == 0) { 
 | 
        //     if (infoBox.value.unqualified == 1) {   // 是否计入不良品 
 | 
        //         let a = ((Number(from.qualified) + Number(from.undesirable)) / (from.duration / 3600)).toFixed(2) 
 | 
        //         let b = (infoBox.value.num / (infoBox.value.times / 3600)).toFixed(2) 
 | 
        //         console.log(a) 
 | 
        //         console.log(b) 
 | 
        //         return ((Number(a) / Number(b)) * 100).toFixed(2) 
 | 
        //         // let total = (Number(from.qualified) + Number(from.undesirable)) / ((from.duration * 60 * 60) * infoBox.value.num / ) 
 | 
        //         // return total * infoBox.value.salary; 
 | 
        //     } else { 
 | 
        //         let a = (from.qualified / (from.duration / 3600)).toFixed(2) 
 | 
        //         let b = (infoBox.value.num / (infoBox.value.times / 3600)).toFixed(2) 
 | 
        //         console.log(a) 
 | 
        //         console.log(b) 
 | 
        //         return ((Number(a) / Number(b)) * 100).toFixed(2) 
 | 
        //         // return Number(from.qualified) * infoBox.value.salary; 
 | 
        //     } 
 | 
        // } else { 
 | 
        //     console.log('按时长') 
 | 
        // } 
 | 
    }) 
 | 
  
 | 
    const deleItem = (index: number) => { 
 | 
        if (wuList.value.length === 1) return Toast('至少保留一项内容') 
 | 
        wuList.value.splice(index, 1) 
 | 
    } 
 | 
    const openDev = () => { 
 | 
        if (!from.processPlan) return Toast('请先选择工序生产计划') 
 | 
        deviceShow.value = true 
 | 
    } 
 | 
    const openMaterial = () => { 
 | 
        if (!plansId.value) return Toast('请先选择工序生产计划') 
 | 
        if (!deviceId.value) return Toast('请先选择生产设备') 
 | 
        show1.value = true 
 | 
    } 
 | 
    const onConfirm1 = (e: any) => { 
 | 
        from.userId = e.userId 
 | 
        from.userName = e.name 
 | 
        userShow.value = false 
 | 
    } 
 | 
    const onConfirm2 = (e: string) => { 
 | 
        let h = Number(e.substring(0, 2)) 
 | 
        let m = Number(e.substring(3, 5)) 
 | 
        let s = 0 
 | 
        if (h > 0) { 
 | 
            s += h * 60 * 60 
 | 
        } 
 | 
        if (m > 0) { 
 | 
            s += m * 60 
 | 
        } 
 | 
        from.duration = s 
 | 
        from.durationName = `${h}小时${m}分钟` 
 | 
        TimeShow.value = false 
 | 
    } 
 | 
    const onCancel1 = () => { 
 | 
        userShow.value = false 
 | 
    } 
 | 
    const onCancel2 = () => { 
 | 
        TimeShow.value = false 
 | 
    } 
 | 
    const onConfirm = (e: any) => { 
 | 
        from.deviceId = e.id 
 | 
        from.deviceName = e.name 
 | 
        deviceId.value = e.id 
 | 
        from.userId = '' 
 | 
        from.userName = '' 
 | 
        // getFindAll({ 
 | 
        //     deviceId: e.id, 
 | 
        //     planId: from.processPlan.id 
 | 
        // }).then(res => { 
 | 
        //     if (res.code === 200) { 
 | 
        //         res.data.forEach((item: any) => { 
 | 
        //             item.name = item.umodel.name + '-' + item.tmodel.name 
 | 
        //         }) 
 | 
        //         userList.value = res.data 
 | 
        //     } 
 | 
        // }) 
 | 
        deviceShow.value = false 
 | 
    } 
 | 
    const onCancel = () => { 
 | 
        deviceShow.value = false 
 | 
    } 
 | 
  
 | 
    const selectPlan = () => { 
 | 
        router.push({ name: 'processPlans' }) 
 | 
    } 
 | 
  
 | 
    const close = () => { 
 | 
        show1.value = false 
 | 
    } 
 | 
    const getData = () => { 
 | 
        categoryExtList({ 
 | 
            cateType: "3" 
 | 
        }).then(res => { 
 | 
            if (res.code === 200) { 
 | 
                res.data.forEach((item: any) => { 
 | 
                    item.active = false 
 | 
                    item.num = '' 
 | 
                }) 
 | 
                cateList.value = res.data 
 | 
            } 
 | 
        }) 
 | 
    } 
 | 
    // 选择物料 
 | 
    const getValue = (val: any) => { 
 | 
        let obj = JSON.parse(JSON.stringify(val)) 
 | 
        obj.total = val.num 
 | 
        wuList.value.unshift(obj) 
 | 
        let arr = wuList.value.map((item: any) => item.id) 
 | 
        ids.value = arr.join(',') 
 | 
        show1.value = false 
 | 
    } 
 | 
  
 | 
    onMounted(() => { 
 | 
        getData() 
 | 
        $Bus.on('callback', (res: any)=>{ 
 | 
            from.processPlan = res 
 | 
            plansId.value = res.id 
 | 
            from.deviceId = '' 
 | 
            from.deviceName = '' 
 | 
            deviceId.value = '' 
 | 
            // from.userId = '' 
 | 
            // from.userName = '' 
 | 
            total.value = res.num - res.workorderDistributNum 
 | 
            // 获取设备 
 | 
            getDeviceByCondition({ procedureId: res.procedureId }) 
 | 
                .then(res1 => { 
 | 
                    if (res1.code === 200) { 
 | 
                        if (res1.data && res1.data.length > 0) 
 | 
                        deviceId.value = res1.data[0].id 
 | 
                        from.deviceId = res1.data[0].id 
 | 
                        from.deviceName = res1.data[0].name 
 | 
                        deviceList.value = res1.data 
 | 
                    } 
 | 
                }) 
 | 
            // 获取类型 
 | 
            getIdPlansExt(res.id) 
 | 
                .then(res2 => { 
 | 
                    if (res2.code === 200) { 
 | 
                        bomType.value = res2.data.bomType 
 | 
                        hasBom.value = res2.data.hasBom 
 | 
                    } 
 | 
                }) 
 | 
            // 获取工资绩效数据 
 | 
            queryList({ 
 | 
                deleted: 0, 
 | 
                departId: res.factoryId, 
 | 
                materialId: res.materialId, 
 | 
                procedureId: res.procedureId 
 | 
            }).then(result => { 
 | 
                if (result.code === 200) { 
 | 
                    if (result.data && result.data.length > 0) { 
 | 
                        result.data.forEach((item: any, index: number) => { 
 | 
                            item.name = item.type == 0 ? '计件' : '计时' 
 | 
                            item.id = item.type 
 | 
                            item.active = index == 0 
 | 
                        }) 
 | 
                        arrType.value = result.data 
 | 
                    } else { 
 | 
                        arrType.value = [] 
 | 
                    } 
 | 
                    // infoBox.value = result.data 
 | 
                } 
 | 
            }) 
 | 
        }) 
 | 
    }) 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
    .bg { 
 | 
        width: 100%; 
 | 
        position: absolute; 
 | 
        background: #F7F7F7; 
 | 
        .bg_plan { 
 | 
            width: 100%; 
 | 
            // height: 98px; 
 | 
            padding: 30px; 
 | 
            box-sizing: border-box; 
 | 
            background: #FFFFFF; 
 | 
            margin-bottom: 40px; 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
            justify-content: space-between; 
 | 
            span { 
 | 
                font-size: 30px; 
 | 
                font-family: PingFangSC-Regular, PingFang SC; 
 | 
                font-weight: 400; 
 | 
                color: #222222; 
 | 
                b { 
 | 
                    color: red; 
 | 
                } 
 | 
            } 
 | 
            .bg_plan_nr { 
 | 
                display: flex; 
 | 
                flex-direction: column; 
 | 
                span { 
 | 
                    font-size: 24px; 
 | 
                    font-family: PingFangSC-Regular, PingFang SC; 
 | 
                    font-weight: 400; 
 | 
                    color: #666666; 
 | 
                    margin-top: 20px; 
 | 
                    &:first-child { 
 | 
                        font-size: 32px; 
 | 
                        font-family: PingFangSC-Medium, PingFang SC; 
 | 
                        font-weight: 500; 
 | 
                        color: #333333; 
 | 
                        margin-top: 0 !important; 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
            .bg_plan_label_val { 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                span { 
 | 
                    font-size: 28px; 
 | 
                    font-family: PingFangSC-Regular, PingFang SC; 
 | 
                    font-weight: 400; 
 | 
                    color: #999999; 
 | 
                } 
 | 
                img { 
 | 
                    width: 12px; 
 | 
                    height: 24px; 
 | 
                    margin-left: 20px; 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
        .bg_list { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            flex-direction: column; 
 | 
            .bottomval { 
 | 
                margin-bottom: 20px !important; 
 | 
            } 
 | 
            .bg_list_item { 
 | 
                display: flex; 
 | 
                flex-direction: column; 
 | 
                margin-bottom: 40px; 
 | 
                .kong { 
 | 
                    text-align: center; 
 | 
                    padding: 30px 0; 
 | 
                    background: #ffffff; 
 | 
                    font-size: 25px; 
 | 
                    span { 
 | 
                        color: #474747; 
 | 
                    } 
 | 
                } 
 | 
                .bg_list_item_top { 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    justify-content: space-between; 
 | 
                    padding-left: 30px; 
 | 
                    padding-right: 30px; 
 | 
                    margin-bottom: 30px; 
 | 
                    .bg_list_item_top_left { 
 | 
                        display: flex; 
 | 
                        align-items: center; 
 | 
                        .left { 
 | 
                            margin-left: 12px; 
 | 
                            font-size: 28px; 
 | 
                        } 
 | 
                        .warning { 
 | 
                            width: 8px; 
 | 
                            height: 30px; 
 | 
                            border-radius: 2px; 
 | 
                            margin-right: 12px; 
 | 
                            background: $nav-stateColor5 !important; 
 | 
                        } 
 | 
                        .error { 
 | 
                            width: 8px; 
 | 
                            height: 30px; 
 | 
                            border-radius: 2px; 
 | 
                            margin-right: 12px; 
 | 
                            background: $nav-stateColor4 !important; 
 | 
                        } 
 | 
                        .bg_list_item_top_left_x { 
 | 
                            width: 8px; 
 | 
                            height: 30px; 
 | 
                            background: $nav-color; 
 | 
                            border-radius: 2px; 
 | 
                            margin-right: 12px; 
 | 
                        } 
 | 
                        span { 
 | 
                            font-size: 32px; 
 | 
                            font-weight: 500; 
 | 
                            color: #222222; 
 | 
                            display: flex; 
 | 
                            align-items: center; 
 | 
                        } 
 | 
                    } 
 | 
                    .bg_list_item_top_right { 
 | 
                        display: flex; 
 | 
                        align-items: center; 
 | 
                        img { 
 | 
                            width: 28px; 
 | 
                            height: 28px; 
 | 
                            margin-right: 12px; 
 | 
                        } 
 | 
                        span { 
 | 
                            font-size: 28px; 
 | 
                            font-weight: 400; 
 | 
                            color: $nav-color; 
 | 
                        } 
 | 
                    } 
 | 
                } 
 | 
                .top { 
 | 
                    margin-top: 20px !important; 
 | 
                } 
 | 
                .bg_list_item_h { 
 | 
                    width: 100%; 
 | 
                    padding: 0 30px; 
 | 
                    box-sizing: border-box; 
 | 
                    background: white; 
 | 
                    .bg_list_item_num { 
 | 
                        width: 100%; 
 | 
                        min-height: 98px; 
 | 
                        background: white; 
 | 
                        display: flex; 
 | 
                        justify-content: center; 
 | 
                        align-items: center; 
 | 
                        border-bottom: 1PX solid #E5E5E5; 
 | 
                        &:last-child { 
 | 
                            border: none !important; 
 | 
                        } 
 | 
                        .kong { 
 | 
                            text-align: center; 
 | 
                            font-size: 25px; 
 | 
                            padding: 30px 0; 
 | 
                            background: #ffffff; 
 | 
                        } 
 | 
                        .bg_list_item_num_item { 
 | 
                            width: 100%; 
 | 
                            height: 100%; 
 | 
                            display: flex; 
 | 
                            align-items: center; 
 | 
                            // height: 118px; 
 | 
                            padding: 15px 0; 
 | 
                            box-sizing: border-box; 
 | 
                            justify-content: space-between; 
 | 
                            border-bottom: 1px solid #E5E5E5; 
 | 
                            &:last-child { 
 | 
                                border: none; 
 | 
                            } 
 | 
                            .bg_list_item_num_item_list { 
 | 
                                display: flex; 
 | 
                                align-items: center; 
 | 
                                .active { 
 | 
                                    background: #305ED5 !important; 
 | 
                                    color: #FFFFFF !important; 
 | 
                                } 
 | 
                                .bg_list_item_num_item_list_item { 
 | 
                                    width: 116px; 
 | 
                                    height: 62px; 
 | 
                                    line-height: 62px; 
 | 
                                    text-align: center; 
 | 
                                    background: #F2F2F2; 
 | 
                                    border-radius: 8px; 
 | 
                                    font-size: 26px; 
 | 
                                    font-family: PingFangSC-Regular, PingFang SC; 
 | 
                                    font-weight: 400; 
 | 
                                    color: #333333; 
 | 
                                    margin-right: 20px; 
 | 
                                    &:last-child { 
 | 
                                        margin: 0 !important; 
 | 
                                    } 
 | 
                                } 
 | 
                            } 
 | 
                            .bg_list_item_num_item_wl { 
 | 
                                flex-shrink: 0; 
 | 
                                display: flex; 
 | 
                                flex-direction: column; 
 | 
                                span { 
 | 
                                    font-size: 34px; 
 | 
                                    color: #222222; 
 | 
                                } 
 | 
                                .bg_list_item_num_item_wl_lx { 
 | 
                                    margin-top: 10px; 
 | 
                                    span { 
 | 
                                        color: #222222; 
 | 
                                        font-size: 28px; 
 | 
                                    } 
 | 
                                } 
 | 
                            } 
 | 
                            .warning { 
 | 
                                color: $nav-stateColor5 !important; 
 | 
                            } 
 | 
                            .err { 
 | 
                                color: $nav-stateColor4 !important; 
 | 
                            } 
 | 
                            img { 
 | 
                                width: 12px; 
 | 
                                height: 24px; 
 | 
                                margin-left: 20px; 
 | 
                            } 
 | 
                            span { 
 | 
                                flex-shrink: 0; 
 | 
                                overflow: hidden; 
 | 
                                text-overflow: ellipsis; 
 | 
                                white-space: nowrap; 
 | 
                                b { 
 | 
                                    font-size: 30px; 
 | 
                                    color: red; 
 | 
                                    margin-right: 5px; 
 | 
                                } 
 | 
                                .warning { 
 | 
                                    color: $nav-stateColor5 !important; 
 | 
                                    margin-right: 5px; 
 | 
                                } 
 | 
                                .err { 
 | 
                                    color: $nav-stateColor4 !important; 
 | 
                                    margin-right: 5px; 
 | 
                                } 
 | 
                                &:nth-child(1) { 
 | 
                                    font-size: 30px; 
 | 
                                    font-weight: 400; 
 | 
                                    color: #222222; 
 | 
                                } 
 | 
                                &:nth-child(2) { 
 | 
                                    font-size: 28px; 
 | 
                                    font-weight: 400; 
 | 
                                    color: #333333; 
 | 
                                    flex-shrink: 0; 
 | 
                                } 
 | 
                            } 
 | 
                            .bg_list_item_num_item_sr { 
 | 
                                flex: 1; 
 | 
                                display: flex; 
 | 
                                align-items: center; 
 | 
                                justify-content: flex-end; 
 | 
                                .color1 { 
 | 
                                    font-size: 28px; 
 | 
                                    font-family: PingFangSC-Regular, PingFang SC; 
 | 
                                    font-weight: 400; 
 | 
                                    color: #333333; 
 | 
                                } 
 | 
                                input::-webkit-input-placeholder { 
 | 
                                    font-size: 28px; 
 | 
                                } 
 | 
                                input { 
 | 
                                    text-align: right; 
 | 
                                    width: 180px; 
 | 
                                    height: 60px; 
 | 
                                    border-radius: 8px; 
 | 
                                    border: 1PX solid #E5E5E5; 
 | 
                                    margin-right: 20px; 
 | 
                                    font-size: 28px; 
 | 
                                    font-weight: 400; 
 | 
                                    color: #333333; 
 | 
                                    padding: 0 30px; 
 | 
                                } 
 | 
                                .wulll { 
 | 
                                    width: 400px; 
 | 
                                    text-align: right; 
 | 
                                    overflow: hidden; 
 | 
                                    white-space: nowrap; 
 | 
                                    text-overflow: ellipsis; 
 | 
                                } 
 | 
                                span { 
 | 
                                    font-size: 28px; 
 | 
                                    font-family: PingFangSC-Regular, PingFang SC; 
 | 
                                    font-weight: 400; 
 | 
                                    color: #999999; 
 | 
                                } 
 | 
                            } 
 | 
                        } 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
        .bh_zw { 
 | 
            height: 160px; 
 | 
        } 
 | 
        .bg_footer { 
 | 
            position: fixed; 
 | 
            bottom: 0; 
 | 
            left: 0; 
 | 
            width: 100%; 
 | 
            z-index: 9; 
 | 
            padding: 0 30px 60px 30px; 
 | 
            box-sizing: border-box; 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
            justify-content: space-between; 
 | 
            .bg_footer_submit1 { 
 | 
                width: 334px; 
 | 
                height: 88px; 
 | 
                line-height: 88px; 
 | 
                text-align: center; 
 | 
                background: #FFFFFF; 
 | 
                box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.08); 
 | 
                border-radius: 8px; 
 | 
                font-size: 30px; 
 | 
                font-family: PingFangSC-Medium, PingFang SC; 
 | 
                font-weight: 500; 
 | 
                color: #305ED5; 
 | 
            } 
 | 
            .bg_footer_submit { 
 | 
                width: 334px; 
 | 
                height: 88px; 
 | 
                background: $nav-color; 
 | 
                box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08); 
 | 
                border-radius: 8px; 
 | 
                font-size: 30px; 
 | 
                font-weight: 500; 
 | 
                color: #FFFFFF; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                justify-content: center; 
 | 
            } 
 | 
        } 
 | 
        .bl { 
 | 
            width: 100%; 
 | 
            height: 800px; 
 | 
            padding: 30px; 
 | 
            box-sizing: border-box; 
 | 
            display: flex; 
 | 
            flex-direction: column; 
 | 
            .bl_head { 
 | 
                width: 100%; 
 | 
                height: 50px; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                justify-content: space-between; 
 | 
                span { 
 | 
                    font-size: 28px; 
 | 
                    color: #222222; 
 | 
                    &:nth-child(2) { 
 | 
                        font-size: 32px !important; 
 | 
                    } 
 | 
                } 
 | 
                img { 
 | 
                    width: 28px; 
 | 
                    height: 28px; 
 | 
                } 
 | 
            } 
 | 
            .bl_footer { 
 | 
                width: 100%; 
 | 
                height: 88px; 
 | 
                line-height: 88px; 
 | 
                text-align: center; 
 | 
                background: #305ED5; 
 | 
                border-radius: 8px; 
 | 
                font-size: 32px; 
 | 
                font-family: PingFangSC-Medium, PingFang SC; 
 | 
                font-weight: 500; 
 | 
                color: #FFFFFF; 
 | 
                margin-top: 30px; 
 | 
            } 
 | 
            .bl_list { 
 | 
                width: 100%; 
 | 
                height: calc(100% - 168px); 
 | 
                overflow-y: scroll; 
 | 
                margin-top: 30px; 
 | 
                .bl_list_item { 
 | 
                    width: 100%; 
 | 
                    height: 96px; 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    justify-content: space-between; 
 | 
                    border-bottom: 1PX solid #E5E5E5; 
 | 
                    &:last-child { 
 | 
                        border: none !important; 
 | 
                    } 
 | 
                    .bl_list_item_left { 
 | 
                        flex: 1; 
 | 
                        display: flex; 
 | 
                        align-items: center; 
 | 
                        input { 
 | 
                            width: 30px; 
 | 
                            height: 30px; 
 | 
                            border: 1PX solid #CCCCCC; 
 | 
                            margin: 0 !important; 
 | 
                        } 
 | 
                        span { 
 | 
                            font-size: 30px; 
 | 
                            color: #222222; 
 | 
                            margin-left: 10px; 
 | 
                        } 
 | 
                    } 
 | 
                    .bl_list_item_right { 
 | 
                        flex: 1; 
 | 
                        height: 50px; 
 | 
                        text-align: right; 
 | 
                        input { 
 | 
                            padding-left: 5px; 
 | 
                            width: 160px; 
 | 
                            height: 100%; 
 | 
                            padding: 0 30px; 
 | 
                            box-sizing: border-box; 
 | 
                            text-align: right; 
 | 
                            font-size: 28px; 
 | 
                            color: #333333; 
 | 
                            border-radius: 10px; 
 | 
                            border: 1PX solid #CCCCCC; 
 | 
                            &::-webkit-input-placeholder { 
 | 
                                font-size: 28px; 
 | 
                                font-family: PingFangSC-Regular, PingFang SC; 
 | 
                                font-weight: 400; 
 | 
                                color: #999999; 
 | 
                            } 
 | 
                        } 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</style> 
 |