clone code

src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/assets/main.css

@@ -0,0 +1,35 @@
+/* @import './base.css'; */
+
+/* #app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+} */

src/assets/orgChartData.ts

@@ -0,0 +1,11 @@
+const chartData = {
+  personID: "", // Unique ID เป็นเลข ID ที่อ้างอิงไปที่ตัวบุคคล
+  name: "-", // ขื่อบุคคล
+  positionName: "-", // ชื่อตำแหน่ง
+  positionNum: "", // เลขที่ประจำตำแหน่งในโครงสร้าง
+  departmentName: "", // ชื่อหน่วยงานที่สังกัด
+  avatar: "", // ภาพถ่าย
+  children: [], // บุคคลอื่น ๆ ที่อยู่ภายใต้คนนี้ มีโครงสร้างเหมือนกัน
+};
+
+export default chartData;

src/assets/structChartData.ts

@@ -0,0 +1,272 @@
+/**
+ * ข้อมูลจะเริ่มต้นที่ Root ที่มีเพียงอันเดียว แล้วแตกรากลงมา ชื่อฟิลด์ต่าง ๆ จะพยายามให้เหมือนกับ TreeList ฟิลด์ไหนใช้ชื่อต่างกันก็ระบุมาได้นะว่าใน TreeList ใช้อะไร จะได้ใช้ให้เหมือนกัน
+ *	- Object ส่วนที่เป็นหน่วยงานประกอบด้วย
+ *		- deptID : Unique ID ของสำนัก/ฝ่าย/กอง เป็น Int หรือ String ก็ได้ ขอแค่ระบุให้ชัด
+ *		- departmentName : ชื่อสำนัก/ฝ่าย/กอง
+ *		- totalPositionCount : จำนวนตำแหน่งทั้งหมดในหน่วยงาน หรือในส่วนงานย่อย
+ *		- totalPositionVacant : จำนวนตำแหน่งว่างทั้งหมดในหน่วยงาน
+ *	- นอกจากนั้นในแต่ละหน่วยงานยังมี Object ได้อีก 3 แบบคือ
+ *		- heads : เป็น Array ของ Object ที่เก็บตำแหน่งระดับหัวหน้า
+ *		- offcier : เป็น Array ของ Object ที่เก็บตำแหน่งระดับเจ้าหน้าที่
+ *		- children : เป็น Array ของหน่วยงานย่อย ซึ่ง Root ของ children ต้องเป็น Object ของหน่วยงานเสมอ
+ *	- Object ส่วนที่เป็นตำแหน่งประกอบด้วย
+ *		- positionID : Unique ID ของประเภทตำแหน่งนั้น เงื่อนไขเหมือน deptID
+ *		- positionName : ชื่อตำแหน่ง
+ *		- positionNum : เลขที่ประจำตำแหน่ง เช่น กทข.
+ *		- totalPositionCount : จำนวนตำแหน่งทั้งหมด
+ *		- totalPositionVacant : จำนวนตำแหน่งว่างทั้งหมด
+ */
+const chartData = { // root ของข้อมูลเป็น Object (ไม่ใช่ Array แบบ TreeList)
+	deptID: 1, // Unique ID ของสำนัก/ฝ่าย/กอง (ถ้ามี?)
+	departmentName: "สำนักงานเลขานุการผู้ว่าราชการกรุงเทพมหานคร", // ชื่อสำนัก/ฝ่าย/กอง
+	totalPositionCount: 75, // จำนวนตำแหน่งทั้งหมดในหน่วยงาน
+	totalPositionVacant: 2, // จำนวนตำแหน่งว่างทั้งหมดในหน่วยงาน
+	heads: [ // Array ของผู้บริหารในหน่วยงานนั้น ๆ (ผู้อำนวยการ/หัวหน้า)
+		{
+			positionID: 2, // Unique ID ของประเภทตำแหน่งนั้น (ถ้ามี?)
+			positionName: "ผู้อำนวยการสูง", // ชื่อตำแหน่ง
+			positionNum: "(หัวหน้าสำนักงาน)", // เลขที่ประจำตำแหน่ง (ถ้ามี) เช่นพวก กทข.
+			totalPositionCount: 1, // จำนวนตำแหน่งทั้งหมด
+			totalPositionVacant: 0 // จำนวนตำแหน่งว่างทั้งหมด
+		}
+	],
+	officer: [ // Array ของเจ้าหน้าที่ในหน่วยงาน (รายการตำแหน่งในหน่วยงานที่ขึ้นตรงกับ deptID นั้น ๆ)
+	],
+	children: [ // Array ของหน่วยงานย่อย เช่น ฝ่าย กอง
+		{ // โครงสร้างที่เหลือจะเหมือนกับส่วน Root ทุกอย่าง คือแต่ละหน่วยงานย่อย มี heads ไว้ระบุหัวหน้า ผู้อำนวยการ มี Officer ไว้ระบุรายการตำแหน่งในหน่วยงาน มี Children ไว้ระบุหน่วยงานย่อย
+			deptID: 3,
+			departmentName: "ฝ่ายบริหารทั่วไป",
+			totalPositionCount: 14,
+			totalPositionVacant: 0,
+			heads: [
+				{
+					positionID: 2,
+					positionName: "นักจัดการงานทั่วไป",
+					positionNum: "ชพ. (หัวหน้าฝ่าย)",
+					totalPositionCount: 1,
+					totalPositionVacant: 0
+				}
+			],
+			officer: [
+				{
+					positionID: 3,
+					positionName: "นักจัดการงานทั่วไป",
+					positionNum: "ปก./ชก",
+					totalPositionCount: 1,
+					totalPositionVacant: 0
+				},
+				{
+					positionID: 4,
+					positionName: "นักทรัพยากรบุคคล",
+					positionNum: "ปก./ชก.",
+					totalPositionCount: 1,
+					totalPositionVacnt: 0
+				},
+				{
+					positionID: 5,
+					positionName: "นักวิชาการเงินและบัญชี",
+					positionNum: "ปก./ชก.",
+					totalPositionCount: 2,
+					totalPositionVacnt: 0
+				},
+				{
+					positionID: 6,
+					positionName: "นักวิชาการพัสดุ",
+					positionNum: "ปก./ชก.",
+					totalPositionCount: 1,
+					totalPositionVacnt: 0
+				},
+				{
+					positionID: 7,
+					positionName: "เจ้าพนักงานการเงินและบัญชี",
+					positionNum: "ปง./ชง.",
+					totalPositionCount: 3,
+					totalPositionVacnt: 0
+				},
+				{
+					positionID: 8,
+					positionName: "เจ้าพนักงานพัสดุ",
+					positionNum: "ปง./ชง.",
+					totalPositionCount: 1,
+					totalPositionVacnt: 0
+				},
+				{
+					positionID: 9,
+					positionName: "เจ้าพนักงานธุรการ",
+					positionNum: "ปง./ชง.",
+					totalPositionCount: 4,
+					totalPositionVacnt: 0
+				}
+			]
+		},
+		{
+			deptID: 4,
+			departmentName: "ส่วนประสานนโยบาย",
+			totalPositionCount: 15,
+			totalPositionVacant: 0,
+			heads: [
+				{
+					positionID: 10,
+					positionName: "ผู้อำนวยการต้น",
+					positionNum: "(ผู้อำนวยการส่วน)",
+					totalPositionCount: 1,
+					totalPositionVacant: 0,
+				}
+			],
+			children: [
+				{
+					deptID: 11,
+					departmentName: "กลุ่มงานประชุม",
+					totalPositionCount: 6,
+					totalPositionVacant: 0,
+					heads: [
+						{
+							positionID: 11,
+							positionName: "นักจัดการงานทั่วไป",
+							positionNum: "ชพ. (หัวหน้ากลุ่มงาน)",
+							totalPositionCount: 1,
+							totalPositionVacant: 0,
+						}
+					],
+					officer: [
+						{
+							positionID: 12,
+							positionName: "นักจัดการงานทั่วไป",
+							positionNum: "ปก./ชก.",
+							totalPositionCount: 4,
+							totalPositionVacant: 0
+						},
+						{
+							positionID: 13,
+							positionName: "เจ้าพนักงานธุรการ",
+							positionNum: "ปง./ชง.",
+							totalPositionCount: 1,
+							totalPositionVacant: 0
+						}
+					]
+				},
+				{
+					deptID: 12,
+					departmentName: "กลุ่มงานการเมืองและประสานนโยบาย",
+					totalPositionCount: 8,
+					totalPositionVacant: 0,
+					heads: [
+						{
+							positionID: 14,
+							positionName: "นักจัดการงานทั่วไป",
+							positionNum: "ชพ. (หัวหน้ากลุ่มงาน)",
+							totalPositionCount: 1,
+							totalPositionVacant: 0,
+						}
+					],
+					officer: [
+						{
+							positionID: 15,
+							positionName: "นักจัดการงานทั่วไป",
+							positionNum: "ปก./ชก.",
+							totalPositionCount: 4,
+							totalPositionVacant: 0
+						},
+						{
+							positionID: 16,
+							positionName: "เจ้าพนักงานสถิติ",
+							positionNum: "ปง./ชง.",
+							totalPositionCount: 1,
+							totalPositionVacant: 0
+						},
+						{
+							positionID: 17,
+							positionName: "เจ้าพนักงานธุรการ",
+							positionNum: "ปง./ชง.",
+							totalPositionCount: 2,
+							totalPositionVacant: 0
+						}
+					]
+				}
+
+			]
+		},
+		{
+			deptID: 14,
+			departmentName: "ส่วนเรื่องราวร้องทุกข์",
+			totalPositionCount: 15,
+			totalPositionVacant: 0,
+			heads: [
+				{
+					positionID: 18,
+					positionName: "ผู้อำนวยการต้น",
+					positionNum: "(ผู้อำนวยการส่วน)",
+					totalPositionCount: 1,
+					totalPositionVacant: 0
+				}
+			],
+			children: [
+				{
+					deptID: 15,
+					departmentName: "กลุ่มงานรับเรื่องราวร้องทุกข์",
+					totalPositionCount: 7,
+					totalPositionVacant: 0,
+					heads: [
+						{
+							positionID: 19,
+							positionName: "นักจัดการงานทั่วไป",
+							positionNum: "ชพ. (หัวหน้ากลุ่มงาน)",
+							totalPositionCount: 1,
+							totalPositionVacant: 0
+						}
+					],
+					officer: [
+						{
+							positionID: 20,
+							positionName: "นักจัดการงานทั่วไป",
+							positionNum: "ปก./ชก.",
+							totalPositionCount: 4,
+							totalPositionVacant: 0
+						},
+						{
+							positionID: 21,
+							positionName: "เจ้าพนักงานธุรการ",
+							positionNum: "ปง./ชง.",
+							totalPositionCount: 2,
+							totalPositionVacant: 0
+						}
+					]
+				},
+				{
+					deptID: 16,
+					departmentName: "กลุ่มงานตรวจสอบ ติดตามและประมวลผล",
+					totalPositionCount: 7,
+					totalPositionVacant: 0,
+					heads: [
+						{
+							positionID: 22,
+							positionName: "นักจัดการงานทั่วไป",
+							positionNum: "ชพ. (หัวหน้ากลุ่มงาน)",
+							totalPositionCount: 1,
+							totalPositionVacant: 0
+						}
+					],
+					officer: [
+						{
+							positionID: 23,
+							positionName: "นักจัดการงานทั่วไป",
+							positionNum: "ปก./ชก.",
+							totalPositionCount: 4,
+							totalPositionVacant: 0
+						},
+						{
+							positionID: 24,
+							positionName: "เจ้าพนักงานธุรการ",
+							positionNum: "ปง./ชง.",
+							totalPositionCount: 2,
+							totalPositionVacant: 0
+						}
+					]
+				}
+
+			]
+		}
+	]
+}
+
+export default chartData