From d64131272c517b09410eb8eaf34ef8e48abcf209 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Thu, 26 Aug 2021 23:28:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E8=AF=95=E5=AE=9A=E6=9C=9F?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1bug=EF=BC=9B=E4=B8=8D=E8=83=BD=E5=90=88?=
 =?UTF-8?q?=E5=B9=B6=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                         |  1 +
 package.json                         |  2 +-
 src/components/TimeLine/TimeLine.vue |  7 +-
 src/mixins/timeline.js               | 44 -------------
 src/pages/project/project.vue        | 97 +++++++++++-----------------
 src/store/task/mutations.js          |  2 +-
 src/utils/task.js                    | 23 +++++++
 7 files changed, 66 insertions(+), 110 deletions(-)
 delete mode 100644 src/mixins/timeline.js
 create mode 100644 src/utils/task.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8621ca1..7f362db 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -136,6 +136,7 @@
  - | 时间轴无任务时时间刻度加载修改 | 4921672
  - | 时间轴滚动位置修改 | 551da63
  - | 时间轴骨架屏修改 | ca78d02
+ - | 滚动id函数优化 | b351b67
  - | 监听时间基本点 | 033fca0
  - | 角色显示状态修改 | 7d3b906
  - | 角色栏修改 | 19228d6
diff --git a/package.json b/package.json
index ddff59a..5de14d8 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
     "postcss": "^7.0.36",
     "postcss-comment": "^2.0.0",
     "prettier": "^2.2.1",
-    "puppeteer": "^10.2.0",
+    "puppeteer": "^3.0.1",
     "right-pad": "^1.0.1",
     "sass-loader": "^8.0.2",
     "vue-cli-plugin-commitlint": "~1.0.12",
diff --git a/src/components/TimeLine/TimeLine.vue b/src/components/TimeLine/TimeLine.vue
index 2cb3b50..555e0d0 100644
--- a/src/components/TimeLine/TimeLine.vue
+++ b/src/components/TimeLine/TimeLine.vue
@@ -22,13 +22,12 @@
 <script>
 // import Barrier from './component/Barrier.vue';
 import { mapState, mapMutations, mapGetters } from 'vuex';
+import { setPlaceholderTasks } from '@/utils/task';
 import TimeBox from './component/TimeBox.vue';
-import mixin from '@/mixins/timeline';
 
 export default {
   name: 'TimeLine',
   components: { TimeBox },
-  mixins: [mixin],
 
   data() {
     return { top: 0 };
@@ -57,7 +56,7 @@ export default {
       if ((this.tasks[0].plugins && this.tasks[0].plugins.length === 0) || this.topEnd) {
         // 没有数据时 自动加载数据
         console.warn('滚动到顶部没有数据时: ');
-        const addTasks = this.setTime(startTime, true);
+        const addTasks = setPlaceholderTasks(startTime, true, this.timeGranularity);
         this.setUpTasks(addTasks);
       } else {
         // 有数据时
@@ -79,7 +78,7 @@ export default {
       if ((tasks[0].plugins && tasks[0].plugins.length === 0) || this.bottomEnd) {
         // 没有数据时 自动加载数据
         console.warn('滚动到底部没有数据时: ');
-        const addTasks = this.setTime(startTime, false);
+        const addTasks = setPlaceholderTasks(startTime, false, this.timeGranularity);
         this.setDownTasks(addTasks);
       } else {
         // 时间基准点=最后一个任务的开始时间+当前时间颗粒度
diff --git a/src/mixins/timeline.js b/src/mixins/timeline.js
deleted file mode 100644
index b61c46a..0000000
--- a/src/mixins/timeline.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { mapGetters } from 'vuex';
-
-const mixin = {
-  computed: mapGetters('task', ['timeGranularity']),
-
-  methods: {
-    /**
-     * 设置时间轴空数据
-     * @param {*} startTime
-     * @param {*} show true 向上加载,false 向下加载
-     */
-    setTime(startTime, show) {
-      let { timeGranularity } = this;
-      let arr = [];
-      let str = {};
-      if (show) {
-        for (let i = 10; i > 0; i--) {
-          str = {
-            id: this.$u.guid(20, false, 10),
-            panel: {},
-            plugins: [],
-            process: 4,
-            planStart: this.$t.time.add(startTime, `-${i}` - 0, timeGranularity).valueOf(),
-          };
-          arr.push(str);
-        }
-      } else {
-        for (let i = 0; i < 10; i++) {
-          str = {
-            id: this.$u.guid(20, false, 10),
-            panel: {},
-            plugins: [],
-            process: 4,
-            planStart: this.$t.time.add(startTime, i + 1, timeGranularity).valueOf(),
-          };
-          arr.push(str);
-        }
-      }
-      return arr;
-    },
-  },
-};
-
-export default mixin;
diff --git a/src/pages/project/project.vue b/src/pages/project/project.vue
index 5d51466..059f09a 100644
--- a/src/pages/project/project.vue
+++ b/src/pages/project/project.vue
@@ -3,7 +3,7 @@
     <!-- 标题栏 -->
     <Title />
 
-    <view class="container flex flex-col flex-1 overflow-hidden bg-gray-100 mx-auto">
+    <view class="container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100">
       <!-- 角色栏 -->
       <Roles />
 
@@ -18,10 +18,9 @@
 
 <script>
 import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
-import mixin from '@/mixins/timeline';
+import { setPlaceholderTasks } from '@/utils/task';
 
 export default {
-  mixins: [mixin],
   data() {
     return { height: '', show: false };
   },
@@ -48,8 +47,8 @@ export default {
     timeNode(val) {
       if (val && this.roleId) {
         this.clearTasksData();
-        // 根据时间和角色查找日常任务
-        this.initTasks();
+        this.getGlobalData(); // 查可变日常任务
+        this.initPlanTasks(); // 处理定期任务
       }
     },
 
@@ -75,9 +74,8 @@ export default {
   },
 
   onUnload() {
-    this.clearEndFlag();
-    this.clearTasks();
-    this.setRoleId();
+    this.clearTasksData();
+    this.setRoleId('');
   },
 
   methods: {
@@ -169,29 +167,13 @@ export default {
     },
 
     // 初始化 时间轴
-    async initTasks() {
-      this.getGlobalData(); // 查可变日常任务
+    async initPlanTasks() {
       this.setPrevTasks(); // 向上加载空数据
-      // storage没有存储值就跳转到当前时间位置
-      // taskId就是要滚动到任务的id
-      // 通常是点了这个任务 打开详情页 返回来直接滚动到这个任务
-      const storageTaskId = this.$t.storage.getStorageSync('taskId');
-      this.$nextTick(() => {
-        if (!storageTaskId) {
-          this.$refs.timeLine.setScrollPosition();
-        }
-      });
-      // 向下加载空数据
-      this.setNextTasks();
+      this.setNextTasks(); // 向下加载空数据
+      this.$nextTick(() => this.$refs.timeLine.setScrollPosition()); // 滚动到对应位置
 
       await this.getInitTasks();
-      // 根据项目id获取角色列表
-      // 从详情页返回时跳转到之前的位置 storage有存储值
-      this.$nextTick(() => {
-        if (storageTaskId) {
-          this.$refs.timeLine.setScrollPosition();
-        }
-      });
+      this.$nextTick(() => this.$refs.timeLine.setScrollPosition()); // 滚动到对应位置
     },
 
     // 切换了 颗粒度 || 角色时候 获取初始定期任务
@@ -218,10 +200,10 @@ export default {
         }
       }
       // 根据时间基准点和角色查找定期任务
-      this.getTasks({ queryType: 0 });
+      this.getTasks({ queryType: 0 }); // 向上获取定期任务数据
 
       // 根据项目id获取角色列表
-      this.getTasks({ queryType: 1 }, fn);
+      this.getTasks({ queryType: 1 }, fn); // 向下获取定期任务数据
     },
 
     // 设置 初始显示角色信息
@@ -246,9 +228,8 @@ export default {
      * @param {string} query.queryType 0向上查找 1向下查找(默认) 下查包含自己，上查不包含
      */
     getTasks(query, fn) {
-      const that = this;
-      that.setShowSkeleton(true);
-      const { roleId, timeNode, timeUnit, projectId } = that;
+      this.setShowSkeleton(true);
+      const { roleId, timeNode, timeUnit, projectId } = this;
       const params = {
         roleId,
         timeNode: query.timeNode || timeNode,
@@ -258,27 +239,22 @@ export default {
         projectId,
       };
 
-      that.$t.$q.getRegularTask(params, function (err, data) {
-        console.log('data: ', data);
-        console.log('that.show: ', that.show);
-        if (!that.show) {
-          if (err) {
-            that.setShowSkeleton(false);
-            console.error('err: ', err);
+      this.$t.$q.getRegularTask(params, (err, data) => {
+        this.setShowSkeleton(false);
+        if (err) {
+          // TODO: 提示错误
+          console.error('err: ', err);
+        } else {
+          // 0 -> 向上  1 -> 向下
+          // 有数据用数据替换刻度
+          // 没有数据 继续加载刻度
+          if (data && data.length) {
+            this.replacePrevData(data, params.queryType);
           } else {
-            that.show = true;
-            that.setShowSkeleton(false);
-            // 0 -> 向上  1 -> 向下
-            if (data && data.length) {
-              that.replacePrevData(data, params.queryType);
-              that.show = false;
-            } else {
-              params.queryType === 0 ? that.setPrevTasks() : that.setNextTasks();
-              that.show = false;
-            }
-            if (that.tasks.length && fn) {
-              fn(that);
-            }
+            params.queryType === 0 ? this.setPrevTasks() : this.setNextTasks();
+          }
+          if (this.tasks.length && fn) {
+            fn(this);
           }
         }
       });
@@ -294,14 +270,15 @@ export default {
     // 设置时间轴向上的空数据
     setPrevTasks() {
       this.setTopEnd(true);
-      let sTime = '';
-      if (!this.tasks || !this.tasks.length) {
-        sTime = +new Date().getTime();
+      let startTime = '';
+      const { tasks } = this;
+      if (!tasks || !tasks.length) {
+        startTime = Date.now(); // 没有任务就应该是时间基准点
       } else {
-        sTime = +this.tasks[0].planStart - 0;
+        startTime = tasks[0].planStart - 0; // 有任务就是第一个任务的计划开始时间
       }
-      const initData = this.setTime(sTime, true);
-      this.setUpTasks(initData);
+      const placeholderTasks = setPlaceholderTasks(startTime, true, this.timeGranularity);
+      this.setUpTasks(placeholderTasks);
     },
 
     // 设置时间轴向下的空数据
@@ -313,7 +290,7 @@ export default {
       } else {
         sTime = +this.tasks[this.tasks.length - 1].planStart - 0;
       }
-      const initData = this.setTime(sTime, false);
+      const initData = setPlaceholderTasks(sTime, false, this.timeGranularity);
       this.setDownTasks(initData);
     },
 
diff --git a/src/store/task/mutations.js b/src/store/task/mutations.js
index 79b0827..107ea47 100644
--- a/src/store/task/mutations.js
+++ b/src/store/task/mutations.js
@@ -79,7 +79,7 @@ const mutations = {
    */
   setUpTasks(state, data) {
     if (!state.tasks.length) {
-      state.tasks = [...data];
+      state.tasks = [...data]; // 原来没有数据
     } else {
       state.tasks = [...data.concat(state.tasks)];
     }
diff --git a/src/utils/task.js b/src/utils/task.js
new file mode 100644
index 0000000..403d2a9
--- /dev/null
+++ b/src/utils/task.js
@@ -0,0 +1,23 @@
+/**
+ * 设置时间轴空数据
+ * @param {number} startTime
+ * @param {boolean} isUp true 向上加载,false 向下加载
+ * @param {string} timeGranularity 颗粒度
+ */
+export const setPlaceholderTasks = (startTime, isUp, timeGranularity) => {
+  let result = [];
+  for (let i = 0; i < 10; i++) {
+    const delta = isUp ? `-${i + 1}` - 0 : i + 1;
+    let item = {
+      id: uni.$u.guid(20, false, 10),
+      panel: {},
+      plugins: [],
+      process: 4,
+      planStart: uni.$moment(startTime).add(delta, timeGranularity).valueOf(),
+    };
+    // console.log('isup: ', isUp, 'result:', new Date(item.planStart).toLocaleDateString());
+
+    isUp ? result.unshift(item) : result.push(item);
+  }
+  return result;
+};