summary ตัวชี้วัด

src/modules/01_masterdata/components/Indicators/Summary.vue

@@ -0,0 +1,76 @@
+<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-mb-sm 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>