U 新需求的修改

whychw

2020-12-14 b9bf5074720d9123b448d12d75637cda507f1c06

U 新需求的修改

 COMMITLOG.md

New file
@@ -0,0 +1,16 @@
提交日志
===================

### 2020-12-14
***
+ ####  灯绿色红色要亮一点
+ #### 电机合上要线路亮
+ #### 水冷间切换后 水流问题
+ #### 首页电源开关关联
+ #### 3号电源启动按钮调整到高压开关状态之前
+ #### 水冷负载 手动页面 开关打开为绿色
+ #### 线路图中 电源开关断开统一为红色
+ #### 首页告警闪烁取消 加个三角感叹号图
+ #### 下面滚动告警不要时间 字改为红色
+ #### 综合页面电机前面加开关 12G
+ #### 综合页面其他开关记录上次操作状态

 src/assets/css/custom.css

@@ -348,24 +348,51 @@
.nowrap_indicator,
.indicator_grp .wrap_indicator div,
.indicator {
    position: relative;
    width: .18rem;
    height: .18rem;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 10px -1px #000;
    box-shadow: 0 0 10px -1px #000;
}
.cell-indicator:before,
.cell-indicator::before,
.cell_indicator div:before,
.cell_indicator div::before,
.nowrap_indicator:before,
.nowrap_indicator::before,
.indicator_grp .wrap_indicator div:before,
.indicator_grp .wrap_indicator div::before,
.indicator:before,
.indicator::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0.9);
    transform: translate(-50%, -50%) scale(0.9);
    background: radial-gradient(circle, #ddd 0%, transparent 69%) 10% 10% / 80% 80% no-repeat;
}
.cell-indicator.status_normal,
.nowrap_indicator.status_normal,
.cell_indicator div.status_normal,
.indicator_grp .wrap_indicator.status_normal div,
.indicator.status_normal {
    background: #07f7e7;
    /*background: #07f7e7;*/
    background: #08d808;
}
.cell-indicator.status_error,
.nowrap_indicator.status_error,
.cell_indicator div.status_error,
.indicator_grp .wrap_indicator.status_error div,
.indicator.status_error {
    background: #ff3801;
    /*background: #ff3801;*/
    background: #ff3939;
}
.cell-indicator.status_off,
.nowrap_indicator.status_off,
@@ -517,7 +544,7 @@
    height: 22px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #0194f4;
    background: #888;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-transition: all 0.3s;
@@ -550,7 +577,8 @@
    transition: background-color 0.3s;
}
.switch_yc .input:checked ~ .bg {
    background: #0194f4;
    /*background: #90ed7d;*/
    background: #07C160;
}
.switch_yc .input:checked ~ .handle .core {
    background: #fff;
@@ -596,4 +624,3 @@
    border-color: #00f7f9;
    color: #041b3f;
}


 src/assets/imgs/danger.svg

New file
@@ -0,0 +1,35 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="685.85" height="605.7" viewBox="169.075 209.15 685.85 605.7" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FDD000;}
</style>
<g>
    <g>
        <path d="M850,229.3c-7.5-13-22.3-20.1-41.6-20.1H215.6c-19.3,0-34.1,7.2-41.6,20.1c-7.5,13-6.3,29.4,3.4,46.1l296.4,513.4
            c9.7,16.7,23.2,26,38.3,26c15,0,28.6-9.2,38.3-26l296.4-513.4C856.3,258.7,857.5,242.3,850,229.3z"/>
        <g>
            <path class="st0" d="M215.6,209.2h592.8c19.3,0,34.1,7.2,41.6,20.1c7.5,13,6.3,29.4-3.4,46.1L550.3,788.9
                c-9.7,16.7-23.2,26-38.3,26s-28.6-9.2-38.3-26L177.3,275.4c-9.7-16.7-10.9-33.1-3.4-46.1C181.5,216.3,196.3,209.2,215.6,209.2z
                 M512,791.7c6.3,0,12.9-5.2,18.2-14.4l296.4-513.4c5.3-9.1,6.5-17.5,3.4-23c-3.1-5.5-11-8.6-21.6-8.6H215.6
                c-10.6,0-18.4,3.1-21.6,8.6c-3.1,5.5-1.9,13.8,3.4,23l296.4,513.4C499.1,786.4,505.7,791.7,512,791.7z"/>
            <polygon class="st0" points="795.9,262.1 512,753.9 228.1,262.1             "/>
        </g>
    </g>
    <g>
        <g>
            <g>
                <path d="M544.1,600.6c0,17.5-14.3,31.6-31.6,31.6c-17.5,0-31.6-14.1-31.6-31.6s14.1-31.6,31.6-31.6
                    C529.8,569,544.1,583.1,544.1,600.6z"/>
            </g>
        </g>
        <g>
            <g>
                <path d="M541,519.7l15.3-174.9c3.7-26.9-17.2-50.9-44.3-50.9h0c-27.1,0-48,24-44.3,50.9L483,519.7c2,14.5,14.4,25.2,29,25.2l0,0
                    C526.6,545,539,534.2,541,519.7z"/>
            </g>
        </g>
    </g>
</g>
</svg>

 src/components/Circuit.vue

@@ -163,7 +163,7 @@
        }
      }
    }
  }, 
  },
  methods: {
    init () {
      this.drawStatic();
@@ -350,6 +350,72 @@
      ctx.lineWidth = 1;

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

      if (this.switch) {
        ctx.save();
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.shadowColor = "#000";
        ctx.shadowOffsetX = 4;
        ctx.shadowOffsetY = 4;
        ctx.shadowBlur = 4;
        ctx.moveTo (114, 10);
        ctx.lineTo(114, 90);
        ctx.moveTo(114, 50);
        ctx.lineTo(150, 50);
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.moveTo(200, 50);
        ctx.lineTo(260, 50);
        ctx.closePath();
        ctx.stroke();

        ctx.restore();

        ctx.save();
        ctx.lineWidth = 2;
        ctx.shadowColor = "#000";
        ctx.shadowOffsetX = 4;
        ctx.shadowOffsetY = 4;
        ctx.shadowBlur = 4;
        ctx.translate(290, 50);
        ctx.beginPath();
        ctx.arc(0, 0, 30, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(42, 0, 30, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.stroke();
        ctx.fillText('变压器', 21, 44);
        ctx.restore();

        ctx.save();
        ctx.lineWidth = 2;
        ctx.shadowColor = "#000";
        ctx.shadowOffsetX = 4;
        ctx.shadowOffsetY = 4;
        ctx.shadowBlur = 4;


        ctx.beginPath();
        ctx.moveTo(362, 50);
        ctx.lineTo(650, 50);
        // ctx.moveTo(650, 10);
        ctx.closePath();
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(700, 90);
        ctx.lineTo(700, 200);
        ctx.closePath();
        ctx.stroke();

        ctx.restore();
      }

      // 主电电压
      ctx.save();
      ctx.textAlign = 'right';
@@ -361,180 +427,35 @@

      // 开关
      ctx.save();
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.arc(150, 50, 2, 0, 2 * Math.PI);
      ctx.arc(200, 50, 2, 0, 2 * Math.PI);
      ctx.fill();
      ctx.closePath();
      ctx.restore();

      ctx.save();
      ctx.lineWidth = 2;
      ctx.translate(150, 50);
      ctx.beginPath();
      if (this.switch) {
        ctx.rotate(-2 * Math.PI / 180);
        ctx.strokeStyle = '#0f0';
        ctx.moveTo(200, 50);
        ctx.lineTo(150, 48);
      } else {
        ctx.rotate(-32 * Math.PI / 180);
        ctx.strokeStyle = '#f00';
        ctx.moveTo(200, 50);
        ctx.lineTo(150, 30);
      }
      ctx.closePath();
      ctx.stroke();
      ctx.restore();
      /*// 指示灯 十一个
      ctx.save();
      ctx.beginPath();
      ctx.arc(30, 180, 10, 0, 2 * Math.PI);
      if (this.status[0]) {
        ctx.fillStyle = '#0f0';
      } else {
        ctx.fillStyle = 'gray';
      }
      ctx.fill();
      ctx.strokeStyle = '#333';
      ctx.moveTo(0, 0);
      ctx.lineTo(52, 0);
      ctx.moveTo(0, 0);
      ctx.lineTo(10, -10);
      ctx.lineTo(20, 0);

      ctx.closePath();
      ctx.stroke();
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.arc(70, 180, 10, 0, 2 * Math.PI);
      if (this.status[1]) {
        ctx.fillStyle = '#f00';
      } else {
        ctx.fillStyle = 'gray';
      }
      ctx.fill();
      ctx.strokeStyle = '#333';
      ctx.closePath();
      ctx.stroke();
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.arc(110, 180, 10, 0, 2 * Math.PI);
      if (this.status[2]) {
        ctx.fillStyle = '#f00';
      } else {
        ctx.fillStyle = 'gray';
      }
      ctx.fill();
      ctx.strokeStyle = '#333';
      ctx.closePath();
      ctx.stroke();
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.arc(150, 180, 10, 0, 2 * Math.PI);
      if (this.status[3]) {
        ctx.fillStyle = '#f00';
      } else {
        ctx.fillStyle = 'gray';
      }
      ctx.fill();
      ctx.strokeStyle = '#333';
      ctx.closePath();
      ctx.stroke();
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.arc(394, 158, 10, 0, 2 * Math.PI);
      if (this.status[4]) {
        ctx.fillStyle = '#0f0';
      } else {
        ctx.fillStyle = 'gray';
      }
      ctx.fill();
      ctx.strokeStyle = '#333';
      ctx.closePath();
      ctx.stroke();
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.arc(394, 180, 10, 0, 2 * Math.PI);
      if (this.status[5]) {
        ctx.fillStyle = '#0f0';
      } else {
        ctx.fillStyle = 'gray';
      }
      ctx.fill();
      ctx.strokeStyle = '#333';
      ctx.closePath();
      ctx.stroke();
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.arc(394, 202, 10, 0, 2 * Math.PI);
      if (this.status[6]) {
        ctx.fillStyle = '#0f0';
      } else {
        ctx.fillStyle = 'gray';
      }
      ctx.fill();
      ctx.strokeStyle = '#333';
      ctx.closePath();
      ctx.stroke();
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.arc(394, 268, 10, 0, 2 * Math.PI);
      if (this.status[7]) {
        ctx.fillStyle = '#0f0';
      } else {
        ctx.fillStyle = 'gray';
      }
      ctx.fill();
      ctx.strokeStyle = '#333';
      ctx.closePath();
      ctx.stroke();
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.arc(394, 290, 10, 0, 2 * Math.PI);
      if (this.status[8]) {
        ctx.fillStyle = '#f00';
      } else {
        ctx.fillStyle = 'gray';
      }
      ctx.fill();
      ctx.strokeStyle = '#333';
      ctx.closePath();
      ctx.stroke();
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.arc(394, 312, 10, 0, 2 * Math.PI);
      if (this.status[9]) {
        ctx.fillStyle = '#f00';
      } else {
        ctx.fillStyle = 'gray';
      }
      ctx.fill();
      ctx.strokeStyle = '#333';
      ctx.closePath();
      ctx.stroke();
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.arc(636, 160, 10, 0, 2 * Math.PI);
      if (this.status[10]) {
        ctx.fillStyle = '#0f0';
      } else {
        ctx.fillStyle = 'gray';
      }
      ctx.fill();
      ctx.strokeStyle = '#333';
      ctx.closePath();
      ctx.stroke();
      ctx.restore();
      */
      
    }
  },
  mounted () {
@@ -556,14 +477,14 @@
<style scoped>
  .container {
    width: 100%;
    height: 100%; 
    height: 100%;
    position: relative;
  }
  canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; 
    object-fit: contain;
  }
  .canvas1 {
    position: absolute;

 src/components/scrollAd.vue

@@ -4,9 +4,11 @@
        <div class="wraper" ref="move">
          <ul ref="con1" class="con1 anim clearfix">
            <li v-for='(item, idx) in datalist' :key="'list1_' + idx">{{item.text}}</li>
            <li v-if='!datalist.length'>{{default_text}}</li>
          </ul>
          <ul ref="con2" class="con1 anim clearfix">
            <li v-for='(item, idx) in datalist' :key="'list2_' + idx">{{item.text}}</li>
            <li v-if='!datalist.length'>{{default_text}}</li>
          </ul>
        </div>
      </div>
@@ -32,6 +34,7 @@
        // 余数
        remainder: 0
        ,timer: new Timeout()
        ,default_text: '暂无告警'
      }
    },
    props: {
@@ -162,8 +165,9 @@
  overflow: hidden;
  padding-left: 30px;
  background: #00f7f9;
  color: #052444;
  font-weight: bold;
  /*background: rgba(200,200,200,.3);*/
  color: #f00;
  /*font-weight: bold;*/
  /*transition: all 1s;*/
}
.inner {
@@ -187,6 +191,7 @@
  padding: 0 1em;
  line-height: 26px;
  height: 26px;
  font-weight: bolder;
}
</style>


 src/router/routes.js

@@ -17,14 +17,14 @@
        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

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

 src/script/chargepower.js

@@ -644,7 +644,7 @@
      endX: opts.lineOnEndX,
      endY: opts.lineOnEndY,
      lineWidth: opts.lineWidth,
      strokeStyle: 'red'
      strokeStyle: 'green'
    }, this.context);
  } else {
    // 画开关线段
@@ -654,7 +654,7 @@
      endX: opts.lineEndX,
      endY: opts.lineEndY,
      lineWidth: opts.lineWidth,
      strokeStyle: 'green'
      strokeStyle: 'red'
    }, this.context);
  }
  this.context.restore();

 src/script/draw_general.js

@@ -1,3 +1,15 @@
// 开关切换公用部分
const fn_swtich = function (can, point, obj) {
  can.clearObj(obj.id);
  obj.opts.isOn = !obj.opts.isOn;
  // 重绘时不重绘文字 所以要清空
  obj.opts.labelTop = '';
  obj.opts.labelTop1 = '';
  obj.opts.labelBottom = '';
  obj.opts.labelBottom1 = '';
  can.drawSwitch(obj.opts);
}

/**
 * 画主体部分
 */
@@ -85,6 +97,12 @@
  // 电机 前 横线
  can.drawBoldLine({
    startX: 146
    ,startY: 732
    ,endX: 220
    ,endY: 732
  });
  can.drawBoldLine({
    startX: 260
    ,startY: 732
    ,endX: 312
    ,endY: 732
@@ -302,7 +320,7 @@
    ,endY: 540
  });
  can.drawWaterLine({
    startX: 1005
    startX: 1034
    ,startY: 540
    ,endX: 1194
    ,endY: 540
@@ -500,67 +518,61 @@
    }
  }, true);

  // 画开关
  can.drawSwitch({
    startX: 268
    ,startY: 110
    ,fromStart: true
    ,labelBottom: '-8G'
  }, true);
  can.drawSwitch({
    startX: 268
    ,startY: 275
    ,fromStart: true
    ,labelBottom: '-9G'
  }, true);
  can.drawSwitch({
    startX: 268
    ,startY: 428
    ,fromStart: true
    ,labelBottom: '-13G'
  }, true);
  can.drawSwitch({
    startX: 268
    ,startY: 475
    ,fromStart: true
    ,labelBottom: '-14G'
  }, true);
  can.drawSwitch({
    startX: 268
    ,startY: 582
    ,fromStart: true
    ,labelBottom: '-11G'
  }, true);
  can.drawSwitch({
    startX: 268
    ,startY: 628
    ,fromStart: true
    ,labelBottom: '-15G'
  }, true);

  can.drawSwitch({
    startX: 470
    ,startY: 75
    ,fromStart: true
    ,labelBottom: 'QD2    2000A'
    ,isOn: context.switch_status.s_QD2
    ,cbfn_click: function (point, obj) {
      fn_swtich(can, point, obj);

      const isOn = obj.opts.isOn;
      context.switch_status['s_QD2'] = isOn;
      context.$common.setLocalStorage('s_QD2', isOn * 1);
    }
  }, true);
  can.drawSwitch({
    startX: 470
    ,startY: 254
    ,fromStart: true
    ,labelBottom: 'QD1    2000A'
    ,isOn: context.switch_status.s_QD1
    ,cbfn_click: function (point, obj) {
      fn_swtich(can, point, obj);

      const isOn = obj.opts.isOn;
      context.switch_status['s_QD1'] = isOn;
      context.$common.setLocalStorage('s_QD1', isOn * 1);
    }
  }, true);
  can.drawSwitch({
    startX: 470
    ,startY: 580
    ,fromStart: true
    ,labelBottom: 'QD7    2000A'
    ,isOn: context.switch_status.s_QD7
    ,cbfn_click: function (point, obj) {
      fn_swtich(can, point, obj);

      const isOn = obj.opts.isOn;
      context.switch_status['s_QD7'] = isOn;
      context.$common.setLocalStorage('s_QD7', isOn * 1);
    }
  }, true);
  can.drawSwitch({
    startX: 470
    ,startY: 426
    ,fromStart: true
    ,labelBottom: 'QD9    2000A'
    ,isOn: context.switch_status.s_QD9
    ,cbfn_click: function (point, obj) {
      fn_swtich(can, point, obj);

      const isOn = obj.opts.isOn;
      context.switch_status['s_QD9'] = isOn;
      context.$common.setLocalStorage('s_QD9', isOn * 1);
    }
  }, true);

  can.drawSwitch({
@@ -568,24 +580,56 @@
    ,startY: 270
    ,fromStart: true
    ,labelBottom: 'QF1   800A'
    ,isOn: context.switch_status.s_QF1
    ,cbfn_click: function (point, obj) {
      fn_swtich(can, point, obj);

      const isOn = obj.opts.isOn;
      context.switch_status['s_QF1'] = isOn;
      context.$common.setLocalStorage('s_QF1', isOn * 1);
    }
  }, true);
  can.drawSwitch({
    startX: 680
    ,startY: 400
    ,fromStart: true
    ,labelBottom: 'QF2   800A'
    ,isOn: context.switch_status.s_QF2
    ,cbfn_click: function (point, obj) {
      fn_swtich(can, point, obj);

      const isOn = obj.opts.isOn;
      context.switch_status['s_QF2'] = isOn;
      context.$common.setLocalStorage('s_QF2', isOn * 1);
    }
  }, true);
  can.drawSwitch({
    startX: 680
    ,startY: 530
    ,fromStart: true
    ,labelBottom: 'QF3   800A'
    ,isOn: context.switch_status.s_QF3
    ,cbfn_click: function (point, obj) {
      fn_swtich(can, point, obj);

      const isOn = obj.opts.isOn;
      context.switch_status['s_QF3'] = isOn;
      context.$common.setLocalStorage('s_QF3', isOn * 1);
    }
  }, true);
  can.drawSwitch({
    startX: 680
    ,startY: 660
    ,fromStart: true
    ,labelBottom: 'QF4   800A'
    ,isOn: context.switch_status.s_QF4
    ,cbfn_click: function (point, obj) {
      fn_swtich(can, point, obj);

      const isOn = obj.opts.isOn;
      context.switch_status['s_QF4'] = isOn;
      context.$common.setLocalStorage('s_QF4', isOn * 1);
    }
  }, true);

  can.drawBoldLine({
@@ -671,7 +715,7 @@
    ,strokeStyle: 'transparent'
  }, true);
  can.drawRect({
    startX: 960
    startX: 990
    ,startY: 610
    ,width: 80
    ,height: 40
@@ -790,40 +834,42 @@
  }, true);
  
}
let flag = false;
function draw_update (context, can, status) {
// let flag = false;
function draw_update (context, can) {
  const ctx = can.context;
  // 清除画布
  can.clearCanvas();

  const status = context.dev_alarm;

  // console.log(flag, 'flag');
  flag = !flag;
  // flag = !flag;
  
  // 画电源
  can.drawPower({
    startX: 348
    ,startY: 50
    ,label: '3号大功率整流器A机组'
    ,noDraw: status.power3A && flag
    // ,noDraw: status.power3A && flag
  });
  can.drawPower({
    startX: 348
    ,startY: 216
    ,label: '3号大功率整流器B机组'
    ,noDraw: status.power3B && flag
    // ,noDraw: status.power3B && flag
  });

  can.drawPower({
    startX: 348
    ,startY: 406
    ,label: '2号大功率整流器'
    ,noDraw: status.power2 && flag
    // ,noDraw: status.power2 && flag
  });
  can.drawPower({
    startX: 348
    ,startY: 560
    ,label: '1号大功率整流器'
    ,noDraw: status.power1 && flag
    // ,noDraw: status.power1 && flag
  });

  // 画电机
@@ -831,7 +877,7 @@
    startX: 310
    ,startY: 720
    ,label: '推进电机模拟负载系统'
    ,noDraw: status.motor && flag
    // ,noDraw: status.motor && flag
  });

  // 画水冷
@@ -839,19 +885,19 @@
    startX: 500
    ,startY: 704
    ,label: '3号水冷装置'
    ,noDraw: status.water3 && flag
    // ,noDraw: status.water3 && flag
  });
  can.drawWater({
    startX: 988
    ,startY: 146
    ,label: '1号水冷装置'
    ,noDraw: status.water1 && flag
    // ,noDraw: status.water1 && flag
  });
  can.drawWater({
    startX: 958
    startX: 988
    ,startY: 500
    ,label: '2号水冷装置'
    ,noDraw: status.water2 && flag
    // ,noDraw: status.water2 && flag
  });

  // 画电池组
@@ -859,26 +905,190 @@
    startX: 758
    ,startY: 244
    ,label: '1#蓄电池组'
    ,noDraw: status.batt1 && flag
    // ,noDraw: status.batt1 && flag
  });
  can.drawBatt({
    startX: 758
    ,startY: 374
    ,label: '2#蓄电池组'
    ,noDraw: status.batt2 && flag
    // ,noDraw: status.batt2 && flag
  });
  can.drawBatt({
    startX: 758
    ,startY: 504
    ,label: '3#蓄电池组'
    ,noDraw: status.batt3 && flag
    // ,noDraw: status.batt3 && flag
  });
  can.drawBatt({
    startX: 758
    ,startY: 634
    ,label: '4#蓄电池组'
    ,noDraw: status.batt4 && flag
    // ,noDraw: status.batt4 && flag
  });

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

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

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

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

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

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

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

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

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

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

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

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

  if (status.load1) {
    can.drawDanger({
      startX: 1410
      ,startY: 60
    });
  }

  if (status.load2) {
    can.drawDanger({
      startX: 1410
      ,startY: 248
    });
  }

  if (status.load3) {
    can.drawDanger({
      startX: 1410
      ,startY: 436
    });
  }

  if (status.load4) {
    can.drawDanger({
      startX: 1410
      ,startY: 624
    });
  }

  // 画开关
  can.drawSwitch({
    startX: 268
    ,startY: 110
    ,fromStart: true
    ,labelBottom: '-8G'
    ,isOn: context.switch_status.s_8G
  }, true);
  can.drawSwitch({
    startX: 268
    ,startY: 275
    ,fromStart: true
    ,labelBottom: '-9G'
    ,isOn: context.switch_status.s_9G
  }, true);
  can.drawSwitch({
    startX: 268
    ,startY: 428
    ,fromStart: true
    ,labelBottom: '-13G'
    ,isOn: context.switch_status.s_13G
  }, true);
  can.drawSwitch({
    startX: 268
    ,startY: 475
    ,fromStart: true
    ,labelBottom: '-14G'
    ,isOn: context.switch_status.s_14G
  }, true);
  can.drawSwitch({
    startX: 268
    ,startY: 582
    ,fromStart: true
    ,labelBottom: '-11G'
    ,isOn: context.switch_status.s_11G
  }, true);
  can.drawSwitch({
    startX: 268
    ,startY: 628
    ,fromStart: true
    ,labelBottom: '-15G'
    ,isOn: context.switch_status.s_15G
  }, true);
  can.drawSwitch({
    startX: 220
    ,startY: 732
    ,fromStart: true
    ,labelBottom: '-12G'
    ,isOn: context.switch_status.s_12G
  }, true);

}

export default {

 src/script/draw_water_cooling.js

@@ -74,6 +74,7 @@
let Img_box = new Image();
Img_box.src = box;


// 移动小球的给当前几同帖数
let count = 0;
let timer = new Timeout();
@@ -2020,7 +2021,7 @@
  }*/
}
function update3 (can, status, can2) {
  if (!timer.callback) {
  if (!timer3.callback) {
    timer3.init(function () {
      updateBalls(can2);
      timer3.open();
@@ -2037,7 +2038,7 @@
  switch (flag) {
    // 全为0 表示没有没有小球要运动
    case 0B00:
      timer2.stop();
      timer3.stop();
      can2.clearCanvas();
      break;
    case 0B01:
@@ -2278,12 +2279,15 @@
  switch (id) {
    case 1:
      timer.stop();
      timer.callback = null;
      break;
    case 2:
      timer2.stop();
      timer2.callback = null;
      break;
    case 3:
      timer3.stop();
      timer3.callback = null;
      break;
  }
}

 src/script/general.js

@@ -12,6 +12,7 @@
import water from '@/assets/imgs/water-cooling.svg';
// 水冷负载
import load from '@/assets/imgs/water-cooling-load.svg';
import danger from '@/assets/imgs/danger.svg';

let Img_highTensionCabinet = new Image();
Img_highTensionCabinet.src = highTensionCabinet;
@@ -31,6 +32,9 @@

let Img_load = new Image();
Img_load.src = load;

let Img_danger = new Image();
Img_danger.src = danger;

function F () {}

@@ -666,7 +670,7 @@
    // 开关是否闭合 默认是断开的
    ,isOn: false
    // 开关的点击回调
    ,cbfn_click: function (point, obj) {
    /*,cbfn_click: function (point, obj) {
      self.clearObj(obj.id);
      obj.opts.isOn = !obj.opts.isOn;
      // 重绘时不重绘文字 所以要清空
@@ -675,7 +679,7 @@
      obj.opts.labelBottom = '';
      obj.opts.labelBottom1 = '';
      self.drawSwitch(obj.opts);
    }
    }*/
    /*,cbfn_mouseenter: function (point, obj) {
      console.log('enter');
      toast(point, obj.opts);
@@ -1144,6 +1148,33 @@
  // return obj;
}

// 画三角警示牌
EleCircleGeneral.prototype.drawDanger = function (options) {
  let type = "danger";
  let defaults = {
    startX: 0
    ,startY: 0
    ,width: 38
    ,height: 36
  };
  let opts = deepObjMerge(defaults, options || {});

  if (opts.subName) {
    type += '_' + opts.subName;
  }

  if (!opts.noDraw) {
    if (Img_danger.complete) {
      this.context.drawImage(Img_danger, opts.startX, opts.startY, opts.width, opts.height);
    } else {
      Img_danger.addEventListener('load', () => {
        this.context.drawImage(Img_danger, opts.startX, opts.startY, opts.width, opts.height);
      });
    }
  }
  
}


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

 src/views/chargePower/main.vue

@@ -60,6 +60,14 @@
              <div class="btn" @click="showCurVolSettings(item)">{{item}}机组电流电压设定</div>
            </div>
          </div>
          <!-- 启动停止 -->
          <div class="flex_2btn_grp vertical_middle">
            <div class="btn" v-btn-confirm="handleConfirm" data-fn="remoteStart" data-confirmTxt="启动确认" :param="JSON.stringify([item])">{{item}}机组启动</div>
            <div class="center_con">
              <!-- <div class="indicator" :class="{'status_normal': !0, 'status_error': !1}"></div> -->
            </div>
            <div class="btn" v-btn-confirm="handleConfirm" data-fn="remoteStop" data-confirmTxt="停止确认" :param="JSON.stringify([item])">{{item}}机组停止</div>
          </div>
          <!-- 套输出合分闸 -->
          <div class="flex_2btn_grp vertical_middle">
            <!-- <div class="btn">{{item}}套输出合闸</div> -->
@@ -69,14 +77,6 @@
            </div>
            <div class="label"></div>
            <!-- <div class="btn">{{item}}套输出分闸</div> -->
          </div>
          <!-- 启动停止 -->
          <div class="flex_2btn_grp vertical_middle">
            <div class="btn" v-btn-confirm="handleConfirm" data-fn="remoteStart" data-confirmTxt="启动确认" :param="JSON.stringify([item])">{{item}}机组启动</div>
            <div class="center_con">
              <!-- <div class="indicator" :class="{'status_normal': !0, 'status_error': !1}"></div> -->
            </div>
            <div class="btn" v-btn-confirm="handleConfirm" data-fn="remoteStop" data-confirmTxt="停止确认" :param="JSON.stringify([item])">{{item}}机组停止</div>
          </div>
        </div>
      </div>
@@ -1103,6 +1103,8 @@
  }
  .item .group_set .btn {
    width: 16.6em;
    -webkit-transform: translateX(1em);
    transform: translateX(1em);
  }
  .item .group_set .part_left {
    display: -webkit-flex;

 src/views/general/index.vue

@@ -151,7 +151,6 @@
  data () {
    return {
      timer: new Timeout(),
      timer_g: new Timeout(),
      containerH: 1000,
      chargepowerList: [],
      loadList: [],
@@ -159,6 +158,24 @@
        bMax: 0,
      },
      motor_id: 2001,
      // 开关状态
      switch_status: {
        s_8G: false
        ,s_9G: false
        ,s_13G: false
        ,s_14G: false
        ,s_11G: false
        ,s_15G: false
        ,s_12G: false
        ,s_QD2: false
        ,s_QD1: false
        ,s_QD9: false
        ,s_QD7: false
        ,s_QF1: false
        ,s_QF2: false
        ,s_QF3: false
        ,s_QF4: false
      },
      floatBox: [
        {
          show: false,
@@ -824,6 +841,8 @@
        if(rs.code) {
          let data = rs.data;

          // console.log(data, '====data');

          let AB = data[0];
          // let B = data[1];
          let CD = data[2];
@@ -839,6 +858,12 @@
          this.floatBox[2].list[1].value = CD.conn_flag ? '串联' : '并联';
          this.floatBox[2].list[2].value = (CD.alldcvol).toFixed(bit);
          this.floatBox[2].list[3].value = (CD.alldccurr).toFixed(bit);

          // 高压开关状态 high_vol_switch_status
          this.switch_status.s_11G = !!data[0].high_vol_switch_status;
          this.switch_status.s_15G = !!data[1].high_vol_switch_status;
          this.switch_status.s_13G = !!data[2].high_vol_switch_status;
          this.switch_status.s_14G = !!data[3].high_vol_switch_status;

          this.powerInfo[2].vol = (CD.alldcvol).toFixed(bit);
          this.powerInfo[2].cur = (CD.alldccurr).toFixed(bit);
@@ -909,6 +934,8 @@
            let data = res.data[0];
            // 高压开关
            this.floatBox[i].list[2].value = !data.dc_voltage_state ? '开启' : '关闭';

            this.switch_status[i?'s_9G': 's_8G'] = !data.dc_voltage_state;
          }
        });

@@ -1027,6 +1054,9 @@
          this.floatBox[4].list[6].value = data.gear_box_power;
          // 推进轴功率
          this.floatBox[4].list[5].value = data.advance_power;

          // 电机主开关
          this.switch_status.s_12G = !!data.main_switch_state;
        }
      });
    }
@@ -1201,16 +1231,22 @@
        can.emit(el, 'mouseleave');
      }
    }
    // 获取本地存储的开关状态
    ,getSwitchStatus () {
      const arr = ['s_QD1', 's_QD2', 's_QD7', 's_QD9', 's_QF1', 's_QF2', 's_QF3', 's_QF4'];
      arr.forEach((v) => {
        console.log(v, this.$common.getLocalStorage(v), this.$common.getLocalStorage(v) * 1);
        this.switch_status[v] = this.$common.getLocalStorage(v) * 1;
      });
    }
    
  },
  mounted () {
    const $container = this.$refs.container;
    // 获取本地存储的开关状态
    this.getSwitchStatus();
    this.canvasInit();

    this.timer_g.start(() => {
      draw.update(this, can1, this.dev_alarm);
      this.timer_g.open();
    }, 200);
    // 初始化
    this.timer.start(() => {
      // 添加电源数据
@@ -1222,6 +1258,8 @@
      this.getAllRtAlarm();

      this.getConnect();

      draw.update(this, can1);

      if (this.loadList.length) {
        this.setLoadData(this.loadList);
@@ -1253,7 +1291,6 @@
  ,destroyed() {
    window.removeEventListener('resize', resizeHandler);
    this.timer.stop();
    this.timer_g.stop();
  }

}

 src/views/main.vue

@@ -174,9 +174,8 @@
                // 获取告警设备 通过ID
                const alarm_id = val[DEV[v]];
                let devname = DEVIDNAME[alarm_id];
                let alarm_starttime = val.alarm_starttime || val.alm_start_time;
                let alarm_name = val.alarm_name || val.alm_name;
                val['text'] = devname + ' - ' + alarm_starttime + ' - ' + alarm_name;
                val['text'] = devname + ' - ' + alarm_name;
                alarm_list.push(val);
              });
            }

 src/views/motor/index.vue

@@ -28,18 +28,17 @@
                    :voltage="G_voltage"></circuit>
                </div>
              </div>
              <div class="btns-grp flexR_center">
                <!-- <div class="btn w_8em" @click="showControl">试验设置</div> -->
                <div class="btn btn-alarm w_8em" @click="showAlarm">报警归档</div>
                <div class="btn w_8em" @click="showData">数据归档</div>
              </div>
            </div>
          </div>
          <div class="panel_status panel-contain border-angle posR">
            <div class="wrap-panel">
              <!--  -->
              <div class="info_detail">最近故障: <span>{{latelyAlarm || '暂无'}}</span></div>
              <div class="btn w_8em" :class="{'disabled': !latelyAlarm}" @click="confirmAlarm">故障确认</div>
              <div class="btns-grp">
                <div class="btn w_8em" :class="{'disabled': !latelyAlarm}" @click="confirmAlarm">故障确认</div>
                <div class="btn btn-alarm w_8em" @click="showAlarm">报警归档</div>
                <div class="btn w_8em" @click="showData">数据归档</div>
              </div>
            </div>
            <div class="p_main">
              <!--  -->
@@ -1430,6 +1429,11 @@
    display: flex;
    flex-direction: column;
  }
  .panel_status .wrap-panel .btns-grp {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
  }
  .panel_status .p_main {
    /*flex: auto;*/
    display: -webkit-flex;
@@ -1694,9 +1698,9 @@
  .btn_cancel:hover {
    color: #fff;
  }
  .btn ~ .btn {
  /* .btn ~ .btn {
    margin-left: 4.8em;
  }
  } */
  .date_time {
    font-size: .18rem;
    font-weight: bolder;

 src/views/other/test.vue

@@ -1,6 +1,6 @@
<template>
  <div class="main">
    <div class="test">
    <!-- <div class="test">
      <g-temp ref="G_temp_0"
        :fixedSize="true"
        :max="180"
@@ -9,15 +9,18 @@
        :mal-limit="100"
        info="这是几个字"
        ></g-temp>
    </div>
    </div> -->
    <div class="test2"><div class="">123456</div></div>
    <div class="test2"><div class="">123456</div></div>
    <div class="test3"></div>
  </div>
</template>

<script>
import GTemp from '@/components/GTemp';
// import GTemp from '@/components/GTemp';
export default {
  components: {
    GTemp
    // GTemp
  }
  ,data () {
    return {
@@ -44,5 +47,24 @@
  width: 240px;
  height: 700px;
}

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