对接项目当前状态

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

@@ -1,27 +1,59 @@
 <template>
-  <div class="box-content">
-    <div class="box-content-left">
-      <div id="main-left"></div>
+  <div>
+    <div class="box-content">
+      <div class="box-content-left">
+        <div id="main-left"></div>
+      </div>
+      <div class="box-content-right">
+        <div id="main-right"></div>
+      </div>
     </div>
-    <div class="box-content-right">
-      <div id="main-right"></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 id="main-bottom"></div>
+      </div>
     </div>
   </div>
+
 </template>
 
 <script>
   import * as echarts from 'echarts'
+  import { getAction, postAction, deleteAction, downloadFile } from '@/api/manage'
 
   export default {
     name: 'DeliverableStatusEchart',
     data() {
-      return {}
+      return {
+        url: {
+          getProjectDetailsStatistics: '/project/projectLibraryBase/getProjectDetailsStatistics'
+        },
+      }
     },
     mounted() {
-      this.mainLeftEcharts()
+      this.mainLeftContentEcharts()
       this.mainRightEcharts()
+      this.mainRightContentEcharts()
+      this.mainBottomEcharts()
+      this.getData()
     },
     methods: {
+      getData() {
+        getAction(this.url.getProjectDetailsStatistics, { id: this.$route.query.id }).then((res) => {
+          if (res.success) {
+            let listingToConfirmMap = res.result.listingToConfirmMap.listingToConfirmMapList || []
+            this.mainLeftEcharts(listingToConfirmMap)
+          }
+        })
+      },
       getEcharts(chart, title, color, data) {
         var myChart = echarts.init(document.getElementById(chart))
         myChart.setOption({
@@ -60,19 +92,51 @@
       },
       mainLeftEcharts() {
         let data = [
-          { value: 1048, name: '待审查' },
-          { value: 735, name: '审查中' },
-          { value: 580, name: '审查完成' }
+          { value: 1048, name: this.$t('notLaunch') },
+          { value: 735, name: this.$t('toBeConfirmed') },
+          { value: 580, name: this.$t('accept') },
+          { value: 580, name: this.$t('refuse') }
         ]
-        this.getEcharts('main-left', '内部审查进度', ['#00BEBE', '#FDB033', '#2F8DF3'], data)
+        this.getEcharts('main-left', this.$t('listConfirmationProgress'), ['#00BEBE', '#FDB033', '#2F8DF3', '#9DB9D4'], data)
       },
       mainRightEcharts() {
         let data = [
-          { value: 1048, name: '待审查' },
-          { value: 735, name: '审查中' },
-          { value: 580, name: '审查完成' }
+          { value: 1048, name: this.$t('notLaunch') },
+          { value: 735, name: this.$t('toBeConfirmed') },
+          { value: 580, name: this.$t('accept') },
+          { value: 580, name: this.$t('refuse') }
         ]
-        this.getEcharts('main-right', '法规握手进度', ['#00BEBE', '#FDB033', '#2F8DF3'], data)
+        this.getEcharts('main-right', this.$t('taskConfirmationProgress'), ['#00BEBE', '#FDB033', '#2F8DF3', '#9DB9D4'], data)
+      },
+      mainLeftContentEcharts() {
+        let data = [
+          { value: 1048, name: this.$t('toBeConfirmed') },
+          { value: 735, name: this.$t('accord') },
+          { value: 580, name: this.$t('nonConformity') },
+          { value: 580, name: this.$t('Tracked') },
+          { value: 580, name: this.$t('notInvolved') }
+        ]
+        this.getEcharts('main-left-content', this.$t('designComplianceConfirmationProgress'), ['#37CED1', '#2F8DF3', '#FF8543', '#FDB033', '#9DB9D4'], data)
+      },
+      mainRightContentEcharts() {
+        let data = [
+          { value: 1048, name: this.$t('toBeConfirmed') },
+          { value: 735, name: this.$t('accord') },
+          { value: 580, name: this.$t('nonConformity') },
+          { value: 580, name: this.$t('Tracked') },
+          { value: 580, name: this.$t('notInvolved') }
+        ]
+        this.getEcharts('main-right-content', this.$t('preHomeConfirmProgress'), ['#37CED1', '#2F8DF3', '#FF8543', '#FDB033', '#9DB9D4'], data)
+      },
+      mainBottomEcharts() {
+        let data = [
+          { value: 1048, name: this.$t('toBeConfirmed') },
+          { value: 735, name: this.$t('accord') },
+          { value: 580, name: this.$t('nonConformity') },
+          { value: 580, name: this.$t('Tracked') },
+          { value: 580, name: this.$t('notInvolved') }
+        ]
+        this.getEcharts('main-bottom', this.$t('verificationComplianceConfirmationProgress'), ['#37CED1', '#2F8DF3', '#FF8543', '#FDB033', '#9DB9D4'], data)
       }
     }
   }
@@ -83,6 +147,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
+    margin-bottom: 20px;
 
     .box-content-left {
       width: calc(50% - 12px);
@@ -95,6 +160,20 @@
         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;
+        box-sizing: border-box;
+      }
     }
 
     .box-content-right {
@@ -108,6 +187,13 @@
         padding: 24px;
         box-sizing: border-box;
       }
+
+      #main-right-content {
+        width: 100%;
+        height: 100%;
+        padding: 24px;
+        box-sizing: border-box;
+      }
     }
   }
 </style>