cofortest-frontend/src/components/Mine.vue

<template>
  <div class="mine-container">
    <!--    <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.unfinishedTaskCount || 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.finishedTaskCount || 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.handlingProjectCount || 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>
    </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">
          <span slot="label">
            <el-badge class="item" style="margin-top: 10px;margin-bottom: 25px; font-size: 16px;">未完成任务</el-badge>
          </span>
          <el-row v-if="unFinishedTaskList != null && unFinishedTaskList.length != 0" type="flex" align="middle"
                  justify="center" style="font-size: 14px;">
            <el-col :span="5">任务封面</el-col>
            <el-col :span="4">任务名称</el-col>
            <el-col :span="4">测试类型</el-col>
            <el-col :span="4">任务预算</el-col>
            <el-col :span="4">领取人数</el-col>
            <el-col :span="3">操作</el-col>
          </el-row>
          <span v-if="unFinishedTaskList == null || unFinishedTaskList.length == 0"> 暂无任务 </span>
          <task-item v-if="unFinishedTaskList != null || unFinishedTaskList.length > 0"
                     v-for="(item,index1) in unFinishedTaskList" :key="index1" :task="item"/>
        </el-tab-pane>
        <el-tab-pane name="finishedTask">
          <span slot="label">
            <el-badge class="item" style="margin-top: 10px;margin-bottom: 25px; font-size: 16px;">已完成任务</el-badge>
          </span>
          <el-row v-if="finishedTaskList != null && finishedTaskList.length != 0" type="flex" align="middle"
                  justify="center" style="font-size: 14px;">
            <el-col :span="5">任务封面</el-col>
            <el-col :span="4">任务名称</el-col>
            <el-col :span="4">测试类型</el-col>
            <el-col :span="4">任务预算</el-col>
            <el-col :span="4">领取人数</el-col>
            <el-col :span="3">操作</el-col>
          </el-row>
          <span v-if="finishedTaskList == null || finishedTaskList.length == 0"> 暂无任务 </span>
          <task-item v-if="finishedTaskList != null || finishedTaskList.length > 0"
                     v-for="(item,index2) in finishedTaskList" :key="index2" :task="item"/>
        </el-tab-pane>


        <el-tab-pane name="myProject">

          <span slot="label">
            <el-badge v-if="myProjectNoticeCount>0" :value="myProjectNoticeCount" class="item"
                      style="height:auto;margin-top: 10px;margin-bottom: 25px; font-size: 16px;">发布项目</el-badge>
            <el-badge v-if="myProjectNoticeCount==null || myProjectNoticeCount == 0" class="item"
                      style="margin-top: 10px;margin-bottom: 25px; font-size: 16px;">发布项目</el-badge>
          </span>
          <span v-if="myProjects == null || myProjects.length == 0"> 暂无项目 </span>
          <el-row v-if="myProjects != null && myProjects.length != 0" type="flex" align="middle" justify="center"
                  style="font-size: 14px;">
            <el-col :span="6" type="flex" align="middle" justify="center">项目图片</el-col>
            <el-col :span="6" type="flex" align="middle" justify="center">项目名称</el-col>
            <el-col :span="3" type="flex" align="middle" justify="center">应用类型</el-col>
            <el-col :span="3" type="flex" align="middle" justify="center">项目预算</el-col>
            <el-col :span="3" type="flex" align="middle" justify="center">参与人数</el-col>
            <el-col :span="4" type="flex" align="middle" justify="center">操作</el-col>
          </el-row>
          <project-item v-if="myProjects != null || myProjects.length > 0"
                        v-for="(item,index3) in myProjects" :key="index3" :projectItem="item"/>
        </el-tab-pane>
        <el-tab-pane name="handlingProject">
          <span slot="label">
            <el-badge v-if="processProjectNoticeCount>0" :value="processProjectNoticeCount" class="item"
                      style="margin-top: 10px;margin-bottom: 25px; font-size: 16px;">已接收项目</el-badge>
            <el-badge v-if="processProjectNoticeCount==null || processProjectNoticeCount==0" class="item"
                      style="margin-top: 10px;margin-bottom: 25px; font-size: 16px;">已接收项目</el-badge>
          </span>
          <el-row v-if="handlingProjects != null && handlingProjects.length != 0" type="flex" align="middle"
                  justify="center" style="font-size: 14px;">
            <el-col :span="6">项目图片</el-col>
            <el-col :span="6">项目名称</el-col>
            <el-col :span="3">应用类型</el-col>
            <el-col :span="3">项目预算</el-col>
            <el-col :span="3">参与人数</el-col>
            <el-col :span="4">操作</el-col>
          </el-row>
          <span v-if="handlingProjects == null || handlingProjects.length == 0"> 暂无项目 </span>
          <project-item v-if="handlingProjects != null || handlingProjects.length > 0"
                        v-for="(item,index4) in handlingProjects" :key="index4" :projectItem="item"/>
        </el-tab-pane>
        <el-tab-pane name="acceptableProject">
          <span slot="label">
            <el-badge v-if="acceptableProjectNoticeCount>0" :value="acceptableProjectNoticeCount" class="item"
                      style="margin-top: 10px;margin-bottom: 25px; font-size: 16px;">可接收项目</el-badge>
            <el-badge v-if="acceptableProjectNoticeCount==null || acceptableProjectNoticeCount==0" class="item"
                      style="margin-top: 10px;margin-bottom: 25px; font-size: 16px;">可接收项目</el-badge>
          </span>
          <el-row v-if="acceptableProjects != null && acceptableProjects.length != 0" type="flex" align="middle"
                  justify="center" style="font-size: 14px;">
            <el-col :span="6">项目图片</el-col>
            <el-col :span="6">项目名称</el-col>
            <el-col :span="3">应用类型</el-col>
            <el-col :span="3">项目预算</el-col>
            <el-col :span="3">参与人数</el-col>
            <el-col :span="4">操作</el-col>
          </el-row>
          <span v-if="acceptableProjects == null || acceptableProjects.length == 0"> 暂无项目 </span>
          <project-item v-if="acceptableProjects != null || acceptableProjects.length > 0"
                        v-for="(item,index) in acceptableProjects" :key="index" :projectItem="item"/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import TaskItem from '@/components/commons/TaskItem'
  import ProjectItem from '@/components/commons/ProjectItem'
  import Http from '@/js/http.js'
  import Apis from '@/js/api.js'
  import {notify} from '@/constants/index'
  import {defaultValue, storageGet} from '@/js/index'
  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 {
        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(() => {
        console.log('nexttick')
        this.init();
        this.checkCreateProjectAuth();
        this.checkAcceptTaskAuth()
      })
    },
    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.statisticData = res;
          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: ''
          },
          tooltip: {
            //trigger: 'axis'
          },
          legend: {
            data: ['接收项目数量', '完成项目数量', '接收任务数量', '完成任务数量', '发布项目数量']
          },
          grid: {
            left: '5%',
            right: '8%',
            bottom: '3%',
            top: '10%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {
                title: '保存为图片',
                name: '我的众测'
              }
            },
            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]
            },
            {
              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)
      },
      //检查是否有发包权限
      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)
          })
        }
      },
    },
    created: function () {

    },
  }
</script>

<style lang="scss" scoped>
  .mine-container {
    padding: 0 80px 40px 80px;
  }

  .mine-top-wrapper {
    height: 350px;
    background-color: #fff;
  }

  [class*="el-col-"] {
    height: 100%;
  }

  .advertise-imgs {
    height: 100%;
  }

  .advertise-imgs img {
    width: 100%;
    height: 100%;
  }

  .user-banner {
    text-align: center;
    display: inline-table;
    height: 100%;
    width: 100%;
    margin-top: 40px;
  }

  .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>