U 电机页面运行效果修改

whychw

2021-02-27 872cd0a2f8f2dc46d93259b19c8c609c30bba99b

U 电机页面运行效果修改

 src/components/Circuit.vue

@@ -4,6 +4,7 @@
    <canvas ref="canvas" width="800" height="330"></canvas>
    <!-- 修改层 -->
    <canvas ref="canvas1" width="800" height="330" class="canvas1"></canvas>
    <canvas ref="canvas2" width="800" height="330" class="canvas1"></canvas>
    <div class="panel panel-status1" :style="getStyle(0)">
      <div class="item">
        <div class="">运行</div>
@@ -56,6 +57,11 @@
        <div class="">加载电机风机运行</div>
      </div>
    </div>
    <!-- 推进动画 -->
    <div class="posA panel-ani" v-show="switchStatus" :style="getStyle(4)">
    </div>
    <div class="posA panel-ani" v-show="switchStatus" :style="getStyle(5)">
    </div>
  </div>
</template>

@@ -63,12 +69,15 @@

import motor1 from '@/assets/imgs/motor1.png';
import motor2 from '@/assets/imgs/motor2.png';
import Timeout from '@/script/Timeout';
let Img_motor1 = new Image();
Img_motor1.src = motor1;
let Img_motor2 = new Image();
Img_motor2.src = motor2;
let de = 0;
let resizeHandler;
const COUNT = 40;
let count = 0;
const POSITION_LIST = [{
  left: 20
  ,top: 140
@@ -97,13 +106,43 @@
  ,bottom: 176
  ,width: 210
  ,height: 36
}, {
  left: 150
  ,top: 225
  ,right: 0
  ,bottom: 0
  ,width: 268
  ,height: 22
}, {
  left: 501
  ,top: 225
  ,right: 0
  ,bottom: 0
  ,width: 145
  ,height: 22
}]

let timer = new Timeout();
export default {
  name: 'Circuit',
  data () {
    return {
      timer: new this.$common.Timeout()
      ,position_list: [{
        left: 0
        ,top: 0
        ,right: 0
        ,bottom: 0
        ,width: 0
        ,height: 0
      }, {
        left: 0
        ,top: 0
        ,right: 0
        ,bottom: 0
        ,width: 0
        ,height: 0
      }, {
        left: 0
        ,top: 0
        ,right: 0
@@ -139,7 +178,7 @@
      type: String,
      default: '690V'
    },
    switch: {
    switchStatus: {
      type: Boolean,
      default: false
    },
@@ -181,7 +220,7 @@
      const $container = this.$refs.root;
      let width = $container.offsetWidth;
      let height = $container.offsetHeight;
      for (let i = 0; i < 4; i++) {
      for (let i = 0; i < 6; i++) {
        const obj = this.$common.transSize(width, height, 800, 330, POSITION_LIST[i]);
        this.position_list[i].left = obj.left;
        this.position_list[i].top = obj.top;
@@ -257,10 +296,10 @@
      ctx.stroke();
      ctx.restore();

      ctx.save();
      /*ctx.save();
      ctx.lineWidth = 3;
      ctx.strokeRect(650, 10, 100, 80);
      ctx.restore();
      ctx.restore();*/
      ctx.save();
      ctx.fillStyle = '#00f7f9';
      ctx.fillText('变频器', 700, 50);
@@ -342,6 +381,20 @@
      const canvas = this.$refs.canvas1;
      const ctx = canvas.getContext('2d');

      const canvas2 = this.$refs.canvas2;
      const ctx2 = canvas2.getContext('2d');

      if (!timer.callback) {
        timer.init(() => {
          console.log('hh');
          this.updateBalls();
          timer.open();
        }, 1000 / 30);
      }

      timer.stop();
      // ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.fillStyle = '#fff';
      ctx.strokeStyle = '#fff';
      ctx.font = '16px Arial';
@@ -351,7 +404,7 @@

      ctx.clearRect(0, 0, 800, 330);

      if (this.switch) {
      if (this.switchStatus) {
        ctx.save();
        ctx.beginPath();
        ctx.lineWidth = 2;
@@ -414,6 +467,23 @@
        ctx.stroke();

        ctx.restore();
        // 画变频器的框
        ctx.save();
        ctx.lineWidth = 3;
        ctx.strokeStyle = '#0f0';
        ctx.strokeRect(650, 10, 100, 80);
        ctx.restore();

        timer.open();
      } else {
        // 画变频器的框
        ctx.save();
        ctx.lineWidth = 3;
        ctx.strokeRect(650, 10, 100, 80);
        ctx.restore();

        // 清除电流的画布
        ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
      }

      // 主电电压
@@ -438,7 +508,7 @@
      ctx.lineWidth = 2;
      ctx.translate(150, 50);
      ctx.beginPath();
      if (this.switch) {
      if (this.switchStatus) {
        // ctx.rotate(-2 * Math.PI / 180);
        ctx.strokeStyle = '#0f0';
      } else {
@@ -457,6 +527,138 @@

      
    }
    ,updateBalls () {
      let canvas = this.$refs.canvas2;
      let context = canvas.getContext('2d');
      this.updateCanvas(context, canvas);

      let ballList = [
        {points: [200, 50, 260, 50], direction: 'right', fillStyle: '#90f7a7'}
        ,{points: [362, 50, 419, 50], direction: 'right', fillStyle: '#90f7a7'}
        ,{points: [419, 50, 476, 50], direction: 'right', fillStyle: '#90f7a7'}
        ,{points: [476, 50, 533, 50], direction: 'right', fillStyle: '#90f7a7'}
        ,{points: [533, 50, 590, 50], direction: 'right', fillStyle: '#90f7a7'}
        ,{points: [590, 50, 650, 50], direction: 'right', fillStyle: '#90f7a7'}
        ,{points: [700, 90, 700, 145], direction: 'bottom', fillStyle: '#90f7a7'}
        ,{points: [700, 145, 700, 200], direction: 'bottom', fillStyle: '#90f7a7'}
      ];
      for (let i = 0, j = ballList.length; i < j; i++) {
        this.moveBalls({points: ballList[i].points, direction: ballList[i].direction, fillStyle: ballList[i].fillStyle}, count);
      }
      count++;
      count %= COUNT;
    }
    // 动态层 移动的拖尾效果 用填充替代擦除
    ,updateCanvas (context, canvas) {
      context.save();
      context.fillStyle = "rgba(0, 0, 0, 0.85)";
      context.globalCompositeOperation = 'destination-in';
      // context.globalCompositeOperation = 'destination-atop';
      // context.globalCompositeOperation = 'destination-out';
      context.fillRect(0, 0, canvas.width, canvas.height);
      context.restore();
    }
    // 画圆点
    ,drawPoint (options) {
      /*var defaults = {
        x: 0
        ,y: 0
        ,r: 0
        ,fillStyle: '#fff'
        ,strokeStyle: '#fff'
      }*/
      // var opts = deepObjMerge(defaults, options || {});
      let canvas = this.$refs.canvas2;
      let context = canvas.getContext('2d');
      context.save();
      context.strokeStyle = options.strokeStyle;
      context.fillStyle = options.fillStyle;
      
      context.beginPath();
      context.arc(options.x, options.y, options.r, 0, 2 * Math.PI);
      context.closePath();
      
      // context.stroke();
      context.fill();
      context.restore();
    }
    // 移动小球
    ,moveBalls (opts, count) {
      /*opts: {
        // 'top', 'bottom', 'left', 'right'
        direction: 'top'
        ,points: [startx, starty, endx, endy];
        ,fillStyle: '#ff816f'
      }*/
      let points = opts.points;
      let step = 0;
      let delta = 0;
      opts.fillStyle = opts.fillStyle || '#fff';
      switch (opts.direction) {
        // 向上
        case 'top':
          step = (points[3] - points[1]) / COUNT;
          delta = points[3];
          delta -= step * count;
          if (delta < points[1]) {
            delta = points[3];
          }
          this.drawPoint({
            x: points[2],
            y: delta,
            fillStyle: opts.fillStyle,
            r: 6
          });
          // this.draw
          break;
        // 向下
        case 'bottom':
        // debugger;
          step = (points[3] - points[1]) / COUNT;
          delta = points[1];
          delta += step * count;
          if (delta > points[3]) {
            delta = points[1];
          }
          this.drawPoint({
            x: points[2],
            y: delta,
            fillStyle: opts.fillStyle,
            r: 6
          });
          break;
        // 向左
        case 'left':
          step = (points[2] - points[0]) / COUNT;
          delta = points[2];
          delta -= step * count;
          if (delta < points[0]) {
            delta = points[2];
          }
          this.drawPoint({
            x: delta,
            y: points[1],
            fillStyle: opts.fillStyle,
            r: 6
          });
          break;
        // 向右
        case 'right':
          step = (points[2] - points[0]) / COUNT;
          delta = points[0];
          delta += step * count;
          if (delta > points[2]) {
            delta = points[0];
          }
          this.drawPoint({
            x: delta,
            y: points[1],
            fillStyle: opts.fillStyle,
            r: 6
          });
          break;
      }
    }
  },
  mounted () {
    this.init();
@@ -469,6 +671,8 @@
  },
  destroyed () {
    this.timer.stop();
    timer.stop();
    timer.callback = null;
    window.removeEventListener('resize', resizeHandler);
  }

@@ -534,4 +738,45 @@
    display: flex;
    align-items: center;
  }
  .panel-ani {
    background: rgba(0, 0, 0, .8);
    overflow: hidden;
    --stripe-size: 30px;
    --color1: #00f7f9;
    --color2: #313131;
    --duration: .2s;
  }
  .panel-ani::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + var(--stripe-size));
    height: 100%;
    background: repeating-linear-gradient(45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
    background-size: var(--stripe-size) var(--stripe-size);
    -webkit-animation: stripeTransform var(--duration) linear infinite;
            animation: stripeTransform var(--duration) linear infinite;
  }
  @-webkit-keyframes stripeTransform {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(calc(var(--stripe-size) * -1));
              transform: translateX(calc(var(--stripe-size) * -1));
    }
  }

  @keyframes stripeTransform {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(calc(var(--stripe-size) * -1));
              transform: translateX(calc(var(--stripe-size) * -1));
    }
  }
</style>

 src/script/Timeout.js

@@ -17,8 +17,8 @@
        }
        this.timer = setTimeout(callback, time);
    }else {
        console.trace('timeout');
        debugger;
        // console.trace('timeout');
        // debugger;
        console.warn('未完整配置参数！');
    }
};

 src/script/drawplus.js

@@ -526,7 +526,7 @@
        fillStyle: opts.fillStyle,
        r: 6
      }, this.context);
      this.draw
      // this.draw
      break;
    // 向下
    case 'bottom':

 src/views/motor/index.vue

@@ -23,7 +23,7 @@
                <div class="panel-inner">
                  <circuit
                    ref="circuit"
                    :switch="G_switch"
                    :switch-status="G_switch"
                    :status="G_status"
                    :voltage="G_voltage"></circuit>
                </div>
@@ -390,7 +390,7 @@
      // 电路图 电压
      G_voltage: '10kV',
      // 电路图 开关
      G_switch: true,
      G_switch: false,
      // 电路图 状态
      // [0运行, 1报警, 2故障, 3紧停, 4滑油泵1运行, 5滑油泵2运行, 6滑油允许加载电机启动, 7滑油允许操控台启动, 8滑油报警, 9滑油故障, 10加载电机风机运行]
      G_status: {