86 lines
3.2 KiB
Vue
86 lines
3.2 KiB
Vue
|
<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>
|