编写前端请求代码
This commit is contained in:
		@@ -1,3 +1,4 @@
 | 
			
		||||
NODE_ENV = 'development'
 | 
			
		||||
VITE_URL_VALIDATE_ACCOUNT="http://222.76.244.118:11001/desktop_archievement_backend/account/query_staff_info.do"
 | 
			
		||||
VITE_URL_LOGIN = "http://222.76.244.118:11001/admin-system/account/p13_account_check"
 | 
			
		||||
VITE_URL_DEPARTMENT_ARCHIEVEMENT="http://222.76.244.118:11001/desktop_archievement_backend/archievement/query_department_archievement.do"
 | 
			
		||||
@@ -36,7 +36,7 @@ module.exports = {
 | 
			
		||||
    ],
 | 
			
		||||
    rules: {
 | 
			
		||||
        indent: ["warn", 4,],
 | 
			
		||||
        "space-in-parens": ["error", "always", { exceptions: ["empty",], },],
 | 
			
		||||
        // "space-in-parens": ["error", "always", { exceptions: ["empty",], },],
 | 
			
		||||
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
 | 
			
		||||
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
 | 
			
		||||
        "no-unused-vars": "warn",
 | 
			
		||||
 
 | 
			
		||||
@@ -26,16 +26,16 @@ export default {
 | 
			
		||||
            default: () => [],
 | 
			
		||||
        },
 | 
			
		||||
    },
 | 
			
		||||
    setup( props )
 | 
			
		||||
    setup(props)
 | 
			
		||||
    {
 | 
			
		||||
        const ui = reactive( {
 | 
			
		||||
        } );
 | 
			
		||||
        const ui = reactive({
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        // 设置图表
 | 
			
		||||
        const initCharts = () =>
 | 
			
		||||
        {
 | 
			
		||||
            const chartDom = document.getElementById( "chartWrapper" );
 | 
			
		||||
            const myChart = echarts.init( chartDom as HTMLDivElement );
 | 
			
		||||
            const chartDom = document.getElementById("chartWrapper");
 | 
			
		||||
            const myChart = echarts.init(chartDom as HTMLDivElement);
 | 
			
		||||
            const option = {
 | 
			
		||||
                xAxis: {
 | 
			
		||||
                    type: "category",
 | 
			
		||||
@@ -53,7 +53,7 @@ export default {
 | 
			
		||||
                ],
 | 
			
		||||
            };
 | 
			
		||||
 | 
			
		||||
            option && myChart.setOption( option );
 | 
			
		||||
            option && myChart.setOption(option);
 | 
			
		||||
 | 
			
		||||
            window.onresize = function ()
 | 
			
		||||
            {
 | 
			
		||||
@@ -62,12 +62,12 @@ export default {
 | 
			
		||||
            };
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
        onMounted( () =>
 | 
			
		||||
        onMounted(() =>
 | 
			
		||||
        {
 | 
			
		||||
            initCharts();
 | 
			
		||||
        } );
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        console.log( props );
 | 
			
		||||
        console.log(props);
 | 
			
		||||
 | 
			
		||||
        return { ui, initCharts, props, };
 | 
			
		||||
    },
 | 
			
		||||
 
 | 
			
		||||
@@ -4,8 +4,8 @@
 | 
			
		||||
 * @LastEditors: Kane
 | 
			
		||||
 * @FilePath: /task_schedule/src/components/ArchievementCompleteRateComponent.vue
 | 
			
		||||
 * @Description: 业绩完成率组件
 | 
			
		||||
 * 
 | 
			
		||||
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
 | 
			
		||||
 *
 | 
			
		||||
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
    <div class="complete-rate-wrapper">
 | 
			
		||||
@@ -29,7 +29,7 @@ export default {
 | 
			
		||||
        percentage: {
 | 
			
		||||
            type: String,
 | 
			
		||||
            require: true,
 | 
			
		||||
            default:()=>"0",
 | 
			
		||||
            default: () => "0",
 | 
			
		||||
        },
 | 
			
		||||
        indicator: {
 | 
			
		||||
            type: String,
 | 
			
		||||
@@ -41,7 +41,7 @@ export default {
 | 
			
		||||
        const percentage = Number(props.percentage).valueOf();
 | 
			
		||||
 | 
			
		||||
        const ui = reactive({
 | 
			
		||||
            percentage: percentage,
 | 
			
		||||
            percentage,
 | 
			
		||||
            indicator: props.indicator,
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
@@ -79,6 +79,5 @@ export default {
 | 
			
		||||
        font-size: 12px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -24,23 +24,23 @@
 | 
			
		||||
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "DishonorListComponent",
 | 
			
		||||
  props: {
 | 
			
		||||
    month: {
 | 
			
		||||
      type: String,
 | 
			
		||||
      require: true,
 | 
			
		||||
      default: () => "本",
 | 
			
		||||
    name: "DishonorListComponent",
 | 
			
		||||
    props: {
 | 
			
		||||
        month: {
 | 
			
		||||
            type: String,
 | 
			
		||||
            require: true,
 | 
			
		||||
            default: () => "本",
 | 
			
		||||
        },
 | 
			
		||||
        dishonorPersons: {
 | 
			
		||||
            type: Array,
 | 
			
		||||
            require: true,
 | 
			
		||||
            default: () => [],
 | 
			
		||||
        },
 | 
			
		||||
    },
 | 
			
		||||
    dishonorPersons: {
 | 
			
		||||
      type: Array,
 | 
			
		||||
      require: true,
 | 
			
		||||
      default: () => [],
 | 
			
		||||
    setup()
 | 
			
		||||
    {
 | 
			
		||||
        return {};
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  setup ()
 | 
			
		||||
  {
 | 
			
		||||
    return {};
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -8,21 +8,4 @@
 | 
			
		||||
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
 | 
			
		||||
 */
 | 
			
		||||
 | 
			
		||||
import { type LoginInfo, login } from "../utils/account.js";
 | 
			
		||||
 | 
			
		||||
const loginInfo: LoginInfo = {
 | 
			
		||||
    p13account: "wangwei-202",
 | 
			
		||||
    password: "Kane@1983",
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
login(loginInfo)
 | 
			
		||||
    .then((response: any) =>
 | 
			
		||||
    {
 | 
			
		||||
        const data = response.data ?? {};
 | 
			
		||||
 | 
			
		||||
        console.log(data);
 | 
			
		||||
    })
 | 
			
		||||
    .catch((error: any) =>
 | 
			
		||||
    {
 | 
			
		||||
        console.log(error);
 | 
			
		||||
    });
 | 
			
		||||
import { queryDepartmentArchievement } from "../utils/archievement.js";
 | 
			
		||||
 
 | 
			
		||||
@@ -17,7 +17,7 @@ interface LoginInfo
 | 
			
		||||
    password: string;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
async function login(data: LoginInfo): Promise<AxiosResponse<any, any>>
 | 
			
		||||
async function login( data: LoginInfo ): Promise<AxiosResponse<any, any>>
 | 
			
		||||
{
 | 
			
		||||
    return await instance.request(
 | 
			
		||||
        {
 | 
			
		||||
 
 | 
			
		||||
@@ -10,4 +10,7 @@
 | 
			
		||||
export const API_URL = {
 | 
			
		||||
    // URL_LOGIN: import.meta.env.VITE_URL_LOGIN,
 | 
			
		||||
    URL_LOGIN: "http://222.76.244.118:11001/admin-system/account/p13_account_check",
 | 
			
		||||
 | 
			
		||||
    // URL_DEPARTMENT_ARCHIEVEMENT: import.meta.env.VITE_URL_DEPARTMENT_ARCHIEVEMENT,
 | 
			
		||||
    URL_DEPARTMENT_ARCHIEVEMENT: "http://222.76.244.118:11001/desktop_archievement_backend/archievement/query_department_archievement.do",
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										66
									
								
								code/web/task_schedule/src/utils/archievement.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										66
									
								
								code/web/task_schedule/src/utils/archievement.ts
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,66 @@
 | 
			
		||||
/*
 | 
			
		||||
 * @Author: Kane
 | 
			
		||||
 * @Date: 2023-03-17 15:17:44
 | 
			
		||||
 * @LastEditors: Kane
 | 
			
		||||
 * @FilePath: /task_schedule/src/utils/archievement.ts
 | 
			
		||||
 * @Description: 请求业绩数据
 | 
			
		||||
 *
 | 
			
		||||
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
 | 
			
		||||
 */
 | 
			
		||||
import { service as instance } from "./api/request.js";
 | 
			
		||||
import { API_URL } from "./api/config.js";
 | 
			
		||||
// import { type AxiosResponse } from "axios";
 | 
			
		||||
 | 
			
		||||
interface Archievement
 | 
			
		||||
{
 | 
			
		||||
    success: boolean;
 | 
			
		||||
    message: string;
 | 
			
		||||
    total_archievement: number;
 | 
			
		||||
    mensual_archievement_list: string[];
 | 
			
		||||
    insurance_renewal_rate: string;
 | 
			
		||||
    attaching_rate: string;
 | 
			
		||||
    leading_reward_gainers: string[];
 | 
			
		||||
    advance_reward_gainers: string[];
 | 
			
		||||
    backward_list: string[];
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function queryDepartmentArchievement( render: any ): void
 | 
			
		||||
{
 | 
			
		||||
    instance.request( {
 | 
			
		||||
        method: "post",
 | 
			
		||||
        url: API_URL.URL_DEPARTMENT_ARCHIEVEMENT,
 | 
			
		||||
    } )
 | 
			
		||||
        .then( ( response ) =>
 | 
			
		||||
        {
 | 
			
		||||
            const archievement: Archievement = {
 | 
			
		||||
                success: false,
 | 
			
		||||
                message: "",
 | 
			
		||||
                total_archievement: 0,
 | 
			
		||||
                mensual_archievement_list: [],
 | 
			
		||||
                insurance_renewal_rate: "",
 | 
			
		||||
                attaching_rate: "",
 | 
			
		||||
                leading_reward_gainers: [],
 | 
			
		||||
                advance_reward_gainers: [],
 | 
			
		||||
                backward_list: [],
 | 
			
		||||
            };
 | 
			
		||||
 | 
			
		||||
            const data = response.data ?? {};
 | 
			
		||||
 | 
			
		||||
            archievement.success = data.success ?? false;
 | 
			
		||||
            archievement.message = data.message ?? "";
 | 
			
		||||
            archievement.mensual_archievement_list = data.mensual_archievement_list ?? [];
 | 
			
		||||
            archievement.insurance_renewal_rate = data.insurance_renewal_rate ?? "0.0";
 | 
			
		||||
            archievement.attaching_rate = data.attaching_rate ?? "0.0";
 | 
			
		||||
            archievement.leading_reward_gainers = data.leading_reward_gainers ?? [];
 | 
			
		||||
            archievement.advance_reward_gainers = data.advance_reward_gainers ?? [];
 | 
			
		||||
            archievement.backward_list = data.backward_list ?? [];
 | 
			
		||||
 | 
			
		||||
            render( data );
 | 
			
		||||
        } )
 | 
			
		||||
        .catch( ( error ) =>
 | 
			
		||||
        {
 | 
			
		||||
            console.log( error );
 | 
			
		||||
        } );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export { queryDepartmentArchievement, type Archievement };
 | 
			
		||||
@@ -53,6 +53,7 @@ import { computed, reactive } from "vue";
 | 
			
		||||
import { useRouter } from "vue-router";
 | 
			
		||||
import { loadStaffInfo } from "@/utils/api/localStorage.js";
 | 
			
		||||
import { ElMessage } from "element-plus";
 | 
			
		||||
import { type Archievement, queryDepartmentArchievement } from "@/utils/archievement.js";
 | 
			
		||||
import ArchievementChart from "@/components/ArchievementChartComponent.vue";
 | 
			
		||||
import ArchievementCompleteRateComponent from "@/components/ArchievementCompleteRateComponent.vue";
 | 
			
		||||
import HonorListComponent from "@/components/HonorListComponent.vue";
 | 
			
		||||
@@ -70,35 +71,50 @@ export default {
 | 
			
		||||
    {
 | 
			
		||||
        const router = useRouter();
 | 
			
		||||
        const staffInfo = loadStaffInfo();
 | 
			
		||||
        const ui = reactive( {
 | 
			
		||||
        const ui = reactive({
 | 
			
		||||
            chartData: [200, 230, 224, 218, 135, 147, 260, 800,],
 | 
			
		||||
            totalArchievement: 120000000,
 | 
			
		||||
            dishonorPersons: ["张三", "李四",],
 | 
			
		||||
        } );
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        const getTotalArchievement = computed( () =>
 | 
			
		||||
        const getTotalArchievement = computed(() =>
 | 
			
		||||
        {
 | 
			
		||||
            const cnyFormat = new Intl.NumberFormat( "zh-cn",
 | 
			
		||||
            const cnyFormat = new Intl.NumberFormat("zh-cn",
 | 
			
		||||
                {
 | 
			
		||||
                    style: "currency",
 | 
			
		||||
                    currency: "CNY",
 | 
			
		||||
                    minimumFractionDigits: 0,
 | 
			
		||||
                } );
 | 
			
		||||
            const archievement = cnyFormat.format( ui.totalArchievement );
 | 
			
		||||
                });
 | 
			
		||||
            const archievement = cnyFormat.format(ui.totalArchievement);
 | 
			
		||||
 | 
			
		||||
            return archievement;
 | 
			
		||||
        } );
 | 
			
		||||
        });
 | 
			
		||||
 | 
			
		||||
        const requestArchievement = () =>
 | 
			
		||||
        {
 | 
			
		||||
            const archievement: Archievement = {
 | 
			
		||||
                success: false,
 | 
			
		||||
                message: "",
 | 
			
		||||
                total_archievement: 0,
 | 
			
		||||
                mensual_archievement_list: [],
 | 
			
		||||
                insurance_renewal_rate: "",
 | 
			
		||||
                attaching_rate: "",
 | 
			
		||||
                leading_reward_gainers: [],
 | 
			
		||||
                advance_reward_gainers: [],
 | 
			
		||||
                backward_list: [],
 | 
			
		||||
            };
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
        // 检查存储的登录信息,不存在则返回登录页面
 | 
			
		||||
        if ( staffInfo.P13UID === "" )
 | 
			
		||||
        if (staffInfo.P13UID === "")
 | 
			
		||||
        {
 | 
			
		||||
            ElMessage( {
 | 
			
		||||
            ElMessage({
 | 
			
		||||
                message: "登录信息失效,请重新登录!",
 | 
			
		||||
                type: "success",
 | 
			
		||||
                center: true,
 | 
			
		||||
            } );
 | 
			
		||||
            });
 | 
			
		||||
 | 
			
		||||
            router.push( "/login" );
 | 
			
		||||
            router.push("/login");
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        return { ui, getTotalArchievement, };
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user