crowd-test-service-frontend/src/components/Mine.vue

<template>
  <div class="mine-container">
    <div id="myChart" style="width: 100%;height: 200px;padding-top: 40px"></div>
    <!--<div class="mine-top-wrapper">-->
    <!--<el-row :gutter="0" style="height:100%">-->
    <!--<el-col :span="16">-->
    <!--<div class="advertise-imgs">-->
    <!--<img-->
    <!--src="http://sinastorage.com/storage.miaosha.sina.com.cn/products/201903/e496d11b3d74cf660c286fbd5ab8d0bb.png"-->
    <!--&gt;-->
    <!--</div>-->
    <!--</el-col>-->
    <!--<el-col :span="8">-->
    <!--<div class="user-banner">-->
    <!--<p class="head">-->
    <!--<a href="javascript:;" class="login-link">-->
    <!--<img :src="user == null || user.userVO.photoUrl == null?defaultValue.image:user.userVO.photoUrl"-->
    <!--class="user-img">-->
    <!--<span class="vertify hide"></span>-->
    <!--</a>-->
    <!--</p>-->
    <!--<div class="username_box">-->
    <!--<div class="username_icon username_"></div>-->
    <!--<span class="username">{{user == null?'...':user.userVO.name}}</span>-->
    <!--</div>-->
    <!--&lt;!&ndash;<p class="name">&ndash;&gt;-->
    <!--&lt;!&ndash;<a href="javascript:;" class="login-btn btn btn-medium btn-info">登录</a>&ndash;&gt;-->
    <!--&lt;!&ndash;<a&ndash;&gt;-->
    <!--&lt;!&ndash;href="https://login.sina.com.cn/signup/signup?entry=tech"&ndash;&gt;-->
    <!--&lt;!&ndash;class="register-btn btn btn-medium btn-info"&ndash;&gt;-->
    <!--&lt;!&ndash;target="_blank"&ndash;&gt;-->
    <!--&lt;!&ndash;&gt;注册</a>&ndash;&gt;-->
    <!--&lt;!&ndash;</p>&ndash;&gt;-->
    <!--&lt;!&ndash;<p class="scores">&ndash;&gt;-->
    <!--&lt;!&ndash;<a href="/rule/merit" target="_blank">&ndash;&gt;-->
    <!--&lt;!&ndash;积分&ndash;&gt;-->
    <!--&lt;!&ndash;<em class="num1">{{user.score}}</em>&ndash;&gt;-->
    <!--&lt;!&ndash;</a>&ndash;&gt;-->
    <!--&lt;!&ndash;<span class="line">|</span>&ndash;&gt;-->
    <!--&lt;!&ndash;<a href="/rule/merit" target="_blank">&ndash;&gt;-->
    <!--&lt;!&ndash;威望&ndash;&gt;-->
    <!--&lt;!&ndash;<em class="num2">{{user.prestige}}</em>&ndash;&gt;-->
    <!--&lt;!&ndash;</a>&ndash;&gt;-->
    <!--&lt;!&ndash;</p>&ndash;&gt;-->
    <!--<p>-->
    <!--<router-link :to="{ name: 'AuthenticationIndex'}">-->
    <!--<div class="btn btn-medium">实名认证</div>-->
    <!--</router-link>-->
    <!--</p>-->
    <!--</div>-->
    <!--</el-col>-->
    <!--</el-row>-->
    <!--</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="6" type="flex" align="middle" justify="center">应用类型</el-col>
            <el-col :span="2" 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="6">应用类型</el-col>
            <el-col :span="2">项目预算</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="6">应用类型</el-col>
            <el-col :span="2">项目预算</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, getRolesPermissions, 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 {
      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: []
        }
      }
    }
  },
  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', '加载失败，请稍后重试' )
      })
    },
    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: '我的众测'
            }
          },
          right: '20px'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2019年11月', '2019年12月', '2020年1月', '2020年2月', '2020年3月', '2020年4月', '2020年5月']
        },
        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)
    }
  },
  created: function () {

  }
}
</script>

<style lang="less" 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;
  }
</style>