U 综合页面告警特效

whychw

2020-12-15 b01b77d36923b3baeeadd4616d14f21c39044262

 src/script/general.js

@@ -61,6 +61,10 @@
  this.context.strokeStyle = '#fff';
  this.context.fillStyle = "#fff";
  this.context.font = "16px Arial";
  this.COUNT = 36;
  this.count = 0;
  this.COUNT_DELAY = 12;
  this.count_delay = 0;
}

proto.constructor = EleCircleGeneral;
@@ -1175,6 +1179,56 @@
  
}

// 画告警圈
EleCircleGeneral.prototype.drawBubble = function (options) {
  let defaults = {
    offsetX: 0
    ,offsetY: 0
    ,r: 0
    ,color: '255,149,0'
  };
  let opts = deepObjMerge(defaults, options || {});

  const count = this.count;
  const COUNT = this.COUNT;
  const r = opts.r + count * .6;
  const ctx = this.context;

  if (!count) {
    return false;
  }

  ctx.save();
  ctx.translate(opts.offsetX, opts.offsetY);
  let grd = ctx.createRadialGradient(0, 0, 0, 0, 0, r);
  grd.addColorStop(0,"transparent");
  grd.addColorStop(0.2,"transparent");
  grd.addColorStop(1, 'rgba(' + opts.color + ',' + (1 - count / (COUNT - 1)) + ')');
  ctx.fillStyle = grd;
  ctx.beginPath();
  ctx.arc(0, 0, r, 0, Math.PI * 2);
  ctx.closePath();
  ctx.fill();
  
  ctx.restore();
  
}

/**
 * 运行计数器
 */
EleCircleGeneral.prototype.runCounter = function () {
  if (this.count_delay == 0) {
    this.count++;
  }

  if (this.count == this.COUNT || this.count == 0) {
    this.count_delay++;
  }

  this.count %= this.COUNT;
  this.count_delay %= this.COUNT_DELAY;
}

function deepObjMerge(FirstOBJ, SecondOBJ) { // 深度合并对象
    for (var key in SecondOBJ) {