Polarion技术问询：如何使用Velocity构建实时报告页面小部件查询？

一、Velocity高级查询与计算实现 #

1. 复杂数据筛选与聚合 #

• 多条件筛选数据集：

  #set($filteredItems = [])
  #foreach($item in $rawDataset)
      #if($item.sales > 500 && $item.region == "Europe" && $item.date >= $startDate)
          #set($void = $filteredItems.add($item))
      #end
  #end
  

• 自定义聚合计算（求和、占比）：

  #set($totalSales = 0)
  #foreach($item in $filteredItems)
      #set($totalSales = $totalSales + $item.sales)
  #end
  #foreach($item in $filteredItems)
      #set($item.salesRatio = $item.sales / $totalSales * 100)
  #end
  

2. 多数据集比较操作 #

• 跨数据集关联对比：

  #set($comparisonList = [])
  #foreach($current in $thisMonthData)
      #foreach($last in $lastMonthData)
          #if($current.productId == $last.productId)
              #set($growthRate = ($current.sales - $last.sales) / $last.sales * 100)
              #set($void = $comparisonList.add({
                  "product": $current.name,
                  "growth": $growthRate,
                  "current": $current.sales,
                  "last": $last.sales
              }))
          #end
      #end
  #foreach
  

二、实时报告页面图表集成 #

1. 传递Velocity计算结果到前端 #

• 将Velocity处理后的数据序列化为JSON，供前端图表库使用：

  <script type="text/javascript">
      // 借助Velocity JSON工具类序列化数据
      const reportData = $jsonUtil.serialize($comparisonList);
  </script>
  

2. 图表组件渲染与实时更新 #

• 以柱状图为例（基于ECharts）展示增长数据：

  <div id="growthChart" style="width: 800px; height: 500px;"></div>
  <script type="text/javascript">
      const chart = echarts.init(document.getElementById('growthChart'));
      const renderChart = (data) => {
          const option = {
              title: { text: '月度产品销量增长率' },
              xAxis: {
                  type: 'category',
                  data: data.map(item => item.product)
              },
              yAxis: { type: 'value', axisLabel: { formatter: '{value}%' } },
              series: [{
                  name: '增长率',
                  type: 'bar',
                  data: data.map(item => item.growth.toFixed(2)),
                  itemStyle: {
                      color: params => params.value >= 0 ? '#52c41a' : '#ff4d4f'
                  }
              }]
          };
          chart.setOption(option);
      };
  
      // 首次渲染
      renderChart(reportData);
      // 实时更新（每5秒刷新一次数据）
      setInterval(() => {
          // 可通过后端接口拉取最新计算结果，或重新调用Velocity逻辑
          fetch('/api/latest-report-data')
              .then(res => res.json())
              .then(newData => renderChart(newData));
      }, 5000);
  </script>
  

三、性能优化要点 #

• 尽量在后端服务层完成数据的初步聚合与筛选，减少Velocity模板内的复杂循环计算
• 使用Velocity的#cache指令缓存重复计算的结果，避免重复执行相同逻辑：

  #cache("sales-total")
      #set($total = 0)
      #foreach($item in $dataset)
          #set($total = $total + $item.sales)
      #end
  #end
  

• 实时图表采用增量更新模式，仅刷新变化的数据点，而非重绘整个图表

内容的提问来源于stack exchange，提问作者Florian Straub