124 lines
3.1 KiB
Vue
124 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
import type { CompetencySumary } from "@/modules/01_masterdata/interface/index/Main";
|
|
const $q = useQuasar();
|
|
const { messageError } = useCounterMixin();
|
|
|
|
const competencyTotal = ref<CompetencySumary[]>([
|
|
{
|
|
value: "HEAD",
|
|
label: "สมรรถนะหลัก",
|
|
color: "edit",
|
|
},
|
|
{
|
|
value: "GROUP",
|
|
label: "สมรรถนะประจำกลุ่มงาน",
|
|
color: "primary",
|
|
},
|
|
{
|
|
value: "EXECUTIVE",
|
|
label: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
|
|
color: "blue",
|
|
},
|
|
{
|
|
value: "total",
|
|
label: "ทั้งหมด",
|
|
color: "red",
|
|
},
|
|
{
|
|
value: "DIRECTOR",
|
|
label:
|
|
"สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
|
|
color: "deep-purple",
|
|
},
|
|
{
|
|
value: "INSPECTOR",
|
|
label: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
|
|
color: "orange",
|
|
},
|
|
]);
|
|
|
|
function getTotal() {
|
|
http
|
|
.get(config.API.capacitySummary)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
competencyTotal.value.forEach((i: CompetencySumary) => {
|
|
const map = data.find((item: any) => item.type === i.value);
|
|
if (map) i.total = map.total;
|
|
});
|
|
const totalSum = data.reduce((i: any, j: any) => i + +j.total, 0);
|
|
const totalItem = competencyTotal.value.find(
|
|
(i: CompetencySumary) => i.value === "total"
|
|
);
|
|
if (totalItem) {
|
|
totalItem.total = totalSum.toString();
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
getTotal();
|
|
});
|
|
</script>
|
|
<template>
|
|
<q-card class="bg-grey-1">
|
|
<div class="row q-col-gutter-xs">
|
|
<div
|
|
v-for="(i, index) in competencyTotal"
|
|
:class="
|
|
index > 3
|
|
? 'col-12 col-sm-12 col-md-6 col-lg-6'
|
|
: 'col-12 col-sm-12 col-md-6 col-lg-3'
|
|
"
|
|
>
|
|
<div
|
|
class="bg-white rounded-borders q-pa-sm"
|
|
style="border: 1px solid #ededed"
|
|
>
|
|
<div class="row items-center no-wrap text-size">
|
|
{{ i.label }}
|
|
<q-space />
|
|
<q-badge :color="i.color" text-color="white" :label="i.total" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</template>
|
|
<style scoped>
|
|
.text-size {
|
|
font-size: 14px;
|
|
}
|
|
@media (min-width: 1400px) {
|
|
.text-size {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1350px) and (max-width: 1399px) {
|
|
.text-size {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1050px) and (max-width: 1349px) {
|
|
.text-size {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
@media (min-width: 1024px) and (max-width: 1049px) {
|
|
.text-size {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
</style>
|