gantt
This commit is contained in:
parent
65280b7411
commit
88d2e747d9
|
|
@ -2,7 +2,6 @@
|
|||
<div
|
||||
class="slider"
|
||||
ref="slider"
|
||||
:style="{ width: '100%', display: inline-block}"
|
||||
>
|
||||
<div
|
||||
class="process"
|
||||
|
|
@ -113,6 +112,8 @@ export default {
|
|||
border-radius: 3px;
|
||||
cursor: text;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
display: inline-block
|
||||
}
|
||||
.slider .process {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,44 +1,45 @@
|
|||
<template>
|
||||
<div class="chart" ref="chart">
|
||||
<div class="left" :style="{ width: rightLineX + 'px' }">
|
||||
<leftMenu
|
||||
:list="list"
|
||||
ref="leftMenu"
|
||||
:BGScrollTop.sync="BGScrollTop"
|
||||
@TableScrollTop="TableScrollTop"
|
||||
@handlerRowClick="handlerRowClick"
|
||||
@handlerGroup="handlerGroup"
|
||||
@handlerExpand="handlerExpand"
|
||||
></leftMenu>
|
||||
<div class="rightLine" :style="{ left: rightLineX + 'px' }"></div>
|
||||
<div
|
||||
class="rightLine"
|
||||
:style="{ left: rightLineX + 'px' }"
|
||||
ref="rightLine"
|
||||
@mousedown="rightLineMousedown"
|
||||
></div>
|
||||
</div>
|
||||
<div class="date" :style="{ left: rightLineX + 2 + 'px' }">
|
||||
<div class="years" v-for="item in allDays" :key="item.year">
|
||||
<div>
|
||||
<div class="chart" ref="chart">
|
||||
<div class="left" :style="{ width: rightLineX + 'px' }">
|
||||
<leftMenu
|
||||
:list="list"
|
||||
ref="leftMenu"
|
||||
:BGScrollTop.sync="BGScrollTop"
|
||||
@TableScrollTop="TableScrollTop"
|
||||
@handlerRowClick="handlerRowClick"
|
||||
@handlerGroup="handlerGroup"
|
||||
@handlerExpand="handlerExpand"
|
||||
></leftMenu>
|
||||
<div class="rightLine" :style="{ left: rightLineX + 'px' }"></div>
|
||||
<div
|
||||
class="month"
|
||||
v-for="(value, key) in item.month[0]"
|
||||
:key="value + 'zz' + key"
|
||||
:style="{ width: value.length * currentDaySize.value + 'px' }"
|
||||
>
|
||||
<div class="month-top">{{ item.year }}年{{ key }}月</div>
|
||||
</div>
|
||||
class="rightLine"
|
||||
:style="{ left: rightLineX + 'px' }"
|
||||
ref="rightLine"
|
||||
@mousedown="rightLineMousedown"
|
||||
></div>
|
||||
</div>
|
||||
<div class="topMonth" v-if="showFixdTopMonth">{{ fixdTopMonth }}</div>
|
||||
<div class="allDaysArray">
|
||||
<div class="alldays">
|
||||
<div class="date" :style="{ left: rightLineX + 2 + 'px' }">
|
||||
<div class="years" v-for="item in allDays" :key="item.year">
|
||||
<div
|
||||
v-for="(j, index) in days"
|
||||
:key="index"
|
||||
class="day"
|
||||
:style="{ width: currentDaySize.value + 'px' }"
|
||||
class="month"
|
||||
v-for="(value, key) in item.month[0]"
|
||||
:key="value + 'zz' + key"
|
||||
:style="{ width: value.length * currentDaySize.value + 'px' }"
|
||||
>
|
||||
<template v-if="currentDaySize.value === 20">
|
||||
<div class="month-top">{{ item.year }}年{{ key }}月</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topMonth" v-if="showFixdTopMonth">{{ fixdTopMonth }}</div>
|
||||
<div class="allDaysArray">
|
||||
<div class="alldays">
|
||||
<div
|
||||
v-for="(j, index) in days"
|
||||
:key="index"
|
||||
class="day"
|
||||
:style="{ width: currentDaySize.value + 'px' }"
|
||||
>
|
||||
<template v-if="currentDaySize.value === 20">
|
||||
<span
|
||||
v-if="j.today"
|
||||
class="dateNum todayDateNum"
|
||||
|
|
@ -46,34 +47,34 @@
|
|||
>
|
||||
今天
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="dateNum"
|
||||
:style="{
|
||||
<span
|
||||
v-else
|
||||
class="dateNum"
|
||||
:style="{
|
||||
borderLeft: index == 0 ? 'none' : '1px solid #d7d7d7'
|
||||
}"
|
||||
:class="{
|
||||
:class="{
|
||||
weekday: j.weekday == 0 || j.weekday == 6,
|
||||
isHover:
|
||||
j.width >= currentLineDay.start &&
|
||||
j.width <= currentLineDay.end
|
||||
}"
|
||||
>{{ j.date }}</span>
|
||||
<span
|
||||
class="dateBG"
|
||||
:class="{
|
||||
>{{ j.date }}</span>
|
||||
<span
|
||||
class="dateBG"
|
||||
:class="{
|
||||
weekday2: j.weekday == 0,
|
||||
weekday1: j.weekday == 6,
|
||||
today: j.today
|
||||
}"
|
||||
:style="{
|
||||
:style="{
|
||||
width: currentDaySize.value + 'px',
|
||||
height:
|
||||
j.weekday == 0 || j.weekday == 6 ? lineBGHeight : '0px'
|
||||
}"
|
||||
></span>
|
||||
</template>
|
||||
<template v-if="currentDaySize.value == 10">
|
||||
></span>
|
||||
</template>
|
||||
<template v-if="currentDaySize.value == 10">
|
||||
<span
|
||||
class="dateNum"
|
||||
:class="{
|
||||
|
|
@ -100,21 +101,21 @@
|
|||
{{ j.date }}
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
class="dateBG"
|
||||
:class="{
|
||||
<span
|
||||
class="dateBG"
|
||||
:class="{
|
||||
weekday2: j.weekday === 0,
|
||||
weekday1: j.weekday === 6,
|
||||
today: j.today
|
||||
}"
|
||||
:style="{
|
||||
:style="{
|
||||
width: currentDaySize.value + 'px',
|
||||
height:
|
||||
j.weekday === 0 || j.weekday === 6 ? lineBGHeight : '0px'
|
||||
}"
|
||||
></span>
|
||||
</template>
|
||||
<template v-if="currentDaySize.value === 2">
|
||||
></span>
|
||||
</template>
|
||||
<template v-if="currentDaySize.value === 2">
|
||||
<span
|
||||
class="dateNum"
|
||||
:class="{
|
||||
|
|
@ -140,34 +141,36 @@
|
|||
{{ j.date }}
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
class="dateBG weekday2"
|
||||
:class="{
|
||||
<span
|
||||
class="dateBG weekday2"
|
||||
:class="{
|
||||
today: j.today
|
||||
}"
|
||||
style="border-right:none;"
|
||||
:style="{
|
||||
style="border-right:none;"
|
||||
:style="{
|
||||
width: currentDaySize.value + 'px',
|
||||
height:
|
||||
j.weekday === 0 || j.weekday === 6 ? lineBGHeight : '0px'
|
||||
}"
|
||||
></span>
|
||||
</template>
|
||||
></span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineBG" @scroll="handlerBGScroll" ref="lineBG">
|
||||
<template v-for="(item, index) in computedList">
|
||||
<!--<div :key="item.id" class="tetst">{{item.id}}</div>-->
|
||||
<div
|
||||
:ref="'line' + item.id"
|
||||
:key="item.id + index"
|
||||
class="line"
|
||||
:style="{
|
||||
<div class="lineBG" @scroll="handlerBGScroll" ref="lineBG">
|
||||
<template v-for="(item, index) in computedList">
|
||||
<!--<div :key="item.id" class="tetst">{{item.isShow}}</div>-->
|
||||
<div
|
||||
v-show="item.isShow"
|
||||
:ref="'line' + item.id"
|
||||
:key="item.id + index"
|
||||
|
||||
class="line"
|
||||
:style="{
|
||||
left: item.left + 'px',
|
||||
width: item.widthMe + 'px',
|
||||
top: item.top + 'px'
|
||||
}"
|
||||
@mouseover="
|
||||
@mouseover="
|
||||
lineMouseover(
|
||||
`line${item.id}`,
|
||||
$event,
|
||||
|
|
@ -176,8 +179,8 @@
|
|||
index
|
||||
)
|
||||
"
|
||||
@mouseleave="lineMouseleave"
|
||||
@mouseenter="
|
||||
@mouseleave="lineMouseleave"
|
||||
@mouseenter="
|
||||
lineMouseenter(
|
||||
`line${item.id}`,
|
||||
$event,
|
||||
|
|
@ -186,88 +189,89 @@
|
|||
index
|
||||
)
|
||||
"
|
||||
>
|
||||
<slider
|
||||
v-show="item.type == 1"
|
||||
:id="item.id"
|
||||
v-model="item.per"
|
||||
:min="0"
|
||||
:max="item.per"
|
||||
:per1="item.per1"
|
||||
:disabled="disable"
|
||||
:widths="item.widthChild"
|
||||
></slider>
|
||||
</div>
|
||||
<div
|
||||
v-if="item.type == 3"
|
||||
:key="item.id"
|
||||
class="group"
|
||||
:style="{
|
||||
>
|
||||
<slider
|
||||
v-show="item.type == 1"
|
||||
:id="item.id"
|
||||
v-model="item.per"
|
||||
:min="0"
|
||||
:max="item.per"
|
||||
:per1="item.per1"
|
||||
:disabled="disable"
|
||||
:widths="item.widthChild"
|
||||
></slider>
|
||||
</div>
|
||||
<div
|
||||
v-if="item.type == 3"
|
||||
:key="item.id"
|
||||
class="group"
|
||||
:style="{
|
||||
top: item.top + 'px',
|
||||
left: item.left + 'px',
|
||||
width: item.widthMe + 'px'
|
||||
}"
|
||||
>
|
||||
<div class="progress" :style="{ width: item.per + '%' }"></div>
|
||||
</div>
|
||||
</template>
|
||||
>
|
||||
<div class="progress" :style="{ width: item.per + '%' }"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolTip">
|
||||
<!--<div class="today base" @click="handleGoToday">今天</div>-->
|
||||
<el-dropdown trigger="click">
|
||||
<div class="toolTip">
|
||||
<!--<div class="today base" @click="handleGoToday">今天</div>-->
|
||||
<el-dropdown trigger="click">
|
||||
<span class="base">
|
||||
{{this.currentDaySize.label}}
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu
|
||||
slot="dropdown"
|
||||
:style="{ left: this.left + 'px !important' }"
|
||||
>
|
||||
<el-dropdown-item
|
||||
v-for="item in currentDaySizeOptions"
|
||||
:key="item.value + 'ck'"
|
||||
@click.native="handleSetDaySize(item)"
|
||||
<el-dropdown-menu
|
||||
slot="dropdown"
|
||||
:style="{ left: this.left + 'px !important' }"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div
|
||||
v-show="isShowMsg"
|
||||
:style="{
|
||||
<el-dropdown-item
|
||||
v-for="item in currentDaySizeOptions"
|
||||
:key="item.value + 'ck'"
|
||||
@click.native="handleSetDaySize(item)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div
|
||||
v-show="isShowMsg"
|
||||
:style="{
|
||||
left: currentProjectMsg.left + 'px',
|
||||
top: currentProjectMsg.top + 'px'
|
||||
}"
|
||||
class="projectMsg"
|
||||
>
|
||||
<div class="lineMsg projectName">
|
||||
{{ currentProjectMsg.name }}
|
||||
class="projectMsg"
|
||||
>
|
||||
<div class="lineMsg projectName">
|
||||
{{ currentProjectMsg.name }}
|
||||
</div>
|
||||
<div class="lineMsg">
|
||||
<span class="title">工作周期：</span>
|
||||
<span>{{ currentProjectMsg.allTime }}天</span>
|
||||
</div>
|
||||
<div class="lineMsg">
|
||||
<span class="title">当前进度：</span>
|
||||
<span>{{ currentProjectMsg.per }}</span>
|
||||
</div>
|
||||
<div class="lineMsg">
|
||||
<span class="title">合格数量：</span>
|
||||
<span>{{ currentProjectMsg.per1 }}</span>
|
||||
</div>
|
||||
<div class="lineMsg">
|
||||
<span class="title">开始时间：</span>
|
||||
<span>{{ currentProjectMsg.startTime }}</span>
|
||||
</div>
|
||||
<div class="lineMsg">
|
||||
<span class="title">结束时间：</span>
|
||||
<span>{{ currentProjectMsg.endTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineMsg">
|
||||
<span class="title">工作周期：</span>
|
||||
<span>{{ currentProjectMsg.allTime }}天</span>
|
||||
</div>
|
||||
<div class="lineMsg">
|
||||
<span class="title">当前进度：</span>
|
||||
<span>{{ currentProjectMsg.per }}</span>
|
||||
</div>
|
||||
<div class="lineMsg">
|
||||
<span class="title">合格数量：</span>
|
||||
<span>{{ currentProjectMsg.per1 }}</span>
|
||||
</div>
|
||||
<div class="lineMsg">
|
||||
<span class="title">开始时间：</span>
|
||||
<span>{{ currentProjectMsg.startTime }}</span>
|
||||
</div>
|
||||
<div class="lineMsg">
|
||||
<span class="title">结束时间：</span>
|
||||
<span>{{ currentProjectMsg.endTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -284,8 +288,8 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
//当前项是否是子集
|
||||
disable: true,
|
||||
//当前项是否是子集
|
||||
isChildren: false,
|
||||
dialogVal: false,
|
||||
//title
|
||||
|
|
@ -375,13 +379,13 @@
|
|||
let that = this;
|
||||
getPlanGantt({}).then(res=>{
|
||||
if(res.code===200){
|
||||
debugger;
|
||||
// debugger;
|
||||
let arr =[];
|
||||
let list = res.data.results;
|
||||
list.forEach(item => {
|
||||
if (!item.children || item.children.length < 1) {
|
||||
let startTime = new Date(item.startTime).getTime();
|
||||
let endTime = new Date(item.endDate).getTime();
|
||||
let startTime = new Date(item.start_date).getTime();
|
||||
let endTime = new Date(item.end_date).getTime();
|
||||
let obj=new Object();
|
||||
obj.name=item.number;
|
||||
obj.id=item.id;
|
||||
|
|
@ -391,19 +395,19 @@
|
|||
obj.planTime = [startTime,endTime];
|
||||
obj.per=item.count;
|
||||
obj.per1=item.count_real;
|
||||
obj.type=3;
|
||||
obj.type=1;
|
||||
obj.isShow= true;
|
||||
arr.push(obj);
|
||||
} else if (item.children && item.children.length >= 1) {
|
||||
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;
|
||||
let temp =[];
|
||||
let parentId = item.id;
|
||||
let children = item.children;
|
||||
children.forEach(child => {
|
||||
let start = new Date(item.start_date).getTime();
|
||||
let end = new Date(item.end_date).getTime();
|
||||
let start = new Date(child.start_date).getTime();
|
||||
let end = new Date(child.end_date).getTime();
|
||||
let objChild = new Object();
|
||||
objChild.name = child.number;
|
||||
objChild.id = child.id;
|
||||
|
|
@ -434,7 +438,7 @@
|
|||
arr.push(obj);
|
||||
}
|
||||
that.list = arr;
|
||||
that.handlerCheckList(arr);
|
||||
that.handlerCheckList(that.list);
|
||||
});
|
||||
console.log(that.list);
|
||||
}else{
|
||||
|
|
@ -444,7 +448,7 @@
|
|||
},
|
||||
computed: {
|
||||
computedList() {
|
||||
debugger;
|
||||
// debugger;
|
||||
console.log(this.list);
|
||||
let arr = [];
|
||||
this.list.forEach(item => {
|
||||
|
|
@ -489,7 +493,7 @@
|
|||
//过滤导入的数据
|
||||
handlerCheckList(list) {
|
||||
list.forEach((item, index) => {
|
||||
item.planTime = [];
|
||||
item.planTime = [item.startTime, item.endTime];
|
||||
item.left = this.computedTimeWidth(item.startTime);
|
||||
item.widthMe = item.widthChild = this.computedTimeWidth(item.startTime, item.endTime) ;
|
||||
item.isShow = true;
|
||||
|
|
@ -499,14 +503,11 @@
|
|||
item.isexpand = true;
|
||||
if (item.children.length > 0) {
|
||||
item.children.forEach((k, i) => {
|
||||
k.planTime = [];
|
||||
k.top = item.top + i * 40 + 35;
|
||||
k.planTime = [k.startTime, k.endTime];
|
||||
k.top = item.top + i * 40 + 40;
|
||||
k.isShow = true;
|
||||
k.left = this.computedTimeWidth(k.startTime);
|
||||
k.widthMe = k.widthChild = this.computedTimeWidth(
|
||||
k.startTime,
|
||||
k.endTime
|
||||
);
|
||||
k.widthMe = k.widthChild = this.computedTimeWidth(k.startTime,k.endTime,k);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -518,14 +519,11 @@
|
|||
item.isexpand = true;
|
||||
if (item.children.length > 0) {
|
||||
item.children.forEach((z, o) => {
|
||||
z.planTime = [];
|
||||
z.planTime = [z.startTime, z.endTime];
|
||||
z.top = item.top + o * 40+40;
|
||||
z.isShow = true;
|
||||
z.left = this.computedTimeWidth(z.startTime);
|
||||
z.widthMe = z.widthChild = this.computedTimeWidth(
|
||||
z.startTime,
|
||||
z.endTime
|
||||
);
|
||||
z.widthMe = z.widthChild = this.computedTimeWidth(z.startTime, z.endTime,z);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -570,21 +568,15 @@
|
|||
},
|
||||
// 根据时间计算距离
|
||||
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) {
|
||||
let left =
|
||||
(Math.floor( startTime - new Date(`${this.currentYear - 1}/01/01`).getTime() ) /
|
||||
(1000 * 60 * 60 * 24)) *this.currentDaySize.value;
|
||||
return left;
|
||||
} else {
|
||||
let width = (Math.floor(endTime - startTime) / (1000 * 60 * 60 * 24)) * this.currentDaySize.value + this.currentDaySize.value;
|
||||
debugger;
|
||||
console.log(width);
|
||||
return width;
|
||||
}
|
||||
},
|
||||
|
|
@ -697,9 +689,8 @@
|
|||
behavior: "smooth"
|
||||
});
|
||||
},
|
||||
//更改daySize
|
||||
//更改daySize-----按天/按周/按月
|
||||
handleSetDaySize(item) {
|
||||
// console.log(item);
|
||||
this.currentDaySize = item;
|
||||
this.days.forEach((item, index) => {
|
||||
item.width = (index + 1) * this.currentDaySize.value;
|
||||
|
|
@ -797,8 +788,7 @@
|
|||
* @param {Boolean|String} time
|
||||
*/
|
||||
computedWithTime(width, time) {
|
||||
let startTime =
|
||||
(width / this.currentDaySize.value) * (1000 * 60 * 60 * 24) +
|
||||
let startTime = (width / this.currentDaySize.value) * (1000 * 60 * 60 * 24) +
|
||||
new Date(`${this.currentYear - 1}/01/01`).getTime();
|
||||
let s = new Date(startTime);
|
||||
if (time && time == true) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue