修改项目详情的图表

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

@@ -102,25 +102,15 @@
       </div>
       <div class="process-content-right-xian"></div>
     </div>
-    <a-tabs style="margin-top: 20px" default-active-key="1" class="ant-tabs">
-      <a-tab-pane key="1" :tab="$t('DeliverableStatus')">
-        <div class="box-content">
-          <div class="box-content-left">
-            <div id="main"></div>
-          </div>
-          <div class="box-content-right">
-
-          </div>
-        </div>
+    <a-tabs style="margin-top: 20px" v-model="activeKey" class="ant-tabs">
+      <a-tab-pane :key="$t('CurrentStatusOfTheProject')" :tab="$t('CurrentStatusOfTheProject')">
+        <currentStatusOfTheProjectEcharts v-if="activeKey == $t('CurrentStatusOfTheProject')"/>
       </a-tab-pane>
-      <a-tab-pane key="2" :tab="$t('CurrentStatusOfTheProject')">
-        Tab 2
+      <a-tab-pane :key="$t('DeliverableStatus')" :tab="$t('DeliverableStatus')">
+        <deliverableStatusEchart v-if="activeKey == $t('DeliverableStatus')"/>
       </a-tab-pane>
-      <a-tab-pane key="3" :tab="$t('CertificationProgress')">
-        Tab 3
-      </a-tab-pane>
-      <a-tab-pane key="4" :tab="$t('NonConformance')">
-        Tab 4
+      <a-tab-pane :key="$t('CertificationProgress')" :tab="$t('CertificationProgress')">
+        <certificationProgressEchart v-if="activeKey == $t('CertificationProgress')"/>
       </a-tab-pane>
     </a-tabs>
     <listOfRelevantPersonnel ref="listOfRelevantPersonnelRef"/>
@@ -135,17 +125,24 @@
   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 certificationProgressEchart from './certificationProgressEchart'
 
   export default {
     name: 'ProjectDetails',
     components: {
       listOfRelevantPersonnel,
       addModel,
-      settingList
+      settingList,
+      currentStatusOfTheProjectEcharts,
+      deliverableStatusEchart,
+      certificationProgressEchart
     },
     data() {
       return {
         queryForm: {},
+        activeKey: this.$t('CurrentStatusOfTheProject'),
         url: {
           queryById: 'project/projectLibraryBase/queryById',
           add: 'project/projectLibraryBase/add',
@@ -161,7 +158,6 @@
     mounted() {
       this.getForm()
       this.getSetting()
-      this.mainEcharts()
     },
     methods: {
       getForm() {
@@ -185,26 +181,6 @@
       settingListForm() {
         this.getSetting()
       },
-      mainEcharts() {
-        var myChart = echarts.init(document.getElementById('main'))
-        myChart.setOption({
-          title: {
-            text: 'ECharts 入门示例'
-          },
-          tooltip: {},
-          xAxis: {
-            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
-          },
-          yAxis: {},
-          series: [
-            {
-              name: '销量',
-              type: 'bar',
-              data: [5, 20, 36, 10, 10, 20]
-            }
-          ]
-        })
-      },
       ListOfRelevantPersonnelClick() {
         this.$refs.listOfRelevantPersonnelRef.getData()
       },
@@ -329,29 +305,6 @@
     }
   }
 
-  .box-content {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-
-    .box-content-left {
-      width: calc(50% - 12px);
-      height: 300px;
-      border: 2px #eff1f3 solid;
-
-      #main {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    .box-content-right {
-      width: calc(50% - 12px);
-      height: 300px;
-      border: 2px #eff1f3 solid;
-    }
-  }
-
   @media screen and (min-width: 600px) and (max-width: 1600px) {
 
     .process-content-right-top {