fix: 定期任务骨架屏修改

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 0.1.0 (2021-08-12)
+# 0.1.0 (2021-08-13)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -108,6 +108,7 @@
  - | 时间轴上下滑动 | [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)

src/components/TimeLine/component/TimeBox.vue

@@ -21,7 +21,7 @@
               @click="onClickTask(+task.planStart)"
               class="h-16"
               margin="0"
-              v-if="!tasks && !tasks.length"
+              v-if="showSkeleton"
             >
               <view slot="body">
                 <!-- TODO: 逻辑不完善 -->
@@ -38,7 +38,7 @@
               @click="onClickTask(+task.planStart)"
               class="h-16"
               margin="0"
-              v-if="tasks && tasks.length && task.process !== 4"
+              v-if="tasks && tasks.length && task.process !== 4 && !showSkeleton"
             >
               <!-- v-if="task.plugins && task.plugins.length" -->
               <!-- 任务面板插件 -->
@@ -86,7 +86,7 @@ export default {
 
   computed: {
     ...mapState('role', ['roleId']),
-    ...mapState('task', ['timeUnit', 'tasks', 'taskLoading', 'topEnd', 'bottomEnd']),
+    ...mapState('task', ['timeUnit', 'tasks', 'taskLoading', 'topEnd', 'bottomEnd', 'showSkeleton']),
     ...mapGetters('task', ['startTimeFormat']),
   },
 

src/components/TimeLine/component/TimeStatus.vue

@@ -10,19 +10,33 @@
         :active-color="orderStyle.color"
         bg-color="rgba(255,255,255,0)"
         border-width="4"
-        :width="task.process !== 4 ? 66 : 50"
+        width="66"
+        v-if="task.process !== 4"
       >
         <view class="u-progress-content">
           <view class="u-progress-dot"></view>
           <view class="u-progress-info">
-            <span v-if="orderStyle.icon">
-              <u-icon :name="orderStyle.icon" v-if="task.process !== 4" size="15px"></u-icon>
-              <u-icon :name="orderStyle.icon" v-else size="13px"></u-icon>
-            </span>
+            <u-icon :name="orderStyle.icon" v-if="orderStyle.icon" size="15px"></u-icon>
             <template v-else>{{ computeDurationText() }}</template>
           </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>

src/pages/project/project.vue

@@ -80,7 +80,7 @@ export default {
     ...mapMutations('user', ['setToken']),
     ...mapMutations('project', ['setProject', 'setProjectName']),
     ...mapMutations('role', ['setInvisibleRoles', 'setVisibleRoles', 'setRoleId']),
-    ...mapMutations('task', ['setUpTasks', 'setDownTasks', 'setDailyTasks', 'setTimeNode', 'clearEndFlag']),
+    ...mapMutations('task', ['setUpTasks', 'setDownTasks', 'setDailyTasks', 'setTimeNode', 'clearEndFlag', 'setShowSkeleton']),
 
     /**
      * 初始化
@@ -161,6 +161,7 @@ export default {
      */
     async getTasks(query) {
       try {
+        this.setShowSkeleton(true);
         const { roleId, timeNode, timeUnit } = this;
         const params = {
           roleId,
@@ -171,7 +172,9 @@ export default {
         };
 
         await this.getRegulars(params);
+        this.setShowSkeleton(false);
       } catch (error) {
+        this.setShowSkeleton(false);
         console.error('error: ', error);
       }
     },

src/store/task/mutations.js

@@ -185,6 +185,15 @@ const mutations = {
     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

@@ -43,6 +43,7 @@ const state = {
     //   planStart: uni.$t.time.add(+new Date().getTime(), 1, 'day').valueOf(),
     // },
   ],
+  showSkeleton: false, // 定期任务骨架屏
 };
 
 export default state;