内容提交

longyvfengyun

2024-09-04 1b2b7d5bb61e38ae5982e89308950f5d318624f3

内容提交

 src/views/dataTest/components/CircuitDiagram.vue

@@ -46,6 +46,7 @@
    :temp="temp"
    :update="update"
    :batt="batt"
    :is-show-tool="isCollect"
  ></collect-circuit-diagram>
  <lithium-diagram
    v-else-if="diagramType === 'lithium'"
@@ -131,6 +132,8 @@
    :dis-curr-max="DisCurrMax"
    :start="start"
  ></normal-circuit-diagram>
  <!--    </div>-->
  <!--  </div>-->
</template>

<script>
@@ -263,6 +266,10 @@
    },
  },
  computed: {
    isCollect() {
      let batt = this.batt;
      return regEquipType(batt.fbsdeviceId, ["BTS9605", "BTS9611"]);
    },
    diagramType() {
      let rs = "normal";
      let batt = this.batt;

 src/views/dataTest/components/diagrams/collect/index.vue

@@ -2,28 +2,28 @@
  <div class="diagram-content">
    <div class="diagram-stc" ref="static"></div>
    <div class="diagram-flush" ref="flush"></div>
    <div class="diagram-tools">
    <div class="diagram-tools" v-show="isShowTool">
      <div class="tools-header">设备状态</div>
      <table class="tools-table">
        <tr>
          <td class="item-label">温 度：</td>
          <td>{{toolsInfo.temp}} ℃</td>
          <td>{{ toolsInfo.temp }} ℃</td>
        </tr>
        <tr>
          <td class="item-label">湿 度：</td>
          <td>{{toolsInfo.hum}} %rh</td>
          <td>{{ toolsInfo.hum }} %rh</td>
        </tr>
        <tr>
          <td class="item-label">在线电压：</td>
          <td>{{toolsInfo.onlineVol}} V</td>
          <td>{{ toolsInfo.onlineVol }} V</td>
        </tr>
        <tr>
          <td class="item-label">组端电压：</td>
          <td>{{toolsInfo.groupVol}} V</td>
          <td>{{ toolsInfo.groupVol }} V</td>
        </tr>
        <tr>
          <td class="item-label">电池电流：</td>
          <td>{{toolsInfo.battCurr}} A</td>
          <td>{{ toolsInfo.battCurr }} A</td>
        </tr>
      </table>
    </div>
@@ -92,6 +92,10 @@
      type: Boolean,
      default: true,
    },
    isShowTool: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    onlineVol(val) {
@@ -104,7 +108,11 @@
      diagram.setOption("battCurr", "text", val.toHold(CURR) + "A");
    },
    devTemp(val) {
      diagram.setOption("devTemp", "text", "设备温度：" + val.toHold(TEMP) + "℃");
      diagram.setOption(
        "devTemp",
        "text",
        "设备温度：" + val.toHold(TEMP) + "℃"
      );
    },
    type(val) {
      this.setDiagramByType();
@@ -123,7 +131,11 @@
      diagram.setOption("onlineVol", "text", this.onlineVol.toHold(VOL) + "V");
      diagram.setOption("groupVol", "text", this.groupVol.toHold(VOL) + "V");
      diagram.setOption("battCurr", "text", this.battCurr.toHold(CURR) + "A");
      diagram.setOption("devTemp", "text", "设备温度：" + this.devTemp.toHold(TEMP) + "℃");
      diagram.setOption(
        "devTemp",
        "text",
        "设备温度：" + this.devTemp.toHold(TEMP) + "℃"
      );

      // 设置更新状态
      if (!this.update) {
@@ -164,15 +176,15 @@
      }
    },
  },
  computed:{
  computed: {
    toolsInfo() {
      return {
        onlineVol: this.onlineVol.toHold(VOL),
        groupVol: this.groupVol.toHold(VOL),
        battCurr: this.battCurr.toHold(CURR),
        temp: this.temp.toHold(TEMP),
        hum: this.hum.toHold(HUM)
      }
        hum: this.hum.toHold(HUM),
      };
    },
  },
  mounted() {

 src/views/dataTest/components/diagrams/loadReverse/buscouple/index.vue

@@ -1,7 +1,9 @@
<template>
  <div class="diagram-content">
    <div class="diagram-stc" ref="static"></div>
    <div class="diagram-flush" ref="flush"></div>
  <div class="diagram-wrapper-hdw">
    <div class="diagram-content">
      <div class="diagram-stc" ref="static"></div>
      <div class="diagram-flush" ref="flush"></div>
    </div>
  </div>
</template>

@@ -54,8 +56,8 @@
    },
    buscoupleSwitch: {
      type: Number,
      default: 0
    }
      default: 0,
    },
  },
  watch: {
    onlineVol(val) {
@@ -68,7 +70,11 @@
      diagram.setOption("battCurr", "text", val.toHold(CURR) + "A");
    },
    devTemp(val) {
      diagram.setOption("devTemp", "text", "设备温度：" + val.toHold(TEMP) + "℃");
      diagram.setOption(
        "devTemp",
        "text",
        "设备温度：" + val.toHold(TEMP) + "℃"
      );
    },
    type(val) {
      this.setDiagramByType();
@@ -81,9 +87,9 @@
      }
    },
    buscoupleSwitch(val) {
      diagram.setOption('km5', 'state', val?true:false);
      diagram.setOption('km4', 'state', val?true:false);
    }
      diagram.setOption("km5", "state", val ? true : false);
      diagram.setOption("km4", "state", val ? true : false);
    },
  },
  methods: {
    init() {
@@ -91,9 +97,13 @@
      diagram.setOption("onlineVol", "text", this.onlineVol.toHold(VOL) + "V");
      diagram.setOption("groupVol", "text", this.groupVol.toHold(VOL) + "V");
      diagram.setOption("battCurr", "text", this.battCurr.toHold(CURR) + "A");
      diagram.setOption("devTemp", "text", "设备温度：" + this.devTemp.toHold(TEMP) + "℃");
      diagram.setOption('km5', 'state', this.buscoupleSwitch?true:false);
      diagram.setOption('km4', 'state', this.buscoupleSwitch?true:false);
      diagram.setOption(
        "devTemp",
        "text",
        "设备温度：" + this.devTemp.toHold(TEMP) + "℃"
      );
      diagram.setOption("km5", "state", this.buscoupleSwitch ? true : false);
      diagram.setOption("km4", "state", this.buscoupleSwitch ? true : false);

      // 设置更新状态
      if (!this.update) {
@@ -137,3 +147,10 @@
  },
};
</script>

<style scoped>
.diagram-wrapper-hdw {
  height: 100%;
  padding-left: 220px;
}
</style>

 src/views/dataTest/diagram/index.js

@@ -8,9 +8,11 @@
  this.options = []; // 所有配置对象
  this.flushOptions = []; // 需要刷新的对象
  this.handleObj = []; // 可以触发事件的对象
  this.opts = { // 默认配置
  this.opts = {
    // 默认配置
    lineWidth: 3, // 线宽
    onOffBase: { // 开关的基础配置
    onOffBase: {
      // 开关的基础配置
      radius: 4,
      radius1: 3,
      width: 28,
@@ -20,8 +22,8 @@
    moveDot: {
      radius: 6,
      step: 2.2,
      gravity: 0.08
    }
      gravity: 0.08,
    },
  };
  // 显示线条的id
  this.showLineId = false;
@@ -30,18 +32,18 @@
// 设置canvas
Diagram.prototype.setCanvas = function (stc, flush) {
  // 设置静态canvas
  this.stc = document.createElement('canvas');
  this.stc = document.createElement("canvas");
  stc.appendChild(this.stc);
  this.stc.width = this.width;
  this.stc.height = this.height;
  this.s_ctx = this.stc.getContext('2d');
  this.s_ctx = this.stc.getContext("2d");

  // 设置动态canvas
  this.flush = document.createElement('canvas');
  this.flush = document.createElement("canvas");
  flush.appendChild(this.flush);
  this.flush.width = this.width;
  this.flush.height = this.height;
  this.f_ctx = this.flush.getContext('2d');
  this.f_ctx = this.flush.getContext("2d");

  this.startState = false;

@@ -53,27 +55,26 @@
 * 设置canvas的宽度
 * @param width
 */
Diagram.prototype.setWidth = function(width) {
Diagram.prototype.setWidth = function (width) {
  this.width = width;
  this.stc.width = width;
  this.flush.width = width;
}
};

/**
 * 设置canvas的高度
 * @param height
 */
Diagram.prototype.setHeight = function(height) {
Diagram.prototype.setHeight = function (height) {
  this.height = height;
  this.stc.height = height;
  this.flush.height = height;
}

};

// 启动更新
Diagram.prototype.start = function (start) {
  if (start) {
    console.log('已经启动持续更新');
    console.log("已经启动持续更新");
    this.startState = true;
  }

@@ -89,16 +90,15 @@
  });
  this.f_ctx.save();
  this.f_ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
  this.f_ctx.globalCompositeOperation = 'destination-in';
  this.f_ctx.globalCompositeOperation = "destination-in";
  this.f_ctx.fillRect(0, 0, this.width, this.height);
  this.f_ctx.restore();

}
};

// 停止更新
Diagram.prototype.stop = function () {
  this.startState = false;
  console.log('已经停止持续更新');
  console.log("已经停止持续更新");
};

// 更新整个图表
@@ -106,16 +106,16 @@
  // 清空图表
  //this.f_ctx.clearRect(0, 0, this.width, this.height);
  let options = this.flushOptions;
  options.forEach(option => {
  options.forEach((option) => {
    this.update(option);
  });
};
// 根据配置项更新图表
Diagram.prototype.update = function (option) {
  if (option && option.method && typeof this[option.method] == 'function') {
  if (option && option.method && typeof this[option.method] == "function") {
    this[option.method](option);
  }
}
};

/**
 * 检测对象是否在数组中
@@ -143,7 +143,7 @@
  }
  // 返回结果
  return isIn;
}
};

// 添加配置项
Diagram.prototype.addOptions = function (option) {
@@ -187,7 +187,7 @@
    }
  }
  return result;
}
};

// 绘制线
Diagram.prototype.line = function (option) {
@@ -228,10 +228,9 @@
      } else {
        point[0] = points[1][0] + (points[0][0] - points[1][0]) / 2;
      }

    }
    this.text({
      text: option.id ? option.id : '',
      text: option.id ? option.id : "",
      point: point,
      hide: option.hide,
    });
@@ -273,19 +272,16 @@
    width: 120,
  };
  let point = option.point;
  let strokeStyle = '#FFFFFF';
  let strokeStyle = "#FFFFFF";
  let lineWidth = option.lineWidth ? option.lineWidth : 2;
  let leftHide = (option.hide || option.leftHide) ? true : false;
  let rightHide = (option.hide || option.rightHide) ? true : false;
  let leftHide = option.hide || option.leftHide ? true : false;
  let rightHide = option.hide || option.rightHide ? true : false;
  // 线条1
  let line1 = this.line({
    strokeStyle: strokeStyle,
    lineWidth: lineWidth,
    hide: leftHide,
    points: [
      point,
      [point[0], point[1] - defaultOption.width / 2]
    ],
    points: [point, [point[0], point[1] - defaultOption.width / 2]],
  });

  // 线条2
@@ -293,10 +289,7 @@
    strokeStyle: strokeStyle,
    lineWidth: lineWidth,
    hide: leftHide,
    points: [
      line1[1],
      [line1[1][0] + defaultOption.width, line1[1][1]]
    ],
    points: [line1[1], [line1[1][0] + defaultOption.width, line1[1][1]]],
  });

  // 线条3
@@ -304,10 +297,7 @@
    strokeStyle: strokeStyle,
    lineWidth: lineWidth,
    hide: rightHide,
    points: [
      line2[1],
      [line2[1][0] + defaultOption.width, line2[1][1]]
    ],
    points: [line2[1], [line2[1][0] + defaultOption.width, line2[1][1]]],
  });

  // 线条4
@@ -315,10 +305,7 @@
    strokeStyle: strokeStyle,
    lineWidth: lineWidth,
    hide: rightHide,
    points: [
      line3[1],
      [line3[1][0], line3[1][1] + defaultOption.width]
    ],
    points: [line3[1], [line3[1][0], line3[1][1] + defaultOption.width]],
  });

  // 线条5
@@ -328,7 +315,7 @@
    hide: rightHide,
    points: [
      line4[1],
      [line4[1][0] - defaultOption.width, line1[1][1] + defaultOption.width]
      [line4[1][0] - defaultOption.width, line1[1][1] + defaultOption.width],
    ],
  });

@@ -337,10 +324,7 @@
    strokeStyle: strokeStyle,
    lineWidth: lineWidth,
    hide: leftHide,
    points: [
      line5[1],
      [line1[1][0], line1[1][1] + defaultOption.width]
    ],
    points: [line5[1], [line1[1][0], line1[1][1] + defaultOption.width]],
  });

  // 线条7
@@ -348,10 +332,7 @@
    strokeStyle: strokeStyle,
    lineWidth: lineWidth,
    hide: option.hide,
    points: [
      line6[1],
      [line1[0][0], line1[0][1]]
    ],
    points: [line6[1], [line1[0][0], line1[0][1]]],
  });

  // 线条8
@@ -361,16 +342,19 @@
    hide: option.hide,
    points: [
      [line1[1][0] + defaultOption.width, line1[1][1]],
      [line1[1][0] + defaultOption.width, line1[1][1] + defaultOption.width]
      [line1[1][0] + defaultOption.width, line1[1][1] + defaultOption.width],
    ],
  });

  return [
    [line1[1][0] + defaultOption.width / 2, line1[1][1]],
    [line1[1][0] + defaultOption.width * 3 / 2, line1[1][1]],
    [line1[1][0] + defaultOption.width * 3 / 2, line1[1][1] + defaultOption.width],
    [line1[1][0] + (defaultOption.width * 3) / 2, line1[1][1]],
    [
      line1[1][0] + (defaultOption.width * 3) / 2,
      line1[1][1] + defaultOption.width,
    ],
    [line1[1][0] + defaultOption.width / 2, line1[1][1] + defaultOption.width],
  ]
  ];
};

// 绘制圆
@@ -385,10 +369,10 @@
    ctx.fillStyle = option.fillStyle;
    ctx.arc(point[0], point[1], option.radius, 0, 2 * Math.PI);
    switch (option.type) {
      case 'stroke':
      case "stroke":
        ctx.stroke();
        break;
      case 'fill':
      case "fill":
        ctx.fill();
        break;
      default:
@@ -410,7 +394,7 @@
    br: [point[0] + option.radius / 2, point[1] + option.radius / 2],
    strokeStyle: option.strokeStyle,
    fillStyle: option.fillStyle,
    radius: option.radius
    radius: option.radius,
  };
  // 添加配置项
  option.method = "arc";
@@ -423,8 +407,8 @@
Diagram.prototype.onOff = function (option) {
  let result;
  switch (option.direction) {
    case 'top':
    case 'bottom':
    case "top":
    case "bottom":
      result = this.onOff_h(option);
      break;
    default:
@@ -448,36 +432,38 @@
  let arc1 = this.arc({
    point: [point[0] + onOffBase.radius / 2, point[1]],
    flush: option.flush,
    fillStyle: '#50cef5',
    strokeStyle: '#50cef5',
    fillStyle: "#50cef5",
    strokeStyle: "#50cef5",
    radius: onOffBase.radius,
    type: 'stroke'
    type: "stroke",
  });

  // 开关的第二个圆
  let arc2 = this.arc({
    point: [arc1.right[0] + onOffBase.width * 4 / 3, arc1.right[1]],
    point: [arc1.right[0] + (onOffBase.width * 4) / 3, arc1.right[1]],
    flush: option.flush,
    fillStyle: arc1.fillStyle,
    strokeStyle: arc1.fillStyle,
    radius: arc1.radius,
    type: 'stroke'
    type: "stroke",
  });
  let line1;
  switch (option.direction) {
    case 'right':
    case "right":
      // 绘制线条
      line1 = this.line({
        points: [
          arc2.left,
          [
            state ? arc1.top[0] : arc1.center[0],
            state ? arc1.top[1] : arc1.center[1] - (arc1.radius + onOffBase.width * 3 / 4)
            state
              ? arc1.top[1]
              : arc1.center[1] - (arc1.radius + (onOffBase.width * 3) / 4),
          ],
        ],
        flush: option.flush,
        strokeStyle: state ? '#b370fe' : '#50cef5',
        lineWidth: onOffBase.lineWidth
        strokeStyle: state ? "#b370fe" : "#50cef5",
        lineWidth: onOffBase.lineWidth,
      });
      break;
    default:
@@ -487,20 +473,22 @@
          arc1.right,
          [
            state ? arc2.top[0] : arc2.center[0],
            state ? arc2.top[1] : arc2.center[1] - (arc2.radius + onOffBase.width * 3 / 4)
            state
              ? arc2.top[1]
              : arc2.center[1] - (arc2.radius + (onOffBase.width * 3) / 4),
          ],
        ],
        flush: option.flush,
        strokeStyle: state ? '#b370fe' : '#50cef5',
        lineWidth: onOffBase.lineWidth
        strokeStyle: state ? "#b370fe" : "#50cef5",
        lineWidth: onOffBase.lineWidth,
      });
      break;
  }
  return {
    arc1: arc1,
    arc2: arc2,
    line1: line1
  }
    line1: line1,
  };
};
// 竖直方向
Diagram.prototype.onOff_h = function (option) {
@@ -512,37 +500,39 @@
  let arc1 = this.arc({
    point: [point[0], point[1] + onOffBase.radius],
    flush: option.flush,
    fillStyle: '#50cef5',
    strokeStyle: '#50cef5',
    fillStyle: "#50cef5",
    strokeStyle: "#50cef5",
    radius: onOffBase.radius,
    type: 'stroke'
    type: "stroke",
  });

  // 开关的第二个圆
  let arc2 = this.arc({
    point: [arc1.bottom[0], arc1.right[1] + onOffBase.width * 4 / 3],
    point: [arc1.bottom[0], arc1.right[1] + (onOffBase.width * 4) / 3],
    flush: option.flush,
    fillStyle: arc1.fillStyle,
    strokeStyle: arc1.fillStyle,
    radius: arc1.radius,
    type: 'stroke'
    type: "stroke",
  });

  let line1;
  switch (option.direction) {
    case 'top':
    case "top":
      // 绘制线条
      line1 = this.line({
        points: [
          arc1.bottom,
          [
            state ? arc2.right[0] : arc2.center[0] + (arc1.radius + onOffBase.width * 3 / 4),
            state ? arc2.right[1] : arc2.center[1]
            state
              ? arc2.right[0]
              : arc2.center[0] + (arc1.radius + (onOffBase.width * 3) / 4),
            state ? arc2.right[1] : arc2.center[1],
          ],
        ],
        flush: option.flush,
        strokeStyle: state ? '#b370fe' : '#50cef5',
        lineWidth: onOffBase.lineWidth
        strokeStyle: state ? "#b370fe" : "#50cef5",
        lineWidth: onOffBase.lineWidth,
      });
      break;
    default:
@@ -551,21 +541,23 @@
        points: [
          arc2.top,
          [
            state ? arc1.right[0] : arc1.center[0] + (arc2.radius + onOffBase.width * 3 / 4),
            state ? arc1.right[1] : arc1.center[1]
            state
              ? arc1.right[0]
              : arc1.center[0] + (arc2.radius + (onOffBase.width * 3) / 4),
            state ? arc1.right[1] : arc1.center[1],
          ],
        ],
        flush: option.flush,
        strokeStyle: state ? '#b370fe' : '#50cef5',
        lineWidth: onOffBase.lineWidth
        strokeStyle: state ? "#b370fe" : "#50cef5",
        lineWidth: onOffBase.lineWidth,
      });
      break;
  }
  return {
    arc1: arc1,
    arc2: arc2,
    line1: line1
  }
    line1: line1,
  };
};

// BAT
@@ -573,21 +565,31 @@
  let ctx = option.flush ? this.f_ctx : this.s_ctx;
  let point = option.point;
  let bat = {
    width: 14
    width: 14,
  };
  ctx.fillStyle = option.fillStyle ? option.fillStyle : "#b370fe";
  ctx.strokeStyle = option.strokeStyle;
  ctx.lineWidth = option.lineWidth ? option.lineWidth : 3;

  ctx.fillRect(point[0] - bat.width / 2, point[1] - bat.width / 2, bat.width, bat.width);
  ctx.fillRect(
    point[0] - bat.width / 2,
    point[1] - bat.width / 2,
    bat.width,
    bat.width
  );

  ctx.strokeRect(point[0] - bat.width / 2, point[1] - bat.width / 2, bat.width, bat.width)
  ctx.strokeRect(
    point[0] - bat.width / 2,
    point[1] - bat.width / 2,
    bat.width,
    bat.width
  );
  return {
    top: [point[0], point[1] - bat.width / 2],
    bottom: [point[0], point[1] + bat.width / 2],
    left: [point[0] - bat.width / 2 - ctx.lineWidth / 2, point[1]],
    right: [point[0] + bat.width / 2 + ctx.lineWidth / 2, point[1]]
  }
    right: [point[0] + bat.width / 2 + ctx.lineWidth / 2, point[1]],
  };
};

// 绘制图片
@@ -603,9 +605,8 @@
    } else {
      img.onload = function () {
        ctx.drawImage(img, point[0], point[1], option.width, option.height);
      }
      };
    }

  }

  // 返回图片信息
@@ -634,37 +635,37 @@
  let ctx = option.flush ? this.f_ctx : this.s_ctx;
  let point = option.point;
  let fontSize = option.fontSize ? option.fontSize : 12;
  option.text = option.text+"";
  let blbl = option.blbl?option.blbl:false;
  option.blblState = option.blblState?option.blblState:false;      // 字体闪烁
  let blblNum = option.blblNum = 30;           // 闪烁频率
  option.blblCount = option.blblCount?option.blblCount:0;                       // 闪烁计数器
  option.text = option.text + "";
  let blbl = option.blbl ? option.blbl : false;
  option.blblState = option.blblState ? option.blblState : false; // 字体闪烁
  let blblNum = (option.blblNum = 30); // 闪烁频率
  option.blblCount = option.blblCount ? option.blblCount : 0; // 闪烁计数器

  let texts = option.text.split('&');
  let texts = option.text.split("&");
  ctx.beginPath();
  ctx.fillStyle = option.fillStyle ? option.fillStyle : '#FFFFFF';
  ctx.fillStyle = option.fillStyle ? option.fillStyle : "#FFFFFF";
  ctx.lineWidth = option.lineWidth ? option.lineWidth : 1;
  ctx.font = fontSize + 'px Arial';
  ctx.textAlign = option.align ? option.align : 'start';
  ctx.textBaseline = option.baseline ? option.baseline : 'top';
  ctx.fontWeight = ctx.fontWeight?"bold":"";
  ctx.font = fontSize + "px Arial";
  ctx.textAlign = option.align ? option.align : "start";
  ctx.textBaseline = option.baseline ? option.baseline : "top";
  ctx.fontWeight = ctx.fontWeight ? "bold" : "";
  let isHide = false;
  if (!option.hide) {
    if(blbl) {
      if(option.blblCount >= blblNum) {
    if (blbl) {
      if (option.blblCount >= blblNum) {
        option.blblCount = 0;
        option.blblState = option.blblState?false:true;
      }else {
        option.blblState?option.blblCount++:option.blblCount+=2;
        option.blblState = option.blblState ? false : true;
      } else {
        option.blblState ? option.blblCount++ : (option.blblCount += 2);
      }
      isHide = option.blblState?false:true;
    }else {
      isHide = option.blblState ? false : true;
    } else {
      isHide = false;
    }
  }else {
  } else {
    isHide = true;
  }
  if(!isHide) {
  if (!isHide) {
    texts.forEach((text, index) => {
      if (index == 0) {
        ctx.fillText(text, point[0], point[1] + fontSize * index);
@@ -673,7 +674,6 @@
      }
    });
  }


  // 设置执行的方法
  option.method = "text";
@@ -692,28 +692,28 @@
  let radius = option.radius ? option.radius : opts.radius;
  if (this.getOption(option.id)) {
    switch (option.type) {
      case 'up':
      case "up":
        start[1] -= opts.step;
        // 约束限制
        if (start[1] < points[1][1]) {
          start[1] = points[0][1];
        }
        break;
      case 'down':
      case "down":
        start[1] += opts.step;
        // 约束限制
        if (start[1] > points[1][1]) {
          start[1] = points[0][1];
        }
        break;
      case 'left':
      case "left":
        start[0] += opts.step;
        // 约束限制
        if (start[0] > points[1][0]) {
          start[0] = points[0][0];
        }
        break;
      case 'right':
      case "right":
        start[0] -= opts.step;
        // 约束限制
        if (start[0] < points[1][0]) {
@@ -721,22 +721,22 @@
        }
    }
    // 设置值
    this.setOption(option.id, 'start', start);
    this.setOption(option.id, "start", start);
  } else {
    // 竖直运动
    if (points[0][0] == points[1][0]) {
      // 向上运动
      if (points[0][1] > points[1][1]) {
        option.type = 'up';
        option.type = "up";
      } else {
        option.type = 'down';
        option.type = "down";
      }
    } else {
      // 向左运动
      if (points[0][0] < points[1][0]) {
        option.type = 'left';
        option.type = "left";
      } else {
        option.type = 'right';
        option.type = "right";
      }
    }
    option.start = start;
@@ -746,7 +746,7 @@
    point: start,
    fillStyle: fillStyle,
    strokeStyle: strokeStyle,
    radius: radius
    radius: radius,
  });
  // 添加配置项
  option.method = "moveDot";
@@ -757,13 +757,13 @@
Diagram.prototype.diode = function (option) {
  let result = {};
  switch (option.direction) {
    case 'down':
    case "down":
      result = this.diodeDown(option);
      break;
    case 'right':
    case "right":
      result = this.diodeRight(option);
      break;
    case 'left':
    case "left":
      result = this.diodeLeft(option);
      break;
    default:
@@ -774,21 +774,18 @@
};

// 向右的
Diagram.prototype.diodeRight = function(option) {
Diagram.prototype.diodeRight = function (option) {
  let ctx = option.flush ? this.f_ctx : this.s_ctx;
  let point = option.point;
  let width = 40;
  let height = width * 2 / 3;
  let height = (width * 2) / 3;
  let lineWidth = 2;

  // line1
  let line1 = this.line({
    strokeStyle: "#b370fe",
    lineWidth: lineWidth,
    points: [
      point,
      [point[0]+ width / 2, point[1]]
    ]
    points: [point, [point[0] + width / 2, point[1]]],
  });
  ctx.beginPath();
  ctx.moveTo(line1[1][0], line1[1][1] - width / 2);
@@ -803,9 +800,9 @@
    strokeStyle: "#b370fe",
    lineWidth: lineWidth,
    points: [
      [line1[1][0]+ height, line1[1][1] - width / 2],
      [line1[1][0] + height, line1[1][1] + width / 2 ]
    ]
      [line1[1][0] + height, line1[1][1] - width / 2],
      [line1[1][0] + height, line1[1][1] + width / 2],
    ],
  });

  // line3
@@ -813,33 +810,30 @@
    strokeStyle: "#b370fe",
    lineWidth: lineWidth,
    points: [
      [line1[1][0]+ height, line1[1][1]],
      [line1[1][0]+ height + width / 2, line1[1][1]]
    ]
      [line1[1][0] + height, line1[1][1]],
      [line1[1][0] + height + width / 2, line1[1][1]],
    ],
  });

  return  {
  return {
    left: line1[0],
    right: line3[1]
  }
    right: line3[1],
  };
};

// 向左的
Diagram.prototype.diodeLeft = function(option) {
Diagram.prototype.diodeLeft = function (option) {
  let ctx = option.flush ? this.f_ctx : this.s_ctx;
  let point = option.point;
  let width = 40;
  let height = width * 2 / 3;
  let height = (width * 2) / 3;
  let lineWidth = 2;

  // line1
  let line1 = this.line({
    strokeStyle: "#b370fe",
    lineWidth: lineWidth,
    points: [
      point,
      [point[0]+ width / 2, point[1]]
    ]
    points: [point, [point[0] + width / 2, point[1]]],
  });

  // line2
@@ -848,14 +842,14 @@
    lineWidth: lineWidth,
    points: [
      [line1[1][0], line1[1][1] - width / 2],
      [line1[1][0], line1[1][1] + width / 2 ]
    ]
      [line1[1][0], line1[1][1] + width / 2],
    ],
  });

  ctx.beginPath();
  ctx.moveTo(line1[1][0], line1[1][1]);
  ctx.lineTo(line1[1][0]+height, line1[1][1] - width / 2);
  ctx.lineTo(line1[1][0]+height, line1[1][1] + width / 2);
  ctx.lineTo(line1[1][0] + height, line1[1][1] - width / 2);
  ctx.lineTo(line1[1][0] + height, line1[1][1] + width / 2);
  ctx.closePath();
  ctx.fillStyle = "#b370fe";
  ctx.fill();
@@ -865,32 +859,29 @@
    strokeStyle: "#b370fe",
    lineWidth: lineWidth,
    points: [
      [line1[1][0]+ height, line1[1][1]],
      [line1[1][0]+ height + width / 2, line1[1][1]]
    ]
      [line1[1][0] + height, line1[1][1]],
      [line1[1][0] + height + width / 2, line1[1][1]],
    ],
  });

  return  {
  return {
    left: line1[0],
    right: line3[1]
  }
}
    right: line3[1],
  };
};

// 向上的
Diagram.prototype.diodeUp = function (option) {
  let ctx = option.flush ? this.f_ctx : this.s_ctx;
  let point = option.point;
  let width = 40;
  let height = width * 2 / 3;
  let height = (width * 2) / 3;
  let lineWidth = 2;
  // line1
  let line1 = this.line({
    strokeStyle: "#b370fe",
    lineWidth: lineWidth,
    points: [
      point,
      [point[0], point[1] + width / 2]
    ]
    points: [point, [point[0], point[1] + width / 2]],
  });
  // line2
  let line2 = this.line({
@@ -898,8 +889,8 @@
    lineWidth: lineWidth,
    points: [
      [line1[1][0] - width / 2, line1[1][1]],
      [line1[1][0] + width / 2, line1[1][1]]
    ]
      [line1[1][0] + width / 2, line1[1][1]],
    ],
  });
  ctx.beginPath();
  ctx.moveTo(line1[1][0], line1[1][1]);
@@ -915,8 +906,8 @@
    lineWidth: lineWidth,
    points: [
      [line1[1][0], line1[1][1] + height],
      [line1[1][0], line1[1][1] + height + width / 2]
    ]
      [line1[1][0], line1[1][1] + height + width / 2],
    ],
  });

  // 添加配置项
@@ -924,24 +915,21 @@
  this.addOptions(option);
  return {
    top: line1[0],
    bottom: line3[1]
  }
    bottom: line3[1],
  };
};
// 向下的
Diagram.prototype.diodeDown = function (option) {
  let ctx = option.flush ? this.f_ctx : this.s_ctx;
  let point = option.point;
  let width = 40;
  let height = width * 2 / 3;
  let height = (width * 2) / 3;
  let lineWidth = 2;
  // line1
  let line1 = this.line({
    strokeStyle: "#b370fe",
    lineWidth: lineWidth,
    points: [
      point,
      [point[0], point[1] + width / 2]
    ]
    points: [point, [point[0], point[1] + width / 2]],
  });
  // line2
  // let line2 = this.line({
@@ -965,8 +953,8 @@
    lineWidth: lineWidth,
    points: [
      [line1[1][0] - width / 2, line1[1][1] + height],
      [line1[1][0] + width / 2, line1[1][1] + height]
    ]
      [line1[1][0] + width / 2, line1[1][1] + height],
    ],
  });
  // line3
  let line3 = this.line({
@@ -974,8 +962,8 @@
    lineWidth: lineWidth,
    points: [
      [line1[1][0], line1[1][1] + height],
      [line1[1][0], line1[1][1] + height + width / 2]
    ]
      [line1[1][0], line1[1][1] + height + width / 2],
    ],
  });

  // 添加配置项
@@ -983,28 +971,27 @@
  this.addOptions(option);
  return {
    top: line1[0],
    bottom: line3[1]
  }
    bottom: line3[1],
  };
};
// 绘制矩形
Diagram.prototype.drawRect = function (option) {
  let ctx = option.flush ? this.f_ctx : this.s_ctx; // 获取上下文
  let defaultOption = option.size?option.size:{
    width: 120,
    height: 120,
  };
  let defaultOption = option.size
    ? option.size
    : {
        width: 120,
        height: 120,
      };
  let point = option.point;
  let strokeStyle = option.strokeStyle?option.strokeStyle:'#FFFFFF';
  let strokeStyle = option.strokeStyle ? option.strokeStyle : "#FFFFFF";
  let lineWidth = option.lineWidth ? option.lineWidth : 2;
  // 线条1
  let line1 = this.line({
    strokeStyle: strokeStyle,
    lineWidth: lineWidth,
    hide: option.hide,
    points: [
      point,
      [point[0], point[1] + defaultOption.height]
    ],
    points: [point, [point[0], point[1] + defaultOption.height]],
  });

  // 线条2
@@ -1012,10 +999,7 @@
    strokeStyle: strokeStyle,
    lineWidth: lineWidth,
    hide: option.hide,
    points: [
      line1[1],
      [line1[1][0] + defaultOption.width, line1[1][1]]
    ],
    points: [line1[1], [line1[1][0] + defaultOption.width, line1[1][1]]],
  });

  // 线条3
@@ -1023,10 +1007,7 @@
    strokeStyle: strokeStyle,
    lineWidth: lineWidth,
    hide: option.hide,
    points: [
      line2[1],
      [line2[1][0], line2[1][1] - defaultOption.height]
    ],
    points: [line2[1], [line2[1][0], line2[1][1] - defaultOption.height]],
  });

  // 线条4
@@ -1034,10 +1015,7 @@
    strokeStyle: strokeStyle,
    lineWidth: lineWidth,
    hide: option.hide,
    points: [
      line3[1],
      line1[0]
    ],
    points: [line3[1], line1[0]],
  });

  return {
@@ -1048,9 +1026,8 @@
    tl: line1[0],
    tr: line4[0],
    bl: line2[0],
    br: line3[0]
    br: line3[0],
  };

};

// 绘制电池
@@ -1064,7 +1041,12 @@
  let l1Width = width * 0.3;
  let l1Height = height;
  let l1point = [point[0] + width / 2 - l1Width / 2, point[1]];
  let g1 = ctx.createLinearGradient(l1point[0], l1point[1], l1point[0] + l1Width, l1point[1]);
  let g1 = ctx.createLinearGradient(
    l1point[0],
    l1point[1],
    l1point[0] + l1Width,
    l1point[1]
  );
  g1.addColorStop(0, "#acacac");
  g1.addColorStop(0.3, "#f4f4f4");
  g1.addColorStop(1, "#231806");
@@ -1074,7 +1056,12 @@
  // 电池第二层
  let l2Point = [point[0], l1point[1] + height];
  let l2Height = height;
  let g2 = ctx.createLinearGradient(l2Point[0], l2Point[1], l2Point[0] + width, l2Point[1]);
  let g2 = ctx.createLinearGradient(
    l2Point[0],
    l2Point[1],
    l2Point[0] + width,
    l2Point[1]
  );
  g2.addColorStop(0, "#a2a19f");
  g2.addColorStop(0.1, "#dedcdd");
  g2.addColorStop(0.5, "#51504c");
@@ -1085,8 +1072,13 @@

  // 电池第三层
  let l3Point = [point[0], l2Point[1] + height];
  let l3Height = width * 3 / 2 + height;
  let g3 = ctx.createLinearGradient(l3Point[0], l3Point[1], l3Point[0] + width, l3Point[1]);
  let l3Height = (width * 3) / 2 + height;
  let g3 = ctx.createLinearGradient(
    l3Point[0],
    l3Point[1],
    l3Point[0] + width,
    l3Point[1]
  );
  g3.addColorStop(0, "#6a6e9150");
  g3.addColorStop(0.1, "#69749480");
  g3.addColorStop(0.11, "#a8adc380");
@@ -1099,7 +1091,12 @@
  // 电池第四层
  let l4Point = [point[0], l3Point[1] + l3Height];
  let l4Height = height;
  let g4 = ctx.createLinearGradient(l4Point[0], l4Point[1], l4Point[0] + width, l4Point[1]);
  let g4 = ctx.createLinearGradient(
    l4Point[0],
    l4Point[1],
    l4Point[0] + width,
    l4Point[1]
  );
  g4.addColorStop(0, "#a2a19f");
  g4.addColorStop(0.1, "#dedcdd");
  g4.addColorStop(0.5, "#51504c");
@@ -1129,9 +1126,14 @@
  option.percent = percent;

  // 绘制第5层
  let l5Height = percent / 100 * l3Height;
  let l5Height = (percent / 100) * l3Height;
  let l5Point = [l4Point[0], l4Point[1] - l5Height];
  let g5 = ctx.createLinearGradient(l5Point[0], l5Point[1], l5Point[0] + width, l5Point[1]);
  let g5 = ctx.createLinearGradient(
    l5Point[0],
    l5Point[1],
    l5Point[0] + width,
    l5Point[1]
  );

  if (option.moveType == "charge") {
    g5.addColorStop(0, "#00a7ff");
@@ -1167,11 +1169,11 @@
  };
};

Diagram.prototype.lineBattery = function(option) {
Diagram.prototype.lineBattery = function (option) {
  let ctx = option.flush ? this.f_ctx : this.s_ctx; // 获取上下文
  let point = option.point;
  let size = 40;
  let strokeStyle = option.strokeStyle?option.strokeStyle:'#FFFFFF';
  let strokeStyle = option.strokeStyle ? option.strokeStyle : "#FFFFFF";
  let lineWidth = option.lineWidth ? option.lineWidth : 2;

  // 线条1
@@ -1180,8 +1182,8 @@
    lineWidth: lineWidth,
    hide: option.hide,
    points: [
      [point[0], point[1]-size/2],
      [point[0], point[1] + size/2]
      [point[0], point[1] - size / 2],
      [point[0], point[1] + size / 2],
    ],
  });

@@ -1191,18 +1193,18 @@
    lineWidth: lineWidth,
    hide: option.hide,
    points: [
      [line1[0][0]+12, point[1]-size/3],
      [line1[0][0]+12, point[1] + size/3]
      [line1[0][0] + 12, point[1] - size / 3],
      [line1[0][0] + 12, point[1] + size / 3],
    ],
  });

  return {
    left: point,
    right: [line2[0][0], point[1]]
  }
    right: [line2[0][0], point[1]],
  };
};

Diagram.prototype.onOffPlus = function(option) {
Diagram.prototype.onOffPlus = function (option) {
  let result;
  switch (option.direction) {
    case "h":
@@ -1220,7 +1222,7 @@
};

// 水平方向
Diagram.prototype.onOffPlus_v = function(option) {
Diagram.prototype.onOffPlus_v = function (option) {
  let point = option.point;
  let state = option.state ? true : false;
  let onOffBase = this.opts.onOffBase;
@@ -1230,35 +1232,37 @@
    point: [point[0] + onOffBase.radius / 2, point[1]],
    flush: option.flush,
    type: "fill",
    fillStyle: '#FFFFFF',
    strokeStyle: '#FFFFFF',
    fillStyle: "#FFFFFF",
    strokeStyle: "#FFFFFF",
    radius: onOffBase.radius1,
  });

  // 开关的第二个圆
  let arc2 = this.arc({
    point: [arc1.right[0] + onOffBase.width1 * 4 / 3/2, arc1.right[1]],
    point: [arc1.right[0] + (onOffBase.width1 * 4) / 3 / 2, arc1.right[1]],
    flush: option.flush,
    fillStyle: arc1.fillStyle,
    strokeStyle: arc1.fillStyle,
    radius: arc1.radius,
    type: 'fill'
    type: "fill",
  });
  let line1;
  switch (option.direction) {
    case 'right':
    case "right":
      // 绘制线条
      line1 = this.line({
        points: [
          arc2.left,
          [
            state ? arc1.top[0] : arc1.center[0],
            state ? arc1.top[1] : arc1.center[1] - (arc1.radius + onOffBase.width1 * 3 / 4/2)
            state
              ? arc1.top[1]
              : arc1.center[1] - (arc1.radius + (onOffBase.width1 * 3) / 4 / 2),
          ],
        ],
        flush: option.flush,
        strokeStyle: state ? '#b370fe' : '#50cef5',
        lineWidth: onOffBase.lineWidth
        strokeStyle: state ? "#b370fe" : "#50cef5",
        lineWidth: onOffBase.lineWidth,
      });
      break;
    default:
@@ -1268,24 +1272,26 @@
          arc1.right,
          [
            state ? arc2.top[0] : arc2.center[0],
            state ? arc2.top[1] : arc2.center[1] - (arc2.radius + onOffBase.width1 * 3 / 4/2)
            state
              ? arc2.top[1]
              : arc2.center[1] - (arc2.radius + (onOffBase.width1 * 3) / 4 / 2),
          ],
        ],
        flush: option.flush,
        strokeStyle: state ? '#FF0000' : '#FF0000',
        lineWidth: onOffBase.lineWidth
        strokeStyle: state ? "#FF0000" : "#FF0000",
        lineWidth: onOffBase.lineWidth,
      });
      break;
  }
  return {
    arc1: arc1,
    arc2: arc2,
    line1: line1
  }
}
    line1: line1,
  };
};

// 水平方向
Diagram.prototype.onOffPlus_h = function(option) {
Diagram.prototype.onOffPlus_h = function (option) {
  let point = option.point;
  let state = option.state ? true : false;
  let onOffBase = this.opts.onOffBase;
@@ -1295,35 +1301,37 @@
    point: [point[0], point[1]],
    flush: option.flush,
    type: "fill",
    fillStyle: '#FFFFFF',
    strokeStyle: '#FFFFFF',
    fillStyle: "#FFFFFF",
    strokeStyle: "#FFFFFF",
    radius: onOffBase.radius1,
  });

  // 开关的第二个圆
  let arc2 = this.arc({
    point: [arc1.bottom[0], arc1.bottom[1] + onOffBase.width1 * 4 / 3/2],
    point: [arc1.bottom[0], arc1.bottom[1] + (onOffBase.width1 * 4) / 3 / 2],
    flush: option.flush,
    fillStyle: arc1.fillStyle,
    strokeStyle: arc1.fillStyle,
    radius: arc1.radius,
    type: 'fill'
    type: "fill",
  });
  let line1;
  switch (option.direction) {
    case 'right':
    case "right":
      // 绘制线条
      line1 = this.line({
        points: [
          arc2.left,
          [
            state ? arc2.top[0] : arc2.center[0],
            state ? arc1.top[1] : arc1.center[1] - (arc1.radius + onOffBase.width1 * 3 / 4/2)
            state
              ? arc1.top[1]
              : arc1.center[1] - (arc1.radius + (onOffBase.width1 * 3) / 4 / 2),
          ],
        ],
        flush: option.flush,
        strokeStyle: state ? '#b370fe' : '#50cef5',
        lineWidth: onOffBase.lineWidth
        strokeStyle: state ? "#b370fe" : "#50cef5",
        lineWidth: onOffBase.lineWidth,
      });
      break;
    default:
@@ -1332,42 +1340,44 @@
        points: [
          arc2.top,
          [
            state ? arc1.left[0] : arc1.center[0] - (arc1.radius + onOffBase.width1 * 3 / 4/2) ,
            state ? arc1.left[1]: arc1.center[1]
            state
              ? arc1.left[0]
              : arc1.center[0] - (arc1.radius + (onOffBase.width1 * 3) / 4 / 2),
            state ? arc1.left[1] : arc1.center[1],
          ],
        ],
        flush: option.flush,
        strokeStyle: state ? '#FF0000' : '#FF0000',
        lineWidth: onOffBase.lineWidth
        strokeStyle: state ? "#FF0000" : "#FF0000",
        lineWidth: onOffBase.lineWidth,
      });
      break;
  }
  return {
    arc1: arc1,
    arc2: arc2,
    line1: line1
  }
}
    line1: line1,
  };
};

Diagram.prototype.roundRect = function(option) {
Diagram.prototype.roundRect = function (option) {
  let ctx = option.flush ? this.f_ctx : this.s_ctx;
  let point = option.point;
  let width = option.width ? option.width : 80;
  let height = option.height ? option.height : 80;
  let round = option.round?option.round:10;
  let round = option.round ? option.round : 10;
  let startPoint = point;
  switch(option.start) {
    case 'top':
      startPoint = [point[0]-width/2, point[1]];
  switch (option.start) {
    case "top":
      startPoint = [point[0] - width / 2, point[1]];
      break;
    case 'left':
      startPoint = [point[0], point[1]-height/2];
    case "left":
      startPoint = [point[0], point[1] - height / 2];
      break;
    case 'right':
      startPoint = [point[0]-width, point[1]-height/2];
    case "right":
      startPoint = [point[0] - width, point[1] - height / 2];
      break;
    case 'bottom':
      startPoint = [point[0]-width/2, point[1]-height];
    case "bottom":
      startPoint = [point[0] - width / 2, point[1] - height];
      break;
    default:
      startPoint = point;
@@ -1375,15 +1385,39 @@
  }

  // 这样就创建了一个有圆角的矩形（50，50，100，100，10）的正方形
  ctx.beginPath()
  ctx.moveTo(startPoint[0]+round, startPoint[1])
  ctx.arcTo(startPoint[0]+width, startPoint[1], startPoint[0]+width, startPoint[1]+height, round)
  ctx.arcTo(startPoint[0]+width, startPoint[1]+height, startPoint[0], startPoint[1]+height, round)
  ctx.arcTo(startPoint[0], startPoint[1]+height , startPoint[0], startPoint[1], round);
  ctx.arcTo( startPoint[0], startPoint[1], startPoint[0]+width, startPoint[1], round)
  ctx.fillStyle = option.fillStyle ? option.fillStyle : '#FFFFFF';
  ctx.beginPath();
  ctx.moveTo(startPoint[0] + round, startPoint[1]);
  ctx.arcTo(
    startPoint[0] + width,
    startPoint[1],
    startPoint[0] + width,
    startPoint[1] + height,
    round
  );
  ctx.arcTo(
    startPoint[0] + width,
    startPoint[1] + height,
    startPoint[0],
    startPoint[1] + height,
    round
  );
  ctx.arcTo(
    startPoint[0],
    startPoint[1] + height,
    startPoint[0],
    startPoint[1],
    round
  );
  ctx.arcTo(
    startPoint[0],
    startPoint[1],
    startPoint[0] + width,
    startPoint[1],
    round
  );
  ctx.fillStyle = option.fillStyle ? option.fillStyle : "#FFFFFF";
  ctx.lineWidth = option.lineWidth ? option.lineWidth : 1;
  ctx.strokeStyle = option.strokeStyle ? option.strokeStyle : '#FFFFFF';
  ctx.strokeStyle = option.strokeStyle ? option.strokeStyle : "#FFFFFF";
  ctx.stroke();
  ctx.fill();

@@ -1394,111 +1428,87 @@
    width: width,
    height: height,
    tl: [startPoint[0], startPoint[1]],
    top: [startPoint[0]+width/2, startPoint[1]],
    tr: [startPoint[0]+width, startPoint[1]],
    left: [startPoint[0], startPoint[1]+height/2],
    center: [startPoint[0]+width/2, startPoint[1]+height/2],
    right: [startPoint[0]+width, startPoint[1]+height/2],
    bl: [startPoint[0], startPoint[1]+height],
    bottom: [startPoint[0]+width/2, startPoint[1]+height],
    br: [startPoint[0]+width, startPoint[1]+height],
  }
}
    top: [startPoint[0] + width / 2, startPoint[1]],
    tr: [startPoint[0] + width, startPoint[1]],
    left: [startPoint[0], startPoint[1] + height / 2],
    center: [startPoint[0] + width / 2, startPoint[1] + height / 2],
    right: [startPoint[0] + width, startPoint[1] + height / 2],
    bl: [startPoint[0], startPoint[1] + height],
    bottom: [startPoint[0] + width / 2, startPoint[1] + height],
    br: [startPoint[0] + width, startPoint[1] + height],
  };
};

Diagram.prototype.arrow = function(option) {
Diagram.prototype.arrow = function (option) {
  let ctx = option.flush ? this.f_ctx : this.s_ctx;
  let point = option.point;
  let opts = this.opts;
  let lineWidth = option.lineWidth ? option.lineWidth : opts.lineWidth;
  let strokeStyle = option.strokeStyle ? option.strokeStyle : "#b370fe";
  let width = option.width?option.width:10;
  let width = option.width ? option.width : 10;
  switch (option.direction) {
    case 'left':
    case "left":
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          point,
          [point[0]+width, point[1]+width]
        ]
        points: [point, [point[0] + width, point[1] + width]],
      });
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          point,
          [point[0]+width, point[1]-width]
        ]
        points: [point, [point[0] + width, point[1] - width]],
      });
      break;
    case 'right':
    case "right":
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          point,
          [point[0]-width, point[1]+width]
        ]
        points: [point, [point[0] - width, point[1] + width]],
      });
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          point,
          [point[0]-width, point[1]-width]
        ]
        points: [point, [point[0] - width, point[1] - width]],
      });
      break;
    case 'up':
    case "up":
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          [point[0]-width, point[1]+width],
          point,
        ]
        points: [[point[0] - width, point[1] + width], point],
      });
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          [point[0]+width, point[1]+width],
          point,
        ]
        points: [[point[0] + width, point[1] + width], point],
      });
      break;
    default:
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          [point[0]-width, point[1]-width],
          point,
        ]
        points: [[point[0] - width, point[1] - width], point],
      });
      this.line({
        lineWidth,
        strokeStyle,
        points: [
          [point[0]+width, point[1]-width],
          point,
        ]
        points: [[point[0] + width, point[1] - width], point],
      });
      break;
  }
}
};

// 根据id正则删除内容
Diagram.prototype.del = function (pattern) {
  // 清空options配置项
  this.options = this.options.filter(item => {
  this.options = this.options.filter((item) => {
    if (!pattern.test(item.id)) {
      return item;
    }
  });

  // 清空刷新对象
  this.flushOptions = this.flushOptions.filter(item => {
  this.flushOptions = this.flushOptions.filter((item) => {
    if (!pattern.test(item.id)) {
      return item;
    }
@@ -1534,7 +1544,7 @@
  let scale = this.getScale();
  return {
    x: eleCenter.x + (point[0] - center.x) * scale,
    y: eleCenter.y + (point[1] - center.y) * scale
    y: eleCenter.y + (point[1] - center.y) * scale,
  };
};

@@ -1542,7 +1552,7 @@
  let scale = this.getScale();
  return {
    width: width * scale,
    height: height * scale
    height: height * scale,
  };
};


 src/views/dataTest/realTime.vue

@@ -2370,8 +2370,8 @@
      this.diagram.devType = getDevType(data.chargeType, data.buscoupleState);
      this.esVideoSn = data.videoUrl;
      this.table.headers = getTblHeader(data.fbsdeviceId);
      // 如果是61850 则查询最后一次放电数据
      if (regEquipType(data.fbsdeviceId, ["equip61850"])) {
      // 如果是61850, BTS9110 则查询最后一次放电数据
      if (regEquipType(data.fbsdeviceId, ["equip61850", "BTS9110"])) {
        this.getLastCapacityTest(data);
      }
      this.$nextTick(() => {
@@ -2740,7 +2740,7 @@
    /* 查询电路图开关状态和信息 */
    realTimePowerOffs(res) {
      let batt = this.batt;
      // 设备为61850显示右侧的面板
      // 设备为61850，BTS9110显示右侧的面板
      if (regEquipType(batt.fbsdeviceId, ["equip61850", "BTS9110"])) {
        this.stateListShow = true;
      } else {