[YM]课设-C#-WebApi-Vue-员工管理系统 (七)员工统计表

夜喵YM

于 2024-09-02 21:15:57 发布

阅读量544

点赞数 16

分类专栏： [YM]课设文章标签： vue.js 前端 javascript c# 开发语言

本文链接：https://blog.csdn.net/2302_80481841/article/details/141829156

版权

[YM]课设专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前端：

注：这里主要解释下echarts组件，需要一定的Vue基础

emmmmm

明显能看到上面写“对不起暂未开发”

是的

这个是博主自己加上去的

but

这个统计表也是类似于Element UI的小组件

Element：Element - 网站快速成型工具

~~（element是饿了么公司的，对，就是外卖那个）~~

Echarts：Examples - Apache ECharts

这边我们主要讲解echarts

打开vscode，在终端中输入

npm install echarts

进行下载echarts包

打开网站，找到饼状图，选择第一个即可

这些都是可以设置的

点开完整代码

~~化作cv工程师~~

放在刚刚的前端页面中

注意要放在div中

关于如何在前端中使用可以看前端的源码

这就涉及到一点Vue的知识

如果以后要涉及前端，可以借此学习学习

否者读懂，了解即可

下面我们从后端抓取信息到前端渲染

后端：

打开我们心爱的vscode

我们新建一个ReportController

由于我们是对员工进行统计

沿用emp的service，mapper即可

大大提高了代码的复用性

这就是我们三层架构的优势

后期扩展显得极为容易

将empService进行注入

启动前端，查看一下请求地址

复制这个请求路径

一个饼状图一个条形图

再进行区分一下

[HttpGet]
[Route("/report/emp-report/bie")]
public ResultModel GetBie(){

}

[HttpGet]
[Route("/report/emp-report/bar")]
public ResultModel GetBar(){
    
}

饼状图主要是统计男性员工和女性员工的人数

条形图主要是统计各个职业员工的人数

为了方便我这边定义一个实体类去存放

~~当然只有男女员工感觉没必要也可以不这样做~~

controller：

service：

声明：

service实现类实现：

public List<EmpReportModel> FindSex()
{
    List<EmpModel> list=empMapper.FindAll();
    int ManCnt=list.Where(u=>u.gender==1).Count();
    int WomanCnt=list.Where(u=>u.gender==2).Count();
    List<EmpReportModel> res=[new EmpReportModel("男性员工",ManCnt), new EmpReportModel("女性员工",WomanCnt)];
    return res;
}

public List<int> FindJob()
{
    List<EmpModel> list=empMapper.FindAll();
    List<int>res=new List<int>();
    for(int i=1;i<=5;i++){
        int cnt=list.Where(c=>c.job==i).Count();
        res.Add(cnt);
    }
    return res;
}

从mapper中获取到多有信息然后过滤即可

下边FindJob函数这i从1到5是由于我这边只设置了5个职业

已经定了

直接拿员工数量即可

这边就是个人发挥了