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="8" size="small">
          <a-descriptions-item label="序号" :labelStyle="labelStyle" :contentStyle="contentStyle">炉号</a-descriptions-item>
          <a-descriptions-item :labelStyle="sizeLabelStyle" :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]) + '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]) + '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[2] ? '170' : '' }}</span>
            </div>
            <div class="size-num-title">
              支数 <span class="s-txt">{{ sizeArrs[2] ? Number(sizeArrs[2]) + '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]) + '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]) + '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[5] ? '170' : '' }}
              </span>
            </div>
            <div class="size-num-title">
              支数 <span class="s-txt">{{ sizeArrs[5] ? Number(sizeArrs[5]) + 'm' : '' }}</span>
            </div>
          </a-descriptions-item>
          <!-- <a-descriptions-item :labelStyle="sizeLabelStyle" :contentStyle="sizeContentStyle">
            <div class="size-items-title"> </div>
            <div class="size-num-title"> </div>
          </a-descriptions-item> -->

          <template v-for="i in 22">
            <!-- 第一组 -->
            <a-descriptions-item :label="i" :labelStyle="labelStyle" :contentStyle="contentStyle">
              <div style="width: 70px">
                {{ heatList[i - 1] ? heatList[i - 1].heatNo : '' }}
              </div>
            </a-descriptions-item>
            <a-descriptions-item :labelStyle="sizeLabelStyle" :contentStyle="sizeContentStyle">
              <div style="width: 70px; text-align: center">
                {{ heatList[i - 1] ? heatList[i - 1].brandNum : '' }}
              </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[0]] ? heatList[i - 1].sizeInfo[sizeArrs[0]] : ''
              }}</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]] : ''
              }}</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[2]] ? heatList[i - 1].sizeInfo[sizeArrs[2]] : ''
                }}
              </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[3]] ? heatList[i - 1].sizeInfo[sizeArrs[3]] : ''
              }}</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]] : ''
              }}</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[5]] : ''
              }}</div>
            </a-descriptions-item>
            <!-- <a-descriptions-item :labelStyle="sizeLabelStyle" :contentStyle="sizeContentStyle">
              <div class="size-items-content"></div>
            </a-descriptions-item> -->
          </template>
        </a-descriptions>
        <a-descriptions style="padding: 0" size="small" :column="7">
          <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>
    <template #appendFooter>
      <a-button @click="openJSModal = true"> 重量计算 </a-button>
    </template>
  </BasicModal>
  <a-modal
    v-model:open="openJSModal"
    title="重量计算"
    centered
    width="600px"
    :zIndex="9999"
    @ok="
      () => {
        openJSModal = false;
      }
    "
    @cancel="
      () => {
        openJSModal = false;
      }
    "
  >
    <div class="flex justify-center items-center" style="margin: 20px; line-height: 40px">
      <a-input-group size="large">
        <a-row :gutter="8">
          <a-col :span="5">
            <a-input type="number" :min="1" v-model:value="weightNum" placeholder="支数" />
          </a-col>
          <a-col :span="1" style="line-height: 40px; text-align: center">*</a-col>
          <a-col :span="5">
            <a-input type="number" v-model:value="sizeNum" placeholder="定尺" />
          </a-col>
          <a-col :span="1" style="line-height: 40px; text-align: center">*</a-col>
          <a-col :span="5">
            <a-input type="number" v-model:value="xiShu" placeholder="请输入比例" />
          </a-col>
          <a-col :span="1" style="line-height: 40px; text-align: center">=</a-col>

          <a-col :span="6" style="line-height: 40px; text-align: center">{{ weightCalc }}</a-col>
        </a-row>
      </a-input-group>
    </div>
  </a-modal>
</template>

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

  // 主机号
  const hostNumber = ref('5');
  const shiftInfoTxt = ref('');
  const shiftInfo = ref({ shift: '', shiftGroup: '' });
  // 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: '90px',
    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, curShiftInfo, changeShiftId } = data;
    hostNumber.value = ccmNo;
    shiftInfoTxt.value = shiftText.replace('-', '/');
    shiftInfo.value = curShiftInfo;

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

  // 获取当前班次所有的炉次信息
  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 querySampleCard(params);
      let newArr: any[] = [];
      if (res && Array.isArray(res)) {
        const ln = res.length;
        for (let i = 0; i < ln; i++) {
          const item = res[i];
          const lengthObj: Record<string, any> = item.lengthCountMap;
          const sizeArr: string[] = Object.keys(lengthObj);
          sizeList = sizeList.concat(sizeArr);

          item.sizeInfo = lengthObj;

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

        sizeList = [...new Set(sizeList)];
        sizeArrs.value = sizeList;
        heatList.value = newArr;
        sizeObjs.value = sizeObj;
      }
    } catch (error) {
      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 '';
  });

  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: 77px;
    }

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

    .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 {
      margin-top: 10px; /* 第一页的页眉距离顶部为0 */
      margin-bottom: 0; /* 第一页的页脚距离底部为0 */
    }
  }
</style>