From e823fa5527623bc77c421e5399290b4d410d2960 Mon Sep 17 00:00:00 2001
From: Arth <65160206@go.buu.ac.th>
Date: Wed, 26 Mar 2025 02:53:07 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=AA=E0=B8=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/GanttChart/GanttChart.vue | 89 ++++++------------------
1 file changed, 23 insertions(+), 66 deletions(-)
diff --git a/src/components/GanttChart/GanttChart.vue b/src/components/GanttChart/GanttChart.vue
index 8808e47..af1a759 100644
--- a/src/components/GanttChart/GanttChart.vue
+++ b/src/components/GanttChart/GanttChart.vue
@@ -25,55 +25,29 @@
<!-- Rows: แสดงเครื่องจักรจาก Machine Store -->
<div class="rows">
- <div
- v-for="machine in machineStore.machines"
- :key="machine.MachineID"
- class="row"
- :data-machine-id="machine.MachineID"
- @dragover.prevent="onDragOver($event)"
- @drop="onDrop($event, machine.MachineID)"
- >
+ <div v-for="machine in machineStore.machines" :key="machine.MachineID" class="row"
+ :data-machine-id="machine.MachineID" @dragover.prevent="onDragOver($event)"
+ @drop="onDrop($event, machine.MachineID)">
<div class="machine-label">
{{ machine.name }}
</div>
<div class="row-timeline">
<!-- เส้นแนวตั้ง (Grid Lines) -->
- <div
- v-for="hour in hours"
- :key="'line-' + hour"
- class="vertical-line"
- :style="getLineStyle(hour)"
- ></div>
+ <div v-for="hour in hours" :key="'line-' + hour" class="vertical-line" :style="getLineStyle(hour)"></div>
<!-- แสดง Queue ที่ตรงกับวันที่ (selectedDate), Page (pagenum), และ Machine -->
- <div
- v-for="item in filteredQueue(machine.MachineID)"
- :key="item.QueueID"
- class="order"
- :class="{ faded: draggingQueue && draggingQueue.QueueID === item.QueueID }"
- :style="getQueueStyle(item)"
- >
+ <div v-for="item in filteredQueue(machine.MachineID)" :key="item.QueueID" class="order"
+ :class="{ faded: draggingQueue && draggingQueue.QueueID === item.QueueID }" :style="getQueueStyle(item)">
<!-- Handle สำหรับ Resize ด้านซ้าย -->
- <div
- class="resize-handle left"
- @mousedown="onResizeStart($event, item, 'left')"
- ></div>
+ <div class="resize-handle left" @mousedown="onResizeStart($event, item, 'left')"></div>
<!-- ส่วนกลางของ Order ใช้สำหรับลาก และเปิด Dialog เมื่อคลิก -->
- <div
- class="order-content"
- draggable="true"
- @dragstart="onDragStart($event, item)"
- @dragend="onDragEnd($event, item)"
- @click.stop="openQueueDialog(item)"
- >
+ <div class="order-content" draggable="true" @dragstart="onDragStart($event, item)"
+ @dragend="onDragEnd($event, item)" @click.stop="openQueueDialog(item)">
{{ item.label }} ({{ getTimeString(item.startTime) }} -
{{ getTimeString(item.finishTime) }})
</div>
<!-- Handle สำหรับ Resize ด้านขวา -->
- <div
- class="resize-handle right"
- @mousedown="onResizeStart($event, item, 'right')"
- ></div>
+ <div class="resize-handle right" @mousedown="onResizeStart($event, item, 'right')"></div>
</div>
</div>
</div>
@@ -90,13 +64,8 @@
<!-- Pagination -->
<div class="pagination-container">
<transition-group name="fade" tag="div" class="pagination">
- <button
- v-for="p in pages"
- :key="p"
- :class="['page-btn', { active: p === currentPage }]"
- @click="currentPage = p"
- @contextmenu.prevent="onPageRightClick(p, $event)"
- >
+ <button v-for="p in pages" :key="p" :class="['page-btn', { active: p === currentPage }]"
+ @click="currentPage = p" @contextmenu.prevent="onPageRightClick(p, $event)">
{{ p }}
<button v-if="pageToShowDelete === p" class="delete-btn" @click.stop="deletePage(p)">
Delete
@@ -111,27 +80,15 @@
<v-icon>mdi-plus</v-icon>
</v-btn>
</div>
- <AddQueueDialog
- :visible="showAddDialog"
- :queueItem="selectedQueueItem"
- :currentPage="currentPage"
- @close="closeAddQueueDialog"
- />
+ <AddQueueDialog :visible="showAddDialog" :queueItem="selectedQueueItem" :currentPage="currentPage"
+ @close="closeAddQueueDialog" />
</div>
- <OrderDialog
- v-if="selectedQueueItem && !showAddDialog"
- :queueId="selectedQueueItem.QueueID"
- :color="
- getQueueColor(
- selectedQueueItem.label === 'ผลิตเผื่อ' || selectedQueueItem.label === 'เปลี่ยนขนาด'
- ? selectedQueueItem.label
- : selectedQueueItem.orderID
- )
- "
- @close="closeQueueDialog"
- @edit="openAddQueueDialogForEdit"
- @delete="handleDelete"
- />
+ <OrderDialog v-if="selectedQueueItem && !showAddDialog" :queueId="selectedQueueItem.QueueID" :color="getQueueColor(
+ selectedQueueItem.label === 'ผลิตเผื่อ' || selectedQueueItem.label === 'เปลี่ยนขนาด'
+ ? selectedQueueItem.label
+ : selectedQueueItem.orderID
+ )
+ " @close="closeQueueDialog" @edit="openAddQueueDialogForEdit" @delete="handleDelete" />
</div>
</div>
</template>
@@ -160,10 +117,10 @@ const dateStore = useDateStore()
const { currentDate: selectedDate } = storeToRefs(dateStore)
const pageContext = usePageContextStore()
-const ORDER_COLORS = ['#FFCDD2', '#FFE0B2', '#90CAF9'] // แดงอ่อน, ส้มอ่อน, น้ำเงินอ่อน
+const ORDER_COLORS = ['#FFCDD2', '#FFE0B2', '#90CAF9', '#ADD88D', '#BEA9DF', '#FEB9D0', '#CC9B71', '#9DD8D4'] // แดงอ่อน, ส้มอ่อน, น้ำเงินอ่อน
const SPECIAL_COLORS: Record<string, string> = {
- 'ผลิตเผื่อ': '#94f397',
- 'เปลี่ยนขนาด': '#B3E5FC',
+ 'ผลิตเผื่อ': '#94f397',
+ 'เปลี่ยนขนาด': '#B3E5FC',
};
// ใช้ currentPage เป็น pagenum จาก pageContext
--
GitLab