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>{{ ui.callerName }}</td>
            </tr>
            <tr>
                <td>车险保费</td><td>{{ ui.thisMonthPremium }}</td>
            </tr>
            <tr>
                <td>车非渗透率</td><td>{{ ui.attachingRate }}</td>
            </tr>
            <tr>
                <td>续保率</td><td>{{ ui.renewalRate }}</td>
            </tr>
        </table>
    </div>
</template>
<script lang="ts">
interface  CallerArchievementComponentUI
{
    callerName: string,
    thisMonthPremium: number,
    attachingRate: string,
    renewalRate: string,
}

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

        return {ui,};
    },
};
</script>
<style scoped lang="scss">
</style>