pdf 디자인변경 및 크기변경 #260

Merged
ysCha merged 1 commits from dev into prd-deploy 2025-12-11 15:40:55 +09:00
5 changed files with 520 additions and 156 deletions

View File

@ -2357,8 +2357,7 @@ public class PwrGnrSimService {
// chart 데이터 // chart 데이터
String[] color = { String[] color = {
"#B5D4F5", "#FFE899", "#FBC3AB", "#D1D1D1", "#FFE899", "#B5D0F0", "#C1E4B8", "#A3C9EE", "#0066cc", "#0066cc", "#0066cc", "#0066cc", "#0066cc", "#0066cc", "#0066cc", "#0066cc", "#0066cc", "#0066cc", "#0066cc", "#0066cc"
"#F7BBA2", "#BEBEBE", "#A8BBE0", "#B5D7A3"
}; };
StringBuilder sb2 = new StringBuilder(); StringBuilder sb2 = new StringBuilder();
for (int i = 0; i < onlyData.length; i++) { for (int i = 0; i < onlyData.length; i++) {

View File

@ -2,6 +2,19 @@
<html lang="ja"> <html lang="ja">
<head> <head>
<style> <style>
@page { size: A4; margin: 10mm 12mm; }
.section1, .section2, .section3 .section4 .section5 .section6{
page-break-before: always;
page-break-after: always;
page-break-inside: avoid;
/* 실제 출력 높이: 297mm - 20mm = 277mm */
max-height: 277mm;
overflow: hidden;
padding: 5mm;
}
.section:first-child { page-break-before: auto; }
@media print { @media print {
body { body {
print-color-adjust: exact; print-color-adjust: exact;
@ -9,14 +22,25 @@
} }
} }
/*.section:first-child {*/
/* page-break-before: auto;*/
/*}*/
body {
margin: 0;
padding: 0;
font-family: 'Malgun Gothic', sans-serif;
font-size: 9px; /* 폰트 작게 */
line-height: 1.2; /* 줄간격 좁게 */
}
table { table {
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
font-family: M-Gothic; font-family: M-Gothic;
font-size: 11px; font-size: 9px;
border-collapse: collapse; border-collapse: collapse;
margin: 0 auto; margin: 0 auto;
line-height: 150%; line-height: 115%;
color: #333 color: #333
} }
@ -25,9 +49,9 @@
} }
th, td { th, td {
padding: 5px 5px 3px; padding: 3px 3px 2px;
text-align: center; text-align: center;
font-size: 12px; font-size: 9px;
border: 1px solid #000 border: 1px solid #000
} }
@ -82,8 +106,8 @@
.guide-content { .guide-content {
white-space: pre-line; white-space: pre-line;
line-height: 1.4; line-height: 1.2;
font-size: 14px; font-size: 9px;
flex: 1; flex: 1;
} }
@ -109,7 +133,7 @@
} }
.y-axis td { .y-axis td {
font-size: 12px; font-size: 10px;
line-height: 1; line-height: 1;
vertical-align: bottom; vertical-align: bottom;
padding: 12.3px 0 padding: 12.3px 0
@ -139,7 +163,7 @@
} }
.chart-wrapper td.month-cell { .chart-wrapper td.month-cell {
font-size: 12px; font-size: 10px;
padding-top: 7px padding-top: 7px
} }
@ -156,7 +180,7 @@
/* 타이틀 */ /* 타이틀 */
.title { .title {
text-align: center; text-align: center;
font-size: 40px; font-size: 30px;
letter-spacing: 10px; letter-spacing: 10px;
font-weight: bold; font-weight: bold;
margin: 10px 0 30px; margin: 10px 0 30px;
@ -172,7 +196,7 @@
/* 총액퍼블 */ /* 총액퍼블 */
.all-price-wrap { .all-price-wrap {
text-align: center; text-align: center;
margin-bottom: 50px; margin-bottom: 20px;
} }
.all-price { .all-price {
@ -183,7 +207,7 @@
.all-price span { .all-price span {
display: inline-block; display: inline-block;
font-size: 18px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
@ -196,13 +220,13 @@
/* 태양전지 */ /* 태양전지 */
.sun-volt { .sun-volt {
display: inline-block; display: inline-block;
margin-bottom: 30px; margin-bottom: 20px;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
.sun-volt span { .sun-volt span {
display: inline-block; display: inline-block;
font-size: 15px; font-size: 11px;
font-weight: bold; font-weight: bold;
} }
@ -210,7 +234,7 @@
width: 130px; width: 130px;
display: inline-block; display: inline-block;
text-align: right; text-align: right;
font-size: 15px; font-size: 11px;
} }
.price-table td.end { .price-table td.end {
@ -243,7 +267,7 @@
} }
.estimate-info span { .estimate-info span {
font-size: 13px; font-size: 11px;
font-weight: bold; font-weight: bold;
} }
@ -258,14 +282,14 @@
} }
.estimate-tit-form span { .estimate-tit-form span {
font-size: 13px; font-size: 11px;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
.estimate-tit-form .estimate-tit { .estimate-tit-form .estimate-tit {
display: inline-block; display: inline-block;
width: 82px; width: 82px;
font-size: 12px; font-size: 10px;
font-weight: bold; font-weight: bold;
border: none; border: none;
text-align: right; text-align: right;
@ -287,13 +311,13 @@
.product-count .tit, .product-num .tit { .product-count .tit, .product-num .tit {
display: inline-block; display: inline-block;
font-size: 12px; font-size: 10px;
font-weight: bold; font-weight: bold;
} }
.product-count span, .product-num span { .product-count span, .product-num span {
display: inline-block; display: inline-block;
font-size: 13px; font-size: 11px;
} }
.product-form { .product-form {
@ -303,7 +327,7 @@
.product-form .tit { .product-form .tit {
display: inline-block; display: inline-block;
width: 62px; width: 62px;
font-size: 12px; font-size: 11px;
font-weight: bold; font-weight: bold;
border: none; border: none;
text-align: right; text-align: right;
@ -311,11 +335,11 @@
.product-form span { .product-form span {
display: inline-block; display: inline-block;
font-size: 13px; font-size: 11px;
} }
.store-info-tit { .store-info-tit {
font-size: 13px; font-size: 11px;
font-weight: bold; font-weight: bold;
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
@ -328,13 +352,13 @@
.store-info span { .store-info span {
display: block; display: block;
font-size: 12px; font-size: 10px;
margin-bottom: 0px; margin-bottom: 0px;
} }
.store-info .number { .store-info .number {
display: block; display: block;
font-size: 13px; font-size: 11px;
} }
.store-info .number span { .store-info .number span {
@ -369,7 +393,7 @@
</style> </style>
</head> </head>
<body> <body>
<div class="section1 "> <div class="section1">
<h1 class="title">御 見 積 書</h1> <h1 class="title">御 見 積 書</h1>
<table class="product-info-wrap"> <table class="product-info-wrap">
@ -456,7 +480,7 @@
<span>円 (消費税込)</span> <span>円 (消費税込)</span>
</div> </div>
</div> </div>
<table class="price-table mb20"> <table class="price-table mb10">
<thead> <thead>
<tr> <tr>
<th style="width: 60px;">No</th> <th style="width: 60px;">No</th>

View File

@ -2,6 +2,19 @@
<html lang="ja"> <html lang="ja">
<head> <head>
<style> <style>
@page { size: A4; margin: 10mm 12mm; }
.section3 {
page-break-before: always;
page-break-after: always;
page-break-inside: avoid;
/* 실제 출력 높이: 297mm - 20mm = 277mm */
max-height: 277mm;
overflow: hidden;
padding: 5mm;
}
.section:first-child { page-break-before: auto; }
@media print { @media print {
body { body {
print-color-adjust: exact; print-color-adjust: exact;
@ -9,14 +22,21 @@
} }
} }
body {
margin: 0;
padding: 0;
font-family: 'Malgun Gothic', sans-serif;
font-size: 9px; /* 폰트 작게 */
line-height: 1.2; /* 줄간격 좁게 */
}
table { table {
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
font-family: M-Gothic; font-family: M-Gothic;
font-size: 11px; font-size: 9px;
border-collapse: collapse; border-collapse: collapse;
margin: 0 auto; margin: 0 auto;
line-height: 150%; line-height: 115%;
color: #333 color: #333
} }
@ -25,9 +45,9 @@
} }
th, td { th, td {
padding: 5px 5px 3px; padding: 3px 3px 2px;
text-align: center; text-align: center;
font-size: 8px; font-size: 9px;
border: 1px solid #000 border: 1px solid #000
} }
@ -48,16 +68,8 @@
width: 15% width: 15%
} }
.col-10 {
width: 10%
}
.col-13 {
width: 13%
}
body { body {
max-width: 1040px; max-width: 740px;
margin: 0 auto margin: 0 auto
} }
@ -65,25 +77,42 @@
margin-bottom: 20px margin-bottom: 20px
} }
.al-l {
text-align: left !important
}
.al-r {
text-align: right !important
}
/* 가이드박스 */ /* 가이드박스 */
.guide-box { .guide-box {
position: relative;
border: 1px solid #000; border: 1px solid #000;
padding: 15px; padding: 15px;
margin: 10px 0;
display: flex;
align-items: flex-start;
}
.guide-image {
margin-right: 15px;
flex-shrink: 0;
} }
.guide-content { .guide-content {
white-space: pre-line; white-space: pre-line;
line-height: 1.4; line-height: 1.2;
font-size: 12px; font-size: 9px;
margin: 0; flex: 1;
} }
/* 차트퍼블 */ /* 차트퍼블 */
.chart-wrapper { .chart-wrapper {
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
margin: 20px 0; margin: 30px 0;
height: 324.3px; height: 324.3px
} }
.chart-wrapper td { .chart-wrapper td {
@ -100,7 +129,7 @@
} }
.y-axis td { .y-axis td {
font-size: 12px; font-size: 10px;
line-height: 1; line-height: 1;
vertical-align: bottom; vertical-align: bottom;
padding: 12.3px 0 padding: 12.3px 0
@ -125,12 +154,12 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 13.4px; left: 13.4px;
width: 18px; width: 30px;
margin: 0 auto margin: 0 auto
} }
.chart-wrapper td.month-cell { .chart-wrapper td.month-cell {
font-size: 11px; font-size: 10px;
padding-top: 7px padding-top: 7px
} }
@ -144,55 +173,369 @@
padding: 1px padding: 1px
} }
.chart-wrap { /* 타이틀 */
overflow: hidden; .title {
text-align: center;
font-size: 30px;
letter-spacing: 10px;
font-weight: bold;
margin: 10px 0 30px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
} }
.left-side { /* 비고퍼블 */
margin-right: 20px; .note th, .note td {
width: 570px; padding: 10px
float: left;
} }
.right-side { /* 총액퍼블 */
width: 430px; .all-price-wrap {
float: right; text-align: center;
margin-bottom: 20px;
} }
.tit { .all-price {
display: inline-block;
text-align: center;
border-bottom: 1px solid #000;
}
.all-price span {
display: inline-block;
font-size: 14px; font-size: 14px;
font-weight: bold;
}
.all-price-value {
width: 300px;
display: inline-block;
text-align: right;
}
/* 태양전지 */
.sun-volt {
display: inline-block;
margin-bottom: 20px;
border-bottom: 1px solid #000;
}
.sun-volt span {
display: inline-block;
font-size: 11px;
font-weight: bold;
}
.sun-volt-value {
width: 130px;
display: inline-block;
text-align: right;
font-size: 11px;
}
.price-table td.end {
background-color: #eee;
font-weight: bold;
}
.product-info-wrap {
table-layout: fixed;
margin-bottom: 25px;
}
.product-info-wrap td {
border: none;
padding: 0;
text-align: left;
vertical-align: top;
}
/* 견적서 정의 */
.estimate-wrap {
display: inline-block;
vertical-align: top;
}
.estimate-info {
display: inline-block;
margin-bottom: 40px;
border-bottom: 1px solid #000;
}
.estimate-info span {
font-size: 11px;
font-weight: bold;
}
.estimate-info-name {
padding-right: 20px;
}
/* tit-form */
.estimate-tit-form {
display: block;
margin-bottom: 30px;
}
.estimate-tit-form span {
font-size: 11px;
border-bottom: 1px solid #000;
}
.estimate-tit-form .estimate-tit {
display: inline-block;
width: 82px;
font-size: 10px;
font-weight: bold;
border: none;
text-align: right;
}
/* 물품 */
.product-wrap > div {
margin-bottom: 10px; margin-bottom: 10px;
} }
.product-num {
display: inline-block;
margin-right: 20px;
}
.product-count {
display: inline-block;;
}
.product-count .tit, .product-num .tit {
display: inline-block;
font-size: 10px;
font-weight: bold;
}
.product-count span, .product-num span {
display: inline-block;
font-size: 11px;
}
.product-form {
display: block;
}
.product-form .tit {
display: inline-block;
width: 62px;
font-size: 11px;
font-weight: bold;
border: none;
text-align: right;
}
.product-form span {
display: inline-block;
font-size: 11px;
}
.store-info-tit {
font-size: 11px;
font-weight: bold;
display: block;
margin-bottom: 10px;
}
.product-info-wrap .store-info {
display: block;
margin-bottom: 25px;
}
.store-info span {
display: block;
font-size: 10px;
margin-bottom: 0px;
}
.store-info .number {
display: block;
font-size: 11px;
}
.store-info .number span {
display: inline-block;
}
.approval-table {
width: 200px;
margin: 0 0 0 auto;
}
.approval-table th {
background-color: transparent;
}
.approval-table td {
padding: 30px 0;
border: 1px solid #000;
}
.guide-image{
position: absolute;
top: 20px;
left: 20px;
width: 50px;
}
.guide-img-tit{
text-align: center;
font-size: 8px;
}
</style> </style>
</head> </head>
<body> <body>
<!--<div class="section3">-->
<!-- <table class="mb20">-->
<!-- <tbody>-->
<!-- <tr>-->
<!-- <th class="col-10">物件番号</th>-->
<!-- <td id="objectNo"></td>-->
<!-- <th class="col-10">作成日</th>-->
<!-- <td class="col-13" id="drawingEstimateCreateDate"></td>-->
<!-- <th class="col-10">都道府県</th>-->
<!-- <td class="col-13" id="prefName"></td>-->
<!-- <th class="col-10">日射量観測地点</th>-->
<!-- <td class="col-13" id="areaName"></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th class="col-10">システム容量</th>-->
<!-- <td id="capacity"></td>-->
<!-- <th class="col-10">年間予測発電量</th>-->
<!-- <td id="anlFrcsGnrt"></td>-->
<!-- <th class="col-10">積雪条件</th>-->
<!-- <td id="snowfall"></td>-->
<!-- <th class="col-10">風速条件</th>-->
<!-- <td id="standardWindSpeedId"></td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<!-- <div class="chart-wrap">-->
<!-- <div class="left-side">-->
<!-- <div id="pwrGnrChartImg">-->
<!-- <table class="chart-wrapper">-->
<!-- <tbody>-->
<!-- <tr id="htmlX">-->
<!-- <td class="y-axis-wrap">-->
<!-- <table class="y-axis">-->
<!-- <tbody id="htmlY">-->
<!-- </tbody>-->
<!-- </table>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td class="month-cell"></td>-->
<!-- <td class="month-cell">1月</td>-->
<!-- <td class="month-cell">2月</td>-->
<!-- <td class="month-cell">3月</td>-->
<!-- <td class="month-cell">4月</td>-->
<!-- <td class="month-cell">5月</td>-->
<!-- <td class="month-cell">6月</td>-->
<!-- <td class="month-cell">7月</td>-->
<!-- <td class="month-cell">8月</td>-->
<!-- <td class="month-cell">9月</td>-->
<!-- <td class="month-cell">10月</td>-->
<!-- <td class="month-cell">11月</td>-->
<!-- <td class="month-cell">12月</td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<!-- </div>-->
<!-- <div class="tit">-->
<!-- ● 予測発電量kWh-->
<!-- </div>-->
<!-- <table class="mb20 month-table">-->
<!-- <thead>-->
<!-- <tr>-->
<!-- <th>1月</th>-->
<!-- <th>2月</th>-->
<!-- <th>3月</th>-->
<!-- <th>4月</th>-->
<!-- <th>5月</th>-->
<!-- <th>6月</th>-->
<!-- <th>7月</th>-->
<!-- <th>8月</th>-->
<!-- <th>9月</th>-->
<!-- <th>10月</th>-->
<!-- <th>11月</th>-->
<!-- <th>12月</th>-->
<!-- <th>合計</th>-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody>-->
<!-- <tr id="frcPwrGnrList_detail">-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<!-- </div>-->
<!-- <div class="right-side">-->
<!-- <table class="mb20">-->
<!-- <thead>-->
<!-- <tr>-->
<!-- <th class="col-15">屋根面</th>-->
<!-- <th class="col-15">傾斜角度</th>-->
<!-- <th class="col-15">方位角(度)</th>-->
<!-- <th>太陽電池モジュール</th>-->
<!-- <th class="col-15">枚数(枚)</th>-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody id="roofModuleList_detail">-->
<!-- </tbody>-->
<!-- </table>-->
<!-- <table class="mb20">-->
<!-- <thead>-->
<!-- <tr>-->
<!-- <th>パワーコンディショナー</th>-->
<!-- <th class="col-20">台</th>-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody id="pcsList_detail">-->
<!-- </tbody>-->
<!-- </table>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="tit">-->
<!-- ● Hanwha Japan 年間発電量シミュレーション案内事項-->
<!-- </div>-->
<!-- <div class="guide-box">-->
<!-- <pre class="guide-content" id="guideInfo"></pre>-->
<!-- </div>-->
<!--</div>-->
<div class="section3"> <div class="section3">
<table class="mb20"> <table class="mb20">
<tbody> <tbody>
<tr> <tr>
<th class="col-10">物件番号</th> <th class="col-15">物件番号</th>
<td id="objectNo"></td> <td id="objectNo"></td>
<th class="col-10">作成日</th> <th class="col-15">作成日</th>
<td class="col-13" id="drawingEstimateCreateDate"></td> <td id="drawingEstimateCreateDate"></td>
<th class="col-10">都道府県</th>
<td class="col-13" id="prefName"></td>
<th class="col-10">日射量観測地点</th>
<td class="col-13" id="areaName"></td>
</tr> </tr>
<tr> <tr>
<th class="col-10">システム容量</th> <th class="col-15">都道府県</th>
<td id="prefName"></td>
<th class="col-15">日射量観測地点</th>
<td id="areaName"></td>
</tr>
<tr>
<th class="col-15">システム容量</th>
<td id="capacity"></td> <td id="capacity"></td>
<th class="col-10">年間予測発電量</th> <th class="col-15">年間予測発電量</th>
<td id="anlFrcsGnrt"></td> <td id="anlFrcsGnrt"></td>
<th class="col-10">積雪条件</th> </tr>
<tr>
<th class="col-15">積雪条件</th>
<td id="snowfall"></td> <td id="snowfall"></td>
<th class="col-10">風速条件</th> <th class="col-15">風速条件</th>
<td id="standardWindSpeedId"></td> <td id="standardWindSpeedId"></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="chart-wrap">
<div class="left-side">
<div id="pwrGnrChartImg"> <div id="pwrGnrChartImg">
<table class="chart-wrapper"> <table class="chart-wrapper">
<tbody> <tbody>
@ -219,13 +562,14 @@
<td class="month-cell">11月</td> <td class="month-cell">11月</td>
<td class="month-cell">12月</td> <td class="month-cell">12月</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<div>
<div class="tit">
● 予測発電量kWh ● 予測発電量kWh
</div> </div>
<table class="mb20 month-table"> <table class="mb20 month-table">
<thead> <thead>
<tr> <tr>
@ -249,9 +593,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div class="right-side">
<table class="mb20"> <table class="mb20">
<thead> <thead>
<tr> <tr>
@ -275,13 +617,12 @@
<tbody id="pcsList_detail"> <tbody id="pcsList_detail">
</tbody> </tbody>
</table> </table>
</div> <div>
</div>
<div class="tit">
● Hanwha Japan 年間発電量シミュレーション案内事項 ● Hanwha Japan 年間発電量シミュレーション案内事項
</div> </div>
<div class="guide-box"> <div class="guide-box">
<pre class="guide-content" id="guideInfo"></pre> <pre class="guide-content" id="guideInfo">
</pre>
</div> </div>
</div> </div>
</body> </body>