desktop_task_schedule/code/web/task_schedule/src/components/CallerArchievementComponent.vue

<!--
 * @Author: Kane
 * @Date: 2023-08-30 14:08:57
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/components/CallerArchievementComponent.vue
 * @Description:
 *
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
    <div class="caller-archievment-wrapper">
        <table>
            <tr>
                <td>坐席名称</td><td>{{ CallerName }}</td>
            </tr>
            <tr>
                <td>车险保费</td><td>{{ PresentMonthPremium }}&nbsp;万元</td>
            </tr>
            <tr>
                <td>车非渗透率</td><td>{{ ui.attachingRate }}%</td>
            </tr>
            <tr>
                <td>续保率</td><td>{{ ui.renewalRate }}%</td>
            </tr>
        </table>
    </div>
</template>
<script lang="ts">
import { computed } from "vue";
interface CallerArchievementComponentUI
{
    callerName: string,
    thisMonthPremium: number,
    attachingRate: string,
    renewalRate: string,
}

export default {
    name: "CallerArchievementComponent",
    props: {
        callerName: {
            type: String,
            require: true,
            default: (): string => "",
        },
        thisMonthPremium: {
            type: Number,
            require: true,
            default: (): number => 0,
        },
    },
    setup( props )
    {
        const ui: CallerArchievementComponentUI = {
            callerName: "",
            thisMonthPremium: 0,
            attachingRate: "0.0",
            renewalRate: "0.0",
        };

        const PresentMonthPremium = computed((): string =>
        {
            return ( props.thisMonthPremium / 10000 ).toFixed( 2 );
        });

        const CallerName = computed((): string =>
        {
            return props.callerName;
        });

        return {
            CallerName,
            PresentMonthPremium,
            ui,
        };
    },
};
</script>
<style scoped lang="scss">
.caller-archievment-wrapper
{
    width: 100%;
}
</style>