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