add second screen of dashboard
parent
f365e30c3b
commit
a11e150a42
|
|
@ -72,12 +72,14 @@ public class DashboardService {
|
|||
|
||||
//set stitching related details
|
||||
Long approvedStitchingOfflineItems = 0L;
|
||||
Long remaininfQcAlterPieces = 0L;
|
||||
Long approvedStitchingOfflineItemsThenReject = 0L;
|
||||
long qcReject = 0L;
|
||||
if (stitchingItemIds != null && !stitchingItemIds.isEmpty()) {
|
||||
approvedStitchingOfflineItems = stitchingOfflineItemDAO.findByQCOperationDateAndApproved(startDate1, endDate1, "APPROVED");
|
||||
qcReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT", stitchingItemIds);
|
||||
approvedStitchingOfflineItemsThenReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT",stitchingOutIds);
|
||||
remaininfQcAlterPieces = stitchingOfflineItemDAO.findByQCOperationDateAndIds(null, endDate1, "REJECT", stitchingItemIds);
|
||||
approvedStitchingOfflineItemsThenReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT", stitchingOutIds);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -87,12 +89,14 @@ public class DashboardService {
|
|||
Long washFinishedItem = 0L;
|
||||
Long approved = 0L;
|
||||
Long operationNotPerformed = 0L;
|
||||
Long remainingAlterationPieceFinish = 0L;
|
||||
if (finishing != null && !finishing.isEmpty()) {
|
||||
approved = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "APPROVED", finishing);
|
||||
operationNotPerformed = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "-", finishing);
|
||||
rejectFinishedItem = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "REJECT", finishing);
|
||||
washFinishedItem = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "WASHED", finishing);
|
||||
alterationPieceFinish = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "ALTER", finishing);
|
||||
remainingAlterationPieceFinish = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(null, endDate1, "ALTER", finishing);
|
||||
}
|
||||
|
||||
//set packaging details
|
||||
|
|
@ -128,8 +132,11 @@ public class DashboardService {
|
|||
progress.put("wash", (float) washFinishedItem);
|
||||
|
||||
progress.put("packaging", (float) packagingItems);
|
||||
progress.put("totalPackaging", (float) packagingItemIDs.size());
|
||||
progress.put("remainingFinishAlter", (float) remainingAlterationPieceFinish);
|
||||
progress.put("remainingQCAlter", (float) remaininfQcAlterPieces);
|
||||
|
||||
progress.put("Efficiency",efficiency);
|
||||
progress.put("Efficiency", efficiency);
|
||||
return progress;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
return;
|
||||
}
|
||||
|
||||
function createGaugeChart(progress, color, divId, title, height, width , fontSize, fontYAxis, fontXAxis, fontColor, total, actual, aGrade, bGrade, cGrade) {
|
||||
function createGaugeChart(progress, color, divId, title, height, width, fontSize, fontYAxis, fontXAxis, fontColor, total, actual, aGrade, bGrade, cGrade) {
|
||||
Highcharts.chart(divId, {
|
||||
chart: {
|
||||
type: 'solidgauge',
|
||||
|
|
@ -54,12 +54,12 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
style: {
|
||||
fontSize: fontSize + 'px',
|
||||
fontWeight: 'bold',
|
||||
color:fontColor
|
||||
color: fontColor
|
||||
},
|
||||
zIndex: 10
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: title == 'Finishing Progress' ? 'Percentage: ' + progress + '%<br>Total: ' + total + '<br>Completed: ' + actual + '<br>A Grade: ' + aGrade + '<br>B Grade: ' + bGrade + '<br>C Grade: ' + cGrade : 'Percentage: ' + progress + '%<br>Total: ' + total + '<br>Completed:'+actual
|
||||
pointFormat: title == 'Finishing Progress' ? 'Percentage: ' + progress + '%<br>Total: ' + total + '<br>Completed: ' + actual + '<br>A Grade: ' + aGrade + '<br>B Grade: ' + bGrade + '<br>C Grade: ' + cGrade : 'Percentage: ' + progress + '%<br>Total: ' + total + '<br>Completed:' + actual
|
||||
},
|
||||
color: color,
|
||||
showInLegend: false
|
||||
|
|
@ -69,6 +69,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createBarChart(divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData, dHeading, dData, dates, fontSize, maxValue) {
|
||||
if (!document.getElementById(divId)) {
|
||||
return;
|
||||
|
|
@ -94,7 +95,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
labels: {
|
||||
rotation: -45,
|
||||
style: {
|
||||
fontSize: 10-fontSize,
|
||||
fontSize: 10 - fontSize,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
|
|
@ -136,35 +137,66 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
}]
|
||||
});
|
||||
}
|
||||
function dashboardChart(divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData,dates, fontSize, maxValue) {
|
||||
if (!document.getElementById(divId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
function dashboardChart(
|
||||
divId, height, width, title,
|
||||
aHeading, aData, bHeading, bData, cHeading, cData,
|
||||
dates, fontSize, fontSizeText, maxValue
|
||||
) {
|
||||
if (!document.getElementById(divId)) return;
|
||||
|
||||
Highcharts.chart(divId, {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: height,
|
||||
width: width
|
||||
},
|
||||
title: {
|
||||
text: title
|
||||
text: title,
|
||||
style: {
|
||||
fontSize: fontSize
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
categories: dates,
|
||||
labels: {
|
||||
enabled: false
|
||||
},
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
lineWidth: 2
|
||||
},
|
||||
yAxis: {
|
||||
max: maxValue,
|
||||
min: 0,
|
||||
title: {
|
||||
align: 'high'
|
||||
text: null,
|
||||
align: 'high',
|
||||
style: {
|
||||
fontSize: fontSizeText
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
overflow: 'justify'
|
||||
style: {
|
||||
fontSize: fontSizeText
|
||||
}
|
||||
},
|
||||
gridLineWidth: 0
|
||||
},
|
||||
legend: {
|
||||
itemStyle: {
|
||||
fontSize: fontSizeText
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: '50%',
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
enabled: true,
|
||||
style: {
|
||||
fontSize: fontSizeText
|
||||
}
|
||||
},
|
||||
groupPadding: 0.1
|
||||
}
|
||||
|
|
@ -172,20 +204,25 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
series: [
|
||||
{
|
||||
name: aHeading,
|
||||
data: aData
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: bHeading,
|
||||
data: bData
|
||||
}, {
|
||||
},
|
||||
{
|
||||
name: cHeading,
|
||||
data: cData
|
||||
}]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
function createSingleBarChart(divId, height, width, title,Heading, Data, dates, fontSize, maxValue) {
|
||||
|
||||
function createSingleBarChart(divId, height, width, title, Heading, Data, dates, fontSize, maxValue) {
|
||||
if (!document.getElementById(divId)) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -210,7 +247,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
labels: {
|
||||
rotation: -45,
|
||||
style: {
|
||||
fontSize: 10-fontSize,
|
||||
fontSize: 10 - fontSize,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
|
|
@ -235,7 +272,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
},
|
||||
legend: {
|
||||
itemStyle: {
|
||||
fontSize: 10-fontSize,
|
||||
fontSize: 10 - fontSize,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
|
|
@ -250,6 +287,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
}
|
||||
|
||||
initializeGauges();
|
||||
|
||||
function initializeGauges() {
|
||||
|
||||
const gaugeDivs2 = document.querySelectorAll('.gauge-chart2');
|
||||
|
|
@ -296,16 +334,16 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
const maxValue = Number(div.getAttribute('data-totalProduction'));
|
||||
const aHeading = 'Cutting';
|
||||
const aData = JSON.parse(div.getAttribute('data-cutting'));
|
||||
const bHeading='Stitching';
|
||||
const bData =JSON.parse(div.getAttribute('data-stitching'));
|
||||
const cHeading='End Line Quality Checking';
|
||||
const cData =JSON.parse(div.getAttribute('data-quality'));
|
||||
const dHeading="Finish Items";
|
||||
const dData =JSON.parse(div.getAttribute('data-finishing'));
|
||||
const bHeading = 'Stitching';
|
||||
const bData = JSON.parse(div.getAttribute('data-stitching'));
|
||||
const cHeading = 'End Line Quality Checking';
|
||||
const cData = JSON.parse(div.getAttribute('data-quality'));
|
||||
const dHeading = "Finish Items";
|
||||
const dData = JSON.parse(div.getAttribute('data-finishing'));
|
||||
const dates = div.getAttribute('data-dates');
|
||||
const datesArray = dates.split(',');
|
||||
const divId = div.id;
|
||||
createBarChart( divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData, dHeading, dData, datesArray, fontSize, maxValue);
|
||||
createBarChart(divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData, dHeading, dData, datesArray, fontSize, maxValue);
|
||||
});
|
||||
|
||||
const dashboardBarChart = document.querySelectorAll('.dashboardBarChart'); // fixed name
|
||||
|
|
@ -314,25 +352,26 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
const height = div.getAttribute('data-height');
|
||||
const width = div.getAttribute('data-width');
|
||||
const fontSize = div.getAttribute('data-fontSize');
|
||||
|
||||
const rawValue = div.getAttribute('data-totalProduction') || "0";
|
||||
const cleanValue = rawValue.replace(/[^0-9.-]+/g, '');
|
||||
const maxValue = Number(cleanValue);
|
||||
|
||||
const cHeading = 'Achieved';
|
||||
const cDataString = div.getAttribute('data-achieved');
|
||||
const cleanValueAchieved = cDataString.replace(/[^0-9.-]+/g, '');
|
||||
const cData = [Number(cleanValueAchieved)];
|
||||
|
||||
const aHeading = 'Stitching';
|
||||
const aDataString = div.getAttribute('data-stitching');
|
||||
const cleanValueStitch = aDataString.replace(/[^0-9.-]+/g, '');
|
||||
const aData = [Number(cleanValueStitch)];
|
||||
|
||||
const bHeading = 'Packaging';
|
||||
const bDataString =div.getAttribute('data-packaging');
|
||||
const bHeading = 'Finishing';
|
||||
const bDataString = div.getAttribute('data-finishing');
|
||||
const packaging = bDataString.replace(/[^0-9.-]+/g, '');
|
||||
const bData = [Number(packaging)];
|
||||
|
||||
const cHeading = 'Packaging';
|
||||
const cDataString = div.getAttribute('data-packaging');
|
||||
const cleanValueAchieved = cDataString.replace(/[^0-9.-]+/g, '');
|
||||
const cData = [Number(cleanValueAchieved)];
|
||||
|
||||
const dates = [div.getAttribute('data-dates')];
|
||||
const divId = div.id;
|
||||
dashboardChart(
|
||||
|
|
@ -348,6 +387,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
cData,
|
||||
dates,
|
||||
fontSize,
|
||||
'20',
|
||||
maxValue
|
||||
);
|
||||
});
|
||||
|
|
@ -364,7 +404,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||
const dates = div.getAttribute('data-dates');
|
||||
const datesArray = dates.split(',');
|
||||
const divId = div.id;
|
||||
createSingleBarChart( divId, height, width, title, Heading, Data, datesArray, fontSize, maxValue);
|
||||
createSingleBarChart(divId, height, width, title, Heading, Data, datesArray, fontSize, maxValue);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
|
||||
<head th:fragment="head (title)">
|
||||
<head th:fragment="head (title)">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<meta http-equiv="refresh" content="60" th:if="${refresh == true}">
|
||||
|
|
@ -32,10 +32,10 @@
|
|||
animation: blinker 1s linear infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="row page-header font-sm" th:fragment="page-header">
|
||||
<header class="row page-header font-sm" th:fragment="page-header">
|
||||
<!--<editor-fold desc="Description">-->
|
||||
<div class="col-sm">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark " role="navigation">
|
||||
|
|
@ -45,11 +45,13 @@
|
|||
<ul class="navbar-nav">
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_PURCHASE_ORDER', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/purchase-order/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order') ? 'active' : ''}">Purchase Order</a>
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order') ? 'active' : ''}">Purchase
|
||||
Order</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_JOB_CARD', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/job-cards/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards') ? 'active' : ''}">Job Cards</a>
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards') ? 'active' : ''}">Job
|
||||
Cards</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_CUTTING', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/cutting/}" class="nav-link"
|
||||
|
|
@ -61,7 +63,8 @@
|
|||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_QUALITY_CONTROL', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/quality-control/}" class="nav-link"
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control') ? 'active' : ''}">Quality Control</a>
|
||||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control') ? 'active' : ''}">Quality
|
||||
Control</a>
|
||||
</li>
|
||||
<li class="nav-item" sec:authorize="hasAnyRole('ROLE_FINISHING', 'ROLE_ADMIN')">
|
||||
<a th:href="@{/finishing/}" class="nav-link"
|
||||
|
|
@ -117,15 +120,15 @@
|
|||
</div>
|
||||
</nav>
|
||||
<!-- second level purchase Order-->
|
||||
<!-- <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"-->
|
||||
<!-- th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order')}">-->
|
||||
<!-- <ul class="navbar-nav">-->
|
||||
<!-- <li class="nav-item"-->
|
||||
<!-- th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order') ? 'active' : ''}">-->
|
||||
<!-- <a th:href="@{/purchase-order/}" class="nav-link">Cards</a>-->
|
||||
<!-- </li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </nav>-->
|
||||
<!-- <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"-->
|
||||
<!-- th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order')}">-->
|
||||
<!-- <ul class="navbar-nav">-->
|
||||
<!-- <li class="nav-item"-->
|
||||
<!-- th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/purchase-order') ? 'active' : ''}">-->
|
||||
<!-- <a th:href="@{/purchase-order/}" class="nav-link">Cards</a>-->
|
||||
<!-- </li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </nav>-->
|
||||
<!-- second level job cards-->
|
||||
<nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
|
||||
th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards')}">
|
||||
|
|
@ -215,10 +218,10 @@
|
|||
th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control/qc-finished-items') ? 'active' : ''}">
|
||||
<a th:href="@{/quality-control/qc-finished-items}" class="nav-link">QC Finished Item</a>
|
||||
</li>
|
||||
<!-- <li class="nav-item"-->
|
||||
<!-- th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control/inventory-accounts') ? 'active' : ''}">-->
|
||||
<!-- <a th:href="@{/quality-control/inventory-accounts}" class="nav-link">Inventory Accounts</a>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li class="nav-item"-->
|
||||
<!-- th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control/inventory-accounts') ? 'active' : ''}">-->
|
||||
<!-- <a th:href="@{/quality-control/inventory-accounts}" class="nav-link">Inventory Accounts</a>-->
|
||||
<!-- </li>-->
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- second level stitching -->
|
||||
|
|
@ -254,9 +257,9 @@
|
|||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<!-- table loading skeleton -->
|
||||
<div class="table-loading-skeleton" th:fragment="table-loading-skeleton">
|
||||
</header>
|
||||
<!-- table loading skeleton -->
|
||||
<div class="table-loading-skeleton" th:fragment="table-loading-skeleton">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<div class="skeleton-box" style="width:35px;"></div>
|
||||
|
|
@ -273,11 +276,11 @@
|
|||
<div class="skeleton-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div th:fragment="page-footer-scripts">
|
||||
<div th:fragment="page-footer-scripts">
|
||||
<script th:src="@{/js/vendor/lazyload-db.js}"></script>
|
||||
<script th:src="@{/js/main.js}"></script>
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container-fluid main-content">
|
||||
<main id="main1" class="container-fluid main-content">
|
||||
<div class="row page-main g-4 p-3">
|
||||
<div class="col-lg-6">
|
||||
<!-- Title Row -->
|
||||
|
|
@ -71,7 +71,8 @@
|
|||
<div class="px-4" style="height: 150px">
|
||||
<h1 class="card-text text-danger fw-bold blink" style="font-size: 4rem;"
|
||||
th:text="${(phases.get('Alteration') != null ? phases.get('Alteration').intValue() : 0) + ' Pcs'}"></h1>
|
||||
<h2 class="card-title text-danger fw-bold text-uppercase blink" style="font-size: 3rem;">ALTERATION</h2>
|
||||
<h2 class="card-title text-danger fw-bold text-uppercase blink" style="font-size: 3rem;">
|
||||
ALTERATION</h2>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -108,7 +109,7 @@
|
|||
<div class="ps-2 text-center">
|
||||
<h1 class="fw-bold m-0"
|
||||
th:text="${phases.get('finishing')?.intValue() ?: 0} + ' Pcs'"></h1>
|
||||
<h4 class="pt-2 fw-bold text-uppercase m-0" >Finishing</h4>
|
||||
<h4 class="pt-2 fw-bold text-uppercase m-0">Finishing</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0 text-center d-flex justify-content-center">
|
||||
|
|
@ -148,8 +149,60 @@
|
|||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<main id="main2" class="container-fluid main-content" style="display: none;">
|
||||
<div class="row page-main g-4 p-3">
|
||||
<div class="col-lg-12 d-flex border border-black-50">
|
||||
<div id="dashboardBarChart" class="dashboardBarChart w-100"
|
||||
style="min-height: 476px;"
|
||||
th:data-title="${detail.get('articleName')} + ' (' + ${date} + ')'"
|
||||
th:data-dates="${date}"
|
||||
th:data-stitching="${phases.get('Stitching')?.intValue() ?: 0}"
|
||||
th:data-finishing="${phases.get('finishing')?.intValue() ?: 0}"
|
||||
th:data-packaging="${phases.get('packaging')?.intValue() ?: 0}"
|
||||
th:data-totalProduction="${detail.get('Shift Target')}"
|
||||
th:data-fontSize="35">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row page-main g-4 p-3">
|
||||
<div class="col-lg-4">
|
||||
<div class="h-100 border border-black-50 p-3 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
|
||||
style="background-color: #516ec4;">
|
||||
<h1 class="fw-bold pt-5 pb-2" style="font-size: 6rem;"
|
||||
th:text="${phases.get('remainingQCAlter')?.intValue()}">0%</h1>
|
||||
<h4 class="fw-bold m-0 pt-2 pb-5" style="font-size: 4rem;">Remaining QC Alter Pcs</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="h-100 border border-black-50 p-3 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
|
||||
style="background-color: #72788a;">
|
||||
<h1 class="fw-bold pt-5 pb-2" style="font-size: 6rem;"
|
||||
th:text="${phases.get('remainingFinishAlter')?.intValue()}">0</h1>
|
||||
<h1 class="fw-bold m-0 pt-2 pb-5" style="font-size: 4rem;">Remaining Finish Alter Pcs </h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="h-100 border border-black-50 p-5 d-flex flex-column align-items-center justify-content-center text-center text-white rounded"
|
||||
style="background-color: #4bb85f;">
|
||||
<h1 class="fw-bold pt-5 pb-2" style="font-size: 7rem;"
|
||||
th:text="${phases.get('totalPackaging')?.intValue()}">0</h1>
|
||||
<h1 class="fw-bold m-0 pt-2 pb-5" style="font-size: 4rem;">OverAll Packing</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
<script>
|
||||
setTimeout(function () {
|
||||
document.getElementById("main1").style.display = "none";
|
||||
document.getElementById("main2").style.display = "block";
|
||||
}, 30000);
|
||||
</script>
|
||||
<script th:src="@{/js/charts.js}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue