U 缩合页面告警设备闪烁 等

whychw

2020-09-27 fab9683916a66c2a123419c777740013cf8e8fdb

U 缩合页面告警设备闪烁 等

 package-lock.json

@@ -11989,6 +11989,14 @@
      "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.3.4.tgz?cache=0&sync_timestamp=1593769573522&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.3.4.tgz",
      "integrity": "sha1-Tjirw0oRxBtsPYJERJouNjumJQs="
    },
    "vue-scroll-ad": {
      "version": "1.1.0",
      "resolved": "https://registry.npm.taobao.org/vue-scroll-ad/download/vue-scroll-ad-1.1.0.tgz",
      "integrity": "sha1-0W6KLsWAYSWEjrJpT0OvGjYUjL4=",
      "requires": {
        "vue": "^2.5.11"
      }
    },
    "vue-style-loader": {
      "version": "4.1.2",
      "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",

 package.json

@@ -16,6 +16,7 @@
    "vue": "^2.6.11",
    "vue-layer": "^1.2.0",
    "vue-router": "^3.2.0",
    "vue-scroll-ad": "^1.1.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {

 src/api/services/common/index.js

@@ -29,5 +29,20 @@
      ,data: null
    });
  }
  

  /**
   * 查询各种设备的告警
   * 无参
   * 1//2mw电源的实时告警  electric_id
   * 2//4mw电源的实时告警  electric_id
   * 3//电机的实时告警 motor_id
   * 4//水冷告警  water_id
   */
  ,getAllRtAlarm () {
    return self.$axios({
      method: 'post'
      ,url: 'AlarmAction!serchAllAlarm'
      ,data: null
    });
  }
}

 src/api/services/motor/index.js

@@ -111,18 +111,17 @@
  }

  /** 
   * 根据当前时间查询电机前100笔历史数据
   * 参数json:{"motor_id":"2001"}
   * 根据时间查询电机历史数据
   * 参数json:{"motor_id":"2001", record_time: '2020-09-09 00:00:00'}
   *
   * 废弃
   */
  /*,get100Alarm (data) {
  ,getHisData (data) {
    return self.$axios({
      method: 'post'
      ,url: 'Motor_readdataAction_mot_serchByCondition'
      ,data: 'json=' + JSON.stringify(data)
    });
  }*/
  }

  


 src/script/chargepower.js

@@ -506,7 +506,7 @@
      break;
    // 水平 起点 逆时针
    case 6:
      console.log('水平 起点 逆时针', 'chargepower');
      // console.log('水平 起点 逆时针', 'chargepower');
      opts.lineStartX = opts.startX;
      opts.lineStartY = opts.startY;
      opts.lineEndX = opts.endX;

 src/script/common.js

@@ -247,6 +247,11 @@
    return res;
}

const RAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
const CAF = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame || clearTimeout;

export default {
    transSize,
    isSetOption,
@@ -260,6 +265,8 @@
    permitsToObj,
    objFormat,
    getCurrentDate,
    RAF,
    CAF,
    // throttle,
    setLocalStorage(key,val){
        const _val = (typeof val == 'object') ? JSON.stringify(val) : val;

 src/script/draw_general.js

@@ -1,13 +1,7 @@
/**
 * 画主体部分
 * @param  {[type]} can EleCircle实例
 * @param  {[type]} type 串并联类型
 *                  mixture (混合 二并二串)
 *                  parallel (并联)
 *                  series (串联)
 * @return {[type]}     [description]
 */
function draw_main (context, can, type) {
function draw_main (context, can) {
  const ctx = can.context;


@@ -291,6 +285,7 @@
    startX: 320
    ,startY: 50
    ,label: '3号大功率整流器'
    ,noDraw: true
    ,cbfn_click: function () {
      context.$router.push('/chargepower/main');
    }
@@ -305,6 +300,7 @@
    startX: 320
    ,startY: 270
    ,label: '2号大功率整流器'
    ,noDraw: true
    ,cbfn_click: function () {
      context.$router.push('/rectifier/group/?group=CD');
    }
@@ -319,6 +315,7 @@
    startX: 320
    ,startY: 490
    ,label: '1号大功率整流器'
    ,noDraw: true
    ,cbfn_click: function () {
      context.$router.push('/rectifier/group/?group=AB');
    }
@@ -335,6 +332,7 @@
    startX: 320
    ,startY: 700
    ,label: '推进电机模拟负载系统'
    ,noDraw: true
    ,cbfn_click: function () {
      context.$router.push('/motor/index');
    }
@@ -351,6 +349,7 @@
    startX: 540
    ,startY: 680
    ,label: '1号水冷装置'
    ,noDraw: true
    ,cbfn_click: function () {
      context.$router.push('/watercooling/index/9');
    }
@@ -359,6 +358,7 @@
    startX: 1014
    ,startY: 212
    ,label: '2号水冷装置'
    ,noDraw: true
    ,cbfn_click: function () {
      context.$router.push('/watercooling/index/subsidiary');
    }
@@ -367,6 +367,7 @@
    startX: 933
    ,startY: 690
    ,label: '3号水冷装置'
    ,noDraw: true
    ,cbfn_click: function () {
      context.$router.push('/watercooling/index/9');
    }
@@ -377,6 +378,7 @@
    startX: 727
    ,startY: 444
    ,label: '电池组1'
    ,noDraw: true
    ,cbfn_click: function () {
      window.open('/DyEnvir_system/big_screen/index.html#/?idx=0', '_self');
    }
@@ -385,6 +387,7 @@
    startX: 847
    ,startY: 444
    ,label: '电池组2'
    ,noDraw: true
    ,cbfn_click: function () {
      window.open('/DyEnvir_system/big_screen/index.html#/?idx=1', '_self');
    }
@@ -393,6 +396,7 @@
    startX: 967
    ,startY: 444
    ,label: '电池组3'
    ,noDraw: true
    ,cbfn_click: function () {
      window.open('/DyEnvir_system/big_screen/index.html#/?idx=2', '_self');
    }
@@ -401,6 +405,7 @@
    startX: 1087
    ,startY: 444
    ,label: '电池组4'
    ,noDraw: true
    ,cbfn_click: function () {
      window.open('/DyEnvir_system/big_screen/index.html#/?idx=3', '_self');
    }
@@ -643,30 +648,88 @@
  }, true);
  
}

function draw_update (context, can, status, type) {
let flag = false;
function draw_update (context, can, status) {
  const ctx = can.context;
  // 清除画布
  can.clearCanvas();

  // console.log(flag, 'flag');
  flag = !flag;
  
  // 高压开关
  can.drawSwitch({
    startX: 180
    ,startY: 130
    // ,switchWidth: 30
    ,isHor: false
    ,labelLeft: '高压开关'
    ,isOn: status[0]
  // 画电源
  can.drawPower({
    startX: 320
    ,startY: 50
    ,label: '3号大功率整流器'
    ,noDraw: status.power3 && flag
  });
  
  // 高压开关
  can.drawSwitch({
    startX: 780
    ,startY: 130
    // ,switchWidth: 30
    ,isHor: false
    ,labelLeft: '高压开关'
    ,isOn: status[1]

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

  // 画电机
  can.drawMotor({
    startX: 320
    ,startY: 700
    ,label: '推进电机模拟负载系统'
    ,noDraw: status.motor && flag
  });

  // 画水冷
  can.drawWater({
    startX: 540
    ,startY: 680
    ,label: '1号水冷装置'
    ,noDraw: status.water1 && flag
  });
  can.drawWater({
    startX: 1014
    ,startY: 212
    ,label: '2号水冷装置'
    ,noDraw: status.water2 && flag
  });
  can.drawWater({
    startX: 933
    ,startY: 690
    ,label: '3号水冷装置'
    ,noDraw: status.water3 && flag
  });

  // 画电池组
  can.drawBatt({
    startX: 727
    ,startY: 444
    ,label: '电池组1'
    ,noDraw: status.batt1 && flag
  });
  can.drawBatt({
    startX: 847
    ,startY: 444
    ,label: '电池组2'
    ,noDraw: status.batt2 && flag
  });
  can.drawBatt({
    startX: 967
    ,startY: 444
    ,label: '电池组3'
    ,noDraw: status.batt3 && flag
  });
  can.drawBatt({
    startX: 1087
    ,startY: 444
    ,label: '电池组4'
    ,noDraw: status.batt4 && flag
  });
}


 src/script/general.js

@@ -135,13 +135,20 @@
  };
  let opts = deepObjMerge(defaults, options || {});

  if (Img_power.complete) {
    this.context.drawImage(Img_power, opts.startX, opts.startY, opts.width, opts.height);
  } else {
    Img_power.addEventListener('load', () => {
      this.context.drawImage(Img_power, opts.startX, opts.startY, opts.width, opts.height);
    });
  if (opts.subName) {
    type += '_' + opts.subName;
  }

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


  let obj = {};

@@ -170,7 +177,7 @@
  obj.bottom = opts.startY + opts.height;

  // 有标题就画出来
  if (opts.label) {
  if (!opts.noDraw && opts.label) {
    this.drawText({
      x: opts.startX + opts.width / 2
      ,y: obj.blPoint.y + 16
@@ -196,13 +203,18 @@
    ,label: ''
  };
  let opts = deepObjMerge(defaults, options || {});
  if (opts.subName) {
    type += '_' + opts.subName;
  }

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

  let obj = {};
@@ -232,7 +244,7 @@
  obj.bottom = opts.startY + opts.height;

  // 有标题就画出来
  if (opts.label) {
  if (!opts.noDraw && opts.label) {
    this.drawText({
      x: opts.startX + opts.width / 2
      ,y: obj.blPoint.y + 16
@@ -258,13 +270,18 @@
    ,label: ''
  };
  let opts = deepObjMerge(defaults, options || {});
  if (opts.subName) {
    type += '_' + opts.subName;
  }

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

  let obj = {};
@@ -294,7 +311,7 @@
  obj.bottom = opts.startY + opts.height;

  // 有标题就画出来
  if (opts.label) {
  if (!opts.noDraw && opts.label) {
    this.drawText({
      x: opts.startX + opts.width / 2
      ,y: obj.blPoint.y + 16
@@ -321,12 +338,18 @@
  };
  let opts = deepObjMerge(defaults, options || {});

  if (Img_batt.complete) {
    this.context.drawImage(Img_batt, opts.startX, opts.startY, opts.width, opts.height);
  } else {
    Img_batt.addEventListener('load', () => {
  if (opts.subName) {
    type += '_' + opts.subName;
  }

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

  let obj = {};
@@ -356,7 +379,7 @@
  obj.bottom = opts.startY + opts.height;

  // 有标题就画出来
  if (opts.label) {
  if (!opts.noDraw && opts.label) {
    this.drawText({
      x: opts.startX + opts.width / 2
      ,y: obj.blPoint.y + 16
@@ -669,7 +692,7 @@
  switch (opts.isHor * 4 + opts.fromStart * 2 + opts.clockwise) {
    // 竖直 终点 逆时针
    case 0:
      console.log('竖直 终点 逆时针');
      // console.log('竖直 终点 逆时针');
      opts.lineStartX = opts.endX;
      opts.lineStartY = opts.endY;
      opts.lineEndX = opts.startX - opts.switchHeight + opts.lineWidth;
@@ -708,7 +731,7 @@
      break;
    // 竖直 终点 顺时针
    case 1:
      console.log('竖直 终点 顺时针');
      // console.log('竖直 终点 顺时针');
      opts.lineStartX = opts.endX;
      opts.lineStartY = opts.endY;
      opts.lineEndX = opts.startX + opts.switchHeight - opts.lineWidth;
@@ -747,7 +770,7 @@
      break;
    // 竖直 起点 逆时针
    case 2:
      console.log('竖直 起点 逆时针');
      // console.log('竖直 起点 逆时针');
      opts.lineStartX = opts.startX;
      opts.lineStartY = opts.startY;
      opts.lineEndX = opts.endX + opts.switchHeight - opts.lineWidth;
@@ -786,7 +809,7 @@
      break;
    // 竖直 起点 顺时针
    case 3:
      console.log('竖直 起点 顺时针');
      // console.log('竖直 起点 顺时针');
      opts.lineStartX = opts.startX;
      opts.lineStartY = opts.startY;
      opts.lineEndX = opts.endX - opts.switchHeight + opts.lineWidth;
@@ -825,7 +848,7 @@
      break;
    // 水平 终点 逆时针
    case 4:
      console.log('水平 终点 逆时针');
      // console.log('水平 终点 逆时针');
      opts.lineStartX = opts.endX;
      opts.lineStartY = opts.endY;
      opts.lineEndX = opts.startX;
@@ -871,7 +894,7 @@
      break;
    // 水平 终点 顺时针
    case 5:
      console.log('水平 终点 顺时针');
      // console.log('水平 终点 顺时针');
      opts.lineStartX = opts.endX;
      opts.lineStartY = opts.endY;
      opts.lineEndX = opts.startX;
@@ -918,7 +941,7 @@
      break;
    // 水平 起点 逆时针
    case 6:
      console.log('水平 起点 逆时针');
      // console.log('水平 起点 逆时针');
      opts.lineStartX = opts.startX;
      opts.lineStartY = opts.startY;
      opts.lineEndX = opts.endX;
@@ -959,7 +982,6 @@
      obj.right = opts.startX + opts.switchWidth;
      obj.top = opts.startY  - opts.switchHeight ;
      obj.bottom = opts.startY;
      console.log(obj, 989989);
      // 开关在上方
      beAbove = true;
      break;

 src/views/general/index.vue

@@ -74,6 +74,7 @@

import EleCircleGeneral from '@/script/general';
import draw from '@/script/draw_general';
import Timeout from '@/script/Timeout';
let can, can1;
let resizeHandler;
let el = '';
@@ -93,6 +94,28 @@
      ,power2: false
      ,power3: false
    };
const DEV = {
  '1001': 'load1'
  ,'1002': 'load2'
  ,'1003': 'load3'
  ,'1004': 'load4'
  ,'2001': 'motor'
  ,'4001': 'power1'
  ,'4002': 'power1'
  ,'4003': 'power2'
  ,'4004': 'power2'
  ,'5001': 'water2'
  ,'5002': 'water3'
  ,'5003': 'water1'
  ,'6001': 'power3'
  ,'6002': 'power3'
};
const DEVIDNAME = {
  '1': 'electric_id'
  ,'2': 'electric_id'
  ,'3': 'motor_id'
  ,'4': 'water_id'
};
export default {
  name: 'General',
  components: {
@@ -101,7 +124,8 @@
  },
  data () {
    return {
      timer: new this.$common.Timeout(),
      timer: new Timeout(),
      timer_g: new Timeout(),
      containerH: 1000,
      chargepowerList: [],
      loadList: [],
@@ -630,6 +654,24 @@
          ,cur: 0
        }
      ]
      // 设备告警状态
      ,dev_alarm: {
        power1: false
        ,power2: false
        ,power3: false
        ,motor: false
        ,batt1: false
        ,batt2: false
        ,batt3: false
        ,batt4: false
        ,load1: false
        ,load2: false
        ,load3: false
        ,load4: false
        ,water1: false
        ,water2: false
        ,water3: false
      }
    }
  },
  methods: {
@@ -1002,6 +1044,37 @@
        this.powerInfo[i - 11].height = position.height;
      }
    }
    // 查询所有告警
    ,getAllRtAlarm () {
      this.$api.common.getAllRtAlarm().then((res) => {
        res = JSON.parse(res.data.result);
        // console.log(res, 'rtalarm');
        let alarm_list = [];
        // 告警重置
        this.alarmReset();
        if (res.code) {
          let data = res.data;
          Object.keys(data).forEach((v, i, a) => {
            // console.log(v, i, a);
            let arr = data[v];
            if (arr.length) {
              arr.forEach((val) => {
                const alarm_id = val[DEVIDNAME[v]];
                this.dev_alarm[DEV[alarm_id]] = true;
                alarm_list.push(val);
              });
            }
          });
        }
        this.alarm_list = alarm_list;
      });
    }
    // 告警重置
    ,alarmReset () {
      Object.keys(this.dev_alarm).forEach((v) => {
        this.dev_alarm[v] = false;
      });
    }
    // 画布点击事件
    ,handleClick (e) {
      // 当前点击点的坐标
@@ -1010,7 +1083,7 @@
      const width = $container.offsetWidth;
      const height = $container.offsetHeight;

      var breakFlag = false;
      // var breakFlag = false;

      // 遍历can所有的elementList 判断是否点击到某个元素
      for (let i = 0, elementList = can.elementList, j = can.elementList.length; i < j; i++) {
@@ -1018,12 +1091,12 @@
          // console.log('你点了元素' + elementList[i]);

          can.emit(elementList[i], 'click', point);
          breakFlag = true;
          // breakFlag = true;
          break;
        }
      }
      // 遍历can1所有的elementList 判断是否点击到某个元素
      if( !breakFlag ) {
      /*if( !breakFlag ) {
        for (let i = 0, elementList = can1.elementList, j = can1.elementList.length; i < j; i++) {
          if( can1.pointIsInRect(point, this.$common.transSize(width, height, 1880, 810, can1.elementObjects[elementList[i]])) ) {
            // console.log('你点了元素' + elementList[i]);
@@ -1032,7 +1105,7 @@
            break;
          }
        }
      }
      }*/
    }
    ,handelMousemove (e) {
      let point = {x: e.offsetX, y: e.offsetY};
@@ -1043,11 +1116,13 @@
      if (el) {
        if ( can.pointIsInRect(point, this.$common.transSize(width, height, 1880, 810, can.elementObjects[el])) ) {
          can.emit(el, 'mouseenter', point);
        } else if ( can1.pointIsInRect(point, this.$common.transSize(width, height, 1880, 810, can1.elementObjects[el])) ) {
        }
        /* else if ( can1.pointIsInRect(point, this.$common.transSize(width, height, 1880, 810, can1.elementObjects[el])) ) {
          can1.emit(el, 'mouseenter', point);
        } else {
        } */
        else {
          can.emit(el, 'mouseleave', point);
          can1.emit(el, 'mouseleave', point);
          // can1.emit(el, 'mouseleave', point);
          el = '';
          // 遍历所有的elementList 判断是否点击到某个元素
          for (let i = 0, elementList = can.elementList, j = can.elementList.length; i < j; i++) {
@@ -1060,7 +1135,7 @@
            }
          }
          // 遍历所有的elementList 判断是否点击到某个元素
          for (let i = 0, elementList = can1.elementList, j = can1.elementList.length; i < j; i++) {
          /*for (let i = 0, elementList = can1.elementList, j = can1.elementList.length; i < j; i++) {
            if( can1.pointIsInRect(point, this.$common.transSize(width, height, 1880, 810, can1.elementObjects[elementList[i]])) ) {
              // console.log('鼠标现在在' + elementList[i] + '元素上');
              el = elementList[i];
@@ -1068,7 +1143,7 @@

              break;
            }
          }
          }*/
        }
      } else {
        // 遍历所有的elementList 判断是否点击到某个元素
@@ -1080,7 +1155,7 @@
          }
        }
        // 遍历所有的elementList 判断是否点击到某个元素
        for (let i = 0, elementList = can1.elementList, j = can1.elementList.length; i < j; i++) {
        /*for (let i = 0, elementList = can1.elementList, j = can1.elementList.length; i < j; i++) {
          if( can1.pointIsInRect(point, this.$common.transSize(width, height, 1880, 810, can1.elementObjects[elementList[i]])) ) {
            // console.log('鼠标现在在' + elementList[i] + '元素上');
            el = elementList[i];
@@ -1088,27 +1163,34 @@

            break;
          }
        }
        }*/
      }
    }
    ,handelMouseleave () {
      if (el) {
        can.emit(el, 'mouseleave');
        can1.emit(el, 'mouseleave');
        // can1.emit(el, 'mouseleave');
      }
    }
    
  },
  mounted () {
    const $container = this.$refs.container;
    this.canvasInit();

    // console.log(can, '====can');
    this.timer_g.start(() => {
      draw.update(this, can1, this.dev_alarm);
      this.timer_g.open();
    }, 200);
    // 初始化
    this.timer.start(() => {
      // 添加电源数据
      this.setPowerData();
      this.setMotorData();
      this.setBattData();

      // 查实时告警
      this.getAllRtAlarm();

      this.getConnect();

@@ -1142,6 +1224,7 @@
  ,destroyed() {
    window.removeEventListener('resize', resizeHandler);
    this.timer.stop();
    this.timer_g.stop();
  }

}