fix progress 0

src/views/taskboard/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="dashboard-editor-container" v-if="getTaskData">
     <div class="board-title">
-      {{getTaskData&&getTaskData.taskName}}
-        <el-button type="primary"  @click="goToReview" class="review-btn">去评审</el-button>
+      {{ getTaskData && getTaskData.taskName }}
+      <el-button type="primary" @click="goToReview" class="review-btn">去评审</el-button>
     </div>
-    <panel-group :info="topData"/>
+    <panel-group :info="topData" v-if="topData"/>
 
     <el-row :gutter="20" style="background:transparent;margin-bottom:32px;height: 650px">
       <el-col :xs="24" :sm="24" :lg="5" style="height: 100%">
@@ -30,13 +30,13 @@
 
     <el-row :gutter="15">
       <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper card-shadow" >
+        <div class="chart-wrapper card-shadow">
           <scatter-chart/>
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="chart-wrapper card-shadow">
-          <line-chart />
+          <line-chart/>
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="8">
@@ -50,137 +50,156 @@
 </template>
 
 <script>
-  import PanelGroup from './components/PanelGroup'
-  import ScatterChart from './components/ScatterChart'
-  import LineChart from './components/LineChart'
-  import BarChart from './components/BarChart'
-  import TransactionTable from './components/TransactionTable'
-  import TodoList from './components/TodoList'
-  import BoxCard from './components/BoxCard'
-  import InfoCard from './components/InfoCard'
-  import StaffDistribution from './components/StaffDistributionMap'
-  import { mapActions,mapGetters } from "vuex";
-  import { getBoardData,getTaskProgressData} from '@/api/databoard'
-
-  export default {
-    name: 'TaskBoard',
-    components: {
-      PanelGroup,
-      LineChart,
-      ScatterChart,
-      BarChart,
-      TransactionTable,
-      TodoList,
-      BoxCard,
-      InfoCard,
-      StaffDistribution
-    },
-    data() {
-      return {
-        topData:{},
-        taskInfo:{},
-        workList:[],
-        gradeList:{},
-        workerDistribute:[],
-        loading:true
-      }
-    },
-    computed:{
-      ...mapGetters(['getTaskData']),
+import PanelGroup from './components/PanelGroup'
+import ScatterChart from './components/ScatterChart'
+import LineChart from './components/LineChart'
+import BarChart from './components/BarChart'
+import TransactionTable from './components/TransactionTable'
+import TodoList from './components/TodoList'
+import BoxCard from './components/BoxCard'
+import InfoCard from './components/InfoCard'
+import StaffDistribution from './components/StaffDistributionMap'
+import {mapActions, mapGetters} from "vuex";
+import {getBoardData, getTaskProgressData} from '@/api/databoard'
+
+export default {
+  name: 'TaskBoard',
+  components: {
+    PanelGroup,
+    LineChart,
+    ScatterChart,
+    BarChart,
+    TransactionTable,
+    TodoList,
+    BoxCard,
+    InfoCard,
+    StaffDistribution
+  },
+  data() {
+    return {
+      topData: null,
+      taskInfo: {},
+      workList: [],
+      gradeList: {},
+      workerDistribute: [],
+      loading: true,
+      progress:0
+    }
+  },
+  computed: {
+    ...mapGetters(['getTaskData']),
+  },
+  methods: {
+    ...mapActions(['setTaskData']),
+    goToReview() {
+      //前往进行任务评审
+      window.open(this.getTaskData && this.getTaskData.managerCheck)
     },
-    methods: {
-      ...mapActions(['setTaskData']),
-      goToReview(){
-        //前往进行任务评审
-        window.open(this.getTaskData && this.getTaskData.managerCheck)
-      },
-      getData() {
-        const {token} = this.$route.query;
+
+    getData() {
+      const {token} = this.$route.query;
+      let p1 = new Promise((resolve, reject) => {
         getBoardData(token).then(res => {
           //将任务数据存在vuex中
           this.setTaskData(res);
-          this.handleTaskData()
+          resolve(res);
         })
+      }).catch((error) => {
+        notify('error', error.data)
+        reject(error)
+      });
+      let p2 = new Promise((resolve, reject) => {
         getTaskProgressData(token).then(res => {
-          //task progress
-          this.topData = {...this.topData,progress:res};
+          this.progress = res;
+          resolve(res);
         })
-      },
-      handleTaskData(){
-        const taskData = this.getTaskData;
-        this.topData = {
-          reportNum:taskData.reportNum || 0,
-          bugNum:taskData.bugNum || 0,
-          workerNum:taskData.workerNum || 0,
-          pageCover:taskData.pageCover || 0,
-          caseNum:taskData.testcaseNum || 0,
-        };
-        this.taskInfo = {
-          taskName:taskData.taskName || '',
-          startTime:taskData.startTime || new Date(),
-          bugNum:taskData.bugNum || 0,
-          endTime:taskData.endTime || new Date(),
-          caseNum:taskData.testcaseNum || 0,
-          workerNum:taskData.workerNum || 0
-        };
-        this.workerDistribute = taskData.workerDistribute || [];
-        this.workList = taskData.workerRank || [];
-        this.gradeList = taskData.gradeDistrubute || {};
-      }
+      }).catch((error) => {
+        notify('error', error.data)
+        reject(error)
+      });
+      Promise.all([p1, p2]).then((result) => {
+        this.handleTaskData()
+      }).catch((error) => {
+        console.log(error.data)
+      })
     },
-    mounted() {
-      this.getData()
+    handleTaskData() {
+      const taskData = this.getTaskData;
+      this.topData = {
+        reportNum: taskData.reportNum || 0,
+        bugNum: taskData.bugNum || 0,
+        workerNum: taskData.workerNum || 0,
+        pageCover: taskData.pageCover || 0,
+        caseNum: taskData.testcaseNum || 0,
+        progress:this.progress || 0
+      };
+      this.taskInfo = {
+        taskName: taskData.taskName || '',
+        startTime: taskData.startTime || new Date(),
+        bugNum: taskData.bugNum || 0,
+        endTime: taskData.endTime || new Date(),
+        caseNum: taskData.testcaseNum || 0,
+        workerNum: taskData.workerNum || 0
+      };
+      this.workerDistribute = taskData.workerDistribute || [];
+      this.workList = taskData.workerRank || [];
+      this.gradeList = taskData.gradeDistrubute || {};
     }
+  },
+  mounted() {
+    this.getData()
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .dashboard-editor-container {
-    padding: 20px;
-    background-color: rgb(240, 242, 245);
-    position: relative;
+.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;
-      }
-    }
+  .board-title {
+    text-align: center;
+    font-size: 30px;
+    font-weight: bolder;
+    margin-bottom: 15px;
+    position: relative;
 
-    .github-corner {
+    .review-btn {
       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);
+  .github-corner {
+    position: absolute;
+    top: 0px;
+    border: 0;
+    right: 0;
   }
 
-  @media (max-width:1024px) {
-    .chart-wrapper {
-      padding: 8px;
-    }
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
   }
+}
 
-  @media (max-width:550px) {
-    .review-btn {
-      display: none;
-    }
+.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>

vue.config.js

@@ -30,6 +30,7 @@ module.exports = {
   lintOnSave: process.env.NODE_ENV === 'development',
   productionSourceMap: false,
   devServer: {
+    disableHostCheck: true,
     port: port,
     open: true,
     overlay: {