假负载母联开关状态修改

longyvfengyun

2022-08-12 10e01aea5d75afc49b87b3b08ab7f811d6da3c3e

假负载母联开关状态修改

 src/assets/js/tools/getDevType.js

@@ -5,7 +5,7 @@
        type = 0;
    }

    // 限流充电无母联
    // 限流充电有母联
    if(chargeType == 1 && isBusCouple ==1) {
        type = 1;
    }
@@ -15,11 +15,11 @@
        type = 2;
    }

    // 逆变充电无母联
    // 逆变充电有母联
    if(chargeType == 2 && isBusCouple ==1) {
        type = 3;
    }

    return type;
}
export default getDevType;
export default getDevType;

 src/views/dataMager/components/AddBattGroup.vue

@@ -138,7 +138,7 @@
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="layout.span" v-if="isInversion">
        <el-col :span="layout.span" v-if="isHasBuscouple">
          <el-form-item label="母联状态">
            <el-select
              v-model="params.buscoupleState"
@@ -1376,6 +1376,10 @@
      let dev_id = this.params.fbsdeviceId;
      return regEquipType(dev_id, "BTS9120");
    },
    isHasBuscouple() {
      let dev_id = this.params.fbsdeviceId;
      return regEquipType(dev_id,["BTS9120", "BTS9110"]);
    },
    isLithium() {
      // 锂电BTS
      let dev_id = this.params.fbsdeviceId;

 src/views/dataTest/components/CircuitDiagram.vue

@@ -20,6 +20,8 @@
    :dev-temp="devTemp"
    :type="type"
    :update="update"
    :dev-type="devType"
    :buscouple-switch="buscoupleSwitch"
  ></load-reverse-circuit-diagram>
  <!-- 交流电网电路图   -->
  <grid-circuit-diagram

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

New file
@@ -0,0 +1,128 @@
<template>
  <div class="diagram-content">
    <div class="diagram-stc" ref="static"></div>
    <div class="diagram-flush" ref="flush"></div>
  </div>
</template>

<script>
// 假负载电路图和电流
import loadCircuitDiagram from "./js/loadCircuitDiagram";
import diagramStates from "./js/diagramStatus";

let diagram;
export default {
  props: {
    onlineVol: {
      // 在线电压
      type: [String, Number],
      default: 0,
    },
    groupVol: {
      // 组端电压
      type: [String, Number],
      default: 0,
    },
    battCurr: {
      // 电池电流
      type: [String, Number],
      default: 0,
    },
    devTemp: {
      // 设备温度
      type: [String, Number],
      default: 0,
    },
    type: {
      type: Number,
      default: -1,
    },
    update: {
      type: Boolean,
      default: true,
    },
    buscoupleSwitch: {
      type: Number,
      default: 0
    }
  },
  watch: {
    onlineVol(val) {
      diagram.setOption("onlineVol", "text", val + "V");
    },
    groupVol(val) {
      diagram.setOption("groupVol", "text", val + "V");
    },
    battCurr(val) {
      diagram.setOption("battCurr", "text", val + "A");
    },
    devTemp(val) {
      diagram.setOption("devTemp", "text", "设备温度：" + val + "℃");
    },
    type(val) {
      this.setDiagramByType();
    },
    update(val) {
      if (val) {
        diagram.start(true);
      } else {
        diagram.stop();
      }
    },
    buscoupleSwitch(val) {
      diagram.setOption('km5', 'state', val?true:false);
      diagram.setOption('km4', 'state', val?true:false);
    }
  },
  methods: {
    init() {
      // 设置在线，组端，电流，和温度
      diagram.setOption("onlineVol", "text", this.onlineVol + "V");
      diagram.setOption("groupVol", "text", this.groupVol + "V");
      diagram.setOption("battCurr", "text", this.battCurr + "A");
      diagram.setOption("devTemp", "text", "设备温度：" + this.devTemp + "℃");
      diagram.setOption('km5', 'state', this.buscoupleSwitch?true:false);
      diagram.setOption('km4', 'state', this.buscoupleSwitch?true:false);

      // 设置更新状态
      if (!this.update) {
        diagram.stop();
      }
    },
    setDiagramByType() {
      let type = this.type;
      switch (type) {
        case -1:
          diagramStates(diagram, "break");
          break;
        case 0:
          diagramStates(diagram, "float");
          break;
        case 1:
          diagramStates(diagram, "discharge");
          break;
        case 2:
          diagramStates(diagram, "charge");
          break;
        case 5:
          diagramStates(diagram, "powerCutDischarge");
          break;
        default:
          diagramStates(diagram, "");
          break;
      }
    },
  },
  mounted() {
    diagram = loadCircuitDiagram(this.$refs.static, this.$refs.flush);
    // 初始化数据
    this.init();
    // 设置充放电的类型
    this.setDiagramByType();
  },
  destroyed() {
    // 关闭更新
    diagram.stop();
  },
};
</script>

 src/views/dataTest/components/diagrams/loadReverse/buscouple/js/diagramStatus.js

 src/views/dataTest/components/diagrams/loadReverse/buscouple/js/loadCircuitDiagram.js

New file
@@ -0,0 +1,1054 @@
import Diagram from '@/views/dataTest/diagram';
import eleGroupImage from '@/views/dataTest/diagram/images/elegroup-reverse.png';
import loaderImage from '@/views/dataTest/diagram/images/load.png';
import screenImage from '@/views/dataTest/diagram/images/screen.png';
import lightSuccessImage from '@/views/dataTest/diagram/images/light-success.png';
import chargeSuccessImage from '@/views/dataTest/diagram/images/charge-success.png';
const textFont = 20;

function loadCircuitDiagram(stc, flush) {
    let diagram = new Diagram();
    diagram.setCanvas(stc, flush);
    let start = [0, 40]

    // 虚线1
    let dashPoints1 = diagram.dashLine({
        strokeStyle: '#50cef5',
        points: [
            start,
            [620, start[1]],
        ]
    });
    // 虚线2
    let dashPoints2 = diagram.dashLine({
        strokeStyle: '#50cef5',
        points: [
            dashPoints1[1],
            [dashPoints1[1][0], diagram.height-start[1]],
        ]
    });
    // 虚线3
    let dashPoints3 = diagram.dashLine({
        strokeStyle: '#50cef5',
        points: [
            dashPoints2[1],
            [start[0], dashPoints2[1][1]],
        ]
    });

    // 虚线4
    let dashPoints4 = diagram.dashLine({
        strokeStyle: '#50cef5',
        points: [
            dashPoints3[1],
            start,
        ],
    });

    // 充放电单元配置项
    let options = {
        top: start,
        bottom: dashPoints3[0],
        start: [start[0]+15, diagram.height/3]
    };

    // 绘制充放电单元
    let chargeAndDischarge = drawChargeAndDischarge(diagram, options);

    // 绘制蓄电池组单元
    let battGroup = drawBattGroup(diagram, chargeAndDischarge);

    // 绘制负载模块
    let loaderModuleInfo = loaderMoudle(diagram, battGroup);

    // 母联开关
    buscoupleMoudle(diagram, loaderModuleInfo);

    // 设置页面中的文本
    setDiagramTexts(diagram);
    return diagram;
}

// 充放电单元
function drawChargeAndDischarge(diagram, options) {
    let start = options.start;
    // 对角边界
    let top = options.top;
    let bottom = options.bottom;
    // 基础配置(反转)
    let springGreen = "#b370fe";
    let red = '#50cef5';
    let lineWidth = 3;

    // 线条1
    let line1 = diagram.line({
        id: 'line1-3',
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        hide: true,
        points: [
            start,
            [start[0]+40, start[1]]
        ]
    });

    // 充放电单元
    let chargeAndDischarge = diagram.chargeAndDischarge({
        hide: true,
        point: line1[1]
    });

    // 放电单元状态
    let dischargeState = diagram.drawImage({
        id: 'dischargeState',
        flush: true,
        hide: true,
        url: lightSuccessImage,
        point: [chargeAndDischarge[0][0] - 50, chargeAndDischarge[0][1]+50],
        // width: 24,
        // height: 24*469/471
        width: 22,
        height: 46
    });

    // 放电单元文本
    let disCharge_text = diagram.text({
        text: '放电单元',
        baseline: 'middle',
        fontSize: 16,
        hide: true,
        point: [dischargeState.right[0]+4, dischargeState.right[1]]
    });

    // 充电单元状态
    let chargeState = diagram.drawImage({
        id: 'chargeState',
        flush: true,
        hide: true,
        url: chargeSuccessImage,
        point: [chargeAndDischarge[1][0] - 50, chargeAndDischarge[1][1]+50],
        width: dischargeState.width,
        height: dischargeState.height
    });

    // 充电单元文本
    let charge_text = diagram.text({
        text: '限流单元',
        baseline: 'middle',
        fontSize: 16,
        hide: true,
        point: [chargeState.right[0]+4, chargeState.right[1]]
    });

    // 线条2
    let line2 = diagram.line({
        id: 'line1',
        strokeStyle: red,
        lineWidth: lineWidth,
        hide: true,
        points: [
            chargeAndDischarge[0],
            [chargeAndDischarge[0][0], top[1]+30]
        ]
    });

    // 线的高度
    let lineHt = line2[0][1] - line2[1][1];

    // 线条3
    let line3 = diagram.line({
        id: 'line2',
        strokeStyle: red,
        lineWidth: lineWidth,
        hide: true,
        points: [
            line2[1],
            [chargeAndDischarge[1][0], line2[1][1]]
        ]
    });

    // 线条4
    let line4 = diagram.line({
        id: 'line3',
        strokeStyle: red,
        lineWidth: lineWidth,
        hide: true,
        points: [
            line3[1],
            [chargeAndDischarge[1][0], chargeAndDischarge[1][1]]
        ]
    });

    // 线条5
    let line5 = diagram.line({
        id: 'line4',
        strokeStyle: red,
        lineWidth: lineWidth,
        hide: true,
        points: [
            chargeAndDischarge[2],
            [chargeAndDischarge[2][0], chargeAndDischarge[2][1]+lineHt]
        ]
    });

    // 线条6
    let line6 = diagram.line({
        id: 'line5',
        strokeStyle: red,
        lineWidth: lineWidth,
        hide: true,
        points: [
            line5[1],
            [chargeAndDischarge[3][0], line5[1][1]]
        ]
    });

    // 线条7
    let line7 = diagram.line({
        id: 'line6',
        strokeStyle: red,
        lineWidth: lineWidth,
        hide: true,
        points: [
            line6[1],
            [chargeAndDischarge[3][0], chargeAndDischarge[3][1]]
        ]
    });

    // 线条8
    let line8 = diagram.line({
        id: 'line7',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            line6[0],
            [line6[0][0]+120, line6[0][1]]
        ]
    });

    // 线条9
    let line9 = diagram.line({
        id: "line1-1",
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        hide: true,
        points: [
            [line8[1][0], bottom[1]-80],
            [line1[0][0], bottom[1]-80]
        ]
    });

    // 线条10
    let line10 = diagram.line({
        id: "line1-2",
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        hide: true,
        points: [
            line9[1],
            line1[0]
        ]
    });

    let onOff1 = diagram.onOff({
        id: 'km2',
        point: line8[1],
        direction: 'right',
        state: false,
        flush: true,
    });;

    // 设置km2的文本
    let middle = (onOff1.arc2.bottom[0] - onOff1.arc1.bottom[0])/2;
    let onOff1_text1 = diagram.text({
        text: 'k2',
        align: 'center',
        fontSize: 16,
        point: [onOff1.arc1.bottom[0]+middle, onOff1.arc1.bottom[1]+8]
    });

    let onOff2 = diagram.onOff({
        id: 'km3',
        point: line9[0],
        direction: 'right',
        state: false,
        flush: true
    });

    let onOff2_text1 = diagram.text({
        text: 'k3',
        align: 'center',
        fontSize: 16,
        point: [onOff2.arc1.bottom[0]+middle, onOff2.arc1.bottom[1]+8]
    });

    // 充电电源模块
    let chargeRect = diagram.drawRect({
        point: [start[0], start[1]-60],
    });

    // 充电单元状态
    let chargeStateRect = diagram.drawImage({
        id: 'chargeStateRect',
        flush: true,
        url: chargeSuccessImage,
        point: [chargeRect.top[0] - 50, chargeRect.top[1]+40],
        width: dischargeState.width,
        height: dischargeState.height
    });

    // 充电单元文本
    let chargeRectText = diagram.text({
        text: '限流单元',
        baseline: 'middle',
        fontSize: 16,
        point: [chargeStateRect.right[0]+4, chargeStateRect.right[1]]
    });

    let line12 = diagram.line({
        id: "line12-1",
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            chargeRect.top,
            [chargeRect.top[0], line3[0][1]]
        ]
    });

    let line13 = diagram.line({
        id: "line13-1",
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            chargeRect.bottom,
            [chargeRect.bottom[0], line6[0][1]]
        ]
    });

    let line15 = diagram.line({
        id: "line15-1",
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            line13[1],
            [line6[0][0], line13[1][1]]
        ]
    });

    let line14 = diagram.line({
        id: "line14-1",
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            line12[1],
            [line3[1][0], line12[1][1]]
        ]
    });

    // 充电电源模块
    let loaderRect = diagram.drawRect({
        point: [line13[1][0]-60, line13[1][1]+40],
    });

    // 充电单元状态
    let loaderStateRect = diagram.drawImage({
        id: 'loaderStateRect',
        flush: true,
        url: lightSuccessImage,
        point: [loaderRect.top[0] - 50, loaderRect.top[1]+40],
        width: dischargeState.width,
        height: dischargeState.height
    });

    // 充电单元文本
    let loaderRectText = diagram.text({
        text: '假负载模块',
        baseline: 'middle',
        fontSize: 16,
        point: [loaderStateRect.right[0]+4, loaderStateRect.right[1]]
    });

    let line16 = diagram.line({
        id: "line16-1",
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            line13[1],
            loaderRect.top
        ]
    });
    let line17 = diagram.line({
        id: "line17-1",
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        points: [
            loaderRect.bottom,
            [loaderRect.bottom[0], line9[0][1]]
        ]
    });

    let line18 = diagram.line({
        id: "line18-1",
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        points: [
            line9[0],
            [loaderRect.bottom[0], line9[0][1]]
        ]
    });

    return {
        top: top,
        bottom: bottom,
        springGreen: springGreen,
        red: red,
        line3: line3,
        onOff1: onOff1,
        onOff2: onOff2,
    }
}

// 蓄电池组单元
function drawBattGroup(diagram, options) {
    let start = options.line3[1];
    // 对角边界
    let top = options.top;
    let bottom = options.bottom;
    // 基础配置
    let springGreen = options.springGreen;
    let red = options.red;
    let lineWidth = 3;

    // BAT1
    let bat1 = diagram.bat({
        strokeStyle: red,
        point: [bottom[0], start[1]]
    });

    // 线条1
    let line1 = diagram.line({
        id: 'line8',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            start,
            bat1.left,
        ]
    });

    // BAT2
    let bat2 = diagram.bat({
        strokeStyle: red,
        point: [bottom[0], options.onOff1.arc2.right[1]]
    });

    // 线条2
    let line2 = diagram.line({
        id: 'line9',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            options.onOff1.arc2.right,
            bat2.left,
        ]
    });

    // BAT3
    let bat3 = diagram.bat({
        fillStyle: '#000000',
        strokeStyle: springGreen,
        point: [bottom[0], options.onOff2.arc2.right[1]]
    });

    // 线条3
    let line3 = diagram.line({
        id: 'line19-1',
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        points: [
            options.onOff2.arc2.right,
            bat3.left,
        ]
    });

    // 线条4
    let line4 = diagram.line({
        id: 'line10',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            bat2.right,
            [bat2.right[0]+60, bat2.right[1]],
        ]
    });

    // 线条5
    let line5 = diagram.line({
        id: 'line11',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            line4[1],
            [line4[1][0], line4[1][1]+30],
        ]
    });

    // 绘制电池组1
    // let width1 = 70;
    let width1 = 37;
    let height1 = 61;
    let eleGroup1 = diagram.drawImage({
        id: 'eleGroup1',
        point: [line5[1][0]-width1/2, line5[1][1]],
        url: eleGroupImage,
        width: width1,
        // height: width1*25/61,
        height: height1,
    });
    // 绘制虚线
    let dashLine1 = diagram.dashLine({
        strokeStyle: springGreen,
        lineWidth: 4,
        points: [
            eleGroup1.bottom,
            [eleGroup1.bottom[0], eleGroup1.bottom[1]+20]
        ],
    });
    // 电池组2
    let eleGroup2 = diagram.drawImage({
        id: 'eleGroup2',
        point: [dashLine1[1][0]-width1/2, dashLine1[1][1]],
        url: eleGroupImage,
        width: eleGroup1.width,
        height: eleGroup1.height,
    });

    // 绘制电池组的文本
    let group_text1 = diagram.text({
        text: '电&池&组',
        point: [eleGroup1.right[0]+6, eleGroup1.right[1]+4],
        fontSize: 16,
    });

    // 线条6
    let line6 = diagram.line({
        id: 'line12',
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        points: [
            eleGroup2.bottom,
            [eleGroup2.bottom[0], bat3.right[1]],
        ]
    });
    // 线条7
    let line7 = diagram.line({
        id: 'line20-1',
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        points: [
            bat3.right,
            line6[1],
        ]
    });

    // 线条8
    let left1 = 80;
    let line8 = diagram.line({
        id: 'line13',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            [line2[0][0]+left1, line1[0][1]],
            [line2[0][0]+left1, line1[0][1]+160],
        ]
    });

    // km1
    let onOff3 = diagram.onOff({
        id: 'km1',
        point: line8[1],
        direction: 'bottom',
        state: false,
        flush: true
    });

    // km1文本
    let onOFF3_text = diagram.text({
        text: 'k1',
        align: 'end',
        fontSize: 16,
        point: [onOff3.arc1.left[0]-8,onOff3.arc1.left[1]+10]
    });

    // lin9
    let line9 = diagram.line({
        id: 'line14',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            onOff3.arc2.bottom,
            [onOff3.arc2.bottom[0], line2[0][1]]
        ]
    });

    // line131
    let line131y = line8[0][1]+(line8[1][1]-line8[0][1])/2;
    let diodeOffsetX = 100;
    let line131 = diagram.line({
        id: 'line131',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            [line8[0][0], line131y],
            [line8[0][0]+diodeOffsetX, line131y],
        ]
    });

    // line132
    let line132 = diagram.line({
        id: 'line132',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            line131[1],
            [line131[1][0], line131[1][1]+70]
        ]
    });

    // 绘制二极管
    let diode = diagram.diode({
        direction: 'down',
        point: line132[1],
    });

    // line141
    let line141y = line9[0][1]+(line9[1][1]-line9[0][1])/2;
    let line141 = diagram.line({
        id: 'line141',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            [line9[0][0], line141y],
            [line9[0][0]+diodeOffsetX, line141y],
        ]
    });

    // line142
    let line142 = diagram.line({
        id: 'line142',
        strokeStyle: red,
        lineWidth: lineWidth,
        points:[
            diode.bottom,
            line141[1]
        ]
    });
    return {
        bat1: bat1,
        line6: line6,
        springGreen: springGreen,
        red: red,
        lineWidth: lineWidth
    };
}

// 负载单元
function loaderMoudle(diagram, options) {
    // 基础配置
    let right = 400;
    let start = options.bat1.right;
    let springGreen = options.springGreen;
    let lineWidth = options.lineWidth;
    let red = options.red;
    let end = options.line6[1];
    let middle = (diagram.width-right-start[0])/2;

    // 绘制线1
    let line1 = diagram.line({
        id: 'line15',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            start,
            [start[0]+middle, start[1]]
        ]
    });

    // 绘制线2
    let line2 = diagram.line({
        id: 'line16',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            line1[1],
            [diagram.width-right, line1[1][1]]
        ]
    });
    let lineHeight = 220;

    // 绘制线3
    let line3 = diagram.line({
        id: 'line17',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            line2[1],
            [line2[1][0], line2[1][1]+lineHeight],
        ]
    });

    // 绘制负载
    let loaderWidth = 86;
    let loader = diagram.drawImage({
        url: loaderImage,
        point: [line3[1][0]-loaderWidth/2, line3[1][1]-3],
        width: loaderWidth,
        height: loaderWidth*248/136
    });

    // 负载文本
    let loader_text1 = diagram.text({
        text: "用&电&负&载",
        fontSize: 16,
        point: [loader.right[0]+4, loader.right[1]-30],
    });

    // 绘制线4
    let line4 = diagram.line({
        id: 'line18',
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        points: [
            loader.bottom,
            [loader.bottom[0], end[1]],
        ]
    });

    // 绘制线5
    let line5 = diagram.line({
        id: 'line19',
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        points: [
            line4[1],
            [line1[1][0], line4[1][1]],
        ]
    });

    // 绘制线6
    let line6 = diagram.line({
        id: 'line20',
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        points: [
            line5[1],
            end,
        ]
    });

    // 绘制线7
    let line7 = diagram.line({
        id: 'line21',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
            line1[1],
            [line1[1][0], line1[1][1]+lineHeight],,
        ]
    });

    // 绘制整流器
    let screen = diagram.drawImage({
        url: screenImage,
        point: [line7[1][0]-loaderWidth/2, line7[1][1]-3],
        width: loaderWidth,
        height: loaderWidth*248/151
    });

    // 整流器文本
    let screen_text1 = diagram.text({
        text: "整&流&器",
        fontSize: 16,
        point: [screen.right[0]+4, screen.right[1]-20],
    });

    // 绘制线8
    let line8 = diagram.line({
        id: 'line22',
        strokeStyle: springGreen,
        lineWidth: lineWidth,
        points: [
            screen.bottom,
            line5[1],
        ]
    });

  return {
    end: line2[1],
    line16: line2[1],
    line19: line5[0],
    line17: line3[1],
    red: red,
    springGreen: springGreen,
    lineWidth: lineWidth,
  }
}

function setDiagramTexts(diagram) {
    // 设备温度
    let line3 = diagram.getOption('line3').points;
    let line13 = diagram.getOption('line13').points;
    let offset1 = (line13[0][0] - line3[0][0])/2;
    diagram.text({
        id: 'devTemp',
        flush: true,
        baseline: 'top',
        align: 'center',
        fontSize: textFont,
        point: [line3[0][0]+offset1, line3[0][1]+16],
        text: '设备温度：0℃'
    });

    // 电流
    // let line15 = diagram.getOption('line15').points;
    // let offset2 = (line15[1][0] - line15[0][0])/2;
    // diagram.text({
    //     id: 'battCurr',
    //     flush: true,
    //     baseline: 'top',
    //     align: 'center',
    //     fontSize: textFont,
    //     point: [line15[0][0]+offset2, line15[0][1]+16],
    //     text: '0.00A'
    // });

    // 在线电压
    let line16 = diagram.getOption('line16').points;
    let offset3 = (line16[1][0] - line16[0][0])/2;
    diagram.text({
        id: 'onlineVol',
        flush: true,
        baseline: 'top',
        align: 'center',
        fontSize: textFont,
        point: [line16[0][0]+offset3, line16[0][1]+32],
        text: '0.00V'
    });

    // 组端电压
    let line11 = diagram.getOption('line11').points;
    diagram.text({
        id: 'groupVol',
        flush: true,
        baseline: 'bottom',
        align: 'left',
        fontSize: textFont,
        point: [line11[1][0]+8,line11[1][1]-32],
        text: '0.00V'
    });

    // 电流
    diagram.text({
        id: 'battCurr',
        flush: true,
        baseline: 'bottom',
        align: 'left',
        fontSize: textFont,
        point: [line11[1][0]+8,line11[1][1]-4],
        text: '0.00A'
    });

    // 设置电路图类型
    diagram.text({
        id: 'type',
        flush: true,
        fontSize: textFont,
        align: 'center',
        point: [diagram.width/2, 10],
        text: '设备未连接',
    });
}

function buscoupleMoudle(diagram, options) {
  let start = options.line16;
  let end = options.line19;
  let red = options.red;
  let springGreen = options.springGreen;
  let lineWidth = options.lineWidth;
  let margin = 120;
  let hPoint = options.line17;
  let line1 = diagram.line({
    id: 'bLine1',
    strokeStyle: red,
    lineWidth: lineWidth,
    points: [
      start,
      [start[0] + margin - 40, start[1]]
    ]
  });
  let onOff4 = diagram.onOff({
    id: 'km4',
    point: line1[1],
    direction: 'right',
    state: false,
    flush: true
  });
  let middle = (onOff4.arc2.bottom[0] - onOff4.arc1.bottom[0]) / 2;

  let line2 = diagram.line({
    id: 'bLine2',
    strokeStyle: red,
    lineWidth: lineWidth,
    points: [
      onOff4.arc2.right,
      [onOff4.arc2.right[0] + margin - 70, onOff4.arc2.right[1]]
    ]
  });

  let line3 = diagram.line({
    id: 'bLine3',
    strokeStyle: red,
    lineWidth: lineWidth,
    points: [
      line2[1],
      [line2[1][0] + margin + 40, line2[1][1]]
    ]
  });

  let line4 = diagram.line({
    id: 'bLine4',
    strokeStyle: red,
    lineWidth: lineWidth,
    points: [
      line3[1],
      [line3[1][0], hPoint[1]],
    ]
  });

  // 绘制负载
  let loaderWidth = 86;
  let loader = diagram.drawImage({
    url: loaderImage,
    point: [line4[1][0] - loaderWidth / 2, line4[1][1] - 3],
    width: loaderWidth,
    height: loaderWidth * 248 / 136
  });

  // 负载文本
  let loader_text1 = diagram.text({
    text: "用&电&负&载",
    fontSize: 16,
    point: [loader.right[0] + 4, loader.right[1] - 30],
  });

  let line5 = diagram.line({
    id: 'bLine5',
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    points: [
      loader.bottom,
      [loader.bottom[0], end[1]],
    ]
  });

  let line6 = diagram.line({
    id: 'bLine6',
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    points: [
      line5[1],
      [line3[0][0], line5[1][1]],
    ]
  });

  let line7 = diagram.line({
    id: 'bLine7',
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    points: [
      line6[1],
      [line2[0][0], line6[1][1]],
    ]
  });

  let line8 = diagram.line({
    id: 'bLine8',
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    points: [
      end,
      [line1[1][0], end[1]]
    ]
  });


  let onOff5 = diagram.onOff({
    id: 'km5',
    point: line8[1],
    direction: 'right',
    state: false,
    flush: true
  });

  let line9 = diagram.dashLine({
    id: 'bLine9',
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    points: [
      [onOff5.arc1.left[0] + middle, onOff5.arc1.left[1]],
      [onOff5.arc1.left[0] + middle, loader.bottom[1] - 30]
    ]
  });

  diagram.text({
    text: '母&联&开&关',
    align: 'center',
    fontSize: 16,
    point: [line9[1][0], line9[1][1] - 82]
  });

  diagram.dashLine({
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    points: [
      [line9[1][0], line9[1][1] - 90],
      [onOff4.arc1.left[0] + middle, onOff4.arc1.left[1]],
    ]
  });

  let line10 = diagram.line({
    id: 'bLine10',
    strokeStyle: red,
    lineWidth: lineWidth,
    points: [
      line2[1],
      [line2[1][0], line4[1][1]],
    ]
  });

  // 绘制整流器
  let screen = diagram.drawImage({
    url: screenImage,
    point: [line10[1][0] - loaderWidth / 2, line10[1][1] - 3],
    width: loaderWidth,
    height: loaderWidth * 248 / 151
  });

  // 整流器文本
  let screen_text1 = diagram.text({
    text: "整&流&器",
    fontSize: 16,
    point: [screen.right[0] + 4, screen.right[1] - 20],
  });

  let line11 = diagram.line({
    id: 'bLine11',
    strokeStyle: springGreen,
    lineWidth: lineWidth,
    points: [
      screen.bottom,
      line6[1],
    ]
  });
}
export default loadCircuitDiagram;

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

@@ -1,17 +1,31 @@
<template>
  <div class="diagram-content">
    <div class="diagram-stc" ref="static"></div>
    <div class="diagram-flush" ref="flush"></div>
  </div>
  <buscouple
    v-if="isHasBuscouple"
    :online-vol="onlineVol"
    :group-vol="groupVol"
    :batt-curr="battCurr"
    :dev-temp="devTemp"
    :type="type"
    :update="update"
    :buscouple-switch="buscoupleSwitch"></buscouple>
  <no-buscouple
    v-else
    :online-vol="onlineVol"
    :group-vol="groupVol"
    :batt-curr="battCurr"
    :dev-temp="devTemp"
    :type="type"
    :update="update"></no-buscouple>
</template>

<script>
// 假负载电路图和电流
import loadCircuitDiagram from "./js/loadCircuitDiagram";
import diagramStates from "./js/diagramStatus";

let diagram;
import buscouple from "./buscouple";
import noBuscouple from "./noBuscouple";
export default {
  components: {
    noBuscouple,
    buscouple
  },
  props: {
    onlineVol: {
      // 在线电压
@@ -41,78 +55,33 @@
      type: Boolean,
      default: true,
    },
  },
  watch: {
    onlineVol(val) {
      diagram.setOption("onlineVol", "text", val + "V");
    /**
     * 0:不带母联（一拖一），限流充电单元充电框图
     * 1:带母联（即1拖2），限流充电单元充电框图
     * 2:不带母联（一拖一），逆变充电框图
     * 3: 带母联（即1拖2），逆变充电框图
     */
    devType: {
      type: Number,
      default: 0,
    },
    groupVol(val) {
      diagram.setOption("groupVol", "text", val + "V");
    },
    battCurr(val) {
      diagram.setOption("battCurr", "text", val + "A");
    },
    devTemp(val) {
      diagram.setOption("devTemp", "text", "设备温度：" + val + "℃");
    },
    type(val) {
      this.setDiagramByType();
    },
    update(val) {
      if (val) {
        diagram.start(true);
      } else {
        diagram.stop();
      }
    buscoupleSwitch: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    init() {
      // 设置在线，组端，电流，和温度
      diagram.setOption("onlineVol", "text", this.onlineVol + "V");
      diagram.setOption("groupVol", "text", this.groupVol + "V");
      diagram.setOption("battCurr", "text", this.battCurr + "A");
      diagram.setOption("devTemp", "text", "设备温度：" + this.devTemp + "℃");

      // 设置更新状态
      if (!this.update) {
        diagram.stop();
      }
    },
    setDiagramByType() {
      let type = this.type;
      switch (type) {
        case -1:
          diagramStates(diagram, "break");
          break;
        case 0:
          diagramStates(diagram, "float");
          break;
        case 1:
          diagramStates(diagram, "discharge");
          break;
        case 2:
          diagramStates(diagram, "charge");
          break;
        case 5:
          diagramStates(diagram, "powerCutDischarge");
          break;
        default:
          diagramStates(diagram, "");
          break;
      }
    },
  data() {
    return {};
  },
  mounted() {
    diagram = loadCircuitDiagram(this.$refs.static, this.$refs.flush);
    // 初始化数据
    this.init();
    // 设置充放电的类型
    this.setDiagramByType();
  methods: {},
  computed: {
    isHasBuscouple() {
      return this.devType == 1 || this.devType == 3?true:false;
    }
  },
  mounted() {},
  destroyed() {
    // 关闭更新
    diagram.stop();

  },
};
</script>
</script>

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

New file
@@ -0,0 +1,118 @@
<template>
  <div class="diagram-content">
    <div class="diagram-stc" ref="static"></div>
    <div class="diagram-flush" ref="flush"></div>
  </div>
</template>

<script>
// 假负载电路图和电流
import loadCircuitDiagram from "./js/loadCircuitDiagram";
import diagramStates from "./js/diagramStatus";

let diagram;
export default {
  props: {
    onlineVol: {
      // 在线电压
      type: [String, Number],
      default: 0,
    },
    groupVol: {
      // 组端电压
      type: [String, Number],
      default: 0,
    },
    battCurr: {
      // 电池电流
      type: [String, Number],
      default: 0,
    },
    devTemp: {
      // 设备温度
      type: [String, Number],
      default: 0,
    },
    type: {
      type: Number,
      default: -1,
    },
    update: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    onlineVol(val) {
      diagram.setOption("onlineVol", "text", val + "V");
    },
    groupVol(val) {
      diagram.setOption("groupVol", "text", val + "V");
    },
    battCurr(val) {
      diagram.setOption("battCurr", "text", val + "A");
    },
    devTemp(val) {
      diagram.setOption("devTemp", "text", "设备温度：" + val + "℃");
    },
    type(val) {
      this.setDiagramByType();
    },
    update(val) {
      if (val) {
        diagram.start(true);
      } else {
        diagram.stop();
      }
    },
  },
  methods: {
    init() {
      // 设置在线，组端，电流，和温度
      diagram.setOption("onlineVol", "text", this.onlineVol + "V");
      diagram.setOption("groupVol", "text", this.groupVol + "V");
      diagram.setOption("battCurr", "text", this.battCurr + "A");
      diagram.setOption("devTemp", "text", "设备温度：" + this.devTemp + "℃");

      // 设置更新状态
      if (!this.update) {
        diagram.stop();
      }
    },
    setDiagramByType() {
      let type = this.type;
      switch (type) {
        case -1:
          diagramStates(diagram, "break");
          break;
        case 0:
          diagramStates(diagram, "float");
          break;
        case 1:
          diagramStates(diagram, "discharge");
          break;
        case 2:
          diagramStates(diagram, "charge");
          break;
        case 5:
          diagramStates(diagram, "powerCutDischarge");
          break;
        default:
          diagramStates(diagram, "");
          break;
      }
    },
  },
  mounted() {
    diagram = loadCircuitDiagram(this.$refs.static, this.$refs.flush);
    // 初始化数据
    this.init();
    // 设置充放电的类型
    this.setDiagramByType();
  },
  destroyed() {
    // 关闭更新
    diagram.stop();
  },
};
</script>

 src/views/dataTest/components/diagrams/loadReverse/noBuscouple/js/diagramStatus.js

copy from src/views/dataTest/components/diagrams/loadReverse/js/diagramStatus.js
copy to src/views/dataTest/components/diagrams/loadReverse/noBuscouple/js/diagramStatus.js

 src/views/dataTest/components/diagrams/loadReverse/noBuscouple/js/loadCircuitDiagram.js

 src/views/dataTest/realTime.vue

@@ -2092,7 +2092,6 @@
      // this.realTimeXuHang();    // 预估续航时长
      this.diagram.devType = getDevType(data.chargeType, data.buscoupleState);
      this.esVideoSn = data.videoUrl;
      console.log(this.esVideoSn);
      this.table.headers = getTblHeader(data.fbsdeviceId);
      // 如果是61850 则查询最后一次放电数据
      if (regEquipType(data.fbsdeviceId, ["equip61850"])) {
@@ -3491,7 +3490,7 @@
    },
    inversionData(res) {
      // 是逆变的设备
      if (res && regEquipType(this.batt.fbsdeviceId, "BTS9120")) {
      if (res && regEquipType(this.batt.fbsdeviceId, ["BTS9120", "BTS9110"])) {
        // res = res.data;
        let data = {
          commustate: -1, // 通讯状态
@@ -3501,11 +3500,10 @@
        if (res.code && res.data) {
          data = res.data2;
        }

        if (data.rlayworkmode == 1 || data.rlayworkmode == 3) {
          this.buscoupleSwitch = 1;
        } else {
          this.buscoupleSwitch = 0;
        } else {
          this.buscoupleSwitch = 1;
        }
      } else {
        this.buscoupleSwitch = 0;