<template>
<c-modal v-model
:open="open" title="" @ok="handleOrderOk" width="1600px"
:footer="null">
<div style="padding-bottom
: 15px">
<a-button key="back" @click="handleCancel" v-if="isFooter">取消</a-button>
<a-button key="print" @click="handlePrint">打印</a-button>
</div>
<div id="printJS-form">
<div
v-for="(item, index) in formState"
:key="index">
<div class="order-container print-container-div" >
<div class="order-top widthClass">
<div class="order-top-title">
<div class="order-top-logo"><img class="logo" src="../../../assets/cimc.png" /></div>
<p class="order-top-titles">Piping Welds Positive Material Identification Report</p>
<div class="order-top-QRCode" style="float
: right;width
: 100px">
<img style="width
: 80px;weight
:30px;float
: right" src="/static/pipe/images/seatrium.png" />
<img style="width
: 80px;weight
:30px;float
: right" src="/static/pipe/images/br.png" />
</div>
</div>
</div>
<div class="printable-area widthClass">
<table class="widthClass">
<tr style="
height: 30px">
<td style="width
: 50
%;"></td>
<td style="width
: 12
%;font-size
: 16px;border-left
: 0 none !important;">Analysis Data Sheet
: </td>
<td style="width
: 13
%;font-size
: 16px;border-left
: 0 none !important;"> </td>
<td style="width
: 12
%;font-size
: 16px;border-left
: 0 none !important;">BM*
:base material</td>
<td style="width
: 13
%;font-size
: 16px;border-left
: 0 none !important;"></td>
</tr>
</table>
<table class="widthClass" style="font-size
: 16px;font-weight
: 400;">
<tr style="
height: 30px;">
<td style="width
: 28
%;">Job Title
:</td>
<td style="width
: 24
%;">{{item.pringProjectNo}}</td>
<td style="width
: 24
%;">PMI Report NO.
:</td>
<td style="width
: 24
%;"></td>
</tr>
<tr style="
height: 30px;">
<td style="width
: 28
%;">Location
:</td>
<td style="width
: 24
%;">Workshop </td>
<td style="width
: 24
%;">Date
:</td>
<td style="width
: 24
%;">{{dayjs(item.applyDate).format("YYYY-MM-DD")}}</td>
</tr>
<tr style="
height: 30px;">
<td style="width
: 28
%;">Analyser Type and Model No.
:</td>
<td style="width
: 24
%;">Nition XL2</td>
<td style="width
: 24
%;">Operators
:</td>
<td style="width
: 24
%;">Ding Guang wei</td>
</tr>
<tr style="
height: 30px;">
<td style="width
: 28
%;">Analyser Serial No.
:</td>
<td style="width
: 24
%;"></td>
<td style="width
: 24
%;">Analyser Cablibration Date
:</td>
<td style="width
: 24
%;"></td>
</tr>
<tr style="
height: 30px;">
<td style="width
: 28
%;">Material Specification/Grade
:</td>
<td style="width
: 24
%;">316/316L</td>
<td style="width
: 24
%;">PMI Procedure No.
:</td>
<td style="width
: 24
%;">I-PR-3010.2S-1351-973-YCT-001</td>
</tr>
</table>
<table class="widthClass" style="font-size
: 16px;font-weight
: 400;">
<tr style="
height: 30px;">
<td style="width
: 5
%;" rowspan="4">S/NO</td>
<td style="width
: 23
%;" rowspan="4">Joint No.</td>
<td style="width
: 60
%;" colspan = '10'>Alloy Content, WT
%</td>
<td style="width
: 12
%;" colspan = '2'>Result</td>
</tr>
<tr style="
height: 30px;">
<td style="width
: 6
%;">Min.</td>
<td style="width
: 6
%;">10.0</td>
<td style="width
: 6
%;">16.0</td>
<td style="width
: 6
%;">2.00</td>
<td style="width
: 6
%;">NA</td>
<td style="width
: 6
%;">NA</td>
<td style="width
: 6
%;">NA</td>
<td style="width
: 6
%;">NA</td>
<td style="width
: 6
%;">NA</td>
<td style="width
: 6
%;">NA</td>
<td style="width
: 6
%;" rowspan="2">Accept</td>
<td style="width
: 6
%;" rowspan="2">Reject</td>
</tr>
<tr style="
height: 30px;">
<td style="width
: 6
%;">Max.</td>
<td style="width
: 6
%;">14.0</td>
<td style="width
: 6
%;">20.0</td>
<td style="width
: 6
%;">3.00</td>
<td style="width
: 6
%;">NA</td>
<td style="width
: 6
%;">NA</td>
<td style="width
: 6
%;">NA</td>
<td style="width
: 6
%;">NA</td>
<td style="width
: 6
%;">NA</td>
<td style="width
: 6
%;">NA</td>
</tr>
<tr style="
height: 30px;">
<td style="width
: 6
%;">I.D.</td>
<td style="width
: 6
%;">Ni</td>
<td style="width
: 6
%;">Cr</td>
<td style="width
: 6
%;">Mo</td>
<td style="width
: 6
%;">Cu</td>
<td style="width
: 6
%;">NB(cb)</td>
<td style="width
: 6
%;">Ti</td>
<td style="width
: 6
%;">W</td>
<td style="width
: 6
%;">C</td>
<td style="width
: 6
%;">Other</td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
</tr>
</table>
<table class="widthClass" style="font-size
: 16px;font-weight
: 400;">
<div v-for="(weldItem,index) in item.weldList"
:key="item.id" style="width
: 100%;">
<tr style="width
: 100%;min-
height: 30px;" >
<td style="width
: 5
%; text-align
: center; vertical-align
: middle; display
: table-cell;" rowspan="3">{{index+1}}</td>
<td style="width
: 23
%;">{{weldItem.weldNo}}</td>
<td style="width
: 6
%;">BM1*</td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
</tr>
<tr style="width
: 100%;min-
height: 30px;" >
<td style="width
: 23
%;" >{{weldItem.weldNo}}</td>
<td style="width
: 6
%;">Joint</td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
</tr>
<tr style="width
: 100%;min-
height: 30px;" >
<td style="width
: 23
%;">{{weldItem.weldNo}}</td>
<td style="width
: 6
%;">BM2*</td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
</tr>
</div>
</table>
</div>
</div>
<div style="page-break-after
:always"></div>
</div>
</div>
</c-modal>
</template>
<script setup>
import {ref, reactive, onMounted} from "vue"
import { print } from "@/utils/print"
import * as server from "@/packages/piping/api/cpin";
import {create} from "@/utils/imgtoBase64";
import dayjs from "dayjs"
const open = ref(false)
const initType = ref()
const totalWeight = ref(0)
const formState = ref({})
const isFooter = ref(true)
const orderTableState = reactive({
datasource
: []
})
onMounted(() => {
create("/static/mes/images/dataScreen-header-center-bg.png").then((res) => {
centerImg.value = res
})
})
const handleOrderOk = () => {}
const init = (type, data) => {
initType.value = type
isFooter.value = type === "galv"
console.log("data2", data)
let printDatas = []
// 使用 Promise.all 等待所有异步操作完成
Promise.all(data.map(async (dataItem) => {
try {
const res = await server.getOrderList({ page
: 0, size
: 10000, orderNo
: dataItem.orderNo })
let item = res.data.content[0] || {}
item.weldList.forEach((weld, index) => {
weld.indexNum = index + 1
})
return item
} catch (error) {
console.error("获取订单列表失败
:", error)
return {}
}
})).then(results => {
printDatas = results
formState.value = printDatas
})
}
const handleCancel = () => {
open.value = false
}
const handlePrint = () => {
print({
// mediaPrint
:false,
// noPrintSelector
:'avoid-this',
type
: "
html",
printable
: "printJS-form",
// type
: "raw-
html",
// printable
: "test-dom",
// scanStyles
: false,
// noHeadersAndFooters
:true,
maxWidth
: 1500,
targetStyles
: ["*"],
scanStyles
: false,
style
: `
table{font-size
:3px}
td{font-size
:10px !important}
.print-container-div{
width
: 1
100px !important;
}
.widthClass{
width
: 1000px;
font-size
:1px
}
.ant-descriptions-view >table{
width
:100%!important;
font-size
:1px;
}
@media print {
a[href]
:after {
content
: none !important;
}
#footer { display
: none; }
}
.imgInline{
display
: flex;}
.order-top-QRCode{float
:right}
.order-top-title {
width
: 100%;
height: 50px;
text-align
: center;
display
: flex;
padding-top
:15px
}
.order-top-logo {
img {
margin-top
:10px;
width
: 150px;
position
: absolute;
left
: 0;
}
}
.order-top-titles {
font-size
: 18px;
font-weight
: bold;
width
: 100%;
margin
: 0;
align
:center;
text-align
:center;
padding-top
:15px;
}
.order-top-vice-title {
width
: 100%;
}
.logo{width
:150px;
height:20px}
.paging{page-break-after
: aways;}
.order-container {
width
: 100%;
height: 100%;
position
: relative;
display
: flex;
flex-direction
: column;
align-items
: center;
justify-content
: center;
.order-top {
width
: 100%;
display
: flex;
justify-content
: center;
position
: relative;
margin-bottom
: 100px;
height:400px;
.order-top-title {
width
: 45
%;
height: 50px;
text-align
: center;
display
: flex;
.order-top-logo {
img {
width
: 150px;
position
: absolute;
left
: 0;
}
}
.order-top-titles {
font-size
: 18px;
font-weight
: bold;
width
: 100%;
margin
: 0;
}
.order-top-vice-title {
width
: 100%;
}
}
}
.order-top-QRCode {
display
: flex;
align-items
: center;
}
.order-mid {
width
: calc(
100%);
padding-top
: 15px;
}
.order-mod {
width
: calc(
100% );
.order-mod-left{
width
: 49
%;
padding
: 5px 0;
border-radius
: 10px;
background
: #eef0f3;
}
.order-mod-right {
width
: 49
%;
padding
: 5px 0;
border-radius
: 10px;
background
: #eef0f3;
}
.order-mod-title {
//border
: 1px solid #3981ee;
padding
: 5px;
//color
: #3981ee;
width
: 50
%;
display
: flex;
align-items
: center;
justify-content
: center;
margin
: 10px auto;
background
: #fff;
border-radius
: 7px;
}
.order-mod-content {
display
: flex;
align-items
: center;
width
: 100%;
margin
: 10px auto;
.order-mod-content-title {
width
: 30
%;
text-align
: right;
padding
: 5px 0;
}
.order-mod-content-content {
flex
: 1;
white-space
: nowrap;
}
}
}
.order-bot {
width
: 100%;
margin-top
: 10px;
}
.order-table {
//border
: 1px solid black !important;
// transform
: scale(0.7);
//width
: calc(
100% / 0.7);
// transform-origin
: top center;
}
}
:deep(.ant-descriptions) {
.ant-descriptions-item-label {
white-space
: nowrap;
width
: 20px;
border
: 1px solid black !important;
}
.ant-descriptions-item-content {
white-space
: nowrap;
border
: 1px solid black !important;
}
}
.ant-modal .ant-modal-body{font-size
:9px}
:deep(.c-table-wrap) {
.ant-table-container {
table {
//padding-bottom
: 80px;
}
.ant-table-cell{
border
: 1px solid black !important;
padding
: 12px 8px;
}
.ant-table-cell-ellipsis {
border-color
: black !important;
border
: 1px;
padding
: 12px 8px;
}
}
}
.order-container {
width
: 100%;
}
thead {
display
: table-header-group;
}
.order-top,
.order-mid,
.order-mod,
.order-bot,
.order-table {
page-break-inside
: avoid;
}
td{text-align
: center;border
: 1px solid #000;}
th{ text-align
: center;border
: 1px solid #000;}
.ant-table-row{
page-break-inside
: avoid;
}
td{text-align
: center;border
: 1px solid #000;}
tr {page-break-inside
: avoid;}
th{ text-align
: center;border
: 1px solid #000;}
table { border-collapse
: collapse;}
table tr th, table tr td { border
: 1px solid #000!important; }
#printJS-form table tr td[style*="border-left
: none"] {
border-left
: none !important;
}
.print-container { transform
: scale(0.8); transform-origin
: top left; width
: 100%; }
//@page{size
:auto}
//.paging{page-break-after
: always;}
}
`
})
}
defineExpose({ init, open })
window.onbeforeprint = function () {
var links = document.getElementsByTagName("a")
for (var i = 0; i < links.length; i++) {
links[i].setAttribute("data-href", links[i].href)
links[i].removeAttribute("href")
}
}
window.onafterprint = function () {
var links = document.getElementsByTagName("a")
for (var i = 0; i < links.length; i++) {
links[i].href = links[i].getAttribute("data-href")
links[i].removeAttribute("data-href")
}
}
</script>
<style lang="less" scoped>
.order-container {
width
: 100%;
height: 100%;
position
: relative;
display
: flex;
flex-direction
: column;
align-items
: center;
justify-content
: center;
.order-top {
width
: 100%;
display
: flex;
justify-content
: center;
position
: relative;
margin-bottom
: 60px;
.order-top-title {
width
: 45
%;
height: 50px;
text-align
: center;
display
: flex;
.order-top-logo {
img {
width
: 150px;
position
: absolute;
left
: 0;
}
}
.order-top-titles {
font-size
: 18px;
font-weight
: bold;
width
: 100%;
margin
: 0;
}
.order-top-vice-title {
width
: 100%;
}
}
}
.order-top-QRCode {
display
: flex;
align-items
: center;
}
.order-mid {
width
: calc(
100%);
padding-top
: 15px;
}
.order-mod {
width
: calc(
100%);
.order-mod-left {
width
: 49
%;
padding
: 5px 0;
border-radius
: 10px;
background
: #eef0f3;
}
.order-mod-right {
width
: 49
%;
padding
: 5px 0;
border-radius
: 10px;
background
: #eef0f3;
}
.order-mod-title {
//border
: 1px solid #3981ee;
padding
: 5px;
//color
: #3981ee;
width
: 50
%;
display
: flex;
align-items
: center;
justify-content
: center;
margin
: 10px auto;
background
: #fff;
border-radius
: 7px;
}
.order-mod-content {
display
: flex;
align-items
: center;
width
: 100%;
margin
: 10px auto;
.order-mod-content-title {
width
: 30
%;
text-align
: right;
padding
: 5px 0;
}
.order-mod-content-content {
flex
: 1;
white-space
: nowrap;
}
}
}
.order-bot {
width
: 100%;
margin-top
: 10px;
}
.order-table {
//border
: 1px solid black !important;
// transform
: scale(0.7);
//width
: calc(
100% / 0.7);
// transform-origin
: top center;
}
}
:deep(.ant-descriptions) {
.ant-descriptions-item-label {
white-space
: nowrap;
width
: 20px;
border
: 1px solid black !important;
}
.ant-descriptions-item-content {
white-space
: nowrap;
border
: 1px solid black !important;
}
}
:deep(.c-table-wrap) {
.ant-table-container {
table {
//padding-bottom
: 80px;
}
.ant-table-cell {
border
: 1px solid black !important;
padding
: 12px 8px;
}
.ant-table-cell-ellipsis {
border-color
: black !important;
border
: 1px;
padding
: 12px 8px;
}
}
}
.order-container {
width
: 100%;
}
thead {
display
: table-header-group;
}
.order-top,
.order-mid,
.order-mod,
.order-bot,
.order-table {
page-break-inside
: avoid;
}
.order-mod-title {
}
td {
text-align
: center;
border
: 1px solid #000;
}
th {
text-align
: center;
border
: 1px solid #000;
}
@media print {
a[href]
:after {
content
: none !important;
}
#footer {
display
: none;
}
tr {
page-break-inside
: avoid;
}
}
.ant-table-row {
page-break-inside
: avoid;
}
td {
text-align
: center;
border
: 1px solid #000;
}
tr {
page-break-inside
: avoid;
}
th {
text-align
: center;
border
: 1px solid #000;
}
table {
border-collapse
: collapse;
}
table tr th,
table tr td {
border
: 1px solid #000 !important;
}
.ant-descriptions-item-label {
white-space
: nowrap !important;
}
.print-container {
transform
: scale(0.8);
transform-origin
: top left;
width
: 100%;
}
.numbers {
font-family
: "Arial", sans-serif; /* 或其他不支持自动转换的字体 */
}
div {
font-family
: "Arial", sans-serif; /* 或其他不支持自动转换的字体 */
}
.widthClass {
width
: 1500px !important;
}
.print-container-div {
width
: 1500px !important;
}
</style>
其中 <table class="widthClass" style="font-size
: 16px;font-weight
: 400;">
<div v-for="(weldItem,index) in item.weldList"
:key="item.id" style="width
: 100%;">
<tr style="width
: 100%;min-
height: 30px;" >
<td style="width
: 5
%; text-align
: center; vertical-align
: middle; display
: table-cell;" rowspan="3">{{index+1}}</td>
<td style="width
: 23
%;">{{weldItem.weldNo}}</td>
<td style="width
: 6
%;">BM1*</td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
</tr>
<tr style="width
: 100%;min-
height: 30px;" >
<td style="width
: 23
%;" >{{weldItem.weldNo}}</td>
<td style="width
: 6
%;">Joint</td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
</tr>
<tr style="width
: 100%;min-
height: 30px;" >
<td style="width
: 23
%;">{{weldItem.weldNo}}</td>
<td style="width
: 6
%;">BM2*</td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
<td style="width
: 6
%;"></td>
</tr>
</div>
</table>
设置宽度
100%没有起作用
本文详细解析了HTML元素高度计算机制，包括百分比高度应用、html元素高度属性的理解以及body元素高度对子元素高度的影响。通过实例演示，帮助开发者掌握元素布局的关键技巧。
扫一扫
936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
