diff --git a/jero-web/src/common/lang/en-us.js b/jero-web/src/common/lang/en-us.js
index edbcd0aee..5afe49be1 100644
--- a/jero-web/src/common/lang/en-us.js
+++ b/jero-web/src/common/lang/en-us.js
@@ -1828,4 +1828,5 @@ module.exports = {
   projectProgressStatistics:'Project Progress Statistics',
   GRPSystemProjectProgressStatistics:'GRP system project progress statistics',
   statisticalNodes:'Statistical Nodes',
+  proportionWithInTheAreaOfResponsibility:'Proportion within the area of responsibility',
 }
\ 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 ee347b22c..c8e96fe35 100644
--- a/jero-web/src/common/lang/zh-cn.js
+++ b/jero-web/src/common/lang/zh-cn.js
@@ -1929,4 +1929,5 @@ module.exports = {
   projectProgressStatistics:'项目进度统计',
   GRPSystemProjectProgressStatistics:'GRP系统项目进度统计',
   statisticalNodes:'统计节点',
+  proportionWithInTheAreaOfResponsibility:'责任领域内占比',
 }
\ No newline at end of file
diff --git a/jero-web/src/views/projectManagement/components/ParameterItemCollectionList.vue b/jero-web/src/views/projectManagement/components/ParameterItemCollectionList.vue
index 4bea95522..1d03677eb 100644
--- a/jero-web/src/views/projectManagement/components/ParameterItemCollectionList.vue
+++ b/jero-web/src/views/projectManagement/components/ParameterItemCollectionList.vue
@@ -6,6 +6,27 @@
           {{$t('ParameteItemCollectionList')}}({{$t(this.$route.query.projectName)}}) — {{$t(this.$route.query.title)}}
         </span>
       </div>
+      <div class="Virtual-detail-title-right">
+        <a-popconfirm overlayClassName="popconfirmDetailsText"
+                      :visible="visible"
+                      @visibleChange="handleVisibleChange"
+                      placement="bottomRight">
+          <template slot="title" id="popconfirmDetails">
+            <div @click="roleSwitchingClick(item.value)"
+                 v-for="(item,index) in RoleType"
+                 class="operator-text-title"
+                 :class="{'operator-text-title-color':item.label == rolename ? true : false}"
+                 :title="item.label">
+              {{ item.label }}
+            </div>
+            <JLoading :loading="JTextLoading"></JLoading>
+          </template>
+          <div class="operator-text" style="position: relative;margin-right: 0">
+            <a-icon type="select"/>
+            {{rolename}}
+          </div>
+        </a-popconfirm>
+      </div>
     </div>
     <div style="padding-top: 54px;background: #fff;height: 100%">
       <div class="detail-content" style="height: 100%">
@@ -33,28 +54,28 @@
                                v-model="formInline.paramsName"></a-input>
                     </div>
                   </a-col>
-<!--                  <a-col :md="6" :sm="8">-->
-<!--                    <div class="box-title-text">-->
-<!--                      <div class="title-text" :title="$t('NareaOfResponsibility')">-->
-<!--                        <span>{{$t('NareaOfResponsibility')}}</span>-->
-<!--                      </div>-->
-<!--                      <j-multi-select-tag class="box-input" v-model="formInline.dutyTerritory"-->
-<!--                                          :placeholder="$t('PleaseSelect')+$t('NareaOfResponsibility')"-->
-<!--                                          :type="'select'"-->
-<!--                                          :triggerChange="false" :dictCode="'duty_territory'"/>-->
-<!--                    </div>-->
-<!--                  </a-col>-->
-                                    <a-col :md="6" :sm="8">
-                                      <div class="box-title-text">
-                                        <div class="title-text" :title="$t('certificationCategory')">
-                                          <span>{{$t('certificationCategory')}}</span>
-                                        </div>
-                                        <j-dict-select-tag class="box-input" v-model="formInline.certCategory"
-                                                           :placeholder="$t('PleaseSelect')+$t('certificationCategory')"
-                                                           :type="'select'"
-                                                           :triggerChange="false" :dictCode="'cert_category'"/>
-                                      </div>
-                                    </a-col>
+                  <!--                  <a-col :md="6" :sm="8">-->
+                  <!--                    <div class="box-title-text">-->
+                  <!--                      <div class="title-text" :title="$t('NareaOfResponsibility')">-->
+                  <!--                        <span>{{$t('NareaOfResponsibility')}}</span>-->
+                  <!--                      </div>-->
+                  <!--                      <j-multi-select-tag class="box-input" v-model="formInline.dutyTerritory"-->
+                  <!--                                          :placeholder="$t('PleaseSelect')+$t('NareaOfResponsibility')"-->
+                  <!--                                          :type="'select'"-->
+                  <!--                                          :triggerChange="false" :dictCode="'duty_territory'"/>-->
+                  <!--                    </div>-->
+                  <!--                  </a-col>-->
+                  <a-col :md="6" :sm="8">
+                    <div class="box-title-text">
+                      <div class="title-text" :title="$t('certificationCategory')">
+                        <span>{{$t('certificationCategory')}}</span>
+                      </div>
+                      <j-dict-select-tag class="box-input" v-model="formInline.certCategory"
+                                         :placeholder="$t('PleaseSelect')+$t('certificationCategory')"
+                                         :type="'select'"
+                                         :triggerChange="false" :dictCode="'cert_category'"/>
+                    </div>
+                  </a-col>
                   <template v-if="toggleSearchStatus">
                     <a-col :md="6" :sm="8">
                       <div class="box-title-text">
@@ -269,9 +290,9 @@
               {{$t('CompulsoryWithdrawal')}}
             </div>
             <!--        列表设置-->
-<!--            v-if="!this.$route.query.it"-->
+            <!--            v-if="!this.$route.query.it"-->
             <a-popconfirm :visible="customizevisible" overlayClassName="popconfirmIndex"
-                          placement="bottomRight" >
+                          placement="bottomRight">
               <template slot="title" id="popconfirmmize">
                 <div style="max-height:360px;overflow:scroll;overflow-x: auto;width: 211px">
                   <a-checkbox
@@ -283,13 +304,15 @@
                   >{{ $t('selectAll') }}
                   </a-checkbox>
                   <a-checkbox-group @change="onChange" v-model="checkedList" class="customize-text">
-                    <a-checkbox class="customize-text-title" :disabled="item.disabled" v-for="(item, key) in customizeList"
+                    <a-checkbox class="customize-text-title" :disabled="item.disabled"
+                                v-for="(item, key) in customizeList"
                                 :key="key" :value="item.field">{{ item.db_field_txt }}
                     </a-checkbox>
                   </a-checkbox-group>
                   <div class="drawer-bootom-button">
                     <a-button @click="cancel" style="margin-right: 16px">{{ $t('cancel') }}</a-button>
-                    <a-button @click="handleSubmitcustomize" type="primary" :loading="confirmLoading">{{ $t('determine') }}
+                    <a-button @click="handleSubmitcustomize" type="primary" :loading="confirmLoading">{{ $t('determine')
+                      }}
                     </a-button>
                   </div>
                 </div>
@@ -300,31 +323,13 @@
               </div>
             </a-popconfirm>
             <!--       角色切换   -->
-<!--            <div class="operator-text"-->
-<!--                 v-if="!this.$route.query.it"-->
-<!--                 @click="roleSwitchingClick">-->
-<!--              <a-icon type="select"/>-->
-<!--              {{ $t('roleSwitching') }} ({{ $t(this.rolename)}})-->
-<!--            </div>-->
-            <a-popconfirm overlayClassName="popconfirmDetails"
-                          :visible="visible"
-                          @visibleChange="handleVisibleChange"
-                          placement="bottomRight">
-              <template slot="title" id="popconfirmDetails">
-                <div @click="roleSwitchingClick(item.value)"
-                     v-for="(item,index) in RoleType"
-                     class="operator-text-title"
-                     :class="{'operator-text-title-color':item.label == rolename ? true : false}"
-                     :title="item.label">
-                  {{ item.label }}
-                </div>
-                <JLoading :loading="JTextLoading"></JLoading>
-              </template>
-              <div class="operator-text" style="position: relative">
-                <a-icon type="select"/>
-                {{rolename}}
-              </div>
-            </a-popconfirm>
+            <!--            <div class="operator-text"-->
+            <!--                 v-if="!this.$route.query.it"-->
+            <!--                 @click="roleSwitchingClick">-->
+            <!--              <a-icon type="select"/>-->
+            <!--              {{ $t('roleSwitching') }} ({{ $t(this.rolename)}})-->
+            <!--            </div>-->
+
           </div>
           <div style="width: 100%">
             <!-- 表格-10控件-->
@@ -868,7 +873,7 @@
         //     status: 2
         //   }
         // ],
-        customizeList:[],
+        customizeList: [],
         selectedRowKeys: [],
         textLoading: false,
         formInline: {},
@@ -885,7 +890,7 @@
         },
         loading: false,
         dataSource: [],
-        statuList:[],
+        statuList: [],
         areaVisible: false, // 弹框的控制
         configureareaVisible: false, // 配置的彈框
         pageNo: 1,
@@ -1118,7 +1123,7 @@
         }
       },
       roleSwitchingClick(roleCode) {
-        console.log(roleCode,1111)
+        console.log(roleCode, 1111)
         this.JTextLoading = true
         // this.visibleRoleSwitching = true
         this.$nextTick(() => {
@@ -1163,34 +1168,34 @@
         } else {
           // this.$refs.ruleFormRoleSwitching.validate(valid => {
           //   if (valid) {
-              let query = {
-                userType: roleCode,
-                paramsManifestId: this.$route.query.id,
-                projectId: this.$route.query.projectId,
-                userId: this.userInfo().id
-              }
-              this.confirmLoadingRoleSwitching = true
-              postAction('/params/userTypeLog/edit', query).then((res) => {
-                if (res.success) {
-                  this.currentPersonRole = roleCode
-                  this.$message.success(this.$t('OperationSuccessful'))
-                  this.visibleRoleSwitching = false
-                  this.confirmLoadingRoleSwitching = false
-                  this.JTextLoading = false
-                  this.visible = false
-                  localStorage.setItem('currentPersonRole', JSON.stringify(roleCode))
-                  this.RoleType.forEach((item, index) => {
-                    if (item.value == this.currentPersonRole) {
-                      this.rolename = item.label
-                    }
-                  })
-                  this.selectedRowKeysValue = []
-                } else {
-                  this.confirmLoadingRoleSwitching = false
-                  this.JTextLoading = false
-                  this.$message.warning(this.$t('operationFailed'))
+          let query = {
+            userType: roleCode,
+            paramsManifestId: this.$route.query.id,
+            projectId: this.$route.query.projectId,
+            userId: this.userInfo().id
+          }
+          this.confirmLoadingRoleSwitching = true
+          postAction('/params/userTypeLog/edit', query).then((res) => {
+            if (res.success) {
+              this.currentPersonRole = roleCode
+              this.$message.success(this.$t('OperationSuccessful'))
+              this.visibleRoleSwitching = false
+              this.confirmLoadingRoleSwitching = false
+              this.JTextLoading = false
+              this.visible = false
+              localStorage.setItem('currentPersonRole', JSON.stringify(roleCode))
+              this.RoleType.forEach((item, index) => {
+                if (item.value == this.currentPersonRole) {
+                  this.rolename = item.label
                 }
               })
+              this.selectedRowKeysValue = []
+            } else {
+              this.confirmLoadingRoleSwitching = false
+              this.JTextLoading = false
+              this.$message.warning(this.$t('operationFailed'))
+            }
+          })
           //   }
           // })
         }
@@ -1823,27 +1828,27 @@
         this.selectedValue = this.checkedList
         this.indeterminate = false
       },
-      getcustomizeList(item){
+      getcustomizeList(item) {
         let params = {
           paramsManifestId: this.$route.query.id,
-          projectName:this.$route.query.projectName,
+          projectName: this.$route.query.projectName,
           flag: '7'
         }
         getAction('params/collectManifest/getHeader', params).then((res) => {
           if (res.success) {
             let List = []
             let sList = []
-            res.result.forEach((item,index) => {
-              if(!item.isLock){
-                if(item.headFieldCn == '操作'){
+            res.result.forEach((item, index) => {
+              if (!item.isLock) {
+                if (item.headFieldCn == '操作') {
                   item.field = 'operation'
                   item.disabled = true
-                }else if(item.headFieldCn == 'NIO编号' || item.headFieldCn == '参数名称'){
+                } else if (item.headFieldCn == 'NIO编号' || item.headFieldCn == '参数名称') {
                   item.disabled = true
                 }
                 List.push(item)
               }
-              if(item.isLock) {
+              if (item.isLock) {
                 sList.push(item)
               }
             })
@@ -1851,7 +1856,7 @@
             this.statuList = sList
           }
         })
-        if(item){
+        if (item) {
           console.log(item)
           this.checkedList = item
         }
@@ -2222,7 +2227,7 @@
       returnDataJurisdiction() {
         // 退回的状态权限
         let homoJurisdictionReturn = this.homoJurisdictionReturn()
-        console.log(homoJurisdictionReturn,'homoJurisdictionReturn')
+        console.log(homoJurisdictionReturn, 'homoJurisdictionReturn')
         if (homoJurisdictionReturn == 1) {
           this.returnData()
         } else if (homoJurisdictionReturn == 0) {
@@ -2306,9 +2311,9 @@
         })
         let _this = this
         let param = {
-          ids: _array.join(',') ,
-          paramsManifestId:this.$route.query.id,
-          projectId:this.$route.query.projectId,
+          ids: _array.join(','),
+          paramsManifestId: this.$route.query.id,
+          projectId: this.$route.query.projectId
 
         }
         let url = ''
@@ -2512,9 +2517,11 @@
   .popconfirmIndex .anticon-exclamation-circle {
     display: none !important;
   }
+
   ::v-deep .ant-table-fixed-header .ant-table-body-inner {
     overflow: visible;
   }
+
   popconfirmmize {
     z-index: 999;
   }
@@ -2530,6 +2537,7 @@
   .popconfirmmize .ant-popover-message {
     padding: 4px 0 36px !important;
   }
+
   ::v-deep .ant-popover-buttons {
     display: none !important;
   }
@@ -2639,6 +2647,7 @@
   .Required {
     color: red;
   }
+
   .customize-text {
     /*height: 1533px;*/
     display: flex;
@@ -2653,6 +2662,7 @@
     color: #040B29;
     margin-bottom: 22px;
   }
+
   .drawer-bootom-button {
     position: absolute;
     bottom: 0;
@@ -2665,6 +2675,7 @@
     background: #fff;
     border-radius: 0 0 2px 2px;
   }
+
   .ant-table-placeholder {
     padding: 0;
     border-top: none;
@@ -2673,9 +2684,11 @@
   .itemModelComment .ant-form-item-control-wrapper {
     width: 100% !important;
   }
+
   .second {
     padding: 0 !important;
   }
+
   .doc-detail {
     background: #fff;
     height: 100%;
@@ -2751,6 +2764,10 @@
         line-height: 68px;
       }
 
+      .Virtual-detail-title-right {
+        float: right;
+      }
+
       .doc-detail-right {
         width: 800px;
         line-height: 68px;
@@ -2782,9 +2799,11 @@
   .text-wraning {
     word-break: break-word;
   }
+
   .operator-text-title-color {
     color: #00B3BE;
   }
+
 </style>
 <style lang='less'>
   .popconfirmIndex .ant-popover-message-title {
@@ -2792,16 +2811,16 @@
   }
 </style>
 <style>
-.popconfirmDetails {
-  z-index: 999;
-  /*top: 42px !important;*/
-}
+  .popconfirmDetailsText {
+    z-index: 1000;
+    top: 42px !important;
+  }
 
-.popconfirmDetails .ant-popover-buttons {
-  display: none !important;
-}
+  .popconfirmDetailsText .ant-popover-buttons {
+    display: none !important;
+  }
 
-.popconfirmDetails .anticon-exclamation-circle {
-  display: none !important;
-}
+  .popconfirmDetailsText .anticon-exclamation-circle {
+    display: none !important;
+  }
 </style>
\ No newline at end of file
diff --git a/jero-web/src/views/projectManagement/components/certificationActivity.vue b/jero-web/src/views/projectManagement/components/certificationActivity.vue
index 499e9893f..7450f2c6e 100644
--- a/jero-web/src/views/projectManagement/components/certificationActivity.vue
+++ b/jero-web/src/views/projectManagement/components/certificationActivity.vue
@@ -2,14 +2,24 @@
   <div>
     <div class="box-content">
       <div class="box-content-left">
+        <div class="total-text">
+          <span>{{$t('totalTable')+' : '+mainLeftNum}}</span>
+        </div>
         <div id="main-left"></div>
       </div>
       <div class="box-content-right">
+        <div class="total-text">
+          <span>{{$t('totalTable')+' : '+mainRightNum}}</span>
+        </div>
         <div id="main-right"></div>
       </div>
     </div>
     <div class="box-content">
       <div class="box-content-bottom">
+        <div class="total-text-text" :class="{'total-text-text-cntop':long == 'zh-cn' ? true:false,
+        'total-text-text-entop':long == 'zh-cn' ? false:true}">
+          <span>{{$t('totalTable')+' : '+mainBottomNum}}</span>
+        </div>
         <div class="box-content-text">
           <div class="box-content-text-text" @click="boxContentClick(0)">
             {{$t('whole')}}
@@ -50,8 +60,12 @@
         url: {
           getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
         },
-        certificationProgressMap:{},
-        num:'0',
+        certificationProgressMap: {},
+        num: '0',
+        mainLeftNum: 0,
+        mainRightNum: 0,
+        mainBottomNum: 0,
+        long: localStorage.getItem('language') || 'zh-cn'
       }
     },
     mounted() {
@@ -92,6 +106,7 @@
       dataEcharts(dataSource) {
         let data = []
         let color = []
+        this.mainLeftNum = 0
         if (dataSource && dataSource.length > 0) {
           this.dataSource = [{}]
           dataSource.forEach(res => {
@@ -100,7 +115,7 @@
                 value: res.taskAffirmStatusCount,
                 name: this.$t('notLaunch'),
                 color: '#00B3BE',
-                status:res.taskAffirmStatus
+                status: res.taskAffirmStatus
               })
               color.push('#00B3BE')
             } else if (res.taskAffirmStatus == 'List to confirm') {
@@ -108,7 +123,7 @@
                 value: res.taskAffirmStatusCount,
                 name: this.$t('listToConfirm'),
                 color: '#FDA71C',
-                status:res.taskAffirmStatus
+                status: res.taskAffirmStatus
               })
               color.push('#FDA71C')
             } else if (res.taskAffirmStatus == 'Accepted') {
@@ -116,7 +131,7 @@
                 value: res.taskAffirmStatusCount,
                 name: this.$t('accept'),
                 color: '#26BC4B',
-                status:res.taskAffirmStatus
+                status: res.taskAffirmStatus
               })
               color.push('#26BC4B')
             } else if (res.taskAffirmStatus == 'Rejected') {
@@ -124,17 +139,19 @@
                 value: res.taskAffirmStatusCount,
                 name: this.$t('refuse'),
                 color: '#E83030',
-                status:res.taskAffirmStatus
+                status: res.taskAffirmStatus
               })
               color.push('#E83030')
             }
+            this.mainLeftNum += res.taskAffirmStatusCount
           })
         }
         this.getEcharts('main-left', this.$t('certificationTaskConfirmation'), color, data)
       },
-      mainRightEcharts(dataSource){
+      mainRightEcharts(dataSource) {
         let data = []
         let color = []
+        this.mainRightNum = 0
         if (dataSource && dataSource.length > 0) {
           this.dataSource = [{}]
           dataSource.forEach(res => {
@@ -143,7 +160,7 @@
                 value: res.taskAffirmStatusCount,
                 name: this.$t('notLaunch'),
                 color: '#00B3BE',
-                status:res.taskAffirmStatus
+                status: res.taskAffirmStatus
               })
               color.push('#00B3BE')
             } else if (res.taskAffirmStatus == 'List to confirm') {
@@ -151,7 +168,7 @@
                 value: res.taskAffirmStatusCount,
                 name: this.$t('listToConfirm'),
                 color: '#FDA71C',
-                status:res.taskAffirmStatus
+                status: res.taskAffirmStatus
               })
               color.push('#FDA71C')
             } else if (res.taskAffirmStatus == 'Review and pass') {
@@ -159,7 +176,7 @@
                 value: res.taskAffirmStatusCount,
                 name: this.$t('reviewAndPass'),
                 color: '#26BC4B',
-                status:res.taskAffirmStatus
+                status: res.taskAffirmStatus
               })
               color.push('#26BC4B')
             } else if (res.taskAffirmStatus == 'Review and return') {
@@ -167,17 +184,19 @@
                 value: res.taskAffirmStatusCount,
                 name: this.$t('reviewAndReturn'),
                 color: '#E83030',
-                status:res.taskAffirmStatus
+                status: res.taskAffirmStatus
               })
               color.push('#E83030')
             }
+            this.mainRightNum += res.taskAffirmStatusCount
           })
         }
         this.getEcharts('main-right', this.$t('preHomoFlow'), color, data)
       },
-      mainBottomEcharts(dataSource){
+      mainBottomEcharts(dataSource) {
         let data = []
         let color = []
+        this.mainBottomNum = 0
         if (dataSource && dataSource.length > 0) {
           dataSource.forEach(res => {
             if (res.certificationProgress == 'Not start') {
@@ -185,7 +204,7 @@
                 value: res.certificationProgressCount,
                 name: this.$t('Notatthe'),
                 color: '#00B3BE',
-                status:res.certificationProgress
+                status: res.certificationProgress
               })
               color.push('#00B3BE')
             } else if (res.certificationProgress == 'In progress') {
@@ -193,7 +212,7 @@
                 value: res.certificationProgressCount,
                 name: this.$t('inProgress'),
                 color: '#FDA71C',
-                status:res.certificationProgress
+                status: res.certificationProgress
               })
               color.push('#FDA71C')
             } else if (res.certificationProgress == 'Test passed') {
@@ -201,7 +220,7 @@
                 value: res.certificationProgressCount,
                 name: this.$t('experimentPassed'),
                 color: '#26BC4B',
-                status:res.certificationProgress
+                status: res.certificationProgress
               })
               color.push('#26BC4B')
             } else if (res.certificationProgress == 'Test failed') {
@@ -209,34 +228,35 @@
                 value: res.certificationProgressCount,
                 name: this.$t('experimentFailed'),
                 color: '#E83030',
-                status:res.certificationProgress
+                status: res.certificationProgress
               })
               color.push('#E83030')
-            }else if (res.certificationProgress == 'Component report not submitted') {
+            } else if (res.certificationProgress == 'Component report not submitted') {
               data.push({
                 value: res.certificationProgressCount,
                 name: this.$t('componentReportNotSubmitted'),
                 color: '#FDA71C',
-                status:res.certificationProgress
+                status: res.certificationProgress
               })
               color.push('#FDA71C')
-            }else if (res.certificationProgress == 'Component report submitted') {
+            } else if (res.certificationProgress == 'Component report submitted') {
               data.push({
                 value: res.certificationProgressCount,
                 name: this.$t('componentReportSubmitted'),
                 color: '#6FD682',
-                status:res.certificationProgress
+                status: res.certificationProgress
               })
               color.push('#6FD682')
-            }else if (res.certificationProgress == 'Component report has been stored') {
+            } else if (res.certificationProgress == 'Component report has been stored') {
               data.push({
                 value: res.certificationProgressCount,
                 name: this.$t('componentReportHasBeenStored'),
                 color: '#26BC4B',
-                status:res.certificationProgress
+                status: res.certificationProgress
               })
               color.push('#26BC4B')
             }
+            this.mainBottomNum += res.certificationProgressCount
           })
         }
         this.getEcharts('main-bottom', this.$t('CertificationProgress'), color, data)
@@ -249,14 +269,14 @@
           },
           tooltip: {
             trigger: 'item',
-            textStyle : {
-              fontWeight : 'normal',
-              fontSize : 14,
-              color:'#040B29',
-              fontFamily:'BlueSkyNoto',
+            textStyle: {
+              fontWeight: 'normal',
+              fontSize: 14,
+              color: '#040B29',
+              fontFamily: 'BlueSkyNoto'
             },
-            formatter: function (parms) {
-              let str = parms.marker+' '+parms.data.name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+parms.data.value+' ('+parms.percent+'%)'
+            formatter: function(parms) {
+              let str = parms.marker + ' ' + parms.data.name + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + parms.data.value + ' (' + parms.percent + '%)'
               return str
             }
           },
@@ -300,11 +320,11 @@
             query.operatorType = 'queryPrehomoStatistics'
             query.status = params.data.status
           } else if (params.seriesName === this.$t('CertificationProgress')) {
-            if (this.num == '0'){
+            if (this.num == '0') {
               query.operatorType = 'queryCertificationProgressStatisticsAll'
-            }else if(this.num == '1'){
+            } else if (this.num == '1') {
               query.operatorType = 'queryCertificationProgressStatisticsCar'
-            }else if(this.num == '2'){
+            } else if (this.num == '2') {
               query.operatorType = 'queryCertificationProgressStatisticsPart'
             }
             query.status = params.data.status
@@ -327,12 +347,12 @@
           boxContentTextText[num].classList.add('box-content-text-color')
         }
         this.num = num
-        if (num == 0){
-          this.mainBottomEcharts( this.certificationProgressMap.allMapList || [])
-        }else if(num == 1){
-          this.mainBottomEcharts( this.certificationProgressMap.carMapList || [])
-        }else if(num == 2){
-          this.mainBottomEcharts( this.certificationProgressMap.partMapList || [])
+        if (num == 0) {
+          this.mainBottomEcharts(this.certificationProgressMap.allMapList || [])
+        } else if (num == 1) {
+          this.mainBottomEcharts(this.certificationProgressMap.carMapList || [])
+        } else if (num == 2) {
+          this.mainBottomEcharts(this.certificationProgressMap.partMapList || [])
         }
       }
     }
@@ -350,6 +370,7 @@
     .box-content-left {
       width: calc(50% - 10px);
       height: 346px;
+      position: relative;
       border: 2px #eff1f3 solid;
       border-radius: 6px;
       margin-top: 4px;
@@ -365,6 +386,7 @@
     .box-content-right {
       width: calc(50% - 10px);
       height: 346px;
+      position: relative;
       border: 2px #eff1f3 solid;
       border-radius: 6px;
       margin-top: 4px;
@@ -384,6 +406,7 @@
       position: relative;
       border-radius: 6px;
       margin-top: 20px;
+      overflow: hidden;
 
       .box-content-text {
         height: 30px;
@@ -429,4 +452,27 @@
     }
   }
 
+  .total-text {
+    position: absolute;
+    right: 28px;
+    top: 19px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .total-text-text {
+    position: absolute;
+    right: 28px;
+    top: 21px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .total-text-text-cntop {
+    right: 180px;
+  }
+
+  .total-text-text-entop {
+    right: 290px;
+  }
 </style>
\ No newline at end of file
diff --git a/jero-web/src/views/projectManagement/components/complianceCertificationForm.vue b/jero-web/src/views/projectManagement/components/complianceCertificationForm.vue
index 2790f90d3..1181bfe9e 100644
--- a/jero-web/src/views/projectManagement/components/complianceCertificationForm.vue
+++ b/jero-web/src/views/projectManagement/components/complianceCertificationForm.vue
@@ -8,11 +8,12 @@
         <div class="process-content-content" :style="val.left"
              v-for="(val,indexOne) in timeData" :key="indexOne" v-if="val.g">
           <div class="process-content-right-top" :title="val.name">{{ val.name }}</div>
+          <div class="process-content-right-button" :title="val.time.slice(0, 11)">{{ val.time.slice(0, 11) }}</div>
           <!--                  <div class="process-content-right-button" v-if="indexOne % 2 == 1" :title="val.name">{{ val.name }}-->
           <!--                  </div>-->
           <a-tooltip placement="topLeft" overlayClassName="tooltipColor">
             <template slot="title">
-              <span>{{ val.time.slice(0, 11) }}</span>
+              <span>{{ val.name }}</span>
             </template>
             <img v-if="val.status == 1" src="../../../assets/heiTop.png" class="process-content-left"
                  alt="">
@@ -27,12 +28,12 @@
         </div>
         <div class="process-content-contentOne" :style="val.left"
              v-for="(val,indexTwo) in timeData" v-if="!val.g">
-          <!--                  <div class="process-content-right-top" v-if="indexOne % 2 == 0" :title="val.name">{{ val.name }}</div>-->
+          <div class="process-content-right-top" :title="val.time.slice(0, 11)">{{ val.time.slice(0, 11) }}</div>
           <div class="process-content-right-button" :title="val.name">{{ val.name }}
           </div>
           <a-tooltip placement="topLeft" overlayClassName="tooltipColor">
             <template slot="title">
-              <span>{{ val.time.slice(0, 11) }}</span>
+              <span>{{ val.name }}</span>
             </template>
             <img v-if="val.status == 1" src="../../../assets/huiBottom.png" class="process-content-left"
                  alt="">
@@ -192,10 +193,10 @@
         width: 83px;
         font-size: 12px;
         font-weight: 400;
-        color: #6F7385;
+        color: #9C9FAC;
         position: absolute;
         left: 50%;
-        top: 36px;
+        top: -36px;
         transform: translate(-50%, -50%);
         overflow: hidden;
         display: -webkit-box;
@@ -229,13 +230,13 @@
 
       .process-content-right-top {
         font-size: 12px;
-        color: #040B29;
         width: 83px;
         background: #fff;
         display: inline-block;
         overflow: hidden;
         position: absolute;
-        top: -12px;
+        color: #9C9FAC;
+        top: 57px;
         left: 50%;
         transform: translate(-50%, -50%);
         overflow: hidden;
@@ -253,10 +254,12 @@
         width: 83px;
         font-size: 12px;
         font-weight: 400;
-        color: #6F7385;
+        color: #040B29;
+        background: #fff;
         position: absolute;
         left: 50%;
         top: 36px;
+        line-height: 11px;
         transform: translate(-50%, -50%);
         overflow: hidden;
         display: -webkit-box;
diff --git a/jero-web/src/views/projectManagement/components/listOfRegulations.vue b/jero-web/src/views/projectManagement/components/listOfRegulations.vue
index de8b628f9..1837e9eed 100644
--- a/jero-web/src/views/projectManagement/components/listOfRegulations.vue
+++ b/jero-web/src/views/projectManagement/components/listOfRegulations.vue
@@ -1433,6 +1433,10 @@
     },
 
     mounted() {
+      if (this.areaOfResponsibilityList && this.areaOfResponsibilityList.dutyTerritory) {
+        this.queryParam.dutyTerritory = this.areaOfResponsibilityList.dutyTerritory
+        this.queryParam = { ...this.queryParam }
+      }
       this.JLoading = true
       this.getHeader()
       this.queryLawEngineerByProjectId()
@@ -1442,10 +1446,6 @@
       this.getRoleByUserId(() => {
         this.getAndUserId()
       })
-      if (this.areaOfResponsibilityList && this.areaOfResponsibilityList.dutyTerritory) {
-        this.queryParam.dutyTerritory = this.areaOfResponsibilityList.dutyTerritory
-        this.queryParam = { ...this.queryParam }
-      }
     },
     computed: {
       columnsFile() {
diff --git a/jero-web/src/views/projectManagement/components/projectStatus.vue b/jero-web/src/views/projectManagement/components/projectStatus.vue
index 71866f40a..0ebef98b0 100644
--- a/jero-web/src/views/projectManagement/components/projectStatus.vue
+++ b/jero-web/src/views/projectManagement/components/projectStatus.vue
@@ -59,7 +59,7 @@
          this.$emit('projectStatusForm',this.activeKey)
       },
       currentStatus(item) {
-        this.$emit('TaskListChange', item)
+        this.$emit('currentStatus', item)
       },
       versionStatisticsClick() {
         this.$refs.versionStatisticsRef.addModel(JSON.parse(JSON.stringify(this.selectedRowKeys)))
diff --git a/jero-web/src/views/projectManagement/components/regulatoryCompliance.vue b/jero-web/src/views/projectManagement/components/regulatoryCompliance.vue
index f07000ca8..834ab877d 100644
--- a/jero-web/src/views/projectManagement/components/regulatoryCompliance.vue
+++ b/jero-web/src/views/projectManagement/components/regulatoryCompliance.vue
@@ -1,15 +1,22 @@
 <template>
   <div class="box-content">
     <div class="box-content-top">
+      <div class="total-text">
+        <span>{{$t('totalTable')+' : '+mainTopNum}}</span>
+      </div>
       <div id="main-top"></div>
     </div>
     <div class="box-content-left">
+      <div class="total-text">
+        <span>{{$t('totalTable')+' : '+mainLeftNum}}</span>
+      </div>
       <div id="main-left"></div>
     </div>
     <div class="box-content-right">
-      <div id="main-right">
-
+      <div class="total-text">
+        <span>{{$t('totalTable')+' : '+mainRightNum}}</span>
       </div>
+      <div id="main-right"> </div>
     </div>
     <responsibilityList @responsibility="responsibility" ref="responsibilityListRef"/>
   </div>
@@ -39,6 +46,9 @@
         url: {
           getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
         },
+        mainTopNum: 0,
+        mainLeftNum: 0,
+        mainRightNum: 0,
         columns: [
           {
             title: this.$t('red'),
@@ -99,14 +109,14 @@
           },
           tooltip: {
             trigger: 'item',
-            textStyle : {
-              fontWeight : 'normal',
-              fontSize : 14,
-              color:'#040B29',
-              fontFamily:'BlueSkyNoto',
+            textStyle: {
+              fontWeight: 'normal',
+              fontSize: 14,
+              color: '#040B29',
+              fontFamily: 'BlueSkyNoto'
             },
-            formatter: function (parms) {
-              let str = parms.marker+' '+parms.data.name+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+parms.data.value+' ('+parms.percent+'%)'
+            formatter: function(parms) {
+              let str = parms.marker + ' ' + parms.data.name + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + parms.data.value + ' (' + parms.percent + '%)'
               return str
             }
           },
@@ -138,26 +148,26 @@
         })
         myChart.on('click', (params) => {
           let query = {}
-          if (params.seriesName == this.$t('regulatoryTaskConfirmation')){
+          if (params.seriesName == this.$t('regulatoryTaskConfirmation')) {
             query = {
               title: params.seriesName,
               projectLibraryId: this.$route.query.id,
               operatorType: 'queryFGTaskToConfirmStatistics',
-              status:params.data.status
+              status: params.data.status
             }
-          }else if(params.seriesName == this.$t('designCompliance')){
+          } else if (params.seriesName == this.$t('designCompliance')) {
             query = {
               title: params.seriesName,
               projectLibraryId: this.$route.query.id,
               operatorType: 'queryDesignStatistics',
-              status:params.data.status
+              status: params.data.status
             }
-          }else if(params.seriesName == this.$t('verifyCompliance')){
+          } else if (params.seriesName == this.$t('verifyCompliance')) {
             query = {
               title: params.seriesName,
               projectLibraryId: this.$route.query.id,
               operatorType: 'queryVerifyStatistics',
-              status:params.data.status
+              status: params.data.status
             }
           }
           this.$refs.responsibilityListRef.getData(query)
@@ -167,6 +177,7 @@
       mainTopEcharts(dataSource) {
         let data = []
         let color = []
+        this.mainTopNum = 0
         if (dataSource && dataSource.length > 0) {
           this.dataSource = [{}]
           dataSource.forEach(res => {
@@ -203,14 +214,16 @@
               })
               color.push('#E83030')
             }
+            this.mainTopNum += res.taskAffirmStatusCount
           })
         }
         this.getEcharts('main-top', this.$t('regulatoryTaskConfirmation'), color, data)
       },
 
-      mainLeftEcharts(dataSource){
+      mainLeftEcharts(dataSource) {
         let data = []
         let color = []
+        this.mainLeftNum = 0
         if (dataSource && dataSource.length > 0) {
           this.dataSource = [{}]
           dataSource.forEach(res => {
@@ -219,7 +232,7 @@
                 value: res.designFlowTaskStatusCount,
                 name: this.$t('notLaunch'),
                 color: '#00B3BE',
-                status:res.designFlowTaskStatus
+                status: res.designFlowTaskStatus
               })
               color.push('#00B3BE')
             } else if (res.designFlowTaskStatus == 'List to confirm') {
@@ -227,7 +240,7 @@
                 value: res.designFlowTaskStatusCount,
                 name: this.$t('listToConfirm'),
                 color: '#FDA71C',
-                status:res.designFlowTaskStatus
+                status: res.designFlowTaskStatus
               })
               color.push('#FDA71C')
             } else if (res.designFlowTaskStatus == 'Compliance') {
@@ -235,7 +248,7 @@
                 value: res.designFlowTaskStatusCount,
                 name: this.$t('compliance'),
                 color: '#26BC4B',
-                status:res.designFlowTaskStatus
+                status: res.designFlowTaskStatus
               })
               color.push('#26BC4B')
             } else if (res.designFlowTaskStatus == 'Non-Compliance') {
@@ -243,18 +256,20 @@
                 value: res.designFlowTaskStatusCount,
                 name: this.$t('nonCompliance'),
                 color: '#707486',
-                status:res.designFlowTaskStatus
+                status: res.designFlowTaskStatus
               })
               color.push('#707486')
             }
+            this.mainLeftNum += res.designFlowTaskStatusCount
           })
         }
         this.getEcharts('main-left', this.$t('designCompliance'), color, data)
       },
 
-      mainRightEcharts(dataSource){
+      mainRightEcharts(dataSource) {
         let data = []
         let color = []
+        this.mainRightNum = 0
         if (dataSource && dataSource.length > 0) {
           this.dataSource = [{}]
           dataSource.forEach(res => {
@@ -263,7 +278,7 @@
                 value: res.verifyFlowTaskStatusCount,
                 name: this.$t('notLaunch'),
                 color: '#00B3BE',
-                status:res.verifyFlowTaskStatus
+                status: res.verifyFlowTaskStatus
               })
               color.push('#00B3BE')
             } else if (res.verifyFlowTaskStatus == 'List to confirm') {
@@ -271,7 +286,7 @@
                 value: res.verifyFlowTaskStatusCount,
                 name: this.$t('listToConfirm'),
                 color: '#FDA71C',
-                status:res.verifyFlowTaskStatus
+                status: res.verifyFlowTaskStatus
               })
               color.push('#FDA71C')
             } else if (res.verifyFlowTaskStatus == 'Compliance') {
@@ -279,7 +294,7 @@
                 value: res.verifyFlowTaskStatusCount,
                 name: this.$t('compliance'),
                 color: '#26BC4B',
-                status:res.verifyFlowTaskStatus
+                status: res.verifyFlowTaskStatus
               })
               color.push('#26BC4B')
             } else if (res.verifyFlowTaskStatus == 'Non-Compliance') {
@@ -287,17 +302,17 @@
                 value: res.verifyFlowTaskStatusCount,
                 name: this.$t('nonCompliance'),
                 color: '#707486',
-                status:res.verifyFlowTaskStatus
+                status: res.verifyFlowTaskStatus
               })
               color.push('#707486')
             }
+            this.mainRightNum += res.verifyFlowTaskStatusCount
           })
         }
         this.getEcharts('main-right', this.$t('verifyCompliance'), color, data)
       },
 
       responsibility(item) {
-        console.log(item)
         this.$emit('currentStatus', item)
       }
     }
@@ -313,6 +328,7 @@
 
     .box-content-top {
       width: 100%;
+      position: relative;
       margin-top: 4px;
       height: 346px;
       border: 2px #eff1f3 solid;
@@ -330,6 +346,7 @@
       width: calc(50% - 10px);
       margin-top: 20px;
       height: 346px;
+      position: relative;
       border: 2px #eff1f3 solid;
       border-radius: 6px;
 
@@ -345,6 +362,7 @@
       width: calc(50% - 10px);
       margin-top: 20px;
       height: 346px;
+      position: relative;
       border-radius: 6px;
       border: 2px #eff1f3 solid;
 
@@ -367,4 +385,12 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  .total-text {
+    position: absolute;
+    right: 28px;
+    top: 19px;
+    font-size: 18px;
+    font-weight: bold;
+  }
 </style>
\ No newline at end of file
diff --git a/jero-web/src/views/projectManagement/components/responsibilityList.vue b/jero-web/src/views/projectManagement/components/responsibilityList.vue
index 16298c695..86259d364 100644
--- a/jero-web/src/views/projectManagement/components/responsibilityList.vue
+++ b/jero-web/src/views/projectManagement/components/responsibilityList.vue
@@ -1,38 +1,39 @@
 <template>
-    <a-modal
-            :title="title"
-            :width="800"
-            :visible="visible"
-            :confirm-loading="confirmLoading"
-            :maskClosable="false"
-            @cancel="visible = false"
+  <a-modal
+    :title="title"
+    :width="800"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    :maskClosable="false"
+    @cancel="visible = false"
+  >
+    <template slot="footer">
+      <a-button key="back" @click="visible = false">
+        {{$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"
+      :components="drag(columns,'columns')"
+      :loading="loading"
+      :pagination="false"
+      :scroll="{x: '100%',y:400}"
+      :data-source="dataSource"
+      @change="tableOnChange"
+      :columns="columns"
     >
-        <template slot="footer">
-            <a-button key="back" @click="visible = false">
-                {{$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"
-                :components="drag(columns,'columns')"
-                :loading="loading"
-                :pagination="false"
-                :scroll="{x: true,y:400}"
-                :data-source="dataSource"
-                :columns="columns"
-        >
-<!--          @click="areaOfResponsibilityClick(result)"-->
-            <span slot="areaOfResponsibility" slot-scope="text,result">
+      <!--         -->
+      <a slot="areaOfResponsibility" @click="areaOfResponsibilityClick(result)" slot-scope="text,result">
                 {{text}}
-            </span>
-        </a-table>
-    </a-modal>
+      </a>
+    </a-table>
+  </a-modal>
 </template>
 
 <script>
@@ -62,6 +63,7 @@
             align: 'left',
             width: 150,
             ellipsis: true,
+            sorter: true,
             scopedSlots: { customRender: 'areaOfResponsibility' }
           },
           {
@@ -69,14 +71,16 @@
             dataIndex: 'amount',
             align: 'left',
             ellipsis: true,
-            width: 150
+            width: 150,
+            sorter: true
           },
           {
-            title: this.$t('proportion'),
+            title: this.$t('proportionWithInTheAreaOfResponsibility'),
             dataIndex: 'percentage',
             align: 'left',
             ellipsis: true,
-            width: 150
+            width: 240,
+            sorter: true
           }
         ]
       }
@@ -88,11 +92,39 @@
         this.visible = true
         this.title = data.title
         this.queryParam = data
-        this.getList(data)
+        this.getList()
       },
-      getList(data) {
+      tableOnChange(pagination, filters, sorter) {
+        this.orderBy = sorter.order == 'ascend' ? '1' : '2'
+        if (sorter.columnKey == 'attestationRank_dictText') {
+          this.orderByField = 'attestationRank'
+        } else if (sorter.columnKey == 'dutyTerritory_dictText') {
+          this.orderByField = 'dutyTerritory'
+        } else if (sorter.columnKey == 'designDeliverableTypeName') {
+          this.orderByField = 'designDeliverableType'
+        } else if (sorter.columnKey == 'verifyDeliverableTypeName') {
+          this.orderByField = 'verifyDeliverableType'
+        } else if (sorter.columnKey == 'designDutyIdName') {
+          this.orderByField = 'designDutyId'
+        } else if (sorter.columnKey == 'verifyDutyIdName') {
+          this.orderByField = 'verifyDutyId'
+        }  else if (sorter.columnKey == 'verifyFlowStatusName') {
+          this.orderByField = 'verifyFlowStatus'
+        }  else if (sorter.columnKey == 'designFlowStatusName') {
+          this.orderByField = 'designFlowStatus'
+        } else {
+          this.orderByField = sorter.columnKey
+        }
+        this.getList()
+      },
+      getList() {
         this.loading = true
-        getAction(this.url.GroupByTerritory, data).then((res) => {
+        let query = {
+           ...this.queryParam,
+          orderBy: this.orderBy,
+          orderByField: this.orderByField,
+        }
+        getAction(this.url.GroupByTerritory, query).then((res) => {
           if (res.success) {
             this.loading = false
             this.dataSource = res.result.dataList || []
@@ -108,14 +140,14 @@
       handleCancel() {
         this.visible = false
       },
-      // areaOfResponsibilityClick(item) {
-      //   if (this.queryParam.operatorType == 'queryFGTaskToConfirmStatistics' ||
-      //     this.queryParam.operatorType == 'queryDesignStatistics' ||
-      //     this.queryParam.operatorType == 'queryVerifyStatistics') {
-      //     item.isListing = '1'
-      //   }
-      //   this.$emit('responsibility', item)
-      // }
+      areaOfResponsibilityClick(item) {
+        if (this.queryParam.operatorType == 'queryFGTaskToConfirmStatistics' ||
+          this.queryParam.operatorType == 'queryDesignStatistics' ||
+          this.queryParam.operatorType == 'queryVerifyStatistics') {
+          item.isListing = '1'
+        }
+        this.$emit('responsibility', item)
+      }
     }
   }
 </script>
diff --git a/jero-web/src/views/projectManagement/components/settingList.vue b/jero-web/src/views/projectManagement/components/settingList.vue
index a247439c7..fe3e42d4e 100644
--- a/jero-web/src/views/projectManagement/components/settingList.vue
+++ b/jero-web/src/views/projectManagement/components/settingList.vue
@@ -11,6 +11,151 @@
     <a-spin :spinning="confirmLoading">
       <a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
         <a-row :gutter="24">
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="title-text-text" title="G0">
+                G0</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="zero">
+                <a-date-picker class="box-input"
+                               :placeholder="$t('PleaseSelect')+'G0'"
+                               @change="dateChange({db_field_name:'zero'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.zero"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="title-text-text" title="G1">
+                G1</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="one">
+                <a-date-picker class="box-input"
+                               :placeholder="$t('PleaseSelect')+'G1'"
+                               @change="dateChange({db_field_name:'one'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.one"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="title-text-text" title="G2">
+                G2</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="two">
+                <a-date-picker class="box-input"
+                               :placeholder="$t('PleaseSelect')+'G2'"
+                               @change="dateChange({db_field_name:'two'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.two"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="title-text-text" title="G3">
+                G3</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="three">
+                <a-date-picker class="box-input"
+                               :placeholder="$t('PleaseSelect')+'G3'"
+                               @change="dateChange({db_field_name:'three'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.three"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="title-text-text" title="G4">
+                G4</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="four">
+                <a-date-picker class="box-input"
+                               :placeholder="$t('PleaseSelect')+'G4'"
+                               @change="dateChange({db_field_name:'four'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.four"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="title-text-text" title="G5">
+                G5</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="five">
+                <a-date-picker class="box-input"
+                               :placeholder="$t('PleaseSelect')+'G5'"
+                               @change="dateChange({db_field_name:'five'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.five"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="title-text-text" title="G6">
+                G6</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="six">
+                <a-date-picker class="box-input"
+                               :placeholder="$t('PleaseSelect')+'G6'"
+                               @change="dateChange({db_field_name:'six'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.six"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="title-text-text" title="G7">
+                G7</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="seven">
+                <a-date-picker class="box-input"
+                               :placeholder="$t('PleaseSelect')+'G7'"
+                               @change="dateChange({db_field_name:'seven'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.seven"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
+            </div>
+          </a-col>
+
           <a-col :span="12">
             <div class="box-title-text">
               <div class="title-text">
@@ -165,150 +310,6 @@
               </a-form-model-item>
             </div>
           </a-col>
-          <a-col :span="12">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="title-text-text" title="G0">
-                G0</span>
-              </div>
-              <a-form-model-item class="itemModel" prop="zero">
-                <a-date-picker class="box-input"
-                               :placeholder="$t('PleaseSelect')+'G0'"
-                               @change="dateChange({db_field_name:'zero'})"
-                               format="YYYY-MM-DD"
-                               :getCalendarContainer="(trigger) => trigger.parentNode"
-                               v-model="formInline.zero"
-                               :disabled="false"
-                               style="width: 100%"/>
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <a-col :span="12">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="title-text-text" title="G1">
-                G1</span>
-              </div>
-              <a-form-model-item class="itemModel" prop="one">
-                <a-date-picker class="box-input"
-                               :placeholder="$t('PleaseSelect')+'G1'"
-                               @change="dateChange({db_field_name:'one'})"
-                               format="YYYY-MM-DD"
-                               :getCalendarContainer="(trigger) => trigger.parentNode"
-                               v-model="formInline.one"
-                               :disabled="false"
-                               style="width: 100%"/>
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <a-col :span="12">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="title-text-text" title="G2">
-                G2</span>
-              </div>
-              <a-form-model-item class="itemModel" prop="two">
-                <a-date-picker class="box-input"
-                               :placeholder="$t('PleaseSelect')+'G2'"
-                               @change="dateChange({db_field_name:'two'})"
-                               format="YYYY-MM-DD"
-                               :getCalendarContainer="(trigger) => trigger.parentNode"
-                               v-model="formInline.two"
-                               :disabled="false"
-                               style="width: 100%"/>
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <a-col :span="12">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="title-text-text" title="G3">
-                G3</span>
-              </div>
-              <a-form-model-item class="itemModel" prop="three">
-                <a-date-picker class="box-input"
-                               :placeholder="$t('PleaseSelect')+'G3'"
-                               @change="dateChange({db_field_name:'three'})"
-                               format="YYYY-MM-DD"
-                               :getCalendarContainer="(trigger) => trigger.parentNode"
-                               v-model="formInline.three"
-                               :disabled="false"
-                               style="width: 100%"/>
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <a-col :span="12">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="title-text-text" title="G4">
-                G4</span>
-              </div>
-              <a-form-model-item class="itemModel" prop="four">
-                <a-date-picker class="box-input"
-                               :placeholder="$t('PleaseSelect')+'G4'"
-                               @change="dateChange({db_field_name:'four'})"
-                               format="YYYY-MM-DD"
-                               :getCalendarContainer="(trigger) => trigger.parentNode"
-                               v-model="formInline.four"
-                               :disabled="false"
-                               style="width: 100%"/>
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <a-col :span="12">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="title-text-text" title="G5">
-                G5</span>
-              </div>
-              <a-form-model-item class="itemModel" prop="five">
-                <a-date-picker class="box-input"
-                               :placeholder="$t('PleaseSelect')+'G5'"
-                               @change="dateChange({db_field_name:'five'})"
-                               format="YYYY-MM-DD"
-                               :getCalendarContainer="(trigger) => trigger.parentNode"
-                               v-model="formInline.five"
-                               :disabled="false"
-                               style="width: 100%"/>
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <a-col :span="12">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="title-text-text" title="G6">
-                G6</span>
-              </div>
-              <a-form-model-item class="itemModel" prop="six">
-                <a-date-picker class="box-input"
-                               :placeholder="$t('PleaseSelect')+'G6'"
-                               @change="dateChange({db_field_name:'six'})"
-                               format="YYYY-MM-DD"
-                               :getCalendarContainer="(trigger) => trigger.parentNode"
-                               v-model="formInline.six"
-                               :disabled="false"
-                               style="width: 100%"/>
-              </a-form-model-item>
-            </div>
-          </a-col>
-          <a-col :span="12">
-            <div class="box-title-text">
-              <div class="title-text">
-                <span class="title-text-text" title="G7">
-                G7</span>
-              </div>
-              <a-form-model-item class="itemModel" prop="seven">
-                <a-date-picker class="box-input"
-                               :placeholder="$t('PleaseSelect')+'G7'"
-                               @change="dateChange({db_field_name:'seven'})"
-                               format="YYYY-MM-DD"
-                               :getCalendarContainer="(trigger) => trigger.parentNode"
-                               v-model="formInline.seven"
-                               :disabled="false"
-                               style="width: 100%"/>
-              </a-form-model-item>
-            </div>
-          </a-col>
         </a-row>
       </a-form-model>
     </a-spin>