更新結算表SQL語法，新增pdf模板跟儲存位置

FrontendWebApi/ApiControllers/TenantBillController.cs

@@ -10,6 +10,17 @@ using static FrontendWebApi.Models.Bill;
 using Microsoft.Extensions.Logging;
 using System.Text.Json;
 using Newtonsoft.Json.Linq;
+using System.Security.Cryptography;
+using WkHtmlToPdfDotNet.Contracts;
+using WkHtmlToPdfDotNet;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.AspNetCore.SignalR;
+using Microsoft.Extensions.Configuration;
+using Serilog.Core;
+using static FrontendWebApi.ApiControllers.TenantBillController;
+using System.Reflection;
+
+
 
 
 // For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
@@ -22,15 +33,26 @@ namespace FrontendWebApi.ApiControllers
     //public class TenantBillController : MyBaseApiController<TenantBillController>
     {
         private readonly IBackendRepository backendRepository;
+        private readonly ILogger<TenantBillController> _logger;
+        private readonly IConfiguration Configuration;
+        private IWebHostEnvironment _webHostEnvironment;
+        private readonly IConverter _converter;
 
 
         const string TenantListtable = "archive_electric_meter_tenant_list";
         const string TenantBilltable = "archive_electric_meter_tenant_bill";
 
 
-        public TenantBillController(IBackendRepository backendRepository, IFrontendRepository frontendRepository)
+        public TenantBillController(IBackendRepository backendRepository, IFrontendRepository frontendRepository, ILogger<TenantBillController> logger,
+                       IConfiguration configuration,
+                       IWebHostEnvironment webHostEnvironment,
+                       IConverter converter)
         {
             this.backendRepository = backendRepository;
+            this._logger = logger;
+            Configuration = configuration;
+            _webHostEnvironment = webHostEnvironment;
+            _converter = converter;
 
         }
 
@@ -53,7 +75,7 @@ namespace FrontendWebApi.ApiControllers
             catch (Exception exception)
             {
                 apiResult.Code = "9999";
-                apiResult.Msg = "系統內部錯誤，請聯絡管理者。";
+                apiResult.Msg = "系統內部錯誤，請聯絡管理者。" + exception.Message;
                 //Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
             }
 
@@ -74,7 +96,7 @@ namespace FrontendWebApi.ApiControllers
                 var created_at = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
 
                 var sqlString = $"INSERT INTO {TenantListtable} (tenant_guid,list_id,tenant_name, bill_perKWH, bill_perRCV, created_by,created_at) " +
-                             $"VALUES ('{tenant_guid}',{tl.list_id},'{tenant_name}', {bill_perKWH}, {bill_perRCV},'{tl.created_by}', '{created_at}')";
+                             $"VALUES ('{tenant_guid}','{tl.list_id}','{tenant_name}', {bill_perKWH}, {bill_perRCV},'{tl.created_by}', '{created_at}')";
 
 
                 await backendRepository.ExecuteSql(sqlString);
@@ -85,6 +107,10 @@ namespace FrontendWebApi.ApiControllers
             {
                 apiResult.Code = "9999";
                 apiResult.Msg = "系統內部錯誤，請聯絡管理者。" + exception.Message;
+                if (exception.Message.Contains($" for key 'PRIMARY'"))
+                {
+                    apiResult.Msg = "已有相同使用者。";
+                }
                 //Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
             }
 
@@ -103,7 +129,6 @@ namespace FrontendWebApi.ApiControllers
                              $"`tenant_name` = '{tl.tenant_name}', " +
                              $"`bill_perKWH` = {tl.bill_perKWH}, " +
                              $"`bill_perRCV` = {tl.bill_perRCV}, " +
-                             $"`updated_by` = '{tl.updated_by}', " +
                              $"`updated_at` = '{updated_at}' " +
                              $"WHERE `tenant_guid` = '{tl.tenant_guid}'";
 
@@ -115,7 +140,11 @@ namespace FrontendWebApi.ApiControllers
             catch (Exception exception)
             {
                 apiResult.Code = "9999";
-                apiResult.Msg = "系統內部錯誤，請聯絡管理者。";
+                apiResult.Msg = "系統內部錯誤，請聯絡管理者。" + exception.Message;
+                if (exception.Message.Contains($"a foreign key constraint"))
+                {
+                    apiResult.Msg = "水電報表仍有該用戶，無法修改名稱。";
+                }
                 //Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
             }
 
@@ -138,18 +167,17 @@ namespace FrontendWebApi.ApiControllers
             catch (Exception exception)
             {
                 apiResult.Code = "9999";
-                apiResult.Msg = "系統內部錯誤，請聯絡管理者。";
+                apiResult.Msg = "系統內部錯誤，請聯絡管理者。" + exception.Message;
+                if (exception.Message.Contains($"a foreign key constraint"))
+                {
+                    apiResult.Msg = "水電報表仍有該用戶，無法刪除。";
+                }
                 //Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
             }
 
             return apiResult;
         }
 
-        public class MyJsonData
-        {
-            public string Name { get; set; }
-            public int Age { get; set; }
-        }
 
         [HttpPost]
         public async Task<ApiResult<List<TenantBill>>> GetTenantBill([FromBody] TenantBill tb)
@@ -165,21 +193,21 @@ namespace FrontendWebApi.ApiControllers
                 if (building_tag == "ALL")
                 {
                     sqlString =
-                  $"SELECT bill_id,a.device_number,a.full_name,start_timestamp,end_timestamp,result,bill,tenant_name " +
+                  $"SELECT bill_id,a.device_number,a.full_name,start_timestamp,end_timestamp,result,bill,tenant_name,tenant_guid " +
                   $"from {TenantBilltable} a join device b on a.device_number =b.device_number" +
                   $"where a.device_name_tag = '{ElecOrWater}' ";
                 }
                 else if (building_tag == "D2")
                 {
                     sqlString =
-                   $"SELECT bill_id,a.device_number,a.full_name,start_timestamp,end_timestamp,result,bill,tenant_name " +
+                   $"SELECT bill_id,a.device_number,a.full_name,start_timestamp,end_timestamp,result,bill,tenant_name,tenant_guid " +
                    $"from {TenantBilltable} a join device b on a.device_number =b.device_number " +
                    $"where device_building_tag = 'D1' and a.device_name_tag = '{ElecOrWater}' || device_building_tag = 'D2' and a.device_name_tag = '{ElecOrWater}'";
                 }
                 else
                 {
                     sqlString =
-                   $"SELECT bill_id,a.device_number,a.full_name,start_timestamp,end_timestamp,result,bill,tenant_name " +
+                   $"SELECT bill_id,a.device_number,a.full_name,start_timestamp,end_timestamp,result,bill,tenant_name,tenant_guid " +
                    $"from {TenantBilltable} a join device b on a.device_number =b.device_number " +
                    $"where device_building_tag = '{building_tag}' and a.device_name_tag = '{ElecOrWater}' ";
                 }
@@ -194,7 +222,7 @@ namespace FrontendWebApi.ApiControllers
             catch (Exception exception)
             {
                 apiResult.Code = "9999";
-                apiResult.Msg = "系統內部錯誤，請聯絡管理者。";
+                apiResult.Msg = "系統內部錯誤，請聯絡管理者。" + exception.Message;
                 //Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
             }
 
@@ -213,14 +241,25 @@ namespace FrontendWebApi.ApiControllers
                 var start_timestamp = tb.start_timestamp;
                 var end_timestamp = tb.end_timestamp;
                 string sqlString = null;
+                string startMonth = "";
+                string endMonth = "";
+                if (start_timestamp != "" && end_timestamp != "")
+                {
+                    startMonth = tb.start_timestamp.Split("-")[0] + tb.start_timestamp.Split("-")[1];
+                    endMonth = tb.end_timestamp.Split("-")[0] + tb.end_timestamp.Split("-")[1];
+                }
+                else
+                {
+                    apiResult.Code = "9999";
+                    apiResult.Msg = "請選擇日期。";
+                    return apiResult;
+                }
 
-                string startMonth = tb.start_timestamp.Split("-")[0] + tb.start_timestamp.Split("-")[1];
-                string endMonth = tb.end_timestamp.Split("-")[0] + tb.end_timestamp.Split("-")[1];
                 if (startMonth == endMonth)
                 {
                     sqlString =
                         $"UPDATE  {TenantBilltable}  " +
-                        $"set bill_id = {tb.bill_id}  ,tenant_name = '{tb.tenant_name}', start_timestamp = '{start_timestamp}',end_timestamp = '{end_timestamp}' , " +
+                        $"set tenant_name = (SELECT tenant_name from archive_electric_meter_tenant_list WHERE tenant_guid = '{tb.tenant_guid}'), start_timestamp = '{start_timestamp}',end_timestamp = '{end_timestamp}' , " +
                         $"result= " +
                         $"(select sum(sub_result) " +
                         $"from archive_electric_water_meter_day_{startMonth} " +
@@ -228,7 +267,6 @@ namespace FrontendWebApi.ApiControllers
                         $"GROUP BY device_number) ,  " +
                         $"bill = " +
                         $"ROUND(result *(SELECT {bill_per} from {TenantListtable} WHERE tenant_guid = '{tb.tenant_guid}') ), " +
-                        $"updated_by = '{tb.updated_by}', " +
                         $"updated_at = '{updated_at}', " +
                         $"tenant_guid = '{tb.tenant_guid}' " +
                         $"WHERE device_number = '{tb.device_number}'";
@@ -237,7 +275,7 @@ namespace FrontendWebApi.ApiControllers
                 {
                     sqlString =
                         $"UPDATE  {TenantBilltable}  " +
-                        $"set bill_id = {tb.bill_id}  ,tenant_name = '{tb.tenant_name}', start_timestamp = '{start_timestamp}',end_timestamp = '{end_timestamp}' , " +
+                        $"set tenant_name = (SELECT tenant_name from archive_electric_meter_tenant_list WHERE tenant_guid = '{tb.tenant_guid}'), start_timestamp = '{start_timestamp}',end_timestamp = '{end_timestamp}' , " +
                         $"result= " +
                         $"(SELECT sum(sub_result) " +
                         $"FROM ( " +
@@ -253,7 +291,6 @@ namespace FrontendWebApi.ApiControllers
                         $"GROUP BY device_number) ," +
                         $"bill = " +
                         $"ROUND(result *(SELECT {bill_per} from {TenantListtable} WHERE tenant_guid = '{tb.tenant_guid}') ), " +
-                        $"updated_by = '{tb.updated_by}', " +
                         $"updated_at = '{updated_at}', " +
                         $"tenant_guid = '{tb.tenant_guid}' " +
                         $"WHERE device_number = '{tb.device_number}'";
@@ -270,40 +307,187 @@ namespace FrontendWebApi.ApiControllers
             catch (Exception exception)
             {
                 apiResult.Code = "9999";
-                apiResult.Msg = "系統內部錯誤，請聯絡管理者。";
+                apiResult.Msg = "系統內部錯誤，請聯絡管理者。" + exception.Message;
                 //Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
             }
 
             return apiResult;
         }
 
+
         [HttpPost]
-        public async Task<ApiResult<List<OutputBill>>> OutputTenantBill()
+        public async Task<IActionResult> OutputTenantBill()
         {
-            ApiResult<List<OutputBill>> apiResult = new ApiResult<List<OutputBill>>();
             List<OutputBill> outputBill = new List<OutputBill>();
 
             try
             {
                 string sqlString =
-                    $"SELECT distinct a.tenant_guid,b.tenant_name,start_timestamp,end_timestamp,bill_perKWH,bill_perRCV,sum(result) as name_result,sum(bill) as name_bill " +
+                    $@"SELECT 
-                    $"from archive_electric_meter_tenant_bill a join archive_electric_meter_tenant_list b on a.tenant_guid = b.tenant_guid " +
+                            a.tenant_name,a.start_timestamp,a.end_timestamp,bill_perKWH,bill_perRCV,
-                    $"WHERE a.tenant_guid = '37639e92-20ce-4064-956b-b6b0eaa7d7d2'  " +
+                            SUM(CASE WHEN device_name_tag = 'E4' THEN result ELSE 0 END) AS elec_result,
-                    $"group by a.device_name_tag";
+                            SUM(CASE WHEN device_name_tag = 'W1' THEN result ELSE 0 END) AS water_result,
+                            SUM(CASE WHEN device_name_tag = 'E4' THEN bill ELSE 0 END) AS elec_bill,
+                            SUM(CASE WHEN device_name_tag = 'W1' THEN bill ELSE 0 END) AS water_bill,
+                            SUM(bill) AS total_bill
+                        FROM archive_electric_meter_tenant_bill a
+                        JOIN archive_electric_meter_tenant_list b on a.tenant_guid = b.tenant_guid 
+                        GROUP BY a.tenant_name
+						HAVING SUM(bill) != 0";
 
                 outputBill = await backendRepository.GetAllAsync<OutputBill>(sqlString);
+                string filePath = CreateOutputForm(outputBill);
 
-                apiResult.Code = "0000";
+                byte[] file = System.IO.File.ReadAllBytes(filePath);
-                apiResult.Data = outputBill;
+
+
+                return new FileContentResult(file, "application/pdf")
+                {
+                    FileDownloadName = "水電報表.pdf"
+                };
             }
             catch (Exception exception)
             {   
-                apiResult.Code = "9999";
+                _logger.LogError(exception.ToString());
-                apiResult.Msg = "系統內部錯誤，請聯絡管理者。";
+            }
-                //Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
+            return new FileContentResult(new byte[0], "application/pdf")
+            {
+                FileDownloadName = "Empty.pdf"
+            };
+        }
+
+        public string CreateOutputForm(List<OutputBill> outputBill)
+        {
+            try
+            {
+                string htmlStr = this.getOutputFormHtmlStr(outputBill);
+
+                string filepath = Configuration.GetValue<string>("FilePath:OutputForm");
+                if (!Directory.Exists(filepath))
+                {
+                    Directory.CreateDirectory(filepath);
+                    _logger.LogInformation("file CreateOutputForm path: " + filepath);
+                }
+                var nowString = DateTime.UtcNow.AddHours(8).ToString("yyyyMMdd_HHmmss");
+
+                //Random r1 = new System.Random();
+                //string r2 = r1.Next(0, 999).ToString("0000");
+                //string r2 = RandomNumberGenerator.GetInt32(0, 999).ToString("0000");
+
+                filepath += $"{nowString}_水電報表.pdf";
+
+                var doc = new HtmlToPdfDocument()
+                {
+                    GlobalSettings = {
+                    ColorMode = ColorMode.Color,
+                    //Orientation = Orientation.Landscape,
+                    PaperSize = PaperKind.A4,
+                    Out = filepath,
+                    Margins = new MarginSettings
+                    {
+                        Unit = Unit.Millimeters,
+                        Top = 10,
+                        Bottom = 10,
+                        Right = 0,
+                        Left = 0
+                    },
+                },
+                    Objects = {
+                    new ObjectSettings() {
+                        HtmlContent=htmlStr,
+                        WebSettings = { DefaultEncoding = "utf-8"},
+                        FooterSettings = new FooterSettings() {
+                            Center = "第 [page] 頁 共 [topage] 頁",
+                            FontName = "DFKai-sb",
+                        },
+                        LoadSettings = new LoadSettings() {
+                            JSDelay = 1000,
+                            StopSlowScript = false,
+                            BlockLocalFileAccess = false,
+                            DebugJavascript = true
+                        }
+                        //HeaderSettings = { FontSize = 9, Right = "Page [page] of [toPage]", Line = true, Spacing = 2.812 }
+                    }
+                }
+                };
+
+                // _converter.Warning += ConvertWarning;
+
+                _converter.Convert(doc);
+                //IntPtr converter = _converter.CreateConverter(doc);
+                //_converter.Tools.DestroyConverter();
+                return filepath;
+            }
+            catch (Exception ex)
+            {
+                throw new Exception(ex.ToString());
+            }
+        }
+
+        private string getOutputFormHtmlStr(List<OutputBill> outputBill)
+        {
+
+            try
+            {
+                string path = Configuration.GetValue<string>("FilePath:OutputFormTemplate");
+                //string path = _webHostEnvironment.ContentRootPath + "\\StaticFiles\\import.html";
+                if (!File.Exists(path))
+                {
+                    return "";
+                }
+                //string cssroot = _webHostEnvironment.ContentRootPath + "\\StaticFiles\\css\\";
+                string htmlStr = System.IO.File.ReadAllText(path);
+                //string vendorscss = System.IO.File.ReadAllText(cssroot + "vendors.bundle.css");
+                //string appBundelCss = System.IO.File.ReadAllText(cssroot + "app.bundle.css");
+                //string skinmasterCss = System.IO.File.ReadAllText(cssroot + "skins\\skin-master.css");
+                string bill = "";
+                foreach (var item in outputBill)
+                {
+                    bill += $"   <div class=\"container a4-page\"> " +
+                        $"        <div class=\"header\"> " +
+                        $"            <img src=\"/img/dome.png\" alt=\"Taipei Dome Logo\" width=\"200\"> " +
+                        $"            <h2>水電費用明細</h2> " +
+                        $"        </div> " +
+                        $"        <div class=\"statistics\"> " +
+                        $"            <h3>費用資訊</h3> " +
+                        $"            <p><strong>用戶: </strong>{item.tenant_name}</p> " +
+                        $"            <p><strong>起訖時間: </strong>{item.start_timestamp} ~ {item.end_timestamp}</p> " +
+                        $"            <table class=\"br\"> " +
+                        $"                <tr> " +
+                        $"                    <td><strong>用電量: </strong>{item.elec_result}度</td> " +
+                        $"                    <td><strong>單價: </strong>{item.bill_perKWH}元/度</td> " +
+                        $"                    <td><strong>電費總計: </strong>{item.elec_bill}元</td> " +
+                        $"                </tr> " +
+                        $"                <tr> " +
+                        $"                    <td><strong>用水量: </strong>{item.water_result}度</td> " +
+                        $"                    <td><strong>單價: </strong>{item.bill_perRCV}元/度</td> " +
+                        $"                    <td><strong>水費總計: </strong>{item.water_bill}元</td> " +
+                        $"                </tr> " +
+                        $"            </table> " +
+                        $"        </div> " +
+                        $"        <div class=\"total\"> " +
+                        $"            <div class=\"total-area\"> " +
+                        $"                <p>總計金額</p> " +
+                        $"                <div class=\"total-box\"> " +
+                        $"                    <span class=\"total-money\">{item.total_bill}</span>元 " +
+                        $"                </div> " +
+                        $"            </div> " +
+                        $"        </div> " +
+                        $"    </div>";
+         
+                }
+
+
+                htmlStr = htmlStr.Replace("{{bill}}", bill);
+      
+
+                return htmlStr;
+            }
+            catch (Exception ex)
+            {
+                throw new Exception(ex.ToString());
             }
 
-            return apiResult;
         }
     }
 }

FrontendWebApi/Models/Bill.cs

@@ -7,7 +7,7 @@ namespace FrontendWebApi.Models
         public class TenantList
         {
             public string tenant_guid { get; set; }
-            public int list_id { get; set; }
+            public string list_id { get; set; }
             public string tenant_name { get; set; }
             public decimal bill_perKWH { get; set; }
             public decimal bill_perRCV { get; set; }
@@ -42,15 +42,18 @@ namespace FrontendWebApi.Models
         public class OutputBill
         {
             public string tenant_name { get; set; }
+            public string device_name_tag { get; set; }
             public string start_timestamp { get; set; }
             public string end_timestamp { get; set; }
-            public decimal kwh_total { get; set; }
+            public decimal elec_result { get; set; }
+            public int elec_bill { get; set; }
+            public decimal water_result { get; set; }
+            public int water_bill { get; set; }
             public decimal bill_perKWH { get; set; }
-            public int electric_total { get; set; }
-            public decimal rcv_total { get; set; }
             public decimal bill_perRCV { get; set; }
-            public int water_total { get; set; }
+            public int total_bill { get; set; }
-            public int all_total { get; set; }
+
+
 
         }
 

FrontendWebApi/StaticFiles/import.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>費用明細</title>
+</head>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        zoom:2;
+    }
+
+    .container {
+        width: 80%;
+        margin: auto;
+        padding: 20px;
+    }
+
+    .header {
+        position: relative;
+        padding: 10px;
+    }
+
+    .header img {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .header h2 {
+        text-align: center;
+        font-size: 35px;
+        font-weight: normal;
+    }
+
+    .statistics {
+        position: relative;
+        padding: 30px 10px;
+        border-top: 1px solid #ccc;
+        border-bottom: 1px solid #ccc;
+    }
+
+    .statistics h3 {
+        margin-top: 0;
+    }
+
+    .statistics table {
+        width:700px;
+    }
+    .statistics p {
+        margin: 20px 0;
+    }
+    .total {
+        display: flex;
+        align-items: end;
+        justify-content: flex-start;
+        padding: 20px 10px;
+    }
+
+    .total .total-area p {
+        font-size: 1.2rem;
+        margin: 20px 0;
+    }
+
+    .total-box {
+        width: 400px;
+        height: 180px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+        padding: 20px;
+        border: 1px solid #ccc;
+    }
+
+    .total-box .total-money {
+        font-size: 40px;
+        padding-right: 8px;
+    }
+    @page {
+        size: A4;
+        margin: 0;
+    }
+
+    body {
+        margin: 1cm;
+    }
+
+    .a4-page {
+        page-break-before: always;
+        page-break-after: always;
+    }
+    .br {
+        border-spacing: 0px 20px;
+    }
+</style>
+
+<body>
+    {{bill}}
+</body>
+
+</html>

FrontendWebApi/appsettings.Development.json

@@ -12,6 +12,10 @@
     "SignKey": "TaipeiDome123456", //ñ<EFBFBD><EFBFBD>//<EFBFBD>̤<EFBFBD>16<EFBFBD>r<EFBFBD><EFBFBD>
     "JwtLifeSeconds": 3600
   },
+  "FilePath": {
+    "OutputForm": "D:\\jay.chang\\FrontendWebApi\\wwwroot\\upload\\OutputForm\\", //水電報表 檔案儲存位置 
+    "OutputFormTemplate": "D:\\jay.chang\\FrontendWebApi\\wwwroot\\upload\\OutputFormTemplate\\import.html" // 水電報表範本檔位置
+  },
   "DBConfig": {
     "MySqlDBConfig": {
       "Server": "CYGthbCeGtAXT4s1NOSJHQ==", //0.132
@@ -48,4 +52,4 @@
     //  "Password": "Jue6jMFRi11meN6xbdKwDA=="
     //}
   }
-  }
+}

FrontendWebApi/wwwroot/upload/OutputFormTemplate/import.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>費用明細</title>
+</head>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        zoom:2;
+    }
+
+    .container {
+        width: 80%;
+        margin: auto;
+        padding: 20px;
+    }
+
+    .header {
+        position: relative;
+        padding: 10px;
+    }
+
+    .header img {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .header h2 {
+        text-align: center;
+        font-size: 35px;
+        font-weight: normal;
+    }
+
+    .statistics {
+        position: relative;
+        padding: 30px 10px;
+        border-top: 1px solid #ccc;
+        border-bottom: 1px solid #ccc;
+    }
+
+    .statistics h3 {
+        margin-top: 0;
+    }
+
+    .statistics table {
+        width:700px;
+    }
+    .statistics p {
+        margin: 20px 0;
+    }
+    .total {
+        display: flex;
+        align-items: end;
+        justify-content: flex-start;
+        padding: 20px 10px;
+    }
+
+    .total .total-area p {
+        font-size: 1.2rem;
+        margin: 20px 0;
+    }
+
+    .total-box {
+        width: 400px;
+        height: 180px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+        padding: 20px;
+        border: 1px solid #ccc;
+    }
+
+    .total-box .total-money {
+        font-size: 40px;
+        padding-right: 8px;
+    }
+    @page {
+        size: A4;
+        margin: 0;
+    }
+
+    body {
+        margin: 1cm;
+    }
+
+    .a4-page {
+        page-break-before: always;
+        page-break-after: always;
+    }
+    .br {
+        border-spacing: 0px 20px;
+    }
+</style>
+
+<body>
+ {{bill}}
+</body>
+
+</html>