diff --git a/jero-web/src/common/lang/en-us.js b/jero-web/src/common/lang/en-us.js
index 90123bff0..40bcf2ee2 100644
--- a/jero-web/src/common/lang/en-us.js
+++ b/jero-web/src/common/lang/en-us.js
@@ -1823,4 +1823,5 @@ module.exports = {
   componentReportSubmitted:'Component report submitted',
   componentReportHasBeenStored:'Component report has been stored',
   parameterCollectionProgress:'Parameter Collection Progress',
+  proportion:'Proportion',
 }
\ 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 550d5af25..b97c3739d 100644
--- a/jero-web/src/common/lang/zh-cn.js
+++ b/jero-web/src/common/lang/zh-cn.js
@@ -1925,4 +1925,5 @@ module.exports = {
   componentReportSubmitted:'部件报告已提交',
   componentReportHasBeenStored:'部件报告已入库',
   parameterCollectionProgress:'参数收集进度',
+  proportion:'占比',
 }
\ No newline at end of file
diff --git a/jero-web/src/views/projectManagement/components/ProjectDetails.vue b/jero-web/src/views/projectManagement/components/ProjectDetails.vue
index 7dfe78a4b..3e894d1f5 100644
--- a/jero-web/src/views/projectManagement/components/ProjectDetails.vue
+++ b/jero-web/src/views/projectManagement/components/ProjectDetails.vue
@@ -118,19 +118,19 @@
       </div>
     </div>
     <div class="process-content">
-
-      <div style="display: flex;justify-content: space-between">
-        <div class="process-content-content" v-for="(item,index) in regulatoryCertificationTaskPlanList" :key="index">
-          <img v-if="item.status == 1" src="../../../assets/wancheng.png" class="process-content-left" alt="">
-          <img v-else-if="item.status == 2" src="../../../assets/shijian.png" class="process-content-left" alt="">
-          <img v-else-if="item.status == 3" src="../../../assets/xian.png" class="process-content-left" alt="">
-          <div class="process-content-right">
-            <div class="process-content-right-top" :title="item.name">{{item.name}}</div>
-            <div class="process-content-right-button">{{item.time?item.time.slice(0,11): item.time}}</div>
-          </div>
-        </div>
-      </div>
-      <div class="process-content-right-xian"></div>
+      <complianceCertificationForm ref="complianceCertificationRef"/>
+<!--      <div style="display: flex;justify-content: space-between">-->
+<!--        <div class="process-content-content" v-for="(item,index) in regulatoryCertificationTaskPlanList" :key="index">-->
+<!--          <img v-if="item.status == 1" src="../../../assets/wancheng.png" class="process-content-left" alt="">-->
+<!--          <img v-else-if="item.status == 2" src="../../../assets/shijian.png" class="process-content-left" alt="">-->
+<!--          <img v-else-if="item.status == 3" src="../../../assets/xian.png" class="process-content-left" alt="">-->
+<!--          <div class="process-content-right">-->
+<!--            <div class="process-content-right-top" :title="item.name">{{item.name}}</div>-->
+<!--            <div class="process-content-right-button">{{item.time?item.time.slice(0,11): item.time}}</div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="process-content-right-xian"></div>-->
     </div>
     <div class="box-text" style="margin-top: 10px">
       <div class="header-text">
@@ -164,6 +164,7 @@
   import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
   import addModel from './addModel'
   import versionStatistics from './versionStatistics'
+  import complianceCertificationForm from './complianceCertificationForm'
   import settingList from './settingList'
   import projectStatus from './projectStatus'
   import { mapGetters } from 'vuex'
@@ -175,7 +176,8 @@
       addModel,
       settingList,
       projectStatus,
-      versionStatistics
+      versionStatistics,
+      complianceCertificationForm
     },
     data() {
       return {
@@ -199,7 +201,6 @@
     },
     mounted() {
       this.getForm()
-      this.getSetting()
       this.administrators = false
       this.activeKey = this.$t('regulatoryComplianceManagement')
       if (this.userInfo().userRoleList && this.userInfo().userRoleList.length > 0) {
@@ -230,17 +231,8 @@
       currentStatus(item) {
         this.$emit('TaskListChange', item)
       },
-      getSetting() {
-        getAction(this.url.queryByProjectId, { projectId: this.$route.query.id }).then((res) => {
-          if (res.success) {
-            this.regulatoryCertificationTaskPlanList = res.result || []
-          } else {
-            this.regulatoryCertificationTaskPlanList = []
-          }
-        })
-      },
       settingListForm() {
-        this.getSetting()
+        this.$refs.complianceCertificationRef.getSetting()
       },
       ListOfRelevantPersonnelClick() {
         this.$refs.listOfRelevantPersonnelRef.getData()
diff --git a/jero-web/src/views/projectManagement/components/complianceCertificationForm.vue b/jero-web/src/views/projectManagement/components/complianceCertificationForm.vue
new file mode 100644
index 000000000..37465169d
--- /dev/null
+++ b/jero-web/src/views/projectManagement/components/complianceCertificationForm.vue
@@ -0,0 +1,298 @@
+<template>
+  <div class="box-top-content-right">
+    <div class="box-top-content-right-bottom">
+      <div class="process-content" v-if="timeData && timeData.length > 0">
+        <div class="process-content-right-xian"></div>
+        <div class="process-content-right-xian-color"></div>
+        <div class="process-content-right-xian-one"></div>
+        <div class="process-content-content" :style="val.left"
+             v-for="(val,indexOne) in timeData" :key="indexOne">
+          <div class="process-content-right-top" :title="val.name">{{ val.name }}</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>
+            </template>
+            <img v-if="val.status == 1" src="../../../assets/heiTop.png" class="process-content-left"
+                 alt="">
+            <img v-else-if="val.status == 2" src="../../../assets/kongTop.png"
+                 class="process-content-left"
+                 alt="">
+            <img v-else-if="val.status == 3" src="../../../assets/shiTop.png" class="process-content-left"
+                 alt="">
+          </a-tooltip>
+
+          <!--                <div class="process-content-right-button">{{val.time.slice(0,11)}}</div>-->
+        </div>
+        <div class="process-content-contentOne" :style="val.left"
+             v-for="(val,indexTwo) in timeData">
+          <!--                  <div class="process-content-right-top" v-if="indexOne % 2 == 0" :title="val.name">{{ val.name }}</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>
+            </template>
+            <img v-if="val.status == 1" src="../../../assets/huiBottom.png" class="process-content-left"
+                 alt="">
+            <img v-else-if="val.status == 2" src="../../../assets/kongBottom.png"
+                 class="process-content-left"
+                 alt="">
+            <img v-else-if="val.status == 3" src="../../../assets/shiBottom.png" class="process-content-left"
+                 alt="">
+          </a-tooltip>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
+
+  export default {
+    name: 'complianceCertificationForm',
+    data() {
+      return {
+        regulatoryCertificationTaskPlanList: [],
+        timeData: [],
+        url: {
+          queryByProjectId: 'project/projectTaskPlanning/queryByProjectId'
+        }
+      }
+    },
+    mounted() {
+      this.getSetting()
+    },
+    methods: {
+      //传入 YYYY-MM , YYYY-MM  (2020-09)  (2020-12)  返回 YYYY-MM 数组
+      getYearAndMonth(start, end) {
+        let result = [];
+        let starts = start.split('-');
+        let ends = end.split('-');
+        let staYear = parseInt(starts[0]);
+        let staMon = parseInt(starts[1]);
+        let endYear = parseInt(ends[0]);
+        let endMon = parseInt(ends[1]);
+        while (staYear <= endYear) {
+          if (staYear === endYear) {
+            while (staMon < endMon) {
+              staMon++;
+              var str = staYear + '-'+(staMon >= 10 ? staMon : '0' + staMon);
+              result.push(str);
+            }
+            staYear++;
+          } else {
+            staMon++;
+            if (staMon > 12) {
+              staMon = 1;
+              staYear++;
+            }
+            let str = staYear + '-'+(staMon >= 10 ? staMon : '0' + staMon);
+            result.push(str);
+          }
+        }
+        return result;
+      },
+      getSetting() {
+        getAction(this.url.queryByProjectId, { projectId: this.$route.query.id }).then((res) => {
+          if (res.success) {
+            this.timeData = res.result || []
+            let startTime = ''
+            let endTime = ''
+            if (this.timeData.length > 0) {
+              startTime = this.timeData[0].time.slice(0, 7)
+              endTime = this.timeData[this.timeData.length - 1].time.slice(0, 7)
+              let monDiff = this.getYearAndMonth(startTime, endTime)
+              monDiff.unshift(startTime)
+              setTimeout(() => {
+                let dataList = document.getElementsByClassName('box-top-content-right-bottom')
+                let clientWidth = dataList[0].clientWidth
+                clientWidth = clientWidth / monDiff.length
+                for (let i = 0; i < monDiff.length; i++) {
+                  for (let j = 0; j < this.timeData.length; j++) {
+                    let num = (Math.floor(clientWidth / 30 * 10000)/10000) * parseInt(this.timeData[j].time.slice(8, 10))
+                    if (this.timeData[j].time.slice(0, 7) == monDiff[i]) {
+                      this.timeData[j].left = 'left:' + ((clientWidth * i + num) - 10) + 'px'
+                    }
+                  }
+                }
+                console.log(this.timeData)
+                this.timeData = [...this.timeData]
+              }, 500)
+            }
+          } else {
+            this.regulatoryCertificationTaskPlanList = []
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+
+  .box-top-content-right {
+    width: 100%;
+    padding: 0 24px;
+    box-sizing: border-box;
+  }
+
+  .box-top-content-right-bottom {
+    position: relative;
+    /*padding-top: 50px;*/
+  }
+
+  .process-content {
+    position: relative;
+    height: 110px;
+    /*overflow:hidden;*/
+
+    .process-content-content {
+      background: transparent;
+      z-index: 98;
+      /*padding: 0 6px;*/
+      position: absolute;
+      left: 40px;
+      text-align: center;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      margin-top: 37px;
+
+      .process-content-left {
+        width: 16px;
+        height: 16px;
+        /*margin-top: 5px;*/
+      }
+
+      .process-content-right-top {
+        font-size: 12px;
+        color: #040B29;
+        width: 83px;
+        background: #fff;
+        display: inline-block;
+        position: absolute;
+        top: -15px;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        overflow: hidden;
+        display: -webkit-box;
+        text-overflow: ellipsis;
+        /*! autoprefixer: off */
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        /*! autoprefixer: on;*/
+        text-justify: inter-ideograph;
+        word-break: break-all
+      }
+
+      .process-content-right-button {
+        width: 83px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #6F7385;
+        position: absolute;
+        left: 50%;
+        top: 36px;
+        transform: translate(-50%, -50%);
+        overflow: hidden;
+        display: -webkit-box;
+        text-overflow: ellipsis;
+        /*! autoprefixer: off */
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        /*! autoprefixer: on;*/
+        text-justify: inter-ideograph;
+        word-break: break-all
+      }
+    }
+
+    .process-content-contentOne {
+      background: transparent;
+      z-index: 98;
+      /*padding: 0 6px;*/
+      position: absolute;
+      left: 40px;
+      text-align: center;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      margin-top: 63px;
+
+      .process-content-left {
+        width: 12px;
+        height: 12px;
+        /*margin-top: 5px;*/
+      }
+
+      .process-content-right-top {
+        font-size: 12px;
+        color: #040B29;
+        width: 83px;
+        background: #fff;
+        display: inline-block;
+        overflow: hidden;
+        position: absolute;
+        top: -12px;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        overflow: hidden;
+        display: -webkit-box;
+        text-overflow: ellipsis;
+        /*! autoprefixer: off */
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        /*! autoprefixer: on;*/
+        text-justify: inter-ideograph;
+        word-break: break-all
+      }
+
+      .process-content-right-button {
+        width: 83px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #6F7385;
+        position: absolute;
+        left: 50%;
+        top: 36px;
+        transform: translate(-50%, -50%);
+        overflow: hidden;
+        display: -webkit-box;
+        text-overflow: ellipsis;
+        /*! autoprefixer: off */
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        /*! autoprefixer: on;*/
+        text-justify: inter-ideograph;
+        word-break: break-all
+      }
+    }
+
+    .process-content-right-xian {
+      height: 1px;
+      width: 100%;
+      background: #00B3BE;
+      position: absolute;
+      top: 48px;
+    }
+
+    .process-content-right-xian-color {
+      height: 28px;
+      width: 100%;
+      position: absolute;
+      top: 48px;
+      background: linear-gradient(90deg, rgba(0, 179, 190, 0.12) 0%, rgba(4, 11, 41, 0.02) 100%);
+      transform: matrix(-1, 0, 0, 1, 0, 0);
+    }
+
+    .process-content-right-xian-one {
+      height: 1px;
+      width: 100%;
+      background: #00B3BE;
+      position: absolute;
+      top: 74px;
+    }
+  }
+</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 8fe9a1de0..7be4a77f8 100644
--- a/jero-web/src/views/projectManagement/components/responsibilityList.vue
+++ b/jero-web/src/views/projectManagement/components/responsibilityList.vue
@@ -68,7 +68,14 @@
             dataIndex: 'amount',
             align: 'left',
             ellipsis: true,
-            width: 300
+            width: 150
+          },
+          {
+            title: this.$t('proportion'),
+            dataIndex: 'percentage',
+            align: 'left',
+            ellipsis: true,
+            width: 150
           }
         ]
       }
diff --git a/jero-web/src/views/projectManagement/projectStatusBoard/index.vue b/jero-web/src/views/projectManagement/projectStatusBoard/index.vue
index eb39c74d3..9ec232d63 100644
--- a/jero-web/src/views/projectManagement/projectStatusBoard/index.vue
+++ b/jero-web/src/views/projectManagement/projectStatusBoard/index.vue
@@ -483,7 +483,7 @@
           for (let i = 0; i < timeData.length; i++) {
             for (let j = 0; j < timeData[i].data[0].length; j++) {
               for (let k = 0; k < dataList.length; k++) {
-                let num = (Math.ceil(clientWidth / 30)) * parseInt(timeData[i].data[0][j].time.slice(8, 10))
+                let num = (Math.floor(clientWidth / 30 * 10000)/10000) * parseInt(timeData[i].data[0][j].time.slice(8, 10))
                 timeList.forEach((res, index) => {
                   if (timeData[i].data[0][j].time.slice(0, 7) == res.slice(0, 7)) {
                     timeData[i].data[0][j].left = 'left:' + ((clientWidth * index + num) - 10) + 'px'
@@ -509,8 +509,8 @@
           })
 
           this.timeData = timeData
-          console.log(this.timeData)
           this.timeData = [...this.timeData]
+          console.log(this.timeData)
           this.loadingMain = false
         }, 500)
 
@@ -754,14 +754,23 @@
       .process-content-right-top {
         font-size: 12px;
         color: #040B29;
-        width: 75px;
+        width: 83px;
         background: #fff;
         display: inline-block;
         overflow: hidden;
         position: absolute;
-        top: -12px;
+        top: -15px;
         left: 50%;
         transform: translate(-50%, -50%);
+        overflow: hidden;
+        display: -webkit-box;
+        text-overflow: ellipsis;
+        /*! autoprefixer: off */
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        /*! autoprefixer: on;*/
+        text-justify: inter-ideograph;
+        word-break: break-all
       }
 
       .process-content-right-button {
@@ -770,11 +779,19 @@
         width: 75px;
         background: #fff;
         display: inline-block;
-        overflow: hidden;
         position: absolute;
         top: 12px;
         left: 50%;
         transform: translate(-50%, -50%);
+        overflow: hidden;
+        display: -webkit-box;
+        text-overflow: ellipsis;
+        /*! autoprefixer: off */
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        /*! autoprefixer: on;*/
+        text-justify: inter-ideograph;
+        word-break: break-all
       }
 
       .process-content-right-button {
@@ -810,7 +827,7 @@
       .process-content-right-top {
         font-size: 12px;
         color: #040B29;
-        width: 75px;
+        width: 83px;
         background: #fff;
         display: inline-block;
         overflow: hidden;
@@ -818,30 +835,35 @@
         top: -12px;
         left: 50%;
         transform: translate(-50%, -50%);
+        display: -webkit-box;
+        text-overflow: ellipsis;
+        /*! autoprefixer: off */
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        /*! autoprefixer: on;*/
+        text-justify: inter-ideograph;
+        word-break: break-all
       }
 
       .process-content-right-button {
-        font-size: 12px;
-        color: #040B29;
-        width: 75px;
-        background: #fff;
-        display: inline-block;
-        overflow: hidden;
-        position: absolute;
-        top: 12px;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-
-      .process-content-right-button {
-        width: 75px;
+        width: 83px;
         font-size: 12px;
         font-weight: 400;
         color: #6F7385;
         position: absolute;
+        background: #fff;
         left: 50%;
-        top: 34px;
+        top: 36px;
         transform: translate(-50%, -50%);
+        overflow: hidden;
+        display: -webkit-box;
+        text-overflow: ellipsis;
+        /*! autoprefixer: off */
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        /*! autoprefixer: on;*/
+        text-justify: inter-ideograph;
+        word-break: break-all
       }
     }
 
@@ -870,7 +892,7 @@
   }
 
   .box-top-content-right-xian {
-    height: 120%;
+    height: 101%;
     border-left: 1px #D92E2E solid;
     position: absolute;
     top: -42px;