zcdsj
/
hberp
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gantt

This commit is contained in:
shijing 2021-12-17 15:11:55 +08:00
parent 65280b7411
commit 88d2e747d9
2 changed files with 173 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
hb_client/src/views/pm/components/slider.vue
View File

@ -2,7 +2,6 @@
<div <div
class="slider" class="slider"
ref="slider" ref="slider"
:style="{ width: '100%', display: inline-block}"
> >
<div <div
class="process" class="process"
@ -113,6 +112,8 @@ export default {
border-radius: 3px; border-radius: 3px;
cursor: text; cursor: text;
user-select: none; user-select: none;
width: 100%;
display: inline-block
} }
.slider .process { .slider .process {
position: absolute; position: absolute;

68
hb_client/src/views/pm/gantt.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<div>
<div class="chart" ref="chart"> <div class="chart" ref="chart">
<div class="left" :style="{ width: rightLineX + 'px' }"> <div class="left" :style="{ width: rightLineX + 'px' }">
<leftMenu <leftMenu
@ -157,10 +158,12 @@
</div> </div>
<div class="lineBG" @scroll="handlerBGScroll" ref="lineBG"> <div class="lineBG" @scroll="handlerBGScroll" ref="lineBG">
<template v-for="(item, index) in computedList"> <template v-for="(item, index) in computedList">
<!--<div :key="item.id" class="tetst">{{item.id}}</div>--> <!--<div :key="item.id" class="tetst">{{item.isShow}}</div>-->
<div <div
v-show="item.isShow"
:ref="'line' + item.id" :ref="'line' + item.id"
:key="item.id + index" :key="item.id + index"
class="line" class="line"
:style="{ :style="{
left: item.left + 'px', left: item.left + 'px',
@ -270,6 +273,7 @@
</transition> </transition>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -284,8 +288,8 @@
}, },
data() { data() {
return { return {
//当前项是否是子集
disable: true, disable: true,
//当前项是否是子集
isChildren: false, isChildren: false,
dialogVal: false, dialogVal: false,
//title //title
@ -375,13 +379,13 @@
let that = this; let that = this;
getPlanGantt({}).then(res=>{ getPlanGantt({}).then(res=>{
if(res.code===200){ if(res.code===200){
debugger; // debugger;
let arr =[]; let arr =[];
let list = res.data.results; let list = res.data.results;
list.forEach(item => { list.forEach(item => {
if (!item.children || item.children.length < 1) { if (!item.children || item.children.length < 1) {
let startTime = new Date(item.startTime).getTime(); let startTime = new Date(item.start_date).getTime();
let endTime = new Date(item.endDate).getTime(); let endTime = new Date(item.end_date).getTime();
let obj=new Object(); let obj=new Object();
obj.name=item.number; obj.name=item.number;
obj.id=item.id; obj.id=item.id;
@ -391,19 +395,19 @@
obj.planTime = [startTime,endTime]; obj.planTime = [startTime,endTime];
obj.per=item.count; obj.per=item.count;
obj.per1=item.count_real; obj.per1=item.count_real;
obj.type=3; obj.type=1;
obj.isShow= true; obj.isShow= true;
arr.push(obj); arr.push(obj);
} else if (item.children && item.children.length >= 1) { } else if (item.children && item.children.length >= 1) {
let startTime = new Date(item.start_date).getTime(); let startTime = new Date(item.start_date).getTime();
let endTime = new Date(item.start_date).getTime(); let endTime = new Date(item.end_date).getTime();
debugger; debugger;
let temp =[]; let temp =[];
let parentId = item.id; let parentId = item.id;
let children = item.children; let children = item.children;
children.forEach(child => { children.forEach(child => {
let start = new Date(item.start_date).getTime(); let start = new Date(child.start_date).getTime();
let end = new Date(item.end_date).getTime(); let end = new Date(child.end_date).getTime();
let objChild = new Object(); let objChild = new Object();
objChild.name = child.number; objChild.name = child.number;
objChild.id = child.id; objChild.id = child.id;
@ -434,7 +438,7 @@
arr.push(obj); arr.push(obj);
} }
that.list = arr; that.list = arr;
that.handlerCheckList(arr); that.handlerCheckList(that.list);
}); });
console.log(that.list); console.log(that.list);
}else{ }else{
@ -444,7 +448,7 @@
}, },
computed: { computed: {
computedList() { computedList() {
debugger; // debugger;
console.log(this.list); console.log(this.list);
let arr = []; let arr = [];
this.list.forEach(item => { this.list.forEach(item => {
@ -489,7 +493,7 @@
//过滤导入的数据 //过滤导入的数据
handlerCheckList(list) { handlerCheckList(list) {
list.forEach((item, index) => { list.forEach((item, index) => {
item.planTime = []; item.planTime = [item.startTime, item.endTime];
item.left = this.computedTimeWidth(item.startTime); item.left = this.computedTimeWidth(item.startTime);
item.widthMe = item.widthChild = this.computedTimeWidth(item.startTime, item.endTime) ; item.widthMe = item.widthChild = this.computedTimeWidth(item.startTime, item.endTime) ;
item.isShow = true; item.isShow = true;
@ -499,14 +503,11 @@
item.isexpand = true; item.isexpand = true;
if (item.children.length > 0) { if (item.children.length > 0) {
item.children.forEach((k, i) => { item.children.forEach((k, i) => {
k.planTime = []; k.planTime = [k.startTime, k.endTime];
k.top = item.top + i * 40 + 35; k.top = item.top + i * 40 + 40;
k.isShow = true; k.isShow = true;
k.left = this.computedTimeWidth(k.startTime); k.left = this.computedTimeWidth(k.startTime);
k.widthMe = k.widthChild = this.computedTimeWidth( k.widthMe = k.widthChild = this.computedTimeWidth(k.startTime,k.endTime,k);
k.startTime,
k.endTime
);
}); });
} }
} }
@ -518,14 +519,11 @@
item.isexpand = true; item.isexpand = true;
if (item.children.length > 0) { if (item.children.length > 0) {
item.children.forEach((z, o) => { item.children.forEach((z, o) => {
z.planTime = []; z.planTime = [z.startTime, z.endTime];
z.top = item.top + o * 40+40; z.top = item.top + o * 40+40;
z.isShow = true; z.isShow = true;
z.left = this.computedTimeWidth(z.startTime); z.left = this.computedTimeWidth(z.startTime);
z.widthMe = z.widthChild = this.computedTimeWidth( z.widthMe = z.widthChild = this.computedTimeWidth(z.startTime, z.endTime,z);
z.startTime,
z.endTime
);
}); });
} }
} }
@ -570,21 +568,15 @@
}, },
// 根据时间计算距离 // 根据时间计算距离
computedTimeWidth(startTime, endTime) { computedTimeWidth(startTime, endTime) {
let start = new Date(startTime).getTime();
let end = new Date(endTime).getTime();
let left =
(Math.floor(
start - new Date(`${this.currentYear - 1}/01/01`).getTime()
) /
(1000 * 60 * 60 * 24)) *
this.currentDaySize.value;
let width =
(Math.floor(end - start) / (1000 * 60 * 60 * 24)) *
this.currentDaySize.value +
this.currentDaySize.value;
if (!endTime) { if (!endTime) {
let left =
(Math.floor( startTime - new Date(`${this.currentYear - 1}/01/01`).getTime() ) /
(1000 * 60 * 60 * 24)) *this.currentDaySize.value;
return left; return left;
} else { } else {
let width = (Math.floor(endTime - startTime) / (1000 * 60 * 60 * 24)) * this.currentDaySize.value + this.currentDaySize.value;
debugger;
console.log(width);
return width; return width;
} }
}, },
@ -697,9 +689,8 @@
behavior: "smooth" behavior: "smooth"
}); });
}, },
//更改daySize //更改daySize-----按天/按周/按月
handleSetDaySize(item) { handleSetDaySize(item) {
// console.log(item);
this.currentDaySize = item; this.currentDaySize = item;
this.days.forEach((item, index) => { this.days.forEach((item, index) => {
item.width = (index + 1) * this.currentDaySize.value; item.width = (index + 1) * this.currentDaySize.value;
@ -797,8 +788,7 @@
* @param {Boolean|String} time * @param {Boolean|String} time
*/ */
computedWithTime(width, time) { computedWithTime(width, time) {
let startTime = let startTime = (width / this.currentDaySize.value) * (1000 * 60 * 60 * 24) +
(width / this.currentDaySize.value) * (1000 * 60 * 60 * 24) +
new Date(`${this.currentYear - 1}/01/01`).getTime(); new Date(`${this.currentYear - 1}/01/01`).getTime();
let s = new Date(startTime); let s = new Date(startTime);
if (time && time == true) { if (time && time == true) {