2154 lines
65 KiB
Python
2154 lines
65 KiB
Python
<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"
|
||
@milestone="handlerMilestone"
|
||
@planProject="handlerPlanProject"
|
||
@handlerGroup="handlerGroup"
|
||
@handlerEdit="handlerEdit"
|
||
@handleGroupAdd="handleGroupAdd"
|
||
@handlerExpand="handlerExpand"
|
||
@handlerDel="handlerDel"
|
||
></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
|
||
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>
|
||
</div>
|
||
<div class="topMonth" v-if="showFixdTopMonth">{{ fixdTopMonth }}</div>
|
||
<div class="allDaysArray">
|
||
<div class="alldays">
|
||
<div
|
||
v-for="(j, index) in days"
|
||
:key="index + 'cc'"
|
||
class="day"
|
||
:style="{ width: currentDaySize.value + 'px' }"
|
||
>
|
||
<template v-if="currentDaySize.value == 40">
|
||
<span
|
||
class="dateNum todayDateNum"
|
||
v-if="j.today"
|
||
style="border-left:1px solid #d7d7d7;"
|
||
>
|
||
今天
|
||
</span>
|
||
<span
|
||
v-else
|
||
class="dateNum"
|
||
:style="{
|
||
borderLeft: index == 0 ? 'none' : '1px solid #d7d7d7'
|
||
}"
|
||
:class="{
|
||
weekday: j.weekday == 0 || j.weekday == 6,
|
||
isHover:
|
||
j.width >= currentLineDay.start &&
|
||
j.width <= currentLineDay.end
|
||
}"
|
||
>{{ j.date }}</span
|
||
>
|
||
<span
|
||
class="dateBG"
|
||
:class="{
|
||
weekday2: j.weekday == 0,
|
||
weekday1: j.weekday == 6,
|
||
today: j.today
|
||
}"
|
||
:style="{
|
||
width: currentDaySize.value + 'px',
|
||
height:
|
||
j.weekday == 0 || j.weekday == 6 ? lineBGHeight : '0px'
|
||
}"
|
||
></span>
|
||
</template>
|
||
<template v-if="currentDaySize.value == 24">
|
||
<!-- <span class="dateNum todayDateNum" v-if="j.today">
|
||
{{ j.date }}
|
||
</span> -->
|
||
<span
|
||
class="dateNum"
|
||
:class="{
|
||
weekday: j.weekday == 0 || j.weekday == 6,
|
||
isHover:
|
||
j.width >= currentLineDay.start &&
|
||
j.width <= currentLineDay.end,
|
||
nodBorder:
|
||
j.width >= currentLineDay.start &&
|
||
j.width <= currentLineDay.end
|
||
}"
|
||
>
|
||
<div
|
||
style="width:100%21px;height:100%;"
|
||
:style="{
|
||
borderLeft: index == 0 ? 'none' : '1px solid #d7d7d7'
|
||
}"
|
||
v-show="
|
||
(j.width == currentLineDay.end &&
|
||
isHover &&
|
||
j.weekday != 1) ||
|
||
(j.width == currentLineDay.start &&
|
||
isHover &&
|
||
j.weekday != 1) ||
|
||
j.weekday == 1
|
||
"
|
||
>
|
||
{{ j.date }}
|
||
</div>
|
||
</span>
|
||
<span
|
||
class="dateBG"
|
||
:class="{
|
||
weekday2: j.weekday == 0,
|
||
weekday1: j.weekday == 6,
|
||
today: j.today
|
||
}"
|
||
:style="{
|
||
width: currentDaySize.value + 'px',
|
||
height:
|
||
j.weekday == 0 || j.weekday == 6 ? lineBGHeight : '0px'
|
||
}"
|
||
></span>
|
||
</template>
|
||
<template v-if="currentDaySize.value == 12">
|
||
<!-- <span class="dateNum todayDateNum" v-if="j.today">
|
||
{{ j.date }}
|
||
</span> -->
|
||
<span
|
||
class="dateNum"
|
||
:class="{
|
||
isHover:
|
||
j.width >= currentLineDay.start &&
|
||
j.width <= currentLineDay.end,
|
||
nodBorder:
|
||
j.width >= currentLineDay.start &&
|
||
j.width <= currentLineDay.end
|
||
}"
|
||
>
|
||
<div
|
||
style="width:100%;height:100%;font-size:10px!important;"
|
||
:style="{
|
||
borderLeft: index == 0 ? 'none' : '1px solid #d7d7d7'
|
||
}"
|
||
v-show="
|
||
(j.width == currentLineDay.end && isHover && j.date != 1) ||
|
||
(j.width == currentLineDay.start &&
|
||
isHover &&
|
||
j.date != 1) ||
|
||
j.date == 1
|
||
"
|
||
>
|
||
{{ j.date }}
|
||
</div>
|
||
</span>
|
||
<span
|
||
class="dateBG weekday2"
|
||
:class="{
|
||
today: j.today
|
||
}"
|
||
style="border-right:none;"
|
||
:style="{
|
||
width: currentDaySize.value + 'px',
|
||
height:
|
||
j.weekday == 0 || j.weekday == 6 ? lineBGHeight : '0px'
|
||
}"
|
||
></span>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class="lineBG" @scroll="handlerBGScroll" ref="lineBG">
|
||
<template v-for="(item, index) in computedList">
|
||
<div
|
||
class="line"
|
||
:style="{
|
||
left: item.left + 'px',
|
||
width: item.widthMe + 'px',
|
||
top: item.top + 'px'
|
||
}"
|
||
v-show="(item.type == '1' || item.type == '2') && item.isShow"
|
||
:ref="'line' + item.id"
|
||
:key="item.id + index + 'ccc'"
|
||
@mouseover="
|
||
lineMouseover(
|
||
`line${item.id}`,
|
||
$event,
|
||
item.id,
|
||
item.parentId,
|
||
index
|
||
)
|
||
"
|
||
@mouseleave="lineMouseleave"
|
||
@mouseenter="
|
||
lineMouseenter(
|
||
`line${item.id}`,
|
||
$event,
|
||
item.id,
|
||
item.parentId,
|
||
index
|
||
)
|
||
"
|
||
>
|
||
<slider
|
||
:min="0"
|
||
:max="10"
|
||
v-model="item.per"
|
||
:id="item.id"
|
||
:per1="item.per1"
|
||
:disabled="disable"
|
||
:parentId="item.parentId"
|
||
:widths="item.widthChild"
|
||
v-show="item.type == '1'"
|
||
></slider>
|
||
<!-- <div
|
||
class="leftCurDrag"
|
||
v-show="item.type == '1'"
|
||
@mousedown.stop="
|
||
leftCurDragMounsedown(
|
||
`line${item.id}`,
|
||
$event,
|
||
item.id,
|
||
item.parentId,
|
||
index
|
||
)
|
||
"
|
||
></div>
|
||
<div
|
||
class="rightCurDrag"
|
||
v-show="item.type == '1'"
|
||
@mousedown.stop="
|
||
rightCurDragMounsedown(
|
||
`line${item.id}`,
|
||
$event,
|
||
item.id,
|
||
item.parentId,
|
||
index
|
||
)
|
||
"
|
||
></div>-->
|
||
<div
|
||
class="stoneLine"
|
||
:style="{ top: -item.top + 'px', height: item.top + 'px' }"
|
||
v-if="item.type == '2'"
|
||
@mouseenter="stoneLineMouseenter"
|
||
></div>
|
||
<div class="milestone" v-if="item.type == '2'">
|
||
<i class="el-icon-check"></i>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="group"
|
||
:style="{
|
||
top: item.top + 'px',
|
||
left: item.left + 'px',
|
||
width: item.widthMe + 'px'
|
||
}"
|
||
v-if="item.type == '3'"
|
||
:key="item.id + 'zzzzz'"
|
||
>
|
||
<div class="progress" :style="{ width: item.per + '%' }"></div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<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)"
|
||
>{{ item.label }}</el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</div>
|
||
<transition name="el-zoom-in-center">
|
||
<div
|
||
class="projectMsg"
|
||
v-if="isShowMsg"
|
||
:style="{
|
||
left: currentProjectMsg.left + 'px',
|
||
top: currentProjectMsg.top + 'px'
|
||
}"
|
||
>
|
||
<div class="lineMsg">
|
||
<span class="projectName">{{ currentProjectMsg.name }}</span>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import slider from "./components/slider";
|
||
import leftMenu from "./components/leftMenu";
|
||
export default {
|
||
components: {
|
||
slider,
|
||
leftMenu,
|
||
},
|
||
data() {
|
||
return {
|
||
//当前项是否是子集
|
||
disable: true,
|
||
isChildren: false,
|
||
dialogVal: false,
|
||
//title
|
||
title: "新建",
|
||
//定时器
|
||
timer: null,
|
||
//leftMenu的右侧伸缩线
|
||
rightLineX: 400,
|
||
fixdTopMonth: "",
|
||
//近三年的所有年月日
|
||
allDays: [],
|
||
//所有的天数
|
||
days: [],
|
||
//月数
|
||
monthArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||
//项目数据
|
||
list: [
|
||
{
|
||
name: "1",
|
||
ower: "",
|
||
per: 30,
|
||
type: "3",
|
||
planTime: [],
|
||
stoneTime: "",
|
||
startTime: "",
|
||
endTime: "",
|
||
id: 1589512272596,
|
||
expand: true,
|
||
top: 15,
|
||
isShow: true,
|
||
children: [
|
||
{
|
||
name: "1-1",
|
||
ower: "",
|
||
per: 8,
|
||
per1: 6,
|
||
type: "1",
|
||
planTime: [1589472000000, 1589817600000],
|
||
stoneTime: "",
|
||
startTime: 1589472000000,
|
||
endTime: 1589817600000,
|
||
left: 20000,
|
||
widthChild: 200,
|
||
widthMe: 200,
|
||
top: 55,
|
||
id: 1589512287571,
|
||
isShow: true,
|
||
parentId: 1589512272596
|
||
},
|
||
{
|
||
name: "1-2",
|
||
ower: "",
|
||
per: 3,
|
||
per1: 2,
|
||
type: "1",
|
||
planTime: [1589817600000, 1590076800000],
|
||
stoneTime: "",
|
||
startTime: 1589817600000,
|
||
endTime: 1590076800000,
|
||
left: 20160,
|
||
widthChild: 160,
|
||
widthMe: 160,
|
||
top: 95,
|
||
id: 1589512309848,
|
||
isShow: true,
|
||
parentId: 1589512272596
|
||
}
|
||
],
|
||
widthChild: 320,
|
||
widthMe: 320,
|
||
left: 20000
|
||
},
|
||
/*{
|
||
name: "2",
|
||
ower: "",
|
||
per: 100,
|
||
type: "2",
|
||
planTime: [],
|
||
stoneTime: 1590249600000,
|
||
startTime: 1590249600000,
|
||
endTime: 1590249600000,
|
||
left: 20360,
|
||
widthChild: 40,
|
||
widthMe: 40,
|
||
top: 135,
|
||
id: 1589512324786,
|
||
isShow: true
|
||
},
|
||
{
|
||
name: "3",
|
||
ower: "",
|
||
per: 100,
|
||
type: "2",
|
||
planTime: [1589472000000, 1589817600000],
|
||
stoneTime: 1590422400000,
|
||
startTime: 1590422400000,
|
||
endTime: 1590422400000,
|
||
left: 20440,
|
||
widthChild: 40,
|
||
widthMe: 40,
|
||
top: 175,
|
||
id: 1589512356185,
|
||
isShow: true
|
||
}*/
|
||
],
|
||
// list: [],
|
||
//当前hover的项目起止时间
|
||
currentLineDay: {
|
||
start: 0,
|
||
end: 0
|
||
},
|
||
//当前的时间大小
|
||
currentDaySize: {
|
||
label: "天",
|
||
value: 40
|
||
},
|
||
currentDaySizeOptions: [
|
||
{
|
||
label: "天",
|
||
value: 40
|
||
},
|
||
{
|
||
label: "周",
|
||
value: 24
|
||
},
|
||
{
|
||
label: "月",
|
||
value: 12
|
||
}
|
||
],
|
||
//是否显示信息
|
||
isShowMsg: false,
|
||
//当前hover的项目信息
|
||
currentProjectMsg: {
|
||
name: "",
|
||
allTime: 0,
|
||
per: 0,
|
||
per1: 0,
|
||
startTime: 0,
|
||
endTime: 0,
|
||
left: 0,
|
||
top: 0
|
||
},
|
||
isHover: false,
|
||
showFixdTopMonth: false,
|
||
currentListIndex: "",
|
||
//正在编辑的row
|
||
editRow: [],
|
||
currentRow: null,
|
||
// BG滚动高度
|
||
BGScrollTop: 0,
|
||
// 背景高度
|
||
lineBGHeight: 0,
|
||
expandArr: []
|
||
};
|
||
},
|
||
computed: {
|
||
computedList() {
|
||
let arr = [];
|
||
this.list.forEach(item => {
|
||
if (!item.children || item.children.length < 1) {
|
||
arr.push(item);
|
||
} else if (item.children && item.children.length >= 1) {
|
||
arr.push(item);
|
||
arr = arr.concat(item.children);
|
||
}
|
||
});
|
||
return arr;
|
||
},
|
||
left() {
|
||
return window.innerWidth - 30;
|
||
},
|
||
//当前年份
|
||
currentYear() {
|
||
return new Date().getFullYear();
|
||
},
|
||
//当前月份
|
||
currentMonth() {
|
||
return new Date().getMonth() + 1;
|
||
},
|
||
//当前日
|
||
currentDay() {
|
||
return new Date().getDate();
|
||
}
|
||
},
|
||
methods: {
|
||
TableScrollTop(val) {
|
||
let lineBG = this.$refs.lineBG;
|
||
lineBG.scrollTo(0, val);
|
||
// lineBG.scrollTo({
|
||
// top: val,
|
||
// left: 0,
|
||
// behavior: "smooth"
|
||
// });
|
||
},
|
||
handlerBGScroll(e) {
|
||
this.BGScrollTop = e.srcElement.scrollTop;
|
||
},
|
||
//保存当前的所有数据
|
||
handlerSaveData() {
|
||
// console.log(this.list);
|
||
// this.handlerCheckList();
|
||
},
|
||
//过滤导入的数据
|
||
handlerCheckList() {
|
||
let l = [];
|
||
l.forEach((item, index) => {
|
||
item.planTime = [];
|
||
item.left =
|
||
item.type == 3 ? "" : this.computedTimeWidth(item.startTime);
|
||
item.widthMe = item.widthChild =
|
||
item.type == 3
|
||
? ""
|
||
: this.computedTimeWidth(item.startTime, item.endTime);
|
||
item.isShow = true;
|
||
if (index - 1 < 0) {
|
||
item.top = 15;
|
||
if (item.type == 3) {
|
||
item.isexpand = true;
|
||
if (item.children.length > 0) {
|
||
item.children.forEach((k, i) => {
|
||
k.planTime = [];
|
||
k.top = item.top + i * 40 + 35;
|
||
k.isShow = true;
|
||
k.left = this.computedTimeWidth(k.startTime);
|
||
k.widthMe = k.widthChild = this.computedTimeWidth(
|
||
k.startTime,
|
||
k.endTime
|
||
);
|
||
});
|
||
}
|
||
}
|
||
} else {
|
||
if (l[index - 1].type == 3) {
|
||
item.top =
|
||
l[index - 1].top + l[index - 1].children.length * 40 + 40;
|
||
if (item.type == 3) {
|
||
item.isexpand = true;
|
||
if (item.children.length > 0) {
|
||
item.children.forEach((z, o) => {
|
||
z.planTime = [];
|
||
z.top = item.top + o * 40;
|
||
z.isShow = true;
|
||
z.left = this.computedTimeWidth(z.startTime);
|
||
z.widthMe = z.widthChild = this.computedTimeWidth(
|
||
z.startTime,
|
||
z.endTime
|
||
);
|
||
});
|
||
}
|
||
}
|
||
} else {
|
||
item.top = l[index - 1].top + 40;
|
||
}
|
||
}
|
||
});
|
||
l.forEach(item => {
|
||
if (item.type == 3) {
|
||
this.setGroupWidth(item.id, l);
|
||
this.setGroupPer(item.id, l);
|
||
}
|
||
});
|
||
// console.log(l);
|
||
this.list = l;
|
||
this.setStoneLine(1);
|
||
// window.scrollTo(this.list[0].left - 100, 0);
|
||
window.scrollTo({
|
||
top: 0,
|
||
left: this.list[0].left - 100,
|
||
behavior: "smooth"
|
||
});
|
||
},
|
||
//设置左侧leftmenu高亮
|
||
handlerSelect(row) {
|
||
this.$refs.leftMenu.handlerSelect(row);
|
||
},
|
||
//分组是否展开
|
||
handlerExpand(row, expand) {
|
||
let rowIndex = this.list.findIndex(item => {
|
||
return item.id == row.id;
|
||
});
|
||
this.list[rowIndex].expand = expand;
|
||
if (
|
||
this.list[rowIndex].children &&
|
||
this.list[rowIndex].children.length > 0
|
||
) {
|
||
this.list[rowIndex].children.forEach(k => {
|
||
k.isShow = expand;
|
||
});
|
||
}
|
||
this.resetTop(rowIndex, !expand, true);
|
||
},
|
||
//分组添加子集
|
||
handleGroupAdd(row) {
|
||
this.$nextTick(() => {
|
||
this.$refs.dialogAdd.resetFields();
|
||
});
|
||
this.currentListIndex = this.list.findIndex(item => {
|
||
return item.id == row.id;
|
||
});
|
||
this.dialogVal = true;
|
||
this.isChildren = true;
|
||
},
|
||
//编辑
|
||
handlerEdit(row) {
|
||
this.title = "编辑";
|
||
this.dialogVal = true;
|
||
let obj = {};
|
||
if (row.parentId) {
|
||
this.editRow[0] = row.parentId;
|
||
this.editRow[1] = row.id;
|
||
let parent = this.list.find(item => {
|
||
return item.id == row.parentId;
|
||
});
|
||
let cur = parent.children.find(item => {
|
||
return item.id == row.id;
|
||
});
|
||
let { name, ower, type, planTime, stoneTime, per } = cur;
|
||
obj = { name, ower, type, planTime, stoneTime, per };
|
||
if (type == 2) {
|
||
obj.stoneTime = this.computedWithTime(cur.left, true);
|
||
}
|
||
obj.planTime[0] = this.computedWithTime(cur.left, true);
|
||
obj.planTime[1] = this.computedWithTime(
|
||
cur.left + cur.widthMe - this.currentDaySize.value,
|
||
true
|
||
);
|
||
// console.log(obj);
|
||
this.$nextTick(() => {
|
||
this.$refs.dialogAdd.form = obj;
|
||
});
|
||
} else {
|
||
this.editRow[0] = row.id;
|
||
let cur = this.list.find(item => {
|
||
return item.id == row.id;
|
||
});
|
||
let { name, ower, type, planTime, stoneTime, per } = cur;
|
||
obj = { name, ower, type, planTime, stoneTime, per };
|
||
if (type == 2) {
|
||
obj.stoneTime = this.computedWithTime(cur.left, true);
|
||
}
|
||
obj.planTime[0] = this.computedWithTime(cur.left, true);
|
||
obj.planTime[1] = this.computedWithTime(
|
||
cur.left + cur.widthMe - this.currentDaySize.value,
|
||
true
|
||
);
|
||
this.$nextTick(() => {
|
||
this.$refs.dialogAdd.form = obj;
|
||
});
|
||
}
|
||
},
|
||
//删除
|
||
handlerDel(row) {
|
||
if (!row.parentId) {
|
||
let index = this.list.findIndex(item => {
|
||
return item.id == row.id;
|
||
});
|
||
this.list.splice(index, 1);
|
||
if (row.type == 3) {
|
||
if (!row.expand) {
|
||
this.retDelTop(index, 1);
|
||
} else {
|
||
this.retDelTop(index, row.children.length + 1);
|
||
}
|
||
} else {
|
||
this.retDelTop(index, 1);
|
||
}
|
||
} else {
|
||
let parent = this.list.find(item => {
|
||
return item.id == row.parentId;
|
||
});
|
||
let parentIndex = this.list.findIndex(item => {
|
||
return item.id == row.parentId;
|
||
});
|
||
let cindex = parent.children.findIndex(k => {
|
||
return k.id == row.id;
|
||
});
|
||
parent.children.splice(cindex, 1);
|
||
if (parent.children[cindex]) {
|
||
parent.children.forEach((o, i) => {
|
||
if (i >= cindex) {
|
||
o.top = o.top - 40;
|
||
}
|
||
});
|
||
}
|
||
this.setGroupWidth(row.parentId);
|
||
this.setGroupPer(row.parentId);
|
||
this.resetTop(parentIndex, true);
|
||
this.$set(this.list, parentIndex, parent);
|
||
}
|
||
},
|
||
//dialog beforClose
|
||
handleClose(done) {
|
||
this.currentListIndex = "";
|
||
this.isChildren = false;
|
||
this.editRow = [];
|
||
this.$refs.dialogAdd.resetFields();
|
||
this.$refs.dialogAdd.form.per = 0;
|
||
done();
|
||
},
|
||
//dialog 取消
|
||
onCancle() {
|
||
this.currentListIndex = "";
|
||
this.isChildren = false;
|
||
this.$refs.dialogAdd.form.per = 0;
|
||
this.editRow = [];
|
||
},
|
||
//编辑保存
|
||
handleEditSave(row) {
|
||
// console.log(row);
|
||
if (this.editRow.length == 1) {
|
||
let cur = this.list.find(item => {
|
||
return item.id == this.editRow[0];
|
||
});
|
||
cur = Object.assign(cur, row);
|
||
cur.planTime = row.planTime;
|
||
if (cur.type != 3) {
|
||
cur.startTime = row.stoneTime ? row.stoneTime : row.planTime[0];
|
||
cur.endTime = row.stoneTime ? row.stoneTime : row.planTime[1];
|
||
cur.left = this.computedTimeWidth(cur.startTime);
|
||
cur.widthChild = cur.widthMe = this.computedTimeWidth(
|
||
cur.startTime,
|
||
cur.endTime
|
||
);
|
||
cur.per = row.per;
|
||
}
|
||
} else if (this.editRow.length == 2) {
|
||
let parent = this.list.find(item => {
|
||
return item.id == this.editRow[0];
|
||
});
|
||
let cur = parent.children.find(item => {
|
||
return item.id == this.editRow[1];
|
||
});
|
||
cur = Object.assign(cur, row);
|
||
cur.planTime = row.planTime;
|
||
cur.startTime = row.stoneTime ? row.stoneTime : row.planTime[0];
|
||
cur.endTime = row.stoneTime ? row.stoneTime : row.planTime[1];
|
||
cur.left = this.computedTimeWidth(cur.startTime);
|
||
cur.widthChild = cur.widthMe = this.computedTimeWidth(
|
||
cur.startTime,
|
||
cur.endTime
|
||
);
|
||
this.setGroupWidth(this.editRow[0]);
|
||
}
|
||
this.editRow = [];
|
||
this.$refs.dialogAdd.form.per = 0;
|
||
},
|
||
// 根据时间计算距离
|
||
computedTimeWidth(startTime, endTime) {
|
||
let left =
|
||
(Math.floor(
|
||
startTime - new Date(`${this.currentYear - 1}/01/01`).getTime()
|
||
) /
|
||
(1000 * 60 * 60 * 24)) *
|
||
this.currentDaySize.value;
|
||
let width =
|
||
(Math.floor(endTime - startTime) / (1000 * 60 * 60 * 24)) *
|
||
this.currentDaySize.value +
|
||
this.currentDaySize.value;
|
||
if (!endTime) {
|
||
return left;
|
||
} else {
|
||
return width;
|
||
}
|
||
},
|
||
//新建保存
|
||
async handleSave(val, isChildren) {
|
||
let obj = Object.assign({}, val);
|
||
// console.log(obj);
|
||
let index = this.list.length;
|
||
// obj.per = 0;
|
||
obj.startTime = obj.planTime.length > 0 ? obj.planTime[0] : obj.stoneTime;
|
||
obj.endTime = obj.planTime.length > 0 ? obj.planTime[1] : obj.stoneTime;
|
||
|
||
if (obj.type != 3) {
|
||
obj.left = this.computedTimeWidth(obj.startTime);
|
||
obj.widthMe = obj.widthChild = this.computedTimeWidth(
|
||
obj.startTime,
|
||
obj.endTime
|
||
);
|
||
// console.log(obj.type);
|
||
if (index == 0) {
|
||
obj.top = 15;
|
||
} else {
|
||
if (
|
||
this.list[index - 1].children &&
|
||
this.list[index - 1].children.length > 0
|
||
) {
|
||
obj.top =
|
||
this.list[index - 1].children[
|
||
this.list[index - 1].children.length - 1
|
||
].top + 40;
|
||
// console.log("ggggggg");
|
||
// obj.top =
|
||
// this.list[index - 1].children.length * 40 +
|
||
// this.list[index - 1].top +
|
||
// 40;
|
||
} else {
|
||
// console.log("zzzz");
|
||
obj.top = this.list[index - 1].top + 40;
|
||
// console.log(obj.top);
|
||
}
|
||
}
|
||
}
|
||
if (obj.type == 2) {
|
||
obj.per = 100;
|
||
// this.setStoneLine();
|
||
}
|
||
if (obj.type == 3) {
|
||
obj.per = 0;
|
||
obj.id = new Date().getTime();
|
||
obj.expand = true;
|
||
if (index == 0) {
|
||
obj.top = 15;
|
||
} else {
|
||
if (
|
||
this.list[index - 1].children &&
|
||
this.list[index - 1].children.length > 0
|
||
) {
|
||
obj.top =
|
||
this.list[index - 1].children[
|
||
this.list[index - 1].children.length - 1
|
||
].top + 40;
|
||
} else {
|
||
obj.top = this.list[index - 1].top + 40;
|
||
}
|
||
}
|
||
}
|
||
obj.id = new Date().getTime();
|
||
obj.isShow = true;
|
||
// console.log(this.currentListIndex);
|
||
if (isChildren && this.currentListIndex !== "") {
|
||
let s = this.list[parseInt(this.currentListIndex)];
|
||
s.children = s.children ? s.children : [];
|
||
let cindex = s.children.length;
|
||
obj.top = 40 + cindex * 40 + s.top;
|
||
obj.parentId = s.id;
|
||
s.children.push(obj);
|
||
s.children.forEach(item => {
|
||
item.isShow = true;
|
||
});
|
||
// console.log(s);
|
||
this.setGroupWidth(s.id);
|
||
this.setGroupPer(s.id);
|
||
this.resetTop(this.currentListIndex);
|
||
this.$set(this.list, parseInt(this.currentListIndex), s);
|
||
} else {
|
||
this.list.push(obj);
|
||
}
|
||
this.currentListIndex = "";
|
||
this.isChildren = false;
|
||
this.$refs.dialogAdd.resetFields();
|
||
this.$refs.dialogAdd.form.per = 0;
|
||
this.handlerRowClick(obj);
|
||
this.handlerCheckIsExpandRow();
|
||
},
|
||
handlerCheckIsExpandRow() {
|
||
this.$nextTick(() => {
|
||
if (this.expandArr.length == 0) return;
|
||
this.expandArr.forEach(i => {
|
||
this.$refs.leftMenu.$refs.tableMenu.toggleRowExpansion(
|
||
this.list[i],
|
||
false
|
||
);
|
||
});
|
||
this.list.forEach((i, index) => {
|
||
if (index > this.expandArr[0]) {
|
||
i.top = i.top + 40;
|
||
if (i.children && i.children.length > 0 && i.expand) {
|
||
i.children.forEach(z => {
|
||
z.top = z.top + 40;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
});
|
||
},
|
||
//修改后续高度
|
||
resetTop(zindex, reduce, isexpand) {
|
||
// console.log(zindex, reduce, isexpand);
|
||
let num = reduce ? -40 : 40;
|
||
if (!reduce && !isexpand) {
|
||
// console.log(2);
|
||
this.list.forEach((item, index) => {
|
||
if (index > zindex) {
|
||
item.top = item.top + 40;
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((k, i) => {
|
||
k.top = item.top + 40 * i + 40;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
// console.log(1);
|
||
this.list.forEach((item, index) => {
|
||
if (index > zindex) {
|
||
item.top = item.top + num * this.list[zindex].children.length;
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((k, i) => {
|
||
k.top = item.top + 40 * i + 40;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
retDelTop(zindex, length) {
|
||
this.list.forEach((item, index) => {
|
||
if (index >= zindex) {
|
||
item.top = item.top - 40 * length;
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((k, i) => {
|
||
k.top = item.top + 40 * i + 40;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//根据id设置group的宽度
|
||
setGroupWidth(id, lists) {
|
||
let parent;
|
||
if (lists) {
|
||
parent = lists.find(item => {
|
||
return item.id == id;
|
||
});
|
||
} else {
|
||
parent = this.list.find(item => {
|
||
return item.id == id;
|
||
});
|
||
}
|
||
let left = Math.min.apply(
|
||
Math,
|
||
parent.children.map(o => {
|
||
return o.left;
|
||
})
|
||
);
|
||
let arr = [];
|
||
parent.children.forEach(item => {
|
||
arr.push(item.left + item.widthMe);
|
||
});
|
||
let width = Math.max.apply(Math, arr);
|
||
let widthMe = width - left;
|
||
parent.widthMe = parent.widthChild = widthMe;
|
||
parent.left = left;
|
||
// return parent;
|
||
},
|
||
//新建项目
|
||
handlerAddGantt() {
|
||
this.dialogVal = true;
|
||
this.title = "新建";
|
||
// console.log(this.list);
|
||
let arr = [];
|
||
this.list.forEach((i, index) => {
|
||
if (i.children && i.children.length > 0 && i.expand == false) {
|
||
console.log(i.children && i.children.length > 0 && i.expand == false);
|
||
arr.push(index);
|
||
}
|
||
});
|
||
this.expandArr = arr;
|
||
// console.log(arr);
|
||
this.$nextTick(() => {
|
||
this.$refs.dialogAdd.resetFields();
|
||
});
|
||
},
|
||
// 转为分组
|
||
handlerGroup(row) {
|
||
let index = this.list.findIndex(item => {
|
||
return item.id == row.id;
|
||
});
|
||
this.list[index].type = "3";
|
||
this.list[index].per = 0;
|
||
this.list[index].id = new Date().getTime();
|
||
this.list[index].left = 0;
|
||
this.list[index].widthMe = this.list[index].widthChild = 0;
|
||
this.$set(this.list, index, this.list[index]);
|
||
},
|
||
//里程碑去掉mouseenter显示
|
||
stoneLineMouseenter() {
|
||
this.isShowMsg = false;
|
||
this.currentLineDay = {
|
||
start: 0,
|
||
end: 0
|
||
};
|
||
},
|
||
//转为计划任务
|
||
handlerPlanProject(row) {
|
||
if (!row.parentId) {
|
||
let index = this.list.findIndex(item => {
|
||
return item.id == row.id;
|
||
});
|
||
this.list[index].type = "1";
|
||
this.list[index].stoneTime = "";
|
||
this.list[index].per = 0;
|
||
this.list[index].left =
|
||
row.left + row.widthMe - this.currentDaySize.value;
|
||
this.list[index].widthMe = this.currentDaySize.value;
|
||
this.list[index].widthChild = this.currentDaySize.value;
|
||
} else {
|
||
let cindex = this.list.findIndex(item => {
|
||
return item.id == row.parentId;
|
||
});
|
||
this.list[cindex].children.forEach(cl => {
|
||
if (cl.id == row.id) {
|
||
cl.type = "1";
|
||
cl.per = 0;
|
||
cl.stoneTime = "";
|
||
cl.left = row.left + row.widthMe - this.currentDaySize.value;
|
||
cl.widthMe = cl.widthChild = this.currentDaySize.value;
|
||
}
|
||
});
|
||
this.setGroupPer(row.parentId);
|
||
this.$set(this.list, cindex, this.list[cindex]);
|
||
}
|
||
},
|
||
//转化为里程碑
|
||
handlerMilestone(row) {
|
||
if (!row.parentId) {
|
||
let index = this.list.findIndex(item => {
|
||
return item.id == row.id;
|
||
});
|
||
this.list[index].per = 100;
|
||
this.list[index].type = "2";
|
||
// let endTimeWidth = row.left + row.widthMe;
|
||
this.list[index].left =
|
||
row.left + row.widthMe - this.currentDaySize.value;
|
||
this.list[index].widthMe = this.currentDaySize.value;
|
||
this.list[index].widthChild = this.currentDaySize.value;
|
||
this.setStoneLine();
|
||
} else {
|
||
let cindex = this.list.findIndex(item => {
|
||
return item.id == row.parentId;
|
||
});
|
||
let cur = this.list.find(item => {
|
||
return item.id == row.parentId;
|
||
});
|
||
let cl = cur.children.find(item => {
|
||
return item.id == row.id;
|
||
});
|
||
cl.type = "2";
|
||
cl.per = 100;
|
||
cl.left = row.left + row.widthMe - this.currentDaySize.value;
|
||
cl.widthMe = this.currentDaySize.value;
|
||
cl.widthChild = this.currentDaySize.value;
|
||
this.setGroupPer(row.parentId);
|
||
this.setGroupWidth(row.parentId);
|
||
this.$set(this.list, cindex, cur);
|
||
this.setStoneLine();
|
||
}
|
||
},
|
||
//leftMenu宽度设置
|
||
rightLineMousedown(e) {
|
||
let cx = e.clientX;
|
||
let result;
|
||
document.onmousemove = event => {
|
||
result = event.clientX - cx;
|
||
if (cx + result <= 441) return;
|
||
this.$refs.rightLine.style.left = cx + result + "px";
|
||
};
|
||
document.onmouseup = () => {
|
||
document.onmousemove = document.onmouseup = null;
|
||
if (cx + result <= 441) {
|
||
this.rightLineX = 441;
|
||
return;
|
||
}
|
||
this.rightLineX = cx + result;
|
||
};
|
||
},
|
||
//rowClick事件
|
||
handlerRowClick(row) {
|
||
// console.log(row);
|
||
this.currentRow = row;
|
||
this.$refs.chart.scrollTo({
|
||
top: 0,
|
||
left: row.left - 100,
|
||
behavior: "smooth"
|
||
});
|
||
},
|
||
//更改daySize
|
||
handleSetDaySize(item) {
|
||
// console.log(item);
|
||
this.currentDaySize = item;
|
||
this.days.forEach((item, index) => {
|
||
item.width = (index + 1) * this.currentDaySize.value;
|
||
});
|
||
this.handleScroll();
|
||
if (this.currentRow) {
|
||
let rs = this.computedList.find(o => {
|
||
return o.id == this.currentRow.id;
|
||
});
|
||
this.$nextTick(() => {
|
||
});
|
||
}
|
||
},
|
||
//滑动进度条事件
|
||
thunkMousemove() {
|
||
this.isShowMsg = false;
|
||
},
|
||
//滑动进度条事件
|
||
thunkMousedown() {
|
||
this.isShowMsg = false;
|
||
},
|
||
//滑动进度条事件
|
||
thunkMouseup(per, e, id, parentId) {
|
||
// console.log(per, id, parentId);
|
||
let cindex = this.computedList.findIndex(z => {
|
||
return z.id == id;
|
||
});
|
||
if (parentId) {
|
||
let index = this.list.findIndex(k => {
|
||
return k.id == parentId;
|
||
});
|
||
// console.log(parentId);
|
||
this.list.forEach(item => {
|
||
if (item.id == parentId) {
|
||
// console.log(item, this.list);
|
||
item.children.forEach(k => {
|
||
if (k.id == id) {
|
||
k.per = per;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
this.setGroupPer(parentId);
|
||
this.$set(this.list, index, this.list[index]);
|
||
} else {
|
||
this.list.forEach(item => {
|
||
if (item.id == id) {
|
||
item.per = per;
|
||
}
|
||
});
|
||
}
|
||
this.checkIsin(`line${id}`, e, id, parentId, cindex);
|
||
},
|
||
//设置分组百分比
|
||
setGroupPer(id, lists) {
|
||
let z;
|
||
if (lists) {
|
||
z = lists.find(o => {
|
||
return o.id == id;
|
||
});
|
||
} else {
|
||
z = this.list.find(o => {
|
||
return o.id == id;
|
||
});
|
||
}
|
||
let count = 0;
|
||
let length = z.children.length;
|
||
z.children.forEach(item => {
|
||
count = count + (item.per / 100) * (1 / length);
|
||
});
|
||
z.per = Math.round(count * 100);
|
||
},
|
||
//回到今天
|
||
handleGoToday() {
|
||
let s =
|
||
Math.round(window.innerWidth / this.currentDaySize.value / 2) *
|
||
this.currentDaySize.value -
|
||
this.rightLineX;
|
||
let width =
|
||
(Math.floor(
|
||
new Date(
|
||
`${this.currentYear}/${this.currentMonth}/${this.currentDay}`
|
||
).getTime() - new Date(`${this.currentYear - 1}/01/01`).getTime()
|
||
) /
|
||
(1000 * 60 * 60 * 24)) *
|
||
this.currentDaySize.value -
|
||
s;
|
||
window.scrollTo({
|
||
top: 0,
|
||
left: width,
|
||
behavior: "smooth"
|
||
});
|
||
},
|
||
//左侧拖拽增加
|
||
/**
|
||
* @param {String} dom ref
|
||
* @param {Object} e $event
|
||
* @param {Number} id id
|
||
* @param {Number} parentId parentId
|
||
* @param {Number} index index
|
||
*/
|
||
leftCurDragMounsedown(dom, e, id, parentId, index) {
|
||
let line = this.$refs[dom][0];
|
||
let cx = e.pageX;
|
||
let result;
|
||
let result1;
|
||
let z = 0;
|
||
let x = 0;
|
||
let addwidth;
|
||
let timers;
|
||
document.onmousemove = event => {
|
||
if (
|
||
event.clientX <= this.rightLineX + 80 &&
|
||
event.pageX >= this.rightLineX + 80
|
||
) {
|
||
if (!this.timer) {
|
||
this.timer = window.setInterval(() => {
|
||
z = window.scrollX - this.currentDaySize.value;
|
||
// window.scrollTo(z, 0);
|
||
window.scrollTo({
|
||
top: 0,
|
||
left: z,
|
||
behavior: "smooth"
|
||
});
|
||
addwidth = cx - event.pageX;
|
||
}, 50);
|
||
}
|
||
} else if (event.clientX >= window.innerWidth - 80) {
|
||
if (!timers) {
|
||
timers = window.setInterval(() => {
|
||
x = window.scrollX + this.currentDaySize.value;
|
||
// window.scrollTo(x, 0);
|
||
window.scrollTo({
|
||
top: 0,
|
||
left: x,
|
||
behavior: "smooth"
|
||
});
|
||
addwidth = -(event.pageX - cx);
|
||
}, 50);
|
||
}
|
||
} else {
|
||
window.clearInterval(this.timer);
|
||
window.clearInterval(timers);
|
||
this.timer = null;
|
||
timers = null;
|
||
if (event.pageX <= this.rightLineX) {
|
||
addwidth = -(this.rightLineX - 2 - cx);
|
||
} else {
|
||
addwidth = -(event.pageX - cx);
|
||
}
|
||
}
|
||
result = this.computedList[index].widthMe + addwidth;
|
||
result1 = this.computedList[index].left - addwidth;
|
||
if (result <= this.currentDaySize.value) {
|
||
result = this.currentDaySize.value;
|
||
result1 =
|
||
this.computedList[index].left +
|
||
this.computedList[index].widthMe -
|
||
this.currentDaySize.value;
|
||
} else if (result1 <= 0) {
|
||
result1 = 0;
|
||
// console.log(result1);
|
||
}
|
||
line.style.width = result + "px";
|
||
line.style.left = result1 + "px";
|
||
this.computedList[index].widthChild = result;
|
||
this.lineMouseover(dom, e, id, parentId, index);
|
||
this.lineMouseleave(e, true);
|
||
};
|
||
document.onmouseup = events => {
|
||
if (!result) {
|
||
document.onmousemove = document.onmouseup = null;
|
||
return;
|
||
}
|
||
window.clearInterval(this.timer);
|
||
window.clearInterval(timers);
|
||
this.timer = null;
|
||
timers = null;
|
||
result =
|
||
Math.round(result / this.currentDaySize.value) *
|
||
this.currentDaySize.value;
|
||
result1 =
|
||
Math.round(parseInt(line.style.left) / this.currentDaySize.value) *
|
||
this.currentDaySize.value;
|
||
this.computedList[index].widthMe = result;
|
||
this.computedList[index].widthChild = result;
|
||
line.style.width = result + "px";
|
||
this.computedList[index].left = result1;
|
||
line.style.left = result1 + "px";
|
||
this.checkIsin(dom, events, id, parentId, index);
|
||
// this.setComputedListGroupWidth(parentId);
|
||
if (parentId) {
|
||
this.list.forEach(item => {
|
||
if (item.id == parentId) {
|
||
item.children.forEach(k => {
|
||
if (k.id == id) {
|
||
k.widthMe = k.widthChild = result;
|
||
k.left = result1;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
this.setGroupWidth(parentId);
|
||
} else {
|
||
this.list.forEach(item => {
|
||
if (item.id == id) {
|
||
item.widthMe = item.widthChild = result;
|
||
item.left = result1;
|
||
}
|
||
});
|
||
}
|
||
document.onmousemove = document.onmouseup = null;
|
||
};
|
||
},
|
||
//右侧边缘增加
|
||
/**
|
||
* @param {String} dom ref
|
||
* @param {Object} e $event
|
||
* @param {Number} id id
|
||
* @param {Number} parentId parentId
|
||
* @param {Number} index index
|
||
*/
|
||
rightCurDragMounsedown(dom, e, id, parentId, index) {
|
||
let line = this.$refs[dom][0];
|
||
let cx = e.pageX;
|
||
let result;
|
||
let z = 0;
|
||
let x = 0;
|
||
let wx = window.scrollX;
|
||
let addwidth;
|
||
let timers;
|
||
document.onmousemove = event => {
|
||
if (event.clientX >= window.innerWidth - 80) {
|
||
if (!this.timer) {
|
||
z = 0;
|
||
wx = window.scrollX;
|
||
this.timer = window.setInterval(() => {
|
||
z = z + this.currentDaySize.value;
|
||
// window.scrollTo(z + wx, 0);
|
||
window.scrollTo({
|
||
top: 0,
|
||
left: z + wx,
|
||
behavior: "smooth"
|
||
});
|
||
addwidth = event.pageX - cx + z;
|
||
}, 50);
|
||
}
|
||
} else if (event.clientX <= this.rightLineX + 80) {
|
||
if (!timers) {
|
||
timers = window.setInterval(() => {
|
||
x = window.scrollX - this.currentDaySize.value;
|
||
// window.scrollTo(x, 0);
|
||
window.scrollTo({
|
||
top: 0,
|
||
left: x,
|
||
behavior: "smooth"
|
||
});
|
||
addwidth = event.pageX - cx;
|
||
}, 50);
|
||
}
|
||
} else {
|
||
window.clearInterval(this.timer);
|
||
window.clearInterval(timers);
|
||
this.timer = null;
|
||
timers = null;
|
||
addwidth = event.pageX - cx;
|
||
}
|
||
result = this.computedList[index].widthMe + addwidth;
|
||
if (
|
||
result + parseInt(line.style.left) >=
|
||
this.days.length * this.currentDaySize.value
|
||
) {
|
||
result =
|
||
this.days.length * this.currentDaySize.value -
|
||
parseInt(line.style.left);
|
||
}
|
||
line.style.width = result + "px";
|
||
this.computedList[index].widthChild = result;
|
||
// console.log(line.style.width);
|
||
if (result <= this.currentDaySize.value) {
|
||
result = this.currentDaySize.value;
|
||
line.style.width = result + "px";
|
||
this.computedList[index].widthMe = result;
|
||
this.computedList[index].widthChild = result;
|
||
}
|
||
this.lineMouseover(dom, e, id, parentId, index);
|
||
this.lineMouseleave(e, true);
|
||
};
|
||
document.onmouseup = events => {
|
||
if (!result) {
|
||
document.onmousemove = document.onmouseup = null;
|
||
return;
|
||
}
|
||
window.clearInterval(this.timer);
|
||
window.clearInterval(timers);
|
||
this.timer = null;
|
||
timers = null;
|
||
result =
|
||
Math.round(result / this.currentDaySize.value) *
|
||
this.currentDaySize.value;
|
||
this.computedList[index].widthMe = result;
|
||
this.computedList[index].widthChild = result;
|
||
line.style.width = result + "px";
|
||
this.checkIsin(dom, events, id, parentId, index);
|
||
if (parentId) {
|
||
this.list.forEach(item => {
|
||
if (item.id == parentId) {
|
||
item.children.forEach(k => {
|
||
if (k.id == id) {
|
||
k.widthMe = k.widthChild = result;
|
||
// k.left = result1;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
this.setGroupWidth(parentId);
|
||
} else {
|
||
this.list.forEach(item => {
|
||
if (item.id == id) {
|
||
item.widthMe = item.widthChild = result;
|
||
// item.left = result1;
|
||
}
|
||
});
|
||
}
|
||
document.onmousemove = document.onmouseup = null;
|
||
};
|
||
},
|
||
//根据距离计算时间
|
||
/**
|
||
* @param {Number} width
|
||
* @param {Boolean|String} time
|
||
*/
|
||
computedWithTime(width, time) {
|
||
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) {
|
||
return s.getTime();
|
||
} else if (time && time == "YD") {
|
||
return `${s.getFullYear()}年${s.getMonth() + 1}月`;
|
||
} else {
|
||
return `${s.getFullYear()}年${s.getMonth() + 1}月${s.getDate()}日`;
|
||
}
|
||
},
|
||
//根据index值和e判断是否在当前line的范围里，是否展示时间和msg框
|
||
/**
|
||
* @param {String} dom ref
|
||
* @param {Object} events $event
|
||
* @param {Number} id id
|
||
* @param {Number} parentId parentId
|
||
* @param {Number} index index
|
||
*/
|
||
checkIsin(dom, events, id, parentId, index) {
|
||
let line = this.$refs[dom][0];
|
||
let lineTop = parseInt(line.style.top);
|
||
let lineDown = lineTop + 16;
|
||
let lineLeft = parseInt(line.style.left);
|
||
let lineRight = parseInt(this.computedList[index].widthMe) + lineLeft;
|
||
if (
|
||
events.pageX - this.rightLineX >= lineLeft &&
|
||
events.pageX - this.rightLineX <= lineRight &&
|
||
events.y - 40 >= lineTop &&
|
||
events.y - 40 <= lineDown
|
||
) {
|
||
this.lineMouseover(dom, events, id, parentId, index);
|
||
this.lineMouseenter(dom, events, id, parentId, index);
|
||
} else {
|
||
this.isShowMsg = false;
|
||
this.currentLineDay = {
|
||
start: 0,
|
||
end: 0
|
||
};
|
||
}
|
||
},
|
||
/**
|
||
* @param {String} dom ref
|
||
* @param {Object} events $event
|
||
* @param {Number} id id
|
||
* @param {Number} parentId parentId
|
||
* @param {Number} index index
|
||
*/
|
||
//鼠标悬停展示上部日期
|
||
lineMouseover(dom, e, id, parentId, index) {
|
||
let start =
|
||
Math.round(
|
||
parseInt(this.$refs[dom][0].style.left) / this.currentDaySize.value
|
||
) *
|
||
this.currentDaySize.value +
|
||
this.currentDaySize.value;
|
||
let end =
|
||
parseInt(this.$refs[dom][0].style.left) +
|
||
parseInt(this.$refs[dom][0].style.width);
|
||
end =
|
||
Math.round(end / this.currentDaySize.value) * this.currentDaySize.value;
|
||
this.currentLineDay = {
|
||
start,
|
||
end
|
||
};
|
||
this.isHover = true;
|
||
this.handlerSelect(this.computedList[index]);
|
||
this.lineMouseenter(dom, e, id, parentId, index);
|
||
},
|
||
/**
|
||
* @param {String} dom ref
|
||
* @param {Object} events $event
|
||
* @param {Number} id id
|
||
* @param {Number} parentId parentId
|
||
* @param {Number} index index
|
||
*/
|
||
//鼠标进入显示当前项目的基本信息框
|
||
lineMouseenter(dom, e, id, parentId, index) {
|
||
let start =
|
||
Math.round(
|
||
parseInt(this.$refs[dom][0].style.left) / this.currentDaySize.value
|
||
) * this.currentDaySize.value;
|
||
let end =
|
||
parseInt(this.$refs[dom][0].style.left) +
|
||
parseInt(this.$refs[dom][0].style.width);
|
||
end =
|
||
Math.round(end / this.currentDaySize.value) *
|
||
this.currentDaySize.value -
|
||
this.currentDaySize.value;
|
||
this.currentProjectMsg = {
|
||
name: this.computedList[index].name,
|
||
allTime: (end - start) / this.currentDaySize.value + 1,
|
||
per: this.computedList[index].per,
|
||
per1: this.computedList[index].per1,
|
||
startTime: this.computedWithTime(start),
|
||
endTime: this.computedWithTime(end),
|
||
left:
|
||
e.pageX + 220 - window.scrollX >= window.innerWidth
|
||
? e.pageX - 220 - 600
|
||
: e.pageX + 50 - 600,
|
||
top: e.y + 20
|
||
};
|
||
this.isShowMsg = true;
|
||
},
|
||
//鼠标离开信息消失，时间显示消失
|
||
/**
|
||
* @param {Object} e $event
|
||
* @param {Boolean} move 是否移动状态
|
||
*/
|
||
lineMouseleave(e, move) {
|
||
if (move) {
|
||
this.isShowMsg = false;
|
||
this.currentProjectMsg = {
|
||
name: "",
|
||
allTime: 0,
|
||
per: 0,
|
||
startTime: 0,
|
||
endTime: 0,
|
||
left: 0,
|
||
top: 0
|
||
};
|
||
// this.handlerSelect();
|
||
return;
|
||
}
|
||
this.currentLineDay = {
|
||
start: 0,
|
||
end: 0
|
||
};
|
||
this.isHover = false;
|
||
this.isShowMsg = false;
|
||
this.currentProjectMsg = {
|
||
name: "",
|
||
allTime: 0,
|
||
per: 0,
|
||
startTime: 0,
|
||
endTime: 0,
|
||
left: 0,
|
||
top: 0
|
||
};
|
||
this.handlerSelect();
|
||
},
|
||
//每一行拖拽
|
||
/**
|
||
* @param {String} dom ref
|
||
* @param {Object} events $event
|
||
* @param {Number} id id
|
||
* @param {Number} parentId parentId
|
||
* @param {Number} index index
|
||
*/
|
||
lineMousedown(dom, e, id, parentId, index) {
|
||
let line = this.$refs[dom][0];
|
||
let cp = e.pageX;
|
||
let result;
|
||
let z = 0;
|
||
let left;
|
||
// console.log(cp);
|
||
document.onmousemove = event => {
|
||
if (event.clientX >= window.innerWidth - 40) {
|
||
z = window.scrollX + this.currentDaySize.value;
|
||
// window.scrollTo(z, 0);
|
||
window.scrollTo({
|
||
top: 0,
|
||
left: z,
|
||
behavior: "smooth"
|
||
});
|
||
let newWith = event.pageX - cp;
|
||
result = this.computedList[index].left + newWith;
|
||
line.style.left = result + "px";
|
||
if (result <= 0) result = 0;
|
||
} else if (event.clientX <= 40 + this.rightLineX) {
|
||
z = window.scrollX - this.currentDaySize.value;
|
||
// window.scrollTo(z, 0);
|
||
window.scrollTo({
|
||
top: 0,
|
||
left: z,
|
||
behavior: "smooth"
|
||
});
|
||
let newWith = event.pageX - cp;
|
||
result = this.computedList[index].left + newWith;
|
||
if (result <= 0) result = 0;
|
||
line.style.left = result + "px";
|
||
} else {
|
||
let newWith = event.pageX - cp;
|
||
result = this.computedList[index].left + newWith;
|
||
if (result <= 0) result = 0;
|
||
line.style.left = result + "px";
|
||
}
|
||
this.lineMouseover(dom, e, id, parentId, index);
|
||
this.lineMouseleave(e, true);
|
||
};
|
||
document.onmouseup = events => {
|
||
if (!result) {
|
||
document.onmousemove = document.onmouseup = null;
|
||
return;
|
||
}
|
||
left =
|
||
Math.round(result / this.currentDaySize.value) *
|
||
this.currentDaySize.value;
|
||
this.computedList[index].left = left;
|
||
line.style.left = left + "px";
|
||
this.checkIsin(dom, events, id, parentId, index);
|
||
if (parentId) {
|
||
this.list.forEach(item => {
|
||
if (item.id == parentId) {
|
||
item.children.forEach(k => {
|
||
if (k.id == id) {
|
||
k.left = left;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
this.setGroupWidth(parentId);
|
||
} else {
|
||
this.list.forEach(item => {
|
||
if (item.id == id) {
|
||
item.left = left;
|
||
}
|
||
});
|
||
}
|
||
document.onmousemove = document.onmouseup = null;
|
||
};
|
||
},
|
||
//获取近三年的所有天数
|
||
getDay() {
|
||
this.getAllDate();
|
||
},
|
||
//判断是否为闰年
|
||
/**
|
||
* @param {Number} year 传入年份
|
||
*/
|
||
isLeapYear(year) {
|
||
if (year % 4 > 0) {
|
||
return true;
|
||
}
|
||
return false;
|
||
},
|
||
getAllDate() {
|
||
let obj = {};
|
||
let arr = [this.currentYear - 1, this.currentYear, this.currentYear + 1];
|
||
arr.forEach(item => {
|
||
obj.year = item;
|
||
obj.days = this.isLeapYear(item) ? 365 : 366;
|
||
this.allDays.push(obj);
|
||
obj = {};
|
||
});
|
||
this.checkDate();
|
||
},
|
||
//根据年份天数创建月份及月份天数数组
|
||
checkDate() {
|
||
this.allDays.forEach(item => {
|
||
item.month = this.handleMonthDay(item.days, item.year);
|
||
});
|
||
// console.log(this.allDays);
|
||
this.allDays.forEach(element => {
|
||
if (element.year == this.currentYear) {
|
||
element.month[0][this.currentMonth].forEach(k => {
|
||
if (k.date == this.currentDay) {
|
||
k.today = true;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
let arr = [];
|
||
this.allDays.forEach(item => {
|
||
arr = arr.concat(item.month);
|
||
});
|
||
arr.forEach(item => {
|
||
for (var j in item) {
|
||
this.days = this.days.concat(item[j]);
|
||
}
|
||
});
|
||
this.days.forEach((item, index) => {
|
||
item.width = (index + 1) * this.currentDaySize.value;
|
||
});
|
||
},
|
||
/**
|
||
* @param {Number} days
|
||
* @param {Number} year
|
||
*/
|
||
handleMonthDay(days, year) {
|
||
let arr = [];
|
||
let obj = {};
|
||
this.monthArr.forEach(item => {
|
||
obj[item] = this.checkMonthDays(item, days);
|
||
});
|
||
arr.push(obj);
|
||
let s = arr[0];
|
||
for (let item in s) {
|
||
s[item] = this.addNum(s[item], item, year);
|
||
}
|
||
// console.log(arr);
|
||
return arr;
|
||
},
|
||
/**
|
||
* @param {number} num 天数
|
||
* @param {number} month 月份
|
||
* @param {number} year 年份
|
||
*/
|
||
addNum(num, month, year) {
|
||
let arr = [];
|
||
let obj = {};
|
||
for (let i = 1; i <= num; i++) {
|
||
obj.date = i;
|
||
obj.weekday = new Date(`${year}/ ${month} / ${i}`).getDay();
|
||
arr.push(obj);
|
||
obj = {};
|
||
}
|
||
return arr;
|
||
},
|
||
//根据月份返回天数
|
||
/**
|
||
* @param {Number} month 月份
|
||
* @param {Number} days 天数
|
||
*/
|
||
checkMonthDays(month, days) {
|
||
let day;
|
||
switch (month) {
|
||
case 1:
|
||
case 3:
|
||
case 5:
|
||
case 7:
|
||
case 8:
|
||
case 10:
|
||
case 12:
|
||
return 31;
|
||
// eslint-disable-next-line no-unreachable
|
||
break;
|
||
case 4:
|
||
case 6:
|
||
case 9:
|
||
case 11:
|
||
return 30;
|
||
// eslint-disable-next-line no-unreachable
|
||
break;
|
||
case 2:
|
||
day = days == 365 ? 28 : 29;
|
||
return day;
|
||
// eslint-disable-next-line no-unreachable
|
||
break;
|
||
}
|
||
},
|
||
setList() {},
|
||
//设置里程碑线的高度
|
||
setStoneLine(isFirst) {
|
||
this.$nextTick(() => {
|
||
// let arr = Array.from(document.getElementsByClassName("stoneLine"));
|
||
let height = window.getComputedStyle(
|
||
document.getElementsByClassName("lineBG")[0]
|
||
).height;
|
||
// console.log(height);
|
||
this.lineBGHeight = height;
|
||
// height = isFirst ? parseFloat(height) : parseFloat(height) - 16.8;
|
||
// arr.forEach(e => {
|
||
// // e.style.height = height + "px";
|
||
// console.log(e.getBoundingClientRect());
|
||
// });
|
||
// console.log(arr[arr.length - 1].getBoundingClientRect());
|
||
// arr[arr.length - 1].height = "1095px";
|
||
});
|
||
},
|
||
//顶部固定时间
|
||
handleScroll() {
|
||
let w = window.scrollX;
|
||
if (w <= 62) {
|
||
this.showFixdTopMonth = false;
|
||
} else {
|
||
this.showFixdTopMonth = true;
|
||
}
|
||
let time = this.computedWithTime(w, "YD");
|
||
this.fixdTopMonth = time;
|
||
}
|
||
},
|
||
watch: {
|
||
currentDaySize(newValue, oldValue) {
|
||
this.list.forEach(item => {
|
||
item.left = (item.left / oldValue.value) * newValue.value;
|
||
item.widthMe = item.widthChild =
|
||
(item.widthMe / oldValue.value) * newValue.value;
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach(k => {
|
||
k.left = (k.left / oldValue.value) * newValue.value;
|
||
k.widthMe = k.widthChild =
|
||
(k.widthMe / oldValue.value) * newValue.value;
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
mounted() {
|
||
document.addEventListener("scroll", this.handleScroll);
|
||
this.getDay();
|
||
this.setList();
|
||
this.setStoneLine();
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener("scroll", this.handleScroll);
|
||
document.onmousemove = document.onmouseup = null;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.chart {
|
||
height: 90vh;
|
||
user-select: none;
|
||
position: relative;
|
||
overflow: hidden;
|
||
overflow-x: scroll;
|
||
background: #ffffff;
|
||
.header {
|
||
height: 40px;
|
||
position: relative;
|
||
.header-left {
|
||
margin-left: 10px;
|
||
box-sizing: border-box;
|
||
padding-top: 5px;
|
||
height: 40px;
|
||
position: fixed;
|
||
top: 0px;
|
||
left: 0px;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
.left {
|
||
position: fixed;
|
||
/*height: calc(100% - 40px);*/
|
||
height: 89vh;
|
||
background-color: #fff;
|
||
z-index: 999;
|
||
// border-right: 1px solid #d7d7d7;
|
||
.rightLine {
|
||
z-index: 999;
|
||
position: absolute;
|
||
top: 0px;
|
||
height: 100%;
|
||
width: 2px;
|
||
background-color: #d7d7d7;
|
||
box-shadow: 4px 2px 12px 0px rgba(0, 0, 0, 0.2);
|
||
cursor: col-resize;
|
||
&:hover {
|
||
background-color: #409eff;
|
||
}
|
||
}
|
||
}
|
||
.showCurrentLineDate {
|
||
position: fixed;
|
||
top: 0px;
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
height: 20px;
|
||
font-size: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.projectMsg {
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
position: absolute;
|
||
width: 220px;
|
||
height: 230px;
|
||
background-color: #fff;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
border-radius: 4px;
|
||
border: 1px solid #ebeef5;
|
||
|
||
.lineMsg {
|
||
margin-bottom: 10px;
|
||
.projectName {
|
||
font-size: 22px;
|
||
}
|
||
span {
|
||
font-size: 14px;
|
||
color: #909090;
|
||
}
|
||
.title {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
.date {
|
||
display: flex;
|
||
height: 100%;
|
||
position: relative;
|
||
/*overflow: scroll;*/
|
||
.topMonth {
|
||
// width: 100px;
|
||
background-color: #fff;
|
||
position: fixed;
|
||
top: 40px;
|
||
height: 21px;
|
||
line-height: 21px;
|
||
font-size: 12px !important;
|
||
font-weight: 600 !important;
|
||
color: #909090 !important;
|
||
}
|
||
.toolTip {
|
||
position: fixed;
|
||
right: 0px;
|
||
top: 90px;
|
||
z-index: 999;
|
||
|
||
.base {
|
||
display: inline-block;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
padding: 0 15px;
|
||
background-color: #fff;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||
font-weight: 400;
|
||
color: #303030;
|
||
border-radius: 3px;
|
||
box-shadow: 0 3px 12px 0 rgba(48, 48, 48, 0.05),
|
||
0 3px 6px 0 rgba(48, 48, 48, 0.1);
|
||
margin-right: 20px;
|
||
&:hover {
|
||
color: #409eff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.group {
|
||
position: absolute;
|
||
background-color: #909090 !important;
|
||
border: none !important;
|
||
border-radius: 0 !important;
|
||
height: 14px !important;
|
||
line-height: 14px !important;
|
||
// margin-top: 5px;
|
||
clip-path: polygon(
|
||
100% 0,
|
||
100% 100%,
|
||
calc(100% - 8px) 60%,
|
||
8px 60%,
|
||
0 100%,
|
||
0 0
|
||
);
|
||
// > div {
|
||
// -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||
// }
|
||
.progress {
|
||
// width: 50px;
|
||
background-color: #606060 !important;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.line {
|
||
position: absolute;
|
||
.rightCurDrag {
|
||
cursor: e-resize;
|
||
width: 10px;
|
||
background-color: #000;
|
||
height: 16px;
|
||
position: absolute;
|
||
right: -15px;
|
||
transform: translateY(-50%);
|
||
top: 50%;
|
||
border-radius: 3px;
|
||
user-select: none;
|
||
}
|
||
.leftCurDrag {
|
||
cursor: e-resize;
|
||
width: 10px;
|
||
background-color: #000;
|
||
height: 16px !important;
|
||
position: absolute;
|
||
left: -15px;
|
||
transform: translateY(-50%);
|
||
top: 50%;
|
||
border-radius: 3px;
|
||
user-select: none;
|
||
}
|
||
.stoneLine {
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 50%;
|
||
margin-left: -1px;
|
||
width: 2px;
|
||
background-color: #24b47e;
|
||
}
|
||
.milestone {
|
||
position: absolute;
|
||
left: 50%;
|
||
// transform: translateX(-50%);
|
||
cursor: move;
|
||
margin-left: -10px;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-color: #24b47e;
|
||
transform: rotate(-45deg);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
i {
|
||
transform: rotate(45deg);
|
||
color: #fff;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
}
|
||
.years {
|
||
display: flex;
|
||
height: 100%;
|
||
.month {
|
||
height: 100%;
|
||
.month-top {
|
||
height: 21px;
|
||
line-height: 21px;
|
||
font-size: 12px !important;
|
||
font-weight: 600 !important;
|
||
color: #909090 !important;
|
||
}
|
||
}
|
||
}
|
||
.allDaysArray {
|
||
position: absolute;
|
||
left: 0px;
|
||
top: 21px;
|
||
height: calc(100% - 21px);
|
||
.alldays {
|
||
display: flex;
|
||
}
|
||
.lineBG {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
overflow: scroll;
|
||
}
|
||
.weekday {
|
||
color: #c7c7c7;
|
||
}
|
||
.weekday1 {
|
||
border-left: 1px solid #d7d7d7;
|
||
background-image: linear-gradient(to bottom, #f8f8f8, #f8f8f8);
|
||
}
|
||
.weekday2 {
|
||
border-right: 1px solid #d7d7d7;
|
||
background-image: linear-gradient(to bottom, #f8f8f8, #f8f8f8);
|
||
width: 100%;
|
||
}
|
||
.day {
|
||
// width: 40px;
|
||
position: relative;
|
||
display: inline-block;
|
||
height: calc(100% - 21px);
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
.isHover {
|
||
background-color: #409eff;
|
||
color: #fff;
|
||
}
|
||
.nodBorder {
|
||
div {
|
||
border-left: none !important;
|
||
}
|
||
}
|
||
.dateNum {
|
||
font-size: 12px;
|
||
line-height: 20px;
|
||
display: block;
|
||
height: 20px;
|
||
// border-left: 1px solid #d7d7d7;
|
||
border-bottom: 1px solid #d7d7d7;
|
||
box-sizing: border-box;
|
||
}
|
||
.todayDateNum {
|
||
background-color: #f0a100;
|
||
color: #fff;
|
||
}
|
||
.dateBG {
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 0px;
|
||
display: block;
|
||
// height: 100%;
|
||
}
|
||
.today {
|
||
position: relative;
|
||
}
|
||
.today::after {
|
||
content: "";
|
||
height: 100%;
|
||
width: 2px;
|
||
background-color: #f0a100;
|
||
position: absolute;
|
||
// left: 20px;
|
||
top: 0px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|