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="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;position: relative">
      <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="item.id" :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>

      <el-button type="primary" size='mini' class="input-task-btn" @click="showImportTaskModal = true">导入任务</el-button>
      <el-dialog
        title="上传任务资源包"
        :visible.sync="showImportTaskModal"
        width="500"
      >
        <el-upload
          drag
          class="upload-demo"
          action=""
          :limit="1"
          :before-upload="beforeFileUpload"
          :http-request="uploadRequireDoc"
          :file-list="taskJson"
          multiple
          >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传Json文件，且不超过100MB</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
        <el-button @click="showImportTaskModal = false">取 消</el-button>
        <el-button type="primary" @click="showImportTaskModal = false">确 定</el-button>
        </span>
      </el-dialog>

    </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: {},
      showImportTaskModal:false,
      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,
      taskJson:[]
    }
  },
  mounted() {
    this.$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', '加载失败，请稍后重试')
      })
    },

    beforeFileUpload(file) {
      const isJSON = file.type === 'application/json'
      if (!isJSON) {
        this.$message.error('上传文件只能是 JSON 格式!')
      }
      if( file.size > 100 * 1024 * 1024){
        this.$message.error('上传文件不超过100MB !')
      }
      return isJSON
    },
    uploadRequireDoc(param) {
      this.showLoading()
      const formData = new FormData()
      let config = {
        //添加请求头
        headers: {'Content-Type': 'multipart/form-data'},
      }
      formData.append('file', param.file)
      Http.upload(Apis.FILE.TASK_IMPORT, formData, config).then((res) => {
        this.hideLoading()
        notify('success', '导入任务成功')
        this.taskJson.push(res.data)
        this.showImportTaskModal = false;
        this.loadData()
      }).catch((error) => {
        this.hideLoading()
        notify('error', '导入任务失败:' + error.data)
      })
    },

    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;

  .input-task-btn {
    position: absolute;
    right: 5%;
    top: 10px
  }
}

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