2
0

fix:仪表盘金额精确度修改

This commit is contained in:
zhongzm
2024-12-31 17:02:20 +08:00
parent a70546756a
commit 4fbb71c681

View File

@@ -63,6 +63,17 @@ const formatTraffic = (bytes: number): { value: number; unit: string } => {
} }
}; };
// 添加格式化余额的函数
const formatBalance = (balance: number | string): string => {
// 确保转换为数字类型
const numBalance = Number(balance);
// 检查是否是有效数字
if (isNaN(numBalance)) {
return '0.00';
}
return numBalance.toFixed(2);
};
// 使用 ref 来存储基础数据 // 使用 ref 来存储基础数据
const baseData = ref<GaugeDisplayData[]>([ const baseData = ref<GaugeDisplayData[]>([
{ {
@@ -113,7 +124,7 @@ const getGaugeOptions = (data: GaugeDisplayData): ECOption => ({
lineStyle: { lineStyle: {
width: 15, width: 15,
color: [ color: [
[(data.value / data.max), '#4284f5'], [data.value / (data.max || 1), '#4284f5'],
[1, '#0c47a7'] [1, '#0c47a7']
] ]
} }
@@ -174,6 +185,8 @@ const { domRef: gauge3Ref, updateOptions: updateGauge3 } = useEcharts(() => getG
// 更新单个图表的数据 // 更新单个图表的数据
const updateGaugeData = (opts: ECOption, data: GaugeDisplayData, progressRatio?: number) => { const updateGaugeData = (opts: ECOption, data: GaugeDisplayData, progressRatio?: number) => {
const ratio = progressRatio !== undefined ? progressRatio : (data.value / (data.max || 1));
// 创建完整的新配置 // 创建完整的新配置
const newOpts: ECOption = { const newOpts: ECOption = {
backgroundColor: 'transparent', backgroundColor: 'transparent',
@@ -181,7 +194,7 @@ const updateGaugeData = (opts: ECOption, data: GaugeDisplayData, progressRatio?:
name: data.title, name: data.title,
type: 'gauge', type: 'gauge',
min: 0, min: 0,
max: data.max, max: data.max || 1,
startAngle: 200, startAngle: 200,
endAngle: -20, endAngle: -20,
radius: '85%', radius: '85%',
@@ -190,7 +203,7 @@ const updateGaugeData = (opts: ECOption, data: GaugeDisplayData, progressRatio?:
lineStyle: { lineStyle: {
width: 15, width: 15,
color: [ color: [
[(progressRatio !== undefined ? progressRatio : data.value / data.max), '#4284f5'], [ratio, '#4284f5'],
[1, '#0c47a7'] [1, '#0c47a7']
] ]
} }
@@ -272,10 +285,13 @@ async function mockDataUpdate() {
const response = await authStore.getDashboardData(); const response = await authStore.getDashboardData();
if (response) { if (response) {
// 更新余额和设备数据 // 更新余额和设备数据
const numBalance = Number(response.balance);
baseData.value[0] = { baseData.value[0] = {
...baseData.value[0], ...baseData.value[0],
value: response.balance, value: numBalance, // 使用转换后的数字
max: Math.max(response.balance, 100), max: Math.max(numBalance, 100),
displayValue: formatBalance(response.balance),
unit: '元',
subTitle: t('page.headerbanner.deviceCount') + `: ${response.clientNum}` subTitle: t('page.headerbanner.deviceCount') + `: ${response.clientNum}`
}; };
@@ -410,7 +426,7 @@ defineExpose({
}"></div> }"></div>
<div class="gauge-info"> <div class="gauge-info">
<div class="gauge-title">{{ item.title }}</div> <div class="gauge-title">{{ item.title }}</div>
<div class="gauge-value">{{ item.displayValue || `${item.value}${item.unit}` }}</div> <div class="gauge-value">{{ item.displayValue ? `${item.displayValue}${item.unit}` : `${item.value}${item.unit}` }}</div>
<div class="gauge-desc">{{ item.description }}</div> <div class="gauge-desc">{{ item.description }}</div>
<div class="sub-title">{{ item.subTitle }}</div> <div class="sub-title">{{ item.subTitle }}</div>
</div> </div>