diff --git a/src/api/14_KPI/api.KPI.ts b/src/api/14_KPI/api.KPI.ts
index 732ecd14d..902d5b476 100644
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@@ -69,4 +69,7 @@ export default {
   kpiLink,
 
   profilePosition: () => `${env.API_URI}/org/profile/keycloak/position`,
+
+  /** Report*/
+  kpiReport: () => `${KPI}/report/announcement`,
 };
diff --git a/src/modules/14_KPI/views/report.vue b/src/modules/14_KPI/views/report.vue
index 0cc79434c..fce0da73e 100644
--- a/src/modules/14_KPI/views/report.vue
+++ b/src/modules/14_KPI/views/report.vue
@@ -84,7 +84,26 @@ function fetchListOrg(id: string) {
     });
 }
 
-function changRound() {}
+function fetchReport() {
+  if (round.value !== "" && organization.value !== "") {
+    showLoader();
+    const body = {
+      periodId: round.value,
+      root: organization.value,
+    };
+    http
+      .post(config.API.kpiReport(), body)
+      .then((res) => {})
+      .catch((err) => {})
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+function changOption() {
+  fetchReport();
+}
 
 function filterSelector(val: string, update: Function) {
   update(() => {
@@ -183,7 +202,7 @@ onMounted(() => {
             emit-value
             map-options
             :disable="roundOp.length === 0"
-            @update:model-value="changRound"
+            @update:model-value="changOption"
           />
           <q-select
             :disable="roundOp.length === 0"
@@ -193,12 +212,15 @@ onMounted(() => {
             outlined
             option-label="name"
             option-value="id"
+            emit-value
             map-options
             v-model="organization"
             :options="organizationOps"
             label="หน่วยงาน"
             use-input
+            @update:model-value="changOption"
             @filter="(inputValue: string,
+            
             doneFn: Function) => filterSelector(inputValue, doneFn )"
           />
         </div>