forked from ccsens_fe/tall-mui-3
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.
112 lines
3.8 KiB
112 lines
3.8 KiB
<template>
|
|
<!-- 时间间隔栏 -->
|
|
<!-- <Barrier /> -->
|
|
|
|
<scroll-view
|
|
:lower-threshold="300"
|
|
scroll-y="true"
|
|
:upper-threshold="300"
|
|
:scroll-into-view="scrollToTaskId"
|
|
@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 { setPlaceholderTasks } from '@/utils/task';
|
|
import TimeBox from './component/TimeBox.vue';
|
|
|
|
export default {
|
|
name: 'TimeLine',
|
|
components: { TimeBox },
|
|
|
|
data() {
|
|
return { top: 0 };
|
|
},
|
|
|
|
computed: {
|
|
...mapState('role', ['visibleRoles']),
|
|
...mapState('task', ['scrollTop', 'tasks', 'topEnd', 'bottomEnd', 'showSkeleton', 'timeNode', 'scrollToTaskId']),
|
|
...mapGetters('task', ['timeGranularity']),
|
|
},
|
|
|
|
methods: {
|
|
...mapMutations('task', ['setScrollTop', 'setShrink', 'setUpTasks', 'setDownTasks', 'setScrollToTaskId']),
|
|
|
|
// 滚动
|
|
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 = setPlaceholderTasks(startTime, true, this.timeGranularity);
|
|
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 = setPlaceholderTasks(startTime, false, this.timeGranularity);
|
|
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);
|
|
}
|
|
},
|
|
|
|
// 设置自动滚动位置
|
|
setScrollPosition() {
|
|
// 如果storage里有taskId 滚动到这个id的任务
|
|
const taskId = this.$t.storage.getStorageSync('taskId');
|
|
if (taskId) {
|
|
this.setScrollToTaskId(`a${taskId}`);
|
|
this.$t.storage.setStorageSync('taskId', ''); // 记录后即刻清除本地存储
|
|
} else {
|
|
// 没有本地记录的taskId
|
|
// 找到当前时间基准线的任务id 记录 并滚动到当前时间基准线
|
|
const task = this.tasks.find(item => this.$moment(+item.planStart).isSame(this.timeNode, this.timeGranularity));
|
|
task && this.setScrollToTaskId(`a${task.id}`); // 有这个task 就记录他的id
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|