273 lines
7.3 KiB
Vue
273 lines
7.3 KiB
Vue
<template>
|
||
<div
|
||
class="cross-year-timeline-container"
|
||
:style="{
|
||
position: 'absolute',
|
||
left: '0',
|
||
width: `${yearRange.length * 200}px`,
|
||
height: '40px',
|
||
zIndex: 2,
|
||
}"
|
||
>
|
||
<!-- 年份分隔线 -->
|
||
<template v-for="(year, index) in yearRange" :key="`divider-${year}`">
|
||
<div
|
||
v-if="index < yearRange.length - 1"
|
||
class="year-divider"
|
||
:style="{
|
||
position: 'absolute',
|
||
left: `${(index + 1) * 200}px`,
|
||
top: '0',
|
||
bottom: '0',
|
||
width: '1px',
|
||
backgroundColor: '#e5e6eb',
|
||
zIndex: 1,
|
||
}"
|
||
></div>
|
||
</template>
|
||
|
||
<!-- 连续时间线（跨列显示） -->
|
||
<div
|
||
class="timeline-bar"
|
||
:style="{
|
||
position: 'absolute',
|
||
left: '0',
|
||
right: '0',
|
||
top: '0',
|
||
bottom: '0',
|
||
}"
|
||
>
|
||
<!-- 空置状态 -->
|
||
<div
|
||
v-for="(segment, index) in allSegments"
|
||
:key="`segment-${index}`"
|
||
class="timeline-segment"
|
||
:class="segment.type"
|
||
:style="{
|
||
position: 'absolute',
|
||
left: `${segment.startPercentage}%`,
|
||
width: `${segment.percentage}%`,
|
||
height: '100%',
|
||
backgroundColor:
|
||
segment.type === 'vacant'
|
||
? '#f2f3f5'
|
||
: segment.type === 'lease'
|
||
? '#00b42a'
|
||
: 'transparent',
|
||
backgroundImage:
|
||
segment.type === 'unarranged'
|
||
? 'repeating-linear-gradient(45deg, #f2f3f5, #f2f3f5 4px, #d9d9d9 4px, #d9d9d9 8px)'
|
||
: 'none',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
zIndex: 2,
|
||
}"
|
||
>
|
||
<span
|
||
v-if="segment.label && segment.percentage > 5"
|
||
class="segment-label"
|
||
:style="{
|
||
fontSize: '12px',
|
||
color: segment.type === 'lease' ? '#fff' : '#86909c',
|
||
fontWeight: segment.type === 'lease' ? '500' : 'normal',
|
||
padding: '0 4px',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap',
|
||
}"
|
||
>
|
||
{{ segment.label }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { computed } from 'vue';
|
||
|
||
interface YearData {
|
||
year: string;
|
||
allDays: number;
|
||
allData: Array<{
|
||
companyName: string;
|
||
days: number;
|
||
type: number; // 1: 在租, 其他可能是空置
|
||
}>;
|
||
}
|
||
|
||
interface Props {
|
||
yearsData?: YearData[];
|
||
yearRange: number[];
|
||
}
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
yearsData: () => [],
|
||
yearRange: () => [],
|
||
});
|
||
|
||
// 计算总天数（5年）
|
||
const totalDays = computed(() => {
|
||
// 如果数据为空，使用默认的5年天数
|
||
if (!props.yearsData || props.yearsData.length === 0) {
|
||
return 365 * props.yearRange.length;
|
||
}
|
||
// 确保所有年份都有数据，缺失的年份使用365天
|
||
let total = 0;
|
||
props.yearRange.forEach((year) => {
|
||
const yearData = props.yearsData?.find((d) => d.year === String(year));
|
||
total += yearData?.allDays || 365;
|
||
});
|
||
return total;
|
||
});
|
||
|
||
// 合并所有年份的数据，创建连续的时间段
|
||
interface TimelineSegment {
|
||
type: 'vacant' | 'lease' | 'unarranged';
|
||
percentage: number;
|
||
startPercentage: number; // 在整个时间线中的起始位置百分比
|
||
days: number;
|
||
label?: string;
|
||
startDay: number; // 在整个5年时间线中的起始天数
|
||
endDay: number; // 在整个5年时间线中的结束天数
|
||
}
|
||
|
||
const allSegments = computed(() => {
|
||
if (!props.yearsData || props.yearsData.length === 0) {
|
||
// 如果没有数据，全部显示为未安排
|
||
return [
|
||
{
|
||
type: 'unarranged' as const,
|
||
percentage: 100,
|
||
startPercentage: 0,
|
||
days: totalDays.value,
|
||
startDay: 0,
|
||
endDay: totalDays.value,
|
||
},
|
||
];
|
||
}
|
||
|
||
const segments: TimelineSegment[] = [];
|
||
let globalOffset = 0; // 在整个5年时间线中的累计天数
|
||
|
||
// 按年份顺序处理数据，确保年份顺序正确
|
||
const sortedYearsData = [...props.yearsData].sort((a, b) => {
|
||
return Number(a.year) - Number(b.year);
|
||
});
|
||
|
||
// 创建年份数据映射
|
||
const yearDataMap = new Map<string, YearData>();
|
||
sortedYearsData.forEach((data) => {
|
||
yearDataMap.set(data.year, data);
|
||
});
|
||
|
||
// 按年份范围顺序处理
|
||
props.yearRange.forEach((year) => {
|
||
const yearStr = String(year);
|
||
const yearData = yearDataMap.get(yearStr);
|
||
const yearDays = yearData?.allDays || 365;
|
||
const yearStartDay = globalOffset;
|
||
const yearEndDay = globalOffset + yearDays;
|
||
|
||
if (!yearData || !yearData.allData || yearData.allData.length === 0) {
|
||
// 如果该年份没有数据，全部显示为未安排
|
||
segments.push({
|
||
type: 'unarranged',
|
||
percentage: (yearDays / totalDays.value) * 100,
|
||
startPercentage: (yearStartDay / totalDays.value) * 100,
|
||
days: yearDays,
|
||
startDay: yearStartDay,
|
||
endDay: yearEndDay,
|
||
});
|
||
globalOffset = yearEndDay;
|
||
return;
|
||
}
|
||
|
||
// 收集该年份的所有时间段，按顺序排列
|
||
const yearSegments: Array<{
|
||
type: 'vacant' | 'lease';
|
||
days: number;
|
||
label: string;
|
||
}> = [];
|
||
|
||
yearData.allData.forEach((item) => {
|
||
if (item.type === 1 && item.days > 0) {
|
||
// 在租
|
||
yearSegments.push({
|
||
type: 'lease',
|
||
days: item.days,
|
||
label: item.companyName || '',
|
||
});
|
||
} else if (item.type !== 1 && item.days > 0) {
|
||
// 空置
|
||
yearSegments.push({
|
||
type: 'vacant',
|
||
days: item.days,
|
||
label: `空置${item.days}天`,
|
||
});
|
||
}
|
||
});
|
||
|
||
// 计算已安排的天数
|
||
const arrangedDays = yearSegments.reduce((sum, seg) => sum + seg.days, 0);
|
||
const unarrangedDays = yearDays - arrangedDays;
|
||
|
||
// 添加已安排的时间段（连续显示）
|
||
let offset = 0;
|
||
yearSegments.forEach((seg) => {
|
||
const startDay = yearStartDay + offset;
|
||
const endDay = startDay + seg.days;
|
||
segments.push({
|
||
type: seg.type,
|
||
percentage: (seg.days / totalDays.value) * 100,
|
||
startPercentage: (startDay / totalDays.value) * 100,
|
||
days: seg.days,
|
||
label: seg.label,
|
||
startDay,
|
||
endDay,
|
||
});
|
||
offset += seg.days;
|
||
});
|
||
|
||
// 添加未安排的时间段
|
||
if (unarrangedDays > 0) {
|
||
const startDay = yearStartDay + offset;
|
||
segments.push({
|
||
type: 'unarranged',
|
||
percentage: (unarrangedDays / totalDays.value) * 100,
|
||
startPercentage: (startDay / totalDays.value) * 100,
|
||
days: unarrangedDays,
|
||
startDay,
|
||
endDay: yearEndDay,
|
||
});
|
||
}
|
||
|
||
globalOffset = yearEndDay;
|
||
});
|
||
|
||
return segments;
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.cross-year-timeline-container {
|
||
position: relative;
|
||
overflow: visible;
|
||
}
|
||
|
||
.timeline-bar {
|
||
border-radius: 2px;
|
||
overflow: visible;
|
||
}
|
||
|
||
.timeline-segment {
|
||
transition: all 0.3s;
|
||
min-width: 0;
|
||
}
|
||
|
||
.segment-label {
|
||
user-select: none;
|
||
}
|
||
</style>
|