diff --git a/jero-web/src/views/projectManagement/components/certificationActivity.vue b/jero-web/src/views/projectManagement/components/certificationActivity.vue
index b34fa45b3..a8033f9ba 100644
--- a/jero-web/src/views/projectManagement/components/certificationActivity.vue
+++ b/jero-web/src/views/projectManagement/components/certificationActivity.vue
@@ -97,34 +97,38 @@
               data.push({
                 value: res.taskAffirmStatusCount,
                 name: this.$t('notLaunch'),
-                color: '#00B3BE'
+                color: '#00B3BE',
+                status:res.taskAffirmStatus
               })
               color.push('#00B3BE')
             } else if (res.taskAffirmStatus == 'List to confirm') {
               data.push({
                 value: res.taskAffirmStatusCount,
                 name: this.$t('listToConfirm'),
-                color: '#FDA71C'
+                color: '#FDA71C',
+                status:res.taskAffirmStatus
               })
               color.push('#FDA71C')
             } else if (res.taskAffirmStatus == 'Accepted') {
               data.push({
                 value: res.taskAffirmStatusCount,
                 name: this.$t('accept'),
-                color: '#26BC4B'
+                color: '#26BC4B',
+                status:res.taskAffirmStatus
               })
               color.push('#26BC4B')
             } else if (res.taskAffirmStatus == 'Rejected') {
               data.push({
                 value: res.taskAffirmStatusCount,
                 name: this.$t('refuse'),
-                color: '#E83030'
+                color: '#E83030',
+                status:res.taskAffirmStatus
               })
               color.push('#E83030')
             }
           })
         }
-        this.getEcharts('main-left', this.$t('regulatoryTaskConfirmation'), color, data)
+        this.getEcharts('main-left', this.$t('certificationTaskConfirmation'), color, data)
       },
       mainRightEcharts(dataSource){
         let data = []
@@ -136,28 +140,32 @@
               data.push({
                 value: res.taskAffirmStatusCount,
                 name: this.$t('notLaunch'),
-                color: '#00B3BE'
+                color: '#00B3BE',
+                status:res.taskAffirmStatus
               })
               color.push('#00B3BE')
             } else if (res.taskAffirmStatus == 'List to confirm') {
               data.push({
                 value: res.taskAffirmStatusCount,
                 name: this.$t('listToConfirm'),
-                color: '#FDA71C'
+                color: '#FDA71C',
+                status:res.taskAffirmStatus
               })
               color.push('#FDA71C')
             } else if (res.taskAffirmStatus == 'Review and pass') {
               data.push({
                 value: res.taskAffirmStatusCount,
                 name: this.$t('reviewAndPass'),
-                color: '#26BC4B'
+                color: '#26BC4B',
+                status:res.taskAffirmStatus
               })
               color.push('#26BC4B')
             } else if (res.taskAffirmStatus == 'Review and return') {
               data.push({
                 value: res.taskAffirmStatusCount,
                 name: this.$t('reviewAndReturn'),
-                color: '#E83030'
+                color: '#E83030',
+                status:res.taskAffirmStatus
               })
               color.push('#E83030')
             }
@@ -174,49 +182,56 @@
               data.push({
                 value: res.certificationProgressCount,
                 name: this.$t('Notatthe'),
-                color: '#00B3BE'
+                color: '#00B3BE',
+                status:res.certificationProgress
               })
               color.push('#00B3BE')
             } else if (res.certificationProgress == 'In progress') {
               data.push({
                 value: res.certificationProgressCount,
                 name: this.$t('inProgress'),
-                color: '#FDA71C'
+                color: '#FDA71C',
+                status:res.certificationProgress
               })
               color.push('#FDA71C')
             } else if (res.certificationProgress == 'Test passed') {
               data.push({
                 value: res.certificationProgressCount,
                 name: this.$t('experimentPassed'),
-                color: '#26BC4B'
+                color: '#26BC4B',
+                status:res.certificationProgress
               })
               color.push('#26BC4B')
             } else if (res.certificationProgress == 'Test failed') {
               data.push({
                 value: res.certificationProgressCount,
                 name: this.$t('experimentFailed'),
-                color: '#E83030'
+                color: '#E83030',
+                status:res.certificationProgress
               })
               color.push('#E83030')
             }else if (res.certificationProgress == 'Component report not submitted') {
               data.push({
                 value: res.certificationProgressCount,
                 name: this.$t('componentReportNotSubmitted'),
-                color: '#FDA71C'
+                color: '#FDA71C',
+                status:res.certificationProgress
               })
               color.push('#FDA71C')
             }else if (res.certificationProgress == 'Component report submitted') {
               data.push({
                 value: res.certificationProgressCount,
                 name: this.$t('componentReportSubmitted'),
-                color: '#6FD682'
+                color: '#6FD682',
+                status:res.certificationProgress
               })
               color.push('#6FD682')
             }else if (res.certificationProgress == 'Component report has been stored') {
               data.push({
                 value: res.certificationProgressCount,
                 name: this.$t('componentReportHasBeenStored'),
-                color: '#26BC4B'
+                color: '#26BC4B',
+                status:res.certificationProgress
               })
               color.push('#26BC4B')
             }
@@ -264,22 +279,16 @@
             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
-          // }
+          if (params.seriesName === this.$t('certificationTaskConfirmation')) {
+            query.operatorType = 'queryRZTaskToConfirmStatistics'
+            query.status = params.data.status
+          } else if (params.seriesName === this.$t('preHomoFlow')) {
+            query.operatorType = 'queryPrehomoStatistics'
+            query.status = params.data.status
+          } else if (params.seriesName === this.$t('CertificationProgress')) {
+            query.operatorType = 'queryCertificationProgressStatistics'
+            query.status = params.data.status
+          }
           this.$refs.responsibilityListRef.getData(query)
         })
       },
@@ -313,7 +322,8 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    margin-bottom: 20px;
+    flex-wrap: wrap;
+    /*margin-bottom: 20px;*/
 
     .box-content-left {
       width: calc(50% - 10px);
@@ -351,6 +361,7 @@
       border: 2px #eff1f3 solid;
       position: relative;
       border-radius: 6px;
+      margin-top: 20px;
 
       .box-content-text {
         height: 30px;
diff --git a/jero-web/src/views/projectManagement/components/regulatoryCompliance.vue b/jero-web/src/views/projectManagement/components/regulatoryCompliance.vue
index a1a783b49..a5164fc8a 100644
--- a/jero-web/src/views/projectManagement/components/regulatoryCompliance.vue
+++ b/jero-web/src/views/projectManagement/components/regulatoryCompliance.vue
@@ -127,11 +127,28 @@
           ]
         })
         myChart.on('click', (params) => {
-          let query = {
-            title: params.seriesName,
-            projectLibraryId: this.$route.query.id,
-            operatorType: 'queryCurrentProjectStatusStatistics',
-            conditionAssessment: params.data.color
+          let query = {}
+          if (params.seriesName == this.$t('regulatoryTaskConfirmation')){
+            query = {
+              title: params.seriesName,
+              projectLibraryId: this.$route.query.id,
+              operatorType: 'queryFGTaskToConfirmStatistics',
+              status:params.data.status
+            }
+          }else if(params.seriesName == this.$t('designCompliance')){
+            query = {
+              title: params.seriesName,
+              projectLibraryId: this.$route.query.id,
+              operatorType: 'queryDesignStatistics',
+              status:params.data.status
+            }
+          }else if(params.seriesName == this.$t('verifyCompliance')){
+            query = {
+              title: params.seriesName,
+              projectLibraryId: this.$route.query.id,
+              operatorType: 'queryVerifyStatistics',
+              status:params.data.status
+            }
           }
           this.$refs.responsibilityListRef.getData(query)
         })
@@ -147,28 +164,32 @@
               data.push({
                 value: res.taskAffirmStatusCount,
                 name: this.$t('notLaunch'),
-                color: '#00B3BE'
+                color: '#00B3BE',
+                status: res.taskAffirmStatus
               })
               color.push('#00B3BE')
             } else if (res.taskAffirmStatus == 'List to confirm') {
               data.push({
                 value: res.taskAffirmStatusCount,
                 name: this.$t('listToConfirm'),
-                color: '#FDA71C'
+                color: '#FDA71C',
+                status: res.taskAffirmStatus
               })
               color.push('#FDA71C')
             } else if (res.taskAffirmStatus == 'Accepted') {
               data.push({
                 value: res.taskAffirmStatusCount,
                 name: this.$t('accept'),
-                color: '#26BC4B'
+                color: '#26BC4B',
+                status: res.taskAffirmStatus
               })
               color.push('#26BC4B')
             } else if (res.taskAffirmStatus == 'Rejected') {
               data.push({
                 value: res.taskAffirmStatusCount,
                 name: this.$t('refuse'),
-                color: '#E83030'
+                color: '#E83030',
+                status: res.taskAffirmStatus
               })
               color.push('#E83030')
             }
@@ -187,28 +208,32 @@
               data.push({
                 value: res.designFlowTaskStatusCount,
                 name: this.$t('notLaunch'),
-                color: '#00B3BE'
+                color: '#00B3BE',
+                status:res.designFlowTaskStatus
               })
               color.push('#00B3BE')
             } else if (res.designFlowTaskStatus == 'List to confirm') {
               data.push({
                 value: res.designFlowTaskStatusCount,
                 name: this.$t('listToConfirm'),
-                color: '#FDA71C'
+                color: '#FDA71C',
+                status:res.designFlowTaskStatus
               })
               color.push('#FDA71C')
             } else if (res.designFlowTaskStatus == 'Compliance') {
               data.push({
                 value: res.designFlowTaskStatusCount,
                 name: this.$t('compliance'),
-                color: '#26BC4B'
+                color: '#26BC4B',
+                status:res.designFlowTaskStatus
               })
               color.push('#26BC4B')
             } else if (res.designFlowTaskStatus == 'Non-Compliance') {
               data.push({
                 value: res.designFlowTaskStatusCount,
                 name: this.$t('nonCompliance'),
-                color: '#707486'
+                color: '#707486',
+                status:res.designFlowTaskStatus
               })
               color.push('#707486')
             }
@@ -227,28 +252,32 @@
               data.push({
                 value: res.verifyFlowTaskStatusCount,
                 name: this.$t('notLaunch'),
-                color: '#00B3BE'
+                color: '#00B3BE',
+                status:res.verifyFlowTaskStatus
               })
               color.push('#00B3BE')
             } else if (res.verifyFlowTaskStatus == 'List to confirm') {
               data.push({
                 value: res.verifyFlowTaskStatusCount,
                 name: this.$t('listToConfirm'),
-                color: '#FDA71C'
+                color: '#FDA71C',
+                status:res.verifyFlowTaskStatus
               })
               color.push('#FDA71C')
             } else if (res.verifyFlowTaskStatus == 'Compliance') {
               data.push({
                 value: res.verifyFlowTaskStatusCount,
                 name: this.$t('compliance'),
-                color: '#26BC4B'
+                color: '#26BC4B',
+                status:res.verifyFlowTaskStatus
               })
               color.push('#26BC4B')
             } else if (res.verifyFlowTaskStatus == 'Non-Compliance') {
               data.push({
                 value: res.verifyFlowTaskStatusCount,
                 name: this.$t('nonCompliance'),
-                color: '#707486'
+                color: '#707486',
+                status:res.verifyFlowTaskStatus
               })
               color.push('#707486')
             }
diff --git a/jero-web/src/views/projectManagement/components/responsibilityList.vue b/jero-web/src/views/projectManagement/components/responsibilityList.vue
index d49d20017..8fe9a1de0 100644
--- a/jero-web/src/views/projectManagement/components/responsibilityList.vue
+++ b/jero-web/src/views/projectManagement/components/responsibilityList.vue
@@ -1,37 +1,37 @@
 <template>
-  <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: true,y:400}"
-      :data-source="dataSource"
-      :columns="columns"
+    <a-modal
+            :title="title"
+            :width="800"
+            :visible="visible"
+            :confirm-loading="confirmLoading"
+            :maskClosable="false"
+            @cancel="visible = false"
     >
-      <a slot="areaOfResponsibility" slot-scope="text,result" @click="areaOfResponsibilityClick(result)">
-        {{text}}
-      </a>
-    </a-table>
-  </a-modal>
+        <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"
+        >
+            <a slot="areaOfResponsibility" slot-scope="text,result" @click="areaOfResponsibilityClick(result)">
+                {{text}}
+            </a>
+        </a-table>
+    </a-modal>
 </template>
 
 <script>
@@ -41,7 +41,7 @@
 
   export default {
     name: 'responsibilityList',
-    mixins:[ResizeHeader, ResizeColumnProvide],
+    mixins: [ResizeHeader, ResizeColumnProvide],
     data() {
       return {
         visible: false,
@@ -101,9 +101,10 @@
         this.visible = false
       },
       areaOfResponsibilityClick(item) {
-        if (this.queryParam.operatorType == 'queryListingToConfirmStatistics' ||
-                this.queryParam.operatorType == 'queryTaskToConfirmStatistics'){
-            item.isListing = '1'
+        if (this.queryParam.operatorType == 'queryFGTaskToConfirmStatistics' ||
+          this.queryParam.operatorType == 'queryDesignStatistics' ||
+          this.queryParam.operatorType == 'queryVerifyStatistics') {
+          item.isListing = '1'
         }
         this.$emit('responsibility', item)
       }
diff --git a/jero-web/src/views/projectManagement/components/settingList.vue b/jero-web/src/views/projectManagement/components/settingList.vue
index e06252266..a8cda90c8 100644
--- a/jero-web/src/views/projectManagement/components/settingList.vue
+++ b/jero-web/src/views/projectManagement/components/settingList.vue
@@ -1,172 +1,178 @@
 <template>
-  <a-modal
+  <a-drawer
     :title="$t('setting')"
-    :width="1100"
-    :visible="visible"
-    :confirm-loading="confirmLoading"
     :maskClosable="false"
-    @ok="handleOk"
-    @cancel="handleCancel"
-  >
-    <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="Required">*</span>-->
-              <span class="title-text-text" :title="$t('listPublishing')">
+    :width="1000"
+    placement="right"
+    :closable="true"
+    @close="handleCancel"
+    :visible="visible"
+    style="height: 100%;overflow: auto;padding-bottom: 53px;">
+    <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="Required">*</span>-->
+                <span class="title-text-text" :title="$t('listPublishing')">
                 {{$t('listPublishing')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="listConfirmation">
+                <a-date-picker class="box-input"
+                               :placeholder="$t('PleaseSelect')+$t('listPublishing')+$t('time')"
+                               @change="dateChange({db_field_name:'listConfirmation'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.listConfirmation"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
             </div>
-            <a-form-model-item class="itemModel" prop="listConfirmation">
-              <a-date-picker class="box-input"
-                             :placeholder="$t('PleaseSelect')+$t('listPublishing')+$t('time')"
-                             @change="dateChange({db_field_name:'listConfirmation'})"
-                             format="YYYY-MM-DD"
-                             :getCalendarContainer="(trigger) => trigger.parentNode"
-                             v-model="formInline.listConfirmation"
-                             :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="Required">*</span>-->
-              <span class="title-text-text" :title="$t('responsibilityConfirmation')">
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <!--              <span class="Required">*</span>-->
+                <span class="title-text-text" :title="$t('responsibilityConfirmation')">
                 {{$t('responsibilityConfirmation')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="legalTaskConfirmation">
+                <a-date-picker class="box-input"
+                               :placeholder="$t('PleaseSelect')+$t('responsibilityConfirmation')+$t('time')"
+                               @change="dateChange({db_field_name:'legalTaskConfirmation'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.legalTaskConfirmation"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
             </div>
-            <a-form-model-item class="itemModel" prop="legalTaskConfirmation">
-              <a-date-picker class="box-input"
-                             :placeholder="$t('PleaseSelect')+$t('responsibilityConfirmation')+$t('time')"
-                             @change="dateChange({db_field_name:'legalTaskConfirmation'})"
-                             format="YYYY-MM-DD"
-                             :getCalendarContainer="(trigger) => trigger.parentNode"
-                             v-model="formInline.legalTaskConfirmation"
-                             :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="Required">*</span>-->
-              <span class="title-text-text" :title="$t('designVerification')">
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <!--              <span class="Required">*</span>-->
+                <span class="title-text-text" :title="$t('designVerification')">
                 {{$t('designVerification')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="designDeadline">
+                <a-date-picker class="box-input"
+                               :placeholder="$t('PleaseSelect')+$t('designVerification')+$t('time')"
+                               @change="dateChange({db_field_name:'designDeadline'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.designDeadline"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
             </div>
-            <a-form-model-item class="itemModel" prop="designDeadline">
-              <a-date-picker class="box-input"
-                             :placeholder="$t('PleaseSelect')+$t('designVerification')+$t('time')"
-                             @change="dateChange({db_field_name:'designDeadline'})"
-                             format="YYYY-MM-DD"
-                             :getCalendarContainer="(trigger) => trigger.parentNode"
-                             v-model="formInline.designDeadline"
-                             :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="Required">*</span>-->
-              <span class="title-text-text" :title="$t('getStarted')">
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <!--              <span class="Required">*</span>-->
+                <span class="title-text-text" :title="$t('getStarted')">
                 {{$t('getStarted')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="prehomoDeadline">
+                <a-date-picker class="box-input"
+                               :placeholder="$t('PleaseSelect')+$t('getStarted')+$t('time')"
+                               @change="dateChange({db_field_name:'prehomoDeadline'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.prehomoDeadline"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
             </div>
-            <a-form-model-item class="itemModel" prop="prehomoDeadline">
-              <a-date-picker class="box-input"
-                             :placeholder="$t('PleaseSelect')+$t('getStarted')+$t('time')"
-                             @change="dateChange({db_field_name:'prehomoDeadline'})"
-                             format="YYYY-MM-DD"
-                             :getCalendarContainer="(trigger) => trigger.parentNode"
-                             v-model="formInline.prehomoDeadline"
-                             :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="Required">*</span>-->
-              <span class="title-text-text" :title="$t('certificationStartOne')">
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <!--              <span class="Required">*</span>-->
+                <span class="title-text-text" :title="$t('certificationStartOne')">
                 {{$t('certificationStartOne')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="attestationStartTime">
+                <a-date-picker class="box-input"
+                               :disabledDate='this.disabledRegistrationStartDate'
+                               :placeholder="$t('PleaseSelect')+$t('certificationStartOne')+$t('time')"
+                               @change="dateChange({db_field_name:'attestationStartTime'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.attestationStartTime"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
             </div>
-            <a-form-model-item class="itemModel" prop="attestationStartTime">
-              <a-date-picker class="box-input"
-                             :disabledDate='this.disabledRegistrationStartDate'
-                             :placeholder="$t('PleaseSelect')+$t('certificationStartOne')+$t('time')"
-                             @change="dateChange({db_field_name:'attestationStartTime'})"
-                             format="YYYY-MM-DD"
-                             :getCalendarContainer="(trigger) => trigger.parentNode"
-                             v-model="formInline.attestationStartTime"
-                             :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="Required">*</span>-->
-              <span class="title-text-text" :title="$t('certificationSubmission')">
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <!--              <span class="Required">*</span>-->
+                <span class="title-text-text" :title="$t('certificationSubmission')">
                 {{$t('certificationSubmission')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="certificationSubmission">
+                <a-date-picker class="box-input"
+                               :placeholder="$t('PleaseSelect')+$t('certificationSubmission')+$t('time')"
+                               @change="dateChange({db_field_name:'certificationSubmission'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.certificationSubmission"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
             </div>
-            <a-form-model-item class="itemModel" prop="certificationSubmission">
-              <a-date-picker class="box-input"
-                             :placeholder="$t('PleaseSelect')+$t('certificationSubmission')+$t('time')"
-                             @change="dateChange({db_field_name:'certificationSubmission'})"
-                             format="YYYY-MM-DD"
-                             :getCalendarContainer="(trigger) => trigger.parentNode"
-                             v-model="formInline.certificationSubmission"
-                             :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="Required">*</span>-->
-              <span class="title-text-text" :title="$t('certificationEnd')">
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <!--              <span class="Required">*</span>-->
+                <span class="title-text-text" :title="$t('certificationEnd')">
                 {{$t('certificationEnd')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="attestationEndTime">
+                <a-date-picker class="box-input"
+                               :disabledDate='this.disabledRegistrationEndDate'
+                               :placeholder="$t('PleaseSelect')+$t('certificationEnd')+$t('time')"
+                               @change="dateChange({db_field_name:'attestationEndTime'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.attestationEndTime"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
             </div>
-            <a-form-model-item class="itemModel" prop="attestationEndTime">
-              <a-date-picker class="box-input"
-                             :disabledDate='this.disabledRegistrationEndDate'
-                             :placeholder="$t('PleaseSelect')+$t('certificationEnd')+$t('time')"
-                             @change="dateChange({db_field_name:'attestationEndTime'})"
-                             format="YYYY-MM-DD"
-                             :getCalendarContainer="(trigger) => trigger.parentNode"
-                             v-model="formInline.attestationEndTime"
-                             :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="Required">*</span>-->
-              <span class="title-text-text" :title="$t('verificationAndVerification')">
+          </a-col>
+          <a-col :span="12">
+            <div class="box-title-text">
+              <div class="title-text">
+                <!--              <span class="Required">*</span>-->
+                <span class="title-text-text" :title="$t('verificationAndVerification')">
                 {{$t('verificationAndVerification')}}</span>
+              </div>
+              <a-form-model-item class="itemModel" prop="verifyDeadline">
+                <a-date-picker class="box-input"
+                               :placeholder="$t('PleaseSelect')+$t('verificationAndVerification')+$t('time')"
+                               @change="dateChange({db_field_name:'verifyDeadline'})"
+                               format="YYYY-MM-DD"
+                               :getCalendarContainer="(trigger) => trigger.parentNode"
+                               v-model="formInline.verifyDeadline"
+                               :disabled="false"
+                               style="width: 100%"/>
+              </a-form-model-item>
             </div>
-            <a-form-model-item class="itemModel" prop="verifyDeadline">
-              <a-date-picker class="box-input"
-                             :placeholder="$t('PleaseSelect')+$t('verificationAndVerification')+$t('time')"
-                             @change="dateChange({db_field_name:'verifyDeadline'})"
-                             format="YYYY-MM-DD"
-                             :getCalendarContainer="(trigger) => trigger.parentNode"
-                             v-model="formInline.verifyDeadline"
-                             :disabled="false"
-                             style="width: 100%"/>
-            </a-form-model-item>
-          </div>
-        </a-col>
-      </a-row>
-    </a-form-model>
-  </a-modal>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </a-spin>
+    <div class="drawer-bootom-button">
+      <a-button style="margin-right: .8rem" @click="handleCancel">{{$t('cancel')}}</a-button>
+      <a-button @click="handleOk" type="primary" :loading="confirmLoading">{{$t('submit')}}</a-button>
+    </div>
+  </a-drawer>
 </template>
 
 <script>
@@ -366,7 +372,7 @@
   }
 
   .title-text {
-    width: 144px;
+    width: 106px;
     text-align: right;
     display: inline-block;
     font-weight: 500;
@@ -403,4 +409,17 @@
     color: red;
     margin-right: 3px;
   }
+
+  .drawer-bootom-button {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    border-top: 1px solid #e8e8e8;
+    padding: 10px 16px;
+    text-align: right;
+    left: 0;
+    z-index: 100;
+    background: #fff;
+    border-radius: 0 0 2px 2px;
+  }
 </style>
\ No newline at end of file