CRM页面改造（crm界面）
文章标签：
jquery select设置选中
如果使用若依框架项目做为脚手架，那么我们肯定需要在页面显示中，符合自己公司或者项目的标识才行，需要更换的地方很多，我们依次来解决它
- 浏览器标签页logo标识、标题
- 系统页面中的logo标识、标题
- 去除源码地址 & 文档地址
- 主题风格和菜单图标
- 登录名称及背景图
3.4.1 浏览器标签页icon
我们可以使用在线把一张图片转换为.icon类型的图片: 网站: https://convertio.co/zh/jpg-ico/ 或者https://ico.un80.cn/
找到下载icon图标，替换admin模块中的static文件夹，删除原有的favicon.ico，把新拷贝过来的logo更名为favicon.ico即可
3.4.2 系统页面中的logo、标题
下载你想要的logo图片，替换admin模块中的static文件夹的ruoyi.png，删除原有的ruoyi.png，把新拷贝过来的logo更名为ruoyi.png即可
3.4.3 去除源码 & 文档
找到admin模块下的templates目录下的index.html,把首页标题ruoyi修改为你的标签
3.4.4 登录页面中标题、背景图
登录名称和背景图，我们可以直接找到登录页面进行修改即可
下载对应的背景图片, 拷贝到img目录, 修改css目录下login.css以及login.min.css文件
3.4.5 左侧菜单修改
3.5 首页实现
我们需要在首页显示一些数据报表，效果图如下：
我们先把crm-admin模块的templates目录下的main.html页面拷贝一份，删除main.html页面的<body>标签的内容,main.html页面的内容如下:
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--360浏览器优先以webkit内核解析-->
<title>首页</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
<link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script type="text/javascript">
</script>
</body>
</html>
然后我们查看若依提供的实例演示中报表中的图表组合页面中
选择我们需要的效果，把对应的html代码拷贝到main.html，并修改对应的文本
<div class="row">
<div class="col-sm-3">
<div class="ibox">
<div class="ibox-content">
<h5>新增线索量</h5>
<h1 class="no-margins" th:text="${clueCount}">886,200</h1>
<div class="stat-percent font-bold text-navy">98% <i class="fa fa-bolt"></i></div>
<small>较上日</small>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="ibox">
<div class="ibox-content">
<h5>沟通量</h5>
<h1 class="no-margins">1738,200</h1>
<div class="stat-percent font-bold text-navy">98% <i class="fa fa-bolt"></i></div>
<small>较上日</small>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="ibox">
<div class="ibox-content">
<h5>订单量</h5>
<h1 class="no-margins">200,100</h1>
<div class="stat-percent font-bold text-danger">12% <i class="fa fa-level-down"></i></div>
<small>较上日</small>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="ibox">
<div class="ibox-content">
<h5>退单量</h5>
<h1 class="no-margins">54,200</h1>
<div class="stat-percent font-bold text-danger">24% <i class="fa fa-level-down"></i></div>
<small>较上日</small>
</div>
</div>
</div>
</div>后端的实现， 我们需要修改admin模块的SysIndexController类的main()方法
// 系统介绍
@GetMapping("/system/main")
public String main(ModelMap mmap)
{
mmap.put("version", RuoYiConfig.getVersion());
return "main";
}
在admin模块的pom.xml文件添加hutool工具依赖
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.8.27</version>
</dependency>添加相关数据查询,并保存到ModelMap中
@GetMapping("/system/main")
public String main(ModelMap mmap)
{
mmap.put("version", RuoYiConfig.getVersion());
long todayCount =clueService.selectClueCountByCreateTime(DateUtil.today());
//统计线索数量
long yesterdayCount =clueService.selectClueCountByCreateTime(DateUtil.yesterday().toDateStr());
mmap.put("todayCount",todayCount);
if(todayCount == 0 && yesterdayCount == 0){
mmap.put("clueCountRate",0);
} else if(todayCount != 0 && yesterdayCount == 0){
mmap.put("clueCountRate",100);
}else{
mmap.put("clueCountRate",new DecimalFormat("#.00").format((todayCount-yesterdayCount)*100.0/yesterdayCount));
}
return "main";
}对应的业务层方法
/**
* 查询指定日期添加的线索数量
* @param date
* @return
*/
long selectClueCountByCreateTime(String date);实现类:
@Override
public long selectClueCountByCreateTime(String date) {
return clueMapper.selectCountByCreateTime(date);
}Mapper接口
/**
* 查询指定日期添加的线索数量
* @param date
* @return
*/
long selectCountByCreateTime(String date);sql文件
<select id="selectCountByCreateTime" resultType="long">
select count(0) from clue where create_time = #{createTime}
</select>需要修改main.html,使用Thymeleaf模块的语法
<div class="ibox-content">
<h5>新增线索量</h5>
<h1 class="no-margins" th:text="${todayCount}">886,200</h1>
<div class="" th:class="${clueCountRate}>0?'stat-percent font-bold text-danger':'stat-percent font-bold text-navy'" ><span th:text="${clueCountRate}+'%'">98%</span>
<i th:class="${clueCountRate}>0?'fa fa-level-up':'fa fa-level-down'" ></i></div>
<small>较上日</small>
</div>沟通量,订单量,退单量这三个与新增线索量思路大致一样,这里就不详细讲解, 直接提供代码