修改项目详情的图表

jero-web/src/common/lang/en-us.js

@@ -743,4 +743,5 @@ module.exports = {
   replyToComments:'Reply to comments',
   noComment:'No comment',
   theReceived:'The final version can be made only when the list confirmation status and task confirmation status of all data are received',
+  notEvaluated:'Not evaluated',
 }

jero-web/src/common/lang/zh-cn.js

@@ -748,4 +748,5 @@ module.exports = {
   replyToComments:'回复评论',
   noComment:'暂无评论',
   theReceived:'所有数据的清单确认状态和任务确认状态都为接受才可以定版',
+  notEvaluated:'未评估',
 }

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 {

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

@@ -0,0 +1,104 @@
+<template>
+  <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>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+
+  export default {
+    name: 'certificationProgress',
+    data() {
+      return {}
+    },
+    mounted() {
+      this.mainLeftEcharts()
+    },
+    methods: {
+      getEcharts(chart, title, color, data) {
+        var myChart = echarts.init(document.getElementById(chart))
+        myChart.setOption({
+          title: {
+            text: title
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          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
+            }
+          ]
+        })
+      },
+      mainLeftEcharts() {
+        let data = [
+          { value: 1048, name: '待审查' },
+          { value: 735, name: '审查中' },
+          { value: 580, name: '审查完成' }
+        ]
+        this.getEcharts('main-left', '内部审查进度', ['#00BEBE', '#FDB033', '#2F8DF3'], data)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .box-content {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .box-content-left {
+      width: calc(50% - 12px);
+      height: 398px;
+      border: 2px #eff1f3 solid;
+
+      #main-left {
+        width: 100%;
+        height: 100%;
+        padding: 24px;
+        box-sizing: border-box;
+      }
+    }
+
+    .box-content-right {
+      width: calc(50% - 12px);
+      height: 398px;
+      border: 2px #eff1f3 solid;
+
+      #main-right {
+        width: 100%;
+        height: 100%;
+        padding: 24px;
+        box-sizing: border-box;
+      }
+    }
+  }
+</style>

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

@@ -9,6 +9,9 @@
       @close="handleCancel"
       :visible="visible">
       <div class="button-box">
+        <j-input class="box-input" :placeholder="$t('PleaseEnter')+$t('comment')"
+                 v-model="commentText"></j-input>
+        <a-button @click="submitQuery" style="margin-right: 8px;" type="primary">{{$t('query')}}</a-button>
         <a-button @click="handleSubmit" type="primary">{{$t('publishComment')}}</a-button>
       </div>
       <div class="comment-box" v-if="dataList && dataList.length > 0">
@@ -29,8 +32,8 @@
               <a-icon type="message"/>
             </div>
           </div>
-          <div class="inside-box" v-if="item.ProjectCommentVOList && item.ProjectCommentVOList.length > 0">
-            <div class="box-content-inside" v-for="(val,indexOne) in item.ProjectCommentVOList" :key="indexOne">
+          <div class="inside-box" v-if="item.projectCommentVOList && item.projectCommentVOList.length > 0">
+            <div class="box-content-inside" v-for="(val,indexOne) in item.projectCommentVOList" :key="indexOne">
               <div class="img-box">
                 <img src="../../../assets/daiban.png" class="img" alt="">
               </div>
@@ -41,7 +44,7 @@
               <div class="box-text-text">
                 {{val.content}}
               </div>
-              <div class="box-icon" @click="messageClick(val)">
+              <div class="box-icon" @click="messageClick(item)">
                 <a-icon type="message"/>
               </div>
             </div>
@@ -99,6 +102,7 @@
         visible: false,
         dataList: [],
         formInline: {},
+        commentText:'',
         loading: false,
         title: this.$t('comment'),
         confirmLoading: false,
@@ -143,6 +147,9 @@
         this.$nextTick(() => {
           this.$refs.ruleForm.clearValidate()
         })
+      },
+      submitQuery(){
+
       },
       getList() {
         this.loading = true
@@ -336,12 +343,6 @@
     line-height: 48px;
   }
 
-  .box-input {
-    display: inline-block;
-    height: 38px;
-    width: 100%;
-  }
-
   .itemModel {
     width: calc(100% - 64px);
     display: inline-block;
@@ -361,4 +362,8 @@
     text-align: center;
     margin-top: 40px;
   }
+  .box-input{
+     width: calc(100% - 168px);
+     margin-right: 8px;
+  }
 </style>

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

@@ -0,0 +1,145 @@
+<template>
+  <div class="box-content">
+    <div class="box-content-left">
+      <div id="main-left"></div>
+    </div>
+    <div class="box-content-right">
+      <div id="main-right">
+        <a-table
+          ref="table"
+          :loading="loading"
+          :pagination="false"
+          :scroll="{x: true}"
+          :data-source="dataSource"
+          :columns="columns"
+        >
+        </a-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+
+  export default {
+    name: 'CurrentStatusOfTheProjectEcharts',
+    data() {
+      return {
+        loading:false,
+        dataSource:[],
+        columns:[
+          {
+            title: this.$t('nonConformity'),
+            align: 'center',
+            dataIndex: 'nonConformity',
+            scopedSlots: { customRender: 'titleName' }
+          },
+          {
+            title: this.$t('Tracked'),
+            align: 'center',
+            dataIndex: 'Tracked',
+            scopedSlots: { customRender: 'titleName' }
+          },
+          {
+            title: this.$t('accord'),
+            align: 'center',
+            dataIndex: 'accord',
+            scopedSlots: { customRender: 'titleName' }
+          },
+          {
+            title: this.$t('notEvaluated'),
+            align: 'center',
+            dataIndex: 'notEvaluated',
+            scopedSlots: { customRender: 'titleName' }
+          },
+        ],
+      }
+    },
+    mounted() {
+      this.mainLeftEcharts()
+    },
+    methods: {
+      getEcharts(chart, title, color, data) {
+        var myChart = echarts.init(document.getElementById(chart))
+        myChart.setOption({
+          title: {
+            text: title
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          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
+            }
+          ]
+        })
+      },
+      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)
+      },
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .box-content {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .box-content-left {
+      width: calc(50% - 12px);
+      height: 398px;
+      border: 2px #eff1f3 solid;
+
+      #main-left {
+        width: 100%;
+        height: 100%;
+        padding: 24px;
+        box-sizing: border-box;
+      }
+    }
+
+    .box-content-right {
+      width: calc(50% - 12px);
+      height: 398px;
+      border: 2px #eff1f3 solid;
+
+      #main-right {
+        width: 100%;
+        height: 100%;
+        padding: 24px;
+        box-sizing: border-box;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,113 @@
+<template>
+  <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>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+
+  export default {
+    name: 'DeliverableStatusEchart',
+    data() {
+      return {}
+    },
+    mounted() {
+      this.mainLeftEcharts()
+      this.mainRightEcharts()
+    },
+    methods: {
+      getEcharts(chart, title, color, data) {
+        var myChart = echarts.init(document.getElementById(chart))
+        myChart.setOption({
+          title: {
+            text: title
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          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
+            }
+          ]
+        })
+      },
+      mainLeftEcharts() {
+        let data = [
+          { value: 1048, name: '待审查' },
+          { value: 735, name: '审查中' },
+          { value: 580, name: '审查完成' }
+        ]
+        this.getEcharts('main-left', '内部审查进度', ['#00BEBE', '#FDB033', '#2F8DF3'], data)
+      },
+      mainRightEcharts() {
+        let data = [
+          { value: 1048, name: '待审查' },
+          { value: 735, name: '审查中' },
+          { value: 580, name: '审查完成' }
+        ]
+        this.getEcharts('main-right', '法规握手进度', ['#00BEBE', '#FDB033', '#2F8DF3'], data)
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .box-content {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .box-content-left {
+      width: calc(50% - 12px);
+      height: 398px;
+      border: 2px #eff1f3 solid;
+
+      #main-left {
+        width: 100%;
+        height: 100%;
+        padding: 24px;
+        box-sizing: border-box;
+      }
+    }
+
+    .box-content-right {
+      width: calc(50% - 12px);
+      height: 398px;
+      border: 2px #eff1f3 solid;
+
+      #main-right {
+        width: 100%;
+        height: 100%;
+        padding: 24px;
+        box-sizing: border-box;
+      }
+    }
+  }
+</style>