You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.5 KiB
118 lines
3.5 KiB
<template>
|
|
<!-- 时间间隔栏 -->
|
|
<!-- <Barrier /> -->
|
|
|
|
<scroll-view
|
|
:lower-threshold="300"
|
|
scroll-y="true"
|
|
:upper-threshold="300"
|
|
:scroll-into-view="viewId"
|
|
@scroll="scroll"
|
|
@scrolltolower="handleScrollBottom"
|
|
@scrolltoupper="handleScrollTop"
|
|
id="scroll"
|
|
>
|
|
<!-- 时间轴 -->
|
|
<!-- <u-divider bg-color="#f3f4f6" class="pt-5" fontSize="14px" v-if="topEnd">到顶啦</u-divider> -->
|
|
<TimeBox />
|
|
<!-- <u-divider bg-color="#f3f4f6" class="pb-5" fontSize="14px" v-if="bottomEnd">到底啦</u-divider> -->
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
// import Barrier from './component/Barrier.vue';
|
|
import { mapState, mapMutations, mapGetters } from 'vuex';
|
|
import TimeBox from './component/TimeBox.vue';
|
|
import mixin from '@/mixins/timeline';
|
|
|
|
export default {
|
|
name: 'TimeLine',
|
|
components: { TimeBox },
|
|
mixins: [mixin],
|
|
|
|
data() {
|
|
return {
|
|
top: 0,
|
|
viewId: '', // 距离顶部的距离
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
...mapState('role', ['visibleRoles']),
|
|
...mapState('task', ['scrollTop', 'showTips', 'tasks', 'topEnd', 'bottomEnd', 'showSkeleton', 'timeNode']),
|
|
...mapGetters('task', ['timeGranularity']),
|
|
},
|
|
|
|
methods: {
|
|
...mapMutations('task', ['setScrollTop', 'setShrink', 'setUpTasks', 'setDownTasks']),
|
|
|
|
// 滚动
|
|
scroll(e) {
|
|
this.top = e.detail.scrollTop;
|
|
this.setShrink(this.top > this.scrollTop);
|
|
this.setScrollTop(this.top);
|
|
},
|
|
|
|
// 滚动到顶部
|
|
async handleScrollTop() {
|
|
if (!this.tasks || !this.tasks.length || this.showSkeleton) return;
|
|
const startTime = this.tasks[0].planStart - 0;
|
|
if ((this.tasks[0].plugins && this.tasks[0].plugins.length === 0) || this.topEnd) {
|
|
// 没有数据时 自动加载数据
|
|
console.warn('滚动到顶部没有数据时: ');
|
|
const addTasks = this.setTime(startTime, true);
|
|
this.setUpTasks(addTasks);
|
|
} else {
|
|
// 有数据时
|
|
console.warn('滚动到顶部有数据时: ');
|
|
const upQuery = {
|
|
timeNode: startTime,
|
|
queryType: 0,
|
|
queryNum: 6,
|
|
};
|
|
await this.$emit('getTasks', upQuery);
|
|
}
|
|
},
|
|
|
|
// 滚动到底部
|
|
async handleScrollBottom() {
|
|
if (!this.tasks || !this.tasks.length || this.showSkeleton) return;
|
|
const { tasks, timeGranularity } = this;
|
|
const startTime = tasks[tasks.length - 1].planStart - 0;
|
|
if ((tasks[0].plugins && tasks[0].plugins.length === 0) || this.bottomEnd) {
|
|
// 没有数据时 自动加载数据
|
|
console.warn('滚动到底部没有数据时: ');
|
|
const addTasks = this.setTime(startTime, false);
|
|
this.setDownTasks(addTasks);
|
|
} else {
|
|
// 时间基准点=最后一个任务的开始时间+当前时间颗粒度
|
|
console.warn('滚动到底部有数据时: ');
|
|
const timeNode = this.$t.time.add(startTime, 1, timeGranularity).valueOf();
|
|
const downQuery = {
|
|
timeNode,
|
|
queryType: 1,
|
|
queryNum: 6,
|
|
};
|
|
await this.$emit('getTasks', downQuery);
|
|
}
|
|
},
|
|
|
|
// 设置自动滚动位置
|
|
setViewId() {
|
|
const { tasks, timeNode } = this;
|
|
for (let i = 0; i < tasks.length; i++) {
|
|
const item = tasks[i];
|
|
const show = this.$t.time.isSame(+item.planStart, +timeNode, this.timeGranularity);
|
|
if (item.detailId) {
|
|
this.viewId = `a${item.id}`;
|
|
return;
|
|
}
|
|
if (show) {
|
|
this.viewId = `a${item.id}`;
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|