fix:仪表盘金额精确度修改
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user