对接项目库详情的项目状态

jero-web/src/common/lang/en-us.js

@@ -1813,4 +1813,7 @@ module.exports = {
   certificationActivityManagement:'Certification Activity Management',
   parameterCollectionProgressManagement:'Parameter Collection Progress Management',
   certificationTaskConfirmation:'Certification Task Confirmation',
+  selectTime:'Select Time',
+  designCompliance:'Design Compliance',
+  verifyCompliance:'Verify Compliance',
 }

jero-web/src/common/lang/zh-cn.js

@@ -1915,4 +1915,7 @@ module.exports = {
   certificationActivityManagement:'认证活动管理',
   parameterCollectionProgressManagement:'参数收集进度管理',
   certificationTaskConfirmation:'认证任务确认',
+  selectTime:'选择时间',
+  designCompliance:'设计符合性',
+  verifyCompliance:'验证符合性',
 }

jero-web/src/views/projectManagement/components/regulatoryCompliance.vue

@@ -36,7 +36,6 @@
     data() {
       return {
         loading: false,
-        currentProjectStatusTotal: 0,
         url: {
           getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
         },
@@ -82,9 +81,12 @@
         getAction(this.url.getProjectDetailsStatistics, { id: id }).then((res) => {
           if (res.success) {
             if (res.result) {
-              let dataSource = res.result.currentProjectStatusMap ? res.result.currentProjectStatusMap.currentProjectStatusMapList : []
+              let mainTopDataSource = res.result.taskToConfirmMap ? res.result.taskToConfirmMap.taskToConfirmMapList : []
-              this.mainLeftEcharts(dataSource)
+              let mainLeftDataSource = res.result.designComplianceMap ? res.result.designComplianceMap.designComplianceMapList : []
-              this.currentProjectStatusTotal = res.result.currentProjectStatusMap ? res.result.currentProjectStatusMap.currentProjectStatusTotal : 0
+              let mainRightDataSource = res.result.verifyComplianceMap ? res.result.verifyComplianceMap.verifyComplianceMapList : []
+              this.mainTopEcharts(mainTopDataSource)
+              this.mainLeftEcharts(mainLeftDataSource)
+              this.mainRightEcharts(mainRightDataSource)
             }
           }
         })
@@ -124,61 +126,137 @@
             }
           ]
         })
-        myChart.on('click', (params) => {
+        // myChart.on('click', (params) => {
-          let query = {
+        //   let query = {
-            title: params.seriesName,
+        //     title: params.seriesName,
-            projectLibraryId: this.$route.query.id,
+        //     projectLibraryId: this.$route.query.id,
-            operatorType: 'queryCurrentProjectStatusStatistics',
+        //     operatorType: 'queryCurrentProjectStatusStatistics',
-            conditionAssessment: params.data.color
+        //     conditionAssessment: params.data.color
-          }
+        //   }
-          this.$refs.responsibilityListRef.getData(query)
+        //   this.$refs.responsibilityListRef.getData(query)
-        })
+        // })
       },
+
+      mainTopEcharts(dataSource) {
+        let data = []
+        let color = []
+        if (dataSource && dataSource.length > 0) {
+          this.dataSource = [{}]
+          dataSource.forEach(res => {
+            if (res.taskAffirmStatus == 'Not started') {
+              data.push({
+                value: res.taskAffirmStatusCount,
+                name: this.$t('notLaunch'),
+                color: '#00B3BE'
+              })
+              color.push('#00B3BE')
+            } else if (res.taskAffirmStatus == 'List to confirm') {
+              data.push({
+                value: res.taskAffirmStatusCount,
+                name: this.$t('listToConfirm'),
+                color: '#FDA71C'
+              })
+              color.push('#FDA71C')
+            } else if (res.taskAffirmStatus == 'Accepted') {
+              data.push({
+                value: res.taskAffirmStatusCount,
+                name: this.$t('accept'),
+                color: '#26BC4B'
+              })
+              color.push('#26BC4B')
+            } else if (res.taskAffirmStatus == 'Rejected') {
+              data.push({
+                value: res.taskAffirmStatusCount,
+                name: this.$t('refuse'),
+                color: '#E83030'
+              })
+              color.push('#E83030')
+            }
+          })
+        }
+        this.getEcharts('main-top', this.$t('regulatoryTaskConfirmation'), color, data)
+      },
+
       mainLeftEcharts(dataSource){
         let data = []
         let color = []
         if (dataSource && dataSource.length > 0) {
           this.dataSource = [{}]
           dataSource.forEach(res => {
-            if (res.color == '4') {
+            if (res.designFlowTaskStatus == 'Not started') {
               data.push({
-                value: res.conditionAssessmentCount,
+                value: res.designFlowTaskStatusCount,
-                name: this.$t('blue'),
+                name: this.$t('notLaunch'),
-                color: res.color
+                color: '#00B3BE'
               })
               color.push('#00B3BE')
-              this.dataSource[0].blueCount = res.conditionAssessmentCount
+            } else if (res.designFlowTaskStatus == 'List to confirm') {
-            } else if (res.color == '1') {
               data.push({
-                value: res.conditionAssessmentCount,
+                value: res.designFlowTaskStatusCount,
-                name: this.$t('red'),
+                name: this.$t('listToConfirm'),
-                color: res.color
+                color: '#FDA71C'
-              })
-              color.push('#E83030')
-              this.dataSource[0].redCount = res.conditionAssessmentCount
-            } else if (res.color == '2') {
-              data.push({
-                value: res.conditionAssessmentCount,
-                name: this.$t('yellow'),
-                color: res.color
               })
               color.push('#FDA71C')
-              this.dataSource[0].yellowCount = res.conditionAssessmentCount
+            } else if (res.designFlowTaskStatus == 'Compliance') {
-            } else if (res.color == '3') {
               data.push({
-                value: res.conditionAssessmentCount,
+                value: res.designFlowTaskStatusCount,
-                name: this.$t('green'),
+                name: this.$t('compliance'),
-                color: res.color
+                color: '#26BC4B'
               })
-              this.dataSource[0].greenCount = res.conditionAssessmentCount
+              color.push('#26BC4B')
-              color.push('#26BD4B')
+            } else if (res.designFlowTaskStatus == 'Non-Compliance') {
+              data.push({
+                value: res.designFlowTaskStatusCount,
+                name: this.$t('nonCompliance'),
+                color: '#707486'
+              })
+              color.push('#707486')
             }
           })
         }
-        this.getEcharts('main-left', this.$t('regulatoryTaskConfirmation'), color, data)
+        this.getEcharts('main-left', this.$t('designCompliance'), color, data)
-        this.getEcharts('main-right', this.$t('regulatoryTaskConfirmation'), color, data)
-        this.getEcharts('main-top', this.$t('regulatoryTaskConfirmation'), color, data)
       },
+
+      mainRightEcharts(dataSource){
+        let data = []
+        let color = []
+        if (dataSource && dataSource.length > 0) {
+          this.dataSource = [{}]
+          dataSource.forEach(res => {
+            if (res.verifyFlowTaskStatus == 'Not started') {
+              data.push({
+                value: res.verifyFlowTaskStatusCount,
+                name: this.$t('notLaunch'),
+                color: '#00B3BE'
+              })
+              color.push('#00B3BE')
+            } else if (res.verifyFlowTaskStatus == 'List to confirm') {
+              data.push({
+                value: res.verifyFlowTaskStatusCount,
+                name: this.$t('listToConfirm'),
+                color: '#FDA71C'
+              })
+              color.push('#FDA71C')
+            } else if (res.verifyFlowTaskStatus == 'Compliance') {
+              data.push({
+                value: res.verifyFlowTaskStatusCount,
+                name: this.$t('compliance'),
+                color: '#26BC4B'
+              })
+              color.push('#26BC4B')
+            } else if (res.verifyFlowTaskStatus == 'Non-Compliance') {
+              data.push({
+                value: res.verifyFlowTaskStatusCount,
+                name: this.$t('nonCompliance'),
+                color: '#707486'
+              })
+              color.push('#707486')
+            }
+          })
+        }
+        this.getEcharts('main-right', this.$t('verifyCompliance'), color, data)
+      },
+
       responsibility(item) {
         this.$emit('currentStatus', item)
       }

jero-web/src/views/projectManagement/projectStatusBoard/index.vue

@@ -3,7 +3,7 @@
     <div class="table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
-          <a-col :md="6" :sm="8">
+          <a-col :md="5" :sm="8">
             <div class="box-title-text">
               <div class="title-text" :title="$t('entryName')">
                 <span>{{ $t('entryName') }}</span>
@@ -12,7 +12,7 @@
                        v-model="queryParam.projectName"></j-input>
             </div>
           </a-col>
-          <a-col :md="6" :sm="8">
+          <a-col :md="5" :sm="8">
             <div class="box-title-text">
               <div class="title-text" :title="$t('targetMarket')">
                 <span>{{ $t('targetMarket') }}</span>
@@ -23,7 +23,7 @@
                                  :triggerChange="false" :dictCode="'region'"/>
             </div>
           </a-col>
-          <a-col :md="6" :sm="8">
+          <a-col :md="5" :sm="8">
             <div class="box-title-text">
               <div class="title-text" :title="$t('brand')">
                 <span>{{ $t('brand') }}</span>
@@ -34,23 +34,15 @@
                                  :triggerChange="false" :dictCode="'brand'"/>
             </div>
           </a-col>
-          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
+          <a-col :md="5" :sm="8">
-               <a-col :md="6" :sm="24">
+            <div class="box-title-text">
-                  <a-button class="box-button"
+              <div class="title-text" :title="$t('selectTime')">
-                            @click="searchReset">{{ $t('reset') }}</a-button>
+                <span>{{ $t('selectTime') }}</span>
-                  <a-button style="margin-left: 8px" class="box-button" type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
-               </a-col>
-        </span>
-        </a-row>
-      </a-form>
               </div>
-    <div class="box-top">
-      <span class="box-top-text">{{ $t('regulatoryCertificationTaskPlan') }}</span>
-      <span class="box-top-text fullScreenView" @click="TaskPlanListClick">{{ $t('fullScreenView') }}</span>
-      <span style="float: right" class="box-top-text-right">
               <a-range-picker
                 :placeholder="[this.$t('startMonth'), this.$t('endMonth')]"
                 format="YYYY-MM"
+                class="box-input"
                 v-model="getTime"
                 :mode="mode2"
                 :open="open"
@@ -64,6 +56,23 @@
                   </div>
                 </div>
               </a-range-picker>
+            </div>
+          </a-col>
+          <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
+               <a-col :md="4" :sm="24">
+                  <a-button class="box-button"
+                            @click="searchReset">{{ $t('reset') }}</a-button>
+                  <a-button style="margin-left: 8px" class="box-button" type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
+               </a-col>
+        </span>
+        </a-row>
+      </a-form>
+    </div>
+    <div class="box-top">
+      <!--      <span class="box-top-text">{{ $t('regulatoryCertificationTaskPlan') }}</span>-->
+      <!--      <span class="box-top-text fullScreenView" @click="TaskPlanListClick">{{ $t('fullScreenView') }}</span>-->
+      <span style="float: right" class="box-top-text-right">
+
       </span>
       <div class="box-top-content" style="position: relative">
         <!--        <div id="main"></div>-->
@@ -90,21 +99,42 @@
             <div class="box-top-content-right-bottom">
               <div class="process-content" v-for="(item,index) in timeData" :key="index">
                 <div class="process-content-right-xian"></div>
+                <div class="process-content-right-xian-one"></div>
                 <div class="process-content-content" :style="val.left"
                      v-for="(val,indexOne) in item.data[0]" :key="indexOne">
-                  <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.name">{{ val.name }}</div>
-                  <div class="process-content-right-button" v-if="indexOne % 2 == 1" :title="val.name">{{ val.name }}
+                  <!--                  <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 item.data[0]">
+                  <!--                  <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/done.svg" class="process-content-left"
+                    <img v-if="val.status == 1" src="../../../assets/huiBottom.png" class="process-content-left"
                          alt="">
-                    <img v-else-if="val.status == 2" src="../../../assets/open.svg"
+                    <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/inprogress.svg" class="process-content-left"
+                    <img v-else-if="val.status == 3" src="../../../assets/shiBottom.png" class="process-content-left"
                          alt="">
                   </a-tooltip>
 
@@ -121,57 +151,57 @@
         <JLoading :loading="loadingMain">{{ this.$t('dataLoading') }}</JLoading>
       </div>
     </div>
-    <div class="box-bottom">
+    <!--    <div class="box-bottom">-->
-      <span class="box-top-text">{{ $t('projectStatusAndProgress') }}</span>
+    <!--      <span class="box-top-text">{{ $t('projectStatusAndProgress') }}</span>-->
-      <span class="box-top-text fullScreenView" @click="projectNameClick">{{ $t('fullScreenView') }}</span>
+    <!--      <span class="box-top-text fullScreenView" @click="projectNameClick">{{ $t('fullScreenView') }}</span>-->
-      <div>
+    <!--      <div>-->
-        <a-table
+    <!--        <a-table-->
-          ref="table"
+    <!--          ref="table"-->
-          size="middle"
+    <!--          size="middle"-->
-          :components="drag(columns,'columns')"
+    <!--          :components="drag(columns,'columns')"-->
-          :loading="loading"
+    <!--          :loading="loading"-->
-          :pagination="false"
+    <!--          :pagination="false"-->
-          :scroll="{x: '100%',y:500}"
+    <!--          :scroll="{x: '100%',y:500}"-->
-          :data-source="dataSource"
+    <!--          :data-source="dataSource"-->
-          :columns="columns"
+    <!--          :columns="columns"-->
-        >
+    <!--        >-->
-          <span slot="projectStatusTitle">
+    <!--          <span slot="projectStatusTitle">-->
-               <span>{{ this.$t('CurrentStatusOfTheProject') }}</span><br />
+    <!--               <span>{{ this.$t('CurrentStatusOfTheProject') }}</span><br />-->
-               <span>{{ '(' + $t('red') + '/' + $t('yellow') + '/' + $t('green') + '/' + $t('blue') + ')' }}</span>
+    <!--               <span>{{ '(' + $t('red') + '/' + $t('yellow') + '/' + $t('green') + '/' + $t('blue') + ')' }}</span>-->
-          </span>
+    <!--          </span>-->
-          <span slot="CertificationProgressTitle">
+    <!--          <span slot="CertificationProgressTitle">-->
-               <span>{{ this.$t('CertificationProgress') }}</span><br />
+    <!--               <span>{{ this.$t('CertificationProgress') }}</span><br />-->
-               <span>{{ '(' + $t('notInvolved') + '/' + $t('toBeStarted') + '/' + $t('inProgress') + '/' + $t('experimentFailed') + '/' + $t('experimentPassed') + ')'
+    <!--               <span>{{ '(' + $t('notInvolved') + '/' + $t('toBeStarted') + '/' + $t('inProgress') + '/' + $t('experimentFailed') + '/' + $t('experimentPassed') + ')'-->
-                 }}</span>
+    <!--                 }}</span>-->
-          </span>
+    <!--          </span>-->
-          <span slot="listConfirmationStatusTitle">
+    <!--          <span slot="listConfirmationStatusTitle">-->
-               <span>{{ this.$t('listConfirmation') }}</span><br />
+    <!--               <span>{{ this.$t('listConfirmation') }}</span><br />-->
-               <span>{{ '(' + $t('notLaunch') + '/' + $t('toBeConfirmed') + '/' + $t('accept') + '/' + $t('refuse') + ')'
+    <!--               <span>{{ '(' + $t('notLaunch') + '/' + $t('toBeConfirmed') + '/' + $t('accept') + '/' + $t('refuse') + ')'-->
-                 }}</span>
+    <!--                 }}</span>-->
-          </span>
+    <!--          </span>-->
-          <span slot="taskAffirmStatusTitle">
+    <!--          <span slot="taskAffirmStatusTitle">-->
-              <span>{{ this.$t('taskAffirm') }}</span><br />
+    <!--              <span>{{ this.$t('taskAffirm') }}</span><br />-->
-              <span>{{ '(' + $t('notLaunch') + '/' + $t('toBeConfirmed') + '/' + $t('accept') + '/' + $t('refuse') + ')'
+    <!--              <span>{{ '(' + $t('notLaunch') + '/' + $t('toBeConfirmed') + '/' + $t('accept') + '/' + $t('refuse') + ')'-->
-                }}</span>
+    <!--                }}</span>-->
-          </span>
+    <!--          </span>-->
-          <span slot="designComplianceReviewTitle">
+    <!--          <span slot="designComplianceReviewTitle">-->
-               <span>{{ this.$t('designComplianceReview') }}</span><br />
+    <!--               <span>{{ this.$t('designComplianceReview') }}</span><br />-->
-              <span>{{ '(' + $t('toBeConfirmed') + '/' + $t('accord') + '/' + $t('nonConformity') + '/' + $t('Tracked') + '/' + $t('notInvolved') + '/' + $t('taskTermination') + ')'
+    <!--              <span>{{ '(' + $t('toBeConfirmed') + '/' + $t('accord') + '/' + $t('nonConformity') + '/' + $t('Tracked') + '/' + $t('notInvolved') + '/' + $t('taskTermination') + ')'-->
-                }}</span>
+    <!--                }}</span>-->
-          </span>
+    <!--          </span>-->
-          <span slot="preHomeConfirmationTitle">
+    <!--          <span slot="preHomeConfirmationTitle">-->
-             <span>{{ this.$t('preHomeConfirmation') }}</span><br />
+    <!--             <span>{{ this.$t('preHomeConfirmation') }}</span><br />-->
-             <span>{{ '(' + $t('toBeConfirmed') + '/' + $t('accord') + '/' + $t('nonConformity') + '/' + $t('Tracked') + '/' + $t('notInvolved') + '/' + $t('taskTermination') + ')'
+    <!--             <span>{{ '(' + $t('toBeConfirmed') + '/' + $t('accord') + '/' + $t('nonConformity') + '/' + $t('Tracked') + '/' + $t('notInvolved') + '/' + $t('taskTermination') + ')'-->
-               }}</span>
+    <!--               }}</span>-->
-          </span>
+    <!--          </span>-->
-          <span slot="verificationComplianceReviewTitle">
+    <!--          <span slot="verificationComplianceReviewTitle">-->
-             <span>{{ this.$t('verificationComplianceReview') }}</span><br />
+    <!--             <span>{{ this.$t('verificationComplianceReview') }}</span><br />-->
-             <span>{{ '(' + $t('toBeConfirmed') + '/' + $t('accord') + '/' + $t('nonConformity') + '/' + $t('Tracked') + '/' + $t('notInvolved') + '/' + $t('taskTermination') + ')'
+    <!--             <span>{{ '(' + $t('toBeConfirmed') + '/' + $t('accord') + '/' + $t('nonConformity') + '/' + $t('Tracked') + '/' + $t('notInvolved') + '/' + $t('taskTermination') + ')'-->
-               }}</span>
+    <!--               }}</span>-->
-          </span>
+    <!--          </span>-->
-        </a-table>
+    <!--        </a-table>-->
-      </div>
+    <!--      </div>-->
-    </div>
+    <!--    </div>-->
   </a-card>
 </template>
 
@@ -275,6 +305,7 @@ export default {
       this.getList()
       this.getTimeline()
       this.handlingTime = moment(new Date()).format('YYYY-MM-DD')
+      // this.handlingTime = '2023-04-30'
     },
     methods: {
       getNewDate(flag, many) {
@@ -360,13 +391,13 @@ export default {
       },
       okChange() {
         this.open = false
-      this.getTimeline()
+        // this.getTimeline()
       },
       hodeChange() {
         this.getTime = []
         this.startTime = undefined
         this.endTime = undefined
-      this.getTimeline()
+        // this.getTimeline()
       },
       panelChange(value, mode) {
         this.getTime = value
@@ -451,10 +482,10 @@ export default {
           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 / 31)) * parseInt(timeData[i].data[0][j].time.slice(8, 10))
+                let num = (Math.ceil(clientWidth / 30)) * 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) - 16) + 'px'
+                    timeData[i].data[0][j].left = 'left:' + ((clientWidth * index + num) - 10) + 'px'
                   }
                 })
               }
@@ -464,11 +495,15 @@ export default {
           contentRightXian[0].style = 'display:none'
           let clientWidthOne = dataList[0].clientWidth
           clientWidthOne = clientWidthOne / length
-        let num = Math.ceil(clientWidthOne / 31) * parseInt(this.handlingTime.slice(8, 10))
+          let num = (Math.floor(clientWidthOne / 30 * 10000)/10000) * parseInt(this.handlingTime.slice(8, 10))
           timeList.forEach((res, index) => {
             if (res.slice(0, 7) == this.handlingTime.slice(0, 7)) {
-            contentRightText[0].style = 'left:' + ((clientWidthOne * index + num) - 24) + 'px;' + 'display:block'
+              if (timeList.length - 1 == index) {
-            contentRightXian[0].style = 'left:' + ((clientWidthOne * index + num) + 10) + 'px;' + 'display:block'
+                contentRightText[0].style = 'left:' + ((clientWidthOne * index + num)-84) + 'px;' + 'display:block;border-radius: 2px 0 2px 2px;'
+              }else{
+                contentRightText[0].style = 'left:' + ((clientWidthOne * index + num)+2) + 'px;' + 'display:block;border-radius: 2px 2px 2px 0;'
+              }
+              contentRightXian[0].style = 'left:' + ((clientWidthOne * index + num)+2) + 'px;' + 'display:block'
             }
           })
 
@@ -491,6 +526,9 @@ export default {
       },
       searchReset() {
         this.queryParam = {}
+        this.getTime = []
+        this.startTime = undefined
+        this.endTime = undefined
         this.getTimeline()
         this.getList()
       },
@@ -519,26 +557,29 @@ export default {
           query: item
         })
         window.open(newUrl.href, '_blank')
-    },
+      }
     }
   }
 </script>
 <style>
   .box-top-text-right .ant-calendar-picker-input {
-  height: 38px;
+    height: 10px;
     width: 300px;
   }
 
   .ant-calendar-footer-btn .ant-calendar-footer-extra {
     float: right;
   }
+
   .overlayClassName .ant-tooltip-inner {
     color: #fff !important;
     background-color: rgba(0, 0, 0, 0.75) !important;
   }
+
   .overlayClassName .ant-tooltip-arrow::before {
     background-color: rgba(0, 0, 0, 0.75) !important;
   }
+
   .overlayClassName {
     max-width: 500px !important;
   }
@@ -586,7 +627,7 @@ export default {
     width: 100%;
     height: 500px;
     margin-bottom: 20px;
-  padding: 0 58px 20px 10px;
+    padding: 0 0 20px 10px;
     box-sizing: border-box;
     overflow: auto;
   }
@@ -615,7 +656,7 @@ export default {
   .box-top-text-right {
     display: inline-block;
     float: right;
-  height: 38px;
+    height: 10px;
     width: 300px;
     margin-top: -4px;
   }
@@ -627,17 +668,17 @@ export default {
   }
 
   .box-top-content-left {
-  width: 140px;
+    width: 119px;
     float: left;
-  padding-top: 57px;
+    padding-top: 52px;
-  margin-right: 20px;
+    margin-right: 16px;
   }
 
   .box-top-content-left-text {
     color: #191E29;
     font-weight: bold;
     font-size: 12px;
-  height: 84px;
+    height: 110px;
     letter-spacing: 0px;
     text-align: left;
     text-overflow: ellipsis;
@@ -646,7 +687,7 @@ export default {
   }
 
   .box-top-content-right {
-  width: calc(100% - 160px);
+    width: calc(100% - 135px);
     float: left;
   }
 
@@ -658,8 +699,8 @@ export default {
     top: 0;
     background: #fff;
     z-index: 100;
-  padding-top: 20px;
+    padding-top: 34px;
-  padding-left: 160px;
+    padding-left: 135px;
   }
 
   .box-top-content-right-top-text {
@@ -683,12 +724,13 @@ export default {
 
   .box-top-content-right-bottom {
     position: relative;
-  padding-top: 50px;
+    /*padding-top: 50px;*/
   }
 
   .process-content {
     position: relative;
-  height: 84px;
+    height: 110px;
+    /*overflow:hidden;*/
 
     .process-content-content {
       background: #fff;
@@ -697,14 +739,70 @@ export default {
       position: absolute;
       left: 40px;
       text-align: center;
-    width: 24px;
+      width: 16px;
-    height: 24px;
+      height: 16px;
       border-radius: 50%;
-    margin-top: 5px;
+      margin-top: 37px;
 
       .process-content-left {
-      width: 24px;
+        width: 16px;
-      height: 24px;
+        height: 16px;
+        /*margin-top: 5px;*/
+      }
+
+      .process-content-right-top {
+        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 {
+        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;
+        font-size: 12px;
+        font-weight: 400;
+        color: #6F7385;
+        position: absolute;
+        left: 50%;
+        top: 34px;
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .process-content-contentOne {
+      background: #fff;
+      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;*/
       }
 
@@ -747,31 +845,44 @@ export default {
     }
 
     .process-content-right-xian {
-    height: 2px;
+      height: 1px;
       width: 100%;
       background: #E6E6E9;
       position: absolute;
-    top: 16px;
+      top: 48px;
+    }
+
+    .process-content-right-xian-one {
+      height: 1px;
+      width: 100%;
+      background: #E6E6E9;
+      position: absolute;
+      top: 74px;
     }
   }
 
   .box-top-content-right-xian {
-  width: 2px;
+    height: 120%;
-  height: 100%;
+    border-left: 1px #D92E2E solid;
-  border: 1px #21c9cc dashed;
     position: absolute;
-  top: -36px;
+    top: -42px;
     z-index: 999;
   }
 
   .box-top-content-right-text {
     position: absolute;
-  top: -60px;
+    top: -68px;
-  color: #21c9cc;
+    color: #E63030;
     font-weight: bold;
-  font-size: 14px;
+    font-size: 12px;
-  width: 100px;
+    text-align: center;
+    width: 87px;
     z-index: 101;
+    height: 27px;
+    line-height: 22px;
+    background: rgba(230, 48, 48, 0.1);
+    border: 1px solid #E63030;
+    border-radius: 2px 2px 2px 0;
   }
 
   /deep/ .ant-table-column-title {