diff --git a/jero-web/src/views/projectManagement/components/certificationProgressEchart.vue b/jero-web/src/views/projectManagement/components/certificationProgressEchart.vue
index c567512c9..73f125785 100644
--- a/jero-web/src/views/projectManagement/components/certificationProgressEchart.vue
+++ b/jero-web/src/views/projectManagement/components/certificationProgressEchart.vue
@@ -14,7 +14,7 @@
           :columns="columns"
         >
           <template slot="footer" slot-scope="currentPageData">
-            {{$t('totalTable')}}
+            {{$t('totalTable')}}:{{certificationProgressTotal}}
           </template>
         </a-table>
       </div>
@@ -24,46 +24,108 @@
 
 <script>
   import * as echarts from 'echarts'
+  import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
 
   export default {
     name: 'certificationProgress',
     data() {
       return {
-        loading:false,
-        dataSource:[],
+        loading: false,
+        dataSource: [],
+        certificationProgressTotal: 0,
+        url: {
+          getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
+        },
         columns: [
           {
             title: this.$t('notInvolved'),
             align: 'center',
-            dataIndex: 'nonConformity',
+            dataIndex: 'notInvolved'
           },
           {
             title: this.$t('toBeStarted'),
             align: 'center',
-            dataIndex: 'Tracked',
+            dataIndex: 'toBeStarted'
           },
           {
             title: this.$t('inProgress'),
             align: 'center',
-            dataIndex: 'accord',
+            dataIndex: 'inProgress'
           },
           {
             title: this.$t('experimentFailed'),
             align: 'center',
-            dataIndex: 'notEvaluated',
+            dataIndex: 'experimentFailed'
           },
           {
             title: this.$t('experimentPassed'),
             align: 'center',
-            dataIndex: 'notEvaluatedOne',
+            dataIndex: 'experimentPassed'
           }
         ]
       }
     },
     mounted() {
       this.mainLeftEcharts()
+      this.getData()
     },
     methods: {
+      getData() {
+        getAction(this.url.getProjectDetailsStatistics, { id: this.$route.query.id }).then((res) => {
+          if (res.success) {
+            let certificationProgressMap = res.result.certificationProgressMap.certificationProgressMapList || []
+            this.certificationProgressTotal = res.result.certificationProgressMap.certificationProgressTotal
+            this.dataEcharts(certificationProgressMap)
+          }
+        })
+      },
+      dataEcharts(val) {
+        let data = []
+        let color = []
+        this.dataSource = []
+        if (val && val.length > 0) {
+          this.dataSource = [{}]
+          val.forEach(res => {
+            if (res.certificationProgress == 'NA') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('notInvolved')
+              })
+              color.push('#9DB9D4')
+              this.dataSource[0].notInvolved = res.certificationProgressCount
+            } else if (res.certificationProgress == 'Not start') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('toBeStarted')
+              })
+              color.push('#FDB033')
+              this.dataSource[0].toBeStarted = res.certificationProgressCount
+            } else if (res.certificationProgress == 'In progress') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('inProgress')
+              })
+              color.push('#FF8543')
+              this.dataSource[0].inProgress = res.certificationProgressCount
+            } else if (res.certificationProgress == 'Test failed') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('experimentFailed')
+              })
+              color.push('#FF8543')
+              this.dataSource[0].experimentFailed = res.certificationProgressCount
+            } else if (res.certificationProgress == 'Test passed') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('experimentPassed')
+              })
+              color.push('#2F8DF3')
+              this.dataSource[0].experimentPassed = res.certificationProgressCount
+            }
+          })
+        }
+        this.mainLeftEcharts(data, color)
+      },
       getEcharts(chart, title, color, data) {
         var myChart = echarts.init(document.getElementById(chart))
         myChart.setOption({
@@ -100,15 +162,7 @@
           ]
         })
       },
-      mainLeftEcharts() {
-        let data = [
-          { value: 1048, name: this.$t('notInvolved') },
-          { value: 735, name: this.$t('toBeStarted') },
-          { value: 580, name: this.$t('inProgress') },
-          { value: 580, name: this.$t('experimentFailed') },
-          { value: 580, name: this.$t('experimentPassed') }
-        ]
-        let color = ['#9DB9D4', '#FDB033', '#37CED1', '#FF8543', '#2F8DF3', ]
+      mainLeftEcharts(data, color) {
         this.getEcharts('main-left', this.$t('CertificationProgress'), color, data)
       }
     }
diff --git a/jero-web/src/views/projectManagement/components/deliverableStatusEchart.vue b/jero-web/src/views/projectManagement/components/deliverableStatusEchart.vue
index 9f5331b80..316ed053d 100644
--- a/jero-web/src/views/projectManagement/components/deliverableStatusEchart.vue
+++ b/jero-web/src/views/projectManagement/components/deliverableStatusEchart.vue
@@ -35,7 +35,7 @@
       return {
         url: {
           getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
-        },
+        }
       }
     },
     mounted() {
@@ -50,10 +50,103 @@
         getAction(this.url.getProjectDetailsStatistics, { id: this.$route.query.id }).then((res) => {
           if (res.success) {
             let listingToConfirmMap = res.result.listingToConfirmMap.listingToConfirmMapList || []
-            this.mainLeftEcharts(listingToConfirmMap)
+            let taskToConfirmMap = res.result.taskToConfirmMap.taskToConfirmMapList || []
+            let designComplianceMap = res.result.designComplianceMap.designComplianceMapList || []
+            let prehomoMap = res.result.prehomoMap.prehomoMapList || []
+            let verifyComplianceMap = res.result.verifyComplianceMap.verifyComplianceMapList || []
+            this.dataEcharts(listingToConfirmMap, 1)
+            this.dataEcharts(taskToConfirmMap, 2)
+            this.dataEchartsOne(designComplianceMap, 1)
+            this.dataEchartsOne(prehomoMap, 2)
+            this.dataEchartsOne(verifyComplianceMap, 3)
           }
         })
       },
+      dataEcharts(val, num) {
+        let data = []
+        let color = []
+        if (val && val.length > 0) {
+          val.forEach((res) => {
+            if (res.inventoryAffirmStatus == 'Not started' || res.taskAffirmStatus == 'Not started') {
+              data.push({
+                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
+                name: this.$t('notLaunch')
+              })
+              color.push('#00BEBE')
+            } else if (res.inventoryAffirmStatus == 'List to confirm' || res.taskAffirmStatus == 'List to confirm') {
+              data.push({
+                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
+                name: this.$t('toBeConfirmed')
+              })
+              color.push('#FDB033')
+            } else if (res.inventoryAffirmStatus == 'Accepted' || res.taskAffirmStatus == 'Accepted') {
+              data.push({
+                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
+                name: this.$t('accept')
+              })
+              color.push('#2F8DF3')
+            } else if (res.inventoryAffirmStatus == 'Rejected' || res.taskAffirmStatus == 'Rejected') {
+              data.push({
+                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
+                name: this.$t('refuse')
+              })
+              color.push('#9DB9D4')
+            }
+          })
+        }
+        if (num == 1) {
+          this.mainLeftEcharts(data, color)
+        } else {
+          this.mainRightEcharts(data, color)
+        }
+      },
+      dataEchartsOne(val, num) {
+        let data = []
+        let color = []
+        if (val && val.length > 0) {
+          val.forEach((res) => {
+              if (res.designFlowTaskStatus == 'No rating' || res.prehomoFlowTaskStatus == 'No rating' || res.verifyFlowTaskStatus == 'No rating') {
+                data.push({
+                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
+                  name: this.$t('toBeConfirmed')
+                })
+                color.push('#37CED1')
+              } else if (res.designFlowTaskStatus == 'Compliance' || res.prehomoFlowTaskStatus == 'Compliance' || res.verifyFlowTaskStatus == 'Compliance') {
+                data.push({
+                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
+                  name: this.$t('accord')
+                })
+                color.push('#2F8DF3')
+              } else if (res.designFlowTaskStatus == 'Non-Compliance' || res.prehomoFlowTaskStatus == 'Non-Compliance' || res.verifyFlowTaskStatus == 'Non-Compliance') {
+                data.push({
+                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
+                  name: this.$t('nonConformity')
+                })
+                color.push('#FF8543')
+              } else if (res.designFlowTaskStatus == 'To be tracked' || res.prehomoFlowTaskStatus == 'To be tracked' || res.verifyFlowTaskStatus == 'To be tracked') {
+                data.push({
+                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
+                  name: this.$t('Tracked')
+                })
+                color.push('#FDB033')
+              } else if (res.designFlowTaskStatus == 'NA' || res.prehomoFlowTaskStatus == 'NA' || res.verifyFlowTaskStatus == 'NA') {
+                data.push({
+                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
+                  name: this.$t('notInvolved')
+                })
+                color.push('#9DB9D4')
+              }
+            }
+          )
+        }
+        if (num == 1) {
+          this.mainLeftContentEcharts(data, color)
+        } else if (num == 2) {
+          this.mainRightContentEcharts(data, color)
+        } else if (num == 3) {
+          this.mainBottomEcharts(data, color)
+        }
+      },
       getEcharts(chart, title, color, data) {
         var myChart = echarts.init(document.getElementById(chart))
         myChart.setOption({
@@ -89,54 +182,26 @@
             }
           ]
         })
-      },
-      mainLeftEcharts() {
-        let data = [
-          { value: 1048, name: this.$t('notLaunch') },
-          { value: 735, name: this.$t('toBeConfirmed') },
-          { value: 580, name: this.$t('accept') },
-          { value: 580, name: this.$t('refuse') }
-        ]
-        this.getEcharts('main-left', this.$t('listConfirmationProgress'), ['#00BEBE', '#FDB033', '#2F8DF3', '#9DB9D4'], data)
-      },
-      mainRightEcharts() {
-        let data = [
-          { value: 1048, name: this.$t('notLaunch') },
-          { value: 735, name: this.$t('toBeConfirmed') },
-          { value: 580, name: this.$t('accept') },
-          { value: 580, name: this.$t('refuse') }
-        ]
-        this.getEcharts('main-right', this.$t('taskConfirmationProgress'), ['#00BEBE', '#FDB033', '#2F8DF3', '#9DB9D4'], data)
-      },
-      mainLeftContentEcharts() {
-        let data = [
-          { value: 1048, name: this.$t('toBeConfirmed') },
-          { value: 735, name: this.$t('accord') },
-          { value: 580, name: this.$t('nonConformity') },
-          { value: 580, name: this.$t('Tracked') },
-          { value: 580, name: this.$t('notInvolved') }
-        ]
-        this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), ['#37CED1', '#2F8DF3', '#FF8543', '#FDB033', '#9DB9D4'], data)
-      },
-      mainRightContentEcharts() {
-        let data = [
-          { value: 1048, name: this.$t('toBeConfirmed') },
-          { value: 735, name: this.$t('accord') },
-          { value: 580, name: this.$t('nonConformity') },
-          { value: 580, name: this.$t('Tracked') },
-          { value: 580, name: this.$t('notInvolved') }
-        ]
-        this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), ['#37CED1', '#2F8DF3', '#FF8543', '#FDB033', '#9DB9D4'], data)
-      },
-      mainBottomEcharts() {
-        let data = [
-          { value: 1048, name: this.$t('toBeConfirmed') },
-          { value: 735, name: this.$t('accord') },
-          { value: 580, name: this.$t('nonConformity') },
-          { value: 580, name: this.$t('Tracked') },
-          { value: 580, name: this.$t('notInvolved') }
-        ]
-        this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), ['#37CED1', '#2F8DF3', '#FF8543', '#FDB033', '#9DB9D4'], data)
+      }
+      ,
+      mainLeftEcharts(data, color) {
+        this.getEcharts('main-left', this.$t('listConfirmationProgress'), color, data)
+      }
+      ,
+      mainRightEcharts(data, color) {
+        this.getEcharts('main-right', this.$t('taskConfirmationProgress'), color, data)
+      }
+      ,
+      mainLeftContentEcharts(data, color) {
+        this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), color, data)
+      }
+      ,
+      mainRightContentEcharts(data, color) {
+        this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), color, data)
+      }
+      ,
+      mainBottomEcharts(data, color) {
+        this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), color, data)
       }
     }
   }