U 综合页面告警特效

whychw

2020-12-15 b01b77d36923b3baeeadd4616d14f21c39044262

U 综合页面告警特效

 COMMITLOG.md

@@ -14,3 +14,6 @@
+ #### 下面滚动告警不要时间 字改为红色
+ #### 综合页面电机前面加开关 12G
+ #### 综合页面其他开关记录上次操作状态

### 2020-12-15
* #### 综合页面添加告警特效

 src/components/Circuit.vue

@@ -439,7 +439,7 @@
      ctx.translate(150, 50);
      ctx.beginPath();
      if (this.switch) {
        ctx.rotate(-2 * Math.PI / 180);
        // ctx.rotate(-2 * Math.PI / 180);
        ctx.strokeStyle = '#0f0';
      } else {
        ctx.rotate(-32 * Math.PI / 180);

 src/script/draw_general.js

@@ -844,7 +844,175 @@

  // console.log(flag, 'flag');
  // flag = !flag;
  

  if (status.power3A) {
    can.drawDanger({
      startX: 314
      ,startY: 88
    });

    can.drawBubble({
      offsetX: 378
      ,offsetY: 90
      // ,color: '200,70,10'
      ,r: 50
    });
  }

  if (status.power3B) {
    can.drawDanger({
      startX: 314
      ,startY: 250
    });

    can.drawBubble({
      offsetX: 378
      ,offsetY: 256
      // ,color: '255,149,0'
      ,r: 50
    });
  }

  if (status.power2) {
    can.drawDanger({
      startX: 314
      ,startY: 436
    });

    can.drawBubble({
      offsetX: 378
      ,offsetY: 446
      // ,color: '206,121,0'
      ,r: 50
    });
  }

  if (status.power1) {
    can.drawDanger({
      startX: 314
      ,startY: 590
    });

    can.drawBubble({
      offsetX: 378
      ,offsetY: 600
      // ,color: '222,222,0'
      ,r: 50
    });
  }

  if (status.motor) {
    can.drawDanger({
      startX: 272
      ,startY: 720
    });

    can.drawBubble({
      offsetX: 353
      ,offsetY: 750
      // ,color: '222,134,0'
      ,r: 53
    });
  }

  if (status.water3) {
    can.drawDanger({
      startX: 466
      ,startY: 730
    });

    can.drawBubble({
      offsetX: 525
      ,offsetY: 744
      // ,color: '255,111,0'
      ,r: 47
    });
  }

  if (status.batt1) {
    can.drawDanger({
      startX: 724
      ,startY: 250
    });

    can.drawBubble({
      offsetX: 778
      ,offsetY: 278
      // ,color: '221,255,0'
      ,r: 39.4
    });
  }

  if (status.batt2) {
    can.drawDanger({
      startX: 724
      ,startY: 380
    });

    can.drawBubble({
      offsetX: 778
      ,offsetY: 408
      // ,color: '253,208,0'
      ,r: 39.4
    });
  }

  if (status.batt3) {
    can.drawDanger({
      startX: 724
      ,startY: 510
    });

    can.drawBubble({
      offsetX: 778
      ,offsetY: 538
      // ,color: '255,128,0'
      ,r: 39.4
    });
  }

  if (status.batt4) {
    can.drawDanger({
      startX: 724
      ,startY: 640
    });

    can.drawBubble({
      offsetX: 778
      ,offsetY: 668
      // ,color: '128,128,0'
      ,r: 39.4
    });
  }

  if (status.water1) {
    can.drawDanger({
      startX: 952
      ,startY: 160
    });

    can.drawBubble({
      offsetX: 1013
      ,offsetY: 186
      // ,color: '255,157,11'
      ,r: 47
    });
  }

  if (status.water2) {
    can.drawDanger({
      startX: 952
      ,startY: 520
    });

    can.drawBubble({
      offsetX: 1013
      ,offsetY: 540
      // ,color: '246,159,65'
      ,r: 47
    });
  }

  // 画电源
  can.drawPower({
    startX: 348
@@ -926,91 +1094,7 @@
    // ,noDraw: status.batt4 && flag
  });

  if (status.power3A) {
    can.drawDanger({
      startX: 314
      ,startY: 88
    });
  }

  if (status.power3B) {
    can.drawDanger({
      startX: 314
      ,startY: 250
    });
  }

  if (status.power2) {
    can.drawDanger({
      startX: 314
      ,startY: 436
    });
  }

  if (status.power1) {
    can.drawDanger({
      startX: 314
      ,startY: 590
    });
  }

  if (status.motor) {
    can.drawDanger({
      startX: 272
      ,startY: 720
    });
  }

  if (status.water3) {
    can.drawDanger({
      startX: 466
      ,startY: 730
    });
  }

  if (status.batt1) {
    can.drawDanger({
      startX: 724
      ,startY: 250
    });
  }

  if (status.batt2) {
    can.drawDanger({
      startX: 724
      ,startY: 380
    });
  }

  if (status.batt3) {
    can.drawDanger({
      startX: 724
      ,startY: 510
    });
  }

  if (status.batt4) {
    can.drawDanger({
      startX: 724
      ,startY: 640
    });
  }

  if (status.water1) {
    can.drawDanger({
      startX: 952
      ,startY: 160
    });
  }

  if (status.water2) {
    can.drawDanger({
      startX: 952
      ,startY: 520
    });
  }

  if (status.load1) {
  /*if (status.load1) {
    can.drawDanger({
      startX: 1410
      ,startY: 60
@@ -1036,7 +1120,7 @@
      startX: 1410
      ,startY: 624
    });
  }
  }*/

  // 画开关
  can.drawSwitch({

 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) {

 src/views/general/index.vue

@@ -151,6 +151,7 @@
  data () {
    return {
      timer: new Timeout(),
      timer_g: new Timeout(),
      containerH: 1000,
      chargepowerList: [],
      loadList: [],
@@ -1235,7 +1236,6 @@
    ,getSwitchStatus () {
      const arr = ['s_QD1', 's_QD2', 's_QD7', 's_QD9', 's_QF1', 's_QF2', 's_QF3', 's_QF4'];
      arr.forEach((v) => {
        console.log(v, this.$common.getLocalStorage(v), this.$common.getLocalStorage(v) * 1);
        this.switch_status[v] = this.$common.getLocalStorage(v) * 1;
      });
    }
@@ -1259,7 +1259,7 @@

      this.getConnect();

      draw.update(this, can1);
      // draw.update(this, can1);

      if (this.loadList.length) {
        this.setLoadData(this.loadList);
@@ -1271,6 +1271,14 @@

      this.timer.open();
    }, 1000);

    this.timer_g.start(() => {
      draw.update(this, can1);
      can1.runCounter();


      this.timer_g.open();
    }, 1000 / 30);
    
    resizeHandler = () => {
      this.setLoadPos();
@@ -1291,6 +1299,7 @@
  ,destroyed() {
    window.removeEventListener('resize', resizeHandler);
    this.timer.stop();
    this.timer_g.stop();
  }

}

 src/views/other/test.vue

@@ -10,14 +10,18 @@
        info="这是几个字"
        ></g-temp>
    </div> -->
    <div class="test2"><div class="">123456</div></div>
    <div class="test2"><div class="">123456</div></div>
    <div class="test3"></div>
    <canvas id="can1" ref="can1"></canvas>
  </div>
</template>

<script>
// import GTemp from '@/components/GTemp';
import Timeout from '@/script/Timeout';
let COUNT = 40;
let count = 0;
// 暂停6帖
let COUNT1 = 20;
let count1 = 0;
export default {
  components: {
    // GTemp
@@ -25,14 +29,183 @@
  ,data () {
    return {
      txt: '这是几个占位字符'
      ,timer: new Timeout()
    }
  },
  methods: {
    init () {
      const $can1 = this.$refs['can1'];
      const ctx = $can1.getContext('2d');
      $can1.width = 400;
      $can1.height = 300;



      this.timer.start(() => {
        this.update($can1);
        if (count1 == 0) {
          count++;
        }

        if (count == COUNT ||count == 0) {
          count1++;
        }

        count %= COUNT;
        count1 %= COUNT1;

        this.timer.open();
      }, 1000 / 30);

    }
    ,update (can) {
      if (count == 0) {
        return false;
      }
        // debugger;
      const ctx = can.getContext('2d');
      const width = can.width;
      const height = can.height;

      ctx.clearRect(0, 0, width, height);
      const r = 50 + count * 1;

      ctx.save();
      ctx.translate(200, 150);

      
      


      // 如果count < COUNT / 2
      // 画一个圆
      // 如果count > COUNT / 2
      // 画两个圆
      // 后期考虑外圆减淡
      /*if (count >= 2 * COUNT / 3 || count < COUNT / 3) {
        const r2 = 50 + (count - COUNT / 2) * 3;
        let grd2 = ctx.createRadialGradient(0, 0, 0, 0, 0, r2);
        grd2.addColorStop(0,"transparent");
        grd2.addColorStop(0.6,"transparent");
        grd2.addColorStop(1,"#f00");

        ctx.fillStyle = grd2;
        ctx.beginPath();
        ctx.arc(0, 0, r2, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();

        let grd = ctx.createRadialGradient(0, 0, 0, 0, 0, r);
        grd.addColorStop(0,"transparent");
        grd.addColorStop(0.6,"transparent");
        grd.addColorStop(1, 'rgba(255,255,0,' + (1 - 2 / COUNT * (count - COUNT / 2)) + ')');
        console.log('rgba(255,255,0,' + (1 - 2 / COUNT * (count - COUNT / 2)) + ')');
        ctx.fillStyle = grd;
        ctx.beginPath();
        ctx.arc(0, 0, r, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();

      }
      else {
        let grd = ctx.createRadialGradient(0, 0, 0, 0, 0, r);
        grd.addColorStop(0,"transparent");
        grd.addColorStop(0.6,"transparent");
        grd.addColorStop(1,"#ff0");
        ctx.fillStyle = grd;
        ctx.beginPath();
        ctx.arc(0, 0, r, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
      }*/


      /*if (count < COUNT / 3) {
        let grd = ctx.createRadialGradient(0, 0, 0, 0, 0, r);
        grd.addColorStop(0,"transparent");
        grd.addColorStop(0.6,"transparent");
        grd.addColorStop(1,"#ff0");
        ctx.fillStyle = grd;
        ctx.beginPath();
        ctx.arc(0, 0, r, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();

        let grd2 = ctx.createRadialGradient(0, 0, 0, 0, 0, r);
        grd2.addColorStop(0,"transparent");
        grd2.addColorStop(0.6,"transparent");
        grd2.addColorStop(1, 'rgba(255,255,0,' + (1 - 2 / COUNT * (count - COUNT / 2)) + ')');
        ctx.fillStyle = grd2;
        ctx.beginPath();
        ctx.arc(0, 0, r, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
      } else if (count >= 2 * COUNT / 3) {
        const r2 = 50 + (count - COUNT / 2) * 3;
        let grd2 = ctx.createRadialGradient(0, 0, 0, 0, 0, r2);
        grd2.addColorStop(0,"transparent");
        grd2.addColorStop(0.6,"transparent");
        grd2.addColorStop(1,"#f00");

        ctx.fillStyle = grd2;
        ctx.beginPath();
        ctx.arc(0, 0, r2, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();

        let grd = ctx.createRadialGradient(0, 0, 0, 0, 0, r);
        grd.addColorStop(0,"transparent");
        grd.addColorStop(0.6,"transparent");
        grd.addColorStop(1, 'rgba(255,255,0,' + (1 - 2 / COUNT * (count - COUNT / 2)) + ')');
        ctx.fillStyle = grd;
        ctx.beginPath();
        ctx.arc(0, 0, r, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
      } else {
        const r2 = 50 + (count - COUNT / 2) * 3;
        let grd2 = ctx.createRadialGradient(0, 0, 0, 0, 0, r2);
        grd2.addColorStop(0,"transparent");
        grd2.addColorStop(0.6,"transparent");
        grd2.addColorStop(1,"#00f");

        ctx.fillStyle = grd2;
        ctx.beginPath();
        ctx.arc(0, 0, r2, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();

        let grd = ctx.createRadialGradient(0, 0, 0, 0, 0, r);
        grd.addColorStop(0,"transparent");
        grd.addColorStop(0.6,"transparent");
        grd.addColorStop(1, 'rgba(255,255,0,' + (1 - 2 / COUNT * (count - COUNT / 2)) + ')');
        ctx.fillStyle = grd;
        ctx.beginPath();
        ctx.arc(0, 0, r, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
      }*/

      let grd = ctx.createRadialGradient(0, 0, 0, 0, 0, r);
      grd.addColorStop(0,"transparent");
      grd.addColorStop(0.6,"transparent");
      grd.addColorStop(1, 'rgba(255,255,0,' + (1 - count / (COUNT - 1)) + ')');
      // console.log((1 - count / (COUNT - 1)));
      ctx.fillStyle = grd;
      ctx.beginPath();
      ctx.arc(0, 0, r, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fill();
      
      ctx.restore();



    }

  }
  ,mounted () {

    this.init();
  }

}
@@ -43,28 +216,9 @@
  padding-top: 1px;
}

.test {
  width: 240px;
  height: 700px;
}
.test2 {
  display: inline-block;
  margin-left: 8px;
  margin-top: 40px;
  width: 300px;
  height: 100px;
  border: 1px #ccc solid;
  -webkit-transform: skew(-16deg, 0);
  transform: skew(-16deg, 0);
  padding-left: 16px;
  padding-right: 16px;
}
.test2 div {
  /*background: green;*/
  line-height: 50px;
  height: 100%;
  -webkit-transform: skewX(16deg);
  transform: skewX(16deg);
  /*padding-left: 20px;*/
canvas {
  width: 400px;
  height: 300px;
  background: #000;
}
</style>