通过图表的形式展示，统计的数据都来自订单模块，因此我们在 该模块封装好数据，在统计模块通过feign的形式获取数据。
先编写对应sql语句，根据名称查询数量，条件是开始时间结束时间
SELECT reserve_date,count(*)
from order_info
WHERE hosname LIKE ?
AND reserve_date >= ? AND reserve_date <= ?
GROUP BY reserve_date
ORDER BY reserve_date
在order模块编写对应xml文件
<select id="selectOrderCount" resultType="com.lzq.yygh.vo.order.OrderCountQueryVo">
select reserve_date as reserveDate, count(reserve_date) as count
from order_info
<where>
<if test="hosname != null and hosname != ''">
and hosname like CONCAT('%',#{hosname},'%')
</if>
<if test="reserveDateBegin != null and reserveDateBegin != ''">
and reserve_date >= #{reserveDateBegin}
</if>
<if test="reserveDateEnd != null and reserveDateEnd != ''">
and reserve_date <= #{reserveDateEnd}
</if>
and is_deleted = 0
</where>
group by reserve_date
order by reserve_date
</select>service层
/**
* 订单统计
*/
Map<String, Object> getCountMap(OrderCountQueryVo orderCountQueryVo);
@Override
public Map<String, Object> getCountMap(OrderCountQueryVo orderCountQueryVo) {
//查询数据list集合
List<OrderCountVo> orderCountVos = baseMapper.selectOrderCount(orderCountQueryVo);
//将集合封装 一个放日期 一个放数据
//通过流遍历取日期 在转成集合
List<String> dateList = orderCountVos.stream().map(OrderCountVo::getReserveDate).collect(Collectors.toList());
//对应数量
List<Integer> countList = orderCountVos.stream().map(OrderCountVo::getCount).collect(Collectors.toList());
Map<String, Object> map = new HashMap<>();
map.put("dateList", dateList);
map.put("countList", countList);
return map;
}控制层
@ApiOperation(value = "获取订单统计数据")
@PostMapping("inner/getCountMap")
public Map<String, Object> getCountMap(@RequestBody OrderCountQueryVo orderCountQueryVo){
return orderInfoService.getCountMap(orderCountQueryVo);
}编译时不加载xml文件，可以把xml文件放在resource下，或者编译后将xml复制到target文件下
通过配置让编译时加载java下的xml文件，配置文件
mybatis-plus.mapper-locations=classpath:com/lzq/yygh/mapper/xml/*.xml
pom文件
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.yml</include>
<include>**/*.properties</include>
<include>**/*.xml</include>
</includes>
<filtering>false</filtering>
</resource>
<resource>
<directory>src/main/resources</directory>
<includes> <include>**/*.yml</include>
<include>**/*.properties</include>
<include>**/*.xml</include>
</includes>
<filtering>false</filtering>
</resource>
</resources>
</build>要使用远程调用，创建service_order_client，添加feign接口
@FeignClient(value = "service-orders")
@Repository
public interface OrderFeignClient {
/**
* 获取订单统计数据
*/
@PostMapping("/api/order/orderInfo/inner/getCountMap")
Map<String, Object> getCountMap(@RequestBody OrderCountQueryVo orderCountQueryVo);
}创建service_statistics模块
<dependencies>
<dependency>
<groupId>com.lzq</groupId>
<artifactId>service_order_client</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
</dependencies>配置文件
# 服务端口
server.port=8209
# 服务名
spring.application.name=service-sta
# 环境设置：dev、test、prod
spring.profiles.active=dev
# nacos服务地址
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8888启动类
@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)
@EnableDiscoveryClient
@EnableFeignClients(basePackages = {"com.lzq"})
@ComponentScan(basePackages = {"com.lzq"})
public class ServiceStatisticsApplication {
public static void main(String[] args) {
SpringApplication.run(ServiceStatisticsApplication.class, args);
}
}控制层
@Api(tags = "统计管理接口")
@RestController
@RequestMapping("/admin/statistics")
public class StatisticsController {
@Autowired
private OrderFeignClient orderFeignClient;
@ApiOperation(value = "获取订单统计数据")
@GetMapping("getCountMap")
public R getCountMap(@ApiParam(name = "orderCountQueryVo",
value = "查询对象", required = false)OrderCountQueryVo orderCountQueryVo) {
Map<String, Object> map = orderFeignClient.getCountMap(orderCountQueryVo);
return R.ok().data(map);
}
}在编写对应的网关
前端安装插件 ECHARTS
npm install --save echarts@4.1.0
添加路由，router，index.js
{
path: '/statistics',
component: Layout,
redirect: '/statistics/order/index',
name: 'BasesInfo',
meta: { title: '统计管理', icon: 'table' },
alwaysShow: true,
children: [
{
path: 'order/index',
name: '预约统计',
component: () =>import('@/views/yygh/sta/index'),
meta: { title: '预约统计' }
}
]
},创建对应页面，封装api请求
import request from '@/utils/request'
const api_name = '/admin/statistics'
export default {
getCountMap(searchObj) {
return request({
url: `${api_name}/getCountMap`,
method: 'get',
params: searchObj
})
}
}对应页面
<template>
<div class="app-container">
<!--表单-->
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input v-model="searchObj.hosname" placeholder="点击输入医院名称"/>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="searchObj.reserveDateBegin"
type="date"
placeholder="选择开始日期"
value-format="yyyy-MM-dd"/>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="searchObj.reserveDateEnd"
type="date"
placeholder="选择截止日期"
value-format="yyyy-MM-dd"/>
</el-form-item>
<el-button
:disabled="btnDisabled"
type="primary"
icon="el-icon-search"
@click="showChart()">查询</el-button>
</el-form>
<div class="chart-container">
<div id="chart" ref="chart"
class="chart" style="height:500px;width:100%"/>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
import statisticsApi from '@/api/yygh/sta'
export default {
data() {
return {
searchObj: {
hosname: '',
reserveDateBegin: '',
reserveDateEnd: ''
},
btnDisabled: false,
chart: null,
title: '',
xData: [], // x轴数据
yData: [] // y轴数据
}
},
methods: {
// 初始化图表数据
showChart() {
statisticsApi.getCountMap(this.searchObj).then(response => {
this.yData = response.data.countList
this.xData = response.data.dateList
this.setChartData()
})
},
setChartData() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'))
// 指定图表的配置项和数据
var option = {
title: {
text: this.title + '挂号量统计'
},
tooltip: {},
legend: {
data: [this.title]
},
xAxis: {
data: this.xData
},
yAxis: {
minInterval: 1
},
series: [{
name: this.title,
type: 'line',
data: this.yData
}]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
},
}
}
</script>