From 4090d892cdae77e3324d93326a653b326b83c5cd Mon Sep 17 00:00:00 2001 From: lucky Date: Thu, 22 Jul 2021 21:49:06 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E4=B8=8A=E4=B8=8B=E6=BB=91=E5=8A=A8?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=AE=9A=E6=9C=9F=E4=BB=BB=E5=8A=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 10 +- src/components/Roles/Roles.vue | 206 +++++++++++++++- src/components/Roles/component/RoleList.vue | 225 ------------------ src/components/TimeLine/TimeLine.vue | 33 ++- src/components/TimeLine/component/TimeBox.vue | 8 +- src/pages/project/project.vue | 29 ++- src/store/home/mutations.js | 15 ++ src/store/home/state.js | 2 + 8 files changed, 272 insertions(+), 256 deletions(-) delete mode 100644 src/components/Roles/component/RoleList.vue diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a21595..35b04be 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ - | indexedDB | [687394e](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/687394e) - | post 封装 | [da52e94](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/da52e94) - | tall插件封装 | [1bcb920](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/1bcb920) + - | ws storage | [21b3a06](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/21b3a06) 富文本插件 | 富文本插件demo测试 | [ed3d644](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/ed3d644) pinch | alloy finger实现图片的pinch放大缩小 | [de01343](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/de01343) @@ -42,6 +43,7 @@ ### 🐛 Bug 修复 范围|描述|commitId --|--|-- + - | 定期任务接口 | [aa4981c](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/aa4981c) - | 骨架屏替换 | [e9fdd71](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/e9fdd71) - | 角色栏修改 | [19228d6](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/19228d6) - | 上下滚动时间轴 | [d533a01](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/d533a01) @@ -78,13 +80,6 @@ ### chore 范围|描述|commitId --|--|-- - - | api 封装 | [8dcb8a2](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/8dcb8a2) - - | env host修改 | [a79a4a5](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/a79a4a5) - - | merge globals | [b0957cc](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/b0957cc) - - | mock | [51c24a5](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/51c24a5) - pwa 小程序 | 移除了pwa，alloyFinger添加平台判断 | [875fab4](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/875fab4) - - | uview-ui | [a9ea34b](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/a9ea34b) - 信息配置 | 配置eslint等配置 | [7421443](http://gitea@dd.tall.wiki:wally/TALL-MUI-3/commits/7421443) - | api 封装 | [8dcb8a2](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/8dcb8a2) - | env host修改 | [a79a4a5](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/a79a4a5) - | merge globals | [b0957cc](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/b0957cc) @@ -99,3 +94,4 @@ - | style:index | [978f272](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/978f272) - | !2 基础模板v1.1.0 | [f5e61dd](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/f5e61dd) - | init | [c0f1deb](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/c0f1deb) + diff --git a/src/components/Roles/Roles.vue b/src/components/Roles/Roles.vue index e96017f..ba8a2b8 100644 --- a/src/components/Roles/Roles.vue +++ b/src/components/Roles/Roles.vue @@ -1,25 +1,215 @@ - + diff --git a/src/components/Roles/component/RoleList.vue b/src/components/Roles/component/RoleList.vue deleted file mode 100644 index 1d2112b..0000000 --- a/src/components/Roles/component/RoleList.vue +++ /dev/null @@ -1,225 +0,0 @@ - - - - - diff --git a/src/components/TimeLine/TimeLine.vue b/src/components/TimeLine/TimeLine.vue index 94bc45f..4e20d04 100644 --- a/src/components/TimeLine/TimeLine.vue +++ b/src/components/TimeLine/TimeLine.vue @@ -8,6 +8,7 @@ @@ -34,7 +37,11 @@ export default { return { top: 0 }; }, - computed: mapState('home', ['scrollTop', 'showTips', 'visibleRoles', 'tasks']), + computed: mapState('home', ['scrollTop', 'showTips', 'visibleRoles', 'tasks', 'topEnd', 'bottomEnd']), + + mounted() { + this.setDatumPoint(); + }, methods: { ...mapMutations('home', ['setScrollTop', 'setShrink', 'setRoleId']), @@ -47,15 +54,26 @@ export default { }, // 滚动到顶部 - handleScrollTop() { - console.log('滚动到顶部'); - this.$emit('getTasks', { queryType: 0 }); + async handleScrollTop() { + if (this.topEnd) return; + const upQuery = { + timeNode: +this.tasks[0].planStart, + queryType: 0, + queryNum: 6, + }; + await this.$emit('getTasks', upQuery); }, // 滚动到底部 - handleScrollBottom() { - console.log('滚动到底部'); - this.$emit('getTasks', { queryType: 1 }); + async handleScrollBottom() { + if (this.bottomEnd) return; + const downQuery = { + timeNode: +this.tasks[this.tasks.length - 1].planStart, + queryType: 1, + queryNum: 6, + }; + console.log('downQuery: ', downQuery); + await this.$emit('getTasks', downQuery); }, // 设置基准点 @@ -71,6 +89,7 @@ export default { // } } this.top = tasksHeight - scrollHeight / 2; + console.log('this.top: ', this.top); } }, }, diff --git a/src/components/TimeLine/component/TimeBox.vue b/src/components/TimeLine/component/TimeBox.vue index f303126..1a2f3b6 100644 --- a/src/components/TimeLine/component/TimeBox.vue +++ b/src/components/TimeLine/component/TimeBox.vue @@ -4,8 +4,8 @@ - {{ $u.timeFormat(+item.planStart, 'mm-dd hh:MM') }} - + {{ +item.planStart | date('mm-dd hh:MM') }} + @@ -21,7 +21,7 @@ - + diff --git a/src/pages/project/project.vue b/src/pages/project/project.vue index 5c2e4d5..ac2b4a4 100644 --- a/src/pages/project/project.vue +++ b/src/pages/project/project.vue @@ -2,7 +2,7 @@ <view class="container flex flex-col flex-1 overflow-hidden bg-gray-100"> - <Roles @getTasks="getTasks" /> + <Roles @getTasksByRole="getTasksByRole" /> <Globals :plugins="plugins" /> <TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="child" /> </view> @@ -44,9 +44,7 @@ export default { await this.getGlobal(); // 查上下的定期任务 if (this.tasks && this.tasks.length) { - console.log('this.tasks[0].planStart: ', this.tasks[0].planStart); await this.getTasks({ timeNode: +this.tasks[0].planStart, queryType: 0, queryNum: 6 }); - console.log('this.tasks[this.tasks.length - 1].planStart: ', this.tasks[this.tasks.length - 1].planStart); await this.getTasks({ timeNode: +this.tasks[this.tasks.length - 1].planStart, queryType: 1, queryNum: 6 }); } }, @@ -98,10 +96,8 @@ export default { params.timeUnit = query.timeUnit || timeUnit; params.queryNum = query.queryNum || 3; params.queryType = query.queryType; - console.log('params: ', params); const res = await this.handleRegularTask(params); query.queryType === 0 ? this.setUpTasks(res) : this.setDownTasks(res); - this.$refs.child.setDatumPoint(); } catch (error) { console.log('error: ', error); } @@ -141,6 +137,29 @@ export default { console.log('error: ', error); } }, + + // 切换角色获取任务 + async getTasksByRole() { + try { + await this.getTasks({ queryType: 0 }); + await this.getTasks({ queryType: 1 }); + // 查上下的任务 + const upQuery = { + timeNode: +this.tasks[0].planStart, + queryType: 0, + queryNum: 6, + }; + await this.getTasks(upQuery); + const downQuery = { + timeNode: +this.tasks[this.tasks.length - 1].planStart, + queryType: 1, + queryNum: 6, + }; + await this.getTasks(downQuery); + } catch (error) { + console.log('error: ', error); + } + }, }, }; </script> diff --git a/src/store/home/mutations.js b/src/store/home/mutations.js index e8a6f85..ec844a5 100644 --- a/src/store/home/mutations.js +++ b/src/store/home/mutations.js @@ -122,6 +122,9 @@ const mutations = { * @param {Array} data 服务端返回的模板数组 */ setUpTasks(state, data) { + if (!data || !data.length) { + state.topEnd = true; + } state.tasks = [...data.concat(state.tasks)] || []; }, @@ -131,9 +134,21 @@ const mutations = { * @param {Array} data 服务端返回的模板数组 */ setDownTasks(state, data) { + if (!data || !data.length) { + state.bottomEnd = true; + } state.tasks = [...state.tasks.concat(data)] || []; }, + /** + * 清空定期任务数据 + * @param {Object} state + * @param {Array} data 服务端返回的模板数组 + */ + setTasks(state, data) { + state.tasks = data || []; + }, + /** * 设置日常任务数据 * @param {Object} state diff --git a/src/store/home/state.js b/src/store/home/state.js index aecd404..7389c48 100644 --- a/src/store/home/state.js +++ b/src/store/home/state.js @@ -30,6 +30,8 @@ const state = { { id: 11, value: '千年' }, ], tasks: [], // 定期任务 + topEnd: false, // 时间轴向上查任务到顶了 + bottomEnd: false, // 时间轴向下查任务到底了 dailyTasks: [], // 日常任务 }; From 4fd20e346f6c7b2c629719e3c9b2172191db33b7 Mon Sep 17 00:00:00 2001 From: lucky <srf428110@163.com> Date: Thu, 22 Jul 2021 21:52:16 +0800 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=E4=B8=8B=E6=BB=91=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E8=BD=B4=E6=B7=BB=E5=8A=A0=E5=A4=87=E6=B3=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + src/components/TimeLine/TimeLine.vue | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 35b04be..247b757 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -47,6 +47,7 @@ - | 骨架屏替换 | [e9fdd71](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/e9fdd71) - | 角色栏修改 | [19228d6](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/19228d6) - | 上下滚动时间轴 | [d533a01](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/d533a01) + - | 上下滑动加载定期任务 | [4090d89](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4090d89) - | 时间轴上下滚动数据加载bug修改 | [e82ede4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/e82ede4) - | 时间轴上下滑动 | [4d0ae46](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4d0ae46) - | 提示信息显示bug及日常任务收缩问题 | [f2f06c5](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/f2f06c5) diff --git a/src/components/TimeLine/TimeLine.vue b/src/components/TimeLine/TimeLine.vue index 4e20d04..62b0abb 100644 --- a/src/components/TimeLine/TimeLine.vue +++ b/src/components/TimeLine/TimeLine.vue @@ -67,6 +67,7 @@ export default { // 滚动到底部 async handleScrollBottom() { if (this.bottomEnd) return; + // TODO: 时间基准点=最后一个任务的开始时间+当前时间颗粒度 const downQuery = { timeNode: +this.tasks[this.tasks.length - 1].planStart, queryType: 1, From 29b8b93a3225f9b00ad42b19c27314cce2036c1d Mon Sep 17 00:00:00 2001 From: lucky <srf428110@163.com> Date: Thu, 22 Jul 2021 22:42:19 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E5=BC=95=E5=85=A5dayjs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + src/main.js | 2 + src/utils/tall.js | 2 + src/utils/time.js | 297 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 302 insertions(+) create mode 100644 src/utils/time.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 247b757..fff647f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -64,6 +64,7 @@ ### 🔨 代码重构 范围|描述|commitId --|--|-- + - | 下滑时间轴添加备注 | [4fd20e3](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4fd20e3) template | eslint prettier sass uview tailwindcss | [9c966a1](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9c966a1) diff --git a/src/main.js b/src/main.js index b5ed992..045017f 100644 --- a/src/main.js +++ b/src/main.js @@ -4,6 +4,7 @@ import Tall from '@/utils/tall'; import App from './App'; import './common/styles/index.css'; import store from './store'; +import dayjs from 'dayjs'; //#ifdef H5 import './registerServiceWorker'; @@ -18,6 +19,7 @@ Vue.use(indexedDB); Vue.config.productionTip = false; Vue.use(uView); Vue.use(Tall); +Vue.use(dayjs); App.mpType = 'app'; diff --git a/src/utils/tall.js b/src/utils/tall.js index 8a962b0..3bce5fe 100644 --- a/src/utils/tall.js +++ b/src/utils/tall.js @@ -2,12 +2,14 @@ import app from '@/config/app.js'; import zIndex from '@/config/zIndex.js'; import plugin from '@/config/plugin.js'; import storage from '@/utils/storage.js'; +import time from '@/utils/time.js'; const $t = { zIndex, // 定位元素层级 app, // app级别的相关配置 plugin, // 插件相关配置信息 storage, // 本地存储storage封装 + time, // 时间处理 }; uni.$t = $t; diff --git a/src/utils/time.js b/src/utils/time.js new file mode 100644 index 0000000..5035e34 --- /dev/null +++ b/src/utils/time.js @@ -0,0 +1,297 @@ +import dayjs from 'dayjs'; +var advancedFormat = require('dayjs/plugin/advancedFormat'); +var weekOfYear = require('dayjs/plugin/weekOfYear'); +dayjs.extend(advancedFormat); +dayjs.extend(weekOfYear); + +/** + * 格式化数字 + * @param {*} n + */ +const formatNumber = n => { + const str = n.toString(); + return str[1] ? str : `0${str}`; +}; + +/** + * 格式化时间 + * @param {number} beginTime + */ +const formatTime = beginTime => { + const date = new Date(beginTime); + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + const hour = date.getHours(); + const minute = date.getMinutes(); + const second = date.getSeconds(); + + return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`; +}; + +/** + * 时间转换 08:00 转换成8小时0分钟 + * @param {string} time + * @returns {{hours: number, minutes: number}} + */ +const convertTime = time => { + const arr = time.split(':'); + return { + hours: parseInt(arr[0], 10), + minutes: parseInt(arr[1], 10), + }; +}; + +/** + * 将秒 -> 分 秒 + * @param {number} seconds + */ +const secondToMinute = seconds => { + const minute = formatNumber(Math.floor(seconds / 60)); + const second = formatNumber(parseInt(seconds % 60, 10)); + return { + minute, + second, + }; +}; + +/** + * 将时间戳 -> 时:分 + * @param {Number} timestamp 时间戳 + * @return date:2018/10/09 time: 12:59 + */ +const setTimestampToStr = timestamp => { + const timeObj = new Date(timestamp); + const year = timeObj.getFullYear(); + const month = formatNumber(timeObj.getMonth() + 1); + const day = formatNumber(timeObj.getDate()); + const hour = formatNumber(timeObj.getHours()); + const minute = formatNumber(timeObj.getMinutes()); + const date = `${year}/${month}/${day}`; + const time = `${hour}:${minute}`; + return { + date, + time, + }; +}; + +/** + * 检测时间(ms)是不是今天 + * @param {Number} time 时间戳 + */ +const validateTimeIsToday = time => { + const timeDate = new Date(time); + const date = new Date(); + return timeDate.getFullYear() === date.getFullYear() && timeDate.getMonth() === date.getMonth() && timeDate.getDate() === date.getDate(); +}; + +/** + * 格式化开始时间 + * @param {Number} timestamp 时间戳 + * @return + * 如果是今天 -> 时:分 + * 如果不是今年 -> 年/月/日 时:分 + * 否则 *月*日 时:分 + */ +const formatBeginTime = timestamp => { + const timeObj = new Date(timestamp); + const year = timeObj.getFullYear(); + const month = formatNumber(timeObj.getMonth() + 1); + const day = formatNumber(timeObj.getDate()); + const hour = formatNumber(timeObj.getHours()); + const minute = formatNumber(timeObj.getMinutes()); + const date = `${year}/${month}/${day}`; + const time = `${hour}:${minute}`; + const currentYear = new Date().getFullYear(); + + if (validateTimeIsToday(timestamp)) { + // 今天 + return `今天 ${time}`; + } else if (currentYear !== year) { + // 不是今年 + return `${date} ${time}`; + } else { + return `${month}月${day}日 ${time}`; + } +}; + +/** + * 格式化时长 + * @param {Number} duration 时长 + * 超过24小时（ 24 * 60 * 60 * 1000 ms） 转换成天数 + 小时 + 分钟 + * 小于1分钟（ 60 * 1000 ms） 转换成秒钟 + * 其余的显示分钟 + * 超过2小时（ 2 * 60 * 60 * 1000 ms） 转换成小时 + 分钟数 + */ +const formatDuration = duration => { + const minuteTime = 60 * 1000; + const hourTime = 60 * minuteTime; + const dayTime = 24 * hourTime; + const days = Math.floor(duration / dayTime); + const hours = Math.floor((duration % dayTime) / hourTime); + const minutes = Math.floor((duration % hourTime) / minuteTime); + if (duration <= 60 * 1000) { + // 小于1分钟 返回几秒 + return `${Math.floor(duration / 1000)}秒`; + } else if (duration > dayTime) { + // 大于1天 + if (minutes === 0) { + if (hours === 0) { + // 分钟数是0 和 小时数是0 返回 几天 + return `${days}天`; + } else { + // 分钟是0 小时不是0 返回 几天几小时 + return `${days}天${hours}小时`; + } + } else { + // 分钟不是0 返回几天几时几分 + return `${days}天${hours}时${minutes}分`; + } + } else if (duration > 2 * hourTime) { + // 大于2h + if (minutes === 0) { + // 分钟是0 返回几小时 + return `${hours}小时`; + } else { + // 分钟不是0 返回几小时几分钟 + return `${hours}小时${minutes}分钟`; + } + } else { + // 其余情况 返回 几分钟 + return `${parseInt(duration / minuteTime)}分钟`; + } +}; + +/** + * 格式化时长 转换成对象格式 + * @param {Number} duration 时长 + * 超过24小时（ 24 * 60 * 60 * 1000 ms） 转换成{days, hours, minutes, seconds: 0} + * 小于1分钟（ 60 * 1000 ms） 转换成秒钟 { days: 0, hours: 0, minutes: 0, seconds } + * 其余的显示分钟 { days: 0, hours: 0, minutes, seconds: 0 } + * 超过2小时（ 2 * 60 * 60 * 1000 ms） 转换成{ days: 0, hours, minutes, seconds: 0 } + */ +const formatDurationToObject = duration => { + const minuteTime = 60 * 1000; + const hourTime = 60 * minuteTime; + const dayTime = 24 * hourTime; + const days = Math.floor(duration / dayTime); + const hours = Math.floor((duration % dayTime) / hourTime); + const minutes = Math.floor((duration % hourTime) / minuteTime); + const result = { + days: 0, + hours: 0, + minutes: 0, + seconds: 0, + }; + if (duration <= 60 * 1000) { + // 小于1分钟 返回几秒 + result.seconds = Math.floor(duration / 1000); + } else if (duration > dayTime) { + // 大于1天 + if (minutes === 0) { + if (hours === 0) { + // 分钟数是0 和 小时数是0 返回 几天 + result.days = days; + } else { + // 分钟是0 小时不是0 返回 几天几小时 + result.days = days; + result.hours = hours; + } + } else { + // 分钟不是0 返回几天几时几分 + result.days = days; + result.hours = hours; + result.minutes = minutes; + } + } else if (duration > 2 * hourTime) { + // 大于2h + if (minutes === 0) { + // 分钟是0 返回几小时 + result.hours = hours; + } else { + // 分钟不是0 返回几小时几分钟 + result.hours = hours; + result.minutes = minutes; + } + } else { + // 其余情况 返回 几分钟 + result.minutes = minutes; + } + return result; +}; + +/** + * 将对象格式的时间转换成时间戳 + * @param {obj} 对象格式的时间 days, hours, minutes, seconds + * @return 时长的ms + */ +const formatObjectTimeToMs = (days = 0, hours = 0, minutes = 0, seconds = 0) => { + return days * 24 * 60 * 60 * 1000 + hours * 60 * 60 * 1000 + minutes * 60 * 1000 + seconds * 1000; +}; + +/** + * 计算过滤 周期 + * @param {string} time 周期字符串 + * @return {string} cycle 周期英文字符串 + */ +const computeCycle = time => { + // 加载下一个周期的任务 + let cycle = 'day'; + switch (time) { + case '天': + cycle = 'day'; + break; + case '周': + cycle = 'week'; + break; + case '月': + cycle = 'month'; + break; + default: + cycle = '日程'; + break; + } + return cycle; +}; + +/** + * 将时间按周期语义化 + * @param {string} cycle 周期 + * @param {number|string} time 时间 + */ +const formatStartTimeToCycleTime = (cycle, time) => { + let result = ''; + const _time = dayjs(+time); + switch (cycle) { + case '天': + result = _time.format('YYYY年M月D日'); + break; + case '周': + result = _time.format('YYYY年w周'); + break; + case '月': + result = _time.format('YYYY年M月'); + break; + case '日程': + result = _time.format('YYYY年M月D日 HH:mm'); + break; + default: + result = _time.format('YYYY年M月D日'); + break; + } + return result; +}; + +export default { + formatNumber, + formatTime, + convertTime, + secondToMinute, + setTimestampToStr, + formatBeginTime, + formatDuration, + formatDurationToObject, + formatObjectTimeToMs, + computeCycle, + formatStartTimeToCycleTime, +};