From 12384f930f62cd7cecee931fe86f5d4d6276349c Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Fri, 14 Jan 2022 15:26:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=86=E6=97=B6=E9=97=B4=E8=BD=B4?=
 =?UTF-8?q?=E6=94=B9=E6=88=90swiper=E6=BB=91=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |   4 +-
 components/Globals/Globals.vue                |  22 +-
 components/Roles/Roles.vue                    |   1 +
 components/TimeLine 复制/TimeLine.vue         | 126 +++++++
 .../TimeLine 复制/component/Barrier.vue       |  38 +++
 .../TimeLine 复制/component/TaskTools.vue     | 177 ++++++++++
 .../TimeLine 复制/component/TimeBox.vue       | 132 ++++++++
 .../TimeLine 复制/component/TimeStatus.vue    | 317 ++++++++++++++++++
 components/TimeLine 复制/component/Title.vue  |   0
 components/TimeLine/TimeLine.vue              |  56 ++--
 components/TimeLine/component/TimeBox.vue     |   9 +-
 hooks/project/useGetTasks.js                  |  19 +-
 hooks/project/useInit.js                      |  15 +-
 pages/index/index.vue                         |   4 +-
 pages/project/project 复制.vue                | 142 ++++++++
 pages/project/project.vue                     | 118 +++++--
 store/role/mutations.js                       |   9 +
 store/role/state.js                           |   1 +
 store/task/actions.js                         |   6 +-
 store/task/mutations.js                       |  18 +
 store/task/state.js                           |   3 +
 21 files changed, 1128 insertions(+), 89 deletions(-)
 create mode 100644 components/TimeLine 复制/TimeLine.vue
 create mode 100644 components/TimeLine 复制/component/Barrier.vue
 create mode 100644 components/TimeLine 复制/component/TaskTools.vue
 create mode 100644 components/TimeLine 复制/component/TimeBox.vue
 create mode 100644 components/TimeLine 复制/component/TimeStatus.vue
 create mode 100644 components/TimeLine 复制/component/Title.vue
 create mode 100644 pages/project/project 复制.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3db5f8f..161f46d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,4 @@
-# 1.0.0 (2022-01-12)
+# 1.0.0 (2022-01-14)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -9,6 +9,7 @@
  theme | theme demo | [9175758](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/9175758)
  - | vue3 | [12ed2ad](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/12ed2ad)
  - | 使用uview完成api请求 | [1b3efd8](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/1b3efd8)
+ - | 手机号登录 | [a198527](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/a198527)
  - | 手机号登录 | [8f455da](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/8f455da)
  - | 手机号登录 | [565585b](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/565585b)
  - | 插件面板分开显示 | [fb5e86b](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/fb5e86b)
@@ -50,6 +51,7 @@
 ### 📦 持续集成
 范围|描述|commitId
 --|--|--
+ - | ci update | [d38262e](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/d38262e)
  - | drone | [8cddc7b](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/8cddc7b)
  - | 修改.drone.yml | [f5b52e3](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/f5b52e3)
  - | 更新drone.yml | [63ec5a3](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/63ec5a3)
diff --git a/components/Globals/Globals.vue b/components/Globals/Globals.vue
index 07c37c9..a71b991 100644
--- a/components/Globals/Globals.vue
+++ b/components/Globals/Globals.vue
@@ -1,14 +1,6 @@
 <template>
-  <theme class="m-2" >
-    <u-card
-      @click="openCard"
-      :show-foot="false"
-      :show-head="false"
-      :style="{ 'max-height': globalsHeight + 'px' }"
-      border-radius="25"
-      margin="0"
-      class="global-container"
-    >
+  <theme class="m-2">
+    <u-card @click="openCard" :show-foot="false" :show-head="false" :style="{ 'max-height': globalsHeight + 'px' }" border-radius="25" margin="0" class="global-container">
       <template v-slot:body>
         <scroll-view :scrollY="true" :style="{ 'max-height': globalsHeight - 30 + 'px' }">
           <skeleton :banner="false" :loading="showGlobalSkeleton" :row="3" animate class="u-line-2 skeleton"></skeleton>
@@ -44,16 +36,22 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import { useStore } from 'vuex';
 import Skeleton from '@/components/Skeleton/Skeleton.vue';
 
+defineProps({
+  globals: {
+    type: Array,
+    default: () => []
+  }
+})
+
 const sysHeight = uni.getSystemInfoSync().screenHeight; // 屏幕的高度
 const globalsHeight = Math.floor(((sysHeight - 44 - 30 - 10) / 5) * 4); // 全局任务的最大高度
 const store = useStore();
 const isShrink = computed(() => store.state.task.isShrink); // 全局任务是否收缩
 const showGlobalSkeleton = computed(() => store.state.task.showGlobalSkeleton); // 全局任务骨架屏
-const globals = computed(() => store.getters['task/globals']);
 
 // 手动展开日常任务
 function openCard() {
diff --git a/components/Roles/Roles.vue b/components/Roles/Roles.vue
index e2f9416..76c8eea 100644
--- a/components/Roles/Roles.vue
+++ b/components/Roles/Roles.vue
@@ -130,6 +130,7 @@ function changeRole(id, index) {
     clearPluginScript();
     nextTick(() => {
       store.commit('role/setRoleId', id);
+      store.commit('role/setRoleIndex', index);
       // 改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
       setCurrentRole(index);
     });
diff --git a/components/TimeLine 复制/TimeLine.vue b/components/TimeLine 复制/TimeLine.vue
new file mode 100644
index 0000000..489c680
--- /dev/null
+++ b/components/TimeLine 复制/TimeLine.vue	
@@ -0,0 +1,126 @@
+<template>
+  <!-- 时间间隔栏 -->
+  <!-- <Barrier /> -->
+
+  <scroll-view
+    :lower-threshold="300"
+    scroll-y="true"
+    :upper-threshold="300"
+    :scroll-into-view="scrollToTaskId"
+    @scroll="scroll"
+    @scrolltolower="handleScrollBottom"
+    @scrolltoupper="handleScrollTop"
+    id="scroll"
+  >
+    <!-- 时间轴 -->
+    <!-- <u-divider bg-color="#f3f4f6" class="pt-5" fontSize="14px" v-if="topEnd">到顶啦</u-divider> -->
+
+    <TimeBox />
+
+    <!-- <u-divider bg-color="#f3f4f6" class="pb-5" fontSize="14px" v-if="bottomEnd">到底啦</u-divider> -->
+  </scroll-view>
+</template>
+
+<script setup>
+import { reactive, computed } from 'vue';
+import { useStore } from 'vuex';
+// import Barrier from './component/Barrier.vue';
+import dayjs from 'dayjs';
+import TimeBox from './component/TimeBox.vue';
+
+const store = useStore();
+// const visibleRoles = computed(() => store.state.role.visibleRoles);
+// const scrollTop = computed(() => store.state.task.scrollTop);
+const tasks = computed(() => store.state.task.tasks);
+const topEnd = computed(() => store.state.task.topEnd);
+const bottomEnd = computed(() => store.state.task.bottomEnd);
+const showSkeleton = computed(() => store.state.task.showSkeleton);
+const timeNode = computed(() => store.state.task.timeNode);
+const scrollToTaskId = computed(() => store.state.task.scrollToTaskId);
+const timeGranularity = computed(() => store.getters['task/timeGranularity']);
+const emit = defineEmits(['getTasks']);
+
+const data = reactive({ top: 0 });
+
+// 滚动
+function scroll(e) {
+  data.top = e.detail.scrollTop;
+  store.commit('task/setShrink', data.top > data.scrollTop);
+  store.commit('task/setScrollTop', data.top);
+}
+
+// 滚动到顶部
+async function handleScrollTop() {
+  if (!tasks.value || !tasks.value.length || showSkeleton.value) return;
+  const startTime = tasks.value[0].planStart - 0;
+  if (topEnd.value) {
+    // 没有数据时 自动加载数据
+    console.warn('滚动到顶部没有数据时: ');
+    const addTasks = uni.$task.setPlaceholderTasks(startTime, true, timeGranularity.value);
+    store.commit('task/setUpTasks', addTasks);
+  } else {
+    // 有数据时
+    console.warn('滚动到顶部有数据时: ');
+    const detailId = tasks.value.findIndex(task => task.detailId);
+    const timeNodeValue = tasks.value[detailId].planStart - 0;
+    const upQuery = {
+      timeNode: timeNodeValue,
+      queryType: 0,
+      queryNum: 6,
+    };
+    await emit('getTasks', upQuery);
+  }
+}
+
+// 滚动到底部
+async function handleScrollBottom() {
+  if (!tasks.value || !tasks.value.length || showSkeleton.value) return;
+  const startTime = tasks.value[tasks.value.length - 1].planStart - 0;
+  if (bottomEnd.value) {
+    // 没有数据时 自动加载数据
+    console.warn('滚动到底部没有数据时: ');
+    const addTasks = uni.$task.setPlaceholderTasks(startTime, false, timeGranularity.value);
+    store.commit('task/setDownTasks', addTasks);
+  } else {
+    // 时间基准点=最后一个任务的开始时间+当前时间颗粒度
+    console.warn('滚动到底部有数据时: ');
+    const arr = [];
+    tasks.value.forEach(task => {
+      if (task.detailId) {
+        arr.push(task);
+      }
+    });
+    const nextQueryTime = +uni.$time.add(+arr[arr.length - 1].planStart, 1, timeGranularity.value);
+    const downQuery = {
+      timeNode: nextQueryTime,
+      queryType: 1,
+      queryNum: 6,
+    };
+    await emit('getTasks', downQuery);
+  }
+}
+
+// 设置自动滚动位置
+function setScrollPosition() {
+  // 如果storage里有taskId 滚动到这个id的任务
+  const taskId = uni.$storage.getStorageSync('taskId');
+  if (taskId) {
+    store.commit('task/setScrollToTaskId', `a${taskId}`);
+    uni.$storage.setStorageSync('taskId', ''); // 记录后即刻清除本地存储
+  } else {
+    const item = tasks.value.find(task => task.detailId);
+    if (item) {
+      store.commit('task/setScrollToTaskId', `a${item.id}`);
+    } else {
+      // 没有本地记录的taskId
+      // 找到当前时间基准线的任务id 记录 并滚动到当前时间基准线
+      const task = tasks.value.find(item => dayjs(+item.planStart).isSame(timeNode.value, timeGranularity.value));
+      task && store.commit('task/setScrollToTaskId', `a${task.id}`); // 有这个task 就记录他的id
+    }
+  }
+}
+
+defineExpose({
+	setScrollPosition
+})
+</script>
diff --git a/components/TimeLine 复制/component/Barrier.vue b/components/TimeLine 复制/component/Barrier.vue
new file mode 100644
index 0000000..95f5f9b
--- /dev/null
+++ b/components/TimeLine 复制/component/Barrier.vue	
@@ -0,0 +1,38 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-19 14:22:54
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-20 11:46:04
+-->
+<template>
+  <view class>
+    <!-- :class="{ active: cycleTasks.time.start === filter.startTime }" -->
+    <view class="cycle-time active">
+      <!-- {{ $util.formatStartTimeToCycleTime(filter.time, cycleTasks.time.start) }} -->
+      2021年30周
+    </view>
+  </view>
+</template>
+
+<script setup>
+
+</script>
+<style scoped lang="scss">
+.cycle-time {
+  padding: 8rpx 16rpx;
+  margin-bottom: 16rpx;
+  background: #fafafc;
+  color: $uni-text-color;
+  font-size: 28rpx;
+  position: sticky;
+  top: -1px;
+  left: 0;
+  z-index: 99;
+
+  &.active {
+    background: $uni-color-primary;
+    color: $uni-text-color-inverse;
+  }
+}
+</style>
diff --git a/components/TimeLine 复制/component/TaskTools.vue b/components/TimeLine 复制/component/TaskTools.vue
new file mode 100644
index 0000000..52f4c3e
--- /dev/null
+++ b/components/TimeLine 复制/component/TaskTools.vue	
@@ -0,0 +1,177 @@
+<template>
+  <view>
+    <view class="flex justify-between" style="min-width: 90px; position: relative">
+      <u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="17px"></u-icon>
+      <u-icon custom-prefix="custom-icon" name="attachment" size="21px"></u-icon>
+      <!-- <u-icon custom-prefix="custom-icon" name="moneycollect" size="20px"></u-icon> -->
+      <u-icon name="xuanxiang" custom-prefix="custom-icon" size="21px" @click="operation"></u-icon>
+
+      <!-- 右上角 ... 弹窗 -->
+      <view class="popup border shadow-md" v-if="data.show">
+        <!-- <view class="flex justify-center pb-3 border-b-1">
+          <span>添加插件</span>
+        </view> -->
+        <view class="flex justify-center pb-3 border-b-1">
+          <span @click="createTask">新建任务</span>
+        </view>
+        <view class="flex pt-3 justify-center">
+          <span>克隆任务</span>
+        </view>
+      </view>
+    </view>
+
+    <!-- 遮罩 -->
+    <view class="mask" v-if="data.maskShow" @click="closeMask"></view>
+    <!-- 新建任务弹窗 -->
+    <CreateTask
+      :startTime="data.startTime"
+      :endTime="data.endTime"
+      :task="task"
+      :source="'regular'"
+      @showTime="showTime"
+      @closeMask="closeMask"
+      class="thirdPopup flex transition-transform"
+      v-if="data.createTaskShow"
+    />
+
+    <u-picker title="开始时间" mode="time" v-model="data.showStart" :params="data.params" @confirm="confirmStartTime"></u-picker>
+    <u-picker title="结束时间" mode="time" v-model="data.showEnd" :params="data.params" @confirm="confirmEndTime"></u-picker>
+  </view>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+import CreateTask from '@/components/Title/components/CreateTask.vue';
+
+defineProps({ task: { type: Object, default: () => {} } });
+
+const data = reactive({
+  show: false, // 右上角 ... 显示
+  createTaskShow: false, // 新建项目显示
+  secondShow: false, // 分享项目显示
+  maskShow: false, // 遮罩显示
+  showStart: false,
+  showEnd: false,
+  startTime: '', // 新建任务的开始时间
+  endTime: '', // 新建任务的截止时间
+  params: {
+    year: true,
+    month: true,
+    day: true,
+    hour: true,
+    minute: true,
+    second: true,
+  },
+});
+
+// 操作
+function operation() {
+  // this.$t.ui.showToast('操作');
+  data.show = !data.show;
+}
+
+// 新建项目
+function createTask() {
+  // 关闭 ... 弹窗
+  data.show = false;
+  // 打开遮罩
+  data.maskShow = true;
+  // 打开新建项目弹窗
+  data.createTaskShow = true;
+}
+
+// 点击遮罩，关闭弹窗
+function closeMask() {
+  // 关闭遮罩
+  data.maskShow = false;
+  // 关闭分享项目弹窗
+  data.secondShow = false;
+  // 关闭新建项目弹窗
+  data.createTaskShow = false;
+}
+
+function showTime() {
+  data.showStart = !data.showStart;
+}
+
+// 选择开始时间
+function confirmStartTime(e) {
+  data.startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
+  data.showEnd = true;
+}
+
+// 选择结束时间
+function confirmEndTime(e) {
+  data.endTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
+}
+</script>
+
+<style lang="scss" scoped>
+.mask {
+  width: 100%;
+  height: 100vh;
+  z-index: 21;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.thirdPopup {
+  background: #ffffff;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 33;
+  border-radius: 5px;
+  width: 90%;
+}
+
+.popup {
+  width: 110px;
+  background: #fff;
+  position: absolute;
+  right: 0;
+  top: 35px;
+  z-index: 99;
+  padding: 15px 0;
+  color: black;
+  animation: opacity 1s ease-in;
+}
+
+@keyframes opacity {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+::v-deep .u-slot-content {
+  min-width: 0;
+}
+::v-deep .u-dropdown__content {
+  min-height: 120px !important;
+  height: auto !important;
+  overflow-y: auto;
+  background: #fff !important;
+  transition: none !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+::v-deep .u-dropdown__menu__item .u-flex {
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  flex-wrap: nowrap;
+  border: 1px solid #afbed1;
+  padding: 0 8px;
+}
+::v-deep .u-dropdown__content__mask {
+  display: none;
+}
+</style>
diff --git a/components/TimeLine 复制/component/TimeBox.vue b/components/TimeLine 复制/component/TimeBox.vue
new file mode 100644
index 0000000..b40e172
--- /dev/null
+++ b/components/TimeLine 复制/component/TimeBox.vue	
@@ -0,0 +1,132 @@
+<template>
+  <!-- v-finger:pinch="pinchHandler" -->
+  <view class="column">
+    <view v-if="tasks && tasks.length">
+      <view :key="task.id" v-for="task in tasks" :id="`a${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>
+        <view class="plugin">
+          <view class="h-3" v-if="task.process === 4"></view>
+          <!-- <view class="ml-3 overflow-hidden shadow-lg task-box"> -->
+          <view class="ml-3">
+            <u-card :show-foot="false" :show-head="false" :style="{ height: setHeight(task.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(task.planStart - 0, task.id)"
+              :style="{ height: setHeight(task.panel) }"
+              :show-foot="false"
+              :show-head="false"
+              class="h-16"
+              margin="0"
+              v-if="tasks && tasks.length && task.process !== 4 && !showSkeleton"
+            >
+              <template v-slot:body> -->
+            <view class="h-16" v-if="tasks && tasks.length && task.process !== 4 && !showSkeleton" @click="onClickTask(task.planStart - 0, task.id)">
+              <view class="p-0 u-col-between grid gap-3">
+                <view :key="pIndex" v-for="(row, pIndex) in task.plugins">
+                  <view class="grid gap-2 grid-cols-1" v-if="row.length">
+                    <Plugin
+                      :class="[`row-span-${plugin.row}`, `col-span-${plugin.col}`]"
+                      :task="task"
+                      :key="plugin.pluginTaskId"
+                      :plugin-task-id="plugin.pluginTaskId"
+                      :plugin-id="plugin.pluginId"
+                      :param="plugin.param"
+                      :style-type="data.styleType || 0"
+                      v-for="plugin in row"
+                    />
+                  </view>
+                </view>
+              </view>
+            </view>
+            <!-- </template>
+            </u-card> -->
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 局部弹框操作栏 -->
+    <Tips />
+  </view>
+</template>
+
+<script setup>
+import { useStore } from 'vuex';
+import { computed, reactive } from 'vue';
+import TimeStatus from './TimeStatus.vue';
+import TaskTools from './TaskTools.vue';
+import Skeleton from '@/components/Skeleton/Skeleton.vue';
+
+const data = reactive({
+  currentComponent: '',
+  styleType: 0,
+});
+
+const store = useStore();
+const roleId = computed(() => store.state.role.roleId);
+const timeUnit = computed(() => store.state.task.timeUnit);
+const tasks = computed(() => store.state.task.tasks);
+const showSkeleton = computed(() => store.state.task.showSkeleton);
+const startTimeFormat = computed(() => store.getters['task/startTimeFormat']);
+
+// 设置任务面板高度
+function setHeight(panel) {
+  if (panel && panel.height) {
+    return `${panel.height}px`;
+  }
+  return 'auto';
+}
+
+/**
+ * 点击了定期任务的面板 更新可变的日常任务
+ * @param {number} planStart 任务计划开始时间
+ * @param {string} taskId 任务id
+ */
+function onClickTask(planStart, taskId) {
+  const param = { roleId: roleId.value, timeNode: planStart, timeUnit: timeUnit.value };
+  store.dispatch('task/getGlobal', param);
+  uni.$storage.setStorageSync('taskId', taskId);
+  uni.$storage.setStorageSync('roleId', roleId.value);
+}
+
+function pinchHandler(evt) {
+  // evt.scale代表两个手指缩放的比例
+  console.log(`缩放：${evt.zoom}`);
+}
+</script>
+
+<style scoped lang="scss">
+.task-box {
+  border-radius: 24rpx;
+}
+.column {
+  padding: 24px 14px;
+}
+.task-column {
+  height: 33px;
+}
+.plugin {
+  margin-top: 8px;
+  margin-bottom: 8px;
+  margin-left: 15px;
+  border-left: 2px solid #d1d5db;
+}
+::v-deep .ml-2 {
+  margin-left: 16px;
+}
+
+::v-deep .ml-3 {
+  margin-left: 20px;
+}
+</style>
diff --git a/components/TimeLine 复制/component/TimeStatus.vue b/components/TimeLine 复制/component/TimeStatus.vue
new file mode 100644
index 0000000..1747154
--- /dev/null
+++ b/components/TimeLine 复制/component/TimeStatus.vue	
@@ -0,0 +1,317 @@
+<template>
+  <view class="u-font-14">
+    <view
+      class="flex items-center justify-center rounded-full icon-column"
+      :style="{ color: orderStyle.color }"
+      @click="changeStatus(task.process, $event)"
+    >
+      <!-- 1进行中 2暂停中 3已完成 -->
+      <u-circle-progress
+        :percent="orderStyle.persent - 0"
+        :active-color="orderStyle.color"
+        bg-color="rgba(255,255,255,0)"
+        border-width="4"
+        :width="task.process !== 4 ? 66 : 50"
+        v-if="task.process === 1 || task.process === 2 || task.process === 3"
+      >
+        <view class="u-progress-content">
+          <view class="u-progress-dot"></view>
+          <view class="u-progress-info">
+            <u-icon :name="orderStyle.icon" v-if="orderStyle.icon" size="15px"></u-icon>
+            <template v-else>{{ data.durationText }}</template>
+          </view>
+        </view>
+      </u-circle-progress>
+      <!-- 0未开始 4添加任务 -->
+      <view class="flex items-center justify-center rounded-full progress-box" v-else :class="task.process === 4 ? 'progress-box-4' : ''">
+        <view class="u-progress-content">
+          <view class="u-progress-dot"></view>
+          <view class="u-progress-info">
+            <span v-if="orderStyle.icon">
+              <u-icon :name="orderStyle.icon" v-if="task.process !== 4" size="15px"></u-icon>
+              <u-icon :name="orderStyle.icon" v-else size="15px"></u-icon>
+            </span>
+            <template v-else>{{ data.durationText }}</template>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 遮罩 -->
+    <view class="mask" v-if="data.maskShow" @click="closeMask"></view>
+    <!-- 新建任务弹窗 -->
+    <CreateTask
+      :startTime="data.startTime"
+      :endTime="data.endTime"
+      :task="task"
+      :source="'regular'"
+      @showTime="showTime"
+      @closeMask="closeMask"
+      class="thirdPopup flex transition-transform"
+      v-if="data.createTaskShow"
+    />
+
+    <u-picker title="开始时间" mode="time" v-model="data.showStart" :params="data.params" @confirm="confirmStartTime"></u-picker>
+    <u-picker title="结束时间" mode="time" v-model="data.showEnd" :params="data.params" @confirm="confirmEndTime"></u-picker>
+  </view>
+</template>
+
+<script setup>
+import { reactive, onMounted, computed } from 'vue';
+import { useStore } from 'vuex';
+import dayjs from 'dayjs';
+import CreateTask from '../../Title/components/CreateTask.vue';
+
+const props = defineProps({ task: { type: Object, default: () => {} } });
+
+const data = reactive({
+  time: '',
+  start: [{ text: '确认开始任务', color: 'blue' }],
+  pause: [{ text: '继续' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }],
+  proceed: [{ text: '暂停' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }],
+  again: [{ text: '重新开始任务', color: 'blue' }],
+  timer: null,
+  durationText: 0,
+  maskShow: false, // 遮罩显示
+  createTaskShow: false, // 新建项目显示
+  startTime: '', // 新建任务的开始时间
+  endTime: '', // 新建任务的截止时间
+  showStart: false,
+  showEnd: false,
+  params: {
+    year: true,
+    month: true,
+    day: true,
+    hour: true,
+    minute: true,
+    second: true,
+  },
+});
+
+const store = useStore();
+const tip = computed(() => store.state.task.tip);
+const status = computed(() => props.task ? props.task.process : 0);
+const taskName = computed(() => props.task ? props.task.name : '');
+const taskId = computed(() => props.task ? props.task.id : '');
+
+// 计算圆环的弧度百分比
+function computeCyclePersent() {
+  if (!props.task || !props.task.realStart || !props.task.planDuration) return 100;
+  const { realStart, planDuration } = props.task;
+  return (((Date.now() - +realStart) * 100) / +planDuration).toFixed(2);
+}
+
+const orderStyle = computed(() => {
+  // 图标文本颜色
+  // 任务状态 0未开始 1进行中 2暂停中 3已完成
+  let color = '#9CA3AF';
+  let icon = 'play-right-fill';
+  let persent = 100;
+  switch (status.value) {
+    case 1: // 进行中
+      color = '#60A5FA';
+      icon = '';
+      if (+computeCyclePersent() > 100) {
+        persent = 96;
+      } else {
+        persent = computeCyclePersent();
+      }
+      break;
+    case 2: // 暂停中
+      color = '#F87171';
+      icon = 'pause';
+      persent = 50; // TODO: 暂时这样 暂停状态没有计算剩余多少时间
+      break;
+    case 3: // 已结束
+      color = '#34D399';
+      icon = 'checkmark';
+      persent = 100;
+      break;
+    case 4: // 添加任务
+      color = '#60A5FA';
+      icon = 'plus';
+      persent = 100;
+      break;
+    default:
+      // 未开始
+      color = '#9CA3AF';
+      icon = 'play-right';
+      persent = 100;
+      break;
+  }
+  return { color, icon, persent };
+});
+
+// unMounted(() => {
+//   if (data.timer) {
+//     clearInterval(data.timer);
+//     data.timer = null;
+//   }
+// });
+
+/**
+     * 计算tip的标题内容
+     */
+function genetateTips(type, content) {
+  if (type === 0) {
+    return `确认开始任务"${content}"吗？`;
+  }
+  if (type === 3) {
+    return '是否要重新开始此任务';
+  }
+  return '请选择要执行的操作';
+}
+
+// 新建任务
+function addTask() {
+  // uni.$ui.showToast('新建任务');
+  // 打开遮罩
+  data.maskShow = true;
+  // 打开新建项目弹窗
+  data.createTaskShow = true;
+}
+
+/**
+     * 点击了图标 修改任务状态
+     * @param {object} event
+     */
+function changeStatus(process, event) {
+  if (process === 4) {
+    addTask();
+    return;
+  }
+  // return false;
+  tip.status = status;
+  tip.taskId = taskId;
+  tip.left = event.target.x;
+  tip.top = event.target.y;
+  tip.show = true;
+  tip.text = genetateTips(status, taskName);
+  store.commit('task/setTip', tip);
+}
+
+// 点击遮罩，关闭弹窗
+function closeMask() {
+  // 关闭遮罩
+  data.maskShow = false;
+  // 关闭新建项目弹窗
+  data.createTaskShow = false;
+}
+
+function showTime(type) {
+  if (type === 1) {
+    data.showStart = !data.showStart;
+  } else {
+    data.showEnd = !data.showEnd;
+  }
+}
+
+// 选择开始时间
+function confirmStartTime(e) {
+  data.startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
+  data.showEnd = true;
+}
+
+// 选择结束时间
+function confirmEndTime(e) {
+  data.endTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
+}
+
+// 计算进行中状态剩余时间
+// 预计结束时间 = realStart(实际开始) + planDuration(计划时长)
+// 剩余时间 = 预计结束时间 - 当前时间
+// 剩余时间 = realStart + planDuration - Date.now()
+function computeDurationText() {
+  const { realStart, planDuration } = props.task;
+  const leftTime = (realStart-0 || 0) + (planDuration-0 || 0) - Date.now(); // 剩余时间
+  const { num, time } = uni.$time.computeDurationText(leftTime);
+  if (num <= 0) {
+    clearInterval(data.timer);
+    data.timer = null;
+  }
+  data.durationText = num;
+  return time;
+}
+
+function updateDurationText(time) {
+  if (data.timer) {
+    clearInterval(data.timer);
+    data.timer = null;
+  }
+  if (!time) return;
+  setInterval(() => {
+    computeDurationText();
+  }, time);
+}
+
+onMounted(() => {
+  // TODO: 计算在不在窗口内显示
+  const time = computeDurationText();
+  updateDurationText(time);
+});
+</script>
+
+<style scoped lang="scss">
+.icon-column {
+  height: 33px;
+  width: 33px;
+}
+.one {
+  height: 33px;
+  width: 33px;
+}
+
+.progress-box {
+  background: rgba(255, 255, 255, 0);
+  width: 33px;
+  height: 33px;
+  border: 2px solid #9ca3af;
+}
+
+.progress-box-4 {
+  width: 25px;
+  height: 25px;
+  border: 2px solid #60a5fa;
+}
+
+.mask {
+  width: 100%;
+  height: 100vh;
+  z-index: 21;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.thirdPopup {
+  background: #ffffff;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 33;
+  border-radius: 5px;
+  width: 90%;
+}
+
+::v-deep .u-dropdown__content {
+  min-height: 120px !important;
+  height: auto !important;
+  overflow-y: auto;
+  background: #fff !important;
+  transition: none !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+::v-deep .u-dropdown__menu__item .u-flex {
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  flex-wrap: nowrap;
+  border: 1px solid #afbed1;
+  padding: 0 8px;
+}
+::v-deep .u-dropdown__content__mask {
+  display: none;
+}
+</style>
diff --git a/components/TimeLine 复制/component/Title.vue b/components/TimeLine 复制/component/Title.vue
new file mode 100644
index 0000000..e69de29
diff --git a/components/TimeLine/TimeLine.vue b/components/TimeLine/TimeLine.vue
index 489c680..8b688e4 100644
--- a/components/TimeLine/TimeLine.vue
+++ b/components/TimeLine/TimeLine.vue
@@ -4,6 +4,7 @@
 
   <scroll-view
     :lower-threshold="300"
+    style="height: 800px;"
     scroll-y="true"
     :upper-threshold="300"
     :scroll-into-view="scrollToTaskId"
@@ -15,7 +16,7 @@
     <!-- 时间轴 -->
     <!-- <u-divider bg-color="#f3f4f6" class="pt-5" fontSize="14px" v-if="topEnd">到顶啦</u-divider> -->
 
-    <TimeBox />
+    <TimeBox :tasks="tasks" />
 
     <!-- <u-divider bg-color="#f3f4f6" class="pb-5" fontSize="14px" v-if="bottomEnd">到底啦</u-divider> -->
   </scroll-view>
@@ -28,10 +29,17 @@ import { useStore } from 'vuex';
 import dayjs from 'dayjs';
 import TimeBox from './component/TimeBox.vue';
 
+const props = defineProps({
+  tasks: {
+    type: Array,
+    default: () => []
+  }
+})
+
 const store = useStore();
 // const visibleRoles = computed(() => store.state.role.visibleRoles);
 // const scrollTop = computed(() => store.state.task.scrollTop);
-const tasks = computed(() => store.state.task.tasks);
+// const tasks = computed(() => store.state.task.tasks);
 const topEnd = computed(() => store.state.task.topEnd);
 const bottomEnd = computed(() => store.state.task.bottomEnd);
 const showSkeleton = computed(() => store.state.task.showSkeleton);
@@ -51,8 +59,11 @@ function scroll(e) {
 
 // 滚动到顶部
 async function handleScrollTop() {
-  if (!tasks.value || !tasks.value.length || showSkeleton.value) return;
-  const startTime = tasks.value[0].planStart - 0;
+  if (!props.tasks || !props.tasks.length || showSkeleton.value) return;
+  // 先把现在的任务放进去
+  store.commit('task/updateTasks', props.tasks)
+
+  const startTime = props.tasks[0].planStart - 0;
   if (topEnd.value) {
     // 没有数据时 自动加载数据
     console.warn('滚动到顶部没有数据时: ');
@@ -61,8 +72,8 @@ async function handleScrollTop() {
   } else {
     // 有数据时
     console.warn('滚动到顶部有数据时: ');
-    const detailId = tasks.value.findIndex(task => task.detailId);
-    const timeNodeValue = tasks.value[detailId].planStart - 0;
+    const detailId = props.tasks.findIndex(task => task.detailId);
+    const timeNodeValue = props.tasks[detailId].planStart - 0;
     const upQuery = {
       timeNode: timeNodeValue,
       queryType: 0,
@@ -74,8 +85,11 @@ async function handleScrollTop() {
 
 // 滚动到底部
 async function handleScrollBottom() {
-  if (!tasks.value || !tasks.value.length || showSkeleton.value) return;
-  const startTime = tasks.value[tasks.value.length - 1].planStart - 0;
+  if (!props.tasks || !props.tasks.length || showSkeleton.value) return;
+  // 先把现在的任务放进去
+  store.commit('task/updateTasks', props.tasks)
+
+  const startTime = props.tasks[props.tasks.length - 1].planStart - 0;
   if (bottomEnd.value) {
     // 没有数据时 自动加载数据
     console.warn('滚动到底部没有数据时: ');
@@ -85,7 +99,7 @@ async function handleScrollBottom() {
     // 时间基准点=最后一个任务的开始时间+当前时间颗粒度
     console.warn('滚动到底部有数据时: ');
     const arr = [];
-    tasks.value.forEach(task => {
+    props.tasks.forEach(task => {
       if (task.detailId) {
         arr.push(task);
       }
@@ -99,28 +113,4 @@ async function handleScrollBottom() {
     await emit('getTasks', downQuery);
   }
 }
-
-// 设置自动滚动位置
-function setScrollPosition() {
-  // 如果storage里有taskId 滚动到这个id的任务
-  const taskId = uni.$storage.getStorageSync('taskId');
-  if (taskId) {
-    store.commit('task/setScrollToTaskId', `a${taskId}`);
-    uni.$storage.setStorageSync('taskId', ''); // 记录后即刻清除本地存储
-  } else {
-    const item = tasks.value.find(task => task.detailId);
-    if (item) {
-      store.commit('task/setScrollToTaskId', `a${item.id}`);
-    } else {
-      // 没有本地记录的taskId
-      // 找到当前时间基准线的任务id 记录 并滚动到当前时间基准线
-      const task = tasks.value.find(item => dayjs(+item.planStart).isSame(timeNode.value, timeGranularity.value));
-      task && store.commit('task/setScrollToTaskId', `a${task.id}`); // 有这个task 就记录他的id
-    }
-  }
-}
-
-defineExpose({
-	setScrollPosition
-})
 </script>
diff --git a/components/TimeLine/component/TimeBox.vue b/components/TimeLine/component/TimeBox.vue
index b40e172..cb743e6 100644
--- a/components/TimeLine/component/TimeBox.vue
+++ b/components/TimeLine/component/TimeBox.vue
@@ -68,6 +68,13 @@ import TimeStatus from './TimeStatus.vue';
 import TaskTools from './TaskTools.vue';
 import Skeleton from '@/components/Skeleton/Skeleton.vue';
 
+const props = defineProps({
+  tasks: {
+    type: Array,
+    default: () => []
+  }
+})
+
 const data = reactive({
   currentComponent: '',
   styleType: 0,
@@ -76,7 +83,7 @@ const data = reactive({
 const store = useStore();
 const roleId = computed(() => store.state.role.roleId);
 const timeUnit = computed(() => store.state.task.timeUnit);
-const tasks = computed(() => store.state.task.tasks);
+// const tasks = computed(() => store.state.task.tasks);
 const showSkeleton = computed(() => store.state.task.showSkeleton);
 const startTimeFormat = computed(() => store.getters['task/startTimeFormat']);
 
diff --git a/hooks/project/useGetTasks.js b/hooks/project/useGetTasks.js
index c5d2565..848d838 100644
--- a/hooks/project/useGetTasks.js
+++ b/hooks/project/useGetTasks.js
@@ -1,4 +1,4 @@
-import { computed, nextTick } from 'vue';
+import { computed, nextTick, watch } from 'vue';
 import { useStore } from 'vuex';
 import { flatten } from 'lodash';
 import dayjs from 'dayjs';
@@ -8,6 +8,10 @@ export default function useGetTasks() {
   const roleId = computed(() => store.state.role.roleId);
   const timeNode = computed(() => store.state.task.timeNode);
   const timeUnit = computed(() => store.state.task.timeUnit);
+  const visibleRoles = computed(() => store.state.role.visibleRoles);
+  const allTasks = computed(() => store.state.task.allTasks);
+  const roleIndex = computed(() => store.state.role.roleIndex);
+
   const projectId = computed(() => store.getters['project/projectId']);
   const timeGranularity = computed(() => store.getters['task/timeGranularity']);
 
@@ -187,6 +191,19 @@ export default function useGetTasks() {
     store.commit('task/setDownTasks', initData);
   }
 
+  /**
+   * 当日常任务发生变化时
+   * 将新获取到的日常任务放在allTasks里
+   */
+  watch(tasks, newValue => {
+    console.log('newValue----->tasks: ');
+    // 添加到allTasks里
+    const index = visibleRoles.value.findIndex(role => role.id === roleId.value);
+    const arr = [...allTasks.value];
+    arr[index].task = [...newValue];
+    store.commit('task/setAllTasks', arr);
+  });
+
   return {
     initPlanTasks,
     getTasks,
diff --git a/hooks/project/useInit.js b/hooks/project/useInit.js
index 217e57a..cb69a42 100644
--- a/hooks/project/useInit.js
+++ b/hooks/project/useInit.js
@@ -5,6 +5,7 @@ import { useStore } from 'vuex';
 export default function useInit() {
   const store = useStore();
   const token = computed(() => store.state.user.token);
+  const allTasks = computed(() => store.state.task.allTasks);
 
   onLoad(options => {
     if (options.share && options.share === '1') {
@@ -14,7 +15,6 @@ export default function useInit() {
     }
   });
 
-
   /**
    * 通过项目id获取项目信息
    * @param {object} params 提交的参数
@@ -30,6 +30,18 @@ export default function useInit() {
     }
   }
 
+  // 获取到角色列表，设置所有任务对应的角色
+  function setAllTasksByRoles(roles) {
+    let arr = allTasks.value;
+    if (roles && roles.length) {
+      roles.forEach(role => {
+        const item = { role };
+        arr.push(item);
+      });
+    }
+    store.commit('task/setAllTasks', arr);
+  }
+
   /**
    * 通过项目id获取角色信息
    * @param {string} projectId
@@ -43,6 +55,7 @@ export default function useInit() {
         store.commit('role/setInvisibleRoles', data ? data.invisibleList : []);
         store.commit('role/setVisibleRoles', data ? data.visibleList : []);
         setInitialRoleId(data ? data.visibleList : []);
+        setAllTasksByRoles(data ? data.visibleList : []);
       }
     });
   }
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 7daadb6..9a39f2e 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -7,7 +7,7 @@
 			<!-- 上传 导入wbs -->
 			<Upload @success="onUploadSuccess" @error="onUploadError" />
 		</view>
-<u-button @click="toLogin">登录</u-button>
+    <u-button @click="toLogin">登录</u-button>
 		<!-- 项目列表 -->
 		<Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" />
 
@@ -108,7 +108,7 @@ function onMove(event) {
 }
 
 function toLogin() {
-  uni.navigateTo({ url: '/pages/user/accountLogin' })
+  uni.navigateTo({ url: '/pages/user/accountLogin' });
 }
 </script>
 
diff --git a/pages/project/project 复制.vue b/pages/project/project 复制.vue
new file mode 100644
index 0000000..8e3e177
--- /dev/null
+++ b/pages/project/project 复制.vue	
@@ -0,0 +1,142 @@
+<template>
+  <theme :style="{ height: height }" class="flex flex-col overflow-hidden u-font-14">
+    <!-- 标题栏 -->
+    <Title />
+
+    <view class="container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100">
+      <!-- 角色栏 -->
+      <Roles />
+
+      <!-- 日常任务面板 -->
+      <Globals />
+
+      <!-- 定期任务面板 -->
+      <TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="timeLine" />
+
+      <!-- TODO: DEBUG: -->
+      <u-button @click="$store.commit('setTheme', 'theme-test')">测试切换主题</u-button>
+    </view>
+  </theme>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import useInit from '@/hooks/project/useInit';
+import useGetTasks from '@/hooks/project/useGetTasks';
+
+const initHook = useInit();
+const getTasksHook = useGetTasks();
+const store = useStore();
+const roleId = computed(() => store.state.role.roleId);
+const timeNode = computed(() => store.state.task.timeNode);
+const timeUnit = computed(() => store.state.task.timeUnit);
+const projectId = computed(() => store.getters['project/projectId']);
+const userId = computed(() => store.getters['user/userId']);
+const newProjectInfo = computed(() => store.state.task.newProjectInfo);
+const showScrollTo = computed(() => store.state.task.showScrollTo);
+const height = ref(null);
+const timeLine = ref(null);
+
+onMounted(() => {
+  const system = uni.getSystemInfoSync();
+  height.value = `${system.windowHeight}px`;
+});
+
+// 获取可变全局任务
+function getGlobalData() {
+  const param = {
+    roleId: roleId.value,
+    timeNode: timeNode.value,
+    timeUnit: timeUnit.value,
+    projectId: projectId.value,
+  };
+  store.dispatch('task/getGlobal', param);
+}
+
+// 清除已有的任务数据
+function clearTasksData() {
+  // 清空日常任务的数据
+  store.commit('task/setPermanents', []);
+  store.commit('task/setDailyTasks', []);
+  // 清空定期任务数据
+  store.commit('task/clearTasks');
+  // 到顶的标志复位
+  // 到底的标志复位
+  store.commit('task/clearEndFlag');
+}
+
+/**
+ * 当时间基准点发生变化时
+ * 重新根据时间和角色查询普通日常任务
+ * 永久日常任务不发生 改变
+ */
+watch(timeNode, newValue => {
+  if (newValue && roleId.value) {
+    console.log('当时间基准点发生变化时');
+    clearTasksData();
+    getGlobalData(); // 查可变日常任务
+    getTasksHook.initPlanTasks(); // 处理定期任务
+
+    // 滚动到对应位置
+    let timer = null;
+    timer = setInterval(() => {
+      if (showScrollTo.value) {
+        clearInterval(timer);
+        console.log('timeLine: ', timeLine);
+        timeLine.value.setScrollPosition();
+      }
+    }, 500);
+  }
+});
+
+/**
+ * 当角色发生变化时
+ * 重新查询永久日常任务和普通日常任务
+ * 注意: 切换角色后 重新设置了时间基准点 时间基准点一定会变
+ * 所以监听时间基准点获取 可变日常任务即可 这里不用获取 避免重复获取
+ */
+watch(roleId, newValue => {
+  if (newValue) {
+    console.log('当角色发生变化时', newValue);
+    store.commit('task/setTimeNode', Date.now());
+    // 根据角色查找永久的日常任务
+    const params = {
+      roleId: newValue,
+      projectId: projectId.value,
+    };
+    store.dispatch('task/getPermanent', params);
+  }
+});
+
+/**
+ * 当时间基准点发生变化时
+ * 重新根据时间和角色查询普通日常任务
+ * 永久日常任务不发生改变
+ */
+watch(newProjectInfo, newValue => {
+  console.log('当时间基准点发生变化时');
+  if (newValue && newValue.value.projectId && newValue.value.url) {
+    uni.$u.route('/', {
+      u: userId.value,
+      p: newValue.value.projectId,
+      url: newValue.value.url,
+    });
+    clearTasksData();
+    store.commit('role/setRoleId', '');
+    const options = uni.$route.query;
+
+    initHook.init(options);
+  }
+});
+
+function getTasks(params) {
+  getTasksHook.initPlanTasks(params); // 处理定期任务
+}
+</script>
+
+<style lang="scss" scoped>
+.border-b {
+  border-bottom: 1px solid #e4e7ed;
+}
+</style>
diff --git a/pages/project/project.vue b/pages/project/project.vue
index 505a5ea..6e090ba 100644
--- a/pages/project/project.vue
+++ b/pages/project/project.vue
@@ -7,11 +7,15 @@
       <!-- 角色栏 -->
       <Roles />
 
-      <!-- 日常任务面板 -->
-      <Globals />
+      <swiper :current="roleIndex" class="swiper container flex flex-col flex-1 mx-auto overflow-hidden bg-gray-100" :indicator-dots="false" :autoplay="false" :circular="false"  @change="tabsChange">
+        <swiper-item v-for="(task,index) in allTasks" :key="index">
+          <!-- 日常任务面板 -->
+          <Globals :globals="task.global" />
 
-      <!-- 定期任务面板 -->
-      <TimeLine @getTasks="getTasks" class="flex-1 overflow-hidden" ref="timeLine" />
+          <!-- 定期任务面板 -->
+          <TimeLine :tasks="task.task" @getTasks="getTasks" class="flex-1 overflow-hidden" />
+        </swiper-item>
+      </swiper>
 
       <!-- TODO: DEBUG: -->
       <u-button @click="$store.commit('setTheme', 'theme-test')">测试切换主题</u-button>
@@ -24,6 +28,7 @@ import { ref, computed, watch, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import useInit from '@/hooks/project/useInit';
 import useGetTasks from '@/hooks/project/useGetTasks';
+import dayjs from 'dayjs';
 
 const initHook = useInit();
 const getTasksHook = useGetTasks();
@@ -35,8 +40,12 @@ const projectId = computed(() => store.getters['project/projectId']);
 const userId = computed(() => store.getters['user/userId']);
 const newProjectInfo = computed(() => store.state.task.newProjectInfo);
 const showScrollTo = computed(() => store.state.task.showScrollTo);
+const visibleRoles = computed(() => store.state.role.visibleRoles);
+const allTasks = computed(() => store.state.task.allTasks);
+const roleIndex = computed(() => store.state.role.roleIndex);
+const globals = computed(() => store.getters['task/globals']);
+const timeGranularity = computed(() => store.getters['task/timeGranularity']);
 const height = ref(null);
-const timeLine = ref(null);
 
 onMounted(() => {
   const system = uni.getSystemInfoSync();
@@ -45,13 +54,20 @@ onMounted(() => {
 
 // 获取可变全局任务
 function getGlobalData() {
-  const param = {
-    roleId: roleId.value,
-    timeNode: timeNode.value,
-    timeUnit: timeUnit.value,
-    projectId: projectId.value,
-  };
-  store.dispatch('task/getGlobal', param);
+  if(!allTasks.value[roleIndex]) {
+    const param = {
+      roleId: roleId.value,
+      timeNode: timeNode.value,
+      timeUnit: timeUnit.value,
+      projectId: projectId.value,
+    };
+    store.dispatch('task/getGlobal', param);
+  }
+  // 添加到allTasks里
+    const index = visibleRoles.value.findIndex(role => role.id === roleId.value);
+    const arr = [...allTasks.value];
+    arr[index].global = [...globals.value];
+    store.commit('task/setAllTasks', arr);
 }
 
 // 清除已有的任务数据
@@ -66,6 +82,28 @@ function clearTasksData() {
   store.commit('task/clearEndFlag');
 }
 
+/**
+ * 当角色发生变化时
+ * 重新查询永久日常任务和普通日常任务
+ * 注意: 切换角色后 重新设置了时间基准点 时间基准点一定会变
+ * 所以监听时间基准点获取 可变日常任务即可 这里不用获取 避免重复获取
+ */
+watch(roleId, newValue => {
+  if (newValue) {
+    // 判断如果allTasks里有就不用加了
+    if (allTasks.value.length && allTasks.value[roleIndex.value].global && allTasks.value[roleIndex.value].task) return;
+
+    console.log('当角色发生变化时', newValue);
+    store.commit('task/setTimeNode', Date.now());
+    // 根据角色查找永久的日常任务
+    const params = {
+      roleId: newValue,
+      projectId: projectId.value,
+    };
+    store.dispatch('task/getPermanent', params);
+  }
+});
+
 /**
  * 当时间基准点发生变化时
  * 重新根据时间和角色查询普通日常任务
@@ -75,6 +113,7 @@ watch(timeNode, newValue => {
   if (newValue && roleId.value) {
     console.log('当时间基准点发生变化时');
     clearTasksData();
+    // 查任务
     getGlobalData(); // 查可变日常任务
     getTasksHook.initPlanTasks(); // 处理定期任务
 
@@ -83,38 +122,19 @@ watch(timeNode, newValue => {
     timer = setInterval(() => {
       if (showScrollTo.value) {
         clearInterval(timer);
-        timeLine.value.setScrollPosition();
+        setScrollPosition();
       }
-    }, 500);
+    }, 300);
   }
 });
 
 /**
- * 当角色发生变化时
- * 重新查询永久日常任务和普通日常任务
- * 注意: 切换角色后 重新设置了时间基准点 时间基准点一定会变
- * 所以监听时间基准点获取 可变日常任务即可 这里不用获取 避免重复获取
- */
-watch(roleId, newValue => {
-  if (newValue) {
-    console.log('当角色发生变化时', newValue);
-    store.commit('task/setTimeNode', Date.now());
-    // 根据角色查找永久的日常任务
-    const params = {
-      roleId: newValue,
-      projectId: projectId.value,
-    };
-    store.dispatch('task/getPermanent', params);
-  }
-});
-
-/**
- * 当时间基准点发生变化时
+ * 当收到打开新项目消息状态时
  * 重新根据时间和角色查询普通日常任务
  * 永久日常任务不发生改变
  */
 watch(newProjectInfo, newValue => {
-  console.log('当时间基准点发生变化时');
+  console.log('当收到打开新项目消息状态时');
   if (newValue && newValue.value.projectId && newValue.value.url) {
     uni.$u.route('/', {
       u: userId.value,
@@ -132,6 +152,34 @@ watch(newProjectInfo, newValue => {
 function getTasks(params) {
   getTasksHook.initPlanTasks(params); // 处理定期任务
 }
+
+// tabs通知swiper切换
+function tabsChange(e) {
+  const { id } = visibleRoles.value[e.detail.current];
+  store.commit('role/setRoleIndex', e.detail.current);
+  store.commit('role/setRoleId', id);
+
+}
+
+// 设置自动滚动位置
+function setScrollPosition() {
+  // 如果storage里有taskId 滚动到这个id的任务
+  const taskId = uni.$storage.getStorageSync('taskId');
+  if (taskId) {
+    store.commit('task/setScrollToTaskId', `a${taskId}`);
+    uni.$storage.setStorageSync('taskId', ''); // 记录后即刻清除本地存储
+  } else {
+    const item = allTasks.value[roleIndex.value].task.find(task => task.detailId);
+    if (item) {
+      store.commit('task/setScrollToTaskId', `a${item.id}`);
+    } else {
+      // 没有本地记录的taskId
+      // 找到当前时间基准线的任务id 记录 并滚动到当前时间基准线
+      const task = allTasks.value[roleIndex.value].task.find(item => dayjs(+item.planStart).isSame(timeNode.value, timeGranularity.value));
+      task && store.commit('task/setScrollToTaskId', `a${task.id}`); // 有这个task 就记录他的id
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/store/role/mutations.js b/store/role/mutations.js
index 83bd215..058ab0a 100644
--- a/store/role/mutations.js
+++ b/store/role/mutations.js
@@ -34,6 +34,15 @@ const mutations = {
   setMembers(state, data) {
     state.members = data || [];
   },
+
+  /**
+   * 设置时间轴角色索引
+   * @param {Object} state
+   * @param {string} roleIndex 当前正在展示的时间轴角色索引
+   */
+  setRoleIndex(state, roleIndex) {
+    state.roleIndex = roleIndex;
+  },
 };
 
 export default mutations;
diff --git a/store/role/state.js b/store/role/state.js
index 1117de7..68454e9 100644
--- a/store/role/state.js
+++ b/store/role/state.js
@@ -3,6 +3,7 @@ const state = {
   visibleRoles: [], // 展示的角色信息
   roleId: '', // 当前展示查看的角色id
   members: [], // 项目下所有成员
+  roleIndex: 0, // 时间轴角色索引
 };
 
 export default state;
diff --git a/store/task/actions.js b/store/task/actions.js
index 15a5909..119538f 100644
--- a/store/task/actions.js
+++ b/store/task/actions.js
@@ -4,10 +4,10 @@ const actions = {
    * @param {*} commit
    * @param {string} roleId 角色id
    */
-  getPermanent({ commit }, param) {
-    commit('setShowGlobalSkeleton', true);
+  getPermanent({ commit, state }, param) {
+    if (state.hasPermanent) return;
     uni.$catchReq.getPermanent(param, (err, data) => {
-      commit('setShowGlobalSkeleton', false);
+      commit('setHasPermanent', true);
       if (err) {
         console.error('err: ', err);
       } else {
diff --git a/store/task/mutations.js b/store/task/mutations.js
index af17063..743fbbf 100644
--- a/store/task/mutations.js
+++ b/store/task/mutations.js
@@ -234,6 +234,15 @@ const mutations = {
     state.showGlobalSkeleton = show;
   },
 
+  /**
+   * 设置永久的日常任务是否加载过
+   * @param {Object} state
+   * @param {Boolean} show
+   */
+  setHasPermanent(state, show) {
+    state.hasPermanent = show;
+  },
+
   /**
    * 是否设置时间轴自动滚动的位置
    * @param {Object} state
@@ -242,6 +251,15 @@ const mutations = {
   setShowScrollTo(state, show) {
     state.showScrollTo = show;
   },
+
+  /**
+   * 设置所有任务数据
+   * @param {Object} state
+   * @param {Array} data 服务端返回的模板数组
+   */
+  setAllTasks(state, data) {
+    state.allTasks = data || [];
+  },
 };
 
 export default mutations;
diff --git a/store/task/state.js b/store/task/state.js
index ae3cca5..5ac7657 100644
--- a/store/task/state.js
+++ b/store/task/state.js
@@ -21,6 +21,9 @@ const state = {
   showGlobalSkeleton: false, // 日常任务骨架屏
   newProjectInfo: {},
   showScrollTo: false, // 是否可以设置时间轴自动滚动的位置
+
+  allTasks: [], // 所有任务
+  hasPermanent: false, // 永久的日常任务是否加载过
 };
 
 export default state;