taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
dhr
2025-08-22 18:25:54 +08:00
parent a437d7a485
commit e3b4826dce
11 changed files with 1050 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
src/views/largeScreen/components/ProgressComponent.vue
View File

@ -1,17 +1,17 @@
<template>
<div class="progress_component">
<div class="title">
<span class="progress_title">{{ title }}</span>
<span :class="percentageClass" class="roboto">{{ percentageChange }}</span>
</div>
<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" />
</div>
<div class="progress_component">
<div class="title">
<span class="progress_title">{{ title }}</span>
<span :class="percentageClass" class="roboto">{{ percentageChange }}</span>
</div>
<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" />
</div>
</div>
</template>
<script setup>
@ -19,103 +19,102 @@ import { defineProps, computed } from 'vue';
// 定义组件属性
const props = defineProps({
// 标题文本
title: {
type: String,
required: true,
default: '指标名称'
},
// 数值
value: {
type: String,
required: true,
default: '0.00'
},
// 单位
unit: {
type: String,
default: '万元'
},
// 百分比变化值（如：-327.55%）
percentageChange: {
type: String,
required: true,
default: '0.00%'
},
// 进度条百分比
progressPercentage: {
type: Number,
required: true,
default: 0
},
// 进度条颜色，默认红色
progressColor: {
type: String,
default: 'rgba(255, 77, 79, 1)'
},
// 是否显示价格
isShowPrice: {
type: Boolean,
default: true
}
// 标题文本
title: {
type: String,
required: true,
default: '指标名称'
},
// 数值
value: {
type: String,
required: true,
default: '0.00'
},
// 单位
unit: {
type: String,
default: '万元'
},
// 百分比变化值（如：-327.55%）
percentageChange: {
type: String,
required: true,
default: '0.00%'
},
// 进度条百分比
progressPercentage: {
type: Number,
required: true,
default: 0
},
// 进度条颜色，默认红色
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%');
return isPositive ? 'green' : 'red';
// 检查变化值是否为正数
const isPositive = props.percentageChange.startsWith('+') || (!props.percentageChange.startsWith('-') && props.percentageChange !== '0.00%');
return isPositive ? 'green' : 'red';
});
</script>
<style lang="scss" scoped>
.progress_component {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
margin-bottom: 10px;
:deep(.el-progress-bar__outer) {
background-color: transparent;
}
:deep(.el-progress-bar__inner),
:deep(.el-progress-bar__outer) {
border-radius: unset;
}
.my_el_progress {
margin-top: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.title {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 12px;
}
:deep(.el-progress-bar__outer) {
background-color: transparent;
}
.progress_title {
color: rgba(143, 171, 191, 1);
font-size: 12px;
font-family: SourceHanSansCN-Regular;
font-weight: 400;
}
:deep(.el-progress-bar__inner),
:deep(.el-progress-bar__outer) {
border-radius: unset;
}
.roboto {
font-family: Roboto-Regular;
font-weight: 400;
}
.my_el_progress {
margin-top: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.red {
color: rgba(255, 77, 79, 1);
}
.title {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 12px;
}
.progress_title {
color: rgba(143, 171, 191, 1);
font-size: 12px;
font-family: SourceHanSansCN-Regular;
font-weight: 400;
}
.roboto {
font-family: Roboto-Regular;
font-weight: 400;
}
.red {
color: rgba(255, 77, 79, 1);
}
.green {
color: rgba(0, 227, 150, 1);
}
.green {
color: rgba(0, 227, 150, 1);
}
}
</style>
</style>