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 来存储基础数据
|
// 使用 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>
|
||||||
|
|||||||
Reference in New Issue
Block a user