羚羊配置

Mr.Zhang

2023-10-16 ecfafad4fa4abff5be9d1d132a22a708a587e013

 h5_standard/src/views/workOrder/workOrderReporting.vue

@@ -1,9 +1,9 @@
<template>
    <div class="bg">
        <!--  工单信息  -->
        <V-WorkOrderInfo :info="info"></V-WorkOrderInfo>
        <!--  扫码投料/产出  -->
        <!-- <div class="details_cz">
  <div class="bg">
    <!--  工单信息  -->
    <V-WorkOrderInfo :info="info"></V-WorkOrderInfo>
    <!--  扫码投料/产出  -->
    <!-- <div class="details_cz">
            <div class="details_cz_smtl" @click="jump1('tl')" v-if="proxy.$auth('h5:workorderinput:create')">
                <img src="@/assets/icon/gongdan_ic_saoma@2x.png" alt="" />
                <span>扫码投料</span>
@@ -14,168 +14,182 @@
                <span>扫码产出</span>
            </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>
                        <!-- <span class="blue left">{{tlTotal()}}</span> -->
    <div class="bg_cate">
      <div @click="clickIten(index)" :class="typeView == index ? 'bg_cate_item active' : 'bg_cate_item'"
        v-for="(item, index) in cate" :key="index">{{ item.name }}</div>
    </div>
    <!--  投料明细/合格产出明细/不良产出明细  -->
    <div class="bg_list" v-if="typeView === 0">
      <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>
            <!-- <span class="blue left">{{tlTotal()}}</span> -->
          </div>
          <div class="bg_list_item_top_right" @click="jumpTL"
            v-if="proxy.$auth('h5:workorderinput:create') && (info.bomType !== 1 || info.bomType == 0 || !info.bomType)">
            <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" />
            <span>手动录入</span>
          </div>
        </div>
        <template v-if="feedingData && feedingData.length > 0">
          <van-swipe-cell v-for="(item, index) in feedingData" :key="index">
            <div class="bg_list_item_h">
              <div class="bg_list_item_num">
                <div class="bg_list_item_num_item">
                  <!-- <span>{{item.code}}</span> -->
                  <div class="bg_list_item_num_item_wl">
                    <span> {{ item.materialName }}{{ item.procedureName ? `&nbsp;|&nbsp;${item.procedureName}` : ''
                    }}</span>
                    <div class="bg_list_item_num_item_wl_lx">
                      <span class="green" v-if="item.qualityType == 0">合格&nbsp;/&nbsp;</span>
                      <span class="yellow" v-if="item.qualityType == 1">不良&nbsp;/&nbsp;</span>
                      <span class="red" v-if="item.qualityType == 2">报废&nbsp;/&nbsp;</span>
                      <span>{{ item.locationName }}</span>
                      <span>{{ item.batch ? `&nbsp;/&nbsp;${item.batch}` : '' }}</span>
                    </div>
                    <div class="bg_list_item_top_right" @click="jumpTL" v-if="proxy.$auth('h5:workorderinput:create') && (info.bomType !== 1 || info.bomType == 0 || !info.bomType)">
                        <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" />
                        <span>手动录入</span>
                    </div>
                  </div>
                  <div class="bg_list_item_num_item_sr">
                    <input v-model="item.num" :disabled="!proxy.$auth('h5:workorderinput:update')"
                      @blur="change(item.id, item.num, 'T', item.maxNum, item, item.unitAttribute)" type="number" />
                    <span>{{ item.unitName }}</span>
                  </div>
                </div>
                <template v-if="feedingData && feedingData.length > 0">
                    <van-swipe-cell v-for="(item, index) in feedingData" :key="index">
                        <div class="bg_list_item_h">
                            <div class="bg_list_item_num">
                                <div class="bg_list_item_num_item">
                                    <!-- <span>{{item.code}}</span> -->
                                    <div class="bg_list_item_num_item_wl">
                                        <span> {{ item.materialName }}{{ item.procedureName ? `&nbsp;|&nbsp;${item.procedureName}` : '' }}</span>
                                        <div class="bg_list_item_num_item_wl_lx">
                                            <span class="green" v-if="item.qualityType == 0">合格&nbsp;/&nbsp;</span>
                                            <span class="yellow" v-if="item.qualityType == 1">不良&nbsp;/&nbsp;</span>
                                            <span class="red" v-if="item.qualityType == 2">报废&nbsp;/&nbsp;</span>
                                            <span>{{ item.locationName }}</span>
                                            <span>{{ item.batch ? `&nbsp;/&nbsp;${item.batch}` : '' }}</span>
                                        </div>
                                    </div>
                                    <div class="bg_list_item_num_item_sr">
                                        <input v-model="item.num" :disabled="!proxy.$auth('h5:workorderinput:update')" @blur="change(item.id, item.num, 'T', item.maxNum, item, item.unitAttribute)" type="number" />
                                        <span>{{item.unitName}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <template #right v-if="proxy.$auth('h5:workorderinput:delete')">
                            <van-button style="height: 100%;" square text="删除" @click="deleItem(item.id, 'T')" type="danger" />
                        </template>
                    </van-swipe-cell>
                </template>
                <template v-else>
                    <div class="kong">
                        <span>暂无数据</span>
                    </div>
                </template>
              </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>

            <template #right v-if="proxy.$auth('h5:workorderinput:delete')">
              <van-button style="height: 100%;" square text="删除" @click="deleItem(item.id, 'T')" type="danger" />
            </template>
          </van-swipe-cell>
        </template>
        <template v-else>
          <div class="kong">
            <span>暂无数据</span>
          </div>
        </template>
      </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>
        <!-- <template v-if="produceData && produceData.length > 0"> -->
        <!-- v-for="(item, index) in produceData" :key="index" -->
        <van-swipe-cell>
          <div class="bg_list_item_h">
            <div class="bg_list_item_num">
              <div class="bg_list_item_num_item">
                <span>良品数({{ info.umodel ? info.umodel.name : '' }})</span>
                <div class="bg_list_item_num_item_sr">
                  <!-- :disabled="!proxy.$auth('h5:workorderoutput:update')" -->
                  <!-- @blur="change(item.id, item.num, 'C', item.maxNum, item)" -->
                  <input type="number" v-model="produceFrom.qualified"
                    @blur="changeCC('0', produceFrom.qualified, produceFrom.qualifiedId)" placeholder="请输入" />
                  <span v-if="info.umodel">{{ info.umodel.name }}</span>
                </div>
                <!-- <template v-if="produceData && produceData.length > 0"> -->
                    <!-- v-for="(item, index) in produceData" :key="index" -->
                    <van-swipe-cell>
                        <div class="bg_list_item_h">
                            <div class="bg_list_item_num">
                                <div class="bg_list_item_num_item">
                                    <span>良品数({{ info.umodel ? info.umodel.name : '' }})</span>
                                    <div class="bg_list_item_num_item_sr">
                                        <!-- :disabled="!proxy.$auth('h5:workorderoutput:update')" -->
                                        <!-- @blur="change(item.id, item.num, 'C', item.maxNum, item)" -->
                                        <input type="number" v-model="produceFrom.qualified" @blur="changeCC('0', produceFrom.qualified, produceFrom.qualifiedId)" placeholder="请输入" />
                                        <span v-if="info.umodel">{{info.umodel.name}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-swipe-cell>
                    <van-swipe-cell>
                        <div class="bg_list_item_h">
                            <div class="bg_list_item_num">
                                <!-- @blur="change(item.id, item.num, 'C', item.maxNum, item)" -->
                                <div class="bg_list_item_num_item">
                                    <span>不良数({{ info.umodel ? info.umodel.name : '' }})</span>
                                    <div class="bg_list_item_num_item_sr">
                                        <!-- :disabled="!proxy.$auth('h5:workorderoutput:update')" -->
                                        <!-- @blur="change(item.id, item.num, 'C', item.maxNum, item)" -->
                                        <input type="number" v-model="produceFrom.undesirable" @blur="changeCC('1', produceFrom.undesirable, produceFrom.undesirableId)" placeholder="请输入" />
                                        <span v-if="info.umodel">{{info.umodel.name}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-swipe-cell>
                    <van-swipe-cell v-if="produceFrom.undesirable > 0">
                        <div class="bg_list_item_h">
                            <div class="bg_list_item_num">
                                <div class="bg_list_item_num_item" @click="show = true">
                                    <span>不良项</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>
                    </van-swipe-cell>
                <!-- </template>
                <template v-else>
                    <div class="kong">
                        <span>暂无数据</span>
                    </div>
                </template> -->
              </div>
            </div>
            <div class="bg_plan" @click="TimeShow = true">
                <div class="bg_plan_label">
                    <span><b>*</b>报工时长</span>
          </div>
        </van-swipe-cell>
        <van-swipe-cell>
          <div class="bg_list_item_h">
            <div class="bg_list_item_num">
              <!-- @blur="change(item.id, item.num, 'C', item.maxNum, item)" -->
              <div class="bg_list_item_num_item">
                <span>不良数({{ info.umodel ? info.umodel.name : '' }})</span>
                <div class="bg_list_item_num_item_sr">
                  <!-- :disabled="!proxy.$auth('h5:workorderoutput:update')" -->
                  <!-- @blur="change(item.id, item.num, 'C', item.maxNum, item)" -->
                  <input type="number" v-model="produceFrom.undesirable"
                    @blur="changeCC('1', produceFrom.undesirable, produceFrom.undesirableId)" placeholder="请输入" />
                  <span v-if="info.umodel">{{ info.umodel.name }}</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>
            <div class="bg_list_item" v-if="infoBox">
                <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>
        </van-swipe-cell>
        <van-swipe-cell v-if="produceFrom.undesirable > 0">
          <div class="bg_list_item_h">
            <div class="bg_list_item_num">
              <div class="bg_list_item_num_item" @click="show = true">
                <span>不良项</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 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="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">{{infoBox.salary / 100}}元/{{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="bg_list_item">
          </div>
        </van-swipe-cell>
        <!-- </template>
                    <template v-else>
                        <div class="kong">
                            <span>暂无数据</span>
                        </div>
                    </template> -->
      </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 / 100}}元/{{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 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>
@@ -271,9 +285,9 @@
                    </div>
                </template>
            </div> -->
        </div>
        <div class="details_dj">
            <div class="details_dj_title">
    </div>
    <div class="details_dj" v-if="typeView === 1">
      <!-- <div class="details_dj_title">
                <div class="details_dj_title_left">
                    <div class="details_x"></div>
                    <span>生产点检</span>
@@ -282,1591 +296,1806 @@
                    <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" />
                    <span>手动录入</span>
                </div>
            </div> -->
      <div class="details_dj_list">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了~" @load="pageDJs">
          <van-swipe-cell v-for="(item, index) in djData" :key="index">
            <div class="details_dj_list_item">
              <span>{{ item.attrName }}：{{ item.val }}</span>
              <span>{{ item.userName }} {{ item.createTime }}</span>
            </div>
            <div class="details_dj_list">
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了~"
                    @load="pageDJs">
                    <van-swipe-cell v-for="(item, index) in djData" :key="index">
                        <div class="details_dj_list_item">
                            <span>{{item.attrName}}：{{item.val}}</span>
                            <span>{{item.userName}} {{item.createTime}}</span>
                        </div>
                        <template #right>
                            <van-button square type="danger" style="height: 100%;" @click="dele(item.id)" text="删除" />
                        </template>
                    </van-swipe-cell>
                </van-list>
            </div>
        </div>
        <!--  报工按钮  -->
        <template v-if="info.status === 2 || info.procedureNeedcheck === 1">
            <div class="bh_zw"></div>
            <div class="bg_footer">
                <div class="bg_footer_submit" @click="submit">确认报工</div>
            </div>
        </template>
        <!--  扫码组件  -->
        <v-ScanCode
            :openCode="openCode"
            :infos="['请扫描工装码']"
            @closePopup="closePopup"
            @onDecode="onDecode" />
        <!--  报工统计数据  -->
        <van-popup v-model:show="statistics" round :closeable="true" position="bottom" :style="{ height: '53%' }">
            <div class="tg">
                <div class="tg_header">请确认报工信息</div>
                <div class="tg_table">
                    <div class="tg_table_header">
                        <div class="tg_table_header_item">类型</div>
                        <div class="tg_table_header_item">物料名称</div>
                        <!-- <div class="tg_table_header_item">工装数量</div> -->
                        <div class="tg_table_header_item">物料数量</div>
                    </div>
                    <div class="nr" v-if="statisticsData.length > 0">
                        <div class="tg_table_nr" v-for="(item, index) in statisticsData" :key="index">
                            <div class="tg_table_nr_item">{{item.name}}</div>
                            <div class="tg_table_nr_item">{{item.materialName}}</div>
                            <!-- <div class="tg_table_nr_item">{{item.gznum}}</div> -->
                            <div class="tg_table_nr_item" :style="item.name === '工单未投料' ? 'color: #DE5243' : ''">{{item.num}}</div>
                        </div>
                    </div>
                    <div class="nr" v-else>
                        <div class="tg_table_nr">
                            <div class="tg_table_nr_item1">暂无数据</div>
                        </div>
                    </div>
                </div>
                <div class="tg_footer">
                    <button class="tg_footer_qr" @click="submitBG" v-if="proxy.$auth('h5:workorderoutput:confirm') && isSubmit">确认报工</button>
                    <div class="tg_footer_fh" @click="gofh" v-else-if="!isSubmit">返回修改</div>
                </div>
            </div>
        </van-popup>
        <!-- 时间 -->
        <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>
        <!-- 选择不良项 -->
        <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>
            <template #right>
              <van-button square type="danger" style="height: 100%;" @click="dele(item.id)" text="删除" />
            </template>
          </van-swipe-cell>
        </van-list>
      </div>
    </div>
    <!--  报工按钮  -->
    <template v-if="info.status === 2 || info.procedureNeedcheck === 1">
      <div class="bh_zw"></div>
      <div class="bg_footer">
        <div class="bg_footer_submit" v-if="typeView == 0" @click="submit">确认报工</div>
        <!-- proxy.$auth('h5:workorder:processRecord') &&  -->
        <div class="bg_footer_submit1" @click="jumpdj" v-if="typeView == 1">
          <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" />
          <span>新增点检</span>
        </div>
      </div>
    </template>
    <!--  扫码组件  -->
    <v-ScanCode :openCode="openCode" :infos="['请扫描工装码']" @closePopup="closePopup" @onDecode="onDecode" />
    <!--  报工统计数据  -->
    <van-popup v-model:show="statistics" round :closeable="true" position="bottom">
      <div class="tg">
        <div class="tg_header">请确认报工信息</div>
        <div class="tg_table">
          <div class="tg_table_header">
            <div class="tg_table_header_item">类型</div>
            <div class="tg_table_header_item">物料名称</div>
            <!-- <div class="tg_table_header_item">工装数量</div> -->
            <div class="tg_table_header_item">物料数量</div>
          </div>
          <div class="nr" v-if="statisticsData.length > 0">
            <div class="tg_table_nr" v-for="(item, index) in statisticsData" :key="index">
              <div class="tg_table_nr_item">{{ item.name }}</div>
              <div class="tg_table_nr_item">{{ item.materialName }}</div>
              <!-- <div class="tg_table_nr_item">{{item.gznum}}</div> -->
              <div class="tg_table_nr_item" :style="item.name === '工单未投料' ? 'color: #DE5243' : ''">{{ item.num }}</div>
            </div>
          </div>
          <div class="nr" v-else>
            <div class="tg_table_nr">
              <div class="tg_table_nr_item1">暂无数据</div>
            </div>
          </div>
        </div>
        <div class="tg_footer">
          <button class="tg_footer_qr" @click="submitBG"
            v-if="proxy.$auth('h5:workorderoutput:confirm') && isSubmit">确认报工</button>
          <div class="tg_footer_fh" @click="gofh" v-else-if="!isSubmit">返回修改</div>
        </div>
      </div>
    </van-popup>
    <!-- 时间 -->
    <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>
    <!-- 选择不良项 -->
    <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>
  </div>
</template>

<script setup lang="ts">
    import { getCurrentInstance, nextTick, onMounted, ref, reactive, computed } from 'vue'
    import { useRouter, useRoute } from "vue-router"
    import { Dialog, Toast } from 'vant'
    import { REGULAR } from '@/utils/utils'
    import { categoryExtList, queryOne } from '@/apis/PlanningAPI'
    import {
        getBarcodeContent,
        queryById,
        getOrocessRecord,
        deleteCT,
        updateById,
        comfirmDone,
        comfirmDoneStandard,
        getListByCondition,
        allForStandard,
        pageDJ,
        deletedj,
        dealWorkorderRecordStandard,
        getWorkorderRecordListStandard
    } from '@/apis/WorkOrderAPI'
    import { QRCodeType } from '@/enum'
    const { proxy }: any = getCurrentInstance()
    import VWorkOrderInfo from '@/components/common/WorkOrderInfo.vue'
import { getCurrentInstance, nextTick, onMounted, ref, reactive, computed, onActivated } from 'vue'
import { useRouter, useRoute } from "vue-router"
import { Dialog, Toast } from 'vant'
import { REGULAR } from '@/utils/utils'
import { categoryExtList, queryOne, queryList } from '@/apis/PlanningAPI'
import {
  getBarcodeContent,
  queryById,
  getOrocessRecord,
  deleteCT,
  updateById,
  comfirmDone,
  comfirmDoneStandard,
  getListByCondition,
  allForStandard,
  pageDJ,
  deletedj,
  dealWorkorderRecordStandard,
  getWorkorderRecordListStandard
} from '@/apis/WorkOrderAPI'
import { QRCodeType } from '@/enum'
const { proxy }: any = getCurrentInstance()
const { $Bus } = getCurrentInstance().appContext.config.globalProperties
import VWorkOrderInfo from '@/components/common/WorkOrderInfo.vue'

    const router = useRouter()
    const route = useRoute()
const router = useRouter()
const route = useRoute()

    let TimeShow = ref(false)
let TimeShow = ref(false)

    let from: any = reactive({
        time: '',
        defective: [],
        defectiveName: ''
let from: any = reactive({
  time: '',
  defective: [],
  defectiveName: '',
  durationName: '0小时0分钟',
  duration: 0,
  index: 0
})

let cate = ref([{ name: '生产' }, { name: '点检' }])
let typeView = ref(0)

const clickIten = (i: number) => {
  typeView.value = i
  if (i === 1) {
    finished.value = false
    page.capacity = 1
    pageDJs()
  }
}

// 预计工资
const expectedSalary = computed(() => {
  if (arrType.value.length === 0) return 0;
  // 按件计算
  if (arrType.value[from.index].type == 0) {
    if (!produceFrom.qualified) return 0
    if (arrType.value[from.index].unqualified == 1) {   // 是否计入不良品
      let total = Number(produceFrom.qualified) + Number(produceFrom.undesirable)
      return (total * (arrType.value[from.index].salary / 100)).toFixed(2) || 0
    } else {
      return (Number(produceFrom.qualified) * (arrType.value[from.index].salary / 100)).toFixed(2) || 0
    }
  } 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) || 0
  }
})

// 达标率
const complianceRate = computed(() => {
  if (arrType.value.length === 0) return 0;
  if (!produceFrom.qualified && !produceFrom.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(produceFrom.qualified) + Number(produceFrom.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 = (produceFrom.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;
  }
  // } else {
  //     console.log('按时长')
  // }
})

const loading = ref(false);
const finished = ref(false);
let show = ref(false)
// 点检数据
let djData: any = ref([])
// 分页查询数据
let page = reactive({
  capacity: 10,
  page: 0
})

let infoBox: any = ref(null)     // 工资绩效

// 产出合格/不良
let produceFrom: any = reactive({
  qualifiedId: '',
  qualified: '',  // 合格
  undesirableId: '',
  undesirable: '' // 不良
})

let cateList: any = ref([])  // 不良项

// 详情数据
const info: any = ref({})

// 判断是否能提交
let isSubmit: any = ref<boolean>(false)

// 不良明细
let undesirable: any = ref([])

// 报废明细
let scrap: any = ref([])

// 扫码类型
let type: any = ref('')

let arrType: any = ref([])

// 统计数据
let statisticsData: any = ref([
  // {
  //     name: '工单投料',
  //     materialName: '黄沙',
  //     num: 0
  // },
  // {
  //     name: '工单合格产出',
  //     materialName: '黄沙',
  //     num: 0
  // },
  // {
  //     name: '工单不良产出',
  //     materialName: '黄沙',
  //     num: 0
  // },
  // {
  //     name: '工单未投料',
  //     materialName: '黄沙',
  //     num: 0
  // }
])

// 投料数据
const feedingData: any = ref([])

// 产出数据
const produceData: any = ref([])

// 控制扫码显示隐藏
const openCode = ref<boolean>(false)

// 控制报工统计
const statistics = ref<boolean>(false)

const changeChecked = (i: number) => {
  cateList.value[i].active = !cateList.value[i].active
}

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 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 onCancel2 = () => {
  TimeShow.value = false
}

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 = ''
  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 !== produceFrom.undesirable) return Toast('不良数必须等于产出不良数')
  from.defective = arr
  from.defectiveName = name
  show.value = false
}

// 投料统计
const tlTotal = (): string => {
  if (feedingData.value.length > 0) {
    let total: number = 0
    feedingData.value.forEach((element: any) => {
      total = total + element.num
    })
    return `${total}`
  }
  return ''
}

    // 预计工资
    const expectedSalary = computed(() => {
        if (!infoBox.value) return 0;
        // 按件计算
        if (infoBox.value.type == 0) {
            if (!produceFrom.qualified) return 0
            if (infoBox.value.unqualified == 1) {   // 是否计入不良品
                let total = Number(produceFrom.qualified) + Number(produceFrom.undesirable)
                return (total * (infoBox.value.salary / 100)).toFixed(2) || 0
            } else {
                return (Number(produceFrom.qualified) * (infoBox.value.salary / 100)).toFixed(2) || 0
            }
        } else {
            if (!from.duration) return 0;
            let h = (from.duration / 60 / 60).toFixed(2)
            return (Number(h) * (infoBox.value.salary / 10 / 10)).toFixed(2) || 0
        }
    })

    // 达标率
    const complianceRate = computed(() => {
        if (!infoBox.value) return 0;
        if (!produceFrom.qualified && !produceFrom.undesirable) return 0;
        if (!from.duration) return 0;
        // 按件计算
        // if (infoBox.value.type == 0) {
            if (infoBox.value.unqualified == 1) {   // 是否计入不良品
                let a = ((Number(from.qualified) + Number(from.undesirable)) / (from.duration / 60 / 60)).toFixed(2)
                let b = (infoBox.value.num / (infoBox.value.times / 60 / 60)).toFixed(2)
                console.log(a)
                console.log(b)
                return (Number(a) / Number(b)).toFixed(2) || 0
                // let total = (Number(from.qualified) + Number(from.undesirable)) / ((from.duration * 60 * 60) * infoBox.value.num / )
                // return total * infoBox.value.salary;
            } else {
                let a = (produceFrom.qualified / (from.duration / 60 / 60)).toFixed(2)
                let b = (infoBox.value.num / (infoBox.value.times / 60 / 60)).toFixed(2)
                console.log(a)
                console.log(b)
                return (Number(a) / Number(b)).toFixed(2) || 0
                // return Number(from.qualified) * infoBox.value.salary;
            }
        // } else {
        //     console.log('按时长')
        // }
    })

    const loading = ref(false);
    const finished = ref(false);
    let show = ref(false)
    // 点检数据
    let djData: any = ref([])
    // 分页查询数据
    let page = reactive({
        capacity: 10,
        page: 0
    })

    let infoBox: any = ref(null)     // 工资绩效

    // 产出合格/不良
    let produceFrom: any = reactive({
        qualifiedId: '',
        qualified: '',  // 合格
        undesirableId: '',
        undesirable: '' // 不良
    })

    let cateList:any = ref([])  // 不良项

    // 详情数据
    const info: any = ref({})

    // 判断是否能提交
    let isSubmit: any = ref<boolean>(false)

    // 不良明细
    let undesirable: any = ref([])

    // 报废明细
    let scrap: any = ref([])

    // 扫码类型
    let type: any = ref('')

    // 统计数据
    let statisticsData: any = ref([
        // {
        //     name: '工单投料',
        //     materialName: '黄沙',
        //     num: 0
        // },
        // {
        //     name: '工单合格产出',
        //     materialName: '黄沙',
        //     num: 0
        // },
        // {
        //     name: '工单不良产出',
        //     materialName: '黄沙',
        //     num: 0
        // },
        // {
        //     name: '工单未投料',
        //     materialName: '黄沙',
        //     num: 0
        // }
    ])

    // 投料数据
    const feedingData: any = ref([])

    // 产出数据
    const produceData: any = ref([])

    // 控制扫码显示隐藏
    const openCode = ref<boolean>(false)

    // 控制报工统计
    const statistics = ref<boolean>(false)

    const changeChecked = (i: number) => {
        cateList.value[i].active = !cateList.value[i].active
// 修改产出
const changeCC = (downType: string, num: number, recordId: string) => {
  if (!num) return
  if ((produceFrom.qualified + produceFrom.undesirable) > info.value.planNum) {
    return Toast.fail({ message: '产出数量不能大于计划数量', duration: 2000 })
  }
  if (num >= 0) {
    from.defective = []
    from.defectiveName = ''
    // dealWorkorderRecordStandard({
    //     downType, num, recordId, workorderId: route.query.id
    // }).then(res => {
    //     if (res.code === 200) {
    //         getOrocessRecordCC()
    //     }
    // })
  } else {
    if (downType == 0) {
      produceFrom.qualified = 0
    } else {
      produceFrom.undesirable = 0
    }
    Toast.fail({ message: '产出数量不能小于0', duration: 2000 })
  }
}

    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 jumpdj = () => {
  router.push({ name: 'spotCheck', query: { id: route.query.id } })
}

    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 onCancel2 = () => {
        TimeShow.value = false
    }

    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 = ''
        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 !== produceFrom.undesirable) return Toast('不良数必须等于产出不良数')
        from.defective = arr
        from.defectiveName = name
        show.value = false
    }

    // 投料统计
    const tlTotal = (): string => {
        if (feedingData.value.length > 0) {
            let total: number = 0
            feedingData.value.forEach((element: any) => {
                total = total + element.num
            })
            return `${total}`
        }
        return ''
    }

    // 修改产出
    const changeCC = (downType: string, num: number, recordId: string) => {
        if (!num) return
        if ((produceFrom.qualified + produceFrom.undesirable) > info.value.planNum) {
            return Toast.fail({ message: '产出数量不能大于计划数量', duration: 2000 })
        }
        if (num >= 0) {
            from.defective = []
            from.defectiveName = ''
            // dealWorkorderRecordStandard({
            //     downType, num, recordId, workorderId: route.query.id
            // }).then(res => {
            //     if (res.code === 200) {
            //         getOrocessRecordCC()
            //     }
            // })
        } else {
            if (downType == 0) {
                produceFrom.qualified = 0
            } else {
                produceFrom.undesirable = 0
            }
            Toast.fail({ message: '产出数量不能小于0', duration: 2000 })
        }
    }

    // 跳转点检
    const jumpdj = () => {
        router.push({ name: 'spotCheck', query: { id: route.query.id } })
    }

    // 删除点检
    const dele = (id: string | number): void => {
        deletedj(id)
            .then(res => {
                if (res.code === 200) {
                    djData.value = []
                    finished.value = false
                    page.page = 0
                    pageDJs()
                }
            })
    }

    // 点检数据
    const pageDJs = () => {
        if (!finished.value) {
            page.page = page.page + 1
            loading.value = true
            pageDJ({
                capacity: page.capacity,
                page: page.page,
                model: {
                    workorderId: route.query.id
                }
            }).then(res => {
                if (res.code === 200 && res.data && res.data.records.length !== 0) {
                    djData.value.push(...res.data.records)
                } else {
                    finished.value = true
                }
                loading.value = false
            }).catch(err => {
                loading.value = false
                finished.value = true
            })
        }
    }

    // 统计
    const ccTotal = (): string => {
        if (produceData.value.length > 0) {
            let total: number = 0
            produceData.value.forEach((element: any) => {
                total = total + element.num
            })
            return `${total}${produceData.value[0].company}`
        }
        return ''
    }

    // 统计
    const blTotal = (): string => {
        if (undesirable.value.length > 0) {
            let total: number = 0
            undesirable.value.forEach((element: any) => {
                total = total + element.num
            })
            return `${total}${undesirable.value[0].company}`
        }
        return ''
    }

    // 统计
    const bfTotal = (): string => {
        if (scrap.value.length > 0) {
            let total: number = 0
            scrap.value.forEach((element: any) => {
                total = total + element.num
            })
            return `${total}${scrap.value[0].company}`
        }
        return ''
    }

    // 删除产出/投料
    const deleItem = (id: any, type: string) => {
        Dialog.confirm({
            title: '提示',
            message: '确定删除此条记录吗？',
        }).then(() => {
            deleteCT(id)
                .then(res => {
                    if (res.code === 200 && type === 'C') {
                        getOrocessRecordCC()
                    } else if (res.code === 200 && type === 'T') {
                        getOrocessRecords()
                    }
                })
        }).catch(() => {
            // on cancel
        })
    }

    // 跳转手动产出
    const jumpCC = () => {
        router.push({ name: 'manualOutput', query: { id: route.query.id, num: produceData.value.length > 0 ? produceData.value[0].num : '' } })
    }

    // 跳转手动投料
    const jumpTL = () => {
        router.push({ name: 'manualFeeding', query: { id: route.query.id } })
    }

    // 关闭扫码组件
    const closePopup = (): void => {
        openCode.value = false
    }

    // 获取扫码值
    const onDecode = (data: string[]): void => {
        getBarcodeContent({
            barcode: data[0]
        }).then(res => {
            if (res.code === 200) {
                if (res.data.barcodeType === QRCodeType.GZ) {
                    if (type.value === 'tl') {    // 投料操作
                        getListByCondition({ id: res.data.id })
                            .then(gz => {
                                if (gz.code === 200) {
                                    if (gz.data[0].status !== 1) {
                                        router.push({ name: 'codeScanningFeeding', query: { id: route.query.id, gzId: res.data.id } })
                                    } else {
                                        Toast.fail({ message: '扫描的工装状态不能为空', duration: 2000 })
                                    }
                                }
                            })
                    }
                    if (type.value === 'cc') {    // 产出操作
                        router.push({ name: 'codeScanningOutput', query: { id: route.query.id, gzId: res.data.id } })
                    }
                } else {
                    Toast({ message: '请扫描正确的篮筐码', duration: 2000 })
                }
            }
        })
        nextTick(() => {
            openCode.value = false
        })
    }

    // 跳转手动投料
    const jump = () => {
        router.push({ name: 'manualFeeding', query: { id: route.query.id } })
    }

    // 跳转扫码投料
    const jump1 = (types: string) => {
        type.value = types
        openCode.value = true
    }

    // 查询工单详情
    const queryByIds = () => {
        queryById(route.query.id).then(res => {
            if (res.code === 200) {
                info.value = res.data
                // 获取工资绩效数据
                queryOne({
                    deleted: 0,
                    departId: res.data.factoryId,
                    materialId: res.data.materialId,
                    procedureId: res.data.procedureId
                }).then((result: any) => {
                    if (result.code === 200) {
                        infoBox.value = result.data
                    }
                })
            }
        })
    }

    // 查询工单生产记录---投料
    const getOrocessRecords = () => {
        feedingData.value = []
        allForStandard({
            workorderId: route.query.id,
            type: 0
        }).then(res => {
            if (res.code === 200) {
                feedingData.value = res.data
                // res.data.forEach((item: any) => {
                //     feedingData.value.push({ id: item.id, company: item.umodel.name, gz: item.amodel.code, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num, ynum: item.num, maxNum: item.amodel.num })
                // })
            }
        })
    }

    // 查询工单生产记录---产出
    const getOrocessRecordCC = () => {
        produceData.value = []
        undesirable.value = []
        scrap.value = []
        getWorkorderRecordListStandard({
            workorderId: route.query.id
        }).then(res => {
            if (res.code === 200) {
                if (res.data.length > 0) {
                    res.data.forEach((item: any) => {
                        if (item.doneType === 1) {
                            produceFrom.undesirable = item.num
                            produceFrom.undesirableId = item.id
                        } else {
                            produceFrom.qualified = item.num
                            produceFrom.qualifiedId = item.id
                        }
                    })
                }
                // res.data.forEach((item: any) => {
                //     if (item.doneType === 0 || !item.doneType) { // 合格 | 混合

                //         produceData.value.push({ id: item.id, company: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num, ynum: item.num, maxNum: item.amodel.num })
                //     } else if (item.doneType === 1) { // 不良
                //         undesirable.value.push({ id: item.id, company: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num, ynum: item.num, maxNum: item.amodel.num })
                //     } else if (item.doneType === 2) { // 报废
                //         scrap.value.push({ id: item.id, company: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num, ynum: item.num, maxNum: item.amodel.num })
                //     }
                // })
            }
        })
    }

    // 编辑投料/产出
    const change = (id: any, num: any, type: any, maxNum: number, item: object, unitAttribute: number): void => {
        let obj: any = item
        if (type === 'T') {
            if (unitAttribute == 0 && num != '') {
                if(!REGULAR.positiveInteger.test(num)){
                    obj.num = obj.ynum
                    Toast({ message: '只能输入正整数' })
                    return
                }
            }
            if (unitAttribute == 1 && num != '') {
                if(!REGULAR.number.test(num)){
                    Toast({ message: '只能输入正整数或小数（最多四位）' })
                    obj.num = obj.ynum
                    return
                }
            }
            if (num > maxNum) {
                obj.num = obj.ynum
                Toast.fail({ message: '超出工装总数' })
                return
            }
        } else if (type === 'C' && num > info.value.planNum) {
            obj.num = obj.ynum
            Toast.fail({ message: '产出数量不能超过计划数量' })
            return
        }
        updateById({ id: id, num: num }).then(res => {
            if (res.code === 200 && type === 'T') {
                getOrocessRecords()
            } else if (res.code === 200 && type === 'C') {
                // getOrocessRecordCC()
            }
        })
    }

    // 确认报工
    const submit = () => {
        if (info.value.bomType === 1) {  // 拉式
            console.log('拉式')
            statisticsData.value = []
            if (produceFrom.qualified <= 0) {
                Toast.fail({ message: '产出明细不能为空' })
                return
            }
            if (info.value.hasBom === 0) {
                console.log('无bom')
                // let data: any = [
                //     { name: '工单投料', gznum: feedingData.value.length, wlmc: feedingData.value.length > 0 ? feedingData.value[0].name : '', wlnum: 0 },
                //     { name: '工单合格产出', gznum: produceData.value.length, wlmc: produceData.value.length > 0 ? produceData.value[0].name : '', wlnum: 0 },
                //     { name: '工单不良产出', gznum: 0, wlmc: '', wlnum: 0 },
                //     { name: '工单未投料', gznum: '', wlmc: feedingData.value.length > 0 ? feedingData.value[0].name : '', wlnum: 0 }
                // ]
                // if (undesirable.value.length > 0) {   // 判断有没有不良
                //     data[2].wlmc = undesirable.value[0].name
                //     data[2].gznum = data[2].gznum + undesirable.value.length
                // }
                // if (scrap.value.length > 0) {   // 判断有没有不良
                //     data[2].wlmc = scrap.value[0].name
                //     data[2].gznum = data[2].gznum + scrap.value.length
                // }
                // let tl: number = 0
                // let cc: number = 0
                // let bl: number = 0
                // undesirable.value.forEach((item: any) => {  // 不良
                //     bl = bl + item.num
                // })
                // scrap.value.forEach((item: any) => {  // 报废
                //     bl = bl + item.num
                // })
                // if (produceData.value.length > 0) {   // 判断有没有合格产出
                //     produceData.value.forEach((item: any) => {  // 产出
                //         cc = cc + item.num
                //     })
                // }
                // feedingData.value.forEach((item: any) => {  // 投料
                //     tl = tl + item.num
                // })
                // data[0].wlnum = tl.toString() + info.value.umodel.name
                // if (produceData.value.length > 0) {
                //     data[1].wlnum = cc.toString() + info.value.umodel.name
                // }
                // data[2].wlnum = bl.toString() + info.value.umodel.name
                // let total: number = info.value.planNum - (Number(cc) + Number(bl))
                // data[data.length - 1].wlnum = (info.value.planNum - Number(cc) - Number(bl)).toString() + info.value.umodel.name
                // if (total === 0) {
                //     isSubmit.value = true
                // } else {
                //     isSubmit.value = false
                // }

                let arr: any = []
                let tl = 0
                let res = getGroupNum(feedingData.value)
                for (let i in res) {
                    let num = 0
                    res[i].forEach((item: any) => {
                        num += item.num
                    })
                    arr.push({ name: '工单投料', materialName: i + res[i][0].procedureName, num: num })
                }
                feedingData.value.forEach((item: any) => {
                    tl += item.num
                })
                statisticsData.value = [...statisticsData.value, ...arr]
                statisticsData.value.push({ name: '工单合格产出', materialName:  info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.qualified })
                statisticsData.value.push({ name: '工单不良产出', materialName:  info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.undesirable })
                statisticsData.value.push({ name: '工单未投料', materialName: '', num: info.value.planNum - Number(produceFrom.qualified) - Number(produceFrom.undesirable) })
                let total: number = info.value.planNum - (Number(produceFrom.qualified) + Number(produceFrom.undesirable))
                if (total === 0) {
                    isSubmit.value = true
                } else {
                    isSubmit.value = false
                }
                // if (Number(tl) <= info.value.planNum) {
                //   let total: number = Number(tl) - Number(cc) - Number(bl)  // 是否有余
                //   data[data.length - 1].wlnum = (Number(tl) - Number(cc) - Number(bl)).toString() + info.value.umodel.name
                //   if (total === 0) {
                //     isSubmit.value = true
                //   } else {
                //     isSubmit.value = false
                //   }
                // } else {
                //   isSubmit.value = false
                // }
                // statisticsData.value = data
            } else if (info.value.hasBom === 1) {  // 有bom情况
                console.log('有bom')
                // let cc: number = 0
                // let bl: number = 0
                // let newData: any = {}
                // if (feedingData.value.length > 0) {  // 投料
                //     feedingData.value.forEach((e: any) => {
                //         if (Object.keys(newData).indexOf('' + e.name) === -1) {
                //             newData[e.name] = []
                //         }
                //         newData[e.name].push(e)
                //     })
                //     for (let key in newData) {
                //         let obj = { name: '工单投料', gznum: newData[key].length, wlmc: key, wlnum: 0, num: 0 }
                //         newData[key].forEach((item: any) => {
                //             obj.wlnum = obj.wlnum + item.num
                //             obj.num = item.num
                //         })
                //         obj.wlnum = obj.wlnum.toString() + newData[key][0].company as never
                //         statisticsData.value.push(obj)
                //     }
                // }
                // if (produceData.value.length > 0) {  // 产出
                //     produceData.value.forEach((item: any) => {
                //         cc = cc + item.num
                //     })
                //     statisticsData.value.push({ name: '工单合格产出', gznum: produceData.value.length, wlmc: info.value.mmodel.name, wlnum: cc + info.value.umodel.name, num: cc })
                // }
                // if (undesirable.value.length > 0 || scrap.value.length > 0) {  // 不良/报废
                //     undesirable.value.forEach((item: any) => {
                //         bl = bl + item.num
                //     })
                //     scrap.value.forEach((item: any) => {
                //         bl = bl + item.num
                //     })
                //     statisticsData.value.push({ name: '工单不良产出', gznum: undesirable.value.length + scrap.value.length, wlmc: info.value.mmodel.name, wlnum: bl + info.value.umodel.name, num: bl })
                // }
                // let totaltl: number = 0
                // let totalcc: number = 0
                // let totalbl: number = 0
                // statisticsData.value.forEach((item: any) => {
                //     if (item.name === '工单投料') {
                //         totaltl = totaltl + item.num
                //     } else if (item.name === '工单合格产出') {
                //         totalcc = totalcc + item.num
                //     } else if (item.name === '工单不良产出') {
                //         totalbl = totalbl + item.num
                //     }
                // })
                // isSubmit.value = totalcc + totalbl <= info.value.planNum;
                let arr: any = []
                let tl = 0
                let res = getGroupNum(feedingData.value)
                for (let i in res) {
                    let num = 0
                    res[i].forEach((item: any) => {
                        num += item.num
                    })
                    arr.push({ name: '工单投料', materialName: i, num: num })
                }
                feedingData.value.forEach((item:any) => {
                    tl += item.num
                })
                statisticsData.value = [...statisticsData.value, ...arr]
                statisticsData.value.push({ name: '工单合格产出', materialName:  info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.qualified })
                statisticsData.value.push({ name: '工单不良产出', materialName:  info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.undesirable })
                isSubmit.value = produceFrom.qualified + produceFrom.undesirable <= info.value.planNum;
            }
        } else {
            console.log('推式')
            if (feedingData.value.length === 0) {
                Toast.fail({ message: '投料明细不能为空' })
                return
            }
            if (produceFrom.qualified <= 0) {
                Toast.fail({ message: '产出明细不能为空' })
                return
            }
            statisticsData.value = []
            if (info.value.hasBom === 0) {
                console.log('无bom')
                // let data: any = [
                //     { name: '工单投料', gznum: feedingData.value.length, wlmc: feedingData.value.length > 0 ? feedingData.value[0].name : '', wlnum: 0 },
                //     { name: '工单合格产出', gznum: produceData.value.length, wlmc: produceData.value.length > 0 ? produceData.value[0].name : '', wlnum: 0 },
                //     { name: '工单不良产出', gznum: 0, wlmc: '', wlnum: 0 },
                //     { name: '工单未投料', gznum: '', wlmc: feedingData.value.length > 0 ? feedingData.value[0].name : '', wlnum: 0 }
                // ]
                // if (undesirable.value.length > 0) {   // 判断有没有不良
                //     data[2].wlmc = undesirable.value[0].name
                //     data[2].gznum = data[2].gznum + undesirable.value.length
                // }
                // if (scrap.value.length > 0) {   // 判断有没有不良
                //     data[2].wlmc = scrap.value[0].name
                //     data[2].gznum = data[2].gznum + scrap.value.length
                // }
                // let tl = 0
                // let cc = 0
                // let bl = 0
                // undesirable.value.forEach((item: any) => {  // 不良
                //     bl = bl + item.num
                // })
                // scrap.value.forEach((item: any) => {  // 报废
                //     bl = bl + item.num
                // })
                // if (produceData.value.length > 0) {   // 判断有没有合格产出
                //     produceData.value.forEach((item: any) => {  // 产出
                //         cc = cc + item.num
                //     })
                // }
                // feedingData.value.forEach((item: any) => {  // 投料
                //     tl = tl + item.num
                // })
                // data[0].wlnum = tl.toString() + info.value.umodel.name
                // if (produceData.value.length > 0) {
                //     data[1].wlnum = cc.toString() + info.value.umodel.name
                // }
                // data[2].wlnum = bl.toString() + info.value.umodel.name
                // if (Number(tl) <= info.value.planNum) {
                //     let total: number = Number(tl) - Number(cc) - Number(bl)  // 是否有余
                //     data[data.length - 1].wlnum = (Number(tl) - Number(cc) - Number(bl)).toString() + info.value.umodel.name
                //     if (total === 0) {
                //         isSubmit.value = true
                //     } else {
                //         isSubmit.value = false
                //     }
                // } else {
                //     isSubmit.value = false
                // }
                // statisticsData.value = data
                let arr: any = []
                let tl = 0
                let res = getGroupNum(feedingData.value)
                for (let i in res) {
                    let num = 0
                    res[i].forEach((item: any) => {
                        num += item.num
                    })
                    arr.push({ name: '工单投料', materialName: i + '-' + res[i][0].procedureName, num: num })
                }
                feedingData.value.forEach((item:any) => {
                    tl += item.num
                })
                statisticsData.value = [...statisticsData.value, ...arr]
                statisticsData.value.push({ name: '工单合格产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.qualified })
                statisticsData.value.push({ name: '工单不良产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.undesirable })
                if (Number(tl) <= info.value.planNum) {
                    let total: number = Number(tl) - Number(produceFrom.qualified) - Number(produceFrom.undesirable)  // 是否有余
                    statisticsData.value.push({ name: '工单未投料', materialName: '', num: (Number(tl) - Number(produceFrom.qualified) - Number(produceFrom.undesirable)).toFixed(2) })
                    if (total === 0) {
                        isSubmit.value = true
                    } else {
                        isSubmit.value = false
                    }
                } else {
                    isSubmit.value = false
                }
            } else if (info.value.hasBom === 1) {  // 有bom情况
                console.log('有bom')
                let arr: any = []
                let tl = 0
                let res = getGroupNum(feedingData.value)
                for (let i in res) {
                    let num = 0
                    res[i].forEach((item: any) => {
                        num += item.num
                    })
                    arr.push({ name: '工单投料', materialName: i, num: num })
                }
                feedingData.value.forEach((item:any) => {
                    tl += item.num
                })
                statisticsData.value = [...statisticsData.value, ...arr]
                statisticsData.value.push({ name: '工单合格产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.qualified })
                statisticsData.value.push({ name: '工单不良产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.undesirable })
                // isSubmit.value = produceFrom.qualified + produceFrom.undesirable <= info.value.planNum;
                isSubmit.value = true
            }
        }
        statistics.value = true
    }

    // 根据某个字段进行分组
    const getGroupNum = (arr: any) => {
        let newArry: any = {};
        for (let i = 0; i < arr.length; i++) {
            if (newArry[arr[i].materialName]) {
                newArry[arr[i].materialName].push(arr[i])
            } else {
                newArry[arr[i].materialName] = [arr[i]]
            }
        }
        return newArry;
    }

    // 返回修改
    const gofh = () => {
        statistics.value = false
    }

    // 确认报工
    const submitBG = () => {
        if (!from.duration || from.duration <= 0) {
            return Toast('报工时长不能为空')
        }
        let createUnqualifiedDTOList = from.defective.map((item: any) => {
            return {
                categoryId: item.id,
                unQualifiedNum: item.num
            }
        })
        let createWorkorderRecordDTO = {
            workorderId: route.query.id,
            duration: from.duration,
            qualifiedNum: produceFrom.qualified ? produceFrom.qualified : 0,
            unQualifiedNum: produceFrom.undesirable ? produceFrom.undesirable : 0
        }
        // id: route.query.id
        comfirmDoneStandard({
            createUnqualifiedDTOList,
            createWorkorderRecordDTO
        }).then(res => {
            if (res.code === 200) {
                Toast.success({ message: '报工成功', forbidClick: true, duration: 2000 })
                setTimeout(() => {
                    router.go(-2)
                }, 2000)
            }
        })
    }

    onMounted(() => {
// 删除点检
const dele = (id: string | number): void => {
  deletedj(id)
    .then(res => {
      if (res.code === 200) {
        djData.value = []
        finished.value = false
        page.page = 1
        djData.value = []
        pageDJs()
        queryByIds()
        getOrocessRecords()
        getData()
        // getOrocessRecordCC()
      }
    })
}

// 点检数据
const pageDJs = () => {
  if (!finished.value) {
    page.page = page.page + 1
    loading.value = true
    pageDJ({
      capacity: page.capacity,
      page: page.page,
      model: {
        workorderId: route.query.id
      }
    }).then(res => {
      if (res.code === 200 && res.data && res.data.records.length !== 0) {
        djData.value.push(...res.data.records)
      } else {
        finished.value = true
      }
      loading.value = false
    }).catch(err => {
      loading.value = false
      finished.value = true
    })
  }
}

// 统计
const ccTotal = (): string => {
  if (produceData.value.length > 0) {
    let total: number = 0
    produceData.value.forEach((element: any) => {
      total = total + element.num
    })
    return `${total}${produceData.value[0].company}`
  }
  return ''
}

// 统计
const blTotal = (): string => {
  if (undesirable.value.length > 0) {
    let total: number = 0
    undesirable.value.forEach((element: any) => {
      total = total + element.num
    })
    return `${total}${undesirable.value[0].company}`
  }
  return ''
}

// 统计
const bfTotal = (): string => {
  if (scrap.value.length > 0) {
    let total: number = 0
    scrap.value.forEach((element: any) => {
      total = total + element.num
    })
    return `${total}${scrap.value[0].company}`
  }
  return ''
}

// 切换绩效类型
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 deleItem = (id: any, type: string) => {
  Dialog.confirm({
    title: '提示',
    message: '确定删除此条记录吗？',
  }).then(() => {
    deleteCT(id)
      .then(res => {
        if (res.code === 200 && type === 'C') {
          getOrocessRecordCC()
        } else if (res.code === 200 && type === 'T') {
          getOrocessRecords()
        }
      })
  }).catch(() => {
    // on cancel
  })
}

// 跳转手动产出
const jumpCC = () => {
  router.push({ name: 'manualOutput', query: { id: route.query.id, num: produceData.value.length > 0 ? produceData.value[0].num : '' } })
}

// 跳转手动投料
const jumpTL = () => {
  router.push({ name: 'manualFeeding', query: { id: route.query.id } })
}

// 关闭扫码组件
const closePopup = (): void => {
  openCode.value = false
}

// 获取扫码值
const onDecode = (data: string[]): void => {
  getBarcodeContent({
    barcode: data[0]
  }).then(res => {
    if (res.code === 200) {
      if (res.data.barcodeType === QRCodeType.GZ) {
        if (type.value === 'tl') {    // 投料操作
          getListByCondition({ id: res.data.id })
            .then(gz => {
              if (gz.code === 200) {
                if (gz.data[0].status !== 1) {
                  router.push({ name: 'codeScanningFeeding', query: { id: route.query.id, gzId: res.data.id } })
                } else {
                  Toast.fail({ message: '扫描的工装状态不能为空', duration: 2000 })
                }
              }
            })
        }
        if (type.value === 'cc') {    // 产出操作
          router.push({ name: 'codeScanningOutput', query: { id: route.query.id, gzId: res.data.id } })
        }
      } else {
        Toast({ message: '请扫描正确的篮筐码', duration: 2000 })
      }
    }
  })
  nextTick(() => {
    openCode.value = false
  })
}

// 跳转手动投料
const jump = () => {
  router.push({ name: 'manualFeeding', query: { id: route.query.id } })
}

// 跳转扫码投料
const jump1 = (types: string) => {
  type.value = types
  openCode.value = true
}

// 查询工单详情
const queryByIds = () => {
  queryById(route.query.id).then(res => {
    if (res.code === 200) {
      info.value = res.data
      // 获取工资绩效数据
      queryList({
        deleted: 0,
        departId: res.data.factoryId,
        materialId: res.data.materialId,
        procedureId: res.data.procedureId
      }).then((result: any) => {
        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
        }
        // if (result.code === 200) {
        //     infoBox.value = result.data
        // }
      })
    }
  })
}

// 查询工单生产记录---投料
const getOrocessRecords = () => {
  feedingData.value = []
  allForStandard({
    workorderId: route.query.id,
    type: 0
  }).then(res => {
    if (res.code === 200) {
      feedingData.value = res.data
      // res.data.forEach((item: any) => {
      //     feedingData.value.push({ id: item.id, company: item.umodel.name, gz: item.amodel.code, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num, ynum: item.num, maxNum: item.amodel.num })
      // })
    }
  })
}

// 查询工单生产记录---产出
const getOrocessRecordCC = () => {
  produceData.value = []
  undesirable.value = []
  scrap.value = []
  getWorkorderRecordListStandard({
    workorderId: route.query.id
  }).then(res => {
    if (res.code === 200) {
      if (res.data.length > 0) {
        res.data.forEach((item: any) => {
          if (item.doneType === 1) {
            produceFrom.undesirable = item.num
            produceFrom.undesirableId = item.id
          } else {
            produceFrom.qualified = item.num
            produceFrom.qualifiedId = item.id
          }
        })
      }
      // res.data.forEach((item: any) => {
      //     if (item.doneType === 0 || !item.doneType) { // 合格 | 混合

      //         produceData.value.push({ id: item.id, company: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num, ynum: item.num, maxNum: item.amodel.num })
      //     } else if (item.doneType === 1) { // 不良
      //         undesirable.value.push({ id: item.id, company: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num, ynum: item.num, maxNum: item.amodel.num })
      //     } else if (item.doneType === 2) { // 报废
      //         scrap.value.push({ id: item.id, company: item.umodel.name, name: item.mmodel.name, code: item.amodel.code + ' - ' + item.mmodel.name, num: item.num, ynum: item.num, maxNum: item.amodel.num })
      //     }
      // })
    }
  })
}

// 编辑投料/产出
const change = (id: any, num: any, type: any, maxNum: number, item: object, unitAttribute: number): void => {
  let obj: any = item
  if (type === 'T') {
    if (unitAttribute == 0 && num != '') {
      if (!REGULAR.positiveInteger.test(num)) {
        obj.num = obj.ynum
        Toast({ message: '只能输入正整数' })
        return
      }
    }
    if (unitAttribute == 1 && num != '') {
      if (!REGULAR.number.test(num)) {
        Toast({ message: '只能输入正整数或小数（最多四位）' })
        obj.num = obj.ynum
        return
      }
    }
    if (num > maxNum) {
      obj.num = obj.ynum
      Toast.fail({ message: '超出工装总数' })
      return
    }
  } else if (type === 'C' && num > info.value.planNum) {
    obj.num = obj.ynum
    Toast.fail({ message: '产出数量不能超过计划数量' })
    return
  }
  updateById({ id: id, num: num }).then(res => {
    if (res.code === 200 && type === 'T') {
      getOrocessRecords()
    } else if (res.code === 200 && type === 'C') {
      // getOrocessRecordCC()
    }
  })
}

// 确认报工
const submit = () => {
  if (info.value.bomType === 1) {  // 拉式
    console.log('拉式')
    statisticsData.value = []
    if (produceFrom.qualified <= 0 && produceFrom.undesirable <= 0) {
      Toast.fail({ message: '产出明细不能为空' })
      return
    }
    if (info.value.hasBom === 0) {
      console.log('无bom')
      // let data: any = [
      //     { name: '工单投料', gznum: feedingData.value.length, wlmc: feedingData.value.length > 0 ? feedingData.value[0].name : '', wlnum: 0 },
      //     { name: '工单合格产出', gznum: produceData.value.length, wlmc: produceData.value.length > 0 ? produceData.value[0].name : '', wlnum: 0 },
      //     { name: '工单不良产出', gznum: 0, wlmc: '', wlnum: 0 },
      //     { name: '工单未投料', gznum: '', wlmc: feedingData.value.length > 0 ? feedingData.value[0].name : '', wlnum: 0 }
      // ]
      // if (undesirable.value.length > 0) {   // 判断有没有不良
      //     data[2].wlmc = undesirable.value[0].name
      //     data[2].gznum = data[2].gznum + undesirable.value.length
      // }
      // if (scrap.value.length > 0) {   // 判断有没有不良
      //     data[2].wlmc = scrap.value[0].name
      //     data[2].gznum = data[2].gznum + scrap.value.length
      // }
      // let tl: number = 0
      // let cc: number = 0
      // let bl: number = 0
      // undesirable.value.forEach((item: any) => {  // 不良
      //     bl = bl + item.num
      // })
      // scrap.value.forEach((item: any) => {  // 报废
      //     bl = bl + item.num
      // })
      // if (produceData.value.length > 0) {   // 判断有没有合格产出
      //     produceData.value.forEach((item: any) => {  // 产出
      //         cc = cc + item.num
      //     })
      // }
      // feedingData.value.forEach((item: any) => {  // 投料
      //     tl = tl + item.num
      // })
      // data[0].wlnum = tl.toString() + info.value.umodel.name
      // if (produceData.value.length > 0) {
      //     data[1].wlnum = cc.toString() + info.value.umodel.name
      // }
      // data[2].wlnum = bl.toString() + info.value.umodel.name
      // let total: number = info.value.planNum - (Number(cc) + Number(bl))
      // data[data.length - 1].wlnum = (info.value.planNum - Number(cc) - Number(bl)).toString() + info.value.umodel.name
      // if (total === 0) {
      //     isSubmit.value = true
      // } else {
      //     isSubmit.value = false
      // }

      let arr: any = []
      let tl = 0
      let res = getGroupNum(feedingData.value)
      for (let i in res) {
        let num = 0
        res[i].forEach((item: any) => {
          num += item.num
        })
        arr.push({ name: '工单投料', materialName: i + res[i][0].procedureName, num: num })
      }
      feedingData.value.forEach((item: any) => {
        tl += item.num
      })
      statisticsData.value = [...statisticsData.value, ...arr]
      statisticsData.value.push({ name: '工单合格产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.qualified })
      statisticsData.value.push({ name: '工单不良产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.undesirable })
      statisticsData.value.push({ name: '工单未投料', materialName: '', num: info.value.planNum - Number(produceFrom.qualified) - Number(produceFrom.undesirable) })
      let total: number = info.value.planNum - (Number(produceFrom.qualified) + Number(produceFrom.undesirable))
      if (total === 0) {
        isSubmit.value = true
      } else {
        isSubmit.value = false
      }
      // if (Number(tl) <= info.value.planNum) {
      //   let total: number = Number(tl) - Number(cc) - Number(bl)  // 是否有余
      //   data[data.length - 1].wlnum = (Number(tl) - Number(cc) - Number(bl)).toString() + info.value.umodel.name
      //   if (total === 0) {
      //     isSubmit.value = true
      //   } else {
      //     isSubmit.value = false
      //   }
      // } else {
      //   isSubmit.value = false
      // }
      // statisticsData.value = data
    } else if (info.value.hasBom === 1) {  // 有bom情况
      console.log('有bom')
      // let cc: number = 0
      // let bl: number = 0
      // let newData: any = {}
      // if (feedingData.value.length > 0) {  // 投料
      //     feedingData.value.forEach((e: any) => {
      //         if (Object.keys(newData).indexOf('' + e.name) === -1) {
      //             newData[e.name] = []
      //         }
      //         newData[e.name].push(e)
      //     })
      //     for (let key in newData) {
      //         let obj = { name: '工单投料', gznum: newData[key].length, wlmc: key, wlnum: 0, num: 0 }
      //         newData[key].forEach((item: any) => {
      //             obj.wlnum = obj.wlnum + item.num
      //             obj.num = item.num
      //         })
      //         obj.wlnum = obj.wlnum.toString() + newData[key][0].company as never
      //         statisticsData.value.push(obj)
      //     }
      // }
      // if (produceData.value.length > 0) {  // 产出
      //     produceData.value.forEach((item: any) => {
      //         cc = cc + item.num
      //     })
      //     statisticsData.value.push({ name: '工单合格产出', gznum: produceData.value.length, wlmc: info.value.mmodel.name, wlnum: cc + info.value.umodel.name, num: cc })
      // }
      // if (undesirable.value.length > 0 || scrap.value.length > 0) {  // 不良/报废
      //     undesirable.value.forEach((item: any) => {
      //         bl = bl + item.num
      //     })
      //     scrap.value.forEach((item: any) => {
      //         bl = bl + item.num
      //     })
      //     statisticsData.value.push({ name: '工单不良产出', gznum: undesirable.value.length + scrap.value.length, wlmc: info.value.mmodel.name, wlnum: bl + info.value.umodel.name, num: bl })
      // }
      // let totaltl: number = 0
      // let totalcc: number = 0
      // let totalbl: number = 0
      // statisticsData.value.forEach((item: any) => {
      //     if (item.name === '工单投料') {
      //         totaltl = totaltl + item.num
      //     } else if (item.name === '工单合格产出') {
      //         totalcc = totalcc + item.num
      //     } else if (item.name === '工单不良产出') {
      //         totalbl = totalbl + item.num
      //     }
      // })
      // isSubmit.value = totalcc + totalbl <= info.value.planNum;
      let arr: any = []
      let tl = 0
      let res = getGroupNum(feedingData.value)
      for (let i in res) {
        let num = 0
        res[i].forEach((item: any) => {
          num += item.num
        })
        arr.push({ name: '工单投料', materialName: i, num: num })
      }
      feedingData.value.forEach((item: any) => {
        tl += item.num
      })
      statisticsData.value = [...statisticsData.value, ...arr]
      statisticsData.value.push({ name: '工单合格产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.qualified })
      statisticsData.value.push({ name: '工单不良产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.undesirable })
      isSubmit.value = produceFrom.qualified + produceFrom.undesirable <= info.value.planNum;
    }
  } else {
    console.log('推式')
    if (feedingData.value.length === 0) {
      Toast.fail({ message: '投料明细不能为空' })
      return
    }
    if (produceFrom.qualified <= 0 && produceFrom.undesirable <= 0) {
      Toast.fail({ message: '产出明细不能为空' })
      return
    }
    statisticsData.value = []
    if (info.value.hasBom === 0) {
      console.log('无bom')
      // let data: any = [
      //     { name: '工单投料', gznum: feedingData.value.length, wlmc: feedingData.value.length > 0 ? feedingData.value[0].name : '', wlnum: 0 },
      //     { name: '工单合格产出', gznum: produceData.value.length, wlmc: produceData.value.length > 0 ? produceData.value[0].name : '', wlnum: 0 },
      //     { name: '工单不良产出', gznum: 0, wlmc: '', wlnum: 0 },
      //     { name: '工单未投料', gznum: '', wlmc: feedingData.value.length > 0 ? feedingData.value[0].name : '', wlnum: 0 }
      // ]
      // if (undesirable.value.length > 0) {   // 判断有没有不良
      //     data[2].wlmc = undesirable.value[0].name
      //     data[2].gznum = data[2].gznum + undesirable.value.length
      // }
      // if (scrap.value.length > 0) {   // 判断有没有不良
      //     data[2].wlmc = scrap.value[0].name
      //     data[2].gznum = data[2].gznum + scrap.value.length
      // }
      // let tl = 0
      // let cc = 0
      // let bl = 0
      // undesirable.value.forEach((item: any) => {  // 不良
      //     bl = bl + item.num
      // })
      // scrap.value.forEach((item: any) => {  // 报废
      //     bl = bl + item.num
      // })
      // if (produceData.value.length > 0) {   // 判断有没有合格产出
      //     produceData.value.forEach((item: any) => {  // 产出
      //         cc = cc + item.num
      //     })
      // }
      // feedingData.value.forEach((item: any) => {  // 投料
      //     tl = tl + item.num
      // })
      // data[0].wlnum = tl.toString() + info.value.umodel.name
      // if (produceData.value.length > 0) {
      //     data[1].wlnum = cc.toString() + info.value.umodel.name
      // }
      // data[2].wlnum = bl.toString() + info.value.umodel.name
      // if (Number(tl) <= info.value.planNum) {
      //     let total: number = Number(tl) - Number(cc) - Number(bl)  // 是否有余
      //     data[data.length - 1].wlnum = (Number(tl) - Number(cc) - Number(bl)).toString() + info.value.umodel.name
      //     if (total === 0) {
      //         isSubmit.value = true
      //     } else {
      //         isSubmit.value = false
      //     }
      // } else {
      //     isSubmit.value = false
      // }
      // statisticsData.value = data
      let arr: any = []
      let tl = 0
      let res = getGroupNum(feedingData.value)
      for (let i in res) {
        let num = 0
        res[i].forEach((item: any) => {
          num += item.num
        })
        arr.push({ name: '工单投料', materialName: i + '-' + res[i][0].procedureName, num: num })
      }
      feedingData.value.forEach((item: any) => {
        tl += item.num
      })
      statisticsData.value = [...statisticsData.value, ...arr]
      statisticsData.value.push({ name: '工单合格产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.qualified })
      statisticsData.value.push({ name: '工单不良产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.undesirable })
      if (Number(tl) <= info.value.planNum) {
        let total: number = Number(tl) - Number(produceFrom.qualified) - Number(produceFrom.undesirable)  // 是否有余
        statisticsData.value.push({ name: '工单未投料', materialName: '', num: (Number(tl) - Number(produceFrom.qualified) - Number(produceFrom.undesirable)).toFixed(2) })
        if (total === 0) {
          isSubmit.value = true
        } else {
          isSubmit.value = false
        }
      } else {
        isSubmit.value = false
      }
    } else if (info.value.hasBom === 1) {  // 有bom情况
      console.log('有bom')
      let arr: any = []
      let tl = 0
      let res = getGroupNum(feedingData.value)
      for (let i in res) {
        let num = 0
        res[i].forEach((item: any) => {
          num += item.num
        })
        arr.push({ name: '工单投料', materialName: i, num: num })
      }
      feedingData.value.forEach((item: any) => {
        tl += item.num
      })
      statisticsData.value = [...statisticsData.value, ...arr]
      statisticsData.value.push({ name: '工单合格产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.qualified })
      statisticsData.value.push({ name: '工单不良产出', materialName: info.value.mmodel.name + '-' + info.value.procedureName, num: produceFrom.undesirable })
      // isSubmit.value = produceFrom.qualified + produceFrom.undesirable <= info.value.planNum;
      isSubmit.value = true
    }
  }
  statistics.value = true
}

// 根据某个字段进行分组
const getGroupNum = (arr: any) => {
  let newArry: any = {};
  for (let i = 0; i < arr.length; i++) {
    if (newArry[arr[i].materialName]) {
      newArry[arr[i].materialName].push(arr[i])
    } else {
      newArry[arr[i].materialName] = [arr[i]]
    }
  }
  return newArry;
}

// 返回修改
const gofh = () => {
  statistics.value = false
}

// 确认报工
const submitBG = () => {
  // if (!from.duration || from.duration <= 0) {
  //     return Toast('报工时长不能为空')
  // }
  let createUnqualifiedDTOList = from.defective.map((item: any) => {
    return {
      categoryId: item.id,
      unQualifiedNum: item.num
    }
  })
  let createWorkorderRecordDTO = {
    workorderId: route.query.id,
    duration: from.duration ? from.duration : 0,
    qualifiedNum: produceFrom.qualified ? produceFrom.qualified : 0,
    unQualifiedNum: produceFrom.undesirable ? produceFrom.undesirable : 0
  }
  // id: route.query.id
  comfirmDoneStandard({
    createUnqualifiedDTOList,
    createWorkorderRecordDTO
  }).then(res => {
    if (res.code === 200) {
      Toast.success({ message: '报工成功', forbidClick: true, duration: 2000 })
      setTimeout(() => {
        router.go(-2)
      }, 2000)
    }
  })
}

onActivated(() => {
  // $Bus.on('callback1', (res: any)=>{
  //     console.log(res)
  //     if (res == 1) {
  //         djData.value = []
  //         finished.value = false
  //         page.page = 1
  //         djData.value = []
  //         pageDJs()
  //     }
  // })
  // queryByIds()
  // getOrocessRecords()
  // getData()
})

onMounted(() => {
  // $Bus.on('callback1', (res: any)=>{
  //     if (res == 1) {
  //         djData.value = []
  //         finished.value = false
  //         page.page = 1
  //         djData.value = []
  //         pageDJs()
  //     }
  // })
  // pageDJs()

  queryByIds()
  getOrocessRecords()
  getData()

  // getOrocessRecordCC()
})
</script>

<style lang="scss" scoped>
    .bg {
.bg {
  width: 100%;
  /*height: 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;
      }
    }
  }

  .details_cz {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .details_cz_sdtl {
      width: 330px;
      height: 76px;
      background: #FFFFFF;
      border-radius: 36px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 28px;
        height: 28px;
        margin-right: 14px;
      }

      span {
        font-size: 26px;
        font-weight: 400;
        color: #222222;
      }
    }

    .details_cz_smtl {
      /*width: 330px;*/
      flex: 1;
      height: 76px;
      background: $nav-color;
      border-radius: 36px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 28px;
        height: 28px;
        margin-right: 14px;
      }

      span {
        font-size: 26px;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }

  .bg_cate {
    width: 100%;
    height: 88px;
    background: #FFFFFF;
    margin-top: 20px;
    display: flex;
    align-items: center;

    .active {
      box-sizing: border-box;
      color: #305ED5 !important;
      border-bottom: 2PX solid #305ED5;
    }

    .bg_cate_item {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #555555;
    }
  }

  .bg_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 30px;

    .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;
          }
        }
      }

      .bg_list_item_h {
        width: 100%;
        /*height: 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;
                }
            }
        }
        .details_cz {
            width: 100%;
            padding: 30px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .details_cz_sdtl {
                width: 330px;
                height: 76px;
                background: #FFFFFF;
                border-radius: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    width: 28px;
                    height: 28px;
                    margin-right: 14px;
                }
                span {
                    font-size: 26px;
                    font-weight: 400;
                    color: #222222;
                }
            }
            .details_cz_smtl {
                /*width: 330px;*/
                flex: 1;
                height: 76px;
                background: $nav-color;
                border-radius: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    width: 28px;
                    height: 28px;
                    margin-right: 14px;
                }
                span {
                    font-size: 26px;
                    font-weight: 400;
                    color: #ffffff;
                }
            }
        }
        .bg_list {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-top: 30px;
            .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;
                        }
                    }
                }
                .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;
                                }
                            }
                        }
                    }
                }
            }
        }
        .details_dj {
            display: flex;
            flex-direction: column;
            .details_dj_title {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 30px 30px 30px;
                box-sizing: border-box;
                .details_dj_title_left {
                    display: flex;
                    align-items: center;
                    .details_x {
                        width: 8px;
                        height: 30px;
                        background: $nav-color;
                        border-radius: 2px;
                        margin-right: 12px;
                    }
                    span {
                        font-size: 32px;
                        font-weight: 500;
                        color: #222222;
                    }
                }
                .details_dj_title_right {
                    display: flex;
                    align-items: center;
                    img {
                        width: 28px;
                        height: 28px;
                        margin-right: 12px;
                    }
                    span {
                        font-size: 28px;
                        font-weight: 400;
                        color: $nav-color;
                    }
                }
            }
            .details_dj_list {
                width: 100%;
                /*padding: 30px;*/
                box-sizing: border-box;
                background: #ffffff;
                display: flex;
                flex-direction: column;
                .details_dj_list_item {
                    display: flex;
                    flex-direction: column;
                    border-bottom: 1px solid #E5E5E5;
                    padding: 30px;
                    /*margin: 30px;*/
                    /*padding-bottom: 30px;*/
                    /*margin-bottom: 30px !important;*/
                    span {
                        &:nth-child(1) {
                            font-size: 28px;
                            font-weight: 400;
                            color: #222222;
                        }
                        &:nth-child(2) {
                            font-size: 24px;
                            font-weight: 400;
                            color: #999999;
                            margin-top: 24px;
                        }
                    }
                }
            }
        }
        .bh_zw {
            height: 160px;
        }
        .bg_footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 0 30px 60px 30px;
            box-sizing: border-box;
            .bg_footer_submit {
                width: 690px;
                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;
            }
        }
        .tg {
        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%;
            padding: 30px;
            box-sizing: border-box;
            .tg_header {
                width: 100%;
                height: 45px;
                text-align: center;
                line-height: 45px;
                font-size: 30px;
                font-weight: 500;
                color: #222222;
            }
            .tg_table {
                width: 100%;
                margin-top: 40px;
                .tg_table_header {
                    width: 100%;
                    height: 72px;
                    background: #EFF2FC;
                    display: flex;
                    align-items: center;
                    .tg_table_header_item {
                        flex: 1;
                        font-size: 26px;
                        font-weight: 500;
                        color: #333333;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
            .nr {
                max-height: 400px;
                overflow-x: scroll;
                .tg_table_nr {
                    width: 100%;
                    padding: 24px 10px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    background: white;
                    box-shadow: inset 0px -2px 0px 0px #E5E5E5;
                    .tg_table_nr_item {
                        flex: 1;
                        font-size: 26px;
                        font-weight: 500;
                        color: #333333;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .tg_table_nr_item1 {
                        flex: 1;
                        font-size: 26px;
                        font-weight: 500;
                        color: #333333;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
        }
        .tg_footer {
            width: calc(100% - 60px);
            position: fixed;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            // height: 118px;
            padding: 15px 0;
            box-sizing: border-box;
            padding-bottom: 40px;
            .tg_footer_fh {
                width: 100%;
                height: 88px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(66, 117, 252, 0.05);
                border-radius: 8px;
                border: 1PX solid #4275FC;
                font-size: 32px;
                font-weight: 500;
                color: $nav-color;
            justify-content: space-between;
            border-bottom: 1px solid #E5E5E5;

            &:last-child {
              border: none;
            }
            .tg_footer_qr {
                width: 100%;
                height: 88px;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                background: $nav-color;
                border-radius: 8px;
                font-size: 32px;
                font-weight: 500;
                color: #FFFFFF;
            }
        }
        .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;

            .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: #305ED5;
                background: #F2F2F2;
                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;
                            }
                        }
                    }
                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;
              }
            }
          }
        }
      }
    }
</style>
  }

  .details_dj {
    display: flex;
    flex-direction: column;

    .details_dj_title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30px 30px 30px;
      box-sizing: border-box;

      .details_dj_title_left {
        display: flex;
        align-items: center;

        .details_x {
          width: 8px;
          height: 30px;
          background: $nav-color;
          border-radius: 2px;
          margin-right: 12px;
        }

        span {
          font-size: 32px;
          font-weight: 500;
          color: #222222;
        }
      }

      .details_dj_title_right {
        display: flex;
        align-items: center;

        img {
          width: 28px;
          height: 28px;
          margin-right: 12px;
        }

        span {
          font-size: 28px;
          font-weight: 400;
          color: $nav-color;
        }
      }
    }

    .details_dj_list {
      width: 100%;
      /*padding: 30px;*/
      box-sizing: border-box;
      background: #ffffff;
      display: flex;
      flex-direction: column;

      .details_dj_list_item {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #E5E5E5;
        padding: 30px;

        /*margin: 30px;*/
        /*padding-bottom: 30px;*/
        /*margin-bottom: 30px !important;*/
        span {
          &:nth-child(1) {
            font-size: 28px;
            font-weight: 400;
            color: #222222;
          }

          &:nth-child(2) {
            font-size: 24px;
            font-weight: 400;
            color: #999999;
            margin-top: 24px;
          }
        }
      }
    }
  }

  .bh_zw {
    height: 160px;
  }

  .bg_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 30px 60px 30px;
    box-sizing: border-box;

    .bg_footer_submit1 {
      width: 690px;
      height: 76px;
      background: #FFFFFF;
      border-radius: 36px;
      border: 1px solid #E5E5E5;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 28px;
        height: 28px;
        margin-right: 12px;
      }

      span {
        font-size: 26px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #305ED5;
      }
    }

    .bg_footer_submit {
      width: 690px;
      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;
    }
  }

  .tg {
    width: 100%;
    height: 800px;
    padding: 30px;
    box-sizing: border-box;

    .tg_header {
      width: 100%;
      height: 45px;
      text-align: center;
      line-height: 45px;
      font-size: 30px;
      font-weight: 500;
      color: #222222;
    }

    .tg_table {
      width: 100%;
      margin-top: 40px;

      .tg_table_header {
        width: 100%;
        height: 72px;
        background: #EFF2FC;
        display: flex;
        align-items: center;

        .tg_table_header_item {
          flex: 1;
          font-size: 26px;
          font-weight: 500;
          color: #333333;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .nr {
      width: 100%;
      max-height: calc(100% - 133px);
      overflow-x: scroll;

      .tg_table_nr {
        width: 100%;
        padding: 24px 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background: white;
        box-shadow: inset 0px -2px 0px 0px #E5E5E5;

        .tg_table_nr_item {
          flex: 1;
          font-size: 26px;
          font-weight: 500;
          color: #333333;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .tg_table_nr_item1 {
          flex: 1;
          font-size: 26px;
          font-weight: 500;
          color: #333333;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .tg_footer {
    width: calc(100% - 60px);
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding-bottom: 40px;

    .tg_footer_fh {
      width: 100%;
      height: 88px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(66, 117, 252, 0.05);
      border-radius: 8px;
      border: 1PX solid #4275FC;
      font-size: 32px;
      font-weight: 500;
      color: $nav-color;
    }

    .tg_footer_qr {
      width: 100%;
      height: 88px;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      background: $nav-color;
      border-radius: 8px;
      font-size: 32px;
      font-weight: 500;
      color: #FFFFFF;
    }
  }

  .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>