From 1662afb67c02e4e8f1beecc8407d52a6492ec04c Mon Sep 17 00:00:00 2001
From: Kritkhanin Anantakul <65160144@go.buu.ac.th>
Date: Sun, 16 Mar 2025 19:35:15 +0700
Subject: [PATCH] fix queue timeline
---
src/components/GanttChart/GanttChart.vue | 13 +++++++------
1 file changed, 7 insertions(+), 6 deletions(-)
diff --git a/src/components/GanttChart/GanttChart.vue b/src/components/GanttChart/GanttChart.vue
index 1385dbc..839de80 100644
--- a/src/components/GanttChart/GanttChart.vue
+++ b/src/components/GanttChart/GanttChart.vue
@@ -301,19 +301,19 @@ function getQueueStyle(item: QueueItem) {
const end = getTimeString(item.finishTime);
const startDecimal = timeToDecimal(start);
const endDecimal = timeToDecimal(end);
- const timelineStart = timeToDecimal(startTime.value);
- const timelineEnd = timeToDecimal(endTime.value);
+ const totalHours = hours.value.length; // นับจำนวนชั่วโมงที่แสดง
- const ratioStart = Math.max(0, Math.min(1, (startDecimal - timelineStart) / (timelineEnd - timelineStart)));
- const ratioEnd = Math.max(0, Math.min(1, (endDecimal - timelineStart) / (timelineEnd - timelineStart)));
+ // คำนวณอัตราส่วนของตำแหน่งเริ่มต้นและสิ้นสุด ตามจำนวนชั่วโมงทั้งหมด
+ const leftPercent = ((startDecimal - timeToDecimal(startTime.value)) / totalHours) * 100;
+ const widthPercent = ((endDecimal - startDecimal) / totalHours) * 100;
const backgroundColor = getQueueColor(item.orderID); // ใช้ฟังก์ชันที่แก้ไขแล้ว
console.log(`Queue ${item.queueID}: orderID=${item.orderID}, color=${backgroundColor}`);
return {
- left: ratioStart * 100 + '%',
- width: (ratioEnd - ratioStart) * 100 + '%',
+ left: `${leftPercent}%`,
+ width: `${widthPercent}%`,
backgroundColor: backgroundColor, // ใช้สีแดงพาสเทลหรือสีธีมน้ำ
color: '#333',
borderRadius: '10px',
@@ -330,6 +330,7 @@ function getQueueStyle(item: QueueItem) {
+
function getLineStyle(hour: number) {
const totalHours = hours.value.length; // นับจำนวนชั่วโมงที่แสดง (เช่น 10 ช่อง)
const leftPercent = (hour - timeToDecimal(startTime.value)) / totalHours * 100;
--
GitLab