From 878ab59190281418894332f0659c5371046404ec Mon Sep 17 00:00:00 2001
From: Kritkhanin Anantakul <65160144@go.buu.ac.th>
Date: Tue, 4 Mar 2025 01:53:15 +0700
Subject: [PATCH] machine name
---
src/components/GanttChart/AddQueueDialog.vue | 14 +++++++++++++-
src/components/GanttChart/GanttChart.vue | 12 ++++++------
src/components/GanttChart/OrderDialog.vue | 19 ++++++++++++++++++-
src/components/GanttChart/ganttChart.css | 4 ++--
4 files changed, 39 insertions(+), 10 deletions(-)
diff --git a/src/components/GanttChart/AddQueueDialog.vue b/src/components/GanttChart/AddQueueDialog.vue
index 7dcf482..57ca45f 100644
--- a/src/components/GanttChart/AddQueueDialog.vue
+++ b/src/components/GanttChart/AddQueueDialog.vue
@@ -5,7 +5,12 @@
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label>Machine ID:</label>
- <input v-model="form.machineID" type="text" required />
+ <select v-model="form.machineID" required>
+ <option disabled value="">Select Machine</option>
+ <option v-for="machine in machines" :key="machine.machineID" :value="machine.machineID">
+ {{ machine.name }}
+ </option>
+ </select>
</div>
<div class="form-group">
<label>Order ID:</label>
@@ -68,6 +73,13 @@ export default {
bottleSize: '',
producedQuantity: null,
},
+ machines: [
+ { machineID: 'MC1', name: 'เครื่องเป่าขวด' },
+ { machineID: 'MC2', name: 'เครื่องเป่าขวด2' },
+ { machineID: 'MC3', name: 'เครื่องสวมฉลาก' },
+ { machineID: 'MC4', name: 'เครื่องสวมฉลาก2' },
+ { machineID: 'MC5', name: 'เครื่องบรรจุ+แพ็ค' },
+ ],
isEditing: false, // เช็คว่าเป็นโหมด Edit หรือไม่
};
},
diff --git a/src/components/GanttChart/GanttChart.vue b/src/components/GanttChart/GanttChart.vue
index 2365234..41ae98d 100644
--- a/src/components/GanttChart/GanttChart.vue
+++ b/src/components/GanttChart/GanttChart.vue
@@ -25,7 +25,7 @@
@drop="onDrop($event, machine.machineID)"
>
<div class="machine-label">
- {{ machine.machineID }}
+ {{ machine.name }}
</div>
<div class="row-timeline">
<!-- เส้นแนวตั้ง (Grid Lines) -->
@@ -142,11 +142,11 @@ export default {
// รายการเครื่องจักร
machines: [
- { id: 1, machineID: 'MC1' },
- { id: 2, machineID: 'MC2' },
- { id: 3, machineID: 'MC3' },
- { id: 4, machineID: 'MC4' },
- { id: 5, machineID: 'MC5' },
+ { machineID: 'MC1' ,name: 'เครื่องเป่าขวด'},
+ { machineID: 'MC2' ,name: 'เครื่องเป่าขวด2'},
+ { machineID: 'MC3' ,name: 'เครื่องสวมฉลาก'},
+ { machineID: 'MC4' ,name: 'เครื่องสวมฉลาก2'},
+ { machineID: 'MC5' ,name: 'เครื่องบรรจุ+แพ็ค'},
],
// เปลี่ยนจาก orders เป็น Queue
diff --git a/src/components/GanttChart/OrderDialog.vue b/src/components/GanttChart/OrderDialog.vue
index 0044b77..39e0fdd 100644
--- a/src/components/GanttChart/OrderDialog.vue
+++ b/src/components/GanttChart/OrderDialog.vue
@@ -24,7 +24,7 @@
</div>
<div class="order-assignments">
<div class="machine">
- <span >🛠</span> {{ queueItem.machineID }}
+ <span>🛠</span> {{ getMachineName(queueItem.machineID) }}
</div>
<!-- พนักงาน -->
<div class="employees" v-for="(employee, index) in queueItem.employees" :key="index">
@@ -48,6 +48,23 @@ export default {
default: '#F28B82', // สีโทนแดงอ่อน
},
},
+ data() {
+ return {
+ machines: [
+ { machineID: 'MC1', name: 'เครื่องเป่าขวด' },
+ { machineID: 'MC2', name: 'เครื่องเป่าขวด2' },
+ { machineID: 'MC3', name: 'เครื่องสวมฉลาก' },
+ { machineID: 'MC4', name: 'เครื่องสวมฉลาก2' },
+ { machineID: 'MC5', name: 'เครื่องบรรจุ+แพ็ค' },
+ ],
+ };
+ },
+ methods: {
+ getMachineName(id) {
+ const machine = this.machines.find(m => m.machineID === id);
+ return machine ? machine.name : id;
+ },
+ },
};
</script>
diff --git a/src/components/GanttChart/ganttChart.css b/src/components/GanttChart/ganttChart.css
index 0612494..2903ba1 100644
--- a/src/components/GanttChart/ganttChart.css
+++ b/src/components/GanttChart/ganttChart.css
@@ -11,11 +11,11 @@
}
.machine-label {
- width: 80px;
+ width: 150px;
text-align: center;
font-weight: bold;
background: #ffffff;
- line-height: 40px;
+ line-height: 60px;
border-bottom: 1px solid #ffffff;
}
--
GitLab