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

<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose title="钢坯送样卡" :width="800" :height="930" ok-text="打印" @ok="onPrint">
    <section
      ref="print"
      style="padding: 10px 10px 0; position: relative; border: 1px solid #c5c5c5; background: #fff; width: 98%"
      id="printBilletSampleCard"
    >
      <div class="ticket next-ticket">
        <div style="text-align: center">
          <p style="font-size: 24px; font-weight: 800; display: inline-block; border-bottom: 2px solid #000; margin-bottom: 16px; line-height: 30px">
            钢 坯 送 样 卡
          </p>
        </div>
        <div class="flex ccmno-info" style="line-height: 24px">
          <div class="flex-1">
            <span class="ccmno">{{ hostNumber }}</span>
            号连铸机
          </div>
          <div class="flex-1" style="text-align: center; font-size: 13px">
            {{ dayjs().format('YYYY 年 MM 月 DD 日') }}&nbsp;&nbsp; {{ shiftInfoTxt }}
          </div>
          <div class="flex-1" style="text-align: right; font-size: 12px"> zj / R177 </div>
        </div>
        <a-descriptions style="margin-top: 6px; margin-bottom: 4px" bordered :column="6" size="small">
          <a-descriptions-item label="序号" :labelStyle="labelStyle" :contentStyle="contentStyle">炉号</a-descriptions-item>
          <a-descriptions-item :labelStyle="sizeLabelStyle" :contentStyle="sizeContentStyle">
            <div class="size-items-title">
              定尺&nbsp;&nbsp;&nbsp;&nbsp;
              <span class="s-txt">{{ sizeArrs[0] ? '170' : '' }}</span>
            </div>
            <div class="size-num-title">
              支数 <span class="s-txt">{{ sizeArrs[0] ? Number(sizeArrs[0]) / 1000 + 'm' : '' }}</span>
            </div>
          </a-descriptions-item>
          <a-descriptions-item :labelStyle="sizeLabelStyle" :contentStyle="sizeContentStyle">
            <div class="size-items-title">
              定尺&nbsp;&nbsp;&nbsp;&nbsp;
              <span class="s-txt">{{ sizeArrs[1] ? '170' : '' }}</span>
            </div>
            <div class="size-num-title">
              支数 <span class="s-txt">{{ sizeArrs[1] ? Number(sizeArrs[1]) / 1000 + 'm' : '' }}</span>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="序号" :labelStyle="labelStyle" :contentStyle="contentStyle">
            炉号
            <div class="two-num-wrapper">
              <span class="s-txt">{{ sizeArrs[2] ? '170' : '' }}</span>
              <span class="s-txt">{{ sizeArrs[2] ? Number(sizeArrs[2]) / 1000 + 'm' : '' }}</span>
            </div>
          </a-descriptions-item>
          <a-descriptions-item :labelStyle="sizeLabelStyle" :contentStyle="sizeContentStyle">
            <div class="size-items-title">
              定尺&nbsp;&nbsp;&nbsp;&nbsp;
              <span class="s-txt">{{ sizeArrs[3] ? '170' : '' }}</span>
            </div>
            <div class="size-num-title">
              支数 <span class="s-txt">{{ sizeArrs[3] ? Number(sizeArrs[3]) / 1000 + 'm' : '' }}</span>
            </div>
          </a-descriptions-item>
          <a-descriptions-item :labelStyle="sizeLabelStyle" :contentStyle="sizeContentStyle">
            <div class="size-items-title">
              定尺&nbsp;&nbsp;&nbsp;&nbsp;
              <span class="s-txt">
                {{ sizeArrs[4] ? '170' : '' }}
              </span>
            </div>
            <div class="size-num-title">
              支数 <span class="s-txt">{{ sizeArrs[4] ? Number(sizeArrs[4]) / 1000 + 'm' : '' }}</span>
            </div>
          </a-descriptions-item>

          <template v-for="i in 20">
            <!-- 第一组 -->
            <a-descriptions-item :label="i - 1" :labelStyle="labelStyle" :contentStyle="contentStyle">{{
              heatList[i - 1] ? heatList[i - 1].heatNo : ''
            }}</a-descriptions-item>
            <a-descriptions-item :labelStyle="sizeLabelStyle" :contentStyle="sizeContentStyle">
              <div class="size-items-content">{{
                heatList[i - 1] && heatList[i - 1].sizeInfo && heatList[i - 1].sizeInfo[sizeArrs[0]]
                  ? heatList[i - 1].sizeInfo[sizeArrs[0]].lengthTotalCount
                  : ''
              }}</div>
            </a-descriptions-item>
            <a-descriptions-item :labelStyle="sizeLabelStyle" :contentStyle="sizeContentStyle">
              <div class="size-items-content">{{
                heatList[i - 1] && heatList[i - 1].sizeInfo && heatList[i - 1].sizeInfo[sizeArrs[1]]
                  ? heatList[i - 1].sizeInfo[sizeArrs[1]].lengthTotalCount
                  : ''
              }}</div>
            </a-descriptions-item>

            <!-- 第二组 -->
            <a-descriptions-item :label="19 + i" :labelStyle="labelStyle" :contentStyle="contentStyle">
              {{
                heatList[i - 1] && heatList[i - 1].sizeInfo && heatList[i - 1].sizeInfo[sizeArrs[2]]
                  ? heatList[i - 1].sizeInfo[sizeArrs[2]].lengthTotalCount
                  : ''
              }}
            </a-descriptions-item>
            <a-descriptions-item :labelStyle="sizeLabelStyle" :contentStyle="sizeContentStyle">
              <div class="size-items-content">{{
                heatList[i - 1] && heatList[i - 1].sizeInfo && heatList[i - 1].sizeInfo[sizeArrs[3]]
                  ? heatList[i - 1].sizeInfo[sizeArrs[3]].lengthTotalCount
                  : ''
              }}</div>
            </a-descriptions-item>
            <a-descriptions-item :labelStyle="sizeLabelStyle" :contentStyle="sizeContentStyle">
              <div class="size-items-content">{{
                heatList[i - 1] && heatList[i - 1].sizeInfo && heatList[i - 1].sizeInfo[sizeArrs[4]]
                  ? heatList[i - 1].sizeInfo[sizeArrs[4]].lengthTotalCount
                  : ''
              }}</div>
            </a-descriptions-item>
          </template>
        </a-descriptions>
        <a-descriptions style="padding: 0" size="small" :column="6">
          <a-descriptions-item label="备注" :span="1">
            <div class="size-items-remark flex">
              <!-- <div class="size-remark-item" v-for="(ele, size) in sizeObjs">
                <span class="size-remark-size">{{ Number(size) / 1000 }} m:</span>
                <span class="size-remark-num">{{ ele.num }}</span>
                <span>{{ ele.weight.toFixed(3) }}t</span>
              </div> -->
            </div>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </section>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import dayjs from 'dayjs';
  import { printJS } from '/@/hooks/web/usePrintJS';
  import { queryHeatsActualsByCcmNo } from '../operator.api';

  // 主机号
  const hostNumber = ref('5');
  const shiftInfoTxt = ref('');
  // label 样式
  const labelStyle = {
    width: '60px',
    textAlign: 'center',
    padding: '0',
    background: '#fff',
    border: '1px solid #bfbfbf',
  };
  const sizeLabelStyle = {
    padding: '0',
    border: '1px solid #bfbfbf',
    display: 'none',
  };
  // content 样式
  const contentStyle = {
    width: '120px',
    textAlign: 'center',
    padding: '0',
    color: '#000',
    border: '1px solid #bfbfbf',
    position: 'relative',
  };
  const sizeContentStyle = {
    padding: '0',
    color: '#000',
    border: '1px solid #bfbfbf',
  };

  //表单赋值
  const [registerModal, { changeOkLoading }] = useModalInner(async (data) => {
    const { ccmNo, shiftText, queryType } = data;
    hostNumber.value = ccmNo;
    shiftInfoTxt.value = shiftText.replace('-', '/');

    getHeatList({
      ccmNo,
      queryType,
    });
  });

  // 获取当前班次所有的炉次信息
  const sizeArrs = ref<string[]>([]);
  const heatList = ref<any[]>([]);
  const sizeObjs = ref<any>({});
  const getHeatList = async (params) => {
    try {
      let sizeList: string[] = [];
      let sizeObj: any = {};
      const res = await queryHeatsActualsByCcmNo(params);
      if (res && Array.isArray(res)) {
        res.forEach((item) => {
          const lengthObj: Record<string, any> = JSON.parse(item.length);
          const sizeArr: string[] = Object.keys(lengthObj);
          sizeList = sizeList.concat(sizeArr);

          item.sizeInfo = lengthObj;

          sizeArr.forEach((size) => {
            if (!sizeObj[size]) {
              sizeObj[size] = {
                num: lengthObj[size].lengthTotalCount,
                weight: lengthObj[size].lengthTotalWeight,
              };
            } else {
              sizeObj[size].num += lengthObj[size].lengthTotalCount;
              sizeObj[size].weight += lengthObj[size].lengthTotalWeight;
            }
          });
        });

        sizeList = [...new Set(sizeList)];
        sizeArrs.value = sizeList;
        heatList.value = res;
        sizeObjs.value = sizeObj;
      }
    } catch (error) {
      console.log(error);
    }
  };

  function onPrint() {
    changeOkLoading(true);
    printJS({
      printable: '#printBilletSampleCard',
      type: 'html',
    });
    setTimeout(() => {
      changeOkLoading(false);
    }, 1000);
  }
</script>
<style scoped lang="less">
  .ticket {
    max-width: 900px;

    .ccmno-info {
      font-family: 'Kingsoft_Cloud_Font';
    }
    .ccmno {
      display: inline-block;
      width: 60px;
      border-bottom: 1px solid black;
      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';
    }
  }
</style>
<style lang="less">
  @media print {
    header,
    footer,
    .noprint {
      display: none;
    }

    @page :first {
      margin-top: 10px; /* 第一页的页眉距离顶部为0 */
      margin-bottom: 0; /* 第一页的页脚距离底部为0 */
    }
  }
</style>