summary ตัวชี้วัด

src/modules/01_masterdata/views/indicatorByPlan.vue

@@ -8,6 +8,7 @@ import config from "@/app.config";
 
 import type { DataOption } from "@/modules/01_masterdata/interface/index/Main";
 import DialogHistory from "@/modules/01_masterdata/components/Indicators/DialogHistory.vue";
+import IndicatorTotal from "@/modules/01_masterdata/components/Indicators/Summary.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -49,28 +50,6 @@ const expanded = ref<any>([]);
 const filterMain = ref<string>("");
 const visibleColumns = ref<string[]>(["including", "includingName"]);
 
-const indicatorTotal = ref<any[]>([
-  {
-    value: "kpiPlan",
-    label: "ตัวชี้วัดตามแผน",
-    color: "edit",
-  },
-  {
-    value: "kpiRole",
-    label: "ตัวชี้วัดตามตำแหน่ง",
-    color: "primary",
-  },
-  {
-    value: "kpiSpecial",
-    label: "ตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย",
-    color: "blue",
-  },
-  {
-    value: "total",
-    label: "ทั้งหมด",
-    color: "red",
-  },
-]);
 const roundOp = ref<DataOption[]>([
   { id: "", name: "ทั้งหมด" },
   { id: "APR", name: "รอบเมษายน" },
@@ -217,26 +196,7 @@ function onClickHistory(id: string) {
     });
 }
 
-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();
   fetchActive();
 });
 </script>
@@ -308,29 +268,7 @@ onMounted(() => {
     </div>
     <div class="col-xs-12 col-sm-9 q-pa-md row">
       <div class="col-12">
-        <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 text-weight-medium">
-                  {{ i.label }}
-                  <q-space />
-                  <q-badge
-                    :color="i.color"
-                    text-color="white"
-                    :label="i.total"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </q-card>
+        <IndicatorTotal />
         <div class="row q-col-gutter-sm items-center q-mb-sm no-wrap">
           <datepicker
             menu-class-name="modalfix"