Merge pull request 'temp' (#43) from temp into develop

Reviewed-on: https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/pulls/43

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 0.1.0 (2021-08-11)
+# 0.1.0 (2021-08-13)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -14,6 +14,7 @@
  task status | 任务状态切换未完 | 7ffd135
  - | ws storage | 21b3a06
  - | 上传逻辑变化 | 3ff1dc2
+ - | 任务状态时间显示 | 56f5183
  - | 任务进行中状态数字 | 27b7326
  - | 全局插件及默认插件位置修改 | 6c80d08
  - | 向右箭头图标变化 | 8e9ca55
@@ -22,6 +23,7 @@
  - | 定期任务面板骨架屏添加 | b2698c0
  富文本插件 | 富文本插件demo测试 | ed3d644
  - | 导入wbs | 1224fcb
+ - | 导入项目,更新项目 | 5e06adf
  - | 导入项目后提示并打开项目详情页 | 410f527
  - | 引入dayjs | 29b8b93
  - | 提交到本地 | 9cbe411
@@ -46,6 +48,51 @@
  - | 项目api url设置 | 6cd5245
  - | 项目列表, 项目url | 32e005b
  - | 首页项目样式改变 | 8514c85
+ calendar, tall.js | 上下滑动切换日历的模式,tall.js中domain根据环境变量切换 | [364e25d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/364e25d)
+ - | db store | [6414c4f](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/6414c4f)
+ default plugin | 添加默认插件;项目列表;全局项目最大高度设置 | [ed1d87b](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/ed1d87b)
+ - | indexedDB | [687394e](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/687394e)
+ pinch | alloy finger实现图片的pinch放大缩小 | [de01343](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/de01343)
+ plugin | 插件添加了token及param参数 | [aeb0292](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/aeb0292)
+ - | post 封装 | [da52e94](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/da52e94)
+ - | tall插件封装 | [1bcb920](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/1bcb920)
+ task status | 任务状态切换未完 | [7ffd135](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/7ffd135)
+ - | ws storage | [21b3a06](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/21b3a06)
+ - | 上传逻辑变化 | [3ff1dc2](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/3ff1dc2)
+ - | 任务状态时间显示 | [56f5183](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/56f5183)
+ - | 任务进行中状态数字 | [27b7326](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/27b7326)
+ - | 全局插件及默认插件位置修改 | [6c80d08](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/6c80d08)
+ - | 向右箭头图标变化 | [8e9ca55](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/8e9ca55)
+ - | 字体大小更改 | [82cfdd4](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/82cfdd4)
+ - | 存token | [b8a178d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/b8a178d)
+ - | 定期任务面板骨架屏添加 | [b2698c0](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/b2698c0)
+ 富文本插件 | 富文本插件demo测试 | [ed3d644](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/ed3d644)
+ - | 导入wbs | [1224fcb](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/1224fcb)
+ - | 导入项目,更新项目 | [5e06adf](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5e06adf)
+ - | 导入项目后提示并打开项目详情页 | [410f527](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/410f527)
+ - | 引入dayjs | [29b8b93](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/29b8b93)
+ - | 提交到本地 | [9cbe411](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/9cbe411)
+ - | 插件参数处理调整 | [a3e68d3](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/a3e68d3)
+ - | 插件数据获取 | [5b91bdc](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5b91bdc)
+ - | 日历定位;合并 | [ea3f937](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/ea3f937)
+ - | 日常任务插件调整 | [c1881f9](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c1881f9)
+ - | 时间基准线，默认插件 | [a33ba1e](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/a33ba1e)
+ - | 时间轴修改状态时提示框增加 | [e841392](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e841392)
+ - | 时间轴界面 | [33927e9](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/33927e9)
+ - | 标题栏变化 | [3898cfe](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/3898cfe)
+ - | 标题栏变化 | [c0fcd9d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c0fcd9d)
+ - | 标题栏角色栏全局任务组件新建 | [0500cb4](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/0500cb4)
+ - | 模拟接口测试 | [69e7931](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/69e7931)
+ - | 添加时间轴上下滚动 | [2b81bbc](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/2b81bbc)
+ - | 点击日历日期查询项目列表 | [c458385](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c458385)
+ - | 角色栏实现 | [94cd671](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/94cd671)
+ - | 设置小红点 | [9316bcb](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/9316bcb)
+ - | 距调整pc端 | [5069aa1](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5069aa1)
+ - | 配置默认插件接口 | [f0c177d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/f0c177d)
+ - | 面变化首页变化 | [5e860f1](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5e860f1)
+ - | 项目api url设置 | [6cd5245](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/6cd5245)
+ - | 项目列表, 项目url | [32e005b](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/32e005b)
+ - | 首页项目样式改变 | [8514c85](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/8514c85)
 
 
 ### 🎨 代码样式
@@ -81,29 +128,36 @@
  roles | 修复默认显示不是我的角色的问题 | b69f94f
  role | 切换角色的逻辑修正完善 | 4ae534f
  task任务逻辑完善 | 减少初始global及regular的不必要请求 | bd4bd38
+ - | title.vue根据页面栈显示返回按钮；标题文本超出显示... | 0cbacf4
  - | 上下滑动加载定期任务 | 4090d89
  - | 上下滚动时间轴 | d533a01
  - | 下拉加载定期任务传参，时间格式化修改 | 0b95a0e
  - | 任务开始时间延迟插件 | 992a313
  - | 修改main | 749ae9a
+ - | 修改小红点传参 | 87b20fd
  - | 修改报错 | 531c14d
  - | 修改接口路径 | df6acf2
  - | 修改角色栏组件 | a54c601
+ - | 切换到默认项目角色没有激活状态的bug | 438d448
  - | 切换日历时查询小红点 | 7091789
  - | 定期任务接口 | aa4981c
  - | 定期任务插件 | 92b3254
  - | 定期任务未加载时,显示空的时间轴并能上下滑动 | ce38093
+ - | 定期任务骨架屏修改 | 8ff72dd
  - | 平车演示临时去掉项目快捷方式的toast提示 | e0b2c23
  - | 手动展开日常任务 | 0a4a622
  - | 提示信息显示bug及日常任务收缩问题 | f2f06c5
  - | 插件bug解决 | 41257eb
+ - | 收到消息修改任务状态 | c378063
  - | 日常任务html数据查验 | 880ce5c
  - | 日常任务插件遍历时的key值修改 | cd26285
  - | 日常任务插件面板高度修改 | 249f9e4
  - | 时间轴上下滑动 | 4d0ae46
  - | 时间轴上下滚动数据加载bug修改 | e82ede4
  - | 时间轴插件 | 225d3cc
+ - | 时间轴无任务时时间刻度加载修改 | 4921672
  - | 时间轴骨架屏修改 | ca78d02
+ - | 角色显示状态修改 | 7d3b906
  - | 角色栏修改 | 19228d6
  - | 解决时间轴报错 | da1eece
  - | 骨架屏替换 | e9fdd71
@@ -118,24 +172,30 @@
  - | 下拉加载定期任务传参，时间格式化修改 | [0b95a0e](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/0b95a0e)
  - | 任务开始时间延迟插件 | [992a313](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/992a313)
  - | 修改main | [749ae9a](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/749ae9a)
+ - | 修改小红点传参 | [87b20fd](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/87b20fd)
  - | 修改报错 | [531c14d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/531c14d)
  - | 修改接口路径 | [df6acf2](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/df6acf2)
  - | 修改角色栏组件 | [a54c601](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/a54c601)
+ - | 切换到默认项目角色没有激活状态的bug | [438d448](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/438d448)
  - | 切换日历时查询小红点 | [7091789](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/7091789)
  - | 定期任务接口 | [aa4981c](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/aa4981c)
  - | 定期任务插件 | [92b3254](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/92b3254)
  - | 定期任务未加载时,显示空的时间轴并能上下滑动 | [ce38093](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/ce38093)
+ - | 定期任务骨架屏修改 | [8ff72dd](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/8ff72dd)
  - | 平车演示临时去掉项目快捷方式的toast提示 | [e0b2c23](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e0b2c23)
  - | 手动展开日常任务 | [0a4a622](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/0a4a622)
  - | 提示信息显示bug及日常任务收缩问题 | [f2f06c5](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/f2f06c5)
  - | 插件bug解决 | [41257eb](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/41257eb)
+ - | 收到消息修改任务状态 | [c378063](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c378063)
  - | 日常任务html数据查验 | [880ce5c](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/880ce5c)
  - | 日常任务插件遍历时的key值修改 | [cd26285](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/cd26285)
  - | 日常任务插件面板高度修改 | [249f9e4](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/249f9e4)
  - | 时间轴上下滑动 | [4d0ae46](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/4d0ae46)
  - | 时间轴上下滚动数据加载bug修改 | [e82ede4](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e82ede4)
  - | 时间轴插件 | [225d3cc](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/225d3cc)
+ - | 时间轴无任务时时间刻度加载修改 | [4921672](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/4921672)
  - | 时间轴骨架屏修改 | [ca78d02](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/ca78d02)
+ - | 角色显示状态修改 | [7d3b906](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/7d3b906)
  - | 角色栏修改 | [19228d6](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/19228d6)
  - | 解决时间轴报错 | [da1eece](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/da1eece)
  - | 骨架屏替换 | [e9fdd71](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e9fdd71)
@@ -150,7 +210,11 @@
 ### 🔧 测试
 范围|描述|commitId
 --|--|--
+ - | 暂时移除了jest浏览器配置 | 5088d01
+ - | 添加测试，测试utils/time.js的computeDurationText | e758010
  - | 禁用任务开始操作 | b5425db
+ - | 添加测试，测试utils/time.js的computeDurationText | [e758010](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e758010)
+ - | 禁用任务开始操作 | [b5425db](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/b5425db)
 
 
 ### 🔨 代码重构
@@ -207,3 +271,6 @@
  - | style:index | 978f272
  - | !2 基础模板v1.1.0 | f5e61dd
  - | init | c0f1deb
+ - | style:index | [978f272](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/978f272)
+ - | !2 基础模板v1.1.0 | [f5e61dd](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/f5e61dd)
+ - | init | [c0f1deb](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c0f1deb)

jest.config.js

@@ -0,0 +1,52 @@
+module.exports = {
+  globalTeardown: '@dcloudio/uni-automator/dist/teardown.js',
+  // testEnvironment: '@dcloudio/uni-automator/dist/environment.js',
+  testEnvironmentOptions: {
+    compile: true,
+    h5: {
+      // 为了节省测试时间，可以指定一个 H5 的 url 地址，若不指定，每次运行测试，会先 npm run dev:h5
+      url: 'http://localhost:8080/tall/v3.0.1/#/h5',
+      options: {
+        headless: true, // 配置是否显示 puppeteer 测试窗口
+        args: ['--no-sandbox'],
+      },
+    },
+    'app-plus': {
+      // 需要安装 HBuilderX
+      android: {
+        executablePath: 'HBuilderX/plugins/launcher/base/android_base.apk', // apk 目录
+      },
+      ios: {
+        // uuid 必须配置，目前仅支持模拟器，可以（xcrun simctl list）查看要使用的模拟器 uuid
+        id: '',
+        executablePath: 'HBuilderX/plugins/launcher/base/Pandora_simulator.app', // ipa 目录
+      },
+    },
+    'mp-weixin': {
+      port: 9420, // 默认 9420
+      account: '', // 测试账号
+      args: '', // 指定开发者工具参数
+      cwd: '', // 指定开发者工具工作目录
+      launch: true, // 是否主动拉起开发者工具
+      teardown: 'disconnect', // 可选值 "disconnect"|"close" 运行测试结束后，断开开发者工具或关闭开发者工具
+      remote: false, // 是否真机自动化测试
+      executablePath: '', // 开发者工具cli路径，默认会自动查找,  windows: C:/Program Files (x86)/Tencent/微信web开发者工具/cli.bat", mac: /Applications/wechatwebdevtools.app/Contents/MacOS/cli
+    },
+    'mp-baidu': {
+      port: 9430, // 默认 9430
+      args: '', // 指定开发者工具参数
+      cwd: '', // 指定开发者工具工作目录
+      launch: true, // 是否主动拉起开发者工具
+      teardown: 'disconnect', // 可选值 "disconnect"|"close" 运行测试结束后，断开开发者工具或关闭开发者工具
+      remote: false, // 是否真机自动化测试
+      executablePath: '', // 开发者工具cli路径，默认会自动查找
+    },
+  },
+  testTimeout: 15000,
+  reporters: ['default'],
+  watchPathIgnorePatterns: ['/node_modules/', '/dist/', '/.git/'],
+  moduleFileExtensions: ['js', 'json'],
+  rootDir: __dirname,
+  testMatch: ['<rootDir>/src/test/**/*test.[jt]s?(x)'], // 测试文件目录
+  testPathIgnorePatterns: ['/node_modules/'],
+};

package.json

@@ -7,6 +7,7 @@
     "build": "npm run build:h5",
     "lint": "vue-cli-service lint",
     "fix": "vue-cli-service lint --fix",
+    "test": "npm run test:h5",
     "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --mode development",
     "dev:h5-pro": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --mode production",
     "build:h5-test": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build --mode development",
@@ -89,6 +90,7 @@
     "postcss-class-rename": "^1.0.1",
     "postcss-comment": "^2.0.0",
     "prettier": "^2.2.1",
+    "puppeteer": "^10.2.0",
     "right-pad": "^1.0.1",
     "sass-loader": "^8.0.2",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",

src/App.vue

@@ -14,6 +14,7 @@ export default {
         await this.getToken(options.query.u);
       }
     }
+    this.initSocket();
   },
   onShow: function () {
     console.log('App Show');
@@ -24,11 +25,15 @@ export default {
 
   computed: mapState('user', ['token']),
 
-  methods: { ...mapActions('user', ['getToken']) },
+  methods: {
+    ...mapActions('user', ['getToken']),
+    ...mapActions('socket', ['initSocket']),
+  },
 };
 </script>
 
 <style lang="scss">
 @import './common/styles/iconfont.scss';
 @import 'uview-ui/index.scss';
+@import './common/styles/app.scss';
 </style>

src/common/styles/app.scss

@@ -0,0 +1,3 @@
+.min-0 {
+  min-width: 0;
+}

src/components/Calendar/Calendar.vue

@@ -39,7 +39,7 @@
                 <view class="date" :class="[item.isToday ? todayClass : '', item.fullDate === selectedDate ? checkedClass : '']">
                   {{ item.time.getDate() }}
                 </view>
-                <view class="dot-show" v-if="item.info === '1'" :style="dotStyle"> </view>
+                <view class="dot-show" v-if="item.info === '0'" :style="dotStyle"> </view>
               </view>
             </template>
             <template v-else>
@@ -104,7 +104,7 @@ export default {
     dotStyle: {
       type: Object,
       default: () => {
-        return { background: '#FF0000' };
+        return { background: '#4ade80' };
       },
     },
   },
@@ -112,9 +112,10 @@ export default {
   watch: {
     dotList: function (newvalue) {
       const days = this.days.slice(0);
+      const index = days.findIndex(day => day.show);
       days.forEach((day, i) => {
         newvalue.forEach((item, j) => {
-          if (i === j) {
+          if (i - index === j) {
             day.info = item;
           }
         });
@@ -224,14 +225,18 @@ export default {
       if (current - pre === 1 || current - pre === -2) {
         // 下一个月 或 下一周
         this.daysNext();
-        this.start = this.$t.time.add(this.start, 1, 'month').valueOf();
+        const arr = this.days.filter(s => s.show);
-        this.end = this.$t.time.add(this.end, 1, 'month').valueOf();
+        const end = `${arr[arr.length - 1].fullDate} 23:59:59`;
+        this.start = this.$moment(arr[0].fullDate).valueOf();
+        this.end = this.$moment(end).valueOf();
         this.$emit('handleFindPoint', this.start, this.end);
       } else {
         // 上一个月 或 上一周
         this.daysPre();
-        this.start = this.$t.time.add(this.start, -1, 'month').valueOf();
+        const arr = this.days.filter(s => s.show);
-        this.end = this.$t.time.add(this.end, -1, 'month').valueOf();
+        const end = `${arr[arr.length - 1].fullDate} 23:59:59`;
+        this.start = this.$moment(arr[0].fullDate).valueOf();
+        this.end = this.$moment(end).valueOf();
         this.$emit('handleFindPoint', this.start, this.end);
       }
     },

src/components/Roles/Roles.vue

@@ -3,12 +3,14 @@
     <view class="home-box u-skeleton">
       <scroll-view :enable-flex="true" :scroll-left="scrollLeft" :throttle="false" scroll-with-animation scroll-x>
         <view class="tab-box">
+          <!-- 角色项 -->
           <view :key="index" @click="changeRole(item.id, index)" class="tab-item" v-for="(item, index) in roles">
             <view :class="setColor(item.mine, item.id)" class="tab-children u-skeleton-fillet u-font-14">{{ item.name }}</view>
           </view>
         </view>
       </scroll-view>
     </view>
+    <!-- 骨架屏 -->
     <u-skeleton :animation="true" :loading="loading" bg-color="#fff"></u-skeleton>
   </view>
 </template>
@@ -20,25 +22,13 @@ export default {
   name: 'Roles',
   data() {
     return {
-      tabIndex: 0, //当前访问的 index 默认为0
+      tabIndex: 0, // 当前访问的 index 默认为0
-      tabList: [], //tab dom节点集合
+      tabList: [], // tab dom节点集合
-      scrollLeft: 0, //scrollview需要滚动的距离
+      scrollLeft: 0, // scrollview需要滚动的距离
       loading: false, // 是否显示骨架屏组件
       roles: [
-        {
+        { id: 1, name: '项目经理', mine: 0, pm: 1, sequence: 1 },
-          id: 1,
+        { id: 2, name: '运维', mine: 0, pm: 0, sequence: 2 },
-          name: '项目经理',
-          mine: 0,
-          pm: 1,
-          sequence: 1,
-        },
-        {
-          id: 2,
-          name: '运维',
-          mine: 0,
-          pm: 0,
-          sequence: 2,
-        },
       ],
     };
   },
@@ -68,7 +58,7 @@ export default {
   methods: {
     ...mapActions('task', ['handleRegularTask']),
     ...mapMutations('role', ['setRoleId']),
-    ...mapMutations('task', ['setTasks', 'setPermanents', 'setDailyTasks', 'clearEndFlag']),
+    ...mapMutations('task', ['setPermanents', 'setDailyTasks', 'clearEndFlag']),
 
     // 设置滚动位置
     setCurrentRole(index) {
@@ -101,11 +91,10 @@ export default {
           this.setRoleId(id);
           //改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
           this.setCurrentRole(index);
-          // 清空定期任务数据
-          this.setTasks();
           // 清空日常任务的数据
           this.setPermanents([]);
           this.setDailyTasks([]);
+          // 清空定期任务数据
           // 到顶的标志复位
           // 到底的标志复位
           this.clearEndFlag();
@@ -131,15 +120,12 @@ export default {
     // 设置文字颜色
     setColor(mine, id) {
       const { roleId } = this;
-      if (mine === '1' && roleId === id) {
+      // 是 我的角色 && 当前展示
-        return 'default-tab-choice';
+      if (+mine === 1 && roleId === id) return 'default-tab-choice';
-      }
+      // 是 我的角色 && 当前不展示
-      if (mine === '1' && roleId !== id) {
+      if (+mine === 1 && roleId !== id) return 'default-tab-item';
-        return 'default-tab-item';
+      // 不是我的 && 当前展示
-      }
+      if (+mine === 0 && roleId === id) return 'tab-choice';
-      if (mine === '0' && roleId === id) {
-        return 'tab-choice';
-      }
     },
   },
 };

src/components/TimeLine/TimeLine.vue

@@ -14,9 +14,7 @@
   >
     <!-- 时间轴 -->
     <!-- <u-divider bg-color="#f3f4f6" class="pt-5" fontSize="14px" v-if="topEnd">到顶啦</u-divider> -->
-
     <TimeBox />
-
     <!-- <u-divider bg-color="#f3f4f6" class="pb-5" fontSize="14px" v-if="bottomEnd">到底啦</u-divider> -->
   </scroll-view>
 </template>
@@ -56,32 +54,36 @@ export default {
 
     // 滚动到顶部
     async handleScrollTop() {
-      if (this.topEnd) return;
+      if (!this.tasks || !this.tasks.length) return;
       const startTime = this.tasks[0].planStart - 0;
-      if (this.tasks[0].plugins && this.tasks[0].plugins.length === 0 && !this.topEnd) {
+      if ((this.tasks[0].plugins && this.tasks[0].plugins.length === 0) || this.topEnd) {
         // 没有数据时 自动加载数据
-        console.warn('没有数据时: ');
+        console.warn('滚动到顶部没有数据时: ');
         const addTasks = [
           {
             panel: {},
             plugins: [],
+            process: 4,
             planStart: this.$t.time.add(startTime, -3, 'day').valueOf(),
           },
           {
             panel: {},
             plugins: [],
+            process: 4,
             planStart: this.$t.time.add(startTime, -2, 'day').valueOf(),
           },
           {
             panel: {},
             plugins: [],
+            process: 4,
             planStart: this.$t.time.add(startTime, -1, 'day').valueOf(),
           },
         ];
-        this.setUpTasks([...addTasks.concat(this.tasks)]);
+
+        this.setUpTasks(addTasks);
       } else {
         // 有数据时
-        console.warn('有数据时: ');
+        console.warn('滚动到顶部有数据时: ');
         const upQuery = {
           timeNode: startTime,
           queryType: 0,
@@ -93,29 +95,33 @@ export default {
 
     // 滚动到底部
     async handleScrollBottom() {
-      if (this.bottomEnd) return;
+      if (!this.tasks || !this.tasks.length) return;
       const { tasks, timeGranularity } = this;
       const startTime = tasks[tasks.length - 1].planStart - 0;
-      if (tasks[0].plugins && tasks[0].plugins.length === 0 && !this.topEnd) {
+      if ((tasks[0].plugins && tasks[0].plugins.length === 0) || this.bottomEnd) {
         // 没有数据时 自动加载数据
+        console.warn('滚动到底部没有数据时: ');
         const addTasks = [
           {
             panel: {},
             plugins: [],
+            process: 4,
             planStart: this.$t.time.add(startTime, 1, timeGranularity).valueOf(),
           },
           {
             panel: {},
             plugins: [],
+            process: 4,
             planStart: this.$t.time.add(startTime, 2, timeGranularity).valueOf(),
           },
           {
             panel: {},
             plugins: [],
+            process: 4,
             planStart: this.$t.time.add(startTime, 3, timeGranularity).valueOf(),
           },
         ];
-        this.setDownTasks([...tasks.concat(addTasks)]);
+        this.setDownTasks(addTasks);
       } else {
         // 时间基准点=最后一个任务的开始时间+当前时间颗粒度
         const timeNode = this.$t.time.add(startTime, 1, timeGranularity).valueOf();

src/components/TimeLine/component/TimeBox.vue

@@ -1,18 +1,19 @@
 <template>
   <view class="column">
-    <view v-if="tasks && tasks.length">
+    <!-- v-if="tasks && tasks.length" -->
+    <view>
       <view :key="index" v-for="(task, index) in tasks">
         <view class="flex">
           <TimeStatus :task="task" />
-
           <view class="flex items-center justify-between flex-1 ml-2 task-column">
-            <view>{{ $moment(+task.planStart).format(startTimeFormat) }}</view>
+            <view v-if="task.process !== 4">{{ $moment(+task.planStart).format(startTimeFormat) }}</view>
-
+            <view v-else>{{ $moment(+task.planStart).format('D日') }}</view>
             <!-- 任务功能菜单 -->
-            <TaskTools />
+            <TaskTools v-if="task.process !== 4" />
           </view>
         </view>
         <view class="border-l-2 border-gray-300 plugin">
+          <view class="h-3" v-if="task.process === 4"></view>
           <view class="ml-3 overflow-hidden shadow-lg task-box">
             <u-card
               :show-foot="false"
@@ -21,16 +22,29 @@
               @click="onClickTask(+task.planStart)"
               class="h-16"
               margin="0"
+              v-if="showSkeleton"
             >
-              <!-- v-if="task.plugins && task.plugins.length" -->
-              <!-- 任务面板插件 -->
               <view slot="body">
                 <!-- TODO: 逻辑不完善 -->
-                <view v-if="!task.plugins.length">
+                <view>
                   <skeleton :banner="false" :loading="true" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
                 </view>
+              </view>
+            </u-card>
 
-                <view class="p-0 u-col-between" v-else>
+            <u-card
+              :show-foot="false"
+              :show-head="false"
+              :style="{ height: setHeight(task.panel) }"
+              @click="onClickTask(+task.planStart)"
+              class="h-16"
+              margin="0"
+              v-if="tasks && tasks.length && task.process !== 4 && !showSkeleton"
+            >
+              <!-- v-if="task.plugins && task.plugins.length" -->
+              <!-- 任务面板插件 -->
+              <view slot="body">
+                <view class="p-0 u-col-between">
                   <view :key="pIndex" v-for="(row, pIndex) in task.plugins">
                     <view class="grid gap-2" v-if="row.length">
                       <Plugin
@@ -52,10 +66,6 @@
         </view>
       </view>
     </view>
-    <view v-else class="flex flex-row items-center ml-1">
-      <u-icon name="plus-circle" color="#2979ff" size="40" class="mr-2"></u-icon>
-      新建任务
-    </view>
     <!-- 局部弹框操作栏 -->
     <Tips />
   </view>
@@ -77,7 +87,7 @@ export default {
 
   computed: {
     ...mapState('role', ['roleId']),
-    ...mapState('task', ['timeUnit', 'tasks', 'taskLoading']),
+    ...mapState('task', ['timeUnit', 'tasks', 'taskLoading', 'topEnd', 'bottomEnd', 'showSkeleton']),
     ...mapGetters('task', ['startTimeFormat']),
   },
 

src/components/TimeLine/component/TimeStatus.vue

@@ -1,12 +1,17 @@
 <template>
   <view class="u-font-14">
-    <view class="flex items-center justify-center rounded-full icon-column" :style="{ color: orderStyle.color }" @tap="changeStatus">
+    <view
+      class="flex items-center justify-center rounded-full icon-column"
+      :style="{ color: orderStyle.color }"
+      @tap="changeStatus($event, task.process)"
+    >
       <u-circle-progress
-        :percent="orderStyle.persent"
+        :percent="+orderStyle.persent"
         :active-color="orderStyle.color"
         bg-color="rgba(255,255,255,0)"
         border-width="4"
         width="66"
+        v-if="task.process !== 4"
       >
         <view class="u-progress-content">
           <view class="u-progress-dot"></view>
@@ -16,6 +21,22 @@
           </view>
         </view>
       </u-circle-progress>
+      <!-- 新增任务 -->
+      <u-circle-progress
+        :percent="+orderStyle.persent"
+        :active-color="orderStyle.color"
+        bg-color="rgba(255,255,255,0)"
+        border-width="4"
+        width="50"
+        v-else
+      >
+        <view class="u-progress-content">
+          <view class="u-progress-dot"></view>
+          <view class="u-progress-info">
+            <u-icon :name="orderStyle.icon" size="15px"></u-icon>
+          </view>
+        </view>
+      </u-circle-progress>
     </view>
   </view>
 </template>
@@ -75,6 +96,11 @@ export default {
           icon = 'checkmark';
           persent = 100;
           break;
+        case 4: // 添加任务
+          color = '#60A5FA';
+          icon = 'plus';
+          persent = 100;
+          break;
         default:
           // 未开始
           color = '#9CA3AF';
@@ -93,7 +119,12 @@ export default {
      * 点击了图标 修改任务状态
      * @param {object} event
      */
-    changeStatus(event) {
+    changeStatus(event, process) {
+      console.log('event, process: ', event, process);
+      if (process === 4) {
+        this.addTask();
+        return;
+      }
       // return false;
       const { status, taskId, taskName, tip } = this;
       tip.status = status;
@@ -106,6 +137,11 @@ export default {
       this.setTip(tip);
     },
 
+    // 新建任务
+    addTask() {
+      this.$t.ui.showToast('新建任务');
+    },
+
     // 计算圆环的弧度百分比
     computeCyclePersent() {
       if (!this.task || !this.task.realStart || !this.task.planDuration) return 100;
@@ -134,46 +170,20 @@ export default {
     // 剩余时间 = 预计结束时间 - 当前时间
     // 剩余时间 = realStart + planDuration - Date.now()
     computeDurationText() {
-      try {
+      if (this.timer) {
-        if (this.timer) {
+        clearTimeout(this.timer);
-          clearTimeout(this.timer);
+        this.timer = null;
-          this.timer = null;
+      }
-        }
+      const { realStart, planDuration } = this.task;
-        const { realStart, planDuration } = this.task;
+      const leftTime = +realStart + +planDuration - Date.now(); // 剩余时间
-        const leftTime = +realStart + +planDuration - Date.now(); // 剩余时间
+      const { num, time } = this.$t.time.computeDurationText(leftTime);
-        console.log('leftTime: ', leftTime, this.$moment.duration(leftTime));
+      this.$nextTick(() => {
-        if (leftTime < 0) return 0;
+        if (!time) return;
-        const { years, months, days, hours, minutes, seconds, milliseconds } = this.$moment.duration(leftTime);
-        let num = 0;
-        let time = 1000;
-
-        if (years > 0) {
-          num = years;
-          time = 60 * 60 * 1000; // 按小时
-        } else if (months > 0) {
-          num = months;
-          time = 60 * 60 * 1000; // 按小时
-        } else if (days > 0) {
-          num = days;
-          time = 60 * 60 * 1000; // 按小时
-        } else if (hours > 0) {
-          num = hours;
-        } else if (minutes > 0) {
-          num = minutes;
-        } else if (seconds > 0) {
-          num = seconds;
-        } else if (milliseconds > 0) {
-          num = milliseconds;
-          time = 16;
-        }
         this.timer = setTimeout(() => {
           this.computeDurationText();
         }, time);
-        return num;
+      });
-      } catch (error) {
+      return num;
-        console.error('🚀 ~ file: TimeStatus.vue ~ line 174 ~ computeDurationText ~ error', error);
-        return 0;
-      }
     },
   },
 };

src/components/Tips/Tips.vue

@@ -77,7 +77,7 @@ export default {
           this.$t.ui.showToast('项目结束');
         }
         this.tip.show = false;
-        location.reload();
+        // location.reload();
         // this.$router.go(0);
       } catch (error) {
         console.error(error);

src/components/Title/Title.vue

@@ -1,27 +1,42 @@
 <template>
   <view>
-    <u-navbar :is-back="false" back-text="返回" class="overflow-hidden">
+    <u-navbar :is-back="showBack" class="overflow-hidden">
-      <view class="flex justify-start px-3 font-bold" style="width: 460rpx">
+      <view class="flex justify-start flex-1 pr-3 font-bold min-0">
         <view class="truncate">{{ project.name }}</view>
       </view>
       <view class="mr-2" slot="right">
         <u-icon class="m-1" name="xuanzhong2" custom-prefix="custom-icon" size="20px" @click="lwbs"></u-icon>
         <u-icon class="m-1" name="shuaxin1" custom-prefix="custom-icon" size="20px" @click="projectOverview"></u-icon>
-        <u-icon class="m-1" name="home" custom-prefix="custom-icon" size="20px" @click="statistics"></u-icon>
+        <u-icon class="m-1" name="home" custom-prefix="custom-icon" size="20px" @click="openIndex"></u-icon>
         <u-icon class="m-1" name="xuanxiang" custom-prefix="custom-icon" size="20px" @click="operation"></u-icon>
       </view>
     </u-navbar>
   </view>
 </template>
 <script>
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 
 export default {
   name: 'ProjectTitle',
+  data() {
+    return { showBack: false };
+  },
+  computed: {
+    ...mapState('project', ['project']),
+    ...mapGetters('user', ['userId']),
+  },
 
-  computed: mapState('project', ['project']),
+  created() {
+    this.initBackIcon();
+  },
 
   methods: {
+    // 初始化是否显示返回按钮
+    initBackIcon() {
+      const pages = getCurrentPages(); // 获取页面栈数组
+      this.showBack = pages.length > 1;
+    },
+
     // LWBS提示
     lwbs() {
       // this.$t.ui.showToast('LWBS');
@@ -30,9 +45,9 @@ export default {
     projectOverview() {
       // this.$t.ui.showToast('项目概览');
     },
-    //统计
+    // 回到首页
-    statistics() {
+    openIndex() {
-      // this.$t.ui.showToast('统计');
+      this.$u.route('/', { u: this.userId });
     },
     //操作
     operation() {
@@ -41,3 +56,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+/deep/ .u-slot-content {
+  min-width: 0;
+}
+</style>

src/components/Upload/Upload.vue

@@ -14,7 +14,6 @@ export default {
     async handleUpload() {
       try {
         const data = await this.$u.api.import();
-        console.log('data: ', data);
         // 导入WBS成功后
         // 直接打开导入的项目
         this.$emit('success');

src/pages/project/project.vue

@@ -68,6 +68,10 @@ export default {
     this.height = window.screen.height + 'px';
   },
 
+  onUnload() {
+    this.clearEndFlag();
+  },
+
   methods: {
     ...mapActions('user', ['getToken']),
     ...mapActions('project', ['getProjectById']),
@@ -76,7 +80,7 @@ export default {
     ...mapMutations('user', ['setToken']),
     ...mapMutations('project', ['setProject', 'setProjectName']),
     ...mapMutations('role', ['setInvisibleRoles', 'setVisibleRoles', 'setRoleId']),
-    ...mapMutations('task', ['setUpTasks', 'setDownTasks', 'setDailyTasks', 'setTimeNode']),
+    ...mapMutations('task', ['setUpTasks', 'setDownTasks', 'setDailyTasks', 'setTimeNode', 'clearEndFlag', 'setShowSkeleton']),
 
     /**
      * 初始化
@@ -107,6 +111,8 @@ export default {
           // 根据项目id获取角色列表
           await this.getRoles({ projectId: options.p });
           this.setInitialRoleId(this.visibleRoles);
+          // 获取初始定期任务
+          // await this.getInitTasks();
         }
       } catch (error) {
         console.error('project init function:', error);
@@ -120,7 +126,7 @@ export default {
       await this.getTasks({ queryType: 1 });
 
       // 预加载 上下的定期任务
-      if (this.tasks && this.tasks.length) {
+      if (this.tasks && this.tasks.length && this.tasks.plugins && this.tasks.plugins.length) {
         this.$nextTick(() => {
           const { tasks, timeGranularity } = this;
           this.getTasks({ timeNode: +tasks[0].planStart, queryType: 0, queryNum: 6 });
@@ -128,6 +134,11 @@ export default {
           const nextQueryTime = +this.$t.time.add(+tasks[tasks.length - 1].planStart, 1, timeGranularity);
           this.getTasks({ timeNode: nextQueryTime, queryType: 1, queryNum: 6 });
         });
+      } else {
+        // 向上加载
+        this.setUpTasks();
+        // 向下加载
+        this.setDownTasks();
       }
     },
 
@@ -150,6 +161,7 @@ export default {
      */
     async getTasks(query) {
       try {
+        this.setShowSkeleton(true);
         const { roleId, timeNode, timeUnit } = this;
         const params = {
           roleId,
@@ -160,7 +172,9 @@ export default {
         };
 
         await this.getRegulars(params);
+        this.setShowSkeleton(false);
       } catch (error) {
+        this.setShowSkeleton(false);
         console.error('error: ', error);
       }
     },

src/store/socket/actions.js

@@ -58,6 +58,9 @@ const actions = {
       case 'Sync': // 开始某个节点
         commit('messages/messagesAdd', { message: data, type: 'syncMessages' }, { root: true });
         break;
+      case 'taskStatus': // 任务状态修改相关消息
+        commit('task/setTaskStatus', data.data, { root: true });
+        break;
       // case 'Chrome': // !收到开始游戏的消息
       //   console.log('handleMessagesData', data);
       //   // @ts-ignore

src/store/task/actions.js

@@ -36,9 +36,9 @@ const actions = {
   async getRegulars({ commit, state }, param) {
     try {
       // 向上查 且 上边没数据了 不查
-      if (param.queryType === 0 && state.topEnd) return;
+      // if (param.queryType === 0) return;
       // 向下查 且 下边美术家了 不查
-      if (param.queryType === 1 && state.bottomEnd) return;
+      // if (param.queryType === 1) return;
       const data = await uni.$u.api.getRegularTask(param);
       // 0 -> 向上  1 -> 向下
       // data 有无的判断在mutations里

src/store/task/mutations.js

@@ -71,11 +71,39 @@ const mutations = {
   setUpTasks(state, data) {
     if (!data || !data.length) {
       state.topEnd = true;
-    }
+      let sTime = '';
-    if (!state.tasks[0].name) {
+      if (!state.tasks || !state.tasks.length) {
-      state.tasks = [...data];
+        sTime = +new Date().getTime();
+      } else {
+        sTime = +state.tasks[0].planStart - 0;
+      }
+      const initData = [
+        {
+          panel: {},
+          plugins: [],
+          process: 4,
+          planStart: uni.$t.time.add(sTime, -3, 'day').valueOf(),
+        },
+        {
+          panel: {},
+          plugins: [],
+          process: 4,
+          planStart: uni.$t.time.add(sTime, -2, 'day').valueOf(),
+        },
+        {
+          panel: {},
+          plugins: [],
+          process: 4,
+          planStart: uni.$t.time.add(sTime, -1, 'day').valueOf(),
+        },
+      ];
+      state.tasks = [...initData.concat(state.tasks)];
     } else {
-      state.tasks = [...data.concat(state.tasks)];
+      if (!state.tasks && !state.tasks.length) {
+        state.tasks = [...data];
+      } else {
+        state.tasks = [...data.concat(state.tasks)];
+      }
     }
   },
 
@@ -87,40 +115,42 @@ const mutations = {
   setDownTasks(state, data) {
     if (!data || !data.length) {
       state.bottomEnd = true;
-    }
+      let sTime = '';
-    if (!state.tasks[0] || !state.tasks[0].name) {
+      if (!state.tasks || !state.tasks.length) {
-      state.tasks = [...data];
+        sTime = +new Date().getTime();
+      } else {
+        sTime = +state.tasks[state.tasks.length - 1].planStart - 0;
+      }
+      const initData = [
+        {
+          panel: {},
+          plugins: [],
+          process: 4,
+          planStart: uni.$t.time.add(sTime, 1, 'day').valueOf(),
+        },
+        {
+          panel: {},
+          plugins: [],
+          process: 4,
+          planStart: uni.$t.time.add(sTime, 2, 'day').valueOf(),
+        },
+        {
+          panel: {},
+          plugins: [],
+          process: 4,
+          planStart: uni.$t.time.add(sTime, 3, 'day').valueOf(),
+        },
+      ];
+      state.tasks = [...state.tasks.concat(initData)];
     } else {
-      state.tasks = [...state.tasks.concat(data)];
+      if (!state.tasks && !state.tasks.length) {
+        state.tasks = [...data];
+      } else {
+        state.tasks = [...state.tasks.concat(data)];
+      }
     }
   },
 
-  /**
-   * 清空定期任务数据
-   * @param {Object} state
-   */
-  setTasks(state) {
-    const time = +new Date().getTime();
-    const data = [
-      {
-        panel: {},
-        plugins: [],
-        planStart: uni.$t.time.add(time, -1, 'day').valueOf(),
-      },
-      {
-        panel: {},
-        plugins: [],
-        planStart: time,
-      },
-      {
-        panel: {},
-        plugins: [],
-        planStart: uni.$t.time.add(time, 1, 'day').valueOf(),
-      },
-    ];
-    state.tasks = data;
-  },
-
   /**
    * 设置日常任务数据
    * @param {Object} state
@@ -139,11 +169,31 @@ const mutations = {
     state.permanents = tasks || [];
   },
 
-  // 清空标志位 如切换角色等使用
+  // 清空标志位 任务 如切换角色等使用
   clearEndFlag(state) {
+    state.tasks = [];
     state.topEnd = false;
     state.bottomEnd = false;
   },
+
+  /**
+   * 收到消息设置任务状态
+   * @param {Object} state
+   * @param {Array} data 服务端返回的模板数组
+   */
+  setTaskStatus(state, data) {
+    const item = state.tasks.find(i => i.id === data.id);
+    item.process = data.taskStatus;
+  },
+
+  /**
+   * 设置骨架屏是否显示
+   * @param {Object} state
+   * @param {Boolean} show
+   */
+  setShowSkeleton(state, show) {
+    state.showSkeleton = show;
+  },
 };
 
 export default mutations;

src/store/task/state.js

@@ -23,23 +23,8 @@ const state = {
   permanents: [], // 永久日常任务
   dailyTasks: [], // 日常任务
   // 定期任务
-  tasks: [
+  tasks: [],
-    {
+  showSkeleton: false, // 定期任务骨架屏
-      panel: {},
-      plugins: [],
-      planStart: uni.$t.time.add(+new Date().getTime(), -1, 'day').valueOf(),
-    },
-    {
-      panel: {},
-      plugins: [],
-      planStart: new Date().getTime(),
-    },
-    {
-      panel: {},
-      plugins: [],
-      planStart: uni.$t.time.add(+new Date().getTime(), 1, 'day').valueOf(),
-    },
-  ],
 };
 
 export default state;

src/test/util/time.test.js

@@ -0,0 +1,46 @@
+import Time from '../../utils/time.js';
+
+// 测试计算进行中剩余时长显示数值
+describe('utils/time.js computeDurationText function', () => {
+  const { computeDurationText } = Time;
+  // const leftTime = +realStart + +planDuration - Date.now(); // 剩余时间
+  it ('leftTime is 60ms, num=60, time=16', () => {
+    expect(computeDurationText(60)).toEqual({ num: 60, time: 16 })
+  })
+
+  it ('leftTime is 300ms, num=300, time=16', () => {
+    expect(computeDurationText(300)).toEqual({ num: 300, time: 16 })
+  })
+
+  it ('leftTime is 10s20ms, num=10, time=1000', () => {
+    expect(computeDurationText(10*1000 + 20)).toEqual({ num: 10, time: 1000 })
+  })
+
+  it ('leftTime is 8分钟10s20ms, num=8, time=1000', () => {
+    expect(computeDurationText(8*60*1000 + 10*1000 + 20)).toEqual({ num: 8, time: 1000 })
+  })
+
+  it ('leftTime is 3小时8分钟10s20ms, num=3, time=1000', () => {
+    expect(computeDurationText(3*60*60*1000 + 8*60*1000 + 10*1000 + 20)).toEqual({ num: 3, time: 1000 })
+  })
+
+  it ('leftTime is 11天3小时8分钟10s20ms, num=11, time=60 * 60 * 1000', () => {
+    expect(computeDurationText(11*24*60*60*1000 + 3*60*60*1000 + 8*60*1000 + 10*1000 + 20)).toEqual({ num: 11, time: 60 * 60 * 1000 })
+  })
+
+  it ('leftTime is 2个月11天3小时8分钟10s20ms, num=2, time=60 * 60 * 1000', () => {
+    expect(computeDurationText(2*30*24*60*60*1000 + 11*24*60*60*1000 + 3*60*60*1000 + 8*60*1000 + 10*1000 + 20)).toEqual({ num: 2, time: 60 * 60 * 1000 })
+  })
+
+  it ('leftTime is 7年2个月11天3小时8分钟10s20ms, num=7, time=60 * 60 * 1000', () => {
+    expect(computeDurationText(7*12*30*24*60*60*1000 + 2*30*24*60*60*1000 + 11*24*60*60*1000 + 3*60*60*1000 + 8*60*1000 + 10*1000 + 20)).toEqual({ num: 7, time: 60 * 60 * 1000 })
+  })
+
+  it ('leftTime <=0, num=0, time=null', () => {
+    expect(computeDurationText(-10)).toEqual({ num: 0, time: null })
+  })
+
+  it ('leftTime 不是数字, num=0, time=null', () => {
+    expect(computeDurationText('abc')).toEqual({ num: 0, time: null })
+  })
+})

src/utils/time.js

@@ -297,6 +297,46 @@ const formatStartTimeToCycleTime = (cycle, time) => {
   return result;
 };
 
+/**
+ * 计算进行中状态剩余时间 显示数字
+ * @param {number} leftTime 剩余时间ms
+ * @returns { num: 显示的数字, time: 演示器演示时长 }
+ */
+const computeDurationText = leftTime => {
+  try {
+    if (leftTime < 0) return { num: 0, time: null };
+    const { years, months, days, hours, minutes, seconds, milliseconds } = dayjs.duration(leftTime).$d;
+    let num = 0;
+    let time = 1000;
+
+    if (years > 0) {
+      num = years;
+      time = 60 * 60 * 1000; // 按小时
+    } else if (months > 0) {
+      num = months;
+      time = 60 * 60 * 1000; // 按小时
+    } else if (days > 0) {
+      num = days;
+      time = 60 * 60 * 1000; // 按小时
+    } else if (hours > 0) {
+      num = hours;
+    } else if (minutes > 0) {
+      num = minutes;
+    } else if (seconds > 0) {
+      num = seconds;
+    } else if (milliseconds > 0) {
+      num = milliseconds;
+      time = 16;
+    } else {
+      time = null;
+    }
+    return { num, time };
+  } catch (error) {
+    console.log('🚀 ~ file: time.js ~ line 335 ~ computeDurationText ~ error', error);
+    return { num: 0, time: null };
+  }
+};
+
 export default {
   formatNumber,
   formatTime,
@@ -310,4 +350,5 @@ export default {
   formatObjectTimeToMs,
   computeCycle,
   formatStartTimeToCycleTime,
+  computeDurationText,
 };