120 lines
2.7 KiB
Vue
120 lines
2.7 KiB
Vue
|
<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">
|
|||
|
|
<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>
|
|||
|
|
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)'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 计算百分比变化的样式类（红色或绿色）
|
|||
|
|
const percentageClass = computed(() => {
|
|||
|
|
// 检查变化值是否为正数
|
|||
|
|
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%;
|
|||
|
|
|
|||
|
|
: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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|