9 changed files with 607 additions and 91 deletions
@ -0,0 +1,540 @@ |
|||||
|
<template> |
||||
|
<div class="gantt-chart-container"> |
||||
|
<div class="gantt-header"> |
||||
|
<h1 class="gantt-title">甘特图</h1> |
||||
|
<div class="gantt-actions"> |
||||
|
<el-button type="primary" size="small" @click="refreshData">刷新</el-button> |
||||
|
<el-button type="default" size="small" @click="exportData">导出</el-button> |
||||
|
<el-button type="default" size="small" @click="closePage">关闭</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="gantt-content"> |
||||
|
<div class="gantt-toolbar"> |
||||
|
<div class="toolbar-left"> |
||||
|
<el-radio-group v-model="viewMode" size="small"> |
||||
|
<el-radio-button label="hour">小时视图</el-radio-button> |
||||
|
<el-radio-button label="day">日视图</el-radio-button> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
<div class="toolbar-right"> |
||||
|
<el-button-group size="small"> |
||||
|
<el-button icon="el-icon-d-arrow-left" @click="prevPeriod">上一个</el-button> |
||||
|
<el-button @click="today">今天</el-button> |
||||
|
<el-button icon="el-icon-d-arrow-right" @click="nextPeriod">下一个</el-button> |
||||
|
</el-button-group> |
||||
|
<span class="current-period">{{ currentPeriodText }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="gantt-body"> |
||||
|
<div class="gantt-sidebar"> |
||||
|
<div class="sidebar-header">任务名称</div> |
||||
|
<div class="sidebar-content"> |
||||
|
<div v-for="item in ganttData" :key="item.id" class="sidebar-item"> |
||||
|
<div class="item-icon" :style="{ backgroundColor: item.color }"></div> |
||||
|
<div class="item-name">{{ item.name }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="gantt-timeline"> |
||||
|
<div class="timeline-header"> |
||||
|
<div v-for="(time, index) in timelineTimes" :key="index" class="timeline-time"> |
||||
|
<div class="time-label">{{ time }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="timeline-content"> |
||||
|
<div v-for="item in ganttData" :key="item.id" class="timeline-row"> |
||||
|
<div |
||||
|
class="timeline-bar" |
||||
|
:style="{ |
||||
|
left: item.startPercent + '%', |
||||
|
width: item.durationPercent + '%', |
||||
|
backgroundColor: item.color |
||||
|
}" |
||||
|
> |
||||
|
<div class="bar-label">{{ item.name }}</div> |
||||
|
<div class="bar-time">{{ formatTime(item.startTime) }} - {{ formatTime(item.endTime) }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="gantt-legend"> |
||||
|
<div class="legend-title">图例：</div> |
||||
|
<div class="legend-items"> |
||||
|
<div v-for="legend in legends" :key="legend.type" class="legend-item"> |
||||
|
<div class="legend-color" :style="{ backgroundColor: legend.color }"></div> |
||||
|
<div class="legend-text">{{ legend.label }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'GanttChart', |
||||
|
data() { |
||||
|
return { |
||||
|
viewMode: 'day', |
||||
|
currentDate: new Date(), |
||||
|
ganttData: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
name: '航线一', |
||||
|
type: 'route', |
||||
|
color: '#409EFF', |
||||
|
startTime: new Date(2026, 1, 20, 6, 30), |
||||
|
endTime: new Date(2026, 1, 20, 8, 30), |
||||
|
startPercent: 3.33, |
||||
|
durationPercent: 13.33 |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
name: '航线二', |
||||
|
type: 'route', |
||||
|
color: '#67C23A', |
||||
|
startTime: new Date(2026, 1, 20, 8, 45), |
||||
|
endTime: new Date(2026, 1, 20, 10, 45), |
||||
|
startPercent: 21.67, |
||||
|
durationPercent: 13.33 |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
name: '航线三', |
||||
|
type: 'route', |
||||
|
color: '#E6A23C', |
||||
|
startTime: new Date(2026, 1, 20, 11, 0), |
||||
|
endTime: new Date(2026, 1, 20, 13, 0), |
||||
|
startPercent: 40, |
||||
|
durationPercent: 13.33 |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
name: '导弹发射任务', |
||||
|
type: 'missile', |
||||
|
color: '#F56C6C', |
||||
|
startTime: new Date(2026, 1, 20, 13, 15), |
||||
|
endTime: new Date(2026, 1, 20, 14, 15), |
||||
|
startPercent: 47.5, |
||||
|
durationPercent: 6.67 |
||||
|
}, |
||||
|
{ |
||||
|
id: 5, |
||||
|
name: '空中加油任务', |
||||
|
type: 'refuel', |
||||
|
color: '#909399', |
||||
|
startTime: new Date(2026, 1, 20, 14, 30), |
||||
|
endTime: new Date(2026, 1, 20, 16, 0), |
||||
|
startPercent: 55, |
||||
|
durationPercent: 10 |
||||
|
}, |
||||
|
{ |
||||
|
id: 6, |
||||
|
name: '航线四', |
||||
|
type: 'route', |
||||
|
color: '#409EFF', |
||||
|
startTime: new Date(2026, 1, 20, 16, 15), |
||||
|
endTime: new Date(2026, 1, 20, 18, 15), |
||||
|
startPercent: 63.33, |
||||
|
durationPercent: 13.33 |
||||
|
}, |
||||
|
{ |
||||
|
id: 7, |
||||
|
name: '航线五', |
||||
|
type: 'route', |
||||
|
color: '#67C23A', |
||||
|
startTime: new Date(2026, 1, 20, 18, 30), |
||||
|
endTime: new Date(2026, 1, 20, 20, 0), |
||||
|
startPercent: 81.67, |
||||
|
durationPercent: 10 |
||||
|
}, |
||||
|
{ |
||||
|
id: 8, |
||||
|
name: '侦察任务', |
||||
|
type: 'reconnaissance', |
||||
|
color: '#E6A23C', |
||||
|
startTime: new Date(2026, 1, 20, 9, 30), |
||||
|
endTime: new Date(2026, 1, 20, 11, 30), |
||||
|
startPercent: 30, |
||||
|
durationPercent: 13.33 |
||||
|
} |
||||
|
], |
||||
|
legends: [ |
||||
|
{ type: 'route', label: '航线', color: '#409EFF' }, |
||||
|
{ type: 'missile', label: '导弹发射', color: '#F56C6C' }, |
||||
|
{ type: 'refuel', label: '空中加油', color: '#909399' }, |
||||
|
{ type: 'reconnaissance', label: '侦察任务', color: '#E6A23C' } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
currentPeriodText() { |
||||
|
const year = this.currentDate.getFullYear() |
||||
|
const month = this.currentDate.getMonth() + 1 |
||||
|
const day = this.currentDate.getDate() |
||||
|
const hour = this.currentDate.getHours() |
||||
|
const minute = this.currentDate.getMinutes() |
||||
|
|
||||
|
if (this.viewMode === 'hour') { |
||||
|
return `${year}年${month}月${day}日 ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}` |
||||
|
} else { |
||||
|
return `${year}年${month}月${day}日` |
||||
|
} |
||||
|
}, |
||||
|
timelineTimes() { |
||||
|
const times = [] |
||||
|
const startHour = 6 |
||||
|
const endHour = 20 |
||||
|
|
||||
|
for (let hour = startHour; hour <= endHour; hour++) { |
||||
|
times.push(`${hour.toString().padStart(2, '0')}:00`) |
||||
|
} |
||||
|
return times |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
refreshData() { |
||||
|
this.$message.success('数据已刷新') |
||||
|
}, |
||||
|
exportData() { |
||||
|
this.$message.success('数据导出中...') |
||||
|
}, |
||||
|
closePage() { |
||||
|
window.close() |
||||
|
}, |
||||
|
prevPeriod() { |
||||
|
if (this.viewMode === 'hour') { |
||||
|
this.currentDate.setHours(this.currentDate.getHours() - 1) |
||||
|
} else { |
||||
|
this.currentDate.setDate(this.currentDate.getDate() - 1) |
||||
|
} |
||||
|
}, |
||||
|
nextPeriod() { |
||||
|
if (this.viewMode === 'hour') { |
||||
|
this.currentDate.setHours(this.currentDate.getHours() + 1) |
||||
|
} else { |
||||
|
this.currentDate.setDate(this.currentDate.getDate() + 1) |
||||
|
} |
||||
|
}, |
||||
|
today() { |
||||
|
this.currentDate = new Date() |
||||
|
}, |
||||
|
formatTime(date) { |
||||
|
const hours = date.getHours().toString().padStart(2, '0') |
||||
|
const minutes = date.getMinutes().toString().padStart(2, '0') |
||||
|
return `${hours}:${minutes}` |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.gantt-chart-container { |
||||
|
width: 100%; |
||||
|
height: 100vh; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background: #f5f5f5; |
||||
|
} |
||||
|
|
||||
|
.gantt-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 15px 20px; |
||||
|
background: #fff; |
||||
|
border-bottom: 1px solid #e4e7ed; |
||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
.gantt-title { |
||||
|
margin: 0; |
||||
|
font-size: 20px; |
||||
|
font-weight: 500; |
||||
|
color: #303133; |
||||
|
} |
||||
|
|
||||
|
.gantt-actions { |
||||
|
display: flex; |
||||
|
gap: 10px; |
||||
|
} |
||||
|
|
||||
|
.gantt-content { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
padding: 20px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.gantt-toolbar { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 15px; |
||||
|
padding: 10px 15px; |
||||
|
background: #fff; |
||||
|
border-radius: 4px; |
||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
.toolbar-left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
|
||||
|
.toolbar-right { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
|
||||
|
.current-period { |
||||
|
font-size: 14px; |
||||
|
color: #606266; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.gantt-body { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
background: #fff; |
||||
|
border-radius: 4px; |
||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.gantt-sidebar { |
||||
|
width: 250px; |
||||
|
border-right: 1px solid #e4e7ed; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.sidebar-header { |
||||
|
height: 50px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 0 15px; |
||||
|
background: #f5f7fa; |
||||
|
border-bottom: 1px solid #e4e7ed; |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
color: #606266; |
||||
|
} |
||||
|
|
||||
|
.sidebar-content { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.sidebar-item { |
||||
|
height: 50px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 0 15px; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
transition: background-color 0.3s; |
||||
|
} |
||||
|
|
||||
|
.sidebar-item:hover { |
||||
|
background-color: #f5f7fa; |
||||
|
} |
||||
|
|
||||
|
.item-icon { |
||||
|
width: 12px; |
||||
|
height: 12px; |
||||
|
border-radius: 2px; |
||||
|
margin-right: 10px; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.item-name { |
||||
|
font-size: 13px; |
||||
|
color: #606266; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.gantt-timeline { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.timeline-header { |
||||
|
height: 50px; |
||||
|
display: flex; |
||||
|
background: #f5f7fa; |
||||
|
border-bottom: 1px solid #e4e7ed; |
||||
|
} |
||||
|
|
||||
|
.timeline-time { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-right: 1px solid #e4e7ed; |
||||
|
} |
||||
|
|
||||
|
.time-label { |
||||
|
font-size: 13px; |
||||
|
color: #606266; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.timeline-content { |
||||
|
flex: 1; |
||||
|
position: relative; |
||||
|
overflow-y: auto; |
||||
|
background: linear-gradient(to right, |
||||
|
transparent 0%, |
||||
|
transparent 6.667%, |
||||
|
#f0f0f0 6.667%, |
||||
|
#f0f0f0 6.677%, |
||||
|
transparent 6.677%, |
||||
|
transparent 13.333%, |
||||
|
#f0f0f0 13.333%, |
||||
|
#f0f0f0 13.343%, |
||||
|
transparent 13.343%, |
||||
|
transparent 20%, |
||||
|
#f0f0f0 20%, |
||||
|
#f0f0f0 20.01%, |
||||
|
transparent 20.01%, |
||||
|
transparent 26.667%, |
||||
|
#f0f0f0 26.667%, |
||||
|
#f0f0f0 26.677%, |
||||
|
transparent 26.677%, |
||||
|
transparent 33.333%, |
||||
|
#f0f0f0 33.333%, |
||||
|
#f0f0f0 33.343%, |
||||
|
transparent 33.343%, |
||||
|
transparent 40%, |
||||
|
#f0f0f0 40%, |
||||
|
#f0f0f0 40.01%, |
||||
|
transparent 40.01%, |
||||
|
transparent 46.667%, |
||||
|
#f0f0f0 46.667%, |
||||
|
#f0f0f0 46.677%, |
||||
|
transparent 46.677%, |
||||
|
transparent 53.333%, |
||||
|
#f0f0f0 53.333%, |
||||
|
#f0f0f0 53.343%, |
||||
|
transparent 53.343%, |
||||
|
transparent 60%, |
||||
|
#f0f0f0 60%, |
||||
|
#f0f0f0 60.01%, |
||||
|
transparent 60.01%, |
||||
|
transparent 66.667%, |
||||
|
#f0f0f0 66.667%, |
||||
|
#f0f0f0 66.677%, |
||||
|
transparent 66.677%, |
||||
|
transparent 73.333%, |
||||
|
#f0f0f0 73.333%, |
||||
|
#f0f0f0 73.343%, |
||||
|
transparent 73.343%, |
||||
|
transparent 80%, |
||||
|
#f0f0f0 80%, |
||||
|
#f0f0f0 80.01%, |
||||
|
transparent 80.01%, |
||||
|
transparent 86.667%, |
||||
|
#f0f0f0 86.667%, |
||||
|
#f0f0f0 86.677%, |
||||
|
transparent 86.677%, |
||||
|
transparent 93.333%, |
||||
|
#f0f0f0 93.333%, |
||||
|
#f0f0f0 93.343%, |
||||
|
transparent 93.343%, |
||||
|
transparent 100% |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
.timeline-row { |
||||
|
height: 50px; |
||||
|
position: relative; |
||||
|
border-bottom: 1px solid #f0f0f0; |
||||
|
} |
||||
|
|
||||
|
.timeline-bar { |
||||
|
position: absolute; |
||||
|
top: 8px; |
||||
|
height: 36px; |
||||
|
border-radius: 4px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
cursor: pointer; |
||||
|
transition: transform 0.2s, box-shadow 0.2s; |
||||
|
} |
||||
|
|
||||
|
.timeline-bar:hover { |
||||
|
transform: translateY(-2px); |
||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); |
||||
|
} |
||||
|
|
||||
|
.bar-label { |
||||
|
font-size: 12px; |
||||
|
color: #fff; |
||||
|
font-weight: 500; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
padding: 0 8px; |
||||
|
} |
||||
|
|
||||
|
.bar-time { |
||||
|
font-size: 10px; |
||||
|
color: rgba(255, 255, 255, 0.9); |
||||
|
margin-top: 2px; |
||||
|
} |
||||
|
|
||||
|
.gantt-legend { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 15px 20px; |
||||
|
background: #fff; |
||||
|
border-top: 1px solid #e4e7ed; |
||||
|
margin-top: 15px; |
||||
|
border-radius: 4px; |
||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
.legend-title { |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
color: #606266; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.legend-items { |
||||
|
display: flex; |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
.legend-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
.legend-color { |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
|
||||
|
.legend-text { |
||||
|
font-size: 13px; |
||||
|
color: #606266; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue