dosb-vue/src/views/billet/operator/components/orgData.vue

<template>
  <a-spin :spinning="isSpinning" wrapperClassName="orgData-info-spin">
    <div class="ticket next-ticket">
      <div style="text-align: center; position: relative">
        <div class="noprint" style="position: absolute">
          <a-button type="primary" @click="addHeatNo">添加炉号</a-button>
        </div>
        <p style="font-size: 24px; font-weight: 800; display: inline-block; margin-bottom: 16px; line-height: 30px">
          <span class="ccmno">{{ hostNumber }}</span> #机推钢室生产原始记录
        </p>
      </div>
      <div class="flex ccmno-info" style="line-height: 24px">
        <div class="flex-1"> 班组：<component :is="renderDictTag(shiftInfo.shiftGroup, 'lg_bz')" /> </div>
        <div class="flex-1"> 班次：<component :is="renderDictTag(shiftInfo.shift, 'lg_bb')" /> </div>
        <div class="flex-1 flex"
          ><span> 定尺：</span
          ><a-input v-model:value="mainSize" @blur="handleSizeBlur" style="flex: 1; margin-top: -4px" :bordered="false" size="small" />
        </div>
        <div class="flex-1" style="text-align: center">
          {{ dayjs(curTime).format('YYYY 年 MM 月 DD 日') }}
        </div>
        <div class="flex-1" style="text-align: right"> lg/R05 </div>
      </div>
      <a-table :columns="columns" size="small" :data-source="dataSource" bordered :pagination="false">
        <template #summary>
          <a-table-summary-row>
            <a-table-summary-cell :col-span="remakeColSpan" style="text-align: center">备注</a-table-summary-cell>
            <a-table-summary-cell :col-span="sizeColSpan" style="text-align: center"> 定尺 </a-table-summary-cell>
            <a-table-summary-cell :col-span="flowColSpan" style="text-align: center"> 支数（支） </a-table-summary-cell>
            <a-table-summary-cell :col-span="weightColSpan" style="text-align: center"> 产量（吨） </a-table-summary-cell>
          </a-table-summary-row>
          <a-table-summary-row class="summary-row-no-border">
            <a-table-summary-cell :row-span="2" :col-span="remakeColSpan">
              <div class="summary-cell-remark">
                <a-textarea v-model:value="mainRemark" @blur="handleRemarkBlur" style="min-height: 160px" :bordered="false" />
              </div>
            </a-table-summary-cell>
            <a-table-summary-cell :row-span="1" :col-span="1"> 热送 </a-table-summary-cell>
            <a-table-summary-cell :row-span="1" :col-span="sizeColSpan - 1">
              <div class="song-items flex" v-for="(item, index) in hotSendList" :key="index">
                <div class="title">{{ index }}</div>
                <div class="flex flex-col">
                  <div class="song-item" v-for="ele in item">{{ ele.size }}</div>
                </div>
              </div>
            </a-table-summary-cell>
            <a-table-summary-cell :col-span="flowColSpan">
              <div class="song-items flex" v-for="(item, index) in hotSendList" :key="index">
                <div class="flex flex-col">
                  <div class="song-item" v-for="ele in item">{{ ele.amount }}</div>
                </div>
              </div>
            </a-table-summary-cell>
            <a-table-summary-cell :col-span="weightColSpan">
              <div class="song-items flex" v-for="(item, index) in hotSendList" :key="index">
                <div class="flex flex-col">
                  <div class="song-item" v-for="ele in item">{{ ele.weight ? ele.weight.toFixed(3) : '' }} t</div>
                </div>
              </div>
            </a-table-summary-cell>
          </a-table-summary-row>
          <a-table-summary-row>
            <a-table-summary-cell :row-span="1" :col-span="1"> 堆垛 </a-table-summary-cell>
            <a-table-summary-cell :row-span="1" :col-span="sizeColSpan - 1">
              <div class="song-items flex">
                <div class="flex flex-col">
                  <div class="song-item" v-for="ele in stackingList">{{ ele.size }}</div>
                </div>
              </div>
              <div class="song-items flex" v-for="(item, index) in coldSendList" :key="index">
                <div class="title" style="margin-right: 10px; color: #108ee9">{{ index }}</div>
                <div class="flex flex-col">
                  <div class="song-item" v-for="ele in item">{{ ele.size }}</div>
                </div>
              </div>
            </a-table-summary-cell>
            <a-table-summary-cell :col-span="flowColSpan">
              <div class="song-items flex">
                <div class="flex flex-col">
                  <div class="song-item" v-for="ele in stackingList">{{ ele.amount }}</div>
                </div>
              </div>
              <div class="song-items flex" v-for="(item, index) in coldSendList" :key="index">
                <div class="flex flex-col">
                  <div class="song-item" v-for="ele in item">{{ ele.amount }}</div>
                </div>
              </div>
            </a-table-summary-cell>
            <a-table-summary-cell :col-span="weightColSpan">
              <div class="song-items flex">
                <div class="flex flex-col">
                  <div class="song-item" v-for="ele in stackingList">{{ ele.weight ? ele.weight.toFixed(3) : '' }} t</div>
                </div>
              </div>
              <div class="song-items flex" v-for="(item, index) in coldSendList" :key="index">
                <div class="flex flex-col">
                  <div class="song-item" v-for="ele in item">{{ ele.weight ? ele.weight.toFixed(3) : '' }} t</div>
                </div>
              </div>
            </a-table-summary-cell>
          </a-table-summary-row>
        </template>
      </a-table>
    </div>
  </a-spin>
  <!-- 设置定尺数量的modal -->
  <a-modal v-model:open="openSetSizeNumModal" title="设置定尺数量" centered width="500px" :zIndex="1100" @ok="confirmSetSizeNum">
    <div style="padding: 60px 30px 30px; font-size: 16px" v-if="editSizeNumRecord && editSizeNumRecord.hotChargeLengthArr">
      <div style="margin-bottom: 30px" v-for="(item, index) in editSizeNumRecord.hotChargeLengthArr" :key="index">
        <a-input-number
          size="large"
          v-model:value="item.totalCount"
          :min="0"
          :step="1"
          @change="
            (value) => {
              if (!value) {
                item.totalCount = 0;
              }
              // if (value % 4 !== 0) {
              //   item.totalCount = value - (value % 4);
              // }
            }
          "
          :controls="false"
        >
          <template #addonBefore>
            <div :style="{ color: item.hotChargeBtype === '0' ? '#f50' : '#108ee9' }">
              {{
                headText[item.hotChargeDestination] +
                ' ' +
                Number(item.hotChargeLength) / 1000 +
                'm ' +
                ' ' +
                (item.hotChargeBtype === '0' ? '热' : '冷')
              }}
            </div>
          </template>
        </a-input-number>
      </div>
      <div style="font-size: 16px; color: #f50">注：请输入大于等于0的数.</div>
    </div>
  </a-modal>

  <!-- 新增炉号 -->
  <a-modal v-model:open="openNewHeatNo" title="新增炉次" centered width="500px" :zIndex="1000" @ok="confirmAddHeatNo">
    <div style="padding: 60px 30px 30px; font-size: 16px">
      <a-input size="large" v-model:value="newHeatNo"></a-input>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
  import { ref, computed, h, onMounted } from 'vue';
  import dayjs from 'dayjs';
  import type { TableColumnsType } from 'ant-design-vue';
  import { queryBilletRecordByCcmNo, editBilletRecord, addBilletNo, editOriginalProductRecord } from '../operator.api';
  import { render } from '/@/utils/common/renderUtils';
  import { isArray, isNumber } from '/@/utils/is';
  import Icon from '/@/components/Icon';
  import { Input, Select } from 'ant-design-vue';
  import { throttle } from 'lodash-es';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { initDictOptions } from '/@/utils/dict';
  import { useTimeoutFn } from '/@/hooks/core/useTimeout';

  const emits = defineEmits(['statistics']);

  const { createMessage } = useMessage();
  const printKey = ref(dayjs().unix());

  const props = defineProps({
    openData: {
      type: Object,
      default: () => {},
    },
  });
  // 渲染字典标签
  const renderDictTag = (value: string, dictCode: string) => {
    return render.renderDict(value, dictCode);
  };
  // 主机号
  const hostNumber = ref('5');
  const defaultColumns: TableColumnsType = [
    {
      title: '序号',
      width: 40,
      dataIndex: 'SerialNumber',
      align: 'center',
      key: 'SerialNumber',
    },
    {
      title: '炉号',
      dataIndex: 'heatNo',
      // width: 80,
      align: 'center',
      key: 'heatNo',
    },
    {
      title: '钢种',
      // width: 80,
      align: 'center',
      dataIndex: 'brandNum',
      key: 'brandNum',
      customRender: ({ text }) => {
        return render.renderDict(text, 'billet_spec');
      },
    },
    {
      title: () => {
        return h('div', { style: { position: 'relative' } }, [
          h('span', {}, '棒一'),
          h(
            'div',
            {
              style: {
                cursor: 'pointer',
                position: 'absolute',
                right: '4px',
                top: '1px',
              },
              class: 'noprint',
              onClick: () => {
                console.log('点击了');
                const rollOnrColumn: any = columns.value.find((item: any) => item.dataIndex === 'rollOne');
                let newSize: string | number = '';
                rollOnrColumn.children.push({
                  title: () => {
                    return h(
                      // Select,
                      Input,
                      {
                        // options: sizeListOPtions.value,
                        bordered: false,
                        // dropdownStyle: {
                        //   minWidth: '80px',
                        // },
                        defaultValue: '',
                        style: {
                          padding: 0,
                          textAlign: 'center',
                        },
                        // onChange: (value) => {
                        //   newSize = value;
                        // },
                        onBlur: throttle((e) => {
                          if (e.target.value.trim() === '') {
                            createMessage.error('请输入定尺');
                            return;
                          }
                          const size = Number(e.target.value.trim());
                          if (!isNumber(size)) {
                            createMessage.error('请输入数字');
                            return;
                          }

                          newSize = size <= 20 ? size * 1000 : size;
                        }, 500),
                      },
                      ''
                    );
                  },
                  dataIndex: 'newSize',
                  key: 'newSize',
                  align: 'center',
                  // width: 100,
                  customRender({ text, record }) {
                    if (!record.heatNo) {
                      return '';
                    }
                    return h(
                      Input,
                      { class: 'total-input', size: 'small', bordered: false, value: text, onBlur: (e) => handleSizeChange(e, record, newSize) },
                      ''
                    );
                  },
                });
              },
            },
            h(Icon, { icon: 'ant-design:plus-square-outlined' }, '')
          ),
        ]);
      },
      width: 80,
      align: 'center',
      dataIndex: 'rollOne',
      key: 'rollOne',
      children: [],
    },
  ];

  const totalColum: TableColumnsType = [
    {
      title: '合计',
      dataIndex: 'total',
      key: 'total',
      align: 'center',
      // width: 100,
      customRender({ text, record }) {
        if (!record.heatNo) {
          return '';
        }
        const allCount = handleTotalSum(record.orgData);
        return h(Input, { class: 'total-input', size: 'small', bordered: false, value: allCount, onBlur: (e) => handleTotalChange(e, record) }, '');
      },
    },
  ];

  const columns = ref<TableColumnsType>(defaultColumns);
  const dataSource = ref<any[]>([]);
  const shiftInfoTxt = ref(['', '']);
  const shiftInfo = ref({ shift: '', shiftGroup: '' });
  const curTime = ref(dayjs().format('YYYY-MM-DD'));
  //表单赋值
  const fetchQueryType = ref(1);
  const fetchChangeShiftId = ref('');
  // 定尺
  const sizeListOPtions = ref([]);
  const isSpinning = ref(false);
  // 字段映射
  const headText = {
    rollClubTwoCount: '二',
    rollClubThreeCount: '三',
    rollClubShippCount: '上',
    roll_club_two: '棒二',
    roll_club_three: '棒三',
    roll_out_shipp: '上若',
  };
  const changeLoading = (b) => {
    isSpinning.value = b;
  };

  const { start, stop } = useTimeoutFn(() => {
    getHeatList(
      {
        ccmNo: hostNumber.value,
        queryType: fetchQueryType.value,
        changeShiftId: fetchChangeShiftId.value,
      },
      true
    );
  }, 60000);
  onMounted(() => {
    initData(props.openData);
  });

  let newSip: any[] = [];
  for (let index = 0; index < 22; index++) {
    newSip.push({
      SerialNumber: index + 1,
      heatNo: '',
      brandNum: '',
      oneFlow: '',
      twoFlow: '',
      threeFlow: '',
      fourFlow: '',
      fiveFlow: '',
      sixFlow: '',
      sevenFlow: '',
      eightFlow: '',
      total: '',
    });
  }
  const defaultSourceData = newSip;

  const initData = async (data) => {
    const { ccmNo, shiftText, queryType, curShiftInfo, changeShiftId, time } = data;
    printKey.value = dayjs().unix();

    hostNumber.value = ccmNo;
    fetchQueryType.value = queryType;
    fetchChangeShiftId.value = changeShiftId;
    shiftInfoTxt.value = shiftText.split('-');
    shiftInfo.value = curShiftInfo;
    if (time) {
      curTime.value = time;
    }

    dataSource.value = [...newSip];
    getHeatList(
      {
        ccmNo,
        queryType,
        changeShiftId,
      },
      true
    );

    // 获取定尺啊
    initDictOptions('lg_dcgg').then((dc) => {
      sizeListOPtions.value = (dc || []).map((item) => {
        return {
          label: Number(item.value) / 1000,
          value: item.value,
        };
      });
    });
  };

  // 备注
  const remakeColSpan = ref(8);
  // 定尺
  const sizeColSpan = ref(2);
  // 支数
  const flowColSpan = ref(2);
  // 产量
  const weightColSpan = ref(4);
  // 热送统计
  const hotSendList = ref<any>({});
  // 冷装统计
  const coldSendList = ref<any>({});
  // 堆垛统计
  const stackingList = ref<any>([]);
  // 定尺和备注
  const mainOrgSize = ref('');
  const mainSize = ref('');
  const mainOrgRemark = ref('');
  const mainRemark = ref('');

  const getHeatList = async (params, isInit?: boolean) => {
    if (isInit !== true) {
      setTimeout(() => {
        getHeatListCopy(params);
      }, 800);
    } else {
      return getHeatListCopy(params);
    }
  };
  const getHeatListCopy = async (params) => {
    try {
      stop();
      changeLoading(true);
      const { billetOriginalProductRecordList, content, sizeInfo } = await queryBilletRecordByCcmNo(params);
      let newArr: any[] = [];
      mainOrgSize.value = sizeInfo || '';
      mainSize.value = sizeInfo || '';
      mainRemark.value = content || '';
      mainOrgRemark.value = content || '';
      if (billetOriginalProductRecordList && Array.isArray(billetOriginalProductRecordList)) {
        // 根据时间排序
        newArr = billetOriginalProductRecordList.sort((a, b) => {
          return dayjs(a.createTime).isBefore(dayjs(b.createTime)) ? -1 : 1;
        });
        // 棒一
        const rollOneColumns: TableColumnsType = [];
        const rollOneSize = {};
        // 棒二
        const rollTwoSize = {};
        // 棒三
        const rollThreeSize = {};
        // 上若
        const rollShippSize = {};
        // 冷装
        const rollTwoColdSize = {};
        const rollThreeColdSize = {};
        const rollShippColdSize = {};
        // 装车按热装和冷装分组
        const rollChargeSizeType = {
          '0': {},
          '1': {},
        };
        // 堆垛
        const stackingSize = {};

        // 堆垛字段
        let stackLengthColumn: any = {
          title: () => {
            return h('div', { style: { position: 'relative' } }, [
              h('span', {}, '堆垛'),
              h(
                'div',
                {
                  style: {
                    cursor: 'pointer',
                    position: 'absolute',
                    right: '4px',
                    top: '1px',
                  },
                  class: 'noprint',
                  onClick: () => {
                    const rollOnrColumn: any = columns.value.find((item: any) => item.dataIndex === 'stackLength');
                    let newSize: string | number = '';
                    rollOnrColumn.children.push({
                      title: () => {
                        return h(
                          // Select,
                          Input,
                          {
                            //   options: sizeListOPtions.value,
                            bordered: false,
                            //   dropdownStyle: {
                            //     minWidth: '80px',
                            //   },
                            style: {
                              padding: '0px',
                              textAlign: 'center',
                            },
                            defaultValue: ' ',
                            // onChange: (value) => {
                            //   newSize = value;
                            // },
                            onBlur: throttle((e) => {
                              if (e.target.value.trim() === '') {
                                createMessage.error('请输入定尺');
                                return;
                              }
                              const size = Number(e.target.value.trim());
                              if (!isNumber(size)) {
                                createMessage.error('请输入数字');
                                return;
                              }

                              newSize = size <= 20 ? size * 1000 : size;
                            }, 500),
                          },
                          ''
                        );
                      },
                      dataIndex: 'newSize',
                      key: 'newSize',
                      align: 'center',
                      // width: 100,
                      customRender({ text, record }) {
                        if (!record.heatNo) {
                          return '';
                        }
                        return h(
                          Input,
                          { class: 'total-input', size: 'small', bordered: false, value: text, onBlur: (e) => handleStackChange(e, record, newSize) },
                          ''
                        );
                      },
                    });
                  },
                },
                h(Icon, { icon: 'ant-design:plus-square-outlined' }, '')
              ),
            ]);
          },
          dataIndex: 'stackLength',
          key: 'stackLength',
          width: 120,
          children: [],
        };

        const hotChargeColumns: any = {
          // 棒二字段
          roll_club_two: {
            title: '棒二',
            dataIndex: 'roll_club_two',
            key: 'roll_club_two',
            // width: 100,
            children: [],
          },
          // 棒三字段
          roll_club_three: {
            title: '棒三',
            dataIndex: 'roll_club_three',
            key: 'roll_club_three',
            // width: 100,
            children: [],
          },
          // 上若字段
          roll_out_shipp: {
            title: '上若',
            dataIndex: 'roll_out_shipp',
            key: 'roll_out_shipp',
            // width: 100,
            children: [],
          },
        };

        // 热装字段
        let columnsHotCharge: any = {
          roll_club_two: [],
          roll_club_three: [],
          roll_out_shipp: [],
        };

        const dataOrgSource = defaultSourceData.map((item, index) => {
          if (!newArr[index]) return item;
          const { hotChargeLength, rollClubOneDetails, stackLength } = newArr[index];

          // 棒一
          let rollOneNum = '';
          let rollOneSizesObj = {};
          // if (hotSend) {
          //   const obj = JSON.parse(hotSend);
          //   rollOneNum = obj.hotSendTotalCount || '';
          // }
          if (rollClubOneDetails) {
            const obj = JSON.parse(rollClubOneDetails);
            rollOneNum = obj.directRollingTotalCount || '';
            const lengthGroupCount = obj.lengthGroupCount;
            if (lengthGroupCount) {
              // 热送棒一的定尺
              Object.keys(lengthGroupCount).forEach((key) => {
                const column = key;
                const columnKey = column + 'rollOneColumn';
                const findIndex = rollOneColumns.findIndex((item: any) => item.dataIndex === columnKey);
                if (findIndex === -1) {
                  rollOneColumns.push({
                    title: () => {
                      return h('div', { class: 'rollOneColumnWrapper' }, [
                        h(
                          // Select,
                          Input,
                          {
                            // options: sizeListOPtions.value,
                            bordered: false,
                            // dropdownStyle: {
                            //   minWidth: '80px',
                            // },
                            style: {
                              padding: '0px',
                              textAlign: 'center',
                            },
                            defaultValue: Number(column) > 20 ? Number(column) / 1000 : column,
                            // onChange: (value) => {
                            //   switchSizehandler(value, column);
                            // },
                            onBlur: throttle((e) => {
                              const value = Number(e.target.value) < 20 ? Number(e.target.value) * 1000 : Number(e.target.value);
                              switchSizehandler(value, Number(column));
                            }, 500),
                          },
                          ''
                        ),
                        h(
                          'div',
                          { class: 'noprint', onClick: () => deleteRollOneColumn(column) },
                          h(Icon, { icon: 'ant-design:delete-outlined' }, '')
                        ),
                      ]);
                    },
                    dataIndex: columnKey,
                    key: columnKey,
                    align: 'center',
                    width: 80,
                    customRender({ text, record }) {
                      if (!record.heatNo) {
                        return '';
                      }
                      return h(
                        Input,
                        { class: 'total-input', size: 'small', bordered: false, value: text, onBlur: (e) => handleSizeChange(e, record, column) },
                        ''
                      );
                    },
                  });
                }

                rollOneSizesObj[columnKey] = lengthGroupCount[key];

                // 如果没有棒一的定尺
                if (!rollOneSize[key]) {
                  rollOneSize[key] = {
                    size: Number(column) / 1000 + 'm',
                    amount: lengthGroupCount[key],
                    weight: lengthGroupCount[key] * (Number(column) / 1000) * 0.2265,
                  };
                } else {
                  rollOneSize[key].amount += lengthGroupCount[key];
                  rollOneSize[key].weight += lengthGroupCount[key] * (Number(column) / 1000) * 0.2265;
                }
              });
            }
          }

          // 热装
          let sizeArr = {};
          if (hotChargeLength) {
            // "[{\"hotChargeLength\":\"11820\",\"hotChargeDestination\":\"roll_club_three\",\"totalWeight\":\"74.9624\",\"hotChargeBtype\":\"0\",\"totalCount\":28}]"
            const hotChargeArr = JSON.parse(hotChargeLength);
            hotChargeArr.forEach((k) => {
              const sizeFormat = Number(k.hotChargeLength) / 1000;
              const dataKey = sizeFormat + k.hotChargeDestination + k.hotChargeBtype;
              sizeArr[dataKey] = k.totalCount;
              // 热送统计
              // 棒二
              if (k.hotChargeDestination === 'roll_club_two' && k.totalCount > 0) {
                // 添加定尺
                columnsHotCharge.roll_club_two.push(sizeFormat);

                if (k.hotChargeBtype === '0') {
                  if (!rollTwoSize[k.hotChargeLength]) {
                    rollTwoSize[k.hotChargeLength] = {
                      type: k.hotChargeBtype,
                      size: Number(k.hotChargeLength) / 1000 + 'm',
                      amount: k.totalCount,
                      weight: k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265,
                    };
                  } else {
                    rollTwoSize[k.hotChargeLength].amount += k.totalCount;
                    rollTwoSize[k.hotChargeLength].weight += k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265;
                  }
                } else {
                  if (!rollTwoColdSize[k.hotChargeLength]) {
                    rollTwoColdSize[k.hotChargeLength] = {
                      type: k.hotChargeBtype,
                      size: Number(k.hotChargeLength) / 1000 + 'm',
                      amount: k.totalCount,
                      weight: k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265,
                    };
                  } else {
                    rollTwoColdSize[k.hotChargeLength].amount += k.totalCount;
                    rollTwoColdSize[k.hotChargeLength].weight += k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265;
                  }
                }
              }
              // 棒三
              if (k.hotChargeDestination === 'roll_club_three' && k.totalCount > 0) {
                // 添加定尺
                columnsHotCharge.roll_club_three.push(sizeFormat);

                if (k.hotChargeBtype === '0') {
                  if (!rollThreeSize[k.hotChargeLength]) {
                    rollThreeSize[k.hotChargeLength] = {
                      type: k.hotChargeBtype,
                      size: Number(k.hotChargeLength) / 1000 + 'm',
                      amount: k.totalCount,
                      weight: k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265,
                    };
                  } else {
                    rollThreeSize[k.hotChargeLength].amount += k.totalCount;
                    rollThreeSize[k.hotChargeLength].weight += k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265;
                  }
                } else {
                  if (!rollThreeColdSize[k.hotChargeLength]) {
                    rollThreeColdSize[k.hotChargeLength] = {
                      type: k.hotChargeBtype,
                      size: Number(k.hotChargeLength) / 1000 + 'm',
                      amount: k.totalCount,
                      weight: k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265,
                    };
                  } else {
                    rollThreeColdSize[k.hotChargeLength].amount += k.totalCount;
                    rollThreeColdSize[k.hotChargeLength].weight += k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265;
                  }
                }
              }
              // 上若
              if (k.hotChargeDestination === 'roll_out_shipp' && k.totalCount > 0) {
                // 添加定尺
                columnsHotCharge.roll_out_shipp.push(sizeFormat);

                if (k.hotChargeBtype === '0') {
                  if (!rollShippSize[k.hotChargeLength]) {
                    rollShippSize[k.hotChargeLength] = {
                      type: k.hotChargeBtype,
                      size: Number(k.hotChargeLength) / 1000 + 'm',
                      amount: k.totalCount,
                      weight: k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265,
                    };
                  } else {
                    rollShippSize[k.hotChargeLength].amount += k.totalCount;
                    rollShippSize[k.hotChargeLength].weight += k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265;
                  }
                } else {
                  if (!rollShippColdSize[k.hotChargeLength]) {
                    rollShippColdSize[k.hotChargeLength] = {
                      type: k.hotChargeBtype,
                      size: Number(k.hotChargeLength) / 1000 + 'm',
                      amount: k.totalCount,
                      weight: k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265,
                    };
                  } else {
                    rollShippColdSize[k.hotChargeLength].amount += k.totalCount;
                    rollShippColdSize[k.hotChargeLength].weight += k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265;
                  }
                }
              }

              // 热装按类型分组，分热装和冷装
              if (!rollChargeSizeType[k.hotChargeBtype][k.hotChargeLength]) {
                rollChargeSizeType[k.hotChargeBtype][k.hotChargeLength] = {
                  size: sizeFormat + 'm',
                  amount: k.totalCount,
                  weight: k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265,
                };
              } else {
                rollChargeSizeType[k.hotChargeBtype][k.hotChargeLength].amount += k.totalCount;
                rollChargeSizeType[k.hotChargeBtype][k.hotChargeLength].weight += k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265;
              }
            });
          }

          // 堆垛
          let stackSizeData = {};
          if (stackLength) {
            const stackLeghtObj = JSON.parse(stackLength);
            stackLeghtObj.forEach((v) => {
              const sSize = String(v.stackingLength);
              const hasChild = stackLengthColumn.children.findIndex((ele) => ele.dataIndex === sSize + 'stackLength');
              if (hasChild < 0) {
                stackLengthColumn.children.push({
                  title: () => {
                    return h('div', { class: 'rollOneColumnWrapper' }, [
                      h(
                        // Select,
                        Input,
                        {
                          // options: sizeListOPtions.value,
                          bordered: false,
                          // dropdownStyle: {
                          //   minWidth: '80px',
                          // },
                          style: {
                            padding: '0px',
                            textAlign: 'center',
                          },
                          defaultValue: Number(sSize) > 20 ? Number(sSize) / 1000 : sSize,
                          // onChange: (value) => {
                          //   switchSizehandler(value, column);
                          // },
                          onBlur: throttle((e) => {
                            const value = Number(e.target.value) < 20 ? Number(e.target.value) * 1000 : Number(e.target.value);
                            switchStackhandler(value, Number(sSize));
                          }, 500),
                        },
                        ''
                      ),
                      h('div', { class: 'noprint', onClick: () => deleteStackColumn(sSize) }, h(Icon, { icon: 'ant-design:delete-outlined' }, '')),
                    ]);
                  },
                  dataIndex: sSize + 'stackLength',
                  key: sSize + 'stackLength',
                  width: 80,
                  customRender({ text, record }) {
                    if (!record.heatNo) {
                      return '';
                    }
                    return h(
                      Input,
                      { class: 'total-input', size: 'small', bordered: false, value: text, onBlur: (e) => handleStackChange(e, record, sSize) },
                      ''
                    );
                  },
                });
              }

              stackSizeData[sSize + 'stackLength'] = v.stackingCount;

              // 给堆垛添加致谢
              if (!stackingSize[sSize]) {
                stackingSize[sSize] = {
                  size: Number(sSize) / 1000 + 'm',
                  amount: v.stackingCount,
                  weight: v.stackingCount * (Number(sSize) / 1000) * 0.2265,
                };
              } else {
                stackingSize[sSize].amount += v.stackingCount;
                stackingSize[sSize].weight += v.stackingCount * (Number(sSize) / 1000) * 0.2265;
              }
            });
          }

          return {
            ...item,
            heatNo: newArr[index].heatNo,
            brandNum: newArr[index].grade,
            oneFlow: newArr[index].oneStrandSum || '',
            twoFlow: newArr[index].twoStrandSum || '',
            threeFlow: newArr[index].threeStrandSum || '',
            fourFlow: newArr[index].fourStrandSum || '',
            fiveFlow: newArr[index].fiveStrandSum || '',
            sixFlow: newArr[index].sixStrandSum || '',
            sevenFlow: newArr[index].sevenStrandSum || '',
            eightFlow: newArr[index].eightStrandSum || '',
            total: newArr[index].amount || '',
            rollOneOld: rollOneNum,
            ...sizeArr,
            ...rollOneSizesObj,
            ...stackSizeData,
            orgData: newArr[index],
          };
        });

        let otherColumnsNums = 0;
        const otherColumns = Object.keys(columnsHotCharge)
          .filter((item) => columnsHotCharge[item].length)
          .map((item) => {
            const hotChargeSizeArr = [...new Set(columnsHotCharge[item])];
            const niubiGls: any[] = [];
            hotChargeSizeArr.forEach((ele) => {
              niubiGls.push(
                {
                  hotChargeLength: Number(ele) * 1000,
                  hotChargeDestination: item,
                  totalWeight: 0,
                  hotChargeBtype: '0',
                  totalCount: 0,
                },
                {
                  hotChargeLength: Number(ele) * 1000,
                  hotChargeDestination: item,
                  totalWeight: 0,
                  hotChargeBtype: '1',
                  totalCount: 0,
                }
              );
            });
            const childSizesColumn = hotChargeSizeArr.map((childItem) => {
              return {
                title: childItem,
                dataIndex: `${item}.${childItem}`,
                key: `${item}.${childItem}`,
                width: 80,
                align: 'center',
                customRender: ({ record }) => {
                  const hotKey = childItem + item + '0';
                  const coldKey = childItem + item + '1';
                  let sizeArr: any = [];
                  if (record[hotKey] || record[coldKey]) {
                    sizeArr = [h('div', { class: 'line' }, ''), h('div', { class: 'size-st-item' }, record[hotKey] || '~')];
                    sizeArr.push(h('div', { class: ' size-st-num' }, record[coldKey] || '~'));
                  }

                  return h(
                    'div',
                    {
                      class: 'size-st-wrapper',
                      onClick: () => {
                        // if (!record[hotKey] && !record[coldKey]) return;
                        const { orgData } = record;
                        if (!orgData) return;
                        const { hotChargeLength } = orgData;

                        const hotChargeInfoArr = hotChargeLength ? JSON.parse(hotChargeLength) : [];

                        const itemsHotArr = niubiGls.map((v) => {
                          const hasVal = hotChargeInfoArr.find((j) => j.hotChargeLength == v.hotChargeLength && j.hotChargeBtype == v.hotChargeBtype);
                          return {
                            ...v,
                            totalCount: hasVal ? hasVal.totalCount : 0,
                          };
                        });

                        editSizeNumRecord.value = {
                          ...orgData,
                          hotChargeLengthArr: itemsHotArr,
                        };
                        openSetSizeNumModal.value = true;
                      },
                    },
                    sizeArr
                  );
                },
              };
            });
            otherColumnsNums = otherColumnsNums + (childSizesColumn.length ? childSizesColumn.length : 1);
            return {
              ...hotChargeColumns[item],
              children: childSizesColumn,
            };
          });

        columns.value = [...defaultColumns, ...otherColumns, ...[stackLengthColumn], ...totalColum];
        const rollOneIndex = defaultColumns.findIndex((ele: any) => ele.dataIndex === 'rollOne');
        (columns.value[rollOneIndex] as any).children = rollOneColumns.length ? rollOneColumns : [];

        // 计算列，合并
        const allSpan =
          4 +
          (rollOneColumns.length ? rollOneColumns.length : 1) +
          otherColumnsNums +
          (stackLengthColumn.children.length ? stackLengthColumn.children.length : 1);
        remakeColSpan.value = Math.ceil(allSpan / 3);
        const nnColSpan = Math.ceil((allSpan - remakeColSpan.value) / 2);
        const newNNColSpan = nnColSpan % 2 === 0 ? nnColSpan : nnColSpan + 1;
        sizeColSpan.value = newNNColSpan / 2 > 4 ? 4 : newNNColSpan / 2;
        flowColSpan.value = newNNColSpan - sizeColSpan.value;
        weightColSpan.value = allSpan - remakeColSpan.value - newNNColSpan;

        let allWeight = 0;
        // 热送统计
        if (Object.values(rollOneSize).length) {
          hotSendList.value['一'] = Object.values(rollOneSize);
          hotSendList.value['一'].forEach((ele) => (allWeight += ele.weight));
        }
        if (Object.values(rollTwoSize).length) {
          hotSendList.value['二'] = Object.values(rollTwoSize);
          hotSendList.value['二'].forEach((ele) => (allWeight += ele.weight));
        }
        if (Object.values(rollThreeSize).length) {
          hotSendList.value['三'] = Object.values(rollThreeSize);
          hotSendList.value['三'].forEach((ele) => (allWeight += ele.weight));
        }
        if (Object.values(rollShippSize).length) {
          hotSendList.value['上'] = Object.values(rollShippSize);
          hotSendList.value['上'].forEach((ele) => (allWeight += ele.weight));
        }
        if (Object.values(stackingSize)) {
          stackingList.value = Object.values(stackingSize);
          stackingList.value.forEach((ele) => (allWeight += ele.weight));
        }

        // 冷装统计
        if (Object.values(rollTwoColdSize).length) {
          coldSendList.value['二'] = Object.values(rollTwoColdSize);
          coldSendList.value['二'].forEach((ele) => (allWeight += ele.weight));
        }
        if (Object.values(rollThreeColdSize).length) {
          coldSendList.value['三'] = Object.values(rollThreeColdSize);
          coldSendList.value['三'].forEach((ele) => (allWeight += ele.weight));
        }
        if (Object.values(rollShippColdSize).length) {
          coldSendList.value['上'] = Object.values(rollShippColdSize);
          coldSendList.value['上'].forEach((ele) => (allWeight += ele.weight));
        }

        emits('statistics', {
          chargeList: rollChargeSizeType,
          stackingList: stackingList.value,
          hotSendList: hotSendList.value['一'],
        });
        mainRemark.value = `合计：${allWeight.toFixed(3)} t`;

        dataSource.value = dataOrgSource;
      }
      start();
      changeLoading(false);
    } catch (error) {
      start();
      changeLoading(false);
      console.log(error);
    }
  };

  const openJSModal = ref(false);
  const xiShu = ref(0.2265);
  const sizeNum = ref();
  const weightNum = ref();
  // 重量计算按钮
  const weightCalc = computed(() => {
    const w = Number(weightNum.value);
    const x = Number(xiShu.value);
    const s = Number(sizeNum.value);
    if (isNumber(w) && isNumber(x) && isNumber(s)) {
      const r = w * x * s;

      return !isNaN(r) ? r.toFixed(6) : '';
    }
    return '';
  });

  // 修改合计
  const handleTotalChange = throttle((e: any, record) => {
    const val = Number(e.target.value);
    if (!isNumber(val) || val < 0) {
      createMessage.error('请输入大于0数字');
      return;
    }
    const { orgData } = record;
    if (Number(orgData.amount) != val) {
      handleEdit({
        ...orgData,
        amount: val,
      });
    }
  }, 800);

  // 编辑
  const handleEdit = async (record) => {
    try {
      changeLoading(true);

      await editBilletRecord(record);

      await getHeatList({
        ccmNo: hostNumber.value,
        queryType: fetchQueryType.value,
        changeShiftId: fetchChangeShiftId.value,
      });
      changeLoading(false);
    } catch (error) {
      changeLoading(false);
      console.log(error);
    }
  };

  // 修改棒一定尺数量
  const handleSizeChange = throttle((e: any, record, size) => {
    if (!size) {
      createMessage.error('请选择定尺');
      return;
    }
    const val = Number(e.target.value);
    if (!isNumber(val) || val < 0) {
      createMessage.error('请输入大于或等于0的数字');
      return;
    }

    const { orgData } = record;
    const { rollClubOneDetails } = orgData;
    let obj = {
      lengthGroupCount: {},
      directRollingTotalWeight: 0,
      directRollingTotalCount: 0,
    };
    if (rollClubOneDetails) {
      obj = JSON.parse(rollClubOneDetails);
    }

    const lengthGroupCount = obj.lengthGroupCount;
    if (
      lengthGroupCount &&
      ((Object.hasOwn(lengthGroupCount, size) && (val === 0 || lengthGroupCount[size] !== val)) ||
        (!Object.hasOwn(lengthGroupCount, size) && val > 0))
    ) {
      if (val <= 0) {
        delete obj.lengthGroupCount[size];
      } else {
        obj.lengthGroupCount[size] = val;
      }

      const params = {
        ...orgData,
        rollClubOneDetails: JSON.stringify(obj),
      };
      const amount = handleTotalSum(params);
      handleEdit({
        ...params,
        amount,
      });
    }
  }, 800);

  // 计算总数
  const handleTotalSum = (record) => {
    const { rollClubOneDetails, stackLength, hotChargeLength } = record;
    let allCount = 0;
    if (rollClubOneDetails) {
      const sendObj = JSON.parse(rollClubOneDetails);
      if (sendObj.lengthGroupCount) {
        Object.keys(sendObj.lengthGroupCount).forEach((key) => {
          allCount += sendObj.lengthGroupCount[key];
        });
      }
    }

    if (stackLength) {
      const stackObj = JSON.parse(stackLength);
      if (isArray(stackObj)) {
        stackObj.forEach((item) => {
          allCount += item.stackingCount;
        });
      }
    }

    if (hotChargeLength) {
      const chargeObj = JSON.parse(hotChargeLength);
      if (isArray(chargeObj)) {
        chargeObj.forEach((item) => {
          allCount += item.totalCount;
        });
      }
    }

    return allCount;
  };

  // 修改堆垛定尺数量
  const handleStackChange = throttle((e: any, record, size) => {
    if (e.target.value.trim() === '') return;
    if (!size) {
      createMessage.error('请选择定尺');
      return;
    }
    const val = Number(e.target.value);
    if (!isNumber(val)) {
      createMessage.error('请输入大于等于0的数字');
      return;
    }

    const { orgData } = record;
    const { stackLength } = orgData;
    let obj: any[] = [];
    if (stackLength) {
      obj = JSON.parse(stackLength);
    }

    const lengthGroupCount = obj.findIndex((v) => v.stackingLength == size);

    // 计算补的数量是不是4的倍数
    let stackInfo: any = null;
    // const buCount = lengthGroupCount > -1 ? val - obj[lengthGroupCount].stackingCount : val;
    if (val && val > 0) {
      if (val % 4 !== 0) {
        createMessage.error('补数量必须是4的倍数');
        return;
      }
      stackInfo = val + '-' + size + '-10';
    } else {
      stackInfo = null;
    }

    if (lengthGroupCount === -1) {
      obj.push({
        stackingCount: val,
        stackingLength: size,
        stackingWeight: val * (Number(size) / 1000) * 0.2265,
      });
    } else {
      if (obj[lengthGroupCount].stackingCount === val) return;
      obj[lengthGroupCount].stackingCount = val;
      obj[lengthGroupCount].stackingWeight = val * (Number(size) / 1000) * 0.2265;
    }

    const params = {
      ...orgData,
      stackLength: JSON.stringify(obj),
      stackInfo,
    };
    const amount = handleTotalSum(params);
    handleEdit({
      ...params,
      amount,
    });
  }, 800);

  // 编辑切换定尺
  const switchSizehandler = async (val, oldSize) => {
    try {
      if (val == oldSize) return;
      changeLoading(true);
      const fetchArr: any[] = [];
      dataSource.value.forEach((item) => {
        if (item.heatNo && item.orgData) {
          const { rollClubOneDetails } = item.orgData;
          if (rollClubOneDetails) {
            const obj = JSON.parse(rollClubOneDetails);
            if (obj && obj.lengthGroupCount) {
              const lengthGroupCount = obj.lengthGroupCount;

              if (lengthGroupCount[oldSize]) {
                obj.lengthGroupCount[val] = lengthGroupCount[oldSize] + (lengthGroupCount[val] ? lengthGroupCount[val] : 0);
                delete obj.lengthGroupCount[oldSize];

                // 请求push了
                fetchArr.push(
                  editBilletRecord({
                    ...item.orgData,
                    rollClubOneDetails: JSON.stringify(obj),
                  })
                );
              }
            }
          }
        }
      });

      if (fetchArr.length > 0) {
        await Promise.all(fetchArr);

        await getHeatList({
          ccmNo: hostNumber.value,
          queryType: fetchQueryType.value,
          changeShiftId: fetchChangeShiftId.value,
        });

        changeLoading(false);
      }
    } catch (error) {
      changeLoading(false);
      console.log(error);
    }
  };

  // 堆垛编辑定尺
  const switchStackhandler = async (val, oldSize) => {
    try {
      if (val === oldSize) return;
      changeLoading(true);
      const fetchArr: any[] = [];
      dataSource.value.forEach((item) => {
        if (item.heatNo && item.orgData) {
          const { stackLength } = item.orgData;
          if (stackLength) {
            let obj = stackLength ? JSON.parse(stackLength) : [];
            const oldSizeIndex = obj.findIndex((k) => k.stackingLength === oldSize);
            if (oldSizeIndex > -1) {
              const newSizeIndex = obj.findIndex((k) => k.stackingLength === Number(val));
              if (newSizeIndex > -1) {
                obj[newSizeIndex].stackingCount += obj[oldSizeIndex].stackingCount;
                obj = obj.filter((j) => j.stackingLength !== oldSize);
              } else {
                obj[oldSizeIndex].stackingLength = Number(val);
              }

              // 请求push了
              fetchArr.push(
                editBilletRecord({
                  ...item.orgData,
                  stackLength: JSON.stringify(obj),
                })
              );
            }
          }
        }
      });

      if (fetchArr.length > 0) {
        await Promise.all(fetchArr);

        await getHeatList({
          ccmNo: hostNumber.value,
          queryType: fetchQueryType.value,
          changeShiftId: fetchChangeShiftId.value,
        });

        changeLoading(false);
      }
    } catch (error) {
      changeLoading(false);
      console.log(error);
    }
  };

  // 删除定尺
  const deleteRollOneColumn = async (size) => {
    try {
      changeLoading(true);
      const fetchArr: any[] = [];
      dataSource.value.forEach((item) => {
        if (item.heatNo && item.orgData) {
          const { rollClubOneDetails } = item.orgData;
          if (rollClubOneDetails) {
            const obj = JSON.parse(rollClubOneDetails);
            if (obj && obj.lengthGroupCount) {
              const lengthGroupCount = obj.lengthGroupCount;

              if (lengthGroupCount[size]) {
                delete obj.lengthGroupCount[size];

                // 请求push了
                const params = {
                  ...item.orgData,
                  rollClubOneDetails: JSON.stringify(obj),
                };

                const amount = handleTotalSum(params);
                fetchArr.push(
                  editBilletRecord({
                    ...params,
                    amount,
                  })
                );
              }
            }
          }
        }
      });

      if (fetchArr.length > 0) {
        await Promise.all(fetchArr);

        await getHeatList({
          ccmNo: hostNumber.value,
          queryType: fetchQueryType.value,
          changeShiftId: fetchChangeShiftId.value,
        });

        changeLoading(false);
      }
    } catch (error) {
      changeLoading(false);
      console.log(error);
    }
  };

  // 删除堆垛定尺
  const deleteStackColumn = async (size) => {
    try {
      changeLoading(true);
      const fetchArr: any[] = [];
      dataSource.value.forEach((item) => {
        if (item.heatNo && item.orgData) {
          const { stackLength } = item.orgData;
          if (stackLength) {
            const obj = JSON.parse(stackLength);
            const hasStackItem = obj.findIndex((n) => n.stackingLength == size);
            if (hasStackItem > -1) {
              const lengthGroupCount = obj.filter((m) => m.stackingLength != size);

              // 请求push了
              const params = {
                ...item.orgData,
                stackLength: JSON.stringify(lengthGroupCount),
              };

              const amount = handleTotalSum(params);
              fetchArr.push(
                editBilletRecord({
                  ...params,
                  amount,
                })
              );
            }
          }
        }
      });

      if (fetchArr.length > 0) {
        await Promise.all(fetchArr);

        await getHeatList({
          ccmNo: hostNumber.value,
          queryType: fetchQueryType.value,
          changeShiftId: fetchChangeShiftId.value,
        });
      }
      changeLoading(false);
    } catch (error) {
      changeLoading(false);
      console.log(error);
    }
  };

  // 编辑目的地定尺数量
  const openSetSizeNumModal = ref(false);
  const editSizeNumRecord = ref<any>({});

  const confirmSetSizeNum = async () => {
    try {
      changeLoading(true);
      const { hotChargeLengthArr } = editSizeNumRecord.value;
      if (!hotChargeLengthArr.length) {
        return;
      }

      const arr = hotChargeLengthArr
        .filter((ele) => ele.totalCount)
        .map((k) => {
          return {
            ...k,
            totalWeight: (k.totalCount * (Number(k.hotChargeLength) / 1000) * 0.2265).toFixed(4),
          };
        });

      editSizeNumRecord.value.hotChargeLength = arr.length ? JSON.stringify(arr) : null;

      await editBilletRecord({
        ...editSizeNumRecord.value,
      });
      openSetSizeNumModal.value = false;

      await getHeatList({
        ccmNo: hostNumber.value,
        queryType: fetchQueryType.value,
        changeShiftId: fetchChangeShiftId.value,
      });
      changeLoading(false);
    } catch (e) {
      changeLoading(false);
      console.log(e);
    }
  };

  // 确定修改定尺
  const handleSizeBlur = throttle((e) => {
    if (mainOrgSize.value.trim() === e.target.value.trim()) return;
    handleEditShiftInfo({
      id: fetchChangeShiftId.value,
      sizeInfo: e.target.value,
    });
  }, 500);

  // 修改备注
  const handleRemarkBlur = throttle((e) => {
    if (mainOrgRemark.value.trim() === e.target.value.trim()) return;
    handleEditShiftInfo({
      id: fetchChangeShiftId.value,
      content: e.target.value,
    });
  }, 500);

  // 编辑定尺和备注
  const handleEditShiftInfo = async (params) => {
    try {
      changeLoading(true);
      await editOriginalProductRecord(params);

      await getHeatList({
        ccmNo: hostNumber.value,
        queryType: fetchQueryType.value,
        changeShiftId: fetchChangeShiftId.value,
      });
      changeLoading(false);
    } catch (e) {
      console.log(e);
      changeLoading(false);
    }
  };

  // 添加炉次
  const newHeatNo = ref('');
  const openNewHeatNo = ref(false);
  const addHeatNo = () => {
    newHeatNo.value = '';
    openNewHeatNo.value = true;
  };
  const confirmAddHeatNo = async () => {
    try {
      if (!newHeatNo.value) {
        createMessage.error('请输入炉次号');
        return;
      }

      changeLoading(true);
      await addBilletNo({
        ccmNo: hostNumber.value,
        heatNo: newHeatNo.value,
      });
      openNewHeatNo.value = false;

      await getHeatList({
        ccmNo: hostNumber.value,
        queryType: fetchQueryType.value,
        changeShiftId: fetchChangeShiftId.value,
      });
      changeLoading(false);
    } catch (e) {
      console.log(e);
      changeLoading(false);
    }
  };
</script>
<style lang="less" scoped>
  .orgData-info-spin {
    height: 100%;
    overflow: auto;
    padding: 6px;
    background: #01396c;
    color: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
  }

  .ticket {
    max-width: 1400px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .ccmno-info {
      font-family: 'Kingsoft_Cloud_Font';
      font-size: 20px;

      .ant-input {
        color: rgba(255, 255, 255, 0.8);
        font-size: 20px;
      }
    }
    .ccmno {
      display: inline-block;
      width: 60px;
      border-bottom: 1px solid rgb(218, 218, 218);
      text-align: center;
    }

    .size-items-title {
      font-size: 12px;
      line-height: 32px;
      border-bottom: 1px solid #bfbfbf;
      padding-left: 10px;
      min-width: 100px;
    }

    .size-num-title {
      font-size: 12px;
      line-height: 32px;
      padding-left: 10px;
    }

    .size-items-content {
      height: 32px;
      text-align: center;
      line-height: 32px;
    }

    .size-items-remark {
      width: 100%;
      min-height: 90px;
      flex-wrap: wrap;
      font-family: 'Kingsoft_Cloud_Font';
      align-content: flex-start;

      .size-remark-item {
        width: 50%;
        height: 30px;
        color: #000;
      }

      .size-remark-size {
        display: inline-block;
        width: 80px;
      }

      .size-remark-num {
        display: inline-block;
        width: 80px;
        padding: 0 40px 0 0;
        font-size: 12px;
      }
    }

    .two-num-wrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      padding-right: 6px;
    }

    .s-txt {
      font-family: 'Kingsoft_Cloud_Font';
    }

    .ant-table-wrapper {
      flex: 1;

      :deep(.ant-spin-nested-loading) {
        min-height: 100%;

        .ant-table {
          font-size: 20px;
          border-top: 1px solid rgba(184, 184, 184, 0.6);

          > .ant-table-container {
            border-inline-start: 1px solid rgba(184, 184, 184, 0.6);
          }

          .ant-table-content > table > thead > tr > th,
          .ant-table-tbody > tr > td,
          .ant-table-summary > tr > td {
            padding: 2px;
            border-inline-end: 1px solid rgba(184, 184, 184, 0.6);
            border-bottom: 1px solid rgba(184, 184, 184, 0.6) !important;
            text-align: center;
            position: relative;
            background: #01396c;
            color: rgba(255, 255, 255, 0.8);
          }

          .size-st-wrapper {
            position: absolute;
            top: 1px;
            left: 1px;
            right: 1px;
            bottom: 1px;
            font-weight: 600;
            cursor: pointer;
            overflow: hidden;

            .line {
              // content: '';
              // position: absolute;
              // top: 0;
              // left: 0;
              // width: 100%; /* 等于长方形宽度 */
              // height: 100%; /* 等于长方形高度 */

              // /* 创建斜线：线性渐变从左上到右下 */
              // background: linear-gradient(
              //   to bottom right,
              //   transparent 0%,
              //   transparent calc(50% - 0.5px),
              //   /* 斜线上方透明 */ rgba(0, 0, 0, 0.6) calc(50% - 0.5px),
              //   /* 斜线颜色 */ rgba(0, 0, 0, 0.6) calc(50% + 0.5px),
              //   /* 斜线厚度 */ transparent calc(50% + 0.5px) /* 斜线下方透明 */
              // );
              position: absolute;
              left: -5px;
              top: 50%;
              width: 110%;
              border-bottom: 1px solid rgba(231, 230, 230, 0.6);
              transform: rotate(165deg);
            }

            .size-st-item {
              position: absolute;
              top: -4px;
              left: 2px;
              color: #f50;
            }
          }
          .size-st-num {
            color: #108ee9;
            cursor: pointer;
            position: absolute;
            right: 1px;
            bottom: -4px;
          }

          // 自定义啊
          .total-input {
            width: 100%;
            padding: 0;
            text-align: center;
            cursor: pointer;
            font-size: 20px;
          }

          .ant-select {
            width: 100%;

            .ant-select-selector {
              padding: 0;

              .ant-select-selection-item,
              .ant-select-selection-placeholder {
                padding-inline-end: 0;
              }
            }
            .ant-select-arrow {
              display: none;
            }
          }

          .rollOneColumnWrapper {
            position: relative;
            width: 100%;
            height: 100%;

            .noprint {
              position: absolute;
              left: 0;
              top: 0;
              display: none;
              color: #f50;
              cursor: pointer;
            }

            &:hover {
              .noprint {
                display: block;
              }
            }
          }

          .ant-input {
            color: rgba(255, 255, 255, 0.8);
            font-size: 20px;
          }
        }
      }

      .summary-row-no-border {
        td:first-child {
          border-bottom: none !important;
        }

        .song-items {
          width: 100%;
          height: 100%;
          align-items: flex-start;
          justify-content: flex-start;

          .title {
            margin-right: 10px;
            color: #f50;
          }
        }
      }

      .summary-cell-remark {
        min-height: 70px;
      }
    }
  }
</style>