From 3c8c9d2f12d5d49577ab7df228399ec0f04b05e5 Mon Sep 17 00:00:00 2001 From: zhongzm Date: Mon, 30 Dec 2024 19:19:18 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E4=BB=AA=E8=A1=A8=E7=9B=98=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/home/modules/header-banner.vue | 179 ++++++++++++++--------- 1 file changed, 106 insertions(+), 73 deletions(-) diff --git a/src/views/home/modules/header-banner.vue b/src/views/home/modules/header-banner.vue index a15817b..50c2bb1 100644 --- a/src/views/home/modules/header-banner.vue +++ b/src/views/home/modules/header-banner.vue @@ -5,6 +5,7 @@ import { useAppStore } from '@/store/modules/app'; import type { ECOption } from '@/hooks/common/echarts'; import { useI18n } from 'vue-i18n'; import { useAuthStore } from '@/store/modules/auth'; +import { clientAuth } from '@/service/ue/client'; const { t } = useI18n(); const authStore = useAuthStore(); @@ -21,6 +22,7 @@ interface GaugeDisplayData { value: number; max: number; unit: string; + displayValue?: string; subTitle?: string; description?: string; } @@ -171,68 +173,100 @@ const { domRef: gauge3Ref, updateOptions: updateGauge3 } = useEcharts(() => getG }); // 更新单个图表的数据 -const updateGaugeData = (opts: ECOption, data: GaugeDisplayData) => { - if (!opts.series || !Array.isArray(opts.series)) { - opts.series = [{ +const updateGaugeData = (opts: ECOption, data: GaugeDisplayData, progressRatio?: number) => { + // 创建完整的新配置 + const newOpts: ECOption = { + backgroundColor: 'transparent', + series: [{ name: data.title, type: 'gauge', min: 0, max: data.max, - data: [], - detail: { show: false }, - title: { show: false } - }] as any[]; - } - - // 获取第一个系列并使用类型断言 - const series = opts.series[0] as { - axisLine?: { - lineStyle: { - width: number; - color: Array<[number, string]>; - }; - }; - data: Array<{ - value: number; - name: string; - }>; + startAngle: 200, + endAngle: -20, + radius: '85%', + center: ['50%', '55%'], + axisLine: { + lineStyle: { + width: 15, + color: [ + [(progressRatio !== undefined ? progressRatio : data.value / data.max), '#4284f5'], + [1, '#0c47a7'] + ] + } + }, + pointer: { + width: 3, + length: '60%', + itemStyle: { + color: '#ffeb3b' + } + }, + axisTick: { + show: true, + distance: -23, + length: 8, + lineStyle: { + color: '#fff', + width: 1, + opacity: 0.3 + } + }, + splitLine: { + show: true, + distance: -22, + length: 12, + lineStyle: { + color: '#fff', + width: 2, + opacity: 0.3 + } + }, + axisLabel: { + show: false + }, + detail: { + show: false + }, + title: { + show: false + }, + data: [{ + value: data.value, + name: data.title + }] + }] }; - // 更新轴线颜色 - if (!series.axisLine) { - series.axisLine = { - lineStyle: { - width: 15, - color: [ - [(data.value / data.max), '#4284f5'], - [1, '#0c47a7'] - ] - } - }; - } else { - series.axisLine.lineStyle = { - width: 15, - color: [ - [(data.value / data.max), '#4284f5'], - [1, '#0c47a7'] - ] - }; - } - - // 更新数据 - series.data = [{ - value: data.value, - name: data.title - }]; - - return opts; + return newOpts; }; // 添加峰值速率的 ref const peakTrafficRate = ref(0); -// mockDataUpdate 函数 -// 修改 mockDataUpdate 函数 +// 添加检查是否可以上网的函数 +function checkAndTriggerAuth(dashboardData: any) { + // 检查是否有余额 + const hasBalance = dashboardData.balance > 0; + + // 检查是否不限制流量 + const noTrafficLimit = !dashboardData.trafficEnable; + + // 检查是否有剩余流量 + const hasRemainingTraffic = dashboardData.trafficEnable && + (dashboardData.traffic - dashboardData.trafficUsed) > 0; + + // 如果满足任一条件，触发上网 + if (hasBalance || noTrafficLimit || hasRemainingTraffic) { + clientAuth().then((res) => { + console.log('Auto auth triggered:', res); + }).catch(err => { + console.error('Auto auth failed:', err); + }); + } +} + +// 修改 mockDataUpdate 函数，在获取数据后添加检查 async function mockDataUpdate() { try { const response = await authStore.getDashboardData(); @@ -263,27 +297,14 @@ async function mockDataUpdate() { // 更新流量数据显示 baseData.value[1] = { ...baseData.value[1], - value: formattedRemaining.value, // 仪表盘显示剩余流量 - unit: formattedRemaining.unit, // 使用转换后的单位 - max: formattedTotal.value, // 最大值为总流量 - description: `${t('page.headerbanner.monthflowr')} (${formattedTotal.value}${formattedTotal.unit})`, // 显示总流量 - subTitle: t('page.headerbanner.Used') + `: ${formattedUsed.value}${formattedUsed.unit}` // 显示已用流量 + value: remainingTraffic, + max: totalTraffic, + displayValue: `${formattedRemaining.value}${formattedRemaining.unit}`, + unit: '', + description: `${t('page.headerbanner.monthflowr')} (${formattedTotal.value}${formattedTotal.unit})`, + subTitle: t('page.headerbanner.Used') + `: ${formattedUsed.value}${formattedUsed.unit}` }; - // 更新仪表盘的进度比例 - updateGauge2(opts => { - if (opts.series && Array.isArray(opts.series)) { - const series = opts.series[0] as any; - if (series.axisLine) { - series.axisLine.lineStyle.color = [ - [progressRatio, '#4284f5'], - [1, '#0c47a7'] - ]; - } - } - return updateGaugeData(opts, baseData.value[1]); - }); - // 获取当前速率 const currentActivity = Number(response.activity ?? 0); @@ -313,9 +334,21 @@ async function mockDataUpdate() { subTitle: t('page.headerbanner.maxspeed') + `: ${peakSpeed.value}${peakSpeed.unit}` }; - // 更新图表 + // 在数据处理完成后，添加自动上网检查 + checkAndTriggerAuth(response); + + // 统一更新所有图表 updateGauge1(opts => updateGaugeData(opts, baseData.value[0])); - updateGauge2(opts => updateGaugeData(opts, baseData.value[1])); + updateGauge2(opts => { + const newOpts = updateGaugeData(opts, baseData.value[1], progressRatio); + // 添加动画配置 + return { + ...newOpts, + animation: true, + animationDuration: 1000, + animationEasing: 'cubicInOut' + }; + }); updateGauge3(opts => updateGaugeData(opts, baseData.value[2])); } } catch (error) { @@ -377,7 +410,7 @@ defineExpose({ }">
{{ item.title }}
-
{{ item.value }}{{ item.unit }}
+
{{ item.displayValue || `${item.value}${item.unit}` }}
{{ item.description }}
{{ item.subTitle }}