bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/pages_adjust/pages/workOrderReporting/workOrderReporting.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1230 @@
<template>
   <view>
      <view class="tips-label">当前任务需要质检；产出后，请耐心等待质检员检验，并根据检验结果调整产出数据后再报工。</view>
      <workOrderInfo :orederMessage="info" />
      <!-- <u-tabs :list="tab" lineColor="#305ED5" :activeStyle="{color:'#305ED5'}" lineWidth="50%" :itemStyle="{width: '50%', boxSizing: 'border-box', height: '88rpx'}" @click="click"></u-tabs> -->
      <view class="bg_cate">
         <view @click="clickIten(index)" :class="typeView == index ? 'bg_cate_item active' : 'bg_cate_item'"
            v-for="(item, index) in cate" :key="index">{{ item.name }}</view>
      </view>
      <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 bg_m"></div>
                  <span>投料明细</span>
               </div>
               <!-- proxy.$auth('h5:workorderinput:create') &&  -->
               <div class="bg_list_item_top_right" @click="jumpTL"
                  v-if="info.bomType !== 1 || info.bomType == 0 || !info.bomType">
                  <!-- 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="" /> -->
                  <!-- <img src="@/static/gongdan_ic_shoudong@2x.ong" alt="" /> -->
                  <image src="../../static/gongdan_ic_shoudong@2x.png" class="img28" mode=""></image>
                  <span class="cm">手动录入</span>
               </div>
            </div>

            <template v-if="feedingData && feedingData.length > 0">
               <u-swipe-action>
                  <u-swipe-action-item v-for="(item, index) in feedingData" :key="index" :options="options"
                     @click="deleItem(item.id, 'T')">
                     <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="orange" 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">
                                 <!-- :disabled="!proxy.$auth('h5:workorderinput:update')" -->
                                 <input v-model="item.num"
                                    @blur="change(item.id, item.num, 'T', item.maxNum, item, item.unitAttribute)"
                                    type="number" />
                                 <span>{{ item.unitName }}</span>
                              </div>
                           </div>
                        </div>
                     </div>
                  </u-swipe-action-item>
               </u-swipe-action>

            </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 bg_m"></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>良品数{{ 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>
            <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>
            <div class="bg_list_item_h" v-if="produceFrom.undesirable > 0">
               <div class="bg_list_item_num">
                  <div class="bg_list_item_num_item" @click="badShow = true">
                     <span>不良项</span>
                     <div class="bg_list_item_num_item_sr">
                        <span class="wulll" :style="{ color: form.defectiveName ? '#305ED5' : '' }">{{ form.defectiveName ?
                          form.defectiveName : '设置' }}</span>
                        <image src="../../../static/ic_ar@2x.png" class="img_ar" mode=""></image>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="bg_plan" @click="TimeShow = true">
            <div class="bg_plan_label">
               <span>报工时长</span>
            </div>
            <div class="bg_plan_label_val">
               <span
                  :style="{ color: form.durationName ? '#333' : '' }">{{ form.durationName ? form.durationName : '请选择' }}</span>
               <image src="../../../static/ic_ar@2x.png" class="img_ar" mode=""></image>
            </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 bg_m"></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="form.index == index ? '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(item, index)">
                           {{ item.name }}
                        </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[form.index].salary / 10 / 10).toFixed(2) }}元/{{ arrType[form.index].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="details_dj" v-if="typeView === 1">

         <div class="details_dj_list">
            <scroll-view scroll-y="true" refresher-enabled="true" @scrolltolower="getLists">
               <u-swipe-action v-for="(item, index) in djData" :key="index">
                  <u-swipe-action-item :options="options" @click="dele(item.id)">
                     <div class="details_dj_list_item">
                        <span>{{ item.attrName }}：{{ item.val }}</span>
                        <span>{{ item.userName }} {{ item.createTime }}</span>
                     </div>
                  </u-swipe-action-item>
               </u-swipe-action>
            </scroll-view>
         </div>
      </div>
      <!-- v-if="info.status === 2 || info.procedureNeedcheck === 1" -->
      <template v-if="info.status === 2 || info.procedureNeedcheck === 1">
         <div class="bh_zw"></div>
         <div class="bg_footer bg_f7">
            <div class="bg_footer_submit bg_m" v-if="typeView == 0" @click="submit">确认报工</div>
            <!-- proxy.$auth('h5:workorder:processRecord') &&  -->
            <div class="bg_footer_submit1" @click="jumpdj" v-if="typeView == 1">
               <image src="../../../static/gongdan_ic_shoudong@2x.png" class="fornt-img" mode=""></image>
               <span>新增点检</span>
            </div>
         </div>
      </template>
      <u-datetime-picker :show="TimeShow" @cancel="TimeShow=false" @confirm="timeConfirm" v-model="form.time"
         mode="time"></u-datetime-picker>
      <u-popup :show="badShow" @close="badShow=false" :round="8" closeable zIndex="20000">
         <view class="rp p40 contanir">
            <view class="c2 b tc">不良项</view>
            <view class="content bl_list">
               <div class="bl_list_item" v-for="(item, i) in cateList" :key="i" @click="changeChecked(i)">
                  <div class="bl_list_item_left">
                     <u-checkbox-group @change="changeChecked(i)">
                        <u-checkbox :key="index" :checked="item.active" :label="item.name" :name="item.name">
                        </u-checkbox>
                     </u-checkbox-group>
                  </div>
                  <div class="bl_list_item_right">
                     <input type="number" @click.stop v-model="item.num" placeholder="0" />
                  </div>
               </div>
            </view>
            <view class="flex ap tc bottom-view">
               <view class="fx1 ml20 ptb20 sbtn_green" @click="confirm">确定</view>
            </view>
         </view>
      </u-popup>
   </view>
</template>

<script>
   import workOrderInfo from '@/components/workOrderInfo.vue'
   import {
      getBarcodeContent,
      queryById,
      getOrocessRecord,
      deleteCT,
      updateById,
      comfirmDone,
      comfirmDoneStandard,
      getListByCondition,
      allForStandard,
      pageDJ,
      deletedj,
      dealWorkorderRecordStandard,
      getWorkorderRecordListStandard
   } from '@/util/api/WorkOrderAPI'
   import {
      categoryExtList,
      queryOne,
      queryList
   } from '@/util/api/PlanningAPI'
   import {
      REGULAR
   } from '@/util/utils'
   export default {
      components: {
         workOrderInfo
      },
      data() {
         return {
            cate: [{
                  name: '生产'
               },
               {
                  name: '点检'
               }
            ],
            form: {
               time: '',
               defective: [],
               defectiveName: '',
               durationName: '0小时0分钟',
               duration: 0,
               type: 0,
               index: 0
            },
            TimeShow: false,
            badShow: false,
            typeView: 0,
            workorderId: '',
            info: {},
            feedingData: [],
            options: [{
               text: '删除',
               style: {
                  backgroundColor: 'red',
               }
            }],
            arrType: [],
            // äº§å‡ºåˆæ ¼/不良
            produceFrom: {
               qualifiedId: '',
               qualified: '', // åˆæ ¼
               undesirableId: '',
               undesirable: '' // ä¸è‰¯
            },
            triggered: false,
            finished: true,
            djData: [],
            cateList: [],
            pages: {
               capacity: 10,
               page: 1,
               total: 0
            }
         };
      },
      onLoad(obj) {
         this.workorderId = obj.id
         this.queryByIds()
         this.getOrocessRecords()
         this.getData()
         uni.$on('spotAdd', () => {
            if (this.typeView == 1) {
               this.pages.page = 1
               this.pageDJs()
            }
         })
         uni.$on('addMaterial', () => {
            this.getOrocessRecords()
         })
      },
      computed: {
         expectedSalary() {
            if (this.arrType.length === 0) return 0;
            // æŒ‰ä»¶è®¡ç®—
            if (this.arrType[this.form.index].type == 0) {
               if (!this.produceFrom.qualified) return 0
               if (this.arrType[this.form.index].unqualified == 1) { // æ˜¯å¦è®¡å…¥ä¸è‰¯å“
                  let total = Number(this.produceFrom.qualified) + Number(this.produceFrom.undesirable)
                  return (total * (this.arrType[this.form.index].salary / 100)).toFixed(2) || 0
               } else {
                  return (Number(this.produceFrom.qualified) * (this.arrType[this.form.index].salary / 100)).toFixed(
                     2) || 0
               }
            } else {
               if (!this.form.duration) return 0;
               let h = (this.form.duration / 60 / 60).toFixed(2)
               return (Number(h) * (this.arrType[this.form.index].salary / 10 / 10)).toFixed(2) || 0
            }
         },
         complianceRate() {
            if (this.arrType.length === 0) return 0;
            if (!this.produceFrom.qualified && !this.produceFrom.undesirable) return 0;
            if (!this.form.duration) return 0;
            if (!this.arrType[this.form.index].num) return 0;
            // æŒ‰ä»¶è®¡ç®—
            // if (infoBox.value.type == 0) {
            if (this.arrType[this.form.index].unqualified == 1) { // æ˜¯å¦è®¡å…¥ä¸è‰¯å“
               let a = ((Number(this.produceFrom.qualified) + Number(this.produceFrom.undesirable)) / (this.form
                  .duration / 3600)).toFixed(2)
               let b = (this.arrType[this.form.index].num / (this.arrType[form.index].times / 3600)).toFixed(2)
               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 = (this.produceFrom.qualified / (this.form.duration / 3600)).toFixed(2)
               let b = (this.arrType[this.form.index].num / (this.arrType[this.form.index].times / 3600)).toFixed(2)
               return ((Number(a) / Number(b)) * 100).toFixed(2)
               // return Number(from.qualified) * infoBox.value.salary;
            }
         }
      },
      methods: {
         queryByIds() {
            queryById(this.workorderId)
               .then(res => {
                  this.info = res.data
                  queryList({
                     deleted: 0,
                     departId: res.data.factoryId,
                     materialId: res.data.materialId,
                     procedureId: res.data.procedureId
                  }).then(result => {
                     if (result.code === 200) {
                        if (result.data && result.data.length > 0) {
                           result.data.forEach((item, index) => {
                              item.name = item.type == 0 ? '计件' : '计时'
                              item.id = item.type
                              item.active = index == 0
                           })
                           this.arrType = result.data
                        } else {
                           this.arrType = []
                        }
                     }
                  })
               })
         },
         getOrocessRecords() {
            this.feedingData = []
            allForStandard({
               workorderId: this.workorderId,
               type: 0
            }).then(res => {
               if (res.code === 200) {
                  this.feedingData = res.data
               }
            })
         },
         getData() {
            categoryExtList({
               cateType: "3"
            }).then(res => {
               if (res.code === 200) {
                  res.data.forEach(item => {
                     item.active = false
                     item.num = ''
                  })
                  this.cateList = res.data
               }
            })
         },
         click() {

         },
         clickIten(index) {
            this.typeView = index
            if (this.typeView == 1) {
               this.pages.page = 1
               this.pageDJs()
            }
         },
         timeConfirm({
            value
         }) {
            console.log(value)
            let h = Number(value.substring(0, 2))
            let m = Number(value.substring(3, 5))
            let s = 0
            if (h > 0) {
               s += h * 60 * 60
            }
            if (m > 0) {
               s += m * 60
            }
            this.form.duration = s
            this.form.durationName = `${h}小时${m}分钟`
            this.TimeShow = false
         },
         // ç¼–辑投料/产出
         change(id, num, type, maxNum, item, unitAttribute) {
            let obj = 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, num }).then(res => {
            //   if (res.code === 200 && type === 'T') {
            //     getOrocessRecords()
            //   } else if (res.code === 200 && type === 'C') {
            //     // getOrocessRecordCC()
            //   }
            // })
         },
         changeCC(downType, num, recordId) {
            if (!num) return
            console.log(Number(this.produceFrom.qualified) + Number(this.produceFrom.undesirable))
            if ((Number(this.produceFrom.qualified) + Number(this.produceFrom.undesirable)) > this.info.planNum) {
               uni.showToast({
                  title: '产出数量不能大于计划数量',
                  duration: 2000,
                  icon: 'none'
               })
               return
            }
            if (num >= 0) {
               this.form.defective = []
               this.form.defectiveName = ''
               // dealWorkorderRecordStandard({
               //     downType, num, recordId, workorderId: route.query.id
               // }).then(res => {
               //     if (res.code === 200) {
               //         getOrocessRecordCC()
               //     }
               // })
            } else {
               if (downType == 0) {
                  this.produceFrom.qualified = 0
               } else {
                  this.produceFrom.undesirable = 0
               }
               uni.showToast({
                  title: '产出数量不能小于',
                  duration: 2000,
                  icon: 'none'
               })
            }
         },
         clickPerformanceType(item, index) {
            this.form.index = index
            this.form.type = item.type
         },
         submit() {
            let createUnqualifiedDTOList = this.form.defective.map((item) => {
               return {
                  categoryId: item.id,
                  unQualifiedNum: item.num
               }
            })
            let createWorkorderRecordDTO = {
               workorderId: this.workorderId,
               duration: this.form.duration ? this.form.duration : 0,
               qualifiedNum: this.produceFrom.qualified ? this.produceFrom.qualified : 0,
               unQualifiedNum: this.produceFrom.undesirable ? this.produceFrom.undesirable : 0
            }
            // id: route.query.id
            comfirmDoneStandard({
               createUnqualifiedDTOList,
               createWorkorderRecordDTO
            }).then(res => {
               if (res.code === 200) {
                  uni.$u.toast('报工成功')
                  setTimeout(() => {
                     uni.navigateBack({
                        data: 2
                     })
                  }, 2000)
               }
            })
         },
         jumpdj() {
            uni.navigateTo({
               url: `/pages_adjust/pages/spotCheck/spotCheck?id=${this.workorderId}`
            })
         },
         getLists() {
            if (!this.finished) {
               return
            }
            this.finished = false
            this.pages.page += 1
            this.pageDJs()
         },
         pageDJs() {

            pageDJ({
                  capacity: this.pages.capacity,
                  page: this.pages.page,
                  model: {
                     workorderId: this.workorderId
                  }
               }).then(res => {
                  let {
                     data
                  } = res
                  if (data.page == 1) {
                     this.djData = []
                  }
                  this.djData.push(...data.records)
                  // loading.value = false
               }).catch(err => {
                  // loading.value = false
                  // finished.value = true
               })
               .finally(() => {
                  this.finished = true
               })
         },
         dele(id) {
            deletedj(id)
               .then(res => {
                  if (res.code === 200) {
                     this.finished = true
                     this.pages.page = 1
                     this.pageDJs()
                  }
               })
         },
         confirm() {
            let isOpen = false
            this.cateList.forEach((item, index) => {
               if (item.active) {
                  isOpen = true
               }
            })
            if (!isOpen) {
               uni.showToast({
                  title: '请选择不良项',
                  duration: 2000,
                  icon: 'none'
               })
               return
            }
            let arr = []
            let total = 0
            let name = ''
            this.cateList.forEach((item, index) => {
               if (item.active) {
                  if (item.num <= 0) {
                     uni.showToast({
                        title: '不良数量必须大于0',
                        duration: 2000,
                        icon: 'none'
                     })
                     return
                  }
                  total = total += item.num
                  arr.push(item)
                  name += item.name + item.num + '；'
               }
            })
            if (total != Number(this.produceFrom.undesirable)) {
               uni.showToast({
                  title: '不良数必须等于产出不良数',
                  duration: 2000,
                  icon: 'none'
               })
               return
            }
            this.form.defective = arr
            this.form.defectiveName = name
            this.badShow = false
         },
         changeChecked(i) {
            this.cateList[i].active = !this.cateList[i].active
         },
         jumpTL() {
            uni.navigateTo({
               // url: ''
               url: `/pages_adjust/pages/manualFeed/manualFeed?id=${this.workorderId}`
            })
         },
         deleItem(id, type) {
            uni.showModal({
               title: '提示',
               content: '确定删除此条记录吗？',
               success: (res) => {
                  if (res.confirm) {
                     console.log('用户点击确定');
                     deleteCT(id)
                        .then(res => {
                           this.getOrocessRecords()
                           // if (type === 'C') {
                           //    this.getOrocessRecordCC()
                           // } else if (type === 'T') {
                           //    this.getOrocessRecords()
                           // }
                        })
                        .catch(err => {})
                  }
               }
            })
         }
      }
   }
</script>

<style lang="scss" scoped>
   .bg_cate {
      width: 100%;
      height: 88rpx;
      background: #FFFFFF;
      display: flex;
      align-items: center;

      .active {
         box-sizing: border-box;
         color: #305ED5 !important;
         font-weight: 500;
         border-bottom: 3rpx solid #305ED5;
      }

      .bg_cate_item {
         flex: 1;
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 30rpx;
         font-weight: 400;
         color: #555555;
      }
   }

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

      .bg_list_item {
         display: flex;
         flex-direction: column;
         // margin-bottom: 40rpx;
         border-bottom: 40rpx #f7f7f7 solid;

         .kong {
            text-align: center;
            padding: 30rpx 0;
            background: #ffffff;
            font-size: 25rpx;

            span {
               color: #474747;
            }
         }

         .bg_list_item_top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 30rpx;
            padding-right: 30rpx;
            margin-bottom: 30rpx;

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

               .left {
                  margin-left: 12rpx;
                  font-size: 28rpx;
               }

               .warning {
                  width: 8rpx;
                  height: 30rpx;
                  border-radius: 2rpx;
                  margin-right: 12rpx;
                  // background: $nav-stateColor5 !important;
               }

               .error {
                  width: 8rpx;
                  height: 30rpx;
                  border-radius: 2rpx;
                  margin-right: 12rpx;
                  // background: $nav-stateColor4 !important;
               }

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

               span {
                  font-size: 32rpx;
                  font-weight: 500;
                  color: #222222;
                  display: flex;
                  align-items: center;
               }
            }

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

               image {
                  width: 28rpx;
                  height: 28rpx;
                  margin-right: 12rpx;
               }

               span {
                  font-size: 28rpx;
                  font-weight: 400;
               }
            }
         }

         .bg_list_item_h {
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            background: white;

            .bg_list_item_num {
               width: 100%;
               min-height: 98rpx;
               background: white;
               display: flex;
               justify-content: center;
               align-items: center;
               border-bottom: 1rpx solid #E5E5E5;

               &:last-child {
                  border: none !important;
               }

               .kong {
                  text-align: center;
                  font-size: 25rpx;
                  padding: 30rpx 0;
                  background: #ffffff;
               }

               .bg_list_item_num_item {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  // height: 118rpx;
                  padding: 15rpx 0;
                  box-sizing: border-box;
                  justify-content: space-between;
                  border-bottom: 1rpx 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: 116rpx;
                        height: 62rpx;
                        line-height: 62rpx;
                        text-align: center;
                        background: #F2F2F2;
                        border-radius: 8rpx;
                        font-size: 26rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        margin-right: 20rpx;

                        &:last-child {
                           margin: 0 !important;
                        }
                     }
                  }

                  .bg_list_item_num_item_wl {
                     flex-shrink: 0;
                     display: flex;
                     flex-direction: column;
                     font-size: 34rpx;
                     color: #222222;

                     .bg_list_item_num_item_wl_lx {
                        margin-top: 10rpx;
                        color: #222222;
                        font-size: 28rpx;
                     }
                  }

                  // .warning {
                  //    color: $nav-stateColor5 !important;
                  // }

                  // .err {
                  //    color: $nav-stateColor4 !important;
                  // }

                  img {
                     width: 12rpx;
                     height: 24rpx;
                     margin-left: 20rpx;
                  }

                  span {
                     flex-shrink: 0;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;

                     b {
                        font-size: 30rpx;
                        color: red;
                        margin-right: 5rpx;
                     }

                     // .warning {
                     //    color: $nav-stateColor5 !important;
                     //    margin-right: 5rpx;
                     // }

                     // .err {
                     //    color: $nav-stateColor4 !important;
                     //    margin-right: 5rpx;
                     // }

                     &:nth-child(1) {
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #222222;
                     }

                     &:nth-child(2) {
                        font-size: 28rpx;
                        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: 28rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                     }

                     input::-webkit-input-placeholder {
                        font-size: 28rpx;
                     }

                     input {
                        text-align: right;
                        width: 180rpx;
                        height: 60rpx;
                        border-radius: 8rpx;
                        border: 1rpx solid #E5E5E5;
                        margin-right: 20rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #333333;
                        padding: 0 30rpx
                     }

                     .wulll {
                        width: 400rpx;
                        text-align: right;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                     }

                     span {
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #999999;
                     }
                  }
               }
            }
         }
      }
   }

   .bg_plan {
      width: 100%;
      // height: 98px;
      padding: 30rpx;
      box-sizing: border-box;
      background: #FFFFFF;
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
         font-size: 30rpx;
         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: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            margin-top: 20rpx;

            &:first-child {
               font-size: 32rpx;
               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: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
         }


      }
   }

   .img_ar {
      width: 12rpx;
      height: 24rpx;
      margin-left: 20rpx;
   }

   .bh_zw {
      height: 160rpx;
   }

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

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

         .fornt-img {
            width: 28rpx;
            height: 28rpx;
            margin-right: 12rpx;
         }

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

      .bg_footer_submit {
         width: 690rpx;
         height: 88rpx;
         box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.08);
         border-radius: 8rpx;
         font-size: 30rpx;
         font-weight: 500;
         color: #FFFFFF;
         display: flex;
         align-items: center;
         justify-content: center;
      }
   }

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

      .details_dj_list {
         width: 100%;
         box-sizing: border-box;
         background: #ffffff;
         display: flex;
         flex-direction: column;

         .details_dj_list_item {
            display: flex;
            flex-direction: column;
            border-bottom: 1rpx solid #E5E5E5;
            padding: 30rpx;
            line-height: 42rpx;

            span {
               &:nth-child(1) {
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #222222;
               }

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

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

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

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

      }
   }

   .contanir {
      height: calc(env(safe-area-inset-bottom) + 720rpx);

      .content {
         margin-top: 20rpx;

         .type-style {
            width: 325rpx;
            margin-bottom: 20rpx;
         }
      }
   }

   .bottom-view {
      left: 40rpx;
      right: 40rpx;
      bottom: 0
   }

   .bl_list {
      width: 100%;
      height: calc(100% - 168rpx);
      overflow-y: scroll;
      margin-top: 30rpx;

      .bl_list_item {
         width: 100%;
         height: 96rpx;
         display: flex;
         align-items: center;
         justify-content: space-between;
         border-bottom: 1rPX solid #E5E5E5;

         &:last-child {
            border: none !important;
         }

         .bl_list_item_left {
            flex: 1;
            display: flex;
            align-items: center;

            input {
               width: 30rpx;
               height: 30rpx;
               border: 1rpX solid #CCCCCC;
               margin: 0 !important;
            }

            span {
               font-size: 30rpx;
               color: #222222;
               margin-left: 10rpx;
            }
         }

         .bl_list_item_right {
            flex: 1;
            height: 50rpx;
            text-align: right;

            input {
               padding-left: 5rpx;
               width: 160rpx;
               height: 100%;
               padding: 0 30rpx;
               box-sizing: border-box;
               text-align: right;
               font-size: 28rpx;
               color: #333333;
               border-radius: 10rpx;
               border: 1rPX solid #CCCCCC;

               &::-webkit-input-placeholder {
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #999999;
               }
            }
         }
      }
   }
</style>