|
|
|
@ -4,7 +4,7 @@ |
|
|
|
<div class="task-time flex items-center justify-between"> |
|
|
|
<div class="flex items-center"> |
|
|
|
<PlayCircleOutlined style="font-size: 23px; color: #999999" /> |
|
|
|
<span>{{ dayjs(item.planStart).format('D日 HH:mm') }}</span> |
|
|
|
<span>{{ dayjs(item.planStart).format('M月D日 HH:mm') }}</span> |
|
|
|
</div> |
|
|
|
<div class="task-action"></div> |
|
|
|
</div> |
|
|
|
@ -35,12 +35,12 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { computed, watch } from 'vue'; |
|
|
|
import { computed, watch, onMounted } from 'vue'; |
|
|
|
import { useStore } from 'vuex'; |
|
|
|
import dayjs from 'dayjs'; |
|
|
|
import uTask from 'utils/task'; |
|
|
|
import { PlayCircleOutlined } from '@ant-design/icons-vue'; |
|
|
|
// import { getRegularTask } from 'apis'; |
|
|
|
import { getRegularTask } from 'apis'; |
|
|
|
import { message } from 'ant-design-vue'; |
|
|
|
|
|
|
|
const store = useStore(); |
|
|
|
@ -48,16 +48,22 @@ const project = computed(() => store.state.projects.project); // 项目信息 |
|
|
|
const roleId = computed(() => store.state.role.roleId); // 当前角色 |
|
|
|
// const regularTasks = computed(() => store.state.task.regularTasks); // 定期任务 |
|
|
|
const tasks = computed(() => store.state.task.tasks); // 定期任务 |
|
|
|
const realTasks = computed(() => store.state.task.realTasks); // 真实任务 |
|
|
|
|
|
|
|
const timeNode = computed(() => store.state.task.timeNode); // 时间基准点 |
|
|
|
const timeUnit = computed(() => store.state.task.timeUnit); // 时间颗粒度 |
|
|
|
const currLocationTaskId = computed(() => store.state.task.currLocationTaskId); // 当前任务id |
|
|
|
const businessCode = computed(() => store.state.task.businessCode); // 当前打开的项目的所属服务 |
|
|
|
|
|
|
|
const timeGranularity = computed(() => store.getters['task/timeGranularity']); // 天 |
|
|
|
|
|
|
|
const timeLineType = computed(() => store.state.task.timeLineType); // 时间轴模式 |
|
|
|
const downNextPage = computed(() => store.state.task.downNextPage); // 下一页 |
|
|
|
const upNextPage = computed(() => store.state.task.upNextPage); // 下一页 |
|
|
|
setNextPlaceholderTasks(); // 向下加载空数据 |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
window.addEventListener('scroll', handleScroll, true); |
|
|
|
}); |
|
|
|
|
|
|
|
if (project.value && roleId.value) { |
|
|
|
getTasks({ roleId: roleId.value }); // 根据角色查找定期任务 |
|
|
|
} |
|
|
|
@ -68,6 +74,26 @@ watch([project, roleId], async () => { |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// 向上向下滚动 |
|
|
|
function handleScroll(e) { |
|
|
|
// 变量scrollTop是滚动条滚动时，距离顶部的距离 |
|
|
|
const { scrollTop } = e.target; |
|
|
|
// 变量windowHeight是可视区的高度 |
|
|
|
const windowHeight = e.target.clientHeight; |
|
|
|
// 变量scrollHeight是滚动条的总高度 |
|
|
|
const { scrollHeight } = e.target; |
|
|
|
// 滚动条到底部的条件 |
|
|
|
if (scrollTop + windowHeight === scrollHeight) { |
|
|
|
// 写后台加载数据的函数 |
|
|
|
setNextPlaceholderTasks(); // 向下加载空数据 |
|
|
|
} |
|
|
|
|
|
|
|
// 滚动条到顶部的条件 |
|
|
|
if (scrollTop === 0) { |
|
|
|
setPrevPlaceholderTasks(); // 向上加载空数据 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 根据时间基准点和角色查找定期任务 |
|
|
|
* @param {object} query |
|
|
|
@ -78,12 +104,21 @@ watch([project, roleId], async () => { |
|
|
|
* @param {number} query.queryType 0向上查找 1向下查找(默认) 下查包含自己，上查不包含 |
|
|
|
*/ |
|
|
|
async function getTasks(query) { |
|
|
|
const params = generateGetTaskParam(query); |
|
|
|
// const { url } = store.state.projects.project; |
|
|
|
const params = { param: generateGetTaskParam(query) }; |
|
|
|
const { url } = store.state.projects.project; |
|
|
|
try { |
|
|
|
console.log(params); |
|
|
|
// const data = await getRegularTask(params, url); |
|
|
|
// store.commit('task/setRegularTasks', data); |
|
|
|
const data = await getRegularTask(params, url); |
|
|
|
store.commit('task/setRegularTasks', data); |
|
|
|
|
|
|
|
if (params.param.queryType === 0) { |
|
|
|
store.commit('task/setUpRealTasks', data.list); |
|
|
|
store.commit('task/setUpNextPage', data.nextPage); // 下一页 |
|
|
|
} else { |
|
|
|
store.commit('task/setDownRealTasks', data.list); |
|
|
|
store.commit('task/setDownNextPage', data.nextPage); // 下一页 |
|
|
|
} |
|
|
|
|
|
|
|
dataRender(params.param); |
|
|
|
} catch (error) { |
|
|
|
message.info(error); |
|
|
|
throw new Error(error); |
|
|
|
@ -108,22 +143,156 @@ function generateGetTaskParam(query) { |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
// 任务数据处理 |
|
|
|
function dataRender(params) { |
|
|
|
timeLineType.value === 1 ? renderScaleTask(params) : renderConTask(params); |
|
|
|
} |
|
|
|
|
|
|
|
// 时间轴模式 |
|
|
|
async function renderScaleTask(query) { |
|
|
|
const params = generateGetTaskParam(query); |
|
|
|
// 正待处理的真实数据 |
|
|
|
const centerData = (await showTaskTime(params, realTasks.value, tasks.value)) || []; |
|
|
|
console.log('centerData', centerData); |
|
|
|
await handleTasksData(params, centerData, realTasks.value); |
|
|
|
} |
|
|
|
|
|
|
|
// 内容模式 |
|
|
|
function renderConTask(params) { |
|
|
|
console.log(params); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 正待处理的真实数据 |
|
|
|
*/ |
|
|
|
async function showTaskTime(params, reals, showTasks) { |
|
|
|
// 初始值 -- 显示任务中没有真实任务数据 |
|
|
|
let centerData = []; |
|
|
|
if (reals.length > params.pageSize && params.queryType === 0) { |
|
|
|
centerData = reals.slice(reals.length - params.pageSize); |
|
|
|
} else { |
|
|
|
centerData = reals.slice(0, params.pageSize); |
|
|
|
} |
|
|
|
|
|
|
|
// 显示任务中有真实任务数据 |
|
|
|
const firstDetailIndex = showTasks.findIndex(task => task.detailId); // 显示任务中第一个真实任务的下标 |
|
|
|
if (firstDetailIndex > -1) { |
|
|
|
const firstId = showTasks[firstDetailIndex].id; // 显示任务中第一个真实任务的id |
|
|
|
|
|
|
|
// 显示任务中最后一个真实任务的下标 |
|
|
|
let lastDetailIndex = -1; |
|
|
|
showTasks.forEach((item, index) => { |
|
|
|
if (item.detailId) { |
|
|
|
lastDetailIndex = index; |
|
|
|
} |
|
|
|
}); |
|
|
|
const lastId = showTasks[lastDetailIndex].id; // 显示任务中最后一个真实任务的id |
|
|
|
|
|
|
|
realTasks.forEach((item, index) => { |
|
|
|
if (params.queryType === 1 && item.id === lastId) { |
|
|
|
centerData = realTasks.slice(index + 1, index + 1 + params.pageSize); |
|
|
|
} else if (params.queryType === 0 && item.id === firstId) { |
|
|
|
centerData = index >= params.pageSize ? realTasks.slice(index - params.pageSize, index) : realTasks.slice(0, index); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
return centerData; |
|
|
|
} |
|
|
|
|
|
|
|
// 处理需要显示的数据 |
|
|
|
async function handleTasksData(params, centerData) { |
|
|
|
const showTasks = tasks.value; |
|
|
|
// 向上查询 显示的数据第一个数据的时间 |
|
|
|
const firstTime = showTasks.length > 0 ? showTasks[0].planStart : new Date().getTime(); |
|
|
|
const upTargetTime = dayjs(+firstTime).subtract(params.pageSize, timeGranularity.value); // 目标时间 |
|
|
|
// 向下查询 显示的数据最后一个数据的时间 |
|
|
|
const lastTime = |
|
|
|
showTasks.length > 0 ? dayjs(+showTasks[showTasks.length - 1].planStart).add(1, timeGranularity.value) : new Date().getTime(); |
|
|
|
const downTargetTime = dayjs(+lastTime).add(params.pageSize - 1, timeGranularity.value); // 目标时间 |
|
|
|
const nextPage = params.queryType === 0 ? upNextPage.value : downNextPage.value; // 下一页的值 |
|
|
|
|
|
|
|
if (centerData.length) { |
|
|
|
const arr = []; |
|
|
|
centerData.forEach(v => { |
|
|
|
// const centerTime = ''; // 中间数据+/-15后的数据 |
|
|
|
let isExceed = false; // 时间跨度是否大于15 |
|
|
|
|
|
|
|
if (params.queryType) { |
|
|
|
isExceed = dayjs(+downTargetTime).isAfter(+v.planStart, timeGranularity.value); |
|
|
|
} else { |
|
|
|
isExceed = dayjs(+upTargetTime).isBefore(+v.planStart, timeGranularity.value); |
|
|
|
} |
|
|
|
|
|
|
|
if (isExceed) { |
|
|
|
arr.push(v); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
if (arr.length) { |
|
|
|
if (arr.length === centerData.length && centerData.length < params.pageSize && nextPage > 0) { |
|
|
|
getTasks({ pageNum: nextPage, queryType: params.queryType }); |
|
|
|
} else { |
|
|
|
let newArr = []; |
|
|
|
let breakTime = ''; // 循环结束时间 |
|
|
|
let continueTime = ''; // 第一个数据的时间 |
|
|
|
// 循环开始时间 |
|
|
|
const currTime = params.queryType === 0 ? upTargetTime : lastTime; |
|
|
|
|
|
|
|
// 符合条件的数据 < centerData的数据 |
|
|
|
// 或者 |
|
|
|
// centerData的数据全部符合条件，但是 < 15，而且没有下一页，不能向下查 |
|
|
|
// 数据需要补齐15天的刻度 |
|
|
|
// 所以循环长度为params.pageSize |
|
|
|
|
|
|
|
// centerData的数据全部显示，且数量 = 15 |
|
|
|
// 需要补齐数据中间的空刻度 |
|
|
|
// 循环长度为 结束时间到开始时间的差 |
|
|
|
// 当循环到的时间 = 数据最后一条的时间，则跳出循环 |
|
|
|
if (arr.length === centerData.length && centerData.length === params.pageSize) { |
|
|
|
if (params.queryType === 0) { |
|
|
|
continueTime = arr[0].planStart; |
|
|
|
} else { |
|
|
|
breakTime = arr[arr.length - 1].planStart; |
|
|
|
} |
|
|
|
} |
|
|
|
console.log(currTime, breakTime, continueTime); |
|
|
|
|
|
|
|
// 向上第一个任务时间，向下最后一个任务时间 |
|
|
|
const sameTime = params.queryType === 0 ? firstTime : dayjs(+lastTime).subtract(1, timeGranularity.value); |
|
|
|
// 符合条件的真实数据跟显示任务有重复时间的数据 |
|
|
|
const firstArr = arr.filter(item => dayjs(+item.planStart).isSame(+sameTime, timeGranularity.value)); |
|
|
|
console.log(sameTime, arr, newArr); |
|
|
|
if (firstArr.length && params.queryType === 1) { |
|
|
|
newArr = [...newArr, ...firstArr]; |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
params.queryType === 0 ? setPrevPlaceholderTasks(params) : setNextPlaceholderTasks(params); |
|
|
|
} |
|
|
|
} else if (nextPage > 0) { |
|
|
|
getTasks({ pageNum: nextPage, queryType: params.queryType }); |
|
|
|
} else { |
|
|
|
params.queryType === 0 ? setPrevPlaceholderTasks(params) : setNextPlaceholderTasks(params); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 设置时间轴向上的空数据 |
|
|
|
// function setPrevPlaceholderTasks() { |
|
|
|
// store.commit('task/setTopEnd', true); |
|
|
|
// let startTime = ''; |
|
|
|
// if (!tasks.value || !tasks.value.length) { |
|
|
|
// startTime = Date.now(); // 没有任务就应该是时间基准点 |
|
|
|
// } else { |
|
|
|
// startTime = tasks.value[0].planStart - 0; // 有任务就是第一个任务的计划开始时间 |
|
|
|
// } |
|
|
|
// const placeholderTasks = uTask.setPlaceholderTasks(startTime, true, timeGranularity.value); |
|
|
|
// // store.commit('task/setCurrUpTimeNode', startTime); |
|
|
|
// store.commit('task/setUpTasks', placeholderTasks); |
|
|
|
// } |
|
|
|
function setPrevPlaceholderTasks() { |
|
|
|
store.commit('task/setTopEnd', true); |
|
|
|
let startTime = ''; |
|
|
|
if (!tasks.value || !tasks.value.length) { |
|
|
|
startTime = Date.now(); // 没有任务就应该是时间基准点 |
|
|
|
} else { |
|
|
|
startTime = tasks.value[0].planStart - 0; // 有任务就是第一个任务的计划开始时间 |
|
|
|
} |
|
|
|
const placeholderTasks = uTask.setPlaceholderTasks(startTime, true, timeGranularity.value); |
|
|
|
// store.commit('task/setCurrUpTimeNode', startTime); |
|
|
|
store.commit('task/setUpTasks', placeholderTasks); |
|
|
|
} |
|
|
|
|
|
|
|
// 设置时间轴向下的空数据 |
|
|
|
function setNextPlaceholderTasks(params) { |
|
|
|
function setNextPlaceholderTasks() { |
|
|
|
// store.commit('task/setBottomEnd', true); |
|
|
|
let startTime = ''; |
|
|
|
if (!tasks.value || !tasks.value.length) { |
|
|
|
@ -135,7 +304,6 @@ function setNextPlaceholderTasks(params) { |
|
|
|
} |
|
|
|
|
|
|
|
const initData = uTask.setPlaceholderTasks(startTime, false, timeGranularity.value); |
|
|
|
console.log('222222222', params); |
|
|
|
// store.commit('task/setCurrDownTimeNode', startTime); |
|
|
|
store.commit('task/setDownTasks', initData); |
|
|
|
} |
|
|
|
@ -148,7 +316,7 @@ function toDetail(item) { |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.task-list { |
|
|
|
padding: 0 16px 50px; |
|
|
|
padding: 0 16px; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
|
|
|
|
|
