<template>
<div
class="gantt-container"
:style="{ width: containerWidth, height: containerHeight }"
>
<div class="gantt-table" id="table" ref="table">
<table style="width: 100%">
<div
class="header"
:style="{
height: timeLineHeight * 3 - 2 + 'px;',
lineHeight: timeLineHeight * 3 - 2 + 'px;',
}"
>
<thead :style="{ height: timeLineHeight * 3 - 2 + 'px' }">
<tr :style="{ lineHeight: timeLineHeight * 3 - 2 + 'px' }">
<th
:width="col.width"
v-for="(col, i) in ganttConfig.columns"
:key="`th${i}`"
style="color: #33333"
>
{{ col.title }}
<!-- <span v-el-if="col.field === 'tools'" class="create-icon">{{
col.title
}}</span> -->
</th>
</tr>
</thead>
</div>
<div class="body">
<tbody>
<!-- v-if="row.show" -->
<tr
v-for="(row, i) in ganttConfig.data"
:key="`tr${i}`"
class="row"
@click="scrollToBar(row)"
:style="{ lineHeight: lineHeight + 'px' }"
>
<td
v-for="(col, index) in ganttConfig.columns"
:key="'td' + index"
:width="col.width"
:style="{ lineHeight: lineHeight + 'px' }"
>
<!-- <div v-show="row.show"> -->
<div v-if="col.field === 'icon'">
<span
v-if="!row.open && !row.parentId"
style="color: #1e80ff; cursor: pointer"
>▶</span
>
<span
v-else-if="row.show && !row.parentId"
style="cursor: pointer"
>▼</span
>
</div>
<div v-else>
{{ row[col.field] }}
</div>
<!-- </div> -->
</td>
</tr>
</tbody>
</div>
</table>
</div>
<div class="gantt-chart" id="chart" ref="chart">
<!-- 时间轴 -->
<div class="header" :style="{ width: dateConfig.svgWidth + 'px' }">
<!-- 月数据 -->
<svg :width="dateConfig.svgWidth" :height="timeLineHeight">
<g
class="date"
v-for="(month, index) in dateConfig.monthList"
:key="'mg' + index"
>
<!-- 文字 -->
<text
:x="month.left * squareWidth + 5"
:y="timeLineHeight / 2 + 4"
style="font-size: 12px"
>
{{ month.text }}
</text>
<!-- 时间轴边框 -->
<path
:d="'M ' + month.left * squareWidth + ' 0 V 30'"
stroke="#d9dde0"
></path>
<line
x1="0"
y1="30"
:x2="dateConfig.svgWidth"
y2="30"
stroke="#d9dde0"
></line>
</g>
</svg>
<!-- 日数据 -->
<svg :width="dateConfig.svgWidth" :height="timeLineHeight">
<g
class="date"
v-for="(date, index) in dateConfig.dateList"
:key="'dg' + index"
>
<text
:x="index * squareWidth + 5"
:y="timeLineHeight / 2 + 4"
style="font-size: 12px"
>
{{ date.text }}
</text>
<text
:x="index * squareWidth + 20"
:y="timeLineHeight / 2 + 4"
style="font-size: 8px; margin-left: 4px"
>
{{ date.day }}
</text>
<path
:d="'M ' + index * squareWidth + ' 0 V 30'"
stroke="#d9dde0"
></path>
</g>
</svg>
<!-- 自定义时间轴 -->
<svg :width="dateConfig.svgWidth" :height="timeLineHeight">
<g
v-for="(item, index) in dateConfig.customisedList"
:key="'cdg' + index"
>
<rect
:x="item.start * squareWidth"
y="0"
:width="item.length * squareWidth"
:height="timeLineHeight"
:fill="index % 2 === 0 ? '#ddd' : '#eee'"
></rect>
<text
:x="(item.start + item.length / 2) * squareWidth - 12"
:y="timeLineHeight / 2 + 4"
style="font-size: 12px"
>
{{ item.title }}
</text>
</g>
</svg>
</div>
<!-- 进度图 -->
<div class="body">
<svg
:width="dateConfig.svgWidth"
:height="ganttConfig.chartData.length * lineHeight"
>
<!-- 背景图 -->
<rect
v-for="(row, index) in ganttConfig.chartData"
:key="'rect' + index"
x="0"
:y="lineHeight * index"
:width="dateConfig.svgWidth"
:height="lineHeight"
:fill="index % 2 === 0 ? '#fff' : '#f9fafb'"
></rect>
<path
v-for="(date, index) in dateConfig.dateList"
:key="'path' + index"
:d="
'M ' +
index * squareWidth +
' 0 V' +
ganttConfig.chartData.length * lineHeight
"
stoke="#d9dde0"
></path>
<line
v-for="(row, index) in ganttConfig.chartData"
:key="'line' + index"
x1="0"
:y1="lineHeight * index + lineHeight"
:x2="dateConfig.svgWidth"
:y2="lineHeight * index + lineHeight"
stoke="#d9dde0"
></line>
<!-- 进度图 bar 绘制 -->
<g
class="bar"
v-for="(row, index) in ganttConfig.chartData"
:key="'gg' + index"
@click="showDetailed(index)"
>
<!-- 全部 -->
<rect
:id="'bar_' + index"
:x="row.startDay * squareWidth"
:y="index * lineHeight + (lineHeight - barHeight) / 2 - 3"
:width="row.duration * squareWidth"
:height="barHeight + 6"
:rx="barHeight / 2"
:ry="barHeight / 2"
:fill="
index > 20
? barColorList[index - 20][1]
: barColorList[index][1]
"
></rect>
<!-- 进度 -->
<rect
v-for="(item, i) in row.list"
:key="'jd' + i"
:x="item.startDay * squareWidth"
:y="index * lineHeight + (lineHeight - barHeight) / 2"
:width="item.duration * squareWidth * item.progress"
:height="barHeight"
:rx="barHeight / 2"
:ry="barHeight / 2"
:opacity="item.progress"
:fill="
index > 20
? barColorList[index - 20][0]
: barColorList[index][0]
"
></rect>
<text
:x="row.startDay * squareWidth + 20"
:y="(index + 0.5) * lineHeight + 5"
:fill="barFontColor"
style="font-size: 12px; mix-blend-mode: difference"
>
{{ row.name }}
</text>
<text
v-for="(item, i) in row.list"
:key="'jdwz' + i"
:x="item.startDay * squareWidth + 10"
:y="(index
