체적 계산기 작업중

src/main/resources/static/js/info-plaza/vol-cal.js

@@ -0,0 +1,56 @@
+function calculation_bw () {
+    let width = document.getElementById('box_unit_width').value;
+    let length = document.getElementById('box_unit_length').value;
+    let height = document.getElementById('box_unit_height').value;
+    let wType = document.querySelector(`input[name="box_radio"]:checked`).value;
+    let result = 0;
+    let targetInput = document.getElementById('weight');
+    if (checkVariables(width, length, height)) {
+        if (wType === 'kg') {
+            result = ((width * height * length) / 6000).toFixed(3) + '  KG';
+        } else {
+            result = ((width * height * length) / 166).toFixed(3) + '  ib';
+        }
+    } else {
+        alert('입력값을 확인하세요');
+        return false;
+    }
+
+    targetInput.value = result;
+}
+
+function calculation_cw () {
+    let width = document.getElementById('cy_unit_width').value;
+    let length = document.getElementById('cy_unit_length').value;
+    let wType = document.querySelector(`input[name="cy_radio"]:checked`).value;
+    let result = 0;
+    let targetInput = document.getElementById('weight2');
+    if (checkVariables(width, length)) {
+        if (wType === 'kg') {
+            result = (((Math.round(width * width * Math.PI * 1000) / 1000) * length) / 6000).toFixed(3) + '  KG';
+        } else {
+            result = (((Math.round(width * width * Math.PI * 1000) / 1000) * length) / 166).toFixed(3) + '  ib';
+        }
+    } else {
+        alert('입력값을 확인하세요');
+        return false;
+    }
+
+    targetInput.value = result;
+}
+
+
+function checkVariables() {
+    for (let i = 0; i < arguments.length; i++) {
+        // 변수가 null 또는 undefined이면 false 반환
+        if (arguments[i] === null || arguments[i] === undefined) {
+            return false;
+        }
+        // 변수가 숫자가 아니면 false 반환
+        if (isNaN(arguments[i])) {
+            return false;
+        }
+    }
+    // 모든 변수가 조건을 만족하면 true 반환
+    return true;
+}

src/main/resources/templates/html/info-inner/vol-cal.html

@@ -5,9 +5,11 @@
         <div class="p-5 mb-4 bg-body-tertiary rounded-3">
             <div class="container-fluid py-5">
                 <h4 class="fw-bold">CBM 이란?</h4>
-                <p class=" fs-10">'Cubic Meter'의 약자로 가로,세로,높이가 각 1M인 부피를 환산하는 단위입니다. 컨테이너 적재능력은 중량과 부피로 가늠이 되는데 중량은 Ton,Kg으로,
-                부피는 CBM으로 표시하고 있습니다. 컨테이너 최대 적재 부피는 그 내장 Size에 의해 결정이 되지만 컨테이너 내,외장 Size는 운송 단위 규격화를 위해 국제적으로 통일 되어있습니다.
-                (제작사에 따라 무시할 정도의 근소한 차이는 있음)</p>
+                <p class=" fs-10">'Cubic Meter'의 약자로 가로,세로,높이가 각 1M인 부피를 환산하는 단위입니다. 컨테이너 적재능력은 중량과 부피로 가늠이 되는데 중량은
+                    Ton,Kg으로,
+                    부피는 CBM으로 표시하고 있습니다. 컨테이너 최대 적재 부피는 그 내장 Size에 의해 결정이 되지만 컨테이너 내,외장 Size는 운송 단위 규격화를 위해 국제적으로 통일
+                    되어있습니다.
+                    (제작사에 따라 무시할 정도의 근소한 차이는 있음)</p>
             </div>
         </div>
     </div>
@@ -53,53 +55,283 @@
     <div class="col-lg-2">
     </div>
     <div class="col-lg-8">
-        <p class="mt-1">* 위 표의 CBM은 실제 화물을 적재하면 나올 수 있는 수치가 아닙니다. 화물 적재 시 빈곳이 생기기 떄문인데, 이는 화물의 외장 Size에 달려있습니다. 예를 들어 화물을
-        포장한 후의 외장 높이가 1.2M를 넘게 되면 컨테이너 내 2단 적재가 안되므로, 화물을 많이 적재할 수 없습니다.</p>
-        <p class="mt-1">* 일반적으로 화물의 단위당 용적(CBM)이 작을수록 많이 적재할 수 있습니다. 책상 사이즈와 라면이Box Size가 있다면 라면Box 사이즈가 화물을 더 많이 적재하 수 있습니다.
-        그러나 책상 Size나 더 큰 화물이라도 컨테이너의 내장사이즈를 고려하고 포장을 제작하였다면 문제는 달라집니다.</p>
+        <p class="mt-1">* 위 표의 CBM은 실제 화물을 적재하면 나올 수 있는 수치가 아닙니다. 화물 적재 시 빈곳이 생기기 떄문인데, 이는 화물의 외장 Size에 달려있습니다. 예를 들어
+            화물을
+            포장한 후의 외장 높이가 1.2M를 넘게 되면 컨테이너 내 2단 적재가 안되므로, 화물을 많이 적재할 수 없습니다.</p>
+        <p class="mt-1">* 일반적으로 화물의 단위당 용적(CBM)이 작을수록 많이 적재할 수 있습니다. 책상 사이즈와 라면이Box Size가 있다면 라면Box 사이즈가 화물을 더 많이 적재하 수
+            있습니다.
+            그러나 책상 Size나 더 큰 화물이라도 컨테이너의 내장사이즈를 고려하고 포장을 제작하였다면 문제는 달라집니다.</p>
     </div>
     <div class="col-lg-2">
     </div>
 </div>
+<div class="row mt-5">
+    <div class="col-lg-4 offset-lg-4">
+        <h4>용적 비 중량 산출 방식 및 계산기</h4>
+    </div>
+</div>
+<div class="row mt-3">
+    <div class="col-md-8 offset-2" id="outline">
+        <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-300 position-relative">
+            <div class="col p-4 d-flex flex-column position-static align-items-stretch h-100 text-center">
+                <p class="text-primary fw-bold">운송의뢰 화물 부피의 중량을 환산하는 공식</p>
+                <p class="text-primary fw-light">가로(cm) X 세로(cm) X 높이(cm) / 6,000 = 용적무게(kg)</p>
+            </div>
+        </div>
+    </div>
+</div>
 <div class="row">
     <div class="col-lg-4 offset-lg-2">
-        <table class="table table-bordered table-striped text-center">
-            <thead>
-            <tr>
-                <th scope="col">측정 단위</th>
-                <th scope="col"><button></button></th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-                <td>20ft(Dry)</td>
-                <td>5.8M / 2.3M / 2.3M / 30.682</td>
-            </tr>
-            <tr>
-                <td>40ft(Dry)</td>
-                <td>12M / 2.3M / 2.3M / 63.480</td>
-            </tr>
-            </tbody>
-        </table>
+        <p>포장종류 : 상자</p>
+        <img alt="" class="img-fluid" src="/image/info/square-box.jpg">
     </div>
     <div class="col-lg-4">
-        <table class="table table-bordered table-striped text-center">
-            <thead>
-            <tr>
-                <th scope="col">내장 Size</th>
-                <th scope="col">길이 / 폭 / 높이 / CBM</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-                <td>20ft(Dry)</td>
-                <td>5.8M / 2.3M / 2.3M / 30.682</td>
-            </tr>
-            <tr>
-                <td>40ft(Dry)</td>
-                <td>12M / 2.3M / 2.3M / 63.480</td>
-            </tr>
-            </tbody>
-        </table>
+        <p>포장종류 : 원통</p>
+        <img alt="" class="img-fluid" src="/image/info/cylinder-box.jpg">
+    </div>
+</div>
+<div class="row">
+    <div class="col-lg-4 offset-lg-2">
+        <div class="row">
+            <table class="table table-bordered table-striped text-center">
+                <thead>
+                <tr>
+                    <th scope="col">측정 단위</th>
+                    <th scope="col">
+                        <input checked class="form-check-input" id="box_unit_kg" name="box_radio" type="radio"
+                               value="kg">
+                        <label class="form-check-label" for="box_unit_kg">
+                            KG/CM
+                        </label>
+                        <input checked class="form-check-input" id="box_unit_ib" name="box_radio" type="radio"
+                               value="ib">
+                        <label class="form-check-label" for="box_unit_ib">
+                            파운드/인치
+                        </label>
+                    </th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>세로길이</td>
+                    <td><input class="m-1" id="box_unit_length" type="text"><label
+                            for="box_unit_length">cm(inch)</label>
+                    </td>
+                </tr>
+                <tr>
+                    <td>가로길이</td>
+                    <td><input class="m-1" id="box_unit_width" type="text"><label for="box_unit_width">cm(inch)</label>
+                    </td>
+                </tr>
+                <tr>
+                    <td>높이</td>
+                    <td><input class="m-1" id="box_unit_height" type="text"><label
+                            for="box_unit_height">cm(inch)</label>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="row">
+            <div class="col-lg-3">
+                <button class="btn btn-primary" type="button" onclick="calculation_bw()">계산</button>
+            </div>
+            <div class="col-lg-8 mt-1">
+                <label for="weight" style="display: none">용적중량: </label>
+                <input id="weight" type="text" class="form-control bg-light border-0 text-primary">
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-4">
+        <div class="row">
+            <table class="table table-bordered table-striped text-center">
+                <thead>
+                <tr>
+                    <th scope="col">측정 단위</th>
+                    <th scope="col">
+                        <input checked class="form-check-input" id="cy_unit_kg" name="cy_radio" type="radio" value="kg">
+                        <label class="form-check-label" for="cy_unit_kg">
+                            KG/CM
+                        </label>
+                        <input checked class="form-check-input" id="cy_unit_ib" name="cy_radio" type="radio" value="ib">
+                        <label class="form-check-label" for="cy_unit_ib">
+                            파운드/인치
+                        </label>
+                    </th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>세로길이</td>
+                    <td><input class="m-1" id="cy_unit_length" type="text"><label for="cy_unit_length">cm(inch)</label>
+                    </td>
+                </tr>
+                <tr>
+                    <td>가로길이</td>
+                    <td><input class="m-1" id="cy_unit_width" type="text"><label for="cy_unit_width">cm(inch)</label>
+                    </td>
+                </tr>
+                <tr>
+                    <td>-</td>
+                    <td><input class="m-1" id="cy_unit_height" type="text" style="visibility: hidden"><label for="cy_unit_height" style="visibility: hidden">cm(inch)</label>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="row">
+            <div class="col-lg-3">
+                <button class="btn btn-primary" onclick="calculation_cw()">계산</button>
+            </div>
+            <div class="col-lg-8 mt-1">
+                <label for="weight2" style="display: none">용적중량: </label>
+                <input id="weight2" type="text" class="form-control bg-light border-0 text-primary" readonly>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="row mt-5">
+    <div class="col-lg-4 offset-lg-4">
+        <h4>운송 화물 수출 체적 계산기</h4>
+    </div>
+</div>
+<div class="row mt-3">
+    <div class="col-md-8 offset-2" id="outline2">
+        <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-300 position-relative">
+            <div class="col p-4 d-flex flex-column position-static align-items-stretch h-100 text-center">
+                <p class="text-primary fw-bold">체적 계산 공식</p>
+                <p class="text-primary fw-light">가로(cm) X 세로(cm) X 높이(cm) = 화물체적 CBM</p>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-lg-4 offset-lg-2">
+        <p>포장종류 : 상자</p>
+        <img alt="" class="img-fluid" src="/image/info/square-box.jpg">
+    </div>
+    <div class="col-lg-4">
+        <p>포장종류 : 원통</p>
+        <img alt="" class="img-fluid" src="/image/info/cylinder-box.jpg">
+    </div>
+</div>
+<div class="row">
+    <div class="col-lg-4 offset-lg-2">
+        <div class="row">
+            <table class="table table-bordered table-striped text-center">
+                <thead>
+                <tr>
+                    <th scope="col">측정 단위</th>
+                    <th scope="col">
+                        <input checked class="form-check-input" id="box_unit_kg1" name="box_radio1" type="radio"
+                               value="kg">
+                        <label class="form-check-label" for="box_unit_kg1">
+                            KG/CM
+                        </label>
+                        <input checked class="form-check-input" id="box_unit_ib1" name="box_radio1" type="radio"
+                               value="ib">
+                        <label class="form-check-label" for="box_unit_ib1">
+                            파운드/인치
+                        </label>
+                    </th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>세로길이</td>
+                    <td><input class="m-1" id="box_unit_length1" type="text"><label
+                            for="box_unit_length1">cm(inch)</label>
+                    </td>
+                </tr>
+                <tr>
+                    <td>가로길이</td>
+                    <td><input class="m-1" id="box_unit_width1" type="text"><label
+                            for="box_unit_width1">cm(inch)</label>
+                    </td>
+                </tr>
+                <tr>
+                    <td>높이</td>
+                    <td><input class="m-1" id="box_unit_height1" type="text"><label
+                            for="box_unit_height1">cm(inch)</label>
+                    </td>
+                </tr>
+                <tr>
+                    <td>갯수</td>
+                    <td><input class="m-1" id="cy_unit_count" type="text"><label for="cy_unit_count">CT(개)</label>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="row">
+            <div class="col-lg-3">
+                <button class="btn btn-primary" onclick="">계산</button>
+            </div>
+            <div class="col-lg-8 mt-1">
+                <label for="weight3" style="display: none"></label>
+                <input id="weight3" type="text" class="form-control bg-light border-0 text-primary" readonly>
+
+            </div>
+            <div class="col-lg-1 mt-1">CBM</div>
+        </div>
+    </div>
+    <div class="col-lg-4">
+        <div class="row">
+            <table class="table table-bordered table-striped text-center">
+                <thead>
+                <tr>
+                    <th scope="col">측정 단위</th>
+                    <th scope="col">
+                        <input checked class="form-check-input" id="cy_unit_kg1" name="cy_radio1" type="radio"
+                               value="kg">
+                        <label class="form-check-label" for="cy_unit_kg1">
+                            KG/CM
+                        </label>
+                        <input checked class="form-check-input" id="cy_unit_ib1" name="cy_radio1" type="radio"
+                               value="ib">
+                        <label class="form-check-label" for="cy_unit_ib1">
+                            파운드/인치
+                        </label>
+                    </th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>세로길이</td>
+                    <td><input class="m-1" id="cy_unit_length1" type="text"><label
+                            for="cy_unit_length1">cm(inch)</label>
+                    </td>
+                </tr>
+                <tr>
+                    <td>가로길이</td>
+                    <td><input class="m-1" id="cy_unit_width1" type="text"><label for="cy_unit_width1">cm(inch)</label>
+                    </td>
+                </tr>
+                <tr>
+                    <td>-</td>
+                    <td><input class="m-1" id="cy_unit_height1" type="text" style="visibility: hidden"><label for="cy_unit_height1" style="visibility: hidden">M(inch)</label>
+                    </td>
+                </tr>
+                <tr>
+                    <td>갯수</td>
+                    <td><input class="m-1" id="cy_unit_count1" type="text"><label for="cy_unit_count1">CT(개)</label>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="row">
+            <div class="col-lg-3">
+                <button class="btn btn-primary" onclick="calculation('cc')">계산</button>
+            </div>
+            <div class="col-lg-8 mt-1">
+                <label for="weight4" style="display: none"></label>
+                <input id="weight4" type="text" class="form-control bg-light border-0 text-primary" readonly>
+
+            </div>
+            <div class="col-lg-1 mt-1">CBM</div>
+        </div>
     </div>
 </div>

src/main/resources/templates/html/info-plaza.html

@@ -62,4 +62,5 @@
 
 </footer>
 </body>
+<script src="/js/info-plaza/vol-cal.js"></script>
 </html>