feat: 调整时间轴

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 0.1.0 (2021-11-16)
+# 0.1.0 (2021-11-17)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -37,6 +37,7 @@
  - | 存token | [b8a178d](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/b8a178d)
  - | 定期任务面板骨架屏添加 | [b2698c0](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/b2698c0)
  富文本插件 | 富文本插件demo测试 | [ed3d644](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/ed3d644)
+ - | 对接测评相关api | [21451e0](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/21451e0)
  - | 导入wbs | [1224fcb](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/1224fcb)
  - | 导入项目,更新项目 | [5e06adf](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/5e06adf)
  - | 导入项目后提示并打开项目详情页 | [410f527](https://dd.tall.wiki/gitea/binbin0314/yanyuan_js/commits/410f527)

src/components/TimeLine/TimeLine.vue

@@ -53,7 +53,13 @@ export default {
     // 滚动到顶部
     async handleScrollTop() {
       if (!this.tasks || !this.tasks.length || this.showSkeleton) return;
-      const startTime = this.tasks[0].planStart - 0;
+      let startTime = null;
+      if (this.tasks[0].length) {
+        startTime = this.tasks[0][0].planStart - 0;
+      } else {
+        startTime = this.tasks[0].planStart - 0;
+      }
+
       if (this.topEnd) {
         // 没有数据时 自动加载数据
         console.warn('滚动到顶部没有数据时: ');
@@ -63,7 +69,25 @@ export default {
         // 有数据时
         console.warn('滚动到顶部有数据时: ');
         const detailId = this.tasks.findIndex(task => task.detailId);
-        const timeNode = this.tasks[detailId].planStart - 0;
+        let timeNode = '';
+
+        if (detailId !== -1) {
+          timeNode = this.tasks[detailId].planStart - 0;
+        } else {
+          let index = null;
+          let itemIndex = null;
+          for (let i = 0; i < this.tasks.length; i++) {
+            const task = this.tasks[i];
+            if (task && task.length) {
+              index = i;
+              itemIndex = task.findIndex(item => item.detailId);
+              if (itemIndex !== -1) {
+                break;
+              }
+            }
+          }
+          timeNode = this.tasks[index][itemIndex].planStart - 0;
+        }
         const upQuery = {
           timeNode,
           queryType: 0,
@@ -77,7 +101,12 @@ export default {
     async handleScrollBottom() {
       if (!this.tasks || !this.tasks.length || this.showSkeleton) return;
       const { tasks, timeGranularity } = this;
-      const startTime = tasks[tasks.length - 1].planStart - 0;
+      let startTime = null;
+      if (tasks[tasks.length - 1].length) {
+        startTime = tasks[tasks.length - 1][0].planStart - 0;
+      } else {
+        startTime = tasks[tasks.length - 1].planStart - 0;
+      }
       if (this.bottomEnd) {
         // 没有数据时 自动加载数据
         console.warn('滚动到底部没有数据时: ');
@@ -110,17 +139,36 @@ export default {
         this.setScrollToTaskId(`a${taskId}`);
         this.$t.storage.setStorageSync('taskId', ''); // 记录后即刻清除本地存储
       } else {
-        const item = this.tasks.find(task => task.detailId);
+        let item = null;
-        console.log('item: ', item);
+        // for (let i = 0; i < this.tasks.length; i++) {
-        if (item) {
+        //   const task = this.tasks[i];
-          this.setScrollToTaskId(`a${item.id}`);
+        //   if (task && task.length) {
-        } else {
+        //     index = i;
-          // 没有本地记录的taskId
+        //     item = task.find(item => item.detailId);
-          // 找到当前时间基准线的任务id 记录 并滚动到当前时间基准线
+        //     if (item !== -1) {
-          const task = this.tasks.find(item => this.$moment(+item.planStart).isSame(this.timeNode, this.timeGranularity));
+        //       break;
-          console.log('task: ', task);
+        //     }
-          task && this.setScrollToTaskId(`a${task.id}`); // 有这个task 就记录他的id
+        //   }
+        // }
+        // const item = this.tasks.find(task => task.detailId);
+        // if (item) {
+        //   this.setScrollToTaskId(`a${item.id}`);
+        // } else {
+        // 没有本地记录的taskId
+        // 找到当前时间基准线的任务id 记录 并滚动到当前时间基准线
+        for (let i = 0; i < this.tasks.length; i++) {
+          const task = this.tasks[i];
+          if (task && task.length) {
+            item = task.find(item => this.$moment(+item.planStart).isSame(this.timeNode, this.timeGranularity));
+            if (item) {
+              break;
+            }
+          }
         }
+        item && this.setScrollToTaskId(`a${item.id}`); // 有这个task 就记录他的id
+        // const task = this.tasks.find(item => this.$moment(+item.planStart).isSame(this.timeNode, this.timeGranularity));
+        // task && this.setScrollToTaskId(`a${task.id}`); // 有这个task 就记录他的id
+        // }
       }
     },
   },

src/components/TimeLine/component/TimeBox.vue

@@ -4,15 +4,12 @@
     <view>
       <view :key="task.id" v-for="task in tasks" :id="`a${task.id}`">
         <!-- 外层 -->
-        <view v-if="task.name">
+        <view v-if="task.id">
           <view class="flex">
             <TimeStatus :task="task" />
             <view class="flex items-center justify-between flex-1 ml-2 task-column">
               <view v-if="task.process !== 4">{{ $moment(+task.planStart).format(startTimeFormat) }}</view>
               <view v-else>{{ $moment(+task.planStart).format('D日') }}</view>
-
-              <!-- 任务功能菜单 -->
-              <!-- <TaskTools v-if="task.process !== 4" :task="task" /> -->
             </view>
           </view>
 
@@ -44,7 +41,6 @@
                 v-if="tasks && tasks.length && task.process !== 4 && !showSkeleton"
               >
                 <view slot="body">
-                  <!-- 脑力测评 -->
                   <view class="p-0 u-col-between">
                     <NotEvaluated :task="task" v-if="task.data.mentalTest.finishStatus === 0" />
                     <view v-else>
@@ -58,7 +54,57 @@
           </view>
         </view>
         <!-- 内层 -->
-        <view v-else> 内层 </view>
+        <view v-else>
+          <view class="flex">
+            <TimeStatus :task="task[0]" />
+            <view class="flex items-center justify-between flex-1 ml-2 task-column">
+              <view v-if="task[0].process !== 4">{{ $moment(+task[0].planStart).format(startTimeFormat) }}</view>
+              <view v-else>{{ $moment(+task[0].planStart).format('D日') }}</view>
+            </view>
+          </view>
+          <view v-for="item in task" :key="item.id">
+            <view class="border-l-2 border-gray-300 plugin">
+              <view class="h-3" v-if="item.process === 4"></view>
+              <view class="ml-3 overflow-hidden shadow-lg task-box">
+                <u-card
+                  :show-foot="false"
+                  :show-head="false"
+                  :style="{ height: setHeight(item.panel) }"
+                  class="h-16"
+                  margin="0"
+                  v-if="showSkeleton"
+                >
+                  <view slot="body">
+                    <view>
+                      <skeleton :banner="false" :loading="true" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
+                    </view>
+                  </view>
+                </u-card>
+
+                <u-card
+                  @click="onClickTask(item.planStart - 0, item.id)"
+                  :show-foot="false"
+                  :show-head="false"
+                  :style="{ height: setHeight(item.panel) }"
+                  class="h-16"
+                  margin="0"
+                  v-if="task && task.length && item.process !== 4 && !showSkeleton"
+                >
+                  <view slot="body">
+                    <!-- 脑力测评 -->
+                    <view class="p-0 u-col-between">
+                      <NotEvaluated :task="item" v-if="item.data.mentalTest.finishStatus === 0" />
+                      <view v-else>
+                        <EvaluatedNLCP :task="item" v-if="item.data.type === 0" />
+                        <EvaluatedXLJH :task="item" v-if="item.data.type === 1" />
+                      </view>
+                    </view>
+                  </view>
+                </u-card>
+              </view>
+            </view>
+          </view>
+        </view>
       </view>
     </view>
     <!-- 局部弹框操作栏 -->

src/pagesProject/project/project.vue

@@ -226,7 +226,7 @@ export default {
       } else {
         startTime = tasks[0].planStart - 0; // 有任务就是第一个任务的计划开始时间
       }
-      const placeholderTasks = setPlaceholderTasks(startTime, true, this.timeGranularity);
+      const placeholderTasks = setPlaceholderTasks(startTime, true, this.timeGranularity, 3);
       this.setUpTasks(placeholderTasks);
     },
 
@@ -239,6 +239,7 @@ export default {
       } else {
         startTime = +this.tasks[this.tasks.length - 1].planStart;
       }
+      console.log('startTime设置时间轴向下的空数据: ', startTime);
       const initData = setPlaceholderTasks(startTime, false, this.timeGranularity);
       this.setDownTasks(initData);
     },
@@ -257,7 +258,6 @@ export default {
       // TODO: tasks越来越多  遍历越来越多 需要优化
       oldTasks.forEach((taskItem, index) => {
         const arr = data.filter(dataItem => this.$moment(+dataItem.planStart).isSame(+taskItem.planStart, timeGranularity));
-        console.log('arr: ', arr);
 
         if (arr && arr.length) {
           oldTasks.splice(index, 1, [...arr]); // 这里加入的数据是array类型的, [{},{},[],[],{}]
@@ -265,7 +265,6 @@ export default {
       });
 
       // oldTasks = flatten(oldTasks); // 1维拍平
-      console.log('oldTasks: ', oldTasks);
       this.clearTasks(); // setUpTasks setUpTasks 的限制 需要清空
       type === 0 ? this.setUpTasks(oldTasks) : this.setDownTasks(oldTasks);
     },

src/store/task/mutations.js

@@ -92,7 +92,6 @@ const mutations = {
    * @param {Array} data 服务端返回的模板数组
    */
   setDownTasks(state, data) {
-    console.log('setDownTasks: ');
     if (!state.tasks && !state.tasks.length) {
       state.tasks = [...data];
     } else {
@@ -107,19 +106,9 @@ const mutations = {
    * @param {Array} data 新添加的task
    */
   updateTasks(state, data) {
-    console.log('updateTasks: ');
     state.tasks = [...data];
   },
 
-  /**
-   * 设置添加任务的位置
-   * @param {*} state
-   * @param {*} data
-   */
-  setAddPosition(state, data) {
-    console.log('data: ', data);
-  },
-
   /**
    * 设置日常任务数据
    * @param {Object} state