U 水冷加运行流向

whychw

2020-10-30 ae2b4b705d9beefe4556e13ce50902899caeae69

U 水冷加运行流向

 src/components/PageHeader.vue

@@ -6,8 +6,9 @@
        <div class="page-right">
            <span>{{$store.state.login.username}}</span><i class="separator"></i>
            <!-- <span>修改密码</span><i class="separator"></i> -->
            <span class="cursor_pointer" @click="logout">退出登录</span><i class="separator"></i>
            <span class="cursor_pointer" @click="selectTheme">换肤</span>
            <span class="cursor_pointer" @click="logout">退出登录</span>
            <!-- <i class="separator"></i> -->
            <!-- <span class="cursor_pointer" @click="selectTheme">换肤</span> -->
        </div>
        <div class="info">温度: <span>{{temp}}℃</span>  湿度: <span>{{hum}}%</span></div>
    </div>

 src/router/routes.js

@@ -8,14 +8,23 @@
        component: (resolve)=>require(['@/views/user/login.vue'], resolve)
    },
    // 换肤
    {
    /*{
        path: '/selectTheme',
        name: 'SelectTheme',
        meta: {
            crumb: '换肤'
        },
        component: (resolve)=>require(['@/views/user/selectTheme.vue'], resolve)
    },
    },*/
    // 测试
    /*{
        path: '/test',
        name: 'TEST',
        meta: {
            crumb: '测试'
        },
        component: (resolve)=>require(['@/views/other/test.vue'], resolve)
    },*/
    {
        path: '/page',
        name: 'Page',

 src/script/Timeout.js

@@ -20,6 +20,11 @@
        console.warn('未完整配置参数！');
    }
};
// 设置循环体 但不开始
Timeout.prototype.init = function (callback, time) {
    this.callback = callback;
    this.time = time;
}
// 开启计时器
Timeout.prototype.open = function() {
    var callback = this.callback;

 src/script/draw_water_cooling.js

@@ -14,6 +14,7 @@
import compressor_g from '@/assets/images/compressor_g.svg';
import condenser from '@/assets/images/condenser.svg';
import box from '@/assets/images/box.svg';
import Timeout from '@/script/Timeout';
// 水阀1
let Img_water_valve1 = new Image();
Img_water_valve1.src = water_valve1;
@@ -77,7 +78,188 @@
let Img_box = new Image();
Img_box.src = box;

// 移动小球的给当前几同帖数
let count = 0;
let timer = new Timeout();
let timer2 = new Timeout();
let timer3 = new Timeout();
// 上一次的状态集合
let last_flag = 0;

let ballList = [];
// 1号水冷的小球路径
const list1 = {
  p01: [
    {points: [1003, 80, 1090, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [1190, 80, 1278, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [1278, 80, 1365, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [1396, 80, 1488, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [580, 80, 630, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [672, 80, 774, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [774, 80, 876, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [876, 80, 977, 80], direction: 'right', fillStyle: '#ff816f'}
    // 三通出水
    ,{points: [1510, 106, 1510, 188], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1510, 188, 1510, 270], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1510, 310, 1510, 410], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1510, 410, 1510, 510], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1510, 510, 1510, 610], direction: 'bottom', fillStyle: '#ff816f'}
    // 进冷凝器
    ,{points: [1534, 80, 1570, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [1570, 80, 1570, 150], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1570, 150, 1570, 220], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1570, 220, 1570, 290], direction: 'bottom', fillStyle: '#ff816f'}
    // 出冷凝器
    ,{points: [1570, 382, 1570, 496], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1570, 496, 1570, 610], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1382, 610, 1510, 610], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [1510, 610, 1570, 610], direction: 'left', fillStyle: '#90f7a7'}
    
    ,{points: [1140, 610, 1180, 610], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [1180, 610, 1269, 610], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [1269, 610, 1358, 610], direction: 'left', fillStyle: '#90f7a7'}

    ,{points: [580, 610, 610, 610], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [710, 610, 780, 610], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [880, 610, 910, 610], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [1010, 610, 1040, 610], direction: 'left', fillStyle: '#90f7a7'}
  ]
  ,p11: [
    {points: [990, 400, 1070, 400], direction: 'right', fillStyle: '#90f7a7'}
    ,{points: [1180, 400, 1180, 500], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1150, 400, 1180, 400], direction: 'right', fillStyle: '#90f7a7'}
  ]
  ,p12: [
    {points: [990, 500, 1070, 500], direction: 'right', fillStyle: '#90f7a7'}
    ,{points: [990, 400, 990, 500], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1150, 500, 1180, 500], direction: 'right', fillStyle: '#90f7a7'}
  ]
  ,p11_12: [
    {points: [990, 250, 990, 400], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1180, 500, 1180, 610], direction: 'bottom', fillStyle: '#90f7a7'}
  ]
  ,p13: [
    {points: [1150, 304, 1220, 304], direction: 'right', fillStyle: '#90f7a7'}
    ,{points: [1220, 304, 1290, 304], direction: 'right', fillStyle: '#90f7a7'}
    ,{points: [1290, 304, 1360, 304], direction: 'right', fillStyle: '#90f7a7'}
    ,{points: [1360, 304, 1360, 330], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1360, 370, 1360, 440], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1360, 440, 1360, 510], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1360, 510, 1360, 578], direction: 'bottom', fillStyle: '#90f7a7'}
  ]
};
const list2 = {
  p01: [
    {points: [1003, 80, 1090, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [1190, 80, 1278, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [1278, 80, 1365, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [1396, 80, 1488, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [580, 80, 630, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [672, 80, 774, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [774, 80, 876, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [876, 80, 977, 80], direction: 'right', fillStyle: '#ff816f'}
    // 三通出水
    ,{points: [1510, 106, 1510, 188], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1510, 188, 1510, 270], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1510, 310, 1510, 410], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1510, 410, 1510, 510], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1510, 510, 1510, 610], direction: 'bottom', fillStyle: '#ff816f'}
    // 进冷凝器
    ,{points: [1534, 80, 1570, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [1570, 80, 1570, 150], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1570, 150, 1570, 220], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1570, 220, 1570, 290], direction: 'bottom', fillStyle: '#ff816f'}
    // 出冷凝器
    ,{points: [1570, 382, 1570, 496], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1570, 496, 1570, 610], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1358, 610, 1510, 610], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [1510, 610, 1570, 610], direction: 'left', fillStyle: '#90f7a7'}
    
    ,{points: [1140, 610, 1180, 610], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [1180, 610, 1269, 610], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [1269, 610, 1358, 610], direction: 'left', fillStyle: '#90f7a7'}

    ,{points: [580, 610, 610, 610], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [710, 610, 830, 610], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [830, 610, 910, 610], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [1010, 610, 1040, 610], direction: 'left', fillStyle: '#90f7a7'}
  ]
  ,p11: [
    {points: [990, 400, 1070, 400], direction: 'right', fillStyle: '#90f7a7'}
    ,{points: [1180, 400, 1180, 500], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1150, 400, 1180, 400], direction: 'right', fillStyle: '#90f7a7'}
  ]
  ,p12: [
    {points: [990, 500, 1070, 500], direction: 'right', fillStyle: '#90f7a7'}
    ,{points: [990, 400, 990, 500], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1150, 500, 1180, 500], direction: 'right', fillStyle: '#90f7a7'}
  ]
  ,p11_12: [
    {points: [990, 250, 990, 400], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1180, 500, 1180, 610], direction: 'bottom', fillStyle: '#90f7a7'}
  ]
};
const list3 = {
  p01: [
    {points: [150, 80, 150, 204], direction: 'top', fillStyle: '#ff816f'}
    ,{points: [150, 80, 240, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [340, 80, 440, 80], direction: 'right', fillStyle: '#ff816f'}

    ,{points: [540, 80, 640, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [640, 80, 740, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [740, 80, 840, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [840, 80, 940, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [940, 80, 1040, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [1040, 80, 1140, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [1140, 80, 1240, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [1240, 80, 1365, 80], direction: 'right', fillStyle: '#ff816f'}

    ,{points: [1396, 80, 1488, 80], direction: 'right', fillStyle: '#ff816f'}
    // 三通出
    ,{points: [1532, 80, 1568, 80], direction: 'right', fillStyle: '#ff816f'}
    ,{points: [1512, 108, 1512, 199], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1512, 199, 1512, 290], direction: 'bottom', fillStyle: '#ff816f'}

    ,{points: [1512, 330, 1512, 465], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1512, 465, 1512, 600], direction: 'bottom', fillStyle: '#ff816f'}

    ,{points: [1568, 80, 1568, 185], direction: 'bottom', fillStyle: '#ff816f'}
    ,{points: [1568, 185, 1568, 290], direction: 'bottom', fillStyle: '#ff816f'}
    // 进电机
    ,{points: [150, 316, 150, 416], direction: 'top', fillStyle: '#90f7a7'}
    ,{points: [150, 416, 150, 516], direction: 'top', fillStyle: '#90f7a7'}
    ,{points: [150, 516, 150, 600], direction: 'top', fillStyle: '#90f7a7'}

    ,{points: [150, 600, 240, 600], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [340, 600, 440, 600], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [540, 600, 640, 600], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [740, 600, 840, 600], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [940, 600, 1040, 600], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [1040, 600, 1140, 600], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [1240, 600, 1376, 600], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [1376, 600, 1512, 600], direction: 'left', fillStyle: '#90f7a7'}
    ,{points: [1512, 600, 1568, 600], direction: 'left', fillStyle: '#90f7a7'}

    ,{points: [1568, 380, 1568, 490], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1568, 490, 1568, 600], direction: 'bottom', fillStyle: '#90f7a7'}
  ]
  ,p11: [
    {points: [848, 340, 944, 340], direction: 'right', fillStyle: '#90f7a7'}
    ,{points: [944, 340, 1040, 340], direction: 'right', fillStyle: '#90f7a7'}

    ,{points: [1040, 340, 1040, 470], direction: 'bottom', fillStyle: '#90f7a7'}
    ,{points: [1040, 470, 1040, 600], direction: 'bottom', fillStyle: '#90f7a7'}
  ]
};

const updateBalls = (can) => {
  can.updateCanvas();
  for (let i = 0, j = ballList.length; i < j; i++) {
    can.moveBall({points: ballList[i].points, direction: ballList[i].direction, fillStyle: ballList[i].fillStyle}, count);
  }
  count++;
  count %= can.COUNT;
}
/**
 * 画主体部分
 * @param  {[type]} can EleCircle实例
@@ -883,14 +1065,11 @@
      height: 40
      ,subName: 'input'
    }, true);
//////////////////
  can.drawText({
    x: 626,
    y: 98,
    txt: 'H01'
  });
  
    

  ctx.save();
  ctx.beginPath();
@@ -903,7 +1082,13 @@
  ctx.closePath();
  ctx.restore();
}
function update1 (can, status) {
function update1 (can, status, can2) {
  if (!timer.callback) {
    timer.init(function () {
      updateBalls(can2);
      timer.open();
    }, 1000 / 30);
  }
  // console.log(status, type);
  const ctx = can.context;
  // 清除画布
@@ -951,7 +1136,74 @@
    y: 96,
    txt: 'H01'
  });
  

  // 状态归纳 用二进制位表示
  // 右侧起第一位起依次是 1: p01, 2: p11, 3: p12, 4: p13
  let flag = status.p01 * 1 + status.p11 * 2 + status.p12 * 4 + status.p13 * 8;
  switch (flag) {
    // 全为0 表示没有没有小球要运动
    case 0B0000:
      timer.stop();
      can2.clearCanvas();
      break;
    case 0B0001:
      ballList = [...list1.p01];
      break;
    case 0B0010:
      ballList = [...list1.p11, ...list1.p11_12];
      break;
    case 0B0011:
      ballList = [...list1.p11, ...list1.p11_12, ...list1.p01];
      break;
    case 0B0100:
      ballList = [...list1.p12, ...list1.p11_12];
      break;
    case 0B0101:
      ballList = [...list1.p12, ...list1.p11_12, ...list1.p01];
      break;
    case 0B0110:
      ballList = [...list1.p12, ...list1.p11_12, ...list1.p11];
      break;
    case 0B0111:
      ballList = [...list1.p12, ...list1.p11_12, ...list1.p11, ...list1.p01];
      break;
    case 0B1000:
      ballList = [...list1.p13];
      break;
    case 0B1001:
      ballList = [...list1.p13, ...list1.p01];
      break;
    case 0B1010:
      ballList = [...list1.p13, ...list1.p11, ...list1.p11_12];
      break;
    case 0B1011:
      ballList = [...list1.p13, ...list1.p11, ...list1.p11_12, ...list1.p01];
      break;
    case 0B1100:
      ballList = [...list1.p13, ...list1.p12, ...list1.p11_12];
      break;
    case 0B1101:
      ballList = [...list1.p13, ...list1.p12, ...list1.p11_12, ...list1.p01];
      break;
    case 0B1110:
      ballList = [...list1.p13, ...list1.p12, ...list1.p11_12, ...list1.p11];
      break;
    case 0B1111:
      ballList = [...list1.p13, ...list1.p12, ...list1.p11_12, ...list1.p11, ...list1.p01];
      break;
  }

  // 数组发生变化时清空画布 因为不清会有阴影
  if (flag != last_flag) {
    can2.clearCanvas();
  }

  last_flag = flag;

  if (flag > 0) {
    timer.open();
  }


  // 水阀1
  if (status.v017) {
@@ -1373,7 +1625,7 @@
    }
  }

  if (status.p01) {
  /*if (status.p01) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(1562, 150);
@@ -1384,13 +1636,62 @@
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
  }
  }*/
}
function update2 (can, status) {
function update2 (can, status, can2) {
  if (!timer2.callback) {
    timer2.init(function () {
      updateBalls(can2);
      timer2.open();
    }, 1000 / 30);
  }
  // console.log(status, type);
  const ctx = can.context;
  // 清除画布
  can.clearCanvas();

  // 状态归纳 用二进制位表示
  // 右侧起第一位起依次是 1: p01, 2: p11, 3: p12
  let flag = status.p01 * 1 + status.p11 * 2 + status.p12 * 4;
  switch (flag) {
    // 全为0 表示没有没有小球要运动
    case 0B000:
      timer2.stop();
      can2.clearCanvas();
      break;
    case 0B001:
      ballList = [...list2.p01];
      break;
    case 0B010:
      ballList = [...list2.p11, ...list2.p11_12];
      break;
    case 0B011:
      ballList = [...list2.p11, ...list2.p11_12, ...list2.p01];
      break;
    case 0B100:
      ballList = [...list2.p12, ...list2.p11_12];
      break;
    case 0B101:
      ballList = [...list2.p12, ...list2.p11_12, ...list2.p01];
      break;
    case 0B110:
      ballList = [...list2.p12, ...list2.p11_12, ...list2.p11];
      break;
    case 0B111:
      ballList = [...list2.p12, ...list2.p11_12, ...list2.p11, ...list2.p01];
      break;
  }

  // 数组发生变化时清空画布 因为不清会有阴影
  if (flag != last_flag) {
    can2.clearCanvas();
  }

  last_flag = flag;

  if (flag > 0) {
    timer2.open();
  }

  ctx.save();
  ctx.beginPath();
@@ -1791,7 +2092,7 @@
    }
  }

  if (status.p01) {
  /*if (status.p01) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(1562, 150);
@@ -1802,13 +2103,50 @@
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
  }
  }*/
}
function update3 (can, status) {
function update3 (can, status, can2) {
  if (!timer.callback) {
    timer3.init(function () {
      updateBalls(can2);
      timer3.open();
    }, 1000 / 30);
  }
  // console.log(status, type);
  const ctx = can.context;
  // 清除画布
  can.clearCanvas();

  // 状态归纳 用二进制位表示
  // 右侧起第一位起依次是 1: p01, 2: p11
  let flag = status.p01 * 1 + status.p11 * 2;
  switch (flag) {
    // 全为0 表示没有没有小球要运动
    case 0B00:
      timer2.stop();
      can2.clearCanvas();
      break;
    case 0B01:
      ballList = [...list3.p01];
      break;
    case 0B10:
      ballList = [...list3.p11];
      break;
    case 0B11:
      ballList = [...list3.p11, ...list3.p01];
      break;
  }

  // 数组发生变化时清空画布 因为不清会有阴影
  if (flag != last_flag) {
    can2.clearCanvas();
  }

  last_flag = flag;

  if (flag > 0) {
    timer3.open();
  }

  ctx.save();
  ctx.beginPath();
@@ -2022,7 +2360,7 @@
    endY: 600
  });

  if (status.p01) {
  /*if (status.p01) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(1562, 150);
@@ -2033,14 +2371,27 @@
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
  }
  }*/

}

const stop = (id) => {
  switch (id) {
    case 1:
      timer.stop();
      break;
    case 2:
      timer2.stop();
      break;
    case 3:
      timer3.stop();
      break;
  }
}
export default {
  main: draw_main
  ,main_3: draw_main_3
  ,update1
  ,update2
  ,update3
  ,stop
};

 src/script/drawplus.js

@@ -5,7 +5,7 @@
    }
    return FirstOBJ;
}
function EleCircle (canvas) {
function EleCircle (canvas, count) {
  this.canvas = document.getElementById(canvas);
  this.context = this.canvas.getContext('2d');
  // this.opts = [];
@@ -24,6 +24,8 @@
  this.context.strokeStyle = '#fff';
  this.context.fillStyle = "#fff";
  this.context.font = "16px Arial";
  // 做移动小球的时候移动一条线段所需要的刷新次数 默认40
  this.COUNT = count || 40;
  // 用来存放快照 初始1px * 1px
  this.imageData = this.context.createImageData(1, 1);
}
@@ -470,6 +472,19 @@
  this.clearRectBeTween2Points(obj.tlPoint, obj.brPoint);
}

/**
 * 动态层 移动的拖尾效果 用填充替代擦除
 */
EleCircle.prototype.updateCanvas = function () {
  this.context.save();
  this.context.fillStyle = "rgba(0, 0, 0, 0.85)";
  this.context.globalCompositeOperation = 'destination-in';
  // this.context.globalCompositeOperation = 'destination-atop';
  // this.context.globalCompositeOperation = 'destination-out';
  this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
  this.context.restore();
}

EleCircle.prototype.clearCanvas = function () {
  // 清空 elementList elementObjects counterList
  this.elementList = [];
@@ -483,6 +498,86 @@
}

/**
 * 移动的小球 表示流向的
 */
EleCircle.prototype.moveBall = function (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]) / this.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.context);
      this.draw
      break;
    // 向下
    case 'bottom':
    // debugger;
      step = (points[3] - points[1]) / this.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
      }, this.context);
      break;
    // 向左
    case 'left':
      step = (points[2] - points[0]) / this.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
      }, this.context);
      break;
    // 向右
    case 'right':
      step = (points[2] - points[0]) / this.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
      }, this.context);
      break;
  }
}

/**
 * 生成元素ID
 */
EleCircle.prototype._createElementId = function (type) {

 src/views/general/index.vue

@@ -827,10 +827,10 @@
          this.powerInfo[2].cur = (CD.alldccurr).toFixed(bit);
          // 电源运行状态
          if (AB.alldcvol > 50) {
            this.status[2].run = true;
            this.status_power[2].run = true;
          }
          if (CD.alldcvol > 50) {
            this.status[1].run = true;
            this.status_power[1].run = true;
          }
        }
      });

 src/views/other/test.vue

New file
@@ -0,0 +1,96 @@
<template>
  <div class="main">
    <div class="G-contain">
      <canvas id="can1" class="can1" width="800" height="400" ref="can1"></canvas>
      <canvas id="can2" class="can2" width="800" height="400" ref="can2"></canvas>
    </div>
  </div>
</template>

<script>
// 引入电路图
import EleCircle from '@/script/drawplus'
let can1, can2;
// const STEP = 4;
let count = 0;
export default {
  name: 'Circuit',
  data () {
    return {
      timer: new this.$common.Timeout()
    }
  },
  methods: {
    test () {
      can1 = new EleCircle('can1');
      can2 = new EleCircle('can2');

      can1.drawLine({
        startX: 100,
        startY: 40,
        endX: 400,
        endY: 40
      });

      can1.drawLine({
        startX: 400,
        startY: 40,
        endX: 400,
        endY: 80
      });

      can1.drawLine({
        startX: 400,
        startY: 80,
        endX: 600,
        endY: 80
      });
    }
    ,update (list) {
      can2.updateCanvas();
      for (let i = 0, j = list.length; i < j; i++) {
        can2.moveBall({points: list[i].points, direction: list[i].direction}, count);
      }
      count++;
      count %= can2.COUNT;
    }
    ,loop () {
      this.timer.start(() => {
        this.update([
          {points: [100, 40, 250, 40], direction: 'left'}
          ,{points: [250, 40, 400, 40], direction: 'left'}
          ,{points: [400, 40, 400, 80], direction: 'top'}
          ,{points: [400, 80, 500, 80], direction: 'left'}
          ,{points: [500, 80, 600, 80], direction: 'left'}
        ]);
        this.timer.open();
      }, 1000/40);
    }

  }
  ,mounted () {
    this.test();
    this.loop();
  }

}
</script>
<style scoped>
.main {
  height: 100%;
  width: 100%;
}
.G-contain {
  position: relative;
  background: gray;
  width: 100%;
  height: 100%;
}
canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>

 src/views/waterCooling/index1.vue

@@ -12,6 +12,7 @@
        <div class="canvas_container posA_full" ref="container">
          <canvas id="can" width="1800" height="700" ref="can"></canvas>
          <canvas class="can1" id="can1" width="1800" height="700"  ref="can1"></canvas>
          <canvas class="can1" id="can2" width="1800" height="700"  ref="can2"></canvas>
          <science-box v-for="(load, key) in loads" :key="'load_' + key" 
            no-header
            class="panel_info"
@@ -130,7 +131,7 @@
import type from '@/script/config_water';
import ProgressLoad from '@/components/ProgressLoad'

let can, can1, resizeHandler;
let can, can1, can2, resizeHandler;
// 临时存放格式化后的表格数据
// [0: rtData, 1: branchData, 2: stateData, 3: 告警]
// let list = [[], [], [], []];
@@ -706,14 +707,13 @@
          // this.tlist = [...list[0], ...list[1], ...list[2], ...list[3]];
          // list = [[], [], [], []];
          // console.log(this.G_status, '99999999999999990000000000000000000');
          draw.update1(can1, this.G_status);
          draw.update1(can1, this.G_status, can2);
          
          this.timer.open();
        }).catch((err)=>{
          console.error(err);
          this.timer.open();
        });
          // draw.update1(can1, this.G_status);
      }, 1000);
    }
    // 数据导出
@@ -796,6 +796,7 @@
    // const $can1 = this.$refs.can1;
    can = new EleCircle('can');
    can1 = new EleCircle('can1');
    can2 = new EleCircle('can2');
    /*let width = $container.offsetWidth;
    let height = $container.offsetHeight;*/

@@ -816,6 +817,7 @@
  destroyed() {
    window.removeEventListener('resize', resizeHandler);
    this.timer.stop();
    draw.stop(1);
  }

}

 src/views/waterCooling/index2.vue

@@ -12,6 +12,7 @@
        <div class="canvas_container posA_full" ref="container">
          <canvas id="can" width="1800" height="700" ref="can"></canvas>
          <canvas class="can1" id="can1" width="1800" height="700"  ref="can1"></canvas>
          <canvas class="can1" id="can2" width="1800" height="700"  ref="can2"></canvas>
          <science-box v-for="(load, key) in loads" :key="'load_' + key" 
            no-header
            class="panel_info"
@@ -130,7 +131,7 @@
import type from '@/script/config_water';
import ProgressLoad from '@/components/ProgressLoad'

let can, can1, resizeHandler;
let can, can1, can2, resizeHandler;
// 临时存放格式化后的表格数据
// [0: rtData, 1: branchData, 2: stateData, 3: 告警]
// let list = [[], [], [], []];
@@ -654,14 +655,13 @@
        .then(()=> {
          // this.tlist = [...list[0], ...list[1], ...list[2], ...list[3]];
          // list = [[], [], [], []];
          draw.update2(can1, this.G_status);
          draw.update2(can1, this.G_status, can2);
          
          this.timer.open();
        }).catch((err)=>{
          console.error(err);
          this.timer.open();
        });
        // draw.update2(can1, this.G_status);
      }, 1000);
    }
    // 数据导出
@@ -744,6 +744,7 @@
    // const $can1 = this.$refs.can1;
    can = new EleCircle('can');
    can1 = new EleCircle('can1');
    can2 = new EleCircle('can2');
    /*let width = $container.offsetWidth;
    let height = $container.offsetHeight;*/

@@ -764,6 +765,7 @@
  destroyed() {
    window.removeEventListener('resize', resizeHandler);
    this.timer.stop();
    draw.stop(2);
  }

}

 src/views/waterCooling/index3.vue

@@ -12,7 +12,7 @@
        <div class="canvas_container posA_full" ref="container">
          <canvas id="can" width="1800" height="700" ref="can"></canvas>
          <canvas class="can1" id="can1" width="1800" height="700"  ref="can1"></canvas>
          
          <canvas class="can1" id="can2" width="1800" height="700"  ref="can2"></canvas>
          <science-box v-for="(item, index) in inputList" :key="index" 
            class="panel_input"
            no-header
@@ -106,7 +106,7 @@
import type from '@/script/config_water';
import ProgressLoad from '@/components/ProgressLoad'

let can, can1, resizeHandler;
let can, can1, can2, resizeHandler;
// 临时存放格式化后的表格数据
// [0: rtData, 1: branchData, 2: stateData, 3: 告警]
// let list = [[], [], [], []];
@@ -443,15 +443,13 @@
        .then(()=> {
          // this.tlist = [...list[0], ...list[1], ...list[2], ...list[3]];
          // list = [[], [], [], []];
          draw.update3(can1, this.G_status);
          draw.update3(can1, this.G_status, can2);
          
          this.timer.open();
        }).catch((err)=>{
          console.error(err);
          this.timer.open();
        });
        // draw.update3(can1, this.G_status);
         this.timer.open();
      }, 1000);
    }
    // 数据导出
@@ -534,6 +532,7 @@
    // const $can1 = this.$refs.can1;
    can = new EleCircle('can');
    can1 = new EleCircle('can1');
    can2 = new EleCircle('can2');
    /*let width = $container.offsetWidth;
    let height = $container.offsetHeight;*/

@@ -554,6 +553,7 @@
  destroyed() {
    window.removeEventListener('resize', resizeHandler);
    this.timer.stop();
    draw.stop(3);
  }

}