fix: 解决时间轴报错

4 years ago · da1eece364
7 changed files with 69 additions and 28 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -3,10 +3,12 @@
 ### 🌟 新功能
 范围|描述|commitId
 --|--|--
+ - | 标题栏变化 | [3898cfe](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/3898cfe)
 - | 标题栏变化 | [c0fcd9d](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/c0fcd9d)
 - | 标题栏角色栏全局任务组件新建 | [0500cb4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/0500cb4)
 - | 插件数据获取 | [5b91bdc](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/5b91bdc)
 - | 存token | [b8a178d](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/b8a178d)
+ - | 定期任务面板骨架屏添加 | [b2698c0](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/b2698c0)
 - | 角色栏实现 | [94cd671](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/94cd671)
 - | 模拟接口测试 | [69e7931](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/69e7931)
 - | 配置默认插件接口 | [f0c177d](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/f0c177d)
@ -16,6 +18,7 @@
 - | 时间轴修改状态时提示框增加 | [e841392](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/e841392)
 - | 提交到本地 | [9cbe411](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9cbe411)
 - | 添加时间轴上下滚动 | [2b81bbc](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/2b81bbc)
+ - | 引入dayjs | [29b8b93](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/29b8b93)
 - | db store | [6414c4f](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/6414c4f)
 - | indexedDB | [687394e](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/687394e)
 - | post 封装 | [da52e94](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/da52e94)
@ -48,9 +51,12 @@
 - | 骨架屏替换 | [e9fdd71](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/e9fdd71)
 - | 角色栏修改 | [19228d6](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/19228d6)
 - | 上下滚动时间轴 | [d533a01](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/d533a01)
+ - | 上下滑动加载定期任务 | [4090d89](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4090d89)
+ - | 时间轴插件 | [225d3cc](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/225d3cc)
 - | 时间轴上下滚动数据加载bug修改 | [e82ede4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/e82ede4)
 - | 时间轴上下滑动 | [4d0ae46](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4d0ae46)
 - | 提示信息显示bug及日常任务收缩问题 | [f2f06c5](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/f2f06c5)
+ - | 下拉加载定期任务传参，时间格式化修改 | [0b95a0e](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/0b95a0e)
 - | 修改角色栏组件 | [a54c601](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/a54c601)
 - | 修改main | [749ae9a](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/749ae9a)

@ -64,6 +70,7 @@
 ### 🔨 代码重构
 范围|描述|commitId
 --|--|--
+ - | 下滑时间轴添加备注 | [4fd20e3](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4fd20e3)
 template | eslint prettier sass uview tailwindcss | [9c966a1](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9c966a1)


--- a/src/components/Globals/Globals.vue
+++ b/src/components/Globals/Globals.vue
@ -7,7 +7,7 @@
          <view class="p-0 u-col-between">
            <view class="grid grid-cols-3 gap-2 h-auto" v-if="plugins.length">
              <Plugin
-                :class="getClass(plugin.col, plugin.row)"
+                :class="getClass(plugin.colspan, plugin.rowspan)"
                :key="pluginIndex"
                :pluginId="plugin.pluginId"
                :styleType="plugin.styleType || 0"
--- a/src/components/Plugin/Plugin.vue
+++ b/src/components/Plugin/Plugin.vue
@ -1,5 +1,10 @@
 <template>
-  <view style="height: 100%" v-if="pluginContent && pluginContent.html">
+  <view>
+    <view style="height: 100%" v-if="pluginContent">
+      <view v-if="pluginContent.html">
+        <view style="height: 100%" v-html="pluginContent.html"></view>
+      </view>
+      <view v-else>
        <view v-if="item && item.name">
          <p-task-title :item="item" v-if="pluginId === '1'" />
          <p-task-description :item="item" v-if="pluginId === '2'" />
@ -10,7 +15,8 @@
          <p-subproject :item="item" v-if="pluginId === '7'" />
          <p-task-countdown :item="item" v-if="pluginId === '8'" />
        </view>
-    <view style="height: 100%" v-html="pluginContent.html"></view>
+      </view>
+    </view>
  </view>
 </template>

@ -36,7 +42,6 @@ export default {
  },
  async created() {
    await this.getPlugin();
-    console.log(this.pluginContent.js);
    if (this.pluginContent.js) {
      var scriptDom = document.createElement('script');
      scriptDom.id = `p${this.pluginContent.pluginId}`;
@ -51,6 +56,7 @@ export default {
        pluginId,
        styleType,
      });
+      this.$emit('changeLoading', false);
      this.pluginContent = res;
      console.log(this.pluginContent);
    },
--- a/src/components/Roles/Roles.vue
+++ b/src/components/Roles/Roles.vue
@ -93,7 +93,7 @@ export default {
        //改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
        this.setCurrentRole(index);
        // 清空定期任务数据
-        this.setTasks([]);
+        this.setTasks();
        // 根据时间基准点和角色查找定期任务
        await this.$emit('getTasksByRole');
      } catch (error) {
--- a/src/components/TimeLine/component/TimeBox.vue
+++ b/src/components/TimeLine/component/TimeBox.vue
@ -4,7 +4,9 @@
      <view class="flex">
        <TimeStatus :content="JSON.stringify(item.process)" :status="item.process" />
        <view class="flex justify-between items-center flex-1 ml-2">
-          <view>{{ $moment(+item.planStart).format('MM-DD HH:mm') }} {{ $t.time.formatDuration(item.planDuration) }}</view>
+          <view>
+            <span>{{ $moment(+item.planStart).format('MM-DD HH:mm') }}</span>
+          </view>
          <view>
            <view class="flex justify-between" style="min-width: 180rpx">
              <u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="34"></u-icon>
@ -23,19 +25,23 @@
            @click="changeTimeNode(item.planStart)"
            class="h-16"
            margin="0"
+            v-if="item.plugins && item.plugins.length"
          >
            <!-- 任务面板插件 -->
            <view slot="body">
-              <skeleton :banner="false" :loading="!item.plugins.length" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
-              <view class="p-0 u-col-between">
+              <view v-if="!item.plugins && !item.plugins.length && taskLoading">
+                <skeleton :banner="false" :loading="true" :row="4" animate class="mt-2 u-line-2 skeleton"></skeleton>
+              </view>
+              <view class="p-0 u-col-between" v-else>
                <view :key="pIndex" v-for="(p, pIndex) in item.plugins">
-                  <view class="grid grid-cols-3 gap-2 h-36" v-if="p.length">
+                  <view class="grid gap-2" v-if="p.length">
                    <Plugin
-                      :class="getClass(plugin.col, plugin.row)"
+                      :class="getClass(plugin.colspan, plugin.rowspan)"
                      :item="item"
                      :key="pluginIndex"
                      :pluginId="plugin.pluginId"
                      :styleType="styleType"
+                      @changeLoading="taskLoading = false"
                      v-for="(plugin, pluginIndex) in p"
                    />
                  </view>
@ -59,7 +65,7 @@ export default {
  name: 'TimeBox',
  components: { TimeStatus, Skeleton },
  data() {
-    return { currentComponent: '', styleType: 0 };
+    return { currentComponent: '', styleType: 0, taskLoading: true };
  },

  computed: mapState('home', ['roleId', 'timeNode', 'timeUnit', 'tasks']),
--- a/src/store/home/mutations.js
+++ b/src/store/home/mutations.js
@ -125,7 +125,12 @@ const mutations = {
    if (!data || !data.length) {
      state.topEnd = true;
    }
-    state.tasks = [...data.concat(state.tasks)] || [];
+    console.log('!state.tasks.plugins.length: ', !state.tasks[0].name);
+    if (!state.tasks[0].name) {
+      state.tasks = [...data];
+    } else {
+      state.tasks = [...data.concat(state.tasks)];
+    }
  },

  /**
@ -137,16 +142,36 @@ const mutations = {
    if (!data || !data.length) {
      state.bottomEnd = true;
    }
-    state.tasks = [...state.tasks.concat(data)] || [];
+    if (!state.tasks[0].name) {
+      state.tasks = [...data];
+    } else {
+      state.tasks = [...state.tasks.concat(data)];
+    }
  },

  /**
   * 清空定期任务数据
   * @param {Object} state
-   * @param {Array} data 服务端返回的模板数组
   */
-  setTasks(state, data) {
-    state.tasks = data || [];
+  setTasks(state) {
+    const data = [
+      {
+        panel: {},
+        plugins: [],
+        planStart: new Date().getTime(),
+      },
+      {
+        panel: {},
+        plugins: [],
+        planStart: new Date().getTime(),
+      },
+      {
+        panel: {},
+        plugins: [],
+        planStart: new Date().getTime(),
+      },
+    ];
+    state.tasks = data;
  },

  /**
--- a/src/store/home/state.js
+++ b/src/store/home/state.js
@ -19,19 +19,16 @@ const state = {
      panel: {},
      plugins: [],
      planStart: new Date().getTime(),
-      planDuration: 0,
    },
    {
      panel: {},
      plugins: [],
      planStart: new Date().getTime(),
-      planDuration: 0,
    },
    {
      panel: {},
      plugins: [],
      planStart: new Date().getTime(),
-      planDuration: 0,
    },
  ], // 定期任务
  topEnd: false, // 时间轴向上查任务到顶了