U 样式修改 水冷图添加状态效果

whychw

2020-10-09 bd10cb08d24cc0324d1f20af0947b23f5cd654a7

U 样式修改 水冷图添加状态效果

 src/assets/css/common.css

@@ -323,7 +323,7 @@
    display: flex;
    flex-direction: column;
}
.el-input__inner {
.dialog-bg .el-input__inner {
    background: transparent;
    color: #fff;
}
@@ -334,7 +334,7 @@
    outline: 0;
}

.el-input__inner {
.dialog-bg .el-input__inner {
    color: #fff;
}
.el-dialog__body .el-input__inner {
@@ -717,6 +717,7 @@

.transparent.el-input.is-disabled .el-input__inner {
    background-color: transparent;
    color: #fff;
}
.transparent.alarm.el-input .el-input__inner {
    background-color: red;

 src/assets/css/m-element-ui.css

@@ -268,7 +268,9 @@
}

.el-form-item .el-form-item__label {
    /*color: #606266;*/
    color: #606266;
}
.dialog-bg .el-form-item .el-form-item__label {
    color: inherit;
}

@@ -353,13 +355,19 @@
.el-dialog__body .el-pagination  {
    margin-top: .4em;
}
.el-dialog__body .el-pagination .el-input__inner {
.dialog-bg .el-dialog__body .el-pagination .el-input__inner {
    color: #fff;
}

.el-dialog__body  .el-form-item .el-form-item__label {
.dialog-bg .el-dialog__body  .el-form-item .el-form-item__label {
    color: #fff;
}
.el-dialog__body .el-input__inner {
.dialog-bg .el-dialog__body .el-input__inner {
    color: #fff;
}
.dialog-white .el-dialog__body  .el-form-item .el-form-item__label {
    color: #333;
}
.dialog-white .el-dialog__body .el-input__inner {
    color: #333;
}

 src/script/draw_water_cooling.js

@@ -101,42 +101,6 @@
    });
  }

  /*// 水罐2
  if (Img_pot2.complete) {
    ctx.drawImage(Img_pot2, 950, 40, 80, 80);
  } else {
    Img_pot2.onload = () => {
      ctx.drawImage(Img_pot2, 950, 40, 80, 80);
    };
  }*/

  // 三通
  if (Img_pump1.complete) {
    ctx.drawImage(Img_pump1, 1480, 70, 60, 40);
  } else {
    Img_pump1.onload = () => {
      ctx.drawImage(Img_pump1, 1480, 70, 60, 40);
    };
  }

  // 水泵3
/*  if (Img_pump3.complete) {
    ctx.drawImage(Img_pump3, 1070, 368, 82, 60);
  } else {
    Img_pump3.onload = () => {
      ctx.drawImage(Img_pump3, 1070, 368, 82, 60);
    };
  }*/

  // 压缩机
  /*if (Img_compressor.complete) {
    ctx.drawImage(Img_compressor, 1070, 468, 82, 60);
  } else {
    Img_compressor.addEventListener('load', () => {
      ctx.drawImage(Img_compressor, 1070, 468, 82, 60);
    });
  }*/

  // 冷凝器
  if (Img_condenser.complete) {
    ctx.drawImage(Img_condenser, 1555, 276, 60, 120);
@@ -155,51 +119,49 @@
    };
  }

  // 画左侧的长方形7 index:0
  can.drawRect({
    strokeStyle: 'transparent',
    startX: 10,
    startY: 10,
    width: 170,
    height: 200
  }, true);

  if (2 == type || 1 == type) {
    // 画左侧的长方形7 index:0
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 10,
      startY: 10,
      width: 170,
      height: 200
    }, true);
  // 画左侧的长方形4 index:1
  can.drawRect({
    strokeStyle: 'transparent',
    startX: 10,
    startY: 250,
    width: 170,
    height: 200
  }, true);

    // 画左侧的长方形4 index:1
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 10,
      startY: 250,
      width: 170,
      height: 200
    }, true);
  // 画左侧的长方形1 index:2
  can.drawRect({
    strokeStyle: 'transparent',
    startX: 10,
    startY: 490,
    width: 170,
    height: 200
  }, true);
  can.drawRect({
    strokeStyle: 'transparent',
    startX: 690,
    startY: 20,
    width: 200,
    height: 50
    ,subName: 'title'
  }, true);
  can.drawRect({
    strokeStyle: 'transparent',
    startX: 1320,
    startY: 32,
    width: 40,
    height: 40
    ,subName: 'motor'
  }, true);

    // 画左侧的长方形1 index:2
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 10,
      startY: 490,
      width: 170,
      height: 200
    }, true);
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 690,
      startY: 20,
      width: 200,
      height: 50
      ,subName: 'title'
    }, true);
    can.drawRect({
      strokeStyle: 'transparent',
      startX: 1320,
      startY: 32,
      width: 40,
      height: 40
      ,subName: 'motor'
    }, true);
  }
  if (1 == type) {
    // 水罐1
    if (Img_pot1.complete) {
@@ -210,28 +172,10 @@
      });
    }

    // 压缩机
    /*if (Img_compressor.complete) {
      ctx.drawImage(Img_compressor, 1070, 268, 82, 60);
    } else {
      Img_compressor.addEventListener('load', () => {
        ctx.drawImage(Img_compressor, 1070, 268, 82, 60);
      });
    }*/

    can.drawText({
      x: 1040,
      y: 304,
      txt: 'P13'
    });



    can.drawLine({
      startX: 1150,
      startY: 304,
      endX: 1360,
      endY: 304
    });

    can.drawText({
@@ -244,20 +188,6 @@
      x: 1390,
      y: 458,
      txt: 'V502'
    });

    can.drawLine({
      startX: 1360,
      startY: 304,
      endX: 1360,
      endY: 330
    });

    can.drawLine({
      startX: 1360,
      startY: 370,
      endX: 1360,
      endY: 578
    });

    can.drawLine({
@@ -439,7 +369,7 @@
    height: 40
  }, true);*/

  if (2 == type || 1 == type) {
  // if (2 == type || 1 == type) {
    // 画连线
    can.drawLine({
      startX: 95,
@@ -475,7 +405,7 @@
      endX: 210,
      endY: 590
    });
  }
  // }
  if (1 == type) {
    // index: 6    TRT01_T 阀厅温度
    can.drawRect({
@@ -574,26 +504,13 @@
    endY: 590
  });

  // 画管线
  can.drawLine({
    startX: 580,
    startY: 80,
    endX: 630,
    endY: 80
  });
  can.drawLine({
    startX: 670,
    startY: 80,
    endX: 978,
    endY: 80
  });
  // h200
  can.drawLine({
  // h200 V018
  /*can.drawLine({
    startX: 750,
    startY: 80,
    endX: 750,
    endY: 280
  });
  });*/
  if (2 == type) {
    // h290 中竖线 FIT10
    can.drawLine({
@@ -609,86 +526,9 @@
      endY: 610
    });
  }
  if (1 == type) {
    // h290 中竖线 FIT10
    can.drawLine({
      startX: 750,
      startY: 320,
      endX: 750,
      endY: 610
    });
  }
  // 
  can.drawLine({
    startX: 580,
    startY: 610,
    endX: 610,
    endY: 610
  });
  // 
  can.drawLine({
    startX: 710,
    startY: 610,
    endX: 910,
    endY: 610
  });
  can.drawLine({
    startX: 1010,
    startY: 610,
    endX: 1040,
    endY: 610
  });
  can.drawLine({
    startX: 1140,
    startY: 610,
    endX: 1320,
    endY: 610
  });
  // h210  补水泵竖线
  can.drawLine({
    startX: 1180,
    startY: 610,
    endX: 1180,
    endY: 400
  });
  can.drawLine({
    startX: 1150,
    startY: 500,
    endX: 1180,
    endY: 500
  });
  can.drawLine({
    startX: 1150,
    startY: 400,
    endX: 1180,
    endY: 400
  });
  can.drawLine({
    startX: 990,
    startY: 500,
    endX: 1070,
    endY: 500
  });
  can.drawLine({
    startX: 990,
    startY: 400,
    endX: 1070,
    endY: 400
  });
  can.drawLine({
    startX: 990,
    startY: 250,
    endX: 990,
    endY: 500
  });
  // 长 底横
  can.drawLine({
    startX: 1320,
    startY: 610,
    endX: 1570,
    endY: 610
  });
  can.drawLine({
  
  /*can.drawLine({
    startX: 1003,
    startY: 80,
    endX: 1090,
@@ -705,27 +545,9 @@
    startY: 80,
    endX: 1488,
    endY: 80
  });
  can.drawLine({
    startX: 1534,
    startY: 80,
    endX: 1570,
    endY: 80
  });
  // 顶部最后一根横线
  can.drawLine({
    startX: 1600,
    startY: 80,
    endX: 1740,
    endY: 80
  });
  // 底部最后一根横线
  can.drawLine({
    startX: 1600,
    startY: 610,
    endX: 1740,
    endY: 610
  });
  });*/
  
  // V504
  can.drawLine({
    startX: 1280,
    startY: 80,
@@ -737,66 +559,6 @@
    startY: 160,
    endX: 1280,
    endY: 200
  });
  can.drawLine({
    startX: 1510,
    startY: 106,
    endX: 1510,
    endY: 270
  });
  can.drawLine({
    startX: 1510,
    startY: 310,
    endX: 1510,
    endY: 610
  });
  can.drawLine({
    startX: 1292,
    startY: 240,
    endX: 1420,
    endY: 240
  });
  can.drawLine({
    startX: 1420,
    startY: 240,
    endX: 1420,
    endY: 610
  });
  can.drawLine({
    startX: 1570,
    startY: 382,
    endX: 1570,
    endY: 610
  });
  can.drawLine({
    startX: 1600,
    startY: 382,
    endX: 1600,
    endY: 610
  });
  can.drawLine({
    startX: 1700,
    startY: 390,
    endX: 1700,
    endY: 610
  });
  can.drawLine({
    startX: 1570,
    startY: 290,
    endX: 1570,
    endY: 80
  });
  can.drawLine({
    startX: 1600,
    startY: 290,
    endX: 1600,
    endY: 80
  });
  can.drawLine({
    startX: 1700,
    startY: 284,
    endX: 1700,
    endY: 80
  });

  // 绘文字
@@ -934,113 +696,8 @@
      });
    }

    can.drawLine({
      startX: 150,
      startY: 316,
      endX: 150,
      endY: 600
    });
    can.drawLine({
      startX: 150,
      startY: 80,
      endX: 150,
      endY: 210
    });
    can.drawLine({
      startX: 150,
      startY: 80,
      endX: 240,
      endY: 80
    });
    can.drawLine({
      startX: 340,
      startY: 80,
      endX: 440,
      endY: 80
    });
    can.drawLine({
      startX: 540,
      startY: 80,
      endX: 1488,
      endY: 80
    });
    can.drawLine({
      startX: 1532,
      startY: 80,
      endX: 1568,
      endY: 80
    });
    can.drawLine({
      startX: 1600,
      startY: 80,
      endX: 1740,
      endY: 80
    });



    can.drawLine({
      startX: 150,
      startY: 600,
      endX: 240,
      endY: 600
    });
    can.drawLine({
      startX: 340,
      startY: 600,
      endX: 440,
      endY: 600
    });
    can.drawLine({
      startX: 540,
      startY: 600,
      endX: 640,
      endY: 600
    });
    can.drawLine({
      startX: 740,
      startY: 600,
      endX: 840,
      endY: 600
    });
    can.drawLine({
      startX: 940,
      startY: 600,
      endX: 1140,
      endY: 600
    });
    can.drawLine({
      startX: 1240,
      startY: 600,
      endX: 1568,
      endY: 600
    });
    //////////////////////
    can.drawLine({
      startX: 1600,
      startY: 600,
      endX: 1740,
      endY: 600
    });
    //////////////////////
    can.drawLine({
      startX: 1512,
      startY: 108,
      endX: 1512,
      endY: 290
    });
    can.drawLine({
      startX: 1512,
      startY: 330,
      endX: 1512,
      endY: 600
    });
    can.drawLine({
      startX: 1040,
      startY: 260,
      endX: 1040,
      endY: 600
    });
    
    can.drawLine({
      startX: 820,
      startY: 80,
@@ -1071,44 +728,8 @@
      y: 308,
      txt: 'V001'
    });
    can.drawLine({
      startX: 1568,
      startY: 80,
      endX: 1568,
      endY: 290
    });
    can.drawLine({
      startX: 1568,
      startY: 380,
      endX: 1568,
      endY: 600
    });
    can.drawLine({
      startX: 1600,
      startY: 80,
      endX: 1600,
      endY: 290
    });
    can.drawLine({
      startX: 1600,
      startY: 380,
      endX: 1600,
      endY: 600
    });

    can.drawLine({
      startX: 1700,
      startY: 80,
      endX: 1700,
      endY: 284
    });

    can.drawLine({
      startX: 1700,
      startY: 392,
      endX: 1700,
      endY: 600
    });
    
    

    can.drawRect({
      strokeStyle: 'transparent',
@@ -1282,213 +903,1144 @@
  ctx.closePath();
  ctx.restore();
}
function draw_update (can, status, type) {
function update1 (can, status) {
  // console.log(status, type);
  const ctx = can.context;
  // 清除画布
  can.clearCanvas();
  if (3 != type) {
    ctx.save();
    ctx.beginPath();
    ctx.arc(920, 64, 8, 0, 2 * Math.PI);
    if (status.H02) {
      ctx.fillStyle = '#f00';
    } else {
      ctx.fillStyle = 'gray';
    }
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#fff';
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
  
    ctx.save();
    ctx.beginPath();
    ctx.arc(920, 96, 8, 0, 2 * Math.PI);
    if (status.H01) {
      ctx.fillStyle = '#f00';
    } else {
      ctx.fillStyle = 'gray';
    }
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#fff';
    ctx.closePath();
    ctx.stroke();
    ctx.restore();

    can.drawText({
      fillStyle: '#fff',
      x: 950,
      y: 70,
      txt: 'H02'
    });
    can.drawText({
      fillStyle: '#fff',
      x: 950,
      y: 96,
      txt: 'H01'
    });
    
  ctx.save();
  ctx.beginPath();
  ctx.arc(920, 64, 8, 0, 2 * Math.PI);
  if (status.H02) {
    ctx.fillStyle = '#f00';
  } else {
    ctx.fillStyle = 'gray';
  }
  ctx.fill();
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#fff';
  ctx.closePath();
  ctx.stroke();
  ctx.restore();

  ctx.save();
  ctx.beginPath();
  ctx.arc(920, 96, 8, 0, 2 * Math.PI);
  if (status.H01) {
    ctx.fillStyle = '#f00';
  } else {
    ctx.fillStyle = 'gray';
  }
  ctx.fill();
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#fff';
  ctx.closePath();
  ctx.stroke();
  ctx.restore();

  can.drawText({
    fillStyle: '#fff',
    x: 950,
    y: 70,
    txt: 'H02'
  });
  can.drawText({
    fillStyle: '#fff',
    x: 950,
    y: 96,
    txt: 'H01'
  });
  
    // 水阀1
    if (status.v017 || status.v023) {
      if (Img_water_valve1_g.complete) {
        ctx.drawImage(Img_water_valve1_g, 630, 53, 42, 40);
      }
    } else {
      if (Img_water_valve1.complete) {
        ctx.drawImage(Img_water_valve1, 630, 53, 42, 40);
      }
    }
  
    // 水阀2
    if (status.v018) {
      if (Img_water_valve270_g.complete) {
        ctx.drawImage(Img_water_valve270_g, 736, 280, 42, 40);
      }
    } else {
      if (Img_water_valve270.complete) {
        ctx.drawImage(Img_water_valve270, 736, 280, 42, 40);
      }
    }
  
    // 水阀3
    if (status.v054) {
      if (Img_water_valve270_g.complete) {
        ctx.drawImage(Img_water_valve270_g, 1266, 120, 42, 40);
      }
    } else {
      if (Img_water_valve270.complete) {
        ctx.drawImage(Img_water_valve270, 1266, 120, 42, 40);
      }
    }
  
    // 水阀4
    if (status.noName) {
      if (Img_water_valve270_g.complete) {
        ctx.drawImage(Img_water_valve270_g, 1496, 270, 42, 40);
      }
    } else {
      if (Img_water_valve270.complete) {
        ctx.drawImage(Img_water_valve270, 1496, 270, 42, 40);
      }
    }
    // P01
    if (status.p01) {
      if (Img_pump2_g.complete) {
        ctx.drawImage(Img_pump2_g, 1350, 30, 60, 60);
      }
    } else {
      if (Img_pump2.complete) {
        ctx.drawImage(Img_pump2, 1350, 30, 60, 60);
      }
    }
  
    // P11
    if (status.p11) {
      if (Img_pump3_g.complete) {
        ctx.drawImage(Img_pump3_g, 1070, 368, 82, 60);
      }
    } else {
      if (Img_pump3.complete) {
        ctx.drawImage(Img_pump3, 1070, 368, 82, 60);
      }
    }
  
    // P12
    if (status.p12) {
      if (Img_compressor_g.complete) {
        ctx.drawImage(Img_compressor_g, 1070, 468, 82, 60);
      }
    } else {
      if (Img_compressor.complete) {
        ctx.drawImage(Img_compressor, 1070, 468, 82, 60);
      }
    }
    // P13
    if (1 == type) {
      if (status.p13) {
        if (Img_compressor_g.complete) {
          ctx.drawImage(Img_compressor_g, 1070, 268, 82, 60);
        }
      } else {
        if (Img_compressor.complete) {
          ctx.drawImage(Img_compressor, 1070, 268, 82, 60);
        }
      }
    }
  
    
  
    if (1 == type) {
      // 水阀5
      if (status.v501) {
        if (Img_water_valve270_g.complete) {
          ctx.drawImage(Img_water_valve270_g, 1346, 330, 42, 40);
        }
      } else {
        if (Img_water_valve270.complete) {
          ctx.drawImage(Img_water_valve270, 1346, 330, 42, 40);
        }
      }
  
      // 水阀6
      if (status.v502) {
        if (Img_water_valve270_g.complete) {
          ctx.drawImage(Img_water_valve270_g, 1366, 470, 42, 40);
        }
      } else {
        if (Img_water_valve270.complete) {
          ctx.drawImage(Img_water_valve270, 1366, 470, 42, 40);
        }
      }

  // 水阀1
  if (status.v017) {
    if (Img_water_valve1_g.complete) {
      ctx.drawImage(Img_water_valve1_g, 630, 53, 42, 40);
    }
  } else {
    ctx.save();
    ctx.beginPath();
    ctx.arc(660, 96, 8, 0, 2 * Math.PI);
    if (status.H01) {
      ctx.fillStyle = '#f00';
    } else {
      ctx.fillStyle = 'gray';
    if (Img_water_valve1.complete) {
      ctx.drawImage(Img_water_valve1, 630, 53, 42, 40);
    }
    ctx.fill();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#fff';
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
  }

    if (status.p01) {
      if (Img_pump2_g.complete) {
        ctx.drawImage(Img_pump2_g, 1350, 30, 60, 60);
      }
    } else {
      if (Img_pump2.complete) {
        ctx.drawImage(Img_pump2, 1350, 30, 60, 60);
      }
  // 水阀2
  if (status.v018) {
    if (Img_water_valve270_g.complete) {
      ctx.drawImage(Img_water_valve270_g, 736, 280, 42, 40);
    }

    if (status.p11) {
      if (Img_pump3_g.complete) {
        ctx.drawImage(Img_pump3_g, 1000, 200, 82, 60);
      }
    } else {
      if (Img_pump3.complete) {
        ctx.drawImage(Img_pump3, 1000, 200, 82, 60);
      }
    can.drawLine({
      strokeStyle: '#0de500',
      startX: 750,
      startY: 80,
      endX: 750,
      endY: 280
    });
    can.drawLine({
      strokeStyle: '#0de500',
      startX: 750,
      startY: 320,
      endX: 750,
      endY: 610
    });
  } else {
    if (Img_water_valve270.complete) {
      ctx.drawImage(Img_water_valve270, 736, 280, 42, 40);
    }
    can.drawLine({
      startX: 750,
      startY: 80,
      endX: 750,
      endY: 280
    });
    can.drawLine({
      startX: 750,
      startY: 320,
      endX: 750,
      endY: 610
    });
  }

  // 水阀3
  if (status.v504) {
    if (Img_water_valve270_g.complete) {
      ctx.drawImage(Img_water_valve270_g, 1266, 120, 42, 40);
    }
  } else {
    if (Img_water_valve270.complete) {
      ctx.drawImage(Img_water_valve270, 1266, 120, 42, 40);
    }
  }

  // 水阀4
  if (status.noName) {
    if (Img_water_valve270_g.complete) {
      ctx.drawImage(Img_water_valve270_g, 1496, 270, 42, 40);
    }
  } else {
    if (Img_water_valve270.complete) {
      ctx.drawImage(Img_water_valve270, 1496, 270, 42, 40);
    }
  }
  // 三通
  if (status.p01) {
    if (Img_pump1_g.complete) {
      ctx.drawImage(Img_pump1_g, 1480, 70, 60, 40);
    }
  } else {
    if (Img_pump1.complete) {
      ctx.drawImage(Img_pump1, 1480, 70, 60, 40);
    }
  }
  // P01
  if (status.p01) {
    if (Img_pump2_g.complete) {
      ctx.drawImage(Img_pump2_g, 1350, 30, 60, 60);
    }
    // 主泵运行画线红色
    can.drawLine({
      strokeStyle: '#f00',
      startX: 580,
      startY: 80,
      endX: 630,
      endY: 80
    });
    can.drawLine({
      strokeStyle: '#f00',
      startX: 672,
      startY: 80,
      endX: 977,
      endY: 80
    });
  } else {
    if (Img_pump2.complete) {
      ctx.drawImage(Img_pump2, 1350, 30, 60, 60);
    }
    // 主泵不运行画线白色
    can.drawLine({
      startX: 580,
      startY: 80,
      endX: 630,
      endY: 80
    });
    can.drawLine({
      startX: 672,
      startY: 80,
      endX: 977,
      endY: 80
    });

  }

  can.drawLine({
    strokeStyle: status.p13 ? '#0de500' : '#fff',
    startX: 1150,
    startY: 304,
    endX: 1360,
    endY: 304
  });

  can.drawLine({
    strokeStyle: status.p13 ? '#0de500' : '#fff',
    startX: 1360,
    startY: 304,
    endX: 1360,
    endY: 330
  });

  can.drawLine({
    strokeStyle: status.p13 ? '#0de500' : '#fff',
    startX: 1360,
    startY: 370,
    endX: 1360,
    endY: 578
  });

  can.drawLine({
    strokeStyle: status.p11 ? '#0de500' : '#fff',
    startX: 990,
    startY: 400,
    endX: 1070,
    endY: 400
  });
  can.drawLine({
    strokeStyle: status.p11 || status.p12 ? '#0de500' : '#fff',
    startX: 990,
    startY: 250,
    endX: 990,
    endY: 400
  });
  can.drawLine({
    strokeStyle: status.p12 ? '#0de500' : '#fff',
    startX: 990,
    startY: 400,
    endX: 990,
    endY: 500
  });

  // 无名开关
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1510,
    startY: 106,
    endX: 1510,
    endY: 270
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1510,
    startY: 310,
    endX: 1510,
    endY: 610
  });

  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 1600,
    startY: 290,
    endX: 1600,
    endY: 80
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 1700,
    startY: 284,
    endX: 1700,
    endY: 80
  });

  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1600,
    startY: 382,
    endX: 1600,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1700,
    startY: 390,
    endX: 1700,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1570,
    startY: 290,
    endX: 1570,
    endY: 80
  });

  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1292,
    startY: 240,
    endX: 1420,
    endY: 240
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1420,
    startY: 240,
    endX: 1420,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1570,
    startY: 382,
    endX: 1570,
    endY: 610
  });
  // 顶部最后一根横线
  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 1600,
    startY: 80,
    endX: 1740,
    endY: 80
  });
  // 底部最后一根横线
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1600,
    startY: 610,
    endX: 1740,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1534,
    startY: 80,
    endX: 1570,
    endY: 80
  });
  // 底部主线
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 580,
    startY: 610,
    endX: 610,
    endY: 610
  });
  // 
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 710,
    startY: 610,
    endX: 910,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1010,
    startY: 610,
    endX: 1040,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1140,
    startY: 610,
    endX: 1320,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1320,
    startY: 610,
    endX: 1358,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1382,
    startY: 610,
    endX: 1570,
    endY: 610
  });

  // P11
  if (status.p11) {
    if (Img_pump3_g.complete) {
      ctx.drawImage(Img_pump3_g, 1070, 368, 82, 60);
    }
  } else {
    if (Img_pump3.complete) {
      ctx.drawImage(Img_pump3, 1070, 368, 82, 60);
    }
  }

  // P12
  if (status.p12) {
    if (Img_compressor_g.complete) {
      ctx.drawImage(Img_compressor_g, 1070, 468, 82, 60);
    }
  } else {
    if (Img_compressor.complete) {
      ctx.drawImage(Img_compressor, 1070, 468, 82, 60);
    }
  }
  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 1003,
    startY: 80,
    endX: 1090,
    endY: 80
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 1190,
    startY: 80,
    endX: 1365,
    endY: 80
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1396,
    startY: 80,
    endX: 1488,
    endY: 80
  });
  // P12线
  can.drawLine({
    strokeStyle: status.p11 ? '#0de500' : '#fff',
    startX: 1180,
    startY: 400,
    endX: 1180,
    endY: 500
  });
  can.drawLine({
    strokeStyle: status.p11 || status.p12 ? '#0de500' : '#fff',
    startX: 1180,
    startY: 500,
    endX: 1180,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p12 ? '#0de500' : '#fff',
    startX: 1150,
    startY: 500,
    endX: 1180,
    endY: 500
  });
  can.drawLine({
    strokeStyle: status.p11 ? '#0de500' : '#fff',
    startX: 1150,
    startY: 400,
    endX: 1180,
    endY: 400
  });
  can.drawLine({
    strokeStyle: status.p12 ? '#0de500' : '#fff',
    startX: 990,
    startY: 500,
    endX: 1070,
    endY: 500
  });
  // P13
  if (status.p13) {
    if (Img_compressor_g.complete) {
      ctx.drawImage(Img_compressor_g, 1070, 268, 82, 60);
    }
  } else {
    if (Img_compressor.complete) {
      ctx.drawImage(Img_compressor, 1070, 268, 82, 60);
    }
  }



  // 水阀5
  if (status.v501) {
    if (Img_water_valve270_g.complete) {
      ctx.drawImage(Img_water_valve270_g, 1346, 330, 42, 40);
    }
  } else {
    if (Img_water_valve270.complete) {
      ctx.drawImage(Img_water_valve270, 1346, 330, 42, 40);
    }
  }

  // 水阀6
  if (status.v502) {
    if (Img_water_valve270_g.complete) {
      ctx.drawImage(Img_water_valve270_g, 1366, 470, 42, 40);
    }
  } else {
    if (Img_water_valve270.complete) {
      ctx.drawImage(Img_water_valve270, 1366, 470, 42, 40);
    }
  }

  if (status.p01) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(1562, 150);
    ctx.lineTo(1562, 250);
    ctx.strokeStyle = '#0de500';
    ctx.lineTo(1554, 230);
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
  }
}
function update2 (can, status) {
  // console.log(status, type);
  const ctx = can.context;
  // 清除画布
  can.clearCanvas();

  ctx.save();
  ctx.beginPath();
  ctx.arc(920, 64, 8, 0, 2 * Math.PI);
  if (status.H02) {
    ctx.fillStyle = '#f00';
  } else {
    ctx.fillStyle = 'gray';
  }
  ctx.fill();
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#fff';
  ctx.closePath();
  ctx.stroke();
  ctx.restore();

  ctx.save();
  ctx.beginPath();
  ctx.arc(920, 96, 8, 0, 2 * Math.PI);
  if (status.H01) {
    ctx.fillStyle = '#f00';
  } else {
    ctx.fillStyle = 'gray';
  }
  ctx.fill();
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#fff';
  ctx.closePath();
  ctx.stroke();
  ctx.restore();

  can.drawText({
    fillStyle: '#fff',
    x: 950,
    y: 70,
    txt: 'H02'
  });
  can.drawText({
    fillStyle: '#fff',
    x: 950,
    y: 96,
    txt: 'H01'
  });
  

  // 水阀1
  if (status.v023) {
    if (Img_water_valve1_g.complete) {
      ctx.drawImage(Img_water_valve1_g, 630, 53, 42, 40);
    }
  } else {
    if (Img_water_valve1.complete) {
      ctx.drawImage(Img_water_valve1, 630, 53, 42, 40);
    }
  }

  // 水阀2
  if (status.v022) {
    if (Img_water_valve270_g.complete) {
      ctx.drawImage(Img_water_valve270_g, 736, 280, 42, 40);
    }
    can.drawLine({
      strokeStyle: '#0de500',
      startX: 750,
      startY: 80,
      endX: 750,
      endY: 280
    });
    can.drawLine({
      strokeStyle: '#0de500',
      startX: 750,
      startY: 320,
      endX: 750,
      endY: 610
    });
  } else {
    if (Img_water_valve270.complete) {
      ctx.drawImage(Img_water_valve270, 736, 280, 42, 40);
    }
    can.drawLine({
      startX: 750,
      startY: 80,
      endX: 750,
      endY: 280
    });
    can.drawLine({
      startX: 750,
      startY: 320,
      endX: 750,
      endY: 610
    });
  }

  // 水阀4
  if (status.noName) {
    if (Img_water_valve270_g.complete) {
      ctx.drawImage(Img_water_valve270_g, 1496, 270, 42, 40);
    }
  } else {
    if (Img_water_valve270.complete) {
      ctx.drawImage(Img_water_valve270, 1496, 270, 42, 40);
    }
  }
  // 三通
  if (status.p01) {
    if (Img_pump1_g.complete) {
      ctx.drawImage(Img_pump1_g, 1480, 70, 60, 40);
    }
  } else {
    if (Img_pump1.complete) {
      ctx.drawImage(Img_pump1, 1480, 70, 60, 40);
    }
  }
  // P01
  if (status.p01) {
    if (Img_pump2_g.complete) {
      ctx.drawImage(Img_pump2_g, 1350, 30, 60, 60);
    }
    // 主泵运行画线红色
    can.drawLine({
      strokeStyle: '#f00',
      startX: 580,
      startY: 80,
      endX: 630,
      endY: 80
    });
    can.drawLine({
      strokeStyle: '#f00',
      startX: 672,
      startY: 80,
      endX: 977,
      endY: 80
    });
  } else {
    if (Img_pump2.complete) {
      ctx.drawImage(Img_pump2, 1350, 30, 60, 60);
    }
    // 主泵不运行画线白色
    can.drawLine({
      startX: 580,
      startY: 80,
      endX: 630,
      endY: 80
    });
    can.drawLine({
      startX: 672,
      startY: 80,
      endX: 977,
      endY: 80
    });

  }

  can.drawLine({
    strokeStyle: status.p11 ? '#0de500' : '#fff',
    startX: 990,
    startY: 400,
    endX: 1070,
    endY: 400
  });
  can.drawLine({
    strokeStyle: status.p11 || status.p12 ? '#0de500' : '#fff',
    startX: 990,
    startY: 250,
    endX: 990,
    endY: 400
  });
  can.drawLine({
    strokeStyle: status.p12 ? '#0de500' : '#fff',
    startX: 990,
    startY: 400,
    endX: 990,
    endY: 500
  });

  // 无名开关
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1510,
    startY: 106,
    endX: 1510,
    endY: 270
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1510,
    startY: 310,
    endX: 1510,
    endY: 610
  });

  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 1600,
    startY: 290,
    endX: 1600,
    endY: 80
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 1700,
    startY: 284,
    endX: 1700,
    endY: 80
  });

  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1600,
    startY: 382,
    endX: 1600,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1700,
    startY: 390,
    endX: 1700,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1570,
    startY: 290,
    endX: 1570,
    endY: 80
  });

  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1292,
    startY: 240,
    endX: 1420,
    endY: 240
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1420,
    startY: 240,
    endX: 1420,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1570,
    startY: 382,
    endX: 1570,
    endY: 610
  });
  // 顶部最后一根横线
  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 1600,
    startY: 80,
    endX: 1740,
    endY: 80
  });
  // 底部最后一根横线
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1600,
    startY: 610,
    endX: 1740,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1534,
    startY: 80,
    endX: 1570,
    endY: 80
  });
  // 底部主线
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 580,
    startY: 610,
    endX: 610,
    endY: 610
  });
  // 
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 710,
    startY: 610,
    endX: 910,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1010,
    startY: 610,
    endX: 1040,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1140,
    startY: 610,
    endX: 1320,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1320,
    startY: 610,
    endX: 1570,
    endY: 610
  });

  // P11
  if (status.p11) {
    if (Img_pump3_g.complete) {
      ctx.drawImage(Img_pump3_g, 1070, 368, 82, 60);
    }
  } else {
    if (Img_pump3.complete) {
      ctx.drawImage(Img_pump3, 1070, 368, 82, 60);
    }
  }

  // P12
  if (status.p12) {
    if (Img_compressor_g.complete) {
      ctx.drawImage(Img_compressor_g, 1070, 468, 82, 60);
    }
  } else {
    if (Img_compressor.complete) {
      ctx.drawImage(Img_compressor, 1070, 468, 82, 60);
    }
  }
  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 1003,
    startY: 80,
    endX: 1090,
    endY: 80
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 1190,
    startY: 80,
    endX: 1365,
    endY: 80
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1396,
    startY: 80,
    endX: 1488,
    endY: 80
  });
  // P12线
  can.drawLine({
    strokeStyle: status.p11 ? '#0de500' : '#fff',
    startX: 1180,
    startY: 400,
    endX: 1180,
    endY: 500
  });
  can.drawLine({
    strokeStyle: status.p11 || status.p12 ? '#0de500' : '#fff',
    startX: 1180,
    startY: 500,
    endX: 1180,
    endY: 610
  });
  can.drawLine({
    strokeStyle: status.p12 ? '#0de500' : '#fff',
    startX: 1150,
    startY: 500,
    endX: 1180,
    endY: 500
  });
  can.drawLine({
    strokeStyle: status.p11 ? '#0de500' : '#fff',
    startX: 1150,
    startY: 400,
    endX: 1180,
    endY: 400
  });
  can.drawLine({
    strokeStyle: status.p12 ? '#0de500' : '#fff',
    startX: 990,
    startY: 500,
    endX: 1070,
    endY: 500
  });

  // 水阀5
  if (status.v501) {
    if (Img_water_valve270_g.complete) {
      ctx.drawImage(Img_water_valve270_g, 1266, 120, 42, 40);
    }
  } else {
    if (Img_water_valve270.complete) {
      ctx.drawImage(Img_water_valve270, 1266, 120, 42, 40);
    }
  }

  if (status.p01) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(1562, 150);
    ctx.lineTo(1562, 250);
    ctx.strokeStyle = '#0de500';
    ctx.lineTo(1554, 230);
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
  }
}
function update3 (can, status) {
  // console.log(status, type);
  const ctx = can.context;
  // 清除画布
  can.clearCanvas();

  ctx.save();
  ctx.beginPath();
  ctx.arc(660, 96, 8, 0, 2 * Math.PI);
  if (status.H01) {
    ctx.fillStyle = '#f00';
  } else {
    ctx.fillStyle = 'gray';
  }
  ctx.fill();
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#fff';
  ctx.closePath();
  ctx.stroke();
  ctx.restore();

  if (status.p01) {
    if (Img_pump2_g.complete) {
      ctx.drawImage(Img_pump2_g, 1350, 30, 60, 60);
    }
  } else {
    if (Img_pump2.complete) {
      ctx.drawImage(Img_pump2, 1350, 30, 60, 60);
    }
  }

  if (status.p11) {
    if (Img_pump3_g.complete) {
      ctx.drawImage(Img_pump3_g, 1000, 200, 82, 60);
    }
  } else {
    if (Img_pump3.complete) {
      ctx.drawImage(Img_pump3, 1000, 200, 82, 60);
    }
  }

  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 150,
    startY: 80,
    endX: 150,
    endY: 204
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 150,
    startY: 80,
    endX: 240,
    endY: 80
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 340,
    startY: 80,
    endX: 440,
    endY: 80
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 540,
    startY: 80,
    endX: 1365,
    endY: 80
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 1396,
    startY: 80,
    endX: 1488,
    endY: 80
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1532,
    startY: 80,
    endX: 1568,
    endY: 80
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 1600,
    startY: 80,
    endX: 1740,
    endY: 80
  });

  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 150,
    startY: 316,
    endX: 150,
    endY: 600
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 150,
    startY: 600,
    endX: 240,
    endY: 600
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 340,
    startY: 600,
    endX: 440,
    endY: 600
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 540,
    startY: 600,
    endX: 640,
    endY: 600
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 740,
    startY: 600,
    endX: 840,
    endY: 600
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 940,
    startY: 600,
    endX: 1140,
    endY: 600
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1240,
    startY: 600,
    endX: 1568,
    endY: 600
  });

  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1600,
    startY: 600,
    endX: 1740,
    endY: 600
  });
  
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1512,
    startY: 108,
    endX: 1512,
    endY: 290
  });

  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1512,
    startY: 330,
    endX: 1512,
    endY: 600
  });
  can.drawLine({
    strokeStyle: status.p11 ? '#0de500' : '#fff',
    startX: 1040,
    startY: 260,
    endX: 1040,
    endY: 600
  });

  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1568,
    startY: 80,
    endX: 1568,
    endY: 290
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1568,
    startY: 380,
    endX: 1568,
    endY: 600
  });

  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 1600,
    startY: 80,
    endX: 1600,
    endY: 290
  });
  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1600,
    startY: 380,
    endX: 1600,
    endY: 600
  });

  can.drawLine({
    strokeStyle: status.p01 ? '#f00' : '#fff',
    startX: 1700,
    startY: 80,
    endX: 1700,
    endY: 284
  });

  can.drawLine({
    strokeStyle: status.p01 ? '#0de500' : '#fff',
    startX: 1700,
    startY: 394,
    endX: 1700,
    endY: 600
  });

  if (status.p01) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(1562, 150);
    ctx.lineTo(1562, 250);
    ctx.strokeStyle = '#0de500';
    ctx.lineTo(1554, 230);
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
  }

}

export default {
  main: draw_main
  ,main_3: draw_main_3
  ,update: draw_update
  ,update1
  ,update2
  ,update3
};

 src/views/loadManager/autoload.vue

@@ -77,7 +77,7 @@
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog class="el-dialog-center dialog-drag" v-cloak title='修改设定功率'
    <el-dialog class="el-dialog-center dialog-drag dialog-white" v-cloak title='修改设定功率'
      :modal="false"
      v-dialogDrag
        :visible.sync="updateSetPower.show" width="5.2rem"
@@ -85,7 +85,7 @@
        @closed="updateSetPower.show = false">
        <flex-layout>
            <div class="color-black">
                <el-form class="updateSetPower" ref="updateSetPower" label-position="top" size="small" :rules="updateSetPower.rules" :model="updateSetPower.data">
                <el-form class="updateSetPower" ref="updateSetPower" label-position="right" label-width="160px" size="small" :rules="updateSetPower.rules" :model="updateSetPower.data">
                    <el-col :span="24">
                        <el-form-item label="设定功率(KvA 0~750)" prop="set_power">
                            <el-input v-model="updateSetPower.data.set_power"></el-input>
@@ -100,7 +100,7 @@
        </flex-layout>
    </el-dialog>
    <!-- 时间间隔弹窗 -->
    <el-dialog class="el-dialog-center dialog-drag" v-cloak title='修改时间间隔'
    <el-dialog class="el-dialog-center dialog-drag dialog-white" v-cloak title='修改时间间隔'
      :modal="false"
      v-dialogDrag
        :visible.sync="updateDelay.show" width="5.2rem"

 src/views/loadManager/burstload.vue

@@ -70,7 +70,7 @@
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog class="el-dialog-center dialog-drag" v-cloak title='修改设定功率'
    <el-dialog class="el-dialog-center dialog-drag dialog-white" v-cloak title='修改设定功率'
        :visible.sync="updateSetPower.show" width="5.2rem"
        :close-on-click-modal='false'
        :modal="false"
@@ -78,7 +78,7 @@
        @closed="updateSetPower.show = false">
        <flex-layout>
            <div class="color-black">
                <el-form class="updateSetPower" ref="updateSetPower" label-position="top" size="small" :rules="updateSetPower.rules" :model="updateSetPower.data">
                <el-form class="updateSetPower" ref="updateSetPower" label-position="right" label-width="160px" size="small" :rules="updateSetPower.rules" :model="updateSetPower.data">
                    <el-col :span="24">
                        <el-form-item label="设定功率(KVA 0~750)" prop="set_power">
                            <el-input v-model="updateSetPower.data.set_power"></el-input>

 src/views/rectifier/group.vue

@@ -225,17 +225,18 @@
    </div>
    <!-- 弹窗  设置电压 -->
    <el-dialog
      class="G_dialog"
      class="G_dialog dialog-white"
      :title="set_vol_dialog.idx+set_vol_dialog.title"
      :visible.sync="set_vol_dialog.show"
      width="400px"
      :close-on-click-modal='false'
      @opened="openedVolDialog">
      <el-form
      ref="setVolFrom" label-width="100px" class="demo-ruleForm"
      ref="setVolFrom" label-width="18em" class="demo-ruleForm"
      :model="set_vol_dialog.form" 
      :rules="set_vol_dialog.rules"
      label-position="top">
      size="small"
      label-position="right">
        <el-form-item prop="dcvol"
        label="设定电压(取值范围：0~1000V)" class="no-bottom-padding">
          <el-input 
@@ -251,17 +252,18 @@
    </el-dialog>
    <!-- 弹窗  设置电流 -->
    <el-dialog
      class="G_dialog"
      class="G_dialog dialog-white"
      :title="set_curr_dialog.idx+set_curr_dialog.title"
      :visible.sync="set_curr_dialog.show"
      width="400px"
      :close-on-click-modal='false'
      @opened="openedCurrDialog">
      <el-form
      ref="setCurrFrom" label-width="100px" class="demo-ruleForm"
      ref="setCurrFrom" label-width="10em" class="demo-ruleForm"
      size="small"
      :model="set_curr_dialog.form" 
      :rules="set_curr_dialog.rules"
      label-position="top">
      label-position="right">
        <el-form-item prop="dccurr"
        label="设定电流" class="no-bottom-padding">
          <el-input 

 src/views/rectifier/main.vue

@@ -217,17 +217,17 @@
    </el-dialog>
    <!-- 弹窗  设置电压 -->
    <el-dialog
      class="G_dialog"
      class="G_dialog dialog-white"
      :title="set_vol_dialog.idx+set_vol_dialog.title"
      :visible.sync="set_vol_dialog.show"
      width="400px"
      :close-on-click-modal='false'
      @opened="openedVolDialog">
      <el-form
      ref="setVolFrom" label-width="100px" class="demo-ruleForm"
      ref="setVolFrom" label-width="16em" size="small" class="demo-ruleForm"
      :model="set_vol_dialog.form" 
      :rules="set_vol_dialog.rules"
      label-position="top">
      label-position="right">
        <el-form-item prop="dcvol"
        label="设定电压(取值范围：0~1000V)" class="no-bottom-padding">
          <el-input 
@@ -243,17 +243,17 @@
    </el-dialog>
    <!-- 弹窗  设置电流 -->
    <el-dialog
      class="G_dialog"
      class="G_dialog dialog-white"
      :title="set_curr_dialog.idx+set_curr_dialog.title"
      :visible.sync="set_curr_dialog.show"
      width="400px"
      :close-on-click-modal='false'
      @opened="openedCurrDialog">
      <el-form
      ref="setCurrFrom" label-width="100px" class="demo-ruleForm"
      ref="setCurrFrom" label-width="100px" size="small" class="demo-ruleForm"
      :model="set_curr_dialog.form" 
      :rules="set_curr_dialog.rules"
      label-position="top">
      label-position="right">
        <el-form-item prop="dccurr"
        label="设定电流" class="no-bottom-padding">
          <el-input 

 src/views/waterCooling/index1.vue

@@ -12,6 +12,7 @@
          <science-box v-for="(load, key) in loads" :key="'load_' + key" 
            no-header
            class="panel_info"
            :class="{'highlight': load.data.FValue}"
            :cssWidth="load.position.width"
            :cssHeight="load.position.height"
            :top="load.position.top" :left="load.position.left">
@@ -20,20 +21,16 @@
              <div class="content">
                <div class="row">
                  <label>{{load.data.TLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.TAlarm}" disabled size="mini" type="number" v-model="load.data.TValue"></el-input>
                  <el-input class="input transparent" disabled size="mini" type="number" v-model="load.data.TValue"></el-input>
                </div>
                <div class="row">
                  <label>{{load.data.PLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.PAlarm}" disabled size="mini" type="number" v-model="load.data.PValue"></el-input>
                  <el-input class="input transparent" disabled size="mini" type="number" v-model="load.data.PValue"></el-input>
                </div>
                <div class="row">
                  <label>{{load.data.FLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.FAlarm}" disabled size="mini" type="number" v-model="load.data.FValue"></el-input>
                  <el-input class="input transparent" disabled size="mini" type="number" v-model="load.data.FValue"></el-input>
                </div>
                <!-- <div class="row">
                  <label>{{load.data.VLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.VAlarm}" disabled size="mini" type="number" v-model="load.data.VValue"></el-input>
                </div> -->
              </div>
            </div>
          </science-box>
@@ -153,6 +150,9 @@
        ,p11: false
        ,p12: false
        ,p13: false
        ,v501: false
        ,v502: false
        ,v504: false
      },
      loads: [{
        position: {
@@ -171,9 +171,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -192,9 +189,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -213,9 +207,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -234,9 +225,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -255,9 +243,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -276,9 +261,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -297,9 +279,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -318,9 +297,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -339,9 +315,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }],
      run_info: {
@@ -617,7 +590,7 @@

      return this.$api.water.getStatus({water_id}).then((res) => {
        res = JSON.parse(res.data.result);
        console.log(res, '9999999999999999')
        // console.log(res, '9999999999999999')
        if (!res.code) {
          return;
        }
@@ -627,9 +600,9 @@
        this.G_status.v017 = data.Solenoid_openflag;
        // TODO
        this.G_status.v018 = data.Solenoid_openflag;
        this.G_status.v054 = data.Solenoid_openflag;
        this.G_status.v051 = data.Solenoid_openflag;
        this.G_status.v052 = data.Solenoid_openflag;
        this.G_status.v504 = data.Solenoid_openflag;
        this.G_status.v501 = data.Solenoid_openflag;
        this.G_status.v502 = data.Solenoid_openflag;
        this.G_status.noName = data.Solenoid_openflag;

        this.G_status.Water_system_function = data.Water_system_function;
@@ -687,15 +660,15 @@
        .then(()=> {
          // this.tlist = [...list[0], ...list[1], ...list[2], ...list[3]];
          // list = [[], [], [], []];
          console.log(this.G_status, '99999999999999990000000000000000000');
          draw.update(can1, this.G_status, water_type);
          // console.log(this.G_status, '99999999999999990000000000000000000');
          draw.update1(can1, this.G_status);
          
          this.timer.open();
        }).catch((err)=>{
          console.error(err);
          this.timer.open();
        });
          // draw.update(can1, this.G_status, water_type);
          // draw.update1(can1, this.G_status);
      }, 1000);
    }
  },
@@ -806,6 +779,9 @@
  left: 0;
  top: 0;
}
.panel_info.highlight >>> .box-content {
  background: #0de500;
}
.panel_info ._main {
  display: -webkit-flex;
  display: flex;

 src/views/waterCooling/index2.vue

@@ -20,20 +20,16 @@
              <div class="content">
                <div class="row">
                  <label>{{load.data.TLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.TAlarm}" disabled size="mini" type="number" v-model="load.data.TValue"></el-input>
                  <el-input class="input transparent" disabled size="mini" type="number" v-model="load.data.TValue"></el-input>
                </div>
                <div class="row">
                  <label>{{load.data.PLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.PAlarm}" disabled size="mini" type="number" v-model="load.data.PValue"></el-input>
                  <el-input class="input transparent" disabled size="mini" type="number" v-model="load.data.PValue"></el-input>
                </div>
                <div class="row">
                  <label>{{load.data.FLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.FAlarm}" disabled size="mini" type="number" v-model="load.data.FValue"></el-input>
                  <el-input class="input transparent" disabled size="mini" type="number" v-model="load.data.FValue"></el-input>
                </div>
                <!-- <div class="row">
                  <label>{{load.data.VLabel}}</label>
                  <el-input class="input transparent" :class="{'alarm': load.data.VAlarm}" disabled size="mini" type="number" v-model="load.data.VValue"></el-input>
                </div> -->
              </div>
            </div>
          </science-box>
@@ -153,6 +149,7 @@
        ,p01: false
        ,p11: false
        ,p12: false
        ,v022: false
      },
      loads: [{
        position: {
@@ -171,9 +168,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -192,9 +186,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -213,9 +204,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -234,9 +222,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -255,9 +240,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -276,9 +258,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -297,9 +276,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -318,9 +294,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }, {
        position: {
@@ -339,9 +312,6 @@
          ,TValue: 0
          ,PValue: 0
          ,FValue: 0
          ,TAlarm: false
          ,PAlarm: false
          ,FAlarm: false
        }
      }],
      run_info: {
@@ -582,13 +552,6 @@
        }
        let data = res.data[0];
        let stateData = type.type3.stateData;
        /*v023: false
        ,Water_system_function: false
        ,H01: false
        ,H02: false
        ,p01: false
        ,p11: false
        ,p12: false*/
        this.G_status.Water_system_function = data.Water_system_function;
        this.G_status.v023 = data.Solenoid_openflag;
        this.G_status.p01 = data.P01_main_pump;
@@ -596,7 +559,7 @@
        this.G_status.p12 = data.P12_pretest_pump;
        this.G_status.H01 = data.H01_electric_heater;
        this.G_status.H02 = data.H02_electric_heater;
        this.G_status.v501 = data.valve_start;
        this.G_status.v022 = data.valve_start;

        Object.keys(data).forEach((v) => {
          if ('num' == v || 'water_id' == v) {
@@ -610,20 +573,6 @@
        });
        this.tlist.stateData = list;
      });
    }
    // 复位所有告警
    ,resetAlarm () {
      // 支路数据告警
      this.loads.forEach((v) => {
        v.data.TAlarm = false;
        v.data.PAlarm = false;
        v.data.FAlarm = false;
        v.data.VAlarm = false;
      });
      // 其他输入框处告警
      this.inputList.forEach((v) => {
        v.alarm = false;
      })
    }
    // 告警
    ,getAlarm () {
@@ -641,19 +590,7 @@
        if (!data.length) {
          return false;
        }
        // 回水温度
        let reg_t = /(\d+)#\u56DE\u6C34\u6E29\u5EA6/;
        // #支路流量低
        let reg_f = /(\d+)#\u652F\u8DEF\u6D41\u91CF\S?\u4F4E$/;
        // #支路流量变送器故障
        let reg_trans_f = /(\d+)#\u652F\u8DEF\u6D41\u91CF\u53D8\u9001\u5668\u6545\u969C$/;
        // #支路温度变送器故障
        let reg_trans_t = /(\d+)#\u652F\u8DEF\u6E29\u5EA6\u53D8\u9001\u5668\u6545\u969C$/;
        // #支路压力变送器故障
        let reg_trans_p = /(\d+)#\u652F\u8DEF\u538B\u529B\u53D8\u9001\u5668\u6545\u969C$/;

        // 选复位
        this.resetAlarm();
        
        for (let i = 0, j = data.length; i < j; i++) {
          // 把告警添加到列表
          list.push({
@@ -661,122 +598,6 @@
            key: '',
            val: '告警',
          });

          let alarm_name = data[i].alarm_name
          if (reg_t.test(alarm_name)) {
            let idx = RegExp.$1;
            this.loads[loadsIdx[idx]].data.TAlarm = true;
            continue;
          }
          if (reg_f.test(alarm_name)) {
            let idx = RegExp.$1;
            this.loads[loadsIdx[idx]].data.FAlarm = true;
            continue;
          }
          if (reg_trans_f.test(alarm_name)) {
            let idx = RegExp.$1;
            this.loads[loadsIdx[idx]].data.FAlarm = true;
            continue;
          }
          if (reg_trans_t.test(alarm_name)) {
            let idx = RegExp.$1;
            this.loads[loadsIdx[idx]].data.TAlarm = true;
            continue;
          }
          if (reg_trans_p.test(alarm_name)) {
            let idx = RegExp.$1;
            this.loads[loadsIdx[idx]].data.PAlarm = true;
            continue;
          }

          switch (alarm_name) {
            case "冷却水流量变送器故障":
              this.inputList[6].alarm = true;
              break;
            case "供水温度变送器故障":
              this.inputList[8].alarm = true;
              break;
            case "供水压力变送器故障":
              this.inputList[5].alarm = true;
              break;
            case "回水温度变送器故障":
              this.inputList[0].alarm = true;
              break;
            case "回水压力变送器故障":
              break;
            case "冷却水电导率变送器故障":
              this.inputList[7].alarm = true;
              break;
            case "缓冲罐液位变送器故障":
              break;
            case "缓冲罐压力变送器故障":
              break;
            case "阀厅湿度变送器故障":
              break;
            case "阀厅温度变送器故障":
              break;
            case "外水温度变送器故障":
              this.inputList[3].alarm = true;
              break;
            case "外水压力变送器故障":
              break;
            case "电加热器故障":
            // TODO
              break;
            case "电加热失败":
            // TODO
              break;
            case "补水泵故障":
              break;
            case "三通阀故障":
              // TODO
              break;
            case "冷却水流量低":
              break;
            case "冷却水流量超低":
              break;
            case "供水温度低":
              break;
            case "供水温度高":
              break;
            case "供水温度超高":
              break;
            case "回水温度高":
              break;
            case "回水温度超高":
              break;
            case "供水压力低":
              break;
            case "供水压力超低":
              break;
            case "供水压力高":
              break;
            case "供水压力超高":
              break;
            case "回水压力低":
              break;
            case "回水压力超低":
              break;
            case "外水温度高":
              break;
            case "外水压力低":
              break;
            case "缓冲罐压力低":
              break;
            case "缓冲罐压力超低":
              break;
            case "缓冲罐压力高":
              break;
            case "缓冲罐压力超高":
              break;
            case "冷却水电导率高":
              break;
            case "冷却水电导率超高":
              break;
            default:
              console.info('未知故障: ' + alarm_name);
              break;
          }
        }
        this.tlist.alarmData = list;
      });
@@ -788,13 +609,14 @@
        .then(()=> {
          // this.tlist = [...list[0], ...list[1], ...list[2], ...list[3]];
          // list = [[], [], [], []];
          draw.update(can1, this.G_status);
          // draw.update2(can1, this.G_status);
          
          this.timer.open();
        }).catch((err)=>{
          console.error(err);
          this.timer.open();
        });
        draw.update2(can1, this.G_status);
      }, 1000);
    }
  },

 src/views/waterCooling/index3.vue

@@ -399,14 +399,14 @@
        .then(()=> {
          // this.tlist = [...list[0], ...list[1], ...list[2], ...list[3]];
          // list = [[], [], [], []];
          draw.update(can1, this.G_status, water_type);
          // draw.update3(can1, this.G_status);
          
          this.timer.open();
        }).catch((err)=>{
          console.error(err);
          this.timer.open();
        });
        // draw.update(can1, this.G_status, water_type);
        draw.update3(can1, this.G_status);
         this.timer.open();
      }, 1000);
    }
@@ -556,6 +556,8 @@
}
.run_info {
  position: absolute;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  /*border: 1px #fff solid;*/
}
.rotate_motor {