diff --git a/src/api/14_KPI/api.KPI.ts b/src/api/14_KPI/api.KPI.ts
index 11d64c69a..c3bab1be3 100644
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@@ -89,4 +89,7 @@ export default {
    */
   evaluationUser: `${KpiUser}/evaluation/list`,
   evaluationUserDone: `${KpiUser}/evaluation/done/kp7`,
+  achievementDev: `${KpiUser}/achievement/development/admin`,
+  achievementDevByid: (id: string) =>
+    `${KpiUser}/achievement/development/admin/detail/${id}`,
 };
diff --git a/src/modules/14_KPI/components/results/dialogIndividual.vue b/src/modules/14_KPI/components/results/dialogIndividual.vue
new file mode 100644
index 000000000..e525a9190
--- /dev/null
+++ b/src/modules/14_KPI/components/results/dialogIndividual.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importType
+ */
+import type {
+  OptionCheckbox,
+  DataCapacity,
+} from "@/modules/14_KPI/interface/index/Main";
+
+/**
+ * importComponents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const { showLoader, messageError, hideLoader } = useCounterMixin();
+
+/**
+ * props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const devId = defineModel<string>("devId", {
+  required: true,
+});
+
+/**
+ * Table
+ */
+const rows = ref<DataCapacity[]>([]);
+const visibleColumns = ref<String[]>(["capacityPoint", "capacityName"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "capacityPoint",
+    align: "center",
+    label: "ระดับคะแนน",
+    sortable: true,
+    field: "capacityPoint",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:20%;",
+  },
+  {
+    name: "capacityName",
+    align: "left",
+    label: "เกณฑ์การประเมิน",
+    sortable: true,
+    field: "capacityName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:80%;",
+  },
+]);
+
+/**
+ * ตัวแปร
+ */
+const title = ref<string>("");
+const develop = ref<string[]>([]);
+const options = ref<OptionCheckbox[]>([
+  {
+    label: "70 การลงมือปฏิบัต (โดยผู้บังคับบัญชามอบหมาย)",
+    value: "isDevelopment70",
+  },
+  {
+    label: "20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)",
+    value: "isDevelopment20",
+  },
+  { label: "10 การฝึกอบรมอื่นๆ", value: "isDevelopment10" },
+]);
+const target = ref<string>("");
+
+/**
+ * function fetcch ข้อมูลรายละเอียดแผนพัฒนาการปฏิบัติราชการรายบุคคล
+ */
+function fetchDetailIndividual() {
+  showLoader();
+  http
+    .get(config.API.achievementDevByid(devId.value))
+    .then((res) => {
+      const data = res.data.result;
+      title.value = data.name;
+      develop.value = [
+        data.isDevelopment70 ? "isDevelopment70" : "",
+        data.isDevelopment20 ? "isDevelopment20" : "",
+        data.isDevelopment10 ? "isDevelopment10" : "",
+      ];
+
+      target.value = data.target;
+      rows.value = data.capacity;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function ปิด popup
+ */
+function onCloseDialoh() {
+  modal.value = false;
+}
+
+/**
+ * callBack function เมื่อ modal เป็น true
+ */
+watch(
+  () => modal.value,
+  () => {
+    modal.value && fetchDetailIndividual();
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 500px; max-width: 60vw">
+      <DialogHeader
+        :tittle="'รายละเอียดแผนพัฒนาการปฏิบัติราชการรายบุคคล'"
+        :close="onCloseDialoh"
+      />
+      <q-separator />
+      <q-card-section>
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input
+              dense
+              outlined
+              const
+              readonly
+              v-model="title"
+              label="ชื่อเรื่อง/เนื่อหา/หัวข้อการพัฒนา"
+            />
+          </div>
+          <div class="col-12">
+            <div class="text-weight-bold">วิธีการพัฒนา</div>
+            <div class="q-pa-sm">
+              <q-option-group
+                :options="options"
+                type="checkbox"
+                v-model="develop"
+                disable
+              />
+            </div>
+          </div>
+          <div class="col-12">
+            <q-input
+              dense
+              outlined
+              const
+              readonly
+              v-model="target"
+              type="textarea"
+              label="เป้าหมายการนำไปพัฒนางาน"
+            />
+          </div>
+          <div class="col-12">
+            <q-table
+              flat
+              bordered
+              dense
+              :paging="true"
+              row-key="level"
+              class="custom-table2"
+              virtual-scroll
+              :rows="rows"
+              hide-pagination
+              :columns="columns"
+              :visible-columns="visibleColumns"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                    class="bg-grey-2"
+                  >
+                    <span class="text-weight-bold">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div v-if="col.name === 'capacityName'">
+                      <q-input
+                        dense
+                        outlined
+                        const
+                        readonly
+                        v-model="props.row.capacityName"
+                        label="เกณฑ์การประเมิน"
+                      />
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+              <!-- <template v-slot:no-data="{ icon, message }">
+                <div class="q-pa-md text-weight-bold full-width text-center">
+                  <span style="font-size: 16px">ไม่พบข้อมูลสมรรถนะ</span>
+                </div>
+              </template> -->
+            </q-table>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/14_KPI/components/results/tableIndividual.vue b/src/modules/14_KPI/components/results/tableIndividual.vue
index 77b574e12..451e06070 100644
--- a/src/modules/14_KPI/components/results/tableIndividual.vue
+++ b/src/modules/14_KPI/components/results/tableIndividual.vue
@@ -8,8 +8,16 @@ import config from "@/app.config";
  * importType
  */
 import type { QTableProps } from "quasar";
-import type { ResResults } from "@/modules/14_KPI/interface/response/Main";
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+import type {
+  ResRound,
+  ResDevelopment,
+} from "@/modules/14_KPI/interface/response/index";
+
+/**
+ * importComponents
+ */
+import DialogIndividual from "@/modules/14_KPI/components/results/dialogIndividual.vue";
 
 /**
  * importStore
@@ -21,26 +29,25 @@ import { useKpiDataStore } from "@/modules/14_KPI/store";
  * use
  */
 const $q = useQuasar();
-const {
-  showLoader,
-  success,
-  messageError,
-  dialogConfirm,
-  hideLoader,
-  date2Thai,
-} = useCounterMixin();
+const { showLoader, messageError, hideLoader } = useCounterMixin();
 const store = useKpiDataStore();
 
 /**
  * props
  */
 const tab = defineModel<string>("tab", { required: true });
-const rows = ref<[]>([]); // ข่อมูลรายการ
+
+/**
+ * ตัวแปร
+ */
+const rows = ref<ResDevelopment[]>([]); // ข่อมูลรายการ
 const page = ref<number>(1);
 const pageSize = ref<number>(10);
 const maxPage = ref<number>(1);
 const total = ref<number>(1);
 const keyword = ref<string>("");
+const modalDetail = ref<boolean>(false);
+const devId = ref<string>("");
 
 /**
  * Table
@@ -62,17 +69,17 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "fullName",
     format: (val, row) => {
-      return `${row.prefix ?? ""}${row.firstName ?? ""} ${row.lastName ?? ""}`;
+      return `${row.prefix ?? ""}${row.firstname ?? ""} ${row.lastname ?? ""}`;
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "developmentName",
     align: "left",
     label: "ความรู้/ทักษะ/สมรรถนะ ที่ต้องได้รับการพัฒนา",
     sortable: true,
-    field: "name",
+    field: "developmentName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -99,7 +106,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ตำแหน่งประเภท",
     sortable: true,
-    field: "position",
+    field: "posTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -132,7 +139,6 @@ const visibleColumns = ref<string[]>([
   "posLevelName",
   "root",
 ]);
-
 const pagination = ref({
   page: page.value,
   rowsPerPage: pageSize.value,
@@ -142,53 +148,35 @@ const pagination = ref({
  * function fetch รายการแผนพัฒนาการปฏิบัติราชการรายบุคคลย้อนหลัง
  */
 function fetcDataList() {
-  rows.value = [
-    {
-      id: "08dca241-ddfa-4678-89f4-62ad60c41aa8",
-      prefix: "นาย",
-      firstName: "ชัยชนะ",
-      lastName: "เรืองโรจน์",
-      root: "สำนักงานเขตพระนคร",
-      rootId: "e8493cd1-d371-402e-add6-566e68d5d1b3",
-      rootShortName: "ขพน.",
-      position: "นักวิเคราะห์นโยบายและแผน",
-      posTypeId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08071",
-      posTypeName: "วิชาการ",
-      posLevelId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08562",
-      posLevelName: "ปฏิบัติการ",
-      createdAt: "2024-07-12T14:11:35.885071",
-      name: "พัฒนาการสื่อสาร",
-      organization: "ฝ่ายทะเบียน สำนักงานเขตพระนคร",
-    },
-  ];
-  total.value = 1;
-  maxPage.value = Math.ceil(total.value / pageSize.value);
+  showLoader();
+  http
+    .post(config.API.achievementDev, {
+      page: page.value,
+      pageSize: pageSize.value,
+      keyword: keyword.value,
+      kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
+    })
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
 
-  // showLoader();
-  // http
-  //   .post(config.API.evaluationUser, {
-  //     status: tab.value,
-  //     page: page.value,
-  //     pageSize: pageSize.value,
-  //     keyword: keyword.value,
-  //     kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
-  //   })
-  //   .then((res) => {
-  //     const data = res.data.result;
-  //     rows.value = data.data;
-  //     total.value = data.total;
-  //     maxPage.value = Math.ceil(total.value / pageSize.value);
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
+      rows.value = data.data;
+      total.value = data.total;
+      maxPage.value = Math.ceil(total.value / pageSize.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 const year = ref<number | null>(new Date().getFullYear());
 const roundOp = ref<DataOption[]>([]);
+/**
+ * function fetch รอบการประเมิน
+ */
 function fetchRoundOption() {
   showLoader();
   http
@@ -198,8 +186,10 @@ function fetchRoundOption() {
     )
     .then(async (res) => {
       const data = await res.data.result.data;
+      console.log(res.data.result.data);
+
       if (res.data.result.data.length > 0) {
-        const list = await data.map((e: any) => ({
+        const list = await data.map((e: ResRound) => ({
           id: e.id,
           name:
             e.durationKPI === "OCT"
@@ -252,7 +242,17 @@ watch(pagination, () => {
   pageSize.value = pagination.value.rowsPerPage;
 });
 
+/**
+ * function รายละเอียดแผนพัฒนาการปฏิบัติราชการรายบุคคล
+ * @param id แผนพัฒนาการปฏิบัติราชการรายบุคคล
+ */
+function onClickView(id: string) {
+  modalDetail.value = true;
+  devId.value = id;
+}
+
 onMounted(() => {
+  store.formQuery.round = "";
   fetchRoundOption();
 });
 </script>
@@ -282,8 +282,6 @@ onMounted(() => {
               hide-bottom-space
               :model-value="!!year ? year + 543 : null"
               :label="`${'ปีงบประมาณ'}`"
-              clearable
-              @clear="clearYear"
             >
               <template v-slot:prepend>
                 <q-icon
@@ -310,20 +308,6 @@ onMounted(() => {
           map-options
           @update:model-value="changRound"
         />
-
-        <!-- <q-select
-              v-model="status"
-              outlined
-              label="สถานะการประเมิน"
-              dense
-              option-label="name"
-              option-value="id"
-              :options="store.statusOptions"
-              style="min-width: 180px"
-              emit-value
-              map-options
-              @update:model-value="changRound"
-            /> -->
       </div>
 
       <q-space />
@@ -365,13 +349,17 @@ onMounted(() => {
       :rows="rows"
       row-key="id"
       :selection="tab === 'COMPLETE' ? 'multiple' : null"
-      v-model:selected="selected"
       :rows-per-page-options="[10, 25, 50, 100]"
       v-model:pagination="pagination"
       :paging="true"
     >
-      <template v-slot:header-selection="scope" v-if="tab === 'COMPLETE'">
-        <q-checkbox keep-color color="primary" dense v-model="scope.selected" />
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+          <q-th auto-width />
+        </q-tr>
       </template>
       <template v-slot:body="props">
         <q-tr :props="props" class="cursor-pointer">
@@ -387,10 +375,22 @@ onMounted(() => {
             <div v-if="col.name == 'no'">
               {{ (page - 1) * pageSize + props.rowIndex + 1 }}
             </div>
-            <div v-else>
+            <div v-else class="table_ellipsis2">
               {{ col.value ?? "-" }}
             </div>
           </q-td>
+          <q-td
+            ><q-btn
+              flat
+              dense
+              round
+              color="info"
+              icon="mdi-eye-outline"
+              @click="onClickView(props.row.id)"
+            >
+              <q-tooltip>รายละเอียดแผนพัฒนาการปฏิบัติราชการรายบุคคล</q-tooltip>
+            </q-btn></q-td
+          >
         </q-tr>
       </template>
       <template v-slot:pagination="scope">
@@ -409,20 +409,8 @@ onMounted(() => {
       </template>
     </d-table>
   </q-card-section>
-  <q-separator v-if="tab === 'COMPLETE'" />
 
-  <q-card-actions
-    align="right"
-    class="bg-white text-teal"
-    v-if="tab === 'COMPLETE'"
-  >
-    <q-btn
-      label="ประกาศผล"
-      color="public"
-      @click="onAnnounce"
-      :disable="selected.length === 0"
-    />
-  </q-card-actions>
+  <DialogIndividual v-model:devId="devId" v-model:modal="modalDetail" />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/14_KPI/components/results/tableResults.vue b/src/modules/14_KPI/components/results/tableResults.vue
index f2832be07..330200177 100644
--- a/src/modules/14_KPI/components/results/tableResults.vue
+++ b/src/modules/14_KPI/components/results/tableResults.vue
@@ -8,7 +8,10 @@ import config from "@/app.config";
  * importType
  */
 import type { QTableProps } from "quasar";
-import type { ResResults } from "@/modules/14_KPI/interface/response/Main";
+import type {
+  ResResults,
+  ResRound,
+} from "@/modules/14_KPI/interface/response/Main";
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 
 /**
@@ -203,6 +206,9 @@ function onAnnounce() {
 
 const year = ref<number | null>(new Date().getFullYear());
 const roundOp = ref<DataOption[]>([]);
+/**
+ * function fetch รอบการประเมิน
+ */
 function fetchRoundOption() {
   showLoader();
   http
@@ -213,7 +219,7 @@ function fetchRoundOption() {
     .then(async (res) => {
       const data = await res.data.result.data;
       if (res.data.result.data.length > 0) {
-        const list = await data.map((e: any) => ({
+        const list = await data.map((e: ResRound) => ({
           id: e.id,
           name:
             e.durationKPI === "OCT"
@@ -252,12 +258,12 @@ function onSearchData() {
   porps.fetchData();
 }
 
-function clearYear() {
-  year.value = null;
-  store.formQuery.round = "";
-  roundOp.value = [];
-  porps.fetchData();
-}
+// function clearYear() {
+//   year.value = null;
+//   store.formQuery.round = "";
+//   roundOp.value = [];
+//   porps.fetchData();
+// }
 /**
  * ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
  */
@@ -267,6 +273,7 @@ watch(pagination, () => {
 });
 
 onMounted(() => {
+  store.formQuery.round = "";
   fetchRoundOption();
 });
 </script>
@@ -296,8 +303,6 @@ onMounted(() => {
               hide-bottom-space
               :model-value="!!year ? year + 543 : null"
               :label="`${'ปีงบประมาณ'}`"
-              clearable
-              @clear="clearYear"
             >
               <template v-slot:prepend>
                 <q-icon
@@ -324,20 +329,6 @@ onMounted(() => {
           map-options
           @update:model-value="changRound"
         />
-
-        <!-- <q-select
-              v-model="status"
-              outlined
-              label="สถานะการประเมิน"
-              dense
-              option-label="name"
-              option-value="id"
-              :options="store.statusOptions"
-              style="min-width: 180px"
-              emit-value
-              map-options
-              @update:model-value="changRound"
-            /> -->
       </div>
 
       <q-space />
@@ -401,7 +392,7 @@ onMounted(() => {
             <div v-if="col.name == 'no'">
               {{ (page - 1) * pageSize + props.rowIndex + 1 }}
             </div>
-            <div v-else>
+            <div v-else class="table_ellipsis2">
               {{ col.value ?? "-" }}
             </div>
           </q-td>
diff --git a/src/modules/14_KPI/interface/index/Main.ts b/src/modules/14_KPI/interface/index/Main.ts
index 26eafa9bd..d321c73b4 100644
--- a/src/modules/14_KPI/interface/index/Main.ts
+++ b/src/modules/14_KPI/interface/index/Main.ts
@@ -2,6 +2,10 @@ interface DataOption {
   id: string;
   name: string;
 }
+interface OptionCheckbox {
+  label: string;
+  value: string;
+}
 interface ItemsTab {
   label: string;
   name: string;
@@ -64,6 +68,7 @@ interface FormData {
   email: string;
   qualification: string;
 }
+interface DataCapacity {}
 
 export type {
   DataOption,
@@ -74,4 +79,6 @@ export type {
   tableType,
   FormData,
   ItemsTab,
+  OptionCheckbox,
+  DataCapacity,
 };
diff --git a/src/modules/14_KPI/interface/response/index.ts b/src/modules/14_KPI/interface/response/index.ts
index c93bb00ff..f396e4c5b 100644
--- a/src/modules/14_KPI/interface/response/index.ts
+++ b/src/modules/14_KPI/interface/response/index.ts
@@ -41,4 +41,19 @@ interface ResEvaluatorAssessor {
   profileId: string;
 }
 
-export type { ResEvaluator, ResRound, ResEvaluatorAssessor };
+interface ResDevelopment {
+  developmentName: string;
+  durationKPI: string;
+  firstname: string;
+  id: string;
+  kpiPeriodId: string;
+  lastname: string;
+  organization: string;
+  posLevelName: string;
+  posTypeName: string;
+  position: string;
+  prefix: string;
+  root: string;
+}
+
+export type { ResEvaluator, ResRound, ResEvaluatorAssessor, ResDevelopment };
diff --git a/src/modules/14_KPI/views/report.vue b/src/modules/14_KPI/views/report.vue
index 7710f6cc6..7974e1e29 100644
--- a/src/modules/14_KPI/views/report.vue
+++ b/src/modules/14_KPI/views/report.vue
@@ -185,9 +185,6 @@ function fetchReport() {
     .catch((err) => {
       messageError($q, err);
       hideLoader();
-    })
-    .finally(() => {
-      persanalId.value = "";
     });
 }
 
@@ -236,13 +233,19 @@ function changOption(val: string) {
     val === "KPI8" ||
     val === "KPI9"
   ) {
-    persanalId.value = "";
-    if (round.value !== "" && organization.value !== "") {
+    persanalId.value = val === "KPI8" ? persanalId.value : "";
+    organization.value = val === "KPI8" ? "" : organization.value;
+    if (round.value && organization.value) {
+      fetchReport();
+    } else if (round.value && persanalId.value) {
       fetchReport();
     }
   } else {
     round.value = "";
     organization.value = "";
+    if (persanalId.value) {
+      fetchReport();
+    }
   }
 }
 
diff --git a/src/modules/14_KPI/views/resultsMain.vue b/src/modules/14_KPI/views/resultsMain.vue
index 8251a4915..97b30a3e5 100644
--- a/src/modules/14_KPI/views/resultsMain.vue
+++ b/src/modules/14_KPI/views/resultsMain.vue
@@ -59,22 +59,8 @@ function fetcDataList() {
     })
     .then((res) => {
       const data = res.data.result.data;
-      for (let index = 0; index < data.length; index++) {
-        const element = data[index];
-        dataList.value.push({
-          ...element,
-          root: "สำนักงานเขตพระนคร",
-          rootId: "e8493cd1-d371-402e-add6-566e68d5d1b3",
-          rootShortName: "ขพน.",
-          position: "นักวิเคราะห์นโยบายและแผน",
-          posTypeId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08071",
-          posTypeName: "วิชาการ",
-          posLevelId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08562",
-          posLevelName: "ปฏิบัติการ",
-          organization: "ฝ่ายทะเบียน สำนักงานเขตพระนคร",
-        });
-      }
-      // dataList.value = data.data;
+
+      dataList.value = data;
 
       total.value = data.total;
       maxPage.value = Math.ceil(total.value / pageSize.value);
@@ -87,14 +73,14 @@ function fetcDataList() {
     });
 }
 
-/**
- * ทำงานเมื่อมีการเปลี่ยน Tab
- */
-watch(tab, (t) => {
-  page.value = 1;
-  keyword.value = "";
-  t == "KP7" || t == "COMPLETE" ? fetcDataList() : "";
-});
+// /**
+//  * ทำงานเมื่อมีการเปลี่ยน Tab
+//  */
+// watch(tab, (t) => {
+//   page.value = 1;
+//   keyword.value = "";
+//   t == "KP7" || t == "COMPLETE" ? fetcDataList() : "";
+// });
 
 /**
  * ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
@@ -107,7 +93,7 @@ watch(pageSize, () => {
  * HooK
  */
 onMounted(() => {
-  fetcDataList();
+  // fetcDataList();
 });
 </script>