Merge pull request 'dev' (#411) from dev into dev-deploy

Reviewed-on: #411

src/main/java/com/interplug/qcast/biz/estimate/EstimateService.java

@@ -1716,8 +1716,14 @@ public class EstimateService {
           }
         }
 
+        // 섹션별 방향 설정 (이미지가 들어가는 섹션은 가로)
+        java.util.Map<String, Boolean> sectionOrientation = new java.util.HashMap<>();
+        sectionOrientation.put("div.section3", true); // 발전시뮬레이션 - 가로
+        sectionOrientation.put("div.section4", true); // 도면 - 가로
+        sectionOrientation.put("div.section5", true); // 도면 - 가로
+
         // pdf 다운로드
-        PdfUtil.pdfDownload(request, response, doc, estimateRequest.getFileName(), arrSection);
+        PdfUtil.pdfDownload(request, response, doc, estimateRequest.getFileName(), arrSection, false, sectionOrientation);
 
       } else {
 
@@ -2491,7 +2497,7 @@ public class EstimateService {
     if (data.getDrawingImg1() != null) {
       elm = doc.getElementById("drawingImg1");
       String imgSrc1 = Base64.getEncoder().encodeToString(data.getDrawingImg1());
-      elm.html("<img src='data:image/png;base64," + imgSrc1 + "' width='660'/>");
+      elm.html("<img src='data:image/png;base64," + imgSrc1 + "' width='100%'/>");
     }
 
     if (data.getRoofInfo().getCompasDegImg() != null) {
@@ -2608,7 +2614,7 @@ public class EstimateService {
     if (data.getDrawingImg2() != null) {
       elm = doc.getElementById("drawingImg2");
       String imgSrc2 = Base64.getEncoder().encodeToString(data.getDrawingImg2());
-      elm.html("<img src='data:image/png;base64," + imgSrc2 + "' width='660'/>");
+      elm.html("<img src='data:image/png;base64," + imgSrc2 + "' width='100%'/>");
     }
 
     if (data.getRoofInfo().getCompasDegImg() != null) {

src/main/java/com/interplug/qcast/biz/pwrGnrSimulation/PwrGnrSimService.java

@@ -2337,7 +2337,7 @@ public class PwrGnrSimService {
               .mapToInt(Integer::parseInt) // 정수로 변환
               .toArray();
 
-      int referenceValue = 300; // table 높이
+      int referenceValue = 250; // table 높이
       int orgMaxValue =
           Arrays.stream(onlyData)
               .max()
@@ -2426,9 +2426,11 @@ public class PwrGnrSimService {
     // 모듈 list
     if (data.getRoofModuleList() != null && data.getRoofModuleList().size() > 0) {
       sb = new StringBuilder();
-
+        int totCnt = 0;
       for (int i = 0; i < data.getRoofModuleList().size(); i++) {
         PwrGnrSimRoofResponse listItem = data.getRoofModuleList().get(i);
+        String tot = StringUtils.defaultString(listItem.getAmount());
+        totCnt += Integer.parseInt(tot);
         sb.append("<tr>");
         sb.append("<td>" + StringUtils.defaultString(listItem.getRoofSurface()) + "</td>");
         sb.append("<td>" + StringUtils.defaultString(listItem.getSlopeAngleTxt()) + "</td>");
@@ -2437,6 +2439,10 @@ public class PwrGnrSimService {
         sb.append("<td>" + StringUtils.defaultString(listItem.getAmount()) + "</td>");
         sb.append("</tr>");
       }
+        sb.append("<tr>");
+        sb.append("<th colspan=4 >合計</th>");
+        sb.append("<td>" + StringUtils.defaultString(String.valueOf(totCnt)) + "</td>");
+        sb.append("</tr>");
 
       elm = doc.getElementById("roofModuleList_detail");
       elm.append(sb.toString());
@@ -2461,7 +2467,7 @@ public class PwrGnrSimService {
 
     elm = doc.getElementById("guideInfo");
     elm.append(data.getGuideInfo());
-
+    //log.debug("pwrGnrSimPdfHtml ::: {}", doc);
     return doc;
   }
 

src/main/java/com/interplug/qcast/util/PdfUtil.java

@@ -53,17 +53,124 @@ public class PdfUtil {
     return doc;
   }
 
+
   /**
-   * PDF 다운로드
+   * PDF 다운로드 (섹션별 방향 설정 지원)
    *
    * @param request
    * @param response
    * @param doc
    * @param pdfFileName 파일명
    * @param arrSection 노출 Section
-   * @param isLandscape 가로/세로 설정
+   * @param isLandscape 가로/세로 설정 (기본값)
+   * @param sectionOrientation 섹션별 방향 설정 (선택사항)
    * @throws IOException
    */
+  public static void pdfDownload(
+      HttpServletRequest request,
+      HttpServletResponse response,
+      Document doc,
+      String pdfFileName,
+      String[] arrSection,
+      boolean isLandscape,
+      java.util.Map<String, Boolean> sectionOrientation)
+      throws IOException {
+
+    // 가로 세로 설정
+    com.itextpdf.kernel.geom.PageSize pageSize = isLandscape ? com.itextpdf.kernel.geom.PageSize.A4.rotate() : com.itextpdf.kernel.geom.PageSize.A4;
+
+    // 응답에 PDF 설정
+    response.setContentType("application/pdf");
+    response.setHeader("Content-Disposition", "attachment; filename=\"" + pdfFileName + "\".pdf");
+    response.addHeader("Access-Control-Expose-Headers", "Content-Disposition");
+
+    try (java.io.OutputStream os = response.getOutputStream();
+        com.itextpdf.kernel.pdf.PdfWriter writer = new com.itextpdf.kernel.pdf.PdfWriter(os);
+        com.itextpdf.kernel.pdf.PdfDocument pdfDoc = new com.itextpdf.kernel.pdf.PdfDocument(writer)) {
+
+      pdfDoc.setDefaultPageSize(pageSize);
+
+      // 폰트 설정
+      ConverterProperties properties = new ConverterProperties();
+      String fontPath = "template/pdf/BIZUDPGothic-Regular.ttf";
+      properties.setFontProvider(setFontProvider(fontPath));
+
+      // arrSection이 비어 있는 경우 HTML 전체를 변환
+      if (arrSection == null || arrSection.length == 0) {
+        // HTML 전체를 pdfDoc에 직접 변환
+        HtmlConverter.convertToPdf(
+            new java.io.ByteArrayInputStream(doc.html().getBytes(StandardCharsets.UTF_8)),
+            pdfDoc,
+            properties);
+        os.flush();
+      } else {
+        // arrSection이 있는 경우 각 섹션을 개별적으로 변환 후 병합
+        String headHtml = doc.select("head").outerHtml();
+
+        com.itextpdf.kernel.utils.PdfMerger merger = new com.itextpdf.kernel.utils.PdfMerger(pdfDoc);
+        for (String section : arrSection) {
+          if (section != null && !"".equals(section)) {
+            Elements eSections = doc.select(section);
+            if (eSections != null && eSections.size() > 0) {
+              for (Element eSection : eSections) {
+
+                // 섹션별 방향 설정 확인
+                boolean sectionIsLandscape = isLandscape; // 기본값
+                if (sectionOrientation != null && sectionOrientation.containsKey(section)) {
+                  sectionIsLandscape = sectionOrientation.get(section);
+                }
+
+                // 가로 섹션인 경우 @page CSS를 landscape로 변경
+                String sectionHeadHtml = headHtml;
+                if (sectionIsLandscape) {
+                  sectionHeadHtml = sectionHeadHtml.replaceAll(
+                      "@page\\s*\\{[^}]*\\}",
+                      "@page { size: A4 landscape; margin: 10mm 12mm; }");
+                }
+
+                String sectionHtml =
+                    "<html>" + sectionHeadHtml + "<body>" + eSection.outerHtml() + "</body></html>";
+
+                // 섹션별 페이지 크기 설정
+                com.itextpdf.kernel.geom.PageSize sectionPageSize = sectionIsLandscape ? com.itextpdf.kernel.geom.PageSize.A4.rotate() : com.itextpdf.kernel.geom.PageSize.A4;
+
+                try (java.io.ByteArrayOutputStream tempOutputStream = new java.io.ByteArrayOutputStream();
+                    com.itextpdf.kernel.pdf.PdfWriter tempWriter = new com.itextpdf.kernel.pdf.PdfWriter(tempOutputStream);
+                    com.itextpdf.kernel.pdf.PdfDocument tempPdfDoc = new com.itextpdf.kernel.pdf.PdfDocument(tempWriter)) {
+
+                  tempPdfDoc.setDefaultPageSize(sectionPageSize);
+
+                  HtmlConverter.convertToPdf(
+                      new java.io.ByteArrayInputStream(sectionHtml.getBytes(StandardCharsets.UTF_8)),
+                      tempPdfDoc,
+                      properties);
+
+                  com.itextpdf.kernel.pdf.PdfDocument tempDoc =
+                      new com.itextpdf.kernel.pdf.PdfDocument(
+                          new com.itextpdf.kernel.pdf.PdfReader(new java.io.ByteArrayInputStream(tempOutputStream.toByteArray())));
+                  merger.merge(tempDoc, 1, tempDoc.getNumberOfPages());
+                  tempDoc.close();
+
+                  if (!eSection.equals(eSections.last())) {
+                    pdfDoc.addNewPage();
+                  }
+                }
+              }
+            }
+          }
+        }
+        pdfDoc.close();
+        os.flush();
+      }
+    } catch (Exception e) {
+      log.error("PDF 생성 중 오류 발생: " + e.getMessage(), e);
+      if (!response.isCommitted()) {
+        response.reset();
+        response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR, "PDF 생성 중 오류가 발생했습니다.");
+      }
+    }
+  }
+
   public static void pdfDownload(
       HttpServletRequest request,
       HttpServletResponse response,

src/main/resources/template/pdf/pdf_download_quotation_detail_template2.html

@@ -1,9 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="ja">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
     <style>
-        @page { size: A4; margin: 10mm 12mm; }
+        /* @page { size: A4 landscape; margin: 10mm 12mm; } */
-        .section1, .section2, .section3 .section4 .section5 .section6{
+        .section1, .section2, .section3, .section4, .section5, .section6{
             page-break-before: always;
             page-break-after: always;
             page-break-inside: avoid;
@@ -11,7 +14,6 @@
             /* 실제 출력 높이: 297mm - 20mm = 277mm */
             max-height: 277mm;
             overflow: hidden;
-
             padding: 5mm;
         }
         .section:first-child { page-break-before: auto; }
@@ -72,10 +74,6 @@
             width: 15%
         }
 
-        body {
-            max-width: 740px;
-            margin: 0 auto
-        }
 
         .mb20 {
             margin-bottom: 20px
@@ -115,8 +113,8 @@
         .chart-wrapper {
             width: 100%;
             table-layout: fixed;
-            margin: 30px 0;
+            margin: 10px 0;
-            height: 324.3px
+            height: 279.3px
         }
 
         .chart-wrapper td {
@@ -136,7 +134,7 @@
             font-size: 10px;
             line-height: 1;
             vertical-align: bottom;
-            padding: 12.3px 0
+            padding: 10.3px 0
         }
 
         .y-axis td.zero {
@@ -169,7 +167,7 @@
 
         .chart-line td {
             background-color: transparent;
-            padding: 18.2px 0;
+            padding: 15.2px 0;
             border-bottom: 1px solid #ddd !important
         }
 
@@ -389,6 +387,14 @@
             text-align: center;
             font-size: 8px;
         }
+        .section1, .section2, .section6{
+            max-width: 740px;
+            margin: 0 auto;
+        }
+        .section3, .section4, .section5 {
+            max-width: 1040px;
+            margin: 0 auto;
+        }
 
         .hide-column {
             display: none;
@@ -487,16 +493,16 @@
     <table class="price-table mb10">
         <thead>
         <tr>
-            <th style="width: 60px;">No</th>
+            <th style="width: 50px;">No</th>
             <th>品名</th>
-            <th style="width: 80px;">型番</th>
+            <th style="width: 130px;">型番</th>
-            <th style="width: 80px;">単価</th>
+            <th style="width: 70px;">単価</th>
-            <th style="width: 60px;">数量</th>
+            <th style="width: 50px;">数量</th>
-            <th style="width: 80px;">単位</th>
+            <th style="width: 60px;">単位</th>
-            <th style="width: 110px;">価格</th>
+            <th style="width: 80px;">価格</th>
         </tr>
         </thead>
-        <tbody id="itemList_detail" >
+        <tbody id="itemList_detail">
         <!--        <tr>-->
         <!--            <td>1</td>-->
         <!--            <td>Re.RISE 415</td>-->
@@ -568,114 +574,126 @@
             <th class="col-15">作成日</th>
             <td id="drawingEstimateCreateDate"></td>
         </tr>
-        <tr>
+
-            <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>
-            <th class="col-15">年間予測発電量</th>
-            <td id="anlFrcsGnrt"></td>
-        </tr>
-        <tr>
-            <th class="col-15">積雪条件</th>
-            <td id="snowfall"></td>
-            <th class="col-15">風速条件</th>
-            <td id="standardWindSpeedId"></td>
-        </tr>
         </tbody>
     </table>
-    <div id="pwrGnrChartImg">
+    <table >
-        <table class="chart-wrapper">
+        <tbody>
-            <tbody>
+        <tr>
-            <tr id="htmlX">
+            <td style="width: 60%; border: none; vertical-align: top; padding-right: 30px;">
-                <td class="y-axis-wrap">
+                <div id="pwrGnrChartImg">
-                    <table class="y-axis">
+                    <table class="chart-wrapper" style="margin-top: 0;">
-                        <tbody id="htmlY">
+                        <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>
-                </td>
+                </div>
-            </tr>
+                <div style="text-align: left; margin-bottom: 5px;">
-            <tr>
+                    ● 予測発電量［kWh］
-                <td class="month-cell"></td>
+                </div>
-                <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 class="mb20 month-table">
-        </table>
+                    <thead>
-    </div>
+                    <tr>
-    <div>
+                        <th>1月</th>
-        ● 予測発電量［kWh］
+                        <th>2月</th>
-    </div>
+                        <th>3月</th>
-
+                        <th>4月</th>
-    <table class="mb20 month-table">
+                        <th>5月</th>
-        <thead>
+                        <th>6月</th>
-        <tr>
+                        <th>7月</th>
-            <th>1月</th>
+                        <th>8月</th>
-            <th>2月</th>
+                        <th>9月</th>
-            <th>3月</th>
+                        <th>10月</th>
-            <th>4月</th>
+                        <th>11月</th>
-            <th>5月</th>
+                        <th>12月</th>
-            <th>6月</th>
+                        <th>合計</th>
-            <th>7月</th>
+                    </tr>
-            <th>8月</th>
+                    </thead>
-            <th>9月</th>
+                    <tbody>
-            <th>10月</th>
+                    <tr id="frcPwrGnrList_detail">
-            <th>11月</th>
+                    </tr>
-            <th>12月</th>
+                    </tbody>
-            <th>合計</th>
+                </table>
-        </tr>
+                <div style="margin-bottom: 5px; text-align: left;">
-        </thead>
+                    ● Hanwha Japan 年間発電量シミュレーション案内事項
-        <tbody>
+                </div>
-        <tr id="frcPwrGnrList_detail">
+                <div class="guide-box">
+                <pre class="guide-content" id="guideInfo">
+                </pre>
+                </div>
+            </td>
+            <td style="width: 40%; border: none; vertical-align: top; ">
+                <table class="mb20">
+                    <tbody>
+                    <tr>
+                        <th style="width: 100px;">システム容量</th>
+                        <td colspan="3" id="capacity"></td>
+                    </tr>
+                    <tr>
+                        <th style="width: 100px;">年間予測発電量</th>
+                        <td id="anlFrcsGnrt"></td>
+                        <th style="width: 100px;">都道府県</th>
+                        <td id="prefName"></td>
+                    </tr>
+                    <tr>
+                        <th style="width: 100px;">日射量観測地点</th>
+                        <td id="areaName"></td>
+                        <th style="width: 100px;">積雪量</th>
+                        <td id="snowfall"></td>
+                    </tr>
+                    </tbody>
+                </table>
+                <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>
+            </td>
         </tr>
         </tbody>
     </table>
-
-    <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>
-        ● Hanwha Japan 年間発電量シミュレーション案内事項
-    </div>
-    <div class="guide-box">
-        <pre class="guide-content" id="guideInfo">
-        </pre>
-    </div>
 </div>
 <div class="section4">
     <table class="mb20">
@@ -709,86 +727,93 @@
         </tbody>
     </table>
 
-    <div class="guide-box">
+    <table>
-        <div class="guide-image"  id="degImg1">
+        <tbody>
-        </div>
-
-        <div class="guide-content" id="drawingImg1">
-
-        </div>
-    </div>
-
-    <table class="mb20">
-        <thead>
         <tr>
-            <th class="col-15">No</th>
+            <td style="width: 60%; border: none; vertical-align: top; padding-right: 30px;">
-            <th>部材名</th>
+                <div class="guide-box mb20">
-            <th class="col-15">数量</th>
+                    <div class="guide-image"  id="degImg1">
+                    </div>
+
+                    <div class="guide-content" id="drawingImg1">
+                    </div>
+                </div>
+                <div class="guide-box">
+            <pre class="guide-content" style="text-align: left;">
+                ■注意事項
+                　・本図面は見積作成の為、太陽電池モジュールの配列及び枚数、架台のレールの種類数量、
+                　　および、支持点数を示すものであり、実際の施工においては、現地調査で支持点の位置を確認し、
+                　　施工マニュアルに従って施工して下さい。
+
+                　・各屋根材の動き流れ寸法は下記と仮定して作図しております。
+                　　実際の寸法を確認のうえ、施工マニュアルに従った施工を行って下さい。
+                　　和瓦53A：235㎜、和瓦53B：225㎜、平板瓦（C、D型）:280㎜、S瓦：260㎜、セメント瓦：345㎜、スレート：182㎜
+                　　アスファルトシングル：143㎜、金属横葺：182㎜
+
+                ・設置可能地域であっても、錆やよごれ等による外観について保証するものではありません。
+                ・垂直積雪量は特定行政庁の判断により更新される場合があります。設置される地域の特定行政庁への確認を必ず行って下さい。
+            </pre>
+                </div>
+
+                <table class="mb20">
+                    <thead>
+                    <tr>
+                        <th style="width:10%;">屋根面</th>
+                        <th style="width:15%;">屋根材種類</th>
+                        <th style="width:10%;">勾配</th>
+                        <th style="width:10%;">施工レベル</th>
+                        <th style="width:30%;">施工方法</th>
+                        <th style="width:15%;">面粗度区分</th>
+                        <th style="width:10%;">設置高さ</th>
+                    </tr>
+                    </thead>
+                    <tbody id="surFaceList_detail2">
+                    </tbody>
+                </table>
+            </td>
+            <td style="width: 40%; border: none; vertical-align: top; ">
+                <table class="mb20">
+                    <thead>
+                    <tr>
+                        <th class="col-15">No</th>
+                        <th>部材名</th>
+                        <th class="col-15">数量</th>
+                    </tr>
+                    </thead>
+                    <tbody id="notStandItemList_detail">
+                    </tbody>
+                </table>
+
+                <table class="mb20">
+                    <thead>
+                    <tr>
+                        <th class="col-15">No</th>
+                        <th>パワーコンディショナ型式</th>
+                    </tr>
+                    </thead>
+                    <tbody id="pcsItemList_detail">
+                    </tbody>
+                </table>
+
+                <table class="price-table ">
+                    <thead>
+                    <tr>
+                        <th class="col-15">屋根面</th>
+                        <th>勾配</th>
+                        <th>設置枚数</th>
+                        <th>容量(kW)</th>
+                    </tr>
+                    </thead>
+                    <tbody id="surFaceList_detail">
+                    <tr>
+                        <th class="end" colspan="2">合計</th>
+                        <td id="moduleTotAmount">ss</td>
+                        <td class="al-r" id="moduleTotVolKw">ss</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </td>
         </tr>
-        </thead>
-        <tbody id="notStandItemList_detail">
-        </tbody>
-    </table>
-
-    <table class="mb20">
-        <thead>
-        <tr>
-            <th class="col-15">No</th>
-            <th>パワーコンディショナ型式</th>
-        </tr>
-        </thead>
-        <tbody id="pcsItemList_detail">
-        </tbody>
-    </table>
-
-    <table class="price-table mb20">
-        <thead>
-        <tr>
-            <th class="col-15">屋根面</th>
-            <th>勾配</th>
-            <th>設置枚数</th>
-            <th>容量(kW)</th>
-        </tr>
-        </thead>
-        <tbody id="surFaceList_detail">
-        <tr>
-            <th class="end" colspan="2">合計</th>
-            <td id="moduleTotAmount"></td>
-            <td class="al-r" id="moduleTotVolKw"></td>
-        </tr>
-        </tbody>
-    </table>
-
-    <div class="guide-box">
-        <pre class="guide-content">
-            ■注意事項
-            　・本図面は見積作成の為、太陽電池モジュールの配列及び枚数、架台のレールの種類数量、
-            　　および、支持点数を示すものであり、実際の施工においては、現地調査で支持点の位置を確認し、
-            　　施工マニュアルに従って施工して下さい。
-
-            　・各屋根材の動き流れ寸法は下記と仮定して作図しております。
-            　　実際の寸法を確認のうえ、施工マニュアルに従った施工を行って下さい。
-            　　和瓦53A：235㎜、和瓦53B：225㎜、平板瓦（C、D型）:280㎜、S瓦：260㎜、セメント瓦：345㎜、スレート：182㎜
-            　　アスファルトシングル：143㎜、金属横葺：182㎜
-
-            ・設置可能地域であっても、錆やよごれ等による外観について保証するものではありません。
-            ・垂直積雪量は特定行政庁の判断により更新される場合があります。設置される地域の特定行政庁への確認を必ず行って下さい。
-        </pre>
-    </div>
-
-    <table class="mb20">
-        <thead>
-        <tr>
-            <th style="width:10%;">屋根面</th>
-            <th style="width:15%;">屋根材種類</th>
-            <th style="width:10%;">勾配</th>
-            <th style="width:10%;">施工レベル</th>
-            <th style="width:30%;">施工方法</th>
-            <th style="width:15%;">面粗度区分</th>
-            <th style="width:10%;">設置高さ</th>
-        </tr>
-        </thead>
-        <tbody id="surFaceList_detail2">
         </tbody>
     </table>
 </div>
@@ -824,59 +849,65 @@
         </tbody>
     </table>
 
-    <div class="guide-box">
+    <table>
-        <div class="guide-image" id="degImg2">
+        <tbody>
-        </div>
-        <div class="guide-content" id="drawingImg2">
-        </div>
-    </div>
-
-    <table class="mb20">
-        <thead>
         <tr>
-            <th class="col-15">No</th>
+            <td style="width: 60%; border: none; vertical-align: top; padding-right: 30px;">
-            <th class="col-15">部材名</th>
+                <div class="guide-box mb20">
-            <th class="col-15">数量</th>
+                    <div class="guide-image" id="degImg2">
-        </tr>
+                    </div>
-        </thead>
+                    <div class="guide-content" id="drawingImg2">
-        <tbody id="standItemList_detail">
+                    </div>
-        </tbody>
+                </div>
-    </table>
+                <div class="guide-box">
+            <pre class="guide-content" style="text-align: left;">
+                ■注意事項
+                　・本図面は見積作成の為、太陽電池モジュールの配列及び枚数、架台のレールの種類数量、
+                　　および、支持点数を示すものであり、実際の施工においては、現地調査で支持点の位置を確認し、
+                　　施工マニュアルに従って施工して下さい。
 
-    <div class="guide-box">
+                　・各屋根材の動き流れ寸法は下記と仮定して作図しております。
-        <pre class="guide-content">
+                　　実際の寸法を確認のうえ、施工マニュアルに従った施工を行って下さい。
-            ■注意事項
+                　　和瓦53A：235㎜、和瓦53B：225㎜、平板瓦（C、D型）:280㎜、S瓦：260㎜、セメント瓦：345㎜、スレート：182㎜
-            　・本図面は見積作成の為、太陽電池モジュールの配列及び枚数、架台のレールの種類数量、
+                　　アスファルトシングル：143㎜、金属横葺：182㎜
-            　　および、支持点数を示すものであり、実際の施工においては、現地調査で支持点の位置を確認し、
-            　　施工マニュアルに従って施工して下さい。
 
-            　・各屋根材の動き流れ寸法は下記と仮定して作図しております。
+                ・設置可能地域であっても、錆やよごれ等による外観について保証するものではありません。
-            　　実際の寸法を確認のうえ、施工マニュアルに従った施工を行って下さい。
+                ・垂直積雪量は特定行政庁の判断により更新される場合があります。設置される地域の特定行政庁への確認を必ず行って下さい。
-            　　和瓦53A：235㎜、和瓦53B：225㎜、平板瓦（C、D型）:280㎜、S瓦：260㎜、セメント瓦：345㎜、スレート：182㎜
+            </pre>
-            　　アスファルトシングル：143㎜、金属横葺：182㎜
+                </div>
 
-            ・設置可能地域であっても、錆やよごれ等による外観について保証するものではありません。
+                <table class="mb20">
-            ・垂直積雪量は特定行政庁の判断により更新される場合があります。設置される地域の特定行政庁への確認を必ず行って下さい。
+                    <thead>
-        </pre>
+                    <tr>
-    </div>
+                        <th style="width:10%;">屋根面</th>
-
+                        <th style="width:15%;">屋根材種類</th>
-    <table class="mb20">
+                        <th style="width:10%;">勾配</th>
-        <thead>
+                        <th style="width:10%;">施工レベル</th>
-        <tr>
+                        <th style="width:30%;">施工方法</th>
-            <th style="width:10%;">屋根面</th>
+                        <th style="width:15%;">面粗度区分</th>
-            <th style="width:15%;">屋根材種類</th>
+                        <th style="width:10%;">設置高さ</th>
-            <th style="width:10%;">勾配</th>
+                    </tr>
-            <th style="width:10%;">施工レベル</th>
+                    </thead>
-            <th style="width:30%;">施工方法</th>
+                    <tbody id="roofList_detail">
-            <th style="width:15%;">面粗度区分</th>
+                    </tbody>
-            <th style="width:10%;">設置高さ</th>
+                </table>
-        </tr>
+            </td>
-        </thead>
+            <td style="width: 40%; border: none; vertical-align: top; ">
-        <tbody id="roofList_detail">
+                <table class="mb20">
+                    <thead>
+                    <tr>
+                        <th class="col-15">No</th>
+                        <th >部材名</th>
+                        <th class="col-15">数量</th>
+                    </tr>
+                    </thead>
+                    <tbody id="standItemList_detail">
+                    </tbody>
+                </table>
+            </td>
         </tr>
         </tbody>
     </table>
-
 </div>
 <div class="section6">
     <!--    <h1 class="title">重量算出シート</h1>-->

src/main/resources/template/pdf/pdf_download_simulation_detail_template.html

@@ -1,9 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="ja">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
     <style>
-        @page { size: A4; margin: 10mm 12mm; }
+        /* @page { size: A4 landscape; margin: 10mm 12mm; } */
-        .section3 {
+        .section1, .section2, .section3, .section4, .section5, .section6{
             page-break-before: always;
             page-break-after: always;
             page-break-inside: avoid;
@@ -11,7 +14,6 @@
             /* 실제 출력 높이: 297mm - 20mm = 277mm */
             max-height: 277mm;
             overflow: hidden;
-
             padding: 5mm;
         }
         .section:first-child { page-break-before: auto; }
@@ -22,6 +24,10 @@
             }
         }
 
+
+        /*.section:first-child {*/
+        /*    page-break-before: auto;*/
+        /*}*/
         body {
             margin: 0;
             padding: 0;
@@ -68,10 +74,6 @@
             width: 15%
         }
 
-        body {
-            max-width: 740px;
-            margin: 0 auto
-        }
 
         .mb20 {
             margin-bottom: 20px
@@ -111,8 +113,8 @@
         .chart-wrapper {
             width: 100%;
             table-layout: fixed;
-            margin: 30px 0;
+            margin: 10px 0;
-            height: 324.3px
+            height: 279.3px
         }
 
         .chart-wrapper td {
@@ -132,7 +134,7 @@
             font-size: 10px;
             line-height: 1;
             vertical-align: bottom;
-            padding: 12.3px 0
+            padding: 10.3px 0
         }
 
         .y-axis td.zero {
@@ -165,7 +167,7 @@
 
         .chart-line td {
             background-color: transparent;
-            padding: 18.2px 0;
+            padding: 15.2px 0;
             border-bottom: 1px solid #ddd !important
         }
 
@@ -385,128 +387,19 @@
             text-align: center;
             font-size: 8px;
         }
+        .section1, .section2, .section6{
+            max-width: 740px;
+            margin: 0 auto;
+        }
+        .section3, .section4, .section5 {
+            max-width: 1040px;
+            margin: 0 auto;
+        }
+
 
     </style>
 </head>
 <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">
     <table class="mb20">
         <tbody>
@@ -516,117 +409,126 @@
             <th class="col-15">作成日</th>
             <td id="drawingEstimateCreateDate"></td>
         </tr>
-        <tr>
+
-            <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>
-            <th class="col-15">年間予測発電量</th>
-            <td id="anlFrcsGnrt"></td>
-        </tr>
-        <tr>
-            <th class="col-15">積雪条件</th>
-            <td id="snowfall"></td>
-            <th class="col-15">風速条件</th>
-            <td id="standardWindSpeedId"></td>
-        </tr>
         </tbody>
     </table>
-    <div >
+    <table >
-        ● <span id="pwrGnrSimTypeName"></span>
+        <tbody>
-    </div>
+        <tr>
-    <div id="pwrGnrChartImg">
+            <td style="width: 60%; border: none; vertical-align: top; padding-right: 30px;">
-        <table class="chart-wrapper">
+                <div id="pwrGnrChartImg">
-            <tbody>
+                    <table class="chart-wrapper" style="margin-top: 0;">
-            <tr id="htmlX">
+                        <tbody>
-                <td class="y-axis-wrap">
+                        <tr id="htmlX">
-                    <table class="y-axis">
+                            <td class="y-axis-wrap">
-                        <tbody id="htmlY">
+                                <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>
-                </td>
+                </div>
-            </tr>
+                <div style="text-align: left; margin-bottom: 5px;">
-            <tr>
+                    ● 予測発電量［kWh］
-                <td class="month-cell"></td>
+                </div>
-                <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 class="mb20 month-table">
-        </table>
+                    <thead>
-    </div>
+                    <tr>
-    <div>
+                        <th>1月</th>
-        ● 予測発電量［kWh］
+                        <th>2月</th>
-    </div>
+                        <th>3月</th>
-
+                        <th>4月</th>
-    <table class="mb20 month-table">
+                        <th>5月</th>
-        <thead>
+                        <th>6月</th>
-        <tr>
+                        <th>7月</th>
-            <th>1月</th>
+                        <th>8月</th>
-            <th>2月</th>
+                        <th>9月</th>
-            <th>3月</th>
+                        <th>10月</th>
-            <th>4月</th>
+                        <th>11月</th>
-            <th>5月</th>
+                        <th>12月</th>
-            <th>6月</th>
+                        <th>合計</th>
-            <th>7月</th>
+                    </tr>
-            <th>8月</th>
+                    </thead>
-            <th>9月</th>
+                    <tbody>
-            <th>10月</th>
+                    <tr id="frcPwrGnrList_detail">
-            <th>11月</th>
+                    </tr>
-            <th>12月</th>
+                    </tbody>
-            <th>合計</th>
+                </table>
-        </tr>
+                <div style="margin-bottom: 5px; text-align: left;">
-        </thead>
+                    ● Hanwha Japan 年間発電量シミュレーション案内事項
-        <tbody>
+                </div>
-        <tr id="frcPwrGnrList_detail">
+                <div class="guide-box">
+                <pre class="guide-content" id="guideInfo">
+                </pre>
+                </div>
+            </td>
+            <td style="width: 40%; border: none; vertical-align: top; ">
+                <table class="mb20">
+                    <tbody>
+                    <tr>
+                        <th style="width: 100px;">システム容量</th>
+                        <td colspan="3" id="capacity"></td>
+                    </tr>
+                    <tr>
+                        <th style="width: 100px;">年間予測発電量</th>
+                        <td id="anlFrcsGnrt"></td>
+                        <th style="width: 100px;">都道府県</th>
+                        <td id="prefName"></td>
+                    </tr>
+                    <tr>
+                        <th style="width: 100px;">日射量観測地点</th>
+                        <td id="areaName"></td>
+                        <th style="width: 100px;">積雪量</th>
+                        <td id="snowfall"></td>
+                    </tr>
+                    </tbody>
+                </table>
+                <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>
+            </td>
         </tr>
         </tbody>
     </table>
-
-    <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>
-        ● Hanwha Japan 年間発電量シミュレーション案内事項
-    </div>
-    <div class="guide-box">
-        <pre class="guide-content" id="guideInfo">
-        </pre>
-    </div>
 </div>
 </body>
 </html>