开发个人业绩组件
This commit is contained in:
		@@ -67,7 +67,7 @@ module.exports = {
 | 
				
			|||||||
                    js: "espree",
 | 
					                    js: "espree",
 | 
				
			||||||
                    "<template>": "espree",
 | 
					                    "<template>": "espree",
 | 
				
			||||||
                },
 | 
					                },
 | 
				
			||||||
                // project: "./tsconfig.json",
 | 
					                project: "./tsconfig.json",
 | 
				
			||||||
                extraFileExtensions: [".vue",],
 | 
					                extraFileExtensions: [".vue",],
 | 
				
			||||||
            },
 | 
					            },
 | 
				
			||||||
            plugins: ["eslint-plugin-vue",],
 | 
					            plugins: ["eslint-plugin-vue",],
 | 
				
			||||||
@@ -75,7 +75,7 @@ module.exports = {
 | 
				
			|||||||
                "plugin:vue/vue3-essential",
 | 
					                "plugin:vue/vue3-essential",
 | 
				
			||||||
                "plugin:vue/recommended",
 | 
					                "plugin:vue/recommended",
 | 
				
			||||||
                "eslint:recommended",
 | 
					                "eslint:recommended",
 | 
				
			||||||
                // "standard-with-typescript", 
 | 
					                "standard-with-typescript", 
 | 
				
			||||||
                "plugin:@typescript-eslint/eslint-recommended",
 | 
					                "plugin:@typescript-eslint/eslint-recommended",
 | 
				
			||||||
                "plugin:@typescript-eslint/recommended",
 | 
					                "plugin:@typescript-eslint/recommended",
 | 
				
			||||||
            ],
 | 
					            ],
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -29,11 +29,11 @@ export default {
 | 
				
			|||||||
    setup( props )
 | 
					    setup( props )
 | 
				
			||||||
    {
 | 
					    {
 | 
				
			||||||
        const ui = reactive({
 | 
					        const ui = reactive({
 | 
				
			||||||
            mensualList:[],
 | 
					            mensualList: [],
 | 
				
			||||||
        });
 | 
					        });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        // 设置图表
 | 
					        // 设置图表
 | 
				
			||||||
        const initCharts = () =>
 | 
					        const initCharts = (): void =>
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
            console.log( "每月业绩", props.chartData );
 | 
					            console.log( "每月业绩", props.chartData );
 | 
				
			||||||
            const chartDom = document.getElementById( "chartWrapper" );
 | 
					            const chartDom = document.getElementById( "chartWrapper" );
 | 
				
			||||||
@@ -55,7 +55,7 @@ export default {
 | 
				
			|||||||
                ],
 | 
					                ],
 | 
				
			||||||
            };
 | 
					            };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            option && myChart.setOption( option );
 | 
					            myChart.setOption( option );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            window.onresize = function ()
 | 
					            window.onresize = function ()
 | 
				
			||||||
            {
 | 
					            {
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -11,10 +11,10 @@
 | 
				
			|||||||
    <div class="caller-archievment-wrapper">
 | 
					    <div class="caller-archievment-wrapper">
 | 
				
			||||||
        <table>
 | 
					        <table>
 | 
				
			||||||
            <tr>
 | 
					            <tr>
 | 
				
			||||||
                <td>坐席名称</td><td>{{ ui.callerName }}</td>
 | 
					                <td>坐席名称</td><td>{{ CallerName }}</td>
 | 
				
			||||||
            </tr>
 | 
					            </tr>
 | 
				
			||||||
            <tr>
 | 
					            <tr>
 | 
				
			||||||
                <td>车险保费</td><td>{{ ui.thisMonthPremium }}</td>
 | 
					                <td>车险保费</td><td>{{ PresentMonthPremium }} 万元</td>
 | 
				
			||||||
            </tr>
 | 
					            </tr>
 | 
				
			||||||
            <tr>
 | 
					            <tr>
 | 
				
			||||||
                <td>车非渗透率</td><td>{{ ui.attachingRate }}</td>
 | 
					                <td>车非渗透率</td><td>{{ ui.attachingRate }}</td>
 | 
				
			||||||
@@ -26,6 +26,7 @@
 | 
				
			|||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
</template>
 | 
					</template>
 | 
				
			||||||
<script lang="ts">
 | 
					<script lang="ts">
 | 
				
			||||||
 | 
					import { computed } from "vue";
 | 
				
			||||||
interface CallerArchievementComponentUI
 | 
					interface CallerArchievementComponentUI
 | 
				
			||||||
{
 | 
					{
 | 
				
			||||||
    callerName: string,
 | 
					    callerName: string,
 | 
				
			||||||
@@ -36,23 +37,41 @@ interface  CallerArchievementComponentUI
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
    name: "CallerArchievementComponent",
 | 
					    name: "CallerArchievementComponent",
 | 
				
			||||||
    props:{
 | 
					    props: {
 | 
				
			||||||
 | 
					        callerName: {
 | 
				
			||||||
 | 
					            type: String,
 | 
				
			||||||
 | 
					            require: true,
 | 
				
			||||||
 | 
					            default: (): string => "",
 | 
				
			||||||
 | 
					        },
 | 
				
			||||||
        thisMonthPremium: {
 | 
					        thisMonthPremium: {
 | 
				
			||||||
            type: Number,
 | 
					            type: Number,
 | 
				
			||||||
            require: true,
 | 
					            require: true,
 | 
				
			||||||
            default:()=>0,
 | 
					            default: (): number => 0,
 | 
				
			||||||
        },
 | 
					        },
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    setup()
 | 
					    setup( props )
 | 
				
			||||||
    {
 | 
					    {
 | 
				
			||||||
        const ui:CallerArchievementComponentUI = {
 | 
					        const ui: CallerArchievementComponentUI = {
 | 
				
			||||||
            callerName: "",
 | 
					            callerName: "",
 | 
				
			||||||
            thisMonthPremium: 0,
 | 
					            thisMonthPremium: 0,
 | 
				
			||||||
            attachingRate: "0.0",
 | 
					            attachingRate: "0.0",
 | 
				
			||||||
            renewalRate: "0.0",
 | 
					            renewalRate: "0.0",
 | 
				
			||||||
        };
 | 
					        };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        return {ui,};
 | 
					        const PresentMonthPremium = computed((): string =>
 | 
				
			||||||
 | 
					        {
 | 
				
			||||||
 | 
					            return ( props.thisMonthPremium / 10000 ).toFixed( 2 );
 | 
				
			||||||
 | 
					        });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        const CallerName = computed((): string =>
 | 
				
			||||||
 | 
					        {
 | 
				
			||||||
 | 
					            return props.callerName;
 | 
				
			||||||
 | 
					        });
 | 
				
			||||||
 | 
					        return {
 | 
				
			||||||
 | 
					            CallerName,
 | 
				
			||||||
 | 
					            PresentMonthPremium,
 | 
				
			||||||
 | 
					            ui,
 | 
				
			||||||
 | 
					        };
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
</script>
 | 
					</script>
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -93,7 +93,7 @@ import
 | 
				
			|||||||
    queryDepartmentArchievement,
 | 
					    queryDepartmentArchievement,
 | 
				
			||||||
    queryCallerArchievement
 | 
					    queryCallerArchievement
 | 
				
			||||||
} from "@/utils/archievement.js";
 | 
					} from "@/utils/archievement.js";
 | 
				
			||||||
import { RankingListItem } from "@/types/cpicxim/RankingListItem.js";
 | 
					import { type RankingListItem } from "@/types/cpicxim/RankingListItem.js";
 | 
				
			||||||
import
 | 
					import
 | 
				
			||||||
{
 | 
					{
 | 
				
			||||||
    type RankingListRequest,
 | 
					    type RankingListRequest,
 | 
				
			||||||
@@ -139,7 +139,7 @@ export default {
 | 
				
			|||||||
    {
 | 
					    {
 | 
				
			||||||
        const monthIndex = new Date();
 | 
					        const monthIndex = new Date();
 | 
				
			||||||
        const thisMonth: number = monthIndex.getMonth() + 1; // getMonth返回值从0开始。
 | 
					        const thisMonth: number = monthIndex.getMonth() + 1; // getMonth返回值从0开始。
 | 
				
			||||||
        const thisMonthString = thisMonth > 10 ? String( thisMonth ): "0" + String( thisMonth );
 | 
					        const thisMonthString = thisMonth > 10 ? String( thisMonth ) : "0" + String( thisMonth );
 | 
				
			||||||
        const thisYear: number = monthIndex.getFullYear();
 | 
					        const thisYear: number = monthIndex.getFullYear();
 | 
				
			||||||
        const thisYearString: string = String( thisYear );
 | 
					        const thisYearString: string = String( thisYear );
 | 
				
			||||||
        const numInChinese = [
 | 
					        const numInChinese = [
 | 
				
			||||||
@@ -173,7 +173,7 @@ export default {
 | 
				
			|||||||
        });
 | 
					        });
 | 
				
			||||||
        let timerHandler = 0;
 | 
					        let timerHandler = 0;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        const getTotalArchievement = computed(():string =>
 | 
					        const getTotalArchievement = computed((): string =>
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
            const cnyFormat = new Intl.NumberFormat( "zh-cn", {
 | 
					            const cnyFormat = new Intl.NumberFormat( "zh-cn", {
 | 
				
			||||||
                style: "currency",
 | 
					                style: "currency",
 | 
				
			||||||
@@ -194,7 +194,7 @@ export default {
 | 
				
			|||||||
            // console.log( "部门业绩数据", data );
 | 
					            // console.log( "部门业绩数据", data );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            // 检查请求是否成功
 | 
					            // 检查请求是否成功
 | 
				
			||||||
            if ( data.success !== true )
 | 
					            if ( !data.success )
 | 
				
			||||||
            {
 | 
					            {
 | 
				
			||||||
                // 失败就提示消息,然后退出
 | 
					                // 失败就提示消息,然后退出
 | 
				
			||||||
                ElMessage({
 | 
					                ElMessage({
 | 
				
			||||||
@@ -226,7 +226,7 @@ export default {
 | 
				
			|||||||
        const applyCallerArchievementData = ( data: CallerArchievement ): void =>
 | 
					        const applyCallerArchievementData = ( data: CallerArchievement ): void =>
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
            // 检查请求是否成功
 | 
					            // 检查请求是否成功
 | 
				
			||||||
            if ( data.success !== true )
 | 
					            if ( !data.success )
 | 
				
			||||||
            {
 | 
					            {
 | 
				
			||||||
                // 失败就提示消息,然后退出
 | 
					                // 失败就提示消息,然后退出
 | 
				
			||||||
                ElMessage({
 | 
					                ElMessage({
 | 
				
			||||||
@@ -268,7 +268,7 @@ export default {
 | 
				
			|||||||
        };
 | 
					        };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        // 退出桌面霸屏
 | 
					        // 退出桌面霸屏
 | 
				
			||||||
        const logoutDesktopArchievement = () =>
 | 
					        const logoutDesktopArchievement = (): void =>
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
            console.log( "111" );
 | 
					            console.log( "111" );
 | 
				
			||||||
            logout();
 | 
					            logout();
 | 
				
			||||||
@@ -285,13 +285,13 @@ export default {
 | 
				
			|||||||
                center: true,
 | 
					                center: true,
 | 
				
			||||||
            });
 | 
					            });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            router.push( "/login" );
 | 
					            router.push( "/login" ).then(() => {}).catch(() => {});
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        /**
 | 
					        /**
 | 
				
			||||||
         * 用于定时对页面进行刷新,其中会请求最新的业绩数据。
 | 
					         * 用于定时对页面进行刷新,其中会请求最新的业绩数据。
 | 
				
			||||||
         */
 | 
					         */
 | 
				
			||||||
        const refresh = () =>
 | 
					        const refresh = (): void =>
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
            const deparmentInfo: Department = {
 | 
					            const deparmentInfo: Department = {
 | 
				
			||||||
                departmentCode: callerInfo.departmentCode,
 | 
					                departmentCode: callerInfo.departmentCode,
 | 
				
			||||||
@@ -304,6 +304,8 @@ export default {
 | 
				
			|||||||
                month: thisMonthString,
 | 
					                month: thisMonthString,
 | 
				
			||||||
            };
 | 
					            };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            console.log( "refresh", rankinglistRequest );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            queryDepartmentArchievement( deparmentInfo, applyDepartmentArchievementData );
 | 
					            queryDepartmentArchievement( deparmentInfo, applyDepartmentArchievementData );
 | 
				
			||||||
            queryCallerArchievement( callerInfo, applyCallerArchievementData );
 | 
					            queryCallerArchievement( callerInfo, applyCallerArchievementData );
 | 
				
			||||||
            requestRankingList( rankinglistRequest, applyRankingListData );
 | 
					            requestRankingList( rankinglistRequest, applyRankingListData );
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -71,7 +71,7 @@ import { saveStaffInfo, getUserType, saveUserType, getCallerInfo, saveCallerInfo
 | 
				
			|||||||
import { login, loginCaller, type LoginCallerInfo, type LoginCallerResult } from "@/utils/account";
 | 
					import { login, loginCaller, type LoginCallerInfo, type LoginCallerResult } from "@/utils/account";
 | 
				
			||||||
import { ElMessage } from "element-plus";
 | 
					import { ElMessage } from "element-plus";
 | 
				
			||||||
import { StaffInfo } from "@/types/cpicxim/StaffInfo";
 | 
					import { StaffInfo } from "@/types/cpicxim/StaffInfo";
 | 
				
			||||||
import { TelSaler } from "@/types/cpicxim/TelSaler";
 | 
					import { type TelSaler } from "@/types/cpicxim/TelSaler";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default {
 | 
					export default {
 | 
				
			||||||
    name: "LoginPage",
 | 
					    name: "LoginPage",
 | 
				
			||||||
@@ -95,7 +95,7 @@ export default {
 | 
				
			|||||||
        /**
 | 
					        /**
 | 
				
			||||||
         * 保存p13账号
 | 
					         * 保存p13账号
 | 
				
			||||||
         */
 | 
					         */
 | 
				
			||||||
        const savedP13uid = () =>
 | 
					        const savedP13uid = (): void =>
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
            window.localStorage.setItem( "stuff_account", ui.account );
 | 
					            window.localStorage.setItem( "stuff_account", ui.account );
 | 
				
			||||||
        };
 | 
					        };
 | 
				
			||||||
@@ -103,7 +103,7 @@ export default {
 | 
				
			|||||||
        /**
 | 
					        /**
 | 
				
			||||||
         * 登录函数,根据ui.currentMenu判断登录的是坐席还是员工。
 | 
					         * 登录函数,根据ui.currentMenu判断登录的是坐席还是员工。
 | 
				
			||||||
         */
 | 
					         */
 | 
				
			||||||
        const onLogin = () =>
 | 
					        const onLogin = (): void =>
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
            // 保存用户类型
 | 
					            // 保存用户类型
 | 
				
			||||||
            saveUserType( ui.currentMenu );
 | 
					            saveUserType( ui.currentMenu );
 | 
				
			||||||
@@ -145,7 +145,7 @@ export default {
 | 
				
			|||||||
                            saveStaffInfo( staffInfo );
 | 
					                            saveStaffInfo( staffInfo );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                            // 跳转路由
 | 
					                            // 跳转路由
 | 
				
			||||||
                            router.push( "/desktop" );
 | 
					                            router.push( "/desktop" ).then(() => {}).catch(() => {});
 | 
				
			||||||
                        }
 | 
					                        }
 | 
				
			||||||
                        else
 | 
					                        else
 | 
				
			||||||
                        {
 | 
					                        {
 | 
				
			||||||
@@ -177,12 +177,12 @@ export default {
 | 
				
			|||||||
                    // 调用接口成功
 | 
					                    // 调用接口成功
 | 
				
			||||||
                    .then(( response ) =>
 | 
					                    .then(( response ) =>
 | 
				
			||||||
                    {
 | 
					                    {
 | 
				
			||||||
                        const data:LoginCallerResult = response.data ?? { success: false, };
 | 
					                        const data: LoginCallerResult = response.data ?? { success: false, };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                        // debugger;
 | 
					                        // debugger;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                        // 查看標志位
 | 
					                        // 查看標志位
 | 
				
			||||||
                        if ( data.success === true )
 | 
					                        if ( data.success )
 | 
				
			||||||
                        {
 | 
					                        {
 | 
				
			||||||
                            // 查询成功,显示一个提示,保存工号,并跳转路由
 | 
					                            // 查询成功,显示一个提示,保存工号,并跳转路由
 | 
				
			||||||
                            ElMessage({
 | 
					                            ElMessage({
 | 
				
			||||||
@@ -190,7 +190,7 @@ export default {
 | 
				
			|||||||
                                type: "success",
 | 
					                                type: "success",
 | 
				
			||||||
                            });
 | 
					                            });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                            const telsaler:TelSaler = {
 | 
					                            const telsaler: TelSaler = {
 | 
				
			||||||
                                telSalerCode: data.tel_saler_code,
 | 
					                                telSalerCode: data.tel_saler_code,
 | 
				
			||||||
                                telSalerName: data.tel_saler_name,
 | 
					                                telSalerName: data.tel_saler_name,
 | 
				
			||||||
                                teamCode: data.team_code,
 | 
					                                teamCode: data.team_code,
 | 
				
			||||||
@@ -201,7 +201,7 @@ export default {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
                            saveCallerInfo( telsaler );
 | 
					                            saveCallerInfo( telsaler );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                            router.push( "/desktop_archievement" );
 | 
					                            router.push( "/desktop_archievement" ).then(() => {}).catch(() => {});
 | 
				
			||||||
                        }
 | 
					                        }
 | 
				
			||||||
                        else
 | 
					                        else
 | 
				
			||||||
                        {
 | 
					                        {
 | 
				
			||||||
@@ -249,7 +249,7 @@ export default {
 | 
				
			|||||||
                    });
 | 
					                    });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                    // 跳转路由
 | 
					                    // 跳转路由
 | 
				
			||||||
                    router.push( "/desktop_archievement" );
 | 
					                    router.push( "/desktop_archievement" ).then(() => {}).catch(() => {});
 | 
				
			||||||
                }
 | 
					                }
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
            else if ( staffType === "cpicxim_staff" )
 | 
					            else if ( staffType === "cpicxim_staff" )
 | 
				
			||||||
@@ -258,7 +258,7 @@ export default {
 | 
				
			|||||||
            }
 | 
					            }
 | 
				
			||||||
        });
 | 
					        });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        const onToggleMenu = ( type: string ) =>
 | 
					        const onToggleMenu = ( type: string ): void =>
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
            ui.currentMenu = type;
 | 
					            ui.currentMenu = type;
 | 
				
			||||||
        };
 | 
					        };
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -120,7 +120,7 @@ export default {
 | 
				
			|||||||
            callers: [],
 | 
					            callers: [],
 | 
				
			||||||
        });
 | 
					        });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        const onCurrentPageIndexChange = ( pageIndex: number ) =>
 | 
					        const onCurrentPageIndexChange = ( pageIndex: number ): void =>
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
            ui.table_current_page_index = pageIndex;
 | 
					            ui.table_current_page_index = pageIndex;
 | 
				
			||||||
        };
 | 
					        };
 | 
				
			||||||
@@ -129,7 +129,7 @@ export default {
 | 
				
			|||||||
         * 设置表格每页显示记录的数量
 | 
					         * 设置表格每页显示记录的数量
 | 
				
			||||||
         * @param pageSize 表格页记录数量
 | 
					         * @param pageSize 表格页记录数量
 | 
				
			||||||
         */
 | 
					         */
 | 
				
			||||||
        const onTablePageSizeChange = ( pageSize: number ) =>
 | 
					        const onTablePageSizeChange = ( pageSize: number ): void =>
 | 
				
			||||||
        {
 | 
					        {
 | 
				
			||||||
            ui.table_page_size = pageSize;
 | 
					            ui.table_page_size = pageSize;
 | 
				
			||||||
        };
 | 
					        };
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user