platform_largeScreen/src/views/economicsOperation/nxfHomePage/component/percent-card-2.vue

<template>
    <div class="percent-card">
        <div class="card-chart">
            <percent-bar width="13vh" height="13vh" :value="percent" :nameVa="PercentName" :color="color" />
            <div class="card-title gray">{{ title }}</div>
        </div>
        <div class="card-info">
            <div class="card-value">
                <span class="value-text newBlue">{{ TotalText }}</span>
                <span class="newwhite">{{ TotalValue.toFixed(2) }}</span>
            </div>
            <div class="card-value">
                <span class="value-text newBlue">{{ ActualText }}</span>
                <span class="newwhite">{{ ActualValue * 10 }}</span>
            </div>
            <div class="card-value">
                <span class="value-text newBlue">{{ PercentText }}</span>
                <span class="newwhite">{{ PercentValue }}</span>
            </div>
        </div>
    </div>
</template>

<script>
    // 百分比card2
    // 使用位置 驾驶舱首页 计划电量完成情况 中的百分比卡片
    import PercentBar from "./percent-bar.vue";
    export default {
        created() {},
        components: {
            PercentBar,
        },
        props: {
            title: {
                type: String,
                default: "月计划完成率",
            },
            PercentName: {
                type: String,
                default: "",
            },
            TotalText: {
                type: String,
                default: "实际",
            },
            TotalValue: {
                type: Number,
                String,
                default: 0,
            },
            ActualText: {
                type: String,
                default: "计划",
            },
            ActualValue: {
                type: Number,
                String,
                default: 0,
            },
            PercentText: {
                type: String,
                default: "计划",
            },
            PercentValue: {
                type: Number,
                String,
                default: 0,
            },
            color: {
                type: String,
                default: "green",
            },
        },

        computed: {
            percent() {
                return this.TotalValue === 0 || this.ActualValue === 0 ?
                    0 :
                    parseInt((this.TotalValue / this.ActualValue) * 100);
            },
        },
    };
</script>

<style lang="less" scoped>
    .percent-card {
        display: flex;

        .card-chart {
            flex: 1 1 5.926vh;
        }

        .card-title {
            text-align: center;
            width: 100%;
            margin-top: 1.481vh;
            font-size: 12px;
        }

        .card-info {
            flex: auto;
            align-self: center;
            margin-left: 10px;
            margin-top: -0.4vh;

            .card-value {
                font-size: 14px;
                font-weight: 600;
                margin-bottom: 1.1111vh;
                white-space: nowrap;

                .value-text {
                    margin-right: 10px;
                    font-family: @font-family-num;
                }
                .newBlue{
                    color: #4d72bb;
                }
                .newwhite{
                    color: #c3e1ff;
                }
            }

            .card-text {
                font-size: @fontsize;
            }
        }
    }
</style>