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

fix(ID1000343): 解决向下预加载查询参数时间没+1颗粒度;以及滚动加载颗粒度写死的问题 

fix #ID1000343
develop
wally 4 years ago
parent
5c20017c1f
commit
940603aa7f
8 changed files with 92 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      CHANGELOG.md
  2. 46
      src/components/Plugin/Plugin.vue
  3. 35
      src/components/Roles/Roles.vue
  4. 20
      src/components/TimeLine/TimeLine.vue
  5. 24
      src/config/time.js
  6. 13
      src/pages/project/project.vue
  7. 15
      src/store/task/getters.js
  8. 2
      tailwind.config.js

1
CHANGELOG.md
View File

@ -54,6 +54,7 @@
范围|描述|commitId 范围|描述|commitId
--|--|-- --|--|--
plugin | 插件解析机制完善 | 0f5a27d plugin | 插件解析机制完善 | 0f5a27d
project title | 项目标题修改; 切换角色移除script | 5c20017
role | 切换角色的逻辑修正完善 | 4ae534f role | 切换角色的逻辑修正完善 | 4ae534f
task任务逻辑完善 | 减少初始global及regular的不必要请求 | bd4bd38 task任务逻辑完善 | 减少初始global及regular的不必要请求 | bd4bd38
- | 上下滑动加载定期任务 | 4090d89 - | 上下滑动加载定期任务 | 4090d89

46
src/components/Plugin/Plugin.vue
View File

@ -68,11 +68,13 @@ export default {
if (!data || !data.id) return; if (!data || !data.id) return;
const reg = /data-root=["|']?(\w+)["|']?/gi; const reg = /data-root=["|']?(\w+)["|']?/gi;
// console.log(data.html); // console.log(data.html);
let uuid = '';
// FIXME: 没有兼容只有js 没有html的情况
if (data.html) { if (data.html) {
// 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId // 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId
if (reg.test(data.html)) { if (reg.test(data.html)) {
const uuid = RegExp.$1; uuid = RegExp.$1;
// console.log('uuid: ', uuid, `p${this.pluginTaskId}`); // console.log('uuid: ', uuid, `p${this.pluginTaskId}`);
const str = data.html.replaceAll(uuid, `p${this.pluginTaskId}`); const str = data.html.replaceAll(uuid, `p${this.pluginTaskId}`);
@ -80,34 +82,38 @@ export default {
} else { } else {
this.pluginContent = data.html; this.pluginContent = data.html;
} }
const str = data.js.replaceAll(uuid, `p${this.pluginTaskId}`);
this.handleDom(str);
} }
// console.log(this.pluginContent); // console.log(this.pluginContent);
if (data.js) { // if (data.js) {
if (reg.test(data.js)) { // if (reg.test(data.js)) {
const uuid = RegExp.$1; // const uuid = RegExp.$1;
const str = data.js.replaceAll(uuid, `p${this.pluginTaskId}`); // const str = data.js.replaceAll(uuid, `p${this.pluginTaskId}`);
this.handleDom(str); // this.handleDom(str);
} else { // } else {
this.handleDom(data.js); // this.handleDom(data.js);
} // }
} // }
}, },
// 创建script dom // 创建script dom
handleDom(js) { handleDom(js) {
const { pluginId } = this; const { pluginTaskId } = this;
let domList = Array.from(document.getElementsByTagName('script')); let domList = Array.from(document.getElementsByTagName('script'));
const index = domList.findIndex(item => item.id === `p${pluginId}`); const index = domList.findIndex(item => item.id === `p${pluginTaskId}`);
if (js && index === -1) { if (index >= 0) {
const scriptDom = document.createElement('script'); document.body.removeChild(document.getElementById(`p${pluginTaskId}`));
scriptDom.id = `p${pluginId}`;
scriptDom.setAttribute('data-type', 'plugin');
scriptDom.innerHTML = js;
this.$nextTick(() => {
document.body.append(scriptDom);
});
} }
const scriptDom = document.createElement('script');
scriptDom.id = `p${pluginTaskId}`;
scriptDom.setAttribute('data-type', 'plugin');
scriptDom.innerHTML = js;
this.$nextTick(() => {
document.body.append(scriptDom);
});
}, },
}, },
}; };

35
src/components/Roles/Roles.vue
View File

@ -97,18 +97,19 @@ export default {
try { try {
// 清除多余的script // 清除多余的script
this.clearPluginScript(); this.clearPluginScript();
this.$nextTick(() => {
this.setRoleId(id); this.setRoleId(id);
//改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动 //改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
this.setCurrentRole(index); this.setCurrentRole(index);
// 清空定期任务数据 // 清空定期任务数据
this.setTasks(); this.setTasks();
// 清空日常任务的数据 // 清空日常任务的数据
this.setPermanents([]); this.setPermanents([]);
this.setDailyTasks([]); this.setDailyTasks([]);
// 到顶的标志复位 // 到顶的标志复位
// 到底的标志复位 // 到底的标志复位
this.clearEndFlag(); this.clearEndFlag();
});
} catch (error) { } catch (error) {
console.log('role.vue changeRole error: ', error); console.log('role.vue changeRole error: ', error);
} }
@ -117,10 +118,14 @@ export default {
// 清除插件script // 清除插件script
clearPluginScript() { clearPluginScript() {
console.log('clearPluginScript: '); console.log('clearPluginScript: ');
try {
const scripts = document.querySelectorAll('script[data-type=plugin]');
const scripts = document.querySelectorAll('script[data-type=plugin]'); for (let i = 0; i < scripts.length; i++) {
for (let i = 0; i < scripts.length; i++) { document.body.removeChild(scripts[i]);
document.body.removeChild(scripts[i]); }
} catch (error) {
console.log('clearPluginScript error: ', error);
} }
}, },

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

@ -23,7 +23,7 @@
<script> <script>
// import Barrier from './component/Barrier.vue'; // import Barrier from './component/Barrier.vue';
import { mapState, mapMutations } from 'vuex'; import { mapState, mapMutations, mapGetters } from 'vuex';
import TimeBox from './component/TimeBox.vue'; import TimeBox from './component/TimeBox.vue';
export default { export default {
@ -36,6 +36,7 @@ export default {
computed: { computed: {
...mapState('role', ['visibleRoles']), ...mapState('role', ['visibleRoles']),
...mapState('task', ['scrollTop', 'showTips', 'tasks', 'topEnd', 'bottomEnd']), ...mapState('task', ['scrollTop', 'showTips', 'tasks', 'topEnd', 'bottomEnd']),
...mapGetters('task', ['timeGranularity']),
}, },
mounted() { mounted() {
@ -93,31 +94,31 @@ export default {
// 滚动到底部 // 滚动到底部
async handleScrollBottom() { async handleScrollBottom() {
if (this.bottomEnd) return; if (this.bottomEnd) return;
const startTime = this.tasks[this.tasks.length - 1].planStart - 0; const { tasks, timeGranularity } = this;
if (this.tasks[0].plugins && this.tasks[0].plugins.length === 0 && !this.topEnd) { const startTime = tasks[tasks.length - 1].planStart - 0;
if (tasks[0].plugins && tasks[0].plugins.length === 0 && !this.topEnd) {
// 没有数据时 自动加载数据 // 没有数据时 自动加载数据
const addTasks = [ const addTasks = [
{ {
panel: {}, panel: {},
plugins: [], plugins: [],
planStart: this.$t.time.add(startTime, 1, 'day').valueOf(), planStart: this.$t.time.add(startTime, 1, timeGranularity).valueOf(),
}, },
{ {
panel: {}, panel: {},
plugins: [], plugins: [],
planStart: this.$t.time.add(startTime, 2, 'day').valueOf(), planStart: this.$t.time.add(startTime, 2, timeGranularity).valueOf(),
}, },
{ {
panel: {}, panel: {},
plugins: [], plugins: [],
planStart: this.$t.time.add(startTime, 3, 'day').valueOf(), planStart: this.$t.time.add(startTime, 3, timeGranularity).valueOf(),
}, },
]; ];
this.setDownTasks([...this.tasks.concat(addTasks)]); this.setDownTasks([...tasks.concat(addTasks)]);
} else { } else {
// 时间基准点=最后一个任务的开始时间+当前时间颗粒度 // 时间基准点=最后一个任务的开始时间+当前时间颗粒度
const cycle = this.$t.time.computeCycle('天'); const timeNode = this.$t.time.add(startTime, 1, timeGranularity).valueOf();
const timeNode = this.$t.time.add(startTime, 1, cycle).valueOf();
const downQuery = { const downQuery = {
timeNode, timeNode,
queryType: 1, queryType: 1,
@ -146,7 +147,6 @@ export default {
} }
} }
this.top = tasksHeight - scrollHeight / 2; this.top = tasksHeight - scrollHeight / 2;
console.log('this.top: ', this.top);
} }
}, },
}, },

24
src/config/time.js
View File

@ -1,17 +1,17 @@
export default { export default {
timeUnits: [ timeUnits: [
// 时间颗粒度 // 时间颗粒度
{ id: 0, value: '毫秒', format: 'x', cycle: 'YY-M-D HH:mm:ss' }, { id: 0, value: '毫秒', format: 'x', cycle: 'YY-M-D HH:mm:ss', granularity: 'millisecond' },
{ id: 1, value: '秒', format: 'x', cycle: 'YY-M-D HH:mm:ss' }, { id: 1, value: '秒', format: 'x', cycle: 'YY-M-D HH:mm:ss', granularity: 'second' },
{ id: 2, value: '分', format: 'ss', cycle: 'YY-M-D HH:mm' }, { id: 2, value: '分', format: 'ss', cycle: 'YY-M-D HH:mm', granularity: 'minute' },
{ id: 3, value: '时', format: 'mm', cycle: 'YY-M-D HH时' }, { id: 3, value: '时', format: 'mm', cycle: 'YY-M-D HH时', granularity: 'hour' },
{ id: 4, value: '天', format: 'D日 HH:mm', cycle: 'YY-M-D' }, { id: 4, value: '天', format: 'D日 HH:mm', cycle: 'YY-M-D', granularity: 'day' },
{ id: 5, value: '周', format: 'D日 HH:mm', cycle: '' }, { id: 5, value: '周', format: 'D日 HH:mm', cycle: '', granularity: 'week' },
{ id: 6, value: '月', format: 'D日 H:m', cycle: 'YYYY年' }, { id: 6, value: '月', format: 'D日 H:m', cycle: 'YYYY年', granularity: 'month' },
{ id: 7, value: '季度', format: '', cycle: 'YYYY年' }, { id: 7, value: '季度', format: '', cycle: 'YYYY年', granularity: 'quarter' },
{ id: 8, value: '年', format: 'YYYY', cycle: '' }, { id: 8, value: '年', format: 'YYYY', cycle: '', granularity: 'year' },
{ id: 9, value: '年代', format: '', cycle: '' }, { id: 9, value: '年代', format: '', cycle: '', granularity: '' },
{ id: 10, value: '世纪', format: '', cycle: '' }, { id: 10, value: '世纪', format: '', cycle: '', granularity: '' },
{ id: 11, value: '千年', format: '', cycle: '' }, { id: 11, value: '千年', format: '', cycle: '', granularity: '' },
], ],
}; };

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

@ -17,7 +17,7 @@
</template> </template>
<script> <script>
import { mapState, mapMutations, mapActions } from 'vuex'; import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default { export default {
data() { data() {
@ -28,6 +28,7 @@ export default {
...mapState('user', ['user', 'token']), ...mapState('user', ['user', 'token']),
...mapState('role', ['visibleRoles', 'roleId']), ...mapState('role', ['visibleRoles', 'roleId']),
...mapState('task', ['timeNode', 'timeUnit', 'tasks']), ...mapState('task', ['timeNode', 'timeUnit', 'tasks']),
...mapGetters('task', ['timeGranularity']),
}, },
onLoad(options) { onLoad(options) {
@ -120,8 +121,13 @@ export default {
// 预加载 上下的定期任务 // 预加载 上下的定期任务
if (this.tasks && this.tasks.length) { if (this.tasks && this.tasks.length) {
this.getTasks({ timeNode: +this.tasks[0].planStart, queryType: 0, queryNum: 6 }); this.$nextTick(() => {
this.getTasks({ timeNode: +this.tasks[this.tasks.length - 1].planStart, queryType: 1, queryNum: 6 }); const { tasks, timeGranularity } = this;
this.getTasks({ timeNode: +tasks[0].planStart, queryType: 0, queryNum: 6 });
// 向下查的时候要再最后一个任务的开始时间的基础上 多加一个时间颗粒度
const nextQueryTime = +this.$t.time.add(+tasks[tasks.length - 1].planStart, 1, timeGranularity);
this.getTasks({ timeNode: nextQueryTime, queryType: 1, queryNum: 6 });
});
} }
}, },
@ -152,6 +158,7 @@ export default {
queryNum: query.queryNum || 3, queryNum: query.queryNum || 3,
queryType: query.queryType, queryType: query.queryType,
}; };
await this.getRegulars(params); await this.getRegulars(params);
} catch (error) { } catch (error) {
console.log('error: ', error); console.log('error: ', error);

15
src/store/task/getters.js
View File

@ -4,10 +4,19 @@ const getters = {
return [...permanents, ...dailyTasks]; return [...permanents, ...dailyTasks];
}, },
// 计算任务开始时间的格式 unitConfig({ timeUnit }) {
startTimeFormat({ timeUnit }) {
const target = uni.$t.timeConfig.timeUnits.find(item => item.id === timeUnit); const target = uni.$t.timeConfig.timeUnits.find(item => item.id === timeUnit);
return target.format || 'D日 HH:mm'; return target;
},
// 计算任务开始时间的格式
startTimeFormat(state, { unitConfig }) {
return unitConfig.format || 'D日 HH:mm';
},
// 计算颗粒度 对应的 dayjs add 的单位
timeGranularity(state, { unitConfig }) {
return unitConfig.granularity;
}, },
}; };

2
tailwind.config.js
View File

@ -1,5 +1,5 @@
module.exports = { module.exports = {
purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], // purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class' darkMode: false, // or 'media' or 'class'
theme: { extend: {} }, theme: { extend: {} },
variants: { extend: {} }, variants: { extend: {} },

Write Preview
Loading…
Cancel
Save