封装进度条

<template>
    <div class="progress">
        <div class="progress-bar">
            <div class="progress-bar-box">
                <!-- 进度条上的颜色进度 -->
                <!-- 25% -->
                <div class="progress-bg" :style="[{ width: curWidth }]">
                </div>
            </div>
            <div class="progress-bar-text">
                <div class="progress-text low">低区间</div>
                <div style="position:absolute; left:26.1%;top:-45%;transform: translate(-26.1%,-8%);">
                    <span class="dashed-line low"></span>
                    <span class="limit-content low">
                        <span class="bold">低界限：</span><br />
                        {{ '￥' + Low }}</span>
                </div>

                <div class=" progress-text normal">正常区间</div>

                <div style="position:absolute; left:75%;top:-45%;transform: translateY(-8%);">
                    <span class="dashed-line hight"></span>
                    <span class="limit-content high">
                        <span class="bold">高界限：</span><br>
                        {{ '￥' + high }}</span>
                </div>

                <div class="progress-text hight">高区间</div>

                <div :style="[{ position: 'absolute', left: curWidth, top: '-45%', transform: 'translateY(-23%)' }]">
                    <span class="current-content">
                        ￥{{ high }}
                    </span>
                    <span class="dashed-line norm"></span>
                </div>

                <div
                    :style="[{ position: 'absolute', left: DWidth, top: '-52%', marginLeft: '-10px', transform: 'translateY(-52%)' }]">
                    <span class="limit-content drg">
                        <span class="bold">数据1：</span><br>
                        {{ '￥' + data1}}
                    </span>
                    <el-icon size="30">
                        <Position />
                    </el-icon>
                </div>
            </div>
            <!-- 上面点的位置 -->
            <!-- <div> -->
            <!-- <div class="sign sign-blue" :style="[{ left: '25%' }]"></div> -->
            <!-- <div class="sign sign-red" :style="[{ left: '15%' }]"></div>
            <div class="sign sign-green" :style="[{ left: '84.5%' }]"></div>-->
            <!-- </div> -->
        </div>
    </div>
</template>

import Position from './icon/Position.vue'
import { onMounted, ref, watchEffect } from 'vue';

const props = defineProps({
   hight: {
        type: Number || String,
        default: 0
    },
    low: {
        type: Number || String,
        default: 0
    },
    // 
    data1: {
        type: Number || String,
        default: 0
    },
    data2: {
        type: Number || String,
        default: 0
    }
})
let curWidth = ref('')
let DWidth = ref('')

// 根据高低中界限计算进度条上的数据应该如何计算
const currentDataLocation = (curVal: number, lowVal: number, highVal: number): string => {
    // // 当前数小于低时
    if (curVal <= lowVal) {
        let data = (curVal / lowVal)
        return (data * 25).toFixed(3) + '%'
    } else if (highVal >= curVal && curVal > lowVal) {
        // 当前数为正常时
        let data: number = ((curVal - lowVal) / (highVal - lowVal))
        return (data * 50 + 25).toFixed(3) + '%'

    } else if (highVal < curVal) {
        let max = (highVal + lowVal) * 2
        if (max > curVal) {
            let data = ((curVal - highVal) / (max - highVal))
            return (data * 25 + 75).toFixed(3) + '%'
        } else {
            return '89%'
        }
    } else {
        return ''
    }
}
watchEffect(() => {//props.currMedfeeSumamt props.drgDfrAmt
    curWidth.value = currentDataLocation(Number(props.data1), Number(props.low), Number(props.high))
    DWidth.value = currentDataLocation(Number(props.data2), Number(props.low), Number(props.high))
})

<style lang="less">
.progress {
    display: flex;
    align-items: center;
}

.progress-title {
    font-weight: bold;
    font-size: 16px;
    color: #0fce9b;
    width: 125px;
    text-align: end;
}

.progress-bar {
    padding: 35px 0px 30px;
    background-color: #f4f7fa;
    position: relative;
    margin: 10px;
    width: calc(~"100% - 55px");

    &-box {
        width: 100%;
        height: 20px;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 0 24px 24px 0;
        background-color: #ffffff;
        box-shadow: 0px 1px 3px 0px #848080 inset;
        position: relative;
        display: flex;
        font-size: 14px;

        .divider-border {
            content: '';
            position: absolute;
            left: 25%;
            display: inline-block;
            height: 85px;
            border-right: 1px dashed #333333;
            z-index: 5;
        }
    }

    &-text {
        width: 100%;
        position: absolute;
        font-size: 14px;
        top: 42%;
        z-index: 9;
    }

    .dashed-line {
        height: 35px;
        width: 3px;
        background-position: left;
        background-size: 3px 6px;
        background-repeat: repeat-y;
        display: block;

        &.low {
            background-image: linear-gradient(#cea613 70%, transparent 15%);
        }

        &.hight {
            background-image: linear-gradient(#f93a51 70%, transparent 15%);
        }

        &.norm {
            height: 20px;
            background-image: linear-gradient(#5bca93 55%, transparent 15%);
        }
    }
}

.progress-bg {
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 0 24px 24px 0;
    background-size: 32px 100%;
    position: absolute;
    text-align: center;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.349019607843137) inset;
    background: linear-gradient(to right, #08d2a2, #b8ee65);
    left: 0;
    z-index: 4;
}

.progress-text {
    display: inline-block;
    width: 24%;
    min-width: 120px;
    text-align: center;
    background-color: transparent;
    overflow-x: hidden;

    &.low {
        color: #edc68c;
    }

    &.normal {
        width: 49%;
        color: #97beec;
    }

    &.hight {
        color: #e0919a;
    }
}

.sign {
    // position: absolute;
    // z-index: 8;
    // top: -8%;
    width: 15px;
    height: 15px;
    border: 1px solid #fff;
    /*css3 圆角属性*/
    border-radius: 45% 75% 0% 75%;
    /*顺时针旋转45度*/
    transform: rotate(45deg);
    /*盒子阴影 x位移 y位移 羽化 半径 颜色 */
    box-shadow: 0px 0px 2px 1px #b4b6b9;

    &-blue {
        background: #4c89f0;
    }

    &-red {
        background-color: #f9845f;
    }

    &-green {
        background-color: #5cf36b;
    }
}

.limit-content {
    text-align: center;
    display: block;
    margin-left: -43px;
    padding-top: 5px;
}

父组件引入方式

<PreProgress :high="high" :low="low" :data1="data1" :data2="data2" />