feat: 时间轴刻度

src/components/tall/center/RegularTask.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="task-list" :style="{}">
-    <div class="task-box" v-for="(item, index) in regularTasks" :key="index">
+  <div class="task-list" :style="{}" style="height: 500px">
+    <div class="task-box" v-for="(item, index) in tasks" :key="index">
       <div class="task-time flex items-center justify-between">
         <div class="flex items-center">
           <PlayCircleOutlined style="font-size: 23px; color: #999999" />
@@ -38,20 +38,26 @@
 import { computed, watch } from 'vue';
 import { useStore } from 'vuex';
 import dayjs from 'dayjs';
+import uTask from 'utils/task';
 import { PlayCircleOutlined } from '@ant-design/icons-vue';
-import { getRegularTask } from 'apis';
+// import { getRegularTask } from 'apis';
 import { message } from 'ant-design-vue';
 
 const store = useStore();
 const project = computed(() => store.state.projects.project); // 项目信息
 const roleId = computed(() => store.state.role.roleId); // 当前角色
-const regularTasks = computed(() => store.state.task.regularTasks); // 定期任务
+// const regularTasks = computed(() => store.state.task.regularTasks); // 定期任务
+const tasks = computed(() => store.state.task.tasks); // 定期任务
 
 const timeNode = computed(() => store.state.task.timeNode); // 时间基准点
 const timeUnit = computed(() => store.state.task.timeUnit); // 时间颗粒度
-const currLocationTaskId = computed(() => store.state.task.currLocationTaskId); // 时间颗粒度
+const currLocationTaskId = computed(() => store.state.task.currLocationTaskId); // 当前任务id
 const businessCode = computed(() => store.state.task.businessCode); // 当前打开的项目的所属服务
 
+const timeGranularity = computed(() => store.getters['task/timeGranularity']); // 天
+
+setNextPlaceholderTasks(); // 向下加载空数据
+
 if (project.value && roleId.value) {
   getTasks({ roleId: roleId.value }); // 根据角色查找定期任务
 }
@@ -73,11 +79,11 @@ watch([project, roleId], async () => {
  */
 async function getTasks(query) {
   const params = generateGetTaskParam(query);
-  console.log(params);
-  const { url } = store.state.projects.project;
+  // const { url } = store.state.projects.project;
   try {
-    const data = await getRegularTask(params, url);
-    store.commit('task/setRegularTasks', data);
+    console.log(params);
+    // const data = await getRegularTask(params, url);
+    // store.commit('task/setRegularTasks', data);
   } catch (error) {
     message.info(error);
     throw new Error(error);
@@ -102,6 +108,38 @@ function generateGetTaskParam(query) {
   };
 }
 
+// 设置时间轴向上的空数据
+// function setPrevPlaceholderTasks() {
+//   store.commit('task/setTopEnd', true);
+//   let startTime = '';
+//   if (!tasks.value || !tasks.value.length) {
+//     startTime = Date.now(); // 没有任务就应该是时间基准点
+//   } else {
+//     startTime = tasks.value[0].planStart - 0; // 有任务就是第一个任务的计划开始时间
+//   }
+//   const placeholderTasks = uTask.setPlaceholderTasks(startTime, true, timeGranularity.value);
+//   // store.commit('task/setCurrUpTimeNode', startTime);
+//   store.commit('task/setUpTasks', placeholderTasks);
+// }
+
+// 设置时间轴向下的空数据
+function setNextPlaceholderTasks(params) {
+  // store.commit('task/setBottomEnd', true);
+  let startTime = '';
+  if (!tasks.value || !tasks.value.length) {
+    startTime = Date.now();
+  } else {
+    startTime = dayjs(+tasks.value[tasks.value.length - 1].planStart)
+      .add(1, timeGranularity.value)
+      .valueOf();
+  }
+
+  const initData = uTask.setPlaceholderTasks(startTime, false, timeGranularity.value);
+  console.log('222222222', params);
+  // store.commit('task/setCurrDownTimeNode', startTime);
+  store.commit('task/setDownTasks', initData);
+}
+
 function toDetail(item) {
   console.log(item);
   // store.commit('task/setTaskDetail', item);

src/store/tall/task/index.js

@@ -1,4 +1,5 @@
 // import { message } from 'ant-design-vue';
+import timeConfig from 'utils/time';
 
 export default {
   namespaced: true,
@@ -37,20 +38,20 @@ export default {
       return [...permanents, ...dailyTasks];
     },
 
-    // unitConfig({ timeUnit }) {
-    //   const target = uni.$t.timeConfig.timeUnits.find(item => item.id === timeUnit);
-    //   return target;
-    // },
+    unitConfig({ timeUnit }) {
+      const target = timeConfig.timeUnits.find(item => item.id === timeUnit);
+      return target;
+    },
 
     // 计算任务开始时间的格式
-    // startTimeFormat(state, { unitConfig }) {
-    //   return unitConfig.format || 'D日 HH:mm';
-    // },
+    startTimeFormat(state, { unitConfig }) {
+      return unitConfig.format || 'D日 HH:mm';
+    },
 
     // 计算颗粒度 对应的 dayjs add 的单位
-    // timeGranularity(state, { unitConfig }) {
-    //   return unitConfig.granularity;
-    // },
+    timeGranularity(state, { unitConfig }) {
+      return unitConfig.granularity;
+    },
   },
 
   mutations: {

src/utils/axios.js

@@ -1,7 +1,7 @@
 import Axios from 'axios';
 import { message } from 'ant-design-vue';
 import store from 'store';
-import router from './routers/index';
+import router from '../routers/index';
 
 const baseUrl = '/gateway';
 

src/utils/task.js

@@ -0,0 +1,63 @@
+import dayjs from 'dayjs';
+
+/**
+ * 设置时间轴空数据
+ * @param {number} startTime
+ * @param {boolean} isUp true 向上加载,false 向下加载
+ * @param {string} timeGranularity 颗粒度
+ * @param {number} pageCount 加载的颗粒度数量 默认值是10
+ */
+const setPlaceholderTasks = (startTime, isUp, timeGranularity, pageCount) => {
+  const result = [];
+  pageCount = pageCount || 10;
+  for (let i = 0; i < pageCount; i++) {
+    const delta = isUp ? `-${i + 1}` - 0 : i;
+
+    const item = {
+      id: Math.random() * 1000000000000000000,
+      panel: {},
+      plugins: [],
+      process: 4,
+      planStart: dayjs(+startTime)
+        .add(+delta, timeGranularity)
+        .valueOf(),
+    };
+    console.log('11111111', item);
+    // console.log('isup: ', isUp, 'result:', new Date(item.planStart).toLocaleDateString());
+
+    isUp ? result.unshift(item) : result.push(item);
+  }
+  return result;
+};
+
+/**
+ * 超出旧数据上、下限 补齐时间刻度到新数据的起始时间颗粒度
+ * @param {object} option
+ * @param {array} option.tasks 旧的已有的任务书籍
+ * @param {array} option.data 新拿到的任务数据 空值已经过滤过了
+ * @param {string} option.timeGranularity 颗粒度
+ */
+const computeFillPlaceholderTaskCount = obj => {
+  const { tasks, data, timeGranularity } = obj;
+  const result = { prev: 0, next: 0 };
+  // 新数据的开始时间 < 旧数据的开始时间
+  // 超出了上限 补上限的时间刻度
+  // 补上 新数据开始时间 到 旧数据开始时间 的刻度
+  if (+data[0].planStart < +tasks[0].planStart) {
+    // 找出来需要补几组颗粒度
+    result.prev = dayjs(+tasks[0].planStart).diff(+data[0].planStart, timeGranularity) + 1;
+  }
+
+  // 新数据的结束时间 > 旧数据的结束时间
+  // 超出了下线 补下限的时间刻度
+  // 补上 旧数据截止时间 到 新数据截止时间  的刻度
+  if (+data[data.length - 1].planStart > +tasks[tasks.length - 1].planStart) {
+    result.next = dayjs(+data[data.length - 1].planStart).diff(+tasks[tasks.length - 1].planStart, timeGranularity) + 1;
+  }
+  return result;
+};
+
+export default {
+  setPlaceholderTasks,
+  computeFillPlaceholderTaskCount,
+};

src/utils/time.js

@@ -0,0 +1,17 @@
+export default {
+  timeUnits: [
+    // 时间颗粒度
+    { 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: 'M月D日 HH:mm', cycle: 'YY-M-D', granularity: 'day' },
+    { id: 5, value: '周', format: 'M月D日 HH:mm', cycle: '', granularity: 'week' },
+    { id: 6, value: '月', format: 'M月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: '' },
+  ],
+};