feat: 修改全部置为已读功能不能同步修改卡片状态bug

src/components/NotificationMessageCard/src/NotificationMessageCard.vue

@@ -17,7 +17,6 @@ const props = withDefaults(
     updateReadCardsOnChange: true
   }
 )
-
 const pageData = ref<any[]>([])
 
 const emit = defineEmits<{ seeAll: []; hasCardRead: []; viewMore: []; jumpTracking: [] }>()
@@ -102,32 +101,57 @@ const compareIdsInArrays = (arr1, arr2) => {
   return true
 }
 
-if (props.isObserver) {
-  watch(
-    () => props.data,
-    (newData, oldData) => {
-      // 因为当父组件中数据已读未读状态变化时，也会触发props.data变化，此时不需要更新页面数据，根据id是否相等来判断这种情况
-      if (compareIdsInArrays(oldData || [], newData || [])) return
-
-      pageData.value = cloneDeep(newData)
-      // 先清除旧数据中的卡片监听
-      clearReadData(oldData)
-
-      // 请求接口将旧数据中的新已读卡片上传服务器
-      props.data.updateReadCardsOnChange && notificationMsgStore.markMessageAsRead()
-
-      // 重新监听新数据中的卡片
-      nextTick(() => {
-        watchCards()
-      })
-    },
-    {
-      immediate: true,
-      deep: true
+const initData = () => {
+  const watchOptions = { deep: true, immediate: true }
+
+  const handleDataChange = (newData, oldData) => {
+    // 如果id相等，则不需要更新页面数据
+    if (compareIdsInArrays(oldData || [], newData || [])) return
+
+    pageData.value = cloneDeep(newData)
+
+    // 清除旧数据中的卡片监听
+    clearReadData(oldData)
+
+    // 请求接口将旧数据中的新已读卡片上传服务器
+    if (props.data.updateReadCardsOnChange) {
+      notificationMsgStore.markMessageAsRead()
     }
-  )
+
+    // 重新监听新数据中的卡片
+    nextTick(() => {
+      watchCards()
+    })
+  }
+  if (props.isObserver) {
+    watch(
+      () => props.data,
+      (newData, oldData) => {
+        handleDataChange(newData, oldData)
+      },
+      watchOptions
+    )
+  } else {
+    watch(
+      () => props.data,
+      (newVal) => {
+        pageData.value = cloneDeep(newVal)
+      },
+      watchOptions
+    )
+  }
 }
+initData()
 
+// 将数据中的消息置为已读
+const setAllMessageRead = () => {
+  pageData.value.forEach((item) => {
+    item.info.isRead = true
+  })
+}
+defineExpose({
+  setAllMessageRead
+})
 // 定时将消息卡片未读的置为已读，五分钟一次
 let timer = null
 onMounted(() => {

src/views/Dashboard/src/components/PieChart.vue

@@ -82,7 +82,7 @@ const initOption: any = reactive({
         '</div>' +
         '<div style="color:#FFF;font-weight:700;font-size:12px">' +
         params.marker +
-        params.percent +
+        formatNumber(params.percent) +
         '% (' +
         formatNumber(params.value) +
         ')</div>'
@@ -116,7 +116,7 @@ const initOption: any = reactive({
       show: true,
       // formatter: '{d}%({c})',
       formatter: (params) => {
-        return `{name|${params.percent}%}\n {time|(${formatNumber(params.value)})}`
+        return `{name|${formatNumber(params.percent)}%}\n {time|(${formatNumber(params.value)})}`
       },
       alignTo: 'labelLine',
       rich: {

src/views/Layout/src/components/Header/components/NotificationDrawer.vue

@@ -43,7 +43,12 @@ const getNotificationList = () => {
 // 标记所有为已读
 const handleMarkAllRead = () => {
   try {
-    $api.setMessageRead({ read_type: true })
+    $api.setMessageRead({ read_type: true }).then((res) => {
+      if (res.code === 200) {
+        notificationMsgStore.hasUnreadMessages()
+        notificationMessageCardsRef.value.setAllMessageRead()
+      }
+    })
   } catch (error) {
     console.error(error)
   }
@@ -71,7 +76,7 @@ const closeDrawer = () => {
   notificationMsgStore.markMessageAsRead()
 }
 
-const notificationListRef = ref<HTMLElement | null>(null)
+const notificationMessageCardsRef = ref()
 </script>
 
 <template>
@@ -122,12 +127,13 @@ const notificationListRef = ref<HTMLElement | null>(null)
             </el-button>
           </div>
         </div>
-        <div class="notification-content" ref="notificationListRef">
+        <div class="notification-content">
           <NotificationMessageCard
             @see-all="drawerRef.handleClose()"
             @view-more="drawerRef.handleClose()"
             @jump-tracking="drawerRef.handleClose()"
             :data="notificationList"
+            ref="notificationMessageCardsRef"
           />
         </div>
       </el-scrollbar>

src/views/Layout/src/components/Header/components/TrainingCard.vue

@@ -10,10 +10,11 @@ const notificationMsgStore = useNotificationMessage()
 
 const notificationList = ref([])
 
+const curIndex = ref(0)
 const curCard = computed(() => {
   return notificationList.value[curIndex.value] || null
 })
-const curIndex = ref(0)
+
 // 设置定时器进行自动轮播
 let trainingIntervalId = null