Commit ac54db8d authored by 李翰林's avatar 李翰林

修改打印模板

parent a1dc9ca9
......@@ -12,9 +12,9 @@ export default {
"/srwms/": {
// 要代理的地址
// target: "http://192.168.40.18/wms/", //39:28040 18/wms/
target: "http://192.168.40.228:28040", //39:28040 18/wms/ dj
// target: "http://192.168.40.228:28040", //39:28040 18/wms/ dj
// target: "http://192.168.40.117:28040", //39:28040 18/wms/ jf
// target: "http://192.168.40.203:28040", //39:28040 18/wms/ jf
target: "http://192.168.40.203:28040", //39:28040 18/wms/ jf
changeOrigin: true,
pathRewrite: {
"^/srwms": "",
......
......@@ -53,23 +53,25 @@ const Station = (props) => {
dataIndex: "specificationModel",
key: "specificationModel",
},
{
title: "重量",
dataIndex: "weight",
key: "weight",
search: false,
},
{
title: "米数",
dataIndex: "length",
key: "length",
search: false,
},
{
title: "批次号",
dataIndex: "materieControlNo",
key: "materieControlNo",
},
{
title: "供应商",
dataIndex: "supplierName",
key: "supplierName",
search: false,
},
{
title: "宽度",
dataIndex: "width",
......@@ -94,6 +96,12 @@ const Station = (props) => {
key: "unilateralThickness",
search: false,
},
{
title: "供应商",
dataIndex: "supplierName",
key: "supplierName",
search: false,
},
{
title: "二维码",
dataIndex: "qrCodeUrl ",
......@@ -239,41 +247,41 @@ const Station = (props) => {
// const [data, setdata] = useState({});
// useEffect(() => {
// let el = document.getElementById("mydemo");
// el.innerHTML = ` <div>
// <div style="display:flex; width:100% ;height:100%; flex-direction: column;justify-self: space-between; font-family:'宋体'">
// <div style="display:flex; flex-direction: row;flex:2;">
// <div style="display:flex;flex-direction: column;flex:2">
// <div style="flex:1">卷料名称:${data?.materieName ?? "--"}</div>
// <div style="flex:1">卷料编码:${data?.materieCode ?? "--"}</div>
// </div>
// </div>
// <div style="display:flex; flex-direction: row;flex:1;">
// <div style="flex:3;display:flex;flex-direction: row;">
// <div style="flex:1">批次:${data?.materieControlNo ?? "--"}</div>
// <div style="flex:1">厚度:${data?.unilateralThickness ?? "--"}mm</div>
// </div>
// <div style="flex:1">
// <img src=${data?.qrCodeUrl} style="width:100%"/>
// </div>
// </div>
// <div style="display:flex; flex-direction: row;flex:1;">
// <div style="flex:2">铁损:${data?.ironLoss ?? "--"}w/kg</div>
// <div style="flex:3">牌号:${data?.shopSign ?? "--"}片</div>
// </div>
// <div style="display:flex; flex-direction: row;flex:1;">
// <div style="flex:2">宽度:${data?.width ?? "--"}mm</div>
// <div style="flex:3">片厚:${data?.sheetThickness ?? "--"}mm</div>
// </div>
// <div style="display:flex; flex-direction: row;flex:1;">
// <div style="flex:2">重量:${data?.weight ?? "--"}KG</div>
// <div style="flex:3">米数:${data?.length ?? "--"}M</div>
// </div>
// useEffect(() => {
// let el = document.getElementById("mydemo");
// el.innerHTML = ` <div>
// <div style="display:flex; width:100% ;height:100%; flex-direction: column;justify-self: space-between; font-family:'宋体'">
// <div style="display:flex; flex-direction: row;flex:2;">
// <div style="display:flex;flex-direction: column;flex:2">
// <div style="flex:1">卷料名称:${data?.materieName ?? "--"}</div>
// <div style="flex:1">卷料编码:${data?.materieCode ?? "--"}</div>
// </div>
// </div>
// <div style="display:flex; flex-direction: row;flex:1;">
// <div style="flex:3;display:flex;flex-direction: row;">
// <div style="flex:1">批次:${data?.materieControlNo ?? "--"}</div>
// <div style="flex:1">厚度:${data?.unilateralThickness ?? "--"}mm</div>
// </div>
// <div style="flex:1">
// <img src=${data?.qrCodeUrl} style="width:100%"/>
// </div>
// </div>
// <div style="display:flex; flex-direction: row;flex:1;">
// <div style="flex:2">铁损:${data?.ironLoss ?? "--"}w/kg</div>
// <div style="flex:3">牌号:${data?.shopSign ?? "--"}片</div>
// </div>
// <div style="display:flex; flex-direction: row;flex:1;">
// <div style="flex:2">宽度:${data?.width ?? "--"}mm</div>
// <div style="flex:3">片厚:${data?.sheetThickness ?? "--"}mm</div>
// </div>
// <div style="display:flex; flex-direction: row;flex:1;">
// <div style="flex:2">重量:${data?.weight ?? "--"}KG</div>
// <div style="flex:3">米数:${data?.length ?? "--"}M</div>
// </div>
// </div>
// </div>`;
// }, []);
// </div>
// </div>`;
// }, []);
const OptionsBtn = () => {
return (
......
This diff is collapsed.
.kb-container {
width: 100%;
height: calc(100vh - 98px) !important;
background-color: rgba(26, 32, 44);
}
.kb-container header {
height: 64px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.kb-container header h2 {
color: aliceblue;
font-weight: 600;
font-size: 30px;
text-shadow: 1px 1px 2px white;
}
.kb-container header > div {
flex: 1;
}
.kb-container .kb-content {
height: calc(100% - 64px);
width: 100%;
display: flex;
flex-direction: row;
}
.kb-container .kb-content .Left {
width: 33.33%;
}
.kb-container .kb-content .Left .unit {
flex: 1;
}
.kb-container .kb-content .Center {
flex: 2;
}
.kb-container .kb-content .Center > .unit:first-child {
flex: 2;
display: flex;
flex-direction: row;
}
.kb-container .kb-content .Center > .unit:first-child > div:first-child {
flex: 1;
height: 100%;
}
.kb-container .kb-content .Center > .unit:first-child > div:last-child {
flex: 3;
}
.kb-container .kb-content .Center > .unit:last-child {
flex: 1;
}
.kb-container .kb-content .Right {
flex: 1;
}
.kb-container .kb-content .Right > .unit:first-child {
flex: 2;
}
.kb-container .kb-content .Right > .unit:nth-child(2) {
flex: 2;
}
.kb-container .kb-content .Right > .unit:last-child {
flex: 1;
}
.kb-container .kb-content .Left,
.kb-container .kb-content .Center,
.kb-container .kb-content .Right {
display: flex;
flex-direction: column;
height: 100%;
}
.kb-container .kb-content .unit {
background-color: rgba(49, 60, 77, 0.8);
border-radius: 20px;
margin: 8px;
padding: 8px;
}
.kb-container .data-content {
height: 100%;
width: 100%;
}
.kb-container .data-content .content-title {
width: 100%;
height: 48px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.kb-container .data-content .content-title span {
flex: 1;
color: #fff;
text-align: center;
font-size: 14px;
}
.kb-container .content-charts {
width: 100%;
height: calc(100% - 32px);
}
.kb-container .content-header {
height: 32px;
width: 100%;
border-bottom: 1px solid;
border-image: linear-gradient(to left, rgba(255, 255, 255, 0.1) 10%, rgba(177, 95, 231, 0.637) 50%, #00bbf2 100%) 2 2 2 2;
color: #fff;
font-size: 18px;
}
.kb-container .content-div {
height: calc(100% - 32px);
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 12px;
padding-bottom: 12px;
}
.kb-container .content-div > div {
flex: 1;
margin: 12px 24px;
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 20px;
align-items: center;
}
.kb-container .content-div > div img {
width: 34px;
height: 34px;
}
.kb-container .content-div > div p {
color: #fff;
font-weight: 600;
font-size: 14px;
display: block;
width: 30px;
}
.kb-container .content-div > div span {
font-size: 35px;
color: #fff;
font-weight: 600;
text-shadow: 1px 1px 2px #fff;
}
.kb-container .content-div > div:nth-child(1) {
background-image: url('../../../public/img/cover1.png');
}
.kb-container .content-div > div:nth-child(2) {
background-image: url('../../../public/img/cover2.png');
}
.kb-container .content-div > div:nth-child(3) {
background-image: url('../../../public/img/cover3.png');
}
.kb-container .content-div > div:nth-child(4) {
background-image: url('../../../public/img/cover3.png');
}
.kb-container .dv-scroll-board {
background-image: var(--bgUrl--);
background-position: 0 0;
background-size: 100% 100%;
height: calc(100% - 80px);
background-color: transparent;
}
.kb-container .dv-scroll-board .row {
width: 100%;
height: 100%;
}
.kb-container .dv-scroll-board .row-item {
background-color: transparent !important;
text-align: center;
width: 100%;
}
.kb-container .realTime {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.51), rgba(0, 0, 0, 0.51)), linear-gradient(176deg, #77F7F7 -1054%, rgba(145, 143, 220, 0.94) 128%, #313C4D 1124%);
}
.kb-container .realTime > div:last-child {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: auto;
justify-self: center;
}
.kb-container .realTime .realTime-content {
width: 200px;
height: 70px;
background: #1A202C;
border-radius: 11px;
box-shadow: inset 1px 1px 2px 1px rgba(255, 255, 255, 0.3);
text-align: center;
line-height: 70px;
margin-right: 10px;
}
.kb-container .realTime .realTime-content span {
color: #1FDBDB;
font-size: 25px;
font-weight: 600;
}
.kb-container .jk-content {
display: flex;
flex-direction: column;
height: 100%;
width: 500px;
padding: 12px 0px 24px 24px;
}
.kb-container .jk-content .ant-carousel {
width: 100% ;
height: 100%;
}
.kb-container .jk-content .jk-content-unit {
width: 500px;
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
margin-left: 6px;
gap: 2px;
height: 500px;
}
.kb-container .jk-content .jk-content-unit .jk-statusBottom {
width: 100%;
position: absolute;
top: 1;
height: 100%;
}
.kb-container .jk-content .statusDiv {
height: auto;
flex: 9%;
background-color: #00bbf2;
border: 1px red;
margin: 1px;
}
.kb-container .jk-content .statusLine {
width: 100%;
background-color: green;
height: 10px;
}
.kb-container .jk-content .jk-status {
height: 10px;
width: 100%;
display: flex;
flex-direction: row;
}
.kb-container .jk-content .statusLine {
border-radius: 32px;
}
.kb-container .jk-content .bgline1 {
background: linear-gradient(90deg, #00bbf277 0%, #ffffff77 100%);
}
.kb-container .jk-content .bgline3 {
background: linear-gradient(90deg, #00bbf277 0%, #ffffff77 100%);
}
.kb-container .jk-content .jk-statusContent {
flex: 1;
display: flex;
flex-direction: column;
flex-wrap: wrap;
position: relative;
height: 100%;
}
.kb-container .jk-content .jk-statusContent .jk-statusBottom {
position: absolute;
left: -18px;
height: calc(100% - 10px);
display: flex;
flex-direction: column;
}
.kb-container .jk-content .jk-statusContent .jk-statusBottom span {
flex: 1;
display: flex;
font-size: 16px;
flex-direction: column;
justify-content: center;
color: skyblue;
font-weight: 600;
}
.kb-container .numStatus {
position: absolute;
left: -20px;
}
.kb-container .numStatus .numberStatus {
display: flex;
flex-direction: row;
justify-content: space-around;
align-self: center;
height: auto;
width: 100%;
}
.kb-container .numStatus .numberStatus span {
color: #fff;
flex: 1;
height: auto;
text-align: center;
font-size: 16px;
padding-top: 6px;
}
.kb-container .statuslogo > div {
display: flex;
flex-direction: row;
color: #fff;
margin-right: 12px;
align-items: center;
}
.kb-container .statustitle {
width: 16px;
height: 13px;
border-radius: 2px;
margin-right: 3px;
}
......@@ -148,8 +148,8 @@ export default (second) => {
const queryMonitorFetch = useRequest(queryMonitor, {
manual: false,
onSuccess: (result, params) => {
console.log(result);
setMonitor(result[0]?.secondList);
console.log(11111111111111111111111111,result);
setMonitor(result);
},
onError: (error) => {
message.error(error.message);
......
......@@ -37,8 +37,6 @@
.unit {
flex: 1;
}
}
......@@ -252,18 +250,27 @@
.jk-content {
display: flex;
flex-direction: column;
height: calc(100% - 32px);
height: 100%;
width: 500px;
padding: 12px 0px 24px 24px;
.ant-carousel{
width: 100% ;
height: 100%;
}
.slick-dots{
}
.jk-content-unit {
width: 500px;
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
margin-left: 6px;
gap: 2px;
height: 100%;
height: 500px;
.jk-statusBottom {
width: 100%;
......@@ -275,9 +282,10 @@
.statusDiv {
height: auto;
flex: 22%;
flex: 9%;
background-color: #00bbf2;
border-radius: 10px;
// border-radius: 50%;
border:1px red;
margin: 1px
}
......@@ -304,18 +312,13 @@
.bgline1 {
background: linear-gradient(90deg, rgba(255, 15, 15, 0.49) 0%, rgba(246, 244, 244, 0.00) 51%, rgba(255, 0, 0, 0.38) 100%);
background: linear-gradient(90deg, #00bbf277 0%, #ffffff77 100%);
}
.bgline2 {
background: linear-gradient(90deg, rgba(255, 147, 15, 0.49) 0%, rgba(246, 244, 244, 0.00) 51%, rgba(255, 140, 0, 0.38) 100%);
}
.bgline3 {
background: linear-gradient(90deg, rgba(255, 251, 15, 0.49) 0%, rgba(246, 244, 244, 0.00) 51%, rgba(255, 251, 0, 0.38) 100%);
background: linear-gradient(90deg, #00bbf277 0% , #ffffff77 100%);
}
......@@ -350,7 +353,7 @@
.numStatus {
position: absolute;
left: -25px;
left: -20px;
.numberStatus {
display: flex;
......
......@@ -43,7 +43,7 @@ export function str(data) {
// </tr>
// </table>`;
return ` <div style="display:flex; width:100% ;height:95%; flex-direction: column;justify-self: space-between; font-family:'宋体'">
return ` <div style="display:flex; width:100% ;height:100%; flex-direction: column;justify-self: space-between; font-family:'宋体'">
<div style="display:flex; flex-direction: row;flex:2;">
<div style="flex:3;display:flex;flex-direction: column;">
......
......@@ -22,9 +22,10 @@ export async function start(url, params) {
const data = JSON.parse(JSON.stringify(res?.data?.dataList));
for (let i = 0; i < data.length; i++) {
const template = str(data[i]);
console.log(template);
let LODOP = getLodop();
LODOP.PRINT_INIT("task1");
LODOP.ADD_PRINT_HTM("8%", 0, "100%", "100%", template);
LODOP.ADD_PRINT_HTM("8%", 0, "100%", "92%", template);
LODOP.SET_PRINT_PAGESIZE(0, 1000, 500, "");
// LODOP.PREVIEW();
LODOP.PRINT();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment