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

2023-04-25 18:01:02 +08:00
parent fe1391f0b4
commit 03953ea255
9 changed files with 463 additions and 279 deletions
@@ -10,6 +10,17 @@
    </div>
    <div class="box-content">
      <div class="box-content-bottom">
+        <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>
@@ -38,11 +49,19 @@
      return {
        url: {
          getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
-        }
+        },
+        certificationProgressMap:{},
      }
    },
    mounted() {
-      this.mainRightEcharts()
+      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')
+      }
      this.mainBottomEcharts()
      this.getData()
    },
@@ -57,122 +76,155 @@
        getAction(this.url.getProjectDetailsStatistics, { id: id }).then((res) => {
          if (res.success) {
            if (res.result) {
-              let listingToConfirmMap = res.result.listingToConfirmMap ? res.result.listingToConfirmMap.listingToConfirmMapList : []
-              let taskToConfirmMap = res.result.taskToConfirmMap ? res.result.taskToConfirmMap.taskToConfirmMapList : []
-              let designComplianceMap = res.result.designComplianceMap ? res.result.designComplianceMap.designComplianceMapList : []
-              let prehomoMap = res.result.prehomoMap ? res.result.prehomoMap.prehomoMapList : []
-              let verifyComplianceMap = res.result.verifyComplianceMap ? res.result.verifyComplianceMap.verifyComplianceMapList : []
-              this.dataEcharts(listingToConfirmMap, 1)
-              this.dataEcharts(taskToConfirmMap, 2)
-              this.dataEchartsOne(designComplianceMap, 1)
-              this.dataEchartsOne(prehomoMap, 2)
-              this.dataEchartsOne(verifyComplianceMap, 3)
+              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 : []
+              this.dataEcharts(rzTaskToConfirmMapList)
+              this.mainRightEcharts(prehomoMapList)
+              this.mainBottomEcharts(allMapList)
            }
          }
        })
      },
-      dataEcharts(val, num) {
+      dataEcharts(dataSource) {
        let data = []
        let color = []
-        if (val && val.length > 0) {
-          val.forEach((res) => {
-            if (res.inventoryAffirmStatus == 'Not started' || res.taskAffirmStatus == 'Not started') {
+        if (dataSource && dataSource.length > 0) {
+          this.dataSource = [{}]
+          dataSource.forEach(res => {
+            if (res.taskAffirmStatus == 'Not started') {
              data.push({
-                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
+                value: res.taskAffirmStatusCount,
                name: this.$t('notLaunch'),
-                status: res.inventoryAffirmStatus || res.taskAffirmStatus
-              })
-              color.push('#707486')
-            } else if (res.inventoryAffirmStatus == 'List to confirm' || res.taskAffirmStatus == 'List to confirm') {
-              data.push({
-                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
-                name: this.$t('toBeConfirmed'),
-                status: res.inventoryAffirmStatus || res.taskAffirmStatus
+                color: '#00B3BE'
              })
              color.push('#00B3BE')
-            } else if (res.inventoryAffirmStatus == 'Accepted' || res.taskAffirmStatus == 'Accepted') {
+            } else if (res.taskAffirmStatus == 'List to confirm') {
              data.push({
-                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
-                name: this.$t('accept'),
-                status: res.inventoryAffirmStatus || res.taskAffirmStatus
+                value: res.taskAffirmStatusCount,
+                name: this.$t('listToConfirm'),
+                color: '#FDA71C'
              })
-              color.push('#26BD4B')
-            } else if (res.inventoryAffirmStatus == 'Rejected' || res.taskAffirmStatus == 'Rejected') {
+              color.push('#FDA71C')
+            } else if (res.taskAffirmStatus == 'Accepted') {
              data.push({
-                value: res.inventoryAffirmStatusCount || res.taskAffirmStatusCount,
+                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'),
-                status: res.inventoryAffirmStatus || res.taskAffirmStatus
+                color: '#E83030'
              })
              color.push('#E83030')
            }
          })
        }
-        if (num == 1) {
-          this.mainLeftEcharts(data, color)
-        } else {
-          this.mainRightEcharts(data, color)
-        }
+        this.getEcharts('main-left', this.$t('regulatoryTaskConfirmation'), color, data)
      },
-      dataEchartsOne(val, num) {
+      mainRightEcharts(dataSource){
        let data = []
        let color = []
-        if (val && val.length > 0) {
-          val.forEach((res) => {
-              if (res.designFlowTaskStatus == 'No rating' || res.prehomoFlowTaskStatus == 'No rating' || res.verifyFlowTaskStatus == 'No rating') {
-                data.push({
-                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
-                  name: this.$t('toBeConfirmed'),
-                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
-                })
-                color.push('#00B3BE')
-              } else if (res.designFlowTaskStatus == 'Compliance' || res.prehomoFlowTaskStatus == 'Compliance' || res.verifyFlowTaskStatus == 'Compliance') {
-                data.push({
-                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
-                  name: this.$t('accord'),
-                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
-                })
-                color.push('#26BD4B')
-              } else if (res.designFlowTaskStatus == 'Non-Compliance' || res.prehomoFlowTaskStatus == 'Non-Compliance' || res.verifyFlowTaskStatus == 'Non-Compliance') {
-                data.push({
-                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
-                  name: this.$t('nonConformity'),
-                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
-                })
-                color.push('#E83030')
-              } else if (res.designFlowTaskStatus == 'To be tracked' || res.prehomoFlowTaskStatus == 'To be tracked' || res.verifyFlowTaskStatus == 'To be tracked') {
-                data.push({
-                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
-                  name: this.$t('Tracked'),
-                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
-                })
-                color.push('#FDA71C')
-              } else if (res.designFlowTaskStatus == 'NA' || res.prehomoFlowTaskStatus == 'NA' || res.verifyFlowTaskStatus == 'NA') {
-                data.push({
-                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
-                  name: this.$t('notInvolved'),
-                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
-                })
-                color.push('#707486')
-              } else if (res.designFlowTaskStatus == 'Termination of task' || res.prehomoFlowTaskStatus == 'Termination of task' || res.verifyFlowTaskStatus == 'Termination of task') {
-                data.push({
-                  value: res.designFlowTaskStatusCount || res.prehomoFlowTaskStatusCount || res.verifyFlowTaskStatusCount,
-                  name: this.$t('taskTermination'),
-                  status: res.designFlowTaskStatus || res.prehomoFlowTaskStatus || res.verifyFlowTaskStatus
-                })
-                color.push('#E83030')
-              }
+        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 == 'Review and pass') {
+              data.push({
+                value: res.taskAffirmStatusCount,
+                name: this.$t('reviewAndPass'),
+                color: '#26BC4B'
+              })
+              color.push('#26BC4B')
+            } else if (res.taskAffirmStatus == 'Review and return') {
+              data.push({
+                value: res.taskAffirmStatusCount,
+                name: this.$t('reviewAndReturn'),
+                color: '#E83030'
+              })
+              color.push('#E83030')
            }
-          )
-        }
-        if (num == 1) {
-          this.mainLeftContentEcharts(data, color)
-        } else if (num == 2) {
-          this.mainRightContentEcharts(data, color)
-        } else if (num == 3) {
-          this.mainBottomEcharts(data, color)
+          })
        }
+        this.getEcharts('main-right', this.$t('preHomoFlow'), color, data)
      },
-      getEcharts(chart, title, color, data, num) {
+      mainBottomEcharts(dataSource){
+        let data = []
+        let color = []
+        if (dataSource && dataSource.length > 0) {
+          dataSource.forEach(res => {
+            if (res.certificationProgress == 'Not start') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('Notatthe'),
+                color: '#00B3BE'
+              })
+              color.push('#00B3BE')
+            } else if (res.certificationProgress == 'In progress') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('inProgress'),
+                color: '#FDA71C'
+              })
+              color.push('#FDA71C')
+            } else if (res.certificationProgress == 'Test passed') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('experimentPassed'),
+                color: '#26BC4B'
+              })
+              color.push('#26BC4B')
+            } else if (res.certificationProgress == 'Test failed') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('experimentFailed'),
+                color: '#E83030'
+              })
+              color.push('#E83030')
+            }else if (res.certificationProgress == 'Component report not submitted') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('componentReportNotSubmitted'),
+                color: '#FDA71C'
+              })
+              color.push('#FDA71C')
+            }else if (res.certificationProgress == 'Component report submitted') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('componentReportSubmitted'),
+                color: '#6FD682'
+              })
+              color.push('#6FD682')
+            }else if (res.certificationProgress == 'Component report has been stored') {
+              data.push({
+                value: res.certificationProgressCount,
+                name: this.$t('componentReportHasBeenStored'),
+                color: '#26BC4B'
+              })
+              color.push('#26BC4B')
+            }
+          })
+        }
+        this.getEcharts('main-bottom', this.$t('CertificationProgress'), color, data)
+      },
+      getEcharts(chart, title, color, data) {
        var myChart = echarts.init(document.getElementById(chart))
        myChart.setOption({
          title: {
@@ -207,44 +259,50 @@
            }
          ]
        })
-        myChart.on('click', (params) => {
-          let query = {
-            title: params.seriesName,
-            projectLibraryId: this.$route.query.id
-          }
-          if (num === 1) {
-            query.operatorType = 'queryListingToConfirmStatistics'
-            query.inventoryAffirmStatus = params.data.status
-          } else if (num === 2) {
-            query.operatorType = 'queryTaskToConfirmStatistics'
-            query.taskAffirmStatus = params.data.status
-          } else if (num === 3) {
-            query.operatorType = 'queryDesignStatistics'
-            query.designFlowTaskStatus = params.data.status
-          } else if (num === 4) {
-            query.operatorType = 'queryPrehomoStatistics'
-            query.prehomoFlowTaskStatus = params.data.status
-          } else if (num === 5) {
-            query.operatorType = 'queryVerifyStatistics'
-            query.verifyFlowTaskStatus = params.data.status
-          }
-          this.$refs.responsibilityListRef.getData(query)
-        })
-      }
-      ,
-      mainLeftEcharts(data, color) {
-        this.getEcharts('main-left', this.$t('certificationTaskConfirmation'), color, data, 1)
-      }
-      ,
-      mainRightEcharts(data, color) {
-        this.getEcharts('main-right', this.$t('preHomoFlow'), color, data, 2)
-      }
-      ,
-      mainBottomEcharts(data, color) {
-        this.getEcharts('main-bottom', this.$t('CertificationProgress'), color, data, 5)
+        // myChart.on('click', (params) => {
+        //   let query = {
+        //     title: params.seriesName,
+        //     projectLibraryId: this.$route.query.id
+        //   }
+        //   if (num === 1) {
+        //     query.operatorType = 'queryListingToConfirmStatistics'
+        //     query.inventoryAffirmStatus = params.data.status
+        //   } else if (num === 2) {
+        //     query.operatorType = 'queryTaskToConfirmStatistics'
+        //     query.taskAffirmStatus = params.data.status
+        //   } else if (num === 3) {
+        //     query.operatorType = 'queryDesignStatistics'
+        //     query.designFlowTaskStatus = params.data.status
+        //   } else if (num === 4) {
+        //     query.operatorType = 'queryPrehomoStatistics'
+        //     query.prehomoFlowTaskStatus = params.data.status
+        //   } else if (num === 5) {
+        //     query.operatorType = 'queryVerifyStatistics'
+        //     query.verifyFlowTaskStatus = params.data.status
+        //   }
+        //   this.$refs.responsibilityListRef.getData(query)
+        // })
      },
+
      responsibility(item) {
        this.$emit('currentStatus', item)
+      },
+      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')
+        }
+        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 || [])
+        }
      }
    }
  }
@@ -263,6 +321,7 @@
      border: 2px #eff1f3 solid;
      border-radius: 6px;
      margin-top: 4px;
+
      #main-left {
        width: 100%;
        height: 100%;
@@ -277,6 +336,7 @@
      border: 2px #eff1f3 solid;
      border-radius: 6px;
      margin-top: 4px;
+
      #main-right {
        width: 100%;
        height: 100%;
@@ -284,11 +344,49 @@
        box-sizing: border-box;
      }
    }
-    .box-content-bottom{
+
+    .box-content-bottom {
      width: 100%;
      height: 346px;
      border: 2px #eff1f3 solid;
+      position: relative;
      border-radius: 6px;
+
+      .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%;
@@ -297,4 +395,5 @@
      }
    }
  }
+
 </style>