<template>
<div class="calendar-view">
<div class="calendar-act-btns">
<div class="usual-btns">
<activity
v-for="(activity,index) in view.activities"
:key="index"
:info="activity"
@action="onActionChild"
/>
</div>
<div class="drop-down-box">
<el-select
v-model="currentTimeType"
@change="onChange"
>
<el-option
v-for="(item,index) in options"
:key="index"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="gantt-wrap">
<el-scrollbar class="scrollbar">
<div class="gantt-box">
<table v-if="currentTimeType === 'month'" style="width:0;" class="gantt-tab table table-bordered table-hover listDataTable obpm-datatable" id="dataTable" >
<thead>
<tr class="listDataTh obpm-listdatath">
<th style="width: 40px">
<input name="ganttSelected" type="checkbox" @change="changeAllChecked()" class="ganttSelected" :checked="isSelectedAll"/>
</th>
<th style="width:130px;" class="listDataThTd nowrap obpm-listdatath obpm-ganttData">
{{missionName}}
</th>
<th v-for="(item, index) in monthBetweenHeadNum" :key="index" style="width:130px;" class="listDataThTd nowrap obpm-listdatath obpm-ganttData">
{{item}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(tr, inx) in documents" :key="inx" :id="'mycanvas' + inx" class="listDataTr obpm-listdatatr treeHead">
<td style="width: 40px"><input type="checkbox" name="checkbox" :data-id="tr.id" :checked="checked"/></td>
<td v-for="(column, index) in viewColumnsName.columns" :key="index" style="width:130px;" @click="handleClick(tr)">
<span v-if="column.mappingField == 'name'">
{{tr.items[column.id].value}}
</span>
</td>
<td
v-for="item in monthBetweenNum"
:key="item"
style="width:130px; padding:11px 0"
@mouseover="mouseOver(inx, item)"
@mouseleave="mouseLeave"
>
<!-- v-if="currentTd === String(inx) + String(item)" -->
<div class="detail-data" v-if="currentTd === String(inx) + String(item)">
<div v-for="(column, i) in view.columns" :key="i">
<span v-if="column.mappingField == 'name'" class="title">
{{tr.items[column.id].value}}
</span>
<!-- <span class="content-box" v-else-if="column.mappingField == 'start' || column.mappingField == 'end'">
<span v-if="column.mappingField == 'start'" class="start">
{{$t('jobtime')}}锛歿{tr.items[column.id].value}}
</span>
<span v-if="column.mappingField == 'end'" class="end">
-{{tr.items[column.id].value}}
</span>
</span> -->
<span class="complete" v-if="column.mappingField == 'start'">
{{$t('view.start_time')}}锛歿{tr.items[column.id].value}}
</span>
<span class="complete" v-if="column.mappingField == 'end'">
{{$t('view.end_time')}}锛歿{tr.items[column.id].value}}
</span>
<span v-else-if="column.mappingField == 'complete'" class="complete">
{{$t('completion')}}锛歿{tr.items[column.id].value | dataEscape}}
</span>
<span class="complete-second" v-else-if="(column.mappingField == 'color' || column.mappingField == 'description' || column.mappingField == 'parent' || column.mappingField == 'dependency' || column.mappingField =='caption') && tr.items[column.id].value">
{{column.name}}锛歿{tr.items[column.id].value}}
</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table v-if="currentTimeType === 'year'" class="gantt-tab table table-bordered table-hover listDataTable obpm-datatable" id="dataTable2">
<thead>
<tr class="listDataTh obpm-listdatath">
<th style="width: 40px"><input name="ganttSelected" type="checkbox" @change="changeAllChecked()" class="ganttSelected" :checked="isSelectedAll"/></th>
<th style="width:130px;" class="listDataThTd nowrap obpm-listdatath obpm-ganttData">
{{missionName}}
</th>
<th v-for="(item, index) in yearBetweenHeadNum" :key="index" style="width:130px;" class="listDataThTd nowrap obpm-listdatath obpm-ganttData">
{{item}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(tr, inx) in documents" :key="inx" :id="'myYearCanvas' + inx" class="listDataTr obpm-listdatatr treeHead">
<td style="width: 40px"><input type="checkbox" name="checkbox" :data-id="tr.id" :checked="checked"/></td>
<td v-for="(column, index) in viewColumnsName.columns" :key="index" style="width:130px;" @click="handleClick(tr)">
<span v-if="column.mappingField == 'name'">
{{tr.items[column.id].value}}
</span>
</td>
<td
v-for="item in yearBetweenNum"
:key="item"
style="width:130px; padding:11px 0"
@mouseover="mouseOver(inx, item)"
@mouseleave="mouseLeave"
>
<!-- v-if="currentTd === String(inx) + String(item)" -->
<div class="detail-data" v-if="currentTd === String(inx) + String(item)">
<div v-for="(column, i) in view.columns" :key="i" >
<span v-if="column.mappingField == 'name'" class="title">
{{tr.items[column.id].value}}
</span>
<!-- <span class="content-box" v-else-if="column.mappingField == 'start' || column.mappingField == 'end'">
<span v-if="column.mappingField == 'start'" class="start">
{{$t('jobtime')}}锛歿{tr.items[column.id].value}}
</span>
<span v-else-if="column.mappingField == 'end'" class="end">
-{{tr.items[column.id].value}}
</span>
</span> -->
<span class="complete" v-if="column.mappingField == 'start'">
{{$t('view.start_time')}}锛歿{tr.items[column.id].value}}
</span>
<span class="complete" v-if="column.mappingField == 'end'">
{{$t('view.end_time')}}锛歿{tr.items[column.id].value}}
</span>
<span v-else-if="column.mappingField == 'complete'" class="complete">
{{$t('completion')}}锛歿{tr.items[column.id].value | dataEscape}}
</span>
<span class="complete-second" v-else-if="(column.mappingField == 'color' || column.mappingField == 'description' || column.mappingField == 'parent' || column.mappingField == 'dependency' || column.mappingField =='caption') && tr.items[column.id].value">
{{column.name}}锛歿{tr.items[column.id].value}}
</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table v-if="currentTimeType === 'day'" style="width:0;" class="gantt-tab gantt-tab table table-bordered table-hover listDataTable obpm-datatable" id="dataTable2">
<thead>
<tr class="listDataTh obpm-listdatath">
<th style="width: 40px"><input name="ganttSelected" type="checkbox" @change="changeAllChecked()" class="ganttSelected" :checked="isSelectedAll"/></th>
<th style="width:130px;" class="listDataThTd nowrap obpm-listdatath obpm-ganttData">
{{missionName}}
</th>
<th v-for="(item, index) in dayBetweenHeadNum" :key="index" style="min-width:130px;" class="listDataThTd nowrap obpm-listdatath obpm-ganttData">
{{item}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(tr, inx) in documents" :key="inx" :id="'myDayCanvas' + inx" class="listDataTr obpm-listdatatr treeHead">
<td style="width: 40px"><input type="checkbox" name="checkbox" :data-id="tr.id" :checked="checked"/></td>
<td v-for="(column, index) in viewColumnsName.columns" :key="index" style="width:130px;" @click="handleClick(tr)">
<span v-if="column.mappingField == 'name'">
{{tr.items[column.id].value}}
</span>
</td>
<td
v-for="item in dayBetweenNum"
:key="item"
style="width:130px; padding:11px 0;position: relative;"
@mouseover="mouseOver(inx, item)"
@mouseleave="mouseLeave"
>
<div class="detail-data" v-if="currentTd == String(inx) + String(item)">
<div v-for="(column, i) in view.columns" :key="i" >
<span v-if="column.mappingField == 'name'" class="title">
{{tr.items[column.id].value}}
</span>
<!-- <span class="content-box" v-if="column.mappingField == 'start' || column.mappingField == 'end'">
<span v-if="column.mappingField == 'start'" class="start">
{{$t('jobtime')}}锛歿{tr.items[column.id].value}}
</span>
<span v-if="column.mappingField == 'end'" class="end">
-{{tr.items[column.id].value}}
</span>
</span> -->
<span class="complete" v-if="column.mappingField == 'start'">
{{$t('view.start_time')}}锛歿{tr.items[column.id].value}}
</span>
<span class="complete" v-if="column.mappingField == 'end'">
{{$t('view.end_time')}}锛歿{tr.items[column.id].value}}
</span>
<span v-if="column.mappingField == 'complete'" class="complete">
{{$t('completion')}}锛歿{tr.items[column.id].value | dataEscape}}
</span>
<span class="complete-second" v-else-if="(column.mappingField == 'color' || column.mappingField == 'description' || column.mappingField == 'parent' || column.mappingField == 'dependency' || column.mappingField =='caption') && tr.items[column.id].value">
{{column.name}}锛歿{tr.items[column.id].value}}
</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</el-scrollbar>
</div>
</div>
</template>
<script>
import activity from "@/components/activity.vue";
export default {
name: "view-gantt",
props: [
"view",
"openParams",
"showtype",
],
components: {
activity,
},
watch: {
},
computed: {
},
created(){
let columns = this.view.columns;
for(let i=0; i<columns.length; i++) {
if(columns[i].mappingField == "name") {
this.missionName = columns[i].fieldName;
break
}
}
},
mounted() {
this.getData();
},
data: function() {
return {
currentTd:'',
tableData:[],
documents:'',
monthBetweenHeadNum: [],
monthBetweenNum: [],
viewColumnsName: [],
currentTimeType: 'month',
yearBetweenHeadNum: [],
yearBetweenNum: [],
dayBetweenHeadNum: [],
dayBetweenNum: [],
options: [{
value: 'month',
label: this.$t('view.month')
}, {
value: 'year',
label: this.$t('view.year')
}, {
value: 'day',
label: this.$t('view.day')
}],
loadYearCanvas: true, // 鏄惁閲嶅鍔犺浇骞寸殑canvas
loadDayCanvas: true, // 鏄惁閲嶅鍔犺浇澶╃殑canvas
checked: false, //鍒濆鍖栦笉閫変腑
missionName:'',
isSelectedAll: false,
};
},
methods: {
/**
* 鐐瑰嚮浠诲姟鍚嶇О涓嬬殑td
*/
handleClick(row){
let openParams = this.openParams;
let view = this.view;
let params = {
linkType: "00",
name: view.name,
appId: openParams.appId,
actionContent: row.formId,
_select: row.id,
viewId: view.id,
parentId: openParams.parentId ? openParams.parentId:'', //鍖呭惈鍏冪礌鏃跺垽鏂槸鍚︽湁parentId
isRelate: openParams.isRelate ? openParams.isRelate:'', //鍖呭惈鍏冪礌鏃跺垽鏂璱sRelate鏄惁涓簍rue
templateForm: view.templateForm ? view.templateForm:'',
refreshId: openParams.id, //鍒ゆ柇鏄惁寰楀埛鏂�
};
this.$emit("add-tab", params)
},
mouseOver(inx, item) {
this.currentTd = String(inx) + String(item);
},
// 绉诲嚭
mouseLeave() {
this.currentTd = '';
},
getData(page, size, searchData, selectType) {
this.getViewData(page, size,searchData).then(response => {
let docs = response.data.data;
this.documents = response.data.data;
this.row_count = response.data.row_count;
let viewColumns = JSON.parse(JSON.stringify(this.view));
for(let i=0; i<viewColumns.columns.length; i++) {
if(viewColumns.columns[i].mappingField === 'name' || viewColumns.columns[i].mappingField === 'start' || viewColumns.columns[i].mappingField === 'end' || viewColumns.columns[i].mappingField === 'color') {
continue;
}else {
viewColumns.columns.splice(i, 1);
i--;
}
}
let viewColumnsName = JSON.parse(JSON.stringify(viewColumns));
for(let i=0; i<viewColumnsName.columns.length; i++) {
if(viewColumnsName.columns[i].mappingField === 'name') {
continue;
}else {
viewColumnsName.columns.splice(i, 1);
i--;
}
}
this.viewColumnsName = viewColumnsName;
let missionName = '';
let startTime = [];
let endTime = [];
if (docs) {
docs.forEach((doc, index) => {
for (let key in doc.items) {
viewColumns.columns.forEach(column => {
if(column.mappingField === 'name' && key === column.id) {
missionName = column.name;
}else if(column.mappingField === 'start' && key === column.id) {
if(doc.items[key].value){
startTime.push(doc.items[key].value);
}
}else if(column.mappingField === 'end' && key === column.id) {
if(doc.items[key].value){
endTime.push(doc.items[key].value);
}
}
})
}
});
}
let maxTime = endTime[0];
for(let i=1; i<endTime.length; i++){
if(maxTime < endTime[i]){
maxTime = endTime[i];
}
}
let minTime = startTime[0];
for(let i=1; i<startTime.length; i++){
if(minTime > startTime[i]){
minTime = startTime[i];
}
}
console.log("maxTime-->",maxTime,minTime)
let monthBetweenNum = this.getMonthBetween(minTime, maxTime);
this.monthBetweenHeadNum = JSON.parse(JSON.stringify(monthBetweenNum));
// this.monthBetweenHeadNum.unshift(missionName);
this.monthBetweenNum = monthBetweenNum;
this.$nextTick(() => {
this.getCanvas();
if(selectType) {
this.loadDayCanvas = true;
this.loadYearCanvas = true;
this.onChange(selectType)
}
})
});
},
//鑾峰彇涓や釜鏃ユ湡鐨勭浉闅旂殑鏈堜唤
getMonthBetween(start, end, isNum){
var result = [];
var starts = start.split('-');
var ends = end.split('-');
var staYear = starts[0]*1;
var staMon = starts[1]*1 < 10? starts[1]:starts[1];
var endYear = ends[0]*1;
var endMon = ends[1]*1 < 10? ends[1]:ends[1];;
result.push(staYear+'-'+staMon);
while (staYear <= endYear) {
if (staYear === endYear) {
while (staMon < endMon) {
staMon++;
if(staMon < 10){
result.push(staYear+'-0'+staMon);
}else{
result.push(staYear+'-'+staMon);
}
}
staYear++;
} else {
staMon++;
if (staMon > 12) {
staMon = 1;
staYear++;
}
if(staMon < 10){
result.push(staYear+'-0'+staMon);
}else{
result.push(staYear+'-'+staMon);
}
}
}
if(isNum) {
return result.length - 1;
}else {
return result;
}
},
//妯℃嫙鏁版嵁璇锋眰
getViewData(page, size, searchData) {
let startDate = "";
let endDate = "";
let treeData = "";
let treeName = "";
return new Promise(resolve => {
this.$api.getViewData(
//鏅€氳鍥炬帴鍙�
this.openParams.appId,
this.view.id,
{
parentId: this.parentId ? this.parentId : "",
currpage: 1,
lines: 1000,
searchWord:'',
},
{},
{
onSucess: response => {
let viewData = response.data;
resolve(viewData);
}
}
);
});
},
onChange(ev) {
//鍒囨崲鐢樼壒鏃ユ湡鏃讹紝灏嗗叏閫夊彇娑�
this.checked = false;
const obj = document.getElementsByName("ganttSelected")
obj.forEach(item => {
item.checked = false;
})
if(ev === 'year' && this.loadYearCanvas) {
this.loadYearCanvas = false
let docs = this.documents ;
let viewColumns = this.view;
let missionName = '';
let startTime = [];
let endTime = [];
if (docs) {
docs.forEach((doc, index) => {
for (let key in doc.items) {
viewColumns.columns.forEach(column => {
if(column.mappingField === 'name' && key === column.id) {
missionName = column.name;
}else if(column.mappingField === 'start' && key === column.id) {
if(doc.items[key].value) {
startTime.push(doc.items[key].value);
}
}else if(column.mappingField === 'end' && key === column.id) {
if(doc.items[key].value) {
endTime.push(doc.items[key].value);
}
}
})
}
});
}
let maxTime = endTime[0];
for(let i=1; i<endTime.length; i++){
if(maxTime < endTime[i]){
maxTime = endTime[i];
}
}
let minTime = startTime[0];
for(let i=1; i<startTime.length; i++){
if(minTime > startTime[i]){
minTime = startTime[i];
}
}
let differenceYear = parseInt(maxTime.split('-')[0]) - parseInt(minTime.split('-')[0]);
let arr = [];
let startYear = parseInt(minTime.split('-')[0]);
let endYear = parseInt(maxTime.split('-')[0]);
let num = 0;
if(differenceYear > 1) {
while(differenceYear > 1) {
num = num + 1;
let newY = startYear + num;
arr.push(newY);
differenceYear--;
}
arr.unshift(startYear);
arr.push(endYear);
this.yearBetweenNum = arr;
let yearBetweenHeadNum = [];
yearBetweenHeadNum = JSON.parse(JSON.stringify(arr));
// yearBetweenHeadNum.unshift(missionName);
this.yearBetweenHeadNum = yearBetweenHeadNum;
this.$nextTick(() => {
this.getYearCanvas();
})
}else if(differenceYear == 1) {
arr.unshift(startYear);
arr.push(endYear);
this.yearBetweenNum = arr;
let yearBetweenHeadNum = [];
yearBetweenHeadNum = JSON.parse(JSON.stringify(arr));
// yearBetweenHeadNum.unshift(missionName);
this.yearBetweenHeadNum = yearBetweenHeadNum;
this.$nextTick(() => {
this.getYearCanvas();
})
}else if(differenceYear === 0) {
arr.unshift(startYear);
this.yearBetweenNum = arr;
let yearBetweenHeadNum = [];
yearBetweenHeadNum = JSON.parse(JSON.stringify(arr));
// yearBetweenHeadNum.unshift(missionName);
this.yearBetweenHeadNum = yearBetweenHeadNum;
this.$nextTick(() => {
this.getYearCanvas();
})
}
}else if(ev === 'day' && this.loadDayCanvas) {
this.loadDayCanvas = false
let docs = this.documents ;
let viewColumns = this.view;
let missionName = '';
let startTime = [];
let endTime = [];
if (docs) {
docs.forEach((doc) => {
for (let key in doc.items) {
viewColumns.columns.forEach(column => {
if(column.mappingField === 'name' && key === column.id) {
missionName = column.name;
}else if(column.mappingField === 'start' && key === column.id) {
if(doc.items[key].value) {
startTime.push(doc.items[key].value);
}
}else if(column.mappingField === 'end' && key === column.id) {
if(doc.items[key].value) {
endTime.push(doc.items[key].value);
}
}
})
}
});
}
let maxTime = endTime[0];
for(let i=1; i<endTime.length; i++){
if(maxTime < endTime[i]){
maxTime = endTime[i];
}
}
let minTime = startTime[0];
for(let i=1; i<startTime.length; i++){
if(minTime > startTime[i]){
minTime = startTime[i];
}
}
let dayBetweenNum = this.getDateBetween(minTime, maxTime);
this.dayBetweenNum = dayBetweenNum;
let dayBetweenHeadNum = [];
dayBetweenHeadNum = JSON.parse(JSON.stringify(dayBetweenNum));
// dayBetweenHeadNum.unshift(missionName);
this.dayBetweenHeadNum = dayBetweenHeadNum;
this.$nextTick(() => {
this.getdayCanvas()
})
}else {
this.getData();
}
// this.loadYearCanvas = true
// this.loadDayCanvas = true
// 鍙栨秷鎵€鏈夐€変腑鐨刢heckbox
let allCheckBox = document.getElementsByName('checkbox')
for (var i = 0; i < allCheckBox.length; i++) {
allCheckBox[i].checked = false;
}
},
//鍏ㄩ€�
changeAllChecked(val){
let isChecked = this.checked;
if(isChecked){
this.checked = false;
}else{
this.checked = true;
}
},
reloadListView(){
let type = this.currentTimeType;
let c = document.getElementsByTagName("canvas");
for(let i = 0; i<c.length; i++) {
c[i].remove();
i--;
}
this.getData('', '', '', this.currentTimeType);
},
//骞碿anvas
getYearCanvas(){
let startTime = this.yearBetweenNum[0];
for(let i=0; i<this.documents.length; i++) {
let viewColumns = this.view;
let doc = this.documents[i];
let yearBetween = [];
let missionName = '';
let ganttColor = '';
for (let key in doc.items) {
viewColumns.columns.forEach(column => {
if(column.mappingField === 'name' && key === column.id) {
missionName = doc.items[key].value;
}else if(column.mappingField === 'start' && key === column.id) {
yearBetween.unshift(doc.items[key].value);
}else if(column.mappingField === 'end' && key === column.id) {
yearBetween.push(doc.items[key].value);
}else if(column.mappingField === "color" && key === column.id) {
if(doc.items[key].value) {
ganttColor = doc.items[key].value;
}else {
// ganttColor = '#C5E0B3';
ganttColor = '#B4C6E7';
}
}
})
}
if(!yearBetween[0] || !yearBetween[1]) {
continue
}
let sY = parseInt(yearBetween[0].split("-")[0]);
let eY = parseInt(yearBetween[1].split("-")[0]);
let startYM = yearBetween[0].split('-');
let sDay = new Date(startYM[0],startYM[1],0);
let startDays = sDay.getDate(); //缁撴潫鏈堢殑澶╂暟
let sD = startDays - parseInt(yearBetween[0].split("-")[2]);
let endYM = yearBetween[1].split('-');
let eDay = new Date(endYM[0],endYM[1],0);
let endDays = eDay.getDate(); //缁撴潫鏈堢殑澶╂暟
let eD = endDays - parseInt(yearBetween[1].split("-")[2]);
聽
let sYDays = '', //寮€濮嬪勾浠芥€诲ぉ鏁�
eYDays = ''; //缁撴潫骞翠唤鎬诲ぉ鏁�
if(sY % 100 != 0 && sY % 4 == 0 || sY % 400 == 0){ //鍒ゆ柇寮€濮嬪勾浠芥槸鍚︽槸闂板勾
sYDays = 366;
}else{
sYDays = 365;
}
if(eY % 100 != 0 && eY % 4 == 0 || eY % 400 == 0){ //鍒ゆ柇缁撴潫骞翠唤鏄惁鏄棸骞�
eYDays = 366;
}else{
eYDays = 355;
}
let sYM = parseInt(yearBetween[0].split("-")[1]), //寮€濮嬪勾浠藉勾鏈堟湀浠�
eYM = parseInt(yearBetween[1].split("-")[1]); //缁撴潫骞翠唤骞存湀鏈堜唤
let SDaysArrive = this.getDayNumByYearMonth(sY, sYM); //寮€濮嬪勾浠藉埌杈剧殑骞存湀鏃ユ€绘暟
let EDaysArrive = this.getDayNumByYearMonth(eY, eYM); //缁撴潫骞翠唤鍒拌揪鐨勫勾鏈堟棩鎬绘暟
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
// 璁剧疆绾挎潯鐨勯鑹�
let YBetween = this.yearBetweenHeadNum.length;
let yearBetweenHeadNum = YBetween; //>= 2 ? YBetween -1 : YBetween;
canvas.width = yearBetweenHeadNum * 130;
canvas.height = 25;
context.strokeStyle = ganttColor;//'#C5E0B3';
// 璁剧疆绾挎潯鐨勫搴�
context.lineWidth = 5;
// 缁樺埗鐩寸嚎
context.beginPath();
// 璧风偣
let toLeft = (sY - startTime) * 130 + Math.round( 130 / sYDays * SDaysArrive) - Math.round( 130 / sYDays * sD);
let toRight = (eY - startTime) * 130 + Math.round( 130 / eYDays * EDaysArrive) - Math.round( 130 / eYDays * eD);
context.moveTo(toLeft, 20);// 璧风偣
context.lineTo(toRight, 20);// 缁堢偣
context.closePath();
context.stroke();
context.font = '12px "寰蒋闆呴粦"';
context.fillStyle = "#5A6779";
context.fillText('',toLeft,12);
// canvas.style.zIndex = 1;
canvas.style.position = "absolute";
canvas.style.bottom = "15px";
// canvas.style.left = '40px';
// canvas.style.marginTop = '8px';
let val = document.getElementById('myYearCanvas' + i).children[2]
val.appendChild(canvas);
this.loadYearCanvas = true
}
},
//鏈坈anvas
getCanvas(){
let startTime = this.monthBetweenNum[0];
for(let i=0; i<this.documents.length; i++) {
let viewColumns = this.view;
let doc = this.documents[i];
let monthBetween = []; //姣忚鏁版嵁鐨勫紑濮嬫棩鏈熷拰缁撴潫鏃堕棿
let missionName = '';
let ganttColor = '';
for (let key in doc.items) {
viewColumns.columns.forEach(column => {
if(column.mappingField === 'name' && key === column.id) {
missionName = doc.items[key].value;
}else if(column.mappingField === 'start' && key === column.id) {
monthBetween.unshift(doc.items[key].value);
}else if(column.mappingField === 'end' && key === column.id) {
monthBetween.push(doc.items[key].value);
}else if(column.mappingField === "color" && key === column.id) {
if(doc.items[key].value) {
ganttColor = doc.items[key].value;
}else {
ganttColor = '#B4C6E7';
}
}
})
}
if(!monthBetween[0] || !monthBetween[1]) {
continue
}
let isNum = true;
let leftNumber = this.getMonthBetween(startTime, monthBetween[0], isNum);
let rightNumber = this.getMonthBetween(startTime, monthBetween[1], isNum);
let startYM = monthBetween[0].split('-');
let sDay = new Date(startYM[0],startYM[1],0);
let startDays = sDay.getDate(); //寮€濮嬫湀鐨勫ぉ鏁�
let endYM = monthBetween[1].split('-');
let eDay = new Date(endYM[0],endYM[1],0);
let endDays = eDay.getDate(); //缁撴潫鏈堢殑澶╂暟
let sCurrentDays = monthBetween[0].split('-')[2]; //寮€濮嬬殑鏈堜唤鏃�
let eCurrentDays = monthBetween[1].split('-')[2]; //缁撴潫鐨勬湀浠芥棩
let startDaysOwned = startDays - parseInt(sCurrentDays); //寮€濮嬫湀鐨勫畬鏁村ぉ鏁� - 鏁版嵁杩斿洖鎵€鍦ㄧ殑寮€濮嬪ぉ鏁�
let endtDaysOwned = endDays - parseInt(eCurrentDays); //缁撴潫鐨勫畬鏁村ぉ鏁� - 鏁版嵁杩斿洖鎵€鍦ㄧ殑缁撴潫澶╂暟
let tdLeftWidth = Number((130 - (130 / startDays) * startDaysOwned).toFixed(2)) + Number(130 * leftNumber);//;
let tdRightWidth = 130 + Number(130 * rightNumber) - Number(((130 / endDays) * endtDaysOwned).toFixed(2));
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
// 璁剧疆绾挎潯鐨勯鑹�
// canvas.width = "700";
canvas.width = this.monthBetweenHeadNum.length * 130 + 40;
canvas.height = 25;
context.strokeStyle = ganttColor; //'#B4C6E7';
// 璁剧疆绾挎潯鐨勫搴�
context.lineWidth = 5;
// 缁樺埗鐩寸嚎
context.beginPath();
// 璧风偣
let toLeft = parseInt(tdLeftWidth);
let toRight = parseInt(tdRightWidth);//130 - parseInt(Math.abs(tdRightWidth));
// console.log("tdLeftWidth----->",tdLeftWidth);
context.moveTo(toLeft, 20);// 璧风偣
context.lineTo(toRight, 20);// 缁堢偣
context.closePath();
context.stroke();
context.font = '12px "寰蒋闆呴粦"';
context.fillStyle = "#5A6779";
context.fillText('',toLeft,12);
// canvas.id = "CursorLayer";
// canvas.style.zIndex = 1;
canvas.style.position = "absolute";
canvas.style.bottom = "15px";
// canvas.style.left = '40px';
// canvas.style.marginTop = '8px';
if(document.getElementById('mycanvas' + i)) {
let val = document.getElementById('mycanvas' + i).children[2];
val.appendChild(canvas);
}
}
},
//鏃anvas
getdayCanvas() {
let startTime = this.dayBetweenNum[0];
let startYear = startTime;
for(let i=0; i<this.documents.length; i++) {
let viewColumns = this.view;
let doc = this.documents[i];
let dayBetween = [];
let missionName = '';
let ganttColor = '';
for (let key in doc.items) {
viewColumns.columns.forEach(column => {
if(column.mappingField === 'name' && key === column.id) {
missionName = doc.items[key].value;
}else if(column.mappingField === 'start' && key === column.id) {
dayBetween.unshift(doc.items[key].value);
}else if(column.mappingField === 'end' && key === column.id) {
dayBetween.push(doc.items[key].value);
}else if(column.mappingField === "color" && key === column.id) {
if(doc.items[key].value) {
ganttColor = doc.items[key].value;
}else {
// ganttColor = '#FEE598';
ganttColor = '#B4C6E7';
}
}
})
}
// let sD = parseInt(dayBetween[0].split("-")[2]); //姣忔潯鏁版嵁鐨勫紑濮嬪ぉ鏁�
// let eD = parseInt(dayBetween[1].split("-")[2]); //姣忔潯鏁版嵁鐨勭粨鏉熷ぉ鏁�
if(!dayBetween[0] || !dayBetween[1]) {
continue
}
let isNum = true;
let SDaysArrive = this.getDateBetween(startTime, dayBetween[0], isNum); //寮€濮嬪勾浠藉埌杈剧殑骞存湀鏃ユ€绘暟
let EDaysArrive = this.getDateBetween(startTime, dayBetween[1], isNum); //缁撴潫骞翠唤鍒拌揪鐨勫勾鏈堟棩鎬绘暟
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
// 璁剧疆绾挎潯鐨勯鑹�
// canvas.width = "700";
canvas.width = this.dayBetweenHeadNum.length * 130 + 10;
canvas.height = 25;
context.strokeStyle = ganttColor; //'#FEE598';
// 璁剧疆绾挎潯鐨勫搴�
context.lineWidth = 5;
// 缁樺埗鐩寸嚎
context.beginPath();
// 璧风偣
let toLeft = ( SDaysArrive - 1 ) * 130;
let toRight = EDaysArrive * 130;
context.moveTo(toLeft, 20);// 璧风偣
context.lineTo(toRight, 20);// 缁堢偣
context.closePath();
context.stroke();
context.font = '12px "寰蒋闆呴粦"';
context.fillStyle = "#5A6779";
context.fillText('',toLeft,12);
// canvas.style.zIndex = 1;
canvas.style.position = "absolute";
canvas.style.bottom = "15px";
// canvas.style.left = '40px';
// canvas.style.marginTop = '8px';
let val = document.getElementById('myDayCanvas' + i).children[2]
val.appendChild(canvas);
this.loadDayCanvas = true;
}
},
//鑾峰彇涓や釜鏃ユ湡鐨勭浉闅旂殑澶╂暟
getDateBetween(start,end, isNum){
var result = [];
//浣跨敤浼犲叆鍙傛暟鐨勬椂闂�
var startTime = new Date(start);
var endTime = new Date(end);
while(endTime - startTime>=0 ) {
let year = startTime.getFullYear();
let month = startTime.getMonth().toString().length==1?"0"+(startTime.getMonth()+1).toString():startTime.getMonth()+1;
let day = startTime.getDate().toString().length==1?"0"+startTime.getDate():startTime.getDate();
//鍔犲叆鏁扮粍
month = month == '010'?'10':month;
result.push(year+"-"+month+"-"+day);
//鏇存柊鏃ユ湡
startTime.setDate(startTime.getDate()+1);
}
if(isNum) {
return result.length;
}else {
return result;
}
},
getDayNumByYearMonth(year,month){
let totalDays = 0;
for(let i=1; i<=month; i++) {
if(i==1 || i==3 || i==5 || i==7 || i==8 || i==10 || i==12 ) {
totalDays = totalDays + 31;
}else if(i == 4 || i==6 || i==9 || i==11) {
totalDays = totalDays + 30;
}else if(i == 2) {
if(this.isLeapYear(year)) {
totalDays = totalDays + 29;
}else {
totalDays = totalDays + 28;
}
}
}
return totalDays;
},
isLeapYear(year) {
if(year % 100 != 0 && year % 4 == 0 || year % 400 == 0){ //鍒ゆ柇寮€濮嬪勾浠芥槸鍚︽槸闂板勾
return 29;
}else{
return 28;
}
},
getExcelParams() {
if (this.searchExcelData) {
return this.searchExcelData;
} else {
return "";
}
},
onActionChild(act){
switch (act.type) {
case 1: //杞藉叆瑙嗗浘
this.$parent.onAction(act);
break;
case 2: //鍒涘缓
this.$parent.onAction(act);
break;
case 3: //鍒犻櫎
this.doRemove(act);
break;
case 16: //瀵煎嚭excel
this.$parent.onAction(act);
break;
case 27: //瀵煎叆excel
this.$parent.onAction(act);
break;
default:
break;
}
},
doRemove(act) {
const obj = document.getElementsByName("checkbox")
let check_val = []
for (let k in obj) {
if (obj[k].checked)
check_val.push(obj[k].dataset.id);
}
let docIds = check_val;
if(docIds && docIds.length > 0) {
this.$confirm(this.$t('msg.del_select')+`${docIds.length}`+this.$t('msg.data'), this.$t('tip'), {
confirmButtonText: this.$t('msg.confirm'),
cancelButtonText: this.$t('btns.cancel'),
type: 'warning'
}).then(() => {
this.$parent.runBeforeAction(act, docIds);
}).catch(() => {
});
}else {
this.$confirm(this.$t('placeholder.least_one_data'), this.$t('tip'), {
confirmButtonText: this.$t('msg.confirm'),
cancelButtonText: this.$t('btns.cancel'),
type: 'warning'
}).then(() => {
}).catch(() => {
});
}
},
},
filters: {
formDate: function(value) {
let val = value.split("-");
return val[2];
},
dataEscape: function(value) {
let val = value.replace("%", "%");
return val;
},
}
};
</script>