完成工作项统计

src/components/echartsBar.vue

@@ -0,0 +1,137 @@
+<template>
+  <div id="projectechartsBar" ref="projectechartsBar">
+    <!-- 准备具有宽高的容器 -->
+    <div style="width: 100%; height: 100%" ref="chart"></div>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+
+let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
+require('echarts/lib/chart/bar'); //按需引入 bar = 柱状图
+
+export default {
+  data() {
+    return {
+      chart: null,
+
+
+    }
+  },
+  props: {
+    task: {}
+  },
+
+  watch: {
+    task: function (val) {
+       this.initEcharts()
+    }
+  },
+  methods: {
+
+
+    // 获取配置
+    init() {
+      console.log(this.$refs.chart);
+      // 指定图表的配置项和数据
+      this.chart = Echarts.init(this.$refs.chart);
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+          }
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value'
+        },
+        yAxis: {
+          type: 'category',
+          data: ['需求', '任务', '缺陷']
+        },
+        color: [ '#79bbff', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
+
+        series: [
+          {
+            name: '未完成',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+              color:'#FFFFFF',
+              formatter:function (params) {
+                if(params.value==0){  //为0时不显示
+                  return ''
+                }else{
+                  return params.value
+                }
+              }
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [this.task.require.totalNum - this.task.require.completeNum, this.task.task.totalNum - this.task.task.completeNum, this.task.flaw.totalNum - this.task.flaw.completeNum]
+          },
+
+          {
+            name: '已完成',
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true,
+              color:'#FFFFFF',
+              formatter:function (params) {
+                if(params.value==0){  //为0时不显示
+                  return ''
+                }else{
+                  return params.value
+                }
+              }
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [this.task.require.completeNum, this.task.task.completeNum, this.task.flaw.completeNum]
+          },
+
+        ]
+      };
+
+      this.chart.setOption(option);
+    },
+
+    initEcharts() {
+      this.$nextTick(() => {
+        this.init()
+
+      });
+      //this.chart.setOption(option);
+      window.addEventListener("resize", function () {
+        this.chart.resize();
+      });
+    }
+
+  }
+};
+</script>
+
+<style scoped lang="scss">
+#echartsBar {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .echarts_box {
+    flex-shrink: 0;
+  }
+
+}
+</style>

src/components/echartsPie.vue

@@ -72,7 +72,7 @@ export default {
             },
             emphasis: {
               label: {
-                show: true,
+                show: false,
                 fontSize: '40',
                 fontWeight: 'bold'
               }
@@ -88,7 +88,7 @@ export default {
           type: 'scroll',
           orient: 'vertical',
           // right: 10,
-          left:350,
+          left: '80%',
           top: 20,
           bottom: 20,
         }

src/views/ProjectInfo.vue

@@ -47,8 +47,22 @@
       </div>
       <div style="flex: 1;margin-left: 30px;height: 100%;display: flex;flex-direction: column">
         <p class="p-title" style="margin-left: 10px">工作项统计</p>
-        <div style="flex:1;margin-top: 30px;padding: 20px;
+        <div
-        display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;">
+            style="flex:1;margin-top: 30px;padding: 10px;
+        display: flex;flex-direction:row; justify-content: space-between;background-color: white; border-radius: 10px;">
+          <div style="width: 50%;">
+            <p class="p-subtitle" style="margin-left: 10px;margin-top: 10px">项目</p>
+            <echartsBar :task="taskStat"  style="height: 190px; weight: 100%"></echartsBar></div>
+          <div style="width: 50%;">
+            <p class="p-subtitle" style="margin-left: 10px;margin-top: 10px">个人</p>
+            <echartsBar :task="selftaskStat"  style="height: 190px; weight: 100%"></echartsBar></div>
+          <!-- <div style="width: 50%;"><selfechartsBar  style="height: 190px; weight: 100%"></selfechartsBar></div> -->
+          <!-- <el-tabs :tab-position="tabPosition" style="height: 200px; margin-top: -15px;" class="demo-tabs">
+            <el-tab-pane label="项目">
+              <echartsBar  style="height: 190px; weight: 100%"></echartsBar>
+            </el-tab-pane>
+            <el-tab-pane label="个人"><echartsBar  style="height: 190px; weight: 100%"></echartsBar></el-tab-pane>
+          </el-tabs> -->
 
         </div>
       </div>
@@ -204,7 +218,7 @@
     <div style="height: 500px;margin: 0 30px 30px 30px;
                 display: flex;flex-direction: row;justify-content: space-between">
       <div style="flex: 1;height: 100%;display: flex;flex-direction: column">
-        <p class="p-title" style="margin-left: 10px">工作项统计</p>
+        <p class="p-title" style="margin-left: 10px">工作项完成趋势</p>
         <div style="flex:1;margin-top: 30px;padding: 20px;
         display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;align-items: stretch">
           <TendencyChart style="flex: 1;"></TendencyChart>
@@ -246,7 +260,7 @@
       title="提示"
       v-model="dialogVisible"
       width="30%"
-      :before-close="handleClose">
+     >
     <div>确认删除该公告?</div>
     <template #footer>
       <span slot="footer" class="dialog-footer">
@@ -268,10 +282,10 @@ import request from "@/utils/request";
 import moment from "moment";
 import EditProjectDialog from "../components/EditProjectDialog";
 import TendencyChart from "../components/TendencyChart";
-
+import EchartsBar from "../components/echartsBar"
 export default {
   name: "ProjectInfo",
-  components: {EditProjectDialog, TendencyChart},
+  components: {EditProjectDialog, TendencyChart, EchartsBar},
   data() {
     return {
       project: {
@@ -299,6 +313,9 @@ export default {
       completeNum: 0,
       totalNum: 0,
 
+      taskStat: {},
+      selftaskStat: {},
+
       projectClasses: [],
       projectSubClasses: [],
 
@@ -388,6 +405,8 @@ export default {
     this.getProjectStats();
     this.getProjectClass();
     this.getannouncementList();
+    this.getTaskStats();
+    this.getselfTaskStats();
   },
   mounted() {
     const that = this
@@ -397,6 +416,46 @@ export default {
     };
   },
   methods: {
+    getTaskStats() {
+      const that = this
+      request({
+        url: 'project/' + this.$route.params.projectId + '/task/stats' ,
+        method: 'get'
+
+      }).then(response => {
+        if (response.data.code === 200) {
+          that.taskStat = {
+            require: response.data.data.records[0],
+            task: response.data.data.records[1],
+            flaw: response.data.data.records[2]
+          }
+
+
+        }
+      }).catch(function (error) {
+        console.log(error)
+      })
+    },
+    getselfTaskStats() {
+      const that = this
+      request({
+        url: 'project/' + this.$route.params.projectId + '/task/stats/'+this.$store.state.staff.staffId ,
+        method: 'get'
+
+      }).then(response => {
+        if (response.data.code === 200) {
+          that.selftaskStat = {
+            require: response.data.data.records[0],
+            task: response.data.data.records[1],
+            flaw: response.data.data.records[2]
+          }
+
+
+        }
+      }).catch(function (error) {
+        console.log(error)
+      })
+    },
     // 删除公告
     delxtggsj() {
       var that = this;