将数据库活动表的4种信息状态以 echarts表格 展示出来(活动总数、已审核活动数、待审核活动数、未审核活动数)
①统计数据库中要展示的数据量,例如时间- -数量
1)直接通过数据库语句查询出展示的数据。优点:在数据量不大的时候,容易实现需求,保证了数据的及时性和准确性;缺点:数据量大,每次查看页面都需要从数据库中先统计数量,在查出并显示数据
2)通过定时任务,将需要展示的数据查询出来并保存在另一张新表中,在每天固定时间查询数据并保存在数据库中。优点:不需要频繁操作数据库,性能得到优化;缺点:实现起来比较复杂,无法及时获取数据库中准确的信息。
②后端使用定时器(或者加上canal同步数据)
③前端使用vue+echarts显示数据
建立活动数据统计表(将活动表中数量按照日期时间进行统计,并以 统计日期----数据 格式保存到统计表中)
活动统计表如上图所示
活动统计最终设计效果如上图echarts图表展示
前端接收的数据格式如上图:xAxis里日期数据为json数组;series里数据格式为两个json对象,对象包括名称和data数据,data数据也为json数组
前端 | 后端 |
---|---|
前端json | 后端字符串 |
json对象{ “name”:“zhangsan”,“age”:11} | 对象 或者 map集合 |
json数组[1,2,3] 或者 [“aa”,“bb”] | list集合 |
①前端需要接收两部分数据:日期 和 日期对应数量
②前端要求传入的为 json数组 结构,对应后端java代码是 list集合
③后端创建两个list集合,一个 日期list,一个 数量list
Controller层
@RestController
@RequestMapping("/count-activity")
@CrossOrigin
@Api(tags = "数据统计")
public class CountActNumController {
@Autowired
private ActivityAdminService activitiesAdminService;
@Autowired
private StatisticsDailyService statisticsDailyService;
@ApiOperation(value= "根据日期统计当前日期的各项信息,生成统计数据")
@GetMapping(value = "data/{day}")
public R Activities(@PathVariable("day") String day){
activitiesAdminService.createActStatisticsByDay(day);
return R.ok();
}
@ApiOperation(value = "活动图表显示,返回两部分数据,日期json数组,数量json数组")
@GetMapping("showData/{begin}/{end}")
public R showData(@PathVariable String begin,
@PathVariable String end) {
Map<String,Object> map = statisticsDailyService.getActShowData(begin,end);
return R.ok().data(map);
}
}
Service层
@Service
public class StatisticsDailyServiceImpl implements StatisticsDailyService {
@Autowired
private StatisticsDailyMapper statisticsDailyMapper;
@Override
public Map<String, Object> getActShowData(String begin, String end) {
//根据条件查询活动统计表中对应数据
List<StatisticsActDaily> staList = statisticsDailyMapper.selectActList(begin,end);
//因为返回有两部分数据:日期 和 日期对应数量
//前端要求数组json结构,对应后端java代码是list集合
//创建两个list集合,一个日期list,一个数量list
List<String> dateInformationList = new ArrayList<>();
List<StatisticsDailyVO> typeNumList = new ArrayList<>();
//创建需要展示类型的对象,对应4种活动类型统计
StatisticsDailyVO countAllActNumDailyVO = new StatisticsDailyVO();
StatisticsDailyVO countCheckedActNumDailyVO = new StatisticsDailyVO();
StatisticsDailyVO countCheckingActNumVO = new StatisticsDailyVO();
StatisticsDailyVO countUncheckedActNumVO = new StatisticsDailyVO();
//创建4个list集合,分别存储4种活动的统计数量
List<Integer> countAllActNum = new ArrayList<>();
List<Integer> countCheckedActNum = new ArrayList<>();
List<Integer> countCheckingActNum = new ArrayList<>();
List<Integer> countUncheckedActNum = new ArrayList<>();
//遍历查询所有数据list集合,进行封装
for (int i = 0; i < staList.size(); i++) {
StatisticsActDaily daily = staList.get(i);
//封装日期list集合
dateInformationList.add(daily.getDateCalculated());
//封装对应数量
countAllActNum.add(daily.getAllActNum());
countCheckedActNum.add(daily.getCheckedActNum());
countCheckingActNum.add(daily.getCheckingActNum());
countUncheckedActNum.add(daily.getUncheckedActNum());
}
//将不同的活动名称与活动对应数据添加到数量list进行封装
countAllActNumDailyVO.setCountName(CountNameEnum.ALL_NUM_COUNT.getTypeName());
countAllActNumDailyVO.setNumber(countAllActNum);
typeNumList.add(countAllActNumDailyVO);
countCheckedActNumDailyVO.setCountName(CountNameEnum.CHECKED_NUM_COUNT.getTypeName());
countCheckedActNumDailyVO.setNumber(countCheckedActNum);
typeNumList.add(countCheckedActNumDailyVO);
countCheckingActNumVO.setCountName(CountNameEnum.CHECKING_NUM_COUNT.getTypeName());
countCheckingActNumVO.setNumber(countCheckingActNum);
typeNumList.add(countCheckingActNumVO);
countUncheckedActNumVO.setCountName(CountNameEnum.UNCHECK_NUM_COUNT.getTypeName());
countUncheckedActNumVO.setNumber(countUncheckedActNum);
typeNumList.add(countUncheckedActNumVO);
//把封装之后两个list集合放到map集合,进行返回
Map<String, Object> map = new HashMap<>();
map.put("xAxis",dateInformationList);
map.put("series",typeNumList);
return map;
}
Mapper层
@Repository
public interface StatisticsDailyMapper {
/**
* 网站统计信息
* @param begin
* @param end
* @return
*/
List<StatisticsActDaily> selectActList(@Param("begin") String begin, @Param("end") String end);
}
Pojo类
@Data
@ApiModel(value="活动表统计信息", description="网站统计日数据")
public class StatisticsActDaily implements Serializable {
private static final long serialVersionUID = 1L;
@ApiModelProperty(value = "主键")
private Integer id;
@ApiModelProperty(value = "统计日期")
private String dateCalculated;
@ApiModelProperty(value = "活动总数")
private Integer allActNum;
@ApiModelProperty(value = "已审核数")
private Integer checkedActNum;
@ApiModelProperty(value = "正在审核数")
private Integer checkingActNum;
@ApiModelProperty(value = "未审核数")
private Integer uncheckedActNum;
@ApiModelProperty(value = "创建时间")
private Date gmtCreate;
@ApiModelProperty(value = "更新时间")
private Date gmtModified;
}
@Data
@ApiModel(value="统计VO", description="统计VO")
public class StatisticsDailyVO implements Serializable {
private static final long serialVersionUID = 1L;
@ApiModelProperty(value = "统计名称")
private String countName;
@ApiModelProperty(value = "数量")
private List<Integer> number;
}
Enum类
@Getter
@ToString
public enum CountNameEnum {
ALL_NUM_COUNT("当日发布总数"),
CHECKED_NUM_COUNT("已审核数"),
CHECKING_NUM_COUNT("待审核数"),
UNCHECK_NUM_COUNT("未审核数")
;
private String typeName;
private CountNameEnum(String typeName){
this.typeName = typeName;
}
}
测试接口得到返回数据
{
"success": true,
"code": 20000,
"message": "成功",
"data": {
"xAxis": [
"2020-05-02","2020-05-03","2020-05-04","2020-05-06","2020-05-07","2020-05-08"
],
"series": [
{
"countName": "当日发布总数",
"number": [494,484,414,461,441,398]
},
{
"countName": "已审核数",
"number": [165,143,155,140,186,120]
},
{
"countName": "待审核数",
"number": [171,147,106,192,139,166]
},
{
"countName": "未审核数",
"number": [158,194,153,129,116,112]
}
]
}
}
前端vue部分代码:
methods: {
showChart() {
if(this.searchObj.begin == undefined & this.searchObj.end == undefined){
this.$message.error("每一项不能为空");
}else{
actCharts.getActCharts(this.searchObj).then(res => {
this.yData = res.data.series
this.xData = res.data.xAxis
//调用下面生成图表的方法,改变值
this.setChart()
})
}
},
xAxis: {
data: this.xData,
},
// 系列列表。每个系列通过 type 决定自己的图表类型
series: [
{
// 系列中的数据内容数组
data: this.yData[1].number,
name: this.yData[1].countName,
// 折线图
type: 'bar'
},
{
// 系列中的数据内容数组
data: this.yData[2].number,
name: this.yData[2].countName,
// 折线图
type: 'bar',
},
{
// 系列中的数据内容数组
data: this.yData[3].number,
name: this.yData[3].countName,
// 折线图
type: 'bar',
},
{
// 系列中的数据内容数组
data: this.yData[0].number,
name: this.yData[0].countName,
// 折线图
type: 'line',
}
]
}
最终效果:
文章浏览阅读101次。4.class可以有⽆参的构造函数,struct不可以,必须是有参的构造函数,⽽且在有参的构造函数必须初始。2.Struct适⽤于作为经常使⽤的⼀些数据组合成的新类型,表示诸如点、矩形等主要⽤来存储数据的轻量。1.Class⽐较适合⼤的和复杂的数据,表现抽象和多级别的对象层次时。2.class允许继承、被继承,struct不允许,只能继承接⼝。3.Struct有性能优势,Class有⾯向对象的扩展优势。3.class可以初始化变量,struct不可以。1.class是引⽤类型,struct是值类型。
文章浏览阅读586次。想实现的功能是点击顶部按钮之后按关键字进行搜索,已经可以从服务器收到反馈的json信息,但从json信息的解析开始就会闪退,加载listview也不知道行不行public abstract class loadlistview{public ListView plv;public String js;public int listlength;public int listvisit;public..._rton转json为什么会闪退
文章浏览阅读219次。如何使用wordnet词典,得到英文句子的同义句_get_synonyms wordnet
文章浏览阅读521次。系统项目报表导出 导出任务队列表 + 定时扫描 + 多线程_积木报表 多线程
文章浏览阅读1.1k次,点赞9次,收藏9次。使用AJAX技术的好处之一是它能够提供更好的用户体验,因为它允许在不重新加载整个页面的情况下更新网页的某一部分。另外,AJAX还使得开发人员能够创建更复杂、更动态的Web应用程序,因为它们可以在后台与服务器进行通信,而不需要打断用户的浏览体验。在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种常用的技术,用于在不重新加载整个页面的情况下,从服务器获取数据并更新网页的某一部分。使用AJAX,你可以创建异步请求,从而提供更快的响应和更好的用户体验。_ajax 获取http数据
文章浏览阅读2.8k次。登录退出、修改密码、关机重启_字符终端
文章浏览阅读3.8k次,点赞3次,收藏51次。前段时间看到一位发烧友制作的超声波雷达扫描神器,用到了Arduino和Processing,可惜啊,我不会Processing更看不懂人家的程序,咋办呢?嘿嘿,所以我就换了个思路解决,因为我会一点Python啊,那就动手吧!在做这个案例之前先要搞明白一个问题:怎么将Arduino通过超声波检测到的距离反馈到Python端?这个嘛,我首先想到了串行通信接口。没错!就是串口。只要Arduino将数据发送给COM口,然后Python能从COM口读取到这个数据就可以啦!我先写了一个测试程序试了一下,OK!搞定_超声波扫描建模 python库
文章浏览阅读4.2k次。端—端加密指信息由发送端自动加密,并且由TCP/IP进行数据包封装,然后作为不可阅读和不可识别的数据穿过互联网,当这些信息到达目的地,将被自动重组、解密,而成为可读的数据。不可逆加密算法的特征是加密过程中不需要使用密钥,输入明文后由系统直接经过加密算法处理成密文,这种加密后的数据是无法被解密的,只有重新输入明文,并再次经过同样不可逆的加密算法处理,得到相同的加密密文并被系统重新识别后,才能真正解密。2.使用时,加密者查找明文字母表中需要加密的消息中的每一个字母所在位置,并且写下密文字母表中对应的字母。_凯撒加密
文章浏览阅读5.7k次。CIP报文解析常用到的几个字段:普通类型服务类型:[0x00], CIP对象:[0x02 Message Router], ioi segments:[XX]PCCC(带cmd和func)服务类型:[0x00], CIP对象:[0x02 Message Router], cmd:[0x101], fnc:[0x101]..._cip协议embedded_service_error
文章浏览阅读2.4k次,点赞9次,收藏13次。有时候我们在MFC项目开发过程中,需要用到一些微软已经提供的功能,如VC++使用EXCEL功能,这时候我们就能直接通过VS2019到如EXCEL.EXE方式,生成对应的OLE头文件,然后直接使用功能,那么,我们上篇文章中介绍了vs2017及以前的版本如何来添加。但由于微软某些方面考虑,这种方式已被放弃。从上图中可以看出,这一功能,在从vs2017版本15.9开始,后续版本已经删除了此功能。那么我们如果仍需要此功能,我们如何在新版本中添加呢。_vs添加mfc库
文章浏览阅读785次。用ac3编码,执行编码函数时报错入如下:[ac3 @ 0x7fed7800f200] frame_size (1536) was not respected for anon-last frame (avcodec_encode_audio2)用ac3编码时每次送入编码器的音频采样数应该是1536个采样,不然就会报上述错误。这个数字并非刻意固定,而是跟ac3内部的编码算法原理相关。全网找不到,国内音视频之路还有很长的路,音视频人一起加油吧~......_frame_size (1024) was not respected for a non-last frame
文章浏览阅读230次,点赞2次,收藏2次。创建Android应用程序一个项目里面可以有很多模块,而每一个模块就对应了一个应用程序。项目结构介绍_在安卓移动应用开发中要在活动类文件中声迷你一个复选框变量