refactor(largeScreen): 重构大屏展示组件

- 修改 ProgressComponent 组件,增加 isShowPrice 属性控制是否显示价格
- 更新 rightPage 组件,添加新的 ProgressComponent 实例
- 优化 tender/plan/index.vue 页面结构,简化代码
This commit is contained in:
tcy
2025-08-21 20:21:03 +08:00
parent ce1665a2c6
commit 5870c66161
3 changed files with 105 additions and 728 deletions

View File

@ -4,16 +4,12 @@
<span class="progress_title">{{ title }}</span>
<span :class="percentageClass" class="roboto">{{ percentageChange }}</span>
</div>
<div class="roboto">
<div class="roboto" v-if="isShowPrice">
<span>{{ value }}</span>
<span>{{ unit }}</span>
</div>
<div class="my_el_progress">
<el-progress
:percentage="progressPercentage"
:color="progressColor"
:show-text="false"
/>
<el-progress :percentage="progressPercentage" :color="progressColor" :show-text="false" />
</div>
</div>
</template>
@ -56,14 +52,19 @@ const props = defineProps({
progressColor: {
type: String,
default: 'rgba(255, 77, 79, 1)'
},
// 是否显示价格
isShowPrice: {
type: Boolean,
default: true
}
});
// 计算百分比变化的样式类(红色或绿色)
const percentageClass = computed(() => {
// 检查变化值是否为正数
const isPositive = props.percentageChange.startsWith('+') ||
(!props.percentageChange.startsWith('-') && props.percentageChange !== '0.00%');
const isPositive = props.percentageChange.startsWith('+') ||
(!props.percentageChange.startsWith('-') && props.percentageChange !== '0.00%');
return isPositive ? 'green' : 'red';
});
</script>
@ -73,6 +74,7 @@ const percentageClass = computed(() => {
width: 100%;
height: 100%;
margin-bottom: 10px;
:deep(.el-progress-bar__outer) {
background-color: transparent;
}
@ -116,5 +118,4 @@ const percentageClass = computed(() => {
color: rgba(0, 227, 150, 1);
}
}
</style>
</style>