Merge remote-tracking branch 'origin/dev_20230424_TJ' into dev_20230424_TJ

2023-04-24 17:21:08 +08:00
parent 02654bd47d f953d9c6b1
commit 0e918df557
9 changed files with 111 additions and 442 deletions
@@ -1809,4 +1809,8 @@ module.exports = {
  upgradeOrNot:'Upgrade or not',
  operationRecords:'Operation Records',
  versionUpdatedRecord:'Version Updated Record',
+  regulatoryComplianceManagement:'Regulatory Compliance Management',
+  certificationActivityManagement:'Certification Activity Management',
+  parameterCollectionProgressManagement:'Parameter Collection Progress Management',
+  certificationTaskConfirmation:'Certification Task Confirmation',
 }
@@ -1911,4 +1911,8 @@ module.exports = {
  upgradeOrNot:'是否升版',
  operationRecords:'操作记录',
  versionUpdatedRecord:'版本更新记录',
+  regulatoryComplianceManagement:'法规符合性管理',
+  certificationActivityManagement:'认证活动管理',
+  parameterCollectionProgressManagement:'参数收集进度管理',
+  certificationTaskConfirmation:'认证任务确认',
 }
@@ -103,13 +103,13 @@
            <a-icon type="profile"/>
            {{$t('TaskParameterCollection')}}
          </div>
-          <div class="Virtual-detail-left-text"
-               :title="$t('projectStatus')"
-               v-has="'projectLawsInventory:ProjectStatus'"
-               @click="textClick(5,$t('projectStatus'))">
-            <a-icon type="cluster"/>
-            {{$t('projectStatus')}}
-          </div>
+<!--          <div class="Virtual-detail-left-text"-->
+<!--               :title="$t('projectStatus')"-->
+<!--               v-has="'projectLawsInventory:ProjectStatus'"-->
+<!--               @click="textClick(5,$t('projectStatus'))">-->
+<!--            <a-icon type="cluster"/>-->
+<!--            {{$t('projectStatus')}}-->
+<!--          </div>-->
          <a-icon @click="textIconClick" type="menu-fold" class="text-icon"/>
        </div>
        <div v-if="!isDisplay" class="Virtual-detail-left-One">
@@ -143,12 +143,12 @@
               @click="textClick(4,$t('TaskParameterCollection'))">
            <a-icon type="profile"/>
          </div>
-          <div class="Virtual-detail-left-text"
-               :title="$t('projectStatus')"
-               v-has="'projectLawsInventory:ProjectStatus'"
-               @click="textClick(5,$t('projectStatus'))">
-            <a-icon type="cluster"/>
-          </div>
+<!--          <div class="Virtual-detail-left-text"-->
+<!--               :title="$t('projectStatus')"-->
+<!--               v-has="'projectLawsInventory:ProjectStatus'"-->
+<!--               @click="textClick(5,$t('projectStatus'))">-->
+<!--            <a-icon type="cluster"/>-->
+<!--          </div>-->
          <a-icon @click="textIconClick" type="menu-unfold" class="text-icon-one"/>
        </div>
        <div class="Virtual-detail-right"
@@ -159,12 +159,12 @@
                             @getRoleSwitch="getRoleSwitch"
                             @getRoleSwitchingList="getRoleSwitchingList"
                             :areaOfResponsibilityList="areaOfResponsibilityList"/>
-          <TaskList :isDisplayNum="isDisplayNum" :areaOfResponsibility="areaOfResponsibility"
-                    v-else-if="textTitle === $t('taskList')"/>
+<!--          <TaskList :isDisplayNum="isDisplayNum" :areaOfResponsibility="areaOfResponsibility"-->
+<!--                    v-else-if="textTitle === $t('taskList')"/>-->
          <TaskParameterCollection v-else-if="textTitle === $t('TaskParameterCollection')"/>
          <nonConformance v-else-if="textTitle === $t('nonConformance')"/>
-          <projectStatus @TaskListChange="TaskListChange"
-                         v-else-if="textTitle === $t('projectStatus')"/>
+<!--          <projectStatus @TaskListChange="TaskListChange"-->
+<!--                         v-else-if="textTitle === $t('projectStatus')"/>-->
          <certificationList ref="certificationListRef"
                             :isDisplayNum="isDisplayNum"
                             @getRoleSwitch="getRoleSwitch"
@@ -28,23 +28,8 @@
        <span class="text-field-right" :title="queryForm.projectStatus_dictText"
        >{{queryForm.projectStatus_dictText}}</span>
      </div>
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" :title="$t('targetMarket')">{{$t('targetMarket')}}</span>-->
-<!--        <span class="text-field-right" :title="queryForm.targetMarket_dictText"-->
-<!--        >{{queryForm.targetMarket_dictText}}</span>-->
-<!--      </div>-->
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" :title="$t('projectVersion')">{{$t('projectVersion')}}</span>-->
-<!--        <span class="text-field-right" :title="queryForm.projectVersion"-->
-<!--        >{{queryForm.projectVersion}}</span>-->
-<!--      </div>-->
    </div>
    <div class="content-text">
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" :title="$t('projectStatus')">{{$t('projectStatus')}}</span>-->
-<!--        <span class="text-field-right" :title="queryForm.projectStatus_dictText"-->
-<!--        >{{queryForm.projectStatus_dictText}}</span>-->
-<!--      </div>-->
      <div class="text-field">
        <span class="text-field-left" :title="$t('StudioEngineer')">{{$t('StudioEngineer')}}</span>
        <span class="text-field-right" :title="queryForm.studioEngineerName"
@@ -84,18 +69,6 @@
        <span class="text-field-right" :title="queryForm.softwareVersion"
        >{{queryForm.softwareVersion}}</span>
      </div>
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" :title="$t('IPDInformation')">{{$t('IPDInformation')}}</span>-->
-<!--        <span class="text-field-right text-field-right-color"-->
-<!--              :title="queryForm.ipdInfo"-->
-<!--              @click="urlClick(queryForm.ipdInfo)"-->
-<!--        >{{queryForm.ipdInfo}}</span>-->
-<!--      </div>-->
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" :title="$t('brand')">{{$t('brand')}}</span>-->
-<!--        <span class="text-field-right" :title="queryForm.brandText"-->
-<!--        >{{queryForm.brandText}}</span>-->
-<!--      </div>-->
    </div>
    <div class="content-text">
      <div class="text-field">
@@ -127,33 +100,6 @@
        >{{queryForm.explanation}}</span>
      </div>
    </div>
-<!--    <div class="content-text">-->
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" :title="$t('StudioEngineer')">{{$t('StudioEngineer')}}</span>-->
-<!--        <span class="text-field-right" :title="queryForm.studioEngineerName"-->
-<!--        >{{queryForm.studioEngineerName}}</span>-->
-<!--      </div>-->
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" :title="$t('certifiedEngineer')">{{$t('certifiedEngineer')}}</span>-->
-<!--        <span class="text-field-right" :title="queryForm.certificationEngineerName"-->
-<!--        >{{queryForm.certificationEngineerName}}</span>-->
-<!--      </div>-->
-<!--      <div class="text-field">-->
-<!--        <span class="text-field-left" style="float: left;margin-top: 3px" :title="$t('ListOfRelevantPersonnel')">{{$t('ListOfRelevantPersonnel')}}</span>-->
-<!--        <span class="text-field-right"-->
-<!--        >-->
-<!--          <a-button type="primary" v-has="'projectRelatedPersonnel:page'"-->
-<!--                    :title="$t('ListOfRelevantPersonnel')"-->
-<!--                    class="button-text"-->
-<!--                    @click="ListOfRelevantPersonnelClick">-->
-<!--                  {{$t('ListOfRelevantPersonnel')}}-->
-<!--          </a-button>-->
-<!--        </span>-->
-<!--      </div>-->
-<!--    </div>-->
-<!--    <div class="content-text">-->
-
-<!--    </div>-->
    <div class="box-text">
      <div class="header-text">
        {{$t('complianceCertificationProgram')}}
@@ -181,21 +127,9 @@
      </div>
      <div class="process-content-right-xian"></div>
    </div>
-<!--    <a-tabs style="margin-top: 20px" v-model="activeKey" class="ant-tabs">-->
-<!--      <a-tab-pane :key="$t('CurrentStatusOfTheProject')" :tab="$t('CurrentStatusOfTheProject')">-->
-<!--        <currentStatusOfTheProjectEcharts @currentStatus="currentStatus"-->
-<!--                                          v-if="activeKey == $t('CurrentStatusOfTheProject')"/>-->
-<!--      </a-tab-pane>-->
-<!--      <a-tab-pane :key="$t('DeliverableStatus')" :tab="$t('DeliverableStatus')">-->
-<!--        <deliverableStatusEchart @currentStatus="currentStatus" v-if="activeKey == $t('DeliverableStatus')"/>-->
-<!--      </a-tab-pane>-->
-<!--      <a-tab-pane :key="$t('CertificationProgress')" :tab="$t('CertificationProgress')">-->
-<!--        <certificationProgressEchart @currentStatus="currentStatus" v-if="activeKey == $t('CertificationProgress')"/>-->
-<!--      </a-tab-pane>-->
-<!--      <a-tab-pane :key="$t('Parametercollection')" :tab="$t('Parametercollection')">-->
-<!--        <ParameterCollectionEchart @currentStatus="currentStatus" v-if="activeKey == $t('Parametercollection')"/>-->
-<!--      </a-tab-pane>-->
-<!--    </a-tabs>-->
+
+    <projectStatus />
+
    <listOfRelevantPersonnel ref="listOfRelevantPersonnelRef"/>
    <addModel :url="url" ref="addModelRef" @addModelList="addModelList"/>
    <settingList :url="url" ref="settingListRef" @settingListForm="settingListForm"/>
@@ -208,22 +142,16 @@
  import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
  import addModel from './addModel'
  import settingList from './settingList'
-  import currentStatusOfTheProjectEcharts from './currentStatusOfTheProjectEcharts'
-  import deliverableStatusEchart from './deliverableStatusEchart'
-  import ParameterCollectionEchart from './ParameterCollectionEchart'
-  import certificationProgressEchart from './certificationProgressEchart'
+  import projectStatus from './projectStatus'
  import { mapGetters } from 'vuex'

  export default {
    name: 'ProjectDetails',
    components: {
      listOfRelevantPersonnel,
-      ParameterCollectionEchart,
      addModel,
      settingList,
-      currentStatusOfTheProjectEcharts,
-      deliverableStatusEchart,
-      certificationProgressEchart
+      projectStatus
    },
    data() {
      return {
@@ -9,15 +9,7 @@
      </div>
    </div>
    <div class="box-content">
-      <div class="box-content-left">
-        <div id="main-left-content"></div>
-      </div>
-      <div class="box-content-right">
-        <div id="main-right-content"></div>
-      </div>
-    </div>
-    <div class="box-content">
-      <div class="box-content-left">
+      <div class="box-content-bottom">
        <div id="main-bottom"></div>
      </div>
    </div>
@@ -32,7 +24,7 @@
  import responsibilityList from './responsibilityList'

  export default {
-    name: 'DeliverableStatusEchart',
+    name: 'certificationActivity',
    components: {
      responsibilityList
    },
@@ -50,9 +42,7 @@
      }
    },
    mounted() {
-      this.mainLeftContentEcharts()
      this.mainRightEcharts()
-      this.mainRightContentEcharts()
      this.mainBottomEcharts()
      this.getData()
    },
@@ -243,23 +233,15 @@
      }
      ,
      mainLeftEcharts(data, color) {
-        this.getEcharts('main-left', this.$t('listConfirmationProgress'), color, data, 1)
+        this.getEcharts('main-left', this.$t('certificationTaskConfirmation'), color, data, 1)
      }
      ,
      mainRightEcharts(data, color) {
-        this.getEcharts('main-right', this.$t('taskConfirmationProgress'), color, data, 2)
-      }
-      ,
-      mainLeftContentEcharts(data, color) {
-        this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), color, data, 3)
-      }
-      ,
-      mainRightContentEcharts(data, color) {
-        this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), color, data, 4)
+        this.getEcharts('main-right', this.$t('preHomoFlow'), color, data, 2)
      }
      ,
      mainBottomEcharts(data, color) {
-        this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), color, data, 5)
+        this.getEcharts('main-bottom', this.$t('CertificationProgress'), color, data, 5)
      },
      responsibility(item) {
        this.$emit('currentStatus', item)
@@ -276,48 +258,41 @@
    margin-bottom: 20px;

    .box-content-left {
-      width: calc(50% - 12px);
-      height: 398px;
+      width: calc(50% - 10px);
+      height: 346px;
      border: 2px #eff1f3 solid;
-
+      border-radius: 6px;
+      margin-top: 4px;
      #main-left {
        width: 100%;
        height: 100%;
-        padding: 24px;
-        box-sizing: border-box;
-      }
-
-      #main-left-content {
-        width: 100%;
-        height: 100%;
-        padding: 24px;
-        box-sizing: border-box;
-      }
-
-      #main-bottom {
-        width: 100%;
-        height: 100%;
-        padding: 24px;
+        padding: 20px 24px;
        box-sizing: border-box;
      }
    }

    .box-content-right {
-      width: calc(50% - 12px);
-      height: 398px;
+      width: calc(50% - 10px);
+      height: 346px;
      border: 2px #eff1f3 solid;
-
+      border-radius: 6px;
+      margin-top: 4px;
      #main-right {
        width: 100%;
        height: 100%;
-        padding: 24px;
+        padding: 20px 24px;
        box-sizing: border-box;
      }
-
-      #main-right-content {
+    }
+    .box-content-bottom{
+      width: 100%;
+      height: 346px;
+      border: 2px #eff1f3 solid;
+      border-radius: 6px;
+      #main-bottom {
        width: 100%;
        height: 100%;
-        padding: 24px;
+        padding: 20px 24px;
        box-sizing: border-box;
      }
    }
@@ -1,248 +0,0 @@
-<template>
-  <div class="box-content">
-    <div class="box-content-left">
-      <div id="main-left"></div>
-    </div>
-    <div class="box-content-right">
-      <div id="main-right">
-        <a-table
-          ref="table"
-          :components="drag(columns,'columns')"
-          :loading="loading"
-          :pagination="false"
-          :scroll="{x: true}"
-          :data-source="dataSource"
-          :columns="columns"
-        >
-          <template slot="footer" slot-scope="currentPageData">
-            {{$t('totalTable')}}:{{certificationProgressTotal}}
-          </template>
-        </a-table>
-      </div>
-    </div>
-    <responsibilityList @responsibility="responsibility" ref="responsibilityListRef"/>
-  </div>
-</template>
-
-<script>
-  import * as echarts from 'echarts'
-  import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
-  import responsibilityList from './responsibilityList'
-  import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
-
-  export default {
-    name: 'certificationProgress',
-    components: {
-      responsibilityList
-    },
-    props: {
-      idList: {
-        type: Array,
-        default: []
-      }
-    },
-    mixins:[ResizeHeader, ResizeColumnProvide],
-    data() {
-      return {
-        loading: false,
-        dataSource: [],
-        certificationProgressTotal: 0,
-        url: {
-          getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
-        },
-        columns: [
-          {
-            title: this.$t('notInvolved'),
-            align: 'left',
-            dataIndex: 'notInvolved',
-            width: 102
-          },
-          {
-            title: this.$t('toBeStarted'),
-            align: 'left',
-            dataIndex: 'toBeStarted',
-            width: 102
-          },
-          {
-            title: this.$t('inProgress'),
-            align: 'left',
-            dataIndex: 'inProgress',
-            width: 102
-          },
-          {
-            title: this.$t('experimentFailed'),
-            align: 'left',
-            dataIndex: 'experimentFailed',
-            width: 122
-          },
-          {
-            title: this.$t('experimentPassed'),
-            align: 'left',
-            dataIndex: 'experimentPassed',
-            width: 122
-          }
-        ]
-      }
-    },
-    mounted() {
-      this.mainLeftEcharts()
-      this.getData()
-    },
-    methods: {
-      responsibility(item) {
-        this.$emit('currentStatus', item)
-      },
-      getData() {
-        let id = ''
-        if (this.idList && this.idList.length > 0) {
-          id = this.idList.join(',')
-        } else {
-          id = this.$route.query.id
-        }
-        getAction(this.url.getProjectDetailsStatistics, { id: id }).then((res) => {
-          if (res.success) {
-            if (res.result) {
-              let certificationProgressMap = res.result.certificationProgressMap ? res.result.certificationProgressMap.certificationProgressMapList : []
-              this.certificationProgressTotal = res.result.certificationProgressMap ? res.result.certificationProgressMap.certificationProgressTotal : 0
-              this.dataEcharts(certificationProgressMap)
-            }
-          }
-        })
-      },
-      dataEcharts(val) {
-        let data = []
-        let color = []
-        this.dataSource = []
-        if (val && val.length > 0) {
-          this.dataSource = [{}]
-          val.forEach(res => {
-            if (res.certificationProgress == 'NA') {
-              data.push({
-                value: res.certificationProgressCount,
-                name: this.$t('notInvolved'),
-                status: res.certificationProgress
-              })
-              color.push('#707486')
-              this.dataSource[0].notInvolved = res.certificationProgressCount
-            } else if (res.certificationProgress == 'Not start') {
-              data.push({
-                value: res.certificationProgressCount,
-                name: this.$t('toBeStarted'),
-                status: res.certificationProgress
-              })
-              color.push('#00B3BE')
-              this.dataSource[0].toBeStarted = res.certificationProgressCount
-            } else if (res.certificationProgress == 'In progress') {
-              data.push({
-                value: res.certificationProgressCount,
-                name: this.$t('inProgress'),
-                status: res.certificationProgress
-              })
-              color.push('#FDA71C')
-              this.dataSource[0].inProgress = res.certificationProgressCount
-            } else if (res.certificationProgress == 'Test failed') {
-              data.push({
-                value: res.certificationProgressCount,
-                name: this.$t('experimentFailed'),
-                status: res.certificationProgress
-              })
-              color.push('#E83030')
-              this.dataSource[0].experimentFailed = res.certificationProgressCount
-            } else if (res.certificationProgress == 'Test passed') {
-              data.push({
-                value: res.certificationProgressCount,
-                name: this.$t('experimentPassed'),
-                status: res.certificationProgress
-              })
-              color.push('#26BD4B')
-              this.dataSource[0].experimentPassed = res.certificationProgressCount
-            }
-          })
-        }
-        this.mainLeftEcharts(data, color)
-      },
-      getEcharts(chart, title, color, data) {
-        var myChart = echarts.init(document.getElementById(chart))
-        myChart.setOption({
-          title: {
-            text: title
-          },
-          tooltip: {
-            trigger: 'item'
-          },
-          legend: {
-            itemWidth: 12,
-            itemHeight: 12,
-            bottom: '0',
-            left: 'center',
-            itemGap: 30,
-            icon: 'circle'
-          },
-          series: [
-            {
-              name: title,
-              type: 'pie',
-              radius: ['40%', '54%'],
-              avoidLabelOverlap: false,
-              label: {
-                show: false,
-                position: 'center'
-              },
-              labelLine: {
-                show: false
-              },
-              color: color,
-              data: data
-            }
-          ]
-        })
-        myChart.on('click', (params) => {
-          let query = {
-            title: params.seriesName,
-            projectLibraryId: this.$route.query.id,
-            operatorType: 'queryCertificationProgressStatistics',
-            certificationProgress: params.data.status
-          }
-          this.$refs.responsibilityListRef.getData(query)
-        })
-      },
-      mainLeftEcharts(data, color) {
-        this.getEcharts('main-left', this.$t('CertificationProgress'), color, data)
-      }
-    }
-  }
-</script>
-
-<style scoped lang="less">
-  .box-content {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-
-    .box-content-left {
-      width: calc(50% - 12px);
-      height: 398px;
-      border: 2px #eff1f3 solid;
-
-      #main-left {
-        width: 100%;
-        height: 100%;
-        padding: 24px;
-        box-sizing: border-box;
-      }
-    }
-
-    .box-content-right {
-      width: calc(50% - 12px);
-      height: 398px;
-      border: 2px #eff1f3 solid;
-
-      #main-right {
-        width: 100%;
-        height: 100%;
-        padding: 24px;
-        box-sizing: border-box;
-      }
-    }
-  }
-</style>
@@ -12,22 +12,22 @@
      </div>
    </div>
    <a-tabs v-model="activeKey" class="ant-tabs">
-      <a-tab-pane :key="$t('CurrentStatusOfTheProject')" :tab="$t('CurrentStatusOfTheProject')">
-        <currentStatusOfTheProjectEcharts @currentStatus="currentStatus"
+      <a-tab-pane :key="$t('regulatoryComplianceManagement')" :tab="$t('regulatoryComplianceManagement')">
+        <regulatoryCompliance @currentStatus="currentStatus"
                                          :idList="idList"
-                                          v-if="activeKey == $t('CurrentStatusOfTheProject')"/>
+                                          v-if="activeKey == $t('regulatoryComplianceManagement')"/>
      </a-tab-pane>
-      <a-tab-pane :key="$t('DeliverableStatus')" :tab="$t('DeliverableStatus')">
-        <deliverableStatusEchart @currentStatus="currentStatus" :idList="idList"
-                                 v-if="activeKey == $t('DeliverableStatus')"/>
+      <a-tab-pane :key="$t('certificationActivityManagement')" :tab="$t('certificationActivityManagement')">
+        <certificationActivity @currentStatus="currentStatus" :idList="idList"
+                                 v-if="activeKey == $t('certificationActivityManagement')"/>
      </a-tab-pane>
-      <a-tab-pane :key="$t('CertificationProgress')" :tab="$t('CertificationProgress')">
-        <certificationProgressEchart @currentStatus="currentStatus" :idList="idList"
-                                     v-if="activeKey == $t('CertificationProgress')"/>
+      <a-tab-pane :key="$t('parameterCollectionProgressManagement')" :tab="$t('parameterCollectionProgressManagement')">
+        <parameterCollectionProgress @currentStatus="currentStatus" :idList="[]"
+                                   v-if="activeKey == $t('parameterCollectionProgressManagement')"/>
      </a-tab-pane>
-      <a-tab-pane :key="$t('Parametercollection')" :tab="$t('Parametercollection')">
-        <ParameterCollectionEchart @currentStatus="currentStatus" :idList="[]"
-                                   v-if="activeKey == $t('Parametercollection')"/>
+      <a-tab-pane :key="$t('nonConformance')" :tab="$t('nonConformance')">
+        <nonConformance @currentStatus="currentStatus" :idList="[]"
+                                     v-if="activeKey == $t('nonConformance')"/>
      </a-tab-pane>
    </a-tabs>
    <versionStatistics ref="versionStatisticsRef" @versionStatisticsForm="versionStatisticsForm"/>
@@ -35,25 +35,25 @@
 </template>

 <script>
-  import currentStatusOfTheProjectEcharts from './currentStatusOfTheProjectEcharts'
-  import deliverableStatusEchart from './deliverableStatusEchart'
-  import ParameterCollectionEchart from './ParameterCollectionEchart'
-  import certificationProgressEchart from './certificationProgressEchart'
+  import regulatoryCompliance from './regulatoryCompliance'
+  import certificationActivity from './certificationActivity'
+  import parameterCollectionProgress from './parameterCollectionProgress'
  import versionStatistics from './versionStatistics'
+  import nonConformance from './nonConformance'
  import { getAction, postAction } from '@/api/manage'

  export default {
    name: 'projectStatus',
    components: {
-      ParameterCollectionEchart,
-      currentStatusOfTheProjectEcharts,
-      deliverableStatusEchart,
-      certificationProgressEchart,
-      versionStatistics
+      parameterCollectionProgress,
+      regulatoryCompliance,
+      certificationActivity,
+      versionStatistics,
+      nonConformance
    },
    data() {
      return {
-        activeKey: this.$t('CurrentStatusOfTheProject'),
+        activeKey: this.$t('regulatoryComplianceManagement'),
        selectedRowKeys: [],
        idList: []
      }
@@ -85,4 +85,7 @@

 <style scoped>
  @import '~@assets/less/common.less';
+  ::v-deep .ant-card-body{
+    padding: 24px 0 ;
+  }
 </style>
@@ -1,30 +1,14 @@
 <template>
  <div class="box-content">
-    <div class="headerText"
-         :title="this.$t('redSchedule') + this.$t('yellowSchedule')+this.$t('greenRequirements')+this.$t('blueUndeterminedState')">
-      {{this.$t('redSchedule')}};
-      {{this.$t('yellowSchedule')}};
-      {{this.$t('greenRequirements')}};
-      {{this.$t('blueUndeterminedState')}};
+    <div class="box-content-top">
+      <div id="main-top"></div>
    </div>
    <div class="box-content-left">
      <div id="main-left"></div>
    </div>
    <div class="box-content-right">
      <div id="main-right">
-        <a-table
-          ref="table"
-          :components="drag(columns,'columns')"
-          :loading="loading"
-          :pagination="false"
-          :scroll="{x: true}"
-          :data-source="dataSource"
-          :columns="columns"
-        >
-          <template slot="footer" slot-scope="currentPageData">
-            {{$t('totalTable')}}:{{currentProjectStatusTotal}}
-          </template>
-        </a-table>
+
      </div>
    </div>
    <responsibilityList @responsibility="responsibility" ref="responsibilityListRef"/>
@@ -38,7 +22,7 @@
  import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'

  export default {
-    name: 'CurrentStatusOfTheProjectEcharts',
+    name: 'regulatoryCompliance',
    components: {
      responsibilityList
    },
@@ -48,11 +32,10 @@
        default: []
      }
    },
-    mixins:[ResizeHeader, ResizeColumnProvide],
+    mixins: [ResizeHeader, ResizeColumnProvide],
    data() {
      return {
        loading: false,
-        dataSource: [],
        currentProjectStatusTotal: 0,
        url: {
          getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
@@ -192,7 +175,9 @@
            }
          })
        }
-        this.getEcharts('main-left', this.$t('CurrentStatusOfTheProject'), color, data)
+        this.getEcharts('main-left', this.$t('regulatoryTaskConfirmation'), color, data)
+        this.getEcharts('main-right', this.$t('regulatoryTaskConfirmation'), color, data)
+        this.getEcharts('main-top', this.$t('regulatoryTaskConfirmation'), color, data)
      },
      responsibility(item) {
        this.$emit('currentStatus', item)
@@ -206,25 +191,43 @@
    width: 100%;
    display: flex;
    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .box-content-top {
+      width: 100%;
+      margin-top: 4px;
+      height: 346px;
+      border: 2px #eff1f3 solid;
+      border-radius: 6px;
+
+      #main-top {
+        width: 100%;
+        height: 100%;
+        padding: 20px 24px;
+        box-sizing: border-box;
+      }
+    }

    .box-content-left {
-      width: calc(50% - 12px);
-      margin-top: 30px;
-      height: 398px;
+      width: calc(50% - 10px);
+      margin-top: 20px;
+      height: 346px;
      border: 2px #eff1f3 solid;
+      border-radius: 6px;

      #main-left {
        width: 100%;
        height: 100%;
-        padding: 24px;
+        padding: 20px 24px;
        box-sizing: border-box;
      }
    }

    .box-content-right {
-      width: calc(50% - 12px);
-      margin-top: 30px;
-      height: 398px;
+      width: calc(50% - 10px);
+      margin-top: 20px;
+      height: 346px;
+      border-radius: 6px;
      border: 2px #eff1f3 solid;

      #main-right {