DWY_mobile/src/views/page/Dispatch/detail.vue

<template>
  <div style="overflow: auto;padding-bottom: 6.6rem;box-sizing: border-box;">
    <div >
      <div class="home_header">发货</div>
      <div class="home_header_line"></div>
      <div class="home_con_body">
        <div class="home_con_s">
          <div v-if="is_show" class="pack_up">
            <img @click="handleShow" src="../../../assets/home/collect.png" alt="">
          </div>
          <div v-if="!is_show" :class="!is_show ? 'pack_up_d' : ''" class="pack_up" style="display: flex;gap: .3125rem;" @click="handleShow">
            <div style="font-size: 0.88rem;
color: #ABDFFF;">展开</div>
            <img style="width: 0.41rem;height: 0.69rem;" src="../../../assets/home/zk.png" alt="">
          </div>
          <div v-if="is_show" class="pack_up_con">
            <p class="pack_up_name">{{name}}</p>
            <div class="pack_up_grid">
              <div>
                <p>预发总数</p>
                <div><span>{{ total_num }}</span><span>张</span></div>
              </div>
              <div>
                <p>已扫总数</p>
                <div><span>{{ scan_num }}</span><span>张</span></div>
              </div>
              <div>
                <p>未扫总数</p>
                <div><span>{{ total_num - scan_num }}</span><span>张</span></div>
              </div>
              <div @click="handleErrorShow">
                <p>异常总数</p>
                <div><span style="color:red !important;">{{error_num}}</span><span>张</span></div>
              </div>
            </div>
          </div>
        </div>

        <div class="send_work" v-if="tableData.length > 0" v-for="(item, index) in tableData" :key="index">
<!--          <div class="check_box">-->
<!--            <div @click="handleChoose(item, index)" :class="item.is_choose ? 'check_box_c_active' : 'check_box_c'">-->
<!--            </div>-->
<!--          </div>-->
          <div class="secd_flex" style="margin-top: .8rem">
            <div class="secd_title">
              <span>发货单号：</span><span> {{ data.data.exe_delivery_note_b.no }}</span>
            </div>
            <span class="secd_title_d">{{ item.material_name }}</span>
            <div class="secd_g"><span>规格型号：</span><span>{{ item.specs }}</span></div>
            <div class="secd_flex_w">
              <div class="secd_flex_s">
                <span>已扫到数量：</span>
                <span>{{ item.out_qty }}张</span>
              </div>
              <div class="secd_flex_s">
                <span>未发货数量：</span>
                <span>{{ item.this_delivery_qty  }}张</span>
              </div>
            </div>
          </div>

        </div>
        <div v-if="tableData.length == 0"
          style="display: flex;width: 100%;height: 10rem;justify-content: center;align-items: center;">

          <Spin size="small" />
          <Spin />
          <Spin size="small" />

        </div>
        <div class="footer">

          <div class="return_btn" @click="handleReturn">返回</div>
          <div class="confirm_btn" @click="handleSureClick">确认</div>
        </div>
      </div>
    </div>
    <Modal
        v-model="is_error"
        width="80"
        footer-hide
        :closable="false"
        :mask-closable="false"
    >
      <div style="font-size: 1.2rem; font-weight: bold;">异常数据</div>
      <div style="height: 50vh;overflow: auto">
      <Form v-for="(item,index) in error_data" :key="index" :label-width="120" style="width:100%;background-color: rgba(79,97,201,0.21);border-radius: 1rem;margin: .7rem 0">
        <FormItem label="包装单号:" style="margin-bottom: .2rem !important;">
          <span>{{item.box_no}}</span>
        </FormItem>
        <FormItem label="订单号:" style="margin-bottom: .2rem !important;">
          <span>{{item.order_no}}</span>
        </FormItem>
        <FormItem label="客户名称:" style="margin-bottom: .2rem !important;">
          <span>{{item.box_detail.customer_name}}</span>
        </FormItem>
        <FormItem label="产品名称:" style="margin-bottom: .2rem !important;">
          <span>{{item.box_detail.product_title}}</span>
        </FormItem>
        <FormItem label="规格型号:" style="margin-bottom: .2rem !important;">
          <span>{{item.box_detail.product_size}}</span>
        </FormItem>
        <FormItem label="包装数量:" style="margin-bottom: 0">
          <span>{{item.box_num}}</span>
        </FormItem>
      </Form>
  </div>
      <div style="text-align: center">
        <Button
            style="margin-left: 1rem"
            type="primary"
            @click="is_error = false"
        >返回</Button
        >
      </div>
    </Modal>
    <Modal
        v-model="is_modal"
        width="80"
        footer-hide
        :closable="false"
        :mask-closable="false"
    >
      <div style="font-size: 1.2rem; font-weight: bold">物流信息</div>
      <Form :label-width="120">
        <FormItem label="司机姓名:">
          <Input v-model="modalData.carrier" clearable placeholder="请输入司机姓名"/>
        </FormItem>
        <FormItem label="司机联系电话:">
          <Input v-model="modalData.carrier_phone" clearable placeholder="请输入司机联系电话"/>
        </FormItem>
        <FormItem label="车牌号码:">
          <Input clearable placeholder="请输入车牌号码" v-model="modalData.plate_no"/>
        </FormItem>
        <FormItem label="司机身份证号码:">
          <Input clearable placeholder="请输入司机身份证号码" v-model="modalData.id_number"/>
        </FormItem>
        <FormItem label="附件">
          <div class="total_img">
              <div class="img_content" v-for="(item,index) in modalData.attachment.attachFile" :key="index">
                <div>{{item.name}}</div>
                <Icon
                    size="20"
                    @click="handleDelet(index)"
                    class="delete-img"
                    type="ios-close-circle"
                />
              </div>
              <Upload
                  multiple
                  :headers="headers"
                  v-show="modalData.attachment.attachFile.length!=3"
                  :show-upload-list="false"
                  :on-success="(res, file) => handleSuccess(res, file)"
                  :before-upload="handleError"
                  :data="imgData"
                  :action="$store.state.ip + '/api/upload'"
              >
                <div class="upd_file">
                  <Icon type="ios-cloud-upload-outline" class="ico" size="30" />
                </div>
              </Upload>
            </div>
        </FormItem>
      </Form>
      <div style="text-align: center">
        <Button
            style="margin-right: 1rem"
            type="error"
            @click="is_modal = false"
        >取消</Button
        >
        <Button
            style="margin-left: 1rem"
            type="primary"
            @click="handelGoSure"
        >确认</Button
        >
      </div>
    </Modal>
  </div>
  <!-- <div>
    <div class="header">
      <div class="header_top">
        <Button type="primary" class="header_btn" ghost @click="handleShow"
          :icon="is_show ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'">
          <div style="margin-right: 0.6rem">
            {{ is_show ? "收起" : "展开" }}
          </div>
        </Button>
        <div style="margin-right: 1rem; color: #66a9f0">王小伟</div>
      </div>
      <div class="header_middle">
        <b-dropdown size="sm" text="产品总数" class="m-2" :disabled="is_use">
          <b-dropdown-item-button>Action</b-dropdown-item-button>
          <b-dropdown-item-button>Another action</b-dropdown-item-button>
          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
        </b-dropdown>
        <b-dropdown size="sm" text="已扫总数" class="m-2" :disabled="is_use">
          <b-dropdown-item-button>Action</b-dropdown-item-button>
          <b-dropdown-item-button>Another action</b-dropdown-item-button>
          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
        </b-dropdown>
        <b-dropdown size="sm" text="未扫总数" class="m-2" :disabled="is_use">
          <b-dropdown-item-button>Action</b-dropdown-item-button>
          <b-dropdown-item-button>Another action</b-dropdown-item-button>
          <b-dropdown-item-button>Something else here</b-dropdown-item-button>
        </b-dropdown>
      </div>
      <div class="header_middle1 ot">
        <div class="ft">{{ total_num }} &nbsp;</div>
        <div class="ft">{{ scan_num }} &nbsp;</div>
        <div class="ft">{{ total_num - scan_num }} &nbsp;</div>
      </div>
      <div class="header_footer">
        <div style="margin-left: 1rem">已发货{{ transport_total }}</div>

      </div>
    </div>
    <div class="bdy">
      <table>
        <tr style="height: 2rem">
          <th style="width: 3rem">销售单号</th>
          <th style="width: 4rem">产品名称</th>
          <th style="width: 3rem">规格型号</th>
          <th style="width: 3rem">已扫到数量</th>
          <th style="width: 3rem">未发货数量</th>
        </tr>
        <tr v-for="(item, index) in tableData" :key="index" @click="handleChoose(item, index)">
          <td>
            {{ item.bus_no }}
          </td>
          <td>{{ item.product_title }}</td>
          <td>{{ item.product_size }}</td>
          <td>{{ item.out_qty }}</td>
          <td>{{ item.this_delivery_qty - item.out_qty }}</td>
        </tr>
      </table>
    </div>
    <div class="footer">
      <Button type="primary" class="header_btn" style="margin-right: 3rem; height: 2.6rem" @click="handleReturn">
        返回</Button>
      <Button type="primary" class="header_btn" style="margin-left: 3rem; height: 2.6rem" @click="handelGoSure">
        确认</Button>
    </div>
  </div> -->
</template>
<script>
export default {
  data () {
    return {
      imgData: {
        url: 'http://122.112.250.253:7774/jbl/api/file/upload',
        header:[]
      },
      headers: {},
      modalData: {
        carrier: '',
        carrier_phone: '',
        plate_no: '',
        id_number: '',
        attachment:{
          attachFile:[]
        }
      },
      is_modal: false,
      name: '',
      error_num:0,
      employee_code: '',
      tableData: [],
      key_tableData: {},
      send_goods_out: {},
      data: {},
      send_goods_out_product: {},
      is_show: true,
      is_use: false,
      total_num: 0,
      scan_num: 0,
      saveData: 0,
      detail: {},
      transport_total: 0,
      scan_data: [],
      new_table_data: [],
      state: true,
      is_error: false,
      error_data:[],
      text1:[]
    }
  },
  mounted() {
    const token = localStorage.getItem('token')
    const site = JSON.parse(localStorage.getItem('site'))
    this.imgData.header = [`Authorization:Bearer ${token}`, 'Content-Type:application/json', `Site:${site.site}`]
    this.name=JSON.parse(localStorage.getItem('userDto')).name
    this.employee_code = JSON.parse(localStorage.getItem('userDto')).mark1Code
    // if (localStorage.getItem('fyy_target')) {
    //   data.target = JSON.parse(localStorage.getItem('fyy_target'))
    // }
    this.handleShow()
    this.tableData = []
    const id = this.$route.query.id
    const data = {
      url: `http://122.112.250.253:7774/jbl/api/module-data/delivery_note/delivery_note/478838363726815232/${id}`
      // post: {"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[{"field":"dispatch_orders.dispatch_no","option":"LIKE_ANYWHERE","values":[v]},{"field":"product_no","option":"LIKE_ANYWHERE","values":["BC030101000001"]}],"size":15,"specialConditions":[],"workflowSearchBean":{},"dynamicFormCode":"dispatch_orders","dynamicFormTable":null,"ignoreField":true,"developmentSystemId":null,"debugFlag":true},
    }
    this.initData(data)
  },
  destroyed () {
    // localStorage.removeItem('text')
  },
  methods:{
    handleErrorShow(){
      if(this.error_num){
        this.is_error = true;
      }
    },
    handleDelet(index){
      this.modalData.attachment.attachFile.splice(index,1);
    },
    handleSuccess (res, file) {
      if (res.code === 200) {
        res.data.data.name = res.data.data.name.split('/')[ res.data.data.name.split('/').length-1]
        this.modalData.attachment = {
          attachFile:[...this.modalData.attachment.attachFile,res.data.data],
          createdBy: res.data.data.createdBy,
          createdDate: res.data.data.createdDate,
          deleted: res.data.data.deleted,
          id: res.data.data.id,
          insertCreateBy: null,
          lastModifiedBy: res.data.data.lastModifiedBy,
          lastModifiedDate: res.data.data.lastModifiedDate,
          remark: res.data.data.remark,
          transport: null
        }
      }
    },
    handleError (file) {
      // if (file.size > 3099648) {
      //   this.$Message.warning('图片文件大小不能超过3mb！')
      //   return false
      // }
    },
    // 原始数据获取
    initData(row) {
      this.axios.post('/api/testdwyget', { ...row }).then(res => {
        // this.tableData.push(...res.data.data.exe_delivery_note_dtl_b);
        this.data = res.data
        this.detail = res.data.data.exe_delivery_note_b
        console.log(this.detail)
        this.modalData.attachment = this.detail.attachment?this.detail.attachment:{attachFile: []};
        this.modalData.id_number = this.detail.id_number;
        this.modalData.carrier = this.detail.carrier;
        this.modalData.carrier_phone = this.detail.carrier_phone;
        this.modalData.plate_no = this.detail.plate_no;
        res.data.data.exe_delivery_note_dtl_b.forEach((element, index) => {
          element.out_qty = 0
          element.product_code = element.material_code
          this.total_num = this.total_num + element.this_delivery_qty
          // this.transport_total = this.transport_total + element.out_qty
          let product_key = this.deelUniqueProductKey(element)
          if(Object.keys(this.key_tableData).indexOf(product_key) !== -1) this.key_tableData[product_key].this_delivery_qty += element.this_delivery_qty
          else this.key_tableData[product_key] = element
          // if (element.box_orders_show) {
          //   this.is_box_data.push(this.deelUniqueKey(element));
          // }
        })
        for (let key in this.key_tableData) {
          this.tableData.push(this.key_tableData[key])
        }
        // let ji = ['\"425A3030303235\"']
        // console.log(JSON.stringify(ji))
        let text = []
        if (localStorage.getItem('fyy_target')) {
          // console.log(JSON.parse(localStorage.getItem('fyy_target')))
          let target = JSON.parse(localStorage.getItem('fyy_target'))
          localStorage.removeItem('fyy_target')
          // this.$Message.warning(localStorage.getItem('fyy_target'))
          target.forEach(v => {
            v = v.replace(/\"/g, '')
            text.push(this.func.hexToString(v))
          })
        //   // console.log(text)
        }
        let text1 = localStorage.getItem('text') ? JSON.parse(localStorage.getItem('text')) : []
        text.forEach(v => {
          if (text1.indexOf(v) === -1) {
            text1.push(v)
          }
        })
        localStorage.setItem('text', JSON.stringify(text1));
        text1 = ['BZ00280','BZ00281']
        const dataBox = {
          url: 'http://122.112.250.253:7774/jbl/api/module-data/box_orders/box_orders/diy/defective_order_no_list',
          post: { "defective_order_no_list":text1}
        }
        // const dataBox = {
        //   url: 'http://122.112.250.253:7774/jbl/api/module-data/box_orders/box_orders/diy/defective_order_no_list',
        //   post: { "defective_order_no_list":['BZ00025']}
        // }
        this.initDataBox(dataBox)
      })
    },
    // 扫描数据获取
    initDataBox (row) {
      this.$Message.warning(row.post["defective_order_no_list"].toString())
      this.text1 = row.post["defective_order_no_list"];
      console.log(this.text1)
      this.axios.post('/api/testdwy', { ...row }).then(res => {
        if (res.code == 200) {
          this.$Message.success('请求成功！')
          res.data.data.forEach((element, index) => {
            element.product_code = element.product_no
            let object = {
              "order_item_id": element.order_item_id,
              "order_no": element.order_no,
              "box_num": element.box_num,
              "product_code": element.product_code,
              "box_no": element.box_orders.defective_order_no,
              "color": element.color,
              "color_two": element.color_two,
              "process_title": element.process_title,
              "process_title_two": element.process_title_two,
              "box_orders": element.box_orders.id,
              "box_id": element.box_orders.id,
              'box_detail': element
            }
            this.scan_data.push(object)
          })
          this.deelTableData()
        }
      })
    },
    deelUniqueKey(element) {
      let key = element.box_orders_show
      return key;
    },
    deelUniqueProductKey(element) {
      let key = element.product_code + (element.color?element.color:'') + (element.color_two?element.color_two:'') +(element.process_title?element.process_title:'') +(element.process_title_two?element.process_title_two:'')
      return key;
    },
    // 将原始数据处理拼接成提交的数据
    deelTableData() {
      // let new_table_data = [];
      // let is_scan_key = {};
      this.error_data = []
      this.scan_data.forEach((element, index) => {
        // console.log(element,1)
        // console.log(this.key_tableData,2)
        // console.log(this.deelUniqueProductKey(element),3)
        if (element.order_no==this.detail.order_no&&Object.keys(this.key_tableData).indexOf(this.deelUniqueProductKey(element)) !== -1 && (this.key_tableData[this.deelUniqueProductKey(element)].this_delivery_qty - element.box_num) >= 0) {
          let table_data_detail = JSON.parse(JSON.stringify(this.key_tableData[this.deelUniqueProductKey(element)]))
          table_data_detail.box_orders = element.box_id
          table_data_detail.box_orders_show = element.box_no
          table_data_detail.box_detail = element.box_detail
          table_data_detail.this_delivery_qty = element.box_num
          table_data_detail.out_qty = element.box_num
          this.key_tableData[this.deelUniqueProductKey(element)].this_delivery_qty -= element.box_num*1
          this.key_tableData[this.deelUniqueProductKey(element)].out_qty += element.box_num*1;
          this.scan_num += element.box_num*1
          // is_scan_key[this.deelUniqueProductKey(element)]=1;
          // table_data_detail.this_delivery_qty =  this.key_tableData[this.deelUniqueProductKey(element)].this_delivery_qty;
          table_data_detail.id = null;

          this.new_table_data.push(table_data_detail)
        } else {
          this.error_data.push(element);
          this.error_num += element.box_num*1
        }
      })
      // this.tableData.forEach((element, index) => {
      //   // if (element.this_delivery_qty > 0 && element.out_qty === 0) {
      //   //   new_table_data.push(element)
      //   // }
      // })
      // this.tableData = new_table_data;
    },
    handleSureClick () {
      this.is_modal = true
    },
    handelGoSure () {
      this.tableData.forEach((element, index) => {
        element.item_num = (index + 1)
      })
      const date = new Date()
      // eslint-disable-next-line camelcase
      const now_time = date.toISOString()
      this.data = {
        // auditInfo: null,
        bizId: -1,
        bizTypeEk: 'LOWCODE',
        // businessType: null,
        // createdBy: "473698106823094272",
        createdDate: now_time,
        dynamicFormId: '474057887278641152',
        // extDataId: null,
        // id: "491138208411951104",
        // lastModifiedBy: "473698106823094272",
        // lastModifiedDate: now_time,
        // requestId: null,
        showModelId: '474061442555260928',
        version: 1,
        // versionNo: null,
        data: {
          send_goods_out: {},
          send_goods_out_product: []
        }
      }
      this.data.data.send_goods_out = {
        send_goods_out_no: null,
        in_out_type: 'CK007',
        box_title: 'WH05001',
        out_time: now_time,
        out_depart: '481280388644478976',
        out_employee_id: this.employee_code,
        expect_date_delivery: this.detail.expect_date_delivery,
        expect_date_arrival: this.detail.expect_date_arrival,
        delivery_method_dk: this.detail.delivery_method_dk,
        express_company: null,
        express_no: null,
        carrier: this.modalData.carrier, // 司机姓名
        carrier_phone: this.modalData.carrier_phone, // 司机电话
        plate_no: this.modalData.plate_no, // 车牌
        id_number: this.modalData.id_number, // 身份证
        attachment: this.modalData.attachment,
        area_selection: this.detail.area_selection,
        detailed_address: this.detail.detailed_address,
        contact: this.detail.contact,
        contact_way: this.detail.contact_way,
        status: 'NOT_APPROVED',
        oa_id: null,
        oa_time: null,
        remark: null,
        order_no: this.detail.order_no,
        site: null,
        in_out_type_show: '成品发货出库',
        box_title_show: '成品仓',
        out_depart_show: '仓储部',
        out_employee_id_show: this.name,
        delivery_method_dk_show: this.detail.delivery_method_dk_show,
        area_selection_show: this.detail.area_selection_show,

        // attachment: null,
        // dynamic_form_value_id: this.detail.dynamic_form_value_id,
        // expect_date_arrival_lt: this.detail.expect_date_arrival_lt,
        // expect_date_delivery_lt: this.detail.expect_date_delivery_lt,
        // id: "491138208583917568"
        // main_table_id: null,
        // oa_id_show: null,
        // oa_time_lt: null,
        // out_time_lt: now_time,
        // request_id: null,
        // send_goods_out_no: "FCK2023091700099",
        // site_show: this.detail.site_show,
        // status_show: '待审核'
      }
      this.new_table_data.forEach((element,index) =>{
        // console.log(element)
        let box_detail = {
          item_num: (index + 1),
          product_code: element.box_detail.product_code,
          product_title: element.box_detail.product_title,
          product_size: element.box_detail.product_size,
          product_unit: element.box_detail.product_unit,
          product_unit_title: element.box_detail.product_unit_title,
          process_code: element.box_detail.process_code,
          color_code: element.box_detail.color_code,
          process_code_two: element.box_detail.process_code_two,
          color_code_two: element.box_detail.color_code_two,
          process_title: element.box_detail.process_title,
          color: element.box_detail.color,
          process_title_two: element.box_detail.process_title_two,
          color_two: element.box_detail.color_two,
          bus_no: this.detail.no,
          bus_id: element.bus_id,
          bus_item_id: element.bus_item_id,
          bus_item_no: element.item_no,
          order_no: element.box_detail.order_no,
          out_qty: element.out_qty,
          this_delivery_qty: element.out_qty,
          order_item_id: element.order_item_id,
          unit_price: element.unit_price,
          site: null,
          customer_name: element.box_detail.customer_name,
          customer_no: element.box_detail.customer_no,
          dealer_name: element.box_detail.dealer_name,
          dealer_no: element.box_detail.dealer_no,
          box_orders: element.box_detail.box_orders.id,
          box_orders_show: element.box_detail.box_orders.defective_order_no
          // site_show: element.box_detail.site_show
          // dynamic_form_value_id: element.box_detail.dynamic_form_value_id,
          // id: "491138208592306176"
          // lineId: "29E776DE",
          // mainKey: "29E776DE",
          // main_table_id: "491138208583917568",
          // request_id: null,
        }
        this.data.data.send_goods_out_product.push(box_detail)
      })
      // console.log(this.data)
      // return false
      // this.data.data.send_goods_out = this.tableData
      // this.data.data.send_goods_out_product = this.tableData
      let data = {
        url: 'http://122.112.250.253:7774/jbl/api/module-data/send_goods_out/send_goods_out',
        post: this.data
      }
      let data1 ={
        url: 'http://122.112.250.253:7774/jbl/api/module-data/box_orders/box_orders/diy/update_delivery_status',
        post: {
          defective_order_no_list:this.text1
        }
      }
      if(this.state){
        this.state = false
        this.axios.post('/api/testdwy', data).then(res => {
          if (res.code === 200) {
            this.axios.post('/api/testdwy', data1).then(req=>{
              if(req.code === 200){
                this.is_modal = false
                this.$router.go(-1)
              }
            })
            this.$Message.success(res.msg)
          }
          setTimeout(()=>{
            this.state = true
          },5000)
        })
      }
      // console.log(JSON.stringify(this.data))
    },
    handleReturn() {
      localStorage.removeItem('fyy_target')
      this.$router.push('/cms/finish')
    },
    handleChoose(item, index) {
      item.is_choose = !item.is_choose
      this.tableData.splice(index, 1, item)
    },
    handleShow() {
      this.is_show = !this.is_show
      // console.log(document.getElementsByClassName('header'))
    }
  }
}
</script>
<style lang="scss" scoped>
.return_btn {
  background-image: url('../../../assets/home/return.png');
  background-size: 100% 100%;
}

.confirm_btn {
  background-image: url('../../../assets/home/confirm.png');
  background-size: 100% 100%;
}

.return_btn,
.confirm_btn {
  width: 10.97rem;
  height: 3.93rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: 1px;
}

.secd_flex_s>span:nth-child(1) {
  font-size: 0.94rem;
  color: #ABDFFF;
}

.secd_flex_s>span:nth-child(2) {
  font-size: 0.94rem;
  color: #03FCD3;
}

.secd_g {
  font-size: 1rem;
  color: #ABDFFF
}

.secd_title_d {
  font-size: 1.13rem;
  color: #FFFFFF;
  text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
  //white-space: nowrap;
  //overflow: hidden;
  //text-overflow: ellipsis;
}

.secd_flex_w {
  display: flex;
  justify-content: space-between;
  padding-right: 1.6rem;
  box-sizing: border-box;
}

.secd_flex {
  display: flex;
  flex-direction: column;
  gap: .375rem;

  .secd_title {
    font-size: 0.88rem;
    color: #ABDFFF;
    opacity: 0.5;
  }
}


.check_box_c {
  width: 1.19rem;
  height: 100%;
  background-image: url('../../../assets/home/check.png');
  background-size: 100% 100%;

}

.check_box_c_active {
  width: 1.3rem;
  height: 100%;
  background-image: url('../../../assets/home/checked.png');
  background-size: 100% 100%;
}

.send_work {
  //height: 10.69rem;
  height: auto;
  background-image: url('../../../assets/home/packUpback.png');
  background-size: 100% 100%;
  margin-top: 1.38rem;
  padding: 0.44rem 0.4rem 1.34rem 1.22rem;
  box-sizing: border-box;

  .check_box {
    height: 1.19rem;
    display: flex;
    justify-content: right;
  }
}

.com_top {
  margin-top: 1.72rem !important;
}

.completion_con {
  height: 5.19rem;
  background-image: url('../../../assets/home/completion.png');
  background-size: 100% 100%;
  margin-top: 0.72rem;
  padding: 1rem 1.28rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home_con_s {
  position: relative;

  .pack_up {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5.56rem;
    background-image: url('../../../assets/home/packUp.png');
    background-size: 100% 100%;
    height: 1.97rem;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 2.59rem;
      height: 0.88rem;
    }



  }

  .pack_up_d {
    top: -1.1rem;
  }

  .pack_up_con {
    height: 13.09rem;
    background-image: url('../../../assets/home/packUpback.png');
    background-size: 100% 100%;
    padding: 1.78rem 0 1.78rem 2.03rem;
    box-sizing: border-box;

    .pack_up_name {
      height: 1.25rem;
      font-size: 1.25rem;
      color: #fff;
      font-weight: 600;
    }

    .pack_up_grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      row-gap: .625rem;

      &>div {
        display: flex;
        flex-direction: column;
        row-gap: .625rem;

        &>div {
          display: flex;
          gap: .125rem;

          span:nth-child(1) {
            font-size: 1.63rem;
            font-family: DIN-BoldItalic, DIN;
            font-weight: 600;
            color: #04FFD5;
            line-height: 1.31rem;
            transform: skewX(-10deg);
            text-shadow: 0px 0px 0px rgba(4, 255, 213, 0.23);

          }

          span:nth-child(2) {
            font-size: 1rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ABDFFF;
          }
        }

        &>p:nth-child(1) {
          font-size: 1rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ABDFFF;
          margin-bottom: 0px;
        }
      }
    }
  }
}

.home_con_body {
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

.home_header {
  height: 2.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
}

.home_header_line {
  width: 100%;
  height: .0625rem;
  background-color: #fff;
  opacity: 0.2;
}

.header {
  width: 94%;
  height: 7rem;
  // overflow: hidden;
  // transition: all 0.4s;
  position: relative;
  top: 0.5rem;
  left: 3%;
  box-shadow: 0.16rem 0.1rem 0.1rem 0.1rem #9d9b9b;
  border-radius: 1rem;
  padding: 0.4rem 0.7rem 0 1rem;
  background: #fff;
}

.header_btn {
  border-radius: 1rem;
  padding: 0.1rem;
  width: 5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.header_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ot {
  position: relative;
  top: -1.3rem;
}

.header_middle1 {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .ft {
    font-size: 1.5rem;
    width: 5rem;
    text-align: center;
  }
}

.header_middle {
  position: relative;
  top: -0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

::v-deep .btn-group>.btn,
.btn-group-vertical>.btn {
  background: #ffffff;
  color: #2c3e50;
  outline: none;
  border: none;
  margin: 0;
  z-index: 3;
}

//.header_footer {
//  position: relative;
//  top: -1.7rem;
//  display: flex;
//  justify-content: space-between;
//  align-items: center;
//
//  div {
//    font-size: 0.5rem;
//    color: rgb(244, 136, 42);
//  }
//}

.bdy {
  width: 94%;
  height: calc(100% - 18.7rem);
  overflow: auto;
  position: relative;
  top: 1rem;
  left: 3%;
}

::v-deep td {
  text-align: center;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
  /* 合并边框 */
  width: 100%;
  /* 表格宽度 */
  background: #fff;
  table-layout: fixed;
}

th {
  font-size: 0.6rem;
  background: #66b1f4;
  color: #fff;
}

td {
  font-size: 0.6rem;
  word-break: break-all;
}

td,
th {
  vertical-align: middle;
  text-align: center;
  border: 0.1rem solid #dddddd;
  /* 单元格边框样式 */
  padding: 0.02rem;
  /* 单元格内边距 */
}

.choose_item {
  background: #c8c8c8;
}

.footer {
  display: flex;
  width: 91%;
  position: absolute;
  bottom: 3rem;
}
::v-deep.ivu-modal-body{
  background: #001e57;
  border-radius: 1rem;
  color:#FFFFFF;
}
::v-deep.ivu-modal-content{
  background: transparent;
}
::v-deep.ivu-form-item-label{
  color: #FFFFFF;
}
.total_img {
  display: flex;
  flex-wrap: wrap;
  img {
    max-width: 40px;
    max-height: 40px;
  }
  .img_item {
    position: relative;
    .img_title {
      text-align: center;
    }
  }
}
.upd_file {
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}
.img_content {
  position: relative;
  margin-right:20px;
}
.delete-img {
  position: absolute;
  right: -10px;
  top: 0px;
  color: red;
}
.ico{
  color:#FFFFFF;
}
::v-deep.ivu-icon{
  color: #FFFFFF;
}
</style>