<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>
</div>
<div class="order-top-QRCode widthClass">
<img src="/static/pipe/images/seatrium.png" />
<img src="/static/pipe/images/br.png" />
</div>
<div class="printable-area widthClass">
<table class="widthClass">
<tr style="height: 30px">
<td style="width: 50%;"></td>
<td style="width: 25%;font-size: 16px;border-left: none !
important;">Analysis Data Sheet: </td>
<td style="width: 25%;font-size: 16px;border-left: none !
important;">BM*:base material</td>
</tr>
</table>
<table class="widthClass" style="font-size: 16px;font-weight: 400;">
<tr style="height: 30px;">
<td style="width: 15%;">Project</td>
<td style="width: 20%;"></td>
<td style="width: 15%;">Discipline</td>
<td style="width: 10%;">Piping</td>
<td style="width: 10%;">Insp. Date</td>
<td style="width: 30%;"></td>
</tr>
<tr style="height: 30px;">
<td style="width: 15%;">Dep't</td>
<td style="width: 20%;">CIMC QMD - YCRO</td>
<td style="width: 15%;">Team</td>
<td colspan="3"></td>
</tr>
</table>
<table class="widthClass" style="font-size: 16px;font-weight: 400;">
<tr style="height: 30px;">
<td style="width: 15%;">Inspector</td>
<td style="width: 20%;">Zhang Luning</td>
<td style="width: 15%;">Inspection Place</td>
<td style="width: 20%;">WORKSHOP CENTER</td>
<td style="width: 15%;">Material</td>
<td style="width: 20%;">S31803</td>
</tr>
<tr style="height: 30px;">
<td style="width: 15%;">Procedure No</td>
<td style="width: 20%;">I-PR-3010.2S-1351-970-YCT-004</td>
<td style="width: 15%;">Equip. Name</td>
<td style="width: 20%;">FERITSCOPE FMP30</td>
<td style="width: 15%;">Serial NO</td>
<td style="width: 20%;">100020024</td>
</tr>
</table>
<table class="widthClass" style="font-size: 16px;font-weight: 400;">
<tr style="height: 130px;">
<td style="width: 80%;"><img src="/static/pipe/images/tst.png" /></td>
<td style="width: 20%;border-left: none !
important;">Acceptance Criteria:
a) 30% to 65% for weld metal
b) 40% to 65% for HAZ
c) 40% to 60% for base metal (including forgings and castings)</td>
</tr>
</table>
<table class="widthClass" style="font-size: 16px;font-weight: 400;">
<tr style="height: 30px;">
<td style="width: 5%;">No</td>
<td style="width: 5%;">Point</td>
<td style="width: 10%;">Drawing No</td>
<td style="width: 10%;">Joint No</td>
<td style="width: 10%;">Joint </td>
<td style="width: 10%;">HAZ 1/2</td>
<td style="width: 10%;">BASE 1/2</td>
<td style="width: 10%;">Result</td>
<td style="width: 30%;">Result</td>
</tr>
</table>
<table class="widthClass" style="font-size: 16px;font-weight: 400;">
<div v-for="(weldItem,index) in item.weldList" :key="item.id">
<tr style="min-height: 30px;" >
<td style="width: 5%; text-align: center; vertical-align: middle; display: table-cell;" rowspan="3" >{{ index }}</td>
<td style="width: 5%;">0°</td>
<td style="width: 10%;">{{ weldItem.indexNum }}</td>
<td style="width: 10%;">{{ weldItem.weldNo }}</td>
<td style="width: 10%;">NA </td>
<td style="width: 10%;">NA</td>
<td style="width: 10%;"></td>
<td style="width: 10%;">ACC</td>
<td style="width: 30%;"></td>
</tr>
<tr style="min-height: 30px;">
<!-- <td style="width: 5%;">{{ index }}</td>-->
<td style="width: 5%;">90°</td>
<td style="width: 10%;">{{ weldItem.indexNum }}</td>
<td style="width: 10%;">{{ weldItem.weldNo }}</td>
<td style="width: 10%;">NA </td>
<td style="width: 10%;">NA</td>
<td style="width: 10%;"></td>
<td style="width: 10%;">ACC</td>
<td style="width: 30%;"></td>
</tr>
<tr style="min-height: 30px;">
<!-- <td style="width: 5%;">{{ index }}</td>-->
<td style="width: 5%;">180°</td>
<td style="width: 10%;">{{ weldItem.indexNum }}</td>
<td style="width: 10%;">{{ weldItem.weldNo }}</td>
<td style="width: 10%;">NA </td>
<td style="width: 10%;">NA</td>
<td style="width: 10%;"></td>
<td style="width: 10%;">ACC</td>
<td style="width: 30%;"></td>
</tr>
</div>
</table>
<table class="widthClass" style="font-size: 16px;font-weight: 400;min-height: 90px">
<tr style="height: 30px;">
<td style="width: 10%;" rowspan="2">CIMC</td>
<td style="width: 10%;">DATE</td>
<td style="width: 20%;">SIGNATURE</td>
<td style="width: 10%;" rowspan="2">SEATRIUM </td>
<td style="width: 10%;">DATE</td>
<td style="width: 20%;">SIGNATURE</td>
<td style="width: 10%;" rowspan="2">PETROBRAS </td>
<td style="width: 10%;">DATE</td>
<td style="width: 20%;">SIGNATURE</td>
</tr>
<tr style="min-height: 80px;">
<td style="width: 10%;"></td>
<td style="width: 20%;"></td>
<td style="width: 10%;"> </td>
<td style="width: 20%;"></td>
<td style="width: 10%;"></td>
<td style="width: 20%;"></td>
</tr>
</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";
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: 1100px !
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: 25px;
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: 38px;
.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: 25px;
font-weight: bold;
width: 100%;
margin: 0;
}
.order-top-vice-title {
width: 100%;
}
}
}
.order-top-QRCode {
position: absolute;
right: 0;
top: 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.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: 38px;
.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: 25px;
font-weight: bold;
width: 100%;
margin: 0;
}
.order-top-vice-title {
width: 100%;
}
}
}
.order-top-QRCode {
position: absolute;
right: 0;
top: 0;
display: flex;
align-items: center;
justify-content: flex-end;
}
.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>
这里<td style="width: 25%;font-size: 16px;border-left: none !
important;">Analysis Data Sheet: </td> 为什么border-left: none !
important;没起作用
在线学习资源汇总
本文汇总了多个领域的在线学习资源链接，包括学车教程、微机原理课程、计算机图形学教学视频、数学视频专辑等，为不同需求的学习者提供丰富的参考资料。
扫一扫
596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
