UI KPI

src/modules/08_KPI/components/Tab/01_Assessment.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, onMounted } from "vue";
+
+import Work from "@/modules/08_KPI/components/Tab/Topic/01_Template.vue";
+import Capacity from "@/modules/08_KPI/components/Tab/Topic/02_Template.vue";
+
+const rows_01 = ref<any[]>();
+const rows_02 = ref<any[]>();
+const rows_03 = ref<any[]>();
+
+const rows_04 = ref<any[]>();
+const rows_05 = ref<any[]>();
+
+const total = ref<number>(0);
+const resultWork = ref<number>(0);
+const resultEvaluation = ref<number>(0);
+
+function getList() {
+  const data = [
+    {
+      indicators: "ตัวชี้วัด 1",
+      target: null,
+      scoreLevel: "4",
+      weight: "50",
+      workResult: "ระดับ 5",
+      evaluationResults: "50",
+    },
+  ];
+
+  rows_01.value = data;
+}
+
+onMounted(() => {
+  getList();
+});
+</script>
+<template>
+  <q-scroll-area style="height: 400px" class="bg-white row col-12">
+    <div class="text-weight-bold text-body1">
+      <span class="txt-under text-blue-5">องค์ประกอบที่ 1</span>
+      <span> ผลสัมฤทธิ์ของงาน</span>
+    </div>
+
+    <div class="q-gutter-md q-mt-sm">
+      <!-- องค์ประกอบที่ 1 -->
+      <Work v-model:data="rows_01" :title="`1. งานตามแผนปฏิบัติราชการประจำปี`" :page="1" />
+      <Work v-model:data="rows_02" :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`" :page="2" />
+      <Work v-model:data="rows_03" :title="`3. งานที่ได้รับมอบหมาย`" :page="3" />
+      <div class="row text-body1 text-weight-bold">
+        <div class="col-5 text-center">
+          <span>รวมผลการประเมิน (ร้อยละ) 100</span>
+        </div>
+        <div class="col-1 text-primary">{{ total }}</div>
+        <div class="col-5 text-center">
+          <span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 70 คะแนน)</span>
+        </div>
+        <div class="col-1 text-primary">{{ resultWork }}</div>
+      </div>
+
+      <q-separator class="q-py-xs" />
+
+      <!-- องค์ประกอบที่ 2 -->
+      <div class="text-weight-bold text-body1 q-mb-sm">
+        <span class="txt-under text-blue-5">องค์ประกอบที่ 2</span>
+        <span> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
+      </div>
+
+      <Capacity v-model:data="rows_04" :title="`1. สมรรถนะหลัก`" :page="1" />
+      <Capacity v-model:data="rows_05" :title="`2. สมรรถนะประจำกลุ่ม`" :page="2" />
+
+      <div class="row justify-evenly text-body1 text-weight-bold">
+        <div class="col-5 text-right">
+          <span>ผลการประเมินสมรรถนะ (20 คะแนน)</span>
+        </div>
+        <div class="col-5 text-primary">{{ resultEvaluation }}</div>
+      </div>
+    </div>
+  </q-scroll-area>
+</template>
+<style scoped>
+.txt-under {
+  text-decoration: underline;
+}
+</style>