【Vue】分组类型排名查询功能
一、书接上回：
https://www.cnblogs.com/mindzone/p/17749725.html
这个效果被否决了，产品要求一定要UI的来，UI效果如图：
按人为主体的时候，固定有4个类型，点击每个类型的下拉，展示该类型的权重分排名记录
二、实现思路：
最终实现了，麻烦点多
后端的问题：
1、一次查询，调用3段SQL，先按车辆分组查询，再查询对应的4个类型权重分最高的，最后按每个类型查询排名
2、因为类型固定是4个，所以记录数被影响了，每页必须除以4，而返回的总记录又乘以4，第一个分组的SQL 要做好分页计算处理
3、查询条件的兼容性问题，这里我对排名的记录不设置查询条件，因为内嵌的SQL做逻辑不处理，可以做，麻烦就是
前端问题：
1、表格组件，不使用树表格属性，改用了展开行，树表格只能在首列点击下拉
2、不能合并单元格，因为点击查看排名记录，单元格行数动态的，合并计算会出BUG
3、内嵌的排名表格不能展示表头字段名称，并且和主表格的展示要一致
三、实现步骤：
编写SQL
1、主查询SQL即对车牌号分组，这里GROUP BY 语句用Wrapper对象写的
/**
* @author OnCloud9
* @date 2023/10/10 19:49
* @description 以车牌分组排序进行查询
* @params [page, query]
* @return com.baomidou.mybatisplus.core.metadata.IPage<cn.ymcd.perception.basedata.statistic.dto.AcaBeLpresultDTO>
*/
@Select(
"SELECT license_plate, COUNT(1) AS count, MAX( update_date ) AS ud " +
"FROM aca_be_lpresult " +
" ${ew.customSqlSegment} "
)
IPage<AcaBeLpresultDTO> getBleCarBasicPageLpPrimary(IPage<AcaBeLpresultDTO> page, @Param(Constants.WRAPPER) QueryWrapper<AcaBeLpresultDTO> query);
2、对每个车牌查询4种蓝牙类型权重分最高的记录：
先从简单的具体某个蓝牙类型来查询，指定车牌号和类型，对权重分降序，取第一个即可
SELECT * FROM aca_be_lpresult WHERE license_plate = '赣AK16M5' AND type IN(2, 66)
ORDER BY score DESC LIMIT 1
有可能在这个类型下，没有这个蓝牙类型的记录，但是要求固定有个类型的展示，所以一定需要一个记录展示
先写一个车牌号作为临时表，这个临时表本身做一条记录填充
(SELECT '赣AK16M5' AS license_plate) AS temp2
以临时表为主表，连接上面的类型的权重分最高记录，就可以保证有一条记录存在
如果记录为空，则填充默认值
SELECT
IFNULL(type2.id, '') AS id,
IFNULL(type2.mac, '') AS mac,
'手表蓝牙' AS typeName2,
IFNULL(type2.ble_name, '') AS ble_name,
temp2.license_plate,
IFNULL(type2.car_type, NULL) AS car_type,
IFNULL(type2.times, 0) AS times,
IFNULL(type2.days_count, 0) AS days_count,
IFNULL(type2.station_count, 0) AS station_count,
IFNULL(type2.adjoint_count, 0) AS adjoint_count,
IFNULL(type2.mac_law_count, 0) AS mac_law_count,
IFNULL(type2.score, 0) AS score,
IFNULL(type2.create_date, NULL) AS create_date,
IFNULL(type2.update_date, NULL) AS update_date,
IFNULL(type2.timeline, NULL) AS timeline
FROM (SELECT '赣AK16M5' AS license_plate) AS temp2 LEFT JOIN
(SELECT id, mac, type, ble_name, license_plate, car_type, times, days_count, station_count, adjoint_count, mac_law_count, score, create_date, update_date, timeline
FROM aca_be_lpresult WHERE license_plate = '赣AK16M5' AND type = 7
ORDER BY score DESC LIMIT 1) AS type2 ON temp2.license_plate = type2.license_plate;
为空的查询结果：
+----+-----+-----------+----------+---------------+----------+-------+------------+---------------+---------------+---------------+-------+-------------+-------------+----------+
| id | mac | typeName2 | ble_name | license_plate | car_type | times | days_count | station_count | adjoint_count | mac_law_count | score | create_date | update_date | timeline |
+----+-----+-----------+----------+---------------+----------+-------+------------+---------------+---------------+---------------+-------+-------------+-------------+----------+
| | | 手表蓝牙 | | 赣AK16M5 | NULL | 0 | 0 | 0 | 0 | 0 | 0.00 | NULL | NULL | NULL |
+----+-----+-----------+----------+---------------+----------+-------+------------+---------------+---------------+---------------+-------+-------------+-------------+----------+
1 row in set (0.08 sec)
使用UNION 关键字对4个类型的查询合并成一个结果
SELECT
IFNULL(type2.id, '') AS id,
IFNULL(type2.mac, '') AS mac,
'手机蓝牙' AS typeName2,
IFNULL(type2.ble_name, '') AS ble_name,
temp2.license_plate,
IFNULL(type2.car_type, NULL) AS car_type,
IFNULL(type2.times, 0) AS times,
IFNULL(type2.days_count, 0) AS days_count,
IFNULL(type2.station_count, 0) AS station_count,
IFNULL(type2.adjoint_count, 0) AS adjoint_count,
IFNULL(type2.mac_law_count, 0) AS mac_law_count,
IFNULL(type2.score, 0) AS score,
IFNULL(type2.create_date, NULL) AS create_date,
IFNULL(type2.update_date, NULL) AS update_date,
IFNULL(type2.timeline, NULL) AS timeline
FROM (SELECT '赣AK16M5' AS license_plate) AS temp2 LEFT JOIN
(SELECT id, mac, type, ble_name, license_plate, car_type, times, days_count, station_count, adjoint_count, mac_law_count, score, create_date, update_date, timeline
FROM aca_be_lpresult WHERE license_plate = '赣AK16M5' AND type IN(2, 66)
ORDER BY score DESC LIMIT 1) AS type2 ON temp2.license_plate = type2.license_plate
UNION
SELECT
IFNULL(type2.id, '') AS id,
IFNULL(type2.mac, '') AS mac,
'手表蓝牙' AS typeName2,
IFNULL(type2.ble_name, '') AS ble_name,
temp2.license_plate,
IFNULL(type2.car_type, NULL) AS car_type,
IFNULL(type2.times, 0) AS times,
IFNULL(type2.days_count, 0) AS days_count,
IFNULL(type2.station_count, 0) AS station_count,
IFNULL(type2.adjoint_count, 0) AS adjoint_count,
IFNULL(type2.mac_law_count, 0) AS mac_law_count,
IFNULL(type2.score, 0) AS score,
IFNULL(type2.create_date, NULL) AS create_date,
IFNULL(type2.update_date, NULL) AS update_date,
IFNULL(type2.timeline, NULL) AS timeline
FROM (SELECT '赣AK16M5' AS license_plate) AS temp2 LEFT JOIN
(SELECT id, mac, type, ble_name, license_plate, car_type, times, days_count, station_count, adjoint_count, mac_law_count, score, create_date, update_date, timeline
FROM aca_be_lpresult WHERE license_plate = '赣AK16M5' AND type = 7
ORDER BY score DESC LIMIT 1) AS type2 ON temp2.license_plate = type2.license_plate
UNION
SELECT
IFNULL(type2.id, '') AS id,
IFNULL(type2.mac, '') AS mac,
'电脑蓝牙' AS typeName2,
IFNULL(type2.ble_name, '') AS ble_name,
temp2.license_plate,
IFNULL(type2.car_type, NULL) AS car_type,
IFNULL(type2.times, 0) AS times,
IFNULL(type2.days_count, 0) AS days_count,
IFNULL(type2.station_count, 0) AS station_count,
IFNULL(type2.adjoint_count, 0) AS adjoint_count,
IFNULL(type2.mac_law_count, 0) AS mac_law_count,
IFNULL(type2.score, 0) AS score,
IFNULL(type2.create_date, NULL) AS create_date,
IFNULL(type2.update_date, NULL) AS update_date,
IFNULL(type2.timeline, NULL) AS timeline
FROM (SELECT '赣AK16M5' AS license_plate) AS temp2 LEFT JOIN
(SELECT id, mac, type, ble_name, license_plate, car_type, times, days_count, station_count, adjoint_count, mac_law_count, score, create_date, update_date, timeline
FROM aca_be_lpresult WHERE license_plate = '赣AK16M5' AND type IN(1, 65)
ORDER BY score DESC LIMIT 1) AS type2 ON temp2.license_plate = type2.license_plate
UNION
SELECT
IFNULL(type2.id, '') AS id,
IFNULL(type2.mac, '') AS mac,
'其它蓝牙' AS typeName2,
IFNULL(type2.ble_name, '') AS ble_name,
temp2.license_plate,
IFNULL(type2.car_type, NULL) AS car_type,
IFNULL(type2.times, 0) AS times,
IFNULL(type2.days_count, 0) AS days_count,
IFNULL(type2.station_count, 0) AS station_count,
IFNULL(type2.adjoint_count, 0) AS adjoint_count,
IFNULL(type2.mac_law_count, 0) AS mac_law_count,
IFNULL(type2.score, 0) AS score,
IFNULL(type2.create_date, NULL) AS create_date,
IFNULL(type2.update_date, NULL) AS update_date,
IFNULL(type2.timeline, NULL) AS timeline
FROM (SELECT '赣AK16M5' AS license_plate) AS temp2 LEFT JOIN
(SELECT id, mac, type, ble_name, license_plate, car_type, times, days_count, station_count, adjoint_count, mac_law_count, score, create_date, update_date, timeline
FROM aca_be_lpresult WHERE license_plate = '赣AK16M5' AND type NOT IN(1, 65, 2, 66, 7)
ORDER BY score DESC LIMIT 1) AS type2 ON temp2.license_plate = type2.license_plate
查询结果：
+------+--------------+-----------+-----------------------+---------------+----------+-------+------------+---------------+---------------+---------------+-------+---------------------+---------------------+---------------------+
| id | mac | typeName2 | ble_name | license_plate | car_type | times | days_count | station_count | adjoint_count | mac_law_count | score | create_date | update_date | timeline |
+------+--------------+-----------+-----------------------+---------------+----------+-------+------------+---------------+---------------+---------------+-------+---------------------+---------------------+---------------------+
| 2134 | 000d18a17fa0 | 手机蓝牙 | BC8-A是北:D？？ndroid | 赣AK16M5 | 1 | 4 | 3 | 3 | 0 | 0 | 8.00 | 2023-10-12 19:32:52 | 2023-10-12 19:35:33 | 2023-10-12 19:33:10 |
| | | 手表蓝牙 | | 赣AK16M5 | NULL | 0 | 0 | 0 | 0 | 0 | 0.00 | NULL | NULL | NULL |
| 2183 | 0d1852f820a0 | 电脑蓝牙 | BC8-Android | 赣AK16M5 | 1 | 1 | 1 | 1 | 0 | 0 | 2.50 | 2023-10-12 19:32:58 | 2023-10-12 19:35:32 | 2023-10-12 19:32:58 |
| | | 其它蓝牙 | | 赣AK16M5 | NULL | 0 | 0 | 0 | 0 | 0 | 0.00 | NULL | NULL | NULL |
+------+--------------+-----------+-----------------------+---------------+----------+-------+------------+---------------+---------------+---------------+-------+---------------------+---------------------+---------------------+
4 rows in set (0.16 sec)
在这里只传递车牌号作为参数处理，可以追加Wrapper对象补充筛选条件
@Select(
"SELECT " +
" IFNULL(type2.id, '') AS id, " +
" IFNULL(type2.mac, '') AS mac, " +
" 1 AS `type`, " +
" '手机蓝牙' AS typeName2," +
" IFNULL(type2.ble_name, '') AS ble_name," +
" temp2.license_plate," +
" IFNULL(type2.car_type, NULL) AS car_type, " +
" IFNULL(type2.times, 0) AS times, " +
" IFNULL(type2.days_count, 0) AS days_count," +
" IFNULL(type2.station_count, 0) AS station_count," +
" IFNULL(type2.adjoint_count, 0) AS adjoint_count," +
" IFNULL(type2.mac_law_count, 0) AS mac_law_count," +
" IFNULL(type2.score, 0) AS score," +
" IFNULL(type2.create_date, NULL) AS create_date," +
" IFNULL(type2.update_date, NULL) AS update_date," +
" IFNULL(type2.timeline, NULL) AS timeline " +
"FROM (SELECT ${licensePlateStr} AS license_plate) AS temp2 LEFT JOIN " +
"(SELECT id, mac, type, ble_name, license_plate, car_type, times, days_count, station_count, adjoint_count, mac_law_count, score, create_date, update_date, timeline " +
"FROM aca_be_lpresult WHERE license_plate = #{licensePlate} AND type IN(2, 66) " +
"ORDER BY score DESC LIMIT 1) AS type2 ON temp2.license_plate = type2.license_plate " +
"UNION " +
"SELECT " +
" IFNULL(type2.id, '') AS id, " +
" IFNULL(type2.mac, '') AS mac," +
" 2 AS `type`, " +
" '手表蓝牙' AS typeName2," +
" IFNULL(type2.ble_name, '') AS ble_name," +
" temp2.license_plate," +
" IFNULL(type2.car_type, NULL) AS car_type, " +
" IFNULL(type2.times, 0) AS times, " +
" IFNULL(type2.days_count, 0) AS days_count," +
" IFNULL(type2.station_count, 0) AS station_count," +
" IFNULL(type2.adjoint_count, 0) AS adjoint_count," +
" IFNULL(type2.mac_law_count, 0) AS mac_law_count," +
" IFNULL(type2.score, 0) AS score," +
" IFNULL(type2.create_date, NULL) AS create_date," +
" IFNULL(type2.update_date, NULL) AS update_date," +
" IFNULL(type2.timeline, NULL) AS timeline " +
"FROM (SELECT ${licensePlateStr} AS license_plate) AS temp2 LEFT JOIN " +
"(SELECT id, mac, type, ble_name, license_plate, car_type, times, days_count, station_count, adjoint_count, mac_law_count, score, create_date, update_date, timeline " +
"FROM aca_be_lpresult WHERE license_plate = #{licensePlate} AND type = 7 " +
"ORDER BY score DESC LIMIT 1) AS type2 ON temp2.license_plate = type2.license_plate " +
"UNION " +
"SELECT" +
" IFNULL(type2.id, '') AS id, " +
" IFNULL(type2.mac, '') AS mac, " +
" 3 AS `type`, " +
" '电脑蓝牙' AS typeName2," +
" IFNULL(type2.ble_name, '') AS ble_name," +
" temp2.license_plate," +
" IFNULL(type2.car_type, NULL) AS car_type, " +
" IFNULL(type2.times, 0) AS times, " +
" IFNULL(type2.days_count, 0) AS days_count," +
" IFNULL(type2.station_count, 0) AS station_count," +
" IFNULL(type2.adjoint_count, 0) AS adjoint_count," +
" IFNULL(type2.mac_law_count, 0) AS mac_law_count," +
" IFNULL(type2.score, 0) AS score," +
" IFNULL(type2.create_date, NULL) AS create_date," +
" IFNULL(type2.update_date, NULL) AS update_date," +
" IFNULL(type2.timeline, NULL) AS timeline " +
"FROM (SELECT ${licensePlateStr} AS license_plate) AS temp2 LEFT JOIN " +
"(SELECT id, mac, type, ble_name, license_plate, car_type, times, days_count, station_count, adjoint_count, mac_law_count, score, create_date, update_date, timeline " +
"FROM aca_be_lpresult WHERE license_plate = #{licensePlate} AND type IN(1, 65) " +
"ORDER BY score DESC LIMIT 1) AS type2 ON temp2.license_plate = type2.license_plate " +
"UNION " +
"SELECT " +
" IFNULL(type2.id, '') AS id, " +
" IFNULL(type2.mac, '') AS mac, " +
" 4 AS `type`, " +
" '其它蓝牙' AS typeName2," +
" IFNULL(type2.ble_name, '') AS ble_name," +
" temp2.license_plate," +
" IFNULL(type2.car_type, NULL) AS car_type, " +
" IFNULL(type2.times, 0) AS times, " +
" IFNULL(type2.days_count, 0) AS days_count," +
" IFNULL(type2.station_count, 0) AS station_count," +
" IFNULL(type2.adjoint_count, 0) AS adjoint_count," +
" IFNULL(type2.mac_law_count, 0) AS mac_law_count," +
" IFNULL(type2.score, 0) AS score," +
" IFNULL(type2.create_date, NULL) AS create_date," +
" IFNULL(type2.update_date, NULL) AS update_date," +
" IFNULL(type2.timeline, NULL) AS timeline " +
"FROM (SELECT ${licensePlateStr} AS license_plate) AS temp2 LEFT JOIN" +
"(SELECT id, mac, type, ble_name, license_plate, car_type, times, days_count, station_count, adjoint_count, mac_law_count, score, create_date, update_date, timeline " +
"FROM aca_be_lpresult WHERE license_plate = #{licensePlate} AND type NOT IN(1, 65, 2, 66, 7) " +
"ORDER BY score DESC LIMIT 1) AS type2 ON temp2.license_plate = type2.license_plate "
)
List<AcaBeLpresultDTO> getBleCarBasicRankForEachCar(@Param("licensePlate") String licensePlate, @Param("licensePlateStr") String licensePlateStr);
最后获取该类型下的排名记录SQL
SELECT * FROM aca_be_lpresult WHERE license_plate = '赣AK16M5' AND type IN(2, 66)
ORDER BY score DESC LIMIT 11
因为第一条已经在上面的SQL里面存在了，所以SQL查出来用Java去掉第一个元素即可
业务逻辑层
这里就不单独贴了，因为区分了蓝牙和人的主体，就看下面以车牌分组的部分
蓝牙部分没有要求类型的筛选，所以分组查询之后只需要查询排名放入即可
以车辆查询的部分则麻烦一点，还需要设置翻页的参数变化，每页数量先除4，提供实际的分组翻页查询
得到的总记录需要乘4再把实际可以翻页的记录数补回来
因为动态表格和扩展行的影响，不能合并单元格，妥协的处理是，只在每组记录的第一行展示关键信息（车辆信息 + 蓝牙信息）
可以看到我只在类型排名的集合里对第一个元素设置displayFlag变量为true
@SuppressWarnings("all")
@Override
public IPage<AcaBeLpresultDTO> getBleCarBasicPage(AcaBeLpresultDTO dto) {
boolean hasMacType = Objects.nonNull(dto.getType());
List<String> collect = null;
QueryWrapper<AcaBeLpresultDTO> query = Wrappers.<AcaBeLpresultDTO>query()
.like(StringUtils.isNotBlank(dto.getMac()), "mac", StringUtils.isNotBlank(dto.getMac()) ? dto.getMac().replaceAll("-", "").toLowerCase() : "")
.like(StringUtils.isNotBlank(dto.getBleName()), "ble_name", dto.getBleName())
.like(StringUtils.isNotBlank(dto.getLicensePlate()), "license_plate", dto.getLicensePlate())
.between(StringUtils.isNotBlank(dto.getStartUpdateDate()) && StringUtils.isNotBlank(dto.getEndUpdateDate()), "update_date", dto.getStartUpdateDate(), dto.getEndUpdateDate())
.orderByDesc("ud");
if (hasMacType) {
List<Dict> macTypeList = dictService.dicts("MAC_TYPE");
/* 检查是否匹配字典值 */
Optional<Dict> optionalDict = macTypeList.stream().filter(x -> x.getDmbh().equals(dto.getType().toString())).findFirst();
if (optionalDict.isPresent()) {
/* 如果匹配则查找同名的集合值 */
Dict dict = optionalDict.get();
String dmmc = dict.getDmmc();
collect = macTypeList.stream().filter(x -> x.getDmmc().equals(dmmc)).map(Dict::getDmbh).collect(Collectors.toList());
query.in(collect.size() > 1, "type", collect);
query.eq(collect.size() == 1, "type", collect.get(0));
} else {
/* 如果不匹配，则查找（未知） */
collect = macTypeList.stream().map(Dict::getDmbh).collect(Collectors.toList());
query.notIn("type", collect);
}
}
IPage<AcaBeLpresultDTO> page = dto.getPage();
Integer option = dto.getOption();
if (new Integer(1).equals(option)) {
query.groupBy("mac");
page = baseMapper.getBleCarBasicPageMacPrimary(dto.getPage(), query);
List<AcaBeLpresultDTO> newRecords = new ArrayList<>();
for (AcaBeLpresultDTO beLpresultDTO : page.getRecords()) {
List<AcaBeLpresultDTO> rankList = lambdaQuery()
.eq(AcaBeLpresultDTO::getMac, beLpresultDTO.getMac())
.in(hasMacType, AcaBeLpresultDTO::getType, collect)
.like(StringUtils.isNotBlank(dto.getLicensePlate()), AcaBeLpresultDTO::getLicensePlate, dto.getLicensePlate())
.between(StringUtils.isNotBlank(dto.getStartUpdateDate()) && StringUtils.isNotBlank(dto.getEndUpdateDate()), AcaBeLpresultDTO::getUpdateDate, dto.getStartUpdateDate(), dto.getEndUpdateDate())
.orderByDesc(AcaBeLpresultDTO::getScore)
.last("LIMIT 11").list();
rankList.forEach(this::convert);
AcaBeLpresultDTO removed = rankList.remove(0);
removed.setChildren(rankList);
newRecords.add(removed);
}
page.setRecords(newRecords);
} else {
query.groupBy("license_plate");
page.setSize(page.getSize() / 4);
page = baseMapper.getBleCarBasicPageLpPrimary(page, query);
page.setTotal(page.getTotal() * 4);
List<AcaBeLpresultDTO> newRecords = new ArrayList<>();
for (AcaBeLpresultDTO beLpresultDTO : page.getRecords()) {
String licensePlate = beLpresultDTO.getLicensePlate();
String licensPlateStr = "'" + licensePlate + "'";
List<AcaBeLpresultDTO> eachCar = baseMapper.getBleCarBasicRankForEachCar(licensePlate, licensPlateStr);
eachCar.forEach(row -> {
convert(row);
List<AcaBeLpresultDTO> rank = getBleCarBasicPageRank(row);
row.setChildren(rank);
});
eachCar.get(0).setDisplayFlag(true);
newRecords.addAll(eachCar);
}
page.setRecords(newRecords);
}
return page;
}
getBleCarBasicPageRank 方法：
convert方法就是对字段的一些翻译，蓝牙mac格式化，翻译蓝牙名称之类的
private List<AcaBeLpresultDTO> getBleCarBasicPageRank(AcaBeLpresultDTO dto) {
List<AcaBeLpresultDTO> list = lambdaQuery().eq(AcaBeLpresultDTO::getLicensePlate, dto.getLicensePlate())
.in(new Integer(1).equals(dto.getType()), AcaBeLpresultDTO::getType, phoneMacTypes)
.in(new Integer(2).equals(dto.getType()), AcaBeLpresultDTO::getType, watchMacTypes)
.in(new Integer(3).equals(dto.getType()), AcaBeLpresultDTO::getType, pcMacTypes)
.notIn(new Integer(4).equals(dto.getType()), AcaBeLpresultDTO::getType, Stream.concat(phoneMacTypes.stream(), Stream.concat(watchMacTypes.stream(), pcMacTypes.stream())).collect(Collectors.toList()))
.orderByDesc(AcaBeLpresultDTO::getScore)
.last("LIMIT 11")
.list()
;
if (CollectionUtils.isNotEmpty(list)) {
list.remove(0);
list.forEach(this::convert);
}
return list;
}
页面部分的处理：
首先是查询切换的支持
<el-row style="padding: 0 20px 10px 15px;">
<el-col :span="6">
<el-radio-group v-model="queryForm.option" @change="onOptionChange">
<el-radio :label="1">以蓝牙为主体</el-radio>
<el-radio :label="2">以车辆为主体</el-radio>
</el-radio-group>
</el-col>
<el-col :span="18" style="float: right;" />
</el-row>
切换事件：
因为车辆主体查询不适用蓝牙的查询条件，做清空处理后再查询
onOptionChange(val) {
if (val === 2) {
this.queryForm.type = ''
this.queryForm.mac = ''
this.queryForm.bleName = ''
}
this.searchPage()
}
首次翻页查询方法：
因为只有在切换的时候调用，车辆和蓝牙的翻页选项不一样
searchPage() {
this.page.current = 1
if (this.queryForm.option === 2) {
this.page.size = 20
this.sizeList = [20, 40, 60, 100, 200]
} else {
this.page.size = 10
this.sizeList = [10, 20, 30, 100, 200]
}
this.page.total = 0
this.getPageData()
}
查询接口：
分组类型排名的结果可能没有id，所以按下标赋值：
async getPageData() {
this.loadingFlag = true
this.spanArr = []
this.spanIdx = 0
const postData = { ... this.queryForm, page: this.page }
const { data: tableData, total } = await getBleCarBasicPage(postData)
if (this.queryForm.option === 2) tableData.forEach((el, idx) => (el.id = idx))
this.tableData = tableData
this.page.total = total
this.loadingFlag = false
},
查询条件项：
以车辆为主体的查询项，蓝牙的部分都做隐藏控制
<el-row>
<el-col :span="24" style="padding: 15px 20px 0 15px; height: 100%; background: none;">
<div class="grid-content bg-purple-dark">
<el-form :inline="true" :model="queryForm" class="demo-form-inline" size="small">
<el-form-item v-show="queryForm.option === 1" label="蓝牙MAC地址">
<el-input v-model="queryForm.mac" clearable filterable placeholder="请输入蓝牙MAC地址" size="small" />
</el-form-item>
<el-form-item v-show="queryForm.option === 1" label="蓝牙名称">
<el-input v-model="queryForm.bleName" clearable filterable placeholder="请输入蓝牙名称" size="small" />
</el-form-item>
<el-form-item v-show="queryForm.option === 1" label="蓝牙类型">
<el-select v-model="queryForm.type" placeholder="请选择" clearable>
<el-option v-for="item in macTypeList" :key="item.dmbh" :label="item.dmmc" :value="item.dmbh" />
</el-select>
</el-form-item>
<el-form-item label="关联车辆信息" style="margin-left: 5px;">
<el-input v-model="queryForm.licensePlate" clearable filterable placeholder="请输入关联车辆信息" size="small" />
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="searchPage">查询</el-button>
<el-button size="small" @click="resetInput">重置</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
</el-row>
表格部分：
1、这里涉及了一个scope-slot作用域问题，内嵌表格不能和主表格使用解构语法读取变量
所以可以看到我这里没有一直使用同样的变量名，主表格用的是直接解构的对象，到了内嵌表格用的是scope,而内嵌中还有内嵌的列，则用scope2替代
如果都使用解构或者同名的变量，会导致vue报错，这里是一个注意点
2、关闭内嵌的表格表头，这个使用组件自带的show-header属性即可搞定
3、让内嵌的表格和外部主表格保持一致，我用空列进行填充的，宽度参数和外部保持一致，就是不声明prop属性和label属性
4、表格扩展行的样式问题，因为这个是自定义的样式，我用浏览器调试找的
/deep/ td.el-table__cell.el-table__expanded-cell {
background: #1b203c!important;
}
完整代码：
<el-row v-loading="loadingFlag" :element-loading-text="loadingText" class="row-talbe">
<el-table
v-show="queryForm.option === 1"
:data="tableData"
size="mini"
style="width: 100%"
stripe
row-key="id"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
max-height="calc(100vh - 350px)"
:header-cell-style="{ 'text-align': 'center' }"
highlight-current-row
tooltip-effect="light"
>
<el-table-column label="蓝牙MAC地址" prop="macCode" show-overflow-tooltip>
<template slot-scope="{ row }">
<more-info-drop-down
text-field="macCode"
keyword-field="macCode"
:info-object="row"
style="display: inline-block;"
/>
</template>
</el-table-column>
<el-table-column label="蓝牙名称" prop="bleName" align="center" show-overflow-tooltip />
<el-table-column label="蓝牙类型" prop="typeName" align="center" show-overflow-tooltip>
<template slot-scope="{ row }">
{{ row['typeName'] !== '0' ? row['typeName'] : '未知' }}
</template>
</el-table-column>
<el-table-column label="关联车辆信息" prop="licensePlate" align="left" min-width="160" show-overflow-tooltip>
<template slot-scope="{ row }">
<div>
<p>车牌号码：<more-info-drop-down text-field="licensePlate" keyword-field="licensePlate" :info-object="row" style="display: inline-block;" /></p>
<p>行车记录仪：{{ row.apName }} <more-info-drop-down text-field="usrMacCode" keyword-field="usrMacCode" :info-object="row" style="display: inline-block;" /></p>
<p>车载蓝牙：{{ row['bleName2'] }} <more-info-drop-down text-field="bleMacCode" keyword-field="bleMacCode" :info-object="row" style="display: inline-block;" /></p>
</div>
</template>
</el-table-column>
<el-table-column label="关联车辆次数" prop="times" align="center" show-overflow-tooltip>
<template slot-scope="{ row }">
<span class="link-color" @click="timesDetail(row)">
{{ row.times ? `${row.times}次` : '0次' }}
</span>
</template>
</el-table-column>
<el-table-column label="关联车辆天数" prop="daysCount" align="center" show-overflow-tooltip>
<template slot-scope="{ row }">
<span class="link-color" @click="dayDetail(row)">
{{ row['daysCount'] ? `${row['daysCount']}天` : '0天' }}
</span>
</template>
</el-table-column>
<el-table-column label="关联车辆点位数" prop="stationCount" align="center" show-overflow-tooltip>
<template slot-scope="{ row }">
<span class="link-color" @click="staDetail(row)">
{{ row['stationCount'] ? `${row['stationCount']}个` : '0个' }}
</span>
</template>
</el-table-column>
<el-table-column label="关联车辆伴随记录" prop="adjointCount" align="center" show-overflow-tooltip>
<template slot-scope="{ row }">
{{ row['adjointCount'] ? `${row['adjointCount']}条` : '0条' }}
</template>
</el-table-column>
<el-table-column label="关联车辆规律" prop="macLawCount" align="center" show-overflow-tooltip>
<template slot-scope="{ row }">
{{ row['macLawCount'] ? `${row['macLawCount']}条` : '0条' }}
</template>
</el-table-column>
<el-table-column label="权重计算详情" prop="score" align="center" show-overflow-tooltip>
<template slot-scope="{ row }">
<span class="link-color" @click="scoreDetail(row)">
{{ row['score'] ? `${row['score']}分` : '0分' }}
</span>
</template>
</el-table-column>
<el-table-column label="更新时间" prop="updateDate" min-width="120px" align="center" show-overflow-tooltip />
</el-table> <!-- 以关联车辆信息为主体 -->
<el-table
v-show="queryForm.option === 2"
:data="tableData"
size="mini"
style="width: 100%"
stripe
max-height="calc(100vh - 350px)"
highlight-current-row
tooltip-effect="light"
>
<el-table-column label="关联车辆信息" prop="licensePlate" align="left" min-width="160" show-overflow-tooltip>
<template slot-scope="{ row }">
<div v-show="row['displayFlag']" style="display: inline-block;">
<p>车牌号码：<more-info-drop-down text-field="licensePlate" keyword-field="licensePlate" :info-object="row" style="display: inline-block;" /></p>
<p>行车记录仪：{{ row.apName }} <more-info-drop-down text-field="usrMacCode" keyword-field="usrMacCode" :info-object="row" style="display: inline-block;" /></p>
<p>车载蓝牙：{{ row['bleName2'] }} <more-info-drop-down text-field="bleMacCode" keyword-field="bleMacCode" :info-object="row" style="display: inline-block;" /></p>
</div>
</template>
</el-table-column>
<el-table-column type="expand" width="40" align="center">
<template slot-scope="scope">
<el-table :show-header="false" :data="scope.row.children" size="mini" stripe>
<el-table-column label="" prop="" align="center" min-width="160" />
<el-table-column label="" prop="" align="center" width="40" />
<el-table-column label="" prop="" align="center" width="80" />
<el-table-column label="蓝牙名称" prop="bleName" align="center" show-overflow-tooltip />
<el-table-column label="蓝牙MAC地址" prop="macCode" align="center" show-overflow-tooltip>
<template slot-scope="scope2">
<more-info-drop-down
text-field="macCode"
keyword-field="macCode"
:info-object="scope2.row"
/>
</template>
</el-table-column>
<el-table-column label="关联车辆次数" prop="times" align="center" show-overflow-tooltip>
<template slot-scope="scope2">
<span class="link-color" @click="timesDetail(scope2.row)">
{{ scope2.row.times ? `${scope2.row.times}次` : '0次' }}
</span>
</template>
</el-table-column>
<el-table-column label="关联天数" prop="daysCount" align="center" show-overflow-tooltip>
<template slot-scope="scope2">
<span class="link-color" @click="dayDetail(scope2.row)">
{{ scope2.row['daysCount'] ? `${scope2.row['daysCount']}天` : '0天' }}
</span>
</template>
</el-table-column>
<el-table-column label="关联点位数" prop="stationCount" align="center" show-overflow-tooltip>
<template slot-scope="scope2">
<span class="link-color" @click="staDetail(scope2.row)">
{{ scope2.row['stationCount'] ? `${scope2.row['stationCount']}个` : '0个' }}
</span>
</template>
</el-table-column>
<el-table-column label="伴随点位数" prop="adjointCount" align="center" show-overflow-tooltip>
<template slot-scope="scope2">
{{ scope2.row['adjointCount'] ? `${scope2.row['adjointCount']}条` : '0条' }}
</template>
</el-table-column>
<el-table-column label="关联规律" prop="macLawCount" align="center" show-overflow-tooltip>
<template slot-scope="scope2">
{{ scope2.row['macLawCount'] ? `${scope2.row['macLawCount']}条` : '0条' }}
</template>
</el-table-column>
<el-table-column label="权重分数" prop="score" align="center" show-overflow-tooltip>
<template slot-scope="scope2">
<span class="link-color" @click="scoreDetail(scope2.row)">
{{ scope2.row['score'] ? `${scope2.row['score']}分` : '0分' }}
</span>
</template>
</el-table-column>
<el-table-column label="更新时间" prop="updateDate" min-width="120px" align="center" show-overflow-tooltip />
</el-table>
</template>
</el-table-column>
<el-table-column label="蓝牙类型" width="80" prop="typeName2" align="center" />
<el-table-column label="蓝牙名称" prop="bleName" align="center" show-overflow-tooltip />
<el-table-column label="蓝牙MAC地址" prop="macCode" align="center" show-overflow-tooltip>
<template slot-scope="{ row }">
<more-info-drop-down
text-field="macCode"
keyword-field="macCode"
:info-object="row"
/>
</template>
</el-table-column>
<el-table-column label="关联车辆次数" prop="times" align="center" show-overflow-tooltip>
<template slot-scope="{ row }">
<span class="link-color" @click="timesDetail(row)">
{{ row.times ? `${row.times}次` : '0次' }}
</span>
</template>
</el-table-column>
<el-table-column label="关联天数" prop="daysCount" align="center" show-overflow-tooltip>
<template slot-scope="{ row }">
<span class="link-color" @click="dayDetail(row)">
{{ row['daysCount'] ? `${row['daysCount']}天` : '0天' }}
</span>
</template>
</el-table-column>
<el-table-column label="关联点位数" prop="stationCount" align="center" show-overflow-tooltip>
<template slot-scope="{ row }">
<span class="link-color" @click="staDetail(row)">
{{ row['stationCount'] ? `${row['stationCount']}个` : '0个' }}
</span>
</template>
</el-table-column>
<el-table-column label="伴随点位数" prop="adjointCount" align="center" show-overflow-tooltip>
<template slot-scope="{ row }">
{{ row['adjointCount'] ? `${row['adjointCount']}条` : '0条' }}
</template>
</el-table-column>
<el-table-column label="关联规律" prop="macLawCount" align="center" show-overflow-tooltip>
<template slot-scope="{ row }">
{{ row['macLawCount'] ? `${row['macLawCount']}条` : '0条' }}
</template>
</el-table-column>
<el-table-column label="权重分数" prop="score" align="center" show-overflow-tooltip>
<template slot-scope="{ row }">
<span class="link-color" @click="scoreDetail(row)">
{{ row['score'] ? `${row['score']}分` : '0分' }}
</span>
</template>
</el-table-column>
<el-table-column label="更新时间" prop="updateDate" min-width="120px" align="center" show-overflow-tooltip />
</el-table> <el-pagination
style="text-align: right;margin-top: 10px;"
layout="total, sizes, prev, pager, next"
:page-size="page.size"
:current-page.sync="page.current"
:page-sizes="sizeList"
:total="page.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-row>
别的部分应该不需要强调啥了。。。
【Vue】分组类型排名查询功能的更多相关文章
- Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...
- vue 对象提供的属性功能、通过axio请求数据(2)
1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...
- mysql查询优化之四：优化特定类型的查询
本文将介绍如何优化特定类型的查询. 1.优化count()查询count()聚合函数,以及如何优化使用了该函数的查询,很可能是mysql中最容易被误解的前10个话题之一 count() 是一个特殊的函 ...
- VUE+Element 前端应用开发框架功能介绍
前面介绍了很多ABP系列的文章<ABP框架使用>,一步一步的把我们日常开发中涉及到的Web API服务构建.登录日志和操作审计日志.字典管理模块.省份城市的信息维护.权限管理模块中的组织机 ...
- 创建ASP.NET Core MVC应用程序(5)-添加查询功能 & 新字段
创建ASP.NET Core MVC应用程序(5)-添加查询功能 & 新字段 添加查询功能 本文将实现通过Name查询用户信息. 首先更新GetAll方法以启用查询: public async ...
- [Architecture Pattern] Repository实作查询功能
[Architecture Pattern] Repository实作查询功能 范例下载 范例程序代码:点此下载 问题情景 在系统的BLL与DAL之间,加入Repository Pattern的设计, ...
- 【百度地图API】小学生找哥哥——小学生没钱打车，所以此为公交查询功能
原文:[百度地图API]小学生找哥哥--小学生没钱打车,所以此为公交查询功能 任务描述: 有位在魏公村附近上小学的小朋友,要去北京邮电大学找哥哥.他身上钱很少,只够坐公交的.所以,百度地图API快帮帮 ...
- FreeSql 新查询功能介绍
FreeSql FreeSql 是一个功能强大的 NETStandard 库,用于对象关系映射程序(O/RM),提供了 CodeFirst/DbFirst/CURD/表达式函数/读写分离 等基础封装. ...
- Vc数据库编程基础MySql数据库的表查询功能
Vc数据库编程基础MySql数据库的表查询功能 一丶简介 不管是任何数据库.都会有查询功能.而且是很重要的功能.上一讲知识简单的讲解了表的查询所有. 那么这次我们需要掌握的则是. 1.使用select ...
- 一步一步学SpringDataJpa——JpaRepository查询功能
原文地址: https://blog.csdn.net/ming070423/article/details/22086169 1.JpaRepository支持接口规范方法名查询.意思是如果在接口中 ...
随机推荐
- 虚拟机ping不通物理机 PING 192.168.10.1 (192.168.10.1) 56(84) bytes of data.
准备做samba服务配置的时候 ping 192.168.10.1 (物理机地址) PING 192.168.10.1 (192.168.10.1) 56(84) bytes of data. 查看自 ...
- Qt-数据库操作MySql
1 简介 参考视频:https://www.bilibili.com/video/BV1XW411x7NU?p=87 说明:本文简单说明在Qt中操作数据库,用MySql数据库进行试验. Qt 提供了 ...
- Github Markdown 指定图片在光亮或暗黑模式展示
Github 根据系统配置不同的主题模式: 如果想要在光亮模式和暗黑模式显示不同的主题的图片,比如以下就是同一个图片在暗黑模式和光亮模式下展示: 解决方案 在markdon 的图片链接后添加#gh-d ...
- C#.NET Rsa私钥加密公钥解密
在C#中,RSA私钥只能签名,不能加密,如果要加密,要借助BouncyCastle库. nuget 中引用 Portable.BouncyCastle. 工具类: RsaEncryptUtil usi ...
- Scrapy框架(七)--中间件及Selenium应用
中间件 下载中间件(Downloader Middlewares) 位于scrapy引擎和下载器之间的一层组件. 作用:批量拦截到整个工程中所有的请求和响应 - 拦截请求: - UA伪装:proces ...
- Vue学习：19.插槽实例
来个简单示例练练手吧. 实例:插槽实例 思路 在封装表格组件时,通常使用默认插槽和作用域插槽来处理固定的自定义结构. 代码 根组件(APP.vue) <template> <div& ...
- Java中PDF的转换(图片)与展示
解决的问题 有些时候我们需要在项目中展示PDF,但是直接在浏览器中加入PDF展示的插件,存在兼容性问题,某些浏览器显示效果不理想,所以我们可以将PDF转为图片,然后已图片的方式展示,效果很好. 那么怎 ...
- ssm框架使springmvc放行资源（java配置类）
在springmvc中,如果配置了拦截所有请求交给springmvc处理,会出现一些静态web资源加载不出来的情况,或者想放行指定web资源可以通过修改通过修改配置达到相应目的,这里使用覆写WebMv ...
- nginx中多个server块共用upstream会相互影响吗
背景 nginx中经常有这样的场景,多个server块共用一个域名. 如:upstream有2个以上的域名,nginx配置两个server块,共用一个upstream配置. 那么,如果其中一个域名发生 ...
- 一款开源、免费、现代化风格的WPF UI控件库 - ModernWpf
前言 今天大姚给大家分享一款开源(MIT License).免费.现代化风格的WPF UI控件库:ModernWpf. 项目介绍 ModernWpf是一个开源项目,它为 WPF 提供了一组现代化的控件 ...