chore: 优化数据分析loading状态

src/modules/analyze/event/views/Index.vue

 <script setup>
+import { ElMessage } from 'element-plus'
 import ChartCard from '@/components/ChartCard.vue'
 import { DataLine } from '@element-plus/icons-vue'
 import { useUser } from '@/composables/useAllData'
@@ -8,7 +9,7 @@ import * as api from '../api'
 
 const { userValue, userList } = useUser()
 const { eventValues, eventList } = useEvent()
-const date = ref('')
+const date = ref([])
 
 const info = ref()
 async function fetchInfo() {
@@ -18,6 +19,14 @@ async function fetchInfo() {
 onMounted(fetchInfo)
 
 async function handleStart() {
+  if (!date.value.length) {
+    ElMessage.error('请选择时间区间')
+    return
+  }
+  if (!eventValues.value.length) {
+    ElMessage.error('请选择事件')
+    return
+  }
   fetchEventAction()
   fetchEventActionTrend()
   fetchEventMember()
@@ -38,9 +47,12 @@ const eventAction = ref([])
 async function fetchEventAction() {
   if (!userValue.value) return
   loading1.value = true
-  const res = await api.getEventActionList(params.value)
-  eventAction.value = res.data.items
-  loading1.value = false
+  try {
+    const res = await api.getEventActionList(params.value)
+    eventAction.value = res.data.items
+  } finally {
+    loading1.value = false
+  }
 }
 const eventActionOption = computed(() => {
   if (!eventAction.value.length) return
@@ -68,9 +80,12 @@ const eventActionTrend = ref([])
 async function fetchEventActionTrend() {
   if (!userValue.value) return
   loading2.value = true
-  const res = await api.getEventActionTrendList(params.value)
-  eventActionTrend.value = res.data.items
-  loading2.value = false
+  try {
+    const res = await api.getEventActionTrendList(params.value)
+    eventActionTrend.value = res.data.items
+  } finally {
+    loading2.value = false
+  }
 }
 const eventActionTrendOption = computed(() => {
   if (!eventActionTrend.value.length) return
@@ -107,9 +122,12 @@ const eventMember = ref([])
 async function fetchEventMember() {
   if (!userValue.value) return
   loading3.value = true
-  const res = await api.getEventMemberList(params.value)
-  eventMember.value = res.data.items
-  loading3.value = false
+  try {
+    const res = await api.getEventMemberList(params.value)
+    eventMember.value = res.data.items
+  } finally {
+    loading3.value = false
+  }
 }
 const eventMemberOption = computed(() => {
   if (!eventMember.value.length) return
@@ -142,9 +160,12 @@ const eventTime = ref([])
 async function fetchEventTime() {
   if (!userValue.value) return
   loading4.value = true
-  const res = await api.getEventTimeList(params.value)
-  eventTime.value = res.data.items
-  loading4.value = false
+  try {
+    const res = await api.getEventTimeList(params.value)
+    eventTime.value = res.data.items
+  } finally {
+    loading4.value = false
+  }
 }
 const eventTimeOption = computed(() => {
   if (!eventTime.value.length) return

src/modules/analyze/label/views/Index.vue

@@ -34,9 +34,12 @@ const labelHot = ref([])
 async function fetchLabelHot() {
   if (!userValue.value) return
   loading1.value = true
-  const res = await api.getHotTags({ sso_id: userValue.value })
-  labelHot.value = res.data.items
-  loading1.value = false
+  try {
+    const res = await api.getHotTags({ sso_id: userValue.value })
+    labelHot.value = res.data.items
+  } finally {
+    loading1.value = false
+  }
 }
 const labelHotOption = computed(() => {
   if (!labelHot.value.length) return
@@ -79,9 +82,12 @@ const labelTop = ref([])
 async function fetchLabelTop() {
   if (!userValue.value) return
   loading2.value = true
-  const res = await api.getTagTop({ sso_id: userValue.value })
-  labelTop.value = res.data.items
-  loading2.value = false
+  try {
+    const res = await api.getTagTop({ sso_id: userValue.value })
+    labelTop.value = res.data.items
+  } finally {
+    loading2.value = false
+  }
 }
 const labelTopOption = computed(() => {
   if (!labelTop.value.length) return
@@ -115,9 +121,12 @@ const labelMemberTop = ref([])
 async function fetchLabelMemberTop() {
   if (!userValue.value) return
   loading3.value = true
-  const res = await api.getMemberTagTop({ sso_id: userValue.value })
-  labelMemberTop.value = res.data.items
-  loading3.value = false
+  try {
+    const res = await api.getMemberTagTop({ sso_id: userValue.value })
+    labelMemberTop.value = res.data.items
+  } finally {
+    loading3.value = false
+  }
 }
 const labelMemberTopOption = computed(() => {
   if (!labelMemberTop.value.length) return
@@ -149,9 +158,12 @@ const groupHot = ref([])
 async function fetchGroupHot() {
   if (!userValue.value) return
   loading4.value = true
-  const res = await api.getHotGroups({ sso_id: userValue.value })
-  groupHot.value = res.data.items
-  loading4.value = false
+  try {
+    const res = await api.getHotGroups({ sso_id: userValue.value })
+    groupHot.value = res.data.items
+  } finally {
+    loading4.value = false
+  }
 }
 const groupHotOption = computed(() => {
   if (!groupHot.value.length) return
@@ -231,9 +243,12 @@ const groupMemberTop = ref([])
 async function fetchGroupMemberTop() {
   if (!userValue.value) return
   loading6.value = true
-  const res = await api.getMemberGroupTop({ sso_id: userValue.value })
-  groupMemberTop.value = res.data.items
-  loading6.value = false
+  try {
+    const res = await api.getMemberGroupTop({ sso_id: userValue.value })
+    groupMemberTop.value = res.data.items
+  } finally {
+    loading6.value = false
+  }
 }
 const groupMemberTopOption = computed(() => {
   if (!groupMemberTop.value.length) return

src/modules/analyze/marketing/views/Index.vue

@@ -38,9 +38,12 @@ async function fetchEventAction() {
   const [startDate, endDate] = eventActionDate.value
   if (!userValue.value || !eventValue.value || !startDate || !endDate) return
   loading1.value = true
-  const res = await api.getEventAction({ sso_id: userValue.value, start_date: startDate, end_date: endDate, event_id: eventValue.value })
-  eventAction.value = res.data
-  loading1.value = false
+  try {
+    const res = await api.getEventAction({ sso_id: userValue.value, start_date: startDate, end_date: endDate, event_id: eventValue.value })
+    eventAction.value = res.data
+  } finally {
+    loading1.value = false
+  }
 }
 const eventActionOption = computed(() => {
   if (!eventAction.value) return
@@ -87,9 +90,12 @@ async function fetchMarketing() {
   const [startDate, endDate] = marketingDate.value
   if (!userValue.value || !startDate || !endDate) return
   loading2.value = true
-  const res = await api.getEventMarketing({ sso_id: userValue.value, start_date: startDate, end_date: endDate })
-  marketing.value = res.data.items
-  loading2.value = false
+  try {
+    const res = await api.getEventMarketing({ sso_id: userValue.value, start_date: startDate, end_date: endDate })
+    marketing.value = res.data.items
+  } finally {
+    loading2.value = false
+  }
 }
 const marketingOption = computed(() => {
   return marketing.value.map((item, index, items) => {
@@ -116,9 +122,12 @@ const userEndDate = computed(() => {
 async function fetchUser() {
   if (!userValue.value || !userStartDate.value || !userEndDate.value) return
   loading3.value = true
-  const res = await api.getMemberList({ sso_id: userValue.value, start_date: userStartDate.value, end_date: userEndDate.value })
-  user.value = res.data.items
-  loading3.value = false
+  try {
+    const res = await api.getMemberList({ sso_id: userValue.value, start_date: userStartDate.value, end_date: userEndDate.value })
+    user.value = res.data.items
+  } finally {
+    loading3.value = false
+  }
 }
 
 function format(date) {

src/modules/analyze/user/components/UserChart.vue

@@ -12,11 +12,14 @@ const attrs = ref([])
 async function fetchAttrs() {
   if (!props.ssoId || !metaAttrValue.value) return
   loading.value = true
-  const res = await getMemberAttrs({ sso_id: props.ssoId, member_meta_id: metaAttrValue.value })
-  attrs.value = res.data.items.map(item => {
-    return { name: item.group_name, value: item.total }
-  })
-  loading.value = false
+  try {
+    const res = await getMemberAttrs({ sso_id: props.ssoId, member_meta_id: metaAttrValue.value })
+    attrs.value = res.data.items.map(item => {
+      return { name: item.group_name, value: item.total }
+    })
+  } finally {
+    loading.value = false
+  }
 }
 watchEffect(() => {
   fetchAttrs()

src/modules/analyze/user/views/Index.vue

@@ -39,10 +39,13 @@ const userTotal = ref(0)
 async function fetchGender() {
   if (!userValue.value) return
   loading1.value = true
-  const res = await api.getMemberGender({ sso_id: userValue.value })
-  gender.value = res.data.items
-  userTotal.value = res.data.total
-  loading1.value = false
+  try {
+    const res = await api.getMemberGender({ sso_id: userValue.value })
+    gender.value = res.data.items
+    userTotal.value = res.data.total
+  } finally {
+    loading1.value = false
+  }
 }
 const genderOption = computed(() => {
   if (!gender.value.length) return
@@ -96,11 +99,14 @@ const connection = ref([])
 async function fetchConnections() {
   if (!userValue.value) return
   loading2.value = true
-  const res = await api.getMemberConnections({ sso_id: userValue.value })
-  connection.value = res.data.items.map(item => {
-    return { ...item, group_name: getNameByValue(item.group_name, connectionTypeList) }
-  })
-  loading2.value = false
+  try {
+    const res = await api.getMemberConnections({ sso_id: userValue.value })
+    connection.value = res.data.items.map(item => {
+      return { ...item, group_name: getNameByValue(item.group_name, connectionTypeList) }
+    })
+  } finally {
+    loading2.value = false
+  }
 }
 const connectionOption = computed(() => {
   if (!connection.value.length) return
@@ -134,11 +140,14 @@ const status = ref([])
 async function fetchStatus() {
   if (!userValue.value) return
   loading3.value = true
-  const res = await api.getMemberStatus({ sso_id: userValue.value })
-  status.value = res.data.items.map(item => {
-    return { name: getNameByValue(item.group_name, statusList), value: item.total }
-  })
-  loading3.value = false
+  try {
+    const res = await api.getMemberStatus({ sso_id: userValue.value })
+    status.value = res.data.items.map(item => {
+      return { name: getNameByValue(item.group_name, statusList), value: item.total }
+    })
+  } finally {
+    loading3.value = false
+  }
 }
 const statusOption = computed(() => {
   if (!status.value.length) return