如何在苍穹PC端的评分控件上实现评分功能并同步饼图

如何在苍穹PC端的评分控件上实现评分功能并同步饼图原创

插件开发

前端&控件

闫方亮

4人赞赏了该文章 1806次浏览编辑于2022年04月15日 14:01:27

关键词: 评分控件

一、需求背景

1.1 界面上需要实现一个评分功能

1.2 将评分的信息渲染到饼图

二、实现方案

2.1 可以在页面上添加flex面版，添加评分控件,通过插件更新前端评分信息

2.2 添加饼图控件，通过插件后台将评分的数据展示到前端饼图上

三、实现过程

3.1先在页面上添加Flex面板,在Flex面板下面添加标签控件跟评分控件如下图1所示:

图1

3.2如果需要切换评分控件中的属性评价类型，如是星星或者是笑脸类型的，根据需要切换显示的类型如图2所示:

图2

3.3在页面中继续添加Flex面板控件,在Flex面板控件中添加饼图控件,评分数据使用文本控件，在代码中可以直接setValue;评分控件两种评价类类型有情感化评价和标准评价，此处都有使用。如下图3所示:

图3

3.4 编写插件类代码，将插件注册到页面插件中

public class RateDemoFormPlugin extends AbstractFormPlugin implements RateListener {
   @Override
   public void registerListener(EventObject e) {
      // TODO Auto-generated method stub
      super.registerListener(e);
      Rate rate = this.getControl("kdec_rateap2");
      rate.addRateListener(this);
      Rate rate1 = this.getControl("kdec_rateap3");
      rate1.addRateListener(this);
      Rate rate2 = this.getControl("kdec_rateap4");
      rate2.addRateListener(this);
   }

   @Override
   public void afterCreateNewData(EventObject e) {
      // TODO Auto-generated method stub
      super.afterCreateNewData(e);
      PieChart pieChart = this.getControl("kdec_piechartap");
      this.drawChart(pieChart);
   }

   @Override
   public void beforeBindData(EventObject e) {
      // TODO Auto-generated method stub
      super.beforeBindData(e);
   }

   @Override
   public void update(RateEvent evt) {
      // TODO Auto-generated method stub
      Number rateScore = evt.getRateScore();
      Rate rate = (Rate) evt.getSource();
      String key = rate.getKey();
      this.getPageCache().put(key, rateScore.toString());
      Number sum = this.handleSumRate(rateScore, key);
      this.getModel().setValue("kdec_textfield", sum);
      PieChart pieChart = this.getControl("kdec_piechartap");
      this.drawChart(pieChart);
      //必须刷新，否则不触发签到渲染
      pieChart.refresh();
   }

   public Number handleSumRate(Number score, String key) {
      Number sum = score;
      if (!key.equals("kdec_rateap2")) {
         sum = getSum(sum, "kdec_rateap2");
      }
      if (!key.equals("kdec_rateap3")) {
         sum = getSum(sum, "kdec_rateap3");
      }
      if (!key.equals("kdec_rateap4")) {
         sum = getSum(sum, "kdec_rateap4");
      }
      Number rate5 = sum.intValue() / 3;
      Rate rate = this.getControl("kdec_rateap5");
      rate.setRateScore(rate5);
      return rate5;
   }

   private Number getSum(Number sum, String key) {
      String rate = this.getPageCache().get(key);
      if (rate != null) {
         sum = sum.intValue() + Integer.valueOf(rate);
      }
      return sum;
   }

   public void drawChart(PieChart pieChart) {
      pieChart.clearData();
      pieChart.setShowTooltip(true);
      //设置为位置
      pieChart.setMargin(Position.right, "30px");
      pieChart.setMargin(Position.top, "30px");
      pieChart.setMargin(Position.bottom, "10px");
      pieChart.setMargin(Position.left, "20px");
      //添加数据
      PieSeries series = pieChart.createPieSeries("评分");
      String rateStr = this.getPageCache().get("kdec_rateap2");
      String rate2Str = this.getPageCache().get("kdec_rateap3");
      String rate3Str = this.getPageCache().get("kdec_rateap4");
      ItemValue[] data = new ItemValue[3];
      ItemValue data1 = new ItemValue("物流服务", getRateNumber(rateStr), "#ffb61e");
      ItemValue data2 = new ItemValue("描述相符", getRateNumber(rate2Str), "#ff8936");
      ItemValue data3 = new ItemValue("服务态度", getRateNumber(rate3Str), "#ff7500");
      data[0] = data1;
      data[1] = data2;
      data[2] = data3;
      series.setData(data);
      //series样式
      series.setRoseType(RoseType.radius);
   }

   private Number getRateNumber(String rateStr) {
      Number rate = 0;
      if (rateStr != null) {
         rate = Integer.valueOf(rateStr);
      }
      return rate;
   }