feat: 进度管理模块初始化

package-lock.json

@@ -6591,6 +6591,45 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "gantt-elastic": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npm.taobao.org/gantt-elastic/download/gantt-elastic-1.0.12.tgz",
+      "integrity": "sha1-2VzTp1BxL6VvShLcqAehyb8Q/oo=",
+      "requires": {
+        "dayjs": "^1.8.16",
+        "resize-observer-polyfill": "^1.5.1",
+        "vue": "^2.6.10"
+      },
+      "dependencies": {
+        "dayjs": {
+          "version": "1.10.4",
+          "resolved": "https://registry.npm.taobao.org/dayjs/download/dayjs-1.10.4.tgz",
+          "integrity": "sha1-jlRKm4aD9heD9XCYCoqA6vVKseI="
+        },
+        "vue": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1614614488830&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz",
+          "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
+        }
+      }
+    },
+    "gantt-elastic-header": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npm.taobao.org/gantt-elastic-header/download/gantt-elastic-header-0.1.11.tgz",
+      "integrity": "sha1-i5/sjlFwm4L/WaA4bwZoUK5pxtE=",
+      "requires": {
+        "vue": "^2.6.10",
+        "vue-slider-component": "^3.0.31",
+        "vue-switches": "^2.0.1"
+      },
+      "dependencies": {
+        "vue": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1614614488830&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz",
+          "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
+        }
+      }
+    },
     "gauge": {
       "version": "2.7.4",
       "resolved": "https://registry.npm.taobao.org/gauge/download/gauge-2.7.4.tgz",
@@ -14150,6 +14189,11 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.5.17.tgz?cache=0&sync_timestamp=1594254332789&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.5.17.tgz",
       "integrity": "sha1-D4eJrXGL5oyhhyYpgy7VM1icato="
     },
+    "vue-class-component": {
+      "version": "7.2.6",
+      "resolved": "https://registry.npm.taobao.org/vue-class-component/download/vue-class-component-7.2.6.tgz",
+      "integrity": "sha1-hHHgN7jkdi9aRkaG4Z5a/HCFAuQ="
+    },
     "vue-cropper": {
       "version": "0.4.4",
       "resolved": "https://registry.npm.taobao.org/vue-cropper/download/vue-cropper-0.4.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-cropper%2Fdownload%2Fvue-cropper-0.4.4.tgz",
@@ -14249,6 +14293,14 @@
       "resolved": "https://registry.npm.taobao.org/vue-ls/download/vue-ls-3.2.0.tgz",
       "integrity": "sha1-MzVq0+ycMNrCA3V89ANqvk/3Z7M="
     },
+    "vue-property-decorator": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npm.taobao.org/vue-property-decorator/download/vue-property-decorator-8.5.1.tgz",
+      "integrity": "sha1-VxqRz40rUH9TfXm/gnWvMYRXL/8=",
+      "requires": {
+        "vue-class-component": "^7.1.0"
+      }
+    },
     "vue-ref": {
       "version": "1.0.6",
       "resolved": "https://registry.npm.taobao.org/vue-ref/download/vue-ref-1.0.6.tgz",
@@ -14259,6 +14311,22 @@
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.0.1.tgz?cache=0&sync_timestamp=1594111718735&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.0.1.tgz",
       "integrity": "sha1-2bBa2cdCC6D2JtZQDWk+YAkswek="
     },
+    "vue-slider-component": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npm.taobao.org/vue-slider-component/download/vue-slider-component-3.2.11.tgz",
+      "integrity": "sha1-eeM43FoyypJ6j3nuVSVhl714UjU=",
+      "requires": {
+        "core-js": "^3.6.5",
+        "vue-property-decorator": "^8.0.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.9.1",
+          "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-3.9.1.tgz",
+          "integrity": "sha1-zsjeWT246yqF/7Db3rMSy25UYK4="
+        }
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",
@@ -14269,6 +14337,14 @@
         "loader-utils": "^1.0.2"
       }
     },
+    "vue-switches": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npm.taobao.org/vue-switches/download/vue-switches-2.0.1.tgz",
+      "integrity": "sha1-8jQ2JZx/5P/KnEpt9JrHiUHiCiA=",
+      "requires": {
+        "vue": "^2.2.6"
+      }
+    },
     "vue-template-compiler": {
       "version": "2.5.17",
       "resolved": "https://registry.npm.taobao.org/vue-template-compiler/download/vue-template-compiler-2.5.17.tgz?cache=0&sync_timestamp=1576322726045&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-template-compiler%2Fdownload%2Fvue-template-compiler-2.5.17.tgz",

package.json

@@ -19,6 +19,8 @@
     "axios": "0.18.0",
     "dayjs": "1.7.7",
     "enquire.js": "2.1.6",
+    "gantt-elastic": "^1.0.12",
+    "gantt-elastic-header": "^0.1.11",
     "js-cookie": "2.2.0",
     "js-file-download": "0.4.5",
     "lodash.get": "4.4.2",

src/views/progress/ProgressRouteView.vue

+<template>
+  <keep-alive v-if="keepAlive">
+    <router-view />
+  </keep-alive>
+  <router-view v-else />
+</template>
+
+<script>
+export default {
+  name: "ProgressRouteView",
+  computed: {
+    keepAlive () {
+      return this.$route.meta.keepAlive
+    }
+  },
+}
+</script>
\ No newline at end of file

src/views/progress/TaskProgress.vue

+<template>
+  <a-card class="cust-list-cart">
+    <q-page class="q-pa-sm">
+      <gantt-elastic
+        :options="options"
+        :tasks="tasks"
+        @tasks-changed="tasksUpdate"
+        @options-changed="optionsUpdate"
+        @dynamic-style-changed="styleUpdate"
+      >
+        <gantt-header slot="header" :options="options"></gantt-header>
+      </gantt-elastic>
+      <!--   <div class="q-mt-md" />-->
+      <!--    <q-btn @click="addTask" icon="mdi-plus" label="Add tas k" />-->
+    </q-page>
+  </a-card>
+</template>
+<script>
+
+import GanttElastic from "gantt-elastic";
+import GanttHeader from "gantt-elastic-header";
+
+// just helper to get current dates
+function getDate(hours) {
+  const currentDate = new Date();
+  const currentYear = currentDate.getFullYear();
+  const currentMonth = currentDate.getMonth();
+  const currentDay = currentDate.getDate();
+  const timeStamp = new Date(
+    currentYear,
+    currentMonth,
+    currentDay,
+    0,
+    0,
+    0
+  ).getTime();
+  return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
+}
+let tasks = [
+  {
+    id: 1,
+    name: "任务1",
+    user: '',
+    start: getDate(-24 * 5),
+    duration: 15 * 24 * 60 * 60 * 1000,
+    percent: 85,
+    type: "project"
+    //collapsed: true,
+  },
+  {
+    id: 2,
+    name: "",
+    user:"<span style='color:#1eb0bc'>王鑫</span>",
+    parentId: 1,
+    start: getDate(-24 * 4),
+    duration: 4 * 24 * 60 * 60 * 1000,
+    percent: 50,
+    type: "milestone",
+    collapsed: true,
+    style: {
+      base: {
+        fill: "#1eb0bc",
+        stroke: "#1eb0bc"
+      }
+    }
+  },
+  {
+    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: {
+    progress: "percent"
+  },
+  maxRows: 100,
+  maxHeight: 500,
+  title: {
+    label: "禅道甘特图",
+    html: false
+  },
+  row: {
+    height: 16
+  },
+  calendar: {
+    hour: {
+      display: true
+    }
+  },
+  chart: {
+    progress: {
+      bar: false
+    },
+    expander: {
+      display: true
+    }
+  },
+  taskList: {
+    expander: {
+      straight: false
+    },
+    columns: [
+      {
+        id: 1,
+        label: "编号",
+        value: "id",
+        width: 60
+      },
+      {
+        id: 2,
+        label: "任务",
+        value: "name",
+        width: 200,
+        expander: true,
+        html: true
+      },
+      {
+        id: 3,
+        label: "人员",
+        value: "user",
+        width: 130,
+        html: true
+      },
+    ]
+  },
+  locale: {
+    name: "en",
+    Now: "现在",
+    "X-Scale": "横轴缩放",
+    "Y-Scale": "竖轴缩放",
+    "Task list width": "任务栏缩放",
+    "Before/After": "进度栏缩放",
+    "Display task list": "显示任务",
+    weekdays:["周日","周一","周二","周三","周四","周五","周六"],
+    months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
+  },
+  times: {
+    timeZoom: 21,
+  }
+};
+
+export default {
+  name: 'TaskProgress',
+  components: {
+    GanttElastic,
+    GanttHeader
+  },
+  data() {
+    return {
+      tasks,
+      options,
+      dynamicStyle: {},
+      lastId: 16
+    }
+  },
+  methods: {
+    tasksUpdate(tasks) {
+      this.tasks = tasks;
+    },
+    optionsUpdate(options) {
+      this.options = options;
+    },
+    styleUpdate(style) {
+      this.dynamicStyle = style;
+    }
+  }
+}
+</script>