fix(ID1000343): 解决向下预加载查询参数时间没+1颗粒度;以及滚动加载颗粒度写死的问题

fix #ID1000343

CHANGELOG.md

@@ -54,6 +54,7 @@
 范围|描述|commitId
 --|--|--
  plugin | 插件解析机制完善 | 0f5a27d
+ project title | 项目标题修改; 切换角色移除script | 5c20017
  role | 切换角色的逻辑修正完善 | 4ae534f
  task任务逻辑完善 | 减少初始global及regular的不必要请求 | bd4bd38
  - | 上下滑动加载定期任务 | 4090d89

src/components/Plugin/Plugin.vue

@@ -68,11 +68,13 @@ export default {
       if (!data || !data.id) return;
       const reg = /data-root=["|']?(\w+)["|']?/gi;
       // console.log(data.html);
+      let uuid = '';
+      // FIXME: 没有兼容只有js 没有html的情况
       if (data.html) {
         // 查有没有data-root=“xxx” 有的话 将xxx替换为 pluginTaskId
 
         if (reg.test(data.html)) {
-          const uuid = RegExp.$1;
+          uuid = RegExp.$1;
           // console.log('uuid: ', uuid, `p${this.pluginTaskId}`);
 
           const str = data.html.replaceAll(uuid, `p${this.pluginTaskId}`);
@@ -80,34 +82,38 @@ export default {
         } else {
           this.pluginContent = data.html;
         }
-      }
-      // console.log(this.pluginContent);
 
-      if (data.js) {
-        if (reg.test(data.js)) {
-          const uuid = RegExp.$1;
         const str = data.js.replaceAll(uuid, `p${this.pluginTaskId}`);
         this.handleDom(str);
-        } else {
-          this.handleDom(data.js);
-        }
       }
+      // console.log(this.pluginContent);
+
+      // if (data.js) {
+      //   if (reg.test(data.js)) {
+      //     const uuid = RegExp.$1;
+      //     const str = data.js.replaceAll(uuid, `p${this.pluginTaskId}`);
+      //     this.handleDom(str);
+      //   } else {
+      //     this.handleDom(data.js);
+      //   }
+      // }
     },
 
     // 创建script dom
     handleDom(js) {
-      const { pluginId } = this;
+      const { pluginTaskId } = this;
       let domList = Array.from(document.getElementsByTagName('script'));
-      const index = domList.findIndex(item => item.id === `p${pluginId}`);
-      if (js && index === -1) {
+      const index = domList.findIndex(item => item.id === `p${pluginTaskId}`);
+      if (index >= 0) {
+        document.body.removeChild(document.getElementById(`p${pluginTaskId}`));
+      }
       const scriptDom = document.createElement('script');
-        scriptDom.id = `p${pluginId}`;
+      scriptDom.id = `p${pluginTaskId}`;
       scriptDom.setAttribute('data-type', 'plugin');
       scriptDom.innerHTML = js;
       this.$nextTick(() => {
         document.body.append(scriptDom);
       });
-      }
     },
   },
 };

src/components/Roles/Roles.vue

@@ -97,7 +97,7 @@ export default {
       try {
         // 清除多余的script
         this.clearPluginScript();
-
+        this.$nextTick(() => {
           this.setRoleId(id);
           //改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
           this.setCurrentRole(index);
@@ -109,6 +109,7 @@ export default {
           // 到顶的标志复位
           // 到底的标志复位
           this.clearEndFlag();
+        });
       } catch (error) {
         console.log('role.vue changeRole error: ', error);
       }
@@ -117,11 +118,15 @@ export default {
     // 清除插件script
     clearPluginScript() {
       console.log('clearPluginScript: ');
-
+      try {
         const scripts = document.querySelectorAll('script[data-type=plugin]');
+
         for (let i = 0; i < scripts.length; i++) {
           document.body.removeChild(scripts[i]);
         }
+      } catch (error) {
+        console.log('clearPluginScript error: ', error);
+      }
     },
 
     // 设置文字颜色

src/components/TimeLine/TimeLine.vue

@@ -23,7 +23,7 @@
 
 <script>
 // import Barrier from './component/Barrier.vue';
-import { mapState, mapMutations } from 'vuex';
+import { mapState, mapMutations, mapGetters } from 'vuex';
 import TimeBox from './component/TimeBox.vue';
 
 export default {
@@ -36,6 +36,7 @@ export default {
   computed: {
     ...mapState('role', ['visibleRoles']),
     ...mapState('task', ['scrollTop', 'showTips', 'tasks', 'topEnd', 'bottomEnd']),
+    ...mapGetters('task', ['timeGranularity']),
   },
 
   mounted() {
@@ -93,31 +94,31 @@ export default {
     // 滚动到底部
     async handleScrollBottom() {
       if (this.bottomEnd) return;
-      const startTime = this.tasks[this.tasks.length - 1].planStart - 0;
-      if (this.tasks[0].plugins && this.tasks[0].plugins.length === 0 && !this.topEnd) {
+      const { tasks, timeGranularity } = this;
+      const startTime = tasks[tasks.length - 1].planStart - 0;
+      if (tasks[0].plugins && tasks[0].plugins.length === 0 && !this.topEnd) {
         // 没有数据时 自动加载数据
         const addTasks = [
           {
             panel: {},
             plugins: [],
-            planStart: this.$t.time.add(startTime, 1, 'day').valueOf(),
+            planStart: this.$t.time.add(startTime, 1, timeGranularity).valueOf(),
           },
           {
             panel: {},
             plugins: [],
-            planStart: this.$t.time.add(startTime, 2, 'day').valueOf(),
+            planStart: this.$t.time.add(startTime, 2, timeGranularity).valueOf(),
           },
           {
             panel: {},
             plugins: [],
-            planStart: this.$t.time.add(startTime, 3, 'day').valueOf(),
+            planStart: this.$t.time.add(startTime, 3, timeGranularity).valueOf(),
           },
         ];
-        this.setDownTasks([...this.tasks.concat(addTasks)]);
+        this.setDownTasks([...tasks.concat(addTasks)]);
       } else {
         // 时间基准点=最后一个任务的开始时间+当前时间颗粒度
-        const cycle = this.$t.time.computeCycle('天');
-        const timeNode = this.$t.time.add(startTime, 1, cycle).valueOf();
+        const timeNode = this.$t.time.add(startTime, 1, timeGranularity).valueOf();
         const downQuery = {
           timeNode,
           queryType: 1,
@@ -146,7 +147,6 @@ export default {
           }
         }
         this.top = tasksHeight - scrollHeight / 2;
-        console.log('this.top: ', this.top);
       }
     },
   },

src/config/time.js

@@ -1,17 +1,17 @@
 export default {
   timeUnits: [
     // 时间颗粒度
-    { id: 0, value: '毫秒', format: 'x', cycle: 'YY-M-D HH:mm:ss' },
-    { id: 1, value: '秒', format: 'x', cycle: 'YY-M-D HH:mm:ss' },
-    { id: 2, value: '分', format: 'ss', cycle: 'YY-M-D HH:mm' },
-    { id: 3, value: '时', format: 'mm', cycle: 'YY-M-D HH时' },
-    { id: 4, value: '天', format: 'D日 HH:mm', cycle: 'YY-M-D' },
-    { id: 5, value: '周', format: 'D日 HH:mm', cycle: '' },
-    { id: 6, value: '月', format: 'D日 H:m', cycle: 'YYYY年' },
-    { id: 7, value: '季度', format: '', cycle: 'YYYY年' },
-    { id: 8, value: '年', format: 'YYYY', cycle: '' },
-    { id: 9, value: '年代', format: '', cycle: '' },
-    { id: 10, value: '世纪', format: '', cycle: '' },
-    { id: 11, value: '千年', format: '', cycle: '' },
+    { id: 0, value: '毫秒', format: 'x', cycle: 'YY-M-D HH:mm:ss', granularity: 'millisecond' },
+    { id: 1, value: '秒', format: 'x', cycle: 'YY-M-D HH:mm:ss', granularity: 'second' },
+    { id: 2, value: '分', format: 'ss', cycle: 'YY-M-D HH:mm', granularity: 'minute' },
+    { id: 3, value: '时', format: 'mm', cycle: 'YY-M-D HH时', granularity: 'hour' },
+    { id: 4, value: '天', format: 'D日 HH:mm', cycle: 'YY-M-D', granularity: 'day' },
+    { id: 5, value: '周', format: 'D日 HH:mm', cycle: '', granularity: 'week' },
+    { id: 6, value: '月', format: 'D日 H:m', cycle: 'YYYY年', granularity: 'month' },
+    { id: 7, value: '季度', format: '', cycle: 'YYYY年', granularity: 'quarter' },
+    { id: 8, value: '年', format: 'YYYY', cycle: '', granularity: 'year' },
+    { id: 9, value: '年代', format: '', cycle: '', granularity: '' },
+    { id: 10, value: '世纪', format: '', cycle: '', granularity: '' },
+    { id: 11, value: '千年', format: '', cycle: '', granularity: '' },
   ],
 };

src/pages/project/project.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations, mapActions } from 'vuex';
+import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
 
 export default {
   data() {
@@ -28,6 +28,7 @@ export default {
     ...mapState('user', ['user', 'token']),
     ...mapState('role', ['visibleRoles', 'roleId']),
     ...mapState('task', ['timeNode', 'timeUnit', 'tasks']),
+    ...mapGetters('task', ['timeGranularity']),
   },
 
   onLoad(options) {
@@ -120,8 +121,13 @@ export default {
 
       // 预加载 上下的定期任务
       if (this.tasks && this.tasks.length) {
-        this.getTasks({ timeNode: +this.tasks[0].planStart, queryType: 0, queryNum: 6 });
-        this.getTasks({ timeNode: +this.tasks[this.tasks.length - 1].planStart, queryType: 1, queryNum: 6 });
+        this.$nextTick(() => {
+          const { tasks, timeGranularity } = this;
+          this.getTasks({ timeNode: +tasks[0].planStart, queryType: 0, queryNum: 6 });
+          // 向下查的时候要再最后一个任务的开始时间的基础上 多加一个时间颗粒度
+          const nextQueryTime = +this.$t.time.add(+tasks[tasks.length - 1].planStart, 1, timeGranularity);
+          this.getTasks({ timeNode: nextQueryTime, queryType: 1, queryNum: 6 });
+        });
       }
     },
 
@@ -152,6 +158,7 @@ export default {
           queryNum: query.queryNum || 3,
           queryType: query.queryType,
         };
+
         await this.getRegulars(params);
       } catch (error) {
         console.log('error: ', error);

src/store/task/getters.js

@@ -4,10 +4,19 @@ const getters = {
     return [...permanents, ...dailyTasks];
   },
 
-  // 计算任务开始时间的格式
-  startTimeFormat({ timeUnit }) {
+  unitConfig({ timeUnit }) {
     const target = uni.$t.timeConfig.timeUnits.find(item => item.id === timeUnit);
-    return target.format || 'D日 HH:mm';
+    return target;
+  },
+
+  // 计算任务开始时间的格式
+  startTimeFormat(state, { unitConfig }) {
+    return unitConfig.format || 'D日 HH:mm';
+  },
+
+  // 计算颗粒度 对应的 dayjs add 的单位
+  timeGranularity(state, { unitConfig }) {
+    return unitConfig.granularity;
   },
 };
 

tailwind.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  // purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   darkMode: false, // or 'media' or 'class'
   theme: { extend: {} },
   variants: { extend: {} },