td_official/src/views/largeScreen/components/ProgressComponent.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" 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>
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
    }
});

// 计算百分比变化的样式类（红色或绿色）
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%;
    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;
    }

    .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>