提交内容

whychdw

2020-09-07 b13bb5f58acd901da7b2f73758749e5d26d364ae

提交内容

 .env.dev

New file
@@ -0,0 +1 @@
NODE_ENV=dev

 package.json

@@ -3,7 +3,7 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

 src/assets/css/common.css

@@ -44,4 +44,7 @@
.diagram-flush canvas {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    -webkit-object-fit: contain;
    object-fit: contain;
}

 src/assets/js/axios.js

@@ -2,7 +2,7 @@
import router from '@/router/index.js';

// 添加请求拦截器
/* axios.interceptors.request.use(function (config) {
axios.interceptors.request.use(function (config) {
    if (process.env.NODE_ENV != 'dev') {
        config.url = config.url.replace('/yckj', '');
    }
@@ -11,7 +11,7 @@
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
}); */
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {

 src/assets/js/diagram/circuitDiagram.js

@@ -1,4 +1,10 @@
import Diagram from './index'
import eleGroupImage from './images/elegroup.png'
import loaderImage from './images/load.png'
import screenImage from './images/screen.png'
import lightDangerImage from './images/light-danger.png'
import lightSuccessImage from './images/light-success.png'

function circuitDiagram(stc, flush) {
    let diagram = new Diagram();
    diagram.setCanvas(stc, flush);
@@ -9,7 +15,7 @@
        strokeStyle: '#FFFFFF',
        points: [
            start,
            [1000, start[1]],
            [950, start[1]],
        ]
    });
    // 虚线2
@@ -36,8 +42,8 @@
            dashPoints3[1],
            start,
        ],
        flush: true
    });

    // 充放电单元配置项
    let options = {
        top: start,
@@ -50,6 +56,11 @@
    
    // 绘制蓄电池组单元
    let battGroup = drawBattGroup(diagram, chargeAndDischarge);

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

    return diagram;
}

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

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

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

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

    // 线条2
    let line2 = diagram.line({
        id: 'line1',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
@@ -93,6 +141,7 @@

    // 线条3
    let line3 = diagram.line({
        id: 'line2',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
@@ -103,6 +152,7 @@

    // 线条4
    let line4 = diagram.line({
        id: 'line3',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
@@ -113,6 +163,7 @@

    // 线条5
    let line5 = diagram.line({
        id: 'line4',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
@@ -123,6 +174,7 @@

    // 线条6
    let line6 = diagram.line({
        id: 'line5',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
@@ -133,6 +185,7 @@

    // 线条7
    let line7 = diagram.line({
        id: 'line6',
        strokeStyle: red,
        lineWidth: lineWidth,
        points: [
@@ -143,11 +196,12 @@

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

@@ -172,15 +226,35 @@
    });

    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]
    });

    return {
@@ -204,14 +278,312 @@
    let springGreen = options.springGreen;
    let red = options.red;
    let lineWidth = 3;
    
    // BAT1
    let bat1 = diagram.bat({
        strokeStyle: springGreen,
        point: [bottom[0], start[1]]
    });

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

    // BAT2
    let bat2 = diagram.bat({
        strokeStyle: springGreen,
        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({
        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]+50],
        ]
    });

    // 绘制电池组1
    let width1 = 70;
    let eleGroup1 = diagram.drawImage({
        id: 'eleGroup1',
        point: [line5[1][0]-width1/2, line5[1][1]],
        url: eleGroupImage,
        width: width1,
        height: width1*25/61,
    });
    // 绘制虚线
    let dashLine1 = diagram.dashLine({
        strokeStyle: springGreen,
        lineWidth: 4,
        points: [
            eleGroup1.bottom,
            [eleGroup1.bottom[0], eleGroup1.bottom[1]+40]
        ],
    });
    // 电池组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({
        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,
        state: false
    });

    // 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]]
        ]
    });

    return {
        bat1: bat1,
        line6: line6,
        springGreen: springGreen,
        red: red,
        lineWidth: lineWidth
    };
}

// 负载单元
function loaderMoudle(diagram, options) {
    // 基础配置
    let right = 80;
    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 = 70;
    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],
        ]
    });
}

 src/assets/js/diagram/diagramStates.js

New file
@@ -0,0 +1,574 @@
import lightDangerImage from './images/light-danger.png'
import lightSuccessImage from './images/light-success.png'
// 基础配置
let springGreen = "#00FF7F";
let red = "#FF0000";
// 放电状态
function diagramStates(diagram, type) {
    // 断开所有的开关
    diagram.setOption('km1', 'state', false);
    diagram.setOption('km2', 'state', false);
    diagram.setOption('km3', 'state', false);

    // 修改充放电模块的状态
    diagram.setOption('dischargeState', 'url', lightSuccessImage);
    diagram.setOption('chargeState', 'url', lightSuccessImage);

    // 清除电流
    diagram.del(/^line.*dot$/);

    switch(type) {
        case 'discharge':
            discharge(diagram);
        break;
        case 'charge':
            charge(diagram);
        break;
        case 'float':
            floatCharge(diagram);
        break;
        default:
            console.log('默认状态');
        break;
    }
}

// 放电状态
function discharge(diagram) {
    // 关闭km2和km3
    diagram.setOption('km2', 'state', true);
    diagram.setOption('km3', 'state', true);

    // 修改充放电模块的状态
    diagram.setOption('dischargeState', 'url', lightDangerImage);

    // 绘制可移动的点
    let line1 = diagram.getOption('line1').points;
    diagram.moveDot({
        id: 'line1_dot',
        flush: true,
        points: line1,
    });

    // 线条2
    let line2 = diagram.getOption('line2').points;
    diagram.moveDot({
        id: 'line2_dot',
        flush: true,
        points: line2,
    });

    // 线条3
    let line8 = diagram.getOption('line8').points;
    let line8Len = line8[1][0] - line8[0][0];
    // 线条8上的第一个点
    diagram.moveDot({
        id: 'line8_1_dot',
        flush: true,
        points: [
            line8[0],
            [line8[0][0]+line8Len/3, line8[0][1]]
        ],
    });
    // 线条8上的第二个点
    diagram.moveDot({
        id: 'line8_2_dot',
        flush: true,
        points: [
            [line8[0][0]+line8Len/3, line8[0][1]],
            [line8[0][0]+line8Len*2/3, line8[0][1]]
        ],
    });

    // 线条8上的第3个点
    diagram.moveDot({
        id: 'line8_3_dot',
        flush: true,
        points: [
            [line8[0][0]+line8Len*2/3, line8[0][1]],
            line8[1]
        ],
    });

    // 线条15
    let line15 = diagram.getOption('line15').points;
    diagram.moveDot({
        id: 'line15_dot',
        flush: true,
        points: line15,
    });

    // 线条16
    let line16 = diagram.getOption('line16').points;
    diagram.moveDot({
        id: 'line16_dot',
        flush: true,
        points: line16,
    });

    // 线条17
    let line17 = diagram.getOption('line17').points;
    diagram.moveDot({
        id: 'line17_dot',
        flush: true,
        points: line17,
    });

    // 线条18
    let line18 = diagram.getOption('line18').points;
    diagram.moveDot({
        id: 'line18_dot',
        flush: true,
        points: line18,
    });

    // 线条19
    let line19 = diagram.getOption('line19').points;
    diagram.moveDot({
        id: 'line19_dot',
        flush: true,
        points: line19,
    });

    // 线条20
    let line20 = diagram.getOption('line20').points;
    diagram.moveDot({
        id: 'line20_dot',
        flush: true,
        points: line20,
    });

    // 线条12
    let line12 = diagram.getOption('line12').points;
    diagram.moveDot({
        id: 'line12_dot',
        flush: true,
        points: [
            line12[1],
            line12[0]
        ],
    });

    // 线条11
    let line11 = diagram.getOption('line11').points;
    diagram.moveDot({
        id: 'line11_dot',
        flush: true,
        points: [
            line11[1],
            line11[0]
        ],
    });

    // 线条10
    let line10 = diagram.getOption('line10').points;
    diagram.moveDot({
        id: 'line10_dot',
        flush: true,
        points: [
            line10[1],
            line10[0]
        ],
    });

    // 线条9
    let line9 = diagram.getOption('line9').points;
    diagram.moveDot({
        id: 'line9_dot',
        flush: true,
        points: [
            line9[1],
            line9[0]
        ],
    });

    // 线条7
    let line7 = diagram.getOption('line7').points;
    diagram.moveDot({
        id: 'line7_dot',
        flush: true,
        points: [
            line7[1],
            line7[0]
        ],
    });

    // 线条5
    let line5 = diagram.getOption('line5').points;
    diagram.moveDot({
        id: 'line5_dot',
        flush: true,
        points: line5,
    });

    // 线条6
    let line6 = diagram.getOption('line6').points;
    diagram.moveDot({
        id: 'line6_dot',
        flush: true,
        points: line6,
    });
}

// 充电状态
function charge(diagram) {
    // 关闭km2和km3
    diagram.setOption('km2', 'state', true);
    diagram.setOption('km3', 'state', true);

    // 修改充放电模块的状态
    diagram.setOption('chargeState', 'url', lightDangerImage);
   
    // 线条3
    let line3 = diagram.getOption('line3').points;
    diagram.moveDot({
        id: 'line3_dot',
        fillStyle: springGreen,
        flush: true,
        points: line3,
    });

    // 线条4
    let line4 = diagram.getOption('line4').points;
    diagram.moveDot({
        id: 'line4_dot',
        fillStyle: springGreen,
        flush: true,
        points: line4,
    });

    // 线条7
    let line7 = diagram.getOption('line7').points;
    diagram.moveDot({
        id: 'line7_dot',
        fillStyle: springGreen,
        flush: true,
        points: line7,
    });

    // 线条9
    let line9 = diagram.getOption('line9').points;
    diagram.moveDot({
        id: 'line9_dot',
        fillStyle: springGreen,
        flush: true,
        points: line9,
    });

    // 线条10
    let line10 = diagram.getOption('line10').points;
    diagram.moveDot({
        id: 'line10_dot',
        fillStyle: springGreen,
        flush: true,
        points: line10,
    });

    // 线条11
    let line11 = diagram.getOption('line11').points;
    diagram.moveDot({
        id: 'line11_dot',
        fillStyle: springGreen,
        flush: true,
        points: line11,
    });

    // 线条12
    let line12 = diagram.getOption('line12').points;
    diagram.moveDot({
        id: 'line12_dot',
        fillStyle: springGreen,
        flush: true,
        points: line12,
    });

    // 线条20
    let line20 = diagram.getOption('line20').points;
    diagram.moveDot({
        id: 'line20_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line20[1],
            line20[0]
        ],
    });

    // 线条19
    let line19 = diagram.getOption('line19').points;
    diagram.moveDot({
        id: 'line19_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line19[1],
            line19[0]
        ],
    });

    // 线条18
    let line18 = diagram.getOption('line18').points;
    diagram.moveDot({
        id: 'line18_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line18[1],
            line18[0]
        ],
    });

    // 线条17
    let line17 = diagram.getOption('line17').points;
    diagram.moveDot({
        id: 'line17_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line17[1],
            line17[0]
        ],
    });
    
    // 线条16
    let line16 = diagram.getOption('line16').points;
    diagram.moveDot({
        id: 'line16_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line16[1],
            line16[0]
        ],
    });

    // 线条15
    let line15 = diagram.getOption('line15').points;
    diagram.moveDot({
        id: 'line15_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line15[1],
            line15[0]
        ],
    });

    // 线条22
    let line22 = diagram.getOption('line22').points;
    diagram.moveDot({
        id: 'line22_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line22[1],
            line22[0]
        ],
    });

    // 线条21
    let line21 = diagram.getOption('line21').points;
    diagram.moveDot({
        id: 'line21_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line21[1],
            line21[0]
        ],
    });

    // 线条8
    let line8 = diagram.getOption('line8').points;
    let line13 = diagram.getOption('line13').points;
    diagram.moveDot({
        id: 'line8_1_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line8[1],
            line13[0]
        ],
    });
    diagram.moveDot({
        id: 'line8_2_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line13[0],
            line8[0],
        ],
    });
}

// 浮充状态
function floatCharge(diagram) {
    // 关闭km1
    diagram.setOption('km1', 'state', true);

    // 线条10
    let line10 = diagram.getOption('line10').points;
    diagram.moveDot({
        id: 'line10_dot',
        fillStyle: springGreen,
        flush: true,
        points: line10,
    });

    // 线条11
    let line11 = diagram.getOption('line11').points;
    diagram.moveDot({
        id: 'line11_dot',
        fillStyle: springGreen,
        flush: true,
        points: line11,
    });

    // 线条12
    let line12 = diagram.getOption('line12').points;
    diagram.moveDot({
        id: 'line12_dot',
        fillStyle: springGreen,
        flush: true,
        points: line12,
    });

    // 线条20
    let line20 = diagram.getOption('line20').points;
    diagram.moveDot({
        id: 'line20_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line20[1],
            line20[0]
        ],
    });

    // 线条19
    let line19 = diagram.getOption('line19').points;
    diagram.moveDot({
        id: 'line19_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line19[1],
            line19[0]
        ],
    });

    // 线条18
    let line18 = diagram.getOption('line18').points;
    diagram.moveDot({
        id: 'line18_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line18[1],
            line18[0]
        ],
    });

    // 线条17
    let line17 = diagram.getOption('line17').points;
    diagram.moveDot({
        id: 'line17_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line17[1],
            line17[0]
        ],
    });
    
    // 线条16
    let line16 = diagram.getOption('line16').points;
    diagram.moveDot({
        id: 'line16_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line16[1],
            line16[0]
        ],
    });

    // 线条15
    let line15 = diagram.getOption('line15').points;
    diagram.moveDot({
        id: 'line15_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line15[1],
            line15[0]
        ],
    });

    // 线条22
    let line22 = diagram.getOption('line22').points;
    diagram.moveDot({
        id: 'line22_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line22[1],
            line22[0]
        ],
    });

    // 线条21
    let line21 = diagram.getOption('line21').points;
    diagram.moveDot({
        id: 'line21_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line21[1],
            line21[0]
        ],
    });

    // 线条8
    let line8 = diagram.getOption('line8').points;
    let line13 = diagram.getOption('line13').points;
    diagram.moveDot({
        id: 'line8_1_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line8[1],
            line13[0]
        ],
    });

    // 线条13
    diagram.moveDot({
        id: 'line13_dot',
        fillStyle: springGreen,
        flush: true,
        points: line13,
    });

    // 线条14
    let line14 = diagram.getOption('line14').points;
    diagram.moveDot({
        id: 'line14_dot',
        fillStyle: springGreen,
        flush: true,
        points: line14,
    });

    // 线条9
    let line9 = diagram.getOption('line9').points;
    diagram.moveDot({
        id: 'line9_dot',
        fillStyle: springGreen,
        flush: true,
        points: [
            line14[1],
            line9[1],
        ],
    });
}
export default diagramStates;

 src/assets/js/diagram/images/elegroup.png

 src/assets/js/diagram/images/light-danger.png

 src/assets/js/diagram/images/light-success.png

 src/assets/js/diagram/images/light-warn.png

 src/assets/js/diagram/images/load.png

 src/assets/js/diagram/images/screen.png

 src/assets/js/diagram/index.js

@@ -15,7 +15,12 @@
            width: 28,
            lineWidth: 2,
        },
        moveDot: {
            radius: 6,
            step: 1
        }
    };
    
}

// 设置canvas
@@ -33,8 +38,37 @@
    this.flush.width = this.width;
    this.flush.height = this.height;
    this.f_ctx = this.flush.getContext('2d');

    this.startState = false;
    
    // 启动更新
    this.start(true);
};


// 启动更新
Diagram.prototype.start = function(start) {
    if(start) {
        this.startState = true;
    }

    // 停止更新
    if(!this.startState) {
        return;
    }
    // 更新所有的配置项
    this._update();
    // 持续更新函数
    requestAnimationFrame(()=>{
        this.start();
    });
}

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

// 更新整个图表
Diagram.prototype._update = function() {
@@ -94,6 +128,36 @@
    }
};

// 修改配置信息
Diagram.prototype.changeOption = function(id, attr, value, options) {
    for(let i=0; i<options.length; i++) {
        let _option = options[i];
        if(id == _option.id) {
            _option[attr] = value;
            break;
        }
    }
};

// 设置配置的值(仅可以设置刷新层的内容)
Diagram.prototype.setOption = function(id, attr, value) {
    let options = this.flushOptions;
    this.changeOption(id, attr, value, options);
};

// 获取option
Diagram.prototype.getOption = function(id) {
    let options = this.options;
    let result = false;
    for(let i=0; i<options.length; i++) {
        let option = options[i];
        if(option.id == id) {
            result = option;
        }
    }
    return result;
}

// 绘制线
Diagram.prototype.line = function(option) {
    let ctx = option.flush?this.f_ctx:this.s_ctx;       // 获取上下文
@@ -110,6 +174,37 @@
        }
    });
    ctx.stroke();
    if(false) {
        let point = [];
        if(points[0][0] == points[1][0]) {
            // 设置x轴坐标
            point[0] = points[0][0];
            // 设置y轴坐标
            if(points[0][1]>points[1][1]) {
                point[1] = points[1][1] + (points[0][1]-points[1][1])/2;
            }else {
                point[1] = points[1][1] + (points[0][1]-points[1][1])/2;
            }
        }else {
            // 设置y轴坐标
            point[1] = points[0][1];
            // 设置x轴坐标
            if(points[0][0]>points[1][0]) {
                point[0] = points[1][0] + (points[0][0]-points[1][0])/2;
            }else {
                point[0] = points[1][0] + (points[0][0]-points[1][0])/2;
            }

        }
        this.text({
            text: option.id?option.id:'',
            point: point
        });
    }
    // 设置执行的方法
    option.method = "line";
    // 添加配置项
    this.addOptions(option);
    return points;
};

@@ -136,25 +231,11 @@
    return points;
};

// 绘制字体
Diagram.prototype.text = function(option) {
    let ctx = option.flush?this.f_ctx:this.s_ctx;       // 获取上下文
    let point = option.point;
    ctx.beginPath();
    ctx.fillStyle = option.fillStyle?option.fillStyle: '#FFFFFF';
    let fontSize = option.fontSize?option.fontSize:12;
    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.fillText(option.value, point[0], point[1]);
};

// 绘制充放电单元
Diagram.prototype.chargeAndDischarge = function(option) {
    let ctx = option.flush?this.f_ctx:this.s_ctx;       // 获取上下文
    let defaultOption = {
        width: 160,
        width: 120,
    };
    let point = option.point;
    let strokeStyle = '#FFFFFF';
@@ -277,7 +358,9 @@
        fillStyle: option.fillStyle,
        radius: option.radius
    };

    // 添加配置项
    option.method = "arc";
    this.addOptions(option);
    return info;
};

@@ -293,7 +376,10 @@
            result = this.onOff_v(option);
        break;
    }

    // 添加配置项
    option.method = "onOff";
    this.addOptions(option);
    // 返回开关的信息
    return result;
};

@@ -361,7 +447,66 @@
};
// 竖直方向
Diagram.prototype.onOff_h = function(option) {
    console.log(option);
    let point = option.point;
    let state = option.state?true:false;
    let onOffBase = this.opts.onOffBase;

    // 开关的第一个圆
    let arc1 = this.arc({
        point: [point[0], point[1]+onOffBase.radius],
        flush: option.flush,
        fillStyle: '#ccc',
        strokeStyle: '#ccc',
        radius: onOffBase.radius
    });

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

    let line1;
    switch(option.direction) {
        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]
                    ],
                ],
                flush: option.flush,
                strokeStyle: state?'#FF0000':'#7AD038',
                lineWidth: onOffBase.lineWidth
            });
        break;
        default:
            // 绘制线条
            line1 = this.line({
                points: [
                    arc2.top,
                    [
                        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?'#FF0000':'#7AD038',
                lineWidth: onOffBase.lineWidth
            });
        break;
    }
    return {
        arc1: arc1,
        arc2: arc2,
        line1: line1
    }
};

// BAT
@@ -369,16 +514,176 @@
    let ctx = option.flush?this.f_ctx:this.s_ctx;
    let point = option.point;
    let bat = {
        width: 16,
        width: 14
    };
    ctx.fillStyle = option.fillStyle?option.fillStyle:"#FF0000";
    ctx.strokeStyle = option.strokeStyle;
    ctx.lineWidth = option.lineWidth;
    ctx.lineWidth = option.lineWidth?option.lineWidth: 3;
    
    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]]
    }
};

// 绘制图片
Diagram.prototype.drawImage = function(option) {
    let ctx = option.flush?this.f_ctx:this.s_ctx;
    let point = option.point;
    // 绘制内容
    if(!option.hide) {
        let img = new Image();
        img.src = option.url;
        if(option.flush) {
            ctx.drawImage(img, point[0], point[1], option.width, option.height);
        }else {
            img.onload = function() {
                ctx.drawImage(img, point[0], point[1], option.width, option.height);
            }
        }
        
    }

    // 返回图片信息
    let info = {
        tl: [point[0], point[1]],
        tr: [point[0]+option.width, point[1]],
        bl: [point[0], point[1]+option.height],
        br: [point[0]+option.width, point[1]+option.height],
        left: [point[0], point[1]+option.height/2],
        right: [point[0]+option.width, point[1]+option.height/2],
        top: [point[0]+option.width/2, point[1]],
        bottom: [point[0]+option.width/2, point[1]+option.height],
        width: option.width,
        height: option.height,
    };

    // 设置执行的方法
    option.method = "drawImage";
    // 添加配置项
    this.addOptions(option);
    return info;
};

// 绘制字体
Diagram.prototype.text = function(option) {
    let ctx = option.flush?this.f_ctx:this.s_ctx;
    let point = option.point;
    let fontSize = option.fontSize?option.fontSize:12;
    let texts = option.text.split('&');
    ctx.beginPath();
    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';
    texts.forEach((text, index)=> {
        if(index == 0 ) {
            ctx.fillText(text, point[0], point[1]+fontSize*index);
        }else {
            ctx.fillText(text, point[0], point[1]+(fontSize+4)*index);
        }
        
    });

    // 设置执行的方法
    option.method = "text";
    // 添加配置项
    this.addOptions(option);
};

// 绘制可移动的点
Diagram.prototype.moveDot = function(option) {
    let ctx = this.f_ctx;
    let opts = this.opts.moveDot;
    let points = option.points;
    let start = option.start?option.start:[points[0][0], points[0][1]];
    let fillStyle = option.fillStyle?option.fillStyle:"#FF0000";
    let strokeStyle = option.strokeStyle?option.strokeStyle: "#FF0000";
    if(this.getOption(option.id)) {
        switch(option.type) {
            case 'up':
                start[1] -= opts.step;
                // 约束限制
                if(start[1] < points[1][1]) {
                    start[1] = points[0][1];
                }
            break;
            case 'down':
                start[1] += opts.step;
                // 约束限制
                if(start[1] > points[1][1]) {
                    start[1] = points[0][1];
                }
            break;
            case 'left':
                start[0] += opts.step;
                // 约束限制
                if(start[0] > points[1][0]) {
                    start[0] = points[0][0];
                }
            break;
            case  'right':
                start[0] -= opts.step;
                // 约束限制
                if(start[0] < points[1][0]) {
                    start[0] = points[0][0];
                }
        }
        // 设置值
        this.setOption(option.id, 'start', start);
    }else {
        // 竖直运动
        if(points[0][0] == points[1][0]) {
            // 向上运动
            if(points[0][1]>points[1][1]) {
                option.type = 'up';
            }else {
                option.type = 'down';
            }
        }else {
            // 向左运动
            if(points[0][0] < points[1][0]) {
                option.type = 'left';
            }else {
                option.type = 'right';
            }
        }
        option.start = start;
    }
    this.arc({
        flush: true,
        point: start,
        fillStyle: fillStyle,
        strokeStyle: strokeStyle,
        radius: opts.radius
    });

    // 添加配置项
    option.method = "moveDot";
    this.addOptions(option);
};

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

    // 清空刷新对象
    this.flushOptions = this.flushOptions.filter(item=>{
        if(!pattern.test(item.id)) {
            return item;
        }
    });
};

export default Diagram;

 src/pages/dataTest/CircuitDiagram.vue

@@ -7,10 +7,16 @@

<script>
import circuitDiagram from '../../assets/js/diagram/circuitDiagram'
import diagramStates from '../../assets/js/diagram//diagramStates'

export default {
    mounted() {
        circuitDiagram(this.$refs.static, this.$refs.flush);
        let diagram = circuitDiagram(this.$refs.static, this.$refs.flush);
        // diagramStates(diagram, 'discharge');

        //setTimeout(()=>{
            diagramStates(diagram, 'discharge');
        //}, 5000);
    }
}
</script>