diff --git a/jero-web/src/common/lang/en-us.js b/jero-web/src/common/lang/en-us.js
index cdedc21ef..894c43a0d 100644
--- a/jero-web/src/common/lang/en-us.js
+++ b/jero-web/src/common/lang/en-us.js
@@ -859,4 +859,5 @@ module.exports = {
   sponsorReview:'Sponsor review',
   fillInProjectDelivery:'Fill in project delivery',
   Resubmit:'Resubmit',
+  Quantity:'Quantity',
 }
\ No newline at end of file
diff --git a/jero-web/src/common/lang/zh-cn.js b/jero-web/src/common/lang/zh-cn.js
index 6b0b043db..bbf1a6890 100644
--- a/jero-web/src/common/lang/zh-cn.js
+++ b/jero-web/src/common/lang/zh-cn.js
@@ -864,4 +864,5 @@ module.exports = {
   sponsorReview:'发起人审查',
   fillInProjectDelivery:'填写工程交付',
   Resubmit:'重新提交',
+  Quantity:'数量',
 }
\ No newline at end of file
diff --git a/jero-web/src/views/projectManagement/components/certificationProgressEchart.vue b/jero-web/src/views/projectManagement/components/certificationProgressEchart.vue
index 73f125785..36acb5923 100644
--- a/jero-web/src/views/projectManagement/components/certificationProgressEchart.vue
+++ b/jero-web/src/views/projectManagement/components/certificationProgressEchart.vue
@@ -19,15 +19,20 @@
         </a-table>
       </div>
     </div>
+    <responsibilityList ref="responsibilityListRef"/>
   </div>
 </template>
 
 <script>
   import * as echarts from 'echarts'
   import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
+  import responsibilityList from './responsibilityList'
 
   export default {
     name: 'certificationProgress',
+    components: {
+      responsibilityList
+    },
     data() {
       return {
         loading: false,
@@ -89,35 +94,40 @@
             if (res.certificationProgress == 'NA') {
               data.push({
                 value: res.certificationProgressCount,
-                name: this.$t('notInvolved')
+                name: this.$t('notInvolved'),
+                status: res.certificationProgress
               })
               color.push('#9DB9D4')
               this.dataSource[0].notInvolved = res.certificationProgressCount
             } else if (res.certificationProgress == 'Not start') {
               data.push({
                 value: res.certificationProgressCount,
-                name: this.$t('toBeStarted')
+                name: this.$t('toBeStarted'),
+                status: res.certificationProgress
               })
               color.push('#FDB033')
               this.dataSource[0].toBeStarted = res.certificationProgressCount
             } else if (res.certificationProgress == 'In progress') {
               data.push({
                 value: res.certificationProgressCount,
-                name: this.$t('inProgress')
+                name: this.$t('inProgress'),
+                status: res.certificationProgress
               })
               color.push('#FF8543')
               this.dataSource[0].inProgress = res.certificationProgressCount
             } else if (res.certificationProgress == 'Test failed') {
               data.push({
                 value: res.certificationProgressCount,
-                name: this.$t('experimentFailed')
+                name: this.$t('experimentFailed'),
+                status: res.certificationProgress
               })
               color.push('#FF8543')
               this.dataSource[0].experimentFailed = res.certificationProgressCount
             } else if (res.certificationProgress == 'Test passed') {
               data.push({
                 value: res.certificationProgressCount,
-                name: this.$t('experimentPassed')
+                name: this.$t('experimentPassed'),
+                status: res.certificationProgress
               })
               color.push('#2F8DF3')
               this.dataSource[0].experimentPassed = res.certificationProgressCount
@@ -161,6 +171,15 @@
             }
           ]
         })
+        myChart.on('click', (params) => {
+          let query = {
+            title: params.seriesName,
+            projectLibraryId: this.$route.query.id,
+            operatorType: 'queryCertificationProgressStatistics',
+            certificationProgress: params.data.status
+          }
+          this.$refs.responsibilityListRef.getData(query)
+        })
       },
       mainLeftEcharts(data, color) {
         this.getEcharts('main-left', this.$t('CertificationProgress'), color, data)
diff --git a/jero-web/src/views/projectManagement/components/currentStatusOfTheProjectEcharts.vue b/jero-web/src/views/projectManagement/components/currentStatusOfTheProjectEcharts.vue
index e0643e3c7..271ab0c35 100644
--- a/jero-web/src/views/projectManagement/components/currentStatusOfTheProjectEcharts.vue
+++ b/jero-web/src/views/projectManagement/components/currentStatusOfTheProjectEcharts.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="box-content">
-    <div class="headerText">
+    <div class="headerText"
+         :title="this.$t('redSchedule') + this.$t('yellowSchedule')+this.$t('greenRequirements')+this.$t('blueUndeterminedState')">
       {{this.$t('redSchedule')}};
       {{this.$t('yellowSchedule')}};
       {{this.$t('greenRequirements')}};
@@ -25,15 +26,20 @@
         </a-table>
       </div>
     </div>
+    <responsibilityList ref="responsibilityListRef"/>
   </div>
 </template>
 
 <script>
   import * as echarts from 'echarts'
   import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
+  import responsibilityList from './responsibilityList'
 
   export default {
     name: 'CurrentStatusOfTheProjectEcharts',
+    components: {
+      responsibilityList
+    },
     data() {
       return {
         loading: false,
@@ -115,6 +121,15 @@
             }
           ]
         })
+        myChart.on('click', (params) => {
+          let query = {
+            title: params.seriesName,
+            projectLibraryId: this.$route.query.id,
+            operatorType:'queryCurrentProjectStatusStatistics',
+            conditionAssessment:params.data.value
+          }
+          this.$refs.responsibilityListRef.getData(query)
+        })
       },
       mainLeftEcharts(dataSource) {
         let data = []
@@ -199,5 +214,9 @@
     color: #040B29;
     font-weight: 400;
     position: absolute;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 </style>
\ No newline at end of file
diff --git a/jero-web/src/views/projectManagement/components/deliverableStatusEchart.vue b/jero-web/src/views/projectManagement/components/deliverableStatusEchart.vue
index 316ed053d..f1d9a0b02 100644
--- a/jero-web/src/views/projectManagement/components/deliverableStatusEchart.vue
+++ b/jero-web/src/views/projectManagement/components/deliverableStatusEchart.vue
@@ -21,6 +21,7 @@
         <div id="main-bottom"></div>
       </div>
     </div>
+    <responsibilityList ref="responsibilityListRef"/>
   </div>
 
 </template>
@@ -28,9 +29,13 @@
 <script>
   import * as echarts from 'echarts'
   import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
+  import responsibilityList from './responsibilityList'
 
   export default {
     name: 'DeliverableStatusEchart',
+    components: {
+      responsibilityList
+    },
     data() {
       return {
         url: {
@@ -70,25 +75,29 @@
             if (res.inventoryAffirmStatus == 'Not started' || res.taskAffirmStatus == 'Not started') {
               data.push({
                 value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
-                name: this.$t('notLaunch')
+                name: this.$t('notLaunch'),
+                status: res.inventoryAffirmStatus || res.taskAffirmStatus
               })
               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')
+                name: this.$t('toBeConfirmed'),
+                status: res.inventoryAffirmStatus || res.taskAffirmStatus
               })
               color.push('#FDB033')
             } else if (res.inventoryAffirmStatus == 'Accepted' || res.taskAffirmStatus == 'Accepted') {
               data.push({
                 value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
-                name: this.$t('accept')
+                name: this.$t('accept'),
+                status: res.inventoryAffirmStatus || res.taskAffirmStatus
               })
               color.push('#2F8DF3')
             } else if (res.inventoryAffirmStatus == 'Rejected' || res.taskAffirmStatus == 'Rejected') {
               data.push({
                 value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
-                name: this.$t('refuse')
+                name: this.$t('refuse'),
+                status: res.inventoryAffirmStatus || res.taskAffirmStatus
               })
               color.push('#9DB9D4')
             }
@@ -108,31 +117,36 @@
               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')
+                  name: this.$t('toBeConfirmed'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
                 })
                 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')
+                  name: this.$t('accord'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
                 })
                 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')
+                  name: this.$t('nonConformity'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
                 })
                 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')
+                  name: this.$t('Tracked'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
                 })
                 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')
+                  name: this.$t('notInvolved'),
+                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
                 })
                 color.push('#9DB9D4')
               }
@@ -147,7 +161,7 @@
           this.mainBottomEcharts(data, color)
         }
       },
-      getEcharts(chart, title, color, data) {
+      getEcharts(chart, title, color, data, num) {
         var myChart = echarts.init(document.getElementById(chart))
         myChart.setOption({
           title: {
@@ -182,26 +196,49 @@
             }
           ]
         })
+        myChart.on('click', (params) => {
+          let query = {
+            title: params.seriesName,
+            projectLibraryId: this.$route.query.id
+          }
+          if (num === 1) {
+            query.operatorType = 'queryListingToConfirmStatistics'
+            query.inventoryAffirmStatus = params.data.status
+          } else if (num === 2) {
+            query.operatorType = 'queryTaskToConfirmStatistics'
+            query.taskAffirmStatus = params.data.status
+          } else if (num === 3) {
+            query.operatorType = 'queryDesignStatistics'
+            query.designFlowTaskStatus = params.data.status
+          } else if (num === 4) {
+            query.operatorType = 'queryPrehomoStatistics'
+            query.prehomoFlowTaskStatus = params.data.status
+          } else if (num === 5) {
+            query.operatorType = 'queryVerifyStatistics'
+            query.verifyFlowTaskStatus = params.data.status
+          }
+          this.$refs.responsibilityListRef.getData(query)
+        })
       }
       ,
       mainLeftEcharts(data, color) {
-        this.getEcharts('main-left', this.$t('listConfirmationProgress'), color, data)
+        this.getEcharts('main-left', this.$t('listConfirmationProgress'), color, data, 1)
       }
       ,
       mainRightEcharts(data, color) {
-        this.getEcharts('main-right', this.$t('taskConfirmationProgress'), color, data)
+        this.getEcharts('main-right', this.$t('taskConfirmationProgress'), color, data, 2)
       }
       ,
       mainLeftContentEcharts(data, color) {
-        this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), color, data)
+        this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), color, data, 3)
       }
       ,
       mainRightContentEcharts(data, color) {
-        this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), color, data)
+        this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), color, data, 4)
       }
       ,
       mainBottomEcharts(data, color) {
-        this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), color, data)
+        this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), color, data, 5)
       }
     }
   }
diff --git a/jero-web/src/views/projectManagement/components/responsibilityList.vue b/jero-web/src/views/projectManagement/components/responsibilityList.vue
index 9570755b9..cd0f0aea9 100644
--- a/jero-web/src/views/projectManagement/components/responsibilityList.vue
+++ b/jero-web/src/views/projectManagement/components/responsibilityList.vue
@@ -1,7 +1,7 @@
 <template>
   <a-modal
-    :title="$t('batSetting')"
-    :width="1200"
+    :title="title"
+    :width="800"
     :visible="visible"
     :confirm-loading="confirmLoading"
     :maskClosable="false"
@@ -12,57 +12,87 @@
         {{$t('cancel')}}
       </a-button>
     </template>
+    <div style="text-align: right;margin-bottom: 10px">
+      <div @click="handleExport" class="operator-text">
+        <a-icon type="export" :rotate="-90"/>
+        {{$t('export')}}
+      </div>
+    </div>
+    <a-table
+      ref="table"
+      :loading="loading"
+      :pagination="false"
+      :scroll="{x: true,y:400}"
+      :data-source="dataSource"
+      :columns="columns"
+    >
+    </a-table>
   </a-modal>
 </template>
 
 <script>
-  import { getAction, postAction } from '@/api/manage'
+  import { getAction, postAction, downloadFile } from '@/api/manage'
   import moment from 'moment'
+
   export default {
     name: 'responsibilityList',
-    props: ['url'],
     data() {
       return {
         visible: false,
+        title: '',
         confirmLoading: false,
-        formInline: {},
-        rules: {},
-        ids: []
+        loading: false,
+        dataSource: [],
+        queryParam: {},
+        url: {
+          groupByTerritoryXls: '/project/projectLibraryBase/exportProjectDetailsStatisticsGroupByTerritoryXls',
+          GroupByTerritory: '/project/projectLibraryBase/getProjectDetailsStatisticsGroupByTerritory'
+        },
+        columns: [
+          {
+            title: this.$t('areaOfResponsibility'),
+            dataIndex: 'dutyTerritory',
+            align: 'center',
+            width:400,
+            ellipsis: true
+          },
+          {
+            title: this.$t('Quantity'),
+            dataIndex: 'amount',
+            align: 'center',
+            ellipsis: true,
+            width:300,
+          }
+        ]
       }
     },
     mounted() {
     },
     methods: {
-      edit(data) {
+      getData(data) {
         this.visible = true
-        this.$nextTick(() => {
-          this.ids = data || []
-          this.formInline = {}
-        })
+        this.title = data.title
+        this.queryParam = data
+        this.getList(data)
       },
-      handleOk() {
-        let ids = JSON.parse(JSON.stringify(this.ids))
-        let query = {
-          ids: ids.join(','),
-          ...this.formInline
-        }
-        this.confirmLoading = true
-        postAction(this.url.setBatch, query).then((res) => {
+      getList(data) {
+        this.loading = true
+        getAction(this.url.GroupByTerritory, data).then((res) => {
           if (res.success) {
-            this.$message.success(this.$t('OperationSuccessful'))
-            this.visible = false
-            this.confirmLoading = false
-            this.$emit('batSettingList')
+            this.loading = false
+            this.dataSource = res.result.dataList || []
           } else {
-            this.$message.warning(this.$t('operationFailed'))
-            this.confirmLoading = false
+            this.loading = false
+            this.dataSource = []
           }
         })
       },
-      handleCancel() {
-        this.formInline = {}
-        this.visible = false
+      handleExport() {
+        downloadFile(this.url.groupByTerritoryXls, this.title + '.xls', this.queryParam)
       },
+      handleCancel() {
+        this.visible = false
+      }
     }
   }
 </script>