feat: 小红点显示逻辑

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 1.0.0 (2022-02-23)
+# 1.0.0 (2022-02-26)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -75,6 +75,7 @@
  - | first commit | [8dc26de](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/8dc26de)
  - | get请求 | [3a61439](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/3a61439)
  project | 日常任务面板添加 | [b3f16ff](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/b3f16ff)
+ - | socket | [996a1ca](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/996a1ca)
  theme | theme demo | [9175758](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/9175758)
  - | token过期策略 | [8f16ae1](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/8f16ae1)
  - | vue3 | [12ed2ad](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/12ed2ad)

apis/plugin.js

@@ -5,7 +5,7 @@ import store from '@/store/index.js';
 const { apiUrl } = Config;
 // const defaultwbs = `${apiUrl}/defaultwbs`;
 const domain = computed(() => store.state.domain);
-console.log('domain: ', domain.value);
+// console.log('domain: ', domain.value);
 
 export function setupPlugin(app) {
   uni.$u.api = { ...uni.$u.api } || {};

components/Plugin/Plugin.vue

@@ -1,5 +1,7 @@
 <template>
-  <view class="u-font-14 rounded-md bg-white" style="height: 100%" @click="setStorage">
+  <view class="u-font-14 rounded-md bg-white relative" style="height: 100%" @click="setStorage">
+    <u-badge :is-dot="true" :offset="[0, 0]" v-show="pluginInfo.remindNum > 0"></u-badge>
+
     <!-- <plugin-default /> -->
     <!-- <component :task="task" :is="pluginComponent"></component> -->
     <p-task-title :task="task" v-if="pluginId === '1'" class="p-2" />

components/PrettyExchange/PrettyExchange.vue

@@ -128,7 +128,8 @@
   import dayjs from 'dayjs';
 
   const store = useStore();
-  const projects = computed(() => store.state.project.projects);
+  const projects = computed(() => store.state.project.projects);
+  const remindData = computed(() => store.state.socket.remindData);
   const data = reactive({
     // itemTop: 0,
     // itemLeft: 0,
@@ -159,13 +160,25 @@
   const emit = defineEmits(['changeHeight', 'change']);
 
   // 监听项目列表
-  watch(projects, (val) => {
+  watch([projects, remindData], () => {
-    data.itemList = val;
+    if (projects.value) {
-    data.itemList.forEach(item => {
+      data.itemList = projects.value;
-      item.showBorder = false; // 一级项目底部边框是否显示
+      data.itemList.forEach(item => {
-      item.showSubBorder = false; // 一级项目底部边框是否显示
+        item.showBorder = false; // 一级项目底部边框是否显示
-      item.showTopBorder = false; // 一级项目顶部边框是否显示
+        item.showSubBorder = false; // 一级项目底部边框是否显示
-    });
+        item.showTopBorder = false; // 一级项目顶部边框是否显示
+        item.remindNum = 0;
+
+        if (remindData.value) {
+          remindData.value.forEach(remind => {
+            const remind_data = JSON.parse(remind.data);
+            if (remind_data.data.projectId === item.id) {
+              item.remindNum++;
+            }
+          })
+        }
+      });
+    }
   })
 
   onMounted(() => {

components/Projects/ProjectItem.vue

@@ -19,6 +19,8 @@
       </view>
 
       <view class="workbench-btn" v-if="index === 0" @click="toWorkbench">工作台</view>
+    
+      <view class="remind-box bg-red-500 text-white text-xs" v-if="item.remindNum">{{ item.remindNum > 99 ? '99+' : item.remindNum }}</view>
 
       <!-- 箭头 -->
       <view v-if="item.sonProjectList && item.sonProjectList.length">
@@ -156,4 +158,14 @@ function openMenu(project) {
   color: #FFFFFF;
   text-align: center;
 }
+
+.remind-box {
+  padding: 0 3px;
+  min-width: 16px;
+  height: 16px;
+  text-align: center;
+  line-height: 16px;
+  border-radius: 8px;
+  font-weight: 100;
+}
 </style>

components/Roles/Roles.vue

@@ -16,10 +16,13 @@
             }"
             :key="index"
             @click="changeRole(item.id, index)"
-            class="tab-item"
+            class="tab-item relative"
             v-for="(item, index) in data.roles"
           >
-            <view class="tab-children u-skeleton-fillet u-font-14">{{ item.name }}</view>
+            <view class="tab-children relative u-skeleton-fillet u-font-14">
+              {{ item.name }}
+            </view>
+            <view class="remind-box absolute bg-red-500 text-white text-xs" v-if="item.remindNum">{{ item.remindNum > 99 ? '99+' : item.remindNum }}</view>
           </view>
         </view>
       </scroll-view>
@@ -32,6 +35,7 @@
 <script setup>
 import { reactive, computed, watchEffect, onMounted, nextTick } from 'vue';
 import { useStore } from 'vuex';
+import useGetTasks from '@/hooks/project/useGetTasks';
 
 const data = reactive({
   tabIndex: 0, // 当前访问的 index 默认为0
@@ -40,14 +44,32 @@ const data = reactive({
   loading: false, // 是否显示骨架屏组件
   roles: [{ id: 1, name: '项目经理', mine: 0, pm: 1, sequence: 1 }, { id: 2, name: '运维', mine: 0, pm: 0, sequence: 2 }],
   roleLeft: 0,
+  clickNum: 0,
+  firstClickTime: 0,
+  secClickTime: 0
 });
 
 const store = useStore();
+const getTasksHook = useGetTasks();
 const visibleRoles = computed(() => store.state.role.visibleRoles);
 const roleId = computed(() => store.state.role.roleId);
 const tasks = computed(() => store.state.task.tasks);
+const remindData = computed(() => store.state.socket.remindData); // 小红点
+const currLocationTaskId = computed(() => store.state.socket.currLocationTaskId); // 前需要定位到的任务id
 
 watchEffect(() => {
+  if (remindData.value && visibleRoles.value) {
+    visibleRoles.value.forEach(role => {
+      role.remindNum = 0;
+      remindData.value.forEach(remind => {
+        const remind_data = JSON.parse(remind.data);
+        if (remind_data.data.roleId === role.id) {
+          role.remindNum++;
+        }
+      })
+    })
+  }
+
   if (visibleRoles.value && visibleRoles.value.length) {
     data.roles = visibleRoles.value;
     data.loading = false;
@@ -112,12 +134,6 @@ function setCurrentRole(index) {
 // 清除插件script
 function clearPluginScript() {
   try {
-    // const query = uni.createSelectorQuery().select(`script[data-type=plugin]`).fields({
-    //   id: true,
-    //   dataset: true,
-    //   context: true
-    // });
-    
     const scripts = document.querySelectorAll('script[data-type=plugin]');
     for (let i = 0; i < scripts.length; i++) {
       document.body.removeChild(scripts[i]);
@@ -132,14 +148,70 @@ function clearPluginScript() {
 // 时间基准点不用管 project监听了roleId 里处理了
 function changeRole(id, index) {
   try {
-    // 清除多余的script
+    data.clickNum = data.clickNum === 0 ? 1 : data.clickNum + 1;
-    clearPluginScript();
+
-    nextTick(() => {
+    if (data.clickNum === 1) {
-      store.commit('role/setRoleId', id);
+      data.firstClickTime = new Date().getTime();
-      store.commit('role/setRoleIndex', index);
+
-      // 改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
+      // 清除多余的script
-      setCurrentRole(index);
+      clearPluginScript();
-    });
+      nextTick(() => {
+        store.commit('role/setRoleId', id);
+        store.commit('role/setRoleIndex', index);
+        // 改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
+        setCurrentRole(index);
+      });
+
+      setTimeout(() => {
+        data.clickNum = data.firstClickTime = data.secClickTime = 0;
+      }, 500)
+    } else if (data.clickNum === 2) {
+      data.secClickTime = new Date().getTime();
+
+      if (data.secClickTime - data.firstClickTime < 500) {
+        let arr = [];
+        remindData.value.forEach(item => {
+          const remind_data = JSON.parse(item.data);
+          if (remind_data.data.taskType === 1) {
+            arr.push(item);
+          }
+        });
+
+        if (arr.length > 0) {
+          let nextLocationTaskId = '';
+
+          for (let i = 0; i < arr.length; i++) {
+            const first_option = JSON.parse(arr[0].data);
+            const curr_option = JSON.parse(arr[i].data);
+
+            if (!currLocationTaskId.value) {
+              nextLocationTaskId = first_option.data.taskId;
+              break;
+            }
+
+            if (curr_option.data.taskId === currLocationTaskId.value) {
+              if (i === arr.length - 1) {
+                nextLocationTaskId = first_option.data.taskId;
+              } else {
+                const next_option = JSON.parse(arr[i+1].data);
+                nextLocationTaskId = next_option.data.taskId;
+              }
+            }
+          }
+
+          store.commit('socket/setCurrLocationTaskId', nextLocationTaskId);
+          store.commit('task/clearTasks'); // 清空定期任务
+          store.commit('task/clearRealTasks'); // 清空真实任务数据
+          store.commit('task/setUpNextPage', 1);
+          store.commit('task/setDownNextPage', 1);
+          // store.commit('task/setTimeLineType', timeLineType.value === 1 ? 2 : 1);
+          let params = { pageNum: 1, taskId: nextLocationTaskId };
+          getTasksHook.getTasks(params);
+        }
+      }
+
+      data.clickNum = data.firstClickTime = data.secClickTime = 0;
+    }
   } catch (error) {
     console.error('role.vue changeRole error: ', error);
   }
@@ -216,6 +288,19 @@ function changeRole(id, index) {
   }
 }
 
+.remind-box {
+  top: 0;
+  right: -5px;
+  padding: 0 3px;
+  min-width: 16px;
+  height: 16px;
+  text-align: center;
+  line-height: 16px;
+  border-radius: 8px;
+  font-weight: 100;
+  transform: scale(0.8);
+}
+
 // // 删除 底部滚动条
 /* #ifndef APP-NVUE */
 ::-webkit-scrollbar,

components/TimeLine/component/TimeBox.vue

@@ -6,8 +6,11 @@
         <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 class="relative">
-            <view v-else>{{ $moment(+task.planStart).format('D日') }}</view>
+              <view v-if="task.process !== 4">{{ $moment(+task.planStart).format(startTimeFormat) }}</view>
+              <view v-else>{{ $moment(+task.planStart).format('D日') }}</view>
+              <u-badge :is-dot="true" style="transform: translate3d(2em, -1em, 0)" v-show="task.remindNum > 0"></u-badge>
+            </view>
 
             <!-- 任务功能菜单 -->
             <TaskTools v-if="task.process !== 4" :task="task" />

hooks/project/useGetTasks.js

@@ -2,6 +2,7 @@ import { computed, nextTick, watch } from 'vue';
 import { useStore } from 'vuex';
 import { flatten } from 'lodash';
 import dayjs from 'dayjs';
+
 export default function useGetTasks() {
   const store = useStore();
   const tasks = computed(() => store.state.task.tasks);
@@ -21,6 +22,8 @@ export default function useGetTasks() {
   const projectId = computed(() => store.getters['project/projectId']);
   const timeGranularity = computed(() => store.getters['task/timeGranularity']);
 
+  const remindData = computed(() => store.state.socket.remindData); // 小红点
+
   // 初始化 定期任务
   async function initPlanTasks() {
     await getTasks({}); // 获取初始数据
@@ -36,7 +39,8 @@ export default function useGetTasks() {
       timeUnit: query.timeUnit || timeUnit.value,
       queryType: query.queryType === 0 ? 0 : 1,
       pageNum: query.pageNum || 1,
-      pageSize: query.pageSize || uni.$taskConfig.pageCount
+      pageSize: query.pageSize || uni.$taskConfig.pageCount,
+      taskId: query.taskId || ''
     };
   }
 
@@ -64,6 +68,10 @@ export default function useGetTasks() {
         params.queryType === 0 ? store.commit('task/setUpRealTasks', data.list) : store.commit('task/setDownRealTasks', data.list);
         params.queryType === 0 ? store.commit('task/setUpNextPage', data.nextPage) : store.commit('task/setDownNextPage', data.nextPage); // 下一页
 
+        const index = visibleRoles.value.findIndex(role => role.id === roleId.value);
+        const arr = [...allTasks.value];
+        arr[index].realTasks = [...realTasks.value];
+        store.commit('task/setAllTasks', arr);
         // 数据处理
         dataRender(params);
       }
@@ -74,6 +82,7 @@ export default function useGetTasks() {
     timeLineType.value === 1 ? renderScaleTask(params) : renderConTask(params);
   }
 
+  // 任务模式
   async function renderConTask(params) {
     let nextPage = params.queryType === 0 ? upNextPage.value : downNextPage.value; // 下一页的值
     let showTasks = tasks.value;
@@ -92,7 +101,7 @@ export default function useGetTasks() {
     if (showTasks.length < 15 && nextPage === 0 && params.queryType === 1) {
       getTasks({pageNum: 1, queryType: 0});
     }
-    
+
     if (showTasks.length > 80) {
       showTasks = params.queryType === 0 ? showTasks.slice(0, 80) : showTasks.slice(showTasks.length - 80);
     }
@@ -103,9 +112,21 @@ export default function useGetTasks() {
 
   // 刻度模式数据处理
   async function renderScaleTask(params) {
-    params.queryType === 0 ? setPrevPlaceholderTasks() : setNextPlaceholderTasks();
+    params.queryType === 0 ? setPrevPlaceholderTasks(params) : setNextPlaceholderTasks(params);
+
+    const index = visibleRoles.value.findIndex(role => role.id === roleId.value);
+    let currRoleRealTasks = [];
+    if (allTasks.value[index].realTasks) {
+      currRoleRealTasks = allTasks.value[index].realTasks;
+    }
+
+    let currRoleShowTasks = [];
+    if (allTasks.value[index].tasks) {
+      currRoleShowTasks = allTasks.value[index].tasks;
+    }
+
     let centerData = await showTaskId(params, tasks.value, realTasks.value) || [];
-    tasksData(params, centerData, realTasks.value);
+    tasksData(params, centerData, currRoleRealTasks);
   }
 
   // 已显示的任务第一个id和最后一个id
@@ -237,7 +258,7 @@ export default function useGetTasks() {
   }
 
   // 设置时间轴向下的空数据
-  function setNextPlaceholderTasks() {
+  function setNextPlaceholderTasks(params) {
     // store.commit('task/setBottomEnd', true);
     let startTime = '';
     if (!tasks.value || !tasks.value.length) {
@@ -245,6 +266,15 @@ export default function useGetTasks() {
     } else {
       startTime = dayjs(+tasks.value[tasks.value.length - 1].planStart).add(1, timeGranularity.value).valueOf();
     }
+
+    if (params.taskId) {
+      realTasks.value.forEach(item => {
+        if (item.id === params.taskId) {
+          startTime = Number(item.planStart);
+        }
+      })
+    }
+
     const initData = uni.$task.setPlaceholderTasks(startTime, false, timeGranularity.value);
     store.commit('task/setCurrDownTimeNode', startTime);
     store.commit('task/setDownTasks', initData);
@@ -255,7 +285,6 @@ export default function useGetTasks() {
    * 将新获取到的日常任务放在allTasks里
    */
   watch(tasks, newValue => {
-    // console.log('newValue----->tasks: ', tasks.value);
     // 添加到allTasks里
     const index = visibleRoles.value.findIndex(role => role.id === roleId.value);
     const arr = [...allTasks.value];

hooks/project/useInit.js

@@ -6,6 +6,7 @@ export default function useInit() {
   const store = useStore();
   const token = computed(() => store.state.user.token);
   const allTasks = computed(() => store.state.task.allTasks);
+  const remindData = computed(() => store.state.socket.remindData);
 
   onLoad(options => {
     store.commit('setDomain', decodeURIComponent(options.url));
@@ -94,7 +95,7 @@ export default function useInit() {
       // 根据项目id获取角色列表
       getRoles(params);
       // 根据项目id获取成员列表
-      // store.dispatch('role/getAllMembers', { projectId: options.p });
+      store.dispatch('role/getAllMembers', { projectId: options.p });
     }
   }
 

pages/index/index.vue

@@ -33,7 +33,6 @@
       <text v-if="!userInfo || !userInfo.id">游客</text>
       <image v-else src="../../static/headimg4.png" mode=""></image>
     </view>
-    <!-- <u-button class="mt-4" @click="toLogin">登录</u-button> -->
 
     <!-- 项目列表 -->
     <Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" />
@@ -44,7 +43,7 @@
 </template>
 
 <script setup>
-  import { reactive, computed, watchEffect, ref } from 'vue';
+  import { reactive, computed, watch, ref } from 'vue';
   import { useStore } from 'vuex';
   import dayjs from 'dayjs';
   import upApp from '../../uni_modules/uni-upgrade-center-app/utils/check-update.js';
@@ -57,6 +56,7 @@
   const firstOpenApp = computed(() => store.state.firstOpenApp); // 是否第一次打开APP false 是第一次 true不是
   const isOpenApp = computed(() => store.state.isOpenApp); // 是否打开APP true 是 false 不是
   const userInfo = computed(() => store.state.user.user);
+  const remindData = computed(() => store.state.socket.remindData); // 小红点
 
   const data = reactive({
     calendar: null,
@@ -71,15 +71,6 @@
   getProjects();
   // handleFindPoint();
 
-  // 监听token
-  watchEffect(() => {
-    // if (!token.value) return;
-    // if (token.value) {
-    //   getProjects();
-    //   handleFindPoint();
-    // }
-  });
-
   // 获取项目列表
   function getProjects(start = dayjs().startOf('day').valueOf(), end = dayjs().endOf('day').valueOf()) {
     uni.$catchReq.getProjects(start, end, (err, data) => {

pages/project/project.vue

@@ -57,6 +57,8 @@ const globals = computed(() => store.getters['task/globals']); // 所有的日
 const timeGranularity = computed(() => store.getters['task/timeGranularity']); // 计算颗粒度 对应的 dayjs add 的单位
 const height = ref(null); // 页面高度
 const timeLineType = computed(() => store.state.task.timeLineType); // 时间轴模式
+const remindData = computed(() => store.state.socket.remindData); // 时间轴模式
+const currLocationTaskId = computed(() => store.state.socket.currLocationTaskId); // 前需要定位到的任务id
 
 onMounted(() => {
   const system = uni.getSystemInfoSync();
@@ -70,6 +72,64 @@ if (!userInfo.value) {
   }
 }
 
+watch(remindData, () => {
+  if (allTasks.value.length > 0) {
+    allTasks.value.forEach(item => {
+      if (item.global) {
+        item.global.forEach(global => {
+          global.remindNum = 0;
+
+          global.plugins.forEach(pluginArr => {
+            pluginArr.forEach(plugin => {
+              plugin.remindNum = 0;
+              remindData.value.forEach(remind => {
+                const remind_data = JSON.parse(remind.data);
+
+                if (item.role.id === remind_data.data.roleId) {
+                  if (remind_data.data.taskId === global.id) {
+                    global.remindNum++;
+                  }
+
+                  if (remind_data.data.taskId === global.id && remind_data.data.pluginId === plugin.pluginTaskId) {
+                    plugin.remindNum++;
+                  }
+                }
+              })
+            })
+          })
+        })
+      }
+
+      if (item.task) {
+        item.task.forEach(task => {
+          task.remindNum = 0;
+
+          task.plugins.forEach(pluginArr => {
+            pluginArr.forEach(plugin => {
+              plugin.remindNum = 0;
+              remindData.value.forEach(remind => {
+                const remind_data = JSON.parse(remind.data);
+
+                if (item.role.id === remind_data.data.roleId) {
+                  if (remind_data.data.taskId === task.id) {
+                    task.remindNum++;
+                  }
+
+                  if (remind_data.data.taskId === task.id && remind_data.data.pluginId === plugin.pluginTaskId) {
+                    plugin.remindNum++;
+                  }
+                }
+              })
+            })
+          })
+        })
+      }
+    })
+  }
+
+  store.commit('task/setAllTasks', allTasks.value);
+});
+
 /**
  * 当角色发生变化时
  * 重新查询永久日常任务和普通日常任务
@@ -120,7 +180,6 @@ watch(timeNode, newValue => {
  * 永久日常任务不发生改变
  */
 watch(newProjectInfo, newValue => {
-  // console.log('当收到打开新项目消息状态时');
   if (newValue && newValue.value.projectId && newValue.value.url) {
     uni.$u.route('/', {
       u: userId.value,
@@ -154,11 +213,6 @@ function getGlobalData() {
     };
     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);
 }
 
 // 获取日常任务
@@ -179,6 +233,9 @@ function clearTasksData() {
   store.commit('task/setDailyTasks', []);
   // 清空定期任务数据
   store.commit('task/clearTasks');
+  store.commit('task/clearRealTasks'); // 清空真实任务数据
+  store.commit('task/setUpNextPage', 1);
+  store.commit('task/setDownNextPage', 1);
   // 到顶的标志复位
   // 到底的标志复位
   store.commit('task/clearEndFlag');
@@ -221,14 +278,13 @@ function setScrollPosition() {
   }
 }
 
-
 function changeModal() {
   store.commit('task/clearTasks'); // 清空定期任务
   store.commit('task/clearRealTasks'); // 清空真实任务数据
   store.commit('task/setUpNextPage', 1);
   store.commit('task/setDownNextPage', 1);
   store.commit('task/setTimeLineType', timeLineType.value === 1 ? 2 : 1);
-  let params = { pageNum: 1 };
+  let params = { pageNum: 1, taskId: currLocationTaskId.value };
   getTasksHook.getTasks(params);
 }
 </script>

plugins/p-deliver-check/check-form-modal.vue

@@ -38,6 +38,7 @@ import { quickWords } from '@/config/deliver';
 
 const props = defineProps({
   data: { type: Object, default: {} },
+  msgId: { default: '', type: String }
 });
 const emits = defineEmits(['hide', 'submit-end']);
 const store = useStore();
@@ -62,6 +63,7 @@ async function handleSubmit(mode) {
       type: mode === 'RESOLVE' ? 1 : 2,
       remark: commit.value,
       score: mode === 'RESOLVE' ? score.value : '',
+      msgId: props.msgId
     };
     await uni.$u.api.checkDeliver(param);
     handleHide(); // 隐藏 + 重置

plugins/p-deliver-check/p-deliver-check.vue

@@ -81,7 +81,7 @@
       </view>
     </view>
 
-    <checkFormModal :data="checkModal" @hide="checkModal.mode = 'HIDE'" @submit-end="$emit('check-success')" />
+    <checkFormModal :data="checkModal" :msgId="props.msgId" @hide="checkModal.mode = 'HIDE'" @submit-end="$emit('check-success')" />
   </view>
 </template>
 
@@ -90,6 +90,10 @@ import { ref, reactive, inject, computed } from 'vue';
 import dayjs from 'dayjs';
 import checkFormModal from './check-form-modal.vue';
 
+const props = defineProps({
+  msgId: { default: '', type: String }
+});
+
 const deliverData = inject('deliver');
 defineEmits(['check-success']);
 const collapsed = ref(false);

plugins/p-deliver-upload/p-deliver-upload.vue

@@ -82,11 +82,14 @@ import { useStore } from 'vuex';
 import { UPLOAD_URL } from '@/config/index';
 import { UPLOAD_EXTENSION } from '@/config/deliver';
 
+const props = defineProps({
+  msgId: { default: '', type: String }
+});
+
 const deliver = inject('deliver');
 const task = inject('task');
 const store = useStore();
 const emits = defineEmits(['upload-success', 'edit-success']);
-
 const reviewerRef = ref(null);
 const submitBtnLoading = ref(false);
 const linkValue = ref(''); // 链接的值
@@ -130,11 +133,13 @@ async function submit() {
     checkedCheckers.forEach(item => {
       checkerList.push(item.memberId);
     });
+
     const param = {
       projectId: projectId.value,
       deliverId: deliver.value.deliverId,
       fileList: [linkValue.value],
       checkerList,
+      msgId: props.msgId
     };
     await uni.$u.api.submitDeliverInfo(param);
     uni.$ui.showToast('提交交付物信息成功');

plugins/p-deliver/p-deliver.vue

@@ -4,6 +4,7 @@
     <!-- TODO: 2022年春节为了演示所有人都能看到交付物插件 -->
    <p-deliver-upload
       v-if="deliver"
+      :msgId="msgId"
       @upload-success="getDeliverData"
       class="p-2"
       @edit-success="getDeliverData"
@@ -11,6 +12,7 @@
 
    <p-deliver-check
       v-if="deliver && deliver.details && deliver.details.length"
+      :msgId="msgId"
       @check-success="getDeliverData"
       class="p-2"
     ></p-deliver-check>
@@ -26,9 +28,20 @@ const task = inject('task');
 const pluginInfo = inject('pluginInfo');
 const deliver = ref(null); // 服务端返回的交付物信息
 const isMine = computed(() => store.getters['role/isMine']); // 是不是我的任务
+const remindData = computed(() => store.state.socket.remindData); // 小红点
 
 deliver.value = pluginInfo && pluginInfo.data ? JSON.parse(pluginInfo.data) : null;
 provide('deliver', deliver);
+
+let msgId = ref(null);
+remindData.value.forEach(remind => {
+  const remind_data = JSON.parse(remind.data);
+
+  if (remind_data.data.taskId === task.id) {
+    msgId = remind.id;
+  }
+})
+
 // 根据任务id获取交付物信息
 async function getDeliverData() {
   try {

store/socket/actions.js

@@ -9,7 +9,8 @@ const actions = {
 	initSocket({ commit, dispatch, state }) {
 		if (state.lockSocket) return;
 		// const { token } = rootState.user;
-		// if (!token) return;
+		// if (!token) return;
+
 		commit('setLockSocket', true);
 		commit('setSocket', uni.connectSocket({ url: Config.msgUrl, complete: () => {} }));
     // dispatch('auth');
@@ -41,7 +42,7 @@ const actions = {
 	},
 
 	// 监听收到的ws消息
-	onSocketMessage({ dispatch, state }) {
+	onSocketMessage({ commit, dispatch, state }) {
 		state.socket.onMessage(res => {
 			if (!res || !res.data || !JSON.parse(res.data)) return;
 			const resData = JSON.parse(res.data);
@@ -56,21 +57,48 @@ const actions = {
 	 * 处理收到的消息内容
 	 * @param {object} item 单个消息体对象
 	 */
-	handleMessagesData({ dispatch, commit }, item) {
+	handleMessagesData({ dispatch, commit, state }, item) {
 		const data = JSON.parse(item.data);
 		switch (data.type) {
-			case 'Sync': // 开始某个节点
+			case 'ChannelStatus': // 认证
-				commit('messages/messagesAdd', { message: data, type: 'syncMessages' }, { root: true });
-				break;
-			case 'taskStatus': // 任务状态修改相关消息
-				commit('task/setTaskStatus', data.data, { root: true });
-				break;
-				// case 'Deliver': // 交付物相关消息
-				//   commit('messages/messagesAdd', { type: 'checkMessages', message: data }, { root: true });
-				//   break;
-			case 'ChannelStatus':
 				dispatch('handleAuthMessage', data);
-				break;
+				break;
+      case 'Notification': // 系统通知
+      	commit('setNotificationData', item);
+      	break;
+      case 'Ring': // ring
+      	commit('setRingData', item);
+      	break;
+      case 'Remind': // 小红点
+      	commit('setRemindData', item);
+      	break;
+      case 'Success': // 小红点
+        let arr = [];
+      	if (data.event === 'Notification') {
+          arr = state.notificationData;
+        } else if (data.event === 'Ring') {
+          arr = state.ringData;
+        } else if (data.event === 'Remind') {
+          arr = state.remindData;
+        }
+
+        let del_index = -1;
+        arr.forEach((item, index) => {
+          if (item.id === data.data.msgId) {
+            del_index = index;
+          }
+        })
+
+        arr.splice(notification_index, 1);
+
+        if (data.event === 'Notification') {
+          commit('uploadNotificationData', arr);
+        } else if (data.event === 'Ring') {
+          commit('uploadRingData', arr);
+        } else if (data.event === 'Remind') {
+          commit('uploadRemindData', arr);
+        }
+      	break;
 			default:
 				break;
 		}

store/socket/mutations.js

@@ -20,7 +20,110 @@ const mutations = {
 	 */
 	setLockSocket(state, lockSocket) {
 		state.lockSocket = lockSocket;
-	},
+	},
+
+  /**
+   * 设置系统通知消息数据
+   * @param {Object} state
+   * @param {Object} data
+   */
+  setNotificationData(state, data) {
+    let flag = false;
+    state.notificationData.forEach(item => {
+      if (item.id === data.id) {
+        flag = true;
+      }
+
+      if (item.data === data.data) {
+        item.data = data.data;
+      }
+    })
+
+    if (!flag) {
+      state.notificationData.push(data);
+    }
+  },
+
+  /**
+   * 设置ring消息
+   * @param {Object} state
+   * @param {Object} data
+   */
+  setRingData(state, data) {
+    let flag = false;
+    state.ringData.forEach(item => {
+      if (item.id === data.id) {
+        flag = true;
+      }
+
+      if (item.data === data.data) {
+        item.data = data.data;
+      }
+    })
+
+    if (!flag) {
+      state.ringData.push(data);
+    }
+  },
+
+  /**
+   * 设置小红点
+   * @param {Object} state
+   * @param {Object} data
+   */
+  setRemindData(state, data) {
+    let flag = false;
+    state.remindData.forEach(item => {
+      if (item.id === data.id) {
+        flag = true;
+      }
+
+      if (item.data === data.data) {
+        flag = true;
+        item.data = data.data;
+      }
+    })
+
+    if (!flag) {
+      state.remindData.push(data);
+    }
+  },
+
+  /**
+   * 设置系统通知消息数据
+   * @param {Object} state
+   * @param {Object} data
+   */
+  uploadNotificationData(state, data) {
+    state.notificationData = data;
+  },
+
+  /**
+   * 设置ring消息
+   * @param {Object} state
+   * @param {Object} data
+   */
+  uploadRingData(state, data) {
+    state.ringData = data;
+  },
+
+  /**
+   * 设置小红点
+   * @param {Object} state
+   * @param {Object} data
+   */
+  uploadRemindData(state, data) {
+    state.remindData = data;
+  },
+
+  /**
+   * 当前需要定位到的任务id
+   * @param {Object} state
+   * @param {Object} data
+   */
+  setCurrLocationTaskId(state, data) {
+    state.currLocationTaskId = data;
+  }
 };
 
 export default mutations;

store/socket/state.js

@@ -1,7 +1,40 @@
 const state = {
 	socket: null, // websocket实例
 	connected: false, // 是否处于连接状态
-	lockSocket: false, // 是否正在连接状态
+	lockSocket: false, // 是否正在连接状态
+  notificationData: [], // 系统通知消息
+  ringData: [],
+  remindData: [],
+  // remindData: [{
+  //   "id": "62132e19370c1e05f9a6ac3c",
+  //   "time": "1645424153",
+  //   "fromDomain": "Queue",
+  //   "from": "tall_message_1",
+  //   "data": "{\"type\": \"Remind\", \"data\": {\"projectId\":\"1496414578836512768\", \"roleId\":\"1496414579394355200\", \"taskId\":\"1496414580841390080\", \"pluginId\":\"1496414581055299584\"}}",
+  //   "authMessage": "null"
+  // }, {
+  //   "id": "62132e19370c1e05f9a6ac3c",
+  //   "time": "1645424153",
+  //   "fromDomain": "Queue",
+  //   "from": "tall_message_1",
+  //   "data": "{\"type\": \"Remind\", \"data\": {\"projectId\":\"1496414578836512768\", \"roleId\":\"1496414579482435584\", \"taskId\":\"1496414581852217344\", \"taskType\":0, \"pluginId\":\"1496414582036766720\"}}",
+  //   "authMessage": "null"
+  // }, {
+  //   "id": "62132e19370c1e05f9a6ac3c",
+  //   "time": "1645424153",
+  //   "fromDomain": "Queue",
+  //   "from": "tall_message_1",
+  //   "data": "{\"type\": \"Remind\", \"data\": {\"projectId\":\"1496414578836512768\", \"roleId\":\"1496414579482435584\", \"taskId\":\"1496414582330368068\", \"taskType\":1, \"pluginId\":\"1496414582934347776\"}}",
+  //   "authMessage": "null"
+  // }, {
+  //   "id": "62132e19370c1e05f9a6ac3c",
+  //   "time": "1645424153",
+  //   "fromDomain": "Queue",
+  //   "from": "tall_message_1",
+  //   "data": "{\"type\": \"Remind\", \"data\": {\"projectId\":\"1496414578836512768\", \"roleId\":\"1496414579482435584\", \"taskId\":\"1496414583173423178\", \"taskType\":1, \"pluginId\":\"1496414586478534656\"}}",
+  //   "authMessage": "null"
+  // }], // 小红点
+  currLocationTaskId: '', // 前需要定位到的任务id
 };
 
 export default state;

store/task/actions.js

@@ -21,7 +21,7 @@ const actions = {
    * @param {*} commit
    * @param {object} param 请求参数 roleId, timeNode, timeUnit
    */
-  getGlobal({ commit }, param) {
+  getGlobal({ commit, state }, param) {
     commit('setShowGlobalSkeleton', true);
     uni.$catchReq.getGlobal(param, (err, data) => {
       commit('setShowGlobalSkeleton', false);