提交 80b218cd authored 作者: 王鹏飞's avatar 王鹏飞

chore: 优化数据分析loading状态

上级 91a846a2
<script setup> <script setup>
import { ElMessage } from 'element-plus'
import ChartCard from '@/components/ChartCard.vue' import ChartCard from '@/components/ChartCard.vue'
import { DataLine } from '@element-plus/icons-vue' import { DataLine } from '@element-plus/icons-vue'
import { useUser } from '@/composables/useAllData' import { useUser } from '@/composables/useAllData'
...@@ -8,7 +9,7 @@ import * as api from '../api' ...@@ -8,7 +9,7 @@ import * as api from '../api'
const { userValue, userList } = useUser() const { userValue, userList } = useUser()
const { eventValues, eventList } = useEvent() const { eventValues, eventList } = useEvent()
const date = ref('') const date = ref([])
const info = ref() const info = ref()
async function fetchInfo() { async function fetchInfo() {
...@@ -18,6 +19,14 @@ async function fetchInfo() { ...@@ -18,6 +19,14 @@ async function fetchInfo() {
onMounted(fetchInfo) onMounted(fetchInfo)
async function handleStart() { async function handleStart() {
if (!date.value.length) {
ElMessage.error('请选择时间区间')
return
}
if (!eventValues.value.length) {
ElMessage.error('请选择事件')
return
}
fetchEventAction() fetchEventAction()
fetchEventActionTrend() fetchEventActionTrend()
fetchEventMember() fetchEventMember()
...@@ -38,9 +47,12 @@ const eventAction = ref([]) ...@@ -38,9 +47,12 @@ const eventAction = ref([])
async function fetchEventAction() { async function fetchEventAction() {
if (!userValue.value) return if (!userValue.value) return
loading1.value = true loading1.value = true
const res = await api.getEventActionList(params.value) try {
eventAction.value = res.data.items const res = await api.getEventActionList(params.value)
loading1.value = false eventAction.value = res.data.items
} finally {
loading1.value = false
}
} }
const eventActionOption = computed(() => { const eventActionOption = computed(() => {
if (!eventAction.value.length) return if (!eventAction.value.length) return
...@@ -68,9 +80,12 @@ const eventActionTrend = ref([]) ...@@ -68,9 +80,12 @@ const eventActionTrend = ref([])
async function fetchEventActionTrend() { async function fetchEventActionTrend() {
if (!userValue.value) return if (!userValue.value) return
loading2.value = true loading2.value = true
const res = await api.getEventActionTrendList(params.value) try {
eventActionTrend.value = res.data.items const res = await api.getEventActionTrendList(params.value)
loading2.value = false eventActionTrend.value = res.data.items
} finally {
loading2.value = false
}
} }
const eventActionTrendOption = computed(() => { const eventActionTrendOption = computed(() => {
if (!eventActionTrend.value.length) return if (!eventActionTrend.value.length) return
...@@ -107,9 +122,12 @@ const eventMember = ref([]) ...@@ -107,9 +122,12 @@ const eventMember = ref([])
async function fetchEventMember() { async function fetchEventMember() {
if (!userValue.value) return if (!userValue.value) return
loading3.value = true loading3.value = true
const res = await api.getEventMemberList(params.value) try {
eventMember.value = res.data.items const res = await api.getEventMemberList(params.value)
loading3.value = false eventMember.value = res.data.items
} finally {
loading3.value = false
}
} }
const eventMemberOption = computed(() => { const eventMemberOption = computed(() => {
if (!eventMember.value.length) return if (!eventMember.value.length) return
...@@ -142,9 +160,12 @@ const eventTime = ref([]) ...@@ -142,9 +160,12 @@ const eventTime = ref([])
async function fetchEventTime() { async function fetchEventTime() {
if (!userValue.value) return if (!userValue.value) return
loading4.value = true loading4.value = true
const res = await api.getEventTimeList(params.value) try {
eventTime.value = res.data.items const res = await api.getEventTimeList(params.value)
loading4.value = false eventTime.value = res.data.items
} finally {
loading4.value = false
}
} }
const eventTimeOption = computed(() => { const eventTimeOption = computed(() => {
if (!eventTime.value.length) return if (!eventTime.value.length) return
......
...@@ -34,9 +34,12 @@ const labelHot = ref([]) ...@@ -34,9 +34,12 @@ const labelHot = ref([])
async function fetchLabelHot() { async function fetchLabelHot() {
if (!userValue.value) return if (!userValue.value) return
loading1.value = true loading1.value = true
const res = await api.getHotTags({ sso_id: userValue.value }) try {
labelHot.value = res.data.items const res = await api.getHotTags({ sso_id: userValue.value })
loading1.value = false labelHot.value = res.data.items
} finally {
loading1.value = false
}
} }
const labelHotOption = computed(() => { const labelHotOption = computed(() => {
if (!labelHot.value.length) return if (!labelHot.value.length) return
...@@ -79,9 +82,12 @@ const labelTop = ref([]) ...@@ -79,9 +82,12 @@ const labelTop = ref([])
async function fetchLabelTop() { async function fetchLabelTop() {
if (!userValue.value) return if (!userValue.value) return
loading2.value = true loading2.value = true
const res = await api.getTagTop({ sso_id: userValue.value }) try {
labelTop.value = res.data.items const res = await api.getTagTop({ sso_id: userValue.value })
loading2.value = false labelTop.value = res.data.items
} finally {
loading2.value = false
}
} }
const labelTopOption = computed(() => { const labelTopOption = computed(() => {
if (!labelTop.value.length) return if (!labelTop.value.length) return
...@@ -115,9 +121,12 @@ const labelMemberTop = ref([]) ...@@ -115,9 +121,12 @@ const labelMemberTop = ref([])
async function fetchLabelMemberTop() { async function fetchLabelMemberTop() {
if (!userValue.value) return if (!userValue.value) return
loading3.value = true loading3.value = true
const res = await api.getMemberTagTop({ sso_id: userValue.value }) try {
labelMemberTop.value = res.data.items const res = await api.getMemberTagTop({ sso_id: userValue.value })
loading3.value = false labelMemberTop.value = res.data.items
} finally {
loading3.value = false
}
} }
const labelMemberTopOption = computed(() => { const labelMemberTopOption = computed(() => {
if (!labelMemberTop.value.length) return if (!labelMemberTop.value.length) return
...@@ -149,9 +158,12 @@ const groupHot = ref([]) ...@@ -149,9 +158,12 @@ const groupHot = ref([])
async function fetchGroupHot() { async function fetchGroupHot() {
if (!userValue.value) return if (!userValue.value) return
loading4.value = true loading4.value = true
const res = await api.getHotGroups({ sso_id: userValue.value }) try {
groupHot.value = res.data.items const res = await api.getHotGroups({ sso_id: userValue.value })
loading4.value = false groupHot.value = res.data.items
} finally {
loading4.value = false
}
} }
const groupHotOption = computed(() => { const groupHotOption = computed(() => {
if (!groupHot.value.length) return if (!groupHot.value.length) return
...@@ -231,9 +243,12 @@ const groupMemberTop = ref([]) ...@@ -231,9 +243,12 @@ const groupMemberTop = ref([])
async function fetchGroupMemberTop() { async function fetchGroupMemberTop() {
if (!userValue.value) return if (!userValue.value) return
loading6.value = true loading6.value = true
const res = await api.getMemberGroupTop({ sso_id: userValue.value }) try {
groupMemberTop.value = res.data.items const res = await api.getMemberGroupTop({ sso_id: userValue.value })
loading6.value = false groupMemberTop.value = res.data.items
} finally {
loading6.value = false
}
} }
const groupMemberTopOption = computed(() => { const groupMemberTopOption = computed(() => {
if (!groupMemberTop.value.length) return if (!groupMemberTop.value.length) return
......
...@@ -38,9 +38,12 @@ async function fetchEventAction() { ...@@ -38,9 +38,12 @@ async function fetchEventAction() {
const [startDate, endDate] = eventActionDate.value const [startDate, endDate] = eventActionDate.value
if (!userValue.value || !eventValue.value || !startDate || !endDate) return if (!userValue.value || !eventValue.value || !startDate || !endDate) return
loading1.value = true loading1.value = true
const res = await api.getEventAction({ sso_id: userValue.value, start_date: startDate, end_date: endDate, event_id: eventValue.value }) try {
eventAction.value = res.data const res = await api.getEventAction({ sso_id: userValue.value, start_date: startDate, end_date: endDate, event_id: eventValue.value })
loading1.value = false eventAction.value = res.data
} finally {
loading1.value = false
}
} }
const eventActionOption = computed(() => { const eventActionOption = computed(() => {
if (!eventAction.value) return if (!eventAction.value) return
...@@ -87,9 +90,12 @@ async function fetchMarketing() { ...@@ -87,9 +90,12 @@ async function fetchMarketing() {
const [startDate, endDate] = marketingDate.value const [startDate, endDate] = marketingDate.value
if (!userValue.value || !startDate || !endDate) return if (!userValue.value || !startDate || !endDate) return
loading2.value = true loading2.value = true
const res = await api.getEventMarketing({ sso_id: userValue.value, start_date: startDate, end_date: endDate }) try {
marketing.value = res.data.items const res = await api.getEventMarketing({ sso_id: userValue.value, start_date: startDate, end_date: endDate })
loading2.value = false marketing.value = res.data.items
} finally {
loading2.value = false
}
} }
const marketingOption = computed(() => { const marketingOption = computed(() => {
return marketing.value.map((item, index, items) => { return marketing.value.map((item, index, items) => {
...@@ -116,9 +122,12 @@ const userEndDate = computed(() => { ...@@ -116,9 +122,12 @@ const userEndDate = computed(() => {
async function fetchUser() { async function fetchUser() {
if (!userValue.value || !userStartDate.value || !userEndDate.value) return if (!userValue.value || !userStartDate.value || !userEndDate.value) return
loading3.value = true loading3.value = true
const res = await api.getMemberList({ sso_id: userValue.value, start_date: userStartDate.value, end_date: userEndDate.value }) try {
user.value = res.data.items const res = await api.getMemberList({ sso_id: userValue.value, start_date: userStartDate.value, end_date: userEndDate.value })
loading3.value = false user.value = res.data.items
} finally {
loading3.value = false
}
} }
function format(date) { function format(date) {
......
...@@ -12,11 +12,14 @@ const attrs = ref([]) ...@@ -12,11 +12,14 @@ const attrs = ref([])
async function fetchAttrs() { async function fetchAttrs() {
if (!props.ssoId || !metaAttrValue.value) return if (!props.ssoId || !metaAttrValue.value) return
loading.value = true loading.value = true
const res = await getMemberAttrs({ sso_id: props.ssoId, member_meta_id: metaAttrValue.value }) try {
attrs.value = res.data.items.map(item => { const res = await getMemberAttrs({ sso_id: props.ssoId, member_meta_id: metaAttrValue.value })
return { name: item.group_name, value: item.total } attrs.value = res.data.items.map(item => {
}) return { name: item.group_name, value: item.total }
loading.value = false })
} finally {
loading.value = false
}
} }
watchEffect(() => { watchEffect(() => {
fetchAttrs() fetchAttrs()
......
...@@ -39,10 +39,13 @@ const userTotal = ref(0) ...@@ -39,10 +39,13 @@ const userTotal = ref(0)
async function fetchGender() { async function fetchGender() {
if (!userValue.value) return if (!userValue.value) return
loading1.value = true loading1.value = true
const res = await api.getMemberGender({ sso_id: userValue.value }) try {
gender.value = res.data.items const res = await api.getMemberGender({ sso_id: userValue.value })
userTotal.value = res.data.total gender.value = res.data.items
loading1.value = false userTotal.value = res.data.total
} finally {
loading1.value = false
}
} }
const genderOption = computed(() => { const genderOption = computed(() => {
if (!gender.value.length) return if (!gender.value.length) return
...@@ -96,11 +99,14 @@ const connection = ref([]) ...@@ -96,11 +99,14 @@ const connection = ref([])
async function fetchConnections() { async function fetchConnections() {
if (!userValue.value) return if (!userValue.value) return
loading2.value = true loading2.value = true
const res = await api.getMemberConnections({ sso_id: userValue.value }) try {
connection.value = res.data.items.map(item => { const res = await api.getMemberConnections({ sso_id: userValue.value })
return { ...item, group_name: getNameByValue(item.group_name, connectionTypeList) } connection.value = res.data.items.map(item => {
}) return { ...item, group_name: getNameByValue(item.group_name, connectionTypeList) }
loading2.value = false })
} finally {
loading2.value = false
}
} }
const connectionOption = computed(() => { const connectionOption = computed(() => {
if (!connection.value.length) return if (!connection.value.length) return
...@@ -134,11 +140,14 @@ const status = ref([]) ...@@ -134,11 +140,14 @@ const status = ref([])
async function fetchStatus() { async function fetchStatus() {
if (!userValue.value) return if (!userValue.value) return
loading3.value = true loading3.value = true
const res = await api.getMemberStatus({ sso_id: userValue.value }) try {
status.value = res.data.items.map(item => { const res = await api.getMemberStatus({ sso_id: userValue.value })
return { name: getNameByValue(item.group_name, statusList), value: item.total } status.value = res.data.items.map(item => {
}) return { name: getNameByValue(item.group_name, statusList), value: item.total }
loading3.value = false })
} finally {
loading3.value = false
}
} }
const statusOption = computed(() => { const statusOption = computed(() => {
if (!status.value.length) return if (!status.value.length) return
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论