diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0ac9889..aece1b7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -71,6 +71,7 @@
 范围|描述|commitId
 --|--|--
  - | 测试接口 | [215e074](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/215e074)
+ - | 插件查询及展示 | [4dba770](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4dba770)
  - | 角色栏文字颜色修改 | [215c6b3](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/215c6b3)
  - | 解决警告 | [c932b09](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/c932b09)
  - | 组件文件夹新建 | [22bfe7b](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/22bfe7b)
diff --git a/src/apis/plugin.js b/src/apis/plugin.js
index d6f686b..caeb006 100644
--- a/src/apis/plugin.js
+++ b/src/apis/plugin.js
@@ -4,7 +4,7 @@ const plugin = `${apiUrl}/pluginshop/plugin`;
 
 const install = (Vue, vm) => {
   vm.$u.api = { ...vm.$u.api } || {};
-  vm.$u.api.getPlugin = param => vm.$u.post(`${mock}/plugin`, { param });
+  vm.$u.api.getPlugin = param => vm.$u.post(`${mock}/plugin`, param);
   vm.$u.api.getOtherPlugin = param => vm.$u.post(`${plugin}/query`, param);
 };
 
diff --git a/src/common/styles/iconfont.scss b/src/common/styles/iconfont.scss
index a1ba791..69b157e 100644
--- a/src/common/styles/iconfont.scss
+++ b/src/common/styles/iconfont.scss
@@ -1,6 +1,6 @@
 @font-face {
-  font-family: 'custom-icon'; /* Project id 2685595 */
-  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVsAAsAAAAACgAAAAUfAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqGfIV2ATYCJAMQCwoABCAFhQsHURurCMiuMYUxPrWYbZJ11AENNuDWinu9B3343wTPy36/c+WrJmkq4NUbnswqIdo6oyVCh0pjZM3kN/Sb+9vabmY0s5OZwYtCdsO5QNnpi6ia8CLyL4qgGGt7b54+glfxrBKtmXWGqFaCp0B7SiATEr1ANPXvGzvOkmQsS994MvzlXijX3tRv70+uPsD5P2a6+rgS+DYAiUqMLBrYLNryeeZlUwrdgcsp3zK86iB34z4IiBvJJR7XVDYCxyMKmYEvKb1YEAXLkZ6hgJKT8gqiiArC0K2pSryAEPRW3AB48n5e/iSGEiqUpF9oa4fQglNvlF+/krv/O0w+Mra/NDxdQQgY6M1MLnvV2nOSwNYjES+ySM0BlCVK0Wvbz9vn/6foq+JGjX95YJRAMnRukoAZju0YzSLB8HWdBMXXc/oJcJ3MjoIIpAsgJwhUvkUYmwyUFcbgMUNP8NZs7bxRHjnzp3oxW69OvXx796hdkdpN5y5Ebxkdwyy0i/vNo9wbK1Xk1tF54gvn5PfeNWr37ctTr8YwJ4XR/NAFC9xLZaNP2FbujgGf9ZwyD3DnQc33oheKon7aLHNKrdlOcW+0bV5gW7ibN8+jySFrJfPtigKKzb6vTcXsU1BaIFpe6HwCu/HkmhO2hddjq6Os03jJqjnAq0/wSUKsCLT6KWyVajV+esn9acKTJM832i45UpN9vEPRUT/rJt1Vl7sTtltjd1k1fPmx0O7qFsi9o/lcd+Piclq/x9+580euFfJOCmlCHm/aHdDEN/PVN2zf9aPirdu0KH7P0SfDgoYGPQFri6pmqOdydenxe+I+WE4sH5ScnFTZJ+RLfZZHvhxl+quLBcFV4bqiUqj8l3pCPinq2zdJobhZQax0/jn2f2PJLqEkFUKCDGdd67Hz6D/QX4mH+54XSbEkO1wwcsrateiYAnm2zJj4XzyIP9iZJnPb2yQxR7jJ0iyxJGZOZNQb5edFksqISkmx1C8hrsyzYxI92fKrJEUZRVVE8EfIvDkhSo+Dj/vvmGKPBEm+ISJUYzGXqGI63CfMLYviAmXcHlXBldMNmsSZESsm7p81fsPwjGLxrMnDPa52Cvf9K/u+bBkq9nogPMTf6hWWem4in+r5+O+msp5NnqCxc74uZw8BPnaYGyL7iGpFM6qiCGYIzm4BL6ccX5slzxpOHy1i2UhUcchS+VJUpKlS3BzxfVT8lW8BEVPoJtfHVEeU/vg2X8xlNFB4xED/XyMHq8EtAARbEjtvdvYsqQWCpGk26h+cxt/IEQ39nbL/c1x/46efq5IwYTz+IRqY+sd54MMBnGyKATz1lKgWBcCVmPYRGLYoiBsK+MVckPekD2HhPTpEQiGCKqIGTUId6WCEDIFlZBiswbiuOkpvs4eRkFQeNMzEUJTthyrtDZqy+0gHXxEhbMiQYeAH4w4i4biERkws4iCFoBZrGYzpadasM6MQ3WlBrAnXOtdDptNIcUJ6aG6GnEWPS7EEdXyBswSaIdfdCksXk4iQDtNxrAnT9HsxaDSyWDvHtkEaqVsRas+Mi9MVvYmaZk2gCAeiIJAWpsVgGD0ay0znHEJonSwQlgle8XvqQYxORhSuOo8CSzOI47h6MhhMArV4GLKEa4ZmneEqiy6MRAiig1lcrp0eo5mzGjIaNhamvXhSG4iGqLW2sLTLFEcK6aBc9bh80wWvAeL0m3okIhmpSIuvI0TRrSZoRvYm1gwH06zRuOFr7IrwlkFGnIPazkEAAAA=')
+  font-family: 'custom-icon'; /* Project id 2470633 */
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,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')
     format('woff2');
 }
 
@@ -12,14 +12,246 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.custom-icon-attachment:before {
-  content: '\e7e1';
+.custom-icon-xuanzhong2:before {
+  content: '\e63a';
+}
+
+.custom-icon-xuanzhong21:before {
+  content: '\e714';
+}
+
+.custom-icon-shuaxin1:before {
+  content: '\e6a8';
+}
+
+.custom-icon-xuanxiang:before {
+  content: '\e611';
+}
+
+.custom-icon-cluster:before {
+  content: '\e7d7';
 }
 
 .custom-icon-moneycollect:before {
   content: '\e7cd';
 }
 
+.custom-icon-C-shangchuan:before {
+  content: '\e6c5';
+}
+
+.custom-icon-C-integral:before {
+  content: '\e6f9';
+}
+
+.custom-icon-calendar1:before {
+  content: '\e746';
+}
+
+.custom-icon-C-suggest:before {
+  content: '\e767';
+}
+
+.custom-icon-usercenter:before {
+  content: '\e773';
+}
+
+.custom-icon-play-circle:before {
+  content: '\e782';
+}
+
+.custom-icon-message:before {
+  content: '\e78a';
+}
+
+.custom-icon-plus-circle:before {
+  content: '\e781';
+}
+
+.custom-icon-smile:before {
+  content: '\e783';
+}
+
+.custom-icon-C-yuyin:before {
+  content: '\e79a';
+}
+
+.custom-icon-doubleleft:before {
+  content: '\e7ef';
+}
+
+.custom-icon-doubleright:before {
+  content: '\e7f0';
+}
+
+.custom-icon-ellipsis:before {
+  content: '\e7fe';
+}
+
+.custom-icon-C-L:before {
+  content: '\e601';
+}
+
+.custom-icon-C-kaiguanguan:before {
+  content: '\e66c';
+}
+
+.custom-icon-C-kaiguanguan1:before {
+  content: '\e60c';
+}
+
+.custom-icon-close-circle:before {
+  content: '\e77d';
+}
+
+.custom-icon-time-circle:before {
+  content: '\e784';
+}
+
+.custom-icon-warning-circle:before {
+  content: '\e785';
+}
+
+.custom-icon-sync:before {
+  content: '\e786';
+}
+
+.custom-icon-reloadtime:before {
+  content: '\e789';
+}
+
+.custom-icon-edit-square:before {
+  content: '\e791';
+}
+
+.custom-icon-export:before {
+  content: '\e792';
+}
+
+.custom-icon-Import:before {
+  content: '\e793';
+}
+
+.custom-icon-check-square:before {
+  content: '\e7a8';
+}
+
+.custom-icon-border:before {
+  content: '\e7a9';
+}
+
+.custom-icon-user:before {
+  content: '\e7ae';
+}
+
+.custom-icon-delete:before {
+  content: '\e7c3';
+}
+
+.custom-icon-home:before {
+  content: '\e7c6';
+}
+
+.custom-icon-accountbook:before {
+  content: '\e7d3';
+}
+
+.custom-icon-carryout:before {
+  content: '\e7d4';
+}
+
+.custom-icon-calendar:before {
+  content: '\e7d5';
+}
+
+.custom-icon-cloud-upload:before {
+  content: '\e7d9';
+}
+
+.custom-icon-attachment:before {
+  content: '\e7e1';
+}
+
+.custom-icon-edit:before {
+  content: '\e7e2';
+}
+
+.custom-icon-tag:before {
+  content: '\e7e4';
+}
+
+.custom-icon-right:before {
+  content: '\e7eb';
+}
+
+.custom-icon-left:before {
+  content: '\e7ec';
+}
+
+.custom-icon-up:before {
+  content: '\e7ed';
+}
+
+.custom-icon-down:before {
+  content: '\e7ee';
+}
+
+.custom-icon-check:before {
+  content: '\e7fc';
+}
+
+.custom-icon-close:before {
+  content: '\e7fd';
+}
+
+.custom-icon-apartment:before {
+  content: '\e897';
+}
+
+.custom-icon-rili1:before {
+  content: '\e617';
+}
+
+.custom-icon-caret-right:before {
+  content: '\e8ec';
+}
+
+.custom-icon-search:before {
+  content: '\e8ef';
+}
+
+.custom-icon-C-naozhong_huabanfuben:before {
+  content: '\e655';
+}
+
+.custom-icon-plus:before {
+  content: '\e8fe';
+}
+
+.custom-icon-C-filter:before {
+  content: '\e667';
+}
+
+.custom-icon-C-tongji1:before {
+  content: '\e69b';
+}
+
+.custom-icon-genderless:before {
+  content: '\e888';
+}
+
+.custom-icon-C-zujian251:before {
+  content: '\e61e';
+}
+
+.custom-icon-user-avatar:before {
+  content: '\e61d';
+}
+
 .custom-icon-C-bxl-redux:before {
   content: '\e608';
 }
+
+.custom-icon-shoucangfuben:before {
+  content: '\e600';
+}
diff --git a/src/common/styles/iconfont.ttf b/src/common/styles/iconfont.ttf
deleted file mode 100644
index 9e533b8..0000000
Binary files a/src/common/styles/iconfont.ttf and /dev/null differ
diff --git a/src/components/Plugin/Plugin.vue b/src/components/Plugin/Plugin.vue
index 53b2180..f65b078 100644
--- a/src/components/Plugin/Plugin.vue
+++ b/src/components/Plugin/Plugin.vue
@@ -1,6 +1,5 @@
 <template>
   <view v-if="pluginContent && pluginContent.html" style="height: 100%">
-    <!-- <view> {{ pluginContent.html }} </view> -->
     <view v-if="item && item.name">
       <p-task-title :item="item" v-if="pluginId === '1'" />
       <p-task-description :item="item" v-if="pluginId === '2'" />
@@ -12,7 +11,6 @@
       <p-task-countdown :item="item" v-if="pluginId === '8'" />
     </view>
     <view v-html="pluginContent.html" style="height: 100%"> </view>
-    <!-- <u-parse :html="pluginContent.html" ref="ht-box"></u-parse> -->
   </view>
 </template>
 
@@ -36,9 +34,15 @@ export default {
   data() {
     return { pluginContent: null };
   },
-  async mounted() {
+  async created() {
     await this.getPlugin();
     console.log(this.pluginContent.js);
+    if (this.pluginContent.js) {
+      var scriptDom = document.createElement('script');
+      scriptDom.id = `p${this.pluginContent.pluginId}`;
+      scriptDom.innerHTML = this.pluginContent.js;
+      document.body.append(scriptDom);
+    }
   },
   methods: {
     async getPlugin() {
@@ -48,6 +52,7 @@ export default {
         styleType,
       });
       this.pluginContent = res;
+      console.log(this.pluginContent);
     },
   },
 };
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 @@
 <template>
   <view class="wrap bg-white px-2">
-    <role-list @getTasks="getTasks" />
+    <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="changeIndex(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">{{ item.name }}</view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <u-skeleton :animation="true" :loading="loading" bg-color="#fff"></u-skeleton>
   </view>
 </template>
 
 <script>
-import RoleList from './component/RoleList';
+import { mapState, mapMutations, mapActions } from 'vuex';
 
 export default {
   name: 'Roles',
-  components: { RoleList },
   data() {
-    return {};
+    return {
+      tabIndex: 0, //当前访问的 index 默认为0
+      tabList: [], //tab dom节点集合
+      scrollLeft: 0, //scrollview需要滚动的距离
+      loading: false, // 是否显示骨架屏组件
+      roles: [
+        {
+          id: 1,
+          name: '项目经理',
+          mine: 0,
+          pm: 1,
+          sequence: 1,
+        },
+        {
+          id: 2,
+          name: '运维',
+          mine: 0,
+          pm: 0,
+          sequence: 2,
+        },
+      ],
+    };
   },
+
+  computed: { ...mapState('home', ['visibleRoles', 'roleId', 'tasks']) },
+
+  watch: {
+    visibleRoles(val) {
+      if (val && val.length) {
+        this.roles = [...this.visibleRoles];
+        this.loading = false;
+      }
+    },
+  },
+
+  mounted() {
+    if (!this.visibleRoles || !this.visibleRoles.length) {
+      this.loading = true;
+    } else {
+      this.roles = [...this.visibleRoles];
+    }
+  },
+
   methods: {
-    getTasks(query) {
-      console.log('query: ', query);
-      this.$emit('getTasks', query);
+    ...mapMutations('home', ['setRoleId', 'setTasks']),
+    ...mapActions('home', ['handleRegularTask']),
+
+    // 设置滚动位置
+    setCurrentRole(index) {
+      const data = document.getElementsByClassName('tab-children');
+      // 获取当前所有子元素 并插入到 tabList 列表中
+      data.forEach(item => {
+        this.tabList.push({
+          width: item.clientWidth,
+          left: item.offsetLeft,
+        });
+      });
+      //当前滚动的位置
+      let left = 0;
+      let screenWidth = window.screen.width;
+      for (let i = 0; i < index; i++) {
+        left += this.tabList[i].width + this.tabList[i].left * 2;
+      }
+      left += this.tabList[index].width;
+      this.scrollLeft = left - screenWidth / 2;
+    },
+
+    // 切换角色
+    async changeIndex(id, index) {
+      try {
+        this.setRoleId(id);
+        //改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
+        this.setCurrentRole(index);
+        // 清空定期任务数据
+        this.setTasks([]);
+        // 根据时间基准点和角色查找定期任务
+        await this.$emit('getTasksByRole');
+      } catch (error) {
+        console.log('error: ', error);
+      }
+    },
+
+    // 设置文字颜色
+    setColor(mine, id) {
+      const { roleId } = this;
+      if (mine === '1' && roleId === id) {
+        return 'default-tab-choice';
+      }
+      if (mine === '1' && roleId !== id) {
+        return 'default-tab-item';
+      }
+      if (mine === '0' && roleId === id) {
+        return 'tab-choice';
+      }
     },
   },
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped>
+.home-box {
+  // 对此盒子进行 sticky 粘性定位
+  position: sticky;
+  top: 0;
+  background: #fff; // 设置背景 否则会透明
+
+  /* #ifdef H5 */
+  //粘性定位 在h5下 加 原生头部高度 44px
+  top: 88rpx;
+  /* #endif */
+
+  .tab-box {
+    position: relative;
+    white-space: nowrap;
+    // height: 84rpx;
+
+    .tab-item {
+      // width: 20%;
+      // height: 84rpx;
+      padding: 20rpx 24rpx;
+      position: relative;
+      display: inline-block;
+      text-align: center;
+      font-size: 30rpx;
+      transition-property: background-color, width;
+    }
+
+    .default-tab-item {
+      color: $roleChoiceColor;
+    }
+
+    .default-tab-choice {
+      //当前选中 基于此类名给与底部选中框
+      position: relative;
+      color: $roleChoiceColor;
+      font-weight: 600;
+    }
+
+    .default-tab-choice:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -20rpx;
+      width: 100%;
+      height: 6rpx;
+      border-radius: 2rpx;
+      background: $roleChoiceColor;
+    }
+
+    .tab-choice {
+      //当前选中 基于此类名给与底部选中框
+      position: relative;
+      color: $uni-color-primary;
+      font-weight: 600;
+    }
+
+    .tab-choice:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -20rpx;
+      width: 100%;
+      height: 6rpx;
+      border-radius: 2rpx;
+      background: $uni-color-primary;
+    }
+  }
+}
+
+// // 删除 底部滚动条
+/* #ifndef APP-NVUE */
+::-webkit-scrollbar,
+::-webkit-scrollbar,
+::-webkit-scrollbar {
+  display: none;
+  width: 0 !important;
+  height: 0 !important;
+  -webkit-appearance: none;
+  background: transparent;
+}
+
+/* #endif */
+/* #ifdef H5 */
+// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
+scroll-view ::v-deep ::-webkit-scrollbar {
+  display: none;
+}
+
+/* #endif */
+
+.skeleton {
+  height: 44rpx;
+}
+</style>
diff --git a/src/components/Roles/component/RoleList.vue b/src/components/Roles/component/RoleList.vue
deleted file mode 100644
index 9defd9a..0000000
--- a/src/components/Roles/component/RoleList.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-<template>
-  <view>
-    <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="changeIndex(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">{{ item.name }}</view>
-          </view>
-        </view>
-      </scroll-view>
-    </view>
-    <u-skeleton :animation="true" :loading="loading" bg-color="#fff"></u-skeleton>
-  </view>
-</template>
-
-<script>
-import { mapState, mapMutations, mapActions } from 'vuex';
-
-export default {
-  name: 'RoleList',
-  data() {
-    return {
-      tabIndex: 0, //当前访问的 index 默认为0
-      tabList: [], //tab dom节点集合
-      scrollLeft: 0, //scrollview需要滚动的距离
-      loading: false, // 是否显示骨架屏组件
-      roles: [
-        {
-          id: 1,
-          name: '项目经理',
-          mine: 0,
-          pm: 1,
-          sequence: 1,
-        },
-        {
-          id: 2,
-          name: '运维',
-          mine: 0,
-          pm: 0,
-          sequence: 2,
-        },
-      ],
-    };
-  },
-
-  computed: { ...mapState('home', ['visibleRoles', 'roleId', 'tasks']) },
-
-  watch: {
-    visibleRoles(val) {
-      if (val && val.length) {
-        this.roles = [...this.visibleRoles];
-        this.loading = false;
-      }
-    },
-  },
-
-  mounted() {
-    if (!this.visibleRoles || !this.visibleRoles.length) {
-      this.loading = true;
-    }
-  },
-
-  methods: {
-    ...mapMutations('home', ['setRoleId']),
-    ...mapActions('home', ['handleRegularTask']),
-
-    setCurrentRole(index) {
-      const data = document.getElementsByClassName('tab-children');
-      // 获取当前所有子元素 并插入到 tabList 列表中
-      data.forEach(item => {
-        this.tabList.push({
-          width: item.clientWidth,
-          left: item.offsetLeft,
-        });
-      });
-      //当前滚动的位置
-      let left = 0;
-      let screenWidth = window.screen.width;
-      for (let i = 0; i < index; i++) {
-        left += this.tabList[i].width + this.tabList[i].left * 2;
-      }
-      left += this.tabList[index].width;
-      this.scrollLeft = left - screenWidth / 2;
-    },
-
-    async changeIndex(id, index) {
-      this.setRoleId(id);
-      //改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
-      this.setCurrentRole(index);
-      // 根据时间基准点和角色查找定期任务
-      await this.$emit('getTasks', { queryType: 0 });
-      await this.$emit('getTasks', { queryType: 1 });
-      console.log('this.tasks && this.tasks.length: ', this.tasks && this.tasks.length);
-      if (this.tasks && this.tasks.length) {
-        // debugger;
-        // 查上下的任务
-        const upQuery = {
-          timeNode: +this.tasks[0].planStart,
-          queryType: 0,
-          queryNum: 6,
-        };
-        console.log('upQuery: ', upQuery);
-        await this.$emit('getTasks', upQuery);
-        const downQuery = {
-          timeNode: +this.tasks[this.tasks.length - 1].planStart,
-          queryType: 0,
-          queryNum: 6,
-        };
-        console.log('downQuery: ', downQuery);
-        await this.$emit('getTasks', downQuery);
-      }
-    },
-
-    // 设置文字颜色
-    setColor(mine, id) {
-      const { roleId } = this;
-      if (mine === '1' && roleId === id) {
-        return 'default-tab-choice';
-      }
-      if (mine === '1' && roleId !== id) {
-        return 'default-tab-item';
-      }
-      if (mine === '0' && roleId === id) {
-        return 'tab-choice';
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.home-box {
-  // 对此盒子进行 sticky 粘性定位
-  position: sticky;
-  top: 0;
-  background: #fff; // 设置背景 否则会透明
-
-  /* #ifdef H5 */
-  //粘性定位 在h5下 加 原生头部高度 44px
-  top: 88rpx;
-  /* #endif */
-
-  .tab-box {
-    position: relative;
-    white-space: nowrap;
-    // height: 84rpx;
-
-    .tab-item {
-      // width: 20%;
-      // height: 84rpx;
-      padding: 20rpx 24rpx;
-      position: relative;
-      display: inline-block;
-      text-align: center;
-      font-size: 30rpx;
-      transition-property: background-color, width;
-    }
-
-    .default-tab-item {
-      color: $roleChoiceColor;
-    }
-
-    .default-tab-choice {
-      //当前选中 基于此类名给与底部选中框
-      position: relative;
-      color: $roleChoiceColor;
-      font-weight: 600;
-    }
-
-    .default-tab-choice:before {
-      content: '';
-      position: absolute;
-      left: 0;
-      bottom: -20rpx;
-      width: 100%;
-      height: 6rpx;
-      border-radius: 2rpx;
-      background: $roleChoiceColor;
-    }
-
-    .tab-choice {
-      //当前选中 基于此类名给与底部选中框
-      position: relative;
-      color: $uni-color-primary;
-      font-weight: 600;
-    }
-
-    .tab-choice:before {
-      content: '';
-      position: absolute;
-      left: 0;
-      bottom: -20rpx;
-      width: 100%;
-      height: 6rpx;
-      border-radius: 2rpx;
-      background: $uni-color-primary;
-    }
-  }
-}
-
-// // 删除 底部滚动条
-/* #ifndef APP-NVUE */
-::-webkit-scrollbar,
-::-webkit-scrollbar,
-::-webkit-scrollbar {
-  display: none;
-  width: 0 !important;
-  height: 0 !important;
-  -webkit-appearance: none;
-  background: transparent;
-}
-
-/* #endif */
-/* #ifdef H5 */
-// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
-scroll-view ::v-deep ::-webkit-scrollbar {
-  display: none;
-}
-
-/* #endif */
-
-.skeleton {
-  height: 44rpx;
-}
-</style>
diff --git a/src/components/TimeLine/TimeLine.vue b/src/components/TimeLine/TimeLine.vue
index 94bc45f..3afb46f 100644
--- a/src/components/TimeLine/TimeLine.vue
+++ b/src/components/TimeLine/TimeLine.vue
@@ -8,6 +8,7 @@
 <template>
   <!-- 时间间隔栏 -->
   <!-- <Barrier /> -->
+
   <scroll-view
     :lower-threshold="300"
     :scrollTop="top"
@@ -19,7 +20,9 @@
     id="scroll"
   >
     <!-- 时间轴 -->
+    <u-divider bg-color="#f3f4f6" class="pt-5" v-if="topEnd">到顶啦</u-divider>
     <TimeBox />
+    <u-divider bg-color="#f3f4f6" class="pb-5" v-if="bottomEnd">到底啦</u-divider>
   </scroll-view>
 </template>
 
@@ -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,28 @@ 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 cycle = this.$t.time.computeCycle('天');
+      const timeNode = this.$t.time.add(+this.tasks[this.tasks.length - 1].planStart, 1, cycle).valueOf();
+      const downQuery = {
+        timeNode,
+        queryType: 1,
+        queryNum: 6,
+      };
+      await this.$emit('getTasks', downQuery);
     },
 
     // 设置基准点
@@ -64,13 +84,21 @@ export default {
       if (tasks && tasks.length) {
         let tasksHeight = 0;
         const scrollHeight = document.getElementById('scroll').clientHeight;
+        let width = document.documentElement.clientWidth;
         for (let i = 0; i < 3; i++) {
           // TODO: 高度不对
-          // if (tasks[i].panel && tasks[i].panel.height) {
-          //   tasksHeight += +tasks[i].panel.height + 42;
-          // }
+          if (tasks[i].panel && tasks[i].panel.height) {
+            // 如果后台返回了高度，就用返回得任务面板高度 + 固定边距42
+            tasksHeight += +tasks[i].panel.height + 42;
+          } else {
+            // 如果没有返回高度，就用rem + 固定边距42
+            // 因为 u-card 在没有返回高度时 固定高度为 h-16 = 4rem
+            // 所里这里 += 1rem + 42 = width / 20 + 42
+            tasksHeight += (width / 20) * 4 + 42;
+          }
         }
         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..555e9e3 100644
--- a/src/components/TimeLine/component/TimeBox.vue
+++ b/src/components/TimeLine/component/TimeBox.vue
@@ -1,11 +1,10 @@
 <template>
-  <view class="px-3 pb-10">
+  <view class="px-3 py-5">
     <view :key="index" v-for="(item, index) in tasks">
-      <view class="flex items-center">
+      <view class="flex">
         <TimeStatus :content="JSON.stringify(item.process)" :status="item.process" />
-        <view class="flex justify-between flex-1 ml-2">
-          <view>{{ $u.timeFormat(+item.planStart, 'mm-dd hh:MM') }}</view>
-          <!-- {{ $u.timeFormat(+item.planDuration, false) }} -->
+        <view class="flex justify-between items-center flex-1 ml-2">
+          <view>{{ $moment(+item.planStart).format('MM-DD HH:mm') }} {{ $t.time.formatDuration(item.planDuration) }}</view>
           <view>
             <view class="flex justify-between" style="min-width: 180rpx">
               <u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="34"></u-icon>
@@ -17,10 +16,29 @@
       </view>
       <view class="border-l-2 border-gray-300 ml-3.5 my-2">
         <view class="ml-4 overflow-hidden shadow-lg task-box">
-          <u-card :show-foot="false" :show-head="false" :style="{ height: setHeight(item.panel) }" class="h-16" margin="0">
+          <u-card
+            :show-foot="false"
+            :show-head="false"
+            :style="{ height: setHeight(item.panel) }"
+            @click="changeTimeNode(item.planStart)"
+            class="h-16"
+            margin="0"
+          >
             <!-- 任务面板插件 -->
             <view slot="body">
-              <view :key="pluginIndex" class="p-0 u-col-between u-skeleton" v-for="(plugin, pluginIndex) in item.plugins">
+              <skeleton :banner="false" :loading="!item.plugins.length" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
+              <view class="p-0 u-col-between">
+                <view class="grid grid-cols-3 gap-2 h-36" v-if="item.plugins.length">
+                  <Plugin
+                    :class="getClass(plugin.col, plugin.row)"
+                    :key="pluginIndex"
+                    :pluginId="plugin.pluginId"
+                    :styleType="styleType"
+                    v-for="(plugin, pluginIndex) in item.plugins"
+                  />
+                </view>
+              </view>
+              <!-- <view :key="pluginIndex" class="p-0 u-col-between u-skeleton" v-for="(plugin, pluginIndex) in item.plugins">
                 <view :key="p.pluginId" v-for="p in plugin">
                   <p-task-title :item="item" v-if="p.pluginId === 1" />
                   <p-task-description :item="item" v-if="p.pluginId === 2" />
@@ -31,7 +49,7 @@
                   <p-subproject :item="item" v-if="p.pluginId === 7" />
                   <p-task-countdown :item="item" v-if="p.pluginId === 8" />
                 </view>
-              </view>
+              </view>-->
             </view>
           </u-card>
         </view>
@@ -44,12 +62,13 @@
 <script>
 import { mapState, mapMutations } from 'vuex';
 import TimeStatus from './TimeStatus.vue';
+import Skeleton from '@/components/Skeleton/Skeleton';
 
 export default {
   name: 'TimeBox',
-  components: { TimeStatus },
+  components: { TimeStatus, Skeleton },
   data() {
-    return { currentComponent: '' };
+    return { currentComponent: '', styleType: 0 };
   },
 
   computed: mapState('home', ['roleId', 'timeNode', 'timeUnit', 'tasks']),
@@ -57,7 +76,7 @@ export default {
   created() {},
 
   methods: {
-    ...mapMutations('home', ['setTipsContent', 'setTipsContent']),
+    ...mapMutations('home', ['setTipsContent', 'setTipsContent', 'setTimeNode']),
 
     // 设置任务面板高度
     setHeight(panel) {
@@ -67,6 +86,11 @@ export default {
         return 'auto';
       }
     },
+
+    // 点击任务面板 修改store时间基准点
+    changeTimeNode(time) {
+      this.setTimeNode(time);
+    },
   },
 };
 </script>
diff --git a/src/components/Title/Title.vue b/src/components/Title/Title.vue
index e69d3cc..84d36be 100644
--- a/src/components/Title/Title.vue
+++ b/src/components/Title/Title.vue
@@ -5,10 +5,10 @@
         <view>{{ project.name }}</view>
       </view>
       <view class="mr-2" slot="right">
-        <u-icon class="m-1" name="checkmark-circle"></u-icon>
-        <u-icon class="m-1" name="reload"></u-icon>
-        <u-icon class="m-1" name="home"></u-icon>
-        <u-icon class="m-1" name="more-dot-fill"></u-icon>
+        <u-icon class="m-1" name="xuanzhong2" custom-prefix="custom-icon" size="38"></u-icon>
+        <u-icon class="m-1" name="shuaxin1" custom-prefix="custom-icon" size="38"></u-icon>
+        <u-icon class="m-1" name="home" custom-prefix="custom-icon" size="38"></u-icon>
+        <u-icon class="m-1" name="xuanxiang" custom-prefix="custom-icon" size="38"></u-icon>
       </view>
     </u-navbar>
   </view>
diff --git a/src/config/time.js b/src/config/time.js
new file mode 100644
index 0000000..7c8ecd4
--- /dev/null
+++ b/src/config/time.js
@@ -0,0 +1,17 @@
+export default {
+  timeUnits: [
+    // 时间颗粒度
+    { id: 0, value: '毫秒' },
+    { id: 1, value: '秒' },
+    { id: 2, value: '分' },
+    { id: 3, value: '时' },
+    { id: 4, value: '天' },
+    { id: 5, value: '周' },
+    { id: 6, value: '月' },
+    { id: 7, value: '季度' },
+    { id: 8, value: '年' },
+    { id: 9, value: '年代' },
+    { id: 10, value: '世纪' },
+    { id: 11, value: '千年' },
+  ],
+};
diff --git a/src/main.js b/src/main.js
index b5ed992..0d2bfa6 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';
@@ -16,9 +17,12 @@ Vue.use(indexedDB);
 //#endif
 
 Vue.config.productionTip = false;
+Vue.prototype.$moment = dayjs;
 Vue.use(uView);
 Vue.use(Tall);
 
+dayjs.locale('zh-cn');
+
 App.mpType = 'app';
 
 const app = new Vue({ ...App, store });
diff --git a/src/pages/project/project.vue b/src/pages/project/project.vue
index 8b1f507..4ba08a9 100644
--- a/src/pages/project/project.vue
+++ b/src/pages/project/project.vue
@@ -2,7 +2,7 @@
   <view :style="{ height: height }" class="flex flex-col overflow-hidden">
     <Title />
     <view class="container flex flex-col flex-1 overflow-hidden bg-gray-100">
-      <Roles @getTasks="getTasks" />
+      <Roles @getTasksByRole="getTasksByRole" />
       <Globals :plugins="allPlugins.concat(timePlugins)" />
       <TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="child" />
     </view>
@@ -46,6 +46,7 @@ export default {
 
   async onLoad(options) {
     console.log('options: ', options);
+
     // this.openPage();
     const TOKEN = uni.getStorageSync('anyringToken');
     if (!TOKEN || !this.token) {
@@ -67,9 +68,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 });
     }
   },
@@ -122,10 +121,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);
       }
@@ -170,6 +167,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..9b2d85d 100644
--- a/src/store/home/state.js
+++ b/src/store/home/state.js
@@ -14,22 +14,9 @@ const state = {
   roleId: '', // 当前展示查看的角色id
   timeNode: new Date().getTime(), // 时间基准点
   timeUnit: 4, // // 时间颗粒度
-  timeUnits: [
-    // 时间颗粒度
-    { id: 0, value: '毫秒' },
-    { id: 1, value: '秒' },
-    { id: 2, value: '分' },
-    { id: 3, value: '时' },
-    { id: 4, value: '天' },
-    { id: 5, value: '周' },
-    { id: 6, value: '月' },
-    { id: 7, value: '季度' },
-    { id: 8, value: '年' },
-    { id: 9, value: '年代' },
-    { id: 10, value: '世纪' },
-    { id: 11, value: '千年' },
-  ],
   tasks: [], // 定期任务
+  topEnd: false, // 时间轴向上查任务到顶了
+  bottomEnd: false, // 时间轴向下查任务到底了
   dailyTasks: [], // 日常任务
 };
 
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..011f7d2
--- /dev/null
+++ b/src/utils/time.js
@@ -0,0 +1,309 @@
+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(':')}`;
+};
+
+/**
+ * 添加一定时间的时长
+ * @param {number | date} time
+ * @param {number} num
+ * @param {string} cycle
+ */
+const add = (time, num, cycle) => {
+  const str = dayjs(time).add(num, cycle);
+  return str;
+};
+
+/**
+ * 时间转换 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,
+  add,
+  convertTime,
+  secondToMinute,
+  setTimestampToStr,
+  formatBeginTime,
+  formatDuration,
+  formatDurationToObject,
+  formatObjectTimeToMs,
+  computeCycle,
+  formatStartTimeToCycleTime,
+};