Skip to content

Z
zentao-view
Commit 1a3a8156 authored by 王鑫's avatar 王鑫
Browse files
Options

feat: 进度管理模块初始化

parent ae5a2706
Hide whitespace changes
Inline Side-by-side
Showing with 320 additions and 0 deletions
package-lock.json
View file @ 1a3a8156
......@@ -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
View file @ 1a3a8156
......@@ -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 0 → 100644
View file @ 1a3a8156
<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 0 → 100644
View file @ 1a3a8156
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment