大理片添加标签打印功能

ZengTao

2024-10-17 61df46fad507daec00a9d1ed9fdb3c433e7c1363

 UI-Project/src/views/Slicecage/slicecage.vue

@@ -6,7 +6,9 @@
import {computed, onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
import {ElMessage, ElMessageBox} from 'element-plus'

import PrintLabel from "@/views/UnLoadGlass/PrintCustomLabelSemi1.vue";
const dialogFormVisibleaDownGlasss = ref(false)
const scanGlass = ref([])
const {t} = useI18n()
let language = ref(localStorage.getItem('lang') || 'zh')
const router = useRouter()
@@ -141,6 +143,61 @@
  if (page >= 1 && page <= totalPages.value) {  
    currentPage.value = page;  
  }  
}
const printFlowCardId = ref('')
const printLayer = ref('')
const printGlassId = ref('')
const dialogTableVisible1 = ref(false)
const open1 = async (row) => {

printFlowCardId.value = row.flowCardId;
printLayer.value = row.layer
printGlassId.value = row.glassId
dialogTableVisible1.value = true;
setTimeout(() => {
  printFlowCard1();
  //dialogTableVisible1.value = false;
}, 1000);
}

const printFlowCard1 = () => {
  // 需要打印的局部区域赋予"print-wrap"的id
  let el = document.getElementById("printFlowCard");
  let doc = document;
  let body = doc.body || doc.getElementsByTagName("body")[0];
  let printId = "print-" + Date.now();

  // 创建无副作用的打印容器(因不确定页面的打印元素有无其它样式)
  let content = doc.createElement("div");
  content.id = printId;

  // 样式控制与打印无关的元素隐藏
  let style = doc.createElement("style");
  style.innerHTML =
    "body>#" +
    printId +
    "{display:none}@media print{" +
    "@page {" +
    "    size: auto; " +
    "    margin: 2mm 2mm 2mm 2mm;  " +
    "  }body>:not(#" +
    printId +
    "){display:none !important}body>#" +
    printId +
    "{display:block;padding-top:1px}}";
  //
  content.innerHTML = el.outerHTML;
  // // console.log("el.outerHTML", el.outerHTML);
  body.appendChild(style);

  // 与style元素设置的样式相配合
  // 把打印内容的元素添加到body(作为body的子元素，可用body的子选择器 '>' 控制打印样式)
  body.appendChild(content);
  setTimeout(() => {
    window.print();
    body.removeChild(content);
    body.removeChild(style);
  }, 20);
}
    // 上一页和下一页方法
    const prevPage = () => {
@@ -703,6 +760,18 @@
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheVerticalGlass/api/talk/slicecage`;
// 定义消息处理函数，更新 receivedData 变量
const handleMessage = (data) => {
  if (data.scanGlass != null) {
    scanGlass.value = data.scanGlass[0];
    let width = scanGlass.value.width;
    let height = scanGlass.value.height;
    if (width < height) {
      scanGlass.value.width = height;
      scanGlass.value.height = width;
    }
    if (autoPrint.value == true && browser.value == true) {
      open1(scanGlass);
    }
  }
  //当前指定工程
  if(data.bigStorageCageDetailsOutTask!=null){
    temperingengineerId.value=data.temperingengineerId[0];
@@ -877,6 +946,7 @@
  // console.log("关闭了")
  closeWebSocket();
});

</script>
 
<template>
@@ -887,6 +957,9 @@
    <el-button style="margin-top: 5px;margin-left: 10px;" id="searchButton" type="info" @click="handlezhiban">{{ $t('searchOrder.dutyinformation') }}</el-button>
    <el-button style="margin-top: 5px;margin-left: 10px;" id="searchButton" type="info" @click="dialogFormVisibles=true;fetchFlows()">非钢化流程卡查询</el-button>
    <el-switch style="margin-top: 5px;margin-left: 10px;" v-model="ganghua" class="mb-2" :inactive-text="$t('searchOrder.temperedswitch')" @change="handleChange" />
    <el-button style="margin-top: 10px;margin-left: 10px;margin-bottom: 10px;" id="searchButton" type="primary"
      @click="dialogFormVisibleaDownGlasss = true">人工下片
    </el-button>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 5px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;max-height: 100px;">
        <el-table height="100px" ref="table" 
@@ -897,9 +970,9 @@
          <el-table-column prop="bigStorageCageOutTask.trainNumber" align="center" :label="$t('searchOrder.trips')" min-width="120" />
          <el-table-column prop="bigStorageCageOutTask.serialNumber" align="center" :label="$t('searchOrder.number')" min-width="120" />
          <el-table-column prop="bigStorageCageOutTask.taskState" align="center" :label="$t('searchOrder.taskstatus')" min-width="157">
          <template #default="scope">  
            <el-tag type="success" >{{ scope.row.bigStorageCageOutTask.taskState==0? $t('searchOrder.filmenter') : $t('searchOrder.infilm') }}</el-tag>
          </template>
          <!-- <template #default="scope">  
            <el-tag type="success" >{{ scope.row.bigStorageCageOutTask.taskState==0? $t('searchOrder.filmenter') : $t('searchOrder.infilm') }}111</el-tag>
          </template> -->
          </el-table-column>
          <!-- <el-table-column prop="id" align="center" :label="$t('searchOrder.tabid')" min-width="150"/> -->
          <el-table-column prop="deviceId" align="center" :label="$t('searchOrder.tid')" min-width="100"/>
@@ -1615,6 +1688,33 @@
        </el-table-column>
        </el-table>
</el-dialog>
<el-dialog v-model="dialogFormVisibleaDownGlasss" top="2vh" width="97%" :title="$t('人工下片信息')">
          <div style="display:flex;justify-content: space-around;">
            <el-card
              style="display: flex; justify-content: center; align-items: center; width: 800px; height: 800px;position: relative;">
              <div
                :style="{ width: scanGlass.width + 'px', height: scanGlass.height + 'px', backgroundColor: '#e1f3d8', transform: 'scale(' + 800 / (scanGlass.width > scanGlass.height ? scanGlass.width : scanGlass.height) + ')' }">

              </div>
              <div style="font-size: 50px; text-align: center;position: absolute;top:0px;left:200px;">
                <div>扫码枪当前玻璃信息</div>
                <div>
                  <el-button type="primary" @click="open1(scanGlass)">打印标签</el-button>
                </div>
                <div>{{ scanGlass.flowCardId }}</div>
                <div>{{ scanGlass.layer }}</div>
                <div>{{ scanGlass.glassId }}</div>
                <div>{{ scanGlass.width }}</div>
                <div>{{ scanGlass.height }}</div>

              </div>
            </el-card>
          </div>
        </el-dialog>
        <el-dialog id="sizePrintCalrd1" v-model="dialogTableVisible1" destroy-on-close>
    <print-label id="printFlowCard" :printFlowCardId="printFlowCardId" :printLayer="printLayer"
                 :printGlassId="printGlassId" style=""/>
  </el-dialog>
</template>
<style scoped>
#dt { display:block; float:left;line-height: 20px;margin-left: 100px;}