add statistics number

src/components/Mine.vue

@@ -1,6 +1,28 @@
 <template>
   <div class="mine-container">
-    <div id="myChart" style="width: 100%;height: 200px;padding-top: 40px"></div>
+    <!--    <div id="myChart" style="width: 100%;height: 200px;padding-top: 40px"></div>-->
+    <div class="project-statistics">
+      <el-card shadow="hover" v-if="showAcceptData" class="project-statistics-card">
+        <div class="project-statistics-card-title">已完成任务数量</div>
+        <div class="project-statistics-card-number">{{statisticData.finishedTaskCount || 0}}</div>
+      </el-card>
+      <el-card shadow="hover" v-if="showAcceptData" class="project-statistics-card">
+        <div class="project-statistics-card-title">未完成任务数量</div>
+        <div class="project-statistics-card-number">{{statisticData.unfinishedTaskCount || 0}}</div>
+      </el-card>
+      <el-card shadow="hover" v-if="showCreateData" class="project-statistics-card">
+        <div class="project-statistics-card-title">我的项目数量</div>
+        <div class="project-statistics-card-number">{{statisticData.myProjectCount || 0}}</div>
+      </el-card>
+      <el-card shadow="hover" v-if="showCreateData" class="project-statistics-card">
+        <div class="project-statistics-card-title">可接收项目数量</div>
+        <div class="project-statistics-card-number">{{statisticData.acceptableProjectCount || 0}}</div>
+      </el-card>
+      <el-card shadow="hover" v-if="showCreateData" class="project-statistics-card">
+        <div class="project-statistics-card-title">处理中项目数量</div>
+        <div class="project-statistics-card-number">{{statisticData.handlingProjectCount || 0}}</div>
+      </el-card>
+    </div>
     <div class="mine-body" style="text-align: center;">
       <el-tabs value="myProject" @tab-click="handleTabClick" v-loading="loading" style="width: 90%;margin-left: 5%">
         <el-tab-pane name="unFinishedTask">
@@ -115,194 +137,233 @@
   import echarts from 'echarts'
 
   export default {
-  name: 'Mine',
-  components: {TaskItem, ProjectItem},
-  watch: {
-    user (val) {
-      this.user = val
-    },
-    rolesPermissions (val) {
-      this.rolesPermissions = val
-    },
-    deep: true
-  },
-  data () {
-    return {
-      loading: false,
-      unFinishedTaskList: [],
-      finishedTaskList: [],
-      appliedProjectList: [],
-      myProjects: [],
-      handlingProjects: [],
-      acceptableProjects: [],
-      defaultValue: defaultValue,
-      myProjectNoticeCount: 0,
-      processProjectNoticeCount: 0,
-      acceptableProjectNoticeCount: 0,
-      rolesPermissions: {
-        isRegionManager: false,
-        isIndividualUser: false,
-        isEnterpriseUser: false,
-        isAgency: false,
-        isSystemAdministrator: false
+    name: 'Mine',
+    components: {TaskItem, ProjectItem},
+    watch: {
+      user(val) {
+        this.user = val
       },
-      user: {
-        userVO: {
-          id: '',
-          name: '',
-          photo: '',
-          roleList: []
-        }
+      rolesPermissions(val) {
+        this.rolesPermissions = val
+      },
+      deep: true
+    },
+    data() {
+      return {
+        statisticData: {},
+        loading: false,
+        unFinishedTaskList: [],
+        finishedTaskList: [],
+        appliedProjectList: [],
+        myProjects: [],
+        handlingProjects: [],
+        acceptableProjects: [],
+        defaultValue: defaultValue,
+        myProjectNoticeCount: 0,
+        processProjectNoticeCount: 0,
+        acceptableProjectNoticeCount: 0,
+        rolesPermissions: {
+          isRegionManager: false,
+          isIndividualUser: false,
+          isEnterpriseUser: false,
+          isAgency: false,
+          isSystemAdministrator: false
+        },
+        user: {
+          userVO: {
+            id: '',
+            name: '',
+            photo: '',
+            roleList: []
+          }
+        },
+        isLogin: false,
+        showCreateData: false,
+        showAcceptData: false
       }
-    }
-  },
-  mounted () {
-    this.$nextTick(() => {
-      this.init()
-    })
-  },
-  methods: {
-    init () {
-      this.setUserInfo()
-      this.setRolesPermissions()
-      this.loadData()
-      this.setEcharts()
-      // storageGet('user').then((res)=>{
-      //   this.user = res;
-      //   this.setRolesPermissions()
-      //   this.loadData()
-      // })
-
     },
-    loadData () {
-      this.showLoading()
-      Http.get(Apis.PAGE.MY_CROWD_TEST_PAGE.replace('{userId}', this.user.userVO.id)).then((res) => {
-        this.hideLoading()
-        this.processProjectNoticeCount = res.processProjectNoticeCount == null ? 0 : res.processProjectNoticeCount
-        this.myProjectNoticeCount = res.myProjectNoticeCount == null ? 0 : res.myProjectNoticeCount
-        this.acceptableProjectNoticeCount = res.acceptableProjectNoticeCount == null ? 0 : res.acceptableProjectNoticeCount
-        if (res.unfinishedTasks != null && res.unfinishedTasks.length > 0) {
-          this.unFinishedTaskList = res.unfinishedTasks
-        }
-        if (res.finishedTasks != null && res.finishedTasks.length > 0) {
-          this.finishedTaskList = res.finishedTasks
-        }
-        if (res.myProjects != null && res.myProjects.length > 0) {
-          this.myProjects = res.myProjects
-        }
-        if (res.handlingProjects != null && res.handlingProjects.length > 0) {
-          this.handlingProjects = res.handlingProjects
-        }
-        if (res.acceptableProjects != null && res.acceptableProjects.length > 0) {
-          this.acceptableProjects = res.acceptableProjects
-        }
-        // if (res.userVO != null && res.userVO.length > 0) {
-        //   this.user = res.userVO
-        // }
-      }).catch((error) => {
-        this.hideLoading()
-        notify('error', '加载失败，请稍后重试' )
+    mounted() {
+      this.$nextTick(() => {
+        this.init();
+        this.getProjectCount();
+        this.checkCreateProjectAuth();
+        this.checkAcceptTaskAuth()
       })
     },
-    setUserInfo () {
-      this.user = storageGet('user')
-    },
-    setRolesPermissions () {
-      this.rolesPermissions = storageGet('rolesPermissions')
-    },
-    setEcharts () {
-      // 基于准备好的dom，初始化echarts实例
-      let myChart = echarts.init(document.getElementById('myChart'))
-      // 绘制图表
-      var option = {
-        title: {
-          text: ''
-        },
-        tooltip: {
-          //trigger: 'axis'
-        },
-        legend: {
-          data: ['接收项目数量', '完成项目数量', '接收任务数量', '完成任务数量', '发布项目数量']
-        },
-        grid: {
-          left: '5%',
-          right: '8%',
-          bottom: '3%',
-          top: '10%',
-          containLabel: true
-        },
-        toolbox: {
-          feature: {
-            saveAsImage: {
-              title: '保存为图片',
-              name: '我的众测'
-            }
+    methods: {
+      init() {
+        this.setUserInfo()
+        this.setRolesPermissions()
+        this.loadData()
+        // this.setEcharts()
+        // storageGet('user').then((res)=>{
+        //   this.user = res;
+        //   this.setRolesPermissions()
+        //   this.loadData()
+        // })
+
+      },
+      loadData() {
+        this.showLoading()
+        Http.get(Apis.PAGE.MY_CROWD_TEST_PAGE.replace('{userId}', this.user.userVO.id)).then((res) => {
+          this.hideLoading()
+          this.processProjectNoticeCount = res.processProjectNoticeCount == null ? 0 : res.processProjectNoticeCount
+          this.myProjectNoticeCount = res.myProjectNoticeCount == null ? 0 : res.myProjectNoticeCount
+          this.acceptableProjectNoticeCount = res.acceptableProjectNoticeCount == null ? 0 : res.acceptableProjectNoticeCount
+          if (res.unfinishedTasks != null && res.unfinishedTasks.length > 0) {
+            this.unFinishedTaskList = res.unfinishedTasks
+          }
+          if (res.finishedTasks != null && res.finishedTasks.length > 0) {
+            this.finishedTaskList = res.finishedTasks
+          }
+          if (res.myProjects != null && res.myProjects.length > 0) {
+            this.myProjects = res.myProjects
+          }
+          if (res.handlingProjects != null && res.handlingProjects.length > 0) {
+            this.handlingProjects = res.handlingProjects
+          }
+          if (res.acceptableProjects != null && res.acceptableProjects.length > 0) {
+            this.acceptableProjects = res.acceptableProjects
+          }
+          // if (res.userVO != null && res.userVO.length > 0) {
+          //   this.user = res.userVO
+          // }
+        }).catch((error) => {
+          this.hideLoading()
+          notify('error', '加载失败，请稍后重试')
+        })
+      },
+      setUserInfo() {
+        if (storageGet('user') != null) {
+          this.isLogin = true;
+          this.user = storageGet('user')
+        }
+      },
+      setRolesPermissions() {
+        this.rolesPermissions = storageGet('rolesPermissions')
+      },
+      setEcharts() {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = echarts.init(document.getElementById('myChart'))
+        // 绘制图表
+        var option = {
+          title: {
+            text: ''
           },
-          right: '20px'
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: ['2020年1月', '2020年2月', '2020年3月', '2020年4月', '2020年5月', '2020年6月', '2020年7月']
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: [
-          {
-            name: '接收项目数量',
-            type: 'line',
-            stack: '总量',
-            data: [2, 3, 3, 2, 4, 5, 6]
+          tooltip: {
+            //trigger: 'axis'
           },
-          {
-            name: '完成项目数量',
-            type: 'line',
-            stack: '总量',
-            data: [2, 3, 3, 2, 4, 5, 6]
+          legend: {
+            data: ['接收项目数量', '完成项目数量', '接收任务数量', '完成任务数量', '发布项目数量']
           },
-          {
-            name: '接收任务数量',
-            type: 'line',
-            stack: '总量',
-            data: [22, 33, 41, 14, 55, 33, 41]
+          grid: {
+            left: '5%',
+            right: '8%',
+            bottom: '3%',
+            top: '10%',
+            containLabel: true
           },
-          {
-            name: '完成任务数量',
-            type: 'line',
-            stack: '总量',
-            data: [21, 33, 31, 14, 39, 33, 32]
+          toolbox: {
+            feature: {
+              saveAsImage: {
+                title: '保存为图片',
+                name: '我的众测'
+              }
+            },
+            right: '20px'
           },
-          {
-            name: '发布项目数量',
-            type: 'line',
-            stack: '总量',
-            data: [2, 3, 1, 0, 1, 2, 2]
-          }
-        ]
-      }
-      myChart.setOption(option)
-    },
-    showLoading () {
-      this.loading = true
-    },
-    hideLoading () {
-      this.loading = false
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['2020年1月', '2020年2月', '2020年3月', '2020年4月', '2020年5月', '2020年6月', '2020年7月']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+              name: '接收项目数量',
+              type: 'line',
+              stack: '总量',
+              data: [2, 3, 3, 2, 4, 5, 6]
+            },
+            {
+              name: '完成项目数量',
+              type: 'line',
+              stack: '总量',
+              data: [2, 3, 3, 2, 4, 5, 6]
+            },
+            {
+              name: '接收任务数量',
+              type: 'line',
+              stack: '总量',
+              data: [22, 33, 41, 14, 55, 33, 41]
+            },
+            {
+              name: '完成任务数量',
+              type: 'line',
+              stack: '总量',
+              data: [21, 33, 31, 14, 39, 33, 32]
+            },
+            {
+              name: '发布项目数量',
+              type: 'line',
+              stack: '总量',
+              data: [2, 3, 1, 0, 1, 2, 2]
+            }
+          ]
+        }
+        myChart.setOption(option)
+      },
+      showLoading() {
+        this.loading = true
+      },
+      hideLoading() {
+        this.loading = false
+      },
+      handleTabClick(event) {
+        if (event.name == 'myProject') {
+          //this.myProjectNoticeCount = 0
+        }
+        if (event.name == 'handlingProject') {
+          //this.processProjectNoticeCount = 0
+        }
+        console.log(event)
+      },
+      getProjectCount() {
+        Http.get(`/api/common/mycrowd/${this.user.userVO.id}`).then((res) => {
+          this.statisticData = res;
+        })
+      },
+      //检查是否有发包权限
+      checkCreateProjectAuth() {
+        if (this.isLogin) {
+          Http.get(Apis.USER.IS_PART.replace('{userId}', this.user.userVO.id)).then((res) => {
+            if (res) {
+              this.showCreateData = true;
+            }
+          }).catch((error) => {
+            // notify('error', error)
+          })
+        }
+      },
+      //检查是否有接包权限
+      checkAcceptTaskAuth() {
+        if (this.isLogin) {
+          Http.get(Apis.USER.IS_AGENCY.replace('{userId}', this.user.userVO.id)).then((res) => {
+            if (res) {
+              this.showAcceptData = true;
+            }
+          }).catch((error) => {
+            // notify('error', error)
+          })
+        }
+      },
     },
-    handleTabClick (event) {
-      if (event.name == 'myProject') {
-        //this.myProjectNoticeCount = 0
-      }
-      if (event.name == 'handlingProject') {
-        //this.processProjectNoticeCount = 0
-      }
-      console.log(event)
-    }
-  },
-  created: function () {
+    created: function () {
 
+    },
   }
-}
 </script>
 
 <style lang="less" scoped>
@@ -339,5 +400,30 @@
   .mine-body {
     margin-top: 30px;
   }
+
+  .project-statistics {
+    margin: 20px 5%;
+    display: flex;
+    .project-statistics-card{
+      justify-content: space-between;
+      flex: 1;
+      margin-right: 10px;
+
+      .project-statistics-card-title {
+        text-align: center;
+        font-size: 16px;
+      }
+      .project-statistics-card-number {
+        margin: 10px auto;
+        text-align: center;
+        font-weight: bolder;
+        font-size: 28px;
+      }
+    }
+    .project-statistics-card:last-child{
+      margin-right: 0;
+    }
+
+  }
 </style>
 

src/components/commons/Header2.0.vue

@@ -53,7 +53,16 @@
                 </a>
               </router-link>
             </li>
-<!--            <span v-if="isLogin">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>-->
+
+            <span v-if="isLogin&&rolesPermissions.isSystemAdministrator">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
+
+<!--            <li v-if="isLogin&&rolesPermissions.isSystemAdministrator">-->
+<!--              <router-link v-if="isLogin" to="/statistics">-->
+<!--                <span>统计报表</span>-->
+<!--              </router-link>-->
+<!--            </li>-->
+
+            <!--            <span v-if="isLogin">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>-->
 <!--            <li>-->
 <!--              <a @click="gotoHome" style="cursor: pointer">首页</a>-->
 <!--            </li>-->
@@ -182,7 +191,6 @@
             this.hideLoading();
         },
         getCurrentUserSuccess (res) {
-            // console.log(res)
             storageSave('user', res)
             this.user = res
             this.rolesPermissions = getRolesPermissions(res.roleList)

src/main.js

@@ -10,6 +10,8 @@ import {notify} from '@/constants/index'
 import store from './store'
 import moment from 'moment'
 import vRegion from 'v-region'
+import echarts from "echarts";
+
 import {
   Avatar,
   Alert,
@@ -68,6 +70,7 @@ import {
   Divider
 } from 'element-ui'
 Vue.prototype.$moment = moment
+Vue.prototype.$echarts = echarts;
 function getCurrentUserSuccess(res){
 
 }
@@ -87,7 +90,7 @@ function getCurrentUserSuccess(res){
 //   const urls = getAuthUrls()
 //   if (storageGet('user') == null) {
 //     getCurrentUser().then((res) => {
-//       storageSave('user', res)
+//       hstorageSave('user', res)
 //       storageSave('rolesPermissions', getRolesPermissions(res.roleList))
 //       if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权限
 //         if (sessionStorage.userName === '2' && urls.includes(to.matched[0].path)) { // 判断缓存里面是否有 userName  //在登录的时候设置它的值

src/pages/Statistics/StatisticsReport.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="statistics-container container">
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <div id="fieldType" style="width: 100%;height: 500px"></div>
+      </el-col>
+      <el-col :span="12">
+        <div id="appType"></div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <div id="testType"></div>
+      </el-col>
+      <el-col :span="12">
+<!--        <div id="appType"></div>-->
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import {notify} from "../../constants";
+  import Http from '@/js/http.js';
+  import {storageGet} from '@/js/index.js'
+  import Apis from '@/js/api'
+
+  export default {
+    name: "StatisticsReport",
+    data() {
+      return {
+        user: {},
+        typeChartData:{}
+      }
+    },
+    methods: {
+      setUserInfo() {
+        this.user = storageGet('user') && storageGet('user').userVO;
+      },
+      getTypeChartData(){
+        Http.get('/api/common/statistics/count').then(res=>{
+          this.typeChartData = res;
+        })
+      },
+      //画领域类型的柱状图
+      drawFieldTypeChart() {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(document.getElementById("fieldType"));
+        // 指定图表的配置项和数据
+        let option = {
+          title: {
+            text: "领域类型项目数量"
+          },
+          tooltip: {},
+          legend: {
+            data: ["数量"]
+          },
+          xAxis: {
+            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+          },
+          yAxis: {},
+          series: [
+            {
+              name: "销量",
+              type: "bar",
+              data: [5, 20, 36, 10, 10, 20]
+            }
+          ]
+        };
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+      },
+      //画应用类型的柱状图
+      drawAPPTypeChart() {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(document.getElementById("appType"));
+        // 指定图表的配置项和数据
+        let option = {
+          title: {
+            text: "应用类型项目数量"
+          },
+          tooltip: {},
+          legend: {
+            data: ["数量"]
+          },
+          xAxis: {
+            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+          },
+          yAxis: {},
+          series: [
+            {
+              name: "销量",
+              type: "bar",
+              data: [5, 20, 36, 10, 10, 20]
+            }
+          ]
+        };
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+      },
+      //画测试类型的柱状图
+      drawTestTypeChart() {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(document.getElementById("testType"));
+        // 指定图表的配置项和数据
+        let option = {
+          title: {
+            text: "测试类型项目数量"
+          },
+          tooltip: {},
+          legend: {
+            data: ["数量"]
+          },
+          xAxis: {
+            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+          },
+          yAxis: {},
+          series: [
+            {
+              name: "销量",
+              type: "bar",
+              data: [5, 20, 36, 10, 10, 20]
+            }
+          ]
+        };
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+      },
+    },
+    mounted() {
+      this.setUserInfo();
+      this.getProjectCount();
+      // this.getTypeChartData();
+      // this.drawFieldTypeChart();
+      // this.drawAPPTypeChart();
+      // this.drawTestTypeChart();
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -479,6 +479,11 @@ export default new Router({
         }
       ]
     },
+    {
+      path:'/statistics',
+      component: resolve => require(['@/pages/Statistics/StatisticsReport.vue'], resolve),
+    }
+
   ]
 })
 // const originalPush = Router.prototype.push