wally
/
tall-mui-3-project
forked from ccsens_fe/tall-mui-3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

refactor: 重构时间刻度渲染任务 

解决了时间刻度未替换的问题；解决重复渲染的问题
pull/1/head
wally 4 years ago
parent
d64131272c
commit
5cf7d08066
9 changed files with 233 additions and 172 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. 3
      CHANGELOG.md
  2. 2
      src/components/TimeLine/TimeLine.vue
  3. 1
      src/config/app.js
  4. 2
      src/config/task.js
  5. 331
      src/pages/project/project.vue
  6. 6
      src/store/task/mutations.js
  7. 24
      src/test/util/task.test.js
  8. 2
      src/utils/tall.js
  9. 34
      src/utils/task.js

3
CHANGELOG.md
View File

@ -1,4 +1,4 @@
# 0.1.0 (2021-08-26)
# 0.1.0 (2021-08-27)
### 🌟 新功能
范围|描述|commitId
@ -142,6 +142,7 @@
- | 角色栏修改 | 19228d6
- | 解决时间轴报错 | da1eece
- | 设置时间轴自动滚动到当前位置 | a3474f8
- | 调试定期任务bug；不能合并使用 | d641312
- | 跳转详情页返回路径修改 | c5e17c0
- | 骨架屏替换 | e9fdd71

2
src/components/TimeLine/TimeLine.vue
View File

@ -35,7 +35,7 @@ export default {
computed: {
...mapState('role', ['visibleRoles']),
...mapState('task', ['scrollTop', 'showTips', 'tasks', 'topEnd', 'bottomEnd', 'showSkeleton', 'timeNode', 'scrollToTaskId']),
...mapState('task', ['scrollTop', 'tasks', 'topEnd', 'bottomEnd', 'showSkeleton', 'timeNode', 'scrollToTaskId']),
...mapGetters('task', ['timeGranularity']),
},

1
src/config/app.js
View File

@ -1,3 +1,4 @@
// TODO: 环境变量设置
const version = '3.0.0';
export default {

2
src/config/task.js
View File

@ -0,0 +1,2 @@
// 每页加载颗粒度的个数
export default { pageCount: 10 };

331
src/pages/project/project.vue
View File

@ -18,7 +18,8 @@
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
import { setPlaceholderTasks } from '@/utils/task';
import { setPlaceholderTasks, computeFillPlaceholderTaskCount } from '@/utils/task';
import { flatten } from 'lodash';
export default {
data() {
@ -97,125 +98,45 @@ export default {
'setBottomEnd',
]),
/**
* 初始化
* @param {object | null} options
*/
init(options) {
if (!this.token) {
// 不论有没有token都直接从userId获取token
// token有过期时间 从本地获取可能是过期 干脆直接从userId获取
if (!options || !options.u) {
this.$t.ui.showToast('缺少用户信息参数'); // 参数里没有u (userId)提示
} else {
this.getToken(options.u);
}
}
// 参数里有项目名称 就设置标题里的项目名称
options && options.pname && this.setProjectName(options.pname);
if (!options || !options.p) {
this.$t.ui.showToast('缺少项目信息参数'); // 没有项目id参数
} else {
this.getProjectById({ projectId: options.p }); // 根据项目id获取项目信息
}
},
/**
* 通过项目id获取项目信息
* @param {object} params 提交的参数
*/
async getProjectById(params) {
try {
const data = await uni.$u.api.findProjectById(params);
this.setProject(data);
// 根据项目id获取角色列表
this.getRoles(params);
} catch (error) {
console.log('error: ', error || '获取项目信息失败');
}
},
/**
* 通过项目id获取角色信息
* @param {string} projectId
* @param {object} params 提交的参数
*/
getRoles(params) {
this.$t.$q.findShowRole(params, (err, data) => {
if (err) {
console.error('err: ', err || '获取角色信息失败');
} else {
this.setInvisibleRoles(data ? data.invisibleList : []);
this.setVisibleRoles(data ? data.visibleList : []);
this.setInitialRoleId(data ? data.visibleList : []);
}
});
},
// 清除已有的任务数据
clearTasksData() {
// 清空日常任务的数据
this.setPermanents([]);
this.setDailyTasks([]);
// 清空定期任务数据
this.clearTasks();
// 到顶的标志复位
// 到底的标志复位
this.clearEndFlag();
},
// 初始化 时间轴
// 初始化 定期任务
async initPlanTasks() {
this.setPrevTasks(); // 向上加载空数据
this.setNextTasks(); // 向下加载空数据
this.setPrevPlaceholderTasks(); // 向上加载空数据
this.setNextPlaceholderTasks(); // 向下加载空数据
this.$nextTick(() => this.$refs.timeLine.setScrollPosition()); // 滚动到对应位置
await this.getInitTasks();
await this.getInitTasks(); // 获取初始数据
this.$nextTick(() => this.$refs.timeLine.setScrollPosition()); // 滚动到对应位置
},
// 切换了 颗粒度 || 角色时候 获取初始定期任务
getInitTasks() {
// 预加载 上下的定期任务
function fn(that) {
function preloadFn(that) {
const detailId = that.tasks.findIndex(task => task.detailId);
console.log('detailId: ', detailId);
if (detailId !== -1) {
// 只要有1个真实的任务 就预加载上下周期的任务
const { pageCount } = that.$t.task;
that.$nextTick(() => {
// 向上拿数据
const { tasks, timeGranularity } = that;
that.getTasks({ timeNode: +tasks[0].planStart, queryType: 0, queryNum: 6 });
that.getTasks({ timeNode: +tasks[0].planStart, queryType: 0, queryNum: pageCount });
// 向下拿数据
const nextQueryTime = +that.$t.time.add(+tasks[tasks.length - 1].planStart, 1, timeGranularity);
that.getTasks({ timeNode: nextQueryTime, queryType: 1, queryNum: 6 });
that.getTasks({ timeNode: nextQueryTime, queryType: 1, queryNum: pageCount });
});
} else {
// 没有任务 上下显示时间刻度
// 向上加载
// that.setPrevTasks();
// that.setPrevPlaceholderTasks();
// // 向下加载
// that.setNextTasks();
// that.setNextPlaceholderTasks();
}
}
// 根据时间基准点和角色查找定期任务
this.getTasks({ queryType: 0 }); // 向上获取定期任务数据
// 根据项目id获取角色列表
this.getTasks({ queryType: 1 }, fn); // 向下获取定期任务数据
},
// 设置 初始显示角色信息
setInitialRoleId(visibleList) {
if (!visibleList || !visibleList.length) return;
const index = visibleList.findIndex(item => +item.mine === 1);
const currentRole = index > 0 ? visibleList[index] : visibleList[0];
const storageRoleId = this.$t.storage.getStorageSync('roleId');
const currentRoleId = storageRoleId ? storageRoleId : currentRole ? currentRole.id : '';
this.setRoleId(currentRoleId);
// 清空storage
this.$t.storage.setStorageSync('roleId', '');
this.getTasks({ queryType: 1 }, preloadFn); // 向下获取定期任务数据
},
/**
@ -225,19 +146,11 @@ export default {
* @param {string} query.timeNode 时间基准点 默认当前
* @param {string} query.timeUnit 时间颗粒度 默认天
* @param {string} query.queryNum 查找颗粒度数量 默认3个
* @param {string} query.queryType 0向上查找 1向下查找(默认) 下查包含自己，上查不包含
* @param {number} query.queryType 0向上查找 1向下查找(默认) 下查包含自己，上查不包含
*/
getTasks(query, fn) {
this.setShowSkeleton(true);
const { roleId, timeNode, timeUnit, projectId } = this;
const params = {
roleId,
timeNode: query.timeNode || timeNode,
timeUnit: query.timeUnit || timeUnit,
queryNum: query.queryNum || 3,
queryType: query.queryType,
projectId,
};
const params = this.generateGetTaskParam(query);
this.$t.$q.getRegularTask(params, (err, data) => {
this.setShowSkeleton(false);
@ -245,14 +158,17 @@ export default {
// TODO: 提示错误
console.error('err: ', err);
} else {
// 0 -> 向上 1 -> 向下
// 有数据用数据替换刻度
// 没有数据 继续加载刻度
if (data && data.length) {
this.replacePrevData(data, params.queryType);
} else {
params.queryType === 0 ? this.setPrevTasks() : this.setNextTasks();
}
// else {
// TODO: 0 -> 向上 1 -> 向下
// params.queryType === 0 ? this.setPrevPlaceholderTasks() : this.setNextPlaceholderTasks();
// }
if (this.tasks.length && fn) {
fn(this);
}
@ -260,15 +176,24 @@ export default {
});
},
// 获取可变全局任务
getGlobalData() {
/**
* 生成getTasks所用的参数
* @param {object} query getTasks传递的参数
*/
generateGetTaskParam(query) {
const { roleId, timeNode, timeUnit, projectId } = this;
const param = { roleId, timeNode, timeUnit, projectId };
this.getGlobal(param);
return {
roleId,
timeNode: query.timeNode || timeNode,
timeUnit: query.timeUnit || timeUnit,
queryNum: query.queryNum || 3,
queryType: query.queryType,
projectId,
};
},
// 设置时间轴向上的空数据
setPrevTasks() {
setPrevPlaceholderTasks() {
this.setTopEnd(true);
let startTime = '';
const { tasks } = this;
@ -282,72 +207,146 @@ export default {
},
// 设置时间轴向下的空数据
setNextTasks() {
setNextPlaceholderTasks() {
this.setBottomEnd(true);
let sTime = '';
let startTime = '';
if (!this.tasks || !this.tasks.length) {
sTime = +new Date().getTime();
startTime = Date.now();
} else {
sTime = +this.tasks[this.tasks.length - 1].planStart - 0;
startTime = +this.tasks[this.tasks.length - 1].planStart;
}
const initData = setPlaceholderTasks(sTime, false, this.timeGranularity);
const initData = setPlaceholderTasks(startTime, false, this.timeGranularity);
this.setDownTasks(initData);
},
// 筛选相同的时间替换数据
/**
* 用拿到的新数据 替换 时间刻度/旧数据
* 先对比 新旧数据的 始末时间 补齐刻度
* 再遍历对比 用任务替换刻度
* @param {array} data 服务端返回的新数据 上边已经处理过空值
* @param {number} type 0 -> 向上 1->向下
*/
replacePrevData(data, type) {
let newTasks = [...this.tasks];
let newDate = this.$u.deepClone(data);
console.log('newDate: ', newDate);
if (newDate && newDate.length) {
for (let i = 0; i < newTasks.length; i++) {
// const task = newTasks[i];
let arr = [];
for (let j = 0; j < newDate.length; j++) {
const item = newDate[j];
if (newTasks[i].id === item.id) {
console.log('j', j, i);
newTasks[i] = item;
break;
}
// 查找有没有超出时间刻度的时间
if (+newTasks[0].planStart > +newDate[0].planStart) {
this.setPrevTasks();
newTasks = [...this.tasks];
i--;
break;
} else if (+newDate[newDate.length - 1].planStart > +newTasks[newTasks.length - 1].planStart) {
this.setNextTasks();
newTasks = [...this.tasks];
i--;
break;
} else {
// 筛选相同的时间替换数据
const taskItem = this.$t.time.isSame(+newTasks[i].planStart, +item.planStart, this.timeGranularity);
if (taskItem) {
arr.push(item);
if (newTasks[i].detailId) {
newTasks.splice(i, 0, item);
} else {
if (arr.length === 1) {
newTasks.splice(i, 1, item);
}
if (arr.length > 1) {
newTasks.splice(i, 0, item);
}
}
i++;
}
}
}
const { timeGranularity } = this;
let oldTasks = this.fillPlaceholderTask({ tasks: this.tasks, data, timeGranularity }); // 已经上下补齐时间刻度的
// 遍历对比 用任务替换刻度
// TODO: tasks越来越多 遍历越来越多 需要优化
oldTasks.forEach((taskItem, index) => {
const arr = data.filter(dataItem => this.$moment(+dataItem.planStart).isSame(+taskItem.planStart, timeGranularity));
if (arr && arr.length) {
oldTasks.splice(index, 1, [...arr]); // 这里加入的数据是array类型的, [{},{},[],[],{}]
}
});
oldTasks = flatten(oldTasks); // 1维拍平
this.clearTasks(); // setUpTasks setUpTasks 的限制 需要清空
type === 0 ? this.setUpTasks(oldTasks) : this.setUpTasks(oldTasks);
},
/**
* 超出旧数据上、下限 补齐时间刻度到新数据的起始时间颗粒度
*/
fillPlaceholderTask({ tasks, data, timeGranularity }) {
const { prev, next } = computeFillPlaceholderTaskCount({ tasks, data, timeGranularity });
if (prev) {
const newTasks = setPlaceholderTasks(+tasks[0].planStart, true, timeGranularity, prev);
this.setUpTasks(newTasks);
}
if (next) {
const newTasks = setPlaceholderTasks(+tasks[tasks.length - 1].planStart, false, timeGranularity, next);
this.setDownTasks(newTasks);
}
return this.tasks;
},
/**
* 初始化
* @param {object | null} options
*/
init(options) {
if (!this.token) {
// 不论有没有token都直接从userId获取token
// token有过期时间 从本地获取可能是过期 干脆直接从userId获取
if (!options || !options.u) {
this.$t.ui.showToast('缺少用户信息参数'); // 参数里没有u (userId)提示
} else {
this.getToken(options.u);
}
}
// 参数里有项目名称 就设置标题里的项目名称
options && options.pname && this.setProjectName(options.pname);
if (!options || !options.p) {
this.$t.ui.showToast('缺少项目信息参数'); // 没有项目id参数
} else {
this.getProjectById({ projectId: options.p }); // 根据项目id获取项目信息
}
},
/**
* 通过项目id获取项目信息
* @param {object} params 提交的参数
*/
async getProjectById(params) {
try {
const data = await uni.$u.api.findProjectById(params);
this.setProject(data);
// 根据项目id获取角色列表
this.getRoles(params);
} catch (error) {
console.log('error: ', error || '获取项目信息失败');
}
},
/**
* 通过项目id获取角色信息
* @param {string} projectId
* @param {object} params 提交的参数
*/
getRoles(params) {
this.$t.$q.findShowRole(params, (err, data) => {
if (err) {
console.error('err: ', err || '获取角色信息失败');
} else {
this.setInvisibleRoles(data ? data.invisibleList : []);
this.setVisibleRoles(data ? data.visibleList : []);
this.setInitialRoleId(data ? data.visibleList : []);
}
});
},
// 设置 初始显示角色信息
setInitialRoleId(visibleList) {
if (!visibleList || !visibleList.length) return;
const index = visibleList.findIndex(item => +item.mine === 1);
const currentRole = index > 0 ? visibleList[index] : visibleList[0];
const storageRoleId = this.$t.storage.getStorageSync('roleId');
const currentRoleId = storageRoleId ? storageRoleId : currentRole ? currentRole.id : '';
this.setRoleId(currentRoleId);
// 清空storage
this.$t.storage.setStorageSync('roleId', '');
},
// 获取可变全局任务
getGlobalData() {
const { roleId, timeNode, timeUnit, projectId } = this;
const param = { roleId, timeNode, timeUnit, projectId };
this.getGlobal(param);
},
// 清除已有的任务数据
clearTasksData() {
// 清空日常任务的数据
this.setPermanents([]);
this.setDailyTasks([]);
// 清空定期任务数据
this.clearTasks();
type === 0 ? this.setUpTasks(newTasks) : this.setDownTasks(newTasks);
console.log('newTasks: ', newTasks.length);
console.log('end');
// 到顶的标志复位
// 到底的标志复位
this.clearEndFlag();
},
},
};

6
src/store/task/mutations.js
View File

@ -81,7 +81,8 @@ const mutations = {
if (!state.tasks.length) {
state.tasks = [...data]; // 原来没有数据
} else {
state.tasks = [...data.concat(state.tasks)];
state.tasks = [...data, ...state.tasks];
// state.tasks = [...data.concat(state.tasks)];
}
},
@ -94,7 +95,8 @@ const mutations = {
if (!state.tasks && !state.tasks.length) {
state.tasks = [...data];
} else {
state.tasks = [...state.tasks.concat(data)];
state.tasks = [...state.tasks, ...data];
// state.tasks = [...state.tasks.concat(data)];
}
},

24
src/test/util/task.test.js
View File

@ -0,0 +1,24 @@
import { computeFillPlaceholderTaskCount } from '../../utils/task';
describe('computeFillPlaceholderTaskCount', () => {
// 2021/8/17 ~ 2021/8/21
const tasks = [
{ id: '99724910037144221455', panel: {}, plugins: [], process: 4, planStart: 1629169800242 },
{ id: '65053357415671253512', panel: {}, plugins: [], process: 4, planStart: 1629256200242 },
{ id: '38735454515347179194', panel: {}, plugins: [], process: 4, planStart: 1629342600242 },
{ id: '49602681534756706607', panel: {}, plugins: [], process: 4, planStart: 1629429000242 },
{ id: '98860265376222512018', panel: {}, plugins: [], process: 4, planStart: 1629515400242 },
{ id: '44419041575700334936', panel: {}, plugins: [], process: 4, planStart: 1629601800242 },
];
const timeGranularity = 'day';
it('超出上限 补齐', () => {
const data = [{ planStart: `${new Date('2021/8/10').getTime()}` }, { planStart: `${new Date('2021/8/11').getTime()}` }];
expect(computeFillPlaceholderTaskCount({ tasks, data, timeGranularity }).prev.toString()).toMatch(/(7|8)/);
});
it('超出下限 补齐', () => {
const data = [{ planStart: `${new Date('2021/8/10').getTime()}` }, { planStart: `${new Date('2021/8/22').getTime()}` }];
expect(computeFillPlaceholderTaskCount({ tasks, data, timeGranularity }).next.toString()).toMatch(/(1|2)/);
});
});

2
src/utils/tall.js
View File

@ -9,6 +9,7 @@ import ui from '@/utils/ui.js';
import upload from '@/utils/upload.js';
import user from '@/config/user.js';
import zIndex from '@/config/zIndex.js';
import task from '@/config/task.js';
const gateway = process.env.VUE_APP_API_URL;
@ -25,6 +26,7 @@ const $t = {
cache, // 本地存储相关
$q: cacheAndRequest,
user, // 用户相关配置
task, // 任务相关配置
};
uni.$t = $t;

34
src/utils/task.js
View File

@ -1,12 +1,16 @@
import dayjs from 'dayjs';
/**
* 设置时间轴空数据
* @param {number} startTime
* @param {boolean} isUp true 向上加载,false 向下加载
* @param {string} timeGranularity 颗粒度
* @param {number} pageCount 加载的颗粒度数量 默认值是10
*/
export const setPlaceholderTasks = (startTime, isUp, timeGranularity) => {
export const setPlaceholderTasks = (startTime, isUp, timeGranularity, pageCount) => {
let result = [];
for (let i = 0; i < 10; i++) {
pageCount = pageCount || uni.$t.task.pageCount;
for (let i = 0; i < pageCount; i++) {
const delta = isUp ? `-${i + 1}` - 0 : i + 1;
let item = {
id: uni.$u.guid(20, false, 10),
@ -21,3 +25,29 @@ export const setPlaceholderTasks = (startTime, isUp, timeGranularity) => {
}
return result;
};
/**
* 超出旧数据上、下限 补齐时间刻度到新数据的起始时间颗粒度
* @param {object} option
* @param {array} option.tasks 旧的已有的任务书籍
* @param {array} option.data 新拿到的任务数据 空值已经过滤过了
* @param {string} option.timeGranularity 颗粒度
*/
export const computeFillPlaceholderTaskCount = ({ tasks, data, timeGranularity }) => {
const result = { prev: 0, next: 0 };
// 新数据的开始时间 < 旧数据的开始时间
// 超出了上限 补上限的时间刻度
// 补上 新数据开始时间 到 旧数据开始时间 的刻度
if (+data[0].planStart < +tasks[0].planStart) {
// 找出来需要补几组颗粒度
result.prev = dayjs(+tasks[0].planStart).diff(+data[0].planStart, timeGranularity) + 1;
}
// 新数据的结束时间 > 旧数据的结束时间
// 超出了下线 补下限的时间刻度
// 补上 旧数据截止时间 到 新数据截止时间 的刻度
if (+data[data.length - 1].planStart > +tasks[tasks.length - 1].planStart) {
result.next = dayjs(+data[data.length - 1].planStart).diff(+tasks[tasks.length - 1].planStart, timeGranularity) + 1;
}
return result;
};

Write Preview
Loading…
Cancel
Save