添加电流动画

whycwx

2021-07-31 a4c43ac50daa0a3d902523745c8cece9a3ee3b40

添加电流动画

 src/pages/AFEinverter/js/gridCircuitDiagram.js

@@ -5,7 +5,7 @@
// import ACImg from '../images/AC.png'

const lineWidth = 2;
const lineStrokeColor = '#105b96';
const lineStrokeColor = '#fff';
const frequencyWidth = 96;
const ACWidth = 124;
const parameterWidth = 85;

 src/pages/boostingTransformer/js/gridCircuitDiagram.js

@@ -5,7 +5,7 @@

const lineWidth = 2;
const lineWidth2 = 1;
const lineStrokeColor = '#105b96';
const lineStrokeColor = '#fff';
const lineStrokeColor2 = '#ccc';
// const frequencyWidth = 96;
// const ACWidth = 124;

 src/pages/dcSwitchboard/dcSwitchboard.vue

@@ -130,7 +130,7 @@
import * as echarts from 'echarts';
// import ContentBox from "@/components/ContentBox";
import gridCircuitDiagram from '@/pages/dcSwitchboard/js/gridCircuitDiagram'
// import diagramStates from '@/pages/home/topoGraphdiagram/js/diagramStates'
import diagramStates from '@/pages/dcSwitchboard/js/diagramStates'
let diagram;
export default {
    chart: {},
@@ -168,6 +168,7 @@
    mounted() {
        let self = this;
        diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
        diagramStates(diagram, 'run1');
        self.initEcharts();
        self.openSocket();
    },

 src/pages/dcSwitchboard/js/diagramStates.js

New file
@@ -0,0 +1,110 @@
// 基础配置
let springGreen = "#50cef5";
let red = "#b370fe";
let scalcRadius = 5;
// 放电状态
function diagramStates(diagram, type) {
    // 断开所有的开关
    // diagram.setOption('km1', 'state', false);
    // diagram.setOption('km2', 'state', false);
    // diagram.setOption('km3', 'state', false);
    // diagram.setOption('km4', 'state', false);
    // 清除电流
    // diagram.del(/^line.*dot$/);
    if (type == "run1") {
        run1Charge(diagram);
    }

}

// 运行状态1
function run1Charge(diagram) {
    // 线条1
    let line1 = diagram.getOption('line1').points;
        diagram.moveDot({
            id: 'line1_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line1[0], line1[1]],
        });
    // 线条2
    let line2 = diagram.getOption('line2').points;
        diagram.moveDot({
            id: 'line2_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line1[1], line2[0]],
        });
    //线条4
    let line9 = diagram.getOption('line9').points;
        diagram.moveDot({
            id: 'line3_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line2[0], line9[1]],
        });
    // 线条5
    let line11 = diagram.getOption('line11').points;  
        diagram.moveDot({
            id: 'line4_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line9[1], line11[0]],
        });
    // 线条6
    let line16 = diagram.getOption('line16').points;  
        diagram.moveDot({
            id: 'line5_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line11[0], line16[1]],
        });
    // 线条7
    let line25 = diagram.getOption('line25').points;  
    diagram.moveDot({
        id: 'line6_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [line16[1], line25[0]],
    });
    diagram.moveDot({
        id: 'line7_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [line25[0], line25[1]],
    });
    // 线条8
    let line47 = diagram.getOption('line47').points;  
    diagram.moveDot({
        id: 'line8_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [line25[1], line47[0]],
    });
    // 线条9
    diagram.moveDot({
        id: 'line9_dot',
        fillStyle: springGreen,
        strokeStyle: springGreen,
        radius: scalcRadius,
        flush: true,
        points: [line47[0], line47[1]],
    });
}
export default diagramStates;

 src/pages/dcSwitchboard/js/gridCircuitDiagram.js

@@ -3,7 +3,7 @@
import speedCabinet from '../images/speedCabinet.png'

const lineWidth = 2;
const lineStrokeColor = '#105b96';
const lineStrokeColor = '#fff';
const frequencyWidth = 96;
const ACWidth = 124;
const parameterWidth = 85;

 src/pages/monitoring/js/diagramStates.js

@@ -1,7 +1,7 @@
// 基础配置
let springGreen = "#50cef5";
let red = "#b370fe";
let scalcRadius = 3;
let scalcRadius = 5;
// 放电状态
function diagramStates(diagram, type) {
    // 断开所有的开关

 src/pages/monitoring/js/gridCircuitDiagram.js

@@ -3,7 +3,7 @@
// import ACImg from '../images/AC.png'

const lineWidth = 3;
const lineStrokeColor = '#105b96';
const lineStrokeColor = '#fff';
const frequencyWidth = 96;
const ACWidth = 124;
const parameterWidth = 85;

 src/pages/switchboard/js/diagramStates.js

New file
@@ -0,0 +1,76 @@
// 基础配置
let springGreen = "#50cef5";
let red = "#b370fe";
let scalcRadius = 3;
// 放电状态
function diagramStates(diagram, type) {
    // 断开所有的开关
    // diagram.setOption('km1', 'state', false);
    // diagram.setOption('km2', 'state', false);
    // diagram.setOption('km3', 'state', false);
    // diagram.setOption('km4', 'state', false);
    // 清除电流
    // diagram.del(/^line.*dot$/);
    if (type == "run1") {
        run1Charge(diagram);
    }

}

// 运行状态1
function run1Charge(diagram) {
    // 线条1
    let line1 = diagram.getOption('line1').points;
    // 线条2
    let line2 = diagram.getOption('line2').points;
        diagram.moveDot({
            id: 'line1_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line1[1], line2[1]],
        });
        
    // 线条4
    let line4 = diagram.getOption('line4').points;
        diagram.moveDot({
            id: 'line2_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line2[1], line4[1]],
        });
    // 线条5
    let line5 = diagram.getOption('line5').points;
        diagram.moveDot({
            id: 'line3_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line4[1], line5[1]],
        });
    // 线条6
    let line6 = diagram.getOption('line6').points;
        diagram.moveDot({
            id: 'line4_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line5[1], line6[1]],
        });
    // 线条10
    let line10 = diagram.getOption('line10').points;
        diagram.moveDot({
            id: 'line5_dot',
            fillStyle: springGreen,
            strokeStyle: springGreen,
            radius: scalcRadius,
            flush: true,
            points: [line6[1], line10[1]],
        });
}
export default diagramStates;

 src/pages/switchboard/js/gridCircuitDiagram.js

@@ -93,7 +93,7 @@
        lineWidth: lineWidth,
        points: [
            [line5[1][0],line5[1][1]],
            [line5[1][0]+70, line5[1][1]]
            [line5[1][0]+55, line5[1][1]]
        ]
    });
    let line7 = diagram.line({
@@ -120,7 +120,7 @@
        lineWidth: lineWidth,
        points: [
            [line8[1][0],line8[1][1]],
            [line8[1][0] - 60, line8[1][1]]
            [line6[1][0], line6[1][1]]
        ]
    });
    let line10 = diagram.line({

 src/pages/switchboard/switchboard.vue

@@ -115,6 +115,7 @@
import getWsUrl from "@/assets/js/getWsUrl";
import * as echarts from 'echarts';
import gridCircuitDiagram from '@/pages/switchboard/js/gridCircuitDiagram'
import diagramStates from '@/pages/switchboard/js/diagramStates'
let diagram;
export default {
    chart: {},
@@ -155,6 +156,7 @@
        
        let self = this;
        diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
        diagramStates(diagram, 'run1');
        self.initEcharts();
        self.openSocket();
    },