diff --git a/src/components/GanttChart/AddQueueDialog.vue b/src/components/GanttChart/AddQueueDialog.vue
index 8246c05052c76e3f768eb99866c23e4b92907693..90aba534b3e84fe6c07623ed25791051770f44db 100644
--- a/src/components/GanttChart/AddQueueDialog.vue
+++ b/src/components/GanttChart/AddQueueDialog.vue
@@ -5,41 +5,52 @@
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label class="white-text">Machine ID:</label>
- <select v-model="form.machineID" required class="selete-mec-color-text">
- <option disabled value="">Select Machine</option>
+ <select v-model="form.status" class="border-input" required>
<option v-for="machine in machines" :key="machine.machineID" :value="machine.machineID">
{{ machine.name }}
</option>
</select>
</div>
+
<div class="form-group">
<label class="white-text">Order ID:</label>
<input class="border-input" v-model.number="form.orderID" type="number" required />
</div>
- <div class="form-group">
- <label class="white-text">Page Number:</label>
- <input class="border-input" v-model.number="form.pageNumber" type="number" required />
- </div>
+
+ <!-- 🆕 Start Time & Finish Time: ใช้ DateTime Picker -->
<div class="form-group">
<label class="white-text">Start Time:</label>
- <input class="border-input" v-model="form.startTime" type="text" required />
+ <input class="border-input" type="datetime-local" v-model="form.startTime" required />
</div>
<div class="form-group">
<label class="white-text">Finish Time:</label>
- <input class="border-input" v-model="form.finishTime" type="text" required />
+ <input class="border-input" type="datetime-local" v-model="form.finishTime" required />
</div>
+
+ <!-- 🆕 Status: ใช้ Dropdown -->
<div class="form-group">
<label class="white-text">Status:</label>
- <input class="border-input" v-model="form.status" type="text" required />
+ <select v-model="form.status" class="border-input" required>
+ <option value="ยังไม่ได้จัดส่ง">ยังไม่ได้จัดส่ง</option>
+ <option value="จัดส่งแล้ว">จัดส่งแล้ว</option>
+ </select>
</div>
+
+ <!-- 🆕 Bottle Size: ใช้ Dropdown -->
<div class="form-group">
<label class="white-text">Bottle Size:</label>
- <input class="border-input" v-model="form.bottleSize" type="text" required />
+ <select v-model="form.bottleSize" class="border-input" required>
+ <option value="600 ml">600 ml</option>
+ <option value="1500 ml">1500 ml</option>
+ <option value="350 ml">350 ml</option>
+ </select>
</div>
+
<div class="form-group">
<label class="white-text">Produced Quantity:</label>
<input class="border-input" v-model.number="form.producedQuantity" type="number" required />
</div>
+
<!-- ปุ่ม Add หรือ Save Changes -->
<div class="dialog-buttons">
<button type="submit" class="primary-btn">
@@ -58,7 +69,6 @@ import { reactive, ref, watch } from 'vue'
interface QueueItem {
machineID: string
orderID: number | null
- pageNumber: number | null
startTime: string
finishTime: string
status: string
@@ -89,11 +99,10 @@ const emit = defineEmits<{
const form = reactive<QueueItem>({
machineID: '',
orderID: null,
- pageNumber: null,
startTime: '',
finishTime: '',
- status: '',
- bottleSize: '',
+ status: 'ยังไม่ได้จัดส่ง',
+ bottleSize: '600 ml',
producedQuantity: null,
})
@@ -113,11 +122,10 @@ const isEditing = ref(false)
function resetForm() {
form.machineID = ''
form.orderID = null
- form.pageNumber = null
form.startTime = ''
form.finishTime = ''
- form.status = ''
- form.bottleSize = ''
+ form.status = 'ยังไม่ได้จัดส่ง'
+ form.bottleSize = '600 ml'
form.producedQuantity = null
}
@@ -184,7 +192,8 @@ watch(
margin-bottom: 5px;
}
-.form-group input {
+.form-group input,
+.form-group select {
width: 100%;
padding: 5px;
box-sizing: border-box;
@@ -215,28 +224,10 @@ watch(
cursor: pointer;
}
-.icon-button {
- position: absolute;
- top: 10px;
- right: 10px;
- background: transparent;
- border: none;
- cursor: pointer;
-}
-
-.icon-button .mdi {
- font-size: 24px;
- color: #2B2E3F;
-}
-
.white-text {
color: white;
}
-.selete-mec-color-text {
- color: rgb(0, 204, 255)
-}
-
.border-input {
background-color: white;
border: 1px solid #ccc;
diff --git a/src/components/GanttChart/GanttChart.vue b/src/components/GanttChart/GanttChart.vue
index 6583f9536449852901649751328a88702123032f..1385dbc01800f84cd9033ad325de4197f9168c13 100644
--- a/src/components/GanttChart/GanttChart.vue
+++ b/src/components/GanttChart/GanttChart.vue
@@ -1,5 +1,6 @@
<template>
<div class="gantt-container">
+ <h2 class="gantt-title">ตารางคิวการผลิต</h2>
<div class="gantt-header">
<!-- Calendar: เชื่อมกับ selectedDate -->
<GanttCalendar v-model:modelValue="selectedDate" />
@@ -330,10 +331,10 @@ function getQueueStyle(item: QueueItem) {
function getLineStyle(hour: number) {
- const timelineStart = timeToDecimal(startTime.value);
- const timelineEnd = timeToDecimal(endTime.value);
- const ratio = (hour - timelineStart) / (timelineEnd - timelineStart);
- return { left: ratio * 100 + '%' };
+ const totalHours = hours.value.length; // นับจำนวนชั่วโมงที่แสดง (เช่น 10 ช่อง)
+ const leftPercent = (hour - timeToDecimal(startTime.value)) / totalHours * 100;
+
+ return { left: `${leftPercent}%` };
}
function timeToDecimal(timeStr: string): number {
diff --git a/src/components/GanttChart/ganttChart.css b/src/components/GanttChart/ganttChart.css
index ba67c4b32ee4aacc332f605411ce515e46c37325..d9d2a57a33de91f2b3c3256289dd18b3c892b4f7 100644
--- a/src/components/GanttChart/ganttChart.css
+++ b/src/components/GanttChart/ganttChart.css
@@ -1,210 +1,227 @@
.gantt-chart {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- }
-
- .header {
- display: flex;
- background: #fff;
- }
- .gantt-header {
- display: flex;
- align-items: center;
- justify-content: space-between; /* จัดให้ Calendar อยู่ซ้าย, ปุ่มอยู่ขวา */
- margin-bottom: 16px;
- }
-
- .machine-label {
- width: 150px;
- text-align: center;
- font-weight: bold;
- background: #ffffff;
- line-height: 60px;
- border-bottom: 1px solid #ffffff;
- }
-
- .time-scale {
- display: flex;
- flex: 1;
- }
-
- .time-cell {
- flex: 1;
- text-align: center;
- border-bottom: 1px solid #ddd;
- font-size: 15px;
- line-height: 40px;
- font-weight: bold;
- }
-
- .rows {
- flex: 1;
- overflow-y: auto;
- }
-
- .row {
- display: flex;
- min-height: 60px;
- border-bottom: 1px solid #ddd;
- }
-
- .row-timeline {
- position: relative;
- flex: 1;
- overflow: hidden;
- }
-
- .vertical-line {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 1px;
- background-color: #ddd;
- }
-
- .order {
- position: absolute;
- top: 10px;
- height: 40px;
- color: #fff;
- border-radius: 20px;
- user-select: none;
- display: flex;
- align-items: center;
- z-index: 1;
- }
-
- .order-content {
- flex: 1;
- text-align: center;
- line-height: 40px;
- cursor: grab;
- padding: 0 10px;
- }
-
- .resize-handle {
- width: 5px;
- height: 100%;
- cursor: ew-resize;
- position: absolute;
- }
-
- .resize-handle.left {
- left: 0;
- border-top-left-radius: 10px;
- border-bottom-left-radius: 10px;
- }
-
- .resize-handle.right {
- right: 0;
- border-top-right-radius: 10px;
- border-bottom-right-radius: 10px;
- }
-
- .order.faded {
- opacity: 0.3;
- }
-
- .drag-ghost {
- box-sizing: border-box;
- text-align: center;
- pointer-events: none;
- }
-
- .pagination-container {
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 100%;
- }
-
- .pagination {
- display: flex;
- gap: 10px;
- }
-
- .pagination-right {
- margin-left: auto; /* ดันไปขวาสุด */
- }
-
-
- .page-btn {
- background: #ffffff;
- border: 1px solid #ffffff;
- padding: 5px 10px;
- cursor: pointer;
- font-size: 14px;
- position: relative;
- }
-
- .page-btn.active {
- background: #007bff;
- color: #ffffff;
- }
-
- .page-btn.add-page {
- font-weight: bold;
- background: #ffffff;
- }
-
- /* สไตล์สำหรับปุ่ม Delete ที่แสดงเมื่อคลิกขวา */
- .delete-btn {
- margin-left: 5px;
- background-color: red;
- color: #fff;
- border: none;
- padding: 2px 5px;
- cursor: pointer;
- border-radius: 3px;
- font-size: 12px;
- }
-
- /* สไตล์สำหรับ Order Dialog */
- .order-dialog-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.5);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 10000;
- }
-
- .order-dialog {
- background: #fff;
- padding: 20px;
- border-radius: 8px;
- width: 300px;
- text-align: center;
- }
-
- .dialog-buttons button {
- margin: 5px;
- }
- .add-page-btn {
- background-color: #2B2E3F !important; /* สีปุ่ม */
- color: white !important; /* สีไอคอน */
- border-radius: 50%; /* ทำให้เป็นวงกลม */
- width: 40px;
- height: 40px;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
- transition: 0.2s;
- }
-
- .add-page-btn:hover {
- background-color: #1E1E2F !important; /* สีเข้มขึ้นเมื่อ hover */
- }
- .add-page:disabled {
- background-color: #ccc !important; /* เปลี่ยนสีเป็นสีจาง */
- cursor: not-allowed;
- }
-
-
\ No newline at end of file
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.header {
+ display: flex;
+ background: #fff;
+}
+
+.gantt-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ /* จัดให้ Calendar อยู่ซ้าย, ปุ่มอยู่ขวา */
+ margin-bottom: 16px;
+}
+
+.machine-label {
+ width: 150px;
+ text-align: center;
+ font-weight: bold;
+ background: #ffffff;
+ line-height: 60px;
+ border-bottom: 1px solid #ffffff;
+}
+
+.time-scale {
+ display: flex;
+ flex: 1;
+}
+
+.time-cell {
+ width: calc(100% / 10);
+ text-align: center;
+ border-bottom: 1px solid #ddd;
+ font-size: 15px;
+ line-height: 40px;
+ font-weight: bold;
+}
+
+.rows {
+ flex: 1;
+ overflow-y: auto;
+}
+
+.row {
+ display: flex;
+ min-height: 60px;
+ border-bottom: 1px solid #ddd;
+}
+
+.row-timeline {
+ position: relative;
+ flex: 1;
+ overflow: hidden;
+}
+
+.vertical-line {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background-color: #ddd;
+}
+
+.order {
+ position: absolute;
+ top: 10px;
+ height: 40px;
+ color: #fff;
+ border-radius: 20px;
+ user-select: none;
+ display: flex;
+ align-items: center;
+ z-index: 1;
+}
+
+.order-content {
+ flex: 1;
+ text-align: center;
+ line-height: 40px;
+ cursor: grab;
+ padding: 0 10px;
+}
+
+.gantt-title {
+ text-align: left;
+ font-size: 30px;
+ font-weight: bold;
+ margin: 10px 0 10px 30px;
+ color: #333;
+}
+
+
+.resize-handle {
+ width: 5px;
+ height: 100%;
+ cursor: ew-resize;
+ position: absolute;
+}
+
+.resize-handle.left {
+ left: 0;
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+}
+
+.resize-handle.right {
+ right: 0;
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+
+.order.faded {
+ opacity: 0.3;
+}
+
+.drag-ghost {
+ box-sizing: border-box;
+ text-align: center;
+ pointer-events: none;
+}
+
+.pagination-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+}
+
+.pagination {
+ display: flex;
+ gap: 10px;
+}
+
+.pagination-right {
+ margin-left: auto;
+ /* ดันไปขวาสุด */
+}
+
+
+.page-btn {
+ background: #ffffff;
+ border: 1px solid #ffffff;
+ padding: 5px 10px;
+ cursor: pointer;
+ font-size: 14px;
+ position: relative;
+}
+
+.page-btn.active {
+ background: #007bff;
+ color: #ffffff;
+}
+
+.page-btn.add-page {
+ font-weight: bold;
+ background: #ffffff;
+}
+
+/* สไตล์สำหรับปุ่ม Delete ที่แสดงเมื่อคลิกขวา */
+.delete-btn {
+ margin-left: 5px;
+ background-color: red;
+ color: #fff;
+ border: none;
+ padding: 2px 5px;
+ cursor: pointer;
+ border-radius: 3px;
+ font-size: 12px;
+}
+
+/* สไตล์สำหรับ Order Dialog */
+.order-dialog-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 10000;
+}
+
+.order-dialog {
+ background: #fff;
+ padding: 20px;
+ border-radius: 8px;
+ width: 300px;
+ text-align: center;
+}
+
+.dialog-buttons button {
+ margin: 5px;
+}
+
+.add-page-btn {
+ background-color: #2B2E3F !important;
+ /* สีปุ่ม */
+ color: white !important;
+ /* สีไอคอน */
+ border-radius: 50%;
+ /* ทำให้เป็นวงกลม */
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+ transition: 0.2s;
+}
+
+.add-page-btn:hover {
+ background-color: #1E1E2F !important;
+ /* สีเข้มขึ้นเมื่อ hover */
+}
+
+.add-page:disabled {
+ background-color: #ccc !important;
+ /* เปลี่ยนสีเป็นสีจาง */
+ cursor: not-allowed;
+}
\ No newline at end of file