【Java】在树结构中给节点追加数据

一、功能需求

有个树状组件，展示区域层级，每个区域节点需要展示该地区下的统计信息

从来没做过，给我整不会了属实是

二、功能分析

原型有功能和老系统代码，查看源码后发现的结构框架

1、树组件是自己用ul + li 封装的，牛逼

2、数据加载逻辑是： 先加载区域树接口，然后加载区域所有统计数据的接口，

　　再对树或者统计数据遍历，对节点进行赋值，完成渲染

3、统计数据的接口只提供有数据的区域

三、我的实现：

我菜逼写不来，想了想还是拿el-tree改改样式来实现

1、前端实现样式

<el-tree
  v-show="treeToggleFlag"
  ref="treeRef2"
  class="tree-expanded"
  node-key="regionCode"
  :default-expanded-keys="['360000']"
  highlight-current
  :expand-on-click-node="false"
  :data="treeData"
  :props="treeProps"
  @node-click="handleTreeNodeClick"
>
  <span slot-scope="{ node, data }" class="custom-tree-node2">
    <div class="region-bar"><span class="region-label">{{ node.label }}</span> <span class="link-color">数据统计</span></div>
    <div class="statistic-panel">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-statistic group-separator="," :precision="2" :value="data.licenseCount" title="车牌号码" />
        </el-col>
        <el-col :span="12">
          <el-statistic group-separator="," :precision="2" :value="data.obuCount" title="ETC/MTC" />
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 10px;">
        <el-col :span="12">
          <el-statistic group-separator="," :precision="2" :value="data.apCount" title="行车记录仪" />
        </el-col>
        <el-col :span="12">
          <el-statistic group-separator="," :precision="2" :value="data.bleCount" title="车载蓝牙" />
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 10px;">
        <el-col :span="12">
          <el-statistic group-separator="," :precision="2" :value="data.allCount" title="设备总数" />
        </el-col>
        <el-col :span="12">
          <el-statistic title="设备在线率">
            <template slot="formatter">
              {{ data.onlineRatio }}
            </template>
          </el-statistic>
        </el-col>
      </el-row>
    </div>
  </span>
</el-tree>

组件需要的变量：

treeToggleFlag: false,
treeData: [],
treeProps: {
  label: 'regionName',
  children: 'subRegions'
},

点击事件：

handleTreeNodeClick(region, val2) {
  console.log(region, val2)
  this.currentRegion = { code: region.regionCode, level: region.levelNo }
  this.initializeOverviewData()
  this.trIdx = 0
  const option = this.tendencyRangeOption[this.trIdx]
  this.tendencyRangeChoose(option, this.trIdx)
},

修改的样式：

/* - - - - - - - - - - - 展开的树节点样式 - - - - - - - - - - - */
.custom-tree-node2 {
  display: block;
  width: 100%;
  /*flex: 1;*/
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: space-between;*/
  /*font-size: 14px;*/
  /*color: white;*/
  /*padding-right: 8px;*/
  /*border: 1px dashed black;*/
}
.custom-tree-node2 .region-bar {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-node2 .statistic-panel {
  width: 100%;
  height: 100%;
  margin-top: 10px;
}
.custom-tree-node2 .region-bar .region-label {
  color: white;
  font-size: 14px;
}
/*.custom-tree-node2 .region-bar .region-statistic {*/
  /*color: rgb(102, 177, 255);*/
/*}*/
/* 节点内容高度 */
/deep/ .tree-expanded .el-tree-node__content {
  height: 180px;
  width: 100%;
  border-bottom: #b8b9c226 1px dashed;
  background-color: #1A1F3E;
}
/* 点击选中的节点 */
/deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: #024588;
}
/* 高亮节点颜色 */
/deep/  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #024588;
}
/* - - - - - - - - - - - 展开的树节点样式 - - - - - - - - - - - */
/* 没有展开且有子节点 */
/deep/ .el-tree .el-icon-caret-right:before {
  background: url("./../../../assets/image/draw-out.png") no-repeat 0 0;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 3px;
  background-size: 16px 16px;
}
/* 已经展开且有子节点 */
/deep/ .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url("./../../../assets/image/draw-back.png") no-repeat 0 0;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
  background-size: 16px 16px;
}
/* 没有子节点 */
/deep/ .el-tree .el-tree-node__expand-icon.is-leaf::before {
  background: none;
}
/* 统计数据样式 */
/deep/ .custom-tree-node2 .statistic-panel .el-statistic .con .number { color: white; font-size: 18px; }
/deep/ .custom-tree-node2 .statistic-panel .el-statistic .head { font-size: 13px; color: #989AA8;  }

　　

实现效果：

做不到完全一样，但是想表达的东西到位了，我尽力了

2、数据来源解决

Java接口：

/**
 * @author OnCloud9
 * @date 2023/9/25 15:18
 * @description
 * @params []
 * @return java.util.Map<java.lang.String,java.util.Map<java.lang.String,java.lang.Long>>
 */
@GetMapping("/region-count-data")
public Map<String, List<Map<String, Object>>> getStatisticDataRegionCountData() {
    return statisticDataService.getStatisticDataRegionCountData();
}

Service：

@Override
public Map<String, List<Map<String, Object>>> getStatisticDataRegionCountData() {
    /* distinct 获取存在数据的区域，无数据区域不查询 */
    Calendar calendar = Calendar.getInstance();
    calendar.add(Calendar.DAY_OF_MONTH, -1);
    Date previousDate = calendar.getTime();
    String formatDate = DateUtil.format(previousDate, "yyyy-MM-dd");
    /* 查找当日统计的区域 */
    List<Map<String, Object>> regionData1 = obuStatisticService.selectAllRegionData(formatDate);
    List<Map<String, Object>> regionData2 = obuTDeviceService.selectAllRegionData();
    Map<String, List<Map<String, Object>>> result = new HashMap<>();
    result.put("list1", regionData1);
    result.put("list2", regionData2);
    return result;
}

统计表的SQL，三次分组查询Union结合成一张表结果：

SELECT
 region_code AS regionCode,
 SUM(license_count) AS licenseCount,
 SUM(obu_count) AS obuCount,
 SUM(ap_count) AS apCount,
 SUM(ble_count) AS bleCount
FROM obu_statistic
WHERE statistic_day = #{formatDate}
GROUP BY region_code
UNION
SELECT
 CONCAT(LEFT(region_code, 4), '00') AS regionCode,
 SUM(license_count) AS licenseCount,
 SUM(obu_count) AS obuCount,
 SUM(ap_count) AS apCount,
 SUM(ble_count) AS bleCount
FROM obu_statistic
WHERE statistic_day = #{formatDate}
GROUP BY LEFT(region_code, 4)
UNION
SELECT
 CONCAT(LEFT(region_code, 2), '0000') AS regionCode,
 SUM(license_count) AS licenseCount,
 SUM(obu_count) AS obuCount,
 SUM(ap_count) AS apCount,
 SUM(ble_count) AS bleCount
FROM obu_statistic
WHERE statistic_day = #{formatDate}
GROUP BY LEFT(region_code, 2)"

查询结果：

+------------+--------------+----------+---------+----------+
| regionCode | licenseCount | obuCount | apCount | bleCount |
+------------+--------------+----------+---------+----------+
| 360111     | 106777       | 104264   | 161533  | 246934   |
| 360100     | 106777       | 104264   | 161533  | 246934   |
| 360000     | 106777       | 104264   | 161533  | 246934   |
+------------+--------------+----------+---------+----------+

　　

设备表的SQL需要统计设备在线率，这一步要把分组的表联表JOIN合并：

SELECT a.county_code, a.allCount, IFNULL(b.onlineCount, 0) AS onlineCount, ROUND(IFNULL(b.onlineCount, 0) / a.allCount, 4) AS onlineRatio
FROM (SELECT county_code, COUNT(county_code) AS allCount FROM obu_t_device GROUP BY county_code) AS a
LEFT JOIN (SELECT county_code, COUNT(county_code) AS onlineCount FROM obu_t_device WHERE run_status = 1 GROUP BY county_code) AS b
ON a.county_code = b.county_code
UNION
SELECT a.county_code, a.allCount, IFNULL(b.onlineCount, 0) AS onlineCount, ROUND(IFNULL(b.onlineCount, 0) / a.allCount, 4) AS onlineRatio
FROM (SELECT CONCAT( LEFT(county_code, 4), '00') AS county_code, COUNT(1) AS allCount FROM obu_t_device GROUP BY CONCAT(LEFT(county_code, 4), '00')) AS a
LEFT JOIN (SELECT CONCAT( LEFT(county_code, 4), '00') AS county_code, COUNT(1) AS onlineCount FROM obu_t_device WHERE run_status = 1 GROUP BY CONCAT(LEFT(county_code, 4), '00')) AS b
ON a.county_code = b.county_code
UNION
SELECT a.county_code, a.allCount, IFNULL(b.onlineCount, 0) AS onlineCount, ROUND(IFNULL(b.onlineCount, 0) / a.allCount, 4) AS onlineRatio
FROM (SELECT CONCAT( LEFT(county_code, 2), '0000') AS county_code, COUNT(1) AS allCount FROM obu_t_device GROUP BY CONCAT( LEFT(county_code, 2), '0000')) AS a
LEFT JOIN (SELECT CONCAT( LEFT(county_code, 2), '0000') AS county_code, COUNT(1) AS onlineCount FROM obu_t_device WHERE run_status = 1 GROUP BY CONCAT( LEFT(county_code, 2), '0000')) AS b
ON a.county_code = b.county_code

查询结果：

+-------------+----------+-------------+-------------+
| county_code | allCount | onlineCount | onlineRatio |
+-------------+----------+-------------+-------------+
| 360111      |        4 |           1 | 0.2500      |
| 360100      |        4 |           1 | 0.2500      |
| 360000      |        4 |           1 | 0.2500      |
+-------------+----------+-------------+-------------+

3、数据结果联动

async initializeTreeData() {
  const { data: treeData } = await getSysRegionTreeData('36', {})
  const { data: result } = await getStatisticDataRegionCountData()
  const list1 = result.list1
  const list2 = result.list2
  console.log(treeData)
  this.treeForeach(treeData, 'subRegions', node => {
    const d1 = list1.find(x => x.regionCode === node.regionCode)
    const d2 = list2.find(x => x.regionCode === node.regionCode)
    if (!d1 && !d2) {
      node.licenseCount = 0
      node.obuCount = 0
      node.apCount = 0
      node.bleCount = 0
      node.allCount = 0
      node.onlineCount = 0
      node.onlineRatio = `0%`
      return
    }
    if (d1) {
      const { licenseCount, obuCount, apCount, bleCount } = d1
      node.licenseCount = licenseCount
      node.obuCount = obuCount
      node.apCount = apCount
      node.bleCount = bleCount
    }
    if (d2) {
      const { allCount, onlineCount, onlineRatio } = d2
      node.allCount = allCount
      node.onlineCount = onlineCount
      node.onlineRatio = `${onlineRatio * 100}%`
    }
  })
  this.treeData = treeData
},

递归方法：

treeForeach(tree, childrenField, func) {
  tree.forEach(data => {
    func(data)
    data[childrenField] && this.treeForeach(data[childrenField], childrenField, func) // 遍历子树
  })
},

　　

四、参考资料：

El-tree组件：

https://element.eleme.io/#/zh-CN/component/tree#scoped-slot

树结构的操作方法：

https://blog.csdn.net/OUalen/article/details/131438154

样式优化修改参考：

https://blog.csdn.net/Sabrina_cc/article/details/125319257

节点的操作图标：

https://www.iconfont.cn/