cofortest-frontend/src/pages/Statistics/TaskStatistics.vue

<template>
  <div class="dashboard-editor-container" v-if="getTaskData">
<!--    <div class="board-title">-->
<!--      {{ getTaskData && getTaskData.taskName }}-->
<!--&lt;!&ndash;      <el-button type="primary" @click="goToReview" class="review-btn">去评审</el-button>&ndash;&gt;-->
<!--    </div>-->
    <project-search :firstSelectedProjectCode="selectedProjectCode"></project-search>
    <task-search :firstSelectedTaskCode="selectedTaskCode" :selectedCallback="getTaskData"></task-search>

    <panel-group :info="taskInfo" :taskCode="selectedTaskCode"/>

    <el-row :gutter="20" style="background:transparent;margin-bottom:32px;height: 650px">
      <el-col :xs="24" :sm="24" :lg="5" style="height: 100%">
        <info-card style="height:100%;margin-bottom: 20px" :task="taskInfo"/>
<!--        <box-card style="height: 37%;position: relative;bottom: 0"/>-->
      </el-col>
      <el-col :xs="24" :sm="24" :lg="14">
        <StaffDistribution
          :task-info="taskInfo"
          v-if="taskInfo"
          class="card-shadow">
        </StaffDistribution>
        <div style="height: 650px;width: 100%"
             v-else
             v-loading="loading"
             element-loading-text="数据加载中">
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="5" style="height: 100%">
        <transaction-table :list="taskInfo.testers" :task-code="selectedTaskCode" style="height: 100%" class="card-shadow"/>
      </el-col>
    </el-row>

    <el-row :gutter="15">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper card-shadow">
          <bug-level-chart :counts="taskInfo.defectSeriCounts"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper card-shadow">
          <bug-time-count-chart :bug-time-counts="taskInfo.defectTimeCountMap"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper card-shadow">
          <bug-type-chart :gradeList="gradeList" :bug-type-counts="taskInfo.defectTypeCountMap"/>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import BugLevelChart from './components/BugLevelChart'
import BugTimeCountChart from './components/BugTimeCountChart'
import BugTypeChart from './components/BugTypeChart'
import TransactionTable from './components/TransactionTable'
import TodoList from './components/TodoList'
import InfoCard from './components/InfoCard'
import StaffDistribution from './components/map/StaffDistributionMap'
import ProjectSearch from '@/components/project/ProjectSearch'
import TaskSearch from '@/components/project/TaskSearch'
import Api from '@/js/api'
import Http from '@/js/http'
import {notify} from '@/constants'
import Project from '../../components/project/Project'

export default {
  name: 'TaskBoard',
  components: {
    Project,
    PanelGroup,
    BugTimeCountChart,
    BugLevelChart,
    BugTypeChart,
    TransactionTable,
    TodoList,
    InfoCard,
    StaffDistribution,
    ProjectSearch,
    TaskSearch
  },
  data () {
    return {
      topData: {},
      taskInfo: {},
      workList: [],
      gradeList: {},
      workerDistribute: [],
      loading: true,
      progress: 0,
      selectedProjectCode: this.$route.params.projectCode,
      selectedTaskCode: this.$route.params.taskCode
    }
  },
  methods: {
    getTaskData (taskCode) {
      Http.get(Api.TASK.TASK_STATISTICS.replace('{taskCode}', taskCode)).then((res) => {
        this.taskInfo = res.data
      }).catch((error) => {
        notify('error', '获取任务信息失败：系统异常')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .board-title {
    text-align: center;
    font-size: 30px;
    font-weight: bolder;
    margin-bottom: 15px;
    position: relative;

    .review-btn {
      position: absolute;
      right: 0;
    }
  }

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.card-shadow {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

@media (max-width: 550px) {
  .review-btn {
    display: none;
  }

}

</style>