feat: 进程管理数据接入

src/api/progress/progress.js

+import {axios} from '@/util/axios/request'
+
+const api = {
+  getList: '/progress/list',
+}
+
+export default api
+
+export function getList() {
+  return axios({
+    url: api.getList,
+    method: 'get',
+    useFullLoading: true
+  })
+}
\ No newline at end of file

src/views/progress/TaskProgress.vue

 <template>
   <a-card class="cust-list-cart">
-    <q-page class="q-pa-sm">
+<!--    <q-page class="q-pa-sm">-->
       <gantt-elastic
         :options="options"
         :tasks="tasks"
@@ -12,13 +12,14 @@
       </gantt-elastic>
       <!--   <div class="q-mt-md" />-->
       <!--    <q-btn @click="addTask" icon="mdi-plus" label="Add tas k" />-->
-    </q-page>
+<!--    </q-page>-->
   </a-card>
 </template>
 <script>
 
 import GanttElastic from "gantt-elastic";
 import GanttHeader from "gantt-elastic-header";
+import {getList} from "@api/progress/progress";
 
 // just helper to get current dates
 function getDate(hours) {
@@ -39,7 +40,7 @@ function getDate(hours) {
 let tasks = [
   {
     id: 1,
-    name: "任务1",
+    name: "任务",
     user: '',
     start: getDate(-24 * 5),
     duration: 15 * 24 * 60 * 60 * 1000,
@@ -64,67 +65,7 @@ let tasks = [
       }
     }
   },
-  {
-    id: 3,
-    name: "",
-    user:'<span style=\'color:#1eb0bc\'>商天翔</span>',
-    parentId: 1,
-    start: getDate(4),
-    duration: 4 * 24 * 60 * 60 * 1000,
-    percent: 50,
-    type: "milestone",
-    collapsed: true,
-    style: {
-      base: {
-        fill: "#1EBC61",
-        stroke: "#0EAC51"
-      }
-    }
-  },
-  {
-    id: 4,
-    name: "任务2",
-    user: '',
-    start: getDate(-24 * 30),
-    duration: 15 * 24 * 60 * 60 * 1000,
-    percent: 85,
-    type: "project"
-    //collapsed: true,
-  },
-  {
-    id: 5,
-    name: "",
-    user:'<span style=\'color:#1eb0bc\'>王鑫</span>',
-    parentId: 4,
-    start: getDate(-24 * 30),
-    duration: 4 * 24 * 60 * 60 * 1000,
-    percent: 50,
-    type: "milestone",
-    collapsed: true,
-    style: {
-      base: {
-        fill: "#1EBC61",
-        stroke: "#0EAC51"
-      }
-    }
-  },
-  {
-    id: 6,
-    name: "",
-    user:'<span style=\'color:#1eb0bc\'>商天翔</span>',
-    parentId: 4,
-    start: getDate(-24 * 25),
-    duration: 4 * 24 * 60 * 60 * 1000,
-    percent: 50,
-    type: "milestone",
-    collapsed: true,
-    style: {
-      base: {
-        fill: "#1EBC61",
-        stroke: "#0EAC51"
-      }
-    }
-  },
+
 ];
 let options = {
   taskMapping: {
@@ -219,7 +160,62 @@ export default {
     },
     styleUpdate(style) {
       this.dynamicStyle = style;
+    },
+    loadData(){
+      getList().then(response => {
+        if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
+          let respData = response.data;
+          let taskList = [];
+          console.log(respData)
+          // for (const respDataKey in respData) {
+          //   let day = this.GetNumberOfDays(new Date(),respDataKey.begin);
+          //   let duration = this.GetNumberOfDays(respDataKey.begin,respDataKey.end);
+          //   // 父元素
+          //   if(respDataKey.parentId == null){
+          //     taskList.push({
+          //       id: respDataKey.id,
+          //       name: respDataKey.name,
+          //       user: '',
+          //       start: getDate(24 * day),
+          //       duration: duration * 24 * 60 * 60 * 1000,
+          //       percent: 85,
+          //       type: "project"
+          //     })
+          //     // 子元素
+          //   }else {
+          //     taskList.push({
+          //       id: respDataKey.id,
+          //       name: "",
+          //       user:'<span style=\'color:#1eb0bc\'>'+respDataKey.name+'</span>',
+          //       parentId: respDataKey.parentId,
+          //       start: getDate(24 * day),
+          //       duration: duration * 24 * 60 * 60 * 1000,
+          //       percent: 50,
+          //       type: "milestone",
+          //       collapsed: true,
+          //       style: {
+          //         base: {
+          //           fill: "#1EBC61",
+          //           stroke: "#0EAC51"
+          //         }
+          //       }
+          //     })
+          //   }
+          //
+          // }
         }
+      });
+    },
+    GetNumberOfDays(date1,date2){
+      // date1：开始日期，date2结束日期
+      let a1 = Date.parse(new Date(date1));
+      let a2 = Date.parse(new Date(date2));
+      let day = parseInt((a2-a1)/ (1000 * 60 * 60 * 24));//核心：时间戳相减，然后除以天数
+      return day
+    }
+  },
+  mounted() {
+    this.loadData()
   }
 }
 </script>