From c772cf3f55fb6384bac213a91f2d3f79adfc273a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8C=83=E5=BC=BA=E5=BC=BA?= <787203167>
Date: Tue, 9 May 2023 15:24:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9UAT=E6=8F=90=E5=87=BA?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jero-web/src/common/lang/en-us.js             |   16 +-
 .../parameterCollectionProgress.vue           |    8 +-
 .../components/statistics.vue                 | 1064 +++++++++++++++++
 .../projectStatusBoard/index.vue              |   18 +-
 4 files changed, 1091 insertions(+), 15 deletions(-)
 create mode 100644 jero-web/src/views/projectManagement/projectStatusBoard/components/statistics.vue

diff --git a/jero-web/src/common/lang/en-us.js b/jero-web/src/common/lang/en-us.js
index 5afe49be1..a887cd5d6 100644
--- a/jero-web/src/common/lang/en-us.js
+++ b/jero-web/src/common/lang/en-us.js
@@ -735,7 +735,7 @@ module.exports = {
   regulatoryTaskConfirmation: 'Regulation Task Confirmed ',
   certificationStart: 'Homo Completed ',
   preHomoCompletion: 'Pre-Homo Completed ',
-  certificationEnd: 'Homo Approved ',
+  certificationEnd: 'Homo KO',
   directoryName: 'Catalogue Name',
   batch: 'Batch',
   uploadTime: 'Upload Time',
@@ -1447,12 +1447,12 @@ module.exports = {
   select:'select',
   onlyDataWithProcessStatusDeleted:'Only data with process status of list to be released and approved can be deleted',
   complianceCertificationProgram:'Compliance & Homologation Program',
-  listPublishing:'List Release',
-  responsibilityConfirmation:'Responsibility Confirm',
-  designVerification:'Design Check',
-  getStarted:'Pre-Homo Starts',
-  certificationStartOne:'Homo Starts',
-  verificationAndVerification:'Validation Check',
+  listPublishing:'List Publishing',
+  responsibilityConfirmation:'Responsibility Confirmation',
+  designVerification:'Design Verification',
+  getStarted:'Get Started',
+  certificationStartOne:'Certification Start',
+  verificationAndVerification:'Verification And Verification',
   projectInterfacePersonRegulationEngineerSetting:'Project Interface Person - Regulation Engineer Setting',
   projectInterfacePersonCertificationEngineerSetting:'Project Interface Person - Certification Engineer Setting',
   registrationnumber:'Product registration number',
@@ -1705,7 +1705,7 @@ module.exports = {
   softwareversion:'Software version',
   returntofill:'Return to fill',
   thereAreCurrentlyNoRegulationsToHandle:'No regulations to be processed now',
-  certificationSubmission:'Application Submitted',
+  certificationSubmission:'Certification Submission',
   upgradecompletion:'Upgrade completion',
   implementedupgrade:'Whether the implemented upgrade is consistent with the record',
   numberofvehicles:'Number of vehicles that have completed upgrades',
diff --git a/jero-web/src/views/projectManagement/components/parameterCollectionProgress.vue b/jero-web/src/views/projectManagement/components/parameterCollectionProgress.vue
index 668bb5a60..e29c07668 100644
--- a/jero-web/src/views/projectManagement/components/parameterCollectionProgress.vue
+++ b/jero-web/src/views/projectManagement/components/parameterCollectionProgress.vue
@@ -111,12 +111,11 @@
               this.syncReport = res.result.syncReport ? res.result.syncReport : []
               this.dutyTerritory = res.result.dutyTerritory ? res.result.dutyTerritory : []
               this.getEcharts()
-
             }
-
           }
         })
       },
+
       getoptions() {
         let id = ''
         if (this.idList && this.idList.length > 0) {
@@ -134,6 +133,7 @@
           }
         })
       },
+
       getonChange(value) {
         this.collectingpercentage = []
         this.collectingquantity = []
@@ -145,6 +145,7 @@
         this.syncReportquantity = []
         this.getData(value)
       },
+
       onChange(value) {
         this.collectingpercentage = []
         this.collectingquantity = []
@@ -155,8 +156,8 @@
         this.syncReportpercentage = []
         this.syncReportquantity = []
         this.getEcharts()
-
       },
+
       getEcharts(chart, title, color, data, num) {
         this.collecting.forEach((item, index) => {
           this.collectingpercentage.push(item.percentage)
@@ -342,6 +343,7 @@
         option && myChart.setOption(option, true)
 
       },
+
       mainLeftEcharts(data, color) {
         this.getEcharts('main-left', this.$t('Parametercollection'), color, data, 1)
       },
diff --git a/jero-web/src/views/projectManagement/projectStatusBoard/components/statistics.vue b/jero-web/src/views/projectManagement/projectStatusBoard/components/statistics.vue
new file mode 100644
index 000000000..63a565a4d
--- /dev/null
+++ b/jero-web/src/views/projectManagement/projectStatusBoard/components/statistics.vue
@@ -0,0 +1,1064 @@
+<template>
+  <a-drawer
+    :title="title"
+    :maskClosable="false"
+    :width="1000"
+    placement="right"
+    :closable="true"
+    @close="handleCancel"
+    :visible="visible"
+    style="height: 100%;overflow: auto;padding-bottom: 53px;">
+    <a-spin :spinning="confirmLoading">
+      <div class="box-content" v-if="visible">
+        <div class="box-content-top"
+             v-if="projectQuery.name == this.$t('listPublishing') || projectQuery.name == this.$t('responsibilityConfirmation')">
+          <div class="total-text">
+            <span>{{$t('totalTable')+' : '+mainTopNum}}</span>
+          </div>
+          <div id="main-top"></div>
+        </div>
+        <div class="box-content-top" v-if="projectQuery.name == this.$t('designVerification')">
+          <div class="total-text">
+            <span>{{$t('totalTable')+' : '+mainLeftNum}}</span>
+          </div>
+          <div id="main-left"></div>
+        </div>
+        <div class="box-content-top" v-if="projectQuery.name == this.$t('verificationAndVerification')">
+          <div class="total-text">
+            <span>{{$t('totalTable')+' : '+mainRightNum}}</span>
+          </div>
+          <div id="main-right"></div>
+        </div>
+        <div class="box-content-top"
+             v-if="projectQuery.name == this.$t('listPublishing') || projectQuery.name == this.$t('responsibilityConfirmation')">
+          <div class="total-text">
+            <span>{{$t('totalTable')+' : '+mainTopNumOne}}</span>
+          </div>
+          <div id="main-top-one"></div>
+        </div>
+        <div class="box-content-top"
+             v-if="projectQuery.name == this.$t('getStarted') || projectQuery.name == this.$t('certificationStartOne')">
+          <div class="total-text">
+            <span>{{$t('totalTable')+' : '+mainLeftNumOne}}</span>
+          </div>
+          <div id="main-right-one"></div>
+        </div>
+        <div class="box-content-top"
+             v-if="projectQuery.name == this.$t('certificationEnd') || projectQuery.name == this.$t('certificationSubmission')">
+          <div class="total-text-text" :class="{'total-text-text-cntop':long == 'zh-cn' ? true:false,
+        'total-text-text-entop':long == 'zh-cn' ? false:true}">
+            <span>{{$t('totalTable')+' : '+mainBottomNum}}</span>
+          </div>
+          <div class="box-content-text">
+            <div class="box-content-text-text" @click="boxContentClick(0)">
+              {{$t('whole')}}
+            </div>
+            <div class="box-content-text-text" @click="boxContentClick(1)">
+              {{$t('completeVehicle')}}
+            </div>
+            <div class="box-content-text-text" @click="boxContentClick(2)">
+              {{$t('components')}}
+            </div>
+          </div>
+          <div id="main-bottom"></div>
+        </div>
+        <div class="table-page-search-wrapper"
+        v-if="this.projectQuery.name == this.$t('getStarted') || this.projectQuery.name == this.$t('certificationStartOne')">
+          <a-form layout="inline">
+            <a-row :gutter="24">
+              <a-col :md="12" :sm="10">
+                <div class="box-title-text">
+                  <div class="title-text" :title="$t('Statisticalmodels')">
+                    <span>{{ $t('Statisticalmodels') }}</span>
+                  </div>
+                  <a-radio-group  class="box-input"
+                                  v-model="queryParam.value" @change="onChange">
+                    <a-radio :value="1">
+                      {{$t('Thepercentage')}}
+                    </a-radio>
+                    <a-radio :value="2">
+                      {{$t('Quantity')}}
+                    </a-radio>
+                  </a-radio-group>
+                </div>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+        <div class="box-content-top-one"
+             v-if="this.projectQuery.name == this.$t('getStarted') || this.projectQuery.name == this.$t('certificationStartOne')">
+          <div id="main-left-parameter"></div>
+        </div>
+      </div>
+    </a-spin>
+    <div class="drawer-bootom-button">
+      <a-button style="margin-right: .8rem" @click="handleCancel">{{$t('cancel')}}</a-button>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+  import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
+
+  export default {
+    name: 'statistics',
+    data() {
+      return {
+        visible: false,
+        confirmLoading: false,
+        title: '',
+        mainTopNum: 0,
+        mainLeftNum: 0,
+        mainRightNum: 0,
+        projectQuery: {},
+        num: '0',
+        mainBottomNum: 0,
+        mainTopNumOne: 0,
+        mainLeftNumOne: 0,
+        queryParam: {
+          value: 1,
+          ctype: ''
+        },
+        options: [],
+        collecting: [],
+        notStart: [],
+        submit: [],
+        syncReport: [],
+        collectingdata: [],
+        notStartdata: [],
+        submitdata: [],
+        syncReportdata: [],
+        dutyTerritory: [],
+        collectingpercentage: [],
+        collectingquantity: [],
+        notStartpercentage: [],
+        notStartquantity: [],
+        submitpercentage: [],
+        submitquantity: [],
+        syncReportpercentage: [],
+        syncReportquantity: [],
+        long: localStorage.getItem('language') || 'zh-cn',
+        certificationProgressMap: {},
+        url: {
+          getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics',
+          getProjectDetailsStatisticsCollectManifestData: '/project/projectLibraryBase/getProjectDetailsStatisticsCollectManifestData'
+        }
+      }
+    },
+    methods: {
+      handleCancel() {
+        this.visible = false
+      },
+      getData(val) {
+        this.visible = true
+        this.title = val.name
+        this.projectQuery = val
+        this.getEchart()
+        if (this.projectQuery.name == this.$t('certificationSubmission') || this.projectQuery.name == this.$t('certificationEnd')) {
+          this.$nextTick(() => {
+            this.num = '0'
+            let boxContentTextColor = document.getElementsByClassName('box-content-text-color')
+            if (boxContentTextColor && boxContentTextColor.length > 0) {
+              boxContentTextColor[0].classList.remove('box-content-text-color')
+            }
+            let boxContentTextText = document.getElementsByClassName('box-content-text-text')
+            if (boxContentTextText && boxContentTextText.length > 0) {
+              boxContentTextText[0].classList.add('box-content-text-color')
+            }
+          })
+        } else if (this.projectQuery.name == this.$t('getStarted') || this.projectQuery.name == this.$t('certificationStartOne')) {
+          this.getoptions()
+        }
+      },
+      getEchart() {
+        getAction(this.url.getProjectDetailsStatistics, { id: this.projectQuery.projectId }).then((res) => {
+          if (res.success) {
+            if (res.result) {
+              let mainTopDataSource = res.result.taskToConfirmMap ? res.result.taskToConfirmMap.taskToConfirmMapList : []
+              let mainLeftDataSource = res.result.designComplianceMap ? res.result.designComplianceMap.designComplianceMapList : []
+              let mainRightDataSource = res.result.verifyComplianceMap ? res.result.verifyComplianceMap.verifyComplianceMapList : []
+              let rzTaskToConfirmMapList = res.result.rzTaskToConfirmMap ? res.result.rzTaskToConfirmMap.rzTaskToConfirmMapList : []
+              let prehomoMapList = res.result.prehomoMap ? res.result.prehomoMap.prehomoMapList : []
+              this.certificationProgressMap = res.result.certificationProgressMap
+              let allMapList = res.result.certificationProgressMap ? res.result.certificationProgressMap.allMapList : []
+              if (this.projectQuery.name == this.$t('listPublishing') ||
+                this.projectQuery.name == this.$t('responsibilityConfirmation')) {
+                this.mainTopEcharts(mainTopDataSource)
+                this.dataEcharts(rzTaskToConfirmMapList)
+              } else if (this.projectQuery.name == this.$t('designVerification')) {
+                this.mainLeftEcharts(mainLeftDataSource)
+              } else if (this.projectQuery.name == this.$t('verificationAndVerification')) {
+                this.mainRightEcharts(mainRightDataSource)
+              } else if (this.projectQuery.name == this.$t('getStarted') || this.projectQuery.name == this.$t('certificationStartOne')) {
+                this.mainRightOneEcharts(prehomoMapList)
+              } else if (this.projectQuery.name == this.$t('certificationSubmission') || this.projectQuery.name == this.$t('certificationEnd')) {
+                this.mainBottomEcharts(allMapList)
+              }
+            }
+          }
+        })
+      },
+
+      getEcharts(chart, title, color, data) {
+        var myChart = echarts.init(document.getElementById(chart))
+        myChart.setOption({
+          title: {
+            text: title
+          },
+          tooltip: {
+            trigger: 'item',
+            textStyle: {
+              fontWeight: 'normal',
+              fontSize: 14,
+              color: '#040B29',
+              fontFamily: 'BlueSkyNoto'
+            },
+            formatter: function(parms) {
+              let str = parms.marker + ' ' + parms.data.name + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + parms.data.value + ' (' + parms.percent + '%)'
+              return str
+            }
+          },
+          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 = {}
+          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)
+        })
+      },
+
+      mainTopEcharts(dataSource) {
+        let data = []
+        let color = []
+        this.mainTopNum = 0
+        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',
+                status: res.taskAffirmStatus
+              })
+              color.push('#00B3BE')
+            } else if (res.taskAffirmStatus == 'List to confirm') {
+              data.push({
+                value: res.taskAffirmStatusCount,
+                name: this.$t('listToConfirm'),
+                color: '#FDA71C',
+                status: res.taskAffirmStatus
+              })
+              color.push('#FDA71C')
+            } else if (res.taskAffirmStatus == 'Accepted') {
+              data.push({
+                value: res.taskAffirmStatusCount,
+                name: this.$t('accept'),
+                color: '#26BC4B',
+                status: res.taskAffirmStatus
+              })
+              color.push('#26BC4B')
+            } else if (res.taskAffirmStatus == 'Rejected') {
+              data.push({
+                value: res.taskAffirmStatusCount,
+                name: this.$t('refuse'),
+                color: '#E83030',
+                status: res.taskAffirmStatus
+              })
+              color.push('#E83030')
+            }
+            this.mainTopNum += res.taskAffirmStatusCount
+          })
+        }
+        this.getEcharts('main-top', this.$t('regulatoryTaskConfirmation'), color, data)
+      },
+
+      mainLeftEcharts(dataSource) {
+        let data = []
+        let color = []
+        this.mainLeftNum = 0
+        if (dataSource && dataSource.length > 0) {
+          this.dataSource = [{}]
+          dataSource.forEach(res => {
+            if (res.designFlowTaskStatus == 'Not started') {
+              data.push({
+                value: res.designFlowTaskStatusCount,
+                name: this.$t('notLaunch'),
+                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',
+                status: res.designFlowTaskStatus
+              })
+              color.push('#FDA71C')
+            } else if (res.designFlowTaskStatus == 'Compliance') {
+              data.push({
+                value: res.designFlowTaskStatusCount,
+                name: this.$t('compliance'),
+                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',
+                status: res.designFlowTaskStatus
+              })
+              color.push('#707486')
+            }
+            this.mainLeftNum += res.designFlowTaskStatusCount
+          })
+        }
+        this.getEcharts('main-left', this.$t('designCompliance'), color, data)
+      },
+
+      mainRightEcharts(dataSource) {
+        let data = []
+        let color = []
+        this.mainRightNum = 0
+        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',
+                status: res.verifyFlowTaskStatus
+              })
+              color.push('#00B3BE')
+            } else if (res.verifyFlowTaskStatus == 'List to confirm') {
+              data.push({
+                value: res.verifyFlowTaskStatusCount,
+                name: this.$t('listToConfirm'),
+                color: '#FDA71C',
+                status: res.verifyFlowTaskStatus
+              })
+              color.push('#FDA71C')
+            } else if (res.verifyFlowTaskStatus == 'Compliance') {
+              data.push({
+                value: res.verifyFlowTaskStatusCount,
+                name: this.$t('compliance'),
+                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',
+                status: res.verifyFlowTaskStatus
+              })
+              color.push('#707486')
+            }
+            this.mainRightNum += res.verifyFlowTaskStatusCount
+          })
+        }
+        this.getEcharts('main-right', this.$t('verifyCompliance'), color, data)
+      },
+
+      dataEcharts(dataSource) {
+        let data = []
+        let color = []
+        this.mainTopNumOne = 0
+        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',
+                status: res.taskAffirmStatus
+              })
+              color.push('#00B3BE')
+            } else if (res.taskAffirmStatus == 'List to confirm') {
+              data.push({
+                value: res.taskAffirmStatusCount,
+                name: this.$t('listToConfirm'),
+                color: '#FDA71C',
+                status: res.taskAffirmStatus
+              })
+              color.push('#FDA71C')
+            } else if (res.taskAffirmStatus == 'Accepted') {
+              data.push({
+                value: res.taskAffirmStatusCount,
+                name: this.$t('accept'),
+                color: '#26BC4B',
+                status: res.taskAffirmStatus
+              })
+              color.push('#26BC4B')
+            } else if (res.taskAffirmStatus == 'Rejected') {
+              data.push({
+                value: res.taskAffirmStatusCount,
+                name: this.$t('refuse'),
+                color: '#E83030',
+                status: res.taskAffirmStatus
+              })
+              color.push('#E83030')
+            }
+            this.mainTopNumOne += res.taskAffirmStatusCount
+          })
+        }
+        this.getEcharts('main-top-one', this.$t('certificationTaskConfirmation'), color, data)
+      },
+
+      mainRightOneEcharts(dataSource) {
+        let data = []
+        let color = []
+        this.mainLeftNumOne = 0
+        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',
+                status: res.taskAffirmStatus
+              })
+              color.push('#00B3BE')
+            } else if (res.taskAffirmStatus == 'List to confirm') {
+              data.push({
+                value: res.taskAffirmStatusCount,
+                name: this.$t('listToConfirm'),
+                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',
+                status: res.taskAffirmStatus
+              })
+              color.push('#26BC4B')
+            } else if (res.taskAffirmStatus == 'Review and return') {
+              data.push({
+                value: res.taskAffirmStatusCount,
+                name: this.$t('reviewAndReturn'),
+                color: '#E83030',
+                status: res.taskAffirmStatus
+              })
+              color.push('#E83030')
+            }
+            this.mainLeftNumOne += res.taskAffirmStatusCount
+          })
+        }
+        this.getEchartsOne('main-right-one', this.$t('preHomoFlow'), color, data)
+      },
+
+      mainBottomEcharts(dataSource) {
+        let data = []
+        let color = []
+        this.mainBottomNum = 0
+        if (dataSource && dataSource.length > 0) {
+          dataSource.forEach(res => {
+            if (res.certificationProgress == 'Not start') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('Notatthe'),
+                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',
+                status: res.certificationProgress
+              })
+              color.push('#FDA71C')
+            } else if (res.certificationProgress == 'Test passed') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('experimentPassed'),
+                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',
+                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',
+                status: res.certificationProgress
+              })
+              color.push('#FDA71C')
+            } else if (res.certificationProgress == 'Component report submitted') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('componentReportSubmitted'),
+                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',
+                status: res.certificationProgress
+              })
+              color.push('#26BC4B')
+            }
+            this.mainBottomNum += res.certificationProgressCount
+          })
+        }
+        this.getEchartsOne('main-bottom', this.$t('CertificationProgress'), color, data)
+      },
+
+      getEchartsOne(chart, title, color, data) {
+        var myChart = echarts.init(document.getElementById(chart))
+        myChart.setOption({
+          title: {
+            text: title
+          },
+          tooltip: {
+            trigger: 'item',
+            textStyle: {
+              fontWeight: 'normal',
+              fontSize: 14,
+              color: '#040B29',
+              fontFamily: 'BlueSkyNoto'
+            },
+            formatter: function(parms) {
+              let str = parms.marker + ' ' + parms.data.name + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + parms.data.value + ' (' + parms.percent + '%)'
+              return str
+            }
+          },
+          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.off('click') // 重点代码
+        myChart.on('click', (params) => {
+          console.log(params)
+          let query = {
+            title: params.seriesName,
+            projectLibraryId: this.$route.query.id
+          }
+          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')) {
+            if (this.num == '0') {
+              query.operatorType = 'queryCertificationProgressStatisticsAll'
+            } else if (this.num == '1') {
+              query.operatorType = 'queryCertificationProgressStatisticsCar'
+            } else if (this.num == '2') {
+              query.operatorType = 'queryCertificationProgressStatisticsPart'
+            }
+            query.status = params.data.status
+          }
+          this.$refs.responsibilityListRef.getData(query)
+        })
+      },
+
+      boxContentClick(num) {
+
+        let boxContentTextColor = document.getElementsByClassName('box-content-text-color')
+        if (boxContentTextColor && boxContentTextColor.length > 0) {
+          boxContentTextColor[0].classList.remove('box-content-text-color')
+        }
+        let boxContentTextText = document.getElementsByClassName('box-content-text-text')
+        if (boxContentTextText && boxContentTextText.length > 0) {
+          boxContentTextText[num].classList.add('box-content-text-color')
+        }
+        this.num = num
+        if (num == 0) {
+          this.mainBottomEcharts(this.certificationProgressMap.allMapList || [])
+        } else if (num == 1) {
+          this.mainBottomEcharts(this.certificationProgressMap.carMapList || [])
+        } else if (num == 2) {
+          this.mainBottomEcharts(this.certificationProgressMap.partMapList || [])
+        }
+      },
+
+      getParameter(item) {
+        getAction(this.url.getProjectDetailsStatisticsCollectManifestData, { paramsManifestId: item }).then((res) => {
+          if (res.success) {
+            if (res.result) {
+              this.collecting = res.result.collecting ? res.result.collecting : []
+              this.notStart = res.result.notStart ? res.result.notStart : []
+              this.submit = res.result.submit ? res.result.submit : []
+              this.syncReport = res.result.syncReport ? res.result.syncReport : []
+              this.dutyTerritory = res.result.dutyTerritory ? res.result.dutyTerritory : []
+              this.getEchartParameter()
+            }
+          }
+        })
+      },
+
+      getoptions() {
+        getAction('project/projectLibraryBase/getProjectDetailsStatisticsCollectManifestLabel', { id: this.projectQuery.projectId }).then((res) => {
+          if (res.success) {
+            this.options = res.result
+            this.queryParam.ctype = this.options[0].value
+            this.getParameter(this.queryParam.ctype)
+          } else {
+          }
+        })
+      },
+
+      onChange(value) {
+        this.collectingpercentage = []
+        this.collectingquantity = []
+        this.notStartpercentage = []
+        this.notStartquantity = []
+        this.submitpercentage = []
+        this.submitquantity = []
+        this.syncReportpercentage = []
+        this.syncReportquantity = []
+        this.getEchartParameter()
+      },
+
+      getEchartParameter(chart, title, color, data, num) {
+        this.collecting.forEach((item, index) => {
+          this.collectingpercentage.push(item.percentage)
+          this.collectingquantity.push(item.quantity)
+        })
+        this.notStart.forEach((item, index) => {
+          this.notStartpercentage.push(item.percentage)
+          this.notStartquantity.push(item.quantity)
+        })
+        this.submit.forEach((item, index) => {
+          this.submitpercentage.push(item.percentage)
+          this.submitquantity.push(item.quantity)
+        })
+        this.syncReport.forEach((item, index) => {
+          this.syncReportpercentage.push(item.percentage)
+          this.syncReportquantity.push(item.quantity)
+        })
+        if (this.queryParam.value == 1) {
+          this.collectingdata = this.collectingpercentage
+          this.notStartdata = this.notStartpercentage
+          this.submitdata = this.submitpercentage
+          this.syncReportdata = this.syncReportpercentage
+        } else if (this.queryParam.value == 2) {
+          this.collectingdata = this.collectingquantity
+          this.notStartdata = this.notStartquantity
+          this.submitdata = this.submitquantity
+          this.syncReportdata = this.syncReportquantity
+        }
+        var chartDom = document.getElementById('main-left-parameter')
+        var myChart = echarts.init(chartDom)
+        var option
+        var option1
+
+        let xAxisData = []
+        xAxisData = this.dutyTerritory
+
+        let yAxis = []
+        let tooltip = {}
+        let _this = this
+        if (this.queryParam.value === 1) {
+          yAxis = [
+            {
+              type: 'value',
+              axisLabel: {
+                show: true,
+                interval: 'auto',
+                formatter: '{value} %'
+              }
+            }
+          ]
+        } else {
+          yAxis = [
+            {
+              type: 'value'
+            }
+          ]
+        }
+        option = {
+          title: {
+            text: this.$t('parameterCollectionProgress')
+          },
+          legend: {
+            data: [this.$t('Notatthe'), this.$t('Inthecollection'), this.$t('Submitted'), this.$t('SynchronizedLibrary')],
+            icon: 'circle',
+            bottom: '0',
+            itemWidth: 12,
+            itemHeight: 12
+          },
+          toolbox: {},
+          tooltip: {
+            trigger: 'axis',
+            formatter: function(params) {
+              var html = params[0].name + '<br>'
+              for (var i = 0; i < params.length; i++) {
+                html += params[i].marker + params[i].seriesName + ':' + params[i].value
+                if (_this.queryParam.value == 1) {
+                  html += '%' + '<br>'
+                } else {
+                  html += '<br>'
+                }
+              }
+              return html
+            }
+          },
+          xAxis: {
+            data: xAxisData,
+            axisLabel: {
+              interval: 0,
+              rotate: 25
+            }
+          },
+          yAxis: yAxis,
+          grid: {
+            bottom: '20%',
+            left: 50,
+            right: 10
+          },
+          series: [
+            {
+              name: this.$t('Notatthe'),
+              type: 'bar',
+              stack: 'one',
+              barWidth: 40,
+              barGap: '-100%',
+              itemStyle: {
+                color: '#00B3BE'
+              },
+              data: this.notStartdata
+            },
+            {
+              name: this.$t('Inthecollection'),
+              type: 'bar',
+              stack: 'one',
+              barWidth: 40,
+              barGap: '-100%',
+              itemStyle: {
+                color: '#FDA71C'
+              },
+              data: this.collectingdata
+            },
+            {
+              name: this.$t('Submitted'),
+              type: 'bar',
+              stack: 'one',
+              barWidth: 40,
+              barGap: '-100%',
+              itemStyle: {
+                color: '#26BD4B'
+              },
+              data: this.submitdata
+            },
+            {
+              name: this.$t('SynchronizedLibrary'),
+              type: 'bar',
+              stack: 'one',
+              barWidth: 40,
+              barGap: '-100%',
+              itemStyle: {
+                color: '#2F8DF3'
+              },
+              data: this.syncReportdata
+            }
+          ],
+          dataZoom: [
+            {
+              type: 'slider',//给x轴设置滚动条
+              show: true, //flase直接隐藏图形
+              xAxisIndex: [0],
+              bottom: 46,
+              height: 20,
+              showDetail: false,
+              startValue: 0,//滚动条的起始位置
+              endValue: 9 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
+            }
+          ]
+        }
+        option && myChart.setOption(option, true)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .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;
+  }
+
+  .box-content {
+    width: 100%;
+    margin-bottom: 46px;
+
+    .box-content-top {
+      width: 100%;
+      position: relative;
+      height: 346px;
+      border: 2px #eff1f3 solid;
+      border-radius: 6px;
+      margin-bottom: 20px;
+
+      #main-top {
+        width: 100%;
+        height: 100%;
+        padding: 20px 24px;
+        box-sizing: border-box;
+      }
+
+      #main-top-one {
+        width: 100%;
+        height: 100%;
+        padding: 20px 24px;
+        box-sizing: border-box;
+      }
+
+      #main-left {
+        width: 100%;
+        height: 100%;
+        padding: 20px 24px;
+        box-sizing: border-box;
+      }
+
+      #main-right-one {
+        width: 100%;
+        height: 100%;
+        padding: 20px 24px;
+        box-sizing: border-box;
+      }
+
+      #main-top-one {
+        width: 100%;
+        height: 100%;
+        padding: 20px 24px;
+        box-sizing: border-box;
+      }
+
+      #main-bottom {
+        width: 100%;
+        height: 100%;
+        padding: 20px 24px;
+        box-sizing: border-box;
+      }
+
+      #main-right {
+        width: 100%;
+        height: 100%;
+        padding: 24px;
+        box-sizing: border-box;
+      }
+
+      .box-content-text {
+        height: 30px;
+        background: #F5F6F7;
+        border-radius: 4px;
+        position: absolute;
+        right: 24px;
+        top: 20px;
+        display: flex;
+        z-index: 100;
+        justify-content: space-between;
+        padding: 0 2px 0 2px;
+
+        .box-content-text-text {
+          display: inline-block;
+          font-size: 12px;
+          color: #6F7385;
+          line-height: 30px;
+          margin-right: 10px;
+          cursor: pointer;
+          margin-left: 10px;
+        }
+
+        .box-content-text-color {
+          box-shadow: 0px 1px 2px rgba(0, 0, 60, 0.01), 0px 2px 4px rgba(0, 22, 60, 0.02), 0px 4px 6px rgba(0, 22, 60, 0.0229458);
+          border-radius: 4px;
+          padding: 4px 6px;
+          background: #FFFFFF;
+          border: 1px solid #E6E7EC;
+          color: #01A0AC;
+          line-height: normal;
+          margin-right: 0;
+          margin-left: 0;
+        }
+      }
+
+      #main-bottom {
+        width: 100%;
+        height: 100%;
+        padding: 20px 24px;
+        box-sizing: border-box;
+      }
+
+    }
+
+    .box-content-top-one {
+      width: 100%;
+      position: relative;
+      height: 626px;
+      border: 2px #eff1f3 solid;
+      border-radius: 6px;
+      margin-bottom: 20px;
+
+      #main-left-parameter {
+        width: 100%;
+        height: 100%;
+        padding: 20px 24px;
+        box-sizing: border-box;
+      }
+    }
+  }
+
+  .headerText {
+    margin-left: 30px;
+    color: #040B29;
+    font-weight: 400;
+    position: absolute;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .total-text {
+    position: absolute;
+    right: 28px;
+    top: 19px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .total-text-text {
+    position: absolute;
+    right: 28px;
+    top: 21px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .total-text-text-cntop {
+    right: 180px;
+  }
+
+  .total-text-text-entop {
+    right: 290px;
+  }
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  .title-text {
+    color: #000F16;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    margin-top: 3px;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .box-input {
+    display: inline-block;
+    width: calc(100% - 126px);
+    height: 38px;
+    margin-top: 2px;
+    line-height: 38px;
+  }
+</style>
\ No newline at end of file
diff --git a/jero-web/src/views/projectManagement/projectStatusBoard/index.vue b/jero-web/src/views/projectManagement/projectStatusBoard/index.vue
index 69e572ba4..06347e35b 100644
--- a/jero-web/src/views/projectManagement/projectStatusBoard/index.vue
+++ b/jero-web/src/views/projectManagement/projectStatusBoard/index.vue
@@ -133,12 +133,14 @@
                     <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"
+                    <img @click="statusClick(val)" v-if="val.status == 1" src="../../../assets/huiBottom.png"
                          class="process-content-left"
                          alt="">
-                    <img v-else-if="val.status == 3" src="../../../assets/shiBottom.png" class="process-content-left"
+                    <img @click="statusClick(val)" v-else-if="val.status == 2" src="../../../assets/kongBottom.png"
+                         class="process-content-left"
+                         alt="">
+                    <img @click="statusClick(val)" v-else-if="val.status == 3" src="../../../assets/shiBottom.png"
+                         class="process-content-left"
                          alt="">
                   </a-tooltip>
 
@@ -206,11 +208,13 @@
     <!--        </a-table>-->
     <!--      </div>-->
     <!--    </div>-->
+    <statistics ref="statisticsRef"/>
   </a-card>
 </template>
 
 <script>
   import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
+  import statistics from './components/statistics'
   import * as echarts from 'echarts'
   import moment from 'moment'
   import { ResizeHeader, ResizeColumnProvide } from '@/mixins/header'
@@ -218,6 +222,9 @@
   export default {
     name: 'index',
     mixins: [ResizeHeader, ResizeColumnProvide],
+    components: {
+      statistics
+    },
     data() {
       return {
         queryParam: {},
@@ -571,6 +578,9 @@
         }
         downloadFile('/project/ProjectStatusBoardController/exportXls',
           this.$t('GRPSystemProjectProgressStatistics') + '.xls', query, this.Deselect)
+      },
+      statusClick(val) {
+        this.$refs.statisticsRef.getData(val)
       }
     }
   }