From 72dad2bed2f638b4edbc2536bb31bfb733041cb7 Mon Sep 17 00:00:00 2001 From: song Date: Fri, 7 Jan 2022 18:37:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20timeline?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + components/TimeLine/TimeLine.vue | 122 +++++++ components/TimeLine/component/Barrier.vue | 38 +++ components/TimeLine/component/TaskTools.vue | 177 +++++++++++ components/TimeLine/component/TimeBox.vue | 131 ++++++++ components/TimeLine/component/TimeStatus.vue | 316 +++++++++++++++++++ components/TimeLine/component/Title.vue | 7 + hooks/project/useGetTasks.js | 52 ++- pages/project/project.vue | 46 +-- 9 files changed, 856 insertions(+), 34 deletions(-) create mode 100644 components/TimeLine/TimeLine.vue create mode 100644 components/TimeLine/component/Barrier.vue create mode 100644 components/TimeLine/component/TaskTools.vue create mode 100644 components/TimeLine/component/TimeBox.vue create mode 100644 components/TimeLine/component/TimeStatus.vue create mode 100644 components/TimeLine/component/Title.vue diff --git a/CHANGELOG.md b/CHANGELOG.md index 2d7e551..2f35e00 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - | 使用uview完成api请求 | [1b3efd8](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/1b3efd8) - | 日历页添加 | [1b46a91](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/1b46a91) - | 日历页首页 | [561c8e6](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/561c8e6) + - | 时间轴接口 | [a95d005](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/a95d005) - | 时间轴页面 | [e926b75](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/e926b75) - | 更新代码 | [392c8cc](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/392c8cc) - | 项目列表 | [a52e6d5](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/a52e6d5) diff --git a/components/TimeLine/TimeLine.vue b/components/TimeLine/TimeLine.vue new file mode 100644 index 0000000..e09077c --- /dev/null +++ b/components/TimeLine/TimeLine.vue @@ -0,0 +1,122 @@ + + + diff --git a/components/TimeLine/component/Barrier.vue b/components/TimeLine/component/Barrier.vue new file mode 100644 index 0000000..95f5f9b --- /dev/null +++ b/components/TimeLine/component/Barrier.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/components/TimeLine/component/TaskTools.vue b/components/TimeLine/component/TaskTools.vue new file mode 100644 index 0000000..32023c6 --- /dev/null +++ b/components/TimeLine/component/TaskTools.vue @@ -0,0 +1,177 @@ + + + + + diff --git a/components/TimeLine/component/TimeBox.vue b/components/TimeLine/component/TimeBox.vue new file mode 100644 index 0000000..d1ed8a7 --- /dev/null +++ b/components/TimeLine/component/TimeBox.vue @@ -0,0 +1,131 @@ + + + + + diff --git a/components/TimeLine/component/TimeStatus.vue b/components/TimeLine/component/TimeStatus.vue new file mode 100644 index 0000000..c05fced --- /dev/null +++ b/components/TimeLine/component/TimeStatus.vue @@ -0,0 +1,316 @@ + + + + + diff --git a/components/TimeLine/component/Title.vue b/components/TimeLine/component/Title.vue new file mode 100644 index 0000000..fafec0b --- /dev/null +++ b/components/TimeLine/component/Title.vue @@ -0,0 +1,7 @@ + diff --git a/hooks/project/useGetTasks.js b/hooks/project/useGetTasks.js index 81a276d..9435dbd 100644 --- a/hooks/project/useGetTasks.js +++ b/hooks/project/useGetTasks.js @@ -1,28 +1,32 @@ -import { computed, nextTick } from 'vue'; +import { ref, computed, nextTick } from 'vue'; import { useStore } from 'vuex'; export default function useGetTasks() { + const timeLine = ref(null); const store = useStore(); + const tasks = computed(() => store.state.task.tasks); const showScrollTo = computed(() => store.state.task.showScrollTo); const roleId = computed(() => store.state.role.roleId); - const projectId = computed(() => store.getters['project/projectId']); const timeNode = computed(() => store.state.task.timeNode); const timeUnit = computed(() => store.state.task.timeUnit); + const projectId = computed(() => store.getters['project/projectId']); + const timeGranularity = computed(() => store.getters['task/timeGranularity']); // 初始化 定期任务 async function initPlanTasks() { - // setPrevPlaceholderTasks(); // 向上加载空数据 - // setNextPlaceholderTasks(); // 向下加载空数据 + setPrevPlaceholderTasks(); // 向上加载空数据 + setNextPlaceholderTasks(); // 向下加载空数据 await getInitTasks(); // 获取初始数据 // 滚动到对应位置 - let timer = null; - timer = setInterval(() => { - if (showScrollTo.value) { - clearInterval(timer); - // nextTick(() => timeLine.setScrollPosition()); - } - }, 500); + // let timer = null; + // timer = setInterval(() => { + // if (showScrollTo.value) { + // clearInterval(timer); + // console.log('timeLine',timeLine) + // nextTick(() => timeLine.setScrollPosition()); + // } + // }, 500); } // 切换了 颗粒度 || 角色时候 获取初始定期任务 @@ -127,6 +131,32 @@ export default function useGetTasks() { }); } + // 设置时间轴向上的空数据 + function setPrevPlaceholderTasks() { + store.commit('task/setTopEnd', true); + let startTime = ''; + if (!tasks.value || !tasks.value.length) { + startTime = Date.now(); // 没有任务就应该是时间基准点 + } else { + startTime = tasks[0].planStart - 0; // 有任务就是第一个任务的计划开始时间 + } + const placeholderTasks = uni.$task.setPlaceholderTasks(startTime, true, timeGranularity.value); + store.commit('task/setUpTasks', placeholderTasks); + } + + // 设置时间轴向下的空数据 + function setNextPlaceholderTasks() { + store.commit('task/setBottomEnd', true); + let startTime = ''; + if (!tasks.value || !tasks.value.length) { + startTime = Date.now(); + } else { + startTime = +tasks.value[tasks.value.length - 1].planStart; + } + const initData = uni.$task.setPlaceholderTasks(startTime, false, timeGranularity.value); + store.commit('task/setDownTasks', initData); + } + return { initPlanTasks } diff --git a/pages/project/project.vue b/pages/project/project.vue index d3851f1..7a33141 100644 --- a/pages/project/project.vue +++ b/pages/project/project.vue @@ -35,6 +35,29 @@ const projectId = computed(() => store.getters['project/projectId']); const userId = computed(() => store.getters['user/userId']); const newProjectInfo = computed(() => store.state.task.newProjectInfo); +// 获取可变全局任务 +function getGlobalData() { + const param = { + roleId: roleId.value, + timeNode: timeNode.value, + timeUnit: timeUnit.value, + projectId: projectId.value, + }; + store.dispatch('task/getGlobal', param); +} + +// 清除已有的任务数据 +function clearTasksData() { + // 清空日常任务的数据 + store.commit('task/setPermanents', []); + store.commit('task/setDailyTasks', []); + // 清空定期任务数据 + store.commit('task/clearTasks'); + // 到顶的标志复位 + // 到底的标志复位 + store.commit('task/clearEndFlag'); +} + /** * 当时间基准点发生变化时 * 重新根据时间和角色查询普通日常任务 @@ -90,29 +113,6 @@ watch(newProjectInfo, newValue => { } }); -// 获取可变全局任务 -function getGlobalData() { - const param = { - roleId: roleId.value, - timeNode: timeNode.value, - timeUnit: timeUnit.value, - projectId: projectId.value, - }; - store.dispatch('task/getGlobal', param); -} - -// 清除已有的任务数据 -function clearTasksData() { - // 清空日常任务的数据 - store.commit('task/setPermanents', []); - store.commit('task/setDailyTasks', []); - // 清空定期任务数据 - store.commit('task/clearTasks'); - // 到顶的标志复位 - // 到底的标志复位 - store.commit('task/clearEndFlag'); -} -