对接项目当前状态

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

@@ -1,5 +1,11 @@
 <template>
   <div class="box-content">
+    <div class="headerText">
+      {{this.$t('redSchedule')}};
+      {{this.$t('yellowSchedule')}};
+      {{this.$t('greenRequirements')}};
+      {{this.$t('blueUndeterminedState')}};
+    </div>
     <div class="box-content-left">
       <div id="main-left"></div>
     </div>
@@ -13,6 +19,9 @@
           :data-source="dataSource"
           :columns="columns"
         >
+          <template slot="footer" slot-scope="currentPageData">
+            {{$t('totalTable')}}:{{currentProjectStatusTotal}}
+          </template>
         </a-table>
       </div>
     </div>
@@ -29,46 +38,45 @@
       return {
         loading: false,
         dataSource: [],
+        currentProjectStatusTotal: 0,
         url: {
           getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
         },
         columns: [
           {
-            title: this.$t('nonConformity'),
+            title: this.$t('red'),
             align: 'center',
-            dataIndex: 'nonConformity',
-            scopedSlots: { customRender: 'titleName' }
+            dataIndex: 'redCount'
           },
           {
-            title: this.$t('Tracked'),
+            title: this.$t('yellow'),
             align: 'center',
-            dataIndex: 'Tracked',
-            scopedSlots: { customRender: 'titleName' }
+            dataIndex: 'yellowCount'
           },
           {
-            title: this.$t('accord'),
+            title: this.$t('green'),
             align: 'center',
-            dataIndex: 'accord',
-            scopedSlots: { customRender: 'titleName' }
+            dataIndex: 'greenCount'
           },
           {
-            title: this.$t('notEvaluated'),
+            title: this.$t('blue'),
             align: 'center',
-            dataIndex: 'notEvaluated',
-            scopedSlots: { customRender: 'titleName' }
+            dataIndex: 'blueCount'
           }
         ]
       }
     },
     mounted() {
-      this.mainLeftEcharts()
       this.getData()
     },
     methods: {
       getData() {
         getAction(this.url.getProjectDetailsStatistics, { id: this.$route.query.id }).then((res) => {
           if (res.success) {
-
+            this.dataSource = [{}]
+            let dataSource = res.result.currentProjectStatusMap.currentProjectStatusMapList || []
+            this.mainLeftEcharts(dataSource)
+            this.currentProjectStatusTotal = res.result.currentProjectStatusMap.currentProjectStatusTotal
           }
         })
       },
@@ -108,14 +116,43 @@
           ]
         })
       },
-      mainLeftEcharts() {
-        let data = [
-          { value: 1048, name: this.$t('nonConformity') },
-          { value: 735, name: this.$t('Tracked') },
-          { value: 580, name: this.$t('accord') },
-          { value: 580, name: this.$t('notEvaluated') }
-        ]
-        this.getEcharts('main-left', this.$t('CurrentStatusOfTheProject'), ['#2F8DF3', '#FF8543', '#37CED1', '#FDB033', '#9DB9D4'], data)
+      mainLeftEcharts(dataSource) {
+        let data = []
+        let color = []
+        if (dataSource && dataSource.length > 0) {
+          dataSource.forEach(res => {
+            if (res.color == '0') {
+              data.push({
+                value: res.conditionAssessmentCount,
+                name: this.$t('blue')
+              })
+              color.push('#00B3BE')
+              this.dataSource[0].blueCount = res.conditionAssessmentCount
+            } else if (res.color == '1') {
+              data.push({
+                value: res.conditionAssessmentCount,
+                name: this.$t('red')
+              })
+              color.push('#E83030')
+              this.dataSource[0].redCount = res.conditionAssessmentCount
+            } else if (res.color == '2') {
+              data.push({
+                value: res.conditionAssessmentCount,
+                name: this.$t('yellow')
+              })
+              color.push('#FDA71C')
+              this.dataSource[0].yellowCount = res.conditionAssessmentCount
+            } else if (res.color == '3') {
+              data.push({
+                value: res.conditionAssessmentCount,
+                name: this.$t('green')
+              })
+              this.dataSource[0].greenCount = res.conditionAssessmentCount
+              color.push('#26BD4B')
+            }
+          })
+        }
+        this.getEcharts('main-left', this.$t('CurrentStatusOfTheProject'), color, data)
       }
 
     }
@@ -130,6 +167,7 @@
 
     .box-content-left {
       width: calc(50% - 12px);
+      margin-top: 30px;
       height: 398px;
       border: 2px #eff1f3 solid;
 
@@ -143,6 +181,7 @@
 
     .box-content-right {
       width: calc(50% - 12px);
+      margin-top: 30px;
       height: 398px;
       border: 2px #eff1f3 solid;
 
@@ -154,4 +193,11 @@
       }
     }
   }
+
+  .headerText {
+    margin-left: 30px;
+    color: #040B29;
+    font-weight: 400;
+    position: absolute;
+  }
 </style>