76 lines
1.8 KiB
Vue
76 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useQuasar } from "quasar";
|
|
|
|
const $q = useQuasar();
|
|
const { showLoader, hideLoader, dialogRemove, success, messageError } =
|
|
useCounterMixin();
|
|
const indicatorTotal = ref<any[]>([
|
|
{
|
|
value: "kpiPlan",
|
|
label: "ตัวชี้วัดตามแผน",
|
|
color: "edit",
|
|
},
|
|
{
|
|
value: "kpiRole",
|
|
label: "ตัวชี้วัดตามตำแหน่ง",
|
|
color: "primary",
|
|
},
|
|
{
|
|
value: "kpiSpecial",
|
|
label: "ตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย",
|
|
color: "blue",
|
|
},
|
|
{
|
|
value: "total",
|
|
label: "ทั้งหมด",
|
|
color: "red",
|
|
},
|
|
]);
|
|
|
|
function getTotal() {
|
|
http
|
|
.post(config.API.indicatorSummary)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
indicatorTotal.value = indicatorTotal.value.map((indicator) => {
|
|
return {
|
|
...indicator,
|
|
total: data[indicator.value],
|
|
};
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {});
|
|
}
|
|
onMounted(() => {
|
|
getTotal();
|
|
});
|
|
</script>
|
|
<template>
|
|
<q-card bordered class="q-pa-xs bg-grey-1">
|
|
<div class="row q-col-gutter-sm">
|
|
<div
|
|
v-for="i in indicatorTotal"
|
|
class="col-12 col-sm-6 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">
|
|
{{ i.label }}
|
|
<q-space />
|
|
<q-badge :color="i.color" text-color="white" :label="i.total" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</template>
|