ccsens_tall
/
tall4-pc
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 时间轴定期任务

text-draggable
xuesinan 4 years ago
parent
142eb8a24d
commit
352056f3ba
6 changed files with 119 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .eslintrc.js
  2. 7
      src/components/tall/center/Global.vue
  3. 10
      src/components/tall/center/Index.vue
  4. 163
      src/components/tall/center/RegularTask.vue
  5. 10
      src/store/tall/task/index.js
  6. 5
      src/utils/task.js

1
.eslintrc.js
View File

@ -10,6 +10,7 @@ module.exports = {
},
plugins: ['vue'],
rules: {
'no-loop-func': 'off',
'import/no-unresolved': 0,
'import/extensions': 0,
'import/no-extraneous-dependencies': 0,

7
src/components/tall/center/Global.vue
View File

@ -6,7 +6,7 @@
</div>
<template v-if="globals.length > 0">
<div class="global-task cursor-pointer" v-for="(item, index) in globals" :key="index" @click="toDetail(item)">
<div class="global-task cursor-pointer" v-for="(item, index) in globals" :key="index">
<template v-if="item.plugins && item.plugins.length">
<div v-for="(pluginArr, i) in item.plugins" :key="i">
<div class="pb-3" v-if="pluginArr.length">
@ -84,11 +84,6 @@ async function getGlobalData(id) {
}
}
function toDetail(item) {
// store.commit('task/setTaskDetail', item);
console.log(item);
}
function toWorkbench() {}
</script>

10
src/components/tall/center/Index.vue
View File

@ -71,7 +71,7 @@ import { ReloadOutlined, MoreOutlined } from '@ant-design/icons-vue';
const store = useStore();
const project = computed(() => store.state.projects.project); // 项目信息
const sessionTasks = sessionStorage.getItem('regularTasks'); // 定期任务缓存
// const sessionTasks = sessionStorage.getItem('regularTasks'); // 定期任务缓存
const globals = computed(() => store.getters['task/globals']); // 日常任务
const globalRef = ref(null);
@ -86,10 +86,10 @@ watch(globals, () => {
console.log('globalHeight', globalHeight.value, clientHeight.value, tasksHeight.value);
});
if (sessionTasks) {
const arr = JSON.parse(sessionTasks);
store.commit('task/setRegularTasks', arr);
}
// if (sessionTasks) {
// const arr = JSON.parse(sessionTasks);
// store.commit('task/setRegularTasks', arr);
// }
// watch(project, async () => {
// if (project.value.id) {

163
src/components/tall/center/RegularTask.vue
View File

@ -4,29 +4,41 @@
<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('M月D日 HH:mm') }}</span>
<span v-if="item.process === 4">{{ dayjs(+item.planStart).format('M月D日') }}</span>
<span v-else>{{ dayjs(+item.planStart).format('M月D日 HH:mm') }}</span>
</div>
<div class="task-action"></div>
</div>
<div class="task-info">
<div>
<div class="task-card">
<div class="task-name cursor-pointer" @click="toDetail(item)">
<template v-for="v in item.plugins">
<template v-if="v[0].pluginId == 1">{{ item.name }}</template>
<div class="task-card-null" v-if="item.process === 4"></div>
<div class="task-card" v-else>
<div class="task-name cursor-pointer">
<template v-if="item.plugins && item.plugins.length">
<div v-for="(pluginArr, i) in item.plugins" :key="i">
<div :class="{ 'pt-3': i > 0 }" v-if="pluginArr.length">
<Plugin
class="task-card-plugin"
v-for="plugin in pluginArr"
:key="plugin.pluginTaskId"
:plugin-id="plugin.pluginId"
:plugin-task-id="plugin.pluginTaskId"
:business-plugin-id="plugin.businessPluginId"
:plugin-info="plugin"
:param="plugin.param"
:style-type="plugin.styleType || 0"
:task="item"
/>
</div>
</div>
</template>
</div>
<div class="task-con" v-if="item.sonList && item.sonList.length > 0">
<div v-for="(val, key) in item.sonList" :key="key">
<!-- <a-checkbox>{{ val.name }}</a-checkbox> -->
<span class="son-task-name cursor-pointer" @click.stop="toSonDetail(item, val.detailId)">{{ val.name }}</span>
<div v-else class="">
<Plugin plugin-id="1" :task="item" />
</div>
</div>
<!-- <div class="open-icon" v-if="item.sonList" @click="openCard">
<img />
</div> -->
</div>
</div>
</div>
@ -40,6 +52,7 @@ import { useStore } from 'vuex';
import dayjs from 'dayjs';
import uTask from 'utils/task';
import { PlayCircleOutlined } from '@ant-design/icons-vue';
import { flatten } from 'lodash';
import { getRegularTask } from 'apis';
import { message } from 'ant-design-vue';
@ -58,7 +71,7 @@ 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(); // 向下加载空数据
// setNextPlaceholderTasks(); // 向下加载空数据
onMounted(() => {
window.addEventListener('scroll', handleScroll, true);
@ -85,12 +98,18 @@ function handleScroll(e) {
// 滚动条到底部的条件
if (scrollTop + windowHeight === scrollHeight) {
// 写后台加载数据的函数
setNextPlaceholderTasks(); // 向下加载空数据
console.warn('滚动到底部: ');
// setNextPlaceholderTasks(); // 向下加载空数据
const params = { pageNum: downNextPage.value, queryType: 1, triggerType: 0 };
dataRender(params);
}
// 滚动条到顶部的条件
if (scrollTop === 0) {
setPrevPlaceholderTasks(); // 向上加载空数据
console.warn('滚动到顶部: ');
// setPrevPlaceholderTasks(); // 向上加载空数据
const params = { pageNum: upNextPage.value, queryType: 0, triggerType: 0 };
dataRender(params);
}
}
@ -108,7 +127,7 @@ async function getTasks(query) {
const { url } = store.state.projects.project;
try {
const data = await getRegularTask(params, url);
store.commit('task/setRegularTasks', data);
// store.commit('task/setRegularTasks', data);
if (params.param.queryType === 0) {
store.commit('task/setUpRealTasks', data.list);
@ -136,7 +155,7 @@ function generateGetTaskParam(query) {
timeUnit: query.timeUnit || timeUnit.value,
queryType: query.queryType === 0 ? 0 : 1,
pageNum: query.pageNum || 1,
pageSize: query.pageSize || 10,
pageSize: query.pageSize || uTask.pageTaskCount,
taskId: query.taskId || currLocationTaskId.value,
businessCode: query.businessCode || businessCode.value,
triggerType: query.triggerType || 1,
@ -153,7 +172,6 @@ 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);
}
@ -188,11 +206,11 @@ async function showTaskTime(params, reals, showTasks) {
});
const lastId = showTasks[lastDetailIndex].id; // 显示任务中最后一个真实任务的id
realTasks.forEach((item, index) => {
reals.forEach((item, index) => {
if (params.queryType === 1 && item.id === lastId) {
centerData = realTasks.slice(index + 1, index + 1 + params.pageSize);
centerData = reals.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);
centerData = index >= params.pageSize ? reals.slice(index - params.pageSize, index) : reals.slice(0, index);
}
});
}
@ -202,11 +220,11 @@ async function showTaskTime(params, reals, showTasks) {
// 处理需要显示的数据
async function handleTasksData(params, centerData) {
const showTasks = tasks.value;
let showTasks = tasks.value;
// 向上查询 显示的数据第一个数据的时间
const firstTime = showTasks.length > 0 ? showTasks[0].planStart : new Date().getTime();
const upTargetTime = dayjs(+firstTime).subtract(params.pageSize, timeGranularity.value); // 目标时间
// 向下查询 显示的数据最后一个数据的时间
// 向下查询 下一次查询的时间：显示的数据最后一个数据的时间+1 || 当前时间
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); // 目标时间
@ -215,13 +233,17 @@ async function handleTasksData(params, centerData) {
if (centerData.length) {
const arr = [];
centerData.forEach(v => {
// const centerTime = ''; // 中间数据+/-15后的数据
let isExceed = false; // 时间跨度是否大于15
let isLimit = false;
let isExceed = false; // 时间跨度是否大于10
if (params.queryType) {
isExceed = dayjs(+downTargetTime).isAfter(+v.planStart, timeGranularity.value);
isLimit =
dayjs(+lastTime).isBefore(+v.planStart, timeGranularity.value) || dayjs(+lastTime).isSame(+v.planStart, timeGranularity.value);
isExceed = isLimit && dayjs(+downTargetTime).isAfter(+v.planStart, timeGranularity.value);
} else {
isExceed = dayjs(+upTargetTime).isBefore(+v.planStart, timeGranularity.value);
isLimit =
dayjs(+firstTime).isAfter(+v.planStart, timeGranularity.value) || dayjs(+firstTime).isSame(+v.planStart, timeGranularity.value);
isExceed = isLimit && dayjs(+upTargetTime).isBefore(+v.planStart, timeGranularity.value);
}
if (isExceed) {
@ -233,39 +255,61 @@ async function handleTasksData(params, centerData) {
if (arr.length === centerData.length && centerData.length < params.pageSize && nextPage > 0) {
getTasks({ pageNum: nextPage, queryType: params.queryType });
} else {
/**
* 符合条件的数据 < centerData的数据
* 或者
* centerData的数据全部符合条件，但是 < 10，而且没有下一页，不能向下查
* 数据需要补齐10天的刻度
* 所以循环长度为params.pageSize
*/
let newArr = [];
let breakTime = ''; // 循环结束时间
let continueTime = ''; // 第一个数据的时间
// 循环开始时间
const currTime = params.queryType === 0 ? upTargetTime : lastTime;
// 符合条件的数据 < centerData的数据
// 或者
// centerData的数据全部符合条件，但是 < 15，而且没有下一页，不能向下查
// 数据需要补齐15天的刻度
// 所以循环长度为params.pageSize
// centerData的数据全部显示，且数量 = 15
// 需要补齐数据中间的空刻度
// 循环长度为 结束时间到开始时间的差
// 当循环到的时间 = 数据最后一条的时间，则跳出循环
let tempLen = -1; // 判断未显示的数据长度
let currTime = params.queryType === 0 ? upTargetTime : lastTime; // 循环开始时间
// centerData的数据全部显示，且数量 = 10时，需要补齐数据中间的空刻度，当循环到的时间 = 数据最后一条的时间，则跳出循环
if (arr.length === centerData.length && centerData.length === params.pageSize) {
if (params.queryType === 0) {
continueTime = arr[0].planStart;
} else {
breakTime = arr[arr.length - 1].planStart;
}
tempLen = params.pageSize;
currTime = arr[0].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];
// 已显示的任务中与符合条件的真实数据重合的时间点是否有数据
const repeatArr = showTasks.filter(item => dayjs(+item.planStart).isSame(+sameTime, timeGranularity.value));
// 去掉重复的空时间刻度
if (repeatArr.length === 1 && !repeatArr[0].detailId) {
showTasks = params.queryType === 0 ? showTasks.slice(1) : showTasks.slice(0, showTasks.length - 2);
}
if (firstArr.length) {
newArr = params.queryType === 0 ? [...firstArr, ...newArr] : [...newArr, ...firstArr];
}
for (let i = 0; i < params.pageSize; i++) {
const termArr = arr.filter(item => dayjs(+item.planStart).isSame(+currTime, timeGranularity.value));
if (termArr.length === 0) {
let newTasks = [];
newTasks = uTask.setPlaceholderTasks(+currTime, false, timeGranularity.value, 1);
newArr = [...newArr, ...newTasks];
} else {
newArr = [...newArr, ...termArr];
if (tempLen) tempLen--;
}
if (tempLen === 0) break;
// 向下查询：未到截止时间 或 数据<params.pageSize，需要补齐刻度
currTime = dayjs(+currTime).add(1, timeGranularity.value);
}
showTasks = params.queryType === 0 ? [...newArr, ...showTasks] : [...showTasks, ...newArr];
showTasks = flatten(showTasks); // 1维拍平
store.commit('task/clearTasks');
params.queryType === 0 ? store.commit('task/setUpTasks', showTasks) : store.commit('task/setDownTasks', showTasks);
}
} else {
params.queryType === 0 ? setPrevPlaceholderTasks(params) : setNextPlaceholderTasks(params);
@ -307,11 +351,6 @@ function setNextPlaceholderTasks() {
// store.commit('task/setCurrDownTimeNode', startTime);
store.commit('task/setDownTasks', initData);
}
function toDetail(item) {
console.log(item);
// store.commit('task/setTaskDetail', item);
}
</script>
<style scoped>
@ -346,9 +385,13 @@ function toDetail(item) {
border-left: 1px solid #d2d2d2;
}
.task-info .task-card {
padding: 16px;
border-radius: 8px;
.task-card-null {
height: 20px;
}
.task-card-plugin {
padding: 12px;
border-radius: 10px;
-moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);

10
src/store/tall/task/index.js
View File

@ -27,7 +27,7 @@ export default {
newProjectInfo: {},
showScrollTo: false, // 是否可以设置时间轴自动滚动的位置
regularTasks: [], // 定期任务
// regularTasks: [], // 定期任务
realTasks: [], // 真实定期任务
currLocationTaskId: '', // 前需要定位到的任务id
businessCode: '', // 当前打开的项目的所属服务
@ -300,10 +300,10 @@ export default {
* @param {object} state
* @param {array} tasks 服务端查询到的定期任务书籍
*/
setRegularTasks(state, tasks) {
state.regularTasks = tasks || [];
// sessionStorage.setItem('regularTasks', JSON.stringify(tasks));
},
// setRegularTasks(state, tasks) {
// state.regularTasks = tasks || [];
// // sessionStorage.setItem('regularTasks', JSON.stringify(tasks));
// },
/**
* 真实定期任务

5
src/utils/task.js
View File

@ -1,5 +1,7 @@
import dayjs from 'dayjs';
const pageTaskCount = 15;
/**
* 设置时间轴空数据
* @param {number} startTime
@ -9,7 +11,7 @@ import dayjs from 'dayjs';
*/
const setPlaceholderTasks = (startTime, isUp, timeGranularity, pageCount) => {
const result = [];
pageCount = pageCount || 10;
pageCount = pageCount || pageTaskCount;
for (let i = 0; i < pageCount; i++) {
const delta = isUp ? `-${i + 1}` - 0 : i;
@ -59,4 +61,5 @@ const computeFillPlaceholderTaskCount = obj => {
export default {
setPlaceholderTasks,
computeFillPlaceholderTaskCount,
pageTaskCount,
};

Write Preview
Loading…
Cancel
Save