Merge branch 'feature-rankinglist' of http://222.76.244.118:3000/CPICXIM/desktop_task_schedule into feature-rankinglist

2023-06-10 00:42:45 +08:00 · 2023-06-10 00:42:45 +08:00 · e2ccf553aa
parent 5856909e92 1b368deb9c
commit e2ccf553aa
8 changed files with 265 additions and 38 deletions
--- a/code/web/task_schedule/src/components/RankingListComponent.vue
+++ b/code/web/task_schedule/src/components/RankingListComponent.vue
@ -9,7 +9,40 @@
 -->
 <template>
    <div class="rankinglist-wrapper">
-        排行榜组件
+        <el-table
+            :data="topFive"
+            stripe
+            style="width:100%;"
+            :header-cell-style="{background:'#fecb96'}"
+        >
+            <el-table-column
+                label="名次"
+                width="60"
+                align="center"
+            >
+                <template #default="ranking">
+                    <span class="rankinglist-index">{{ ranking.row.index }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="名次"
+                width="160"
+                align="center"
+            >
+                <template #default="ranking">
+                    <span class="rankinglist-index">{{ ranking.row.callerName }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="指标"
+                width="80"
+                align="center"
+            >
+                <template #default="ranking">
+                    <span class="rankinglist-index">{{ ranking.row.appraiseValue }}</span>
+                </template>
+            </el-table-column>
+        </el-table>
    </div>
 </template>

@ -42,7 +75,7 @@ export default {
     * setup函数
     * @param props 组件的props属性。
     */
-    setup( props )
+    setup(props)
    {
        /**
         * 计算对象，用于获取top5.
@ -51,13 +84,13 @@ export default {
        {
            const rankingList = props.rankingList; // eslint-disable-line

-            rankingList.sort(( a, b ) =>
+            rankingList.sort((a, b) =>
            {
                // @ts-ignore
                return a.index - b.index;
            });

-            return rankingList.slice(0,5);
+            return rankingList.slice(0, 5);
        });

        return { props, topFive, };
@ -66,13 +99,34 @@ export default {
 </script>

 <style lang="scss" scoped>
-.rankinglist-wrapper
-{
-    border: 1px solid red;
-
+.rankinglist-wrapper {
+    // border: 1px solid red;
+    border-radius: 5px;
    width: 300px;
    height: 250px;
-
-    font-size: 12px;
 }
+
+.rankinglist-index {
+    display: block;
+    text-align: center;
+}
+
+:deep(.el-table)
+{
+    border-radius: 5px;
+}
+
+:deep(.el-table__header-wrapper) {
+  thead {
+    th{
+      div{
+        // font-family: "FZ-ZHUOHEI";
+        font-weight: 500;
+        font-size: 15px;
+        color: #da3703;
+      }
+    }
+  }
+}
+
 </style>
--- a/code/web/task_schedule/src/layout/components/Aside.vue
+++ b/code/web/task_schedule/src/layout/components/Aside.vue
@ -116,7 +116,7 @@ export default {
    width: 100%;
 }

-.el-menu {
+:deep(.el-menu) {
    border-right: none;
    /* border-left: 5px solid #1d74b2; */
    overflow: auto;
--- a/code/web/task_schedule/src/layout/components/Header.vue
+++ b/code/web/task_schedule/src/layout/components/Header.vue
@ -11,7 +11,7 @@
    <div class="header-wrapper">
        <span class="company-name">CPIC</span>
        <div class="version-wrapper">
-            <span>测试版</span>
+            <span>桌面霸屏后台管理</span>
            <span>Build-202303251257</span>
        </div>
        <div class="buttons-wrapper">
@ -93,6 +93,10 @@ export default {
        font: {
            size: 0.5rem;
        }
+
+        > *+* {
+            margin-top: 1px;
+        }
    }

    .company-name {
--- a/code/web/task_schedule/src/test/test.ts
+++ b/code/web/task_schedule/src/test/test.ts
@ -8,6 +8,6 @@
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
 */

-import { testNewCitizen } from "./identify.js";
+import { testRankingListRequest } from "./testRankingListRequest.js";

-testNewCitizen();
+testRankingListRequest();
--- a/code/web/task_schedule/src/utils/api/request.ts
+++ b/code/web/task_schedule/src/utils/api/request.ts
@ -13,7 +13,7 @@ import axios, { type AxiosInstance } from "axios";
 const service: AxiosInstance = axios.create(
    {
        baseURL: "",
-        timeout: 5000,
+        timeout: 10000,
    }
 );

--- a/code/web/task_schedule/src/utils/ranking.ts
+++ b/code/web/task_schedule/src/utils/ranking.ts
@ -28,8 +28,83 @@ interface RankingListResponse
    departmentCode: string;
    year: string;
    month: string;
-    attachingRankingList: RankingListItem[];
-    renewalRankintList: RankingListItem[];
+    attachingRateRankingList: RankingListItem[];
+    renewalRateRankingList: RankingListItem[];
 };

-export { type RankingListRequest, type RankingListResponse };
+/**
+ * 请求坐席排行榜。
+ * @param reqParam 请求参数
+ * @param rander 保存请求结果的回调函数
+ * @returns 返回RankingListResponse对象，里面包含请求状态和数据。
+ */
+function requestRankingList( reqParam: RankingListRequest, rander: any ): void // eslint-disable-line
+{
+    // let attachingRankingList: RankingListItem[];
+    // let renewalRankintList: RankingListItem[];
+
+    const rankingListResponse: RankingListResponse = {
+        success: false,
+        message: "",
+        departmentCode: reqParam.departmentCode,
+        year: reqParam.year,
+        month: reqParam.month,
+        attachingRateRankingList: [],
+        renewalRateRankingList: [],
+    };
+
+    instance.request(
+        {
+            method: "post",
+            url: API_URL.URL_RANKINGLIST,
+            data: reqParam,
+        })
+        .then(( response ) =>
+        {
+            const data: RankingListResponse = response.data as RankingListResponse;
+
+            rankingListResponse.success = data.success ?? false;
+            rankingListResponse.message = data.message ?? "";
+            rankingListResponse.departmentCode = data.departmentCode ?? "";
+            rankingListResponse.year = data.year ?? "";
+            rankingListResponse.month = data.month ?? "";
+
+            // 遍历排行榜元素
+            for ( const item of ( data.attachingRateRankingList ?? [] )) // eslint-disable-line
+            {
+                const index: number = item.index ?? -1;
+
+                if ( index === -1 )
+                {
+                    continue;
+                }
+
+                rankingListResponse.attachingRateRankingList.push( item );
+            }
+
+            for ( const item of ( data.renewalRateRankingList ?? [] )) // eslint-disable-line
+            {
+                const index: number = item.index ?? -1;
+
+                if ( index === -1 )
+                {
+                    continue;
+                }
+
+                rankingListResponse.renewalRateRankingList.push( item );
+            }
+
+            // 调用回调函数保存数据
+            rander( rankingListResponse );
+        })
+        .catch(( error ) =>
+        {
+            console.log( error );
+        });
+}
+
+export {
+    type RankingListRequest,
+    type RankingListResponse,
+    requestRankingList
+};
--- a/code/web/task_schedule/src/views/DesktopArchievement.vue
+++ b/code/web/task_schedule/src/views/DesktopArchievement.vue
@ -31,12 +31,8 @@
                        :percentage="ui.attaching_rate"
                    />
                </div>
-                <div
-                    class="total-archievement-charts-wrapper"
-                >
-                    <ArchievementChart
-                        :chart-data="ui.chartData"
-                    />
+                <div class="total-archievement-charts-wrapper">
+                    <ArchievementChart :chart-data="ui.chartData" />
                </div>
            </div>
            <div class="reward-wrapper">
@ -52,8 +48,37 @@
            </div>
        </div>
        <div class="right-wrapper">
-            <RankingListComponent />
-            <RankingListComponent />
+            <h1>本大爷</h1>
+            <div class="carousel-item">
+                <el-carousel
+                    arrow="never"
+                    indicator-position="none"
+                    :interval="4000"
+                >
+                    <el-carousel-item
+                        :key="1"
+                    >
+                        <RankingListComponent :ranking-list="ui.attachingRankingList" />
+                    </el-carousel-item>
+                    <el-carousel-item :key="2">
+                        <RankingListComponent :ranking-list="ui.renewalRankingList" />
+                    </el-carousel-item>
+                </el-carousel>
+            </div>
+            <div class="carousel-item">
+                <el-carousel
+                    arrow="never"
+                    indicator-position="none"
+                    :interval="4000"
+                >
+                    <el-carousel-item :key="1">
+                        <RankingListComponent :ranking-list="ui.attachingRankingList" />
+                    </el-carousel-item>
+                    <el-carousel-item :key="2">
+                        <RankingListComponent :ranking-list="ui.renewalRankingList" />
+                    </el-carousel-item>
+                </el-carousel>
+            </div>
        </div>
    </div>
 </template>
@ -64,6 +89,8 @@ import { useRouter } from "vue-router";
 import { getCallerInfo } from "@/utils/api/localStorage.js";
 import { ElMessage } from "element-plus";
 import { type Archievement, queryDepartmentArchievement } from "@/utils/archievement.js";
+import { RankingListItem } from "@/types/cpicxim/RankingListItem.js";
+import { type RankingListRequest, type RankingListResponse, requestRankingList } from "@/utils/ranking.js";
 import { type Department } from "@/types/cpicxim/Department";
 import ArchievementChart from "@/components/ArchievementChartComponent.vue";
 import ArchievementCompleteRateComponent from "@/components/ArchievementCompleteRateComponent.vue";
@ -73,6 +100,21 @@ import RankingListComponent from "@/components/RankingListComponent.vue";
 import { logout } from "@/utils/account.js";
 import { type TelSaler } from "@/types/cpicxim/TelSaler";

+interface ui
+{
+    currentMonth: string;
+    chartData: number[];
+    totalArchievement: number;
+    attaching_rate: string;
+    insurance_renewal_rate: string; // 续保率
+    leading_reward_gainers: string[]; // 领跑奖
+    advance_reward_gainers: string[]; // 飞跃奖
+    dishonorPersons: string[];
+    showUI: boolean; // 用来刷新页面的开关
+    attachingRankingList: RankingListItem[]; // 坐席车非渗透率榜单
+    renewalRankingList: RankingListItem[];
+};
+
 export default {
    name: "DesktopArchievement",
    components: {
@ -88,7 +130,7 @@ export default {
        const numInChinese = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二",];
        const router = useRouter();
        const callerInfo: TelSaler = getCallerInfo();
-        const ui = reactive({
+        const ui: ui = reactive({
            currentMonth: numInChinese[monthIndex.getMonth() - 1],
            chartData: [0,], // 业绩表
            totalArchievement: 0, // 总业绩
@ -98,8 +140,10 @@ export default {
            advance_reward_gainers: ["",], // 飞跃奖
            dishonorPersons: ["",],
            showUI: true, // 用来刷新页面的开关
+            attachingRankingList: [], // 坐席车非渗透率榜单
+            renewalRankingList: [], // 坐席续保率榜单
        });
-        const timerHandler = 0;
+        let timerHandler = 0;

        const getTotalArchievement = computed(() =>
        {
@ -114,8 +158,8 @@ export default {
            return archievement;
        });

-        // 绘制数据
-        const renderData = ( data:Archievement ) =>
+        // 保存业绩数据
+        const applyArchievementData = ( data: Archievement ) =>
        {
            console.log( "部门业绩数据", data );

@ -134,6 +178,20 @@ export default {
            setTimeout(() => { ui.showUI = true; }, 0 );
        };

+        const applyRankingListData = ( data: RankingListResponse ): void =>
+        {
+            ui.attachingRankingList = data.attachingRateRankingList;
+            ui.renewalRankingList = data.renewalRateRankingList;
+
+            // 更新UI
+            // 先不显示界面，往队列中加入显示队列的回调，让vue刷新组件。
+            ui.showUI = false;
+
+            console.log( "获取排行榜后的ui:", data );
+
+            setTimeout(() => { ui.showUI = true; }, 0 );
+        };
+
        // 退出桌面霸屏
        const logoutDesktopArchievement = () =>
        {
@ -155,32 +213,49 @@ export default {
            router.push( "/login" );
        }

+        /**
+         * 刷新页面
+         */
        const refresh = () =>
        {
-            const deparmentInfo:Department =
+            const deparmentInfo: Department =
            {
                departmentCode: callerInfo.departmentCode,
                departmentName: callerInfo.departmentName,
            };

-            queryDepartmentArchievement( deparmentInfo, renderData );
+            const rankinglistRequest: RankingListRequest =
+            {
+                departmentCode: callerInfo.departmentCode,
+                year: "2023",
+                month: "06",
+            };
+
+            queryDepartmentArchievement( deparmentInfo, applyArchievementData );
+            requestRankingList( rankinglistRequest, applyRankingListData );
        };

+        /**
+         * 加载前
+         */
        onBeforeMount(() =>
        {
            // 设置每10分钟刷新一次
-            // timerHandler = setInterval( refresh, 5000 );
+            timerHandler = setInterval( refresh, 600 * 1000 );

            refresh();
        });

-        onUnmounted(():void =>
+        /**
+         * 页面卸载前
+         */
+        onUnmounted((): void =>
        {
            // 退出页面前关掉定时器
            clearInterval( timerHandler );
        });

-        return { ui, callerInfo, timerHandler, getTotalArchievement, renderData, refresh, logoutDesktopArchievement, };
+        return { ui, callerInfo, timerHandler, getTotalArchievement, renderData: applyArchievementData, refresh, logoutDesktopArchievement, };
    },
 };
 </script>
@ -310,8 +385,26 @@ export default {
    justify-content: center;
    align-items: flex-start;

-    >*+* {
-        margin-top: 15px;
+    // >*+* {
+    //     margin-top: 15px;
+    // }
+    > h1 {
+        font: {
+            family: "FZ-ZHUOHEI";
+            weight: 100;
+            size: 30px;
+        }
+        color: $color-bg-04;
+
+        text-align: center;
+
+        width: 300px;
+    }
+
+    > div {
+        display: block;
+        height: 260px;
+        width: 300px;
    }
 }
 </style>
--- a/code/web/task_schedule/vite.config.js
+++ b/code/web/task_schedule/vite.config.js
@ -2,7 +2,7 @@
 * @Author: Kane
 * @Date: 2023-02-15 09:25:52
 * @LastEditors: Kane
- * @LastEditTime: 2023-03-30 21:09:30
+ * @LastEditTime: 2023-06-07 15:53:53
 * @FilePath: /task_schedule/vite.config.js
 * @Description: 
 * 
@ -18,6 +18,7 @@ export default defineConfig(( command, mode ) =>
    const env = loadEnv( mode, process.cwd(), "" );

    return {
+        server:{ host: "localhost", port: 3000, },
        plugins: [vue(),],
        base: "./",
        resolve: {