| | |
| | | import * as echarts from 'echarts'; |
| | | // import ContentBox from "@/components/ContentBox"; |
| | | import gridCircuitDiagram from '@/pages/AFEinverter/js/gridCircuitDiagram' |
| | | // import diagramStates from '@/pages/home/topoGraphdiagram/js/diagramStates' |
| | | import diagramStates from '@/pages/AFEinverter/js/diagramStates' |
| | | let diagram; |
| | | export default { |
| | | chart: {}, |
| | |
| | | mounted() { |
| | | let self = this; |
| | | diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush); |
| | | diagramStates(diagram, 'run1'); |
| | | self.initEcharts(); |
| | | self.openSocket(); |
| | | window.addEventListener('resize', () => { |
| | |
| | | bottom: '30' |
| | | }, |
| | | tooltip: { |
| | | "trigger":"axis", |
| | | show: true |
| | | }, |
| | | xAxis: { |
New file |
| | |
| | | // 基础配置 |
| | | 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('line5').points; |
| | | diagram.moveDot({ |
| | | id: 'line1_dot', |
| | | fillStyle: springGreen, |
| | | strokeStyle: springGreen, |
| | | radius: scalcRadius, |
| | | flush: true, |
| | | points: [line1[1], line1[0]], |
| | | }); |
| | | // 线条1 |
| | | let line2 = diagram.getOption('line3').points; |
| | | // 线条2 |
| | | let line3 = diagram.getOption('line2').points; |
| | | diagram.moveDot({ |
| | | id: 'line2_dot', |
| | | fillStyle: springGreen, |
| | | strokeStyle: springGreen, |
| | | radius: scalcRadius, |
| | | flush: true, |
| | | points: [line2[1], line3[0]], |
| | | }); |
| | | } |
| | | export default diagramStates; |
| | |
| | | lineWidth: lineWidth, |
| | | points: [ |
| | | [line3[0][0],line3[0][1]], |
| | | [line2[1][0]-10, line2[1][1]] |
| | | [line2[1][0], line2[1][1]] |
| | | ] |
| | | }); |
| | | |
| | |
| | | import getWsUrl from "@/assets/js/getWsUrl"; |
| | | import * as echarts from 'echarts'; |
| | | import gridCircuitDiagram from '@/pages/boostingTransformer/js/gridCircuitDiagram' |
| | | import diagramStates from '@/pages/boostingTransformer/js/diagramStates' |
| | | let diagram; |
| | | export default { |
| | | chart: {}, |
| | |
| | | |
| | | let self = this; |
| | | diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush); |
| | | diagramStates(diagram, 'run1'); |
| | | self.initEcharts(); |
| | | self.openSocket(); |
| | | }, |
| | |
| | | bottom: '30' |
| | | }, |
| | | tooltip: { |
| | | "trigger":"axis", |
| | | show: true |
| | | }, |
| | | xAxis: { |
New file |
| | |
| | | // 基础配置 |
| | | 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('line6').points; |
| | | // 线条2 |
| | | let line2 = diagram.getOption('line5').points; |
| | | diagram.moveDot({ |
| | | id: 'line1_dot', |
| | | fillStyle: springGreen, |
| | | strokeStyle: springGreen, |
| | | radius: scalcRadius, |
| | | flush: true, |
| | | points: [line1[1], line2[0]], |
| | | }); |
| | | |
| | | // 线条1 |
| | | let line3 = diagram.getOption('line3').points; |
| | | // 线条2 |
| | | let line4 = diagram.getOption('line2').points; |
| | | diagram.moveDot({ |
| | | id: 'line2_dot', |
| | | fillStyle: springGreen, |
| | | strokeStyle: springGreen, |
| | | radius: scalcRadius, |
| | | flush: true, |
| | | points: [line3[1], line4[0]], |
| | | }); |
| | | } |
| | | export default diagramStates; |
| | |
| | | bottom: '30' |
| | | }, |
| | | tooltip: { |
| | | "trigger":"axis", |
| | | show: true |
| | | }, |
| | | xAxis: { |
| | |
| | | bottom: '30' |
| | | }, |
| | | tooltip: { |
| | | "trigger":"axis", |
| | | show: true |
| | | }, |
| | | xAxis: { |
| | |
| | | bottom: '30' |
| | | }, |
| | | tooltip: { |
| | | "trigger":"axis", |
| | | show: true |
| | | }, |
| | | xAxis: { |
| | |
| | | // diagram.del(/^line.*dot$/); |
| | | if (type == "run1") { |
| | | run1Charge(diagram); |
| | | // run2Charge(diagram); |
| | | // run3Charge(diagram); |
| | | } |
| | | |
| | | if (type == "run2") { |
| | | run2Charge(diagram); |
| | | } |
| | | |
| | | if (type == "run3") { |
| | | run3Charge(diagram); |
| | | } |
| | | } |
| | | |
| | | // 运行状态1 |
| | |
| | | points: [line5[1], line6[1]], |
| | | }); |
| | | } |
| | | |
| | | // 运行状态2 |
| | | function run2Charge(diagram) { |
| | | |
| | | // // 线条3 |
| | | // let line3 = diagram.getOption('line3').points; |
| | | // // 线条4 |
| | | // let line4 = diagram.getOption('line4').points; |
| | | // diagram.moveDot({ |
| | | // id: 'line3_dot', |
| | | // fillStyle: springGreen, |
| | | // strokeStyle: springGreen, |
| | | // radius: scalcRadius, |
| | | // flush: true, |
| | | // points: [line3[0], line4[1]], |
| | | // }); |
| | | // // 线条5 |
| | | // let line5 = diagram.getOption('line5').points; |
| | | // // 线条6 |
| | | // let line6 = diagram.getOption('line6').points; |
| | | // diagram.moveDot({ |
| | | // id: 'line5_dot', |
| | | // fillStyle: springGreen, |
| | | // strokeStyle: springGreen, |
| | | // radius: scalcRadius, |
| | | // flush: true, |
| | | // points: [line5[0], line6[1]], |
| | | // }); |
| | | } |
| | | |
| | | function run3Charge(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[0], line2[1]], |
| | | }); |
| | | |
| | | // 线条3 |
| | | let line3 = diagram.getOption('line3').points; |
| | | // 线条4 |
| | | let line4 = diagram.getOption('line4').points; |
| | | diagram.moveDot({ |
| | | id: 'line3_dot', |
| | | fillStyle: springGreen, |
| | | strokeStyle: springGreen, |
| | | radius: scalcRadius, |
| | | flush: true, |
| | | points: [line3[0], line4[1]], |
| | | }); |
| | | |
| | | |
| | | // 线条5 |
| | | let line5 = diagram.getOption('line5').points; |
| | | // 线条6 |
| | | let line6 = diagram.getOption('line6').points; |
| | | diagram.moveDot({ |
| | | id: 'line5_dot', |
| | | fillStyle: springGreen, |
| | | strokeStyle: springGreen, |
| | | radius: scalcRadius, |
| | | flush: true, |
| | | points: [line5[0], line6[1]], |
| | | }); |
| | | |
| | | } |
| | | |
| | | |
| | | export default diagramStates; |
| | |
| | | bottom: '30' |
| | | }, |
| | | tooltip: { |
| | | show: true |
| | | show: true, |
| | | "trigger":"axis", |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | |
| | | bottom: '30' |
| | | }, |
| | | tooltip: { |
| | | "trigger":"axis", |
| | | show: true |
| | | }, |
| | | xAxis: { |